@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.
- package/CHANGELOG.md +18 -0
- package/dist/index.cjs +1727 -701
- package/dist/index.d.cts +115 -52
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +115 -52
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1729 -705
- package/dist/index.js.map +1 -1
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts +49 -0
- package/src/components/ds-alert-banner/ds-alert-banner.figma.ts +51 -0
- package/src/components/ds-autocomplete/ds-autocomplete.module.scss +15 -4
- package/src/components/ds-autocomplete/ds-autocomplete.tsx +10 -3
- package/src/components/ds-autocomplete/ds-autocomplete.types.ts +8 -0
- package/src/components/ds-button-v3/ds-button-v3.figma.ts +5 -3
- package/src/components/ds-button-v3/ds-button-v3.module.scss +84 -17
- package/src/components/ds-button-v3/ds-button-v3.tsx +2 -0
- package/src/components/ds-button-v3/ds-button-v3.types.ts +11 -2
- package/src/components/ds-button-v3/ds-button-v4.figma.ts +121 -0
- package/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts +52 -0
- package/src/components/ds-comment-card/ds-comment-card.figma.ts +36 -0
- package/src/components/ds-comment-indicator/ds-comment-indicator.figma.ts +32 -0
- package/src/components/ds-comments-drawer/ds-comments-drawer.figma.ts +19 -0
- package/src/components/ds-select/ds-select.figma.ts +2 -1
- package/src/components/ds-select/ds-select.tsx +6 -1
- package/src/components/ds-select/ds-select.types.ts +2 -1
- package/src/components/ds-slider/ds-slider.figma.ts +29 -0
- package/src/components/ds-slider/ds-slider.module.scss +104 -0
- package/src/components/ds-slider/ds-slider.tsx +118 -0
- package/src/components/ds-slider/ds-slider.types.ts +102 -0
- package/src/components/ds-slider/ds-slider.utils.ts +14 -0
- package/src/components/ds-slider/index.ts +11 -0
- package/src/components/ds-smart-tabs/figma/ds-smart-tabs-tab.figma.ts +83 -0
- package/src/components/ds-smart-tabs/figma/ds-smart-tabs.figma.ts +23 -0
- package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.module.scss +5 -1
- package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx +15 -3
- package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +15 -1
- package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +29 -6
- package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.module.scss +23 -0
- package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.tsx +218 -0
- package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.types.ts +14 -0
- package/src/components/ds-table/components/ds-table-resize-handle/index.ts +1 -0
- package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.module.scss +18 -0
- package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.tsx +16 -0
- package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.types.ts +13 -0
- package/src/components/ds-table/components/ds-table-resize-overlay/index.ts +1 -0
- package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +1 -1
- package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +9 -2
- package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +2 -1
- package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +9 -2
- package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx +2 -2
- package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx +2 -1
- package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx +2 -1
- package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx +2 -1
- package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx +2 -1
- package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx +12 -3
- package/src/components/ds-table/context/ds-table-context.tsx +208 -0
- package/src/components/ds-table/ds-table-defaults.ts +42 -0
- package/src/components/ds-table/ds-table.module.scss +4 -1
- package/src/components/ds-table/ds-table.tsx +139 -214
- package/src/components/ds-table/ds-table.types.ts +53 -47
- package/src/components/ds-table/grouping/utils/column-group.ts +7 -5
- package/src/components/ds-table/hooks/use-cell-editor.ts +5 -1
- package/src/components/ds-table/hooks/use-column-resize.ts +385 -0
- package/src/components/ds-table/hooks/use-editing-state.ts +190 -0
- package/src/components/ds-table/index.ts +1 -0
- package/src/components/ds-table/styles/_variables.scss +2 -1
- package/src/components/ds-table/utils/column-size-meta.augmentation.ts +16 -0
- package/src/components/ds-table/utils/column-size.ts +213 -10
- package/src/components/ds-table/utils/column-size.unit.test.ts +213 -0
- package/src/components/ds-table/utils/constants.ts +28 -0
- package/src/components/ds-table/utils/frozen-body.ts +33 -0
- package/src/components/ds-table/utils/frozen-body.unit.test.ts +44 -0
- package/src/components/ds-table/utils/table-api.ts +42 -0
- package/src/components/ds-table/utils/table-api.unit.test.ts +82 -0
- package/src/components/ds-table/utils/table-columns.tsx +119 -0
- package/src/components/ds-table/utils/table-columns.unit.test.ts +199 -0
- package/src/components/ds-tag/ds-tag.figma.ts +51 -0
- package/src/components/ds-tag-filter/ds-tag-filter.figma.ts +16 -0
- package/src/components/ds-text-input/ds-input-field-v02.figma.ts +29 -4
- package/src/components/ds-text-input/ds-text-input.figma.ts +3 -2
- package/src/components/ds-text-input/ds-text-input.tsx +1 -0
- package/src/components/ds-text-input/ds-text-input.types.ts +1 -1
- package/src/components/ds-tree/ds-tree.figma.ts +54 -0
- package/src/components/ds-workspace-layout/ds-workspace-layout.figma.ts +99 -0
- package/src/components/ds-workspace-layout/ds-workspace-layout.module.scss +1 -8
- package/src/index.ts +1 -0
- package/src/styles/_gradients.scss +19 -0
- package/src/styles/_root.scss +39 -15
- package/src/styles/_typography.scss +1 -0
- package/src/styles/shared/_input.scss +10 -0
- package/src/styles/styles.scss +1 -0
- 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,
|
|
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(
|
|
3569
|
-
const { id, options: t1, loading: t2, style, className, placeholder:
|
|
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
|
|
3573
|
-
const
|
|
3574
|
-
const
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
$[
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
const
|
|
3583
|
-
const
|
|
3584
|
-
const
|
|
3585
|
-
const
|
|
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
|
|
3591
|
+
let t13;
|
|
3588
3592
|
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
|
3589
|
-
|
|
3590
|
-
$[2] =
|
|
3591
|
-
} else
|
|
3592
|
-
const filterUtils = useFilter(
|
|
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$
|
|
3599
|
+
itemToString: _temp$18,
|
|
3596
3600
|
itemToValue: _temp2$9
|
|
3597
3601
|
});
|
|
3598
|
-
let
|
|
3602
|
+
let t14;
|
|
3599
3603
|
if ($[3] !== onInputValueChange) {
|
|
3600
|
-
|
|
3604
|
+
t14 = (details) => {
|
|
3601
3605
|
setFilterText(details.inputValue);
|
|
3602
3606
|
onInputValueChange?.(details.inputValue);
|
|
3603
3607
|
};
|
|
3604
3608
|
$[3] = onInputValueChange;
|
|
3605
|
-
$[4] =
|
|
3606
|
-
} else
|
|
3607
|
-
const handleInputValueChange =
|
|
3608
|
-
let
|
|
3609
|
+
$[4] = t14;
|
|
3610
|
+
} else t14 = $[4];
|
|
3611
|
+
const handleInputValueChange = t14;
|
|
3612
|
+
let t15;
|
|
3609
3613
|
if ($[5] !== onValueChange) {
|
|
3610
|
-
|
|
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] =
|
|
3616
|
-
} else
|
|
3617
|
-
const handleValueChange =
|
|
3618
|
-
let
|
|
3619
|
+
$[6] = t15;
|
|
3620
|
+
} else t15 = $[6];
|
|
3621
|
+
const handleValueChange = t15;
|
|
3622
|
+
let t16;
|
|
3619
3623
|
if ($[7] !== onOpenChange) {
|
|
3620
|
-
|
|
3624
|
+
t16 = (details_1) => {
|
|
3621
3625
|
onOpenChange?.(details_1.open);
|
|
3622
3626
|
};
|
|
3623
3627
|
$[7] = onOpenChange;
|
|
3624
|
-
$[8] =
|
|
3625
|
-
} else
|
|
3626
|
-
const handleOpenChange =
|
|
3627
|
-
let
|
|
3628
|
+
$[8] = t16;
|
|
3629
|
+
} else t16 = $[8];
|
|
3630
|
+
const handleOpenChange = t16;
|
|
3631
|
+
let t17;
|
|
3628
3632
|
if ($[9] !== className || $[10] !== disabled || $[11] !== invalid) {
|
|
3629
|
-
|
|
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] =
|
|
3637
|
-
} else
|
|
3638
|
-
const rootClass =
|
|
3639
|
-
const
|
|
3640
|
-
const
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
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
|
-
$[
|
|
3648
|
-
$[
|
|
3649
|
-
} else
|
|
3650
|
-
let
|
|
3651
|
-
if ($[
|
|
3652
|
-
|
|
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
|
-
$[
|
|
3657
|
-
$[
|
|
3658
|
-
} else
|
|
3659
|
-
let
|
|
3660
|
-
if ($[
|
|
3661
|
-
|
|
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
|
-
$[
|
|
3685
|
-
$[
|
|
3686
|
-
$[
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
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
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3707
|
+
t23,
|
|
3708
|
+
t24,
|
|
3709
|
+
t25
|
|
3696
3710
|
]
|
|
3697
3711
|
});
|
|
3698
|
-
$[
|
|
3699
|
-
$[
|
|
3700
|
-
$[
|
|
3701
|
-
$[
|
|
3702
|
-
|
|
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
|
|
3705
|
-
const
|
|
3706
|
-
const
|
|
3707
|
-
const
|
|
3708
|
-
let
|
|
3709
|
-
if ($[
|
|
3710
|
-
|
|
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
|
-
$[
|
|
3715
|
-
$[
|
|
3716
|
-
$[
|
|
3717
|
-
} else
|
|
3718
|
-
const
|
|
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
|
|
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
|
|
3742
|
-
if ($[
|
|
3743
|
-
|
|
3744
|
-
className:
|
|
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
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3761
|
+
t31,
|
|
3762
|
+
t32,
|
|
3763
|
+
t33
|
|
3749
3764
|
]
|
|
3750
3765
|
});
|
|
3751
|
-
$[
|
|
3752
|
-
$[
|
|
3753
|
-
$[
|
|
3754
|
-
$[
|
|
3755
|
-
$[
|
|
3756
|
-
$[
|
|
3757
|
-
} else
|
|
3758
|
-
let
|
|
3759
|
-
if ($[
|
|
3760
|
-
|
|
3761
|
-
className:
|
|
3762
|
-
children:
|
|
3763
|
-
});
|
|
3764
|
-
$[
|
|
3765
|
-
$[
|
|
3766
|
-
$[
|
|
3767
|
-
$[
|
|
3768
|
-
} else
|
|
3769
|
-
let
|
|
3770
|
-
if ($[
|
|
3771
|
-
|
|
3772
|
-
$[
|
|
3773
|
-
$[
|
|
3774
|
-
$[
|
|
3775
|
-
} else
|
|
3776
|
-
let
|
|
3777
|
-
if ($[
|
|
3778
|
-
|
|
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:
|
|
3789
|
-
children: [
|
|
3790
|
-
});
|
|
3791
|
-
$[
|
|
3792
|
-
$[
|
|
3793
|
-
$[
|
|
3794
|
-
$[
|
|
3795
|
-
$[
|
|
3796
|
-
$[
|
|
3797
|
-
$[
|
|
3798
|
-
$[
|
|
3799
|
-
$[
|
|
3800
|
-
$[
|
|
3801
|
-
$[
|
|
3802
|
-
$[
|
|
3803
|
-
$[
|
|
3804
|
-
} else
|
|
3805
|
-
return
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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(
|
|
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
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
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
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
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
|
-
$[
|
|
4120
|
-
$[
|
|
4121
|
-
$[
|
|
4122
|
-
} else
|
|
4123
|
-
const handleChange =
|
|
4124
|
-
let
|
|
4125
|
-
if ($[
|
|
4126
|
-
|
|
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
|
-
$[
|
|
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]
|
|
4140
|
-
t13 =
|
|
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:
|
|
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
|
-
$[
|
|
4162
|
-
$[
|
|
4163
|
-
$[
|
|
4164
|
-
$[
|
|
4165
|
-
$[
|
|
4166
|
-
$[
|
|
4167
|
-
$[
|
|
4168
|
-
$[
|
|
4169
|
-
$[
|
|
4170
|
-
$[
|
|
4171
|
-
$[
|
|
4172
|
-
$[
|
|
4173
|
-
$[
|
|
4174
|
-
$[
|
|
4175
|
-
$[
|
|
4176
|
-
$[
|
|
4177
|
-
$[
|
|
4178
|
-
$[
|
|
4179
|
-
$[
|
|
4180
|
-
} else
|
|
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 ($[
|
|
4190
|
-
t15 =
|
|
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
|
-
$[
|
|
4195
|
-
$[
|
|
4196
|
-
} else
|
|
4197
|
-
let
|
|
4198
|
-
if ($[
|
|
4199
|
-
|
|
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
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4229
|
+
t12,
|
|
4230
|
+
t15,
|
|
4231
|
+
t16
|
|
4206
4232
|
]
|
|
4207
4233
|
});
|
|
4208
|
-
$[
|
|
4209
|
-
$[
|
|
4210
|
-
$[
|
|
4211
|
-
$[39] = t14;
|
|
4234
|
+
$[37] = containerClass;
|
|
4235
|
+
$[38] = style;
|
|
4236
|
+
$[39] = t12;
|
|
4212
4237
|
$[40] = t15;
|
|
4213
4238
|
$[41] = t16;
|
|
4214
|
-
|
|
4215
|
-
|
|
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 = [
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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(
|
|
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,
|
|
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
|
|
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
|
|
5531
|
-
const
|
|
5532
|
-
let
|
|
5533
|
-
if ($[
|
|
5534
|
-
|
|
5535
|
-
$[
|
|
5536
|
-
$[
|
|
5537
|
-
} else
|
|
5538
|
-
const
|
|
5539
|
-
const
|
|
5540
|
-
const
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
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
|
-
$[
|
|
5549
|
-
$[
|
|
5550
|
-
$[
|
|
5551
|
-
$[
|
|
5552
|
-
} else
|
|
5553
|
-
let
|
|
5554
|
-
if ($[
|
|
5555
|
-
|
|
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:
|
|
5559
|
-
"aria-busy":
|
|
5593
|
+
disabled: t8,
|
|
5594
|
+
"aria-busy": t9,
|
|
5560
5595
|
"aria-pressed": selected,
|
|
5561
|
-
className:
|
|
5596
|
+
className: t10,
|
|
5562
5597
|
style,
|
|
5563
5598
|
"data-color": color,
|
|
5564
5599
|
"data-variant": variant,
|
|
5565
5600
|
"data-size": size,
|
|
5566
|
-
"data-selected":
|
|
5567
|
-
"data-
|
|
5568
|
-
"data-
|
|
5601
|
+
"data-selected": t11,
|
|
5602
|
+
"data-high-emphasis": t12,
|
|
5603
|
+
"data-icon-only": t13,
|
|
5604
|
+
"data-loading": t14,
|
|
5569
5605
|
...rest,
|
|
5570
|
-
children: [
|
|
5571
|
-
});
|
|
5572
|
-
$[
|
|
5573
|
-
$[
|
|
5574
|
-
$[
|
|
5575
|
-
$[
|
|
5576
|
-
$[
|
|
5577
|
-
$[
|
|
5578
|
-
$[
|
|
5579
|
-
$[
|
|
5580
|
-
$[
|
|
5581
|
-
$[
|
|
5582
|
-
$[
|
|
5583
|
-
$[
|
|
5584
|
-
$[
|
|
5585
|
-
$[
|
|
5586
|
-
$[
|
|
5587
|
-
$[
|
|
5588
|
-
$[
|
|
5589
|
-
|
|
5590
|
-
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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(
|
|
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$
|
|
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
|
-
|
|
13110
|
-
|
|
13111
|
-
|
|
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
|
-
|
|
13116
|
-
|
|
13117
|
-
|
|
13118
|
-
|
|
13119
|
-
|
|
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:
|
|
13164
|
+
size: t7
|
|
13124
13165
|
})
|
|
13125
13166
|
});
|
|
13126
|
-
$[6] = t6;
|
|
13127
13167
|
$[7] = t7;
|
|
13128
|
-
|
|
13129
|
-
|
|
13130
|
-
|
|
13131
|
-
|
|
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
|
-
$[
|
|
13140
|
-
$[
|
|
13141
|
-
$[
|
|
13142
|
-
$[
|
|
13143
|
-
} else
|
|
13180
|
+
$[9] = clearable;
|
|
13181
|
+
$[10] = onClear;
|
|
13182
|
+
$[11] = size;
|
|
13183
|
+
$[12] = t9;
|
|
13184
|
+
} else t9 = $[12];
|
|
13144
13185
|
const T0 = Portal;
|
|
13145
|
-
const
|
|
13146
|
-
const
|
|
13147
|
-
const
|
|
13148
|
-
const
|
|
13149
|
-
let
|
|
13150
|
-
if ($[
|
|
13151
|
-
|
|
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
|
-
$[
|
|
13165
|
-
$[
|
|
13166
|
-
$[
|
|
13167
|
-
} else
|
|
13168
|
-
const
|
|
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
|
|
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
|
|
13199
|
-
if ($[
|
|
13200
|
-
|
|
13201
|
-
className:
|
|
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
|
-
$[
|
|
13209
|
-
$[
|
|
13210
|
-
$[17] = t13;
|
|
13249
|
+
$[16] = t12.Content;
|
|
13250
|
+
$[17] = t13.content;
|
|
13211
13251
|
$[18] = t14;
|
|
13212
13252
|
$[19] = t15;
|
|
13213
13253
|
$[20] = t16;
|
|
13214
|
-
|
|
13215
|
-
|
|
13216
|
-
|
|
13217
|
-
|
|
13218
|
-
|
|
13219
|
-
|
|
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
|
-
$[
|
|
13222
|
-
$[
|
|
13223
|
-
$[23] = t9.Positioner;
|
|
13262
|
+
$[22] = t10.Positioner;
|
|
13263
|
+
$[23] = t11.viewport;
|
|
13224
13264
|
$[24] = t17;
|
|
13225
|
-
|
|
13226
|
-
|
|
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 ($[
|
|
13235
|
-
t19 = /* @__PURE__ */ jsx(
|
|
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:
|
|
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(),
|
|
13260
|
-
}),
|
|
13300
|
+
children: [renderTriggerValue(), t8]
|
|
13301
|
+
}), t9]
|
|
13261
13302
|
}),
|
|
13262
|
-
|
|
13263
|
-
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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-
|
|
18043
|
-
|
|
18044
|
-
|
|
18045
|
-
|
|
18046
|
-
|
|
18047
|
-
|
|
18048
|
-
|
|
18049
|
-
|
|
18050
|
-
|
|
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-
|
|
18055
|
-
|
|
18056
|
-
"
|
|
18057
|
-
"
|
|
18058
|
-
"
|
|
18059
|
-
|
|
18060
|
-
|
|
18061
|
-
|
|
18062
|
-
|
|
18063
|
-
|
|
18064
|
-
|
|
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
|
-
*
|
|
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
|
|
18076
|
-
const $ = c(
|
|
18077
|
-
|
|
18078
|
-
|
|
18079
|
-
|
|
18080
|
-
|
|
18081
|
-
|
|
18082
|
-
|
|
18083
|
-
|
|
18084
|
-
|
|
18085
|
-
|
|
18086
|
-
|
|
18087
|
-
|
|
18088
|
-
|
|
18089
|
-
$[
|
|
18090
|
-
$[
|
|
18091
|
-
|
|
18092
|
-
|
|
18093
|
-
|
|
18094
|
-
|
|
18095
|
-
|
|
18096
|
-
$[
|
|
18097
|
-
$[
|
|
18098
|
-
|
|
18099
|
-
|
|
18100
|
-
|
|
18101
|
-
|
|
18102
|
-
|
|
18103
|
-
|
|
18104
|
-
|
|
18105
|
-
|
|
18106
|
-
|
|
18107
|
-
|
|
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/
|
|
19972
|
-
|
|
19973
|
-
const
|
|
19974
|
-
|
|
19975
|
-
|
|
19976
|
-
|
|
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
|
-
*
|
|
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
|
|
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
|
|
20017
|
-
if (
|
|
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
|
-
|
|
20026
|
-
|
|
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/
|
|
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
|
-
*
|
|
20037
|
-
*
|
|
20038
|
-
*
|
|
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
|
|
20046
|
-
|
|
20047
|
-
|
|
20048
|
-
|
|
20049
|
-
|
|
20050
|
-
|
|
20051
|
-
|
|
20052
|
-
|
|
20053
|
-
|
|
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/
|
|
20496
|
+
//#region src/components/ds-table/utils/column-size.ts
|
|
20497
|
+
const DEFAULT_MAX_COLUMN_SIZE = Number.MAX_SAFE_INTEGER;
|
|
20071
20498
|
/**
|
|
20072
|
-
*
|
|
20073
|
-
* width of its visible leaf columns.
|
|
20499
|
+
* Whether a column should use a fixed width rather than fill (`flex: 1`).
|
|
20074
20500
|
*
|
|
20075
|
-
*
|
|
20076
|
-
*
|
|
20077
|
-
*
|
|
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
|
|
20080
|
-
|
|
20081
|
-
|
|
20082
|
-
|
|
20083
|
-
|
|
20084
|
-
|
|
20085
|
-
|
|
20086
|
-
|
|
20087
|
-
|
|
20088
|
-
|
|
20089
|
-
|
|
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
|
-
|
|
20094
|
-
|
|
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
|
-
*
|
|
20101
|
-
*
|
|
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
|
|
20104
|
-
|
|
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
|
|
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__ */
|
|
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:
|
|
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 =
|
|
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__ */
|
|
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
|
-
|
|
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
|
|
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:
|
|
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 = (
|
|
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
|
|
20968
|
-
const
|
|
20969
|
-
const
|
|
20970
|
-
|
|
20971
|
-
|
|
20972
|
-
|
|
20973
|
-
|
|
20974
|
-
|
|
20975
|
-
|
|
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
|
-
|
|
21015
|
-
|
|
21016
|
-
|
|
21017
|
-
|
|
21018
|
-
|
|
21019
|
-
|
|
21020
|
-
|
|
21021
|
-
|
|
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
|
-
|
|
21046
|
-
|
|
21047
|
-
|
|
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
|
-
|
|
21093
|
-
|
|
21094
|
-
|
|
21095
|
-
|
|
21096
|
-
|
|
21097
|
-
|
|
21098
|
-
|
|
21099
|
-
|
|
21100
|
-
|
|
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__ */
|
|
21126
|
-
ref:
|
|
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
|
-
|
|
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(
|
|
21139
|
-
|
|
21140
|
-
|
|
21141
|
-
|
|
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
|