@trackunit/react-components 2.13.24 → 2.13.26

package/index.cjs.js

@@ -14349,6 +14349,37 @@ const useElevatedState = (initialState, customState) => {
     return react.useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
+/**
+ * The useHold hook freezes a value at its last non-exiting state while `isExiting` is true, so
+ * that content (e.g. inside a closing drawer) can keep rendering its last known value while an
+ * exit animation plays, instead of flashing to a new/empty value mid-animation.
+ *
+ * It is a pure value-holding primitive: it has no knowledge of animation duration and does not
+ * debounce or delay anything. As soon as `isExiting` flips back to `false`, the live `value` is
+ * returned immediately.
+ *
+ * @example
+ * const heldValue = useHold(value, isExiting);
+ */
+const useHold = (value, isExiting) => {
+    const ref = react.useRef(value);
+    react.useEffect(() => {
+        if (!isExiting) {
+            ref.current = value;
+        }
+    }, [value, isExiting]);
+    // Wrapped in a getter (rather than reading `ref.current` directly during render) to satisfy
+    // the `react-hooks/refs` lint rule, which forbids accessing ref values during render. The memo
+    // must depend on `[isExiting, value]` (unlike usePrevious's stable `[]`-deps wrapper) because
+    // the getter itself branches on the current render's `isExiting`/`value`, not just on `ref`.
+    const wrapper = react.useMemo(() => ({
+        get current() {
+            return isExiting ? ref.current : value;
+        },
+    }), [isExiting, value]);
+    return wrapper.current;
+};
+
 /**
  * Custom hook for checking if the browser is in fullscreen mode.
  */
@@ -15259,6 +15290,7 @@ exports.useElevatedReducer = useElevatedReducer;
 exports.useElevatedState = useElevatedState;
 exports.useGridAreas = useGridAreas;
 exports.useHashParamSync = useHashParamSync;
+exports.useHold = useHold;
 exports.useHover = useHover;
 exports.useInfiniteScroll = useInfiniteScroll;
 exports.useIsFirstRender = useIsFirstRender;

package/index.esm.js

@@ -14348,6 +14348,37 @@ const useElevatedState = (initialState, customState) => {
     return useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
+/**
+ * The useHold hook freezes a value at its last non-exiting state while `isExiting` is true, so
+ * that content (e.g. inside a closing drawer) can keep rendering its last known value while an
+ * exit animation plays, instead of flashing to a new/empty value mid-animation.
+ *
+ * It is a pure value-holding primitive: it has no knowledge of animation duration and does not
+ * debounce or delay anything. As soon as `isExiting` flips back to `false`, the live `value` is
+ * returned immediately.
+ *
+ * @example
+ * const heldValue = useHold(value, isExiting);
+ */
+const useHold = (value, isExiting) => {
+    const ref = useRef(value);
+    useEffect(() => {
+        if (!isExiting) {
+            ref.current = value;
+        }
+    }, [value, isExiting]);
+    // Wrapped in a getter (rather than reading `ref.current` directly during render) to satisfy
+    // the `react-hooks/refs` lint rule, which forbids accessing ref values during render. The memo
+    // must depend on `[isExiting, value]` (unlike usePrevious's stable `[]`-deps wrapper) because
+    // the getter itself branches on the current render's `isExiting`/`value`, not just on `ref`.
+    const wrapper = useMemo(() => ({
+        get current() {
+            return isExiting ? ref.current : value;
+        },
+    }), [isExiting, value]);
+    return wrapper.current;
+};
+
 /**
  * Custom hook for checking if the browser is in fullscreen mode.
  */
@@ -15104,4 +15135,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.13.24",
+  "version": "2.13.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -23,7 +23,7 @@
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.63"
+    "@trackunit/i18n-library-translation": "2.4.64"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/buttons/shared/Button.variants.d.ts

@@ -145,7 +145,7 @@ export declare const cvaButton: import("cva").CVAComponent<Omit<{
             false: never[];
         };
     };
-    defaultVariants: Omit<{}, "size" | "disabled" | "square" | "variant" | "fullWidth"> & {
+    defaultVariants: Omit<{}, "size" | "square" | "disabled" | "variant" | "fullWidth"> & {
         variant: "primary";
         size: "medium";
         fullWidth: false;

package/src/hooks/useHold.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The useHold hook freezes a value at its last non-exiting state while `isExiting` is true, so
+ * that content (e.g. inside a closing drawer) can keep rendering its last known value while an
+ * exit animation plays, instead of flashing to a new/empty value mid-animation.
+ *
+ * It is a pure value-holding primitive: it has no knowledge of animation duration and does not
+ * debounce or delay anything. As soon as `isExiting` flips back to `false`, the live `value` is
+ * returned immediately.
+ *
+ * @example
+ * const heldValue = useHold(value, isExiting);
+ */
+export declare const useHold: <TValue>(value: TValue, isExiting: boolean) => TValue;

package/src/index.d.ts

@@ -138,6 +138,7 @@ export * from "./hooks/useDebounce";
 export * from "./hooks/useDevicePixelRatio";
 export * from "./hooks/useElevatedReducer";
 export * from "./hooks/useElevatedState";
+export * from "./hooks/useHold";
 export * from "./hooks/useHover";
 export * from "./hooks/useInfiniteScroll";
 export * from "./hooks/useIsFirstRender";