@wix/patterns 1.363.0 → 1.366.0

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;

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -0,0 +1,235 @@
+import React, { useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { observer } from 'mobx-react-lite';
+import type { FiltersMap } from '@wix/bex-core';
+import { DropdownLayout, listItemActionBuilder } from '@wix/design-system';
+import {
+  DeleteSmall,
+  AddSmall,
+  DuplicateSmall,
+} from '@wix/wix-ui-icons-common';
+import type { EditableTableState, Cell } from '../../state/EditableTable';
+
+export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
+  state: EditableTableState<T, F>;
+  position: { x: number; y: number } | null;
+  cell: Cell | null;
+  menuRef: React.Ref<HTMLDivElement>;
+  onClose: () => void;
+}
+
+const MENU_WIDTH = 230;
+const ITEM_HEIGHT = 36;
+const DIVIDER_HEIGHT = 9;
+const PADDING = 16;
+const OFFSET_X = 4;
+const OFFSET_Y = 4;
+
+function _EditableTableContextMenu<T, F extends FiltersMap>({
+  state,
+  position,
+  cell,
+  menuRef,
+  onClose,
+}: EditableTableContextMenuProps<T, F>) {
+  const {
+    cellInteraction,
+    clipboard,
+    addItemDisabled,
+    updateItemDisabled,
+    removeItemDisabled,
+  } = state;
+
+  const handleCopy = useCallback(async () => {
+    const tsv = clipboard.copy();
+    try {
+      await navigator.clipboard.writeText(tsv);
+    } catch {}
+    onClose();
+  }, [clipboard, onClose]);
+
+  const handleCut = useCallback(async () => {
+    const tsv = clipboard.cut();
+    try {
+      await navigator.clipboard.writeText(tsv);
+    } catch {}
+    onClose();
+  }, [clipboard, onClose]);
+
+  const handlePaste = useCallback(async () => {
+    if (!cellInteraction.focusedCell) {
+      return;
+    }
+    try {
+      const rawData = await navigator.clipboard.readText();
+      if (!rawData) {
+        onClose();
+        return;
+      }
+      clipboard.paste(rawData);
+    } catch {}
+    onClose();
+  }, [cellInteraction, clipboard, onClose]);
+
+  const handleClear = useCallback(() => {
+    state.clearCells(cellInteraction.selectedCellsList);
+    onClose();
+  }, [state, cellInteraction, onClose]);
+
+  if (!position || !cell) {
+    return null;
+  }
+
+  const selectedCells = cellInteraction.selectedCellsList;
+  const selectedCount = selectedCells.length;
+  const selectedRowKeys = [...new Set(selectedCells.map((c) => c.rowKey))];
+  const hasMultipleRows = selectedRowKeys.length > 1;
+
+  const options = [];
+
+  options.push(
+    listItemActionBuilder({
+      id: 'copy',
+      title: `Copy`,
+      disabled: selectedCount === 0,
+    }),
+    listItemActionBuilder({
+      id: 'cut',
+      title: `Cut`,
+      disabled: selectedCount === 0 || !!updateItemDisabled,
+    }),
+    listItemActionBuilder({
+      id: 'paste',
+      title: `Paste`,
+      disabled: !!updateItemDisabled,
+    }),
+    listItemActionBuilder({
+      id: 'clear',
+      title: selectedCount > 1 ? `Clear ${selectedCount} Cells` : 'Clear Cell',
+      disabled: selectedCount === 0 || !!updateItemDisabled,
+    }),
+  );
+
+  const hasRowOps = !addItemDisabled || !removeItemDisabled;
+  if (hasRowOps) {
+    options.push({ id: 'divider-1', value: '-' });
+  }
+
+  if (!addItemDisabled) {
+    options.push(
+      listItemActionBuilder({
+        id: 'add-above',
+        title: 'Add Row Above',
+        prefixIcon: <AddSmall />,
+      }),
+      listItemActionBuilder({
+        id: 'add-below',
+        title: 'Add Row Below',
+        prefixIcon: <AddSmall />,
+      }),
+      listItemActionBuilder({
+        id: 'duplicate',
+        title: 'Duplicate Row',
+        prefixIcon: <DuplicateSmall />,
+      }),
+    );
+  }
+
+  if (!removeItemDisabled) {
+    if (!addItemDisabled) {
+      options.push({ id: 'divider-2', value: '-' });
+    }
+    options.push(
+      listItemActionBuilder({
+        id: 'delete',
+        title: hasMultipleRows
+          ? `Delete ${selectedRowKeys.length} Rows`
+          : 'Delete Row',
+        prefixIcon: <DeleteSmall />,
+        skin: 'destructive',
+      }),
+    );
+  }
+
+  const handleSelect = (option: { id: string | number }) => {
+    switch (option.id) {
+      case 'copy':
+        handleCopy();
+        break;
+      case 'cut':
+        handleCut();
+        break;
+      case 'paste':
+        handlePaste();
+        break;
+      case 'clear':
+        handleClear();
+        break;
+      case 'add-above': {
+        const rowIdx = state.keyedItems.findIndex(
+          (ki) => ki.key === cell.rowKey,
+        );
+        const prevKey =
+          rowIdx > 0 ? state.keyedItems[rowIdx - 1].key : undefined;
+        state.addItem(prevKey);
+        onClose();
+        break;
+      }
+      case 'add-below':
+        state.addItem(cell.rowKey);
+        onClose();
+        break;
+      case 'duplicate':
+        state.duplicateItem(cell.rowKey);
+        onClose();
+        break;
+      case 'delete':
+        state.deleteItems(hasMultipleRows ? selectedRowKeys : [cell.rowKey]);
+        onClose();
+        break;
+    }
+  };
+
+  const dividerCount = options.filter(
+    (o) => 'value' in o && o.value === '-',
+  ).length;
+  const itemCount = options.length - dividerCount;
+  const estimatedHeight =
+    itemCount * ITEM_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING;
+
+  const x =
+    position.x + OFFSET_X + MENU_WIDTH > window.innerWidth
+      ? position.x - MENU_WIDTH
+      : position.x + OFFSET_X;
+  const y =
+    position.y + OFFSET_Y + estimatedHeight > window.innerHeight
+      ? Math.max(4, position.y - estimatedHeight)
+      : position.y + OFFSET_Y;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      style={{
+        position: 'fixed',
+        left: x,
+        top: y,
+        zIndex: 1000,
+        width: MENU_WIDTH,
+      }}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <DropdownLayout
+        dataHook="editable-table-context-menu"
+        visible
+        inContainer
+        options={options}
+        onSelect={handleSelect}
+        onClose={onClose}
+        maxHeightPixels={400}
+      />
+    </div>,
+    document.body,
+  );
+}
+
+export const EditableTableContextMenu = observer(_EditableTableContextMenu);

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

@@ -0,0 +1,37 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DropdownLayoutUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { DropdownLayoutUniDriver as DropdownLayoutUniDriverFactory } from '@wix/design-system/dist/types/DropdownLayout/DropdownLayout.uni.driver';
+import { UniDriverFactory } from '../uniDriverFactory';
+
+export function EditableTableContextMenuUniDriver(
+  _base: UniDriver,
+  body: UniDriver,
+) {
+  const menuBase = body.$('[data-hook="editable-table-context-menu"]');
+
+  const getDropdownLayout = () =>
+    (
+      DropdownLayoutUniDriver as UniDriverFactory<DropdownLayoutUniDriverFactory>
+    )(menuBase, body);
+
+  return {
+    isShown: async () => menuBase.exists(),
+
+    isOptionVisible: async (optionId: string) => {
+      if (!(await menuBase.exists())) {
+        return false;
+      }
+      return body.$(`[data-hook="dropdown-item-${optionId}"]`).exists();
+    },
+
+    clickOption: async (optionId: string) => {
+      const option = await getDropdownLayout().optionById(optionId);
+      await option.click();
+    },
+
+    getOptionText: async (optionId: string) => {
+      const option = await getDropdownLayout().optionById(optionId);
+      return option.content();
+    },
+  };
+}

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

@@ -0,0 +1,5 @@
+.booleanEdit {
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+}

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

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

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

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { Checkbox } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+}) => {
+  const handleChange = useCallback(() => {
+    onChange(!value);
+    onCommit();
+  }, [value, onChange, onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onChange(!value);
+        onCommit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [value, onChange, onCommit, onCancel],
+  );
+
+  return (
+    <div onKeyDown={handleKeyDown} className={classes.booleanEdit}>
+      <Checkbox
+        dataHook="boolean-checkbox"
+        checked={!!value}
+        onChange={handleChange}
+        size="small"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { CheckboxUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function BooleanEditUniDriver(base: UniDriver, body: UniDriver) {
+  const checkbox = CheckboxUniDriver(
+    base.$('[data-hook="boolean-checkbox"]'),
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    isChecked: () => checkbox.isChecked(),
+    toggle: () => checkbox.click(),
+    /** Native dispatch — Checkbox uni.driver has no keyDown */
+    keyDown: async (
+      key: string,
+      opts?: Pick<
+        KeyboardEventInit,
+        'shiftKey' | 'ctrlKey' | 'metaKey' | 'altKey'
+      >,
+    ) => {
+      const input = await base.$('input').getNative();
+      input.dispatchEvent(
+        new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
+      );
+    },
+  };
+}

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

@@ -0,0 +1,6 @@
+.booleanView {
+  display: flex;
+  align-items: center;
+  margin-left: 9px;
+  pointer-events: none;
+}

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { CheckboxChecked } from '@wix/wix-ui-icons-common/system';
+import type { CellViewProps } from '../../types';
+import { classes } from './View.st.css.js';
+
+export const BooleanView: React.FC<CellViewProps<boolean>> = ({ value }) => (
+  <div className={classes.booleanView}>
+    {value && (
+      <Box color="G10" margin="0px 12px 0px 6px" dataHook="boolean-check-icon">
+        <CheckboxChecked />
+      </Box>
+    )}
+  </div>
+);

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

@@ -0,0 +1,9 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function BooleanViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasCheckIcon: () => base.$('[data-hook="boolean-check-icon"]').exists(),
+  };
+}

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

@@ -0,0 +1,29 @@
+import { defineCellType } from '../../types';
+import { BooleanView } from './View';
+import { BooleanEdit } from './Edit';
+
+export { BooleanView, BooleanEdit };
+
+export const booleanCellType = defineCellType<boolean>({
+  type: 'boolean',
+  ViewComponent: BooleanView,
+  EditComponent: BooleanEdit,
+  serialize: (value) => (value ? 'true' : 'false'),
+  deserialize: (raw) => {
+    const normalized = raw.trim().toLowerCase();
+    if (
+      normalized === '1' ||
+      normalized === 'true' ||
+      normalized === 'checked'
+    ) {
+      return true;
+    }
+    if (normalized === '0' || normalized === 'false' || normalized === '') {
+      return false;
+    }
+    throw new Error();
+  },
+  editable: true,
+  clearable: true,
+  toggleValue: (value) => !value,
+});

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

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

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

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

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

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { DatePicker } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+function isValidDate(value: Date | string | null | undefined): boolean {
+  if (!value) {
+    return true;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return !isNaN(date.getTime());
+}
+
+export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+}) => {
+  const datePickerRef = useRef<DatePicker | null>(null);
+  const validDate = isValidDate(value);
+
+  // Auto-open calendar when entering edit mode via type-to-edit
+  useEffect(() => {
+    if (editTrigger === 'type') {
+      datePickerRef.current?.openCalendar();
+    }
+  }, [editTrigger]);
+
+  const dateValue = value
+    ? value instanceof Date
+      ? value
+      : new Date(value)
+    : null;
+
+  const handleChange = useCallback(
+    (date: Date) => {
+      onChange(date);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  return (
+    <div
+      onKeyDown={handleKeyDown}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <DatePicker
+        ref={datePickerRef}
+        size="small"
+        inputProps={{
+          border: 'none',
+          prefix: <span />,
+          ...(validDate
+            ? {}
+            : { value: typeof value === 'string' ? value : '' }),
+          inputRef: (el: HTMLInputElement) => {
+            if (inputRef) {
+              inputRef.current = el;
+            }
+          },
+        }}
+        value={dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined}
+        onChange={handleChange}
+        popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
+        className={classes.dateInput}
+      />
+    </div>
+  );
+};