@wix/patterns 1.461.0 → 1.463.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3976434641";
+var _namespace_ = "Edit2783054138";
 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":"Edit3976434641__root","wrapper":"Edit3976434641__wrapper","overlay":"Edit3976434641__overlay"};
+export var classes = {"root":"Edit2783054138__root","wrapper":"Edit2783054138__wrapper","overlay":"Edit2783054138__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -37,7 +37,6 @@ export const timeCellType = defineCellType<Time | null>({
       : translate!('cairo.editableTable.time.validation.invalid');
   },
   editable: true,
-  clearable: true,
   // Clear the committed value when entering edit mode via typing. With
   // `nativeTypeToEdit`, cairo focuses the WDS input synchronously inside the
   // keydown handler and lets the browser deliver the typed character to the

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4029121885";
+var _namespace_ = "Edit3418259412";
 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":"Edit4029121885__root","urlInput":"Edit4029121885__urlInput"};
+export var classes = {"root":"Edit3418259412__root","urlInput":"Edit3418259412__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_ = "View385205916";
+var _namespace_ = "View803783575";
 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":"View385205916__root","textView":"View385205916__textView","urlText":"View385205916__urlText","suffix":"View385205916__suffix"};
+export var classes = {"root":"View803783575__root","textView":"View803783575__textView","urlText":"View803783575__urlText","suffix":"View803783575__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -35,7 +35,6 @@ export const urlCellType = defineCellType<string>({
     return null;
   },
   editable: true,
-  clearable: true,
   // Replace the current value with the typed key (same behaviour as text/email).
   onTypeToEdit: ({ key }) => ({ value: key }),
   normalizeOnCommit: normalizeUrlOnCommit,

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

@@ -9,7 +9,6 @@ export const videoCellType = defineCellType<string | null>({
   ViewComponent: VideoView,
   EditComponent: VideoEdit,
   serialize: (value) => value ?? '',
-  clearable: true,
   showEditWhenFocused: true,
   // Returning undefined blocks all key presses from starting type-to-edit, but
   // the presence of the function sets the :typeToEdit CSS modifier which keeps

package/src/components/EditableTable/types.ts

@@ -10,6 +10,9 @@ export type {
   CellEditProps,
   CellEditWrapperProps,
   EditableCellConfig,
+  EditableCellContextMenuAction,
+  EditableCellContextMenuActionConfig,
+  EditableCellContextMenuActionContext,
   Focusable,
   EditTrigger,
 } from '@wix/bex-core';

package/src/components/EditableTable/useClipboardHandler.ts

@@ -16,12 +16,21 @@ export function useClipboardHandler<T, F extends FiltersMap>(
       if (cellInteraction.isEditing) {
         return;
       }
+      if (
+        state.cellValue.getActionableCells(
+          'copy',
+          cellInteraction.selectedCellsList,
+        ).length === 0
+      ) {
+        e.preventDefault();
+        return;
+      }
 
       e.preventDefault();
       const tsv = clipboard.copy();
       e.clipboardData?.setData('text/plain', tsv);
     },
-    [cellInteraction, clipboard],
+    [cellInteraction, clipboard, state],
   );
 
   const handleCut = useCallback(
@@ -35,6 +44,15 @@ export function useClipboardHandler<T, F extends FiltersMap>(
       if (state.updateItemDisabled) {
         return;
       }
+      if (
+        state.cellValue.getActionableCells(
+          'cut',
+          cellInteraction.selectedCellsList,
+        ).length === 0
+      ) {
+        e.preventDefault();
+        return;
+      }
 
       e.preventDefault();
       const tsv = clipboard.cut();
@@ -54,6 +72,15 @@ export function useClipboardHandler<T, F extends FiltersMap>(
       if (state.updateItemDisabled) {
         return;
       }
+      if (
+        state.cellValue.getCellActionDisabledTooltip(
+          'paste',
+          cellInteraction.focusedCell,
+        )
+      ) {
+        e.preventDefault();
+        return;
+      }
 
       e.preventDefault();
       const rawData = e.clipboardData?.getData('text/plain') ?? '';

package/src/components/EmptyState/EmptyStateBase.st.css.ts

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

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

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

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

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

package/src/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FiltersMap } from '@wix/bex-core';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { GridPresetProps } from './Grid.types';
 import { GridState, LayoutType } from '../../state';
 import { getToolbarCollectionFeaturesInitializers } from '../../state/getToolbarCollectionFeaturesInitializers';
@@ -67,17 +67,19 @@ interface GridBaseProps<T, F extends FiltersMap>
   layoutType?: LayoutType;
 }
 
-export type GridBasePropsWithoutPreset<T, F extends FiltersMap> = Omit<
-  GridBaseProps<T, F>,
-  'preset' | 'renderItem'
->;
+export type GridBasePropsWithoutPreset<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> = Omit<GridBaseProps<T, F>, 'preset' | 'renderItem'>;
 
-export type GridProps<T, F extends FiltersMap> = GridPresetProps<
+export type GridProps<
   T,
-  GridBasePropsWithoutPreset<T, F>
->;
+  F extends FiltersMap = OptionalFiltersMap,
+> = GridPresetProps<T, GridBasePropsWithoutPreset<T, F>>;
 
-function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
+function _Grid<T, F extends FiltersMap = OptionalFiltersMap>(
+  props: GridProps<T, F>,
+) {
   const {
     state,
     dragAndDrop,

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3247705764";
+var _namespace_ = "ImportStepUpload2714570815";
 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":"ImportStepUpload3247705764__root","fileUpload":"ImportStepUpload3247705764__fileUpload"};
+export var classes = {"root":"ImportStepUpload2714570815__root","fileUpload":"ImportStepUpload2714570815__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow477909419";
+var _namespace_ = "LoadingRow3055220752";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow477909419__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow477909419__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3055220752__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3055220752__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2649094695";
+var _namespace_ = "MultiBulkActionToolbar1641547521";
 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":"MultiBulkActionToolbar2649094695__root","leftGroupWrapper":"MultiBulkActionToolbar2649094695__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2649094695__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2649094695__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1641547521__root","leftGroupWrapper":"MultiBulkActionToolbar1641547521__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1641547521__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1641547521__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1438251547";
+var _namespace_ = "NestedTablePlaceholderStatesRow100310536";
 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":"NestedTablePlaceholderStatesRow1438251547__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow100310536__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_ = "NestedTableRow774112669";
+var _namespace_ = "NestedTableRow2093831599";
 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":"NestedTableRow774112669__root","firstLevel":"NestedTableRow774112669__firstLevel","placeholder":"NestedTableRow774112669__placeholder","parentHovered":"NestedTableRow774112669__parentHovered"};
+export var classes = {"root":"NestedTableRow2093831599__root","firstLevel":"NestedTableRow2093831599__firstLevel","placeholder":"NestedTableRow2093831599__placeholder","parentHovered":"NestedTableRow2093831599__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_ = "MultipleDragOverlayEffect788284026";
+var _namespace_ = "MultipleDragOverlayEffect733045943";
 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":"MultipleDragOverlayEffect788284026__root"};
+export var classes = {"root":"MultipleDragOverlayEffect733045943__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_ = "NestedTableDragAndDropRow2432249017";
+var _namespace_ = "NestedTableDragAndDropRow759723427";
 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":"NestedTableDragAndDropRow2432249017__root"};
+export var classes = {"root":"NestedTableDragAndDropRow759723427__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -8,6 +8,7 @@ import { useSelector } from '../../useSelector';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoPageCtaClicked } from '@wix/bex-core/bi';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 /**
  * Props for the PageSubTitle component.
@@ -39,6 +40,18 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
   useSelector(() => initTask.status);
 
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
+  // Page.Header sizes its own subtitle wrapper from
+  // `--wds-page-header-subtitle-font-size`, which Harmony maps to the `tiny`
+  // body tokens. The nested Text needs the same size or it keeps painting the
+  // 16px `medium` tokens over it.
+  const subtitleSize = isBmHarmonyTheme ? 'tiny' : 'medium';
+  const learnMoreSize = isBmHarmonyTheme
+    ? 'tiny'
+    : isMobile
+    ? 'small'
+    : 'medium';
 
   const learnMoreSuffix = learnMore ? (
     <TextButton
@@ -47,7 +60,7 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
       rel="noopener"
       target="_blank"
       href={learnMore.url}
-      size={isMobile ? 'small' : 'medium'}
+      size={learnMoreSize}
       style={{ marginLeft: '6px' }}
       onClick={() => {
         bi?.reportBI(
@@ -71,8 +84,10 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
       verticalAlign="bottom"
     >
       <Text
+        dataHook="page-subtitle-text"
         ellipsis
         secondary
+        size={subtitleSize}
         maxLines={2}
         suffix={learnMoreSuffix}
         tooltipProps={{

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

@@ -11,6 +11,10 @@ export default function SubTitleUniDriver(base: UniDriver, body: UniDriver) {
     getText() {
       return base.$('[data-hook="page-subtitle"]').text();
     },
+    /** Returns the WDS text size the subtitle renders at */
+    getTextSize() {
+      return base.$('[data-hook="page-subtitle-text"]').attr('data-size');
+    },
     getLearnMoreLabel() {
       return getLearnMoreButton().getButtonTextContent();
     },

package/src/components/PaginationTable/PaginationTable.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { CollectionPagination } from '../CollectionPagination';
-import { CollectionState, FiltersMap } from '@wix/bex-core';
+import { CollectionState, FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { CollectionTable, CollectionTableProps } from '../CollectionTable';
 import { TableState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
-export interface PaginationTableProps<T, F extends FiltersMap>
-  extends Omit<CollectionTableProps<T, F>, 'state'> {
+export interface PaginationTableProps<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> extends Omit<CollectionTableProps<T, F>, 'state'> {
   state: CollectionState<T, F>;
 }
 
-export function _PaginationTable<T, F extends FiltersMap = FiltersMap>(
+export function _PaginationTable<T, F extends FiltersMap = OptionalFiltersMap>(
   props: PaginationTableProps<T, F>,
 ) {
   const { state: collection, cardProps, ...rest } = props;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2368873188";
+var _namespace_ = "PickerContent212626143";
 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":"PickerContent2368873188__root"};
+export var classes = {"root":"PickerContent212626143__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_ = "PickerContentAdditionalStep1074001824";
+var _namespace_ = "PickerContentAdditionalStep2597685663";
 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":"PickerContentAdditionalStep1074001824__root","titles":"PickerContentAdditionalStep1074001824__titles","suffix":"PickerContentAdditionalStep1074001824__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2597685663__root","titles":"PickerContentAdditionalStep2597685663__titles","suffix":"PickerContentAdditionalStep2597685663__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerModal/PickerModal.tsx

@@ -1,13 +1,13 @@
 import { CustomModalLayoutProps, Modal, ModalProps } from '@wix/design-system';
 import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { PickerModalState } from '../../hooks';
-import { FiltersMap } from '@wix/bex-core';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { useReactive } from '@wix/bex-utils/react';
 import { PickerModalSplash } from '../PickerModalSplash';
 import { MultipleSelection } from '../MaxSelection';
 import { version as cairoVersion } from '../../version';
 
-export interface PickerModalProps<T, F extends FiltersMap = FiltersMap>
+export interface PickerModalProps<T, F extends FiltersMap = OptionalFiltersMap>
   extends Partial<CustomModalLayoutProps> {
   /**
    * Optional props to forward to `Modal` component
@@ -29,7 +29,7 @@ export interface PickerModalProps<T, F extends FiltersMap = FiltersMap>
   multiple?: MultipleSelection;
 }
 
-export function PickerModal<T, F extends FiltersMap = FiltersMap>(
+export function PickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
   props: PickerModalProps<T, F>,
 ) {
   const {

package/src/components/PickerStandalone/PickerStandalone.tsx

@@ -1,4 +1,4 @@
-import { FiltersMap } from '@wix/bex-core';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
 import { PickerStandaloneState } from '../../state';
 import {
   PickerStandaloneLayout,
@@ -16,8 +16,10 @@ import { observer } from 'mobx-react-lite';
 import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
 import { version as cairoVersion } from '../../version';
 
-export interface PickerStandaloneProps<T, F extends FiltersMap>
-  extends Partial<PickerStandaloneLayoutProps<T, F>> {
+export interface PickerStandaloneProps<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+> extends Partial<PickerStandaloneLayoutProps<T, F>> {
   dataHook?: string;
 
   /**
@@ -84,7 +86,7 @@ export interface PickerStandaloneProps<T, F extends FiltersMap>
   mobileHeight?: number | string;
 }
 
-export function _PickerStandalone<T, F extends FiltersMap = FiltersMap>(
+export function _PickerStandalone<T, F extends FiltersMap = OptionalFiltersMap>(
   props: PickerStandaloneProps<T, F>,
 ) {
   const {

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

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