@acronis-platform/ui-react 0.62.0 → 1.0.0

package/dist/components/ui/filter-search/filter-search.js

@@ -1,165 +1,211 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import * as a from "react";
-import { ChevronDownIcon as A } from "@acronis-platform/icons-react/stroke-mono";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import * as i from "react";
+import { ChevronDownIcon as M } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as u } from "../../../lib/utils.js";
-import { deepEqual as P } from "../../../lib/deep-equal.js";
-import { Chip as $ } from "../chip/chip.js";
-import { Button as p } from "../button/button.js";
-import { Popover as E, PopoverTrigger as q, PopoverContent as z } from "../popover/popover.js";
-const B = a.forwardRef(
-  ({ className: t, ...e }, r) => /* @__PURE__ */ n(
+import { deepEqual as T } from "../../../lib/deep-equal.js";
+import { FilterChips as G, FilterChipsList as H, FilterChipsReset as K } from "../filter-chips/filter-chips.js";
+import { Chip as Q } from "../chip/chip.js";
+import { Popover as U, PopoverTrigger as W, PopoverContent as X } from "../popover/popover.js";
+import { Button as h } from "../button/button.js";
+const Y = i.forwardRef(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: n,
       className: u("flex items-center gap-4", t),
       ...e
     }
   )
 );
-B.displayName = "FilterSearch";
-const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ n(
+Y.displayName = "FilterSearch";
+const Z = i.forwardRef(({ className: t, ...e }, n) => /* @__PURE__ */ r(
   "div",
   {
-    ref: r,
-    className: u("flex h-8 min-w-px flex-1 items-center justify-end gap-4", t),
+    ref: n,
+    className: u(
+      "flex h-8 min-w-px flex-1 items-center justify-end gap-4",
+      t
+    ),
     ...e
   }
 ));
-I.displayName = "FilterSearchActions";
-const C = a.createContext(null);
-function X() {
-  const t = a.useContext(C);
+Z.displayName = "FilterSearchActions";
+const R = i.createContext(null);
+function le() {
+  const t = i.useContext(R);
   if (t === null)
     throw new Error(
       "useFilterSearchFilters must be used within a <FilterSearchFilters> popover."
     );
   return t;
 }
-const J = a.forwardRef(({ value: t, onValueChange: e, onApply: r, label: s = "Filters", children: b, className: x, ...m }, v) => {
-  const [o, l] = a.useState(!1), [c, f] = a.useState(t), N = (i) => {
-    f(t), l(i);
-  }, F = a.useCallback((i, g) => {
-    f((h) => {
-      if (g === void 0) {
-        if (!(i in h)) return h;
-        const S = { ...h };
-        return delete S[i], S;
-      }
-      return { ...h, [i]: g };
-    });
-  }, []), y = a.useMemo(
-    () => ({ filters: c, setFilter: F }),
-    [c, F]
-  ), w = () => f({}), R = () => {
-    f(t), l(!1);
-  }, j = () => {
-    e(c), r == null || r(c), l(!1);
-  }, O = Object.keys(c).length === 0, D = P(c, t);
-  return /* @__PURE__ */ d(E, { open: o, onOpenChange: N, children: [
-    /* @__PURE__ */ d(
-      q,
-      {
-        ref: v,
-        render: /* @__PURE__ */ n(
-          p,
-          {
-            variant: "secondary",
-            className: u(
-              "group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]",
-              x
-            ),
-            ...m
-          }
-        ),
-        children: [
-          s,
-          /* @__PURE__ */ n(
-            A,
+const _ = i.forwardRef(
+  ({
+    value: t,
+    onValueChange: e,
+    onApply: n,
+    label: s = "Filters",
+    resetFiltersLabel: b = "Reset filters",
+    cancelLabel: F = "Cancel",
+    applyLabel: x = "Apply",
+    children: v,
+    className: l,
+    contentClassName: S,
+    side: o,
+    align: p = "start",
+    sideOffset: w,
+    portalContainer: j,
+    collisionBoundary: O,
+    positionMethod: D,
+    ...A
+  }, P) => {
+    const [$, C] = i.useState(!1), [c, m] = i.useState(t), E = (a) => {
+      m(t), C(a);
+    }, g = i.useCallback((a, N) => {
+      m((f) => {
+        if (N === void 0) {
+          if (!(a in f)) return f;
+          const y = { ...f };
+          return delete y[a], y;
+        }
+        return { ...f, [a]: N };
+      });
+    }, []), L = i.useMemo(
+      () => ({ filters: c, setFilter: g }),
+      [c, g]
+    ), q = () => m({}), z = () => {
+      m(t), C(!1);
+    }, B = () => {
+      e(c), n == null || n(c), C(!1);
+    }, I = Object.keys(c).length === 0, J = T(c, t);
+    return /* @__PURE__ */ d(U, { open: $, onOpenChange: E, children: [
+      /* @__PURE__ */ d(
+        W,
+        {
+          ref: P,
+          render: /* @__PURE__ */ r(
+            h,
             {
-              size: 16,
-              className: "transition-transform group-data-[popup-open]:rotate-180"
+              variant: "secondary",
+              className: u(
+                "group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]",
+                l
+              ),
+              ...A
             }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ n(z, { align: "start", className: "w-96 p-0", children: /* @__PURE__ */ d(
-      "form",
-      {
-        onSubmit: (i) => {
-          i.preventDefault(), j();
-        },
-        children: [
-          /* @__PURE__ */ n("div", { className: "flex max-h-80 flex-col gap-4 overflow-y-auto p-4", children: /* @__PURE__ */ n(C.Provider, { value: y, children: b }) }),
-          /* @__PURE__ */ d("div", { className: "flex items-center gap-2 border-t border-border p-4", children: [
-            /* @__PURE__ */ n(
-              p,
+          ),
+          children: [
+            s,
+            /* @__PURE__ */ r(
+              M,
               {
-                type: "button",
-                variant: "ghost",
-                disabled: O,
-                onClick: w,
-                children: "Reset filters"
+                size: 16,
+                className: "transition-transform group-data-[popup-open]:rotate-180"
               }
-            ),
-            /* @__PURE__ */ d("div", { className: "ms-auto flex items-center gap-2", children: [
-              /* @__PURE__ */ n(p, { type: "button", variant: "secondary", onClick: R, children: "Cancel" }),
-              /* @__PURE__ */ n(p, { type: "submit", variant: "default", disabled: D, children: "Apply" })
-            ] })
-          ] })
-        ]
-      }
-    ) })
-  ] });
-});
-J.displayName = "FilterSearchFilters";
-function L(t, e) {
-  const r = Array.isArray(e) ? e.map((s) => String(s)).join(", ") : typeof e == "object" && e !== null ? JSON.stringify(e) : String(e);
-  return `${t}: ${r}`;
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        X,
+        {
+          side: o,
+          align: p,
+          sideOffset: w,
+          portalContainer: j,
+          collisionBoundary: O,
+          positionMethod: D,
+          className: u("w-96 p-0", S),
+          children: /* @__PURE__ */ d(
+            "form",
+            {
+              onSubmit: (a) => {
+                a.preventDefault(), B();
+              },
+              children: [
+                /* @__PURE__ */ r("div", { className: "flex max-h-80 flex-col gap-4 overflow-y-auto p-4", children: /* @__PURE__ */ r(R.Provider, { value: L, children: v }) }),
+                /* @__PURE__ */ d("div", { className: "flex items-center gap-2 border-t border-border p-4", children: [
+                  /* @__PURE__ */ r(
+                    h,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      disabled: I,
+                      onClick: q,
+                      children: b
+                    }
+                  ),
+                  /* @__PURE__ */ d("div", { className: "ms-auto flex items-center gap-2", children: [
+                    /* @__PURE__ */ r(
+                      h,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: z,
+                        children: F
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      h,
+                      {
+                        type: "submit",
+                        variant: "default",
+                        disabled: J,
+                        children: x
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+_.displayName = "FilterSearchFilters";
+function k(t, e) {
+  const n = Array.isArray(e) ? e.map((s) => String(s)).join(", ") : typeof e == "object" && e !== null ? JSON.stringify(e) : String(e);
+  return `${t}: ${n}`;
 }
-const M = a.forwardRef(({ className: t, filters: e, onValueChange: r, getFilterChipLabel: s, ...b }, x) => {
-  const m = Object.keys(e);
-  if (m.length === 0) return null;
-  const v = (o) => {
-    const l = { ...e };
-    delete l[o], r(l);
-  };
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      ref: x,
-      className: u("flex flex-wrap items-center gap-3", t),
-      ...b,
-      children: [
-        m.map((o) => /* @__PURE__ */ n(
-          $,
-          {
-            variant: "removable",
-            onRemove: () => v(o),
-            removeLabel: `Remove ${o} filter`,
-            children: s ? s(o, e[o]) : L(o, e[o])
-          },
-          o
-        )),
-        /* @__PURE__ */ n(
-          p,
-          {
-            type: "button",
-            variant: "ghost",
-            onClick: () => r({}),
-            children: "Reset filters"
-          }
-        )
-      ]
-    }
-  );
-});
-M.displayName = "FilterSearchAppliedFilters";
+const V = i.forwardRef(
+  ({
+    className: t,
+    filters: e,
+    onValueChange: n,
+    getFilterChipLabel: s,
+    getRemoveFilterLabel: b = (l) => `Remove ${l} filter`,
+    resetFiltersLabel: F = "Reset filters",
+    ...x
+  }, v) => {
+    const l = Object.keys(e);
+    if (l.length === 0) return null;
+    const S = (o) => {
+      const p = { ...e };
+      delete p[o], n(p);
+    };
+    return /* @__PURE__ */ r(G, { ref: v, className: t, ...x, children: /* @__PURE__ */ d(H, { children: [
+      l.map((o) => /* @__PURE__ */ r(
+        Q,
+        {
+          variant: "removable",
+          onRemove: () => S(o),
+          removeLabel: b(o),
+          children: s ? s(o, e[o]) : k(o, e[o])
+        },
+        o
+      )),
+      /* @__PURE__ */ r(K, { onClick: () => n({}), children: F })
+    ] }) });
+  }
+);
+V.displayName = "FilterSearchAppliedFilters";
 export {
-  B as FilterSearch,
-  I as FilterSearchActions,
-  M as FilterSearchAppliedFilters,
-  J as FilterSearchFilters,
-  X as useFilterSearchFilters
+  Y as FilterSearch,
+  Z as FilterSearchActions,
+  V as FilterSearchAppliedFilters,
+  _ as FilterSearchFilters,
+  le as useFilterSearchFilters
 };
 //# sourceMappingURL=filter-search.js.map

package/dist/components/ui/filter-search/filter-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-search.js","sources":["../../../../src/components/ui/filter-search/filter-search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { deepEqual } from '@/lib/deep-equal';\nimport { Button } from '../button';\nimport { Chip } from '../chip';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\n\n// A composable toolbar for data tables: arranges a search field, optional\n// filters button, optional tenant/scope switcher, and trailing action buttons\n// in a single horizontal row. Maps to the Figma \"FilterSearch\" component. The\n// root container uses 16px inter-item gap (Figma `gap/gap-16`) and centers\n// children vertically. `FilterSearchActions` is a right-aligned flex area that\n// pushes its content to the trailing edge.\n//\n// No dedicated token tier — spacing is the Figma `gap/gap-16` semantic token\n// (16px), and each child (Search, ButtonMenu, Select) brings its own\n// `--ui-*` tier.\n//\n// `FilterSearchFilters` and `FilterSearchAppliedFilters` are design-pending\n// additions (no Figma node yet, unlike the FilterSearch node itself): the\n// filter popover (trigger + form + Reset/Cancel/Apply) and the applied-filter\n// chip row + top-level \"Reset filters\" affordance. Compose `FilterSearchFilters`\n// as a child of `<FilterSearch>` in place of a plain filter trigger, and render\n// `<FilterSearchAppliedFilters>` as a sibling row below it. Reconcile against\n// the real design with `/figma-component FilterSearchFilters <url> --update`\n// once a mockup lands.\n\nexport type FilterSearchProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearch = React.forwardRef<HTMLDivElement, FilterSearchProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-4', className)}\n      {...props}\n    />\n  )\n);\nFilterSearch.displayName = 'FilterSearch';\n\nexport type FilterSearchActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearchActions = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchActionsProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex h-8 min-w-px flex-1 items-center justify-end gap-4', className)}\n    {...props}\n  />\n));\nFilterSearchActions.displayName = 'FilterSearchActions';\n\ninterface FilterSearchFiltersContextValue {\n  /** The current draft filters being edited inside the popover. */\n  filters: Record<string, unknown>;\n  /** Set a single draft filter value by key. */\n  setFilter: (key: string, value: unknown) => void;\n}\n\nconst FilterSearchFiltersContext =\n  React.createContext<FilterSearchFiltersContextValue | null>(null);\n\n/**\n * Bind a filter field child (rendered inside `FilterSearchFilters`'s popover) to\n * the component's draft filters. Returns the current draft map and a per-key\n * setter. Field children are plain JSX (no render prop) and wire their own\n * `onChange` to `setFilter`; Apply commits the draft, Cancel/dismiss reverts it.\n */\nexport function useFilterSearchFilters(): FilterSearchFiltersContextValue {\n  const context = React.useContext(FilterSearchFiltersContext);\n  if (context === null) {\n    throw new Error(\n      'useFilterSearchFilters must be used within a <FilterSearchFilters> popover.'\n    );\n  }\n  return context;\n}\n\nexport interface FilterSearchFiltersProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onValueChange'> {\n  /** The applied filter values, keyed by an arbitrary consumer-chosen id. */\n  value: Record<string, unknown>;\n  /** Called with the committed filters when Apply is pressed. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Called with the newly applied filters when Apply is pressed (fires alongside `onValueChange`). */\n  onApply?: (filters: Record<string, unknown>) => void;\n  /** Label for the filter trigger button. */\n  label?: React.ReactNode;\n  /**\n   * Filter field children rendered inside the popover form. Plain children —\n   * wire each field to the draft via `useFilterSearchFilters`. Group fields with\n   * a `Separator` as a layout convention if desired.\n   */\n  children?: React.ReactNode;\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n}\n\nconst FilterSearchFilters = React.forwardRef<\n  HTMLButtonElement,\n  FilterSearchFiltersProps\n>(({ value, onValueChange, onApply, label = 'Filters', children, className, ...rest }, ref) => {\n  const [open, setOpen] = React.useState(false);\n  const [draft, setDraft] = React.useState<Record<string, unknown>>(value);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    // Snapshot the applied filters on open; revert the draft on any dismiss\n    // (outside press / Escape) so an un-applied edit never leaks out.\n    setDraft(value);\n    setOpen(nextOpen);\n  };\n\n  const setFilter = React.useCallback((key: string, filterValue: unknown) => {\n    setDraft((previous) => {\n      if (filterValue === undefined) {\n        if (!(key in previous)) return previous;\n        const next = { ...previous };\n        delete next[key];\n        return next;\n      }\n      return { ...previous, [key]: filterValue };\n    });\n  }, []);\n\n  const filterContext = React.useMemo<FilterSearchFiltersContextValue>(\n    () => ({ filters: draft, setFilter }),\n    [draft, setFilter]\n  );\n\n  const handleReset = () => setDraft({});\n\n  const handleCancel = () => {\n    setDraft(value);\n    setOpen(false);\n  };\n\n  const handleApply = () => {\n    onValueChange(draft);\n    onApply?.(draft);\n    setOpen(false);\n  };\n\n  const resetDisabled = Object.keys(draft).length === 0;\n  const applyDisabled = deepEqual(draft, value);\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger\n        ref={ref}\n        render={\n          <Button\n            variant=\"secondary\"\n            className={cn(\n              'group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]',\n              className\n            )}\n            {...rest}\n          />\n        }\n      >\n        {label}\n        <ChevronDownIcon\n          size={16}\n          className=\"transition-transform group-data-[popup-open]:rotate-180\"\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-96 p-0\">\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            handleApply();\n          }}\n        >\n          <div className=\"flex max-h-80 flex-col gap-4 overflow-y-auto p-4\">\n            <FilterSearchFiltersContext.Provider value={filterContext}>\n              {children}\n            </FilterSearchFiltersContext.Provider>\n          </div>\n          <div className=\"flex items-center gap-2 border-t border-border p-4\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={resetDisabled}\n              onClick={handleReset}\n            >\n              Reset filters\n            </Button>\n            <div className=\"ms-auto flex items-center gap-2\">\n              <Button type=\"button\" variant=\"secondary\" onClick={handleCancel}>\n                Cancel\n              </Button>\n              <Button type=\"submit\" variant=\"default\" disabled={applyDisabled}>\n                Apply\n              </Button>\n            </div>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n});\nFilterSearchFilters.displayName = 'FilterSearchFilters';\n\nfunction defaultFilterChipLabel(key: string, value: unknown): string {\n  const text = Array.isArray(value)\n    ? value.map((entry) => String(entry)).join(', ')\n    : typeof value === 'object' && value !== null\n      ? JSON.stringify(value)\n      : String(value);\n  return `${key}: ${text}`;\n}\n\nexport interface FilterSearchAppliedFiltersProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** The currently applied filter values, keyed by an arbitrary consumer-chosen id. */\n  filters: Record<string, unknown>;\n  /** Called with the remaining filters when a chip is removed or \"Reset filters\" clears all. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Format an applied-filter chip's label. Defaults to `\"<key>: <value>\"`. */\n  getFilterChipLabel?: (key: string, value: unknown) => React.ReactNode;\n}\n\n/**\n * Renders one removable chip per applied filter plus a \"Reset filters\" action\n * that clears all filters immediately (no popover involved). Renders nothing\n * when `filters` is empty.\n */\nconst FilterSearchAppliedFilters = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchAppliedFiltersProps\n>(({ className, filters, onValueChange, getFilterChipLabel, ...props }, ref) => {\n  const keys = Object.keys(filters);\n  if (keys.length === 0) return null;\n\n  const handleRemove = (key: string) => {\n    const next = { ...filters };\n    delete next[key];\n    onValueChange(next);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center gap-3', className)}\n      {...props}\n    >\n      {keys.map((key) => (\n        <Chip\n          key={key}\n          variant=\"removable\"\n          onRemove={() => handleRemove(key)}\n          removeLabel={`Remove ${key} filter`}\n        >\n          {getFilterChipLabel\n            ? getFilterChipLabel(key, filters[key])\n            : defaultFilterChipLabel(key, filters[key])}\n        </Chip>\n      ))}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        onClick={() => onValueChange({})}\n      >\n        Reset filters\n      </Button>\n    </div>\n  );\n});\nFilterSearchAppliedFilters.displayName = 'FilterSearchAppliedFilters';\n\nexport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchFilters,\n  FilterSearchAppliedFilters,\n};\n"],"names":["FilterSearch","React","className","props","ref","jsx","cn","FilterSearchActions","FilterSearchFiltersContext","useFilterSearchFilters","context","FilterSearchFilters","value","onValueChange","onApply","label","children","rest","open","setOpen","draft","setDraft","handleOpenChange","nextOpen","setFilter","key","filterValue","previous","next","filterContext","handleReset","handleCancel","handleApply","resetDisabled","applyDisabled","deepEqual","jsxs","Popover","PopoverTrigger","Button","ChevronDownIcon","PopoverContent","event","defaultFilterChipLabel","text","entry","FilterSearchAppliedFilters","filters","getFilterChipLabel","keys","handleRemove","Chip"],"mappings":"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"}
+{"version":3,"file":"filter-search.js","sources":["../../../../src/components/ui/filter-search/filter-search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { deepEqual } from '@/lib/deep-equal';\nimport { Button } from '../button';\nimport { Chip } from '../chip';\nimport {\n  FilterChips,\n  FilterChipsList,\n  FilterChipsReset,\n  type FilterChipsProps,\n} from '../filter-chips';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\n\n// A composable toolbar for data tables: arranges a search field, optional\n// filters button, optional tenant/scope switcher, and trailing action buttons\n// in a single horizontal row. Maps to the Figma \"FilterSearch\" component. The\n// root container uses 16px inter-item gap (Figma `gap/gap-16`) and centers\n// children vertically. `FilterSearchActions` is a right-aligned flex area that\n// pushes its content to the trailing edge.\n//\n// No dedicated token tier — spacing is the Figma `gap/gap-16` semantic token\n// (16px), and each child (Search, ButtonMenu, Select) brings its own\n// `--ui-*` tier.\n//\n// `FilterSearchFilters` is still design-pending (no Figma node yet, unlike the\n// FilterSearch node itself): the filter popover — trigger + form +\n// Reset/Cancel/Apply. Compose it as a child of `<FilterSearch>` in place of a\n// plain filter trigger, and reconcile against the real design with\n// `/figma-component FilterSearchFilters <url> --update` once a mockup lands.\n//\n// `FilterSearchAppliedFilters` is no longer design-pending: its chip row landed\n// in Figma as its own \"FilterChips\" component, so it renders through\n// `FilterChips`/`FilterChipsList`/`FilterChipsReset` rather than repeating that\n// layout. It keeps its data-driven API (a `filters` record) as the convenience\n// wrapper over those slot-based parts; render it as a sibling row below\n// `<FilterSearch>`.\n\nexport type FilterSearchProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearch = React.forwardRef<HTMLDivElement, FilterSearchProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-4', className)}\n      {...props}\n    />\n  )\n);\nFilterSearch.displayName = 'FilterSearch';\n\nexport type FilterSearchActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearchActions = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchActionsProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-8 min-w-px flex-1 items-center justify-end gap-4',\n      className\n    )}\n    {...props}\n  />\n));\nFilterSearchActions.displayName = 'FilterSearchActions';\n\ninterface FilterSearchFiltersContextValue {\n  /** The current draft filters being edited inside the popover. */\n  filters: Record<string, unknown>;\n  /** Set a single draft filter value by key. */\n  setFilter: (key: string, value: unknown) => void;\n}\n\nconst FilterSearchFiltersContext =\n  React.createContext<FilterSearchFiltersContextValue | null>(null);\n\n/**\n * Bind a filter field child (rendered inside `FilterSearchFilters`'s popover) to\n * the component's draft filters. Returns the current draft map and a per-key\n * setter. Field children are plain JSX (no render prop) and wire their own\n * `onChange` to `setFilter`; Apply commits the draft, Cancel/dismiss reverts it.\n */\nexport function useFilterSearchFilters(): FilterSearchFiltersContextValue {\n  const context = React.useContext(FilterSearchFiltersContext);\n  if (context === null) {\n    throw new Error(\n      'useFilterSearchFilters must be used within a <FilterSearchFilters> popover.'\n    );\n  }\n  return context;\n}\n\nexport interface FilterSearchFiltersProps extends Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'value' | 'onValueChange'\n> {\n  /** The applied filter values, keyed by an arbitrary consumer-chosen id. */\n  value: Record<string, unknown>;\n  /** Called with the committed filters when Apply is pressed. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Called with the newly applied filters when Apply is pressed (fires alongside `onValueChange`). */\n  onApply?: (filters: Record<string, unknown>) => void;\n  /** Label for the filter trigger button. */\n  label?: React.ReactNode;\n  /** Label for the \"Reset filters\" action inside the popover. */\n  resetFiltersLabel?: React.ReactNode;\n  /** Label for the \"Cancel\" action inside the popover. */\n  cancelLabel?: React.ReactNode;\n  /** Label for the \"Apply\" action inside the popover. */\n  applyLabel?: React.ReactNode;\n  /**\n   * Filter field children rendered inside the popover form. Plain children —\n   * wire each field to the draft via `useFilterSearchFilters`. Group fields with\n   * a `Separator` as a layout convention if desired.\n   */\n  children?: React.ReactNode;\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n  /** Additional classes merged onto the popover content. */\n  contentClassName?: string;\n  /** Which side of the trigger to render the popover on. Defaults to `'bottom'`. */\n  side?: React.ComponentProps<typeof PopoverContent>['side'];\n  /** Alignment of the popover along the chosen side. Defaults to `'start'`. */\n  align?: React.ComponentProps<typeof PopoverContent>['align'];\n  /** Distance in px between the trigger and the popover. */\n  sideOffset?: React.ComponentProps<typeof PopoverContent>['sideOffset'];\n  /**\n   * Portal container the popover mounts into. Defaults to the nearest\n   * `PortalContainerProvider`, or `document.body` if none is set — see\n   * `PopoverContent`'s `portalContainer` prop.\n   */\n  portalContainer?: React.ComponentProps<\n    typeof PopoverContent\n  >['portalContainer'];\n  /**\n   * Element/rect the popover is confined to when avoiding collisions. See\n   * `PopoverContent`'s `collisionBoundary` prop for the default behavior\n   * inside a constrained portal container.\n   */\n  collisionBoundary?: React.ComponentProps<\n    typeof PopoverContent\n  >['collisionBoundary'];\n  /**\n   * Which CSS `position` the popover uses. See `PopoverContent`'s\n   * `positionMethod` prop for the default behavior inside a constrained\n   * portal container.\n   */\n  positionMethod?: React.ComponentProps<\n    typeof PopoverContent\n  >['positionMethod'];\n}\n\nconst FilterSearchFilters = React.forwardRef<\n  HTMLButtonElement,\n  FilterSearchFiltersProps\n>(\n  (\n    {\n      value,\n      onValueChange,\n      onApply,\n      label = 'Filters',\n      resetFiltersLabel = 'Reset filters',\n      cancelLabel = 'Cancel',\n      applyLabel = 'Apply',\n      children,\n      className,\n      contentClassName,\n      side,\n      align = 'start',\n      sideOffset,\n      portalContainer,\n      collisionBoundary,\n      positionMethod,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<Record<string, unknown>>(value);\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      // Snapshot the applied filters on open; revert the draft on any dismiss\n      // (outside press / Escape) so an un-applied edit never leaks out.\n      setDraft(value);\n      setOpen(nextOpen);\n    };\n\n    const setFilter = React.useCallback((key: string, filterValue: unknown) => {\n      setDraft((previous) => {\n        if (filterValue === undefined) {\n          if (!(key in previous)) return previous;\n          const next = { ...previous };\n          delete next[key];\n          return next;\n        }\n        return { ...previous, [key]: filterValue };\n      });\n    }, []);\n\n    const filterContext = React.useMemo<FilterSearchFiltersContextValue>(\n      () => ({ filters: draft, setFilter }),\n      [draft, setFilter]\n    );\n\n    const handleReset = () => setDraft({});\n\n    const handleCancel = () => {\n      setDraft(value);\n      setOpen(false);\n    };\n\n    const handleApply = () => {\n      onValueChange(draft);\n      onApply?.(draft);\n      setOpen(false);\n    };\n\n    const resetDisabled = Object.keys(draft).length === 0;\n    const applyDisabled = deepEqual(draft, value);\n\n    return (\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger\n          ref={ref}\n          render={\n            <Button\n              variant=\"secondary\"\n              className={cn(\n                'group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]',\n                className\n              )}\n              {...rest}\n            />\n          }\n        >\n          {label}\n          <ChevronDownIcon\n            size={16}\n            className=\"transition-transform group-data-[popup-open]:rotate-180\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          portalContainer={portalContainer}\n          collisionBoundary={collisionBoundary}\n          positionMethod={positionMethod}\n          className={cn('w-96 p-0', contentClassName)}\n        >\n          <form\n            onSubmit={(event) => {\n              event.preventDefault();\n              handleApply();\n            }}\n          >\n            <div className=\"flex max-h-80 flex-col gap-4 overflow-y-auto p-4\">\n              <FilterSearchFiltersContext.Provider value={filterContext}>\n                {children}\n              </FilterSearchFiltersContext.Provider>\n            </div>\n            <div className=\"flex items-center gap-2 border-t border-border p-4\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                disabled={resetDisabled}\n                onClick={handleReset}\n              >\n                {resetFiltersLabel}\n              </Button>\n              <div className=\"ms-auto flex items-center gap-2\">\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  onClick={handleCancel}\n                >\n                  {cancelLabel}\n                </Button>\n                <Button\n                  type=\"submit\"\n                  variant=\"default\"\n                  disabled={applyDisabled}\n                >\n                  {applyLabel}\n                </Button>\n              </div>\n            </div>\n          </form>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\nFilterSearchFilters.displayName = 'FilterSearchFilters';\n\nfunction defaultFilterChipLabel(key: string, value: unknown): string {\n  const text = Array.isArray(value)\n    ? value.map((entry) => String(entry)).join(', ')\n    : typeof value === 'object' && value !== null\n      ? JSON.stringify(value)\n      : String(value);\n  return `${key}: ${text}`;\n}\n\nexport interface FilterSearchAppliedFiltersProps\n  extends Omit<FilterChipsProps, 'children'> {\n  /** The currently applied filter values, keyed by an arbitrary consumer-chosen id. */\n  filters: Record<string, unknown>;\n  /** Called with the remaining filters when a chip is removed or \"Reset filters\" clears all. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Format an applied-filter chip's label. Defaults to `\"<key>: <value>\"`. */\n  getFilterChipLabel?: (key: string, value: unknown) => React.ReactNode;\n  /** Format a filter chip's remove-button accessible label. Defaults to `\"Remove <key> filter\"`. */\n  getRemoveFilterLabel?: (key: string) => string;\n  /** Label for the \"Reset filters\" action. */\n  resetFiltersLabel?: React.ReactNode;\n}\n\n/**\n * Renders one removable chip per applied filter plus a \"Reset filters\" action\n * that clears all filters immediately (no popover involved). Renders nothing\n * when `filters` is empty.\n */\nconst FilterSearchAppliedFilters = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchAppliedFiltersProps\n>(\n  (\n    {\n      className,\n      filters,\n      onValueChange,\n      getFilterChipLabel,\n      getRemoveFilterLabel = (key) => `Remove ${key} filter`,\n      resetFiltersLabel = 'Reset filters',\n      ...props\n    },\n    ref\n  ) => {\n    const keys = Object.keys(filters);\n    if (keys.length === 0) return null;\n\n    const handleRemove = (key: string) => {\n      const next = { ...filters };\n      delete next[key];\n      onValueChange(next);\n    };\n\n    return (\n      <FilterChips ref={ref} className={className} {...props}>\n        <FilterChipsList>\n          {keys.map((key) => (\n            <Chip\n              key={key}\n              variant=\"removable\"\n              onRemove={() => handleRemove(key)}\n              removeLabel={getRemoveFilterLabel(key)}\n            >\n              {getFilterChipLabel\n                ? getFilterChipLabel(key, filters[key])\n                : defaultFilterChipLabel(key, filters[key])}\n            </Chip>\n          ))}\n          <FilterChipsReset onClick={() => onValueChange({})}>\n            {resetFiltersLabel}\n          </FilterChipsReset>\n        </FilterChipsList>\n      </FilterChips>\n    );\n  }\n);\nFilterSearchAppliedFilters.displayName = 'FilterSearchAppliedFilters';\n\nexport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchFilters,\n  FilterSearchAppliedFilters,\n};\n"],"names":["FilterSearch","React","className","props","ref","jsx","cn","FilterSearchActions","FilterSearchFiltersContext","useFilterSearchFilters","context","FilterSearchFilters","value","onValueChange","onApply","label","resetFiltersLabel","cancelLabel","applyLabel","children","contentClassName","side","align","sideOffset","portalContainer","collisionBoundary","positionMethod","rest","open","setOpen","draft","setDraft","handleOpenChange","nextOpen","setFilter","key","filterValue","previous","next","filterContext","handleReset","handleCancel","handleApply","resetDisabled","applyDisabled","deepEqual","jsxs","Popover","PopoverTrigger","Button","ChevronDownIcon","PopoverContent","event","defaultFilterChipLabel","text","entry","FilterSearchAppliedFilters","filters","getFilterChipLabel","getRemoveFilterLabel","keys","handleRemove","FilterChips","FilterChipsList","Chip","FilterChipsReset"],"mappings":"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"}

package/dist/components/ui/fitted-actions/fitted-actions.js

@@ -0,0 +1,139 @@
+import { jsx as p, jsxs as l, Fragment as G } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as k } from "../../../lib/utils.js";
+import { Button as V, buttonVariants as I } from "../button/button.js";
+import { DropdownMenu as P, DropdownMenuTrigger as T, DropdownMenuContent as U, DropdownMenuItem as _ } from "../dropdown-menu/dropdown-menu.js";
+const D = 8;
+function q({
+  containerWidth: m,
+  itemWidths: n,
+  dropdownWidth: d,
+  gap: r = D
+}) {
+  const i = n.length;
+  if (i === 0) return 0;
+  const b = m - d;
+  let o = 0, c = 0;
+  for (let u = 0; u < i; u += 1) {
+    const h = o + (c > 0 ? r : 0) + (n[u] ?? 0);
+    if (h <= b)
+      o = h, c += 1;
+    else break;
+  }
+  return c;
+}
+const w = I({ variant: "ghost" }), H = s.forwardRef(
+  ({
+    actions: m = [],
+    showDropdown: n = !0,
+    moreLabel: d = "More",
+    gap: r = D,
+    onAction: i,
+    renderAction: b,
+    renderTrigger: o,
+    className: c,
+    style: u,
+    ...h
+  }, a) => {
+    const t = s.useMemo(
+      () => m.filter((e) => e.isDisplayed !== !1),
+      [m]
+    ), x = s.useRef(null), y = s.useRef(null), [E, S] = s.useState(t.length), j = s.useCallback(
+      (e) => {
+        x.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+      },
+      [a]
+    );
+    s.useLayoutEffect(() => {
+      const e = x.current, f = y.current;
+      if (!n || !e || !f || typeof ResizeObserver > "u")
+        return;
+      const N = new ResizeObserver(() => {
+        var W;
+        const g = Array.from(f.children), $ = ((W = g[g.length - 1]) == null ? void 0 : W.offsetWidth) ?? 0, A = g.slice(0, t.length).map((B) => B.offsetWidth), R = e.clientWidth;
+        S(
+          R === 0 ? t.length : q({
+            containerWidth: R,
+            itemWidths: A,
+            dropdownWidth: $,
+            gap: r
+          })
+        );
+      });
+      return N.observe(e), () => N.disconnect();
+    }, [t, n, d, r]);
+    const C = n ? E : t.length, z = t.slice(0, C), F = n ? t.slice(C) : [], v = (e) => {
+      var f;
+      (f = e.onSelect) == null || f.call(e), i == null || i(e);
+    }, O = (e) => /* @__PURE__ */ l(
+      V,
+      {
+        variant: "ghost",
+        disabled: e.disabled,
+        onClick: () => v(e),
+        children: [
+          e.icon,
+          e.label
+        ]
+      }
+    ), M = o ? o({ label: d }) : /* @__PURE__ */ p(V, { variant: "ghost", children: d });
+    return /* @__PURE__ */ l(G, { children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          ref: j,
+          "data-slot": "fitted-actions",
+          className: k("flex min-w-0 items-center overflow-hidden", c),
+          style: { gap: `${r}px`, ...u },
+          ...h,
+          children: [
+            z.map((e) => /* @__PURE__ */ p(s.Fragment, { children: b ? b(e, {
+              onSelect: () => v(e),
+              disabled: e.disabled
+            }) : O(e) }, e.id)),
+            F.length > 0 && /* @__PURE__ */ l(P, { children: [
+              /* @__PURE__ */ p(T, { render: M }),
+              /* @__PURE__ */ p(U, { align: "end", children: F.map((e) => /* @__PURE__ */ l(
+                _,
+                {
+                  disabled: e.disabled,
+                  onClick: () => v(e),
+                  className: k(
+                    e.divided && "mt-1 border-t border-border pt-1"
+                  ),
+                  children: [
+                    e.icon,
+                    e.label
+                  ]
+                },
+                e.id
+              )) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          ref: y,
+          "aria-hidden": "true",
+          className: "pointer-events-none invisible absolute left-0 top-0 flex",
+          style: { gap: `${r}px` },
+          children: [
+            t.map((e) => /* @__PURE__ */ l("span", { className: w, children: [
+              e.icon,
+              e.label
+            ] }, e.id)),
+            M
+          ]
+        }
+      )
+    ] });
+  }
+);
+H.displayName = "FittedActions";
+export {
+  H as FittedActions,
+  q as computeFittedVisibleCount
+};
+//# sourceMappingURL=fitted-actions.js.map

package/dist/components/ui/fitted-actions/fitted-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitted-actions.js","sources":["../../../../src/components/ui/fitted-actions/fitted-actions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Button, buttonVariants } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\n// A responsive action row with automatic overflow — actions render inline in\n// priority order; when they don't fit the available width, the trailing ones\n// collapse into a \"More\" dropdown menu, recomputed on resize (ResizeObserver).\n//\n// Widths come from an off-screen \"tracing layer\" that renders every action at its\n// intrinsic width (ghost-button footprint) plus the overflow trigger; the pure\n// `computeFittedVisibleCount` turns those measurements into a visible count. All\n// state updates happen inside the ResizeObserver callback (never synchronously in\n// the effect), so before the first measurement every action is shown.\n\nconst DEFAULT_GAP = 8;\n\n/**\n * Pure overflow math (no DOM). Greedily fits leading actions into\n * `containerWidth - dropdownWidth`, accounting for the inter-item `gap`. Returns\n * how many render inline; the rest overflow into the menu. Exported for testing.\n */\nexport function computeFittedVisibleCount({\n  containerWidth,\n  itemWidths,\n  dropdownWidth,\n  gap = DEFAULT_GAP,\n}: {\n  containerWidth: number;\n  itemWidths: number[];\n  dropdownWidth: number;\n  gap?: number;\n}): number {\n  const count = itemWidths.length;\n  if (count === 0) return 0;\n  const available = containerWidth - dropdownWidth;\n  let used = 0;\n  let visible = 0;\n  for (let index = 0; index < count; index += 1) {\n    const next = used + (visible > 0 ? gap : 0) + (itemWidths[index] ?? 0);\n    if (next <= available) {\n      used = next;\n      visible += 1;\n    } else break;\n  }\n  return visible;\n}\n\nexport interface FittedAction {\n  /** Stable identity. */\n  id: string;\n  /** Visible label (also the overflow menu-item label). */\n  label: React.ReactNode;\n  /** Optional leading 16px icon. */\n  icon?: React.ReactNode;\n  /** Set `false` to omit the action entirely. */\n  isDisplayed?: boolean;\n  /** Render a divider above this item when it sits in the overflow menu. */\n  divided?: boolean;\n  disabled?: boolean;\n  /** Invoked when this action is chosen (inline click or menu select). */\n  onSelect?: () => void;\n}\n\nexport interface FittedActionsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Ordered actions; trailing items overflow into the menu first. Defaults to `[]`. */\n  actions?: FittedAction[];\n  /** Collapse overflow into a \"More\" menu. Default true. */\n  showDropdown?: boolean;\n  /** Label for the overflow trigger. Default \"More\". */\n  moreLabel?: React.ReactNode;\n  /** Inter-item gap in px (also reserved when measuring). Default 8. */\n  gap?: number;\n  /** Fired for any chosen action, after its own `onSelect`. */\n  onAction?: (action: FittedAction) => void;\n  /** Customize the inline action element. Default: a ghost `Button`. */\n  renderAction?: (\n    action: FittedAction,\n    api: { onSelect: () => void; disabled?: boolean }\n  ) => React.ReactNode;\n  /** Customize the overflow trigger (used as the menu trigger's `render`). Default: a ghost `Button`. */\n  renderTrigger?: (api: { label: React.ReactNode }) => React.ReactElement;\n}\n\nconst measureClass = buttonVariants({ variant: 'ghost' });\n\nconst FittedActions = React.forwardRef<HTMLDivElement, FittedActionsProps>(\n  (\n    {\n      actions = [],\n      showDropdown = true,\n      moreLabel = 'More',\n      gap = DEFAULT_GAP,\n      onAction,\n      renderAction,\n      renderTrigger,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const displayed = React.useMemo(\n      () => actions.filter((action) => action.isDisplayed !== false),\n      [actions]\n    );\n\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\n    const measureRef = React.useRef<HTMLDivElement | null>(null);\n    const [visibleCount, setVisibleCount] = React.useState(displayed.length);\n\n    const setContainer = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        containerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    React.useLayoutEffect(() => {\n      const container = containerRef.current;\n      const measure = measureRef.current;\n      // With no overflow menu, or no way to measure, show everything inline.\n      // Every state update happens inside the observer callback below (which\n      // fires an initial notification on observe), never synchronously here.\n      if (\n        !showDropdown ||\n        !container ||\n        !measure ||\n        typeof ResizeObserver === 'undefined'\n      )\n        return;\n      const observer = new ResizeObserver(() => {\n        const clones = Array.from(measure.children) as HTMLElement[];\n        const dropdownWidth = clones[clones.length - 1]?.offsetWidth ?? 0;\n        const itemWidths = clones\n          .slice(0, displayed.length)\n          .map((element) => element.offsetWidth);\n        const containerWidth = container.clientWidth;\n        setVisibleCount(\n          containerWidth === 0\n            ? displayed.length\n            : computeFittedVisibleCount({\n                containerWidth,\n                itemWidths,\n                dropdownWidth,\n                gap,\n              })\n        );\n      });\n      observer.observe(container);\n      return () => observer.disconnect();\n    }, [displayed, showDropdown, moreLabel, gap]);\n\n    const effectiveVisible = showDropdown ? visibleCount : displayed.length;\n    const inline = displayed.slice(0, effectiveVisible);\n    const overflow = showDropdown ? displayed.slice(effectiveVisible) : [];\n\n    const select = (action: FittedAction) => {\n      action.onSelect?.();\n      onAction?.(action);\n    };\n\n    const defaultRenderAction = (action: FittedAction) => (\n      <Button\n        variant=\"ghost\"\n        disabled={action.disabled}\n        onClick={() => select(action)}\n      >\n        {action.icon}\n        {action.label}\n      </Button>\n    );\n\n    const triggerElement = renderTrigger ? (\n      renderTrigger({ label: moreLabel })\n    ) : (\n      <Button variant=\"ghost\">{moreLabel}</Button>\n    );\n\n    return (\n      <>\n        <div\n          ref={setContainer}\n          data-slot=\"fitted-actions\"\n          className={cn('flex min-w-0 items-center overflow-hidden', className)}\n          style={{ gap: `${gap}px`, ...style }}\n          {...props}\n        >\n          {inline.map((action) => (\n            <React.Fragment key={action.id}>\n              {renderAction\n                ? renderAction(action, {\n                    onSelect: () => select(action),\n                    disabled: action.disabled,\n                  })\n                : defaultRenderAction(action)}\n            </React.Fragment>\n          ))}\n          {overflow.length > 0 && (\n            <DropdownMenu>\n              <DropdownMenuTrigger render={triggerElement} />\n              <DropdownMenuContent align=\"end\">\n                {overflow.map((action) => (\n                  <DropdownMenuItem\n                    key={action.id}\n                    disabled={action.disabled}\n                    onClick={() => select(action)}\n                    className={cn(\n                      action.divided && 'mt-1 border-t border-border pt-1'\n                    )}\n                  >\n                    {action.icon}\n                    {action.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n        {/* Off-screen tracing layer: intrinsic widths of every action (ghost\n            footprint) + the overflow trigger, read on resize. Not part of the\n            focus order or the a11y tree. */}\n        <div\n          ref={measureRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible absolute left-0 top-0 flex\"\n          style={{ gap: `${gap}px` }}\n        >\n          {displayed.map((action) => (\n            <span key={action.id} className={measureClass}>\n              {action.icon}\n              {action.label}\n            </span>\n          ))}\n          {triggerElement}\n        </div>\n      </>\n    );\n  }\n);\nFittedActions.displayName = 'FittedActions';\n\nexport { FittedActions };\n"],"names":["DEFAULT_GAP","computeFittedVisibleCount","containerWidth","itemWidths","dropdownWidth","gap","count","available","used","visible","index","next","measureClass","buttonVariants","FittedActions","React","actions","showDropdown","moreLabel","onAction","renderAction","renderTrigger","className","style","props","forwardedRef","displayed","action","containerRef","measureRef","visibleCount","setVisibleCount","setContainer","node","container","measure","observer","clones","_a","element","effectiveVisible","inline","overflow","select","defaultRenderAction","jsxs","Button","triggerElement","jsx","Fragment","cn","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem"],"mappings":"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"}