@wix/patterns 1.397.0 → 1.399.0

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2481984157";
+var _namespace_ = "ImportStepUpload804390373";
 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":"ImportStepUpload2481984157__root","fileUpload":"ImportStepUpload2481984157__fileUpload"};
+export var classes = {"root":"ImportStepUpload804390373__root","fileUpload":"ImportStepUpload804390373__fileUpload"};
 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_ = "InputOverflow1092642502";
+var _namespace_ = "InputOverflow2021077080";
 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":"InputOverflow1092642502__root"};
+export var classes = {"root":"InputOverflow2021077080__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/useCardActions.tsx

@@ -11,6 +11,7 @@ import {
 } from '@wix/design-system';
 import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
 import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { DisabledActionCellMenu } from '../ActionCell/DisabledActionCellMenu';
 import {
   createKanbanPrimaryActionCellPropsWithBI,
   createKanbanSecondaryActionCellPropsWithBI,
@@ -124,7 +125,20 @@ export function useCardActions<T, S, F extends FiltersMap>({
 
   let secondaryActions: React.ReactNode | null = null;
 
-  if (
+  if (actionCellConfig.secondaryMenuDisabled) {
+    secondaryActions = (
+      <DisabledActionCellMenu
+        dataHook={`kanban-card-more-actions-trigger-disabled-${stageKey}-${cardKey}`}
+        tooltipContent={
+          actionCellConfig.secondaryMenuDisabledTooltip ??
+          state.container.translate('cairo.disabled')
+        }
+        size="tiny"
+        icon={<MoreSmall />}
+        ariaLabel={state.container.translate('cairo.moreActions')}
+      />
+    );
+  } else if (
     secondaryActionCellPropsWithBI &&
     secondaryActionCellPropsWithBI.length > 0
   ) {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow4053623288";
+var _namespace_ = "LoadingRow714827402";
 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":"LoadingRow4053623288__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow4053623288__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow714827402__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow714827402__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_ = "MaxHeightText950016588";
+var _namespace_ = "MaxHeightText3514440681";
 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":"MaxHeightText950016588__root"};
+export var classes = {"root":"MaxHeightText3514440681__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_ = "MaxLines2744051348";
+var _namespace_ = "MaxLines2803127242";
 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":"MaxLines2744051348__root"};
+export var classes = {"root":"MaxLines2803127242__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_ = "MultiBulkActionToolbar956766975";
+var _namespace_ = "MultiBulkActionToolbar2648496592";
 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":"MultiBulkActionToolbar956766975__root","leftGroupWrapper":"MultiBulkActionToolbar956766975__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar956766975__selectedCountItem","selectedCountText":"MultiBulkActionToolbar956766975__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2648496592__root","leftGroupWrapper":"MultiBulkActionToolbar2648496592__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2648496592__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2648496592__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiSelectCollectionFilter/MultiSelectCollectionFilter.tsx

@@ -95,7 +95,7 @@ function _MultiSelectCollectionFilter<V, F extends FiltersMap>(
       infiniteScroll
       value={search.value}
       onChange={(e) => {
-        collection.search(e.target.value);
+        collection.search(e.target.value, { clearResult: true });
       }}
       onFocus={onFocus}
       filter={filter}

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow966698253";
+var _namespace_ = "NestedTablePlaceholderStatesRow604585177";
 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":"NestedTablePlaceholderStatesRow966698253__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow604585177__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_ = "NestedTableRow996044690";
+var _namespace_ = "NestedTableRow2638359576";
 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":"NestedTableRow996044690__root","firstLevel":"NestedTableRow996044690__firstLevel","placeholder":"NestedTableRow996044690__placeholder","parentHovered":"NestedTableRow996044690__parentHovered"};
+export var classes = {"root":"NestedTableRow2638359576__root","firstLevel":"NestedTableRow2638359576__firstLevel","placeholder":"NestedTableRow2638359576__placeholder","parentHovered":"NestedTableRow2638359576__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -1,6 +1,5 @@
 import React, { ComponentType, useEffect, useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import {
   CollectionTableWSRTable,
@@ -86,11 +85,6 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
     ...rest
   } = props;
   const { toolbar, query } = wrapperState;
-  const { internalExperiments } = useWixPatternsContainer();
-
-  const isGreyHeadersEnabled = internalExperiments?.enabled(
-    'specs.cairo.tableGreyHeaders',
-  );
 
   useState(() => {
     dragAndDrop?.setStateObject({
@@ -141,7 +135,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
       rowVerticalPadding={rowVerticalPadding}
       search={search === true ? <QuerySearch state={query.search} /> : search}
       {...rest}
-      skin={isGreyHeadersEnabled ? 'neutral' : rest.skin}
+      skin="neutral"
       showHeaderWhenEmpty
       sticky
       tabs={tabs}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2790228652";
+var _namespace_ = "MultipleDragOverlayEffect1188657489";
 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":"MultipleDragOverlayEffect2790228652__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1188657489__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_ = "NestedTableDragAndDropRow1274474789";
+var _namespace_ = "NestedTableDragAndDropRow3591949931";
 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":"NestedTableDragAndDropRow1274474789__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3591949931__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_ = "PickerContent4268976884";
+var _namespace_ = "PickerContent3914014788";
 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":"PickerContent4268976884__root"};
+export var classes = {"root":"PickerContent3914014788__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_ = "PickerContentAdditionalStep2534276490";
+var _namespace_ = "PickerContentAdditionalStep3396373009";
 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":"PickerContentAdditionalStep2534276490__root","titles":"PickerContentAdditionalStep2534276490__titles","suffix":"PickerContentAdditionalStep2534276490__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3396373009__root","titles":"PickerContentAdditionalStep3396373009__titles","suffix":"PickerContentAdditionalStep3396373009__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_ = "PickerTableListItem2226145618";
+var _namespace_ = "PickerTableListItem1067027580";
 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":"PickerTableListItem2226145618__root"};
+export var classes = {"root":"PickerTableListItem1067027580__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_ = "ScrollableContent2870402056";
+var _namespace_ = "ScrollableContent2632240809";
 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":"ScrollableContent2870402056__root"};
+export var classes = {"root":"ScrollableContent2632240809__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SingleSelectFilter/SingleSelectFilter.tsx

@@ -112,7 +112,7 @@ function _SingleSelectFilter<V, F extends FiltersMap>(
       infiniteScroll
       value={search.value}
       onChange={(e) => {
-        collection.search(e.target.value);
+        collection.search(e.target.value, { clearResult: true });
       }}
       onFocus={onFocus}
       filter={filter}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3500914143";
+var _namespace_ = "SkeletonCard34937913";
 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":"SkeletonCard3500914143__root","headerLoading":"SkeletonCard3500914143__headerLoading"};
+export var classes = {"root":"SkeletonCard34937913__root","headerLoading":"SkeletonCard34937913__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_ = "SlidingModal1759969884";
+var _namespace_ = "SlidingModal1282320360";
 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":"SlidingModal1759969884__root"};
+export var classes = {"root":"SlidingModal1282320360__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/StatusToastFromConfig/StatusToastFromConfig.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { ToastConfig, ToastType } from '@wix/bex-core';
+import { StatusToast } from '@wix/design-system';
+
+const TOAST_TYPE_TO_STATUS: {
+  [key in ToastType]?: 'success' | 'error' | 'warning' | 'info';
+} = {
+  STANDARD: 'info',
+  PREMIUM: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+};
+
+interface StatusToastFromConfigProps {
+  config: ToastConfig;
+  onClose: () => void;
+  dataHook?: string;
+  messageDataHook?: string;
+  actionDataHook?: string;
+}
+
+export const StatusToastFromConfig = ({
+  config,
+  onClose,
+  dataHook,
+  messageDataHook,
+  actionDataHook,
+}: StatusToastFromConfigProps) => {
+  const action = useMemo(() => {
+    if (!config.action?.text) {
+      return undefined;
+    }
+    const handleClick = () => {
+      config.action?.onClick?.();
+      if (config.action?.removeToastOnClick) {
+        onClose();
+      }
+    };
+    return (
+      <StatusToast.Action dataHook={actionDataHook} onClick={handleClick}>
+        {config.action.text}
+      </StatusToast.Action>
+    );
+  }, [config, onClose, actionDataHook]);
+
+  return (
+    <StatusToast
+      key={config.biName ?? config.message}
+      dataHook={dataHook}
+      status={TOAST_TYPE_TO_STATUS[config.type ?? 'STANDARD']}
+      dismissible
+      onDismiss={onClose}
+      action={action}
+    >
+      {messageDataHook ? (
+        <span data-hook={messageDataHook}>{config.message}</span>
+      ) : (
+        config.message
+      )}
+    </StatusToast>
+  );
+};

package/src/components/StatusToastFromConfig/index.ts

@@ -0,0 +1 @@
+export { StatusToastFromConfig } from './StatusToastFromConfig';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3782181898";
+var _namespace_ = "TabsFilter59641391";
 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":"TabsFilter3782181898__root","title":"TabsFilter3782181898__title"};
+export var classes = {"root":"TabsFilter59641391__root","title":"TabsFilter59641391__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_ = "ManageTagsModal2401035653";
+var _namespace_ = "ManageTagsModal1941777985";
 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":"ManageTagsModal2401035653__root"};
+export var classes = {"root":"ManageTagsModal1941777985__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import { ToastConfig, ToastType } from '@wix/bex-core';
-import { StatusToast } from '@wix/design-system';
+import React from 'react';
+import { ToastConfig } from '@wix/bex-core';
+import { StatusToastFromConfig } from '../../../StatusToastFromConfig';
 
 interface ManageTagsNotificationProps {
   toastConfig: ToastConfig;
@@ -8,56 +8,16 @@ interface ManageTagsNotificationProps {
   dataHook?: string;
 }
 
-const toastTypeToStatus: {
-  [key in ToastType]?: 'success' | 'error' | 'warning' | 'info';
-} = {
-  STANDARD: 'info',
-  PREMIUM: 'info',
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  ERROR: 'error',
-};
-
 export const ManageTagsNotification = ({
   toastConfig,
   onClose,
   dataHook,
-}: ManageTagsNotificationProps) => {
-  const actionElement = useMemo(() => {
-    if (!toastConfig.action?.text) {
-      return undefined;
-    }
-
-    const handleClick = () => {
-      toastConfig.action?.onClick?.();
-
-      if (toastConfig.action?.removeToastOnClick) {
-        onClose(toastConfig);
-      }
-    };
-
-    return (
-      <StatusToast.Action
-        dataHook="manage-tags-modal-notification-action"
-        onClick={handleClick}
-      >
-        {toastConfig.action.text}
-      </StatusToast.Action>
-    );
-  }, [toastConfig, onClose]);
-
-  return (
-    <StatusToast
-      key={toastConfig.biName ?? toastConfig.message}
-      dataHook={dataHook}
-      status={toastTypeToStatus[toastConfig.type ?? 'STANDARD']}
-      dismissible
-      onDismiss={() => onClose(toastConfig)}
-      action={actionElement}
-    >
-      <span data-hook="manage-tags-modal-notification-message">
-        {toastConfig.message}
-      </span>
-    </StatusToast>
-  );
-};
+}: ManageTagsNotificationProps) => (
+  <StatusToastFromConfig
+    config={toastConfig}
+    onClose={() => onClose(toastConfig)}
+    dataHook={dataHook}
+    messageDataHook="manage-tags-modal-notification-message"
+    actionDataHook="manage-tags-modal-notification-action"
+  />
+);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1322820676";
+var _namespace_ = "ToolbarItem2564123110";
 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":"ToolbarItem1322820676__root"};
+export var classes = {"root":"ToolbarItem2564123110__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_ = "ToolbarItemBox2303251495";
+var _namespace_ = "ToolbarItemBox959252984";
 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":"ToolbarItemBox2303251495__root"};
+export var classes = {"root":"ToolbarItemBox959252984__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_ = "common3285940329";
+var _namespace_ = "common78942283";
 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":"common3285940329__root","column":"common3285940329__column","fullHeight":"common3285940329__fullHeight"};
+export var classes = {"root":"common78942283__root","column":"common78942283__column","fullHeight":"common78942283__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useFilterCollectionStates.tsx

@@ -48,7 +48,11 @@ export function useFilterCollectionStates<T, F extends FiltersMap>(
     </Box>
   );
 
-  if (collection.showInitialLoader || collection.result.status.isLoading) {
+  if (
+    collection.showInitialLoader ||
+    collection.result.status.isLoading ||
+    collection.showRefreshLoader
+  ) {
     return {
       showInitialLoader: true,
       fixedFooter: getFixedFooter('initial-loader', <Loader size="small" />),

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

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