@drivenets/design-system 0.12.0 → 0.13.0

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 (88) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.cjs +1652 -455
  3. package/dist/index.d.cts +1226 -989
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +1226 -989
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1643 -456
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +31 -31
  11. package/src/components/ds-catalog-layout/catalog-layout-empty-illustration.tsx +57 -0
  12. package/src/components/ds-catalog-layout/ds-catalog-layout.context.ts +19 -0
  13. package/src/components/ds-catalog-layout/ds-catalog-layout.module.scss +167 -0
  14. package/src/components/ds-catalog-layout/ds-catalog-layout.tsx +130 -0
  15. package/src/components/ds-catalog-layout/ds-catalog-layout.types.ts +62 -0
  16. package/src/components/ds-catalog-layout/index.ts +9 -0
  17. package/src/components/ds-date-input/ds-date-input.utils.ts +2 -2
  18. package/src/components/ds-drawer/ds-drawer.tsx +2 -0
  19. package/src/components/ds-form-control/ds-form-control.tsx +14 -11
  20. package/src/components/ds-form-control/ds-form-control.types.ts +4 -0
  21. package/src/components/ds-grid/ds-grid.tsx +1 -2
  22. package/src/components/ds-modal/ds-modal.tsx +3 -0
  23. package/src/components/ds-smart-tabs/ds-smart-tabs.module.scss +1 -0
  24. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.module.scss +21 -2
  25. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx +14 -11
  26. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.types.ts +1 -6
  27. package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss +2 -2
  28. package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss +2 -0
  29. package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx +42 -11
  30. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +24 -4
  31. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +22 -1
  32. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +22 -0
  33. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +1 -0
  34. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +19 -0
  35. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +2 -1
  36. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.types.ts +1 -1
  37. package/src/components/ds-table/components/edit/cell-editors/cell-editors.module.scss +3 -0
  38. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx +27 -0
  39. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx +50 -0
  40. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx +51 -0
  41. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx +36 -0
  42. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx +50 -0
  43. package/src/components/ds-table/components/edit/cell-editors/index.ts +14 -0
  44. package/src/components/ds-table/components/edit/cell-editors/table-edit-form-control.tsx +31 -0
  45. package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss +28 -0
  46. package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx +39 -0
  47. package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.types.ts +7 -0
  48. package/src/components/ds-table/components/edit/ds-table-editable-cell/index.ts +2 -0
  49. package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.module.scss +48 -0
  50. package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx +76 -0
  51. package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.types.ts +5 -0
  52. package/src/components/ds-table/components/edit/ds-table-editing-cell/index.ts +2 -0
  53. package/src/components/ds-table/context/ds-table-context.ts +79 -1
  54. package/src/components/ds-table/ds-table-column.types.ts +12 -0
  55. package/src/components/ds-table/ds-table.module.scss +100 -10
  56. package/src/components/ds-table/ds-table.tsx +18 -19
  57. package/src/components/ds-table/ds-table.types.ts +52 -0
  58. package/src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx +24 -40
  59. package/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx +10 -31
  60. package/src/components/ds-table/filters/adapters/create-filter-adapter.ts +6 -98
  61. package/src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.module.scss +36 -0
  62. package/src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.tsx +92 -13
  63. package/src/components/ds-table/filters/components/checkbox-filter/index.ts +1 -1
  64. package/src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.module.scss +42 -0
  65. package/src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.tsx +89 -0
  66. package/src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.types.ts +25 -0
  67. package/src/components/ds-table/filters/components/column-filter-popover/index.ts +5 -0
  68. package/src/components/ds-table/filters/hooks/use-table-filters.ts +113 -78
  69. package/src/components/ds-table/filters/index.ts +2 -44
  70. package/src/components/ds-table/filters/types/column-meta.augmentation.ts +19 -0
  71. package/src/components/ds-table/filters/types/filter-adapter.types.ts +48 -81
  72. package/src/components/ds-table/hooks/use-cell-editor.ts +81 -0
  73. package/src/components/ds-table/index.ts +29 -0
  74. package/src/components/ds-table/utils/column-size.ts +9 -8
  75. package/src/components/ds-tag/ds-tag.tsx +2 -2
  76. package/src/components/ds-workspace-layout/ds-workspace-layout.context.ts +19 -0
  77. package/src/components/ds-workspace-layout/ds-workspace-layout.module.scss +166 -0
  78. package/src/components/ds-workspace-layout/ds-workspace-layout.tsx +135 -0
  79. package/src/components/ds-workspace-layout/ds-workspace-layout.types.ts +52 -0
  80. package/src/components/ds-workspace-layout/index.ts +11 -0
  81. package/src/index.ts +2 -1
  82. package/src/styles/_scrollbars.scss +37 -0
  83. package/src/utils/restore-document-body-modal-styles.ts +44 -0
  84. package/src/utils/use-ark-dialog-body-lock-cleanup.ts +36 -0
  85. package/src/components/ds-workspace/ds-workspace.module.scss +0 -55
  86. package/src/components/ds-workspace/ds-workspace.tsx +0 -37
  87. package/src/components/ds-workspace/ds-workspace.types.ts +0 -17
  88. package/src/components/ds-workspace/index.ts +0 -8
package/dist/index.cjs CHANGED
@@ -3225,7 +3225,7 @@ const Title$2 = (t0) => {
3225
3225
  } else t2 = $[5];
3226
3226
  return t2;
3227
3227
  };
3228
- const Body$3 = (t0) => {
3228
+ const Body$5 = (t0) => {
3229
3229
  const $ = (0, react_compiler_runtime.c)(6);
3230
3230
  const { style, className, children } = t0;
3231
3231
  let t1;
@@ -3273,7 +3273,7 @@ const Actions$3 = (t0) => {
3273
3273
  return t2;
3274
3274
  };
3275
3275
  DsAlertBanner.Title = Title$2;
3276
- DsAlertBanner.Body = Body$3;
3276
+ DsAlertBanner.Body = Body$5;
3277
3277
  DsAlertBanner.Actions = Actions$3;
3278
3278
  //#endregion
3279
3279
  //#region src/components/ds-alert-banner/ds-alert-banner.types.ts
@@ -4082,7 +4082,7 @@ const Trigger = _ark_ui_react_menu.Menu.Trigger;
4082
4082
  /**
4083
4083
  * Content component - wraps the dropdown content
4084
4084
  */
4085
- const Content$1 = (t0) => {
4085
+ const Content$2 = (t0) => {
4086
4086
  const $ = (0, react_compiler_runtime.c)(9);
4087
4087
  const { disablePortal: t1, children, className, style } = t0;
4088
4088
  const Wrapper = (t1 === void 0 ? false : t1) ? react.Fragment : _ark_ui_react_portal.Portal;
@@ -4187,7 +4187,7 @@ const ItemIndicator = (t0) => {
4187
4187
  /**
4188
4188
  * Header component - sticky header container for search, filters, or other controls
4189
4189
  */
4190
- const Header$4 = (t0) => {
4190
+ const Header$5 = (t0) => {
4191
4191
  const $ = (0, react_compiler_runtime.c)(6);
4192
4192
  const { children, className, style } = t0;
4193
4193
  let t1;
@@ -4663,11 +4663,11 @@ const DsDropdownMenuLegacy = (t0) => {
4663
4663
  const DsDropdownMenu = {
4664
4664
  Root: Root$3,
4665
4665
  Trigger,
4666
- Content: Content$1,
4666
+ Content: Content$2,
4667
4667
  Item: Item$2,
4668
4668
  ItemIndicator,
4669
4669
  TriggerItem,
4670
- Header: Header$4,
4670
+ Header: Header$5,
4671
4671
  Actions: Actions$2,
4672
4672
  ItemGroup,
4673
4673
  ItemGroupLabel,
@@ -5505,7 +5505,7 @@ const Root$2 = (t0) => {
5505
5505
  * Use with DsCard.Title and DsCard.Extra for standard layout,
5506
5506
  * or provide custom children for full flexibility.
5507
5507
  */
5508
- const Header$3 = (t0) => {
5508
+ const Header$4 = (t0) => {
5509
5509
  const $ = (0, react_compiler_runtime.c)(12);
5510
5510
  let children;
5511
5511
  let className;
@@ -5549,7 +5549,7 @@ const Header$3 = (t0) => {
5549
5549
  /**
5550
5550
  * Card body - main content area.
5551
5551
  */
5552
- const Body$2 = (t0) => {
5552
+ const Body$4 = (t0) => {
5553
5553
  const $ = (0, react_compiler_runtime.c)(12);
5554
5554
  let children;
5555
5555
  let className;
@@ -5636,8 +5636,8 @@ const Footer$3 = (t0) => {
5636
5636
  };
5637
5637
  const DsCard = {
5638
5638
  Root: Root$2,
5639
- Header: Header$3,
5640
- Body: Body$2,
5639
+ Header: Header$4,
5640
+ Body: Body$4,
5641
5641
  Footer: Footer$3
5642
5642
  };
5643
5643
  //#endregion
@@ -5648,190 +5648,597 @@ const cardSizes = [
5648
5648
  "large"
5649
5649
  ];
5650
5650
  //#endregion
5651
- //#region src/components/ds-checkbox/ds-checkbox.module.scss
5652
- var ds_checkbox_module_default = {
5653
- "control": "-9VV7a_control",
5654
- "hiddenInput": "-9VV7a_hiddenInput",
5655
- "indicator": "-9VV7a_indicator",
5656
- "label": "-9VV7a_label",
5657
- "labelColumn": "-9VV7a_labelColumn",
5658
- "labelInfo": "-9VV7a_labelInfo",
5659
- "root": "-9VV7a_root",
5660
- "warning": "-9VV7a_warning"
5651
+ //#region src/components/ds-catalog-layout/ds-catalog-layout.module.scss
5652
+ var ds_catalog_layout_module_default = {
5653
+ "body": "ub6JXq_body",
5654
+ "content": "ub6JXq_content",
5655
+ "contentHeader": "ub6JXq_contentHeader",
5656
+ "contentHeaderActions": "ub6JXq_contentHeaderActions",
5657
+ "contentHeaderItem": "ub6JXq_contentHeaderItem",
5658
+ "contentHeaderTitle": "ub6JXq_contentHeaderTitle",
5659
+ "contentHeaderTitleRow": "ub6JXq_contentHeaderTitleRow",
5660
+ "contentWithSideMenu": "ub6JXq_contentWithSideMenu",
5661
+ "fillParent": "ub6JXq_fillParent",
5662
+ "header": "ub6JXq_header",
5663
+ "root": "ub6JXq_root",
5664
+ "sideMenu": "ub6JXq_sideMenu",
5665
+ "sideMenuPanel": "ub6JXq_sideMenuPanel",
5666
+ "sideMenuPinButton": "ub6JXq_sideMenuPinButton"
5667
+ };
5668
+ //#endregion
5669
+ //#region src/components/ds-catalog-layout/ds-catalog-layout.context.ts
5670
+ const DsCatalogLayoutContext = (0, react.createContext)(null);
5671
+ const useDsCatalogLayoutContext = () => {
5672
+ const context = (0, react.useContext)(DsCatalogLayoutContext);
5673
+ if (!context) throw new Error("DsCatalogLayout compound components must be used within DsCatalogLayout");
5674
+ return context;
5661
5675
  };
5662
5676
  //#endregion
5663
- //#region src/components/ds-checkbox/ds-checkbox.tsx
5664
- /**
5665
- * Design system Checkbox component
5666
- */
5667
- const DsCheckbox = (t0) => {
5668
- const $ = (0, react_compiler_runtime.c)(25);
5677
+ //#region src/components/ds-catalog-layout/ds-catalog-layout.tsx
5678
+ const DEFAULT_LOCALE$1 = Object.freeze({
5679
+ pinButtonLabel: "Pin side menu",
5680
+ unpinButtonLabel: "Unpin side menu"
5681
+ });
5682
+ const DsCatalogLayout = (t0) => {
5683
+ const $ = (0, react_compiler_runtime.c)(17);
5669
5684
  let className;
5670
- let label;
5671
- let labelInfo;
5672
- let onCheckedChange;
5673
- let props;
5685
+ let rest;
5674
5686
  let t1;
5675
- let value;
5676
5687
  if ($[0] !== t0) {
5677
- ({variant: t1, label, labelInfo, className, onCheckedChange, value, ...props} = t0);
5688
+ ({className, fillParent: t1, ...rest} = t0);
5678
5689
  $[0] = t0;
5679
5690
  $[1] = className;
5680
- $[2] = label;
5681
- $[3] = labelInfo;
5682
- $[4] = onCheckedChange;
5683
- $[5] = props;
5684
- $[6] = t1;
5685
- $[7] = value;
5691
+ $[2] = rest;
5692
+ $[3] = t1;
5686
5693
  } else {
5687
5694
  className = $[1];
5688
- label = $[2];
5689
- labelInfo = $[3];
5690
- onCheckedChange = $[4];
5691
- props = $[5];
5692
- t1 = $[6];
5693
- value = $[7];
5695
+ rest = $[2];
5696
+ t1 = $[3];
5694
5697
  }
5695
- const t2 = (t1 === void 0 ? "default" : t1) === "warning" && ds_checkbox_module_default.warning;
5698
+ const fillParent = t1 === void 0 ? false : t1;
5699
+ const [hasSideMenu, setHasSideMenu] = (0, react.useState)(false);
5700
+ let t2;
5701
+ if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
5702
+ t2 = () => setHasSideMenu(true);
5703
+ $[4] = t2;
5704
+ } else t2 = $[4];
5705
+ const registerSideMenu = t2;
5696
5706
  let t3;
5697
- if ($[8] !== className || $[9] !== t2) {
5698
- t3 = (0, classnames.default)(ds_checkbox_module_default.root, t2, className);
5699
- $[8] = className;
5700
- $[9] = t2;
5701
- $[10] = t3;
5702
- } else t3 = $[10];
5707
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
5708
+ t3 = () => setHasSideMenu(false);
5709
+ $[5] = t3;
5710
+ } else t3 = $[5];
5711
+ const unregisterSideMenu = t3;
5703
5712
  let t4;
5704
- if ($[11] !== onCheckedChange) {
5705
- t4 = (details) => onCheckedChange?.(details.checked);
5706
- $[11] = onCheckedChange;
5707
- $[12] = t4;
5708
- } else t4 = $[12];
5709
- const t5 = value === void 0 ? void 0 : String(value);
5713
+ if ($[6] !== hasSideMenu) {
5714
+ t4 = {
5715
+ hasSideMenu,
5716
+ registerSideMenu,
5717
+ unregisterSideMenu
5718
+ };
5719
+ $[6] = hasSideMenu;
5720
+ $[7] = t4;
5721
+ } else t4 = $[7];
5722
+ const contextValue = t4;
5723
+ let t5;
5724
+ if ($[8] !== className || $[9] !== fillParent) {
5725
+ t5 = (0, classnames.default)(ds_catalog_layout_module_default.root, { [ds_catalog_layout_module_default.fillParent]: fillParent }, className);
5726
+ $[8] = className;
5727
+ $[9] = fillParent;
5728
+ $[10] = t5;
5729
+ } else t5 = $[10];
5710
5730
  let t6;
5711
- if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
5712
- t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Indicator, {
5713
- className: ds_checkbox_module_default.indicator,
5714
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
5715
- icon: "check_small",
5716
- size: "tiny",
5717
- variant: "rounded"
5718
- })
5731
+ if ($[11] !== rest || $[12] !== t5) {
5732
+ t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5733
+ ...rest,
5734
+ className: t5
5719
5735
  });
5736
+ $[11] = rest;
5737
+ $[12] = t5;
5720
5738
  $[13] = t6;
5721
5739
  } else t6 = $[13];
5722
5740
  let t7;
5723
- let t8;
5724
- if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
5725
- t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_checkbox.Checkbox.Control, {
5726
- className: ds_checkbox_module_default.control,
5727
- children: [t6, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Indicator, {
5728
- className: ds_checkbox_module_default.indicator,
5729
- indeterminate: true,
5730
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
5731
- icon: "check_indeterminate_small",
5732
- size: "tiny",
5733
- variant: "rounded"
5734
- })
5735
- })]
5741
+ if ($[14] !== contextValue || $[15] !== t6) {
5742
+ t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCatalogLayoutContext.Provider, {
5743
+ value: contextValue,
5744
+ children: t6
5736
5745
  });
5737
- t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.HiddenInput, { className: ds_checkbox_module_default.hiddenInput });
5738
- $[14] = t7;
5739
- $[15] = t8;
5746
+ $[14] = contextValue;
5747
+ $[15] = t6;
5748
+ $[16] = t7;
5749
+ } else t7 = $[16];
5750
+ return t7;
5751
+ };
5752
+ const Header$3 = (t0) => {
5753
+ const $ = (0, react_compiler_runtime.c)(8);
5754
+ let className;
5755
+ let rest;
5756
+ if ($[0] !== t0) {
5757
+ ({className, ...rest} = t0);
5758
+ $[0] = t0;
5759
+ $[1] = className;
5760
+ $[2] = rest;
5740
5761
  } else {
5741
- t7 = $[14];
5742
- t8 = $[15];
5762
+ className = $[1];
5763
+ rest = $[2];
5743
5764
  }
5744
- let t9;
5745
- if ($[16] !== label || $[17] !== labelInfo) {
5746
- t9 = (label || labelInfo) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5747
- className: ds_checkbox_module_default.labelColumn,
5748
- children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Label, {
5749
- className: ds_checkbox_module_default.label,
5750
- children: label
5751
- }), labelInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5752
- className: ds_checkbox_module_default.labelInfo,
5753
- children: labelInfo
5754
- })]
5755
- });
5756
- $[16] = label;
5757
- $[17] = labelInfo;
5758
- $[18] = t9;
5759
- } else t9 = $[18];
5760
- let t10;
5761
- if ($[19] !== props || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t9) {
5762
- t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_checkbox.Checkbox.Root, {
5763
- className: t3,
5764
- onCheckedChange: t4,
5765
- ...props,
5766
- value: t5,
5767
- children: [
5768
- t7,
5769
- t8,
5770
- t9
5771
- ]
5765
+ let t1;
5766
+ if ($[3] !== className) {
5767
+ t1 = (0, classnames.default)(ds_catalog_layout_module_default.header, className);
5768
+ $[3] = className;
5769
+ $[4] = t1;
5770
+ } else t1 = $[4];
5771
+ let t2;
5772
+ if ($[5] !== rest || $[6] !== t1) {
5773
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
5774
+ ...rest,
5775
+ className: t1
5772
5776
  });
5773
- $[19] = props;
5774
- $[20] = t3;
5775
- $[21] = t4;
5776
- $[22] = t5;
5777
- $[23] = t9;
5778
- $[24] = t10;
5779
- } else t10 = $[24];
5780
- return t10;
5777
+ $[5] = rest;
5778
+ $[6] = t1;
5779
+ $[7] = t2;
5780
+ } else t2 = $[7];
5781
+ return t2;
5781
5782
  };
5782
- //#endregion
5783
- //#region src/components/ds-checkbox/ds-checkbox.types.ts
5784
- const checkboxVariants = ["default", "warning"];
5785
- //#endregion
5786
- //#region src/components/ds-checkbox-group/ds-checkbox-group.module.scss
5787
- var ds_checkbox_group_module_default = {
5788
- "horizontal": "f9-vsG_horizontal",
5789
- "root": "f9-vsG_root",
5790
- "vertical": "f9-vsG_vertical"
5783
+ const Body$3 = (t0) => {
5784
+ const $ = (0, react_compiler_runtime.c)(8);
5785
+ let className;
5786
+ let rest;
5787
+ if ($[0] !== t0) {
5788
+ ({className, ...rest} = t0);
5789
+ $[0] = t0;
5790
+ $[1] = className;
5791
+ $[2] = rest;
5792
+ } else {
5793
+ className = $[1];
5794
+ rest = $[2];
5795
+ }
5796
+ let t1;
5797
+ if ($[3] !== className) {
5798
+ t1 = (0, classnames.default)(ds_catalog_layout_module_default.body, className);
5799
+ $[3] = className;
5800
+ $[4] = t1;
5801
+ } else t1 = $[4];
5802
+ let t2;
5803
+ if ($[5] !== rest || $[6] !== t1) {
5804
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5805
+ ...rest,
5806
+ className: t1
5807
+ });
5808
+ $[5] = rest;
5809
+ $[6] = t1;
5810
+ $[7] = t2;
5811
+ } else t2 = $[7];
5812
+ return t2;
5791
5813
  };
5792
- //#endregion
5793
- //#region src/components/ds-checkbox-group/ds-checkbox-group.tsx
5794
- const DsCheckboxGroup = (t0) => {
5795
- const $ = (0, react_compiler_runtime.c)(12);
5814
+ const SideMenu$1 = (t0) => {
5815
+ const $ = (0, react_compiler_runtime.c)(32);
5796
5816
  let children;
5797
5817
  let className;
5798
- let props;
5818
+ let locale;
5819
+ let onPinnedChange;
5820
+ let rest;
5799
5821
  let t1;
5800
5822
  if ($[0] !== t0) {
5801
- ({orientation: t1, className, children, ...props} = t0);
5823
+ ({className, pinned: t1, onPinnedChange, locale, children, ...rest} = t0);
5802
5824
  $[0] = t0;
5803
5825
  $[1] = children;
5804
5826
  $[2] = className;
5805
- $[3] = props;
5806
- $[4] = t1;
5827
+ $[3] = locale;
5828
+ $[4] = onPinnedChange;
5829
+ $[5] = rest;
5830
+ $[6] = t1;
5807
5831
  } else {
5808
5832
  children = $[1];
5809
5833
  className = $[2];
5810
- props = $[3];
5811
- t1 = $[4];
5834
+ locale = $[3];
5835
+ onPinnedChange = $[4];
5836
+ rest = $[5];
5837
+ t1 = $[6];
5812
5838
  }
5813
- const t2 = ds_checkbox_group_module_default[t1 === void 0 ? "vertical" : t1];
5839
+ const pinned = t1 === void 0 ? false : t1;
5840
+ const { registerSideMenu, unregisterSideMenu } = useDsCatalogLayoutContext();
5841
+ const [isHovering, setIsHovering] = (0, react.useState)(false);
5842
+ let t2;
5814
5843
  let t3;
5815
- if ($[5] !== className || $[6] !== t2) {
5816
- t3 = (0, classnames.default)(ds_checkbox_group_module_default.root, t2, className);
5817
- $[5] = className;
5818
- $[6] = t2;
5819
- $[7] = t3;
5820
- } else t3 = $[7];
5821
- let t4;
5822
- if ($[8] !== children || $[9] !== props || $[10] !== t3) {
5823
- t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Group, {
5824
- className: t3,
5825
- ...props,
5826
- children
5827
- });
5828
- $[8] = children;
5829
- $[9] = props;
5844
+ if ($[7] !== registerSideMenu || $[8] !== unregisterSideMenu) {
5845
+ t2 = () => {
5846
+ registerSideMenu();
5847
+ return unregisterSideMenu;
5848
+ };
5849
+ t3 = [registerSideMenu, unregisterSideMenu];
5850
+ $[7] = registerSideMenu;
5851
+ $[8] = unregisterSideMenu;
5852
+ $[9] = t2;
5830
5853
  $[10] = t3;
5831
- $[11] = t4;
5832
- } else t4 = $[11];
5833
- return t4;
5834
- };
5854
+ } else {
5855
+ t2 = $[9];
5856
+ t3 = $[10];
5857
+ }
5858
+ (0, react.useEffect)(t2, t3);
5859
+ const isExpanded = pinned || isHovering;
5860
+ const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE$1.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE$1.pinButtonLabel;
5861
+ let t4;
5862
+ if ($[11] !== className) {
5863
+ t4 = (0, classnames.default)(ds_catalog_layout_module_default.sideMenu, className);
5864
+ $[11] = className;
5865
+ $[12] = t4;
5866
+ } else t4 = $[12];
5867
+ let t5;
5868
+ if ($[13] !== pinned) {
5869
+ t5 = pinned ? { "data-pinned": "" } : {};
5870
+ $[13] = pinned;
5871
+ $[14] = t5;
5872
+ } else t5 = $[14];
5873
+ let t6;
5874
+ if ($[15] !== isExpanded) {
5875
+ t6 = isExpanded ? { "data-expanded": "" } : {};
5876
+ $[15] = isExpanded;
5877
+ $[16] = t6;
5878
+ } else t6 = $[16];
5879
+ let t7;
5880
+ let t8;
5881
+ if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
5882
+ t7 = () => setIsHovering(true);
5883
+ t8 = () => setIsHovering(false);
5884
+ $[17] = t7;
5885
+ $[18] = t8;
5886
+ } else {
5887
+ t7 = $[17];
5888
+ t8 = $[18];
5889
+ }
5890
+ let t9;
5891
+ if ($[19] !== ariaLabel || $[20] !== onPinnedChange || $[21] !== pinned) {
5892
+ t9 = onPinnedChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
5893
+ type: "button",
5894
+ className: ds_catalog_layout_module_default.sideMenuPinButton,
5895
+ onClick: () => onPinnedChange(!pinned),
5896
+ "aria-label": ariaLabel,
5897
+ "aria-pressed": pinned,
5898
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
5899
+ icon: "keep",
5900
+ size: "small",
5901
+ filled: pinned
5902
+ })
5903
+ }) : null;
5904
+ $[19] = ariaLabel;
5905
+ $[20] = onPinnedChange;
5906
+ $[21] = pinned;
5907
+ $[22] = t9;
5908
+ } else t9 = $[22];
5909
+ let t10;
5910
+ if ($[23] !== children || $[24] !== t9) {
5911
+ t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
5912
+ className: ds_catalog_layout_module_default.sideMenuPanel,
5913
+ onMouseEnter: t7,
5914
+ onMouseLeave: t8,
5915
+ children: [t9, children]
5916
+ });
5917
+ $[23] = children;
5918
+ $[24] = t9;
5919
+ $[25] = t10;
5920
+ } else t10 = $[25];
5921
+ let t11;
5922
+ if ($[26] !== rest || $[27] !== t10 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6) {
5923
+ t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
5924
+ ...rest,
5925
+ className: t4,
5926
+ ...t5,
5927
+ ...t6,
5928
+ children: t10
5929
+ });
5930
+ $[26] = rest;
5931
+ $[27] = t10;
5932
+ $[28] = t4;
5933
+ $[29] = t5;
5934
+ $[30] = t6;
5935
+ $[31] = t11;
5936
+ } else t11 = $[31];
5937
+ return t11;
5938
+ };
5939
+ const Content$1 = (t0) => {
5940
+ const $ = (0, react_compiler_runtime.c)(9);
5941
+ let className;
5942
+ let rest;
5943
+ if ($[0] !== t0) {
5944
+ ({className, ...rest} = t0);
5945
+ $[0] = t0;
5946
+ $[1] = className;
5947
+ $[2] = rest;
5948
+ } else {
5949
+ className = $[1];
5950
+ rest = $[2];
5951
+ }
5952
+ const { hasSideMenu } = useDsCatalogLayoutContext();
5953
+ let t1;
5954
+ if ($[3] !== className || $[4] !== hasSideMenu) {
5955
+ t1 = (0, classnames.default)(ds_catalog_layout_module_default.content, { [ds_catalog_layout_module_default.contentWithSideMenu]: hasSideMenu }, className);
5956
+ $[3] = className;
5957
+ $[4] = hasSideMenu;
5958
+ $[5] = t1;
5959
+ } else t1 = $[5];
5960
+ let t2;
5961
+ if ($[6] !== rest || $[7] !== t1) {
5962
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
5963
+ ...rest,
5964
+ className: t1
5965
+ });
5966
+ $[6] = rest;
5967
+ $[7] = t1;
5968
+ $[8] = t2;
5969
+ } else t2 = $[8];
5970
+ return t2;
5971
+ };
5972
+ const ContentHeader = (t0) => {
5973
+ const $ = (0, react_compiler_runtime.c)(22);
5974
+ let children;
5975
+ let className;
5976
+ let headerActions;
5977
+ let rest;
5978
+ let title;
5979
+ if ($[0] !== t0) {
5980
+ ({className, title, headerActions, children, ...rest} = t0);
5981
+ $[0] = t0;
5982
+ $[1] = children;
5983
+ $[2] = className;
5984
+ $[3] = headerActions;
5985
+ $[4] = rest;
5986
+ $[5] = title;
5987
+ } else {
5988
+ children = $[1];
5989
+ className = $[2];
5990
+ headerActions = $[3];
5991
+ rest = $[4];
5992
+ title = $[5];
5993
+ }
5994
+ let t1;
5995
+ if ($[6] !== className) {
5996
+ t1 = (0, classnames.default)(ds_catalog_layout_module_default.contentHeader, className);
5997
+ $[6] = className;
5998
+ $[7] = t1;
5999
+ } else t1 = $[7];
6000
+ let t2;
6001
+ if ($[8] !== title) {
6002
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6003
+ className: ds_catalog_layout_module_default.contentHeaderTitle,
6004
+ children: title
6005
+ });
6006
+ $[8] = title;
6007
+ $[9] = t2;
6008
+ } else t2 = $[9];
6009
+ let t3;
6010
+ if ($[10] !== headerActions) {
6011
+ t3 = headerActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6012
+ className: ds_catalog_layout_module_default.contentHeaderActions,
6013
+ children: headerActions
6014
+ }) : null;
6015
+ $[10] = headerActions;
6016
+ $[11] = t3;
6017
+ } else t3 = $[11];
6018
+ let t4;
6019
+ if ($[12] !== t2 || $[13] !== t3) {
6020
+ t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6021
+ className: ds_catalog_layout_module_default.contentHeaderTitleRow,
6022
+ children: [t2, t3]
6023
+ });
6024
+ $[12] = t2;
6025
+ $[13] = t3;
6026
+ $[14] = t4;
6027
+ } else t4 = $[14];
6028
+ let t5;
6029
+ if ($[15] !== children) {
6030
+ t5 = children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6031
+ className: ds_catalog_layout_module_default.contentHeaderItem,
6032
+ children
6033
+ }) : null;
6034
+ $[15] = children;
6035
+ $[16] = t5;
6036
+ } else t5 = $[16];
6037
+ let t6;
6038
+ if ($[17] !== rest || $[18] !== t1 || $[19] !== t4 || $[20] !== t5) {
6039
+ t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6040
+ ...rest,
6041
+ className: t1,
6042
+ children: [t4, t5]
6043
+ });
6044
+ $[17] = rest;
6045
+ $[18] = t1;
6046
+ $[19] = t4;
6047
+ $[20] = t5;
6048
+ $[21] = t6;
6049
+ } else t6 = $[21];
6050
+ return t6;
6051
+ };
6052
+ DsCatalogLayout.Header = Header$3;
6053
+ DsCatalogLayout.Body = Body$3;
6054
+ DsCatalogLayout.SideMenu = SideMenu$1;
6055
+ DsCatalogLayout.Content = Content$1;
6056
+ DsCatalogLayout.ContentHeader = ContentHeader;
6057
+ //#endregion
6058
+ //#region src/components/ds-checkbox/ds-checkbox.module.scss
6059
+ var ds_checkbox_module_default = {
6060
+ "control": "-9VV7a_control",
6061
+ "hiddenInput": "-9VV7a_hiddenInput",
6062
+ "indicator": "-9VV7a_indicator",
6063
+ "label": "-9VV7a_label",
6064
+ "labelColumn": "-9VV7a_labelColumn",
6065
+ "labelInfo": "-9VV7a_labelInfo",
6066
+ "root": "-9VV7a_root",
6067
+ "warning": "-9VV7a_warning"
6068
+ };
6069
+ //#endregion
6070
+ //#region src/components/ds-checkbox/ds-checkbox.tsx
6071
+ /**
6072
+ * Design system Checkbox component
6073
+ */
6074
+ const DsCheckbox = (t0) => {
6075
+ const $ = (0, react_compiler_runtime.c)(25);
6076
+ let className;
6077
+ let label;
6078
+ let labelInfo;
6079
+ let onCheckedChange;
6080
+ let props;
6081
+ let t1;
6082
+ let value;
6083
+ if ($[0] !== t0) {
6084
+ ({variant: t1, label, labelInfo, className, onCheckedChange, value, ...props} = t0);
6085
+ $[0] = t0;
6086
+ $[1] = className;
6087
+ $[2] = label;
6088
+ $[3] = labelInfo;
6089
+ $[4] = onCheckedChange;
6090
+ $[5] = props;
6091
+ $[6] = t1;
6092
+ $[7] = value;
6093
+ } else {
6094
+ className = $[1];
6095
+ label = $[2];
6096
+ labelInfo = $[3];
6097
+ onCheckedChange = $[4];
6098
+ props = $[5];
6099
+ t1 = $[6];
6100
+ value = $[7];
6101
+ }
6102
+ const t2 = (t1 === void 0 ? "default" : t1) === "warning" && ds_checkbox_module_default.warning;
6103
+ let t3;
6104
+ if ($[8] !== className || $[9] !== t2) {
6105
+ t3 = (0, classnames.default)(ds_checkbox_module_default.root, t2, className);
6106
+ $[8] = className;
6107
+ $[9] = t2;
6108
+ $[10] = t3;
6109
+ } else t3 = $[10];
6110
+ let t4;
6111
+ if ($[11] !== onCheckedChange) {
6112
+ t4 = (details) => onCheckedChange?.(details.checked);
6113
+ $[11] = onCheckedChange;
6114
+ $[12] = t4;
6115
+ } else t4 = $[12];
6116
+ const t5 = value === void 0 ? void 0 : String(value);
6117
+ let t6;
6118
+ if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
6119
+ t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Indicator, {
6120
+ className: ds_checkbox_module_default.indicator,
6121
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
6122
+ icon: "check_small",
6123
+ size: "tiny",
6124
+ variant: "rounded"
6125
+ })
6126
+ });
6127
+ $[13] = t6;
6128
+ } else t6 = $[13];
6129
+ let t7;
6130
+ let t8;
6131
+ if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
6132
+ t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_checkbox.Checkbox.Control, {
6133
+ className: ds_checkbox_module_default.control,
6134
+ children: [t6, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Indicator, {
6135
+ className: ds_checkbox_module_default.indicator,
6136
+ indeterminate: true,
6137
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
6138
+ icon: "check_indeterminate_small",
6139
+ size: "tiny",
6140
+ variant: "rounded"
6141
+ })
6142
+ })]
6143
+ });
6144
+ t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.HiddenInput, { className: ds_checkbox_module_default.hiddenInput });
6145
+ $[14] = t7;
6146
+ $[15] = t8;
6147
+ } else {
6148
+ t7 = $[14];
6149
+ t8 = $[15];
6150
+ }
6151
+ let t9;
6152
+ if ($[16] !== label || $[17] !== labelInfo) {
6153
+ t9 = (label || labelInfo) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
6154
+ className: ds_checkbox_module_default.labelColumn,
6155
+ children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Label, {
6156
+ className: ds_checkbox_module_default.label,
6157
+ children: label
6158
+ }), labelInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
6159
+ className: ds_checkbox_module_default.labelInfo,
6160
+ children: labelInfo
6161
+ })]
6162
+ });
6163
+ $[16] = label;
6164
+ $[17] = labelInfo;
6165
+ $[18] = t9;
6166
+ } else t9 = $[18];
6167
+ let t10;
6168
+ if ($[19] !== props || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t9) {
6169
+ t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_checkbox.Checkbox.Root, {
6170
+ className: t3,
6171
+ onCheckedChange: t4,
6172
+ ...props,
6173
+ value: t5,
6174
+ children: [
6175
+ t7,
6176
+ t8,
6177
+ t9
6178
+ ]
6179
+ });
6180
+ $[19] = props;
6181
+ $[20] = t3;
6182
+ $[21] = t4;
6183
+ $[22] = t5;
6184
+ $[23] = t9;
6185
+ $[24] = t10;
6186
+ } else t10 = $[24];
6187
+ return t10;
6188
+ };
6189
+ //#endregion
6190
+ //#region src/components/ds-checkbox/ds-checkbox.types.ts
6191
+ const checkboxVariants = ["default", "warning"];
6192
+ //#endregion
6193
+ //#region src/components/ds-checkbox-group/ds-checkbox-group.module.scss
6194
+ var ds_checkbox_group_module_default = {
6195
+ "horizontal": "f9-vsG_horizontal",
6196
+ "root": "f9-vsG_root",
6197
+ "vertical": "f9-vsG_vertical"
6198
+ };
6199
+ //#endregion
6200
+ //#region src/components/ds-checkbox-group/ds-checkbox-group.tsx
6201
+ const DsCheckboxGroup = (t0) => {
6202
+ const $ = (0, react_compiler_runtime.c)(12);
6203
+ let children;
6204
+ let className;
6205
+ let props;
6206
+ let t1;
6207
+ if ($[0] !== t0) {
6208
+ ({orientation: t1, className, children, ...props} = t0);
6209
+ $[0] = t0;
6210
+ $[1] = children;
6211
+ $[2] = className;
6212
+ $[3] = props;
6213
+ $[4] = t1;
6214
+ } else {
6215
+ children = $[1];
6216
+ className = $[2];
6217
+ props = $[3];
6218
+ t1 = $[4];
6219
+ }
6220
+ const t2 = ds_checkbox_group_module_default[t1 === void 0 ? "vertical" : t1];
6221
+ let t3;
6222
+ if ($[5] !== className || $[6] !== t2) {
6223
+ t3 = (0, classnames.default)(ds_checkbox_group_module_default.root, t2, className);
6224
+ $[5] = className;
6225
+ $[6] = t2;
6226
+ $[7] = t3;
6227
+ } else t3 = $[7];
6228
+ let t4;
6229
+ if ($[8] !== children || $[9] !== props || $[10] !== t3) {
6230
+ t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_checkbox.Checkbox.Group, {
6231
+ className: t3,
6232
+ ...props,
6233
+ children
6234
+ });
6235
+ $[8] = children;
6236
+ $[9] = props;
6237
+ $[10] = t3;
6238
+ $[11] = t4;
6239
+ } else t4 = $[11];
6240
+ return t4;
6241
+ };
5835
6242
  //#endregion
5836
6243
  //#region src/components/ds-checkbox-group/hooks/use-checkbox-select-all.ts
5837
6244
  /**
@@ -7871,6 +8278,78 @@ var ds_drawer_module_default = {
7871
8278
  "toolbar": "MWmQHa_toolbar"
7872
8279
  };
7873
8280
  //#endregion
8281
+ //#region src/utils/restore-document-body-modal-styles.ts
8282
+ const SCROLL_LOCK_ATTRIBUTE = "data-scroll-lock";
8283
+ const INERT_ATTRIBUTE = "data-inert";
8284
+ const ARIA_HIDDEN_MARKER = "data-aria-hidden";
8285
+ /**
8286
+ * Clears document body styles and attributes left by Zag dialog modal effects when a
8287
+ * dialog instance tears down without a normal close transition.
8288
+ *
8289
+ * No-op unless a leak sentinel is present: in the common case Zag restores the body on
8290
+ * unmount itself, and we must not clobber styles the host app owns.
8291
+ */
8292
+ const restoreDocumentBodyModalStyles = (doc = document) => {
8293
+ const { body, documentElement } = doc;
8294
+ if (!(body.hasAttribute(SCROLL_LOCK_ATTRIBUTE) || body.hasAttribute(INERT_ATTRIBUTE) || body.style.pointerEvents === "none")) return;
8295
+ body.removeAttribute(SCROLL_LOCK_ATTRIBUTE);
8296
+ body.removeAttribute(INERT_ATTRIBUTE);
8297
+ body.removeAttribute(ARIA_HIDDEN_MARKER);
8298
+ if (body.getAttribute("aria-hidden") === "true") body.removeAttribute("aria-hidden");
8299
+ body.style.removeProperty("overflow");
8300
+ body.style.removeProperty("pointer-events");
8301
+ body.style.removeProperty("position");
8302
+ body.style.removeProperty("top");
8303
+ body.style.removeProperty("left");
8304
+ body.style.removeProperty("right");
8305
+ if (body.style.length === 0) body.removeAttribute("style");
8306
+ documentElement.style.removeProperty("--scrollbar-width");
8307
+ };
8308
+ //#endregion
8309
+ //#region src/utils/use-ark-dialog-body-lock-cleanup.ts
8310
+ const activeBodyLockInstances = /* @__PURE__ */ new Set();
8311
+ const scheduleBodyLockRestoreIfIdle = () => {
8312
+ queueMicrotask(() => {
8313
+ if (activeBodyLockInstances.size > 0) return;
8314
+ restoreDocumentBodyModalStyles();
8315
+ });
8316
+ };
8317
+ /**
8318
+ * Ensures Zag dialog body scroll-lock and modal pointer blocking are released when
8319
+ * an Ark dialog unmounts while still open (e.g. close + conditional unmount + navigate).
8320
+ */
8321
+ const useArkDialogBodyLockCleanup = (open, enabled) => {
8322
+ const $ = (0, react_compiler_runtime.c)(5);
8323
+ let t0;
8324
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
8325
+ t0 = Symbol("ark-dialog-body-lock");
8326
+ $[0] = t0;
8327
+ } else t0 = $[0];
8328
+ const instanceIdRef = (0, react.useRef)(t0);
8329
+ let t1;
8330
+ let t2;
8331
+ if ($[1] !== enabled || $[2] !== open) {
8332
+ t1 = () => {
8333
+ if (!open || !enabled) return;
8334
+ const instanceId = instanceIdRef.current;
8335
+ activeBodyLockInstances.add(instanceId);
8336
+ return () => {
8337
+ activeBodyLockInstances.delete(instanceId);
8338
+ scheduleBodyLockRestoreIfIdle();
8339
+ };
8340
+ };
8341
+ t2 = [open, enabled];
8342
+ $[1] = enabled;
8343
+ $[2] = open;
8344
+ $[3] = t1;
8345
+ $[4] = t2;
8346
+ } else {
8347
+ t1 = $[3];
8348
+ t2 = $[4];
8349
+ }
8350
+ (0, react.useLayoutEffect)(t1, t2);
8351
+ };
8352
+ //#endregion
7874
8353
  //#region src/components/ds-drawer/ds-drawer.tsx
7875
8354
  const DsDrawer = (t0) => {
7876
8355
  const $ = (0, react_compiler_runtime.c)(25);
@@ -7882,6 +8361,7 @@ const DsDrawer = (t0) => {
7882
8361
  const closeOnInteractOutside = t5 === void 0 ? false : t5;
7883
8362
  const portal = t6 === void 0 ? false : t6;
7884
8363
  const resolvedColumns = useResponsiveValue(columns);
8364
+ useArkDialogBodyLockCleanup(open, backdrop);
7885
8365
  let t7;
7886
8366
  if ($[0] !== onOpenChange) {
7887
8367
  t7 = (details) => {
@@ -8070,7 +8550,7 @@ const Toolbar = (t0) => {
8070
8550
  } else t2 = $[5];
8071
8551
  return t2;
8072
8552
  };
8073
- const Body$1 = (t0) => {
8553
+ const Body$2 = (t0) => {
8074
8554
  const $ = (0, react_compiler_runtime.c)(6);
8075
8555
  const { style, className, children } = t0;
8076
8556
  let t1;
@@ -8143,7 +8623,7 @@ DsDrawer.Header = Header$2;
8143
8623
  DsDrawer.Title = Title$1;
8144
8624
  DsDrawer.CloseTrigger = CloseTrigger$1;
8145
8625
  DsDrawer.Toolbar = Toolbar;
8146
- DsDrawer.Body = Body$1;
8626
+ DsDrawer.Body = Body$2;
8147
8627
  DsDrawer.Footer = Footer$2;
8148
8628
  DsDrawer.Actions = Actions$1;
8149
8629
  //#endregion
@@ -8691,6 +9171,7 @@ const DsModal = (t0) => {
8691
9171
  const dividers = t2 === void 0 ? false : t2;
8692
9172
  const modal = t3 === void 0 ? true : t3;
8693
9173
  const closeOnInteractOutside = t4 === void 0 ? false : t4;
9174
+ useArkDialogBodyLockCleanup(open, modal);
8694
9175
  let t5;
8695
9176
  if ($[0] !== onOpenChange) {
8696
9177
  t5 = (details) => {
@@ -8837,7 +9318,7 @@ const CloseTrigger = (t0) => {
8837
9318
  } else t2 = $[3];
8838
9319
  return t2;
8839
9320
  };
8840
- const Body = (t0) => {
9321
+ const Body$1 = (t0) => {
8841
9322
  const $ = (0, react_compiler_runtime.c)(6);
8842
9323
  const { style, className, children } = t0;
8843
9324
  let t1;
@@ -8909,7 +9390,7 @@ const Actions = (t0) => {
8909
9390
  DsModal.Header = Header$1;
8910
9391
  DsModal.Title = Title;
8911
9392
  DsModal.CloseTrigger = CloseTrigger;
8912
- DsModal.Body = Body;
9393
+ DsModal.Body = Body$1;
8913
9394
  DsModal.Footer = Footer$1;
8914
9395
  DsModal.Actions = Actions;
8915
9396
  //#endregion
@@ -12753,66 +13234,50 @@ const DsFormControlDescription = (t0) => {
12753
13234
  return t2;
12754
13235
  };
12755
13236
  const DsFormControl = (t0) => {
12756
- const $ = (0, react_compiler_runtime.c)(28);
12757
- const { id, status, label, required: t1, slots, message, messageIcon: t2, className, style, children } = t0;
12758
- const required = t1 === void 0 ? false : t1;
12759
- const messageIcon = t2 === void 0 ? "info" : t2;
13237
+ const $ = (0, react_compiler_runtime.c)(23);
13238
+ const { id, status, label, hideLabel: t1, required: t2, slots, message, messageIcon: t3, className, style, children } = t0;
13239
+ const hideLabel = t1 === void 0 ? false : t1;
13240
+ const required = t2 === void 0 ? false : t2;
13241
+ const messageIcon = t3 === void 0 ? "info" : t3;
12760
13242
  const generatedId = (0, react.useId)();
12761
13243
  const controlId = id || generatedId;
12762
- let t3;
13244
+ let t4;
12763
13245
  if ($[0] !== controlId) {
12764
- t3 = { controlId };
13246
+ t4 = { controlId };
12765
13247
  $[0] = controlId;
12766
- $[1] = t3;
12767
- } else t3 = $[1];
12768
- const t4 = status && message && ds_form_control_module_default[status];
12769
- let t5;
12770
- if ($[2] !== className || $[3] !== t4) {
12771
- t5 = (0, classnames.default)(ds_form_control_module_default.container, className, t4);
12772
- $[2] = className;
12773
- $[3] = t4;
12774
- $[4] = t5;
12775
- } else t5 = $[4];
13248
+ $[1] = t4;
13249
+ } else t4 = $[1];
13250
+ const t5 = status && message && ds_form_control_module_default[status];
12776
13251
  let t6;
12777
- if ($[5] !== required) {
12778
- t6 = (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required });
12779
- $[5] = required;
12780
- $[6] = t6;
12781
- } else t6 = $[6];
13252
+ if ($[2] !== className || $[3] !== t5) {
13253
+ t6 = (0, classnames.default)(ds_form_control_module_default.container, className, t5);
13254
+ $[2] = className;
13255
+ $[3] = t5;
13256
+ $[4] = t6;
13257
+ } else t6 = $[4];
12782
13258
  let t7;
12783
- if ($[7] !== controlId || $[8] !== label || $[9] !== t6) {
12784
- t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
12785
- htmlFor: controlId,
12786
- className: t6,
12787
- children: label
13259
+ if ($[5] !== controlId || $[6] !== hideLabel || $[7] !== label || $[8] !== required || $[9] !== slots) {
13260
+ t7 = !hideLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
13261
+ className: ds_form_control_module_default.labelContainer,
13262
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
13263
+ htmlFor: controlId,
13264
+ className: (0, classnames.default)(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required }),
13265
+ children: label
13266
+ }), slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
13267
+ className: ds_form_control_module_default.endAdornment,
13268
+ children: slots.endAdornment
13269
+ })]
12788
13270
  });
12789
- $[7] = controlId;
12790
- $[8] = label;
12791
- $[9] = t6;
13271
+ $[5] = controlId;
13272
+ $[6] = hideLabel;
13273
+ $[7] = label;
13274
+ $[8] = required;
13275
+ $[9] = slots;
12792
13276
  $[10] = t7;
12793
13277
  } else t7 = $[10];
12794
13278
  let t8;
12795
- if ($[11] !== slots) {
12796
- t8 = slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
12797
- className: ds_form_control_module_default.endAdornment,
12798
- children: slots.endAdornment
12799
- });
12800
- $[11] = slots;
12801
- $[12] = t8;
12802
- } else t8 = $[12];
12803
- let t9;
12804
- if ($[13] !== t7 || $[14] !== t8) {
12805
- t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
12806
- className: ds_form_control_module_default.labelContainer,
12807
- children: [t7, t8]
12808
- });
12809
- $[13] = t7;
12810
- $[14] = t8;
12811
- $[15] = t9;
12812
- } else t9 = $[15];
12813
- let t10;
12814
- if ($[16] !== message || $[17] !== messageIcon) {
12815
- t10 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
13279
+ if ($[11] !== message || $[12] !== messageIcon) {
13280
+ t8 = message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
12816
13281
  className: ds_form_control_module_default.message,
12817
13282
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
12818
13283
  icon: messageIcon,
@@ -12820,39 +13285,39 @@ const DsFormControl = (t0) => {
12820
13285
  filled: true
12821
13286
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message })]
12822
13287
  });
12823
- $[16] = message;
12824
- $[17] = messageIcon;
12825
- $[18] = t10;
12826
- } else t10 = $[18];
12827
- let t11;
12828
- if ($[19] !== children || $[20] !== style || $[21] !== t10 || $[22] !== t5 || $[23] !== t9) {
12829
- t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
12830
- className: t5,
13288
+ $[11] = message;
13289
+ $[12] = messageIcon;
13290
+ $[13] = t8;
13291
+ } else t8 = $[13];
13292
+ let t9;
13293
+ if ($[14] !== children || $[15] !== style || $[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
13294
+ t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
13295
+ className: t6,
12831
13296
  style,
12832
13297
  children: [
12833
- t9,
13298
+ t7,
12834
13299
  children,
12835
- t10
13300
+ t8
12836
13301
  ]
12837
13302
  });
12838
- $[19] = children;
12839
- $[20] = style;
12840
- $[21] = t10;
12841
- $[22] = t5;
12842
- $[23] = t9;
12843
- $[24] = t11;
12844
- } else t11 = $[24];
12845
- let t12;
12846
- if ($[25] !== t11 || $[26] !== t3) {
12847
- t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
12848
- value: t3,
12849
- children: t11
13303
+ $[14] = children;
13304
+ $[15] = style;
13305
+ $[16] = t6;
13306
+ $[17] = t7;
13307
+ $[18] = t8;
13308
+ $[19] = t9;
13309
+ } else t9 = $[19];
13310
+ let t10;
13311
+ if ($[20] !== t4 || $[21] !== t9) {
13312
+ t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
13313
+ value: t4,
13314
+ children: t9
12850
13315
  });
12851
- $[25] = t11;
12852
- $[26] = t3;
12853
- $[27] = t12;
12854
- } else t12 = $[27];
12855
- return t12;
13316
+ $[20] = t4;
13317
+ $[21] = t9;
13318
+ $[22] = t10;
13319
+ } else t10 = $[22];
13320
+ return t10;
12856
13321
  };
12857
13322
  DsFormControl.TextInput = controlify(DsTextInput);
12858
13323
  DsFormControl.NumberInput = controlify(DsNumberInput);
@@ -17730,68 +18195,9 @@ const systemStatuses = [
17730
18195
  //#endregion
17731
18196
  //#region src/components/ds-table/filters/adapters/create-filter-adapter.ts
17732
18197
  /**
17733
- * Base factory function to create a filter adapter
17734
- *
17735
- * This is the core function that all specialized filter adapters use internally.
17736
- * Use this when checkbox or dual-range adapters don't fit your requirements.
17737
- *
17738
- * ## When to use directly:
17739
- * - Complex filtering logic (e.g., editor + date range)
17740
- * - Unique UI that doesn't fit generic patterns
17741
- * - Combining multiple sub-filters
17742
- * - Special chip generation requirements
17743
- *
17744
- * ## When to use specialized helpers instead:
17745
- * - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select
17746
- * - **Range filters**: Use `createDualRangeFilterAdapter` for numeric ranges
17747
- *
17748
- * ## Example:
17749
- * ```typescript
17750
- * interface MyFilterValue {
17751
- * users: string[];
17752
- * dateRange: { from?: Date; to?: Date };
17753
- * }
17754
- *
17755
- * const myFilter = createFilterAdapter<DataType, MyFilterValue>({
17756
- * id: 'myColumn',
17757
- * label: 'My Filter',
17758
- * initialValue: { users: [], dateRange: {} },
17759
- *
17760
- * filterFn: (row, columnId, filterValue) => {
17761
- * // Your custom logic
17762
- * return matchesUsers && matchesDateRange;
17763
- * },
17764
- *
17765
- * toChips: (value) => {
17766
- * // Generate chips from your filter value
17767
- * return chips;
17768
- * },
17769
- *
17770
- * fromChip: (chip, currentValue) => {
17771
- * // Remove chip's effect from value
17772
- * return updatedValue;
17773
- * },
17774
- *
17775
- * getActiveFiltersCount: (value) => {
17776
- * // Count active filters (0 means none active)
17777
- * return count;
17778
- * },
17779
- *
17780
- * renderFilter: (value, onChange) => (
17781
- * <YourCustomFilterComponent
17782
- * value={value}
17783
- * onChange={onChange}
17784
- * />
17785
- * ),
17786
- * });
17787
- * ```
17788
- *
17789
- * ## Reference Implementation:
17790
- * See `workflow-filters.config.tsx` for a complete example (lastEditedFilterAdapter).
17791
- *
17792
- * ## Note:
17793
- * Most use cases are covered by `createCheckboxFilterAdapter` or `createDualRangeFilterAdapter`.
17794
- * Only use this base function directly when you need completely custom filter logic.
18198
+ * Base factory used by every specialized adapter. Reach for it only when
18199
+ * `createCheckboxFilterAdapter` / `createDualRangeFilterAdapter` don't fit
18200
+ * (custom UI, mixed sub-filters, bespoke chip logic).
17795
18201
  */
17796
18202
  function createFilterAdapter(config) {
17797
18203
  return {
@@ -17808,31 +18214,78 @@ function createFilterAdapter(config) {
17808
18214
  };
17809
18215
  }
17810
18216
  //#endregion
18217
+ //#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.module.scss
18218
+ var checkbox_filter_module_default = {
18219
+ "checkboxItem": "H6sVkG_checkboxItem",
18220
+ "empty": "H6sVkG_empty",
18221
+ "list": "H6sVkG_list",
18222
+ "root": "H6sVkG_root"
18223
+ };
18224
+ //#endregion
17811
18225
  //#region src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.tsx
17812
- const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange }) => {
18226
+ const CheckboxFilter = ({ items, renderer, selectedItems, onSelectionChange, searchable = false, selectAll = false, locale, className }) => {
18227
+ const { allLabel = "All", searchPlaceholder = "Search", noMatchesLabel = "No matches" } = locale ?? {};
18228
+ const [query, setQuery] = (0, react.useState)("");
18229
+ const visibleItems = searchable ? items.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase())) : items;
17813
18230
  const handleCheckedChange = (selected, checked) => {
17814
18231
  if (checked) onSelectionChange([...selectedItems, selected]);
17815
18232
  else onSelectionChange(selectedItems.filter((item) => item.value !== selected.value));
17816
18233
  };
17817
- return items.map((item) => {
17818
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
17819
- label: renderer ? renderer(item) : item.label,
17820
- checked: selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) > -1,
17821
- onCheckedChange: (newState) => handleCheckedChange(item, newState === true)
17822
- }, JSON.stringify(item.value));
18234
+ const visibleSelectedCount = visibleItems.filter((item) => selectedItems.some((selected) => selected.value === item.value)).length;
18235
+ const allVisibleSelected = visibleItems.length > 0 && visibleSelectedCount === visibleItems.length;
18236
+ const someVisibleSelected = visibleSelectedCount > 0 && !allVisibleSelected;
18237
+ const handleSelectAllChange = (next) => {
18238
+ const shouldSelect = next === true;
18239
+ const visibleValues = new Set(visibleItems.map((item) => item.value));
18240
+ const withoutVisible = selectedItems.filter((item) => !visibleValues.has(item.value));
18241
+ onSelectionChange(shouldSelect ? [...withoutVisible, ...visibleItems] : withoutVisible);
18242
+ };
18243
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18244
+ className: (0, classnames.default)(checkbox_filter_module_default.root, className),
18245
+ children: [searchable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTextInput, {
18246
+ value: query,
18247
+ placeholder: searchPlaceholder,
18248
+ onValueChange: setQuery,
18249
+ slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
18250
+ icon: "search",
18251
+ size: "tiny"
18252
+ }) }
18253
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18254
+ className: checkbox_filter_module_default.list,
18255
+ role: "group",
18256
+ children: [
18257
+ selectAll && visibleItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
18258
+ className: checkbox_filter_module_default.checkboxItem,
18259
+ label: allLabel,
18260
+ checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
18261
+ onCheckedChange: handleSelectAllChange
18262
+ }),
18263
+ visibleItems.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
18264
+ className: checkbox_filter_module_default.empty,
18265
+ children: noMatchesLabel
18266
+ }),
18267
+ visibleItems.map((item) => {
18268
+ const label = renderer ? renderer(item) : item.label;
18269
+ const checked = selectedItems.some((selected) => selected.value === item.value);
18270
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
18271
+ className: checkbox_filter_module_default.checkboxItem,
18272
+ label,
18273
+ checked,
18274
+ onCheckedChange: (next) => handleCheckedChange(item, next === true)
18275
+ }, JSON.stringify(item.value));
18276
+ })
18277
+ ]
18278
+ })]
17823
18279
  });
17824
18280
  };
17825
18281
  //#endregion
17826
18282
  //#region src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx
17827
18283
  /**
17828
- * Factory function to create a checkbox filter adapter
17829
- *
17830
- * Handles multi-select checkbox filtering with inclusion model:
17831
- * - Empty selection = show all data (no filter active)
17832
- * - Selected items = show only those items
18284
+ * Multi-select inclusion filter: empty selection shows every row, selected
18285
+ * items show only those rows.
17833
18286
  */
17834
18287
  function createCheckboxFilterAdapter(config) {
17835
- const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id) } = config;
18288
+ const { id, label, items, renderer, chipLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id), searchable = false, selectAll = false, locale } = config;
17836
18289
  return createFilterAdapter({
17837
18290
  id,
17838
18291
  label,
@@ -17864,7 +18317,10 @@ function createCheckboxFilterAdapter(config) {
17864
18317
  items,
17865
18318
  renderer,
17866
18319
  selectedItems: value,
17867
- onSelectionChange: onChange
18320
+ onSelectionChange: onChange,
18321
+ searchable,
18322
+ selectAll,
18323
+ locale
17868
18324
  });
17869
18325
  }
17870
18326
  });
@@ -17949,10 +18405,7 @@ const RangeFilter = ({ label, value, onChange, onClear }) => {
17949
18405
  };
17950
18406
  //#endregion
17951
18407
  //#region src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx
17952
- /**
17953
- * Factory function to create a dual-range filter adapter
17954
- * Handles filtering on multiple numeric ranges within a single column
17955
- */
18408
+ /** Filter over multiple numeric ranges within one column (AND across fields). */
17956
18409
  function createDualRangeFilterAdapter(config) {
17957
18410
  const { id, label, fields, formatNumber = (num) => num.toLocaleString("en-US"), getRowValue = (row) => row.getValue(id) } = config;
17958
18411
  const initialValue = {};
@@ -18031,28 +18484,16 @@ function createDualRangeFilterAdapter(config) {
18031
18484
  }
18032
18485
  //#endregion
18033
18486
  //#region src/components/ds-table/filters/hooks/use-table-filters.ts
18487
+ const resolveColumnAdapterId = (meta) => {
18488
+ if (!meta) return;
18489
+ if ("render" in meta) return meta.filterId;
18490
+ if (meta.adapter) return meta.adapter.id;
18491
+ return meta.adapterId;
18492
+ };
18034
18493
  /**
18035
- * Hook to orchestrate table filtering with adapters.
18036
- * Manages filter state, generates chips, and handles column definitions.
18037
- *
18038
- * **Uncontrolled mode** (default): Filters are managed internally.
18039
- * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
18040
- *
18041
- * @example
18042
- * // Uncontrolled mode
18043
- * const { filterChips, handlers } = useTableFilters({
18044
- * filterAdapters: adapters,
18045
- * baseColumns: columns,
18046
- * });
18047
- *
18048
- * @example
18049
- * // Controlled mode (e.g., URL-driven filtering)
18050
- * const { filterChips, handlers } = useTableFilters({
18051
- * filterAdapters: adapters,
18052
- * baseColumns: columns,
18053
- * appliedFilters: filtersFromUrl,
18054
- * onFiltersChange: (filters) => updateUrlAndRefetch(filters),
18055
- * });
18494
+ * Orchestrates table filtering: drafts → applied state, chips, nav counts, and
18495
+ * column wiring. Uncontrolled by default; pass `appliedFilters` +
18496
+ * `onFiltersChange` for URL-driven / external state.
18056
18497
  */
18057
18498
  function useTableFilters({ filterAdapters, baseColumns, appliedFilters: externalAppliedFilters, onFiltersChange: setExternalAppliedFilters }) {
18058
18499
  const _filterAdapters = filterAdapters;
@@ -18087,13 +18528,28 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
18087
18528
  count: adapter.getActiveFiltersCount(draftFilters[adapter.id])
18088
18529
  }));
18089
18530
  const enhancedColumns = !baseColumns ? [] : baseColumns.map((col) => {
18090
- const adapter = _filterAdapters.find((a) => a.id === col.id);
18531
+ const metaFilter = col.meta?.filter;
18532
+ const adapterIdFromMeta = resolveColumnAdapterId(metaFilter);
18533
+ const adapter = adapterIdFromMeta && _filterAdapters.find((a) => a.id === adapterIdFromMeta) || _filterAdapters.find((a) => a.id === col.id);
18091
18534
  if (!adapter) return col;
18092
18535
  const cellRenderer = adapter.cellRenderer;
18536
+ const appliedValue = appliedFilters[adapter.id];
18537
+ const resolvedFilter = metaFilter ? {
18538
+ filterId: adapter.id,
18539
+ hasActiveFilter: appliedValue !== void 0 && adapter.getActiveFiltersCount(appliedValue) > 0,
18540
+ render: () => renderForId(adapter.id),
18541
+ onApply: () => applyColumnFilter(adapter.id),
18542
+ onClear: () => clearColumnFilter(adapter.id),
18543
+ onCancel: () => cancelColumnFilter(adapter.id)
18544
+ } : void 0;
18093
18545
  return {
18094
18546
  ...col,
18095
18547
  filterFn: adapter.columnFilterFn,
18096
- ...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) }
18548
+ ...cellRenderer && { cell: (info) => cellRenderer(info.getValue()) },
18549
+ ...resolvedFilter && { meta: {
18550
+ ...col.meta,
18551
+ filter: resolvedFilter
18552
+ } }
18097
18553
  };
18098
18554
  });
18099
18555
  const updateFilter = (filterId, value) => {
@@ -18114,6 +18570,29 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
18114
18570
  setPendingFilters({});
18115
18571
  setAppliedFilters({});
18116
18572
  };
18573
+ const omitKey = (source, filterId) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== filterId));
18574
+ const applyColumnFilter = (filterId) => {
18575
+ const adapter = _filterAdapters.find((a) => a.id === filterId);
18576
+ if (!adapter) return;
18577
+ const draftValue = draftFilters[filterId];
18578
+ setAppliedFilters(adapter.getActiveFiltersCount(draftValue) > 0 ? {
18579
+ ...appliedFilters,
18580
+ [filterId]: draftValue
18581
+ } : omitKey(appliedFilters, filterId));
18582
+ setPendingFilters((prev) => omitKey(prev, filterId));
18583
+ };
18584
+ const cancelColumnFilter = (filterId) => {
18585
+ setPendingFilters((prev) => omitKey(prev, filterId));
18586
+ };
18587
+ const clearColumnFilter = (filterId) => {
18588
+ const adapter = _filterAdapters.find((a) => a.id === filterId);
18589
+ if (!adapter) return;
18590
+ setPendingFilters((prev) => ({
18591
+ ...omitKey(prev, filterId),
18592
+ [filterId]: adapter.initialValue
18593
+ }));
18594
+ if (appliedFilters[filterId] !== void 0) setAppliedFilters(omitKey(appliedFilters, filterId));
18595
+ };
18117
18596
  const deleteChip = (chip) => {
18118
18597
  const filterKey = typeof chip.metadata?.key === "string" ? chip.metadata.key : void 0;
18119
18598
  if (!filterKey) return;
@@ -18127,13 +18606,15 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
18127
18606
  [filterKey]: newValue
18128
18607
  });
18129
18608
  };
18130
- const renderFilterContent = (selectedFilter) => {
18131
- const adapter = _filterAdapters.find((a) => a.id === selectedFilter.id);
18609
+ const renderForId = (filterId) => {
18610
+ const adapter = _filterAdapters.find((a) => a.id === filterId);
18132
18611
  if (!adapter) return null;
18133
18612
  const value = draftFilters[adapter.id];
18134
18613
  const onChange = (newValue) => updateFilter(adapter.id, newValue);
18135
18614
  return adapter.renderFilter(value, onChange);
18136
18615
  };
18616
+ const renderFilterContent = (selectedFilter) => renderForId(selectedFilter.id);
18617
+ const renderColumnFilter = (filterId) => renderForId(filterId);
18137
18618
  return {
18138
18619
  filterState: draftFilters,
18139
18620
  columnFilters,
@@ -18144,12 +18625,94 @@ function useTableFilters({ filterAdapters, baseColumns, appliedFilters: external
18144
18625
  updateFilter,
18145
18626
  applyFilters,
18146
18627
  clearAll,
18147
- deleteChip
18628
+ deleteChip,
18629
+ applyColumnFilter,
18630
+ cancelColumnFilter,
18631
+ clearColumnFilter
18148
18632
  },
18149
- renderFilterContent
18633
+ renderFilterContent,
18634
+ renderColumnFilter
18150
18635
  };
18151
18636
  }
18152
18637
  //#endregion
18638
+ //#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.module.scss
18639
+ var column_filter_popover_module_default = {
18640
+ "body": "_0oV9a_body",
18641
+ "content": "_0oV9a_content",
18642
+ "footer": "_0oV9a_footer",
18643
+ "trigger": "_0oV9a_trigger",
18644
+ "triggerActive": "_0oV9a_triggerActive",
18645
+ "triggerOpen": "_0oV9a_triggerOpen"
18646
+ };
18647
+ //#endregion
18648
+ //#region src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.tsx
18649
+ const stopPropagation = (event) => event.stopPropagation();
18650
+ /**
18651
+ * Per-column filter popover anchored to a header cell: funnel trigger,
18652
+ * adapter UI as the body, Clear / Save footer wired to `useTableFilters`.
18653
+ */
18654
+ const DsTableColumnFilterPopover = ({ children, hasActiveFilter, onApply, onClear, onCancel, locale, className }) => {
18655
+ const { triggerAriaLabel = "Filter column", clearLabel = "Clear", saveLabel = "Save" } = locale ?? {};
18656
+ const [open, setOpen] = (0, react.useState)(false);
18657
+ const handleOpenChange = (details) => {
18658
+ if (open && !details.open) onCancel();
18659
+ setOpen(details.open);
18660
+ };
18661
+ const handleSave = () => {
18662
+ onApply();
18663
+ setOpen(false);
18664
+ };
18665
+ const handleClear = () => {
18666
+ onClear();
18667
+ setOpen(false);
18668
+ };
18669
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_popover.Popover.Root, {
18670
+ open,
18671
+ onOpenChange: handleOpenChange,
18672
+ positioning: {
18673
+ placement: "bottom-end",
18674
+ gutter: 4
18675
+ },
18676
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Trigger, {
18677
+ asChild: true,
18678
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
18679
+ variant: "tertiary",
18680
+ size: "tiny",
18681
+ className: (0, classnames.default)(column_filter_popover_module_default.trigger, hasActiveFilter && column_filter_popover_module_default.triggerActive, open && column_filter_popover_module_default.triggerOpen),
18682
+ "aria-label": triggerAriaLabel,
18683
+ "data-active": hasActiveFilter ? "true" : void 0,
18684
+ onClick: (event) => event.stopPropagation(),
18685
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
18686
+ icon: "filter_alt",
18687
+ variant: "outlined",
18688
+ filled: hasActiveFilter,
18689
+ size: "tiny"
18690
+ })
18691
+ })
18692
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ark_ui_react_popover.Popover.Content, {
18693
+ className: (0, classnames.default)(column_filter_popover_module_default.content, className),
18694
+ onClick: stopPropagation,
18695
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
18696
+ className: column_filter_popover_module_default.body,
18697
+ children
18698
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18699
+ className: column_filter_popover_module_default.footer,
18700
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
18701
+ variant: "secondary",
18702
+ size: "small",
18703
+ onClick: handleClear,
18704
+ children: clearLabel
18705
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
18706
+ variant: "primary",
18707
+ size: "small",
18708
+ onClick: handleSave,
18709
+ children: saveLabel
18710
+ })]
18711
+ })]
18712
+ }) }) })]
18713
+ });
18714
+ };
18715
+ //#endregion
18153
18716
  //#region src/components/ds-table/components/core-table/core-table.module.scss
18154
18717
  var core_table_module_default = {
18155
18718
  "table": "JP3Vta_table",
@@ -18286,6 +18849,9 @@ const DsTableBulkActions = ({ numSelectedRows, actions, onClearSelection }) => {
18286
18849
  //#endregion
18287
18850
  //#region src/components/ds-table/components/ds-table-header/ds-table-header.module.scss
18288
18851
  var ds_table_header_module_default = {
18852
+ "filterableHeader": "-2rCNG_filterableHeader",
18853
+ "filterActive": "-2rCNG_filterActive",
18854
+ "filterTriggerContainer": "-2rCNG_filterTriggerContainer",
18289
18855
  "headerCell": "-2rCNG_headerCell",
18290
18856
  "headerRow": "-2rCNG_headerRow",
18291
18857
  "headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -18320,18 +18886,83 @@ const useDsTableContext = () => {
18320
18886
  if (!context) throw new Error("useDsTableContext must be used within DsTable");
18321
18887
  return context;
18322
18888
  };
18889
+ /**
18890
+ * Hoisted editing state for single-cell-at-a-time inline editing.
18891
+ * Lives on {@link DsTableContext} so cell renderers and editors share one provider.
18892
+ */
18893
+ const useEditingState = (onCellEdit, onCellValidate) => {
18894
+ const [editing, setEditing] = (0, react.useState)(null);
18895
+ const onCellEditRef = (0, react.useRef)(onCellEdit);
18896
+ onCellEditRef.current = onCellEdit;
18897
+ const onCellValidateRef = (0, react.useRef)(onCellValidate);
18898
+ onCellValidateRef.current = onCellValidate;
18899
+ const editingRef = (0, react.useRef)(editing);
18900
+ editingRef.current = editing;
18901
+ return {
18902
+ editing,
18903
+ beginEdit: (0, react.useCallback)((cell) => {
18904
+ const current = editingRef.current;
18905
+ if (current) {
18906
+ if (current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id) return;
18907
+ }
18908
+ setEditing({
18909
+ cell,
18910
+ draftValue: cell.getValue(),
18911
+ error: null
18912
+ });
18913
+ }, []),
18914
+ setDraft: (0, react.useCallback)((value) => {
18915
+ const current = editingRef.current;
18916
+ if (!current) return;
18917
+ setEditing({
18918
+ ...current,
18919
+ draftValue: value,
18920
+ error: null
18921
+ });
18922
+ }, []),
18923
+ commit: (0, react.useCallback)((overrideValue) => {
18924
+ const current = editingRef.current;
18925
+ if (!current) return;
18926
+ const valueToCommit = overrideValue !== void 0 ? overrideValue : current.draftValue;
18927
+ const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
18928
+ if (error !== null) {
18929
+ setEditing({
18930
+ ...current,
18931
+ draftValue: valueToCommit,
18932
+ error
18933
+ });
18934
+ return;
18935
+ }
18936
+ onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
18937
+ setEditing(null);
18938
+ }, []),
18939
+ cancel: (0, react.useCallback)(() => {
18940
+ setEditing(null);
18941
+ }, [])
18942
+ };
18943
+ };
18323
18944
  //#endregion
18324
18945
  //#region src/components/ds-table/utils/column-size.ts
18325
18946
  /**
18326
- * Generates the appropriate style object for a table column/cell based on its size and virtualization state
18947
+ * Generates the appropriate style object for a table column/cell based on its size
18948
+ *
18949
+ * Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
18950
+ * they enforce horizontal overflow on the table container. Default-sized columns
18951
+ * grow to fill the row evenly via `flex: 1`.
18327
18952
  *
18328
18953
  * @param columnSize - The size of the column
18329
- * @param virtualized - Whether the table is virtualized
18330
- * @returns Style object or undefined if no custom styling is needed
18954
+ * @returns Style object for the column/cell
18331
18955
  */
18332
- const getColumnSizeStyle = (columnSize, virtualized) => {
18333
- if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return { width: columnSize };
18334
- if (virtualized) return { flex: 1 };
18956
+ const getColumnSizeStyle = (columnSize) => {
18957
+ if (columnSize !== _tanstack_react_table.defaultColumnSizing.size) return {
18958
+ width: columnSize,
18959
+ minWidth: columnSize,
18960
+ flexShrink: 0
18961
+ };
18962
+ return {
18963
+ flex: 1,
18964
+ minWidth: 0
18965
+ };
18335
18966
  };
18336
18967
  /**
18337
18968
  * Column id used for the synthetic expander column injected when `expandable` is set.
@@ -18355,33 +18986,49 @@ const DsTableHeader = ({ table }) => {
18355
18986
  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
18356
18987
  className: (0, classnames.default)(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
18357
18988
  children: headerGroup.headers.map((header) => {
18358
- const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
18989
+ const headerStyle = getColumnSizeStyle(header.column.getSize());
18359
18990
  const canSort = header.column.getCanSort();
18360
18991
  const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
18992
+ const metaFilter = header.column.columnDef.meta?.filter;
18993
+ const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
18994
+ const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
18361
18995
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
18362
- className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell),
18996
+ className: (0, classnames.default)(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell, resolvedFilter && ds_table_header_module_default.filterableHeader, hasActiveColumnFilter && ds_table_header_module_default.filterActive),
18363
18997
  onClick: header.column.getToggleSortingHandler(),
18364
18998
  style: headerStyle,
18365
18999
  children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18366
19000
  className: ds_table_header_module_default.headerSortContainer,
18367
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
18368
- direction: "column",
18369
- justifyContent: "center",
18370
- width: "100%",
18371
- children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
18372
- }), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
18373
- className: ds_table_header_module_default.pageButtonIconContainer,
18374
- children: {
18375
- asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
18376
- icon: "arrow_drop_up",
18377
- className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
18378
- }),
18379
- desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
18380
- icon: "arrow_drop_down",
18381
- className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
19001
+ children: [
19002
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
19003
+ direction: "column",
19004
+ justifyContent: "center",
19005
+ width: "100%",
19006
+ children: (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
19007
+ }),
19008
+ canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19009
+ className: ds_table_header_module_default.pageButtonIconContainer,
19010
+ children: {
19011
+ asc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
19012
+ icon: "arrow_drop_up",
19013
+ className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
19014
+ }),
19015
+ desc: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
19016
+ icon: "arrow_drop_down",
19017
+ className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
19018
+ })
19019
+ }[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
19020
+ }),
19021
+ resolvedFilter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19022
+ className: ds_table_header_module_default.filterTriggerContainer,
19023
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableColumnFilterPopover, {
19024
+ hasActiveFilter: resolvedFilter.hasActiveFilter,
19025
+ onApply: resolvedFilter.onApply,
19026
+ onClear: resolvedFilter.onClear,
19027
+ onCancel: resolvedFilter.onCancel,
19028
+ children: resolvedFilter.render()
18382
19029
  })
18383
- }[header.column.getIsSorted()] ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
18384
- })]
19030
+ })
19031
+ ]
18385
19032
  })
18386
19033
  }, header.id);
18387
19034
  })
@@ -18396,20 +19043,124 @@ var ds_table_module_default = {
18396
19043
  "dataTableContainer": "iL9mtW_dataTableContainer",
18397
19044
  "emptyState": "iL9mtW_emptyState",
18398
19045
  "fullWidth": "iL9mtW_fullWidth",
18399
- "rotate": "iL9mtW_rotate",
18400
- "rotate-135": "iL9mtW_rotate-135",
18401
- "rotate-180": "iL9mtW_rotate-180",
18402
- "rotate-225": "iL9mtW_rotate-225",
18403
- "rotate-270": "iL9mtW_rotate-270",
18404
- "rotate-315": "iL9mtW_rotate-315",
18405
- "rotate-45": "iL9mtW_rotate-45",
18406
- "rotate-90": "iL9mtW_rotate-90",
19046
+ "scrollbar-thin": "iL9mtW_scrollbar-thin",
18407
19047
  "table": "iL9mtW_table",
18408
19048
  "tableNoBorder": "iL9mtW_tableNoBorder",
18409
- "virtualized": "iL9mtW_virtualized",
18410
19049
  "virtualizedContainer": "iL9mtW_virtualizedContainer"
18411
19050
  };
18412
19051
  //#endregion
19052
+ //#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss
19053
+ var ds_table_editable_cell_module_default = {
19054
+ "editButton": "g5FEoW_editButton",
19055
+ "root": "g5FEoW_root"
19056
+ };
19057
+ //#endregion
19058
+ //#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx
19059
+ const DsTableEditableCell = ({ cell, children }) => {
19060
+ const { beginEdit, editing } = useDsTableContext();
19061
+ const isEditing = editing !== null && editing.cell.row.id === cell.row.id && editing.cell.column.id === cell.column.id;
19062
+ const handleEdit = (event) => {
19063
+ event.stopPropagation();
19064
+ beginEdit(cell);
19065
+ };
19066
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19067
+ className: ds_table_editable_cell_module_default.root,
19068
+ "data-active": isEditing ? "" : void 0,
19069
+ onDoubleClick: handleEdit,
19070
+ tabIndex: 0,
19071
+ role: "button",
19072
+ "aria-label": "Double-click to edit",
19073
+ children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
19074
+ className: ds_table_editable_cell_module_default.editButton,
19075
+ variant: "tertiary",
19076
+ size: "small",
19077
+ icon: "edit",
19078
+ "aria-label": "Edit cell",
19079
+ onClick: handleEdit
19080
+ })]
19081
+ });
19082
+ };
19083
+ //#endregion
19084
+ //#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.module.scss
19085
+ var ds_table_editing_cell_module_default = {
19086
+ "actions": "-EpLaa_actions",
19087
+ "editAnchor": "-EpLaa_editAnchor",
19088
+ "overlay": "-EpLaa_overlay",
19089
+ "row": "-EpLaa_row",
19090
+ "slot": "-EpLaa_slot"
19091
+ };
19092
+ //#endregion
19093
+ //#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx
19094
+ const DsTableEditingCell = ({ cell }) => {
19095
+ const { commit, cancel } = useDsTableContext();
19096
+ const columnDef = cell.column.columnDef;
19097
+ const editAnchorRef = (0, react.useRef)(null);
19098
+ const handleSubmit = (event) => {
19099
+ event.preventDefault();
19100
+ event.stopPropagation();
19101
+ commit();
19102
+ };
19103
+ (0, react.useEffect)(() => {
19104
+ const handleKeyDown = (event) => {
19105
+ if (event.key !== "Escape") return;
19106
+ if (!editAnchorRef.current?.contains(document.activeElement)) return;
19107
+ event.preventDefault();
19108
+ event.stopPropagation();
19109
+ cancel();
19110
+ };
19111
+ document.addEventListener("keydown", handleKeyDown);
19112
+ return () => {
19113
+ document.removeEventListener("keydown", handleKeyDown);
19114
+ };
19115
+ }, [cancel]);
19116
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19117
+ ref: editAnchorRef,
19118
+ className: ds_table_editing_cell_module_default.editAnchor,
19119
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
19120
+ className: ds_table_editing_cell_module_default.overlay,
19121
+ onSubmit: handleSubmit,
19122
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
19123
+ direction: "row",
19124
+ gap: "var(--3xs)",
19125
+ alignItems: "flex-start",
19126
+ width: "100%",
19127
+ className: ds_table_editing_cell_module_default.row,
19128
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsStack, {
19129
+ flex: "1 1 auto",
19130
+ className: ds_table_editing_cell_module_default.slot,
19131
+ children: columnDef.editCell ? (0, _tanstack_react_table.flexRender)(columnDef.editCell, cell.getContext()) : null
19132
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsStack, {
19133
+ direction: "row",
19134
+ gap: "var(--3xs)",
19135
+ className: ds_table_editing_cell_module_default.actions,
19136
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
19137
+ type: "button",
19138
+ variant: "tertiary",
19139
+ size: "small",
19140
+ icon: "close",
19141
+ "aria-label": "Cancel edit",
19142
+ onClick: (event) => {
19143
+ event.stopPropagation();
19144
+ cancel();
19145
+ },
19146
+ style: { color: "var(--icon-error)" }
19147
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
19148
+ type: "submit",
19149
+ variant: "tertiary",
19150
+ size: "small",
19151
+ icon: "check",
19152
+ "aria-label": "Confirm edit",
19153
+ onClick: (event) => {
19154
+ event.stopPropagation();
19155
+ },
19156
+ style: { color: "var(--icon-success)" }
19157
+ })]
19158
+ })]
19159
+ })
19160
+ })
19161
+ });
19162
+ };
19163
+ //#endregion
18413
19164
  //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss
18414
19165
  var ds_table_cell_module_default = {
18415
19166
  "cellActions": "UprPSq_cellActions",
@@ -18421,20 +19172,19 @@ var ds_table_cell_module_default = {
18421
19172
  };
18422
19173
  //#endregion
18423
19174
  //#region src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx
18424
- const DsDefaultTableCell = ({ cell }) => {
18425
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
18426
- className: ds_table_cell_module_default.tableCellEllipsis,
18427
- children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
18428
- });
18429
- };
18430
19175
  const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions = [] }) => {
19176
+ const { editing } = useDsTableContext();
19177
+ const isCellBeingEdited = editing !== null && editing.cell.row.id === row.id && editing.cell.column.id === cell.column.id;
18431
19178
  const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
18432
19179
  const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
18433
- if (visiblePrimary.length || visibleSecondary.length) {
19180
+ if (!isCellBeingEdited && (visiblePrimary.length || visibleSecondary.length)) {
18434
19181
  const hasSecondaryRowActions = visibleSecondary.length > 0;
18435
19182
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18436
19183
  className: ds_table_cell_module_default.lastCell,
18437
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19184
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
19185
+ cell,
19186
+ isCellBeingEdited
19187
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
18438
19188
  className: ds_table_cell_module_default.cellActions,
18439
19189
  children: [visiblePrimary.map((action, i) => {
18440
19190
  const isDisabled = action.disabled?.(row.original);
@@ -18485,13 +19235,32 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
18485
19235
  })]
18486
19236
  });
18487
19237
  }
18488
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsDefaultTableCell, { cell });
19238
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContent, {
19239
+ cell,
19240
+ isCellBeingEdited
19241
+ });
19242
+ };
19243
+ const CellContent = ({ cell, isCellBeingEdited }) => {
19244
+ const isEditable = typeof cell.column.columnDef.editCell === "function";
19245
+ if (isCellBeingEdited) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditingCell, { cell });
19246
+ if (isEditable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableEditableCell, {
19247
+ cell,
19248
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19249
+ className: ds_table_cell_module_default.tableCellEllipsis,
19250
+ children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
19251
+ })
19252
+ });
19253
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19254
+ className: ds_table_cell_module_default.tableCellEllipsis,
19255
+ children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
19256
+ });
18489
19257
  };
18490
19258
  //#endregion
18491
19259
  //#region src/components/ds-table/components/ds-table-row/ds-table-row.module.scss
18492
19260
  var ds_table_row_module_default = {
18493
19261
  "cellReorder": "t8OZCq_cellReorder",
18494
19262
  "clickableRow": "t8OZCq_clickableRow",
19263
+ "editableCell": "t8OZCq_editableCell",
18495
19264
  "expandableCell": "t8OZCq_expandableCell",
18496
19265
  "expanded": "t8OZCq_expanded",
18497
19266
  "expandedRow": "t8OZCq_expandedRow",
@@ -18560,7 +19329,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18560
19329
  }, cell.id);
18561
19330
  const isLastColumn = idx === row.getVisibleCells().length - 1;
18562
19331
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
18563
- className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell),
19332
+ className: (0, classnames.default)(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_module_default.editableCell),
18564
19333
  style: cellStyle,
18565
19334
  children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
18566
19335
  row,
@@ -18680,13 +19449,16 @@ function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
18680
19449
  //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.module.scss
18681
19450
  var ds_table_body_virtualized_module_default = {
18682
19451
  "body": "vRRk8q_body",
18683
- "emptyState": "vRRk8q_emptyState"
19452
+ "emptyState": "vRRk8q_emptyState",
19453
+ "scrollbar-thin": "vRRk8q_scrollbar-thin",
19454
+ "sentinel": "vRRk8q_sentinel"
18684
19455
  };
18685
19456
  //#endregion
18686
19457
  //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss
18687
19458
  var ds_table_row_virtualized_module_default = {
18688
19459
  "cell": "NcME7q_cell",
18689
19460
  "clickableRow": "NcME7q_clickableRow",
19461
+ "editableCell": "NcME7q_editableCell",
18690
19462
  "expandableCell": "NcME7q_expandableCell",
18691
19463
  "expanded": "NcME7q_expanded",
18692
19464
  "expandedRow": "NcME7q_expandedRow",
@@ -18726,8 +19498,8 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
18726
19498
  children: isExpandedRowContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: row.getVisibleCells().map((cell, idx) => {
18727
19499
  const isLastColumn = idx === row.getVisibleCells().length - 1;
18728
19500
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
18729
- style: getColumnSizeStyle(cell.column.getSize(), true),
18730
- className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell),
19501
+ style: getColumnSizeStyle(cell.column.getSize()),
19502
+ className: (0, classnames.default)(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell, cell.column.id === "select" && ds_table_row_virtualized_module_default.selectableCell, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
18731
19503
  children: isLastColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableCell, {
18732
19504
  row,
18733
19505
  cell,
@@ -18772,9 +19544,10 @@ const useInfiniteScroll = (scrollElementRef, rowCount, config) => {
18772
19544
  };
18773
19545
  //#endregion
18774
19546
  //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx
18775
- const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
19547
+ const DsTableBodyVirtualized = ({ table, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
18776
19548
  const rowsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
18777
19549
  const rowHeightsMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
19550
+ const tbodyRef = (0, react.useRef)(null);
18778
19551
  const { rows } = table.getRowModel();
18779
19552
  const rowsAndExpandedRowContent = rows.flatMap((row) => row.getIsExpanded() ? [{ row }, {
18780
19553
  row,
@@ -18784,14 +19557,14 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
18784
19557
  const item = rowsAndExpandedRowContent[index];
18785
19558
  return item ? `${item.row.id}${item.isExpandedRowContent ? "-expanded-content" : ""}` : String(index);
18786
19559
  };
18787
- const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
19560
+ const { loadDataIfNeeded } = useInfiniteScroll(tbodyRef, rows.length, infiniteScroll);
18788
19561
  const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
18789
19562
  count: rowsAndExpandedRowContent.length,
18790
19563
  estimateSize: (index) => {
18791
19564
  return rowHeightsMapRef.current.get(getItemKey(index)) || estimateSize;
18792
19565
  },
18793
19566
  getItemKey,
18794
- getScrollElement: () => tableContainerRef.current,
19567
+ getScrollElement: () => tbodyRef.current,
18795
19568
  measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element.getBoundingClientRect().height : void 0,
18796
19569
  overscan: overscan ?? 5,
18797
19570
  onChange: (instance, sync) => {
@@ -18824,6 +19597,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
18824
19597
  rowVirtualizer.measure();
18825
19598
  }, [table.getState()]);
18826
19599
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBody, {
19600
+ ref: tbodyRef,
18827
19601
  rowsMapRef,
18828
19602
  rowHeightsMapRef,
18829
19603
  rowVirtualizer,
@@ -18832,12 +19606,13 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
18832
19606
  rowSelection
18833
19607
  });
18834
19608
  };
18835
- function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
19609
+ function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpandedRowContent, emptyState, rowSelection }) {
18836
19610
  const virtualRows = rowVirtualizer.getVirtualItems();
18837
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, {
19611
+ const totalSize = rowVirtualizer.getTotalSize();
19612
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBody, {
19613
+ ref,
18838
19614
  className: ds_table_body_virtualized_module_default.body,
18839
- style: { height: `${rowVirtualizer.getTotalSize().toString()}px` },
18840
- children: virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
19615
+ children: [virtualRows.length > 0 ? virtualRows.map((virtualRow) => {
18841
19616
  const row = rowsAndExpandedRowContent[virtualRow.index];
18842
19617
  if (!row) return null;
18843
19618
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableRowVirtualized, {
@@ -18852,7 +19627,12 @@ function DsTableBody({ rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAndExpa
18852
19627
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
18853
19628
  className: ds_table_body_virtualized_module_default.emptyState,
18854
19629
  children: emptyState || "No results."
18855
- }) })
19630
+ }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
19631
+ "aria-hidden": true,
19632
+ className: ds_table_body_virtualized_module_default.sentinel,
19633
+ style: { top: `${totalSize.toString()}px` },
19634
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {})
19635
+ })]
18856
19636
  });
18857
19637
  }
18858
19638
  //#endregion
@@ -18865,7 +19645,7 @@ const ROW_SIZE_HEIGHT_MAP = {
18865
19645
  /**
18866
19646
  * Design system Table component
18867
19647
  */
18868
- const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll }) => {
19648
+ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
18869
19649
  const [data, setData] = react.useState(tableData);
18870
19650
  const [sorting, setSorting] = react.useState([]);
18871
19651
  const [internalColumnFilters, setInternalColumnFilters] = react.useState([]);
@@ -19031,18 +19811,19 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
19031
19811
  secondaryRowActions,
19032
19812
  renderExpandedRow,
19033
19813
  virtualized,
19034
- activeRowId
19814
+ activeRowId,
19815
+ onCellEdit,
19816
+ ...useEditingState(onCellEdit, onCellValidate)
19035
19817
  };
19036
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsTableContext.Provider, {
19818
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableContext.Provider, {
19037
19819
  value: contextValue,
19038
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
19820
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19039
19821
  ref: tableContainerRef,
19040
19822
  className: (0, classnames.default)(ds_table_module_default.container, !virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
19041
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
19042
- className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder, virtualized && ds_table_module_default.virtualized),
19823
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
19824
+ className: (0, classnames.default)(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
19043
19825
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBodyVirtualized, {
19044
19826
  table,
19045
- tableContainerRef,
19046
19827
  emptyState,
19047
19828
  estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
19048
19829
  overscan: virtualizedOptions?.overscan,
@@ -19053,15 +19834,175 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
19053
19834
  row,
19054
19835
  isSelected: !!rowSelection[row.id]
19055
19836
  }, row.id)) : renderEmptyState() }) })]
19056
- }) })
19057
- }), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
19058
- numSelectedRows: selectedRows.length,
19059
- actions: actions.map((action) => ({
19060
- ...action,
19061
- onClick: () => action.onClick(selectedRows)
19062
- })),
19063
- onClearSelection: table.resetRowSelection
19064
- })]
19837
+ }) }), selectable && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTableBulkActions, {
19838
+ numSelectedRows: selectedRows.length,
19839
+ actions: actions.map((action) => ({
19840
+ ...action,
19841
+ onClick: () => action.onClick(selectedRows)
19842
+ })),
19843
+ onClearSelection: table.resetRowSelection
19844
+ })]
19845
+ })
19846
+ });
19847
+ };
19848
+ //#endregion
19849
+ //#region src/components/ds-table/hooks/use-cell-editor.ts
19850
+ /**
19851
+ * Wires a TanStack Table `editCell` renderer into DsTable's hoisted editing state.
19852
+ * Only mount this hook inside `ColumnDef.editCell` — the table cell layer handles
19853
+ * entering edit mode on double-click.
19854
+ */
19855
+ const useCellEditor = ({ cellContext }) => {
19856
+ const ctx = useDsTableContext();
19857
+ const { row, column, getValue } = cellContext;
19858
+ const isActiveCell = ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
19859
+ const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
19860
+ const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
19861
+ const setValue = (next) => {
19862
+ ctx.setDraft(next);
19863
+ };
19864
+ const commit = (overrideValue) => {
19865
+ ctx.commit(overrideValue);
19866
+ };
19867
+ const cancel = () => {
19868
+ ctx.cancel();
19869
+ };
19870
+ const stopPropagation = (event) => {
19871
+ event.stopPropagation();
19872
+ };
19873
+ return {
19874
+ value,
19875
+ error,
19876
+ setValue,
19877
+ commit,
19878
+ cancel,
19879
+ stopPropagation,
19880
+ editorContainerProps: {
19881
+ onKeyDown: () => {},
19882
+ onClick: stopPropagation,
19883
+ onDoubleClick: stopPropagation
19884
+ }
19885
+ };
19886
+ };
19887
+ //#endregion
19888
+ //#region src/components/ds-table/components/edit/cell-editors/cell-editors.module.scss
19889
+ var cell_editors_module_default = { "fullWidth": "m8hPaq_fullWidth" };
19890
+ //#endregion
19891
+ //#region src/components/ds-table/components/edit/cell-editors/table-edit-form-control.tsx
19892
+ const TableEditFormControl = ({ cellContext, error, children }) => {
19893
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl, {
19894
+ hideLabel: true,
19895
+ label: String(cellContext.column.columnDef.header ?? cellContext.column.id),
19896
+ className: cell_editors_module_default.fullWidth,
19897
+ status: error ? "error" : void 0,
19898
+ message: error ?? void 0,
19899
+ messageIcon: "cancel",
19900
+ children
19901
+ });
19902
+ };
19903
+ //#endregion
19904
+ //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx
19905
+ /** Text input editor for table cells. Render via `ColumnDef.editCell`. */
19906
+ const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
19907
+ const { value, setValue, error } = useCellEditor({ cellContext });
19908
+ const inputRef = (0, react.useRef)(null);
19909
+ (0, react.useEffect)(() => {
19910
+ const input = inputRef.current;
19911
+ if (!input) return;
19912
+ input.focus();
19913
+ input.select();
19914
+ }, []);
19915
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
19916
+ cellContext,
19917
+ error,
19918
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.TextInput, {
19919
+ ref: inputRef,
19920
+ className: cell_editors_module_default.fullWidth,
19921
+ value,
19922
+ placeholder,
19923
+ maxLength,
19924
+ onValueChange: setValue,
19925
+ slots: error ? { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
19926
+ icon: "error",
19927
+ size: "tiny"
19928
+ }) } : void 0
19929
+ })
19930
+ });
19931
+ };
19932
+ //#endregion
19933
+ //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx
19934
+ /** Number input editor for table cells. Render via `ColumnDef.editCell`. */
19935
+ const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
19936
+ const { value, setValue, error } = useCellEditor({ cellContext });
19937
+ const inputRef = (0, react.useRef)(null);
19938
+ (0, react.useEffect)(() => {
19939
+ const input = inputRef.current;
19940
+ if (!input) return;
19941
+ input.focus();
19942
+ input.select();
19943
+ }, []);
19944
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
19945
+ cellContext,
19946
+ error,
19947
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.NumberInput, {
19948
+ ref: inputRef,
19949
+ className: cell_editors_module_default.fullWidth,
19950
+ value,
19951
+ min,
19952
+ max,
19953
+ step,
19954
+ onValueChange: setValue
19955
+ })
19956
+ });
19957
+ };
19958
+ //#endregion
19959
+ //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx
19960
+ /** Select editor for table cells. Render via `ColumnDef.editCell`. */
19961
+ const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
19962
+ const { value, setValue, error } = useCellEditor({ cellContext });
19963
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
19964
+ cellContext,
19965
+ error,
19966
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.Select, {
19967
+ className: cell_editors_module_default.fullWidth,
19968
+ value,
19969
+ options,
19970
+ placeholder,
19971
+ onValueChange: setValue
19972
+ })
19973
+ });
19974
+ };
19975
+ //#endregion
19976
+ //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx
19977
+ /** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
19978
+ const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
19979
+ const { value, setValue, error } = useCellEditor({ cellContext });
19980
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditFormControl, {
19981
+ cellContext,
19982
+ error,
19983
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsFormControl.DatePicker, {
19984
+ className: cell_editors_module_default.fullWidth,
19985
+ value,
19986
+ min,
19987
+ max,
19988
+ placeholder,
19989
+ onChange: setValue,
19990
+ slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
19991
+ icon: "error",
19992
+ size: "tiny"
19993
+ }) } } } : void 0
19994
+ })
19995
+ });
19996
+ };
19997
+ //#endregion
19998
+ //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx
19999
+ /** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
20000
+ const DsTableEditCellCheckbox = ({ cellContext, disabled }) => {
20001
+ const { value, setValue } = useCellEditor({ cellContext });
20002
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsCheckbox, {
20003
+ checked: value,
20004
+ disabled,
20005
+ onCheckedChange: (checked) => setValue(checked === true)
19065
20006
  });
19066
20007
  };
19067
20008
  //#endregion
@@ -20024,19 +20965,37 @@ DsVerticalTabs.List = DsVerticalTabsList;
20024
20965
  DsVerticalTabs.Tab = DsVerticalTabsTab;
20025
20966
  DsVerticalTabs.Content = DsVerticalTabsContent;
20026
20967
  //#endregion
20027
- //#region src/components/ds-workspace/ds-workspace.module.scss
20028
- var ds_workspace_module_default = {
20029
- "content": "XEdo8q_content",
20030
- "fillParent": "XEdo8q_fillParent",
20031
- "footer": "XEdo8q_footer",
20032
- "header": "XEdo8q_header",
20033
- "root": "XEdo8q_root",
20034
- "subHeader": "XEdo8q_subHeader"
20968
+ //#region src/components/ds-workspace-layout/ds-workspace-layout.module.scss
20969
+ var ds_workspace_layout_module_default = {
20970
+ "body": "pc7Upa_body",
20971
+ "content": "pc7Upa_content",
20972
+ "contentWithLeftPanel": "pc7Upa_contentWithLeftPanel",
20973
+ "fillParent": "pc7Upa_fillParent",
20974
+ "footer": "pc7Upa_footer",
20975
+ "header": "pc7Upa_header",
20976
+ "leftPanel": "pc7Upa_leftPanel",
20977
+ "root": "pc7Upa_root",
20978
+ "sideMenu": "pc7Upa_sideMenu",
20979
+ "sideMenuPanel": "pc7Upa_sideMenuPanel",
20980
+ "sideMenuPinButton": "pc7Upa_sideMenuPinButton",
20981
+ "subHeader": "pc7Upa_subHeader"
20982
+ };
20983
+ //#endregion
20984
+ //#region src/components/ds-workspace-layout/ds-workspace-layout.context.ts
20985
+ const DsWorkspaceLayoutContext = (0, react.createContext)(null);
20986
+ const useDsWorkspaceLayoutContext = () => {
20987
+ const context = (0, react.useContext)(DsWorkspaceLayoutContext);
20988
+ if (!context) throw new Error("DsWorkspaceLayout compound components must be used within DsWorkspaceLayout");
20989
+ return context;
20035
20990
  };
20036
20991
  //#endregion
20037
- //#region src/components/ds-workspace/ds-workspace.tsx
20038
- const DsWorkspace = (t0) => {
20039
- const $ = (0, react_compiler_runtime.c)(10);
20992
+ //#region src/components/ds-workspace-layout/ds-workspace-layout.tsx
20993
+ const DEFAULT_LOCALE = Object.freeze({
20994
+ pinButtonLabel: "Pin side menu",
20995
+ unpinButtonLabel: "Unpin side menu"
20996
+ });
20997
+ const DsWorkspaceLayout = (t0) => {
20998
+ const $ = (0, react_compiler_runtime.c)(17);
20040
20999
  let className;
20041
21000
  let rest;
20042
21001
  let t1;
@@ -20052,24 +21011,58 @@ const DsWorkspace = (t0) => {
20052
21011
  t1 = $[3];
20053
21012
  }
20054
21013
  const fillParent = t1 === void 0 ? false : t1;
21014
+ const [hasLeftSidePanel, setHasLeftSidePanel] = (0, react.useState)(false);
20055
21015
  let t2;
20056
- if ($[4] !== className || $[5] !== fillParent) {
20057
- t2 = (0, classnames.default)(ds_workspace_module_default.root, { [ds_workspace_module_default.fillParent]: fillParent }, className);
20058
- $[4] = className;
20059
- $[5] = fillParent;
20060
- $[6] = t2;
20061
- } else t2 = $[6];
21016
+ if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
21017
+ t2 = () => setHasLeftSidePanel(true);
21018
+ $[4] = t2;
21019
+ } else t2 = $[4];
21020
+ const registerLeftSidePanel = t2;
20062
21021
  let t3;
20063
- if ($[7] !== rest || $[8] !== t2) {
20064
- t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
21022
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
21023
+ t3 = () => setHasLeftSidePanel(false);
21024
+ $[5] = t3;
21025
+ } else t3 = $[5];
21026
+ const unregisterLeftSidePanel = t3;
21027
+ let t4;
21028
+ if ($[6] !== hasLeftSidePanel) {
21029
+ t4 = {
21030
+ hasLeftSidePanel,
21031
+ registerLeftSidePanel,
21032
+ unregisterLeftSidePanel
21033
+ };
21034
+ $[6] = hasLeftSidePanel;
21035
+ $[7] = t4;
21036
+ } else t4 = $[7];
21037
+ const contextValue = t4;
21038
+ let t5;
21039
+ if ($[8] !== className || $[9] !== fillParent) {
21040
+ t5 = (0, classnames.default)(ds_workspace_layout_module_default.root, { [ds_workspace_layout_module_default.fillParent]: fillParent }, className);
21041
+ $[8] = className;
21042
+ $[9] = fillParent;
21043
+ $[10] = t5;
21044
+ } else t5 = $[10];
21045
+ let t6;
21046
+ if ($[11] !== rest || $[12] !== t5) {
21047
+ t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
20065
21048
  ...rest,
20066
- className: t2
21049
+ className: t5
20067
21050
  });
20068
- $[7] = rest;
20069
- $[8] = t2;
20070
- $[9] = t3;
20071
- } else t3 = $[9];
20072
- return t3;
21051
+ $[11] = rest;
21052
+ $[12] = t5;
21053
+ $[13] = t6;
21054
+ } else t6 = $[13];
21055
+ let t7;
21056
+ if ($[14] !== contextValue || $[15] !== t6) {
21057
+ t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsWorkspaceLayoutContext.Provider, {
21058
+ value: contextValue,
21059
+ children: t6
21060
+ });
21061
+ $[14] = contextValue;
21062
+ $[15] = t6;
21063
+ $[16] = t7;
21064
+ } else t7 = $[16];
21065
+ return t7;
20073
21066
  };
20074
21067
  const Header = (t0) => {
20075
21068
  const $ = (0, react_compiler_runtime.c)(8);
@@ -20086,7 +21079,7 @@ const Header = (t0) => {
20086
21079
  }
20087
21080
  let t1;
20088
21081
  if ($[3] !== className) {
20089
- t1 = (0, classnames.default)(ds_workspace_module_default.header, className);
21082
+ t1 = (0, classnames.default)(ds_workspace_layout_module_default.header, className);
20090
21083
  $[3] = className;
20091
21084
  $[4] = t1;
20092
21085
  } else t1 = $[4];
@@ -20117,7 +21110,7 @@ const SubHeader = (t0) => {
20117
21110
  }
20118
21111
  let t1;
20119
21112
  if ($[3] !== className) {
20120
- t1 = (0, classnames.default)(ds_workspace_module_default.subHeader, className);
21113
+ t1 = (0, classnames.default)(ds_workspace_layout_module_default.subHeader, className);
20121
21114
  $[3] = className;
20122
21115
  $[4] = t1;
20123
21116
  } else t1 = $[4];
@@ -20133,8 +21126,41 @@ const SubHeader = (t0) => {
20133
21126
  } else t2 = $[7];
20134
21127
  return t2;
20135
21128
  };
20136
- /** Stacking context for non-portal drawer containment. */
21129
+ /** Content area: column layout, 24px vertical margins, 16px gap, 40px horizontal margins (24px when LeftPanel is mounted). */
20137
21130
  const Content = (t0) => {
21131
+ const $ = (0, react_compiler_runtime.c)(9);
21132
+ let className;
21133
+ let rest;
21134
+ if ($[0] !== t0) {
21135
+ ({className, ...rest} = t0);
21136
+ $[0] = t0;
21137
+ $[1] = className;
21138
+ $[2] = rest;
21139
+ } else {
21140
+ className = $[1];
21141
+ rest = $[2];
21142
+ }
21143
+ const { hasLeftSidePanel } = useDsWorkspaceLayoutContext();
21144
+ let t1;
21145
+ if ($[3] !== className || $[4] !== hasLeftSidePanel) {
21146
+ t1 = (0, classnames.default)(ds_workspace_layout_module_default.content, { [ds_workspace_layout_module_default.contentWithLeftPanel]: hasLeftSidePanel }, className);
21147
+ $[3] = className;
21148
+ $[4] = hasLeftSidePanel;
21149
+ $[5] = t1;
21150
+ } else t1 = $[5];
21151
+ let t2;
21152
+ if ($[6] !== rest || $[7] !== t1) {
21153
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
21154
+ ...rest,
21155
+ className: t1
21156
+ });
21157
+ $[6] = rest;
21158
+ $[7] = t1;
21159
+ $[8] = t2;
21160
+ } else t2 = $[8];
21161
+ return t2;
21162
+ };
21163
+ const Footer = (t0) => {
20138
21164
  const $ = (0, react_compiler_runtime.c)(8);
20139
21165
  let className;
20140
21166
  let rest;
@@ -20149,13 +21175,13 @@ const Content = (t0) => {
20149
21175
  }
20150
21176
  let t1;
20151
21177
  if ($[3] !== className) {
20152
- t1 = (0, classnames.default)(ds_workspace_module_default.content, className);
21178
+ t1 = (0, classnames.default)(ds_workspace_layout_module_default.footer, className);
20153
21179
  $[3] = className;
20154
21180
  $[4] = t1;
20155
21181
  } else t1 = $[4];
20156
21182
  let t2;
20157
21183
  if ($[5] !== rest || $[6] !== t1) {
20158
- t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
21184
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
20159
21185
  ...rest,
20160
21186
  className: t1
20161
21187
  });
@@ -20165,7 +21191,7 @@ const Content = (t0) => {
20165
21191
  } else t2 = $[7];
20166
21192
  return t2;
20167
21193
  };
20168
- const Footer = (t0) => {
21194
+ const Body = (t0) => {
20169
21195
  const $ = (0, react_compiler_runtime.c)(8);
20170
21196
  let className;
20171
21197
  let rest;
@@ -20178,15 +21204,16 @@ const Footer = (t0) => {
20178
21204
  className = $[1];
20179
21205
  rest = $[2];
20180
21206
  }
21207
+ useDsWorkspaceLayoutContext();
20181
21208
  let t1;
20182
21209
  if ($[3] !== className) {
20183
- t1 = (0, classnames.default)(ds_workspace_module_default.footer, className);
21210
+ t1 = (0, classnames.default)(ds_workspace_layout_module_default.body, className);
20184
21211
  $[3] = className;
20185
21212
  $[4] = t1;
20186
21213
  } else t1 = $[4];
20187
21214
  let t2;
20188
21215
  if ($[5] !== rest || $[6] !== t1) {
20189
- t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
21216
+ t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
20190
21217
  ...rest,
20191
21218
  className: t1
20192
21219
  });
@@ -20196,10 +21223,170 @@ const Footer = (t0) => {
20196
21223
  } else t2 = $[7];
20197
21224
  return t2;
20198
21225
  };
20199
- DsWorkspace.Header = Header;
20200
- DsWorkspace.SubHeader = SubHeader;
20201
- DsWorkspace.Content = Content;
20202
- DsWorkspace.Footer = Footer;
21226
+ const SideMenu = (t0) => {
21227
+ const $ = (0, react_compiler_runtime.c)(28);
21228
+ let children;
21229
+ let className;
21230
+ let locale;
21231
+ let onPinnedChange;
21232
+ let rest;
21233
+ let t1;
21234
+ if ($[0] !== t0) {
21235
+ ({className, pinned: t1, onPinnedChange, locale, children, ...rest} = t0);
21236
+ $[0] = t0;
21237
+ $[1] = children;
21238
+ $[2] = className;
21239
+ $[3] = locale;
21240
+ $[4] = onPinnedChange;
21241
+ $[5] = rest;
21242
+ $[6] = t1;
21243
+ } else {
21244
+ children = $[1];
21245
+ className = $[2];
21246
+ locale = $[3];
21247
+ onPinnedChange = $[4];
21248
+ rest = $[5];
21249
+ t1 = $[6];
21250
+ }
21251
+ const pinned = t1 === void 0 ? false : t1;
21252
+ useDsWorkspaceLayoutContext();
21253
+ const [isHovering, setIsHovering] = (0, react.useState)(false);
21254
+ const isExpanded = pinned || isHovering;
21255
+ const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
21256
+ let t2;
21257
+ if ($[7] !== className) {
21258
+ t2 = (0, classnames.default)(ds_workspace_layout_module_default.sideMenu, className);
21259
+ $[7] = className;
21260
+ $[8] = t2;
21261
+ } else t2 = $[8];
21262
+ let t3;
21263
+ if ($[9] !== pinned) {
21264
+ t3 = pinned ? { "data-pinned": "" } : {};
21265
+ $[9] = pinned;
21266
+ $[10] = t3;
21267
+ } else t3 = $[10];
21268
+ let t4;
21269
+ if ($[11] !== isExpanded) {
21270
+ t4 = isExpanded ? { "data-expanded": "" } : {};
21271
+ $[11] = isExpanded;
21272
+ $[12] = t4;
21273
+ } else t4 = $[12];
21274
+ let t5;
21275
+ let t6;
21276
+ if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
21277
+ t5 = () => setIsHovering(true);
21278
+ t6 = () => setIsHovering(false);
21279
+ $[13] = t5;
21280
+ $[14] = t6;
21281
+ } else {
21282
+ t5 = $[13];
21283
+ t6 = $[14];
21284
+ }
21285
+ let t7;
21286
+ if ($[15] !== ariaLabel || $[16] !== onPinnedChange || $[17] !== pinned) {
21287
+ t7 = onPinnedChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
21288
+ type: "button",
21289
+ className: ds_workspace_layout_module_default.sideMenuPinButton,
21290
+ onClick: () => onPinnedChange(!pinned),
21291
+ "aria-label": ariaLabel,
21292
+ "aria-pressed": pinned,
21293
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
21294
+ icon: "keep",
21295
+ size: "small",
21296
+ filled: pinned
21297
+ })
21298
+ }) : null;
21299
+ $[15] = ariaLabel;
21300
+ $[16] = onPinnedChange;
21301
+ $[17] = pinned;
21302
+ $[18] = t7;
21303
+ } else t7 = $[18];
21304
+ let t8;
21305
+ if ($[19] !== children || $[20] !== t7) {
21306
+ t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
21307
+ className: ds_workspace_layout_module_default.sideMenuPanel,
21308
+ onMouseEnter: t5,
21309
+ onMouseLeave: t6,
21310
+ children: [t7, children]
21311
+ });
21312
+ $[19] = children;
21313
+ $[20] = t7;
21314
+ $[21] = t8;
21315
+ } else t8 = $[21];
21316
+ let t9;
21317
+ if ($[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t8) {
21318
+ t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
21319
+ ...rest,
21320
+ className: t2,
21321
+ ...t3,
21322
+ ...t4,
21323
+ children: t8
21324
+ });
21325
+ $[22] = rest;
21326
+ $[23] = t2;
21327
+ $[24] = t3;
21328
+ $[25] = t4;
21329
+ $[26] = t8;
21330
+ $[27] = t9;
21331
+ } else t9 = $[27];
21332
+ return t9;
21333
+ };
21334
+ const LeftPanel = (t0) => {
21335
+ const $ = (0, react_compiler_runtime.c)(12);
21336
+ let className;
21337
+ let rest;
21338
+ if ($[0] !== t0) {
21339
+ ({className, ...rest} = t0);
21340
+ $[0] = t0;
21341
+ $[1] = className;
21342
+ $[2] = rest;
21343
+ } else {
21344
+ className = $[1];
21345
+ rest = $[2];
21346
+ }
21347
+ const { registerLeftSidePanel, unregisterLeftSidePanel } = useDsWorkspaceLayoutContext();
21348
+ let t1;
21349
+ let t2;
21350
+ if ($[3] !== registerLeftSidePanel || $[4] !== unregisterLeftSidePanel) {
21351
+ t1 = () => {
21352
+ registerLeftSidePanel();
21353
+ return unregisterLeftSidePanel;
21354
+ };
21355
+ t2 = [registerLeftSidePanel, unregisterLeftSidePanel];
21356
+ $[3] = registerLeftSidePanel;
21357
+ $[4] = unregisterLeftSidePanel;
21358
+ $[5] = t1;
21359
+ $[6] = t2;
21360
+ } else {
21361
+ t1 = $[5];
21362
+ t2 = $[6];
21363
+ }
21364
+ (0, react.useEffect)(t1, t2);
21365
+ let t3;
21366
+ if ($[7] !== className) {
21367
+ t3 = (0, classnames.default)(ds_workspace_layout_module_default.leftPanel, className);
21368
+ $[7] = className;
21369
+ $[8] = t3;
21370
+ } else t3 = $[8];
21371
+ let t4;
21372
+ if ($[9] !== rest || $[10] !== t3) {
21373
+ t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
21374
+ ...rest,
21375
+ className: t3
21376
+ });
21377
+ $[9] = rest;
21378
+ $[10] = t3;
21379
+ $[11] = t4;
21380
+ } else t4 = $[11];
21381
+ return t4;
21382
+ };
21383
+ DsWorkspaceLayout.Header = Header;
21384
+ DsWorkspaceLayout.SubHeader = SubHeader;
21385
+ DsWorkspaceLayout.Content = Content;
21386
+ DsWorkspaceLayout.Footer = Footer;
21387
+ DsWorkspaceLayout.Body = Body;
21388
+ DsWorkspaceLayout.SideMenu = SideMenu;
21389
+ DsWorkspaceLayout.LeftPanel = LeftPanel;
20203
21390
  //#endregion
20204
21391
  exports.BREAKPOINT_LG = BREAKPOINT_LG;
20205
21392
  exports.DsAlertBanner = DsAlertBanner;
@@ -20210,6 +21397,7 @@ exports.DsBreadcrumb = DsBreadcrumb;
20210
21397
  exports.DsButton = DsButton;
20211
21398
  exports.DsButtonV3 = DsButtonV3;
20212
21399
  exports.DsCard = DsCard;
21400
+ exports.DsCatalogLayout = DsCatalogLayout;
20213
21401
  exports.DsCheckbox = DsCheckbox;
20214
21402
  exports.DsCheckboxGroup = DsCheckboxGroup;
20215
21403
  exports.DsChip = DsChip;
@@ -20265,6 +21453,14 @@ exports.DsStepContent = DsStepContent;
20265
21453
  exports.DsStepper = DsStepper;
20266
21454
  exports.DsSystemStatus = DsSystemStatus;
20267
21455
  exports.DsTable = DsTable;
21456
+ exports.DsTableColumnFilterPopover = DsTableColumnFilterPopover;
21457
+ exports.DsTableEditCellCheckbox = DsTableEditCellCheckbox;
21458
+ exports.DsTableEditCellDate = DsTableEditCellDate;
21459
+ exports.DsTableEditCellNumber = DsTableEditCellNumber;
21460
+ exports.DsTableEditCellSelect = DsTableEditCellSelect;
21461
+ exports.DsTableEditCellText = DsTableEditCellText;
21462
+ exports.DsTableEditableCell = DsTableEditableCell;
21463
+ exports.DsTableEditingCell = DsTableEditingCell;
20268
21464
  exports.DsTabs = DsTabs;
20269
21465
  exports.DsTag = DsTag;
20270
21466
  exports.DsTagFilter = DsTagFilter;
@@ -20278,7 +21474,7 @@ exports.DsTooltip = DsTooltip;
20278
21474
  exports.DsTree = DsTree;
20279
21475
  exports.DsTypography = DsTypography;
20280
21476
  exports.DsVerticalTabs = DsVerticalTabs;
20281
- exports.DsWorkspace = DsWorkspace;
21477
+ exports.DsWorkspaceLayout = DsWorkspaceLayout;
20282
21478
  exports.FatalFileUploadError = FatalFileUploadError;
20283
21479
  exports.FileUpload = FileUpload;
20284
21480
  exports.FileUploadError = FileUploadError;
@@ -20326,6 +21522,7 @@ exports.tagSizes = tagSizes;
20326
21522
  exports.tagVariants = tagVariants;
20327
21523
  exports.textInputSizes = textInputSizes;
20328
21524
  exports.useBreakpoint = useBreakpoint;
21525
+ exports.useCellEditor = useCellEditor;
20329
21526
  exports.useCheckboxSelectAll = useCheckboxSelectAll;
20330
21527
  exports.useFileUpload = useFileUpload;
20331
21528
  exports.useResponsiveValue = useResponsiveValue;