@yahoo/uds 3.116.3 → 3.117.0

package/dist/components/client/Popover/Popover.cjs

@@ -0,0 +1,96 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_Popover_PopoverContext = require('./PopoverContext.cjs');
+const require_components_client_Popover_UDSPopoverConfigProvider = require('./UDSPopoverConfigProvider.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Popover/Popover.tsx
+const POPOVER_OPEN_EVENT = "uds:popover-open";
+/**
+* **⚙️️ A Popover component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
+*
+* Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
+* @see
+* Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
+*
+* <Popover>
+*   <PopoverTrigger>
+*     <Button>Popover Trigger</Button>
+*   </PopoverTrigger>
+*   <PopoverContent>basic popover content</PopoverContent>
+* </Popover>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
+**/
+function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		...open ? { mounted: true } : {}
+	} : void 0;
+	const { animationDuration: animationDurationConfig, ariaKitPlacement } = require_components_client_Popover_UDSPopoverConfigProvider.usePopoverConfig({ placement });
+	const id = (0, react.useId)();
+	const store = (0, _ariakit_react.usePopoverStore)({ defaultOpen });
+	const handleSetOpen = (0, react.useCallback)((newOpen) => {
+		if (newOpen) {
+			onOpen?.();
+			document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: id }));
+		}
+	}, [onOpen, id]);
+	(0, react.useEffect)(() => {
+		const handler = (e) => {
+			if (("detail" in e ? e.detail : void 0) !== id) store?.setState("open", false);
+		};
+		document.addEventListener(POPOVER_OPEN_EVENT, handler);
+		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
+	}, [id, store]);
+	const isControlled = open !== void 0;
+	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Popover_PopoverContext.PopoverInternalContext.Provider, {
+		value: {
+			portal,
+			hideArrow,
+			hideDismissButton,
+			onClose,
+			isControlled,
+			animationDuration,
+			reducedMotion,
+			disableAutoFocus,
+			disableVerticalSpacing,
+			disableHorizontalSpacing,
+			sameWidth,
+			gutter
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			setOpen: handleSetOpen,
+			store,
+			...controlledProps,
+			children
+		})
+	});
+}
+Popover.displayName = "Popover";
+
+//#endregion
+exports.Popover = Popover;

package/dist/components/client/Popover/Popover.d.cts

@@ -0,0 +1,55 @@
+
+import { UniversalPopoverProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Popover/Popover.d.ts
+type PopoverProps = UniversalPopoverProps;
+/**
+ * **⚙️️ A Popover component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
+ *
+ * Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
+ * @see
+ * Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
+ *
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button>Popover Trigger</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>basic popover content</PopoverContent>
+ * </Popover>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
+ **/
+declare function Popover({
+  children,
+  placement,
+  open,
+  defaultOpen,
+  portal,
+  hideArrow,
+  hideDismissButton,
+  onClose,
+  onOpen,
+  reduceMotion: forceReduceMotion,
+  disableAutoFocus,
+  disableVerticalSpacing,
+  disableHorizontalSpacing,
+  sameWidth,
+  gutter
+}: PopoverProps): react_jsx_runtime0.JSX.Element;
+declare namespace Popover {
+  var displayName: string;
+}
+//#endregion
+export { Popover };

package/dist/components/client/Popover/Popover.d.ts

@@ -0,0 +1,55 @@
+
+import { UniversalPopoverProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Popover/Popover.d.ts
+type PopoverProps = UniversalPopoverProps;
+/**
+ * **⚙️️ A Popover component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
+ *
+ * Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
+ * @see
+ * Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
+ *
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button>Popover Trigger</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>basic popover content</PopoverContent>
+ * </Popover>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
+ **/
+declare function Popover({
+  children,
+  placement,
+  open,
+  defaultOpen,
+  portal,
+  hideArrow,
+  hideDismissButton,
+  onClose,
+  onOpen,
+  reduceMotion: forceReduceMotion,
+  disableAutoFocus,
+  disableVerticalSpacing,
+  disableHorizontalSpacing,
+  sameWidth,
+  gutter
+}: PopoverProps): react_jsx_runtime0.JSX.Element;
+declare namespace Popover {
+  var displayName: string;
+}
+//#endregion
+export { Popover };

package/dist/components/client/Popover/Popover.js

@@ -0,0 +1,94 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { PopoverInternalContext } from "./PopoverContext.js";
+import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
+import { useCallback, useEffect, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PopoverProvider, usePopoverStore } from "@ariakit/react";
+import { useReducedMotion } from "motion/react";
+
+//#region src/components/client/Popover/Popover.tsx
+const POPOVER_OPEN_EVENT = "uds:popover-open";
+/**
+* **⚙️️ A Popover component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
+*
+* Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
+* @see
+* Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
+*
+* <Popover>
+*   <PopoverTrigger>
+*     <Button>Popover Trigger</Button>
+*   </PopoverTrigger>
+*   <PopoverContent>basic popover content</PopoverContent>
+* </Popover>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
+**/
+function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		...open ? { mounted: true } : {}
+	} : void 0;
+	const { animationDuration: animationDurationConfig, ariaKitPlacement } = usePopoverConfig({ placement });
+	const id = useId();
+	const store = usePopoverStore({ defaultOpen });
+	const handleSetOpen = useCallback((newOpen) => {
+		if (newOpen) {
+			onOpen?.();
+			document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: id }));
+		}
+	}, [onOpen, id]);
+	useEffect(() => {
+		const handler = (e) => {
+			if (("detail" in e ? e.detail : void 0) !== id) store?.setState("open", false);
+		};
+		document.addEventListener(POPOVER_OPEN_EVENT, handler);
+		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
+	}, [id, store]);
+	const isControlled = open !== void 0;
+	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
+	return /* @__PURE__ */ jsx(PopoverInternalContext.Provider, {
+		value: {
+			portal,
+			hideArrow,
+			hideDismissButton,
+			onClose,
+			isControlled,
+			animationDuration,
+			reducedMotion,
+			disableAutoFocus,
+			disableVerticalSpacing,
+			disableHorizontalSpacing,
+			sameWidth,
+			gutter
+		},
+		children: /* @__PURE__ */ jsx(PopoverProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			setOpen: handleSetOpen,
+			store,
+			...controlledProps,
+			children
+		})
+	});
+}
+Popover.displayName = "Popover";
+
+//#endregion
+export { Popover };

package/dist/components/client/Popover/PopoverContent.cjs

@@ -0,0 +1,175 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../fixtures/dist/index.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_Box = require('../../Box.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_client_Pressable = require('../Pressable.cjs');
+const require_components_client_Popover_PopoverContext = require('./PopoverContext.cjs');
+const require_components_client_Popover_UDSPopoverConfigProvider = require('./UDSPopoverConfigProvider.cjs');
+const require_hooks_useForkRef = require('../../../hooks/useForkRef.cjs');
+const require_hooks_useSvgFloatingContent = require('../../../hooks/useSvgFloatingContent.cjs');
+const require_components_SvgFloatingOverlay = require('../../SvgFloatingOverlay.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Popover/PopoverContent.tsx
+const ARROW_HEIGHT = 12;
+const ARROW_WIDTH = 22;
+const ARROW_TIP_RADIUS_FRACTION = .3;
+const PopoverContent = (0, react.forwardRef)(function PopoverContent({ children, className, closeIcon = _yahoo_uds_icons.Cross, slotProps, maxWidth, maxHeight }, ref) {
+	const store = (0, _ariakit_react.usePopoverContext)();
+	const open = (0, _ariakit_react.useStoreState)(store, "open");
+	const internalContext = (0, react.useContext)(require_components_client_Popover_PopoverContext.PopoverInternalContext);
+	const disableVerticalSpacing = internalContext?.disableVerticalSpacing ?? false;
+	const disableHorizontalSpacing = internalContext?.disableHorizontalSpacing ?? false;
+	const sameWidth = internalContext?.sameWidth ?? false;
+	const gutter = internalContext?.gutter ?? 4;
+	const currentPlacement = (0, _ariakit_react.useStoreState)(store, "currentPlacement");
+	const placement = (0, _ariakit_react.useStoreState)(store, "placement");
+	const effectivePlacement = currentPlacement ?? placement ?? "top";
+	const { borderRadius, gap, spacingHorizontal, spacingVertical, dismissButtonSpacing, dismissIconSize } = require_components_client_Popover_UDSPopoverConfigProvider.usePopoverConfig();
+	const defaultBorderRadius = borderRadius["default"];
+	const defaultGap = gap["default"];
+	const defaultSpacingHorizontal = spacingHorizontal["default"];
+	const defaultSpacingVertical = spacingVertical["default"];
+	const defaultDismissButtonSpacing = require_index.spacingMap[dismissButtonSpacing["default"]];
+	const defaultDismissButtonSize = dismissIconSize["default"] + 2 * defaultDismissButtonSpacing;
+	const arrowRef = (0, react.useRef)(null);
+	const reducedMotion = internalContext ? internalContext.reducedMotion : false;
+	const animationDuration = reducedMotion || !internalContext ? 0 : internalContext.animationDuration;
+	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = require_hooks_useSvgFloatingContent.useSvgFloatingContent({
+		open: open ?? false,
+		effectivePlacement,
+		borderRadius: defaultBorderRadius,
+		arrowRef,
+		animationDuration,
+		hideArrow: internalContext?.hideArrow,
+		arrowWidth: ARROW_WIDTH,
+		arrowHeight: ARROW_HEIGHT,
+		arrowTipRadiusFraction: ARROW_TIP_RADIUS_FRACTION
+	});
+	const mergedRef = require_hooks_useForkRef.useForkRef(ref, internalRef);
+	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
+	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			popoverSizeRoot: "default",
+			popoverVariantRoot: "default",
+			display: "flex",
+			position: "relative",
+			className: require_styles_styler.cx("z-[9999]", "outline-none", "focus-visible:outline-none", className)
+		}),
+		contentWrapper: require_styles_styler.getStyles({
+			display: "block",
+			spacingTop: disableVerticalSpacing ? "0" : defaultSpacingVertical,
+			spacingStart: disableHorizontalSpacing ? "0" : defaultSpacingHorizontal,
+			spacingBottom: disableVerticalSpacing ? "0" : defaultSpacingVertical,
+			spacingEnd: internalContext?.hideDismissButton ? disableHorizontalSpacing ? "0" : defaultSpacingHorizontal : void 0
+		}),
+		svgBase: require_styles_styler.getStyles({
+			popoverSizeSvgBase: "default",
+			popoverVariantSvgBase: "default",
+			className: require_styles_styler.cx("uds-bgBlurFillFallback")
+		}),
+		svgBorder: require_styles_styler.getStyles({
+			popoverSizeSvgBorder: "default",
+			popoverVariantSvgBorder: "default"
+		}),
+		blur: require_styles_styler.getStyles({
+			popoverVariantBlur: "default",
+			position: "absolute",
+			width: "full",
+			height: "full",
+			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]")
+		}),
+		closeIconContainer: require_styles_styler.getStyles({
+			flexShrink: "0",
+			borderRadius: "full",
+			alignItems: "center",
+			justifyContent: "center",
+			display: "flex",
+			className: require_styles_styler.cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
+		}),
+		closeIcon: require_styles_styler.getStyles({
+			popoverVariantCloseIcon: "default",
+			popoverSizeCloseIcon: "default"
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Popover, {
+		hideOnInteractOutside: (event) => {
+			if (internalContext && !internalContext.isControlled) return true;
+			internalContext?.onClose?.(event);
+			return false;
+		},
+		ref: mergedRef,
+		className: classNames.root,
+		portal: internalContext ? internalContext.portal : true,
+		gutter: internalContext?.hideArrow ? gutter : ARROW_HEIGHT + gutter,
+		updatePosition: onPositionUpdate,
+		style: {
+			...shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : {},
+			maxWidth,
+			maxHeight
+		},
+		onClose: internalContext?.onClose,
+		sameWidth,
+		autoFocusOnShow: internalContext?.disableAutoFocus ? false : (element) => {
+			element?.focus({ preventScroll: true });
+			return false;
+		},
+		autoFocusOnHide: !internalContext?.disableAutoFocus,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SvgFloatingOverlay.SvgFloatingOverlay, {
+				blurClassName: classNames.blur,
+				svgClassNames: {
+					base: classNames.svgBase,
+					border: classNames.svgBorder
+				},
+				arrowHeight: ARROW_HEIGHT,
+				contentWrapperSlotProps: { alignItems: "flex-start" },
+				borderRadius: defaultBorderRadius,
+				svgBaseStyle: slotProps?.svgBase?.style,
+				svgBorderStyle: slotProps?.svgBorder?.style,
+				...svgFloatingContentProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					className: require_styles_styler.cx(classNames.contentWrapper),
+					style: { paddingInlineEnd: internalContext?.hideDismissButton || disableHorizontalSpacing ? void 0 : require_index.spacingMap[defaultGap] + require_index.spacingMap[defaultSpacingHorizontal] + defaultDismissButtonSize },
+					children
+				})
+			}),
+			!internalContext?.hideDismissButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverDismiss, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+				className: require_styles_styler.cx(classNames.closeIconContainer, "absolute", "z-[4]", closeIconContainerClassName),
+				...closeIconContainerProps,
+				style: {
+					...closeIconContainerProps?.style,
+					top: require_index.spacingMap[defaultSpacingVertical],
+					insetInlineEnd: require_index.spacingMap[defaultSpacingHorizontal],
+					width: defaultDismissButtonSize,
+					height: defaultDismissButtonSize,
+					...svgFloatingContentProps.childTransitionStyle
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: closeIcon,
+					iconProps: {
+						className: require_styles_styler.cx(classNames.closeIcon, closeIconClassName),
+						...closeIconProps
+					}
+				})
+			}) }),
+			!internalContext?.hideArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverArrow, {
+				size: 1,
+				ref: arrowRef,
+				style: { opacity: 0 }
+			})
+		]
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+
+//#endregion
+exports.PopoverContent = PopoverContent;

package/dist/components/client/Popover/PopoverContent.d.cts

@@ -0,0 +1,26 @@
+
+import { IconPropsWithSVGProps, UniversalPopoverContentProps } from "../../../types/dist/index.cjs";
+import { PressableProps } from "../Pressable.cjs";
+import "../../../index.cjs";
+import * as react from "react";
+import { CSSProperties } from "react";
+
+//#region src/components/client/Popover/PopoverContent.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface PopoverContentProps extends UniversalPopoverContentProps {
+  slotProps?: {
+    closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    closeIconContainer?: Partial<PressableProps & DataAttributes>;
+    svgBase?: {
+      style?: CSSProperties & Record<`--${string}`, string | undefined>;
+    };
+    svgBorder?: {
+      style?: CSSProperties & Record<`--${string}`, string | undefined>;
+    };
+  };
+}
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { PopoverContent };

package/dist/components/client/Popover/PopoverContent.d.ts

@@ -0,0 +1,26 @@
+
+import { IconPropsWithSVGProps, UniversalPopoverContentProps } from "../../../types/dist/index.js";
+import { PressableProps } from "../Pressable.js";
+import "../../../index.js";
+import * as react from "react";
+import { CSSProperties } from "react";
+
+//#region src/components/client/Popover/PopoverContent.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface PopoverContentProps extends UniversalPopoverContentProps {
+  slotProps?: {
+    closeIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    closeIconContainer?: Partial<PressableProps & DataAttributes>;
+    svgBase?: {
+      style?: CSSProperties & Record<`--${string}`, string | undefined>;
+    };
+    svgBorder?: {
+      style?: CSSProperties & Record<`--${string}`, string | undefined>;
+    };
+  };
+}
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { PopoverContent };