@trackunit/react-table 2.7.4 → 2.7.6

package/index.cjs.js

@@ -3,10 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
+var reactRouter = require('@tanstack/react-router');
 var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
-var reactRouter = require('@tanstack/react-router');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var zod = require('zod');
 var reactFormComponents = require('@trackunit/react-form-components');
@@ -102,6 +102,58 @@ const ActionIcon = ({ action }) => {
     return action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "small", style: action.style })) : null;
 };
 
+/**
+ * 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 {string} [props.id] - The optional ID for the button.
+ * @param {...any} [props.rest] - Any additional button properties.
+ * @returns {ReactElement} - The action button component.
+ */
+const ActionButton = ({ action, id, ...rest }) => {
+    if (action.type === "route") {
+        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 }) }));
+    }
+    const content = (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
+    return action.tip ? jsxRuntime.jsx(reactComponents.Tooltip, { label: action.tip, children: content }) : content;
+};
+/**
+ * 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 {ReactElement} - The MenuItem component for the given action.
+ */
+const actionDataToMenuItem = (action, dataTestId) => {
+    const props = "url" in action
+        ? {
+            "data-testid": dataTestId,
+        }
+        : {
+            id: action.id,
+            key: action.label,
+            "data-testid": dataTestId,
+        };
+    const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "medium", 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));
+    }
+    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 action - The action model to convert.
+ * @returns {*} The ActionButton component for the given action.
+ */
+const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
+
 const cvaActionSheet = cssClassVarianceUtilities.cvaMerge([
     "w-[760px]",
     "max-w-[80%]",
@@ -159,58 +211,6 @@ const cvaMoreContainer = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
-/**
- * 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 {string} [props.id] - The optional ID for the button.
- * @param {...any} [props.rest] - Any additional button properties.
- * @returns {ReactElement} - The action button component.
- */
-const ActionButton = ({ action, id, ...rest }) => {
-    if (action.type === "route") {
-        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 }) }));
-    }
-    const content = (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
-    return action.tip ? jsxRuntime.jsx(reactComponents.Tooltip, { label: action.tip, children: content }) : content;
-};
-/**
- * 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 {ReactElement} - The MenuItem component for the given action.
- */
-const actionDataToMenuItem = (action, dataTestId) => {
-    const props = "url" in action
-        ? {
-            "data-testid": dataTestId,
-        }
-        : {
-            id: action.id,
-            key: action.label,
-            "data-testid": dataTestId,
-        };
-    const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "medium", 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));
-    }
-    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 action - The action model to convert.
- * @returns {*} The ActionButton component for the given action.
- */
-const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, 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.

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { Icon, MenuItem, Button, Tooltip, useOverflowItems, MoreMenu, MenuContent, Spacer, usePersistedState, useDebounce, Text, cvaInteractableItem, Popover, PopoverTrigger, IconButton, PopoverContent, cvaMenuList, cvaMenu, useBidirectionalScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
+import { Link } from '@tanstack/react-router';
 import { objectValues, VISIBLE_ONLY_COLUMN_VISIBILITY_KEY, objectKeys, nonNullable, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useCallback, useState, useEffect, useRef, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Link } from '@tanstack/react-router';
 import { useCurrentUser } from '@trackunit/react-core-hooks';
 import { z } from 'zod';
 import { cvaLabel, ToggleSwitch, Search, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
@@ -101,6 +101,58 @@ const ActionIcon = ({ action }) => {
     return action.icon ? (jsx(Icon, { color: "white", "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "small", style: action.style })) : null;
 };
 
+/**
+ * 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 {string} [props.id] - The optional ID for the button.
+ * @param {...any} [props.rest] - Any additional button properties.
+ * @returns {ReactElement} - The action button component.
+ */
+const ActionButton = ({ action, id, ...rest }) => {
+    if (action.type === "route") {
+        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 }) }));
+    }
+    const content = (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
+    return action.tip ? jsx(Tooltip, { label: action.tip, children: content }) : content;
+};
+/**
+ * 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 {ReactElement} - The MenuItem component for the given action.
+ */
+const actionDataToMenuItem = (action, dataTestId) => {
+    const props = "url" in action
+        ? {
+            "data-testid": dataTestId,
+        }
+        : {
+            id: action.id,
+            key: action.label,
+            "data-testid": dataTestId,
+        };
+    const item = (jsx(MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "medium", 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));
+    }
+    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 action - The action model to convert.
+ * @returns {*} The ActionButton component for the given action.
+ */
+const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
+
 const cvaActionSheet = cvaMerge([
     "w-[760px]",
     "max-w-[80%]",
@@ -158,58 +210,6 @@ const cvaMoreContainer = cvaMerge([
     },
 });
 
-/**
- * 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 {string} [props.id] - The optional ID for the button.
- * @param {...any} [props.rest] - Any additional button properties.
- * @returns {ReactElement} - The action button component.
- */
-const ActionButton = ({ action, id, ...rest }) => {
-    if (action.type === "route") {
-        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 }) }));
-    }
-    const content = (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
-    return action.tip ? jsx(Tooltip, { label: action.tip, children: content }) : content;
-};
-/**
- * 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 {ReactElement} - The MenuItem component for the given action.
- */
-const actionDataToMenuItem = (action, dataTestId) => {
-    const props = "url" in action
-        ? {
-            "data-testid": dataTestId,
-        }
-        : {
-            id: action.id,
-            key: action.label,
-            "data-testid": dataTestId,
-        };
-    const item = (jsx(MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", name: action.icon, ref: action.ref, size: "medium", 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));
-    }
-    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 action - The action model to convert.
- * @returns {*} The ActionButton component for the given action.
- */
-const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "2.7.4",
+  "version": "2.7.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "2.9.4",
-    "@trackunit/react-core-hooks": "1.21.10",
-    "@trackunit/shared-utils": "1.16.17",
-    "@trackunit/css-class-variance-utilities": "1.14.14",
-    "@trackunit/ui-icons": "1.14.13",
-    "@trackunit/react-table-base-components": "2.6.4",
-    "@trackunit/react-form-components": "2.6.4",
-    "@trackunit/i18n-library-translation": "2.4.10",
-    "@trackunit/iris-app-runtime-core-api": "1.17.17",
+    "@trackunit/react-components": "2.10.1",
+    "@trackunit/react-core-hooks": "1.21.11",
+    "@trackunit/shared-utils": "1.16.18",
+    "@trackunit/css-class-variance-utilities": "1.14.15",
+    "@trackunit/ui-icons": "1.14.14",
+    "@trackunit/react-table-base-components": "2.6.6",
+    "@trackunit/react-form-components": "2.6.6",
+    "@trackunit/i18n-library-translation": "2.4.11",
+    "@trackunit/iris-app-runtime-core-api": "1.17.18",
     "zod": "^3.25.76"
   },
   "peerDependencies": {