@trackunit/react-components 0.1.289 → 0.1.291

package/index.cjs.js

@@ -12,6 +12,7 @@ var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
 var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactSlot = require('@radix-ui/react-slot');
 var reactUse = require('react-use');
 var reactDayPicker = require('react-day-picker');
 var tailwindMerge = require('tailwind-merge');
@@ -714,13 +715,18 @@ const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
  * @returns {JSX.Element} Button component
  */
 const Button = React__namespace.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return React__namespace.createElement(renderAs, Object.assign({ ref,
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "asChild", "circular"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const sharedCompProps = Object.assign({ ref,
         title,
-        type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
+        tabIndex, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "aria-disabled": disabled || loading, "data-testid": dataTestId }, rest);
+    const buttonSpecificProps = {
+        disabled: disabled || loading,
+        type,
+    };
+    return (jsxRuntime.jsxs(Comp, Object.assign({}, sharedCompProps, (asChild ? {} : buttonSpecificProps), { children: [loading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, jsxRuntime.jsx(reactSlot.Slottable, { children: children }), suffix && !loading ? jsxRuntime.jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] })));
 });
 Button.displayName = "Button";
 
@@ -1275,7 +1281,7 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
@@ -3351,7 +3357,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     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(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }), renderAs: reactRouter.Link, size: "small", to: backTo, variant: "ghost-neutral" })) : 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", params: prev => prev, 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(), "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", params: prev => prev, 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] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);

package/index.esm.js

@@ -9,6 +9,7 @@ import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import { useMeasure, useCopyToClipboard, usePrevious } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { twMerge } from 'tailwind-merge';
@@ -683,13 +684,18 @@ const cvaIconButton = cvaMerge([], {
  * @returns {JSX.Element} Button component
  */
 const Button = React.forwardRef((_a, ref) => {
-    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return React.createElement(renderAs, Object.assign({ ref,
+    var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular } = _a, rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "asChild", "circular"]);
+    const Comp = asChild ? Slot : "button";
+    const sharedCompProps = Object.assign({ ref,
         title,
-        type,
         role,
         onClick,
-        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "data-testid": dataTestId }, rest), jsxs(Fragment, { children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, children, suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] }));
+        tabIndex, className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }), "aria-label": title, "aria-disabled": disabled || loading, "data-testid": dataTestId }, rest);
+    const buttonSpecificProps = {
+        disabled: disabled || loading,
+        type,
+    };
+    return (jsxs(Comp, Object.assign({}, sharedCompProps, (asChild ? {} : buttonSpecificProps), { children: [loading ? (jsx(Spinner, { centering: "vertically", className: cvaButtonSpinner({ variant }), containerClassName: cvaButtonSpinnerContainer(), size: "small" })) : null, prefix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: prefix }) : null, jsx(Slottable, { children: children }), suffix && !loading ? jsx("div", { className: cvaButtonPrefixSuffix({ size: size }), children: suffix }) : null] })));
 });
 Button.displayName = "Button";
 
@@ -1244,7 +1250,7 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
@@ -3320,7 +3326,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     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(IconButton, { icon: jsx(Icon, { name: "ArrowLeft" }), renderAs: Link, size: "small", to: backTo, variant: "ghost-neutral" })) : 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", params: prev => prev, 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(), "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", params: prev => prev, 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] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.289",
+  "version": "0.1.291",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@trackunit/ui-design-tokens": "*",
+    "@radix-ui/react-slot": "^1.0.2",
     "react": "^18.2.0",
     "@trackunit/css-class-variance-utilities": "*",
     "react-use": "^17.4.0",

package/src/components/buttons/Button/Button.d.ts

@@ -23,9 +23,9 @@ export interface ButtonProps extends ButtonCommonProps {
      */
     type?: ButtonType;
     /**
-     * The element type the button will be rendered as.
+     * If true the button will render as the child element, and not be a button element
      */
-    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    asChild?: boolean;
     /**
      * The Id of the form to submit, for button type submit
      */

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -36,10 +36,6 @@ export interface ButtonCommonProps extends CommonProps {
      * The size of the button.
      */
     size?: Size;
-    /**
-     * The link to be used for the button.
-     */
-    to?: string;
     /**
      * The id of the button.
      */