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