@equinor/apollo-components 3.1.8 → 3.2.0-fix.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +9 -3
- package/dist/index.js +729 -733
- package/dist/index.mjs +703 -708
- 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
|
}
|
|
@@ -2337,6 +2374,7 @@ var src_exports = {};
|
|
|
2337
2374
|
__export(src_exports, {
|
|
2338
2375
|
AppShell: () => AppShell,
|
|
2339
2376
|
AppSidebar: () => AppSidebar,
|
|
2377
|
+
CheckboxCell: () => CheckboxCell,
|
|
2340
2378
|
ChipsCell: () => ChipsCell,
|
|
2341
2379
|
ColumnSelect: () => ColumnSelect,
|
|
2342
2380
|
DataTable: () => DataTable,
|
|
@@ -2389,33 +2427,16 @@ var Wrapper = import_styled_components.default.div`
|
|
|
2389
2427
|
max-width: 100%;
|
|
2390
2428
|
}
|
|
2391
2429
|
`;
|
|
2392
|
-
var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
|
|
2393
|
-
children: [
|
|
2394
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
children: title ?? "App Title"
|
|
2403
|
-
})
|
|
2404
|
-
]
|
|
2405
|
-
})
|
|
2406
|
-
}),
|
|
2407
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
2408
|
-
className: "--content-wrapper",
|
|
2409
|
-
children: [
|
|
2410
|
-
sidebar,
|
|
2411
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
2412
|
-
className: "--content-outlet",
|
|
2413
|
-
children
|
|
2414
|
-
})
|
|
2415
|
-
]
|
|
2416
|
-
})
|
|
2417
|
-
]
|
|
2418
|
-
});
|
|
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
|
+
] });
|
|
2419
2440
|
|
|
2420
2441
|
// src/AppShell/AppSidebar.tsx
|
|
2421
2442
|
var import_eds_core_react2 = require("@equinor/eds-core-react");
|
|
@@ -2452,25 +2473,34 @@ var Wrapper2 = import_styled_components2.default.div`
|
|
|
2452
2473
|
`;
|
|
2453
2474
|
function AppSidebar() {
|
|
2454
2475
|
const [collapsed, setCollapsed] = (0, import_react.useState)(false);
|
|
2455
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper2, {
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
className: "collapse-button
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
children:
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
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
|
+
) }) });
|
|
2488
|
+
}
|
|
2489
|
+
|
|
2490
|
+
// src/cells/CheckboxCell.tsx
|
|
2491
|
+
var import_eds_core_react3 = require("@equinor/eds-core-react");
|
|
2492
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
2493
|
+
function CheckboxCell(context) {
|
|
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
|
+
);
|
|
2474
2504
|
}
|
|
2475
2505
|
|
|
2476
2506
|
// src/cells/ChipsCell.tsx
|
|
@@ -2494,7 +2524,7 @@ function stopPropagation(handler) {
|
|
|
2494
2524
|
}
|
|
2495
2525
|
|
|
2496
2526
|
// src/cells/ChipsCell.tsx
|
|
2497
|
-
var
|
|
2527
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2498
2528
|
var ChipsWrapper = import_styled_components3.default.div`
|
|
2499
2529
|
display: flex;
|
|
2500
2530
|
align-items: center;
|
|
@@ -2508,26 +2538,24 @@ var Chip = import_styled_components3.default.div`
|
|
|
2508
2538
|
line-height: 22px;
|
|
2509
2539
|
height: 22px;
|
|
2510
2540
|
padding: 0 6px;
|
|
2511
|
-
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
|
+
}};
|
|
2512
2545
|
color: darkslategrey;
|
|
2513
2546
|
`;
|
|
2514
2547
|
var ChipsCell = (props) => {
|
|
2515
2548
|
var _a;
|
|
2516
|
-
return /* @__PURE__ */ (0,
|
|
2517
|
-
children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, {
|
|
2518
|
-
backgroundColor: stringToHslColor(value),
|
|
2519
|
-
children: value
|
|
2520
|
-
}, value))
|
|
2521
|
-
});
|
|
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)) });
|
|
2522
2550
|
};
|
|
2523
2551
|
|
|
2524
2552
|
// src/cells/DynamicCell.tsx
|
|
2525
|
-
var
|
|
2553
|
+
var import_eds_core_react5 = require("@equinor/eds-core-react");
|
|
2526
2554
|
var import_react_table = require("@tanstack/react-table");
|
|
2527
2555
|
var import_styled_components5 = __toESM(require("styled-components"));
|
|
2528
2556
|
|
|
2529
2557
|
// src/cells/StickyCell.tsx
|
|
2530
|
-
var
|
|
2558
|
+
var import_eds_core_react4 = require("@equinor/eds-core-react");
|
|
2531
2559
|
var import_styled_components4 = __toESM(require("styled-components"));
|
|
2532
2560
|
var leftCellShadow = import_styled_components4.css`
|
|
2533
2561
|
&:before {
|
|
@@ -2540,7 +2568,7 @@ var leftCellShadow = import_styled_components4.css`
|
|
|
2540
2568
|
width: 1px;
|
|
2541
2569
|
}
|
|
2542
2570
|
`;
|
|
2543
|
-
var StickyCell = (0, import_styled_components4.default)(
|
|
2571
|
+
var StickyCell = (0, import_styled_components4.default)(import_eds_core_react4.Table.Cell)`
|
|
2544
2572
|
position: sticky;
|
|
2545
2573
|
right: 0;
|
|
2546
2574
|
top: 0;
|
|
@@ -2553,43 +2581,59 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
|
|
|
2553
2581
|
`;
|
|
2554
2582
|
|
|
2555
2583
|
// src/cells/DynamicCell.tsx
|
|
2556
|
-
var
|
|
2584
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2557
2585
|
var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
|
|
2558
2586
|
background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
|
|
2559
2587
|
`;
|
|
2560
|
-
var StyledCell = (0, import_styled_components5.default)(
|
|
2588
|
+
var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
|
|
2561
2589
|
background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
|
|
2562
2590
|
`;
|
|
2563
2591
|
function DynamicCell({ cell, highlight, getStickyCellColor }) {
|
|
2564
2592
|
var _a;
|
|
2565
2593
|
const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
|
|
2566
2594
|
if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2567
|
-
return /* @__PURE__ */ (0,
|
|
2568
|
-
backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
|
|
2569
|
-
"data-column": cell.column.id,
|
|
2570
|
-
children: cellContent
|
|
2571
|
-
});
|
|
2595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
|
|
2572
2596
|
}
|
|
2573
|
-
return /* @__PURE__ */ (0,
|
|
2574
|
-
"data-column": cell.column.id,
|
|
2575
|
-
backgroundColor: highlight ? "#d5eaf4" : void 0,
|
|
2576
|
-
children: cellContent
|
|
2577
|
-
});
|
|
2597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
|
|
2578
2598
|
}
|
|
2579
2599
|
|
|
2580
2600
|
// src/cells/HeaderCell.tsx
|
|
2581
|
-
var
|
|
2601
|
+
var import_eds_core_react6 = require("@equinor/eds-core-react");
|
|
2582
2602
|
var import_eds_icons3 = require("@equinor/eds-icons");
|
|
2603
|
+
var import_eds_tokens3 = require("@equinor/eds-tokens");
|
|
2583
2604
|
var import_react_table2 = require("@tanstack/react-table");
|
|
2584
2605
|
var import_styled_components6 = __toESM(require("styled-components"));
|
|
2585
|
-
var
|
|
2586
|
-
var
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2606
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2607
|
+
var resizeCellStyle = import_styled_components6.css`
|
|
2608
|
+
.resizer {
|
|
2609
|
+
position: absolute;
|
|
2610
|
+
right: 0;
|
|
2611
|
+
top: 0;
|
|
2612
|
+
height: 100%;
|
|
2613
|
+
width: 4px;
|
|
2614
|
+
opacity: 0;
|
|
2615
|
+
background: #aaa;
|
|
2616
|
+
cursor: col-resize;
|
|
2617
|
+
user-select: none;
|
|
2618
|
+
touch-action: none;
|
|
2619
|
+
}
|
|
2620
|
+
|
|
2621
|
+
.resizer.isResizing {
|
|
2622
|
+
background: ${import_eds_tokens3.tokens.colors.interactive.focus.hex};
|
|
2623
|
+
opacity: 1;
|
|
2624
|
+
}
|
|
2625
|
+
|
|
2626
|
+
&:hover .resizer {
|
|
2627
|
+
opacity: 1;
|
|
2628
|
+
}
|
|
2629
|
+
`;
|
|
2630
|
+
var StickyCell2 = (0, import_styled_components6.default)(StickyHeaderCell)`
|
|
2631
|
+
${resizeCellStyle}
|
|
2632
|
+
`;
|
|
2633
|
+
var Cell2 = (0, import_styled_components6.default)(import_eds_core_react6.Table.Cell)`
|
|
2634
|
+
${resizeCellStyle}
|
|
2591
2635
|
`;
|
|
2592
|
-
var HeaderCell = ({ header }) => {
|
|
2636
|
+
var HeaderCell = ({ header, table }) => {
|
|
2593
2637
|
var _a;
|
|
2594
2638
|
const style = {
|
|
2595
2639
|
width: header.column.getSize(),
|
|
@@ -2602,39 +2646,40 @@ var HeaderCell = ({ header }) => {
|
|
|
2602
2646
|
colSpan: header.colSpan
|
|
2603
2647
|
};
|
|
2604
2648
|
if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2605
|
-
return /* @__PURE__ */ (0,
|
|
2606
|
-
...cellProps,
|
|
2607
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
|
|
2608
|
-
header
|
|
2609
|
-
})
|
|
2610
|
-
}, 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);
|
|
2611
2650
|
}
|
|
2612
|
-
return /* @__PURE__ */ (0,
|
|
2613
|
-
...cellProps,
|
|
2614
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
|
|
2615
|
-
header
|
|
2616
|
-
})
|
|
2617
|
-
}, 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);
|
|
2618
2652
|
};
|
|
2619
|
-
|
|
2653
|
+
var HeaderDiv = import_styled_components6.default.div`
|
|
2654
|
+
display: flex;
|
|
2655
|
+
align-items: center;
|
|
2656
|
+
gap: 0.25rem;
|
|
2657
|
+
z-index: 5;
|
|
2658
|
+
`;
|
|
2659
|
+
function HeaderContent({ header, table }) {
|
|
2660
|
+
var _a;
|
|
2620
2661
|
if (header.isPlaceholder)
|
|
2621
2662
|
return null;
|
|
2622
|
-
return /* @__PURE__ */ (0,
|
|
2623
|
-
|
|
2624
|
-
|
|
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",
|
|
2625
2672
|
{
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
]
|
|
2637
|
-
});
|
|
2673
|
+
onMouseDown: header.getResizeHandler(),
|
|
2674
|
+
onTouchStart: header.getResizeHandler(),
|
|
2675
|
+
onClick: (e) => e.stopPropagation(),
|
|
2676
|
+
className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
|
|
2677
|
+
style: {
|
|
2678
|
+
transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
|
|
2679
|
+
}
|
|
2680
|
+
}
|
|
2681
|
+
)
|
|
2682
|
+
] });
|
|
2638
2683
|
}
|
|
2639
2684
|
function getSort({ column }) {
|
|
2640
2685
|
if (!column.getCanSort())
|
|
@@ -2650,46 +2695,39 @@ function getSort({ column }) {
|
|
|
2650
2695
|
}
|
|
2651
2696
|
|
|
2652
2697
|
// src/cells/HierarchyCell.tsx
|
|
2653
|
-
var
|
|
2698
|
+
var import_eds_tokens5 = require("@equinor/eds-tokens");
|
|
2654
2699
|
var import_styled_components8 = __toESM(require("styled-components"));
|
|
2655
2700
|
|
|
2656
2701
|
// src/cells/TypographyCustom.tsx
|
|
2657
|
-
var
|
|
2658
|
-
var
|
|
2702
|
+
var import_eds_core_react7 = require("@equinor/eds-core-react");
|
|
2703
|
+
var import_eds_tokens4 = require("@equinor/eds-tokens");
|
|
2659
2704
|
var import_styled_components7 = __toESM(require("styled-components"));
|
|
2660
|
-
var
|
|
2705
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2661
2706
|
var truncateStyle = {
|
|
2662
2707
|
overflow: "hidden",
|
|
2663
2708
|
whiteSpace: "nowrap",
|
|
2664
2709
|
textOverflow: "ellipsis"
|
|
2665
2710
|
};
|
|
2666
2711
|
var TypographyCustom = (props) => {
|
|
2667
|
-
const { truncate, enableShowAllOnHover, style: styleFromProps,
|
|
2712
|
+
const _a = props, { truncate, enableShowAllOnHover, style: styleFromProps } = _a, edsTypographyProps = __objRest(_a, ["truncate", "enableShowAllOnHover", "style"]);
|
|
2668
2713
|
if (enableShowAllOnHover)
|
|
2669
|
-
return /* @__PURE__ */ (0,
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
style: {
|
|
2673
|
-
...styleFromProps,
|
|
2674
|
-
...truncateStyle
|
|
2675
|
-
}
|
|
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)
|
|
2676
2718
|
})
|
|
2677
|
-
});
|
|
2719
|
+
) });
|
|
2678
2720
|
if (truncate)
|
|
2679
|
-
return /* @__PURE__ */ (0,
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
|
|
2687
|
-
...edsTypographyProps,
|
|
2688
|
-
style: styleFromProps
|
|
2689
|
-
});
|
|
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 }));
|
|
2690
2728
|
};
|
|
2691
2729
|
var HoverCapture = import_styled_components7.default.div`
|
|
2692
|
-
height: ${
|
|
2730
|
+
height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
|
|
2693
2731
|
background-color: inherit;
|
|
2694
2732
|
|
|
2695
2733
|
position: relative;
|
|
@@ -2715,7 +2753,7 @@ var HoverCapture = import_styled_components7.default.div`
|
|
|
2715
2753
|
`;
|
|
2716
2754
|
|
|
2717
2755
|
// src/cells/HierarchyCell.tsx
|
|
2718
|
-
var
|
|
2756
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2719
2757
|
var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
|
|
2720
2758
|
height: 100%;
|
|
2721
2759
|
display: flex;
|
|
@@ -2724,50 +2762,53 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
|
|
|
2724
2762
|
${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
|
|
2725
2763
|
|
|
2726
2764
|
${({ depth }) => depth > 0 && import_styled_components8.css`
|
|
2727
|
-
border-left: 3px solid ${
|
|
2765
|
+
border-left: 3px solid ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
|
|
2728
2766
|
gap: 0.5rem;
|
|
2729
2767
|
.--divider {
|
|
2730
2768
|
width: ${depth * 32}px;
|
|
2731
|
-
background-color: ${
|
|
2769
|
+
background-color: ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
|
|
2732
2770
|
height: 3px;
|
|
2733
2771
|
border-radius: 0 5px 5px 0;
|
|
2734
2772
|
}
|
|
2735
2773
|
`}
|
|
2736
2774
|
`;
|
|
2737
2775
|
function HierarchyCell(cell, options = {}) {
|
|
2738
|
-
var _a, _b;
|
|
2739
|
-
return /* @__PURE__ */ (0,
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
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
|
+
);
|
|
2749
2788
|
}
|
|
2750
2789
|
|
|
2751
2790
|
// src/cells/PopoverCell.tsx
|
|
2752
|
-
var
|
|
2791
|
+
var import_eds_core_react8 = require("@equinor/eds-core-react");
|
|
2753
2792
|
var import_react2 = require("react");
|
|
2754
|
-
var
|
|
2793
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2755
2794
|
function PopoverCell(props) {
|
|
2756
2795
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
2757
2796
|
const anchorRef = (0, import_react2.useRef)(null);
|
|
2758
2797
|
const handleClick = () => setOpen(!open);
|
|
2759
2798
|
const handleClose = () => setOpen(false);
|
|
2760
|
-
return /* @__PURE__ */ (0,
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TypographyCustom, {
|
|
2799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, ref: anchorRef, children: [
|
|
2800
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2801
|
+
TypographyCustom,
|
|
2802
|
+
{
|
|
2765
2803
|
onClick: stopPropagation(handleClick),
|
|
2766
2804
|
style: { cursor: "pointer" },
|
|
2767
2805
|
truncate: true,
|
|
2768
2806
|
children: String(props.value)
|
|
2769
|
-
}
|
|
2770
|
-
|
|
2807
|
+
}
|
|
2808
|
+
),
|
|
2809
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
2810
|
+
import_eds_core_react8.Popover,
|
|
2811
|
+
{
|
|
2771
2812
|
id: props.id,
|
|
2772
2813
|
open,
|
|
2773
2814
|
"aria-controls": "expand cell",
|
|
@@ -2775,27 +2816,19 @@ function PopoverCell(props) {
|
|
|
2775
2816
|
onClose: handleClose,
|
|
2776
2817
|
placement: "bottom",
|
|
2777
2818
|
children: [
|
|
2778
|
-
props.title && /* @__PURE__ */ (0,
|
|
2779
|
-
|
|
2780
|
-
children: props.title
|
|
2781
|
-
})
|
|
2782
|
-
}),
|
|
2783
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Content, {
|
|
2784
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
|
|
2785
|
-
children: String(props.value)
|
|
2786
|
-
})
|
|
2787
|
-
})
|
|
2819
|
+
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 }) }),
|
|
2820
|
+
/* @__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(props.value) }) })
|
|
2788
2821
|
]
|
|
2789
|
-
}
|
|
2790
|
-
|
|
2791
|
-
});
|
|
2822
|
+
}
|
|
2823
|
+
)
|
|
2824
|
+
] });
|
|
2792
2825
|
}
|
|
2793
2826
|
|
|
2794
2827
|
// src/cells/SelectColumnDef.tsx
|
|
2795
|
-
var
|
|
2828
|
+
var import_eds_core_react9 = require("@equinor/eds-core-react");
|
|
2796
2829
|
var import_eds_icons4 = require("@equinor/eds-icons");
|
|
2797
2830
|
var import_styled_components9 = __toESM(require("styled-components"));
|
|
2798
|
-
var
|
|
2831
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2799
2832
|
var CellWrapper2 = import_styled_components9.default.div`
|
|
2800
2833
|
display: flex;
|
|
2801
2834
|
align-items: center;
|
|
@@ -2808,50 +2841,52 @@ function SelectColumnDef(props) {
|
|
|
2808
2841
|
return {
|
|
2809
2842
|
id: "select",
|
|
2810
2843
|
size: props.includeExpansionButton ? 96 : 48,
|
|
2811
|
-
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0,
|
|
2812
|
-
|
|
2844
|
+
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2845
|
+
import_eds_core_react9.Checkbox,
|
|
2846
|
+
{
|
|
2813
2847
|
checked: table.getIsAllRowsSelected(),
|
|
2814
2848
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
2815
2849
|
"aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
|
|
2816
2850
|
onChange: table.getIsSomeRowsSelected() ? () => table.toggleAllRowsSelected(false) : table.getToggleAllRowsSelectedHandler()
|
|
2817
|
-
}
|
|
2818
|
-
}) : null,
|
|
2851
|
+
}
|
|
2852
|
+
) }) : null,
|
|
2819
2853
|
cell: ({ table, row }) => {
|
|
2820
2854
|
const paddingLeft = "0px";
|
|
2821
|
-
return /* @__PURE__ */ (0,
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
}
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, { paddingLeft, rowDepth: row.depth, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
2856
|
+
selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2857
|
+
import_eds_core_react9.Radio,
|
|
2858
|
+
{
|
|
2859
|
+
checked: row.getIsSelected(),
|
|
2860
|
+
"aria-label": `Select row ${row.id}`,
|
|
2861
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2862
|
+
}
|
|
2863
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2864
|
+
import_eds_core_react9.Checkbox,
|
|
2865
|
+
{
|
|
2866
|
+
checked: row.getIsSelected(),
|
|
2867
|
+
indeterminate: row.getIsSomeSelected(),
|
|
2868
|
+
"aria-label": `Select row ${row.id}`,
|
|
2869
|
+
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2870
|
+
}
|
|
2871
|
+
),
|
|
2872
|
+
row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2873
|
+
import_eds_core_react9.Button,
|
|
2874
|
+
{
|
|
2875
|
+
variant: "ghost_icon",
|
|
2876
|
+
color: "secondary",
|
|
2877
|
+
"aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
|
|
2878
|
+
onClick: stopPropagation(row.getToggleExpandedHandler()),
|
|
2879
|
+
style: { cursor: "pointer" },
|
|
2880
|
+
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 })
|
|
2881
|
+
}
|
|
2882
|
+
)
|
|
2883
|
+
] }) });
|
|
2849
2884
|
}
|
|
2850
2885
|
};
|
|
2851
2886
|
}
|
|
2852
2887
|
|
|
2853
2888
|
// src/DataTable/components/ColumnSelect.tsx
|
|
2854
|
-
var
|
|
2889
|
+
var import_eds_core_react10 = require("@equinor/eds-core-react");
|
|
2855
2890
|
var import_eds_icons5 = require("@equinor/eds-icons");
|
|
2856
2891
|
var import_react3 = require("react");
|
|
2857
2892
|
var import_styled_components10 = __toESM(require("styled-components"));
|
|
@@ -2886,7 +2921,7 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
|
|
|
2886
2921
|
}
|
|
2887
2922
|
|
|
2888
2923
|
// src/DataTable/components/ColumnSelect.tsx
|
|
2889
|
-
var
|
|
2924
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2890
2925
|
var ColumnSelectContent = import_styled_components10.default.div`
|
|
2891
2926
|
display: grid;
|
|
2892
2927
|
grid-template-columns: repeat(2, 1fr);
|
|
@@ -2902,92 +2937,76 @@ function ColumnSelect({ table }) {
|
|
|
2902
2937
|
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
|
2903
2938
|
const referenceElement = (0, import_react3.useRef)(null);
|
|
2904
2939
|
const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
|
|
2905
|
-
return /* @__PURE__ */ (0,
|
|
2906
|
-
children:
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
})
|
|
2923
|
-
}),
|
|
2924
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover, {
|
|
2940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
2941
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, { title: "Select columns", placement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2942
|
+
import_eds_core_react10.Button,
|
|
2943
|
+
{
|
|
2944
|
+
"aria-haspopup": true,
|
|
2945
|
+
id: "column-select-anchor",
|
|
2946
|
+
"aria-controls": "column-select-popover",
|
|
2947
|
+
"aria-expanded": isOpen,
|
|
2948
|
+
ref: referenceElement,
|
|
2949
|
+
variant: "ghost_icon",
|
|
2950
|
+
onClick: () => setIsOpen(true),
|
|
2951
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "view_column", data: import_eds_icons5.view_column })
|
|
2952
|
+
}
|
|
2953
|
+
) }),
|
|
2954
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2955
|
+
import_eds_core_react10.Popover,
|
|
2956
|
+
{
|
|
2925
2957
|
open: isOpen,
|
|
2926
2958
|
id: "column-select-popover",
|
|
2927
2959
|
anchorEl: referenceElement.current,
|
|
2928
2960
|
placement: "bottom-end",
|
|
2929
2961
|
onClose: () => setIsOpen(false),
|
|
2930
2962
|
children: [
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2932
|
-
children:
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
|
|
2963
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, { children: [
|
|
2964
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Popover.Title, { children: "Column settings" }),
|
|
2965
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2966
|
+
import_eds_core_react10.Button,
|
|
2967
|
+
{
|
|
2937
2968
|
variant: "ghost_icon",
|
|
2938
2969
|
"aria-label": "Close column select",
|
|
2939
2970
|
onClick: () => setIsOpen(false),
|
|
2940
|
-
children: /* @__PURE__ */ (0,
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
children: "Reset to default"
|
|
2969
|
-
})
|
|
2970
|
-
})
|
|
2971
|
-
]
|
|
2972
|
-
})
|
|
2971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, { name: "close", data: import_eds_icons5.close, size: 24 })
|
|
2972
|
+
}
|
|
2973
|
+
)
|
|
2974
|
+
] }),
|
|
2975
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Content, { children: [
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnSelectContent, { children: selectableColumns.map((column) => {
|
|
2977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2978
|
+
import_eds_core_react10.Checkbox,
|
|
2979
|
+
{
|
|
2980
|
+
checked: column.getIsVisible(),
|
|
2981
|
+
label: getColumnHeader(column),
|
|
2982
|
+
onChange: column.getToggleVisibilityHandler()
|
|
2983
|
+
},
|
|
2984
|
+
column.id
|
|
2985
|
+
);
|
|
2986
|
+
}) }),
|
|
2987
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Divider, { variant: "small" }),
|
|
2988
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2989
|
+
import_eds_core_react10.Button,
|
|
2990
|
+
{
|
|
2991
|
+
color: "secondary",
|
|
2992
|
+
variant: "ghost",
|
|
2993
|
+
disabled: table.getIsAllColumnsVisible(),
|
|
2994
|
+
onClick: () => table.toggleAllColumnsVisible(true),
|
|
2995
|
+
children: "Reset to default"
|
|
2996
|
+
}
|
|
2997
|
+
) })
|
|
2998
|
+
] })
|
|
2973
2999
|
]
|
|
2974
|
-
}
|
|
2975
|
-
|
|
2976
|
-
});
|
|
3000
|
+
}
|
|
3001
|
+
)
|
|
3002
|
+
] });
|
|
2977
3003
|
}
|
|
2978
3004
|
|
|
2979
3005
|
// src/DataTable/components/TableHeader.tsx
|
|
2980
|
-
var
|
|
2981
|
-
var
|
|
3006
|
+
var import_eds_core_react11 = require("@equinor/eds-core-react");
|
|
3007
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2982
3008
|
function TableHeader({ table, sticky }) {
|
|
2983
|
-
return /* @__PURE__ */ (0,
|
|
2984
|
-
sticky,
|
|
2985
|
-
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
|
|
2986
|
-
children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderCell, {
|
|
2987
|
-
header
|
|
2988
|
-
}, header.id))
|
|
2989
|
-
}, headerGroup.id))
|
|
2990
|
-
});
|
|
3009
|
+
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)) });
|
|
2991
3010
|
}
|
|
2992
3011
|
|
|
2993
3012
|
// src/DataTable/DataTable.tsx
|
|
@@ -2996,44 +3015,33 @@ var import_react7 = require("react");
|
|
|
2996
3015
|
var import_styled_components16 = __toESM(require("styled-components"));
|
|
2997
3016
|
|
|
2998
3017
|
// src/DataTable/components/BasicTable.tsx
|
|
2999
|
-
var
|
|
3018
|
+
var import_eds_core_react15 = require("@equinor/eds-core-react");
|
|
3000
3019
|
|
|
3001
3020
|
// src/DataTable/components/PlaceholderRow.tsx
|
|
3002
|
-
var
|
|
3021
|
+
var import_eds_core_react12 = require("@equinor/eds-core-react");
|
|
3003
3022
|
var import_styled_components11 = __toESM(require("styled-components"));
|
|
3004
|
-
var
|
|
3023
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
3005
3024
|
var PlaceholderTextWrapper = import_styled_components11.default.div`
|
|
3006
3025
|
display: flex;
|
|
3007
3026
|
justify-content: center;
|
|
3008
3027
|
`;
|
|
3009
3028
|
function PlaceholderRow({ isLoading }) {
|
|
3010
|
-
return /* @__PURE__ */ (0,
|
|
3011
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Cell, {
|
|
3012
|
-
colSpan: 100,
|
|
3013
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlaceholderTextWrapper, {
|
|
3014
|
-
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.DotProgress, {
|
|
3015
|
-
color: "primary"
|
|
3016
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Typography, {
|
|
3017
|
-
children: "No data available"
|
|
3018
|
-
})
|
|
3019
|
-
})
|
|
3020
|
-
})
|
|
3021
|
-
});
|
|
3029
|
+
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" }) }) }) });
|
|
3022
3030
|
}
|
|
3023
3031
|
|
|
3024
3032
|
// src/DataTable/components/TableBody.tsx
|
|
3025
|
-
var
|
|
3033
|
+
var import_eds_core_react13 = require("@equinor/eds-core-react");
|
|
3026
3034
|
var import_styled_components12 = __toESM(require("styled-components"));
|
|
3027
|
-
var TableBody = (0, import_styled_components12.default)(
|
|
3035
|
+
var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
|
|
3028
3036
|
// The following attribute are important for fixed column width
|
|
3029
3037
|
// CHANGE THES WITH CAUTION
|
|
3030
3038
|
background: inherit;
|
|
3031
3039
|
`;
|
|
3032
3040
|
|
|
3033
3041
|
// src/DataTable/components/TableRow.tsx
|
|
3034
|
-
var
|
|
3042
|
+
var import_eds_core_react14 = require("@equinor/eds-core-react");
|
|
3035
3043
|
var import_styled_components13 = __toESM(require("styled-components"));
|
|
3036
|
-
var
|
|
3044
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3037
3045
|
function TableRow({
|
|
3038
3046
|
row,
|
|
3039
3047
|
rowConfig,
|
|
@@ -3043,32 +3051,39 @@ function TableRow({
|
|
|
3043
3051
|
}) {
|
|
3044
3052
|
var _a;
|
|
3045
3053
|
const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
|
|
3046
|
-
const tableRowContent = /* @__PURE__ */ (0,
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3054
|
+
const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3055
|
+
StyledTableRow,
|
|
3056
|
+
{
|
|
3057
|
+
active: row.getIsSelected(),
|
|
3058
|
+
"data-index": index,
|
|
3059
|
+
ref: measureElement,
|
|
3060
|
+
style: {
|
|
3061
|
+
cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
|
|
3062
|
+
backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
|
|
3063
|
+
},
|
|
3064
|
+
onClick: () => {
|
|
3065
|
+
var _a2;
|
|
3066
|
+
return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row);
|
|
3067
|
+
},
|
|
3068
|
+
onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
|
|
3069
|
+
onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
|
|
3070
|
+
children: row.getVisibleCells().map((cell) => {
|
|
3071
|
+
var _a2;
|
|
3072
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3073
|
+
DynamicCell,
|
|
3074
|
+
{
|
|
3075
|
+
cell,
|
|
3076
|
+
getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
|
|
3077
|
+
highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
|
|
3078
|
+
},
|
|
3079
|
+
cell.id
|
|
3080
|
+
);
|
|
3081
|
+
})
|
|
3082
|
+
}
|
|
3083
|
+
);
|
|
3069
3084
|
return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
|
|
3070
3085
|
}
|
|
3071
|
-
var StyledTableRow = (0, import_styled_components13.default)(
|
|
3086
|
+
var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
|
|
3072
3087
|
/* Background color must be inherited here. Does not work with inline styling */
|
|
3073
3088
|
${({ active }) => active ? "" : "background-color: inherit;"}
|
|
3074
3089
|
`;
|
|
@@ -3081,7 +3096,7 @@ function handleRowEvent(row, handler) {
|
|
|
3081
3096
|
}
|
|
3082
3097
|
|
|
3083
3098
|
// src/DataTable/components/BasicTable.tsx
|
|
3084
|
-
var
|
|
3099
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3085
3100
|
function BasicTable({
|
|
3086
3101
|
table,
|
|
3087
3102
|
rowConfig,
|
|
@@ -3091,54 +3106,43 @@ function BasicTable({
|
|
|
3091
3106
|
tableCaption
|
|
3092
3107
|
}) {
|
|
3093
3108
|
const tableRows = table.getRowModel().rows;
|
|
3094
|
-
return /* @__PURE__ */ (0,
|
|
3095
|
-
children:
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
}),
|
|
3100
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableHeader, {
|
|
3101
|
-
sticky: stickyHeader,
|
|
3102
|
-
table
|
|
3103
|
-
}),
|
|
3104
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableBody, {
|
|
3105
|
-
children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableRow, {
|
|
3106
|
-
row,
|
|
3107
|
-
rowConfig,
|
|
3108
|
-
cellConfig
|
|
3109
|
-
}, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PlaceholderRow, {
|
|
3110
|
-
isLoading
|
|
3111
|
-
})
|
|
3112
|
-
})
|
|
3113
|
-
]
|
|
3114
|
-
});
|
|
3109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, { children: [
|
|
3110
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Table.Caption, { hidden: true, children: tableCaption }),
|
|
3111
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, { sticky: stickyHeader, table }),
|
|
3112
|
+
/* @__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 }) })
|
|
3113
|
+
] });
|
|
3115
3114
|
}
|
|
3116
3115
|
|
|
3117
3116
|
// src/DataTable/components/DataTableHeader.tsx
|
|
3118
|
-
var
|
|
3117
|
+
var import_eds_core_react17 = require("@equinor/eds-core-react");
|
|
3119
3118
|
var import_eds_icons7 = require("@equinor/eds-icons");
|
|
3120
3119
|
var import_styled_components15 = __toESM(require("styled-components"));
|
|
3121
3120
|
|
|
3122
3121
|
// src/DataTable/filters/DebouncedInput.tsx
|
|
3123
|
-
var
|
|
3122
|
+
var import_eds_core_react16 = require("@equinor/eds-core-react");
|
|
3124
3123
|
var import_eds_icons6 = require("@equinor/eds-icons");
|
|
3125
3124
|
var import_react4 = require("react");
|
|
3126
3125
|
var import_styled_components14 = __toESM(require("styled-components"));
|
|
3127
|
-
var
|
|
3126
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3128
3127
|
var Wrapper3 = import_styled_components14.default.div`
|
|
3129
3128
|
width: 200px;
|
|
3130
3129
|
`;
|
|
3131
|
-
var CloseButton = (0, import_styled_components14.default)(
|
|
3130
|
+
var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
|
|
3132
3131
|
width: 24px;
|
|
3133
3132
|
height: 24px;
|
|
3134
3133
|
`;
|
|
3135
|
-
function DebouncedInput({
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
}
|
|
3134
|
+
function DebouncedInput(_a) {
|
|
3135
|
+
var _b = _a, {
|
|
3136
|
+
value: initialValue,
|
|
3137
|
+
onChange,
|
|
3138
|
+
icon,
|
|
3139
|
+
debounce = 500
|
|
3140
|
+
} = _b, props = __objRest(_b, [
|
|
3141
|
+
"value",
|
|
3142
|
+
"onChange",
|
|
3143
|
+
"icon",
|
|
3144
|
+
"debounce"
|
|
3145
|
+
]);
|
|
3142
3146
|
const [value, setValue] = (0, import_react4.useState)(initialValue);
|
|
3143
3147
|
(0, import_react4.useEffect)(() => {
|
|
3144
3148
|
setValue(initialValue);
|
|
@@ -3149,30 +3153,15 @@ function DebouncedInput({
|
|
|
3149
3153
|
}, debounce);
|
|
3150
3154
|
return () => clearTimeout(timeout);
|
|
3151
3155
|
}, [value]);
|
|
3152
|
-
return /* @__PURE__ */ (0,
|
|
3153
|
-
|
|
3154
|
-
|
|
3156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3157
|
+
import_eds_core_react16.Input,
|
|
3158
|
+
__spreadProps(__spreadValues({}, props), {
|
|
3155
3159
|
value,
|
|
3156
|
-
leftAdornments: icon && /* @__PURE__ */ (0,
|
|
3157
|
-
|
|
3158
|
-
data: icon,
|
|
3159
|
-
size: 18
|
|
3160
|
-
}),
|
|
3161
|
-
rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Tooltip, {
|
|
3162
|
-
title: "Clear input",
|
|
3163
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseButton, {
|
|
3164
|
-
variant: "ghost_icon",
|
|
3165
|
-
onClick: () => setValue(""),
|
|
3166
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Icon, {
|
|
3167
|
-
name: import_eds_icons6.close.name,
|
|
3168
|
-
data: import_eds_icons6.close,
|
|
3169
|
-
size: 18
|
|
3170
|
-
})
|
|
3171
|
-
})
|
|
3172
|
-
}),
|
|
3160
|
+
leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, { name: icon.name, data: icon, size: 18 }),
|
|
3161
|
+
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 }) }) }),
|
|
3173
3162
|
onChange: (event) => setValue(event.target.value)
|
|
3174
3163
|
})
|
|
3175
|
-
});
|
|
3164
|
+
) });
|
|
3176
3165
|
}
|
|
3177
3166
|
|
|
3178
3167
|
// src/DataTable/filters/functions.ts
|
|
@@ -3186,7 +3175,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
|
3186
3175
|
};
|
|
3187
3176
|
|
|
3188
3177
|
// src/DataTable/components/DataTableHeader.tsx
|
|
3189
|
-
var
|
|
3178
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3190
3179
|
var TableBannerWrapper = import_styled_components15.default.div`
|
|
3191
3180
|
display: flex;
|
|
3192
3181
|
align-items: center;
|
|
@@ -3206,79 +3195,62 @@ function TableBanner({
|
|
|
3206
3195
|
tableCaption,
|
|
3207
3196
|
globalFilter
|
|
3208
3197
|
}) {
|
|
3209
|
-
var _a;
|
|
3210
|
-
return /* @__PURE__ */ (0,
|
|
3211
|
-
className: "--
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
/* @__PURE__ */ (0,
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnSelect, {
|
|
3236
|
-
table
|
|
3237
|
-
}),
|
|
3238
|
-
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", {
|
|
3239
|
-
children: [
|
|
3240
|
-
table.options.data.length.toLocaleString(),
|
|
3241
|
-
" /",
|
|
3242
|
-
" ",
|
|
3243
|
-
bannerConfig.totalRowCount.toLocaleString(),
|
|
3244
|
-
" rows"
|
|
3245
|
-
]
|
|
3246
|
-
})
|
|
3247
|
-
]
|
|
3248
|
-
})
|
|
3249
|
-
})
|
|
3250
|
-
]
|
|
3251
|
-
});
|
|
3198
|
+
var _a, _b;
|
|
3199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
|
|
3200
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, { className: "--filter-container-left", children: [
|
|
3201
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, { variant: "h3", as: "h2", children: tableCaption }),
|
|
3202
|
+
(_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
|
|
3203
|
+
] }),
|
|
3204
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3205
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3206
|
+
DebouncedInput,
|
|
3207
|
+
{
|
|
3208
|
+
value: globalFilter.state,
|
|
3209
|
+
icon: import_eds_icons7.search,
|
|
3210
|
+
placeholder: (_b = bannerConfig.globalFilterPlaceholder) != null ? _b : "Search all columns",
|
|
3211
|
+
onChange: (value) => globalFilter.onChange(String(value))
|
|
3212
|
+
}
|
|
3213
|
+
),
|
|
3214
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, { table }),
|
|
3215
|
+
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { children: [
|
|
3216
|
+
table.options.data.length.toLocaleString(),
|
|
3217
|
+
" /",
|
|
3218
|
+
" ",
|
|
3219
|
+
bannerConfig.totalRowCount.toLocaleString(),
|
|
3220
|
+
" rows"
|
|
3221
|
+
] })
|
|
3222
|
+
] }) })
|
|
3223
|
+
] });
|
|
3252
3224
|
}
|
|
3253
3225
|
|
|
3254
3226
|
// src/DataTable/components/VirtualTable.tsx
|
|
3255
|
-
var
|
|
3227
|
+
var import_eds_core_react19 = require("@equinor/eds-core-react");
|
|
3256
3228
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
3257
3229
|
|
|
3258
3230
|
// src/DataTable/components/PaddingRow.tsx
|
|
3259
|
-
var
|
|
3260
|
-
var
|
|
3231
|
+
var import_eds_core_react18 = require("@equinor/eds-core-react");
|
|
3232
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3261
3233
|
var PaddingRow = (props) => {
|
|
3262
3234
|
if (!props.height)
|
|
3263
3235
|
return null;
|
|
3264
|
-
return /* @__PURE__ */ (0,
|
|
3265
|
-
style: { pointerEvents: "none" },
|
|
3266
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Cell, {
|
|
3267
|
-
style: { height: `${props.height}px` }
|
|
3268
|
-
})
|
|
3269
|
-
});
|
|
3236
|
+
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` } }) });
|
|
3270
3237
|
};
|
|
3271
3238
|
|
|
3272
3239
|
// src/DataTable/components/VirtualTable.tsx
|
|
3273
|
-
var
|
|
3274
|
-
function VirtualTable({
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
}
|
|
3281
|
-
|
|
3240
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3241
|
+
function VirtualTable(_a) {
|
|
3242
|
+
var _b = _a, {
|
|
3243
|
+
table,
|
|
3244
|
+
rowConfig,
|
|
3245
|
+
cellConfig,
|
|
3246
|
+
containerRef
|
|
3247
|
+
} = _b, props = __objRest(_b, [
|
|
3248
|
+
"table",
|
|
3249
|
+
"rowConfig",
|
|
3250
|
+
"cellConfig",
|
|
3251
|
+
"containerRef"
|
|
3252
|
+
]);
|
|
3253
|
+
var _a2, _b2;
|
|
3282
3254
|
const { rows } = table.getRowModel();
|
|
3283
3255
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
3284
3256
|
count: rows.length,
|
|
@@ -3288,42 +3260,30 @@ function VirtualTable({
|
|
|
3288
3260
|
overscan: 20
|
|
3289
3261
|
});
|
|
3290
3262
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
3291
|
-
const paddingTop = virtualRows.length > 0 ? ((
|
|
3292
|
-
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((
|
|
3293
|
-
return /* @__PURE__ */ (0,
|
|
3294
|
-
children:
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
measureElement: rowVirtualizer.measureElement
|
|
3316
|
-
}, row.id);
|
|
3317
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
|
|
3318
|
-
isLoading: props.isLoading
|
|
3319
|
-
}),
|
|
3320
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
|
|
3321
|
-
height: paddingBottom
|
|
3322
|
-
})
|
|
3323
|
-
]
|
|
3324
|
-
})
|
|
3325
|
-
]
|
|
3326
|
-
});
|
|
3263
|
+
const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
|
|
3264
|
+
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
|
|
3265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { children: [
|
|
3266
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, { hidden: true, children: props.tableCaption }),
|
|
3267
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, { sticky: props.stickyHeader, table }),
|
|
3268
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingTop }),
|
|
3270
|
+
rows.length ? virtualRows.map((virtualRow) => {
|
|
3271
|
+
const row = rows[virtualRow.index];
|
|
3272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3273
|
+
TableRow,
|
|
3274
|
+
{
|
|
3275
|
+
row,
|
|
3276
|
+
rowConfig,
|
|
3277
|
+
cellConfig,
|
|
3278
|
+
index: virtualRow.index,
|
|
3279
|
+
measureElement: rowVirtualizer.measureElement
|
|
3280
|
+
},
|
|
3281
|
+
row.id
|
|
3282
|
+
);
|
|
3283
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { isLoading: props.isLoading }),
|
|
3284
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingBottom })
|
|
3285
|
+
] })
|
|
3286
|
+
] });
|
|
3327
3287
|
}
|
|
3328
3288
|
|
|
3329
3289
|
// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
|
|
@@ -3363,7 +3323,7 @@ function useForceRerender() {
|
|
|
3363
3323
|
}
|
|
3364
3324
|
|
|
3365
3325
|
// src/DataTable/DataTable.tsx
|
|
3366
|
-
var
|
|
3326
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3367
3327
|
function canUseContainStrict(height) {
|
|
3368
3328
|
if (!height)
|
|
3369
3329
|
return false;
|
|
@@ -3376,10 +3336,16 @@ function canUseContainStrict(height) {
|
|
|
3376
3336
|
return true;
|
|
3377
3337
|
}
|
|
3378
3338
|
var DataTableWrapper = import_styled_components16.default.div`
|
|
3379
|
-
width: ${(props) =>
|
|
3339
|
+
width: ${(props) => {
|
|
3340
|
+
var _a;
|
|
3341
|
+
return (_a = props.width) != null ? _a : "100%";
|
|
3342
|
+
}};
|
|
3380
3343
|
|
|
3381
3344
|
.--table-container {
|
|
3382
|
-
height: ${(props) =>
|
|
3345
|
+
height: ${(props) => {
|
|
3346
|
+
var _a;
|
|
3347
|
+
return (_a = props.height) != null ? _a : "100%";
|
|
3348
|
+
}};
|
|
3383
3349
|
width: '100%';
|
|
3384
3350
|
overflow: auto;
|
|
3385
3351
|
${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
|
|
@@ -3389,41 +3355,44 @@ var DataTableWrapper = import_styled_components16.default.div`
|
|
|
3389
3355
|
|
|
3390
3356
|
// The following attribute is important for fixed column width
|
|
3391
3357
|
// CHANGE THIS WITH CAUTION
|
|
3392
|
-
table-layout: ${(props) =>
|
|
3358
|
+
table-layout: ${(props) => {
|
|
3359
|
+
var _a;
|
|
3360
|
+
return (_a = props.tableLayout) != null ? _a : "auto";
|
|
3361
|
+
}};
|
|
3393
3362
|
}
|
|
3394
3363
|
}
|
|
3395
3364
|
`;
|
|
3396
3365
|
function DataTable(props) {
|
|
3397
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
3366
|
+
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;
|
|
3398
3367
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
3399
3368
|
const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
|
|
3400
3369
|
const [columnVisibility, setColumnVisibility] = [
|
|
3401
|
-
((_a = props.columnVisibility) == null ? void 0 : _a.state)
|
|
3402
|
-
((
|
|
3370
|
+
(_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
|
|
3371
|
+
(_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
|
|
3403
3372
|
];
|
|
3404
3373
|
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
|
|
3405
3374
|
const [globalFilterState, setGlobalFilterState] = [
|
|
3406
|
-
((
|
|
3407
|
-
((
|
|
3375
|
+
(_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
|
|
3376
|
+
(_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
|
|
3408
3377
|
];
|
|
3409
|
-
const shouldEnableGlobalFilter = ((
|
|
3378
|
+
const shouldEnableGlobalFilter = ((_i = props.bannerConfig) == null ? void 0 : _i.enableGlobalFilterInput) || Boolean(props.globalFilter);
|
|
3410
3379
|
function enableGlobalFilter(value) {
|
|
3411
3380
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
3412
3381
|
}
|
|
3413
3382
|
const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
|
|
3414
3383
|
const [sortingState, setSortingState] = [
|
|
3415
|
-
((
|
|
3416
|
-
((
|
|
3384
|
+
(_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
|
|
3385
|
+
(_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
|
|
3417
3386
|
];
|
|
3418
3387
|
const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
|
|
3419
3388
|
const [rowSelectionState, setRowSelectionState] = [
|
|
3420
|
-
((
|
|
3421
|
-
((
|
|
3389
|
+
(_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
|
|
3390
|
+
(_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
|
|
3422
3391
|
];
|
|
3423
3392
|
const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
|
|
3424
3393
|
const [expandedState, setExpandedState] = [
|
|
3425
|
-
((
|
|
3426
|
-
((
|
|
3394
|
+
(_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
|
|
3395
|
+
(_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
|
|
3427
3396
|
];
|
|
3428
3397
|
const table = (0, import_react_table3.useReactTable)({
|
|
3429
3398
|
columns: prependSelectColumn(columns, props.rowSelection),
|
|
@@ -3432,25 +3401,23 @@ function DataTable(props) {
|
|
|
3432
3401
|
state: {
|
|
3433
3402
|
expanded: expandedState,
|
|
3434
3403
|
globalFilter: enableGlobalFilter(globalFilterState),
|
|
3435
|
-
sorting: ((
|
|
3404
|
+
sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
|
|
3436
3405
|
rowSelection: rowSelectionState,
|
|
3437
3406
|
columnVisibility
|
|
3438
3407
|
},
|
|
3439
3408
|
defaultColumn: {
|
|
3440
3409
|
cell: ({ cell }) => {
|
|
3441
3410
|
const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
|
|
3442
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
-
truncate: truncateMode === "hover",
|
|
3444
|
-
enableShowAllOnHover: true,
|
|
3445
|
-
children: cell.getValue()
|
|
3446
|
-
});
|
|
3411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, { truncate: truncateMode === "hover", enableShowAllOnHover: true, children: cell.getValue() });
|
|
3447
3412
|
}
|
|
3448
3413
|
},
|
|
3414
|
+
enableColumnResizing: Boolean(props.columnResizing),
|
|
3415
|
+
columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
|
|
3449
3416
|
enableSorting: sorting == null ? void 0 : sorting.enableSorting,
|
|
3450
3417
|
manualSorting: sorting == null ? void 0 : sorting.manualSorting,
|
|
3451
3418
|
enableExpanding: Boolean(props.expansion),
|
|
3452
|
-
enableMultiRowSelection: ((
|
|
3453
|
-
enableSubRowSelection: ((
|
|
3419
|
+
enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
|
|
3420
|
+
enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
|
|
3454
3421
|
filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
|
|
3455
3422
|
getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
|
|
3456
3423
|
getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
|
|
@@ -3458,7 +3425,7 @@ function DataTable(props) {
|
|
|
3458
3425
|
getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
|
|
3459
3426
|
onExpandedChange: setExpandedState,
|
|
3460
3427
|
onRowSelectionChange: setRowSelectionState,
|
|
3461
|
-
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange)
|
|
3428
|
+
onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
|
|
3462
3429
|
onColumnVisibilityChange: setColumnVisibility,
|
|
3463
3430
|
onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
|
|
3464
3431
|
getSubRows: props == null ? void 0 : props.getSubRows,
|
|
@@ -3469,7 +3436,7 @@ function DataTable(props) {
|
|
|
3469
3436
|
if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
|
|
3470
3437
|
table.toggleAllRowsExpanded();
|
|
3471
3438
|
}
|
|
3472
|
-
}, [table, (
|
|
3439
|
+
}, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
|
|
3473
3440
|
const { isLoading, rowConfig } = props;
|
|
3474
3441
|
const tableContainerRef = (0, import_react7.useRef)(null);
|
|
3475
3442
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
@@ -3481,21 +3448,21 @@ function DataTable(props) {
|
|
|
3481
3448
|
if (Boolean(tableContainerRef.current))
|
|
3482
3449
|
forceRerender();
|
|
3483
3450
|
}, [tableContainerRef.current === null]);
|
|
3484
|
-
return /* @__PURE__ */ (0,
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
children: [
|
|
3489
|
-
props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableBanner, {
|
|
3451
|
+
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: [
|
|
3452
|
+
props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3453
|
+
TableBanner,
|
|
3454
|
+
{
|
|
3490
3455
|
table,
|
|
3491
3456
|
bannerConfig: props.bannerConfig,
|
|
3492
3457
|
globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
|
|
3493
3458
|
tableCaption: props.tableCaption
|
|
3494
|
-
}
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3459
|
+
}
|
|
3460
|
+
),
|
|
3461
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3462
|
+
"div",
|
|
3463
|
+
__spreadProps(__spreadValues({}, props.tableContainerProps), {
|
|
3464
|
+
className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
|
|
3465
|
+
onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
|
|
3499
3466
|
ref: (node) => {
|
|
3500
3467
|
var _a2;
|
|
3501
3468
|
if (node) {
|
|
@@ -3505,29 +3472,35 @@ function DataTable(props) {
|
|
|
3505
3472
|
}
|
|
3506
3473
|
}
|
|
3507
3474
|
},
|
|
3508
|
-
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0,
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3475
|
+
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3476
|
+
VirtualTable,
|
|
3477
|
+
{
|
|
3478
|
+
containerRef: tableContainerRef,
|
|
3479
|
+
tableCaption: props.tableCaption,
|
|
3480
|
+
table,
|
|
3481
|
+
rowConfig,
|
|
3482
|
+
cellConfig,
|
|
3483
|
+
isLoading,
|
|
3484
|
+
stickyHeader: props.stickyHeader
|
|
3485
|
+
}
|
|
3486
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3487
|
+
BasicTable,
|
|
3488
|
+
{
|
|
3489
|
+
tableCaption: props.tableCaption,
|
|
3490
|
+
table,
|
|
3491
|
+
rowConfig,
|
|
3492
|
+
cellConfig,
|
|
3493
|
+
isLoading,
|
|
3494
|
+
stickyHeader: props.stickyHeader
|
|
3495
|
+
}
|
|
3496
|
+
)
|
|
3524
3497
|
})
|
|
3525
|
-
|
|
3526
|
-
});
|
|
3498
|
+
)
|
|
3499
|
+
] });
|
|
3527
3500
|
}
|
|
3528
3501
|
|
|
3529
3502
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
3530
|
-
var
|
|
3503
|
+
var import_eds_core_react20 = require("@equinor/eds-core-react");
|
|
3531
3504
|
var import_react_hook_form2 = require("react-hook-form");
|
|
3532
3505
|
|
|
3533
3506
|
// src/form-meta/utils.tsx
|
|
@@ -3539,16 +3512,21 @@ var formMeta = {
|
|
|
3539
3512
|
_hasRemoteChange: false
|
|
3540
3513
|
};
|
|
3541
3514
|
function useEditMode() {
|
|
3515
|
+
var _a;
|
|
3542
3516
|
const { watch } = (0, import_react_hook_form.useFormContext)();
|
|
3543
|
-
return watch("_editMode")
|
|
3517
|
+
return (_a = watch("_editMode")) != null ? _a : false;
|
|
3544
3518
|
}
|
|
3545
3519
|
function useHasRemoteChange() {
|
|
3520
|
+
var _a;
|
|
3546
3521
|
const { watch } = (0, import_react_hook_form.useFormContext)();
|
|
3547
|
-
return watch("_hasRemoteChange")
|
|
3522
|
+
return (_a = watch("_hasRemoteChange")) != null ? _a : false;
|
|
3548
3523
|
}
|
|
3549
3524
|
function useGetIsNew() {
|
|
3550
3525
|
const { getValues } = (0, import_react_hook_form.useFormContext)();
|
|
3551
|
-
return () =>
|
|
3526
|
+
return () => {
|
|
3527
|
+
var _a;
|
|
3528
|
+
return (_a = getValues("_isNew")) != null ? _a : false;
|
|
3529
|
+
};
|
|
3552
3530
|
}
|
|
3553
3531
|
function useSetFormMeta() {
|
|
3554
3532
|
const { setValue } = (0, import_react_hook_form.useFormContext)();
|
|
@@ -3561,42 +3539,46 @@ function removeFormMeta(withFormMeta) {
|
|
|
3561
3539
|
return (0, import_omit.default)(withFormMeta, Object.keys(formMeta));
|
|
3562
3540
|
}
|
|
3563
3541
|
function addFormMeta(withoutFormMeta) {
|
|
3564
|
-
return {
|
|
3542
|
+
return __spreadValues(__spreadValues({}, formMeta), withoutFormMeta);
|
|
3565
3543
|
}
|
|
3566
3544
|
|
|
3567
3545
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
3568
|
-
var
|
|
3546
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3569
3547
|
function EditableCheckboxCell(context) {
|
|
3570
3548
|
const editMode = useEditMode();
|
|
3571
3549
|
if (!editMode)
|
|
3572
|
-
return /* @__PURE__ */ (0,
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3551
|
+
import_eds_core_react20.Checkbox,
|
|
3552
|
+
{
|
|
3553
|
+
enterKeyHint: "next",
|
|
3554
|
+
"aria-label": "readonly",
|
|
3555
|
+
readOnly: true,
|
|
3556
|
+
checked: context.getValue(),
|
|
3557
|
+
disabled: true
|
|
3558
|
+
}
|
|
3559
|
+
);
|
|
3560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3561
|
+
import_react_hook_form2.Controller,
|
|
3562
|
+
{
|
|
3563
|
+
name: context.column.id,
|
|
3564
|
+
render: (_a) => {
|
|
3565
|
+
var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
|
|
3566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
);
|
|
3588
3570
|
}
|
|
3589
3571
|
|
|
3590
3572
|
// src/form-cells/EditableDateCell.tsx
|
|
3591
|
-
var
|
|
3573
|
+
var import_eds_core_react22 = require("@equinor/eds-core-react");
|
|
3592
3574
|
var import_react8 = require("react");
|
|
3593
3575
|
var import_react_hook_form3 = require("react-hook-form");
|
|
3594
3576
|
var import_styled_components17 = __toESM(require("styled-components"));
|
|
3595
3577
|
|
|
3596
3578
|
// src/form-cells/utils.tsx
|
|
3597
|
-
var
|
|
3579
|
+
var import_eds_core_react21 = require("@equinor/eds-core-react");
|
|
3598
3580
|
var import_eds_icons8 = require("@equinor/eds-icons");
|
|
3599
|
-
var
|
|
3581
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3600
3582
|
function getHelperTextProps({
|
|
3601
3583
|
error,
|
|
3602
3584
|
warning,
|
|
@@ -3606,19 +3588,13 @@ function getHelperTextProps({
|
|
|
3606
3588
|
return {
|
|
3607
3589
|
variant: "error",
|
|
3608
3590
|
helperText: error.message,
|
|
3609
|
-
helperIcon: /* @__PURE__ */ (0,
|
|
3610
|
-
data: import_eds_icons8.error_filled,
|
|
3611
|
-
size: 16
|
|
3612
|
-
})
|
|
3591
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.error_filled, size: 16 })
|
|
3613
3592
|
};
|
|
3614
3593
|
if (warning)
|
|
3615
3594
|
return {
|
|
3616
3595
|
variant: "warning",
|
|
3617
3596
|
helperText: warning.message,
|
|
3618
|
-
helperIcon: /* @__PURE__ */ (0,
|
|
3619
|
-
data: import_eds_icons8.warning_filled,
|
|
3620
|
-
size: 16
|
|
3621
|
-
})
|
|
3597
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.warning_filled, size: 16 })
|
|
3622
3598
|
};
|
|
3623
3599
|
return {
|
|
3624
3600
|
helperText,
|
|
@@ -3633,32 +3609,39 @@ function stopPropagation2(handler) {
|
|
|
3633
3609
|
}
|
|
3634
3610
|
|
|
3635
3611
|
// src/form-cells/EditableDateCell.tsx
|
|
3636
|
-
var
|
|
3612
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3637
3613
|
function EditableDateCell(props) {
|
|
3638
|
-
const { dateStringFormatter,
|
|
3614
|
+
const _a = props, { dateStringFormatter } = _a, context = __objRest(_a, ["dateStringFormatter"]);
|
|
3639
3615
|
const rawValue = context.getValue();
|
|
3640
3616
|
const editMode = useEditMode();
|
|
3641
3617
|
const formattedValue = (0, import_react8.useMemo)(
|
|
3642
|
-
() =>
|
|
3618
|
+
() => {
|
|
3619
|
+
var _a2;
|
|
3620
|
+
return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
|
|
3621
|
+
},
|
|
3643
3622
|
[rawValue, dateStringFormatter]
|
|
3644
3623
|
);
|
|
3645
3624
|
if (!editMode)
|
|
3646
|
-
return /* @__PURE__ */ (0,
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
|
|
3650
|
-
|
|
3651
|
-
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, { truncate: true, children: formattedValue });
|
|
3626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3627
|
+
import_react_hook_form3.Controller,
|
|
3628
|
+
{
|
|
3629
|
+
name: context.column.id,
|
|
3630
|
+
render: (_b) => {
|
|
3631
|
+
var _c = _b, { field: _d } = _c, _e = _d, { value, onChange } = _e, field = __objRest(_e, ["value", "onChange"]), { fieldState: { error } } = _c;
|
|
3632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3633
|
+
InlineTextField,
|
|
3634
|
+
__spreadValues(__spreadValues({
|
|
3635
|
+
id: context.column.id,
|
|
3636
|
+
type: "date",
|
|
3637
|
+
autoComplete: "none",
|
|
3638
|
+
value: value ? parseISODate(value) : "",
|
|
3639
|
+
onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
|
|
3640
|
+
}, getHelperTextProps({ error })), field)
|
|
3641
|
+
);
|
|
3642
|
+
}
|
|
3643
|
+
}
|
|
3644
|
+
);
|
|
3662
3645
|
}
|
|
3663
3646
|
function parseISODate(dateString) {
|
|
3664
3647
|
const date = new Date(dateString);
|
|
@@ -3666,7 +3649,7 @@ function parseISODate(dateString) {
|
|
|
3666
3649
|
const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1e3);
|
|
3667
3650
|
return dateWithoutOffset.toISOString().split("T")[0];
|
|
3668
3651
|
}
|
|
3669
|
-
var InlineTextField = (0, import_styled_components17.default)(
|
|
3652
|
+
var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react22.TextField)`
|
|
3670
3653
|
/*
|
|
3671
3654
|
TODO: Improve input based on feedback from UX
|
|
3672
3655
|
& > div {
|
|
@@ -3690,69 +3673,78 @@ var InlineTextField = (0, import_styled_components17.default)(import_eds_core_re
|
|
|
3690
3673
|
`;
|
|
3691
3674
|
|
|
3692
3675
|
// src/form-cells/EditableDropdownSingleCell.tsx
|
|
3693
|
-
var
|
|
3676
|
+
var import_eds_core_react23 = require("@equinor/eds-core-react");
|
|
3694
3677
|
var import_react_hook_form4 = require("react-hook-form");
|
|
3695
|
-
var
|
|
3678
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3696
3679
|
function buildEmptyOption() {
|
|
3697
3680
|
return { label: "", value: "" };
|
|
3698
3681
|
}
|
|
3699
3682
|
function EditableDropdownSingleCell(props) {
|
|
3700
|
-
const { options,
|
|
3683
|
+
const _a = props, { options } = _a, context = __objRest(_a, ["options"]);
|
|
3701
3684
|
const editMode = useEditMode();
|
|
3702
3685
|
if (!editMode)
|
|
3703
|
-
return /* @__PURE__ */ (0,
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3688
|
+
import_react_hook_form4.Controller,
|
|
3689
|
+
{
|
|
3690
|
+
name: context.column.id,
|
|
3691
|
+
render: (_b) => {
|
|
3692
|
+
var { field: _c } = _b, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]);
|
|
3693
|
+
var _a2;
|
|
3694
|
+
const selectedOption = (_a2 = options.find((option) => option.value === value)) != null ? _a2 : buildEmptyOption();
|
|
3695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3696
|
+
import_eds_core_react23.Autocomplete,
|
|
3697
|
+
__spreadValues({
|
|
3698
|
+
label: "",
|
|
3699
|
+
selectedOptions: selectedOption && [selectedOption],
|
|
3700
|
+
options,
|
|
3701
|
+
optionLabel: (option) => {
|
|
3702
|
+
var _a3;
|
|
3703
|
+
return (_a3 = option == null ? void 0 : option.label) != null ? _a3 : "";
|
|
3704
|
+
},
|
|
3705
|
+
"aria-required": true,
|
|
3706
|
+
hideClearButton: true,
|
|
3707
|
+
"aria-autocomplete": "none",
|
|
3708
|
+
onOptionsChange: (changes) => {
|
|
3709
|
+
const [change] = changes.selectedItems;
|
|
3710
|
+
onChange(change == null ? void 0 : change.value);
|
|
3711
|
+
}
|
|
3712
|
+
}, field)
|
|
3713
|
+
);
|
|
3714
|
+
}
|
|
3725
3715
|
}
|
|
3726
|
-
|
|
3716
|
+
);
|
|
3727
3717
|
}
|
|
3728
3718
|
|
|
3729
3719
|
// src/form-cells/EditableNumberCell.tsx
|
|
3730
|
-
var
|
|
3720
|
+
var import_eds_core_react24 = require("@equinor/eds-core-react");
|
|
3731
3721
|
var import_react_hook_form5 = require("react-hook-form");
|
|
3732
3722
|
var import_styled_components18 = __toESM(require("styled-components"));
|
|
3733
|
-
var
|
|
3723
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3734
3724
|
function EditableNumberCell(context) {
|
|
3735
3725
|
const editMode = useEditMode();
|
|
3736
3726
|
if (!editMode)
|
|
3737
|
-
return /* @__PURE__ */ (0,
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3729
|
+
import_react_hook_form5.Controller,
|
|
3730
|
+
{
|
|
3731
|
+
name: context.column.id,
|
|
3732
|
+
render: (_a) => {
|
|
3733
|
+
var _b = _a, { field: _c } = _b, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b;
|
|
3734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3735
|
+
InlineTextField2,
|
|
3736
|
+
__spreadValues(__spreadValues({
|
|
3737
|
+
id: context.column.id,
|
|
3738
|
+
type: "number",
|
|
3739
|
+
autoComplete: "none",
|
|
3740
|
+
onChange: (e) => onChange(e.target.valueAsNumber)
|
|
3741
|
+
}, field), getHelperTextProps({ error }))
|
|
3742
|
+
) });
|
|
3743
|
+
}
|
|
3744
|
+
}
|
|
3745
|
+
);
|
|
3754
3746
|
}
|
|
3755
|
-
var InlineTextField2 = (0, import_styled_components18.default)(
|
|
3747
|
+
var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react24.TextField)`
|
|
3756
3748
|
/*
|
|
3757
3749
|
TODO: Improve input based on feedback from UX
|
|
3758
3750
|
& > div {
|
|
@@ -3776,112 +3768,111 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
|
|
|
3776
3768
|
`;
|
|
3777
3769
|
|
|
3778
3770
|
// src/form-cells/EditableTextAreaCell.tsx
|
|
3779
|
-
var
|
|
3771
|
+
var import_eds_core_react25 = require("@equinor/eds-core-react");
|
|
3780
3772
|
var import_eds_icons9 = require("@equinor/eds-icons");
|
|
3781
3773
|
var import_react9 = require("react");
|
|
3782
3774
|
var import_react_hook_form6 = require("react-hook-form");
|
|
3783
3775
|
var import_styled_components19 = __toESM(require("styled-components"));
|
|
3784
|
-
var
|
|
3776
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3785
3777
|
function EditableTextAreaCell(props) {
|
|
3786
|
-
const { title,
|
|
3778
|
+
const _a = props, { title } = _a, context = __objRest(_a, ["title"]);
|
|
3787
3779
|
const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
|
|
3788
3780
|
const [open, setOpen] = (0, import_react9.useState)(false);
|
|
3789
3781
|
const editMode = useEditMode();
|
|
3790
3782
|
const name = context.column.id;
|
|
3791
3783
|
if (!editMode)
|
|
3792
|
-
return /* @__PURE__ */ (0,
|
|
3793
|
-
id: name + "popover",
|
|
3794
|
-
value: context.getValue(),
|
|
3795
|
-
title
|
|
3796
|
-
});
|
|
3784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, { id: name + "popover", value: context.getValue(), title });
|
|
3797
3785
|
const openDialog = () => setOpen(true);
|
|
3798
3786
|
const closeDialog = () => setOpen(false);
|
|
3799
|
-
return /* @__PURE__ */ (0,
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
...field,
|
|
3815
|
-
...getHelperTextProps({ error })
|
|
3816
|
-
}),
|
|
3817
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, {
|
|
3818
|
-
variant: "ghost_icon",
|
|
3819
|
-
onClick: stopPropagation2(openDialog),
|
|
3820
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Icon, {
|
|
3821
|
-
data: import_eds_icons9.arrow_up,
|
|
3822
|
-
size: 24,
|
|
3823
|
-
style: { transform: "rotateZ(45deg)" }
|
|
3824
|
-
})
|
|
3825
|
-
})
|
|
3826
|
-
]
|
|
3827
|
-
}),
|
|
3828
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog, {
|
|
3829
|
-
open,
|
|
3830
|
-
onClose: () => {
|
|
3831
|
-
closeDialog();
|
|
3832
|
-
onChange(textareaValue);
|
|
3833
|
-
},
|
|
3834
|
-
isDismissable: true,
|
|
3835
|
-
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3836
|
-
children: [
|
|
3837
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Header, {
|
|
3838
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Title, {
|
|
3839
|
-
children: title
|
|
3840
|
-
})
|
|
3841
|
-
}),
|
|
3842
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Content, {
|
|
3843
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.TextField, {
|
|
3844
|
-
style: {
|
|
3845
|
-
maxWidth: "100%",
|
|
3846
|
-
marginTop: "1rem"
|
|
3847
|
-
},
|
|
3848
|
-
id: field.name + "modal",
|
|
3849
|
-
multiline: true,
|
|
3850
|
-
rows: 8,
|
|
3851
|
-
name: field.name + "modal",
|
|
3852
|
-
value: textareaValue,
|
|
3853
|
-
onChange: (e) => {
|
|
3854
|
-
setTextareaValue(e.target.value);
|
|
3855
|
-
}
|
|
3856
|
-
})
|
|
3857
|
-
}),
|
|
3858
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog.Actions, {
|
|
3859
|
-
style: { display: "flex", gap: "1rem" },
|
|
3787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3788
|
+
import_react_hook_form6.Controller,
|
|
3789
|
+
{
|
|
3790
|
+
name,
|
|
3791
|
+
render: (_b) => {
|
|
3792
|
+
var _c = _b, { field: _d } = _c, _e = _d, { onChange, ref } = _e, field = __objRest(_e, ["onChange", "ref"]), { fieldState: { error } } = _c;
|
|
3793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
3794
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3795
|
+
"div",
|
|
3796
|
+
{
|
|
3797
|
+
style: {
|
|
3798
|
+
display: "flex",
|
|
3799
|
+
alignItems: "center",
|
|
3800
|
+
position: "relative"
|
|
3801
|
+
},
|
|
3860
3802
|
children: [
|
|
3861
|
-
/* @__PURE__ */ (0,
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
onClick: () => {
|
|
3871
|
-
closeDialog();
|
|
3872
|
-
setTextareaValue(context.getValue());
|
|
3873
|
-
},
|
|
3874
|
-
children: "Cancel"
|
|
3875
|
-
})
|
|
3803
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3804
|
+
StyledTextField,
|
|
3805
|
+
__spreadValues(__spreadValues({
|
|
3806
|
+
id: field.name,
|
|
3807
|
+
onChange,
|
|
3808
|
+
ref
|
|
3809
|
+
}, field), getHelperTextProps({ error }))
|
|
3810
|
+
),
|
|
3811
|
+
/* @__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)" } }) })
|
|
3876
3812
|
]
|
|
3877
|
-
}
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3813
|
+
}
|
|
3814
|
+
),
|
|
3815
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3816
|
+
import_eds_core_react25.Dialog,
|
|
3817
|
+
{
|
|
3818
|
+
open,
|
|
3819
|
+
onClose: () => {
|
|
3820
|
+
closeDialog();
|
|
3821
|
+
onChange(textareaValue);
|
|
3822
|
+
},
|
|
3823
|
+
isDismissable: true,
|
|
3824
|
+
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3825
|
+
children: [
|
|
3826
|
+
/* @__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 }) }),
|
|
3827
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3828
|
+
import_eds_core_react25.TextField,
|
|
3829
|
+
{
|
|
3830
|
+
style: {
|
|
3831
|
+
maxWidth: "100%",
|
|
3832
|
+
marginTop: "1rem"
|
|
3833
|
+
},
|
|
3834
|
+
id: field.name + "modal",
|
|
3835
|
+
multiline: true,
|
|
3836
|
+
rows: 8,
|
|
3837
|
+
name: field.name + "modal",
|
|
3838
|
+
value: textareaValue,
|
|
3839
|
+
onChange: (e) => {
|
|
3840
|
+
setTextareaValue(e.target.value);
|
|
3841
|
+
}
|
|
3842
|
+
}
|
|
3843
|
+
) }),
|
|
3844
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, { style: { display: "flex", gap: "1rem" }, children: [
|
|
3845
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3846
|
+
import_eds_core_react25.Button,
|
|
3847
|
+
{
|
|
3848
|
+
onClick: () => {
|
|
3849
|
+
closeDialog();
|
|
3850
|
+
onChange(textareaValue);
|
|
3851
|
+
},
|
|
3852
|
+
children: "Submit"
|
|
3853
|
+
}
|
|
3854
|
+
),
|
|
3855
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3856
|
+
import_eds_core_react25.Button,
|
|
3857
|
+
{
|
|
3858
|
+
variant: "ghost",
|
|
3859
|
+
onClick: () => {
|
|
3860
|
+
closeDialog();
|
|
3861
|
+
setTextareaValue(context.getValue());
|
|
3862
|
+
},
|
|
3863
|
+
children: "Cancel"
|
|
3864
|
+
}
|
|
3865
|
+
)
|
|
3866
|
+
] })
|
|
3867
|
+
]
|
|
3868
|
+
}
|
|
3869
|
+
)
|
|
3870
|
+
] });
|
|
3871
|
+
}
|
|
3872
|
+
}
|
|
3873
|
+
);
|
|
3883
3874
|
}
|
|
3884
|
-
var StyledTextField = (0, import_styled_components19.default)(
|
|
3875
|
+
var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react25.TextField)`
|
|
3885
3876
|
& input {
|
|
3886
3877
|
padding-right: 40px;
|
|
3887
3878
|
letter-spacing: 0;
|
|
@@ -3890,7 +3881,7 @@ var StyledTextField = (0, import_styled_components19.default)(import_eds_core_re
|
|
|
3890
3881
|
text-overflow: ellipsis;
|
|
3891
3882
|
}
|
|
3892
3883
|
`;
|
|
3893
|
-
var IconButton = (0, import_styled_components19.default)(
|
|
3884
|
+
var IconButton = (0, import_styled_components19.default)(import_eds_core_react25.Button)`
|
|
3894
3885
|
position: absolute;
|
|
3895
3886
|
height: 32px;
|
|
3896
3887
|
width: 32px;
|
|
@@ -3898,29 +3889,33 @@ var IconButton = (0, import_styled_components19.default)(import_eds_core_react24
|
|
|
3898
3889
|
`;
|
|
3899
3890
|
|
|
3900
3891
|
// src/form-cells/EditableTextFieldCell.tsx
|
|
3901
|
-
var
|
|
3892
|
+
var import_eds_core_react26 = require("@equinor/eds-core-react");
|
|
3902
3893
|
var import_react_hook_form7 = require("react-hook-form");
|
|
3903
3894
|
var import_styled_components20 = __toESM(require("styled-components"));
|
|
3904
|
-
var
|
|
3895
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3905
3896
|
function EditableTextFieldCell(context) {
|
|
3906
3897
|
const editMode = useEditMode();
|
|
3907
3898
|
if (!editMode)
|
|
3908
|
-
return /* @__PURE__ */ (0,
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
|
|
3900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3901
|
+
import_react_hook_form7.Controller,
|
|
3902
|
+
{
|
|
3903
|
+
name: context.column.id,
|
|
3904
|
+
render: (_a) => {
|
|
3905
|
+
var _b = _a, { field: _c } = _b, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b;
|
|
3906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3907
|
+
InlineTextField3,
|
|
3908
|
+
__spreadValues(__spreadValues({
|
|
3909
|
+
id: context.column.id,
|
|
3910
|
+
autoComplete: "none",
|
|
3911
|
+
value: String(value != null ? value : "")
|
|
3912
|
+
}, field), getHelperTextProps({ error }))
|
|
3913
|
+
);
|
|
3914
|
+
}
|
|
3915
|
+
}
|
|
3916
|
+
);
|
|
3922
3917
|
}
|
|
3923
|
-
var InlineTextField3 = (0, import_styled_components20.default)(
|
|
3918
|
+
var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react26.TextField)`
|
|
3924
3919
|
/*
|
|
3925
3920
|
TODO: Improve input based on feedback from UX
|
|
3926
3921
|
& > div {
|
|
@@ -3946,6 +3941,7 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
|
|
|
3946
3941
|
0 && (module.exports = {
|
|
3947
3942
|
AppShell,
|
|
3948
3943
|
AppSidebar,
|
|
3944
|
+
CheckboxCell,
|
|
3949
3945
|
ChipsCell,
|
|
3950
3946
|
ColumnSelect,
|
|
3951
3947
|
DataTable,
|