@trackunit/react-table 0.0.83 → 0.0.85

package/index.cjs.js

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var React = require('react');
-var reactRouterDom = require('react-router-dom');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactRouterDom = require('react-router-dom');
 var reactTableBaseComponents = require('@trackunit/react-table-base-components');
 var reactDom = require('react-dom');
 var reactFormComponents = require('@trackunit/react-form-components');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var defaultTranslations = {
-	"table.actionsheet.selected": "selected",
+	"table.actionsheet.selected": "{{count}} selected",
 	"layout.actions.reset": "Reset",
 	"table.pagination.of": "of {{count}}",
 	"table.pagination.full": "Showing {{count}} of {{total}} results",
@@ -106,6 +106,40 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
+const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
+    "w-[760px]",
+    "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]",
+    "sm:grid-rows-1",
+    "p-2",
+    "bg-blue-600",
+    "gap-1",
+    "rounded-2xl",
+    "h-min",
+    "items-center",
+    "z-top",
+    "shadow-2xl",
+    "fixed",
+    "bottom-24",
+    "left-1/2",
+    "-translate-x-1/2",
+]);
+const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
+    "col-span-2",
+    "flex",
+    "flex-row-reverse",
+    "flex-nowrap",
+    "justify-end",
+    "gap-2",
+    "overflow-hidden",
+    "sm:col-span-1",
+    "sm:flex-row",
+]);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -133,31 +167,93 @@ function __rest(s, e) {
     return t;
 }
 
-const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
-    "animate-fade-in-fast",
-    "grid",
-    "!p-2",
-    "bg-blue-600",
-    "grid-flow-col",
-    "min-w-20",
-    "gap-1",
-    "rounded-2xl",
-    "items-center",
-    "z-top",
-    "shadow-md",
-    "fixed",
-    "bottom-24",
-    "left-1/2",
-    "-translate-x-1/2",
-]);
-
+/**
+ * The button to show in the ActionSheet.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @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 = (_a) => {
-    var { action, children } = _a, rest = __rest(_a, ["action", "children"]);
+    var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
     if (action.type === "route") {
-        return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ renderAs: reactRouterDom.Link, to: action.url, variant: "transparent", color: "secondary" }, rest, { children: children })));
+        return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ renderAs: reactRouterDom.Link, to: action.url, variant: "transparent", color: "secondary", id: id }, rest, { children: children })));
+    }
+    return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary", id: id }, rest, { children: children })));
+};
+/**
+ * Converts an action model to a MenuItem component.
+ * These should be shown in the more menu.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @param {string} [dataTestId] - Optional data test ID.
+ * @returns {JSX.Element} - The MenuItem component for the given action.
+ */
+const actionDataToMenuItem = (action, dataTestId) => {
+    const props = "url" in action
+        ? {
+            dataTestId,
+        }
+        : {
+            id: action.id,
+            key: action.label,
+            dataTestId,
+        };
+    const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, onClick: "method" in action ? action.method : undefined, dataTestId: `${dataTestId}-action-label`, className: "flex justify-center", label: action.label, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }) }, action.label));
+    if ("url" in action) {
+        return (jsxRuntime.jsx(reactRouterDom.Link, { id: action.id, to: action.url, children: item }, action.label));
     }
-    return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary" }, rest, { children: children })));
+    return item;
 };
+/**
+ * Converts an action model to an ActionButton component.
+ * These should be shown in the ActionSheet.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @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, dataTestId: action.label, className: "max-w-max flex-shrink-0", id: action.id, children: [jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, color: "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }), jsxRuntime.jsx(reactComponents.Text, { dataTestId: `${dataTestId}-action-label`, className: "!text-base text-white", children: action.label })] }, action.id));
+
+/**
+ * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
+ * It makes use of the `useOverflowItems` hook to determine which items should go into the overflow menu.
+ *
+ * @param {object} props - Props for the component.
+ * @param {ActionModel[]} props.actions - Array of action models to be rendered.
+ * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
+ * @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 && actions.map(action => action && actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
+    const { overflowContainerRef, itemOverflowMap } = reactComponents.useOverflowItems({
+        children,
+        childUniqueIdentifierAttribute: "id",
+        threshold: 1,
+    });
+    const itemVisibilityClassName = (id) => {
+        if (itemOverflowMap[id]) {
+            return "invisible";
+        }
+        return "visible";
+    };
+    const overflowItemCount = Object.values(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 React.cloneElement(child, {
+                        className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
+                    });
+                }) }), React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${dataTestId}-more-menu`, children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", children: [moreActions ? moreActions : null, actions.map(action => {
+                            return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
+                        })] }) })) : null] }));
+};
+
 /**
  * The Action Sheet appears when one or more items are selected from a table.
  * It primarily accommodates 1-3 main actions that represent the most crucial and frequently accessed functions on the specific page.
@@ -168,25 +264,9 @@ const ActionButton = (_a) => {
  */
 const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
-    const containerProps = reactComponents.useContainerProps({ dataTestId, className });
-    const [smallScreen, setSmallScreen] = React.useState(window.innerWidth < 1024);
-    const wrapperSmallScreen = () => setSmallScreen(window.innerWidth < 1024);
-    React.useEffect(() => {
-        window.addEventListener("resize", wrapperSmallScreen);
-        return () => window.removeEventListener("resize", wrapperSmallScreen);
-    }, []);
-    const filteredActions = actions.filter(action => action !== undefined);
-    const actionsFilteredForScreenSize = smallScreen ? [filteredActions[0]] : filteredActions;
-    const moreActionsFilteredForScreenSize = smallScreen ? moreActions === null || moreActions === void 0 ? void 0 : moreActions.concat(filteredActions.slice(1)) : moreActions;
-    const actionDataToActionButton = (action, moreAction = false) => (jsxRuntime.jsxs(ActionButton, { action: action, dataTestId: action.label, className: "lg:mr-3", children: [jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }), jsxRuntime.jsx(reactComponents.Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label })] }, action.label));
-    const actionDataToMenuItem = (action) => {
-        const item = (jsxRuntime.jsx(reactComponents.MenuItem, { onClick: "method" in action ? action.method : undefined, dataTestId: `${containerProps["data-testid"]}-action-label`, label: action.label, className: "lg:mr-3", prefix: jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }) }, action.label));
-        if ("url" in action) {
-            return jsxRuntime.jsx(reactRouterDom.Link, { to: action.url, children: item });
-        }
-        return item;
-    };
-    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxRuntime.jsxs(reactComponents.Text, { size: "large", className: "!lg:mr-28 !mr-4 w-max !text-white", children: [selections === null || selections === void 0 ? void 0 : selections.length, " ", t("table.actionsheet.selected")] }), actionsFilteredForScreenSize.map(action => action && actionDataToActionButton(action)), moreActionsFilteredForScreenSize && moreActionsFilteredForScreenSize.length > 0 && (jsxRuntime.jsx(reactComponents.MoreMenu, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsxRuntime.jsx(reactComponents.MenuList, { className: "relative -right-2", children: moreActionsFilteredForScreenSize.map(action => actionDataToMenuItem(action)) }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), t("table.actionsheet.selected", { count: selections === null || selections === void 0 ? void 0 : selections.length })] }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
+                actions,
+                moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
 /**

package/index.esm.js

@@ -1,17 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, MenuItem, Button, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import * as React from 'react';
-import { useState, useEffect, useCallback, useRef, createContext, memo as memo$2, isValidElement, cloneElement, useLayoutEffect, useMemo, useContext } from 'react';
-import { Link } from 'react-router-dom';
+import { useMemo, Children, cloneElement, useCallback, useEffect, useRef, createContext, memo as memo$2, isValidElement, useLayoutEffect, useContext, useState } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { Link } from 'react-router-dom';
 import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
 import { flushSync } from 'react-dom';
 import { Toggle, RadioGroup, RadioItem } from '@trackunit/react-form-components';
 import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
 
 var defaultTranslations = {
-	"table.actionsheet.selected": "selected",
+	"table.actionsheet.selected": "{{count}} selected",
 	"layout.actions.reset": "Reset",
 	"table.pagination.of": "of {{count}}",
 	"table.pagination.full": "Showing {{count}} of {{total}} results",
@@ -83,6 +83,40 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+const cvaActionSheet = cvaMerge([
+    "w-[760px]",
+    "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]",
+    "sm:grid-rows-1",
+    "p-2",
+    "bg-blue-600",
+    "gap-1",
+    "rounded-2xl",
+    "h-min",
+    "items-center",
+    "z-top",
+    "shadow-2xl",
+    "fixed",
+    "bottom-24",
+    "left-1/2",
+    "-translate-x-1/2",
+]);
+const cvaActionContainerAndOverflow = cvaMerge([
+    "col-span-2",
+    "flex",
+    "flex-row-reverse",
+    "flex-nowrap",
+    "justify-end",
+    "gap-2",
+    "overflow-hidden",
+    "sm:col-span-1",
+    "sm:flex-row",
+]);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -110,31 +144,93 @@ function __rest(s, e) {
     return t;
 }
 
-const cvaActionSheet = cvaMerge([
-    "animate-fade-in-fast",
-    "grid",
-    "!p-2",
-    "bg-blue-600",
-    "grid-flow-col",
-    "min-w-20",
-    "gap-1",
-    "rounded-2xl",
-    "items-center",
-    "z-top",
-    "shadow-md",
-    "fixed",
-    "bottom-24",
-    "left-1/2",
-    "-translate-x-1/2",
-]);
-
+/**
+ * The button to show in the ActionSheet.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @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 = (_a) => {
-    var { action, children } = _a, rest = __rest(_a, ["action", "children"]);
+    var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
     if (action.type === "route") {
-        return (jsx(Button, Object.assign({ renderAs: Link, to: action.url, variant: "transparent", color: "secondary" }, rest, { children: children })));
+        return (jsx(Button, Object.assign({ renderAs: Link, to: action.url, variant: "transparent", color: "secondary", id: id }, rest, { children: children })));
+    }
+    return (jsx(Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary", id: id }, rest, { children: children })));
+};
+/**
+ * Converts an action model to a MenuItem component.
+ * These should be shown in the more menu.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @param {string} [dataTestId] - Optional data test ID.
+ * @returns {JSX.Element} - The MenuItem component for the given action.
+ */
+const actionDataToMenuItem = (action, dataTestId) => {
+    const props = "url" in action
+        ? {
+            dataTestId,
+        }
+        : {
+            id: action.id,
+            key: action.label,
+            dataTestId,
+        };
+    const item = (jsx(MenuItem, { props, onClick: "method" in action ? action.method : undefined, dataTestId: `${dataTestId}-action-label`, className: "flex justify-center", label: action.label, prefix: jsx(Icon, { name: action.icon, size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }) }, action.label));
+    if ("url" in action) {
+        return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
     }
-    return (jsx(Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary" }, rest, { children: children })));
+    return item;
 };
+/**
+ * Converts an action model to an ActionButton component.
+ * These should be shown in the ActionSheet.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @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, dataTestId: action.label, className: "max-w-max flex-shrink-0", id: action.id, children: [jsx(Icon, { name: action.icon, color: "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }), jsx(Text, { dataTestId: `${dataTestId}-action-label`, className: "!text-base text-white", children: action.label })] }, action.id));
+
+/**
+ * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
+ * It makes use of the `useOverflowItems` hook to determine which items should go into the overflow menu.
+ *
+ * @param {object} props - Props for the component.
+ * @param {ActionModel[]} props.actions - Array of action models to be rendered.
+ * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
+ * @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 && actions.map(action => action && actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
+    const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
+        children,
+        childUniqueIdentifierAttribute: "id",
+        threshold: 1,
+    });
+    const itemVisibilityClassName = (id) => {
+        if (itemOverflowMap[id]) {
+            return "invisible";
+        }
+        return "visible";
+    };
+    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    return (jsxs(Fragment, { children: [jsx("div", { className: cvaActionContainerAndOverflow(), 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, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${dataTestId}-more-menu`, children: jsxs(MenuList, { className: "relative -right-2", children: [moreActions ? moreActions : null, actions.map(action => {
+                            return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
+                        })] }) })) : null] }));
+};
+
 /**
  * The Action Sheet appears when one or more items are selected from a table.
  * It primarily accommodates 1-3 main actions that represent the most crucial and frequently accessed functions on the specific page.
@@ -145,25 +241,9 @@ const ActionButton = (_a) => {
  */
 const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
-    const containerProps = useContainerProps({ dataTestId, className });
-    const [smallScreen, setSmallScreen] = useState(window.innerWidth < 1024);
-    const wrapperSmallScreen = () => setSmallScreen(window.innerWidth < 1024);
-    useEffect(() => {
-        window.addEventListener("resize", wrapperSmallScreen);
-        return () => window.removeEventListener("resize", wrapperSmallScreen);
-    }, []);
-    const filteredActions = actions.filter(action => action !== undefined);
-    const actionsFilteredForScreenSize = smallScreen ? [filteredActions[0]] : filteredActions;
-    const moreActionsFilteredForScreenSize = smallScreen ? moreActions === null || moreActions === void 0 ? void 0 : moreActions.concat(filteredActions.slice(1)) : moreActions;
-    const actionDataToActionButton = (action, moreAction = false) => (jsxs(ActionButton, { action: action, dataTestId: action.label, className: "lg:mr-3", children: [jsx(Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }), jsx(Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label })] }, action.label));
-    const actionDataToMenuItem = (action) => {
-        const item = (jsx(MenuItem, { onClick: "method" in action ? action.method : undefined, dataTestId: `${containerProps["data-testid"]}-action-label`, label: action.label, className: "lg:mr-3", prefix: jsx(Icon, { name: action.icon, size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style }) }, action.label));
-        if ("url" in action) {
-            return jsx(Link, { to: action.url, children: item });
-        }
-        return item;
-    };
-    return (jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxs(Text, { size: "large", className: "!lg:mr-28 !mr-4 w-max !text-white", children: [selections === null || selections === void 0 ? void 0 : selections.length, " ", t("table.actionsheet.selected")] }), actionsFilteredForScreenSize.map(action => action && actionDataToActionButton(action)), moreActionsFilteredForScreenSize && moreActionsFilteredForScreenSize.length > 0 && (jsx(MoreMenu, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsx(MenuList, { className: "relative -right-2", children: moreActionsFilteredForScreenSize.map(action => actionDataToMenuItem(action)) }) }))] }));
+    return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), t("table.actionsheet.selected", { count: selections === null || selections === void 0 ? void 0 : selections.length })] }), jsx(ActionContainerAndOverflow, { dataTestId,
+                actions,
+                moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,11 +13,11 @@
     "@trackunit/css-core": "0.0.99",
     "@trackunit/i18n-library-translation": "0.0.89",
     "@trackunit/iris-app-api": "0.0.126",
-    "@trackunit/react-components": "0.1.189",
+    "@trackunit/react-components": "0.1.190",
     "@trackunit/react-core-contexts-api": "0.2.68",
     "@trackunit/react-core-contexts-test": "0.1.125",
-    "@trackunit/react-form-components": "0.0.189",
-    "@trackunit/react-table-base-components": "0.0.66",
+    "@trackunit/react-form-components": "0.0.191",
+    "@trackunit/react-table-base-components": "0.0.68",
     "@trackunit/shared-utils": "0.0.15",
     "@trackunit/ui-icons": "0.0.78",
     "immutability-helper": "3.1.1",

package/src/ActionSheet/ActionContainerAndOverflow.d.ts

@@ -0,0 +1,19 @@
+import { CommonProps, SidebarItemProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+import { ActionModel } from "./Actions";
+interface ActionContainerAndOverflowProps extends CommonProps {
+    actions: ActionModel[];
+    moreActions?: ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>;
+}
+/**
+ * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
+ * It makes use of the `useOverflowItems` hook to determine which items should go into the overflow menu.
+ *
+ * @param {object} props - Props for the component.
+ * @param {ActionModel[]} props.actions - Array of action models to be rendered.
+ * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
+ * @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) => JSX.Element;
+export {};

package/src/ActionSheet/ActionSheet.d.ts

@@ -5,7 +5,7 @@ export interface ActionSheetProps extends CommonProps {
     /**
      * Actions to be displayed in the ActionSheet as primary actions (normally visible)
      */
-    actions: readonly [ActionModel, ActionModel?, ActionModel?, ActionModel?];
+    actions: ActionModel[];
     /**
      * Secondary Actions to be displayed in the ActionSheet via the more menu
      */

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

@@ -1 +1,2 @@
 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;

package/src/ActionSheet/ActionSheetElementUtils.d.ts

@@ -0,0 +1,46 @@
+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.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @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) => JSX.Element;
+/**
+ * Converts an action model to a MenuItem component.
+ * These should be shown in the more menu.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @param {string} [dataTestId] - Optional data test ID.
+ * @returns {JSX.Element} - The MenuItem component for the given action.
+ */
+export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: string) => JSX.Element;
+/**
+ * Converts an action model to an ActionButton component.
+ * These should be shown in the ActionSheet.
+ * Should not be used outside the ActionSheet component.
+ *
+ * @param {ActionModel} action - The action model to convert.
+ * @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) => JSX.Element;
+export {};

package/src/ActionSheet/Actions.d.ts

@@ -12,6 +12,7 @@ export type RouteAction = {
     url: string;
 };
 export interface CommonAction extends IconExposedProp {
+    id: string;
     label: string;
     icon: IconName;
     size?: Size;