@wix/patterns 1.364.0 → 1.366.0

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

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

package/src/components/EditableTable/EditableCell.st.css

@@ -0,0 +1,68 @@
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-D80);
+
+:global(td):has(> .root) {
+  position: relative;
+  min-height: 24px;
+}
+
+.root {
+  -st-states: editing, focused, selected, invalid, selectionTop, selectionBottom,
+    selectionLeft, selectionRight, copiedTop, copiedBottom, copiedLeft,
+    copiedRight;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  outline: none;
+  cursor: default;
+  user-select: none;
+  background: var(--wsr-color-D80);
+  border: 1px solid var(--wsr-color-B40);
+}
+
+.root:selected {
+  background: rgba(56, 153, 236, 0.08);
+}
+
+.root:focused:not(:selected) {
+  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+  z-index: 2;
+}
+
+.root:editing {
+  background: var(--wsr-color-D80);
+  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
+  z-index: 3;
+  user-select: auto;
+  overflow: visible;
+}
+
+.root:selectionTop { border-top: 2px solid var(--wsr-color-B10); }
+.root:selectionBottom { border-bottom: 2px solid var(--wsr-color-B10); }
+.root:selectionLeft { border-left: 2px solid var(--wsr-color-B10); }
+.root:selectionRight { border-right: 2px solid var(--wsr-color-B10); }
+
+.root:invalid:not(:editing) {
+  background: rgba(229, 0, 77, 0.06);
+}
+
+.root:copiedTop:not(:selectionTop) { border-top: 2px dashed var(--wsr-color-B10); }
+.root:copiedBottom:not(:selectionBottom) { border-bottom: 2px dashed var(--wsr-color-B10); }
+.root:copiedLeft:not(:selectionLeft) { border-left: 2px dashed var(--wsr-color-B10); }
+.root:copiedRight:not(:selectionRight) { border-right: 2px dashed var(--wsr-color-B10); }
+
+.validationIndicator {
+  flex-shrink: 0;
+  margin-left: 12px;
+  margin-right: 6px;
+  color: var(--wsr-color-Y10);
+}

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "EditableCell3084944771";
+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":"EditableCell3084944771__root","validationIndicator":"EditableCell3084944771__validationIndicator"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-Y10":"--wsr-color-Y10","wsr-color-D80":"--wsr-color-D80"}; 
+
+
+
+

package/src/components/EditableTable/EditableCell.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { Tooltip } from '@wix/design-system';
+import { StatusWarningFilledSmall } from '@wix/wix-ui-icons-common';
+import { st, classes } from './EditableCell.st.css.js';
+import type { EditableTableState } from '../../state/EditableTable';
+import { useCellFocusAndEditing } from './useCellFocusAndEditing';
+
+export interface EditableCellProps<T, F extends FiltersMap> {
+  state: EditableTableState<T, F>;
+  rowKey: string;
+  columnId: string;
+}
+
+function _EditableCell<T, F extends FiltersMap>({
+  state,
+  rowKey,
+  columnId,
+}: EditableCellProps<T, F>) {
+  const { cellInteraction, clipboard } = state;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const editInputRef = useRef<any>(null);
+
+  const column = state._columnMap.get(columnId);
+  const keyedItem = state._getKeyedItem(rowKey);
+  const resolved = column ? state.resolveCellType(column.cellType) : null;
+  const value = state.getCellDisplayValue(rowKey, columnId);
+  const cellValidation = state.getCellValidation(rowKey, columnId);
+
+  const isFocused = cellInteraction.isCellFocused(rowKey, columnId);
+  const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
+  const isSelected = cellInteraction.isCellSelected(rowKey, columnId);
+  const selectionBorder = cellInteraction.getSelectionBorder(rowKey, columnId);
+  const copiedBorder = clipboard.getCopiedBorder(rowKey, columnId);
+  const isEditable = state.isCellEditable(rowKey, columnId);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      state.handleCellClick(rowKey, columnId, e.shiftKey);
+    },
+    [state, rowKey, columnId],
+  );
+
+  const handleDoubleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      state.handleCellDoubleClick(rowKey, columnId);
+    },
+    [state, rowKey, columnId],
+  );
+
+  const handleChange = useCallback(
+    (newValue: any) => cellInteraction.setEditingValue(newValue),
+    [cellInteraction],
+  );
+
+  const handleCommit = useCallback(
+    () => cellInteraction.commitEdit(),
+    [cellInteraction],
+  );
+
+  const handleCancel = useCallback(
+    () => cellInteraction.cancelEdit(),
+    [cellInteraction],
+  );
+
+  const cellKeyboard = useCellFocusAndEditing({
+    state,
+    rowKey,
+    columnId,
+    cellRef,
+    editInputRef,
+  });
+
+  if (!column || !keyedItem || !resolved) {
+    return null;
+  }
+
+  const { ViewComponent, EditComponent } = resolved;
+  const editingValue = cellInteraction.editingValue;
+  const showValidationIndicator = !cellValidation.valid && !isEditing;
+
+  const showEdit = isFocused && isEditable && EditComponent;
+
+  return (
+    <div
+      ref={cellRef}
+      className={st(classes.root, {
+        editing: isEditing,
+        focused: isFocused,
+        selected: isSelected,
+        invalid: !cellValidation.valid,
+        selectionTop: selectionBorder.top,
+        selectionBottom: selectionBorder.bottom,
+        selectionLeft: selectionBorder.left,
+        selectionRight: selectionBorder.right,
+        copiedTop: copiedBorder.top,
+        copiedBottom: copiedBorder.bottom,
+        copiedLeft: copiedBorder.left,
+        copiedRight: copiedBorder.right,
+      })}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={cellKeyboard.onKeyDown}
+      role="gridcell"
+      aria-selected={isSelected}
+      aria-readonly={!isEditable}
+      aria-invalid={!cellValidation.valid || undefined}
+      tabIndex={isFocused ? 0 : -1}
+      data-row-key={rowKey}
+      data-column-id={columnId}
+      data-editing={isEditing || undefined}
+    >
+      {showValidationIndicator && (
+        <Tooltip content={cellValidation.errors?.join(', ')} appendTo="window">
+          <span data-hook="validation-indicator">
+            <StatusWarningFilledSmall className={classes.validationIndicator} />
+          </span>
+        </Tooltip>
+      )}
+      {showEdit ? (
+        <EditComponent
+          value={editingValue !== undefined ? editingValue : value}
+          onChange={handleChange}
+          onCommit={handleCommit}
+          onCancel={handleCancel}
+          inputRef={editInputRef}
+          typeConfig={column.typeConfig}
+          editTrigger={cellInteraction.editTrigger}
+        />
+      ) : (
+        <ViewComponent value={value} typeConfig={column.typeConfig} />
+      )}
+    </div>
+  );
+}
+
+export const EditableCell = observer(_EditableCell);

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -0,0 +1,102 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { TextEditUniDriver } from './cellTypes/text/Edit.uni.driver';
+import { NumberEditUniDriver } from './cellTypes/number/Edit.uni.driver';
+import { UrlEditUniDriver } from './cellTypes/url/Edit.uni.driver';
+import { BooleanEditUniDriver } from './cellTypes/boolean/Edit.uni.driver';
+import { SelectEditUniDriver } from './cellTypes/select/Edit.uni.driver';
+import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
+
+export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+
+    /** Click the cell (focuses it) */
+    click: () => base.click(),
+
+    /** Double-click the cell (starts editing). UniDriver has no doubleClick, so dispatch native event. */
+    doubleClick: async () => {
+      const el = await base.getNative();
+      if (el.page?.evaluate) {
+        const elementHandle = await base.unwrap();
+        await elementHandle.click({ clickCount: 2 });
+      } else {
+        el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+      }
+    },
+
+    /** Get the displayed text value of the cell */
+    getDisplayValue: () => base.text(),
+
+    /** Whether this cell is focused */
+    isFocused: async () => (await base.attr('tabindex')) === '0',
+
+    /** Whether this cell is in editing mode */
+    isEditing: async () => (await base.attr('data-editing')) === 'true',
+
+    /** Whether this cell is selected (part of a selection range) */
+    isSelected: async () => (await base.attr('aria-selected')) === 'true',
+
+    /** Whether this cell is read-only (not editable) */
+    isReadOnly: async () => (await base.attr('aria-readonly')) === 'true',
+
+    /** Whether this cell has a validation error */
+    isInvalid: async () => (await base.attr('aria-invalid')) === 'true',
+
+    /** Get the row key from data attribute */
+    getRowKey: () => base.attr('data-row-key'),
+
+    /** Get the column id from data attribute */
+    getColumnId: () => base.attr('data-column-id'),
+
+    /** Whether the cell contains a validation indicator icon */
+    hasValidationIndicator: () =>
+      base.$('[data-hook="validation-indicator"]').exists(),
+
+    /** Get the text cell edit driver (for text columns) */
+    getTextEdit: () => TextEditUniDriver(base, body),
+
+    /** Get the number cell edit driver (for number columns) */
+    getNumberEdit: () => NumberEditUniDriver(base, body),
+
+    /** Get the url cell edit driver (for url columns) */
+    getUrlEdit: () => UrlEditUniDriver(base, body),
+
+    /** Get the boolean cell edit driver (for boolean columns) */
+    getBooleanEdit: () => BooleanEditUniDriver(base, body),
+
+    /** Get the select cell edit driver (for select columns) */
+    getSelectEdit: () => SelectEditUniDriver(base, body),
+
+    /** Get the date cell edit driver (for date columns) */
+    getDateEdit: () => DateEditUniDriver(base, body),
+
+    /** Right-click the cell (opens context menu) */
+    rightClick: async () => {
+      const el = await base.getNative();
+      if (el.page?.evaluate) {
+        // Puppeteer — unwrap to get the actual ElementHandle
+        const elementHandle = await base.unwrap();
+        await elementHandle.click({ button: 'right' });
+      } else {
+        // jsdom HTMLElement
+        const rect = el.getBoundingClientRect();
+        el.dispatchEvent(
+          new MouseEvent('contextmenu', {
+            bubbles: true,
+            clientX: rect.left + 5,
+            clientY: rect.top + 5,
+          }),
+        );
+      }
+    },
+
+    /** Press a key on the cell (native dispatch — useCellFocusAndEditing uses native addEventListener) */
+    pressKey: async (key: string, opts?: Partial<KeyboardEventInit>) => {
+      const el = await base.getNative();
+      el.dispatchEvent(
+        new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
+      );
+    },
+  };
+}

package/src/components/EditableTable/EditableTable.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import { TableVirtual, type TableVirtualProps } from '../Table/TableVirtual';
+import {
+  type EditableColumn,
+  EditableTableState,
+} from '../../state/EditableTable';
+import { EditableCell } from './EditableCell';
+import { EditableTableContextMenu } from './EditableTableContextMenu';
+import { useEditableTableContextMenu } from './useEditableTableContextMenu';
+import { useEditableTableCollectionSyncProps } from './useEditableTableCollectionSyncProps';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+import { useClipboardHandler } from './useClipboardHandler';
+import { useClearFocusOnBlur } from './useClearFocusOnBlur';
+import type { TableColumn } from '../../model';
+
+export interface EditableTableProps<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> extends Omit<TableVirtualProps<T, F>, 'columns' | 'state' | 'onRowClick'> {
+  /** EditableTableState instance, created via useEditableTableCollection */
+  state: EditableTableState<T, F>;
+
+  /** Column definitions with cell types */
+  columns: EditableColumn<T>[];
+
+  /** data-hook for testkit selectors */
+  dataHook?: string;
+}
+
+function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
+  props: EditableTableProps<T, F>,
+) {
+  const {
+    state,
+    columns: editableColumns,
+    dataHook,
+    children,
+    ...tableBaseProps
+  } = props;
+
+  useEditableTableCollectionSyncProps(props);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const keyboard = useKeyboardNavigation(state);
+  useClipboardHandler(state, containerRef);
+  const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
+
+  const tableColumns = useMemo(
+    () =>
+      editableColumns.map((col) => ({
+        ...col,
+        name: col.name ?? (typeof col.title === 'string' ? col.title : col.id),
+        render: (_item: T, rowNum: number) => {
+          const rowKey = state.keyedItems[rowNum]?.key;
+          return rowKey ? (
+            <EditableCell state={state} rowKey={rowKey} columnId={col.id} />
+          ) : null;
+        },
+      })) as TableColumn<T>[],
+    [editableColumns, state],
+  );
+
+  const contextMenu = useEditableTableContextMenu(state.cellInteraction);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        data-hook={dataHook}
+        tabIndex={0}
+        onKeyDown={keyboard.onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onContextMenu={contextMenu.handleContextMenu}
+      >
+        <TableVirtual
+          {...tableBaseProps}
+          state={state.tableState}
+          columns={tableColumns}
+        />
+      </div>
+      <EditableTableContextMenu
+        state={state}
+        position={contextMenu.position}
+        cell={contextMenu.cell}
+        menuRef={contextMenu.menuRef}
+        onClose={contextMenu.handleClose}
+      />
+      {children}
+    </>
+  );
+}
+
+export const EditableTable = observer(_EditableTable);

package/src/components/EditableTable/EditableTable.uni.driver.ts

@@ -0,0 +1,98 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import { EditableCellUniDriver } from './EditableCell.uni.driver';
+import { EditableTableContextMenuUniDriver } from './EditableTableContextMenu.uni.driver';
+
+const { fireEvent = null } =
+  process.env.NODE_ENV === 'test'
+    ? (() => {
+        try {
+          return require('@testing-library/react');
+        } catch {}
+        return {};
+      })()
+    : {};
+
+export function EditableTableUniDriver(base: UniDriver, body: UniDriver) {
+  const getRows = () => base.$$('tbody tr[data-table-row="dataTableRow"]');
+
+  const getCells = () => base.$$('[role="gridcell"]');
+
+  const initialLoaderBase = () =>
+    base.$('[data-hook="placeholder-states-loading-state"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+
+    /** Number of rendered data rows */
+    getRowsCount: () => getRows().count(),
+
+    /** Number of column headers */
+    getColumnsCount: () => base.$$('thead th').count(),
+
+    /** Get column header texts */
+    getColumnHeaders: () => base.$$('thead th').map((th) => th.text()),
+
+    /** Get a cell driver by row key and column id */
+    getCell: (rowKey: string, columnId: string) =>
+      EditableCellUniDriver(
+        base.$(
+          `[role="gridcell"][data-row-key="${rowKey}"][data-column-id="${columnId}"]`,
+        ),
+        body,
+      ),
+
+    /** Get a cell driver by row index and column index */
+    getCellByIndex: (rowIdx: number, colIdx: number) => {
+      const row = getRows().get(rowIdx);
+      const cell = row.$$('[role="gridcell"]').get(colIdx);
+      return EditableCellUniDriver(cell, body);
+    },
+
+    /** Total number of gridcells rendered */
+    getCellsCount: () => getCells().count(),
+
+    /** Wait until root element exists */
+    wait: (timeout?: number) => base.wait(timeout),
+
+    /** Wait for the initial fetch loader to be shown */
+    waitInitialLoader: (timeout?: number) => initialLoaderBase().wait(timeout),
+
+    /** Wait for the initial fetch loader to be removed */
+    waitInitialLoaderRemoved: (timeout?: number, delay?: number) =>
+      waitFor(
+        async () => !(await initialLoaderBase().exists()),
+        timeout,
+        delay,
+      ),
+
+    /** Wait for at least one data row to render */
+    waitForRow: (timeout?: number) => getRows().get(0).wait(timeout),
+
+    /** Get the context menu driver (portaled to body) */
+    getContextMenu: () => EditableTableContextMenuUniDriver(base, body),
+
+    /** Press a key on the table container (triggers useKeyboardNavigation) */
+    pressKey: async (key: string, opts?: Record<string, unknown>) => {
+      const el = await base.getNative();
+      if (fireEvent) {
+        fireEvent.keyDown(el, { key, ...opts });
+      } else {
+        el.dispatchEvent(
+          new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
+        );
+      }
+    },
+
+    /** Dispatch a paste event on the table container */
+    dispatchPaste: async (text: string) => {
+      const el = await base.getNative();
+      const event = Object.assign(new Event('paste', { bubbles: true }), {
+        clipboardData: { getData: () => text },
+      });
+      el.dispatchEvent(event);
+    },
+  };
+}
+
+export default EditableTableUniDriver;