@trackunit/react-components 0.1.110 → 0.1.112

package/index.cjs

@@ -688,6 +688,35 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
     return (jsxRuntime.jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
 };
 
+const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-between"]);
+cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "duration-200"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+
 /**
  * The Collapse component is used to condense non-important information.
  *
@@ -702,31 +731,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = tailwindStyledComponents.twx(Icon) `
-  ${p => (p.$expanded ? tailwindStyledComponents.tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tailwindStyledComponents.tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tailwindStyledComponents.tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tailwindStyledComponents.tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
-    return (jsxRuntime.jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible
-`;
+    return (jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
 
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
     "py-1",
@@ -1218,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(() => {
@@ -1291,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.
  *
@@ -2386,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';
@@ -661,6 +661,35 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
     return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
 };
 
+const cvaCollapse = cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "justify-between"]);
+cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+
 /**
  * The Collapse component is used to condense non-important information.
  *
@@ -675,31 +704,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = twx(Icon) `
-  ${p => (p.$expanded ? tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tw.div `
-  tu-collapsible
-`;
+    return (jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
 
 const cvaCopyableText = cvaMerge([
     "py-1",
@@ -823,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,
@@ -1191,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(() => {
@@ -1264,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.
  *
@@ -2296,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.110",
+  "version": "0.1.112",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Collapse/Collapse.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaCollapse: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapsible: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseAnimated: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseIcon: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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 {};