@trackunit/react-table 0.0.80 → 0.0.83

package/index.cjs.js

@@ -141,7 +141,7 @@ const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
     "grid-flow-col",
     "min-w-20",
     "gap-1",
-    "rounded-3xl",
+    "rounded-2xl",
     "items-center",
     "z-top",
     "shadow-md",
@@ -159,7 +159,9 @@ const ActionButton = (_a) => {
     return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary" }, rest, { children: children })));
 };
 /**
- * ActionSheet is meant for actions attached to selections in your table.
+ * 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.
+ * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
@@ -176,8 +178,15 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
     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, disabled: (selections === null || selections === void 0 ? void 0 : selections.length) === 0, dataTestId: action.label, className: "lg:mr-3", children: [jsxRuntime.jsx(reactComponents.Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label }), jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style })] }, action.label));
-    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" }, iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsxRuntime.jsx("div", { className: "animate-fade-in-fast  absolute  bottom-12  right-0", children: jsxRuntime.jsx(reactComponents.MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
+    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)) }) }))] }));
 };
 
 /**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, Button, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { useContainerProps, IconButton, Icon, Text, MoreMenu, MenuList, MenuItem, Button, 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';
@@ -118,7 +118,7 @@ const cvaActionSheet = cvaMerge([
     "grid-flow-col",
     "min-w-20",
     "gap-1",
-    "rounded-3xl",
+    "rounded-2xl",
     "items-center",
     "z-top",
     "shadow-md",
@@ -136,7 +136,9 @@ const ActionButton = (_a) => {
     return (jsx(Button, Object.assign({ onClick: action.method, variant: "transparent", color: "secondary" }, rest, { children: children })));
 };
 /**
- * ActionSheet is meant for actions attached to selections in your table.
+ * 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.
+ * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
@@ -153,8 +155,15 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
     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, disabled: (selections === null || selections === void 0 ? void 0 : selections.length) === 0, dataTestId: action.label, className: "lg:mr-3", children: [jsx(Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label }), jsx(Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style })] }, action.label));
-    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" }, iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsx("div", { className: "animate-fade-in-fast  absolute  bottom-12  right-0", children: jsx(MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
+    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)) }) }))] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.80",
+  "version": "0.0.83",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,12 +13,12 @@
     "@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.187",
-    "@trackunit/react-core-contexts-api": "0.2.67",
-    "@trackunit/react-core-contexts-test": "0.1.124",
-    "@trackunit/react-form-components": "0.0.187",
-    "@trackunit/react-table-base-components": "0.0.64",
-    "@trackunit/shared-utils": "0.0.14",
+    "@trackunit/react-components": "0.1.189",
+    "@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/shared-utils": "0.0.15",
     "@trackunit/ui-icons": "0.0.78",
     "immutability-helper": "3.1.1",
     "react": "18.2.0",

package/src/ActionSheet/ActionSheet.d.ts

@@ -2,13 +2,27 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ActionModel } from "./Actions";
 export interface ActionSheetProps extends CommonProps {
+    /**
+     * Actions to be displayed in the ActionSheet as primary actions (normally visible)
+     */
     actions: readonly [ActionModel, ActionModel?, ActionModel?, ActionModel?];
+    /**
+     * Secondary Actions to be displayed in the ActionSheet via the more menu
+     */
     moreActions?: ActionModel[];
+    /**
+     * array of selected element-ids is used for calculating the number of selected elements - and available for eventhandlers.
+     */
     selections: string[];
+    /**
+     * Called when users closes the action sheet - must reset the selection.
+     */
     resetSelection: () => void;
 }
 /**
- * ActionSheet is meant for actions attached to selections in your table.
+ * 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.
+ * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component