@trackunit/react-components 0.4.12 → 0.4.16

package/index.cjs.js

@@ -744,13 +744,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsxRuntime.jsx(Icon, { color: "danger", name: "ExclamationTriangle" });
+                return jsxRuntime.jsx(Icon, { color: color, name: "ExclamationTriangle" });
             case "warning":
-                return jsxRuntime.jsx(Icon, { color: "warning", name: "ExclamationCircle" });
+                return jsxRuntime.jsx(Icon, { color: color, name: "ExclamationCircle" });
             case "success":
-                return jsxRuntime.jsx(Icon, { color: "success", name: "CheckCircle" });
+                return jsxRuntime.jsx(Icon, { color: color, name: "CheckCircle" });
             case "info":
-                return jsxRuntime.jsx(Icon, { color: "info", name: "InformationCircle" });
+                return jsxRuntime.jsx(Icon, { color: color, name: "InformationCircle" });
             default:
                 return jsxRuntime.jsx(Icon, { name: "InformationCircle" });
         }
@@ -803,7 +803,7 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId, ...rest }) => {
+const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -1084,7 +1084,7 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
 /**
  *
  */
-const useDebounce = (value, delay = 500, direction) => {
+const useDebounce = (value, delay = 500, direction, onBounce) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
     React.useEffect(() => {
         let handler;
@@ -1094,6 +1094,7 @@ const useDebounce = (value, delay = 500, direction) => {
             !direction) {
             handler = setTimeout(() => {
                 setDebouncedValue(value);
+                onBounce === null || onBounce === void 0 ? void 0 : onBounce(value);
             }, delay);
         }
         else {
@@ -1102,7 +1103,7 @@ const useDebounce = (value, delay = 500, direction) => {
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay, direction, debouncedValue]);
+    }, [value, delay, direction, debouncedValue, onBounce]);
     return debouncedValue;
 };
 
@@ -1746,7 +1747,9 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "py-1.5",
     "transition-all",
 ], {
-    variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
+    variants: {
+        expanded: { true: ["border-secondary-200", "border-b", "border-solid", "bg-secondary-50"], false: "" },
+    },
 });
 const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2"]);
 const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "p-4"]);
@@ -3612,6 +3615,8 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
+const PADDING = 16;
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -3619,7 +3624,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
     const [labelId, setLabelId] = React.useState();
     const [descriptionId, setDescriptionId] = React.useState();
@@ -3635,21 +3640,28 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         middleware: [
             react.offset(8),
             react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-            react.shift(),
+            react.shift({ padding: PADDING }),
             react.size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `${availableHeight}px`,
+                        maxWidth: `${availableWidth - PADDING}px`,
+                        maxHeight: `${availableHeight - PADDING}px`,
                     });
                 },
             }),
         ],
     });
     const popoverContext = popoverData.context;
-    const clickInteraction = react.useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const resolvedActivation = typeof activation === "function" ? activation(DEFAULT_ACTIVATION) : activation;
+    const clickInteraction = react.useClick(popoverContext, {
+        enabled: resolvedActivation.click,
+        ignoreMouse: resolvedActivation.hover,
+        keyboardHandlers: false,
+    });
     const dismissInteraction = react.useDismiss(popoverContext, dismissal);
-    const hoverInteraction = react.useHover(popoverContext, { enabled: activation.hover });
+    const hoverInteraction = react.useHover(popoverContext, {
+        enabled: resolvedActivation.hover,
+    });
     const roleInteraction = react.useRole(popoverContext);
     const combinedInteractions = react.useInteractions([
         clickInteraction,
@@ -4065,7 +4077,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
     },
 });
 
-const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "pl-2", "pr-3", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
+const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         size: {
             small: "py-1",
@@ -4127,8 +4139,8 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden p-0",
-            false: "p-1",
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
         },
     },
 });

package/index.esm.js

@@ -724,13 +724,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon, { color: "danger", name: "ExclamationTriangle" });
+                return jsx(Icon, { color: color, name: "ExclamationTriangle" });
             case "warning":
-                return jsx(Icon, { color: "warning", name: "ExclamationCircle" });
+                return jsx(Icon, { color: color, name: "ExclamationCircle" });
             case "success":
-                return jsx(Icon, { color: "success", name: "CheckCircle" });
+                return jsx(Icon, { color: color, name: "CheckCircle" });
             case "info":
-                return jsx(Icon, { color: "info", name: "InformationCircle" });
+                return jsx(Icon, { color: color, name: "InformationCircle" });
             default:
                 return jsx(Icon, { name: "InformationCircle" });
         }
@@ -783,7 +783,7 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId, ...rest }) => {
+const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -1064,7 +1064,7 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries })
 /**
  *
  */
-const useDebounce = (value, delay = 500, direction) => {
+const useDebounce = (value, delay = 500, direction, onBounce) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
         let handler;
@@ -1074,6 +1074,7 @@ const useDebounce = (value, delay = 500, direction) => {
             !direction) {
             handler = setTimeout(() => {
                 setDebouncedValue(value);
+                onBounce === null || onBounce === void 0 ? void 0 : onBounce(value);
             }, delay);
         }
         else {
@@ -1082,7 +1083,7 @@ const useDebounce = (value, delay = 500, direction) => {
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay, direction, debouncedValue]);
+    }, [value, delay, direction, debouncedValue, onBounce]);
     return debouncedValue;
 };
 
@@ -1726,7 +1727,9 @@ const cvaCollapseHeader = cvaMerge([
     "py-1.5",
     "transition-all",
 ], {
-    variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
+    variants: {
+        expanded: { true: ["border-secondary-200", "border-b", "border-solid", "bg-secondary-50"], false: "" },
+    },
 });
 const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
 const cvaCollapsible = cvaMerge(["block", "relative", "p-4"]);
@@ -3592,6 +3595,8 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { className: cvaExternalLink({ className }), "data-testid": dataTestId, href: href, onClick: onClick, rel: rel, target: target, title: title, children: children }));
 };
 
+const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
+const PADDING = 16;
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -3599,7 +3604,7 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -3615,21 +3620,28 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         middleware: [
             offset(8),
             flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-            shift(),
+            shift({ padding: PADDING }),
             size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `${availableHeight}px`,
+                        maxWidth: `${availableWidth - PADDING}px`,
+                        maxHeight: `${availableHeight - PADDING}px`,
                     });
                 },
             }),
         ],
     });
     const popoverContext = popoverData.context;
-    const clickInteraction = useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const resolvedActivation = typeof activation === "function" ? activation(DEFAULT_ACTIVATION) : activation;
+    const clickInteraction = useClick(popoverContext, {
+        enabled: resolvedActivation.click,
+        ignoreMouse: resolvedActivation.hover,
+        keyboardHandlers: false,
+    });
     const dismissInteraction = useDismiss(popoverContext, dismissal);
-    const hoverInteraction = useHover$1(popoverContext, { enabled: activation.hover });
+    const hoverInteraction = useHover$1(popoverContext, {
+        enabled: resolvedActivation.hover,
+    });
     const roleInteraction = useRole(popoverContext);
     const combinedInteractions = useInteractions([
         clickInteraction,
@@ -4045,7 +4057,7 @@ const cvaInteractableItem = cvaMerge("", {
     },
 });
 
-const cvaMenuItemStyle = cvaMerge(["py-2", "pl-2", "pr-3", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
+const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "w-full", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded"], {
     variants: {
         size: {
             small: "py-1",
@@ -4107,8 +4119,8 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-popover", "bg-white", "border", "border-slate-300", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden p-0",
-            false: "p-1",
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
         },
     },
 });

package/package.json

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

package/src/common/CommonProps.d.ts

@@ -7,8 +7,4 @@ export interface CommonProps {
      * A id that can be used in tests to get the component
      */
     dataTestId?: string;
-    /**
-     * Ihe id of the html element
-     */
-    id?: string;
 }

package/src/components/Badge/Badge.d.ts

@@ -25,10 +25,6 @@ interface BaseBadgeProps extends CommonProps {
      * If enabled the badge is shown even if the count is 0.
      */
     hideZero?: boolean;
-    /**
-     * Child nodes.
-     */
-    children?: React.ReactNode;
 }
 export type BadgeProps = BaseBadgeProps;
 /**
@@ -37,5 +33,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-export declare const Badge: ({ color, className, count, max, hideZero, dataTestId, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Badge: ({ color, className, count, max, hideZero, dataTestId }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/Popover/PopoverTypes.d.ts

@@ -3,6 +3,7 @@ import { CommonProps } from "../../common";
 export type PopoverActivation = {
     click?: boolean;
     hover?: boolean;
+    keyboardHandlers?: boolean;
 };
 export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress" | "referencePress">;
 export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
@@ -27,7 +28,7 @@ export interface PopoverProps extends CommonProps {
     /**
      * Options for activation of the popover
      */
-    activation?: PopoverActivation;
+    activation?: PopoverActivation | ((defaultActivation: PopoverActivation) => PopoverActivation);
     /**
      * Options for dismissal of the popover
      */
@@ -36,6 +37,10 @@ export interface PopoverProps extends CommonProps {
      * Callback to be called when the popover open state changes
      */
     onOpenStateChange?: (open: boolean) => void;
+    /**
+     * Ihe id of the html element
+     */
+    id?: string;
 }
 export type FloatingType = Omit<UseFloatingReturn, "middlewareData" | "floatingStyles" | "elements" | "refs">;
 export type ExtendedRefsType = ExtendedRefs<ReferenceType>;

package/src/components/Text/Text.d.ts

@@ -48,6 +48,10 @@ export interface TextProps extends CommonProps {
      * Whether text is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * Ihe id of the html element
+     */
+    id?: string;
 }
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.

package/src/components/Tooltip/Tooltip.d.ts

@@ -29,6 +29,10 @@ export interface TooltipProps extends CommonProps {
      * The props for setting the icon on this tip.
      */
     iconProps?: Omit<IconProps, "type">;
+    /**
+     * Ihe id of the html element
+     */
+    id?: string;
 }
 /**
  * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.

package/src/hooks/useDebounce.d.ts

@@ -10,4 +10,4 @@ export type DebounceDirection = "in" | "out" | "both";
 /**
  *
  */
-export declare const useDebounce: <TValue>(value: TValue, delay?: number, direction?: DebounceDirection) => TValue;
+export declare const useDebounce: <TValue>(value: TValue, delay?: number, direction?: DebounceDirection, onBounce?: (debouncedValue: TValue) => void) => TValue;