@rio-cloud/rio-uikit 1.7.1 → 1.8.0

package/README.md

@@ -4,6 +4,10 @@
 
 The documentation and how to integrate the UIKIT in your project can be found here: https://uikit.developers.rio.cloud/
 
+## Changelog
+
+All changes, updates, and improvements for each version are documented in the changelog (https://uikit.developers.rio.cloud/#start/changelog). Refer to it for a detailed overview of new features, bug fixes, and other modifications.
+
 ## Release
 
 Starting with version `0.12.8`, all versions of the uikit will be available under https://uikit.developers.rio.cloud/${VERSION}/.

package/SvgImage.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/svgImage/SvgImage';
+export * from './components/svgImage/SvgImage';

package/SvgImage.js

@@ -0,0 +1,2 @@
+export { default } from './components/svgImage/SvgImage';
+export * from './components/svgImage/SvgImage';

package/TableCol.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableCol';
+export * from './components/table/TableCol';

package/TableCol.js

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableCol';
+export * from './components/table/TableCol';

package/TableHead.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableHead';
+export * from './components/table/TableHead';

package/TableHead.js

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableHead';
+export * from './components/table/TableHead';

package/components/actionBarItem/ActionBarItemIcon.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 { forwardRef } from 'react';
 import classNames from 'classnames';
 const ActionBarItemIcon = forwardRef((props, ref) => {

package/components/actionBarItem/ActionBarOverlay.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, 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 { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 const CollapsedNavItem = forwardRef((props, ref) => {

package/components/assetTree/Tree.d.ts

@@ -150,6 +150,14 @@ export type TreeProps = {
      * @default false
      */
     hideSummary?: boolean;
+    /**
+     * Callback triggered when the built-in asset type filter changes.
+     * This is only available when the default summary is used.
+     *
+     * @param type
+     * @returns
+     */
+    onTypeFilterChange?: (currentTypes: string[]) => void;
     /**
      * Defines whether the entire area below the search field is shown or not. Note: Disabling the
      * tree head will hide the select all checkbox and the tree options as well as the tree summary.

package/components/assetTree/Tree.js

@@ -37,7 +37,7 @@ const filterProps = omit([
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
 const Tree = React.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, ...remainingProps } = props;
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, onTypeFilterChange = noop, ...remainingProps } = props;
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -261,7 +261,9 @@ const Tree = React.memo((props) => {
         [otherwise, () => renderFlatList()],
     ])();
     const handleFilterByType = (type) => {
-        dispatch(typeFilterChanged(addOrRemoveFromList(state.typeFilter, type)));
+        const updatedTypeFilter = addOrRemoveFromList(state.typeFilter, type);
+        dispatch(typeFilterChanged(updatedTypeFilter));
+        onTypeFilterChange(updatedTypeFilter);
     };
     const enableActivity = size(state.visibleTypeCounters) !== 1;
     const isFilterActive = notEmpty(state.typeFilter);

package/components/assetTree/TreeLeaf.js

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

package/components/assetTree/TreeSearch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, 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 React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/assetTree/TreeSummary.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 React from 'react';
 import classNames from 'classnames';
 import TypeCounter from './TypeCounter';

package/components/assetTree/TypeCounter.d.ts

@@ -33,6 +33,8 @@ export type TypeCounterProps = {
     hideOnZero?: boolean;
     /**
      * Callback function when the counter is clicked. It returns the type value.
+     * Make sure the "type" prop is defined to receive the value in the callback.
+     *
      * @param type
      * @returns
      */

package/components/assetTree/TypeCounter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, 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 { forwardRef, useRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/autosuggest/AutoSuggest.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: <explanation>
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -21,7 +22,7 @@ export const AutoSuggest = (props) => {
         onClear: noop,
         onBlur: noop,
         onFocus: noop,
-        placeholder: 'Start typing ...',
+        placeholder: 'Start typing',
         hasError: false,
         tabIndex: 0,
         value: undefined,

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/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, ref: 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;