@trackunit/react-components 1.9.35 → 1.9.38

package/index.cjs.js

@@ -1796,36 +1796,6 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * The useStable hook ensures that a value is computed only once and remains stable across renders.
- * This is useful for expensive computations or when you need a value to never change after initial creation.
- * Perfect for generating stable random values, creating stable object references, or any one-time computation.
- *
- * @example
- * // Stable random ID that never changes
- * const stableId = useStable(() => Math.random().toString(36));
- * @example
- * // Stable configuration object
- * const config = useStable(() => ({
- *   apiKey: generateApiKey(),
- *   timestamp: Date.now()
- * }));
- * @example
- * // Stable random widths for skeleton loading
- * const lineWidths = useStable(() => ({
- *   title: Math.floor(Math.random() * 100) + 120,
- *   description: Math.floor(Math.random() * 80) + 80
- * }));
- */
-const useStable = (factory) => {
-    const ref = react.useRef(null);
-    // Compute value only once and store it
-    if (ref.current === null) {
-        ref.current = { value: factory() };
-    }
-    return ref.current.value;
-};
-
 /**
  * A custom React hook that provides real-time information about the current viewport size.
  * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
@@ -1878,35 +1848,6 @@ const useViewportBreakpoints = () => {
     return viewportSize;
 };
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Hook to watch for changes in a value and react to them.
- *
- * @param props - The hook properties
- * @param props.value - The value to watch for changes
- * @param props.onChange - Function to call when the value changes
- * @param props.immediate - Whether to run the callback immediately on mount (default: false)
- * @param props.isEqual - Custom equality function to determine if value has changed. Defaults to stringified equality.
- */
-const useWatch = ({ value, onChange, immediate = false, isEqual }) => {
-    const prevValue = react.useRef(UNINITIALIZED);
-    react.useEffect(() => {
-        const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED
-            ? false
-            : isEqual !== undefined
-                ? !isEqual(value, prev)
-                : JSON.stringify(value) !== JSON.stringify(prev);
-        if (immediate && prev === UNINITIALIZED) {
-            onChange(value, null);
-        }
-        else if (hasChanged && prev !== UNINITIALIZED) {
-            onChange(value, prev);
-        }
-        prevValue.current = value;
-    }, [value, onChange, immediate, isEqual]);
-};
-
 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
@@ -3516,6 +3457,9 @@ const cvaThumbnailContainer = cssClassVarianceUtilities.cvaMerge([
     "rounded-md",
 ]);
 
+/**
+ * Default property values for ListItemSkeleton component.
+ */
 const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
     hasThumbnail: true,
     thumbnailShape: "circle",
@@ -3529,14 +3473,14 @@ const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
  */
 const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
     // Generate stable random widths once and never change them
-    const lineWidths = useStable(() => {
+    const lineWidths = react.useMemo(() => {
         return {
             title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
             description: getResponsiveRandomWidthPercentage({ min: 45, max: 70 }),
             meta: getResponsiveRandomWidthPercentage({ min: 30, max: 55 }),
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
-    });
+    }, []);
     return (jsxRuntime.jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxRuntime.jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: "pl-2 text-sm", children: jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
@@ -5343,8 +5287,6 @@ exports.useRelayPagination = useRelayPagination;
 exports.useResize = useResize;
 exports.useScrollDetection = useScrollDetection;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
-exports.useStable = useStable;
 exports.useTimeout = useTimeout;
 exports.useViewportBreakpoints = useViewportBreakpoints;
-exports.useWatch = useWatch;
 exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -1794,36 +1794,6 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * The useStable hook ensures that a value is computed only once and remains stable across renders.
- * This is useful for expensive computations or when you need a value to never change after initial creation.
- * Perfect for generating stable random values, creating stable object references, or any one-time computation.
- *
- * @example
- * // Stable random ID that never changes
- * const stableId = useStable(() => Math.random().toString(36));
- * @example
- * // Stable configuration object
- * const config = useStable(() => ({
- *   apiKey: generateApiKey(),
- *   timestamp: Date.now()
- * }));
- * @example
- * // Stable random widths for skeleton loading
- * const lineWidths = useStable(() => ({
- *   title: Math.floor(Math.random() * 100) + 120,
- *   description: Math.floor(Math.random() * 80) + 80
- * }));
- */
-const useStable = (factory) => {
-    const ref = useRef(null);
-    // Compute value only once and store it
-    if (ref.current === null) {
-        ref.current = { value: factory() };
-    }
-    return ref.current.value;
-};
-
 /**
  * A custom React hook that provides real-time information about the current viewport size.
  * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
@@ -1876,35 +1846,6 @@ const useViewportBreakpoints = () => {
     return viewportSize;
 };
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Hook to watch for changes in a value and react to them.
- *
- * @param props - The hook properties
- * @param props.value - The value to watch for changes
- * @param props.onChange - Function to call when the value changes
- * @param props.immediate - Whether to run the callback immediately on mount (default: false)
- * @param props.isEqual - Custom equality function to determine if value has changed. Defaults to stringified equality.
- */
-const useWatch = ({ value, onChange, immediate = false, isEqual }) => {
-    const prevValue = useRef(UNINITIALIZED);
-    useEffect(() => {
-        const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED
-            ? false
-            : isEqual !== undefined
-                ? !isEqual(value, prev)
-                : JSON.stringify(value) !== JSON.stringify(prev);
-        if (immediate && prev === UNINITIALIZED) {
-            onChange(value, null);
-        }
-        else if (hasChanged && prev !== UNINITIALIZED) {
-            onChange(value, prev);
-        }
-        prevValue.current = value;
-    }, [value, onChange, immediate, isEqual]);
-};
-
 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
@@ -3514,6 +3455,9 @@ const cvaThumbnailContainer = cvaMerge([
     "rounded-md",
 ]);
 
+/**
+ * Default property values for ListItemSkeleton component.
+ */
 const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
     hasThumbnail: true,
     thumbnailShape: "circle",
@@ -3527,14 +3471,14 @@ const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
  */
 const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
     // Generate stable random widths once and never change them
-    const lineWidths = useStable(() => {
+    const lineWidths = useMemo(() => {
         return {
             title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
             description: getResponsiveRandomWidthPercentage({ min: 45, max: 70 }),
             meta: getResponsiveRandomWidthPercentage({ min: 30, max: 55 }),
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
-    });
+    }, []);
     return (jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
@@ -5214,4 +5158,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.35",
+  "version": "1.9.38",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.25",
-    "@trackunit/css-class-variance-utilities": "1.7.24",
-    "@trackunit/shared-utils": "1.9.24",
-    "@trackunit/ui-icons": "1.7.26",
-    "@trackunit/react-test-setup": "1.4.24",
+    "@trackunit/ui-design-tokens": "1.7.27",
+    "@trackunit/css-class-variance-utilities": "1.7.26",
+    "@trackunit/shared-utils": "1.9.26",
+    "@trackunit/ui-icons": "1.7.28",
+    "@trackunit/react-test-setup": "1.4.26",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/components/ListItem/ListItemSkeleton.d.ts

@@ -1,4 +1,7 @@
 import { ReactElement } from "react";
+/**
+ * Default property values for ListItemSkeleton component.
+ */
 export declare const DEFAULT_SKELETON_LIST_ITEM_PROPS: {
     readonly hasThumbnail: true;
     readonly thumbnailShape: "circle";

package/src/hooks/index.d.ts

@@ -17,8 +17,6 @@ export * from "./useRelayPagination";
 export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";
-export * from "./useStable";
 export * from "./useTimeout";
 export * from "./useViewportBreakpoints";
-export * from "./useWatch";
 export * from "./useWindowActivity";

package/src/hooks/useStable.d.ts

@@ -1,22 +0,0 @@
-/**
- * The useStable hook ensures that a value is computed only once and remains stable across renders.
- * This is useful for expensive computations or when you need a value to never change after initial creation.
- * Perfect for generating stable random values, creating stable object references, or any one-time computation.
- *
- * @example
- * // Stable random ID that never changes
- * const stableId = useStable(() => Math.random().toString(36));
- * @example
- * // Stable configuration object
- * const config = useStable(() => ({
- *   apiKey: generateApiKey(),
- *   timestamp: Date.now()
- * }));
- * @example
- * // Stable random widths for skeleton loading
- * const lineWidths = useStable(() => ({
- *   title: Math.floor(Math.random() * 100) + 120,
- *   description: Math.floor(Math.random() * 80) + 80
- * }));
- */
-export declare const useStable: <TValue>(factory: () => TValue) => TValue;

package/src/hooks/useWatch.d.ts

@@ -1,19 +0,0 @@
-interface UseWatchOptions<TValue> {
-    immediate?: boolean;
-    isEqual?: (prev: TValue, next: TValue) => boolean;
-}
-interface UseWatchProps<TValue> extends UseWatchOptions<TValue> {
-    value: TValue;
-    onChange: (value: TValue, prevValue: TValue | null) => void;
-}
-/**
- * Hook to watch for changes in a value and react to them.
- *
- * @param props - The hook properties
- * @param props.value - The value to watch for changes
- * @param props.onChange - Function to call when the value changes
- * @param props.immediate - Whether to run the callback immediately on mount (default: false)
- * @param props.isEqual - Custom equality function to determine if value has changed. Defaults to stringified equality.
- */
-export declare const useWatch: <TValue>({ value, onChange, immediate, isEqual }: UseWatchProps<TValue>) => void;
-export {};