@dmsi/wedgekit-react 0.0.369 → 0.0.371
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/dist/{chunk-RLLQRVM7.js → chunk-2H35FETR.js} +18 -10
- package/dist/chunk-2IKT6IHB.js +190 -0
- package/dist/chunk-4UNWXB4A.js +89 -0
- package/dist/chunk-5IFPG6TS.js +17 -0
- package/dist/{chunk-6GAYJCFE.js → chunk-6DPFKSCT.js} +1 -1
- package/dist/{chunk-ZFOANBWG.js → chunk-AG43RS4Q.js} +2 -1
- package/dist/chunk-AJ5M6MVX.js +7 -0
- package/dist/chunk-AT4AWD6B.js +44 -0
- package/dist/chunk-BQNPOGD5.js +105 -0
- package/dist/chunk-CQFPNZTN.js +172 -0
- package/dist/chunk-EJSPFQCY.js +29 -0
- package/dist/chunk-ER6RCOH3.js +97 -0
- package/dist/{chunk-4VER5OEU.js → chunk-FBE2HGEF.js} +35 -11
- package/dist/chunk-HPQWEZJL.js +45 -0
- package/dist/{chunk-URCLLHO5.js → chunk-IBX6DVHU.js} +376 -102
- package/dist/{chunk-I3WFZOFY.js → chunk-J5V2JRIK.js} +1 -1
- package/dist/chunk-JGJUVJKD.js +283 -0
- package/dist/chunk-KEMCFN4U.js +78 -0
- package/dist/chunk-M6TSTDNZ.js +22 -0
- package/dist/chunk-M7INAUAJ.js +140 -0
- package/dist/chunk-MBZ55T2D.js +51 -0
- package/dist/chunk-N6PNLLNS.js +77 -0
- package/dist/{chunk-ZA5E7ZYM.js → chunk-NXGUDYRR.js} +1 -1
- package/dist/chunk-P36QKH26.js +143 -0
- package/dist/chunk-PTRZHGHA.js +89 -0
- package/dist/chunk-QVWYTQKL.js +29 -0
- package/dist/{chunk-6CPGOW6J.js → chunk-T36HX6QY.js} +6 -4
- package/dist/chunk-U6PUOGG4.js +114 -0
- package/dist/{chunk-NQXZBWDZ.js → chunk-V6U7LU6M.js} +15 -6
- package/dist/chunk-VJVY6NPF.js +32 -0
- package/dist/chunk-VVXPGI2P.js +61 -0
- package/dist/{chunk-ARQBSR3I.js → chunk-YCKRVNJ3.js} +4 -4
- package/dist/chunk-YYHQLQDQ.js +68 -0
- package/dist/components/Accordion.cjs +47 -14
- package/dist/components/Accordion.js +2 -2
- package/dist/components/CalendarRange.cjs +700 -46
- package/dist/components/CalendarRange.css +186 -3
- package/dist/components/CalendarRange.js +43 -11
- package/dist/components/CompactImagesPreview.cjs +485 -0
- package/dist/components/CompactImagesPreview.js +13 -0
- package/dist/components/ContentTabs.cjs +3 -2
- package/dist/components/ContentTabs.js +3 -2
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.cjs +4687 -0
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.css +5051 -0
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js +62 -0
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.cjs +4687 -0
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.css +5051 -0
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.js +62 -0
- package/dist/components/DataGrid/PinnedColumns.cjs +4687 -0
- package/dist/components/DataGrid/PinnedColumns.css +5051 -0
- package/dist/components/DataGrid/PinnedColumns.js +62 -0
- package/dist/components/DataGrid/TableBody/LoadingCell.cjs +4689 -0
- package/dist/components/DataGrid/TableBody/LoadingCell.css +5051 -0
- package/dist/components/DataGrid/TableBody/LoadingCell.js +62 -0
- package/dist/components/DataGrid/TableBody/TableBodyRow.cjs +4689 -0
- package/dist/components/DataGrid/TableBody/TableBodyRow.css +5051 -0
- package/dist/components/DataGrid/TableBody/TableBodyRow.js +62 -0
- package/dist/components/DataGrid/TableBody/index.cjs +4689 -0
- package/dist/components/DataGrid/TableBody/index.css +5051 -0
- package/dist/components/DataGrid/TableBody/index.js +62 -0
- package/dist/components/DataGrid/index.cjs +4692 -0
- package/dist/components/DataGrid/index.css +5051 -0
- package/dist/components/DataGrid/index.js +65 -0
- package/dist/components/DataGrid/utils.cjs +4687 -0
- package/dist/components/DataGrid/utils.css +5051 -0
- package/dist/components/DataGrid/utils.js +62 -0
- package/dist/components/DataGridCell.js +6 -6
- package/dist/components/DateInput.cjs +721 -67
- package/dist/components/DateInput.css +186 -3
- package/dist/components/DateInput.js +45 -13
- package/dist/components/DateRangeInput.cjs +721 -67
- package/dist/components/DateRangeInput.css +186 -3
- package/dist/components/DateRangeInput.js +45 -13
- package/dist/components/FilterGroup.js +3 -3
- package/dist/components/Grid.cjs +3 -1
- package/dist/components/Grid.js +3 -92
- package/dist/components/ImagePlaceholder.cjs +65 -0
- package/dist/components/ImagePlaceholder.js +7 -0
- package/dist/components/Input.js +2 -2
- package/dist/components/MenuOption.js +2 -2
- package/dist/components/MobileDataGrid/ColumnList.cjs +845 -0
- package/dist/components/MobileDataGrid/ColumnList.js +17 -0
- package/dist/components/MobileDataGrid/ColumnSelector/index.cjs +4797 -0
- package/dist/components/MobileDataGrid/ColumnSelector/index.css +5051 -0
- package/dist/components/MobileDataGrid/ColumnSelector/index.js +62 -0
- package/dist/components/MobileDataGrid/GridContextProvider/GridContext.cjs +31 -0
- package/dist/components/MobileDataGrid/GridContextProvider/GridContext.js +7 -0
- package/dist/components/MobileDataGrid/GridContextProvider/index.cjs +177 -0
- package/dist/components/MobileDataGrid/GridContextProvider/index.js +8 -0
- package/dist/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.cjs +269 -0
- package/dist/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.js +9 -0
- package/dist/components/MobileDataGrid/MobileDataGridCard/index.cjs +790 -0
- package/dist/components/MobileDataGrid/MobileDataGridCard/index.js +16 -0
- package/dist/components/MobileDataGrid/MobileDataGridHeader.cjs +5059 -0
- package/dist/components/MobileDataGrid/MobileDataGridHeader.css +5051 -0
- package/dist/components/MobileDataGrid/MobileDataGridHeader.js +62 -0
- package/dist/components/MobileDataGrid/RowDetailModalProvider/ModalContent.cjs +509 -0
- package/dist/components/MobileDataGrid/RowDetailModalProvider/ModalContent.js +13 -0
- package/dist/components/MobileDataGrid/RowDetailModalProvider/index.cjs +1261 -0
- package/dist/components/MobileDataGrid/RowDetailModalProvider/index.js +27 -0
- package/dist/components/MobileDataGrid/index.cjs +5521 -0
- package/dist/components/MobileDataGrid/index.css +5051 -0
- package/dist/components/MobileDataGrid/index.js +62 -0
- package/dist/components/Modal.cjs +24 -13
- package/dist/components/Modal.js +3 -3
- package/dist/components/ModalHeader.cjs +6 -4
- package/dist/components/ModalHeader.js +1 -1
- package/dist/components/ModalScrim.cjs +2 -1
- package/dist/components/ModalScrim.js +1 -1
- package/dist/components/NestedMenu.js +4 -4
- package/dist/components/Notification.cjs +15 -6
- package/dist/components/Notification.js +1 -1
- package/dist/components/PDFViewer/DownloadIcon.cjs +394 -0
- package/dist/components/PDFViewer/DownloadIcon.js +10 -0
- package/dist/components/PDFViewer/PDFElement.cjs +515 -0
- package/dist/components/PDFViewer/PDFElement.js +11 -0
- package/dist/components/{MobileDataGrid.cjs → PDFViewer/PDFNavigation.cjs} +318 -402
- package/dist/components/PDFViewer/PDFNavigation.js +13 -0
- package/dist/components/PDFViewer/PDFPage.cjs +56 -0
- package/dist/components/PDFViewer/PDFPage.js +7 -0
- package/dist/components/{PDFViewer.cjs → PDFViewer/index.cjs} +290 -202
- package/dist/components/PDFViewer/index.js +29 -0
- package/dist/components/Password.js +2 -2
- package/dist/components/ProductImagePreview/CarouselPagination.cjs +75 -0
- package/dist/components/ProductImagePreview/CarouselPagination.js +7 -0
- package/dist/components/ProductImagePreview/MobileImageCarousel.cjs +214 -0
- package/dist/components/ProductImagePreview/MobileImageCarousel.js +7 -0
- package/dist/components/ProductImagePreview/ProductPrimaryImage.cjs +255 -0
- package/dist/components/ProductImagePreview/ProductPrimaryImage.js +9 -0
- package/dist/components/ProductImagePreview/Thumbnail.cjs +105 -0
- package/dist/components/ProductImagePreview/Thumbnail.js +8 -0
- package/dist/components/ProductImagePreview/ZoomWindow.cjs +198 -0
- package/dist/components/ProductImagePreview/ZoomWindow.js +8 -0
- package/dist/components/ProductImagePreview/index.cjs +1369 -0
- package/dist/components/ProductImagePreview/index.js +22 -0
- package/dist/components/Search.js +3 -3
- package/dist/components/Select.js +3 -3
- package/dist/components/SideMenuGroup.cjs +15 -6
- package/dist/components/SideMenuGroup.js +1 -1
- package/dist/components/SideMenuItem.cjs +15 -6
- package/dist/components/SideMenuItem.js +1 -1
- package/dist/components/SkeletonParagraph.cjs +33 -0
- package/dist/components/SkeletonParagraph.js +10 -0
- package/dist/components/Stack.cjs +15 -6
- package/dist/components/Stack.js +1 -1
- package/dist/components/Stepper.cjs +61 -53
- package/dist/components/Stepper.js +63 -55
- package/dist/components/Surface.js +3 -39
- package/dist/components/Swatch.cjs +15 -6
- package/dist/components/Swatch.js +4 -4
- package/dist/components/Time.cjs +15 -6
- package/dist/components/Time.js +5 -5
- package/dist/components/Upload.cjs +15 -6
- package/dist/components/Upload.js +1 -1
- package/dist/components/index.cjs +2559 -14
- package/dist/components/index.css +186 -3
- package/dist/components/index.js +57 -14
- package/dist/index.css +186 -3
- package/package.json +1 -1
- package/src/components/Accordion.tsx +23 -4
- package/src/components/CompactImagesPreview.tsx +99 -0
- package/src/components/ContentTabs.tsx +3 -1
- package/src/components/DataGrid/types.ts +5 -0
- package/src/components/Grid.tsx +2 -0
- package/src/components/ImagePlaceholder.tsx +22 -0
- package/src/components/MobileDataGrid/ColumnList.tsx +66 -0
- package/src/components/MobileDataGrid/ColumnSelector/index.tsx +97 -0
- package/src/components/MobileDataGrid/GridContextProvider/GridContext.tsx +25 -0
- package/src/components/MobileDataGrid/GridContextProvider/index.tsx +132 -0
- package/src/components/MobileDataGrid/GridContextProvider/useGridContext.ts +10 -0
- package/src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx +20 -0
- package/src/components/MobileDataGrid/MobileDataGridCard/index.tsx +129 -0
- package/src/components/MobileDataGrid/MobileDataGridHeader.tsx +80 -0
- package/src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx +42 -0
- package/src/components/MobileDataGrid/RowDetailModalProvider/index.tsx +68 -0
- package/src/components/MobileDataGrid/dataGridReducer.ts +55 -0
- package/src/components/MobileDataGrid/index.tsx +92 -0
- package/src/components/MobileDataGrid/types.ts +4 -0
- package/src/components/Modal.tsx +31 -12
- package/src/components/ModalButtons.tsx +1 -1
- package/src/components/ModalHeader.tsx +5 -2
- package/src/components/ModalScrim.tsx +3 -2
- package/src/components/PDFViewer/DownloadIcon.tsx +22 -0
- package/src/components/PDFViewer/PDFElement.tsx +90 -0
- package/src/components/PDFViewer/PDFNavigation.tsx +68 -0
- package/src/components/PDFViewer/PDFPage.tsx +34 -0
- package/src/components/PDFViewer/index.tsx +128 -0
- package/src/components/ProductImagePreview/CarouselPagination.tsx +54 -0
- package/src/components/ProductImagePreview/MobileImageCarousel.tsx +226 -0
- package/src/components/ProductImagePreview/ProductPrimaryImage.tsx +218 -0
- package/src/components/ProductImagePreview/Thumbnail.tsx +49 -0
- package/src/components/ProductImagePreview/ZoomWindow.tsx +136 -0
- package/src/components/ProductImagePreview/index.tsx +182 -0
- package/src/components/ProductImagePreview/useProductImagePreview.ts +211 -0
- package/src/components/SkeletonParagraph.tsx +5 -0
- package/src/components/Stack.tsx +29 -6
- package/src/components/Stepper.tsx +5 -1
- package/src/components/index.ts +4 -0
- package/src/types.ts +2 -1
- package/dist/components/MobileDataGrid.js +0 -150
- package/dist/components/PDFViewer.js +0 -250
- package/src/components/MobileDataGrid.tsx +0 -163
- package/src/components/PDFViewer.tsx +0 -264
- package/dist/{chunk-OXSBIBGT.js → chunk-CKQNJNU3.js} +3 -3
- package/dist/{chunk-RJUN52HJ.js → chunk-ZL5X7KP6.js} +3 -3
|
@@ -0,0 +1,4797 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/components/MobileDataGrid/ColumnSelector/index.tsx
|
|
60
|
+
var ColumnSelector_exports = {};
|
|
61
|
+
__export(ColumnSelector_exports, {
|
|
62
|
+
ColumnSelector: () => ColumnSelector
|
|
63
|
+
});
|
|
64
|
+
module.exports = __toCommonJS(ColumnSelector_exports);
|
|
65
|
+
var import_react34 = require("react");
|
|
66
|
+
|
|
67
|
+
// src/components/DataGridCell.tsx
|
|
68
|
+
var import_sortable = require("@dnd-kit/sortable");
|
|
69
|
+
|
|
70
|
+
// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
|
|
71
|
+
var import_react = require("react");
|
|
72
|
+
var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
73
|
+
var CSS = /* @__PURE__ */ Object.freeze({
|
|
74
|
+
Translate: {
|
|
75
|
+
toString(transform) {
|
|
76
|
+
if (!transform) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const {
|
|
80
|
+
x,
|
|
81
|
+
y
|
|
82
|
+
} = transform;
|
|
83
|
+
return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
Scale: {
|
|
87
|
+
toString(transform) {
|
|
88
|
+
if (!transform) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
const {
|
|
92
|
+
scaleX,
|
|
93
|
+
scaleY
|
|
94
|
+
} = transform;
|
|
95
|
+
return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
Transform: {
|
|
99
|
+
toString(transform) {
|
|
100
|
+
if (!transform) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
Transition: {
|
|
107
|
+
toString(_ref) {
|
|
108
|
+
let {
|
|
109
|
+
property,
|
|
110
|
+
duration,
|
|
111
|
+
easing
|
|
112
|
+
} = _ref;
|
|
113
|
+
return property + " " + duration + "ms " + easing;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
// src/components/DataGridCell.tsx
|
|
119
|
+
var import_clsx8 = __toESM(require("clsx"), 1);
|
|
120
|
+
var import_react11 = require("react");
|
|
121
|
+
|
|
122
|
+
// src/classNames.ts
|
|
123
|
+
var import_clsx = __toESM(require("clsx"), 1);
|
|
124
|
+
var typography = {
|
|
125
|
+
display1: (0, import_clsx.default)(
|
|
126
|
+
"font-sans font-semibold",
|
|
127
|
+
"text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
|
|
128
|
+
"leading-display-1-mobile desktop:leading-display-1-desktop"
|
|
129
|
+
),
|
|
130
|
+
display2: (0, import_clsx.default)(
|
|
131
|
+
"font-sans font-bold",
|
|
132
|
+
"text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
|
|
133
|
+
"leading-display-2-mobile desktop:leading-display-2-desktop"
|
|
134
|
+
),
|
|
135
|
+
heading1: (0, import_clsx.default)(
|
|
136
|
+
"font-sans font-semibold",
|
|
137
|
+
"text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
|
|
138
|
+
"leading-heading-1-mobile desktop:leading-heading-1-desktop"
|
|
139
|
+
),
|
|
140
|
+
heading2: (0, import_clsx.default)(
|
|
141
|
+
"font-sans font-normal",
|
|
142
|
+
"text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
|
|
143
|
+
"leading-heading-2-mobile desktop:leading-heading-2-desktop"
|
|
144
|
+
),
|
|
145
|
+
heading3: (0, import_clsx.default)(
|
|
146
|
+
"font-sans font-semibold",
|
|
147
|
+
"text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
|
|
148
|
+
"leading-heading-3-mobile desktop:leading-heading-3-desktop"
|
|
149
|
+
),
|
|
150
|
+
subheader: (0, import_clsx.default)(
|
|
151
|
+
"font-sans font-semibold",
|
|
152
|
+
"text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
|
|
153
|
+
"leading-subheader-mobile desktop:leading-subheader-desktop"
|
|
154
|
+
),
|
|
155
|
+
link: (0, import_clsx.default)(
|
|
156
|
+
"font-sans font-normal",
|
|
157
|
+
"text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
|
|
158
|
+
"leading-link-mobile desktop:leading-link-desktop"
|
|
159
|
+
),
|
|
160
|
+
buttonLabel: (0, import_clsx.default)(
|
|
161
|
+
"font-sans font-semibold",
|
|
162
|
+
"text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
|
|
163
|
+
"leading-label-mobile desktop:leading-label-desktop"
|
|
164
|
+
),
|
|
165
|
+
label: (0, import_clsx.default)(
|
|
166
|
+
"font-sans font-semibold",
|
|
167
|
+
"text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
|
|
168
|
+
"leading-label-mobile desktop:leading-label-desktop"
|
|
169
|
+
),
|
|
170
|
+
paragraph: (0, import_clsx.default)(
|
|
171
|
+
"font-sans font-normal",
|
|
172
|
+
"text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
|
|
173
|
+
"leading-paragraph-mobile desktop:leading-paragraph-desktop"
|
|
174
|
+
),
|
|
175
|
+
caption: (0, import_clsx.default)(
|
|
176
|
+
"font-sans font-normal",
|
|
177
|
+
"text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
|
|
178
|
+
"leading-caption-mobile desktop:leading-caption-desktop"
|
|
179
|
+
),
|
|
180
|
+
breadcrumb: (0, import_clsx.default)(
|
|
181
|
+
"font-sans font-normal",
|
|
182
|
+
"text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
|
|
183
|
+
"leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
|
|
184
|
+
)
|
|
185
|
+
};
|
|
186
|
+
var baseTransition = (0, import_clsx.default)(
|
|
187
|
+
"transition-colors duration-100 ease-in-out"
|
|
188
|
+
);
|
|
189
|
+
var componentGap = (0, import_clsx.default)(
|
|
190
|
+
"gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
|
|
191
|
+
);
|
|
192
|
+
var paddingUsingComponentGap = (0, import_clsx.default)(
|
|
193
|
+
"p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
|
|
194
|
+
);
|
|
195
|
+
var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
|
|
196
|
+
"px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
|
|
197
|
+
);
|
|
198
|
+
var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
|
|
199
|
+
"py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
|
|
200
|
+
);
|
|
201
|
+
var componentPadding = (0, import_clsx.default)(
|
|
202
|
+
"p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
|
|
203
|
+
);
|
|
204
|
+
var componentPaddingBottom = (0, import_clsx.default)(
|
|
205
|
+
"pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
|
|
206
|
+
);
|
|
207
|
+
var componentPaddingX = (0, import_clsx.default)(
|
|
208
|
+
"px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
|
|
209
|
+
);
|
|
210
|
+
var componentPaddingY = (0, import_clsx.default)(
|
|
211
|
+
"py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
|
|
212
|
+
);
|
|
213
|
+
var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
|
|
214
|
+
"px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
|
|
215
|
+
);
|
|
216
|
+
var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
|
|
217
|
+
"py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
|
|
218
|
+
);
|
|
219
|
+
var componentPaddingMinusBorder = (0, import_clsx.default)(
|
|
220
|
+
"p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
|
|
221
|
+
);
|
|
222
|
+
var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
|
|
223
|
+
"p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
|
|
224
|
+
);
|
|
225
|
+
var layoutPaddding = (0, import_clsx.default)(
|
|
226
|
+
"p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
|
|
227
|
+
);
|
|
228
|
+
var layoutPaddingBottom = (0, import_clsx.default)(
|
|
229
|
+
"pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
|
|
230
|
+
);
|
|
231
|
+
var layoutPaddingY = (0, import_clsx.default)(
|
|
232
|
+
"py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
|
|
233
|
+
);
|
|
234
|
+
var containerPaddingX = (0, import_clsx.default)(
|
|
235
|
+
"px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
|
|
236
|
+
);
|
|
237
|
+
var containerPaddingY = (0, import_clsx.default)(
|
|
238
|
+
"py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
|
|
239
|
+
);
|
|
240
|
+
var layoutGroupGapPaddingY = (0, import_clsx.default)(
|
|
241
|
+
"py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
|
|
242
|
+
);
|
|
243
|
+
var layoutGroupGap = (0, import_clsx.default)(
|
|
244
|
+
"gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
|
|
245
|
+
);
|
|
246
|
+
var layoutGap = (0, import_clsx.default)(
|
|
247
|
+
"gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
|
|
248
|
+
);
|
|
249
|
+
var gapUsingContainerPadding = (0, import_clsx.default)(
|
|
250
|
+
"gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
// src/components/MenuOption.tsx
|
|
254
|
+
var import_clsx5 = __toESM(require("clsx"), 1);
|
|
255
|
+
var import_react6 = require("react");
|
|
256
|
+
|
|
257
|
+
// src/components/Label.tsx
|
|
258
|
+
var import_clsx2 = __toESM(require("clsx"), 1);
|
|
259
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
260
|
+
var Label = (_a) => {
|
|
261
|
+
var _b = _a, {
|
|
262
|
+
as = "span",
|
|
263
|
+
padded,
|
|
264
|
+
className,
|
|
265
|
+
color,
|
|
266
|
+
align,
|
|
267
|
+
id,
|
|
268
|
+
testid
|
|
269
|
+
} = _b, props = __objRest(_b, [
|
|
270
|
+
"as",
|
|
271
|
+
"padded",
|
|
272
|
+
"className",
|
|
273
|
+
"color",
|
|
274
|
+
"align",
|
|
275
|
+
"id",
|
|
276
|
+
"testid"
|
|
277
|
+
]);
|
|
278
|
+
const Element = as;
|
|
279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
280
|
+
Element,
|
|
281
|
+
__spreadProps(__spreadValues({
|
|
282
|
+
id,
|
|
283
|
+
"data-testid": testid,
|
|
284
|
+
className: (0, import_clsx2.default)(
|
|
285
|
+
typography.label,
|
|
286
|
+
align === "left" && "text-left",
|
|
287
|
+
align === "center" && "text-center",
|
|
288
|
+
align === "right" && "text-right",
|
|
289
|
+
className,
|
|
290
|
+
padded && componentPaddingXUsingComponentGap
|
|
291
|
+
)
|
|
292
|
+
}, props), {
|
|
293
|
+
style: __spreadProps(__spreadValues({}, props.style), {
|
|
294
|
+
color: color ? `var(--color-${color})` : void 0
|
|
295
|
+
})
|
|
296
|
+
})
|
|
297
|
+
);
|
|
298
|
+
};
|
|
299
|
+
Label.displayName = "Label";
|
|
300
|
+
|
|
301
|
+
// src/components/Paragraph.tsx
|
|
302
|
+
var import_clsx3 = __toESM(require("clsx"), 1);
|
|
303
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
304
|
+
var Paragraph = (_a) => {
|
|
305
|
+
var _b = _a, {
|
|
306
|
+
className,
|
|
307
|
+
color,
|
|
308
|
+
padded,
|
|
309
|
+
align = "left",
|
|
310
|
+
tall,
|
|
311
|
+
addOverflow,
|
|
312
|
+
children,
|
|
313
|
+
as = "p",
|
|
314
|
+
id,
|
|
315
|
+
testid
|
|
316
|
+
} = _b, props = __objRest(_b, [
|
|
317
|
+
"className",
|
|
318
|
+
"color",
|
|
319
|
+
"padded",
|
|
320
|
+
"align",
|
|
321
|
+
"tall",
|
|
322
|
+
"addOverflow",
|
|
323
|
+
"children",
|
|
324
|
+
"as",
|
|
325
|
+
"id",
|
|
326
|
+
"testid"
|
|
327
|
+
]);
|
|
328
|
+
const Element = as;
|
|
329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
330
|
+
Element,
|
|
331
|
+
__spreadProps(__spreadValues({
|
|
332
|
+
id,
|
|
333
|
+
"data-testid": testid
|
|
334
|
+
}, props), {
|
|
335
|
+
className: (0, import_clsx3.default)(
|
|
336
|
+
typography.paragraph,
|
|
337
|
+
className,
|
|
338
|
+
padded && componentPaddingXUsingComponentGap,
|
|
339
|
+
align === "left" && "text-left",
|
|
340
|
+
align === "center" && "text-center",
|
|
341
|
+
align === "right" && "text-right",
|
|
342
|
+
tall && "!leading-6",
|
|
343
|
+
addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
|
|
344
|
+
),
|
|
345
|
+
style: __spreadProps(__spreadValues({}, props.style), {
|
|
346
|
+
color: color ? `var(--color-${color})` : void 0
|
|
347
|
+
}),
|
|
348
|
+
children
|
|
349
|
+
})
|
|
350
|
+
);
|
|
351
|
+
};
|
|
352
|
+
Paragraph.displayName = "Paragraph";
|
|
353
|
+
|
|
354
|
+
// src/components/Icon.tsx
|
|
355
|
+
var import_clsx4 = __toESM(require("clsx"), 1);
|
|
356
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
357
|
+
function Icon(_a) {
|
|
358
|
+
var _b = _a, {
|
|
359
|
+
name,
|
|
360
|
+
size = 24,
|
|
361
|
+
variant = "outline",
|
|
362
|
+
testid
|
|
363
|
+
} = _b, props = __objRest(_b, [
|
|
364
|
+
"name",
|
|
365
|
+
"size",
|
|
366
|
+
"variant",
|
|
367
|
+
"testid"
|
|
368
|
+
]);
|
|
369
|
+
const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
|
|
370
|
+
const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
|
|
371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
372
|
+
"span",
|
|
373
|
+
__spreadProps(__spreadValues({}, props), {
|
|
374
|
+
"data-testid": testid,
|
|
375
|
+
className: (0, import_clsx4.default)(
|
|
376
|
+
"icon",
|
|
377
|
+
`icon-${size}`,
|
|
378
|
+
// size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
|
|
379
|
+
props.className
|
|
380
|
+
),
|
|
381
|
+
style: __spreadValues({
|
|
382
|
+
fontVariationSettings: variantStyle + `, ${weightStyle}`
|
|
383
|
+
}, props.style),
|
|
384
|
+
children: name
|
|
385
|
+
})
|
|
386
|
+
);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
// src/hooks/useKeydown.ts
|
|
390
|
+
var import_react2 = require("react");
|
|
391
|
+
|
|
392
|
+
// src/hooks/useInfiniteScroll.tsx
|
|
393
|
+
var import_react3 = require("react");
|
|
394
|
+
function useInfiniteScroll({
|
|
395
|
+
containerRef,
|
|
396
|
+
onLoadMore,
|
|
397
|
+
isLoading,
|
|
398
|
+
offset = 50,
|
|
399
|
+
enabled = true
|
|
400
|
+
// ✅ Add this
|
|
401
|
+
}) {
|
|
402
|
+
(0, import_react3.useEffect)(() => {
|
|
403
|
+
if (!enabled) return;
|
|
404
|
+
const handleScroll = () => {
|
|
405
|
+
const el2 = containerRef.current;
|
|
406
|
+
if (!el2 || isLoading) return;
|
|
407
|
+
const { scrollTop, scrollHeight, clientHeight } = el2;
|
|
408
|
+
const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
|
|
409
|
+
if (isNearBottom) {
|
|
410
|
+
onLoadMore();
|
|
411
|
+
}
|
|
412
|
+
};
|
|
413
|
+
const el = containerRef.current;
|
|
414
|
+
if (el) el.addEventListener("scroll", handleScroll);
|
|
415
|
+
return () => {
|
|
416
|
+
if (el) el.removeEventListener("scroll", handleScroll);
|
|
417
|
+
};
|
|
418
|
+
}, [containerRef, onLoadMore, isLoading, offset, enabled]);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
// src/hooks/useMatchesMedia.ts
|
|
422
|
+
var import_react4 = require("react");
|
|
423
|
+
var useMatchesMedia = (query) => {
|
|
424
|
+
const [matches, setMatches] = (0, import_react4.useState)();
|
|
425
|
+
(0, import_react4.useLayoutEffect)(() => {
|
|
426
|
+
const mediaQueryList = window.matchMedia(query);
|
|
427
|
+
const listener = () => setMatches(mediaQueryList.matches);
|
|
428
|
+
listener();
|
|
429
|
+
mediaQueryList.addEventListener("change", listener);
|
|
430
|
+
return () => mediaQueryList.removeEventListener("change", listener);
|
|
431
|
+
}, [query]);
|
|
432
|
+
return matches;
|
|
433
|
+
};
|
|
434
|
+
var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
|
|
435
|
+
|
|
436
|
+
// src/utils/formatting.tsx
|
|
437
|
+
function getDecimalPlaceholder(decimals) {
|
|
438
|
+
if (!decimals || decimals <= 0) {
|
|
439
|
+
return {};
|
|
440
|
+
}
|
|
441
|
+
return {
|
|
442
|
+
placeholder: `0.${"0".repeat(decimals)}`
|
|
443
|
+
};
|
|
444
|
+
}
|
|
445
|
+
function formatDecimalValue(value, decimals) {
|
|
446
|
+
if (!value || value === "") {
|
|
447
|
+
return "";
|
|
448
|
+
}
|
|
449
|
+
const numValue = typeof value === "string" ? parseFloat(value) : value;
|
|
450
|
+
if (isNaN(numValue)) {
|
|
451
|
+
return "";
|
|
452
|
+
}
|
|
453
|
+
if (!decimals || decimals <= 0) {
|
|
454
|
+
return String(Math.round(numValue));
|
|
455
|
+
}
|
|
456
|
+
return numValue.toFixed(decimals);
|
|
457
|
+
}
|
|
458
|
+
function formatCurrencyDisplay(value) {
|
|
459
|
+
if (!value || value === "") {
|
|
460
|
+
return "";
|
|
461
|
+
}
|
|
462
|
+
const parts = value.split(".");
|
|
463
|
+
const integerPart = parts[0];
|
|
464
|
+
const decimalPart = parts[1];
|
|
465
|
+
const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
466
|
+
return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
// src/utils/date.ts
|
|
470
|
+
function parseDateParts(dateString) {
|
|
471
|
+
const [yearStr, monthStr, dayStr] = dateString.split("-");
|
|
472
|
+
if (!yearStr || !monthStr || !dayStr) {
|
|
473
|
+
return null;
|
|
474
|
+
}
|
|
475
|
+
const year = parseInt(yearStr, 10);
|
|
476
|
+
const month = parseInt(monthStr, 10);
|
|
477
|
+
const day = parseInt(dayStr, 10);
|
|
478
|
+
if (isNaN(year) || isNaN(month) || isNaN(day)) {
|
|
479
|
+
return null;
|
|
480
|
+
}
|
|
481
|
+
return { year, month, day };
|
|
482
|
+
}
|
|
483
|
+
function isValidDateRange(month, day) {
|
|
484
|
+
if (month < 1 || month > 12) {
|
|
485
|
+
return false;
|
|
486
|
+
}
|
|
487
|
+
if (day < 1 || day > 31) {
|
|
488
|
+
return false;
|
|
489
|
+
}
|
|
490
|
+
return true;
|
|
491
|
+
}
|
|
492
|
+
function formatDatePartsToDisplay(year, month, day) {
|
|
493
|
+
const paddedMonth = month.toString().padStart(2, "0");
|
|
494
|
+
const paddedDay = day.toString().padStart(2, "0");
|
|
495
|
+
return `${paddedMonth}/${paddedDay}/${year}`;
|
|
496
|
+
}
|
|
497
|
+
function formatDate(date) {
|
|
498
|
+
if (!date) {
|
|
499
|
+
return "";
|
|
500
|
+
}
|
|
501
|
+
try {
|
|
502
|
+
const dateParts = parseDateParts(date);
|
|
503
|
+
if (!dateParts) {
|
|
504
|
+
return "";
|
|
505
|
+
}
|
|
506
|
+
const { year, month, day } = dateParts;
|
|
507
|
+
if (!isValidDateRange(month, day)) {
|
|
508
|
+
return "";
|
|
509
|
+
}
|
|
510
|
+
return formatDatePartsToDisplay(year, month, day);
|
|
511
|
+
} catch (error) {
|
|
512
|
+
console.error("Error formatting date:", error);
|
|
513
|
+
return "";
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
// src/utils/mergeObjectArrays.ts
|
|
518
|
+
function mergeObjectArrays(arr1, arr2) {
|
|
519
|
+
const maxLength = Math.max(arr1.length, arr2.length);
|
|
520
|
+
return Array.from(
|
|
521
|
+
{ length: maxLength },
|
|
522
|
+
(_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
|
|
523
|
+
);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
// src/utils.ts
|
|
527
|
+
function findDocumentRoot(element) {
|
|
528
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
529
|
+
throw new Error(
|
|
530
|
+
"findDocumentRoot can only be used in a browser environment."
|
|
531
|
+
);
|
|
532
|
+
}
|
|
533
|
+
if (!element || !(element instanceof Node)) {
|
|
534
|
+
return window.document.body;
|
|
535
|
+
}
|
|
536
|
+
let currentElement = element;
|
|
537
|
+
while (currentElement && currentElement.parentNode) {
|
|
538
|
+
if (currentElement.parentNode === document) {
|
|
539
|
+
return document.body;
|
|
540
|
+
} else if (currentElement.parentNode instanceof DocumentFragment) {
|
|
541
|
+
return currentElement.parentNode;
|
|
542
|
+
} else {
|
|
543
|
+
currentElement = currentElement.parentNode;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
return window.document.body;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
// src/hooks/useTableLayout.ts
|
|
550
|
+
var import_react5 = require("react");
|
|
551
|
+
var LocalStoragePrefix = `dmsi-acc-v1-table-layout`;
|
|
552
|
+
var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
|
|
553
|
+
function useTableLayout(initialColumns, key) {
|
|
554
|
+
const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
|
|
555
|
+
const [isReady, setIsReady] = (0, import_react5.useState)(false);
|
|
556
|
+
const renderCountRef = (0, import_react5.useRef)(0);
|
|
557
|
+
const handleSaveLayout = (0, import_react5.useCallback)(
|
|
558
|
+
(setter, _internal) => {
|
|
559
|
+
if (!isReady && !_internal || !key) return;
|
|
560
|
+
setColumns((prevColumns) => {
|
|
561
|
+
const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
|
|
562
|
+
if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
|
|
563
|
+
return prevColumns;
|
|
564
|
+
localStorage.setItem(
|
|
565
|
+
getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
|
|
566
|
+
JSON.stringify(newColumns)
|
|
567
|
+
);
|
|
568
|
+
return newColumns;
|
|
569
|
+
});
|
|
570
|
+
},
|
|
571
|
+
[isReady, key]
|
|
572
|
+
);
|
|
573
|
+
(0, import_react5.useEffect)(() => {
|
|
574
|
+
if (!key) return setIsReady(true);
|
|
575
|
+
if (renderCountRef.current > 1) {
|
|
576
|
+
throw new Error(
|
|
577
|
+
`useTableLayout should only be called once per component render cycle.
|
|
578
|
+
${renderCountRef.current} Renders detected.
|
|
579
|
+
Check dependency stability`
|
|
580
|
+
);
|
|
581
|
+
}
|
|
582
|
+
renderCountRef.current += 1;
|
|
583
|
+
const savedLayout = localStorage.getItem(
|
|
584
|
+
getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
|
|
585
|
+
);
|
|
586
|
+
if (savedLayout) {
|
|
587
|
+
handleSaveLayout(
|
|
588
|
+
mergeObjectArrays(
|
|
589
|
+
initialColumns,
|
|
590
|
+
JSON.parse(savedLayout)
|
|
591
|
+
),
|
|
592
|
+
true
|
|
593
|
+
);
|
|
594
|
+
}
|
|
595
|
+
if (!savedLayout) handleSaveLayout(initialColumns, true);
|
|
596
|
+
setIsReady(true);
|
|
597
|
+
return () => {
|
|
598
|
+
renderCountRef.current = 0;
|
|
599
|
+
};
|
|
600
|
+
}, [handleSaveLayout, initialColumns, key]);
|
|
601
|
+
const getSavedLayout = (0, import_react5.useCallback)(() => {
|
|
602
|
+
const savedLayout = localStorage.getItem(
|
|
603
|
+
getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
|
|
604
|
+
);
|
|
605
|
+
if (savedLayout) {
|
|
606
|
+
return JSON.parse(savedLayout);
|
|
607
|
+
}
|
|
608
|
+
}, [key]);
|
|
609
|
+
return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
// src/components/MenuOption.tsx
|
|
613
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
614
|
+
var MenuOption = ({
|
|
615
|
+
id,
|
|
616
|
+
testid,
|
|
617
|
+
children,
|
|
618
|
+
disabled = false,
|
|
619
|
+
variant = "normal",
|
|
620
|
+
value,
|
|
621
|
+
before,
|
|
622
|
+
after,
|
|
623
|
+
subMenu,
|
|
624
|
+
onClick,
|
|
625
|
+
selected,
|
|
626
|
+
ref,
|
|
627
|
+
onSubMenuHover,
|
|
628
|
+
onSubMenuLeave,
|
|
629
|
+
onSubMenuEnter,
|
|
630
|
+
toggleMenu,
|
|
631
|
+
subMenuLevel = 1,
|
|
632
|
+
currentSubMenuLevel,
|
|
633
|
+
closeSubMenuLevel,
|
|
634
|
+
activeMenu,
|
|
635
|
+
mobilePositionTo,
|
|
636
|
+
highlightMatchingText = false,
|
|
637
|
+
menuValue,
|
|
638
|
+
onMouseMove
|
|
639
|
+
}) => {
|
|
640
|
+
const uniqueId = (0, import_react6.useId)();
|
|
641
|
+
const internalRef = (0, import_react6.useRef)(null);
|
|
642
|
+
const actualRef = ref || internalRef;
|
|
643
|
+
const menuId = (0, import_react6.useRef)(`menu-${uniqueId}`);
|
|
644
|
+
const isMobile = useMatchesMobile();
|
|
645
|
+
const handleMouseEnter = () => {
|
|
646
|
+
if (subMenu && onSubMenuHover && !disabled) {
|
|
647
|
+
onSubMenuHover(menuId.current, subMenuLevel);
|
|
648
|
+
}
|
|
649
|
+
};
|
|
650
|
+
const handleMouseLeave = () => {
|
|
651
|
+
if (subMenu && onSubMenuLeave && !disabled) {
|
|
652
|
+
onSubMenuLeave(subMenuLevel);
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
const handleMouseMove = () => {
|
|
656
|
+
if (subMenu && onMouseMove && !disabled) {
|
|
657
|
+
onMouseMove();
|
|
658
|
+
}
|
|
659
|
+
};
|
|
660
|
+
const handleSubMenuEnter = () => {
|
|
661
|
+
if (onSubMenuEnter) {
|
|
662
|
+
onSubMenuEnter();
|
|
663
|
+
}
|
|
664
|
+
};
|
|
665
|
+
const additionalAttributes = {
|
|
666
|
+
"data-selected": selected || null
|
|
667
|
+
};
|
|
668
|
+
const svgStyles = (0, import_clsx5.default)(
|
|
669
|
+
"[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
|
|
670
|
+
);
|
|
671
|
+
const textLabelStyles = (0, import_clsx5.default)("w-full whitespace-nowrap !leading-6");
|
|
672
|
+
const normalStyles = variant === "normal" && !disabled && (0, import_clsx5.default)(
|
|
673
|
+
"bg-transparent text-text-primary-normal",
|
|
674
|
+
"hover:bg-background-action-secondary-hover",
|
|
675
|
+
"focus:bg-background-action-secondary-hover",
|
|
676
|
+
"data-selected:bg-background-action-secondary-hover",
|
|
677
|
+
"active:bg-background-action-secondary-active"
|
|
678
|
+
);
|
|
679
|
+
const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx5.default)("text-text-primary-disabled");
|
|
680
|
+
const actionStyles = variant === "action" && !disabled && (0, import_clsx5.default)(
|
|
681
|
+
"text-action-400 bg-transparent",
|
|
682
|
+
"hover:bg-background-action-secondary-hover hover:text-text-action-hover",
|
|
683
|
+
"focus:bg-background-action-secondary-hover focus:text-text-action-hover",
|
|
684
|
+
"data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
|
|
685
|
+
"active:bg-background-action-secondary-active active:text-text-action-active"
|
|
686
|
+
);
|
|
687
|
+
const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
|
|
688
|
+
const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
|
|
689
|
+
const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
|
|
690
|
+
const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
|
|
691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
692
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
693
|
+
"div",
|
|
694
|
+
__spreadProps(__spreadValues({
|
|
695
|
+
id,
|
|
696
|
+
"data-testid": testid,
|
|
697
|
+
ref: actualRef,
|
|
698
|
+
className: (0, import_clsx5.default)(
|
|
699
|
+
"flex items-center cursor-pointer w-full text-left relative outline-none",
|
|
700
|
+
svgStyles,
|
|
701
|
+
componentGap,
|
|
702
|
+
componentPadding,
|
|
703
|
+
baseTransition,
|
|
704
|
+
normalStyles,
|
|
705
|
+
normalDisabledStyles,
|
|
706
|
+
actionStyles,
|
|
707
|
+
actionDisabledStyles,
|
|
708
|
+
disabledStyles
|
|
709
|
+
),
|
|
710
|
+
"data-value": value || children,
|
|
711
|
+
onClick: () => {
|
|
712
|
+
onClick == null ? void 0 : onClick(menuId.current, value || children);
|
|
713
|
+
if (subMenu) {
|
|
714
|
+
toggleMenu(menuId.current, subMenuLevel);
|
|
715
|
+
}
|
|
716
|
+
},
|
|
717
|
+
onMouseEnter: handleMouseEnter,
|
|
718
|
+
onMouseLeave: handleMouseLeave,
|
|
719
|
+
onMouseMove: handleMouseMove
|
|
720
|
+
}, additionalAttributes), {
|
|
721
|
+
tabIndex: -1,
|
|
722
|
+
role: "menuitem",
|
|
723
|
+
"aria-haspopup": subMenu ? "menu" : void 0,
|
|
724
|
+
children: [
|
|
725
|
+
before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
|
|
726
|
+
renderChildren,
|
|
727
|
+
renderAfterProp()
|
|
728
|
+
]
|
|
729
|
+
})
|
|
730
|
+
),
|
|
731
|
+
subMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
732
|
+
"div",
|
|
733
|
+
{
|
|
734
|
+
onMouseEnter: handleSubMenuEnter,
|
|
735
|
+
onMouseLeave: handleMouseLeave,
|
|
736
|
+
"data-submenu-parent": menuId.current,
|
|
737
|
+
"data-menu-level": subMenuLevel + 1,
|
|
738
|
+
children: subMenu({
|
|
739
|
+
menuId: menuId.current,
|
|
740
|
+
positionTo: actualRef,
|
|
741
|
+
mobilePositionTo,
|
|
742
|
+
position: "right",
|
|
743
|
+
subMenuLevel,
|
|
744
|
+
mobileBackMenuOption,
|
|
745
|
+
mobileHide: isMobile && activeMenu !== menuId.current
|
|
746
|
+
})
|
|
747
|
+
}
|
|
748
|
+
)
|
|
749
|
+
] });
|
|
750
|
+
function renderAfterProp() {
|
|
751
|
+
if (after) {
|
|
752
|
+
return after;
|
|
753
|
+
}
|
|
754
|
+
if (subMenu && after !== null) {
|
|
755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
function mobileBackMenuOption() {
|
|
759
|
+
if (!isMobile) {
|
|
760
|
+
return;
|
|
761
|
+
}
|
|
762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
763
|
+
MenuOption,
|
|
764
|
+
{
|
|
765
|
+
id: id ? `${id}-back` : void 0,
|
|
766
|
+
testid: testid ? `${testid}-back` : void 0,
|
|
767
|
+
onClick: () => {
|
|
768
|
+
closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
|
|
769
|
+
},
|
|
770
|
+
variant: "action",
|
|
771
|
+
before: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_left" }),
|
|
772
|
+
children: "Back"
|
|
773
|
+
}
|
|
774
|
+
);
|
|
775
|
+
}
|
|
776
|
+
};
|
|
777
|
+
MenuOption.displayName = "MenuOption";
|
|
778
|
+
function highlightMatch(text, searchValue) {
|
|
779
|
+
if (!searchValue || !searchValue.trim()) {
|
|
780
|
+
return text;
|
|
781
|
+
}
|
|
782
|
+
const regex = new RegExp(
|
|
783
|
+
`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
|
|
784
|
+
"gi"
|
|
785
|
+
);
|
|
786
|
+
const parts = text.split(regex);
|
|
787
|
+
return parts.map(
|
|
788
|
+
(part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part
|
|
789
|
+
);
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
// src/components/Menu.tsx
|
|
793
|
+
var import_clsx6 = __toESM(require("clsx"), 1);
|
|
794
|
+
var import_react8 = require("react");
|
|
795
|
+
var import_react_dom = require("react-dom");
|
|
796
|
+
|
|
797
|
+
// src/components/useMenuSystem.tsx
|
|
798
|
+
var import_react7 = require("react");
|
|
799
|
+
function useSubMenuSystem(mobilePositionTo) {
|
|
800
|
+
const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
|
|
801
|
+
{}
|
|
802
|
+
);
|
|
803
|
+
const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
|
|
804
|
+
const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.useState)(
|
|
805
|
+
null
|
|
806
|
+
);
|
|
807
|
+
const menuRootRef = (0, import_react7.useRef)(null);
|
|
808
|
+
const subMenuRefs = (0, import_react7.useRef)({});
|
|
809
|
+
const hoverTimeoutRef = (0, import_react7.useRef)(null);
|
|
810
|
+
const closeTimeoutRef = (0, import_react7.useRef)(null);
|
|
811
|
+
const mouseStopTimeoutRef = (0, import_react7.useRef)(null);
|
|
812
|
+
const isMouseMovingRef = (0, import_react7.useRef)(false);
|
|
813
|
+
const pendingOpenActionRef = (0, import_react7.useRef)(null);
|
|
814
|
+
const pendingCloseActionRef = (0, import_react7.useRef)(null);
|
|
815
|
+
const isMobile = useMatchesMobile();
|
|
816
|
+
const toggleMenu = (menuId, level) => {
|
|
817
|
+
if (closeTimeoutRef.current) {
|
|
818
|
+
clearTimeout(closeTimeoutRef.current);
|
|
819
|
+
closeTimeoutRef.current = null;
|
|
820
|
+
}
|
|
821
|
+
setActiveMenu(menuId);
|
|
822
|
+
setCurrentSubMenuLevel(level);
|
|
823
|
+
setActiveMenus((prev) => {
|
|
824
|
+
const newActiveMenus = __spreadValues({}, prev);
|
|
825
|
+
if (newActiveMenus[level] === menuId) {
|
|
826
|
+
delete newActiveMenus[level];
|
|
827
|
+
} else {
|
|
828
|
+
newActiveMenus[level] = menuId;
|
|
829
|
+
}
|
|
830
|
+
Object.keys(newActiveMenus).forEach((key) => {
|
|
831
|
+
if (Number(key) > level) {
|
|
832
|
+
delete newActiveMenus[Number(key)];
|
|
833
|
+
}
|
|
834
|
+
});
|
|
835
|
+
return newActiveMenus;
|
|
836
|
+
});
|
|
837
|
+
};
|
|
838
|
+
const openMenu = (menuId, level) => {
|
|
839
|
+
if (closeTimeoutRef.current) {
|
|
840
|
+
clearTimeout(closeTimeoutRef.current);
|
|
841
|
+
closeTimeoutRef.current = null;
|
|
842
|
+
}
|
|
843
|
+
setActiveMenus((prev) => {
|
|
844
|
+
const newActiveMenus = __spreadValues({}, prev);
|
|
845
|
+
newActiveMenus[level] = menuId;
|
|
846
|
+
Object.keys(newActiveMenus).forEach((key) => {
|
|
847
|
+
if (Number(key) > level) {
|
|
848
|
+
delete newActiveMenus[Number(key)];
|
|
849
|
+
}
|
|
850
|
+
});
|
|
851
|
+
return newActiveMenus;
|
|
852
|
+
});
|
|
853
|
+
};
|
|
854
|
+
const executePendingActions = (0, import_react7.useCallback)(() => {
|
|
855
|
+
if (pendingCloseActionRef.current) {
|
|
856
|
+
pendingCloseActionRef.current();
|
|
857
|
+
pendingCloseActionRef.current = null;
|
|
858
|
+
}
|
|
859
|
+
if (pendingOpenActionRef.current) {
|
|
860
|
+
pendingOpenActionRef.current();
|
|
861
|
+
pendingOpenActionRef.current = null;
|
|
862
|
+
}
|
|
863
|
+
}, []);
|
|
864
|
+
const openMenuWithDelay = (menuId, level, delay = 150) => {
|
|
865
|
+
if (isMobile) {
|
|
866
|
+
return;
|
|
867
|
+
}
|
|
868
|
+
pendingOpenActionRef.current = () => {
|
|
869
|
+
if (hoverTimeoutRef.current) {
|
|
870
|
+
clearTimeout(hoverTimeoutRef.current);
|
|
871
|
+
}
|
|
872
|
+
hoverTimeoutRef.current = setTimeout(() => {
|
|
873
|
+
openMenu(menuId, level);
|
|
874
|
+
}, delay);
|
|
875
|
+
};
|
|
876
|
+
if (!isMouseMovingRef.current) {
|
|
877
|
+
executePendingActions();
|
|
878
|
+
}
|
|
879
|
+
};
|
|
880
|
+
const closeMenuWithDelay = (level, delay = 500) => {
|
|
881
|
+
if (isMobile) {
|
|
882
|
+
return;
|
|
883
|
+
}
|
|
884
|
+
pendingCloseActionRef.current = () => {
|
|
885
|
+
if (hoverTimeoutRef.current) {
|
|
886
|
+
clearTimeout(hoverTimeoutRef.current);
|
|
887
|
+
hoverTimeoutRef.current = null;
|
|
888
|
+
}
|
|
889
|
+
closeTimeoutRef.current = setTimeout(() => {
|
|
890
|
+
closeSubMenuLevel(level);
|
|
891
|
+
}, delay);
|
|
892
|
+
};
|
|
893
|
+
if (!isMouseMovingRef.current) {
|
|
894
|
+
executePendingActions();
|
|
895
|
+
}
|
|
896
|
+
};
|
|
897
|
+
const handleMouseMove = () => {
|
|
898
|
+
isMouseMovingRef.current = true;
|
|
899
|
+
if (mouseStopTimeoutRef.current) {
|
|
900
|
+
clearTimeout(mouseStopTimeoutRef.current);
|
|
901
|
+
}
|
|
902
|
+
mouseStopTimeoutRef.current = setTimeout(() => {
|
|
903
|
+
isMouseMovingRef.current = false;
|
|
904
|
+
executePendingActions();
|
|
905
|
+
}, 200);
|
|
906
|
+
};
|
|
907
|
+
const cancelCloseTimeout = () => {
|
|
908
|
+
if (isMobile) {
|
|
909
|
+
return;
|
|
910
|
+
}
|
|
911
|
+
if (mouseStopTimeoutRef.current) {
|
|
912
|
+
clearTimeout(mouseStopTimeoutRef.current);
|
|
913
|
+
mouseStopTimeoutRef.current = null;
|
|
914
|
+
isMouseMovingRef.current = false;
|
|
915
|
+
}
|
|
916
|
+
};
|
|
917
|
+
const closeSubMenuLevel = (level) => {
|
|
918
|
+
setActiveMenus((prev) => {
|
|
919
|
+
const newActiveMenus = __spreadValues({}, prev);
|
|
920
|
+
delete newActiveMenus[level];
|
|
921
|
+
Object.keys(newActiveMenus).forEach((key) => {
|
|
922
|
+
if (Number(key) >= level) {
|
|
923
|
+
delete newActiveMenus[Number(key)];
|
|
924
|
+
}
|
|
925
|
+
});
|
|
926
|
+
if (isMobile) {
|
|
927
|
+
const newSubMenuLevel = level - 1;
|
|
928
|
+
setCurrentSubMenuLevel(newSubMenuLevel);
|
|
929
|
+
const newActiveMenu = newActiveMenus[newSubMenuLevel];
|
|
930
|
+
if (Object.keys(newActiveMenus).length > 0 && newActiveMenu) {
|
|
931
|
+
setActiveMenu(newActiveMenu);
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
return newActiveMenus;
|
|
935
|
+
});
|
|
936
|
+
};
|
|
937
|
+
const registerSubMenu = (id, element) => {
|
|
938
|
+
subMenuRefs.current[id] = element;
|
|
939
|
+
};
|
|
940
|
+
const isMenuActive = (menuId, level) => {
|
|
941
|
+
return activeMenus[level] === menuId;
|
|
942
|
+
};
|
|
943
|
+
(0, import_react7.useEffect)(() => {
|
|
944
|
+
const handleClickOutside = (event) => {
|
|
945
|
+
var _a;
|
|
946
|
+
if (Object.keys(activeMenus).length === 0) return;
|
|
947
|
+
const target = event.target;
|
|
948
|
+
if ((_a = menuRootRef.current) == null ? void 0 : _a.contains(target)) return;
|
|
949
|
+
const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
|
|
950
|
+
const submenuEl = subMenuRefs.current[id];
|
|
951
|
+
return submenuEl == null ? void 0 : submenuEl.contains(target);
|
|
952
|
+
});
|
|
953
|
+
if (!isInsideActiveSubmenu) {
|
|
954
|
+
setActiveMenus({});
|
|
955
|
+
}
|
|
956
|
+
};
|
|
957
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
958
|
+
return () => {
|
|
959
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
960
|
+
};
|
|
961
|
+
}, [activeMenus]);
|
|
962
|
+
(0, import_react7.useEffect)(() => {
|
|
963
|
+
return () => {
|
|
964
|
+
if (hoverTimeoutRef.current) {
|
|
965
|
+
clearTimeout(hoverTimeoutRef.current);
|
|
966
|
+
}
|
|
967
|
+
if (closeTimeoutRef.current) {
|
|
968
|
+
clearTimeout(closeTimeoutRef.current);
|
|
969
|
+
}
|
|
970
|
+
};
|
|
971
|
+
}, []);
|
|
972
|
+
const getAllFocusableMenuElements = () => {
|
|
973
|
+
const elements = [];
|
|
974
|
+
if (menuRootRef.current) {
|
|
975
|
+
elements.push(
|
|
976
|
+
...Array.from(menuRootRef.current.children)
|
|
977
|
+
);
|
|
978
|
+
}
|
|
979
|
+
Object.values(activeMenus).forEach((menuId) => {
|
|
980
|
+
const submenuEl = subMenuRefs.current[menuId];
|
|
981
|
+
if (submenuEl) {
|
|
982
|
+
elements.push(...Array.from(submenuEl.children));
|
|
983
|
+
}
|
|
984
|
+
});
|
|
985
|
+
return elements;
|
|
986
|
+
};
|
|
987
|
+
const findCurrentMenuLevel = (element) => {
|
|
988
|
+
let current = element.parentElement;
|
|
989
|
+
while (current) {
|
|
990
|
+
const level = current.getAttribute("data-menu-level");
|
|
991
|
+
if (level !== null) {
|
|
992
|
+
return parseInt(level, 10);
|
|
993
|
+
}
|
|
994
|
+
current = current.parentElement;
|
|
995
|
+
}
|
|
996
|
+
return 0;
|
|
997
|
+
};
|
|
998
|
+
const getMenuElementsAtLevel = (level) => {
|
|
999
|
+
var _a;
|
|
1000
|
+
if (level === 0 && menuRootRef.current) {
|
|
1001
|
+
return Array.from(menuRootRef.current.children);
|
|
1002
|
+
}
|
|
1003
|
+
const menuId = (_a = Object.entries(activeMenus).find(([, id]) => {
|
|
1004
|
+
const submenuEl = subMenuRefs.current[id];
|
|
1005
|
+
return submenuEl && submenuEl.getAttribute("data-menu-level") === level.toString();
|
|
1006
|
+
})) == null ? void 0 : _a[1];
|
|
1007
|
+
if (menuId) {
|
|
1008
|
+
const submenuEl = subMenuRefs.current[menuId];
|
|
1009
|
+
if (submenuEl) {
|
|
1010
|
+
return Array.from(submenuEl.children);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
return [];
|
|
1014
|
+
};
|
|
1015
|
+
return {
|
|
1016
|
+
menuRootRef,
|
|
1017
|
+
activeMenus,
|
|
1018
|
+
openMenu,
|
|
1019
|
+
isMenuActive,
|
|
1020
|
+
registerSubMenu,
|
|
1021
|
+
closeSubMenuLevel,
|
|
1022
|
+
getAllFocusableMenuElements,
|
|
1023
|
+
findCurrentMenuLevel,
|
|
1024
|
+
getMenuElementsAtLevel,
|
|
1025
|
+
mobileHide: isMobile && Object.keys(activeMenus).length > 0,
|
|
1026
|
+
listeners: {
|
|
1027
|
+
onSubMenuHover: openMenuWithDelay,
|
|
1028
|
+
onSubMenuLeave: closeMenuWithDelay,
|
|
1029
|
+
onSubMenuEnter: cancelCloseTimeout,
|
|
1030
|
+
onMouseMove: handleMouseMove,
|
|
1031
|
+
toggleMenu,
|
|
1032
|
+
mobilePositionTo,
|
|
1033
|
+
activeMenu,
|
|
1034
|
+
currentSubMenuLevel,
|
|
1035
|
+
closeSubMenuLevel
|
|
1036
|
+
}
|
|
1037
|
+
};
|
|
1038
|
+
}
|
|
1039
|
+
function useMenuPosition(elementRef, position = "bottom", options) {
|
|
1040
|
+
const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
|
|
1041
|
+
top: 0,
|
|
1042
|
+
left: 0,
|
|
1043
|
+
minWidth: 0
|
|
1044
|
+
});
|
|
1045
|
+
const isMobile = options == null ? void 0 : options.isMobile;
|
|
1046
|
+
const updatePosition = (0, import_react7.useCallback)(() => {
|
|
1047
|
+
var _a, _b, _c;
|
|
1048
|
+
if (!(elementRef == null ? void 0 : elementRef.current)) return;
|
|
1049
|
+
const triggerRect = elementRef.current.getBoundingClientRect();
|
|
1050
|
+
const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
|
|
1051
|
+
const viewportWidth = window.innerWidth;
|
|
1052
|
+
const menuWidth = (menuRect == null ? void 0 : menuRect.width) || triggerRect.width;
|
|
1053
|
+
const topOffset = (_c = options == null ? void 0 : options.topOffset) != null ? _c : 4;
|
|
1054
|
+
let top = 0;
|
|
1055
|
+
let left = 0;
|
|
1056
|
+
if (position === "bottom" || position === "bottom-right") {
|
|
1057
|
+
top = triggerRect.top + triggerRect.height + topOffset;
|
|
1058
|
+
} else {
|
|
1059
|
+
top = triggerRect.top;
|
|
1060
|
+
}
|
|
1061
|
+
if (position === "bottom") {
|
|
1062
|
+
left = triggerRect.left + window.scrollX;
|
|
1063
|
+
} else if (position === "bottom-right") {
|
|
1064
|
+
left = triggerRect.right + window.scrollX - menuWidth;
|
|
1065
|
+
} else if (position === "right") {
|
|
1066
|
+
if (isMobile) {
|
|
1067
|
+
left = triggerRect.left + window.scrollX;
|
|
1068
|
+
} else {
|
|
1069
|
+
left = triggerRect.right + window.scrollX;
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
const overflowsRightViewport = left + menuWidth > viewportWidth;
|
|
1073
|
+
if (overflowsRightViewport) {
|
|
1074
|
+
const newLeft = triggerRect.left - menuWidth;
|
|
1075
|
+
const overflowsLeftViewport = newLeft < 0;
|
|
1076
|
+
if (overflowsLeftViewport) {
|
|
1077
|
+
left = (viewportWidth - menuWidth) / 2;
|
|
1078
|
+
} else {
|
|
1079
|
+
left = newLeft;
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
if (isMobile && position === "right") {
|
|
1083
|
+
top = triggerRect.top + triggerRect.height + topOffset;
|
|
1084
|
+
}
|
|
1085
|
+
if (isMobile && menuWidth > viewportWidth) {
|
|
1086
|
+
left = 0;
|
|
1087
|
+
}
|
|
1088
|
+
setMenuPosition({
|
|
1089
|
+
top,
|
|
1090
|
+
left,
|
|
1091
|
+
minWidth: triggerRect.width
|
|
1092
|
+
});
|
|
1093
|
+
}, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
|
|
1094
|
+
(0, import_react7.useEffect)(() => {
|
|
1095
|
+
if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
|
|
1096
|
+
const handleClickOutside = (event) => {
|
|
1097
|
+
var _a, _b, _c, _d, _e;
|
|
1098
|
+
const target = event.target;
|
|
1099
|
+
if ((_a = elementRef.current) == null ? void 0 : _a.contains(target)) return;
|
|
1100
|
+
if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(target)) return;
|
|
1101
|
+
if ((_d = options.additionalRefs) == null ? void 0 : _d.some((ref) => {
|
|
1102
|
+
var _a2;
|
|
1103
|
+
return (_a2 = ref.current) == null ? void 0 : _a2.contains(target);
|
|
1104
|
+
}))
|
|
1105
|
+
return;
|
|
1106
|
+
(_e = options.setIsOpen) == null ? void 0 : _e.call(options, false);
|
|
1107
|
+
};
|
|
1108
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1109
|
+
return () => {
|
|
1110
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1111
|
+
};
|
|
1112
|
+
}, [
|
|
1113
|
+
options,
|
|
1114
|
+
elementRef,
|
|
1115
|
+
options == null ? void 0 : options.isOpen,
|
|
1116
|
+
options == null ? void 0 : options.setIsOpen,
|
|
1117
|
+
options == null ? void 0 : options.menuRef,
|
|
1118
|
+
options == null ? void 0 : options.additionalRefs
|
|
1119
|
+
]);
|
|
1120
|
+
(0, import_react7.useEffect)(() => {
|
|
1121
|
+
updatePosition();
|
|
1122
|
+
const resizeObserver = new ResizeObserver(updatePosition);
|
|
1123
|
+
if (elementRef == null ? void 0 : elementRef.current) {
|
|
1124
|
+
resizeObserver.observe(elementRef.current);
|
|
1125
|
+
}
|
|
1126
|
+
window.addEventListener("scroll", updatePosition);
|
|
1127
|
+
window.addEventListener("resize", updatePosition);
|
|
1128
|
+
return () => {
|
|
1129
|
+
resizeObserver.disconnect();
|
|
1130
|
+
window.removeEventListener("scroll", updatePosition);
|
|
1131
|
+
window.removeEventListener("resize", updatePosition);
|
|
1132
|
+
};
|
|
1133
|
+
}, [elementRef, updatePosition]);
|
|
1134
|
+
return { menuPosition, updatePosition };
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
// src/components/Menu.tsx
|
|
1138
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1139
|
+
var Menu = (_a) => {
|
|
1140
|
+
var _b = _a, {
|
|
1141
|
+
id,
|
|
1142
|
+
testid,
|
|
1143
|
+
children,
|
|
1144
|
+
className,
|
|
1145
|
+
ref,
|
|
1146
|
+
positionTo,
|
|
1147
|
+
mobilePositionTo,
|
|
1148
|
+
show,
|
|
1149
|
+
setShow,
|
|
1150
|
+
position = "bottom",
|
|
1151
|
+
maxHeight: customMaxHeight,
|
|
1152
|
+
topOffset,
|
|
1153
|
+
mobileBackMenuOption,
|
|
1154
|
+
mobileHide,
|
|
1155
|
+
useDefaultMinWidth,
|
|
1156
|
+
autoFocusOff,
|
|
1157
|
+
menuName,
|
|
1158
|
+
calculateMinMaxHeight
|
|
1159
|
+
} = _b, props = __objRest(_b, [
|
|
1160
|
+
"id",
|
|
1161
|
+
"testid",
|
|
1162
|
+
"children",
|
|
1163
|
+
"className",
|
|
1164
|
+
"ref",
|
|
1165
|
+
"positionTo",
|
|
1166
|
+
"mobilePositionTo",
|
|
1167
|
+
"show",
|
|
1168
|
+
"setShow",
|
|
1169
|
+
"position",
|
|
1170
|
+
"maxHeight",
|
|
1171
|
+
"topOffset",
|
|
1172
|
+
"mobileBackMenuOption",
|
|
1173
|
+
"mobileHide",
|
|
1174
|
+
"useDefaultMinWidth",
|
|
1175
|
+
"autoFocusOff",
|
|
1176
|
+
"menuName",
|
|
1177
|
+
"calculateMinMaxHeight"
|
|
1178
|
+
]);
|
|
1179
|
+
const internalRef = (0, import_react8.useRef)(null);
|
|
1180
|
+
const actualRef = ref || internalRef;
|
|
1181
|
+
const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
|
|
1182
|
+
const isMobile = useMatchesMobile();
|
|
1183
|
+
const { menuPosition, updatePosition } = useMenuPosition(
|
|
1184
|
+
isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
|
|
1185
|
+
position,
|
|
1186
|
+
{
|
|
1187
|
+
isOpen: show,
|
|
1188
|
+
setIsOpen: setShow,
|
|
1189
|
+
menuRef: internalRef,
|
|
1190
|
+
topOffset,
|
|
1191
|
+
isMobile: !!(isMobile && mobilePositionTo)
|
|
1192
|
+
}
|
|
1193
|
+
);
|
|
1194
|
+
(0, import_react8.useEffect)(() => {
|
|
1195
|
+
if (calculateMinMaxHeight) {
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
const raf = requestAnimationFrame(() => {
|
|
1199
|
+
if (!actualRef.current || customMaxHeight) {
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
if (actualRef.current.childElementCount > 4) {
|
|
1203
|
+
let accumulatedHeight = 0;
|
|
1204
|
+
Array.from(actualRef.current.children).forEach((child, index) => {
|
|
1205
|
+
if (index >= 5) {
|
|
1206
|
+
return;
|
|
1207
|
+
}
|
|
1208
|
+
accumulatedHeight += child.clientHeight;
|
|
1209
|
+
});
|
|
1210
|
+
accumulatedHeight = accumulatedHeight / 5 * 4.5;
|
|
1211
|
+
setMaxHeight(`${accumulatedHeight}px`);
|
|
1212
|
+
}
|
|
1213
|
+
});
|
|
1214
|
+
return () => {
|
|
1215
|
+
cancelAnimationFrame(raf);
|
|
1216
|
+
};
|
|
1217
|
+
}, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
|
|
1218
|
+
(0, import_react8.useEffect)(() => {
|
|
1219
|
+
if (!calculateMinMaxHeight) {
|
|
1220
|
+
return;
|
|
1221
|
+
}
|
|
1222
|
+
if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
|
|
1223
|
+
const positionToRect = positionTo.current.getBoundingClientRect();
|
|
1224
|
+
const offsetInPx = 16;
|
|
1225
|
+
const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
|
|
1226
|
+
setMaxHeight(`${calculatedMaxHeight}px`);
|
|
1227
|
+
}
|
|
1228
|
+
}, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
|
|
1229
|
+
(0, import_react8.useEffect)(() => {
|
|
1230
|
+
if (!show) {
|
|
1231
|
+
return;
|
|
1232
|
+
}
|
|
1233
|
+
initializeMenuFocus();
|
|
1234
|
+
updatePosition();
|
|
1235
|
+
}, [show, updatePosition]);
|
|
1236
|
+
(0, import_react8.useEffect)(() => {
|
|
1237
|
+
if (!show || !setShow) {
|
|
1238
|
+
return;
|
|
1239
|
+
}
|
|
1240
|
+
const handleEscapeKey = (event) => {
|
|
1241
|
+
var _a2;
|
|
1242
|
+
if (event.key !== "Escape") {
|
|
1243
|
+
return;
|
|
1244
|
+
}
|
|
1245
|
+
setShow(false);
|
|
1246
|
+
(_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
|
|
1247
|
+
};
|
|
1248
|
+
document.addEventListener("keydown", handleEscapeKey);
|
|
1249
|
+
return () => {
|
|
1250
|
+
document.removeEventListener("keydown", handleEscapeKey);
|
|
1251
|
+
};
|
|
1252
|
+
}, [show, setShow, positionTo]);
|
|
1253
|
+
return show && (0, import_react_dom.createPortal)(
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1255
|
+
"div",
|
|
1256
|
+
__spreadProps(__spreadValues({
|
|
1257
|
+
id,
|
|
1258
|
+
"data-testid": testid,
|
|
1259
|
+
ref: setRefs,
|
|
1260
|
+
className: (0, import_clsx6.default)(
|
|
1261
|
+
"shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
|
|
1262
|
+
"fixed",
|
|
1263
|
+
"z-50",
|
|
1264
|
+
"max-w-screen",
|
|
1265
|
+
mobileHide && "opacity-0 pointer-events-none",
|
|
1266
|
+
className
|
|
1267
|
+
)
|
|
1268
|
+
}, props), {
|
|
1269
|
+
style: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props.style), {
|
|
1270
|
+
maxHeight: customMaxHeight || maxHeight
|
|
1271
|
+
}), menuPosition), {
|
|
1272
|
+
minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth
|
|
1273
|
+
}),
|
|
1274
|
+
onKeyDown: handleKeydown,
|
|
1275
|
+
onMouseDown: stopPropagation,
|
|
1276
|
+
onMouseUp: stopPropagation,
|
|
1277
|
+
onTouchStart: stopPropagation,
|
|
1278
|
+
onTouchEnd: stopPropagation,
|
|
1279
|
+
tabIndex: -1,
|
|
1280
|
+
"data-menu": menuName != null ? menuName : "",
|
|
1281
|
+
children: [
|
|
1282
|
+
mobileBackMenuOption == null ? void 0 : mobileBackMenuOption(),
|
|
1283
|
+
children
|
|
1284
|
+
]
|
|
1285
|
+
})
|
|
1286
|
+
),
|
|
1287
|
+
findDocumentRoot(internalRef.current)
|
|
1288
|
+
);
|
|
1289
|
+
function handleKeydown(e) {
|
|
1290
|
+
var _a2, _b2;
|
|
1291
|
+
if (!internalRef.current) {
|
|
1292
|
+
return;
|
|
1293
|
+
}
|
|
1294
|
+
if (e.key !== "Escape") {
|
|
1295
|
+
e.stopPropagation();
|
|
1296
|
+
}
|
|
1297
|
+
const menuOptions = Array.from(
|
|
1298
|
+
internalRef.current.querySelectorAll('[role="menuitem"]')
|
|
1299
|
+
);
|
|
1300
|
+
if (menuOptions.length === 0) {
|
|
1301
|
+
return;
|
|
1302
|
+
}
|
|
1303
|
+
let currentIndex = -1;
|
|
1304
|
+
const focusedElement = document.activeElement;
|
|
1305
|
+
for (let i = 0; i < menuOptions.length; i++) {
|
|
1306
|
+
if (menuOptions[i] === focusedElement) {
|
|
1307
|
+
currentIndex = i;
|
|
1308
|
+
break;
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
switch (e.key) {
|
|
1312
|
+
case "ArrowDown": {
|
|
1313
|
+
e.preventDefault();
|
|
1314
|
+
const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
|
|
1315
|
+
menuOptions[nextIndex].focus();
|
|
1316
|
+
break;
|
|
1317
|
+
}
|
|
1318
|
+
case "ArrowUp": {
|
|
1319
|
+
e.preventDefault();
|
|
1320
|
+
const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
|
|
1321
|
+
menuOptions[prevIndex].focus();
|
|
1322
|
+
break;
|
|
1323
|
+
}
|
|
1324
|
+
case "Home":
|
|
1325
|
+
e.preventDefault();
|
|
1326
|
+
menuOptions[0].focus();
|
|
1327
|
+
break;
|
|
1328
|
+
case "End":
|
|
1329
|
+
e.preventDefault();
|
|
1330
|
+
menuOptions[menuOptions.length - 1].focus();
|
|
1331
|
+
break;
|
|
1332
|
+
case "Enter":
|
|
1333
|
+
case " ":
|
|
1334
|
+
case "ArrowRight":
|
|
1335
|
+
e.preventDefault();
|
|
1336
|
+
if (currentIndex >= 0) {
|
|
1337
|
+
menuOptions[currentIndex].click();
|
|
1338
|
+
}
|
|
1339
|
+
break;
|
|
1340
|
+
case "ArrowLeft":
|
|
1341
|
+
e.preventDefault();
|
|
1342
|
+
(_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
|
|
1343
|
+
(_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
|
|
1344
|
+
break;
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
function initializeMenuFocus() {
|
|
1348
|
+
var _a2, _b2, _c;
|
|
1349
|
+
if (!autoFocusOff) {
|
|
1350
|
+
(_a2 = internalRef.current) == null ? void 0 : _a2.focus();
|
|
1351
|
+
}
|
|
1352
|
+
const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
|
|
1353
|
+
"[data-selected]"
|
|
1354
|
+
);
|
|
1355
|
+
const firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
|
|
1356
|
+
'[role="menuitem"]'
|
|
1357
|
+
);
|
|
1358
|
+
const targetElement = selectedOption || firstMenuItem;
|
|
1359
|
+
if (!targetElement) {
|
|
1360
|
+
return;
|
|
1361
|
+
}
|
|
1362
|
+
targetElement.scrollIntoView({
|
|
1363
|
+
block: "nearest",
|
|
1364
|
+
behavior: "instant"
|
|
1365
|
+
});
|
|
1366
|
+
if (autoFocusOff) {
|
|
1367
|
+
return;
|
|
1368
|
+
}
|
|
1369
|
+
requestAnimationFrame(() => {
|
|
1370
|
+
targetElement.focus();
|
|
1371
|
+
});
|
|
1372
|
+
}
|
|
1373
|
+
function setRefs(node) {
|
|
1374
|
+
internalRef.current = node;
|
|
1375
|
+
if (ref) {
|
|
1376
|
+
if (typeof ref === "function") {
|
|
1377
|
+
ref(node);
|
|
1378
|
+
} else {
|
|
1379
|
+
ref.current = node;
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1382
|
+
}
|
|
1383
|
+
function stopPropagation(e) {
|
|
1384
|
+
e.stopPropagation();
|
|
1385
|
+
}
|
|
1386
|
+
};
|
|
1387
|
+
Menu.displayName = "Menu";
|
|
1388
|
+
|
|
1389
|
+
// src/components/Search.tsx
|
|
1390
|
+
var import_react10 = require("react");
|
|
1391
|
+
|
|
1392
|
+
// src/components/Input.tsx
|
|
1393
|
+
var import_react9 = require("react");
|
|
1394
|
+
var import_clsx7 = __toESM(require("clsx"), 1);
|
|
1395
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1396
|
+
var InputBase = (_a) => {
|
|
1397
|
+
var _b = _a, {
|
|
1398
|
+
id,
|
|
1399
|
+
testid,
|
|
1400
|
+
before,
|
|
1401
|
+
after,
|
|
1402
|
+
type,
|
|
1403
|
+
label,
|
|
1404
|
+
error,
|
|
1405
|
+
className,
|
|
1406
|
+
align = "left",
|
|
1407
|
+
caption,
|
|
1408
|
+
required,
|
|
1409
|
+
selectOnFocus,
|
|
1410
|
+
removeRoundness,
|
|
1411
|
+
inputContainerRef,
|
|
1412
|
+
removeBorder,
|
|
1413
|
+
wrapperClassName,
|
|
1414
|
+
focus,
|
|
1415
|
+
secondaryIconColor,
|
|
1416
|
+
fullWidth = true,
|
|
1417
|
+
wrapperRef
|
|
1418
|
+
} = _b, props = __objRest(_b, [
|
|
1419
|
+
"id",
|
|
1420
|
+
"testid",
|
|
1421
|
+
"before",
|
|
1422
|
+
"after",
|
|
1423
|
+
"type",
|
|
1424
|
+
"label",
|
|
1425
|
+
"error",
|
|
1426
|
+
"className",
|
|
1427
|
+
"align",
|
|
1428
|
+
"caption",
|
|
1429
|
+
"required",
|
|
1430
|
+
"selectOnFocus",
|
|
1431
|
+
"removeRoundness",
|
|
1432
|
+
"inputContainerRef",
|
|
1433
|
+
"removeBorder",
|
|
1434
|
+
"wrapperClassName",
|
|
1435
|
+
"focus",
|
|
1436
|
+
"secondaryIconColor",
|
|
1437
|
+
"fullWidth",
|
|
1438
|
+
"wrapperRef"
|
|
1439
|
+
]);
|
|
1440
|
+
const attributes = {
|
|
1441
|
+
"data-error": error && !focus || null,
|
|
1442
|
+
"data-focus": focus || null
|
|
1443
|
+
};
|
|
1444
|
+
const inputRef = (0, import_react9.useRef)(null);
|
|
1445
|
+
const inputId = id ? `${id}-input` : void 0;
|
|
1446
|
+
(0, import_react9.useEffect)(() => {
|
|
1447
|
+
var _a2;
|
|
1448
|
+
const input = inputRef.current;
|
|
1449
|
+
const focusHandler = () => {
|
|
1450
|
+
input == null ? void 0 : input.select();
|
|
1451
|
+
};
|
|
1452
|
+
if (selectOnFocus) {
|
|
1453
|
+
(_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
|
|
1454
|
+
return () => {
|
|
1455
|
+
input == null ? void 0 : input.removeEventListener("focus", focusHandler);
|
|
1456
|
+
};
|
|
1457
|
+
}
|
|
1458
|
+
}, [selectOnFocus]);
|
|
1459
|
+
const inputBaseClass = (0, import_clsx7.default)(
|
|
1460
|
+
fullWidth ? "w-full" : "w-fit",
|
|
1461
|
+
"flex flex-row items-center",
|
|
1462
|
+
"bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
|
|
1463
|
+
componentGap,
|
|
1464
|
+
baseTransition,
|
|
1465
|
+
"outline-transparent outline-2 -outline-offset-2",
|
|
1466
|
+
componentPaddingMinusBorder,
|
|
1467
|
+
!removeRoundness && "rounded-base",
|
|
1468
|
+
!removeBorder && "border border-border-primary-normal",
|
|
1469
|
+
"relative"
|
|
1470
|
+
);
|
|
1471
|
+
const inputFocusClass = (0, import_clsx7.default)(
|
|
1472
|
+
"has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
|
|
1473
|
+
);
|
|
1474
|
+
const inputDisabledClass = (0, import_clsx7.default)(
|
|
1475
|
+
"has-disabled:bg-background-action-secondary-disabled"
|
|
1476
|
+
);
|
|
1477
|
+
const inputReadOnlyClass = (0, import_clsx7.default)(
|
|
1478
|
+
"has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
|
|
1479
|
+
);
|
|
1480
|
+
const inputInvalidClass = (0, import_clsx7.default)(
|
|
1481
|
+
"has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
|
|
1482
|
+
);
|
|
1483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1484
|
+
"label",
|
|
1485
|
+
{
|
|
1486
|
+
id,
|
|
1487
|
+
"data-testid": testid,
|
|
1488
|
+
htmlFor: inputId,
|
|
1489
|
+
ref: inputContainerRef,
|
|
1490
|
+
className: (0, import_clsx7.default)(
|
|
1491
|
+
"w-full flex flex-col",
|
|
1492
|
+
"block",
|
|
1493
|
+
"text-text-primary-normal has-disabled:text-text-primary-disabled",
|
|
1494
|
+
componentGap
|
|
1495
|
+
),
|
|
1496
|
+
style: __spreadValues({}, props.style),
|
|
1497
|
+
children: [
|
|
1498
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx7.default)("flex items-center", componentGap), children: [
|
|
1499
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1500
|
+
Label,
|
|
1501
|
+
{
|
|
1502
|
+
id: id ? `${id}-label` : void 0,
|
|
1503
|
+
color: error ? "text-primary-error" : void 0,
|
|
1504
|
+
className: (0, import_clsx7.default)(
|
|
1505
|
+
props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
|
|
1506
|
+
),
|
|
1507
|
+
children: label
|
|
1508
|
+
}
|
|
1509
|
+
),
|
|
1510
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1511
|
+
"span",
|
|
1512
|
+
{
|
|
1513
|
+
className: (0, import_clsx7.default)(typography.label, "text-text-critical-normal"),
|
|
1514
|
+
children: "*"
|
|
1515
|
+
}
|
|
1516
|
+
)
|
|
1517
|
+
] }),
|
|
1518
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1519
|
+
"div",
|
|
1520
|
+
{
|
|
1521
|
+
className: (0, import_clsx7.default)(
|
|
1522
|
+
inputBaseClass,
|
|
1523
|
+
!props.disabled && inputInvalidClass,
|
|
1524
|
+
inputFocusClass,
|
|
1525
|
+
inputDisabledClass,
|
|
1526
|
+
inputReadOnlyClass,
|
|
1527
|
+
wrapperClassName
|
|
1528
|
+
),
|
|
1529
|
+
ref: (el) => {
|
|
1530
|
+
if (wrapperRef) {
|
|
1531
|
+
wrapperRef.current = el;
|
|
1532
|
+
}
|
|
1533
|
+
},
|
|
1534
|
+
children: [
|
|
1535
|
+
before,
|
|
1536
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1537
|
+
"input",
|
|
1538
|
+
__spreadProps(__spreadValues(__spreadValues({
|
|
1539
|
+
ref: (el) => {
|
|
1540
|
+
inputRef.current = el;
|
|
1541
|
+
},
|
|
1542
|
+
type,
|
|
1543
|
+
required
|
|
1544
|
+
}, props), attributes), {
|
|
1545
|
+
id: inputId,
|
|
1546
|
+
"data-testid": testid ? `${testid}-input` : void 0,
|
|
1547
|
+
className: (0, import_clsx7.default)(
|
|
1548
|
+
"flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
|
|
1549
|
+
"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
|
1550
|
+
"placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
|
|
1551
|
+
align === "right" && "text-right",
|
|
1552
|
+
align === "center" && "text-center",
|
|
1553
|
+
componentPaddingXUsingComponentGap,
|
|
1554
|
+
typography.paragraph,
|
|
1555
|
+
className,
|
|
1556
|
+
props.readOnly && !props.disabled && "!px-0"
|
|
1557
|
+
)
|
|
1558
|
+
})
|
|
1559
|
+
),
|
|
1560
|
+
secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
|
|
1561
|
+
]
|
|
1562
|
+
}
|
|
1563
|
+
),
|
|
1564
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1565
|
+
"div",
|
|
1566
|
+
{
|
|
1567
|
+
id: id ? `${id}-caption` : void 0,
|
|
1568
|
+
"data-testid": testid ? `${testid}-caption` : void 0,
|
|
1569
|
+
children: caption
|
|
1570
|
+
}
|
|
1571
|
+
)
|
|
1572
|
+
]
|
|
1573
|
+
}
|
|
1574
|
+
);
|
|
1575
|
+
};
|
|
1576
|
+
var Input = (_a) => {
|
|
1577
|
+
var _b = _a, {
|
|
1578
|
+
variant = "default",
|
|
1579
|
+
decimals,
|
|
1580
|
+
uom,
|
|
1581
|
+
removeSearchIcon,
|
|
1582
|
+
value: propValue,
|
|
1583
|
+
onChange,
|
|
1584
|
+
onBlur,
|
|
1585
|
+
onClear,
|
|
1586
|
+
id,
|
|
1587
|
+
testid
|
|
1588
|
+
} = _b, props = __objRest(_b, [
|
|
1589
|
+
"variant",
|
|
1590
|
+
"decimals",
|
|
1591
|
+
"uom",
|
|
1592
|
+
"removeSearchIcon",
|
|
1593
|
+
"value",
|
|
1594
|
+
"onChange",
|
|
1595
|
+
"onBlur",
|
|
1596
|
+
"onClear",
|
|
1597
|
+
"id",
|
|
1598
|
+
"testid"
|
|
1599
|
+
]);
|
|
1600
|
+
const [internalValue, setInternalValue] = (0, import_react9.useState)("");
|
|
1601
|
+
const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
|
|
1602
|
+
(0, import_react9.useEffect)(() => {
|
|
1603
|
+
var _a2;
|
|
1604
|
+
const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
|
|
1605
|
+
setInternalValue(stringValue);
|
|
1606
|
+
setDisplayValue(stringValue);
|
|
1607
|
+
}, [propValue]);
|
|
1608
|
+
(0, import_react9.useEffect)(() => {
|
|
1609
|
+
var _a2;
|
|
1610
|
+
if (variant !== "currency") {
|
|
1611
|
+
return;
|
|
1612
|
+
}
|
|
1613
|
+
const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
|
|
1614
|
+
if (!stringValue) {
|
|
1615
|
+
return;
|
|
1616
|
+
}
|
|
1617
|
+
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
1618
|
+
setInternalValue(formatted);
|
|
1619
|
+
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
1620
|
+
}, []);
|
|
1621
|
+
const getInputProps = () => {
|
|
1622
|
+
var _a2;
|
|
1623
|
+
const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
|
|
1624
|
+
id
|
|
1625
|
+
}), getDecimalPlaceholder(decimals)), {
|
|
1626
|
+
value: propValue
|
|
1627
|
+
});
|
|
1628
|
+
switch (variant) {
|
|
1629
|
+
case "search":
|
|
1630
|
+
return __spreadProps(__spreadValues({}, baseProps), {
|
|
1631
|
+
placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
|
|
1632
|
+
className: "!mr-6",
|
|
1633
|
+
value: displayValue
|
|
1634
|
+
});
|
|
1635
|
+
case "finder":
|
|
1636
|
+
return baseProps;
|
|
1637
|
+
case "currency":
|
|
1638
|
+
return __spreadProps(__spreadValues({}, baseProps), {
|
|
1639
|
+
align: "right",
|
|
1640
|
+
type: "text",
|
|
1641
|
+
value: displayValue
|
|
1642
|
+
});
|
|
1643
|
+
case "percentage":
|
|
1644
|
+
case "uom":
|
|
1645
|
+
return __spreadProps(__spreadValues({}, baseProps), {
|
|
1646
|
+
type: "number",
|
|
1647
|
+
align: "right"
|
|
1648
|
+
});
|
|
1649
|
+
default:
|
|
1650
|
+
return baseProps;
|
|
1651
|
+
}
|
|
1652
|
+
};
|
|
1653
|
+
const getBeforeElement = () => {
|
|
1654
|
+
if (props.before) return props.before;
|
|
1655
|
+
switch (variant) {
|
|
1656
|
+
case "search":
|
|
1657
|
+
return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" }) }) : null;
|
|
1658
|
+
case "currency":
|
|
1659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) });
|
|
1660
|
+
default:
|
|
1661
|
+
return null;
|
|
1662
|
+
}
|
|
1663
|
+
};
|
|
1664
|
+
const getAfterElement = () => {
|
|
1665
|
+
if (props.after) return props.after;
|
|
1666
|
+
switch (variant) {
|
|
1667
|
+
case "search": {
|
|
1668
|
+
const hasValue = displayValue.length > 0;
|
|
1669
|
+
return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1670
|
+
Icon,
|
|
1671
|
+
{
|
|
1672
|
+
id: id ? `${id}-clear-button` : void 0,
|
|
1673
|
+
testid: testid ? `${testid}-clear-button` : void 0,
|
|
1674
|
+
name: "close",
|
|
1675
|
+
onClick: handleSearchReset,
|
|
1676
|
+
className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
|
|
1677
|
+
}
|
|
1678
|
+
) : null;
|
|
1679
|
+
}
|
|
1680
|
+
case "finder":
|
|
1681
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
|
|
1682
|
+
case "uom":
|
|
1683
|
+
return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
|
|
1684
|
+
case "percentage":
|
|
1685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
|
|
1686
|
+
default:
|
|
1687
|
+
return null;
|
|
1688
|
+
}
|
|
1689
|
+
};
|
|
1690
|
+
const handleSearchReset = () => {
|
|
1691
|
+
setInternalValue("");
|
|
1692
|
+
setDisplayValue("");
|
|
1693
|
+
if (onChange) {
|
|
1694
|
+
const syntheticEvent = {
|
|
1695
|
+
target: { value: "" }
|
|
1696
|
+
};
|
|
1697
|
+
if (typeof onChange === "function") {
|
|
1698
|
+
onChange(syntheticEvent);
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
onClear == null ? void 0 : onClear();
|
|
1702
|
+
};
|
|
1703
|
+
const handleChange = (e) => {
|
|
1704
|
+
const rawValue = e.target.value;
|
|
1705
|
+
if (variant === "currency") {
|
|
1706
|
+
const raw = rawValue.replace(/,/g, "");
|
|
1707
|
+
if (raw === "") {
|
|
1708
|
+
setInternalValue("");
|
|
1709
|
+
setDisplayValue("");
|
|
1710
|
+
if (onChange) {
|
|
1711
|
+
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1712
|
+
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
1713
|
+
});
|
|
1714
|
+
onChange(syntheticEvent);
|
|
1715
|
+
}
|
|
1716
|
+
return;
|
|
1717
|
+
}
|
|
1718
|
+
const regex = /^\d*\.?\d*$/;
|
|
1719
|
+
if (!regex.test(raw)) return;
|
|
1720
|
+
const parts = raw.split(".");
|
|
1721
|
+
const currentDecimals = decimals != null ? decimals : 2;
|
|
1722
|
+
if (parts.length === 2 && parts[1].length > currentDecimals) return;
|
|
1723
|
+
setInternalValue(raw);
|
|
1724
|
+
setDisplayValue(formatCurrencyDisplay(raw));
|
|
1725
|
+
const asNumber = Number(raw);
|
|
1726
|
+
if (!isNaN(asNumber) && onChange) {
|
|
1727
|
+
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1728
|
+
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
1729
|
+
});
|
|
1730
|
+
onChange(syntheticEvent);
|
|
1731
|
+
}
|
|
1732
|
+
return;
|
|
1733
|
+
}
|
|
1734
|
+
setInternalValue(rawValue);
|
|
1735
|
+
setDisplayValue(rawValue);
|
|
1736
|
+
if (typeof onChange === "function") {
|
|
1737
|
+
onChange(e);
|
|
1738
|
+
}
|
|
1739
|
+
};
|
|
1740
|
+
const handleBlur = (e) => {
|
|
1741
|
+
if (!internalValue) {
|
|
1742
|
+
return;
|
|
1743
|
+
}
|
|
1744
|
+
if (variant === "currency") {
|
|
1745
|
+
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
1746
|
+
setInternalValue(formatted);
|
|
1747
|
+
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
1748
|
+
const asNumber = Number(formatted);
|
|
1749
|
+
if (!isNaN(asNumber) && onChange) {
|
|
1750
|
+
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1751
|
+
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
1752
|
+
});
|
|
1753
|
+
onChange(syntheticEvent);
|
|
1754
|
+
}
|
|
1755
|
+
} else if (variant === "uom" || variant === "percentage") {
|
|
1756
|
+
const formattedValue = formatDecimalValue(e.target.value, decimals);
|
|
1757
|
+
e.target.value = formattedValue;
|
|
1758
|
+
}
|
|
1759
|
+
onBlur == null ? void 0 : onBlur(e);
|
|
1760
|
+
};
|
|
1761
|
+
const inputProps = getInputProps();
|
|
1762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1763
|
+
InputBase,
|
|
1764
|
+
__spreadProps(__spreadValues({}, inputProps), {
|
|
1765
|
+
before: getBeforeElement(),
|
|
1766
|
+
after: getAfterElement(),
|
|
1767
|
+
onChange: handleChange,
|
|
1768
|
+
onBlur: handleBlur,
|
|
1769
|
+
testid
|
|
1770
|
+
})
|
|
1771
|
+
);
|
|
1772
|
+
};
|
|
1773
|
+
Input.displayName = "Input";
|
|
1774
|
+
var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
|
|
1775
|
+
var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
|
|
1776
|
+
var Currency = (props) => {
|
|
1777
|
+
var _a;
|
|
1778
|
+
const handleCurrencyChange = (e) => {
|
|
1779
|
+
var _a2;
|
|
1780
|
+
(_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
|
|
1781
|
+
};
|
|
1782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1783
|
+
Input,
|
|
1784
|
+
__spreadProps(__spreadValues({}, props), {
|
|
1785
|
+
variant: "currency",
|
|
1786
|
+
decimals: (_a = props.decimals) != null ? _a : 2,
|
|
1787
|
+
onChange: handleCurrencyChange
|
|
1788
|
+
})
|
|
1789
|
+
);
|
|
1790
|
+
};
|
|
1791
|
+
var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
|
|
1792
|
+
Finder.displayName = "Finder";
|
|
1793
|
+
UOM.displayName = "UOM";
|
|
1794
|
+
Currency.displayName = "Currency";
|
|
1795
|
+
Percentage.displayName = "Percentage";
|
|
1796
|
+
|
|
1797
|
+
// src/components/Search.tsx
|
|
1798
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1799
|
+
var Search = (_a) => {
|
|
1800
|
+
var _b = _a, {
|
|
1801
|
+
id,
|
|
1802
|
+
testid,
|
|
1803
|
+
label,
|
|
1804
|
+
error,
|
|
1805
|
+
children,
|
|
1806
|
+
readOnly,
|
|
1807
|
+
renderMenu,
|
|
1808
|
+
onClick,
|
|
1809
|
+
wrapperClassName,
|
|
1810
|
+
removeRoundness
|
|
1811
|
+
} = _b, props = __objRest(_b, [
|
|
1812
|
+
"id",
|
|
1813
|
+
"testid",
|
|
1814
|
+
"label",
|
|
1815
|
+
"error",
|
|
1816
|
+
"children",
|
|
1817
|
+
"readOnly",
|
|
1818
|
+
"renderMenu",
|
|
1819
|
+
"onClick",
|
|
1820
|
+
"wrapperClassName",
|
|
1821
|
+
"removeRoundness"
|
|
1822
|
+
]);
|
|
1823
|
+
const inputRef = (0, import_react10.useRef)(null);
|
|
1824
|
+
const inputContainerRef = (0, import_react10.useRef)(null);
|
|
1825
|
+
const preventFocusOnInitialRender = (0, import_react10.useRef)(true);
|
|
1826
|
+
const [show, setShow] = (0, import_react10.useState)(false);
|
|
1827
|
+
const [clearing, setClearing] = (0, import_react10.useState)(false);
|
|
1828
|
+
const uniqueId = (0, import_react10.useId)();
|
|
1829
|
+
const searchMenuName = `search-menu-${uniqueId}`;
|
|
1830
|
+
(0, import_react10.useEffect)(() => {
|
|
1831
|
+
var _a2;
|
|
1832
|
+
if (preventFocusOnInitialRender.current) {
|
|
1833
|
+
preventFocusOnInitialRender.current = false;
|
|
1834
|
+
return;
|
|
1835
|
+
}
|
|
1836
|
+
(_a2 = inputRef.current) == null ? void 0 : _a2.focus();
|
|
1837
|
+
}, [props.value]);
|
|
1838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
1839
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1840
|
+
Input,
|
|
1841
|
+
__spreadValues({
|
|
1842
|
+
id,
|
|
1843
|
+
testid,
|
|
1844
|
+
variant: "search",
|
|
1845
|
+
inputContainerRef,
|
|
1846
|
+
ref: inputRef,
|
|
1847
|
+
label,
|
|
1848
|
+
wrapperClassName,
|
|
1849
|
+
onClick: (e) => {
|
|
1850
|
+
if (props.disabled || readOnly) {
|
|
1851
|
+
return;
|
|
1852
|
+
}
|
|
1853
|
+
if (clearing) {
|
|
1854
|
+
setClearing(false);
|
|
1855
|
+
return;
|
|
1856
|
+
}
|
|
1857
|
+
onClick == null ? void 0 : onClick(e);
|
|
1858
|
+
setShow(!show);
|
|
1859
|
+
},
|
|
1860
|
+
onClear: () => {
|
|
1861
|
+
setClearing(true);
|
|
1862
|
+
},
|
|
1863
|
+
onKeyDown: (e) => {
|
|
1864
|
+
setShow(true);
|
|
1865
|
+
if (["ArrowUp", "ArrowDown"].includes(e.key)) {
|
|
1866
|
+
e.preventDefault();
|
|
1867
|
+
const menu = document.querySelector(
|
|
1868
|
+
`[data-menu="${searchMenuName}"]`
|
|
1869
|
+
);
|
|
1870
|
+
const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
|
|
1871
|
+
if (selectedMenuOption) {
|
|
1872
|
+
const allMenuOptions = Array.from(
|
|
1873
|
+
(menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
|
|
1874
|
+
);
|
|
1875
|
+
const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
|
|
1876
|
+
let targetOption;
|
|
1877
|
+
if (e.key === "ArrowDown") {
|
|
1878
|
+
targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0];
|
|
1879
|
+
} else {
|
|
1880
|
+
targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1];
|
|
1881
|
+
}
|
|
1882
|
+
targetOption == null ? void 0 : targetOption.focus();
|
|
1883
|
+
} else {
|
|
1884
|
+
const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
|
|
1885
|
+
'[role="menuitem"]:last-child'
|
|
1886
|
+
);
|
|
1887
|
+
toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
|
|
1888
|
+
}
|
|
1889
|
+
}
|
|
1890
|
+
},
|
|
1891
|
+
error,
|
|
1892
|
+
readOnly,
|
|
1893
|
+
removeRoundness,
|
|
1894
|
+
focus: renderMenu && show
|
|
1895
|
+
}, props)
|
|
1896
|
+
),
|
|
1897
|
+
renderMenu ? renderMenu({
|
|
1898
|
+
id: id ? `${id}-menu` : void 0,
|
|
1899
|
+
testid: testid ? `${testid}-menu` : void 0,
|
|
1900
|
+
positionTo: inputContainerRef,
|
|
1901
|
+
show,
|
|
1902
|
+
setShow,
|
|
1903
|
+
topOffset: props.caption ? -16 : null,
|
|
1904
|
+
autoFocusOff: true,
|
|
1905
|
+
menuName: searchMenuName
|
|
1906
|
+
}) : children
|
|
1907
|
+
] });
|
|
1908
|
+
};
|
|
1909
|
+
Search.displayName = "Search";
|
|
1910
|
+
|
|
1911
|
+
// src/components/DataGridCell.tsx
|
|
1912
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1913
|
+
var DataGridCell = (0, import_react11.memo)(
|
|
1914
|
+
(_a) => {
|
|
1915
|
+
var _b = _a, {
|
|
1916
|
+
id,
|
|
1917
|
+
type = "default",
|
|
1918
|
+
component = "static",
|
|
1919
|
+
children,
|
|
1920
|
+
className,
|
|
1921
|
+
locked = false,
|
|
1922
|
+
noPadding = false,
|
|
1923
|
+
paddedLeft = false,
|
|
1924
|
+
style,
|
|
1925
|
+
onClick,
|
|
1926
|
+
onRightClick,
|
|
1927
|
+
error,
|
|
1928
|
+
warning,
|
|
1929
|
+
center,
|
|
1930
|
+
width,
|
|
1931
|
+
minWidth,
|
|
1932
|
+
testid
|
|
1933
|
+
} = _b, props = __objRest(_b, [
|
|
1934
|
+
"id",
|
|
1935
|
+
"type",
|
|
1936
|
+
"component",
|
|
1937
|
+
"children",
|
|
1938
|
+
"className",
|
|
1939
|
+
"locked",
|
|
1940
|
+
"noPadding",
|
|
1941
|
+
"paddedLeft",
|
|
1942
|
+
"style",
|
|
1943
|
+
"onClick",
|
|
1944
|
+
"onRightClick",
|
|
1945
|
+
"error",
|
|
1946
|
+
"warning",
|
|
1947
|
+
"center",
|
|
1948
|
+
"width",
|
|
1949
|
+
"minWidth",
|
|
1950
|
+
"testid"
|
|
1951
|
+
]);
|
|
1952
|
+
const Element = type === "header" ? "th" : "td";
|
|
1953
|
+
const timerRef = (0, import_react11.useRef)(null);
|
|
1954
|
+
const [isGrabbing, setIsGrabbing] = (0, import_react11.useState)(false);
|
|
1955
|
+
const [isPointerPressed, setIsPointerPressed] = (0, import_react11.useState)(false);
|
|
1956
|
+
(0, import_react11.useEffect)(() => {
|
|
1957
|
+
return () => {
|
|
1958
|
+
if (timerRef.current) {
|
|
1959
|
+
clearTimeout(timerRef.current);
|
|
1960
|
+
timerRef.current = null;
|
|
1961
|
+
}
|
|
1962
|
+
};
|
|
1963
|
+
}, []);
|
|
1964
|
+
const handlePointerDown = (_event) => {
|
|
1965
|
+
setIsPointerPressed(true);
|
|
1966
|
+
timerRef.current = window.setTimeout(() => {
|
|
1967
|
+
setIsGrabbing(true);
|
|
1968
|
+
}, 500);
|
|
1969
|
+
};
|
|
1970
|
+
const handlePointerUp = (event) => {
|
|
1971
|
+
if (timerRef.current) {
|
|
1972
|
+
clearTimeout(timerRef.current);
|
|
1973
|
+
timerRef.current = null;
|
|
1974
|
+
}
|
|
1975
|
+
const rightClick = event.nativeEvent instanceof MouseEvent && event.nativeEvent.button === 2;
|
|
1976
|
+
if (!isGrabbing && onClick && !rightClick && isPointerPressed) {
|
|
1977
|
+
onClick(event);
|
|
1978
|
+
}
|
|
1979
|
+
if (rightClick && onRightClick) {
|
|
1980
|
+
onRightClick();
|
|
1981
|
+
}
|
|
1982
|
+
setIsGrabbing(false);
|
|
1983
|
+
setIsPointerPressed(false);
|
|
1984
|
+
};
|
|
1985
|
+
const handlePointerLeave = () => {
|
|
1986
|
+
if (timerRef.current) {
|
|
1987
|
+
clearTimeout(timerRef.current);
|
|
1988
|
+
timerRef.current = null;
|
|
1989
|
+
}
|
|
1990
|
+
};
|
|
1991
|
+
const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
|
|
1992
|
+
const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
|
|
1993
|
+
const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && (0, import_clsx8.default)("border-r");
|
|
1994
|
+
const buttonComponentStyles = component === "button" && (0, import_clsx8.default)("border-r border-b border-border-primary-normal");
|
|
1995
|
+
const iconComponentStyles = component === "icon" && (0, import_clsx8.default)("border-l");
|
|
1996
|
+
const cellClasses = (0, import_clsx8.default)(
|
|
1997
|
+
headerTypeStyles,
|
|
1998
|
+
buttonComponentStyles,
|
|
1999
|
+
headerBgStyles,
|
|
2000
|
+
lockedHeaderBgStyles,
|
|
2001
|
+
iconComponentStyles,
|
|
2002
|
+
className,
|
|
2003
|
+
"flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
|
|
2004
|
+
"focus-within:!z-10",
|
|
2005
|
+
"overflow-x-hidden",
|
|
2006
|
+
"overflow-y-hidden",
|
|
2007
|
+
component === "input" && "border",
|
|
2008
|
+
component === "input" && !error && !warning && "border-border-primary-normal",
|
|
2009
|
+
component === "input" && error && "border-border-primary-error",
|
|
2010
|
+
component === "input" && warning && "border-background-warning-normal",
|
|
2011
|
+
!["button", "icon"].includes(component) && !noPadding && componentPadding,
|
|
2012
|
+
paddedLeft && "pl-2",
|
|
2013
|
+
component === "icon" && "border-l",
|
|
2014
|
+
isGrabbing && "!cursor-grabbing",
|
|
2015
|
+
component === "checkbox" || center && "justify-center"
|
|
2016
|
+
);
|
|
2017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2018
|
+
Element,
|
|
2019
|
+
__spreadProps(__spreadValues({
|
|
2020
|
+
id,
|
|
2021
|
+
"data-testid": testid,
|
|
2022
|
+
className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
|
|
2023
|
+
style: { width, minWidth }
|
|
2024
|
+
}, props), {
|
|
2025
|
+
"data-theme": type === "header" && !locked ? "brand" : void 0,
|
|
2026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2027
|
+
"div",
|
|
2028
|
+
{
|
|
2029
|
+
className: cellClasses,
|
|
2030
|
+
style: __spreadValues({}, style),
|
|
2031
|
+
onMouseDown: handlePointerDown,
|
|
2032
|
+
onMouseUp: handlePointerUp,
|
|
2033
|
+
onMouseLeave: handlePointerLeave,
|
|
2034
|
+
onTouchStart: handlePointerDown,
|
|
2035
|
+
onTouchEnd: handlePointerUp,
|
|
2036
|
+
onTouchCancel: handlePointerLeave,
|
|
2037
|
+
onContextMenu: (e) => e.preventDefault(),
|
|
2038
|
+
children
|
|
2039
|
+
}
|
|
2040
|
+
)
|
|
2041
|
+
})
|
|
2042
|
+
);
|
|
2043
|
+
}
|
|
2044
|
+
);
|
|
2045
|
+
DataGridCell.displayName = "DataGridCell";
|
|
2046
|
+
function DataCellHeader(_a) {
|
|
2047
|
+
var _b = _a, {
|
|
2048
|
+
header,
|
|
2049
|
+
children,
|
|
2050
|
+
setNodeRef,
|
|
2051
|
+
node,
|
|
2052
|
+
id,
|
|
2053
|
+
testid,
|
|
2054
|
+
useMenuDefaultMinWidth
|
|
2055
|
+
} = _b, props = __objRest(_b, [
|
|
2056
|
+
"header",
|
|
2057
|
+
"children",
|
|
2058
|
+
"setNodeRef",
|
|
2059
|
+
"node",
|
|
2060
|
+
"id",
|
|
2061
|
+
"testid",
|
|
2062
|
+
"useMenuDefaultMinWidth"
|
|
2063
|
+
]);
|
|
2064
|
+
var _a2;
|
|
2065
|
+
const [showMenu, setShowMenu] = (0, import_react11.useState)(false);
|
|
2066
|
+
const [filter, setFilter] = (0, import_react11.useState)(
|
|
2067
|
+
(_a2 = header.column.getFilterValue()) != null ? _a2 : ""
|
|
2068
|
+
);
|
|
2069
|
+
const ref = (0, import_react11.useRef)(null);
|
|
2070
|
+
const predeterminedPinned = (0, import_react11.useRef)(false);
|
|
2071
|
+
const { column, getContext } = header;
|
|
2072
|
+
const { id: columnId, setFilterValue } = column;
|
|
2073
|
+
const {
|
|
2074
|
+
menuRootRef,
|
|
2075
|
+
isMenuActive,
|
|
2076
|
+
registerSubMenu,
|
|
2077
|
+
listeners: subMenuListeners,
|
|
2078
|
+
mobileHide
|
|
2079
|
+
} = useSubMenuSystem(node ? node : ref);
|
|
2080
|
+
(0, import_react11.useEffect)(() => {
|
|
2081
|
+
var _a3, _b2, _c;
|
|
2082
|
+
const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
|
|
2083
|
+
const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
|
|
2084
|
+
const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
|
|
2085
|
+
predeterminedPinned.current = [...left, ...right].includes(columnId);
|
|
2086
|
+
}, [columnId, getContext]);
|
|
2087
|
+
(0, import_react11.useEffect)(() => {
|
|
2088
|
+
const handler = setTimeout(() => {
|
|
2089
|
+
setFilterValue(filter);
|
|
2090
|
+
}, 500);
|
|
2091
|
+
return () => {
|
|
2092
|
+
clearTimeout(handler);
|
|
2093
|
+
};
|
|
2094
|
+
}, [filter, setFilterValue]);
|
|
2095
|
+
const style = __spreadValues({
|
|
2096
|
+
position: "relative",
|
|
2097
|
+
whiteSpace: "nowrap",
|
|
2098
|
+
minWidth: header.column.getSize(),
|
|
2099
|
+
"--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
|
|
2100
|
+
"--color-icon-on-action-primary-normal": "var(--color-text-brand-primary-normal)",
|
|
2101
|
+
"--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
|
|
2102
|
+
}, props.style);
|
|
2103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2104
|
+
DataGridCell,
|
|
2105
|
+
__spreadProps(__spreadValues({
|
|
2106
|
+
id,
|
|
2107
|
+
testid,
|
|
2108
|
+
ref: setNodeRef ? setNodeRef : ref,
|
|
2109
|
+
type: "header",
|
|
2110
|
+
component: "header",
|
|
2111
|
+
style,
|
|
2112
|
+
minWidth: `${header.column.getSize()}px`,
|
|
2113
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
2114
|
+
onRightClick: () => setShowMenu(!showMenu)
|
|
2115
|
+
}, props), {
|
|
2116
|
+
children: [
|
|
2117
|
+
children,
|
|
2118
|
+
header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2119
|
+
Menu,
|
|
2120
|
+
{
|
|
2121
|
+
id: id ? `${id}-menu` : void 0,
|
|
2122
|
+
testid: testid ? `${testid}-menu` : void 0,
|
|
2123
|
+
ref: menuRootRef,
|
|
2124
|
+
positionTo: node ? node : ref,
|
|
2125
|
+
show: showMenu,
|
|
2126
|
+
setShow: setShowMenu,
|
|
2127
|
+
mobileHide,
|
|
2128
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
2129
|
+
children: [
|
|
2130
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2131
|
+
MenuOption,
|
|
2132
|
+
__spreadProps(__spreadValues({
|
|
2133
|
+
id: id ? `${id}-filter-option` : void 0,
|
|
2134
|
+
testid: testid ? `${testid}-filter-option` : void 0
|
|
2135
|
+
}, subMenuListeners), {
|
|
2136
|
+
subMenu: (_b2) => {
|
|
2137
|
+
var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
|
|
2138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2139
|
+
Menu,
|
|
2140
|
+
__spreadProps(__spreadValues({
|
|
2141
|
+
id: id ? `${id}-filter-submenu` : void 0,
|
|
2142
|
+
testid: testid ? `${testid}-filter-submenu` : void 0
|
|
2143
|
+
}, props2), {
|
|
2144
|
+
show: isMenuActive(menuId, subMenuLevel),
|
|
2145
|
+
ref: (el) => {
|
|
2146
|
+
registerSubMenu(menuId, el);
|
|
2147
|
+
},
|
|
2148
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
2149
|
+
children: [
|
|
2150
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2151
|
+
Search,
|
|
2152
|
+
{
|
|
2153
|
+
id: id ? `${id}-filter-search` : void 0,
|
|
2154
|
+
testid: testid ? `${testid}-filter-search` : void 0,
|
|
2155
|
+
onChange: (event) => {
|
|
2156
|
+
setFilter(event.target.value);
|
|
2157
|
+
},
|
|
2158
|
+
onKeyDown: (event) => {
|
|
2159
|
+
if ([" ", "Space"].includes(event.key)) {
|
|
2160
|
+
event.stopPropagation();
|
|
2161
|
+
}
|
|
2162
|
+
},
|
|
2163
|
+
value: filter != null ? filter : ""
|
|
2164
|
+
}
|
|
2165
|
+
) }),
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2167
|
+
MenuOption,
|
|
2168
|
+
{
|
|
2169
|
+
id: id ? `${id}-filter-contains` : void 0,
|
|
2170
|
+
testid: testid ? `${testid}-filter-contains` : void 0,
|
|
2171
|
+
onClick: handleFilterFnChange,
|
|
2172
|
+
before: menuOptionIcon("includesString"),
|
|
2173
|
+
children: "Contains"
|
|
2174
|
+
}
|
|
2175
|
+
),
|
|
2176
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2177
|
+
MenuOption,
|
|
2178
|
+
{
|
|
2179
|
+
id: id ? `${id}-filter-startswith` : void 0,
|
|
2180
|
+
testid: testid ? `${testid}-filter-startswith` : void 0,
|
|
2181
|
+
onClick: handleFilterFnChange,
|
|
2182
|
+
before: menuOptionIcon("startsWith"),
|
|
2183
|
+
children: "Starts with"
|
|
2184
|
+
}
|
|
2185
|
+
),
|
|
2186
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2187
|
+
MenuOption,
|
|
2188
|
+
{
|
|
2189
|
+
id: id ? `${id}-filter-endswith` : void 0,
|
|
2190
|
+
testid: testid ? `${testid}-filter-endswith` : void 0,
|
|
2191
|
+
onClick: handleFilterFnChange,
|
|
2192
|
+
before: menuOptionIcon("endsWith"),
|
|
2193
|
+
children: "Ends with"
|
|
2194
|
+
}
|
|
2195
|
+
)
|
|
2196
|
+
]
|
|
2197
|
+
})
|
|
2198
|
+
);
|
|
2199
|
+
},
|
|
2200
|
+
children: "Filter"
|
|
2201
|
+
})
|
|
2202
|
+
),
|
|
2203
|
+
!predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2204
|
+
MenuOption,
|
|
2205
|
+
__spreadProps(__spreadValues({
|
|
2206
|
+
onClick: () => {
|
|
2207
|
+
setShowMenu(!showMenu);
|
|
2208
|
+
}
|
|
2209
|
+
}, subMenuListeners), {
|
|
2210
|
+
subMenu: (_d) => {
|
|
2211
|
+
var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
|
|
2212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2213
|
+
Menu,
|
|
2214
|
+
__spreadProps(__spreadValues({}, props2), {
|
|
2215
|
+
show: isMenuActive(menuId, subMenuLevel),
|
|
2216
|
+
ref: (el) => {
|
|
2217
|
+
registerSubMenu(menuId, el);
|
|
2218
|
+
},
|
|
2219
|
+
children: [
|
|
2220
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2221
|
+
MenuOption,
|
|
2222
|
+
{
|
|
2223
|
+
selected: header.column.getIsPinned() === "left",
|
|
2224
|
+
onClick: () => {
|
|
2225
|
+
if (header.column.getIsPinned() === "left") {
|
|
2226
|
+
header.column.pin(false);
|
|
2227
|
+
} else {
|
|
2228
|
+
header.column.pin("left");
|
|
2229
|
+
}
|
|
2230
|
+
},
|
|
2231
|
+
after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
|
|
2232
|
+
children: "Left"
|
|
2233
|
+
}
|
|
2234
|
+
),
|
|
2235
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2236
|
+
MenuOption,
|
|
2237
|
+
{
|
|
2238
|
+
selected: header.column.getIsPinned() === "right",
|
|
2239
|
+
onClick: () => {
|
|
2240
|
+
if (header.column.getIsPinned() === "right") {
|
|
2241
|
+
header.column.pin(false);
|
|
2242
|
+
} else {
|
|
2243
|
+
header.column.pin("right");
|
|
2244
|
+
}
|
|
2245
|
+
},
|
|
2246
|
+
after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
|
|
2247
|
+
children: "Right"
|
|
2248
|
+
}
|
|
2249
|
+
)
|
|
2250
|
+
]
|
|
2251
|
+
})
|
|
2252
|
+
);
|
|
2253
|
+
},
|
|
2254
|
+
children: `Freeze [${header.column.columnDef.header}]`
|
|
2255
|
+
})
|
|
2256
|
+
)
|
|
2257
|
+
]
|
|
2258
|
+
}
|
|
2259
|
+
)
|
|
2260
|
+
]
|
|
2261
|
+
})
|
|
2262
|
+
);
|
|
2263
|
+
function menuOptionIcon(value) {
|
|
2264
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2265
|
+
Icon,
|
|
2266
|
+
{
|
|
2267
|
+
name: "check",
|
|
2268
|
+
className: (0, import_clsx8.default)(
|
|
2269
|
+
header.column.columnDef.filterFn !== value && "text-transparent"
|
|
2270
|
+
)
|
|
2271
|
+
}
|
|
2272
|
+
);
|
|
2273
|
+
}
|
|
2274
|
+
function handleFilterFnChange(_id, value) {
|
|
2275
|
+
let filterFn = "includesString";
|
|
2276
|
+
const currentFilterFn = header.column.columnDef.filterFn;
|
|
2277
|
+
if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
|
|
2278
|
+
filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
|
|
2279
|
+
}
|
|
2280
|
+
if ((value == null ? void 0 : value.toLowerCase()) === "ends with") {
|
|
2281
|
+
filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
|
|
2282
|
+
}
|
|
2283
|
+
if ((value == null ? void 0 : value.toLowerCase()) === "contains") {
|
|
2284
|
+
filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
|
|
2285
|
+
}
|
|
2286
|
+
header.column.columnDef.filterFn = filterFn;
|
|
2287
|
+
header.column.setFilterValue(filter);
|
|
2288
|
+
}
|
|
2289
|
+
}
|
|
2290
|
+
DataCellHeader.displayName = "DataCellHeader";
|
|
2291
|
+
function DraggableCellHeader(_a) {
|
|
2292
|
+
var _b = _a, {
|
|
2293
|
+
header,
|
|
2294
|
+
children
|
|
2295
|
+
} = _b, props = __objRest(_b, [
|
|
2296
|
+
"header",
|
|
2297
|
+
"children"
|
|
2298
|
+
]);
|
|
2299
|
+
const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
|
|
2300
|
+
id: header.column.id
|
|
2301
|
+
});
|
|
2302
|
+
const style = {
|
|
2303
|
+
opacity: isDragging ? 0.8 : 1,
|
|
2304
|
+
position: "relative",
|
|
2305
|
+
transform: CSS.Translate.toString(transform),
|
|
2306
|
+
transition: "width transform 0.2s ease-in-out",
|
|
2307
|
+
whiteSpace: "nowrap",
|
|
2308
|
+
zIndex: isDragging ? 1 : 0,
|
|
2309
|
+
"--color-text-primary-normal": "var(--color-action-000)",
|
|
2310
|
+
"--color-icon-on-action-primary-normal": "var(--color-action-000)",
|
|
2311
|
+
userSelect: "none"
|
|
2312
|
+
};
|
|
2313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2314
|
+
DataCellHeader,
|
|
2315
|
+
__spreadProps(__spreadValues(__spreadValues(__spreadValues({
|
|
2316
|
+
header,
|
|
2317
|
+
setNodeRef,
|
|
2318
|
+
node,
|
|
2319
|
+
style
|
|
2320
|
+
}, props), attributes), listeners), {
|
|
2321
|
+
children
|
|
2322
|
+
})
|
|
2323
|
+
);
|
|
2324
|
+
}
|
|
2325
|
+
DraggableCellHeader.displayName = "DraggableCellHeader";
|
|
2326
|
+
function DragAlongCell(_a) {
|
|
2327
|
+
var _b = _a, {
|
|
2328
|
+
cell,
|
|
2329
|
+
children
|
|
2330
|
+
} = _b, props = __objRest(_b, [
|
|
2331
|
+
"cell",
|
|
2332
|
+
"children"
|
|
2333
|
+
]);
|
|
2334
|
+
const { isDragging, setNodeRef, transform } = (0, import_sortable.useSortable)({
|
|
2335
|
+
id: cell.column.id
|
|
2336
|
+
});
|
|
2337
|
+
const style = {
|
|
2338
|
+
opacity: isDragging ? 0.8 : 1,
|
|
2339
|
+
position: "relative",
|
|
2340
|
+
transform: CSS.Translate.toString(transform),
|
|
2341
|
+
transition: "width transform 0.2s ease-in-out",
|
|
2342
|
+
minWidth: cell.column.getSize(),
|
|
2343
|
+
zIndex: isDragging ? 1 : 0
|
|
2344
|
+
};
|
|
2345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
|
|
2346
|
+
}
|
|
2347
|
+
DragAlongCell.displayName = "DragAlongCell";
|
|
2348
|
+
|
|
2349
|
+
// src/components/DataGrid/index.tsx
|
|
2350
|
+
var import_react16 = __toESM(require("react"), 1);
|
|
2351
|
+
var import_react_table3 = require("@tanstack/react-table");
|
|
2352
|
+
var import_core = require("@dnd-kit/core");
|
|
2353
|
+
var import_sortable2 = require("@dnd-kit/sortable");
|
|
2354
|
+
var import_modifiers = require("@dnd-kit/modifiers");
|
|
2355
|
+
var import_react_virtual2 = require("@tanstack/react-virtual");
|
|
2356
|
+
var import_clsx13 = __toESM(require("clsx"), 1);
|
|
2357
|
+
|
|
2358
|
+
// src/components/DataGrid/PinnedColumns.tsx
|
|
2359
|
+
var import_react_table2 = require("@tanstack/react-table");
|
|
2360
|
+
var import_clsx12 = __toESM(require("clsx"), 1);
|
|
2361
|
+
|
|
2362
|
+
// src/components/DataGrid/utils.tsx
|
|
2363
|
+
var import_clsx9 = __toESM(require("clsx"), 1);
|
|
2364
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2365
|
+
function getSortIcon(sort, nextSort = false) {
|
|
2366
|
+
const iconClassName = (0, import_clsx9.default)(
|
|
2367
|
+
"text-icon-on-action-primary-normal",
|
|
2368
|
+
nextSort && "hidden group-hover:block"
|
|
2369
|
+
);
|
|
2370
|
+
if (sort === "asc")
|
|
2371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
|
|
2372
|
+
if (sort === "desc")
|
|
2373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
|
|
2374
|
+
return null;
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
// src/components/DataGrid/PinnedColumns.tsx
|
|
2378
|
+
var import_react15 = __toESM(require("react"), 1);
|
|
2379
|
+
|
|
2380
|
+
// src/components/DataGrid/TableBody/index.tsx
|
|
2381
|
+
var import_react_virtual = require("@tanstack/react-virtual");
|
|
2382
|
+
var import_clsx11 = __toESM(require("clsx"), 1);
|
|
2383
|
+
|
|
2384
|
+
// src/components/DataGrid/TableBody/TableBodyRow.tsx
|
|
2385
|
+
var import_clsx10 = __toESM(require("clsx"), 1);
|
|
2386
|
+
var import_react_table = require("@tanstack/react-table");
|
|
2387
|
+
var import_react12 = __toESM(require("react"), 1);
|
|
2388
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2389
|
+
var valueFormatters = {
|
|
2390
|
+
date: (value) => typeof value === "string" ? formatDate(value) : "",
|
|
2391
|
+
currency: (value) => formatCurrencyDisplay(value)
|
|
2392
|
+
};
|
|
2393
|
+
function isValueFormatterKey(value) {
|
|
2394
|
+
return typeof value === "string" && value in valueFormatters;
|
|
2395
|
+
}
|
|
2396
|
+
function TableBodyRow({
|
|
2397
|
+
id,
|
|
2398
|
+
testid,
|
|
2399
|
+
columnVirtualizer,
|
|
2400
|
+
row,
|
|
2401
|
+
// rowVirtualizer,
|
|
2402
|
+
virtualPaddingLeft,
|
|
2403
|
+
virtualPaddingRight,
|
|
2404
|
+
virtualRow,
|
|
2405
|
+
showFilterRow,
|
|
2406
|
+
enableColumnSelector = false,
|
|
2407
|
+
locked,
|
|
2408
|
+
pinDirection
|
|
2409
|
+
}) {
|
|
2410
|
+
var _a;
|
|
2411
|
+
let visibleCells;
|
|
2412
|
+
if (locked) {
|
|
2413
|
+
visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
|
|
2414
|
+
} else {
|
|
2415
|
+
visibleCells = row.getCenterVisibleCells();
|
|
2416
|
+
}
|
|
2417
|
+
const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
|
|
2418
|
+
const columns = locked ? visibleCells : virtualColumns;
|
|
2419
|
+
const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
|
|
2420
|
+
const CellElement = locked ? DataGridCell : DragAlongCell;
|
|
2421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
2422
|
+
"tr",
|
|
2423
|
+
{
|
|
2424
|
+
className: (0, import_clsx10.default)(
|
|
2425
|
+
"min-h-10",
|
|
2426
|
+
"transition-colors hover:bg-background-action-secondary-hover",
|
|
2427
|
+
row.getIsSelected() && "!bg-background-action-secondary-hover",
|
|
2428
|
+
isError && "!bg-background-action-critical-secondary-hover",
|
|
2429
|
+
showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
|
|
2430
|
+
),
|
|
2431
|
+
id: id ? `${id}-row-${row.id}` : void 0,
|
|
2432
|
+
"data-testid": testid ? `${testid}-row-${row.id}` : void 0,
|
|
2433
|
+
style: {
|
|
2434
|
+
display: "flex",
|
|
2435
|
+
position: "absolute",
|
|
2436
|
+
transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
|
|
2437
|
+
width: "100%"
|
|
2438
|
+
},
|
|
2439
|
+
children: [
|
|
2440
|
+
!locked && virtualPaddingLeft ? (
|
|
2441
|
+
// fake empty column to the left for virtualization scroll padding
|
|
2442
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
|
|
2443
|
+
) : null,
|
|
2444
|
+
columns.map((column) => {
|
|
2445
|
+
var _a2, _b, _c, _d;
|
|
2446
|
+
const cell = locked ? column : visibleCells[column.index];
|
|
2447
|
+
if (!cell) {
|
|
2448
|
+
return;
|
|
2449
|
+
}
|
|
2450
|
+
const cellFormat = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.format;
|
|
2451
|
+
const cellValue = cellFormat && isValueFormatterKey(cellFormat) ? valueFormatters[cellFormat](cell.getValue()) : cell.getValue();
|
|
2452
|
+
const cellAlignment = (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) != null ? _c : typeof cellValue === "number" ? "right" : "left";
|
|
2453
|
+
return ((_d = cell.column.columnDef.meta) == null ? void 0 : _d.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2454
|
+
CellElement,
|
|
2455
|
+
{
|
|
2456
|
+
id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
|
|
2457
|
+
testid: testid ? `${testid}-row-${row.id}-cell-${cell.id}` : void 0,
|
|
2458
|
+
cell,
|
|
2459
|
+
className: (0, import_clsx10.default)({
|
|
2460
|
+
"justify-start": cellAlignment === "left",
|
|
2461
|
+
"justify-end": cellAlignment === "right"
|
|
2462
|
+
}),
|
|
2463
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2464
|
+
Tooltip,
|
|
2465
|
+
{
|
|
2466
|
+
id: id ? `${id}-tooltip-${cell.id}` : void 0,
|
|
2467
|
+
testid: testid ? `${testid}-tooltip-${cell.id}` : void 0,
|
|
2468
|
+
showOnTruncation: true,
|
|
2469
|
+
message: cellValue,
|
|
2470
|
+
position: "bottom",
|
|
2471
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Paragraph, { addOverflow: true, tall: true, children: cellValue })
|
|
2472
|
+
}
|
|
2473
|
+
)
|
|
2474
|
+
},
|
|
2475
|
+
cell.id
|
|
2476
|
+
);
|
|
2477
|
+
}),
|
|
2478
|
+
!locked && virtualPaddingRight ? (
|
|
2479
|
+
// fake empty column to the right for virtualization scroll padding
|
|
2480
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
|
|
2481
|
+
) : null
|
|
2482
|
+
]
|
|
2483
|
+
},
|
|
2484
|
+
row.id
|
|
2485
|
+
);
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2488
|
+
// src/components/DataGrid/TableBody/LoadingCell.tsx
|
|
2489
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2490
|
+
function LoadingCell({
|
|
2491
|
+
id,
|
|
2492
|
+
testid,
|
|
2493
|
+
column
|
|
2494
|
+
}) {
|
|
2495
|
+
const key = `loading-${column.id}`;
|
|
2496
|
+
if (column.cell === "checkbox") {
|
|
2497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, testid: testid ? `${testid}-${key}-checkbox` : void 0, disabled: true }) }, key);
|
|
2498
|
+
}
|
|
2499
|
+
if (column.cell === "input") {
|
|
2500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2501
|
+
DataGridCell,
|
|
2502
|
+
{
|
|
2503
|
+
id: id ? `${id}-${key}` : void 0,
|
|
2504
|
+
testid: testid ? `${testid}-${key}` : void 0,
|
|
2505
|
+
component: "input",
|
|
2506
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2507
|
+
Input,
|
|
2508
|
+
{
|
|
2509
|
+
id: id ? `${id}-${key}-input` : void 0,
|
|
2510
|
+
testid: testid ? `${testid}-${key}-input` : void 0,
|
|
2511
|
+
align: "left",
|
|
2512
|
+
disabled: true,
|
|
2513
|
+
wrapperClassName: "!rounded-none !border-0"
|
|
2514
|
+
}
|
|
2515
|
+
)
|
|
2516
|
+
},
|
|
2517
|
+
key
|
|
2518
|
+
);
|
|
2519
|
+
}
|
|
2520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
|
|
2521
|
+
}
|
|
2522
|
+
|
|
2523
|
+
// src/components/DataGrid/TableBody/index.tsx
|
|
2524
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2525
|
+
function TableBody({
|
|
2526
|
+
id,
|
|
2527
|
+
testid,
|
|
2528
|
+
columnVirtualizer,
|
|
2529
|
+
table,
|
|
2530
|
+
tableContainerRef,
|
|
2531
|
+
virtualPaddingLeft,
|
|
2532
|
+
virtualPaddingRight,
|
|
2533
|
+
pagination,
|
|
2534
|
+
isLoadingMore,
|
|
2535
|
+
hasMore,
|
|
2536
|
+
showFilterRow,
|
|
2537
|
+
enableColumnSelector = false,
|
|
2538
|
+
locked,
|
|
2539
|
+
pinDirection
|
|
2540
|
+
}) {
|
|
2541
|
+
const { rows } = table.getRowModel();
|
|
2542
|
+
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
2543
|
+
count: rows.length,
|
|
2544
|
+
estimateSize: () => 40,
|
|
2545
|
+
getScrollElement: () => tableContainerRef.current,
|
|
2546
|
+
overscan: 8
|
|
2547
|
+
});
|
|
2548
|
+
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
2549
|
+
const CellElement = locked ? DataGridCell : DragAlongCell;
|
|
2550
|
+
let headerGroups;
|
|
2551
|
+
if (pinDirection === "left") {
|
|
2552
|
+
headerGroups = table.getLeftHeaderGroups();
|
|
2553
|
+
} else if (pinDirection === "right") {
|
|
2554
|
+
headerGroups = table.getRightHeaderGroups();
|
|
2555
|
+
} else {
|
|
2556
|
+
headerGroups = table.getCenterHeaderGroups();
|
|
2557
|
+
}
|
|
2558
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2559
|
+
"tbody",
|
|
2560
|
+
{
|
|
2561
|
+
className: (0, import_clsx11.default)(locked ? "shadow-16" : ""),
|
|
2562
|
+
style: {
|
|
2563
|
+
display: "grid",
|
|
2564
|
+
height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
|
|
2565
|
+
// tells scrollbar how big the table is
|
|
2566
|
+
position: "relative"
|
|
2567
|
+
// needed for absolute positioning of rows
|
|
2568
|
+
},
|
|
2569
|
+
children: [
|
|
2570
|
+
showFilterRow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2571
|
+
"tr",
|
|
2572
|
+
{
|
|
2573
|
+
style: {
|
|
2574
|
+
display: "flex",
|
|
2575
|
+
position: "sticky",
|
|
2576
|
+
top: "40px",
|
|
2577
|
+
width: "100%",
|
|
2578
|
+
height: "40px",
|
|
2579
|
+
zIndex: 10
|
|
2580
|
+
},
|
|
2581
|
+
className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
|
|
2582
|
+
"data-testid": testid ? `${testid}-filter-row` : void 0,
|
|
2583
|
+
children: headerGroups.flatMap(
|
|
2584
|
+
(x) => x.headers.map((header) => {
|
|
2585
|
+
var _a, _b, _c, _d, _e;
|
|
2586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2587
|
+
CellElement,
|
|
2588
|
+
{
|
|
2589
|
+
id: id ? `${id}-filter-cell-${header.id}` : void 0,
|
|
2590
|
+
testid: testid ? `${testid}-filter-cell-${header.id}` : void 0,
|
|
2591
|
+
noPadding: true,
|
|
2592
|
+
cell: header,
|
|
2593
|
+
width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
|
|
2594
|
+
children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
|
|
2595
|
+
header,
|
|
2596
|
+
table
|
|
2597
|
+
})) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2598
|
+
Search,
|
|
2599
|
+
{
|
|
2600
|
+
id: id ? `${id}-filter-search-${header.id}` : void 0,
|
|
2601
|
+
testid: testid ? `${testid}-filter-search-${header.id}` : void 0,
|
|
2602
|
+
removeRoundness: true,
|
|
2603
|
+
onChange: (e) => header.column.setFilterValue(e.target.value),
|
|
2604
|
+
value: (_d = header.column.getFilterValue()) != null ? _d : "",
|
|
2605
|
+
placeholder: "",
|
|
2606
|
+
removeSearchIcon: true
|
|
2607
|
+
}
|
|
2608
|
+
))
|
|
2609
|
+
},
|
|
2610
|
+
header.id
|
|
2611
|
+
);
|
|
2612
|
+
})
|
|
2613
|
+
)
|
|
2614
|
+
}
|
|
2615
|
+
),
|
|
2616
|
+
virtualRows.map((virtualRow) => {
|
|
2617
|
+
const row = rows[virtualRow.index];
|
|
2618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2619
|
+
TableBodyRow,
|
|
2620
|
+
{
|
|
2621
|
+
id,
|
|
2622
|
+
testid,
|
|
2623
|
+
columnVirtualizer,
|
|
2624
|
+
row,
|
|
2625
|
+
rowVirtualizer,
|
|
2626
|
+
virtualPaddingLeft,
|
|
2627
|
+
virtualPaddingRight,
|
|
2628
|
+
virtualRow,
|
|
2629
|
+
showFilterRow,
|
|
2630
|
+
enableColumnSelector,
|
|
2631
|
+
locked,
|
|
2632
|
+
pinDirection
|
|
2633
|
+
},
|
|
2634
|
+
row.id
|
|
2635
|
+
);
|
|
2636
|
+
}),
|
|
2637
|
+
!pagination && isLoadingMore && hasMore && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2638
|
+
"tr",
|
|
2639
|
+
{
|
|
2640
|
+
style: {
|
|
2641
|
+
display: "flex",
|
|
2642
|
+
position: "absolute",
|
|
2643
|
+
width: "100%",
|
|
2644
|
+
transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
|
|
2645
|
+
},
|
|
2646
|
+
className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
|
|
2647
|
+
children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2648
|
+
LoadingCell,
|
|
2649
|
+
{
|
|
2650
|
+
id,
|
|
2651
|
+
testid,
|
|
2652
|
+
column: column.columnDef
|
|
2653
|
+
},
|
|
2654
|
+
column.id
|
|
2655
|
+
))
|
|
2656
|
+
}
|
|
2657
|
+
)
|
|
2658
|
+
]
|
|
2659
|
+
}
|
|
2660
|
+
);
|
|
2661
|
+
}
|
|
2662
|
+
|
|
2663
|
+
// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
|
|
2664
|
+
var import_react14 = require("react");
|
|
2665
|
+
|
|
2666
|
+
// src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
|
|
2667
|
+
var import_react13 = require("react");
|
|
2668
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2669
|
+
function ColumnSelectorMenuOption({
|
|
2670
|
+
id,
|
|
2671
|
+
testid,
|
|
2672
|
+
column,
|
|
2673
|
+
toggleColumnVisibility
|
|
2674
|
+
}) {
|
|
2675
|
+
const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
|
|
2676
|
+
const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
|
|
2677
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuOption, { id, testid, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2678
|
+
Checkbox,
|
|
2679
|
+
{
|
|
2680
|
+
id: id ? `${id}-checkbox` : void 0,
|
|
2681
|
+
testid: testid ? `${testid}-checkbox` : void 0,
|
|
2682
|
+
label: label != null ? label : "Unknown",
|
|
2683
|
+
checked: isVisible,
|
|
2684
|
+
onChange: (e) => {
|
|
2685
|
+
setIsVisible(e.target.checked);
|
|
2686
|
+
toggleColumnVisibility(column.id, e.target.checked);
|
|
2687
|
+
}
|
|
2688
|
+
}
|
|
2689
|
+
) });
|
|
2690
|
+
}
|
|
2691
|
+
|
|
2692
|
+
// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
|
|
2693
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2694
|
+
function ColumnSelectorHeaderCell({
|
|
2695
|
+
id,
|
|
2696
|
+
testid,
|
|
2697
|
+
table,
|
|
2698
|
+
toggleColumnVisibility,
|
|
2699
|
+
resetColumnVisibility
|
|
2700
|
+
}) {
|
|
2701
|
+
const ref = (0, import_react14.useRef)(null);
|
|
2702
|
+
const [show, setShow] = (0, import_react14.useState)(false);
|
|
2703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
2704
|
+
DataGridCell,
|
|
2705
|
+
{
|
|
2706
|
+
id,
|
|
2707
|
+
testid,
|
|
2708
|
+
width: "48px",
|
|
2709
|
+
type: "header",
|
|
2710
|
+
color: "text-secondary-normal",
|
|
2711
|
+
ref,
|
|
2712
|
+
children: [
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2714
|
+
Button,
|
|
2715
|
+
{
|
|
2716
|
+
id: id ? `${id}-button` : void 0,
|
|
2717
|
+
testid: testid ? `${testid}-button` : void 0,
|
|
2718
|
+
onClick: () => setShow((prev) => !prev),
|
|
2719
|
+
variant: "navigation",
|
|
2720
|
+
iconOnly: true,
|
|
2721
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "tune" })
|
|
2722
|
+
}
|
|
2723
|
+
),
|
|
2724
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
2725
|
+
Menu,
|
|
2726
|
+
{
|
|
2727
|
+
id: id ? `${id}-menu` : void 0,
|
|
2728
|
+
testid: testid ? `${testid}-menu` : void 0,
|
|
2729
|
+
positionTo: ref,
|
|
2730
|
+
position: "bottom-right",
|
|
2731
|
+
show,
|
|
2732
|
+
setShow,
|
|
2733
|
+
calculateMinMaxHeight: true,
|
|
2734
|
+
children: [
|
|
2735
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2736
|
+
Button,
|
|
2737
|
+
{
|
|
2738
|
+
id: id ? `${id}-reset-button` : void 0,
|
|
2739
|
+
testid: testid ? `${testid}-reset-button` : void 0,
|
|
2740
|
+
variant: "tertiary",
|
|
2741
|
+
onClick: () => {
|
|
2742
|
+
resetColumnVisibility();
|
|
2743
|
+
setShow(false);
|
|
2744
|
+
},
|
|
2745
|
+
children: "Reset to default"
|
|
2746
|
+
}
|
|
2747
|
+
),
|
|
2748
|
+
table.getAllColumns().filter((x) => {
|
|
2749
|
+
var _a;
|
|
2750
|
+
return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
|
|
2751
|
+
}).map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2752
|
+
ColumnSelectorMenuOption,
|
|
2753
|
+
{
|
|
2754
|
+
id: id ? `${id}-option-${column.id}` : void 0,
|
|
2755
|
+
testid: testid ? `${testid}-option-${column.id}` : void 0,
|
|
2756
|
+
column,
|
|
2757
|
+
toggleColumnVisibility
|
|
2758
|
+
},
|
|
2759
|
+
column.id
|
|
2760
|
+
))
|
|
2761
|
+
]
|
|
2762
|
+
}
|
|
2763
|
+
)
|
|
2764
|
+
]
|
|
2765
|
+
}
|
|
2766
|
+
);
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
// src/components/DataGrid/PinnedColumns.tsx
|
|
2770
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2771
|
+
function PinnedColumns(_a) {
|
|
2772
|
+
var _b = _a, {
|
|
2773
|
+
id,
|
|
2774
|
+
pinDirection = "left",
|
|
2775
|
+
table,
|
|
2776
|
+
centerHeader,
|
|
2777
|
+
allSelectedAcrossPages,
|
|
2778
|
+
someSelectedAcrossPages,
|
|
2779
|
+
toggleSelectAllAcrossPages,
|
|
2780
|
+
testid,
|
|
2781
|
+
enableColumnSelector,
|
|
2782
|
+
toggleColumnVisibility,
|
|
2783
|
+
resetColumnVisibility
|
|
2784
|
+
} = _b, props = __objRest(_b, [
|
|
2785
|
+
"id",
|
|
2786
|
+
"pinDirection",
|
|
2787
|
+
"table",
|
|
2788
|
+
"centerHeader",
|
|
2789
|
+
"allSelectedAcrossPages",
|
|
2790
|
+
"someSelectedAcrossPages",
|
|
2791
|
+
"toggleSelectAllAcrossPages",
|
|
2792
|
+
"testid",
|
|
2793
|
+
"enableColumnSelector",
|
|
2794
|
+
"toggleColumnVisibility",
|
|
2795
|
+
"resetColumnVisibility"
|
|
2796
|
+
]);
|
|
2797
|
+
var _a2;
|
|
2798
|
+
const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
|
|
2799
|
+
const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
|
|
2800
|
+
const hasAnyHeaders = ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0;
|
|
2801
|
+
if (!hasAnyHeaders && !enableColumnSelector) return;
|
|
2802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2803
|
+
"table",
|
|
2804
|
+
{
|
|
2805
|
+
className: (0, import_clsx12.default)(
|
|
2806
|
+
"flex flex-col min-h-min sticky z-20",
|
|
2807
|
+
pinDirection === "left" ? "left-0" : "right-0"
|
|
2808
|
+
),
|
|
2809
|
+
"data-testid": pinnedTestId,
|
|
2810
|
+
children: [
|
|
2811
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
|
|
2812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2813
|
+
"tr",
|
|
2814
|
+
{
|
|
2815
|
+
"data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0,
|
|
2816
|
+
className: "flex w-full",
|
|
2817
|
+
children: [
|
|
2818
|
+
headerGroup.headers.map((header) => {
|
|
2819
|
+
var _a3, _b2, _c;
|
|
2820
|
+
if (!header) {
|
|
2821
|
+
return;
|
|
2822
|
+
}
|
|
2823
|
+
if (typeof header.column.columnDef.header === "string") {
|
|
2824
|
+
const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
|
|
2825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2826
|
+
DataCellHeader,
|
|
2827
|
+
{
|
|
2828
|
+
locked: true,
|
|
2829
|
+
testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
|
|
2830
|
+
header,
|
|
2831
|
+
center: centerHeader,
|
|
2832
|
+
width: customHeaderWidth,
|
|
2833
|
+
className: (0, import_clsx12.default)(
|
|
2834
|
+
header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
|
|
2835
|
+
"group"
|
|
2836
|
+
),
|
|
2837
|
+
children: [
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
2839
|
+
getSortIcon(header.column.getIsSorted()),
|
|
2840
|
+
!header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(header.column.getNextSortingOrder(), true),
|
|
2841
|
+
header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
|
|
2842
|
+
!((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2843
|
+
"div",
|
|
2844
|
+
{
|
|
2845
|
+
onDoubleClick: (e) => {
|
|
2846
|
+
e.stopPropagation();
|
|
2847
|
+
header.column.resetSize();
|
|
2848
|
+
},
|
|
2849
|
+
onMouseDown: (e) => {
|
|
2850
|
+
e.stopPropagation();
|
|
2851
|
+
header.getResizeHandler()(e);
|
|
2852
|
+
},
|
|
2853
|
+
onTouchStart: (e) => {
|
|
2854
|
+
e.stopPropagation();
|
|
2855
|
+
header.getResizeHandler()(e);
|
|
2856
|
+
},
|
|
2857
|
+
className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
|
|
2858
|
+
}
|
|
2859
|
+
)
|
|
2860
|
+
]
|
|
2861
|
+
},
|
|
2862
|
+
header.id
|
|
2863
|
+
);
|
|
2864
|
+
}
|
|
2865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2866
|
+
Checkbox,
|
|
2867
|
+
{
|
|
2868
|
+
checked: allSelectedAcrossPages,
|
|
2869
|
+
indeterminate: someSelectedAcrossPages,
|
|
2870
|
+
onChange: toggleSelectAllAcrossPages
|
|
2871
|
+
}
|
|
2872
|
+
) }) : (0, import_react_table2.flexRender)(
|
|
2873
|
+
header.column.columnDef.header,
|
|
2874
|
+
header.getContext()
|
|
2875
|
+
) }, header.id);
|
|
2876
|
+
}),
|
|
2877
|
+
enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2878
|
+
ColumnSelectorHeaderCell,
|
|
2879
|
+
{
|
|
2880
|
+
id: id ? `${id}-column-selector` : void 0,
|
|
2881
|
+
testid: testid ? `${testid}-column-selector` : void 0,
|
|
2882
|
+
table,
|
|
2883
|
+
toggleColumnVisibility: toggleColumnVisibility != null ? toggleColumnVisibility : () => {
|
|
2884
|
+
},
|
|
2885
|
+
resetColumnVisibility: resetColumnVisibility != null ? resetColumnVisibility : () => {
|
|
2886
|
+
}
|
|
2887
|
+
}
|
|
2888
|
+
)
|
|
2889
|
+
]
|
|
2890
|
+
},
|
|
2891
|
+
headerGroup.id
|
|
2892
|
+
);
|
|
2893
|
+
}) }),
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2895
|
+
TableBody,
|
|
2896
|
+
__spreadProps(__spreadValues({
|
|
2897
|
+
testid: pinnedTestId
|
|
2898
|
+
}, props), {
|
|
2899
|
+
table,
|
|
2900
|
+
locked: !enableColumnSelector,
|
|
2901
|
+
pinDirection
|
|
2902
|
+
})
|
|
2903
|
+
)
|
|
2904
|
+
]
|
|
2905
|
+
}
|
|
2906
|
+
);
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2909
|
+
// static/no-results-image.png
|
|
2910
|
+
var no_results_image_default = "data:image/png;base64,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";
|
|
2911
|
+
|
|
2912
|
+
// src/components/DataGrid/index.tsx
|
|
2913
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2914
|
+
var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
|
|
2915
|
+
var NO_RESULTS_HEIGHT = "h-[185px]";
|
|
2916
|
+
function DataGrid({
|
|
2917
|
+
id,
|
|
2918
|
+
rowIdAccessor,
|
|
2919
|
+
testid,
|
|
2920
|
+
data,
|
|
2921
|
+
columns,
|
|
2922
|
+
status,
|
|
2923
|
+
isLoadingMore = false,
|
|
2924
|
+
onLoadMore,
|
|
2925
|
+
pagination,
|
|
2926
|
+
showFilterRow = false,
|
|
2927
|
+
hasMore = false,
|
|
2928
|
+
sorting: externalSorting,
|
|
2929
|
+
onSortingChange,
|
|
2930
|
+
columnFilters: externalColumnFilters,
|
|
2931
|
+
onColumnFiltersChange,
|
|
2932
|
+
rowSelection: externalRowSelection,
|
|
2933
|
+
onRowSelectionChange,
|
|
2934
|
+
filteredSortedData,
|
|
2935
|
+
totalRowCount,
|
|
2936
|
+
hideStatusBar,
|
|
2937
|
+
centerHeader,
|
|
2938
|
+
enableColumnSelector,
|
|
2939
|
+
predeterminedLeftPins = [],
|
|
2940
|
+
predeterminedRightPins = [],
|
|
2941
|
+
useMenuDefaultMinWidth,
|
|
2942
|
+
ref
|
|
2943
|
+
}) {
|
|
2944
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
2945
|
+
(0, import_react16.useImperativeHandle)(ref, () => ({
|
|
2946
|
+
getSavedLayout: () => {
|
|
2947
|
+
return getSavedLayout();
|
|
2948
|
+
}
|
|
2949
|
+
}));
|
|
2950
|
+
const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
|
|
2951
|
+
const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
|
|
2952
|
+
const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
|
|
2953
|
+
const {
|
|
2954
|
+
columns: tableColumns,
|
|
2955
|
+
setColumns: setTableColumns,
|
|
2956
|
+
getSavedLayout
|
|
2957
|
+
} = useTableLayout(columns, id != null ? id : testid);
|
|
2958
|
+
const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
|
|
2959
|
+
tableColumns.map((c) => c.id)
|
|
2960
|
+
);
|
|
2961
|
+
const [columnVisibility, setColumnVisibility] = (0, import_react16.useState)(
|
|
2962
|
+
Object.fromEntries(
|
|
2963
|
+
tableColumns.filter((column) => !!column.id).map((column) => {
|
|
2964
|
+
var _a2, _b2;
|
|
2965
|
+
return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
|
|
2966
|
+
})
|
|
2967
|
+
)
|
|
2968
|
+
);
|
|
2969
|
+
const updateColumnVisibility = (0, import_react16.useCallback)(
|
|
2970
|
+
(updateOrder) => {
|
|
2971
|
+
setColumnVisibility(
|
|
2972
|
+
Object.fromEntries(
|
|
2973
|
+
tableColumns.filter((column) => !!column.id).map((column) => {
|
|
2974
|
+
var _a2, _b2;
|
|
2975
|
+
return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
|
|
2976
|
+
})
|
|
2977
|
+
)
|
|
2978
|
+
);
|
|
2979
|
+
if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id));
|
|
2980
|
+
},
|
|
2981
|
+
[tableColumns]
|
|
2982
|
+
);
|
|
2983
|
+
const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
|
|
2984
|
+
setTableColumns((prev) => {
|
|
2985
|
+
columns.forEach((column) => {
|
|
2986
|
+
var _a2, _b2;
|
|
2987
|
+
const columnId = column.id;
|
|
2988
|
+
const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
|
|
2989
|
+
const persistedIndex = prev.findIndex((col) => col.id === columnId);
|
|
2990
|
+
if (persistedIndex !== -1) {
|
|
2991
|
+
prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
|
|
2992
|
+
visible: isVisible
|
|
2993
|
+
});
|
|
2994
|
+
}
|
|
2995
|
+
});
|
|
2996
|
+
return [...prev];
|
|
2997
|
+
}, true);
|
|
2998
|
+
}, [columns, setTableColumns]);
|
|
2999
|
+
(0, import_react16.useEffect)(() => {
|
|
3000
|
+
updateColumnVisibility(true);
|
|
3001
|
+
}, [updateColumnVisibility]);
|
|
3002
|
+
const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
|
|
3003
|
+
const setSortingState = pagination ? (updaterOrValue) => {
|
|
3004
|
+
const value = typeof updaterOrValue === "function" ? updaterOrValue(
|
|
3005
|
+
externalSorting != null ? externalSorting : []
|
|
3006
|
+
) : updaterOrValue;
|
|
3007
|
+
(onSortingChange != null ? onSortingChange : setLocalSorting)(value);
|
|
3008
|
+
} : setLocalSorting;
|
|
3009
|
+
const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
|
|
3010
|
+
const setColumnFilterState = pagination ? (updaterOrValue) => {
|
|
3011
|
+
const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
|
|
3012
|
+
(onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
|
|
3013
|
+
} : setLocalColumnFilters;
|
|
3014
|
+
const rowSelection = externalRowSelection != null ? externalRowSelection : localRowSelection;
|
|
3015
|
+
const setRowSelection = (0, import_react16.useCallback)(
|
|
3016
|
+
(updaterOrValue) => {
|
|
3017
|
+
if (pagination) {
|
|
3018
|
+
const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
|
|
3019
|
+
(onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
|
|
3020
|
+
} else if (externalRowSelection && onRowSelectionChange) {
|
|
3021
|
+
const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
|
|
3022
|
+
onRowSelectionChange(value);
|
|
3023
|
+
} else {
|
|
3024
|
+
setLocalRowSelection(updaterOrValue);
|
|
3025
|
+
}
|
|
3026
|
+
},
|
|
3027
|
+
[externalRowSelection, onRowSelectionChange, pagination]
|
|
3028
|
+
);
|
|
3029
|
+
const dndId = (0, import_react16.useId)();
|
|
3030
|
+
const containerRef = import_react16.default.useRef(null);
|
|
3031
|
+
const toggleColumnVisibility = (0, import_react16.useCallback)(
|
|
3032
|
+
(columnId, isVisible) => {
|
|
3033
|
+
setTableColumns((prev) => {
|
|
3034
|
+
const persistedIndex = prev.findIndex((col) => col.id === columnId);
|
|
3035
|
+
if (persistedIndex !== -1) {
|
|
3036
|
+
prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
|
|
3037
|
+
visible: isVisible
|
|
3038
|
+
});
|
|
3039
|
+
}
|
|
3040
|
+
return [...prev];
|
|
3041
|
+
}, true);
|
|
3042
|
+
},
|
|
3043
|
+
[setTableColumns]
|
|
3044
|
+
);
|
|
3045
|
+
const table = (0, import_react_table3.useReactTable)({
|
|
3046
|
+
columns: tableColumns,
|
|
3047
|
+
data,
|
|
3048
|
+
getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
|
|
3049
|
+
getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
|
|
3050
|
+
getFilteredRowModel: (0, import_react_table3.getFilteredRowModel)(),
|
|
3051
|
+
columnResizeMode: "onChange",
|
|
3052
|
+
getRowId: rowIdAccessor ? (row) => String(row[rowIdAccessor]) : (row, index) => {
|
|
3053
|
+
var _a2;
|
|
3054
|
+
return String((_a2 = row.id) != null ? _a2 : index + 1);
|
|
3055
|
+
},
|
|
3056
|
+
state: {
|
|
3057
|
+
columnOrder,
|
|
3058
|
+
sorting: sortingState,
|
|
3059
|
+
columnFilters: columnFilterState,
|
|
3060
|
+
rowSelection,
|
|
3061
|
+
columnVisibility
|
|
3062
|
+
},
|
|
3063
|
+
initialState: {
|
|
3064
|
+
columnPinning: {
|
|
3065
|
+
left: predeterminedLeftPins,
|
|
3066
|
+
right: predeterminedRightPins
|
|
3067
|
+
}
|
|
3068
|
+
},
|
|
3069
|
+
enableColumnPinning: (predeterminedLeftPins == null ? void 0 : predeterminedLeftPins.length) > 0 || predeterminedRightPins.length > 0,
|
|
3070
|
+
onColumnOrderChange: setColumnOrder,
|
|
3071
|
+
onSortingChange: adaptTableStateSetter(setSortingState),
|
|
3072
|
+
onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
|
|
3073
|
+
onRowSelectionChange: adaptTableStateSetter(setRowSelection),
|
|
3074
|
+
filterFns: {
|
|
3075
|
+
startsWith: (row, columnId, filterValue) => {
|
|
3076
|
+
const cellValue = row == null ? void 0 : row.getValue(columnId);
|
|
3077
|
+
if (!cellValue || !filterValue) {
|
|
3078
|
+
return true;
|
|
3079
|
+
}
|
|
3080
|
+
return String(cellValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
|
|
3081
|
+
},
|
|
3082
|
+
endsWith: (row, columnId, filterValue) => {
|
|
3083
|
+
const cellValue = row == null ? void 0 : row.getValue(columnId);
|
|
3084
|
+
if (!cellValue || !filterValue) {
|
|
3085
|
+
return true;
|
|
3086
|
+
}
|
|
3087
|
+
return String(cellValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
|
|
3088
|
+
}
|
|
3089
|
+
}
|
|
3090
|
+
});
|
|
3091
|
+
const allRowIds = pagination ? (_a = filteredSortedData == null ? void 0 : filteredSortedData.map((row) => String(row.id))) != null ? _a : [] : Array.from(
|
|
3092
|
+
{ length: totalRowCount != null ? totalRowCount : data.length },
|
|
3093
|
+
(_, i) => String(i + 1)
|
|
3094
|
+
);
|
|
3095
|
+
const allSelectedAcrossPages = allRowIds.every(
|
|
3096
|
+
(rowId) => rowSelection[rowId]
|
|
3097
|
+
);
|
|
3098
|
+
const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
|
|
3099
|
+
const toggleSelectAllAcrossPages = () => {
|
|
3100
|
+
setRowSelection((prev) => {
|
|
3101
|
+
const isSelecting = !allSelectedAcrossPages;
|
|
3102
|
+
if (isSelecting) {
|
|
3103
|
+
const newSelection = {};
|
|
3104
|
+
for (const rowId of allRowIds) {
|
|
3105
|
+
newSelection[rowId] = true;
|
|
3106
|
+
}
|
|
3107
|
+
return __spreadValues(__spreadValues({}, prev), newSelection);
|
|
3108
|
+
} else {
|
|
3109
|
+
const updatedSelection = __spreadValues({}, prev);
|
|
3110
|
+
for (const rowId of allRowIds) {
|
|
3111
|
+
delete updatedSelection[rowId];
|
|
3112
|
+
}
|
|
3113
|
+
return updatedSelection;
|
|
3114
|
+
}
|
|
3115
|
+
});
|
|
3116
|
+
};
|
|
3117
|
+
useInfiniteScroll({
|
|
3118
|
+
containerRef,
|
|
3119
|
+
onLoadMore: onLoadMore != null ? onLoadMore : () => {
|
|
3120
|
+
},
|
|
3121
|
+
isLoading: isLoadingMore,
|
|
3122
|
+
enabled: !pagination
|
|
3123
|
+
});
|
|
3124
|
+
const handleDragEnd = (event) => {
|
|
3125
|
+
const { active, over } = event;
|
|
3126
|
+
if (active && over && active.id !== over.id) {
|
|
3127
|
+
setColumnOrder((prev) => {
|
|
3128
|
+
const oldIndex = prev.indexOf(active.id);
|
|
3129
|
+
const newIndex = prev.indexOf(over.id);
|
|
3130
|
+
const newOrder = (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
|
|
3131
|
+
setTableColumns((prev2) => {
|
|
3132
|
+
const res = newOrder.map((id2) => prev2.find((col) => col.id === id2)).filter(Boolean);
|
|
3133
|
+
return res;
|
|
3134
|
+
});
|
|
3135
|
+
return newOrder;
|
|
3136
|
+
});
|
|
3137
|
+
}
|
|
3138
|
+
};
|
|
3139
|
+
const sensors = (0, import_core.useSensors)(
|
|
3140
|
+
(0, import_core.useSensor)(import_core.MouseSensor),
|
|
3141
|
+
(0, import_core.useSensor)(import_core.TouchSensor),
|
|
3142
|
+
(0, import_core.useSensor)(import_core.KeyboardSensor)
|
|
3143
|
+
);
|
|
3144
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
|
3145
|
+
const columnVirtualizer = (0, import_react_virtual2.useVirtualizer)({
|
|
3146
|
+
count: visibleColumns.length,
|
|
3147
|
+
estimateSize: (index) => visibleColumns[index].getSize(),
|
|
3148
|
+
//estimate width of each column for accurate scrollbar dragging
|
|
3149
|
+
getScrollElement: () => containerRef.current,
|
|
3150
|
+
horizontal: true,
|
|
3151
|
+
overscan: 8
|
|
3152
|
+
//how many columns to render on each side off screen each way
|
|
3153
|
+
});
|
|
3154
|
+
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
3155
|
+
let virtualPaddingLeft;
|
|
3156
|
+
let virtualPaddingRight;
|
|
3157
|
+
if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
|
|
3158
|
+
virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
|
|
3159
|
+
virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
|
|
3160
|
+
}
|
|
3161
|
+
const empty = table.getRowModel().rows.length === 0;
|
|
3162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3163
|
+
import_core.DndContext,
|
|
3164
|
+
{
|
|
3165
|
+
id: dndId,
|
|
3166
|
+
collisionDetection: import_core.closestCenter,
|
|
3167
|
+
modifiers: [import_modifiers.restrictToHorizontalAxis],
|
|
3168
|
+
onDragEnd: handleDragEnd,
|
|
3169
|
+
sensors,
|
|
3170
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3171
|
+
import_sortable2.SortableContext,
|
|
3172
|
+
{
|
|
3173
|
+
items: columnOrder,
|
|
3174
|
+
strategy: import_sortable2.horizontalListSortingStrategy,
|
|
3175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3176
|
+
"div",
|
|
3177
|
+
{
|
|
3178
|
+
id,
|
|
3179
|
+
"data-testid": testid,
|
|
3180
|
+
className: "flex flex-col grow-0 h-fit w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
|
|
3181
|
+
children: [
|
|
3182
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3183
|
+
"div",
|
|
3184
|
+
{
|
|
3185
|
+
className: (0, import_clsx13.default)(
|
|
3186
|
+
"flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
|
|
3187
|
+
empty ? "overflow-y-hidden" : "min-h-[120px]"
|
|
3188
|
+
),
|
|
3189
|
+
ref: containerRef,
|
|
3190
|
+
children: [
|
|
3191
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3192
|
+
PinnedColumns,
|
|
3193
|
+
{
|
|
3194
|
+
testid,
|
|
3195
|
+
pinDirection: "left",
|
|
3196
|
+
table,
|
|
3197
|
+
tableContainerRef: containerRef,
|
|
3198
|
+
pagination,
|
|
3199
|
+
isLoadingMore,
|
|
3200
|
+
hasMore,
|
|
3201
|
+
showFilterRow
|
|
3202
|
+
}
|
|
3203
|
+
),
|
|
3204
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
|
|
3205
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3206
|
+
"tr",
|
|
3207
|
+
{
|
|
3208
|
+
"data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0,
|
|
3209
|
+
className: "flex w-full",
|
|
3210
|
+
children: [
|
|
3211
|
+
virtualPaddingLeft ? (
|
|
3212
|
+
// fake empty column to the left for virtualization scroll padding
|
|
3213
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3214
|
+
"th",
|
|
3215
|
+
{
|
|
3216
|
+
style: { display: "flex", width: virtualPaddingLeft }
|
|
3217
|
+
}
|
|
3218
|
+
)
|
|
3219
|
+
) : null,
|
|
3220
|
+
virtualColumns.map((virtualColumn) => {
|
|
3221
|
+
var _a2, _b2, _c2, _d2, _e2;
|
|
3222
|
+
const header = headerGroup.headers[virtualColumn.index];
|
|
3223
|
+
if (!header) {
|
|
3224
|
+
return;
|
|
3225
|
+
}
|
|
3226
|
+
if (typeof header.column.columnDef.header === "string") {
|
|
3227
|
+
const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
|
|
3228
|
+
const cellAlignment = (_c2 = (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.align) != null ? _c2 : typeof cellValue === "number" ? "right" : "left";
|
|
3229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3230
|
+
DraggableCellHeader,
|
|
3231
|
+
{
|
|
3232
|
+
minWidth: `${header.column.getSize()}px`,
|
|
3233
|
+
id: id ? `${id}-header-${header.id}` : void 0,
|
|
3234
|
+
testid: testid ? `${testid}-header-${header.id}` : void 0,
|
|
3235
|
+
header,
|
|
3236
|
+
locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
|
|
3237
|
+
center: centerHeader,
|
|
3238
|
+
className: (0, import_clsx13.default)(
|
|
3239
|
+
header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
|
|
3240
|
+
"group",
|
|
3241
|
+
{
|
|
3242
|
+
"justify-start": cellAlignment === "left",
|
|
3243
|
+
"justify-end": cellAlignment === "right"
|
|
3244
|
+
}
|
|
3245
|
+
),
|
|
3246
|
+
useMenuDefaultMinWidth,
|
|
3247
|
+
children: [
|
|
3248
|
+
cellAlignment === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
3249
|
+
getSortIcon(header.column.getIsSorted()),
|
|
3250
|
+
!header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
|
|
3251
|
+
header.column.getNextSortingOrder(),
|
|
3252
|
+
true
|
|
3253
|
+
),
|
|
3254
|
+
header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
|
|
3255
|
+
cellAlignment === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
3256
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3257
|
+
"div",
|
|
3258
|
+
{
|
|
3259
|
+
onDoubleClick: (e) => {
|
|
3260
|
+
e.stopPropagation();
|
|
3261
|
+
header.column.resetSize();
|
|
3262
|
+
},
|
|
3263
|
+
onMouseDown: (e) => {
|
|
3264
|
+
e.stopPropagation();
|
|
3265
|
+
header.getResizeHandler()(e);
|
|
3266
|
+
},
|
|
3267
|
+
onTouchStart: (e) => {
|
|
3268
|
+
e.stopPropagation();
|
|
3269
|
+
header.getResizeHandler()(e);
|
|
3270
|
+
},
|
|
3271
|
+
className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
|
|
3272
|
+
}
|
|
3273
|
+
)
|
|
3274
|
+
]
|
|
3275
|
+
},
|
|
3276
|
+
header.id
|
|
3277
|
+
);
|
|
3278
|
+
}
|
|
3279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3280
|
+
DataGridCell,
|
|
3281
|
+
{
|
|
3282
|
+
id: id ? `${id}-header-${header.id}` : void 0,
|
|
3283
|
+
testid: testid ? `${testid}-header-${header.id}` : void 0,
|
|
3284
|
+
type: "header",
|
|
3285
|
+
component: "checkbox",
|
|
3286
|
+
locked: true,
|
|
3287
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3288
|
+
Checkbox,
|
|
3289
|
+
{
|
|
3290
|
+
id: id ? `${id}-select-all-checkbox` : void 0,
|
|
3291
|
+
testid: testid ? `${testid}-select-all-checkbox` : void 0,
|
|
3292
|
+
checked: allSelectedAcrossPages,
|
|
3293
|
+
indeterminate: someSelectedAcrossPages,
|
|
3294
|
+
onChange: toggleSelectAllAcrossPages
|
|
3295
|
+
}
|
|
3296
|
+
)
|
|
3297
|
+
}
|
|
3298
|
+
) : (0, import_react_table3.flexRender)(
|
|
3299
|
+
header.column.columnDef.header,
|
|
3300
|
+
header.getContext()
|
|
3301
|
+
) }, header.id);
|
|
3302
|
+
}),
|
|
3303
|
+
virtualPaddingRight ? (
|
|
3304
|
+
//fake empty column to the right for virtualization scroll padding
|
|
3305
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3306
|
+
"th",
|
|
3307
|
+
{
|
|
3308
|
+
style: { display: "flex", width: virtualPaddingRight }
|
|
3309
|
+
}
|
|
3310
|
+
)
|
|
3311
|
+
) : null
|
|
3312
|
+
]
|
|
3313
|
+
},
|
|
3314
|
+
headerGroup.id
|
|
3315
|
+
)) }),
|
|
3316
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3317
|
+
TableBody,
|
|
3318
|
+
{
|
|
3319
|
+
id,
|
|
3320
|
+
testid,
|
|
3321
|
+
columnVirtualizer,
|
|
3322
|
+
table,
|
|
3323
|
+
tableContainerRef: containerRef,
|
|
3324
|
+
virtualPaddingLeft,
|
|
3325
|
+
virtualPaddingRight,
|
|
3326
|
+
pagination,
|
|
3327
|
+
isLoadingMore,
|
|
3328
|
+
hasMore,
|
|
3329
|
+
showFilterRow,
|
|
3330
|
+
enableColumnSelector
|
|
3331
|
+
}
|
|
3332
|
+
)
|
|
3333
|
+
] }),
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3335
|
+
PinnedColumns,
|
|
3336
|
+
{
|
|
3337
|
+
id,
|
|
3338
|
+
enableColumnSelector,
|
|
3339
|
+
toggleColumnVisibility,
|
|
3340
|
+
resetColumnVisibility: resetDefaultColumnVisibility,
|
|
3341
|
+
testid,
|
|
3342
|
+
pinDirection: "right",
|
|
3343
|
+
table,
|
|
3344
|
+
tableContainerRef: containerRef,
|
|
3345
|
+
pagination,
|
|
3346
|
+
isLoadingMore,
|
|
3347
|
+
hasMore,
|
|
3348
|
+
showFilterRow
|
|
3349
|
+
}
|
|
3350
|
+
)
|
|
3351
|
+
]
|
|
3352
|
+
}
|
|
3353
|
+
),
|
|
3354
|
+
empty && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3355
|
+
"div",
|
|
3356
|
+
{
|
|
3357
|
+
className: (0, import_clsx13.default)(
|
|
3358
|
+
NO_RESULTS_HEIGHT,
|
|
3359
|
+
"flex flex-col items-center justify-center",
|
|
3360
|
+
componentGap,
|
|
3361
|
+
componentPadding
|
|
3362
|
+
),
|
|
3363
|
+
"data-testid": testid ? `${testid}-no-results` : void 0,
|
|
3364
|
+
children: [
|
|
3365
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3366
|
+
"img",
|
|
3367
|
+
{
|
|
3368
|
+
src: (_g = (_f = no_results_image_default) == null ? void 0 : _f.src) != null ? _g : no_results_image_default,
|
|
3369
|
+
alt: "No Results",
|
|
3370
|
+
className: "h-30 opacity-20",
|
|
3371
|
+
width: 120,
|
|
3372
|
+
height: 120
|
|
3373
|
+
}
|
|
3374
|
+
),
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
|
|
3376
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
|
|
3377
|
+
]
|
|
3378
|
+
}
|
|
3379
|
+
),
|
|
3380
|
+
!hideStatusBar && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
|
|
3381
|
+
pagination && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center", children: [
|
|
3382
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 w-min", children: [
|
|
3383
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3384
|
+
Select,
|
|
3385
|
+
{
|
|
3386
|
+
id: id ? `${id}-pagesize-select` : void 0,
|
|
3387
|
+
testid: testid ? `${testid}-pagesize-select` : void 0,
|
|
3388
|
+
wrapperClassName: "!w-20",
|
|
3389
|
+
value: pagination.pageSize.toString(),
|
|
3390
|
+
onChange: (e) => {
|
|
3391
|
+
var _a2;
|
|
3392
|
+
return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
|
|
3393
|
+
},
|
|
3394
|
+
renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3395
|
+
Menu,
|
|
3396
|
+
__spreadProps(__spreadValues({}, props), {
|
|
3397
|
+
id: id ? `${id}-pagesize-menu` : void 0,
|
|
3398
|
+
testid: testid ? `${testid}-pagesize-menu` : void 0,
|
|
3399
|
+
children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3400
|
+
MenuOption,
|
|
3401
|
+
{
|
|
3402
|
+
id: id ? `${id}-pagesize-option-${option}` : void 0,
|
|
3403
|
+
selected: pagination.pageSize === option,
|
|
3404
|
+
onClick: () => {
|
|
3405
|
+
var _a2;
|
|
3406
|
+
return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
|
|
3407
|
+
},
|
|
3408
|
+
children: option
|
|
3409
|
+
},
|
|
3410
|
+
option
|
|
3411
|
+
))
|
|
3412
|
+
})
|
|
3413
|
+
)
|
|
3414
|
+
}
|
|
3415
|
+
),
|
|
3416
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { children: "Per Page" })
|
|
3417
|
+
] }),
|
|
3418
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3419
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3420
|
+
Button,
|
|
3421
|
+
{
|
|
3422
|
+
id: id ? `${id}-prev-page-button` : void 0,
|
|
3423
|
+
testid: testid ? `${testid}-prev-page-button` : void 0,
|
|
3424
|
+
iconOnly: true,
|
|
3425
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_left" }),
|
|
3426
|
+
onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
|
|
3427
|
+
variant: "tertiary",
|
|
3428
|
+
disabled: pagination.pageIndex === 0
|
|
3429
|
+
}
|
|
3430
|
+
),
|
|
3431
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Paragraph, { children: [
|
|
3432
|
+
pagination.pageIndex * pagination.pageSize + 1,
|
|
3433
|
+
" -",
|
|
3434
|
+
" ",
|
|
3435
|
+
Math.min(
|
|
3436
|
+
(pagination.pageIndex + 1) * pagination.pageSize,
|
|
3437
|
+
pagination.total
|
|
3438
|
+
),
|
|
3439
|
+
" ",
|
|
3440
|
+
"of ",
|
|
3441
|
+
pagination.total
|
|
3442
|
+
] }),
|
|
3443
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3444
|
+
Button,
|
|
3445
|
+
{
|
|
3446
|
+
id: id ? `${id}-next-page-button` : void 0,
|
|
3447
|
+
testid: testid ? `${testid}-next-page-button` : void 0,
|
|
3448
|
+
iconOnly: true,
|
|
3449
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_right" }),
|
|
3450
|
+
onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
|
|
3451
|
+
variant: "tertiary",
|
|
3452
|
+
disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
|
|
3453
|
+
}
|
|
3454
|
+
)
|
|
3455
|
+
] })
|
|
3456
|
+
] }),
|
|
3457
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3458
|
+
Paragraph,
|
|
3459
|
+
{
|
|
3460
|
+
testid: testid ? `${testid}-status-text` : void 0,
|
|
3461
|
+
children: status
|
|
3462
|
+
}
|
|
3463
|
+
)
|
|
3464
|
+
] })
|
|
3465
|
+
]
|
|
3466
|
+
}
|
|
3467
|
+
)
|
|
3468
|
+
}
|
|
3469
|
+
)
|
|
3470
|
+
}
|
|
3471
|
+
);
|
|
3472
|
+
}
|
|
3473
|
+
DataGrid.displayName = "DataGrid";
|
|
3474
|
+
function adaptTableStateSetter(setter) {
|
|
3475
|
+
return (valueOrFn) => {
|
|
3476
|
+
setter(
|
|
3477
|
+
(prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
|
|
3478
|
+
);
|
|
3479
|
+
};
|
|
3480
|
+
}
|
|
3481
|
+
|
|
3482
|
+
// src/components/Select.tsx
|
|
3483
|
+
var import_react17 = require("react");
|
|
3484
|
+
var import_clsx14 = __toESM(require("clsx"), 1);
|
|
3485
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3486
|
+
var Select = (_a) => {
|
|
3487
|
+
var _b = _a, {
|
|
3488
|
+
id,
|
|
3489
|
+
testid,
|
|
3490
|
+
label,
|
|
3491
|
+
error,
|
|
3492
|
+
children,
|
|
3493
|
+
readOnly,
|
|
3494
|
+
renderMenu,
|
|
3495
|
+
onClick,
|
|
3496
|
+
className,
|
|
3497
|
+
wrapperClassName,
|
|
3498
|
+
removeRoundness,
|
|
3499
|
+
displayValue,
|
|
3500
|
+
value
|
|
3501
|
+
} = _b, props = __objRest(_b, [
|
|
3502
|
+
"id",
|
|
3503
|
+
"testid",
|
|
3504
|
+
"label",
|
|
3505
|
+
"error",
|
|
3506
|
+
"children",
|
|
3507
|
+
"readOnly",
|
|
3508
|
+
"renderMenu",
|
|
3509
|
+
"onClick",
|
|
3510
|
+
"className",
|
|
3511
|
+
"wrapperClassName",
|
|
3512
|
+
"removeRoundness",
|
|
3513
|
+
"displayValue",
|
|
3514
|
+
"value"
|
|
3515
|
+
]);
|
|
3516
|
+
var _a2;
|
|
3517
|
+
const inputRef = (0, import_react17.useRef)(null);
|
|
3518
|
+
const inputContainerRef = (0, import_react17.useRef)(null);
|
|
3519
|
+
const preventFocusOnInitialRender = (0, import_react17.useRef)(true);
|
|
3520
|
+
const [show, setShow] = (0, import_react17.useState)(false);
|
|
3521
|
+
(0, import_react17.useEffect)(() => {
|
|
3522
|
+
var _a3;
|
|
3523
|
+
if (preventFocusOnInitialRender.current) {
|
|
3524
|
+
preventFocusOnInitialRender.current = false;
|
|
3525
|
+
return;
|
|
3526
|
+
}
|
|
3527
|
+
(_a3 = inputRef.current) == null ? void 0 : _a3.focus();
|
|
3528
|
+
}, [value]);
|
|
3529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3530
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3531
|
+
InputBase,
|
|
3532
|
+
__spreadProps(__spreadValues({
|
|
3533
|
+
id,
|
|
3534
|
+
testid,
|
|
3535
|
+
inputContainerRef,
|
|
3536
|
+
ref: inputRef,
|
|
3537
|
+
label,
|
|
3538
|
+
after: !readOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3539
|
+
"span",
|
|
3540
|
+
{
|
|
3541
|
+
className: (0, import_clsx14.default)(
|
|
3542
|
+
props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
|
|
3543
|
+
"contents"
|
|
3544
|
+
),
|
|
3545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "keyboard_arrow_down" })
|
|
3546
|
+
}
|
|
3547
|
+
),
|
|
3548
|
+
maxLength: 0,
|
|
3549
|
+
className: (0, import_clsx14.default)("!caret-transparent !cursor-default", className),
|
|
3550
|
+
wrapperClassName,
|
|
3551
|
+
onKeyDown: (e) => {
|
|
3552
|
+
const openKeys = ["Enter", "Space", " "];
|
|
3553
|
+
if (openKeys.includes(e.key)) {
|
|
3554
|
+
e.preventDefault();
|
|
3555
|
+
e.target.click();
|
|
3556
|
+
}
|
|
3557
|
+
},
|
|
3558
|
+
onClick: (e) => {
|
|
3559
|
+
if (props.disabled || readOnly) {
|
|
3560
|
+
return;
|
|
3561
|
+
}
|
|
3562
|
+
setShow(!show);
|
|
3563
|
+
onClick == null ? void 0 : onClick(e);
|
|
3564
|
+
},
|
|
3565
|
+
error,
|
|
3566
|
+
readOnly,
|
|
3567
|
+
removeRoundness,
|
|
3568
|
+
focus: show,
|
|
3569
|
+
onChange: (e) => {
|
|
3570
|
+
var _a3;
|
|
3571
|
+
return (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
|
|
3572
|
+
}
|
|
3573
|
+
}, props), {
|
|
3574
|
+
value: (_a2 = displayValue != null ? displayValue : value) != null ? _a2 : props.onChange ? "" : void 0
|
|
3575
|
+
})
|
|
3576
|
+
),
|
|
3577
|
+
renderMenu ? renderMenu({
|
|
3578
|
+
id: id ? `${id}-menu` : void 0,
|
|
3579
|
+
positionTo: inputContainerRef,
|
|
3580
|
+
show,
|
|
3581
|
+
setShow,
|
|
3582
|
+
topOffset: props.caption ? -16 : null
|
|
3583
|
+
}) : children
|
|
3584
|
+
] });
|
|
3585
|
+
};
|
|
3586
|
+
Select.displayName = "Select";
|
|
3587
|
+
|
|
3588
|
+
// src/components/Subheader.tsx
|
|
3589
|
+
var import_clsx15 = __toESM(require("clsx"), 1);
|
|
3590
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3591
|
+
var Subheader = (_a) => {
|
|
3592
|
+
var _b = _a, {
|
|
3593
|
+
className,
|
|
3594
|
+
children,
|
|
3595
|
+
as = "span",
|
|
3596
|
+
align,
|
|
3597
|
+
color,
|
|
3598
|
+
tall,
|
|
3599
|
+
id,
|
|
3600
|
+
testid
|
|
3601
|
+
} = _b, props = __objRest(_b, [
|
|
3602
|
+
"className",
|
|
3603
|
+
"children",
|
|
3604
|
+
"as",
|
|
3605
|
+
"align",
|
|
3606
|
+
"color",
|
|
3607
|
+
"tall",
|
|
3608
|
+
"id",
|
|
3609
|
+
"testid"
|
|
3610
|
+
]);
|
|
3611
|
+
const Element = as;
|
|
3612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3613
|
+
Element,
|
|
3614
|
+
__spreadProps(__spreadValues({
|
|
3615
|
+
id,
|
|
3616
|
+
"data-testid": testid,
|
|
3617
|
+
className: (0, import_clsx15.default)(
|
|
3618
|
+
typography.subheader,
|
|
3619
|
+
className,
|
|
3620
|
+
align === "left" && "text-left",
|
|
3621
|
+
align === "center" && "text-center",
|
|
3622
|
+
align === "right" && "text-right",
|
|
3623
|
+
tall && "!leading-6"
|
|
3624
|
+
),
|
|
3625
|
+
style: __spreadProps(__spreadValues({}, props.style), {
|
|
3626
|
+
color: color ? `var(--color-${color})` : void 0
|
|
3627
|
+
})
|
|
3628
|
+
}, props), {
|
|
3629
|
+
children
|
|
3630
|
+
})
|
|
3631
|
+
);
|
|
3632
|
+
};
|
|
3633
|
+
Subheader.displayName = "Subheader";
|
|
3634
|
+
|
|
3635
|
+
// src/components/Checkbox.tsx
|
|
3636
|
+
var import_clsx16 = __toESM(require("clsx"), 1);
|
|
3637
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3638
|
+
var Checkbox = (_a) => {
|
|
3639
|
+
var _b = _a, {
|
|
3640
|
+
label,
|
|
3641
|
+
error,
|
|
3642
|
+
disabled,
|
|
3643
|
+
readOnly,
|
|
3644
|
+
checked,
|
|
3645
|
+
onChange,
|
|
3646
|
+
indeterminate,
|
|
3647
|
+
paragraphClassName,
|
|
3648
|
+
id,
|
|
3649
|
+
testid
|
|
3650
|
+
} = _b, props = __objRest(_b, [
|
|
3651
|
+
"label",
|
|
3652
|
+
"error",
|
|
3653
|
+
"disabled",
|
|
3654
|
+
"readOnly",
|
|
3655
|
+
"checked",
|
|
3656
|
+
"onChange",
|
|
3657
|
+
"indeterminate",
|
|
3658
|
+
"paragraphClassName",
|
|
3659
|
+
"id",
|
|
3660
|
+
"testid"
|
|
3661
|
+
]);
|
|
3662
|
+
const selected = indeterminate || checked;
|
|
3663
|
+
const normalClassName = (0, import_clsx16.default)(
|
|
3664
|
+
!selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
|
|
3665
|
+
);
|
|
3666
|
+
const normalSelectedClassName = (0, import_clsx16.default)(
|
|
3667
|
+
selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
|
|
3668
|
+
);
|
|
3669
|
+
const errorClassName = (0, import_clsx16.default)(
|
|
3670
|
+
error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
|
|
3671
|
+
);
|
|
3672
|
+
const errorSelectedClassName = (0, import_clsx16.default)(
|
|
3673
|
+
error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
|
|
3674
|
+
);
|
|
3675
|
+
const disabledClassName = (0, import_clsx16.default)(
|
|
3676
|
+
disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
|
|
3677
|
+
);
|
|
3678
|
+
const readOnlyClassName = (0, import_clsx16.default)(
|
|
3679
|
+
readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
|
|
3680
|
+
);
|
|
3681
|
+
const checkColor = (0, import_clsx16.default)(
|
|
3682
|
+
selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
|
|
3683
|
+
selected && disabled && "color-background-action-primary-disabled"
|
|
3684
|
+
);
|
|
3685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
3686
|
+
"label",
|
|
3687
|
+
{
|
|
3688
|
+
id,
|
|
3689
|
+
"data-testid": testid,
|
|
3690
|
+
htmlFor: id ? `${id}-input` : void 0,
|
|
3691
|
+
className: (0, import_clsx16.default)(
|
|
3692
|
+
"flex items-center",
|
|
3693
|
+
componentGap,
|
|
3694
|
+
(disabled || readOnly && error || readOnly) && "cursor-default",
|
|
3695
|
+
!(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
|
|
3696
|
+
),
|
|
3697
|
+
children: [
|
|
3698
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3700
|
+
"input",
|
|
3701
|
+
__spreadValues({
|
|
3702
|
+
id: id ? `${id}-input` : void 0,
|
|
3703
|
+
"data-testid": testid ? `${testid}-input` : void 0,
|
|
3704
|
+
type: "checkbox",
|
|
3705
|
+
className: "sr-only peer",
|
|
3706
|
+
disabled,
|
|
3707
|
+
checked: selected,
|
|
3708
|
+
onChange: handleOnChange,
|
|
3709
|
+
"data-indeterminate": indeterminate
|
|
3710
|
+
}, props)
|
|
3711
|
+
),
|
|
3712
|
+
error && (readOnly || disabled) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3713
|
+
"div",
|
|
3714
|
+
{
|
|
3715
|
+
className: (0, import_clsx16.default)(
|
|
3716
|
+
"size-6 border rounded-base",
|
|
3717
|
+
"flex items-center justify-center",
|
|
3718
|
+
baseTransition,
|
|
3719
|
+
normalClassName,
|
|
3720
|
+
normalSelectedClassName,
|
|
3721
|
+
errorClassName,
|
|
3722
|
+
errorSelectedClassName,
|
|
3723
|
+
disabledClassName,
|
|
3724
|
+
readOnlyClassName,
|
|
3725
|
+
checkColor
|
|
3726
|
+
),
|
|
3727
|
+
children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close" }) })
|
|
3728
|
+
}
|
|
3729
|
+
)
|
|
3730
|
+
] }),
|
|
3731
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3732
|
+
Paragraph,
|
|
3733
|
+
{
|
|
3734
|
+
id: id ? `${id}-label` : void 0,
|
|
3735
|
+
testid: testid ? `${testid}-label` : void 0,
|
|
3736
|
+
as: "span",
|
|
3737
|
+
padded: true,
|
|
3738
|
+
className: (0, import_clsx16.default)(
|
|
3739
|
+
"text-nowrap",
|
|
3740
|
+
disabled && !error && "!text-text-primary-disabled",
|
|
3741
|
+
error && !disabled && !readOnly && "!text-text-primary-error",
|
|
3742
|
+
paragraphClassName
|
|
3743
|
+
),
|
|
3744
|
+
children: label
|
|
3745
|
+
}
|
|
3746
|
+
)
|
|
3747
|
+
]
|
|
3748
|
+
}
|
|
3749
|
+
);
|
|
3750
|
+
function handleOnChange(e) {
|
|
3751
|
+
if (disabled || readOnly || readOnly && error || !onChange) {
|
|
3752
|
+
return;
|
|
3753
|
+
}
|
|
3754
|
+
onChange(e);
|
|
3755
|
+
}
|
|
3756
|
+
};
|
|
3757
|
+
Checkbox.displayName = "Checkbox";
|
|
3758
|
+
|
|
3759
|
+
// src/components/Button.tsx
|
|
3760
|
+
var import_clsx17 = __toESM(require("clsx"), 1);
|
|
3761
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3762
|
+
var Button = (_a) => {
|
|
3763
|
+
var _b = _a, {
|
|
3764
|
+
variant = "primary",
|
|
3765
|
+
as = "button",
|
|
3766
|
+
block,
|
|
3767
|
+
leftIcon,
|
|
3768
|
+
rightIcon,
|
|
3769
|
+
className,
|
|
3770
|
+
classNameLabel,
|
|
3771
|
+
disabled = false,
|
|
3772
|
+
children,
|
|
3773
|
+
iconOnly = false,
|
|
3774
|
+
colorClassName,
|
|
3775
|
+
href,
|
|
3776
|
+
id,
|
|
3777
|
+
testid
|
|
3778
|
+
} = _b, props = __objRest(_b, [
|
|
3779
|
+
"variant",
|
|
3780
|
+
"as",
|
|
3781
|
+
"block",
|
|
3782
|
+
"leftIcon",
|
|
3783
|
+
"rightIcon",
|
|
3784
|
+
"className",
|
|
3785
|
+
"classNameLabel",
|
|
3786
|
+
"disabled",
|
|
3787
|
+
"children",
|
|
3788
|
+
"iconOnly",
|
|
3789
|
+
"colorClassName",
|
|
3790
|
+
"href",
|
|
3791
|
+
"id",
|
|
3792
|
+
"testid"
|
|
3793
|
+
]);
|
|
3794
|
+
const primaryVariantStyles = variant === "primary" && (0, import_clsx17.default)(
|
|
3795
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
|
|
3796
|
+
"bg-background-action-primary-normal border-background-action-primary-normal",
|
|
3797
|
+
"hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
|
|
3798
|
+
"focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
|
|
3799
|
+
"active:bg-background-action-primary-active active:border-background-action-primary-active",
|
|
3800
|
+
"disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
|
|
3801
|
+
);
|
|
3802
|
+
const secondaryVariantStyles = variant === "secondary" && (0, import_clsx17.default)(
|
|
3803
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
|
|
3804
|
+
"bg-background-action-secondary-normal border-border-action-normal",
|
|
3805
|
+
"hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
|
|
3806
|
+
"focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
|
|
3807
|
+
"active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
|
|
3808
|
+
"disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
|
|
3809
|
+
);
|
|
3810
|
+
const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx17.default)(
|
|
3811
|
+
"bg-transparent border-transparent",
|
|
3812
|
+
iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
|
|
3813
|
+
"bg-transparent border-transparent",
|
|
3814
|
+
"hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
|
|
3815
|
+
"focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
|
|
3816
|
+
"active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
|
|
3817
|
+
"disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
|
|
3818
|
+
);
|
|
3819
|
+
const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx17.default)(
|
|
3820
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
|
|
3821
|
+
"bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
|
|
3822
|
+
"hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
|
|
3823
|
+
"focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
|
|
3824
|
+
"active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
|
|
3825
|
+
"disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
|
|
3826
|
+
);
|
|
3827
|
+
const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx17.default)(
|
|
3828
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
|
|
3829
|
+
"bg-background-action-critical-secondary-normal border-border-action-critical-normal",
|
|
3830
|
+
"hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
|
|
3831
|
+
"focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
|
|
3832
|
+
"active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
|
|
3833
|
+
"disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
|
|
3834
|
+
);
|
|
3835
|
+
const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx17.default)(
|
|
3836
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
|
|
3837
|
+
"bg-transparent border-transparent text-text-action-critical-normal",
|
|
3838
|
+
"hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
|
|
3839
|
+
"focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
|
|
3840
|
+
"active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
|
|
3841
|
+
"disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
|
|
3842
|
+
);
|
|
3843
|
+
const navigationVarianStyles = variant === "navigation" && (0, import_clsx17.default)(
|
|
3844
|
+
(colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
|
|
3845
|
+
"bg-transparent",
|
|
3846
|
+
"hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
|
|
3847
|
+
"focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
|
|
3848
|
+
"active:bg-background-action-secondary-active active:text-text-action-primary-active",
|
|
3849
|
+
"disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
|
|
3850
|
+
"flex-col",
|
|
3851
|
+
paddingUsingComponentGap
|
|
3852
|
+
);
|
|
3853
|
+
const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx17.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
|
|
3854
|
+
const buttonClasses = (0, import_clsx17.default)(
|
|
3855
|
+
disabled ? "cursor-default" : "cursor-pointer",
|
|
3856
|
+
block ? "w-full" : "w-fit",
|
|
3857
|
+
baseTransition,
|
|
3858
|
+
"rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
|
|
3859
|
+
primaryVariantStyles,
|
|
3860
|
+
secondaryVariantStyles,
|
|
3861
|
+
tertiaryVariantStyles,
|
|
3862
|
+
primaryCriticalVariantStyles,
|
|
3863
|
+
secondaryCriticalVariantStyles,
|
|
3864
|
+
tertiaryCriticalVariantStyles,
|
|
3865
|
+
navigationVarianStyles,
|
|
3866
|
+
notNavigationVariantStyles,
|
|
3867
|
+
className
|
|
3868
|
+
);
|
|
3869
|
+
const labelClasses = (0, import_clsx17.default)(
|
|
3870
|
+
"min-h-6 flex items-center justify-center",
|
|
3871
|
+
classNameLabel,
|
|
3872
|
+
componentPaddingXUsingComponentGap,
|
|
3873
|
+
typography.buttonLabel
|
|
3874
|
+
);
|
|
3875
|
+
const Element = href && !as ? "a" : as;
|
|
3876
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
3877
|
+
Element,
|
|
3878
|
+
__spreadProps(__spreadValues({
|
|
3879
|
+
id,
|
|
3880
|
+
"data-testid": testid,
|
|
3881
|
+
type: Element === "button" ? "button" : void 0,
|
|
3882
|
+
className: buttonClasses
|
|
3883
|
+
}, props), {
|
|
3884
|
+
onClick: props.onClick,
|
|
3885
|
+
disabled,
|
|
3886
|
+
href,
|
|
3887
|
+
"data-theme": variant === "navigation" ? "brand" : void 0,
|
|
3888
|
+
children: [
|
|
3889
|
+
leftIcon && leftIcon,
|
|
3890
|
+
!iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
|
|
3891
|
+
rightIcon && rightIcon
|
|
3892
|
+
]
|
|
3893
|
+
})
|
|
3894
|
+
);
|
|
3895
|
+
};
|
|
3896
|
+
Button.displayName = "Button";
|
|
3897
|
+
|
|
3898
|
+
// src/components/Tooltip.tsx
|
|
3899
|
+
var import_clsx18 = __toESM(require("clsx"), 1);
|
|
3900
|
+
var import_react18 = require("react");
|
|
3901
|
+
var import_react_dom2 = require("react-dom");
|
|
3902
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3903
|
+
var Tooltip = ({
|
|
3904
|
+
id,
|
|
3905
|
+
testid,
|
|
3906
|
+
message,
|
|
3907
|
+
position = "top",
|
|
3908
|
+
children,
|
|
3909
|
+
showOnTruncation = false,
|
|
3910
|
+
offset = 8,
|
|
3911
|
+
keepHidden = false
|
|
3912
|
+
}) => {
|
|
3913
|
+
const ref = (0, import_react18.useRef)(null);
|
|
3914
|
+
const tooltipRef = (0, import_react18.useRef)(null);
|
|
3915
|
+
const [tooltipPosition, setTooltipPosition] = (0, import_react18.useState)({ top: 0, left: 0 });
|
|
3916
|
+
const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
|
|
3917
|
+
const [removeOpacity, setRemoveOpacity] = (0, import_react18.useState)(false);
|
|
3918
|
+
const updatePosition = () => {
|
|
3919
|
+
if (!ref.current || !tooltipRef.current) return;
|
|
3920
|
+
const rect = ref.current.getBoundingClientRect();
|
|
3921
|
+
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
3922
|
+
let top = 0;
|
|
3923
|
+
let left = 0;
|
|
3924
|
+
switch (position) {
|
|
3925
|
+
case "top":
|
|
3926
|
+
top = rect.top - tooltipRect.height - offset;
|
|
3927
|
+
left = rect.left + rect.width / 2 - tooltipRect.width / 2;
|
|
3928
|
+
break;
|
|
3929
|
+
case "bottom":
|
|
3930
|
+
top = rect.bottom + offset;
|
|
3931
|
+
left = rect.left + rect.width / 2 - tooltipRect.width / 2;
|
|
3932
|
+
break;
|
|
3933
|
+
case "left":
|
|
3934
|
+
top = rect.top + rect.height / 2 - tooltipRect.height / 2;
|
|
3935
|
+
left = rect.left - tooltipRect.width - offset;
|
|
3936
|
+
break;
|
|
3937
|
+
case "right":
|
|
3938
|
+
top = rect.top + rect.height / 2 - tooltipRect.height / 2;
|
|
3939
|
+
left = rect.right + offset;
|
|
3940
|
+
break;
|
|
3941
|
+
}
|
|
3942
|
+
setTooltipPosition({ top, left });
|
|
3943
|
+
requestAnimationFrame(() => {
|
|
3944
|
+
setRemoveOpacity(true);
|
|
3945
|
+
});
|
|
3946
|
+
};
|
|
3947
|
+
const handleMouseEnter = () => {
|
|
3948
|
+
if (!showOnTruncation || checkForTextTruncation()) {
|
|
3949
|
+
setIsVisible(true);
|
|
3950
|
+
}
|
|
3951
|
+
};
|
|
3952
|
+
const handleMouseLeave = () => {
|
|
3953
|
+
setIsVisible(false);
|
|
3954
|
+
setRemoveOpacity(false);
|
|
3955
|
+
};
|
|
3956
|
+
(0, import_react18.useEffect)(() => {
|
|
3957
|
+
if (isVisible && tooltipRef.current) {
|
|
3958
|
+
requestAnimationFrame(() => {
|
|
3959
|
+
updatePosition();
|
|
3960
|
+
});
|
|
3961
|
+
}
|
|
3962
|
+
}, [isVisible]);
|
|
3963
|
+
(0, import_react18.useEffect)(() => {
|
|
3964
|
+
if (isVisible) {
|
|
3965
|
+
window.addEventListener("resize", updatePosition);
|
|
3966
|
+
return () => window.removeEventListener("resize", updatePosition);
|
|
3967
|
+
}
|
|
3968
|
+
}, [isVisible]);
|
|
3969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
3970
|
+
"div",
|
|
3971
|
+
{
|
|
3972
|
+
id,
|
|
3973
|
+
"data-testid": testid,
|
|
3974
|
+
ref,
|
|
3975
|
+
className: "relative inline-grid grid-cols-[auto_1fr] items-center",
|
|
3976
|
+
onMouseEnter: handleMouseEnter,
|
|
3977
|
+
onMouseLeave: handleMouseLeave,
|
|
3978
|
+
children: [
|
|
3979
|
+
children,
|
|
3980
|
+
!keepHidden && isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
|
|
3981
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3982
|
+
"div",
|
|
3983
|
+
{
|
|
3984
|
+
id: id ? `${id}-message` : void 0,
|
|
3985
|
+
"data-testid": testid ? `${testid}-message` : void 0,
|
|
3986
|
+
ref: tooltipRef,
|
|
3987
|
+
style: {
|
|
3988
|
+
position: "fixed",
|
|
3989
|
+
top: `${tooltipPosition.top}px`,
|
|
3990
|
+
left: `${tooltipPosition.left}px`,
|
|
3991
|
+
zIndex: 9999
|
|
3992
|
+
},
|
|
3993
|
+
className: (0, import_clsx18.default)(
|
|
3994
|
+
typography.caption,
|
|
3995
|
+
"bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
|
|
3996
|
+
componentPadding,
|
|
3997
|
+
!removeOpacity && "opacity-0"
|
|
3998
|
+
),
|
|
3999
|
+
children: message
|
|
4000
|
+
}
|
|
4001
|
+
),
|
|
4002
|
+
document.body
|
|
4003
|
+
)
|
|
4004
|
+
]
|
|
4005
|
+
}
|
|
4006
|
+
);
|
|
4007
|
+
function checkForTextTruncation() {
|
|
4008
|
+
if (showOnTruncation && ref.current) {
|
|
4009
|
+
const paragraph = ref.current.querySelector("p");
|
|
4010
|
+
if (paragraph) {
|
|
4011
|
+
const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
|
|
4012
|
+
return isTruncated;
|
|
4013
|
+
}
|
|
4014
|
+
}
|
|
4015
|
+
return false;
|
|
4016
|
+
}
|
|
4017
|
+
};
|
|
4018
|
+
Tooltip.displayName = "Tooltip";
|
|
4019
|
+
|
|
4020
|
+
// src/components/Accordion.tsx
|
|
4021
|
+
var import_clsx21 = __toESM(require("clsx"), 1);
|
|
4022
|
+
|
|
4023
|
+
// src/components/Card.tsx
|
|
4024
|
+
var import_clsx19 = __toESM(require("clsx"), 1);
|
|
4025
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4026
|
+
|
|
4027
|
+
// src/components/Stack.tsx
|
|
4028
|
+
var import_clsx20 = __toESM(require("clsx"), 1);
|
|
4029
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4030
|
+
|
|
4031
|
+
// src/components/Accordion.tsx
|
|
4032
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4033
|
+
|
|
4034
|
+
// src/components/Heading.tsx
|
|
4035
|
+
var import_clsx22 = __toESM(require("clsx"), 1);
|
|
4036
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4037
|
+
var Heading = (_a) => {
|
|
4038
|
+
var _b = _a, {
|
|
4039
|
+
className,
|
|
4040
|
+
children,
|
|
4041
|
+
as,
|
|
4042
|
+
color,
|
|
4043
|
+
align,
|
|
4044
|
+
variant = "heading1",
|
|
4045
|
+
id,
|
|
4046
|
+
testid
|
|
4047
|
+
} = _b, props = __objRest(_b, [
|
|
4048
|
+
"className",
|
|
4049
|
+
"children",
|
|
4050
|
+
"as",
|
|
4051
|
+
"color",
|
|
4052
|
+
"align",
|
|
4053
|
+
"variant",
|
|
4054
|
+
"id",
|
|
4055
|
+
"testid"
|
|
4056
|
+
]);
|
|
4057
|
+
const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
|
|
4058
|
+
const Element = as != null ? as : defaultElement;
|
|
4059
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4060
|
+
Element,
|
|
4061
|
+
__spreadProps(__spreadValues({
|
|
4062
|
+
id,
|
|
4063
|
+
"data-testid": testid,
|
|
4064
|
+
className: (0, import_clsx22.default)(
|
|
4065
|
+
typography[variant],
|
|
4066
|
+
className,
|
|
4067
|
+
align === "left" && "text-left",
|
|
4068
|
+
align === "center" && "text-center",
|
|
4069
|
+
align === "right" && "text-right"
|
|
4070
|
+
),
|
|
4071
|
+
style: __spreadProps(__spreadValues({}, props.style), {
|
|
4072
|
+
color: color ? `var(--color-${color})` : void 0
|
|
4073
|
+
})
|
|
4074
|
+
}, props), {
|
|
4075
|
+
children
|
|
4076
|
+
})
|
|
4077
|
+
);
|
|
4078
|
+
};
|
|
4079
|
+
Heading.displayName = "Heading";
|
|
4080
|
+
var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
|
|
4081
|
+
var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
|
|
4082
|
+
var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
|
|
4083
|
+
Heading1.displayName = "Heading1";
|
|
4084
|
+
Heading2.displayName = "Heading2";
|
|
4085
|
+
Heading3.displayName = "Heading3";
|
|
4086
|
+
|
|
4087
|
+
// src/components/Theme.tsx
|
|
4088
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
4089
|
+
|
|
4090
|
+
// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
|
|
4091
|
+
var import_react20 = require("react");
|
|
4092
|
+
|
|
4093
|
+
// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
|
|
4094
|
+
var import_react19 = require("react");
|
|
4095
|
+
var GridContext = (0, import_react19.createContext)(null);
|
|
4096
|
+
|
|
4097
|
+
// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
|
|
4098
|
+
function useGridContext() {
|
|
4099
|
+
const ctx = (0, import_react20.useContext)(GridContext);
|
|
4100
|
+
if (!ctx) {
|
|
4101
|
+
throw new Error("useGridContext must be used within GridContextProvider");
|
|
4102
|
+
}
|
|
4103
|
+
return ctx;
|
|
4104
|
+
}
|
|
4105
|
+
|
|
4106
|
+
// src/components/MobileDataGrid/MobileDataGridHeader.tsx
|
|
4107
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
4108
|
+
|
|
4109
|
+
// src/components/MobileDataGrid/GridContextProvider/index.tsx
|
|
4110
|
+
var import_react21 = require("react");
|
|
4111
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
4112
|
+
|
|
4113
|
+
// src/components/Modal.tsx
|
|
4114
|
+
var import_clsx27 = __toESM(require("clsx"), 1);
|
|
4115
|
+
var import_react23 = require("react");
|
|
4116
|
+
|
|
4117
|
+
// src/components/ModalHeader.tsx
|
|
4118
|
+
var import_clsx23 = __toESM(require("clsx"), 1);
|
|
4119
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
4120
|
+
var ModalHeader = ({
|
|
4121
|
+
title,
|
|
4122
|
+
hideCloseIcon,
|
|
4123
|
+
headerIcon,
|
|
4124
|
+
headerIconAlign,
|
|
4125
|
+
onClose,
|
|
4126
|
+
id,
|
|
4127
|
+
testid,
|
|
4128
|
+
headerClassname
|
|
4129
|
+
}) => {
|
|
4130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
4131
|
+
"div",
|
|
4132
|
+
{
|
|
4133
|
+
id,
|
|
4134
|
+
"data-testid": testid,
|
|
4135
|
+
className: (0, import_clsx23.default)(
|
|
4136
|
+
"flex justify-between items-center",
|
|
4137
|
+
headerIconAlign === "center" && "justify-center",
|
|
4138
|
+
headerIconAlign === "right" && "justify-end",
|
|
4139
|
+
headerIconAlign === "left" && "justify-start",
|
|
4140
|
+
layoutPaddding,
|
|
4141
|
+
layoutGroupGap,
|
|
4142
|
+
headerClassname
|
|
4143
|
+
),
|
|
4144
|
+
children: [
|
|
4145
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_clsx23.default)("flex items-center flex-1", layoutGroupGap), children: [
|
|
4146
|
+
headerIcon,
|
|
4147
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4148
|
+
Heading2,
|
|
4149
|
+
{
|
|
4150
|
+
id: id ? `${id}-title` : void 0,
|
|
4151
|
+
testid: testid ? `${testid}-title` : void 0,
|
|
4152
|
+
as: "p",
|
|
4153
|
+
children: title
|
|
4154
|
+
}
|
|
4155
|
+
)
|
|
4156
|
+
] }),
|
|
4157
|
+
!hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
4158
|
+
Button,
|
|
4159
|
+
{
|
|
4160
|
+
id: id ? `${id}-close-button` : void 0,
|
|
4161
|
+
testid: testid ? `${testid}-close-button` : void 0,
|
|
4162
|
+
iconOnly: true,
|
|
4163
|
+
variant: "tertiary",
|
|
4164
|
+
onClick: onClose,
|
|
4165
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "close", size: 24 }) })
|
|
4166
|
+
}
|
|
4167
|
+
)
|
|
4168
|
+
]
|
|
4169
|
+
}
|
|
4170
|
+
);
|
|
4171
|
+
};
|
|
4172
|
+
ModalHeader.displayName = "ModalHeader";
|
|
4173
|
+
|
|
4174
|
+
// src/components/ModalContent.tsx
|
|
4175
|
+
var import_clsx24 = __toESM(require("clsx"), 1);
|
|
4176
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
4177
|
+
function ModalContent({
|
|
4178
|
+
fixedHeightScrolling,
|
|
4179
|
+
children,
|
|
4180
|
+
id,
|
|
4181
|
+
testid
|
|
4182
|
+
}) {
|
|
4183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
4184
|
+
"div",
|
|
4185
|
+
{
|
|
4186
|
+
id,
|
|
4187
|
+
"data-testid": testid,
|
|
4188
|
+
className: (0, import_clsx24.default)(
|
|
4189
|
+
"flex-grow desktop:flex-grow-0",
|
|
4190
|
+
layoutPaddding,
|
|
4191
|
+
fixedHeightScrolling && "overflow-auto"
|
|
4192
|
+
),
|
|
4193
|
+
children
|
|
4194
|
+
}
|
|
4195
|
+
);
|
|
4196
|
+
}
|
|
4197
|
+
ModalContent.displayName = "ModalContent";
|
|
4198
|
+
|
|
4199
|
+
// src/components/ModalButtons.tsx
|
|
4200
|
+
var import_clsx25 = __toESM(require("clsx"), 1);
|
|
4201
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
4202
|
+
var ModalButtons = ({
|
|
4203
|
+
onClose,
|
|
4204
|
+
onContinue,
|
|
4205
|
+
customActions,
|
|
4206
|
+
id,
|
|
4207
|
+
testid
|
|
4208
|
+
}) => {
|
|
4209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4210
|
+
"div",
|
|
4211
|
+
{
|
|
4212
|
+
id,
|
|
4213
|
+
"data-testid": testid,
|
|
4214
|
+
className: (0, import_clsx25.default)(
|
|
4215
|
+
"border-t border-neutral-300 flex justify-end",
|
|
4216
|
+
layoutPaddding,
|
|
4217
|
+
layoutGroupGap
|
|
4218
|
+
),
|
|
4219
|
+
children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
|
|
4220
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4221
|
+
Button,
|
|
4222
|
+
{
|
|
4223
|
+
id: id ? `${id}-close-button` : void 0,
|
|
4224
|
+
testid: testid ? `${testid}-close-button` : void 0,
|
|
4225
|
+
variant: "secondary",
|
|
4226
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "close", size: 24 }),
|
|
4227
|
+
onClick: onClose,
|
|
4228
|
+
className: "max-sm:w-full",
|
|
4229
|
+
children: "Close"
|
|
4230
|
+
}
|
|
4231
|
+
),
|
|
4232
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
4233
|
+
Button,
|
|
4234
|
+
{
|
|
4235
|
+
id: id ? `${id}-continue-button` : void 0,
|
|
4236
|
+
testid: testid ? `${testid}-continue-button` : void 0,
|
|
4237
|
+
variant: "primary",
|
|
4238
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "check", size: 24 }),
|
|
4239
|
+
className: "max-sm:w-full",
|
|
4240
|
+
onClick: onContinue,
|
|
4241
|
+
children: "Continue"
|
|
4242
|
+
}
|
|
4243
|
+
)
|
|
4244
|
+
] })
|
|
4245
|
+
}
|
|
4246
|
+
);
|
|
4247
|
+
};
|
|
4248
|
+
ModalButtons.displayName = "ModalButtons";
|
|
4249
|
+
|
|
4250
|
+
// src/components/ModalScrim.tsx
|
|
4251
|
+
var import_clsx26 = __toESM(require("clsx"), 1);
|
|
4252
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
4253
|
+
var ModalScrim = ({
|
|
4254
|
+
show = false,
|
|
4255
|
+
size = "small",
|
|
4256
|
+
children,
|
|
4257
|
+
onClick,
|
|
4258
|
+
ref,
|
|
4259
|
+
id,
|
|
4260
|
+
testid
|
|
4261
|
+
}) => {
|
|
4262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4263
|
+
"div",
|
|
4264
|
+
{
|
|
4265
|
+
id,
|
|
4266
|
+
"data-testid": testid,
|
|
4267
|
+
className: (0, import_clsx26.default)(
|
|
4268
|
+
"overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
|
|
4269
|
+
!show && " pointer-events-none",
|
|
4270
|
+
size === "small" && "p-4",
|
|
4271
|
+
size === "screen" ? "desktop:p-0" : "desktop:p-4",
|
|
4272
|
+
"inset-0 z-50"
|
|
4273
|
+
),
|
|
4274
|
+
onMouseDown: onClick,
|
|
4275
|
+
ref,
|
|
4276
|
+
children
|
|
4277
|
+
}
|
|
4278
|
+
);
|
|
4279
|
+
};
|
|
4280
|
+
ModalScrim.displayName = "ModalScrim";
|
|
4281
|
+
|
|
4282
|
+
// src/components/Modal.tsx
|
|
4283
|
+
var import_react_dom3 = require("react-dom");
|
|
4284
|
+
var import_react_use = require("react-use");
|
|
4285
|
+
|
|
4286
|
+
// src/components/useMounted.tsx
|
|
4287
|
+
var import_react22 = require("react");
|
|
4288
|
+
var useMounted = () => {
|
|
4289
|
+
const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
|
|
4290
|
+
(0, import_react22.useEffect)(() => {
|
|
4291
|
+
setIsMounted(true);
|
|
4292
|
+
return () => setIsMounted(false);
|
|
4293
|
+
}, []);
|
|
4294
|
+
return isMounted;
|
|
4295
|
+
};
|
|
4296
|
+
|
|
4297
|
+
// src/components/Modal.tsx
|
|
4298
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
4299
|
+
var fadeInScale = (element, duration = 300) => element.animate(
|
|
4300
|
+
[
|
|
4301
|
+
{ opacity: 0, transform: "scale(0.95)" },
|
|
4302
|
+
{ opacity: 1, transform: "scale(1)" }
|
|
4303
|
+
],
|
|
4304
|
+
{
|
|
4305
|
+
duration,
|
|
4306
|
+
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4307
|
+
fill: "both"
|
|
4308
|
+
}
|
|
4309
|
+
);
|
|
4310
|
+
var fadeOutScale = (element, duration = 200) => element.animate(
|
|
4311
|
+
[
|
|
4312
|
+
{ opacity: 1, transform: "scale(1)" },
|
|
4313
|
+
{ opacity: 0, transform: "scale(0.95)" }
|
|
4314
|
+
],
|
|
4315
|
+
{
|
|
4316
|
+
duration,
|
|
4317
|
+
easing: "ease-in-out",
|
|
4318
|
+
fill: "both"
|
|
4319
|
+
}
|
|
4320
|
+
);
|
|
4321
|
+
var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
4322
|
+
duration,
|
|
4323
|
+
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4324
|
+
fill: "both"
|
|
4325
|
+
});
|
|
4326
|
+
var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
|
|
4327
|
+
duration,
|
|
4328
|
+
easing: "ease-in-out",
|
|
4329
|
+
fill: "both"
|
|
4330
|
+
});
|
|
4331
|
+
var whenAllAnimationsFinish = (animations, callback) => {
|
|
4332
|
+
let finishedCount = 0;
|
|
4333
|
+
animations.forEach((animation) => {
|
|
4334
|
+
animation.onfinish = () => {
|
|
4335
|
+
finishedCount += 1;
|
|
4336
|
+
if (finishedCount === animations.length) {
|
|
4337
|
+
callback();
|
|
4338
|
+
}
|
|
4339
|
+
};
|
|
4340
|
+
});
|
|
4341
|
+
};
|
|
4342
|
+
var sizes = {
|
|
4343
|
+
small: {
|
|
4344
|
+
sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
|
|
4345
|
+
},
|
|
4346
|
+
medium: {
|
|
4347
|
+
sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
|
|
4348
|
+
},
|
|
4349
|
+
large: {
|
|
4350
|
+
sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
|
|
4351
|
+
},
|
|
4352
|
+
"x-large": {
|
|
4353
|
+
sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
|
|
4354
|
+
},
|
|
4355
|
+
screen: {
|
|
4356
|
+
sizeClass: "w-screen h-screen max-w-screen !rounded-none"
|
|
4357
|
+
}
|
|
4358
|
+
};
|
|
4359
|
+
var Modal = ({
|
|
4360
|
+
id,
|
|
4361
|
+
testid,
|
|
4362
|
+
title,
|
|
4363
|
+
open = false,
|
|
4364
|
+
size = "small",
|
|
4365
|
+
className,
|
|
4366
|
+
children,
|
|
4367
|
+
onClose,
|
|
4368
|
+
onContinue,
|
|
4369
|
+
closeOnBackdropClick = true,
|
|
4370
|
+
showButtons = false,
|
|
4371
|
+
hideCloseIcon = false,
|
|
4372
|
+
headerIcon,
|
|
4373
|
+
headerIconAlign,
|
|
4374
|
+
fixedHeightScrolling = false,
|
|
4375
|
+
customActions,
|
|
4376
|
+
headerClassname,
|
|
4377
|
+
customFooter,
|
|
4378
|
+
noWrapper
|
|
4379
|
+
}) => {
|
|
4380
|
+
var _a;
|
|
4381
|
+
const mounted = useMounted();
|
|
4382
|
+
const modalRef = (0, import_react23.useRef)(null);
|
|
4383
|
+
const bgRef = (0, import_react23.useRef)(null);
|
|
4384
|
+
const wasOpen = (0, import_react_use.usePrevious)(open);
|
|
4385
|
+
const isMobile = useMatchesMobile();
|
|
4386
|
+
const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
|
|
4387
|
+
(0, import_react23.useEffect)(() => {
|
|
4388
|
+
if (!mounted) return;
|
|
4389
|
+
if (!modalRef.current || !bgRef.current) {
|
|
4390
|
+
console.error("Modal or background reference is not set.");
|
|
4391
|
+
return;
|
|
4392
|
+
}
|
|
4393
|
+
if (wasOpen === void 0) return;
|
|
4394
|
+
if (wasOpen && !open) {
|
|
4395
|
+
const modalAnimation = fadeOutScale(modalRef.current);
|
|
4396
|
+
const bgAnimation = bgFadeOut(bgRef.current);
|
|
4397
|
+
whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
|
|
4398
|
+
if (onClose) {
|
|
4399
|
+
onClose();
|
|
4400
|
+
}
|
|
4401
|
+
});
|
|
4402
|
+
} else if (!wasOpen && open) {
|
|
4403
|
+
fadeInScale(modalRef.current);
|
|
4404
|
+
bgFadeIn(bgRef.current);
|
|
4405
|
+
}
|
|
4406
|
+
}, [mounted, onClose, open, wasOpen]);
|
|
4407
|
+
const handleKeyDown = (0, import_react23.useCallback)(
|
|
4408
|
+
(e) => {
|
|
4409
|
+
if (e.key === "Escape") {
|
|
4410
|
+
if (onClose) {
|
|
4411
|
+
e.preventDefault();
|
|
4412
|
+
onClose();
|
|
4413
|
+
}
|
|
4414
|
+
}
|
|
4415
|
+
},
|
|
4416
|
+
[onClose]
|
|
4417
|
+
);
|
|
4418
|
+
const handleClose = (0, import_react23.useCallback)(() => {
|
|
4419
|
+
if (onClose) {
|
|
4420
|
+
onClose();
|
|
4421
|
+
}
|
|
4422
|
+
}, [onClose]);
|
|
4423
|
+
(0, import_react23.useEffect)(() => {
|
|
4424
|
+
if (open) {
|
|
4425
|
+
document.addEventListener("keyup", handleKeyDown);
|
|
4426
|
+
}
|
|
4427
|
+
return () => {
|
|
4428
|
+
document.removeEventListener("keyup", handleKeyDown);
|
|
4429
|
+
};
|
|
4430
|
+
}, [open, handleKeyDown]);
|
|
4431
|
+
(0, import_react23.useEffect)(() => {
|
|
4432
|
+
if (!open) return;
|
|
4433
|
+
const scrollY = window.scrollY;
|
|
4434
|
+
const body = document.body;
|
|
4435
|
+
body.style.position = "fixed";
|
|
4436
|
+
body.style.top = `-${scrollY}px`;
|
|
4437
|
+
body.style.left = "0";
|
|
4438
|
+
body.style.right = "0";
|
|
4439
|
+
body.style.overflow = "hidden";
|
|
4440
|
+
body.style.width = "100%";
|
|
4441
|
+
return () => {
|
|
4442
|
+
body.style.position = "";
|
|
4443
|
+
body.style.top = "";
|
|
4444
|
+
body.style.left = "";
|
|
4445
|
+
body.style.right = "";
|
|
4446
|
+
body.style.overflow = "";
|
|
4447
|
+
body.style.width = "";
|
|
4448
|
+
window.scrollTo(0, scrollY);
|
|
4449
|
+
};
|
|
4450
|
+
}, [open]);
|
|
4451
|
+
const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
|
|
4452
|
+
const backgroundClickHandler = (0, import_react23.useCallback)(
|
|
4453
|
+
(e) => {
|
|
4454
|
+
const target = e.target;
|
|
4455
|
+
const currentTarget = e.currentTarget;
|
|
4456
|
+
if (currentTarget.contains(target) && currentTarget !== target) {
|
|
4457
|
+
e.stopPropagation();
|
|
4458
|
+
return;
|
|
4459
|
+
}
|
|
4460
|
+
if (open && closeOnBackdropClick) {
|
|
4461
|
+
handleClose();
|
|
4462
|
+
}
|
|
4463
|
+
},
|
|
4464
|
+
[open, closeOnBackdropClick, handleClose]
|
|
4465
|
+
);
|
|
4466
|
+
if (!mounted) {
|
|
4467
|
+
return null;
|
|
4468
|
+
}
|
|
4469
|
+
return (0, import_react_dom3.createPortal)(
|
|
4470
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4471
|
+
ModalScrim,
|
|
4472
|
+
{
|
|
4473
|
+
id: id ? `${id}-scrim` : void 0,
|
|
4474
|
+
testid: testid ? `${testid}-scrim` : void 0,
|
|
4475
|
+
size,
|
|
4476
|
+
ref: bgRef,
|
|
4477
|
+
show: open,
|
|
4478
|
+
onClick: backgroundClickHandler,
|
|
4479
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
4480
|
+
"div",
|
|
4481
|
+
{
|
|
4482
|
+
id,
|
|
4483
|
+
"data-testid": testid,
|
|
4484
|
+
ref: modalRef,
|
|
4485
|
+
className: (0, import_clsx27.default)(
|
|
4486
|
+
"shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
|
|
4487
|
+
computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
|
|
4488
|
+
className,
|
|
4489
|
+
!(className == null ? void 0 : className.includes("bg-")) && "bg-white",
|
|
4490
|
+
sizeClass
|
|
4491
|
+
),
|
|
4492
|
+
onClick: (e) => e.stopPropagation(),
|
|
4493
|
+
children: [
|
|
4494
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4495
|
+
ModalHeader,
|
|
4496
|
+
{
|
|
4497
|
+
id: id ? `${id}-header` : void 0,
|
|
4498
|
+
testid: testid ? `${testid}-header` : void 0,
|
|
4499
|
+
title,
|
|
4500
|
+
onClose: handleClose,
|
|
4501
|
+
hideCloseIcon,
|
|
4502
|
+
headerIcon,
|
|
4503
|
+
headerIconAlign,
|
|
4504
|
+
headerClassname
|
|
4505
|
+
}
|
|
4506
|
+
),
|
|
4507
|
+
children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4508
|
+
ModalContent,
|
|
4509
|
+
{
|
|
4510
|
+
id: id ? `${id}-content` : void 0,
|
|
4511
|
+
testid: testid ? `${testid}-content` : void 0,
|
|
4512
|
+
fixedHeightScrolling: computedFixedHeightScrolling,
|
|
4513
|
+
children
|
|
4514
|
+
}
|
|
4515
|
+
) : children,
|
|
4516
|
+
showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4517
|
+
ModalButtons,
|
|
4518
|
+
{
|
|
4519
|
+
id: id ? `${id}-buttons` : void 0,
|
|
4520
|
+
testid: testid ? `${testid}-buttons` : void 0,
|
|
4521
|
+
onClose: handleClose,
|
|
4522
|
+
onContinue,
|
|
4523
|
+
customActions
|
|
4524
|
+
}
|
|
4525
|
+
) : null
|
|
4526
|
+
]
|
|
4527
|
+
}
|
|
4528
|
+
)
|
|
4529
|
+
}
|
|
4530
|
+
),
|
|
4531
|
+
findDocumentRoot(bgRef.current)
|
|
4532
|
+
);
|
|
4533
|
+
};
|
|
4534
|
+
Modal.displayName = "Modal";
|
|
4535
|
+
|
|
4536
|
+
// src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
|
|
4537
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
4538
|
+
|
|
4539
|
+
// src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
|
|
4540
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
4541
|
+
|
|
4542
|
+
// src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
|
|
4543
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
4544
|
+
|
|
4545
|
+
// src/components/MobileDataGrid/ColumnList.tsx
|
|
4546
|
+
var import_clsx29 = __toESM(require("clsx"), 1);
|
|
4547
|
+
|
|
4548
|
+
// src/components/MobileDataGrid/MobileDataGridCard/index.tsx
|
|
4549
|
+
var import_clsx28 = __toESM(require("clsx"), 1);
|
|
4550
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
4551
|
+
|
|
4552
|
+
// src/components/MobileDataGrid/ColumnList.tsx
|
|
4553
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
4554
|
+
|
|
4555
|
+
// src/components/MobileDataGrid/index.tsx
|
|
4556
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
4557
|
+
|
|
4558
|
+
// src/components/ImagePlaceholder.tsx
|
|
4559
|
+
var import_react24 = require("react");
|
|
4560
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
4561
|
+
|
|
4562
|
+
// src/components/ProductImagePreview/Thumbnail.tsx
|
|
4563
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
4564
|
+
|
|
4565
|
+
// src/components/Grid.tsx
|
|
4566
|
+
var import_react25 = require("react");
|
|
4567
|
+
var import_clsx30 = __toESM(require("clsx"), 1);
|
|
4568
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
4569
|
+
|
|
4570
|
+
// src/components/ProductImagePreview/ProductPrimaryImage.tsx
|
|
4571
|
+
var import_react26 = require("react");
|
|
4572
|
+
|
|
4573
|
+
// src/components/Spinner.tsx
|
|
4574
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
4575
|
+
var Spinner = ({ size = "small", testid }) => {
|
|
4576
|
+
const dimension = size === "large" ? 48 : 24;
|
|
4577
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
4578
|
+
"svg",
|
|
4579
|
+
{
|
|
4580
|
+
"data-testid": testid,
|
|
4581
|
+
width: dimension,
|
|
4582
|
+
height: dimension,
|
|
4583
|
+
viewBox: "0 0 24 24",
|
|
4584
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4585
|
+
fill: "#1D1E1E",
|
|
4586
|
+
className: "spinner",
|
|
4587
|
+
"aria-label": "Loading",
|
|
4588
|
+
children: [
|
|
4589
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
|
|
4590
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
|
|
4591
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
|
|
4592
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
|
|
4593
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
|
|
4594
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
|
|
4595
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
|
|
4596
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
|
|
4597
|
+
]
|
|
4598
|
+
}
|
|
4599
|
+
);
|
|
4600
|
+
};
|
|
4601
|
+
Spinner.displayName = "Spinner";
|
|
4602
|
+
|
|
4603
|
+
// src/components/ProductImagePreview/ProductPrimaryImage.tsx
|
|
4604
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
4605
|
+
|
|
4606
|
+
// src/components/ProductImagePreview/ZoomWindow.tsx
|
|
4607
|
+
var import_react27 = require("react");
|
|
4608
|
+
|
|
4609
|
+
// src/components/Surface.tsx
|
|
4610
|
+
var import_clsx31 = __toESM(require("clsx"), 1);
|
|
4611
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
4612
|
+
var Surface = (_a) => {
|
|
4613
|
+
var _b = _a, {
|
|
4614
|
+
children,
|
|
4615
|
+
className,
|
|
4616
|
+
elevation = 0,
|
|
4617
|
+
id
|
|
4618
|
+
} = _b, props = __objRest(_b, [
|
|
4619
|
+
"children",
|
|
4620
|
+
"className",
|
|
4621
|
+
"elevation",
|
|
4622
|
+
"id"
|
|
4623
|
+
]);
|
|
4624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4625
|
+
"div",
|
|
4626
|
+
__spreadProps(__spreadValues({
|
|
4627
|
+
id,
|
|
4628
|
+
className: (0, import_clsx31.default)(
|
|
4629
|
+
"rounded-base",
|
|
4630
|
+
{
|
|
4631
|
+
"shadow-2": elevation === 2,
|
|
4632
|
+
"shadow-4": elevation === 4,
|
|
4633
|
+
"shadow-16": elevation === 16
|
|
4634
|
+
},
|
|
4635
|
+
className
|
|
4636
|
+
)
|
|
4637
|
+
}, props), {
|
|
4638
|
+
children
|
|
4639
|
+
})
|
|
4640
|
+
);
|
|
4641
|
+
};
|
|
4642
|
+
Surface.displayName = "Surface";
|
|
4643
|
+
|
|
4644
|
+
// src/components/ProductImagePreview/ZoomWindow.tsx
|
|
4645
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
4646
|
+
|
|
4647
|
+
// src/components/ProductImagePreview/CarouselPagination.tsx
|
|
4648
|
+
var import_clsx32 = require("clsx");
|
|
4649
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
4650
|
+
|
|
4651
|
+
// src/components/ProductImagePreview/MobileImageCarousel.tsx
|
|
4652
|
+
var import_react28 = require("react");
|
|
4653
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4654
|
+
|
|
4655
|
+
// src/components/ProductImagePreview/useProductImagePreview.ts
|
|
4656
|
+
var import_react29 = require("react");
|
|
4657
|
+
|
|
4658
|
+
// src/components/ProductImagePreview/index.tsx
|
|
4659
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4660
|
+
|
|
4661
|
+
// src/components/CompactImagesPreview.tsx
|
|
4662
|
+
var import_react30 = require("react");
|
|
4663
|
+
var import_clsx33 = __toESM(require("clsx"), 1);
|
|
4664
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4665
|
+
|
|
4666
|
+
// src/components/PDFViewer/index.tsx
|
|
4667
|
+
var import_react33 = require("react");
|
|
4668
|
+
|
|
4669
|
+
// src/components/PDFViewer/PDFElement.tsx
|
|
4670
|
+
var import_react_pdf2 = require("@mikecousins/react-pdf");
|
|
4671
|
+
var import_react32 = require("react");
|
|
4672
|
+
|
|
4673
|
+
// src/components/PDFViewer/PDFPage.tsx
|
|
4674
|
+
var import_react_pdf = require("@mikecousins/react-pdf");
|
|
4675
|
+
var import_react31 = require("react");
|
|
4676
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
4677
|
+
|
|
4678
|
+
// src/components/PDFViewer/PDFElement.tsx
|
|
4679
|
+
var import_clsx34 = __toESM(require("clsx"), 1);
|
|
4680
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
4681
|
+
|
|
4682
|
+
// src/components/PDFViewer/DownloadIcon.tsx
|
|
4683
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
4684
|
+
|
|
4685
|
+
// src/components/PDFViewer/PDFNavigation.tsx
|
|
4686
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
4687
|
+
|
|
4688
|
+
// src/components/PDFViewer/index.tsx
|
|
4689
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
4690
|
+
|
|
4691
|
+
// src/components/MobileDataGrid/ColumnSelector/index.tsx
|
|
4692
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
4693
|
+
function ColumnSelector() {
|
|
4694
|
+
const context = useGridContext();
|
|
4695
|
+
const ref = (0, import_react34.useRef)(null);
|
|
4696
|
+
const [show, setShow] = (0, import_react34.useState)(false);
|
|
4697
|
+
const {
|
|
4698
|
+
columns,
|
|
4699
|
+
id,
|
|
4700
|
+
testid,
|
|
4701
|
+
visibleColumns,
|
|
4702
|
+
numberOfColumnsToShow,
|
|
4703
|
+
primaryKey,
|
|
4704
|
+
resetColumnVisibility,
|
|
4705
|
+
dispatch
|
|
4706
|
+
} = context;
|
|
4707
|
+
const toggleColumnVisibility = (0, import_react34.useCallback)(
|
|
4708
|
+
(index, visible) => {
|
|
4709
|
+
dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
|
|
4710
|
+
},
|
|
4711
|
+
[dispatch]
|
|
4712
|
+
);
|
|
4713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4714
|
+
"div",
|
|
4715
|
+
{
|
|
4716
|
+
id: id ? `${id}-column-selector` : void 0,
|
|
4717
|
+
"data-testid": testid,
|
|
4718
|
+
className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
|
|
4719
|
+
ref,
|
|
4720
|
+
children: [
|
|
4721
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4722
|
+
Button,
|
|
4723
|
+
{
|
|
4724
|
+
id: id ? `${id}-button` : void 0,
|
|
4725
|
+
testid: testid ? `${testid}-button` : void 0,
|
|
4726
|
+
onClick: () => setShow((prev) => !prev),
|
|
4727
|
+
variant: "navigation",
|
|
4728
|
+
iconOnly: true,
|
|
4729
|
+
size: 24,
|
|
4730
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "tune" })
|
|
4731
|
+
}
|
|
4732
|
+
),
|
|
4733
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4734
|
+
Menu,
|
|
4735
|
+
{
|
|
4736
|
+
id: id ? `${id}-menu` : void 0,
|
|
4737
|
+
testid: testid ? `${testid}-menu` : void 0,
|
|
4738
|
+
positionTo: ref,
|
|
4739
|
+
position: "bottom-right",
|
|
4740
|
+
show,
|
|
4741
|
+
setShow,
|
|
4742
|
+
calculateMinMaxHeight: true,
|
|
4743
|
+
children: [
|
|
4744
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4745
|
+
Button,
|
|
4746
|
+
{
|
|
4747
|
+
id: id ? `${id}-reset-button` : void 0,
|
|
4748
|
+
testid: testid ? `${testid}-reset-button` : void 0,
|
|
4749
|
+
variant: "tertiary",
|
|
4750
|
+
onClick: () => {
|
|
4751
|
+
resetColumnVisibility();
|
|
4752
|
+
setShow(false);
|
|
4753
|
+
},
|
|
4754
|
+
children: "Reset to default"
|
|
4755
|
+
}
|
|
4756
|
+
),
|
|
4757
|
+
columns.filter((x) => {
|
|
4758
|
+
var _a;
|
|
4759
|
+
return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
|
|
4760
|
+
}).map((column) => {
|
|
4761
|
+
var _a, _b, _c;
|
|
4762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4763
|
+
MenuOption,
|
|
4764
|
+
{
|
|
4765
|
+
testid: testid ? `${testid}-option-${column.id}` : void 0,
|
|
4766
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4767
|
+
Checkbox,
|
|
4768
|
+
{
|
|
4769
|
+
id: id ? `${id}-checkbox-${column.id}` : void 0,
|
|
4770
|
+
testid: testid ? `${testid}-checkbox-${column.id}` : void 0,
|
|
4771
|
+
label: (_a = column.header) == null ? void 0 : _a.toString(),
|
|
4772
|
+
checked: !!((_b = column.meta) == null ? void 0 : _b.visible) || column.id === String(primaryKey),
|
|
4773
|
+
disabled: typeof numberOfColumnsToShow !== "undefined" && // account for header+link occupying one slot
|
|
4774
|
+
visibleColumns.length >= numberOfColumnsToShow - 1 && ((_c = column.meta) == null ? void 0 : _c.visible) !== true || column.id === String(primaryKey),
|
|
4775
|
+
onChange: (e) => {
|
|
4776
|
+
toggleColumnVisibility(
|
|
4777
|
+
columns.findIndex(({ id: id2 }) => id2 === column.id),
|
|
4778
|
+
e.target.checked
|
|
4779
|
+
);
|
|
4780
|
+
}
|
|
4781
|
+
}
|
|
4782
|
+
)
|
|
4783
|
+
},
|
|
4784
|
+
id ? `${id}-option-${column.id}` : void 0
|
|
4785
|
+
);
|
|
4786
|
+
})
|
|
4787
|
+
]
|
|
4788
|
+
}
|
|
4789
|
+
)
|
|
4790
|
+
]
|
|
4791
|
+
}
|
|
4792
|
+
);
|
|
4793
|
+
}
|
|
4794
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
4795
|
+
0 && (module.exports = {
|
|
4796
|
+
ColumnSelector
|
|
4797
|
+
});
|