@wix/patterns 1.347.0 → 1.349.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow884096844";
+var _namespace_ = "InputOverflow3746903394";
 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":"InputOverflow884096844__root"};
+export var classes = {"root":"InputOverflow3746903394__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_ = "LoadingRow46070280";
+var _namespace_ = "LoadingRow2291814844";
 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":"LoadingRow46070280__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow46070280__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2291814844__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2291814844__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_ = "MaxHeightText192267426";
+var _namespace_ = "MaxHeightText1421655495";
 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":"MaxHeightText192267426__root"};
+export var classes = {"root":"MaxHeightText1421655495__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_ = "MaxLines3296404302";
+var _namespace_ = "MaxLines1361859029";
 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":"MaxLines3296404302__root"};
+export var classes = {"root":"MaxLines1361859029__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_ = "MultiBulkActionToolbar628671163";
+var _namespace_ = "MultiBulkActionToolbar1531832909";
 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":"MultiBulkActionToolbar628671163__root","leftGroupWrapper":"MultiBulkActionToolbar628671163__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar628671163__selectedCountItem","selectedCountText":"MultiBulkActionToolbar628671163__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1531832909__root","leftGroupWrapper":"MultiBulkActionToolbar1531832909__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1531832909__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1531832909__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_ = "NestedTablePlaceholderStatesRow182388988";
+var _namespace_ = "NestedTablePlaceholderStatesRow647433253";
 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":"NestedTablePlaceholderStatesRow182388988__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow647433253__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_ = "NestedTableRow713203567";
+var _namespace_ = "NestedTableRow708190955";
 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":"NestedTableRow713203567__root","firstLevel":"NestedTableRow713203567__firstLevel","placeholder":"NestedTableRow713203567__placeholder","parentHovered":"NestedTableRow713203567__parentHovered"};
+export var classes = {"root":"NestedTableRow708190955__root","firstLevel":"NestedTableRow708190955__firstLevel","placeholder":"NestedTableRow708190955__placeholder","parentHovered":"NestedTableRow708190955__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_ = "MultipleDragOverlayEffect4204691713";
+var _namespace_ = "MultipleDragOverlayEffect2165751233";
 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":"MultipleDragOverlayEffect4204691713__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2165751233__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_ = "NestedTableDragAndDropRow1833288973";
+var _namespace_ = "NestedTableDragAndDropRow559033372";
 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":"NestedTableDragAndDropRow1833288973__root"};
+export var classes = {"root":"NestedTableDragAndDropRow559033372__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_ = "PickerContent1247513928";
+var _namespace_ = "PickerContent900717721";
 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":"PickerContent1247513928__root"};
+export var classes = {"root":"PickerContent900717721__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_ = "PickerContentAdditionalStep4236556513";
+var _namespace_ = "PickerContentAdditionalStep3507325941";
 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":"PickerContentAdditionalStep4236556513__root","titles":"PickerContentAdditionalStep4236556513__titles","suffix":"PickerContentAdditionalStep4236556513__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3507325941__root","titles":"PickerContentAdditionalStep3507325941__titles","suffix":"PickerContentAdditionalStep3507325941__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_ = "PickerTableListItem3966765664";
+var _namespace_ = "PickerTableListItem2816858989";
 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":"PickerTableListItem3966765664__root"};
+export var classes = {"root":"PickerTableListItem2816858989__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent1923286669";
+var _namespace_ = "ScrollableContent2272651284";
 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":"ScrollableContent1923286669__root"};
+export var classes = {"root":"ScrollableContent2272651284__root"};
 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_ = "SkeletonCard4080766162";
+var _namespace_ = "SkeletonCard2008983369";
 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":"SkeletonCard4080766162__root","headerLoading":"SkeletonCard4080766162__headerLoading"};
+export var classes = {"root":"SkeletonCard2008983369__root","headerLoading":"SkeletonCard2008983369__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_ = "SlidingModal4292764214";
+var _namespace_ = "SlidingModal4217273137";
 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":"SlidingModal4292764214__root"};
+export var classes = {"root":"SlidingModal4217273137__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/TableBase.tsx

@@ -78,6 +78,8 @@ function _TableBase<T, F extends FiltersMap = FiltersMap>(
           table={state}
           groupBy={sections.groupBy}
           renderSection={sections.renderSection}
+          collapsible={sections.collapsible}
+          events={sections.events}
         />
       ) : (
         <CollectionTable {...commonTableProps} TrElementType={TableBaseRow} />

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -9,7 +9,11 @@ import { GridPresetProps } from '../Grid/Grid.types';
 import type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';
 import { InitialLoader } from '../InitialLoader';
 import { GridSectionsContent } from '../GridSections/GridSectionsContent';
-import type { GroupBy, RenderSection } from '../CollectionSectionHeader';
+import type {
+  GroupBy,
+  RenderSection,
+  SectionEvents,
+} from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
@@ -42,6 +46,8 @@ export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
     TableSections: typeof TableSections;
     groupBy: GroupBy<T>;
     renderSection: RenderSection<T>;
+    collapsible?: boolean;
+    events?: SectionEvents;
   };
 }
 
@@ -81,6 +87,8 @@ export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
         TableSections: sections.TableSections,
         groupBy: sections.groupBy,
         renderSection: sections.renderSection,
+        collapsible: sections.collapsible,
+        events: sections.events,
       }
     : undefined;
 

package/src/components/TableSections/TableSectionRow.tsx

@@ -56,7 +56,7 @@ const _TableSectionRow = forwardRef<
       return <RegularTrElement {...regularTrElementProps} />;
     }
 
-    const { sectionId, section } = result;
+    const { sectionId, sectionIndex, section, collapsible } = result;
 
     return (
       <tr
@@ -84,10 +84,13 @@ const _TableSectionRow = forwardRef<
           >
             <CollectionSectionHeader
               sectionId={sectionId}
+              sectionIndex={sectionIndex}
               section={section}
               biComponentType="TableSections"
               skin="neutral"
               dataHook="table-section-header"
+              collapsible={collapsible}
+              onToggleCollapse={state.toggleSection}
             />
           </div>
         </th>

package/src/components/TableSections/TableSections.tsx

@@ -1,10 +1,15 @@
 import React, { useMemo, useState } from 'react';
+import { runInAction } from 'mobx';
 import { FiltersMap, KeyedItem } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { CollectionTable, CollectionTableBaseProps } from '../CollectionTable';
 import { useTableSectionRow } from './useTableSectionRow';
 import { TableState } from '../../state';
-import { GroupBy, RenderSection } from '../CollectionSectionHeader';
+import {
+  GroupBy,
+  RenderSection,
+  SectionEvents,
+} from '../CollectionSectionHeader';
 import { TableSectionsState } from './TableSectionsState';
 
 export interface TableSectionsProps<T, F extends FiltersMap>
@@ -12,6 +17,8 @@ export interface TableSectionsProps<T, F extends FiltersMap>
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
   table: TableState<T, F>;
+  collapsible?: boolean;
+  events?: SectionEvents;
 }
 
 const _TableSections = <T, F extends FiltersMap>({
@@ -20,12 +27,19 @@ const _TableSections = <T, F extends FiltersMap>({
   table,
   columns,
   rowDetails,
+  collapsible,
+  events,
   ...collectionTableProps
 }: TableSectionsProps<T, F>) => {
   const [state] = useState(
-    () => new TableSectionsState(table, groupBy, renderSection),
+    () => new TableSectionsState(table, groupBy, renderSection, collapsible),
   );
 
+  runInAction(() => {
+    state.renderSection = renderSection;
+  });
+  state.onToggleCallback = events?.onToggle;
+
   const columnsWithSections = useMemo(
     () =>
       columns.map((column) => ({
@@ -67,6 +81,7 @@ const _TableSections = <T, F extends FiltersMap>({
       isRowDisabled={(keyedItem) => {
         return state.isSectionRow(keyedItem);
       }}
+      isUsingExpandCollapse={collapsible}
     />
   );
 };
@@ -77,4 +92,6 @@ export type TableSectionsProp<T> = {
   TableSections: typeof TableSections;
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
+  collapsible?: boolean;
+  events?: SectionEvents;
 };

package/src/components/TableSections/TableSectionsState.ts

@@ -1,4 +1,4 @@
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { FiltersMap, KeyedItem } from '@wix/bex-core';
 import { TableState } from '../../state';
 import { GroupBy, RenderSection, Section } from '../CollectionSectionHeader';
@@ -10,21 +10,47 @@ export class TableSectionsState<T, F extends FiltersMap> {
   table: TableState<T, F>;
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
+  collapsible: boolean;
+  onToggleCallback?: (sectionId: string, isCollapsed: boolean) => void;
 
   constructor(
     table: TableState<T, F>,
     groupBy: GroupBy<T>,
     renderSection: RenderSection<T>,
+    collapsible?: boolean,
   ) {
     this.table = table;
     this.groupBy = groupBy;
     this.renderSection = renderSection;
+    this.collapsible = collapsible ?? false;
     makeObservable(this, {
+      renderSection: observable.ref,
       sectionsKeyedItems: computed,
       sectionCounts: computed,
     });
   }
 
+  toggleSection = (sectionId: string) => {
+    const currentCollapsed = this.isSectionCollapsed(sectionId);
+    this.onToggleCallback?.(sectionId, !currentCollapsed);
+  };
+
+  private isSectionCollapsed(sectionId: string): boolean {
+    const sectionItems = this.getSectionItems(sectionId);
+    const section = this.renderSection(sectionId, sectionItems);
+    return section.collapsed ?? false;
+  }
+
+  private getSectionItems(sectionId: string): T[] {
+    const items: T[] = [];
+    for (const keyedItem of this.table.keyedItems) {
+      if (this.groupBy(keyedItem.item) === sectionId) {
+        items.push(keyedItem.item);
+      }
+    }
+    return items;
+  }
+
   private generateSectionId(firstItemId: string): string {
     return `${SECTION_PREFIX}${firstItemId}`;
   }
@@ -32,14 +58,16 @@ export class TableSectionsState<T, F extends FiltersMap> {
   private get computeSectionData(): {
     counts: Map<string, { count: number; isComplete: boolean }>;
     items: Map<string, T[]>;
+    indices: Map<string, number>;
     keyedItems: KeyedItem<T>[];
   } {
     const counts = new Map<string, { count: number; isComplete: boolean }>();
     const items = new Map<string, T[]>();
+    const indices = new Map<string, number>();
     const keyedItems: KeyedItem<T>[] = [];
 
     if (this.table.keyedItems.length === 0) {
-      return { counts, items, keyedItems };
+      return { counts, items, indices, keyedItems };
     }
 
     // Add invisible row for design purposes
@@ -56,6 +84,7 @@ export class TableSectionsState<T, F extends FiltersMap> {
     let currentSectionIndex: number = 0;
     let currentHeaderId: string | null = null;
     let count = 0;
+    let isCurrentSectionCollapsed = false;
     let currentSectionItems: T[] = [];
 
     for (const keyedItem of this.table.keyedItems) {
@@ -73,10 +102,19 @@ export class TableSectionsState<T, F extends FiltersMap> {
         currentHeaderId = this.generateSectionId(
           `${sectionId}@${currentSectionIndex}`,
         );
+        indices.set(currentHeaderId, currentSectionIndex);
         currentSectionIndex++;
         count = 1;
         currentSectionItems = [keyedItem.item];
 
+        // Determine if section is collapsed from renderSection
+        const section = this.renderSection(
+          sectionId,
+          this.getSectionItems(sectionId),
+        );
+        isCurrentSectionCollapsed =
+          this.collapsible && (section.collapsed ?? false);
+
         // Add section header to keyed items
         const sectionKeyedItem: KeyedItem<T> = {
           id: currentHeaderId,
@@ -92,8 +130,10 @@ export class TableSectionsState<T, F extends FiltersMap> {
         currentSectionItems.push(keyedItem.item);
       }
 
-      // Add the actual data item
-      keyedItems.push(keyedItem);
+      // Add the actual data item only if section is not collapsed
+      if (!isCurrentSectionCollapsed) {
+        keyedItems.push(keyedItem);
+      }
     }
 
     // Handle last section
@@ -103,7 +143,7 @@ export class TableSectionsState<T, F extends FiltersMap> {
       items.set(currentHeaderId, currentSectionItems);
     }
 
-    return { counts, items, keyedItems };
+    return { counts, items, indices, keyedItems };
   }
 
   get sectionCounts(): Map<string, { count: number; isComplete: boolean }> {
@@ -114,13 +154,24 @@ export class TableSectionsState<T, F extends FiltersMap> {
     return this.computeSectionData.items;
   }
 
+  get sectionIndices(): Map<string, number> {
+    return this.computeSectionData.indices;
+  }
+
   get sectionsKeyedItems(): KeyedItem<T>[] {
     return this.computeSectionData.keyedItems;
   }
 
   getSectionWithCount(sectionKeyedItem: KeyedItem<T>): {
     sectionId: string;
-    section: Section & { count: number; hasMore: boolean; items: T[] };
+    sectionIndex: number;
+    section: Section & {
+      count: number;
+      hasMore: boolean;
+      items: T[];
+      collapsed: boolean;
+    };
+    collapsible: boolean;
   } {
     const headerId = sectionKeyedItem.id;
     const sectionData = headerId
@@ -129,18 +180,22 @@ export class TableSectionsState<T, F extends FiltersMap> {
     const sectionItemsList = headerId
       ? this.sectionItems.get(headerId) || []
       : [];
+    const sectionIndex = headerId ? this.sectionIndices.get(headerId) ?? 0 : 0;
 
     const sectionId = this.groupBy(sectionKeyedItem.item);
     const section = this.renderSection(sectionId, sectionItemsList);
 
     return {
       sectionId,
+      sectionIndex,
       section: {
         ...section,
         count: sectionData.count,
         hasMore: !sectionData.isComplete,
         items: sectionItemsList,
+        collapsed: this.collapsible && (section.collapsed ?? false),
       },
+      collapsible: this.collapsible,
     };
   }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter193030144";
+var _namespace_ = "TabsFilter644638764";
 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":"TabsFilter193030144__root","title":"TabsFilter193030144__title"};
+export var classes = {"root":"TabsFilter644638764__root","title":"TabsFilter644638764__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -14,6 +14,7 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     isUsingHorizontalScroll: boolean;
     isUsingFolders: boolean;
     isUsingTableVirtualization: boolean;
+    isUsingExpandCollapse?: boolean;
   },
 ) {
   const {
@@ -170,6 +171,7 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
       isUsingCustomEmptyState: !!props.emptyState,
       isUsingCustomNoResultsState: !!props.noResultsState,
       isUsingPrimaryActionCta: !!props.primaryActionButton,
+      isUsingExpandCollapse: !!props.isUsingExpandCollapse,
     };
   });
 

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

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