@wix/patterns 1.422.0 → 1.424.0

package/src/components/EditableTable/EditableTable.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { GlobalAudioPlayer } from '@wix/patterns-fields';
 import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
 import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import type { FieldsSourceProvider } from '../fieldsSourceProvider';
 import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
 import {
   type EditableColumn,
@@ -12,6 +13,7 @@ import { EditableCell } from './EditableCell';
 import { EditableTableContextMenu } from './EditableTableContextMenu';
 import { useEditableTableContextMenu } from './useEditableTableContextMenu';
 import { MessageActionModal } from '../ActionModal';
+import { FieldManagementModals } from '../CustomFieldsPanel/FieldManagementModals';
 import { useEditableTableCollectionSyncProps } from './useEditableTableCollectionSyncProps';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useClipboardHandler } from './useClipboardHandler';
@@ -38,9 +40,15 @@ export interface EditableTableProps<
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
 
-  /** Column definitions with cell types */
+  /** Column definitions with cell types. When a `fieldsSource` is wired, its
+   *  columns are added by the state, so pass `[]` for source-only tables. */
   columns: EditableColumn<T>[];
 
+  /** A fields source built with `tableSchemaSource(...)`. Its fields become
+   *  columns and its field-management menu + modals (add/edit/archive/delete)
+   *  are wired into the table. */
+  fieldsSource?: FieldsSourceProvider;
+
   /** When true, hides the built-in header actions popover for all columns. */
   hideHeaderActions?: boolean;
 
@@ -53,7 +61,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 ) {
   const {
     state,
-    columns: editableColumns,
+    columns,
+    fieldsSource: _fieldsSource,
     hideHeaderActions,
     dataHook,
     children,
@@ -62,6 +71,11 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
 
   useEditableTableCollectionSyncProps(props);
 
+  const editableColumns = useMemo(
+    () => [...columns, ...state.sourceColumns],
+    [columns, state.sourceColumns],
+  );
+
   const containerRef = useRef<HTMLDivElement>(null);
 
   const keyboard = useKeyboardNavigation(state);
@@ -131,15 +145,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           {...state.deleteConfirmModal.value}
         />
       )}
-      {state.fieldActions.confirmModal.value && (
-        <MessageActionModal
-          state={state.fieldActions.confirmModal}
-          {...state.fieldActions.confirmModal.value}
-          primaryButtonProps={{
-            ...state.fieldActions.confirmModal.value.primaryButtonProps,
-            disabled: state.fieldActions.deleteTask.status.isLoading,
-          }}
-        />
+      {state.toolbar.collectionFieldsSource && (
+        <FieldManagementModals source={state.toolbar.collectionFieldsSource} />
       )}
       {children}
       <GlobalAudioPlayer />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover2791309920";
+var _namespace_ = "HeaderActionsPopover3567882799";
 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":"HeaderActionsPopover2791309920__root"};
+export var classes = {"root":"HeaderActionsPopover3567882799__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderFieldActions.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { Field, FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+import type { EditableColumn } from '../../state/EditableTable/types';
+import {
+  buildFieldActionGroups,
+  type FieldActionHandlers,
+  type FieldActionKey,
+} from '../FieldActions';
+import { HeaderActionsPopover } from './HeaderActionsPopover';
+
+// Field-management (from the source) first, then the table-intrinsic groups,
+// then the destructive action. Only keys with a handler render, so each source
+// shows just its own actions (CMS: make-primary / duplicate / delete;
+// DataExtension: archive).
+const HEADER_ACTION_GROUPS: FieldActionKey[][] = [
+  ['editField'],
+  ['makePrimary', 'hideColumn', 'duplicateField', 'duplicateFieldWithContent'],
+  ['sortAscending', 'sortDescending', 'filter'],
+  ['archive', 'delete'],
+];
+
+const HEADER_LOCATION = 'EditableTable header action cell';
+
+interface HeaderFieldActionsProps<T, F extends FiltersMap> {
+  state: EditableTableState<T, F>;
+  column: EditableColumn<T>;
+}
+
+function _HeaderFieldActions<T, F extends FiltersMap>({
+  state,
+  column,
+}: HeaderFieldActionsProps<T, F>) {
+  const { toolbar } = state;
+  const { customColumnsState, panels, toolbarFiltersState } = toolbar;
+  const source = toolbar.collectionFieldsSource;
+
+  // Source-backed columns (their id maps to a source field) get the source's
+  // field-management; vertical-brought or consumer columns get only the
+  // table-intrinsic actions below.
+  const field: Field | undefined = source?.fieldsSource.fields.find(
+    (f) => source.fieldsSource.columnIdForField(f) === column.id,
+  );
+  const sourceConfig =
+    field && source?.fieldActionHandlers
+      ? source.fieldActionHandlers({
+          fieldId: field.id,
+          origin: 'external',
+          location: HEADER_LOCATION,
+        })
+      : null;
+
+  const handlers: FieldActionHandlers = { ...sourceConfig?.handlers };
+
+  if (column.hideable !== false && customColumnsState) {
+    const toolbarColumn = toolbar.columns.find((c) => c.id === column.id);
+    if (toolbarColumn) {
+      handlers.hideColumn = () =>
+        customColumnsState.onColumnCheckboxToggle(toolbarColumn);
+    }
+  }
+
+  if (column.sortable) {
+    handlers.sortAscending = (id) => state.sort(id, { forceDirection: 'asc' });
+    handlers.sortDescending = (id) =>
+      state.sort(id, { forceDirection: 'desc' });
+  }
+
+  const hasFilter =
+    toolbarFiltersState &&
+    state.collection.query.customFilters[column.id] != null;
+  if (hasFilter) {
+    handlers.filter = () => panels.openSidePanel('filters');
+  }
+
+  const groups = buildFieldActionGroups({
+    columnId: column.id,
+    handlers,
+    loading: sourceConfig?.loading,
+    disabledTooltips: sourceConfig?.disabledTooltips,
+    groups: HEADER_ACTION_GROUPS,
+    translate: toolbar.container.translate,
+    bi: source
+      ? {
+          reportBi: toolbar.reportBi,
+          location: HEADER_LOCATION,
+          listSize: source.fieldsSource.manageableFields.length,
+        }
+      : undefined,
+  });
+
+  if (groups.length === 0) {
+    return null;
+  }
+
+  return (
+    <HeaderActionsPopover
+      actions={groups}
+      dataHook={`header-actions-${column.id}`}
+    />
+  );
+}
+
+export const HeaderFieldActions = observer(_HeaderFieldActions);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout3960088494";
+var _namespace_ = "CellViewLayout705842804";
 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":"CellViewLayout3960088494__root"};
+export var classes = {"root":"CellViewLayout705842804__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_ = "Edit1828072131";
+var _namespace_ = "Edit249083917";
 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":"Edit1828072131__root","addressInput":"Edit1828072131__addressInput"};
+export var classes = {"root":"Edit249083917__root","addressInput":"Edit249083917__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_ = "Edit2043724849";
+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":"Edit2043724849__root","jsonInput":"Edit2043724849__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(),
+  };
+}

package/src/components/EditableTable/cellTypes/array/index.ts

@@ -0,0 +1,41 @@
+import { defineCellType } from '../../types';
+import { ArrayView } from './View';
+import { ArrayEdit } from './Edit';
+import { safeStringify, safeParse } from '@wix/patterns-fields';
+
+export { ArrayView, ArrayEdit };
+
+export const arrayCellType = defineCellType<unknown[]>({
+  type: 'array',
+  ViewComponent: ArrayView,
+  EditComponent: ArrayEdit,
+  serialize: (value) => (Array.isArray(value) ? safeStringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return [];
+    }
+    const parsed = safeParse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  },
+  validate: (value, _rules, translate) => {
+    if (value == null) {
+      return null;
+    }
+    if (typeof value === 'string') {
+      try {
+        const parsed = JSON.parse(value);
+        if (!Array.isArray(parsed)) {
+          return translate!('cairo.editableTable.array.validation.invalidType');
+        }
+      } catch {
+        return translate!('cairo.editableTable.array.validation.invalidSyntax');
+      }
+      return null;
+    }
+    return Array.isArray(value)
+      ? null
+      : translate!('cairo.editableTable.array.validation.invalidType');
+  },
+  editable: true,
+  clearable: true,
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1967439407";
+var _namespace_ = "Edit48829551";
 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":"Edit1967439407__root","booleanEdit":"Edit1967439407__booleanEdit"};
+export var classes = {"root":"Edit48829551__root","booleanEdit":"Edit48829551__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1226799981";
+var _namespace_ = "View823517074";
 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":"View1226799981__root","booleanView":"View1226799981__booleanView"};
+export var classes = {"root":"View823517074__root","booleanView":"View823517074__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2146361156";
+var _namespace_ = "Edit550744202";
 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":"Edit2146361156__root"};
+export var classes = {"root":"Edit550744202__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit186167185";
+var _namespace_ = "Edit240690608";
 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":"Edit186167185__root","dateInput":"Edit186167185__dateInput"};
+export var classes = {"root":"Edit240690608__root","dateInput":"Edit240690608__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2228976417";
+var _namespace_ = "View3955949016";
 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":"View2228976417__root"};
+export var classes = {"root":"View3955949016__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4121205863";
+var _namespace_ = "Edit2529607865";
 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":"Edit4121205863__root","half":"Edit4121205863__half","dateHalf":"Edit4121205863__dateHalf Edit4121205863__half","timeHalf":"Edit4121205863__timeHalf Edit4121205863__half","divider":"Edit4121205863__divider","passiveText":"Edit4121205863__passiveText","placeholderText":"Edit4121205863__placeholderText Edit4121205863__passiveText"};
+export var classes = {"root":"Edit2529607865__root","half":"Edit2529607865__half","dateHalf":"Edit2529607865__dateHalf Edit2529607865__half","timeHalf":"Edit2529607865__timeHalf Edit2529607865__half","divider":"Edit2529607865__divider","passiveText":"Edit2529607865__passiveText","placeholderText":"Edit2529607865__placeholderText Edit2529607865__passiveText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3843943714";
+var _namespace_ = "View2613364452";
 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":"View3843943714__root","leaf":"View3843943714__leaf","datePart":"View3843943714__datePart View3843943714__leaf","timePart":"View3843943714__timePart View3843943714__leaf","placeholder":"View3843943714__placeholder View3843943714__leaf","divider":"View3843943714__divider"};
+export var classes = {"root":"View2613364452__root","leaf":"View2613364452__leaf","datePart":"View2613364452__datePart View2613364452__leaf","timePart":"View2613364452__timePart View2613364452__leaf","placeholder":"View2613364452__placeholder View2613364452__leaf","divider":"View2613364452__divider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit824068898";
+var _namespace_ = "Edit272976519";
 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":"Edit824068898__root","emailInput":"Edit824068898__emailInput"};
+export var classes = {"root":"Edit272976519__root","emailInput":"Edit272976519__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2240928170";
+var _namespace_ = "View994872411";
 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":"View2240928170__root"};
+export var classes = {"root":"View994872411__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/index.ts

@@ -9,6 +9,7 @@ import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { colorCellType } from './color';
 import { objectCellType } from './object';
+import { arrayCellType } from './array';
 import { imageCellType } from './image';
 import { documentCellType } from './document';
 import { multiDocumentCellType } from './multiDocument';
@@ -32,6 +33,7 @@ export {
   emailCellType,
   colorCellType,
   objectCellType,
+  arrayCellType,
   imageCellType,
   documentCellType,
   multiDocumentCellType,
@@ -57,6 +59,7 @@ export const builtInCellTypes: CellType[] = [
   emailCellType,
   colorCellType,
   objectCellType,
+  arrayCellType,
   imageCellType,
   documentCellType,
   multiDocumentCellType,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit322156137";
+var _namespace_ = "Edit2518949657";
 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":"Edit322156137__root","numberInput":"Edit322156137__numberInput"};
+export var classes = {"root":"Edit2518949657__root","numberInput":"Edit2518949657__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3517057776";
+var _namespace_ = "View3249344471";
 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":"View3517057776__root","textView":"View3517057776__textView"};
+export var classes = {"root":"View3249344471__root","textView":"View3249344471__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};