@trackunit/react-components 0.1.383 → 0.1.385

package/index.cjs.js

@@ -11,9 +11,9 @@ var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 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 uuid = require('uuid');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
-var uuid = require('uuid');
 var isEqual = require('lodash/isEqual');
 var reactUse = require('react-use');
 var reactRouter = require('@tanstack/react-router');
@@ -170,22 +170,7 @@ const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
 };
-/**
- * Converts camelCase text to humanized text.
- *
- * @param text text to convert
- * @returns {string} humanized text with spaces between words
- * @example camelCaseToHumanizedText("QuestionMarkCircle") => "Question Mark Circle"
- */
-const camelCaseToHumanizedText = (text) => {
-    // Replace capital letters (except at the start) with space + letter
-    const humanizedText = text ? text.replace(/([A-Z])/g, " $1").trim() : "";
-    if (humanizedText.length === 0) {
-        return "";
-    }
-    // Optionally, capitalize the first letter of the result
-    return humanizedText.charAt(0).toUpperCase() + humanizedText.slice(1);
-};
+const ICON_CONTAINER_ID = uuid.v4();
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -194,7 +179,7 @@ const camelCaseToHumanizedText = (text) => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, title, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = React.useRef(null);
     const correctIconType = React.useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -216,7 +201,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": title ? title : camelCaseToHumanizedText(iconName), "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -1756,6 +1741,7 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
+const LABEL_ID = uuid.v4();
 /**
  * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
  *
@@ -1781,7 +1767,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();

package/index.esm.js

@@ -7,10 +7,10 @@ import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 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 { snakeCase, titleCase } from 'string-ts';
+import { v4 } from 'uuid';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
-import { v4 } from 'uuid';
 import isEqual from 'lodash/isEqual';
 import { usePrevious, useMeasure, useCopyToClipboard } from 'react-use';
 import { Link, useBlocker } from '@tanstack/react-router';
@@ -139,22 +139,7 @@ const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
 };
-/**
- * Converts camelCase text to humanized text.
- *
- * @param text text to convert
- * @returns {string} humanized text with spaces between words
- * @example camelCaseToHumanizedText("QuestionMarkCircle") => "Question Mark Circle"
- */
-const camelCaseToHumanizedText = (text) => {
-    // Replace capital letters (except at the start) with space + letter
-    const humanizedText = text ? text.replace(/([A-Z])/g, " $1").trim() : "";
-    if (humanizedText.length === 0) {
-        return "";
-    }
-    // Optionally, capitalize the first letter of the result
-    return humanizedText.charAt(0).toUpperCase() + humanizedText.slice(1);
-};
+const ICON_CONTAINER_ID = v4();
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -163,7 +148,7 @@ const camelCaseToHumanizedText = (text) => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, title, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
     const correctIconType = useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -185,7 +170,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { className: cvaIcon({ color, size, className }), "data-testid": dataTestId, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": title ? title : camelCaseToHumanizedText(iconName), "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -1725,6 +1710,7 @@ const cvaChevronIcon = cvaMerge([
     },
 });
 
+const LABEL_ID = v4();
 /**
  * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
  *
@@ -1750,7 +1736,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();

package/package.json

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

package/src/common/AriaProps.d.ts

@@ -0,0 +1,5 @@
+export type AriaProps = {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};

package/src/common/CommonProps.d.ts

@@ -7,6 +7,8 @@ export interface CommonProps {
      * A id that can be used in tests to get the component
      */
     dataTestId?: string;
+    /**
+     * Ihe id of the html element
+     */
+    id?: string;
 }
-export type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
-export type Size = "small" | "medium" | "large";

package/src/common/Density.d.ts

@@ -0,0 +1 @@
+export type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";

package/src/common/Size.d.ts

@@ -0,0 +1 @@
+export type Size = "small" | "medium" | "large";

package/src/common/index.d.ts

@@ -1,3 +1,6 @@
+export * from "./AriaProps";
 export * from "./CommonProps";
+export * from "./Density";
+export * from "./Size";
 export * from "./StorybookProps";
 export * from "./useContainerProps";

package/src/components/Card/CardBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
+import { CommonProps, Density } from "../../common";
 export interface CardBodyProps extends CommonProps {
     /**
      * Sets gap, padding and margin.

package/src/components/Card/CardFooter.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
+import { CommonProps, Density } from "../../common";
 export interface CardFooterProps extends CommonProps {
     /**
      * Sets gap, padding and margin.

package/src/components/Card/CardHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
+import { CommonProps, Density } from "../../common";
 import { HeadingVariant } from "../Heading/Heading";
 export interface CardHeaderProps extends CommonProps {
     /**

package/src/components/Icon/Icon.d.ts

@@ -1,7 +1,8 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
 import { CSSProperties } from "react";
-import { CommonProps, Size } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common";
+import { AriaProps } from "../../common/AriaProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
     ON_RENT: {
@@ -205,7 +206,11 @@ export declare const iconPalette: {
         readonly 50: "239 246 255";
         readonly 100: "219 234 254";
         readonly 200: "191 219 254";
-        readonly 300: "147 197 253";
+        readonly 300: "147 197 253"; /**
+         * Select if the icon should be rendered as solid or outline.
+         * Default value depends on the Size prop, mini == solid, medium == solid, large == outline.
+         * Trackunit icons might not support both outline and Solid.
+         */
         readonly 400: "96 165 250";
         readonly 500: "59 130 246";
         readonly 600: "37 99 235";
@@ -217,11 +222,7 @@ export declare const iconPalette: {
         readonly 50: "240 253 244";
         readonly 100: "220 252 231";
         readonly 200: "187 247 208";
-        readonly 300: "134 239 172"; /**
-         * Custom styles object used to override existing styles or add some extra styling
-         *
-         * @memberof IconProps
-         */
+        readonly 300: "134 239 172";
         readonly 400: "74 222 128";
         readonly 500: "34 197 94";
         readonly 600: "22 163 74";
@@ -272,7 +273,7 @@ type IconPropsLarge = {
     type?: "solid" | "outline";
 };
 type DiscriminatedIconProps = IconPropsFont | IconPropsSmall | IconPropsMedium | IconPropsLarge;
-export type IconProps = DiscriminatedIconProps & CommonProps & {
+export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
@@ -310,12 +311,6 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
      * @memberof IconProps
      */
     style?: CSSProperties;
-    /**
-     * The title (text) to put in the aria-labelledby.
-     * Default title is the name of the icon.
-     * If a custom title is needed, set it using this prop.
-     */
-    title?: string;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -325,5 +320,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, title, forwardedRef, }: IconProps) => JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }: IconProps) => JSX.Element;
 export {};

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,6 +1,5 @@
-import { Size } from "@trackunit/shared-utils";
 import * as React from "react";
-import { CommonProps } from "../../../common";
+import { CommonProps, Size } from "../../../common";
 type MenuItemSize = Extract<Size, "small" | "medium">;
 export interface MenuItemProps extends CommonProps {
     id?: string;

package/src/components/Spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps, Size } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common";
 type Centering = "horizontally" | "vertically" | "centered";
 export interface SpinnerProps extends CommonProps {
     /**

package/src/components/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import { ActivityColors, CriticalityColors, CustomerDataSourceColors, CustomerTypeColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
-import { CommonProps, Size } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common";
 export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | CustomerTypeColors | CustomerDataSourceColors;
 export interface TagProps extends CommonProps {

package/src/components/Text/Text.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps, Size } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common";
 export type TextType = "p" | "span" | "div";
 export type TextAlign = "left" | "center" | "right";
 export type TextWeight = "normal" | "thick" | "bold";

package/src/components/ValueBar/ValueBar.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { Size } from "@trackunit/shared-utils";
-import { CommonProps } from "../../common";
+import { CommonProps, Size } from "../../common";
 import { LevelColors } from "./ValueBarTypes";
 type ValueBarSize = Extract<Size, "small" | "large">;
 export interface ValueBarProps extends CommonProps {

package/src/components/Widget/WidgetBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CommonProps, Density } from "../../common/CommonProps";
+import { CommonProps, Density } from "../../common";
 export interface WidgetBodyProps extends CommonProps {
     /**
      * Sets gap, padding and margin.

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GeneralColors } from "@trackunit/ui-design-tokens";
-import { CommonProps, Size } from "../../../common/CommonProps";
+import { CommonProps, Size } from "../../../common";
 export type ButtonVariant = Extract<GeneralColors, "primary" | "secondary"> | "primary-danger" | "secondary-danger" | "ghost" | "ghost-neutral";
 export type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {