@rio-cloud/rio-uikit 1.7.1 → 1.9.0

package/components/barList/BarList.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { type SortDirectionType } from '../../utils/SortUtils';
+export type BarListRow<T> = T & {
+    key?: string;
+    href?: string;
+    value: number;
+    name: string;
+    color?: string;
+    barColor?: string;
+    background?: string;
+};
+/**
+ * Props for the BarList component.
+ *
+ * @template T - The type of the custom data associated with each bar row.
+ */
+type BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Array of bar row data to be rendered.
+     */
+    data: BarListRow<T>[];
+    /**
+     * Optional function to format the numeric value displayed on the right side of each bar.
+     * Can return a string or a React element.
+     *
+     * @example
+     * valueFormatter={(value) => `${value}%`}
+     */
+    valueFormatter?: (value: number) => string | React.ReactElement;
+    /**
+     * A reference value used to calculate relative widths.
+     * If not provided, the maximum value in `data` will be used.
+     *
+     * @default max(data.value)
+     */
+    referenceValue?: number;
+    /**
+     * Whether to animate the bar width transitions using Framer Motion.
+     *
+     * @default false
+     */
+    showAnimation?: boolean;
+    /**
+     * Callback fired when a bar is clicked.
+     *
+     * @param payload - The full data object of the clicked bar.
+     */
+    onSelectRow?: (payload: BarListRow<T>) => void;
+    /**
+     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.
+     *
+     * @default 'none'
+     */
+    sortOrder?: SortDirectionType | 'none';
+    /**
+     * Height of each bar row in pixels.
+     *
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * Opacity applied to non-hovered bars (between 0 and 1).
+     *
+     * @default 0.5
+     */
+    opacity?: number;
+    /**
+     * CSS color string used for the active/progress portion of each bar.
+     *
+     * @default 'bg-highlight-light'
+     */
+    barColor?: string;
+    /**
+     * CSS color string used for the text labels.
+     *
+     * @default 'text-color-darker'
+     */
+    labelColor?: string;
+    /**
+     * CSS color string used for the bar background.
+     *
+     * @default 'bg-transparent'
+     */
+    background?: string;
+    /**
+     * Additional className added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BarListInner: {
+    <T>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BarList: <T>(props: BarListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof BarListInner>;
+export default BarList;

package/components/barList/BarList.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import { SortDirection } from '../../utils/SortUtils';
+import { useSortedBars } from './useSortedBars';
+// Animation variants
+const containerVariants = {
+    animate: {
+        transition: {
+            staggerChildren: 0.1,
+        },
+    },
+};
+const barVariants = {
+    initial: { width: 0 },
+    animate: (width) => ({
+        width: `${width}%`,
+        transition: { duration: 0.8, ease: 'easeOut' },
+    }),
+};
+const DEFAULT_ROW_HEIGHT = 25;
+const DEFAULT_OPACITY = 0.5;
+const BarListInner = (props, forwardedRef) => {
+    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
+    const sortedData = useSortedBars(data, sortOrder, item => item.value);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const widths = useMemo(() => {
+        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
+        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
+    }, [sortedData, referenceValue]);
+    return (_jsxs("div", { ...remainingProps, ref: forwardedRef, className: classNames('display-flex justify-content-between gap-15', className), children: [_jsx(motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
+                    const width = widths[index];
+                    const itemLabelColor = item.color ?? labelColor;
+                    const itemBarColor = item.barColor ?? barColor;
+                    const itemBackground = item.background ?? background;
+                    return (_jsxs("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: classNames('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [_jsx(motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: classNames('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), _jsx("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? (_jsx("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : (_jsx("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
+                }) }), _jsx("div", { className: 'space-y-5', children: sortedData.map(item => (_jsx("div", { className: classNames('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: _jsx("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
+};
+BarListInner.displayName = 'BarList';
+const BarList = React.forwardRef(BarListInner);
+export default BarList;

package/components/barList/useSortedBars.d.ts

@@ -0,0 +1,2 @@
+import { type SortDirectionType } from '../../utils/SortUtils';
+export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/components/barList/useSortedBars.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { SortDirection } from '../../utils/SortUtils';
+export function useSortedBars(data, sortOrder, getValue) {
+    return useMemo(() => {
+        if (sortOrder === 'none') {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const aVal = getValue(a);
+            const bVal = getValue(b);
+            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
+        });
+    }, [data, sortOrder, getValue]);
+}

package/components/button/ButtonToolbar.d.ts

@@ -3,7 +3,7 @@ export type ButtonToolbarProps = ComponentProps<'div'> & {
     /**
      * Align buttons to a defined side or set them apart.
      */
-    alignment?: 'left' | 'right' | 'space-between';
+    alignment?: 'left' | 'right' | 'center' | 'space-between';
     /**
      * Additional classes set to the outer element.
      */

package/components/button/ButtonToolbar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 const ButtonToolbar = (props) => {
     const { className = '', alignment, children, ...remainingProps } = props;
-    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'space-between' && 'justify-content-between');
+    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'center' && 'justify-content-center', alignment === 'space-between' && 'justify-content-between');
     return (_jsx("div", { ...remainingProps, className: classes, children: children }));
 };
 export default ButtonToolbar;

package/components/button/ToggleButton.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Button from './Button';
-// @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
 const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
 export default ToggleButton;

package/components/charts/PieChart.js

@@ -14,7 +14,7 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
 };
 const PieChart = (props) => {
     const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions, ...remainingProps } = props;
-    // biome-ignore lint/suspicious/noExplicitAny:
+    // biome-ignore lint/suspicious/noExplicitAny: unknown type
     const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};

package/components/clearableInput/ClearableInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
+export type MaskVisibility = 'always' | 'onFocus' | 'never';
 export type ClearableInputProps = {
     /**
      * Gives the input element the id.
@@ -69,7 +70,7 @@ export type ClearableInputProps = {
      * @param event
      * @returns
      */
-    onFocus?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * Callback function for when the value is cleared via the clear button.
      * @param event
@@ -93,22 +94,24 @@ export type ClearableInputProps = {
      * It defines the pattern that should be followed.
      *
      * For more details on masking, checkout the third party documentation for the
-     * input mask here: {@link https://github.com/sanniassin/react-input-mask}
+     * input mask here: {@link https://imask.js.org/guide.html}
      *
      * Simple masks can be defined as strings.
      *
      * The following characters will define mask format:
      *
-     * Character: "9" 	= allowed input: "0-9"
+     * Character: "0" = allowed input: "0-9" (digit)
      *
-     * Character: "a" 	= allowed input: "a-z, A-Z"
+     * Character: "a" = allowed input: "a-z, A-Z" (letter)
      *
-     * Character: "*" 	= allowed input: 0-9, a-z, A-Z
+     * Character: "*" = allowed input: any character
      *
-     * Any format character can be escaped with a backslash.
+     * Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     *
+     * Any other character in the mask is considered a fixed value.
      *
      * @example
-     * '-- *** *** ***' or '+4\\9 99 999 99'
+     * '-- ### ### ###' or '+49 00 000 00'
      *
      * @example
      * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
@@ -127,11 +130,21 @@ export type ClearableInputProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Controls when the mask pattern is visible.
+     * - 'always': Mask is always visible
+     * - 'onFocus': Mask is hidden but shown when input is focused (default)
+     * - 'never': Mask is never shown
+     *
+     * @default 'always'
+     */
+    maskVisibility?: MaskVisibility;
     /**
      * Whether mask prefix and placeholder should be displayed when input is empty and
      * has no focus.
      *
      * @default false
+     * @deprecated please use maskVisibility='always' instead
      */
     alwaysShowMask?: boolean;
     /**

package/components/clearableInput/ClearableInput.js

@@ -1,23 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
+// biome-ignore lint/style/useImportType: <explanation>
+import { useState, forwardRef, useRef } from 'react';
 import omit from 'lodash/fp/omit';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
 import classNames from 'classnames';
 import isFunction from 'lodash/fp/isFunction';
 import noop from 'lodash/fp/noop';
-import InputMask from 'react-input-mask';
+import { IMaskInput } from 'react-imask';
 import usePrevious from '../../hooks/usePrevious';
+import useMergeRefs from '../../hooks/useMergeRefs';
 export const DEFAULT_TYPE = 'text';
 export const SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !isEmpty(`${value}`);
 const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
+    const [isFocused, setIsFocused] = useState(false);
     const isControlled = !isNil(value);
+    const internalMaskRef = useRef(null);
+    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);
     const hasMask = !!mask;
+    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
+    const shouldShowMask = () => {
+        // For backward compatibility
+        if (alwaysShowMask) {
+            return true;
+        }
+        switch (maskVisibility) {
+            case 'always':
+                return true;
+            case 'onFocus':
+                return isFocused;
+            case 'never':
+                return false;
+            default:
+                return isFocused;
+        }
+    };
     // Handles new input value and saves it in the local state.
     // The value stored in the state is used for rendering.
     const changeInternalValue = (newValue = '') => {
@@ -44,6 +66,45 @@ const ClearableInput = forwardRef((props, ref) => {
             onChange(newValue, event);
         }
     };
+    const handleAccept = (newValue, maskRef, event) => {
+        if (!internalMaskRef.current) {
+            return;
+        }
+        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
+        const syntheticEvent = {
+            target: internalMaskRef.current,
+            currentTarget: internalMaskRef.current,
+            // Standard synthetic event props
+            bubbles: true,
+            cancelable: true,
+            defaultPrevented: false,
+            isTrusted: true,
+            preventDefault: () => { },
+            stopPropagation: () => { },
+            persist: () => { },
+            nativeEvent: {},
+            type: 'change',
+            timeStamp: Date.now(),
+        };
+        // Set unmasked value manually if needed
+        // (you can use data-attributes or attach it directly)
+        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
+        if (isControlled) {
+            onChange(newValue, syntheticEvent);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, syntheticEvent);
+        }
+    };
+    const handleInputFocus = (event) => {
+        setIsFocused(true);
+        onFocus(event);
+    };
+    const handleInputBlur = (event) => {
+        setIsFocused(false);
+        onBlur(event);
+    };
     // Will be triggered on every key press but also when pressing 'Enter' for example
     const handleKeyPress = (event) => {
         onKeyPress(event);
@@ -66,17 +127,16 @@ const ClearableInput = forwardRef((props, ref) => {
         autoComplete,
         type: inputType,
         value: inputValue,
-        onChange: handleChange,
         onKeyPress: handleKeyPress,
-        onBlur,
-        onFocus,
+        onBlur: handleInputBlur,
+        onFocus: handleInputFocus,
+        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
         onClick,
         disabled,
         maxLength: hasMask ? undefined : maxLength,
         tabIndex,
-        ref: inputRef || ref,
     };
-    const input = hasMask ? (_jsx(InputMask, { ...inputProps, disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask })) : (_jsx("input", { ...inputProps }));
+    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
     return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 export default ClearableInput;

package/components/dialog/Dialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';

package/components/dialog/FrameDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useState } from 'react';
 import IframeResizer from 'iframe-resizer-react';
 import Dialog from './Dialog';

package/components/dropdown/ButtonDropdown.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';
 import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
 import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
-export type ButtonDropdownProps = {
+export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {
     /**
      * Unique button id. If not present a random id is generated.
      */
@@ -46,6 +47,13 @@ export type ButtonDropdownProps = {
      * Possible values are: `link`, `link-inline`, `outline`, `action`
      */
     variant?: BUTTON_VARIANT;
+    /**
+     * Specify the toggle element type.
+     * It supports the following types: "button" | "tag" | "label"
+     *
+     * @default 'button'
+     */
+    toggleButtonType?: DropdownToggleButtonType;
     /**
      * Optional prop to defines whether the dropdown title is icon only which
      * applies different padding so the button is a square.
@@ -90,7 +98,7 @@ export type ButtonDropdownProps = {
      * @param event
      * @returns
      */
-    onOpen?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    onOpen?: (event: DropdownToggleEvent<T>) => void;
     /**
      * Callback for when the toggle button was clicked to close it.
      * @returns
@@ -117,7 +125,7 @@ export type ButtonDropdownProps = {
      */
     className?: string;
 };
-declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps & {
+declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps<"button"> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonDropdown;

package/components/dropdown/ButtonDropdown.js

@@ -25,71 +25,86 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = forwardRef((props, ref) => {
-    const { id = Math.random().toString(36).slice(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, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
-    const [internalOpen, setInternalOpen] = useState(open);
-    const [refDropdownToggle, setRefDropdownToggle] = useState(null);
-    const [refDropdownMenu, setRefDropdownMenu] = useState(null);
-    const [refSplitButtonToggle, setRefSplitButtonToggle] = useState(null);
-    const defaultPopperConfig = {
-        placement: getPlacement(pullRight, dropup),
-        modifiers: [],
-    };
-    const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
-    const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
-    const isUncontrolled = isNil(open);
-    const isOpen = isUncontrolled ? internalOpen : open;
-    const wrapperRef = useClickOutside(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?.contains(event.target)) {
+const createButtonDropdown = () => {
+    return forwardRef((props, ref) => {
+        const { id = Math.random().toString(36).slice(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, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleButtonType = 'button', toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
+        const [internalOpen, setInternalOpen] = useState(open);
+        const [refDropdownToggle, setRefDropdownToggle] = useState(null);
+        const [refDropdownMenu, setRefDropdownMenu] = useState(null);
+        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState(null);
+        const defaultPopperConfig = {
+            placement: getPlacement(pullRight, dropup),
+            modifiers: [],
+        };
+        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
+        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
+        const isUncontrolled = isNil(open);
+        const isOpen = isUncontrolled ? internalOpen : open;
+        const wrapperRef = useClickOutside(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?.contains(event.target)) {
+                    closeMenu();
+                }
+            }
+            else {
                 closeMenu();
             }
-        }
-        else {
-            closeMenu();
-        }
-    }, DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
-    );
-    const dropdownRoot = getOrCreatePortalRoot();
-    const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
-    useEffect(() => {
-        if (!isUncontrolled) {
-            setInternalOpen(open);
-        }
-    }, [isUncontrolled, open]);
-    const toggleOpen = (event) => {
-        const isDropdownOpen = isUncontrolled ? internalOpen : open;
-        if (isDropdownOpen) {
+        }, DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
+        );
+        const dropdownRoot = getOrCreatePortalRoot();
+        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
+        useEffect(() => {
+            if (!isUncontrolled) {
+                setInternalOpen(open);
+            }
+        }, [isUncontrolled, open]);
+        const toggleOpen = (event) => {
+            const isDropdownOpen = isUncontrolled ? internalOpen : open;
+            if (isDropdownOpen) {
+                closeMenu();
+            }
+            else {
+                openMenu(event);
+            }
+        };
+        const openMenu = (event) => {
+            if (isUncontrolled) {
+                setInternalOpen(true);
+            }
+            if (event) {
+                onOpen(event);
+            }
+        };
+        const closeMenu = () => {
+            if (isUncontrolled) {
+                setInternalOpen(false);
+            }
+            onClose();
+        };
+        const handleSplitLabelButtonClick = () => {
             closeMenu();
-        }
-        else {
-            openMenu(event);
-        }
-    };
-    const openMenu = (event) => {
-        if (isUncontrolled) {
-            setInternalOpen(true);
-        }
-        onOpen(event);
-    };
-    const closeMenu = () => {
-        if (isUncontrolled) {
-            setInternalOpen(false);
-        }
-        onClose();
-    };
-    const handleSplitLabelButtonClick = () => {
-        closeMenu();
-        onLabelButtonClick();
-    };
-    const handleDropdownButtonClick = splitButton ? handleSplitLabelButtonClick : toggleOpen;
-    const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
-    const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
-    const dropdownMenu = (_jsx(MenuItemList, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) }));
-    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [_jsx(DropdownToggleButton, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, 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] }));
-});
+            onLabelButtonClick();
+        };
+        const handleSplitCaretButtonClick = (event) => {
+            toggleOpen(event);
+        };
+        const handleDropdownButtonClick = (event) => {
+            if (splitButton) {
+                handleSplitLabelButtonClick();
+            }
+            else {
+                toggleOpen(event);
+            }
+        };
+        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
+        const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
+        const dropdownMenu = (_jsx(MenuItemList, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) }));
+        return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [_jsx(DropdownToggleButton, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, toggleButtonType: toggleButtonType, className: toggleClassName, children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) }), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: handleSplitCaretButtonClick, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] }));
+    });
+};
+const ButtonDropdown = createButtonDropdown();
 export default ButtonDropdown;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,16 +1,19 @@
-import React, { type HTMLProps } from 'react';
+import { type HTMLProps, type PropsWithChildren } from 'react';
 import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+export type DropdownToggleButtonType = 'button' | 'tag' | 'label';
+export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button' ? React.MouseEvent<HTMLButtonElement> : React.MouseEvent<HTMLDivElement>;
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
     splitButton?: boolean;
     iconOnly?: boolean;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
-    outerRef?: React.Ref<HTMLButtonElement>;
+    toggleButtonType?: DropdownToggleButtonType;
+    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     className?: string;
 };
-declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownToggleButton: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 export default DropdownToggleButton;