@rio-cloud/rio-uikit 1.7.0 → 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/banner/Banner.d.ts

@@ -38,6 +38,12 @@ type BannerProps = {
      * @default true
      */
     border?: boolean;
+    /**
+     * Enables or disables initial animation.
+     *
+     * @default true
+     */
+    initialAnimation?: boolean;
     /**
      * Additional classname added to the wrapper element.
      */

package/components/banner/Banner.js

@@ -1,21 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, createContext } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useEffect, createContext, useRef } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
 import classNames from 'classnames';
 import Card from '../card/Card';
 import Button from '../button/Button';
-import FadeExpander from '../fade/FadeExpander';
 import BannerPageActions from './BannerActions';
 import BannerPageContent from './BannerContent';
 import BannerPageIcon from './BannerIcon';
 import BannerPage from './BannerPage';
 const BannerContext = createContext(undefined);
 const Banner = (props) => {
-    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, className = '', children, ...remainingProps } = props;
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
     const pages = Array.isArray(children) ? children : [children];
     const pageAmount = pages.length;
     const hasMultiplePages = pageAmount > 1;
     const [currentPage, setCurrentPage] = useState(0);
+    const shouldReduceMotion = useReducedMotion();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
     // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
     useEffect(() => {
         if (!show || pageAmount === 1) {
@@ -26,6 +29,24 @@ const Banner = (props) => {
         }, pageTimeout);
         return () => clearInterval(interval);
     }, [pageAmount, pageTimeout, show, currentPage]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        // Use ResizeObserver to get accurate measurements after layout
+        const resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                // Use getBoundingClientRect for most accurate height
+                const height = entry.target.getBoundingClientRect().height;
+                setContentHeight(height);
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+    }, [show, currentPage]);
     const nextPage = () => {
         if (hasMultiplePages) {
             setCurrentPage(prev => (prev + 1) % pageAmount);
@@ -37,10 +58,14 @@ const Banner = (props) => {
         }
     };
     const cardClasses = classNames('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
-    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(FadeExpander, { show: show, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: { opacity: 0, x: 100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -100 }, layout: true, transition: {
-                                        duration: 1.5,
-                                        ease: [0.25, 1, 0.5, 1], // Custom cubic bezier: fast start, slow end
-                                    }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) }));
+    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                    height: { duration: 0.2 },
+                    opacity: { duration: 0.2 },
+                    ease: 'easeInOut',
+                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                                                duration: 1.5,
+                                                ease: [0.25, 1, 0.5, 1],
+                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
 };
 Banner.Page = BannerPage;
 Banner.Icon = BannerPageIcon;

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;