@wix/patterns 1.348.0 → 1.350.0

package/src/components/CollectionSectionHeader/CollectionSectionHeaderActionBar.tsx

@@ -1,24 +1,35 @@
-import { Box, TextButton } from '@wix/design-system';
+import { Box, IconButton, TextButton } from '@wix/design-system';
 import React from 'react';
 import { Section } from './CollectionSectionHeader.types';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { wixPatternsSectionHeaderPrimaryActionClicked } from '@wix/bex-core/bi';
+import { withoutDefaults } from '@wix/bex-core';
+import {
+  wixPatternsSectionHeaderPrimaryActionClicked,
+  cairoSectionCtaClicked,
+} from '@wix/bex-core/bi';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
 
 export interface CollectionSectionHeaderActionBarProps {
   sectionId: string;
-  section: Section;
+  sectionIndex: number;
+  section: Section & { collapsed?: boolean };
   biComponentType: string;
+  collapsible?: boolean;
+  onToggleCollapse?: (sectionId: string) => void;
 }
 
 export const CollectionSectionHeaderActionBar = ({
   sectionId,
+  sectionIndex,
   section,
   biComponentType,
+  collapsible,
+  onToggleCollapse,
 }: CollectionSectionHeaderActionBarProps) => {
   const { toolbarBIReporter } = useToolbarCollectionContext();
-  const { primaryAction } = section;
+  const { primaryAction, collapsed } = section;
 
-  const handleClick = () => {
+  const handlePrimaryActionClick = () => {
     toolbarBIReporter.reportBi(
       wixPatternsSectionHeaderPrimaryActionClicked({
         sectionId,
@@ -26,22 +37,44 @@ export const CollectionSectionHeaderActionBar = ({
         componentType: biComponentType,
       }),
     );
-
     primaryAction?.onClick?.();
   };
 
+  const handleCollapseActionClick = () => {
+    toolbarBIReporter.reportBi(
+      withoutDefaults(cairoSectionCtaClicked)({
+        location: 'Section Toolbar',
+        sectionType: 'table',
+        ctaName: collapsed ? 'expand' : 'collapse',
+        sectionIndex,
+      } as {}),
+    );
+    onToggleCollapse?.(sectionId);
+  };
+
   return (
-    <Box direction="horizontal">
+    <Box direction="horizontal" gap="SP2" placeItems="center">
       {primaryAction && (
         <TextButton
           prefixIcon={primaryAction.prefixIcon}
           dataHook="collection-section-header-primary-action"
-          onClick={handleClick}
+          onClick={handlePrimaryActionClick}
           size="small"
         >
           {primaryAction.label}
         </TextButton>
       )}
+      {collapsible && (
+        <IconButton
+          size="tiny"
+          dataHook="collection-section-header-collapse-action"
+          skin="light"
+          priority="primary"
+          onClick={handleCollapseActionClick}
+        >
+          {collapsed ? <ChevronDown /> : <ChevronUp />}
+        </IconButton>
+      )}
     </Box>
   );
 };

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

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

package/src/components/CollectionTable/CollectionTable.tsx

@@ -116,6 +116,7 @@ export interface CollectionTableProps<T, F extends FiltersMap>
   extends CollectionTableBaseProps<T, F> {
   state: TableState<T, F>;
   keyedItems?: KeyedItem<T>[];
+  isUsingExpandCollapse?: boolean;
 }
 
 function _CollectionTable<T, F extends FiltersMap = FiltersMap>(

package/src/components/CollectionTable/useTableCollectionSyncProps.ts

@@ -14,6 +14,7 @@ import { isValidElement } from '../isValidElement';
 export function useTableCollectionSyncProps<T, F extends FiltersMap>(
   props: CollectionTableProps<T, F> & {
     isUsingTableVirtualization: boolean;
+    isUsingExpandCollapse?: boolean;
   },
 ) {
   const {
@@ -28,6 +29,7 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     checkboxTooltipContent,
     dataExtension,
     isUsingTableVirtualization,
+    isUsingExpandCollapse,
     dragAndDropReorderModeToolbar,
   } = props;
 
@@ -54,6 +56,7 @@ export function useTableCollectionSyncProps<T, F extends FiltersMap>(
     isUsingHorizontalScroll: props.horizontalScroll ?? false,
     isUsingFolders: false,
     isUsingTableVirtualization,
+    isUsingExpandCollapse,
   });
 
   useColumnsSyncProps({

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar676126279";
+var _namespace_ = "CollectionToolbar2480930612";
 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":"CollectionToolbar676126279__root","left":"CollectionToolbar676126279__left","right":"CollectionToolbar676126279__right","fullWidth":"CollectionToolbar676126279__fullWidth"};
+export var classes = {"root":"CollectionToolbar2480930612__root","left":"CollectionToolbar2480930612__left","right":"CollectionToolbar2480930612__right","fullWidth":"CollectionToolbar2480930612__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter585730892";
+var _namespace_ = "SearchOrCustomFilter2019873381";
 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":"SearchOrCustomFilter585730892__root","search":"SearchOrCustomFilter585730892__search","searchMobile":"SearchOrCustomFilter585730892__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2019873381__root","search":"SearchOrCustomFilter2019873381__search","searchMobile":"SearchOrCustomFilter2019873381__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_ = "AutoCompleteReadonly1974284090";
+var _namespace_ = "AutoCompleteReadonly553307374";
 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":"AutoCompleteReadonly1974284090__root"};
+export var classes = {"root":"AutoCompleteReadonly553307374__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.tsx

@@ -1,5 +1,9 @@
-import { AutoComplete, AutoCompleteProps, Input } from '@wix/design-system';
-import React, { useEffect, useMemo, useState } from 'react';
+import {
+  AutoComplete,
+  AutoCompleteProps,
+  Input,
+} from '@wix/design-system';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { AutoCompleteReadonlyState } from './AutoCompleteReadonlyState';
 import { classes, st } from './AutoCompleteReadonly.st.css.js';
@@ -12,6 +16,7 @@ export interface AutoCompleteReadonlyProps extends AutoCompleteProps {
 
 function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
   const { value, selectedLabel, dropdownWidth, clearInput } = props;
+  const autoCompleteRef = useRef<typeof AutoComplete.prototype | null>(null);
 
   const [state] = useState(
     () => props.state ?? new AutoCompleteReadonlyState(),
@@ -19,7 +24,8 @@ function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
 
   useEffect(() => {
     state.clearInput = clearInput;
-  }, [clearInput]);
+    state.autoCompleteRef = autoCompleteRef;
+  }, [clearInput, state]);
 
   const { disableEditing } = state;
 
@@ -29,13 +35,17 @@ function _AutoCompleteReadonly(props: AutoCompleteReadonlyProps) {
 
   return (
     <AutoComplete
+      ref={autoCompleteRef}
       {...props}
       dropdownWidth={dropdownWidth}
       onSelect={(option, sameOptionWasPicked) => {
         props.onSelect?.(option, sameOptionWasPicked);
         state.onSelect();
       }}
-      onFocus={state.onFocus}
+      onFocus={(e) => {
+        state.onFocus();
+        props.onFocus?.(e);
+      }}
       onBlur={(e) => {
         props.onBlur?.(e);
         state.onBlur();

package/src/components/CollectionViewsDropdown/AutoCompleteReadonlyState.ts

@@ -1,11 +1,14 @@
 import { action, makeObservable, observable } from 'mobx';
 import { EventEmitter } from 'events';
 import { TypedEmitter } from '@wix/bex-core/events';
+import React from 'react';
+import type { AutoComplete } from '@wix/design-system';
 
 export class AutoCompleteReadonlyState {
   disableEditing = true;
   isFocused = false;
   clearInput?: () => void;
+  autoCompleteRef?: React.RefObject<typeof AutoComplete.prototype | null>;
 
   readonly events = new EventEmitter() as TypedEmitter<{
     blur: () => unknown;
@@ -17,6 +20,13 @@ export class AutoCompleteReadonlyState {
     });
   }
 
+  focusInput = action(() => {
+    this.disableEditing = false;
+    setTimeout(() => {
+      this.autoCompleteRef?.current?.focus();
+    }, 0);
+  });
+
   onFocus = action(() => {
     this.isFocused = true;
     this.disableEditing = false;

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

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -116,14 +116,30 @@ function _ViewsDropdown<T, F extends FiltersMap>({
               : undefined
           }
           textOverflow="ellipsis"
-          prefix={<ViewsDropdownPrefix state={state} />}
+          prefix={
+            <div
+              data-hook="views-dropdown-prefix"
+              onClick={() => viewsState.autoCompleteReadonlyState.focusInput()}
+              style={{ cursor: 'pointer', display: 'inline-flex' }}
+            >
+              <ViewsDropdownPrefix state={state} />
+            </div>
+          }
           suffix={
             shouldShowTotal ? (
-              <Box className="total-count">
-                <Input.Affix>
-                  ({state.table.collection.result.total})
-                </Input.Affix>
-              </Box>
+              <div
+                data-hook="views-dropdown-suffix"
+                onClick={() =>
+                  viewsState.autoCompleteReadonlyState.focusInput()
+                }
+                style={{ cursor: 'pointer', display: 'inline-flex' }}
+              >
+                <Box className="total-count">
+                  <Input.Affix>
+                    ({state.table.collection.result.total})
+                  </Input.Affix>
+                </Box>
+              </div>
             ) : undefined
           }
           className={st(classes.root)}

package/src/components/CustomFieldsPanel/ManageFieldsPopoverMenu.tsx

@@ -1,6 +1,6 @@
 import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
 import React from 'react';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { ArchiveSmall, EditSmall, MoreSmall } from '@wix/wix-ui-icons-common';
 import { CustomFieldOrigin, withoutDefaults } from '@wix/bex-core';
 import { cairoCtaClicked } from '@wix/bex-core/bi';
@@ -23,6 +23,7 @@ function _ManageFieldsPopoverMenu({
 }: ManageFieldsPopoverMenuProps) {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
+  const { stackingRootRef } = usePageContext();
 
   if (!state.dataExtension.hasWritePermissions) {
     return (
@@ -72,6 +73,7 @@ function _ManageFieldsPopoverMenu({
     <PopoverMenu
       textSize="small"
       placement="bottom-end"
+      appendTo={stackingRootRef.current || 'parent'}
       dataHook="custom-field-options"
       onShow={onTriggerMenu}
       triggerElement={

package/src/components/CustomFieldsWidget/CustomFieldsWidgetCommonComponents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { usePageContext } from '@wix/bex-core/react';
+import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldsWidgetState } from '../../state';
 import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
 
@@ -12,6 +12,7 @@ const _CustomFieldsWidgetCommonComponents = ({
   state,
 }: CustomFieldsWidgetCommonComponentsProps) => {
   const page = usePageContext();
+  const { useRelativeSidePanel } = useWixPatternsContainer();
 
   const { modalsContainerRef, stackingRootRef } = page;
 
@@ -27,7 +28,9 @@ const _CustomFieldsWidgetCommonComponents = ({
       {WixPatternsModalsContainer && (
         <WixPatternsModalsContainer
           rootRef={stackingRootRef}
-          anchorRef={modalsContainerRef}
+          anchorRef={
+            useRelativeSidePanel ? stackingRootRef : modalsContainerRef
+          }
           state={state.panels}
         />
       )}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle4211744995";
+var _namespace_ = "DragHandle3028207720";
 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":"DragHandle4211744995__root"};
+export var classes = {"root":"DragHandle3028207720__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_ = "EntityPagePlain165029253";
+var _namespace_ = "EntityPagePlain2668659888";
 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":"EntityPagePlain165029253__root"};
+export var classes = {"root":"EntityPagePlain2668659888__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_ = "Fade113856090";
+var _namespace_ = "Fade3563359266";
 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":"Fade113856090__root"};
+export var classes = {"root":"Fade3563359266__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/GridSections/GridSectionHeader.tsx

@@ -19,7 +19,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
     gridBase: { layoutType },
   } = state;
 
-  const { sectionId, section, range } = sectionDescriptor;
+  const { sectionId, sectionIndex, section, range } = sectionDescriptor;
 
   const sectionWithCount = {
     ...section,
@@ -31,6 +31,7 @@ function _GridSectionHeader<T, F extends FiltersMap>(
     <CollectionSectionHeader
       dataHook="grid-section-header"
       sectionId={sectionId}
+      sectionIndex={sectionIndex}
       section={sectionWithCount}
       skin={layoutType === 'list' ? 'light' : 'neutral'}
       biComponentType="GridSections"

package/src/components/GridSections/GridSectionsState.ts

@@ -9,6 +9,7 @@ import type {
 
 export interface SectionRange {
   sectionId: string;
+  sectionIndex: number;
   section: Section;
   range: {
     start: number;
@@ -66,7 +67,7 @@ export class GridSectionsState<T, F extends FiltersMap> {
     });
 
     let currentIndex = 0;
-    return orderedSections.map((sectionId) => {
+    return orderedSections.map((sectionId, sectionIndex) => {
       const sectionItems = sectionItemsMap[sectionId];
 
       const section = renderSection
@@ -80,7 +81,7 @@ export class GridSectionsState<T, F extends FiltersMap> {
 
       currentIndex += sectionItems.length;
 
-      return { sectionId, section, range };
+      return { sectionId, sectionIndex, section, range };
     });
   }
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading4117206017";
+var _namespace_ = "Heading766337662";
 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":"Heading4117206017__root"};
+export var classes = {"root":"Heading766337662__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_ = "InputOverflow122992747";
+var _namespace_ = "InputOverflow1779509954";
 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":"InputOverflow122992747__root"};
+export var classes = {"root":"InputOverflow1779509954__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_ = "LoadingRow2386845315";
+var _namespace_ = "LoadingRow553533932";
 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":"LoadingRow2386845315__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2386845315__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow553533932__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow553533932__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_ = "MaxHeightText2941345795";
+var _namespace_ = "MaxHeightText2504789387";
 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":"MaxHeightText2941345795__root"};
+export var classes = {"root":"MaxHeightText2504789387__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_ = "MaxLines2685931768";
+var _namespace_ = "MaxLines3028305029";
 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":"MaxLines2685931768__root"};
+export var classes = {"root":"MaxLines3028305029__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_ = "MultiBulkActionToolbar3636803309";
+var _namespace_ = "MultiBulkActionToolbar2688608817";
 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":"MultiBulkActionToolbar3636803309__root","leftGroupWrapper":"MultiBulkActionToolbar3636803309__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3636803309__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3636803309__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2688608817__root","leftGroupWrapper":"MultiBulkActionToolbar2688608817__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2688608817__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2688608817__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_ = "NestedTablePlaceholderStatesRow3299048733";
+var _namespace_ = "NestedTablePlaceholderStatesRow1937939244";
 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":"NestedTablePlaceholderStatesRow3299048733__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1937939244__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_ = "NestedTableRow2944825962";
+var _namespace_ = "NestedTableRow3689359283";
 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":"NestedTableRow2944825962__root","firstLevel":"NestedTableRow2944825962__firstLevel","placeholder":"NestedTableRow2944825962__placeholder","parentHovered":"NestedTableRow2944825962__parentHovered"};
+export var classes = {"root":"NestedTableRow3689359283__root","firstLevel":"NestedTableRow3689359283__firstLevel","placeholder":"NestedTableRow3689359283__placeholder","parentHovered":"NestedTableRow3689359283__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_ = "MultipleDragOverlayEffect2848659450";
+var _namespace_ = "MultipleDragOverlayEffect3206783830";
 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":"MultipleDragOverlayEffect2848659450__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3206783830__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};