@acronis-platform/ui-react 0.62.0 → 2.0.0

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;"}