@wix/patterns 1.421.0 → 1.423.0

package/src/components/CmsFieldManagement/FieldEditorModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { CustomActionModal } from '../ActionModal';
+import { CmsFieldForm } from './CmsFieldForm';
+import { FieldEditorModalState } from './FieldEditorModalState';
+import { classes } from './CmsFieldModal.st.css.js';
+
+export interface FieldEditorModalProps {
+  state: FieldEditorModalState;
+  /** Modal title. Required so callers pass a localized string. */
+  title: string;
+  /** Confirm button label (localized). */
+  primaryButtonText: string;
+  /** Cancel button label (localized). */
+  secondaryButtonText: string;
+  dataHook?: string;
+}
+
+/**
+ * Pure field editor: the same form as `CmsFieldModal` but with no server side
+ * effect. On Save it returns the edited field spec via `state.onSubmit` instead
+ * of creating/updating a field through a schema. All button/title labels are
+ * passed in (already translated) so the modal stays localized for the surface
+ * that renders it.
+ */
+export const FieldEditorModal = observer(
+  ({
+    state,
+    title,
+    primaryButtonText,
+    secondaryButtonText,
+    dataHook = 'field-editor-modal',
+  }: FieldEditorModalProps) => {
+    const { formState } = state;
+
+    return (
+      <CustomActionModal
+        dataHook={dataHook}
+        state={state.modal}
+        onAfterClose={() => state.reset()}
+        title={title}
+        content={formState ? <CmsFieldForm state={formState} /> : null}
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        width={600}
+        showFooterDivider
+        className={classes.modal}
+      />
+    );
+  },
+);

package/src/components/CmsFieldManagement/FieldEditorModalState.ts

@@ -0,0 +1,66 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ConditionalModalState } from '@wix/bex-core';
+import type { FieldSpec } from '../../types/SchemaConfig';
+import { CmsFormState } from './CmsFormState';
+import { toFieldSpec } from './toFieldSpec';
+import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
+
+/**
+ * Pure field-editor modal state. Opens the CMS field form pre-filled from a
+ * field draft and, on confirm, hands the edited field spec to `onSubmit`. Unlike
+ * `CmsFieldModalState` it has no server side effect — it never calls
+ * `fieldActions` and needs no schema. It's a plain input (draft) → output
+ * (spec) editor; the consumer decides what to do with the result (e.g. the CSV
+ * import captures it into a column's pending new field).
+ */
+export interface FieldEditorModalStateProps {
+  /** Receives the edited field spec on confirm. Pure — no server side effect. */
+  onSubmit: (field: FieldSpec) => void;
+}
+
+export class FieldEditorModalState {
+  readonly modal: ConditionalModalState<null>;
+  formState: CmsFormState | null = null;
+  private readonly onSubmit: (field: FieldSpec) => void;
+
+  constructor(props: FieldEditorModalStateProps) {
+    this.onSubmit = props.onSubmit;
+    this.modal = new ConditionalModalState({
+      onConfirm: () => this.submit(),
+    });
+
+    makeObservable(this, {
+      formState: observable.ref,
+      open: action,
+      reset: action,
+    });
+  }
+
+  open(draft: FieldSpec) {
+    this.formState = new CmsFormState({
+      getValidationRules: getFieldTypeValidationRulesList,
+    });
+    this.formState.prefill(draft);
+    this.modal.open(null);
+  }
+
+  reset() {
+    this.formState = null;
+  }
+
+  private submit() {
+    const { formState } = this;
+    if (!formState) {
+      return;
+    }
+
+    if (formState.hasInvalidFields || !formState.properties.type) {
+      formState.enableShowValidationError();
+      // Throwing keeps the modal open (ModalState.confirm swallows it).
+      throw new Error('validation');
+    }
+
+    const { type, ...rest } = formState.properties;
+    this.onSubmit(toFieldSpec({ ...rest, type }, formState.fieldRules));
+  }
+}

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1639620250";
+var _namespace_ = "ValidationAndDefaultsSection1637078487";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection1639620250__root","accordionWrapper":"ValidationAndDefaultsSection1639620250__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection1637078487__root","accordionWrapper":"ValidationAndDefaultsSection1637078487__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput1767587147";
+var _namespace_ = "CharactersLimitInput2578577531";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CharactersLimitInput1767587147__root","field":"CharactersLimitInput1767587147__field"};
+export var classes = {"root":"CharactersLimitInput2578577531__root","field":"CharactersLimitInput2578577531__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/FieldNameInput.tsx

@@ -24,6 +24,7 @@ export const FieldNameInput = ({
     statusMessage={error}
   >
     <Input
+      dataHook="cms-field-name-input"
       placeholder="Enter a name"
       value={value}
       onChange={(e) => onChange(e.target.value)}

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1554041901";
+var _namespace_ = "Collapse2463891651";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse1554041901__root","exit":"Collapse1554041901__exit"};
+export var classes = {"root":"Collapse2463891651__root","exit":"Collapse2463891651__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionMultiSelectCheckbox/CollectionMultiSelectCheckbox.tsx

@@ -43,6 +43,14 @@ export interface CollectionMultiSelectCheckboxProps<
    * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional)
    */
   renderItem?: (item: V, index: number) => ListItem;
+  /**
+   * The maximum number of items that can be selected. Once reached, every
+   * unselected option becomes disabled (already-selected options stay
+   * deselectable). When undefined, selection is unbounded.
+   *
+   * Read once on mount — later changes to this prop are ignored. (Optional)
+   */
+  maxSelected?: number;
 }
 
 function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
@@ -57,6 +65,7 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
     onOptionsShow,
     onDeselect,
     placeholder: placeholderProp,
+    maxSelected,
     ...rest
   } = props;
 
@@ -80,6 +89,7 @@ function _CollectionMultiSelectCheckbox<V, F extends FiltersMap = FiltersMap>(
         collectionFilter,
         container,
         toolbar,
+        maxSelected,
       }),
   );
 

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage1234179183";
+var _namespace_ = "CollectionPage3986816266";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage1234179183__root"};
+export var classes = {"root":"CollectionPage3986816266__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2755712780";
+var _namespace_ = "CollectionSectionHeader3506425011";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader2755712780__root","summaryIcon":"CollectionSectionHeader2755712780__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3506425011__root","summaryIcon":"CollectionSectionHeader3506425011__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2164196758";
+var _namespace_ = "CollectionTable4068079517";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable2164196758__root"};
+export var classes = {"root":"CollectionTable4068079517__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable1747042920";
+var _namespace_ = "CollectionTableWSRTable4090046348";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable1747042920__root"};
+export var classes = {"root":"CollectionTableWSRTable4090046348__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar253917601";
+var _namespace_ = "CollectionToolbar2054934925";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar253917601__root","left":"CollectionToolbar253917601__left","right":"CollectionToolbar253917601__right","fullWidth":"CollectionToolbar253917601__fullWidth"};
+export var classes = {"root":"CollectionToolbar2054934925__root","left":"CollectionToolbar2054934925__left","right":"CollectionToolbar2054934925__right","fullWidth":"CollectionToolbar2054934925__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.uni.driver.ts

@@ -208,6 +208,25 @@ export const CollectionToolbarUniDriver = (
     getFilterDropdownAvailableOptionsIds: (filterName: string) => {
       return getInputWithOptionsDriver(filterName).getAvailableOptionsIds();
     },
+    /**
+     * Indicates if a specific dropdown option is disabled
+     * @param filterName - the key of the filter in the filters object passed to `useCollection`
+     * @param id - the key of the option
+     */
+    isFilterDropdownOptionDisabled: (filterName: string, id: string) => {
+      return getInputWithOptionsDriver(filterName).isOptionDisabled(id);
+    },
+    /**
+     * Indicates if a specific dropdown option exposes a disabled tooltip
+     * @param filterName - the key of the filter in the filters object passed to `useCollection`
+     * @param id - the key of the option
+     */
+    hasFilterDropdownOptionDisabledTooltip: (
+      filterName: string,
+      id: string,
+    ) => {
+      return getInputWithOptionsDriver(filterName).hasOptionDisabledTooltip(id);
+    },
     /**
      * Returns filter's placeholder text
      * @param filterName - the key of the filter in the filters object passed to `useCollection`

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3150814910";
+var _namespace_ = "SearchOrCustomFilter2461435889";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter3150814910__root","search":"SearchOrCustomFilter3150814910__search","searchMobile":"SearchOrCustomFilter3150814910__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2461435889__root","search":"SearchOrCustomFilter2461435889__search","searchMobile":"SearchOrCustomFilter2461435889__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly2730527269";
+var _namespace_ = "AutoCompleteReadonly1943558230";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly2730527269__root"};
+export var classes = {"root":"AutoCompleteReadonly1943558230__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown2189877152";
+var _namespace_ = "ViewsDropdown1965884629";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown2189877152__root"};
+export var classes = {"root":"ViewsDropdown1965884629__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3312897952";
+var _namespace_ = "DragHandle274706163";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle3312897952__root"};
+export var classes = {"root":"DragHandle274706163__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -155,6 +155,19 @@ export const CollectionDropdownFilterUniDriver = <
     );
   };
 
+  const isOptionDisabled = async (id: string) => {
+    const option = await optionsDriver.dropdownLayoutDriver.optionById(id);
+    return option.isDisabled();
+  };
+
+  const hasOptionDisabledTooltip = async (id: string) => {
+    const option = await optionsDriver.dropdownLayoutDriver.optionById(id);
+    return option
+      .element()
+      .$('[data-hook="list-item-select-disabled-tooltip"]')
+      .exists();
+  };
+
   return {
     ...optionsDriver,
     waitForOptions,
@@ -175,6 +188,8 @@ export const CollectionDropdownFilterUniDriver = <
     initialLoaderExists,
     infiniteScrollLoaderExists,
     hasDivider,
+    isOptionDisabled,
+    hasOptionDisabledTooltip,
     existInFilter,
     _getDropdownLayoutBase: getDropdownLayoutBase,
     scrollDown: async () => {

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1085651362";
+var _namespace_ = "EditableCell4272041546";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell1085651362__root","validationIndicator":"EditableCell1085651362__validationIndicator"};
+export var classes = {"root":"EditableCell4272041546__root","validationIndicator":"EditableCell4272041546__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover1026331512";
+var _namespace_ = "HeaderActionsPopover2347384604";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover1026331512__root"};
+export var classes = {"root":"HeaderActionsPopover2347384604__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout2766352509";
+var _namespace_ = "CellViewLayout2766243646";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout2766352509__root"};
+export var classes = {"root":"CellViewLayout2766243646__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1062313027";
+var _namespace_ = "Edit1562654052";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1062313027__root","addressInput":"Edit1062313027__addressInput"};
+export var classes = {"root":"Edit1562654052__root","addressInput":"Edit1562654052__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/array/Edit.st.css

@@ -0,0 +1,4 @@
+.jsonInput {
+  width: 100%;
+  margin-left: -1px;
+}

package/src/components/EditableTable/cellTypes/array/Edit.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit2127820499";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"Edit2127820499__root","jsonInput":"Edit2127820499__jsonInput"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/EditableTable/cellTypes/array/Edit.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { InputArea } from '@wix/design-system';
+import { Box } from '@wix/design-system';
+import { CellJsonInput } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const ArrayEdit: React.FC<CellEditProps<unknown[]>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const committedRef = useRef(false);
+  const inputAreaRef = useRef<InputArea | null>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      inputAreaRef.current?.calculateComputedRows();
+    });
+  }, []);
+
+  const handleChange = useCallback(
+    (parsed?: any) => {
+      onChange(parsed as unknown[]);
+    },
+    [onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        committedRef.current = true;
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (!committedRef.current) {
+      onCommit();
+    }
+  }, [onCommit]);
+
+  return (
+    <Box width="100%" height="100%">
+      <CellJsonInput
+        ref={(instance: any) => {
+          inputAreaRef.current = instance;
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
+        size="small"
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        autoSelect={false}
+        autoGrow
+        minRowsAutoGrow={1}
+        className={classes.jsonInput}
+      />
+    </Box>
+  );
+};

package/src/components/EditableTable/cellTypes/array/Edit.uni.driver.ts

@@ -0,0 +1,22 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { InputAreaUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { InputAreaUniDriver as InputAreaUniDriverFactory } from '@wix/design-system/dist/types/InputArea/InputArea.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ArrayEditUniDriver(base: UniDriver, body: UniDriver) {
+  const inputArea = (
+    InputAreaUniDriver as UniDriverFactory<InputAreaUniDriverFactory>
+  )(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => inputArea.getValue(),
+    typeValue: (value: string) => inputArea.enterText(value),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => inputArea.trigger('keyDown', { key, ...opts }),
+    blur: () => inputArea.trigger('blur', {}),
+  };
+}

package/src/components/EditableTable/cellTypes/array/View.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JsonView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+
+export const ArrayView: React.FC<CellViewProps<unknown[]>> = ({ value }) => (
+  <CellViewLayout>
+    {value != null ? <JsonView data={value} /> : null}
+  </CellViewLayout>
+);

package/src/components/EditableTable/cellTypes/array/View.uni.driver.ts

@@ -0,0 +1,9 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function ArrayViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => base.text(),
+  };
+}