@wix/patterns 1.364.0 → 1.366.0

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

@@ -0,0 +1,41 @@
+import { defineCellType } from '../../types';
+import { DateView } from './View';
+import { DateEdit } from './Edit';
+
+export { DateView, DateEdit };
+
+export const dateCellType = defineCellType<Date | string | null>({
+  type: 'date',
+  ViewComponent: DateView,
+  EditComponent: DateEdit,
+  serialize: (value) => {
+    if (!value) {
+      return '';
+    }
+    const date = value instanceof Date ? value : new Date(value);
+    return isNaN(date.getTime()) ? '' : date.toISOString();
+  },
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    const date = new Date(raw);
+    if (isNaN(date.getTime())) {
+      throw new Error();
+    }
+    return date;
+  },
+  validate: (value) => {
+    if (!value) {
+      return null;
+    }
+    const date = value instanceof Date ? value : new Date(value);
+    if (isNaN(date.getTime())) {
+      return 'Invalid date';
+    }
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: () => ({}),
+});

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

@@ -0,0 +1,26 @@
+import type { CellType } from '../../../state/EditableTable/types';
+import { textCellType } from './text';
+import { numberCellType } from './number';
+import { booleanCellType } from './boolean';
+import { dateCellType } from './date';
+import { selectCellType } from './select';
+import { urlCellType } from './url';
+
+export {
+  textCellType,
+  numberCellType,
+  booleanCellType,
+  dateCellType,
+  selectCellType,
+  urlCellType,
+};
+
+/** All built-in cell types */
+export const builtInCellTypes: CellType[] = [
+  textCellType,
+  numberCellType,
+  booleanCellType,
+  dateCellType,
+  selectCellType,
+  urlCellType,
+];

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

@@ -0,0 +1,9 @@
+.numberInput {
+  width: 100%;
+  margin-right: 2px;
+}
+
+.numberInput input {
+  text-align: right;
+  direction: ltr;
+}

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

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

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

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { NumberInput } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const NumberEdit: React.FC<CellEditProps<number | null>> = ({
+  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();
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    onCommit();
+  }, [onCommit]);
+
+  return (
+    <NumberInput
+      inputRef={inputRef}
+      size="small"
+      border="none"
+      value={value ?? undefined}
+      onChange={(val) => onChange(val)}
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      autoSelect={false}
+      hideStepper
+      className={classes.numberInput}
+    />
+  );
+};

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

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

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

@@ -0,0 +1,5 @@
+.textView {
+  width: 100%;
+  padding: 9px 12px;
+  text-align: right;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { defineCellType } from '../../types';
+import { NumberView } from './View';
+import { NumberEdit } from './Edit';
+
+export { NumberView, NumberEdit };
+
+export const numberCellType = defineCellType<number | null>({
+  type: 'number',
+  ViewComponent: NumberView,
+  EditComponent: NumberEdit,
+  serialize: (value) => (value != null ? String(value) : ''),
+  deserialize: (raw) => {
+    if (raw === '') {
+      return null;
+    }
+    const parsed = Number(raw);
+    if (!Number.isFinite(parsed)) {
+      throw new Error();
+    }
+    return parsed;
+  },
+  validate: (value) => {
+    if (value != null && typeof value !== 'number') {
+      return 'Value must be a number';
+    }
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: ({ key }) =>
+    /^\d$/.test(key) ? { value: Number(key) } : undefined,
+});

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

@@ -0,0 +1,3 @@
+.selectInput {
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,77 @@
+import React, { useCallback, useMemo, useEffect, useRef } from 'react';
+import { Dropdown } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import type { SelectCellConfig } from '../../../../state/EditableTable/types';
+import { classes } from './Edit.st.css.js';
+
+export const SelectEdit: React.FC<CellEditProps<string>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  typeConfig,
+  inputRef,
+  editTrigger,
+}) => {
+  const dropdownInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Auto-open dropdown when entering edit mode via type-to-edit
+  useEffect(() => {
+    if (editTrigger === 'type' && dropdownInputRef.current) {
+      dropdownInputRef.current.click();
+    }
+  }, [editTrigger]);
+  const config = typeConfig as SelectCellConfig | undefined;
+  const rawOptions = config?.options ?? [];
+
+  const dropdownOptions = useMemo(
+    () => rawOptions.map((o) => ({ id: o.id, value: o.value })),
+    [rawOptions],
+  );
+
+  const handleSelect = useCallback(
+    (option: { id: string | number }) => {
+      onChange(String(option.id));
+      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',
+      }}
+    >
+      <Dropdown
+        size="small"
+        border="none"
+        selectedId={value}
+        options={dropdownOptions}
+        onSelect={handleSelect}
+        popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
+        inputRef={(el: HTMLInputElement) => {
+          dropdownInputRef.current = el;
+          if (inputRef) {
+            inputRef.current = el;
+          }
+        }}
+        className={classes.selectInput}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DropdownUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { DropdownUniDriver as DropdownUniDriverFactory } from '@wix/design-system/dist/types/Dropdown/Dropdown.uni.driver';
+import { UniDriverFactory } from '../../../uniDriverFactory';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function SelectEditUniDriver(base: UniDriver, body: UniDriver) {
+  const dropdown = (
+    DropdownUniDriver as UniDriverFactory<DropdownUniDriverFactory>
+  )(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    keyDown: (
+      key: string,
+      opts?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
+    ) => dropdown.inputDriver.keyDown({ key, ...opts }),
+    blur: () => dropdown.inputDriver.blur(),
+    clickInput: () => dropdown.inputDriver.click(),
+    selectOption: async (id: string) => {
+      await dropdown.driver.selectOptionById(id);
+    },
+  };
+}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from '@wix/design-system';
+import type { CellViewProps } from '../../types';
+import type { SelectCellConfig } from '../../../../state/EditableTable/types';
+import { classes } from './View.st.css.js';
+
+export const SelectView: React.FC<CellViewProps<string>> = ({
+  value,
+  typeConfig,
+}) => {
+  const config = typeConfig as SelectCellConfig | undefined;
+  const options = config?.options ?? [];
+  const option = options.find((o) => o.id === value);
+  return (
+    <Text size="small" ellipsis className={classes.textView}>
+      {option?.value ?? value ?? ''}
+    </Text>
+  );
+};

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

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

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

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

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

@@ -0,0 +1,33 @@
+.editWrapper {
+  width: 100%;
+}
+
+.inputArea {
+  -st-states: isFocused;
+  background-color: transparent;
+  width: 100%;
+}
+
+/* Strip WDS chrome from wrapper div */
+.inputArea > div {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  outline: none !important;
+}
+
+.inputArea textarea {
+  padding: 9px 12px 8px !important;
+  outline: none !important;
+  border: none !important;
+}
+
+.inputArea:not(:isFocused) textarea {
+  resize: none;
+  overflow: hidden;
+}
+
+.inputArea:not(:isFocused) textarea::-webkit-scrollbar {
+  display: none;
+}

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

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

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 = {}; 
+
+
+
+