@wix/patterns 1.296.0 → 1.299.0

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.tsx

@@ -14,6 +14,8 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MultiBulkActionToolbarState } from './MultiBulkActionToolbarState';
 import { useExtensionMenuItems } from '../../hooks/useExtensionMenuItems';
 import { BulkActionContainer } from './BulkActionContainer';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBulkActionMobileGroups } from '../../hooks/useBulkActionMobileGroups';
 
 export interface MultiBulkActionToolbarProps {
   /**
@@ -61,6 +63,7 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
     containerId,
     containerProps,
   });
+  const isMobile = useIsMobile();
 
   const [state] = useState(
     () =>
@@ -89,6 +92,172 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
 
   const { translate: t } = useWixPatternsContainer();
 
+  const withBi = (item: ActionSubitem, ctaIndex: number): ActionSubitem => {
+    return {
+      ...item,
+      onClick: () => {
+        toolbarCollectionState.toolbarBIReporter.ctaClicked({
+          itemId: bulk.selectedIds.join(','),
+          location: 'multiBulkActionToolbar',
+          ctaName: item.biName ?? '',
+          ctaIndex,
+          componentId: (item as any).componentId,
+          appId: (item as any).appId,
+          numCtas:
+            state.primaryActionItems.length + state.secondaryActionItemsCount,
+        });
+        item?.onClick();
+      },
+    };
+  };
+
+  const mobileBulkActionGroups = useBulkActionMobileGroups({
+    primaryActionItems: state.primaryActionItems,
+    secondaryActionItems: state.secondaryActionItems,
+    moreActionsLabel: t('cairo.moreActions'),
+  });
+
+  const mobileBulkActionGroupsWithBi = mobileBulkActionGroups?.map((group) =>
+    group.map((item, itemIndex) => withBi(item, itemIndex + 1)),
+  );
+
+  const BulkActionButtonsDesktop = () => (
+    <>
+      <Box alignSelf="stretch" marginLeft="SP4" marginRight="SP2">
+        <Divider direction="vertical" />
+      </Box>
+
+      <Box gap="SP1" overflow="hidden">
+        {TagsAssignButton && (
+          <BulkActionContainer>
+            <TagsAssignButton />
+          </BulkActionContainer>
+        )}
+        {exportButton && (
+          <BulkActionContainer>
+            {cloneElement(exportButton, {
+              toolbarType: 'bulkActionToolbar',
+            })}
+          </BulkActionContainer>
+        )}
+        {state.primaryActionItems
+          .filter((x) => !!x)
+          .map((actionItem, index) => (
+            <BulkActionContainer key={index}>
+              <ActionControl
+                priority="secondary"
+                size="small"
+                actionItem={{
+                  dataHook: 'bulk-action-button',
+                  ...actionItem,
+                  subItems: (actionItem?.subItems as ActionSubitem[][])?.map(
+                    (subItemsGroup) =>
+                      subItemsGroup?.map((subItem, subIndex) => ({
+                        ...subItem,
+                        onClick: () => {
+                          toolbarCollectionState.toolbarBIReporter.ctaClicked({
+                            itemId: bulk.selectedIds.join(','),
+                            location: 'multiBulkActionToolbar',
+                            ctaName: subItem.biName ?? '',
+                            ctaIndex: subIndex + 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
+                            moreActionsIndex: subIndex + 1,
+                            componentId: (subItem as any).componentId,
+                            appId: (subItem as any).appId,
+                            numCtas:
+                              state.primaryActionItems.length +
+                              state.secondaryActionItemsCount,
+                          });
+                          subItem.onClick?.();
+                        },
+                      })),
+                  ),
+                  onClick: () => {
+                    toolbarCollectionState.toolbarBIReporter.ctaClicked({
+                      itemId: bulk.selectedIds.join(','),
+                      location: 'multiBulkActionToolbar',
+                      ctaName: actionItem.biName ?? '',
+                      ctaIndex: 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
+                      moreActionsIndex: 0,
+                      componentId: (actionItem as any).componentId,
+                      appId: (actionItem as any).appId,
+                      numCtas:
+                        state.primaryActionItems.length +
+                        state.secondaryActionItemsCount,
+                    });
+                    actionItem.onClick?.();
+                  },
+                }}
+              />
+            </BulkActionContainer>
+          ))}
+
+        {state.secondaryActionItems.filter(
+          (secondaryActionItemsGroup) => secondaryActionItemsGroup.length > 0,
+        ).length > 0 && (
+          <BulkActionContainer>
+            <ActionPopover
+              priority="secondary"
+              size="small"
+              actionItem={{
+                dataHook: 'more-actions',
+                biName: 'more-actions',
+                subItems: (() => {
+                  let index = 0;
+                  return state.secondaryActionItems.map((subItemGroup) =>
+                    subItemGroup.map((subItem) => {
+                      const subItemIndex = index;
+                      index++;
+                      const _subItem = {
+                        ...subItem,
+                        onClick: () => {
+                          toolbarCollectionState.toolbarBIReporter.ctaClicked({
+                            itemId: bulk.selectedIds.join(','),
+                            location: 'multiBulkActionToolbar',
+                            ctaName: subItem.biName ?? '',
+                            ctaIndex: subItemIndex + 3,
+                            moreActionsIndex: subItemIndex + 1,
+                            componentId: (subItem as any).componentId,
+                            appId: (subItem as any).appId,
+                            numCtas:
+                              state.primaryActionItems.length +
+                              state.secondaryActionItemsCount,
+                          });
+                          subItem.onClick?.();
+                        },
+                      };
+                      return _subItem;
+                    }),
+                  );
+                })(),
+
+                popoverMenuProps: secondaryActionsPopoverMenuProps,
+                label: t('cairo.moreActions'),
+              }}
+            />
+          </BulkActionContainer>
+        )}
+      </Box>
+    </>
+  );
+
+  const BulkActionButtonsMobile = () => (
+    <ActionPopover
+      priority="secondary"
+      size="small"
+      actionItem={{
+        dataHook: 'all-actions-mobile',
+        biName: 'more-actions',
+        subItems: mobileBulkActionGroupsWithBi,
+        popoverMenuProps: {
+          fixed: false,
+          minWidth: 'max-content',
+          ...secondaryActionsPopoverMenuProps,
+        },
+        label: t('cairo.table.mobile.more.button'),
+      }}
+    />
+  );
+
   return (
     <Box minHeight="60px">
       <TableToolbar
@@ -135,127 +304,16 @@ function _MultiBulkActionToolbar(props: MultiBulkActionToolbarProps) {
             </TableToolbar.Item>
           )}
 
-          <Box alignSelf="stretch" marginLeft="SP4" marginRight="SP2">
-            <Divider direction="vertical" />
-          </Box>
-
-          <Box gap="SP1" overflow="hidden">
-            {TagsAssignButton && (
-              <BulkActionContainer>
-                <TagsAssignButton />
-              </BulkActionContainer>
-            )}
-            {exportButton && (
-              <BulkActionContainer>
-                {cloneElement(exportButton, {
-                  toolbarType: 'bulkActionToolbar',
-                })}
-              </BulkActionContainer>
-            )}
-            {state.primaryActionItems
-              .filter((x) => !!x)
-              .map((actionItem, index) => (
-                <BulkActionContainer key={index}>
-                  <ActionControl
-                    priority="secondary"
-                    size="small"
-                    actionItem={{
-                      dataHook: 'bulk-action-button',
-                      ...actionItem,
-                      subItems: (
-                        actionItem?.subItems as ActionSubitem[][]
-                      )?.map((subItemsGroup) =>
-                        subItemsGroup?.map((subItem, index) => ({
-                          ...subItem,
-                          onClick: () => {
-                            toolbarCollectionState.toolbarBIReporter.ctaClicked(
-                              {
-                                itemId: bulk.selectedIds.join(','),
-                                location: 'multiBulkActionToolbar',
-                                ctaName: subItem.biName ?? '',
-                                ctaIndex: index + 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
-                                moreActionsIndex: index + 1,
-                                componentId: (subItem as any).componentId,
-                                appId: (subItem as any).appId,
-                                numCtas:
-                                  state.primaryActionItems.length +
-                                  state.secondaryActionItemsCount,
-                              },
-                            );
-                            subItem.onClick?.();
-                          },
-                        })),
-                      ),
-                      onClick: () => {
-                        toolbarCollectionState.toolbarBIReporter.ctaClicked({
-                          itemId: bulk.selectedIds.join(','),
-                          location: 'multiBulkActionToolbar',
-                          ctaName: actionItem.biName ?? '',
-                          ctaIndex: 1, // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
-                          moreActionsIndex: 0,
-                          componentId: (actionItem as any).componentId,
-                          appId: (actionItem as any).appId,
-                          numCtas:
-                            state.primaryActionItems.length +
-                            state.secondaryActionItemsCount,
-                        });
-                        actionItem.onClick?.();
-                      },
-                    }}
-                  />
-                </BulkActionContainer>
-              ))}
-
-            {state.secondaryActionItems.filter(
-              (secondaryActionItemsGroup) =>
-                secondaryActionItemsGroup.length > 0,
-            ).length > 0 && (
-              <BulkActionContainer>
-                <ActionPopover
-                  priority="secondary"
-                  size="small"
-                  actionItem={{
-                    dataHook: 'more-actions',
-                    biName: 'more-actions',
-                    subItems: (() => {
-                      let index = 0;
-                      return state.secondaryActionItems.map((subItemGroup) =>
-                        subItemGroup.map((subItem) => {
-                          const subItemIndex = index;
-                          index++;
-                          const _subItem = {
-                            ...subItem,
-                            onClick: () => {
-                              toolbarCollectionState.toolbarBIReporter.ctaClicked(
-                                {
-                                  itemId: bulk.selectedIds.join(','),
-                                  location: 'multiBulkActionToolbar',
-                                  ctaName: subItem.biName ?? '',
-                                  ctaIndex: subItemIndex + 3,
-                                  moreActionsIndex: subItemIndex + 1,
-                                  componentId: (subItem as any).componentId,
-                                  appId: (subItem as any).appId,
-                                  numCtas:
-                                    state.primaryActionItems.length +
-                                    state.secondaryActionItemsCount,
-                                },
-                              );
-                              subItem.onClick?.();
-                            },
-                          };
-                          return _subItem;
-                        }),
-                      );
-                    })(),
-
-                    popoverMenuProps: secondaryActionsPopoverMenuProps,
-                    label: t('cairo.moreActions'),
-                  }}
-                />
-              </BulkActionContainer>
-            )}
-          </Box>
+          {!isMobile && <BulkActionButtonsDesktop />}
         </TableToolbar.ItemGroup>
+
+        {isMobile && (
+          <TableToolbar.ItemGroup position="end">
+            <TableToolbar.Item>
+              <BulkActionButtonsMobile />
+            </TableToolbar.Item>
+          </TableToolbar.ItemGroup>
+        )}
       </TableToolbar>
     </Box>
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1484585522";
+var _namespace_ = "NestedTablePlaceholderStatesRow613004709";
 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":"NestedTablePlaceholderStatesRow1484585522__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow613004709__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_ = "NestedTableRow2682455552";
+var _namespace_ = "NestedTableRow2976448891";
 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":"NestedTableRow2682455552__root","firstLevel":"NestedTableRow2682455552__firstLevel","placeholder":"NestedTableRow2682455552__placeholder","parentHovered":"NestedTableRow2682455552__parentHovered"};
+export var classes = {"root":"NestedTableRow2976448891__root","firstLevel":"NestedTableRow2976448891__firstLevel","placeholder":"NestedTableRow2976448891__placeholder","parentHovered":"NestedTableRow2976448891__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_ = "MultipleDragOverlayEffect2399557028";
+var _namespace_ = "MultipleDragOverlayEffect874100797";
 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":"MultipleDragOverlayEffect2399557028__root"};
+export var classes = {"root":"MultipleDragOverlayEffect874100797__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_ = "NestedTableDragAndDropRow1551175518";
+var _namespace_ = "NestedTableDragAndDropRow1698105103";
 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":"NestedTableDragAndDropRow1551175518__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1698105103__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_ = "PickerContent2352047205";
+var _namespace_ = "PickerContent3078262274";
 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":"PickerContent2352047205__root"};
+export var classes = {"root":"PickerContent3078262274__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_ = "PickerContentAdditionalStep3449039505";
+var _namespace_ = "PickerContentAdditionalStep3902626640";
 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":"PickerContentAdditionalStep3449039505__root","titles":"PickerContentAdditionalStep3449039505__titles","suffix":"PickerContentAdditionalStep3449039505__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3902626640__root","titles":"PickerContentAdditionalStep3902626640__titles","suffix":"PickerContentAdditionalStep3902626640__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_ = "PickerTableListItem124590333";
+var _namespace_ = "PickerTableListItem1977648805";
 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":"PickerTableListItem124590333__root"};
+export var classes = {"root":"PickerTableListItem1977648805__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_ = "ScrollableContent2585371448";
+var _namespace_ = "ScrollableContent1510175626";
 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":"ScrollableContent2585371448__root"};
+export var classes = {"root":"ScrollableContent1510175626__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_ = "SkeletonCard1063942384";
+var _namespace_ = "SkeletonCard786624872";
 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":"SkeletonCard1063942384__root","headerLoading":"SkeletonCard1063942384__headerLoading"};
+export var classes = {"root":"SkeletonCard786624872__root","headerLoading":"SkeletonCard786624872__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_ = "SlidingModal1276144807";
+var _namespace_ = "SlidingModal1660445427";
 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":"SlidingModal1276144807__root"};
+export var classes = {"root":"SlidingModal1660445427__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_ = "TabsFilter1731899455";
+var _namespace_ = "TabsFilter3576348843";
 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":"TabsFilter1731899455__root","title":"TabsFilter1731899455__title"};
+export var classes = {"root":"TabsFilter3576348843__root","title":"TabsFilter3576348843__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_ = "ManageTagsModal2089978259";
+var _namespace_ = "ManageTagsModal4049647154";
 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":"ManageTagsModal2089978259__root"};
+export var classes = {"root":"ManageTagsModal4049647154__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_ = "ToolbarItem675329814";
+var _namespace_ = "ToolbarItem3679284432";
 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":"ToolbarItem675329814__root"};
+export var classes = {"root":"ToolbarItem3679284432__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_ = "ToolbarItemBox444073492";
+var _namespace_ = "ToolbarItemBox3080473563";
 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":"ToolbarItemBox444073492__root"};
+export var classes = {"root":"ToolbarItemBox3080473563__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_ = "common3532792477";
+var _namespace_ = "common1987387905";
 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":"common3532792477__root","column":"common3532792477__column","fullHeight":"common3532792477__fullHeight"};
+export var classes = {"root":"common1987387905__root","column":"common1987387905__column","fullHeight":"common1987387905__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/index.ts

@@ -21,3 +21,4 @@ export * from './useCreateNestedOptimisticActions';
 export * from './useEntity';
 export * from './useSettings';
 export * from './useTagsWidget';
+export * from './useBulkActionMobileGroups';

package/src/hooks/useBulkActionMobileGroups.ts

@@ -0,0 +1,42 @@
+import {
+  ActionSubitem,
+  ActionSubItemPrivate,
+} from '../components/ActionControl';
+
+export interface UseBulkActionMobileGroupsParams {
+  primaryActionItems: ActionSubitem[];
+  secondaryActionItems: ActionSubitem[][];
+  moreActionsLabel: string;
+}
+
+/**
+ * Hook to build mobile action groups for the bulk action toolbar.
+ * Combines primary and secondary bulk actions into grouped sections for mobile view.
+ */
+export function useBulkActionMobileGroups({
+  primaryActionItems,
+  secondaryActionItems,
+  moreActionsLabel,
+}: UseBulkActionMobileGroupsParams): ActionSubItemPrivate['subItems'] {
+  const primaryGroup = primaryActionItems.flatMap((actionItem) => {
+    if (!actionItem.subItems) {
+      return [actionItem];
+    }
+
+    return [{ sectionTitle: actionItem.label! }, ...actionItem.subItems.flat()];
+  });
+
+  const secondaryFlat = [
+    { sectionTitle: moreActionsLabel },
+    ...secondaryActionItems.flat(),
+  ];
+
+  const groups: ActionSubItemPrivate['subItems'] = [];
+  if (primaryGroup.length > 0) {
+    groups.push(primaryGroup);
+  }
+  if (secondaryFlat.length > 0) {
+    groups.push(secondaryFlat);
+  }
+  return groups;
+}