@trackunit/react-table 0.0.540 → 0.0.545

package/index.cjs.js

@@ -115,15 +115,13 @@ const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
     "max-w-[80%]",
     "animate-fade-in-fast",
     "grid",
-    "grid-rows-2",
-    "grid-cols-[min-content,1fr,min-content]",
-    "sm:grid-cols-[min-content,1fr,min-content]",
+    "grid-cols-[min-content,1fr]",
+    "sm:grid-cols-[min-content,min-content,1fr,min-content]",
     "sm:grid-rows-1",
     "p-2",
     "bg-primary-600",
     "gap-1",
     "rounded-2xl",
-    "items-center",
     "z-top",
     "shadow-2xl",
     "fixed",
@@ -131,31 +129,41 @@ const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
     "left-1/2",
     "-translate-x-1/2",
 ]);
+const cvaDivider = cssClassVarianceUtilities.cvaMerge(["border-blue-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"]);
 const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
-    "col-span-2",
+    "row-start-3",
+    "col-span-full",
     "flex",
-    "flex-row-reverse",
-    "flex-nowrap",
-    "justify-end",
+    "flex-row",
     "gap-2",
     "overflow-hidden",
-    "sm:col-span-1",
-    "sm:flex-row",
-]);
-const cvaActionSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["p-0", "h-auto"]);
-const cvaActionSpinner = cssClassVarianceUtilities.cvaMerge([], {
+    "sm:row-start-1",
+    "sm:col-span-3",
+    "sm:justify-end",
+], {
     variants: {
-        variant: {
-            primary: ["border-white/[0.32]", "border-b-white"],
-            "primary-danger": ["border-white/[0.32]", "border-b-white"],
-            secondary: ["h-3.5", "w-3.5"],
-            "secondary-danger": ["h-3.5", "w-3.5"],
-            ghost: [],
-            "ghost-neutral": [],
+        isDropdown: {
+            true: [],
+            false: ["col-span-2"],
         },
     },
-    defaultVariants: {
-        variant: "primary",
+});
+const cvaMoreContainer = cssClassVarianceUtilities.cvaMerge([
+    "row-start-4",
+    "col-span-full",
+    "sm:col-span-1",
+    "flex",
+    "flex-row",
+    "justify-between",
+    "gap-2",
+    "sm:row-start-1",
+    "sm:col-span-3",
+], {
+    variants: {
+        isDropdown: {
+            true: [],
+            false: ["row-start-3", "col-span-2", "place-self-end"],
+        },
     },
 });
 
@@ -165,16 +173,15 @@ const cvaActionSpinner = cssClassVarianceUtilities.cvaMerge([], {
  *
  * @param {ActionButtonProps} props - The properties for the action button.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @param {ReactNode} props.children - The children to render inside the button.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-const ActionButton = ({ action, children, id, ...rest }) => {
+const ActionButton = ({ action, id, ...rest }) => {
     if (action.type === "route") {
-        return (jsxRuntime.jsx(reactComponents.Button, { asChild: true, id: id, variant: "ghost-neutral", ...rest, children: jsxRuntime.jsx(reactRouter.Link, { to: action.url, children: children }) }));
+        return (jsxRuntime.jsx(reactComponents.Button, { asChild: true, id: id, loading: action.loading, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: jsxRuntime.jsx(reactRouter.Link, { to: action.url, children: action.label }) }));
     }
-    return (jsxRuntime.jsx(reactComponents.Button, { id: id, onClick: e => action.method(e), variant: "ghost-neutral", ...rest, children: children }));
+    return (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
 };
 /**
  * Converts an action model to a MenuItem component.
@@ -195,7 +202,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
             key: action.label,
             dataTestId,
         };
-    const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
+    const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style })) : null, stopPropagation: false }, action.label));
     if ("url" in action) {
         return (jsxRuntime.jsx(reactRouter.Link, { id: action.id, to: action.url, children: item }, action.label));
     }
@@ -210,7 +217,18 @@ const actionDataToMenuItem = (action, dataTestId) => {
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {JSX.Element} - The ActionButton component for the given action.
  */
-const actionDataToActionButton = (action, dataTestId) => (jsxRuntime.jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId, disabled: action.loading, id: action.id, loading: action.loading, children: [action.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "vertically", className: cvaActionSpinner({ variant: "primary" }), containerClassName: cvaActionSpinnerContainer(), size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style })), jsxRuntime.jsx(reactComponents.Text, { className: "!text-base text-white", dataTestId: `${dataTestId}-action-label`, children: action.label })] }, action.id));
+const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading, id: action.id }, action.id));
+/**
+ * Renders the icon for an action button.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {InnerActionButtonProps} props - The properties for the action icon.
+ * @param {ActionModel} props.action - The action model defining what action to perform.
+ * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ */
+const ActionIcon = ({ action }) => {
+    return action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "small", style: action.style })) : null;
+};
 
 /**
  * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
@@ -222,8 +240,8 @@ const actionDataToActionButton = (action, dataTestId) => (jsxRuntime.jsxs(Action
  * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
  * @returns {ReactElement} The rendered component.
  */
-const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
-    const children = React.useMemo(() => actions.map(action => actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
+const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dataTestId, }) => {
+    const children = React.useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
     const { overflowContainerRef, itemOverflowMap } = reactComponents.useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -236,13 +254,17 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
         return "visible";
     };
     const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaActionContainerAndOverflow(), ref: overflowContainerRef, children: React.Children.map(children, child => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaActionContainerAndOverflow({ isDropdown: dropdownActions !== undefined }), ref: overflowContainerRef, children: React.Children.map(children, child => {
                     return React.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
-                }) }), React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
-                            return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
-                        })] })) })) : null] }));
+                }) }), jsxRuntime.jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
+                        ? dropdownActions.map(action => {
+                            return (jsxRuntime.jsx(reactComponents.MoreMenu, { className: "p-0", customButton: jsxRuntime.jsx(reactComponents.Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: action.dropdown }, action.id));
+                        })
+                        : null, React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
+                                    return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
+                                })] })) })) : null] })] }));
 };
 
 /**
@@ -253,10 +275,11 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
  */
-const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
+const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsxRuntime.jsx(reactComponents.IconButton, { circular: true, dataTestId: "XButton", icon: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections.length })] }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
+    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", dataTestId: "XButton", onClick: resetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
                 actions,
+                dropdownActions,
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Spinner, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, cvaInteractableItem, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Card, Text, cvaInteractableItem, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import * as React from 'react';
 import { useMemo, Children, cloneElement, useRef, useEffect, useState, useCallback } from 'react';
@@ -96,15 +96,13 @@ const cvaActionSheet = cvaMerge([
     "max-w-[80%]",
     "animate-fade-in-fast",
     "grid",
-    "grid-rows-2",
-    "grid-cols-[min-content,1fr,min-content]",
-    "sm:grid-cols-[min-content,1fr,min-content]",
+    "grid-cols-[min-content,1fr]",
+    "sm:grid-cols-[min-content,min-content,1fr,min-content]",
     "sm:grid-rows-1",
     "p-2",
     "bg-primary-600",
     "gap-1",
     "rounded-2xl",
-    "items-center",
     "z-top",
     "shadow-2xl",
     "fixed",
@@ -112,31 +110,41 @@ const cvaActionSheet = cvaMerge([
     "left-1/2",
     "-translate-x-1/2",
 ]);
+const cvaDivider = cvaMerge(["border-blue-500", "row-start-2", "col-span-4", "sm:hidden", "min-h-px"]);
 const cvaActionContainerAndOverflow = cvaMerge([
-    "col-span-2",
+    "row-start-3",
+    "col-span-full",
     "flex",
-    "flex-row-reverse",
-    "flex-nowrap",
-    "justify-end",
+    "flex-row",
     "gap-2",
     "overflow-hidden",
-    "sm:col-span-1",
-    "sm:flex-row",
-]);
-const cvaActionSpinnerContainer = cvaMerge(["p-0", "h-auto"]);
-const cvaActionSpinner = cvaMerge([], {
+    "sm:row-start-1",
+    "sm:col-span-3",
+    "sm:justify-end",
+], {
     variants: {
-        variant: {
-            primary: ["border-white/[0.32]", "border-b-white"],
-            "primary-danger": ["border-white/[0.32]", "border-b-white"],
-            secondary: ["h-3.5", "w-3.5"],
-            "secondary-danger": ["h-3.5", "w-3.5"],
-            ghost: [],
-            "ghost-neutral": [],
+        isDropdown: {
+            true: [],
+            false: ["col-span-2"],
         },
     },
-    defaultVariants: {
-        variant: "primary",
+});
+const cvaMoreContainer = cvaMerge([
+    "row-start-4",
+    "col-span-full",
+    "sm:col-span-1",
+    "flex",
+    "flex-row",
+    "justify-between",
+    "gap-2",
+    "sm:row-start-1",
+    "sm:col-span-3",
+], {
+    variants: {
+        isDropdown: {
+            true: [],
+            false: ["row-start-3", "col-span-2", "place-self-end"],
+        },
     },
 });
 
@@ -146,16 +154,15 @@ const cvaActionSpinner = cvaMerge([], {
  *
  * @param {ActionButtonProps} props - The properties for the action button.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @param {ReactNode} props.children - The children to render inside the button.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-const ActionButton = ({ action, children, id, ...rest }) => {
+const ActionButton = ({ action, id, ...rest }) => {
     if (action.type === "route") {
-        return (jsx(Button, { asChild: true, id: id, variant: "ghost-neutral", ...rest, children: jsx(Link, { to: action.url, children: children }) }));
+        return (jsx(Button, { asChild: true, id: id, loading: action.loading, prefix: jsx(ActionIcon, { action: action }), ...rest, children: jsx(Link, { to: action.url, children: action.label }) }));
     }
-    return (jsx(Button, { id: id, onClick: e => action.method(e), variant: "ghost-neutral", ...rest, children: children }));
+    return (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
 };
 /**
  * Converts an action model to a MenuItem component.
@@ -176,7 +183,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
             key: action.label,
             dataTestId,
         };
-    const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
+    const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style })) : null, stopPropagation: false }, action.label));
     if ("url" in action) {
         return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
     }
@@ -191,7 +198,18 @@ const actionDataToMenuItem = (action, dataTestId) => {
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {JSX.Element} - The ActionButton component for the given action.
  */
-const actionDataToActionButton = (action, dataTestId) => (jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId, disabled: action.loading, id: action.id, loading: action.loading, children: [action.loading ? (jsx(Spinner, { centering: "vertically", className: cvaActionSpinner({ variant: "primary" }), containerClassName: cvaActionSpinnerContainer(), size: "small" })) : (jsx(Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style })), jsx(Text, { className: "!text-base text-white", dataTestId: `${dataTestId}-action-label`, children: action.label })] }, action.id));
+const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading, id: action.id }, action.id));
+/**
+ * Renders the icon for an action button.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {InnerActionButtonProps} props - The properties for the action icon.
+ * @param {ActionModel} props.action - The action model defining what action to perform.
+ * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ */
+const ActionIcon = ({ action }) => {
+    return action.icon ? (jsx(Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "small", style: action.style })) : null;
+};
 
 /**
  * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
@@ -203,8 +221,8 @@ const actionDataToActionButton = (action, dataTestId) => (jsxs(ActionButton, { a
  * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
  * @returns {ReactElement} The rendered component.
  */
-const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
-    const children = useMemo(() => actions.map(action => actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
+const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dataTestId, }) => {
+    const children = useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
     const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -217,13 +235,17 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
         return "visible";
     };
     const overflowItemCount = objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
-    return (jsxs(Fragment, { children: [jsx("div", { className: cvaActionContainerAndOverflow(), ref: overflowContainerRef, children: Children.map(children, child => {
+    return (jsxs(Fragment, { children: [jsx("div", { className: cvaActionContainerAndOverflow({ isDropdown: dropdownActions !== undefined }), ref: overflowContainerRef, children: Children.map(children, child => {
                     return cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
-                }) }), Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxs(MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
-                            return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
-                        })] })) })) : null] }));
+                }) }), jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
+                        ? dropdownActions.map(action => {
+                            return (jsx(MoreMenu, { className: "p-0", customButton: jsx(Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method, prefix: jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: action.dropdown }, action.id));
+                        })
+                        : null, Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxs(MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
+                                    return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
+                                })] })) })) : null] })] }));
 };
 
 /**
@@ -234,10 +256,11 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
  */
-const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
+const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
-    return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsx(IconButton, { circular: true, dataTestId: "XButton", icon: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections.length })] }), jsx(ActionContainerAndOverflow, { dataTestId,
+    return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", dataTestId: "XButton", onClick: resetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { dataTestId,
                 actions,
+                dropdownActions,
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.540",
+  "version": "0.0.545",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/ActionSheet/ActionContainerAndOverflow.d.ts

@@ -1,8 +1,9 @@
 import { CommonProps, SidebarItemProps } from "@trackunit/react-components";
 import { ReactElement } from "react";
-import { ActionModel } from "./Actions";
+import { ActionModel, DropdownModel } from "./Actions";
 interface ActionContainerAndOverflowProps extends CommonProps {
     actions: ActionModel[];
+    dropdownActions?: DropdownModel[];
     moreActions?: ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>;
 }
 /**
@@ -15,5 +16,5 @@ interface ActionContainerAndOverflowProps extends CommonProps {
  * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
  * @returns {ReactElement} The rendered component.
  */
-export declare const ActionContainerAndOverflow: ({ actions, moreActions, dataTestId }: ActionContainerAndOverflowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionContainerAndOverflow: ({ actions, dropdownActions, moreActions, dataTestId, }: ActionContainerAndOverflowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/ActionSheet/ActionSheet.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ActionModel } from "./Actions";
+import { ActionModel, DropdownModel } from "./Actions";
 export interface ActionSheetProps extends CommonProps {
     /**
      * Actions to be displayed in the ActionSheet as primary actions (normally visible)
@@ -9,6 +9,10 @@ export interface ActionSheetProps extends CommonProps {
      * Secondary Actions to be displayed in the ActionSheet via the more menu
      */
     moreActions?: ActionModel[];
+    /**
+     * Actions to be displayed as primary actions with capability to pass MenuList as dropdown
+     */
+    dropdownActions?: DropdownModel[];
     /**
      * array of selected element-ids is used for calculating the number of selected elements - and available for eventhandlers.
      */
@@ -26,4 +30,4 @@ export interface ActionSheetProps extends CommonProps {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
  */
-export declare const ActionSheet: ({ actions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;

package/src/ActionSheet/ActionSheet.variants.d.ts

@@ -1,6 +1,8 @@
 export declare const cvaActionSheet: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaActionContainerAndOverflow: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaActionSpinnerContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaActionSpinner: (props?: ({
-    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
+export declare const cvaDivider: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaActionContainerAndOverflow: (props?: ({
+    isDropdown?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaMoreContainer: (props?: ({
+    isDropdown?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/ActionSheet/ActionSheetElementUtils.d.ts

@@ -1,15 +1,10 @@
 import { ButtonCommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
 import { ActionModel } from "./Actions";
 interface ActionButtonProps extends ButtonCommonProps {
     /**
      * The action model defining what the action.
      */
     action: ActionModel;
-    /**
-     * The children to render inside the button.
-     */
-    children: ReactNode;
 }
 /**
  * The button to show in the ActionSheet.
@@ -17,12 +12,11 @@ interface ActionButtonProps extends ButtonCommonProps {
  *
  * @param {ActionButtonProps} props - The properties for the action button.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @param {ReactNode} props.children - The children to render inside the button.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-export declare const ActionButton: ({ action, children, id, ...rest }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ action, id, ...rest }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Converts an action model to a MenuItem component.
  * These should be shown in the more menu.
@@ -42,5 +36,17 @@ export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: st
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {JSX.Element} - The ActionButton component for the given action.
  */
-export declare const actionDataToActionButton: (action: ActionModel, dataTestId?: string) => import("react/jsx-runtime").JSX.Element;
+export declare const actionDataToActionButton: (action: ActionModel) => import("react/jsx-runtime").JSX.Element;
+interface InnerActionButtonProps {
+    action: ActionModel;
+}
+/**
+ * Renders the icon for an action button.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {InnerActionButtonProps} props - The properties for the action icon.
+ * @param {ActionModel} props.action - The action model defining what action to perform.
+ * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ */
+export declare const ActionIcon: ({ action }: InnerActionButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/ActionSheet/Actions.d.ts

@@ -1,7 +1,11 @@
-import { IconProps, Size } from "@trackunit/react-components";
+import { IconProps } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
+import { ReactNode } from "react";
 type IconExposedProp = Omit<IconProps, "color" | "onclick" | "type" | "name">;
 export type ActionModel = (MethodAction | RouteAction) & CommonAction;
+export type DropdownModel = MethodAction & CommonAction & {
+    dropdown: ReactNode;
+};
 export type MethodAction = {
     type: "method";
     method: (e: React.MouseEvent) => void;
@@ -14,8 +18,7 @@ export type RouteAction = {
 export interface CommonAction extends IconExposedProp {
     id: string;
     label: string;
-    icon: IconName;
-    size?: Size;
+    icon?: IconName;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
     style?: Record<string, string>;
     loading?: boolean;