@equinor/apollo-components 3.2.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +615 -677
- package/dist/index.mjs +615 -677
- package/package.json +7 -7
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,38 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __objRest = (source, exclude) => {
|
|
25
|
+
var target = {};
|
|
26
|
+
for (var prop in source)
|
|
27
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
if (source != null && __getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
+
target[prop] = source[prop];
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
7
36
|
var __commonJS = (cb, mod) => function __require() {
|
|
8
37
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
38
|
};
|
|
@@ -16,6 +45,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
45
|
return to;
|
|
17
46
|
};
|
|
18
47
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
48
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
49
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
50
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
51
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
19
52
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
20
53
|
mod
|
|
21
54
|
));
|
|
@@ -1007,7 +1040,11 @@ var require_arrayLikeKeys = __commonJS({
|
|
|
1007
1040
|
function arrayLikeKeys(value, inherited) {
|
|
1008
1041
|
var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
|
|
1009
1042
|
for (var key in value) {
|
|
1010
|
-
if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes &&
|
|
1043
|
+
if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
|
|
1044
|
+
(key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
|
|
1045
|
+
isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
|
|
1046
|
+
isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
|
|
1047
|
+
isIndex(key, length)))) {
|
|
1011
1048
|
result.push(key);
|
|
1012
1049
|
}
|
|
1013
1050
|
}
|
|
@@ -2345,33 +2382,16 @@ var Wrapper = styled.div`
|
|
|
2345
2382
|
max-width: 100%;
|
|
2346
2383
|
}
|
|
2347
2384
|
`;
|
|
2348
|
-
var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, {
|
|
2349
|
-
children: [
|
|
2350
|
-
/* @__PURE__ */ jsx(
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
children: title ?? "App Title"
|
|
2359
|
-
})
|
|
2360
|
-
]
|
|
2361
|
-
})
|
|
2362
|
-
}),
|
|
2363
|
-
/* @__PURE__ */ jsxs("div", {
|
|
2364
|
-
className: "--content-wrapper",
|
|
2365
|
-
children: [
|
|
2366
|
-
sidebar,
|
|
2367
|
-
/* @__PURE__ */ jsx("div", {
|
|
2368
|
-
className: "--content-outlet",
|
|
2369
|
-
children
|
|
2370
|
-
})
|
|
2371
|
-
]
|
|
2372
|
-
})
|
|
2373
|
-
]
|
|
2374
|
-
});
|
|
2385
|
+
var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, { children: [
|
|
2386
|
+
/* @__PURE__ */ jsx(TopBar, { sticky: false, children: /* @__PURE__ */ jsxs(TopBar.Header, { children: [
|
|
2387
|
+
/* @__PURE__ */ jsx(Icon, { data: icon != null ? icon : apps }),
|
|
2388
|
+
/* @__PURE__ */ jsx("span", { children: title != null ? title : "App Title" })
|
|
2389
|
+
] }) }),
|
|
2390
|
+
/* @__PURE__ */ jsxs("div", { className: "--content-wrapper", children: [
|
|
2391
|
+
sidebar,
|
|
2392
|
+
/* @__PURE__ */ jsx("div", { className: "--content-outlet", children })
|
|
2393
|
+
] })
|
|
2394
|
+
] });
|
|
2375
2395
|
|
|
2376
2396
|
// src/AppShell/AppSidebar.tsx
|
|
2377
2397
|
import { Button, Icon as Icon2 } from "@equinor/eds-core-react";
|
|
@@ -2408,38 +2428,34 @@ var Wrapper2 = styled2.div`
|
|
|
2408
2428
|
`;
|
|
2409
2429
|
function AppSidebar() {
|
|
2410
2430
|
const [collapsed, setCollapsed] = useState(false);
|
|
2411
|
-
return /* @__PURE__ */ jsx2(Wrapper2, {
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
className: "collapse-button
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
children:
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
!collapsed && /* @__PURE__ */ jsx2("div", {
|
|
2424
|
-
children: "Collapse"
|
|
2425
|
-
})
|
|
2426
|
-
]
|
|
2427
|
-
})
|
|
2428
|
-
})
|
|
2429
|
-
});
|
|
2431
|
+
return /* @__PURE__ */ jsx2(Wrapper2, { collapsed, children: /* @__PURE__ */ jsx2("div", { className: "collapse-button-wrapper", children: /* @__PURE__ */ jsxs2(
|
|
2432
|
+
Button,
|
|
2433
|
+
{
|
|
2434
|
+
className: "collapse-button",
|
|
2435
|
+
variant: collapsed ? "ghost_icon" : "ghost",
|
|
2436
|
+
onClick: () => setCollapsed(!collapsed),
|
|
2437
|
+
children: [
|
|
2438
|
+
/* @__PURE__ */ jsx2(Icon2, { data: collapsed ? last_page : first_page }),
|
|
2439
|
+
!collapsed && /* @__PURE__ */ jsx2("div", { children: "Collapse" })
|
|
2440
|
+
]
|
|
2441
|
+
}
|
|
2442
|
+
) }) });
|
|
2430
2443
|
}
|
|
2431
2444
|
|
|
2432
2445
|
// src/cells/CheckboxCell.tsx
|
|
2433
2446
|
import { Checkbox } from "@equinor/eds-core-react";
|
|
2434
2447
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
2435
2448
|
function CheckboxCell(context) {
|
|
2436
|
-
return /* @__PURE__ */ jsx3(
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2449
|
+
return /* @__PURE__ */ jsx3(
|
|
2450
|
+
Checkbox,
|
|
2451
|
+
{
|
|
2452
|
+
enterKeyHint: "next",
|
|
2453
|
+
"aria-label": "readonly",
|
|
2454
|
+
readOnly: true,
|
|
2455
|
+
checked: context.getValue(),
|
|
2456
|
+
disabled: true
|
|
2457
|
+
}
|
|
2458
|
+
);
|
|
2443
2459
|
}
|
|
2444
2460
|
|
|
2445
2461
|
// src/cells/ChipsCell.tsx
|
|
@@ -2477,17 +2493,15 @@ var Chip = styled3.div`
|
|
|
2477
2493
|
line-height: 22px;
|
|
2478
2494
|
height: 22px;
|
|
2479
2495
|
padding: 0 6px;
|
|
2480
|
-
background-color: ${(props) =>
|
|
2496
|
+
background-color: ${(props) => {
|
|
2497
|
+
var _a;
|
|
2498
|
+
return (_a = props.backgroundColor) != null ? _a : tokens2.colors.ui.background__medium.hex;
|
|
2499
|
+
}};
|
|
2481
2500
|
color: darkslategrey;
|
|
2482
2501
|
`;
|
|
2483
2502
|
var ChipsCell = (props) => {
|
|
2484
2503
|
var _a;
|
|
2485
|
-
return /* @__PURE__ */ jsx4(ChipsWrapper, {
|
|
2486
|
-
children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx4(Chip, {
|
|
2487
|
-
backgroundColor: stringToHslColor(value),
|
|
2488
|
-
children: value
|
|
2489
|
-
}, value))
|
|
2490
|
-
});
|
|
2504
|
+
return /* @__PURE__ */ jsx4(ChipsWrapper, { children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx4(Chip, { backgroundColor: stringToHslColor(value), children: value }, value)) });
|
|
2491
2505
|
};
|
|
2492
2506
|
|
|
2493
2507
|
// src/cells/DynamicCell.tsx
|
|
@@ -2533,17 +2547,9 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
|
|
|
2533
2547
|
var _a;
|
|
2534
2548
|
const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
|
|
2535
2549
|
if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2536
|
-
return /* @__PURE__ */ jsx5(StyledStickyCell, {
|
|
2537
|
-
backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
|
|
2538
|
-
"data-column": cell.column.id,
|
|
2539
|
-
children: cellContent
|
|
2540
|
-
});
|
|
2550
|
+
return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
|
|
2541
2551
|
}
|
|
2542
|
-
return /* @__PURE__ */ jsx5(StyledCell, {
|
|
2543
|
-
"data-column": cell.column.id,
|
|
2544
|
-
backgroundColor: highlight ? "#d5eaf4" : void 0,
|
|
2545
|
-
children: cellContent
|
|
2546
|
-
});
|
|
2552
|
+
return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
|
|
2547
2553
|
}
|
|
2548
2554
|
|
|
2549
2555
|
// src/cells/HeaderCell.tsx
|
|
@@ -2595,21 +2601,9 @@ var HeaderCell = ({ header, table }) => {
|
|
|
2595
2601
|
colSpan: header.colSpan
|
|
2596
2602
|
};
|
|
2597
2603
|
if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2598
|
-
return /* @__PURE__ */ jsx6(StickyCell2, {
|
|
2599
|
-
...cellProps,
|
|
2600
|
-
children: /* @__PURE__ */ jsx6(HeaderContent, {
|
|
2601
|
-
header,
|
|
2602
|
-
table
|
|
2603
|
-
})
|
|
2604
|
-
}, header.id);
|
|
2604
|
+
return /* @__PURE__ */ jsx6(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ jsx6(HeaderContent, { header, table }) }), header.id);
|
|
2605
2605
|
}
|
|
2606
|
-
return /* @__PURE__ */ jsx6(Cell2, {
|
|
2607
|
-
...cellProps,
|
|
2608
|
-
children: /* @__PURE__ */ jsx6(HeaderContent, {
|
|
2609
|
-
header,
|
|
2610
|
-
table
|
|
2611
|
-
})
|
|
2612
|
-
}, header.id);
|
|
2606
|
+
return /* @__PURE__ */ jsx6(Cell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ jsx6(HeaderContent, { header, table }) }), header.id);
|
|
2613
2607
|
};
|
|
2614
2608
|
var HeaderDiv = styled6.div`
|
|
2615
2609
|
display: flex;
|
|
@@ -2618,23 +2612,19 @@ var HeaderDiv = styled6.div`
|
|
|
2618
2612
|
z-index: 5;
|
|
2619
2613
|
`;
|
|
2620
2614
|
function HeaderContent({ header, table }) {
|
|
2615
|
+
var _a;
|
|
2621
2616
|
if (header.isPlaceholder)
|
|
2622
2617
|
return null;
|
|
2623
|
-
return /* @__PURE__ */ jsxs3(HeaderDiv, {
|
|
2624
|
-
|
|
2625
|
-
|
|
2618
|
+
return /* @__PURE__ */ jsxs3(HeaderDiv, { children: [
|
|
2619
|
+
flexRender2(header.column.columnDef.header, header.getContext()),
|
|
2620
|
+
(_a = {
|
|
2621
|
+
asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up }),
|
|
2622
|
+
desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down }),
|
|
2623
|
+
none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down })
|
|
2624
|
+
}[header.column.getIsSorted()]) != null ? _a : null,
|
|
2625
|
+
table.options.enableColumnResizing && /* @__PURE__ */ jsx6(
|
|
2626
|
+
"div",
|
|
2626
2627
|
{
|
|
2627
|
-
asc: /* @__PURE__ */ jsx6(Icon3, {
|
|
2628
|
-
data: arrow_drop_up
|
|
2629
|
-
}),
|
|
2630
|
-
desc: /* @__PURE__ */ jsx6(Icon3, {
|
|
2631
|
-
data: arrow_drop_down
|
|
2632
|
-
}),
|
|
2633
|
-
none: /* @__PURE__ */ jsx6(Icon3, {
|
|
2634
|
-
data: arrow_drop_down
|
|
2635
|
-
})
|
|
2636
|
-
}[header.column.getIsSorted()] ?? null,
|
|
2637
|
-
table.options.enableColumnResizing && /* @__PURE__ */ jsx6("div", {
|
|
2638
2628
|
onMouseDown: header.getResizeHandler(),
|
|
2639
2629
|
onTouchStart: header.getResizeHandler(),
|
|
2640
2630
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -2642,9 +2632,9 @@ function HeaderContent({ header, table }) {
|
|
|
2642
2632
|
style: {
|
|
2643
2633
|
transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
|
|
2644
2634
|
}
|
|
2645
|
-
}
|
|
2646
|
-
|
|
2647
|
-
});
|
|
2635
|
+
}
|
|
2636
|
+
)
|
|
2637
|
+
] });
|
|
2648
2638
|
}
|
|
2649
2639
|
function getSort({ column }) {
|
|
2650
2640
|
if (!column.getCanSort())
|
|
@@ -2676,29 +2666,22 @@ var truncateStyle = {
|
|
|
2676
2666
|
textOverflow: "ellipsis"
|
|
2677
2667
|
};
|
|
2678
2668
|
var TypographyCustom = (props) => {
|
|
2679
|
-
const { truncate, enableShowAllOnHover, style: styleFromProps,
|
|
2669
|
+
const _a = props, { truncate, enableShowAllOnHover, style: styleFromProps } = _a, edsTypographyProps = __objRest(_a, ["truncate", "enableShowAllOnHover", "style"]);
|
|
2680
2670
|
if (enableShowAllOnHover)
|
|
2681
|
-
return /* @__PURE__ */ jsx7(HoverCapture, {
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
style: {
|
|
2685
|
-
...styleFromProps,
|
|
2686
|
-
...truncateStyle
|
|
2687
|
-
}
|
|
2671
|
+
return /* @__PURE__ */ jsx7(HoverCapture, { children: /* @__PURE__ */ jsx7(
|
|
2672
|
+
EdsTypography,
|
|
2673
|
+
__spreadProps(__spreadValues({}, edsTypographyProps), {
|
|
2674
|
+
style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
|
|
2688
2675
|
})
|
|
2689
|
-
});
|
|
2676
|
+
) });
|
|
2690
2677
|
if (truncate)
|
|
2691
|
-
return /* @__PURE__ */ jsx7(
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
return /* @__PURE__ */ jsx7(EdsTypography, {
|
|
2699
|
-
...edsTypographyProps,
|
|
2700
|
-
style: styleFromProps
|
|
2701
|
-
});
|
|
2678
|
+
return /* @__PURE__ */ jsx7(
|
|
2679
|
+
EdsTypography,
|
|
2680
|
+
__spreadProps(__spreadValues({}, edsTypographyProps), {
|
|
2681
|
+
style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
|
|
2682
|
+
})
|
|
2683
|
+
);
|
|
2684
|
+
return /* @__PURE__ */ jsx7(EdsTypography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
|
|
2702
2685
|
};
|
|
2703
2686
|
var HoverCapture = styled7.div`
|
|
2704
2687
|
height: ${tokens4.typography.table.cell_text.lineHeight};
|
|
@@ -2747,17 +2730,18 @@ var CellWrapper = styled8(TypographyCustom)`
|
|
|
2747
2730
|
`}
|
|
2748
2731
|
`;
|
|
2749
2732
|
function HierarchyCell(cell, options = {}) {
|
|
2750
|
-
var _a, _b;
|
|
2751
|
-
return /* @__PURE__ */ jsxs4(
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2733
|
+
var _a, _b, _c, _d;
|
|
2734
|
+
return /* @__PURE__ */ jsxs4(
|
|
2735
|
+
CellWrapper,
|
|
2736
|
+
{
|
|
2737
|
+
depth: (_b = (_a = options.getRowDepth) == null ? void 0 : _a.call(options)) != null ? _b : cell.row.depth,
|
|
2738
|
+
expanded: cell.row.getIsExpanded(),
|
|
2739
|
+
children: [
|
|
2740
|
+
/* @__PURE__ */ jsx8("span", { className: "--divider" }),
|
|
2741
|
+
(_d = (_c = options.getDisplayName) == null ? void 0 : _c.call(options)) != null ? _d : cell.getValue()
|
|
2742
|
+
]
|
|
2743
|
+
}
|
|
2744
|
+
);
|
|
2761
2745
|
}
|
|
2762
2746
|
|
|
2763
2747
|
// src/cells/PopoverCell.tsx
|
|
@@ -2765,21 +2749,24 @@ import { Popover, Typography } from "@equinor/eds-core-react";
|
|
|
2765
2749
|
import { useRef, useState as useState2 } from "react";
|
|
2766
2750
|
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2767
2751
|
function PopoverCell(props) {
|
|
2752
|
+
var _a, _b;
|
|
2768
2753
|
const [open, setOpen] = useState2(false);
|
|
2769
2754
|
const anchorRef = useRef(null);
|
|
2770
2755
|
const handleClick = () => setOpen(!open);
|
|
2771
2756
|
const handleClose = () => setOpen(false);
|
|
2772
|
-
return /* @__PURE__ */ jsxs5("div", {
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
/* @__PURE__ */ jsx9(TypographyCustom, {
|
|
2757
|
+
return /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, ref: anchorRef, children: [
|
|
2758
|
+
/* @__PURE__ */ jsx9(
|
|
2759
|
+
TypographyCustom,
|
|
2760
|
+
{
|
|
2777
2761
|
onClick: stopPropagation(handleClick),
|
|
2778
2762
|
style: { cursor: "pointer" },
|
|
2779
2763
|
truncate: true,
|
|
2780
|
-
children: String(props.value)
|
|
2781
|
-
}
|
|
2782
|
-
|
|
2764
|
+
children: String((_a = props.value) != null ? _a : "")
|
|
2765
|
+
}
|
|
2766
|
+
),
|
|
2767
|
+
/* @__PURE__ */ jsxs5(
|
|
2768
|
+
Popover,
|
|
2769
|
+
{
|
|
2783
2770
|
id: props.id,
|
|
2784
2771
|
open,
|
|
2785
2772
|
"aria-controls": "expand cell",
|
|
@@ -2787,20 +2774,12 @@ function PopoverCell(props) {
|
|
|
2787
2774
|
onClose: handleClose,
|
|
2788
2775
|
placement: "bottom",
|
|
2789
2776
|
children: [
|
|
2790
|
-
props.title && /* @__PURE__ */ jsx9(Popover.Title, {
|
|
2791
|
-
|
|
2792
|
-
children: props.title
|
|
2793
|
-
})
|
|
2794
|
-
}),
|
|
2795
|
-
/* @__PURE__ */ jsx9(Popover.Content, {
|
|
2796
|
-
children: /* @__PURE__ */ jsx9(Typography, {
|
|
2797
|
-
children: String(props.value)
|
|
2798
|
-
})
|
|
2799
|
-
})
|
|
2777
|
+
props.title && /* @__PURE__ */ jsx9(Popover.Title, { children: /* @__PURE__ */ jsx9(Popover.Header, { children: props.title }) }),
|
|
2778
|
+
/* @__PURE__ */ jsx9(Popover.Content, { children: /* @__PURE__ */ jsx9(Typography, { children: String((_b = props.value) != null ? _b : "") }) })
|
|
2800
2779
|
]
|
|
2801
|
-
}
|
|
2802
|
-
|
|
2803
|
-
});
|
|
2780
|
+
}
|
|
2781
|
+
)
|
|
2782
|
+
] });
|
|
2804
2783
|
}
|
|
2805
2784
|
|
|
2806
2785
|
// src/cells/SelectColumnDef.tsx
|
|
@@ -2820,44 +2799,46 @@ function SelectColumnDef(props) {
|
|
|
2820
2799
|
return {
|
|
2821
2800
|
id: "select",
|
|
2822
2801
|
size: props.includeExpansionButton ? 96 : 48,
|
|
2823
|
-
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx10(CellWrapper2, {
|
|
2824
|
-
|
|
2802
|
+
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx10(CellWrapper2, { children: /* @__PURE__ */ jsx10(
|
|
2803
|
+
Checkbox2,
|
|
2804
|
+
{
|
|
2825
2805
|
checked: table.getIsAllRowsSelected(),
|
|
2826
2806
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
2827
2807
|
"aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
|
|
2828
2808
|
onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
|
|
2829
|
-
}
|
|
2830
|
-
}) : null,
|
|
2809
|
+
}
|
|
2810
|
+
) }) : null,
|
|
2831
2811
|
cell: ({ table, row }) => {
|
|
2832
2812
|
const paddingLeft = "0px";
|
|
2833
|
-
return /* @__PURE__ */ jsx10(CellWrapper2, {
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
}
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2813
|
+
return /* @__PURE__ */ jsx10(CellWrapper2, { paddingLeft, rowDepth: row.depth, children: /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
2814
|
+
selectionMode === "single" ? /* @__PURE__ */ jsx10(
|
|
2815
|
+
Radio,
|
|
2816
|
+
{
|
|
2817
|
+
checked: row.getIsSelected(),
|
|
2818
|
+
"aria-label": `Select row ${row.id}`,
|
|
2819
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2820
|
+
}
|
|
2821
|
+
) : /* @__PURE__ */ jsx10(
|
|
2822
|
+
Checkbox2,
|
|
2823
|
+
{
|
|
2824
|
+
checked: row.getIsSelected(),
|
|
2825
|
+
indeterminate: row.getIsSomeSelected(),
|
|
2826
|
+
"aria-label": `Select row ${row.id}`,
|
|
2827
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2828
|
+
}
|
|
2829
|
+
),
|
|
2830
|
+
row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx10(
|
|
2831
|
+
Button2,
|
|
2832
|
+
{
|
|
2833
|
+
variant: "ghost_icon",
|
|
2834
|
+
color: "secondary",
|
|
2835
|
+
"aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
|
|
2836
|
+
onClick: stopPropagation(row.getToggleExpandedHandler()),
|
|
2837
|
+
style: { cursor: "pointer" },
|
|
2838
|
+
children: /* @__PURE__ */ jsx10(Icon4, { data: row.getIsExpanded() ? chevron_up : chevron_down })
|
|
2839
|
+
}
|
|
2840
|
+
)
|
|
2841
|
+
] }) });
|
|
2861
2842
|
}
|
|
2862
2843
|
};
|
|
2863
2844
|
}
|
|
@@ -2914,93 +2895,76 @@ function ColumnSelect({ table }) {
|
|
|
2914
2895
|
const [isOpen, setIsOpen] = useState3(false);
|
|
2915
2896
|
const referenceElement = useRef2(null);
|
|
2916
2897
|
const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
|
|
2917
|
-
return /* @__PURE__ */ jsxs7(Fragment2, {
|
|
2918
|
-
children:
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
})
|
|
2935
|
-
}),
|
|
2936
|
-
/* @__PURE__ */ jsxs7(Popover2, {
|
|
2898
|
+
return /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
2899
|
+
/* @__PURE__ */ jsx11(Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ jsx11(
|
|
2900
|
+
Button3,
|
|
2901
|
+
{
|
|
2902
|
+
"aria-haspopup": true,
|
|
2903
|
+
id: "column-select-anchor",
|
|
2904
|
+
"aria-controls": "column-select-popover",
|
|
2905
|
+
"aria-expanded": isOpen,
|
|
2906
|
+
ref: referenceElement,
|
|
2907
|
+
variant: "ghost_icon",
|
|
2908
|
+
onClick: () => setIsOpen(true),
|
|
2909
|
+
children: /* @__PURE__ */ jsx11(Icon5, { name: "view_column", data: view_column })
|
|
2910
|
+
}
|
|
2911
|
+
) }),
|
|
2912
|
+
/* @__PURE__ */ jsxs7(
|
|
2913
|
+
Popover2,
|
|
2914
|
+
{
|
|
2937
2915
|
open: isOpen,
|
|
2938
2916
|
id: "column-select-popover",
|
|
2939
2917
|
anchorEl: referenceElement.current,
|
|
2940
2918
|
placement: "bottom-end",
|
|
2941
2919
|
onClose: () => setIsOpen(false),
|
|
2942
2920
|
children: [
|
|
2943
|
-
/* @__PURE__ */ jsxs7(Popover2.Header, {
|
|
2944
|
-
children:
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
/* @__PURE__ */ jsx11(Button3, {
|
|
2921
|
+
/* @__PURE__ */ jsxs7(Popover2.Header, { children: [
|
|
2922
|
+
/* @__PURE__ */ jsx11(Popover2.Title, { children: "Column settings" }),
|
|
2923
|
+
/* @__PURE__ */ jsx11(
|
|
2924
|
+
Button3,
|
|
2925
|
+
{
|
|
2949
2926
|
variant: "ghost_icon",
|
|
2950
2927
|
"aria-label": "Close column select",
|
|
2951
2928
|
onClick: () => setIsOpen(false),
|
|
2952
|
-
children: /* @__PURE__ */ jsx11(Icon5, {
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
children: "Reset to default"
|
|
2981
|
-
})
|
|
2982
|
-
})
|
|
2983
|
-
]
|
|
2984
|
-
})
|
|
2929
|
+
children: /* @__PURE__ */ jsx11(Icon5, { name: "close", data: close, size: 24 })
|
|
2930
|
+
}
|
|
2931
|
+
)
|
|
2932
|
+
] }),
|
|
2933
|
+
/* @__PURE__ */ jsxs7(Popover2.Content, { children: [
|
|
2934
|
+
/* @__PURE__ */ jsx11(ColumnSelectContent, { children: selectableColumns.map((column) => {
|
|
2935
|
+
return /* @__PURE__ */ jsx11(
|
|
2936
|
+
Checkbox3,
|
|
2937
|
+
{
|
|
2938
|
+
checked: column.getIsVisible(),
|
|
2939
|
+
label: getColumnHeader(column),
|
|
2940
|
+
onChange: column.getToggleVisibilityHandler()
|
|
2941
|
+
},
|
|
2942
|
+
column.id
|
|
2943
|
+
);
|
|
2944
|
+
}) }),
|
|
2945
|
+
/* @__PURE__ */ jsx11(Divider, { variant: "small" }),
|
|
2946
|
+
/* @__PURE__ */ jsx11(ActionsWrapper, { children: /* @__PURE__ */ jsx11(
|
|
2947
|
+
Button3,
|
|
2948
|
+
{
|
|
2949
|
+
color: "secondary",
|
|
2950
|
+
variant: "ghost",
|
|
2951
|
+
disabled: table.getIsAllColumnsVisible(),
|
|
2952
|
+
onClick: () => table.toggleAllColumnsVisible(true),
|
|
2953
|
+
children: "Reset to default"
|
|
2954
|
+
}
|
|
2955
|
+
) })
|
|
2956
|
+
] })
|
|
2985
2957
|
]
|
|
2986
|
-
}
|
|
2987
|
-
|
|
2988
|
-
});
|
|
2958
|
+
}
|
|
2959
|
+
)
|
|
2960
|
+
] });
|
|
2989
2961
|
}
|
|
2990
2962
|
|
|
2991
2963
|
// src/DataTable/components/TableHeader.tsx
|
|
2992
2964
|
import { Table as Table4 } from "@equinor/eds-core-react";
|
|
2993
2965
|
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
2994
2966
|
function TableHeader({ table, sticky }) {
|
|
2995
|
-
return /* @__PURE__ */ jsx12(Table4.Head, {
|
|
2996
|
-
sticky,
|
|
2997
|
-
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, {
|
|
2998
|
-
children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, {
|
|
2999
|
-
header,
|
|
3000
|
-
table
|
|
3001
|
-
}, header.id))
|
|
3002
|
-
}, headerGroup.id))
|
|
3003
|
-
});
|
|
2967
|
+
return /* @__PURE__ */ jsx12(Table4.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
|
|
3004
2968
|
}
|
|
3005
2969
|
|
|
3006
2970
|
// src/DataTable/DataTable.tsx
|
|
@@ -3026,18 +2990,7 @@ var PlaceholderTextWrapper = styled11.div`
|
|
|
3026
2990
|
justify-content: center;
|
|
3027
2991
|
`;
|
|
3028
2992
|
function PlaceholderRow({ isLoading }) {
|
|
3029
|
-
return /* @__PURE__ */ jsx13(Table5.Row, {
|
|
3030
|
-
children: /* @__PURE__ */ jsx13(Table5.Cell, {
|
|
3031
|
-
colSpan: 100,
|
|
3032
|
-
children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, {
|
|
3033
|
-
children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, {
|
|
3034
|
-
color: "primary"
|
|
3035
|
-
}) : /* @__PURE__ */ jsx13(Typography2, {
|
|
3036
|
-
children: "No data available"
|
|
3037
|
-
})
|
|
3038
|
-
})
|
|
3039
|
-
})
|
|
3040
|
-
});
|
|
2993
|
+
return /* @__PURE__ */ jsx13(Table5.Row, { children: /* @__PURE__ */ jsx13(Table5.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
|
|
3041
2994
|
}
|
|
3042
2995
|
|
|
3043
2996
|
// src/DataTable/components/TableBody.tsx
|
|
@@ -3062,29 +3015,36 @@ function TableRow({
|
|
|
3062
3015
|
}) {
|
|
3063
3016
|
var _a;
|
|
3064
3017
|
const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
|
|
3065
|
-
const tableRowContent = /* @__PURE__ */ jsx14(
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3018
|
+
const tableRowContent = /* @__PURE__ */ jsx14(
|
|
3019
|
+
StyledTableRow,
|
|
3020
|
+
{
|
|
3021
|
+
active: row.getIsSelected(),
|
|
3022
|
+
"data-index": index,
|
|
3023
|
+
ref: measureElement,
|
|
3024
|
+
style: {
|
|
3025
|
+
cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
|
|
3026
|
+
backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
|
|
3027
|
+
},
|
|
3028
|
+
onClick: () => {
|
|
3029
|
+
var _a2;
|
|
3030
|
+
return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row);
|
|
3031
|
+
},
|
|
3032
|
+
onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
|
|
3033
|
+
onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
|
|
3034
|
+
children: row.getVisibleCells().map((cell) => {
|
|
3035
|
+
var _a2;
|
|
3036
|
+
return /* @__PURE__ */ jsx14(
|
|
3037
|
+
DynamicCell,
|
|
3038
|
+
{
|
|
3039
|
+
cell,
|
|
3040
|
+
getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
|
|
3041
|
+
highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
|
|
3042
|
+
},
|
|
3043
|
+
cell.id
|
|
3044
|
+
);
|
|
3045
|
+
})
|
|
3046
|
+
}
|
|
3047
|
+
);
|
|
3088
3048
|
return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
|
|
3089
3049
|
}
|
|
3090
3050
|
var StyledTableRow = styled13(Table7.Row)`
|
|
@@ -3110,27 +3070,11 @@ function BasicTable({
|
|
|
3110
3070
|
tableCaption
|
|
3111
3071
|
}) {
|
|
3112
3072
|
const tableRows = table.getRowModel().rows;
|
|
3113
|
-
return /* @__PURE__ */ jsxs8(EdsTable2, {
|
|
3114
|
-
children:
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
}),
|
|
3119
|
-
/* @__PURE__ */ jsx15(TableHeader, {
|
|
3120
|
-
sticky: stickyHeader,
|
|
3121
|
-
table
|
|
3122
|
-
}),
|
|
3123
|
-
/* @__PURE__ */ jsx15(TableBody, {
|
|
3124
|
-
children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, {
|
|
3125
|
-
row,
|
|
3126
|
-
rowConfig,
|
|
3127
|
-
cellConfig
|
|
3128
|
-
}, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, {
|
|
3129
|
-
isLoading
|
|
3130
|
-
})
|
|
3131
|
-
})
|
|
3132
|
-
]
|
|
3133
|
-
});
|
|
3073
|
+
return /* @__PURE__ */ jsxs8(EdsTable2, { children: [
|
|
3074
|
+
/* @__PURE__ */ jsx15(EdsTable2.Caption, { hidden: true, children: tableCaption }),
|
|
3075
|
+
/* @__PURE__ */ jsx15(TableHeader, { sticky: stickyHeader, table }),
|
|
3076
|
+
/* @__PURE__ */ jsx15(TableBody, { children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, { row, rowConfig, cellConfig }, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, { isLoading }) })
|
|
3077
|
+
] });
|
|
3134
3078
|
}
|
|
3135
3079
|
|
|
3136
3080
|
// src/DataTable/components/DataTableHeader.tsx
|
|
@@ -3151,13 +3095,18 @@ var CloseButton = styled14(Button4)`
|
|
|
3151
3095
|
width: 24px;
|
|
3152
3096
|
height: 24px;
|
|
3153
3097
|
`;
|
|
3154
|
-
function DebouncedInput({
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
}
|
|
3098
|
+
function DebouncedInput(_a) {
|
|
3099
|
+
var _b = _a, {
|
|
3100
|
+
value: initialValue,
|
|
3101
|
+
onChange,
|
|
3102
|
+
icon,
|
|
3103
|
+
debounce = 500
|
|
3104
|
+
} = _b, props = __objRest(_b, [
|
|
3105
|
+
"value",
|
|
3106
|
+
"onChange",
|
|
3107
|
+
"icon",
|
|
3108
|
+
"debounce"
|
|
3109
|
+
]);
|
|
3161
3110
|
const [value, setValue] = useState4(initialValue);
|
|
3162
3111
|
useEffect(() => {
|
|
3163
3112
|
setValue(initialValue);
|
|
@@ -3168,30 +3117,15 @@ function DebouncedInput({
|
|
|
3168
3117
|
}, debounce);
|
|
3169
3118
|
return () => clearTimeout(timeout);
|
|
3170
3119
|
}, [value]);
|
|
3171
|
-
return /* @__PURE__ */ jsx16(Wrapper3, {
|
|
3172
|
-
|
|
3173
|
-
|
|
3120
|
+
return /* @__PURE__ */ jsx16(Wrapper3, { children: /* @__PURE__ */ jsx16(
|
|
3121
|
+
Input,
|
|
3122
|
+
__spreadProps(__spreadValues({}, props), {
|
|
3174
3123
|
value,
|
|
3175
|
-
leftAdornments: icon && /* @__PURE__ */ jsx16(Icon6, {
|
|
3176
|
-
|
|
3177
|
-
data: icon,
|
|
3178
|
-
size: 18
|
|
3179
|
-
}),
|
|
3180
|
-
rightAdornments: !!value && /* @__PURE__ */ jsx16(Tooltip2, {
|
|
3181
|
-
title: "Clear input",
|
|
3182
|
-
children: /* @__PURE__ */ jsx16(CloseButton, {
|
|
3183
|
-
variant: "ghost_icon",
|
|
3184
|
-
onClick: () => setValue(""),
|
|
3185
|
-
children: /* @__PURE__ */ jsx16(Icon6, {
|
|
3186
|
-
name: close2.name,
|
|
3187
|
-
data: close2,
|
|
3188
|
-
size: 18
|
|
3189
|
-
})
|
|
3190
|
-
})
|
|
3191
|
-
}),
|
|
3124
|
+
leftAdornments: icon && /* @__PURE__ */ jsx16(Icon6, { name: icon.name, data: icon, size: 18 }),
|
|
3125
|
+
rightAdornments: !!value && /* @__PURE__ */ jsx16(Tooltip2, { title: "Clear input", children: /* @__PURE__ */ jsx16(CloseButton, { variant: "ghost_icon", onClick: () => setValue(""), children: /* @__PURE__ */ jsx16(Icon6, { name: close2.name, data: close2, size: 18 }) }) }),
|
|
3192
3126
|
onChange: (event) => setValue(event.target.value)
|
|
3193
3127
|
})
|
|
3194
|
-
});
|
|
3128
|
+
) });
|
|
3195
3129
|
}
|
|
3196
3130
|
|
|
3197
3131
|
// src/DataTable/filters/functions.ts
|
|
@@ -3225,49 +3159,32 @@ function TableBanner({
|
|
|
3225
3159
|
tableCaption,
|
|
3226
3160
|
globalFilter
|
|
3227
3161
|
}) {
|
|
3228
|
-
var _a;
|
|
3229
|
-
return /* @__PURE__ */ jsxs9(TableBannerWrapper, {
|
|
3230
|
-
className: "--
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
/* @__PURE__ */ jsx17(
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, {
|
|
3255
|
-
table
|
|
3256
|
-
}),
|
|
3257
|
-
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", {
|
|
3258
|
-
children: [
|
|
3259
|
-
table.options.data.length.toLocaleString(),
|
|
3260
|
-
" /",
|
|
3261
|
-
" ",
|
|
3262
|
-
bannerConfig.totalRowCount.toLocaleString(),
|
|
3263
|
-
" rows"
|
|
3264
|
-
]
|
|
3265
|
-
})
|
|
3266
|
-
]
|
|
3267
|
-
})
|
|
3268
|
-
})
|
|
3269
|
-
]
|
|
3270
|
-
});
|
|
3162
|
+
var _a, _b;
|
|
3163
|
+
return /* @__PURE__ */ jsxs9(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
|
|
3164
|
+
/* @__PURE__ */ jsxs9(FilterContainer, { className: "--filter-container-left", children: [
|
|
3165
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, { variant: "h3", as: "h2", children: tableCaption }),
|
|
3166
|
+
(_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
|
|
3167
|
+
] }),
|
|
3168
|
+
/* @__PURE__ */ jsx17(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
3169
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx17(
|
|
3170
|
+
DebouncedInput,
|
|
3171
|
+
{
|
|
3172
|
+
value: globalFilter.state,
|
|
3173
|
+
icon: search,
|
|
3174
|
+
placeholder: (_b = bannerConfig.globalFilterPlaceholder) != null ? _b : "Search all columns",
|
|
3175
|
+
onChange: (value) => globalFilter.onChange(String(value))
|
|
3176
|
+
}
|
|
3177
|
+
),
|
|
3178
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, { table }),
|
|
3179
|
+
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", { children: [
|
|
3180
|
+
table.options.data.length.toLocaleString(),
|
|
3181
|
+
" /",
|
|
3182
|
+
" ",
|
|
3183
|
+
bannerConfig.totalRowCount.toLocaleString(),
|
|
3184
|
+
" rows"
|
|
3185
|
+
] })
|
|
3186
|
+
] }) })
|
|
3187
|
+
] });
|
|
3271
3188
|
}
|
|
3272
3189
|
|
|
3273
3190
|
// src/DataTable/components/VirtualTable.tsx
|
|
@@ -3280,24 +3197,24 @@ import { jsx as jsx18 } from "react/jsx-runtime";
|
|
|
3280
3197
|
var PaddingRow = (props) => {
|
|
3281
3198
|
if (!props.height)
|
|
3282
3199
|
return null;
|
|
3283
|
-
return /* @__PURE__ */ jsx18(Table8.Row, {
|
|
3284
|
-
style: { pointerEvents: "none" },
|
|
3285
|
-
children: /* @__PURE__ */ jsx18(Table8.Cell, {
|
|
3286
|
-
style: { height: `${props.height}px` }
|
|
3287
|
-
})
|
|
3288
|
-
});
|
|
3200
|
+
return /* @__PURE__ */ jsx18(Table8.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx18(Table8.Cell, { style: { height: `${props.height}px` } }) });
|
|
3289
3201
|
};
|
|
3290
3202
|
|
|
3291
3203
|
// src/DataTable/components/VirtualTable.tsx
|
|
3292
3204
|
import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3293
|
-
function VirtualTable({
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
}
|
|
3300
|
-
|
|
3205
|
+
function VirtualTable(_a) {
|
|
3206
|
+
var _b = _a, {
|
|
3207
|
+
table,
|
|
3208
|
+
rowConfig,
|
|
3209
|
+
cellConfig,
|
|
3210
|
+
containerRef
|
|
3211
|
+
} = _b, props = __objRest(_b, [
|
|
3212
|
+
"table",
|
|
3213
|
+
"rowConfig",
|
|
3214
|
+
"cellConfig",
|
|
3215
|
+
"containerRef"
|
|
3216
|
+
]);
|
|
3217
|
+
var _a2, _b2;
|
|
3301
3218
|
const { rows } = table.getRowModel();
|
|
3302
3219
|
const rowVirtualizer = useVirtualizer({
|
|
3303
3220
|
count: rows.length,
|
|
@@ -3307,42 +3224,30 @@ function VirtualTable({
|
|
|
3307
3224
|
overscan: 20
|
|
3308
3225
|
});
|
|
3309
3226
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
3310
|
-
const paddingTop = virtualRows.length > 0 ? ((
|
|
3311
|
-
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((
|
|
3312
|
-
return /* @__PURE__ */ jsxs10(Table9, {
|
|
3313
|
-
children:
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
measureElement: rowVirtualizer.measureElement
|
|
3335
|
-
}, row.id);
|
|
3336
|
-
}) : /* @__PURE__ */ jsx19(PlaceholderRow, {
|
|
3337
|
-
isLoading: props.isLoading
|
|
3338
|
-
}),
|
|
3339
|
-
/* @__PURE__ */ jsx19(PaddingRow, {
|
|
3340
|
-
height: paddingBottom
|
|
3341
|
-
})
|
|
3342
|
-
]
|
|
3343
|
-
})
|
|
3344
|
-
]
|
|
3345
|
-
});
|
|
3227
|
+
const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
|
|
3228
|
+
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
|
|
3229
|
+
return /* @__PURE__ */ jsxs10(Table9, { children: [
|
|
3230
|
+
/* @__PURE__ */ jsx19(Table9.Caption, { hidden: true, children: props.tableCaption }),
|
|
3231
|
+
/* @__PURE__ */ jsx19(TableHeader, { sticky: props.stickyHeader, table }),
|
|
3232
|
+
/* @__PURE__ */ jsxs10(TableBody, { children: [
|
|
3233
|
+
/* @__PURE__ */ jsx19(PaddingRow, { height: paddingTop }),
|
|
3234
|
+
rows.length ? virtualRows.map((virtualRow) => {
|
|
3235
|
+
const row = rows[virtualRow.index];
|
|
3236
|
+
return /* @__PURE__ */ jsx19(
|
|
3237
|
+
TableRow,
|
|
3238
|
+
{
|
|
3239
|
+
row,
|
|
3240
|
+
rowConfig,
|
|
3241
|
+
cellConfig,
|
|
3242
|
+
index: virtualRow.index,
|
|
3243
|
+
measureElement: rowVirtualizer.measureElement
|
|
3244
|
+
},
|
|
3245
|
+
row.id
|
|
3246
|
+
);
|
|
3247
|
+
}) : /* @__PURE__ */ jsx19(PlaceholderRow, { isLoading: props.isLoading }),
|
|
3248
|
+
/* @__PURE__ */ jsx19(PaddingRow, { height: paddingBottom })
|
|
3249
|
+
] })
|
|
3250
|
+
] });
|
|
3346
3251
|
}
|
|
3347
3252
|
|
|
3348
3253
|
// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
|
|
@@ -3395,10 +3300,16 @@ function canUseContainStrict(height) {
|
|
|
3395
3300
|
return true;
|
|
3396
3301
|
}
|
|
3397
3302
|
var DataTableWrapper = styled16.div`
|
|
3398
|
-
width: ${(props) =>
|
|
3303
|
+
width: ${(props) => {
|
|
3304
|
+
var _a;
|
|
3305
|
+
return (_a = props.width) != null ? _a : "100%";
|
|
3306
|
+
}};
|
|
3399
3307
|
|
|
3400
3308
|
.--table-container {
|
|
3401
|
-
height: ${(props) =>
|
|
3309
|
+
height: ${(props) => {
|
|
3310
|
+
var _a;
|
|
3311
|
+
return (_a = props.height) != null ? _a : "100%";
|
|
3312
|
+
}};
|
|
3402
3313
|
width: '100%';
|
|
3403
3314
|
overflow: auto;
|
|
3404
3315
|
${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
|
|
@@ -3408,41 +3319,44 @@ var DataTableWrapper = styled16.div`
|
|
|
3408
3319
|
|
|
3409
3320
|
// The following attribute is important for fixed column width
|
|
3410
3321
|
// CHANGE THIS WITH CAUTION
|
|
3411
|
-
table-layout: ${(props) =>
|
|
3322
|
+
table-layout: ${(props) => {
|
|
3323
|
+
var _a;
|
|
3324
|
+
return (_a = props.tableLayout) != null ? _a : "auto";
|
|
3325
|
+
}};
|
|
3412
3326
|
}
|
|
3413
3327
|
}
|
|
3414
3328
|
`;
|
|
3415
3329
|
function DataTable(props) {
|
|
3416
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
3330
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
|
|
3417
3331
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
3418
3332
|
const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
|
|
3419
3333
|
const [columnVisibility, setColumnVisibility] = [
|
|
3420
|
-
((_a = props.columnVisibility) == null ? void 0 : _a.state)
|
|
3421
|
-
((
|
|
3334
|
+
(_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
|
|
3335
|
+
(_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
|
|
3422
3336
|
];
|
|
3423
3337
|
const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
|
|
3424
3338
|
const [globalFilterState, setGlobalFilterState] = [
|
|
3425
|
-
((
|
|
3426
|
-
((
|
|
3339
|
+
(_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
|
|
3340
|
+
(_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
|
|
3427
3341
|
];
|
|
3428
|
-
const shouldEnableGlobalFilter = ((
|
|
3342
|
+
const shouldEnableGlobalFilter = ((_i = props.bannerConfig) == null ? void 0 : _i.enableGlobalFilterInput) || Boolean(props.globalFilter);
|
|
3429
3343
|
function enableGlobalFilter(value) {
|
|
3430
3344
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
3431
3345
|
}
|
|
3432
3346
|
const [internalSortingState, setInternalSortingState] = useState6([]);
|
|
3433
3347
|
const [sortingState, setSortingState] = [
|
|
3434
|
-
((
|
|
3435
|
-
((
|
|
3348
|
+
(_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
|
|
3349
|
+
(_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
|
|
3436
3350
|
];
|
|
3437
3351
|
const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
|
|
3438
3352
|
const [rowSelectionState, setRowSelectionState] = [
|
|
3439
|
-
((
|
|
3440
|
-
((
|
|
3353
|
+
(_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
|
|
3354
|
+
(_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
|
|
3441
3355
|
];
|
|
3442
3356
|
const [internalExpandedState, setInternalExpandedState] = useState6({});
|
|
3443
3357
|
const [expandedState, setExpandedState] = [
|
|
3444
|
-
((
|
|
3445
|
-
((
|
|
3358
|
+
(_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
|
|
3359
|
+
(_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
|
|
3446
3360
|
];
|
|
3447
3361
|
const table = useReactTable({
|
|
3448
3362
|
columns: prependSelectColumn(columns, props.rowSelection),
|
|
@@ -3451,18 +3365,14 @@ function DataTable(props) {
|
|
|
3451
3365
|
state: {
|
|
3452
3366
|
expanded: expandedState,
|
|
3453
3367
|
globalFilter: enableGlobalFilter(globalFilterState),
|
|
3454
|
-
sorting: ((
|
|
3368
|
+
sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
|
|
3455
3369
|
rowSelection: rowSelectionState,
|
|
3456
3370
|
columnVisibility
|
|
3457
3371
|
},
|
|
3458
3372
|
defaultColumn: {
|
|
3459
3373
|
cell: ({ cell }) => {
|
|
3460
3374
|
const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
|
|
3461
|
-
return /* @__PURE__ */ jsx20(TypographyCustom, {
|
|
3462
|
-
truncate: truncateMode === "hover",
|
|
3463
|
-
enableShowAllOnHover: true,
|
|
3464
|
-
children: cell.getValue()
|
|
3465
|
-
});
|
|
3375
|
+
return /* @__PURE__ */ jsx20(TypographyCustom, { truncate: truncateMode === "hover", enableShowAllOnHover: true, children: cell.getValue() });
|
|
3466
3376
|
}
|
|
3467
3377
|
},
|
|
3468
3378
|
enableColumnResizing: Boolean(props.columnResizing),
|
|
@@ -3470,8 +3380,8 @@ function DataTable(props) {
|
|
|
3470
3380
|
enableSorting: sorting == null ? void 0 : sorting.enableSorting,
|
|
3471
3381
|
manualSorting: sorting == null ? void 0 : sorting.manualSorting,
|
|
3472
3382
|
enableExpanding: Boolean(props.expansion),
|
|
3473
|
-
enableMultiRowSelection: ((
|
|
3474
|
-
enableSubRowSelection: ((
|
|
3383
|
+
enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
|
|
3384
|
+
enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
|
|
3475
3385
|
filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
|
|
3476
3386
|
getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
|
|
3477
3387
|
getCoreRowModel: getCoreRowModel(),
|
|
@@ -3479,7 +3389,7 @@ function DataTable(props) {
|
|
|
3479
3389
|
getSortedRowModel: getSortedRowModel(),
|
|
3480
3390
|
onExpandedChange: setExpandedState,
|
|
3481
3391
|
onRowSelectionChange: setRowSelectionState,
|
|
3482
|
-
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange)
|
|
3392
|
+
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
|
|
3483
3393
|
onColumnVisibilityChange: setColumnVisibility,
|
|
3484
3394
|
onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
|
|
3485
3395
|
getSubRows: props == null ? void 0 : props.getSubRows,
|
|
@@ -3490,7 +3400,7 @@ function DataTable(props) {
|
|
|
3490
3400
|
if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
|
|
3491
3401
|
table.toggleAllRowsExpanded();
|
|
3492
3402
|
}
|
|
3493
|
-
}, [table, (
|
|
3403
|
+
}, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
|
|
3494
3404
|
const { isLoading, rowConfig } = props;
|
|
3495
3405
|
const tableContainerRef = useRef3(null);
|
|
3496
3406
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
@@ -3502,21 +3412,21 @@ function DataTable(props) {
|
|
|
3502
3412
|
if (Boolean(tableContainerRef.current))
|
|
3503
3413
|
forceRerender();
|
|
3504
3414
|
}, [tableContainerRef.current === null]);
|
|
3505
|
-
return /* @__PURE__ */ jsxs11(DataTableWrapper, {
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
children: [
|
|
3510
|
-
props.bannerConfig && /* @__PURE__ */ jsx20(TableBanner, {
|
|
3415
|
+
return /* @__PURE__ */ jsxs11(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
|
|
3416
|
+
props.bannerConfig && /* @__PURE__ */ jsx20(
|
|
3417
|
+
TableBanner,
|
|
3418
|
+
{
|
|
3511
3419
|
table,
|
|
3512
3420
|
bannerConfig: props.bannerConfig,
|
|
3513
3421
|
globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
|
|
3514
3422
|
tableCaption: props.tableCaption
|
|
3515
|
-
}
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3423
|
+
}
|
|
3424
|
+
),
|
|
3425
|
+
/* @__PURE__ */ jsx20(
|
|
3426
|
+
"div",
|
|
3427
|
+
__spreadProps(__spreadValues({}, props.tableContainerProps), {
|
|
3428
|
+
className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
|
|
3429
|
+
onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
|
|
3520
3430
|
ref: (node) => {
|
|
3521
3431
|
var _a2;
|
|
3522
3432
|
if (node) {
|
|
@@ -3526,25 +3436,31 @@ function DataTable(props) {
|
|
|
3526
3436
|
}
|
|
3527
3437
|
}
|
|
3528
3438
|
},
|
|
3529
|
-
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3439
|
+
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
|
|
3440
|
+
VirtualTable,
|
|
3441
|
+
{
|
|
3442
|
+
containerRef: tableContainerRef,
|
|
3443
|
+
tableCaption: props.tableCaption,
|
|
3444
|
+
table,
|
|
3445
|
+
rowConfig,
|
|
3446
|
+
cellConfig,
|
|
3447
|
+
isLoading,
|
|
3448
|
+
stickyHeader: props.stickyHeader
|
|
3449
|
+
}
|
|
3450
|
+
) : /* @__PURE__ */ jsx20(
|
|
3451
|
+
BasicTable,
|
|
3452
|
+
{
|
|
3453
|
+
tableCaption: props.tableCaption,
|
|
3454
|
+
table,
|
|
3455
|
+
rowConfig,
|
|
3456
|
+
cellConfig,
|
|
3457
|
+
isLoading,
|
|
3458
|
+
stickyHeader: props.stickyHeader
|
|
3459
|
+
}
|
|
3460
|
+
)
|
|
3545
3461
|
})
|
|
3546
|
-
|
|
3547
|
-
});
|
|
3462
|
+
)
|
|
3463
|
+
] });
|
|
3548
3464
|
}
|
|
3549
3465
|
|
|
3550
3466
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
@@ -3560,16 +3476,21 @@ var formMeta = {
|
|
|
3560
3476
|
_hasRemoteChange: false
|
|
3561
3477
|
};
|
|
3562
3478
|
function useEditMode() {
|
|
3479
|
+
var _a;
|
|
3563
3480
|
const { watch } = useFormContext();
|
|
3564
|
-
return watch("_editMode")
|
|
3481
|
+
return (_a = watch("_editMode")) != null ? _a : false;
|
|
3565
3482
|
}
|
|
3566
3483
|
function useHasRemoteChange() {
|
|
3484
|
+
var _a;
|
|
3567
3485
|
const { watch } = useFormContext();
|
|
3568
|
-
return watch("_hasRemoteChange")
|
|
3486
|
+
return (_a = watch("_hasRemoteChange")) != null ? _a : false;
|
|
3569
3487
|
}
|
|
3570
3488
|
function useGetIsNew() {
|
|
3571
3489
|
const { getValues } = useFormContext();
|
|
3572
|
-
return () =>
|
|
3490
|
+
return () => {
|
|
3491
|
+
var _a;
|
|
3492
|
+
return (_a = getValues("_isNew")) != null ? _a : false;
|
|
3493
|
+
};
|
|
3573
3494
|
}
|
|
3574
3495
|
function useSetFormMeta() {
|
|
3575
3496
|
const { setValue } = useFormContext();
|
|
@@ -3582,7 +3503,7 @@ function removeFormMeta(withFormMeta) {
|
|
|
3582
3503
|
return (0, import_omit.default)(withFormMeta, Object.keys(formMeta));
|
|
3583
3504
|
}
|
|
3584
3505
|
function addFormMeta(withoutFormMeta) {
|
|
3585
|
-
return {
|
|
3506
|
+
return __spreadValues(__spreadValues({}, formMeta), withoutFormMeta);
|
|
3586
3507
|
}
|
|
3587
3508
|
|
|
3588
3509
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
@@ -3590,22 +3511,26 @@ import { jsx as jsx21 } from "react/jsx-runtime";
|
|
|
3590
3511
|
function EditableCheckboxCell(context) {
|
|
3591
3512
|
const editMode = useEditMode();
|
|
3592
3513
|
if (!editMode)
|
|
3593
|
-
return /* @__PURE__ */ jsx21(
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3514
|
+
return /* @__PURE__ */ jsx21(
|
|
3515
|
+
Checkbox4,
|
|
3516
|
+
{
|
|
3517
|
+
enterKeyHint: "next",
|
|
3518
|
+
"aria-label": "readonly",
|
|
3519
|
+
readOnly: true,
|
|
3520
|
+
checked: context.getValue(),
|
|
3521
|
+
disabled: true
|
|
3522
|
+
}
|
|
3523
|
+
);
|
|
3524
|
+
return /* @__PURE__ */ jsx21(
|
|
3525
|
+
Controller,
|
|
3526
|
+
{
|
|
3527
|
+
name: context.column.id,
|
|
3528
|
+
render: (_a) => {
|
|
3529
|
+
var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
|
|
3530
|
+
return /* @__PURE__ */ jsx21(Checkbox4, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
|
|
3531
|
+
}
|
|
3532
|
+
}
|
|
3533
|
+
);
|
|
3609
3534
|
}
|
|
3610
3535
|
|
|
3611
3536
|
// src/form-cells/EditableDateCell.tsx
|
|
@@ -3627,19 +3552,13 @@ function getHelperTextProps({
|
|
|
3627
3552
|
return {
|
|
3628
3553
|
variant: "error",
|
|
3629
3554
|
helperText: error.message,
|
|
3630
|
-
helperIcon: /* @__PURE__ */ jsx22(Icon7, {
|
|
3631
|
-
data: error_filled,
|
|
3632
|
-
size: 16
|
|
3633
|
-
})
|
|
3555
|
+
helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: error_filled, size: 16 })
|
|
3634
3556
|
};
|
|
3635
3557
|
if (warning)
|
|
3636
3558
|
return {
|
|
3637
3559
|
variant: "warning",
|
|
3638
3560
|
helperText: warning.message,
|
|
3639
|
-
helperIcon: /* @__PURE__ */ jsx22(Icon7, {
|
|
3640
|
-
data: warning_filled,
|
|
3641
|
-
size: 16
|
|
3642
|
-
})
|
|
3561
|
+
helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: warning_filled, size: 16 })
|
|
3643
3562
|
};
|
|
3644
3563
|
return {
|
|
3645
3564
|
helperText,
|
|
@@ -3656,30 +3575,37 @@ function stopPropagation2(handler) {
|
|
|
3656
3575
|
// src/form-cells/EditableDateCell.tsx
|
|
3657
3576
|
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
3658
3577
|
function EditableDateCell(props) {
|
|
3659
|
-
const { dateStringFormatter,
|
|
3578
|
+
const _a = props, { dateStringFormatter } = _a, context = __objRest(_a, ["dateStringFormatter"]);
|
|
3660
3579
|
const rawValue = context.getValue();
|
|
3661
3580
|
const editMode = useEditMode();
|
|
3662
3581
|
const formattedValue = useMemo(
|
|
3663
|
-
() =>
|
|
3582
|
+
() => {
|
|
3583
|
+
var _a2;
|
|
3584
|
+
return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
|
|
3585
|
+
},
|
|
3664
3586
|
[rawValue, dateStringFormatter]
|
|
3665
3587
|
);
|
|
3666
3588
|
if (!editMode)
|
|
3667
|
-
return /* @__PURE__ */ jsx23(TypographyCustom, {
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3589
|
+
return /* @__PURE__ */ jsx23(TypographyCustom, { truncate: true, children: formattedValue });
|
|
3590
|
+
return /* @__PURE__ */ jsx23(
|
|
3591
|
+
Controller2,
|
|
3592
|
+
{
|
|
3593
|
+
name: context.column.id,
|
|
3594
|
+
render: (_b) => {
|
|
3595
|
+
var _c = _b, { field: _d } = _c, _e = _d, { value, onChange } = _e, field = __objRest(_e, ["value", "onChange"]), { fieldState: { error } } = _c;
|
|
3596
|
+
return /* @__PURE__ */ jsx23(
|
|
3597
|
+
InlineTextField,
|
|
3598
|
+
__spreadValues(__spreadValues({
|
|
3599
|
+
id: context.column.id,
|
|
3600
|
+
type: "date",
|
|
3601
|
+
autoComplete: "none",
|
|
3602
|
+
value: value ? parseISODate(value) : "",
|
|
3603
|
+
onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
|
|
3604
|
+
}, getHelperTextProps({ error })), field)
|
|
3605
|
+
);
|
|
3606
|
+
}
|
|
3607
|
+
}
|
|
3608
|
+
);
|
|
3683
3609
|
}
|
|
3684
3610
|
function parseISODate(dateString) {
|
|
3685
3611
|
const date = new Date(dateString);
|
|
@@ -3718,33 +3644,40 @@ function buildEmptyOption() {
|
|
|
3718
3644
|
return { label: "", value: "" };
|
|
3719
3645
|
}
|
|
3720
3646
|
function EditableDropdownSingleCell(props) {
|
|
3721
|
-
const { options,
|
|
3647
|
+
const _a = props, { options } = _a, context = __objRest(_a, ["options"]);
|
|
3722
3648
|
const editMode = useEditMode();
|
|
3723
3649
|
if (!editMode)
|
|
3724
|
-
return /* @__PURE__ */ jsx24(TypographyCustom, {
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3650
|
+
return /* @__PURE__ */ jsx24(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3651
|
+
return /* @__PURE__ */ jsx24(
|
|
3652
|
+
Controller3,
|
|
3653
|
+
{
|
|
3654
|
+
name: context.column.id,
|
|
3655
|
+
render: (_b) => {
|
|
3656
|
+
var { field: _c } = _b, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]);
|
|
3657
|
+
var _a2;
|
|
3658
|
+
const selectedOption = (_a2 = options.find((option) => option.value === value)) != null ? _a2 : buildEmptyOption();
|
|
3659
|
+
return /* @__PURE__ */ jsx24(
|
|
3660
|
+
Autocomplete,
|
|
3661
|
+
__spreadValues({
|
|
3662
|
+
label: "",
|
|
3663
|
+
selectedOptions: selectedOption && [selectedOption],
|
|
3664
|
+
options,
|
|
3665
|
+
optionLabel: (option) => {
|
|
3666
|
+
var _a3;
|
|
3667
|
+
return (_a3 = option == null ? void 0 : option.label) != null ? _a3 : "";
|
|
3668
|
+
},
|
|
3669
|
+
"aria-required": true,
|
|
3670
|
+
hideClearButton: true,
|
|
3671
|
+
"aria-autocomplete": "none",
|
|
3672
|
+
onOptionsChange: (changes) => {
|
|
3673
|
+
const [change] = changes.selectedItems;
|
|
3674
|
+
onChange(change == null ? void 0 : change.value);
|
|
3675
|
+
}
|
|
3676
|
+
}, field)
|
|
3677
|
+
);
|
|
3678
|
+
}
|
|
3746
3679
|
}
|
|
3747
|
-
|
|
3680
|
+
);
|
|
3748
3681
|
}
|
|
3749
3682
|
|
|
3750
3683
|
// src/form-cells/EditableNumberCell.tsx
|
|
@@ -3755,23 +3688,25 @@ import { Fragment as Fragment4, jsx as jsx25 } from "react/jsx-runtime";
|
|
|
3755
3688
|
function EditableNumberCell(context) {
|
|
3756
3689
|
const editMode = useEditMode();
|
|
3757
3690
|
if (!editMode)
|
|
3758
|
-
return /* @__PURE__ */ jsx25(TypographyCustom, {
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3691
|
+
return /* @__PURE__ */ jsx25(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3692
|
+
return /* @__PURE__ */ jsx25(
|
|
3693
|
+
Controller4,
|
|
3694
|
+
{
|
|
3695
|
+
name: context.column.id,
|
|
3696
|
+
render: (_a) => {
|
|
3697
|
+
var _b = _a, { field: _c } = _b, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b;
|
|
3698
|
+
return /* @__PURE__ */ jsx25(Fragment4, { children: /* @__PURE__ */ jsx25(
|
|
3699
|
+
InlineTextField2,
|
|
3700
|
+
__spreadValues(__spreadValues({
|
|
3701
|
+
id: context.column.id,
|
|
3702
|
+
type: "number",
|
|
3703
|
+
autoComplete: "none",
|
|
3704
|
+
onChange: (e) => onChange(e.target.valueAsNumber)
|
|
3705
|
+
}, field), getHelperTextProps({ error }))
|
|
3706
|
+
) });
|
|
3707
|
+
}
|
|
3708
|
+
}
|
|
3709
|
+
);
|
|
3775
3710
|
}
|
|
3776
3711
|
var InlineTextField2 = styled18(TextField2)`
|
|
3777
3712
|
/*
|
|
@@ -3804,103 +3739,102 @@ import { Controller as Controller5 } from "react-hook-form";
|
|
|
3804
3739
|
import styled19 from "styled-components";
|
|
3805
3740
|
import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3806
3741
|
function EditableTextAreaCell(props) {
|
|
3807
|
-
const { title,
|
|
3742
|
+
const _a = props, { title } = _a, context = __objRest(_a, ["title"]);
|
|
3808
3743
|
const [textareaValue, setTextareaValue] = useState7(context.getValue());
|
|
3809
3744
|
const [open, setOpen] = useState7(false);
|
|
3810
3745
|
const editMode = useEditMode();
|
|
3811
3746
|
const name = context.column.id;
|
|
3812
3747
|
if (!editMode)
|
|
3813
|
-
return /* @__PURE__ */ jsx26(PopoverCell, {
|
|
3814
|
-
id: name + "popover",
|
|
3815
|
-
value: context.getValue(),
|
|
3816
|
-
title
|
|
3817
|
-
});
|
|
3748
|
+
return /* @__PURE__ */ jsx26(PopoverCell, { id: name + "popover", value: context.getValue(), title });
|
|
3818
3749
|
const openDialog = () => setOpen(true);
|
|
3819
3750
|
const closeDialog = () => setOpen(false);
|
|
3820
|
-
return /* @__PURE__ */ jsx26(
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
...field,
|
|
3836
|
-
...getHelperTextProps({ error })
|
|
3837
|
-
}),
|
|
3838
|
-
/* @__PURE__ */ jsx26(IconButton, {
|
|
3839
|
-
variant: "ghost_icon",
|
|
3840
|
-
onClick: stopPropagation2(openDialog),
|
|
3841
|
-
children: /* @__PURE__ */ jsx26(Icon8, {
|
|
3842
|
-
data: arrow_up,
|
|
3843
|
-
size: 24,
|
|
3844
|
-
style: { transform: "rotateZ(45deg)" }
|
|
3845
|
-
})
|
|
3846
|
-
})
|
|
3847
|
-
]
|
|
3848
|
-
}),
|
|
3849
|
-
/* @__PURE__ */ jsxs12(EDS, {
|
|
3850
|
-
open,
|
|
3851
|
-
onClose: () => {
|
|
3852
|
-
closeDialog();
|
|
3853
|
-
onChange(textareaValue);
|
|
3854
|
-
},
|
|
3855
|
-
isDismissable: true,
|
|
3856
|
-
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3857
|
-
children: [
|
|
3858
|
-
/* @__PURE__ */ jsx26(EDS.Header, {
|
|
3859
|
-
children: /* @__PURE__ */ jsx26(EDS.Title, {
|
|
3860
|
-
children: title
|
|
3861
|
-
})
|
|
3862
|
-
}),
|
|
3863
|
-
/* @__PURE__ */ jsx26(EDS.Content, {
|
|
3864
|
-
children: /* @__PURE__ */ jsx26(TextField3, {
|
|
3865
|
-
style: {
|
|
3866
|
-
maxWidth: "100%",
|
|
3867
|
-
marginTop: "1rem"
|
|
3868
|
-
},
|
|
3869
|
-
id: field.name + "modal",
|
|
3870
|
-
multiline: true,
|
|
3871
|
-
rows: 8,
|
|
3872
|
-
name: field.name + "modal",
|
|
3873
|
-
value: textareaValue,
|
|
3874
|
-
onChange: (e) => {
|
|
3875
|
-
setTextareaValue(e.target.value);
|
|
3876
|
-
}
|
|
3877
|
-
})
|
|
3878
|
-
}),
|
|
3879
|
-
/* @__PURE__ */ jsxs12(EDS.Actions, {
|
|
3880
|
-
style: { display: "flex", gap: "1rem" },
|
|
3751
|
+
return /* @__PURE__ */ jsx26(
|
|
3752
|
+
Controller5,
|
|
3753
|
+
{
|
|
3754
|
+
name,
|
|
3755
|
+
render: (_b) => {
|
|
3756
|
+
var _c = _b, { field: _d } = _c, _e = _d, { onChange, ref } = _e, field = __objRest(_e, ["onChange", "ref"]), { fieldState: { error } } = _c;
|
|
3757
|
+
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
3758
|
+
/* @__PURE__ */ jsxs12(
|
|
3759
|
+
"div",
|
|
3760
|
+
{
|
|
3761
|
+
style: {
|
|
3762
|
+
display: "flex",
|
|
3763
|
+
alignItems: "center",
|
|
3764
|
+
position: "relative"
|
|
3765
|
+
},
|
|
3881
3766
|
children: [
|
|
3882
|
-
/* @__PURE__ */ jsx26(
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
onClick: () => {
|
|
3892
|
-
closeDialog();
|
|
3893
|
-
setTextareaValue(context.getValue());
|
|
3894
|
-
},
|
|
3895
|
-
children: "Cancel"
|
|
3896
|
-
})
|
|
3767
|
+
/* @__PURE__ */ jsx26(
|
|
3768
|
+
StyledTextField,
|
|
3769
|
+
__spreadValues(__spreadValues({
|
|
3770
|
+
id: field.name,
|
|
3771
|
+
onChange,
|
|
3772
|
+
ref
|
|
3773
|
+
}, field), getHelperTextProps({ error }))
|
|
3774
|
+
),
|
|
3775
|
+
/* @__PURE__ */ jsx26(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ jsx26(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
|
|
3897
3776
|
]
|
|
3898
|
-
}
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3777
|
+
}
|
|
3778
|
+
),
|
|
3779
|
+
/* @__PURE__ */ jsxs12(
|
|
3780
|
+
EDS,
|
|
3781
|
+
{
|
|
3782
|
+
open,
|
|
3783
|
+
onClose: () => {
|
|
3784
|
+
closeDialog();
|
|
3785
|
+
onChange(textareaValue);
|
|
3786
|
+
},
|
|
3787
|
+
isDismissable: true,
|
|
3788
|
+
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3789
|
+
children: [
|
|
3790
|
+
/* @__PURE__ */ jsx26(EDS.Header, { children: /* @__PURE__ */ jsx26(EDS.Title, { children: title }) }),
|
|
3791
|
+
/* @__PURE__ */ jsx26(EDS.Content, { children: /* @__PURE__ */ jsx26(
|
|
3792
|
+
TextField3,
|
|
3793
|
+
{
|
|
3794
|
+
style: {
|
|
3795
|
+
maxWidth: "100%",
|
|
3796
|
+
marginTop: "1rem"
|
|
3797
|
+
},
|
|
3798
|
+
id: field.name + "modal",
|
|
3799
|
+
multiline: true,
|
|
3800
|
+
rows: 8,
|
|
3801
|
+
name: field.name + "modal",
|
|
3802
|
+
value: textareaValue,
|
|
3803
|
+
onChange: (e) => {
|
|
3804
|
+
setTextareaValue(e.target.value);
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
) }),
|
|
3808
|
+
/* @__PURE__ */ jsxs12(EDS.Actions, { style: { display: "flex", gap: "1rem" }, children: [
|
|
3809
|
+
/* @__PURE__ */ jsx26(
|
|
3810
|
+
Button5,
|
|
3811
|
+
{
|
|
3812
|
+
onClick: () => {
|
|
3813
|
+
closeDialog();
|
|
3814
|
+
onChange(textareaValue);
|
|
3815
|
+
},
|
|
3816
|
+
children: "Submit"
|
|
3817
|
+
}
|
|
3818
|
+
),
|
|
3819
|
+
/* @__PURE__ */ jsx26(
|
|
3820
|
+
Button5,
|
|
3821
|
+
{
|
|
3822
|
+
variant: "ghost",
|
|
3823
|
+
onClick: () => {
|
|
3824
|
+
closeDialog();
|
|
3825
|
+
setTextareaValue(context.getValue());
|
|
3826
|
+
},
|
|
3827
|
+
children: "Cancel"
|
|
3828
|
+
}
|
|
3829
|
+
)
|
|
3830
|
+
] })
|
|
3831
|
+
]
|
|
3832
|
+
}
|
|
3833
|
+
)
|
|
3834
|
+
] });
|
|
3835
|
+
}
|
|
3836
|
+
}
|
|
3837
|
+
);
|
|
3904
3838
|
}
|
|
3905
3839
|
var StyledTextField = styled19(TextField3)`
|
|
3906
3840
|
& input {
|
|
@@ -3926,20 +3860,24 @@ import { jsx as jsx27 } from "react/jsx-runtime";
|
|
|
3926
3860
|
function EditableTextFieldCell(context) {
|
|
3927
3861
|
const editMode = useEditMode();
|
|
3928
3862
|
if (!editMode)
|
|
3929
|
-
return /* @__PURE__ */ jsx27(TypographyCustom, {
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3863
|
+
return /* @__PURE__ */ jsx27(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3864
|
+
return /* @__PURE__ */ jsx27(
|
|
3865
|
+
Controller6,
|
|
3866
|
+
{
|
|
3867
|
+
name: context.column.id,
|
|
3868
|
+
render: (_a) => {
|
|
3869
|
+
var _b = _a, { field: _c } = _b, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b;
|
|
3870
|
+
return /* @__PURE__ */ jsx27(
|
|
3871
|
+
InlineTextField3,
|
|
3872
|
+
__spreadValues(__spreadValues({
|
|
3873
|
+
id: context.column.id,
|
|
3874
|
+
autoComplete: "none",
|
|
3875
|
+
value: String(value != null ? value : "")
|
|
3876
|
+
}, field), getHelperTextProps({ error }))
|
|
3877
|
+
);
|
|
3878
|
+
}
|
|
3879
|
+
}
|
|
3880
|
+
);
|
|
3943
3881
|
}
|
|
3944
3882
|
var InlineTextField3 = styled20(TextField4)`
|
|
3945
3883
|
/*
|