@wix/patterns 1.494.0 → 1.496.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow2247427962";
+var _namespace_ = "NestedTableDragAndDropRow3277640739";
 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":"NestedTableDragAndDropRow2247427962__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3277640739__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_ = "PickerContent3558192044";
+var _namespace_ = "PickerContent1046466529";
 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":"PickerContent3558192044__root"};
+export var classes = {"root":"PickerContent1046466529__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_ = "PickerContentAdditionalStep2308500653";
+var _namespace_ = "PickerContentAdditionalStep1198997690";
 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":"PickerContentAdditionalStep2308500653__root","titles":"PickerContentAdditionalStep2308500653__titles","suffix":"PickerContentAdditionalStep2308500653__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1198997690__root","titles":"PickerContentAdditionalStep1198997690__titles","suffix":"PickerContentAdditionalStep1198997690__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_ = "PickerTableListItem4043198262";
+var _namespace_ = "PickerTableListItem2666300085";
 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":"PickerTableListItem4043198262__root"};
+export var classes = {"root":"PickerTableListItem2666300085__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_ = "ScrollableContent2046306564";
+var _namespace_ = "ScrollableContent968422134";
 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":"ScrollableContent2046306564__root"};
+export var classes = {"root":"ScrollableContent968422134__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_ = "SetupWidget1799065169";
+var _namespace_ = "SetupWidget3823691260";
 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":"SetupWidget1799065169__root","row":"SetupWidget1799065169__row","completedCta":"SetupWidget1799065169__completedCta","secondaryCta":"SetupWidget1799065169__secondaryCta","card":"SetupWidget1799065169__card","stepIcon":"SetupWidget1799065169__stepIcon","chevron":"SetupWidget1799065169__chevron","chevronDisabled":"SetupWidget1799065169__chevronDisabled","inProgressLabel":"SetupWidget1799065169__inProgressLabel"};
+export var classes = {"root":"SetupWidget3823691260__root","row":"SetupWidget3823691260__row","completedCta":"SetupWidget3823691260__completedCta","secondaryCta":"SetupWidget3823691260__secondaryCta","card":"SetupWidget3823691260__card","stepIcon":"SetupWidget3823691260__stepIcon","chevron":"SetupWidget3823691260__chevron","chevronDisabled":"SetupWidget3823691260__chevronDisabled","inProgressLabel":"SetupWidget3823691260__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_ = "SkeletonCard118188005";
+var _namespace_ = "SkeletonCard1495382215";
 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":"SkeletonCard118188005__root","headerLoading":"SkeletonCard118188005__headerLoading"};
+export var classes = {"root":"SkeletonCard1495382215__root","headerLoading":"SkeletonCard1495382215__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_ = "SlidingModal3449581154";
+var _namespace_ = "SlidingModal605283471";
 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":"SlidingModal3449581154__root"};
+export var classes = {"root":"SlidingModal605283471__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_ = "AddFieldColumnHeader1121021053";
+var _namespace_ = "AddFieldColumnHeader284683266";
 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":"AddFieldColumnHeader1121021053__root","anchorLayer":"AddFieldColumnHeader1121021053__anchorLayer","popover":"AddFieldColumnHeader1121021053__popover","title":"AddFieldColumnHeader1121021053__title","hoverBridge":"AddFieldColumnHeader1121021053__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader284683266__root","anchorLayer":"AddFieldColumnHeader284683266__anchorLayer","popover":"AddFieldColumnHeader284683266__popover","title":"AddFieldColumnHeader284683266__title","hoverBridge":"AddFieldColumnHeader284683266__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -54,6 +54,25 @@ export function TableFoldersUniDriver(base: UniDriver, body: UniDriver) {
         .$('[data-hook="folder-icon"]')
         .exists(),
 
+    /** Whether the folder icon renders inside a row's mobile image slot */
+    folderIconInMobileImageSlotAt: (row: number) =>
+      table
+        .getCellDriverByDataHook(row, 'mobile-image-column')
+        .base.$('[data-hook="folder-icon"]')
+        .exists(),
+
+    /** Whether a row has a mobile first-slot cell at all */
+    mobileFirstColumnExistsAt: (row: number) =>
+      table.getCellDriverByDataHook(row, 'mobile-first-column').exists(),
+
+    /** Text of a row's mobile first-slot cell */
+    getMobileFirstColumnTextAt: (row: number) =>
+      table.getCellDriverByDataHook(row, 'mobile-first-column').base.text(),
+
+    /** Text of a row's mobile second-slot cell */
+    getMobileSecondColumnTextAt: (row: number) =>
+      table.getCellDriverByDataHook(row, 'mobile-second-column').base.text(),
+
     avatarExistsAt: async (row: number, col: number) =>
       (await table.getRowByIndex(row).$$('td').get(col))
         .$('[data-hook="item-avatar"]')

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -1,4 +1,5 @@
 import { Avatar, TableColumn as WSRTableColumn } from '@wix/design-system';
+import type { AvatarSize } from '@wix/design-system';
 import React, {
   ComponentType,
   ReactElement,
@@ -23,6 +24,7 @@ import {
 } from '../VirtualGridRepeater/VirtualTableRepeater';
 import { VirtualGridStateProvider } from '../VirtualGridRepeater/VirtualGridStateContext';
 import { TableFoldersColumn } from './TableFolders.types';
+import { buildFoldersMobileColumns } from './buildFoldersMobileColumns';
 import { useOrFolderActionCellColumn } from './useOrFolderActionCellColumn';
 import { TableFoldersInfiniteScroll } from './TableFoldersInfiniteScroll';
 import {
@@ -30,10 +32,11 @@ import {
   MultiCollectionBulkActionToolbar,
   MultiCollectionBulkActionToolbarRenderProps,
 } from '../BulkAction';
-import { TableColumn } from '../../model';
+import { ColumnMobileConfig, MobileImageSize, TableColumn } from '../../model';
 import { CollectionTableActionCellProps } from '../CollectionTable/CollectionTableBaseCommonProps';
 import { SelectionDisabledProp } from '../../state/BulkActionToolbarState';
 import { useCreateWSRColumnBase } from '../../hooks/useCreateWSRColumnBase';
+import { useIsMobile } from '../../hooks/useIsMobile';
 import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
 import { getVirtualTableProps } from '../Table/getVirtualTableProps';
 
@@ -59,6 +62,14 @@ type TableFolderWSRTableBaseProps<
   PartialAllFilters<F1, F2>
 >;
 
+const MOBILE_AVATAR_SIZES: Record<MobileImageSize, AvatarSize> = {
+  small: 'size24',
+  medium: 'size36',
+  large: 'size48',
+};
+
+type MobileImageColumnConfig = Extract<ColumnMobileConfig, { column: 'image' }>;
+
 export interface TableFoldersContentProps<
   T1,
   F1 extends FiltersMap,
@@ -165,6 +176,15 @@ function _TableFoldersContent<
     toolbar: { selectedOrderedColumnsOrAll },
   } = state;
 
+  const isMobile = useIsMobile();
+
+  const iconMobileConfig: MobileImageColumnConfig =
+    iconColumn?.mobile?.column === 'image'
+      ? iconColumn.mobile
+      : { column: 'image' };
+  const mobileAvatarSize =
+    MOBILE_AVATAR_SIZES[iconMobileConfig.size ?? 'medium'];
+
   const createWSRColumnBase = useCreateWSRColumnBase({
     horizontalScroll,
     showFieldTypeIcons: state.toolbar.showFieldTypeIcons,
@@ -176,6 +196,7 @@ function _TableFoldersContent<
       title: '',
       width: '48px',
       ...iconColumn,
+      mobile: iconMobileConfig,
       style: undefined,
       render: ({ item }, rowNum) => {
         if (item._tag === 'folder') {
@@ -190,6 +211,7 @@ function _TableFoldersContent<
           iconColumn?.render?.(item.originalKeyedItem.item, rowNum) ?? (
             <Avatar
               dataHook="item-avatar"
+              size={isMobile ? mobileAvatarSize : undefined}
               name={state.collections.items.itemName(
                 item.originalKeyedItem.item,
               )}
@@ -280,8 +302,11 @@ function _TableFoldersContent<
       horizontalScroll={horizontalScroll}
       emptyState={emptyState}
       noResultsState={noResultsState}
-      {...getVirtualTableProps({ horizontalScroll })}
+      {...getVirtualTableProps({
+        horizontalScroll: horizontalScroll && !isMobile,
+      })}
       columns={finalColumns}
+      buildMobileColumns={buildFoldersMobileColumns}
       showTitleBar={showTitleBar}
       isApplyColumnWidthStyle={true}
       BodyElementType={BodyElementType}

package/src/components/TableFolders/buildFoldersMobileColumns.ts

@@ -0,0 +1,37 @@
+import { KeyedItem } from '@wix/bex-core';
+import { TableColumn } from '../../model';
+import { buildMobileColumns } from '../../utils/buildMobileColumns';
+
+const TABLE_FOLDERS_MOBILE_COLUMN_OPTIONS = {
+  firstColumnStyle: { flexGrow: 1 },
+  imageColumnStyle: { flexShrink: 0 },
+};
+
+export function buildFoldersMobileColumns<T>(
+  columns: TableColumn<KeyedItem<T>>[],
+): TableColumn<KeyedItem<T>>[] {
+  const hasImageColumn = columns.some(
+    (column) => column.mobile?.column === 'image',
+  );
+  const hasTextColumn = columns.some(
+    (column) =>
+      column.mobile?.column === 'first' || column.mobile?.column === 'second',
+  );
+
+  if (!hasImageColumn || hasTextColumn) {
+    return buildMobileColumns(columns, TABLE_FOLDERS_MOBILE_COLUMN_OPTIONS);
+  }
+
+  const fallbackColumn = columns.find(
+    (column) => column.mobile?.column !== 'image',
+  );
+
+  return buildMobileColumns(
+    columns.map((column) =>
+      column === fallbackColumn
+        ? { ...column, mobile: { column: 'first' as const } }
+        : column,
+    ),
+    TABLE_FOLDERS_MOBILE_COLUMN_OPTIONS,
+  );
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter734832378";
+var _namespace_ = "TabsFilter1692014240";
 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":"TabsFilter734832378__root","titleBox":"TabsFilter734832378__titleBox"};
+export var classes = {"root":"TabsFilter1692014240__root","titleBox":"TabsFilter1692014240__titleBox"};
 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_ = "ManageTagsModal3568114130";
+var _namespace_ = "ManageTagsModal1828960394";
 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":"ManageTagsModal3568114130__root"};
+export var classes = {"root":"ManageTagsModal1828960394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem497625553";
+var _namespace_ = "ToolbarItem746094005";
 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":"ToolbarItem497625553__root"};
+export var classes = {"root":"ToolbarItem746094005__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_ = "ToolbarItemBox129482920";
+var _namespace_ = "ToolbarItemBox2484931942";
 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":"ToolbarItemBox129482920__root"};
+export var classes = {"root":"ToolbarItemBox2484931942__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_ = "common4053375054";
+var _namespace_ = "common463512055";
 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":"common4053375054__root","column":"common4053375054__column","fullHeight":"common4053375054__fullHeight"};
+export var classes = {"root":"common463512055__root","column":"common463512055__column","fullHeight":"common463512055__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useBuildAccordionItems.tsx

@@ -1,6 +1,6 @@
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   AccordionProps,
   Box,
@@ -11,72 +11,89 @@ import { FilterElement } from '../components/CollectionToolbarFilters';
 import { CollectionToolbarFiltersState } from '../components/CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { FilterAccordionResetButton } from '../components/FiltersPanel/FilterAccordionResetButton';
 import { FilterAccordionTitle } from '../components/FiltersPanel/FilterAccordionTitle';
+import { FilterRevealAnchor } from '../components/FiltersPanel/FilterRevealAnchor';
 import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
 
-function useBuildAccordionItem<T, F extends FiltersMap>(
+function createAccordionItemBuilder<T, F extends FiltersMap>(
   state: CollectionToolbarFiltersState<T, F>,
   showFieldTypeIcons: boolean,
 ) {
-  return useCallback(
-    (filterElement: FilterElement) => {
-      const { type: Component, props: filterProps } = filterElement;
-      const {
-        filter,
-        initiallyOpen,
-        popoverProps,
-        accordionItemProps,
-        fieldType,
-      } = filterProps;
+  return (filterElement: FilterElement) => {
+    const { type: Component, props: filterProps } = filterElement;
+    const {
+      filter,
+      initiallyOpen,
+      popoverProps,
+      accordionItemProps,
+      fieldType,
+    } = filterProps;
 
-      const clonedElement = (
-        <Component
-          {...filterProps}
-          popoverProps={{ appendTo: 'window', ...popoverProps }}
-        />
-      );
-      const titleElement = (
-        <FilterAccordionTitle
-          state={state.toolbar}
-          filter={filter}
-          filterProps={filterProps}
-        />
-      );
-      const titleWithIcon = showFieldTypeIcons ? (
-        <Box gap="SP1" verticalAlign="middle">
-          {getFieldTypeIcon({ fieldType, size: 'medium' })}
-          {titleElement}
-        </Box>
-      ) : (
-        titleElement
-      );
+    const clonedElement = (
+      <Component
+        {...filterProps}
+        popoverProps={{ appendTo: 'window', ...popoverProps }}
+      />
+    );
+    const titleElement = (
+      <FilterAccordionTitle
+        state={state.toolbar}
+        filter={filter}
+        filterProps={filterProps}
+      />
+    );
+    const titleWithIcon = showFieldTypeIcons ? (
+      <Box gap="SP1" verticalAlign="middle">
+        {getFieldTypeIcon({ fieldType, size: 'medium' })}
+        {titleElement}
+      </Box>
+    ) : (
+      titleElement
+    );
 
-      const title = filterProps.filter ? (
-        <Box width="100%" align="space-between" verticalAlign="middle">
-          {titleWithIcon}
-          <FilterAccordionResetButton
-            state={state.toolbar}
-            filter={filterProps.filter}
-          />
-        </Box>
+    const panel = state.panel;
+    const sectionKey = panel.getSectionKey(filterElement);
+    const open = panel.isSectionOpen(filterElement);
+    const request = panel.revealRequest;
+    const revealTitle = (content: React.ReactNode) =>
+      request?.sectionKey === sectionKey ? (
+        <FilterRevealAnchor
+          request={request}
+          scrollContainerRef={panel.scrollContainerRef}
+          open={open}
+        >
+          {content}
+        </FilterRevealAnchor>
       ) : (
-        titleWithIcon
+        content
       );
 
-      return {
-        title,
-        children: filterProps.filter ? (
-          <CollectionFilter filter={filterProps.filter} state={state}>
-            {clonedElement}
-          </CollectionFilter>
-        ) : (
-          clonedElement
-        ),
-        initiallyOpen,
-        ...accordionItemProps,
-      };
-    },
-    [showFieldTypeIcons],
-  );
+    const title = (
+      <Box width="100%" align="space-between" verticalAlign="middle">
+        {revealTitle(titleWithIcon)}
+        <FilterAccordionResetButton state={state.toolbar} filter={filter} />
+      </Box>
+    );
+
+    const itemTitle =
+      accordionItemProps && 'title' in accordionItemProps
+        ? revealTitle(accordionItemProps.title)
+        : title;
+    return {
+      children: (
+        <CollectionFilter filter={filter} state={state}>
+          {clonedElement}
+        </CollectionFilter>
+      ),
+      initiallyOpen,
+      ...accordionItemProps,
+      key: sectionKey,
+      open,
+      title: itemTitle,
+      onToggle: (event: React.MouseEvent<HTMLElement>) => {
+        panel.toggleSection(filterElement, event);
+      },
+    };
+  };
 }
 
 export function useBuildAccordionItems<T, F extends FiltersMap>(
@@ -86,7 +103,10 @@ export function useBuildAccordionItems<T, F extends FiltersMap>(
   const { translate: t } = useWixPatternsContainer();
   const { panelFilterElements } = state;
   const showFieldTypeIcons = state.toolbar.showFieldTypeIcons;
-  const buildAccordionItem = useBuildAccordionItem(state, showFieldTypeIcons);
+  const buildAccordionItem = createAccordionItemBuilder(
+    state,
+    showFieldTypeIcons,
+  );
 
   const defaultSectionTitle = t('cairo.filtersPanel.sections.default.title');
 

package/src/state/CollectionFieldsSourceState.ts

@@ -1,4 +1,4 @@
-import { reaction } from 'mobx';
+import { reaction, runInAction } from 'mobx';
 import type { ComponentType } from 'react';
 import { addEventListener, TaskState } from '@wix/bex-core';
 import type {
@@ -198,9 +198,11 @@ export class CollectionFieldsSourceState {
     toolbar: ToolbarCollectionState<any, any>,
     source: { fieldsSource: FieldsSource } & FieldsSourceRendering,
   ) {
-    toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
-      ...source,
-      toolbar,
+    runInAction(() => {
+      toolbar.collectionFieldsSource ??= new CollectionFieldsSourceState({
+        ...source,
+        toolbar,
+      });
     });
   }
 

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader170929993";
+var _namespace_ = "CollectionPageHeader1806512227";
 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":"CollectionPageHeader170929993__root","mobileMoreActions":"CollectionPageHeader170929993__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1806512227__root","mobileMoreActions":"CollectionPageHeader1806512227__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};