@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/lib/es/components/dialog/SplitDialog.js

@@ -2,25 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
-const SplitDialog = props => {
-    const { leftContent, rightContent, onClose, leftContentClassName, rightContentClassName, className } = props, remainingProps = tslib_1.__rest(props, ["leftContent", "rightContent", "onClose", "leftContentClassName", "rightContentClassName", "className"]);
+const SplitDialog = (props) => {
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true } = props, remainingProps = tslib_1.__rest(props, ["leftContent", "rightContent", "leftContentClassName", "rightContentClassName", "className", "useOverflow"]);
     const dialogClassName = `split-dialog ${className}`;
     const dividerClasses = (0, classnames_1.default)('split-divider', 'bg-lighter');
     const body = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'split-wrapper' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `split-left ${leftContentClassName}` }, { children: [leftContent, (0, jsx_runtime_1.jsx)("div", { className: dividerClasses })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `split-right ${rightContentClassName}` }, { children: rightContent }))] })));
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: body, onHide: onClose, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: body, className: dialogClassName, useOverflow: useOverflow }));
 };
-SplitDialog.defaultProps = {
-    className: '',
-    footer: '',
-    useOverflow: true,
-    showCloseButton: true,
-    leftContentClassName: '',
-    rightContentClassName: '',
-};
-SplitDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { leftContent: prop_types_1.default.node, leftContentClassName: prop_types_1.default.string, rightContent: prop_types_1.default.node, rightContentClassName: prop_types_1.default.string, bodyClassName: prop_types_1.default.string, footerClassName: prop_types_1.default.string, footer: prop_types_1.default.node });
 exports.default = SplitDialog;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export type DialogContext = {
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    isSmallestDialog: boolean;
+    showXsDialogBorders: boolean;
+    showCloseButton: boolean;
+};
+export declare const dialogContext: React.Context<DialogContext>;
+export declare const DialogContextProvider: React.Provider<DialogContext>;
+export declare const useDialogContext: () => DialogContext;

package/lib/es/components/dialog/dialogContext.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogContext = exports.DialogContextProvider = exports.dialogContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const initialContext = {
+    onClose: noop_1.default,
+    isSmallestDialog: false,
+    showXsDialogBorders: false,
+    showCloseButton: true,
+};
+exports.dialogContext = (0, react_1.createContext)(initialContext);
+exports.DialogContextProvider = exports.dialogContext.Provider;
+const useDialogContext = () => {
+    const context = (0, react_1.useContext)(exports.dialogContext);
+    if (!context) {
+        throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+    }
+    return context;
+};
+exports.useDialogContext = useDialogContext;

package/lib/es/components/divider/Divider.d.ts

@@ -0,0 +1,46 @@
+import { type PropsWithChildren } from 'react';
+export type DividerProps = {
+    /**
+     * The amount of space to either side
+     *
+     * @default 15
+     */
+    spacing?: number;
+    /**
+     * Defines the width of the divider line
+     *
+     * @default 1
+     */
+    dividerWidth?: 1 | 2 | 3;
+    /**
+     * Defines the color of the divider line
+     *
+     * @default 'light'
+     */
+    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';
+    /**
+     * Use the component as a spacer element without the divider line
+     *
+     * @default false
+     */
+    asSpacer?: boolean;
+    /**
+     * Set the orientation for the divider line to vertical.
+     * This may be useful for button toolbars or elements on a single row.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Defines where the children are aligned on the divider line
+     *
+     * @default 'center'
+     */
+    titleAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const Divider: (props: PropsWithChildren<DividerProps>) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/lib/es/components/divider/Divider.js

@@ -0,0 +1,32 @@
+"use strict";
+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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Divider = (props) => {
+    const { spacing = 15, dividerWidth = 1, dividerColor = 'light', asSpacer = false, vertical = false, titleAlignment = 'center', className = '', children, } = props;
+    const classes = (0, classnames_1.default)('Divider', 'position-relative', !vertical && 'width-100pct', className);
+    const spacingValue = `${spacing}px`;
+    const wrapperStyle = {};
+    if (vertical) {
+        wrapperStyle.paddingLeft = spacingValue;
+        wrapperStyle.paddingRight = spacingValue;
+    }
+    if (!vertical) {
+        wrapperStyle.paddingTop = spacingValue;
+        wrapperStyle.paddingBottom = spacingValue;
+    }
+    const dividerLineClasses = (0, classnames_1.default)('divider-line', `bg-${dividerColor}`);
+    const isStringTitle = typeof children === 'string';
+    const line = ((0, jsx_runtime_1.jsx)("div", { className: dividerLineClasses, style: {
+            width: vertical ? `${dividerWidth}px` : '100%',
+            height: vertical ? '100%' : `${dividerWidth}px`,
+        } }));
+    const titleLine = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-0' }, { children: line }));
+    const title = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: isStringTitle ? 'padding-x-10' : '' }, { children: children }));
+    const dividerTitleClasses = (0, classnames_1.default)('divider-title', 'display-flex', 'align-items-center');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, style: wrapperStyle }, { children: [!asSpacer && !children && line, children && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: dividerTitleClasses }, { children: [titleAlignment === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, titleLine] })), titleAlignment === 'center' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title, titleLine] })), titleAlignment === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title] }))] })))] })));
+};
+exports.default = Divider;

package/lib/es/components/dropdown/ButtonDropdown.d.ts

@@ -1,66 +1,121 @@
+import React from 'react';
+import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+export type ButtonDropdownProps = {
+    /**
+     * Unique button id. If not present a random id is generated.
+     */
+    id?: string;
+    /**
+     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Defined weather or not the menu is rendered.
+     * Use this to control the component from the outside.
+     *
+     * @default undefined
+     */
+    open?: boolean;
+    /**
+     * Defines whether the dropdown opens above or below.
+     * Set it to "true" additionally disables the automatic position feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown or not.
+     */
+    pullRight?: boolean;
+    /**
+     * Defines how large the button will be rendered.
+     *
+     * Possible values are: `xs`, `sm`, `md`, `lg`
+     */
+    bsSize?: BUTTON_SIZE;
+    /**
+     * Defines the button color.
+     *
+     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Defines the variation of the button design.
+     *
+     * Possible values are: `link`, `link-inline`, `outline`, `action`
+     */
+    variant?: BUTTON_VARIANT;
+    /**
+     * Optional prop to defines whether the dropdown title is icon only which
+     * applies different padding so the button is a square.
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Defines whether the caret is shown or not.
+     *
+     * @default false
+     */
+    noCaret?: boolean;
+    /**
+     * Defines whether the dropdown-toggle (with caret) should be in a separate button.
+     *
+     * @default false
+     */
+    splitButton?: boolean;
+    /**
+     * Renders the dropdown into a dedicated react portal
+     *
+     * @default false
+     */
+    usePortal?: boolean;
+    /**
+     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables the dropdown button.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback for splitButton label button click.
+     */
+    onLabelButtonClick?: () => void;
+    /**
+     * Callback for when the toggle button was clicked to open it.
+     * @param event
+     * @returns
+     */
+    onOpen?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback for when the toggle button was clicked to close it.
+     * @returns
+     */
+    onClose?: () => void;
+    /**
+     * Allows to pass in custom dropdown menu content.
+     */
+    customDropdown?: React.ReactNode;
+    /**
+     * Define custom popper.js configuration for dropdown placement and modifiers.
+     */
+    popperConfig?: object;
+    /**
+     * Additional classes to be set on the dropdown-toggle button.
+     */
+    toggleClassName?: string;
+    /**
+     * Additional classes to be set on the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the wrapper element.
+     */
+    className?: string;
+};
+declare const ButtonDropdown: (props: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonDropdown;
-declare function ButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ButtonDropdown {
-    namespace defaultProps {
-        export const id: string;
-        export const items: never[];
-        export const iconOnly: boolean;
-        export const noCaret: boolean;
-        export const pullRight: boolean;
-        export const splitButton: boolean;
-        export const dropup: boolean;
-        export const bsStyle: string;
-        export const disabled: boolean;
-        export { noop as onOpen };
-        export { noop as onClose };
-        export { noop as onLabelButtonClick };
-        export const toggleClassName: string;
-        export const usePortal: boolean;
-        export const className: string;
-    }
-    namespace propTypes {
-        const id_1: PropTypes.Requireable<string>;
-        export { id_1 as id };
-        export const title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        export const open: PropTypes.Requireable<boolean>;
-        const dropup_1: PropTypes.Requireable<boolean>;
-        export { dropup_1 as dropup };
-        const pullRight_1: PropTypes.Requireable<boolean>;
-        export { pullRight_1 as pullRight };
-        export const bsSize: PropTypes.Requireable<string>;
-        const bsStyle_1: PropTypes.Requireable<string>;
-        export { bsStyle_1 as bsStyle };
-        const iconOnly_1: PropTypes.Requireable<boolean>;
-        export { iconOnly_1 as iconOnly };
-        const noCaret_1: PropTypes.Requireable<boolean>;
-        export { noCaret_1 as noCaret };
-        const splitButton_1: PropTypes.Requireable<boolean>;
-        export { splitButton_1 as splitButton };
-        const usePortal_1: PropTypes.Requireable<boolean>;
-        export { usePortal_1 as usePortal };
-        const items_1: PropTypes.Validator<(PropTypes.InferProps<{
-            value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            disabled: PropTypes.Requireable<boolean>;
-            divider: PropTypes.Requireable<boolean>;
-            header: PropTypes.Requireable<boolean>;
-            onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        }> | null | undefined)[]>;
-        export { items_1 as items };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export const dropdownClassName: PropTypes.Requireable<string>;
-        const toggleClassName_1: PropTypes.Requireable<string>;
-        export { toggleClassName_1 as toggleClassName };
-        export const onLabelButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const customDropdown: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export const popperConfig: PropTypes.Requireable<object>;
-        export const enableOnClickOutside: PropTypes.Requireable<(...args: any[]) => any>;
-        export const disableOnClickOutside: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import noop from "lodash/fp/noop";
-import PropTypes from "prop-types";

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -2,19 +2,16 @@
 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 react_1 = require("react");
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const react_popper_1 = require("react-popper");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const logDeprecatedWarnings_1 = tslib_1.__importDefault(require("../../utils/logDeprecatedWarnings"));
 const portalRoot_1 = require("../../utils/portalRoot");
 const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
-const getMenuItems_1 = tslib_1.__importDefault(require("../menuItems/getMenuItems"));
 const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
-const menuItemsPropTypes_1 = tslib_1.__importDefault(require("./menuItemsPropTypes"));
+const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
 const DropdownToggleButton_1 = tslib_1.__importDefault(require("./DropdownToggleButton"));
 const SplitCaretButton_1 = tslib_1.__importDefault(require("./SplitCaretButton"));
 const Caret_1 = tslib_1.__importDefault(require("./Caret"));
@@ -30,38 +27,50 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = props => {
-    const { id, items, bsSize, bsStyle, disabled, iconOnly, title, splitButton, customDropdown, toggleClassName, dropdownClassName, className, open, dropup, pullRight, noCaret, onOpen, onClose, onLabelButtonClick, usePortal, popperConfig } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "toggleClassName", "dropdownClassName", "className", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig"]);
+const ButtonDropdown = (props) => {
+    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
-    const [refDropdownToggle, setRefDropdownToggle] = react_1.default.useState(null);
-    const [refDropdownMenu, setRefDropdownMenu] = react_1.default.useState(null);
-    const [refSplitButtonToggle, setRefSplitButtonToggle] = react_1.default.useState(null);
+    const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
+    const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
+    const [refSplitButtonToggle, setRefSplitButtonToggle] = (0, react_1.useState)(null);
     const defaultPopperConfig = {
         placement: getPlacement(pullRight, dropup),
         modifiers: [],
     };
     const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
     const { styles, attributes } = (0, react_popper_1.usePopper)(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
-    const wrapperRef = (0, useClickOutside_1.default)(() => closeMenu());
+    const wrapperRef = (0, useClickOutside_1.default)(event => {
+        if (usePortal) {
+            // In case the dropdown is rendered via portal the clickOutside the toggle button element is triggered
+            // since the dropdown is not a child of the wrapper element.
+            // In this case we need to check if the event target is inside the dropdown-menu and prevent closing
+            // the dropdown
+            if (!(refDropdownMenu === null || refDropdownMenu === void 0 ? void 0 : refDropdownMenu.contains(event.target))) {
+                closeMenu();
+            }
+        }
+        else {
+            closeMenu();
+        }
+    });
     const dropdownRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
     const isUncontrolled = (0, isNil_1.default)(open);
     const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
     (0, react_1.useEffect)(() => {
         if (!isUncontrolled) {
-            // console.log('update open from outside: ' + open);
             setInternalOpen(open);
         }
     }, [isUncontrolled, open]);
-    const toggleOpen = event => {
-        const isOpen = isUncontrolled ? internalOpen : open;
-        if (isOpen) {
+    const toggleOpen = (event) => {
+        const isDropdownOpen = isUncontrolled ? internalOpen : open;
+        if (isDropdownOpen) {
             closeMenu();
         }
         else {
             openMenu(event);
         }
     };
-    const openMenu = event => {
+    const openMenu = (event) => {
         if (isUncontrolled) {
             setInternalOpen(true);
         }
@@ -81,49 +90,7 @@ const ButtonDropdown = props => {
     const isOpen = isUncontrolled ? internalOpen : open;
     const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
-    const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItems_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, getMenuItems_1.default)(items, toggleOpen) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
-};
-ButtonDropdown.defaultProps = {
-    id: Math.random().toString(36).substr(2, 16),
-    items: [],
-    iconOnly: false,
-    noCaret: false,
-    pullRight: false,
-    splitButton: false,
-    dropup: false,
-    bsStyle: 'default',
-    disabled: false,
-    onOpen: noop_1.default,
-    onClose: noop_1.default,
-    onLabelButtonClick: noop_1.default,
-    toggleClassName: '',
-    usePortal: false,
-    className: '',
-};
-ButtonDropdown.propTypes = {
-    id: prop_types_1.default.string,
-    title: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]).isRequired,
-    open: prop_types_1.default.bool,
-    dropup: prop_types_1.default.bool,
-    pullRight: prop_types_1.default.bool,
-    bsSize: prop_types_1.default.oneOf(['xs', 'sm', 'lg']),
-    bsStyle: prop_types_1.default.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    iconOnly: prop_types_1.default.bool,
-    noCaret: prop_types_1.default.bool,
-    splitButton: prop_types_1.default.bool,
-    usePortal: prop_types_1.default.bool,
-    items: menuItemsPropTypes_1.default.isRequired,
-    disabled: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    dropdownClassName: prop_types_1.default.string,
-    toggleClassName: prop_types_1.default.string,
-    onLabelButtonClick: prop_types_1.default.func,
-    customDropdown: prop_types_1.default.node,
-    popperConfig: prop_types_1.default.object,
-    enableOnClickOutside: prop_types_1.default.func,
-    disableOnClickOutside: prop_types_1.default.func,
-    onOpen: prop_types_1.default.func,
-    onClose: prop_types_1.default.func,
+    const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
 };
 exports.default = ButtonDropdown;

package/lib/es/components/dropdown/Caret.d.ts

@@ -1,2 +1,2 @@
+declare const Caret: () => import("react/jsx-runtime").JSX.Element;
 export default Caret;
-declare function Caret(): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/dropdown/Caret.js

@@ -1,7 +1,7 @@
 "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.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const Caret = () => (0, jsx_runtime_1.jsx)("span", { className: 'caret' });
 exports.default = Caret;

package/lib/es/components/dropdown/DropdownSubmenu.d.ts

@@ -1,19 +1,22 @@
+import React from 'react';
+import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
+export type DropdownSubmenuProps = {
+    /**
+     * Displayed button title.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Items to display in the dropdown sub menu.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables every entry on the title list item.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the dropdown-submenu element.
+     */
+    className?: string;
+};
+declare const DropdownSubmenu: (props: DropdownSubmenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownSubmenu;
-declare function DropdownSubmenu(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace DropdownSubmenu {
-    namespace defaultProps {
-        const title: string;
-        const items: never[];
-        const disabled: boolean;
-    }
-    namespace propTypes {
-        const title_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export { title_1 as title };
-        export { menuItemsPropTypes as items };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";
-import menuItemsPropTypes from "./menuItemsPropTypes";

package/lib/es/components/dropdown/DropdownSubmenu.js

@@ -2,26 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const getMenuItems_1 = tslib_1.__importDefault(require("../menuItems/getMenuItems"));
-const menuItemsPropTypes_1 = tslib_1.__importDefault(require("./menuItemsPropTypes"));
+const react_popper_1 = require("react-popper");
 const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
-const DropdownSubmenu = props => {
-    const { title, items, disabled, className } = props, remainingProps = tslib_1.__rest(props, ["title", "items", "disabled", "className"]);
-    const classes = (0, classnames_1.default)('dropdown-submenu', disabled && 'disabled', className && className);
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, remainingProps, { className: classes }, { children: [(0, jsx_runtime_1.jsxs)("a", Object.assign({ className: 'submenu-title' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-menu-right' })] })), (0, jsx_runtime_1.jsx)(MenuItems_1.default, { children: (0, getMenuItems_1.default)(items) })] })));
-};
-DropdownSubmenu.defaultProps = {
-    title: '',
-    items: [],
-    disabled: false,
-};
-DropdownSubmenu.propTypes = {
-    title: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
-    items: menuItemsPropTypes_1.default,
-    disabled: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
+const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
+const DropdownSubmenu = (props) => {
+    const { title = '', items = [], disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["title", "items", "disabled", "className"]);
+    const classes = (0, classnames_1.default)('dropdown-submenu', disabled && 'disabled', className);
+    const [refParentPopper, setRefParentPopper] = (0, react_1.useState)(null);
+    const [refDropdownSubmenu, setRefDropdownSubmenu] = (0, react_1.useState)(null);
+    // We have to use the workaround of checking the hover state as popper may render
+    // the sub menu on an odd place and fixes it's position on the next render cycle
+    const [isHover, setIsHover] = (0, react_1.useState)(false);
+    const handleMouseEnter = () => setIsHover(true);
+    const handleMouseLeave = () => setIsHover(false);
+    const { styles, attributes } = (0, react_popper_1.usePopper)(refParentPopper, refDropdownSubmenu, {
+        placement: 'right-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [-4, 0],
+                },
+            },
+        ],
+    });
+    // return a list item that is also automatically the new toggle for the submenu
+    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ ref: setRefParentPopper }, remainingProps, { className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [(0, jsx_runtime_1.jsxs)("a", Object.assign({ className: 'submenu-title', role: 'menuitem' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' })] })), isHover && !disabled && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ ref: setRefDropdownSubmenu, style: styles.popper }, attributes.popper, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items }) })))] })));
 };
 exports.default = DropdownSubmenu;

package/lib/es/components/dropdown/DropdownToggleButton.d.ts

@@ -1,3 +1,15 @@
+import React, { type HTMLProps } from 'react';
+import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
+    id?: string;
+    disabled?: boolean;
+    splitButton?: boolean;
+    iconOnly?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    bsSize: BUTTON_SIZE;
+    bsStyle: BUTTON_STYLE;
+    variant?: BUTTON_VARIANT;
+    className?: string;
+};
+declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownToggleButton;
-declare const DropdownToggleButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/lib/es/components/dropdown/DropdownToggleButton.js

@@ -2,20 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const getSizeClassName = bsSize => {
-    return (bsSize === 'xs' && 'btn-xs') || (bsSize === 'sm' && 'btn-sm') || (bsSize === 'lg' && 'btn-lg');
-};
-const DropdownToggleButton = react_1.default.forwardRef((props, ref) => {
-    const { id, bsSize, bsStyle, disabled, iconOnly, splitButton, className, children } = props, remainingProps = tslib_1.__rest(props, ["id", "bsSize", "bsStyle", "disabled", "iconOnly", "splitButton", "className", "children"]);
-    const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', 'btn', `btn-${bsStyle}`, getSizeClassName(bsSize), iconOnly && 'btn-icon-only', disabled && 'disabled', className && !splitButton && className);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, role: 'button', type: 'button', className: labelButtonClasses, ref: ref }, { children: children })));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
+    const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 exports.default = DropdownToggleButton;
-DropdownToggleButton.propTypes = {
-    disabled: prop_types_1.default.bool,
-    bsStyle: prop_types_1.default.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    className: prop_types_1.default.string,
-};

package/lib/es/components/dropdown/SimpleButtonDropdown.d.ts

@@ -1,2 +1,4 @@
+import { type ButtonDropdownProps } from './ButtonDropdown';
+export type SimpleButtonDropdownProps = ButtonDropdownProps;
+declare const SimpleButtonDropdown: (props: SimpleButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleButtonDropdown;
-declare function SimpleButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;