@trackunit/react-components 1.0.4 → 1.0.7

package/index.cjs.js

@@ -1135,6 +1135,18 @@ function getDevicePixelRatio(options) {
     return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
 }
 
+/**
+ * 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 useElevatedState = (initialState, customState) => {
+    const fallbackState = React.useState(initialState);
+    return customState !== null && customState !== void 0 ? customState : fallbackState;
+};
+
 /**
  * Custom hook to get the geometry of an element.
  * Size and position of the element relative to the viewport.
@@ -1151,9 +1163,8 @@ const useGeometry = (ref) => {
         y: 0,
     });
     const resizeObserver = React.useRef(null);
-    const refCurrent = ref.current;
     React.useEffect(() => {
-        if (!refCurrent) {
+        if (!ref.current) {
             return;
         }
         if (!resizeObserver.current) {
@@ -1173,13 +1184,14 @@ const useGeometry = (ref) => {
                 }
             });
         }
-        resizeObserver.current.observe(refCurrent);
+        resizeObserver.current.observe(ref.current);
         return () => {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [refCurrent]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref.current]);
     return geometry;
 };
 
@@ -1251,18 +1263,6 @@ 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.
  *
@@ -1660,8 +1660,8 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, id: id, children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -4965,12 +4965,12 @@ exports.useContainerBreakpoints = useContainerBreakpoints;
 exports.useContinuousTimeout = useContinuousTimeout;
 exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
+exports.useElevatedState = useElevatedState;
 exports.useGeometry = useGeometry;
 exports.useHover = useHover;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useIsFullscreen = useIsFullscreen;
 exports.useIsTextCutOff = useIsTextCutOff;
-exports.useOptionallyElevatedState = useOptionallyElevatedState;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;

package/index.esm.js

@@ -1115,6 +1115,18 @@ function getDevicePixelRatio(options) {
     return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
 }
 
+/**
+ * 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 useElevatedState = (initialState, customState) => {
+    const fallbackState = useState(initialState);
+    return customState !== null && customState !== void 0 ? customState : fallbackState;
+};
+
 /**
  * Custom hook to get the geometry of an element.
  * Size and position of the element relative to the viewport.
@@ -1131,9 +1143,8 @@ const useGeometry = (ref) => {
         y: 0,
     });
     const resizeObserver = useRef(null);
-    const refCurrent = ref.current;
     useEffect(() => {
-        if (!refCurrent) {
+        if (!ref.current) {
             return;
         }
         if (!resizeObserver.current) {
@@ -1153,13 +1164,14 @@ const useGeometry = (ref) => {
                 }
             });
         }
-        resizeObserver.current.observe(refCurrent);
+        resizeObserver.current.observe(ref.current);
         return () => {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
         };
-    }, [refCurrent]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref.current]);
     return geometry;
 };
 
@@ -1231,18 +1243,6 @@ 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.
  *
@@ -1640,8 +1640,8 @@ const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeav
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-const CardBody = ({ density = "auto", children, dataTestId, className, disableGap, id }) => {
-    return (jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className }), "data-testid": dataTestId, id: id, children: children }));
+const CardBody = ({ density = "auto", children, dataTestId, className, direction, disableGap, id, }) => {
+    return (jsx("div", { className: cvaCardBodyDensityContainer({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -4862,4 +4862,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, 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, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, 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, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

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

package/src/components/Card/CardBody.d.ts

@@ -5,6 +5,10 @@ export interface CardBodyProps extends CommonProps {
      * Sets gap, padding and margin.
      */
     density?: Density;
+    /**
+     * Sets flex direction
+     */
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
     /**
      * Set gap to be 0px (not preferable)
      */
@@ -26,4 +30,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, children, dataTestId, className, disableGap, id }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardBody: ({ density, children, dataTestId, className, direction, disableGap, id, }: CardBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/hooks/index.d.ts

@@ -3,12 +3,12 @@ export * from "./useContainerBreakpoints";
 export * from "./useContinuousTimeout";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
+export * from "./useElevatedState";
 export * from "./useGeometry";
 export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextCutOff";
-export * from "./useOptionallyElevatedState";
 export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";

package/src/hooks/{useOptionallyElevatedState.d.ts → useElevatedState.d.ts}

@@ -6,4 +6,4 @@ import { Dispatch, SetStateAction } from "react";
  *
  * If no custom state is provided, the fallback state will be used and it works like a normal useState hook.
  */
-export declare const useOptionallyElevatedState: <TState>(initialState: TState, customState?: [TState, Dispatch<SetStateAction<TState>>]) => [TState, Dispatch<SetStateAction<TState>>];
+export declare const useElevatedState: <TState>(initialState: TState, customState?: [TState, Dispatch<SetStateAction<TState>>]) => [TState, Dispatch<SetStateAction<TState>>];