@kadoui/react 2.1.7 → 2.3.7

package/README.md

@@ -93,7 +93,7 @@ Add keyboard navigation (arrow keys) to your UI elements.
 
 **Props:**
 - `direction: "x" | "y"` - Navigation direction
-- `focusOnMount?: boolean` - Auto-focus first element on mount
+- `focusTrap?: boolean` - Auto-focus first element on mount
 - `dir?: "ltr" | "rtl"` - Text direction (defaults to document direction)
 
 **Example:**

package/dist/react-components/AccessNavigation/AccessNavigation.d.ts

@@ -1,8 +1,8 @@
 import { ComponentPropsWithoutRef, RefObject } from "react";
 export type AccessNavigationPropsT = ComponentPropsWithoutRef<"div"> & {
     direction: "y" | "x";
-    focusOnMount?: boolean;
+    focusTrap?: any;
     ref?: RefObject<HTMLDivElement | null>;
 };
-export declare function AccessNavigation({ ref, focusOnMount, direction, dir, onKeyDown, ...p }: AccessNavigationPropsT): import("react/jsx-runtime").JSX.Element;
+export declare function AccessNavigation({ ref, focusTrap, direction, dir, onKeyDown, ...p }: AccessNavigationPropsT): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AccessNavigation.d.ts.map

package/dist/react-components/AccessNavigation/AccessNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessNavigation.d.ts","sourceRoot":"","sources":["../../../src/react-components/AccessNavigation/AccessNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAiB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAI9F,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACrE,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,YAAY,EACZ,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,CAAC,EACL,EAAE,sBAAsB,2CAwExB"}
+{"version":3,"file":"AccessNavigation.d.ts","sourceRoot":"","sources":["../../../src/react-components/AccessNavigation/AccessNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAiB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAI9F,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACrE,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAS,EACT,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,CAAC,EACL,EAAE,sBAAsB,2CAyExB"}

package/dist/react-components/AccessNavigation/AccessNavigation.js

@@ -2,21 +2,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { selectAccessibleChildren } from "../../utils-exports";
-export function AccessNavigation({ ref, focusOnMount, direction, dir, onKeyDown, ...p }) {
+export function AccessNavigation({ ref, focusTrap, direction, dir, onKeyDown, ...p }) {
     const accessNavigationRef = ref || useRef(null);
     useEffect(() => {
-        if (!accessNavigationRef.current)
-            return;
-        const focusableChildren = selectAccessibleChildren(accessNavigationRef.current);
-        if (focusOnMount) {
+        if (focusTrap) {
             setTimeout(() => {
+                if (!accessNavigationRef.current)
+                    return;
+                const focusableChildren = selectAccessibleChildren(accessNavigationRef.current);
                 focusableChildren[0]?.focus();
             }, 150);
         }
-    }, []);
+    }, [focusTrap]);
     const handleKeyDown = (ev) => {
         const focusableChildren = selectAccessibleChildren(ev.currentTarget);
-        if (!focusableChildren.length) {
+        console.log(focusableChildren);
+        if (focusableChildren.length < 2) {
             return;
         }
         const currentDir = (dir ||

package/dist/react-components/Accordion/Accordion.d.ts

@@ -1,9 +1,13 @@
 import { AccordionBody } from "./AccordionBody";
 import { AccordionRoot } from "./AccordionRoot";
+import { AccordionItem } from "./AccordionItem";
 import { AccordionToggle } from "./AccordionToggle";
+import { AccordionContent } from "./AccordionContent";
 export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
     Toggle: typeof AccordionToggle;
     Body: typeof AccordionBody;
+    Content: typeof AccordionContent;
 };
 export * from "./accordionTypes";
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/react-components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/Accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,SAAS;;;CAGpB,CAAC;AAEH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/Accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,SAAS;;;;;CAKpB,CAAC;AAEH,cAAc,kBAAkB,CAAC"}

package/dist/react-components/Accordion/Accordion.js

@@ -1,8 +1,12 @@
 import { AccordionBody } from "./AccordionBody";
 import { AccordionRoot } from "./AccordionRoot";
+import { AccordionItem } from "./AccordionItem";
 import { AccordionToggle } from "./AccordionToggle";
+import { AccordionContent } from "./AccordionContent";
 export const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
     Toggle: AccordionToggle,
-    Body: AccordionBody
+    Body: AccordionBody,
+    Content: AccordionContent,
 });
 export * from "./accordionTypes";

package/dist/react-components/Accordion/AccordionBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionBody.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE,mBAAmB,2CAiBpE"}
+{"version":3,"file":"AccordionBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionBody.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE,mBAAmB,2CAoBpE"}

package/dist/react-components/Accordion/AccordionBody.js

@@ -3,8 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { AccordionContext } from "./AccordionContext";
+import { AccordionItemContext } from "./AccordionItemContext";
 export function AccordionBody({ children, ...p }) {
-    const { isOpen } = use(AccordionContext);
+    const { multiple, accordionState } = use(AccordionContext);
+    const { itemName } = use(AccordionItemContext);
+    const isOpen = multiple ? accordionState.includes(itemName) : accordionState === itemName;
     return (_jsx(AnimatePresence, { children: isOpen ?
             _jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, ...p, children: children })
             : null }));

package/dist/react-components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,3 @@
+import { AccordionContentPropsT } from "./accordionTypes";
+export declare function AccordionContent(p: AccordionContentPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccordionContent.d.ts.map

package/dist/react-components/Accordion/AccordionContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,sBAAsB,2CAIzD"}

package/dist/react-components/Accordion/AccordionContent.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AccordionContent(p) {
+    return (_jsx("div", { ...p }));
+}

package/dist/react-components/Accordion/AccordionContext.d.ts

@@ -1,3 +1,10 @@
-import type { AccordionContextT } from "./accordionTypes";
-export declare const AccordionContext: import("react").Context<AccordionContextT>;
+export declare const AccordionContext: import("react").Context<{
+    multiple: true;
+    accordionState: string[];
+    onAccordionChange: (newItems: string[]) => void;
+} | {
+    multiple?: false;
+    accordionState: string | null;
+    onAccordionChange: (newItems: string | null) => void;
+}>;
 //# sourceMappingURL=AccordionContext.d.ts.map

package/dist/react-components/Accordion/AccordionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,gBAAgB,4CAA4D,CAAC"}
+{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB;;;;;;;;EAA4D,CAAC"}

package/dist/react-components/Accordion/AccordionContext.js

@@ -1,2 +1,3 @@
+"use client";
 import { createContext } from "react";
 export const AccordionContext = createContext({});

package/dist/react-components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,3 @@
+import { AccordionItemPropsT } from "./accordionTypes";
+export declare function AccordionItem({ itemName, children }: AccordionItemPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccordionItem.d.ts.map

package/dist/react-components/Accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAMxE"}

package/dist/react-components/Accordion/AccordionItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccordionItemContext } from "./AccordionItemContext";
+export function AccordionItem({ itemName, children }) {
+    return (_jsx(AccordionItemContext, { value: { itemName }, children: children }));
+}

package/dist/react-components/Accordion/AccordionItemContext.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionItemContextT } from "./accordionTypes";
+export declare const AccordionItemContext: import("react").Context<AccordionItemContextT>;
+//# sourceMappingURL=AccordionItemContext.d.ts.map

package/dist/react-components/Accordion/AccordionItemContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionItemContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,gDAAoE,CAAC"}

package/dist/react-components/Accordion/AccordionItemContext.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const AccordionItemContext = createContext({});

package/dist/react-components/Accordion/AccordionRoot.d.ts

@@ -1,3 +1,3 @@
 import type { AccordionRootPropsT } from "./accordionTypes";
-export declare function AccordionRoot({ children }: AccordionRootPropsT): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionRoot({ multiple, accordionState, onAccordionChange, ...p }: AccordionRootPropsT): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AccordionRoot.d.ts.map

package/dist/react-components/Accordion/AccordionRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionRoot.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAQ9D"}
+{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionRoot.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAqB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE/E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,CAAC,EAAE,EAAE,mBAAmB,2CAMvG"}

package/dist/react-components/Accordion/AccordionRoot.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { AccordionContext } from "./AccordionContext";
-export function AccordionRoot({ children }) {
-    const [isOpen, setOpen] = useState(false);
-    return (_jsx(AccordionContext, { value: { isOpen, setOpen }, children: children }));
+import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
+export function AccordionRoot({ multiple, accordionState, onAccordionChange, ...p }) {
+    return (_jsx(AccordionContext, { value: { multiple, accordionState, onAccordionChange }, children: _jsx(AccessNavigation, { ...p }) }));
 }

package/dist/react-components/Accordion/AccordionToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionToggle.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAcvE"}
+{"version":3,"file":"AccordionToggle.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/AccordionToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG9D,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CA6BvE"}

package/dist/react-components/Accordion/AccordionToggle.js

@@ -2,10 +2,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { AccordionContext } from "./AccordionContext";
+import { AccordionItemContext } from "./AccordionItemContext";
 export function AccordionToggle({ onClick, ...p }) {
-    const { isOpen, setOpen } = use(AccordionContext);
+    const { multiple, accordionState, onAccordionChange } = use(AccordionContext);
+    const { itemName } = use(AccordionItemContext);
+    const isOpen = multiple ? accordionState.includes(itemName) : accordionState === itemName;
     return (_jsx("button", { type: "button", "data-state": isOpen, onClick: (ev) => {
             onClick?.(ev);
-            setOpen((prev) => !prev);
+            if (isOpen) {
+                if (multiple) {
+                    onAccordionChange(accordionState.filter(item => item !== itemName));
+                }
+                else {
+                    onAccordionChange(null);
+                }
+            }
+            else {
+                if (multiple) {
+                    onAccordionChange([...accordionState, itemName]);
+                }
+                else {
+                    onAccordionChange(itemName);
+                }
+            }
         }, ...p }));
 }

package/dist/react-components/Accordion/accordionTypes.d.ts

@@ -1,12 +1,27 @@
 import type { HTMLMotionProps } from "framer-motion";
-import type { ComponentProps, Dispatch, PropsWithChildren, ReactNode, SetStateAction } from "react";
-export type AccordionContextT = {
-    isOpen: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
+import { AccessNavigationPropsT } from "../AccessNavigation/AccessNavigation";
+type MultipleModeT = {
+    multiple: true;
+    accordionState: string[];
+    onAccordionChange: (newItems: string[]) => void;
 };
-export type AccordionRootPropsT = PropsWithChildren;
+type SingleModeT = {
+    multiple?: false;
+    accordionState: string | null;
+    onAccordionChange: (newItems: string | null) => void;
+};
+type MergedModeT = SingleModeT | MultipleModeT;
+export type AccordionContextT = MergedModeT;
+export type AccordionRootPropsT = AccordionContextT & AccessNavigationPropsT;
+export type AccordionItemContextT = {
+    itemName: string;
+};
+export type AccordionItemPropsT = AccordionItemContextT & PropsWithChildren;
 export type AccordionBodyPropsT = HTMLMotionProps<"div">;
+export type AccordionContentPropsT = ComponentProps<"div">;
 export type AccordionTogglePropsT = Omit<ComponentProps<"button">, "type"> & {
     icon?: ReactNode;
 };
+export {};
 //# sourceMappingURL=accordionTypes.d.ts.map

package/dist/react-components/Accordion/accordionTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/accordionTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC"}
+{"version":3,"file":"accordionTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Accordion/accordionTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,sBAAsB,CAAC;AAE7E,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,iBAAiB,CAAC;AAE5E,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC"}

package/dist/react-components/Affix/Affix.d.ts

@@ -1,3 +1,3 @@
 import type { AffixPropsT } from "./affixTypes";
-export declare const Affix: ({ onClick, ...p }: AffixPropsT) => import("react/jsx-runtime").JSX.Element;
+export declare const Affix: ({ viewportOffset, onClick, ...p }: AffixPropsT) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Affix.d.ts.map

package/dist/react-components/Affix/Affix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Affix.d.ts","sourceRoot":"","sources":["../../../src/react-components/Affix/Affix.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,mBAAmB,WAAW,4CA2CnD,CAAC"}
+{"version":3,"file":"Affix.d.ts","sourceRoot":"","sources":["../../../src/react-components/Affix/Affix.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,mCAAmC,WAAW,4CA6CnE,CAAC"}

package/dist/react-components/Affix/Affix.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-export const Affix = ({ onClick, ...p }) => {
+export const Affix = ({ viewportOffset, onClick, ...p }) => {
     const [isVisible, setIsVisible] = useState(false);
     const [lastScrollY, setLastScrollY] = useState(0);
+    const VIEWPORT_OFFSET = viewportOffset || 0.5;
     useEffect(() => {
         const handleScroll = () => {
             const currentScrollY = window.scrollY;
             const viewportHeight = window.innerHeight;
-            const scrollThreshold = viewportHeight * 0.5;
+            const scrollThreshold = viewportHeight * VIEWPORT_OFFSET;
             if (currentScrollY > scrollThreshold && currentScrollY > lastScrollY) {
                 setIsVisible(true);
             }

package/dist/react-components/Affix/affixTypes.d.ts

@@ -1,3 +1,5 @@
 import type { ComponentProps } from "react";
-export type AffixPropsT = ComponentProps<"button">;
+export type AffixPropsT = ComponentProps<"button"> & {
+    viewportOffset?: number;
+};
 //# sourceMappingURL=affixTypes.d.ts.map

package/dist/react-components/Affix/affixTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"affixTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Affix/affixTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"affixTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Affix/affixTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/dist/react-components/Choice/Choice.d.ts

@@ -1,9 +1,7 @@
 import { ChoiceRoot } from "./ChoiceRoot";
 import { ChoiceThumb } from "./ChoiceThumb";
 import { ChoiceToggle } from "./ChoiceToggle";
-import { ChoiceNavigation } from "./ChoiceNavigation";
 export declare const Choice: typeof ChoiceRoot & {
-    Navigation: typeof ChoiceNavigation;
     Toggle: typeof ChoiceToggle;
     Thumb: typeof ChoiceThumb;
 };

package/dist/react-components/Choice/Choice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/Choice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,MAAM;;;;CAIjB,CAAC;AAEH,cAAc,eAAe,CAAC"}
+{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/Choice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM;;;CAGjB,CAAC;AAEH,cAAc,eAAe,CAAC"}

package/dist/react-components/Choice/Choice.js

@@ -1,9 +1,7 @@
 import { ChoiceRoot } from "./ChoiceRoot";
 import { ChoiceThumb } from "./ChoiceThumb";
 import { ChoiceToggle } from "./ChoiceToggle";
-import { ChoiceNavigation } from "./ChoiceNavigation";
 export const Choice = Object.assign(ChoiceRoot, {
-    Navigation: ChoiceNavigation,
     Toggle: ChoiceToggle,
     Thumb: ChoiceThumb
 });

package/dist/react-components/Choice/ChoiceRoot.d.ts

@@ -1,3 +1,3 @@
 import type { ChoiceRootPropsT } from "./choiceTypes";
-export declare function ChoiceRoot({ multiple, activeChoice, setActiveChoice, requiredOne, ...p }: ChoiceRootPropsT): import("react/jsx-runtime").JSX.Element;
+export declare function ChoiceRoot({ multiple, choiceState, onChoiceChange, requiredOne, ...p }: ChoiceRootPropsT): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChoiceRoot.d.ts.map

package/dist/react-components/Choice/ChoiceRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/ChoiceRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtE,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,CAAC,EACL,EAAE,gBAAgB,2CAOlB"}
+{"version":3,"file":"ChoiceRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/ChoiceRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtE,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,WAAW,EACX,GAAG,CAAC,EACL,EAAE,gBAAgB,2CAOlB"}

package/dist/react-components/Choice/ChoiceRoot.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChoiceContext } from "./ChoiceContext";
-export function ChoiceRoot({ multiple, activeChoice, setActiveChoice, requiredOne, ...p }) {
-    return (_jsx(ChoiceContext, { value: { multiple, activeChoice, setActiveChoice, requiredOne }, children: _jsx("div", { ...p }) }));
+import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
+export function ChoiceRoot({ multiple, choiceState, onChoiceChange, requiredOne, ...p }) {
+    return (_jsx(ChoiceContext, { value: { multiple, choiceState, onChoiceChange, requiredOne }, children: _jsx(AccessNavigation, { ...p }) }));
 }

package/dist/react-components/Choice/ChoiceThumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceThumb.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/ChoiceThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,2CAI/C"}
+{"version":3,"file":"ChoiceThumb.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/ChoiceThumb.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,2CAI/C"}

package/dist/react-components/Choice/ChoiceThumb.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ChoiceThumb(p) {
     return (_jsx("span", { ...p }));

package/dist/react-components/Choice/ChoiceToggle.js

@@ -3,30 +3,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { ChoiceContext } from "./ChoiceContext";
 export function ChoiceToggle({ choiceName, onClick, ...p }) {
-    const { multiple, activeChoice, setActiveChoice, requiredOne } = use(ChoiceContext);
+    const { multiple, choiceState, onChoiceChange, requiredOne } = use(ChoiceContext);
     const isActive = multiple
-        ? activeChoice.includes(choiceName)
-        : activeChoice === choiceName;
+        ? choiceState.includes(choiceName)
+        : choiceState === choiceName;
     return (_jsx("button", { type: "button", "data-state": isActive, onClick: (ev) => {
             onClick?.(ev);
             if (isActive) {
                 if (multiple) {
-                    if (!requiredOne || activeChoice.length > 1) {
-                        setActiveChoice((prev) => prev.filter((item) => item !== choiceName));
+                    if (!requiredOne || choiceState.length > 1) {
+                        onChoiceChange(choiceState.filter((item) => item !== choiceName));
                     }
                 }
                 else {
                     if (!requiredOne) {
-                        setActiveChoice(null);
+                        onChoiceChange(null);
                     }
                 }
             }
             else {
                 if (multiple) {
-                    setActiveChoice((prev) => [...prev, choiceName]);
+                    onChoiceChange([...choiceState, choiceName]);
                 }
                 else {
-                    setActiveChoice(choiceName);
+                    onChoiceChange(choiceName);
                 }
             }
         }, ...p }));

package/dist/react-components/Choice/choiceTypes.d.ts

@@ -1,24 +1,23 @@
-import type { ComponentProps, Dispatch, SetStateAction } from "react";
+import type { ComponentProps } from "react";
 import type { AccessNavigationPropsT } from "../AccessNavigation/AccessNavigation";
-type MultiModeT = {
+type MultipleModeT = {
     multiple: true;
-    activeChoice: string[];
-    setActiveChoice: Dispatch<SetStateAction<string[]>>;
+    choiceState: string[];
+    onChoiceChange: (activeChoice: string[]) => void;
 };
 type SingleModeT = {
     multiple?: false;
-    activeChoice: string | null;
-    setActiveChoice: Dispatch<SetStateAction<string | null>>;
+    choiceState: string | null;
+    onChoiceChange: (activeChoice: string | null) => void;
 };
-type MergedModeT = SingleModeT | MultiModeT;
+type MergedModeT = SingleModeT | MultipleModeT;
 export type ChoiceContextT = MergedModeT & {
     requiredOne?: boolean;
 };
-export type ChoiceRootPropsT = ComponentProps<"div"> & ChoiceContextT;
+export type ChoiceRootPropsT = AccessNavigationPropsT & ChoiceContextT;
 export type ChoiceTogglePropsT = Omit<ComponentProps<"button">, "type"> & {
     choiceName: string;
 };
-export type ChoiceNavigationPropsT = AccessNavigationPropsT;
 export type ChoiceThumbPropsT = ComponentProps<"span">;
 export {};
 //# sourceMappingURL=choiceTypes.d.ts.map

package/dist/react-components/Choice/choiceTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choiceTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/choiceTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,IAAI,CAAC;IACf,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC;AAE5C,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACxE,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,sBAAsB,CAAC;AAE5D,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"choiceTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Choice/choiceTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,cAAc,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACxE,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC"}

package/dist/react-components/ContextMenu/ContextMenu.d.ts

@@ -1,10 +1,8 @@
 import { ContextMenuRoot } from "./ContextMenuRoot";
 import { ContextMenuBody } from "./ContextMenuBody";
 import { ContextMenuItem } from "./ContextMenuItem";
-import { ContextMenuNavigation } from "./ContextMenuNavigation";
 export declare const ContextMenu: typeof ContextMenuRoot & {
     Body: typeof ContextMenuBody;
-    Navigation: typeof ContextMenuNavigation;
     Item: typeof ContextMenuItem;
 };
 export * from "./contextMenuTypes";

package/dist/react-components/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,eAAO,MAAM,WAAW;;;;CAItB,CAAC;AAEH,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAO,MAAM,WAAW;;;CAGtB,CAAC;AAEH,cAAc,oBAAoB,CAAC"}

package/dist/react-components/ContextMenu/ContextMenu.js

@@ -1,10 +1,8 @@
 import { ContextMenuRoot } from "./ContextMenuRoot";
 import { ContextMenuBody } from "./ContextMenuBody";
 import { ContextMenuItem } from "./ContextMenuItem";
-import { ContextMenuNavigation } from "./ContextMenuNavigation";
 export const ContextMenu = Object.assign(ContextMenuRoot, {
     Body: ContextMenuBody,
-    Navigation: ContextMenuNavigation,
     Item: ContextMenuItem
 });
 export * from "./contextMenuTypes";

package/dist/react-components/ContextMenu/ContextMenuBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuBody.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,wBAAgB,eAAe,CAAC,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAmB7E"}
+{"version":3,"file":"ContextMenuBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuBody.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGhE,wBAAgB,eAAe,CAAC,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAwB7E"}

package/dist/react-components/ContextMenu/ContextMenuBody.js

@@ -2,9 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
 import { ContextMenuContext } from "./ContextMenuContext";
+import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
 export function ContextMenuBody({ onContextMenu, ...p }) {
     const { contentRef, position, isOpen } = use(ContextMenuContext);
-    return (_jsx("div", { ref: contentRef, "data-state": isOpen, onContextMenu: (ev) => {
+    // useEffect(() => {
+    //   contentRef.current?.focus();
+    // }, [isOpen, position])
+    return (_jsx(AccessNavigation, { ref: contentRef, "data-state": isOpen, focusTrap: position, onContextMenu: (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
             onContextMenu?.(ev);

package/dist/react-components/ContextMenu/ContextMenuContent.d.ts

@@ -0,0 +1,3 @@
+import { ContextMenuContentPropsT } from "./contextMenuTypes";
+export declare function ContextMenuContent({ focusOnMount, ...p }: ContextMenuContentPropsT): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ContextMenuContent.d.ts.map

package/dist/react-components/ContextMenu/ContextMenuContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuContent.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAG,CAAC,EAAE,EAAE,wBAAwB,kDAMlF"}

package/dist/react-components/ContextMenu/ContextMenuContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { ContextMenuContext } from "./ContextMenuContext";
+import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
+export function ContextMenuContent({ focusOnMount, ...p }) {
+    const { isOpen } = use(ContextMenuContext);
+    return isOpen ? (_jsx(AccessNavigation, { focusOnMount: focusOnMount || true, ...p })) : null;
+}

package/dist/react-components/ContextMenu/ContextMenuContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,kBAAkB,8CAAgE,CAAC"}
+{"version":3,"file":"ContextMenuContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,kBAAkB,8CAAgE,CAAC"}

package/dist/react-components/ContextMenu/ContextMenuContext.js

@@ -1,2 +1,3 @@
+"use client";
 import { createContext } from "react";
 export const ContextMenuContext = createContext({});

package/dist/react-components/ContextMenu/ContextMenuRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuRoot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAErF,wBAAgB,eAAe,CAAC,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAyE7E"}
+{"version":3,"file":"ContextMenuRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/ContextMenu/ContextMenuRoot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAErF,wBAAgB,eAAe,CAAC,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAyF7E"}

package/dist/react-components/ContextMenu/ContextMenuRoot.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getBrowserScrollbarWith } from "../../utils-exports";
 import { ContextMenuContext } from "./ContextMenuContext";
+import { getBrowserScrollbarWith } from "../../utils-exports";
 export function ContextMenuRoot({ onContextMenu, ...p }) {
     const [position, setPosition] = useState(undefined);
     const [isOpen, setOpen] = useState(false);
@@ -31,6 +31,15 @@ export function ContextMenuRoot({ onContextMenu, ...p }) {
             document.body.style.paddingRight = "0px";
         }
         ;
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
     }, [isOpen]);
     const handleContextMenu = (ev) => {
         if (!contentRef.current)
@@ -49,7 +58,9 @@ export function ContextMenuRoot({ onContextMenu, ...p }) {
             y = viewportHeight - menuHeight - 10;
         }
         setPosition({ x, y });
-        setOpen(true);
+        if (!isOpen) {
+            setOpen(true);
+        }
     };
     return (_jsx(ContextMenuContext, { value: { contentRef, isOpen, closeHandler, position }, children: _jsx("div", { onContextMenu: ev => {
                 onContextMenu?.(ev);