@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/dist/client/Menu.d.ts

@@ -1,624 +0,0 @@
-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-DG52l0qP.js';
-import { V as VStackProps, D as DividerProps } from '../VStack-hBFz7vre.js';
-import { P as PressableProps } from '../Pressable-m_MkO-q6.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BoxProps } from '../Box-DGnNvxFr.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

@@ -1,3 +0,0 @@
-"use client";
-import{DividerInternal as r}from"../chunk-DVDXLKAY.js";import{e,Pressable as a}from"../chunk-LWCJEX2R.js";import{VStack as d,HStack as t}from"../chunk-QGB63HSS.js";import{SpringMotionConfig as s}from"../chunk-WJFHQKE4.js";import{cx as i,getStyles as n,IconSlot as c,Box as o}from"../chunk-IUBD43EI.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 E}from"motion/react";import{jsx as M,jsxs as j}from"react/jsx-runtime";import{useStoreState as T}from"@ariakit/react";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-var z={};function P(r){return r}function R(r,e){const a=r.__unstableInternals;return function(r,e){if(!r)throw new Error(e)}(a,"Invalid store"),a[e]}u(z,{Content:()=>G,Divider:()=>L,Item:()=>Q,ItemCheckbox:()=>X,Provider:()=>q,Trigger:()=>Z,useMenuContext:()=>m,useMenuStore:()=>l,useStoreState:()=>T});var{useSyncExternalStore:A}=N;function O(r,e=P){const a=_.useCallback(e=>r?function(r,...e){if(r)return R(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 A(a,d,d)}var D=S.create(d),B=5,H=.97,F={top:{x:0,y:B},bottom:{x:0,y:-5},left:{x:B,y:0},right:{x:-5,y:0}},W=r=>y(()=>((r="bottom")=>{const[e="top"]=r?.split("-");return{closed:{...F[e],opacity:0,scale:H},open:{y:0,x:0,opacity:1,scale:1}}})(r),[r]),G=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 j=m(),T=O(j,"open"),z=O(j,"mounted"),P=O(j,"currentPlacement"),R=O(j,"placement"),[A,B]=g(P),[H,F]=g(P);I(()=>{R!==H&&F(R)},[R]),I(()=>{P!==H&&F(P)},[P]),I(()=>{z&&H!==A&&B(H)},[z,H,A]);const G=y(()=>T&&z?"open":"closed",[T,z]),L=y(()=>T?h:"none",[T,h]),$=W(H),J=(({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}),K=y(()=>V[n],[n]);return M(E,{initial:!1,children:M(x,{gutter:K,sameWidth:f,focusable:_,store:j,ref:S,portalElement:C,portal:w,...N,render:M(D,{backgroundColor:c,gap:r,spacing:e,spacingBottom:a,spacingEnd:d,spacingStart:t,spacingTop:s,borderRadius:o,borderColor:u,borderWidth:l,overflow:p,animate:G,variants:$,dropShadow:L,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&&J,b),children:v})})})});G.displayName="MenuContent";var L=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 M(r,{ref:u,role:e,variant:"inherit",contentPosition:a,gap:d,spacingVertical:s,spacingHorizontal:i,className:l.root,layerClassNames:l,...o,children:t})});L.displayName="MenuDivider";var $="uds-menu-item",J={visible:{scale:1,opacity:1},hidden:{scale:.7,opacity:0}},K=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:T,...z},P){const R=C.count(p)>1,A=(({active:r,disabled:e,className:a})=>i($,"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}),O=n({className:i(`${$}-content truncate`,N?.text),textAlign:"start",...R&&{columnGap:m,display:"flex",alignItems:"center",width:"full",justifyContent:"space-between"}}),D=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(A,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,A,r,e,d,s,o,u,l]);return j(g,{ref:P,name:I??"",...T,render:V?.root??(r=>M(a,{...r,...z,onClick:e=>{r.onClick?.(e),z.onClick?.(e)}})),disabled:v,className:D.root,children:[j(t,{gap:m,alignItems:"center",width:"full",children:[M(E,{initial:!1,children:b&&M(S.span,{variants:J,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-start-icon",children:M(c,{icon:b,className:D.startIcon,iconProps:{size:"sm",variant:_?"fill":"outline",color:"current"}})})}),M("span",{className:O,children:p})]}),M(E,{initial:!1,mode:"popLayout",children:!f&&h&&M(S.span,{variants:J,initial:"hidden",animate:"visible",exit:"hidden",className:"uds-end-icon",children:M(c,{icon:h,className:D.endIcon,iconProps:{size:"sm",variant:_?"fill":"outline",color:"current"}})})})]})});K.displayName="MenuItemBase";var Q=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 M(K,{ref:d,as:p,active:r,layerClassNames:t,rootProps:{hideOnClick:e},...a})});Q.displayName="MenuItem";var X=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=T(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 M(K,{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})});X.displayName="MenuItemCheckbox";var U=()=>{if("undefined"==typeof document)return!1;return"rtl"===getComputedStyle(document.documentElement).direction},Y=r=>{const[e,a]=g(U);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(U())});return()=>e.disconnect()},[r?.explicit]),e},q=function({placement:r="bottom",rtl:e,...a}){const d=Y({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 M(s,{children:M(b,{placement:t,rtl:d,...a})})};q.displayName="MenuProvider";var Z=v(function({asChild:r,children:e,className:a,...d},t){const s=w(null),n=r?{render:M(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 M(f,{onFocus:c,onFocusVisible:c,ref:t,className:i("uds-menu-trigger",a),...n,...d})});Z.displayName="MenuTrigger";export{z as Menu};