@wix/patterns 1.352.0 → 1.353.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1760143859";
+var _namespace_ = "MultiBulkActionToolbar2015721343";
 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":"MultiBulkActionToolbar1760143859__root","leftGroupWrapper":"MultiBulkActionToolbar1760143859__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1760143859__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1760143859__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2015721343__root","leftGroupWrapper":"MultiBulkActionToolbar2015721343__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2015721343__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2015721343__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_ = "NestedTablePlaceholderStatesRow218800380";
+var _namespace_ = "NestedTablePlaceholderStatesRow2215866937";
 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":"NestedTablePlaceholderStatesRow218800380__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2215866937__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_ = "NestedTableRow3140066734";
+var _namespace_ = "NestedTableRow124750162";
 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":"NestedTableRow3140066734__root","firstLevel":"NestedTableRow3140066734__firstLevel","placeholder":"NestedTableRow3140066734__placeholder","parentHovered":"NestedTableRow3140066734__parentHovered"};
+export var classes = {"root":"NestedTableRow124750162__root","firstLevel":"NestedTableRow124750162__firstLevel","placeholder":"NestedTableRow124750162__placeholder","parentHovered":"NestedTableRow124750162__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_ = "MultipleDragOverlayEffect2746358990";
+var _namespace_ = "MultipleDragOverlayEffect1565624507";
 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":"MultipleDragOverlayEffect2746358990__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1565624507__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_ = "NestedTableDragAndDropRow2229560427";
+var _namespace_ = "NestedTableDragAndDropRow3605272399";
 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":"NestedTableDragAndDropRow2229560427__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3605272399__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "PickerContent3852751846";
+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":"PickerContent3852751846__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_ = "PickerContentAdditionalStep505382893";
+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":"PickerContentAdditionalStep505382893__root","titles":"PickerContentAdditionalStep505382893__titles","suffix":"PickerContentAdditionalStep505382893__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_ = "PickerTableListItem3274383082";
+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":"PickerTableListItem3274383082__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_ = "ScrollableContent2021212310";
+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":"ScrollableContent2021212310__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_ = "SkeletonCard2461642541";
+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":"SkeletonCard2461642541__root","headerLoading":"SkeletonCard2461642541__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_ = "SlidingModal4079074060";
+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":"SlidingModal4079074060__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_ = "TabsFilter4095275580";
+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":"TabsFilter4095275580__root","title":"TabsFilter4095275580__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_ = "ManageTagsModal1047110999";
+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":"ManageTagsModal1047110999__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_ = "ToolbarItem3946345373";
+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":"ToolbarItem3946345373__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_ = "ToolbarItemBox3994341943";
+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":"ToolbarItemBox3994341943__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_ = "common970521328";
+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":"common970521328__root","column":"common970521328__column","fullHeight":"common970521328__fullHeight"};
+export var classes = {"root":"common3516241480__root","column":"common3516241480__column","fullHeight":"common3516241480__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "CollectionPageHeader3911711208";
+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":"CollectionPageHeader3911711208__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];
+}