@equinor/apollo-components 3.2.1 → 3.3.0-beta.0

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-co
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import { SetRequired } from 'type-fest';
 import { TableOptions } from '@tanstack/table-core/build/lib/types';
+import { FieldError } from 'react-hook-form';
 
 interface AppShellProps {
     children?: ReactNode;
@@ -161,7 +162,12 @@ interface DataTableProps<T> {
         enableGlobalFilterInput?: boolean;
         globalFilterPlaceholder?: string;
         filterFromLeafRows?: boolean;
+        /**
+         * @deprecated Use `customActionsLeft` instead
+         */
         customActions?: <T>(table: Table<T>) => ReactNode;
+        customActionsLeft?: <T>(table: Table<T>) => ReactNode;
+        customActionsRight?: <T>(table: Table<T>) => ReactNode;
         /**
          * Default 1rem
          * Accepts any CSS padding value
@@ -239,32 +245,45 @@ declare function useSetFormMeta<T extends FormMeta>(): (newValues: Partial<T>) =
 declare function removeFormMeta<T extends FormMeta>(withFormMeta: T): Omit<T, keyof FormMeta>;
 declare function addFormMeta<T>(withoutFormMeta: T): T & FormMeta;
 
-declare function EditableCheckboxCell<T extends FormMeta>(context: CellContext<T, boolean>): JSX.Element;
+interface EditableCellBaseProps<T extends FormMeta, Value> extends CellContext<T, Value> {
+    /**
+     * FieldError object used to overwrite react-hook-form validation result. It is prioritized over
+     * react-hook-form's validation.
+     */
+    error?: FieldError;
+    /**
+     * Custom `onChange` called on input change after react-hook-form's `onChange`. E.g. used to trigger actions on change.
+     */
+    onChange?: (value: Value) => void;
+}
+
+declare function EditableCheckboxCell<T extends FormMeta>({ onChange: onChangeFromProps, ...context }: EditableCellBaseProps<T, boolean>): JSX.Element;
 
-interface EditableDateCellProps<T extends FormMeta> extends CellContext<T, unknown> {
+interface EditableDateCellProps<T extends FormMeta> extends EditableCellBaseProps<T, string> {
     dateStringFormatter?: (date: string) => string;
 }
-declare function EditableDateCell<T extends FormMeta>(props: EditableDateCellProps<T>): JSX.Element;
+declare function EditableDateCell<T extends FormMeta>({ dateStringFormatter, error: errorFromProps, onChange: onChangeFromProps, ...context }: EditableDateCellProps<T>): JSX.Element;
 
 interface Option {
     label: string;
     value: string;
 }
-interface EditableDropdownSingleCellProps<T extends FormMeta> extends CellContext<T, unknown> {
+interface EditableDropdownSingleCellProps<T extends FormMeta> extends Omit<EditableCellBaseProps<T, unknown>, 'onChange'> {
     /**
      * `Option.value` is used internally to get and update selection state. `Option.label` is *only* for visual purposes.
      */
     options: Option[];
+    onChange?: (value: Option) => void;
 }
-declare function EditableDropdownSingleCell<T extends FormMeta>(props: EditableDropdownSingleCellProps<T>): JSX.Element;
+declare function EditableDropdownSingleCell<T extends FormMeta>({ options, error: errorFromProps, onChange: onChangeFromProps, ...context }: EditableDropdownSingleCellProps<T>): JSX.Element;
 
-declare function EditableNumberCell<T extends FormMeta>(context: CellContext<T, number>): JSX.Element;
+declare function EditableNumberCell<T extends FormMeta>({ error: errorFromProps, ...context }: EditableCellBaseProps<T, number>): JSX.Element;
 
-interface EdtiableTextAreaProps<T extends FormMeta> extends CellContext<T, string> {
+interface EdtiableTextAreaProps<T extends FormMeta> extends EditableCellBaseProps<T, string> {
     title: string;
 }
-declare function EditableTextAreaCell<T extends FormMeta>(props: EdtiableTextAreaProps<T>): JSX.Element;
+declare function EditableTextAreaCell<T extends FormMeta>({ title, error: errorFromProps, onChange: onChangeFromProps, ...context }: EdtiableTextAreaProps<T>): JSX.Element;
 
-declare function EditableTextFieldCell<T extends FormMeta>(context: CellContext<T, unknown>): JSX.Element;
+declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromProps, ...context }: EditableCellBaseProps<T, string>): JSX.Element;
 
 export { AppShell, AppSidebar, CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, EditableCheckboxCell, EditableDateCell, EditableDateCellProps, EditableDropdownSingleCell, EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, FormMeta, HTMLPropsRef, HeaderCell, HierarchyCell, InfiniteScrollConfig, Option, PopoverCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, TypographyProps, WithoutFormMeta, addFormMeta, capitalizeHeader, leftCellShadow, prependSelectColumn, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };

package/dist/index.js

@@ -3043,15 +3043,11 @@ var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.
 var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function TableRow({
-  row,
-  rowConfig,
-  cellConfig,
-  measureElement,
-  index
-}) {
+function TableRow(props) {
   var _a;
+  const { row, rowConfig, cellConfig, measureElement, index } = props;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  console.log("Hello");
   const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     StyledTableRow,
     {
@@ -3196,19 +3192,20 @@ function TableBanner({
   tableCaption,
   globalFilter
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, { className: "--filter-container-left", children: [
       (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, { variant: "h3", as: "h2", children: tableCaption }),
-      (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
+      (_c = (_a = bannerConfig == null ? void 0 : bannerConfig.customActionsLeft) == null ? void 0 : _a.call(bannerConfig, table)) != null ? _c : (_b = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _b.call(bannerConfig, table)
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      (_d = bannerConfig == null ? void 0 : bannerConfig.customActionsRight) == null ? void 0 : _d.call(bannerConfig, table),
       (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         DebouncedInput,
         {
           value: globalFilter.state,
           icon: import_eds_icons7.search,
-          placeholder: (_b = bannerConfig.globalFilterPlaceholder) != null ? _b : "Search all columns",
+          placeholder: (_e = bannerConfig.globalFilterPlaceholder) != null ? _e : "Search all columns",
           onChange: (value) => globalFilter.onChange(String(value))
         }
       ),
@@ -3545,7 +3542,12 @@ function addFormMeta(withoutFormMeta) {
 
 // src/form-cells/EditableCheckboxCell.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function EditableCheckboxCell(context) {
+function EditableCheckboxCell(_a) {
+  var _b = _a, {
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3562,9 +3564,21 @@ function EditableCheckboxCell(context) {
     import_react_hook_form2.Controller,
     {
       name: context.column.id,
-      render: (_a) => {
-        var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
+      render: (_a2) => {
+        var { field: _b2 } = _a2, _c = _b2, { value, onChange } = _c, field = __objRest(_c, ["value", "onChange"]);
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_eds_core_react20.Checkbox,
+          __spreadProps(__spreadValues({
+            enterKeyHint: "send",
+            "aria-label": "editable",
+            checked: value
+          }, field), {
+            onChange: (e) => {
+              onChange(e);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(e.target.checked);
+            }
+          })
+        );
       }
     }
   );
@@ -3580,17 +3594,27 @@ var import_styled_components17 = __toESM(require("styled-components"));
 var import_eds_core_react21 = require("@equinor/eds-core-react");
 var import_eds_icons8 = require("@equinor/eds-icons");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var WARNING_PREFIX = "WARNING";
 function getHelperTextProps({
   error,
   warning,
   helperText
 }) {
-  if (error)
+  var _a;
+  if (error) {
+    if ((_a = error.message) == null ? void 0 : _a.startsWith(WARNING_PREFIX)) {
+      return {
+        variant: "warning",
+        helperText: error.message.substring(WARNING_PREFIX.length - 1),
+        helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.warning_filled, size: 16 })
+      };
+    }
     return {
       variant: "error",
       helperText: error.message,
       helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.error_filled, size: 16 })
     };
+  }
   if (warning)
     return {
       variant: "warning",
@@ -3611,8 +3635,16 @@ function stopPropagation2(handler) {
 
 // src/form-cells/EditableDateCell.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function EditableDateCell(props) {
-  const _a = props, { dateStringFormatter } = _a, context = __objRest(_a, ["dateStringFormatter"]);
+function EditableDateCell(_a) {
+  var _b = _a, {
+    dateStringFormatter,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "dateStringFormatter",
+    "error",
+    "onChange"
+  ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
   const formattedValue = (0, import_react8.useMemo)(
@@ -3628,8 +3660,8 @@ function EditableDateCell(props) {
     import_react_hook_form3.Controller,
     {
       name: context.column.id,
-      render: (_b) => {
-        var _c = _b, { field: _d } = _c, _e = _d, { value, onChange } = _e, field = __objRest(_e, ["value", "onChange"]), { fieldState: { error } } = _c;
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
         return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           InlineTextField,
           __spreadValues(__spreadValues({
@@ -3637,8 +3669,12 @@ function EditableDateCell(props) {
             type: "date",
             autoComplete: "none",
             value: value ? parseISODate(value) : "",
-            onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
-          }, getHelperTextProps({ error })), field)
+            onChange: (e) => {
+              const newDateString = e.target.value ? parseISODate(e.target.value) : "";
+              onChange(newDateString);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(newDateString);
+            }
+          }, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })), field)
         );
       }
     }
@@ -3674,78 +3710,138 @@ var InlineTextField = (0, import_styled_components17.default)(import_eds_core_re
 `;
 
 // src/form-cells/EditableDropdownSingleCell.tsx
-var import_eds_core_react23 = require("@equinor/eds-core-react");
+var import_eds_core_react24 = require("@equinor/eds-core-react");
 var import_react_hook_form4 = require("react-hook-form");
+
+// src/form-cells/FormHelperText.tsx
+var import_eds_core_react23 = require("@equinor/eds-core-react");
+var import_eds_tokens6 = require("@equinor/eds-tokens");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var colors = {
+  error: import_eds_tokens6.tokens.colors.interactive.danger__text.hex,
+  warning: import_eds_tokens6.tokens.colors.interactive.warning__text.hex,
+  success: import_eds_tokens6.tokens.colors.interactive.success__text.hex
+};
+function HelperText({ helperText, variant, helperIcon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        marginTop: "8px",
+        color: variant ? colors[variant] : "inherit"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { flexShrink: 0 }, children: helperIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_eds_core_react23.Typography,
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              lineHeight: "1.333em",
+              letterSpacing: "0.013em",
+              textAlign: "left",
+              margin: "0 0 0 8px",
+              color: "inherit"
+            },
+            children: helperText
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/form-cells/EditableDropdownSingleCell.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
-function EditableDropdownSingleCell(props) {
-  const _a = props, { options } = _a, context = __objRest(_a, ["options"]);
+function EditableDropdownSingleCell(_a) {
+  var _b = _a, {
+    options,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "options",
+    "error",
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_hook_form4.Controller,
     {
       name: context.column.id,
-      render: (_b) => {
-        var { field: _c } = _b, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]);
-        var _a2;
-        const selectedOption = (_a2 = options.find((option) => option.value === value)) != null ? _a2 : buildEmptyOption();
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_eds_core_react23.Autocomplete,
-          __spreadValues({
-            label: "",
-            selectedOptions: selectedOption && [selectedOption],
-            options,
-            optionLabel: (option) => {
-              var _a3;
-              return (_a3 = option == null ? void 0 : option.label) != null ? _a3 : "";
-            },
-            "aria-required": true,
-            hideClearButton: true,
-            "aria-autocomplete": "none",
-            onOptionsChange: (changes) => {
-              const [change] = changes.selectedItems;
-              onChange(change == null ? void 0 : change.value);
-            }
-          }, field)
-        );
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
+        var _a3;
+        const selectedOption = (_a3 = options.find((option) => option.value === value)) != null ? _a3 : buildEmptyOption();
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_eds_core_react24.Autocomplete,
+            __spreadValues({
+              label: "",
+              selectedOptions: selectedOption && [selectedOption],
+              options,
+              optionLabel: (option) => {
+                var _a4;
+                return (_a4 = option == null ? void 0 : option.label) != null ? _a4 : "";
+              },
+              "aria-required": true,
+              hideClearButton: true,
+              "aria-autocomplete": "none",
+              onOptionsChange: (changes) => {
+                const [change] = changes.selectedItems;
+                onChange(change == null ? void 0 : change.value);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(change);
+              }
+            }, field)
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HelperText, __spreadValues({}, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })))
+        ] });
       }
     }
   );
 }
 
 // src/form-cells/EditableNumberCell.tsx
-var import_eds_core_react24 = require("@equinor/eds-core-react");
+var import_eds_core_react25 = require("@equinor/eds-core-react");
 var import_react_hook_form5 = require("react-hook-form");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function EditableNumberCell(context) {
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function EditableNumberCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_react_hook_form5.Controller,
     {
       name: context.column.id,
-      render: (_a) => {
-        var _b = _a, { field: _c } = _b, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           InlineTextField2,
           __spreadValues(__spreadValues({
             id: context.column.id,
             type: "number",
             autoComplete: "none",
             onChange: (e) => onChange(e.target.valueAsNumber)
-          }, field), getHelperTextProps({ error }))
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
         ) });
       }
     }
   );
 }
-var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react24.TextField)`
+var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react25.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3769,30 +3865,38 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
 `;
 
 // src/form-cells/EditableTextAreaCell.tsx
-var import_eds_core_react25 = require("@equinor/eds-core-react");
+var import_eds_core_react26 = require("@equinor/eds-core-react");
 var import_eds_icons9 = require("@equinor/eds-icons");
 var import_react9 = require("react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function EditableTextAreaCell(props) {
-  const _a = props, { title } = _a, context = __objRest(_a, ["title"]);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function EditableTextAreaCell(_a) {
+  var _b = _a, {
+    title,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "title",
+    "error",
+    "onChange"
+  ]);
   const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
   const [open, setOpen] = (0, import_react9.useState)(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, { id: name + "popover", value: context.getValue(), title });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverCell, { id: name + "popover", value: context.getValue(), title });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_react_hook_form6.Controller,
     {
       name,
-      render: (_b) => {
-        var _c = _b, { field: _d } = _c, _e = _d, { onChange, ref } = _e, field = __objRest(_e, ["onChange", "ref"]), { fieldState: { error } } = _c;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange, ref } = _d, field = __objRest(_d, ["onChange", "ref"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             "div",
             {
               style: {
@@ -3801,32 +3905,33 @@ function EditableTextAreaCell(props) {
                 position: "relative"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   StyledTextField,
                   __spreadValues(__spreadValues({
                     id: field.name,
                     onChange,
                     ref
-                  }, field), getHelperTextProps({ error }))
+                  }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            import_eds_core_react25.Dialog,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            import_eds_core_react26.Dialog,
             {
               open,
               onClose: () => {
                 closeDialog();
                 onChange(textareaValue);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
               },
               isDismissable: true,
               style: { width: "min(50rem, calc(100vw - 4rem))" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Title, { children: title }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_eds_core_react25.TextField,
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Title, { children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_eds_core_react26.TextField,
                   {
                     style: {
                       maxWidth: "100%",
@@ -3842,19 +3947,20 @@ function EditableTextAreaCell(props) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, { style: { display: "flex", gap: "1rem" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                    import_eds_core_react25.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_eds_core_react26.Dialog.Actions, { style: { display: "flex", gap: "1rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_eds_core_react26.Button,
                     {
                       onClick: () => {
                         closeDialog();
                         onChange(textareaValue);
+                        onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
                       },
                       children: "Submit"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                    import_eds_core_react25.Button,
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_eds_core_react26.Button,
                     {
                       variant: "ghost",
                       onClick: () => {
@@ -3873,7 +3979,7 @@ function EditableTextAreaCell(props) {
     }
   );
 }
-var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react25.TextField)`
+var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react26.TextField)`
   & input {
     padding-right: 40px;
     letter-spacing: 0;
@@ -3882,7 +3988,7 @@ var StyledTextField = (0, import_styled_components19.default)(import_eds_core_re
     text-overflow: ellipsis;
   }
 `;
-var IconButton = (0, import_styled_components19.default)(import_eds_core_react25.Button)`
+var IconButton = (0, import_styled_components19.default)(import_eds_core_react26.Button)`
   position: absolute;
   height: 32px;
   width: 32px;
@@ -3890,33 +3996,38 @@ var IconButton = (0, import_styled_components19.default)(import_eds_core_react25
 `;
 
 // src/form-cells/EditableTextFieldCell.tsx
-var import_eds_core_react26 = require("@equinor/eds-core-react");
+var import_eds_core_react27 = require("@equinor/eds-core-react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
-function EditableTextFieldCell(context) {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function EditableTextFieldCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_react_hook_form7.Controller,
     {
       name: context.column.id,
-      render: (_a) => {
-        var _b = _a, { field: _c } = _b, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b;
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           InlineTextField3,
           __spreadValues(__spreadValues({
             id: context.column.id,
             autoComplete: "none",
             value: String(value != null ? value : "")
-          }, field), getHelperTextProps({ error }))
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
         );
       }
     }
   );
 }
-var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react26.TextField)`
+var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react27.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {

package/dist/index.mjs

@@ -3006,15 +3006,11 @@ var TableBody = styled12(Table6.Body)`
 import { Table as Table7 } from "@equinor/eds-core-react";
 import styled13 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
-function TableRow({
-  row,
-  rowConfig,
-  cellConfig,
-  measureElement,
-  index
-}) {
+function TableRow(props) {
   var _a;
+  const { row, rowConfig, cellConfig, measureElement, index } = props;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  console.log("Hello");
   const tableRowContent = /* @__PURE__ */ jsx14(
     StyledTableRow,
     {
@@ -3159,19 +3155,20 @@ function TableBanner({
   tableCaption,
   globalFilter
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   return /* @__PURE__ */ jsxs9(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
     /* @__PURE__ */ jsxs9(FilterContainer, { className: "--filter-container-left", children: [
       (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, { variant: "h3", as: "h2", children: tableCaption }),
-      (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
+      (_c = (_a = bannerConfig == null ? void 0 : bannerConfig.customActionsLeft) == null ? void 0 : _a.call(bannerConfig, table)) != null ? _c : (_b = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _b.call(bannerConfig, table)
     ] }),
     /* @__PURE__ */ jsx17(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      (_d = bannerConfig == null ? void 0 : bannerConfig.customActionsRight) == null ? void 0 : _d.call(bannerConfig, table),
       (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx17(
         DebouncedInput,
         {
           value: globalFilter.state,
           icon: search,
-          placeholder: (_b = bannerConfig.globalFilterPlaceholder) != null ? _b : "Search all columns",
+          placeholder: (_e = bannerConfig.globalFilterPlaceholder) != null ? _e : "Search all columns",
           onChange: (value) => globalFilter.onChange(String(value))
         }
       ),
@@ -3508,7 +3505,12 @@ function addFormMeta(withoutFormMeta) {
 
 // src/form-cells/EditableCheckboxCell.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-function EditableCheckboxCell(context) {
+function EditableCheckboxCell(_a) {
+  var _b = _a, {
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
     return /* @__PURE__ */ jsx21(
@@ -3525,9 +3527,21 @@ function EditableCheckboxCell(context) {
     Controller,
     {
       name: context.column.id,
-      render: (_a) => {
-        var { field: _b } = _a, _c = _b, { value } = _c, field = __objRest(_c, ["value"]);
-        return /* @__PURE__ */ jsx21(Checkbox4, __spreadValues({ enterKeyHint: "send", "aria-label": "editable", checked: value }, field));
+      render: (_a2) => {
+        var { field: _b2 } = _a2, _c = _b2, { value, onChange } = _c, field = __objRest(_c, ["value", "onChange"]);
+        return /* @__PURE__ */ jsx21(
+          Checkbox4,
+          __spreadProps(__spreadValues({
+            enterKeyHint: "send",
+            "aria-label": "editable",
+            checked: value
+          }, field), {
+            onChange: (e) => {
+              onChange(e);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(e.target.checked);
+            }
+          })
+        );
       }
     }
   );
@@ -3543,17 +3557,27 @@ import styled17 from "styled-components";
 import { Icon as Icon7 } from "@equinor/eds-core-react";
 import { error_filled, warning_filled } from "@equinor/eds-icons";
 import { jsx as jsx22 } from "react/jsx-runtime";
+var WARNING_PREFIX = "WARNING";
 function getHelperTextProps({
   error,
   warning,
   helperText
 }) {
-  if (error)
+  var _a;
+  if (error) {
+    if ((_a = error.message) == null ? void 0 : _a.startsWith(WARNING_PREFIX)) {
+      return {
+        variant: "warning",
+        helperText: error.message.substring(WARNING_PREFIX.length - 1),
+        helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: warning_filled, size: 16 })
+      };
+    }
     return {
       variant: "error",
       helperText: error.message,
       helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: error_filled, size: 16 })
     };
+  }
   if (warning)
     return {
       variant: "warning",
@@ -3574,8 +3598,16 @@ function stopPropagation2(handler) {
 
 // src/form-cells/EditableDateCell.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
-function EditableDateCell(props) {
-  const _a = props, { dateStringFormatter } = _a, context = __objRest(_a, ["dateStringFormatter"]);
+function EditableDateCell(_a) {
+  var _b = _a, {
+    dateStringFormatter,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "dateStringFormatter",
+    "error",
+    "onChange"
+  ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
   const formattedValue = useMemo(
@@ -3591,8 +3623,8 @@ function EditableDateCell(props) {
     Controller2,
     {
       name: context.column.id,
-      render: (_b) => {
-        var _c = _b, { field: _d } = _c, _e = _d, { value, onChange } = _e, field = __objRest(_e, ["value", "onChange"]), { fieldState: { error } } = _c;
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
         return /* @__PURE__ */ jsx23(
           InlineTextField,
           __spreadValues(__spreadValues({
@@ -3600,8 +3632,12 @@ function EditableDateCell(props) {
             type: "date",
             autoComplete: "none",
             value: value ? parseISODate(value) : "",
-            onChange: (e) => onChange(e.target.value ? parseISODate(e.target.value) : "")
-          }, getHelperTextProps({ error })), field)
+            onChange: (e) => {
+              const newDateString = e.target.value ? parseISODate(e.target.value) : "";
+              onChange(newDateString);
+              onChangeFromProps == null ? void 0 : onChangeFromProps(newDateString);
+            }
+          }, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })), field)
         );
       }
     }
@@ -3639,42 +3675,97 @@ 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 jsx24 } from "react/jsx-runtime";
+
+// src/form-cells/FormHelperText.tsx
+import { Typography as Typography4 } from "@equinor/eds-core-react";
+import { tokens as tokens6 } from "@equinor/eds-tokens";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var colors = {
+  error: tokens6.colors.interactive.danger__text.hex,
+  warning: tokens6.colors.interactive.warning__text.hex,
+  success: tokens6.colors.interactive.success__text.hex
+};
+function HelperText({ helperText, variant, helperIcon }) {
+  return /* @__PURE__ */ jsx24(Fragment4, { children: helperText && /* @__PURE__ */ jsx24("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        marginTop: "8px",
+        color: variant ? colors[variant] : "inherit"
+      },
+      children: [
+        /* @__PURE__ */ jsx24("span", { style: { flexShrink: 0 }, children: helperIcon }),
+        /* @__PURE__ */ jsx24(
+          Typography4,
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              lineHeight: "1.333em",
+              letterSpacing: "0.013em",
+              textAlign: "left",
+              margin: "0 0 0 8px",
+              color: "inherit"
+            },
+            children: helperText
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/form-cells/EditableDropdownSingleCell.tsx
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
-function EditableDropdownSingleCell(props) {
-  const _a = props, { options } = _a, context = __objRest(_a, ["options"]);
+function EditableDropdownSingleCell(_a) {
+  var _b = _a, {
+    options,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "options",
+    "error",
+    "onChange"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx24(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx25(
     Controller3,
     {
       name: context.column.id,
-      render: (_b) => {
-        var { field: _c } = _b, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]);
-        var _a2;
-        const selectedOption = (_a2 = options.find((option) => option.value === value)) != null ? _a2 : buildEmptyOption();
-        return /* @__PURE__ */ jsx24(
-          Autocomplete,
-          __spreadValues({
-            label: "",
-            selectedOptions: selectedOption && [selectedOption],
-            options,
-            optionLabel: (option) => {
-              var _a3;
-              return (_a3 = option == null ? void 0 : option.label) != null ? _a3 : "";
-            },
-            "aria-required": true,
-            hideClearButton: true,
-            "aria-autocomplete": "none",
-            onOptionsChange: (changes) => {
-              const [change] = changes.selectedItems;
-              onChange(change == null ? void 0 : change.value);
-            }
-          }, field)
-        );
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value, onChange } = _d, field = __objRest(_d, ["value", "onChange"]), { fieldState: { error } } = _b2;
+        var _a3;
+        const selectedOption = (_a3 = options.find((option) => option.value === value)) != null ? _a3 : buildEmptyOption();
+        return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+          /* @__PURE__ */ jsx25(
+            Autocomplete,
+            __spreadValues({
+              label: "",
+              selectedOptions: selectedOption && [selectedOption],
+              options,
+              optionLabel: (option) => {
+                var _a4;
+                return (_a4 = option == null ? void 0 : option.label) != null ? _a4 : "";
+              },
+              "aria-required": true,
+              hideClearButton: true,
+              "aria-autocomplete": "none",
+              onOptionsChange: (changes) => {
+                const [change] = changes.selectedItems;
+                onChange(change == null ? void 0 : change.value);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(change);
+              }
+            }, field)
+          ),
+          /* @__PURE__ */ jsx25(HelperText, __spreadValues({}, getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error })))
+        ] });
       }
     }
   );
@@ -3684,25 +3775,30 @@ 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 jsx25 } from "react/jsx-runtime";
-function EditableNumberCell(context) {
+import { Fragment as Fragment6, jsx as jsx26 } from "react/jsx-runtime";
+function EditableNumberCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx25(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx26(
     Controller4,
     {
       name: context.column.id,
-      render: (_a) => {
-        var _b = _a, { field: _c } = _b, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b;
-        return /* @__PURE__ */ jsx25(Fragment4, { children: /* @__PURE__ */ jsx25(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange } = _d, field = __objRest(_d, ["onChange"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsx26(Fragment6, { children: /* @__PURE__ */ jsx26(
           InlineTextField2,
           __spreadValues(__spreadValues({
             id: context.column.id,
             type: "number",
             autoComplete: "none",
             onChange: (e) => onChange(e.target.valueAsNumber)
-          }, field), getHelperTextProps({ error }))
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
         ) });
       }
     }
@@ -3737,25 +3833,33 @@ 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 jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-function EditableTextAreaCell(props) {
-  const _a = props, { title } = _a, context = __objRest(_a, ["title"]);
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function EditableTextAreaCell(_a) {
+  var _b = _a, {
+    title,
+    error: errorFromProps,
+    onChange: onChangeFromProps
+  } = _b, context = __objRest(_b, [
+    "title",
+    "error",
+    "onChange"
+  ]);
   const [textareaValue, setTextareaValue] = useState7(context.getValue());
   const [open, setOpen] = useState7(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ jsx26(PopoverCell, { id: name + "popover", value: context.getValue(), title });
+    return /* @__PURE__ */ jsx27(PopoverCell, { id: name + "popover", value: context.getValue(), title });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Controller5,
     {
       name,
-      render: (_b) => {
-        var _c = _b, { field: _d } = _c, _e = _d, { onChange, ref } = _e, field = __objRest(_e, ["onChange", "ref"]), { fieldState: { error } } = _c;
-        return /* @__PURE__ */ jsxs12(Fragment5, { children: [
-          /* @__PURE__ */ jsxs12(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { onChange, ref } = _d, field = __objRest(_d, ["onChange", "ref"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               style: {
@@ -3764,31 +3868,32 @@ function EditableTextAreaCell(props) {
                 position: "relative"
               },
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   StyledTextField,
                   __spreadValues(__spreadValues({
                     id: field.name,
                     onChange,
                     ref
-                  }, field), getHelperTextProps({ error }))
+                  }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
                 ),
-                /* @__PURE__ */ jsx26(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ jsx26(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
+                /* @__PURE__ */ jsx27(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ jsx27(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsxs14(
             EDS,
             {
               open,
               onClose: () => {
                 closeDialog();
                 onChange(textareaValue);
+                onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
               },
               isDismissable: true,
               style: { width: "min(50rem, calc(100vw - 4rem))" },
               children: [
-                /* @__PURE__ */ jsx26(EDS.Header, { children: /* @__PURE__ */ jsx26(EDS.Title, { children: title }) }),
-                /* @__PURE__ */ jsx26(EDS.Content, { children: /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(EDS.Header, { children: /* @__PURE__ */ jsx27(EDS.Title, { children: title }) }),
+                /* @__PURE__ */ jsx27(EDS.Content, { children: /* @__PURE__ */ jsx27(
                   TextField3,
                   {
                     style: {
@@ -3805,18 +3910,19 @@ function EditableTextAreaCell(props) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsxs12(EDS.Actions, { style: { display: "flex", gap: "1rem" }, children: [
-                  /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsxs14(EDS.Actions, { style: { display: "flex", gap: "1rem" }, children: [
+                  /* @__PURE__ */ jsx27(
                     Button5,
                     {
                       onClick: () => {
                         closeDialog();
                         onChange(textareaValue);
+                        onChangeFromProps == null ? void 0 : onChangeFromProps(textareaValue);
                       },
                       children: "Submit"
                     }
                   ),
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Button5,
                     {
                       variant: "ghost",
@@ -3856,24 +3962,29 @@ 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 jsx27 } from "react/jsx-runtime";
-function EditableTextFieldCell(context) {
+import { jsx as jsx28 } from "react/jsx-runtime";
+function EditableTextFieldCell(_a) {
+  var _b = _a, {
+    error: errorFromProps
+  } = _b, context = __objRest(_b, [
+    "error"
+  ]);
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ jsx27(TypographyCustom, { truncate: true, children: context.getValue() });
-  return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(TypographyCustom, { truncate: true, children: context.getValue() });
+  return /* @__PURE__ */ jsx28(
     Controller6,
     {
       name: context.column.id,
-      render: (_a) => {
-        var _b = _a, { field: _c } = _b, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b;
-        return /* @__PURE__ */ jsx27(
+      render: (_a2) => {
+        var _b2 = _a2, { field: _c } = _b2, _d = _c, { value } = _d, field = __objRest(_d, ["value"]), { fieldState: { error } } = _b2;
+        return /* @__PURE__ */ jsx28(
           InlineTextField3,
           __spreadValues(__spreadValues({
             id: context.column.id,
             autoComplete: "none",
             value: String(value != null ? value : "")
-          }, field), getHelperTextProps({ error }))
+          }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
         );
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.2.1",
+  "version": "3.3.0-beta.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",