@wix/patterns 1.338.0 → 1.340.0

package/dist/types/state/Toolbar/ToolbarResponsivePriorityState.d.ts

@@ -8,13 +8,13 @@ export interface ToolbarResponsivePriorityStateParams {
 }
 export declare class ToolbarResponsivePriorityState {
     readonly responsive: ToolbarResponsiveState;
-    readonly getNextToShrink: () => ToolbarResponsivePriorityState;
-    readonly getNextToExpand: () => ToolbarResponsivePriorityState;
+    getNextToShrink: () => ToolbarResponsivePriorityState;
+    getNextToExpand: () => ToolbarResponsivePriorityState;
     readonly _count: number;
     _minWidth: number;
     _collapsedWidth: number;
     _shouldShrink: boolean;
-    _groupElement?: HTMLElement | null | undefined;
+    _groupElement: HTMLElement | null;
     constructor(params: ToolbarResponsivePriorityStateParams);
     _syncWidth(): void;
     _expandIfNeeded({ preCalculatedAvailableSpace, }?: {

package/dist/types/state/Toolbar/ToolbarResponsivePriorityState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarResponsivePriorityState.d.ts","sourceRoot":"","sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,WAAW,oCAAoC;IACnD,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,8BAA8B;IACzC,QAAQ,CAAC,UAAU,yBAAC;IACpB,QAAQ,CAAC,eAAe,uCAAC;IACzB,QAAQ,CAAC,eAAe,uCAAC;IACzB,QAAQ,CAAC,MAAM,SAAC;IAEhB,SAAS,SAAC;IACV,eAAe,SAAC;IAEhB,aAAa,UAAS;IAEtB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;gBAEnC,MAAM,EAAE,oCAAoC;IAmBxD,UAAU;IAeV,eAAe,CAAC,EACd,2BAA2B,GAC5B,GAAE;QACD,2BAA2B,CAAC,EAAE,MAAM,CAAC;KACjC;IA6BN,eAAe;CAkBhB"}
+{"version":3,"file":"ToolbarResponsivePriorityState.d.ts","sourceRoot":"","sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,WAAW,oCAAoC;IACnD,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,8BAA8B;IACzC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAC5C,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,eAAe,EAAE,MAAM,8BAA8B,CAAC;IACtD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAExB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IAExB,aAAa,UAAS;IAEtB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAQ;gBAE7B,MAAM,EAAE,oCAAoC;IAmBxD,UAAU;IAeV,eAAe,CAAC,EACd,2BAA2B,GAC5B,GAAE;QACD,2BAA2B,CAAC,EAAE,MAAM,CAAC;KACjC;IAoCN,eAAe;CA4BhB"}

package/dist/types/state/Toolbar/ToolbarResponsiveState.d.ts

@@ -2,6 +2,7 @@ import { HorizontalSpaceAvailableState } from '../Responsive/HorizontalSpaceAvai
 import { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';
 import { HorizontalOverflowState } from '../Responsive/HorizontalOverflowState';
 import { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';
+import { ToolbarLeftGroupState } from './ToolbarLeftGroupState';
 export interface ToolbarResponsiveStateParams {
     readonly toolbar: ToolbarState<any, any>;
 }
@@ -11,9 +12,11 @@ export declare class ToolbarResponsiveState {
     readonly filters: ToolbarResponsivePriorityState;
     _nextToShrink: ToolbarResponsivePriorityState;
     _nextToExpand: ToolbarResponsivePriorityState;
+    _expandCooldown: boolean;
     readonly actionsAvailableSpace: HorizontalSpaceAvailableState;
     readonly overflow: HorizontalOverflowState;
     readonly toolbar: ToolbarState<any, any>;
+    leftGroupState: ToolbarLeftGroupState<any, any> | null;
     get container(): import("@wix/bex-core").WixPatternsContainer;
     constructor(params: ToolbarResponsiveStateParams);
     get responsiveDisabled(): boolean;

package/dist/types/state/Toolbar/ToolbarResponsiveState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarResponsiveState.d.ts","sourceRoot":"","sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,6CAA6C,CAAC;AAC5F,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,kDAAkD,CAAC;AAEhF,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;CAC1C;AAED,qBAAa,sBAAsB;IACjC,QAAQ,CAAC,OAAO,EAAE,8BAA8B,CAAC;IACjD,QAAQ,CAAC,MAAM,EAAE,8BAA8B,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,8BAA8B,CAAC;IAEjD,aAAa,iCAAC;IACd,aAAa,iCAAC;IAEd,QAAQ,CAAC,qBAAqB,gCAAC;IAC/B,QAAQ,CAAC,QAAQ,0BAAC;IAElB,QAAQ,CAAC,OAAO,yBAAC;IAEjB,IAAI,SAAS,iDAEZ;gBAEW,MAAM,EAAE,4BAA4B;IA2ChD,IAAI,kBAAkB,YAYrB;IAED,IAAI;CA6CL"}
+{"version":3,"file":"ToolbarResponsiveState.d.ts","sourceRoot":"","sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,6CAA6C,CAAC;AAC5F,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,kDAAkD,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;CAC1C;AAED,qBAAa,sBAAsB;IACjC,QAAQ,CAAC,OAAO,EAAE,8BAA8B,CAAC;IACjD,QAAQ,CAAC,MAAM,EAAE,8BAA8B,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,8BAA8B,CAAC;IAEjD,aAAa,EAAE,8BAA8B,CAAC;IAC9C,aAAa,EAAE,8BAA8B,CAAC;IAE9C,eAAe,UAAS;IAExB,QAAQ,CAAC,qBAAqB,EAAE,6BAA6B,CAAC;IAC9D,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAC;IAE3C,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAEzC,cAAc,EAAE,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAQ;IAE9D,IAAI,SAAS,iDAEZ;gBAEW,MAAM,EAAE,4BAA4B;IA2ChD,IAAI,kBAAkB,YAYrB;IAED,IAAI;CA6CL"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.338.0";
+export declare const version = "patterns@1.340.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.338.0",
+  "version": "1.340.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -423,5 +423,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "a2b75718f744a0bd8cbf9d6aba3f7ce88b8f1980568c53d6f01ed8a1"
+  "falconPackageHash": "09227ebe9980ce8147c20bf962deeb9cd4b97bdcd4b8f14d89fd53b5"
 }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3580489356";
+var _namespace_ = "Collapse332668825";
 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":"Collapse3580489356__root","exit":"Collapse3580489356__exit"};
+export var classes = {"root":"Collapse332668825__root","exit":"Collapse332668825__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

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

package/src/components/CollectionToolbar/CollectionToolbar.st.css

@@ -1,21 +1,36 @@
 .root {
-  -st-states: views, mobile;
+  -st-states: views, mobile, responsiveMode(enum(title, views, tabs, disabled));
 }
 
 .left {
-  -st-states: expandable;
+  -st-states: expandable, title;
   min-width: 0;
 }
 
-.root:views .left {
-  flex-shrink: 1;
-  flex-grow: 0;
-}
-
 .left:expandable {
   flex: auto;
 }
 
+.left:title > * {
+  width: 100%;
+}
+
+.root:responsiveMode(title) .left {
+  flex: 1 100;
+  min-width: 50px;
+}
+
+.root:responsiveMode(tabs) .left,
+.root:responsiveMode(tabs) .left:expandable {
+  flex: 1 100 auto;
+  min-width: 140px;
+}
+
+.root:responsiveMode(tabs) .left > * {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
 .root .right {
   justify-content: flex-end !important;
   flex-grow: 1;
@@ -30,6 +45,12 @@
   flex-basis: 0;
 }
 
+.root:responsiveMode(tabs) .right,
+.root:responsiveMode(title) .right {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
 .root .right.fullWidth {
   margin-inline-start: 0 !important;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2950418002";
+var _namespace_ = "CollectionToolbar549189182";
 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":"CollectionToolbar2950418002__root","left":"CollectionToolbar2950418002__left","right":"CollectionToolbar2950418002__right","fullWidth":"CollectionToolbar2950418002__fullWidth"};
+export var classes = {"root":"CollectionToolbar549189182__root","left":"CollectionToolbar549189182__left","right":"CollectionToolbar549189182__right","fullWidth":"CollectionToolbar549189182__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -27,12 +27,14 @@ import {
 import { useCollectionToolbarSyncedProps } from './useCollectionToolbarSyncedProps';
 import { useIsCollectionToolbarExists } from './useIsCollectionToolbarExists';
 import { CollectionToolbarActionsToolbarItemsGroup } from './CollectionToolbarActionsToolbarItemsGroup';
-import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
 import { MoreActions } from '../MoreActions';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { isValidElement } from '../isValidElement';
 import { CollectionSearch } from '../CollectionSearch';
+import { CollectionToolbarLeftGroup } from './CollectionToolbarLeftGroup';
+import { CollectionToolbarActionsGroupResponsiveLayout } from './CollectionToolbarActionsGroupResponsiveLayout';
+import { getToolbarMode } from './toolbarModeUtils';
 
 export interface CollectionToolbarProps<T, F extends FiltersMap> {
   state: ToolbarCollectionState<T, F>;
@@ -213,31 +215,30 @@ function _CollectionToolbar<T, F extends FiltersMap>(
       ? CollectionToolbarActionsToolbarItemsGroup
       : CollectionToolbarActionsGroupResponsiveLayout;
 
+  const responsiveMode = getToolbarMode({
+    isDisabled: responsive.responsiveDisabled,
+    hasTabs: !!tabs,
+    hasTitle: !!left && !viewsToolbarItem,
+    hasViews: !!viewsToolbarItem,
+  });
+
   const toolbarElement = (
     <>
       <TableToolbar.ItemGroup
         position="start"
-        className={st(classes.left, { expandable: !!tabs })}
+        className={st(classes.left, {
+          expandable: !!tabs,
+          title: responsiveMode === 'title',
+        })}
         dataHook="collection-table-toolbar-filters"
       >
-        {left ?? (
-          <>
-            {viewsToolbarItem && (
-              <InitialLoadingConditional
-                state={state}
-                loadingElement={
-                  <CollectionToolbarSkeletonItem
-                    dataHook="toolbar-views-skeleton"
-                    width="100px"
-                  />
-                }
-              >
-                {viewsToolbarItem}
-              </InitialLoadingConditional>
-            )}
-            {!viewsToolbarItem ? filtersElement : undefined}
-          </>
-        )}
+        <CollectionToolbarLeftGroup
+          state={state}
+          left={left}
+          viewsToolbarItem={viewsToolbarItem}
+          filtersElement={filtersElement}
+          mode={responsiveMode}
+        />
       </TableToolbar.ItemGroup>
 
       <TableToolbar.ItemGroup
@@ -259,6 +260,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           search={searchElement}
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}
+          hasTabs={!!tabs}
         />
 
         {primaryActionButton && (
@@ -316,6 +318,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
               className={st(classes.root, {
                 views: !responsive.responsiveDisabled,
                 mobile: isMobile,
+                responsiveMode,
               })}
               dataHook="collection-table-toolbar"
             >

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -13,4 +13,5 @@ export interface CollectionToolbarActionsGroupProps {
   exportButton?: ReactElement;
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
+  hasTabs?: boolean;
 }

package/src/components/CollectionToolbar/CollectionToolbarLeftGroup.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
+import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../../state';
+import { InitialLoadingConditional } from '../InitialLoadingConditional';
+import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
+import { ToolbarLeftGroupState } from '../../state/Toolbar/ToolbarLeftGroupState';
+import { ToolbarMode } from './toolbarModeUtils';
+
+export interface CollectionToolbarLeftGroupProps<T, F extends FiltersMap> {
+  state: ToolbarCollectionState<T, F>;
+  left?: ReactElement;
+  viewsToolbarItem?: ReactElement;
+  filtersElement?: ReactElement;
+  mode: ToolbarMode;
+}
+
+function _CollectionToolbarLeftGroup<T, F extends FiltersMap>(
+  props: CollectionToolbarLeftGroupProps<T, F>,
+) {
+  const { state, left, viewsToolbarItem, filtersElement, mode } = props;
+
+  const {
+    toolbar: { responsive },
+  } = state;
+
+  const isLeftElementMode = mode === 'tabs' || mode === 'title';
+  const container = useRef<HTMLDivElement | null>(null);
+
+  const [leftGroupState] = useState(
+    () =>
+      new ToolbarLeftGroupState({
+        responsive,
+        mode,
+        minWidth: mode === 'title' ? 50 : 140,
+        getTabsState: () => state.tabs,
+      }),
+  );
+
+  useEffect(() => leftGroupState.init(container.current?.parentElement), []);
+
+  const content = left ?? (
+    <>
+      {viewsToolbarItem && (
+        <InitialLoadingConditional
+          state={state}
+          loadingElement={
+            <CollectionToolbarSkeletonItem
+              dataHook="toolbar-views-skeleton"
+              width="100px"
+            />
+          }
+        >
+          {viewsToolbarItem}
+        </InitialLoadingConditional>
+      )}
+      {!viewsToolbarItem ? filtersElement : undefined}
+    </>
+  );
+
+  if (isLeftElementMode && !responsive.responsiveDisabled) {
+    return (
+      <Box ref={(element) => (container.current = element)}>{content}</Box>
+    );
+  }
+
+  return <>{content}</>;
+}
+
+export const CollectionToolbarLeftGroup = observer(_CollectionToolbarLeftGroup);

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3532595144";
+var _namespace_ = "SearchOrCustomFilter1540080530";
 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":"SearchOrCustomFilter3532595144__root","search":"SearchOrCustomFilter3532595144__search","searchMobile":"SearchOrCustomFilter3532595144__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1540080530__root","search":"SearchOrCustomFilter1540080530__search","searchMobile":"SearchOrCustomFilter1540080530__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.tsx

@@ -21,11 +21,7 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
   const {
     toolbar: { responsive },
   } = useToolbarCollectionContext();
-  const {
-    _nextToShrink,
-    search: searchResponsive,
-    responsiveDisabled,
-  } = responsive;
+  const { search: searchResponsive, responsiveDisabled } = responsive;
 
   const isMobile = useIsMobile();
 
@@ -96,16 +92,10 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
     );
   }
 
-  const shouldShrink =
-    _nextToShrink._count >= searchResponsive._count &&
-    searchResponsive._shouldShrink;
+  const shouldShrink = searchResponsive._shouldShrink;
 
   return (
-    <Box
-      direction="horizontal"
-      maxWidth="240px"
-      minWidth={shouldShrink ? '139px' : '140px'}
-    >
+    <Box direction="horizontal" width={shouldShrink ? '140px' : '240px'}>
       <Box width={shouldShrink ? '140px' : '240px'}>{search}</Box>
     </Box>
   );

package/src/components/CollectionToolbar/toolbarModeUtils.ts

@@ -0,0 +1,27 @@
+export type ToolbarMode = 'title' | 'views' | 'tabs' | 'disabled';
+
+export function getToolbarMode({
+  isDisabled,
+  hasTabs,
+  hasTitle,
+  hasViews,
+}: {
+  isDisabled: boolean;
+  hasViews: boolean;
+  hasTabs: boolean;
+  hasTitle: boolean;
+}): ToolbarMode {
+  if (isDisabled) {
+    return 'disabled';
+  }
+  if (hasTabs) {
+    return 'tabs';
+  }
+  if (hasViews) {
+    return 'views';
+  }
+  if (hasTitle) {
+    return 'title';
+  }
+  return 'disabled';
+}

package/src/components/CollectionToolbar/useCollectionToolbarSyncedProps.ts

@@ -20,7 +20,7 @@ export function useCollectionToolbarSyncedProps<T, F extends FiltersMap>(
 
   const syncedProps = useSyncProps(
     {
-      useResponsiveLayout: !left && !!viewsToolbarItem,
+      useResponsiveLayout: !!viewsToolbarItem || !!left,
     },
     {
       useResponsiveLayout: observable.ref,

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomFieldsTransforms/transformOperatorFilterToWQL.tsx

@@ -20,7 +20,7 @@ export const transformOperatorFilterToWQL = <T,>(
     return [
       {
         [filterName]: {
-          $eq: null,
+          $isEmpty: true,
         },
       },
     ];

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

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

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3281401398";
+var _namespace_ = "Heading3595635433";
 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":"Heading3281401398__root"};
+export var classes = {"root":"Heading3595635433__root"};
 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_ = "InputOverflow1183490160";
+var _namespace_ = "InputOverflow3652821244";
 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":"InputOverflow1183490160__root"};
+export var classes = {"root":"InputOverflow3652821244__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_ = "LoadingRow3008612773";
+var _namespace_ = "LoadingRow924286068";
 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":"LoadingRow3008612773__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3008612773__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow924286068__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow924286068__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_ = "MaxHeightText1142318275";
+var _namespace_ = "MaxHeightText1816593975";
 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":"MaxHeightText1142318275__root"};
+export var classes = {"root":"MaxHeightText1816593975__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};