@drivenets/design-system 0.11.1 → 0.12.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 (42) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.cjs +360 -130
  3. package/dist/index.d.cts +167 -2
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +167 -2
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +357 -131
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +2 -1
  11. package/src/components/ds-autocomplete/ds-autocomplete.module.scss +1 -1
  12. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +5 -0
  13. package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss +0 -5
  14. package/src/components/ds-status-badge/ds-status-badge.types.ts +15 -0
  15. package/src/components/ds-status-badge-v2/ds-status-badge-v2.module.scss +109 -0
  16. package/src/components/ds-status-badge-v2/ds-status-badge-v2.tsx +77 -0
  17. package/src/components/ds-status-badge-v2/ds-status-badge-v2.types.ts +79 -0
  18. package/src/components/ds-status-badge-v2/ds-status-badge-v2.unit.test.ts +25 -0
  19. package/src/components/ds-status-badge-v2/index.ts +13 -0
  20. package/src/components/ds-status-badge-v2/phase-config.ts +15 -0
  21. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx +16 -8
  22. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.types.ts +61 -0
  23. package/src/components/ds-table/components/ds-table-body-virtualized/use-infinite-scroll.ts +54 -0
  24. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +4 -9
  25. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +12 -26
  26. package/src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx +22 -0
  27. package/src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.types.ts +9 -0
  28. package/src/components/ds-table/components/ds-table-header-selectable-cell/index.ts +2 -0
  29. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +4 -9
  30. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +20 -15
  31. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx +9 -18
  32. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.types.ts +2 -11
  33. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +3 -6
  34. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +2 -6
  35. package/src/components/ds-table/ds-table.tsx +57 -17
  36. package/src/components/ds-table/ds-table.types.ts +27 -1
  37. package/src/components/ds-table/styles/_variables.scss +0 -1
  38. package/src/components/ds-table/styles/shared/ds-table-shared.module.scss +1 -0
  39. package/src/components/ds-table/utils/constants.ts +21 -0
  40. package/src/index.ts +1 -0
  41. package/src/styles/shared/_dropdown.scss +1 -1
  42. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.module.scss +0 -6
package/dist/index.js CHANGED
@@ -16961,6 +16961,167 @@ const DsStatusBadge = (t0) => {
16961
16961
  return t12;
16962
16962
  };
16963
16963
  //#endregion
16964
+ //#region src/components/ds-status-badge-v2/ds-status-badge-v2.module.scss
16965
+ var ds_status_badge_v2_module_default = {
16966
+ "active": "xQkUdW_active",
16967
+ "deprecated": "xQkUdW_deprecated",
16968
+ "execution": "xQkUdW_execution",
16969
+ "icon": "xQkUdW_icon",
16970
+ "iconOnly": "xQkUdW_iconOnly",
16971
+ "in-review": "xQkUdW_in-review",
16972
+ "label": "xQkUdW_label",
16973
+ "medium": "xQkUdW_medium",
16974
+ "not-started": "xQkUdW_not-started",
16975
+ "pending": "xQkUdW_pending",
16976
+ "result-failed": "xQkUdW_result-failed",
16977
+ "result-succeeded": "xQkUdW_result-succeeded",
16978
+ "result-warning": "xQkUdW_result-warning",
16979
+ "root": "xQkUdW_root",
16980
+ "secondary": "xQkUdW_secondary",
16981
+ "small": "xQkUdW_small",
16982
+ "temporary": "xQkUdW_temporary",
16983
+ "textOnly": "xQkUdW_textOnly"
16984
+ };
16985
+ //#endregion
16986
+ //#region src/components/ds-status-badge-v2/phase-config.ts
16987
+ const phaseIconMap = Object.freeze({
16988
+ "not-started": "lasso_select",
16989
+ temporary: "hourglass_empty",
16990
+ "in-review": "document_search",
16991
+ pending: "timer_pause",
16992
+ active: "power_settings_circle",
16993
+ execution: "timelapse",
16994
+ "result-succeeded": "verified",
16995
+ "result-warning": "warning",
16996
+ "result-failed": "cancel",
16997
+ deprecated: "inventory_2"
16998
+ });
16999
+ //#endregion
17000
+ //#region src/components/ds-status-badge-v2/ds-status-badge-v2.tsx
17001
+ const DsStatusBadgeV2$1 = (t0) => {
17002
+ const $ = c(26);
17003
+ const { phase, label, icon, iconOnly: t1, variant: t2, size: t3, className, style, ref, "aria-label": ariaLabel } = t0;
17004
+ const iconOnly = t1 === void 0 ? false : t1;
17005
+ const variant = t2 === void 0 ? "primary" : t2;
17006
+ const size = t3 === void 0 ? "medium" : t3;
17007
+ const resolvedIcon = icon === null ? null : icon ?? phaseIconMap[phase];
17008
+ const hasIcon = resolvedIcon !== null;
17009
+ const isTextOnly = !hasIcon;
17010
+ const tooltipContent = iconOnly ? label : void 0;
17011
+ let t4;
17012
+ if ($[0] !== size) {
17013
+ t4 = size === "small" ? {
17014
+ fontSize: "var(--_badge-icon-size)",
17015
+ width: "var(--_badge-icon-size)",
17016
+ height: "var(--_badge-icon-size)"
17017
+ } : void 0;
17018
+ $[0] = size;
17019
+ $[1] = t4;
17020
+ } else t4 = $[1];
17021
+ const iconStyle = t4;
17022
+ const t5 = ds_status_badge_v2_module_default[phase];
17023
+ const t6 = ds_status_badge_v2_module_default[size];
17024
+ const t7 = variant === "secondary";
17025
+ let t8;
17026
+ if ($[2] !== className || $[3] !== iconOnly || $[4] !== isTextOnly || $[5] !== t5 || $[6] !== t6 || $[7] !== t7) {
17027
+ t8 = classNames(ds_status_badge_v2_module_default.root, t5, t6, {
17028
+ [ds_status_badge_v2_module_default.secondary]: t7,
17029
+ [ds_status_badge_v2_module_default.iconOnly]: iconOnly,
17030
+ [ds_status_badge_v2_module_default.textOnly]: isTextOnly
17031
+ }, className);
17032
+ $[2] = className;
17033
+ $[3] = iconOnly;
17034
+ $[4] = isTextOnly;
17035
+ $[5] = t5;
17036
+ $[6] = t6;
17037
+ $[7] = t7;
17038
+ $[8] = t8;
17039
+ } else t8 = $[8];
17040
+ const rootClass = t8;
17041
+ const t9 = ref;
17042
+ const t10 = ariaLabel ?? label;
17043
+ let t11;
17044
+ if ($[9] !== hasIcon || $[10] !== iconStyle || $[11] !== resolvedIcon) {
17045
+ t11 = hasIcon && /* @__PURE__ */ jsx("span", {
17046
+ className: ds_status_badge_v2_module_default.icon,
17047
+ children: /* @__PURE__ */ jsx(DsIcon, {
17048
+ icon: resolvedIcon,
17049
+ size: "tiny",
17050
+ filled: true,
17051
+ "aria-hidden": "true",
17052
+ style: iconStyle
17053
+ })
17054
+ });
17055
+ $[9] = hasIcon;
17056
+ $[10] = iconStyle;
17057
+ $[11] = resolvedIcon;
17058
+ $[12] = t11;
17059
+ } else t11 = $[12];
17060
+ let t12;
17061
+ if ($[13] !== iconOnly || $[14] !== label) {
17062
+ t12 = !iconOnly && /* @__PURE__ */ jsx(DsTypography, {
17063
+ className: ds_status_badge_v2_module_default.label,
17064
+ variant: "body-xs-reg",
17065
+ children: label
17066
+ });
17067
+ $[13] = iconOnly;
17068
+ $[14] = label;
17069
+ $[15] = t12;
17070
+ } else t12 = $[15];
17071
+ let t13;
17072
+ if ($[16] !== rootClass || $[17] !== style || $[18] !== t10 || $[19] !== t11 || $[20] !== t12 || $[21] !== t9) {
17073
+ t13 = /* @__PURE__ */ jsxs("div", {
17074
+ ref: t9,
17075
+ className: rootClass,
17076
+ style,
17077
+ role: "status",
17078
+ "aria-label": t10,
17079
+ children: [t11, t12]
17080
+ });
17081
+ $[16] = rootClass;
17082
+ $[17] = style;
17083
+ $[18] = t10;
17084
+ $[19] = t11;
17085
+ $[20] = t12;
17086
+ $[21] = t9;
17087
+ $[22] = t13;
17088
+ } else t13 = $[22];
17089
+ const badge = t13;
17090
+ if (iconOnly) {
17091
+ let t14;
17092
+ if ($[23] !== badge || $[24] !== tooltipContent) {
17093
+ t14 = /* @__PURE__ */ jsx(DsTooltip, {
17094
+ content: tooltipContent,
17095
+ children: badge
17096
+ });
17097
+ $[23] = badge;
17098
+ $[24] = tooltipContent;
17099
+ $[25] = t14;
17100
+ } else t14 = $[25];
17101
+ return t14;
17102
+ }
17103
+ return badge;
17104
+ };
17105
+ //#endregion
17106
+ //#region src/components/ds-status-badge-v2/ds-status-badge-v2.types.ts
17107
+ const statusBadgeV2Phases = [
17108
+ "not-started",
17109
+ "temporary",
17110
+ "in-review",
17111
+ "pending",
17112
+ "active",
17113
+ "execution",
17114
+ "result-succeeded",
17115
+ "result-warning",
17116
+ "result-failed",
17117
+ "deprecated"
17118
+ ];
17119
+ const statusBadgeV2Variants = ["primary", "secondary"];
17120
+ const statusBadgeV2Sizes = ["medium", "small"];
17121
+ //#endregion
17122
+ //#region src/components/ds-status-badge-v2/index.ts
17123
+ const DsStatusBadgeV2 = withResponsiveProps(DsStatusBadgeV2$1, ["size"]);
17124
+ //#endregion
16964
17125
  //#region src/components/ds-stepper/ds-stepper.module.scss
16965
17126
  var ds_stepper_module_default = {
16966
17127
  "dragHandle": "kFAdma_dragHandle",
@@ -18102,8 +18263,7 @@ var ds_table_header_module_default = {
18102
18263
  "headerSortContainer": "-2rCNG_headerSortContainer",
18103
18264
  "pageButtonIcon": "-2rCNG_pageButtonIcon",
18104
18265
  "pageButtonIconContainer": "-2rCNG_pageButtonIconContainer",
18105
- "reorderColumn": "-2rCNG_reorderColumn",
18106
- "selectColumn": "-2rCNG_selectColumn",
18266
+ "selectHeaderCell": "-2rCNG_selectHeaderCell",
18107
18267
  "sortableHeader": "-2rCNG_sortableHeader",
18108
18268
  "stickyHeader": "-2rCNG_stickyHeader",
18109
18269
  "virtualizedHeader": "-2rCNG_virtualizedHeader"
@@ -18143,54 +18303,58 @@ const getColumnSizeStyle = (columnSize, virtualized) => {
18143
18303
  if (columnSize !== defaultColumnSizing.size) return { width: columnSize };
18144
18304
  if (virtualized) return { flex: 1 };
18145
18305
  };
18306
+ /**
18307
+ * Column id used for the synthetic expander column injected when `expandable` is set.
18308
+ */
18309
+ const EXPANDER_COLUMN_ID = "expander";
18310
+ /**
18311
+ * Column id used for the synthetic selection column injected when `selectable` is set.
18312
+ */
18313
+ const SELECT_COLUMN_ID = "select";
18314
+ /**
18315
+ * Column id used for the synthetic reorder column injected when `reorderable` is set
18316
+ * (non-virtualized tables only).
18317
+ */
18318
+ const REORDER_COLUMN_ID = "reorder";
18146
18319
  //#endregion
18147
18320
  //#region src/components/ds-table/components/ds-table-header/ds-table-header.tsx
18148
18321
  const DsTableHeader = ({ table }) => {
18149
- const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } = useDsTableContext();
18322
+ const { stickyHeader, bordered, virtualized } = useDsTableContext();
18150
18323
  return /* @__PURE__ */ jsx(TableHeader, {
18151
18324
  className: classNames(stickyHeader && ds_table_header_module_default.stickyHeader, virtualized && ds_table_header_module_default.virtualizedHeader),
18152
- children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, {
18325
+ children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
18153
18326
  className: classNames(ds_table_header_module_default.headerRow, !bordered && ds_table_header_module_default.headerRowNoBorder, virtualized && ds_table_header_module_default.headerRowVirtualized),
18154
- children: [
18155
- selectable && /* @__PURE__ */ jsx(TableHead, {
18156
- className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.selectColumn),
18157
- children: showSelectAllCheckbox && /* @__PURE__ */ jsx(DsCheckbox, {
18158
- className: ds_table_shared_module_default.checkboxContainer,
18159
- checked: table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false,
18160
- onCheckedChange: (checked) => table.toggleAllRowsSelected(!!checked),
18161
- onClick: (e) => e.stopPropagation()
18327
+ children: headerGroup.headers.map((header) => {
18328
+ const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
18329
+ const canSort = header.column.getCanSort();
18330
+ const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
18331
+ return /* @__PURE__ */ jsx(TableHead, {
18332
+ className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader, isSelectColumn && ds_table_header_module_default.selectHeaderCell),
18333
+ onClick: header.column.getToggleSortingHandler(),
18334
+ style: headerStyle,
18335
+ children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
18336
+ className: ds_table_header_module_default.headerSortContainer,
18337
+ children: [/* @__PURE__ */ jsx(DsStack, {
18338
+ direction: "column",
18339
+ justifyContent: "center",
18340
+ width: "100%",
18341
+ children: flexRender(header.column.columnDef.header, header.getContext())
18342
+ }), canSort && /* @__PURE__ */ jsx("div", {
18343
+ className: ds_table_header_module_default.pageButtonIconContainer,
18344
+ children: {
18345
+ asc: /* @__PURE__ */ jsx(DsIcon, {
18346
+ icon: "arrow_drop_up",
18347
+ className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
18348
+ }),
18349
+ desc: /* @__PURE__ */ jsx(DsIcon, {
18350
+ icon: "arrow_drop_down",
18351
+ className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
18352
+ })
18353
+ }[header.column.getIsSorted()] ?? /* @__PURE__ */ jsx("div", { className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
18354
+ })]
18162
18355
  })
18163
- }),
18164
- reorderable && /* @__PURE__ */ jsx(TableHead, {
18165
- className: classNames(ds_table_header_module_default.headerCell, ds_table_header_module_default.reorderColumn),
18166
- children: "Order"
18167
- }),
18168
- headerGroup.headers.map((header) => {
18169
- const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
18170
- const canSort = header.column.getCanSort();
18171
- return /* @__PURE__ */ jsx(TableHead, {
18172
- className: classNames(ds_table_header_module_default.headerCell, canSort && ds_table_header_module_default.sortableHeader),
18173
- onClick: header.column.getToggleSortingHandler(),
18174
- style: headerStyle,
18175
- children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
18176
- className: ds_table_header_module_default.headerSortContainer,
18177
- children: [/* @__PURE__ */ jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), canSort && /* @__PURE__ */ jsx("div", {
18178
- className: ds_table_header_module_default.pageButtonIconContainer,
18179
- children: {
18180
- asc: /* @__PURE__ */ jsx(DsIcon, {
18181
- icon: "arrow_drop_up",
18182
- className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
18183
- }),
18184
- desc: /* @__PURE__ */ jsx(DsIcon, {
18185
- icon: "arrow_drop_down",
18186
- className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon)
18187
- })
18188
- }[header.column.getIsSorted()] ?? /* @__PURE__ */ jsx("div", { className: classNames(ds_table_header_module_default.pageButtonIcon, ds_table_shared_module_default.pageButtonIcon) })
18189
- })]
18190
- })
18191
- }, header.id);
18192
- })
18193
- ]
18356
+ }, header.id);
18357
+ })
18194
18358
  }, headerGroup.id))
18195
18359
  });
18196
18360
  };
@@ -18294,24 +18458,6 @@ const DsTableCell = ({ row, cell, primaryRowActions = [], secondaryRowActions =
18294
18458
  return /* @__PURE__ */ jsx(DsDefaultTableCell, { cell });
18295
18459
  };
18296
18460
  //#endregion
18297
- //#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.module.scss
18298
- var ds_table_row_selectable_cell_module_default = { "cell": "BxP8ta_cell" };
18299
- //#endregion
18300
- //#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
18301
- const DsTableRowSelectableCell = ({ row, isSelected, className }) => {
18302
- return /* @__PURE__ */ jsx(TableCell, {
18303
- className: classNames(ds_table_row_selectable_cell_module_default.cell, className),
18304
- children: /* @__PURE__ */ jsx(DsCheckbox, {
18305
- className: ds_table_shared_module_default.checkboxContainer,
18306
- checked: isSelected,
18307
- disabled: !row.getCanSelect(),
18308
- onCheckedChange: (checked) => row.toggleSelected(!!checked),
18309
- onClick: (e) => e.stopPropagation(),
18310
- onDoubleClick: (e) => e.stopPropagation()
18311
- })
18312
- });
18313
- };
18314
- //#endregion
18315
18461
  //#region src/components/ds-table/components/ds-table-row/ds-table-row.module.scss
18316
18462
  var ds_table_row_module_default = {
18317
18463
  "cellReorder": "t8OZCq_cellReorder",
@@ -18329,15 +18475,12 @@ var ds_table_row_module_default = {
18329
18475
  "tableCell": "t8OZCq_tableCell",
18330
18476
  "tableRow": "t8OZCq_tableRow"
18331
18477
  };
18332
- /**
18333
- * Column id used for the synthetic expander column injected when `expandable` is set.
18334
- */
18335
- const EXPANDER_COLUMN_ID = "expander";
18336
18478
  //#endregion
18337
18479
  //#region src/components/ds-table/components/ds-table-row/ds-table-row.tsx
18338
- const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
18480
+ const DsRowDragHandle = ({ isDragging, attributes, listeners, style }) => {
18339
18481
  return /* @__PURE__ */ jsx(TableCell, {
18340
18482
  className: classNames(ds_table_row_module_default.tableCell, ds_table_row_module_default.cellReorder, { [ds_table_row_module_default.isDragging]: isDragging }),
18483
+ style,
18341
18484
  children: /* @__PURE__ */ jsx(DsIcon, {
18342
18485
  className: ds_table_row_module_default.rowDragHandle,
18343
18486
  icon: isDragging ? "drag_indicator" : "arrow_downward",
@@ -18349,7 +18492,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }) => {
18349
18492
  });
18350
18493
  };
18351
18494
  const DsTableRow = ({ ref, row, isSelected }) => {
18352
- const { selectable, reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
18495
+ const { reorderable, onRowClick, onRowDoubleClick, renderExpandedRow, bordered, rowSize, primaryRowActions, secondaryRowActions, activeRowId } = useDsTableContext();
18353
18496
  const isExpanded = row.getIsExpanded();
18354
18497
  const isActive = activeRowId === row.id;
18355
18498
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -18366,7 +18509,7 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18366
18509
  } : {},
18367
18510
  position: "relative"
18368
18511
  } : {};
18369
- return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TableRow, {
18512
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
18370
18513
  ref: mergeRefs(reorderable ? setNodeRef : null, ref),
18371
18514
  "data-state": isActive ? "active" : isSelected ? "selected" : void 0,
18372
18515
  className: classNames(ds_table_row_module_default.tableRow, {
@@ -18377,39 +18520,33 @@ const DsTableRow = ({ ref, row, isSelected }) => {
18377
18520
  style: rowStyle,
18378
18521
  onClick: () => onRowClick?.(row.original),
18379
18522
  onDoubleClick: () => onRowDoubleClick?.(row.original),
18380
- children: [
18381
- selectable && /* @__PURE__ */ jsx(DsTableRowSelectableCell, {
18382
- row,
18383
- isSelected,
18384
- className: ds_table_row_module_default.selectableCell
18385
- }),
18386
- reorderable && /* @__PURE__ */ jsx(DsRowDragHandle, {
18523
+ children: row.getVisibleCells().map((cell, idx) => {
18524
+ const cellStyle = getColumnSizeStyle(cell.column.getSize());
18525
+ if (cell.column.id === "reorder") return /* @__PURE__ */ jsx(DsRowDragHandle, {
18387
18526
  isDragging,
18388
18527
  attributes,
18389
- listeners
18390
- }),
18391
- row.getVisibleCells().map((cell, idx) => {
18392
- const isLastColumn = idx === row.getVisibleCells().length - 1;
18393
- const cellStyle = getColumnSizeStyle(cell.column.getSize());
18394
- return /* @__PURE__ */ jsx(TableCell, {
18395
- className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell),
18396
- style: cellStyle,
18397
- children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18398
- row,
18399
- cell,
18400
- primaryRowActions,
18401
- secondaryRowActions
18402
- }) : /* @__PURE__ */ jsx(DsTableCell, {
18403
- row,
18404
- cell
18405
- })
18406
- }, cell.id);
18407
- })
18408
- ]
18528
+ listeners,
18529
+ style: cellStyle
18530
+ }, cell.id);
18531
+ const isLastColumn = idx === row.getVisibleCells().length - 1;
18532
+ return /* @__PURE__ */ jsx(TableCell, {
18533
+ className: classNames(ds_table_row_module_default.tableCell, cell.column.id === "expander" && ds_table_row_module_default.expandableCell, cell.column.id === "select" && ds_table_row_module_default.selectableCell),
18534
+ style: cellStyle,
18535
+ children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18536
+ row,
18537
+ cell,
18538
+ primaryRowActions,
18539
+ secondaryRowActions
18540
+ }) : /* @__PURE__ */ jsx(DsTableCell, {
18541
+ row,
18542
+ cell
18543
+ })
18544
+ }, cell.id);
18545
+ })
18409
18546
  }), isExpanded && renderExpandedRow && /* @__PURE__ */ jsx(TableRow, {
18410
18547
  className: ds_table_row_module_default.expandedRow,
18411
18548
  children: /* @__PURE__ */ jsx(TableCell, {
18412
- colSpan: row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
18549
+ colSpan: row.getVisibleCells().length,
18413
18550
  className: ds_table_row_module_default.tableCell,
18414
18551
  children: renderExpandedRow(row.original)
18415
18552
  })
@@ -18442,6 +18579,30 @@ const DsTableRowExpandableCell = ({ row, buttonClassName }) => {
18442
18579
  });
18443
18580
  };
18444
18581
  //#endregion
18582
+ //#region src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx
18583
+ const DsTableRowSelectableCell = ({ row }) => {
18584
+ return /* @__PURE__ */ jsx(DsCheckbox, {
18585
+ className: ds_table_shared_module_default.checkboxContainer,
18586
+ checked: row.getIsSelected(),
18587
+ disabled: !row.getCanSelect(),
18588
+ onCheckedChange: (checked) => row.toggleSelected(!!checked),
18589
+ onClick: (e) => e.stopPropagation(),
18590
+ onDoubleClick: (e) => e.stopPropagation()
18591
+ });
18592
+ };
18593
+ //#endregion
18594
+ //#region src/components/ds-table/components/ds-table-header-selectable-cell/ds-table-header-selectable-cell.tsx
18595
+ const DsTableHeaderSelectableCell = ({ table }) => {
18596
+ const checked = table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false;
18597
+ return /* @__PURE__ */ jsx(DsCheckbox, {
18598
+ className: ds_table_shared_module_default.checkboxContainer,
18599
+ checked,
18600
+ onCheckedChange: (nextChecked) => table.toggleAllRowsSelected(!!nextChecked),
18601
+ onClick: (e) => e.stopPropagation(),
18602
+ onDoubleClick: (e) => e.stopPropagation()
18603
+ });
18604
+ };
18605
+ //#endregion
18445
18606
  //#region src/components/ds-table/hooks/use-drag-and-drop.tsx
18446
18607
  const DragWrapper = ({ children, onDragEnd, sensors }) => /* @__PURE__ */ jsx(DndContext, {
18447
18608
  collisionDetection: closestCenter,
@@ -18510,7 +18671,7 @@ var ds_table_row_virtualized_module_default = {
18510
18671
  //#endregion
18511
18672
  //#region src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx
18512
18673
  const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef, rowVirtualizer, virtualRow, isExpandedRowContent }) => {
18513
- const { selectable, bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
18674
+ const { bordered, rowSize, activeRowId, primaryRowActions, secondaryRowActions, renderExpandedRow, onRowClick, onRowDoubleClick } = useDsTableContext();
18514
18675
  const isExpanded = row.getIsExpanded();
18515
18676
  const isActive = activeRowId === row.id;
18516
18677
  return /* @__PURE__ */ jsx(TableRow, {
@@ -18532,15 +18693,11 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
18532
18693
  }, 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),
18533
18694
  onClick: isExpandedRowContent ? void 0 : () => onRowClick?.(row.original),
18534
18695
  onDoubleClick: isExpandedRowContent ? void 0 : () => onRowDoubleClick?.(row.original),
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) => {
18696
+ children: isExpandedRowContent ? /* @__PURE__ */ jsx(TableCell, { children: renderExpandedRow?.(row.original) }) : /* @__PURE__ */ jsx(Fragment, { children: row.getVisibleCells().map((cell, idx) => {
18540
18697
  const isLastColumn = idx === row.getVisibleCells().length - 1;
18541
18698
  return /* @__PURE__ */ jsx(TableCell, {
18542
18699
  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),
18700
+ 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),
18544
18701
  children: isLastColumn ? /* @__PURE__ */ jsx(DsTableCell, {
18545
18702
  row,
18546
18703
  cell,
@@ -18551,12 +18708,41 @@ const DsTableRowVirtualized = ({ row, isSelected, rowsMapRef, rowHeightsMapRef,
18551
18708
  cell
18552
18709
  })
18553
18710
  }, cell.id);
18554
- })] })
18711
+ }) })
18555
18712
  });
18556
18713
  };
18557
18714
  //#endregion
18715
+ //#region src/components/ds-table/components/ds-table-body-virtualized/use-infinite-scroll.ts
18716
+ const DEFAULT_THRESHOLD_PX = 500;
18717
+ const DEFAULT_AUTO_FILL = true;
18718
+ /**
18719
+ * Owns the infinite-scroll trigger logic for `DsTable`:
18720
+ * threshold detection and the auto-fill loop for short initial pages.
18721
+ */
18722
+ const useInfiniteScroll = (scrollElementRef, rowCount, config) => {
18723
+ const hasMore = config?.hasMore ?? false;
18724
+ const isLoadingMore = config?.isLoadingMore ?? false;
18725
+ const thresholdPx = config?.thresholdPx ?? DEFAULT_THRESHOLD_PX;
18726
+ const autoFill = config?.autoFill ?? DEFAULT_AUTO_FILL;
18727
+ const loadDataIfNeeded = () => {
18728
+ const el = scrollElementRef.current;
18729
+ if (!config || !hasMore || isLoadingMore || !el) return;
18730
+ const isScrollable = el.scrollHeight > el.clientHeight;
18731
+ const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
18732
+ if (isScrollable && distanceToBottom <= thresholdPx || autoFill && !isScrollable) config.onLoadMore();
18733
+ };
18734
+ useEffect(() => {
18735
+ loadDataIfNeeded();
18736
+ }, [
18737
+ rowCount,
18738
+ hasMore,
18739
+ isLoadingMore
18740
+ ]);
18741
+ return { loadDataIfNeeded };
18742
+ };
18743
+ //#endregion
18558
18744
  //#region src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.tsx
18559
- const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimateSize, overscan, onScroll, rowSelection }) => {
18745
+ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimateSize, overscan, onScroll, rowSelection, infiniteScroll }) => {
18560
18746
  const rowsMapRef = useRef(/* @__PURE__ */ new Map());
18561
18747
  const rowHeightsMapRef = useRef(/* @__PURE__ */ new Map());
18562
18748
  const { rows } = table.getRowModel();
@@ -18568,6 +18754,7 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
18568
18754
  const item = rowsAndExpandedRowContent[index];
18569
18755
  return item ? `${item.row.id}${item.isExpandedRowContent ? "-expanded-content" : ""}` : String(index);
18570
18756
  };
18757
+ const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
18571
18758
  const rowVirtualizer = useVirtualizer({
18572
18759
  count: rowsAndExpandedRowContent.length,
18573
18760
  estimateSize: (index) => {
@@ -18585,18 +18772,21 @@ const DsTableBodyVirtualized = ({ table, tableContainerRef, emptyState, estimate
18585
18772
  row.style.transform = `translateY(${virtualRow.start.toString()}px)`;
18586
18773
  });
18587
18774
  });
18588
- if (sync && onScroll) {
18589
- const scrollOffset = instance.scrollOffset || 0;
18590
- const totalContentHeight = instance.getTotalSize();
18591
- const viewportHeight = instance.scrollElement?.clientHeight;
18592
- const scrollDirection = instance.scrollDirection;
18593
- if (viewportHeight) onScroll({
18594
- scrollOffset,
18595
- totalContentHeight,
18596
- viewportHeight,
18597
- bottomOffset: totalContentHeight - (scrollOffset + viewportHeight),
18598
- scrollDirection
18599
- });
18775
+ if (sync) {
18776
+ if (onScroll) {
18777
+ const scrollOffset = instance.scrollOffset || 0;
18778
+ const totalContentHeight = instance.getTotalSize();
18779
+ const viewportHeight = instance.scrollElement?.clientHeight;
18780
+ const scrollDirection = instance.scrollDirection;
18781
+ if (viewportHeight) onScroll({
18782
+ scrollOffset,
18783
+ totalContentHeight,
18784
+ viewportHeight,
18785
+ bottomOffset: totalContentHeight - (scrollOffset + viewportHeight),
18786
+ scrollDirection
18787
+ });
18788
+ }
18789
+ loadDataIfNeeded();
18600
18790
  }
18601
18791
  }
18602
18792
  });
@@ -18645,7 +18835,7 @@ const ROW_SIZE_HEIGHT_MAP = {
18645
18835
  /**
18646
18836
  * Design system Table component
18647
18837
  */
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 }) => {
18838
+ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = false, virtualizedOptions, className, onRowClick, emptyState, stickyHeader = true, bordered = true, fullWidth = true, rowSize = "medium", expandable = false, renderExpandedRow, selectable = false, showSelectAllCheckbox = true, onSelectionChange, onSortingChange, onScroll, actions = [], onRowDoubleClick, primaryRowActions = [], secondaryRowActions, reorderable = false, onOrderChange, columnFilters: externalColumnFilters, onColumnFiltersChange, columnVisibility: externalColumnVisibility, onColumnVisibilityChange, activeRowId, infiniteScroll }) => {
18649
18839
  const [data, setData] = React$1.useState(tableData);
18650
18840
  const [sorting, setSorting] = React$1.useState([]);
18651
18841
  const [internalColumnFilters, setInternalColumnFilters] = React$1.useState([]);
@@ -18682,17 +18872,52 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
18682
18872
  setRowSelection(newRowSelection);
18683
18873
  onSelectionChange?.(newRowSelection);
18684
18874
  };
18875
+ const hasExpanderColumn = !!expandable;
18876
+ const hasSelectColumn = !!selectable;
18877
+ const hasReorderColumn = reorderable && !virtualized;
18685
18878
  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]);
18879
+ const augmentedColumns = [...columnsProp];
18880
+ if (hasSelectColumn) {
18881
+ const selectColumn = {
18882
+ id: SELECT_COLUMN_ID,
18883
+ size: 36,
18884
+ enableSorting: false,
18885
+ enableResizing: false,
18886
+ header: ({ table }) => showSelectAllCheckbox ? /* @__PURE__ */ jsx(DsTableHeaderSelectableCell, { table }) : null,
18887
+ cell: ({ row }) => /* @__PURE__ */ jsx(DsTableRowSelectableCell, { row })
18888
+ };
18889
+ augmentedColumns.unshift(selectColumn);
18890
+ }
18891
+ if (hasExpanderColumn) {
18892
+ const expanderColumn = {
18893
+ id: EXPANDER_COLUMN_ID,
18894
+ size: 36,
18895
+ enableSorting: false,
18896
+ enableResizing: false,
18897
+ header: () => null,
18898
+ cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(DsTableRowExpandableCell, { row }) : null
18899
+ };
18900
+ augmentedColumns.unshift(expanderColumn);
18901
+ }
18902
+ if (hasReorderColumn) {
18903
+ const reorderColumn = {
18904
+ id: REORDER_COLUMN_ID,
18905
+ size: 60,
18906
+ enableSorting: false,
18907
+ enableResizing: false,
18908
+ header: "Order",
18909
+ cell: () => null
18910
+ };
18911
+ augmentedColumns.unshift(reorderColumn);
18912
+ }
18913
+ return augmentedColumns;
18914
+ }, [
18915
+ columnsProp,
18916
+ hasExpanderColumn,
18917
+ hasReorderColumn,
18918
+ hasSelectColumn,
18919
+ showSelectAllCheckbox
18920
+ ]);
18696
18921
  const table = useReactTable({
18697
18922
  data: reorderable ? data : tableData,
18698
18923
  columns,
@@ -18755,7 +18980,7 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
18755
18980
  }), [table]);
18756
18981
  const { rows, rowsById } = table.getRowModel();
18757
18982
  const renderEmptyState = () => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
18758
- colSpan: columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0),
18983
+ colSpan: columns.length,
18759
18984
  className: ds_table_module_default.emptyState,
18760
18985
  children: emptyState || "No results."
18761
18986
  }) });
@@ -18792,7 +19017,8 @@ const DsTable = ({ ref, columns: columnsProp, data: tableData, virtualized = fal
18792
19017
  estimateSize: virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
18793
19018
  overscan: virtualizedOptions?.overscan,
18794
19019
  onScroll,
18795
- rowSelection
19020
+ rowSelection,
19021
+ infiniteScroll
18796
19022
  }) : /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(SortableWrapper, { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx(DsTableRow, {
18797
19023
  row,
18798
19024
  isSelected: !!rowSelection[row.id]
@@ -19945,6 +20171,6 @@ DsWorkspace.SubHeader = SubHeader;
19945
20171
  DsWorkspace.Content = Content;
19946
20172
  DsWorkspace.Footer = Footer;
19947
20173
  //#endregion
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 };
20174
+ 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, DsStatusBadgeV2, 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, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
19949
20175
 
19950
20176
  //# sourceMappingURL=index.js.map