@wix/patterns 1.263.0 → 1.265.0

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -173,7 +173,7 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     stickySelectionColumn,
     hideBulkSelectionCheckbox,
     maxSelection,
-    showTitleBar = true,
+    showTitleBar = !tableState.toolbar.container.isPanelLayout,
     BodyElementType,
     isApplyColumnWidthStyle,
     rowVerticalPadding,
@@ -202,8 +202,6 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
 
   const sticky = stickyProp ?? scrollableContentRef?.current != null;
 
-  const { collection, internalScroll } = state;
-
   const customColumns =
     props.customColumns ||
     (dataExtensionType && <dataExtensionType.CustomColumns />);
@@ -219,6 +217,8 @@ function _CollectionTable<T, F extends FiltersMap = FiltersMap>(
     isUsingTableVirtualization: !!BodyElementType,
   });
 
+  const { collection, internalScroll } = state;
+
   const { selectedOrderedColumnsOrAll } = state;
 
   const { bulkSelect, query } = collection;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1743802385";
+var _namespace_ = "CollectionToolbar1939736022";
 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":"CollectionToolbar1743802385__root","left":"CollectionToolbar1743802385__left","right":"CollectionToolbar1743802385__right","fullWidth":"CollectionToolbar1743802385__fullWidth"};
+export var classes = {"root":"CollectionToolbar1939736022__root","left":"CollectionToolbar1939736022__left","right":"CollectionToolbar1939736022__right","fullWidth":"CollectionToolbar1939736022__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -88,6 +88,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     collection,
     featuredComponents,
     toolbar: { responsive },
+    container: { isPanelLayout },
   } = state;
 
   const addDataHookToMoreActions = () => {
@@ -96,7 +97,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     );
   };
 
-  const searchElement = isValidElement(search) ? (
+  const searchElement = isPanelLayout ? undefined : isValidElement(search) ? (
     (React.cloneElement(
       search as CollectionSearchElement,
       {},
@@ -110,11 +111,13 @@ function _CollectionToolbar<T, F extends FiltersMap>(
   const MoreFiltersButton = featuredComponents.moreFiltersButton
     .value as PartialFunctionComponent as FunctionComponent | null;
 
-  const viewsToolbarItem = views && (
-    <ToolbarItemBox dataHook="collection-table-toolbar-views-item">
-      {views}
-    </ToolbarItemBox>
-  );
+  const viewsToolbarItem = isPanelLayout
+    ? undefined
+    : views && (
+        <ToolbarItemBox dataHook="collection-table-toolbar-views-item">
+          {views}
+        </ToolbarItemBox>
+      );
 
   const CollectionToolbarFilters =
     state.tagsCollectionState?.components.CollectionToolbarFilters ||
@@ -291,7 +294,11 @@ function _CollectionToolbar<T, F extends FiltersMap>(
   return (
     <CollectionProvider value={collection}>
       <Box direction="vertical" dataHook={dataHook}>
-        <Box minHeight={title?.props.subtitle ? '78px' : '60px'}>
+        <Box
+          minHeight={
+            isPanelLayout ? '48px' : title?.props.subtitle ? '78px' : '60px'
+          }
+        >
           {state.isReorderModeToolbarVisible ? (
             dragAndDropReorderModeToolbar
           ) : (

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1952909110";
+var _namespace_ = "SearchOrCustomFilter1499759097";
 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":"SearchOrCustomFilter1952909110__root","search":"SearchOrCustomFilter1952909110__search","searchMobile":"SearchOrCustomFilter1952909110__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1499759097__root","search":"SearchOrCustomFilter1499759097__search","searchMobile":"SearchOrCustomFilter1499759097__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,4 +1,4 @@
-import { SidePanel, Box } from '@wix/design-system';
+import { Box, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
 import { CustomColumnsState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
@@ -10,6 +10,7 @@ import { CustomColumnsNoResults } from './CustomColumnsNoResults';
 import { useRafRender } from '../../hooks/useRafRender';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { ScrollableContent } from '../ScrollableContent';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsState<T, F>;
@@ -39,10 +40,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const shouldShowSearch = isUsingDataExtension || totalColumns > 5;
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="custom-columns-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         table.reportBi(
           withoutDefaults(cairoFiltersPanelUsed)({
             isOpened: false,
@@ -86,7 +87,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         ?.CustomColumnsAddCustomFieldCTAButton && (
         <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
       )}
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

package/src/components/CustomFieldsPanel/CustomFieldsPanel.tsx

@@ -9,6 +9,7 @@ import { CustomFieldsList } from './CustomFieldsList';
 import { AddCustomFieldCTAButton } from './AddCustomFieldCTAButton';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface CustomFieldsPanelProps {
   state: CustomFieldsPanelState;
@@ -25,10 +26,10 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
   }
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="custom-fields-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         state.reportBi(
           withoutDefaults(cairoFiltersPanelUsed)({
             isOpened: false,
@@ -61,7 +62,7 @@ export function _CustomFieldsPanel({ state }: CustomFieldsPanelProps) {
           />
         </Box>
       </Box>
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

package/src/components/DateRangeFilter/DateRangeFilter.tsx

@@ -16,6 +16,7 @@ import {
   renderPresetToolbarTag,
 } from '@wix/bex-core';
 import { useDateRangeFilterState } from '../../hooks';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface DateRangeFilterProps
   extends FilterProps<RangeItem<Date>>,
@@ -52,6 +53,9 @@ function _DateRangeFilter(props: DateRangeFilterProps) {
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
+  const {
+    radioGroup: { spacing },
+  } = usePatternsTheme();
   const state = useDateRangeFilterState({
     filter,
     filterByTime,
@@ -100,6 +104,7 @@ function _DateRangeFilter(props: DateRangeFilterProps) {
           onChange={(v) =>
             v && state.dateRangePicker.onPresetChanged(v.toString())
           }
+          spacing={spacing}
           dataHook="date-range-filter-group"
         >
           {Object.values(dateRangePreset).map((preset) =>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3491303079";
+var _namespace_ = "DragHandle173041026";
 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":"DragHandle3491303079__root"};
+export var classes = {"root":"DragHandle173041026__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_ = "EntityPagePlain2805193397";
+var _namespace_ = "EntityPagePlain3125617155";
 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":"EntityPagePlain2805193397__root"};
+export var classes = {"root":"EntityPagePlain3125617155__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_ = "Fade801000593";
+var _namespace_ = "Fade4066996397";
 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":"Fade801000593__root"};
+export var classes = {"root":"Fade4066996397__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FiltersPanel/FilterAccordionTitle.tsx

@@ -4,6 +4,7 @@ import { Filter } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { FilterProps } from '../../model';
 import { FilterToolbarState } from '../../providers';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface FilterAccordionTitleProps<V> {
   state: FilterToolbarState;
@@ -17,11 +18,14 @@ function _FilterAccordionTitle<V>(props: FilterAccordionTitleProps<V>) {
 
   const filter = state.getPendingFilter(props.filter);
 
+  const { sizes } = usePatternsTheme();
+
   return (
     <Text
       dataHook={`accordion-item-title-${filter.name}`}
       ellipsis
       weight="normal"
+      size={sizes.medium}
     >
       {`${accordionItemProps?.label ?? ''}${
         filter.size > 0 ? ` (${filter.size})` : ''

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -1,9 +1,4 @@
-import {
-  Accordion,
-  SidePanel,
-  SidePanelProps,
-  WixStyleReactDefaultsOverrideProvider,
-} from '@wix/design-system';
+import { Accordion, SidePanel, SidePanelProps, WixStyleReactDefaultsOverrideProvider } from '@wix/design-system';
 import React, { useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
@@ -14,6 +9,7 @@ import { FiltersPanelState } from './FiltersPanelState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface FiltersPanelProps<T, F extends FiltersMap>
   extends Partial<SidePanelProps> {
@@ -61,9 +57,9 @@ function _FiltersPanel<T, F extends FiltersMap>(
   }
 
   let child = (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="filters-side-panel"
-      onCloseButtonClick={filtersPanelState.onCloseButtonClick}
+      onClose={filtersPanelState.onCloseButtonClick}
       width="100%"
       {...rest}
     >
@@ -97,7 +93,7 @@ function _FiltersPanel<T, F extends FiltersMap>(
         />
       </SidePanel.Footer>
       {children}
-    </SidePanel>
+    </PatternsSidePanel>
   );
 
   child = (

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

@@ -261,7 +261,14 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
 
   return {
     isOpen: slidingModal.isOpen,
-    clickCloseButton: sidePanel.clickClose,
+    clickCloseButton: async () => {
+      if (await sidePanel.isCloseButtonExists()) {
+        return sidePanel.clickClose();
+      }
+      if (await sidePanel.isBackButtonExists()) {
+        return sidePanel.clickBack();
+      }
+    },
     getTitleText: sidePanel.getTitleText,
     selectFilterOptions,
     selectFilterRandomOptions,

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

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

package/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { CollectionStateProps } from '../collectionStateProps';
 import { FiltersMap } from '@wix/bex-core';
 import { InfiniteScrollLoaderBase } from './InfiniteScrollLoaderBase';
+import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 
 export interface InfiniteScrollLoaderProps<T, F extends FiltersMap>
   extends CollectionStateProps<T, F>,
@@ -15,10 +16,11 @@ export const InfiniteScrollLoader = observer(function Table<
   T,
   F extends FiltersMap,
 >({ state, targetRef, ...rest }: InfiniteScrollLoaderProps<T, F>) {
+  const { loader } = usePatternsTheme();
   return (
     <InfiniteScrollLoaderBase state={state} targetRef={targetRef}>
       <Box align="center" padding="large">
-        <Loader {...rest} />
+        <Loader size={loader?.size} {...rest} />
       </Box>
     </InfiniteScrollLoaderBase>
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1473031221";
+var _namespace_ = "InputOverflow2116414656";
 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":"InputOverflow1473031221__root"};
+export var classes = {"root":"InputOverflow2116414656__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_ = "LoadingRow3543269352";
+var _namespace_ = "LoadingRow3617053642";
 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":"LoadingRow3543269352__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3543269352__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3617053642__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3617053642__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_ = "MaxHeightText3576219268";
+var _namespace_ = "MaxHeightText4075989554";
 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":"MaxHeightText3576219268__root"};
+export var classes = {"root":"MaxHeightText4075989554__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_ = "MaxLines1857967116";
+var _namespace_ = "MaxLines483284732";
 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":"MaxLines1857967116__root"};
+export var classes = {"root":"MaxLines483284732__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_ = "MultiBulkActionToolbar1719938158";
+var _namespace_ = "MultiBulkActionToolbar206332739";
 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":"MultiBulkActionToolbar1719938158__root"};
+export var classes = {"root":"MultiBulkActionToolbar206332739__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiLevelSorting/MultiLevelSortingCTAButton.tsx

@@ -19,7 +19,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
   const { state } = props;
   const {
     panels,
-    container: { translate: t },
+    container: { translate: t, isPanelLayout },
     toolbar: { responsive },
   } = state;
 
@@ -49,6 +49,7 @@ export function _MultiLevelSortingCTAButton<T, F extends FiltersMap>(
     >
       <ResponsiveButton
         state={responsive.actions}
+        shouldShrink={!isPanelLayout}
         icon={<ChangeOrderSmall />}
         dataHook="multi-level-sorting-button"
         onClick={() => {

package/src/components/MultiLevelSortingPanel/MultiLevelSortingPanel.tsx

@@ -15,6 +15,7 @@ import { ToolbarCollectionState } from '../../state';
 import { useRafRender } from '../../hooks/useRafRender';
 import { MultiLevelSortingList } from './MultiLevelSortingList';
 import { ScrollableContent } from '../ScrollableContent';
+import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
 export interface MultiLevelSortingPanelProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -34,10 +35,10 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
   }
 
   return (
-    <SidePanel
+    <PatternsSidePanel
       dataHook="multi-level-sorting-panel"
       width="100%"
-      onCloseButtonClick={() => {
+      onClose={() => {
         multiLevelSorting.reportSidePanelClose();
         table.sidePanel.close();
       }}
@@ -87,7 +88,7 @@ export function _MultiLevelSortingPanel<T, F extends FiltersMap>(
           </Box>
         </Box>
       </Tooltip>
-    </SidePanel>
+    </PatternsSidePanel>
   );
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2484428981";
+var _namespace_ = "NestedTablePlaceholderStatesRow4070074949";
 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":"NestedTablePlaceholderStatesRow2484428981__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow4070074949__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_ = "NestedTableRow2222993695";
+var _namespace_ = "NestedTableRow1332964938";
 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":"NestedTableRow2222993695__root","firstLevel":"NestedTableRow2222993695__firstLevel","placeholder":"NestedTableRow2222993695__placeholder","parentHovered":"NestedTableRow2222993695__parentHovered"};
+export var classes = {"root":"NestedTableRow1332964938__root","firstLevel":"NestedTableRow1332964938__firstLevel","placeholder":"NestedTableRow1332964938__placeholder","parentHovered":"NestedTableRow1332964938__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -70,7 +70,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
     filters,
     emptyState,
     noResultsState,
-    showTitleBar = true,
+    showTitleBar = !wrapperState.container.isPanelLayout,
     horizontalScroll = true,
     rowHeight,
     estimatedRowHeight,

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

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