@equinor/apollo-components 3.1.8 → 3.2.0

package/dist/index.mjs

@@ -2429,6 +2429,19 @@ function AppSidebar() {
   });
 }
 
+// src/cells/CheckboxCell.tsx
+import { Checkbox } from "@equinor/eds-core-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CheckboxCell(context) {
+  return /* @__PURE__ */ jsx3(Checkbox, {
+    enterKeyHint: "next",
+    "aria-label": "readonly",
+    readOnly: true,
+    checked: context.getValue(),
+    disabled: true
+  });
+}
+
 // src/cells/ChipsCell.tsx
 import { tokens as tokens2 } from "@equinor/eds-tokens";
 import styled3 from "styled-components";
@@ -2450,7 +2463,7 @@ function stopPropagation(handler) {
 }
 
 // src/cells/ChipsCell.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ChipsWrapper = styled3.div`
   display: flex;
   align-items: center;
@@ -2469,8 +2482,8 @@ var Chip = styled3.div`
 `;
 var ChipsCell = (props) => {
   var _a;
-  return /* @__PURE__ */ jsx3(ChipsWrapper, {
-    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx3(Chip, {
+  return /* @__PURE__ */ jsx4(ChipsWrapper, {
+    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ jsx4(Chip, {
       backgroundColor: stringToHslColor(value),
       children: value
     }, value))
@@ -2509,7 +2522,7 @@ var StickyHeaderCell = styled4(StickyCell)`
 `;
 
 // src/cells/DynamicCell.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
@@ -2520,13 +2533,13 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ jsx4(StyledStickyCell, {
+    return /* @__PURE__ */ jsx5(StyledStickyCell, {
       backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell),
       "data-column": cell.column.id,
       children: cellContent
     });
   }
-  return /* @__PURE__ */ jsx4(StyledCell, {
+  return /* @__PURE__ */ jsx5(StyledCell, {
     "data-column": cell.column.id,
     backgroundColor: highlight ? "#d5eaf4" : void 0,
     children: cellContent
@@ -2534,18 +2547,42 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 }
 
 // src/cells/HeaderCell.tsx
-import { Icon as Icon3, Table as Table3 } from "@equinor/eds-core-react";
+import { Icon as Icon3, Table as EdsTable } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
+import { tokens as tokens3 } from "@equinor/eds-tokens";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import styled6 from "styled-components";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var HeaderDiv = styled6.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  z-index: 5;
+import styled6, { css as css3 } from "styled-components";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var resizeCellStyle = css3`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    opacity: 0;
+    background: #aaa;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${tokens3.colors.interactive.focus.hex};
+    opacity: 1;
+  }
+
+  &:hover .resizer {
+    opacity: 1;
+  }
+`;
+var StickyCell2 = styled6(StickyHeaderCell)`
+  ${resizeCellStyle}
+`;
+var Cell2 = styled6(EdsTable.Cell)`
+  ${resizeCellStyle}
 `;
-var HeaderCell = ({ header }) => {
+var HeaderCell = ({ header, table }) => {
   var _a;
   const style = {
     width: header.column.getSize(),
@@ -2558,37 +2595,54 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ jsx5(StickyHeaderCell, {
+    return /* @__PURE__ */ jsx6(StickyCell2, {
       ...cellProps,
-      children: /* @__PURE__ */ jsx5(HeaderContent, {
-        header
+      children: /* @__PURE__ */ jsx6(HeaderContent, {
+        header,
+        table
       })
     }, header.id);
   }
-  return /* @__PURE__ */ jsx5(Table3.Cell, {
+  return /* @__PURE__ */ jsx6(Cell2, {
     ...cellProps,
-    children: /* @__PURE__ */ jsx5(HeaderContent, {
-      header
+    children: /* @__PURE__ */ jsx6(HeaderContent, {
+      header,
+      table
     })
   }, header.id);
 };
-function HeaderContent({ header }) {
+var HeaderDiv = styled6.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 5;
+`;
+function HeaderContent({ header, table }) {
   if (header.isPlaceholder)
     return null;
   return /* @__PURE__ */ jsxs3(HeaderDiv, {
     children: [
       flexRender2(header.column.columnDef.header, header.getContext()),
       {
-        asc: /* @__PURE__ */ jsx5(Icon3, {
+        asc: /* @__PURE__ */ jsx6(Icon3, {
           data: arrow_drop_up
         }),
-        desc: /* @__PURE__ */ jsx5(Icon3, {
+        desc: /* @__PURE__ */ jsx6(Icon3, {
           data: arrow_drop_down
         }),
-        none: /* @__PURE__ */ jsx5(Icon3, {
+        none: /* @__PURE__ */ jsx6(Icon3, {
           data: arrow_drop_down
         })
-      }[header.column.getIsSorted()] ?? null
+      }[header.column.getIsSorted()] ?? null,
+      table.options.enableColumnResizing && /* @__PURE__ */ jsx6("div", {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onClick: (e) => e.stopPropagation(),
+        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+        style: {
+          transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+        }
+      })
     ]
   });
 }
@@ -2606,16 +2660,16 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-import { tokens as tokens4 } from "@equinor/eds-tokens";
-import styled8, { css as css3 } from "styled-components";
+import { tokens as tokens5 } from "@equinor/eds-tokens";
+import styled8, { css as css4 } from "styled-components";
 
 // src/cells/TypographyCustom.tsx
 import {
   Typography as EdsTypography
 } from "@equinor/eds-core-react";
-import { tokens as tokens3 } from "@equinor/eds-tokens";
+import { tokens as tokens4 } from "@equinor/eds-tokens";
 import styled7 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var truncateStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
@@ -2624,8 +2678,8 @@ var truncateStyle = {
 var TypographyCustom = (props) => {
   const { truncate, enableShowAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
   if (enableShowAllOnHover)
-    return /* @__PURE__ */ jsx6(HoverCapture, {
-      children: /* @__PURE__ */ jsx6(EdsTypography, {
+    return /* @__PURE__ */ jsx7(HoverCapture, {
+      children: /* @__PURE__ */ jsx7(EdsTypography, {
         ...edsTypographyProps,
         style: {
           ...styleFromProps,
@@ -2634,20 +2688,20 @@ var TypographyCustom = (props) => {
       })
     });
   if (truncate)
-    return /* @__PURE__ */ jsx6(EdsTypography, {
+    return /* @__PURE__ */ jsx7(EdsTypography, {
       ...edsTypographyProps,
       style: {
         ...styleFromProps,
         ...truncateStyle
       }
     });
-  return /* @__PURE__ */ jsx6(EdsTypography, {
+  return /* @__PURE__ */ jsx7(EdsTypography, {
     ...edsTypographyProps,
     style: styleFromProps
   });
 };
 var HoverCapture = styled7.div`
-  height: ${tokens3.typography.table.cell_text.lineHeight};
+  height: ${tokens4.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2673,7 +2727,7 @@ var HoverCapture = styled7.div`
 `;
 
 // src/cells/HierarchyCell.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var CellWrapper = styled8(TypographyCustom)`
   height: 100%;
   display: flex;
@@ -2681,12 +2735,12 @@ var CellWrapper = styled8(TypographyCustom)`
 
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
-  ${({ depth }) => depth > 0 && css3`
-      border-left: 3px solid ${tokens4.colors.infographic.primary__moss_green_34.hex};
+  ${({ depth }) => depth > 0 && css4`
+      border-left: 3px solid ${tokens5.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${tokens4.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${tokens5.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -2698,7 +2752,7 @@ function HierarchyCell(cell, options = {}) {
     depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
-      /* @__PURE__ */ jsx7("span", {
+      /* @__PURE__ */ jsx8("span", {
         className: "--divider"
       }),
       ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
@@ -2709,7 +2763,7 @@ function HierarchyCell(cell, options = {}) {
 // src/cells/PopoverCell.tsx
 import { Popover, Typography } from "@equinor/eds-core-react";
 import { useRef, useState as useState2 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function PopoverCell(props) {
   const [open, setOpen] = useState2(false);
   const anchorRef = useRef(null);
@@ -2719,7 +2773,7 @@ function PopoverCell(props) {
     style: { position: "relative" },
     ref: anchorRef,
     children: [
-      /* @__PURE__ */ jsx8(TypographyCustom, {
+      /* @__PURE__ */ jsx9(TypographyCustom, {
         onClick: stopPropagation(handleClick),
         style: { cursor: "pointer" },
         truncate: true,
@@ -2733,13 +2787,13 @@ function PopoverCell(props) {
         onClose: handleClose,
         placement: "bottom",
         children: [
-          props.title && /* @__PURE__ */ jsx8(Popover.Title, {
-            children: /* @__PURE__ */ jsx8(Popover.Header, {
+          props.title && /* @__PURE__ */ jsx9(Popover.Title, {
+            children: /* @__PURE__ */ jsx9(Popover.Header, {
               children: props.title
             })
           }),
-          /* @__PURE__ */ jsx8(Popover.Content, {
-            children: /* @__PURE__ */ jsx8(Typography, {
+          /* @__PURE__ */ jsx9(Popover.Content, {
+            children: /* @__PURE__ */ jsx9(Typography, {
               children: String(props.value)
             })
           })
@@ -2750,10 +2804,10 @@ function PopoverCell(props) {
 }
 
 // src/cells/SelectColumnDef.tsx
-import { Button as Button2, Checkbox, Icon as Icon4, Radio } from "@equinor/eds-core-react";
+import { Button as Button2, Checkbox as Checkbox2, Icon as Icon4, Radio } from "@equinor/eds-core-react";
 import { chevron_down, chevron_up } from "@equinor/eds-icons";
 import styled9 from "styled-components";
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var CellWrapper2 = styled9.div`
   display: flex;
   align-items: center;
@@ -2766,8 +2820,8 @@ function SelectColumnDef(props) {
   return {
     id: "select",
     size: props.includeExpansionButton ? 96 : 48,
-    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx9(CellWrapper2, {
-      children: /* @__PURE__ */ jsx9(Checkbox, {
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx10(CellWrapper2, {
+      children: /* @__PURE__ */ jsx10(Checkbox2, {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
@@ -2776,28 +2830,28 @@ function SelectColumnDef(props) {
     }) : null,
     cell: ({ table, row }) => {
       const paddingLeft = "0px";
-      return /* @__PURE__ */ jsx9(CellWrapper2, {
+      return /* @__PURE__ */ jsx10(CellWrapper2, {
         paddingLeft,
         rowDepth: row.depth,
         children: /* @__PURE__ */ jsxs6(Fragment, {
           children: [
-            selectionMode === "single" ? /* @__PURE__ */ jsx9(Radio, {
+            selectionMode === "single" ? /* @__PURE__ */ jsx10(Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
-            }) : /* @__PURE__ */ jsx9(Checkbox, {
+            }) : /* @__PURE__ */ jsx10(Checkbox2, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
             }),
-            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx9(Button2, {
+            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx10(Button2, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
               onClick: stopPropagation(row.getToggleExpandedHandler()),
               style: { cursor: "pointer" },
-              children: /* @__PURE__ */ jsx9(Icon4, {
+              children: /* @__PURE__ */ jsx10(Icon4, {
                 data: row.getIsExpanded() ? chevron_up : chevron_down
               })
             })
@@ -2809,7 +2863,7 @@ function SelectColumnDef(props) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon5, Popover as Popover2, Tooltip } from "@equinor/eds-core-react";
+import { Button as Button3, Checkbox as Checkbox3, Divider, Icon as Icon5, Popover as Popover2, Tooltip } from "@equinor/eds-core-react";
 import { close, view_column } from "@equinor/eds-icons";
 import { useRef as useRef2, useState as useState3 } from "react";
 import styled10 from "styled-components";
@@ -2844,7 +2898,7 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var ColumnSelectContent = styled10.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -2862,10 +2916,10 @@ function ColumnSelect({ table }) {
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs7(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx10(Tooltip, {
+      /* @__PURE__ */ jsx11(Tooltip, {
         title: "Select columns",
         placement: "left",
-        children: /* @__PURE__ */ jsx10(Button3, {
+        children: /* @__PURE__ */ jsx11(Button3, {
           "aria-haspopup": true,
           id: "column-select-anchor",
           "aria-controls": "column-select-popover",
@@ -2873,7 +2927,7 @@ function ColumnSelect({ table }) {
           ref: referenceElement,
           variant: "ghost_icon",
           onClick: () => setIsOpen(true),
-          children: /* @__PURE__ */ jsx10(Icon5, {
+          children: /* @__PURE__ */ jsx11(Icon5, {
             name: "view_column",
             data: view_column
           })
@@ -2888,14 +2942,14 @@ function ColumnSelect({ table }) {
         children: [
           /* @__PURE__ */ jsxs7(Popover2.Header, {
             children: [
-              /* @__PURE__ */ jsx10(Popover2.Title, {
+              /* @__PURE__ */ jsx11(Popover2.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx10(Button3, {
+              /* @__PURE__ */ jsx11(Button3, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx10(Icon5, {
+                children: /* @__PURE__ */ jsx11(Icon5, {
                   name: "close",
                   data: close,
                   size: 24
@@ -2905,20 +2959,20 @@ function ColumnSelect({ table }) {
           }),
           /* @__PURE__ */ jsxs7(Popover2.Content, {
             children: [
-              /* @__PURE__ */ jsx10(ColumnSelectContent, {
+              /* @__PURE__ */ jsx11(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx10(Checkbox2, {
+                  return /* @__PURE__ */ jsx11(Checkbox3, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx10(Divider, {
+              /* @__PURE__ */ jsx11(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx10(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx10(Button3, {
+              /* @__PURE__ */ jsx11(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx11(Button3, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -2936,13 +2990,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/TableHeader.tsx
 import { Table as Table4 } from "@equinor/eds-core-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx11(Table4.Head, {
+  return /* @__PURE__ */ jsx12(Table4.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx11(Table4.Row, {
-      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx11(HeaderCell, {
-        header
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, {
+      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, {
+        header,
+        table
       }, header.id))
     }, headerGroup.id))
   });
@@ -2960,24 +3015,24 @@ import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } fro
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
-import { Table as EdsTable } from "@equinor/eds-core-react";
+import { Table as EdsTable2 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
 import { DotProgress, Table as Table5, Typography as Typography2 } from "@equinor/eds-core-react";
 import styled11 from "styled-components";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var PlaceholderTextWrapper = styled11.div`
   display: flex;
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ jsx12(Table5.Row, {
-    children: /* @__PURE__ */ jsx12(Table5.Cell, {
+  return /* @__PURE__ */ jsx13(Table5.Row, {
+    children: /* @__PURE__ */ jsx13(Table5.Cell, {
       colSpan: 100,
-      children: /* @__PURE__ */ jsx12(PlaceholderTextWrapper, {
-        children: isLoading ? /* @__PURE__ */ jsx12(DotProgress, {
+      children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, {
           color: "primary"
-        }) : /* @__PURE__ */ jsx12(Typography2, {
+        }) : /* @__PURE__ */ jsx13(Typography2, {
           children: "No data available"
         })
       })
@@ -2997,7 +3052,7 @@ var TableBody = styled12(Table6.Body)`
 // src/DataTable/components/TableRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
 import styled13 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function TableRow({
   row,
   rowConfig,
@@ -3007,7 +3062,7 @@ function TableRow({
 }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ jsx13(StyledTableRow, {
+  const tableRowContent = /* @__PURE__ */ jsx14(StyledTableRow, {
     active: row.getIsSelected(),
     "data-index": index,
     ref: measureElement,
@@ -3023,7 +3078,7 @@ function TableRow({
     onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
     children: row.getVisibleCells().map((cell) => {
       var _a2;
-      return /* @__PURE__ */ jsx13(DynamicCell, {
+      return /* @__PURE__ */ jsx14(DynamicCell, {
         cell,
         getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
         highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
@@ -3045,7 +3100,7 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function BasicTable({
   table,
   rowConfig,
@@ -3055,22 +3110,22 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs8(EdsTable, {
+  return /* @__PURE__ */ jsxs8(EdsTable2, {
     children: [
-      /* @__PURE__ */ jsx14(EdsTable.Caption, {
+      /* @__PURE__ */ jsx15(EdsTable2.Caption, {
         hidden: true,
         children: tableCaption
       }),
-      /* @__PURE__ */ jsx14(TableHeader, {
+      /* @__PURE__ */ jsx15(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx14(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx14(TableRow, {
+      /* @__PURE__ */ jsx15(TableBody, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, {
           row,
           rowConfig,
           cellConfig
-        }, row.id)) : /* @__PURE__ */ jsx14(PlaceholderRow, {
+        }, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, {
           isLoading
         })
       })
@@ -3088,7 +3143,7 @@ import { Button as Button4, Icon as Icon6, Input, Tooltip as Tooltip2 } from "@e
 import { close as close2 } from "@equinor/eds-icons";
 import { useEffect, useState as useState4 } from "react";
 import styled14 from "styled-components";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Wrapper3 = styled14.div`
   width: 200px;
 `;
@@ -3113,21 +3168,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx15(Wrapper3, {
-    children: /* @__PURE__ */ jsx15(Input, {
+  return /* @__PURE__ */ jsx16(Wrapper3, {
+    children: /* @__PURE__ */ jsx16(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx15(Icon6, {
+      leftAdornments: icon && /* @__PURE__ */ jsx16(Icon6, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx15(Tooltip2, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx16(Tooltip2, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx15(CloseButton, {
+        children: /* @__PURE__ */ jsx16(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx15(Icon6, {
+          children: /* @__PURE__ */ jsx16(Icon6, {
             name: close2.name,
             data: close2,
             size: 18
@@ -3150,7 +3205,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var TableBannerWrapper = styled15.div`
   display: flex;
   align-items: center;
@@ -3178,7 +3233,7 @@ function TableBanner({
       /* @__PURE__ */ jsxs9(FilterContainer, {
         className: "--filter-container-left",
         children: [
-          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx16(Typography3, {
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, {
             variant: "h3",
             as: "h2",
             children: tableCaption
@@ -3186,17 +3241,17 @@ function TableBanner({
           (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
         ]
       }),
-      /* @__PURE__ */ jsx16(FilterContainer, {
+      /* @__PURE__ */ jsx17(FilterContainer, {
         className: "--filter-container-right",
         children: /* @__PURE__ */ jsxs9(Fragment3, {
           children: [
-            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx16(DebouncedInput, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx17(DebouncedInput, {
               value: globalFilter.state,
               icon: search,
               placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
               onChange: (value) => globalFilter.onChange(String(value))
             }),
-            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx16(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx17(ColumnSelect, {
               table
             }),
             (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", {
@@ -3221,20 +3276,20 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table8 } from "@equinor/eds-core-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx17(Table8.Row, {
+  return /* @__PURE__ */ jsx18(Table8.Row, {
     style: { pointerEvents: "none" },
-    children: /* @__PURE__ */ jsx17(Table8.Cell, {
+    children: /* @__PURE__ */ jsx18(Table8.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function VirtualTable({
   table,
   rowConfig,
@@ -3256,32 +3311,32 @@ function VirtualTable({
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
   return /* @__PURE__ */ jsxs10(Table9, {
     children: [
-      /* @__PURE__ */ jsx18(Table9.Caption, {
+      /* @__PURE__ */ jsx19(Table9.Caption, {
         hidden: true,
         children: props.tableCaption
       }),
-      /* @__PURE__ */ jsx18(TableHeader, {
+      /* @__PURE__ */ jsx19(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
       /* @__PURE__ */ jsxs10(TableBody, {
         children: [
-          /* @__PURE__ */ jsx18(PaddingRow, {
+          /* @__PURE__ */ jsx19(PaddingRow, {
             height: paddingTop
           }),
           rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx18(TableRow, {
+            return /* @__PURE__ */ jsx19(TableRow, {
               row,
               rowConfig,
               cellConfig,
               index: virtualRow.index,
               measureElement: rowVirtualizer.measureElement
             }, row.id);
-          }) : /* @__PURE__ */ jsx18(PlaceholderRow, {
+          }) : /* @__PURE__ */ jsx19(PlaceholderRow, {
             isLoading: props.isLoading
           }),
-          /* @__PURE__ */ jsx18(PaddingRow, {
+          /* @__PURE__ */ jsx19(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -3327,7 +3382,7 @@ function useForceRerender() {
 }
 
 // src/DataTable/DataTable.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function canUseContainStrict(height) {
   if (!height)
     return false;
@@ -3403,13 +3458,15 @@ function DataTable(props) {
     defaultColumn: {
       cell: ({ cell }) => {
         const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
-        return /* @__PURE__ */ jsx19(TypographyCustom, {
+        return /* @__PURE__ */ jsx20(TypographyCustom, {
           truncate: truncateMode === "hover",
           enableShowAllOnHover: true,
           children: cell.getValue()
         });
       }
     },
+    enableColumnResizing: Boolean(props.columnResizing),
+    columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
     enableSorting: sorting == null ? void 0 : sorting.enableSorting,
     manualSorting: sorting == null ? void 0 : sorting.manualSorting,
     enableExpanding: Boolean(props.expansion),
@@ -3450,13 +3507,13 @@ function DataTable(props) {
     width: props == null ? void 0 : props.width,
     tableLayout: props == null ? void 0 : props.tableLayout,
     children: [
-      props.bannerConfig && /* @__PURE__ */ jsx19(TableBanner, {
+      props.bannerConfig && /* @__PURE__ */ jsx20(TableBanner, {
         table,
         bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
       }),
-      /* @__PURE__ */ jsx19("div", {
+      /* @__PURE__ */ jsx20("div", {
         ...props.tableContainerProps,
         className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
@@ -3469,7 +3526,7 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx19(VirtualTable, {
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(VirtualTable, {
           containerRef: tableContainerRef,
           tableCaption: props.tableCaption,
           table,
@@ -3477,7 +3534,7 @@ function DataTable(props) {
           cellConfig,
           isLoading,
           stickyHeader: props.stickyHeader
-        }) : /* @__PURE__ */ jsx19(BasicTable, {
+        }) : /* @__PURE__ */ jsx20(BasicTable, {
           tableCaption: props.tableCaption,
           table,
           rowConfig,
@@ -3491,7 +3548,7 @@ function DataTable(props) {
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
-import { Checkbox as Checkbox3 } from "@equinor/eds-core-react";
+import { Checkbox as Checkbox4 } from "@equinor/eds-core-react";
 import { Controller } from "react-hook-form";
 
 // src/form-meta/utils.tsx
@@ -3529,20 +3586,20 @@ function addFormMeta(withoutFormMeta) {
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function EditableCheckboxCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx20(Checkbox3, {
+    return /* @__PURE__ */ jsx21(Checkbox4, {
       enterKeyHint: "next",
       "aria-label": "readonly",
       readOnly: true,
       checked: context.getValue(),
       disabled: true
     });
-  return /* @__PURE__ */ jsx20(Controller, {
+  return /* @__PURE__ */ jsx21(Controller, {
     name: context.column.id,
-    render: ({ field: { value, ...field } }) => /* @__PURE__ */ jsx20(Checkbox3, {
+    render: ({ field: { value, ...field } }) => /* @__PURE__ */ jsx21(Checkbox4, {
       enterKeyHint: "send",
       "aria-label": "editable",
       checked: value,
@@ -3560,7 +3617,7 @@ import styled17 from "styled-components";
 // src/form-cells/utils.tsx
 import { Icon as Icon7 } from "@equinor/eds-core-react";
 import { error_filled, warning_filled } from "@equinor/eds-icons";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function getHelperTextProps({
   error,
   warning,
@@ -3570,7 +3627,7 @@ function getHelperTextProps({
     return {
       variant: "error",
       helperText: error.message,
-      helperIcon: /* @__PURE__ */ jsx21(Icon7, {
+      helperIcon: /* @__PURE__ */ jsx22(Icon7, {
         data: error_filled,
         size: 16
       })
@@ -3579,7 +3636,7 @@ function getHelperTextProps({
     return {
       variant: "warning",
       helperText: warning.message,
-      helperIcon: /* @__PURE__ */ jsx21(Icon7, {
+      helperIcon: /* @__PURE__ */ jsx22(Icon7, {
         data: warning_filled,
         size: 16
       })
@@ -3597,7 +3654,7 @@ function stopPropagation2(handler) {
 }
 
 // src/form-cells/EditableDateCell.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function EditableDateCell(props) {
   const { dateStringFormatter, ...context } = props;
   const rawValue = context.getValue();
@@ -3607,13 +3664,13 @@ function EditableDateCell(props) {
     [rawValue, dateStringFormatter]
   );
   if (!editMode)
-    return /* @__PURE__ */ jsx22(TypographyCustom, {
+    return /* @__PURE__ */ jsx23(TypographyCustom, {
       truncate: true,
       children: formattedValue
     });
-  return /* @__PURE__ */ jsx22(Controller2, {
+  return /* @__PURE__ */ jsx23(Controller2, {
     name: context.column.id,
-    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx22(InlineTextField, {
+    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx23(InlineTextField, {
       id: context.column.id,
       type: "date",
       autoComplete: "none",
@@ -3656,7 +3713,7 @@ var InlineTextField = styled17(TextField)`
 // src/form-cells/EditableDropdownSingleCell.tsx
 import { Autocomplete } from "@equinor/eds-core-react";
 import { Controller as Controller3 } from "react-hook-form";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
@@ -3664,15 +3721,15 @@ function EditableDropdownSingleCell(props) {
   const { options, ...context } = props;
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx23(TypographyCustom, {
+    return /* @__PURE__ */ jsx24(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ jsx23(Controller3, {
+  return /* @__PURE__ */ jsx24(Controller3, {
     name: context.column.id,
     render: ({ field: { value, onChange, ...field } }) => {
       const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption();
-      return /* @__PURE__ */ jsx23(Autocomplete, {
+      return /* @__PURE__ */ jsx24(Autocomplete, {
         label: "",
         selectedOptions: selectedOption && [selectedOption],
         options,
@@ -3694,18 +3751,18 @@ function EditableDropdownSingleCell(props) {
 import { TextField as TextField2 } from "@equinor/eds-core-react";
 import { Controller as Controller4 } from "react-hook-form";
 import styled18 from "styled-components";
-import { Fragment as Fragment4, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25 } from "react/jsx-runtime";
 function EditableNumberCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx24(TypographyCustom, {
+    return /* @__PURE__ */ jsx25(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ jsx24(Controller4, {
+  return /* @__PURE__ */ jsx25(Controller4, {
     name: context.column.id,
-    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx24(Fragment4, {
-      children: /* @__PURE__ */ jsx24(InlineTextField2, {
+    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx25(Fragment4, {
+      children: /* @__PURE__ */ jsx25(InlineTextField2, {
         id: context.column.id,
         type: "number",
         autoComplete: "none",
@@ -3745,7 +3802,7 @@ import { arrow_up } from "@equinor/eds-icons";
 import { useState as useState7 } from "react";
 import { Controller as Controller5 } from "react-hook-form";
 import styled19 from "styled-components";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 function EditableTextAreaCell(props) {
   const { title, ...context } = props;
   const [textareaValue, setTextareaValue] = useState7(context.getValue());
@@ -3753,14 +3810,14 @@ function EditableTextAreaCell(props) {
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ jsx25(PopoverCell, {
+    return /* @__PURE__ */ jsx26(PopoverCell, {
       id: name + "popover",
       value: context.getValue(),
       title
     });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ jsx25(Controller5, {
+  return /* @__PURE__ */ jsx26(Controller5, {
     name,
     render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsxs12(Fragment5, {
       children: [
@@ -3771,17 +3828,17 @@ function EditableTextAreaCell(props) {
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx25(StyledTextField, {
+            /* @__PURE__ */ jsx26(StyledTextField, {
               id: field.name,
               onChange,
               ref,
               ...field,
               ...getHelperTextProps({ error })
             }),
-            /* @__PURE__ */ jsx25(IconButton, {
+            /* @__PURE__ */ jsx26(IconButton, {
               variant: "ghost_icon",
               onClick: stopPropagation2(openDialog),
-              children: /* @__PURE__ */ jsx25(Icon8, {
+              children: /* @__PURE__ */ jsx26(Icon8, {
                 data: arrow_up,
                 size: 24,
                 style: { transform: "rotateZ(45deg)" }
@@ -3798,13 +3855,13 @@ function EditableTextAreaCell(props) {
           isDismissable: true,
           style: { width: "min(50rem, calc(100vw - 4rem))" },
           children: [
-            /* @__PURE__ */ jsx25(EDS.Header, {
-              children: /* @__PURE__ */ jsx25(EDS.Title, {
+            /* @__PURE__ */ jsx26(EDS.Header, {
+              children: /* @__PURE__ */ jsx26(EDS.Title, {
                 children: title
               })
             }),
-            /* @__PURE__ */ jsx25(EDS.Content, {
-              children: /* @__PURE__ */ jsx25(TextField3, {
+            /* @__PURE__ */ jsx26(EDS.Content, {
+              children: /* @__PURE__ */ jsx26(TextField3, {
                 style: {
                   maxWidth: "100%",
                   marginTop: "1rem"
@@ -3822,14 +3879,14 @@ function EditableTextAreaCell(props) {
             /* @__PURE__ */ jsxs12(EDS.Actions, {
               style: { display: "flex", gap: "1rem" },
               children: [
-                /* @__PURE__ */ jsx25(Button5, {
+                /* @__PURE__ */ jsx26(Button5, {
                   onClick: () => {
                     closeDialog();
                     onChange(textareaValue);
                   },
                   children: "Submit"
                 }),
-                /* @__PURE__ */ jsx25(Button5, {
+                /* @__PURE__ */ jsx26(Button5, {
                   variant: "ghost",
                   onClick: () => {
                     closeDialog();
@@ -3865,17 +3922,17 @@ var IconButton = styled19(Button5)`
 import { TextField as TextField4 } from "@equinor/eds-core-react";
 import { Controller as Controller6 } from "react-hook-form";
 import styled20 from "styled-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function EditableTextFieldCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx26(TypographyCustom, {
+    return /* @__PURE__ */ jsx27(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ jsx26(Controller6, {
+  return /* @__PURE__ */ jsx27(Controller6, {
     name: context.column.id,
-    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx26(InlineTextField3, {
+    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx27(InlineTextField3, {
       id: context.column.id,
       autoComplete: "none",
       value: String(value ?? ""),
@@ -3909,6 +3966,7 @@ var InlineTextField3 = styled20(TextField4)`
 export {
   AppShell,
   AppSidebar,
+  CheckboxCell,
   ChipsCell,
   ColumnSelect,
   DataTable,