@trackunit/react-components 0.4.8 → 0.4.9

package/index.cjs.js

@@ -14,8 +14,8 @@ var uuid = require('uuid');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
 var isEqual = require('lodash/isEqual');
-var reactUse = require('react-use');
 var reactRouter = require('@tanstack/react-router');
+var usehooksTs = require('usehooks-ts');
 var reactSwipeable = require('react-swipeable');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
@@ -865,6 +865,21 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
     return validateState({ state: localStorageItemJSON, defaultState, schema });
 };
 
+/**
+ * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
+ *
+ * @example
+ * const [color, setColor] = React.useState(getRandomColor());
+  const previousColor = usePrevious(color);
+ */
+const usePrevious = (value) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
 /**
  * Custom hook for synchronizing a state variable with local storage,
  * with optional schema validation and callbacks.
@@ -873,7 +888,7 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
  * @param {LocalStorageParams<TState> & LocalStorageCallbacks & { state: TState }} params - The parameters for the useLocalStorageEffect hook.
  */
 const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }) => {
-    const prevState = reactUse.usePrevious(state);
+    const prevState = usePrevious(state);
     React.useEffect(() => {
         if (isEqual(prevState, state)) {
             return;
@@ -1788,7 +1803,8 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
     return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
-    const [ref, { height }] = reactUse.useMeasure();
+    const ref = React.useRef(null);
+    const { height } = useGeometry(ref);
     return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
@@ -1853,7 +1869,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     var _a;
     const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
     const [animating, setAnimating] = React.useState(false);
-    const [, copyToClipboard] = reactUse.useCopyToClipboard();
+    const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const handleOnClick = () => {
         copyToClipboard(value);
         setAnimating(true);
@@ -5071,6 +5087,7 @@ exports.useLocalStorageReducer = useLocalStorageReducer;
 exports.useOptionallyElevatedState = useOptionallyElevatedState;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
+exports.usePrevious = usePrevious;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;

package/index.esm.js

@@ -13,8 +13,8 @@ import { v4 } from 'uuid';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
-import { usePrevious, useMeasure, useCopyToClipboard } from 'react-use';
 import { Link, useBlocker } from '@tanstack/react-router';
+import { useCopyToClipboard } from 'usehooks-ts';
 import { useSwipeable } from 'react-swipeable';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
@@ -845,6 +845,21 @@ const initLocalStorageState = ({ key, defaultState, schema, }) => {
     return validateState({ state: localStorageItemJSON, defaultState, schema });
 };
 
+/**
+ * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
+ *
+ * @example
+ * const [color, setColor] = React.useState(getRandomColor());
+  const previousColor = usePrevious(color);
+ */
+const usePrevious = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
 /**
  * Custom hook for synchronizing a state variable with local storage,
  * with optional schema validation and callbacks.
@@ -1768,7 +1783,8 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
     return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
-    const [ref, { height }] = useMeasure();
+    const ref = useRef(null);
+    const { height } = useGeometry(ref);
     return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
@@ -4957,4 +4973,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, useViewportSize, 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, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,7 +11,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "react": "18.3.1",
     "@trackunit/css-class-variance-utilities": "*",
-    "react-use": "^17.4.0",
+    "usehooks-ts": "^3.1.0",
     "date-fns": "^2.30.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",

package/src/hooks/index.d.ts

@@ -11,6 +11,7 @@ export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextCutOff";
 export * from "./useOptionallyElevatedState";
+export * from "./usePrevious";
 export * from "./useResize";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";

package/src/hooks/usePrevious.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
+ *
+ * @example
+ * const [color, setColor] = React.useState(getRandomColor());
+  const previousColor = usePrevious(color);
+ */
+export declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;