@wix/patterns 1.364.0 → 1.369.0

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

@@ -0,0 +1,49 @@
+import { defineCellType } from '../../types';
+import { ObjectView } from './View';
+import { ObjectEdit } from './Edit';
+import { safeStringify, safeParse } from '@wix/patterns-fields';
+
+export { ObjectView, ObjectEdit };
+
+export const objectCellType = defineCellType<Record<string, unknown>>({
+  type: 'object',
+  ViewComponent: ObjectView,
+  EditComponent: ObjectEdit,
+  serialize: (value) => (value != null ? safeStringify(value) : ''),
+  deserialize: (raw) => {
+    if (!raw) {
+      return {};
+    }
+    const parsed = safeParse(raw);
+    return typeof parsed === 'object' &&
+      parsed !== null &&
+      !Array.isArray(parsed)
+      ? parsed
+      : {};
+  },
+  validate: (value) => {
+    if (value == null) {
+      return null;
+    }
+    if (typeof value === 'string') {
+      try {
+        const parsed = JSON.parse(value);
+        if (
+          typeof parsed !== 'object' ||
+          parsed === null ||
+          Array.isArray(parsed)
+        ) {
+          return 'Value must be a valid JSON object';
+        }
+      } catch {
+        return 'Invalid JSON syntax';
+      }
+    }
+    if (typeof value !== 'object' || Array.isArray(value)) {
+      return 'Value must be a valid JSON object';
+    }
+    return null;
+  },
+  editable: true,
+  clearable: true,
+});

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_ = "Edit2518330657";
+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":"Edit2518330657__root","selectInput":"Edit2518330657__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_ = "View2299310086";
+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":"View2299310086__root","textView":"View2299310086__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_ = "Edit3813731711";
+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":"Edit3813731711__root","editWrapper":"Edit3813731711__editWrapper","inputArea":"Edit3813731711__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_ = "View3275766842";
+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":"View3275766842__root","textView":"View3275766842__textView"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Input } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const UrlEdit: React.FC<CellEditProps<string>> = ({
+  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();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    onCommit();
+  }, [onCommit]);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Input
+        ref={inputRef}
+        size="small"
+        border="none"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        type="url"
+        autoSelect={false}
+        className={classes.urlInput}
+      />
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,22 @@
+.textView {
+  -st-states: suffixOnHover;
+  width: 100%;
+  padding: 9px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.urlText {
+  flex: 1;
+  min-width: 0;
+}
+
+.suffix {
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+.textView:suffixOnHover:not(:hover) .suffix {
+  display: none;
+}

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

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