@acronis-platform/ui-react 1.0.0 → 3.0.0

package/dist/components/ui/data-table/data-table-expand-trigger.js

@@ -1,27 +1,35 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as l from "react";
-import { ChevronDownIcon as s } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as o } from "../../../lib/utils.js";
-function c({ row: e, className: t, ...n }, i) {
+import * as c from "react";
+import { ChevronDownIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as t } from "../../../lib/utils.js";
+function p({
+  row: e,
+  collapseLabel: o = "Collapse row",
+  expandLabel: n = "Expand row",
+  className: i,
+  ...l
+}, s) {
   if (!e.getCanExpand()) return null;
   const r = e.getIsExpanded();
   return /* @__PURE__ */ a(
     "button",
     {
-      ref: i,
+      ref: s,
       type: "button",
       onClick: e.getToggleExpandedHandler(),
-      "aria-label": r ? "Collapse row" : "Expand row",
+      "aria-label": r ? o : n,
       "aria-expanded": r,
-      className: o(
-        "inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
-        t
+      className: t(
+        // Lives in a data cell, so it tints from the data-cell tokens; the focus
+        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).
+        "inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+        i
       ),
-      ...n,
+      ...l,
       children: /* @__PURE__ */ a(
-        s,
+        d,
         {
-          className: o(
+          className: t(
             "transition-transform",
             !r && "ltr:-rotate-90 rtl:rotate-90"
           )
@@ -30,10 +38,10 @@ function c({ row: e, className: t, ...n }, i) {
     }
   );
 }
-const f = l.forwardRef(
-  c
+const m = c.forwardRef(
+  p
 );
 export {
-  f as DataTableExpandTrigger
+  m as DataTableExpandTrigger
 };
 //# sourceMappingURL=data-table-expand-trigger.js.map

package/dist/components/ui/data-table/data-table-expand-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  { row, className, ...props }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? 'Collapse row' : 'Expand row'}\n      aria-expanded={expanded}\n      className={cn(\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAkBA,SAASA,EACP,EAAE,KAAAC,GAAK,WAAAC,GAAW,GAAGC,EAAA,GACrBC,GACA;AACA,MAAI,CAACH,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMI,IAAWJ,EAAI,cAAA;AAErB,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASH,EAAI,yBAAA;AAAA,MACb,cAAYI,IAAW,iBAAiB;AAAA,MACxC,iBAAeA;AAAA,MACf,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CV;AACF;"}
+{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n  /** Accessible name while the row is expanded. Override to localize. */\n  collapseLabel?: string;\n  /** Accessible name while the row is collapsed. Override to localize. */\n  expandLabel?: string;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  {\n    row,\n    collapseLabel = 'Collapse row',\n    expandLabel = 'Expand row',\n    className,\n    ...props\n  }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={cn(\n        // Lives in a data cell, so it tints from the data-cell tokens; the focus\n        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","collapseLabel","expandLabel","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAsBA,SAASA,EACP;AAAA,EACE,KAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,MAAI,CAACL,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMM,IAAWN,EAAI,cAAA;AAErB,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASL,EAAI,yBAAA;AAAA,MACb,cAAYM,IAAWL,IAAgBC;AAAA,MACvC,iBAAeI;AAAA,MACf,WAAWE;AAAA;AAAA;AAAA,QAGT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CZ;AACF;"}

package/dist/components/ui/data-table/data-table-pagination.js

@@ -1,82 +1,83 @@
 import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { ChevronFirstIcon as o, ChevronLeftIcon as l, ChevronRightIcon as s, ChevronLastIcon as c } from "@acronis-platform/icons-react/stroke-mono";
-import { InputSelect as d, InputSelectTrigger as g, InputSelectValue as m, InputSelectContent as p, InputSelectItem as h } from "../input-select/input-select.js";
+import { ChevronFirstIcon as h, ChevronLeftIcon as u, ChevronRightIcon as x, ChevronLastIcon as f } from "@acronis-platform/icons-react/stroke-mono";
+import { InputSelect as v, InputSelectTrigger as C, InputSelectValue as I, InputSelectContent as N, InputSelectItem as P } from "../input-select/input-select.js";
 import { ButtonIcon as i } from "../button-icon/button-icon.js";
-function C({
+function j({
   table: e,
-  pageSizeOptions: r = [10, 20, 30, 40, 50]
+  pageSizeOptions: o = [10, 20, 30, 40, 50],
+  rowsPerPageLabel: l = "Rows per page",
+  firstPageLabel: s = "Go to first page",
+  previousPageLabel: c = "Go to previous page",
+  nextPageLabel: d = "Go to next page",
+  lastPageLabel: g = "Go to last page",
+  pageLabel: m = (t, r) => `Page ${t} of ${r}`,
+  summaryLabel: p = (t, r) => `${t} of ${r} row(s) selected.`
 }) {
   return /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2", children: [
-    /* @__PURE__ */ a("div", { className: "flex-1 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ n("div", { className: "flex-1 text-sm text-muted-foreground", children: p(
       e.getFilteredSelectedRowModel().rows.length,
-      " of",
-      " ",
-      e.getFilteredRowModel().rows.length,
-      " row(s) selected."
-    ] }),
+      e.getFilteredRowModel().rows.length
+    ) }),
     /* @__PURE__ */ a("div", { className: "flex items-center gap-6 lg:gap-8", children: [
       /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: l }),
         /* @__PURE__ */ a(
-          d,
+          v,
           {
             value: `${e.getState().pagination.pageSize}`,
             onValueChange: (t) => e.setPageSize(Number(t)),
             children: [
-              /* @__PURE__ */ n(g, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ n(m, {}) }),
-              /* @__PURE__ */ n(p, { children: r.map((t) => /* @__PURE__ */ n(h, { value: `${t}`, children: t }, t)) })
+              /* @__PURE__ */ n(C, { "aria-label": l, className: "h-8 w-[70px]", children: /* @__PURE__ */ n(I, {}) }),
+              /* @__PURE__ */ n(N, { children: o.map((t) => /* @__PURE__ */ n(P, { value: `${t}`, children: t }, t)) })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ a("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
-        "Page ",
+      /* @__PURE__ */ n("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: m(
         e.getState().pagination.pageIndex + 1,
-        " of",
-        " ",
         e.getPageCount()
-      ] }),
+      ) }),
       /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ n(
           i,
           {
             variant: "secondary",
-            "aria-label": "Go to first page",
+            "aria-label": s,
             className: "hidden lg:inline-flex",
             onClick: () => e.setPageIndex(0),
             disabled: !e.getCanPreviousPage(),
-            children: /* @__PURE__ */ n(o, {})
+            children: /* @__PURE__ */ n(h, {})
           }
         ),
         /* @__PURE__ */ n(
           i,
           {
             variant: "secondary",
-            "aria-label": "Go to previous page",
+            "aria-label": c,
             onClick: () => e.previousPage(),
             disabled: !e.getCanPreviousPage(),
-            children: /* @__PURE__ */ n(l, {})
+            children: /* @__PURE__ */ n(u, {})
           }
         ),
         /* @__PURE__ */ n(
           i,
           {
             variant: "secondary",
-            "aria-label": "Go to next page",
+            "aria-label": d,
             onClick: () => e.nextPage(),
             disabled: !e.getCanNextPage(),
-            children: /* @__PURE__ */ n(s, {})
+            children: /* @__PURE__ */ n(x, {})
           }
         ),
         /* @__PURE__ */ n(
           i,
           {
             variant: "secondary",
-            "aria-label": "Go to last page",
+            "aria-label": g,
             className: "hidden lg:inline-flex",
             onClick: () => e.setPageIndex(e.getPageCount() - 1),
             disabled: !e.getCanNextPage(),
-            children: /* @__PURE__ */ n(c, {})
+            children: /* @__PURE__ */ n(f, {})
           }
         )
       ] })
@@ -84,6 +85,6 @@ function C({
   ] });
 }
 export {
-  C as DataTablePagination
+  j as DataTablePagination
 };
 //# sourceMappingURL=data-table-pagination.js.map

package/dist/components/ui/data-table/data-table-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length} of{' '}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to first page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to previous page\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to next page\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to last page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** Label of the rows-per-page select (also its accessible name). */\n  rowsPerPageLabel?: string;\n  /** Accessible name of the first-page control. */\n  firstPageLabel?: string;\n  /** Accessible name of the previous-page control. */\n  previousPageLabel?: string;\n  /** Accessible name of the next-page control. */\n  nextPageLabel?: string;\n  /** Accessible name of the last-page control. */\n  lastPageLabel?: string;\n  /** Builds the page indicator from the 1-based page number and page count. */\n  pageLabel?: (page: number, pageCount: number) => string;\n  /** Builds the leading selection summary from the selected and total counts. */\n  summaryLabel?: (selectedRows: number, totalRows: number) => string;\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n  rowsPerPageLabel = 'Rows per page',\n  firstPageLabel = 'Go to first page',\n  previousPageLabel = 'Go to previous page',\n  nextPageLabel = 'Go to next page',\n  lastPageLabel = 'Go to last page',\n  pageLabel = (page, count) => `Page ${page} of ${count}`,\n  summaryLabel = (selected, total) => `${selected} of ${total} row(s) selected.`,\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {summaryLabel(\n          table.getFilteredSelectedRowModel().rows.length,\n          table.getFilteredRowModel().rows.length\n        )}\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">{rowsPerPageLabel}</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label={rowsPerPageLabel} className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          {pageLabel(\n            table.getState().pagination.pageIndex + 1,\n            table.getPageCount()\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={firstPageLabel}\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={previousPageLabel}\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={nextPageLabel}\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={lastPageLabel}\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","rowsPerPageLabel","firstPageLabel","previousPageLabel","nextPageLabel","lastPageLabel","pageLabel","page","count","summaryLabel","selected","total","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-selection.js

@@ -0,0 +1,7 @@
+function t(e) {
+  return e.getSelectedRowModel().rows.length > 0;
+}
+export {
+  t as isBulkSelectionActive
+};
+//# sourceMappingURL=data-table-selection.js.map

package/dist/components/ui/data-table/data-table-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection.js","sources":["../../../../src/components/ui/data-table/data-table-selection.ts"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\n/**\n * Whether any row is currently selected — the single threshold that decides\n * between per-row actions and bulk actions, per the design (Figma 5916-10470\n * / 5916-10745 / 5916-11716 / 5916-11286 / 5916-11991): a single selected row\n * already switches to the bulk scope (its own row actions hide, and\n * `DataTableBulkActionsBar` enables), same as two or more. `TableActionsCell`\n * takes this as its `bulkSelectionActive` prop, so the threshold doesn't have\n * to be re-derived per consumer.\n */\nexport function isBulkSelectionActive<TData>(table: Table<TData>): boolean {\n  return table.getSelectedRowModel().rows.length > 0;\n}\n"],"names":["isBulkSelectionActive","table"],"mappings":"AAWO,SAASA,EAA6BC,GAA8B;AACzE,SAAOA,EAAM,oBAAA,EAAsB,KAAK,SAAS;AACnD;"}

package/dist/components/ui/data-table/data-table-toolbar.js

@@ -1,15 +1,14 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import { TimesIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { DataTableViewOptions as v } from "./data-table-view-options.js";
-import { FilterSearch as S, FilterSearchFilters as T, FilterSearchActions as x, FilterSearchAppliedFilters as V } from "../filter-search/filter-search.js";
-import { InputSearch as j } from "../input-search/input-search.js";
-import { Button as N } from "../button/button.js";
-function O(t, l) {
+import { FilterSearch as v, FilterSearchFilters as x, FilterSearchAppliedFilters as S } from "../filter-search/filter-search.js";
+import { InputSearch as T } from "../input-search/input-search.js";
+import { Button as j } from "../button/button.js";
+function V(t, l) {
   return Object.fromEntries(
     t.filter((e) => e.id !== l).map((e) => [e.id, e.value])
   );
 }
-function R(t) {
+function N(t) {
   return Object.entries(t).map(([l, e]) => ({ id: l, value: e }));
 }
 function k({
@@ -22,28 +21,28 @@ function k({
   getFilterChipLabel: d
 }) {
   var f;
-  const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u = O(o, e), F = (a) => {
-    const i = e ? o.filter((h) => h.id === e) : [];
-    t.setColumnFilters([...i, ...R(a)]);
+  const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u = V(o, e), F = (a) => {
+    const r = e ? o.filter((h) => h.id === e) : [];
+    t.setColumnFilters([...r, ...N(a)]);
   };
   return /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ s(S, { children: [
+    /* @__PURE__ */ s(v, { children: [
       l,
-      e && /* @__PURE__ */ r(
-        j,
+      e && /* @__PURE__ */ i(
+        T,
         {
           placeholder: c,
           "aria-label": c,
           value: ((f = t.getColumn(e)) == null ? void 0 : f.getFilterValue()) ?? "",
           onChange: (a) => {
-            var i;
-            return (i = t.getColumn(e)) == null ? void 0 : i.setFilterValue(a.target.value);
+            var r;
+            return (r = t.getColumn(e)) == null ? void 0 : r.setFilterValue(a.target.value);
           },
           className: "w-56"
         }
       ),
-      n && /* @__PURE__ */ r(
-        T,
+      n && /* @__PURE__ */ i(
+        x,
         {
           value: u,
           onValueChange: F,
@@ -52,21 +51,20 @@ function k({
         }
       ),
       !n && g && /* @__PURE__ */ s(
-        N,
+        j,
         {
           variant: "ghost",
           onClick: () => t.resetColumnFilters(),
           className: "h-8 gap-2",
           children: [
             "Reset",
-            /* @__PURE__ */ r(C, {})
+            /* @__PURE__ */ i(C, {})
           ]
         }
-      ),
-      /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(v, { table: t }) })
+      )
     ] }),
-    n && /* @__PURE__ */ r(
-      V,
+    n && /* @__PURE__ */ i(
+      S,
       {
         filters: u,
         onValueChange: F,

package/dist/components/ui/data-table/data-table-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchAppliedFilters,\n  FilterSearchFilters,\n} from '../filter-search';\nimport { InputSearch } from '../input-search';\nimport { DataTableViewOptions } from './data-table-view-options';\n\n// Convert between TanStack's `ColumnFiltersState` (an array of `{ id, value }`,\n// keyed by column id) and `FilterSearchFilters`'s `Record<string, unknown>`\n// (keyed by the same column id). The plain text search filter (`searchKey`) is a\n// separate concern and is excluded from the per-column filter record.\nfunction filtersToRecord(\n  columnFilters: ColumnFiltersState,\n  excludeKey?: string\n): Record<string, unknown> {\n  return Object.fromEntries(\n    columnFilters\n      .filter((filter) => filter.id !== excludeKey)\n      .map((filter) => [filter.id, filter.value])\n  );\n}\n\nfunction recordToFilters(\n  record: Record<string, unknown>\n): ColumnFiltersState {\n  return Object.entries(record).map(([id, value]) => ({ id, value }));\n}\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Rendered as the leading element of the toolbar row, before the search\n   * box — e.g. a tenant/scope `Select` (matches the Figma \"FilterSearch\"\n   * anatomy, which places a scope switcher ahead of search).\n   */\n  leading?: ReactNode;\n  /** Column id to wire the search box to (client-side text filter). */\n  searchKey?: string;\n  searchPlaceholder?: string;\n  /**\n   * Filter field children rendered inside the `FilterSearchFilters` popover.\n   * Wire each field to a column via `useFilterSearchFilters()` keyed by column\n   * id. When provided, the toolbar renders the filter popover + an applied-filter\n   * chip row below it.\n   */\n  children?: ReactNode;\n  /** Label for the filters trigger button. */\n  filtersLabel?: ReactNode;\n  /** Format an applied-filter chip's label (defaults to `\"<id>: <value>\"`). */\n  getFilterChipLabel?: (key: string, value: unknown) => ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  leading,\n  searchKey,\n  searchPlaceholder = 'Filter…',\n  children,\n  filtersLabel = 'Filters',\n  getFilterChipLabel,\n}: DataTableToolbarProps<TData>) {\n  const columnFilters = table.getState().columnFilters;\n  const hasFilterFields = Boolean(children);\n  const isFiltered = columnFilters.length > 0;\n\n  const filterRecord = filtersToRecord(columnFilters, searchKey);\n\n  // Commit the per-column filter record back to TanStack, preserving the\n  // separate text-search filter (`searchKey`) untouched.\n  const handleFiltersChange = (next: Record<string, unknown>) => {\n    const searchFilter = searchKey\n      ? columnFilters.filter((filter) => filter.id === searchKey)\n      : [];\n    table.setColumnFilters([...searchFilter, ...recordToFilters(next)]);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <FilterSearch>\n        {leading}\n        {searchKey && (\n          <InputSearch\n            placeholder={searchPlaceholder}\n            aria-label={searchPlaceholder}\n            value={\n              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n            }\n            onChange={(event) =>\n              table.getColumn(searchKey)?.setFilterValue(event.target.value)\n            }\n            className=\"w-56\"\n          />\n        )}\n        {hasFilterFields && (\n          <FilterSearchFilters\n            value={filterRecord}\n            onValueChange={handleFiltersChange}\n            label={filtersLabel}\n          >\n            {children}\n          </FilterSearchFilters>\n        )}\n        {!hasFilterFields && isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.resetColumnFilters()}\n            className=\"h-8 gap-2\"\n          >\n            Reset\n            <TimesIcon />\n          </Button>\n        )}\n        <FilterSearchActions>\n          <DataTableViewOptions table={table} />\n        </FilterSearchActions>\n      </FilterSearch>\n      {hasFilterFields && (\n        <FilterSearchAppliedFilters\n          filters={filterRecord}\n          onValueChange={handleFiltersChange}\n          getFilterChipLabel={getFilterChipLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["filtersToRecord","columnFilters","excludeKey","filter","recordToFilters","record","id","value","DataTableToolbar","table","leading","searchKey","searchPlaceholder","children","filtersLabel","getFilterChipLabel","hasFilterFields","isFiltered","filterRecord","handleFiltersChange","next","searchFilter","jsxs","FilterSearch","jsx","InputSearch","_a","event","FilterSearchFilters","Button","TimesIcon","FilterSearchActions","DataTableViewOptions","FilterSearchAppliedFilters"],"mappings":";;;;;;AAkBA,SAASA,EACPC,GACAC,GACyB;AACzB,SAAO,OAAO;AAAA,IACZD,EACG,OAAO,CAACE,MAAWA,EAAO,OAAOD,CAAU,EAC3C,IAAI,CAACC,MAAW,CAACA,EAAO,IAAIA,EAAO,KAAK,CAAC;AAAA,EAAA;AAEhD;AAEA,SAASC,EACPC,GACoB;AACpB,SAAO,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,GAAIC,CAAK,OAAO,EAAE,IAAAD,GAAI,OAAAC,IAAQ;AACpE;AA0BO,SAASC,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAiC;;AAC/B,QAAMd,IAAgBQ,EAAM,SAAA,EAAW,eACjCO,IAAkB,EAAQH,GAC1BI,IAAahB,EAAc,SAAS,GAEpCiB,IAAelB,EAAgBC,GAAeU,CAAS,GAIvDQ,IAAsB,CAACC,MAAkC;AAC7D,UAAMC,IAAeV,IACjBV,EAAc,OAAO,CAACE,MAAWA,EAAO,OAAOQ,CAAS,IACxD,CAAA;AACJ,IAAAF,EAAM,iBAAiB,CAAC,GAAGY,GAAc,GAAGjB,EAAgBgB,CAAI,CAAC,CAAC;AAAA,EACpE;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAA,EACE,UAAA;AAAA,MAAAb;AAAA,MACAC,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,cAAYA;AAAA,UACZ,SACGc,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbX,KACC,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,eAAeC;AAAA,UACf,OAAOL;AAAA,UAEN,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,CAACG,KAAmBC,KACnB,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMpB,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEqB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGf,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EAAqB,OAAAvB,GAAc,EAAA,CACtC;AAAA,IAAA,GACF;AAAA,IACCO,KACC,gBAAAQ;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,SAASf;AAAA,QACT,eAAeC;AAAA,QACf,oBAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  FilterSearch,\n  FilterSearchAppliedFilters,\n  FilterSearchFilters,\n} from '../filter-search';\nimport { InputSearch } from '../input-search';\n\n// Convert between TanStack's `ColumnFiltersState` (an array of `{ id, value }`,\n// keyed by column id) and `FilterSearchFilters`'s `Record<string, unknown>`\n// (keyed by the same column id). The plain text search filter (`searchKey`) is a\n// separate concern and is excluded from the per-column filter record.\nfunction filtersToRecord(\n  columnFilters: ColumnFiltersState,\n  excludeKey?: string\n): Record<string, unknown> {\n  return Object.fromEntries(\n    columnFilters\n      .filter((filter) => filter.id !== excludeKey)\n      .map((filter) => [filter.id, filter.value])\n  );\n}\n\nfunction recordToFilters(\n  record: Record<string, unknown>\n): ColumnFiltersState {\n  return Object.entries(record).map(([id, value]) => ({ id, value }));\n}\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Rendered as the leading element of the toolbar row, before the search\n   * box — e.g. a tenant/scope `Select` (matches the Figma \"FilterSearch\"\n   * anatomy, which places a scope switcher ahead of search).\n   */\n  leading?: ReactNode;\n  /** Column id to wire the search box to (client-side text filter). */\n  searchKey?: string;\n  searchPlaceholder?: string;\n  /**\n   * Filter field children rendered inside the `FilterSearchFilters` popover.\n   * Wire each field to a column via `useFilterSearchFilters()` keyed by column\n   * id. When provided, the toolbar renders the filter popover + an applied-filter\n   * chip row below it.\n   */\n  children?: ReactNode;\n  /** Label for the filters trigger button. */\n  filtersLabel?: ReactNode;\n  /** Format an applied-filter chip's label (defaults to `\"<id>: <value>\"`). */\n  getFilterChipLabel?: (key: string, value: unknown) => ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  leading,\n  searchKey,\n  searchPlaceholder = 'Filter…',\n  children,\n  filtersLabel = 'Filters',\n  getFilterChipLabel,\n}: DataTableToolbarProps<TData>) {\n  const columnFilters = table.getState().columnFilters;\n  const hasFilterFields = Boolean(children);\n  const isFiltered = columnFilters.length > 0;\n\n  const filterRecord = filtersToRecord(columnFilters, searchKey);\n\n  // Commit the per-column filter record back to TanStack, preserving the\n  // separate text-search filter (`searchKey`) untouched.\n  const handleFiltersChange = (next: Record<string, unknown>) => {\n    const searchFilter = searchKey\n      ? columnFilters.filter((filter) => filter.id === searchKey)\n      : [];\n    table.setColumnFilters([...searchFilter, ...recordToFilters(next)]);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <FilterSearch>\n        {leading}\n        {searchKey && (\n          <InputSearch\n            placeholder={searchPlaceholder}\n            aria-label={searchPlaceholder}\n            value={\n              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n            }\n            onChange={(event) =>\n              table.getColumn(searchKey)?.setFilterValue(event.target.value)\n            }\n            className=\"w-56\"\n          />\n        )}\n        {hasFilterFields && (\n          <FilterSearchFilters\n            value={filterRecord}\n            onValueChange={handleFiltersChange}\n            label={filtersLabel}\n          >\n            {children}\n          </FilterSearchFilters>\n        )}\n        {!hasFilterFields && isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.resetColumnFilters()}\n            className=\"h-8 gap-2\"\n          >\n            Reset\n            <TimesIcon />\n          </Button>\n        )}\n      </FilterSearch>\n      {hasFilterFields && (\n        <FilterSearchAppliedFilters\n          filters={filterRecord}\n          onValueChange={handleFiltersChange}\n          getFilterChipLabel={getFilterChipLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["filtersToRecord","columnFilters","excludeKey","filter","recordToFilters","record","id","value","DataTableToolbar","table","leading","searchKey","searchPlaceholder","children","filtersLabel","getFilterChipLabel","hasFilterFields","isFiltered","filterRecord","handleFiltersChange","next","searchFilter","jsxs","FilterSearch","jsx","InputSearch","_a","event","FilterSearchFilters","Button","TimesIcon","FilterSearchAppliedFilters"],"mappings":";;;;;AAgBA,SAASA,EACPC,GACAC,GACyB;AACzB,SAAO,OAAO;AAAA,IACZD,EACG,OAAO,CAACE,MAAWA,EAAO,OAAOD,CAAU,EAC3C,IAAI,CAACC,MAAW,CAACA,EAAO,IAAIA,EAAO,KAAK,CAAC;AAAA,EAAA;AAEhD;AAEA,SAASC,EACPC,GACoB;AACpB,SAAO,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,GAAIC,CAAK,OAAO,EAAE,IAAAD,GAAI,OAAAC,IAAQ;AACpE;AA0BO,SAASC,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAiC;;AAC/B,QAAMd,IAAgBQ,EAAM,SAAA,EAAW,eACjCO,IAAkB,EAAQH,GAC1BI,IAAahB,EAAc,SAAS,GAEpCiB,IAAelB,EAAgBC,GAAeU,CAAS,GAIvDQ,IAAsB,CAACC,MAAkC;AAC7D,UAAMC,IAAeV,IACjBV,EAAc,OAAO,CAACE,MAAWA,EAAO,OAAOQ,CAAS,IACxD,CAAA;AACJ,IAAAF,EAAM,iBAAiB,CAAC,GAAGY,GAAc,GAAGjB,EAAgBgB,CAAI,CAAC,CAAC;AAAA,EACpE;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAA,EACE,UAAA;AAAA,MAAAb;AAAA,MACAC,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,cAAYA;AAAA,UACZ,SACGc,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbX,KACC,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,eAAeC;AAAA,UACf,OAAOL;AAAA,UAEN,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,CAACG,KAAmBC,KACnB,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMpB,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEqB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GAEJ;AAAA,IACCd,KACC,gBAAAQ;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,eAAeC;AAAA,QACf,oBAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/components/ui/data-table/data-table-view-options.js

@@ -1,27 +1,29 @@
-import { jsx as s } from "react/jsx-runtime";
-import { TableViewOptions as n } from "../table/table-view-options.js";
-function r({
-  table: t
+import { jsx as n } from "react/jsx-runtime";
+import { TableViewOptions as l } from "../table/table-view-options.js";
+function d({
+  table: t,
+  ...o
 }) {
-  const o = t.getAllColumns().filter(
+  const s = t.getAllColumns().filter(
     (e) => typeof e.accessorFn < "u" && e.getCanHide()
   ).map((e) => ({
     id: e.id,
     label: e.id,
     hidden: !e.getIsVisible()
   }));
-  return /* @__PURE__ */ s(
-    n,
+  return /* @__PURE__ */ n(
+    l,
     {
-      columns: o,
+      columns: s,
       onToggle: (e) => {
         const i = t.getColumn(e);
         i == null || i.toggleVisibility(!i.getIsVisible());
-      }
+      },
+      ...o
     }
   );
 }
 export {
-  r as DataTableViewOptions
+  d as DataTableViewOptions
 };
 //# sourceMappingURL=data-table-view-options.js.map

package/dist/components/ui/data-table/data-table-view-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions } from '../table';\n\ninterface DataTableViewOptionsProps<TData> {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label: column.id,\n      hidden: !column.getIsVisible(),\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n    />\n  );\n}\n"],"names":["DataTableViewOptions","table","columns","column","jsx","TableViewOptions","id"],"mappings":";;AAWO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,QAAMC,IAAUD,EACb,cAAA,EACA;AAAA,IACC,CAACE,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,EAAW,EAEjE,IAAI,CAACA,OAAY;AAAA,IAChB,IAAIA,EAAO;AAAA,IACX,OAAOA,EAAO;AAAA,IACd,QAAQ,CAACA,EAAO,aAAA;AAAA,EAAa,EAC7B;AAEJ,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,UAAU,CAACI,MAAO;AAChB,cAAMH,IAASF,EAAM,UAAUK,CAAE;AACjC,QAAAH,KAAA,QAAAA,EAAQ,iBAAiB,CAACA,EAAO,aAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions, type TableViewOptionsProps } from '../table';\n\ninterface DataTableViewOptionsProps<TData>\n  extends Pick<\n    TableViewOptionsProps,\n    'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'\n  > {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n  ...triggerProps\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label: column.id,\n      hidden: !column.getIsVisible(),\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n      {...triggerProps}\n    />\n  );\n}\n"],"names":["DataTableViewOptions","table","triggerProps","columns","column","jsx","TableViewOptions","id"],"mappings":";;AAeO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,GAAGC;AACL,GAAqC;AACnC,QAAMC,IAAUF,EACb,cAAA,EACA;AAAA,IACC,CAACG,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,EAAW,EAEjE,IAAI,CAACA,OAAY;AAAA,IAChB,IAAIA,EAAO;AAAA,IACX,OAAOA,EAAO;AAAA,IACd,QAAQ,CAACA,EAAO,aAAA;AAAA,EAAa,EAC7B;AAEJ,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,UAAU,CAACI,MAAO;AAChB,cAAMH,IAASH,EAAM,UAAUM,CAAE;AACjC,QAAAH,KAAA,QAAAA,EAAQ,iBAAiB,CAACA,EAAO,aAAA;AAAA,MACnC;AAAA,MACC,GAAGF;AAAA,IAAA;AAAA,EAAA;AAGV;"}