@wix/patterns 1.493.0 → 1.495.0

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

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

package/src/components/SetupWidget/SetupWidget.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4244152725";
+var _namespace_ = "SetupWidget1049875717";
 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":"SetupWidget4244152725__root","row":"SetupWidget4244152725__row","completedCta":"SetupWidget4244152725__completedCta","secondaryCta":"SetupWidget4244152725__secondaryCta","card":"SetupWidget4244152725__card","stepIcon":"SetupWidget4244152725__stepIcon","chevron":"SetupWidget4244152725__chevron","chevronDisabled":"SetupWidget4244152725__chevronDisabled","inProgressLabel":"SetupWidget4244152725__inProgressLabel"};
+export var classes = {"root":"SetupWidget1049875717__root","row":"SetupWidget1049875717__row","completedCta":"SetupWidget1049875717__completedCta","secondaryCta":"SetupWidget1049875717__secondaryCta","card":"SetupWidget1049875717__card","stepIcon":"SetupWidget1049875717__stepIcon","chevron":"SetupWidget1049875717__chevron","chevronDisabled":"SetupWidget1049875717__chevronDisabled","inProgressLabel":"SetupWidget1049875717__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1594950216";
+var _namespace_ = "SkeletonCard3476574360";
 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":"SkeletonCard1594950216__root","headerLoading":"SkeletonCard1594950216__headerLoading"};
+export var classes = {"root":"SkeletonCard3476574360__root","headerLoading":"SkeletonCard3476574360__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader2295953540";
+var _namespace_ = "AddFieldColumnHeader2165490183";
 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":"AddFieldColumnHeader2295953540__root","anchorLayer":"AddFieldColumnHeader2295953540__anchorLayer","popover":"AddFieldColumnHeader2295953540__popover","title":"AddFieldColumnHeader2295953540__title","hoverBridge":"AddFieldColumnHeader2295953540__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader2165490183__root","anchorLayer":"AddFieldColumnHeader2165490183__anchorLayer","popover":"AddFieldColumnHeader2165490183__popover","title":"AddFieldColumnHeader2165490183__title","hoverBridge":"AddFieldColumnHeader2165490183__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/NumberCell.st.css.ts

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

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2353664205";
+var _namespace_ = "TabsFilter2750685995";
 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":"TabsFilter2353664205__root","titleBox":"TabsFilter2353664205__titleBox"};
+export var classes = {"root":"TabsFilter2750685995__root","titleBox":"TabsFilter2750685995__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3900250439";
+var _namespace_ = "ManageTagsModal2806058920";
 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":"ManageTagsModal3900250439__root"};
+export var classes = {"root":"ManageTagsModal2806058920__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

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

package/src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts

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

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1889741109";
+var _namespace_ = "common2788775158";
 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":"common1889741109__root","column":"common1889741109__column","fullHeight":"common1889741109__fullHeight"};
+export var classes = {"root":"common2788775158__root","column":"common2788775158__column","fullHeight":"common2788775158__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCloseOnAncestorScroll.ts

@@ -10,18 +10,47 @@ export function useCloseOnAncestorScroll(
   wrapperRef: RefObject<HTMLElement | null>,
   closePopover: () => void,
   enabled: boolean,
+  ignoreCompletedScrolls = false,
 ) {
   useEffect(() => {
     if (!enabled) {
       return;
     }
+    const positions = new Map<Element, { left: number; top: number }>();
+    let ancestor = ignoreCompletedScrolls
+      ? wrapperRef.current?.parentElement
+      : undefined;
+    while (ancestor) {
+      positions.set(ancestor, {
+        left: ancestor.scrollLeft,
+        top: ancestor.scrollTop,
+      });
+      ancestor = ancestor.parentElement;
+    }
+
     const onScroll = (e: Event) => {
-      const target = e.target as Node;
-      if (target.contains?.(wrapperRef.current)) {
+      if (!ignoreCompletedScrolls) {
+        if (e.target instanceof Node && e.target.contains(wrapperRef.current)) {
+          closePopover();
+        }
+        return;
+      }
+      const target =
+        e.target === document ? document.scrollingElement : e.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const previous = positions.get(target);
+      // A focus-triggered scroll may finish before opening, but dispatch later.
+      if (
+        previous &&
+        (target.scrollLeft !== previous.left ||
+          target.scrollTop !== previous.top)
+      ) {
         closePopover();
       }
     };
     document.addEventListener('scroll', onScroll, true);
     return () => document.removeEventListener('scroll', onScroll, true);
-  }, [wrapperRef, closePopover, enabled]);
+  }, [wrapperRef, closePopover, enabled, ignoreCompletedScrolls]);
 }

package/src/model/tableColumn.ts

@@ -117,29 +117,34 @@ export type SortableConfig<T> =
 
 export type TableColumn<T> = CustomColumnConfig<T> & SortableConfig<T>;
 
+/**
+ * Width of the mobile image column: 24px, 36px or 48px, matching the WDS
+ * `Avatar` `size24` / `size36` / `size48`.
+ * @external
+ */
+export type MobileImageSize = 'small' | 'medium' | 'large';
+
 export type ColumnMobileConfig =
   | {
+      /** Fixed-width column pinned to the left of the row. Only the first one is used. */
+      column: 'image';
       /**
-       * Which mobile column to display in.
-       * - 'first': Stacks vertically with other 'first' columns
-       * - 'second': Displays as standalone second column
-       * - undefined: Hidden on mobile
+       * Image width.
+       * @default 'medium'
        */
+      size?: MobileImageSize;
+    }
+  | {
+      /** The main block. Columns here stack vertically, one per line. */
       column: 'first';
       /**
-       * Sort order within 'first' column (lower appears higher).
-       * Only relevant when column is 'first'.
+       * Stacking position, lowest first. Columns with no `order` come last.
        * @default Infinity
        */
       order?: number;
     }
   | {
-      /**
-       * Which mobile column to display in.
-       * - 'first': Stacks vertically with other 'first' columns
-       * - 'second': Displays as standalone second column
-       * - undefined: Hidden on mobile
-       */
+      /** A single column at the end of the row. */
       column?: 'second';
     };
 
@@ -229,10 +234,10 @@ export interface Column {
   width?: TableColumnWSR['width'];
   style?: TableColumnWSR['style'];
   /**
-   * Mobile column configuration. Determines how this column is displayed on mobile devices.
-   * - column: 'first' - Stacks vertically with other 'first' columns
-   * - column: 'second' - Displays as standalone second column
-   * - undefined - Hidden on mobile
+   * Where this column goes on mobile. No `mobile` key means hidden on mobile.
+   * - `{ column: 'image', size? }` - pinned to the left of the row.
+   * - `{ column: 'first', order? }` - the main block, stacked one per line.
+   * - `{ column: 'second' }` - the end of the row.
    * @external
    */
   mobile?: ColumnMobileConfig;

package/src/state/CollectionFieldsSourceState.ts

@@ -1,4 +1,4 @@
-import { reaction } from 'mobx';
+import { reaction, runInAction } from 'mobx';
 import type { ComponentType } from 'react';
 import { addEventListener, TaskState } from '@wix/bex-core';
 import type {
@@ -198,9 +198,11 @@ export class CollectionFieldsSourceState {
     toolbar: ToolbarCollectionState<any, any>,
     source: { fieldsSource: FieldsSource } & FieldsSourceRendering,
   ) {
-    toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
-      ...source,
-      toolbar,
+    runInAction(() => {
+      toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
+        ...source,
+        toolbar,
+      });
     });
   }
 

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader2841821885";
+var _namespace_ = "CollectionPageHeader1790822900";
 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":"CollectionPageHeader2841821885__root","mobileMoreActions":"CollectionPageHeader2841821885__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1790822900__root","mobileMoreActions":"CollectionPageHeader1790822900__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/MobilePrimaryActionBar.st.css.ts

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

package/src/state/CollectionPage/TitleBadges.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges789200656";
+var _namespace_ = "TitleBadges176837811";
 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":"TitleBadges789200656__root","tooltip":"TitleBadges789200656__tooltip","tooltipTrigger":"TitleBadges789200656__tooltipTrigger"};
+export var classes = {"root":"TitleBadges176837811__root","tooltip":"TitleBadges176837811__tooltip","tooltipTrigger":"TitleBadges176837811__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -6,7 +6,7 @@ import {
   builtInCellTypes,
   textCellType,
 } from '../../components/EditableTable/cellTypes';
-import { runCellValidation, validResult } from './utils';
+import { parseCellKey, runCellValidation, validResult } from './utils';
 
 const builtInCellTypeMap = new Map<string, CellType>(
   builtInCellTypes.map((ct) => [ct.type, ct]),
@@ -14,7 +14,10 @@ const builtInCellTypeMap = new Map<string, CellType>(
 
 export class CellValueState<T, F extends FiltersMap> {
   /** Pending invalid cell values, keyed by `${itemId}:${colId}`. */
-  readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
+  readonly _pendingCells = new Map<
+    string,
+    { value: any; errors: string[]; isDeserializationError?: boolean }
+  >();
 
   /** Valid committed values not yet saved, keyed by `${itemId}:${colId}`.
    *  Each row's drafts are flushed as one update when focus leaves the row. */
@@ -42,6 +45,7 @@ export class CellValueState<T, F extends FiltersMap> {
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      revalidatePendingCells: action,
       flushDrafts: action,
       flushRow: action,
       dropRowCellState: action,
@@ -363,7 +367,11 @@ export class CellValueState<T, F extends FiltersMap> {
       if (error) {
         const pendingKey = this._pendingCellKey(rowKey, columnId);
         if (pendingKey) {
-          this._pendingCells.set(pendingKey, { value, errors: [error] });
+          this._pendingCells.set(pendingKey, {
+            value,
+            errors: [error],
+            isDeserializationError: true,
+          });
         }
       } else {
         changes.push({ rowKey, columnId, value });
@@ -479,6 +487,25 @@ export class CellValueState<T, F extends FiltersMap> {
     }
   }
 
+  revalidatePendingCells() {
+    const rowsToSave = new Set<string>();
+    for (const [key, pending] of this._pendingCells) {
+      const cell = parseCellKey(key);
+      if (!cell || pending.isDeserializationError) {
+        continue;
+      }
+      this._applyValue(cell.rowKey, cell.columnId, pending.value);
+      if (!this._pendingCells.has(key)) {
+        rowsToSave.add(cell.rowKey);
+      }
+    }
+    for (const rowKey of rowsToSave) {
+      if (!this._parent.cellInteraction.isRowActive(rowKey)) {
+        this.flushRow(rowKey);
+      }
+    }
+  }
+
   flushDrafts(exceptRowKey?: string) {
     this._flushRows((rowKey) => rowKey !== exceptRowKey);
   }

package/src/state/EditableTable/EditableTableState.ts

@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import {
   CollectionOptimisticActions,
   CollectionState,
@@ -336,6 +336,10 @@ export class EditableTableState<T, F extends FiltersMap>
   init(columns: EditableColumn<T>[]) {
     this._providedColumns = columns;
     const disposeMutation = this.mutation.init();
+    const disposeValidation = reaction(
+      () => this.allColumns,
+      () => this.cellValue.revalidatePendingCells(),
+    );
 
     const { onBeforeUnload } = this.toolbar.container;
     const onBeforeUnloadSubscription = onBeforeUnload?.((event) => {
@@ -346,6 +350,7 @@ export class EditableTableState<T, F extends FiltersMap>
     });
 
     return () => {
+      disposeValidation();
       this.cellValue.flushDrafts();
       disposeMutation();
       onBeforeUnloadSubscription?.remove();

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/ToolbarCollectionState.ts

@@ -276,6 +276,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     });
 
     makeObservable(this, {
+      collectionFieldsSource: observable.ref,
       forceRenderIndexes: observable.ref,
       _userColumns: observable.ref,
       _extendedColumns: observable.ref,