@wix/patterns 1.364.0 → 1.366.0

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>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DatePickerUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function DateEditUniDriver(base: UniDriver, body: UniDriver) {
+  const datePicker = DatePickerUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getInputValue: () => datePicker.inputDriver.getValue(),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => datePicker.inputDriver.keyDown({ key, ...opts }),
+    blur: () => datePicker.inputDriver.blur(),
+    clickInput: () => datePicker.inputDriver.click(),
+  };
+}

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '@wix/design-system';
+import type { CellViewProps } from '../../types';
+import { classes } from './View.st.css.js';
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+});
+
+function formatDate(value: Date | string | null | undefined): string {
+  if (!value) {
+    return '';
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date.getTime())) {
+    return typeof value === 'string' ? value : '';
+  }
+  return dateFormatter.format(date);
+}
+
+export const DateView: React.FC<CellViewProps<Date | string | null>> = ({
+  value,
+}) => (
+  <Text size="small" ellipsis className={classes.textView}>
+    {formatDate(value)}
+  </Text>
+);

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

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