@drivenets/design-system 0.10.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.cjs +117 -122
  3. package/dist/index.d.cts +10 -2
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +10 -2
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +119 -125
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +3 -3
  11. package/src/components/ds-alert-banner/ds-alert-banner.module.scss +25 -25
  12. package/src/components/ds-autocomplete/ds-autocomplete.module.scss +29 -29
  13. package/src/components/ds-avatar/_mixins.scss +7 -7
  14. package/src/components/ds-avatar/ds-avatar.module.scss +2 -2
  15. package/src/components/ds-avatar-group/ds-avatar-group.module.scss +6 -6
  16. package/src/components/ds-breadcrumb/ds-breadcrumb.module.scss +14 -14
  17. package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss +17 -17
  18. package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss +135 -135
  19. package/src/components/ds-button-v3/ds-button-v3.module.scss +8 -8
  20. package/src/components/ds-card/ds-card.module.scss +12 -12
  21. package/src/components/ds-chip/ds-chip.module.scss +17 -17
  22. package/src/components/ds-chip-group/ds-chip-group.module.scss +12 -12
  23. package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss +3 -3
  24. package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.module.scss +18 -18
  25. package/src/components/ds-comment-bubble/ds-comment-bubble.module.scss +43 -43
  26. package/src/components/ds-comment-card/ds-comment-card.module.scss +34 -34
  27. package/src/components/ds-comment-indicator/ds-comment-indicator.module.scss +9 -9
  28. package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.module.scss +10 -10
  29. package/src/components/ds-comments-drawer/ds-comments-drawer.module.scss +11 -11
  30. package/src/components/ds-date-input/ds-date-input.module.scss +42 -42
  31. package/src/components/ds-date-picker/components/calendar-table.module.scss +17 -17
  32. package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss +8 -8
  33. package/src/components/ds-date-picker/components/day-view/day-view.module.scss +1 -1
  34. package/src/components/ds-date-picker/ds-date-picker.module.scss +1 -1
  35. package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss +1 -1
  36. package/src/components/ds-dialog/ds-dialog.module.scss +3 -3
  37. package/src/components/ds-divider/ds-divider.module.scss +1 -1
  38. package/src/components/ds-drawer/ds-drawer.module.scss +12 -12
  39. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +22 -14
  40. package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx +2 -0
  41. package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts +9 -0
  42. package/src/components/ds-expandable-text-input/ds-expandable-text-input.module.scss +1 -1
  43. package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss +22 -22
  44. package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss +23 -23
  45. package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss +5 -5
  46. package/src/components/ds-form-control/ds-form-control.module.scss +13 -13
  47. package/src/components/ds-icon/ds-icon.module.scss +8 -0
  48. package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss +7 -7
  49. package/src/components/ds-modal/ds-modal.module.scss +9 -9
  50. package/src/components/ds-panel/ds-panel.module.scss +16 -16
  51. package/src/components/ds-popover/ds-popover.module.scss +2 -2
  52. package/src/components/ds-progress-arc/ds-progress-arc.module.scss +7 -7
  53. package/src/components/ds-progress-donut/ds-progress-donut.module.scss +7 -7
  54. package/src/components/ds-progress-linear/ds-progress-linear.module.scss +15 -15
  55. package/src/components/ds-segment-group/ds-segment-group.module.scss +18 -18
  56. package/src/components/ds-select/ds-select.module.scss +8 -8
  57. package/src/components/ds-skeleton/ds-skeleton.module.scss +1 -1
  58. package/src/components/ds-smart-tabs/ds-smart-tabs.module.scss +12 -12
  59. package/src/components/ds-smart-tabs/ds-smart-tabs.tsx +9 -9
  60. package/src/components/ds-spinner/ds-spinner.module.scss +1 -1
  61. package/src/components/ds-status-badge/ds-status-badge.module.scss +21 -25
  62. package/src/components/ds-stepper/ds-stepper.module.scss +55 -55
  63. package/src/components/ds-system-status/ds-system-status.module.scss +22 -22
  64. package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss +9 -9
  65. package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss +4 -4
  66. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +5 -10
  67. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +6 -9
  68. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +13 -22
  69. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +11 -18
  70. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss +0 -7
  71. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx +19 -28
  72. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.types.ts +0 -4
  73. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx +3 -8
  74. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +15 -11
  75. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +9 -4
  76. package/src/components/ds-table/ds-table.module.scss +9 -2
  77. package/src/components/ds-table/ds-table.tsx +26 -4
  78. package/src/components/ds-table/filters/components/range-filter/range-filter.module.scss +1 -1
  79. package/src/components/ds-table/styles/_mixins.scss +1 -1
  80. package/src/components/ds-table/styles/_variables.scss +5 -6
  81. package/src/components/ds-table/utils/constants.ts +10 -0
  82. package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss +1 -1
  83. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss +1 -1
  84. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss +3 -3
  85. package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss +55 -55
  86. package/src/components/ds-tabs/ds-tabs.module.scss +1 -1
  87. package/src/components/ds-tag/ds-tag.module.scss +22 -22
  88. package/src/components/ds-tag-filter/ds-tag-filter.module.scss +10 -10
  89. package/src/components/ds-text-input/ds-text-input.module.scss +1 -1
  90. package/src/components/ds-time-picker/components/time-item/time-item.module.scss +8 -8
  91. package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss +3 -3
  92. package/src/components/ds-toast/ds-toast.module.scss +11 -11
  93. package/src/components/ds-toggle/ds-toggle.module.scss +18 -18
  94. package/src/components/ds-tooltip/ds-tooltip.module.scss +5 -5
  95. package/src/components/ds-tree/ds-tree.module.scss +27 -27
  96. package/src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss +13 -13
  97. package/src/styles/_root.scss +0 -18
  98. package/src/styles/_root_new.scss +1 -1
  99. package/src/styles/_scrollbars.scss +5 -5
  100. package/src/styles/_typography.scss +18 -14
  101. package/src/styles/mixins/_list.scss +8 -8
  102. package/src/styles/shared/_dropdown.scss +9 -9
  103. package/src/styles/shared/_input.scss +47 -47
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { c } from "react/compiler-runtime";
2
2
  import classNames from "classnames";
3
3
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
4
  import * as React$1 from "react";
5
- import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
5
+ import React, { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
6
6
  import { FileUpload as FileUpload$1, NumberInput, PasswordInput, Progress, Toast, Toaster, ark, createToaster } from "@ark-ui/react";
7
7
  import { Combobox, createListCollection } from "@ark-ui/react/combobox";
8
8
  import { useFilter } from "@ark-ui/react/locale";
@@ -29,7 +29,7 @@ import { RadioGroup } from "@ark-ui/react/radio-group";
29
29
  import { SegmentGroup } from "@ark-ui/react/segment-group";
30
30
  import * as steps from "@zag-js/steps";
31
31
  import { normalizeProps, useMachine } from "@zag-js/react";
32
- import { defaultColumnSizing, flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
32
+ import { defaultColumnSizing, flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
33
33
  import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
34
34
  import { CSS } from "@dnd-kit/utilities";
35
35
  import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
@@ -3826,6 +3826,7 @@ var ds_dropdown_menu_module_default = {
3826
3826
  "separator": "AkHUyG_separator",
3827
3827
  "triggerItem": "AkHUyG_triggerItem",
3828
3828
  "triggerItemIcon": "AkHUyG_triggerItemIcon",
3829
+ "variant-error": "AkHUyG_variant-error",
3829
3830
  "viewportLegacy": "AkHUyG_viewportLegacy"
3830
3831
  };
3831
3832
  //#endregion
@@ -4086,20 +4087,22 @@ const Content$1 = (t0) => {
4086
4087
  * Item component - renders a menu item
4087
4088
  */
4088
4089
  const Item$2 = (t0) => {
4089
- const $ = c(12);
4090
- const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
4091
- let t1;
4092
- if ($[0] !== className || $[1] !== selected) {
4093
- t1 = classNames(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, className);
4090
+ const $ = c(13);
4091
+ const { disabled, selected, variant: t1, value, asChild, onClick, onSelect, children, className, style } = t0;
4092
+ const variant = t1 === void 0 ? "default" : t1;
4093
+ let t2;
4094
+ if ($[0] !== className || $[1] !== selected || $[2] !== variant) {
4095
+ t2 = classNames(ds_dropdown_menu_module_default.item, { [ds_dropdown_menu_module_default.selected]: selected }, variant === "error" && ds_dropdown_menu_module_default["variant-error"], className);
4094
4096
  $[0] = className;
4095
4097
  $[1] = selected;
4096
- $[2] = t1;
4097
- } else t1 = $[2];
4098
- let t2;
4099
- if ($[3] !== asChild || $[4] !== children || $[5] !== disabled || $[6] !== onClick || $[7] !== onSelect || $[8] !== style || $[9] !== t1 || $[10] !== value) {
4100
- t2 = /* @__PURE__ */ jsx(Menu.Item, {
4098
+ $[2] = variant;
4099
+ $[3] = t2;
4100
+ } else t2 = $[3];
4101
+ let t3;
4102
+ if ($[4] !== asChild || $[5] !== children || $[6] !== disabled || $[7] !== onClick || $[8] !== onSelect || $[9] !== style || $[10] !== t2 || $[11] !== value) {
4103
+ t3 = /* @__PURE__ */ jsx(Menu.Item, {
4101
4104
  disabled,
4102
- className: t1,
4105
+ className: t2,
4103
4106
  style,
4104
4107
  value,
4105
4108
  asChild,
@@ -4107,17 +4110,17 @@ const Item$2 = (t0) => {
4107
4110
  onSelect,
4108
4111
  children
4109
4112
  });
4110
- $[3] = asChild;
4111
- $[4] = children;
4112
- $[5] = disabled;
4113
- $[6] = onClick;
4114
- $[7] = onSelect;
4115
- $[8] = style;
4116
- $[9] = t1;
4117
- $[10] = value;
4118
- $[11] = t2;
4119
- } else t2 = $[11];
4120
- return t2;
4113
+ $[4] = asChild;
4114
+ $[5] = children;
4115
+ $[6] = disabled;
4116
+ $[7] = onClick;
4117
+ $[8] = onSelect;
4118
+ $[9] = style;
4119
+ $[10] = t2;
4120
+ $[11] = value;
4121
+ $[12] = t3;
4122
+ } else t3 = $[12];
4123
+ return t3;
4121
4124
  };
4122
4125
  /**
4123
4126
  * ItemIndicator component - renders a selection indicator (check icon by default)
@@ -4648,6 +4651,9 @@ function _temp2$7(e) {
4648
4651
  return e.stopPropagation();
4649
4652
  }
4650
4653
  //#endregion
4654
+ //#region src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts
4655
+ const dropdownMenuItemVariants = ["default", "error"];
4656
+ //#endregion
4651
4657
  //#region src/components/ds-breadcrumb/ds-breadcrumb.tsx
4652
4658
  /**
4653
4659
  * Design system Breadcrumb component
@@ -16419,15 +16425,15 @@ var ds_smart_tabs_module_default = {
16419
16425
  //#endregion
16420
16426
  //#region src/components/ds-smart-tabs/ds-smart-tabs.tsx
16421
16427
  const colorMap = {
16422
- "dark-blue": "var(--color-background-info-strong)",
16423
- "light-blue": "var(--color-background-active-moderate)",
16424
- "dark-gray": "var(--color-background-brand)",
16425
- green: "var(--color-background-success-strong)",
16426
- fuchsia: "var(--color-data-fuchsia)",
16427
- blue: "var(--color-icon-information-secondary)",
16428
- gray: "var(--color-icon-information-main)",
16429
- red: "var(--color-icon-warning)",
16430
- amber: "var(--color-data-amber)"
16428
+ "dark-blue": "var(--background-info-strong)",
16429
+ "light-blue": "var(--background-active-moderate)",
16430
+ "dark-gray": "var(--background-brand)",
16431
+ green: "var(--background-success-strong)",
16432
+ fuchsia: "var(--color-dap-data-fuchsia)",
16433
+ blue: "var(--icon-information-secondary)",
16434
+ gray: "var(--icon-information-main)",
16435
+ red: "var(--icon-warning)",
16436
+ amber: "var(--color-dap-data-amber)"
16431
16437
  };
16432
16438
  const SmartTabsContext = createContext(null);
16433
16439
  const useSmartTabsContext = () => {
@@ -18089,7 +18095,6 @@ const DsTableBulkActions = ({ numSelectedRows, actions, onClearSelection }) => {
18089
18095
  //#endregion
18090
18096
  //#region src/components/ds-table/components/ds-table-header/ds-table-header.module.scss
18091
18097
  var ds_table_header_module_default = {
18092
- "expandColumn": "-2rCNG_expandColumn",
18093
18098
  "headerCell": "-2rCNG_headerCell",
18094
18099
  "headerRow": "-2rCNG_headerRow",
18095
18100
  "headerRowNoBorder": "-2rCNG_headerRowNoBorder",
@@ -18141,7 +18146,7 @@ const getColumnSizeStyle = (columnSize, virtualized) => {
18141
18146
  //#endregion
18142
18147
  //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
18143
18148
  const DsTableHeader = ({ table }) => {
18144
- const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
18149
+ const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
18145
18150
  return /* @__PURE__ */ jsx(TableHeader, {
18146
18151
  className: classNames(stickyHeader && ds_table_header_module_default.stickyHeader, virtualized && ds_table_header_module_default.virtualizedHeader),
18147
18152
  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, {
@@ -18152,26 +18157,24 @@ const DsTableHeader = ({ table }) => {
18152
18157
  children: showSelectAllCheckbox && /* @__PURE__ */ jsx(DsCheckbox, {
18153
18158
  className: ds_table_shared_module_default.checkboxContainer,
18154
18159
  checked: table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false,
18155
- onClick: (e) => {
18156
- e.stopPropagation();
18157
- table.getToggleAllRowsSelectedHandler()(e);
18158
- }
18160
+ onCheckedChange: (checked) => table.toggleAllRowsSelected(!!checked),
18161
+ onClick: (e) => e.stopPropagation()
18159
18162
  })
18160
18163
  }),
18161
- expandable && /* @__PURE__ */ jsx(TableHead, { className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.expandColumn) }),
18162
18164
  reorderable && /* @__PURE__ */ jsx(TableHead, {
18163
18165
  className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.reorderColumn),
18164
18166
  children: "Order"
18165
18167
  }),
18166
18168
  headerGroup.headers.map((header) => {
18167
18169
  const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
18170
+ const canSort = header.column.getCanSort();
18168
18171
  return /* @__PURE__ */ jsx(TableHead, {
18169
- className: classNames(ds_table_header_module_default.headerCell, header.column.getCanSort() && ds_table_header_module_default.sortableHeader),
18172
+ className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader),
18170
18173
  onClick: header.column.getToggleSortingHandler(),
18171
18174
  style: headerStyle,
18172
18175
  children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
18173
18176
  className: ds_table_header_module_default.headerSortContainer,
18174
- children: [/* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && /* @__PURE__ */ jsx("div", {
18177
+ children: [/* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), canSort && /* @__PURE__ */ jsx("div", {
18175
18178
  className: ds_table_header_module_default.pageButtonIconContainer,
18176
18179
  children: {
18177
18180
  asc: /* @__PURE__ */ jsx(DsIcon, {
@@ -18302,47 +18305,9 @@ const DsTableRowSelectableCell = ({ row, isSelected, className }) => {
18302
18305
  className: ds_table_shared_module_default.checkboxContainer,
18303
18306
  checked: isSelected,
18304
18307
  disabled: !row.getCanSelect(),
18305
- onClick: (e) => {
18306
- e.stopPropagation();
18307
- row.getToggleSelectedHandler()(e);
18308
- },
18309
- onDoubleClick: (e) => {
18310
- e.stopPropagation();
18311
- }
18312
- })
18313
- });
18314
- };
18315
- //#endregion
18316
- //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
18317
- var ds_table_row_expandable_cell_module_default = {
18318
- "button": "enUIjW_button",
18319
- "cell": "enUIjW_cell"
18320
- };
18321
- //#endregion
18322
- //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
18323
- const DsTableRowExpandableCell = ({ row, className, buttonClassName }) => {
18324
- const { expandable } = useDsTableContext();
18325
- const isExpanded = row.getIsExpanded();
18326
- const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
18327
- return /* @__PURE__ */ jsx(TableCell, {
18328
- className: classNames(ds_table_row_expandable_cell_module_default.cell, className),
18329
- children: isExpandable && /* @__PURE__ */ jsx(DsButton, {
18330
- design: "v1.2",
18331
- buttonType: "tertiary",
18332
- size: "small",
18333
- className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
18334
- onClick: (e) => {
18335
- e.stopPropagation();
18336
- row.toggleExpanded();
18337
- },
18338
- onDoubleClick: (e) => {
18339
- e.stopPropagation();
18340
- },
18341
- children: /* @__PURE__ */ jsx(DsIcon, {
18342
- icon: "chevron_right",
18343
- size: "small",
18344
- className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
18345
- })
18308
+ onCheckedChange: (checked) => row.toggleSelected(!!checked),
18309
+ onClick: (e) => e.stopPropagation(),
18310
+ onDoubleClick: (e) => e.stopPropagation()
18346
18311
  })
18347
18312
  });
18348
18313
  };
@@ -18354,7 +18319,6 @@ var ds_table_row_module_default = {
18354
18319
  "expandableCell": "t8OZCq_expandableCell",
18355
18320
  "expanded": "t8OZCq_expanded",
18356
18321
  "expandedRow": "t8OZCq_expandedRow",
18357
- "expandToggleButton": "t8OZCq_expandToggleButton",
18358
18322
  "isDragging": "t8OZCq_isDragging",
18359
18323
  "rowDragHandle": "t8OZCq_rowDragHandle",
18360
18324
  "rowNoBorder": "t8OZCq_rowNoBorder",
@@ -18365,6 +18329,10 @@ var ds_table_row_module_default = {
18365
18329
  "tableCell": "t8OZCq_tableCell",
18366
18330
  "tableRow": "t8OZCq_tableRow"
18367
18331
  };
18332
+ /**
18333
+ * Column id used for the synthetic expander column injected when `expandable` is set.
18334
+ */
18335
+ const EXPANDER_COLUMN_ID = "expander";
18368
18336
  //#endregion
18369
18337
  //#region src/components/ds-table/components/ds-table-row/ds-table-row.tsx
18370
18338
  const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
@@ -18381,9 +18349,8 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
18381
18349
  });
18382
18350
  };
18383
18351
  const DsTableRow = ({ ref, row, isSelected }) => {
18384
- const { expandable, selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
18352
+ const { selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
18385
18353
  const isExpanded = row.getIsExpanded();
18386
- const isExpandable = typeof expandable === "function" ? expandable(row.original) : expandable;
18387
18354
  const isActive = activeRowId === row.id;
18388
18355
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
18389
18356
  id: row.id,
@@ -18393,7 +18360,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18393
18360
  transform: CSS.Transform.toString(transform),
18394
18361
  transition,
18395
18362
  ...isDragging ? {
18396
- background: "var(--action-active-light)",
18363
+ background: "var(--color-dap-purple-200)",
18397
18364
  boxShadow: "0 0 12px 0 rgba(0, 102, 250, 0.60)",
18398
18365
  zIndex: 1
18399
18366
  } : {},
@@ -18416,11 +18383,6 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18416
18383
  isSelected,
18417
18384
  className: ds_table_row_module_default.selectableCell
18418
18385
  }),
18419
- expandable && /* @__PURE__ */ jsx(DsTableRowExpandableCell, {
18420
- row,
18421
- className: ds_table_row_module_default.expandableCell,
18422
- buttonClassName: ds_table_row_module_default.expandToggleButton
18423
- }),
18424
18386
  reorderable && /* @__PURE__ */ jsx(DsRowDragHandle, {
18425
18387
  isDragging,
18426
18388
  attributes,
@@ -18430,7 +18392,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18430
18392
  const isLastColumn = idx === row.getVisibleCells().length - 1;
18431
18393
  const cellStyle = getColumnSizeStyle(cell.column.getSize());
18432
18394
  return /* @__PURE__ */ jsx(TableCell, {
18433
- className: ds_table_row_module_default.tableCell,
18395
+ className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell),
18434
18396
  style: cellStyle,
18435
18397
  children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18436
18398
  row,
@@ -18447,13 +18409,39 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18447
18409
  }), isExpanded && renderExpandedRow && /* @__PURE__ */ jsx(TableRow, {
18448
18410
  className: ds_table_row_module_default.expandedRow,
18449
18411
  children: /* @__PURE__ */ jsx(TableCell, {
18450
- colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (isExpandable ? 1 : 0) + (reorderable ? 1 : 0),
18412
+ colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
18451
18413
  className: ds_table_row_module_default.tableCell,
18452
18414
  children: renderExpandedRow(row.original)
18453
18415
  })
18454
18416
  })] });
18455
18417
  };
18456
18418
  //#endregion
18419
+ //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss
18420
+ var ds_table_row_expandable_cell_module_default = { "button": "enUIjW_button" };
18421
+ //#endregion
18422
+ //#region src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx
18423
+ const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
18424
+ const isExpanded = row.getIsExpanded();
18425
+ return /* @__PURE__ */ jsx(DsButton, {
18426
+ design: "v1.2",
18427
+ buttonType: "tertiary",
18428
+ size: "small",
18429
+ className: classNames(ds_table_row_expandable_cell_module_default.button, buttonClassName),
18430
+ onClick: (e) => {
18431
+ e.stopPropagation();
18432
+ row.toggleExpanded();
18433
+ },
18434
+ onDoubleClick: (e) => {
18435
+ e.stopPropagation();
18436
+ },
18437
+ children: /* @__PURE__ */ jsx(DsIcon, {
18438
+ icon: "chevron_right",
18439
+ size: "small",
18440
+ className: classNames(ds_table_shared_module_default.pageButtonIcon, isExpanded && "rotate-90")
18441
+ })
18442
+ });
18443
+ };
18444
+ //#endregion
18457
18445
  //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
18458
18446
  const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ jsx(DndContext, {
18459
18447
  collisionDetection: closestCenter,
@@ -18522,7 +18510,7 @@ var ds_table_row_virtualized_module_default = {
18522
18510
  //#endregion
18523
18511
  //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
18524
18512
  const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
18525
- const { selectable, expandable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
18513
+ const { selectable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
18526
18514
  const isExpanded = row.getIsExpanded();
18527
18515
  const isActive = activeRowId === row.id;
18528
18516
  return /* @__PURE__ */ jsx(TableRow, {
@@ -18544,33 +18532,26 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
18544
18532
  }, isExpandedRowContent && ds_table_row_virtualized_module_default.expandedRowContent, onRowClick && ds_table_row_virtualized_module_default.clickableRow, !bordered && ds_table_row_virtualized_module_default.rowNoBorder, isExpanded && ds_table_row_virtualized_module_default.expanded),
18545
18533
  onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
18546
18534
  onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
18547
- children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
18548
- selectable && /* @__PURE__ */ jsx(DsTableRowSelectableCell, {
18549
- row,
18550
- isSelected,
18551
- className: ds_table_row_virtualized_module_default.selectableCell
18552
- }),
18553
- expandable && /* @__PURE__ */ jsx(DsTableRowExpandableCell, {
18554
- row,
18555
- className: ds_table_row_virtualized_module_default.expandableCell
18556
- }),
18557
- row.getVisibleCells().map((cell, idx) => {
18558
- const isLastColumn = idx === row.getVisibleCells().length - 1;
18559
- return /* @__PURE__ */ jsx(TableCell, {
18560
- style: getColumnSizeStyle(cell.column.getSize(), true),
18561
- className: ds_table_row_virtualized_module_default.cell,
18562
- children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18563
- row,
18564
- cell,
18565
- primaryRowActions,
18566
- secondaryRowActions
18567
- }) : /* @__PURE__ */ jsx(DsTableCell, {
18568
- row,
18569
- cell
18570
- })
18571
- }, cell.id);
18572
- })
18573
- ] })
18535
+ children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsxs(Fragment, { children: [selectable && /* @__PURE__ */ jsx(DsTableRowSelectableCell, {
18536
+ row,
18537
+ isSelected,
18538
+ className: ds_table_row_virtualized_module_default.selectableCell
18539
+ }), row.getVisibleCells().map((cell, idx) => {
18540
+ const isLastColumn = idx === row.getVisibleCells().length - 1;
18541
+ return /* @__PURE__ */ jsx(TableCell, {
18542
+ style: getColumnSizeStyle(cell.column.getSize(), true),
18543
+ className: classNames(ds_table_row_virtualized_module_default.cell, cell.column.id === "expander" && ds_table_row_virtualized_module_default.expandableCell),
18544
+ children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18545
+ row,
18546
+ cell,
18547
+ primaryRowActions,
18548
+ secondaryRowActions
18549
+ }) : /* @__PURE__ */ jsx(DsTableCell, {
18550
+ row,
18551
+ cell
18552
+ })
18553
+ }, cell.id);
18554
+ })] })
18574
18555
  });
18575
18556
  };
18576
18557
  //#endregion
@@ -18664,7 +18645,7 @@ const ROW_SIZE_HEIGHT_MAP = {
18664
18645
  /**
18665
18646
  * Design system Table component
18666
18647
  */
18667
- const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
18648
+ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId }) => {
18668
18649
  const [data, setData] = React$1.useState(tableData);
18669
18650
  const [sorting, setSorting] = React$1.useState([]);
18670
18651
  const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -18701,6 +18682,17 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
18701
18682
  setRowSelection(newRowSelection);
18702
18683
  onSelectionChange?.(newRowSelection);
18703
18684
  };
18685
+ const columns = useMemo(() => {
18686
+ if (!expandable) return columnsProp;
18687
+ return [{
18688
+ id: EXPANDER_COLUMN_ID,
18689
+ size: 36,
18690
+ enableSorting: false,
18691
+ enableResizing: false,
18692
+ header: () => null,
18693
+ cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(DsTableRowExpandableCell, { row }) : null
18694
+ }, ...columnsProp];
18695
+ }, [columnsProp, expandable]);
18704
18696
  const table = useReactTable({
18705
18697
  data: reorderable ? data : tableData,
18706
18698
  columns,
@@ -18712,6 +18704,8 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
18712
18704
  onColumnVisibilityChange: handleColumnVisibilityChange,
18713
18705
  onRowSelectionChange: handleRowSelectionChange,
18714
18706
  getRowId: (row) => row.id,
18707
+ getExpandedRowModel: getExpandedRowModel(),
18708
+ getRowCanExpand: typeof expandable === "function" ? (row) => expandable(row.original) : () => expandable,
18715
18709
  state: {
18716
18710
  sorting,
18717
18711
  columnFilters,
@@ -18761,7 +18755,7 @@ const DsTable = ({ ref, columns, data: tableData, virtualized = false, virtualiz
18761
18755
  }), [table]);
18762
18756
  const { rows, rowsById } = table.getRowModel();
18763
18757
  const renderEmptyState = () => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
18764
- colSpan: columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0),
18758
+ colSpan: columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
18765
18759
  className: ds_table_module_default.emptyState,
18766
18760
  children: emptyState || "No results."
18767
18761
  }) });
@@ -19951,6 +19945,6 @@ DsWorkspace.SubHeader = SubHeader;
19951
19945
  DsWorkspace.Content = Content;
19952
19946
  DsWorkspace.Footer = Footer;
19953
19947
  //#endregion
19954
- export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, 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, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
19948
+ export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, 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, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
19955
19949
 
19956
19950
  //# sourceMappingURL=index.js.map