@trackunit/react-components 0.1.146 → 0.1.148

package/index.cjs.js

@@ -181,6 +181,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     "text-sm",
     "font-medium",
     "align-middle",
+    "h-min",
 ], {
     variants: {
         color: {
@@ -18936,6 +18937,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
+const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19036,7 +19068,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsxRuntime.jsx(Tooltip, { disabled: withLabel, label: label, children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -19148,6 +19180,20 @@ const MenuList = (_a) => {
     return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx("hr", { className: cvaMenuListDivider() })] }))) }));
 };
 
+/**
+ * Sets a value in the local storage with the specified key.
+ * Thin wrapper around localStorage.setItem() that is slightly more type safe
+ * Stringifies value automatically.
+ * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
+ *
+ * @template TValue - The type of value to be stored.
+ * @param {string} key - The key under which to store the value.
+ * @param {TValue} value - The value to store in the local storage.
+ */
+const setLocalStorage = (key, value) => {
+    localStorage.setItem(key, JSON.stringify(value));
+};
+
 /**
  * Validates the state object using a Zod schema.
  *
@@ -36427,8 +36473,7 @@ const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationF
                     onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
                 },
                 onValidationSuccessful: () => {
-                    const stringifiedState = JSON.stringify(state);
-                    localStorage.setItem(key, stringifiedState);
+                    setLocalStorage(key, state);
                     onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
                 },
             });
@@ -36697,6 +36742,23 @@ const useTimeout = ({ onTimeout, duration }) => {
     return [startTimeout, stopTimeout];
 };
 
+/**
+ * Returns a callback that will be called when the visibility state of the document changes.
+ */
+const useVisibilityChange = ({ onChange, targetState }) => {
+    React.useEffect(() => {
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === targetState) {
+                onChange();
+            }
+        };
+        window.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            window.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [onChange, targetState]);
+};
+
 const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);
 
 /**
@@ -38835,37 +38897,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
-const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
     variants: {
         size: {
@@ -39062,6 +39093,7 @@ exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getValueBarColorByValue = getValueBarColorByValue;
+exports.setLocalStorage = setLocalStorage;
 exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;
 exports.useDebounce = useDebounce;
@@ -39075,3 +39107,4 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;
 exports.useTimeout = useTimeout;
+exports.useVisibilityChange = useVisibilityChange;

package/index.esm.js

@@ -154,6 +154,7 @@ const cvaButton = cvaMerge([
     "text-sm",
     "font-medium",
     "align-middle",
+    "h-min",
 ], {
     variants: {
         color: {
@@ -18909,6 +18910,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cvaMerge("inline-flex");
+const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
+cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19009,7 +19041,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsx(Tooltip, { disabled: withLabel, label: label, children: jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -19121,6 +19153,20 @@ const MenuList = (_a) => {
     return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx("hr", { className: cvaMenuListDivider() })] }))) }));
 };
 
+/**
+ * Sets a value in the local storage with the specified key.
+ * Thin wrapper around localStorage.setItem() that is slightly more type safe
+ * Stringifies value automatically.
+ * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
+ *
+ * @template TValue - The type of value to be stored.
+ * @param {string} key - The key under which to store the value.
+ * @param {TValue} value - The value to store in the local storage.
+ */
+const setLocalStorage = (key, value) => {
+    localStorage.setItem(key, JSON.stringify(value));
+};
+
 /**
  * Validates the state object using a Zod schema.
  *
@@ -36400,8 +36446,7 @@ const useLocalStorageEffect = ({ key, state, defaultState, schema, onValidationF
                     onValidationFailed === null || onValidationFailed === void 0 ? void 0 : onValidationFailed(error);
                 },
                 onValidationSuccessful: () => {
-                    const stringifiedState = JSON.stringify(state);
-                    localStorage.setItem(key, stringifiedState);
+                    setLocalStorage(key, state);
                     onValidationSuccessful === null || onValidationSuccessful === void 0 ? void 0 : onValidationSuccessful();
                 },
             });
@@ -36670,6 +36715,23 @@ const useTimeout = ({ onTimeout, duration }) => {
     return [startTimeout, stopTimeout];
 };
 
+/**
+ * Returns a callback that will be called when the visibility state of the document changes.
+ */
+const useVisibilityChange = ({ onChange, targetState }) => {
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === targetState) {
+                onChange();
+            }
+        };
+        window.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            window.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [onChange, targetState]);
+};
+
 const cvaMoreMenu = cvaMerge(["p-4"]);
 
 /**
@@ -38808,37 +38870,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cvaMerge("inline-flex");
-const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
-cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cvaMerge(["w-full"], {
     variants: {
         size: {
@@ -38973,4 +39004,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.146",
+  "version": "0.1.148",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./localStorage/setLocalStorage";
 export * from "./localStorage/useLocalStorage";
 export * from "./localStorage/useLocalStorageReducer";
 export * from "./useClickOutside";
@@ -7,3 +8,4 @@ export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useResize";
 export * from "./useTimeout";
+export * from "./useVisibilityChange";

package/src/hooks/localStorage/setLocalStorage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Sets a value in the local storage with the specified key.
+ * Thin wrapper around localStorage.setItem() that is slightly more type safe
+ * Stringifies value automatically.
+ * Useful if you for some reason can't use the useLocalStorage hook for React lifecycle reasons
+ *
+ * @template TValue - The type of value to be stored.
+ * @param {string} key - The key under which to store the value.
+ * @param {TValue} value - The value to store in the local storage.
+ */
+export declare const setLocalStorage: <TValue>(key: string, value: TValue) => void;

package/src/hooks/useVisibilityChange.d.ts

@@ -0,0 +1,10 @@
+type VisibilityState = "hidden" | "visible";
+interface VisibilityChangeOptions {
+    onChange: () => void;
+    targetState: VisibilityState;
+}
+/**
+ * Returns a callback that will be called when the visibility state of the document changes.
+ */
+export declare const useVisibilityChange: ({ onChange, targetState }: VisibilityChangeOptions) => void;
+export default useVisibilityChange;