@wix/patterns 1.261.0 → 1.263.0

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

@@ -21,13 +21,20 @@ export const CollectionViewsDropdownUniDriver = (
   const getRenameViewModal = () =>
     CollectionRenameViewModalUniDriver(base, body);
 
-  const getDropdownLayoutBase = async () =>
-    body.$(
-      `[data-content-element="${await viewsDropdownDriverBase().attr(
-        'data-content-hook',
-      )}"]`,
+  const getDropdownLayoutBase = async () => {
+    const contentDataHook = await viewsDropdownDriverBase().attr(
+      'data-content-hook',
     );
 
+    if (contentDataHook) {
+      return body.$(`[data-content-element="${contentDataHook}"]`);
+    }
+
+    const baseDataHook = await viewsDropdownDriverBase().attr('data-hook');
+
+    return body.$(`[data-hook="${baseDataHook}-content"]`);
+  };
+
   const viewsDropdownDriver = () =>
     DropdownUniDriver(viewsDropdownDriverBase(), body);
 
@@ -108,7 +115,7 @@ export const CollectionViewsDropdownUniDriver = (
       viewsDropdownDriverBase().$$('[data-hook="view-item"]').text(),
     /** Get array popover content , like empty state */
     getViewsPopoverContent: async () =>
-      viewsDropdownDriverBase().$$('[data-hook="popover-content"]').text(),
+      viewsDropdownDriver().dropdownLayoutDriver.optionsContent(),
     /** Indicates whether the dropdown is open */
     isOpen: () => viewsDropdownDriver().dropdownLayoutDriver.isShown(),
     /** Get the placeholder test of the dropdown */

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -25,9 +25,11 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
       onClear={() => {
         state.setSearchValue('');
       }}
-      placeholder={t('cairo.table.custom-columns.dragAndDrop.search-placeholder')}
+      placeholder={t(
+        'cairo.table.custom-columns.dragAndDrop.search-placeholder',
+      )}
     />
   );
 }
 
-export const CustomColumnsSearch = observer(_CustomColumnsSearch); 
+export const CustomColumnsSearch = observer(_CustomColumnsSearch);

package/src/components/CustomFieldsWidget/CustomFieldsViewWidgetSection.tsx

@@ -135,7 +135,13 @@ const _CustomFieldsViewWidgetSection = ({
             gridTemplateColumns="repeat(auto-fill, minmax(248px, 1fr))"
           >
             {customFields.map((field) => (
-              <Box key={field.id} flexGrow={1} flexShrink={1} flexBasis={0} minWidth="248px">
+              <Box
+                key={field.id}
+                flexGrow={1}
+                flexShrink={1}
+                flexBasis={0}
+                minWidth="248px"
+              >
                 <CustomFieldCell
                   key={field.id}
                   field={field}

package/src/components/DateRangePicker/DateRangeFilter.uni.driver.ts

@@ -8,6 +8,9 @@ import {
   TimeInputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
+import { DatePickerUniDriver as DatePickerUniDriverAsync } from '../../unidriver/DatePicker.uni.driver';
+import { UniDriverFactory } from '../uniDriverFactory';
+import { DatePickerUniDriver as DatePickerUniDriverFactory } from '@wix/design-system/dist/types/DatePicker/DatePicker.uni.driver';
 
 export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   const getDatePickersContainer = () =>
@@ -18,8 +21,18 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   const getTimeInputBase = (picker: 'from' | 'to') =>
     base.$(`[data-hook="date-range-picker-time-${picker}"]`);
 
-  const getDatePicker = (picker: 'from' | 'to') =>
-    DatePickerUniDriver(getDatePickerBase(picker), body);
+  const getDatePickerSync = (picker: 'from' | 'to') =>
+    (DatePickerUniDriver as UniDriverFactory<DatePickerUniDriverFactory>)(
+      getDatePickerBase(picker),
+      body,
+      {
+        dataHook: `date-range-picker-${picker}`,
+      },
+    );
+
+  const getDatePicker = async (picker: 'from' | 'to') =>
+    DatePickerUniDriverAsync(getDatePickerBase(picker), body);
+
   const getTimeInput = (picker: 'from' | 'to') =>
     TimeInputUniDriver(getTimeInputBase(picker), body);
 
@@ -31,14 +44,14 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
   const openDatePicker = async (
-    datePicker: ReturnType<typeof getDatePicker>,
+    datePicker: ReturnType<typeof getDatePickerSync>,
   ) => {
     !(await datePicker.calendarDriver.exists()) &&
       (await datePicker.driver.open());
   };
   const chooseRandomDates = async () => {
-    const dateFrom = getDatePicker('from');
-    const dateTo = getDatePicker('to');
+    const dateFrom = await getDatePicker('from');
+    const dateTo = await getDatePicker('to');
     await openDatePicker(dateFrom);
     await dateFrom.calendarDriver.clickOnNthDay(1);
     await dateTo.calendarDriver.clickOnNthDay(2);
@@ -49,7 +62,7 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   };
 
   const chooseDate = async (picker: 'from' | 'to', date: Date) => {
-    const datePicker = getDatePicker(picker);
+    const datePicker = await getDatePicker(picker);
     await openDatePicker(datePicker);
     await datePicker.calendarDriver.clickDay(date);
     return datePicker;
@@ -91,7 +104,7 @@ export function DateRangePickerUniDriver(base: UniDriver, body: UniDriver) {
   return {
     ...baseUniDriverFactory(base),
     _getRadioGroup: getRadioGroup,
-    getDatePicker,
+    getDatePicker: getDatePickerSync,
     getDatePickersContainer,
     getTimeInput,
     isTimeSelected: async (picker: 'from' | 'to') => {

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

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

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -21,8 +21,16 @@ export const CollectionDropdownFilterUniDriver = <
     return optionsDriver.dropdownLayoutDriver.options();
   };
 
-  const getDropdownLayoutBase = async () =>
-    body.$(`[data-content-element="${await base.attr('data-content-hook')}"]`);
+  const getDropdownLayoutBase = async () => {
+    const contentDataHook = await base.attr('data-content-hook');
+    if (contentDataHook) {
+      return body.$(`[data-content-element="${contentDataHook}"]`);
+    }
+
+    const baseDataHook = await base.attr('data-hook');
+
+    return body.$(`[data-hook="${baseDataHook}-content"]`);
+  };
 
   const getOptions = async (ids: string[]) => {
     return ids.map(async (id) => {
@@ -174,7 +182,10 @@ export const CollectionDropdownFilterUniDriver = <
       const { page } = element;
 
       const contentHook = await base.attr('data-content-hook');
-      const contentSelector = `[data-content-element="${contentHook}"]`;
+      const baseDataHook = await base.attr('data-hook');
+      const contentSelector = contentHook
+        ? `[data-content-element="${contentHook}"]`
+        : `[data-hook="${baseDataHook}-content"]`;
 
       // puppeteer
       if (page?.evaluate) {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1244331438";
+var _namespace_ = "EntityPagePlain2805193397";
 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":"EntityPagePlain1244331438__root"};
+export var classes = {"root":"EntityPagePlain2805193397__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_ = "Fade1822755885";
+var _namespace_ = "Fade801000593";
 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":"Fade1822755885__root"};
+export var classes = {"root":"Fade801000593__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Grid/useGridItemActions.tsx

@@ -7,6 +7,7 @@ import {
   CardGalleryItemProps,
   IconButton,
   PopoverMenu,
+  PopoverMenuItemProps,
 } from '@wix/design-system';
 import { More } from '@wix/wix-ui-icons-common';
 import {
@@ -124,12 +125,13 @@ export function useGridItemActions<T, F extends FiltersMap>(
             return <PopoverMenu.Divider key={index} />;
           }
 
-          const { icon: prefixIcon, ...rest } = action;
+          const { icon: prefixIcon, skin, ...rest } = action;
 
           return (
             <PopoverMenu.MenuItem
               key={index}
               prefixIcon={prefixIcon}
+              skin={skin as PopoverMenuItemProps['skin']}
               {...rest}
             />
           );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading322658514";
+var _namespace_ = "Heading3921377375";
 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":"Heading322658514__root"};
+export var classes = {"root":"Heading3921377375__root"};
 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_ = "InputOverflow2740037672";
+var _namespace_ = "InputOverflow1473031221";
 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":"InputOverflow2740037672__root"};
+export var classes = {"root":"InputOverflow1473031221__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/Kanban.tsx

@@ -39,7 +39,6 @@ function _Kanban<C, S, F extends FiltersMap>(props: KanbanProps<C, S, F>) {
     };
   }, [events]);
 
-
   const stages = useMemo(() => {
     return props.state.stages;
   }, [props.state.stages]);

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

@@ -100,8 +100,8 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
         const { page } = (await body
           .$(`[data-hook="${scrollableElementDataHook}"]`)
           .getNative()) as {
-            page?: SledPage['page'];
-          };
+          page?: SledPage['page'];
+        };
         // puppeteer
         if (page?.evaluate) {
           await page.evaluate((_dataHook: string) => {

package/src/components/Kanban/KanbanProps.ts

@@ -17,7 +17,7 @@ interface KanbanItemField<T> {
 
 export interface KanbanBaseProps<T, S, F extends FiltersMap>
   extends ToolbarBaseProps,
-  DragAndDropCategoriesProps<{}> {
+    DragAndDropCategoriesProps<{}> {
   dataHook?: string;
   state: KanbanState<T, S, F>;
   filters?: CollectionToolbarFiltersElement;

package/src/components/Kanban/useCardActions.tsx

@@ -4,7 +4,11 @@ import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { FiltersMap } from '../../exports/core';
 import { KanbanBaseProps, KanbanState } from '../../exports/alpha';
 import { ItemActionsState } from '../../state';
-import { IconButton, PopoverMenu } from '@wix/design-system';
+import {
+  IconButton,
+  PopoverMenu,
+  PopoverMenuItemProps,
+} from '@wix/design-system';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
 import { MoreSmall } from '@wix/wix-ui-icons-common';
 import {
@@ -115,7 +119,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
       };
     }
 
-    return () => { };
+    return () => {};
   }, [stageKey]);
 
   let secondaryActions: React.ReactNode | null = null;
@@ -158,7 +162,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
           if (action.divider) {
             return <PopoverMenu.Divider key={index} />;
           }
-          const { icon: prefixIcon, ...rest } = action;
+          const { icon: prefixIcon, skin, ...rest } = action;
           return (
             <PopoverMenu.MenuItem
               key={index}
@@ -168,6 +172,7 @@ export function useCardActions<T, S, F extends FiltersMap>({
                 action.dataHook ||
                 `kanban-card-more-actions-item-${stageKey}-${cardKey}-${index}`
               }
+              skin={skin as PopoverMenuItemProps['skin']}
               {...rest}
             />
           );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2032827896";
+var _namespace_ = "LoadingRow3543269352";
 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":"LoadingRow2032827896__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2032827896__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3543269352__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3543269352__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_ = "MaxHeightText2646176708";
+var _namespace_ = "MaxHeightText3576219268";
 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":"MaxHeightText2646176708__root"};
+export var classes = {"root":"MaxHeightText3576219268__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_ = "MaxLines1988150017";
+var _namespace_ = "MaxLines1857967116";
 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":"MaxLines1988150017__root"};
+export var classes = {"root":"MaxLines1857967116__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MoreActions/MoreActionsBase.tsx

@@ -91,7 +91,8 @@ function _MoreActionsBase(params: MoreActionsBaseProps) {
                 ? item({ pageState, container })
                 : item;
             const isTPA = 'type' in item && item.type === 'TPA';
-            const itemAdditionalInfo = 'biAdditionalInfo' in item ? item.biAdditionalInfo : undefined;
+            const itemAdditionalInfo =
+              'biAdditionalInfo' in item ? item.biAdditionalInfo : undefined;
 
             return (
               <PopoverMenu.MenuItem

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

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

package/src/components/MultiLevelSortingPanel/MultiLevelSortingColumnSelect.tsx

@@ -13,7 +13,7 @@ export interface MultiLevelSortingColumnSelectProps<T, F extends FiltersMap> {
 export function _MultiLevelSortingColumnSelect<T, F extends FiltersMap>(
   props: MultiLevelSortingColumnSelectProps<T, F>,
 ) {
-  const { sortableColumn, state } = props;
+  const { sortableColumn, state, index } = props;
   const ref = useRef<HTMLInputElement>();
 
   const options = state.getAvailableOptions(sortableColumn.columnId);
@@ -43,7 +43,7 @@ export function _MultiLevelSortingColumnSelect<T, F extends FiltersMap>(
           ref.current = node;
         }
       }}
-      dataHook="multi-level-sorting-select-column"
+      dataHook={`multi-level-sorting-select-column-${index}`}
       onSelect={({ id }) => {
         state.replaceSort(sortableColumn.columnId, id as string);
       }}

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

@@ -1,9 +1,9 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
-  SidePanelUniDriver,
   AddItemUniDriver,
-  IconButtonUniDriver,
   DropdownUniDriver,
+  IconButtonUniDriver,
+  SidePanelUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { SlidingModalUniDriver } from '../SlidingModal/SlidingModal.uni.driver';
 import { DragAndDropUniDriver } from '../DragAndDrop/DragAndDrop.uni.driver';
@@ -49,14 +49,18 @@ export function MultiLevelSortingPanelUniDriver(
   };
   const changeColumnAtIndex = (index: number, columnIndex: number) => {
     const dropdown = DropdownUniDriver(
-      getItemAtBase(index).$(`[data-hook="multi-level-sorting-select-column"]`),
+      getItemAtBase(index).$(
+        `[data-hook="multi-level-sorting-select-column-${index}"]`,
+      ),
       body,
     );
     return dropdown.dropdownLayoutDriver.clickAtOption(columnIndex);
   };
   const getColumnAtIndex = (index: number) => {
     const dropdown = DropdownUniDriver(
-      getItemAtBase(index).$(`[data-hook="multi-level-sorting-select-column"]`),
+      getItemAtBase(index).$(
+        `[data-hook="multi-level-sorting-select-column-${index}"]`,
+      ),
       body,
     );
     return dropdown.dropdownLayoutDriver.getSelectedOptionId();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2904074660";
+var _namespace_ = "NestedTablePlaceholderStatesRow2484428981";
 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":"NestedTablePlaceholderStatesRow2904074660__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2484428981__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_ = "NestedTableRow3427171272";
+var _namespace_ = "NestedTableRow2222993695";
 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":"NestedTableRow3427171272__root","firstLevel":"NestedTableRow3427171272__firstLevel","placeholder":"NestedTableRow3427171272__placeholder","parentHovered":"NestedTableRow3427171272__parentHovered"};
+export var classes = {"root":"NestedTableRow2222993695__root","firstLevel":"NestedTableRow2222993695__firstLevel","placeholder":"NestedTableRow2222993695__placeholder","parentHovered":"NestedTableRow2222993695__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -173,6 +173,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
           noResultsState={noResultsState}
           errorState={errorState}
           rowVerticalPadding={rowVerticalPadding}
+          showTitleBar={showTitleBar}
         />
         <NestedTableContent key={`NestedTableContent_${key}`} state={state} />
       </MultiCollectionSupportProvider>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect3645946618";
+var _namespace_ = "MultipleDragOverlayEffect2289837617";
 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":"MultipleDragOverlayEffect3645946618__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2289837617__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_ = "NestedTableDragAndDropRow761657154";
+var _namespace_ = "NestedTableDragAndDropRow792121382";
 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":"NestedTableDragAndDropRow761657154__root"};
+export var classes = {"root":"NestedTableDragAndDropRow792121382__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_ = "PickerContent1221046944";
+var _namespace_ = "PickerContent1116485106";
 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":"PickerContent1221046944__root"};
+export var classes = {"root":"PickerContent1116485106__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_ = "PickerContentAdditionalStep3990396416";
+var _namespace_ = "PickerContentAdditionalStep3791920242";
 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":"PickerContentAdditionalStep3990396416__root","titles":"PickerContentAdditionalStep3990396416__titles","suffix":"PickerContentAdditionalStep3990396416__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3791920242__root","titles":"PickerContentAdditionalStep3791920242__titles","suffix":"PickerContentAdditionalStep3791920242__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};