@rio-cloud/rio-uikit 0.16.4-beta.21 → 0.16.4-beta.22

package/components/dropdown/ButtonDropdown.d.ts

@@ -1,66 +1,116 @@
+import React from 'react';
+import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
+import type { STYLES_MAP, SIZES_MAP, VARIANTS_MAP } from '../button/Button';
+import type { ObjectValues } from '../../utils/ObjectValues';
+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.
+     */
+    bsSize?: ObjectValues<typeof SIZES_MAP>;
+    /**
+     * Defines the button color.
+     */
+    bsStyle?: ObjectValues<typeof STYLES_MAP>;
+    /**
+     * Defines the variation of the button design.
+     */
+    variant?: ObjectValues<typeof VARIANTS_MAP>;
+    /**
+     * 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/components/dropdown/ButtonDropdown.js

@@ -1,18 +1,15 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import { usePopper } from 'react-popper';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import noop from 'lodash/fp/noop';
-import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 import useClickOutside from '../../hooks/useClickOutside';
-import getMenuItems from '../menuItems/getMenuItems';
 import MenuItems from '../menuItems/MenuItems';
-import menuItemsPropTypes from './menuItemsPropTypes';
+import MenuItemList from '../menuItems/MenuItemList';
 import DropdownToggleButton from './DropdownToggleButton';
 import SplitCaretButton from './SplitCaretButton';
 import Caret from './Caret';
@@ -28,12 +25,12 @@ 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 = __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', disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = useState(open);
-    const [refDropdownToggle, setRefDropdownToggle] = React.useState(null);
-    const [refDropdownMenu, setRefDropdownMenu] = React.useState(null);
-    const [refSplitButtonToggle, setRefSplitButtonToggle] = React.useState(null);
+    const [refDropdownToggle, setRefDropdownToggle] = useState(null);
+    const [refDropdownMenu, setRefDropdownMenu] = useState(null);
+    const [refSplitButtonToggle, setRefSplitButtonToggle] = useState(null);
     const defaultPopperConfig = {
         placement: getPlacement(pullRight, dropup),
         modifiers: [],
@@ -46,20 +43,19 @@ const ButtonDropdown = props => {
     const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
     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);
         }
@@ -79,49 +75,7 @@ const ButtonDropdown = props => {
     const isOpen = isUncontrolled ? internalOpen : open;
     const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
-    const dropdownMenu = (_jsx(MenuItems, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : getMenuItems(items, toggleOpen) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(React.Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.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,
-    onClose: noop,
-    onLabelButtonClick: noop,
-    toggleClassName: '',
-    usePortal: false,
-    className: '',
-};
-ButtonDropdown.propTypes = {
-    id: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
-    open: PropTypes.bool,
-    dropup: PropTypes.bool,
-    pullRight: PropTypes.bool,
-    bsSize: PropTypes.oneOf(['xs', 'sm', 'lg']),
-    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    iconOnly: PropTypes.bool,
-    noCaret: PropTypes.bool,
-    splitButton: PropTypes.bool,
-    usePortal: PropTypes.bool,
-    items: menuItemsPropTypes.isRequired,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    dropdownClassName: PropTypes.string,
-    toggleClassName: PropTypes.string,
-    onLabelButtonClick: PropTypes.func,
-    customDropdown: PropTypes.node,
-    popperConfig: PropTypes.object,
-    enableOnClickOutside: PropTypes.func,
-    disableOnClickOutside: PropTypes.func,
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
+    const dropdownMenu = (_jsx(MenuItemList, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
 };
 export default ButtonDropdown;

package/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/components/dropdown/Caret.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 const Caret = () => _jsx("span", { className: 'caret' });
 export default Caret;

package/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/components/dropdown/DropdownSubmenu.js

@@ -1,25 +1,32 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import classNames from 'classnames';
-import getMenuItems from '../menuItems/getMenuItems';
-import menuItemsPropTypes from './menuItemsPropTypes';
+import { usePopper } from 'react-popper';
 import MenuItems from '../menuItems/MenuItems';
-const DropdownSubmenu = props => {
-    const { title, items, disabled, className } = props, remainingProps = __rest(props, ["title", "items", "disabled", "className"]);
-    const classes = classNames('dropdown-submenu', disabled && 'disabled', className && className);
-    return (_jsxs("li", Object.assign({}, remainingProps, { className: classes }, { children: [_jsxs("a", Object.assign({ className: 'submenu-title' }, { children: [_jsx("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), _jsx("span", { className: 'rioglyph rioglyph-menu-right' })] })), _jsx(MenuItems, { children: getMenuItems(items) })] })));
-};
-DropdownSubmenu.defaultProps = {
-    title: '',
-    items: [],
-    disabled: false,
-};
-DropdownSubmenu.propTypes = {
-    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    items: menuItemsPropTypes,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
+import MenuItemList from '../menuItems/MenuItemList';
+const DropdownSubmenu = (props) => {
+    const { title = '', items = [], disabled = false, className } = props, remainingProps = __rest(props, ["title", "items", "disabled", "className"]);
+    const classes = classNames('dropdown-submenu', disabled && 'disabled', className);
+    const [refParentPopper, setRefParentPopper] = useState(null);
+    const [refDropdownSubmenu, setRefDropdownSubmenu] = 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] = useState(false);
+    const handleMouseEnter = () => setIsHover(true);
+    const handleMouseLeave = () => setIsHover(false);
+    const { styles, attributes } = 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 (_jsxs("li", Object.assign({ ref: setRefParentPopper }, remainingProps, { className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [_jsxs("a", Object.assign({ className: 'submenu-title', role: 'menuitem' }, { children: [_jsx("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), _jsx("span", { className: 'rioglyph rioglyph-chevron-right' })] })), isHover && !disabled && (_jsx(MenuItemList, Object.assign({ ref: setRefDropdownSubmenu, style: styles.popper }, attributes.popper, { children: _jsx(MenuItems, { items: items }) })))] })));
 };
 export default DropdownSubmenu;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,3 +1,15 @@
+import React, { type HTMLProps } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+import { type SIZES_MAP, type STYLES_MAP } from '../button/Button';
+export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
+    id?: string;
+    disabled?: boolean;
+    splitButton?: boolean;
+    iconOnly?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    bsSize: ObjectValues<typeof SIZES_MAP>;
+    bsStyle: ObjectValues<typeof STYLES_MAP>;
+    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/components/dropdown/DropdownToggleButton.js

@@ -1,19 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
-const getSizeClassName = bsSize => {
-    return (bsSize === 'xs' && 'btn-xs') || (bsSize === 'sm' && 'btn-sm') || (bsSize === 'lg' && 'btn-lg');
-};
-const DropdownToggleButton = React.forwardRef((props, ref) => {
-    const { id, bsSize, bsStyle, disabled, iconOnly, splitButton, className, children } = props, remainingProps = __rest(props, ["id", "bsSize", "bsStyle", "disabled", "iconOnly", "splitButton", "className", "children"]);
-    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', 'btn', `btn-${bsStyle}`, getSizeClassName(bsSize), iconOnly && 'btn-icon-only', disabled && 'disabled', className && !splitButton && className);
-    return (_jsx("button", Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, role: 'button', type: 'button', className: labelButtonClasses, ref: ref }, { children: children })));
+import Button from '../button/Button';
+const DropdownToggleButton = forwardRef((props, ref) => {
+    const { id, disabled, bsSize, bsStyle, splitButton = false, onClick, className = '', children } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "splitButton", "onClick", "className", "children"]);
+    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
+    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 export default DropdownToggleButton;
-DropdownToggleButton.propTypes = {
-    disabled: PropTypes.bool,
-    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    className: PropTypes.string,
-};

package/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;

package/components/dropdown/SimpleButtonDropdown.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SimpleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { noCaret: true }));
+const SimpleButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props, { noCaret: true }));
 export default SimpleButtonDropdown;

package/components/dropdown/SingleButtonDropdown.d.ts

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

package/components/dropdown/SingleButtonDropdown.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SingleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props));
+const SingleButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props));
 export default SingleButtonDropdown;

package/components/dropdown/SplitButtonDropdown.d.ts

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

package/components/dropdown/SplitButtonDropdown.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SplitButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { splitButton: true }));
+const SplitButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props, { splitButton: true }));
 export default SplitButtonDropdown;

package/components/dropdown/SplitCaretButton.d.ts

@@ -1,3 +1,13 @@
+import React, { type HTMLProps } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+import { type SIZES_MAP, type STYLES_MAP } from '../button/Button';
+export type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {
+    disabled?: boolean;
+    iconOnly?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    bsSize: ObjectValues<typeof SIZES_MAP>;
+    bsStyle: ObjectValues<typeof STYLES_MAP>;
+    className?: string;
+};
+declare const SplitCaretButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SplitCaretButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SplitCaretButton;
-declare const SplitCaretButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/components/dropdown/SplitCaretButton.js

@@ -1,17 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Caret from './Caret';
-const SplitCaretButton = React.forwardRef((_a, ref) => {
-    var { disabled, bsStyle, className } = _a, remainingProps = __rest(_a, ["disabled", "bsStyle", "className"]);
-    const splitCaretButtonClasses = classNames('dropdown-toggle', 'btn', `btn-${bsStyle}`, disabled && 'disabled', className);
-    return (_jsx("button", Object.assign({}, remainingProps, { role: 'button', type: 'button', className: splitCaretButtonClasses, ref: ref }, { children: _jsx(Caret, {}) })));
+import Button from '../button/Button';
+const SplitCaretButton = forwardRef((props, ref) => {
+    const { disabled = false, bsStyle, bsSize, onClick, className } = props, remainingProps = __rest(props, ["disabled", "bsStyle", "bsSize", "onClick", "className"]);
+    const splitCaretButtonClasses = classNames('dropdown-toggle', className);
+    return (_jsx(Button, Object.assign({}, remainingProps, { type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses }, { children: _jsx(Caret, {}) })));
 });
 export default SplitCaretButton;
-SplitCaretButton.propTypes = {
-    disabled: PropTypes.bool,
-    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    className: PropTypes.string,
-};

package/components/menuItems/MenuItem.d.ts

@@ -3,9 +3,25 @@ export type MenuItemProps = {
     index?: number;
     value?: string | React.ReactNode;
     active?: boolean;
+    /**
+     * Setting "disabled" to true will disable the respective item.
+     *
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Will add a divider line between the items inside the dropdown.
+     *
+     * @default false
+     */
     divider?: boolean;
     header?: boolean;
+    /**
+     * Callback function triggered when an item is selected.
+     * @param value
+     * @param event
+     * @returns
+     */
     onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;
     closeMenu?: VoidFunction;
     onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;

package/components/menuItems/MenuItem.js

@@ -12,6 +12,7 @@ const MenuItem = (props) => {
     }
     const role = divider ? 'separator' : 'presentation';
     const classes = classNames(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');
+    // biome-ignore lint/a11y/useValidAnchor: <explanation>
     const menuLink = _jsx("a", Object.assign({ role: 'menuitem' }, { children: value }));
     const handleSelectItem = (event) => {
         if (!disabled) {

package/components/menuItems/MenuItemList.d.ts

@@ -0,0 +1,7 @@
+import React, { type HTMLProps } from 'react';
+type MenuItemListProps = {
+    pullRight?: boolean;
+    className?: string;
+} & HTMLProps<HTMLUListElement>;
+declare const MenuItemList: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<MenuItemListProps>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default MenuItemList;

package/components/menuItems/MenuItemList.js

@@ -0,0 +1,10 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+const MenuItemList = forwardRef((props, ref) => {
+    const { pullRight, className, children } = props, remainingProps = __rest(props, ["pullRight", "className", "children"]);
+    const dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', className);
+    return (_jsx("ul", Object.assign({}, remainingProps, { className: dropdownMenuClasses, ref: ref, role: 'menu' }, { children: children })));
+});
+export default MenuItemList;

package/components/menuItems/MenuItems.d.ts

@@ -1,3 +1,8 @@
+import { type MenuItemProps as MenuItem } from './MenuItem';
+export type MenuItemsProps = {
+    items: MenuItem[];
+    closeMenu?: () => void;
+    onMouseEnter?: () => void;
+};
+declare const MenuItems: ({ items, closeMenu, onMouseEnter }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
 export default MenuItems;
-declare const MenuItems: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";