@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/components/container/container.d.ts

@@ -1,13 +1,13 @@
-import { VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 declare const container: (props?: ({
     size?: "small" | "none" | "medium" | "large" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ContainerProps = PropsWithChildren<VariantProps<typeof container>> & HTMLAttributes<HTMLElement> & {
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-};
+type ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;
 export declare function Container({ children, size, align, className, role, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Container {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=container.d.ts.map

package/dist/components/container/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1D,QAAA,MAAM,SAAS;;;8EAkBb,CAAC;AAEH,KAAK,cAAc,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,GACrE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,2CAUhB"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,QAAA,MAAM,SAAS;;;8EAkBb,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7E,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,2CAUhB;yBAjBe,SAAS"}

package/dist/components/container/container.js

@@ -5,25 +5,26 @@ import styles from './container.module.css.js';
 const container = cva(styles.container, {
     variants: {
         size: {
-            small: styles["container-small"],
-            medium: styles["container-medium"],
-            large: styles["container-large"],
-            none: styles["container-none"],
+            small: styles['container-small'],
+            medium: styles['container-medium'],
+            large: styles['container-large'],
+            none: styles['container-none']
         },
         align: {
-            left: styles["container-align-left"],
-            center: styles["container-align-center"],
-            right: styles["container-align-right"],
+            left: styles['container-align-left'],
+            center: styles['container-align-center'],
+            right: styles['container-align-right']
         }
     },
     defaultVariants: {
-        size: "none",
-        align: "center",
-    },
+        size: 'none',
+        align: 'center'
+    }
 });
-function Container({ children, size, align, className, role = "region", ...props }) {
+function Container({ children, size, align, className, role = 'region', ...props }) {
     return (jsx("div", { className: container({ size, align, className }), role: role, ...props, children: children }));
 }
+Container.displayName = 'Container';
 
 export { Container };
 //# sourceMappingURL=container.js.map

package/dist/components/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./container.module.css\";\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles[\"container-small\"],\n      medium: styles[\"container-medium\"],\n      large: styles[\"container-large\"],\n      none: styles[\"container-none\"],\n    },\n    align: {\n      left: styles[\"container-align-left\"],\n      center: styles[\"container-align-center\"],\n      right: styles[\"container-align-right\"],\n    }\n  },\n  defaultVariants: {\n    size: \"none\",\n    align: \"center\",\n  },\n});\n\ntype ContainerProps = PropsWithChildren<VariantProps<typeof container>> &\n  HTMLAttributes<HTMLElement> & {\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  };\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = \"region\",\n  ...props\n}: ContainerProps) {\n  return (\n    <div \n      className={container({ size, align, className })} \n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n} "],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAQa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ;;;;"}
+{"version":3,"file":"container.js","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\n\nimport styles from './container.module.css';\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles['container-small'],\n      medium: styles['container-medium'],\n      large: styles['container-large'],\n      none: styles['container-none']\n    },\n    align: {\n      left: styles['container-align-left'],\n      center: styles['container-align-center'],\n      right: styles['container-align-right']\n    }\n  },\n  defaultVariants: {\n    size: 'none',\n    align: 'center'\n  }\n});\n\ntype ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = 'region',\n  ...props\n}: ContainerProps) {\n  return (\n    <div\n      className={container({ size, align, className })}\n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nContainer.displayName = 'Container';\n"],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAIa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/context-menu/__tests__/context-menu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=context-menu.test.d.ts.map

package/dist/components/context-menu/__tests__/context-menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.test.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/__tests__/context-menu.test.tsx"],"names":[],"mappings":""}

package/dist/components/context-menu/context-menu-content.cjs

@@ -0,0 +1,92 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('../menu/menu.module.css.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+var utils = require('../menu/utils.cjs');
+
+const ContextMenuContent = ({ ref, className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = menuRoot.useMenuContext();
+    const focusInput = React.useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = React.useRef([-1, 'none']);
+    const containerRef = React.useRef(null);
+    const highlightFirstItem = React.useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = React.useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !utils.isElementSubMenuTrigger(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = React.useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !utils.isElementSubMenuTrigger(item) ||
+            !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = React.useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item || !utils.isElementSubMenuTrigger(item) || !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsxRuntime.jsx(react.ContextMenu.Portal, { children: jsxRuntime.jsx(react.ContextMenu.Positioner, { className: classVarianceAuthority.cx(menu_module.default.positioner), sideOffset: sideOffset, align: align, ...positionerProps, children: jsxRuntime.jsx(react.ContextMenu.Popup, { ref: ref, className: classVarianceAuthority.cx(menu_module.default.content, autocomplete && menu_module.default.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxRuntime.jsxs(react.Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsxRuntime.jsx(react.Autocomplete.Input, { placeholder: searchPlaceholder, className: menu_module.default.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsxRuntime.jsx(react.Autocomplete.List, { className: menu_module.default.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+};
+ContextMenuContent.displayName = 'ContextMenu.Content';
+const ContextMenuSubContent = ({ ...props }) => jsxRuntime.jsx(ContextMenuContent, { sideOffset: 2, ...props });
+ContextMenuSubContent.displayName = 'ContextMenu.SubContent';
+
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuSubContent = ContextMenuSubContent;
+//# sourceMappingURL=context-menu-content.cjs.map

package/dist/components/context-menu/context-menu-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.cjs","sources":["../../../components/context-menu/context-menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from '../menu/utils';\n\nexport interface ContextMenuContentProps\n  extends Omit<\n      ContextMenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ContextMenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const ContextMenuContent = ({\n  ref,\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  render,\n  finalFocus,\n  style,\n  sideOffset = 4,\n  align = 'start',\n  onFocus,\n  ...positionerProps\n}: ContextMenuContentProps) => {\n  const {\n    autocomplete,\n    inputValue,\n    onInputValueChange,\n    inputRef,\n    isInitialRender,\n    parent\n  } = useMenuContext();\n\n  const focusInput = useCallback(() => {\n    if (document?.activeElement !== inputRef?.current)\n      inputRef?.current?.focus();\n  }, [inputRef]);\n  const highlightedItem = useRef<\n    [index: number, reason: 'keyboard' | 'pointer' | 'none']\n  >([-1, 'none']);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const highlightFirstItem = useCallback(() => {\n    if (!isInitialRender?.current) return;\n    isInitialRender.current = false;\n    const item = containerRef.current?.querySelector('[role=\"option\"]');\n    if (!item) return;\n    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n  }, [isInitialRender]);\n\n  const checkAndOpenSubMenu = useCallback(() => {\n    if (highlightedItem.current[0] === -1) return;\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[highlightedItem.current[0]];\n    if (!item || !isElementSubMenuTrigger(item)) return;\n    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n  }, []);\n\n  const checkAndCloseSubMenu = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const blurStaleMenuItem = useCallback((index: number) => {\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[index];\n    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))\n      return;\n    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n  }, []);\n\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cx(styles.positioner)}\n        sideOffset={sideOffset}\n        align={align}\n        {...positionerProps}\n      >\n        <ContextMenuPrimitive.Popup\n          ref={ref}\n          className={cx(\n            styles.content,\n            autocomplete && styles.comboboxContainer,\n            className\n          )}\n          style={style}\n          render={render}\n          finalFocus={finalFocus}\n          role={autocomplete ? 'dialog' : 'menu'}\n          onFocus={\n            autocomplete || parent?.autocomplete\n              ? e => {\n                  focusInput();\n                  e.stopPropagation();\n                  highlightFirstItem();\n                  onFocus?.(e);\n                }\n              : undefined\n          }\n        >\n          {autocomplete ? (\n            <AutocompletePrimitive.Root\n              inline\n              open\n              value={inputValue}\n              onValueChange={(value: string) => onInputValueChange?.(value)}\n              autoHighlight={!!inputValue?.length}\n              mode='none'\n              loopFocus={false}\n              onItemHighlighted={(value, eventDetails) => {\n                if (\n                  highlightedItem.current[1] === 'pointer' &&\n                  eventDetails.reason === 'keyboard'\n                ) {\n                  blurStaleMenuItem(highlightedItem.current[0]);\n                }\n                highlightedItem.current = [\n                  eventDetails.index,\n                  eventDetails.reason\n                ];\n              }}\n            >\n              <AutocompletePrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n                ref={inputRef}\n                onPointerEnter={e => {\n                  focusInput();\n                }}\n                onKeyDown={e => {\n                  if (e.key === 'ArrowLeft') return;\n                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                  if (e.key === 'ArrowRight' || e.key === 'Enter')\n                    checkAndOpenSubMenu();\n                  e.stopPropagation();\n                }}\n                tabIndex={-1}\n              />\n              <AutocompletePrimitive.List\n                className={styles.comboboxContent}\n                ref={containerRef}\n              >\n                {children}\n              </AutocompletePrimitive.List>\n            </AutocompletePrimitive.Root>\n          ) : (\n            children\n          )}\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\nContextMenuContent.displayName = 'ContextMenu.Content';\n\nexport const ContextMenuSubContent = ({\n  ...props\n}: ContextMenuContentProps) => <ContextMenuContent sideOffset={2} {...props} />;\nContextMenuSubContent.displayName = 'ContextMenu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ba;AAaX;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;AAEA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;AAKA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AACA;;AAKA;;;"}

package/dist/components/context-menu/context-menu-content.d.ts

@@ -0,0 +1,13 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+export interface ContextMenuContentProps extends Omit<ContextMenuPrimitive.Positioner.Props, 'render' | 'className' | 'style'>, ContextMenuPrimitive.Popup.Props {
+    searchPlaceholder?: string;
+}
+export declare const ContextMenuContent: {
+    ({ ref, className, children, searchPlaceholder, render, finalFocus, style, sideOffset, align, onFocus, ...positionerProps }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ContextMenuSubContent: {
+    ({ ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-content.d.ts.map

package/dist/components/context-menu/context-menu-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,IAAI,oBAAoB,EACpC,MAAM,gBAAgB,CAAC;AAYxB,MAAM,WAAW,uBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,UAAU,CAAC,KAAK,EACrC,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC,EACD,oBAAoB,CAAC,KAAK,CAAC,KAAK;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB;iIAY5B,uBAAuB;;CA+IzB,CAAC;AAGF,eAAO,MAAM,qBAAqB;mBAE/B,uBAAuB;;CAAqD,CAAC"}

package/dist/components/context-menu/context-menu-content.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ContextMenu, Autocomplete } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { useCallback, useRef } from 'react';
+import styles from '../menu/menu.module.css.js';
+import { useMenuContext } from '../menu/menu-root.js';
+import { isElementSubMenuTrigger, dispatchKeyboardEvent, isElementSubMenuOpen, KEYCODES } from '../menu/utils.js';
+
+const ContextMenuContent = ({ ref, className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = useMenuContext();
+    const focusInput = useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = useRef([-1, 'none']);
+    const containerRef = useRef(null);
+    const highlightFirstItem = useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !isElementSubMenuTrigger(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !isElementSubMenuTrigger(item) ||
+            !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsx(ContextMenu.Portal, { children: jsx(ContextMenu.Positioner, { className: cx(styles.positioner), sideOffset: sideOffset, align: align, ...positionerProps, children: jsx(ContextMenu.Popup, { ref: ref, className: cx(styles.content, autocomplete && styles.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxs(Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsx(Autocomplete.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsx(Autocomplete.List, { className: styles.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+};
+ContextMenuContent.displayName = 'ContextMenu.Content';
+const ContextMenuSubContent = ({ ...props }) => jsx(ContextMenuContent, { sideOffset: 2, ...props });
+ContextMenuSubContent.displayName = 'ContextMenu.SubContent';
+
+export { ContextMenuContent, ContextMenuSubContent };
+//# sourceMappingURL=context-menu-content.js.map

package/dist/components/context-menu/context-menu-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.js","sources":["../../../components/context-menu/context-menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from '../menu/utils';\n\nexport interface ContextMenuContentProps\n  extends Omit<\n      ContextMenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ContextMenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const ContextMenuContent = ({\n  ref,\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  render,\n  finalFocus,\n  style,\n  sideOffset = 4,\n  align = 'start',\n  onFocus,\n  ...positionerProps\n}: ContextMenuContentProps) => {\n  const {\n    autocomplete,\n    inputValue,\n    onInputValueChange,\n    inputRef,\n    isInitialRender,\n    parent\n  } = useMenuContext();\n\n  const focusInput = useCallback(() => {\n    if (document?.activeElement !== inputRef?.current)\n      inputRef?.current?.focus();\n  }, [inputRef]);\n  const highlightedItem = useRef<\n    [index: number, reason: 'keyboard' | 'pointer' | 'none']\n  >([-1, 'none']);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const highlightFirstItem = useCallback(() => {\n    if (!isInitialRender?.current) return;\n    isInitialRender.current = false;\n    const item = containerRef.current?.querySelector('[role=\"option\"]');\n    if (!item) return;\n    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n  }, [isInitialRender]);\n\n  const checkAndOpenSubMenu = useCallback(() => {\n    if (highlightedItem.current[0] === -1) return;\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[highlightedItem.current[0]];\n    if (!item || !isElementSubMenuTrigger(item)) return;\n    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n  }, []);\n\n  const checkAndCloseSubMenu = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const blurStaleMenuItem = useCallback((index: number) => {\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[index];\n    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))\n      return;\n    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n  }, []);\n\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cx(styles.positioner)}\n        sideOffset={sideOffset}\n        align={align}\n        {...positionerProps}\n      >\n        <ContextMenuPrimitive.Popup\n          ref={ref}\n          className={cx(\n            styles.content,\n            autocomplete && styles.comboboxContainer,\n            className\n          )}\n          style={style}\n          render={render}\n          finalFocus={finalFocus}\n          role={autocomplete ? 'dialog' : 'menu'}\n          onFocus={\n            autocomplete || parent?.autocomplete\n              ? e => {\n                  focusInput();\n                  e.stopPropagation();\n                  highlightFirstItem();\n                  onFocus?.(e);\n                }\n              : undefined\n          }\n        >\n          {autocomplete ? (\n            <AutocompletePrimitive.Root\n              inline\n              open\n              value={inputValue}\n              onValueChange={(value: string) => onInputValueChange?.(value)}\n              autoHighlight={!!inputValue?.length}\n              mode='none'\n              loopFocus={false}\n              onItemHighlighted={(value, eventDetails) => {\n                if (\n                  highlightedItem.current[1] === 'pointer' &&\n                  eventDetails.reason === 'keyboard'\n                ) {\n                  blurStaleMenuItem(highlightedItem.current[0]);\n                }\n                highlightedItem.current = [\n                  eventDetails.index,\n                  eventDetails.reason\n                ];\n              }}\n            >\n              <AutocompletePrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n                ref={inputRef}\n                onPointerEnter={e => {\n                  focusInput();\n                }}\n                onKeyDown={e => {\n                  if (e.key === 'ArrowLeft') return;\n                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                  if (e.key === 'ArrowRight' || e.key === 'Enter')\n                    checkAndOpenSubMenu();\n                  e.stopPropagation();\n                }}\n                tabIndex={-1}\n              />\n              <AutocompletePrimitive.List\n                className={styles.comboboxContent}\n                ref={containerRef}\n              >\n                {children}\n              </AutocompletePrimitive.List>\n            </AutocompletePrimitive.Root>\n          ) : (\n            children\n          )}\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\nContextMenuContent.displayName = 'ContextMenu.Content';\n\nexport const ContextMenuSubContent = ({\n  ...props\n}: ContextMenuContentProps) => <ContextMenuContent sideOffset={2} {...props} />;\nContextMenuSubContent.displayName = 'ContextMenu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;AA0Ba;AAaX;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;AAEA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;AAKA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AACA;;AAKA;;"}

package/dist/components/context-menu/context-menu-item.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var cell = require('../menu/cell.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+var utils = require('../menu/utils.cjs');
+
+const ContextMenuItem = ({ children, value, leadingIcon, trailingIcon, render, ...props }) => {
+    const { autocomplete, inputValue, shouldFilter } = menuRoot.useMenuContext();
+    const cell$1 = render ?? (jsxRuntime.jsx(cell.Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !utils.getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsxRuntime.jsx(react.Autocomplete.Item, { value: value, render: jsxRuntime.jsx(react.ContextMenu.Item, { render: cell$1 }), ...props, children: children }));
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.Item, { render: cell$1, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+};
+ContextMenuItem.displayName = 'ContextMenu.Item';
+
+exports.ContextMenuItem = ContextMenuItem;
+//# sourceMappingURL=context-menu-item.cjs.map

package/dist/components/context-menu/context-menu-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.cjs","sources":["../../../components/context-menu/context-menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuItemProps\n  extends ContextMenuPrimitive.Item.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuItem = ({\n  children,\n  value,\n  leadingIcon,\n  trailingIcon,\n  render,\n  ...props\n}: ContextMenuItemProps) => {\n  const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n  const cell = render ?? (\n    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n  );\n\n  // In auto mode, hide items that don't match the search value\n  if (shouldFilter && !getMatch(value, children, inputValue)) {\n    return null;\n  }\n\n  if (autocomplete) {\n    return (\n      <AutocompletePrimitive.Item\n        value={value}\n        render={<ContextMenuPrimitive.Item render={cell} />}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.Item>\n    );\n  }\n\n  return (\n    <ContextMenuPrimitive.Item\n      render={cell}\n      {...props}\n      onFocus={e => {\n        e.stopPropagation();\n        e.preventDefault();\n        e.preventBaseUIHandler();\n      }}\n    >\n      {children}\n    </ContextMenuPrimitive.Item>\n  );\n};\nContextMenuItem.displayName = 'ContextMenu.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BE;;AAKA;AACE;;;;;AAeF;;;;AAQI;AAKN;AACA;;"}

package/dist/components/context-menu/context-menu-item.d.ts

@@ -0,0 +1,10 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+import { CellBaseProps } from '../menu/cell';
+export interface ContextMenuItemProps extends ContextMenuPrimitive.Item.Props, CellBaseProps {
+    value?: string;
+}
+export declare const ContextMenuItem: {
+    ({ children, value, leadingIcon, trailingIcon, render, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-item.d.ts.map

package/dist/components/context-menu/context-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,IAAI,oBAAoB,EACpC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAQ,aAAa,EAAE,MAAM,cAAc,CAAC;AAInD,MAAM,WAAW,oBACf,SAAQ,oBAAoB,CAAC,IAAI,CAAC,KAAK,EACrC,aAAa;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,eAAe;uEAOzB,oBAAoB;;CAqCtB,CAAC"}

package/dist/components/context-menu/context-menu-item.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Autocomplete, ContextMenu } from '@base-ui/react';
+import { Cell } from '../menu/cell.js';
+import { useMenuContext } from '../menu/menu-root.js';
+import { getMatch } from '../menu/utils.js';
+
+const ContextMenuItem = ({ children, value, leadingIcon, trailingIcon, render, ...props }) => {
+    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+    const cell = render ?? (jsx(Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsx(Autocomplete.Item, { value: value, render: jsx(ContextMenu.Item, { render: cell }), ...props, children: children }));
+    }
+    return (jsx(ContextMenu.Item, { render: cell, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+};
+ContextMenuItem.displayName = 'ContextMenu.Item';
+
+export { ContextMenuItem };
+//# sourceMappingURL=context-menu-item.js.map

package/dist/components/context-menu/context-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.js","sources":["../../../components/context-menu/context-menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuItemProps\n  extends ContextMenuPrimitive.Item.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuItem = ({\n  children,\n  value,\n  leadingIcon,\n  trailingIcon,\n  render,\n  ...props\n}: ContextMenuItemProps) => {\n  const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n  const cell = render ?? (\n    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n  );\n\n  // In auto mode, hide items that don't match the search value\n  if (shouldFilter && !getMatch(value, children, inputValue)) {\n    return null;\n  }\n\n  if (autocomplete) {\n    return (\n      <AutocompletePrimitive.Item\n        value={value}\n        render={<ContextMenuPrimitive.Item render={cell} />}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.Item>\n    );\n  }\n\n  return (\n    <ContextMenuPrimitive.Item\n      render={cell}\n      {...props}\n      onFocus={e => {\n        e.stopPropagation();\n        e.preventDefault();\n        e.preventBaseUIHandler();\n      }}\n    >\n      {children}\n    </ContextMenuPrimitive.Item>\n  );\n};\nContextMenuItem.displayName = 'ContextMenu.Item';\n"],"names":[],"mappings":";;;;;;;;;AA0BE;;AAKA;AACE;;;;;AAeF;;;;AAQI;AAKN;AACA;;"}

package/dist/components/context-menu/context-menu-misc.cjs

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('../menu/menu.module.css.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+
+const ContextMenuGroup = ({ className, children, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return jsxRuntime.jsx(React.Fragment, { children: children });
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.Group, { className: classVarianceAuthority.cx(className), ...props, children: children }));
+};
+ContextMenuGroup.displayName = 'ContextMenu.Group';
+const ContextMenuLabel = ({ className, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.GroupLabel, { className: classVarianceAuthority.cx(menu_module.default.label, className), ...props }));
+};
+ContextMenuLabel.displayName = 'ContextMenu.Label';
+const ContextMenuSeparator = ({ className, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { role: 'separator', className: classVarianceAuthority.cx(menu_module.default.separator, className), ...props }));
+};
+ContextMenuSeparator.displayName = 'ContextMenu.Separator';
+const ContextMenuEmptyState = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(menu_module.default.empty, className), ...props, children: children }));
+ContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';
+
+exports.ContextMenuEmptyState = ContextMenuEmptyState;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+//# sourceMappingURL=context-menu-misc.cjs.map

package/dist/components/context-menu/context-menu-misc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-misc.cjs","sources":["../../../components/context-menu/context-menu-misc.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, Fragment } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\n\nexport type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;\nexport const ContextMenuGroup = ({\n  className,\n  children,\n  ...props\n}: ContextMenuGroupProps) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return <Fragment>{children}</Fragment>;\n  }\n\n  return (\n    <ContextMenuPrimitive.Group className={cx(className)} {...props}>\n      {children}\n    </ContextMenuPrimitive.Group>\n  );\n};\nContextMenuGroup.displayName = 'ContextMenu.Group';\n\nexport type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props;\nexport const ContextMenuLabel = ({\n  className,\n  ...props\n}: ContextMenuLabelProps) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n};\nContextMenuLabel.displayName = 'ContextMenu.Label';\n\nexport const ContextMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<'div'>) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <div\n      role='separator'\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n};\nContextMenuSeparator.displayName = 'ContextMenu.Separator';\n\nexport const ContextMenuEmptyState = ({\n  className,\n  children,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div className={cx(styles.empty, className)} {...props}>\n    {children}\n  </div>\n);\nContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';\n"],"names":[],"mappings":";;;;;;;;;;AASO;AAKL;;AAGE;;AAGF;AAKF;AACA;AAGO;AAIL;;AAGE;;;AASJ;AACA;AAEO;AAIL;;AAGE;;;AAUJ;AACA;AAEO;AASP;;;;;"}

package/dist/components/context-menu/context-menu-misc.d.ts

@@ -0,0 +1,21 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+import { ComponentProps } from 'react';
+export type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;
+export declare const ContextMenuGroup: {
+    ({ className, children, ...props }: ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props;
+export declare const ContextMenuLabel: {
+    ({ className, ...props }: ContextMenuLabelProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export declare const ContextMenuSeparator: {
+    ({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export declare const ContextMenuEmptyState: {
+    ({ className, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-misc.d.ts.map

package/dist/components/context-menu/context-menu-misc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-misc.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-misc.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;AACrE,eAAO,MAAM,gBAAgB;wCAI1B,qBAAqB;;CAYvB,CAAC;AAGF,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,UAAU,CAAC,KAAK,CAAC;AAC1E,eAAO,MAAM,gBAAgB;8BAG1B,qBAAqB;;CAavB,CAAC;AAGF,eAAO,MAAM,oBAAoB;8BAG9B,eAAe,KAAK,CAAC;;CAcvB,CAAC;AAGF,eAAO,MAAM,qBAAqB;wCAI/B,eAAe,KAAK,CAAC;;CAIvB,CAAC"}

package/dist/components/context-menu/context-menu-misc.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ContextMenu } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { Fragment } from 'react';
+import styles from '../menu/menu.module.css.js';
+import { useMenuContext } from '../menu/menu-root.js';
+
+const ContextMenuGroup = ({ className, children, ...props }) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx(ContextMenu.Group, { className: cx(className), ...props, children: children }));
+};
+ContextMenuGroup.displayName = 'ContextMenu.Group';
+const ContextMenuLabel = ({ className, ...props }) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsx(ContextMenu.GroupLabel, { className: cx(styles.label, className), ...props }));
+};
+ContextMenuLabel.displayName = 'ContextMenu.Label';
+const ContextMenuSeparator = ({ className, ...props }) => {
+    const { shouldFilter } = useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsx("div", { role: 'separator', className: cx(styles.separator, className), ...props }));
+};
+ContextMenuSeparator.displayName = 'ContextMenu.Separator';
+const ContextMenuEmptyState = ({ className, children, ...props }) => (jsx("div", { className: cx(styles.empty, className), ...props, children: children }));
+ContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';
+
+export { ContextMenuEmptyState, ContextMenuGroup, ContextMenuLabel, ContextMenuSeparator };
+//# sourceMappingURL=context-menu-misc.js.map

package/dist/components/context-menu/context-menu-misc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-misc.js","sources":["../../../components/context-menu/context-menu-misc.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, Fragment } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\n\nexport type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;\nexport const ContextMenuGroup = ({\n  className,\n  children,\n  ...props\n}: ContextMenuGroupProps) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return <Fragment>{children}</Fragment>;\n  }\n\n  return (\n    <ContextMenuPrimitive.Group className={cx(className)} {...props}>\n      {children}\n    </ContextMenuPrimitive.Group>\n  );\n};\nContextMenuGroup.displayName = 'ContextMenu.Group';\n\nexport type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props;\nexport const ContextMenuLabel = ({\n  className,\n  ...props\n}: ContextMenuLabelProps) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n};\nContextMenuLabel.displayName = 'ContextMenu.Label';\n\nexport const ContextMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<'div'>) => {\n  const { shouldFilter } = useMenuContext();\n\n  if (shouldFilter) {\n    return null;\n  }\n\n  return (\n    <div\n      role='separator'\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n};\nContextMenuSeparator.displayName = 'ContextMenu.Separator';\n\nexport const ContextMenuEmptyState = ({\n  className,\n  children,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div className={cx(styles.empty, className)} {...props}>\n    {children}\n  </div>\n);\nContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';\n"],"names":[],"mappings":";;;;;;;;AASO;AAKL;;AAGE;;AAGF;AAKF;AACA;AAGO;AAIL;;AAGE;;;AASJ;AACA;AAEO;AAIL;;AAGE;;;AAUJ;AACA;AAEO;AASP;;"}

package/dist/components/context-menu/context-menu-root.cjs

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var React = require('react');
+var menuRoot = require('../menu/menu-root.cjs');
+
+const ContextMenuRoot = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const inputRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const isInitialRender = React.useRef(true);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = React.useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = React.useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsxRuntime.jsx(menuRoot.MenuContext, { value: {
+            autocomplete,
+            inputRef,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsxRuntime.jsx(react.ContextMenu.Root, { open: open, onOpenChange: handleOpenChange, loopFocus: false, ...props }) }));
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuSubMenu = ({ autocomplete, autocompleteMode = 'auto', inputValue: providedInputValue, onInputValueChange, defaultInputValue = '', open: providedOpen, onOpenChange, defaultOpen = false, ...props }) => {
+    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = providedOpen ?? internalOpen;
+    const parentContext = menuRoot.useMenuContext();
+    const inputRef = React.useRef(null);
+    const isInitialRender = React.useRef(true);
+    const contentRef = React.useRef(null);
+    const inputValue = providedInputValue ?? internalInputValue;
+    const setValue = React.useCallback((value) => {
+        setInternalInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleOpenChange = React.useCallback((value, eventDetails) => {
+        if (!value && autocomplete) {
+            setValue('');
+            isInitialRender.current = true;
+        }
+        setInternalOpen(value);
+        onOpenChange?.(value, eventDetails);
+    }, [onOpenChange, setValue, autocomplete]);
+    return (jsxRuntime.jsx(menuRoot.MenuContext, { value: {
+            autocomplete,
+            inputRef,
+            parent: parentContext,
+            autocompleteMode,
+            inputValue,
+            onInputValueChange: setValue,
+            open: open,
+            isInitialRender,
+            contentRef
+        }, children: jsxRuntime.jsx(react.ContextMenu.SubmenuRoot, { loopFocus: false, open: open, onOpenChange: handleOpenChange, ...props }) }));
+};
+ContextMenuSubMenu.displayName = 'ContextMenu.SubMenu';
+
+exports.ContextMenuRoot = ContextMenuRoot;
+exports.ContextMenuSubMenu = ContextMenuSubMenu;
+//# sourceMappingURL=context-menu-root.cjs.map