@equinor/apollo-components 3.1.7 → 3.1.8-cell.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 +4 -2
- package/dist/index.js +200 -185
- package/dist/index.mjs +148 -134
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2337,6 +2337,7 @@ var src_exports = {};
|
|
|
2337
2337
|
__export(src_exports, {
|
|
2338
2338
|
AppShell: () => AppShell,
|
|
2339
2339
|
AppSidebar: () => AppSidebar,
|
|
2340
|
+
CheckboxCell: () => CheckboxCell,
|
|
2340
2341
|
ChipsCell: () => ChipsCell,
|
|
2341
2342
|
ColumnSelect: () => ColumnSelect,
|
|
2342
2343
|
DataTable: () => DataTable,
|
|
@@ -2473,6 +2474,19 @@ function AppSidebar() {
|
|
|
2473
2474
|
});
|
|
2474
2475
|
}
|
|
2475
2476
|
|
|
2477
|
+
// src/cells/CheckboxCell.tsx
|
|
2478
|
+
var import_eds_core_react3 = require("@equinor/eds-core-react");
|
|
2479
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
2480
|
+
function CheckboxCell(context) {
|
|
2481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Checkbox, {
|
|
2482
|
+
enterKeyHint: "next",
|
|
2483
|
+
"aria-label": "readonly",
|
|
2484
|
+
readOnly: true,
|
|
2485
|
+
checked: context.getValue(),
|
|
2486
|
+
disabled: true
|
|
2487
|
+
});
|
|
2488
|
+
}
|
|
2489
|
+
|
|
2476
2490
|
// src/cells/ChipsCell.tsx
|
|
2477
2491
|
var import_eds_tokens2 = require("@equinor/eds-tokens");
|
|
2478
2492
|
var import_styled_components3 = __toESM(require("styled-components"));
|
|
@@ -2494,7 +2508,7 @@ function stopPropagation(handler) {
|
|
|
2494
2508
|
}
|
|
2495
2509
|
|
|
2496
2510
|
// src/cells/ChipsCell.tsx
|
|
2497
|
-
var
|
|
2511
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2498
2512
|
var ChipsWrapper = import_styled_components3.default.div`
|
|
2499
2513
|
display: flex;
|
|
2500
2514
|
align-items: center;
|
|
@@ -2513,8 +2527,8 @@ var Chip = import_styled_components3.default.div`
|
|
|
2513
2527
|
`;
|
|
2514
2528
|
var ChipsCell = (props) => {
|
|
2515
2529
|
var _a;
|
|
2516
|
-
return /* @__PURE__ */ (0,
|
|
2517
|
-
children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0,
|
|
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, {
|
|
2518
2532
|
backgroundColor: stringToHslColor(value),
|
|
2519
2533
|
children: value
|
|
2520
2534
|
}, value))
|
|
@@ -2522,12 +2536,12 @@ var ChipsCell = (props) => {
|
|
|
2522
2536
|
};
|
|
2523
2537
|
|
|
2524
2538
|
// src/cells/DynamicCell.tsx
|
|
2525
|
-
var
|
|
2539
|
+
var import_eds_core_react5 = require("@equinor/eds-core-react");
|
|
2526
2540
|
var import_react_table = require("@tanstack/react-table");
|
|
2527
2541
|
var import_styled_components5 = __toESM(require("styled-components"));
|
|
2528
2542
|
|
|
2529
2543
|
// src/cells/StickyCell.tsx
|
|
2530
|
-
var
|
|
2544
|
+
var import_eds_core_react4 = require("@equinor/eds-core-react");
|
|
2531
2545
|
var import_styled_components4 = __toESM(require("styled-components"));
|
|
2532
2546
|
var leftCellShadow = import_styled_components4.css`
|
|
2533
2547
|
&:before {
|
|
@@ -2540,7 +2554,7 @@ var leftCellShadow = import_styled_components4.css`
|
|
|
2540
2554
|
width: 1px;
|
|
2541
2555
|
}
|
|
2542
2556
|
`;
|
|
2543
|
-
var StickyCell = (0, import_styled_components4.default)(
|
|
2557
|
+
var StickyCell = (0, import_styled_components4.default)(import_eds_core_react4.Table.Cell)`
|
|
2544
2558
|
position: sticky;
|
|
2545
2559
|
right: 0;
|
|
2546
2560
|
top: 0;
|
|
@@ -2553,24 +2567,24 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
|
|
|
2553
2567
|
`;
|
|
2554
2568
|
|
|
2555
2569
|
// src/cells/DynamicCell.tsx
|
|
2556
|
-
var
|
|
2570
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2557
2571
|
var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
|
|
2558
2572
|
background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
|
|
2559
2573
|
`;
|
|
2560
|
-
var StyledCell = (0, import_styled_components5.default)(
|
|
2574
|
+
var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
|
|
2561
2575
|
background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
|
|
2562
2576
|
`;
|
|
2563
2577
|
function DynamicCell({ cell, highlight, getStickyCellColor }) {
|
|
2564
2578
|
var _a;
|
|
2565
2579
|
const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
|
|
2566
2580
|
if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2567
|
-
return /* @__PURE__ */ (0,
|
|
2581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, {
|
|
2568
2582
|
backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
|
|
2569
2583
|
"data-column": cell.column.id,
|
|
2570
2584
|
children: cellContent
|
|
2571
2585
|
});
|
|
2572
2586
|
}
|
|
2573
|
-
return /* @__PURE__ */ (0,
|
|
2587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, {
|
|
2574
2588
|
"data-column": cell.column.id,
|
|
2575
2589
|
backgroundColor: highlight ? "#d5eaf4" : void 0,
|
|
2576
2590
|
children: cellContent
|
|
@@ -2578,11 +2592,11 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
|
|
|
2578
2592
|
}
|
|
2579
2593
|
|
|
2580
2594
|
// src/cells/HeaderCell.tsx
|
|
2581
|
-
var
|
|
2595
|
+
var import_eds_core_react6 = require("@equinor/eds-core-react");
|
|
2582
2596
|
var import_eds_icons3 = require("@equinor/eds-icons");
|
|
2583
2597
|
var import_react_table2 = require("@tanstack/react-table");
|
|
2584
2598
|
var import_styled_components6 = __toESM(require("styled-components"));
|
|
2585
|
-
var
|
|
2599
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2586
2600
|
var HeaderDiv = import_styled_components6.default.div`
|
|
2587
2601
|
display: flex;
|
|
2588
2602
|
align-items: center;
|
|
@@ -2602,16 +2616,16 @@ var HeaderCell = ({ header }) => {
|
|
|
2602
2616
|
colSpan: header.colSpan
|
|
2603
2617
|
};
|
|
2604
2618
|
if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
|
|
2605
|
-
return /* @__PURE__ */ (0,
|
|
2619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyHeaderCell, {
|
|
2606
2620
|
...cellProps,
|
|
2607
|
-
children: /* @__PURE__ */ (0,
|
|
2621
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
|
|
2608
2622
|
header
|
|
2609
2623
|
})
|
|
2610
2624
|
}, header.id);
|
|
2611
2625
|
}
|
|
2612
|
-
return /* @__PURE__ */ (0,
|
|
2626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Table.Cell, {
|
|
2613
2627
|
...cellProps,
|
|
2614
|
-
children: /* @__PURE__ */ (0,
|
|
2628
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
|
|
2615
2629
|
header
|
|
2616
2630
|
})
|
|
2617
2631
|
}, header.id);
|
|
@@ -2619,17 +2633,17 @@ var HeaderCell = ({ header }) => {
|
|
|
2619
2633
|
function HeaderContent({ header }) {
|
|
2620
2634
|
if (header.isPlaceholder)
|
|
2621
2635
|
return null;
|
|
2622
|
-
return /* @__PURE__ */ (0,
|
|
2636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, {
|
|
2623
2637
|
children: [
|
|
2624
2638
|
(0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2625
2639
|
{
|
|
2626
|
-
asc: /* @__PURE__ */ (0,
|
|
2640
|
+
asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2627
2641
|
data: import_eds_icons3.arrow_drop_up
|
|
2628
2642
|
}),
|
|
2629
|
-
desc: /* @__PURE__ */ (0,
|
|
2643
|
+
desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2630
2644
|
data: import_eds_icons3.arrow_drop_down
|
|
2631
2645
|
}),
|
|
2632
|
-
none: /* @__PURE__ */ (0,
|
|
2646
|
+
none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
|
|
2633
2647
|
data: import_eds_icons3.arrow_drop_down
|
|
2634
2648
|
})
|
|
2635
2649
|
}[header.column.getIsSorted()] ?? null
|
|
@@ -2654,10 +2668,10 @@ var import_eds_tokens4 = require("@equinor/eds-tokens");
|
|
|
2654
2668
|
var import_styled_components8 = __toESM(require("styled-components"));
|
|
2655
2669
|
|
|
2656
2670
|
// src/cells/TypographyCustom.tsx
|
|
2657
|
-
var
|
|
2671
|
+
var import_eds_core_react7 = require("@equinor/eds-core-react");
|
|
2658
2672
|
var import_eds_tokens3 = require("@equinor/eds-tokens");
|
|
2659
2673
|
var import_styled_components7 = __toESM(require("styled-components"));
|
|
2660
|
-
var
|
|
2674
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2661
2675
|
var truncateStyle = {
|
|
2662
2676
|
overflow: "hidden",
|
|
2663
2677
|
whiteSpace: "nowrap",
|
|
@@ -2666,8 +2680,8 @@ var truncateStyle = {
|
|
|
2666
2680
|
var TypographyCustom = (props) => {
|
|
2667
2681
|
const { truncate, enableShowAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
|
|
2668
2682
|
if (enableShowAllOnHover)
|
|
2669
|
-
return /* @__PURE__ */ (0,
|
|
2670
|
-
children: /* @__PURE__ */ (0,
|
|
2683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HoverCapture, {
|
|
2684
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
|
|
2671
2685
|
...edsTypographyProps,
|
|
2672
2686
|
style: {
|
|
2673
2687
|
...styleFromProps,
|
|
@@ -2676,14 +2690,14 @@ var TypographyCustom = (props) => {
|
|
|
2676
2690
|
})
|
|
2677
2691
|
});
|
|
2678
2692
|
if (truncate)
|
|
2679
|
-
return /* @__PURE__ */ (0,
|
|
2693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
|
|
2680
2694
|
...edsTypographyProps,
|
|
2681
2695
|
style: {
|
|
2682
2696
|
...styleFromProps,
|
|
2683
2697
|
...truncateStyle
|
|
2684
2698
|
}
|
|
2685
2699
|
});
|
|
2686
|
-
return /* @__PURE__ */ (0,
|
|
2700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
|
|
2687
2701
|
...edsTypographyProps,
|
|
2688
2702
|
style: styleFromProps
|
|
2689
2703
|
});
|
|
@@ -2715,7 +2729,7 @@ var HoverCapture = import_styled_components7.default.div`
|
|
|
2715
2729
|
`;
|
|
2716
2730
|
|
|
2717
2731
|
// src/cells/HierarchyCell.tsx
|
|
2718
|
-
var
|
|
2732
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2719
2733
|
var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
|
|
2720
2734
|
height: 100%;
|
|
2721
2735
|
display: flex;
|
|
@@ -2736,11 +2750,11 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
|
|
|
2736
2750
|
`;
|
|
2737
2751
|
function HierarchyCell(cell, options = {}) {
|
|
2738
2752
|
var _a, _b;
|
|
2739
|
-
return /* @__PURE__ */ (0,
|
|
2753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CellWrapper, {
|
|
2740
2754
|
depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
|
|
2741
2755
|
expanded: cell.row.getIsExpanded(),
|
|
2742
2756
|
children: [
|
|
2743
|
-
/* @__PURE__ */ (0,
|
|
2757
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {
|
|
2744
2758
|
className: "--divider"
|
|
2745
2759
|
}),
|
|
2746
2760
|
((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
|
|
@@ -2749,25 +2763,25 @@ function HierarchyCell(cell, options = {}) {
|
|
|
2749
2763
|
}
|
|
2750
2764
|
|
|
2751
2765
|
// src/cells/PopoverCell.tsx
|
|
2752
|
-
var
|
|
2766
|
+
var import_eds_core_react8 = require("@equinor/eds-core-react");
|
|
2753
2767
|
var import_react2 = require("react");
|
|
2754
|
-
var
|
|
2768
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2755
2769
|
function PopoverCell(props) {
|
|
2756
2770
|
const [open, setOpen] = (0, import_react2.useState)(false);
|
|
2757
2771
|
const anchorRef = (0, import_react2.useRef)(null);
|
|
2758
2772
|
const handleClick = () => setOpen(!open);
|
|
2759
2773
|
const handleClose = () => setOpen(false);
|
|
2760
|
-
return /* @__PURE__ */ (0,
|
|
2774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
|
|
2761
2775
|
style: { position: "relative" },
|
|
2762
2776
|
ref: anchorRef,
|
|
2763
2777
|
children: [
|
|
2764
|
-
/* @__PURE__ */ (0,
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TypographyCustom, {
|
|
2765
2779
|
onClick: stopPropagation(handleClick),
|
|
2766
2780
|
style: { cursor: "pointer" },
|
|
2767
2781
|
truncate: true,
|
|
2768
2782
|
children: String(props.value)
|
|
2769
2783
|
}),
|
|
2770
|
-
/* @__PURE__ */ (0,
|
|
2784
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_eds_core_react8.Popover, {
|
|
2771
2785
|
id: props.id,
|
|
2772
2786
|
open,
|
|
2773
2787
|
"aria-controls": "expand cell",
|
|
@@ -2775,13 +2789,13 @@ function PopoverCell(props) {
|
|
|
2775
2789
|
onClose: handleClose,
|
|
2776
2790
|
placement: "bottom",
|
|
2777
2791
|
children: [
|
|
2778
|
-
props.title && /* @__PURE__ */ (0,
|
|
2779
|
-
children: /* @__PURE__ */ (0,
|
|
2792
|
+
props.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, {
|
|
2793
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Header, {
|
|
2780
2794
|
children: props.title
|
|
2781
2795
|
})
|
|
2782
2796
|
}),
|
|
2783
|
-
/* @__PURE__ */ (0,
|
|
2784
|
-
children: /* @__PURE__ */ (0,
|
|
2797
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Content, {
|
|
2798
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, {
|
|
2785
2799
|
children: String(props.value)
|
|
2786
2800
|
})
|
|
2787
2801
|
})
|
|
@@ -2792,10 +2806,10 @@ function PopoverCell(props) {
|
|
|
2792
2806
|
}
|
|
2793
2807
|
|
|
2794
2808
|
// src/cells/SelectColumnDef.tsx
|
|
2795
|
-
var
|
|
2809
|
+
var import_eds_core_react9 = require("@equinor/eds-core-react");
|
|
2796
2810
|
var import_eds_icons4 = require("@equinor/eds-icons");
|
|
2797
2811
|
var import_styled_components9 = __toESM(require("styled-components"));
|
|
2798
|
-
var
|
|
2812
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2799
2813
|
var CellWrapper2 = import_styled_components9.default.div`
|
|
2800
2814
|
display: flex;
|
|
2801
2815
|
align-items: center;
|
|
@@ -2808,8 +2822,8 @@ function SelectColumnDef(props) {
|
|
|
2808
2822
|
return {
|
|
2809
2823
|
id: "select",
|
|
2810
2824
|
size: props.includeExpansionButton ? 96 : 48,
|
|
2811
|
-
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0,
|
|
2812
|
-
children: /* @__PURE__ */ (0,
|
|
2825
|
+
header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
|
|
2826
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
|
|
2813
2827
|
checked: table.getIsAllRowsSelected(),
|
|
2814
2828
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
2815
2829
|
"aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
|
|
@@ -2818,28 +2832,28 @@ function SelectColumnDef(props) {
|
|
|
2818
2832
|
}) : null,
|
|
2819
2833
|
cell: ({ table, row }) => {
|
|
2820
2834
|
const paddingLeft = "0px";
|
|
2821
|
-
return /* @__PURE__ */ (0,
|
|
2835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
|
|
2822
2836
|
paddingLeft,
|
|
2823
2837
|
rowDepth: row.depth,
|
|
2824
|
-
children: /* @__PURE__ */ (0,
|
|
2838
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, {
|
|
2825
2839
|
children: [
|
|
2826
|
-
selectionMode === "single" ? /* @__PURE__ */ (0,
|
|
2840
|
+
selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Radio, {
|
|
2827
2841
|
checked: row.getIsSelected(),
|
|
2828
2842
|
"aria-label": `Select row ${row.id}`,
|
|
2829
2843
|
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2830
|
-
}) : /* @__PURE__ */ (0,
|
|
2844
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
|
|
2831
2845
|
checked: row.getIsSelected(),
|
|
2832
2846
|
indeterminate: row.getIsSomeSelected(),
|
|
2833
2847
|
"aria-label": `Select row ${row.id}`,
|
|
2834
2848
|
onChange: stopPropagation(row.getToggleSelectedHandler())
|
|
2835
2849
|
}),
|
|
2836
|
-
row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0,
|
|
2850
|
+
row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
|
|
2837
2851
|
variant: "ghost_icon",
|
|
2838
2852
|
color: "secondary",
|
|
2839
2853
|
"aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
|
|
2840
2854
|
onClick: stopPropagation(row.getToggleExpandedHandler()),
|
|
2841
2855
|
style: { cursor: "pointer" },
|
|
2842
|
-
children: /* @__PURE__ */ (0,
|
|
2856
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
|
|
2843
2857
|
data: row.getIsExpanded() ? import_eds_icons4.chevron_up : import_eds_icons4.chevron_down
|
|
2844
2858
|
})
|
|
2845
2859
|
})
|
|
@@ -2851,7 +2865,7 @@ function SelectColumnDef(props) {
|
|
|
2851
2865
|
}
|
|
2852
2866
|
|
|
2853
2867
|
// src/DataTable/components/ColumnSelect.tsx
|
|
2854
|
-
var
|
|
2868
|
+
var import_eds_core_react10 = require("@equinor/eds-core-react");
|
|
2855
2869
|
var import_eds_icons5 = require("@equinor/eds-icons");
|
|
2856
2870
|
var import_react3 = require("react");
|
|
2857
2871
|
var import_styled_components10 = __toESM(require("styled-components"));
|
|
@@ -2886,7 +2900,7 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
|
|
|
2886
2900
|
}
|
|
2887
2901
|
|
|
2888
2902
|
// src/DataTable/components/ColumnSelect.tsx
|
|
2889
|
-
var
|
|
2903
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2890
2904
|
var ColumnSelectContent = import_styled_components10.default.div`
|
|
2891
2905
|
display: grid;
|
|
2892
2906
|
grid-template-columns: repeat(2, 1fr);
|
|
@@ -2902,12 +2916,12 @@ function ColumnSelect({ table }) {
|
|
|
2902
2916
|
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
|
2903
2917
|
const referenceElement = (0, import_react3.useRef)(null);
|
|
2904
2918
|
const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
|
|
2905
|
-
return /* @__PURE__ */ (0,
|
|
2919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, {
|
|
2906
2920
|
children: [
|
|
2907
|
-
/* @__PURE__ */ (0,
|
|
2921
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, {
|
|
2908
2922
|
title: "Select columns",
|
|
2909
2923
|
placement: "left",
|
|
2910
|
-
children: /* @__PURE__ */ (0,
|
|
2924
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
|
|
2911
2925
|
"aria-haspopup": true,
|
|
2912
2926
|
id: "column-select-anchor",
|
|
2913
2927
|
"aria-controls": "column-select-popover",
|
|
@@ -2915,29 +2929,29 @@ function ColumnSelect({ table }) {
|
|
|
2915
2929
|
ref: referenceElement,
|
|
2916
2930
|
variant: "ghost_icon",
|
|
2917
2931
|
onClick: () => setIsOpen(true),
|
|
2918
|
-
children: /* @__PURE__ */ (0,
|
|
2932
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, {
|
|
2919
2933
|
name: "view_column",
|
|
2920
2934
|
data: import_eds_icons5.view_column
|
|
2921
2935
|
})
|
|
2922
2936
|
})
|
|
2923
2937
|
}),
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
2938
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover, {
|
|
2925
2939
|
open: isOpen,
|
|
2926
2940
|
id: "column-select-popover",
|
|
2927
2941
|
anchorEl: referenceElement.current,
|
|
2928
2942
|
placement: "bottom-end",
|
|
2929
2943
|
onClose: () => setIsOpen(false),
|
|
2930
2944
|
children: [
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2945
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, {
|
|
2932
2946
|
children: [
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2947
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Popover.Title, {
|
|
2934
2948
|
children: "Column settings"
|
|
2935
2949
|
}),
|
|
2936
|
-
/* @__PURE__ */ (0,
|
|
2950
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
|
|
2937
2951
|
variant: "ghost_icon",
|
|
2938
2952
|
"aria-label": "Close column select",
|
|
2939
2953
|
onClick: () => setIsOpen(false),
|
|
2940
|
-
children: /* @__PURE__ */ (0,
|
|
2954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, {
|
|
2941
2955
|
name: "close",
|
|
2942
2956
|
data: import_eds_icons5.close,
|
|
2943
2957
|
size: 24
|
|
@@ -2945,22 +2959,22 @@ function ColumnSelect({ table }) {
|
|
|
2945
2959
|
})
|
|
2946
2960
|
]
|
|
2947
2961
|
}),
|
|
2948
|
-
/* @__PURE__ */ (0,
|
|
2962
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Content, {
|
|
2949
2963
|
children: [
|
|
2950
|
-
/* @__PURE__ */ (0,
|
|
2964
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnSelectContent, {
|
|
2951
2965
|
children: selectableColumns.map((column) => {
|
|
2952
|
-
return /* @__PURE__ */ (0,
|
|
2966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Checkbox, {
|
|
2953
2967
|
checked: column.getIsVisible(),
|
|
2954
2968
|
label: getColumnHeader(column),
|
|
2955
2969
|
onChange: column.getToggleVisibilityHandler()
|
|
2956
2970
|
}, column.id);
|
|
2957
2971
|
})
|
|
2958
2972
|
}),
|
|
2959
|
-
/* @__PURE__ */ (0,
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Divider, {
|
|
2960
2974
|
variant: "small"
|
|
2961
2975
|
}),
|
|
2962
|
-
/* @__PURE__ */ (0,
|
|
2963
|
-
children: /* @__PURE__ */ (0,
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionsWrapper, {
|
|
2977
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
|
|
2964
2978
|
color: "secondary",
|
|
2965
2979
|
variant: "ghost",
|
|
2966
2980
|
disabled: table.getIsAllColumnsVisible(),
|
|
@@ -2977,13 +2991,13 @@ function ColumnSelect({ table }) {
|
|
|
2977
2991
|
}
|
|
2978
2992
|
|
|
2979
2993
|
// src/DataTable/components/TableHeader.tsx
|
|
2980
|
-
var
|
|
2981
|
-
var
|
|
2994
|
+
var import_eds_core_react11 = require("@equinor/eds-core-react");
|
|
2995
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2982
2996
|
function TableHeader({ table, sticky }) {
|
|
2983
|
-
return /* @__PURE__ */ (0,
|
|
2997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Head, {
|
|
2984
2998
|
sticky,
|
|
2985
|
-
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0,
|
|
2986
|
-
children: headerGroup.headers.map((header) => /* @__PURE__ */ (0,
|
|
2999
|
+
children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
|
|
3000
|
+
children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, {
|
|
2987
3001
|
header
|
|
2988
3002
|
}, header.id))
|
|
2989
3003
|
}, headerGroup.id))
|
|
@@ -2996,24 +3010,24 @@ var import_react7 = require("react");
|
|
|
2996
3010
|
var import_styled_components16 = __toESM(require("styled-components"));
|
|
2997
3011
|
|
|
2998
3012
|
// src/DataTable/components/BasicTable.tsx
|
|
2999
|
-
var
|
|
3013
|
+
var import_eds_core_react15 = require("@equinor/eds-core-react");
|
|
3000
3014
|
|
|
3001
3015
|
// src/DataTable/components/PlaceholderRow.tsx
|
|
3002
|
-
var
|
|
3016
|
+
var import_eds_core_react12 = require("@equinor/eds-core-react");
|
|
3003
3017
|
var import_styled_components11 = __toESM(require("styled-components"));
|
|
3004
|
-
var
|
|
3018
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
3005
3019
|
var PlaceholderTextWrapper = import_styled_components11.default.div`
|
|
3006
3020
|
display: flex;
|
|
3007
3021
|
justify-content: center;
|
|
3008
3022
|
`;
|
|
3009
3023
|
function PlaceholderRow({ isLoading }) {
|
|
3010
|
-
return /* @__PURE__ */ (0,
|
|
3011
|
-
children: /* @__PURE__ */ (0,
|
|
3024
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, {
|
|
3025
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, {
|
|
3012
3026
|
colSpan: 100,
|
|
3013
|
-
children: /* @__PURE__ */ (0,
|
|
3014
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
3027
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, {
|
|
3028
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, {
|
|
3015
3029
|
color: "primary"
|
|
3016
|
-
}) : /* @__PURE__ */ (0,
|
|
3030
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, {
|
|
3017
3031
|
children: "No data available"
|
|
3018
3032
|
})
|
|
3019
3033
|
})
|
|
@@ -3022,18 +3036,18 @@ function PlaceholderRow({ isLoading }) {
|
|
|
3022
3036
|
}
|
|
3023
3037
|
|
|
3024
3038
|
// src/DataTable/components/TableBody.tsx
|
|
3025
|
-
var
|
|
3039
|
+
var import_eds_core_react13 = require("@equinor/eds-core-react");
|
|
3026
3040
|
var import_styled_components12 = __toESM(require("styled-components"));
|
|
3027
|
-
var TableBody = (0, import_styled_components12.default)(
|
|
3041
|
+
var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
|
|
3028
3042
|
// The following attribute are important for fixed column width
|
|
3029
3043
|
// CHANGE THES WITH CAUTION
|
|
3030
3044
|
background: inherit;
|
|
3031
3045
|
`;
|
|
3032
3046
|
|
|
3033
3047
|
// src/DataTable/components/TableRow.tsx
|
|
3034
|
-
var
|
|
3048
|
+
var import_eds_core_react14 = require("@equinor/eds-core-react");
|
|
3035
3049
|
var import_styled_components13 = __toESM(require("styled-components"));
|
|
3036
|
-
var
|
|
3050
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3037
3051
|
function TableRow({
|
|
3038
3052
|
row,
|
|
3039
3053
|
rowConfig,
|
|
@@ -3043,7 +3057,7 @@ function TableRow({
|
|
|
3043
3057
|
}) {
|
|
3044
3058
|
var _a;
|
|
3045
3059
|
const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
|
|
3046
|
-
const tableRowContent = /* @__PURE__ */ (0,
|
|
3060
|
+
const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledTableRow, {
|
|
3047
3061
|
active: row.getIsSelected(),
|
|
3048
3062
|
"data-index": index,
|
|
3049
3063
|
ref: measureElement,
|
|
@@ -3059,7 +3073,7 @@ function TableRow({
|
|
|
3059
3073
|
onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
|
|
3060
3074
|
children: row.getVisibleCells().map((cell) => {
|
|
3061
3075
|
var _a2;
|
|
3062
|
-
return /* @__PURE__ */ (0,
|
|
3076
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicCell, {
|
|
3063
3077
|
cell,
|
|
3064
3078
|
getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
|
|
3065
3079
|
highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
|
|
@@ -3068,7 +3082,7 @@ function TableRow({
|
|
|
3068
3082
|
});
|
|
3069
3083
|
return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
|
|
3070
3084
|
}
|
|
3071
|
-
var StyledTableRow = (0, import_styled_components13.default)(
|
|
3085
|
+
var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
|
|
3072
3086
|
/* Background color must be inherited here. Does not work with inline styling */
|
|
3073
3087
|
${({ active }) => active ? "" : "background-color: inherit;"}
|
|
3074
3088
|
`;
|
|
@@ -3081,7 +3095,7 @@ function handleRowEvent(row, handler) {
|
|
|
3081
3095
|
}
|
|
3082
3096
|
|
|
3083
3097
|
// src/DataTable/components/BasicTable.tsx
|
|
3084
|
-
var
|
|
3098
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3085
3099
|
function BasicTable({
|
|
3086
3100
|
table,
|
|
3087
3101
|
rowConfig,
|
|
@@ -3091,22 +3105,22 @@ function BasicTable({
|
|
|
3091
3105
|
tableCaption
|
|
3092
3106
|
}) {
|
|
3093
3107
|
const tableRows = table.getRowModel().rows;
|
|
3094
|
-
return /* @__PURE__ */ (0,
|
|
3108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, {
|
|
3095
3109
|
children: [
|
|
3096
|
-
/* @__PURE__ */ (0,
|
|
3110
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Table.Caption, {
|
|
3097
3111
|
hidden: true,
|
|
3098
3112
|
children: tableCaption
|
|
3099
3113
|
}),
|
|
3100
|
-
/* @__PURE__ */ (0,
|
|
3114
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, {
|
|
3101
3115
|
sticky: stickyHeader,
|
|
3102
3116
|
table
|
|
3103
3117
|
}),
|
|
3104
|
-
/* @__PURE__ */ (0,
|
|
3105
|
-
children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0,
|
|
3118
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableBody, {
|
|
3119
|
+
children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableRow, {
|
|
3106
3120
|
row,
|
|
3107
3121
|
rowConfig,
|
|
3108
3122
|
cellConfig
|
|
3109
|
-
}, row.id)) : /* @__PURE__ */ (0,
|
|
3123
|
+
}, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaceholderRow, {
|
|
3110
3124
|
isLoading
|
|
3111
3125
|
})
|
|
3112
3126
|
})
|
|
@@ -3115,20 +3129,20 @@ function BasicTable({
|
|
|
3115
3129
|
}
|
|
3116
3130
|
|
|
3117
3131
|
// src/DataTable/components/DataTableHeader.tsx
|
|
3118
|
-
var
|
|
3132
|
+
var import_eds_core_react17 = require("@equinor/eds-core-react");
|
|
3119
3133
|
var import_eds_icons7 = require("@equinor/eds-icons");
|
|
3120
3134
|
var import_styled_components15 = __toESM(require("styled-components"));
|
|
3121
3135
|
|
|
3122
3136
|
// src/DataTable/filters/DebouncedInput.tsx
|
|
3123
|
-
var
|
|
3137
|
+
var import_eds_core_react16 = require("@equinor/eds-core-react");
|
|
3124
3138
|
var import_eds_icons6 = require("@equinor/eds-icons");
|
|
3125
3139
|
var import_react4 = require("react");
|
|
3126
3140
|
var import_styled_components14 = __toESM(require("styled-components"));
|
|
3127
|
-
var
|
|
3141
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3128
3142
|
var Wrapper3 = import_styled_components14.default.div`
|
|
3129
3143
|
width: 200px;
|
|
3130
3144
|
`;
|
|
3131
|
-
var CloseButton = (0, import_styled_components14.default)(
|
|
3145
|
+
var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
|
|
3132
3146
|
width: 24px;
|
|
3133
3147
|
height: 24px;
|
|
3134
3148
|
`;
|
|
@@ -3149,21 +3163,21 @@ function DebouncedInput({
|
|
|
3149
3163
|
}, debounce);
|
|
3150
3164
|
return () => clearTimeout(timeout);
|
|
3151
3165
|
}, [value]);
|
|
3152
|
-
return /* @__PURE__ */ (0,
|
|
3153
|
-
children: /* @__PURE__ */ (0,
|
|
3166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, {
|
|
3167
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Input, {
|
|
3154
3168
|
...props,
|
|
3155
3169
|
value,
|
|
3156
|
-
leftAdornments: icon && /* @__PURE__ */ (0,
|
|
3170
|
+
leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
|
|
3157
3171
|
name: icon.name,
|
|
3158
3172
|
data: icon,
|
|
3159
3173
|
size: 18
|
|
3160
3174
|
}),
|
|
3161
|
-
rightAdornments: !!value && /* @__PURE__ */ (0,
|
|
3175
|
+
rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Tooltip, {
|
|
3162
3176
|
title: "Clear input",
|
|
3163
|
-
children: /* @__PURE__ */ (0,
|
|
3177
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, {
|
|
3164
3178
|
variant: "ghost_icon",
|
|
3165
3179
|
onClick: () => setValue(""),
|
|
3166
|
-
children: /* @__PURE__ */ (0,
|
|
3180
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
|
|
3167
3181
|
name: import_eds_icons6.close.name,
|
|
3168
3182
|
data: import_eds_icons6.close,
|
|
3169
3183
|
size: 18
|
|
@@ -3186,7 +3200,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
|
3186
3200
|
};
|
|
3187
3201
|
|
|
3188
3202
|
// src/DataTable/components/DataTableHeader.tsx
|
|
3189
|
-
var
|
|
3203
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3190
3204
|
var TableBannerWrapper = import_styled_components15.default.div`
|
|
3191
3205
|
display: flex;
|
|
3192
3206
|
align-items: center;
|
|
@@ -3207,14 +3221,14 @@ function TableBanner({
|
|
|
3207
3221
|
globalFilter
|
|
3208
3222
|
}) {
|
|
3209
3223
|
var _a;
|
|
3210
|
-
return /* @__PURE__ */ (0,
|
|
3224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, {
|
|
3211
3225
|
className: "--table-caption",
|
|
3212
3226
|
padding: bannerConfig == null ? void 0 : bannerConfig.padding,
|
|
3213
3227
|
children: [
|
|
3214
|
-
/* @__PURE__ */ (0,
|
|
3228
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, {
|
|
3215
3229
|
className: "--filter-container-left",
|
|
3216
3230
|
children: [
|
|
3217
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0,
|
|
3231
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, {
|
|
3218
3232
|
variant: "h3",
|
|
3219
3233
|
as: "h2",
|
|
3220
3234
|
children: tableCaption
|
|
@@ -3222,20 +3236,20 @@ function TableBanner({
|
|
|
3222
3236
|
(_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
|
|
3223
3237
|
]
|
|
3224
3238
|
}),
|
|
3225
|
-
/* @__PURE__ */ (0,
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, {
|
|
3226
3240
|
className: "--filter-container-right",
|
|
3227
|
-
children: /* @__PURE__ */ (0,
|
|
3241
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, {
|
|
3228
3242
|
children: [
|
|
3229
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0,
|
|
3243
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DebouncedInput, {
|
|
3230
3244
|
value: globalFilter.state,
|
|
3231
3245
|
icon: import_eds_icons7.search,
|
|
3232
3246
|
placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
|
|
3233
3247
|
onChange: (value) => globalFilter.onChange(String(value))
|
|
3234
3248
|
}),
|
|
3235
|
-
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0,
|
|
3249
|
+
(bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, {
|
|
3236
3250
|
table
|
|
3237
3251
|
}),
|
|
3238
|
-
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0,
|
|
3252
|
+
(bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", {
|
|
3239
3253
|
children: [
|
|
3240
3254
|
table.options.data.length.toLocaleString(),
|
|
3241
3255
|
" /",
|
|
@@ -3252,25 +3266,25 @@ function TableBanner({
|
|
|
3252
3266
|
}
|
|
3253
3267
|
|
|
3254
3268
|
// src/DataTable/components/VirtualTable.tsx
|
|
3255
|
-
var
|
|
3269
|
+
var import_eds_core_react19 = require("@equinor/eds-core-react");
|
|
3256
3270
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
3257
3271
|
|
|
3258
3272
|
// src/DataTable/components/PaddingRow.tsx
|
|
3259
|
-
var
|
|
3260
|
-
var
|
|
3273
|
+
var import_eds_core_react18 = require("@equinor/eds-core-react");
|
|
3274
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3261
3275
|
var PaddingRow = (props) => {
|
|
3262
3276
|
if (!props.height)
|
|
3263
3277
|
return null;
|
|
3264
|
-
return /* @__PURE__ */ (0,
|
|
3278
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Row, {
|
|
3265
3279
|
style: { pointerEvents: "none" },
|
|
3266
|
-
children: /* @__PURE__ */ (0,
|
|
3280
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Cell, {
|
|
3267
3281
|
style: { height: `${props.height}px` }
|
|
3268
3282
|
})
|
|
3269
3283
|
});
|
|
3270
3284
|
};
|
|
3271
3285
|
|
|
3272
3286
|
// src/DataTable/components/VirtualTable.tsx
|
|
3273
|
-
var
|
|
3287
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3274
3288
|
function VirtualTable({
|
|
3275
3289
|
table,
|
|
3276
3290
|
rowConfig,
|
|
@@ -3290,34 +3304,34 @@ function VirtualTable({
|
|
|
3290
3304
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
3291
3305
|
const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
|
|
3292
3306
|
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
|
|
3293
|
-
return /* @__PURE__ */ (0,
|
|
3307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, {
|
|
3294
3308
|
children: [
|
|
3295
|
-
/* @__PURE__ */ (0,
|
|
3309
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, {
|
|
3296
3310
|
hidden: true,
|
|
3297
3311
|
children: props.tableCaption
|
|
3298
3312
|
}),
|
|
3299
|
-
/* @__PURE__ */ (0,
|
|
3313
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, {
|
|
3300
3314
|
sticky: props.stickyHeader,
|
|
3301
3315
|
table
|
|
3302
3316
|
}),
|
|
3303
|
-
/* @__PURE__ */ (0,
|
|
3317
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, {
|
|
3304
3318
|
children: [
|
|
3305
|
-
/* @__PURE__ */ (0,
|
|
3319
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, {
|
|
3306
3320
|
height: paddingTop
|
|
3307
3321
|
}),
|
|
3308
3322
|
rows.length ? virtualRows.map((virtualRow) => {
|
|
3309
3323
|
const row = rows[virtualRow.index];
|
|
3310
|
-
return /* @__PURE__ */ (0,
|
|
3324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableRow, {
|
|
3311
3325
|
row,
|
|
3312
3326
|
rowConfig,
|
|
3313
3327
|
cellConfig,
|
|
3314
3328
|
index: virtualRow.index,
|
|
3315
3329
|
measureElement: rowVirtualizer.measureElement
|
|
3316
3330
|
}, row.id);
|
|
3317
|
-
}) : /* @__PURE__ */ (0,
|
|
3331
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, {
|
|
3318
3332
|
isLoading: props.isLoading
|
|
3319
3333
|
}),
|
|
3320
|
-
/* @__PURE__ */ (0,
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, {
|
|
3321
3335
|
height: paddingBottom
|
|
3322
3336
|
})
|
|
3323
3337
|
]
|
|
@@ -3363,11 +3377,11 @@ function useForceRerender() {
|
|
|
3363
3377
|
}
|
|
3364
3378
|
|
|
3365
3379
|
// src/DataTable/DataTable.tsx
|
|
3366
|
-
var
|
|
3380
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3367
3381
|
function canUseContainStrict(height) {
|
|
3368
3382
|
if (!height)
|
|
3369
3383
|
return false;
|
|
3370
|
-
const heightIsANumber = !isNaN(parseFloat(height));
|
|
3384
|
+
const heightIsANumber = !isNaN(Number(height)) && !isNaN(parseFloat(height));
|
|
3371
3385
|
if (heightIsANumber)
|
|
3372
3386
|
return false;
|
|
3373
3387
|
const heightIsPercentage = height.endsWith("%");
|
|
@@ -3439,7 +3453,7 @@ function DataTable(props) {
|
|
|
3439
3453
|
defaultColumn: {
|
|
3440
3454
|
cell: ({ cell }) => {
|
|
3441
3455
|
const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
|
|
3442
|
-
return /* @__PURE__ */ (0,
|
|
3456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, {
|
|
3443
3457
|
truncate: truncateMode === "hover",
|
|
3444
3458
|
enableShowAllOnHover: true,
|
|
3445
3459
|
children: cell.getValue()
|
|
@@ -3481,18 +3495,18 @@ function DataTable(props) {
|
|
|
3481
3495
|
if (Boolean(tableContainerRef.current))
|
|
3482
3496
|
forceRerender();
|
|
3483
3497
|
}, [tableContainerRef.current === null]);
|
|
3484
|
-
return /* @__PURE__ */ (0,
|
|
3498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, {
|
|
3485
3499
|
height: props == null ? void 0 : props.height,
|
|
3486
3500
|
width: props == null ? void 0 : props.width,
|
|
3487
3501
|
tableLayout: props == null ? void 0 : props.tableLayout,
|
|
3488
3502
|
children: [
|
|
3489
|
-
props.bannerConfig && /* @__PURE__ */ (0,
|
|
3503
|
+
props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableBanner, {
|
|
3490
3504
|
table,
|
|
3491
3505
|
bannerConfig: props.bannerConfig,
|
|
3492
3506
|
globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
|
|
3493
3507
|
tableCaption: props.tableCaption
|
|
3494
3508
|
}),
|
|
3495
|
-
/* @__PURE__ */ (0,
|
|
3509
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
|
|
3496
3510
|
...props.tableContainerProps,
|
|
3497
3511
|
className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
|
|
3498
3512
|
onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
|
|
@@ -3505,7 +3519,7 @@ function DataTable(props) {
|
|
|
3505
3519
|
}
|
|
3506
3520
|
}
|
|
3507
3521
|
},
|
|
3508
|
-
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0,
|
|
3522
|
+
children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VirtualTable, {
|
|
3509
3523
|
containerRef: tableContainerRef,
|
|
3510
3524
|
tableCaption: props.tableCaption,
|
|
3511
3525
|
table,
|
|
@@ -3513,7 +3527,7 @@ function DataTable(props) {
|
|
|
3513
3527
|
cellConfig,
|
|
3514
3528
|
isLoading,
|
|
3515
3529
|
stickyHeader: props.stickyHeader
|
|
3516
|
-
}) : /* @__PURE__ */ (0,
|
|
3530
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BasicTable, {
|
|
3517
3531
|
tableCaption: props.tableCaption,
|
|
3518
3532
|
table,
|
|
3519
3533
|
rowConfig,
|
|
@@ -3527,7 +3541,7 @@ function DataTable(props) {
|
|
|
3527
3541
|
}
|
|
3528
3542
|
|
|
3529
3543
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
3530
|
-
var
|
|
3544
|
+
var import_eds_core_react20 = require("@equinor/eds-core-react");
|
|
3531
3545
|
var import_react_hook_form2 = require("react-hook-form");
|
|
3532
3546
|
|
|
3533
3547
|
// src/form-meta/utils.tsx
|
|
@@ -3565,20 +3579,20 @@ function addFormMeta(withoutFormMeta) {
|
|
|
3565
3579
|
}
|
|
3566
3580
|
|
|
3567
3581
|
// src/form-cells/EditableCheckboxCell.tsx
|
|
3568
|
-
var
|
|
3582
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3569
3583
|
function EditableCheckboxCell(context) {
|
|
3570
3584
|
const editMode = useEditMode();
|
|
3571
3585
|
if (!editMode)
|
|
3572
|
-
return /* @__PURE__ */ (0,
|
|
3586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, {
|
|
3573
3587
|
enterKeyHint: "next",
|
|
3574
3588
|
"aria-label": "readonly",
|
|
3575
3589
|
readOnly: true,
|
|
3576
3590
|
checked: context.getValue(),
|
|
3577
3591
|
disabled: true
|
|
3578
3592
|
});
|
|
3579
|
-
return /* @__PURE__ */ (0,
|
|
3593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_hook_form2.Controller, {
|
|
3580
3594
|
name: context.column.id,
|
|
3581
|
-
render: ({ field: { value, ...field } }) => /* @__PURE__ */ (0,
|
|
3595
|
+
render: ({ field: { value, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, {
|
|
3582
3596
|
enterKeyHint: "send",
|
|
3583
3597
|
"aria-label": "editable",
|
|
3584
3598
|
checked: value,
|
|
@@ -3588,15 +3602,15 @@ function EditableCheckboxCell(context) {
|
|
|
3588
3602
|
}
|
|
3589
3603
|
|
|
3590
3604
|
// src/form-cells/EditableDateCell.tsx
|
|
3591
|
-
var
|
|
3605
|
+
var import_eds_core_react22 = require("@equinor/eds-core-react");
|
|
3592
3606
|
var import_react8 = require("react");
|
|
3593
3607
|
var import_react_hook_form3 = require("react-hook-form");
|
|
3594
3608
|
var import_styled_components17 = __toESM(require("styled-components"));
|
|
3595
3609
|
|
|
3596
3610
|
// src/form-cells/utils.tsx
|
|
3597
|
-
var
|
|
3611
|
+
var import_eds_core_react21 = require("@equinor/eds-core-react");
|
|
3598
3612
|
var import_eds_icons8 = require("@equinor/eds-icons");
|
|
3599
|
-
var
|
|
3613
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3600
3614
|
function getHelperTextProps({
|
|
3601
3615
|
error,
|
|
3602
3616
|
warning,
|
|
@@ -3606,7 +3620,7 @@ function getHelperTextProps({
|
|
|
3606
3620
|
return {
|
|
3607
3621
|
variant: "error",
|
|
3608
3622
|
helperText: error.message,
|
|
3609
|
-
helperIcon: /* @__PURE__ */ (0,
|
|
3623
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
|
|
3610
3624
|
data: import_eds_icons8.error_filled,
|
|
3611
3625
|
size: 16
|
|
3612
3626
|
})
|
|
@@ -3615,7 +3629,7 @@ function getHelperTextProps({
|
|
|
3615
3629
|
return {
|
|
3616
3630
|
variant: "warning",
|
|
3617
3631
|
helperText: warning.message,
|
|
3618
|
-
helperIcon: /* @__PURE__ */ (0,
|
|
3632
|
+
helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
|
|
3619
3633
|
data: import_eds_icons8.warning_filled,
|
|
3620
3634
|
size: 16
|
|
3621
3635
|
})
|
|
@@ -3633,7 +3647,7 @@ function stopPropagation2(handler) {
|
|
|
3633
3647
|
}
|
|
3634
3648
|
|
|
3635
3649
|
// src/form-cells/EditableDateCell.tsx
|
|
3636
|
-
var
|
|
3650
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3637
3651
|
function EditableDateCell(props) {
|
|
3638
3652
|
const { dateStringFormatter, ...context } = props;
|
|
3639
3653
|
const rawValue = context.getValue();
|
|
@@ -3643,13 +3657,13 @@ function EditableDateCell(props) {
|
|
|
3643
3657
|
[rawValue, dateStringFormatter]
|
|
3644
3658
|
);
|
|
3645
3659
|
if (!editMode)
|
|
3646
|
-
return /* @__PURE__ */ (0,
|
|
3660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, {
|
|
3647
3661
|
truncate: true,
|
|
3648
3662
|
children: formattedValue
|
|
3649
3663
|
});
|
|
3650
|
-
return /* @__PURE__ */ (0,
|
|
3664
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_hook_form3.Controller, {
|
|
3651
3665
|
name: context.column.id,
|
|
3652
|
-
render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0,
|
|
3666
|
+
render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InlineTextField, {
|
|
3653
3667
|
id: context.column.id,
|
|
3654
3668
|
type: "date",
|
|
3655
3669
|
autoComplete: "none",
|
|
@@ -3666,7 +3680,7 @@ function parseISODate(dateString) {
|
|
|
3666
3680
|
const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1e3);
|
|
3667
3681
|
return dateWithoutOffset.toISOString().split("T")[0];
|
|
3668
3682
|
}
|
|
3669
|
-
var InlineTextField = (0, import_styled_components17.default)(
|
|
3683
|
+
var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react22.TextField)`
|
|
3670
3684
|
/*
|
|
3671
3685
|
TODO: Improve input based on feedback from UX
|
|
3672
3686
|
& > div {
|
|
@@ -3690,9 +3704,9 @@ var InlineTextField = (0, import_styled_components17.default)(import_eds_core_re
|
|
|
3690
3704
|
`;
|
|
3691
3705
|
|
|
3692
3706
|
// src/form-cells/EditableDropdownSingleCell.tsx
|
|
3693
|
-
var
|
|
3707
|
+
var import_eds_core_react23 = require("@equinor/eds-core-react");
|
|
3694
3708
|
var import_react_hook_form4 = require("react-hook-form");
|
|
3695
|
-
var
|
|
3709
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3696
3710
|
function buildEmptyOption() {
|
|
3697
3711
|
return { label: "", value: "" };
|
|
3698
3712
|
}
|
|
@@ -3700,15 +3714,15 @@ function EditableDropdownSingleCell(props) {
|
|
|
3700
3714
|
const { options, ...context } = props;
|
|
3701
3715
|
const editMode = useEditMode();
|
|
3702
3716
|
if (!editMode)
|
|
3703
|
-
return /* @__PURE__ */ (0,
|
|
3717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, {
|
|
3704
3718
|
truncate: true,
|
|
3705
3719
|
children: context.getValue()
|
|
3706
3720
|
});
|
|
3707
|
-
return /* @__PURE__ */ (0,
|
|
3721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_hook_form4.Controller, {
|
|
3708
3722
|
name: context.column.id,
|
|
3709
3723
|
render: ({ field: { value, onChange, ...field } }) => {
|
|
3710
3724
|
const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption();
|
|
3711
|
-
return /* @__PURE__ */ (0,
|
|
3725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_eds_core_react23.Autocomplete, {
|
|
3712
3726
|
label: "",
|
|
3713
3727
|
selectedOptions: selectedOption && [selectedOption],
|
|
3714
3728
|
options,
|
|
@@ -3727,21 +3741,21 @@ function EditableDropdownSingleCell(props) {
|
|
|
3727
3741
|
}
|
|
3728
3742
|
|
|
3729
3743
|
// src/form-cells/EditableNumberCell.tsx
|
|
3730
|
-
var
|
|
3744
|
+
var import_eds_core_react24 = require("@equinor/eds-core-react");
|
|
3731
3745
|
var import_react_hook_form5 = require("react-hook-form");
|
|
3732
3746
|
var import_styled_components18 = __toESM(require("styled-components"));
|
|
3733
|
-
var
|
|
3747
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3734
3748
|
function EditableNumberCell(context) {
|
|
3735
3749
|
const editMode = useEditMode();
|
|
3736
3750
|
if (!editMode)
|
|
3737
|
-
return /* @__PURE__ */ (0,
|
|
3751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, {
|
|
3738
3752
|
truncate: true,
|
|
3739
3753
|
children: context.getValue()
|
|
3740
3754
|
});
|
|
3741
|
-
return /* @__PURE__ */ (0,
|
|
3755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_hook_form5.Controller, {
|
|
3742
3756
|
name: context.column.id,
|
|
3743
|
-
render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0,
|
|
3744
|
-
children: /* @__PURE__ */ (0,
|
|
3757
|
+
render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {
|
|
3758
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineTextField2, {
|
|
3745
3759
|
id: context.column.id,
|
|
3746
3760
|
type: "number",
|
|
3747
3761
|
autoComplete: "none",
|
|
@@ -3752,7 +3766,7 @@ function EditableNumberCell(context) {
|
|
|
3752
3766
|
})
|
|
3753
3767
|
});
|
|
3754
3768
|
}
|
|
3755
|
-
var InlineTextField2 = (0, import_styled_components18.default)(
|
|
3769
|
+
var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react24.TextField)`
|
|
3756
3770
|
/*
|
|
3757
3771
|
TODO: Improve input based on feedback from UX
|
|
3758
3772
|
& > div {
|
|
@@ -3776,12 +3790,12 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
|
|
|
3776
3790
|
`;
|
|
3777
3791
|
|
|
3778
3792
|
// src/form-cells/EditableTextAreaCell.tsx
|
|
3779
|
-
var
|
|
3793
|
+
var import_eds_core_react25 = require("@equinor/eds-core-react");
|
|
3780
3794
|
var import_eds_icons9 = require("@equinor/eds-icons");
|
|
3781
3795
|
var import_react9 = require("react");
|
|
3782
3796
|
var import_react_hook_form6 = require("react-hook-form");
|
|
3783
3797
|
var import_styled_components19 = __toESM(require("styled-components"));
|
|
3784
|
-
var
|
|
3798
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3785
3799
|
function EditableTextAreaCell(props) {
|
|
3786
3800
|
const { title, ...context } = props;
|
|
3787
3801
|
const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
|
|
@@ -3789,35 +3803,35 @@ function EditableTextAreaCell(props) {
|
|
|
3789
3803
|
const editMode = useEditMode();
|
|
3790
3804
|
const name = context.column.id;
|
|
3791
3805
|
if (!editMode)
|
|
3792
|
-
return /* @__PURE__ */ (0,
|
|
3806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, {
|
|
3793
3807
|
id: name + "popover",
|
|
3794
3808
|
value: context.getValue(),
|
|
3795
3809
|
title
|
|
3796
3810
|
});
|
|
3797
3811
|
const openDialog = () => setOpen(true);
|
|
3798
3812
|
const closeDialog = () => setOpen(false);
|
|
3799
|
-
return /* @__PURE__ */ (0,
|
|
3813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_hook_form6.Controller, {
|
|
3800
3814
|
name,
|
|
3801
|
-
render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0,
|
|
3815
|
+
render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, {
|
|
3802
3816
|
children: [
|
|
3803
|
-
/* @__PURE__ */ (0,
|
|
3817
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
|
|
3804
3818
|
style: {
|
|
3805
3819
|
display: "flex",
|
|
3806
3820
|
alignItems: "center",
|
|
3807
3821
|
position: "relative"
|
|
3808
3822
|
},
|
|
3809
3823
|
children: [
|
|
3810
|
-
/* @__PURE__ */ (0,
|
|
3824
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledTextField, {
|
|
3811
3825
|
id: field.name,
|
|
3812
3826
|
onChange,
|
|
3813
3827
|
ref,
|
|
3814
3828
|
...field,
|
|
3815
3829
|
...getHelperTextProps({ error })
|
|
3816
3830
|
}),
|
|
3817
|
-
/* @__PURE__ */ (0,
|
|
3831
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, {
|
|
3818
3832
|
variant: "ghost_icon",
|
|
3819
3833
|
onClick: stopPropagation2(openDialog),
|
|
3820
|
-
children: /* @__PURE__ */ (0,
|
|
3834
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Icon, {
|
|
3821
3835
|
data: import_eds_icons9.arrow_up,
|
|
3822
3836
|
size: 24,
|
|
3823
3837
|
style: { transform: "rotateZ(45deg)" }
|
|
@@ -3825,7 +3839,7 @@ function EditableTextAreaCell(props) {
|
|
|
3825
3839
|
})
|
|
3826
3840
|
]
|
|
3827
3841
|
}),
|
|
3828
|
-
/* @__PURE__ */ (0,
|
|
3842
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog, {
|
|
3829
3843
|
open,
|
|
3830
3844
|
onClose: () => {
|
|
3831
3845
|
closeDialog();
|
|
@@ -3834,13 +3848,13 @@ function EditableTextAreaCell(props) {
|
|
|
3834
3848
|
isDismissable: true,
|
|
3835
3849
|
style: { width: "min(50rem, calc(100vw - 4rem))" },
|
|
3836
3850
|
children: [
|
|
3837
|
-
/* @__PURE__ */ (0,
|
|
3838
|
-
children: /* @__PURE__ */ (0,
|
|
3851
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Header, {
|
|
3852
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Title, {
|
|
3839
3853
|
children: title
|
|
3840
3854
|
})
|
|
3841
3855
|
}),
|
|
3842
|
-
/* @__PURE__ */ (0,
|
|
3843
|
-
children: /* @__PURE__ */ (0,
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, {
|
|
3857
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.TextField, {
|
|
3844
3858
|
style: {
|
|
3845
3859
|
maxWidth: "100%",
|
|
3846
3860
|
marginTop: "1rem"
|
|
@@ -3855,17 +3869,17 @@ function EditableTextAreaCell(props) {
|
|
|
3855
3869
|
}
|
|
3856
3870
|
})
|
|
3857
3871
|
}),
|
|
3858
|
-
/* @__PURE__ */ (0,
|
|
3872
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, {
|
|
3859
3873
|
style: { display: "flex", gap: "1rem" },
|
|
3860
3874
|
children: [
|
|
3861
|
-
/* @__PURE__ */ (0,
|
|
3875
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Button, {
|
|
3862
3876
|
onClick: () => {
|
|
3863
3877
|
closeDialog();
|
|
3864
3878
|
onChange(textareaValue);
|
|
3865
3879
|
},
|
|
3866
3880
|
children: "Submit"
|
|
3867
3881
|
}),
|
|
3868
|
-
/* @__PURE__ */ (0,
|
|
3882
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Button, {
|
|
3869
3883
|
variant: "ghost",
|
|
3870
3884
|
onClick: () => {
|
|
3871
3885
|
closeDialog();
|
|
@@ -3881,7 +3895,7 @@ function EditableTextAreaCell(props) {
|
|
|
3881
3895
|
})
|
|
3882
3896
|
});
|
|
3883
3897
|
}
|
|
3884
|
-
var StyledTextField = (0, import_styled_components19.default)(
|
|
3898
|
+
var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react25.TextField)`
|
|
3885
3899
|
& input {
|
|
3886
3900
|
padding-right: 40px;
|
|
3887
3901
|
letter-spacing: 0;
|
|
@@ -3890,7 +3904,7 @@ var StyledTextField = (0, import_styled_components19.default)(import_eds_core_re
|
|
|
3890
3904
|
text-overflow: ellipsis;
|
|
3891
3905
|
}
|
|
3892
3906
|
`;
|
|
3893
|
-
var IconButton = (0, import_styled_components19.default)(
|
|
3907
|
+
var IconButton = (0, import_styled_components19.default)(import_eds_core_react25.Button)`
|
|
3894
3908
|
position: absolute;
|
|
3895
3909
|
height: 32px;
|
|
3896
3910
|
width: 32px;
|
|
@@ -3898,20 +3912,20 @@ var IconButton = (0, import_styled_components19.default)(import_eds_core_react24
|
|
|
3898
3912
|
`;
|
|
3899
3913
|
|
|
3900
3914
|
// src/form-cells/EditableTextFieldCell.tsx
|
|
3901
|
-
var
|
|
3915
|
+
var import_eds_core_react26 = require("@equinor/eds-core-react");
|
|
3902
3916
|
var import_react_hook_form7 = require("react-hook-form");
|
|
3903
3917
|
var import_styled_components20 = __toESM(require("styled-components"));
|
|
3904
|
-
var
|
|
3918
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3905
3919
|
function EditableTextFieldCell(context) {
|
|
3906
3920
|
const editMode = useEditMode();
|
|
3907
3921
|
if (!editMode)
|
|
3908
|
-
return /* @__PURE__ */ (0,
|
|
3922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, {
|
|
3909
3923
|
truncate: true,
|
|
3910
3924
|
children: context.getValue()
|
|
3911
3925
|
});
|
|
3912
|
-
return /* @__PURE__ */ (0,
|
|
3926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_hook_form7.Controller, {
|
|
3913
3927
|
name: context.column.id,
|
|
3914
|
-
render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0,
|
|
3928
|
+
render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InlineTextField3, {
|
|
3915
3929
|
id: context.column.id,
|
|
3916
3930
|
autoComplete: "none",
|
|
3917
3931
|
value: String(value ?? ""),
|
|
@@ -3920,7 +3934,7 @@ function EditableTextFieldCell(context) {
|
|
|
3920
3934
|
})
|
|
3921
3935
|
});
|
|
3922
3936
|
}
|
|
3923
|
-
var InlineTextField3 = (0, import_styled_components20.default)(
|
|
3937
|
+
var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react26.TextField)`
|
|
3924
3938
|
/*
|
|
3925
3939
|
TODO: Improve input based on feedback from UX
|
|
3926
3940
|
& > div {
|
|
@@ -3946,6 +3960,7 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
|
|
|
3946
3960
|
0 && (module.exports = {
|
|
3947
3961
|
AppShell,
|
|
3948
3962
|
AppSidebar,
|
|
3963
|
+
CheckboxCell,
|
|
3949
3964
|
ChipsCell,
|
|
3950
3965
|
ColumnSelect,
|
|
3951
3966
|
DataTable,
|