@rio-cloud/rio-uikit 1.2.2 → 1.3.0

package/lib/es/components/actionBarItem/ActionBarItem.js

@@ -99,7 +99,7 @@ const ActionBarItemBase = (props) => {
         return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [react_1.default.cloneElement(itemIcon, { onClick: onToggle }), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => setIsShown(false) }, { children: (0, jsx_runtime_1.jsx)(Dialog_1.default, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
     }
     const overlay = ((0, jsx_runtime_1.jsx)(ActionBarOverlay_1.default, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, trigger: 'click', rootClose: false, popperConfig: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger_1.default.BOTTOM_END, overlay: overlay, rootClose: false, trigger: 'click', popperConfig: {
                     modifiers: [
                         {
                             name: 'offset',
@@ -107,6 +107,10 @@ const ActionBarItemBase = (props) => {
                                 offset: [0, 5],
                             },
                         },
+                        {
+                            name: 'arrow',
+                            options: {},
+                        },
                     ],
                 } }, { children: itemIcon })), childrenWithoutPopoverAndIcon] })));
 };

package/lib/es/components/actionBarItem/ActionBarItemIcon.d.ts

@@ -1,9 +1,7 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-type ActionBarItemIconProps = HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const ActionBarItemIcon: {
-    (props: PropsWithChildren<ActionBarItemIconProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const ActionBarItemIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    className?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ActionBarItemIcon;

package/lib/es/components/actionBarItem/ActionBarItemIcon.js

@@ -3,13 +3,13 @@ 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 react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ActionBarItemIcon = (props) => {
+const ActionBarItemIcon = (0, react_1.forwardRef)((props, ref) => {
     const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
     const classes = (0, classnames_1.default)('ActionBarItemIcon', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
-};
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes, ref: ref }, { children: children })));
+});
 // The displayName is used in ActionBarItem for checking the component "isActionBarItemIcon"
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';
 exports.default = ActionBarItemIcon;

package/lib/es/components/actionBarItem/ActionBarOverlay.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type Placement } from '../../values/Placement';
+import { PLACEMENT_MAP } from '../popover/Popover';
+import type { ObjectValues } from '../../utils/ObjectValues';
 export type ActionBarOverlayWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
 export type ActionBarOverlayProps = {
     id: string;
@@ -9,7 +10,7 @@ export type ActionBarOverlayProps = {
     width?: ActionBarOverlayWidth;
     onClick?: () => void;
     style?: object;
-    placement?: Placement;
+    placement?: ObjectValues<typeof PLACEMENT_MAP>;
     className?: string;
 };
 declare const ActionBarOverlay: React.ForwardRefExoticComponent<ActionBarOverlayProps & {

package/lib/es/components/actionBarItem/ActionBarOverlay.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const Placement_1 = require("../../values/Placement");
-const DEFAULT_PLACEMENT = Placement_1.PLACEMENT.BOTTOM;
+const Popover_1 = tslib_1.__importStar(require("../popover/Popover"));
+const DEFAULT_PLACEMENT = Popover_1.PLACEMENT_MAP.BOTTOM;
 const DEFAULT_WIDTH = 250;
 const ActionBarOverlay = (0, react_1.forwardRef)((props, ref) => {
-    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, rest = tslib_1.__rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
+    const { children, show, preRender, id, title, onClick = noop_1.default, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, remainingProps = tslib_1.__rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
     const adjustedStyles = Object.assign(Object.assign({}, style), { width });
     const adjustedClassName = preRender && !show ? (0, classnames_1.default)(className, 'position-offscreen') : className;
-    const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover popover-title text-color-dark', className);
-    const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover popover-content', className);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, rest, { style: adjustedStyles, className: adjustedClassName }, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
+    const popoverTitleClasses = (0, classnames_1.default)('ActionBarItemPopover text-color-dark', className);
+    const popoverContentClasses = (0, classnames_1.default)('ActionBarItemPopover', className);
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, remainingProps, { style: adjustedStyles, className: adjustedClassName }, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), (0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
 });
 exports.default = ActionBarOverlay;

package/lib/es/components/applicationLayout/ApplicationLayout.js

@@ -9,6 +9,7 @@ const ApplicationLayoutHeader_1 = tslib_1.__importDefault(require("./Application
 const ApplicationLayoutSidebar_1 = tslib_1.__importDefault(require("./ApplicationLayoutSidebar"));
 const ApplicationLayoutBody_1 = tslib_1.__importDefault(require("./ApplicationLayoutBody"));
 const initDocumentBootstrapping_1 = require("../../utils/init/initDocumentBootstrapping");
+require("../../utils/init/initConfig");
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 (0, initDocumentBootstrapping_1.initDocumentBootstrapping)();

package/lib/es/components/applicationLayout/ApplicationLayoutHeader.js

@@ -3,14 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ApplicationLayoutHeader = (0, react_1.forwardRef)((props, ref) => {
     const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
     const classes = (0, classnames_1.default)('ApplicationLayoutHeader', className);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: classes, id: 'ApplicationLayoutHeader' }, { children: children })));
 });
-ApplicationLayoutHeader.propTypes = {
-    className: prop_types_1.default.string,
-};
 exports.default = ApplicationLayoutHeader;

package/lib/es/components/assetTree/TreeOptions.js

@@ -15,7 +15,7 @@ const TreeOptions = (props) => {
     }
     const dropdownClasses = (0, classnames_1.default)('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
-    const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
+    const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
     if (treeOptionsTooltip) {
         return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
                 modifiers: [

package/lib/es/components/assetTree/treeUtils.js

@@ -38,7 +38,7 @@ const orderByName = (0, orderBy_1.default)([
         var _a;
         return isNameObject(item)
             ? item.name.lastName.toLowerCase()
-            : (_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+            : ((_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '');
     },
 ], ['asc']);
 // TODO: extend to use provided external search function instead?

package/lib/es/components/calendarStripe/CalendarStripe.d.ts

@@ -62,6 +62,14 @@ export type CalendarStripeProps = {
      * Additional classes set to the calendar element.
      */
     className?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    daysWrapperClassName?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    dayWrapperClassName?: string;
 };
 declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
 export default CalendarStripe;

package/lib/es/components/calendarStripe/CalendarStripe.js

@@ -9,6 +9,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
 const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+const hasUtilityClass_1 = require("../../utils/hasUtilityClass");
 const DEFAULT_MIN_WITH = 200;
 const DEFAULT_MIN_DAYS = 1;
 const DEFAULT_MAX_DAYS = 7;
@@ -31,7 +32,7 @@ const getFirstColumnItem = (node) => {
     return getFirstColumnItem(node.children[0]);
 };
 const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop_1.default, onPreviousClick = noop_1.default, buttonClassName = '', className = '', } = props;
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop_1.default, onPreviousClick = noop_1.default, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
     if (render) {
         console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
             ' Please use the "renderDay" prop instead.');
@@ -117,8 +118,10 @@ const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
             addDays = false;
         }
     }
-    const wrapperClassName = (0, classnames_1.default)('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
-    const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: [renderDay ? renderDay(date) : null, render && react_1.default.cloneElement((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+    const wrapperClassNames = (0, classnames_1.default)('CalenderStripe', !(0, hasUtilityClass_1.hasDisplayClass)(className) && 'display-flex', !(0, hasUtilityClass_1.hasAlignItemsClass)(className) && 'align-items-center', !(0, hasUtilityClass_1.hasOverflowClass)(className) && 'overflow-hidden', !(0, hasUtilityClass_1.hasBgClass)(className) && 'bg-white', !(0, hasUtilityClass_1.hasBorderClass)(className) && 'border', !(0, hasUtilityClass_1.hasRoundedClass)(className) && 'rounded', className);
+    const baseButtonClassNames = (0, classnames_1.default)(!(0, hasUtilityClass_1.hasAlignItemsClass)(buttonClassName) && 'align-items-center', !(0, hasUtilityClass_1.hasDisplayClass)(buttonClassName) && 'display-flex', !(0, hasUtilityClass_1.hasHoverScaleClass)(buttonClassName) && 'hover-scale-105', !(0, hasUtilityClass_1.hasHoverTextColorClass)(buttonClassName) && 'hover-text-color-darkest', !(0, hasUtilityClass_1.hasPaddingClass)(buttonClassName) && 'padding-10', !(0, hasUtilityClass_1.hasCursorClass)(buttonClassName) && 'cursor-pointer', !(0, hasUtilityClass_1.hasTextColorClass)(buttonClassName) && 'text-color-darker', !(0, hasUtilityClass_1.hasTextSizeClass)(buttonClassName) && 'text-size-12', !(0, hasUtilityClass_1.hasAlignSelfClass)(buttonClassName) && 'align-self-stretch', buttonClassName);
+    const daysWrapperClassNames = (0, classnames_1.default)(!(0, hasUtilityClass_1.hasDisplayClass)(daysWrapperClassName) && 'display-flex', !(0, hasUtilityClass_1.hasSpaceClass)(daysWrapperClassName) && 'space-x--1', !(0, hasUtilityClass_1.hasUserSelectClass)(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
+    const dayWrapperClassNames = (0, classnames_1.default)(ITEM_NAME, !(0, hasUtilityClass_1.hasFlexClass)(dayWrapperClassName) && 'flex-1-1-0', !(0, hasUtilityClass_1.hasSpaceClass)(dayWrapperClassName) && 'space-x--1', !(0, hasUtilityClass_1.hasUserSelectClass)(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassNames, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: daysWrapperClassNames }, { children: dates.map(date => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: dayWrapperClassNames }, { children: [renderDay ? renderDay(date) : null, render && react_1.default.cloneElement((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassNames, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
 });
 exports.default = CalendarStripe;

package/lib/es/components/dataTabs/DataTab.js

@@ -7,7 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 const framer_motion_1 = require("framer-motion");
 const DataTab = (props) => {
-    const { active = false, tabKey, disableTransition = false, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["active", "tabKey", "disableTransition", "className", "children"]);
+    const { active = false, title, // exclude from remainingProps to avoid being set to the div element
+    tabKey, disableTransition = false, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["active", "title", "tabKey", "disableTransition", "className", "children"]);
     if (disableTransition) {
         return (0, jsx_runtime_1.jsx)("div", { children: active && children });
     }

package/lib/es/components/dialog/SimpleDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type BaseDialogProps } from './Dialog';
-export type SimpleDialogProps = BaseDialogProps & {
+import { type DialogProps } from './Dialog';
+export type SimpleDialogProps = Omit<DialogProps, 'body'> & {
     /**
      * The content of the dialog body itself.
      */

package/lib/es/components/dialog/SplitDialog.d.ts

@@ -25,6 +25,12 @@ export type SplitDialogProps = BaseDialogProps & {
      * Additional classes for the modal-footer element.
      */
     footerClassName?: string;
+    /**
+     * A callback function to be executed before closing the dialog. If the function returns
+     * `false` the dialog will not be closed
+     * @returns
+     */
+    onCloseValidation?: () => boolean;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/lib/es/components/expander/ExpanderList.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
+const hasUtilityClass_1 = require("../../utils/hasUtilityClass");
 const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
 // Generate a unique id (if not present) instead of using the index for the key as it will create
 // side effects when removing items from the list and re-render the ExpanderList.
@@ -41,7 +42,7 @@ const ExpanderList = (props) => {
         });
         setListItems(updatedListItems);
     };
-    const listClassNames = (0, classnames_1.default)('expander-list list-group', rounded && 'rounded', bordered && 'border', className);
+    const listClassNames = (0, classnames_1.default)('expander-list list-group', rounded && !(0, hasUtilityClass_1.hasRoundedClass)(className) && 'rounded', bordered && !(0, hasUtilityClass_1.hasBorderClass)(className) && 'border', className);
     return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: listClassNames }, { children: listItems.map(item => {
             const isOpen = item.open;
             const itemClassNames = (0, classnames_1.default)('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');

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;