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

package/dist/components/client/Menu/Menu.Content.d.cts

@@ -0,0 +1,215 @@
+import { SpacingAlias } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { VStackProps } from "../../VStack.cjs";
+import * as react31 from "react";
+import { MenuProps } from "@ariakit/react/menu";
+
+//#region src/components/client/Menu/Menu.Content.d.ts
+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: react31.ForwardRefExoticComponent<MenuContentProps & react31.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuContent, type MenuContentProps };
+//# sourceMappingURL=Menu.Content.d.cts.map

package/dist/components/client/Menu/Menu.Content.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Content.d.cts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Content.tsx"],"sourcesContent":[],"mappings":";;;;;;;UA8CU,gBAAA,CAAA,OAAA,CAAyB,KAAK;WAC7B;;;AAlCqC,CAAA,CAAA,CAAA;;;EAuDlC,uBAAA,CAAA,CAAA,CAAA,OAAA;EA0CI,CAAA,CAAA;;;;;;;;;;;AAhEqB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,CAAA,gBAAA,CAAA,CAAA,CAAA;;;EA6MtB,SAAA,CAAA,CAAA,CAvLH,SAuLG,CAAA,CAAA,SAAA,CAAA,CAAA;EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA7IC;;;;;;;;;;;;;uBAaK;;;;;;;;;;;;;;iBAcN;;;;;;;;;;;;;;0BAcS;;;;;;;;;;;;;;mCAcS;;;;;;UAMzB;;;;;;;cAOI;;;;;cAKA;;;;;;;;;;;;;;;;;;;;;;;;;YAyBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CN,aAAW,OAAA,CAAA,0BAAA,mBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Content.d.ts

@@ -0,0 +1,215 @@
+import { SpacingAlias } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { VStackProps } from "../../VStack.js";
+import * as react39 from "react";
+import { MenuProps } from "@ariakit/react/menu";
+
+//#region src/components/client/Menu/Menu.Content.d.ts
+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: react39.ForwardRefExoticComponent<MenuContentProps & react39.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuContent, type MenuContentProps };
+//# sourceMappingURL=Menu.Content.d.ts.map

package/dist/components/client/Menu/Menu.Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Content.d.ts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Content.tsx"],"sourcesContent":[],"mappings":";;;;;;;UA8CU,gBAAA,CAAA,OAAA,CAAyB,KAAK;WAC7B;;;AAlCqC,CAAA,CAAA,CAAA;;;EAuDlC,uBAAA,CAAA,CAAA,CAAA,OAAA;EA0CI,CAAA,CAAA;;;;;;;;;;;AAhEqB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,CAAA,gBAAA,CAAA,CAAA,CAAA;;;EA6MtB,SAAA,CAAA,CAAA,CAvLH,SAuLG,CAAA,CAAA,SAAA,CAAA,CAAA;EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA7IC;;;;;;;;;;;;;uBAaK;;;;;;;;;;;;;;iBAcN;;;;;;;;;;;;;;0BAcS;;;;;;;;;;;;;;mCAcS;;;;;;UAMzB;;;;;;;cAOI;;;;;cAKA;;;;;;;;;;;;;;;;;;;;;;;;;YAyBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2CN,aAAW,OAAA,CAAA,0BAAA,mBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Content.js

@@ -0,0 +1,163 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../../styles/styler.js";
+import { VStack } from "../../VStack.js";
+import { useNestedBorderRadius } from "../../../hooks/useNestedBorderRadius.js";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { spacingMap } from "@yahoo/uds/fixtures";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+import { Menu, useMenuContext } from "@ariakit/react/menu";
+import { useStoreState } from "@ariakit/react-core/utils/store";
+
+//#region src/components/client/Menu/Menu.Content.tsx
+const MotionVStack = m.create(VStack);
+const ANIMATION_CONFIG = {
+	distance: 5,
+	scale: .97
+};
+const variants = {
+	top: {
+		x: 0,
+		y: ANIMATION_CONFIG.distance
+	},
+	bottom: {
+		x: 0,
+		y: -ANIMATION_CONFIG.distance
+	},
+	left: {
+		x: ANIMATION_CONFIG.distance,
+		y: 0
+	},
+	right: {
+		x: -ANIMATION_CONFIG.distance,
+		y: 0
+	}
+};
+const getMenuAnimationVariants = (placement = "bottom") => {
+	const [base = "top"] = placement?.split("-");
+	return {
+		closed: {
+			...variants[base],
+			opacity: 0,
+			scale: ANIMATION_CONFIG.scale
+		},
+		open: {
+			y: 0,
+			x: 0,
+			opacity: 1,
+			scale: 1
+		}
+	};
+};
+const useMenuAnimationVariants = (placement) => {
+	return useMemo(() => getMenuAnimationVariants(placement), [placement]);
+};
+/**
+* **📦 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)
+**/
+const MenuContent = forwardRef(function MenuContent$1({ gap, spacing, spacingBottom, spacingEnd, spacingStart, spacingTop, gutter = "1", backgroundColor = "primary", borderRadius = "md", borderColor, borderWidth = "thin", overflow, dropShadow = "lg", className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius,...props }, ref) {
+	const context = useMenuContext();
+	const open = useStoreState(context, "open");
+	const mounted = useStoreState(context, "mounted");
+	const currentPlacement = useStoreState(context, "currentPlacement");
+	const placement = useStoreState(context, "placement");
+	const [prevPlacement, setPrevPlacement] = useState(currentPlacement);
+	const [nextPlacement, setNextPlacement] = useState(currentPlacement);
+	useEffect(() => {
+		if (placement !== nextPlacement) setNextPlacement(placement);
+	}, [placement]);
+	useEffect(() => {
+		if (currentPlacement !== nextPlacement) setNextPlacement(currentPlacement);
+	}, [currentPlacement]);
+	useEffect(() => {
+		if (mounted && nextPlacement !== prevPlacement) setPrevPlacement(nextPlacement);
+	}, [
+		mounted,
+		nextPlacement,
+		prevPlacement
+	]);
+	const motionState = useMemo(() => {
+		if (!open || !mounted) return "closed";
+		return "open";
+	}, [open, mounted]);
+	const shadowVariant = useMemo(() => open ? dropShadow : "none", [open, dropShadow]);
+	const variants$1 = useMenuAnimationVariants(nextPlacement);
+	const borderRadiusClassName = useNestedBorderRadius({
+		borderRadius,
+		spacing
+	});
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: /* @__PURE__ */ jsx(Menu, {
+			gutter: useMemo(() => spacingMap[gutter], [gutter]),
+			sameWidth,
+			focusable,
+			store: context,
+			ref,
+			portalElement,
+			portal,
+			...props,
+			render: /* @__PURE__ */ jsx(MotionVStack, {
+				backgroundColor,
+				gap,
+				spacing,
+				spacingBottom,
+				spacingEnd,
+				spacingStart,
+				spacingTop,
+				borderRadius,
+				borderColor,
+				borderWidth,
+				overflow,
+				animate: motionState,
+				variants: variants$1,
+				dropShadow: shadowVariant,
+				className: cx("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", !disableAutoBorderRadius && borderRadiusClassName, className),
+				children
+			})
+		})
+	});
+});
+MenuContent.displayName = "MenuContent";
+
+//#endregion
+export { MenuContent };
+//# sourceMappingURL=Menu.Content.js.map

package/dist/components/client/Menu/Menu.Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Content.js","names":["MenuContent","variants","AriakitMenu"],"sources":["../../../../src/components/client/Menu/Menu.Content.tsx"],"sourcesContent":["import type {\n  MenuProps as AriakitMenuProps,\n  MenuProviderProps as AriakitMenuProviderProps,\n} from '@ariakit/react/menu';\nimport { Menu as AriakitMenu, useMenuContext } from '@ariakit/react/menu';\nimport { useStoreState } from '@ariakit/react-core/utils/store';\nimport { spacingMap } from '@yahoo/uds/fixtures';\nimport type { SpacingAlias } from '@yahoo/uds/tokens';\nimport { AnimatePresence, m } from 'motion/react';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { useNestedBorderRadius } from '../../../hooks/useNestedBorderRadius';\nimport { cx } from '../../../styles/styler';\nimport type { VStackProps } from '../../VStack';\nimport { VStack } from '../../VStack';\n\nconst MotionVStack = m.create(VStack);\n\n/* ---------------------------- ANIMATION HELPERS --------------------------- */\n\n// TODO: Move this to a shared location\ntype BasePlacement = 'top' | 'bottom' | 'left' | 'right';\n\nconst ANIMATION_CONFIG = { distance: 5, scale: 0.97 };\nconst variants = {\n  top: { x: 0, y: ANIMATION_CONFIG.distance },\n  bottom: { x: 0, y: -ANIMATION_CONFIG.distance },\n  left: { x: ANIMATION_CONFIG.distance, y: 0 },\n  right: { x: -ANIMATION_CONFIG.distance, y: 0 },\n} as const;\n\nconst getMenuAnimationVariants = (placement: AriakitMenuProviderProps['placement'] = 'bottom') => {\n  const [base = 'top'] = placement?.split('-') as [BasePlacement];\n\n  return {\n    closed: { ...variants[base], opacity: 0, scale: ANIMATION_CONFIG.scale },\n    open: { y: 0, x: 0, opacity: 1, scale: 1 },\n  };\n};\n\nconst useMenuAnimationVariants = (placement: AriakitMenuProviderProps['placement']) => {\n  return useMemo(() => getMenuAnimationVariants(placement), [placement]);\n};\n\n/* -------------------------------- COMPONENT ------------------------------- */\n\ninterface MenuContentProps extends Omit<VStackProps, 'asChild'> {\n  gutter?: SpacingAlias;\n  /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.\n   *  If you need to disable this, set this prop to true.\n   *\n   *  @link https://github.com/yahoo-uds/uds/blob/main/packages/uds/src/hooks/useNestedBorderRadius.ts\n   **/\n  disableAutoBorderRadius?: boolean;\n  /**\n   * `portalRef` is similar to `ref` but is scoped to the portal node. It's\n   * useful when you need to be informed when the portal element is appended to\n   * the DOM or removed from the DOM.\n   *\n   * Live examples:\n   * - [Form with Select](https://ariakit.org/examples/form-select)\n   * @example\n   * ```jsx\n   * const [portalElement, setPortalElement] = useState(null);\n   *\n   * <Portal portalRef={setPortalElement} />\n   * ```\n   */\n  portalRef?: AriakitMenuProps['portalRef'];\n  /**\n   * Determines whether the element should be rendered as a React Portal.\n   *\n   * Live examples:\n   * - [Combobox with integrated\n   *   filter](https://ariakit.org/examples/combobox-filtering-integrated)\n   * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)\n   * - [Hovercard with keyboard\n   *   support](https://ariakit.org/examples/hovercard-disclosure)\n   * - [Menubar](https://ariakit.org/components/menubar)\n   * - [Standalone Popover](https://ariakit.org/examples/popover-standalone)\n   * - [Animated Select](https://ariakit.org/examples/select-animated)\n   * @default true\n   */\n  portal?: boolean;\n  /**\n   * An HTML element or a memoized callback function that returns an HTML\n   * element to be used as the portal element. By default, the portal element\n   * will be a `div` element appended to the `document.body`.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)\n   * @example\n   * ```jsx\n   * const [portal, setPortal] = useState(null);\n   *\n   * <Portal portalElement={portal} />\n   * <div ref={setPortal} />\n   * ```\n   * @example\n   * ```jsx\n   * const getPortalElement = useCallback(() => {\n   *   const div = document.createElement(\"div\");\n   *   const portalRoot = document.getElementById(\"portal-root\");\n   *   portalRoot.appendChild(div);\n   *   return div;\n   * }, []);\n   *\n   * <Portal portalElement={getPortalElement} />\n   * ```\n   */\n  portalElement?: AriakitMenuProps['portalElement'];\n  /**\n   * Determines whether the popover should hide when the mouse leaves the\n   * popover or the anchor element and there's no _hover intent_, meaning, the\n   * mouse isn't moving toward the popover.\n   *\n   * This can be either a boolean or a callback receiving the mouse move event\n   * that initiated the behavior. The callback should return a boolean.\n   *\n   * **Note**: This behavior won't be triggered when the popover or any of its\n   * descendants are in focus.\n   * @default true\n   */\n  hideOnHoverOutside?: AriakitMenuProps['hideOnHoverOutside'];\n  /**\n   * Determines if the dialog will hide when the user presses the Escape key.\n   *\n   * This prop can be either a boolean or a function that accepts an event as an\n   * argument and returns a boolean. The event object represents the keydown\n   * event that initiated the hide action, which could be either a native\n   * keyboard event or a React synthetic event.\n   *\n   * **Note**: When placing Ariakit dialogs inside third-party dialogs, using\n   * `event.stopPropagation()` within this function will stop the event from\n   * reaching the third-party dialog, closing only the Ariakit dialog.\n   * @default true\n   */\n  hideOnEscape?: AriakitMenuProps['hideOnEscape'];\n  /**\n   * Determines if the dialog should hide when the user clicks or focuses on an\n   * element outside the dialog.\n   *\n   * This prop can be either a boolean or a function that takes an event as an\n   * argument and returns a boolean. The event object represents the event that\n   * triggered the action, which could be a native event or a React synthetic\n   * event of various types.\n   *\n   * Live examples:\n   * - [Selection Popover](https://ariakit.org/examples/popover-selection)\n   * @default true\n   */\n  hideOnInteractOutside?: AriakitMenuProps['hideOnInteractOutside'];\n  /**\n   * Determines if the pointer events outside of the popover and its anchor\n   * element should be disabled during _hover intent_, that is, when the mouse\n   * is moving toward the popover.\n   *\n   * This is required as these external events may trigger focus on other\n   * elements and close the popover while the user is attempting to hover over\n   * it.\n   *\n   * This can be either a boolean or a callback receiving the mouse event\n   * happening during hover intent. The callback should return a boolean.\n   * @default true\n   */\n  disablePointerEventsOnApproach?: AriakitMenuProps['disablePointerEventsOnApproach'];\n  /**\n   * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.\n   * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or\n   * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.\n   */\n  store?: AriakitMenuProps['store'];\n  /**\n   * Whether the popover should have the same width as the anchor element. This\n   * will be exposed to CSS as\n   * [`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).\n   * @default false\n   */\n  sameWidth?: AriakitMenuProps['sameWidth'];\n  /**\n   * @see https://ariakit.org/reference/focusable\n   * @default true\n   */\n  focusable?: AriakitMenuProps['focusable'];\n  /**\n   * This is an event handler prop triggered when the dialog's `close` event is\n   * dispatched. The `close` event is similar to the native dialog\n   * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)\n   * event. The only difference is that this event can be canceled with\n   * `event.preventDefault()`, which will prevent the dialog from hiding.\n   *\n   * It's important to note that this event only fires when the dialog store's\n   * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set\n   * to `false`. If the controlled\n   * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or\n   * if the dialog's visibility is altered in any other way (such as unmounting\n   * the dialog without adjusting the open state), this event won't be\n   * triggered.\n   *\n   * Live examples:\n   * - [Dialog with scrollable\n   *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)\n   * - [Dialog with details &\n   *   summary](https://ariakit.org/examples/dialog-details)\n   * - [Warning on Dialog\n   *   hide](https://ariakit.org/examples/dialog-hide-warning)\n   * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)\n   */\n  onClose?: AriakitMenuProps['onClose'];\n}\n\n/**\n * **📦 A Menu Content component**\n *\n * @componentType Client component\n *\n * @description\n * A content component for the menu, which is used to provide the menu context to the menu items.\n *\n * @see The {@link https://uds.build/docs/components/menu-content Menu.Content Docs} for more info\n *\n * @example\n * ```tsx\n * 'use client'; // Next.js client component\n *\n * import { Menu, Button } from \"@yahoo/uds\";\n * import { Calendar, Clipboard } from \"@yahoo/uds-icons\";\n *\n * export function MenuProviderExample() {\n *   return (\n *     <Menu.Provider>\n *       <Menu.Trigger asChild>\n *         <Button>Menu Options</Button>\n *       </Menu.Trigger>\n *       <Menu.Content>\n *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>\n *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>\n *           Clipboard\n *         </Menu.Item>\n *         <Menu.Item active>Active Item</Menu.Item>\n *       </Menu.Content>\n *     </Menu.Provider>\n *   )\n * }\n * ```\n *\n * @usage\n * Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.\n *\n * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)\n **/\nconst MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  {\n    // Spacing\n    gap,\n    spacing,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    gutter = '1',\n    // Color\n    backgroundColor = 'primary',\n    borderRadius = 'md',\n    // Borders\n    borderColor,\n    borderWidth = 'thin',\n    overflow,\n    dropShadow = 'lg',\n    // Styles\n    className,\n    // Ariakit props\n    sameWidth,\n    focusable,\n    children,\n    portalElement,\n    portal = true,\n    // Misc\n    disableAutoBorderRadius,\n    // Rest\n    ...props\n  },\n  ref,\n) {\n  const context = useMenuContext();\n  const open = useStoreState(context, 'open');\n  const mounted = useStoreState(context, 'mounted');\n  const currentPlacement = useStoreState(context, 'currentPlacement');\n\n  const placement = useStoreState(context, 'placement');\n  const [prevPlacement, setPrevPlacement] =\n    useState<AriakitMenuProviderProps['placement']>(currentPlacement);\n  const [nextPlacement, setNextPlacement] =\n    useState<AriakitMenuProviderProps['placement']>(currentPlacement);\n\n  // If placement changes (This can happen when the html direction updates)\n  useEffect(() => {\n    if (placement !== nextPlacement) {\n      setNextPlacement(placement);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [placement]);\n\n  // If the placement is updated because of some collision\n  useEffect(() => {\n    if (currentPlacement !== nextPlacement) {\n      setNextPlacement(currentPlacement);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [currentPlacement]);\n\n  useEffect(() => {\n    if (mounted && nextPlacement !== prevPlacement) {\n      setPrevPlacement(nextPlacement);\n    }\n  }, [mounted, nextPlacement, prevPlacement]);\n\n  // Setup variants\n  const motionState = useMemo(() => {\n    if (!open || !mounted) {\n      return 'closed';\n    }\n    return 'open';\n  }, [open, mounted]);\n\n  // Allows us to animate the shadow when the menu is open\n  const shadowVariant = useMemo(() => (open ? dropShadow : 'none'), [open, dropShadow]);\n\n  const variants = useMenuAnimationVariants(nextPlacement);\n  const borderRadiusClassName = useNestedBorderRadius({ borderRadius, spacing });\n  const gutterValue = useMemo(() => spacingMap[gutter], [gutter]);\n\n  return (\n    <AnimatePresence initial={false}>\n      <AriakitMenu\n        gutter={gutterValue}\n        sameWidth={sameWidth}\n        focusable={focusable}\n        store={context}\n        ref={ref}\n        portalElement={portalElement}\n        portal={portal}\n        {...props}\n        render={\n          <MotionVStack\n            backgroundColor={backgroundColor}\n            gap={gap}\n            spacing={spacing}\n            spacingBottom={spacingBottom}\n            spacingEnd={spacingEnd}\n            spacingStart={spacingStart}\n            spacingTop={spacingTop}\n            borderRadius={borderRadius}\n            borderColor={borderColor}\n            borderWidth={borderWidth}\n            overflow={overflow}\n            animate={motionState}\n            variants={variants}\n            dropShadow={shadowVariant}\n            className={cx(\n              // Base class\n              'uds-menu-content',\n              // Handle shadow animation\n              'transition-shadow',\n              'duration-200',\n              'ease-in-out',\n              // Set a min/max width\n              'min-w-60',\n              'max-w-lg',\n              'max-h-96',\n              'overflow-auto',\n              // Focus ring\n              'uds-ring',\n              'z-10',\n              // Misc\n              'group',\n              !disableAutoBorderRadius && borderRadiusClassName,\n              className,\n            )}\n          >\n            {children}\n          </MotionVStack>\n        }\n      />\n    </AnimatePresence>\n  );\n});\n\nMenuContent.displayName = 'MenuContent';\n\nexport { MenuContent, type MenuContentProps };\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,eAAe,EAAE,OAAO,OAAO;AAOrC,MAAM,mBAAmB;CAAE,UAAU;CAAG,OAAO;CAAM;AACrD,MAAM,WAAW;CACf,KAAK;EAAE,GAAG;EAAG,GAAG,iBAAiB;EAAU;CAC3C,QAAQ;EAAE,GAAG;EAAG,GAAG,CAAC,iBAAiB;EAAU;CAC/C,MAAM;EAAE,GAAG,iBAAiB;EAAU,GAAG;EAAG;CAC5C,OAAO;EAAE,GAAG,CAAC,iBAAiB;EAAU,GAAG;EAAG;CAC/C;AAED,MAAM,4BAA4B,YAAmD,aAAa;CAChG,MAAM,CAAC,OAAO,SAAS,WAAW,MAAM,IAAI;AAE5C,QAAO;EACL,QAAQ;GAAE,GAAG,SAAS;GAAO,SAAS;GAAG,OAAO,iBAAiB;GAAO;EACxE,MAAM;GAAE,GAAG;GAAG,GAAG;GAAG,SAAS;GAAG,OAAO;GAAG;EAC3C;;AAGH,MAAM,4BAA4B,cAAqD;AACrF,QAAO,cAAc,yBAAyB,UAAU,EAAE,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkNxE,MAAM,cAAc,WAA6C,SAASA,cACxE,EAEE,KACA,SACA,eACA,YACA,cACA,YACA,SAAS,KAET,kBAAkB,WAClB,eAAe,MAEf,aACA,cAAc,QACd,UACA,aAAa,MAEb,WAEA,WACA,WACA,UACA,eACA,SAAS,MAET,wBAEA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,gBAAgB;CAChC,MAAM,OAAO,cAAc,SAAS,OAAO;CAC3C,MAAM,UAAU,cAAc,SAAS,UAAU;CACjD,MAAM,mBAAmB,cAAc,SAAS,mBAAmB;CAEnE,MAAM,YAAY,cAAc,SAAS,YAAY;CACrD,MAAM,CAAC,eAAe,oBACpB,SAAgD,iBAAiB;CACnE,MAAM,CAAC,eAAe,oBACpB,SAAgD,iBAAiB;AAGnE,iBAAgB;AACd,MAAI,cAAc,cAChB,kBAAiB,UAAU;IAG5B,CAAC,UAAU,CAAC;AAGf,iBAAgB;AACd,MAAI,qBAAqB,cACvB,kBAAiB,iBAAiB;IAGnC,CAAC,iBAAiB,CAAC;AAEtB,iBAAgB;AACd,MAAI,WAAW,kBAAkB,cAC/B,kBAAiB,cAAc;IAEhC;EAAC;EAAS;EAAe;EAAc,CAAC;CAG3C,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,QAAQ,CAAC,QACZ,QAAO;AAET,SAAO;IACN,CAAC,MAAM,QAAQ,CAAC;CAGnB,MAAM,gBAAgB,cAAe,OAAO,aAAa,QAAS,CAAC,MAAM,WAAW,CAAC;CAErF,MAAMC,aAAW,yBAAyB,cAAc;CACxD,MAAM,wBAAwB,sBAAsB;EAAE;EAAc;EAAS,CAAC;AAG9E,QACE,oBAAC;EAAgB,SAAS;YACxB,oBAACC;GACC,QALc,cAAc,WAAW,SAAS,CAAC,OAAO,CAAC;GAM9C;GACA;GACX,OAAO;GACF;GACU;GACP;GACR,GAAI;GACJ,QACE,oBAAC;IACkB;IACZ;IACI;IACM;IACH;IACE;IACF;IACE;IACD;IACA;IACH;IACV,SAAS;IACT,UAAUD;IACV,YAAY;IACZ,WAAW,GAET,oBAEA,qBACA,gBACA,eAEA,YACA,YACA,YACA,iBAEA,YACA,QAEA,SACA,CAAC,2BAA2B,uBAC5B,UACD;IAEA;KACY;IAEjB;GACc;EAEpB;AAEF,YAAY,cAAc"}