@wix/patterns 1.454.0 → 1.456.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow348762498";
+var _namespace_ = "InputOverflow1776040036";
 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":"InputOverflow348762498__root"};
+export var classes = {"root":"InputOverflow1776040036__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_ = "LoadingRow1007375783";
+var _namespace_ = "LoadingRow710156935";
 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":"LoadingRow1007375783__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1007375783__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow710156935__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow710156935__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_ = "MaxHeightText2409169340";
+var _namespace_ = "MaxHeightText292056173";
 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":"MaxHeightText2409169340__root"};
+export var classes = {"root":"MaxHeightText292056173__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_ = "MaxLines3294220488";
+var _namespace_ = "MaxLines536459277";
 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":"MaxLines3294220488__root"};
+export var classes = {"root":"MaxLines536459277__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_ = "MultiBulkActionToolbar1285148428";
+var _namespace_ = "MultiBulkActionToolbar533884152";
 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":"MultiBulkActionToolbar1285148428__root","leftGroupWrapper":"MultiBulkActionToolbar1285148428__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1285148428__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1285148428__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar533884152__root","leftGroupWrapper":"MultiBulkActionToolbar533884152__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar533884152__selectedCountItem","selectedCountText":"MultiBulkActionToolbar533884152__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_ = "NestedTablePlaceholderStatesRow3088686009";
+var _namespace_ = "NestedTablePlaceholderStatesRow1714804832";
 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":"NestedTablePlaceholderStatesRow3088686009__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1714804832__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_ = "NestedTableRow3247189450";
+var _namespace_ = "NestedTableRow436051484";
 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":"NestedTableRow3247189450__root","firstLevel":"NestedTableRow3247189450__firstLevel","placeholder":"NestedTableRow3247189450__placeholder","parentHovered":"NestedTableRow3247189450__parentHovered"};
+export var classes = {"root":"NestedTableRow436051484__root","firstLevel":"NestedTableRow436051484__firstLevel","placeholder":"NestedTableRow436051484__placeholder","parentHovered":"NestedTableRow436051484__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_ = "MultipleDragOverlayEffect824365765";
+var _namespace_ = "MultipleDragOverlayEffect3044415707";
 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":"MultipleDragOverlayEffect824365765__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3044415707__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_ = "NestedTableDragAndDropRow1181710227";
+var _namespace_ = "NestedTableDragAndDropRow1783572624";
 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":"NestedTableDragAndDropRow1181710227__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1783572624__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,6 +4,13 @@ import { baseUniDriverFactory } from '../../unidriver';
 export function PageWrapperUniDriver(base: UniDriver, _body: UniDriver) {
   return {
     getLang: async () => base.attr('lang'),
+    getPageWidth: async () => {
+      const page = (await base
+        .$('[data-hook="page-and-modals-root"]')
+        .getNative()) as HTMLElement;
+
+      return page.style.width;
+    },
     getDndKitLiveRegion: (count: number) =>
       base
         .$('[data-hook="modals-container"]')

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -4,7 +4,7 @@ import {
   PageContextProvider,
   useWixPatternsContainer,
 } from '@wix/bex-core/react';
-import { PageState, SidePanelWidth } from '@wix/bex-core';
+import { PageState } from '@wix/bex-core';
 import { runInAction } from 'mobx';
 import { WixDesignSystemProvider } from '@wix/design-system';
 import { version as cairoVersion } from '../../version';
@@ -18,20 +18,23 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
   const { pageState, children } = props;
 
   const [state] = useState(() => pageState ?? new PageState());
-  const { modalsContainerRef, stackingRootRef, _sidePanelOpen } = state;
-  const sidePanelOpen = useReactive(_sidePanelOpen);
+  const { modalsContainerRef, stackingRootRef, _sidePanelReservedWidth } =
+    state;
+  const sidePanelReservedWidth = useReactive(_sidePanelReservedWidth);
   const { environment, useRelativeSidePanel, isMobile } =
     useWixPatternsContainer();
 
   const pageAndModalsRootStyle = useMemo(
     () => ({
       position: 'relative' as const,
-      width: sidePanelOpen ? `calc(100% - ${SidePanelWidth}px)` : '100%',
+      width: sidePanelReservedWidth
+        ? `calc(100% - ${sidePanelReservedWidth}px)`
+        : '100%',
       height: '100%',
       transition: 'width 0.4s ease 0s',
       zIndex: 1,
     }),
-    [sidePanelOpen],
+    [sidePanelReservedWidth],
   );
 
   const rootStyle = useMemo(
@@ -63,7 +66,9 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
         }}
         lang={environment.language}
       >
-        <div style={pageAndModalsRootStyle}>{children}</div>
+        <div data-hook="page-and-modals-root" style={pageAndModalsRootStyle}>
+          {children}
+        </div>
         <div
           data-hook="modals-container"
           ref={(el) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2517787932";
+var _namespace_ = "PickerContent1132571777";
 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":"PickerContent2517787932__root"};
+export var classes = {"root":"PickerContent1132571777__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_ = "PickerContentAdditionalStep1757242952";
+var _namespace_ = "PickerContentAdditionalStep3609243461";
 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":"PickerContentAdditionalStep1757242952__root","titles":"PickerContentAdditionalStep1757242952__titles","suffix":"PickerContentAdditionalStep1757242952__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3609243461__root","titles":"PickerContentAdditionalStep3609243461__titles","suffix":"PickerContentAdditionalStep3609243461__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_ = "PickerTableListItem2909879809";
+var _namespace_ = "PickerTableListItem3396677433";
 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":"PickerTableListItem2909879809__root"};
+export var classes = {"root":"PickerTableListItem3396677433__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_ = "ScrollableContent1862169288";
+var _namespace_ = "ScrollableContent2531331019";
 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":"ScrollableContent1862169288__root"};
+export var classes = {"root":"ScrollableContent2531331019__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { Box } from '@wix/design-system';
 import { classes, st } from './ScrollableContent.st.css.js';
 
 export interface ScrollableContentProps {
@@ -16,8 +17,9 @@ export const ScrollableContent = forwardRef<
   const { dataHook, overflowX, overflowY, smooth, children } = props;
 
   return (
-    <div
-      data-hook={dataHook}
+    <Box
+      display="block"
+      dataHook={dataHook}
       ref={ref}
       className={st(classes.root, {
         overflowX,
@@ -26,6 +28,6 @@ export const ScrollableContent = forwardRef<
       })}
     >
       {children}
-    </div>
+    </Box>
   );
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget870228798";
+var _namespace_ = "SetupWidget3264443714";
 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":"SetupWidget870228798__root","row":"SetupWidget870228798__row","completedCta":"SetupWidget870228798__completedCta","secondaryCta":"SetupWidget870228798__secondaryCta","card":"SetupWidget870228798__card","stepIcon":"SetupWidget870228798__stepIcon","chevron":"SetupWidget870228798__chevron","chevronDisabled":"SetupWidget870228798__chevronDisabled","inProgressLabel":"SetupWidget870228798__inProgressLabel"};
+export var classes = {"root":"SetupWidget3264443714__root","row":"SetupWidget3264443714__row","completedCta":"SetupWidget3264443714__completedCta","secondaryCta":"SetupWidget3264443714__secondaryCta","card":"SetupWidget3264443714__card","stepIcon":"SetupWidget3264443714__stepIcon","chevron":"SetupWidget3264443714__chevron","chevronDisabled":"SetupWidget3264443714__chevronDisabled","inProgressLabel":"SetupWidget3264443714__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SidePanelModal/SidePanelModal.tsx

@@ -57,14 +57,13 @@ function _SidePanelModal(props: SidePanelModalProps) {
     [top, left, width, isPanelLayout, useRelativeSidePanel, inset],
   );
 
+  const reservedWidth = isOpen && !isPanelLayout ? SidePanelWidth + inset : 0;
+
   useEffect(() => {
-    return reaction(
-      () => sidePanel.isOpen,
-      (sidePanelOpen) => {
-        pageState.sidePanelOpen = sidePanelOpen;
-      },
-    );
-  }, []);
+    pageState.setSidePanelReservedWidth(state, reservedWidth);
+  }, [state, reservedWidth]);
+
+  useEffect(() => () => pageState.setSidePanelReservedWidth(state, 0), [state]);
 
   useEffect(() => {
     const onGlobalSidePanelOpenSub = onSidePanelOpen?.(() => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2751193167";
+var _namespace_ = "SkeletonCard1698790681";
 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":"SkeletonCard2751193167__root","headerLoading":"SkeletonCard2751193167__headerLoading"};
+export var classes = {"root":"SkeletonCard1698790681__root","headerLoading":"SkeletonCard1698790681__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_ = "SlidingModal1609958439";
+var _namespace_ = "SlidingModal1192996305";
 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":"SlidingModal1609958439__root"};
+export var classes = {"root":"SlidingModal1192996305__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabTotal/TabTotalCounterBadge.tsx

@@ -11,7 +11,16 @@ import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
   extends UseFilterValueTotalStateParams<V, T, F>,
-    Partial<CounterBadgeProps> {}
+    Omit<Partial<CounterBadgeProps>, 'skin'> {
+  /**
+   * Badge skin. Pass a function to pick the skin from the total, for example to
+   * keep a tab neutral while its total is `0`.
+   * @external
+   */
+  readonly skin?:
+    | CounterBadgeProps['skin']
+    | ((total: number) => CounterBadgeProps['skin']);
+}
 
 function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   props: TabCounterBadgeProps<V, T, F>,
@@ -21,15 +30,15 @@ function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
   const defaultSize = isHarmonyTheme ? 'tiny' : 'small';
 
   const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
-  const state = useFilterValueTotalState(props);
-
-  const {
-    totalsCollection: { totalStatus, total, lifecycleState },
-  } = state;
+  const { resolvedTotal } = useFilterValueTotalState(props);
 
-  return totalStatus === 'success' && lifecycleState === 'result' ? (
-    <CounterBadge size={size} skin={skin} {...rest}>
-      {total}
+  return resolvedTotal != null ? (
+    <CounterBadge
+      size={size}
+      skin={typeof skin === 'function' ? skin(resolvedTotal) : skin}
+      {...rest}
+    >
+      {resolvedTotal}
     </CounterBadge>
   ) : null;
 }

package/src/components/TabTotal/useFilterValueTotalState.ts

@@ -1,8 +1,9 @@
 import { useFilterContext } from '../FilterContext';
 import { useCollectionContext } from '../CollectionContext';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { FilterValueTotalState } from '../../state';
 import { CollectionOptimisticActions, FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export interface UseFilterValueTotalStateParams<V, T, F extends FiltersMap> {
   /**
@@ -36,12 +37,22 @@ export function useFilterValueTotalState<V, T, F extends FiltersMap>({
       }),
   );
 
+  const table = useContext(ToolbarCollectionContext);
+  const key = value == null ? undefined : filter.itemKey(value);
+
   useEffect(() => state.init(), []);
   useEffect(() => {
     if (value !== state.value) {
       state.refresh(value);
     }
   }, [value]);
+  useEffect(
+    () =>
+      key != null
+        ? table?.tabs?.registerTabTotal(filter, key, state)
+        : undefined,
+    [table, key],
+  );
 
   return state;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader3381691961";
+var _namespace_ = "AddFieldColumnHeader4179756822";
 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":"AddFieldColumnHeader3381691961__root","title":"AddFieldColumnHeader3381691961__title","hoverBridge":"AddFieldColumnHeader3381691961__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader4179756822__root","title":"AddFieldColumnHeader4179756822__title","hoverBridge":"AddFieldColumnHeader4179756822__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_ = "TabsFilter1619201132";
+var _namespace_ = "TabsFilter3007203288";
 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":"TabsFilter1619201132__root","titleBox":"TabsFilter1619201132__titleBox"};
+export var classes = {"root":"TabsFilter3007203288__root","titleBox":"TabsFilter3007203288__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -64,13 +64,17 @@ export interface TabsFilterProps<V> {
    * <br><br>
    * Disabled tabs are non-interactive and rendered in a visually muted state.
    * <br><br>
-   * The result is memoized. pass a new function
-   * whenever its result may change.
+   * `total` is the tab's counter total, so a tab can be disabled while its
+   * counter is `0`. It is `undefined` until the total first resolves, and stays
+   * `undefined` when `counterBadge` is not used.
+   * <br><br>
+   * Called on every render, so it must be cheap and pure. It re-runs as totals
+   * resolve, so the result may depend on them.
    * <br>
    * Requires `@wix/design-system` version >= 1.310.0
    * @external
    */
-  disabled?: (value: V) => boolean;
+  disabled?: (value: V, total: number | undefined) => boolean;
   onChange?: (value: V | null | undefined) => unknown;
 
   /**
@@ -150,6 +154,13 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     ? ALL_TAB_ITEM_ID
     : itemKey(filter.value[0]);
 
+  const disabledItems = disabled
+    ? dataProp.map((value) =>
+        disabled(value, state.tabTotalOf(filter, itemKey(value))),
+      )
+    : undefined;
+  const disabledItemsKey = disabledItems?.join();
+
   const items = useMemo<TabsFilterItemBase[]>(() => {
     const _mergedItems = dataProp.map((value, index) => {
       const id = itemKey(value);
@@ -165,7 +176,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
             counterBadge={hideCounterBadge ? undefined : counterBadge}
           />
         ),
-        disabled: disabled?.(value),
+        disabled: disabledItems?.[index],
         value,
       };
     });
@@ -206,7 +217,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     dataProp,
     all,
     counterBadge,
-    disabled,
+    disabledItemsKey,
     responsive.panelMinWidth,
     hideCounterBadge,
   ]);
@@ -220,6 +231,10 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     [container, state],
   );
 
+  useEffect(() => {
+    state.pruneTabTotals(filter, dataProp.map(itemKey));
+  }, [dataProp]);
+
   return (
     <FilterContextProvider value={filter}>
       <Box