@trackunit/react-components 1.0.5 → 1.0.8

package/index.cjs.js

@@ -1163,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) {
@@ -1185,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;
 };
 
@@ -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 }));
 };
 
 /**
@@ -3314,6 +3314,98 @@ 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 PADDING$1 = 16;
+/**
+ * Converts a width size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ * @param params.availableWidth - The available width in the viewport
+ */
+const getMaxWidthValue = ({ value, referenceWidth, availableWidth }) => {
+    switch (value) {
+        case "trigger-width": {
+            return `${referenceWidth}px`;
+        }
+        case undefined:
+        case "none": {
+            return `${availableWidth - PADDING$1 * 2}px`;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a width size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ */
+const getMinWidthValue = ({ value, referenceWidth, }) => {
+    switch (value) {
+        case "trigger-width": {
+            return `${referenceWidth}px`;
+        }
+        case undefined:
+        case "none": {
+            return undefined;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a height size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ * @param params.availableHeight - The available height in the viewport
+ */
+const getMaxHeightValue = ({ value, availableHeight }) => {
+    switch (value) {
+        case undefined:
+        case "none": {
+            return `${availableHeight - PADDING$1 * 2}px`;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a height size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ */
+const getMinHeightValue = ({ value }) => {
+    switch (value) {
+        case undefined:
+        case "none": {
+            return undefined;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
 const PADDING = 16;
 const DEFAULT_DISMISSAL = {
@@ -3321,14 +3413,20 @@ const DEFAULT_DISMISSAL = {
     outsidePress: true,
     ancestorScroll: false,
 };
+const DEFAULT_SIZING = {
+    minWidth: "none",
+    maxWidth: "none",
+    minHeight: "none",
+    maxHeight: "none",
+};
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
  *
  * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<typeof usePopover>} The data for the popover
+ * @returns {UsePopoverType} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
     const [labelId, setLabelId] = React.useState();
     const [descriptionId, setDescriptionId] = React.useState();
@@ -3347,9 +3445,26 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
             react.shift({ padding: PADDING }),
             react.size({
                 apply({ availableWidth, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - PADDING * 2}px`,
-                        maxHeight: `${availableHeight - PADDING * 2}px`,
+                    const { floating, reference } = elements;
+                    const resolvedSizing = typeof sizing === "function" ? sizing(DEFAULT_SIZING) : sizing;
+                    const refRect = reference.getBoundingClientRect();
+                    Object.assign(floating.style, {
+                        maxWidth: getMaxWidthValue({
+                            value: resolvedSizing.maxWidth,
+                            referenceWidth: refRect.width,
+                            availableWidth,
+                        }),
+                        minWidth: getMinWidthValue({
+                            value: resolvedSizing.minWidth,
+                            referenceWidth: refRect.width,
+                        }),
+                        maxHeight: getMaxHeightValue({
+                            value: resolvedSizing.maxHeight,
+                            availableHeight,
+                        }),
+                        minHeight: getMinHeightValue({
+                            value: resolvedSizing.minHeight,
+                        }),
                     });
                 },
             }),
@@ -3422,7 +3537,9 @@ const usePopoverContext = () => {
  */
 const Popover = ({ children, isModal = false, ...restOptions }) => {
     const popover = usePopover({ isModal, ...restOptions });
-    return (jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function" ? children({ isOpen: popover.isOpen, placement: popover.placement }) : children }));
+    return (jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function"
+            ? children({ isOpen: popover.isOpen, setIsOpen: popover.setIsOpen, placement: popover.placement })
+            : children }));
 };
 
 /** @internal */

package/index.esm.js

@@ -1143,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) {
@@ -1165,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;
 };
 
@@ -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 }));
 };
 
 /**
@@ -3294,6 +3294,98 @@ 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 PADDING$1 = 16;
+/**
+ * Converts a width size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ * @param params.availableWidth - The available width in the viewport
+ */
+const getMaxWidthValue = ({ value, referenceWidth, availableWidth }) => {
+    switch (value) {
+        case "trigger-width": {
+            return `${referenceWidth}px`;
+        }
+        case undefined:
+        case "none": {
+            return `${availableWidth - PADDING$1 * 2}px`;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a width size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ */
+const getMinWidthValue = ({ value, referenceWidth, }) => {
+    switch (value) {
+        case "trigger-width": {
+            return `${referenceWidth}px`;
+        }
+        case undefined:
+        case "none": {
+            return undefined;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a height size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ * @param params.availableHeight - The available height in the viewport
+ */
+const getMaxHeightValue = ({ value, availableHeight }) => {
+    switch (value) {
+        case undefined:
+        case "none": {
+            return `${availableHeight - PADDING$1 * 2}px`;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+/**
+ * Converts a height size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ */
+const getMinHeightValue = ({ value }) => {
+    switch (value) {
+        case undefined:
+        case "none": {
+            return undefined;
+        }
+        default: {
+            if (typeof value === "number") {
+                return `${value}px`;
+            }
+            throw new Error(`${value} is not known`);
+        }
+    }
+};
+
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
 const PADDING = 16;
 const DEFAULT_DISMISSAL = {
@@ -3301,14 +3393,20 @@ const DEFAULT_DISMISSAL = {
     outsidePress: true,
     ancestorScroll: false,
 };
+const DEFAULT_SIZING = {
+    minWidth: "none",
+    maxWidth: "none",
+    minHeight: "none",
+    maxHeight: "none",
+};
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
  *
  * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<typeof usePopover>} The data for the popover
+ * @returns {UsePopoverType} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -3327,9 +3425,26 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
             shift({ padding: PADDING }),
             size({
                 apply({ availableWidth, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - PADDING * 2}px`,
-                        maxHeight: `${availableHeight - PADDING * 2}px`,
+                    const { floating, reference } = elements;
+                    const resolvedSizing = typeof sizing === "function" ? sizing(DEFAULT_SIZING) : sizing;
+                    const refRect = reference.getBoundingClientRect();
+                    Object.assign(floating.style, {
+                        maxWidth: getMaxWidthValue({
+                            value: resolvedSizing.maxWidth,
+                            referenceWidth: refRect.width,
+                            availableWidth,
+                        }),
+                        minWidth: getMinWidthValue({
+                            value: resolvedSizing.minWidth,
+                            referenceWidth: refRect.width,
+                        }),
+                        maxHeight: getMaxHeightValue({
+                            value: resolvedSizing.maxHeight,
+                            availableHeight,
+                        }),
+                        minHeight: getMinHeightValue({
+                            value: resolvedSizing.minHeight,
+                        }),
                     });
                 },
             }),
@@ -3402,7 +3517,9 @@ const usePopoverContext = () => {
  */
 const Popover = ({ children, isModal = false, ...restOptions }) => {
     const popover = usePopover({ isModal, ...restOptions });
-    return (jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function" ? children({ isOpen: popover.isOpen, placement: popover.placement }) : children }));
+    return (jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function"
+            ? children({ isOpen: popover.isOpen, setIsOpen: popover.setIsOpen, placement: popover.placement })
+            : children }));
 };
 
 /** @internal */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "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/components/Popover/Popover.d.ts

@@ -7,6 +7,11 @@ export type ContextType = UsePopoverType | null;
  * @returns {ContextType} The popover context
  */
 export declare const usePopoverContext: () => UsePopoverType;
+type ModalCallback = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    placement: PopoverPlacement;
+};
 /**
  * The popover component.
  * - This component should wrap all the popover components.
@@ -21,8 +26,6 @@ export declare const usePopoverContext: () => UsePopoverType;
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
 export declare const Popover: ({ children, isModal, ...restOptions }: {
-    children: React.ReactNode | ((modalState: {
-        isOpen: boolean;
-        placement: PopoverPlacement;
-    }) => React.ReactNode);
+    children: React.ReactNode | ((modal: ModalCallback) => React.ReactNode);
 } & PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import { HeightSizeLimit, WidthSizeLimit } from "./PopoverTypes";
+export declare const PADDING = 16;
+type WidthValueParams = {
+    value: WidthSizeLimit | undefined;
+    referenceWidth: number;
+    availableWidth: number;
+};
+type HeightValueParams = {
+    value: HeightSizeLimit | undefined;
+    availableHeight: number;
+};
+/**
+ * Converts a width size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ * @param params.availableWidth - The available width in the viewport
+ */
+export declare const getMaxWidthValue: ({ value, referenceWidth, availableWidth }: WidthValueParams) => string;
+/**
+ * Converts a width size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "trigger-width" to match trigger, "none" for no constraint
+ * @param params.referenceWidth - The width of the trigger element in pixels
+ */
+export declare const getMinWidthValue: ({ value, referenceWidth, }: Omit<WidthValueParams, "availableWidth">) => string | undefined;
+/**
+ * Converts a height size value into a CSS dimension value for max constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ * @param params.availableHeight - The available height in the viewport
+ */
+export declare const getMaxHeightValue: ({ value, availableHeight }: HeightValueParams) => string;
+/**
+ * Converts a height size value into a CSS dimension value for min constraints
+ *
+ * @param params - The parameters object
+ * @param params.value - The size value: number for pixels, "none" for no constraint
+ */
+export declare const getMinHeightValue: ({ value }: Pick<HeightValueParams, "value">) => string | undefined;
+export {};

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

@@ -1,4 +1,5 @@
 import { ExtendedRefs, ReferenceType, UseDismissProps, UseFloatingReturn } from "@floating-ui/react";
+import { Dispatch, SetStateAction } from "react";
 import { CommonProps } from "../../common";
 export type PopoverActivation = {
     click?: boolean;
@@ -8,7 +9,23 @@ export type PopoverActivation = {
 export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress">;
 export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
 export type Strategy = "absolute" | "fixed";
+export type HeightSizeLimit = number | "none";
+export type WidthSizeLimit = number | "trigger-width" | "none";
+export type PopoverSizing = {
+    minWidth?: WidthSizeLimit;
+    maxWidth?: WidthSizeLimit;
+    minHeight?: HeightSizeLimit;
+    maxHeight?: HeightSizeLimit;
+};
 export interface PopoverProps extends CommonProps {
+    /**
+     * Size constraints for the popover
+     * For each dimension:
+     * - number: explicit size in pixels
+     * - "trigger-width": match the trigger element's width
+     * - "none": let content determine size (default)
+     */
+    sizing?: PopoverSizing | ((defaultSizing: PopoverSizing) => PopoverSizing);
     /**
      * Whether the popover should be open on initial render
      */
@@ -18,7 +35,7 @@ export interface PopoverProps extends CommonProps {
      */
     placement?: PopoverPlacement;
     /**
-     * Determines if focus is “modal”, meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.
+     * Determines if focus is "modal", meaning focus is fully trapped inside the floating element and outside content cannot be accessed. This includes screen reader virtual cursors.
      */
     isModal?: boolean;
     /**
@@ -38,7 +55,7 @@ export interface PopoverProps extends CommonProps {
      */
     onOpenStateChange?: (open: boolean) => void;
     /**
-     * Ihe id of the html element
+     * The id of the html element
      */
     id?: string;
 }
@@ -46,7 +63,7 @@ export type FloatingType = Omit<UseFloatingReturn, "middlewareData" | "floatingS
 export type ExtendedRefsType = ExtendedRefs<ReferenceType>;
 export type UsePopoverType = {
     isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
     isModal: boolean | undefined;
     labelId?: string;
     descriptionId?: string;

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

@@ -4,6 +4,6 @@ import { PopoverProps, UsePopoverType } from "./PopoverTypes";
  * It should not be used directly, but rather through the Popover component.
  *
  * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<typeof usePopover>} The data for the popover
+ * @returns {UsePopoverType} The data for the popover
  */
-export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, onOpenStateChange, ...restOptions }: PopoverProps) => UsePopoverType;
+export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, sizing, onOpenStateChange, ...restOptions }: PopoverProps) => UsePopoverType;