@trackunit/react-components 0.3.4 → 0.3.6

package/index.cjs.js

@@ -2215,13 +2215,14 @@ const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "flex-col",
     "items-center",
-    "gap-2",
+    "gap-6",
     "p-4",
     "sm:p-6",
     "md:p-12",
     "text-center",
     "justify-center",
     "h-full",
+    "self-center",
 ]);
 const cvaImgStyles = cssClassVarianceUtilities.cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
@@ -3527,49 +3528,36 @@ var SvgWorkerWithSign = (_ref, ref) => {
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgWorkerWithSign);
 
 /**
- * Component representing an empty state.
- * Use this component when there is no data to display or when an error occurs.
  *
- * @param {EmptyStateProps} props props
- * @returns {JSX.Element} component
- * @example
- * <EmptyState
- *  title="No results found"
- * description="Try changing your search criteria"
- * altText="No results found"
- * image="BUILDING_ERROR"
- * />
+ * Empty states serve as placeholders when there's no content to display in either a table or card. They guide users out of the empty state towards actionable steps, highlighting ways to progress. It’s recommended to suggest simple actions that can help the users move out of the empty states towards the content that fits their goals.
+ * ## **When to Use**
+ * - When user actions yield no results (e.g., empty search results or unfilled data).
+ * - To offer guidance on navigating out of the empty state.
+ * - In cases of errors (e.g., failed content loading, unexpected errors).
+ * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
+ * - In celebratory instances (e.g., no new notifications, services up to date).
  */
-const EmptyState = ({ title, description, altText, image, customImageSrc, action, loading, dataTestId, className, }) => {
+const EmptyState = ({ description, altText, image = "WORKER_WITH_SIGN", customImageSrc, loading, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
+    var _a, _b, _c;
     const ImageSource = React.useMemo(() => {
-        let importedImage = ForwardRef;
         switch (image) {
             case "WORKER_WITH_SIGN":
-                importedImage = ForwardRef;
-                break;
+                return ForwardRef;
             case "ROAD_BLOCK":
-                importedImage = ForwardRef$3;
-                break;
+                return ForwardRef$3;
             case "BUILDING_ERROR":
-                importedImage = ForwardRef$5;
-                break;
+                return ForwardRef$5;
             case "WALL_CONSTRUCTION":
-                importedImage = ForwardRef$1;
-                break;
+                return ForwardRef$1;
             case "PHONE_LOCK_SECURITY":
-                importedImage = ForwardRef$4;
-                break;
+                return ForwardRef$4;
             case "SEARCH_DOCUMENT":
-                importedImage = ForwardRef$2;
-                break;
+                return ForwardRef$2;
             default:
-                importedImage = ForwardRef;
+                return ForwardRef;
         }
-        return importedImage;
     }, [image]);
-    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && jsxRuntime.jsx(ImageSource, { height: 200, width: 200 })), title ? jsxRuntime.jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsxRuntime.jsx(Text, { align: "center", children: description }) : null, action] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction ? (jsxRuntime.jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: (_a = additionalHelpAction.to) === null || _a === void 0 ? void 0 : _a.parameters, target: (_b = additionalHelpAction.to) === null || _b === void 0 ? void 0 : _b.target, to: (_c = additionalHelpAction.to) === null || _c === void 0 ? void 0 : _c.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-gray-400"]);
@@ -4108,7 +4096,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
             true: "grid-rows-min-fr grid overflow-y-hidden p-0",

package/index.esm.js

@@ -2195,13 +2195,14 @@ const cvaContainerStyles = cvaMerge([
     "flex",
     "flex-col",
     "items-center",
-    "gap-2",
+    "gap-6",
     "p-4",
     "sm:p-6",
     "md:p-12",
     "text-center",
     "justify-center",
     "h-full",
+    "self-center",
 ]);
 const cvaImgStyles = cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
@@ -3507,49 +3508,36 @@ var SvgWorkerWithSign = (_ref, ref) => {
 var ForwardRef = /*#__PURE__*/forwardRef(SvgWorkerWithSign);
 
 /**
- * Component representing an empty state.
- * Use this component when there is no data to display or when an error occurs.
  *
- * @param {EmptyStateProps} props props
- * @returns {JSX.Element} component
- * @example
- * <EmptyState
- *  title="No results found"
- * description="Try changing your search criteria"
- * altText="No results found"
- * image="BUILDING_ERROR"
- * />
+ * Empty states serve as placeholders when there's no content to display in either a table or card. They guide users out of the empty state towards actionable steps, highlighting ways to progress. It’s recommended to suggest simple actions that can help the users move out of the empty states towards the content that fits their goals.
+ * ## **When to Use**
+ * - When user actions yield no results (e.g., empty search results or unfilled data).
+ * - To offer guidance on navigating out of the empty state.
+ * - In cases of errors (e.g., failed content loading, unexpected errors).
+ * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
+ * - In celebratory instances (e.g., no new notifications, services up to date).
  */
-const EmptyState = ({ title, description, altText, image, customImageSrc, action, loading, dataTestId, className, }) => {
+const EmptyState = ({ description, altText, image = "WORKER_WITH_SIGN", customImageSrc, loading, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }) => {
+    var _a, _b, _c;
     const ImageSource = useMemo(() => {
-        let importedImage = ForwardRef;
         switch (image) {
             case "WORKER_WITH_SIGN":
-                importedImage = ForwardRef;
-                break;
+                return ForwardRef;
             case "ROAD_BLOCK":
-                importedImage = ForwardRef$3;
-                break;
+                return ForwardRef$3;
             case "BUILDING_ERROR":
-                importedImage = ForwardRef$5;
-                break;
+                return ForwardRef$5;
             case "WALL_CONSTRUCTION":
-                importedImage = ForwardRef$1;
-                break;
+                return ForwardRef$1;
             case "PHONE_LOCK_SECURITY":
-                importedImage = ForwardRef$4;
-                break;
+                return ForwardRef$4;
             case "SEARCH_DOCUMENT":
-                importedImage = ForwardRef$2;
-                break;
+                return ForwardRef$2;
             default:
-                importedImage = ForwardRef;
+                return ForwardRef;
         }
-        return importedImage;
     }, [image]);
-    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        jsxs(Fragment, { children: [customImageSrc ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && jsx(ImageSource, { height: 200, width: 200 })), title ? jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsx(Text, { align: "center", children: description }) : null, action] })) }));
+    return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [customImageSrc ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction ? (jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: (_a = additionalHelpAction.to) === null || _a === void 0 ? void 0 : _a.parameters, target: (_b = additionalHelpAction.to) === null || _b === void 0 ? void 0 : _b.target, to: (_c = additionalHelpAction.to) === null || _c === void 0 ? void 0 : _c.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cvaMerge(["text-gray-400"]);
@@ -4088,7 +4076,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
         }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }));
 };
 
-const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "border", "border-slate-300", "grid"], {
+const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
             true: "grid-rows-min-fr grid overflow-y-hidden p-0",

package/package.json

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

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,27 +1,34 @@
 import { CommonProps } from "../../common";
-type Image = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
+type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
+type EmptyStateButtonAction = {
+    disabled?: boolean;
+    onClick?: () => void;
+    title: string;
+    to?: {
+        pathname: string;
+        parameters?: Record<string, string>;
+        target?: string;
+    };
+};
 export interface EmptyStateProps extends CommonProps {
-    title?: string;
     description?: string;
     altText?: string;
-    image?: Image;
+    image?: EmptyStateImage;
     customImageSrc?: string;
-    action?: React.ReactNode;
+    primaryAction?: EmptyStateButtonAction;
+    secondaryAction?: EmptyStateButtonAction;
+    additionalHelpAction?: EmptyStateButtonAction;
     loading?: boolean;
 }
 /**
- * Component representing an empty state.
- * Use this component when there is no data to display or when an error occurs.
  *
- * @param {EmptyStateProps} props props
- * @returns {JSX.Element} component
- * @example
- * <EmptyState
- *  title="No results found"
- * description="Try changing your search criteria"
- * altText="No results found"
- * image="BUILDING_ERROR"
- * />
+ * Empty states serve as placeholders when there's no content to display in either a table or card. They guide users out of the empty state towards actionable steps, highlighting ways to progress. It’s recommended to suggest simple actions that can help the users move out of the empty states towards the content that fits their goals.
+ * ## **When to Use**
+ * - When user actions yield no results (e.g., empty search results or unfilled data).
+ * - To offer guidance on navigating out of the empty state.
+ * - In cases of errors (e.g., failed content loading, unexpected errors).
+ * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
+ * - In celebratory instances (e.g., no new notifications, services up to date).
  */
-export declare const EmptyState: ({ title, description, altText, image, customImageSrc, action, loading, dataTestId, className, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export {};