@wix/patterns 1.477.0 → 1.479.0

package/src/components/MoreActions/MoreActionsIcon.tsx

@@ -6,30 +6,44 @@ import { MoreActionsBase } from './MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MoreActionsProps } from './MoreActionsProps';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
 export interface MoreActionsIconProps extends MoreActionsProps {}
 
 function _MoreActionsIcon(params: MoreActionsIconProps) {
   const { translate: t } = useWixPatternsContainer();
   const isBmHarmonyTheme = useBmHarmonyTheme();
+  const isMobile = useIsMobile();
+
+  const menu = (
+    <MoreActionsBase
+      {...params}
+      triggerElement={
+        <IconButton
+          dataHook="more-actions-popover-button"
+          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+        >
+          <More />
+        </IconButton>
+      }
+    />
+  );
 
   return (
     <Box
     // Box is needed to wrap the MoreActionsBase component to avoid extra gap between elements
     >
-      <Tooltip content={t('cairo.moreActions')} dataHook="more-actions-tooltip">
-        <MoreActionsBase
-          {...params}
-          triggerElement={
-            <IconButton
-              dataHook="more-actions-popover-button"
-              priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
-            >
-              <More />
-            </IconButton>
-          }
-        />
-      </Tooltip>
+      {/* On touch the tooltip opens on tap and stays open over the menu. */}
+      {isMobile ? (
+        menu
+      ) : (
+        <Tooltip
+          content={t('cairo.moreActions')}
+          dataHook="more-actions-tooltip"
+        >
+          {menu}
+        </Tooltip>
+      )}
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2263663574";
+var _namespace_ = "MultiBulkActionToolbar384117379";
 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":"MultiBulkActionToolbar2263663574__root","leftGroupWrapper":"MultiBulkActionToolbar2263663574__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2263663574__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2263663574__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar384117379__root","leftGroupWrapper":"MultiBulkActionToolbar384117379__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar384117379__selectedCountItem","selectedCountText":"MultiBulkActionToolbar384117379__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_ = "NestedTablePlaceholderStatesRow3021885873";
+var _namespace_ = "NestedTablePlaceholderStatesRow1641598245";
 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":"NestedTablePlaceholderStatesRow3021885873__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1641598245__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_ = "NestedTableRow3063588046";
+var _namespace_ = "NestedTableRow211762900";
 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":"NestedTableRow3063588046__root","firstLevel":"NestedTableRow3063588046__firstLevel","placeholder":"NestedTableRow3063588046__placeholder","parentHovered":"NestedTableRow3063588046__parentHovered"};
+export var classes = {"root":"NestedTableRow211762900__root","firstLevel":"NestedTableRow211762900__firstLevel","placeholder":"NestedTableRow211762900__placeholder","parentHovered":"NestedTableRow211762900__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_ = "MultipleDragOverlayEffect618182997";
+var _namespace_ = "MultipleDragOverlayEffect2219272161";
 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":"MultipleDragOverlayEffect618182997__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2219272161__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_ = "NestedTableDragAndDropRow1873712842";
+var _namespace_ = "NestedTableDragAndDropRow372186743";
 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":"NestedTableDragAndDropRow1873712842__root"};
+export var classes = {"root":"NestedTableDragAndDropRow372186743__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -54,26 +54,30 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
     : 'medium';
 
   const learnMoreSuffix = learnMore ? (
-    <TextButton
-      dataHook="subtitle-learn-more-cta"
-      as="a"
-      rel="noopener"
-      target="_blank"
-      href={learnMore.url}
-      size={learnMoreSize}
-      style={{ marginLeft: '6px' }}
-      onClick={() => {
-        bi?.reportBI(
-          withoutDefaults(cairoPageCtaClicked)({
-            location: 'Collection Page Header',
-            ctaType: 'link',
-            ctaName: 'Learn more',
-          }),
-        );
-      }}
-    >
-      {learnMore.label ?? t('cairo.subtitle.learnMore')}
-    </TextButton>
+    <>
+      {/* A space, unlike a margin, is dropped when the link wraps to its own line. */}
+      {isMobile && ' '}
+      <TextButton
+        dataHook="subtitle-learn-more-cta"
+        as="a"
+        rel="noopener"
+        target="_blank"
+        href={learnMore.url}
+        size={learnMoreSize}
+        style={isMobile ? undefined : { marginLeft: '6px' }}
+        onClick={() => {
+          bi?.reportBI(
+            withoutDefaults(cairoPageCtaClicked)({
+              location: 'Collection Page Header',
+              ctaType: 'link',
+              ctaName: 'Learn more',
+            }),
+          );
+        }}
+      >
+        {learnMore.label ?? t('cairo.subtitle.learnMore')}
+      </TextButton>
+    </>
   ) : undefined;
 
   return (

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent4211740827";
+var _namespace_ = "PickerContent1175207613";
 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":"PickerContent4211740827__root"};
+export var classes = {"root":"PickerContent1175207613__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_ = "PickerContentAdditionalStep2786568281";
+var _namespace_ = "PickerContentAdditionalStep2191253003";
 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":"PickerContentAdditionalStep2786568281__root","titles":"PickerContentAdditionalStep2786568281__titles","suffix":"PickerContentAdditionalStep2786568281__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2191253003__root","titles":"PickerContentAdditionalStep2191253003__titles","suffix":"PickerContentAdditionalStep2191253003__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_ = "PickerTableListItem4175680981";
+var _namespace_ = "PickerTableListItem827075912";
 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":"PickerTableListItem4175680981__root"};
+export var classes = {"root":"PickerTableListItem827075912__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PrimaryActions/PrimaryActions.tsx

@@ -25,7 +25,6 @@ export function PrimaryActions({ subItems, ...props }: ActionSubitem) {
 
   return (
     <ActionControl
-      size={isMobile ? 'small' : undefined}
       fullWidth={isMobile}
       onPopoverClick={() => {
         reportBi(

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -6,18 +6,20 @@ import {
   IconElement,
   Tooltip,
 } from '@wix/design-system';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
   icon?: IconElement;
   state: ToolbarResponsivePriorityState;
   shouldShrink?: boolean;
+  disabledReason?: ReactNode;
 }>;
 
 const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
@@ -29,6 +31,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       children,
       state,
       shouldShrink: shouldShrinkProp = true,
+      disabledReason,
       ...rest
     } = props;
 
@@ -48,10 +51,13 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       ? shouldShrinkProp
       : state._shouldShrink;
 
+    const showDisabledReason = !!rest.disabled && !!disabledReason;
+    const tooltipSuffix = showDisabledReason ? 'disabled-tooltip' : 'tooltip';
+
     return shouldShrink ? (
       <Tooltip
-        content={children}
-        dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
+        content={showDisabledReason ? disabledReason : children}
+        dataHook={dataHook ? `${dataHook}-${tooltipSuffix}` : undefined}
       >
         <Box direction="vertical" minWidth="30px">
           <IconButton
@@ -67,18 +73,24 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       </Tooltip>
     ) : (
       <div style={{ display: 'contents' }}>
-        <Button
-          ref={ref}
-          as={as}
-          {...rest}
-          dataHook={dataHook}
-          size={sizes.small}
-          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
-          prefixIcon={icon}
-          suffixIcon={button.suffix}
+        <DisabledTooltip
+          content={disabledReason}
+          disabled={!showDisabledReason}
+          dataHook={dataHook ? `${dataHook}-disabled-tooltip` : undefined}
         >
-          {children}
-        </Button>
+          <Button
+            ref={ref}
+            as={as}
+            {...rest}
+            dataHook={dataHook}
+            size={sizes.small}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+            prefixIcon={icon}
+            suffixIcon={button.suffix}
+          >
+            {children}
+          </Button>
+        </DisabledTooltip>
       </div>
     );
   },

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -119,6 +119,7 @@ export const schemaFieldManagement = (
               namePlaceholder:
                 ft.namePlaceholder ??
                 (standard ? t(standard.namePlaceholderKey) : undefined),
+              keyBase: ft.keyBase,
               subtitle: ft.subtitle,
               group: ft.group,
               supportsPii: ft.supportsPii,
@@ -137,6 +138,7 @@ export const schemaFieldManagement = (
                     id: def.type,
                     label: def.display.label,
                     namePlaceholder: def.fieldModal.namePlaceholder,
+                    keyBase: def.fieldModal.keyBase,
                     subtitle: def.fieldModal.subtitle,
                     group: def.fieldModal.group,
                     supportsPii: def.fieldModal.supportsPii,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3537146738";
+var _namespace_ = "ScrollableContent3642999256";
 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":"ScrollableContent3537146738__root"};
+export var classes = {"root":"ScrollableContent3642999256__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_ = "SetupWidget3967195853";
+var _namespace_ = "SetupWidget262102085";
 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":"SetupWidget3967195853__root","row":"SetupWidget3967195853__row","completedCta":"SetupWidget3967195853__completedCta","secondaryCta":"SetupWidget3967195853__secondaryCta","card":"SetupWidget3967195853__card","stepIcon":"SetupWidget3967195853__stepIcon","chevron":"SetupWidget3967195853__chevron","chevronDisabled":"SetupWidget3967195853__chevronDisabled","inProgressLabel":"SetupWidget3967195853__inProgressLabel"};
+export var classes = {"root":"SetupWidget262102085__root","row":"SetupWidget262102085__row","completedCta":"SetupWidget262102085__completedCta","secondaryCta":"SetupWidget262102085__secondaryCta","card":"SetupWidget262102085__card","stepIcon":"SetupWidget262102085__stepIcon","chevron":"SetupWidget262102085__chevron","chevronDisabled":"SetupWidget262102085__chevronDisabled","inProgressLabel":"SetupWidget262102085__inProgressLabel"};
 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_ = "SkeletonCard458393364";
+var _namespace_ = "SkeletonCard3267458281";
 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":"SkeletonCard458393364__root","headerLoading":"SkeletonCard458393364__headerLoading"};
+export var classes = {"root":"SkeletonCard3267458281__root","headerLoading":"SkeletonCard3267458281__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_ = "SlidingModal1507443182";
+var _namespace_ = "SlidingModal1667727069";
 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":"SlidingModal1507443182__root"};
+export var classes = {"root":"SlidingModal1667727069__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader288742649";
+var _namespace_ = "AddFieldColumnHeader1693895278";
 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":"AddFieldColumnHeader288742649__root","anchorLayer":"AddFieldColumnHeader288742649__anchorLayer","popover":"AddFieldColumnHeader288742649__popover","title":"AddFieldColumnHeader288742649__title","hoverBridge":"AddFieldColumnHeader288742649__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader1693895278__root","anchorLayer":"AddFieldColumnHeader1693895278__anchorLayer","popover":"AddFieldColumnHeader1693895278__popover","title":"AddFieldColumnHeader1693895278__title","hoverBridge":"AddFieldColumnHeader1693895278__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter51155736";
+var _namespace_ = "TabsFilter3044581964";
 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":"TabsFilter51155736__root","titleBox":"TabsFilter51155736__titleBox"};
+export var classes = {"root":"TabsFilter3044581964__root","titleBox":"TabsFilter3044581964__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -110,7 +110,8 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     mobilePopoverProps,
   } = props;
   const { itemKey, itemName } = filter;
-  const size = useBmHarmonyTheme() ? 'small' : undefined;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const size = isBmHarmonyTheme ? 'small' : undefined;
 
   const table = useToolbarCollectionContext();
   const filterAllValueTotal = useFilterValueTotalState({
@@ -245,7 +246,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         }}
         dataHook="collection-tabs-filter"
         width="100%"
-        height={60}
+        height={isBmHarmonyTheme ? undefined : 60}
         direction="vertical"
         verticalAlign="middle"
         flexGrow={1}

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal1644198419";
+var _namespace_ = "ManageTagsModal3175779444";
 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":"ManageTagsModal1644198419__root"};
+export var classes = {"root":"ManageTagsModal3175779444__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -159,7 +159,7 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
    * Accepts a [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate) component,
    * or a function that accepts the following parameters:
    * - `hasAvailableItems`: Indicates whether other items may be shown using other filter or search parameters.
-   * - `query`: An instance of [`ComputedQuery`](./?path=/story/common-models--computedquery) representing the query that resulted in the empty state.
+   * - `query`: An instance of [`ComputedQuery`](./?path=/story/common-types--computedquery) representing the query that resulted in the empty state.
    * The function should return [`CollectionNoResultsState`](./?path=/story/features-display-empty-states--collectionnoresultsstate).
    * @external
    * @overrideType [CollectionNoResultsState](./?path=/story/features-display-empty-states--collectionnoresultsstate)
@@ -249,8 +249,8 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
   dragAndDropReorderModeToolbar?: ReorderModeToolbarElement | null;
 
   /**
-   * Adds functionality to allow visitors to create choose which columns to display and in what order. Accepts a [CustomColumns](./?path=/story/features-display--customcolumns) component.
-   * @overrideType [CustomColumns](./?path=/story/features-display--customcolumns)
+   * Adds functionality to allow visitors to create choose which columns to display and in what order. Accepts a [CustomColumns](./?path=/story/features-display-custom-columns--customcolumns) component.
+   * @overrideType [CustomColumns](./?path=/story/features-display-custom-columns--customcolumns)
    * @external
    */
   customColumns?: CustomColumnsElement | null;
@@ -265,15 +265,15 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
 
   /**
    * Adds functionality for a primary action button in the toolbar.
-   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button) component.
+   * Accepts a [PrimaryActionButton](./?path=/story/features-actions-primaryactions--primaryactionbutton) component.
    * @external
-   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primary-actions--primary-action-button)
+   * @overrideType [PrimaryActionButton](./?path=/story/features-actions-primaryactions--primaryactionbutton)
    */
   primaryActionButton?: PrimaryActionButtonElement;
 
   /**
    * Secondary buttons w/o PopoverMenu component to be rendered on the toolbar.
-   * @overrideType [ToolbarSecondaryActions](./?path=/story/features-actions-secondary-actions--toolbar-secondary-actions)
+   * @overrideType [ToolbarSecondaryActions](./?path=/story/features-actions-secondaryactions--toolbarsecondaryactions)
    * @external
    */
   secondaryActions?: ToolbarSecondaryActionsElement;
@@ -340,6 +340,7 @@ export function ToolbarCollection<T, F extends FiltersMap>(
     search,
     children,
     tableGridSwitchButton,
+    multiLevelSorting,
     exportButton,
     importButton,
     primaryActionButton,
@@ -375,6 +376,7 @@ export function ToolbarCollection<T, F extends FiltersMap>(
         dragAndDropReorderModeToolbar={dragAndDropReorderModeToolbar}
         extraToolbar={extraToolbar}
         tableGridSwitchButton={tableGridSwitchButton}
+        multiLevelSorting={multiLevelSorting}
         exportButton={exportButton}
         importButton={importButton}
         primaryActionButton={primaryActionButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1886428726";
+var _namespace_ = "ToolbarItem1383866179";
 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":"ToolbarItem1886428726__root"};
+export var classes = {"root":"ToolbarItem1383866179__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_ = "ToolbarItemBox3643222044";
+var _namespace_ = "ToolbarItemBox4062523943";
 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":"ToolbarItemBox3643222044__root"};
+export var classes = {"root":"ToolbarItemBox4062523943__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_ = "common1128199244";
+var _namespace_ = "common1283969069";
 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":"common1128199244__root","column":"common1128199244__column","fullHeight":"common1128199244__fullHeight"};
+export var classes = {"root":"common1283969069__root","column":"common1283969069__column","fullHeight":"common1283969069__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};