@wix/patterns 1.476.0 → 1.478.0

package/src/components/ImportButton/ImportButton.tsx

@@ -13,6 +13,7 @@ import { ImportButtonProps } from './ImportProps';
 import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const { toolbarType = 'default', config, renderFieldEditor } = props;
@@ -82,20 +83,29 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
           dataHook="import-button"
           onClick={state.open}
           icon={importIcon}
+          disabled={props.disabled}
+          disabledReason={props.disabledReason}
         >
           {t('cairo.import.import')}
         </ResponsiveButton>
       ) : (
-        <Button
-          priority="secondary"
-          size="small"
-          ellipsis
-          prefixIcon={importIcon}
-          dataHook="import-button"
-          onClick={state.open}
+        <DisabledTooltip
+          content={props.disabledReason}
+          disabled={!props.disabledReason}
+          dataHook="import-button-disabled-tooltip"
         >
-          {t('cairo.import.import')}
-        </Button>
+          <Button
+            priority="secondary"
+            size="small"
+            ellipsis
+            prefixIcon={importIcon}
+            dataHook="import-button"
+            onClick={state.open}
+            disabled={props.disabled}
+          >
+            {t('cairo.import.import')}
+          </Button>
+        </DisabledTooltip>
       )}
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { ButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import ImportModalUniDriver from './ImportModal.uni.driver';
+import { DisabledTooltipButtonUniDriver } from '../DisabledTooltip/DisabledTooltipButton.uni.driver';
 
 export function ImportButtonUniDriver(base: UniDriver, body: UniDriver) {
   const getButton = () => ButtonUniDriver(base, body);
@@ -12,6 +13,11 @@ export function ImportButtonUniDriver(base: UniDriver, body: UniDriver) {
     click: () => getButton().click(),
     /** Indicates whether import button exists in the table toolbar */
     exists: () => getButton().exists(),
+    isDisabled: () => getButton().isButtonDisabled(),
+    getDisabledTooltipText: () =>
+      DisabledTooltipButtonUniDriver(body, body, {
+        dataHook: 'import-button',
+      }).getTooltipText(),
   };
 }
 

package/src/components/ImportButton/ImportProps.tsx

@@ -37,6 +37,8 @@ export type ImportButtonProps = ImportButtonParams & {
    * `Button`.
    */
   toolbarType?: ImportButtonToolbarType;
+  disabled?: boolean;
+  disabledReason?: ReactNode;
 };
 
 export type ImportModalProps = ImportButtonParams;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload4035137898";
+var _namespace_ = "ImportStepUpload3017035245";
 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":"ImportStepUpload4035137898__root","fileUpload":"ImportStepUpload4035137898__fileUpload"};
+export var classes = {"root":"ImportStepUpload3017035245__root","fileUpload":"ImportStepUpload3017035245__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_ = "InputOverflow3820063813";
+var _namespace_ = "InputOverflow569595353";
 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":"InputOverflow3820063813__root"};
+export var classes = {"root":"InputOverflow569595353__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -7,6 +7,9 @@ import type { EditableTableProps } from '../EditableTable';
 import { InitialLoader } from '../InitialLoader';
 import { LayoutSwitchButton } from '../LayoutSwitchButton';
 import type { ILayoutSwitchState } from '../../state/ILayoutSwitchState';
+import type { ToolbarCollectionState } from '../../state';
+import type { TableColumn } from '../../model';
+import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';
 
 const LazyEditableTable = React.lazy(() =>
   import('../EditableTable').then((m) => ({
@@ -28,6 +31,40 @@ export interface LayoutSwitchProps<T, F extends FiltersMap> {
   spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;
 }
 
+// Grid syncs no columns of its own, so while it is shown the shared toolbar
+// takes the table's columns. Without them, multi-level sorting has nothing to
+// offer when grid is the first layout. Mirrors useColumnsSyncProps, which does
+// the same for the table.
+function useTableColumnsWhileGridShown<T, F extends FiltersMap>({
+  toolbar,
+  isGridShown,
+  tableColumns,
+}: {
+  toolbar: ToolbarCollectionState<T, F>;
+  isGridShown: boolean;
+  tableColumns?: TableColumn<T>[];
+}) {
+  const router = useWixPatternsRouter();
+  const fieldsSource = toolbar.collectionFieldsSource;
+  const areSourceColumnsLoaded =
+    !fieldsSource || fieldsSource.initTask.status.isSuccess;
+
+  useEffect(() => {
+    if (!isGridShown || !tableColumns) {
+      return;
+    }
+
+    toolbar.setNewColumns(tableColumns);
+
+    // Under a schema source tableColumns holds only the extras, so the stale
+    // check runs against the merged columns, and only once the source fields
+    // are among them. A state restored from the router cache keeps its sort.
+    if (areSourceColumnsLoaded && !router?.isUsingCache) {
+      toolbar._adjustSortWithNewColumns(toolbar.columns);
+    }
+  }, [isGridShown, tableColumns, areSourceColumnsLoaded]);
+}
+
 function _LayoutSwitch<T, F extends FiltersMap>({
   state,
   importButton,
@@ -59,6 +96,12 @@ function _LayoutSwitch<T, F extends FiltersMap>({
 
   useEffect(() => state.init(), []);
 
+  useTableColumnsWhileGridShown({
+    toolbar,
+    isGridShown: viewTypeState.viewType === 'grid',
+    tableColumns: tableProps?.columns,
+  });
+
   // If the stored viewType is not among the available options (e.g. 'grid' was
   // persisted but gridProps is not provided), persist the correction so the next
   // load starts from a valid value. changeViewType also updates dataCapsule.

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow980717631";
+var _namespace_ = "LoadingRow4090891165";
 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":"LoadingRow980717631__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow980717631__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow4090891165__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow4090891165__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_ = "MaxHeightText269134004";
+var _namespace_ = "MaxHeightText879506298";
 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":"MaxHeightText269134004__root"};
+export var classes = {"root":"MaxHeightText879506298__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_ = "MaxLines19155137";
+var _namespace_ = "MaxLines1771161255";
 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":"MaxLines19155137__root"};
+export var classes = {"root":"MaxLines1771161255__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_ = "MultiBulkActionToolbar1148899665";
+var _namespace_ = "MultiBulkActionToolbar4024882803";
 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":"MultiBulkActionToolbar1148899665__root","leftGroupWrapper":"MultiBulkActionToolbar1148899665__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1148899665__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1148899665__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4024882803__root","leftGroupWrapper":"MultiBulkActionToolbar4024882803__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4024882803__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4024882803__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_ = "NestedTablePlaceholderStatesRow1592192907";
+var _namespace_ = "NestedTablePlaceholderStatesRow2386184459";
 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":"NestedTablePlaceholderStatesRow1592192907__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2386184459__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_ = "NestedTableRow1911442264";
+var _namespace_ = "NestedTableRow3747661608";
 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":"NestedTableRow1911442264__root","firstLevel":"NestedTableRow1911442264__firstLevel","placeholder":"NestedTableRow1911442264__placeholder","parentHovered":"NestedTableRow1911442264__parentHovered"};
+export var classes = {"root":"NestedTableRow3747661608__root","firstLevel":"NestedTableRow3747661608__firstLevel","placeholder":"NestedTableRow3747661608__placeholder","parentHovered":"NestedTableRow3747661608__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_ = "MultipleDragOverlayEffect3811694775";
+var _namespace_ = "MultipleDragOverlayEffect3362159254";
 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":"MultipleDragOverlayEffect3811694775__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3362159254__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_ = "NestedTableDragAndDropRow522737346";
+var _namespace_ = "NestedTableDragAndDropRow1383889673";
 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":"NestedTableDragAndDropRow522737346__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1383889673__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_ = "PickerContent182243878";
+var _namespace_ = "PickerContent3516515489";
 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":"PickerContent182243878__root"};
+export var classes = {"root":"PickerContent3516515489__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_ = "PickerContentAdditionalStep3951326248";
+var _namespace_ = "PickerContentAdditionalStep154265560";
 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":"PickerContentAdditionalStep3951326248__root","titles":"PickerContentAdditionalStep3951326248__titles","suffix":"PickerContentAdditionalStep3951326248__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep154265560__root","titles":"PickerContentAdditionalStep154265560__titles","suffix":"PickerContentAdditionalStep154265560__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_ = "PickerTableListItem1445789695";
+var _namespace_ = "PickerTableListItem1307611848";
 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":"PickerTableListItem1445789695__root"};
+export var classes = {"root":"PickerTableListItem1307611848__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -6,18 +6,20 @@ import {
   IconElement,
   Tooltip,
 } from '@wix/design-system';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { ToolbarResponsivePriorityState } from '../../state/Toolbar/ToolbarResponsivePriorityState';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 export type ResponsiveButtonProps = ButtonAsButtonProps<{
   dataHook?: string;
   icon?: IconElement;
   state: ToolbarResponsivePriorityState;
   shouldShrink?: boolean;
+  disabledReason?: ReactNode;
 }>;
 
 const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
@@ -29,6 +31,7 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       children,
       state,
       shouldShrink: shouldShrinkProp = true,
+      disabledReason,
       ...rest
     } = props;
 
@@ -48,10 +51,13 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       ? shouldShrinkProp
       : state._shouldShrink;
 
+    const showDisabledReason = !!rest.disabled && !!disabledReason;
+    const tooltipSuffix = showDisabledReason ? 'disabled-tooltip' : 'tooltip';
+
     return shouldShrink ? (
       <Tooltip
-        content={children}
-        dataHook={dataHook ? `${dataHook}-tooltip` : undefined}
+        content={showDisabledReason ? disabledReason : children}
+        dataHook={dataHook ? `${dataHook}-${tooltipSuffix}` : undefined}
       >
         <Box direction="vertical" minWidth="30px">
           <IconButton
@@ -67,18 +73,24 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       </Tooltip>
     ) : (
       <div style={{ display: 'contents' }}>
-        <Button
-          ref={ref}
-          as={as}
-          {...rest}
-          dataHook={dataHook}
-          size={sizes.small}
-          priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
-          prefixIcon={icon}
-          suffixIcon={button.suffix}
+        <DisabledTooltip
+          content={disabledReason}
+          disabled={!showDisabledReason}
+          dataHook={dataHook ? `${dataHook}-disabled-tooltip` : undefined}
         >
-          {children}
-        </Button>
+          <Button
+            ref={ref}
+            as={as}
+            {...rest}
+            dataHook={dataHook}
+            size={sizes.small}
+            priority={isBmHarmonyTheme ? 'tertiary' : 'secondary'}
+            prefixIcon={icon}
+            suffixIcon={button.suffix}
+          >
+            {children}
+          </Button>
+        </DisabledTooltip>
       </div>
     );
   },

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -119,6 +119,7 @@ export const schemaFieldManagement = (
               namePlaceholder:
                 ft.namePlaceholder ??
                 (standard ? t(standard.namePlaceholderKey) : undefined),
+              keyBase: ft.keyBase,
               subtitle: ft.subtitle,
               group: ft.group,
               supportsPii: ft.supportsPii,
@@ -137,6 +138,7 @@ export const schemaFieldManagement = (
                     id: def.type,
                     label: def.display.label,
                     namePlaceholder: def.fieldModal.namePlaceholder,
+                    keyBase: def.fieldModal.keyBase,
                     subtitle: def.fieldModal.subtitle,
                     group: def.fieldModal.group,
                     supportsPii: def.fieldModal.supportsPii,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2382177879";
+var _namespace_ = "ScrollableContent3942402169";
 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":"ScrollableContent2382177879__root"};
+export var classes = {"root":"ScrollableContent3942402169__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_ = "SetupWidget2747578204";
+var _namespace_ = "SetupWidget2418838366";
 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":"SetupWidget2747578204__root","row":"SetupWidget2747578204__row","completedCta":"SetupWidget2747578204__completedCta","secondaryCta":"SetupWidget2747578204__secondaryCta","card":"SetupWidget2747578204__card","stepIcon":"SetupWidget2747578204__stepIcon","chevron":"SetupWidget2747578204__chevron","chevronDisabled":"SetupWidget2747578204__chevronDisabled","inProgressLabel":"SetupWidget2747578204__inProgressLabel"};
+export var classes = {"root":"SetupWidget2418838366__root","row":"SetupWidget2418838366__row","completedCta":"SetupWidget2418838366__completedCta","secondaryCta":"SetupWidget2418838366__secondaryCta","card":"SetupWidget2418838366__card","stepIcon":"SetupWidget2418838366__stepIcon","chevron":"SetupWidget2418838366__chevron","chevronDisabled":"SetupWidget2418838366__chevronDisabled","inProgressLabel":"SetupWidget2418838366__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_ = "SkeletonCard4213992047";
+var _namespace_ = "SkeletonCard2955302995";
 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":"SkeletonCard4213992047__root","headerLoading":"SkeletonCard4213992047__headerLoading"};
+export var classes = {"root":"SkeletonCard2955302995__root","headerLoading":"SkeletonCard2955302995__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_ = "SlidingModal3379082478";
+var _namespace_ = "SlidingModal1730162231";
 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":"SlidingModal3379082478__root"};
+export var classes = {"root":"SlidingModal1730162231__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_ = "AddFieldColumnHeader1074689252";
+var _namespace_ = "AddFieldColumnHeader3509584085";
 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":"AddFieldColumnHeader1074689252__root","anchorLayer":"AddFieldColumnHeader1074689252__anchorLayer","popover":"AddFieldColumnHeader1074689252__popover","title":"AddFieldColumnHeader1074689252__title","hoverBridge":"AddFieldColumnHeader1074689252__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3509584085__root","anchorLayer":"AddFieldColumnHeader3509584085__anchorLayer","popover":"AddFieldColumnHeader3509584085__popover","title":"AddFieldColumnHeader3509584085__title","hoverBridge":"AddFieldColumnHeader3509584085__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_ = "TabsFilter1894957986";
+var _namespace_ = "TabsFilter1936161386";
 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":"TabsFilter1894957986__root","titleBox":"TabsFilter1894957986__titleBox"};
+export var classes = {"root":"TabsFilter1936161386__root","titleBox":"TabsFilter1936161386__titleBox"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -110,7 +110,8 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
     mobilePopoverProps,
   } = props;
   const { itemKey, itemName } = filter;
-  const size = useBmHarmonyTheme() ? 'small' : undefined;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const size = isBmHarmonyTheme ? 'small' : undefined;
 
   const table = useToolbarCollectionContext();
   const filterAllValueTotal = useFilterValueTotalState({
@@ -245,7 +246,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         }}
         dataHook="collection-tabs-filter"
         width="100%"
-        height={60}
+        height={isBmHarmonyTheme ? undefined : 60}
         direction="vertical"
         verticalAlign="middle"
         flexGrow={1}

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

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