@wix/patterns 1.366.0 → 1.369.0

package/src/components/EditableTable/cellTypes/email/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 EmailEditUniDriver(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/email/View.st.css

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

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { classes } from './View.st.css.js';
+
+export const EmailView: React.FC<CellViewProps<string>> = ({ value }) => (
+  <TextView data={value ?? ''} className={classes.textView} />
+);

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

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

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

@@ -0,0 +1,23 @@
+import { defineCellType } from '../../types';
+import { EmailView } from './View';
+import { EmailEdit } from './Edit';
+import { emailValidation } from '@wix/patterns-fields/validations';
+
+export { EmailView, EmailEdit };
+
+export const emailCellType = defineCellType<string>({
+  type: 'email',
+  ViewComponent: EmailView,
+  EditComponent: EmailEdit,
+  serialize: (value) => value ?? '',
+  deserialize: (raw) => raw,
+  validate: (value) => {
+    if (value && !emailValidation.isValid(value)) {
+      return 'Invalid email format';
+    }
+    return null;
+  },
+  editable: true,
+  clearable: true,
+  onTypeToEdit: ({ key }) => ({ value: key }),
+});

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

@@ -5,6 +5,8 @@ import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
 import { selectCellType } from './select';
 import { urlCellType } from './url';
+import { emailCellType } from './email';
+import { objectCellType } from './object';
 
 export {
   textCellType,
@@ -13,6 +15,8 @@ export {
   dateCellType,
   selectCellType,
   urlCellType,
+  emailCellType,
+  objectCellType,
 };
 
 /** All built-in cell types */
@@ -23,4 +27,6 @@ export const builtInCellTypes: CellType[] = [
   dateCellType,
   selectCellType,
   urlCellType,
+  emailCellType,
+  objectCellType,
 ];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1086718486";
+var _namespace_ = "Edit1803646036";
 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":"Edit1086718486__root","numberInput":"Edit1086718486__numberInput"};
+export var classes = {"root":"Edit1803646036__root","numberInput":"Edit1803646036__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View489596864";
+var _namespace_ = "View2720415983";
 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":"View489596864__root","textView":"View489596864__textView"};
+export var classes = {"root":"View2720415983__root","textView":"View2720415983__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import { Text } from '@wix/design-system';
+import { TextView } from '@wix/patterns-fields';
 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>
+  <TextView data={value != null ? value : ''} className={classes.textView} />
 );

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

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

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

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

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

@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { InputArea } from '@wix/design-system';
+import { Box } from '@wix/design-system';
+import { CellJsonInput } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const ObjectEdit: React.FC<CellEditProps<Record<string, unknown>>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const committedRef = useRef(false);
+  const inputAreaRef = useRef<InputArea | null>(null);
+
+  // Expand to fit content immediately on mount (= entering edit mode).
+  // Deferred to next frame so the textarea has rendered its content.
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      inputAreaRef.current?.calculateComputedRows();
+    });
+  }, []);
+
+  const handleChange = useCallback(
+    (parsed?: any) => {
+      onChange(parsed as Record<string, unknown>);
+    },
+    [onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        committedRef.current = true;
+        onCancel();
+      }
+      // Enter is not handled — multi-line JSON needs Enter for newlines
+    },
+    [onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (!committedRef.current) {
+      onCommit();
+    }
+  }, [onCommit]);
+
+  return (
+    <Box width="100%" height="100%">
+      <CellJsonInput
+        ref={(instance: any) => {
+          inputAreaRef.current = instance;
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
+        size="small"
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        autoSelect={false}
+        autoGrow
+        minRowsAutoGrow={1}
+        className={classes.jsonInput}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,22 @@
+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 ObjectEditUniDriver(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', {}),
+  };
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { JsonView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { classes } from './View.st.css.js';
+
+export const ObjectView: React.FC<CellViewProps<Record<string, unknown>>> = ({
+  value,
+}) => (
+  <div className={classes.textView}>
+    {value != null ? <JsonView data={value} /> : null}
+  </div>
+);

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

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

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.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2171501204";
+var _namespace_ = "Edit2518330657";
 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":"Edit2171501204__root","selectInput":"Edit2171501204__selectInput"};
+export var classes = {"root":"Edit2518330657__root","selectInput":"Edit2518330657__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2274296977";
+var _namespace_ = "View2299310086";
 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":"View2274296977__root","textView":"View2274296977__textView"};
+export var classes = {"root":"View2299310086__root","textView":"View2299310086__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit659033210";
+var _namespace_ = "Edit3813731711";
 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":"Edit659033210__root","editWrapper":"Edit659033210__editWrapper","inputArea":"Edit659033210__inputArea"};
+export var classes = {"root":"Edit3813731711__root","editWrapper":"Edit3813731711__editWrapper","inputArea":"Edit3813731711__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View985561481";
+var _namespace_ = "View3275766842";
 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":"View985561481__root","textView":"View985561481__textView"};
+export var classes = {"root":"View3275766842__root","textView":"View3275766842__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4061833648";
+var _namespace_ = "Edit1324021997";
 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":"Edit4061833648__root","urlInput":"Edit4061833648__urlInput"};
+export var classes = {"root":"Edit1324021997__root","urlInput":"Edit1324021997__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View793386274";
+var _namespace_ = "View567257960";
 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":"View793386274__root","textView":"View793386274__textView","urlText":"View793386274__urlText","suffix":"View793386274__suffix"};
+export var classes = {"root":"View567257960__root","textView":"View567257960__textView","urlText":"View567257960__urlText","suffix":"View567257960__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo } from 'react';
+import { useEffect, useLayoutEffect, useCallback, useMemo } from 'react';
 import type { FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from '../../state/EditableTable';
 
@@ -24,6 +24,21 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
   const isEditing = cellInteraction.isCellEditing(rowKey, columnId);
   const isEditable = state.isCellEditable(rowKey, columnId);
 
+  // Register the focused cell's DOM element on the state so
+  // scrollFocusedCellIntoView can use it. useLayoutEffect ensures
+  // the element is set before the requestAnimationFrame in
+  // scrollFocusedCellIntoView runs.
+  useLayoutEffect(() => {
+    if (isFocused) {
+      cellInteraction.focusedCellElement = cellRef.current;
+    }
+    return () => {
+      if (cellInteraction.focusedCellElement === cellRef.current) {
+        cellInteraction.focusedCellElement = null;
+      }
+    };
+  }, [isFocused, cellRef, cellInteraction]);
+
   // When focused (not editing): focus the cell div so it receives keyboard events.
   // When editing starts: focus the input (cursor at end, no select-all).
   useEffect(() => {

package/src/components/EditableTable/useKeyboardNavigation.ts

@@ -27,29 +27,35 @@ export function useKeyboardNavigation<T, F extends FiltersMap>(
           } else {
             cellInteraction.moveToNextCell();
           }
+          cellInteraction.scrollFocusedCellIntoView();
         }
         return;
       }
 
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       const extend = e.shiftKey;
+      let navigated = false;
 
       switch (e.key) {
         case 'ArrowUp':
           e.preventDefault();
           cellInteraction.moveFocus('up', extend);
+          navigated = true;
           break;
         case 'ArrowDown':
           e.preventDefault();
           cellInteraction.moveFocus('down', extend);
+          navigated = true;
           break;
         case 'ArrowLeft':
           e.preventDefault();
           cellInteraction.moveFocus('left', extend);
+          navigated = true;
           break;
         case 'ArrowRight':
           e.preventDefault();
           cellInteraction.moveFocus('right', extend);
+          navigated = true;
           break;
         case 'Tab':
           e.preventDefault();
@@ -58,6 +64,7 @@ export function useKeyboardNavigation<T, F extends FiltersMap>(
           } else {
             cellInteraction.moveToNextCell();
           }
+          navigated = true;
           break;
         case 'Escape':
           e.preventDefault();
@@ -83,6 +90,10 @@ export function useKeyboardNavigation<T, F extends FiltersMap>(
         default:
           break;
       }
+
+      if (navigated) {
+        cellInteraction.scrollFocusedCellIntoView();
+      }
     },
     [cellInteraction, clipboard, state],
   );

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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