@wix/patterns 1.351.0 → 1.353.0

package/src/components/PageSubTitle/PageSubTitle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, TextButton } from '@wix/design-system';
+import { Box, Text, TextButton } from '@wix/design-system';
 import {
   useCollectionPageContext,
   useWixPatternsContainer,
@@ -40,33 +40,47 @@ export const PageSubTitle = ({ text, learnMore }: PageSubTitleProps) => {
 
   const isMobile = useIsMobile();
 
+  const learnMoreSuffix = learnMore ? (
+    <TextButton
+      dataHook="subtitle-learn-more-cta"
+      as="a"
+      rel="noopener"
+      target="_blank"
+      href={learnMore.url}
+      size={isMobile ? 'small' : 'medium'}
+      style={{ marginLeft: '6px' }}
+      onClick={() => {
+        bi?.reportBI(
+          withoutDefaults(cairoPageCtaClicked)({
+            location: 'Collection Page Header',
+            ctaType: 'link',
+            ctaName: 'Learn more',
+          }),
+        );
+      }}
+    >
+      {learnMore.label ?? t('cairo.subtitle.learnMore')}
+    </TextButton>
+  ) : undefined;
+
   return (
-    <Box dataHook="page-subtitle" display="inline">
-      {text}
-      {learnMore && (
-        <>
-          <Box inline marginLeft="SP1" />
-          <TextButton
-            dataHook="subtitle-learn-more-cta"
-            as="a"
-            rel="noopener"
-            target="_blank"
-            href={learnMore.url}
-            size={isMobile ? 'small' : 'medium'}
-            onClick={() => {
-              bi?.reportBI(
-                withoutDefaults(cairoPageCtaClicked)({
-                  location: 'Collection Page Header',
-                  ctaType: 'link',
-                  ctaName: 'Learn more',
-                }),
-              );
-            }}
-          >
-            {learnMore.label ?? t('cairo.subtitle.learnMore')}
-          </TextButton>
-        </>
-      )}
+    <Box
+      dataHook="page-subtitle"
+      width="100%"
+      minWidth={0}
+      verticalAlign="bottom"
+    >
+      <Text
+        ellipsis
+        secondary
+        maxLines={2}
+        suffix={learnMoreSuffix}
+        tooltipProps={{
+          placement: 'auto',
+        }}
+      >
+        {text}
+      </Text>
     </Box>
   );
 };

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3984652993";
+var _namespace_ = "PickerContent1227726627";
 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":"PickerContent3984652993__root"};
+export var classes = {"root":"PickerContent1227726627__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_ = "PickerContentAdditionalStep3306084158";
+var _namespace_ = "PickerContentAdditionalStep4012553907";
 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":"PickerContentAdditionalStep3306084158__root","titles":"PickerContentAdditionalStep3306084158__titles","suffix":"PickerContentAdditionalStep3306084158__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4012553907__root","titles":"PickerContentAdditionalStep4012553907__titles","suffix":"PickerContentAdditionalStep4012553907__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_ = "PickerTableListItem711606188";
+var _namespace_ = "PickerTableListItem177832388";
 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":"PickerTableListItem711606188__root"};
+export var classes = {"root":"PickerTableListItem177832388__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_ = "ScrollableContent3991551";
+var _namespace_ = "ScrollableContent1892891984";
 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":"ScrollableContent3991551__root"};
+export var classes = {"root":"ScrollableContent1892891984__root"};
 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_ = "SkeletonCard2153138515";
+var _namespace_ = "SkeletonCard1199588018";
 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":"SkeletonCard2153138515__root","headerLoading":"SkeletonCard2153138515__headerLoading"};
+export var classes = {"root":"SkeletonCard1199588018__root","headerLoading":"SkeletonCard1199588018__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_ = "SlidingModal3454472159";
+var _namespace_ = "SlidingModal1303239132";
 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":"SlidingModal3454472159__root"};
+export var classes = {"root":"SlidingModal1303239132__root"};
 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_ = "TabsFilter3634411749";
+var _namespace_ = "TabsFilter735757606";
 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":"TabsFilter3634411749__root","title":"TabsFilter3634411749__title"};
+export var classes = {"root":"TabsFilter735757606__root","title":"TabsFilter735757606__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_ = "ManageTagsModal1940081";
+var _namespace_ = "ManageTagsModal1707694763";
 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":"ManageTagsModal1940081__root"};
+export var classes = {"root":"ManageTagsModal1707694763__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1830040579";
+var _namespace_ = "ToolbarItem2110820632";
 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":"ToolbarItem1830040579__root"};
+export var classes = {"root":"ToolbarItem2110820632__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_ = "ToolbarItemBox832469890";
+var _namespace_ = "ToolbarItemBox244016149";
 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":"ToolbarItemBox832469890__root"};
+export var classes = {"root":"ToolbarItemBox244016149__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_ = "common3328124017";
+var _namespace_ = "common3516241480";
 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":"common3328124017__root","column":"common3328124017__column","fullHeight":"common3328124017__fullHeight"};
+export var classes = {"root":"common3516241480__root","column":"common3516241480__column","fullHeight":"common3516241480__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useOperatorFilterState.ts

@@ -1,37 +1,25 @@
 import { useState } from 'react';
 import { OperatorFilterPickerState } from '../state/OperatorFilterPickerState';
-import { FilterOperator, OperatorFilterValue } from '@wix/bex-core';
+import { OperatorFilterValue } from '@wix/bex-core';
 import type { Filter } from '@wix/bex-core';
 import { useFilterToolbarState } from '../providers';
 
 export interface UseOperatorFilterStateParams<T> {
   filter: Filter<OperatorFilterValue<T>>;
-  allowedOperators: FilterOperator[];
 }
 
 /**
  * Hook to create and manage OperatorFilterPickerState
- * Follows the same pattern as useDateRangeFilterState
  */
 export function useOperatorFilterState<T>(
   params: UseOperatorFilterStateParams<T>,
 ) {
-  const { filter, allowedOperators } = params;
-
+  const { filter } = params;
   const toolbar = useFilterToolbarState();
 
-  const [state] = useState(() => {
-    if (filter.value === undefined) {
-      filter.changeValue(
-        { operator: allowedOperators[0], value: null },
-        { emitEvents: [] },
-      );
-    }
-    return new OperatorFilterPickerState<T>({
-      filter,
-      toolbar,
-    });
-  });
+  const [state] = useState(
+    () => new OperatorFilterPickerState<T>({ filter, toolbar }),
+  );
 
   return state;
 }

package/src/state/CollectionPage/CollectionPageActionsBar.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
+import { useCollectionPageContext } from '../../providers';
+import { observer } from 'mobx-react-lite';
+import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
+import { mergeActionsForNarrowMode } from './transformSecondaryActionsToMoreActions';
+import { MoreActions } from '../../components/MoreActions';
+import {
+  MoreActionItemFactory,
+  MoreActionsPropItem,
+} from '../../components/MoreActions/MoreActionsBase';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+function withFeaturedActions(
+  items: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
+  featuredActions: MoreActionItemFactory[] | undefined,
+) {
+  if (!featuredActions) {
+    return items;
+  }
+  let result = items;
+  for (const factory of featuredActions) {
+    result = pushFactoryIfNotExistsOrAddToTopOfGroup(result, factory);
+  }
+  return result;
+}
+
+const WideModeMoreActions = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const { primaryToolbar } = useCollectionPageContext();
+    const featuredActions = primaryToolbar?.getPageFeaturedActions();
+
+    const forceMoreActions = featuredActions?.length ? (
+      <MoreActions />
+    ) : undefined;
+
+    const moreActions = child.props.moreActions ?? forceMoreActions;
+    if (!moreActions) {
+      return null;
+    }
+
+    const { type: MoreActionsType, props: moreActionsProps } = moreActions;
+    const items = withFeaturedActions(moreActionsProps.items, featuredActions);
+
+    if (child.props.secondaryActions) {
+      return <MoreActionsType {...moreActionsProps} items={items} />;
+    }
+
+    return <MoreActionsText {...moreActionsProps} items={items} />;
+  },
+);
+
+const NarrowModeMoreActions = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const { primaryToolbar } = useCollectionPageContext();
+    const featuredActions = primaryToolbar?.getPageFeaturedActions();
+    const moreActionsProps = child.props.moreActions?.props;
+
+    const moreActionsItems = withFeaturedActions(
+      moreActionsProps?.items,
+      featuredActions,
+    );
+
+    const items = mergeActionsForNarrowMode(
+      child.props.secondaryActions,
+      moreActionsItems,
+    );
+
+    if (items.length === 0) {
+      return null;
+    }
+
+    return (
+      <MoreActions
+        items={items}
+        containerId={moreActionsProps?.containerId}
+        exploreAppsModalProps={moreActionsProps?.exploreAppsModalProps}
+        biAdditionalInfo={moreActionsProps?.biAdditionalInfo}
+      />
+    );
+  },
+);
+
+export const CollectionPageActionsBar = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const isMobile = useIsMobile();
+    const { isNarrow } = useCollectionPageContext();
+    const { internalExperiments } = useWixPatternsContainer();
+
+    const isNarrowMode =
+      isNarrow &&
+      internalExperiments?.enabled('specs.cairo.CollectionPageMinWidth');
+
+    if (isMobile) {
+      return <Box gap="SP2">{child.props.primaryAction}</Box>;
+    }
+
+    if (isNarrowMode) {
+      return (
+        <Box gap="SP2">
+          <NarrowModeMoreActions child={child} />
+          {child.props.primaryAction}
+        </Box>
+      );
+    }
+
+    return (
+      <Box gap="SP2">
+        <WideModeMoreActions child={child} />
+        {child.props.secondaryActions}
+        {child.props.primaryAction}
+      </Box>
+    );
+  },
+);

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

@@ -2,6 +2,10 @@
   -st-states: mobile;
 }
 
+.root:not(:mobile) {
+  gap: 12px;
+}
+
 .root:mobile {
   flex-direction: column;
   padding-right: 18px;

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

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

package/src/state/CollectionPage/transformSecondaryActionsToMoreActions.ts

@@ -0,0 +1,74 @@
+import { ActionSubitem } from '../../components/ActionControl/ActionSubItemProps';
+import { MoreActionsItem } from '../../components/MoreActions/MoreActionsItem';
+import { SecondaryActionsElement } from '../../components/SecondaryActions/SecondaryActions';
+import { MoreActionsPropItem } from '../../components/MoreActions/MoreActionsBase';
+
+function normalizeToGroups<T>(items: T[] | T[][] | undefined): T[][] {
+  if (!items || items.length === 0) {
+    return [];
+  }
+  return Array.isArray(items[0]) ? (items as T[][]) : [items as T[]];
+}
+
+function toMoreActionsItem(subitem: ActionSubitem): MoreActionsItem {
+  return {
+    text: subitem.label ?? '',
+    onClick: subitem.onClick ?? (() => {}),
+    prefixIcon: subitem.prefixIcon,
+    disabled: subitem.disabled,
+    subtitle: subitem.subtitle,
+    dataHook: subitem.dataHook,
+    biName: subitem.biName,
+    biAdditionalInfo: subitem.biAdditionalInfo,
+  };
+}
+
+function secondaryActionsToGroups(
+  secondaryActions: SecondaryActionsElement | undefined,
+): MoreActionsPropItem[][] {
+  if (!secondaryActions) {
+    return [];
+  }
+
+  const {
+    label,
+    onClick,
+    prefixIcon,
+    disabled,
+    biName,
+    biAdditionalInfo,
+    subItems,
+  } = secondaryActions.props;
+
+  if (subItems && subItems.length > 0) {
+    return normalizeToGroups(subItems).map((group) =>
+      group.map(toMoreActionsItem),
+    );
+  }
+
+  if (label) {
+    return [
+      [
+        {
+          text: label,
+          onClick: onClick ?? (() => {}),
+          prefixIcon,
+          disabled,
+          biName,
+          biAdditionalInfo,
+        },
+      ],
+    ];
+  }
+
+  return [];
+}
+
+export function mergeActionsForNarrowMode(
+  secondaryActions: SecondaryActionsElement | undefined,
+  moreActionsItems: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
+): MoreActionsPropItem[][] {
+  const secondaryGroups = secondaryActionsToGroups(secondaryActions);
+  const moreActionsGroups = normalizeToGroups(moreActionsItems);
+  return [...secondaryGroups, ...moreActionsGroups];
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -4,49 +4,11 @@ import { CollectionPageHeaderElement } from '../../components/CollectionPageHead
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
 import { PageSubTitle } from '../../components/PageSubTitle';
-import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { classes, st } from './CollectionPageHeader.st.css.js';
-import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
-import { MoreActions } from '../../components/MoreActions';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { PanelHeader } from './PanelHeader';
-
-const MoreActionsBySecondaryAction = observer(
-  ({ child }: { child: CollectionPageHeaderElement }) => {
-    const pageState = useCollectionPageContext();
-    const { primaryToolbar } = pageState;
-
-    const featuredActions = primaryToolbar?.getPageFeaturedActions();
-
-    const forceMoreActions = featuredActions?.length ? (
-      <MoreActions />
-    ) : undefined;
-
-    const moreActions = child.props.moreActions ?? forceMoreActions;
-
-    if (!moreActions) {
-      return null;
-    }
-
-    const { type: MoreActionsElementType, props: moreActionsProps } =
-      moreActions;
-
-    let items = moreActionsProps.items;
-
-    if (featuredActions) {
-      for (const factory of featuredActions) {
-        items = pushFactoryIfNotExistsOrAddToTopOfGroup(items, factory);
-      }
-    }
-
-    if (child.props.secondaryActions) {
-      return <MoreActionsElementType {...moreActionsProps} items={items} />;
-    }
-
-    return <MoreActionsText {...moreActionsProps} items={items} />;
-  },
-);
+import { CollectionPageActionsBar } from './CollectionPageActionsBar';
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
@@ -60,6 +22,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       />
     );
   }
+
   return (
     <Page.Header
       key={child.key}
@@ -71,13 +34,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
           <PageSubTitle {...child.props.subtitle} />
         ) : undefined
       }
-      actionsBar={
-        <Box gap="SP2">
-          {!isMobile && <MoreActionsBySecondaryAction child={child} />}
-          {!isMobile && child.props.secondaryActions}
-          {child.props.primaryAction}
-        </Box>
-      }
+      actionsBar={<CollectionPageActionsBar child={child} />}
       breadcrumbs={
         isMobile
           ? () => {
@@ -93,25 +50,34 @@ const CollectionPageHeaderTitle = observer(
   ({ minimized }: { minimized: boolean }) => {
     const state = useCollectionPageContext();
     const isMobile = useIsMobile();
-    const titleContent = (
-      <>
-        <Box inline paddingRight="9px">
-          {state.pageTitle}
-        </Box>
-        {state.total !== false && !state.hideHeaderTotal && (
-          <Box inline color="D40" dataHook="page-header-total-count">
-            {state.total}
-          </Box>
-        )}
-      </>
-    );
 
     if (minimized) {
-      return titleContent;
+      return <>{state.pageTitle}</>;
     }
 
     return (
-      <Heading size={isMobile ? 'large' : 'extraLarge'}>{titleContent}</Heading>
+      <Heading size={isMobile ? 'large' : 'extraLarge'}>
+        <Box inline maxLines={1} paddingRight="9px" minWidth={0} width="100%">
+          <Heading
+            size={isMobile ? 'large' : 'extraLarge'}
+            ellipsis
+            showTooltip={!isMobile}
+            placement="bottom"
+          >
+            {state.pageTitle}
+          </Heading>
+          {state.total !== false && !state.hideHeaderTotal && (
+            <Box
+              inline
+              color="D40"
+              paddingLeft="9px"
+              dataHook="page-header-total-count"
+            >
+              {state.total}
+            </Box>
+          )}
+        </Box>
+      </Heading>
     );
   },
 );