@trackunit/react-components 0.1.187 → 0.1.189

package/index.cjs.js

@@ -39231,6 +39231,18 @@ const useIsTextCutOff = (element) => {
     return isTextCutOff;
 };
 
+/**
+ * Use this hook if you want to optionally elevate the state of a component.
+ * Useful when you want to optionally be able to control the state of a component
+ * from a parent componentbut keep the simplicity of not having to.
+ *
+ * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
+ */
+const useOptionallyElevatedState = (initialState, customState) => {
+    const fallbackState = React.useState(initialState);
+    return customState !== null && customState !== void 0 ? customState : fallbackState;
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -39270,7 +39282,7 @@ const getWindowSize = () => {
 /**
  * Returns a callback that will be called when the visibility state of the document changes.
  */
-const useVisibilityChange = ({ onChange, targetState }) => {
+const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     React.useEffect(() => {
         const handleVisibilityChange = () => {
             if (document.visibilityState === targetState) {
@@ -39362,6 +39374,7 @@ exports.useIsTextCutOff = useIsTextCutOff;
 exports.useLocalStorage = useLocalStorage;
 exports.useLocalStorageReducer = useLocalStorageReducer;
 exports.useModal = useModal;
+exports.useOptionallyElevatedState = useOptionallyElevatedState;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;

package/index.esm.js

@@ -39202,6 +39202,18 @@ const useIsTextCutOff = (element) => {
     return isTextCutOff;
 };
 
+/**
+ * Use this hook if you want to optionally elevate the state of a component.
+ * Useful when you want to optionally be able to control the state of a component
+ * from a parent componentbut keep the simplicity of not having to.
+ *
+ * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
+ */
+const useOptionallyElevatedState = (initialState, customState) => {
+    const fallbackState = useState(initialState);
+    return customState !== null && customState !== void 0 ? customState : fallbackState;
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -39241,7 +39253,7 @@ const getWindowSize = () => {
 /**
  * Returns a callback that will be called when the visibility state of the document changes.
  */
-const useVisibilityChange = ({ onChange, targetState }) => {
+const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     useEffect(() => {
         const handleVisibilityChange = () => {
             if (document.visibilityState === targetState) {
@@ -39255,4 +39267,4 @@ const useVisibilityChange = ({ onChange, targetState }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.187",
+  "version": "0.1.189",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,7 @@
     "@floating-ui/react": "0.25.4",
     "@trackunit/css-class-variance-utilities": "0.0.15",
     "@trackunit/css-core": "0.0.99",
-    "@trackunit/shared-utils": "0.0.14",
+    "@trackunit/shared-utils": "0.0.15",
     "@trackunit/ui-design-tokens": "0.0.79",
     "@trackunit/ui-icons": "0.0.78",
     "date-fns": "2.29.3",

package/src/hooks/index.d.ts

@@ -9,6 +9,7 @@ export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextCutOff";
+export * from "./useOptionallyElevatedState";
 export * from "./useResize";
 export * from "./useTimeout";
 export * from "./useVisibilityChange";

package/src/hooks/useOptionallyElevatedState.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react";
+/**
+ * Use this hook if you want to optionally elevate the state of a component.
+ * Useful when you want to optionally be able to control the state of a component
+ * from a parent componentbut keep the simplicity of not having to.
+ *
+ * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
+ */
+export declare const useOptionallyElevatedState: <T>(initialState: T, customState?: [T, Dispatch<SetStateAction<T>>] | undefined) => [T, Dispatch<SetStateAction<T>>];