@wix/patterns 1.363.0 → 1.366.0

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

@@ -0,0 +1,82 @@
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { InputArea } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { st, classes } from './Edit.st.css.js';
+
+const toSingleLine = (value?: string) =>
+  value ? value.replace(/\n+/g, ' ') : '';
+
+const PADDING = 18;
+const MIN_HEIGHT = 36;
+
+const getMaxHeight = (element?: HTMLElement | null) => {
+  if (!element) {
+    return undefined;
+  }
+  const rect = element.getBoundingClientRect();
+  return Math.max(window.innerHeight - rect.top - PADDING, MIN_HEIGHT);
+};
+
+export const TextEdit: React.FC<CellEditProps<string>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputAreaRef = useRef<InputArea | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (isFocused) {
+      inputAreaRef.current?.calculateComputedRows();
+    }
+  }, [isFocused]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        onCommit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  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}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        autoSelect={false}
+        autoGrow
+        minRowsAutoGrow={1}
+        maxHeight={getMaxHeight(wrapperRef.current) + 'px'}
+        className={st(classes.inputArea, { isFocused })}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { InputAreaUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { InputAreaUniDriver as InputAreaUniDriverFactory } from '@wix/design-system/dist/types/InputArea/InputArea.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function TextEditUniDriver(base: UniDriver, body: UniDriver) {
+  const inputArea = (
+    InputAreaUniDriver as UniDriverFactory<InputAreaUniDriverFactory>
+  )(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => inputArea.getValue(),
+    typeValue: (value: string) => inputArea.enterText(value),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => inputArea.trigger('keyDown', { key, ...opts }),
+    blur: () => inputArea.trigger('blur', {}),
+    focus: () => inputArea.focus(),
+  };
+}

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

@@ -0,0 +1,4 @@
+.textView {
+  width: 100%;
+  padding: 9px 12px;
+}

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text } from '@wix/design-system';
+import type { CellViewProps } from '../../types';
+import { classes } from './View.st.css.js';
+
+export const TextView: React.FC<CellViewProps<string>> = ({ value }) => (
+  <Text size="small" ellipsis className={classes.textView}>
+    {value ?? ''}
+  </Text>
+);

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

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

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

@@ -0,0 +1,16 @@
+import { defineCellType } from '../../types';
+import { TextView } from './View';
+import { TextEdit } from './Edit';
+
+export { TextView, TextEdit };
+
+export const textCellType = defineCellType<string>({
+  type: 'text',
+  ViewComponent: TextView,
+  EditComponent: TextEdit,
+  serialize: (value) => value ?? '',
+  deserialize: (raw) => raw,
+  editable: true,
+  clearable: true,
+  onTypeToEdit: ({ key }) => ({ value: key }),
+});

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

@@ -0,0 +1,4 @@
+.urlInput {
+  width: 100%;
+  margin-left: -1px;
+}

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

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

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

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Input } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const UrlEdit: React.FC<CellEditProps<string>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onCommit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    onCommit();
+  }, [onCommit]);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Input
+        ref={inputRef}
+        size="small"
+        border="none"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        type="url"
+        autoSelect={false}
+        className={classes.urlInput}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { InputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { InputUniDriver as InputUniDriverFactory } from '@wix/design-system/dist/types/Input/Input.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function UrlEditUniDriver(base: UniDriver, body: UniDriver) {
+  const input = (InputUniDriver as UniDriverFactory<InputUniDriverFactory>)(
+    base,
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => input.getValue(),
+    typeValue: (value: string) => input.enterText(value),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => input.keyDown({ key, ...opts }),
+    blur: () => input.blur(),
+  };
+}

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

@@ -0,0 +1,22 @@
+.textView {
+  -st-states: suffixOnHover;
+  width: 100%;
+  padding: 9px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.urlText {
+  flex: 1;
+  min-width: 0;
+}
+
+.suffix {
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+.textView:suffixOnHover:not(:hover) .suffix {
+  display: none;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "View793386274";
+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":"View793386274__root","textView":"View793386274__textView","urlText":"View793386274__urlText","suffix":"View793386274__suffix"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text, TextButton } from '@wix/design-system';
+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>
+);

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

@@ -0,0 +1,18 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { TextButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function UrlViewUniDriver(base: UniDriver, body: UniDriver) {
+  const linkButton = TextButtonUniDriver(
+    base.$('[data-hook="open-link-button"]'),
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    getValue: () => base.text(),
+    hasOpenLinkButton: () => linkButton.exists(),
+    getLinkHref: () => linkButton.getHref(),
+    clickOpenLink: () => linkButton.click(),
+  };
+}

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

@@ -0,0 +1,24 @@
+import { defineCellType } from '../../types';
+import { UrlView } from './View';
+import { UrlEdit } from './Edit';
+
+export { UrlView, UrlEdit };
+
+const URL_PATTERN = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+
+export const urlCellType = defineCellType<string>({
+  type: 'url',
+  ViewComponent: UrlView,
+  EditComponent: UrlEdit,
+  serialize: (value) => value ?? '',
+  deserialize: (raw) => raw,
+  validate: (value) => {
+    if (value && !URL_PATTERN.test(value)) {
+      return 'Invalid URL format';
+    }
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: ({ key }) => ({ value: key }),
+});

package/src/components/EditableTable/index.ts

@@ -0,0 +1,2 @@
+export * from './EditableTable';
+export { defineCellType } from './types';

package/src/components/EditableTable/types.ts

@@ -0,0 +1,34 @@
+import type { CellType, ValidationRule } from '../../state/EditableTable/types';
+
+export interface CellViewProps<V> {
+  value: V;
+  typeConfig?: unknown;
+}
+
+export interface CellEditProps<V> {
+  value: V;
+  onChange: (value: V) => void;
+  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>;
+  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;
+}
+
+/** Type-safe factory for defining cell types. V ensures all value-typed fields are consistent. */
+export function defineCellType<V>(cellType: {
+  type: CellType['type'];
+  ViewComponent: React.ComponentType<CellViewProps<V>>;
+  EditComponent?: React.ComponentType<CellEditProps<V>>;
+  serialize?: (value: V) => string;
+  deserialize?: (raw: string) => V;
+  validate?: (value: V, rules?: ValidationRule[]) => string | null;
+  editable?: boolean;
+  clearable?: boolean;
+  toggleValue?: (value: V) => V;
+  onTypeToEdit?: (params: { key: string }) => { value?: V } | undefined;
+}): CellType {
+  return cellType;
+}

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -0,0 +1,109 @@
+import { useEffect, useCallback, useMemo } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+
+interface UseCellFocusAndEditingParams<T, F extends FiltersMap> {
+  state: EditableTableState<T, F>;
+  rowKey: string;
+  columnId: string;
+  cellRef: React.RefObject<HTMLDivElement | null>;
+  editInputRef: React.MutableRefObject<any>;
+}
+
+export function useCellFocusAndEditing<T, F extends FiltersMap>({
+  state,
+  rowKey,
+  columnId,
+  cellRef,
+  editInputRef,
+}: UseCellFocusAndEditingParams<T, F>) {
+  const { cellInteraction } = state;
+  const column = state._columnMap.get(columnId);
+  const resolved = column ? state.resolveCellType(column.cellType) : null;
+  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
+  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
+  const isEditable = state.isCellEditable(rowKey, columnId);
+
+  // When focused (not editing): focus the cell div so it receives keyboard events.
+  // When editing starts: focus the input (cursor at end, no select-all).
+  useEffect(() => {
+    if (!isFocused) {
+      return;
+    }
+
+    if (isEditing) {
+      if (
+        editInputRef.current &&
+        document.activeElement !== editInputRef.current
+      ) {
+        editInputRef.current.focus();
+      }
+    } else {
+      cellRef.current?.focus();
+    }
+  }, [isFocused, isEditing, cellRef, editInputRef]);
+
+  const handleActivate = useCallback(() => {
+    if (resolved?.toggleValue) {
+      state.cellValue.toggleCell(rowKey, columnId);
+    } else {
+      cellInteraction.startEdit();
+    }
+  }, [resolved, state, rowKey, columnId, cellInteraction]);
+
+  // Handle Enter and type-to-edit at the cell level
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!isFocused || !isEditable || isEditing) {
+        return;
+      }
+      if (state.updateItemDisabled) {
+        return;
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleActivate();
+        return;
+      }
+
+      // Type-to-edit: prevent the browser's default text insertion, start
+      // edit mode, then set the value programmatically via React state.
+      // startEdit() must come before setEditingValue() because it resets
+      // editingValue to undefined.
+      if (
+        e.key.length === 1 &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey &&
+        !e.nativeEvent.isComposing &&
+        editInputRef.current
+      ) {
+        const clearResult = resolved?.onTypeToEdit?.({ key: e.key });
+        if (!clearResult) {
+          return;
+        }
+
+        e.preventDefault();
+        cellInteraction.startEdit(undefined, undefined, 'type');
+        if ('value' in clearResult) {
+          cellInteraction.setEditingValue(clearResult.value);
+        }
+        editInputRef.current.focus();
+        e.stopPropagation();
+      }
+    },
+    [
+      editInputRef,
+      isFocused,
+      isEditable,
+      isEditing,
+      state,
+      cellInteraction,
+      resolved,
+      handleActivate,
+    ],
+  );
+
+  return useMemo(() => ({ onKeyDown }), [onKeyDown]);
+}

package/src/components/EditableTable/useClearFocusOnBlur.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';
+
+/**
+ * Clears cell focus when the user clicks outside the table container.
+ */
+export function useClearFocusOnBlur<T, F extends FiltersMap>(
+  cellInteraction: CellInteractionState<T, F>,
+) {
+  const blurFrameId = useRef(0);
+
+  useEffect(() => {
+    return () => cancelAnimationFrame(blurFrameId.current);
+  }, []);
+
+  const onFocus = useCallback(() => {
+    cancelAnimationFrame(blurFrameId.current);
+  }, []);
+
+  const onBlur = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      cancelAnimationFrame(blurFrameId.current);
+      const container = e.currentTarget;
+
+      blurFrameId.current = requestAnimationFrame(() => {
+        if (container.contains(document.activeElement)) {
+          return;
+        }
+
+        if (!cellInteraction.isEditing) {
+          cellInteraction.clearFocus();
+        }
+      });
+    },
+    [cellInteraction],
+  );
+
+  return { onFocus, onBlur };
+}

package/src/components/EditableTable/useClipboardHandler.ts

@@ -0,0 +1,85 @@
+import { useEffect, useCallback } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+
+export function useClipboardHandler<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+  containerRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const { cellInteraction, clipboard } = state;
+
+  const handleCopy = useCallback(
+    (e: ClipboardEvent) => {
+      if (cellInteraction.selectedCells.size === 0) {
+        return;
+      }
+      if (cellInteraction.isEditing) {
+        return;
+      }
+
+      e.preventDefault();
+      const tsv = clipboard.copy();
+      e.clipboardData?.setData('text/plain', tsv);
+    },
+    [cellInteraction, clipboard],
+  );
+
+  const handleCut = useCallback(
+    (e: ClipboardEvent) => {
+      if (cellInteraction.selectedCells.size === 0) {
+        return;
+      }
+      if (cellInteraction.isEditing) {
+        return;
+      }
+      if (state.updateItemDisabled) {
+        return;
+      }
+
+      e.preventDefault();
+      const tsv = clipboard.cut();
+      e.clipboardData?.setData('text/plain', tsv);
+    },
+    [cellInteraction, clipboard, state],
+  );
+
+  const handlePaste = useCallback(
+    (e: ClipboardEvent) => {
+      if (!cellInteraction.focusedCell) {
+        return;
+      }
+      if (cellInteraction.isEditing) {
+        return;
+      }
+      if (state.updateItemDisabled) {
+        return;
+      }
+
+      e.preventDefault();
+      const rawData = e.clipboardData?.getData('text/plain') ?? '';
+      if (!rawData) {
+        return;
+      }
+
+      clipboard.paste(rawData);
+    },
+    [cellInteraction, clipboard, state],
+  );
+
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container) {
+      return;
+    }
+
+    container.addEventListener('copy', handleCopy);
+    container.addEventListener('cut', handleCut);
+    container.addEventListener('paste', handlePaste);
+
+    return () => {
+      container.removeEventListener('copy', handleCopy);
+      container.removeEventListener('cut', handleCut);
+      container.removeEventListener('paste', handlePaste);
+    };
+  }, [handleCopy, handleCut, handlePaste, containerRef]);
+}