@wix/patterns 1.421.0 → 1.423.0

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_ = "Edit3463564008";
+var _namespace_ = "Edit3299242763";
 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":"Edit3463564008__root","booleanEdit":"Edit3463564008__booleanEdit"};
+export var classes = {"root":"Edit3299242763__root","booleanEdit":"Edit3299242763__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_ = "View2322249764";
+var _namespace_ = "View846117487";
 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":"View2322249764__root","booleanView":"View2322249764__booleanView"};
+export var classes = {"root":"View846117487__root","booleanView":"View846117487__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_ = "Edit1394396611";
+var _namespace_ = "Edit3516520464";
 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":"Edit1394396611__root"};
+export var classes = {"root":"Edit3516520464__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_ = "Edit1762028557";
+var _namespace_ = "Edit2579851717";
 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":"Edit1762028557__root","dateInput":"Edit1762028557__dateInput"};
+export var classes = {"root":"Edit2579851717__root","dateInput":"Edit2579851717__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_ = "View2597359522";
+var _namespace_ = "View792784261";
 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":"View2597359522__root"};
+export var classes = {"root":"View792784261__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_ = "Edit2322562850";
+var _namespace_ = "Edit4114411643";
 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":"Edit2322562850__root","half":"Edit2322562850__half","dateHalf":"Edit2322562850__dateHalf Edit2322562850__half","timeHalf":"Edit2322562850__timeHalf Edit2322562850__half","divider":"Edit2322562850__divider","passiveText":"Edit2322562850__passiveText","placeholderText":"Edit2322562850__placeholderText Edit2322562850__passiveText"};
+export var classes = {"root":"Edit4114411643__root","half":"Edit4114411643__half","dateHalf":"Edit4114411643__dateHalf Edit4114411643__half","timeHalf":"Edit4114411643__timeHalf Edit4114411643__half","divider":"Edit4114411643__divider","passiveText":"Edit4114411643__passiveText","placeholderText":"Edit4114411643__placeholderText Edit4114411643__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_ = "View4066297099";
+var _namespace_ = "View340260800";
 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":"View4066297099__root","leaf":"View4066297099__leaf","datePart":"View4066297099__datePart View4066297099__leaf","timePart":"View4066297099__timePart View4066297099__leaf","placeholder":"View4066297099__placeholder View4066297099__leaf","divider":"View4066297099__divider"};
+export var classes = {"root":"View340260800__root","leaf":"View340260800__leaf","datePart":"View340260800__datePart View340260800__leaf","timePart":"View340260800__timePart View340260800__leaf","placeholder":"View340260800__placeholder View340260800__leaf","divider":"View340260800__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_ = "Edit357059007";
+var _namespace_ = "Edit3606504590";
 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":"Edit357059007__root","emailInput":"Edit357059007__emailInput"};
+export var classes = {"root":"Edit3606504590__root","emailInput":"Edit3606504590__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_ = "View3590950651";
+var _namespace_ = "View1121665420";
 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":"View3590950651__root"};
+export var classes = {"root":"View1121665420__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_ = "Edit3596938617";
+var _namespace_ = "Edit2211381145";
 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":"Edit3596938617__root","numberInput":"Edit3596938617__numberInput"};
+export var classes = {"root":"Edit2211381145__root","numberInput":"Edit2211381145__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_ = "View1719617854";
+var _namespace_ = "View4113334386";
 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":"View1719617854__root","textView":"View1719617854__textView"};
+export var classes = {"root":"View4113334386__root","textView":"View4113334386__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1440323002";
+var _namespace_ = "Edit687429529";
 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":"Edit1440323002__root","jsonInput":"Edit1440323002__jsonInput"};
+export var classes = {"root":"Edit687429529__root","jsonInput":"Edit687429529__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -21,7 +21,7 @@ export const objectCellType = defineCellType<Record<string, unknown>>({
       ? parsed
       : {};
   },
-  validate: (value) => {
+  validate: (value, _rules, translate) => {
     if (value == null) {
       return null;
     }
@@ -33,14 +33,18 @@ export const objectCellType = defineCellType<Record<string, unknown>>({
           parsed === null ||
           Array.isArray(parsed)
         ) {
-          return 'Value must be a valid JSON object';
+          return translate!(
+            'cairo.editableTable.object.validation.invalidType',
+          );
         }
       } catch {
-        return 'Invalid JSON syntax';
+        return translate!(
+          'cairo.editableTable.object.validation.invalidSyntax',
+        );
       }
     }
     if (typeof value !== 'object' || Array.isArray(value)) {
-      return 'Value must be a valid JSON object';
+      return translate!('cairo.editableTable.object.validation.invalidType');
     }
     return null;
   },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1975145327";
+var _namespace_ = "Edit1443891590";
 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":"Edit1975145327__root","selectInput":"Edit1975145327__selectInput"};
+export var classes = {"root":"Edit1443891590__root","selectInput":"Edit1443891590__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit525121471";
+var _namespace_ = "Edit2568652599";
 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":"Edit525121471__root","editWrapper":"Edit525121471__editWrapper","inputArea":"Edit525121471__inputArea"};
+export var classes = {"root":"Edit2568652599__root","editWrapper":"Edit2568652599__editWrapper","inputArea":"Edit2568652599__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3064087554";
+var _namespace_ = "Edit2621736823";
 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":"Edit3064087554__root","wrapper":"Edit3064087554__wrapper","overlay":"Edit3064087554__overlay"};
+export var classes = {"root":"Edit2621736823__root","wrapper":"Edit2621736823__wrapper","overlay":"Edit2621736823__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2513729222";
+var _namespace_ = "Edit3407352688";
 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":"Edit2513729222__root","urlInput":"Edit2513729222__urlInput"};
+export var classes = {"root":"Edit3407352688__root","urlInput":"Edit3407352688__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3405430789";
+var _namespace_ = "View1207806995";
 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":"View3405430789__root","textView":"View3405430789__textView","urlText":"View3405430789__urlText","suffix":"View3405430789__suffix"};
+export var classes = {"root":"View1207806995__root","textView":"View1207806995__textView","urlText":"View1207806995__urlText","suffix":"View1207806995__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/types.ts

@@ -1,3 +1,4 @@
+import type { Translate } from '@wix/bex-core';
 import type { CellType, ValidationRule } from '../../state/EditableTable/types';
 
 export interface CellViewProps<V> {
@@ -82,7 +83,11 @@ export type CellTypeDefinition<V> = Pick<
   EditComponent?: React.ComponentType<CellEditProps<V>>;
   serialize?: (value: V) => string;
   deserialize?: (raw: string) => V;
-  validate?: (value: V, rules?: ValidationRule[]) => string | null;
+  validate?: (
+    value: V,
+    rules?: ValidationRule[],
+    translate?: Translate,
+  ) => string | null;
   toggleValue?: (value: V) => V;
   editOnClick?: (value: V) => boolean;
   onTypeToEdit?: (params: {

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

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

package/src/components/ImportButton/ImportButton.tsx

@@ -14,10 +14,10 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const {
     toolbarType = 'default',
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
-    batchSize,
+    onJobError,
   } = props;
 
   const table = useToolbarCollectionContext<T, F>();
@@ -37,10 +37,10 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
             <ImportButtonModalLayout
               importModalState={state}
               fields={fields}
-              bulkUploadItems={bulkUploadItems}
+              collectionId={collectionId}
               backup={backup}
               updateSchema={updateSchema}
-              batchSize={batchSize}
+              onJobError={onJobError}
             />
           );