@trackunit/react-components 0.1.111 → 0.1.113

package/index.cjs

@@ -1228,6 +1228,9 @@ const useClickOutside = (el, options = {}, onClick) => {
  * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
  * @returns {any} The latest value received
  */
+/**
+ *
+ */
 const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
     React.useEffect(() => {
@@ -1301,6 +1304,26 @@ function getDevicePixelRatio(options) {
     return rounded;
 }
 
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {ConditionalUseHoverProps} param0 The options
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
+    const [hovering, setHovering] = React.useState(false);
+    const debouncedHovering = useDebounce(hovering, delay, direction);
+    const onMouseEnter = () => {
+        setHovering(true);
+    };
+    const onMouseLeave = () => {
+        setHovering(false);
+    };
+    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
+};
+
 /**
  * Differentiate between the first and subsequent renders.
  *
@@ -1679,7 +1702,7 @@ const TipContainer = tailwindStyledComponents.tw.text `
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
-    return (jsxRuntime.jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxRuntime.jsxs(HeadingContainer, { children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeftIcon" }) })), jsxRuntime.jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && (jsxRuntime.jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsxRuntime.jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsxRuntime.jsx(ChildContainer$1, { children: children })] })));
+    return (jsxRuntime.jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxRuntime.jsxs(HeadingContainer, { children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeftIcon" }) })), jsxRuntime.jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && !showLoading && (jsxRuntime.jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && !showLoading && jsxRuntime.jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsxRuntime.jsx(ChildContainer$1, { children: children })] })));
 };
 function isValidHttpUrl(link) {
     if (!link) {
@@ -2396,6 +2419,7 @@ exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;
 exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
+exports.useHover = useHover;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useLocalStorage = useLocalStorage;
 exports.useLocalStorageReducer = useLocalStorageReducer;

package/index.js

@@ -7,7 +7,7 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { isEqual } from 'lodash';
 import usePortal from 'react-useportal';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
@@ -833,7 +833,7 @@ const usePopover = (_a) => {
     const popoverContext = popoverData.context;
     const clickInteraction = useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
     const dismissInteraction = useDismiss(popoverContext);
-    const hoverInteraction = useHover(popoverContext, { enabled: activation.hover });
+    const hoverInteraction = useHover$1(popoverContext, { enabled: activation.hover });
     const roleInteraction = useRole(popoverContext);
     const combinedInteractions = useInteractions([
         clickInteraction,
@@ -1201,6 +1201,9 @@ const useClickOutside = (el, options = {}, onClick) => {
  * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
  * @returns {any} The latest value received
  */
+/**
+ *
+ */
 const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
@@ -1274,6 +1277,26 @@ function getDevicePixelRatio(options) {
     return rounded;
 }
 
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {ConditionalUseHoverProps} param0 The options
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
+    const [hovering, setHovering] = useState(false);
+    const debouncedHovering = useDebounce(hovering, delay, direction);
+    const onMouseEnter = () => {
+        setHovering(true);
+    };
+    const onMouseLeave = () => {
+        setHovering(false);
+    };
+    return { onMouseEnter, onMouseLeave, hovering: debounced ? debouncedHovering : hovering };
+};
+
 /**
  * Differentiate between the first and subsequent renders.
  *
@@ -1652,7 +1675,7 @@ const TipContainer = tw.text `
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
-    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsx(ChildContainer$1, { children: children })] })));
+    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": dataTestId && `${dataTestId}-heading` }, { children: title })), description && !showLoading && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && !showLoading && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] })), jsx(ChildContainer$1, { children: children })] })));
 };
 function isValidHttpUrl(link) {
     if (!link) {
@@ -2306,4 +2329,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, cvaClickable, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, cvaClickable, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };

package/package.json

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

package/src/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./useClickOutside";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
+export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useLocalStorage";
 export * from "./useLocalStorageReducer";

package/src/hooks/useDebounce.d.ts

@@ -1,3 +1,4 @@
+export type DebounceDirection = "in" | "out" | "both";
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
@@ -6,4 +7,7 @@
  * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
  * @returns {any} The latest value received
  */
-export declare const useDebounce: <T>(value: T, delay?: number, direction?: "in" | "out" | "both") => T;
+/**
+ *
+ */
+export declare const useDebounce: <T>(value: T, delay?: number, direction?: DebounceDirection) => T;

package/src/hooks/useHover.d.ts

@@ -0,0 +1,24 @@
+import { DebounceDirection } from "./useDebounce";
+type ConditionalUseHoverProps = {
+    debounced: true;
+    delay?: number;
+    direction?: DebounceDirection;
+} | {
+    debounced: false;
+    delay?: never;
+    direction?: never;
+};
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {ConditionalUseHoverProps} param0 The options
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    hovering: boolean;
+};
+export {};