@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/dist/client/Menu.d.ts

@@ -0,0 +1,624 @@
+import * as react from 'react';
+import { AriaRole, HTMLAttributes, PropsWithChildren } from 'react';
+import { MenuProps, MenuItemProps as MenuItemProps$1, MenuItemCheckboxProps as MenuItemCheckboxProps$1, MenuProviderProps as MenuProviderProps$1, MenuButtonProps, useMenuContext, useMenuStore } from '@ariakit/react/menu';
+import { u as SpacingAlias, v as UniversalMenuItemProps } from '../types-gGaZxCMr.js';
+import { V as VStackProps, D as DividerProps } from '../VStack-DdYKhUxh.js';
+import { P as PressableProps } from '../Pressable-jfrkzoAe.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { B as BoxProps } from '../Box-C9fHZ3nr.js';
+import { useStoreState } from '@ariakit/react';
+import '@yahoo/uds-icons/types';
+import 'motion/react';
+import 'type-fest';
+
+interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
+    gutter?: SpacingAlias;
+    /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
+     *  If you need to disable this, set this prop to true.
+     *
+     *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/hooks/useNestedBorderRadius.ts
+     **/
+    disableAutoBorderRadius?: boolean;
+    /**
+     * `portalRef` is similar to `ref` but is scoped to the portal node. It's
+     * useful when you need to be informed when the portal element is appended to
+     * the DOM or removed from the DOM.
+     *
+     * Live examples:
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     * @example
+     * ```jsx
+     * const [portalElement, setPortalElement] = useState(null);
+     *
+     * <Portal portalRef={setPortalElement} />
+     * ```
+     */
+    portalRef?: MenuProps['portalRef'];
+    /**
+     * Determines whether the element should be rendered as a React Portal.
+     *
+     * Live examples:
+     * - [Combobox with integrated
+     *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     * - [Hovercard with keyboard
+     *   support](https://ariakit.org/examples/hovercard-disclosure)
+     * - [Menubar](https://ariakit.org/components/menubar)
+     * - [Standalone Popover](https://ariakit.org/examples/popover-standalone)
+     * - [Animated Select](https://ariakit.org/examples/select-animated)
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * An HTML element or a memoized callback function that returns an HTML
+     * element to be used as the portal element. By default, the portal element
+     * will be a `div` element appended to the `document.body`.
+     *
+     * Live examples:
+     * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
+     * @example
+     * ```jsx
+     * const [portal, setPortal] = useState(null);
+     *
+     * <Portal portalElement={portal} />
+     * <div ref={setPortal} />
+     * ```
+     * @example
+     * ```jsx
+     * const getPortalElement = useCallback(() => {
+     *   const div = document.createElement("div");
+     *   const portalRoot = document.getElementById("portal-root");
+     *   portalRoot.appendChild(div);
+     *   return div;
+     * }, []);
+     *
+     * <Portal portalElement={getPortalElement} />
+     * ```
+     */
+    portalElement?: MenuProps['portalElement'];
+    /**
+     * Determines whether the popover should hide when the mouse leaves the
+     * popover or the anchor element and there's no _hover intent_, meaning, the
+     * mouse isn't moving toward the popover.
+     *
+     * This can be either a boolean or a callback receiving the mouse move event
+     * that initiated the behavior. The callback should return a boolean.
+     *
+     * **Note**: This behavior won't be triggered when the popover or any of its
+     * descendants are in focus.
+     * @default true
+     */
+    hideOnHoverOutside?: MenuProps['hideOnHoverOutside'];
+    /**
+     * Determines if the dialog will hide when the user presses the Escape key.
+     *
+     * This prop can be either a boolean or a function that accepts an event as an
+     * argument and returns a boolean. The event object represents the keydown
+     * event that initiated the hide action, which could be either a native
+     * keyboard event or a React synthetic event.
+     *
+     * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
+     * `event.stopPropagation()` within this function will stop the event from
+     * reaching the third-party dialog, closing only the Ariakit dialog.
+     * @default true
+     */
+    hideOnEscape?: MenuProps['hideOnEscape'];
+    /**
+     * Determines if the dialog should hide when the user clicks or focuses on an
+     * element outside the dialog.
+     *
+     * This prop can be either a boolean or a function that takes an event as an
+     * argument and returns a boolean. The event object represents the event that
+     * triggered the action, which could be a native event or a React synthetic
+     * event of various types.
+     *
+     * Live examples:
+     * - [Selection Popover](https://ariakit.org/examples/popover-selection)
+     * @default true
+     */
+    hideOnInteractOutside?: MenuProps['hideOnInteractOutside'];
+    /**
+     * Determines if the pointer events outside of the popover and its anchor
+     * element should be disabled during _hover intent_, that is, when the mouse
+     * is moving toward the popover.
+     *
+     * This is required as these external events may trigger focus on other
+     * elements and close the popover while the user is attempting to hover over
+     * it.
+     *
+     * This can be either a boolean or a callback receiving the mouse event
+     * happening during hover intent. The callback should return a boolean.
+     * @default true
+     */
+    disablePointerEventsOnApproach?: MenuProps['disablePointerEventsOnApproach'];
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuProps['store'];
+    /**
+     * Whether the popover should have the same width as the anchor element. This
+     * will be exposed to CSS as
+     * [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).
+     * @default false
+     */
+    sameWidth?: MenuProps['sameWidth'];
+    /**
+     * @see https://ariakit.org/reference/focusable
+     * @default true
+     */
+    focusable?: MenuProps['focusable'];
+    /**
+     * This is an event handler prop triggered when the dialog's `close` event is
+     * dispatched. The `close` event is similar to the native dialog
+     * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
+     * event. The only difference is that this event can be canceled with
+     * `event.preventDefault()`, which will prevent the dialog from hiding.
+     *
+     * It's important to note that this event only fires when the dialog store's
+     * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
+     * to `false`. If the controlled
+     * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
+     * if the dialog's visibility is altered in any other way (such as unmounting
+     * the dialog without adjusting the open state), this event won't be
+     * triggered.
+     *
+     * Live examples:
+     * - [Dialog with scrollable
+     *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
+     * - [Dialog with details &
+     *   summary](https://ariakit.org/examples/dialog-details)
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     */
+    onClose?: MenuProps['onClose'];
+}
+/**
+ * **📦 A Menu Content component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A content component for the menu, which is used to provide the menu context to the menu items.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MenuDividerProps extends Omit<DividerProps, 'variant'> {
+    /**
+     * The role of the divider.
+     * @default 'separator'
+     */
+    role?: AriaRole;
+}
+/**
+ * **〰️ A Menu Divider component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A divider component for the menu.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-divider Menu.Divider Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ *
+ * export function DividerExample() {
+ *   return (
+ *     <Menu>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item>Calendar</Menu.Item>
+ *         <Menu.Divider>Other actions</Menu.Divider>
+ *         <Menu.Item>Clipboard</Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuDivider to separate groups of menu items.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
+ **/
+declare const MenuDivider: react.ForwardRefExoticComponent<MenuDividerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuItemProps$1['store'];
+    /**
+     * Determines if the menu should hide when this item is clicked.
+     *
+     * **Note**: This behavior isn't triggered if this menu item is rendered as a
+     * link and modifier keys are used to either open the link in a new tab or
+     * download it.
+     *
+     * @default true
+     */
+    hideOnClick?: MenuItemProps$1['hideOnClick'];
+    /**
+     * The role of the menu item.
+     *
+     * @default 'menuitem'
+     */
+    role?: AriaRole;
+}
+/**
+ * **📋 A Menu Item component for navigation and actions**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A standard menu item that can be used for navigation, actions, or displaying options in a menu.
+ * Menu items can be styled with active states, icons, and can trigger callbacks when clicked.
+ * They support both visual and functional customization.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-item Menu.Item Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuItemExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
+ * The active prop can be used to highlight the currently selected item.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+
+type HtmlButtonProps = HTMLAttributes<HTMLButtonElement>;
+interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlButtonProps, UniversalMenuItemProps {
+    /**
+     * The name of the field in the
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state.
+     *
+     * Live examples at [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
+     */
+    name: string;
+    /**
+     * The controlled checked state of the element. It will set the menu
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state if
+     * provided.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the element. It will set the default value in
+     * the menu [`values`](https://ariakit.org/reference/menu-provider#values)
+     * state if provided.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuItemCheckboxProps$1['store'];
+    /**
+     * Determines if the menu should hide when this item is clicked.
+     *
+     * **Note**: This behavior isn't triggered if this menu item is rendered as a
+     * link and modifier keys are used to either open the link in a new tab or
+     * download it.
+     *
+     * @default undefined
+     */
+    hideOnClick?: MenuItemCheckboxProps$1['hideOnClick'];
+}
+/**
+ * **✅ A Menu Item Checkbox component**
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A checkable menu item that toggles between selected and unselected states. Menu item checkboxes
+ * allow users to select multiple options from a menu, displaying a checkmark when active. They maintain
+ * their state even when the menu is closed and reopened.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-item-checkbox Menu.ItemCheckbox Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ *
+ * export function MenuItemCheckboxExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Filter Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.ItemCheckbox name="showArchived" defaultChecked={false}>
+ *           Show Archived
+ *         </Menu.ItemCheckbox>
+ *         <Menu.ItemCheckbox name="includeComments" defaultChecked={true}>
+ *           Include Comments
+ *         </Menu.ItemCheckbox>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItemCheckbox when you need to provide users with multiple selectable options within a menu.
+ * Unlike radio options, checkboxes allow for multiple simultaneous selections.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
+ **/
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLDivElement>>;
+
+/** Valid vertical placement values for the menu */
+type VerticalPlacement = 'top' | 'bottom';
+/** Valid horizontal placement values for the menu */
+type HorizontalPlacement = 'start' | 'end';
+/** Combined placement values for menu positioning */
+type MenuPlacement = VerticalPlacement | HorizontalPlacement | `${VerticalPlacement}-${HorizontalPlacement}` | `${HorizontalPlacement}-${VerticalPlacement}`;
+type MenuProviderProps = PropsWithChildren<{
+    /**
+     * A callback that gets called when the
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state
+     * changes.
+     *
+     * Live examples:
+     * - [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
+     */
+    setValues?: (values: Record<string, boolean>) => void | MenuProviderProps$1['setValues'];
+    /**
+     * A map of names and values that will be used by the
+     * [`MenuItemCheckbox`](https://uds.build/docs/components/menu-item-checkbox).
+     *
+     * Live examples:
+     * - [MenuItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+     */
+    values?: MenuProviderProps$1['values'];
+    /**
+     * The placement of the Menu.Content.
+     *
+     * @default 'bottom'
+     */
+    placement?: MenuPlacement;
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuProviderProps$1['store'];
+    /**
+     * Whether the menu should be rendered in RTL direction.
+     *
+     * This only affects the some component behavior behavior. You still need to set
+     * `dir="rtl"` on HTML/CSS.
+     * @default false
+     */
+    rtl?: MenuProviderProps$1['rtl'];
+    /**
+     * Whether the content is visible.
+     * @default false
+     */
+    open?: MenuProviderProps$1['open'];
+    /**
+     * A callback that gets called when the
+     * [`open`](https://ariakit.org/reference/disclosure-provider#open) state
+     * changes.
+     * @example
+     * const [open, setOpen] = useState(false);
+     * const disclosure = useDisclosureStore({ open, setOpen });
+     */
+    setOpen?: MenuProviderProps$1['setOpen'];
+    /**
+     * Whether the content should be visible by default.
+     * @default false
+     */
+    defaultOpen?: MenuProviderProps$1['defaultOpen'];
+    /**
+     * Determines how the focus behaves when the user reaches the end of the
+     * composite widget.
+     *
+     * Live examples:
+     * - [Command Menu](https://uds.build/docs/components/menu)
+     * @default false
+     */
+    focusLoop?: MenuProviderProps$1['focusLoop'];
+    /**
+     * If enabled, moving to the next item from the last one in a row or column
+     * will focus on the first item in the next row or column and vice-versa.
+     * `true` wraps between rows and columns, `horizontal` wraps only between rows, and `vertical` wraps only between columns.
+     *
+     * @default false
+     */
+    focusWrap?: MenuProviderProps$1['focusWrap'];
+}>;
+/**
+ * **🏗️ A Menu Provider component**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * A provider component for the menu, which is used to provide the menu context to the menu items.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-provider Menu.Provider Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
+ * The active prop can be used to highlight the currently selected item.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuProvider: {
+    ({ placement, rtl: explicitRtl, ...props }: MenuProviderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface MenuTriggerProps extends PressableProps {
+    /**
+     * When asChild is set to true, the component's child will be cloned and passed
+     * the props and behavior required to make it functional.
+     */
+    asChild?: BoxProps['asChild'];
+    /**
+     * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
+     * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
+     * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
+     */
+    store?: MenuButtonProps['store'];
+    /**
+     * Determines if [Focusable](https://ariakit.org/components/focusable)
+     * features should be active on non-native focusable elements.
+     *
+     * **Note**: This prop only turns off the additional features provided by the
+     * [`Focusable`](https://ariakit.org/reference/focusable) component.
+     * Non-native focusable elements will lose their focusability entirely.
+     * However, native focusable elements will retain their inherent focusability,
+     * but without added features such as improved
+     * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
+     * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
+     * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
+     * etc.
+     * @default true
+     */
+    focusable?: MenuButtonProps['focusable'];
+}
+/**
+ * **⚡ A Menu Trigger component**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * A trigger component for the menu, which is used to toggle the menus open state.
+ *
+ * @see The {@link https://uds.build/docs/components/menu-trigger Menu.Trigger Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client'; // Next.js client component
+ *
+ * import { Menu, Button } from "@yahoo/uds";
+ * import { Calendar, Clipboard } from "@yahoo/uds-icons";
+ *
+ * export function MenuProviderExample() {
+ *   return (
+ *     <Menu.Provider>
+ *       <Menu.Trigger asChild>
+ *         <Button>Menu Options</Button>
+ *       </Menu.Trigger>
+ *       <Menu.Content>
+ *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
+ *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
+ *           Clipboard
+ *         </Menu.Item>
+ *         <Menu.Item active>Active Item</Menu.Item>
+ *       </Menu.Content>
+ *     </Menu.Provider>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Use MenuTrigger to toggle the open state of a menu.
+ *
+ * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
+ **/
+declare const MenuTrigger: react.ForwardRefExoticComponent<MenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const Menu_index_useMenuContext: typeof useMenuContext;
+declare const Menu_index_useMenuStore: typeof useMenuStore;
+declare const Menu_index_useStoreState: typeof useStoreState;
+declare namespace Menu_index {
+  export { MenuContent as Content, MenuDivider as Divider, MenuItem as Item, MenuItemCheckbox as ItemCheckbox, MenuProvider as Provider, MenuTrigger as Trigger, Menu_index_useMenuContext as useMenuContext, Menu_index_useMenuStore as useMenuStore, Menu_index_useStoreState as useStoreState };
+}
+
+export { Menu_index as Menu, type MenuContentProps, type MenuDividerProps, type MenuItemCheckboxProps, type MenuItemProps, type MenuPlacement, type MenuProviderProps, type MenuTriggerProps };

package/dist/client/Menu.js

@@ -0,0 +1,3 @@
+"use client";
+import{DividerInternal as r}from"../chunk-H7DBPPWM.js";import{e,Pressable as a}from"../chunk-KQTBZT7T.js";import{VStack as d,HStack as t}from"../chunk-KMRYZOR7.js";import{SpringMotionConfig as s}from"../chunk-HMRYK2NP.js";import{cx as i,getStyles as n,IconSlot as c,Box as o}from"../chunk-L3JHNF65.js";import{__export as u}from"../chunk-GF4A6TFM.js";import{useMenuStore as l,useMenuContext as m,Menu as x,MenuItem as p,MenuItemCheckbox as h,MenuProvider as b,MenuButton as f}from"@ariakit/react/menu";import*as _ from"react";import{forwardRef as v,useState as g,useEffect as I,useMemo as y,Children as C,useRef as w,useCallback as k}from"react";import N from"use-sync-external-store/shim/index.js";import{spacingMap as V}from"@yahoo/uds/fixtures";import{m as S,AnimatePresence as M}from"motion/react";import{jsx as E,jsxs as T}from"react/jsx-runtime";import{useStoreState as P}from"@ariakit/react";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+var j={};function R(r){return r}function z(r,e){const a=r.__unstableInternals;return function(r,e){if(!r)throw new Error(e)}(a,"Invalid store"),a[e]}u(j,{Content:()=>$,Divider:()=>G,Item:()=>Z,ItemCheckbox:()=>J,Provider:()=>U,Trigger:()=>X,useMenuContext:()=>m,useMenuStore:()=>l,useStoreState:()=>P});var{useSyncExternalStore:O}=N;function A(r,e=R){const a=_.useCallback(e=>r?function(r,...e){if(r)return z(r,"subscribe")(...e)}(r,null,e):()=>{},[r]),d=()=>{const a="string"==typeof e?e:null,d="function"==typeof e?e:null,t=null==r?void 0:r.getState();if(d)return d(t);var s,i;if(t&&(a&&(s=t,i=a,"function"==typeof Object.hasOwn?Object.hasOwn(s,i):Object.prototype.hasOwnProperty.call(s,i))))return t[a]};return O(a,d,d)}var B=S.create(d),H=5,D=.97,F={top:{x:0,y:H},bottom:{x:0,y:-5},left:{x:H,y:0},right:{x:-5,y:0}},W=r=>y(()=>((r="bottom")=>{const[e="top"]=r?.split("-");return{closed:{...F[e],opacity:0,scale:D},open:{y:0,x:0,opacity:1,scale:1}}})(r),[r]),$=v(function({gap:r,spacing:e,spacingBottom:a,spacingEnd:d,spacingStart:t,spacingTop:s,gutter:n="1",backgroundColor:c="primary",borderRadius:o="md",borderColor:u,borderWidth:l="thin",overflow:p,dropShadow:h="lg",className:b,sameWidth:f,focusable:_,children:v,portalElement:C,portal:w=!0,disableAutoBorderRadius:k,...N},S){const T=m(),P=A(T,"open"),j=A(T,"mounted"),R=A(T,"currentPlacement"),z=A(T,"placement"),[O,H]=g(R),[D,F]=g(R);I(()=>{z!==D&&F(z)},[z]),I(()=>{R!==D&&F(R)},[R]),I(()=>{j&&D!==O&&H(D)},[j,D,O]);const $=y(()=>P&&j?"open":"closed",[P,j]),G=y(()=>P?h:"none",[P,h]),L=W(D),K=(({borderRadius:r,spacing:e})=>{if(void 0===e||"0"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xs)_-_var(--uds-border-width-thin))]";case"sm":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-sm)_-_var(--uds-border-width-thin))]";case"md":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-md)_-_var(--uds-border-width-thin))]";case"lg":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-lg)_-_var(--uds-border-width-thin))]";case"xl":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_var(--uds-border-width-thin))]"}if("px"===e||"0.5"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_2px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_2px))]";case"md":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_2px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_2px))]";case"xl":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xl)_-_2px))]"}if("1"===e||"1.5"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";case"md":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";case"xl":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_4px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_4px)]"}if("2"===e||"2.5"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_8px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_8px))]";case"md":return"[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_8px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-lg)_-_8px))]";case"xl":return"[&>*:first-child]:rounded-t-[calc(var(--uds-border-radius-xl)_-_8px)] [&>*:last-child]:rounded-b-[calc(var(--uds-border-radius-xl)_-_8px)]"}if("3"===e||"3.5"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-xs)_-_6px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-sm)_-_6px))]";case"md":return"[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-md)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-md)_-_6px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_6px))]";case"xl":return"[&>*:first-child]:rounded-t-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))] [&>*:last-child]:rounded-b-[min(20px,calc(var(--uds-border-radius-xl)_-_6px))]"}if("4"===e)switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_16px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_16px))]";case"md":return"[&>*:first-child]:rounded-t-[max(4px,calc(var(--uds-border-radius-md)_-_16px))] [&>*:last-child]:rounded-b-[max(4px,calc(var(--uds-border-radius-md)_-_16px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-lg)_-_16px))]";case"xl":return"[&>*:first-child]:rounded-t-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))] [&>*:last-child]:rounded-b-[max(6px,calc(var(--uds-border-radius-xl)_-_16px))]"}switch(r){case"xs":return"[&>*:first-child]:rounded-t-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))] [&>*:last-child]:rounded-b-[max(1px,calc(var(--uds-border-radius-xs)_-_4px))]";case"sm":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-sm)_-_4px))]";case"md":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-md)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-md)_-_4px))]";case"lg":return"[&>*:first-child]:rounded-t-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))] [&>*:last-child]:rounded-b-[max(2px,calc(var(--uds-border-radius-lg)_-_4px))]";case"xl":return"[&>*:first-child]:rounded-t-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))] [&>*:last-child]:rounded-b-[min(18px,calc(var(--uds-border-radius-xl)_-_4px))]"}})({borderRadius:o,spacing:e}),Y=y(()=>V[n],[n]);return E(M,{initial:!1,children:E(x,{gutter:Y,sameWidth:f,focusable:_,store:T,ref:S,portalElement:C,portal:w,...N,render:E(B,{backgroundColor:c,gap:r,spacing:e,spacingBottom:a,spacingEnd:d,spacingStart:t,spacingTop:s,borderRadius:o,borderColor:u,borderWidth:l,overflow:p,animate:$,variants:L,dropShadow:G,className:i("uds-menu-content","transition-shadow","duration-200","ease-in-out","min-w-60","max-w-lg","max-h-96","overflow-auto","uds-ring","z-10","group",!k&&K,b),children:v})})})});$.displayName="MenuContent";var G=v(function({role:e="separator",contentPosition:a="start",gap:d="4",children:t,spacingVertical:s=(t?"2":"0"),spacingHorizontal:i=(t?"4":"0"),className:c,...o},u){const l={root:n({menuDividerVariantRoot:"default",className:c}),text:n({menuDividerVariantText:"default"}),line:n({menuDividerVariantLine:"default"})};return E(r,{ref:u,role:e,variant:"inherit",contentPosition:a,gap:d,spacingVertical:s,spacingHorizontal:i,className:l.root,layerClassNames:l,...o,children:t})});G.displayName="MenuDivider";var L="uds-menu-item",K={visible:{scale:1,opacity:1},hidden:{scale:.7,opacity:0}},Y=v(function({spacing:r="0",spacingBottom:e,spacingEnd:d,spacingHorizontal:s="4",spacingStart:o,spacingTop:u,spacingVertical:l="3.5",columnGap:m="2",className:x,children:p,endIcon:h,startIcon:b,hideEndIcon:f,active:_,disabled:v,as:g,name:I,alignItems:w="center",justifyContent:k="space-between",layerClassNames:N,slots:V,rootProps:P,...j},R){const z=C.count(p)>1,O=(({active:r,disabled:e,className:a})=>i(L,"flex","focus-visible:text-brand","focus-visible:bg-brand-secondary","focus-visible:z-10","uds-ring","!-outline-offset-2",r&&["[&:not([aria-checked])]:cursor-default"],e&&"opacity-25 cursor-not-allowed","duration-20 transition-[font-variation-settings] ease-in-out","z-0",a))({active:_,disabled:v,className:x}),A=n({className:i(`${L}-content truncate`,N?.text),textAlign:"start",...z&&{columnGap:m,display:"flex",alignItems:"center",width:"full",justifyContent:"space-between"}}),B=y(()=>({root:n({menuSizeRoot:"default",flexDirection:"row",spacing:r,spacingBottom:e,spacingEnd:d,spacingHorizontal:s,spacingStart:o,spacingTop:u,spacingVertical:l,columnGap:m,alignItems:w,justifyContent:k,className:i(O,N?.root)}),startIcon:n({menuSizeStartIcon:"default",className:N?.startIcon}),endIcon:n({menuSizeEndIcon:"default",className:N?.endIcon})}),[w,m,k,N?.endIcon,N?.root,N?.startIcon,O,r,e,d,s,o,u,l]);return T(g,{ref:R,name:I??"",...P,render:V?.root??(r=>E(a,{...r,...j,onClick:e=>{r.onClick?.(e),j.onClick?.(e)}})),disabled:v,className:B.root,children:[T(t,{gap:m,alignItems:"center",width:"full",children:[E(M,{initial:!1,children:b&&E(S.span,{variants:K,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-start-icon",children:E(c,{icon:b,className:B.startIcon,iconProps:{size:"sm",variant:_?"fill":"outline",color:"current"}})})}),E("span",{className:A,children:p})]}),E(M,{initial:!1,mode:"popLayout",children:!f&&h&&E(S.span,{variants:K,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-end-icon",children:E(c,{icon:h,className:B.endIcon,iconProps:{size:"sm",variant:_?"fill":"outline",color:"current"}})})})]})});Y.displayName="MenuItemBase";var Z=v(function({active:r,hideOnClick:e,...a},d){const t={root:n({menuItemVariantRoot:"default",menuItemVariantActiveRoot:r?"on":"off"}),text:n({menuItemVariantText:"default",menuItemVariantActiveText:r?"on":"off"}),startIcon:n({menuItemVariantIcon:"default",menuItemVariantActiveIcon:r?"on":"off"})};return E(Y,{ref:d,as:p,active:r,layerClassNames:t,rootProps:{hideOnClick:e},...a})});Z.displayName="MenuItem";var J=v(function({name:r,endIcon:a=e,checked:d,defaultChecked:t,hideOnClick:s,className:c,...o},u){const l=r,x=w(!1),p=m(),b=P(p);I(()=>{!x.current&&void 0!==t&&p&&(p.setValues(r=>({...r,[l]:t})),x.current=!0)},[p,t,l]);const f=y(()=>{if(void 0!==d)return d;if(b?.items?.length){const r=b?.items.find(r=>r.element?.name===l);if(r?.element)return r.element.checked}const r=b?.values[l];return"boolean"==typeof r?r:t??!1},[b?.items,b?.values,l,d,t]),_=k(r=>{void 0===d&&p?.setValues(e=>({...e,[l]:r.target.checked}))},[l,p,d]),v={root:n({menuItemCheckboxVariantRoot:"default",menuItemCheckboxVariantActiveRoot:f?"on":"off"}),text:n({menuItemCheckboxVariantText:"default",menuItemCheckboxVariantActiveText:f?"on":"off"}),startIcon:n({menuItemCheckboxVariantStartIcon:"default",menuItemCheckboxVariantActiveStartIcon:f?"on":"off"}),endIcon:n({menuItemCheckboxVariantEndIcon:"default",menuItemCheckboxVariantActiveEndIcon:f?"on":"off"})};return E(Y,{ref:u,as:h,hideEndIcon:!f,endIcon:a,active:f,className:i("uds-menu-item-checkbox",c),layerClassNames:v,name:r,rootProps:{onChange:_,defaultChecked:t,checked:void 0!==d?d:void 0,hideOnClick:s},...o})});J.displayName="MenuItemCheckbox";var Q=()=>{if("undefined"==typeof document)return!1;return"rtl"===getComputedStyle(document.documentElement).direction},q=r=>{const[e,a]=g(Q);return I(()=>{if(r?.explicit)return void a(r.explicit);const e=(r=>{const e=new MutationObserver(e=>{e.some(r=>"attributes"===r.type&&"dir"===r.attributeName)&&r()});return e.observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]}),e})(()=>{a(Q())});return()=>e.disconnect()},[r?.explicit]),e},U=function({placement:r="bottom",rtl:e,...a}){const d=q({explicit:e}),t=((r,e)=>{const a=e?.rtl;if("start"===r)return a?"right":"left";if("end"===r)return a?"left":"right";if(r?.includes("-")){const[e,d]=r.split("-");if(!("start"!==e&&"end"!==e||"top"!==d&&"bottom"!==d))return`${"start"===e?a?"right":"left":a?"left":"right"}-${"bottom"===d?"end":"start"}`;if("top"===e||"bottom"===e)return`${e}-${"start"===d?a?"end":"start":a?"start":"end"}`}return r})(r,{rtl:d});return E(s,{children:E(b,{placement:t,rtl:d,...a})})};U.displayName="MenuProvider";var X=v(function({asChild:r,children:e,className:a,...d},t){const s=w(null),n=r?{render:E(o,{asChild:!0,ref:s,className:"uds-ring h-fit w-fit",children:e})}:{children:e},c=k(()=>{const r=s.current?.firstChild;r instanceof HTMLElement&&"function"==typeof r.focus&&r.focus()},[s]);return E(f,{onFocus:c,onFocusVisible:c,ref:t,className:i("uds-menu-trigger",a),...n,...d})});X.displayName="MenuTrigger";export{j as Menu};