@equinor/apollo-components 3.1.1 → 3.1.2-beta.1

package/dist/index.mjs

@@ -736,10 +736,10 @@ var require_lodash = __commonJS({
         }();
         var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
         var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : undefined2, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
-        var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set2 = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
+        var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
         var metaMap = WeakMap && new WeakMap();
         var realNames = {};
-        var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap);
+        var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap);
         var symbolProto = Symbol2 ? Symbol2.prototype : undefined2, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined2, symbolToString = symbolProto ? symbolProto.toString : undefined2;
         function lodash(value) {
           if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
@@ -2453,8 +2453,8 @@ var require_lodash = __commonJS({
             return func(number);
           };
         }
-        var createSet = !(Set2 && 1 / setToArray(new Set2([, -0]))[1] == INFINITY) ? noop : function(values2) {
-          return new Set2(values2);
+        var createSet = !(Set && 1 / setToArray(new Set([, -0]))[1] == INFINITY) ? noop : function(values2) {
+          return new Set(values2);
         };
         function createToPairs(keysFunc) {
           return function(object) {
@@ -2753,7 +2753,7 @@ var require_lodash = __commonJS({
           return result2;
         };
         var getTag = baseGetTag;
-        if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set2 && getTag(new Set2()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
+        if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
           getTag = function(value) {
             var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : undefined2, ctorString = Ctor ? toSource(Ctor) : "";
             if (ctorString) {
@@ -4107,7 +4107,7 @@ var require_lodash = __commonJS({
           customizer = typeof customizer == "function" ? customizer : undefined2;
           return baseIsMatch(object, source, getMatchData(source), customizer);
         }
-        function isNaN2(value) {
+        function isNaN(value) {
           return isNumber(value) && value != +value;
         }
         function isNative(value) {
@@ -5184,7 +5184,7 @@ var require_lodash = __commonJS({
         lodash.isMap = isMap;
         lodash.isMatch = isMatch;
         lodash.isMatchWith = isMatchWith;
-        lodash.isNaN = isNaN2;
+        lodash.isNaN = isNaN;
         lodash.isNative = isNative;
         lodash.isNil = isNil;
         lodash.isNull = isNull;
@@ -5458,62 +5458,6 @@ var require_lodash = __commonJS({
   }
 });
 
-// src/index.ts
-export * from "apollo-common";
-
-// ../apollo-utils/src/form-meta/utils.tsx
-var import_lodash = __toESM(require_lodash());
-
-// ../../node_modules/react-hook-form/dist/index.esm.mjs
-import React from "react";
-var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
-var VALIDATION_MODE = {
-  onBlur: "onBlur",
-  onChange: "onChange",
-  onSubmit: "onSubmit",
-  onTouched: "onTouched",
-  all: "all"
-};
-var HookFormContext = React.createContext(null);
-var useFormContext = () => React.useContext(HookFormContext);
-var defaultOptions = {
-  mode: VALIDATION_MODE.onSubmit,
-  reValidateMode: VALIDATION_MODE.onChange,
-  shouldFocusError: true
-};
-
-// ../apollo-utils/src/form-meta/utils.tsx
-var formMeta = {
-  _editMode: false,
-  _isNew: false,
-  _hasRemoteChange: false
-};
-function useEditMode() {
-  const { watch } = useFormContext();
-  return watch("_editMode") ?? false;
-}
-function useHasRemoteChange() {
-  const { watch } = useFormContext();
-  return watch("_hasRemoteChange") ?? false;
-}
-function useGetIsNew() {
-  const { getValues } = useFormContext();
-  return () => getValues("_isNew") ?? false;
-}
-function useSetFormMeta() {
-  const { setValue } = useFormContext();
-  return (newValues) => objectKeys(newValues).forEach((key) => newValues[key] && setValue(key, newValues[key]));
-}
-function objectKeys(obj) {
-  return Object.keys(obj);
-}
-function removeFormMeta(withFormMeta) {
-  return (0, import_lodash.omit)(withFormMeta, Object.keys(formMeta));
-}
-function addFormMeta(withoutFormMeta) {
-  return { ...formMeta, ...withoutFormMeta };
-}
-
 // src/AppShell/AppShell.tsx
 import { Icon, TopBar } from "@equinor/eds-core-react";
 import { apps } from "@equinor/eds-icons";
@@ -5630,6 +5574,12 @@ function stringToHslColor(str, s = 80, l = 85) {
   const h = hash % 360;
   return "hsl(" + h + ", " + s + "%, " + l + "%)";
 }
+function stopPropagation(handler) {
+  return (e) => {
+    e.stopPropagation();
+    handler(e);
+  };
+}
 
 // src/cells/ChipsCell.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -5788,11 +5738,67 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
+import { tokens as tokens4 } from "@equinor/eds-tokens";
+import styled8, { css as css3 } 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 { TypographyCustom } from "apollo-common";
-import styled7, { css as css3 } from "styled-components";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var CellWrapper = styled7(TypographyCustom)`
+import styled7 from "styled-components";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var truncateStyle = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+var TypographyCustom = (props) => {
+  const { truncate, style: styleFromProps, ...edsTypographyProps } = props;
+  if (truncate)
+    return /* @__PURE__ */ jsx6(HoverCapture, {
+      children: /* @__PURE__ */ jsx6(EdsTypography, {
+        ...edsTypographyProps,
+        style: {
+          ...styleFromProps,
+          ...truncateStyle
+        }
+      })
+    });
+  return /* @__PURE__ */ jsx6(EdsTypography, {
+    ...edsTypographyProps,
+    style: styleFromProps
+  });
+};
+var HoverCapture = styled7.div`
+  height: ${tokens3.typography.table.cell_text.lineHeight};
+  background-color: inherit;
+
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  & > * {
+    width: inherit;
+    position: absolute;
+  }
+
+  &:hover > * {
+    width: auto;
+    z-index: 1;
+    padding: 0.5em 1em;
+    margin: -0.5em -1em;
+
+    background-color: inherit;
+  }
+`;
+
+// src/cells/HierarchyCell.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var CellWrapper = styled8(TypographyCustom)`
   height: 100%;
   display: flex;
   align-items: center;
@@ -5800,11 +5806,11 @@ var CellWrapper = styled7(TypographyCustom)`
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
   ${({ depth }) => depth > 0 && css3`
-      border-left: 3px solid ${tokens3.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${tokens4.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${tokens3.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${tokens4.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -5816,7 +5822,7 @@ function HierarchyCell(cell, options = {}) {
     depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
-      /* @__PURE__ */ jsx6("span", {
+      /* @__PURE__ */ jsx7("span", {
         className: "--divider"
       }),
       ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
@@ -5824,13 +5830,54 @@ 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";
+var PopoverCell = (props) => {
+  const [open, setOpen] = useState2(false);
+  const anchorRef = useRef(null);
+  const handleClick = () => setOpen(!open);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ jsxs5("div", {
+    style: { position: "relative" },
+    ref: anchorRef,
+    children: [
+      /* @__PURE__ */ jsx8(TypographyCustom, {
+        truncate: true,
+        onClick: stopPropagation(handleClick),
+        children: String(props.value)
+      }),
+      /* @__PURE__ */ jsxs5(Popover, {
+        id: props.id,
+        open,
+        "aria-controls": "expand cell",
+        anchorEl: anchorRef.current,
+        onClose: handleClose,
+        placement: "bottom",
+        children: [
+          props.title && /* @__PURE__ */ jsx8(Popover.Title, {
+            children: /* @__PURE__ */ jsx8(Popover.Header, {
+              children: props.title
+            })
+          }),
+          /* @__PURE__ */ jsx8(Popover.Content, {
+            children: /* @__PURE__ */ jsx8(Typography, {
+              children: String(props.value)
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+
 // src/cells/SelectColumnDef.tsx
 import { Button as Button2, Checkbox, Icon as Icon4, Radio } from "@equinor/eds-core-react";
 import { chevron_down, chevron_up } from "@equinor/eds-icons";
-import { stopPropagation } from "apollo-common";
-import styled8 from "styled-components";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var CellWrapper2 = styled8.div`
+import styled9 from "styled-components";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var CellWrapper2 = styled9.div`
   display: flex;
   align-items: center;
   width: 48px;
@@ -5842,8 +5889,8 @@ function SelectColumnDef(props) {
   return {
     id: "select",
     size: props.includeExpansionButton ? 96 : 48,
-    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx7(CellWrapper2, {
-      children: /* @__PURE__ */ jsx7(Checkbox, {
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx9(CellWrapper2, {
+      children: /* @__PURE__ */ jsx9(Checkbox, {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
@@ -5852,28 +5899,28 @@ function SelectColumnDef(props) {
     }) : null,
     cell: ({ table, row }) => {
       const paddingLeft = "0px";
-      return /* @__PURE__ */ jsx7(CellWrapper2, {
+      return /* @__PURE__ */ jsx9(CellWrapper2, {
         paddingLeft,
         rowDepth: row.depth,
-        children: /* @__PURE__ */ jsxs5(Fragment, {
+        children: /* @__PURE__ */ jsxs6(Fragment, {
           children: [
-            selectionMode === "single" ? /* @__PURE__ */ jsx7(Radio, {
+            selectionMode === "single" ? /* @__PURE__ */ jsx9(Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
-            }) : /* @__PURE__ */ jsx7(Checkbox, {
+            }) : /* @__PURE__ */ jsx9(Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
             }),
-            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx7(Button2, {
+            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx9(Button2, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
               onClick: stopPropagation(row.getToggleExpandedHandler()),
               style: { cursor: "pointer" },
-              children: /* @__PURE__ */ jsx7(Icon4, {
+              children: /* @__PURE__ */ jsx9(Icon4, {
                 data: row.getIsExpanded() ? chevron_up : chevron_down
               })
             })
@@ -5885,10 +5932,10 @@ function SelectColumnDef(props) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon5, Popover, Tooltip } from "@equinor/eds-core-react";
+import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon5, Popover as Popover2, Tooltip } from "@equinor/eds-core-react";
 import { close, view_column } from "@equinor/eds-icons";
-import { useRef, useState as useState2 } from "react";
-import styled9 from "styled-components";
+import { useRef as useRef2, useState as useState3 } from "react";
+import styled10 from "styled-components";
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -5920,28 +5967,28 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var ColumnSelectContent = styled9.div`
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ColumnSelectContent = styled10.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = styled9.div`
+var ActionsWrapper = styled10.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;
 `;
 function ColumnSelect({ table }) {
-  const [isOpen, setIsOpen] = useState2(false);
-  const referenceElement = useRef(null);
+  const [isOpen, setIsOpen] = useState3(false);
+  const referenceElement = useRef2(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ jsxs6(Fragment2, {
+  return /* @__PURE__ */ jsxs7(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx8(Tooltip, {
+      /* @__PURE__ */ jsx10(Tooltip, {
         title: "Select columns",
         placement: "left",
-        children: /* @__PURE__ */ jsx8(Button3, {
+        children: /* @__PURE__ */ jsx10(Button3, {
           "aria-haspopup": true,
           id: "column-select-anchor",
           "aria-controls": "column-select-popover",
@@ -5949,29 +5996,29 @@ function ColumnSelect({ table }) {
           ref: referenceElement,
           variant: "ghost_icon",
           onClick: () => setIsOpen(true),
-          children: /* @__PURE__ */ jsx8(Icon5, {
+          children: /* @__PURE__ */ jsx10(Icon5, {
             name: "view_column",
             data: view_column
           })
         })
       }),
-      /* @__PURE__ */ jsxs6(Popover, {
+      /* @__PURE__ */ jsxs7(Popover2, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ jsxs6(Popover.Header, {
+          /* @__PURE__ */ jsxs7(Popover2.Header, {
             children: [
-              /* @__PURE__ */ jsx8(Popover.Title, {
+              /* @__PURE__ */ jsx10(Popover2.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx8(Button3, {
+              /* @__PURE__ */ jsx10(Button3, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx8(Icon5, {
+                children: /* @__PURE__ */ jsx10(Icon5, {
                   name: "close",
                   data: close,
                   size: 24
@@ -5979,22 +6026,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6(Popover.Content, {
+          /* @__PURE__ */ jsxs7(Popover2.Content, {
             children: [
-              /* @__PURE__ */ jsx8(ColumnSelectContent, {
+              /* @__PURE__ */ jsx10(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx8(Checkbox2, {
+                  return /* @__PURE__ */ jsx10(Checkbox2, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx8(Divider, {
+              /* @__PURE__ */ jsx10(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx8(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx8(Button3, {
+              /* @__PURE__ */ jsx10(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx10(Button3, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -6012,12 +6059,12 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/TableHeader.tsx
 import { Table as Table4 } from "@equinor/eds-core-react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx9(Table4.Head, {
+  return /* @__PURE__ */ jsx11(Table4.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx9(Table4.Row, {
-      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx9(HeaderCell, {
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx11(Table4.Row, {
+      children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx11(HeaderCell, {
         header
       }, header.id))
     }, headerGroup.id))
@@ -6032,29 +6079,28 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { TypographyCustom as TypographyCustom2 } from "apollo-common";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import styled15 from "styled-components";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
-import { DotProgress, Table as Table5, Typography } from "@equinor/eds-core-react";
-import styled10 from "styled-components";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var PlaceholderTextWrapper = styled10.div`
+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";
+var PlaceholderTextWrapper = styled11.div`
   display: flex;
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ jsx10(Table5.Row, {
-    children: /* @__PURE__ */ jsx10(Table5.Cell, {
+  return /* @__PURE__ */ jsx12(Table5.Row, {
+    children: /* @__PURE__ */ jsx12(Table5.Cell, {
       colSpan: 100,
-      children: /* @__PURE__ */ jsx10(PlaceholderTextWrapper, {
-        children: isLoading ? /* @__PURE__ */ jsx10(DotProgress, {
+      children: /* @__PURE__ */ jsx12(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ jsx12(DotProgress, {
           color: "primary"
-        }) : /* @__PURE__ */ jsx10(Typography, {
+        }) : /* @__PURE__ */ jsx12(Typography2, {
           children: "No data available"
         })
       })
@@ -6064,8 +6110,8 @@ function PlaceholderRow({ isLoading }) {
 
 // src/DataTable/components/TableBody.tsx
 import { Table as Table6 } from "@equinor/eds-core-react";
-import styled11 from "styled-components";
-var TableBody = styled11(Table6.Body)`
+import styled12 from "styled-components";
+var TableBody = styled12(Table6.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
@@ -6073,12 +6119,12 @@ var TableBody = styled11(Table6.Body)`
 
 // src/DataTable/components/TableRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
-import styled12 from "styled-components";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import styled13 from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function TableRow({ row, rowConfig, cellConfig }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ jsx11(StyledTableRow, {
+  const tableRowContent = /* @__PURE__ */ jsx13(StyledTableRow, {
     active: row.getIsSelected(),
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
@@ -6092,7 +6138,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
     onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
     children: row.getVisibleCells().map((cell) => {
       var _a2;
-      return /* @__PURE__ */ jsx11(DynamicCell, {
+      return /* @__PURE__ */ jsx13(DynamicCell, {
         cell,
         getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
         highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
@@ -6101,7 +6147,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
   });
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = styled12(Table7.Row)`
+var StyledTableRow = styled13(Table7.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -6114,7 +6160,7 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function BasicTable({
   table,
   rowConfig,
@@ -6124,22 +6170,22 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs7(EdsTable, {
+  return /* @__PURE__ */ jsxs8(EdsTable, {
     children: [
-      /* @__PURE__ */ jsx12(EdsTable.Caption, {
+      /* @__PURE__ */ jsx14(EdsTable.Caption, {
         hidden: true,
         children: tableCaption
       }),
-      /* @__PURE__ */ jsx12(TableHeader, {
+      /* @__PURE__ */ jsx14(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx12(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx12(TableRow, {
+      /* @__PURE__ */ jsx14(TableBody, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx14(TableRow, {
           row,
           rowConfig,
           cellConfig
-        }, row.id)) : /* @__PURE__ */ jsx12(PlaceholderRow, {
+        }, row.id)) : /* @__PURE__ */ jsx14(PlaceholderRow, {
           isLoading
         })
       })
@@ -6148,20 +6194,20 @@ function BasicTable({
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Typography as Typography2 } from "@equinor/eds-core-react";
+import { Typography as Typography3 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
-import styled14 from "styled-components";
+import styled15 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
 import { Button as Button4, Icon as Icon6, Input, Tooltip as Tooltip2 } from "@equinor/eds-core-react";
 import { close as close2 } from "@equinor/eds-icons";
-import { useEffect, useState as useState3 } from "react";
-import styled13 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Wrapper3 = styled13.div`
+import { useEffect, useState as useState4 } from "react";
+import styled14 from "styled-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Wrapper3 = styled14.div`
   width: 200px;
 `;
-var CloseButton = styled13(Button4)`
+var CloseButton = styled14(Button4)`
   width: 24px;
   height: 24px;
 `;
@@ -6172,7 +6218,7 @@ function DebouncedInput({
   debounce = 500,
   ...props
 }) {
-  const [value, setValue] = useState3(initialValue);
+  const [value, setValue] = useState4(initialValue);
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
@@ -6182,21 +6228,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx13(Wrapper3, {
-    children: /* @__PURE__ */ jsx13(Input, {
+  return /* @__PURE__ */ jsx15(Wrapper3, {
+    children: /* @__PURE__ */ jsx15(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx13(Icon6, {
+      leftAdornments: icon && /* @__PURE__ */ jsx15(Icon6, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx13(Tooltip2, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx15(Tooltip2, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx13(CloseButton, {
+        children: /* @__PURE__ */ jsx15(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx13(Icon6, {
+          children: /* @__PURE__ */ jsx15(Icon6, {
             name: close2.name,
             data: close2,
             size: 18
@@ -6219,15 +6265,15 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var TableBannerWrapper = styled14.div`
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var TableBannerWrapper = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.padding || "1rem"};
 `;
-var FilterContainer = styled14.div`
+var FilterContainer = styled15.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -6240,14 +6286,14 @@ function TableBanner({
   globalFilter
 }) {
   var _a;
-  return /* @__PURE__ */ jsxs8(TableBannerWrapper, {
+  return /* @__PURE__ */ jsxs9(TableBannerWrapper, {
     className: "--table-caption",
     padding: bannerConfig == null ? void 0 : bannerConfig.padding,
     children: [
-      /* @__PURE__ */ jsxs8(FilterContainer, {
+      /* @__PURE__ */ jsxs9(FilterContainer, {
         className: "--filter-container-left",
         children: [
-          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx14(Typography2, {
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx16(Typography3, {
             variant: "h3",
             as: "h2",
             children: tableCaption
@@ -6255,20 +6301,20 @@ function TableBanner({
           (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
         ]
       }),
-      /* @__PURE__ */ jsx14(FilterContainer, {
+      /* @__PURE__ */ jsx16(FilterContainer, {
         className: "--filter-container-right",
-        children: /* @__PURE__ */ jsxs8(Fragment3, {
+        children: /* @__PURE__ */ jsxs9(Fragment3, {
           children: [
-            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx14(DebouncedInput, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx16(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__ */ jsx14(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx16(ColumnSelect, {
               table
             }),
-            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs8("span", {
+            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs9("span", {
               children: [
                 table.options.data.length.toLocaleString(),
                 " /",
@@ -6290,19 +6336,19 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table8 } from "@equinor/eds-core-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx15(Table8.Row, {
-    children: /* @__PURE__ */ jsx15(Table8.Cell, {
+  return /* @__PURE__ */ jsx17(Table8.Row, {
+    children: /* @__PURE__ */ jsx17(Table8.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function VirtualTable({
   table,
   rowConfig,
@@ -6321,32 +6367,32 @@ function VirtualTable({
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   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__ */ jsxs9(Table9, {
+  return /* @__PURE__ */ jsxs10(Table9, {
     children: [
-      /* @__PURE__ */ jsx16(Table9.Caption, {
+      /* @__PURE__ */ jsx18(Table9.Caption, {
         hidden: true,
         children: props.tableCaption
       }),
-      /* @__PURE__ */ jsx16(TableHeader, {
+      /* @__PURE__ */ jsx18(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs9(TableBody, {
+      /* @__PURE__ */ jsxs10(TableBody, {
         children: [
-          /* @__PURE__ */ jsx16(PaddingRow, {
+          /* @__PURE__ */ jsx18(PaddingRow, {
             height: paddingTop
           }),
           rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx16(TableRow, {
+            return /* @__PURE__ */ jsx18(TableRow, {
               row,
               rowConfig,
               cellConfig
             }, row.id);
-          }) : /* @__PURE__ */ jsx16(PlaceholderRow, {
+          }) : /* @__PURE__ */ jsx18(PlaceholderRow, {
             isLoading: props.isLoading
           }),
-          /* @__PURE__ */ jsx16(PaddingRow, {
+          /* @__PURE__ */ jsx18(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -6385,8 +6431,8 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
 }
 
 // src/DataTable/DataTable.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
-var DataTableWrapper = styled15.div`
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var DataTableWrapper = styled16.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -6406,12 +6452,12 @@ var DataTableWrapper = styled15.div`
 function DataTable(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = useState4({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState5({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
     ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState4("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState5("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -6420,17 +6466,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = useState4([]);
+  const [internalSortingState, setInternalSortingState] = useState5([]);
   const [sortingState, setSortingState] = [
     ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
     ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = useState4({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState5({});
   const [rowSelectionState, setRowSelectionState] = [
     ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
     ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = useState4({});
+  const [internalExpandedState, setInternalExpandedState] = useState5({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -6449,7 +6495,7 @@ function DataTable(props) {
     defaultColumn: {
       cell: ({ cell }) => {
         const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
-        return /* @__PURE__ */ jsx17(TypographyCustom2, {
+        return /* @__PURE__ */ jsx19(TypographyCustom, {
           truncate: truncateMode === "hover",
           children: cell.getValue()
         });
@@ -6480,23 +6526,23 @@ function DataTable(props) {
     }
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
-  const tableContainerRef = useRef2(null);
+  const tableContainerRef = useRef3(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
-  return /* @__PURE__ */ jsxs10(DataTableWrapper, {
+  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: [
-      props.bannerConfig && /* @__PURE__ */ jsx17(TableBanner, {
+      props.bannerConfig && /* @__PURE__ */ jsx19(TableBanner, {
         table,
         bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
       }),
-      /* @__PURE__ */ jsx17("div", {
+      /* @__PURE__ */ jsx19("div", {
         ...props.tableContainerProps,
         className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
@@ -6509,7 +6555,7 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx17(VirtualTable, {
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx19(VirtualTable, {
           containerRef: tableContainerRef,
           tableCaption: props.tableCaption,
           table,
@@ -6517,7 +6563,7 @@ function DataTable(props) {
           cellConfig,
           isLoading,
           stickyHeader: props.stickyHeader
-        }) : /* @__PURE__ */ jsx17(BasicTable, {
+        }) : /* @__PURE__ */ jsx19(BasicTable, {
           tableCaption: props.tableCaption,
           table,
           rowConfig,
@@ -6529,25 +6575,478 @@ function DataTable(props) {
     ]
   });
 }
+
+// src/form-cells/EditableCheckboxCell.tsx
+import { Checkbox as Checkbox3, EdsProvider } from "@equinor/eds-core-react";
+import { Controller, useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/form-meta/utils.tsx
+var import_lodash = __toESM(require_lodash());
+import { useFormContext } from "react-hook-form";
+var formMeta = {
+  _editMode: false,
+  _isNew: false,
+  _hasRemoteChange: false
+};
+function useEditMode() {
+  const { watch } = useFormContext();
+  return watch("_editMode") ?? false;
+}
+function useHasRemoteChange() {
+  const { watch } = useFormContext();
+  return watch("_hasRemoteChange") ?? false;
+}
+function useGetIsNew() {
+  const { getValues } = useFormContext();
+  return () => getValues("_isNew") ?? false;
+}
+function useSetFormMeta() {
+  const { setValue } = useFormContext();
+  return (newValues) => objectKeys(newValues).forEach((key) => newValues[key] && setValue(key, newValues[key]));
+}
+function objectKeys(obj) {
+  return Object.keys(obj);
+}
+function removeFormMeta(withFormMeta) {
+  return (0, import_lodash.omit)(withFormMeta, Object.keys(formMeta));
+}
+function addFormMeta(withoutFormMeta) {
+  return { ...formMeta, ...withoutFormMeta };
+}
+
+// src/form-cells/EditableCheckboxCell.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function EditableCheckboxCell(context) {
+  const editMode = useEditMode();
+  const { control } = useFormContext2();
+  if (!editMode)
+    return /* @__PURE__ */ jsx20(EdsProvider, {
+      density: "compact",
+      children: /* @__PURE__ */ jsx20(Checkbox3, {
+        enterKeyHint: "next",
+        "aria-label": "readonly",
+        readOnly: true,
+        checked: context.getValue(),
+        disabled: true
+      })
+    });
+  return /* @__PURE__ */ jsx20(Controller, {
+    control,
+    name: context.column.id,
+    render: ({ field: { value, ...field } }) => /* @__PURE__ */ jsx20(EdsProvider, {
+      density: "compact",
+      children: /* @__PURE__ */ jsx20(Checkbox3, {
+        enterKeyHint: "send",
+        "aria-label": "editable",
+        checked: value,
+        ...field
+      })
+    })
+  });
+}
+
+// src/form-cells/EditableDateCell.tsx
+import { TextField } from "@equinor/eds-core-react";
+import { useMemo } from "react";
+import { Controller as Controller2, useFormContext as useFormContext3 } from "react-hook-form";
+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";
+function getHelperTextProps({
+  error,
+  warning,
+  helperText
+}) {
+  if (error)
+    return {
+      variant: "error",
+      helperText: error.message,
+      helperIcon: /* @__PURE__ */ jsx21(Icon7, {
+        data: error_filled,
+        size: 16
+      })
+    };
+  if (warning)
+    return {
+      variant: "warning",
+      helperText: warning.message,
+      helperIcon: /* @__PURE__ */ jsx21(Icon7, {
+        data: warning_filled,
+        size: 16
+      })
+    };
+  return {
+    helperText,
+    helperIcon: null
+  };
+}
+function stopPropagation2(handler) {
+  return (e) => {
+    e.stopPropagation();
+    handler(e);
+  };
+}
+
+// src/form-cells/EditableDateCell.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function EditableDateCell(props) {
+  const { dateStringFormatter, ...context } = props;
+  const rawValue = context.getValue();
+  const editMode = useEditMode();
+  const { control } = useFormContext3();
+  const formattedValue = useMemo(
+    () => (dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) ?? rawValue,
+    [rawValue, dateStringFormatter]
+  );
+  if (!editMode)
+    return /* @__PURE__ */ jsx22(TypographyCustom, {
+      truncate: true,
+      children: formattedValue
+    });
+  return /* @__PURE__ */ jsx22(Controller2, {
+    control,
+    name: context.column.id,
+    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx22(InlineTextField, {
+      id: context.column.id,
+      type: "date",
+      autoComplete: "none",
+      value: value ? parseISODate(value) : "",
+      onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : ""),
+      ...getHelperTextProps({ error }),
+      ...field
+    })
+  });
+}
+function parseISODate(dateString) {
+  const date = new Date(dateString);
+  const offset = date.getTimezoneOffset();
+  const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1e3);
+  return dateWithoutOffset.toISOString().split("T")[0];
+}
+var InlineTextField = styled17(TextField)`
+  /* 
+  TODO: Improve input based on feedback from UX
+  & > div {
+    background: transparent;
+    margin: 0 -0.5rem;
+    padding: 0 0.5rem;
+    box-shadow: none;
+    width: auto;
+  }
+
+  input {
+    padding: 0;
+    letter-spacing: 0;
+    font-weight: 400;
+    color: inherit;
+
+    ::placeholder {
+      color: red;
+    }
+  } */
+`;
+
+// src/form-cells/EditableDropdownCell.tsx
+import { Autocomplete } from "@equinor/eds-core-react";
+import { Controller as Controller3, useFormContext as useFormContext4 } from "react-hook-form";
+import styled18 from "styled-components";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function buildEmptyOption() {
+  return { label: "", value: "" };
+}
+function EditableDropdownCell(props) {
+  const { options, ...context } = props;
+  const editMode = useEditMode();
+  const { control } = useFormContext4();
+  if (!editMode)
+    return /* @__PURE__ */ jsx23(TypographyCustom, {
+      truncate: true,
+      children: context.getValue()
+    });
+  return /* @__PURE__ */ jsx23(Controller3, {
+    control,
+    name: context.column.id,
+    render: ({ field: { value, onChange, ...field } }) => {
+      const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption;
+      return /* @__PURE__ */ jsx23(AutocompleteCustom, {
+        label: "",
+        selectedOptions: selectedOption && [selectedOption],
+        options,
+        optionLabel: (option) => (option == null ? void 0 : option.label) ?? "",
+        "aria-required": true,
+        hideClearButton: true,
+        "aria-autocomplete": "none",
+        onOptionsChange: (changes) => {
+          const [change] = changes.selectedItems;
+          onChange(change == null ? void 0 : change.value);
+        },
+        ...field
+      });
+    }
+  });
+}
+var AutocompleteCustom = styled18(Autocomplete)`
+  input[type='text'] {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: ${({ hideClearButton }) => hideClearButton ? `calc(8px + (24px * 1))` : `calc(8px + (24px * 2))`};
+  }
+`;
+
+// src/form-cells/EditableNumberCell.tsx
+import { TextField as TextField2 } from "@equinor/eds-core-react";
+import { Controller as Controller4, useFormContext as useFormContext5 } from "react-hook-form";
+import styled19 from "styled-components";
+import { Fragment as Fragment4, jsx as jsx24 } from "react/jsx-runtime";
+function EditableNumberCell(context) {
+  const editMode = useEditMode();
+  const { control } = useFormContext5();
+  if (!editMode)
+    return /* @__PURE__ */ jsx24(TypographyCustom, {
+      truncate: true,
+      children: context.getValue()
+    });
+  return /* @__PURE__ */ jsx24(Controller4, {
+    control,
+    name: context.column.id,
+    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx24(Fragment4, {
+      children: /* @__PURE__ */ jsx24(InlineTextField2, {
+        id: context.column.id,
+        type: "number",
+        autoComplete: "none",
+        onChange: (e) => onChange(e.target.valueAsNumber),
+        ...field,
+        ...getHelperTextProps({ error })
+      })
+    })
+  });
+}
+var InlineTextField2 = styled19(TextField2)`
+  /* 
+  TODO: Improve input based on feedback from UX
+  & > div {
+    background: transparent;
+    margin: 0 -0.5rem;
+    padding: 0 0.5rem;
+    box-shadow: none;
+    width: auto;
+  }
+
+  input {
+    padding: 0;
+    letter-spacing: 0;
+    font-weight: 400;
+    color: inherit;
+
+    ::placeholder {
+      color: red;
+    }
+  } */
+`;
+
+// src/form-cells/EditableTextAreaCell.tsx
+import { Button as Button5, Dialog as EDS, Icon as Icon8, TextField as TextField3 } from "@equinor/eds-core-react";
+import { useState as useState6 } from "react";
+import { Controller as Controller5, useFormContext as useFormContext6 } from "react-hook-form";
+import styled20 from "styled-components";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+function EditableTextAreaCell(props) {
+  const { title, ...context } = props;
+  const [textareaValue, setTextareaValue] = useState6(context.getValue());
+  const [open, setOpen] = useState6(false);
+  const editMode = useEditMode();
+  const { control } = useFormContext6();
+  const name = context.column.id;
+  if (!editMode)
+    return /* @__PURE__ */ jsx25(PopoverCell, {
+      id: name + "popover",
+      value: context.getValue(),
+      title
+    });
+  const openDialog = () => setOpen(true);
+  const closeDialog = () => setOpen(false);
+  return /* @__PURE__ */ jsx25(Controller5, {
+    control,
+    name,
+    render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsxs12(Fragment5, {
+      children: [
+        /* @__PURE__ */ jsxs12("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx25(StyledTextField, {
+              id: field.name,
+              onChange,
+              ref,
+              ...field,
+              ...getHelperTextProps({ error })
+            }),
+            /* @__PURE__ */ jsx25(IconButton, {
+              variant: "ghost_icon",
+              onClick: stopPropagation2(openDialog),
+              children: /* @__PURE__ */ jsx25(Icon8, {
+                name: "arrow_up",
+                size: 24,
+                style: { transform: "rotateZ(45deg)" }
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs12(EDS, {
+          open,
+          onClose: () => {
+            closeDialog();
+            onChange(textareaValue);
+          },
+          isDismissable: true,
+          style: { width: "min(50rem, calc(100vw - 4rem))" },
+          children: [
+            /* @__PURE__ */ jsx25(EDS.Header, {
+              children: /* @__PURE__ */ jsx25(EDS.Title, {
+                children: title
+              })
+            }),
+            /* @__PURE__ */ jsx25(EDS.Content, {
+              children: /* @__PURE__ */ jsx25(TextField3, {
+                style: {
+                  maxWidth: "100%",
+                  marginTop: "1rem"
+                },
+                id: field.name + "modal",
+                multiline: true,
+                rows: 8,
+                name: field.name + "modal",
+                value: textareaValue,
+                onChange: (e) => {
+                  setTextareaValue(e.target.value);
+                }
+              })
+            }),
+            /* @__PURE__ */ jsxs12(EDS.Actions, {
+              style: { display: "flex", gap: "1rem" },
+              children: [
+                /* @__PURE__ */ jsx25(Button5, {
+                  onClick: () => {
+                    closeDialog();
+                    onChange(textareaValue);
+                  },
+                  children: "Submit"
+                }),
+                /* @__PURE__ */ jsx25(Button5, {
+                  variant: "ghost",
+                  onClick: () => {
+                    closeDialog();
+                    setTextareaValue(context.getValue());
+                  },
+                  children: "Cancel"
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+var StyledTextField = styled20(TextField3)`
+  & input {
+    padding-right: 40px;
+    letter-spacing: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+var IconButton = styled20(Button5)`
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  right: 4px;
+`;
+
+// src/form-cells/EditableTextFieldCell.tsx
+import { TextField as TextField4 } from "@equinor/eds-core-react";
+import { Controller as Controller6, useFormContext as useFormContext7 } from "react-hook-form";
+import styled21 from "styled-components";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function EditableTextFieldCell(context) {
+  const { control } = useFormContext7();
+  const editMode = useEditMode();
+  if (!editMode)
+    return /* @__PURE__ */ jsx26(TypographyCustom, {
+      truncate: true,
+      children: context.getValue()
+    });
+  return /* @__PURE__ */ jsx26(Controller6, {
+    control,
+    name: context.column.id,
+    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx26(InlineTextField3, {
+      id: context.column.id,
+      autoComplete: "none",
+      value: String(value ?? ""),
+      ...field,
+      ...getHelperTextProps({ error })
+    })
+  });
+}
+var InlineTextField3 = styled21(TextField4)`
+  /* 
+  TODO: Improve input based on feedback from UX
+  & > div {
+    background: transparent;
+    margin: 0 -0.5rem;
+    padding: 0 0.5rem;
+    box-shadow: none;
+    width: auto;
+  }
+
+  input {
+    padding: 0;
+    letter-spacing: 0;
+    font-weight: 400;
+    color: inherit;
+
+    ::placeholder {
+      color: red;
+    }
+  } */
+`;
 export {
   AppShell,
   AppSidebar,
+  AutocompleteCustom,
   ChipsCell,
   ColumnSelect,
   DataTable,
   DynamicCell,
+  EditableCheckboxCell,
+  EditableDateCell,
+  EditableDropdownCell,
+  EditableNumberCell,
+  EditableTextAreaCell,
+  EditableTextFieldCell,
   HeaderCell,
   HierarchyCell,
+  PopoverCell,
   SelectColumnDef,
   StickyCell,
   StickyHeaderCell,
   StyledStickyCell,
   TableHeader,
+  TypographyCustom,
   addFormMeta,
   capitalizeHeader,
   leftCellShadow,
   prependSelectColumn,
   removeFormMeta,
+  stopPropagation,
   stringToHslColor,
   useEditMode,
   useGetIsNew,