@trackunit/react-components 0.1.408 → 0.1.410

package/index.cjs.js

@@ -4222,15 +4222,15 @@ const cvaPageHeader = cssClassVarianceUtilities.cvaMerge([
 ]);
 const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
 const cvaPageHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-x-4", "flex-wrap", "items-center"]);
-const cvaPageHeaderHeadingAccessoriesContainer = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "flex-wrap",
-    "items-center",
-    "gap-x-4",
-    "gap-y-2",
-]);
+const cvaPageHeaderHeadingAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-wrap", "items-center", "gap-x-4", "gap-y-2", "grow"], {
+    variants: {
+        actionPosition: {
+            right: ["justify-between"],
+        },
+    },
+});
 const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
-const cvaPageHeaderDescriptionAndLinkContainer = cssClassVarianceUtilities.cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
+cssClassVarianceUtilities.cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
 const cvaPageHeaderLink = cssClassVarianceUtilities.cvaMerge([
     "text-primary-600",
     "hover:text-primary-700",
@@ -4249,11 +4249,13 @@ const cvaPageHeaderLink = cssClassVarianceUtilities.cvaMerge([
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
+                            actionPosition: actionPosition ? actionPosition : null,
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);

package/index.esm.js

@@ -4202,15 +4202,15 @@ const cvaPageHeader = cvaMerge([
 ]);
 const cvaPageHeaderHeading = cvaMerge(["flex", "text-slate-900", "text-2xl", "font-bold", "min-w-0"]);
 const cvaPageHeaderHeadingContainer = cvaMerge(["flex", "gap-x-4", "flex-wrap", "items-center"]);
-const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge([
-    "flex",
-    "flex-wrap",
-    "items-center",
-    "gap-x-4",
-    "gap-y-2",
-]);
+const cvaPageHeaderHeadingAccessoriesContainer = cvaMerge(["flex", "flex-wrap", "items-center", "gap-x-4", "gap-y-2", "grow"], {
+    variants: {
+        actionPosition: {
+            right: ["justify-between"],
+        },
+    },
+});
 const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "items-center"]);
-const cvaPageHeaderDescriptionAndLinkContainer = cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
+cvaMerge(["flex", "h-fit", "items-center", "gap-1"]);
 const cvaPageHeaderLink = cvaMerge([
     "text-primary-600",
     "hover:text-primary-700",
@@ -4229,11 +4229,13 @@ const cvaPageHeaderLink = cvaMerge([
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
+                            actionPosition: actionPosition ? actionPosition : null,
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row items-center", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);

package/package.json

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

package/src/components/PageHeader/PageHeader.d.ts

@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag";
+type ActionPosition = "right";
 export interface PageHeaderProps extends CommonProps {
     /**
      * Text to be displayed in the header.
@@ -23,6 +24,10 @@ export interface PageHeaderProps extends CommonProps {
      * Additional actions to be rendered along with the header.
      */
     action?: React.ReactNode;
+    /**
+     * Enables the actions to be pushed to the right in the available space - the default is left side.
+     */
+    actionPosition?: ActionPosition;
     /**
      * A tag that is displayed on the side of the header.
      * A RectNode passed into the tag will be rendered as such.
@@ -55,4 +60,5 @@ export interface PageHeaderProps extends CommonProps {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText, }: PageHeaderProps) => ReactElement;
+export {};

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -4,7 +4,9 @@ export declare const cvaPageHeaderContainer: (props?: ({
 export declare const cvaPageHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeading: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderHeadingAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderHeadingAccessoriesContainer: (props?: ({
+    actionPosition?: "right" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaPageHeaderChildContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaPageHeaderDescriptionAndLinkContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderDescriptionContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderLink: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;