@trackunit/react-components 0.1.413 → 0.2.0

package/index.cjs.js

@@ -1292,6 +1292,81 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
+/**
+ * Maps viewport size keys to their corresponding state property names.
+ */
+const propsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for viewport sizes, with all values set to false.
+ */
+const defaultState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+const useViewportSize = () => {
+    const [viewportSize, setViewportSize] = React.useState(() => defaultState);
+    const updateViewportSize = React.useCallback(() => {
+        const newViewportSize = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
+            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+            return {
+                ...acc,
+                [propsMap[size]]: matches,
+            };
+        }, Object.assign({}, defaultState));
+        setViewportSize(newViewportSize);
+    }, []);
+    React.useEffect(() => {
+        // Initial check
+        updateViewportSize();
+        // Set up listeners for each breakpoint
+        const mediaQueryLists = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
+        mediaQueryLists.forEach(mql => {
+            mql.addEventListener("change", updateViewportSize);
+        });
+        // Cleanup
+        return () => {
+            mediaQueryLists.forEach(mql => {
+                mql.removeEventListener("change", updateViewportSize);
+            });
+        };
+    }, [updateViewportSize]);
+    return viewportSize;
+};
+
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
@@ -3673,7 +3748,7 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3696,11 +3771,11 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-[8%]",
-            "left-end": "bottom-[8%]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-[8%]",
-            "right-end": "bottom-[8%]",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3757,10 +3832,13 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: react.autoUpdate,
     });
     const { isMounted } = react.useTransitionStatus(context);
+    // Please don't try to move this into the component body directly
+    // I tried and it caused infinite re-renders some places (for whatever reason)
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     if (disabled) {
-        return children;
+        return wrappedChildren;
     }
-    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsxRuntime.jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxRuntime.jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsxRuntime.jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsxRuntime.jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsxRuntime.jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsxRuntime.jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -4987,4 +5065,5 @@ exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
+exports.useViewportSize = useViewportSize;
 exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useEffect, useState, useReducer, useCallback, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
-import { objectKeys, objectValues } from '@trackunit/shared-utils';
-import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
+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 IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
@@ -1272,6 +1272,81 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
+/**
+ * Maps viewport size keys to their corresponding state property names.
+ */
+const propsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for viewport sizes, with all values set to false.
+ */
+const defaultState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+const useViewportSize = () => {
+    const [viewportSize, setViewportSize] = useState(() => defaultState);
+    const updateViewportSize = useCallback(() => {
+        const newViewportSize = objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
+            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+            return {
+                ...acc,
+                [propsMap[size]]: matches,
+            };
+        }, Object.assign({}, defaultState));
+        setViewportSize(newViewportSize);
+    }, []);
+    useEffect(() => {
+        // Initial check
+        updateViewportSize();
+        // Set up listeners for each breakpoint
+        const mediaQueryLists = objectEntries(themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
+        mediaQueryLists.forEach(mql => {
+            mql.addEventListener("change", updateViewportSize);
+        });
+        // Cleanup
+        return () => {
+            mediaQueryLists.forEach(mql => {
+                mql.removeEventListener("change", updateViewportSize);
+            });
+        };
+    }, [updateViewportSize]);
+    return viewportSize;
+};
+
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
@@ -3653,7 +3728,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipContainer = cvaMerge(["inline-flex"]);
+const cvaTooltipFlexContainer = cvaMerge(["inline-flex"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -3676,11 +3751,11 @@ const cvaTooltipPopoverTail = cvaMerge("", {
             "bottom-start": "bottom-full left-[5%]",
             "bottom-end": "bottom-full right-[5%]",
             left: "left-full top-2/4 mt-[-6px]",
-            "left-start": "top-[8%]",
-            "left-end": "bottom-[8%]",
+            "left-start": "top-1/4 top-[8%]",
+            "left-end": "bottom-1/4 bottom-[8%]",
             right: "right-full top-2/4 mt-[-6px] ",
-            "right-start": "top-[8%]",
-            "right-end": "bottom-[8%]",
+            "right-start": "top-1/4 top-[8%]",
+            "right-end": "bottom-1/4 bottom-[8%]",
         },
         mode: {
             light: "fill-white",
@@ -3737,10 +3812,13 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
         whileElementsMounted: autoUpdate,
     });
     const { isMounted } = useTransitionStatus(context);
+    // Please don't try to move this into the component body directly
+    // I tried and it caused infinite re-renders some places (for whatever reason)
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children }));
     if (disabled) {
-        return children;
+        return wrappedChildren;
     }
-    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (jsx("span", { className: cvaTooltipContainer(), "data-testid": dataTestId ? `${dataTestId}-parent` : undefined, children: children })) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
+    return (jsxs(Popover, { activation: { hover: true }, className: cvaTooltipPopover(), dataTestId: dataTestId, id: id, placement: placement === "auto" ? "bottom" : placement, children: [jsx(PopoverTrigger, { className: cvaTooltipIcon({ color: mode, className }), "data-testid": dataTestId ? `${dataTestId}-trigger` : null, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), ref: refs.setReference, children: children === undefined ? (jsx("div", { children: jsx(Icon, { dataTestId: dataTestId ? `${dataTestId}-icon` : undefined, name: "QuestionMarkCircle", size: "small", ...iconProps }) })) : (wrappedChildren) }), isMounted ? (jsx("div", { ref: refs.setFloating, style: floatingStyles, children: jsx(PopoverContent, { children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipPopoverContent({ color: mode }), "data-testid": `${dataTestId}-content`, children: [jsx(Text, { inverted: mode === "dark", type: typeof label === "string" ? "p" : "span", children: label }), placement !== "auto" && jsx(FloatingArrowContainer, { arrowRef: arrowRef, mode: mode })] }) }) })) : null] }));
 };
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
@@ -4869,4 +4947,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

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

package/src/components/Tooltip/Tooltip.d.ts

@@ -42,4 +42,4 @@ export interface TooltipProps extends CommonProps {
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => React.ReactNode;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, iconProps, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaTooltipIcon: (props?: ({
     color?: "light" | "dark" | null | undefined;
     defaultVariants?: "color" | null | undefined;

package/src/hooks/index.d.ts

@@ -14,4 +14,5 @@ export * from "./useOptionallyElevatedState";
 export * from "./useResize";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
+export * from "./useViewportSize";
 export * from "./useWindowActivity";

package/src/hooks/useViewportSize.d.ts

@@ -0,0 +1,32 @@
+import { themeScreenSizeAsNumber } from "@trackunit/ui-design-tokens";
+type ViewportSize = keyof typeof themeScreenSizeAsNumber;
+/**
+ * Represents the state of viewport sizes as boolean values.
+ * Each property is true if the viewport width is greater than or equal to the corresponding breakpoint.
+ */
+type ViewportSizeState = {
+    [K in ViewportSize as `is${Capitalize<K>}`]: boolean;
+};
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active. It's useful for creating responsive
+ * layouts and components that need to adapt to different screen sizes.
+ *
+ * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * function MyComponent() {
+ *   const viewportSize = useViewportSize();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   } else if (viewportSize.isMd) {
+ *     return <MediumScreenLayout />;
+ *   } else {
+ *     return <SmallScreenLayout />;
+ *   }
+ * }
+ */
+export declare const useViewportSize: () => ViewportSizeState;
+export {};