@equinor/apollo-components 3.2.0 → 3.2.1

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