@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/overlay/OverlayTrigger.d.ts

@@ -1,8 +1,6 @@
 import { default as React, PropsWithChildren } from 'react';
-import { Options } from '@popperjs/core';
 import { Placement } from '../../values/Placement';
 import { TriggerType } from '../../values/Trigger';
-type PopperConfig = Partial<Options>;
 export type OverlayTriggerProps = {
     /**
      * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired
@@ -20,12 +18,6 @@ export type OverlayTriggerProps = {
      * @default false
      */
     defaultShow?: boolean;
-    /**
-     * Defines the usage of React Portal.
-     *
-     * @default true
-     */
-    enablePortal?: boolean;
     /**
      * Specify which action or actions trigger Overlay visibility
      *
@@ -59,9 +51,6 @@ export type OverlayTriggerProps = {
      *
      * possible values are:
      *
-     * - `OverlayTrigger.AUTO_START`
-     * - `OverlayTrigger.AUTO`
-     * - `OverlayTrigger.AUTO_END`
      * - `OverlayTrigger.TOP_START`
      * - `OverlayTrigger.TOP`
      * - `OverlayTrigger.TOP_END`
@@ -74,9 +63,6 @@ export type OverlayTriggerProps = {
      * - `OverlayTrigger.LEFT_START`
      * - `OverlayTrigger.LEFT`
      * - `OverlayTrigger.LEFT_END`
-     * - `'auto-start'`
-     * - `'auto'`
-     * - `'auto-end'`
      * - `'top-start'`
      * - `'top'`
      * - `'top-end'`
@@ -90,32 +76,25 @@ export type OverlayTriggerProps = {
      * - `'left'`
      * - `'left-end'`
      *
+     * The requested placement controls the CSS Anchor Positioning rules through `data-overlay-placement`.
+     * The side used for rendering the arrow is exposed through `data-overlay-arrow-placement` so Tooltip and Popover
+     * arrows can point towards the anchor after a CSS fallback side was selected.
+     *
+     * Overlay and arrow offsets can be adjusted with CSS custom properties on the overlay element
+     * (for example through the `style` or `className` of Tooltip or Popover):
+     *
+     * - `--anchor-offset-block` for the distance between the arrow tip and anchor on `top` and `bottom` placements
+     * - `--anchor-offset-inline` for the distance between the arrow tip and anchor on `left` and `right` placements
+     * - `--anchor-alignment-offset-inline` for shifting `*-start` and `*-end` aligned overlays
+     * - `--overlay-arrow-offset-inline` for `top` and `bottom` placements
+     * - `--overlay-arrow-offset-block` for `left` and `right` placements
+     *
+     * Positive inline values move the overlay or arrow to the right; positive block values move it down.
+     * Popover can also hide the arrow with `showArrow={false}` when an arrow does not fit the surrounding layout.
+     *
      * @default 'top'
      */
     placement?: Placement;
-    /**
-     * A Popper.js config object passed to the underlying popper instance.
-     * If no custom config is provided, a default config will be used. This default config
-     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow
-     * modifier so the correct arrow element can be injected for the arrow modifier.
-     *
-     * @example
-     * popperConfig={{
-     *     modifiers: [
-     *          {
-     *              name: 'offset',
-     *              options: {
-     *                  offset: [0, 5],
-     *              },
-     *          },
-     *          {
-     *              name: 'arrow',
-     *              options: {},
-     *          },
-     *      ],
-     *  }}
-     */
-    popperConfig?: PopperConfig;
     /**
      * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
      *
@@ -137,9 +116,6 @@ declare const OverlayTrigger: {
     TRIGGER_CLICK: "click";
     TRIGGER_HOVER: "hover";
     TRIGGER_FOCUS: "focus";
-    AUTO_START: "auto-start";
-    AUTO: "auto";
-    AUTO_END: "auto-end";
     TOP_START: "top-start";
     TOP: "top";
     TOP_END: "top-end";

package/components/overlay/OverlayTrigger.js

@@ -1,153 +1,91 @@
-import { jsxs as Z, Fragment as $ } from "react/jsx-runtime";
-import A, { useRef as ee, useCallback as c, useState as h, useEffect as te } from "react";
-import oe from "react-dom";
-import { usePopper as re } from "react-popper";
-import { PLACEMENT as o } from "../../values/Placement.js";
-import { TRIGGER as E } from "../../values/Trigger.js";
-import ne from "../../utils/mergeRefs.js";
-import { useClickOutsideWithRef as se } from "../../hooks/useClickOutside.js";
-import { useChainedTimeout as le } from "../../hooks/useTimeout.js";
-import { useUncontrolledProp as ae } from "../../hooks/useUncontrollable.js";
-const t = (v) => {
-  const {
-    show: H,
-    defaultShow: b = !1,
-    enablePortal: B = !0,
-    trigger: R = E.HOVER,
-    delay: r,
-    overlay: L,
-    placement: g = "top",
-    popperConfig: T,
-    onToggle: U = () => {
-    },
-    rootClose: C = !0,
-    children: p
-  } = v, [u, l] = ae(H, b, U), f = ee(""), m = le(), { onFocus: P, onBlur: S, onClick: y } = typeof p != "function" ? A.Children.only(p).props : {}, G = (e, n, F) => {
-    const [I] = n, D = I.currentTarget, w = I.relatedTarget;
-    (!w || w !== D) && !D.contains(w) && e(...n);
-  }, O = () => {
-    if (m.clear(), f.current = "show", r === 0 || typeof r != "number" && !r?.show) {
-      l(!0);
-      return;
-    }
-    m.set(
-      () => {
-        f.current === "show" && l(!0);
-      },
-      typeof r == "number" ? r : r?.show
-    );
-  }, a = () => {
-    if (m.clear(), f.current = "hide", typeof r == "number" || !r?.hide) {
-      l(!1);
-      return;
-    }
-    m.set(() => {
-      f.current === "hide" && l(!1);
-    }, r?.hide);
-  }, k = c(
-    (...e) => {
-      O(), P?.(...e);
-    },
-    [O, P]
-  ), V = c(
-    (...e) => {
-      a(), S?.(...e);
-    },
-    [a, S]
-  ), x = c(
-    (...e) => {
-      l(!u), y?.(...e);
-    },
-    [y, l, u]
-  ), K = c(
-    (...e) => {
-      G(O, e);
-    },
-    [O]
-  ), j = c(
-    (...e) => {
-      G(a, e);
-    },
-    [a]
-  ), [d, W] = h(null), [_, q] = h(null), [M, z] = h(null), [J, Q] = h(g), X = c(
-    (e) => {
-      const n = d?.contains(e.target), F = _?.contains(e.target);
-      u && C && !n && !F && a();
-    },
-    [d, _, C, a]
-  );
-  se(d, X);
-  const i = {
-    ref: ne([p.ref, W])
-  };
-  R === "click" ? i.onClick = x : R === "focus" ? (i.onFocus = k, i.onBlur = V) : R === "hover" && (i.onMouseOver = K, i.onMouseOut = j);
-  const Y = {
-    placement: g,
-    modifiers: [
-      {
-        name: "arrow",
-        options: {
-          element: M
-        }
-      },
-      {
-        name: "flip",
-        options: {
-          fallbackPlacements: ["right", "left", "top"]
-        }
-      }
-    ]
-  };
-  if (T) {
-    T.placement = g;
-    const e = [];
-    T.modifiers?.map((n) => n.name !== "arrow" ? e.push(n) : e.push({
-      ...n,
-      options: {
-        ...n.options,
-        element: M
-      }
-    })), T.modifiers = e;
-  }
-  const s = re(d, _, T || Y);
-  te(() => {
-    s.state && Q(s.state.placement);
-  }, [s.state?.placement]);
-  const N = A.cloneElement(L, {
-    ...s.attributes.popper,
-    ref: q,
-    placement: J,
-    style: { ...s.styles.popper },
-    arrowProps: {
-      ...s.attributes.arrow,
-      style: s.styles.arrow,
-      ref: z
-    }
-  });
-  return /* @__PURE__ */ Z($, { children: [
-    u && (B ? oe.createPortal(N, document.body) : N),
-    A.cloneElement(p, i)
-  ] });
+import { useChainedTimeout as e } from "../../hooks/useTimeout.js";
+import { useClickOutsideWithRef as t } from "../../hooks/useClickOutside.js";
+import n from "../../utils/mergeRefs.js";
+import { useAnchorName as r, usePopover as i } from "../../hooks/useAnchoredPopover.js";
+import { PLACEMENT as a } from "../../values/Placement.js";
+import { TRIGGER as o } from "../../values/Trigger.js";
+import s from "../../utils/getReactElementRef.js";
+import { useUncontrolledProp as c } from "../../hooks/useUncontrollable.js";
+import { useOverlayArrowPlacement as l } from "./useOverlayArrowPlacement.js";
+import u, { useCallback as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/overlay/OverlayTrigger.tsx
+var g = (a) => {
+	let { show: g, defaultShow: _ = !1, trigger: v = o.HOVER, delay: y, overlay: b, placement: x = "top", onToggle: S = () => {}, rootClose: C = !0, children: w } = a, [T, E] = c(g, _, S), D = f(""), O = e(), k = u.Children.only(w), A = b, { onFocus: j, onBlur: M, onClick: N } = k.props, P = (e, t, n) => {
+		let [r] = t, i = r.currentTarget, a = r.relatedTarget;
+		(!a || a !== i) && !i.contains(a) && e(...t);
+	}, F = () => {
+		if (O.clear(), D.current = "show", y === 0 || typeof y != "number" && !y?.show) {
+			E(!0);
+			return;
+		}
+		O.set(() => {
+			D.current === "show" && E(!0);
+		}, typeof y == "number" ? y : y?.show);
+	}, I = () => {
+		if (O.clear(), D.current = "hide", typeof y == "number" || !y?.hide) {
+			E(!1);
+			return;
+		}
+		O.set(() => {
+			D.current === "hide" && E(!1);
+		}, y?.hide);
+	}, L = d((e) => {
+		F(), j?.(e);
+	}, [F, j]), R = d((e) => {
+		I(), M?.(e);
+	}, [I, M]), z = d((e) => {
+		E(!T), N?.(e);
+	}, [
+		N,
+		E,
+		T
+	]), B = d((...e) => {
+		P(F, e, "fromElement");
+	}, [F]), V = d((...e) => {
+		P(I, e, "toElement");
+	}, [I]), [H, U] = p(null), [W, G] = p(null), K = r("overlay-trigger");
+	i(W, T);
+	let q = l({
+		placement: x,
+		show: T,
+		triggerElement: H,
+		overlayElement: W
+	});
+	t(H, d((e) => {
+		let t = H?.contains(e.target), n = W?.contains(e.target);
+		T && C && !t && !n && I();
+	}, [
+		H,
+		W,
+		C,
+		I
+	]), void 0, T && C);
+	let J = {
+		ref: n([s(k), U]),
+		style: {
+			...k.props.style || {},
+			anchorName: K
+		}
+	};
+	v === "click" ? J.onClick = z : v === "focus" ? (J.onFocus = L, J.onBlur = R) : v === "hover" && (J.onMouseOver = B, J.onMouseOut = V);
+	let Y = W?.classList.contains("tooltip"), X = u.cloneElement(A, {
+		ref: n([s(A), G]),
+		placement: x,
+		"data-overlay-trigger": "",
+		"data-overlay-placement": x,
+		"data-overlay-arrow-placement": q,
+		style: {
+			...A.props.style || {},
+			positionAnchor: K,
+			"--overlay-anchor-width": Y && H ? `${H.offsetWidth}px` : void 0,
+			"--overlay-anchor-height": Y && H ? `${H.offsetHeight}px` : void 0
+		}
+	});
+	return /* @__PURE__ */ h(m, { children: [u.cloneElement(k, J), T && X] });
 };
-t.TRIGGER_CLICK = E.CLICK;
-t.TRIGGER_HOVER = E.HOVER;
-t.TRIGGER_FOCUS = E.FOCUS;
-t.AUTO_START = o.AUTO_START;
-t.AUTO = o.AUTO;
-t.AUTO_END = o.AUTO_END;
-t.TOP_START = o.TOP_START;
-t.TOP = o.TOP;
-t.TOP_END = o.TOP_END;
-t.RIGHT_START = o.RIGHT_START;
-t.RIGHT = o.RIGHT;
-t.RIGHT_END = o.RIGHT_END;
-t.BOTTOM_START = o.BOTTOM_START;
-t.BOTTOM = o.BOTTOM;
-t.BOTTOM_END = o.BOTTOM_END;
-t.LEFT_START = o.LEFT_START;
-t.LEFT = o.LEFT;
-t.LEFT_END = o.LEFT_END;
-export {
-  t as default
-};
-//# sourceMappingURL=OverlayTrigger.js.map
+g.TRIGGER_CLICK = o.CLICK, g.TRIGGER_HOVER = o.HOVER, g.TRIGGER_FOCUS = o.FOCUS, g.TOP_START = a.TOP_START, g.TOP = a.TOP, g.TOP_END = a.TOP_END, g.RIGHT_START = a.RIGHT_START, g.RIGHT = a.RIGHT, g.RIGHT_END = a.RIGHT_END, g.BOTTOM_START = a.BOTTOM_START, g.BOTTOM = a.BOTTOM, g.BOTTOM_END = a.BOTTOM_END, g.LEFT_START = a.LEFT_START, g.LEFT = a.LEFT, g.LEFT_END = a.LEFT_END;
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=OverlayTrigger.js.map

package/components/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper, type Modifier } from 'react-popper';\nimport type { Options } from '@popperjs/core';\n\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\n\ntype PopperConfig = Partial<Options>;\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Defines the usage of React Portal.\n     *\n     * @default true\n     */\n    enablePortal?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * Possible values are:\n     *\n     * - `OverlayTrigger.TRIGGER_CLICK`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * possible values are:\n     *\n     * - `OverlayTrigger.AUTO_START`\n     * - `OverlayTrigger.AUTO`\n     * - `OverlayTrigger.AUTO_END`\n     * - `OverlayTrigger.TOP_START`\n     * - `OverlayTrigger.TOP`\n     * - `OverlayTrigger.TOP_END`\n     * - `OverlayTrigger.RIGHT_START`\n     * - `OverlayTrigger.RIGHT`\n     * - `OverlayTrigger.RIGHT_END`\n     * - `OverlayTrigger.BOTTOM_START`\n     * - `OverlayTrigger.BOTTOM`\n     * - `OverlayTrigger.BOTTOM_END`\n     * - `OverlayTrigger.LEFT_START`\n     * - `OverlayTrigger.LEFT`\n     * - `OverlayTrigger.LEFT_END`\n     * - `'auto-start'`\n     * - `'auto'`\n     * - `'auto-end'`\n     * - `'top-start'`\n     * - `'top'`\n     * - `'top-end'`\n     * - `'right-start'`\n     * - `'right'`\n     * - `'right-end'`\n     * - `'bottom-start'`\n     * - `'bottom'`\n     * - `'bottom-end'`\n     * - `'left-start'`\n     * - `'left'`\n     * - `'left-end'`\n     *\n     * @default 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     * If no custom config is provided, a default config will be used. This default config\n     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow\n     * modifier so the correct arrow element can be injected for the arrow modifier.\n     *\n     * @example\n     * popperConfig={{\n     *     modifiers: [\n     *          {\n     *              name: 'offset',\n     *              options: {\n     *                  offset: [0, 5],\n     *              },\n     *          },\n     *          {\n     *              name: 'arrow',\n     *              options: {},\n     *          },\n     *      ],\n     *  }}\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        enablePortal = true,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        popperConfig,\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const { onFocus, onBlur, onClick } =\n        typeof children !== 'function' ? React.Children.only(children as any).props : ({} as any);\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (...args: unknown[]) => {\n            handleShow();\n            onFocus?.(...args);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (...args: unknown[]) => {\n            handleHide();\n            onBlur?.(...args);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (...args: unknown[]) => {\n            setShow(!show);\n            onClick?.(...args);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const [arrowPlacement, setArrowPlacement] = useState(placement);\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = popperElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, popperElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside);\n\n    const triggerProps: TriggerProps = {\n        ref: mergeRefs([(children as any).ref, setTriggerNode]),\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const defaultPopperConfig = {\n        placement,\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'flip',\n                options: {\n                    fallbackPlacements: ['right', 'left', 'top'],\n                },\n            },\n        ],\n    };\n\n    if (popperConfig) {\n        popperConfig.placement = placement;\n\n        // if it has an arrow modifier, inject the arrow element\n        const updatedModifiers: Modifier<any, any>[] = [];\n        popperConfig.modifiers?.map((mod: Modifier<any, any>) => {\n            if (mod.name !== 'arrow') {\n                return updatedModifiers.push(mod);\n            }\n            return updatedModifiers.push({\n                ...mod,\n                options: {\n                    ...mod.options,\n                    element: arrowElement,\n                },\n            });\n        });\n\n        popperConfig.modifiers = updatedModifiers;\n    }\n\n    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);\n\n    // In case the overlay causes an overflow and the \"flip\" modifier\n    // changes the overlays placement, we nee to update the arrow placement as well\n    useEffect(() => {\n        if (popper.state) {\n            // Adjust arrow styles based on placement if necessary\n            setArrowPlacement(popper.state.placement);\n        }\n    }, [popper.state?.placement]);\n\n    const overlayElement = React.cloneElement(overlay, {\n        ...popper.attributes.popper,\n        ref: setPopperElement,\n        placement: arrowPlacement,\n        style: { ...popper.styles.popper },\n        arrowProps: {\n            ...popper.attributes.arrow,\n            style: popper.styles.arrow,\n            ref: setArrowElement,\n        },\n    });\n\n    return (\n        <>\n            {show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement)}\n            {React.cloneElement(children as any, triggerProps)}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.AUTO_START = PLACEMENT.AUTO_START;\nOverlayTrigger.AUTO = PLACEMENT.AUTO;\nOverlayTrigger.AUTO_END = PLACEMENT.AUTO_END;\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"names":["OverlayTrigger","props","propsShow","defaultShow","enablePortal","trigger","TRIGGER","delay","overlay","placement","popperConfig","onToggle","rootClose","children","show","setShow","useUncontrolledProp","hoverStateRef","useRef","timeout","useChainedTimeout","onFocus","onBlur","onClick","React","handleMouseOverOut","handler","args","_relatedNative","event","target","related","handleShow","handleHide","handleFocus","useCallback","handleBlur","handleClick","handleMouseOver","handleMouseOut","triggerNode","setTriggerNode","useState","popperElement","setPopperElement","arrowElement","setArrowElement","arrowPlacement","setArrowPlacement","handleClickOutside","isToggleTarget","isOverlayTarget","useClickOutsideWithRef","triggerProps","mergeRefs","defaultPopperConfig","updatedModifiers","mod","popper","usePopper","useEffect","overlayElement","jsxs","Fragment","ReactDOM","PLACEMENT"],"mappings":"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"}
+{"version":3,"file":"OverlayTrigger.js","names":[],"sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState, type CSSProperties, type PropsWithChildren } from 'react';\n\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport getReactElementRef from '../../utils/getReactElementRef';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\nimport { useOverlayArrowPlacement } from './useOverlayArrowPlacement';\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * Possible values are:\n     *\n     * - `OverlayTrigger.TRIGGER_CLICK`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * possible values are:\n     *\n     * - `OverlayTrigger.TOP_START`\n     * - `OverlayTrigger.TOP`\n     * - `OverlayTrigger.TOP_END`\n     * - `OverlayTrigger.RIGHT_START`\n     * - `OverlayTrigger.RIGHT`\n     * - `OverlayTrigger.RIGHT_END`\n     * - `OverlayTrigger.BOTTOM_START`\n     * - `OverlayTrigger.BOTTOM`\n     * - `OverlayTrigger.BOTTOM_END`\n     * - `OverlayTrigger.LEFT_START`\n     * - `OverlayTrigger.LEFT`\n     * - `OverlayTrigger.LEFT_END`\n     * - `'top-start'`\n     * - `'top'`\n     * - `'top-end'`\n     * - `'right-start'`\n     * - `'right'`\n     * - `'right-end'`\n     * - `'bottom-start'`\n     * - `'bottom'`\n     * - `'bottom-end'`\n     * - `'left-start'`\n     * - `'left'`\n     * - `'left-end'`\n     *\n     * The requested placement controls the CSS Anchor Positioning rules through `data-overlay-placement`.\n     * The side used for rendering the arrow is exposed through `data-overlay-arrow-placement` so Tooltip and Popover\n     * arrows can point towards the anchor after a CSS fallback side was selected.\n     *\n     * Overlay and arrow offsets can be adjusted with CSS custom properties on the overlay element\n     * (for example through the `style` or `className` of Tooltip or Popover):\n     *\n     * - `--anchor-offset-block` for the distance between the arrow tip and anchor on `top` and `bottom` placements\n     * - `--anchor-offset-inline` for the distance between the arrow tip and anchor on `left` and `right` placements\n     * - `--anchor-alignment-offset-inline` for shifting `*-start` and `*-end` aligned overlays\n     * - `--overlay-arrow-offset-inline` for `top` and `bottom` placements\n     * - `--overlay-arrow-offset-block` for `left` and `right` placements\n     *\n     * Positive inline values move the overlay or arrow to the right; positive block values move it down.\n     * Popover can also hide the arrow with `showArrow={false}` when an arrow does not fit the surrounding layout.\n     *\n     * @default 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\ntype TriggerElementProps = TriggerProps & {\n    style?: CSSProperties;\n};\n\ntype OverlayElementProps = {\n    ref?: React.Ref<HTMLDivElement>;\n    placement?: Placement;\n    style?: CSSProperties;\n    [key: string]: unknown;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const triggerElement = React.Children.only(children) as React.ReactElement<TriggerElementProps>;\n    const typedOverlay = overlay as React.ReactElement<OverlayElementProps>;\n    const { onFocus, onBlur, onClick } = triggerElement.props;\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (event: React.FocusEvent) => {\n            handleShow();\n            onFocus?.(event);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (event: React.FocusEvent) => {\n            handleHide();\n            onBlur?.(event);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent) => {\n            setShow(!show);\n            onClick?.(event);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n    const [overlayElement, setOverlayElement] = useState<HTMLDivElement | null>(null);\n\n    const anchorName = useAnchorName('overlay-trigger');\n    usePopover(overlayElement, show);\n    const arrowPlacement = useOverlayArrowPlacement({\n        placement,\n        show,\n        triggerElement: triggerNode,\n        overlayElement,\n    });\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = overlayElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, overlayElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside, undefined, show && rootClose);\n\n    const triggerProps: TriggerProps & { style?: CSSProperties } = {\n        ref: mergeRefs([getReactElementRef<HTMLElement>(triggerElement), setTriggerNode]),\n        style: {\n            ...(triggerElement.props.style || {}),\n            anchorName,\n        } as CSSProperties,\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const isTooltipOverlay = overlayElement?.classList.contains('tooltip');\n\n    const overlayNode = React.cloneElement(typedOverlay, {\n        ref: mergeRefs([getReactElementRef<HTMLDivElement>(typedOverlay), setOverlayElement]),\n        placement,\n        'data-overlay-trigger': '',\n        'data-overlay-placement': placement,\n        'data-overlay-arrow-placement': arrowPlacement,\n        style: {\n            ...(typedOverlay.props.style || {}),\n            positionAnchor: anchorName,\n            '--overlay-anchor-width': isTooltipOverlay && triggerNode ? `${triggerNode.offsetWidth}px` : undefined,\n            '--overlay-anchor-height': isTooltipOverlay && triggerNode ? `${triggerNode.offsetHeight}px` : undefined,\n        } as CSSProperties,\n    });\n\n    return (\n        <>\n            {React.cloneElement(triggerElement, triggerProps)}\n            {show && overlayNode}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"mappings":"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"}

package/components/overlay/useOverlayArrowPlacement.d.ts

@@ -0,0 +1,9 @@
+import { Placement } from '../../values/Placement';
+type UseOverlayArrowPlacementOptions = {
+    placement: Placement;
+    show: boolean;
+    triggerElement: HTMLElement | null;
+    overlayElement: HTMLElement | null;
+};
+export declare const useOverlayArrowPlacement: ({ placement, show, triggerElement, overlayElement, }: UseOverlayArrowPlacementOptions) => Placement;
+export {};

package/components/overlay/useOverlayArrowPlacement.js

@@ -0,0 +1,36 @@
+import { useLayoutEffect as e, useState as t } from "react";
+//#region src/components/overlay/useOverlayArrowPlacement.ts
+var n = ({ placement: n, show: i, triggerElement: a, overlayElement: o }) => {
+	let [s, c] = t(n);
+	return e(() => {
+		c(n);
+	}, [n, i]), e(() => {
+		if (!i || !a || !o) return;
+		let e = 0, t = 0, s = () => {
+			window.cancelAnimationFrame(e), window.cancelAnimationFrame(t);
+		}, l = () => {
+			let e = r(n, a.getBoundingClientRect(), o.getBoundingClientRect());
+			c((t) => t === e ? t : e);
+		}, u = () => {
+			s(), e = window.requestAnimationFrame(() => {
+				l(), t = window.requestAnimationFrame(l);
+			});
+		};
+		return u(), window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), () => {
+			s(), window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0);
+		};
+	}, [
+		i,
+		n,
+		a,
+		o
+	]), s;
+}, r = (e, t, n) => {
+	if (!i(t) || !i(n)) return e;
+	let r = t.left + t.width / 2, s = t.top + t.height / 2, c = n.left + n.width / 2, l = n.top + n.height / 2, u = o(e);
+	return `${u === "top" || u === "bottom" ? l < s ? "top" : "bottom" : c < r ? "left" : "right"}${a(e)}`;
+}, i = (e) => e.width > 0 || e.height > 0, a = (e) => e.endsWith("-start") ? "-start" : e.endsWith("-end") ? "-end" : "", o = (e) => e.split("-")[0];
+//#endregion
+export { n as useOverlayArrowPlacement };
+
+//# sourceMappingURL=useOverlayArrowPlacement.js.map

package/components/overlay/useOverlayArrowPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayArrowPlacement.js","names":[],"sources":["../../../src/components/overlay/useOverlayArrowPlacement.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport type { Placement } from '../../values/Placement';\n\ntype UseOverlayArrowPlacementOptions = {\n    placement: Placement;\n    show: boolean;\n    triggerElement: HTMLElement | null;\n    overlayElement: HTMLElement | null;\n};\n\nexport const useOverlayArrowPlacement = ({\n    placement,\n    show,\n    triggerElement,\n    overlayElement,\n}: UseOverlayArrowPlacementOptions) => {\n    const [arrowPlacement, setArrowPlacement] = useState<Placement>(placement);\n\n    useLayoutEffect(() => {\n        setArrowPlacement(placement);\n    }, [placement, show]);\n\n    useLayoutEffect(() => {\n        if (!show || !triggerElement || !overlayElement) {\n            return;\n        }\n\n        let animationFrame = 0;\n        let deferredAnimationFrame = 0;\n\n        const cancelScheduledUpdate = () => {\n            window.cancelAnimationFrame(animationFrame);\n            window.cancelAnimationFrame(deferredAnimationFrame);\n        };\n\n        const updateArrowPlacement = () => {\n            const nextPlacement = getArrowPlacement(\n                placement,\n                triggerElement.getBoundingClientRect(),\n                overlayElement.getBoundingClientRect()\n            );\n\n            setArrowPlacement(currentPlacement =>\n                currentPlacement === nextPlacement ? currentPlacement : nextPlacement\n            );\n        };\n\n        const scheduleArrowPlacementUpdate = () => {\n            cancelScheduledUpdate();\n            animationFrame = window.requestAnimationFrame(() => {\n                updateArrowPlacement();\n                deferredAnimationFrame = window.requestAnimationFrame(updateArrowPlacement);\n            });\n        };\n\n        scheduleArrowPlacementUpdate();\n        window.addEventListener('resize', scheduleArrowPlacementUpdate);\n        window.addEventListener('scroll', scheduleArrowPlacementUpdate, true);\n\n        return () => {\n            cancelScheduledUpdate();\n            window.removeEventListener('resize', scheduleArrowPlacementUpdate);\n            window.removeEventListener('scroll', scheduleArrowPlacementUpdate, true);\n        };\n    }, [show, placement, triggerElement, overlayElement]);\n\n    return arrowPlacement;\n};\n\nconst getArrowPlacement = (requestedPlacement: Placement, triggerRect: DOMRect, overlayRect: DOMRect): Placement => {\n    if (!hasUsableRect(triggerRect) || !hasUsableRect(overlayRect)) {\n        return requestedPlacement;\n    }\n\n    const triggerCenterX = triggerRect.left + triggerRect.width / 2;\n    const triggerCenterY = triggerRect.top + triggerRect.height / 2;\n    const overlayCenterX = overlayRect.left + overlayRect.width / 2;\n    const overlayCenterY = overlayRect.top + overlayRect.height / 2;\n    const requestedSide = getPlacementSide(requestedPlacement);\n    const arrowSide =\n        requestedSide === 'top' || requestedSide === 'bottom'\n            ? overlayCenterY < triggerCenterY\n                ? 'top'\n                : 'bottom'\n            : overlayCenterX < triggerCenterX\n              ? 'left'\n              : 'right';\n\n    return `${arrowSide}${getPlacementAlignment(requestedPlacement)}` as Placement;\n};\n\nconst hasUsableRect = (rect: DOMRect) => rect.width > 0 || rect.height > 0;\n\nconst getPlacementAlignment = (placement: Placement) => {\n    if (placement.endsWith('-start')) {\n        return '-start';\n    }\n\n    if (placement.endsWith('-end')) {\n        return '-end';\n    }\n\n    return '';\n};\n\nconst getPlacementSide = (placement: Placement) => placement.split('-')[0];\n"],"mappings":";;AAWA,IAAa,KAA4B,EACrC,cACA,SACA,mBACA,wBACmC;CACnC,IAAM,CAAC,GAAgB,KAAqB,EAAoB,CAAS;CAkDzE,OAhDA,QAAsB;EAClB,EAAkB,CAAS;CAC/B,GAAG,CAAC,GAAW,CAAI,CAAC,GAEpB,QAAsB;EAClB,IAAI,CAAC,KAAQ,CAAC,KAAkB,CAAC,GAC7B;EAGJ,IAAI,IAAiB,GACjB,IAAyB,GAEvB,UAA8B;GAEhC,AADA,OAAO,qBAAqB,CAAc,GAC1C,OAAO,qBAAqB,CAAsB;EACtD,GAEM,UAA6B;GAC/B,IAAM,IAAgB,EAClB,GACA,EAAe,sBAAsB,GACrC,EAAe,sBAAsB,CACzC;GAEA,GAAkB,MACd,MAAqB,IAAgB,IAAmB,CAC5D;EACJ,GAEM,UAAqC;GAEvC,AADA,EAAsB,GACtB,IAAiB,OAAO,4BAA4B;IAEhD,AADA,EAAqB,GACrB,IAAyB,OAAO,sBAAsB,CAAoB;GAC9E,CAAC;EACL;EAMA,OAJA,EAA6B,GAC7B,OAAO,iBAAiB,UAAU,CAA4B,GAC9D,OAAO,iBAAiB,UAAU,GAA8B,EAAI,SAEvD;GAGT,AAFA,EAAsB,GACtB,OAAO,oBAAoB,UAAU,CAA4B,GACjE,OAAO,oBAAoB,UAAU,GAA8B,EAAI;EAC3E;CACJ,GAAG;EAAC;EAAM;EAAW;EAAgB;CAAc,CAAC,GAE7C;AACX,GAEM,KAAqB,GAA+B,GAAsB,MAAoC;CAChH,IAAI,CAAC,EAAc,CAAW,KAAK,CAAC,EAAc,CAAW,GACzD,OAAO;CAGX,IAAM,IAAiB,EAAY,OAAO,EAAY,QAAQ,GACxD,IAAiB,EAAY,MAAM,EAAY,SAAS,GACxD,IAAiB,EAAY,OAAO,EAAY,QAAQ,GACxD,IAAiB,EAAY,MAAM,EAAY,SAAS,GACxD,IAAgB,EAAiB,CAAkB;CAUzD,OAAO,GARH,MAAkB,SAAS,MAAkB,WACvC,IAAiB,IACb,QACA,WACJ,IAAiB,IACf,SACA,UAEU,EAAsB,CAAkB;AAClE,GAEM,KAAiB,MAAkB,EAAK,QAAQ,KAAK,EAAK,SAAS,GAEnE,KAAyB,MACvB,EAAU,SAAS,QAAQ,IACpB,WAGP,EAAU,SAAS,MAAM,IAClB,SAGJ,IAGL,KAAoB,MAAyB,EAAU,MAAM,GAAG,CAAC,CAAC"}

package/components/page/Page.js

@@ -1,16 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
-import p from "../../utils/classNames.js";
-const f = (o) => {
-  const { className: e, width: r, orientation: s = "portrait", shadow: i = !0, border: d = !1, children: c } = o, h = p(
-    "Page",
-    s,
-    i && "shadow-hard",
-    d && "border border-width-2",
-    e
-  ), a = s === "portrait", t = {};
-  return r && a && (t.width = `${r}px`), r && !a && (t.height = `${r}px`), /* @__PURE__ */ n("div", { className: h, style: t, children: c });
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/page/Page.tsx
+var n = (n) => {
+	let { className: r, width: i, orientation: a = "portrait", shadow: o = !0, border: s = !1, children: c } = n, l = e("Page", a, o && "shadow-hard", s && "border border-width-2", r), u = a === "portrait", d = {};
+	return i && u && (d.width = `${i}px`), i && !u && (d.height = `${i}px`), /* @__PURE__ */ t("div", {
+		className: l,
+		style: d,
+		children: c
+	});
 };
-export {
-  f as default
-};
-//# sourceMappingURL=Page.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=Page.js.map

package/components/page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../src/components/page/Page.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type PageProps = {\n    /**\n     * Defines the width in pixel of the page. In landscape mode, the width is set as height.\n     * The component uses internally the aspect-ratio of a standard DIN A4 page.\n     * Use Page for UI that should visually resemble a real document sheet, such as an invoice,\n     * delivery note, shipping document, certificate or print preview.\n     * Please make sure the element does not get stretched when using flexbox.\n     */\n    width: number;\n\n    /**\n     * Defines the layout of the page\n     *\n     * @default 'portrait'\n     */\n    orientation?: 'portrait' | 'landscape';\n\n    /**\n     * Defines to use a pre-defined shadow style. May be disabled on white background.\n     *\n     * @default true\n     */\n    shadow?: boolean;\n\n    /**\n     * Defines to use a pre-defined border style. This may be used to render\n     * the page on a white background of as part of another element like a panel.\n     */\n    border?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element\n     */\n    className?: string;\n};\n\nconst Page = (props: PropsWithChildren<PageProps>) => {\n    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;\n\n    const wrapperClassNames = classNames(\n        'Page',\n        orientation,\n        shadow && 'shadow-hard',\n        border && 'border border-width-2',\n        className\n    );\n\n    const isPortrait = orientation === 'portrait';\n\n    const style: React.CSSProperties = {};\n\n    if (width && isPortrait) {\n        style.width = `${width}px`;\n    }\n\n    if (width && !isPortrait) {\n        style.height = `${width}px`;\n    }\n\n    return (\n        <div className={wrapperClassNames} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport default Page;\n"],"names":["Page","props","className","width","orientation","shadow","border","children","wrapperClassNames","classNames","isPortrait","style","jsx"],"mappings":";;AAyCA,MAAMA,IAAO,CAACC,MAAwC;AAClD,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,IAAc,YAAY,QAAAC,IAAS,IAAM,QAAAC,IAAS,IAAO,UAAAC,EAAA,IAAaN,GAE1FO,IAAoBC;AAAA,IACtB;AAAA,IACAL;AAAA,IACAC,KAAU;AAAA,IACVC,KAAU;AAAA,IACVJ;AAAA,EAAA,GAGEQ,IAAaN,MAAgB,YAE7BO,IAA6B,CAAA;AAEnC,SAAIR,KAASO,MACTC,EAAM,QAAQ,GAAGR,CAAK,OAGtBA,KAAS,CAACO,MACVC,EAAM,SAAS,GAAGR,CAAK,OAIvB,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAmB,OAAAG,GAC9B,UAAAJ,GACL;AAER;"}
+{"version":3,"file":"Page.js","names":[],"sources":["../../../src/components/page/Page.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type PageProps = {\n    /**\n     * Defines the width in pixel of the page. In landscape mode, the width is set as height.\n     * The component uses internally the aspect-ratio of a standard DIN A4 page.\n     * Use Page for UI that should visually resemble a real document sheet, such as an invoice,\n     * delivery note, shipping document, certificate or print preview.\n     * Please make sure the element does not get stretched when using flexbox.\n     */\n    width: number;\n\n    /**\n     * Defines the layout of the page\n     *\n     * @default 'portrait'\n     */\n    orientation?: 'portrait' | 'landscape';\n\n    /**\n     * Defines to use a pre-defined shadow style. May be disabled on white background.\n     *\n     * @default true\n     */\n    shadow?: boolean;\n\n    /**\n     * Defines to use a pre-defined border style. This may be used to render\n     * the page on a white background of as part of another element like a panel.\n     */\n    border?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element\n     */\n    className?: string;\n};\n\nconst Page = (props: PropsWithChildren<PageProps>) => {\n    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;\n\n    const wrapperClassNames = classNames(\n        'Page',\n        orientation,\n        shadow && 'shadow-hard',\n        border && 'border border-width-2',\n        className\n    );\n\n    const isPortrait = orientation === 'portrait';\n\n    const style: React.CSSProperties = {};\n\n    if (width && isPortrait) {\n        style.width = `${width}px`;\n    }\n\n    if (width && !isPortrait) {\n        style.height = `${width}px`;\n    }\n\n    return (\n        <div className={wrapperClassNames} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport default Page;\n"],"mappings":";;;AAyCA,IAAM,KAAQ,MAAwC;CAClD,IAAM,EAAE,cAAW,UAAO,iBAAc,YAAY,YAAS,IAAM,YAAS,IAAO,gBAAa,GAE1F,IAAoB,EACtB,QACA,GACA,KAAU,eACV,KAAU,yBACV,CACJ,GAEM,IAAa,MAAgB,YAE7B,IAA6B,CAAC;CAUpC,OARI,KAAS,MACT,EAAM,QAAQ,GAAG,EAAM,MAGvB,KAAS,CAAC,MACV,EAAM,SAAS,GAAG,EAAM,MAIxB,kBAAC,OAAD;EAAK,WAAW;EAA0B;EACrC;CACA,CAAA;AAEb"}