@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/lib/es/components/groupedItemList/GroupedItemList.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { SortDirectionType } from '../../SortUtils';
+export type Group = {
+    groupKey: string;
+    items: any[];
+};
+export type GroupedItemListProps<T> = {
+    /**
+     * The list of items to be grouped and rendered.
+     *
+     * By default, the component assumes an item object containing an 'id' and 'name' property
+     * plus some other attributes.
+     */
+    items: T[];
+    /**
+     * The property of the items to group by as a string, or a custom group function.
+     * Defaults to 'name' if not provided.
+     *
+     * @default 'name'
+     */
+    groupBy?: keyof T | ((item: T) => string);
+    /**
+     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    groupSortOrder?: SortDirectionType;
+    /**
+     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    itemSortOrder?: SortDirectionType;
+    /**
+     * Sorting function for the groups.
+     */
+    groupSortFunction?: (groups: Group[]) => Group[];
+    /**
+     * Sorting function for the items within each group.
+     */
+    itemSortFunction?: (items: T[]) => T[];
+    /**
+     * A custom render function for the group divider.
+     * Receives the group key (e.g., letter or date) as a parameter.
+     */
+    renderDivider?: (groupKey: string) => React.ReactNode;
+    /**
+     * A custom render function for individual list items.
+     * Receives an item as a parameter.
+     */
+    renderItem?: (item: T) => React.ReactNode;
+    /**
+     * Specifies the HTML element to use for the list inside each group.
+     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
+     */
+    listElement?: 'div' | 'ul';
+    /**
+     * Optional class name for the list element inside each group.
+     * Applied to the `div` or `ul` wrapping the items.
+     */
+    listElementClassName?: string;
+    /**
+     * Optional class name for the divider element in each group.
+     * Applied to the `div` wrapping each group divider.
+     */
+    dividerElementClassName?: string;
+    /**
+     * Optional class name for the outer wrapper element.
+     * Applied to the outer `div` wrapping the entire component.
+     */
+    className?: string;
+};
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default GroupedItemList;

package/lib/es/components/groupedItemList/GroupedItemList.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const SortUtils_1 = require("../../SortUtils");
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+const GroupedItemList = (props) => {
+    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
+    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
+    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
+    listElementClassName, dividerElementClassName, className, } = props;
+    // Default group sorting function or specific function provided
+    const groupSortFn = groupSortFunction
+        ? groupSortFunction
+        : (groups) => (0, SortUtils_1.naturalSortByProperty)(groups, 'groupKey', groupSortOrder);
+    // Default item sorting within groups or specific function provided
+    const itemSortFn = itemSortFunction
+        ? itemSortFunction
+        : (itemsToSort) => (0, SortUtils_1.sortByProperty)(itemsToSort, groupBy, itemSortOrder);
+    // Determine the grouping function based on the type of groupBy
+    // const getGroupKey = (item: T): string => {
+    //     if (typeof groupBy === 'string') {
+    //         if (groupBy === 'name') {
+    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
+    //         }
+    //         return (item as any)[groupBy]?.toString() ?? '';
+    //     } else if (typeof groupBy === 'function') {
+    //         return groupBy(item);
+    //     }
+    //     throw new Error('Please define a "groupBy" property as a string or function.');
+    // };
+    const getGroupKey = typeof groupBy === 'function'
+        ? groupBy
+        : (item) => { var _a, _b, _c; return (_c = (_b = (_a = item[groupBy]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''; };
+    // Group items by the specified property
+    // const allGroups = useMemo(
+    //     () =>
+    //         items.reduce<Record<string, T[]>>((acc, item) => {
+    //             const groupKey = getGroupKey(item);
+    //             if (!acc[groupKey]) {
+    //                 acc[groupKey] = [];
+    //             }
+    //             acc[groupKey].push(item);
+    //             return acc;
+    //         }, {}),
+    //     [items, getGroupKey]
+    // );
+    // Group items by the specified property
+    const groupedItems = (0, react_1.useMemo)(() => {
+        // Explicitly typing the accumulator as Record<string, T[]>
+        const groups = items.reduce((acc, item) => {
+            const groupKey = getGroupKey(item);
+            if (!acc[groupKey]) {
+                acc[groupKey] = [];
+            }
+            acc[groupKey].push(item);
+            return acc;
+        }, {});
+        return Object.keys(groups).map(groupKey => ({
+            groupKey,
+            items: groups[groupKey],
+        }));
+    }, [items, getGroupKey]);
+    // Assign the specified list element ('div' or 'ul')
+    const ListElement = listElement;
+    // Sort groups using the provided sort function
+    const sortedGroups = (0, react_1.useMemo)(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `grouped-item-list ${className !== null && className !== void 0 ? className : ''}` }, { children: sortedGroups.map(group => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `group-divider ${dividerElementClassName !== null && dividerElementClassName !== void 0 ? dividerElementClassName : ''}` }, { children: renderDivider ? renderDivider(group.groupKey) : group.groupKey })), (0, jsx_runtime_1.jsx)(ListElement, Object.assign({ className: listElementClassName }, { children: itemSortFn(group.items).map(item => {
+                        var _a;
+                        return renderItem ? (renderItem(item)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'item-name' }, { children: item.name })) }, (_a = item.id) !== null && _a !== void 0 ? _a : crypto.randomUUID()));
+                    }) }))] }, group.groupKey))) })));
+};
+exports.default = GroupedItemList;

package/lib/es/components/licensePlate/LicensePlate.d.ts

@@ -0,0 +1,19 @@
+import { type PropsWithChildren } from 'react';
+export type LicensePlateProps = {
+    /**
+     * The country code.
+     *
+     * Should be a string with 1-3 capital letters.
+     */
+    countryCode?: string;
+    /**
+     * Whether the EU stars should be hidden.
+     */
+    hideStars?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const LicensePlate: (props: PropsWithChildren<LicensePlateProps>) => import("react/jsx-runtime").JSX.Element;
+export default LicensePlate;

package/lib/es/components/licensePlate/LicensePlate.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const euStars = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10' }, { children: (0, jsx_runtime_1.jsx)("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) })));
+const LicensePlate = (props) => {
+    const { countryCode, hideStars, className = '', children } = props;
+    let letterCount = '';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 2)
+        letterCount = 'two-letters';
+    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 3)
+        letterCount = 'three-letters';
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `license-plate ${className}` }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'plate-content' }, { children: [countryCode && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'plate-country' }, { children: [!hideStars && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'stars' }, { children: euStars })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `plate-country-code ${letterCount}` }, { children: countryCode }))] }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'plate-number' }, { children: children }))] })) })));
+};
+exports.default = LicensePlate;

package/lib/es/components/listMenu/ListMenu.js

@@ -68,7 +68,7 @@ const ListMenu = (props) => {
             setIsExpanderOpen(false);
         }
     };
-    const formClassNames = (0, classnames_1.default)('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    const formClassNames = (0, classnames_1.default)('form-group', 'margin-top-5', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
     const listMenu = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formClassNames }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] })) }))), !hasMenuItems(filteredMenuItems) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => ((0, jsx_runtime_1.jsx)(ListMenuGroup_1.default, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
     if (responsive && isMobileMode) {
         return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));

package/lib/es/components/onboarding/OnboardingTip.d.ts

@@ -1,14 +1,14 @@
 import React, { type PropsWithChildren, type ReactNode } from 'react';
-import type { OverlayProps } from 'react-bootstrap';
+import type { Options } from '@popperjs/core';
 import { type TooltipWidth } from '../tooltip/Tooltip';
 import { type TextAlignment } from '../../values/TextAlignment';
 import { type Placement } from '../../values/Placement';
-type PopperConfig = OverlayProps['popperConfig'];
 export type OnboardingButton = {
     text: string | React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     iconName?: string;
 };
+type PopperConfig = Partial<Options>;
 export type OnboardingTipProps = {
     /**
      * The ID of the DOM element.

package/lib/es/components/onboarding/OnboardingTip.js

@@ -24,6 +24,8 @@ const OnboardingTip = (props) => {
                 // Popper.js default is false but we enable it by default
                 options: { altAxis: preventOverflow },
             },
+            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props
+            { name: 'arrow', options: {} },
         ],
     };
     const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));

package/lib/es/components/overlay/OverlayTrigger.d.ts

@@ -1,6 +1,95 @@
-import { type PropsWithChildren } from 'react';
-import { type OverlayTriggerProps as BSOverlayTriggerProps } from 'react-bootstrap/OverlayTrigger';
-export type OverlayTriggerProps = Omit<BSOverlayTriggerProps, 'children'>;
+import React, { type PropsWithChildren } from 'react';
+import type { Options } from '@popperjs/core';
+import { type Placement } from '../../values/Placement';
+import { type TriggerType } from '../../values/Trigger';
+type PopperConfig = Partial<Options>;
+export type OverlayTriggerProps = {
+    /**
+     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired
+     * with `onToggle` to avoid breaking user interactions.
+     *
+     * Manually toggling `show` does **not** wait for `delay` to change the visibility.
+     *
+     * @controllable onToggle
+     * @default: false
+     */
+    show?: boolean;
+    /**
+     * The initial visibility state of the Overlay.
+     *
+     * @default false
+     */
+    defaultShow?: boolean;
+    /**
+     * Defines the usage of React Portal.
+     *
+     * @default true
+     */
+    enablePortal?: boolean;
+    /**
+     * Specify which action or actions trigger Overlay visibility
+     *
+     * The `click` trigger ignores the configured `delay`.
+     *
+     * @default 'hover'
+     */
+    trigger?: TriggerType;
+    /**
+     * A millisecond delay amount to show and hide the Overlay once triggered
+     */
+    delay?: number | {
+        show?: number;
+        hide?: number;
+    };
+    /**
+     * An element or text to overlay next to the target.
+     */
+    overlay: React.ReactElement;
+    /**
+     * The placement of the Overlay in relation to it's `target`.
+     *
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * A Popper.js config object passed to the underlying popper instance.
+     * If no custom config is provided, a default config will be used. This default config
+     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow
+     * modifier so the correct arrow element can be injected for the arrow modifier.
+     *
+     * @example
+     * popperConfig={{
+     *     modifiers: [
+     *          {
+     *              name: 'offset',
+     *              options: {
+     *                  offset: [0, 5],
+     *              },
+     *          },
+     *          {
+     *              name: 'arrow',
+     *              options: {},
+     *          },
+     *      ],
+     *  }}
+     */
+    popperConfig?: PopperConfig;
+    /**
+     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
+     *
+     * @default true
+     */
+    rootClose?: boolean;
+    /**
+     * A callback that fires when the user triggers a change in tooltip visibility.
+     *
+     * `onToggle` is called with the desired next `show`, and generally should be passed
+     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`
+     *
+     * @controllable `show`
+     */
+    onToggle?: (show: boolean) => void;
+};
 declare const OverlayTrigger: {
     (props: PropsWithChildren<OverlayTriggerProps>): import("react/jsx-runtime").JSX.Element;
     TRIGGER_CLICK: "click";

package/lib/es/components/overlay/OverlayTrigger.js

@@ -3,16 +3,148 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("react-bootstrap/OverlayTrigger"));
-const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const react_popper_1 = require("react-popper");
 const Placement_1 = require("../../values/Placement");
 const Trigger_1 = require("../../values/Trigger");
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const useClickOutside_1 = require("../../hooks/useClickOutside");
+const useTimeout_1 = require("../../hooks/useTimeout");
+const useUncontrollable_1 = require("../../hooks/useUncontrollable");
 const OverlayTrigger = (props) => {
-    const usedProps = Object.assign({ rootClose: true }, (0, omit_1.default)(props, 'children'));
-    const { children } = props;
-    // @ts-ignore
-    return (0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({}, usedProps, { children: children }));
+    var _a, _b;
+    const { show: propsShow, defaultShow = false, enablePortal = true, trigger = Trigger_1.TRIGGER.HOVER, delay, overlay, placement = 'top', popperConfig, onToggle = () => { }, rootClose = true, children, } = props;
+    // Use a hook to handle controlled props that work in pairs like in this case the "show"  and "onToggle"
+    // props. It returns a setter function that automatically triggers the callback.
+    const [show, setShow] = (0, useUncontrollable_1.useUncontrolledProp)(propsShow, defaultShow, onToggle);
+    const hoverStateRef = (0, react_1.useRef)('');
+    const timeout = (0, useTimeout_1.useChainedTimeout)();
+    const { onFocus, onBlur, onClick } = typeof children !== 'function' ? react_1.default.Children.only(children).props : {};
+    // Simple implementation of mouseEnter and mouseLeave.
+    // React's built version is broken: https://github.com/facebook/react/issues/4251
+    // for cases when the trigger is disabled and mouseOut/Over can cause flicker
+    // moving from one child element to another.
+    const handleMouseOverOut = (handler, args, relatedNative) => {
+        const [event] = args;
+        const target = event.currentTarget;
+        const related = event.relatedTarget;
+        if ((!related || related !== target) && !target.contains(related)) {
+            handler(...args);
+        }
+    };
+    const handleShow = () => {
+        timeout.clear();
+        hoverStateRef.current = 'show';
+        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.show)) {
+            setShow(true);
+            return;
+        }
+        timeout.set(() => {
+            if (hoverStateRef.current === 'show') {
+                setShow(true);
+            }
+        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.show);
+    };
+    const handleHide = () => {
+        timeout.clear();
+        hoverStateRef.current = 'hide';
+        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.hide)) {
+            setShow(false);
+            return;
+        }
+        timeout.set(() => {
+            if (hoverStateRef.current === 'hide') {
+                setShow(false);
+            }
+        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.hide);
+    };
+    const handleFocus = (0, react_1.useCallback)((...args) => {
+        handleShow();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
+    }, [handleShow, onFocus]);
+    const handleBlur = (0, react_1.useCallback)((...args) => {
+        handleHide();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+    }, [handleHide, onBlur]);
+    const handleClick = (0, react_1.useCallback)((...args) => {
+        setShow(!show);
+        onClick === null || onClick === void 0 ? void 0 : onClick(...args);
+    }, [onClick, setShow, show]);
+    const handleMouseOver = (0, react_1.useCallback)((...args) => {
+        handleMouseOverOut(handleShow, args, 'fromElement');
+    }, [handleShow]);
+    const handleMouseOut = (0, react_1.useCallback)((...args) => {
+        handleMouseOverOut(handleHide, args, 'toElement');
+    }, [handleHide]);
+    const [triggerNode, setTriggerNode] = (0, react_1.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
+    const [arrowPlacement, setArrowPlacement] = (0, react_1.useState)(placement);
+    const handleClickOutside = (0, react_1.useCallback)((event) => {
+        const isToggleTarget = triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.contains(event.target);
+        const isOverlayTarget = popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(event.target);
+        // Check if the click occurred outside the trigger element. Clicking on the trigger
+        // itself is handled by the onClick handler
+        if (show && rootClose && !isToggleTarget && !isOverlayTarget) {
+            handleHide();
+        }
+    }, [triggerNode, popperElement, rootClose, handleHide]);
+    (0, useClickOutside_1.useClickOutsideWithRef)(triggerNode, handleClickOutside);
+    const triggerProps = {
+        ref: (0, mergeRefs_1.default)([children.ref, setTriggerNode]),
+    };
+    if (trigger === 'click') {
+        triggerProps.onClick = handleClick;
+    }
+    else if (trigger === 'focus') {
+        triggerProps.onFocus = handleFocus;
+        triggerProps.onBlur = handleBlur;
+    }
+    else if (trigger === 'hover') {
+        triggerProps.onMouseOver = handleMouseOver;
+        triggerProps.onMouseOut = handleMouseOut;
+    }
+    const defaultPopperConfig = {
+        placement,
+        modifiers: [
+            {
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                },
+            },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['right', 'left', 'top'],
+                },
+            },
+        ],
+    };
+    if (popperConfig) {
+        popperConfig.placement = placement;
+        // if it has an arrow modifier, inject the arrow element
+        const updatedModifiers = [];
+        (_a = popperConfig.modifiers) === null || _a === void 0 ? void 0 : _a.forEach((mod) => {
+            if (mod.name !== 'arrow') {
+                return updatedModifiers.push(mod);
+            }
+            return updatedModifiers.push(Object.assign(Object.assign({}, mod), { options: Object.assign(Object.assign({}, mod.options), { element: arrowElement }) }));
+        });
+        popperConfig.modifiers = updatedModifiers;
+    }
+    const popper = (0, react_popper_1.usePopper)(triggerNode, popperElement, popperConfig || defaultPopperConfig);
+    // In case the overlay causes an overflow and the "flip" modifier
+    // changes the overlays placement, we nee to update the arrow placement as well
+    (0, react_1.useEffect)(() => {
+        if (popper.state) {
+            // Adjust arrow styles based on placement if necessary
+            setArrowPlacement(popper.state.placement);
+        }
+    }, [(_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement]);
+    const overlayElement = react_1.default.cloneElement(overlay, Object.assign(Object.assign({}, popper.attributes.popper), { ref: setPopperElement, placement: arrowPlacement, style: Object.assign({}, popper.styles.popper), arrowProps: Object.assign(Object.assign({}, popper.attributes.arrow), { style: popper.styles.arrow, ref: setArrowElement }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [show && (enablePortal ? react_dom_1.default.createPortal(overlayElement, document.body) : overlayElement), react_1.default.cloneElement(children, triggerProps)] }));
 };
 OverlayTrigger.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
 OverlayTrigger.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;

package/lib/es/components/popover/Popover.d.ts

@@ -1,6 +1,12 @@
-import React, { type ReactNode } from 'react';
-import type { RefComponent } from '../../utils/RefComponent';
-export type PopoverProps = {
+import React, { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
+export declare const PLACEMENT_MAP: {
+    readonly AUTO: "auto";
+    readonly TOP: "top";
+    readonly RIGHT: "right";
+    readonly BOTTOM: "bottom";
+    readonly LEFT: "left";
+};
+export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
     /**
      * HTML ID attribute, necessary for accessibility.
      */
@@ -18,6 +24,10 @@ export type PopoverProps = {
      * - `left`
      */
     placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Additional props assigned to the arrow element. Internally used.
+     */
+    arrowProps?: Record<string, unknown>;
     /**
      * Any element to be rendered as the title of the Popover.
      *
@@ -32,12 +42,20 @@ export type PopoverProps = {
      * Additional classes to be set on the `Popover.Content` element.
      */
     contentClassName?: string;
+    /**
+     * Additional class names for the wrapper element.
+     */
+    className?: string;
 };
-declare const Popover: RefComponent<React.PropsWithChildren<PopoverProps>, HTMLDivElement> & {
-    readonly AUTO: "auto";
-    readonly TOP: "top";
-    readonly RIGHT: "right";
-    readonly BOTTOM: "bottom";
-    readonly LEFT: "left";
+declare const PopoverTitle: ({ className, children }: React.PropsWithChildren<{
+    className?: string | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverContent: ({ className, children }: React.PropsWithChildren<{
+    className?: string | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
+type PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {
+    Title: typeof PopoverTitle;
+    Content: typeof PopoverContent;
 };
+declare const Popover: PopoverType;
 export default Popover;

package/lib/es/components/popover/Popover.js

@@ -1,20 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLACEMENT_MAP = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
+const react_1 = tslib_1.__importStar(require("react"));
+require("framer-motion");
 const Placement_1 = require("../../values/Placement");
-const PLACEMENT_MAP = {
+exports.PLACEMENT_MAP = {
     AUTO: Placement_1.PLACEMENT.AUTO,
     TOP: Placement_1.PLACEMENT.TOP,
     RIGHT: Placement_1.PLACEMENT.RIGHT,
     BOTTOM: Placement_1.PLACEMENT.BOTTOM,
     LEFT: Placement_1.PLACEMENT.LEFT,
 };
+const PopoverTitle = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
+const PopoverContent = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const isPopoverTitleOrContent = (element) => {
+    return (0, react_1.isValidElement)(element) && (element.type === PopoverTitle || element.type === PopoverContent);
+};
 const Popover = (0, react_1.forwardRef)((props, ref) => {
-    const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["title", "titleClassName", "contentClassName", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref }, remainingProps, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && ((0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = tslib_1.__rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const hasTitle = !!title;
+    const hasCustomContent = react_1.default.Children.toArray(children).some(isPopoverTitleOrContent);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && (0, jsx_runtime_1.jsx)(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : (0, jsx_runtime_1.jsx)(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
 });
-Object.assign(Popover, PLACEMENT_MAP);
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
+Object.assign(Popover, exports.PLACEMENT_MAP);
 exports.default = Popover;

package/lib/es/components/selects/BaseSelectDropdown.d.ts

@@ -36,6 +36,7 @@ export type SelectOption = {
 export type BaseSelectDropdownProps<T extends SelectOption> = {
     options?: T[];
     isOpen?: boolean;
+    isLoading?: boolean;
     updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
     onOpen?: (hasDropup: boolean) => void;
     onSelect?: (selectedItem: T | undefined) => void;