@trackunit/react-table 0.0.488 → 0.0.489

package/index.cjs.js

@@ -142,6 +142,22 @@ const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
     "sm:col-span-1",
     "sm:flex-row",
 ]);
+const cvaActionSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["p-0", "h-auto"]);
+const cvaActionSpinner = cssClassVarianceUtilities.cvaMerge([], {
+    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": [],
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
 
 /**
  * The button to show in the ActionSheet.
@@ -194,7 +210,7 @@ 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.label, id: action.id, children: [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, dataTestId) => (jsxRuntime.jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.label, 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));
 
 /**
  * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.

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, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, cvaInteractableItem, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { MenuItem, Icon, Spinner, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, cvaInteractableItem, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
 import { objectValues, truthy, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import * as React from 'react';
 import { useMemo, Children, cloneElement, useRef, useEffect, useState, useCallback } from 'react';
@@ -123,6 +123,22 @@ const cvaActionContainerAndOverflow = cvaMerge([
     "sm:col-span-1",
     "sm:flex-row",
 ]);
+const cvaActionSpinnerContainer = cvaMerge(["p-0", "h-auto"]);
+const cvaActionSpinner = cvaMerge([], {
+    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": [],
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
 
 /**
  * The button to show in the ActionSheet.
@@ -175,7 +191,7 @@ 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.label, id: action.id, children: [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, dataTestId) => (jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.label, 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));
 
 /**
  * `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.

package/package.json

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

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

@@ -1,2 +1,6 @@
 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;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/ActionSheet/Actions.d.ts

@@ -18,5 +18,6 @@ export interface CommonAction extends IconExposedProp {
     size?: Size;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
     style?: Record<string, string>;
+    loading?: boolean;
 }
 export {};