@wix/patterns 1.486.0 → 1.488.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.486.0";
+export declare const version = "patterns@1.488.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.486.0",
+  "version": "1.488.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -229,11 +229,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.392.0",
-    "@wix/bex-utils": "2.179.0",
+    "@wix/bex-core": "2.394.0",
+    "@wix/bex-utils": "2.181.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.114.0",
-    "@wix/patterns-fields-utils": "1.95.0",
+    "@wix/patterns-fields": "1.116.0",
+    "@wix/patterns-fields-utils": "1.97.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -296,7 +296,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.154.0",
+    "@wix/cairo-integration-utils": "1.156.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -458,5 +458,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "424af663149c645743363bbacad440f8a989890a5eff20b54dd18085"
+  "falconPackageHash": "68a347b922b8b9e37703b56a406bc62adb881655121478bd05fd32cf"
 }

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm493100827";
+var _namespace_ = "CmsFieldForm3398675787";
 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":"CmsFieldForm493100827__root","fullBleedDivider":"CmsFieldForm493100827__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm3398675787__root","fullBleedDivider":"CmsFieldForm3398675787__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2067729523";
+var _namespace_ = "CmsFieldModal1453244867";
 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":"CmsFieldModal2067729523__root","modal":"CmsFieldModal2067729523__modal"};
+export var classes = {"root":"CmsFieldModal1453244867__root","modal":"CmsFieldModal1453244867__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1323600397";
+var _namespace_ = "ValidationAndDefaultsSection1707926534";
 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":"ValidationAndDefaultsSection1323600397__root","accordionWrapper":"ValidationAndDefaultsSection1323600397__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection1707926534__root","accordionWrapper":"ValidationAndDefaultsSection1707926534__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse139149974";
+var _namespace_ = "Collapse2363945563";
 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":"Collapse139149974__root","exit":"Collapse139149974__exit"};
+export var classes = {"root":"Collapse2363945563__root","exit":"Collapse2363945563__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2064924607";
+var _namespace_ = "CollectionPage958440377";
 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":"CollectionPage2064924607__root"};
+export var classes = {"root":"CollectionPage958440377__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_ = "CollectionSectionHeader2362009162";
+var _namespace_ = "CollectionSectionHeader4148334812";
 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":"CollectionSectionHeader2362009162__root","summaryIcon":"CollectionSectionHeader2362009162__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader4148334812__root","summaryIcon":"CollectionSectionHeader4148334812__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_ = "CollectionTable2921112123";
+var _namespace_ = "CollectionTable1896522919";
 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":"CollectionTable2921112123__root"};
+export var classes = {"root":"CollectionTable1896522919__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_ = "CollectionTableWSRTable2562673435";
+var _namespace_ = "CollectionTableWSRTable4137520834";
 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":"CollectionTableWSRTable2562673435__root","titlebar":"CollectionTableWSRTable2562673435__titlebar"};
+export var classes = {"root":"CollectionTableWSRTable4137520834__root","titlebar":"CollectionTableWSRTable4137520834__titlebar"};
 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_ = "CollectionToolbar1613799043";
+var _namespace_ = "CollectionToolbar3990194324";
 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":"CollectionToolbar1613799043__root","right":"CollectionToolbar1613799043__right","left":"CollectionToolbar1613799043__left","fullWidth":"CollectionToolbar1613799043__fullWidth"};
+export var classes = {"root":"CollectionToolbar3990194324__root","right":"CollectionToolbar3990194324__right","left":"CollectionToolbar3990194324__left","fullWidth":"CollectionToolbar3990194324__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1988598755";
+var _namespace_ = "SearchOrCustomFilter2861332951";
 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":"SearchOrCustomFilter1988598755__root","search":"SearchOrCustomFilter1988598755__search","searchMobile":"SearchOrCustomFilter1988598755__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2861332951__root","search":"SearchOrCustomFilter2861332951__search","searchMobile":"SearchOrCustomFilter2861332951__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -50,6 +50,13 @@ export interface CollectionToolbarFiltersProps {
   onSearchAppliedFilterTagRemove?: (item: string) => unknown;
   onSubToolbarClearButtonClicked?: () => unknown;
   hideAppliedFiltersTagList?: boolean;
+  /**
+   * Shows the filters button as an icon with a tooltip instead of a labeled button.
+   * When filters are applied, their count is shown as a badge on the icon.
+   * @default false
+   * @external
+   */
+  minimized?: boolean;
 }
 
 /**
@@ -81,6 +88,7 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
     onSubToolbarClearButtonClicked,
     hideAppliedFiltersTagList,
     useNewFilters,
+    minimized,
   } = props;
 
   const childrenArr = useFiltersSyncProps(children);
@@ -190,7 +198,9 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
 
   useEffect(() => {
     if (showFiltersPanelButton) {
-      state.featuredComponents.moreFiltersButton.set(() => <MoreFiltersCTA />);
+      state.featuredComponents.moreFiltersButton.set(() => (
+        <MoreFiltersCTA minimized={minimized} />
+      ));
 
       return () => {
         state.featuredComponents.moreFiltersButton.set(null);
@@ -200,7 +210,7 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
     state.featuredComponents.moreFiltersButton.set(null);
 
     return;
-  }, [showFiltersPanelButton]);
+  }, [showFiltersPanelButton, minimized]);
 
   const [tagListState] = useState(
     () =>
@@ -243,8 +253,16 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
         const toolbarLabel = filterProps.toolbarItemProps?.label;
         let label: React.ReactNode = showLabels && toolbarLabel;
         if (showFieldTypeIcons && showLabels && toolbarLabel) {
-          const toolbarIcon = getFieldTypeIcon({ fieldType: filterProps.fieldType, size: 'medium' });
-          label = <Box gap="SP1" verticalAlign="middle">{toolbarIcon}{toolbarLabel}</Box>;
+          const toolbarIcon = getFieldTypeIcon({
+            fieldType: filterProps.fieldType,
+            size: 'medium',
+          });
+          label = (
+            <Box gap="SP1" verticalAlign="middle">
+              {toolbarIcon}
+              {toolbarLabel}
+            </Box>
+          );
         }
 
         return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly2722372278";
+var _namespace_ = "AutoCompleteReadonly3460128489";
 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":"AutoCompleteReadonly2722372278__root"};
+export var classes = {"root":"AutoCompleteReadonly3460128489__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_ = "ViewsDropdown3639349405";
+var _namespace_ = "ViewsDropdown4257508007";
 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":"ViewsDropdown3639349405__root"};
+export var classes = {"root":"ViewsDropdown4257508007__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields2505415250";
+var _namespace_ = "CustomFieldFormPiiFields989464933";
 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":"CustomFieldFormPiiFields2505415250__root","tooltipText":"CustomFieldFormPiiFields2505415250__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields989464933__root","tooltipText":"CustomFieldFormPiiFields989464933__tooltipText"};
 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_ = "DragHandle35182140";
+var _namespace_ = "DragHandle480386188";
 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":"DragHandle35182140__root"};
+export var classes = {"root":"DragHandle480386188__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1442609629";
+var _namespace_ = "EditableCell1509611630";
 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":"EditableCell1442609629__root","errorMessage":"EditableCell1442609629__errorMessage"};
+export var classes = {"root":"EditableCell1509611630__root","errorMessage":"EditableCell1509611630__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -40,6 +40,7 @@ function _EditableCell<T, F extends FiltersMap>({
   const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
   const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
   const isEditable = state.isCellEditable(rowKey, columnId);
+  const canEdit = state.canEditCell(rowKey, columnId);
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
@@ -159,8 +160,7 @@ function _EditableCell<T, F extends FiltersMap>({
   const showEdit =
     (isEditing ||
       (isFocused &&
-        isEditable &&
-        !state.updateItemDisabled &&
+        canEdit &&
         (!!resolved.toggleValue || !!resolved.showEditWhenFocused))) &&
     EditComponent;
 
@@ -189,7 +189,7 @@ function _EditableCell<T, F extends FiltersMap>({
       validation={column.validation}
       columnId={columnId}
       rowKey={rowKey}
-      isEditable={isEditable}
+      isEditable={canEdit}
     />
   );
 

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -7,6 +7,8 @@ import { BooleanEditUniDriver } from './cellTypes/boolean/Edit.uni.driver';
 import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit.uni.driver';
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
 import { ReferenceEditUniDriver } from './cellTypes/reference/Edit.uni.driver';
+import { ReferenceViewUniDriver } from './cellTypes/reference/View.uni.driver';
+import { MultiReferenceViewUniDriver } from './cellTypes/multiReference/View.uni.driver';
 import { AddressEditUniDriver } from './cellTypes/address/Edit.uni.driver';
 import { ObjectEditUniDriver } from './cellTypes/object/Edit.uni.driver';
 
@@ -90,6 +92,12 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the reference cell edit driver (for reference columns) */
     getReferenceEdit: () => ReferenceEditUniDriver(base, body),
 
+    /** Get the reference cell view driver (for reference columns) */
+    getReferenceView: () => ReferenceViewUniDriver(base, body),
+
+    /** Get the multi-reference cell view driver (for multi-reference columns) */
+    getMultiReferenceView: () => MultiReferenceViewUniDriver(base, body),
+
     getAddressEdit: () => AddressEditUniDriver(base, body),
 
     /** Get the object (JSON) cell edit driver (for object columns) */

package/src/components/EditableTable/EditableColumnHeader.uni.driver.ts

@@ -13,7 +13,7 @@ export function EditableColumnHeaderUniDriver(
     const dataHook = await base.attr('data-hook');
     return (
       PopoverMenuUniDriver as UniDriverFactory<PopoverMenuUniDriverFactory>
-    )(body.$(`[data-hook="${dataHook}-menu"]`), body);
+    )(base.$(`[data-hook="${dataHook}-menu"]`), body);
   };
 
   return {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover3888555355";
+var _namespace_ = "HeaderActionsPopover2077875231";
 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":"HeaderActionsPopover3888555355__root"};
+export var classes = {"root":"HeaderActionsPopover2077875231__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_ = "CellViewLayout2406004452";
+var _namespace_ = "CellViewLayout3299487235";
 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":"CellViewLayout2406004452__root"};
+export var classes = {"root":"CellViewLayout3299487235__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "JsonInputEdit3906147003";
+var _namespace_ = "JsonInputEdit3232359785";
 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":"JsonInputEdit3906147003__root","jsonInput":"JsonInputEdit3906147003__jsonInput"};
+export var classes = {"root":"JsonInputEdit3232359785__root","jsonInput":"JsonInputEdit3232359785__jsonInput"};
 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_ = "Edit508883110";
+var _namespace_ = "Edit1744417643";
 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":"Edit508883110__root","addressInput":"Edit508883110__addressInput"};
+export var classes = {"root":"Edit1744417643__root","addressInput":"Edit1744417643__addressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/address/index.tsx

@@ -40,6 +40,8 @@ export const addressCellType = defineCellType<Address | null | undefined>({
     }
     return hardConvert(raw);
   },
+  invalidInputMessage: (_raw, translate) =>
+    translate!('cairo.editableTable.address.validation.invalid'),
   validate: (value, _rules, translate) => {
     if (value == null) {
       return null;

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

@@ -1,7 +1,7 @@
 import { defineCellType } from '../../types';
 import { ArrayView } from './View';
 import { ArrayEdit } from './Edit';
-import { safeStringify, safeParse } from '@wix/patterns-fields';
+import { safeStringify } from '@wix/patterns-fields';
 
 export { ArrayView, ArrayEdit };
 
@@ -14,8 +14,19 @@ export const arrayCellType = defineCellType<unknown[]>({
     if (!raw) {
       return [];
     }
-    const parsed = safeParse(raw);
-    return Array.isArray(parsed) ? parsed : [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      throw new Error();
+    }
+    return parsed;
+  },
+  invalidInputMessage: (raw, translate) => {
+    try {
+      JSON.parse(raw);
+    } catch {
+      return translate!('cairo.editableTable.array.validation.invalidSyntax');
+    }
+    return translate!('cairo.editableTable.array.validation.invalidType');
   },
   validate: (value, _rules, translate) => {
     if (value == null) {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit733540309";
+var _namespace_ = "Edit1616516250";
 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":"Edit733540309__root","booleanEdit":"Edit733540309__booleanEdit"};
+export var classes = {"root":"Edit1616516250__root","booleanEdit":"Edit1616516250__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_ = "View2378345502";
+var _namespace_ = "View1830647550";
 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":"View2378345502__root","booleanView":"View2378345502__booleanView"};
+export var classes = {"root":"View1830647550__root","booleanView":"View1830647550__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -23,6 +23,12 @@ export const booleanCellType = defineCellType<boolean>({
     }
     throw new Error();
   },
+  invalidInputMessage: (_raw, translate) =>
+    translate!('cairo.editableTable.boolean.validation.invalid'),
+  validate: (value, _rules, translate) =>
+    value == null || typeof value === 'boolean'
+      ? null
+      : translate!('cairo.editableTable.boolean.validation.invalid'),
   editable: true,
   toggleValue: (value) => !value,
 });