@wix/patterns 1.375.0 → 1.377.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2801818457";
+var _namespace_ = "View4179032775";
 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":"View2801818457__root","booleanView":"View2801818457__booleanView"};
+export var classes = {"root":"View4179032775__root","booleanView":"View4179032775__booleanView"};
 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_ = "Edit2206923902";
+var _namespace_ = "Edit1249065124";
 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":"Edit2206923902__root","dateInput":"Edit2206923902__dateInput"};
+export var classes = {"root":"Edit1249065124__root","dateInput":"Edit1249065124__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -25,7 +25,7 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
 
   // Auto-open calendar when entering edit mode via type-to-edit
   useEffect(() => {
-    if (editTrigger === 'type') {
+    if (editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type') {
       datePickerRef.current?.openCalendar();
     }
   }, [editTrigger]);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1773446176";
+var _namespace_ = "View4250323581";
 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":"View1773446176__root"};
+export var classes = {"root":"View4250323581__root"};
 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_ = "Edit987738361";
+var _namespace_ = "Edit3352778691";
 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":"Edit987738361__root","emailInput":"Edit987738361__emailInput"};
+export var classes = {"root":"Edit3352778691__root","emailInput":"Edit3352778691__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_ = "View3460217702";
+var _namespace_ = "View2375146148";
 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":"View3460217702__root"};
+export var classes = {"root":"View2375146148__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -3,7 +3,6 @@ import { textCellType } from './text';
 import { numberCellType } from './number';
 import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
-import { selectCellType } from './select';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
@@ -13,7 +12,6 @@ export {
   numberCellType,
   booleanCellType,
   dateCellType,
-  selectCellType,
   urlCellType,
   emailCellType,
   objectCellType,
@@ -25,7 +23,6 @@ export const builtInCellTypes: CellType[] = [
   numberCellType,
   booleanCellType,
   dateCellType,
-  selectCellType,
   urlCellType,
   emailCellType,
   objectCellType,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2842916532";
+var _namespace_ = "Edit1556339613";
 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":"Edit2842916532__root","numberInput":"Edit2842916532__numberInput"};
+export var classes = {"root":"Edit1556339613__root","numberInput":"Edit1556339613__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_ = "View993001290";
+var _namespace_ = "View2548840183";
 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":"View993001290__root","textView":"View993001290__textView"};
+export var classes = {"root":"View2548840183__root","textView":"View2548840183__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_ = "Edit3788203626";
+var _namespace_ = "Edit3112699959";
 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":"Edit3788203626__root","jsonInput":"Edit3788203626__jsonInput"};
+export var classes = {"root":"Edit3112699959__root","jsonInput":"Edit3112699959__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_ = "View2359595308";
+var _namespace_ = "View1785259297";
 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":"View2359595308__root"};
+export var classes = {"root":"View1785259297__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1952036742";
+var _namespace_ = "Edit1889865253";
 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":"Edit1952036742__root","selectInput":"Edit1952036742__selectInput"};
+export var classes = {"root":"Edit1889865253__root","selectInput":"Edit1889865253__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,6 +8,14 @@
   width: 100%;
 }
 
+/* Specific-values (autocomplete) mode */
+.inputArea input {
+  padding: 9px 12px 8px !important;
+  outline: none !important;
+  border: none !important;
+  box-sizing: border-box !important;
+}
+
 /* Strip WDS chrome from wrapper div */
 .inputArea > div {
   border: none !important;
@@ -21,6 +29,7 @@
   padding: 9px 12px 8px !important;
   outline: none !important;
   border: none !important;
+  box-sizing: border-box !important;
 }
 
 .inputArea:not(:isFocused) textarea {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2174982117";
+var _namespace_ = "Edit1726914236";
 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":"Edit2174982117__root","editWrapper":"Edit2174982117__editWrapper","inputArea":"Edit2174982117__inputArea"};
+export var classes = {"root":"Edit1726914236__root","editWrapper":"Edit1726914236__editWrapper","inputArea":"Edit1726914236__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,39 +1,44 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
-import { InputArea } from '@wix/design-system';
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  CellTextInput,
+  CellAutoCompleteInput,
+  type CellAutoCompleteHandle,
+} from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
+import type { ValidationRule } from '../../../../state/EditableTable/types';
+import { useCloseOnAncestorScroll } from '../../useCloseOnAncestorScroll';
 import { st, classes } from './Edit.st.css.js';
 
-const toSingleLine = (value?: string) =>
-  value ? value.replace(/\n+/g, ' ') : '';
-
-const PADDING = 18;
-const MIN_HEIGHT = 36;
+function getMaxLength(validation?: ValidationRule[]) {
+  return (
+    validation?.find(
+      (r): r is { type: 'maxLength'; value: number; message: string } =>
+        r.type === 'maxLength',
+    )
+  )?.value;
+}
 
-const getMaxHeight = (element?: HTMLElement | null) => {
-  if (!element) {
-    return undefined;
-  }
-  const rect = element.getBoundingClientRect();
-  return Math.max(window.innerHeight - rect.top - PADDING, MIN_HEIGHT);
-};
+function getSpecificValues(validation?: ValidationRule[]) {
+  return (
+    validation?.find(
+      (r): r is { type: 'specificValues'; values: { id: string; value: string }[]; message: string } =>
+        r.type === 'specificValues',
+    )
+  )?.values;
+}
 
-export const TextEdit: React.FC<CellEditProps<string>> = ({
+// Plain text mode
+const TextEditPlain: React.FC<CellEditProps<string>> = ({
   value,
   onChange,
   onCommit,
   onCancel,
   inputRef,
+  validation,
 }) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const inputAreaRef = useRef<InputArea | null>(null);
+  const maxLength = getMaxLength(validation);
   const [isFocused, setIsFocused] = useState(false);
 
-  useEffect(() => {
-    if (isFocused) {
-      inputAreaRef.current?.calculateComputedRows();
-    }
-  }, [isFocused]);
-
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Enter' && !e.shiftKey) {
@@ -47,36 +52,107 @@ export const TextEdit: React.FC<CellEditProps<string>> = ({
     [onCommit, onCancel],
   );
 
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-
+  const handleFocus = useCallback(() => setIsFocused(true), []);
   const handleBlur = useCallback(() => {
     setIsFocused(false);
     onCommit();
   }, [onCommit]);
 
   return (
-    <div ref={wrapperRef} className={classes.editWrapper}>
-      <InputArea
-        ref={(instance) => {
-          inputAreaRef.current = instance;
-          if (inputRef) {
-            inputRef.current = instance;
-          }
-        }}
-        size="small"
-        value={!isFocused ? toSingleLine(value) : value ?? ''}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
+    <div className={classes.editWrapper}>
+      <CellTextInput
+        inputRef={inputRef}
+        value={value ?? ''}
+        onChange={onChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        autoSelect={false}
-        autoGrow
-        minRowsAutoGrow={1}
-        maxHeight={getMaxHeight(wrapperRef.current) + 'px'}
+        onKeyDown={handleKeyDown}
+        maxLength={maxLength}
         className={st(classes.inputArea, { isFocused })}
       />
     </div>
   );
 };
+
+// Specific values mode — autocomplete with a closed list of options
+const TextEditSpecificValues: React.FC<
+  CellEditProps<string> & { options: { id: string; value: string }[] }
+> = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, options }) => {
+  const acHandle = useRef<CellAutoCompleteHandle | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const closeDropdown = useCallback(() => acHandle.current?.hideOptions(), []);
+  useCloseOnAncestorScroll(wrapperRef, closeDropdown, !!editTrigger);
+
+  // Set in capture phase on ArrowUp/Down so onOptionMarked only updates
+  // editingValue for explicit arrow navigation — not for auto-highlight on open.
+  const isArrowNavRef = useRef(false);
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      onChange(id);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const handleClear = useCallback(() => onChange(''), [onChange]);
+
+  const handleOptionMarked = useCallback(
+    (id: string | null) => {
+      if (id && isArrowNavRef.current) {
+        onChange(id);
+        isArrowNavRef.current = false;
+      }
+    },
+    [onChange],
+  );
+
+  // Capture phase: set arrow-nav flag before AutoComplete fires onOptionMarked,
+  // and cancel on Escape before the dropdown processes it.
+  const handleKeyDownCapture = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        isArrowNavRef.current = true;
+      }
+    },
+    [onCancel],
+  );
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classes.editWrapper}
+      onKeyDownCapture={handleKeyDownCapture}
+    >
+      <CellAutoCompleteInput
+        ref={acHandle}
+        value={value || undefined}
+        options={options}
+        initialSearchText={
+          editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+            ? editTrigger.key
+            : undefined
+        }
+        autoOpen={!!editTrigger}
+        onSelect={handleSelect}
+        onClear={handleClear}
+        onOptionMarked={handleOptionMarked}
+        inputRef={inputRef}
+        className={classes.inputArea}
+      />
+    </div>
+  );
+};
+
+export const TextEdit: React.FC<CellEditProps<string>> = (props) => {
+  const specificValues = getSpecificValues(props.validation);
+  if (specificValues) {
+    return <TextEditSpecificValues {...props} options={specificValues} />;
+  }
+  return <TextEditPlain {...props} />;
+};

package/src/components/EditableTable/cellTypes/text/SpecificValuesEdit.uni.driver.ts

@@ -0,0 +1,27 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { AutoCompleteUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { AutoCompleteUniDriver as AutoCompleteUniDriverFactory } from '@wix/design-system/dist/types/AutoComplete/AutoComplete.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function SpecificValuesEditUniDriver(base: UniDriver, body: UniDriver) {
+  const ac = (
+    AutoCompleteUniDriver as UniDriverFactory<AutoCompleteUniDriverFactory>
+  )(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => ac.inputDriver.keyDown({ key, ...opts }),
+    blur: () => ac.inputDriver.blur(),
+    clickInput: () => ac.inputDriver.click(),
+    getValue: () => ac.inputDriver.getValue(),
+    selectOption: async (id: string) => {
+      await ac.driver.selectOptionById(id);
+    },
+    typeInInput: (text: string) => ac.inputDriver.enterText(text),
+    getOptionsContent: () => ac.dropdownLayoutDriver.optionsContent(),
+  };
+}

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

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

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

@@ -1,12 +1,22 @@
 import React from 'react';
-import { Text } from '@wix/design-system';
+import { TextView as FieldsTextView } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
+import type { ValidationRule } from '../../../../state/EditableTable/types';
 import { CellViewLayout } from '../CellViewLayout';
 
-export const TextView: React.FC<CellViewProps<string>> = ({ value }) => (
+function resolveDisplayValue(value: string | undefined, validation?: ValidationRule[]): string {
+  const rule = validation?.find(
+    (r): r is { type: 'specificValues'; values: { id: string; value: string }[]; message: string } =>
+      r.type === 'specificValues',
+  );
+  if (rule) {
+    return rule.values.find((v) => v.id === value)?.value ?? value ?? '';
+  }
+  return value ?? '';
+}
+
+export const TextView: React.FC<CellViewProps<string>> = ({ value, validation }) => (
   <CellViewLayout>
-    <Text size="small" ellipsis>
-      {value ?? ''}
-    </Text>
+    <FieldsTextView data={resolveDisplayValue(value, validation)} />
   </CellViewLayout>
 );

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

@@ -12,5 +12,11 @@ export const textCellType = defineCellType<string>({
   deserialize: (raw) => raw,
   editable: true,
   clearable: true,
-  onTypeToEdit: ({ key }) => ({ value: key }),
+  onTypeToEdit: ({ key, validation }) => {
+    const hasSpecificValues = validation?.some((r) => r.type === 'specificValues');
+    // For specific-values cells, keep editingValue as the last committed option id.
+    // The typed key is forwarded via editTrigger.key so TextEditSpecificValues can
+    // use it as initialSearchText without risk of committing a raw search string.
+    return hasSpecificValues ? {} : { value: key };
+  },
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1985072426";
+var _namespace_ = "Edit1746178889";
 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":"Edit1985072426__root","urlInput":"Edit1985072426__urlInput"};
+export var classes = {"root":"Edit1746178889__root","urlInput":"Edit1746178889__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import { Input } from '@wix/design-system';
+import { CellUrlInput } from '@wix/patterns-fields';
+import type { InputImperativeActions } from '@wix/design-system';
 import type { CellEditProps } from '../../types';
 import { classes } from './Edit.st.css.js';
 
@@ -9,6 +10,7 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
   onCommit,
   onCancel,
   inputRef,
+  editTrigger,
 }) => {
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -36,20 +38,13 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
         alignItems: 'center',
       }}
     >
-      <Input
-        ref={(instance => {
-          if (inputRef) {
-            inputRef.current = instance;
-          }
-        })}
-        size="small"
-        border="none"
+      <CellUrlInput
+        inputRef={inputRef as React.MutableRefObject<InputImperativeActions | null | undefined>}
         value={value ?? ''}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={onChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        type="url"
-        autoSelect={false}
+        autoSelect={!(typeof editTrigger === 'object' && editTrigger?.kind === 'type')}
         className={classes.urlInput}
       />
     </div>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1156487360";
+var _namespace_ = "View1214063703";
 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":"View1156487360__root","textView":"View1156487360__textView","urlText":"View1156487360__urlText","suffix":"View1156487360__suffix"};
+export var classes = {"root":"View1214063703__root","textView":"View1214063703__textView","urlText":"View1214063703__urlText","suffix":"View1214063703__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,28 +1,7 @@
 import React from 'react';
-import { Text, TextButton } from '@wix/design-system';
+import { UrlView as FieldsUrlView } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
-import { st, classes } from './View.st.css.js';
 
 export const UrlView: React.FC<CellViewProps<string>> = ({ value }) => (
-  <div className={st(classes.textView, { suffixOnHover: true })}>
-    <Text size="small" ellipsis className={classes.urlText}>
-      {value ?? ''}
-    </Text>
-    {value && (
-      <TextButton
-        dataHook="open-link-button"
-        size="small"
-        underline="always"
-        as="a"
-        href={value}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={(e: React.MouseEvent) => e.stopPropagation()}
-        onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
-        className={classes.suffix}
-      >
-        Open link
-      </TextButton>
-    )}
-  </div>
+  <FieldsUrlView value={value} />
 );