@drivenets/design-system 0.17.0 → 0.18.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 (94) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/index.cjs +1727 -701
  3. package/dist/index.d.cts +115 -52
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +115 -52
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1729 -705
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +2 -2
  11. package/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts +49 -0
  12. package/src/components/ds-alert-banner/ds-alert-banner.figma.ts +51 -0
  13. package/src/components/ds-autocomplete/ds-autocomplete.module.scss +15 -4
  14. package/src/components/ds-autocomplete/ds-autocomplete.tsx +10 -3
  15. package/src/components/ds-autocomplete/ds-autocomplete.types.ts +8 -0
  16. package/src/components/ds-button-v3/ds-button-v3.figma.ts +5 -3
  17. package/src/components/ds-button-v3/ds-button-v3.module.scss +84 -17
  18. package/src/components/ds-button-v3/ds-button-v3.tsx +2 -0
  19. package/src/components/ds-button-v3/ds-button-v3.types.ts +11 -2
  20. package/src/components/ds-button-v3/ds-button-v4.figma.ts +121 -0
  21. package/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts +52 -0
  22. package/src/components/ds-comment-card/ds-comment-card.figma.ts +36 -0
  23. package/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts +32 -0
  24. package/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts +19 -0
  25. package/src/components/ds-select/ds-select.figma.ts +2 -1
  26. package/src/components/ds-select/ds-select.tsx +6 -1
  27. package/src/components/ds-select/ds-select.types.ts +2 -1
  28. package/src/components/ds-slider/ds-slider.figma.ts +29 -0
  29. package/src/components/ds-slider/ds-slider.module.scss +104 -0
  30. package/src/components/ds-slider/ds-slider.tsx +118 -0
  31. package/src/components/ds-slider/ds-slider.types.ts +102 -0
  32. package/src/components/ds-slider/ds-slider.utils.ts +14 -0
  33. package/src/components/ds-slider/index.ts +11 -0
  34. package/src/components/ds-smart-tabs/figma/ds-smart-tabs-tab.figma.ts +83 -0
  35. package/src/components/ds-smart-tabs/figma/ds-smart-tabs.figma.ts +23 -0
  36. package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss +5 -1
  37. package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx +15 -3
  38. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +15 -1
  39. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +29 -6
  40. package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.module.scss +23 -0
  41. package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.tsx +218 -0
  42. package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.types.ts +14 -0
  43. package/src/components/ds-table/components/ds-table-resize-handle/index.ts +1 -0
  44. package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.module.scss +18 -0
  45. package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.tsx +16 -0
  46. package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.types.ts +13 -0
  47. package/src/components/ds-table/components/ds-table-resize-overlay/index.ts +1 -0
  48. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +1 -1
  49. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +9 -2
  50. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +2 -1
  51. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +9 -2
  52. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx +2 -2
  53. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx +2 -1
  54. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx +2 -1
  55. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx +2 -1
  56. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx +2 -1
  57. package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx +12 -3
  58. package/src/components/ds-table/context/ds-table-context.tsx +208 -0
  59. package/src/components/ds-table/ds-table-defaults.ts +42 -0
  60. package/src/components/ds-table/ds-table.module.scss +4 -1
  61. package/src/components/ds-table/ds-table.tsx +139 -214
  62. package/src/components/ds-table/ds-table.types.ts +53 -47
  63. package/src/components/ds-table/grouping/utils/column-group.ts +7 -5
  64. package/src/components/ds-table/hooks/use-cell-editor.ts +5 -1
  65. package/src/components/ds-table/hooks/use-column-resize.ts +385 -0
  66. package/src/components/ds-table/hooks/use-editing-state.ts +190 -0
  67. package/src/components/ds-table/index.ts +1 -0
  68. package/src/components/ds-table/styles/_variables.scss +2 -1
  69. package/src/components/ds-table/utils/column-size-meta.augmentation.ts +16 -0
  70. package/src/components/ds-table/utils/column-size.ts +213 -10
  71. package/src/components/ds-table/utils/column-size.unit.test.ts +213 -0
  72. package/src/components/ds-table/utils/constants.ts +28 -0
  73. package/src/components/ds-table/utils/frozen-body.ts +33 -0
  74. package/src/components/ds-table/utils/frozen-body.unit.test.ts +44 -0
  75. package/src/components/ds-table/utils/table-api.ts +42 -0
  76. package/src/components/ds-table/utils/table-api.unit.test.ts +82 -0
  77. package/src/components/ds-table/utils/table-columns.tsx +119 -0
  78. package/src/components/ds-table/utils/table-columns.unit.test.ts +199 -0
  79. package/src/components/ds-tag/ds-tag.figma.ts +51 -0
  80. package/src/components/ds-tag-filter/ds-tag-filter.figma.ts +16 -0
  81. package/src/components/ds-text-input/ds-input-field-v02.figma.ts +29 -4
  82. package/src/components/ds-text-input/ds-text-input.figma.ts +3 -2
  83. package/src/components/ds-text-input/ds-text-input.tsx +1 -0
  84. package/src/components/ds-text-input/ds-text-input.types.ts +1 -1
  85. package/src/components/ds-tree/ds-tree.figma.ts +54 -0
  86. package/src/components/ds-workspace-layout/ds-workspace-layout.figma.ts +99 -0
  87. package/src/components/ds-workspace-layout/ds-workspace-layout.module.scss +1 -8
  88. package/src/index.ts +1 -0
  89. package/src/styles/_gradients.scss +19 -0
  90. package/src/styles/_root.scss +39 -15
  91. package/src/styles/_typography.scss +1 -0
  92. package/src/styles/shared/_input.scss +10 -0
  93. package/src/styles/styles.scss +1 -0
  94. package/src/components/ds-table/context/ds-table-context.ts +0 -112
package/dist/index.js CHANGED
@@ -26,11 +26,12 @@ import { Select, createListCollection as createListCollection$1, useSelect, useS
26
26
  import * as Collapsible from "@radix-ui/react-collapsible";
27
27
  import { RadioGroup } from "@ark-ui/react/radio-group";
28
28
  import { SegmentGroup } from "@ark-ui/react/segment-group";
29
+ import { Slider } from "@ark-ui/react/slider";
29
30
  import * as steps from "@zag-js/steps";
30
31
  import { normalizeProps, useMachine } from "@zag-js/react";
31
- import { createColumnHelper, defaultColumnSizing, flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
32
+ import { createColumnHelper, flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
32
33
  import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
33
- import { CSS } from "@dnd-kit/utilities";
34
+ import { CSS as CSS$1 } from "@dnd-kit/utilities";
34
35
  import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
35
36
  import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
36
37
  import { useVirtualizer } from "@tanstack/react-virtual";
@@ -3555,110 +3556,122 @@ var ds_autocomplete_module_default = {
3555
3556
  "itemGroup": "pgg73q_itemGroup",
3556
3557
  "itemIcon": "pgg73q_itemIcon",
3557
3558
  "itemText": "pgg73q_itemText",
3559
+ "large": "pgg73q_large",
3558
3560
  "loading": "pgg73q_loading",
3559
3561
  "noMatches": "pgg73q_noMatches",
3560
3562
  "positioner": "pgg73q_positioner",
3561
3563
  "root": "pgg73q_root",
3564
+ "small": "pgg73q_small",
3562
3565
  "startAdornment": "pgg73q_startAdornment",
3563
3566
  "trigger": "pgg73q_trigger"
3564
3567
  };
3565
3568
  //#endregion
3566
3569
  //#region src/components/ds-autocomplete/ds-autocomplete.tsx
3567
3570
  const DsAutocomplete = (t0) => {
3568
- const $ = c(53);
3569
- const { id, options: t1, loading: t2, style, className, placeholder: t3, disabled: t4, invalid: t5, onValueChange, onInputValueChange, onOpenChange, locale: t6, highlightMatch: t7, showTrigger: t8, startAdornment } = t0;
3571
+ const $ = c(58);
3572
+ const { id, options: t1, loading: t2, size: t3, style, className, placeholder: t4, disabled: t5, invalid: t6, onValueChange, onInputValueChange, onOpenChange, locale: t7, highlightMatch: t8, showTrigger: t9, startAdornment } = t0;
3570
3573
  const options = t1 === void 0 ? [] : t1;
3571
3574
  const loading = t2 === void 0 ? false : t2;
3572
- const placeholder = t3 === void 0 ? "Start typing to search..." : t3;
3573
- const disabled = t4 === void 0 ? false : t4;
3574
- const invalid = t5 === void 0 ? false : t5;
3575
- let t9;
3576
- if ($[0] !== t6) {
3577
- t9 = t6 === void 0 ? {} : t6;
3578
- $[0] = t6;
3579
- $[1] = t9;
3580
- } else t9 = $[1];
3581
- const { loading: t10, noMatches: t11 } = t9;
3582
- const loadingMessage = t10 === void 0 ? "Loading..." : t10;
3583
- const noMatchesMessage = t11 === void 0 ? "No matches found" : t11;
3584
- const highlightMatch = t7 === void 0 ? true : t7;
3585
- const showTrigger = t8 === void 0 ? true : t8;
3575
+ const size = t3 === void 0 ? "default" : t3;
3576
+ const placeholder = t4 === void 0 ? "Start typing to search..." : t4;
3577
+ const disabled = t5 === void 0 ? false : t5;
3578
+ const invalid = t6 === void 0 ? false : t6;
3579
+ let t10;
3580
+ if ($[0] !== t7) {
3581
+ t10 = t7 === void 0 ? {} : t7;
3582
+ $[0] = t7;
3583
+ $[1] = t10;
3584
+ } else t10 = $[1];
3585
+ const { loading: t11, noMatches: t12 } = t10;
3586
+ const loadingMessage = t11 === void 0 ? "Loading..." : t11;
3587
+ const noMatchesMessage = t12 === void 0 ? "No matches found" : t12;
3588
+ const highlightMatch = t8 === void 0 ? true : t8;
3589
+ const showTrigger = t9 === void 0 ? true : t9;
3586
3590
  const [filterText, setFilterText] = useState("");
3587
- let t12;
3591
+ let t13;
3588
3592
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
3589
- t12 = { sensitivity: "base" };
3590
- $[2] = t12;
3591
- } else t12 = $[2];
3592
- const filterUtils = useFilter(t12);
3593
+ t13 = { sensitivity: "base" };
3594
+ $[2] = t13;
3595
+ } else t13 = $[2];
3596
+ const filterUtils = useFilter(t13);
3593
3597
  const collection = createListCollection({
3594
3598
  items: filterText ? options.filter((opt) => filterUtils.contains(opt.label, filterText)) : options,
3595
- itemToString: _temp$17,
3599
+ itemToString: _temp$18,
3596
3600
  itemToValue: _temp2$9
3597
3601
  });
3598
- let t13;
3602
+ let t14;
3599
3603
  if ($[3] !== onInputValueChange) {
3600
- t13 = (details) => {
3604
+ t14 = (details) => {
3601
3605
  setFilterText(details.inputValue);
3602
3606
  onInputValueChange?.(details.inputValue);
3603
3607
  };
3604
3608
  $[3] = onInputValueChange;
3605
- $[4] = t13;
3606
- } else t13 = $[4];
3607
- const handleInputValueChange = t13;
3608
- let t14;
3609
+ $[4] = t14;
3610
+ } else t14 = $[4];
3611
+ const handleInputValueChange = t14;
3612
+ let t15;
3609
3613
  if ($[5] !== onValueChange) {
3610
- t14 = (details_0) => {
3614
+ t15 = (details_0) => {
3611
3615
  const selectedItem = details_0.items[0];
3612
3616
  onValueChange?.(selectedItem?.value ?? "");
3613
3617
  };
3614
3618
  $[5] = onValueChange;
3615
- $[6] = t14;
3616
- } else t14 = $[6];
3617
- const handleValueChange = t14;
3618
- let t15;
3619
+ $[6] = t15;
3620
+ } else t15 = $[6];
3621
+ const handleValueChange = t15;
3622
+ let t16;
3619
3623
  if ($[7] !== onOpenChange) {
3620
- t15 = (details_1) => {
3624
+ t16 = (details_1) => {
3621
3625
  onOpenChange?.(details_1.open);
3622
3626
  };
3623
3627
  $[7] = onOpenChange;
3624
- $[8] = t15;
3625
- } else t15 = $[8];
3626
- const handleOpenChange = t15;
3627
- let t16;
3628
+ $[8] = t16;
3629
+ } else t16 = $[8];
3630
+ const handleOpenChange = t16;
3631
+ let t17;
3628
3632
  if ($[9] !== className || $[10] !== disabled || $[11] !== invalid) {
3629
- t16 = classNames(ds_autocomplete_module_default.root, {
3633
+ t17 = classNames(ds_autocomplete_module_default.root, {
3630
3634
  [ds_autocomplete_module_default.disabled]: disabled,
3631
3635
  [ds_autocomplete_module_default.invalid]: invalid
3632
3636
  }, className);
3633
3637
  $[9] = className;
3634
3638
  $[10] = disabled;
3635
3639
  $[11] = invalid;
3636
- $[12] = t16;
3637
- } else t16 = $[12];
3638
- const rootClass = t16;
3639
- const t17 = Combobox;
3640
- const t18 = true;
3641
- let t19;
3642
- if ($[13] !== startAdornment) {
3643
- t19 = startAdornment && /* @__PURE__ */ jsx("span", {
3640
+ $[12] = t17;
3641
+ } else t17 = $[12];
3642
+ const rootClass = t17;
3643
+ const t18 = Combobox;
3644
+ const t19 = true;
3645
+ const t20 = size === "small" && ds_autocomplete_module_default.small;
3646
+ const t21 = size === "large" && ds_autocomplete_module_default.large;
3647
+ let t22;
3648
+ if ($[13] !== t20 || $[14] !== t21) {
3649
+ t22 = classNames(ds_autocomplete_module_default.control, t20, t21);
3650
+ $[13] = t20;
3651
+ $[14] = t21;
3652
+ $[15] = t22;
3653
+ } else t22 = $[15];
3654
+ let t23;
3655
+ if ($[16] !== startAdornment) {
3656
+ t23 = startAdornment && /* @__PURE__ */ jsx("span", {
3644
3657
  className: ds_autocomplete_module_default.startAdornment,
3645
3658
  children: startAdornment
3646
3659
  });
3647
- $[13] = startAdornment;
3648
- $[14] = t19;
3649
- } else t19 = $[14];
3650
- let t20;
3651
- if ($[15] !== placeholder) {
3652
- t20 = /* @__PURE__ */ jsx(Combobox.Input, {
3660
+ $[16] = startAdornment;
3661
+ $[17] = t23;
3662
+ } else t23 = $[17];
3663
+ let t24;
3664
+ if ($[18] !== placeholder) {
3665
+ t24 = /* @__PURE__ */ jsx(Combobox.Input, {
3653
3666
  className: ds_autocomplete_module_default.input,
3654
3667
  placeholder
3655
3668
  });
3656
- $[15] = placeholder;
3657
- $[16] = t20;
3658
- } else t20 = $[16];
3659
- let t21;
3660
- if ($[17] !== disabled || $[18] !== showTrigger) {
3661
- t21 = /* @__PURE__ */ jsx(Combobox.Context, { children: (combobox) => /* @__PURE__ */ jsxs("div", {
3669
+ $[18] = placeholder;
3670
+ $[19] = t24;
3671
+ } else t24 = $[19];
3672
+ let t25;
3673
+ if ($[20] !== disabled || $[21] !== showTrigger || $[22] !== size) {
3674
+ t25 = /* @__PURE__ */ jsx(Combobox.Context, { children: (combobox) => /* @__PURE__ */ jsxs("div", {
3662
3675
  className: ds_autocomplete_module_default.iconContainer,
3663
3676
  children: [combobox.inputValue && !disabled && /* @__PURE__ */ jsx("button", {
3664
3677
  type: "button",
@@ -3670,56 +3683,58 @@ const DsAutocomplete = (t0) => {
3670
3683
  },
3671
3684
  children: /* @__PURE__ */ jsx(DsIcon, {
3672
3685
  icon: "close",
3673
- size: "medium"
3686
+ size: size === "small" ? "small" : "medium"
3674
3687
  })
3675
3688
  }), showTrigger && /* @__PURE__ */ jsx(Combobox.Trigger, {
3676
3689
  className: ds_autocomplete_module_default.trigger,
3677
3690
  "aria-label": "Toggle dropdown",
3678
3691
  children: /* @__PURE__ */ jsx(DsIcon, {
3679
3692
  icon: "keyboard_arrow_down",
3680
- size: "medium"
3693
+ size: size === "small" ? "small" : "medium"
3681
3694
  })
3682
3695
  })]
3683
3696
  }) });
3684
- $[17] = disabled;
3685
- $[18] = showTrigger;
3686
- $[19] = t21;
3687
- } else t21 = $[19];
3688
- let t22;
3689
- if ($[20] !== t19 || $[21] !== t20 || $[22] !== t21) {
3690
- t22 = /* @__PURE__ */ jsxs(Combobox.Control, {
3691
- className: ds_autocomplete_module_default.control,
3697
+ $[20] = disabled;
3698
+ $[21] = showTrigger;
3699
+ $[22] = size;
3700
+ $[23] = t25;
3701
+ } else t25 = $[23];
3702
+ let t26;
3703
+ if ($[24] !== t22 || $[25] !== t23 || $[26] !== t24 || $[27] !== t25) {
3704
+ t26 = /* @__PURE__ */ jsxs(Combobox.Control, {
3705
+ className: t22,
3692
3706
  children: [
3693
- t19,
3694
- t20,
3695
- t21
3707
+ t23,
3708
+ t24,
3709
+ t25
3696
3710
  ]
3697
3711
  });
3698
- $[20] = t19;
3699
- $[21] = t20;
3700
- $[22] = t21;
3701
- $[23] = t22;
3702
- } else t22 = $[23];
3712
+ $[24] = t22;
3713
+ $[25] = t23;
3714
+ $[26] = t24;
3715
+ $[27] = t25;
3716
+ $[28] = t26;
3717
+ } else t26 = $[28];
3703
3718
  const T0 = Portal;
3704
- const t23 = Combobox;
3705
- const t24 = ds_autocomplete_module_default;
3706
- const t25 = Combobox;
3707
- const t26 = ds_autocomplete_module_default;
3708
- let t27;
3709
- if ($[24] !== loading || $[25] !== loadingMessage) {
3710
- t27 = loading && /* @__PURE__ */ jsx("div", {
3719
+ const t27 = Combobox;
3720
+ const t28 = ds_autocomplete_module_default;
3721
+ const t29 = Combobox;
3722
+ const t30 = ds_autocomplete_module_default;
3723
+ let t31;
3724
+ if ($[29] !== loading || $[30] !== loadingMessage) {
3725
+ t31 = loading && /* @__PURE__ */ jsx("div", {
3711
3726
  className: ds_autocomplete_module_default.loading,
3712
3727
  children: loadingMessage
3713
3728
  });
3714
- $[24] = loading;
3715
- $[25] = loadingMessage;
3716
- $[26] = t27;
3717
- } else t27 = $[26];
3718
- const t28 = !loading && collection.items.length === 0 && /* @__PURE__ */ jsx("div", {
3729
+ $[29] = loading;
3730
+ $[30] = loadingMessage;
3731
+ $[31] = t31;
3732
+ } else t31 = $[31];
3733
+ const t32 = !loading && collection.items.length === 0 && /* @__PURE__ */ jsx("div", {
3719
3734
  className: ds_autocomplete_module_default.noMatches,
3720
3735
  children: noMatchesMessage
3721
3736
  });
3722
- const t29 = !loading && collection.items.length > 0 && /* @__PURE__ */ jsx(Combobox.ItemGroup, {
3737
+ const t33 = !loading && collection.items.length > 0 && /* @__PURE__ */ jsx(Combobox.ItemGroup, {
3723
3738
  className: ds_autocomplete_module_default.itemGroup,
3724
3739
  children: collection.items.map((option) => /* @__PURE__ */ jsxs(Combobox.Item, {
3725
3740
  item: option,
@@ -3738,44 +3753,44 @@ const DsAutocomplete = (t0) => {
3738
3753
  })]
3739
3754
  }, option.value))
3740
3755
  });
3741
- let t30;
3742
- if ($[27] !== t25.Content || $[28] !== t26.content || $[29] !== t27 || $[30] !== t28 || $[31] !== t29) {
3743
- t30 = /* @__PURE__ */ jsxs(t25.Content, {
3744
- className: t26.content,
3756
+ let t34;
3757
+ if ($[32] !== t29.Content || $[33] !== t30.content || $[34] !== t31 || $[35] !== t32 || $[36] !== t33) {
3758
+ t34 = /* @__PURE__ */ jsxs(t29.Content, {
3759
+ className: t30.content,
3745
3760
  children: [
3746
- t27,
3747
- t28,
3748
- t29
3761
+ t31,
3762
+ t32,
3763
+ t33
3749
3764
  ]
3750
3765
  });
3751
- $[27] = t25.Content;
3752
- $[28] = t26.content;
3753
- $[29] = t27;
3754
- $[30] = t28;
3755
- $[31] = t29;
3756
- $[32] = t30;
3757
- } else t30 = $[32];
3758
- let t31;
3759
- if ($[33] !== t23.Positioner || $[34] !== t24.positioner || $[35] !== t30) {
3760
- t31 = /* @__PURE__ */ jsx(t23.Positioner, {
3761
- className: t24.positioner,
3762
- children: t30
3763
- });
3764
- $[33] = t23.Positioner;
3765
- $[34] = t24.positioner;
3766
- $[35] = t30;
3767
- $[36] = t31;
3768
- } else t31 = $[36];
3769
- let t32;
3770
- if ($[37] !== T0 || $[38] !== t31) {
3771
- t32 = /* @__PURE__ */ jsx(T0, { children: t31 });
3772
- $[37] = T0;
3773
- $[38] = t31;
3774
- $[39] = t32;
3775
- } else t32 = $[39];
3776
- let t33;
3777
- if ($[40] !== collection || $[41] !== disabled || $[42] !== handleInputValueChange || $[43] !== handleOpenChange || $[44] !== handleValueChange || $[45] !== id || $[46] !== invalid || $[47] !== rootClass || $[48] !== style || $[49] !== t17.Root || $[50] !== t22 || $[51] !== t32) {
3778
- t33 = /* @__PURE__ */ jsxs(t17.Root, {
3766
+ $[32] = t29.Content;
3767
+ $[33] = t30.content;
3768
+ $[34] = t31;
3769
+ $[35] = t32;
3770
+ $[36] = t33;
3771
+ $[37] = t34;
3772
+ } else t34 = $[37];
3773
+ let t35;
3774
+ if ($[38] !== t27.Positioner || $[39] !== t28.positioner || $[40] !== t34) {
3775
+ t35 = /* @__PURE__ */ jsx(t27.Positioner, {
3776
+ className: t28.positioner,
3777
+ children: t34
3778
+ });
3779
+ $[38] = t27.Positioner;
3780
+ $[39] = t28.positioner;
3781
+ $[40] = t34;
3782
+ $[41] = t35;
3783
+ } else t35 = $[41];
3784
+ let t36;
3785
+ if ($[42] !== T0 || $[43] !== t35) {
3786
+ t36 = /* @__PURE__ */ jsx(T0, { children: t35 });
3787
+ $[42] = T0;
3788
+ $[43] = t35;
3789
+ $[44] = t36;
3790
+ } else t36 = $[44];
3791
+ let t37;
3792
+ if ($[45] !== collection || $[46] !== disabled || $[47] !== handleInputValueChange || $[48] !== handleOpenChange || $[49] !== handleValueChange || $[50] !== id || $[51] !== invalid || $[52] !== rootClass || $[53] !== style || $[54] !== t18.Root || $[55] !== t26 || $[56] !== t36) {
3793
+ t37 = /* @__PURE__ */ jsxs(t18.Root, {
3779
3794
  id,
3780
3795
  collection,
3781
3796
  className: rootClass,
@@ -3785,33 +3800,40 @@ const DsAutocomplete = (t0) => {
3785
3800
  onInputValueChange: handleInputValueChange,
3786
3801
  onValueChange: handleValueChange,
3787
3802
  onOpenChange: handleOpenChange,
3788
- closeOnSelect: t18,
3789
- children: [t22, t32]
3790
- });
3791
- $[40] = collection;
3792
- $[41] = disabled;
3793
- $[42] = handleInputValueChange;
3794
- $[43] = handleOpenChange;
3795
- $[44] = handleValueChange;
3796
- $[45] = id;
3797
- $[46] = invalid;
3798
- $[47] = rootClass;
3799
- $[48] = style;
3800
- $[49] = t17.Root;
3801
- $[50] = t22;
3802
- $[51] = t32;
3803
- $[52] = t33;
3804
- } else t33 = $[52];
3805
- return t33;
3803
+ closeOnSelect: t19,
3804
+ children: [t26, t36]
3805
+ });
3806
+ $[45] = collection;
3807
+ $[46] = disabled;
3808
+ $[47] = handleInputValueChange;
3809
+ $[48] = handleOpenChange;
3810
+ $[49] = handleValueChange;
3811
+ $[50] = id;
3812
+ $[51] = invalid;
3813
+ $[52] = rootClass;
3814
+ $[53] = style;
3815
+ $[54] = t18.Root;
3816
+ $[55] = t26;
3817
+ $[56] = t36;
3818
+ $[57] = t37;
3819
+ } else t37 = $[57];
3820
+ return t37;
3806
3821
  };
3807
3822
  DsAutocomplete.displayName = "DsAutocomplete";
3808
- function _temp$17(item) {
3823
+ function _temp$18(item) {
3809
3824
  return item.label;
3810
3825
  }
3811
3826
  function _temp2$9(item_0) {
3812
3827
  return item_0.value;
3813
3828
  }
3814
3829
  //#endregion
3830
+ //#region src/components/ds-autocomplete/ds-autocomplete.types.ts
3831
+ const autocompleteSizes = [
3832
+ "small",
3833
+ "default",
3834
+ "large"
3835
+ ];
3836
+ //#endregion
3815
3837
  //#region src/components/ds-avatar/ds-avatar.module.scss
3816
3838
  var ds_avatar_module_default = {
3817
3839
  "avatar": "VcKEMW_avatar",
@@ -3910,11 +3932,11 @@ const DsAvatar = (t0) => {
3910
3932
  return t11;
3911
3933
  };
3912
3934
  DsAvatar.displayName = "DsAvatar";
3913
- function _temp$16(w) {
3935
+ function _temp$17(w) {
3914
3936
  return w[0];
3915
3937
  }
3916
3938
  function _temp2$8(name_0) {
3917
- return name_0.trim().split(" ").map(_temp$16).join("");
3939
+ return name_0.trim().split(" ").map(_temp$17).join("");
3918
3940
  }
3919
3941
  //#endregion
3920
3942
  //#region src/components/ds-avatar/ds-avatar.types.ts
@@ -3986,7 +4008,7 @@ const DsAvatarGroup = (t0) => {
3986
4008
  t6 = remainingCount > 0 && /* @__PURE__ */ jsx(DsTooltip, {
3987
4009
  content: /* @__PURE__ */ jsx("div", {
3988
4010
  className: ds_avatar_group_module_default.tooltipList,
3989
- children: hiddenAvatars.map(_temp$15)
4011
+ children: hiddenAvatars.map(_temp$16)
3990
4012
  }),
3991
4013
  children: /* @__PURE__ */ jsxs("div", {
3992
4014
  className: classNames(ds_avatar_group_module_default.moreAvatar, ds_avatar_group_module_default[size], ds_avatar_group_module_default[type]),
@@ -4020,7 +4042,7 @@ const DsAvatarGroup = (t0) => {
4020
4042
  return t7;
4021
4043
  };
4022
4044
  DsAvatarGroup.displayName = "DsAvatarGroup";
4023
- function _temp$15(avatar_0, index_0) {
4045
+ function _temp$16(avatar_0, index_0) {
4024
4046
  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(DsTypography, {
4025
4047
  variant: "body-xs-reg",
4026
4048
  children: avatar_0.name
@@ -4074,6 +4096,7 @@ var ds_text_input_module_default = {
4074
4096
  "iconButton": "zbxt3W_iconButton",
4075
4097
  "indicator": "zbxt3W_indicator",
4076
4098
  "input": "zbxt3W_input",
4099
+ "large": "zbxt3W_large",
4077
4100
  "small": "zbxt3W_small",
4078
4101
  "textInputContainer": "zbxt3W_textInputContainer",
4079
4102
  "trigger": "zbxt3W_trigger"
@@ -4081,7 +4104,7 @@ var ds_text_input_module_default = {
4081
4104
  //#endregion
4082
4105
  //#region src/components/ds-text-input/ds-text-input.tsx
4083
4106
  const DsTextInput = (t0) => {
4084
- const $ = c(42);
4107
+ const $ = c(43);
4085
4108
  const { id, ref, name, size: t1, type: t2, onFocus, onBlur, onKeyDown, onChange, onValueChange, className, style: t3, value, defaultValue, min, max, minLength, maxLength, placeholder, disabled: t4, readOnly: t5, tabIndex, slots } = t0;
4086
4109
  const size = t1 === void 0 ? "default" : t1;
4087
4110
  const type = t2 === void 0 ? "text" : t2;
@@ -4097,51 +4120,54 @@ const DsTextInput = (t0) => {
4097
4120
  const InputWrapper = slots?.inputWrapper ?? Fragment$1;
4098
4121
  const t7 = size === "small";
4099
4122
  const t8 = size === "default";
4100
- let t9;
4101
- if ($[2] !== className || $[3] !== t7 || $[4] !== t8) {
4102
- t9 = classNames(ds_text_input_module_default.textInputContainer, {
4123
+ const t9 = size === "large";
4124
+ let t10;
4125
+ if ($[2] !== className || $[3] !== t7 || $[4] !== t8 || $[5] !== t9) {
4126
+ t10 = classNames(ds_text_input_module_default.textInputContainer, {
4103
4127
  [ds_text_input_module_default.small]: t7,
4104
- [ds_text_input_module_default.default]: t8
4128
+ [ds_text_input_module_default.default]: t8,
4129
+ [ds_text_input_module_default.large]: t9
4105
4130
  }, className);
4106
4131
  $[2] = className;
4107
4132
  $[3] = t7;
4108
4133
  $[4] = t8;
4109
4134
  $[5] = t9;
4110
- } else t9 = $[5];
4111
- const containerClass = t9;
4112
- let t10;
4113
- if ($[6] !== onChange || $[7] !== onValueChange) {
4114
- t10 = (event) => {
4135
+ $[6] = t10;
4136
+ } else t10 = $[6];
4137
+ const containerClass = t10;
4138
+ let t11;
4139
+ if ($[7] !== onChange || $[8] !== onValueChange) {
4140
+ t11 = (event) => {
4115
4141
  const newValue = event.target.value;
4116
4142
  onChange?.(event);
4117
4143
  onValueChange?.(newValue);
4118
4144
  };
4119
- $[6] = onChange;
4120
- $[7] = onValueChange;
4121
- $[8] = t10;
4122
- } else t10 = $[8];
4123
- const handleChange = t10;
4124
- let t11;
4125
- if ($[9] !== slots) {
4126
- t11 = slots?.startAdornment && /* @__PURE__ */ jsx("div", {
4145
+ $[7] = onChange;
4146
+ $[8] = onValueChange;
4147
+ $[9] = t11;
4148
+ } else t11 = $[9];
4149
+ const handleChange = t11;
4150
+ let t12;
4151
+ if ($[10] !== slots) {
4152
+ t12 = slots?.startAdornment && /* @__PURE__ */ jsx("div", {
4127
4153
  className: ds_text_input_module_default.adornment,
4128
4154
  children: slots.startAdornment
4129
4155
  });
4130
- $[9] = slots;
4131
- $[10] = t11;
4132
- } else t11 = $[10];
4133
- let t12;
4134
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
4135
- t12 = classNames(ds_text_input_module_default.input);
4156
+ $[10] = slots;
4136
4157
  $[11] = t12;
4137
4158
  } else t12 = $[11];
4138
4159
  let t13;
4139
- if ($[12] !== defaultValue || $[13] !== disabled || $[14] !== handleChange || $[15] !== id || $[16] !== max || $[17] !== maxLength || $[18] !== min || $[19] !== minLength || $[20] !== name || $[21] !== onBlur || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== readOnly || $[26] !== ref || $[27] !== tabIndex || $[28] !== type || $[29] !== value) {
4140
- t13 = /* @__PURE__ */ jsx("input", {
4160
+ if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
4161
+ t13 = classNames(ds_text_input_module_default.input);
4162
+ $[12] = t13;
4163
+ } else t13 = $[12];
4164
+ let t14;
4165
+ if ($[13] !== defaultValue || $[14] !== disabled || $[15] !== handleChange || $[16] !== id || $[17] !== max || $[18] !== maxLength || $[19] !== min || $[20] !== minLength || $[21] !== name || $[22] !== onBlur || $[23] !== onFocus || $[24] !== onKeyDown || $[25] !== placeholder || $[26] !== readOnly || $[27] !== ref || $[28] !== tabIndex || $[29] !== type || $[30] !== value) {
4166
+ t14 = /* @__PURE__ */ jsx("input", {
4141
4167
  id,
4142
4168
  ref,
4143
4169
  name,
4144
- className: t12,
4170
+ className: t13,
4145
4171
  type,
4146
4172
  value,
4147
4173
  defaultValue,
@@ -4158,66 +4184,70 @@ const DsTextInput = (t0) => {
4158
4184
  onChange: handleChange,
4159
4185
  tabIndex
4160
4186
  });
4161
- $[12] = defaultValue;
4162
- $[13] = disabled;
4163
- $[14] = handleChange;
4164
- $[15] = id;
4165
- $[16] = max;
4166
- $[17] = maxLength;
4167
- $[18] = min;
4168
- $[19] = minLength;
4169
- $[20] = name;
4170
- $[21] = onBlur;
4171
- $[22] = onFocus;
4172
- $[23] = onKeyDown;
4173
- $[24] = placeholder;
4174
- $[25] = readOnly;
4175
- $[26] = ref;
4176
- $[27] = tabIndex;
4177
- $[28] = type;
4178
- $[29] = value;
4179
- $[30] = t13;
4180
- } else t13 = $[30];
4181
- let t14;
4182
- if ($[31] !== InputWrapper || $[32] !== t13) {
4183
- t14 = /* @__PURE__ */ jsx(InputWrapper, { children: t13 });
4184
- $[31] = InputWrapper;
4185
- $[32] = t13;
4186
- $[33] = t14;
4187
- } else t14 = $[33];
4187
+ $[13] = defaultValue;
4188
+ $[14] = disabled;
4189
+ $[15] = handleChange;
4190
+ $[16] = id;
4191
+ $[17] = max;
4192
+ $[18] = maxLength;
4193
+ $[19] = min;
4194
+ $[20] = minLength;
4195
+ $[21] = name;
4196
+ $[22] = onBlur;
4197
+ $[23] = onFocus;
4198
+ $[24] = onKeyDown;
4199
+ $[25] = placeholder;
4200
+ $[26] = readOnly;
4201
+ $[27] = ref;
4202
+ $[28] = tabIndex;
4203
+ $[29] = type;
4204
+ $[30] = value;
4205
+ $[31] = t14;
4206
+ } else t14 = $[31];
4188
4207
  let t15;
4189
- if ($[34] !== slots) {
4190
- t15 = slots?.endAdornment && /* @__PURE__ */ jsx("div", {
4208
+ if ($[32] !== InputWrapper || $[33] !== t14) {
4209
+ t15 = /* @__PURE__ */ jsx(InputWrapper, { children: t14 });
4210
+ $[32] = InputWrapper;
4211
+ $[33] = t14;
4212
+ $[34] = t15;
4213
+ } else t15 = $[34];
4214
+ let t16;
4215
+ if ($[35] !== slots) {
4216
+ t16 = slots?.endAdornment && /* @__PURE__ */ jsx("div", {
4191
4217
  className: ds_text_input_module_default.adornment,
4192
4218
  children: slots.endAdornment
4193
4219
  });
4194
- $[34] = slots;
4195
- $[35] = t15;
4196
- } else t15 = $[35];
4197
- let t16;
4198
- if ($[36] !== containerClass || $[37] !== style || $[38] !== t11 || $[39] !== t14 || $[40] !== t15) {
4199
- t16 = /* @__PURE__ */ jsxs("div", {
4220
+ $[35] = slots;
4221
+ $[36] = t16;
4222
+ } else t16 = $[36];
4223
+ let t17;
4224
+ if ($[37] !== containerClass || $[38] !== style || $[39] !== t12 || $[40] !== t15 || $[41] !== t16) {
4225
+ t17 = /* @__PURE__ */ jsxs("div", {
4200
4226
  className: containerClass,
4201
4227
  style,
4202
4228
  children: [
4203
- t11,
4204
- t14,
4205
- t15
4229
+ t12,
4230
+ t15,
4231
+ t16
4206
4232
  ]
4207
4233
  });
4208
- $[36] = containerClass;
4209
- $[37] = style;
4210
- $[38] = t11;
4211
- $[39] = t14;
4234
+ $[37] = containerClass;
4235
+ $[38] = style;
4236
+ $[39] = t12;
4212
4237
  $[40] = t15;
4213
4238
  $[41] = t16;
4214
- } else t16 = $[41];
4215
- return t16;
4239
+ $[42] = t17;
4240
+ } else t17 = $[42];
4241
+ return t17;
4216
4242
  };
4217
4243
  DsTextInput.displayName = "DsTextInput";
4218
4244
  //#endregion
4219
4245
  //#region src/components/ds-text-input/ds-text-input.types.ts
4220
- const textInputSizes = ["small", "default"];
4246
+ const textInputSizes = [
4247
+ "small",
4248
+ "default",
4249
+ "large"
4250
+ ];
4221
4251
  //#endregion
4222
4252
  //#region src/components/ds-dropdown-menu/ds-dropdown-menu.tsx
4223
4253
  const GroupContext = createContext(null);
@@ -4581,7 +4611,7 @@ const ItemGroupLabel = (t0) => {
4581
4611
  className: t1,
4582
4612
  style,
4583
4613
  onClick: toggle,
4584
- onKeyDown: _temp$14,
4614
+ onKeyDown: _temp$15,
4585
4615
  children: [t2, t5]
4586
4616
  })
4587
4617
  });
@@ -4896,7 +4926,7 @@ DsDropdownMenu.ItemGroupLabel.displayName = "DsDropdownMenu.ItemGroupLabel";
4896
4926
  DsDropdownMenu.ItemGroupContent.displayName = "DsDropdownMenu.ItemGroupContent";
4897
4927
  DsDropdownMenu.Separator.displayName = "DsDropdownMenu.Separator";
4898
4928
  DsDropdownMenuLegacy.displayName = "DsDropdownMenuLegacy";
4899
- function _temp$14(e) {
4929
+ function _temp$15(e) {
4900
4930
  return e.stopPropagation();
4901
4931
  }
4902
4932
  function _temp2$7(e) {
@@ -4962,7 +4992,7 @@ const DsBreadcrumb = (t0) => {
4962
4992
  placeholder: "Search",
4963
4993
  value: search,
4964
4994
  onValueChange: setSearch,
4965
- onKeyDown: _temp$13,
4995
+ onKeyDown: _temp$14,
4966
4996
  slots: { startAdornment: /* @__PURE__ */ jsx(DsIcon, {
4967
4997
  icon: "search",
4968
4998
  size: "tiny"
@@ -5019,7 +5049,7 @@ const DsBreadcrumb = (t0) => {
5019
5049
  return t4;
5020
5050
  };
5021
5051
  DsBreadcrumb.displayName = "DsBreadcrumb";
5022
- function _temp$13(e) {
5052
+ function _temp$14(e) {
5023
5053
  return e.stopPropagation();
5024
5054
  }
5025
5055
  //#endregion
@@ -5475,7 +5505,7 @@ const iconSizeMap = Object.freeze({
5475
5505
  * @summary action button with color/variant/size, icon-only, loading and selected states
5476
5506
  */
5477
5507
  const DsButtonV3$1 = (t0) => {
5478
- const $ = c(37);
5508
+ const $ = c(39);
5479
5509
  let children;
5480
5510
  let className;
5481
5511
  let disabled;
@@ -5489,8 +5519,9 @@ const DsButtonV3$1 = (t0) => {
5489
5519
  let t4;
5490
5520
  let t5;
5491
5521
  let t6;
5522
+ let t7;
5492
5523
  if ($[0] !== t0) {
5493
- ({ref, className, style, children, icon, disabled, loading: t1, color: t2, variant: t3, size: t4, selected: t5, type: t6, ...rest} = t0);
5524
+ ({ref, className, style, children, icon, disabled, loading: t1, color: t2, variant: t3, size: t4, selected: t5, highEmphasis: t6, type: t7, ...rest} = t0);
5494
5525
  $[0] = t0;
5495
5526
  $[1] = children;
5496
5527
  $[2] = className;
@@ -5505,6 +5536,7 @@ const DsButtonV3$1 = (t0) => {
5505
5536
  $[11] = t4;
5506
5537
  $[12] = t5;
5507
5538
  $[13] = t6;
5539
+ $[14] = t7;
5508
5540
  } else {
5509
5541
  children = $[1];
5510
5542
  className = $[2];
@@ -5519,80 +5551,86 @@ const DsButtonV3$1 = (t0) => {
5519
5551
  t4 = $[11];
5520
5552
  t5 = $[12];
5521
5553
  t6 = $[13];
5554
+ t7 = $[14];
5522
5555
  }
5523
5556
  const loading = t1 === void 0 ? false : t1;
5524
5557
  const color = t2 === void 0 ? "default" : t2;
5525
5558
  const variant = t3 === void 0 ? "primary" : t3;
5526
5559
  const size = t4 === void 0 ? "medium" : t4;
5527
5560
  const selected = t5 === void 0 ? false : t5;
5528
- const type = t6 === void 0 ? "button" : t6;
5561
+ const highEmphasis = t6 === void 0 ? false : t6;
5562
+ const type = t7 === void 0 ? "button" : t7;
5529
5563
  const isIconOnly = icon !== void 0 && !children;
5530
- const t7 = disabled || loading;
5531
- const t8 = loading || void 0;
5532
- let t9;
5533
- if ($[14] !== className) {
5534
- t9 = classNames(ds_button_v3_module_default.root, className);
5535
- $[14] = className;
5536
- $[15] = t9;
5537
- } else t9 = $[15];
5538
- const t10 = selected ? "true" : void 0;
5539
- const t11 = isIconOnly || void 0;
5540
- const t12 = loading && !disabled ? "" : void 0;
5541
- let t13;
5542
- if ($[16] !== icon || $[17] !== loading || $[18] !== size) {
5543
- t13 = loading ? /* @__PURE__ */ jsx(DsSpinner, {}) : icon && /* @__PURE__ */ jsx(DsIcon, {
5564
+ const t8 = disabled || loading;
5565
+ const t9 = loading || void 0;
5566
+ let t10;
5567
+ if ($[15] !== className) {
5568
+ t10 = classNames(ds_button_v3_module_default.root, className);
5569
+ $[15] = className;
5570
+ $[16] = t10;
5571
+ } else t10 = $[16];
5572
+ const t11 = selected ? "true" : void 0;
5573
+ const t12 = highEmphasis ? "true" : void 0;
5574
+ const t13 = isIconOnly || void 0;
5575
+ const t14 = loading && !disabled ? "" : void 0;
5576
+ let t15;
5577
+ if ($[17] !== icon || $[18] !== loading || $[19] !== size) {
5578
+ t15 = loading ? /* @__PURE__ */ jsx(DsSpinner, {}) : icon && /* @__PURE__ */ jsx(DsIcon, {
5544
5579
  icon,
5545
5580
  size: iconSizeMap[size],
5546
5581
  "aria-hidden": true
5547
5582
  });
5548
- $[16] = icon;
5549
- $[17] = loading;
5550
- $[18] = size;
5551
- $[19] = t13;
5552
- } else t13 = $[19];
5553
- let t14;
5554
- if ($[20] !== children || $[21] !== color || $[22] !== ref || $[23] !== rest || $[24] !== selected || $[25] !== size || $[26] !== style || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t13 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== type || $[35] !== variant) {
5555
- t14 = /* @__PURE__ */ jsxs("button", {
5583
+ $[17] = icon;
5584
+ $[18] = loading;
5585
+ $[19] = size;
5586
+ $[20] = t15;
5587
+ } else t15 = $[20];
5588
+ let t16;
5589
+ if ($[21] !== children || $[22] !== color || $[23] !== ref || $[24] !== rest || $[25] !== selected || $[26] !== size || $[27] !== style || $[28] !== t10 || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== t8 || $[35] !== t9 || $[36] !== type || $[37] !== variant) {
5590
+ t16 = /* @__PURE__ */ jsxs("button", {
5556
5591
  ref,
5557
5592
  type,
5558
- disabled: t7,
5559
- "aria-busy": t8,
5593
+ disabled: t8,
5594
+ "aria-busy": t9,
5560
5595
  "aria-pressed": selected,
5561
- className: t9,
5596
+ className: t10,
5562
5597
  style,
5563
5598
  "data-color": color,
5564
5599
  "data-variant": variant,
5565
5600
  "data-size": size,
5566
- "data-selected": t10,
5567
- "data-icon-only": t11,
5568
- "data-loading": t12,
5601
+ "data-selected": t11,
5602
+ "data-high-emphasis": t12,
5603
+ "data-icon-only": t13,
5604
+ "data-loading": t14,
5569
5605
  ...rest,
5570
- children: [t13, children]
5571
- });
5572
- $[20] = children;
5573
- $[21] = color;
5574
- $[22] = ref;
5575
- $[23] = rest;
5576
- $[24] = selected;
5577
- $[25] = size;
5578
- $[26] = style;
5579
- $[27] = t10;
5580
- $[28] = t11;
5581
- $[29] = t12;
5582
- $[30] = t13;
5583
- $[31] = t7;
5584
- $[32] = t8;
5585
- $[33] = t9;
5586
- $[34] = type;
5587
- $[35] = variant;
5588
- $[36] = t14;
5589
- } else t14 = $[36];
5590
- return t14;
5606
+ children: [t15, children]
5607
+ });
5608
+ $[21] = children;
5609
+ $[22] = color;
5610
+ $[23] = ref;
5611
+ $[24] = rest;
5612
+ $[25] = selected;
5613
+ $[26] = size;
5614
+ $[27] = style;
5615
+ $[28] = t10;
5616
+ $[29] = t11;
5617
+ $[30] = t12;
5618
+ $[31] = t13;
5619
+ $[32] = t14;
5620
+ $[33] = t15;
5621
+ $[34] = t8;
5622
+ $[35] = t9;
5623
+ $[36] = type;
5624
+ $[37] = variant;
5625
+ $[38] = t16;
5626
+ } else t16 = $[38];
5627
+ return t16;
5591
5628
  };
5592
5629
  //#endregion
5593
5630
  //#region src/components/ds-button-v3/ds-button-v3.types.ts
5594
5631
  const buttonV3Variants = [
5595
5632
  "primary",
5633
+ "primary-subtle",
5596
5634
  "secondary",
5597
5635
  "tertiary"
5598
5636
  ];
@@ -7289,7 +7327,7 @@ const DsCommentThread = (t0) => {
7289
7327
  const bottomRef = useRef(null);
7290
7328
  let t1;
7291
7329
  if ($[0] !== messages) {
7292
- t1 = messages.find(_temp$12) || messages[0];
7330
+ t1 = messages.find(_temp$13) || messages[0];
7293
7331
  $[0] = messages;
7294
7332
  $[1] = t1;
7295
7333
  } else t1 = $[1];
@@ -7430,7 +7468,7 @@ const DsCommentThread = (t0) => {
7430
7468
  return t22;
7431
7469
  };
7432
7470
  DsCommentThread.displayName = "DsCommentThread";
7433
- function _temp$12(m) {
7471
+ function _temp$13(m) {
7434
7472
  return m.isInitialMessage;
7435
7473
  }
7436
7474
  //#endregion
@@ -8154,7 +8192,7 @@ const DsCommentCard = (t0) => {
8154
8192
  const { numericId, author, createdAt, messages, referenceTag, isActionRequired } = comment;
8155
8193
  let t4;
8156
8194
  if ($[0] !== messages) {
8157
- t4 = messages.find(_temp$11) || messages[0];
8195
+ t4 = messages.find(_temp$12) || messages[0];
8158
8196
  $[0] = messages;
8159
8197
  $[1] = t4;
8160
8198
  } else t4 = $[1];
@@ -8479,7 +8517,7 @@ const DsCommentCard = (t0) => {
8479
8517
  return t34;
8480
8518
  };
8481
8519
  DsCommentCard.displayName = "DsCommentCard";
8482
- function _temp$11(m) {
8520
+ function _temp$12(m) {
8483
8521
  return m.isInitialMessage;
8484
8522
  }
8485
8523
  function _temp2$6(m_0) {
@@ -9927,7 +9965,7 @@ const DsTabsTab = (t0) => {
9927
9965
  })
9928
9966
  }), /* @__PURE__ */ jsx(DsDropdownMenu.Content, {
9929
9967
  className: ds_tabs_tab_module_default.menuContent,
9930
- children: menuActionItems.map(_temp$10)
9968
+ children: menuActionItems.map(_temp$11)
9931
9969
  })]
9932
9970
  });
9933
9971
  $[17] = handleMenuActionSelect;
@@ -9966,7 +10004,7 @@ const DsTabsTab = (t0) => {
9966
10004
  return t6;
9967
10005
  };
9968
10006
  DsTabsTab.displayName = "DsTabs.Tab";
9969
- function _temp$10(item) {
10007
+ function _temp$11(item) {
9970
10008
  return /* @__PURE__ */ jsx(DsDropdownMenu.Item, {
9971
10009
  value: item.value,
9972
10010
  disabled: item.disabled,
@@ -10493,7 +10531,7 @@ const YearView$1 = () => {
10493
10531
  return t0;
10494
10532
  };
10495
10533
  DsDateInput.displayName = "DsDateInput";
10496
- function _temp$9(weekDay, id) {
10534
+ function _temp$10(weekDay, id) {
10497
10535
  return /* @__PURE__ */ jsx(DatePicker.TableHeader, {
10498
10536
  className: ds_date_input_module_default.tableHeader,
10499
10537
  children: /* @__PURE__ */ jsx(DsTypography, {
@@ -10528,7 +10566,7 @@ function _temp4$2(datePicker) {
10528
10566
  className: ds_date_input_module_default.tableHead,
10529
10567
  children: /* @__PURE__ */ jsx(DatePicker.TableRow, {
10530
10568
  className: ds_date_input_module_default.tableRow,
10531
- children: datePicker.weekDays.map(_temp$9)
10569
+ children: datePicker.weekDays.map(_temp$10)
10532
10570
  })
10533
10571
  }), /* @__PURE__ */ jsx(DatePicker.TableBody, {
10534
10572
  className: ds_date_input_module_default.tableBody,
@@ -11171,7 +11209,7 @@ const DsCommentsDrawer = (t0) => {
11171
11209
  authorsMap.set(comment.author.id, comment.author.name);
11172
11210
  comment.labels?.forEach((label) => labelsSet.add(label));
11173
11211
  });
11174
- availableAuthors = Array.from(authorsMap.entries()).map(_temp$8);
11212
+ availableAuthors = Array.from(authorsMap.entries()).map(_temp$9);
11175
11213
  availableLabels = Array.from(labelsSet);
11176
11214
  let filteredComments = comments;
11177
11215
  if (!showResolved) filteredComments = filteredComments.filter(_temp2$4);
@@ -11524,7 +11562,7 @@ const DsCommentsDrawer = (t0) => {
11524
11562
  return t18;
11525
11563
  };
11526
11564
  DsCommentsDrawer.displayName = "DsCommentsDrawer";
11527
- function _temp$8(t0) {
11565
+ function _temp$9(t0) {
11528
11566
  const [id, name] = t0;
11529
11567
  return {
11530
11568
  id,
@@ -12328,7 +12366,7 @@ const DayView = (t0) => {
12328
12366
  className: calendar_table_module_default.table,
12329
12367
  children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsx(DatePicker.TableRow, {
12330
12368
  className: calendar_table_module_default.tableRow,
12331
- children: datePicker.weekDays.map(_temp$7)
12369
+ children: datePicker.weekDays.map(_temp$8)
12332
12370
  }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, {
12333
12371
  className: calendar_table_module_default.tableBody,
12334
12372
  children: datePicker.weeks.map(_temp3$3)
@@ -12343,7 +12381,7 @@ const DayView = (t0) => {
12343
12381
  } else t1 = $[1];
12344
12382
  return t1;
12345
12383
  };
12346
- function _temp$7(weekDay, idx) {
12384
+ function _temp$8(weekDay, idx) {
12347
12385
  return /* @__PURE__ */ jsx(DatePicker.TableHeader, {
12348
12386
  className: calendar_table_module_default.tableHeader,
12349
12387
  children: /* @__PURE__ */ jsx(DsTypography, {
@@ -12387,7 +12425,7 @@ const MonthView = () => {
12387
12425
  } else t0 = $[0];
12388
12426
  return t0;
12389
12427
  };
12390
- function _temp$6(month, monthIdx) {
12428
+ function _temp$7(month, monthIdx) {
12391
12429
  return /* @__PURE__ */ jsx(DatePicker.TableCell, {
12392
12430
  value: month.value,
12393
12431
  children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
@@ -12402,7 +12440,7 @@ function _temp$6(month, monthIdx) {
12402
12440
  function _temp2$2(months, rowIdx) {
12403
12441
  return /* @__PURE__ */ jsx(DatePicker.TableRow, {
12404
12442
  className: calendar_table_module_default.tableRow,
12405
- children: months.map(_temp$6)
12443
+ children: months.map(_temp$7)
12406
12444
  }, rowIdx);
12407
12445
  }
12408
12446
  function _temp3$2(datePicker) {
@@ -12434,7 +12472,7 @@ const YearView = () => {
12434
12472
  } else t0 = $[0];
12435
12473
  return t0;
12436
12474
  };
12437
- function _temp$5(year, yearIdx) {
12475
+ function _temp$6(year, yearIdx) {
12438
12476
  return /* @__PURE__ */ jsx(DatePicker.TableCell, {
12439
12477
  value: year.value,
12440
12478
  children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
@@ -12449,7 +12487,7 @@ function _temp$5(year, yearIdx) {
12449
12487
  function _temp2$1(years, rowIdx) {
12450
12488
  return /* @__PURE__ */ jsx(DatePicker.TableRow, {
12451
12489
  className: calendar_table_module_default.tableRow,
12452
- children: years.map(_temp$5)
12490
+ children: years.map(_temp$6)
12453
12491
  }, rowIdx);
12454
12492
  }
12455
12493
  function _temp3$1(datePicker) {
@@ -12925,6 +12963,7 @@ var ds_select_module_default = {
12925
12963
  "item": "KdTZ_G_item",
12926
12964
  "itemIcon": "KdTZ_G_itemIcon",
12927
12965
  "itemValue": "KdTZ_G_itemValue",
12966
+ "large": "KdTZ_G_large",
12928
12967
  "multiSelectItemsContainer": "KdTZ_G_multiSelectItemsContainer",
12929
12968
  "searchIcon": "KdTZ_G_searchIcon",
12930
12969
  "searchInput": "KdTZ_G_searchInput",
@@ -13036,7 +13075,7 @@ const SELECT_ALL_OPTION = {
13036
13075
  value: SELECT_ALL_VALUE
13037
13076
  };
13038
13077
  const DsSelect = (t0) => {
13039
- const $ = c(29);
13078
+ const $ = c(30);
13040
13079
  const { id, options: userOptions, value, style, size, clearable, onClear, onBlur, className, placeholder: t1, disabled, renderOption, ...multiselectProps } = t0;
13041
13080
  const placeholder = t1 === void 0 ? "Click to select a value" : t1;
13042
13081
  const [searchTerm, setSearchTerm] = useState("");
@@ -13044,7 +13083,7 @@ const DsSelect = (t0) => {
13044
13083
  const internalOptions = multiselectProps.multiple ? [SELECT_ALL_OPTION, ...userOptions] : userOptions;
13045
13084
  const collection = createListCollection$1({
13046
13085
  items: internalOptions,
13047
- itemToValue: _temp$4
13086
+ itemToValue: _temp$5
13048
13087
  });
13049
13088
  let t2;
13050
13089
  if ($[0] !== searchTerm) {
@@ -13106,29 +13145,31 @@ const DsSelect = (t0) => {
13106
13145
  });
13107
13146
  };
13108
13147
  const t4 = size === "small" && ds_select_module_default.small;
13109
- let t5;
13110
- if ($[3] !== className || $[4] !== t4) {
13111
- t5 = classNames(ds_select_module_default.control, t4, className);
13148
+ const t5 = size === "large" && ds_select_module_default.large;
13149
+ let t6;
13150
+ if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
13151
+ t6 = classNames(ds_select_module_default.control, t4, t5, className);
13112
13152
  $[3] = className;
13113
13153
  $[4] = t4;
13114
13154
  $[5] = t5;
13115
- } else t5 = $[5];
13116
- const t6 = size === "small" ? "small" : "medium";
13117
- let t7;
13118
- if ($[6] !== t6) {
13119
- t7 = /* @__PURE__ */ jsx(Select.Indicator, {
13155
+ $[6] = t6;
13156
+ } else t6 = $[6];
13157
+ const t7 = size === "small" ? "small" : "medium";
13158
+ let t8;
13159
+ if ($[7] !== t7) {
13160
+ t8 = /* @__PURE__ */ jsx(Select.Indicator, {
13120
13161
  className: ds_select_module_default.triggerIcon,
13121
13162
  children: /* @__PURE__ */ jsx(DsIcon, {
13122
13163
  icon: "keyboard_arrow_down",
13123
- size: t6
13164
+ size: t7
13124
13165
  })
13125
13166
  });
13126
- $[6] = t6;
13127
13167
  $[7] = t7;
13128
- } else t7 = $[7];
13129
- let t8;
13130
- if ($[8] !== clearable || $[9] !== onClear || $[10] !== size) {
13131
- t8 = clearable && /* @__PURE__ */ jsx(Select.ClearTrigger, {
13168
+ $[8] = t8;
13169
+ } else t8 = $[8];
13170
+ let t9;
13171
+ if ($[9] !== clearable || $[10] !== onClear || $[11] !== size) {
13172
+ t9 = clearable && /* @__PURE__ */ jsx(Select.ClearTrigger, {
13132
13173
  className: ds_select_module_default.clearIcon,
13133
13174
  onClick: onClear,
13134
13175
  children: /* @__PURE__ */ jsx(DsIcon, {
@@ -13136,19 +13177,19 @@ const DsSelect = (t0) => {
13136
13177
  size: size === "small" ? "small" : "medium"
13137
13178
  })
13138
13179
  });
13139
- $[8] = clearable;
13140
- $[9] = onClear;
13141
- $[10] = size;
13142
- $[11] = t8;
13143
- } else t8 = $[11];
13180
+ $[9] = clearable;
13181
+ $[10] = onClear;
13182
+ $[11] = size;
13183
+ $[12] = t9;
13184
+ } else t9 = $[12];
13144
13185
  const T0 = Portal;
13145
- const t9 = Select;
13146
- const t10 = ds_select_module_default;
13147
- const t11 = Select;
13148
- const t12 = ds_select_module_default;
13149
- let t13;
13150
- if ($[12] !== searchTerm || $[13] !== userOptions.length) {
13151
- t13 = userOptions.length > SEARCH_THRESHOLD && /* @__PURE__ */ jsx("div", {
13186
+ const t10 = Select;
13187
+ const t11 = ds_select_module_default;
13188
+ const t12 = Select;
13189
+ const t13 = ds_select_module_default;
13190
+ let t14;
13191
+ if ($[13] !== searchTerm || $[14] !== userOptions.length) {
13192
+ t14 = userOptions.length > SEARCH_THRESHOLD && /* @__PURE__ */ jsx("div", {
13152
13193
  className: ds_select_module_default.searchInput,
13153
13194
  children: /* @__PURE__ */ jsx(DsTextInput, {
13154
13195
  placeholder: "Search",
@@ -13161,17 +13202,17 @@ const DsSelect = (t0) => {
13161
13202
  }) }
13162
13203
  })
13163
13204
  });
13164
- $[12] = searchTerm;
13165
- $[13] = userOptions.length;
13166
- $[14] = t13;
13167
- } else t13 = $[14];
13168
- const t14 = multiselectProps.multiple && /* @__PURE__ */ jsx(SelectItemsChips, {
13205
+ $[13] = searchTerm;
13206
+ $[14] = userOptions.length;
13207
+ $[15] = t14;
13208
+ } else t14 = $[15];
13209
+ const t15 = multiselectProps.multiple && /* @__PURE__ */ jsx(SelectItemsChips, {
13169
13210
  onValueChange: multiselectProps.onValueChange,
13170
13211
  showAll: showAllItems,
13171
13212
  onShowAll: () => setShowAllItems(true),
13172
13213
  count: 6
13173
13214
  });
13174
- const t15 = filteredOptions.map((item_0) => {
13215
+ const t16 = filteredOptions.map((item_0) => {
13175
13216
  const checked = getItemCheckedState({
13176
13217
  item: item_0,
13177
13218
  select,
@@ -13195,52 +13236,52 @@ const DsSelect = (t0) => {
13195
13236
  })
13196
13237
  }, collection.getItemValue(item_0));
13197
13238
  });
13198
- let t16;
13199
- if ($[15] !== t11.Content || $[16] !== t12.content || $[17] !== t13 || $[18] !== t14 || $[19] !== t15) {
13200
- t16 = /* @__PURE__ */ jsxs(t11.Content, {
13201
- className: t12.content,
13239
+ let t17;
13240
+ if ($[16] !== t12.Content || $[17] !== t13.content || $[18] !== t14 || $[19] !== t15 || $[20] !== t16) {
13241
+ t17 = /* @__PURE__ */ jsxs(t12.Content, {
13242
+ className: t13.content,
13202
13243
  children: [
13203
- t13,
13204
13244
  t14,
13205
- t15
13245
+ t15,
13246
+ t16
13206
13247
  ]
13207
13248
  });
13208
- $[15] = t11.Content;
13209
- $[16] = t12.content;
13210
- $[17] = t13;
13249
+ $[16] = t12.Content;
13250
+ $[17] = t13.content;
13211
13251
  $[18] = t14;
13212
13252
  $[19] = t15;
13213
13253
  $[20] = t16;
13214
- } else t16 = $[20];
13215
- let t17;
13216
- if ($[21] !== t10.viewport || $[22] !== t16 || $[23] !== t9.Positioner) {
13217
- t17 = /* @__PURE__ */ jsx(t9.Positioner, {
13218
- className: t10.viewport,
13219
- children: t16
13254
+ $[21] = t17;
13255
+ } else t17 = $[21];
13256
+ let t18;
13257
+ if ($[22] !== t10.Positioner || $[23] !== t11.viewport || $[24] !== t17) {
13258
+ t18 = /* @__PURE__ */ jsx(t10.Positioner, {
13259
+ className: t11.viewport,
13260
+ children: t17
13220
13261
  });
13221
- $[21] = t10.viewport;
13222
- $[22] = t16;
13223
- $[23] = t9.Positioner;
13262
+ $[22] = t10.Positioner;
13263
+ $[23] = t11.viewport;
13224
13264
  $[24] = t17;
13225
- } else t17 = $[24];
13226
- let t18;
13227
- if ($[25] !== T0 || $[26] !== t17) {
13228
- t18 = /* @__PURE__ */ jsx(T0, { children: t17 });
13229
- $[25] = T0;
13230
- $[26] = t17;
13231
- $[27] = t18;
13232
- } else t18 = $[27];
13265
+ $[25] = t18;
13266
+ } else t18 = $[25];
13233
13267
  let t19;
13234
- if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
13235
- t19 = /* @__PURE__ */ jsx(Select.HiddenSelect, { style: { display: "none" } });
13268
+ if ($[26] !== T0 || $[27] !== t18) {
13269
+ t19 = /* @__PURE__ */ jsx(T0, { children: t18 });
13270
+ $[26] = T0;
13271
+ $[27] = t18;
13236
13272
  $[28] = t19;
13237
13273
  } else t19 = $[28];
13274
+ let t20;
13275
+ if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
13276
+ t20 = /* @__PURE__ */ jsx(Select.HiddenSelect, { style: { display: "none" } });
13277
+ $[29] = t20;
13278
+ } else t20 = $[29];
13238
13279
  return /* @__PURE__ */ jsxs(Select.RootProvider, {
13239
13280
  value: select,
13240
13281
  lazyMount: true,
13241
13282
  children: [
13242
13283
  /* @__PURE__ */ jsxs(Select.Control, {
13243
- className: t5,
13284
+ className: t6,
13244
13285
  style,
13245
13286
  onBlur,
13246
13287
  onKeyDown: (e) => {
@@ -13256,11 +13297,11 @@ const DsSelect = (t0) => {
13256
13297
  id,
13257
13298
  className: ds_select_module_default.trigger,
13258
13299
  "aria-labelledby": null,
13259
- children: [renderTriggerValue(), t7]
13260
- }), t8]
13300
+ children: [renderTriggerValue(), t8]
13301
+ }), t9]
13261
13302
  }),
13262
- t18,
13263
- t19
13303
+ t19,
13304
+ t20
13264
13305
  ]
13265
13306
  });
13266
13307
  };
@@ -13270,7 +13311,7 @@ function getItemCheckedState({ item, select, options }) {
13270
13311
  return select.hasSelectedItems ? "indeterminate" : false;
13271
13312
  }
13272
13313
  DsSelect.displayName = "DsSelect";
13273
- function _temp$4(item) {
13314
+ function _temp$5(item) {
13274
13315
  return item.value;
13275
13316
  }
13276
13317
  function _temp2(value_0) {
@@ -13292,6 +13333,7 @@ var ds_number_input_module_default = {
13292
13333
  "iconButton": "XMQUTG_iconButton",
13293
13334
  "indicator": "XMQUTG_indicator",
13294
13335
  "input": "XMQUTG_input",
13336
+ "large": "XMQUTG_large",
13295
13337
  "small": "XMQUTG_small",
13296
13338
  "textInputContainer": "XMQUTG_textInputContainer",
13297
13339
  "trigger": "XMQUTG_trigger"
@@ -13457,6 +13499,7 @@ var ds_password_input_module_default = {
13457
13499
  "iconButton": "v5YZUq_iconButton",
13458
13500
  "indicator": "v5YZUq_indicator",
13459
13501
  "input": "v5YZUq_input",
13502
+ "large": "v5YZUq_large",
13460
13503
  "small": "v5YZUq_small",
13461
13504
  "textInputContainer": "v5YZUq_textInputContainer",
13462
13505
  "trigger": "v5YZUq_trigger"
@@ -14526,7 +14569,7 @@ const FileUploadItem = (t0) => {
14526
14569
  } else t20 = $[46];
14527
14570
  let t21;
14528
14571
  if ($[47] !== errors || $[48] !== status) {
14529
- t21 = status === "error" && errors?.length && errors.map(_temp$3);
14572
+ t21 = status === "error" && errors?.length && errors.map(_temp$4);
14530
14573
  $[47] = errors;
14531
14574
  $[48] = status;
14532
14575
  $[49] = t21;
@@ -14569,7 +14612,7 @@ const FileUploadItem = (t0) => {
14569
14612
  } else t23 = $[60];
14570
14613
  return t23;
14571
14614
  };
14572
- function _temp$3(error) {
14615
+ function _temp$4(error) {
14573
14616
  return /* @__PURE__ */ jsxs("div", {
14574
14617
  className: file_upload_item_module_default.errorMessage,
14575
14618
  children: [/* @__PURE__ */ jsx(DsIcon, {
@@ -17346,7 +17389,7 @@ const DsRadioGroupLegacy = (t0) => {
17346
17389
  } else t3 = $[3];
17347
17390
  let t4;
17348
17391
  if ($[4] !== options) {
17349
- t4 = options.map(_temp$2);
17392
+ t4 = options.map(_temp$3);
17350
17393
  $[4] = options;
17351
17394
  $[5] = t4;
17352
17395
  } else t4 = $[5];
@@ -17389,7 +17432,7 @@ const DsRadioGroup = {
17389
17432
  DsRadioGroup.Root.displayName = "DsRadioGroup.Root";
17390
17433
  DsRadioGroup.Item.displayName = "DsRadioGroup.Item";
17391
17434
  DsRadioGroupLegacy.displayName = "DsRadioGroupLegacy";
17392
- function _temp$2(option) {
17435
+ function _temp$3(option) {
17393
17436
  return /* @__PURE__ */ jsxs(RadioGroup.Item, {
17394
17437
  value: option.value,
17395
17438
  disabled: option.disabled,
@@ -17649,7 +17692,7 @@ const useIsOverflowing = (text) => {
17649
17692
  const observer = new ResizeObserver(measure);
17650
17693
  observer.observe(element);
17651
17694
  const frame = requestAnimationFrame(measure);
17652
- document.fonts.ready.then(measure).catch(_temp$1);
17695
+ document.fonts.ready.then(measure).catch(_temp$2);
17653
17696
  document.fonts.addEventListener("loadingdone", measure);
17654
17697
  return () => {
17655
17698
  cancelAnimationFrame(frame);
@@ -17677,7 +17720,7 @@ const useIsOverflowing = (text) => {
17677
17720
  } else t2 = $[4];
17678
17721
  return t2;
17679
17722
  };
17680
- function _temp$1() {}
17723
+ function _temp$2() {}
17681
17724
  //#endregion
17682
17725
  //#region src/components/ds-site-node/ds-site-node.module.scss
17683
17726
  var ds_site_node_module_default = {
@@ -18039,73 +18082,321 @@ DsSkeleton.Text.displayName = "DsSkeleton.Text";
18039
18082
  DsSkeleton.Circle.displayName = "DsSkeleton.Circle";
18040
18083
  DsSkeleton.Rect.displayName = "DsSkeleton.Rect";
18041
18084
  //#endregion
18042
- //#region src/components/ds-smart-tabs/ds-smart-tabs.module.scss
18043
- var ds_smart_tabs_module_default = {
18044
- "active": "yjt8Lq_active",
18045
- "container": "yjt8Lq_container",
18046
- "content": "yjt8Lq_content",
18047
- "disabled": "yjt8Lq_disabled",
18048
- "icon": "yjt8Lq_icon",
18049
- "label": "yjt8Lq_label",
18050
- "tab": "yjt8Lq_tab",
18051
- "value": "yjt8Lq_value"
18085
+ //#region src/components/ds-slider/ds-slider.utils.ts
18086
+ /**
18087
+ * Normalizes the public value (a number or a `[min, max]` tuple) into the
18088
+ * `number[]` shape Ark's slider works with. Returns `undefined` when no value
18089
+ * is provided so controlled/uncontrolled detection stays intact.
18090
+ */
18091
+ const toArray = (value) => {
18092
+ if (value === void 0) return;
18093
+ return Array.isArray(value) ? value : [value];
18052
18094
  };
18053
18095
  //#endregion
18054
- //#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
18055
- const colorMap = {
18056
- "dark-blue": "var(--background-info-strong)",
18057
- "light-blue": "var(--background-active-moderate)",
18058
- "dark-gray": "var(--background-brand)",
18059
- green: "var(--background-success-strong)",
18060
- fuchsia: "var(--color-dap-data-fuchsia)",
18061
- blue: "var(--icon-information-secondary)",
18062
- gray: "var(--icon-information-main)",
18063
- red: "var(--icon-warning)",
18064
- amber: "var(--color-dap-data-amber)"
18065
- };
18066
- const SmartTabsContext = createContext(null);
18067
- const useSmartTabsContext = () => {
18068
- const context = useContext(SmartTabsContext);
18069
- if (!context) throw new Error("DsTab must be used within DsSmartTabs");
18070
- return context;
18096
+ //#region src/components/ds-slider/ds-slider.module.scss
18097
+ var ds_slider_module_default = {
18098
+ "control": "_7ZtIQW_control",
18099
+ "header": "_7ZtIQW_header",
18100
+ "large": "_7ZtIQW_large",
18101
+ "range": "_7ZtIQW_range",
18102
+ "root": "_7ZtIQW_root",
18103
+ "small": "_7ZtIQW_small",
18104
+ "thumb": "_7ZtIQW_thumb",
18105
+ "track": "_7ZtIQW_track",
18106
+ "valueText": "_7ZtIQW_valueText"
18071
18107
  };
18108
+ //#endregion
18109
+ //#region src/components/ds-slider/ds-slider.tsx
18072
18110
  /**
18073
- * Individual tab component
18111
+ * @summary Selects a numeric value or a numeric interval by dragging thumbs along a track.
18112
+ *
18113
+ * Use for picking a number or interval from a known continuous range where visual
18114
+ * adjustment beats typing (filter ranges, thresholds, capacity limits). For exact
18115
+ * numeric entry use DsNumberInput; for a few discrete options use DsSegmentGroup.
18074
18116
  */
18075
- const DsSmartTab = (t0) => {
18076
- const $ = c(40);
18077
- let className;
18078
- let color;
18079
- let content;
18080
- let disabled;
18081
- let icon;
18082
- let label;
18083
- let props;
18084
- let t1;
18085
- let value;
18086
- if ($[0] !== t0) {
18087
- ({label, value, icon, content, color, disabled, className, style: t1, ...props} = t0);
18088
- $[0] = t0;
18089
- $[1] = className;
18090
- $[2] = color;
18091
- $[3] = content;
18092
- $[4] = disabled;
18093
- $[5] = icon;
18094
- $[6] = label;
18095
- $[7] = props;
18096
- $[8] = t1;
18097
- $[9] = value;
18098
- } else {
18099
- className = $[1];
18100
- color = $[2];
18101
- content = $[3];
18102
- disabled = $[4];
18103
- icon = $[5];
18104
- label = $[6];
18105
- props = $[7];
18106
- t1 = $[8];
18107
- value = $[9];
18108
- }
18117
+ const DsSlider$1 = (t0) => {
18118
+ const $ = c(69);
18119
+ const { ref, className, style, label, type: t1, size: t2, min: t3, max: t4, step: t5, value, defaultValue, name, disabled: t6, thumbLabels, formatValue: t7, onValueChange, onValueChangeEnd } = t0;
18120
+ const type = t1 === void 0 ? "value" : t1;
18121
+ const size = t2 === void 0 ? "medium" : t2;
18122
+ const min = t3 === void 0 ? 0 : t3;
18123
+ const max = t4 === void 0 ? 100 : t4;
18124
+ const step = t5 === void 0 ? 1 : t5;
18125
+ const disabled = t6 === void 0 ? false : t6;
18126
+ const formatValue = t7 === void 0 ? String : t7;
18127
+ const isRange = type === "range";
18128
+ let t8;
18129
+ if ($[0] !== value) {
18130
+ t8 = toArray(value);
18131
+ $[0] = value;
18132
+ $[1] = t8;
18133
+ } else t8 = $[1];
18134
+ const controlledValue = t8;
18135
+ let t9;
18136
+ if ($[2] !== isRange || $[3] !== max || $[4] !== min) {
18137
+ t9 = isRange ? [min, max] : [min];
18138
+ $[2] = isRange;
18139
+ $[3] = max;
18140
+ $[4] = min;
18141
+ $[5] = t9;
18142
+ } else t9 = $[5];
18143
+ const fallbackValue = t9;
18144
+ let t10;
18145
+ if ($[6] !== isRange || $[7] !== max || $[8] !== min) {
18146
+ t10 = (next) => isRange ? [next[0] ?? min, next[1] ?? max] : next[0] ?? min;
18147
+ $[6] = isRange;
18148
+ $[7] = max;
18149
+ $[8] = min;
18150
+ $[9] = t10;
18151
+ } else t10 = $[9];
18152
+ const toPublicValue = t10;
18153
+ let t11;
18154
+ if ($[10] !== controlledValue || $[11] !== onValueChange || $[12] !== toPublicValue) {
18155
+ t11 = controlledValue !== void 0 ? (next_0) => onValueChange?.(toPublicValue(next_0)) : void 0;
18156
+ $[10] = controlledValue;
18157
+ $[11] = onValueChange;
18158
+ $[12] = toPublicValue;
18159
+ $[13] = t11;
18160
+ } else t11 = $[13];
18161
+ let t12;
18162
+ if ($[14] !== defaultValue || $[15] !== fallbackValue) {
18163
+ t12 = toArray(defaultValue) ?? fallbackValue;
18164
+ $[14] = defaultValue;
18165
+ $[15] = fallbackValue;
18166
+ $[16] = t12;
18167
+ } else t12 = $[16];
18168
+ const [values, setValues] = useControlled(controlledValue, t11, t12);
18169
+ let t13;
18170
+ if ($[17] !== controlledValue || $[18] !== onValueChange || $[19] !== setValues || $[20] !== toPublicValue) {
18171
+ t13 = (details) => {
18172
+ setValues(details.value);
18173
+ if (controlledValue === void 0) onValueChange?.(toPublicValue(details.value));
18174
+ };
18175
+ $[17] = controlledValue;
18176
+ $[18] = onValueChange;
18177
+ $[19] = setValues;
18178
+ $[20] = toPublicValue;
18179
+ $[21] = t13;
18180
+ } else t13 = $[21];
18181
+ const handleValueChange = t13;
18182
+ let t14;
18183
+ if ($[22] !== formatValue || $[23] !== isRange || $[24] !== max || $[25] !== min || $[26] !== values[0] || $[27] !== values[1]) {
18184
+ t14 = isRange ? `${formatValue(values[0] ?? min)}-${formatValue(values[1] ?? max)}` : formatValue(values[0] ?? min);
18185
+ $[22] = formatValue;
18186
+ $[23] = isRange;
18187
+ $[24] = max;
18188
+ $[25] = min;
18189
+ $[26] = values[0];
18190
+ $[27] = values[1];
18191
+ $[28] = t14;
18192
+ } else t14 = $[28];
18193
+ const valueText = t14;
18194
+ const textColor = disabled ? "disabled" : "main";
18195
+ let t15;
18196
+ if ($[29] !== isRange || $[30] !== label || $[31] !== thumbLabels) {
18197
+ t15 = isRange ? thumbLabels : label ? [label] : thumbLabels;
18198
+ $[29] = isRange;
18199
+ $[30] = label;
18200
+ $[31] = thumbLabels;
18201
+ $[32] = t15;
18202
+ } else t15 = $[32];
18203
+ const thumbAriaLabels = t15;
18204
+ const t16 = size === "small";
18205
+ const t17 = size === "large";
18206
+ let t18;
18207
+ if ($[33] !== className || $[34] !== t16 || $[35] !== t17) {
18208
+ t18 = classNames(ds_slider_module_default.root, {
18209
+ [ds_slider_module_default.small]: t16,
18210
+ [ds_slider_module_default.large]: t17
18211
+ }, className);
18212
+ $[33] = className;
18213
+ $[34] = t16;
18214
+ $[35] = t17;
18215
+ $[36] = t18;
18216
+ } else t18 = $[36];
18217
+ const rootClass = t18;
18218
+ let t19;
18219
+ if ($[37] !== onValueChangeEnd || $[38] !== toPublicValue) {
18220
+ t19 = (details_0) => onValueChangeEnd?.(toPublicValue(details_0.value));
18221
+ $[37] = onValueChangeEnd;
18222
+ $[38] = toPublicValue;
18223
+ $[39] = t19;
18224
+ } else t19 = $[39];
18225
+ let t20;
18226
+ if ($[40] !== label || $[41] !== textColor) {
18227
+ t20 = label && /* @__PURE__ */ jsx(DsTypography, {
18228
+ variant: "body-sm-md",
18229
+ color: textColor,
18230
+ children: label
18231
+ });
18232
+ $[40] = label;
18233
+ $[41] = textColor;
18234
+ $[42] = t20;
18235
+ } else t20 = $[42];
18236
+ let t21;
18237
+ if ($[43] !== textColor || $[44] !== valueText) {
18238
+ t21 = /* @__PURE__ */ jsx(DsTypography, {
18239
+ variant: "body-sm-md",
18240
+ color: textColor,
18241
+ className: ds_slider_module_default.valueText,
18242
+ children: valueText
18243
+ });
18244
+ $[43] = textColor;
18245
+ $[44] = valueText;
18246
+ $[45] = t21;
18247
+ } else t21 = $[45];
18248
+ let t22;
18249
+ if ($[46] !== t20 || $[47] !== t21) {
18250
+ t22 = /* @__PURE__ */ jsxs("div", {
18251
+ className: ds_slider_module_default.header,
18252
+ children: [t20, t21]
18253
+ });
18254
+ $[46] = t20;
18255
+ $[47] = t21;
18256
+ $[48] = t22;
18257
+ } else t22 = $[48];
18258
+ let t23;
18259
+ if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
18260
+ t23 = /* @__PURE__ */ jsx(Slider.Track, {
18261
+ className: ds_slider_module_default.track,
18262
+ children: /* @__PURE__ */ jsx(Slider.Range, { className: ds_slider_module_default.range })
18263
+ });
18264
+ $[49] = t23;
18265
+ } else t23 = $[49];
18266
+ let t24;
18267
+ if ($[50] !== values) {
18268
+ t24 = values.map(_temp$1);
18269
+ $[50] = values;
18270
+ $[51] = t24;
18271
+ } else t24 = $[51];
18272
+ let t25;
18273
+ if ($[52] !== t24) {
18274
+ t25 = /* @__PURE__ */ jsxs(Slider.Control, {
18275
+ className: ds_slider_module_default.control,
18276
+ children: [t23, t24]
18277
+ });
18278
+ $[52] = t24;
18279
+ $[53] = t25;
18280
+ } else t25 = $[53];
18281
+ let t26;
18282
+ if ($[54] !== disabled || $[55] !== handleValueChange || $[56] !== max || $[57] !== min || $[58] !== name || $[59] !== ref || $[60] !== rootClass || $[61] !== step || $[62] !== style || $[63] !== t19 || $[64] !== t22 || $[65] !== t25 || $[66] !== thumbAriaLabels || $[67] !== values) {
18283
+ t26 = /* @__PURE__ */ jsxs(Slider.Root, {
18284
+ ref,
18285
+ className: rootClass,
18286
+ style,
18287
+ value: values,
18288
+ min,
18289
+ max,
18290
+ step,
18291
+ name,
18292
+ disabled,
18293
+ "aria-label": thumbAriaLabels,
18294
+ onValueChange: handleValueChange,
18295
+ onValueChangeEnd: t19,
18296
+ children: [t22, t25]
18297
+ });
18298
+ $[54] = disabled;
18299
+ $[55] = handleValueChange;
18300
+ $[56] = max;
18301
+ $[57] = min;
18302
+ $[58] = name;
18303
+ $[59] = ref;
18304
+ $[60] = rootClass;
18305
+ $[61] = step;
18306
+ $[62] = style;
18307
+ $[63] = t19;
18308
+ $[64] = t22;
18309
+ $[65] = t25;
18310
+ $[66] = thumbAriaLabels;
18311
+ $[67] = values;
18312
+ $[68] = t26;
18313
+ } else t26 = $[68];
18314
+ return t26;
18315
+ };
18316
+ DsSlider$1.displayName = "DsSlider";
18317
+ function _temp$1(_, index) {
18318
+ return /* @__PURE__ */ jsx(Slider.Thumb, {
18319
+ index,
18320
+ className: ds_slider_module_default.thumb,
18321
+ children: /* @__PURE__ */ jsx(Slider.HiddenInput, {})
18322
+ }, index);
18323
+ }
18324
+ //#endregion
18325
+ //#region src/components/ds-slider/index.ts
18326
+ const DsSlider = withResponsiveProps(DsSlider$1, [
18327
+ "size",
18328
+ "step",
18329
+ "thumbLabels"
18330
+ ]);
18331
+ DsSlider.displayName = "DsSlider";
18332
+ //#endregion
18333
+ //#region src/components/ds-smart-tabs/ds-smart-tabs.module.scss
18334
+ var ds_smart_tabs_module_default = {
18335
+ "active": "yjt8Lq_active",
18336
+ "container": "yjt8Lq_container",
18337
+ "content": "yjt8Lq_content",
18338
+ "disabled": "yjt8Lq_disabled",
18339
+ "icon": "yjt8Lq_icon",
18340
+ "label": "yjt8Lq_label",
18341
+ "tab": "yjt8Lq_tab",
18342
+ "value": "yjt8Lq_value"
18343
+ };
18344
+ //#endregion
18345
+ //#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
18346
+ const colorMap = {
18347
+ "dark-blue": "var(--background-info-strong)",
18348
+ "light-blue": "var(--background-active-moderate)",
18349
+ "dark-gray": "var(--background-brand)",
18350
+ green: "var(--background-success-strong)",
18351
+ fuchsia: "var(--color-dap-data-fuchsia)",
18352
+ blue: "var(--icon-information-secondary)",
18353
+ gray: "var(--icon-information-main)",
18354
+ red: "var(--icon-warning)",
18355
+ amber: "var(--color-dap-data-amber)"
18356
+ };
18357
+ const SmartTabsContext = createContext(null);
18358
+ const useSmartTabsContext = () => {
18359
+ const context = useContext(SmartTabsContext);
18360
+ if (!context) throw new Error("DsTab must be used within DsSmartTabs");
18361
+ return context;
18362
+ };
18363
+ /**
18364
+ * Individual tab component
18365
+ */
18366
+ const DsSmartTab = (t0) => {
18367
+ const $ = c(40);
18368
+ let className;
18369
+ let color;
18370
+ let content;
18371
+ let disabled;
18372
+ let icon;
18373
+ let label;
18374
+ let props;
18375
+ let t1;
18376
+ let value;
18377
+ if ($[0] !== t0) {
18378
+ ({label, value, icon, content, color, disabled, className, style: t1, ...props} = t0);
18379
+ $[0] = t0;
18380
+ $[1] = className;
18381
+ $[2] = color;
18382
+ $[3] = content;
18383
+ $[4] = disabled;
18384
+ $[5] = icon;
18385
+ $[6] = label;
18386
+ $[7] = props;
18387
+ $[8] = t1;
18388
+ $[9] = value;
18389
+ } else {
18390
+ className = $[1];
18391
+ color = $[2];
18392
+ content = $[3];
18393
+ disabled = $[4];
18394
+ icon = $[5];
18395
+ label = $[6];
18396
+ props = $[7];
18397
+ t1 = $[8];
18398
+ value = $[9];
18399
+ }
18109
18400
  let t2;
18110
18401
  if ($[10] !== t1) {
18111
18402
  t2 = t1 === void 0 ? {} : t1;
@@ -19943,6 +20234,8 @@ var ds_table_header_module_default = {
19943
20234
  "groupStart": "-2rCNG_groupStart",
19944
20235
  "header": "-2rCNG_header",
19945
20236
  "headerCell": "-2rCNG_headerCell",
20237
+ "headerLabel": "-2rCNG_headerLabel",
20238
+ "headerLabelStack": "-2rCNG_headerLabelStack",
19946
20239
  "headerRow": "-2rCNG_headerRow",
19947
20240
  "headerRowNoBorder": "-2rCNG_headerRowNoBorder",
19948
20241
  "headerRowVirtualized": "-2rCNG_headerRowVirtualized",
@@ -19968,16 +20261,15 @@ var ds_table_shared_module_default = {
19968
20261
  "rotate-90": "WQ6Axa_rotate-90"
19969
20262
  };
19970
20263
  //#endregion
19971
- //#region src/components/ds-table/context/ds-table-context.ts
19972
- const DsTableContext = createContext(null);
19973
- const useDsTableContext = () => {
19974
- const context = useContext(DsTableContext);
19975
- if (!context) throw new Error("useDsTableContext must be used within DsTable");
19976
- return context;
19977
- };
20264
+ //#region src/components/ds-table/hooks/use-editing-state.ts
20265
+ /** Shown when an async `onCellEdit` commit rejects with a non-`Error` reason. */
20266
+ const EDIT_FALLBACK_ERROR = "Save failed";
20267
+ const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
20268
+ /** Prefer a thrown `Error`'s message; fall back to a generic string otherwise. */
20269
+ const extractErrorMessage = (reason, fallback) => reason instanceof Error && reason.message ? reason.message : fallback;
19978
20270
  /**
19979
20271
  * Hoisted editing state for single-cell-at-a-time inline editing.
19980
- * Lives on {@link DsTableContext} so cell renderers and editors share one provider.
20272
+ * Surfaced on DsTableContext so cell renderers and editors share one provider.
19981
20273
  */
19982
20274
  const useEditingState = (onCellEdit, onCellValidate) => {
19983
20275
  const [editing, setEditing] = useState(null);
@@ -19987,6 +20279,12 @@ const useEditingState = (onCellEdit, onCellValidate) => {
19987
20279
  onCellValidateRef.current = onCellValidate;
19988
20280
  const editingRef = useRef(editing);
19989
20281
  editingRef.current = editing;
20282
+ const generationRef = useRef(0);
20283
+ const abortRef = useRef(null);
20284
+ const abortPending = useCallback(() => {
20285
+ abortRef.current?.abort();
20286
+ abortRef.current = null;
20287
+ }, []);
19990
20288
  return {
19991
20289
  editing,
19992
20290
  beginEdit: useCallback((cell) => {
@@ -19994,65 +20292,184 @@ const useEditingState = (onCellEdit, onCellValidate) => {
19994
20292
  if (current) {
19995
20293
  if (current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id) return;
19996
20294
  }
20295
+ abortPending();
20296
+ generationRef.current += 1;
19997
20297
  setEditing({
19998
20298
  cell,
19999
20299
  draftValue: cell.getValue(),
20000
- error: null
20300
+ error: null,
20301
+ pending: false
20001
20302
  });
20002
- }, []),
20303
+ }, [abortPending]),
20003
20304
  setDraft: useCallback((value) => {
20004
20305
  const current = editingRef.current;
20005
20306
  if (!current) return;
20307
+ const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, value) ?? null;
20006
20308
  setEditing({
20007
20309
  ...current,
20008
20310
  draftValue: value,
20009
- error: null
20311
+ error
20010
20312
  });
20011
20313
  }, []),
20012
20314
  commit: useCallback((overrideValue) => {
20013
20315
  const current = editingRef.current;
20014
- if (!current) return;
20316
+ if (!current || current.pending) return;
20015
20317
  const valueToCommit = overrideValue !== void 0 ? overrideValue : current.draftValue;
20016
- const error = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
20017
- if (error !== null) {
20318
+ const validationError = onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
20319
+ if (validationError !== null) {
20018
20320
  setEditing({
20019
20321
  ...current,
20020
20322
  draftValue: valueToCommit,
20021
- error
20323
+ error: validationError,
20324
+ pending: false
20022
20325
  });
20023
20326
  return;
20024
20327
  }
20025
- onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
20026
- setEditing(null);
20027
- }, []),
20328
+ generationRef.current += 1;
20329
+ const token = generationRef.current;
20330
+ abortPending();
20331
+ const controller = new AbortController();
20332
+ abortRef.current = controller;
20333
+ const { signal } = controller;
20334
+ const isStale = () => generationRef.current !== token;
20335
+ const settle = () => {
20336
+ if (abortRef.current === controller) abortRef.current = null;
20337
+ };
20338
+ const showError = (error) => {
20339
+ settle();
20340
+ if (isStale()) return;
20341
+ const live = editingRef.current;
20342
+ setEditing(live ? {
20343
+ ...live,
20344
+ draftValue: valueToCommit,
20345
+ error,
20346
+ pending: false
20347
+ } : null);
20348
+ };
20349
+ const editResult = onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit, signal);
20350
+ const applyEditResult = (error) => {
20351
+ if (error !== null) {
20352
+ showError(error);
20353
+ return;
20354
+ }
20355
+ settle();
20356
+ if (isStale()) return;
20357
+ setEditing(null);
20358
+ };
20359
+ if (!isThenable(editResult)) {
20360
+ applyEditResult(editResult ?? null);
20361
+ return;
20362
+ }
20363
+ setEditing({
20364
+ ...current,
20365
+ draftValue: valueToCommit,
20366
+ error: null,
20367
+ pending: true
20368
+ });
20369
+ editResult.then((value) => {
20370
+ applyEditResult(value ?? null);
20371
+ }, (reason) => {
20372
+ applyEditResult(extractErrorMessage(reason, EDIT_FALLBACK_ERROR));
20373
+ });
20374
+ }, [abortPending]),
20028
20375
  cancel: useCallback(() => {
20376
+ abortPending();
20377
+ generationRef.current += 1;
20029
20378
  setEditing(null);
20030
- }, [])
20379
+ }, [abortPending])
20031
20380
  };
20032
20381
  };
20033
20382
  //#endregion
20034
- //#region src/components/ds-table/utils/column-size.ts
20383
+ //#region src/components/ds-table/context/ds-table-context.tsx
20384
+ const DsTableContext = createContext(null);
20385
+ const useDsTableContext = () => {
20386
+ const context = useContext(DsTableContext);
20387
+ if (!context) throw new Error("useDsTableContext must be used within DsTable");
20388
+ return context;
20389
+ };
20035
20390
  /**
20036
- * Generates the appropriate style object for a table column/cell based on its size
20037
- *
20038
- * Custom-sized columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so
20039
- * they enforce horizontal overflow on the table container. Default-sized columns
20040
- * grow to fill the row evenly via `flex: 1`.
20041
- *
20042
- * @param columnSize - The size of the column
20043
- * @returns Style object for the column/cell
20391
+ * Assembles {@link DsTableContext} from public table props plus derived grouping
20392
+ * and resize slices. Owns inline-edit state. Picks context fields from
20393
+ * `tableProps` and ignores the rest (`columns`, `data`, etc.).
20044
20394
  */
20045
- const getColumnSizeStyle = (columnSize) => {
20046
- if (columnSize !== defaultColumnSizing.size) return {
20047
- width: columnSize,
20048
- minWidth: columnSize,
20049
- flexShrink: 0
20050
- };
20051
- return {
20052
- flex: 1,
20053
- minWidth: 0
20054
- };
20395
+ const DsTableContextProvider = ({ tableProps, derived, children }) => {
20396
+ const { stickyHeader, bordered, fullWidth, rowSize, expandable, selectable, reorderable, showSelectAllCheckbox, loading, onRowClick, onRowDoubleClick, primaryRowActions, secondaryRowActions, renderExpandedRow, virtualized, activeRowId, locale, onCellEdit, onCellValidate } = tableProps;
20397
+ const { collapsedColumnGroups, onToggleColumnGroup } = derived.grouping;
20398
+ const { resizableColumns, resizeSizingReady, resizeContainerRef, onResizeHover, onResizeDragStart, onResizeReset, onResizeKeyboardNudge } = derived.resize;
20399
+ const { editing, beginEdit, setDraft, commit, cancel } = useEditingState(onCellEdit, onCellValidate);
20400
+ const contextValue = useMemo(() => ({
20401
+ stickyHeader,
20402
+ bordered,
20403
+ fullWidth,
20404
+ rowSize,
20405
+ expandable,
20406
+ selectable,
20407
+ reorderable,
20408
+ showSelectAllCheckbox,
20409
+ loading,
20410
+ onRowClick: loading ? void 0 : onRowClick,
20411
+ onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
20412
+ primaryRowActions,
20413
+ secondaryRowActions,
20414
+ renderExpandedRow,
20415
+ virtualized,
20416
+ activeRowId,
20417
+ collapsedColumnGroups,
20418
+ onToggleColumnGroup,
20419
+ locale,
20420
+ onCellEdit,
20421
+ resizableColumns,
20422
+ resizeSizingReady,
20423
+ resizeContainerRef,
20424
+ onResizeHover,
20425
+ onResizeDragStart,
20426
+ onResizeReset,
20427
+ onResizeKeyboardNudge,
20428
+ editing,
20429
+ beginEdit,
20430
+ setDraft,
20431
+ commit,
20432
+ cancel
20433
+ }), [
20434
+ stickyHeader,
20435
+ bordered,
20436
+ fullWidth,
20437
+ rowSize,
20438
+ expandable,
20439
+ selectable,
20440
+ reorderable,
20441
+ showSelectAllCheckbox,
20442
+ loading,
20443
+ onRowClick,
20444
+ onRowDoubleClick,
20445
+ primaryRowActions,
20446
+ secondaryRowActions,
20447
+ renderExpandedRow,
20448
+ virtualized,
20449
+ activeRowId,
20450
+ collapsedColumnGroups,
20451
+ onToggleColumnGroup,
20452
+ locale,
20453
+ onCellEdit,
20454
+ resizableColumns,
20455
+ resizeSizingReady,
20456
+ resizeContainerRef,
20457
+ onResizeHover,
20458
+ onResizeDragStart,
20459
+ onResizeReset,
20460
+ onResizeKeyboardNudge,
20461
+ editing,
20462
+ beginEdit,
20463
+ setDraft,
20464
+ commit,
20465
+ cancel
20466
+ ]);
20467
+ return /* @__PURE__ */ jsx(DsTableContext.Provider, {
20468
+ value: contextValue,
20469
+ children
20470
+ });
20055
20471
  };
20472
+ DsTableContextProvider.displayName = "DsTableContextProvider";
20056
20473
  /**
20057
20474
  * Column id used for the synthetic expander column injected when `expandable` is set.
20058
20475
  */
@@ -20066,42 +20483,178 @@ const SELECT_COLUMN_ID = "select";
20066
20483
  * (non-virtualized tables only).
20067
20484
  */
20068
20485
  const REORDER_COLUMN_ID = "reorder";
20486
+ /**
20487
+ * Injected utility leaf ids (`select`, `expander`, `reorder`). Present in internal
20488
+ * sizing for layout; omitted from the public `onColumnSizingChange` payload.
20489
+ */
20490
+ const BUILTIN_COLUMN_IDS = Object.freeze(/* @__PURE__ */ new Set([
20491
+ SELECT_COLUMN_ID,
20492
+ EXPANDER_COLUMN_ID,
20493
+ REORDER_COLUMN_ID
20494
+ ]));
20069
20495
  //#endregion
20070
- //#region src/components/ds-table/grouping/utils/column-group.ts
20496
+ //#region src/components/ds-table/utils/column-size.ts
20497
+ const DEFAULT_MAX_COLUMN_SIZE = Number.MAX_SAFE_INTEGER;
20071
20498
  /**
20072
- * Builds the flex style for a group header cell so it lines up with the combined
20073
- * width of its visible leaf columns.
20499
+ * Whether a column should use a fixed width rather than fill (`flex: 1`).
20074
20500
  *
20075
- * Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
20076
- * unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
20077
- * both header rows distribute free space identically.
20501
+ * True when the user has resized it (`columnSizing` entry), or when the raw
20502
+ * column def authored `size` (`meta.hasExplicitSize`). TanStack merges a
20503
+ * default size of 150 onto every column, so `columnDef.size` alone cannot
20504
+ * tell authored 150px from an unsized fill column.
20078
20505
  */
20079
- const getGroupColumnSizeStyle = (leafColumns) => {
20080
- let fixedWidth = 0;
20081
- let flexCount = 0;
20082
- for (const leaf of leafColumns) {
20083
- const size = leaf.getSize();
20084
- if (size !== defaultColumnSizing.size) fixedWidth += size;
20085
- else flexCount += 1;
20086
- }
20087
- if (flexCount === 0) return {
20088
- width: fixedWidth,
20089
- minWidth: fixedWidth,
20506
+ const isExplicitColumnWidth = (column, columnSizing) => {
20507
+ if (columnSizing[column.id] !== void 0) return true;
20508
+ return column.columnDef.meta?.hasExplicitSize === true;
20509
+ };
20510
+ /**
20511
+ * Style for a table column/cell based on its size and whether that size is explicit.
20512
+ *
20513
+ * Explicit columns get a fixed `width` plus `minWidth` and `flexShrink: 0` so they
20514
+ * enforce horizontal overflow on the table container. Fill columns grow evenly via
20515
+ * `flex: 1`.
20516
+ */
20517
+ const getColumnSizeStyle = (columnSize, isExplicit) => {
20518
+ if (isExplicit) return {
20519
+ width: columnSize,
20520
+ minWidth: columnSize,
20090
20521
  flexShrink: 0
20091
20522
  };
20092
20523
  return {
20093
- flexGrow: flexCount,
20094
- flexShrink: 0,
20095
- flexBasis: fixedWidth,
20096
- minWidth: fixedWidth
20524
+ flex: 1,
20525
+ minWidth: 0
20097
20526
  };
20098
20527
  };
20528
+ const getHeaderSizeCssVar = (headerId) => `--header-${headerId}-size`;
20529
+ const getColumnSizeCssVar = (columnId) => `--col-${columnId}-size`;
20099
20530
  /**
20100
- * Whether a column is the first visible leaf of its parent group. Used to draw a
20101
- * single side border at the start of each group in both the header and body.
20531
+ * Pixel width via a CSS variable on an ancestor, so frozen (memoized) cells still
20532
+ * track live resize without React reconciling each row.
20102
20533
  */
20103
- const isFirstLeafColumnOfGroup = (column) => {
20104
- const parent = column.parent;
20534
+ const getResizableHeaderStyle = (headerId) => ({
20535
+ width: `calc(var(${getHeaderSizeCssVar(headerId)}) * 1px)`,
20536
+ minWidth: `calc(var(${getHeaderSizeCssVar(headerId)}) * 1px)`,
20537
+ flexShrink: 0
20538
+ });
20539
+ const getResizableColumnStyle = (columnId) => ({
20540
+ width: `calc(var(${getColumnSizeCssVar(columnId)}) * 1px)`,
20541
+ minWidth: `calc(var(${getColumnSizeCssVar(columnId)}) * 1px)`,
20542
+ flexShrink: 0
20543
+ });
20544
+ const getHeaderCellSizeStyle = (headerId, columnSize, isExplicit, resizeSizingReady) => {
20545
+ if (resizeSizingReady) return getResizableHeaderStyle(headerId);
20546
+ return getColumnSizeStyle(columnSize, isExplicit);
20547
+ };
20548
+ const getBodyCellSizeStyle = (columnId, columnSize, isExplicit, resizeSizingReady) => {
20549
+ if (resizeSizingReady) return getResizableColumnStyle(columnId);
20550
+ return getColumnSizeStyle(columnSize, isExplicit);
20551
+ };
20552
+ /**
20553
+ * TanStack v8 performant-resize map: header ids for header cells, column ids for
20554
+ * body cells. Values are unitless px; consumers use `calc(var(...) * 1px)`.
20555
+ */
20556
+ const getColumnSizeCssVars = (headers) => {
20557
+ const colSizes = {};
20558
+ for (const header of headers) {
20559
+ colSizes[getHeaderSizeCssVar(header.id)] = header.getSize();
20560
+ colSizes[getColumnSizeCssVar(header.column.id)] = header.column.getSize();
20561
+ }
20562
+ return colSizes;
20563
+ };
20564
+ /**
20565
+ * TanStack `getSize()` formula: `min(max(minSize, width), maxSize)`. Defaults
20566
+ * match DsTable (`RESIZE_MIN_COLUMN_WIDTH`, unlimited max).
20567
+ */
20568
+ const clampColumnSize = (width, minSize = 52, maxSize = DEFAULT_MAX_COLUMN_SIZE) => Math.min(Math.max(minSize, width), maxSize);
20569
+ /**
20570
+ * Clamps every finite entry in `sizing` to that leaf's `minSize` / `maxSize`.
20571
+ * Non-finite widths are omitted so they do not poison state. Ids missing from
20572
+ * `columns` use the table defaults.
20573
+ */
20574
+ const clampColumnSizing = (sizing, columns) => {
20575
+ const boundsById = new Map(columns.map((column) => [column.id, column.columnDef]));
20576
+ const next = {};
20577
+ for (const [id, width] of Object.entries(sizing)) {
20578
+ if (!Number.isFinite(width)) continue;
20579
+ const bounds = boundsById.get(id);
20580
+ next[id] = clampColumnSize(width, bounds?.minSize ?? 52, bounds?.maxSize ?? DEFAULT_MAX_COLUMN_SIZE);
20581
+ }
20582
+ return next;
20583
+ };
20584
+ /**
20585
+ * Width to restore on double-click: explicit `columnDef.size`, otherwise the
20586
+ * snapshotted measured width.
20587
+ */
20588
+ const getResizeOriginSize = (column, measuredWidth) => {
20589
+ if (isExplicitColumnWidth(column, {})) return column.columnDef.size;
20590
+ return measuredWidth;
20591
+ };
20592
+ /**
20593
+ * Measured leaf header widths keyed by column id. Group header cells share
20594
+ * `data-column-id` with a different id, so only `leafColumnIds` are read.
20595
+ */
20596
+ const measureLeafHeaderWidths = (tableEl, leafColumnIds) => {
20597
+ const widths = {};
20598
+ for (const id of leafColumnIds) {
20599
+ const cell = tableEl.querySelector(`thead th[data-column-id="${CSS.escape(id)}"]`);
20600
+ if (cell instanceof HTMLElement) widths[id] = cell.getBoundingClientRect().width;
20601
+ }
20602
+ return widths;
20603
+ };
20604
+ /**
20605
+ * Sizing entries for leaves that are not yet in `existing`. Does not overwrite
20606
+ * user-resized (or previously snapshotted) ids.
20607
+ */
20608
+ const collectMissingLeafSizing = (measured, existing) => {
20609
+ const next = {};
20610
+ for (const [id, width] of Object.entries(measured)) if (existing[id] === void 0) next[id] = Math.round(width);
20611
+ return next;
20612
+ };
20613
+ /**
20614
+ * Copy of `columnSizing` without injected utility leaves. Use at the public
20615
+ * `onColumnSizingChange` boundary so consumers persist only their own columns.
20616
+ */
20617
+ const omitBuiltinColumnSizing = (columnSizing) => {
20618
+ const next = {};
20619
+ for (const [id, size] of Object.entries(columnSizing)) if (!BUILTIN_COLUMN_IDS.has(id)) next[id] = size;
20620
+ return next;
20621
+ };
20622
+ //#endregion
20623
+ //#region src/components/ds-table/grouping/utils/column-group.ts
20624
+ /**
20625
+ * Builds the flex style for a group header cell so it lines up with the combined
20626
+ * width of its visible leaf columns.
20627
+ *
20628
+ * Fixed-width leaves contribute to `flexBasis`; fill leaves each add one unit of
20629
+ * `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so both
20630
+ * header rows distribute free space identically.
20631
+ */
20632
+ const getGroupColumnSizeStyle = (leafColumns, columnSizing) => {
20633
+ let fixedWidth = 0;
20634
+ let flexCount = 0;
20635
+ for (const leaf of leafColumns) {
20636
+ const size = leaf.getSize();
20637
+ if (isExplicitColumnWidth(leaf, columnSizing)) fixedWidth += size;
20638
+ else flexCount += 1;
20639
+ }
20640
+ if (flexCount === 0) return {
20641
+ width: fixedWidth,
20642
+ minWidth: fixedWidth,
20643
+ flexShrink: 0
20644
+ };
20645
+ return {
20646
+ flexGrow: flexCount,
20647
+ flexShrink: 0,
20648
+ flexBasis: fixedWidth,
20649
+ minWidth: fixedWidth
20650
+ };
20651
+ };
20652
+ /**
20653
+ * Whether a column is the first visible leaf of its parent group. Used to draw a
20654
+ * single side border at the start of each group in both the header and body.
20655
+ */
20656
+ const isFirstLeafColumnOfGroup = (column) => {
20657
+ const parent = column.parent;
20105
20658
  if (!parent) return false;
20106
20659
  return parent.getLeafColumns().filter((leaf) => leaf.getIsVisible())[0]?.id === column.id;
20107
20660
  };
@@ -20169,9 +20722,153 @@ const useColumnGroups = ({ columns, collapsedColumnGroups, onCollapsedColumnGrou
20169
20722
  */
20170
20723
  const defaultDsTableLocale = Object.freeze({
20171
20724
  collapseColumnGroup: "Collapse column group",
20172
- expandColumnGroup: "Expand column group"
20725
+ expandColumnGroup: "Expand column group",
20726
+ resizeColumn: "Resize column"
20173
20727
  });
20174
20728
  //#endregion
20729
+ //#region src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.module.scss
20730
+ var ds_table_resize_handle_module_default = { "resizeHandle": "vDdhQW_resizeHandle" };
20731
+ //#endregion
20732
+ //#region src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.tsx
20733
+ const clientPointFromEvent = (event) => {
20734
+ if (event instanceof MouseEvent) return {
20735
+ x: event.clientX,
20736
+ y: event.clientY
20737
+ };
20738
+ if (typeof TouchEvent !== "undefined" && event instanceof TouchEvent) {
20739
+ const touch = event.changedTouches[0];
20740
+ return touch ? {
20741
+ x: touch.clientX,
20742
+ y: touch.clientY
20743
+ } : null;
20744
+ }
20745
+ return null;
20746
+ };
20747
+ /**
20748
+ * Handle straddling the right edge of a resizable header cell.
20749
+ *
20750
+ * Drag is TanStack v8 `header.getResizeHandler()`. Hover drives the full-height
20751
+ * overlay; double-click restores snapshot origin widths for this header's
20752
+ * leaves. As a focusable `separator`, Arrow keys nudge the width (Shift for a
20753
+ * larger step) for keyboard operability (WCAG 2.1.1).
20754
+ */
20755
+ const DsTableResizeHandle = ({ header }) => {
20756
+ const { resizeContainerRef, onResizeHover, onResizeDragStart, onResizeReset, onResizeKeyboardNudge, locale } = useDsTableContext();
20757
+ const handleRef = useRef(null);
20758
+ const isPointerOverRef = useRef(false);
20759
+ const detachDragEndRef = useRef(null);
20760
+ useEffect(() => () => {
20761
+ detachDragEndRef.current?.();
20762
+ }, []);
20763
+ const label = {
20764
+ ...defaultDsTableLocale,
20765
+ ...locale
20766
+ }.resizeColumn;
20767
+ const measureCellRightOffset = () => {
20768
+ const containerEl = resizeContainerRef?.current;
20769
+ const cellEl = handleRef.current?.closest("th");
20770
+ if (!containerEl || !cellEl) return null;
20771
+ return cellEl.getBoundingClientRect().right - containerEl.getBoundingClientRect().left + containerEl.scrollLeft;
20772
+ };
20773
+ const reportHover = () => {
20774
+ const offset = measureCellRightOffset();
20775
+ if (offset === null) return;
20776
+ onResizeHover?.(header.column.id, offset);
20777
+ };
20778
+ const clearHover = () => {
20779
+ isPointerOverRef.current = false;
20780
+ onResizeHover?.(null, null);
20781
+ };
20782
+ const syncHoverAtPoint = (clientX, clientY) => {
20783
+ const handleEl = handleRef.current;
20784
+ const hit = (handleEl?.ownerDocument ?? document).elementFromPoint(clientX, clientY);
20785
+ if (handleEl && hit && (hit === handleEl || handleEl.contains(hit))) {
20786
+ isPointerOverRef.current = true;
20787
+ reportHover();
20788
+ return;
20789
+ }
20790
+ clearHover();
20791
+ };
20792
+ const attachDragEndListeners = () => {
20793
+ detachDragEndRef.current?.();
20794
+ const doc = handleRef.current?.ownerDocument ?? document;
20795
+ const onDragEnd = (event) => {
20796
+ detachDragEndRef.current?.();
20797
+ detachDragEndRef.current = null;
20798
+ const point = clientPointFromEvent(event);
20799
+ clearHover();
20800
+ (handleRef.current?.ownerDocument.defaultView ?? window).requestAnimationFrame(() => {
20801
+ if (!point) return;
20802
+ syncHoverAtPoint(point.x, point.y);
20803
+ });
20804
+ };
20805
+ doc.addEventListener("mouseup", onDragEnd);
20806
+ doc.addEventListener("touchend", onDragEnd);
20807
+ detachDragEndRef.current = () => {
20808
+ doc.removeEventListener("mouseup", onDragEnd);
20809
+ doc.removeEventListener("touchend", onDragEnd);
20810
+ };
20811
+ };
20812
+ const handlePointerEnter = () => {
20813
+ isPointerOverRef.current = true;
20814
+ reportHover();
20815
+ };
20816
+ const handlePointerLeave = () => {
20817
+ clearHover();
20818
+ };
20819
+ const startDrag = () => {
20820
+ const offset = measureCellRightOffset();
20821
+ if (offset !== null) onResizeDragStart?.(offset);
20822
+ };
20823
+ const handlePointerDown = (event) => {
20824
+ if (event.pointerType === "touch") return;
20825
+ event.stopPropagation();
20826
+ startDrag();
20827
+ header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
20828
+ attachDragEndListeners();
20829
+ };
20830
+ const handleTouchStart = (event) => {
20831
+ event.stopPropagation();
20832
+ startDrag();
20833
+ header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
20834
+ attachDragEndListeners();
20835
+ };
20836
+ const handleReset = (event) => {
20837
+ event.preventDefault();
20838
+ event.stopPropagation();
20839
+ const leafIds = header.column.getLeafColumns().map((column) => column.id);
20840
+ onResizeReset?.(leafIds);
20841
+ if (isPointerOverRef.current) reportHover();
20842
+ else clearHover();
20843
+ };
20844
+ const handleKeyDown = (event) => {
20845
+ if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
20846
+ event.preventDefault();
20847
+ event.stopPropagation();
20848
+ const step = event.shiftKey ? 40 : 10;
20849
+ const delta = event.key === "ArrowRight" ? step : -step;
20850
+ onResizeKeyboardNudge?.(header.column.id, delta);
20851
+ };
20852
+ const isLeaf = header.subHeaders.length === 0;
20853
+ return /* @__PURE__ */ jsx("div", {
20854
+ ref: handleRef,
20855
+ role: "separator",
20856
+ "aria-orientation": "vertical",
20857
+ "aria-label": label,
20858
+ tabIndex: 0,
20859
+ "aria-valuenow": Math.round(header.getSize()),
20860
+ "aria-valuemin": isLeaf ? header.column.columnDef.minSize ?? 52 : void 0,
20861
+ className: ds_table_resize_handle_module_default.resizeHandle,
20862
+ onPointerDown: handlePointerDown,
20863
+ onPointerEnter: handlePointerEnter,
20864
+ onPointerLeave: handlePointerLeave,
20865
+ onTouchStart: handleTouchStart,
20866
+ onClick: (event) => event.stopPropagation(),
20867
+ onDoubleClick: handleReset,
20868
+ onKeyDown: handleKeyDown
20869
+ });
20870
+ };
20871
+ //#endregion
20175
20872
  //#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss
20176
20873
  var ds_table_group_header_cell_module_default = {
20177
20874
  "collapseToggle": "HuJ4KG_collapseToggle",
@@ -20182,22 +20879,25 @@ var ds_table_group_header_cell_module_default = {
20182
20879
  //#endregion
20183
20880
  //#region src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx
20184
20881
  const DsTableGroupHeaderCell = ({ header }) => {
20185
- const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext();
20882
+ const { collapsedColumnGroups, onToggleColumnGroup, locale, resizableColumns, resizeSizingReady } = useDsTableContext();
20186
20883
  const groupId = header.column.id;
20187
- const groupStyle = getGroupColumnSizeStyle(header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible()));
20884
+ const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
20885
+ const groupStyle = resizeSizingReady ? getResizableHeaderStyle(header.id) : getGroupColumnSizeStyle(visibleLeafColumns, {});
20188
20886
  const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
20189
20887
  const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
20888
+ const canResize = resizableColumns && !isCollapsed && header.column.getCanResize();
20190
20889
  const mergedLocale = {
20191
20890
  ...defaultDsTableLocale,
20192
20891
  ...locale
20193
20892
  };
20194
20893
  const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
20195
20894
  const handleToggle = () => onToggleColumnGroup?.(groupId);
20196
- return /* @__PURE__ */ jsx(TableHead, {
20895
+ return /* @__PURE__ */ jsxs(TableHead, {
20896
+ "data-column-id": groupId,
20197
20897
  className: ds_table_group_header_cell_module_default.groupHeaderCell,
20198
20898
  style: groupStyle,
20199
20899
  colSpan: header.colSpan,
20200
- children: /* @__PURE__ */ jsxs("div", {
20900
+ children: [/* @__PURE__ */ jsxs("div", {
20201
20901
  className: ds_table_group_header_cell_module_default.groupHeaderContent,
20202
20902
  children: [/* @__PURE__ */ jsx("span", {
20203
20903
  className: ds_table_group_header_cell_module_default.groupLabel,
@@ -20212,42 +20912,49 @@ const DsTableGroupHeaderCell = ({ header }) => {
20212
20912
  title: toggleLabel,
20213
20913
  onClick: handleToggle
20214
20914
  })]
20215
- })
20915
+ }), canResize && /* @__PURE__ */ jsx(DsTableResizeHandle, { header })]
20216
20916
  });
20217
20917
  };
20218
20918
  //#endregion
20219
20919
  //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
20220
20920
  const DsTableHeader = ({ table }) => {
20221
- const { bordered, virtualized } = useDsTableContext();
20921
+ const { bordered, virtualized, resizableColumns, resizeSizingReady } = useDsTableContext();
20222
20922
  return /* @__PURE__ */ jsx(TableHeader, {
20223
20923
  className: classNames(ds_table_header_module_default.header, virtualized && ds_table_header_module_default.virtualizedHeader),
20224
20924
  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
20225
20925
  className: classNames(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
20226
20926
  children: headerGroup.headers.map((header) => {
20927
+ const columnSizing = table.getState().columnSizing;
20227
20928
  if (header.isPlaceholder) return /* @__PURE__ */ jsx(TableHead, {
20228
20929
  className: ds_table_header_module_default.headerCell,
20229
- style: getColumnSizeStyle(header.getSize())
20930
+ style: getHeaderCellSizeStyle(header.id, header.getSize(), isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady)
20230
20931
  }, header.id);
20231
20932
  if (header.subHeaders.length > 0) return /* @__PURE__ */ jsx(DsTableGroupHeaderCell, { header }, header.id);
20232
- const headerStyle = getColumnSizeStyle(header.column.getSize());
20933
+ const headerStyle = getHeaderCellSizeStyle(header.id, header.column.getSize(), isExplicitColumnWidth(header.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady);
20233
20934
  const canSort = header.column.getCanSort();
20935
+ const canResize = resizableColumns && header.column.getCanResize();
20234
20936
  const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
20235
20937
  const isGroupStart = isFirstLeafColumnOfGroup(header.column);
20236
20938
  const metaFilter = header.column.columnDef.meta?.filter;
20237
20939
  const resolvedFilter = metaFilter && "render" in metaFilter ? metaFilter : void 0;
20238
20940
  const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
20239
- return /* @__PURE__ */ jsx(TableHead, {
20941
+ return /* @__PURE__ */ jsxs(TableHead, {
20942
+ "data-column-id": header.column.id,
20240
20943
  className: classNames(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, isGroupStart && ds_table_header_module_default.groupStart),
20241
20944
  onClick: header.column.getToggleSortingHandler(),
20242
20945
  style: headerStyle,
20243
- children: /* @__PURE__ */ jsxs("div", {
20946
+ children: [/* @__PURE__ */ jsxs("div", {
20244
20947
  className: ds_table_header_module_default.headerSortContainer,
20245
20948
  children: [
20246
20949
  /* @__PURE__ */ jsx(DsStack, {
20247
20950
  direction: "column",
20248
20951
  justifyContent: "center",
20249
20952
  width: "100%",
20250
- children: flexRender(header.column.columnDef.header, header.getContext())
20953
+ className: ds_table_header_module_default.headerLabelStack,
20954
+ children: /* @__PURE__ */ jsx("span", {
20955
+ className: ds_table_header_module_default.headerLabel,
20956
+ children: flexRender(header.column.columnDef.header, header.getContext())
20957
+ })
20251
20958
  }),
20252
20959
  canSort && /* @__PURE__ */ jsx("div", {
20253
20960
  className: ds_table_header_module_default.pageButtonIconContainer,
@@ -20273,13 +20980,29 @@ const DsTableHeader = ({ table }) => {
20273
20980
  })
20274
20981
  })
20275
20982
  ]
20276
- })
20983
+ }), canResize && /* @__PURE__ */ jsx(DsTableResizeHandle, { header })]
20277
20984
  }, header.id);
20278
20985
  })
20279
20986
  }, headerGroup.id))
20280
20987
  });
20281
20988
  };
20282
20989
  //#endregion
20990
+ //#region src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.module.scss
20991
+ var ds_table_resize_overlay_module_default = { "resizeOverlay": "DO-LLa_resizeOverlay" };
20992
+ //#endregion
20993
+ //#region src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.tsx
20994
+ /**
20995
+ * Full-height divider that tracks the active column's right edge during hover
20996
+ * and drag resize.
20997
+ */
20998
+ const DsTableResizeOverlay = ({ offset, phase }) => /* @__PURE__ */ jsx("div", {
20999
+ className: ds_table_resize_overlay_module_default.resizeOverlay,
21000
+ style: { left: offset },
21001
+ "data-resize-overlay": true,
21002
+ "data-resize-phase": phase,
21003
+ "aria-hidden": true
21004
+ });
21005
+ //#endregion
20283
21006
  //#region src/components/ds-table/ds-table.module.scss
20284
21007
  var ds_table_module_default = {
20285
21008
  "bulkActionsVisible": "iL9mtW_bulkActionsVisible",
@@ -20294,6 +21017,28 @@ var ds_table_module_default = {
20294
21017
  "virtualizedContainer": "iL9mtW_virtualizedContainer"
20295
21018
  };
20296
21019
  //#endregion
21020
+ //#region src/components/ds-table/ds-table-defaults.ts
21021
+ /**
21022
+ * Applies the documented `DsTable` prop defaults. Call once at the table
21023
+ * boundary so orchestration and context see the same resolved values.
21024
+ */
21025
+ const applyDsTableDefaults = (props) => ({
21026
+ ...props,
21027
+ virtualized: props.virtualized ?? false,
21028
+ stickyHeader: props.stickyHeader ?? true,
21029
+ bordered: props.bordered ?? true,
21030
+ fullWidth: props.fullWidth ?? true,
21031
+ rowSize: props.rowSize ?? "medium",
21032
+ loading: props.loading ?? false,
21033
+ expandable: props.expandable ?? false,
21034
+ selectable: props.selectable ?? false,
21035
+ showSelectAllCheckbox: props.showSelectAllCheckbox ?? true,
21036
+ primaryRowActions: props.primaryRowActions ?? [],
21037
+ actions: props.actions ?? [],
21038
+ reorderable: props.reorderable ?? false,
21039
+ resizableColumns: props.resizableColumns ?? false
21040
+ });
21041
+ //#endregion
20297
21042
  //#region src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss
20298
21043
  var ds_table_editable_cell_module_default = {
20299
21044
  "editButton": "g5FEoW_editButton",
@@ -20359,12 +21104,16 @@ var ds_table_editing_cell_module_default = {
20359
21104
  //#endregion
20360
21105
  //#region src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx
20361
21106
  const DsTableEditingCell = ({ cell }) => {
20362
- const { commit, cancel } = useDsTableContext();
21107
+ const { commit, cancel, editing } = useDsTableContext();
20363
21108
  const columnDef = cell.column.columnDef;
20364
21109
  const editAnchorRef = useRef(null);
21110
+ const isActiveCell = editing?.cell.id === cell.id;
21111
+ const isPending = isActiveCell && editing.pending;
21112
+ const hasError = isActiveCell && editing.error !== null;
20365
21113
  const handleSubmit = (event) => {
20366
21114
  event.preventDefault();
20367
21115
  event.stopPropagation();
21116
+ if (isPending || hasError) return;
20368
21117
  commit();
20369
21118
  };
20370
21119
  useEffect(() => {
@@ -20416,6 +21165,8 @@ const DsTableEditingCell = ({ cell }) => {
20416
21165
  variant: "tertiary",
20417
21166
  size: "small",
20418
21167
  icon: "check",
21168
+ loading: isPending,
21169
+ disabled: hasError,
20419
21170
  "aria-label": "Confirm edit",
20420
21171
  onClick: (event) => {
20421
21172
  event.stopPropagation();
@@ -20561,7 +21312,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners, style }) => {
20561
21312
  });
20562
21313
  };
20563
21314
  const DsTableRow = ({ ref, row, isSelected }) => {
20564
- const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading } = useDsTableContext();
21315
+ const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId, loading, resizeSizingReady } = useDsTableContext();
20565
21316
  const isExpanded = row.getIsExpanded();
20566
21317
  const isActive = activeRowId === row.id;
20567
21318
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -20569,7 +21320,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
20569
21320
  disabled: !reorderable
20570
21321
  });
20571
21322
  const rowStyle = reorderable ? {
20572
- transform: CSS.Transform.toString(transform),
21323
+ transform: CSS$1.Transform.toString(transform),
20573
21324
  transition,
20574
21325
  ...isDragging ? {
20575
21326
  background: "var(--color-dap-purple-200)",
@@ -20590,7 +21341,8 @@ const DsTableRow = ({ ref, row, isSelected }) => {
20590
21341
  onClick: () => onRowClick?.(row.original),
20591
21342
  onDoubleClick: () => onRowDoubleClick?.(row.original),
20592
21343
  children: row.getVisibleCells().map((cell, idx) => {
20593
- const cellStyle = getColumnSizeStyle(cell.column.getSize());
21344
+ const columnSizing = cell.getContext().table.getState().columnSizing;
21345
+ const cellStyle = getBodyCellSizeStyle(cell.column.id, cell.column.getSize(), isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady);
20594
21346
  if (cell.column.id === "reorder") return /* @__PURE__ */ jsx(DsRowDragHandle, {
20595
21347
  isDragging,
20596
21348
  attributes,
@@ -20622,56 +21374,6 @@ const DsTableRow = ({ ref, row, isSelected }) => {
20622
21374
  })] });
20623
21375
  };
20624
21376
  //#endregion
20625
- //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
20626
- var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
20627
- //#endregion
20628
- //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
20629
- const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
20630
- const isExpanded = row.getIsExpanded();
20631
- return /* @__PURE__ */ jsx(DsButton, {
20632
- design: "v1.2",
20633
- buttonType: "tertiary",
20634
- size: "small",
20635
- className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
20636
- onClick: (e) => {
20637
- e.stopPropagation();
20638
- row.toggleExpanded();
20639
- },
20640
- onDoubleClick: (e) => {
20641
- e.stopPropagation();
20642
- },
20643
- children: /* @__PURE__ */ jsx(DsIcon, {
20644
- icon: "chevron_right",
20645
- size: "small",
20646
- className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
20647
- })
20648
- });
20649
- };
20650
- //#endregion
20651
- //#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
20652
- const DsTableRowSelectableCell = ({ row }) => {
20653
- return /* @__PURE__ */ jsx(DsCheckbox, {
20654
- className: ds_table_shared_module_default.checkboxContainer,
20655
- checked: row.getIsSelected(),
20656
- disabled: !row.getCanSelect(),
20657
- onCheckedChange: (checked) => row.toggleSelected(!!checked),
20658
- onClick: (e) => e.stopPropagation(),
20659
- onDoubleClick: (e) => e.stopPropagation()
20660
- });
20661
- };
20662
- //#endregion
20663
- //#region src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx
20664
- const DsTableHeaderSelectableCell = ({ table }) => {
20665
- const checked = table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false;
20666
- return /* @__PURE__ */ jsx(DsCheckbox, {
20667
- className: ds_table_shared_module_default.checkboxContainer,
20668
- checked,
20669
- onCheckedChange: (nextChecked) => table.toggleAllRowsSelected(!!nextChecked),
20670
- onClick: (e) => e.stopPropagation(),
20671
- onDoubleClick: (e) => e.stopPropagation()
20672
- });
20673
- };
20674
- //#endregion
20675
21377
  //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
20676
21378
  const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ jsx(DndContext, {
20677
21379
  collisionDetection: closestCenter,
@@ -20716,6 +21418,201 @@ function useDragAndDrop({ isDragEnabled, onOrderChange, items }) {
20716
21418
  };
20717
21419
  }
20718
21420
  //#endregion
21421
+ //#region src/components/ds-table/hooks/use-column-resize.ts
21422
+ const INITIAL_COLUMN_SIZING_INFO = {
21423
+ startOffset: null,
21424
+ startSize: null,
21425
+ deltaOffset: null,
21426
+ deltaPercentage: null,
21427
+ isResizingColumn: false,
21428
+ columnSizingStart: []
21429
+ };
21430
+ /**
21431
+ * Owns column-resize state, TanStack sizing handlers, origin snapshots, seed
21432
+ * measurement, hover/drag overlay model, and the context slice consumed by
21433
+ * resize handles.
21434
+ *
21435
+ * Call before `useReactTable`, spread `tableOptions` / `state` into it, then
21436
+ * `bind(table)` during render for CSS vars, overlay, and context.
21437
+ */
21438
+ const useColumnResize = ({ enabled, columnSizing: columnSizingProp, onColumnSizingChange, columns, columnVisibility }) => {
21439
+ const [columnResizeState, setColumnResizeState] = useState({
21440
+ columnSizing: {},
21441
+ columnSizingInfo: INITIAL_COLUMN_SIZING_INFO
21442
+ });
21443
+ const { columnSizing: internalColumnSizing, columnSizingInfo } = columnResizeState;
21444
+ const columnSizing = useMemo(() => columnSizingProp ? {
21445
+ ...columnSizingProp,
21446
+ ...internalColumnSizing
21447
+ } : internalColumnSizing, [columnSizingProp, internalColumnSizing]);
21448
+ const [resizeHover, setResizeHover] = useState(null);
21449
+ const dragStartOffsetRef = useRef(null);
21450
+ const resizeOriginSizingRef = useRef({});
21451
+ const containerRef = useRef(null);
21452
+ const tableRef = useRef(null);
21453
+ const columnSizingRef = useRef(columnSizing);
21454
+ columnSizingRef.current = columnSizing;
21455
+ const columnSizingInfoRef = useRef(columnSizingInfo);
21456
+ columnSizingInfoRef.current = columnSizingInfo;
21457
+ const onColumnSizingChangeRef = useRef(onColumnSizingChange);
21458
+ onColumnSizingChangeRef.current = onColumnSizingChange;
21459
+ const leafSizeBoundsRef = useRef([]);
21460
+ const handleColumnSizingChange = useCallback((updaterOrValue) => {
21461
+ const clamped = clampColumnSizing(typeof updaterOrValue === "function" ? updaterOrValue(columnSizingRef.current) : updaterOrValue, leafSizeBoundsRef.current);
21462
+ columnSizingRef.current = clamped;
21463
+ setColumnResizeState((prev) => ({
21464
+ ...prev,
21465
+ columnSizing: clamped
21466
+ }));
21467
+ }, []);
21468
+ const handleColumnSizingInfoChange = useCallback((updaterOrValue) => {
21469
+ const prevInfo = columnSizingInfoRef.current;
21470
+ const nextInfo = typeof updaterOrValue === "function" ? updaterOrValue(prevInfo) : updaterOrValue;
21471
+ const ended = Boolean(prevInfo.isResizingColumn) && nextInfo.isResizingColumn === false;
21472
+ columnSizingInfoRef.current = nextInfo;
21473
+ setColumnResizeState((prev) => ({
21474
+ ...prev,
21475
+ columnSizingInfo: nextInfo
21476
+ }));
21477
+ if (ended) onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(columnSizingRef.current));
21478
+ }, []);
21479
+ const handleResizeHover = useCallback((columnId, offset) => {
21480
+ setResizeHover(columnId === null || offset === null ? null : {
21481
+ columnId,
21482
+ offset
21483
+ });
21484
+ }, []);
21485
+ const handleResizeDragStart = useCallback((offset) => {
21486
+ dragStartOffsetRef.current = offset;
21487
+ }, []);
21488
+ const handleResizeReset = useCallback((columnIds) => {
21489
+ const next = { ...columnSizingRef.current };
21490
+ for (const id of columnIds) {
21491
+ const origin = resizeOriginSizingRef.current[id];
21492
+ if (origin !== void 0) next[id] = origin;
21493
+ }
21494
+ const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
21495
+ handleColumnSizingChange(clamped);
21496
+ onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
21497
+ }, [handleColumnSizingChange]);
21498
+ const handleResizeKeyboardNudge = useCallback((columnId, delta) => {
21499
+ const table = tableRef.current;
21500
+ const column = table?.getColumn(columnId);
21501
+ if (!table || !column) return;
21502
+ const leaves = column.getLeafColumns().filter((leaf) => leaf.getIsVisible() && leaf.getCanResize());
21503
+ const totalSize = leaves.reduce((sum, leaf) => sum + leaf.getSize(), 0);
21504
+ if (leaves.length === 0 || totalSize <= 0) return;
21505
+ const next = { ...columnSizingRef.current };
21506
+ for (const leaf of leaves) {
21507
+ const size = leaf.getSize();
21508
+ next[leaf.id] = Math.round(size + delta * (size / totalSize));
21509
+ }
21510
+ const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
21511
+ handleColumnSizingChange(clamped);
21512
+ onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
21513
+ }, [handleColumnSizingChange]);
21514
+ useLayoutEffect(() => {
21515
+ if (!enabled) return;
21516
+ const container = containerRef.current;
21517
+ const table = tableRef.current;
21518
+ if (!container || !table) return;
21519
+ const seedMissingLeaves = () => {
21520
+ if (container.getBoundingClientRect().width === 0) return false;
21521
+ const tableEl = container.querySelector("table");
21522
+ if (!(tableEl instanceof HTMLElement)) return false;
21523
+ const leaves = table.getVisibleLeafColumns();
21524
+ const measured = measureLeafHeaderWidths(tableEl, leaves.map((column) => column.id));
21525
+ for (const column of leaves) {
21526
+ const measuredWidth = measured[column.id];
21527
+ if (measuredWidth === void 0 || resizeOriginSizingRef.current[column.id] !== void 0) continue;
21528
+ resizeOriginSizingRef.current[column.id] = getResizeOriginSize(column, Math.round(measuredWidth));
21529
+ }
21530
+ const missing = collectMissingLeafSizing(measured, columnSizingRef.current);
21531
+ if (Object.keys(missing).length > 0) handleColumnSizingChange((prev) => ({
21532
+ ...clampColumnSizing(missing, leafSizeBoundsRef.current),
21533
+ ...prev
21534
+ }));
21535
+ return true;
21536
+ };
21537
+ if (seedMissingLeaves()) return;
21538
+ const observer = new ResizeObserver(() => {
21539
+ if (seedMissingLeaves()) observer.disconnect();
21540
+ });
21541
+ observer.observe(container);
21542
+ return () => observer.disconnect();
21543
+ }, [
21544
+ enabled,
21545
+ columns,
21546
+ columnVisibility,
21547
+ handleColumnSizingChange
21548
+ ]);
21549
+ const tableOptions = useMemo(() => ({
21550
+ enableColumnResizing: enabled,
21551
+ columnResizeMode: "onChange",
21552
+ ...enabled ? { defaultColumn: { minSize: 52 } } : {},
21553
+ onColumnSizingChange: handleColumnSizingChange,
21554
+ onColumnSizingInfoChange: handleColumnSizingInfoChange
21555
+ }), [
21556
+ enabled,
21557
+ handleColumnSizingChange,
21558
+ handleColumnSizingInfoChange
21559
+ ]);
21560
+ const bind = (table) => {
21561
+ tableRef.current = table;
21562
+ leafSizeBoundsRef.current = table.getAllLeafColumns();
21563
+ const visibleLeafIds = table.getVisibleLeafColumns().map((column) => column.id);
21564
+ const resizeSizingReady = enabled && visibleLeafIds.length > 0 && visibleLeafIds.every((id) => columnSizing[id] !== void 0);
21565
+ const columnSizeVars = resizeSizingReady ? {
21566
+ ...getColumnSizeCssVars(table.getFlatHeaders()),
21567
+ width: table.getTotalSize()
21568
+ } : void 0;
21569
+ if (!enabled) return {
21570
+ columnSizeVars: void 0,
21571
+ activeResize: null,
21572
+ context: {
21573
+ resizableColumns: false,
21574
+ resizeSizingReady: false,
21575
+ resizeContainerRef: containerRef,
21576
+ onResizeHover: handleResizeHover,
21577
+ onResizeDragStart: handleResizeDragStart,
21578
+ onResizeReset: handleResizeReset,
21579
+ onResizeKeyboardNudge: handleResizeKeyboardNudge
21580
+ }
21581
+ };
21582
+ const isResizingColumn = columnSizingInfo.isResizingColumn;
21583
+ const resizingHeader = typeof isResizingColumn === "string" ? table.getFlatHeaders().find((header) => header.column.id === isResizingColumn) : void 0;
21584
+ const startSize = columnSizingInfo.startSize;
21585
+ const clampedResizeDelta = resizingHeader && startSize !== null ? resizingHeader.getSize() - startSize : columnSizingInfo.deltaOffset ?? 0;
21586
+ return {
21587
+ columnSizeVars,
21588
+ activeResize: isResizingColumn && dragStartOffsetRef.current !== null ? {
21589
+ offset: dragStartOffsetRef.current + clampedResizeDelta,
21590
+ phase: "dragging"
21591
+ } : resizeHover ? {
21592
+ offset: resizeHover.offset,
21593
+ phase: "hover"
21594
+ } : null,
21595
+ context: {
21596
+ resizableColumns: enabled,
21597
+ resizeSizingReady,
21598
+ resizeContainerRef: containerRef,
21599
+ onResizeHover: handleResizeHover,
21600
+ onResizeDragStart: handleResizeDragStart,
21601
+ onResizeReset: handleResizeReset,
21602
+ onResizeKeyboardNudge: handleResizeKeyboardNudge
21603
+ }
21604
+ };
21605
+ };
21606
+ return {
21607
+ tableOptions,
21608
+ state: {
21609
+ columnSizing,
21610
+ columnSizingInfo
21611
+ },
21612
+ bind
21613
+ };
21614
+ };
21615
+ //#endregion
20719
21616
  //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.module.scss
20720
21617
  var ds_table_body_virtualized_module_default = {
20721
21618
  "body": "vRRk8q_body",
@@ -20745,7 +21642,7 @@ var ds_table_row_virtualized_module_default = {
20745
21642
  //#endregion
20746
21643
  //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
20747
21644
  const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
20748
- const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading } = useDsTableContext();
21645
+ const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick, loading, resizeSizingReady } = useDsTableContext();
20749
21646
  const isExpanded = row.getIsExpanded();
20750
21647
  const isActive = activeRowId === row.id;
20751
21648
  return /* @__PURE__ */ jsx(TableRow, {
@@ -20769,8 +21666,9 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
20769
21666
  onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
20770
21667
  children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsx(Fragment, { children: row.getVisibleCells().map((cell, idx) => {
20771
21668
  const isLastColumn = idx === row.getVisibleCells().length - 1;
21669
+ const columnSizing = cell.getContext().table.getState().columnSizing;
20772
21670
  return /* @__PURE__ */ jsx(TableCell, {
20773
- style: getColumnSizeStyle(cell.column.getSize()),
21671
+ style: getBodyCellSizeStyle(cell.column.id, cell.column.getSize(), isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}), !!resizeSizingReady),
20774
21672
  className: classNames(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, isFirstLeafColumnOfGroup(cell.column) && ds_table_row_virtualized_module_default.groupStart, typeof cell.column.columnDef.editCell === "function" && ds_table_row_virtualized_module_default.editableCell),
20775
21673
  children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
20776
21674
  row,
@@ -20909,6 +21807,194 @@ function DsTableBody({ ref, rowVirtualizer, rowsMapRef, rowHeightsMapRef, rowsAn
20909
21807
  });
20910
21808
  }
20911
21809
  //#endregion
21810
+ //#region src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx
21811
+ const DsTableHeaderSelectableCell = ({ table }) => {
21812
+ const checked = table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false;
21813
+ return /* @__PURE__ */ jsx(DsCheckbox, {
21814
+ className: ds_table_shared_module_default.checkboxContainer,
21815
+ checked,
21816
+ onCheckedChange: (nextChecked) => table.toggleAllRowsSelected(!!nextChecked),
21817
+ onClick: (e) => e.stopPropagation(),
21818
+ onDoubleClick: (e) => e.stopPropagation()
21819
+ });
21820
+ };
21821
+ //#endregion
21822
+ //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
21823
+ var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
21824
+ //#endregion
21825
+ //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
21826
+ const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
21827
+ const isExpanded = row.getIsExpanded();
21828
+ return /* @__PURE__ */ jsx(DsButton, {
21829
+ design: "v1.2",
21830
+ buttonType: "tertiary",
21831
+ size: "small",
21832
+ className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
21833
+ onClick: (e) => {
21834
+ e.stopPropagation();
21835
+ row.toggleExpanded();
21836
+ },
21837
+ onDoubleClick: (e) => {
21838
+ e.stopPropagation();
21839
+ },
21840
+ children: /* @__PURE__ */ jsx(DsIcon, {
21841
+ icon: "chevron_right",
21842
+ size: "small",
21843
+ className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
21844
+ })
21845
+ });
21846
+ };
21847
+ //#endregion
21848
+ //#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
21849
+ const DsTableRowSelectableCell = ({ row }) => {
21850
+ return /* @__PURE__ */ jsx(DsCheckbox, {
21851
+ className: ds_table_shared_module_default.checkboxContainer,
21852
+ checked: row.getIsSelected(),
21853
+ disabled: !row.getCanSelect(),
21854
+ onCheckedChange: (checked) => row.toggleSelected(!!checked),
21855
+ onClick: (e) => e.stopPropagation(),
21856
+ onDoubleClick: (e) => e.stopPropagation()
21857
+ });
21858
+ };
21859
+ //#endregion
21860
+ //#region src/components/ds-table/utils/table-columns.tsx
21861
+ const EXPLICIT_SIZE_META = { hasExplicitSize: true };
21862
+ /**
21863
+ * Clones leaf defs that authored `size` so `meta.hasExplicitSize` survives
21864
+ * TanStack’s default-size merge. Group defs are cloned only to recurse;
21865
+ * unsized leaves are returned as-is.
21866
+ */
21867
+ const stampExplicitSize = (columns) => columns.map((column) => {
21868
+ if ("columns" in column && column.columns) return {
21869
+ ...column,
21870
+ columns: stampExplicitSize(column.columns)
21871
+ };
21872
+ if (column.size === void 0) return column;
21873
+ return {
21874
+ ...column,
21875
+ meta: {
21876
+ ...column.meta,
21877
+ ...EXPLICIT_SIZE_META
21878
+ }
21879
+ };
21880
+ });
21881
+ /**
21882
+ * Prepends the builtin select / expander / reorder columns when those features
21883
+ * are on. Reorder is omitted for virtualized tables. Unshift order yields
21884
+ * visual order: reorder, expander, select, then consumer columns.
21885
+ */
21886
+ const getAugmentedColumns = (columns, { selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }) => {
21887
+ const augmentedColumns = stampExplicitSize(columns);
21888
+ if (selectable) augmentedColumns.unshift({
21889
+ id: SELECT_COLUMN_ID,
21890
+ size: 36,
21891
+ minSize: 36,
21892
+ maxSize: 36,
21893
+ enableSorting: false,
21894
+ enableResizing: false,
21895
+ meta: EXPLICIT_SIZE_META,
21896
+ header: ({ table }) => showSelectAllCheckbox ? /* @__PURE__ */ jsx(DsTableHeaderSelectableCell, { table }) : null,
21897
+ cell: ({ row }) => /* @__PURE__ */ jsx(DsTableRowSelectableCell, { row })
21898
+ });
21899
+ if (expandable) augmentedColumns.unshift({
21900
+ id: EXPANDER_COLUMN_ID,
21901
+ size: 36,
21902
+ minSize: 36,
21903
+ maxSize: 36,
21904
+ enableSorting: false,
21905
+ enableResizing: false,
21906
+ meta: EXPLICIT_SIZE_META,
21907
+ header: () => null,
21908
+ cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(DsTableRowExpandableCell, { row }) : null
21909
+ });
21910
+ if (reorderable && !virtualized) augmentedColumns.unshift({
21911
+ id: REORDER_COLUMN_ID,
21912
+ size: 60,
21913
+ minSize: 60,
21914
+ maxSize: 60,
21915
+ enableSorting: false,
21916
+ enableResizing: false,
21917
+ meta: EXPLICIT_SIZE_META,
21918
+ header: "Order",
21919
+ cell: () => null
21920
+ });
21921
+ return augmentedColumns;
21922
+ };
21923
+ /**
21924
+ * Replaces each leaf `cell` with `loadingCell` (or a default text skeleton).
21925
+ * Group columns are cloned with the same transform applied to their children.
21926
+ */
21927
+ const toSkeletonColumns = (columns) => columns.map((column) => "columns" in column && column.columns ? {
21928
+ ...column,
21929
+ columns: toSkeletonColumns(column.columns)
21930
+ } : {
21931
+ ...column,
21932
+ cell: column.loadingCell ?? (() => /* @__PURE__ */ jsx(DsSkeletonText, { width: "60%" }))
21933
+ });
21934
+ const createSkeletonRows = () => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` }));
21935
+ //#endregion
21936
+ //#region src/components/ds-table/utils/table-api.ts
21937
+ const createTableApi = (table) => ({
21938
+ selectRow: (rowId) => {
21939
+ table.getRow(rowId).toggleSelected(true);
21940
+ },
21941
+ deselectRow: (rowId) => {
21942
+ table.getRow(rowId).toggleSelected(false);
21943
+ },
21944
+ selectAllRows: () => {
21945
+ table.toggleAllRowsSelected(true);
21946
+ },
21947
+ deselectAllRows: () => {
21948
+ table.toggleAllRowsSelected(false);
21949
+ },
21950
+ selectRows: (rowIds) => {
21951
+ const selection = {};
21952
+ rowIds.forEach((id) => selection[id] = true);
21953
+ table.setRowSelection(selection);
21954
+ },
21955
+ getSelectedRows: () => {
21956
+ return table.getFilteredSelectedRowModel().rows.map((r) => r.original);
21957
+ },
21958
+ expandRow: (rowId) => {
21959
+ table.getRow(rowId).toggleExpanded(true);
21960
+ },
21961
+ collapseRow: (rowId) => {
21962
+ table.getRow(rowId).toggleExpanded(false);
21963
+ },
21964
+ expandAllRows: () => {
21965
+ table.toggleAllRowsExpanded(true);
21966
+ },
21967
+ collapseAllRows: () => {
21968
+ table.toggleAllRowsExpanded(false);
21969
+ },
21970
+ expandRows: (rowIds) => {
21971
+ const expansion = {};
21972
+ rowIds.forEach((id) => expansion[id] = true);
21973
+ table.setExpanded(expansion);
21974
+ }
21975
+ });
21976
+ //#endregion
21977
+ //#region src/components/ds-table/utils/frozen-body.ts
21978
+ /**
21979
+ * `React.memo` comparator for the table body during a column-resize drag.
21980
+ *
21981
+ * While a column is being resized, sizing is applied through CSS variables on
21982
+ * the table element, so body rows do not need to re-render — freezing them keeps
21983
+ * dragging smooth. `table` is a stable mutable instance (ref-equal across
21984
+ * renders), so comparing it is meaningless and it is skipped; every other prop
21985
+ * must be referentially unchanged to freeze. That way parent-driven updates mid-
21986
+ * drag (`rowSelection`, `emptyState`, `onScroll`, `infiniteScroll`, ...) are not
21987
+ * dropped.
21988
+ */
21989
+ const areBodiesFrozen = (prev, next) => {
21990
+ if (!next.table.getState().columnSizingInfo.isResizingColumn) return false;
21991
+ const prevProps = prev;
21992
+ const nextProps = next;
21993
+ const keys = /* @__PURE__ */ new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
21994
+ for (const key of keys) if (key !== "table" && prevProps[key] !== nextProps[key]) return false;
21995
+ return true;
21996
+ };
21997
+ //#endregion
20912
21998
  //#region src/components/ds-table/ds-table.tsx
20913
21999
  const ROW_SIZE_HEIGHT_MAP = {
20914
22000
  small: 36,
@@ -20918,7 +22004,9 @@ const ROW_SIZE_HEIGHT_MAP = {
20918
22004
  /**
20919
22005
  * Design system Table component
20920
22006
  */
20921
- const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", loading = false, expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, locale, activeRowId, infiniteScroll, onCellEdit, onCellValidate }) => {
22007
+ const DsTable = (props) => {
22008
+ const tableProps = applyDsTableDefaults(props);
22009
+ const { ref, columns: columnsProp, data: tableData, controls, virtualized, virtualizedOptions, className, emptyState, bordered, fullWidth, rowSize, loading, expandable, selectable, showSelectAllCheckbox, onSelectionChange, onSortingChange, onScroll, actions, reorderable, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, collapsedColumnGroups: externalCollapsedColumnGroups, onCollapsedColumnGroupsChange, infiniteScroll, resizableColumns, columnSizing, onColumnSizingChange } = tableProps;
20922
22010
  const [data, setData] = React$1.useState(tableData);
20923
22011
  const [sorting, setSorting] = React$1.useState([]);
20924
22012
  const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -20932,7 +22020,6 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
20932
22020
  },
20933
22021
  items: data
20934
22022
  });
20935
- const tableContainerRef = React$1.useRef(null);
20936
22023
  const columnFilters = externalColumnFilters ?? internalColumnFilters;
20937
22024
  const handleColumnFiltersChange = (updaterOrValue) => {
20938
22025
  const newFilters = typeof updaterOrValue === "function" ? updaterOrValue(columnFilters) : updaterOrValue;
@@ -20964,63 +22051,31 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
20964
22051
  setRowSelection(newRowSelection);
20965
22052
  onSelectionChange?.(newRowSelection);
20966
22053
  };
20967
- const hasExpanderColumn = !!expandable;
20968
- const hasSelectColumn = !!selectable;
20969
- const hasReorderColumn = reorderable && !virtualized;
20970
- const columns = useMemo(() => {
20971
- const augmentedColumns = [...columnsProp];
20972
- if (hasSelectColumn) {
20973
- const selectColumn = {
20974
- id: SELECT_COLUMN_ID,
20975
- size: 36,
20976
- enableSorting: false,
20977
- enableResizing: false,
20978
- header: ({ table }) => showSelectAllCheckbox ? /* @__PURE__ */ jsx(DsTableHeaderSelectableCell, { table }) : null,
20979
- cell: ({ row }) => /* @__PURE__ */ jsx(DsTableRowSelectableCell, { row })
20980
- };
20981
- augmentedColumns.unshift(selectColumn);
20982
- }
20983
- if (hasExpanderColumn) {
20984
- const expanderColumn = {
20985
- id: EXPANDER_COLUMN_ID,
20986
- size: 36,
20987
- enableSorting: false,
20988
- enableResizing: false,
20989
- header: () => null,
20990
- cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(DsTableRowExpandableCell, { row }) : null
20991
- };
20992
- augmentedColumns.unshift(expanderColumn);
20993
- }
20994
- if (hasReorderColumn) {
20995
- const reorderColumn = {
20996
- id: REORDER_COLUMN_ID,
20997
- size: 60,
20998
- enableSorting: false,
20999
- enableResizing: false,
21000
- header: "Order",
21001
- cell: () => null
21002
- };
21003
- augmentedColumns.unshift(reorderColumn);
21004
- }
21005
- return augmentedColumns;
21006
- }, [
22054
+ const hasSelectColumn = Boolean(selectable);
22055
+ const hasExpanderColumn = Boolean(expandable);
22056
+ const columns = useMemo(() => getAugmentedColumns(columnsProp, {
22057
+ selectable: hasSelectColumn,
22058
+ expandable: hasExpanderColumn,
22059
+ reorderable,
22060
+ virtualized,
22061
+ showSelectAllCheckbox
22062
+ }), [
21007
22063
  columnsProp,
21008
- hasExpanderColumn,
21009
- hasReorderColumn,
21010
22064
  hasSelectColumn,
22065
+ hasExpanderColumn,
22066
+ reorderable,
22067
+ virtualized,
21011
22068
  showSelectAllCheckbox
21012
22069
  ]);
21013
- const skeletonColumns = useMemo(() => {
21014
- const toSkeleton = (cols) => cols.map((column) => "columns" in column && column.columns ? {
21015
- ...column,
21016
- columns: toSkeleton(column.columns)
21017
- } : {
21018
- ...column,
21019
- cell: column.loadingCell ?? (() => /* @__PURE__ */ jsx(DsSkeletonText, { width: "60%" }))
21020
- });
21021
- return toSkeleton(columns);
21022
- }, [columns]);
21023
- const skeletonData = useMemo(() => Array.from({ length: 5 }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` })), []);
22070
+ const skeletonColumns = useMemo(() => toSkeletonColumns(columns), [columns]);
22071
+ const skeletonData = useMemo(() => createSkeletonRows(), []);
22072
+ const resize = useColumnResize({
22073
+ enabled: resizableColumns,
22074
+ columnSizing,
22075
+ onColumnSizingChange,
22076
+ columns,
22077
+ columnVisibility
22078
+ });
21024
22079
  const table = useReactTable({
21025
22080
  data: loading ? skeletonData : reorderable ? data : tableData,
21026
22081
  columns: loading ? skeletonColumns : columns,
@@ -21034,87 +22089,30 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
21034
22089
  getRowId: (row) => row.id,
21035
22090
  getExpandedRowModel: getExpandedRowModel(),
21036
22091
  getRowCanExpand: typeof expandable === "function" ? (row) => expandable(row.original) : () => expandable,
22092
+ ...resize.tableOptions,
21037
22093
  state: {
21038
22094
  sorting,
21039
22095
  columnFilters,
21040
22096
  columnVisibility,
21041
- rowSelection
22097
+ rowSelection,
22098
+ ...resize.state
21042
22099
  },
21043
22100
  enableRowSelection: typeof selectable === "function" ? (row) => selectable(row.original) : selectable
21044
22101
  });
21045
- useImperativeHandle(ref, () => ({
21046
- selectRow: (rowId) => {
21047
- table.getRow(rowId).toggleSelected(true);
21048
- },
21049
- deselectRow: (rowId) => {
21050
- table.getRow(rowId).toggleSelected(false);
21051
- },
21052
- selectAllRows: () => {
21053
- table.toggleAllRowsSelected(true);
21054
- },
21055
- deselectAllRows: () => {
21056
- table.toggleAllRowsSelected(false);
21057
- },
21058
- selectRows: (rowIds) => {
21059
- const selection = {};
21060
- rowIds.forEach((id) => selection[id] = true);
21061
- table.setRowSelection(selection);
21062
- },
21063
- getSelectedRows: () => {
21064
- return table.getFilteredSelectedRowModel().rows.map((r) => r.original);
21065
- },
21066
- expandRow: (rowId) => {
21067
- table.getRow(rowId).toggleExpanded(true);
21068
- },
21069
- collapseRow: (rowId) => {
21070
- table.getRow(rowId).toggleExpanded(false);
21071
- },
21072
- expandAllRows: () => {
21073
- table.toggleAllRowsExpanded(true);
21074
- },
21075
- collapseAllRows: () => {
21076
- table.toggleAllRowsExpanded(false);
21077
- },
21078
- expandRows: (rowIds) => {
21079
- const expansion = {};
21080
- rowIds.forEach((id) => expansion[id] = true);
21081
- table.setExpanded(expansion);
21082
- }
21083
- }), [table]);
21084
- const { rows, rowsById } = table.getRowModel();
21085
- const renderEmptyState = () => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
21086
- colSpan: columns.length,
21087
- className: ds_table_module_default.emptyState,
21088
- children: emptyState || "No results."
21089
- }) });
22102
+ const { columnSizeVars, activeResize, context: resizeContext } = resize.bind(table);
22103
+ useImperativeHandle(ref, () => createTableApi(table), [table]);
22104
+ const { rowsById } = table.getRowModel();
21090
22105
  const selectedRows = Object.entries(rowSelection).filter(([, selected]) => selected).map(([key]) => rowsById[key]?.original).filter((v) => !!v);
21091
22106
  const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
21092
- const editingState = useEditingState(onCellEdit, onCellValidate);
21093
- const contextValue = {
21094
- stickyHeader,
21095
- bordered,
21096
- fullWidth,
21097
- rowSize,
21098
- expandable,
21099
- selectable,
21100
- reorderable,
21101
- showSelectAllCheckbox,
21102
- loading,
21103
- onRowClick: loading ? void 0 : onRowClick,
21104
- onRowDoubleClick: loading ? void 0 : onRowDoubleClick,
21105
- primaryRowActions,
21106
- secondaryRowActions,
21107
- renderExpandedRow,
21108
- virtualized,
21109
- activeRowId,
21110
- collapsedColumnGroups,
21111
- onToggleColumnGroup: toggleColumnGroup,
21112
- locale,
21113
- onCellEdit,
21114
- ...editingState
21115
- };
21116
- return /* @__PURE__ */ jsx(DsTableContext.Provider, {
21117
- value: contextValue,
22107
+ return /* @__PURE__ */ jsx(DsTableContextProvider, {
22108
+ tableProps,
22109
+ derived: {
22110
+ grouping: {
22111
+ collapsedColumnGroups,
22112
+ onToggleColumnGroup: toggleColumnGroup
22113
+ },
22114
+ resize: resizeContext
22115
+ },
21118
22116
  children: /* @__PURE__ */ jsxs("div", {
21119
22117
  className: classNames(ds_table_module_default.container, isBulkActionsVisible && ds_table_module_default.bulkActionsVisible, className),
21120
22118
  children: [
@@ -21122,12 +22120,13 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
21122
22120
  className: ds_table_module_default.controls,
21123
22121
  children: controls
21124
22122
  }),
21125
- /* @__PURE__ */ jsx("div", {
21126
- ref: tableContainerRef,
22123
+ /* @__PURE__ */ jsxs("div", {
22124
+ ref: resizeContext.resizeContainerRef,
21127
22125
  className: classNames(!virtualized && ds_table_module_default.dataTableContainer, virtualized && ds_table_module_default.virtualizedContainer),
21128
- children: /* @__PURE__ */ jsx(DragWrapper, { children: /* @__PURE__ */ jsxs(Table$1, {
22126
+ children: [/* @__PURE__ */ jsx(DragWrapper, { children: /* @__PURE__ */ jsxs(Table$1, {
21129
22127
  className: classNames(fullWidth && ds_table_module_default.fullWidth, !bordered && ds_table_module_default.tableNoBorder),
21130
- children: [/* @__PURE__ */ jsx(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ jsx(DsTableBodyVirtualized, {
22128
+ style: columnSizeVars,
22129
+ children: [/* @__PURE__ */ jsx(DsTableHeader, { table }), virtualized ? /* @__PURE__ */ jsx(MemoizedDsTableBodyVirtualized, {
21131
22130
  table,
21132
22131
  emptyState,
21133
22132
  estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
@@ -21135,11 +22134,16 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
21135
22134
  onScroll,
21136
22135
  rowSelection,
21137
22136
  infiniteScroll
21138
- }) : /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx(DsTableRow, {
21139
- row,
21140
- isSelected: !!rowSelection[row.id]
21141
- }, row.id)) : renderEmptyState() }) })]
21142
- }) })
22137
+ }) : /* @__PURE__ */ jsx(MemoizedDsTableRowsBody, {
22138
+ table,
22139
+ rowSelection,
22140
+ emptyState,
22141
+ SortableWrapper
22142
+ })]
22143
+ }) }), activeResize ? /* @__PURE__ */ jsx(DsTableResizeOverlay, {
22144
+ offset: activeResize.offset,
22145
+ phase: activeResize.phase
22146
+ }) : null]
21143
22147
  }),
21144
22148
  selectable && actions.length > 0 && /* @__PURE__ */ jsx(DsTableBulkActions, {
21145
22149
  numSelectedRows: selectedRows.length,
@@ -21153,6 +22157,20 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, controls, virtual
21153
22157
  })
21154
22158
  });
21155
22159
  };
22160
+ const DsTableRowsBody = ({ table, rowSelection, emptyState, SortableWrapper }) => {
22161
+ const { rows } = table.getRowModel();
22162
+ const columnCount = table.getVisibleLeafColumns().length;
22163
+ return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx(DsTableRow, {
22164
+ row,
22165
+ isSelected: !!rowSelection[row.id]
22166
+ }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
22167
+ colSpan: columnCount,
22168
+ className: ds_table_module_default.emptyState,
22169
+ children: emptyState || "No results."
22170
+ }) }) }) });
22171
+ };
22172
+ const MemoizedDsTableRowsBody = React$1.memo(DsTableRowsBody, areBodiesFrozen);
22173
+ const MemoizedDsTableBodyVirtualized = React$1.memo(DsTableBodyVirtualized, areBodiesFrozen);
21156
22174
  DsTable.displayName = "DsTable";
21157
22175
  //#endregion
21158
22176
  //#region src/components/ds-table/hooks/use-cell-editor.ts
@@ -21167,6 +22185,7 @@ const useCellEditor = ({ cellContext }) => {
21167
22185
  const isActiveCell = ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
21168
22186
  const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
21169
22187
  const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
22188
+ const isPending = isActiveCell && ctx.editing ? ctx.editing.pending : false;
21170
22189
  const setValue = (next) => {
21171
22190
  ctx.setDraft(next);
21172
22191
  };
@@ -21182,6 +22201,7 @@ const useCellEditor = ({ cellContext }) => {
21182
22201
  return {
21183
22202
  value,
21184
22203
  error,
22204
+ isPending,
21185
22205
  setValue,
21186
22206
  commit,
21187
22207
  cancel,
@@ -21213,7 +22233,7 @@ const TableEditFormControl = ({ cellContext, error, children }) => {
21213
22233
  //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx
21214
22234
  /** Text input editor for table cells. Render via `ColumnDef.editCell`. */
21215
22235
  const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
21216
- const { value, setValue, error } = useCellEditor({ cellContext });
22236
+ const { value, setValue, error, isPending } = useCellEditor({ cellContext });
21217
22237
  const inputRef = useRef(null);
21218
22238
  useEffect(() => {
21219
22239
  const input = inputRef.current;
@@ -21230,6 +22250,7 @@ const DsTableEditCellText = ({ cellContext, placeholder, maxLength }) => {
21230
22250
  value,
21231
22251
  placeholder,
21232
22252
  maxLength,
22253
+ disabled: isPending,
21233
22254
  onValueChange: setValue,
21234
22255
  slots: error ? { endAdornment: /* @__PURE__ */ jsx(DsIcon, {
21235
22256
  icon: "error",
@@ -21243,7 +22264,7 @@ DsTableEditCellText.displayName = "DsTableEditCellText";
21243
22264
  //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx
21244
22265
  /** Number input editor for table cells. Render via `ColumnDef.editCell`. */
21245
22266
  const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
21246
- const { value, setValue, error } = useCellEditor({ cellContext });
22267
+ const { value, setValue, error, isPending } = useCellEditor({ cellContext });
21247
22268
  const inputRef = useRef(null);
21248
22269
  useEffect(() => {
21249
22270
  const input = inputRef.current;
@@ -21261,6 +22282,7 @@ const DsTableEditCellNumber = ({ cellContext, min, max, step }) => {
21261
22282
  min,
21262
22283
  max,
21263
22284
  step,
22285
+ disabled: isPending,
21264
22286
  onValueChange: setValue
21265
22287
  })
21266
22288
  });
@@ -21270,7 +22292,7 @@ DsTableEditCellNumber.displayName = "DsTableEditCellNumber";
21270
22292
  //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx
21271
22293
  /** Select editor for table cells. Render via `ColumnDef.editCell`. */
21272
22294
  const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
21273
- const { value, setValue, error } = useCellEditor({ cellContext });
22295
+ const { value, setValue, error, isPending } = useCellEditor({ cellContext });
21274
22296
  return /* @__PURE__ */ jsx(TableEditFormControl, {
21275
22297
  cellContext,
21276
22298
  error,
@@ -21279,6 +22301,7 @@ const DsTableEditCellSelect = ({ cellContext, options, placeholder }) => {
21279
22301
  value,
21280
22302
  options,
21281
22303
  placeholder,
22304
+ disabled: isPending,
21282
22305
  onValueChange: setValue
21283
22306
  })
21284
22307
  });
@@ -21288,7 +22311,7 @@ DsTableEditCellSelect.displayName = "DsTableEditCellSelect";
21288
22311
  //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx
21289
22312
  /** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
21290
22313
  const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
21291
- const { value, setValue, error } = useCellEditor({ cellContext });
22314
+ const { value, setValue, error, isPending } = useCellEditor({ cellContext });
21292
22315
  return /* @__PURE__ */ jsx(TableEditFormControl, {
21293
22316
  cellContext,
21294
22317
  error,
@@ -21298,6 +22321,7 @@ const DsTableEditCellDate = ({ cellContext, min, max, placeholder }) => {
21298
22321
  min,
21299
22322
  max,
21300
22323
  placeholder,
22324
+ disabled: isPending,
21301
22325
  onChange: setValue,
21302
22326
  slotProps: error ? { input: { slots: { endAdornment: /* @__PURE__ */ jsx(DsIcon, {
21303
22327
  icon: "error",
@@ -21311,10 +22335,10 @@ DsTableEditCellDate.displayName = "DsTableEditCellDate";
21311
22335
  //#region src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx
21312
22336
  /** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
21313
22337
  const DsTableEditCellCheckbox = ({ cellContext, disabled }) => {
21314
- const { value, setValue } = useCellEditor({ cellContext });
22338
+ const { value, setValue, isPending } = useCellEditor({ cellContext });
21315
22339
  return /* @__PURE__ */ jsx(DsCheckbox, {
21316
22340
  checked: value,
21317
- disabled,
22341
+ disabled: disabled || isPending,
21318
22342
  onCheckedChange: (checked) => setValue(checked === true)
21319
22343
  });
21320
22344
  };
@@ -22827,6 +23851,6 @@ const DsWorkspaceLayout = Object.assign(DsWorkspaceLayoutRoot, {
22827
23851
  LeftPanel
22828
23852
  });
22829
23853
  //#endregion
22830
- export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsProgressTaskBar, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, DsSiteNode, DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsUserCard, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createColumnHelper, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuActionsAlignments, dropdownMenuItemVariants, dsAvatarSizes, dsAvatarTypes, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, siteNodeStates, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, taskBarStatuses, textInputSizes, tooltipPlacements, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
23854
+ export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsProgressTaskBar, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, DsSiteNode, DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSlider, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTableColumnFilterPopover, DsTableEditCellCheckbox, DsTableEditCellDate, DsTableEditCellNumber, DsTableEditCellSelect, DsTableEditCellText, DsTableEditableCell, DsTableEditingCell, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsUserCard, DsVerticalTabs, DsWorkspaceLayout, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, autocompleteSizes, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createColumnHelper, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, defaultDsTableLocale, dropdownMenuActionsAlignments, dropdownMenuItemVariants, dsAvatarSizes, dsAvatarTypes, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, popoverAligns, popoverSides, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, siteNodeStates, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, taskBarStatuses, textInputSizes, tooltipPlacements, useBreakpoint, useCellEditor, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
22831
23855
 
22832
23856
  //# sourceMappingURL=index.js.map