@cognite/aura 0.3.4 → 1.46104.0

package/dist/components/ui/core/accordion/accordion.js

@@ -1,80 +1,101 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { forwardRef as t } from "react";
-import { Accordion as n } from "@base-ui/react/accordion";
-import { IconChevronDown as r } from "@tabler/icons-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/accordion/accordion.tsx
-var o = t((e, t) => {
-	if (e.type === "multiple") {
-		let { type: r, value: a, defaultValue: o, onValueChange: s, ...c } = e;
-		return /* @__PURE__ */ i(n.Root, {
-			ref: t,
-			"data-slot": "accordion",
-			multiple: !0,
-			value: a,
-			defaultValue: o,
-			onValueChange: (e) => {
-				if (!s) return;
-				let t = e.filter((e) => e != null);
-				s(t);
-			},
-			...c
-		});
-	}
-	let { type: r, collapsible: a = !1, value: o, defaultValue: s, onValueChange: c, ...l } = e, u = o === void 0 ? void 0 : o === "" ? [] : [o], d = s === void 0 ? void 0 : s === "" ? [] : [s];
-	return /* @__PURE__ */ i(n.Root, {
-		ref: t,
-		"data-slot": "accordion",
-		multiple: !1,
-		value: u,
-		defaultValue: d,
-		onValueChange: (e, t) => {
-			if (c) {
-				if (!a && e.length === 0) {
-					t.cancel();
-					return;
-				}
-				c(e[0] ?? "");
-			}
-		},
-		...l
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { IconChevronDown } from "@tabler/icons-react";
+import { cn, focusRing } from "../../../../lib/utils.js";
+const Accordion = /*#__PURE__*/ forwardRef((props, ref)=>{
+    if (props.type === 'multiple') {
+        const { type: _type, value, defaultValue, onValueChange, ...rootProps } = props;
+        return /*#__PURE__*/ _jsx(AccordionPrimitive.Root, {
+            ref: ref,
+            "data-slot": "accordion",
+            multiple: true,
+            value: value,
+            defaultValue: defaultValue,
+            onValueChange: (nextValue)=>{
+                if (!onValueChange) return;
+                const filtered = nextValue.filter((next)=>next != null);
+                onValueChange(filtered);
+            },
+            ...rootProps
+        });
+    }
+    const { type: _type, collapsible = false, value, defaultValue, onValueChange, ...rootProps } = props;
+    const controlledValue = value === undefined ? undefined : value === '' ? [] : [
+        value
+    ];
+    const uncontrolledDefaultValue = defaultValue === undefined ? undefined : defaultValue === '' ? [] : [
+        defaultValue
+    ];
+    return /*#__PURE__*/ _jsx(AccordionPrimitive.Root, {
+        ref: ref,
+        "data-slot": "accordion",
+        multiple: false,
+        value: controlledValue,
+        defaultValue: uncontrolledDefaultValue,
+        onValueChange: (nextValue, details)=>{
+            if (!onValueChange) return;
+            if (!collapsible && nextValue.length === 0) {
+                details.cancel();
+                return;
+            }
+            onValueChange(nextValue[0] ?? '');
+        },
+        ...rootProps
+    });
 });
-o.displayName = "Accordion";
-var s = t(({ className: t, ...r }, a) => /* @__PURE__ */ i(n.Item, {
-	ref: a,
-	"data-slot": "accordion-item",
-	className: e("mt-2 first:mt-0 rounded-md", t),
-	...r
-}));
-s.displayName = "AccordionItem";
-var c = t(({ className: t, children: o, icon: s, ...c }, l) => {
-	let u = s;
-	return /* @__PURE__ */ i(n.Header, {
-		className: "flex",
-		children: /* @__PURE__ */ a(n.Trigger, {
-			ref: l,
-			"data-slot": "accordion-trigger",
-			className: e("focus-visible:border-ring focus-visible:ring-ring-muted group/accordion-trigger flex flex-1 items-center justify-between gap-4.5 rounded-lg px-3 py-2 text-left hover:bg-muted-background hover:text-foreground focus-visible:ring text-base font-normal tracking-tightest transition-all outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-foreground aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-disabled-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground", t),
-			...c,
-			children: [/* @__PURE__ */ a("div", {
-				className: "flex items-center gap-2",
-				children: [u && /* @__PURE__ */ i(u, { className: "pointer-events-none size-4 shrink-0 transition-transform duration-200" }), /* @__PURE__ */ i("span", { children: o })]
-			}), /* @__PURE__ */ i(r, { className: "pointer-events-none size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180" })]
-		})
-	});
+Accordion.displayName = 'Accordion';
+const AccordionItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(AccordionPrimitive.Item, {
+        ref: ref,
+        "data-slot": "accordion-item",
+        className: cn('mt-2 first:mt-0 rounded-md', className),
+        ...props
+    });
 });
-c.displayName = "AccordionTrigger";
-var l = t(({ className: t, children: r, ...a }, o) => /* @__PURE__ */ i(n.Panel, {
-	ref: o,
-	"data-slot": "accordion-content",
-	className: "h-(--accordion-panel-height) overflow-hidden text-sm font-normal tracking-tightest text-secondary-foreground transition-all duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0",
-	...a,
-	children: /* @__PURE__ */ i("div", {
-		className: e("px-3 pb-3 pt-2", t),
-		children: r
-	})
-}));
-l.displayName = "AccordionContent";
-//#endregion
-export { o as Accordion, l as AccordionContent, s as AccordionItem, c as AccordionTrigger };
+AccordionItem.displayName = 'AccordionItem';
+const AccordionTrigger = /*#__PURE__*/ forwardRef(({ className, children, icon, ...props }, ref)=>{
+    const Icon = icon;
+    return /*#__PURE__*/ _jsx(AccordionPrimitive.Header, {
+        className: "flex",
+        children: /*#__PURE__*/ _jsxs(AccordionPrimitive.Trigger, {
+            ref: ref,
+            "data-slot": "accordion-trigger",
+            className: cn('group/accordion-trigger flex flex-1 items-center justify-between gap-4.5 rounded-lg px-3 py-2 text-left text-base font-normal tracking-tightest text-base-foreground transition-all outline-none', 'hover:bg-base-background-hover hover:text-base-foreground', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-base-foreground-disabled', 'aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-base-foreground-disabled', 'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-base-foreground-disabled', focusRing, className),
+            ...props,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-2",
+                    children: [
+                        Icon && /*#__PURE__*/ _jsx(Icon, {
+                            className: "pointer-events-none size-4 shrink-0 transition-transform duration-200"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            children: children
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(IconChevronDown, {
+                    className: "pointer-events-none size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180"
+                })
+            ]
+        })
+    });
+});
+AccordionTrigger.displayName = 'AccordionTrigger';
+const AccordionContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(AccordionPrimitive.Panel, {
+        ref: ref,
+        "data-slot": "accordion-content",
+        className: "h-(--accordion-panel-height) overflow-hidden text-sm font-normal tracking-tightest text-muted-foreground transition-all duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0",
+        ...props,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn('px-3 pb-3 pt-2', className),
+            children: children
+        })
+    });
+});
+AccordionContent.displayName = 'AccordionContent';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+
+//# sourceMappingURL=accordion.js.map

package/dist/components/ui/core/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/accordion/accordion.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n} from 'react';\n\nimport type {\n  AccordionItemProps,\n  AccordionPanelProps,\n  AccordionTriggerProps,\n} from '@base-ui/react/accordion';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { type Icon, IconChevronDown } from '@tabler/icons-react';\n\nimport { cn, focusRing } from '../../../../lib/utils';\n\ntype AccordionCommonProps = Omit<\n  ComponentProps<typeof AccordionPrimitive.Root>,\n  'multiple' | 'value' | 'defaultValue' | 'onValueChange'\n>;\n\ntype AccordionSingleProps = {\n  type?: 'single';\n  collapsible?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\ntype AccordionMultipleProps = {\n  type: 'multiple';\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\n\ntype AccordionProps = AccordionCommonProps &\n  (AccordionSingleProps | AccordionMultipleProps);\n\nconst Accordion: ForwardRefExoticComponent<\n  Omit<AccordionCommonProps, 'ref'> &\n    (AccordionSingleProps | AccordionMultipleProps) &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<ComponentRef<typeof AccordionPrimitive.Root>, AccordionProps>(\n  (props, ref) => {\n    if (props.type === 'multiple') {\n      const {\n        type: _type,\n        value,\n        defaultValue,\n        onValueChange,\n        ...rootProps\n      } = props;\n\n      return (\n        <AccordionPrimitive.Root\n          ref={ref}\n          data-slot=\"accordion\"\n          multiple\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={(nextValue) => {\n            if (!onValueChange) return;\n            const filtered = nextValue.filter(\n              (next): next is string => next != null\n            );\n            onValueChange(filtered);\n          }}\n          {...rootProps}\n        />\n      );\n    }\n\n    const {\n      type: _type,\n      collapsible = false,\n      value,\n      defaultValue,\n      onValueChange,\n      ...rootProps\n    } = props;\n\n    const controlledValue =\n      value === undefined ? undefined : value === '' ? [] : [value];\n    const uncontrolledDefaultValue =\n      defaultValue === undefined\n        ? undefined\n        : defaultValue === ''\n          ? []\n          : [defaultValue];\n\n    return (\n      <AccordionPrimitive.Root\n        ref={ref}\n        data-slot=\"accordion\"\n        multiple={false}\n        value={controlledValue}\n        defaultValue={uncontrolledDefaultValue}\n        onValueChange={(nextValue, details) => {\n          if (!onValueChange) return;\n          if (!collapsible && nextValue.length === 0) {\n            details.cancel();\n            return;\n          }\n          onValueChange(nextValue[0] ?? '');\n        }}\n        {...rootProps}\n      />\n    );\n  }\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem: ForwardRefExoticComponent<\n  Omit<AccordionItemProps, 'ref'> & RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionPrimitive.Item.Props\n>(({ className, ...props }, ref) => {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      className={cn('mt-2 first:mt-0 rounded-md', className)}\n      {...props}\n    />\n  );\n});\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger: ForwardRefExoticComponent<\n  Omit<\n    AccordionTriggerProps & {\n      icon?: Icon;\n    },\n    'ref'\n  > &\n    RefAttributes<HTMLElement>\n> = forwardRef<\n  ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionPrimitive.Trigger.Props & {\n    icon?: Icon;\n  }\n>(({ className, children, icon, ...props }, ref) => {\n  const Icon = icon;\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'group/accordion-trigger flex flex-1 items-center justify-between gap-4.5 rounded-lg px-3 py-2 text-left text-base font-normal tracking-tightest text-base-foreground transition-all outline-none',\n          'hover:bg-base-background-hover hover:text-base-foreground',\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-base-foreground-disabled',\n          'aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-base-foreground-disabled',\n          'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-base-foreground-disabled',\n          focusRing,\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-2\">\n          {Icon && (\n            <Icon className=\"pointer-events-none size-4 shrink-0 transition-transform duration-200\" />\n          )}\n          <span>{children}</span>\n        </div>\n        <IconChevronDown className=\"pointer-events-none size-4 shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent: ForwardRefExoticComponent<\n  Omit<AccordionPanelProps, 'ref'> & RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof AccordionPrimitive.Panel>,\n  AccordionPrimitive.Panel.Props\n>(({ className, children, ...props }, ref) => {\n  return (\n    <AccordionPrimitive.Panel\n      ref={ref}\n      data-slot=\"accordion-content\"\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm font-normal tracking-tightest text-muted-foreground transition-all duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0\"\n      {...props}\n    >\n      <div className={cn('px-3 pb-3 pt-2', className)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n});\nAccordionContent.displayName = 'AccordionContent';\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"names":["forwardRef","Accordion","AccordionPrimitive","IconChevronDown","cn","focusRing","props","ref","type","_type","value","defaultValue","onValueChange","rootProps","Root","data-slot","multiple","nextValue","filtered","filter","next","collapsible","controlledValue","undefined","uncontrolledDefaultValue","details","length","cancel","displayName","AccordionItem","className","Item","AccordionTrigger","children","icon","Icon","Header","Trigger","div","span","AccordionContent","Panel"],"mappings":";AAAA,SAKEA,UAAU,QACL,QAAQ;AAOf,SAASC,aAAaC,kBAAkB,QAAQ,2BAA2B;AAC3E,SAAoBC,eAAe,QAAQ,sBAAsB;AAEjE,SAASC,EAAE,EAAEC,SAAS,QAAQ,2BAAwB;AAyBtD,MAAMJ,0BAIFD,WACF,CAACM,OAAOC;IACN,IAAID,MAAME,IAAI,KAAK,YAAY;QAC7B,MAAM,EACJA,MAAMC,KAAK,EACXC,KAAK,EACLC,YAAY,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGP;QAEJ,qBACE,KAACJ,mBAAmBY,IAAI;YACtBP,KAAKA;YACLQ,aAAU;YACVC,QAAQ;YACRN,OAAOA;YACPC,cAAcA;YACdC,eAAe,CAACK;gBACd,IAAI,CAACL,eAAe;gBACpB,MAAMM,WAAWD,UAAUE,MAAM,CAC/B,CAACC,OAAyBA,QAAQ;gBAEpCR,cAAcM;YAChB;YACC,GAAGL,SAAS;;IAGnB;IAEA,MAAM,EACJL,MAAMC,KAAK,EACXY,cAAc,KAAK,EACnBX,KAAK,EACLC,YAAY,EACZC,aAAa,EACb,GAAGC,WACJ,GAAGP;IAEJ,MAAMgB,kBACJZ,UAAUa,YAAYA,YAAYb,UAAU,KAAK,EAAE,GAAG;QAACA;KAAM;IAC/D,MAAMc,2BACJb,iBAAiBY,YACbA,YACAZ,iBAAiB,KACf,EAAE,GACF;QAACA;KAAa;IAEtB,qBACE,KAACT,mBAAmBY,IAAI;QACtBP,KAAKA;QACLQ,aAAU;QACVC,UAAU;QACVN,OAAOY;QACPX,cAAca;QACdZ,eAAe,CAACK,WAAWQ;YACzB,IAAI,CAACb,eAAe;YACpB,IAAI,CAACS,eAAeJ,UAAUS,MAAM,KAAK,GAAG;gBAC1CD,QAAQE,MAAM;gBACd;YACF;YACAf,cAAcK,SAAS,CAAC,EAAE,IAAI;QAChC;QACC,GAAGJ,SAAS;;AAGnB;AAEFZ,UAAU2B,WAAW,GAAG;AAExB,MAAMC,8BAEF7B,WAGF,CAAC,EAAE8B,SAAS,EAAE,GAAGxB,OAAO,EAAEC;IAC1B,qBACE,KAACL,mBAAmB6B,IAAI;QACtBxB,KAAKA;QACLQ,aAAU;QACVe,WAAW1B,GAAG,8BAA8B0B;QAC3C,GAAGxB,KAAK;;AAGf;AACAuB,cAAcD,WAAW,GAAG;AAE5B,MAAMI,iCAQFhC,WAKF,CAAC,EAAE8B,SAAS,EAAEG,QAAQ,EAAEC,IAAI,EAAE,GAAG5B,OAAO,EAAEC;IAC1C,MAAM4B,OAAOD;IAEb,qBACE,KAAChC,mBAAmBkC,MAAM;QAACN,WAAU;kBACnC,cAAA,MAAC5B,mBAAmBmC,OAAO;YACzB9B,KAAKA;YACLQ,aAAU;YACVe,WAAW1B,GACT,oMACA,6DACA,mGACA,kHACA,wHACAC,WACAyB;YAED,GAAGxB,KAAK;;8BAET,MAACgC;oBAAIR,WAAU;;wBACZK,sBACC,KAACA;4BAAKL,WAAU;;sCAElB,KAACS;sCAAMN;;;;8BAET,KAAC9B;oBAAgB2B,WAAU;;;;;AAInC;AACAE,iBAAiBJ,WAAW,GAAG;AAE/B,MAAMY,iCAEFxC,WAGF,CAAC,EAAE8B,SAAS,EAAEG,QAAQ,EAAE,GAAG3B,OAAO,EAAEC;IACpC,qBACE,KAACL,mBAAmBuC,KAAK;QACvBlC,KAAKA;QACLQ,aAAU;QACVe,WAAU;QACT,GAAGxB,KAAK;kBAET,cAAA,KAACgC;YAAIR,WAAW1B,GAAG,kBAAkB0B;sBAAaG;;;AAGxD;AACAO,iBAAiBZ,WAAW,GAAG;AAE/B,SAAS3B,SAAS,EAAE4B,aAAa,EAAEG,gBAAgB,EAAEQ,gBAAgB,GAAG"}

package/dist/components/ui/core/action-toolbar/action-toolbar-motion.d.ts

@@ -0,0 +1,8 @@
+declare const TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS = 640;
+type ActionToolbarPresence = {
+	mounted: boolean;
+	selectedCount: number | undefined;
+	bindMotion: (node: HTMLDivElement | null) => void;
+};
+declare function useActionToolbarPresence(selectedCount: number | undefined): ActionToolbarPresence;
+export { TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS, useActionToolbarPresence };

package/dist/components/ui/core/action-toolbar/action-toolbar-motion.js

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const TOOLBAR_ENTER_MS = 420;
+const TOOLBAR_EXIT_MS = 560;
+const TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS = 640;
+const TOOLBAR_DRIFT_OFFSET = '0.75rem';
+const TOOLBAR_TRAVEL_OFFSET = '3.5rem';
+const TOOLBAR_EXIT_FADE_START = 0.4;
+const TOOLBAR_ENTER_SETTLE_START = 0.6;
+const TOOLBAR_ENTER_KEYFRAMES = [
+    {
+        transform: `translateY(${TOOLBAR_TRAVEL_OFFSET})`,
+        opacity: 0
+    },
+    {
+        transform: `translateY(${TOOLBAR_DRIFT_OFFSET})`,
+        opacity: 1,
+        offset: TOOLBAR_ENTER_SETTLE_START
+    },
+    {
+        transform: 'translateY(0)',
+        opacity: 1
+    }
+];
+const TOOLBAR_EXIT_KEYFRAMES = [
+    {
+        transform: 'translateY(0)',
+        opacity: 1
+    },
+    // Drift down while the toolbar is still fully visible.
+    // Fade only after that, while the rest of the travel finishes.
+    {
+        transform: `translateY(${TOOLBAR_DRIFT_OFFSET})`,
+        opacity: 1,
+        offset: TOOLBAR_EXIT_FADE_START
+    },
+    {
+        transform: `translateY(${TOOLBAR_TRAVEL_OFFSET})`,
+        opacity: 0
+    }
+];
+function prefersReducedMotion() {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function isSelectionHidden(selectedCount) {
+    return typeof selectedCount === 'number' && selectedCount === 0;
+}
+function playToolbarMotion(node, keyframes, duration) {
+    if (typeof node.animate !== 'function') return null;
+    return node.animate(keyframes, {
+        duration,
+        easing: 'linear',
+        fill: 'forwards'
+    });
+}
+function startToolbarMotion(node, hidden, motionRef, exitTimerRef, onExit) {
+    motionRef.current?.cancel();
+    if (!hidden) {
+        motionRef.current = playToolbarMotion(node, TOOLBAR_ENTER_KEYFRAMES, TOOLBAR_ENTER_MS);
+        return ()=>{
+            motionRef.current?.cancel();
+        };
+    }
+    const animation = playToolbarMotion(node, TOOLBAR_EXIT_KEYFRAMES, TOOLBAR_EXIT_MS);
+    motionRef.current = animation;
+    let finished = false;
+    const finishExit = ()=>{
+        if (finished) return;
+        finished = true;
+        window.clearTimeout(exitTimerRef.current);
+        onExit();
+    };
+    // element.animate() reports completion through onfinish.
+    // It does not dispatch animationend.
+    if (animation) animation.onfinish = finishExit;
+    exitTimerRef.current = window.setTimeout(finishExit, TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS);
+    return ()=>{
+        window.clearTimeout(exitTimerRef.current);
+        motionRef.current?.cancel();
+    };
+}
+function useActionToolbarPresence(selectedCount) {
+    const hidden = isSelectionHidden(selectedCount);
+    const reducedMotion = prefersReducedMotion();
+    const [trackedHidden, setTrackedHidden] = useState(hidden);
+    const [mounted, setMounted] = useState(!hidden);
+    const [displayedCount, setDisplayedCount] = useState(selectedCount);
+    const nodeRef = useRef(null);
+    const motionRef = useRef(null);
+    const exitTimerRef = useRef(0);
+    if (hidden !== trackedHidden) {
+        setTrackedHidden(hidden);
+        if (!hidden) {
+            setMounted(true);
+            if (typeof selectedCount === 'number') setDisplayedCount(selectedCount);
+        } else if (!mounted || reducedMotion) {
+            setMounted(false);
+        }
+    } else if (!hidden && typeof selectedCount === 'number' && selectedCount !== displayedCount) {
+        setDisplayedCount(selectedCount);
+    }
+    const bindMotion = useCallback((node)=>{
+        nodeRef.current = node;
+    }, []);
+    useEffect(()=>{
+        if (reducedMotion || !mounted) return undefined;
+        const node = nodeRef.current;
+        if (!node) return undefined;
+        return startToolbarMotion(node, hidden, motionRef, exitTimerRef, ()=>{
+            setMounted(false);
+        });
+    }, [
+        hidden,
+        mounted,
+        reducedMotion
+    ]);
+    return {
+        mounted,
+        selectedCount: hidden ? displayedCount : selectedCount,
+        bindMotion
+    };
+}
+export { TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS, useActionToolbarPresence };
+
+//# sourceMappingURL=action-toolbar-motion.js.map

package/dist/components/ui/core/action-toolbar/action-toolbar-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/action-toolbar/action-toolbar-motion.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nconst TOOLBAR_ENTER_MS = 420;\nconst TOOLBAR_EXIT_MS = 560;\nconst TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS = 640;\nconst TOOLBAR_DRIFT_OFFSET = '0.75rem';\nconst TOOLBAR_TRAVEL_OFFSET = '3.5rem';\nconst TOOLBAR_EXIT_FADE_START = 0.4;\nconst TOOLBAR_ENTER_SETTLE_START = 0.6;\n\nconst TOOLBAR_ENTER_KEYFRAMES: Keyframe[] = [\n  { transform: `translateY(${TOOLBAR_TRAVEL_OFFSET})`, opacity: 0 },\n  {\n    transform: `translateY(${TOOLBAR_DRIFT_OFFSET})`,\n    opacity: 1,\n    offset: TOOLBAR_ENTER_SETTLE_START,\n  },\n  { transform: 'translateY(0)', opacity: 1 },\n];\n\nconst TOOLBAR_EXIT_KEYFRAMES: Keyframe[] = [\n  { transform: 'translateY(0)', opacity: 1 },\n  // Drift down while the toolbar is still fully visible.\n  // Fade only after that, while the rest of the travel finishes.\n  {\n    transform: `translateY(${TOOLBAR_DRIFT_OFFSET})`,\n    opacity: 1,\n    offset: TOOLBAR_EXIT_FADE_START,\n  },\n  { transform: `translateY(${TOOLBAR_TRAVEL_OFFSET})`, opacity: 0 },\n];\n\ntype ActionToolbarPresence = {\n  mounted: boolean;\n  selectedCount: number | undefined;\n  bindMotion: (node: HTMLDivElement | null) => void;\n};\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nfunction isSelectionHidden(selectedCount: number | undefined): boolean {\n  return typeof selectedCount === 'number' && selectedCount === 0;\n}\n\nfunction playToolbarMotion(\n  node: HTMLDivElement,\n  keyframes: Keyframe[],\n  duration: number\n): Animation | null {\n  if (typeof node.animate !== 'function') return null;\n  return node.animate(keyframes, {\n    duration,\n    easing: 'linear',\n    fill: 'forwards',\n  });\n}\n\nfunction startToolbarMotion(\n  node: HTMLDivElement,\n  hidden: boolean,\n  motionRef: { current: Animation | null },\n  exitTimerRef: { current: number },\n  onExit: () => void\n): () => void {\n  motionRef.current?.cancel();\n\n  if (!hidden) {\n    motionRef.current = playToolbarMotion(\n      node,\n      TOOLBAR_ENTER_KEYFRAMES,\n      TOOLBAR_ENTER_MS\n    );\n    return () => {\n      motionRef.current?.cancel();\n    };\n  }\n\n  const animation = playToolbarMotion(\n    node,\n    TOOLBAR_EXIT_KEYFRAMES,\n    TOOLBAR_EXIT_MS\n  );\n  motionRef.current = animation;\n  let finished = false;\n  const finishExit = () => {\n    if (finished) return;\n    finished = true;\n    window.clearTimeout(exitTimerRef.current);\n    onExit();\n  };\n  // element.animate() reports completion through onfinish.\n  // It does not dispatch animationend.\n  if (animation) animation.onfinish = finishExit;\n  exitTimerRef.current = window.setTimeout(\n    finishExit,\n    TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS\n  );\n\n  return () => {\n    window.clearTimeout(exitTimerRef.current);\n    motionRef.current?.cancel();\n  };\n}\n\nfunction useActionToolbarPresence(\n  selectedCount: number | undefined\n): ActionToolbarPresence {\n  const hidden = isSelectionHidden(selectedCount);\n  const reducedMotion = prefersReducedMotion();\n  const [trackedHidden, setTrackedHidden] = useState(hidden);\n  const [mounted, setMounted] = useState(!hidden);\n  const [displayedCount, setDisplayedCount] = useState(selectedCount);\n  const nodeRef = useRef<HTMLDivElement | null>(null);\n  const motionRef = useRef<Animation | null>(null);\n  const exitTimerRef = useRef(0);\n\n  if (hidden !== trackedHidden) {\n    setTrackedHidden(hidden);\n    if (!hidden) {\n      setMounted(true);\n      if (typeof selectedCount === 'number') setDisplayedCount(selectedCount);\n    } else if (!mounted || reducedMotion) {\n      setMounted(false);\n    }\n  } else if (\n    !hidden &&\n    typeof selectedCount === 'number' &&\n    selectedCount !== displayedCount\n  ) {\n    setDisplayedCount(selectedCount);\n  }\n\n  const bindMotion = useCallback((node: HTMLDivElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  useEffect(() => {\n    if (reducedMotion || !mounted) return undefined;\n    const node = nodeRef.current;\n    if (!node) return undefined;\n\n    return startToolbarMotion(node, hidden, motionRef, exitTimerRef, () => {\n      setMounted(false);\n    });\n  }, [hidden, mounted, reducedMotion]);\n\n  return {\n    mounted,\n    selectedCount: hidden ? displayedCount : selectedCount,\n    bindMotion,\n  };\n}\n\nexport { TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS, useActionToolbarPresence };\n"],"names":["useCallback","useEffect","useRef","useState","TOOLBAR_ENTER_MS","TOOLBAR_EXIT_MS","TOOLBAR_EXIT_UNMOUNT_FALLBACK_MS","TOOLBAR_DRIFT_OFFSET","TOOLBAR_TRAVEL_OFFSET","TOOLBAR_EXIT_FADE_START","TOOLBAR_ENTER_SETTLE_START","TOOLBAR_ENTER_KEYFRAMES","transform","opacity","offset","TOOLBAR_EXIT_KEYFRAMES","prefersReducedMotion","window","matchMedia","matches","isSelectionHidden","selectedCount","playToolbarMotion","node","keyframes","duration","animate","easing","fill","startToolbarMotion","hidden","motionRef","exitTimerRef","onExit","current","cancel","animation","finished","finishExit","clearTimeout","onfinish","setTimeout","useActionToolbarPresence","reducedMotion","trackedHidden","setTrackedHidden","mounted","setMounted","displayedCount","setDisplayedCount","nodeRef","bindMotion","undefined"],"mappings":"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"}

package/dist/components/ui/core/action-toolbar/action-toolbar.d.ts

@@ -1,41 +1,41 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
-import { VariantProps } from 'class-variance-authority';
-import { ClassProp } from 'class-variance-authority/types';
-import { Button } from '../button/button';
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+import { Button } from "../button/button";
 interface ActionToolbarVariantProps {
-    width?: 'full' | 'fit' | null;
+	width?: "full" | "fit" | null;
 }
 declare const actionToolbarVariants: (props?: (ActionToolbarVariantProps & ClassProp) | undefined) => string;
-type ActionToolbarProps = ComponentProps<'div'> & VariantProps<typeof actionToolbarVariants> & {
-    selectedCount?: number;
+type ActionToolbarProps = ComponentProps<"div"> & VariantProps<typeof actionToolbarVariants> & {
+	selectedCount?: number;
 };
-declare const ActionToolbar: ForwardRefExoticComponent<Omit<ActionToolbarProps, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const ActionToolbarSelection: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-type ActionToolbarSelectionSummaryProps = ComponentProps<'div'> & {
-    count?: ReactNode;
-    label?: ReactNode;
+declare const ActionToolbar: ForwardRefExoticComponent<Omit<ActionToolbarProps, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const ActionToolbarSelection: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+type ActionToolbarSelectionSummaryProps = ComponentProps<"div"> & {
+	count?: ReactNode;
+	label?: ReactNode;
 };
-declare const ActionToolbarSelectionSummary: ForwardRefExoticComponent<Omit<ActionToolbarSelectionSummaryProps, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const ActionToolbarActions: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-type ActionToolbarActionProps = Omit<ComponentProps<typeof Button>, 'size'> & ({
-    iconOnly: true;
-    'aria-label': string;
+declare const ActionToolbarSelectionSummary: ForwardRefExoticComponent<Omit<ActionToolbarSelectionSummaryProps, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const ActionToolbarActions: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+type ActionToolbarActionProps = Omit<ComponentProps<typeof Button>, "size"> & ({
+	iconOnly: true;
+	"aria-label": string;
 } | {
-    iconOnly?: false;
-    'aria-label'?: string;
+	iconOnly?: false;
+	"aria-label"?: string;
 });
-declare const ActionToolbarAction: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, 'size' | 'ref'> & ({
-    iconOnly: true;
-    'aria-label': string;
+declare const ActionToolbarAction: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, "size" | "ref"> & ({
+	iconOnly: true;
+	"aria-label": string;
 } | {
-    iconOnly?: false;
-    'aria-label'?: string;
+	iconOnly?: false;
+	"aria-label"?: string;
 }) & RefAttributes<HTMLElement>>;
-type ActionToolbarActionClearProps = Omit<ActionToolbarActionProps, 'variant' | 'iconOnly' | 'children'> & {
-    icon?: ReactNode;
-    label?: ReactNode;
+type ActionToolbarActionClearProps = Omit<ActionToolbarActionProps, "variant" | "iconOnly" | "children"> & {
+	icon?: ReactNode;
+	label?: ReactNode;
 };
-declare const ActionToolbarActionClear: ForwardRefExoticComponent<Omit<ActionToolbarActionClearProps, 'ref'> & RefAttributes<HTMLElement>>;
-type ActionToolbarPrimaryActionProps = Omit<ActionToolbarActionProps, 'variant' | 'iconOnly'>;
-declare const ActionToolbarPrimaryAction: ForwardRefExoticComponent<Omit<ActionToolbarPrimaryActionProps, 'ref'> & RefAttributes<HTMLElement>>;
-export { ActionToolbar, ActionToolbarAction, ActionToolbarActionClear, ActionToolbarActions, ActionToolbarPrimaryAction, ActionToolbarSelection, ActionToolbarSelectionSummary, };
+declare const ActionToolbarActionClear: ForwardRefExoticComponent<Omit<ActionToolbarActionClearProps, "ref"> & RefAttributes<HTMLElement>>;
+type ActionToolbarPrimaryActionProps = Omit<ActionToolbarActionProps, "variant" | "iconOnly">;
+declare const ActionToolbarPrimaryAction: ForwardRefExoticComponent<Omit<ActionToolbarPrimaryActionProps, "ref"> & RefAttributes<HTMLElement>>;
+export { ActionToolbar, ActionToolbarAction, ActionToolbarActionClear, ActionToolbarActions, ActionToolbarPrimaryAction, ActionToolbarSelection, ActionToolbarSelectionSummary };