@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.js
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
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
|
+
};
|
|
8
37
|
var __commonJS = (cb, mod) => function __require() {
|
|
9
38
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
39
|
};
|
|
@@ -21,6 +50,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
21
50
|
return to;
|
|
22
51
|
};
|
|
23
52
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
53
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
54
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
55
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
56
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
57
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
58
|
mod
|
|
26
59
|
));
|
|
@@ -1013,7 +1046,11 @@ var require_arrayLikeKeys = __commonJS({
|
|
|
1013
1046
|
function arrayLikeKeys(value, inherited) {
|
|
1014
1047
|
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;
|
|
1015
1048
|
for (var key in value) {
|
|
1016
|
-
if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes &&
|
|
1049
|
+
if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
|
|
1050
|
+
(key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
|
|
1051
|
+
isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
|
|
1052
|
+
isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
|
|
1053
|
+
isIndex(key, length)))) {
|
|
1017
1054
|
result.push(key);
|
|
1018
1055
|
}
|
|
1019
1056
|
}
|
|
@@ -2390,33 +2427,16 @@ var Wrapper = import_styled_components.default.div`
|
|
|
2390
2427
|
max-width: 100%;
|
|
2391
2428
|
}
|
|
2392
2429
|
`;
|
|
2393
|
-
var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
|
|
2394
|
-
children: [
|
|
2395
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
children: title ?? "App Title"
|
|
2404
|
-
})
|
|
2405
|
-
]
|
|
2406
|
-
})
|
|
2407
|
-
}),
|
|
2408
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
2409
|
-
className: "--content-wrapper",
|
|
2410
|
-
children: [
|
|
2411
|
-
sidebar,
|
|
2412
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
2413
|
-
className: "--content-outlet",
|
|
2414
|
-
children
|
|
2415
|
-
})
|
|
2416
|
-
]
|
|
2417
|
-
})
|
|
2418
|
-
]
|
|
2419
|
-
});
|
|
2430
|
+
var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
|
|
2431
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.TopBar, { sticky: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, { children: [
|
|
2432
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.Icon, { data: icon != null ? icon : import_eds_icons.apps }),
|
|
2433
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title != null ? title : "App Title" })
|
|
2434
|
+
] }) }),
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "--content-wrapper", children: [
|
|
2436
|
+
sidebar,
|
|
2437
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "--content-outlet", children })
|
|
2438
|
+
] })
|
|
2439
|
+
] });
|
|
2420
2440
|
|
|
2421
2441
|
// src/AppShell/AppSidebar.tsx
|
|
2422
2442
|
var import_eds_core_react2 = require("@equinor/eds-core-react");
|
|
@@ -2453,38 +2473,34 @@ var Wrapper2 = import_styled_components2.default.div`
|
|
|
2453
2473
|
`;
|
|
2454
2474
|
function AppSidebar() {
|
|
2455
2475
|
const [collapsed, setCollapsed] = (0, import_react.useState)(false);
|
|
2456
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, {
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
className: "collapse-button
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
children:
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
|
|
2469
|
-
children: "Collapse"
|
|
2470
|
-
})
|
|
2471
|
-
]
|
|
2472
|
-
})
|
|
2473
|
-
})
|
|
2474
|
-
});
|
|
2476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, { collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "collapse-button-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2477
|
+
import_eds_core_react2.Button,
|
|
2478
|
+
{
|
|
2479
|
+
className: "collapse-button",
|
|
2480
|
+
variant: collapsed ? "ghost_icon" : "ghost",
|
|
2481
|
+
onClick: () => setCollapsed(!collapsed),
|
|
2482
|
+
children: [
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: collapsed ? import_eds_icons2.last_page : import_eds_icons2.first_page }),
|
|
2484
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Collapse" })
|
|
2485
|
+
]
|
|
2486
|
+
}
|
|
2487
|
+
) }) });
|
|
2475
2488
|
}
|
|
2476
2489
|
|
|
2477
2490
|
// src/cells/CheckboxCell.tsx
|
|
2478
2491
|
var import_eds_core_react3 = require("@equinor/eds-core-react");
|
|
2479
2492
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
2480
2493
|
function CheckboxCell(context) {
|
|
2481
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
2495
|
+
import_eds_core_react3.Checkbox,
|
|
2496
|
+
{
|
|
2497
|
+
enterKeyHint: "next",
|
|
2498
|
+
"aria-label": "readonly",
|
|
2499
|
+
readOnly: true,
|
|
2500
|
+
checked: context.getValue(),
|
|
2501
|
+
disabled: true
|
|
2502
|
+
}
|
|
2503
|
+
);
|
|
2488
2504
|
}
|
|
2489
2505
|
|
|
2490
2506
|
// src/cells/ChipsCell.tsx
|
|
@@ -2522,17 +2538,15 @@ var Chip = import_styled_components3.default.div`
|
|
|
2522
2538
|
line-height: 22px;
|
|
2523
2539
|
height: 22px;
|
|
2524
2540
|
padding: 0 6px;
|
|
2525
|
-
background-color: ${(props) =>
|
|
2541
|
+
background-color: ${(props) => {
|
|
2542
|
+
var _a;
|
|
2543
|
+
return (_a = props.backgroundColor) != null ? _a : import_eds_tokens2.tokens.colors.ui.background__medium.hex;
|
|
2544
|
+
}};
|
|
2526
2545
|
color: darkslategrey;
|
|
2527
2546
|
`;
|
|
2528
2547
|
var ChipsCell = (props) => {
|
|
2529
2548
|
var _a;
|
|
2530
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChipsWrapper, {
|
|
2531
|
-
children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, {
|
|
2532
|
-
backgroundColor: stringToHslColor(value),
|
|
2533
|
-
children: value
|
|
2534
|
-
}, value))
|
|
2535
|
-
});
|
|
2549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChipsWrapper, { children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, { backgroundColor: stringToHslColor(value), children: value }, value)) });
|
|
2536
2550
|
};
|
|
2537
2551
|
|
|
2538
2552
|
// src/cells/DynamicCell.tsx
|
|
@@ -2578,17 +2592,9 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
|
|
|
2578
2592
|
var _a;
|
|
2579
2593
|
const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
|
|
2580
2594
|
if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2581
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, {
|
|
2582
|
-
backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
|
|
2583
|
-
"data-column": cell.column.id,
|
|
2584
|
-
children: cellContent
|
|
2585
|
-
});
|
|
2595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
|
|
2586
2596
|
}
|
|
2587
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, {
|
|
2588
|
-
"data-column": cell.column.id,
|
|
2589
|
-
backgroundColor: highlight ? "#d5eaf4" : void 0,
|
|
2590
|
-
children: cellContent
|
|
2591
|
-
});
|
|
2597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
|
|
2592
2598
|
}
|
|
2593
2599
|
|
|
2594
2600
|
// src/cells/HeaderCell.tsx
|
|
@@ -2640,21 +2646,9 @@ var HeaderCell = ({ header, table }) => {
|
|
|
2640
2646
|
colSpan: header.colSpan
|
|
2641
2647
|
};
|
|
2642
2648
|
if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2643
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, {
|
|
2644
|
-
...cellProps,
|
|
2645
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
|
|
2646
|
-
header,
|
|
2647
|
-
table
|
|
2648
|
-
})
|
|
2649
|
-
}, header.id);
|
|
2649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table }) }), header.id);
|
|
2650
2650
|
}
|
|
2651
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cell2, {
|
|
2652
|
-
...cellProps,
|
|
2653
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
|
|
2654
|
-
header,
|
|
2655
|
-
table
|
|
2656
|
-
})
|
|
2657
|
-
}, header.id);
|
|
2651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table }) }), header.id);
|
|
2658
2652
|
};
|
|
2659
2653
|
var HeaderDiv = import_styled_components6.default.div`
|
|
2660
2654
|
display: flex;
|
|
@@ -2663,23 +2657,19 @@ var HeaderDiv = import_styled_components6.default.div`
|
|
|
2663
2657
|
z-index: 5;
|
|
2664
2658
|
`;
|
|
2665
2659
|
function HeaderContent({ header, table }) {
|
|
2660
|
+
var _a;
|
|
2666
2661
|
if (header.isPlaceholder)
|
|
2667
2662
|
return null;
|
|
2668
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, {
|
|
2669
|
-
|
|
2670
|
-
|
|
2663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, { children: [
|
|
2664
|
+
(0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2665
|
+
(_a = {
|
|
2666
|
+
asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up }),
|
|
2667
|
+
desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down }),
|
|
2668
|
+
none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down })
|
|
2669
|
+
}[header.column.getIsSorted()]) != null ? _a : null,
|
|
2670
|
+
table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2671
|
+
"div",
|
|
2671
2672
|
{
|
|
2672
|
-
asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2673
|
-
data: import_eds_icons3.arrow_drop_up
|
|
2674
|
-
}),
|
|
2675
|
-
desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2676
|
-
data: import_eds_icons3.arrow_drop_down
|
|
2677
|
-
}),
|
|
2678
|
-
none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2679
|
-
data: import_eds_icons3.arrow_drop_down
|
|
2680
|
-
})
|
|
2681
|
-
}[header.column.getIsSorted()] ?? null,
|
|
2682
|
-
table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
|
|
2683
2673
|
onMouseDown: header.getResizeHandler(),
|
|
2684
2674
|
onTouchStart: header.getResizeHandler(),
|
|
2685
2675
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -2687,9 +2677,9 @@ function HeaderContent({ header, table }) {
|
|
|
2687
2677
|
style: {
|
|
2688
2678
|
transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
|
|
2689
2679
|
}
|
|
2690
|
-
}
|
|
2691
|
-
|
|
2692
|
-
});
|
|
2680
|
+
}
|
|
2681
|
+
)
|
|
2682
|
+
] });
|
|
2693
2683
|
}
|
|
2694
2684
|
function getSort({ column }) {
|
|
2695
2685
|
if (!column.getCanSort())
|
|
@@ -2719,29 +2709,22 @@ var truncateStyle = {
|
|
|
2719
2709
|
textOverflow: "ellipsis"
|
|
2720
2710
|
};
|
|
2721
2711
|
var TypographyCustom = (props) => {
|
|
2722
|
-
const { truncate, enableShowAllOnHover, style: styleFromProps,
|
|
2712
|
+
const _a = props, { truncate, enableShowAllOnHover, style: styleFromProps } = _a, edsTypographyProps = __objRest(_a, ["truncate", "enableShowAllOnHover", "style"]);
|
|
2723
2713
|
if (enableShowAllOnHover)
|
|
2724
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HoverCapture, {
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
style: {
|
|
2728
|
-
...styleFromProps,
|
|
2729
|
-
...truncateStyle
|
|
2730
|
-
}
|
|
2714
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HoverCapture, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2715
|
+
import_eds_core_react7.Typography,
|
|
2716
|
+
__spreadProps(__spreadValues({}, edsTypographyProps), {
|
|
2717
|
+
style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
|
|
2731
2718
|
})
|
|
2732
|
-
});
|
|
2719
|
+
) });
|
|
2733
2720
|
if (truncate)
|
|
2734
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
|
|
2742
|
-
...edsTypographyProps,
|
|
2743
|
-
style: styleFromProps
|
|
2744
|
-
});
|
|
2721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2722
|
+
import_eds_core_react7.Typography,
|
|
2723
|
+
__spreadProps(__spreadValues({}, edsTypographyProps), {
|
|
2724
|
+
style: __spreadValues(__spreadValues({}, styleFromProps), truncateStyle)
|
|
2725
|
+
})
|
|
2726
|
+
);
|
|
2727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
|
|
2745
2728
|
};
|
|
2746
2729
|
var HoverCapture = import_styled_components7.default.div`
|
|
2747
2730
|
height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
|
|
@@ -2790,17 +2773,18 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
|
|
|
2790
2773
|
`}
|
|
2791
2774
|
`;
|
|
2792
2775
|
function HierarchyCell(cell, options = {}) {
|
|
2793
|
-
var _a, _b;
|
|
2794
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2776
|
+
var _a, _b, _c, _d;
|
|
2777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2778
|
+
CellWrapper,
|
|
2779
|
+
{
|
|
2780
|
+
depth: (_b = (_a = options.getRowDepth) == null ? void 0 : _a.call(options)) != null ? _b : cell.row.depth,
|
|
2781
|
+
expanded: cell.row.getIsExpanded(),
|
|
2782
|
+
children: [
|
|
2783
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "--divider" }),
|
|
2784
|
+
(_d = (_c = options.getDisplayName) == null ? void 0 : _c.call(options)) != null ? _d : cell.getValue()
|
|
2785
|
+
]
|
|
2786
|
+
}
|
|
2787
|
+
);
|
|
2804
2788
|
}
|
|
2805
2789
|
|
|
2806
2790
|
// src/cells/PopoverCell.tsx
|
|
@@ -2808,21 +2792,24 @@ var import_eds_core_react8 = require("@equinor/eds-core-react");
|
|
|
2808
2792
|
var import_react2 = require("react");
|
|
2809
2793
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2810
2794
|
function PopoverCell(props) {
|
|
2795
|
+
var _a, _b;
|
|
2811
2796
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
2812
2797
|
const anchorRef = (0, import_react2.useRef)(null);
|
|
2813
2798
|
const handleClick = () => setOpen(!open);
|
|
2814
2799
|
const handleClose = () => setOpen(false);
|
|
2815
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TypographyCustom, {
|
|
2800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, ref: anchorRef, children: [
|
|
2801
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2802
|
+
TypographyCustom,
|
|
2803
|
+
{
|
|
2820
2804
|
onClick: stopPropagation(handleClick),
|
|
2821
2805
|
style: { cursor: "pointer" },
|
|
2822
2806
|
truncate: true,
|
|
2823
|
-
children: String(props.value)
|
|
2824
|
-
}
|
|
2825
|
-
|
|
2807
|
+
children: String((_a = props.value) != null ? _a : "")
|
|
2808
|
+
}
|
|
2809
|
+
),
|
|
2810
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
2811
|
+
import_eds_core_react8.Popover,
|
|
2812
|
+
{
|
|
2826
2813
|
id: props.id,
|
|
2827
2814
|
open,
|
|
2828
2815
|
"aria-controls": "expand cell",
|
|
@@ -2830,20 +2817,12 @@ function PopoverCell(props) {
|
|
|
2830
2817
|
onClose: handleClose,
|
|
2831
2818
|
placement: "bottom",
|
|
2832
2819
|
children: [
|
|
2833
|
-
props.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, {
|
|
2834
|
-
|
|
2835
|
-
children: props.title
|
|
2836
|
-
})
|
|
2837
|
-
}),
|
|
2838
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Content, {
|
|
2839
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, {
|
|
2840
|
-
children: String(props.value)
|
|
2841
|
-
})
|
|
2842
|
-
})
|
|
2820
|
+
props.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Header, { children: props.title }) }),
|
|
2821
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, { children: String((_b = props.value) != null ? _b : "") }) })
|
|
2843
2822
|
]
|
|
2844
|
-
}
|
|
2845
|
-
|
|
2846
|
-
});
|
|
2823
|
+
}
|
|
2824
|
+
)
|
|
2825
|
+
] });
|
|
2847
2826
|
}
|
|
2848
2827
|
|
|
2849
2828
|
// src/cells/SelectColumnDef.tsx
|
|
@@ -2863,44 +2842,46 @@ function SelectColumnDef(props) {
|
|
|
2863
2842
|
return {
|
|
2864
2843
|
id: "select",
|
|
2865
2844
|
size: props.includeExpansionButton ? 96 : 48,
|
|
2866
|
-
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
|
|
2867
|
-
|
|
2845
|
+
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2846
|
+
import_eds_core_react9.Checkbox,
|
|
2847
|
+
{
|
|
2868
2848
|
checked: table.getIsAllRowsSelected(),
|
|
2869
2849
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
2870
2850
|
"aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
|
|
2871
2851
|
onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
|
|
2872
|
-
}
|
|
2873
|
-
}) : null,
|
|
2852
|
+
}
|
|
2853
|
+
) }) : null,
|
|
2874
2854
|
cell: ({ table, row }) => {
|
|
2875
2855
|
const paddingLeft = "0px";
|
|
2876
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
}
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { paddingLeft, rowDepth: row.depth, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
2857
|
+
selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2858
|
+
import_eds_core_react9.Radio,
|
|
2859
|
+
{
|
|
2860
|
+
checked: row.getIsSelected(),
|
|
2861
|
+
"aria-label": `Select row ${row.id}`,
|
|
2862
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2863
|
+
}
|
|
2864
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2865
|
+
import_eds_core_react9.Checkbox,
|
|
2866
|
+
{
|
|
2867
|
+
checked: row.getIsSelected(),
|
|
2868
|
+
indeterminate: row.getIsSomeSelected(),
|
|
2869
|
+
"aria-label": `Select row ${row.id}`,
|
|
2870
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2871
|
+
}
|
|
2872
|
+
),
|
|
2873
|
+
row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2874
|
+
import_eds_core_react9.Button,
|
|
2875
|
+
{
|
|
2876
|
+
variant: "ghost_icon",
|
|
2877
|
+
color: "secondary",
|
|
2878
|
+
"aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
|
|
2879
|
+
onClick: stopPropagation(row.getToggleExpandedHandler()),
|
|
2880
|
+
style: { cursor: "pointer" },
|
|
2881
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, { data: row.getIsExpanded() ? import_eds_icons4.chevron_up : import_eds_icons4.chevron_down })
|
|
2882
|
+
}
|
|
2883
|
+
)
|
|
2884
|
+
] }) });
|
|
2904
2885
|
}
|
|
2905
2886
|
};
|
|
2906
2887
|
}
|
|
@@ -2957,93 +2938,76 @@ function ColumnSelect({ table }) {
|
|
|
2957
2938
|
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
|
2958
2939
|
const referenceElement = (0, import_react3.useRef)(null);
|
|
2959
2940
|
const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
|
|
2960
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, {
|
|
2961
|
-
children:
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
})
|
|
2978
|
-
}),
|
|
2979
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover, {
|
|
2941
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
2942
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2943
|
+
import_eds_core_react10.Button,
|
|
2944
|
+
{
|
|
2945
|
+
"aria-haspopup": true,
|
|
2946
|
+
id: "column-select-anchor",
|
|
2947
|
+
"aria-controls": "column-select-popover",
|
|
2948
|
+
"aria-expanded": isOpen,
|
|
2949
|
+
ref: referenceElement,
|
|
2950
|
+
variant: "ghost_icon",
|
|
2951
|
+
onClick: () => setIsOpen(true),
|
|
2952
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "view_column", data: import_eds_icons5.view_column })
|
|
2953
|
+
}
|
|
2954
|
+
) }),
|
|
2955
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2956
|
+
import_eds_core_react10.Popover,
|
|
2957
|
+
{
|
|
2980
2958
|
open: isOpen,
|
|
2981
2959
|
id: "column-select-popover",
|
|
2982
2960
|
anchorEl: referenceElement.current,
|
|
2983
2961
|
placement: "bottom-end",
|
|
2984
2962
|
onClose: () => setIsOpen(false),
|
|
2985
2963
|
children: [
|
|
2986
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, {
|
|
2987
|
-
children:
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
|
|
2964
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, { children: [
|
|
2965
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Popover.Title, { children: "Column settings" }),
|
|
2966
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2967
|
+
import_eds_core_react10.Button,
|
|
2968
|
+
{
|
|
2992
2969
|
variant: "ghost_icon",
|
|
2993
2970
|
"aria-label": "Close column select",
|
|
2994
2971
|
onClick: () => setIsOpen(false),
|
|
2995
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, {
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
children: "Reset to default"
|
|
3024
|
-
})
|
|
3025
|
-
})
|
|
3026
|
-
]
|
|
3027
|
-
})
|
|
2972
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "close", data: import_eds_icons5.close, size: 24 })
|
|
2973
|
+
}
|
|
2974
|
+
)
|
|
2975
|
+
] }),
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Content, { children: [
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnSelectContent, { children: selectableColumns.map((column) => {
|
|
2978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2979
|
+
import_eds_core_react10.Checkbox,
|
|
2980
|
+
{
|
|
2981
|
+
checked: column.getIsVisible(),
|
|
2982
|
+
label: getColumnHeader(column),
|
|
2983
|
+
onChange: column.getToggleVisibilityHandler()
|
|
2984
|
+
},
|
|
2985
|
+
column.id
|
|
2986
|
+
);
|
|
2987
|
+
}) }),
|
|
2988
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Divider, { variant: "small" }),
|
|
2989
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2990
|
+
import_eds_core_react10.Button,
|
|
2991
|
+
{
|
|
2992
|
+
color: "secondary",
|
|
2993
|
+
variant: "ghost",
|
|
2994
|
+
disabled: table.getIsAllColumnsVisible(),
|
|
2995
|
+
onClick: () => table.toggleAllColumnsVisible(true),
|
|
2996
|
+
children: "Reset to default"
|
|
2997
|
+
}
|
|
2998
|
+
) })
|
|
2999
|
+
] })
|
|
3028
3000
|
]
|
|
3029
|
-
}
|
|
3030
|
-
|
|
3031
|
-
});
|
|
3001
|
+
}
|
|
3002
|
+
)
|
|
3003
|
+
] });
|
|
3032
3004
|
}
|
|
3033
3005
|
|
|
3034
3006
|
// src/DataTable/components/TableHeader.tsx
|
|
3035
3007
|
var import_eds_core_react11 = require("@equinor/eds-core-react");
|
|
3036
3008
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
3037
3009
|
function TableHeader({ table, sticky }) {
|
|
3038
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Head, {
|
|
3039
|
-
sticky,
|
|
3040
|
-
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
|
|
3041
|
-
children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, {
|
|
3042
|
-
header,
|
|
3043
|
-
table
|
|
3044
|
-
}, header.id))
|
|
3045
|
-
}, headerGroup.id))
|
|
3046
|
-
});
|
|
3010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
|
|
3047
3011
|
}
|
|
3048
3012
|
|
|
3049
3013
|
// src/DataTable/DataTable.tsx
|
|
@@ -3063,18 +3027,7 @@ var PlaceholderTextWrapper = import_styled_components11.default.div`
|
|
|
3063
3027
|
justify-content: center;
|
|
3064
3028
|
`;
|
|
3065
3029
|
function PlaceholderRow({ isLoading }) {
|
|
3066
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, {
|
|
3067
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, {
|
|
3068
|
-
colSpan: 100,
|
|
3069
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, {
|
|
3070
|
-
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, {
|
|
3071
|
-
color: "primary"
|
|
3072
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, {
|
|
3073
|
-
children: "No data available"
|
|
3074
|
-
})
|
|
3075
|
-
})
|
|
3076
|
-
})
|
|
3077
|
-
});
|
|
3030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, { color: "primary" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, { children: "No data available" }) }) }) });
|
|
3078
3031
|
}
|
|
3079
3032
|
|
|
3080
3033
|
// src/DataTable/components/TableBody.tsx
|
|
@@ -3099,29 +3052,36 @@ function TableRow({
|
|
|
3099
3052
|
}) {
|
|
3100
3053
|
var _a;
|
|
3101
3054
|
const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
|
|
3102
|
-
const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3055
|
+
const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3056
|
+
StyledTableRow,
|
|
3057
|
+
{
|
|
3058
|
+
active: row.getIsSelected(),
|
|
3059
|
+
"data-index": index,
|
|
3060
|
+
ref: measureElement,
|
|
3061
|
+
style: {
|
|
3062
|
+
cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
|
|
3063
|
+
backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
|
|
3064
|
+
},
|
|
3065
|
+
onClick: () => {
|
|
3066
|
+
var _a2;
|
|
3067
|
+
return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row);
|
|
3068
|
+
},
|
|
3069
|
+
onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
|
|
3070
|
+
onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
|
|
3071
|
+
children: row.getVisibleCells().map((cell) => {
|
|
3072
|
+
var _a2;
|
|
3073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3074
|
+
DynamicCell,
|
|
3075
|
+
{
|
|
3076
|
+
cell,
|
|
3077
|
+
getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
|
|
3078
|
+
highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
|
|
3079
|
+
},
|
|
3080
|
+
cell.id
|
|
3081
|
+
);
|
|
3082
|
+
})
|
|
3083
|
+
}
|
|
3084
|
+
);
|
|
3125
3085
|
return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
|
|
3126
3086
|
}
|
|
3127
3087
|
var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
|
|
@@ -3147,27 +3107,11 @@ function BasicTable({
|
|
|
3147
3107
|
tableCaption
|
|
3148
3108
|
}) {
|
|
3149
3109
|
const tableRows = table.getRowModel().rows;
|
|
3150
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, {
|
|
3151
|
-
children:
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
}),
|
|
3156
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, {
|
|
3157
|
-
sticky: stickyHeader,
|
|
3158
|
-
table
|
|
3159
|
-
}),
|
|
3160
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableBody, {
|
|
3161
|
-
children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableRow, {
|
|
3162
|
-
row,
|
|
3163
|
-
rowConfig,
|
|
3164
|
-
cellConfig
|
|
3165
|
-
}, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaceholderRow, {
|
|
3166
|
-
isLoading
|
|
3167
|
-
})
|
|
3168
|
-
})
|
|
3169
|
-
]
|
|
3170
|
-
});
|
|
3110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, { children: [
|
|
3111
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Table.Caption, { hidden: true, children: tableCaption }),
|
|
3112
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, { sticky: stickyHeader, table }),
|
|
3113
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableBody, { children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableRow, { row, rowConfig, cellConfig }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaceholderRow, { isLoading }) })
|
|
3114
|
+
] });
|
|
3171
3115
|
}
|
|
3172
3116
|
|
|
3173
3117
|
// src/DataTable/components/DataTableHeader.tsx
|
|
@@ -3188,13 +3132,18 @@ var CloseButton = (0, import_styled_components14.default)(import_eds_core_react1
|
|
|
3188
3132
|
width: 24px;
|
|
3189
3133
|
height: 24px;
|
|
3190
3134
|
`;
|
|
3191
|
-
function DebouncedInput({
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
}
|
|
3135
|
+
function DebouncedInput(_a) {
|
|
3136
|
+
var _b = _a, {
|
|
3137
|
+
value: initialValue,
|
|
3138
|
+
onChange,
|
|
3139
|
+
icon,
|
|
3140
|
+
debounce = 500
|
|
3141
|
+
} = _b, props = __objRest(_b, [
|
|
3142
|
+
"value",
|
|
3143
|
+
"onChange",
|
|
3144
|
+
"icon",
|
|
3145
|
+
"debounce"
|
|
3146
|
+
]);
|
|
3198
3147
|
const [value, setValue] = (0, import_react4.useState)(initialValue);
|
|
3199
3148
|
(0, import_react4.useEffect)(() => {
|
|
3200
3149
|
setValue(initialValue);
|
|
@@ -3205,30 +3154,15 @@ function DebouncedInput({
|
|
|
3205
3154
|
}, debounce);
|
|
3206
3155
|
return () => clearTimeout(timeout);
|
|
3207
3156
|
}, [value]);
|
|
3208
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, {
|
|
3209
|
-
|
|
3210
|
-
|
|
3157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3158
|
+
import_eds_core_react16.Input,
|
|
3159
|
+
__spreadProps(__spreadValues({}, props), {
|
|
3211
3160
|
value,
|
|
3212
|
-
leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
|
|
3213
|
-
|
|
3214
|
-
data: icon,
|
|
3215
|
-
size: 18
|
|
3216
|
-
}),
|
|
3217
|
-
rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Tooltip, {
|
|
3218
|
-
title: "Clear input",
|
|
3219
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, {
|
|
3220
|
-
variant: "ghost_icon",
|
|
3221
|
-
onClick: () => setValue(""),
|
|
3222
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
|
|
3223
|
-
name: import_eds_icons6.close.name,
|
|
3224
|
-
data: import_eds_icons6.close,
|
|
3225
|
-
size: 18
|
|
3226
|
-
})
|
|
3227
|
-
})
|
|
3228
|
-
}),
|
|
3161
|
+
leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, { name: icon.name, data: icon, size: 18 }),
|
|
3162
|
+
rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Tooltip, { title: "Clear input", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, { variant: "ghost_icon", onClick: () => setValue(""), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, { name: import_eds_icons6.close.name, data: import_eds_icons6.close, size: 18 }) }) }),
|
|
3229
3163
|
onChange: (event) => setValue(event.target.value)
|
|
3230
3164
|
})
|
|
3231
|
-
});
|
|
3165
|
+
) });
|
|
3232
3166
|
}
|
|
3233
3167
|
|
|
3234
3168
|
// src/DataTable/filters/functions.ts
|
|
@@ -3262,49 +3196,32 @@ function TableBanner({
|
|
|
3262
3196
|
tableCaption,
|
|
3263
3197
|
globalFilter
|
|
3264
3198
|
}) {
|
|
3265
|
-
var _a;
|
|
3266
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, {
|
|
3267
|
-
className: "--
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, {
|
|
3292
|
-
table
|
|
3293
|
-
}),
|
|
3294
|
-
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", {
|
|
3295
|
-
children: [
|
|
3296
|
-
table.options.data.length.toLocaleString(),
|
|
3297
|
-
" /",
|
|
3298
|
-
" ",
|
|
3299
|
-
bannerConfig.totalRowCount.toLocaleString(),
|
|
3300
|
-
" rows"
|
|
3301
|
-
]
|
|
3302
|
-
})
|
|
3303
|
-
]
|
|
3304
|
-
})
|
|
3305
|
-
})
|
|
3306
|
-
]
|
|
3307
|
-
});
|
|
3199
|
+
var _a, _b;
|
|
3200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
|
|
3201
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, { className: "--filter-container-left", children: [
|
|
3202
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, { variant: "h3", as: "h2", children: tableCaption }),
|
|
3203
|
+
(_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
|
|
3204
|
+
] }),
|
|
3205
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3206
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3207
|
+
DebouncedInput,
|
|
3208
|
+
{
|
|
3209
|
+
value: globalFilter.state,
|
|
3210
|
+
icon: import_eds_icons7.search,
|
|
3211
|
+
placeholder: (_b = bannerConfig.globalFilterPlaceholder) != null ? _b : "Search all columns",
|
|
3212
|
+
onChange: (value) => globalFilter.onChange(String(value))
|
|
3213
|
+
}
|
|
3214
|
+
),
|
|
3215
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, { table }),
|
|
3216
|
+
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
|
|
3217
|
+
table.options.data.length.toLocaleString(),
|
|
3218
|
+
" /",
|
|
3219
|
+
" ",
|
|
3220
|
+
bannerConfig.totalRowCount.toLocaleString(),
|
|
3221
|
+
" rows"
|
|
3222
|
+
] })
|
|
3223
|
+
] }) })
|
|
3224
|
+
] });
|
|
3308
3225
|
}
|
|
3309
3226
|
|
|
3310
3227
|
// src/DataTable/components/VirtualTable.tsx
|
|
@@ -3317,24 +3234,24 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
|
3317
3234
|
var PaddingRow = (props) => {
|
|
3318
3235
|
if (!props.height)
|
|
3319
3236
|
return null;
|
|
3320
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Row, {
|
|
3321
|
-
style: { pointerEvents: "none" },
|
|
3322
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Cell, {
|
|
3323
|
-
style: { height: `${props.height}px` }
|
|
3324
|
-
})
|
|
3325
|
-
});
|
|
3237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Cell, { style: { height: `${props.height}px` } }) });
|
|
3326
3238
|
};
|
|
3327
3239
|
|
|
3328
3240
|
// src/DataTable/components/VirtualTable.tsx
|
|
3329
3241
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3330
|
-
function VirtualTable({
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
}
|
|
3337
|
-
|
|
3242
|
+
function VirtualTable(_a) {
|
|
3243
|
+
var _b = _a, {
|
|
3244
|
+
table,
|
|
3245
|
+
rowConfig,
|
|
3246
|
+
cellConfig,
|
|
3247
|
+
containerRef
|
|
3248
|
+
} = _b, props = __objRest(_b, [
|
|
3249
|
+
"table",
|
|
3250
|
+
"rowConfig",
|
|
3251
|
+
"cellConfig",
|
|
3252
|
+
"containerRef"
|
|
3253
|
+
]);
|
|
3254
|
+
var _a2, _b2;
|
|
3338
3255
|
const { rows } = table.getRowModel();
|
|
3339
3256
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
3340
3257
|
count: rows.length,
|
|
@@ -3344,42 +3261,30 @@ function VirtualTable({
|
|
|
3344
3261
|
overscan: 20
|
|
3345
3262
|
});
|
|
3346
3263
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
3347
|
-
const paddingTop = virtualRows.length > 0 ? ((
|
|
3348
|
-
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((
|
|
3349
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, {
|
|
3350
|
-
children:
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
measureElement: rowVirtualizer.measureElement
|
|
3372
|
-
}, row.id);
|
|
3373
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, {
|
|
3374
|
-
isLoading: props.isLoading
|
|
3375
|
-
}),
|
|
3376
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, {
|
|
3377
|
-
height: paddingBottom
|
|
3378
|
-
})
|
|
3379
|
-
]
|
|
3380
|
-
})
|
|
3381
|
-
]
|
|
3382
|
-
});
|
|
3264
|
+
const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
|
|
3265
|
+
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
|
|
3266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { children: [
|
|
3267
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, { hidden: true, children: props.tableCaption }),
|
|
3268
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, { sticky: props.stickyHeader, table }),
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
|
|
3270
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingTop }),
|
|
3271
|
+
rows.length ? virtualRows.map((virtualRow) => {
|
|
3272
|
+
const row = rows[virtualRow.index];
|
|
3273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3274
|
+
TableRow,
|
|
3275
|
+
{
|
|
3276
|
+
row,
|
|
3277
|
+
rowConfig,
|
|
3278
|
+
cellConfig,
|
|
3279
|
+
index: virtualRow.index,
|
|
3280
|
+
measureElement: rowVirtualizer.measureElement
|
|
3281
|
+
},
|
|
3282
|
+
row.id
|
|
3283
|
+
);
|
|
3284
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { isLoading: props.isLoading }),
|
|
3285
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingBottom })
|
|
3286
|
+
] })
|
|
3287
|
+
] });
|
|
3383
3288
|
}
|
|
3384
3289
|
|
|
3385
3290
|
// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
|
|
@@ -3432,10 +3337,16 @@ function canUseContainStrict(height) {
|
|
|
3432
3337
|
return true;
|
|
3433
3338
|
}
|
|
3434
3339
|
var DataTableWrapper = import_styled_components16.default.div`
|
|
3435
|
-
width: ${(props) =>
|
|
3340
|
+
width: ${(props) => {
|
|
3341
|
+
var _a;
|
|
3342
|
+
return (_a = props.width) != null ? _a : "100%";
|
|
3343
|
+
}};
|
|
3436
3344
|
|
|
3437
3345
|
.--table-container {
|
|
3438
|
-
height: ${(props) =>
|
|
3346
|
+
height: ${(props) => {
|
|
3347
|
+
var _a;
|
|
3348
|
+
return (_a = props.height) != null ? _a : "100%";
|
|
3349
|
+
}};
|
|
3439
3350
|
width: '100%';
|
|
3440
3351
|
overflow: auto;
|
|
3441
3352
|
${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
|
|
@@ -3445,41 +3356,44 @@ var DataTableWrapper = import_styled_components16.default.div`
|
|
|
3445
3356
|
|
|
3446
3357
|
// The following attribute is important for fixed column width
|
|
3447
3358
|
// CHANGE THIS WITH CAUTION
|
|
3448
|
-
table-layout: ${(props) =>
|
|
3359
|
+
table-layout: ${(props) => {
|
|
3360
|
+
var _a;
|
|
3361
|
+
return (_a = props.tableLayout) != null ? _a : "auto";
|
|
3362
|
+
}};
|
|
3449
3363
|
}
|
|
3450
3364
|
}
|
|
3451
3365
|
`;
|
|
3452
3366
|
function DataTable(props) {
|
|
3453
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
3367
|
+
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;
|
|
3454
3368
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
3455
3369
|
const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
|
|
3456
3370
|
const [columnVisibility, setColumnVisibility] = [
|
|
3457
|
-
((_a = props.columnVisibility) == null ? void 0 : _a.state)
|
|
3458
|
-
((
|
|
3371
|
+
(_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
|
|
3372
|
+
(_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
|
|
3459
3373
|
];
|
|
3460
3374
|
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
|
|
3461
3375
|
const [globalFilterState, setGlobalFilterState] = [
|
|
3462
|
-
((
|
|
3463
|
-
((
|
|
3376
|
+
(_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
|
|
3377
|
+
(_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
|
|
3464
3378
|
];
|
|
3465
|
-
const shouldEnableGlobalFilter = ((
|
|
3379
|
+
const shouldEnableGlobalFilter = ((_i = props.bannerConfig) == null ? void 0 : _i.enableGlobalFilterInput) || Boolean(props.globalFilter);
|
|
3466
3380
|
function enableGlobalFilter(value) {
|
|
3467
3381
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
3468
3382
|
}
|
|
3469
3383
|
const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
|
|
3470
3384
|
const [sortingState, setSortingState] = [
|
|
3471
|
-
((
|
|
3472
|
-
((
|
|
3385
|
+
(_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
|
|
3386
|
+
(_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
|
|
3473
3387
|
];
|
|
3474
3388
|
const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
|
|
3475
3389
|
const [rowSelectionState, setRowSelectionState] = [
|
|
3476
|
-
((
|
|
3477
|
-
((
|
|
3390
|
+
(_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
|
|
3391
|
+
(_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
|
|
3478
3392
|
];
|
|
3479
3393
|
const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
|
|
3480
3394
|
const [expandedState, setExpandedState] = [
|
|
3481
|
-
((
|
|
3482
|
-
((
|
|
3395
|
+
(_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
|
|
3396
|
+
(_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
|
|
3483
3397
|
];
|
|
3484
3398
|
const table = (0, import_react_table3.useReactTable)({
|
|
3485
3399
|
columns: prependSelectColumn(columns, props.rowSelection),
|
|
@@ -3488,18 +3402,14 @@ function DataTable(props) {
|
|
|
3488
3402
|
state: {
|
|
3489
3403
|
expanded: expandedState,
|
|
3490
3404
|
globalFilter: enableGlobalFilter(globalFilterState),
|
|
3491
|
-
sorting: ((
|
|
3405
|
+
sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
|
|
3492
3406
|
rowSelection: rowSelectionState,
|
|
3493
3407
|
columnVisibility
|
|
3494
3408
|
},
|
|
3495
3409
|
defaultColumn: {
|
|
3496
3410
|
cell: ({ cell }) => {
|
|
3497
3411
|
const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
|
|
3498
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, {
|
|
3499
|
-
truncate: truncateMode === "hover",
|
|
3500
|
-
enableShowAllOnHover: true,
|
|
3501
|
-
children: cell.getValue()
|
|
3502
|
-
});
|
|
3412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, { truncate: truncateMode === "hover", enableShowAllOnHover: true, children: cell.getValue() });
|
|
3503
3413
|
}
|
|
3504
3414
|
},
|
|
3505
3415
|
enableColumnResizing: Boolean(props.columnResizing),
|
|
@@ -3507,8 +3417,8 @@ function DataTable(props) {
|
|
|
3507
3417
|
enableSorting: sorting == null ? void 0 : sorting.enableSorting,
|
|
3508
3418
|
manualSorting: sorting == null ? void 0 : sorting.manualSorting,
|
|
3509
3419
|
enableExpanding: Boolean(props.expansion),
|
|
3510
|
-
enableMultiRowSelection: ((
|
|
3511
|
-
enableSubRowSelection: ((
|
|
3420
|
+
enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
|
|
3421
|
+
enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
|
|
3512
3422
|
filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
|
|
3513
3423
|
getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
|
|
3514
3424
|
getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
|
|
@@ -3516,7 +3426,7 @@ function DataTable(props) {
|
|
|
3516
3426
|
getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
|
|
3517
3427
|
onExpandedChange: setExpandedState,
|
|
3518
3428
|
onRowSelectionChange: setRowSelectionState,
|
|
3519
|
-
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange)
|
|
3429
|
+
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
|
|
3520
3430
|
onColumnVisibilityChange: setColumnVisibility,
|
|
3521
3431
|
onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
|
|
3522
3432
|
getSubRows: props == null ? void 0 : props.getSubRows,
|
|
@@ -3527,7 +3437,7 @@ function DataTable(props) {
|
|
|
3527
3437
|
if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
|
|
3528
3438
|
table.toggleAllRowsExpanded();
|
|
3529
3439
|
}
|
|
3530
|
-
}, [table, (
|
|
3440
|
+
}, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
|
|
3531
3441
|
const { isLoading, rowConfig } = props;
|
|
3532
3442
|
const tableContainerRef = (0, import_react7.useRef)(null);
|
|
3533
3443
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
@@ -3539,21 +3449,21 @@ function DataTable(props) {
|
|
|
3539
3449
|
if (Boolean(tableContainerRef.current))
|
|
3540
3450
|
forceRerender();
|
|
3541
3451
|
}, [tableContainerRef.current === null]);
|
|
3542
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, {
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
children: [
|
|
3547
|
-
props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableBanner, {
|
|
3452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
|
|
3453
|
+
props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3454
|
+
TableBanner,
|
|
3455
|
+
{
|
|
3548
3456
|
table,
|
|
3549
3457
|
bannerConfig: props.bannerConfig,
|
|
3550
3458
|
globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
|
|
3551
3459
|
tableCaption: props.tableCaption
|
|
3552
|
-
}
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3460
|
+
}
|
|
3461
|
+
),
|
|
3462
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3463
|
+
"div",
|
|
3464
|
+
__spreadProps(__spreadValues({}, props.tableContainerProps), {
|
|
3465
|
+
className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
|
|
3466
|
+
onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
|
|
3557
3467
|
ref: (node) => {
|
|
3558
3468
|
var _a2;
|
|
3559
3469
|
if (node) {
|
|
@@ -3563,25 +3473,31 @@ function DataTable(props) {
|
|
|
3563
3473
|
}
|
|
3564
3474
|
}
|
|
3565
3475
|
},
|
|
3566
|
-
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3476
|
+
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3477
|
+
VirtualTable,
|
|
3478
|
+
{
|
|
3479
|
+
containerRef: tableContainerRef,
|
|
3480
|
+
tableCaption: props.tableCaption,
|
|
3481
|
+
table,
|
|
3482
|
+
rowConfig,
|
|
3483
|
+
cellConfig,
|
|
3484
|
+
isLoading,
|
|
3485
|
+
stickyHeader: props.stickyHeader
|
|
3486
|
+
}
|
|
3487
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3488
|
+
BasicTable,
|
|
3489
|
+
{
|
|
3490
|
+
tableCaption: props.tableCaption,
|
|
3491
|
+
table,
|
|
3492
|
+
rowConfig,
|
|
3493
|
+
cellConfig,
|
|
3494
|
+
isLoading,
|
|
3495
|
+
stickyHeader: props.stickyHeader
|
|
3496
|
+
}
|
|
3497
|
+
)
|
|
3582
3498
|
})
|
|
3583
|
-
|
|
3584
|
-
});
|
|
3499
|
+
)
|
|
3500
|
+
] });
|
|
3585
3501
|
}
|
|
3586
3502
|
|
|
3587
3503
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
@@ -3597,16 +3513,21 @@ var formMeta = {
|
|
|
3597
3513
|
_hasRemoteChange: false
|
|
3598
3514
|
};
|
|
3599
3515
|
function useEditMode() {
|
|
3516
|
+
var _a;
|
|
3600
3517
|
const { watch } = (0, import_react_hook_form.useFormContext)();
|
|
3601
|
-
return watch("_editMode")
|
|
3518
|
+
return (_a = watch("_editMode")) != null ? _a : false;
|
|
3602
3519
|
}
|
|
3603
3520
|
function useHasRemoteChange() {
|
|
3521
|
+
var _a;
|
|
3604
3522
|
const { watch } = (0, import_react_hook_form.useFormContext)();
|
|
3605
|
-
return watch("_hasRemoteChange")
|
|
3523
|
+
return (_a = watch("_hasRemoteChange")) != null ? _a : false;
|
|
3606
3524
|
}
|
|
3607
3525
|
function useGetIsNew() {
|
|
3608
3526
|
const { getValues } = (0, import_react_hook_form.useFormContext)();
|
|
3609
|
-
return () =>
|
|
3527
|
+
return () => {
|
|
3528
|
+
var _a;
|
|
3529
|
+
return (_a = getValues("_isNew")) != null ? _a : false;
|
|
3530
|
+
};
|
|
3610
3531
|
}
|
|
3611
3532
|
function useSetFormMeta() {
|
|
3612
3533
|
const { setValue } = (0, import_react_hook_form.useFormContext)();
|
|
@@ -3619,7 +3540,7 @@ function removeFormMeta(withFormMeta) {
|
|
|
3619
3540
|
return (0, import_omit.default)(withFormMeta, Object.keys(formMeta));
|
|
3620
3541
|
}
|
|
3621
3542
|
function addFormMeta(withoutFormMeta) {
|
|
3622
|
-
return {
|
|
3543
|
+
return __spreadValues(__spreadValues({}, formMeta), withoutFormMeta);
|
|
3623
3544
|
}
|
|
3624
3545
|
|
|
3625
3546
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
@@ -3627,22 +3548,26 @@ var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
|
3627
3548
|
function EditableCheckboxCell(context) {
|
|
3628
3549
|
const editMode = useEditMode();
|
|
3629
3550
|
if (!editMode)
|
|
3630
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3552
|
+
import_eds_core_react20.Checkbox,
|
|
3553
|
+
{
|
|
3554
|
+
enterKeyHint: "next",
|
|
3555
|
+
"aria-label": "readonly",
|
|
3556
|
+
readOnly: true,
|
|
3557
|
+
checked: context.getValue(),
|
|
3558
|
+
disabled: true
|
|
3559
|
+
}
|
|
3560
|
+
);
|
|
3561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3562
|
+
import_react_hook_form2.Controller,
|
|
3563
|
+
{
|
|
3564
|
+
name: context.column.id,
|
|
3565
|
+
render: (_a) => {
|
|
3566
|
+
var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
|
|
3567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
|
|
3568
|
+
}
|
|
3569
|
+
}
|
|
3570
|
+
);
|
|
3646
3571
|
}
|
|
3647
3572
|
|
|
3648
3573
|
// src/form-cells/EditableDateCell.tsx
|
|
@@ -3664,19 +3589,13 @@ function getHelperTextProps({
|
|
|
3664
3589
|
return {
|
|
3665
3590
|
variant: "error",
|
|
3666
3591
|
helperText: error.message,
|
|
3667
|
-
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
|
|
3668
|
-
data: import_eds_icons8.error_filled,
|
|
3669
|
-
size: 16
|
|
3670
|
-
})
|
|
3592
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.error_filled, size: 16 })
|
|
3671
3593
|
};
|
|
3672
3594
|
if (warning)
|
|
3673
3595
|
return {
|
|
3674
3596
|
variant: "warning",
|
|
3675
3597
|
helperText: warning.message,
|
|
3676
|
-
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
|
|
3677
|
-
data: import_eds_icons8.warning_filled,
|
|
3678
|
-
size: 16
|
|
3679
|
-
})
|
|
3598
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.warning_filled, size: 16 })
|
|
3680
3599
|
};
|
|
3681
3600
|
return {
|
|
3682
3601
|
helperText,
|
|
@@ -3693,30 +3612,37 @@ function stopPropagation2(handler) {
|
|
|
3693
3612
|
// src/form-cells/EditableDateCell.tsx
|
|
3694
3613
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3695
3614
|
function EditableDateCell(props) {
|
|
3696
|
-
const { dateStringFormatter,
|
|
3615
|
+
const _a = props, { dateStringFormatter } = _a, context = __objRest(_a, ["dateStringFormatter"]);
|
|
3697
3616
|
const rawValue = context.getValue();
|
|
3698
3617
|
const editMode = useEditMode();
|
|
3699
3618
|
const formattedValue = (0, import_react8.useMemo)(
|
|
3700
|
-
() =>
|
|
3619
|
+
() => {
|
|
3620
|
+
var _a2;
|
|
3621
|
+
return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
|
|
3622
|
+
},
|
|
3701
3623
|
[rawValue, dateStringFormatter]
|
|
3702
3624
|
);
|
|
3703
3625
|
if (!editMode)
|
|
3704
|
-
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, {
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, { truncate: true, children: formattedValue });
|
|
3627
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3628
|
+
import_react_hook_form3.Controller,
|
|
3629
|
+
{
|
|
3630
|
+
name: context.column.id,
|
|
3631
|
+
render: (_b) => {
|
|
3632
|
+
var _c = _b, { field: _d } = _c, _e = _d, { value, onChange } = _e, field = __objRest(_e, ["value", "onChange"]), { fieldState: { error } } = _c;
|
|
3633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3634
|
+
InlineTextField,
|
|
3635
|
+
__spreadValues(__spreadValues({
|
|
3636
|
+
id: context.column.id,
|
|
3637
|
+
type: "date",
|
|
3638
|
+
autoComplete: "none",
|
|
3639
|
+
value: value ? parseISODate(value) : "",
|
|
3640
|
+
onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
|
|
3641
|
+
}, getHelperTextProps({ error })), field)
|
|
3642
|
+
);
|
|
3643
|
+
}
|
|
3644
|
+
}
|
|
3645
|
+
);
|
|
3720
3646
|
}
|
|
3721
3647
|
function parseISODate(dateString) {
|
|
3722
3648
|
const date = new Date(dateString);
|
|
@@ -3755,33 +3681,40 @@ function buildEmptyOption() {
|
|
|
3755
3681
|
return { label: "", value: "" };
|
|
3756
3682
|
}
|
|
3757
3683
|
function EditableDropdownSingleCell(props) {
|
|
3758
|
-
const { options,
|
|
3684
|
+
const _a = props, { options } = _a, context = __objRest(_a, ["options"]);
|
|
3759
3685
|
const editMode = useEditMode();
|
|
3760
3686
|
if (!editMode)
|
|
3761
|
-
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, {
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
|
|
3687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3689
|
+
import_react_hook_form4.Controller,
|
|
3690
|
+
{
|
|
3691
|
+
name: context.column.id,
|
|
3692
|
+
render: (_b) => {
|
|
3693
|
+
var { field: _c } = _b, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]);
|
|
3694
|
+
var _a2;
|
|
3695
|
+
const selectedOption = (_a2 = options.find((option) => option.value === value)) != null ? _a2 : buildEmptyOption();
|
|
3696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3697
|
+
import_eds_core_react23.Autocomplete,
|
|
3698
|
+
__spreadValues({
|
|
3699
|
+
label: "",
|
|
3700
|
+
selectedOptions: selectedOption && [selectedOption],
|
|
3701
|
+
options,
|
|
3702
|
+
optionLabel: (option) => {
|
|
3703
|
+
var _a3;
|
|
3704
|
+
return (_a3 = option == null ? void 0 : option.label) != null ? _a3 : "";
|
|
3705
|
+
},
|
|
3706
|
+
"aria-required": true,
|
|
3707
|
+
hideClearButton: true,
|
|
3708
|
+
"aria-autocomplete": "none",
|
|
3709
|
+
onOptionsChange: (changes) => {
|
|
3710
|
+
const [change] = changes.selectedItems;
|
|
3711
|
+
onChange(change == null ? void 0 : change.value);
|
|
3712
|
+
}
|
|
3713
|
+
}, field)
|
|
3714
|
+
);
|
|
3715
|
+
}
|
|
3783
3716
|
}
|
|
3784
|
-
|
|
3717
|
+
);
|
|
3785
3718
|
}
|
|
3786
3719
|
|
|
3787
3720
|
// src/form-cells/EditableNumberCell.tsx
|
|
@@ -3792,23 +3725,25 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
|
3792
3725
|
function EditableNumberCell(context) {
|
|
3793
3726
|
const editMode = useEditMode();
|
|
3794
3727
|
if (!editMode)
|
|
3795
|
-
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, {
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3730
|
+
import_react_hook_form5.Controller,
|
|
3731
|
+
{
|
|
3732
|
+
name: context.column.id,
|
|
3733
|
+
render: (_a) => {
|
|
3734
|
+
var _b = _a, { field: _c } = _b, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b;
|
|
3735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3736
|
+
InlineTextField2,
|
|
3737
|
+
__spreadValues(__spreadValues({
|
|
3738
|
+
id: context.column.id,
|
|
3739
|
+
type: "number",
|
|
3740
|
+
autoComplete: "none",
|
|
3741
|
+
onChange: (e) => onChange(e.target.valueAsNumber)
|
|
3742
|
+
}, field), getHelperTextProps({ error }))
|
|
3743
|
+
) });
|
|
3744
|
+
}
|
|
3745
|
+
}
|
|
3746
|
+
);
|
|
3812
3747
|
}
|
|
3813
3748
|
var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react24.TextField)`
|
|
3814
3749
|
/*
|
|
@@ -3841,103 +3776,102 @@ var import_react_hook_form6 = require("react-hook-form");
|
|
|
3841
3776
|
var import_styled_components19 = __toESM(require("styled-components"));
|
|
3842
3777
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3843
3778
|
function EditableTextAreaCell(props) {
|
|
3844
|
-
const { title,
|
|
3779
|
+
const _a = props, { title } = _a, context = __objRest(_a, ["title"]);
|
|
3845
3780
|
const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
|
|
3846
3781
|
const [open, setOpen] = (0, import_react9.useState)(false);
|
|
3847
3782
|
const editMode = useEditMode();
|
|
3848
3783
|
const name = context.column.id;
|
|
3849
3784
|
if (!editMode)
|
|
3850
|
-
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, {
|
|
3851
|
-
id: name + "popover",
|
|
3852
|
-
value: context.getValue(),
|
|
3853
|
-
title
|
|
3854
|
-
});
|
|
3785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, { id: name + "popover", value: context.getValue(), title });
|
|
3855
3786
|
const openDialog = () => setOpen(true);
|
|
3856
3787
|
const closeDialog = () => setOpen(false);
|
|
3857
|
-
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
...field,
|
|
3873
|
-
...getHelperTextProps({ error })
|
|
3874
|
-
}),
|
|
3875
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, {
|
|
3876
|
-
variant: "ghost_icon",
|
|
3877
|
-
onClick: stopPropagation2(openDialog),
|
|
3878
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Icon, {
|
|
3879
|
-
data: import_eds_icons9.arrow_up,
|
|
3880
|
-
size: 24,
|
|
3881
|
-
style: { transform: "rotateZ(45deg)" }
|
|
3882
|
-
})
|
|
3883
|
-
})
|
|
3884
|
-
]
|
|
3885
|
-
}),
|
|
3886
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog, {
|
|
3887
|
-
open,
|
|
3888
|
-
onClose: () => {
|
|
3889
|
-
closeDialog();
|
|
3890
|
-
onChange(textareaValue);
|
|
3891
|
-
},
|
|
3892
|
-
isDismissable: true,
|
|
3893
|
-
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3894
|
-
children: [
|
|
3895
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Header, {
|
|
3896
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Title, {
|
|
3897
|
-
children: title
|
|
3898
|
-
})
|
|
3899
|
-
}),
|
|
3900
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, {
|
|
3901
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.TextField, {
|
|
3902
|
-
style: {
|
|
3903
|
-
maxWidth: "100%",
|
|
3904
|
-
marginTop: "1rem"
|
|
3905
|
-
},
|
|
3906
|
-
id: field.name + "modal",
|
|
3907
|
-
multiline: true,
|
|
3908
|
-
rows: 8,
|
|
3909
|
-
name: field.name + "modal",
|
|
3910
|
-
value: textareaValue,
|
|
3911
|
-
onChange: (e) => {
|
|
3912
|
-
setTextareaValue(e.target.value);
|
|
3913
|
-
}
|
|
3914
|
-
})
|
|
3915
|
-
}),
|
|
3916
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, {
|
|
3917
|
-
style: { display: "flex", gap: "1rem" },
|
|
3788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3789
|
+
import_react_hook_form6.Controller,
|
|
3790
|
+
{
|
|
3791
|
+
name,
|
|
3792
|
+
render: (_b) => {
|
|
3793
|
+
var _c = _b, { field: _d } = _c, _e = _d, { onChange, ref } = _e, field = __objRest(_e, ["onChange", "ref"]), { fieldState: { error } } = _c;
|
|
3794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
3795
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3796
|
+
"div",
|
|
3797
|
+
{
|
|
3798
|
+
style: {
|
|
3799
|
+
display: "flex",
|
|
3800
|
+
alignItems: "center",
|
|
3801
|
+
position: "relative"
|
|
3802
|
+
},
|
|
3918
3803
|
children: [
|
|
3919
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
onClick: () => {
|
|
3929
|
-
closeDialog();
|
|
3930
|
-
setTextareaValue(context.getValue());
|
|
3931
|
-
},
|
|
3932
|
-
children: "Cancel"
|
|
3933
|
-
})
|
|
3804
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3805
|
+
StyledTextField,
|
|
3806
|
+
__spreadValues(__spreadValues({
|
|
3807
|
+
id: field.name,
|
|
3808
|
+
onChange,
|
|
3809
|
+
ref
|
|
3810
|
+
}, field), getHelperTextProps({ error }))
|
|
3811
|
+
),
|
|
3812
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
|
|
3934
3813
|
]
|
|
3935
|
-
}
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3814
|
+
}
|
|
3815
|
+
),
|
|
3816
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3817
|
+
import_eds_core_react25.Dialog,
|
|
3818
|
+
{
|
|
3819
|
+
open,
|
|
3820
|
+
onClose: () => {
|
|
3821
|
+
closeDialog();
|
|
3822
|
+
onChange(textareaValue);
|
|
3823
|
+
},
|
|
3824
|
+
isDismissable: true,
|
|
3825
|
+
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3826
|
+
children: [
|
|
3827
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Title, { children: title }) }),
|
|
3828
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3829
|
+
import_eds_core_react25.TextField,
|
|
3830
|
+
{
|
|
3831
|
+
style: {
|
|
3832
|
+
maxWidth: "100%",
|
|
3833
|
+
marginTop: "1rem"
|
|
3834
|
+
},
|
|
3835
|
+
id: field.name + "modal",
|
|
3836
|
+
multiline: true,
|
|
3837
|
+
rows: 8,
|
|
3838
|
+
name: field.name + "modal",
|
|
3839
|
+
value: textareaValue,
|
|
3840
|
+
onChange: (e) => {
|
|
3841
|
+
setTextareaValue(e.target.value);
|
|
3842
|
+
}
|
|
3843
|
+
}
|
|
3844
|
+
) }),
|
|
3845
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, { style: { display: "flex", gap: "1rem" }, children: [
|
|
3846
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3847
|
+
import_eds_core_react25.Button,
|
|
3848
|
+
{
|
|
3849
|
+
onClick: () => {
|
|
3850
|
+
closeDialog();
|
|
3851
|
+
onChange(textareaValue);
|
|
3852
|
+
},
|
|
3853
|
+
children: "Submit"
|
|
3854
|
+
}
|
|
3855
|
+
),
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3857
|
+
import_eds_core_react25.Button,
|
|
3858
|
+
{
|
|
3859
|
+
variant: "ghost",
|
|
3860
|
+
onClick: () => {
|
|
3861
|
+
closeDialog();
|
|
3862
|
+
setTextareaValue(context.getValue());
|
|
3863
|
+
},
|
|
3864
|
+
children: "Cancel"
|
|
3865
|
+
}
|
|
3866
|
+
)
|
|
3867
|
+
] })
|
|
3868
|
+
]
|
|
3869
|
+
}
|
|
3870
|
+
)
|
|
3871
|
+
] });
|
|
3872
|
+
}
|
|
3873
|
+
}
|
|
3874
|
+
);
|
|
3941
3875
|
}
|
|
3942
3876
|
var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react25.TextField)`
|
|
3943
3877
|
& input {
|
|
@@ -3963,20 +3897,24 @@ var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
|
3963
3897
|
function EditableTextFieldCell(context) {
|
|
3964
3898
|
const editMode = useEditMode();
|
|
3965
3899
|
if (!editMode)
|
|
3966
|
-
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, {
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3902
|
+
import_react_hook_form7.Controller,
|
|
3903
|
+
{
|
|
3904
|
+
name: context.column.id,
|
|
3905
|
+
render: (_a) => {
|
|
3906
|
+
var _b = _a, { field: _c } = _b, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b;
|
|
3907
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3908
|
+
InlineTextField3,
|
|
3909
|
+
__spreadValues(__spreadValues({
|
|
3910
|
+
id: context.column.id,
|
|
3911
|
+
autoComplete: "none",
|
|
3912
|
+
value: String(value != null ? value : "")
|
|
3913
|
+
}, field), getHelperTextProps({ error }))
|
|
3914
|
+
);
|
|
3915
|
+
}
|
|
3916
|
+
}
|
|
3917
|
+
);
|
|
3980
3918
|
}
|
|
3981
3919
|
var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react26.TextField)`
|
|
3982
3920
|
/*
|