@wix/patterns 1.374.0 → 1.377.0

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_ = "View4255914131";
+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":"View4255914131__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_ = "Edit3859246209";
+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":"Edit3859246209__root","urlInput":"Edit3859246209__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,16 +38,13 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
         alignItems: 'center',
       }}
     >
-      <Input
-        ref={inputRef}
-        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_ = "View874367675";
+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":"View874367675__root","textView":"View874367675__textView","urlText":"View874367675__urlText","suffix":"View874367675__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} />
 );

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

@@ -1,9 +1,9 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
-import { TextButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { IconButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
 
 export function UrlViewUniDriver(base: UniDriver, body: UniDriver) {
-  const linkButton = TextButtonUniDriver(
+  const linkButton = IconButtonUniDriver(
     base.$('[data-hook="open-link-button"]'),
     body,
   );
@@ -12,7 +12,10 @@ export function UrlViewUniDriver(base: UniDriver, body: UniDriver) {
     ...baseUniDriverFactory(base),
     getValue: () => base.text(),
     hasOpenLinkButton: () => linkButton.exists(),
-    getLinkHref: () => linkButton.getHref(),
+    getLinkHref: () =>
+      base
+        .$('[data-hook="open-link-button"]')
+        .attr('href') as Promise<string>,
     clickOpenLink: () => linkButton.click(),
   };
 }

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

@@ -4,8 +4,24 @@ import { UrlEdit } from './Edit';
 
 export { UrlView, UrlEdit };
 
+const URL_PROTOCOL_RE = /^https?:\/\//;
 const URL_PATTERN = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
 
+/** Auto-prepend https:// on commit.
+ *  - Has protocol → unchanged
+ *  - No dot → append .com then prepend https://  (e.g. "example" → "https://example.com")
+ *  - Has dot, no protocol → prepend https://  (e.g. "example.com" → "https://example.com")
+ */
+function normalizeUrlOnCommit(value: string): string {
+  if (!value) return value;
+  if (URL_PROTOCOL_RE.test(value)) return value;
+  let normalized = value;
+  if (!normalized.includes('.')) {
+    normalized = `${normalized}.com`;
+  }
+  return `https://${normalized}`;
+}
+
 export const urlCellType = defineCellType<string>({
   type: 'url',
   ViewComponent: UrlView,
@@ -20,5 +36,7 @@ export const urlCellType = defineCellType<string>({
   },
   editable: true,
   clearable: true,
+  // Replace the current value with the typed key (same behaviour as text/email).
   onTypeToEdit: ({ key }) => ({ value: key }),
+  normalizeOnCommit: normalizeUrlOnCommit,
 });

package/src/components/EditableTable/headerActionTypes.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export interface HeaderAction {
+  /** The text label of the action item. */
+  label: string;
+  /** Handler called when the action is clicked. */
+  onClick: () => void;
+  /** An icon to display before the text. */
+  icon?: ReactNode;
+  /** Disables the action both visually and functionally. */
+  disabled?: boolean;
+  /** Tooltip text shown when the action is disabled. */
+  disabledTooltip?: string;
+  /** Visual style — 'dark' (default) or 'destructive' (red). */
+  skin?: 'dark' | 'destructive';
+}

package/src/components/EditableTable/index.ts

@@ -1,2 +1,3 @@
 export * from './EditableTable';
 export { defineCellType } from './types';
+export type { CellViewProps, CellEditProps } from './types';

package/src/components/EditableTable/types.ts

@@ -3,6 +3,11 @@ import type { CellType, ValidationRule } from '../../state/EditableTable/types';
 export interface CellViewProps<V> {
   value: V;
   typeConfig?: unknown;
+  validation?: ValidationRule[];
+}
+
+export interface Focusable {
+  focus: () => void;
 }
 
 export interface CellEditProps<V> {
@@ -11,10 +16,12 @@ export interface CellEditProps<V> {
   onCommit: () => void;
   onCancel: () => void;
   /** Ref to the focusable input element. Used for type-to-edit (focusing the input when user starts typing on a focused cell). */
-  inputRef?: React.MutableRefObject<any>;
+  inputRef?: React.MutableRefObject<Focusable | undefined | null>;
   typeConfig?: unknown;
   /** How edit mode was triggered. Edit components can use this to customize behavior (e.g., date picker auto-opens on 'type'). */
-  editTrigger?: 'type' | 'enter' | 'doubleClick' | null;
+  editTrigger?: { kind: 'type'; key: string } | 'enter' | 'doubleClick' | null;
+  /** Column-level validation rules. Edit components can derive UI behavior (e.g., maxLength blocking/tooltip) from these. */
+  validation?: ValidationRule[];
 }
 
 /** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
@@ -28,7 +35,9 @@ export function defineCellType<V>(cellType: {
   editable?: boolean;
   clearable?: boolean;
   toggleValue?: (value: V) => V;
-  onTypeToEdit?: (params: { key: string }) => { value?: V } | undefined;
+  onTypeToEdit?: (params: { key: string; validation?: ValidationRule[] }) => { value?: V } | undefined;
+  normalizeOnCommit?: (value: V) => V;
 }): CellType {
   return cellType;
 }
+

package/src/components/EditableTable/useBuiltInHeaderActions.tsx

@@ -0,0 +1,96 @@
+import React, { useMemo, type ReactNode } from 'react';
+import {
+  SortAscendingSmall,
+  SortDescendingSmall,
+  ContentFilterSmall,
+  HiddenSmall,
+} from '@wix/wix-ui-icons-common';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+import type { EditableColumn } from '../../state/EditableTable/types';
+import type { HeaderAction } from './headerActionTypes';
+import { HeaderActionsPopover } from './HeaderActionsPopover';
+
+export function useBuiltInHeaderActions<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+  columns: EditableColumn<T>[],
+  disabled?: boolean,
+): Record<string, ReactNode> {
+  const { toolbar } = state;
+  const { customColumnsState, panels, toolbarFiltersState } = toolbar;
+
+  return useMemo(() => {
+    if (disabled) {
+      return {};
+    }
+
+    const result: Record<string, ReactNode> = {};
+
+    for (const col of columns) {
+      const groups: HeaderAction[][] = [];
+
+      // Group 1: Sort actions
+      if (col.sortable) {
+        groups.push([
+          {
+            label: 'Sort Ascending',
+            icon: <SortAscendingSmall />,
+            onClick: () => state.sort(col.id, { forceDirection: 'asc' }),
+          },
+          {
+            label: 'Sort Descending',
+            icon: <SortDescendingSmall />,
+            onClick: () => state.sort(col.id, { forceDirection: 'desc' }),
+          },
+        ]);
+      }
+
+      // Group 2: Filter action (only when filter exists for this column)
+      const hasFilter =
+        toolbarFiltersState &&
+        state.collection.query.customFilters[col.id] != null;
+      if (hasFilter) {
+        groups.push([
+          {
+            label: 'Filter',
+            icon: <ContentFilterSmall />,
+            onClick: () => panels.openSidePanel('filters'),
+          },
+        ]);
+      }
+
+      // Group 3: Hide column action
+      if (col.hideable !== false && customColumnsState) {
+        const column = toolbar.columns.find((c) => c.id === col.id);
+        if (column) {
+          groups.push([
+            {
+              label: 'Hide Column',
+              icon: <HiddenSmall />,
+              onClick: () => customColumnsState.onColumnCheckboxToggle(column),
+            },
+          ]);
+        }
+      }
+
+      if (groups.length > 0) {
+        result[col.id] = (
+          <HeaderActionsPopover
+            actions={groups}
+            dataHook={`header-actions-${col.id}`}
+          />
+        );
+      }
+    }
+
+    return result;
+  }, [
+    state,
+    columns,
+    toolbar,
+    customColumnsState,
+    panels,
+    toolbarFiltersState,
+    disabled,
+  ]);
+}