@trackunit/react-components 0.4.8 → 0.4.10

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);
@@ -4709,7 +4725,7 @@ function defaultHeader(date, showTime) {
 }
 
 const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
         selected: {
             true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
@@ -4742,7 +4758,10 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
                 onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
-const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
     return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 
@@ -5030,6 +5049,7 @@ exports.Text = Text;
 exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
 exports.ToggleGroup = ToggleGroup;
+exports.ToggleItem = ToggleItem;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;
@@ -5071,6 +5091,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 }) }) }));
 };
 
@@ -4689,7 +4705,7 @@ function defaultHeader(date, showTime) {
 }
 
 const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
+const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
     variants: {
         selected: {
             true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
@@ -4722,7 +4738,10 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
                 onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
-const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
     return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 
@@ -4957,4 +4976,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, ToggleItem, 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.10",
   "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/components/ToggleGroup/ToggleGroup.d.ts

@@ -65,8 +65,12 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
 export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps<TSelectedId>) => import("react/jsx-runtime").JSX.Element;
 export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
     onClick: () => void;
-    disabled: boolean;
-    isIconOnly: boolean;
-    size: "small" | "medium";
-    selected: boolean;
+    disabled?: boolean;
+    isIconOnly?: boolean;
+    size?: "small" | "medium";
+    selected?: boolean;
 }
+/**
+ * Individual TooggleItem to create custom ToggleGroups
+ */
+export declare const ToggleItem: ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }: ToggleItemProps) => import("react/jsx-runtime").JSX.Element;

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;