@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/dist/componentsV2/overlays/PopoverV2/PopoverV2.d.ts

@@ -0,0 +1,46 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type AriaRole, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type OverlayTrigger } from '../layer';
+import type { OverlayAlign, OverlayPlacement } from '../position';
+export type PopoverV2Width = 'compact' | 'regular';
+export type PopoverV2Placement = OverlayPlacement;
+export type PopoverV2Align = OverlayAlign;
+type PopoverV2Base = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'role' | 'popover' | 'aria-label' | 'aria-labelledby'> & {
+    description?: ReactNode;
+    children?: ReactNode;
+    width?: PopoverV2Width;
+    placement?: PopoverV2Placement;
+    align?: PopoverV2Align;
+    role?: AriaRole;
+    initialFocus?: 'content' | 'none';
+};
+type PopoverV2Name = {
+    title: ReactNode;
+    'aria-label'?: undefined;
+    'aria-labelledby'?: undefined;
+} | {
+    title?: undefined;
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    title?: undefined;
+    'aria-label'?: undefined;
+    'aria-labelledby': string;
+};
+type PopoverV2Anchor = {
+    trigger: OverlayTrigger;
+    anchorRef?: undefined;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} | {
+    trigger?: undefined;
+    anchorRef: RefObject<HTMLElement | null>;
+    open: boolean;
+    defaultOpen?: undefined;
+    onOpenChange: (open: boolean) => void;
+};
+export type PopoverV2Props = PopoverV2Base & PopoverV2Name & PopoverV2Anchor;
+export declare const PopoverV2: import("react").ForwardRefExoticComponent<PopoverV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=PopoverV2.d.ts.map

package/dist/componentsV2/overlays/PopoverV2/PopoverV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/PopoverV2/PopoverV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC;AAE1C,KAAK,aAAa,GAAG,IAAI,CACvB,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,iBAAiB,CAChE,GAAG;IACF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACnC,CAAC;AAEF,KAAK,aAAa,GACd;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GAC7E;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GAC1E;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,KAAK,eAAe,GAChB;IACE,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,CAAC;AAE7E,eAAO,MAAM,SAAS,2GAuFpB,CAAC"}

package/dist/componentsV2/overlays/PopoverV2/PopoverV2.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { cloneElement, forwardRef, useId, useImperativeHandle, useRef, } from 'react';
+import { chain, focusableIn, useAnchoredPanel, useDismiss, useEscapeLayer, useOpenState, useTriggerRef, } from '../layer';
+import styles from './PopoverV2.module.css';
+export const PopoverV2 = forwardRef(function PopoverV2({ trigger, anchorRef: externalAnchor, open: openProp, defaultOpen, onOpenChange, title, description, children, width = 'compact', placement = 'bottom', align = 'start', role = 'dialog', initialFocus = 'content', id, className, 'aria-label': label, 'aria-labelledby': labelledBy, ...props }, ref) {
+    const generated = useId();
+    const panelId = id ?? generated;
+    const [open, setOpen] = useOpenState(openProp, defaultOpen, onOpenChange);
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    const anchorRef = externalAnchor ?? triggerRef;
+    const attachTrigger = useTriggerRef(triggerRef, trigger?.props.ref);
+    useImperativeHandle(ref, () => panelRef.current);
+    const close = () => setOpen(false);
+    useEscapeLayer(open, panelRef, close);
+    useDismiss(open, panelRef, anchorRef, close);
+    useAnchoredPanel({
+        open,
+        anchorRef,
+        panelRef,
+        placement,
+        align,
+        restoreFocus: true,
+        onShown: () => {
+            const panel = panelRef.current;
+            if (initialFocus === 'none' || !panel)
+                return;
+            (focusableIn(panel)[0] ?? panel).focus({ preventScroll: true });
+        },
+    });
+    const titleId = `${panelId}-title`;
+    return (_jsxs(_Fragment, { children: [trigger &&
+                cloneElement(trigger, {
+                    ref: attachTrigger,
+                    'aria-haspopup': role === 'dialog' ? 'dialog' : undefined,
+                    'aria-expanded': open,
+                    'aria-controls': role === 'dialog' ? undefined : panelId,
+                    onClick: chain(trigger.props.onClick, (_event) => setOpen(!open)),
+                }), _jsxs("div", { ...props, ref: panelRef, id: panelId, role: role, popover: "manual", tabIndex: -1, "aria-label": label, "aria-labelledby": labelledBy ?? (title != null ? titleId : undefined), "data-state": open ? 'open' : 'closed', "data-width": width, className: [styles.popover, styles[width], className].filter(Boolean).join(' '), children: [title != null && (_jsxs(_Fragment, { children: [_jsx("div", { id: titleId, className: styles.title, children: title }), _jsx("div", { className: styles.separator, "aria-hidden": "true" })] })), description != null && _jsx("div", { className: styles.description, children: description }), children] })] }));
+});

package/dist/componentsV2/overlays/PopoverV2/PopoverV2.module.css

@@ -0,0 +1,63 @@
+.popover {
+  --overlay-offset: var(--cf-v2-popover-offset);
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  max-width: calc(100vw - 2 * var(--cf-v2-overlay-viewport-margin));
+  max-height: calc(100dvh - 2 * var(--cf-v2-overlay-viewport-margin));
+  margin: 0;
+  padding: var(--cf-v2-popover-padding-block) var(--cf-v2-popover-padding-inline);
+  overflow: auto;
+  border: var(--cf-v2-popover-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-popover-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-size: var(--cf-v2-popover-body-font-size);
+  line-height: normal;
+}
+
+.popover[data-state='open'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-popover-gap);
+}
+
+.popover[data-state='closed'] {
+  display: none;
+}
+
+.popover:focus {
+  outline: none;
+}
+
+.popover:focus-visible {
+  outline: var(--cf-v2-popover-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-popover-focus-width));
+}
+
+.compact {
+  width: var(--cf-v2-popover-width-compact);
+}
+
+.regular {
+  width: var(--cf-v2-popover-width-regular);
+}
+
+.title {
+  font-size: var(--cf-v2-popover-title-font-size);
+  font-weight: var(--cf-v2-popover-title-font-weight);
+  overflow-wrap: anywhere;
+}
+
+.separator {
+  flex: none;
+  height: var(--cf-v2-popover-border-width);
+  background: var(--cf-v2-outline);
+  opacity: var(--cf-v2-popover-separator-opacity);
+}
+
+.description {
+  color: color-mix(in srgb, var(--cf-v2-on-surface) calc(var(--cf-v2-popover-description-opacity) * 100%), transparent);
+  overflow-wrap: anywhere;
+}

package/dist/componentsV2/overlays/PopoverV2/index.d.ts

@@ -0,0 +1,3 @@
+export { PopoverV2 } from './PopoverV2';
+export type { PopoverV2Align, PopoverV2Placement, PopoverV2Props, PopoverV2Width } from './PopoverV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/overlays/PopoverV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/PopoverV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/componentsV2/overlays/PopoverV2/index.js

@@ -0,0 +1 @@
+export { PopoverV2 } from './PopoverV2';

package/dist/componentsV2/overlays/TooltipV2/TooltipV2.d.ts

@@ -0,0 +1,18 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes } from 'react';
+import { type OverlayTrigger } from '../layer';
+import type { OverlayPlacement } from '../position';
+export type TooltipV2Placement = OverlayPlacement;
+export type TooltipV2Props = Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'children' | 'role' | 'popover'> & {
+    content: string;
+    children: OverlayTrigger;
+    placement?: TooltipV2Placement;
+    delay?: number;
+};
+export declare const TooltipV2: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "role" | "content" | "popover" | "children"> & {
+    content: string;
+    children: OverlayTrigger;
+    placement?: TooltipV2Placement;
+    delay?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TooltipV2.d.ts.map

package/dist/componentsV2/overlays/TooltipV2/TooltipV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/TooltipV2/TooltipV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAqE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAClH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC/G,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC;IACzB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAKF,eAAO,MAAM,SAAS;aATX,MAAM;cACL,cAAc;gBACZ,kBAAkB;YACtB,MAAM;kDA+Fd,CAAC"}

package/dist/componentsV2/overlays/TooltipV2/TooltipV2.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { cloneElement, forwardRef, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { chain, useAnchoredPanel, useEscapeLayer, useLatest, useTriggerRef } from '../layer';
+import styles from './TooltipV2.module.css';
+const hoverGrace = 120;
+let visible = null;
+export const TooltipV2 = forwardRef(function TooltipV2({ content, children, placement = 'top', delay = 300, id, className, onPointerEnter, onPointerLeave, ...props }, ref) {
+    const generated = useId();
+    const tooltipId = id ?? generated;
+    const [open, setOpen] = useState(false);
+    const panelRef = useRef(null);
+    const anchorRef = useRef(null);
+    const sources = useRef({ hover: false, focus: false });
+    const timer = useRef(undefined);
+    useImperativeHandle(ref, () => panelRef.current);
+    const dismiss = () => {
+        sources.current = { hover: false, focus: false };
+        clearTimeout(timer.current);
+        if (visible === self)
+            visible = null;
+        setOpen(false);
+    };
+    const self = useLatest(dismiss);
+    useEffect(() => () => {
+        clearTimeout(timer.current);
+        if (visible === self)
+            visible = null;
+    }, [self]);
+    const track = (source, active) => {
+        sources.current[source] = active;
+        const wanted = sources.current.hover || sources.current.focus;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            if (wanted && visible !== self) {
+                visible?.current();
+                visible = self;
+            }
+            else if (!wanted && visible === self) {
+                visible = null;
+            }
+            setOpen(wanted);
+        }, wanted ? delay : hoverGrace);
+    };
+    const enter = (event) => {
+        if (event.pointerType !== 'touch')
+            track('hover', true);
+    };
+    const leave = () => track('hover', false);
+    useEscapeLayer(open, panelRef, dismiss);
+    useAnchoredPanel({ open, anchorRef, panelRef, placement, align: 'center' });
+    const trigger = children.props;
+    const attachTrigger = useTriggerRef(anchorRef, trigger.ref);
+    return (_jsxs(_Fragment, { children: [cloneElement(children, {
+                ref: attachTrigger,
+                'aria-describedby': [trigger['aria-describedby'], tooltipId].filter(Boolean).join(' '),
+                onPointerEnter: chain(trigger.onPointerEnter, enter),
+                onPointerLeave: chain(trigger.onPointerLeave, leave),
+                onPointerDown: chain(trigger.onPointerDown, dismiss),
+                onFocus: chain(trigger.onFocus, (event) => {
+                    if (event.currentTarget.matches(':focus-visible'))
+                        track('focus', true);
+                }),
+                onBlur: chain(trigger.onBlur, () => track('focus', false)),
+            }), _jsxs("div", { ...props, ref: panelRef, id: tooltipId, role: "tooltip", popover: "manual", "data-state": open ? 'open' : 'closed', onPointerEnter: chain(onPointerEnter, enter), onPointerLeave: chain(onPointerLeave, leave), className: [styles.tooltip, className].filter(Boolean).join(' '), children: [content, _jsx("svg", { className: styles.arrow, viewBox: "0 0 12 9", "aria-hidden": "true", children: _jsx("path", { d: "M0 9 6 0l6 9" }) })] })] }));
+});

package/dist/componentsV2/overlays/TooltipV2/TooltipV2.module.css

@@ -0,0 +1,69 @@
+.tooltip {
+  --overlay-offset: var(--cf-v2-tooltip-offset);
+  --tooltip-arrow-shift: calc(
+    (var(--cf-v2-tooltip-arrow-height) - var(--cf-v2-tooltip-arrow-width)) / 2 - var(--cf-v2-tooltip-border-width)
+  );
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(var(--cf-v2-tooltip-max-width), calc(100vw - 2 * var(--cf-v2-overlay-viewport-margin)));
+  margin: 0;
+  padding: var(--cf-v2-tooltip-padding-block) var(--cf-v2-tooltip-padding-inline);
+  overflow: visible;
+  border: var(--cf-v2-tooltip-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-tooltip-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-size: var(--cf-v2-tooltip-font-size);
+  font-weight: var(--cf-v2-tooltip-font-weight);
+  line-height: normal;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.tooltip[data-state='closed'] {
+  display: none;
+}
+
+.arrow {
+  position: absolute;
+  width: var(--cf-v2-tooltip-arrow-width);
+  height: var(--cf-v2-tooltip-arrow-height);
+  overflow: visible;
+  fill: var(--cf-v2-surface-container);
+  stroke: var(--cf-v2-outline);
+  stroke-width: var(--cf-v2-tooltip-border-width);
+  pointer-events: none;
+}
+
+.tooltip[data-placement='bottom'] .arrow,
+.tooltip[data-placement='top'] .arrow {
+  left: calc(var(--overlay-arrow) - var(--cf-v2-tooltip-border-width));
+}
+
+.tooltip[data-placement='left'] .arrow,
+.tooltip[data-placement='right'] .arrow {
+  top: calc(var(--overlay-arrow) - var(--cf-v2-tooltip-border-width));
+}
+
+.tooltip[data-placement='bottom'] .arrow {
+  bottom: calc(100% - var(--cf-v2-tooltip-border-width));
+  transform: translateX(-50%);
+}
+
+.tooltip[data-placement='top'] .arrow {
+  top: calc(100% - var(--cf-v2-tooltip-border-width));
+  transform: translateX(-50%) rotate(180deg);
+}
+
+.tooltip[data-placement='left'] .arrow {
+  left: calc(100% + var(--tooltip-arrow-shift));
+  transform: translateY(-50%) rotate(90deg);
+}
+
+.tooltip[data-placement='right'] .arrow {
+  right: calc(100% + var(--tooltip-arrow-shift));
+  transform: translateY(-50%) rotate(-90deg);
+}

package/dist/componentsV2/overlays/TooltipV2/index.d.ts

@@ -0,0 +1,3 @@
+export { TooltipV2 } from './TooltipV2';
+export type { TooltipV2Placement, TooltipV2Props } from './TooltipV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/overlays/TooltipV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/TooltipV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/componentsV2/overlays/TooltipV2/index.js

@@ -0,0 +1 @@
+export { TooltipV2 } from './TooltipV2';

package/dist/componentsV2/overlays/layer.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactElement, type Ref, type RefObject } from 'react';
+import { type OverlayAlign, type OverlayPlacement } from './position';
+export type OverlayTriggerProps = HTMLAttributes<HTMLElement> & {
+    ref?: Ref<HTMLElement>;
+};
+export type OverlayTrigger = ReactElement<OverlayTriggerProps>;
+type NodeRef = RefObject<HTMLElement | null>;
+export declare function focusableIn(root: HTMLElement): HTMLElement[];
+export declare function useTriggerRef(target: RefObject<HTMLElement | null>, external: Ref<HTMLElement> | undefined): (node: HTMLElement | null) => () => void;
+export declare function chain<E>(...handlers: (((event: E) => void) | undefined)[]): (event: E) => void;
+export declare function useLatest<T>(value: T): RefObject<T>;
+export declare function useOpenLifecycle(open: boolean, onOpen: () => () => void): void;
+export declare function returnFocus(element: Element | null): void;
+export declare function useEscapeLayer(active: boolean, nodeRef: NodeRef, onEscape: () => void): void;
+export declare function useDismiss(active: boolean, panelRef: NodeRef, anchorRef: NodeRef, onDismiss: () => void): void;
+export declare function useOpenState(open: boolean | undefined, defaultOpen: boolean | undefined, onOpenChange: ((open: boolean) => void) | undefined): readonly [boolean, (next: boolean) => void];
+type AnchoredPanel = {
+    open: boolean;
+    anchorRef: NodeRef;
+    panelRef: NodeRef;
+    placement: OverlayPlacement;
+    align: OverlayAlign;
+    restoreFocus?: boolean;
+    onShown?: () => void;
+};
+export declare function useAnchoredPanel({ open, anchorRef, panelRef, placement, align, restoreFocus, onShown, }: AnchoredPanel): void;
+export declare function lockScroll(): () => void;
+export {};
+//# sourceMappingURL=layer.d.ts.map

package/dist/componentsV2/overlays/layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/overlays/layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,GAAG,EACR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAmB,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAC3F,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;AAE/D,KAAK,OAAO,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAe7C,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,iBAI5C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,UAEhG,WAAW,GAAG,IAAI,gBAa5B;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,EAAE,IAChE,OAAO,CAAC,UAGjB;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,gBAMpC;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,IAAI,QAcvE;AAID,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,QAQlD;AAkBD,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,QAWrF;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,QAiBvG;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,OAAO,GAAG,SAAS,EACzB,WAAW,EAAE,OAAO,GAAG,SAAS,EAChC,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,6BAO1C,OAAO,WAOjB;AAED,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,OAAO,GACR,EAAE,aAAa,QA6Df;AAKD,wBAAgB,UAAU,eAoBzB"}

package/dist/componentsV2/overlays/layer.js

@@ -0,0 +1,224 @@
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { computePosition } from './position';
+const focusableSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'summary',
+    'iframe',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+export function focusableIn(root) {
+    return [...root.querySelectorAll(focusableSelector)].filter((element) => element.tabIndex >= 0 && element.checkVisibility?.() !== false);
+}
+export function useTriggerRef(target, external) {
+    return useCallback((node) => {
+        target.current = node;
+        const cleanup = typeof external === 'function' ? external(node) : undefined;
+        if (external && typeof external !== 'function')
+            external.current = node;
+        return () => {
+            target.current = null;
+            if (typeof cleanup === 'function')
+                cleanup();
+            else if (typeof external === 'function')
+                external(null);
+            else if (external)
+                external.current = null;
+        };
+    }, [target, external]);
+}
+export function chain(...handlers) {
+    return (event) => {
+        for (const handler of handlers)
+            handler?.(event);
+    };
+}
+export function useLatest(value) {
+    const latest = useRef(value);
+    useLayoutEffect(() => {
+        latest.current = value;
+    });
+    return latest;
+}
+export function useOpenLifecycle(open, onOpen) {
+    const opener = useLatest(onOpen);
+    const teardown = useRef(null);
+    const finish = useCallback(() => {
+        teardown.current?.();
+        teardown.current = null;
+    }, []);
+    useLayoutEffect(() => {
+        if (open)
+            teardown.current = opener.current();
+        else
+            finish();
+    }, [open, opener, finish]);
+    useLayoutEffect(() => finish, [finish]);
+}
+const anchors = new WeakMap();
+export function returnFocus(element) {
+    let target = element;
+    while (target instanceof HTMLElement) {
+        target.focus({ preventScroll: true });
+        if (document.activeElement === target)
+            return;
+        const panel = target.closest('[popover]');
+        target = panel ? (anchors.get(panel)?.() ?? null) : null;
+    }
+}
+const layers = [];
+function topLayer() {
+    return [...layers]
+        .reverse()
+        .find((layer) => !layers.some((other) => other !== layer && layer.node()?.contains(other.node())));
+}
+function onDocumentKeyDown(event) {
+    if (event.key !== 'Escape' || event.defaultPrevented)
+        return;
+    const layer = topLayer();
+    if (!layer)
+        return;
+    event.preventDefault();
+    layer.escape();
+}
+export function useEscapeLayer(active, nodeRef, onEscape) {
+    const latest = useLatest(onEscape);
+    useLayoutEffect(() => {
+        if (!active)
+            return;
+        const layer = { node: () => nodeRef.current, escape: () => latest.current() };
+        if (layers.push(layer) === 1)
+            document.addEventListener('keydown', onDocumentKeyDown);
+        return () => {
+            layers.splice(layers.indexOf(layer), 1);
+            if (layers.length === 0)
+                document.removeEventListener('keydown', onDocumentKeyDown);
+        };
+    }, [active, nodeRef, latest]);
+}
+export function useDismiss(active, panelRef, anchorRef, onDismiss) {
+    const latest = useLatest(onDismiss);
+    useLayoutEffect(() => {
+        if (!active)
+            return;
+        const dismiss = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (panelRef.current?.contains(target) || anchorRef.current?.contains(target))
+                return;
+            latest.current();
+        };
+        document.addEventListener('pointerdown', dismiss, true);
+        document.addEventListener('focusin', dismiss);
+        return () => {
+            document.removeEventListener('pointerdown', dismiss, true);
+            document.removeEventListener('focusin', dismiss);
+        };
+    }, [active, panelRef, anchorRef, latest]);
+}
+export function useOpenState(open, defaultOpen, onOpenChange) {
+    const [internal, setInternal] = useState(defaultOpen ?? false);
+    const latest = useLatest(onOpenChange);
+    const controlled = open !== undefined;
+    const current = controlled ? open : internal;
+    const change = useCallback((next) => {
+        if (!controlled)
+            setInternal(next);
+        latest.current?.(next);
+    }, [controlled, latest]);
+    return [current, change];
+}
+export function useAnchoredPanel({ open, anchorRef, panelRef, placement, align, restoreFocus = false, onShown, }) {
+    const shown = useLatest(onShown);
+    const [attempt, retry] = useState(0);
+    useOpenLifecycle(open, () => {
+        const panel = panelRef.current;
+        const previous = document.activeElement;
+        if (panel)
+            anchors.set(panel, () => anchorRef.current);
+        panel?.showPopover?.();
+        return () => {
+            const active = document.activeElement;
+            const lost = !active || active === document.body || panel?.contains(active);
+            panel?.hidePopover?.();
+            if (!restoreFocus || !lost)
+                return;
+            const target = previous instanceof HTMLElement && previous !== document.body ? previous : anchorRef.current;
+            returnFocus(target);
+        };
+    });
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        const anchor = anchorRef.current;
+        if (!open || !panel)
+            return;
+        if (!anchor) {
+            if (attempt === 0)
+                retry(1);
+            return;
+        }
+        const update = () => {
+            const styles = getComputedStyle(panel);
+            const { width, height } = panel.getBoundingClientRect();
+            const { left, top, placement: side, arrow } = computePosition({
+                anchor: anchor.getBoundingClientRect(),
+                panel: { width, height },
+                viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
+                placement,
+                align,
+                offset: parseFloat(styles.getPropertyValue('--overlay-offset')) || 0,
+                margin: parseFloat(styles.getPropertyValue('--cf-v2-overlay-viewport-margin')) || 0,
+                rtl: styles.direction === 'rtl',
+            });
+            panel.style.left = `${left}px`;
+            panel.style.top = `${top}px`;
+            panel.style.setProperty('--overlay-arrow', `${arrow}px`);
+            panel.dataset.placement = side;
+        };
+        update();
+        window.addEventListener('resize', update);
+        window.addEventListener('scroll', update, true);
+        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+        observer?.observe(panel);
+        observer?.observe(anchor);
+        return () => {
+            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
+            observer?.disconnect();
+        };
+    }, [open, panelRef, anchorRef, placement, align, attempt]);
+    useLayoutEffect(() => {
+        if (open)
+            shown.current?.();
+    }, [open, shown]);
+}
+let locks = 0;
+let unlock = () => { };
+export function lockScroll() {
+    if (locks === 0) {
+        const root = document.documentElement;
+        const { body } = document;
+        const gutter = window.innerWidth - root.clientWidth;
+        const overflow = root.style.overflow;
+        const padding = body.style.paddingInlineEnd;
+        const current = parseFloat(getComputedStyle(body).paddingInlineEnd) || 0;
+        root.style.overflow = 'hidden';
+        if (gutter > 0)
+            body.style.paddingInlineEnd = `${current + gutter}px`;
+        unlock = () => {
+            root.style.overflow = overflow;
+            body.style.paddingInlineEnd = padding;
+        };
+    }
+    locks += 1;
+    return () => {
+        locks -= 1;
+        if (locks === 0)
+            unlock();
+    };
+}

package/dist/componentsV2/overlays/position.d.ts

@@ -0,0 +1,32 @@
+export type OverlayPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type OverlayAlign = 'start' | 'center' | 'end';
+type Box = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type PositionInput = {
+    anchor: Box;
+    panel: {
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    placement: OverlayPlacement;
+    align: OverlayAlign;
+    offset: number;
+    margin: number;
+    rtl?: boolean;
+};
+export declare function computePosition({ anchor, panel, viewport, placement, align, offset, margin, rtl }: PositionInput): {
+    left: number;
+    top: number;
+    placement: OverlayPlacement;
+    arrow: number;
+};
+export {};
+//# sourceMappingURL=position.d.ts.map

package/dist/componentsV2/overlays/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/overlays/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,KAAK,GAAG,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAgBF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAW,EAAE,EAAE,aAAa;;;;;EAgCxH"}