@wix/patterns 1.408.0 → 1.410.0

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.408.0",
+  "version": "1.410.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -214,10 +214,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.314.0",
-    "@wix/bex-utils": "2.101.0",
+    "@wix/bex-core": "2.316.0",
+    "@wix/bex-utils": "2.103.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.36.0",
+    "@wix/patterns-fields": "1.38.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.21.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -280,7 +280,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.76.0",
+    "@wix/cairo-integration-utils": "1.78.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -438,5 +438,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "53a1db9915fb2e760f1f281ecb4b15065561b65cabfe55d03d984436"
+  "falconPackageHash": "e8fcd5d3945035de4a4dcbdf4f0f9dc1651f20c428a78a03a68caa05"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer99201809";
+var _namespace_ = "CardContainer2098625827";
 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":"CardContainer99201809__root"};
+export var classes = {"root":"CardContainer2098625827__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_ = "CmsFieldForm3591695391";
+var _namespace_ = "CmsFieldForm2818483275";
 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":"CmsFieldForm3591695391__root","fullBleedDivider":"CmsFieldForm3591695391__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm2818483275__root","fullBleedDivider":"CmsFieldForm2818483275__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_ = "CmsFieldModal856822573";
+var _namespace_ = "CmsFieldModal1220975700";
 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":"CmsFieldModal856822573__root","modal":"CmsFieldModal856822573__modal"};
+export var classes = {"root":"CmsFieldModal1220975700__root","modal":"CmsFieldModal1220975700__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_ = "ValidationAndDefaultsSection2595354838";
+var _namespace_ = "ValidationAndDefaultsSection687977075";
 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":"ValidationAndDefaultsSection2595354838__root","accordionWrapper":"ValidationAndDefaultsSection2595354838__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection687977075__root","accordionWrapper":"ValidationAndDefaultsSection687977075__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_ = "CharactersLimitInput2648928344";
+var _namespace_ = "CharactersLimitInput2789941654";
 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":"CharactersLimitInput2648928344__root","field":"CharactersLimitInput2648928344__field"};
+export var classes = {"root":"CharactersLimitInput2789941654__root","field":"CharactersLimitInput2789941654__field"};
 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_ = "Collapse179457297";
+var _namespace_ = "Collapse2370791073";
 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":"Collapse179457297__root","exit":"Collapse179457297__exit"};
+export var classes = {"root":"Collapse2370791073__root","exit":"Collapse2370791073__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_ = "CollectionPage3246431164";
+var _namespace_ = "CollectionPage2250814823";
 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":"CollectionPage3246431164__root"};
+export var classes = {"root":"CollectionPage2250814823__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_ = "CollectionSectionHeader666307879";
+var _namespace_ = "CollectionSectionHeader2757361053";
 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":"CollectionSectionHeader666307879__root","summaryIcon":"CollectionSectionHeader666307879__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2757361053__root","summaryIcon":"CollectionSectionHeader2757361053__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_ = "CollectionTable215268445";
+var _namespace_ = "CollectionTable3467497077";
 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":"CollectionTable215268445__root"};
+export var classes = {"root":"CollectionTable3467497077__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_ = "CollectionTableWSRTable3091768728";
+var _namespace_ = "CollectionTableWSRTable633773035";
 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":"CollectionTableWSRTable3091768728__root"};
+export var classes = {"root":"CollectionTableWSRTable633773035__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_ = "CollectionToolbar908768589";
+var _namespace_ = "CollectionToolbar1280477767";
 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":"CollectionToolbar908768589__root","left":"CollectionToolbar908768589__left","right":"CollectionToolbar908768589__right","fullWidth":"CollectionToolbar908768589__fullWidth"};
+export var classes = {"root":"CollectionToolbar1280477767__root","left":"CollectionToolbar1280477767__left","right":"CollectionToolbar1280477767__right","fullWidth":"CollectionToolbar1280477767__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_ = "SearchOrCustomFilter2140848998";
+var _namespace_ = "SearchOrCustomFilter4085421925";
 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":"SearchOrCustomFilter2140848998__root","search":"SearchOrCustomFilter2140848998__search","searchMobile":"SearchOrCustomFilter2140848998__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter4085421925__root","search":"SearchOrCustomFilter4085421925__search","searchMobile":"SearchOrCustomFilter4085421925__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_ = "AutoCompleteReadonly1682096311";
+var _namespace_ = "AutoCompleteReadonly3620815071";
 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":"AutoCompleteReadonly1682096311__root"};
+export var classes = {"root":"AutoCompleteReadonly3620815071__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_ = "ViewsDropdown2476521499";
+var _namespace_ = "ViewsDropdown64974911";
 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":"ViewsDropdown2476521499__root"};
+export var classes = {"root":"ViewsDropdown64974911__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_ = "DragHandle2558321975";
+var _namespace_ = "DragHandle3977405813";
 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":"DragHandle2558321975__root"};
+export var classes = {"root":"DragHandle3977405813__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_ = "EditableCell3604687257";
+var _namespace_ = "EditableCell2720687217";
 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":"EditableCell3604687257__root","validationIndicator":"EditableCell3604687257__validationIndicator"};
+export var classes = {"root":"EditableCell2720687217__root","validationIndicator":"EditableCell2720687217__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_ = "HeaderActionsPopover2310692122";
+var _namespace_ = "HeaderActionsPopover2846776016";
 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":"HeaderActionsPopover2310692122__root"};
+export var classes = {"root":"HeaderActionsPopover2846776016__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_ = "CellViewLayout2029745465";
+var _namespace_ = "CellViewLayout230464168";
 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":"CellViewLayout2029745465__root"};
+export var classes = {"root":"CellViewLayout230464168__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,22 @@
+.addressInput {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 6px;
+  padding-right: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* WDS Input renders multiple wrapper divs with default min-width: auto on
+ * flex children — that prevents them shrinking below their intrinsic size
+ * and causes the input wrapper to overflow the cell. Force min-width: 0 on
+ * every level and width: 100% on the chain we care about. */
+.addressInput > div,
+.addressInput > div > div,
+.addressInput > div > div > div {
+  width: 100%;
+  min-width: 0;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit3256358223";
+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":"Edit3256358223__root","addressInput":"Edit3256358223__addressInput"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react';
+import { Box, Text } from '@wix/design-system';
+import { AddressInput } from '@wix/patterns-fields';
+import type { Address, AtlasService } from '@wix/patterns-fields';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export interface AddressCellTypeConfig {
+  /**
+   * Atlas service used to fetch address suggestions. Defaults to the SDK-backed
+   * WixAtlasService, which requires Wix runtime/auth context. Inject a custom
+   * implementation for tests or non-Wix consumers.
+   */
+  atlasService?: AtlasService;
+}
+
+/**
+ * Bridges patterns-fields AddressInput into EditableTable. State seeding,
+ * popover focus handling, and Enter-to-select are owned by AddressInput;
+ * here we only forward the cell-framework callbacks.
+ */
+export const AddressEdit: React.FC<CellEditProps<Address | undefined>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+  typeConfig,
+}) => {
+  const { atlasService } =
+    (typeConfig as AddressCellTypeConfig | undefined) ?? {};
+  const { translate: t } = useWixPatternsContainer();
+
+  const initialSearchText =
+    editTrigger &&
+    typeof editTrigger === 'object' &&
+    editTrigger.kind === 'type' &&
+    editTrigger.key.length === 1
+      ? editTrigger.key
+      : undefined;
+
+  const handleKeyDownCapture = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      if (e.currentTarget.contains(e.relatedTarget as Node | null)) {
+        return;
+      }
+      onCommit();
+    },
+    [onCommit],
+  );
+
+  return (
+    <div
+      onKeyDownCapture={handleKeyDownCapture}
+      onBlur={handleBlur}
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      className={classes.addressInput}
+    >
+      <AddressInput
+        ref={(instance) => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
+        value={value}
+        onChange={onChange}
+        onSelectAddress={onCommit}
+        atlasService={atlasService}
+        initialSearchText={initialSearchText}
+        size="small"
+        border="none"
+        popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
+        noResultsText={
+          <Box padding="SP1" align="center">
+            <Text light secondary>
+              {t('EditableTable.fields.no_addresses_found')}
+            </Text>
+          </Box>
+        }
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+const { fireEvent = null } =
+  process.env.NODE_ENV === 'test'
+    ? (() => {
+        try {
+          return require('@testing-library/react');
+        } catch {}
+        return {};
+      })()
+    : {};
+
+export function AddressEditUniDriver(base: UniDriver) {
+  const getInput = () => base.$('input');
+  const getNativeInput = async () =>
+    (await getInput().getNative()) as HTMLInputElement | null;
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: async () => {
+      const el = await getNativeInput();
+      return el?.value ?? '';
+    },
+    keyDown: async (key: string) => {
+      await getInput().pressKey(key as any);
+    },
+    /**
+     * Blur the input as if focus moved outside the cell. relatedTarget defaults
+     * to <body> so the wrapper's `contains(relatedTarget)` check resolves false.
+     */
+    blurOutside: async () => {
+      const el = await getNativeInput();
+      if (!el) return;
+      fireEvent.blur(el, { relatedTarget: document.body });
+    },
+  };
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CellAddressView } from '@wix/patterns-fields';
+import type { Address } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { CellViewLayout } from '../CellViewLayout';
+
+export const AddressCellView: React.FC<CellViewProps<Address | undefined>> = ({
+  value,
+}) => (
+  <CellViewLayout>
+    <CellAddressView data={value} />
+  </CellViewLayout>
+);

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

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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Loader } from '@wix/design-system';
+import type { Address } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+import { defineCellType } from '../../types';
+import { AddressCellView } from './View';
+
+const addressEditFactory = () =>
+  import(/* webpackChunkName: "EditableTableAddressEdit" */ './Edit').then(
+    (m) => ({ default: m.AddressEdit }),
+  );
+
+if (
+  typeof process !== 'undefined' &&
+  process.env.STORYBOOK_VISUAL_E2E !== 'true'
+) {
+  addressEditFactory();
+}
+
+const LazyAddressEdit = React.lazy(addressEditFactory);
+
+const AddressEdit = (props: CellEditProps<Address | undefined>) => (
+  <React.Suspense fallback={<Loader size="tiny" />}>
+    <LazyAddressEdit {...props} />
+  </React.Suspense>
+);
+
+export { AddressCellView };
+export type { AddressCellTypeConfig } from './Edit';
+
+export const addressCellType = defineCellType<Address | undefined>({
+  type: 'address',
+  ViewComponent: AddressCellView,
+  EditComponent: AddressEdit,
+  serialize: (value) => (value ? JSON.stringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return undefined;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed.formatted === 'string') {
+        return parsed as Address;
+      }
+    } catch {}
+    return undefined;
+  },
+  validate: (value) => {
+    if (!value) {
+      return null;
+    }
+    if (
+      typeof value === 'object' &&
+      typeof value.formatted === 'string' &&
+      value.formatted.length > 0
+    ) {
+      return null;
+    }
+    return 'Invalid address';
+  },
+  editable: true,
+  clearable: true,
+  // Type-to-edit clears the cell so the user starts a fresh search query.
+  onTypeToEdit: () => ({ value: undefined }),
+});