@wix/patterns 1.421.0 → 1.423.0

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow897283882";
+var _namespace_ = "NestedTableRow2551801554";
 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":"NestedTableRow897283882__root","firstLevel":"NestedTableRow897283882__firstLevel","placeholder":"NestedTableRow897283882__placeholder","parentHovered":"NestedTableRow897283882__parentHovered"};
+export var classes = {"root":"NestedTableRow2551801554__root","firstLevel":"NestedTableRow2551801554__firstLevel","placeholder":"NestedTableRow2551801554__placeholder","parentHovered":"NestedTableRow2551801554__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1671871044";
+var _namespace_ = "PickerContentAdditionalStep1877923304";
 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":"PickerContentAdditionalStep1671871044__root","titles":"PickerContentAdditionalStep1671871044__titles","suffix":"PickerContentAdditionalStep1671871044__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1877923304__root","titles":"PickerContentAdditionalStep1877923304__titles","suffix":"PickerContentAdditionalStep1877923304__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent572051856";
+var _namespace_ = "ScrollableContent3853991789";
 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":"ScrollableContent572051856__root"};
+export var classes = {"root":"ScrollableContent3853991789__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_ = "SetupWidget20893128";
+var _namespace_ = "SetupWidget4051015157";
 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":"SetupWidget20893128__root","row":"SetupWidget20893128__row","completedCta":"SetupWidget20893128__completedCta","card":"SetupWidget20893128__card"};
+export var classes = {"root":"SetupWidget4051015157__root","row":"SetupWidget4051015157__row","completedCta":"SetupWidget4051015157__completedCta","card":"SetupWidget4051015157__card"};
 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_ = "SkeletonCard1937491044";
+var _namespace_ = "SkeletonCard4040440223";
 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":"SkeletonCard1937491044__root","headerLoading":"SkeletonCard1937491044__headerLoading"};
+export var classes = {"root":"SkeletonCard4040440223__root","headerLoading":"SkeletonCard4040440223__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_ = "SlidingModal3141849004";
+var _namespace_ = "SlidingModal2850071977";
 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":"SlidingModal3141849004__root"};
+export var classes = {"root":"SlidingModal2850071977__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_ = "TabsFilter2977908646";
+var _namespace_ = "TabsFilter3869411207";
 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":"TabsFilter2977908646__root","title":"TabsFilter2977908646__title"};
+export var classes = {"root":"TabsFilter3869411207__root","title":"TabsFilter3869411207__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_ = "ManageTagsModal1928382940";
+var _namespace_ = "ManageTagsModal4070692141";
 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":"ManageTagsModal1928382940__root"};
+export var classes = {"root":"ManageTagsModal4070692141__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_ = "ToolbarItem2926500561";
+var _namespace_ = "ToolbarItem3003911644";
 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":"ToolbarItem2926500561__root"};
+export var classes = {"root":"ToolbarItem3003911644__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_ = "ToolbarItemBox3922501607";
+var _namespace_ = "ToolbarItemBox3861072097";
 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":"ToolbarItemBox3922501607__root"};
+export var classes = {"root":"ToolbarItemBox3861072097__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_ = "common113862810";
+var _namespace_ = "common2112733534";
 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":"common113862810__root","column":"common113862810__column","fullHeight":"common113862810__fullHeight"};
+export var classes = {"root":"common2112733534__root","column":"common2112733534__column","fullHeight":"common2112733534__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useBuildOption.ts

@@ -7,14 +7,21 @@ import { ListItem } from './listItem';
 import { useCallback, useMemo } from 'react';
 import { DropdownLayoutOption } from '@wix/design-system/dist/types/DropdownLayout';
 
+export interface BuildOptionState {
+  disabled?: boolean;
+  disabledDescription?: string;
+}
+
 export function useBuildOption<V>({
   filter,
   checkbox,
   renderItem,
+  getOptionState,
 }: {
   filter: ArrayField<V>;
   renderItem?: (item: V, index: number) => ListItem;
   checkbox?: boolean;
+  getOptionState?: (key: string) => BuildOptionState;
 }) {
   return useCallback(
     (keyedItem: KeyedItem<V>, index: number) => {
@@ -31,6 +38,7 @@ export function useBuildOption<V>({
           title: filter.itemName(item),
           label: title,
           ...option,
+          ...getOptionState?.(key),
         }),
         {
           sectionId: option?.sectionId,
@@ -38,7 +46,7 @@ export function useBuildOption<V>({
         },
       );
     },
-    [renderItem, checkbox],
+    [renderItem, checkbox, getOptionState],
   );
 }
 

package/src/hooks/useCollectionOptions.tsx

@@ -6,6 +6,7 @@ import {
   KeyedItemOption,
   MultiSelectCheckboxFilterBaseOption,
 } from '../components/MultiSelectCheckboxFilterBase';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 interface UseCollectionOptionsProps<V, F extends FiltersMap> {
   collection: CollectionState<V, F>;
@@ -20,10 +21,22 @@ export function useCollectionOptions<V, F extends FiltersMap>({
   renderItem,
   filter,
 }: UseCollectionOptionsProps<V, F>) {
+  const { translate } = useWixPatternsContainer();
+  const { dropdownSelect } = dropdownCollectionFilterState;
+
   const buildOption = useBuildOption<V>({
     filter,
     renderItem,
     checkbox: true,
+    getOptionState: (key) =>
+      dropdownSelect.canToggle(key)
+        ? {}
+        : {
+            disabled: true,
+            disabledDescription: translate(
+              'cairo.picker.itemsSelected.maxSelected.tooltip',
+            ),
+          },
   });
 
   const {

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

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

package/src/state/DropdownCollectionFilterState.ts

@@ -13,6 +13,7 @@ export interface DropdownCollectionFilterStateParams<
   resetOnClose?: boolean;
   container: WixPatternsContainer;
   toolbar: FilterToolbarState;
+  maxSelected?: number;
 }
 
 export class DropdownCollectionFilterState<
@@ -75,6 +76,7 @@ export class DropdownCollectionFilterState<
       container: params.container,
       toolbar: params.toolbar,
       filter,
+      maxSelected: params.maxSelected,
     });
 
     makeObservable(this, {

package/src/state/DropdownSelectState.ts

@@ -14,6 +14,7 @@ export interface DropdownSelectStateParams<V> {
   toolbar: FilterToolbarState;
   select?: SelectState<KeyedItem<V>>;
   filter: ArrayField<V>;
+  maxSelected?: number;
 }
 
 export class DropdownSelectState<V> {
@@ -21,6 +22,7 @@ export class DropdownSelectState<V> {
   readonly toolbar;
   readonly select: SelectState<KeyedItem<V>>;
   readonly _filter: DropdownSelectStateParams<V>['filter'];
+  readonly maxSelected: DropdownSelectStateParams<V>['maxSelected'];
 
   readonly dropdown = new ToggleState();
 
@@ -35,12 +37,14 @@ export class DropdownSelectState<V> {
         keyGetter: (value) => value.key,
       });
     this._filter = params.filter;
+    this.maxSelected = params.maxSelected;
 
     makeObservable(this, {
       filterKeyedItems: computed,
       filterKeyedItemsMap: computed,
       finalFilterKeyedItems: computed,
       finalFilterKeyedItemsMap: computed,
+      reachedMax: computed,
       selectedItems: computed({
         keepAlive: true,
       }),
@@ -120,8 +124,24 @@ export class DropdownSelectState<V> {
     return select.selectedValues.map(({ item }) => item);
   }
 
+  get reachedMax() {
+    const { maxSelected, select } = this;
+    return maxSelected != null && select.selectedCount >= maxSelected;
+  }
+
+  canToggle(key: string) {
+    if (!this.reachedMax) {
+      return true;
+    }
+    // at the cap: only existing keys, so they stay deselectable
+    return this.select.selectedKeys.includes(key);
+  }
+
   set(item: KeyedItem<V>) {
     const { select } = this;
+    if (!this.canToggle(item.key)) {
+      return;
+    }
     select.set(item);
     this.refreshIfChanged({ actionType: 'add', clickedValueKey: item.key });
   }

package/src/state/EditableTable/CellValueState.ts

@@ -258,6 +258,7 @@ export class CellValueState<T, F extends FiltersMap> {
         value,
         column.validation,
         resolved.validate,
+        this._parent.collection?.translate,
       );
       const pendingKey = this._pendingCellKey(rowKey, columnId);
 
@@ -290,6 +291,7 @@ export class CellValueState<T, F extends FiltersMap> {
       value,
       column.validation,
       resolved.validate,
+      this._parent.collection?.translate,
     );
     const pendingKey = this._pendingCellKey(rowKey, columnId);
 

package/src/state/EditableTable/types.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import type { Translate } from '@wix/bex-core';
 import type { RichTextStyleVariables } from '@wix/patterns-fields';
 import type { TableColumn } from '../../model/tableColumn';
 import type { ReferenceTypeConfig } from '../../components/EditableTable/cellTypes/reference/types';
@@ -57,8 +58,15 @@ export interface CellType {
   /** Deserialize clipboard string to value */
   deserialize?: (raw: string) => any;
 
-  /** Validate a cell value. Return null if valid, or error message string. */
-  validate?: (value: any, rules?: ValidationRule[]) => string | null;
+  /** Validate a cell value. Return null if valid, or error message string.
+   *  `translate` is optional so cell types whose validate doesn't need
+   *  localization (text/number/date/…) can keep their existing call sites.
+   *  Cell types that DO localize (array/object) must be called with a translator. */
+  validate?: (
+    value: any,
+    rules?: ValidationRule[],
+    translate?: Translate,
+  ) => string | null;
 
   /** Can this cell type be edited? (default: true) */
   editable?: boolean;
@@ -124,6 +132,7 @@ export interface CellTypeConfigMap {
   time: never;
   datetime: never;
   object: never;
+  array: never;
   image: never;
   document: never;
   multiDocument: never;

package/src/state/EditableTable/utils.ts

@@ -1,3 +1,4 @@
+import type { Translate } from '@wix/bex-core';
 import type {
   Cell,
   CellBorder,
@@ -50,7 +51,12 @@ function checkValidationRule(rule: ValidationRule, value: any): boolean {
 export function runCellValidation(
   value: any,
   rules?: ValidationRule[],
-  typeValidate?: (value: any, rules?: ValidationRule[]) => string | null,
+  typeValidate?: (
+    value: any,
+    rules?: ValidationRule[],
+    translate?: Translate,
+  ) => string | null,
+  translate?: Translate,
 ): ValidationResult {
   const errors: string[] = [];
 
@@ -63,7 +69,7 @@ export function runCellValidation(
   }
 
   if (typeValidate) {
-    const typeError = typeValidate(value, rules);
+    const typeError = typeValidate(value, rules, translate);
     if (typeError) {
       errors.push(typeError);
     }

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

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