diff --git a/packages/core/package.json b/packages/core/package.json index 78b48dc7..20347360 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@viamrobotics/prime-core", - "version": "0.0.66", + "version": "0.0.67", "publishConfig": { "access": "public" }, diff --git a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte index 3089bf9b..665ef35a 100644 --- a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte +++ b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte @@ -1,20 +1,20 @@ - - + + {isOpen ? 'close' : 'open'} - - item + + (isOpen = false)}>item diff --git a/packages/core/src/lib/context-menu/floating-menu.svelte b/packages/core/src/lib/context-menu/floating-menu.svelte index b60cf727..98dafcf0 100644 --- a/packages/core/src/lib/context-menu/floating-menu.svelte +++ b/packages/core/src/lib/context-menu/floating-menu.svelte @@ -5,21 +5,23 @@ import { clickOutside } from '$lib/click-outside'; import { floatingStyle, type FloatingMenuPlacement } from './floating-style'; import ContextMenu from './context-menu.svelte'; +export let isOpen: boolean; export let placement: FloatingMenuPlacement = 'bottom-start'; export let offset = 0; export let buttonCX: cx.Argument = ''; export let menuCX: cx.Argument = ''; +export let label: string | undefined = undefined; +export let describedBy: string | undefined = undefined; +export let onChange: (isOpen: boolean) => unknown; const menuID = uniqueId('floating-menu'); const style = floatingStyle(); +const openMenu = () => onChange(true); +const closeMenu = () => onChange(false); -let isOpen = false; let controlElement: HTMLElement | undefined; let menuElement: HTMLElement | undefined; -const openMenu = () => (isOpen = true); -const closeMenu = () => (isOpen = false); - const handleClickOutside = (element: Element) => { if (!controlElement?.contains(element)) { closeMenu(); @@ -36,20 +38,19 @@ const handleEscape = (event: KeyboardEvent) => { $: style.register({ controlElement, menuElement, placement, offset }); - + {#if isOpen} @@ -65,10 +66,7 @@ $: style.register({ controlElement, menuElement, placement, offset }); id={menuID} cx={menuCX} > - + {/if} diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index f4f99793..a004ff5c 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -48,6 +48,7 @@ provideNotify(); let buttonClickedTimes = 0; let preventHandlerDisabled = true; let modalOpen = false; +let floatingMenuOpen = false; const handleTogglePreventHandler = (event: CustomEvent) => { preventHandlerDisabled = event.detail; @@ -61,6 +62,10 @@ const handleOpenModal = () => { modalOpen = true; }; +const handleFloatingMenuChange = (isOpen: boolean) => { + floatingMenuOpen = isOpen; +}; + const notify = useNotify(); let restrictedValue = ''; @@ -699,14 +704,13 @@ const htmlSnippet = ` - - {isOpen ? 'Close menu' : 'Open menu'} + + {floatingMenuOpen ? 'Close menu' : 'Open menu'} label 1 diff --git a/packages/storybook/src/stories/context-menu.stories.svelte b/packages/storybook/src/stories/context-menu.stories.svelte index 48f64fbe..7a268ca5 100644 --- a/packages/storybook/src/stories/context-menu.stories.svelte +++ b/packages/storybook/src/stories/context-menu.stories.svelte @@ -9,6 +9,12 @@ import { } from '@viamrobotics/prime-core'; const menuID = uniqueId('context-menu'); + +let floatingMenuOpen = false; + +const setFloatingMenuOpen = (isOpen: boolean) => { + floatingMenuOpen = isOpen; +}; @@ -32,17 +38,13 @@ const menuID = uniqueId('context-menu'); - - {isOpen ? 'Close menu' : 'Open menu'} + + {floatingMenuOpen ? 'Close menu' : 'Open menu'} - + Just a label With icon @@ -50,7 +52,7 @@ const menuID = uniqueId('context-menu'); setFloatingMenuOpen(false)} > Danger