npm - @acronis-platform/ui-react - Versions diffs - 0.55.0 → 0.56.1 - Mend

@acronis-platform/ui-react 0.55.0 → 0.56.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (523) hide show

package/dist/components/ui/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n CheckIcon,\n MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`-box-color-`), border (`-box-border-color-`), and glyph (`-icon-color-`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n // geometry + focus ring\n // `align-middle` keeps the box vertically centered when it sits inline next to\n // text (e.g. in a table cell) rather than defaulting to the text baseline.\n 'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n // unchecked (base): idle / hover / active\n 'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n 'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n 'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n // checked: idle / hover / active\n 'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n 'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n 'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n // indeterminate: idle / hover / active\n 'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n 'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n 'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n // disabled (unchecked base + per-state overrides)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n 'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n 'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** Optional label rendered beside the box; names the control. /\n label?: React.ReactNode;\n /* Optional secondary description rendered under the label. */\n description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n const reactId = React.useId();\n const labelId = label != null ? `${reactId}-label` : undefined;\n const descriptionId = description != null ? `${reactId}-description` : undefined;\n const hasContent = label != null \|\| description != null;\n\n const box = (\n <CheckboxPrimitive.Root\n ref={ref}\n indeterminate={indeterminate}\n aria-labelledby={labelId}\n aria-describedby={descriptionId}\n className={cn(\n boxClasses,\n hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (!hasContent) return box;\n\n return (\n <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n {box}\n <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n {label != null && (\n <span\n id={labelId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n >\n {label}\n </span>\n )}\n {description != null && (\n <span\n id={descriptionId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n >\n {description}\n </span>\n )}\n </span>\n </label>\n );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,EAIjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n CheckIcon,\n MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`-box-color-`), border (`-box-border-color-`), and glyph (`-icon-color-`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n // geometry + focus ring\n // `align-middle` keeps the box vertically centered when it sits inline next to\n // text (e.g. in a table cell) rather than defaulting to the text baseline.\n 'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n // unchecked (base): idle / hover / active\n 'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n 'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n 'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n // checked: idle / hover / active\n 'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n 'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n 'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n // indeterminate: idle / hover / active\n 'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n 'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n 'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n // disabled (unchecked base + per-state overrides)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n 'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n 'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** Optional label rendered beside the box; names the control. /\n label?: React.ReactNode;\n /* Optional secondary description rendered under the label. */\n description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n const reactId = React.useId();\n const labelId = label != null ? `${reactId}-label` : undefined;\n const descriptionId = description != null ? `${reactId}-description` : undefined;\n const hasContent = label != null \|\| description != null;\n\n const box = (\n <CheckboxPrimitive.Root\n ref={ref}\n indeterminate={indeterminate}\n aria-labelledby={labelId}\n aria-describedby={descriptionId}\n className={cn(\n boxClasses,\n hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (!hasContent) return box;\n\n return (\n <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n {box}\n <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n {label != null && (\n <span\n id={labelId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n >\n {label}\n </span>\n )}\n {description != null && (\n <span\n id={descriptionId}\n className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n >\n {description}\n </span>\n )}\n </span>\n </label>\n );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,EAIjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}

package/dist/components/ui/data-table/data-table-column-header.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as v } from "@acronis-platform/icons-react/stroke-mono";
+import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as s } from "../../../lib/utils.js";
 function m({
   column: r,
@@ -19,13 +19,13 @@ function m({
       className: s(
         // -ms-2 px-2 keeps the label flush at the cell padding while giving the
         // toggle a comfortable click/hover target.
-        "-ms-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold 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-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
+        "-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold 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-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
         t
       ),
       ...a,
       children: [
         /* @__PURE__ */ e("span", { children: o }),
-        i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(v, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
+        i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(u, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
       ]
     }
   );

package/dist/components/ui/data-table/data-table-column-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n ArrowDownIcon,\n ArrowsDownUpIcon,\n ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n const sorted = column.getIsSorted();\n\n return (\n <button\n type=\"button\"\n onClick={() => column.toggleSorting()}\n aria-label={`Sort by ${title}`}\n className={cn(\n // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n // toggle a comfortable click/hover target.\n '-ms-2 inline-flex h-8 select-none items-center gap-2 rounded px-2 text-sm font-semibold 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-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n <span>{title}</span>\n {sorted === 'asc' ? (\n <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : sorted === 'desc' ? (\n <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : (\n <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n )}\n </button>\n );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}
1	+ {"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n ArrowDownIcon,\n ArrowsDownUpIcon,\n ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n column: Column<TData, TValue>;\n title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n title,\n className,\n ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n if (!column.getCanSort()) {\n return <div className={cn(className)}>{title}</div>;\n }\n\n const sorted = column.getIsSorted();\n\n return (\n <button\n type=\"button\"\n onClick={() => column.toggleSorting()}\n aria-label={`Sort by ${title}`}\n className={cn(\n // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n // toggle a comfortable click/hover target.\n '-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold 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-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n <span>{title}</span>\n {sorted === 'asc' ? (\n <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : sorted === 'desc' ? (\n <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n ) : (\n <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n )}\n </button>\n );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}

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

@@ -0,0 +1,39 @@
+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) {
+  if (!e.getCanExpand()) return null;
+  const r = e.getIsExpanded();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      onClick: e.getToggleExpandedHandler(),
+      "aria-label": r ? "Collapse row" : "Expand row",
+      "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
+      ),
+      ...n,
+      children: /* @__PURE__ */ a(
+        s,
+        {
+          className: o(
+            "transition-transform",
+            !r && "ltr:-rotate-90 rtl:rotate-90"
+          )
+        }
+      )
+    }
+  );
+}
+const f = l.forwardRef(
+  c
+);
+export {
+  f as DataTableExpandTrigger
+};
+//# sourceMappingURL=data-table-expand-trigger.js.map

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

@@ -0,0 +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;"}

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

@@ -1,46 +1,81 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { TimesIcon as m } from "@acronis-platform/icons-react/stroke-mono";
-import { DataTableViewOptions as c } from "./data-table-view-options.js";
-import { InputText as p } from "../input-text/input-text.js";
-import { Button as u } from "../button/button.js";
-function F({
-  table: e,
-  searchKey: t,
-  searchPlaceholder: n = "Filter…"
+import { jsxs as s, jsx as r } 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) {
+  return Object.fromEntries(
+    t.filter((e) => e.id !== l).map((e) => [e.id, e.value])
+  );
+}
+function R(t) {
+  return Object.entries(t).map(([l, e]) => ({ id: l, value: e }));
+}
+function k({
+  table: t,
+  leading: l,
+  searchKey: e,
+  searchPlaceholder: c = "Filter…",
+  children: m,
+  filtersLabel: p = "Filters",
+  getFilterChipLabel: d
 }) {
-  var i;
-  const s = e.getState().columnFilters.length > 0;
-  return /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ l("div", { className: "flex flex-1 items-center gap-2", children: [
-      t && /* @__PURE__ */ r(
-        p,
+  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)]);
+  };
+  return /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ s(S, { children: [
+      l,
+      e && /* @__PURE__ */ r(
+        j,
         {
-          placeholder: n,
-          value: ((i = e.getColumn(t)) == null ? void 0 : i.getFilterValue()) ?? "",
+          placeholder: c,
+          "aria-label": c,
+          value: ((f = t.getColumn(e)) == null ? void 0 : f.getFilterValue()) ?? "",
           onChange: (a) => {
-            var o;
-            return (o = e.getColumn(t)) == null ? void 0 : o.setFilterValue(a.target.value);
+            var i;
+            return (i = t.getColumn(e)) == null ? void 0 : i.setFilterValue(a.target.value);
           },
-          className: "h-8 w-[150px] lg:w-[250px]"
+          className: "w-56"
+        }
+      ),
+      n && /* @__PURE__ */ r(
+        T,
+        {
+          value: u,
+          onValueChange: F,
+          label: p,
+          children: m
         }
       ),
-      s && /* @__PURE__ */ l(
-        u,
+      !n && g && /* @__PURE__ */ s(
+        N,
         {
           variant: "ghost",
-          onClick: () => e.resetColumnFilters(),
+          onClick: () => t.resetColumnFilters(),
           className: "h-8 gap-2",
           children: [
             "Reset",
-            /* @__PURE__ */ r(m, {})
+            /* @__PURE__ */ r(C, {})
           ]
         }
-      )
+      ),
+      /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(v, { table: t }) })
     ] }),
-    /* @__PURE__ */ r(c, { table: e })
+    n && /* @__PURE__ */ r(
+      V,
+      {
+        filters: u,
+        onValueChange: F,
+        getFilterChipLabel: d
+      }
+    )
   ] });
 }
 export {
-  F as DataTableToolbar
+  k as DataTableToolbar
 };
 //# sourceMappingURL=data-table-toolbar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { ~~InputText~~ } from '../input-~~text~~';\nimport { DataTableViewOptions } from './data-table-view-options';\n\ninterface DataTableToolbarProps<TData> {\n table: Table<TData>;\n /** Column id to wire the search box to (client-side text filter). */\n searchKey?: string;\n searchPlaceholder?: string;\n}\n\nexport function DataTableToolbar<TData>({\n table,\n searchKey,\n searchPlaceholder = 'Filter…',\n}: DataTableToolbarProps<TData>) {\n const ~~isFiltered~~ = table.getState().columnFilters.length > 0;\n\n ~~return~~ (\n ~~<div~~ ~~className=\"flex~~ ~~items~~-~~center~~ ~~justify~~-~~between~~\~~">\~~n <div className=\"flex flex-1 ~~items-center~~ gap-2\">\n {searchKey && (\n <~~InputText~~\n placeholder={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=\"~~h-8~~ w-~~[150px] lg:w-[250px]~~\"\n />\n )}\n {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 ~~</div~~>\n <DataTableViewOptions table={table} />\n </div>\n );\n}\n"],"names":["DataTableToolbar","table","searchKey","searchPlaceholder","isFiltered","jsxs","jsx","~~InputText~~","_a","event","Button","TimesIcon","DataTableViewOptions"],"mappings":"~~;;;;;AAcO~~,SAASA,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;~~AACtB~~,GAAiC;;AAC/B,~~QAAMC~~,~~IAAaH~~,EAAM,SAAA,EAAW,~~cAAc~~,SAAS;~~AAE3D~~,SACE,~~gBAAAI~~,EAAC,OAAA,EAAI,WAAU,~~qCACb~~,UAAA;AAAA,IAAA,gBAAAA,~~EAAC~~,~~OAAA~~,~~EAAI~~,~~WAAU,kCACZ,~~UAAA;AAAA,~~MAAAH~~,KACC,~~gBAAAI~~;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,~~aAAaJ~~;AAAA,UACb,~~SACGK~~,~~IAAAP~~,EAAM,~~UAAUC~~,CAAS,MAAzB,~~gBAAAM~~,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,~~IAAAP~~,EAAM,~~UAAUC~~,CAAS,MAAzB,~~gBAAAM~~,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,~~MAGbL~~,KACC,~~gBAAAC~~;AAAA,~~QAACK~~;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,~~MAAMT~~,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,~~8BAEEU~~,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,~~IACb~~,~~GAEJ~~;AAAA,~~IACA~~,~~gBAAAL~~,~~EAACM~~,~~KAAqB~~,~~OAAAX~~,~~EAAA~~,~~CAAc~~;AAAA,~~EAAA~~,~~GACtC~~;AAEJ;"}
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;"}

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

@@ -1,40 +1,27 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { CogIcon as t } from "@acronis-platform/icons-react/stroke-mono";
-import { DropdownMenu as a, DropdownMenuTrigger as d, DropdownMenuContent as l, DropdownMenuLabel as s, DropdownMenuSeparator as p, DropdownMenuCheckboxItem as c } from "../dropdown-menu/dropdown-menu.js";
-import { Button as g } from "../button/button.js";
-function w({
-  table: r
+import { jsx as s } from "react/jsx-runtime";
+import { TableViewOptions as n } from "../table/table-view-options.js";
+function r({
+  table: t
 }) {
-  return /* @__PURE__ */ o(a, { children: [
-    /* @__PURE__ */ o(
-      d,
-      {
-        render: /* @__PURE__ */ n(g, { variant: "secondary", className: "ms-auto hidden h-8 gap-2 lg:flex" }),
-        children: [
-          /* @__PURE__ */ n(t, {}),
-          "View"
-        ]
+  const o = 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,
+    {
+      columns: o,
+      onToggle: (e) => {
+        const i = t.getColumn(e);
+        i == null || i.toggleVisibility(!i.getIsVisible());
       }
-    ),
-    /* @__PURE__ */ o(l, { align: "end", className: "w-[150px]", children: [
-      /* @__PURE__ */ n(s, { children: "Toggle columns" }),
-      /* @__PURE__ */ n(p, {}),
-      r.getAllColumns().filter(
-        (e) => typeof e.accessorFn < "u" && e.getCanHide()
-      ).map((e) => /* @__PURE__ */ n(
-        c,
-        {
-          className: "capitalize",
-          checked: e.getIsVisible(),
-          onCheckedChange: (i) => e.toggleVisibility(!!i),
-          children: e.id
-        },
-        e.id
-      ))
-    ] })
-  ] });
+    }
+  );
 }
 export {
-  w as DataTableViewOptions
+  r as DataTableViewOptions
 };
 //# sourceMappingURL=data-table-view-options.js.map

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

	@@ -1 +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';\~~nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\~~n\nimport { ~~Button~~ } from '../~~button~~';\~~nimport {\~~n ~~DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../dropdown-menu';\n~~\ninterface DataTableViewOptionsProps<TData> {\n table: Table<TData>;\n}\n\nexport function DataTableViewOptions<TData>({\n table,\n}: DataTableViewOptionsProps<TData>) {\n ~~return~~ ~~(\n <DropdownMenu>\n <DropdownMenuTrigger\n render~~=~~{\n <Button~~ variant=\"secondary\" className=\"ms-auto hidden h-8 gap-2 lg:flex\" />\n }\n >\n <CogIcon />\n View\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\n )\n .map((column) => (\n ~~<DropdownMenuCheckboxItem\~~n ~~key={~~column.id}\n ~~className=\"capitalize~~\"\n ~~checked~~={~~column.getIsVisible()~~}\n ~~onCheckedChange~~={(~~value~~) => column.~~toggleVisibility~~(~~!!value~~)}\n ~~>\n {~~column.~~id}\n </DropdownMenuCheckboxItem>\n~~ ))}\n ~~</DropdownMenuContent>\n~~ ~~</DropdownMenu>\~~n );\n}\n"],"names":["DataTableViewOptions","table","~~DropdownMenu~~","~~jsxs~~","~~DropdownMenuTrigger","~~jsx","~~Button~~","~~CogIcon~~"~~,"DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value"~~],"mappings":"~~;;;;AAiBO~~,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,~~2BACGC~~,~~GAAA~~,~~EACC~~,~~UAAA;AAAA~~,~~IAAA,gBAAAC~~;AAAA,~~MAACC;AAAA~~,~~MAAA;AAAA~~,~~QACC~~,~~QACE~~,~~gBAAAC~~,~~EAACC~~,~~GAAA~~,EAAO,~~SAAQ~~,~~aAAY~~,~~WAAU~~,~~oCAAmC;AAAA~~,~~QAG3E~~,~~UAAA~~;AAAA,~~UAAA~~,~~gBAAAD~~,~~EAACE,GAAA,EAAQ~~;AAAA,~~UAAE;AAAA~~,~~QAAA;AAAA~~,~~MAAA~~;AAAA,~~IAAA;AAAA~~,~~IAGb~~,~~gBAAAJ~~,~~EAACK~~,~~GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA~~;AAAA,~~MAAA~~,~~gBAAAH~~,~~EAACI~~,~~KAAkB,UAAA,iBAAA,CAAc~~;AAAA,~~wBAChCC,GAAA,EAAsB~~;AAAA,~~MACtBT,EACE,gBACA~~;AAAA,~~QACC,CAACU,~~MACC,~~OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA~~;AAAA,~~MAAW~~,~~EAEjE~~,~~IAAI~~,~~CAACA,MACJ,gBAAAN~~;~~AAAA~~,~~QAACO;AAAA~~,~~QAAA;AAAA~~,~~UAEC~~,~~WAAU;AAAA~~,~~UACV,SAASD,EAAO,aAAA~~;~~AAAA~~,~~UAChB~~,~~iBAAiB~~,~~CAACE~~,~~MAAUF~~,~~EAAO,~~iBAAiB,~~CAAC~~,~~CAACE,CAAK;AAAA,UAE1D,UAAAF,~~EAAO~~;AAAA~~,~~QAAA~~;AAAA,~~QALHA,EAAO~~;AAAA,~~MAAA,CAOf;AAAA,~~IAAA~~,EAAA,CACL~~;AAAA,EAAA~~,GACF~~;~~AAEJ~~;"}
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;"}