@trackunit/react-components 0.1.147 → 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: {
@@ -19179,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.
  *
@@ -36458,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();
                 },
             });
@@ -36728,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"]);
 
 /**
@@ -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: {
@@ -19152,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.
  *
@@ -36431,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();
                 },
             });
@@ -36701,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"]);
 
 /**
@@ -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.147",
+  "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;