@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/popover/popover.js

@@ -1,228 +1,154 @@
+import { t as clsx } from "../../clsx-BUU5J41u.js";
+import { l as $07b14b47974efb58$export$5b6b19405a83ff9d, n as $de32f1b87079253c$export$3ddf2d174ce01153, t as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-i5VLQw1o.js";
+import { t as Button } from "../../button-COTeluL8.js";
+import { t as __ } from "../../build-module-sxK3nxOK.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, g as $de32f1b87079253c$export$3ddf2d174ce01153, h as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-DTIxSDhz.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { Button } from "../button/button.js";
+//#region lib/components/popover/popover.jsx
 /**
- * @typedef {Object} PopoverProps
- * @property {React.Ref} props.triggerRef - Ref of the trigger button. In uncontrolled mode, this element will be used to open the popover. In controlled mode, the popover will be anchored to this element.
- * @property {boolean} [props.openByDefault=false] - (**Controlled mode**) If `true`, the popover is open by default.
- * @property {boolean} props.isOpen - (**Uncontrolled mode**) If `true`, the popover is open.
- * @property {Function} props.onOpenChange - (**Uncontrolled mode**) Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
- * @property {PopoverPlacement} props.placement - The placement of the popover.
- * @property {string} [props.className] - Classes to pass to the popover contents.
- * @property {string} [props.wrapperClassName] - Classes to pass to the popover wrapper.
- * @property {Object} props.style - Styles to pass to the popover.
- * @property {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
- * @property {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
- * @property {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
- * @property {boolean} props.shouldFlip - If `true`, the popover should flip when there is not enough space.
- * @property {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
- * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
- *
- * @preserve
- */
+* @typedef {Object} PopoverProps
+* @property {React.Ref} props.triggerRef - Ref of the trigger button. In uncontrolled mode, this element will be used to open the popover. In controlled mode, the popover will be anchored to this element.
+* @property {boolean} [props.openByDefault=false] - (**Controlled mode**) If `true`, the popover is open by default.
+* @property {boolean} props.isOpen - (**Uncontrolled mode**) If `true`, the popover is open.
+* @property {Function} props.onOpenChange - (**Uncontrolled mode**) Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
+* @property {PopoverPlacement} props.placement - The placement of the popover.
+* @property {string} [props.className] - Classes to pass to the popover contents.
+* @property {string} [props.wrapperClassName] - Classes to pass to the popover wrapper.
+* @property {Object} props.style - Styles to pass to the popover.
+* @property {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
+* @property {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
+* @property {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
+* @property {boolean} props.shouldFlip - If `true`, the popover should flip when there is not enough space.
+* @property {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
+* @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
+*/
 /**
- * A popover component.
- *
- * Two modes of operation are supported:
- * - **controlled mode**: pass `isOpen` and `onOpenChange` to control when the popover is open.
- * - **uncontrolled mode**: pass `openByDefault` to set the initial popover state. The show/hide state will be managed internally, based on the interaction with the trigger button.
- *
- * @component
- * @param {PopoverProps} props - Component props.
- *
- * @returns {JSX.Element} The Popover component.
- *
- * @example
- * // Uncontrolled mode.
- * const ref = useRef(null);
- *
- * <Button forwardedRef={ref}>Open popover</Button>
- *
- * <Popover
- * 	triggerRef={triggerRef}
- * 	openByDefault={true}
- * >
- * 	...
- * </Popover>
- *
- * @example
- * // Controlled mode.
- * const [open, setOpen] = useState(false);
- *
- * <Button onPress={() => setOpen(true)}>Open popover</Button>
- *
- * <Popover
- * 	onOpenChange={setOpen}
- * 	isOpen={open}
- * 	triggerRef={triggerRef}
- * >
- * 	...
- * 	<Button onPress={() => setOpen(false)}>Close popover</Button>
- * </Popover>
- *
- * @preserve
- */
-const Popover = (props) => {
-  const {
-    children,
-    triggerRef,
-    openByDefault,
-    isOpen,
-    onOpenChange,
-    placement,
-    className,
-    wrapperClassName,
-    style,
-    offset,
-    crossOffset,
-    containerPadding,
-    shouldFlip,
-    shouldCloseOnInteractOutside = () => true,
-    "aria-label": rawAriaLabel,
-    hidden,
-    popoverProps,
-    ...other
-  } = props;
-  let ariaLabel = rawAriaLabel;
-  if (ariaLabel === false) {
-    ariaLabel = void 0;
-  }
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    $07b14b47974efb58$export$5b6b19405a83ff9d,
-    {
-      shouldFlip,
-      shouldCloseOnInteractOutside,
-      triggerRef,
-      isOpen,
-      onOpenChange,
-      defaultOpen: openByDefault,
-      placement,
-      offset,
-      crossOffset,
-      containerPadding,
-      className: ({ isEntering, isExiting }) => clsx(
-        "es:font-sans",
-        "es:rounded-2xl es:bg-linear-to-br es:from-surface-50/85 es:to-surface-50/85 es:inset-ring es:inset-ring-surface-500/15 es:shadow-xl es:outline-hidden",
-        "es:backdrop-blur-xl es:backdrop-brightness-110 es:backdrop-saturate-125",
-        "es:inset-shadow-xs es:inset-shadow-white/50",
-        "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
-        "es:placement-left:origin-right es:placement-right:origin-left",
-        "es:motion-ease-spring-bouncy",
-        isEntering && "es:*:pointer-events-none es:motion-duration-300",
-        "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
-        isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-90 es:motion-opacity-in-0",
-        isEntering && "es:placement-top:motion-translate-y-in-[0.25rem] es:placement-bottom:motion-translate-y-in-[-0.25rem]",
-        isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-90 es:motion-opacity-out-0 es:motion-duration-200",
-        isExiting && "es:placement-top:motion-translate-y-out-[0.25rem] es:placement-bottom:motion-translate-y-out-[-0.25rem]",
-        wrapperClassName
-      ),
-      style,
-      ...popoverProps,
-      children: /* @__PURE__ */ jsx(
-        $de32f1b87079253c$export$3ddf2d174ce01153,
-        {
-          className: clsx("es:p-1 es:text-sm es:outline-hidden", className),
-          "aria-label": ariaLabel,
-          ...other,
-          children
-        }
-      )
-    }
-  );
+* A popover component.
+*
+* Two modes of operation are supported:
+* - **controlled mode**: pass `isOpen` and `onOpenChange` to control when the popover is open.
+* - **uncontrolled mode**: pass `openByDefault` to set the initial popover state. The show/hide state will be managed internally, based on the interaction with the trigger button.
+*
+* @component
+* @param {PopoverProps} props - Component props.
+*
+* @returns {JSX.Element} The Popover component.
+*
+* @example
+* // Uncontrolled mode.
+* const ref = useRef(null);
+*
+* <Button forwardedRef={ref}>Open popover</Button>
+*
+* <Popover
+* 	triggerRef={triggerRef}
+* 	openByDefault={true}
+* >
+* 	...
+* </Popover>
+*
+* @example
+* // Controlled mode.
+* const [open, setOpen] = useState(false);
+*
+* <Button onPress={() => setOpen(true)}>Open popover</Button>
+*
+* <Popover
+* 	onOpenChange={setOpen}
+* 	isOpen={open}
+* 	triggerRef={triggerRef}
+* >
+* 	...
+* 	<Button onPress={() => setOpen(false)}>Close popover</Button>
+* </Popover>
+*/
+var Popover = (props) => {
+	const { children, triggerRef, openByDefault, isOpen, onOpenChange, placement, className, wrapperClassName, style, offset, crossOffset, containerPadding, shouldFlip, shouldCloseOnInteractOutside = () => true, "aria-label": rawAriaLabel, hidden, popoverProps, ...other } = props;
+	let ariaLabel = rawAriaLabel;
+	if (ariaLabel === false) ariaLabel = void 0;
+	if (hidden) return null;
+	return jsx($07b14b47974efb58$export$5b6b19405a83ff9d, {
+		shouldFlip,
+		shouldCloseOnInteractOutside,
+		triggerRef,
+		isOpen,
+		onOpenChange,
+		defaultOpen: openByDefault,
+		placement,
+		offset,
+		crossOffset,
+		containerPadding,
+		className: ({ isEntering, isExiting }) => clsx("es:font-sans", "es:rounded-2xl es:bg-linear-to-br es:from-surface-50/85 es:to-surface-50/85 es:inset-ring es:inset-ring-surface-500/15 es:shadow-xl es:outline-hidden", "es:backdrop-blur-xl es:backdrop-brightness-110 es:backdrop-saturate-125", "es:inset-shadow-xs es:inset-shadow-white/50", "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left", "es:placement-left:origin-right es:placement-right:origin-left", "es:motion-ease-spring-bouncy", isEntering && "es:*:pointer-events-none es:motion-duration-300", "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left", isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-90 es:motion-opacity-in-0", isEntering && "es:placement-top:motion-translate-y-in-[0.25rem] es:placement-bottom:motion-translate-y-in-[-0.25rem]", isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-90 es:motion-opacity-out-0 es:motion-duration-200", isExiting && "es:placement-top:motion-translate-y-out-[0.25rem] es:placement-bottom:motion-translate-y-out-[-0.25rem]", wrapperClassName),
+		style,
+		...popoverProps,
+		children: jsx($de32f1b87079253c$export$3ddf2d174ce01153, {
+			className: clsx("es:p-1 es:text-sm es:outline-hidden", className),
+			"aria-label": ariaLabel,
+			...other,
+			children
+		})
+	});
 };
 /**
- * @typedef {import('../button/button').ButtonProps} ButtonProps
- *
- * @preserve
- * */
+* @typedef {import('../button/button').ButtonProps} ButtonProps
+* */
 /**
- * A simple version of the Popover component that includes a trigger button.
- * The control of the popover is handled internally. A custom trigger can be provided.
- *
- * If you need more control over the trigger, use the Popover component directly.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} props.trigger - Allows using a custom trigger element.
- * @param {JSX.Element} [props.triggerButtonIcon] - The icon for the built-in trigger button.
- * @param {string} props.triggerButtonLabel - The label for the built-in trigger button.
- * @param {ButtonProps} props.triggerButtonProps - Props to pass to the built-in trigger button.
- * @param {Function} props.onOpenChange - Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
- * @param {boolean} props.openByDefault - If `true`, the popover is open by default.
- * @param {PopoverPlacement} props.placement - The placement of the popover.
- * @param {string} props.className - Classes to pass to the popover.
- * @param {Object} props.style - Styles to pass to the popover.
- * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
- * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
- * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The TriggeredPopover component.
- *
- * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
- *
- * @example
- * <TriggeredPopover>
- * 		...
- * </TriggeredPopover>
- *
- * @preserve
- */
-const TriggeredPopover = (props) => {
-  const {
-    trigger,
-    triggerButtonIcon,
-    triggerButtonLabel = !triggerButtonIcon && __("Open", "eightshift-ui-components"),
-    triggerButtonProps,
-    children,
-    onOpenChange,
-    openByDefault,
-    placement,
-    style,
-    className,
-    offset,
-    crossOffset,
-    containerPadding,
-    hidden,
-    ...rest
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { onOpenChange, children: [
-    trigger,
-    !trigger && /* @__PURE__ */ jsx(
-      Button,
-      {
-        icon: triggerButtonIcon,
-        ...triggerButtonProps,
-        children: triggerButtonLabel
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        placement,
-        openByDefault,
-        offset,
-        crossOffset,
-        containerPadding,
-        className,
-        style,
-        ...rest,
-        children
-      }
-    )
-  ] });
-};
-export {
-  Popover,
-  TriggeredPopover
+* A simple version of the Popover component that includes a trigger button.
+* The control of the popover is handled internally. A custom trigger can be provided.
+*
+* If you need more control over the trigger, use the Popover component directly.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {JSX.Element} props.trigger - Allows using a custom trigger element.
+* @param {JSX.Element} [props.triggerButtonIcon] - The icon for the built-in trigger button.
+* @param {string} props.triggerButtonLabel - The label for the built-in trigger button.
+* @param {ButtonProps} props.triggerButtonProps - Props to pass to the built-in trigger button.
+* @param {Function} props.onOpenChange - Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
+* @param {boolean} props.openByDefault - If `true`, the popover is open by default.
+* @param {PopoverPlacement} props.placement - The placement of the popover.
+* @param {string} props.className - Classes to pass to the popover.
+* @param {Object} props.style - Styles to pass to the popover.
+* @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
+* @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
+* @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The TriggeredPopover component.
+*
+* @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
+*
+* @example
+* <TriggeredPopover>
+* 		...
+* </TriggeredPopover>
+*/
+var TriggeredPopover = (props) => {
+	const { trigger, triggerButtonIcon, triggerButtonLabel = !triggerButtonIcon && __("Open", "eightshift-ui-components"), triggerButtonProps, children, onOpenChange, openByDefault, placement, style, className, offset, crossOffset, containerPadding, hidden, ...rest } = props;
+	if (hidden) return null;
+	return jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, {
+		onOpenChange,
+		children: [
+			trigger,
+			!trigger && jsx(Button, {
+				icon: triggerButtonIcon,
+				...triggerButtonProps,
+				children: triggerButtonLabel
+			}),
+			jsx(Popover, {
+				placement,
+				openByDefault,
+				offset,
+				crossOffset,
+				containerPadding,
+				className,
+				style,
+				...rest,
+				children
+			})
+		]
+	});
 };
+//#endregion
+export { Popover, TriggeredPopover };

package/dist/components/portal-provider/portal-provider.js

@@ -1,24 +1,26 @@
+import { t as $96b38030c423d352$export$78efe591171d7d45 } from "../../PortalProvider-DinZZCKX.js";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
-import { $ as $96b38030c423d352$export$78efe591171d7d45 } from "../../PortalProvider-BQ1X8vGX.js";
+//#region lib/components/portal-provider/portal-provider.jsx
 /**
- * Component that allows changing the default target for transient components like `Menu`, `Popover`, etc.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element|null} [props.portalElement] - Element to use as the portal container.
- *
- * @returns {JSX.Element} The Menu component.
- *
- * @example
- * <PortalProvider>
- * 	...
- * </PortalProvider>
- *
- * @preserve
- */
-const PortalProvider = ({ children, portalElement }) => {
-  return /* @__PURE__ */ jsx($96b38030c423d352$export$78efe591171d7d45, { getContainer: () => portalElement, children });
-};
-export {
-  PortalProvider
+* Component that allows changing the default target for transient components like `Menu`, `Popover`, etc.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {JSX.Element|null} [props.portalElement] - Element to use as the portal container.
+*
+* @returns {JSX.Element} The Menu component.
+*
+* @example
+* <PortalProvider>
+* 	...
+* </PortalProvider>
+*/
+var PortalProvider = ({ children, portalElement }) => {
+	return jsx($96b38030c423d352$export$78efe591171d7d45, {
+		getContainer: useCallback(() => portalElement, [portalElement]),
+		children
+	});
 };
+//#endregion
+export { PortalProvider };