@yahoo/uds 3.5.0-beta.2 → 3.5.0-beta.4

package/dist/client/Menu.d.ts

@@ -0,0 +1,626 @@
+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 { j as SpacingAlias, k as UniversalMenuItemProps } from '../types-BdV70-Tw.js';
+import { V as VStackProps, D as DividerProps, B as BoxProps } from '../VStack-Ca-CbKTr.js';
+import { P as PressableProps } from '../Pressable-DSWYYU6N.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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 PressableProps, 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;
+    /** Internal overrides for downstream components. */
+    layerClassNames?: {
+        root?: string;
+        startIcon?: string;
+        endIcon?: string;
+    };
+}
+/**
+ * **📋 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<HTMLButtonElement>>;
+
+type HtmlButtonProps = HTMLAttributes<HTMLButtonElement>;
+interface MenuItemCheckboxProps extends PressableProps, 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" | "as" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLButtonElement>>;
+
+/** 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;
+
+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{Divider as r}from"../chunk-MO2VPSXU.js";import{Pressable as a,a as e,SpringMotionConfig as d}from"../chunk-PNR3372L.js";import{VStack as t,cx as s,getStyles as i,Box as c,HStack as n,IconSlot as o}from"../chunk-3WLIHKQU.js";import"../chunk-EE3DM7SS.js";import"../chunk-EWJ3J526.js";import"../chunk-GSO3MC65.js";import"../chunk-4G4TBHHL.js";import{__export as u}from"../chunk-S5UKKXRV.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{useStoreState as _}from"@ariakit/react-core/utils/store";import{spacingMap as v}from"@yahoo/uds/fixtures";import{m as g,AnimatePresence as I}from"motion/react";import{forwardRef as k,useState as w,useEffect as C,useMemo as N,Children as y,useRef as V,useCallback as S}from"react";import{jsx as E,jsxs as M}from"react/jsx-runtime";import{useStoreState as R}from"@ariakit/react";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+var j={};u(j,{Content:()=>B,Divider:()=>W,Item:()=>$,ItemCheckbox:()=>F,Provider:()=>U,Trigger:()=>J,useMenuContext:()=>m,useMenuStore:()=>l,useStoreState:()=>R});var z=g.create(t),T=5,P=.97,A={top:{x:0,y:T},bottom:{x:0,y:-5},left:{x:T,y:0},right:{x:-5,y:0}},H=r=>N((()=>((r="bottom")=>{const[a="top"]=r?.split("-");return{closed:{...A[a],opacity:0,scale:P},open:{y:0,x:0,opacity:1,scale:1}}})(r)),[r]),B=k((function({gap:r,spacing:a,spacingBottom:e,spacingEnd:d,spacingStart:t,spacingTop:i,gutter:c="1",backgroundColor:n="primary",borderRadius:o="md",borderColor:u,borderWidth:l="thin",overflow:p,dropShadow:h="lg",className:b,sameWidth:f,focusable:g,children:k,portalElement:y,portal:V=!0,disableAutoBorderRadius:S,...M},R){const j=m(),T=_(j,"open"),P=_(j,"mounted"),A=_(j,"currentPlacement"),B=_(j,"placement"),[W,D]=w(A),[G,L]=w(A);C((()=>{B!==G&&L(B)}),[B]),C((()=>{A!==G&&L(A)}),[A]),C((()=>{P&&G!==W&&D(G)}),[P,G,W]);const $=N((()=>T&&P?"open":"closed"),[T,P]),F=N((()=>T?h:"none"),[T,h]),K=H(G),O=(({borderRadius:r,spacing:a})=>{if(void 0===a||"0"===a)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"===a||"0.5"===a)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"===a||"1.5"===a)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"===a||"2.5"===a)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"===a||"3.5"===a)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"===a)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:a}),U=N((()=>v[c]),[c]);return E(I,{initial:!1,children:E(x,{gutter:U,sameWidth:f,focusable:g,store:j,ref:R,portalElement:y,portal:V,...M,render:E(z,{backgroundColor:n,gap:r,spacing:a,spacingBottom:e,spacingEnd:d,spacingStart:t,spacingTop:i,borderRadius:o,borderColor:u,borderWidth:l,overflow:p,animate:$,variants:K,dropShadow:F,className:s("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",!S&&O,b),children:k})})})})),W=k((function({role:a="separator",contentPosition:e="start",gap:d="4",children:t,spacingVertical:s=(t?"2":"0"),spacingHorizontal:c=(t?"4":"0"),className:n,...o},u){const l={root:i({menuDividerVariantRoot:"default",className:n}),text:i({menuDividerVariantText:"default"})};return E(r,{ref:u,role:a,variant:"inherit",contentPosition:e,gap:d,spacingVertical:s,spacingHorizontal:c,className:l.root,layerClassNames:l,...o,children:t})}));W.displayName="MenuDivider";var D="uds-menu-item",G={visible:{scale:1,opacity:1},hidden:{scale:.7,opacity:0}},L=k((function({spacing:r="0",spacingBottom:e,spacingEnd:d,spacingHorizontal:t="4",spacingStart:u,spacingTop:l,spacingVertical:m="3.5",columnGap:x="2",className:p,children:h,endIcon:b,startIcon:f,hideEndIcon:_,active:v,disabled:k,as:w,rootProps:C,name:V,alignItems:S="center",justifyContent:R="space-between",layerClassNames:j,...z},T){const P=y.count(h)>1,A=(({active:r,disabled:a,className:e})=>s(D,"focus-visible:text-brand","focus-visible:bg-brand-secondary","focus-visible:z-10","uds-ring","!-outline-offset-2",r&&["[&:not([aria-checked])]:cursor-default"],a&&"opacity-25 cursor-not-allowed","duration-20 transition-[font-variation-settings] ease-in-out","z-0",e))({active:v,disabled:k,className:p}),H=i({className:s(`${D}-content truncate`,j?.text),textAlign:"start",...P&&{columnGap:x,display:"flex",alignItems:"center",width:"full",justifyContent:"space-between"}}),B=N((()=>({root:i({menuSizeRoot:"default",className:s(j?.root,A)}),startIcon:i({menuSizeStartIcon:"default",className:j?.startIcon}),endIcon:i({menuSizeEndIcon:"default",className:j?.endIcon})})),[j,A]);return E(c,{asChild:!0,spacing:r,spacingBottom:e,spacingEnd:d,spacingHorizontal:t,spacingStart:u,spacingTop:l,spacingVertical:m,columnGap:x,className:B.root,alignItems:S,justifyContent:R,children:M(w,{render:E(a,{ref:T,...z}),name:V??"",disabled:k,...C,children:[M(n,{gap:x,alignItems:"center",width:"full",children:[E(I,{initial:!1,children:f&&E(g.span,{variants:G,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-start-icon",children:E(o,{icon:f,className:B.startIcon,iconProps:{size:"sm",variant:v?"fill":"outline",color:"current"}})})}),E("span",{className:H,children:h})]}),E(I,{initial:!1,mode:"popLayout",children:!_&&b&&E(g.span,{variants:G,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-end-icon",children:E(o,{icon:b,className:B.endIcon,iconProps:{size:"sm",variant:v?"fill":"outline",color:"current"}})})})]})})})),$=k((function({active:r,...a},e){const d={root:i({menuItemVariantRoot:"default",menuItemVariantActiveRoot:r?"on":"off"}),text:i({menuItemVariantText:"default",menuItemVariantActiveText:r?"on":"off"}),startIcon:i({menuItemVariantIcon:"default",menuItemVariantActiveIcon:r?"on":"off"})};return E(L,{ref:e,as:p,active:r,layerClassNames:d,...a})}));$.displayName="MenuItem";var F=k((function({name:r,endIcon:a=e,checked:d,defaultChecked:t,className:c,...n},o){const u=r,l=V(!1),x=m(),p=R(x);C((()=>{!l.current&&void 0!==t&&x&&(x.setValues((r=>({...r,[u]:t}))),l.current=!0)}),[x,t,u]);const b=N((()=>{if(void 0!==d)return d;if(p?.items?.length){const r=p?.items.find((r=>r.element?.name===u));if(r?.element)return r.element.checked}const r=p?.values[u];return"boolean"==typeof r?r:t??!1}),[p?.items,p?.values,u,d,t]),f=S((r=>{void 0===d&&x?.setValues((a=>({...a,[u]:r.target.checked})))}),[u,x,d]),_={root:i({menuItemCheckboxVariantRoot:"default",menuItemCheckboxVariantActiveRoot:b?"on":"off"}),text:i({menuItemCheckboxVariantText:"default",menuItemCheckboxVariantActiveText:b?"on":"off"}),startIcon:i({menuItemCheckboxVariantStartIcon:"default",menuItemCheckboxVariantActiveStartIcon:b?"on":"off"}),endIcon:i({menuItemCheckboxVariantEndIcon:"default",menuItemCheckboxVariantActiveEndIcon:b?"on":"off"})};return E(L,{ref:o,as:h,hideEndIcon:!b,endIcon:a,active:b,className:s("uds-menu-item-checkbox",c),layerClassNames:_,rootProps:{name:r,onChange:f,defaultChecked:t,checked:void 0!==d?d:void 0},...n})}));F.displayName="MenuItemCheckbox";var K=()=>{if("undefined"==typeof document)return!1;return"rtl"===getComputedStyle(document.documentElement).direction},O=r=>{const[a,e]=w(K);return C((()=>{if(r?.explicit)return void e(r.explicit);const a=(r=>{const a=new MutationObserver((a=>{a.some((r=>"attributes"===r.type&&"dir"===r.attributeName))&&r()}));return a.observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]}),a})((()=>{e(K())}));return()=>a.disconnect()}),[r?.explicit]),a},U=function({placement:r="bottom",rtl:a,...e}){const t=O({explicit:a}),s=((r,a)=>{const e=a?.rtl;if("start"===r)return e?"right":"left";if("end"===r)return e?"left":"right";if(r?.includes("-")){const[a,d]=r.split("-");if(!("start"!==a&&"end"!==a||"top"!==d&&"bottom"!==d))return`${"start"===a?e?"right":"left":e?"left":"right"}-${"bottom"===d?"end":"start"}`;if("top"===a||"bottom"===a)return`${a}-${"start"===d?e?"end":"start":e?"start":"end"}`}return r})(r,{rtl:t});return E(d,{children:E(b,{placement:s,rtl:t,...e})})},J=k((function({asChild:r,className:a,...e},d){const t=V(null),i=r?E(c,{ref:t,className:"uds-ring h-fit w-fit"}):void 0,n=S((()=>{const r=t.current?.firstChild;r instanceof HTMLElement&&"function"==typeof r.focus&&r.focus()}),[t]);return E(f,{onFocus:n,onFocusVisible:n,ref:d,render:i,className:s("uds-menu-trigger",a),...e})}));export{j as Menu};