@wix/patterns 1.364.0 → 1.369.0

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,124 @@
+import { useEffect, useLayoutEffect, 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);
+
+  // Register the focused cell's DOM element on the state so
+  // scrollFocusedCellIntoView can use it. useLayoutEffect ensures
+  // the element is set before the requestAnimationFrame in
+  // scrollFocusedCellIntoView runs.
+  useLayoutEffect(() => {
+    if (isFocused) {
+      cellInteraction.focusedCellElement = cellRef.current;
+    }
+    return () => {
+      if (cellInteraction.focusedCellElement === cellRef.current) {
+        cellInteraction.focusedCellElement = null;
+      }
+    };
+  }, [isFocused, cellRef, cellInteraction]);
+
+  // 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]);
+}

package/src/components/EditableTable/useEditableTableCollectionSyncProps.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableProps } from './EditableTable';
+
+export function useEditableTableCollectionSyncProps<T, F extends FiltersMap>(
+  props: EditableTableProps<T, F>,
+) {
+  const { state, columns } = props;
+
+  useEffect(() => state.init(columns), [state, columns]);
+}

package/src/components/EditableTable/useEditableTableContextMenu.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';
+import type { Cell } from '../../state/EditableTable';
+
+const MOUSE_LEAVE_PADDING = 30;
+
+const isInsidePaddedRect = (e: MouseEvent, rect: DOMRect, padding: number) =>
+  e.clientX >= rect.left - padding &&
+  e.clientX <= rect.right + padding &&
+  e.clientY >= rect.top - padding &&
+  e.clientY <= rect.bottom + padding;
+
+export function useEditableTableContextMenu<T, F extends FiltersMap>(
+  cellInteraction: CellInteractionState<T, F>,
+) {
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+  const [cell, setCell] = useState<Cell | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const cellElRef = useRef<Element | null>(null);
+
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      const cellEl = (e.target as HTMLElement).closest(
+        '[data-row-key][data-column-id]',
+      );
+      if (!cellEl) {
+        return;
+      }
+
+      e.preventDefault();
+      const rowKey = cellEl.getAttribute('data-row-key')!;
+      const columnId = cellEl.getAttribute('data-column-id')!;
+      if (!cellInteraction.isCellSelected(rowKey, columnId)) {
+        cellInteraction.focusCell(rowKey, columnId);
+      }
+      cellElRef.current = cellEl;
+      setPosition({ x: e.clientX, y: e.clientY });
+      setCell({ rowKey, columnId });
+    },
+    [cellInteraction],
+  );
+
+  const handleClose = useCallback(() => {
+    setPosition(null);
+    setCell(null);
+    cellElRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (!position) {
+      return;
+    }
+
+    const isInside = (target: EventTarget | null) =>
+      menuRef.current?.contains(target as Node);
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (!isInside(e.target)) {
+        handleClose();
+      }
+    };
+
+    const onScroll = (e: Event) => {
+      if (!isInside(e.target)) {
+        handleClose();
+      }
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!menuRef.current) {
+        return;
+      }
+      const menuRect = menuRef.current.getBoundingClientRect();
+      // Skip until the menu has been laid out
+      if (menuRect.width === 0 || menuRect.height === 0) {
+        return;
+      }
+      // Stay open if cursor is near the menu
+      if (isInsidePaddedRect(e, menuRect, MOUSE_LEAVE_PADDING)) {
+        return;
+      }
+      // Stay open if cursor is on the cell that triggered the menu
+      if (cellElRef.current) {
+        const cellRect = cellElRef.current.getBoundingClientRect();
+        if (isInsidePaddedRect(e, cellRect, 0)) {
+          return;
+        }
+      }
+      handleClose();
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('scroll', onScroll, true);
+    document.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('scroll', onScroll, true);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [position, handleClose]);
+
+  return { position, cell, menuRef, handleContextMenu, handleClose };
+}

package/src/components/EditableTable/useKeyboardNavigation.ts

@@ -0,0 +1,102 @@
+import { useCallback } from 'react';
+import type { EditableTableState } from '../../state/EditableTable';
+import type { FiltersMap } from '@wix/bex-core';
+
+export function useKeyboardNavigation<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+) {
+  const { cellInteraction, clipboard } = state;
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const { focusedCell, isEditing } = cellInteraction;
+      if (!focusedCell) {
+        return;
+      }
+
+      // Don't intercept keys when editing (let the editor handle them)
+      if (isEditing) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          cellInteraction.cancelEdit();
+        } else if (e.key === 'Tab') {
+          e.preventDefault();
+          cellInteraction.commitEdit();
+          if (e.shiftKey) {
+            cellInteraction.moveToPreviousCell();
+          } else {
+            cellInteraction.moveToNextCell();
+          }
+          cellInteraction.scrollFocusedCellIntoView();
+        }
+        return;
+      }
+
+      const isCtrlOrCmd = e.ctrlKey || e.metaKey;
+      const extend = e.shiftKey;
+      let navigated = false;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          cellInteraction.moveFocus('up', extend);
+          navigated = true;
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          cellInteraction.moveFocus('down', extend);
+          navigated = true;
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          cellInteraction.moveFocus('left', extend);
+          navigated = true;
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          cellInteraction.moveFocus('right', extend);
+          navigated = true;
+          break;
+        case 'Tab':
+          e.preventDefault();
+          if (e.shiftKey) {
+            cellInteraction.moveToPreviousCell();
+          } else {
+            cellInteraction.moveToNextCell();
+          }
+          navigated = true;
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (clipboard.hasCopiedCells) {
+            clipboard.clear();
+          } else {
+            cellInteraction.clearFocus();
+          }
+          break;
+        case 'Delete':
+        case 'Backspace':
+          e.preventDefault();
+          if (!state.updateItemDisabled) {
+            state.clearCells(cellInteraction.selectedCellsList);
+          }
+          break;
+        case 'a':
+          if (isCtrlOrCmd) {
+            e.preventDefault();
+            cellInteraction.selectAll();
+          }
+          break;
+        default:
+          break;
+      }
+
+      if (navigated) {
+        cellInteraction.scrollFocusedCellIntoView();
+      }
+    },
+    [cellInteraction, clipboard, state],
+  );
+
+  return { onKeyDown };
+}

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2190126313";
+var _namespace_ = "ImportStepUpload2527291098";
 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":"ImportStepUpload2190126313__root","fileUpload":"ImportStepUpload2190126313__fileUpload"};
+export var classes = {"root":"ImportStepUpload2527291098__root","fileUpload":"ImportStepUpload2527291098__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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