@trackunit/react-components 0.1.66 → 0.1.67

package/index.cjs

@@ -9,7 +9,6 @@ var uiIcons = require('@trackunit/ui-icons');
 var reactUse = require('react-use');
 var dateFns = require('date-fns');
 var react = require('@floating-ui/react');
-var reactRouterDom = require('react-router-dom');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
 var reactBrowserHooks = require('react-browser-hooks');
@@ -19,6 +18,7 @@ var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
 var libphonenumberJs = require('libphonenumber-js');
+var reactRouterDom = require('react-router-dom');
 var reactHelmetAsync = require('react-helmet-async');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
@@ -392,7 +392,7 @@ const CustomIcon = tailwindStyledComponents.twx(Icon) `
  * @returns {JSX.Element} Text component
  */
 const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
-    return (jsxRuntime.jsx(StyledText$4, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+    return (jsxRuntime.jsx(StyledText$3, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
 };
 const getTextSize = () => ({ $size }) => {
     const sizes = {
@@ -423,7 +423,7 @@ const getTextAlignment = () => ({ $align }) => {
     };
     return alignments[$align];
 };
-const StyledText$4 = tailwindStyledComponents.tw.text `
+const StyledText$3 = tailwindStyledComponents.tw.text `
   tu-text
   ${getFontColor$1()}
   ${p => (p.$italicize ? tailwindStyledComponents.tws `tu-text--italic` : "")}
@@ -522,7 +522,7 @@ const Badge = (_a) => {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsxRuntime.jsx(StyledText$3, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
+    return (jsxRuntime.jsx(StyledText$2, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
 };
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
@@ -531,7 +531,7 @@ const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     };
     return colorClasses[$color];
 };
-const StyledText$3 = tailwindStyledComponents.tw.text `
+const StyledText$2 = tailwindStyledComponents.tw.text `
   tu-badge
   ${({ $count }) => ($count === null || $count === undefined) && tailwindStyledComponents.tws `tu-badge--square`}
   ${getBadgeModifierClass()}
@@ -907,17 +907,28 @@ const DateInput = React.forwardRef((_a, ref) => {
 });
 
 /**
- * @param {PopoverProps} props The children to render in the popover
- * @returns {ReactElement} Popover with specified content and placement
+ * 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<usePopover>} The data for the popover
  */
-const Popover = ({ children, render, placement, activation = { click: true, hover: false }, className, dataTestId, }) => {
-    const [open, setOpen] = React.useState(false);
-    const { x, y, reference, floating, strategy, context } = react.useFloating({
-        open,
-        onOpenChange: setOpen,
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, onOpenStateChange: setControlledIsOpen } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
+    const [labelId, setLabelId] = React.useState();
+    const [descriptionId, setDescriptionId] = React.useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const setIsOpen = setControlledIsOpen !== null && setControlledIsOpen !== void 0 ? setControlledIsOpen : setUncontrolledIsOpen;
+    const popoverData = react.useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: react.autoUpdate,
         middleware: [
             react.offset(8),
             react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            react.shift(),
             react.size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
@@ -926,83 +937,68 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                     });
                 },
             }),
-            react.shift(),
         ],
-        placement,
-        whileElementsMounted: react.autoUpdate,
     });
-    const { getReferenceProps, getFloatingProps } = react.useInteractions([
-        react.useClick(context, { enabled: activation.click, ignoreMouse: activation.hover }),
-        react.useHover(context, { enabled: activation.hover }),
-        react.useRole(context),
-        react.useDismiss(context),
+    const popoverContext = popoverData.context;
+    const clickInteraction = react.useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const dismissInteraction = react.useDismiss(popoverContext);
+    const hoverInteraction = react.useHover(popoverContext, { enabled: activation.hover });
+    const roleInteraction = react.useRole(popoverContext);
+    const combinedInteractions = react.useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
     ]);
-    // Preserve the consumer's ref
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ref = React.useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps(Object.assign({ ref }, children.props))), jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: open && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: context, modal: false, order: ["reference", "content"], returnFocus: false }, { children: jsxRuntime.jsx("div", Object.assign({ ref: floating, className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`, "data-testid": dataTestId, style: {
-                            position: strategy,
-                            top: y !== null && y !== void 0 ? y : 0,
-                            left: x !== null && x !== void 0 ? x : 0,
-                            display: "flex",
-                        } }, getFloatingProps(), { children: render({
-                            close: () => {
-                                setOpen(false);
-                            },
-                        }) })) }))) }))] }));
-};
-// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
-function mergeRefs(refs) {
-    return value => {
-        refs.forEach(ref => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref !== null) {
-                ref.current = value;
-            }
-        });
-    };
-}
+    return React.useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
+        setIsOpen }, combinedInteractions), popoverData), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
 
+const PopoverContext = React.createContext(null);
 /**
- * The PopoverList component.
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
  *
- * @param {PopoverListProps} props - The props for the PopoverList component
- * @returns {JSX.Element} PopoverList component
+ * @returns {ContextType} The popover context
  */
-const PopoverList = ({ className, children, dataTestId }) => {
-    return (jsxRuntime.jsx(Card, Object.assign({ className: className, dataTestId: dataTestId }, { children: jsxRuntime.jsx(StyledCardBody, Object.assign({ density: "comfortable" }, { children: jsxRuntime.jsx(List, { children: children }) })) })));
+const usePopoverContext = () => {
+    const context = React.useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
 };
-const List = tailwindStyledComponents.tw.ul `
-  tu-popover-list
-`;
-const StyledCardBody = tailwindStyledComponents.twx(CardBody) `
-  tu-popover-list-body
-`;
-
 /**
- * The PopoverListItem component.
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
  *
- * @param {PopoverListItemProps} props - The props for the PopoverListItem component
- * @returns {JSX.Element} PopoverListItem component
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider contining the children
  */
-const PopoverListItem = ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }) => {
-    const content = (jsxRuntime.jsxs("div", Object.assign({ className: "flex items-center gap-3" }, { children: [prefix && jsxRuntime.jsx("div", { children: prefix }), jsxRuntime.jsx(StyledText$2, Object.assign({ weight: selected ? "bold" : "normal", "$selected": selected }, { children: children })), suffix && jsxRuntime.jsx("div", { children: suffix })] })));
-    return (jsxRuntime.jsx(ListItem, Object.assign({ "$selected": selected, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, "data-testid": dataTestId, className: className }, { children: url ? jsxRuntime.jsx(PopoverLink, Object.assign({ to: url }, { children: content })) : content })));
-};
-const StyledText$2 = tailwindStyledComponents.twx(Text$1) `
-  tu-popover-list-item__text
-  ${p => p.$selected && tailwindStyledComponents.tws `tu-popover-list-item__text--selected`}
-`;
-const ListItem = tailwindStyledComponents.tw.li `
-  group
-  tu-popover-list-item
-  ${p => p.disabled && tailwindStyledComponents.tws `tu-popover-list-item--disabled`}
-`;
-const PopoverLink = tailwindStyledComponents.twx(reactRouterDom.Link) `
-  tu-popover-list-item__anchor
-`;
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsxRuntime.jsx(PopoverContext.Provider, Object.assign({ value: popover }, { children: children }));
+};
+
+const PopoverContent = React__default["default"].forwardRef(function PopoverContent(_a, propRef) {
+    var _b, _c, _d, _e;
+    var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
+    const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
+    const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
+    return (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+});
 
 /**
  * The PopoverTitle component.
@@ -1021,6 +1017,20 @@ const StyledText$1 = tailwindStyledComponents.twx(Text$1) `
 tu-popover-title-text
 `;
 
+const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenRef = children.ref;
+    const ref = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && React.isValidElement(children)) {
+        return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 /**
  * The Tooltip component is used to show helpful tips or contextual information to the users.
  *
@@ -1035,7 +1045,7 @@ const Tooltip = (_a) => {
     }
     return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsx(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", render: () => (jsxRuntime.jsx(Content, Object.assign({ "$mode": mode }, { children: jsxRuntime.jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) }))) }, { children: children })));
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Content, Object.assign({ "$mode": mode }, { children: jsxRuntime.jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
 const Flex$1 = tailwindStyledComponents.tw.div `
   inline-flex
 `;
@@ -1155,7 +1165,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxRuntime.jsx(Popover, Object.assign({ placement: placement, render: () => (jsxRuntime.jsx(PopoverList, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsxRuntime.jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+    return (jsxRuntime.jsxs(Popover, Object.assign({ placement: placement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] })));
 };
 
 /**
@@ -1439,7 +1449,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     return (jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children && typeof children !== "string" ? (children) : (jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: children !== null && children !== void 0 ? children : label }))), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$4 = tailwindStyledComponents.tw.div `
   group tu-menu-item
@@ -1470,7 +1480,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
+    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
 };
 const Container$3 = tailwindStyledComponents.tw.div `
   tu-menu-list
@@ -1501,9 +1511,9 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     reactBrowserHooks.useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
-                    setActionMenuIsOpen(!actionMenuIsOpen);
-                } })) })) })));
+    return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+                            setActionMenuIsOpen(!actionMenuIsOpen);
+                        } })) }), jsxRuntime.jsx(PopoverContent, { children: children })] })) })));
 };
 const Root$4 = tailwindStyledComponents.tw.div `
   tu-more-menu
@@ -2586,9 +2596,17 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     circular: false,
                     variant: "transparent",
                     color: "secondary",
-                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default["default"].Children.map(children, child => {
-                        return itemOverflowMap[child.props.id] ? child : null;
-                    }) })) }))) : null] })));
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default["default"].Children.map(children, child => {
+                        return itemOverflowMap[child.props.id]
+                            ? React__default["default"].cloneElement(child, {
+                                onClick: () => {
+                                    var _a, _b;
+                                    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    close();
+                                },
+                            })
+                            : null;
+                    }) }))) }))) : null] })));
 };
 const Root$2 = tailwindStyledComponents.tw.div `
   tu-sidebar
@@ -3266,9 +3284,9 @@ exports.Pagination = Pagination;
 exports.PhoneField = PhoneField;
 exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
-exports.PopoverList = PopoverList;
-exports.PopoverListItem = PopoverListItem;
+exports.PopoverContent = PopoverContent;
 exports.PopoverTitle = PopoverTitle;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Prompt = Prompt;
 exports.ROLE_CARD = ROLE_CARD;
 exports.RadioGroup = RadioGroup;
@@ -3311,5 +3329,6 @@ exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
 exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
+exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
 exports.useTimeout = useTimeout;

package/index.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, useEffect, Children, useRef, memo, useContext } from 'react';
+import React__default, { useState, forwardRef, useMemo, createContext, useContext, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, flip, size, shift, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 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 { useClickOutside } from 'react-browser-hooks';
@@ -17,6 +16,7 @@ import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { color } from '@trackunit/ui-design-tokens';
 
@@ -362,7 +362,7 @@ const CustomIcon = twx(Icon) `
  * @returns {JSX.Element} Text component
  */
 const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
-    return (jsx(StyledText$4, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+    return (jsx(StyledText$3, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
 };
 const getTextSize = () => ({ $size }) => {
     const sizes = {
@@ -393,7 +393,7 @@ const getTextAlignment = () => ({ $align }) => {
     };
     return alignments[$align];
 };
-const StyledText$4 = tw.text `
+const StyledText$3 = tw.text `
   tu-text
   ${getFontColor$1()}
   ${p => (p.$italicize ? tws `tu-text--italic` : "")}
@@ -492,7 +492,7 @@ const Badge = (_a) => {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsx(StyledText$3, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
+    return (jsx(StyledText$2, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
 };
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
@@ -501,7 +501,7 @@ const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     };
     return colorClasses[$color];
 };
-const StyledText$3 = tw.text `
+const StyledText$2 = tw.text `
   tu-badge
   ${({ $count }) => ($count === null || $count === undefined) && tws `tu-badge--square`}
   ${getBadgeModifierClass()}
@@ -877,17 +877,28 @@ const DateInput = forwardRef((_a, ref) => {
 });
 
 /**
- * @param {PopoverProps} props The children to render in the popover
- * @returns {ReactElement} Popover with specified content and placement
+ * 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<usePopover>} The data for the popover
  */
-const Popover = ({ children, render, placement, activation = { click: true, hover: false }, className, dataTestId, }) => {
-    const [open, setOpen] = useState(false);
-    const { x, y, reference, floating, strategy, context } = useFloating({
-        open,
-        onOpenChange: setOpen,
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, onOpenStateChange: setControlledIsOpen } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const setIsOpen = setControlledIsOpen !== null && setControlledIsOpen !== void 0 ? setControlledIsOpen : setUncontrolledIsOpen;
+    const popoverData = useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
         middleware: [
             offset(8),
             flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            shift(),
             size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
@@ -896,83 +907,68 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                     });
                 },
             }),
-            shift(),
         ],
-        placement,
-        whileElementsMounted: autoUpdate,
     });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        useClick(context, { enabled: activation.click, ignoreMouse: activation.hover }),
-        useHover(context, { enabled: activation.hover }),
-        useRole(context),
-        useDismiss(context),
+    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 roleInteraction = useRole(popoverContext);
+    const combinedInteractions = useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
     ]);
-    // Preserve the consumer's ref
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ref = useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
-    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps(Object.assign({ ref }, children.props))), jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: open && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: context, modal: false, order: ["reference", "content"], returnFocus: false }, { children: jsx("div", Object.assign({ ref: floating, className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`, "data-testid": dataTestId, style: {
-                            position: strategy,
-                            top: y !== null && y !== void 0 ? y : 0,
-                            left: x !== null && x !== void 0 ? x : 0,
-                            display: "flex",
-                        } }, getFloatingProps(), { children: render({
-                            close: () => {
-                                setOpen(false);
-                            },
-                        }) })) }))) }))] }));
-};
-// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
-function mergeRefs(refs) {
-    return value => {
-        refs.forEach(ref => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref !== null) {
-                ref.current = value;
-            }
-        });
-    };
-}
+    return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
+        setIsOpen }, combinedInteractions), popoverData), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
 
+const PopoverContext = createContext(null);
 /**
- * The PopoverList component.
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
  *
- * @param {PopoverListProps} props - The props for the PopoverList component
- * @returns {JSX.Element} PopoverList component
+ * @returns {ContextType} The popover context
  */
-const PopoverList = ({ className, children, dataTestId }) => {
-    return (jsx(Card, Object.assign({ className: className, dataTestId: dataTestId }, { children: jsx(StyledCardBody, Object.assign({ density: "comfortable" }, { children: jsx(List, { children: children }) })) })));
+const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
 };
-const List = tw.ul `
-  tu-popover-list
-`;
-const StyledCardBody = twx(CardBody) `
-  tu-popover-list-body
-`;
-
 /**
- * The PopoverListItem component.
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
+ *
  *
- * @param {PopoverListItemProps} props - The props for the PopoverListItem component
- * @returns {JSX.Element} PopoverListItem component
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider contining the children
  */
-const PopoverListItem = ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }) => {
-    const content = (jsxs("div", Object.assign({ className: "flex items-center gap-3" }, { children: [prefix && jsx("div", { children: prefix }), jsx(StyledText$2, Object.assign({ weight: selected ? "bold" : "normal", "$selected": selected }, { children: children })), suffix && jsx("div", { children: suffix })] })));
-    return (jsx(ListItem, Object.assign({ "$selected": selected, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, "data-testid": dataTestId, className: className }, { children: url ? jsx(PopoverLink, Object.assign({ to: url }, { children: content })) : content })));
-};
-const StyledText$2 = twx(Text$1) `
-  tu-popover-list-item__text
-  ${p => p.$selected && tws `tu-popover-list-item__text--selected`}
-`;
-const ListItem = tw.li `
-  group
-  tu-popover-list-item
-  ${p => p.disabled && tws `tu-popover-list-item--disabled`}
-`;
-const PopoverLink = twx(Link) `
-  tu-popover-list-item__anchor
-`;
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsx(PopoverContext.Provider, Object.assign({ value: popover }, { children: children }));
+};
+
+const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
+    var _b, _c, _d, _e;
+    var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
+    const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    return (jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+});
 
 /**
  * The PopoverTitle component.
@@ -991,6 +987,20 @@ const StyledText$1 = twx(Text$1) `
 tu-popover-title-text
 `;
 
+const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenRef = children.ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && isValidElement(children)) {
+        return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 /**
  * The Tooltip component is used to show helpful tips or contextual information to the users.
  *
@@ -1005,7 +1015,7 @@ const Tooltip = (_a) => {
     }
     return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsx(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", render: () => (jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) }))) }, { children: children })));
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
 const Flex$1 = tw.div `
   inline-flex
 `;
@@ -1125,7 +1135,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsx(Popover, Object.assign({ placement: placement, render: () => (jsx(PopoverList, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+    return (jsxs(Popover, Object.assign({ placement: placement }, { children: [jsx(PopoverTrigger, { children: jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] })));
 };
 
 /**
@@ -1409,7 +1419,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     return (jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children && typeof children !== "string" ? (children) : (jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: children !== null && children !== void 0 ? children : label }))), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$4 = tw.div `
   group tu-menu-item
@@ -1440,7 +1450,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
+    return (jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
 };
 const Container$3 = tw.div `
   tu-menu-list
@@ -1471,9 +1481,9 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
-                    setActionMenuIsOpen(!actionMenuIsOpen);
-                } })) })) })));
+    return (jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+                            setActionMenuIsOpen(!actionMenuIsOpen);
+                        } })) }), jsx(PopoverContent, { children: children })] })) })));
 };
 const Root$4 = tw.div `
   tu-more-menu
@@ -2556,9 +2566,17 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     circular: false,
                     variant: "transparent",
                     color: "secondary",
-                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
-                        return itemOverflowMap[child.props.id] ? child : null;
-                    }) })) }))) : null] })));
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
+                        return itemOverflowMap[child.props.id]
+                            ? React__default.cloneElement(child, {
+                                onClick: () => {
+                                    var _a, _b;
+                                    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    close();
+                                },
+                            })
+                            : null;
+                    }) }))) }))) : null] })));
 };
 const Root$2 = tw.div `
   tu-sidebar
@@ -3182,4 +3200,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneField, PhoneInput, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneField, PhoneInput, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.66",
+  "version": "0.1.67",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -11,7 +11,7 @@
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
-    "@floating-ui/react": "0.15.1",
+    "@floating-ui/react": "0.22.2",
     "@trackunit/ui-icons": "0.0.61",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -9,7 +9,7 @@ export interface MenuItemProps extends CommonProps {
      * The children element is a custom element that can be used to override the label.
      * If you use this prop, the label prop will be ignored.
      */
-    children?: JSX.Element;
+    children?: React.ReactNode;
     /**
      * Additional tailwind classes to be applied to the component.
      */

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -2,13 +2,13 @@
 import { CommonProps } from "../../../common/CommonProps";
 import { IconButtonProps } from "../../buttons";
 import { IconProps } from "../../Icon/Icon";
-import { PopoverPlacement } from "../../Popover";
+import { PopoverContentChildren, PopoverPlacement } from "../../Popover";
 export type DotsDirection = "horizontal" | "vertical";
 export type MenuPlacement = "above" | "below";
 type FilteredIconProps = Omit<IconProps, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
-    children: JSX.Element;
+    children: PopoverContentChildren;
     dotsDirection?: DotsDirection;
     menuPlacement?: PopoverPlacement;
     iconProps?: FilteredIconProps;

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

@@ -1,37 +1,72 @@
-import { Placement } from "@floating-ui/react";
-import { ReactElement } from "react";
-import { CommonProps } from "../../common";
-type Render = (data: {
-    close: () => void;
-}) => ReactElement;
-export type PopoverPlacement = Placement;
-export type PopoverActivation = {
-    click?: boolean;
-    hover?: boolean;
+/// <reference types="react" />
+import { PopoverProps } from "./PopoverTypes";
+/**
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
+ *
+ * @returns {ContextType} The popover context
+ */
+export declare const usePopoverContext: () => {
+    isModal: boolean | undefined;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    customProps: {
+        className?: string | undefined;
+        dataTestId?: string | undefined;
+    };
+    placement: import("@floating-ui/react-dom").Placement;
+    strategy: import("@floating-ui/react-dom").Strategy;
+    middlewareData: import("@floating-ui/react-dom").MiddlewareData;
+    x: number | null;
+    y: number | null;
+    update: () => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    context: {
+        placement: import("@floating-ui/react-dom").Placement;
+        strategy: import("@floating-ui/react-dom").Strategy;
+        x: number | null;
+        y: number | null;
+        middlewareData: import("@floating-ui/react-dom").MiddlewareData;
+        update: () => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: (node: HTMLElement | null) => void;
+        isPositioned: boolean;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
 };
-export interface PopoverProps extends CommonProps {
-    /**
-     * What to render indide the popover with callback to close the popover
-     */
-    render: Render;
-    /**
-     * Where to preferentially render the popover relative to the invoking element.
-     * Will not be respected in case of insufficient space.
-     */
-    placement?: PopoverPlacement;
-    /**
-     * Action(s) that activates the tooltip
-     */
-    activation?: PopoverActivation;
-    /**
-     * The element, usually a button, that activates the popover.
-     * Event handling is automatic and tied to this element. No manual Event handling is necessary.
-     */
-    children: ReactElement;
-}
 /**
- * @param {PopoverProps} props The children to render in the popover
- * @returns {ReactElement} Popover with specified content and placement
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
+ *
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider contining the children
  */
-export declare const Popover: ({ children, render, placement, activation, className, dataTestId, }: PopoverProps) => JSX.Element;
-export {};
+export declare const Popover: ({ children, isModal, ...restOptions }: {
+    children: React.ReactNode;
+} & PopoverProps) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { CommonProps } from "../../common";
+export type PopoverContentChildren = ((close: () => void) => React.ReactNode) | React.ReactNode;
+export interface PopoverContentProps extends Omit<React.HTMLProps<HTMLDivElement>, "children">, CommonProps {
+    children: PopoverContentChildren;
+}
+export declare const PopoverContent: React.ForwardRefExoticComponent<Pick<PopoverContentProps, "children" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "dataTestId"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface PopoverTriggerProps {
+    /** Any elements that when clicked should open the popover */
+    children: React.ReactNode;
+    /**
+     * When enabled the trigger will be rendered as a button
+     * note that not all elements are valid children of a button
+     */
+    renderButton?: boolean;
+}
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLProps<HTMLElement> & PopoverTriggerProps, "children" | "renderButton" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,33 @@
+import { Placement } from "@floating-ui/react";
+import { CommonProps } from "../../common";
+export type PopoverActivation = {
+    click?: boolean;
+    hover?: boolean;
+};
+export type PopoverPlacement = Placement;
+export interface PopoverProps extends CommonProps {
+    /**
+     * Whether the popover should be open on initial render
+     */
+    initialOpen?: boolean;
+    /**
+     * Where to preferentially render the popover relative to the invoking element.
+     */
+    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.
+     */
+    isModal?: boolean;
+    /**
+     * Whether the popover IS CURRENTLY open
+     */
+    isOpen?: boolean;
+    /**
+     * Action(s) that activates the popover
+     */
+    activation?: PopoverActivation;
+    /**
+     * Callback to be called when the popover open state changes
+     */
+    onOpenStateChange?: (open: boolean) => void;
+}

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

@@ -1,4 +1,5 @@
 export * from "./Popover";
-export * from "./PopoverList";
-export * from "./PopoverListItem";
+export * from "./PopoverContent";
 export * from "./PopoverTitle";
+export * from "./PopoverTrigger";
+export * from "./PopoverTypes";

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { PopoverProps } from "./PopoverTypes";
+/**
+ * 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<usePopover>} The data for the popover
+ */
+export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, onOpenStateChange: setControlledIsOpen, ...restOptions }: PopoverProps) => {
+    isModal: boolean | undefined;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    customProps: {
+        className?: string | undefined;
+        dataTestId?: string | undefined;
+    };
+    placement: import("@floating-ui/react").Placement;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number | null;
+    y: number | null;
+    update: () => void;
+    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    context: {
+        placement: import("@floating-ui/react").Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        x: number | null;
+        y: number | null;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: (node: HTMLElement | null) => void;
+        isPositioned: boolean;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+};

package/src/components/Sidebar/Sidebar.d.ts

@@ -7,6 +7,8 @@ export interface SidebarItemProps extends CommonProps {
      * This is needed as it is used for the intersection observer to determine which items are visible and which are not.
      */
     id: string;
+    /** Optional onClick */
+    onClick?: () => void;
 }
 export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 export interface SidebarProps extends CommonProps {

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface PopoverListProps extends CommonProps {
-    children: React.ReactNode;
-}
-/**
- * The PopoverList component.
- *
- * @param {PopoverListProps} props - The props for the PopoverList component
- * @returns {JSX.Element} PopoverList component
- */
-export declare const PopoverList: ({ className, children, dataTestId }: PopoverListProps) => JSX.Element;

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface PopoverListItemProps extends CommonProps {
-    selected?: boolean;
-    disabled?: boolean;
-    ariaLabel?: string;
-    /** Optional event handler for logging etc. Important: Please use the Url prop for navigation.  */
-    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
-    /** Navigation Url for this item */
-    url?: string;
-    /**
-     * The prefix to be displayed for the list item.
-     */
-    prefix?: React.ReactNode;
-    /**
-     * The suffix to be displayed for the list item.
-     */
-    suffix?: React.ReactNode;
-    /**
-     * The child nodes.
-     */
-    children: React.ReactNode;
-}
-/**
- * The PopoverListItem component.
- *
- * @param {PopoverListItemProps} props - The props for the PopoverListItem component
- * @returns {JSX.Element} PopoverListItem component
- */
-export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }: PopoverListItemProps) => JSX.Element;