@trackunit/react-components 0.1.414 → 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
@@ -4990,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
@@ -4872,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.414",
+  "version": "0.2.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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 {};