@wix/patterns 1.436.0 → 1.437.0

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -65,21 +65,13 @@ export const SetupStepRow = ({
         focused: isFocused,
         withBackground: !!focusedBackground,
       })}
-      onClick={handleClick}
-      onKeyDown={
-        clickable
-          ? (event: React.KeyboardEvent) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                onActivate();
-              }
-            }
-          : undefined
-      }
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
     >
-      <ClickableCard skin="outline" hasPadding={false} disabled={isDisabled}>
+      <ClickableCard
+        skin="outline"
+        hasPadding={false}
+        disabled={isDisabled}
+        onClick={handleClick}
+      >
         <Box direction="vertical" padding="6px">
           {/* Reserve the CTA button's height (small button = 30px) so rows keep a
               stable height whether or not they render a CTA — otherwise completed
@@ -121,21 +113,23 @@ export const SetupStepRow = ({
               (() => {
                 const ctaNode = (
                   <Box verticalAlign="middle">
-                    <Button
-                      dataHook={`setup-step-cta-${step.id}`}
-                      size="small"
-                      priority={
-                        !isDisabled && !isFocused ? 'secondary' : 'primary'
-                      }
-                      disabled={isDisabled}
-                      ellipsis={false}
-                      onClick={(event: React.MouseEvent) => {
-                        event.stopPropagation();
-                        onActivate();
-                      }}
-                    >
-                      {step.ctaLabel}
-                    </Button>
+                    <ClickableCard.Action>
+                      <Button
+                        dataHook={`setup-step-cta-${step.id}`}
+                        size="small"
+                        priority={
+                          !isDisabled && !isFocused ? 'secondary' : 'primary'
+                        }
+                        disabled={isDisabled}
+                        ellipsis={false}
+                        onClick={(event: React.MouseEvent) => {
+                          event.stopPropagation();
+                          onActivate();
+                        }}
+                      >
+                        {step.ctaLabel}
+                      </Button>
+                    </ClickableCard.Action>
                   </Box>
                 );
 
@@ -162,16 +156,18 @@ export const SetupStepRow = ({
                 marginRight="SP2"
                 className={st(classes.completedCta)}
               >
-                <TextButton
-                  dataHook={`setup-step-cta-${step.id}`}
-                  size="small"
-                  onClick={(event: React.MouseEvent) => {
-                    event.stopPropagation();
-                    onActivate();
-                  }}
-                >
-                  {step.completedCtaLabel}
-                </TextButton>
+                <ClickableCard.Action>
+                  <TextButton
+                    dataHook={`setup-step-cta-${step.id}`}
+                    size="small"
+                    onClick={(event: React.MouseEvent) => {
+                      event.stopPropagation();
+                      onActivate();
+                    }}
+                  >
+                    {step.completedCtaLabel}
+                  </TextButton>
+                </ClickableCard.Action>
               </Box>
             )}
           </Box>
@@ -190,12 +186,15 @@ export const SetupStepRow = ({
               {/* Stop clicks/keys inside the consumer widget from bubbling to the
                   row's toggle handler — otherwise interacting with the content
                   (e.g. an input) would collapse the card. */}
-              <div
-                onClick={(event) => event.stopPropagation()}
-                onKeyDown={(event) => event.stopPropagation()}
-              >
-                {renderStepContent?.(step)}
-              </div>
+              <ClickableCard.Action>
+                <div
+                  data-hook={`setup-step-content-action-${step.id}`}
+                  onClick={(event) => event.stopPropagation()}
+                  onKeyDown={(event) => event.stopPropagation()}
+                >
+                  {renderStepContent?.(step)}
+                </div>
+              </ClickableCard.Action>
             </Box>
           )}
         </Box>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget4109451711";
+var _namespace_ = "SetupWidget4282571245";
 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":"SetupWidget4109451711__root","row":"SetupWidget4109451711__row","completedCta":"SetupWidget4109451711__completedCta","card":"SetupWidget4109451711__card","stepIcon":"SetupWidget4109451711__stepIcon","chevron":"SetupWidget4109451711__chevron","chevronDisabled":"SetupWidget4109451711__chevronDisabled","inProgressLabel":"SetupWidget4109451711__inProgressLabel"};
+export var classes = {"root":"SetupWidget4282571245__root","row":"SetupWidget4282571245__row","completedCta":"SetupWidget4282571245__completedCta","card":"SetupWidget4282571245__card","stepIcon":"SetupWidget4282571245__stepIcon","chevron":"SetupWidget4282571245__chevron","chevronDisabled":"SetupWidget4282571245__chevronDisabled","inProgressLabel":"SetupWidget4282571245__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.uni.driver.ts

@@ -2,6 +2,7 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
   ButtonUniDriver,
+  ClickableCardUniDriver,
   TextButtonUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
@@ -15,6 +16,9 @@ export default (base: UniDriver, body: UniDriver) => {
   const stepCta = (id: string) =>
     ButtonUniDriver(base.$(`[data-hook="setup-step-cta-${id}"]`), body);
 
+  const stepCard = (id: string) =>
+    ClickableCardUniDriver(base.$(`[data-hook="setup-step-${id}"]`), body);
+
   return {
     /** Widget title text. */
     getTitle: () => base.$(`[data-hook="setup-widget-title"]`).text(),
@@ -27,8 +31,10 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a given step row/card is rendered. */
     stepExists: (id: string) =>
       base.$(`[data-hook="setup-step-${id}"]`).exists(),
-    /** Click a step's row/card (triggers inline toggle or navigate). */
+    /** Click a step's row/card. */
     clickStep: (id: string) => base.$(`[data-hook="setup-step-${id}"]`).click(),
+    /** Click a desktop step card's activation overlay. */
+    clickStepCard: (id: string) => stepCard(id).click(),
     /** Click a step's CTA button. */
     clickStepCta: (id: string) => stepCta(id).click(),
     /** Whether a step's CTA is rendered. */
@@ -40,6 +46,11 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a step's inline-expansion content is shown. */
     isStepExpanded: (id: string) =>
       base.$(`[data-hook="setup-step-content-${id}"]`).exists(),
+    /** Inline content must be lifted over the card's activation overlay. */
+    getInlineContentActionStyle: (id: string) =>
+      base
+        .$(`[data-hook="setup-step-content-action-${id}"]`)
+        .attr('style'),
     /** Whether a step row/card is the single focused ("next") step. */
     isStepFocused: (id: string) =>
       base

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1261095733";
+var _namespace_ = "SkeletonCard3264404199";
 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":"SkeletonCard1261095733__root","headerLoading":"SkeletonCard1261095733__headerLoading"};
+export var classes = {"root":"SkeletonCard3264404199__root","headerLoading":"SkeletonCard3264404199__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_ = "SlidingModal2267206532";
+var _namespace_ = "SlidingModal1088809015";
 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":"SlidingModal2267206532__root"};
+export var classes = {"root":"SlidingModal1088809015__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_ = "AddFieldColumnHeader2667196467";
+var _namespace_ = "AddFieldColumnHeader3849828666";
 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":"AddFieldColumnHeader2667196467__root","title":"AddFieldColumnHeader2667196467__title","hoverBridge":"AddFieldColumnHeader2667196467__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3849828666__root","title":"AddFieldColumnHeader3849828666__title","hoverBridge":"AddFieldColumnHeader3849828666__hoverBridge"};
 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_ = "TabsFilter1822916798";
+var _namespace_ = "TabsFilter3586451056";
 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":"TabsFilter1822916798__root","title":"TabsFilter1822916798__title"};
+export var classes = {"root":"TabsFilter3586451056__root","title":"TabsFilter3586451056__title"};
 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_ = "ManageTagsModal3564937902";
+var _namespace_ = "ManageTagsModal2897725672";
 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":"ManageTagsModal3564937902__root"};
+export var classes = {"root":"ManageTagsModal2897725672__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_ = "ToolbarItem748894430";
+var _namespace_ = "ToolbarItem326594590";
 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":"ToolbarItem748894430__root"};
+export var classes = {"root":"ToolbarItem326594590__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_ = "ToolbarItemBox2783906135";
+var _namespace_ = "ToolbarItemBox3039701418";
 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":"ToolbarItemBox2783906135__root"};
+export var classes = {"root":"ToolbarItemBox3039701418__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_ = "common2285840999";
+var _namespace_ = "common2940309204";
 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":"common2285840999__root","column":"common2285840999__column","fullHeight":"common2285840999__fullHeight"};
+export var classes = {"root":"common2940309204__root","column":"common2940309204__column","fullHeight":"common2940309204__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/state/EditableTable/CellInteractionState.ts

@@ -71,6 +71,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
     this.selectedCells.clear();
     this.selectedCells.add(cellKey(rowKey, columnId));
     this.selectionAnchor = { rowKey, columnId };
+    this._parent.cellValue.flushDrafts(rowKey);
   }
 
   clearFocus() {
@@ -78,6 +79,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
     this.selectedCells.clear();
     this.selectionAnchor = null;
     this.cancelEdit();
+    this._parent.cellValue.flushDrafts();
   }
 
   replaceRowKey(oldRowKey: string, newRowKey: string) {

package/src/state/EditableTable/CellValueState.ts

@@ -16,6 +16,13 @@ export class CellValueState<T, F extends FiltersMap> {
   /** Pending invalid cell values, keyed by `${itemId}:${colId}`. */
   readonly _pendingCells = new Map<string, { value: any; errors: string[] }>();
 
+  /** Valid committed values not yet saved, keyed by `${itemId}:${colId}`.
+   *  Each row's drafts are flushed as one update when focus leaves the row. */
+  readonly _draftCells = new Map<
+    string,
+    { rowKey: string; columnId: string; value: any }
+  >();
+
   private readonly _parent: EditableTableState<T, F>;
   private readonly _extraCellTypes: Map<string, CellType>;
 
@@ -28,12 +35,14 @@ export class CellValueState<T, F extends FiltersMap> {
 
     makeObservable(this, {
       _pendingCells: observable,
+      _draftCells: observable,
       _cellTypeMap: computed,
       clearCells: action,
       toggleCell: action,
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      flushDrafts: action,
     });
   }
 
@@ -66,6 +75,10 @@ export class CellValueState<T, F extends FiltersMap> {
     if (pending) {
       return pending.value;
     }
+    const draft = this._getDraftCell(rowKey, columnId);
+    if (draft) {
+      return draft.value;
+    }
     const column = this._parent._columnMap.get(columnId);
     const keyedItem = this._parent._getKeyedItem(rowKey);
     return column && keyedItem ? column.getValue(keyedItem.item) : undefined;
@@ -119,8 +132,7 @@ export class CellValueState<T, F extends FiltersMap> {
       return '';
     }
     const resolved = this.resolveCellTypeByColumnId(column.id);
-    const pending = this._getPendingCell(rowKey, columnId);
-    const value = pending ? pending.value : column.getValue(keyedItem.item);
+    const value = this.getCellDisplayValue(rowKey, columnId);
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
@@ -166,10 +178,9 @@ export class CellValueState<T, F extends FiltersMap> {
       return;
     }
 
-    const value = column.getValue(keyedItem.item);
+    const value = this.getCellDisplayValue(rowKey, columnId);
     const newValue = resolved.toggleValue(value);
-    const updatedItem = column.setValue(keyedItem.item, newValue);
-    this._parent.mutation.updateItems([updatedItem]);
+    this._applyValue(rowKey, columnId, newValue);
   }
 
   /** Commit handler — used as callback for CellInteractionState. */
@@ -191,6 +202,14 @@ export class CellValueState<T, F extends FiltersMap> {
     return key ? this._pendingCells.get(key) : undefined;
   }
 
+  private _getDraftCell(
+    rowKey: string,
+    columnId: string,
+  ): { value: any } | undefined {
+    const key = this._pendingCellKey(rowKey, columnId);
+    return key ? this._draftCells.get(key) : undefined;
+  }
+
   private _pendingCellKey(
     rowKey: string,
     columnId: string,
@@ -282,7 +301,9 @@ export class CellValueState<T, F extends FiltersMap> {
         if (pendingKey) {
           this._pendingCells.delete(pendingKey);
         }
-        const currentItem = rowItems.get(rowKey) ?? keyedItem.item;
+        const currentItem =
+          rowItems.get(rowKey) ??
+          this._consumeRowDrafts(rowKey, keyedItem.item);
         rowItems.set(rowKey, column.setValue(currentItem, value));
       } else if (pendingKey) {
         this._pendingCells.set(pendingKey, {
@@ -311,12 +332,13 @@ export class CellValueState<T, F extends FiltersMap> {
     );
     const pendingKey = this._pendingCellKey(rowKey, columnId);
 
-    if (result.valid) {
-      if (pendingKey) {
-        this._pendingCells.delete(pendingKey);
-      }
-      const updatedItem = column.setValue(keyedItem.item, value);
-      this._parent.mutation.updateItems([updatedItem]);
+    if (result.valid && pendingKey) {
+      this._pendingCells.delete(pendingKey);
+      this._draftCells.set(pendingKey, {
+        rowKey: keyedItem.key,
+        columnId: column.id,
+        value,
+      });
     } else if (pendingKey) {
       this._pendingCells.set(pendingKey, {
         value,
@@ -324,4 +346,49 @@ export class CellValueState<T, F extends FiltersMap> {
       });
     }
   }
+
+  flushDrafts(exceptRowKey?: string) {
+    const rowKeys = new Set<string>();
+    for (const entry of this._draftCells.values()) {
+      if (entry.rowKey !== exceptRowKey) {
+        rowKeys.add(entry.rowKey);
+      }
+    }
+
+    const items: T[] = [];
+    for (const rowKey of rowKeys) {
+      const keyedItem = this._parent._getKeyedItem(rowKey);
+      if (keyedItem) {
+        items.push(this._consumeRowDrafts(rowKey, keyedItem.item));
+      } else {
+        this._dropRowDrafts(rowKey);
+      }
+    }
+    if (items.length > 0) {
+      this._parent.mutation.updateItems(items);
+    }
+  }
+
+  private _consumeRowDrafts(rowKey: string, item: T): T {
+    for (const [key, entry] of this._draftCells) {
+      if (entry.rowKey !== rowKey) {
+        continue;
+      }
+      const column = this._parent._columnMap.get(entry.columnId);
+      if (column?.setValue) {
+        item = column.setValue(item, entry.value);
+      }
+      this._draftCells.delete(key);
+    }
+    return item;
+  }
+
+  /** Drop a row's draft entries without saving (the row no longer exists). */
+  private _dropRowDrafts(rowKey: string) {
+    for (const [key, entry] of this._draftCells) {
+      if (entry.rowKey === rowKey) {
+        this._draftCells.delete(key);
+      }
+    }
+  }
 }

package/src/state/EditableTable/EditableTableState.ts

@@ -261,7 +261,11 @@ export class EditableTableState<T, F extends FiltersMap>
 
   init(columns: EditableColumn<T>[]) {
     this._providedColumns = columns;
-    return this.mutation.init();
+    const disposeMutation = this.mutation.init();
+    return () => {
+      this.cellValue.flushDrafts();
+      disposeMutation();
+    };
   }
 
   addItem(afterItemKey?: string): string {

package/src/state/EditableTable/utils.ts

@@ -43,6 +43,13 @@ function checkValidationRule(rule: ValidationRule, value: any): boolean {
       return typeof value === 'string' && rule.value.test(value);
     case 'custom':
       return rule.validate(value);
+    case 'specificValues':
+      return (
+        value == null ||
+        value === '' ||
+        (typeof value === 'string' &&
+          rule.values.some((option) => option.id === value))
+      );
     default:
       return true;
   }

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

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

package/src/state/buildEditableFieldColumns.ts

@@ -69,6 +69,13 @@ function toValidationRules(field: Field): ValidationRule[] {
       message: '',
     });
   }
+  if (v.specificValues?.length) {
+    rules.push({
+      type: 'specificValues',
+      values: v.specificValues,
+      message: `${field.displayName} must be one of the allowed values`,
+    });
+  }
   return rules;
 }