@trackunit/react-components 0.3.6 → 0.3.8

package/index.cjs.js

@@ -5,6 +5,7 @@ var React = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
+var IconSpriteMicro = require('@trackunit/ui-icons/icons-sprite-micro.svg');
 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');
@@ -104,9 +105,17 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             small: "w-4",
             medium: "w-5",
             large: "w-6",
-            font: "w-[1em]",
+        },
+        fontSize: {
+            true: "w-[1em]",
+            false: "",
         },
     },
+    compoundVariants: [
+        { fontSize: true, size: "small", className: "w-[1em]" },
+        { fontSize: true, size: "medium", className: "w-[1em]" },
+        { fontSize: true, size: "large", className: "w-[1em]" },
+    ],
     defaultVariants: {
         color: "default",
         size: "large",
@@ -157,11 +166,14 @@ const isSafari = () => {
  * @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, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = React.useRef(null);
     const ICON_CONTAINER_ID = uuid.v4();
     const correctIconType = React.useMemo(() => {
-        if (size === "small" || size === "medium") {
+        if (size === "small") {
+            return "micro";
+        }
+        if (size === "medium") {
             return "mini";
         }
         if (type === "solid") {
@@ -169,18 +181,31 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
         }
         return "outline";
     }, [type, size]);
+    const correctViewBox = React.useMemo(() => {
+        if (size === "small") {
+            return "0 0 16 16";
+        }
+        if (size === "medium") {
+            return "0 0 20 20";
+        }
+        if (type === "solid") {
+            return "0 0 24 24";
+        }
+        return "0 0 24 24";
+    }, [type, size]);
     const iconName = uiIcons.iconNames[name];
     const href = React.useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
         outline: `${IconSpriteOutline}#${iconName}`,
         mini: `${IconSpriteMini}#${iconName}`,
+        micro: `${IconSpriteMicro}#${iconName}`,
     }), [iconName]);
     React.useEffect(() => {
         if (isSafari() && useTagRef.current) {
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    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 }) }) }));
+    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, 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: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -4709,13 +4734,13 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
 /**
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
  *
- * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
- * @returns {JSX.Element}  ToggleGroup component
+ * @param {ToggleGroupProps} props - The props for the ToggleGroup component
+ * @returns {JSX.Element} ToggleGroup component
  */
-const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsxRuntime.jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
-                onClick && onClick();
                 setSelected(item.id);
+                onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {

package/index.esm.js

@@ -4,6 +4,7 @@ import React__default, { useRef, useMemo, useEffect, useState, useReducer, useCa
 import { objectKeys, objectEntries, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
+import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 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';
@@ -84,9 +85,17 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             small: "w-4",
             medium: "w-5",
             large: "w-6",
-            font: "w-[1em]",
+        },
+        fontSize: {
+            true: "w-[1em]",
+            false: "",
         },
     },
+    compoundVariants: [
+        { fontSize: true, size: "small", className: "w-[1em]" },
+        { fontSize: true, size: "medium", className: "w-[1em]" },
+        { fontSize: true, size: "large", className: "w-[1em]" },
+    ],
     defaultVariants: {
         color: "default",
         size: "large",
@@ -137,11 +146,14 @@ const isSafari = () => {
  * @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, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = v4();
     const correctIconType = useMemo(() => {
-        if (size === "small" || size === "medium") {
+        if (size === "small") {
+            return "micro";
+        }
+        if (size === "medium") {
             return "mini";
         }
         if (type === "solid") {
@@ -149,18 +161,31 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
         }
         return "outline";
     }, [type, size]);
+    const correctViewBox = useMemo(() => {
+        if (size === "small") {
+            return "0 0 16 16";
+        }
+        if (size === "medium") {
+            return "0 0 20 20";
+        }
+        if (type === "solid") {
+            return "0 0 24 24";
+        }
+        return "0 0 24 24";
+    }, [type, size]);
     const iconName = iconNames[name];
     const href = useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
         outline: `${IconSpriteOutline}#${iconName}`,
         mini: `${IconSpriteMini}#${iconName}`,
+        micro: `${IconSpriteMicro}#${iconName}`,
     }), [iconName]);
     useEffect(() => {
         if (isSafari() && useTagRef.current) {
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    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 }) }) }));
+    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, 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: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -4689,13 +4714,13 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
 /**
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
  *
- * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
- * @returns {JSX.Element}  ToggleGroup component
+ * @param {ToggleGroupProps} props - The props for the ToggleGroup component
+ * @returns {JSX.Element} ToggleGroup component
  */
-const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
+const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
     return (jsx("div", { className: cvaToggleGroup(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
-                onClick && onClick();
                 setSelected(item.id);
+                onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {

package/package.json

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

package/src/common/AllOrNone.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Type that ensures that if one property is passed, ALL are required.
+ *
+ * @example
+ * AllOrNone<{
+    selected?: TSelectedId | null;
+    setSelected?: React.Dispatch<React.SetStateAction<TSelectedId | null>>;
+  }>
+ */
+export type AllOrNone<TProps> = (TProps & Required<TProps>) | {
+    [Key in keyof TProps]?: never;
+};

package/src/common/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AllOrNone";
 export * from "./AriaProps";
 export * from "./CommonProps";
 export * from "./Density";

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

@@ -252,10 +252,6 @@ export declare const iconPalette: {
     };
 };
 export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
-type IconPropsFont = {
-    size?: "font";
-    type?: "solid" | "outline";
-};
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";
@@ -268,7 +264,7 @@ type IconPropsLarge = {
     size?: "large";
     type?: "solid" | "outline";
 };
-type DiscriminatedIconProps = IconPropsFont | IconPropsSmall | IconPropsMedium | IconPropsLarge;
+type DiscriminatedIconProps = IconPropsSmall | IconPropsMedium | IconPropsLarge;
 export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
     /**
      * The name of the icon to be rendered.
@@ -287,7 +283,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      */
-    size?: Size | "font";
+    size?: Size;
     /**
      * Select if the icon should be rendered as solid or outline.
      * Default value depends on the Size prop, mini == solid, medium == solid, large == outline.
@@ -307,6 +303,12 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * @memberof IconProps
      */
     style?: CSSProperties;
+    /**
+     * If true, the icon will be rendered with the font size of the parent element.
+     *
+     * @default false
+     */
+    fontSize?: boolean;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -316,5 +318,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * @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, forwardedRef, ariaLabel, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 export declare const cvaIcon: (props?: ({
     color?: "default" | "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
-    size?: "small" | "medium" | "large" | "font" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    fontSize?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconComponent: (props?: ({
     iconType?: "solid" | "outline" | null | undefined;

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,13 +1,14 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
-export interface BasicToggleGroupListProps {
+export interface BasicToggleGroupListProps<TSelectedId extends string = string> {
     /**
      * Used to identify an individual button to be able to highlight the selected one.
      */
-    id: string;
+    id: TSelectedId;
     /**
      * Tooltip's fallback and button's text content.
      */
@@ -18,8 +19,8 @@ export interface BasicToggleGroupListProps {
     iconName?: IconName;
     /**
      * Due to size of the text, one might need to truncate a button's content or another.
-     * This behaviour is individual for each button.
-     * For a button that utilises this feature, the full text can be read on hover.
+     * This behavior is individual for each button.
+     * For a button that use this feature, the full text can be read on hover.
      * Truncation should be avoided if possible.
      */
     text?: {
@@ -37,14 +38,12 @@ export interface BasicToggleGroupListProps {
     };
     dataTestId?: string;
 }
-export interface ToggleGroupProps extends CommonProps, Omit<VariantProps<typeof cvaToggleGroup>, "className"> {
-    list: BasicToggleGroupListProps[];
-    selected: string;
-    setSelected: React.Dispatch<React.SetStateAction<string>>;
+export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Omit<VariantProps<typeof cvaToggleGroup>, "className"> & {
+    list: readonly BasicToggleGroupListProps<TSelectedId>[];
     /**
-     * For when the click event needs to do more than select an id
+     * Instead of onClick, we now use onChange to return the selected value
      */
-    onClick?: () => void;
+    onChange?: (selectedId: TSelectedId) => void;
     disabled?: boolean;
     /**
      * ToggleGroup buttons can be one of two sizes
@@ -54,15 +53,17 @@ export interface ToggleGroupProps extends CommonProps, Omit<VariantProps<typeof
      * Enable to use toggle buttons with icons only and a tooltip on hover
      */
     isIconOnly?: boolean;
-}
+    selected: TSelectedId;
+    setSelected: React.Dispatch<React.SetStateAction<TSelectedId>>;
+};
 /**
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
  *
- * @param {ToggleGroupProps} props - The props for the  ToggleGroup component
- * @returns {JSX.Element}  ToggleGroup component
+ * @param {ToggleGroupProps} props - The props for the ToggleGroup component
+ * @returns {JSX.Element} ToggleGroup component
  */
-export declare const ToggleGroup: ({ list, selected, setSelected, onClick, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
-export interface ToggleItemProps extends CommonProps, Omit<BasicToggleGroupListProps, "id"> {
+export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps<TSelectedId>) => import("react/jsx-runtime").JSX.Element;
+export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
     onClick: () => void;
     disabled: boolean;
     isIconOnly: boolean;