@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/components/menuItems/MenuItem.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// 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';
-import DropdownSubmenu from '../dropdown/DropdownSubmenu';
-import DropdownHeader from '../selects/DropdownHeader';
+import { noop } from 'es-toolkit/function';
+import DropdownSubmenu from "../dropdown/DropdownSubmenu.js";
+import DropdownHeader from "../selects/DropdownHeader.js";
 const MenuItem = (props) => {
     const { index, value, divider = false, disabled = false, active = false, header = false, onSelect = noop, closeMenu = noop, onMouseEnter = noop, } = props;
     if (React.isValidElement(value) && value.type === DropdownSubmenu) {

package/components/menuItems/MenuItemList.d.ts

@@ -1,7 +1,7 @@
-import React, { type HTMLProps } from 'react';
+import { type PropsWithChildren, 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>>;
+declare const MenuItemList: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<MenuItemListProps>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
 export default MenuItemList;

package/components/menuItems/MenuItems.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import MenuItemComponent from './MenuItem';
+import { noop } from 'es-toolkit/function';
+import MenuItemComponent from "./MenuItem.js";
 const MenuItems = ({ items, closeMenu = noop, onMouseEnter = noop }) => {
     return (_jsx(_Fragment, { children: items.map((item, index) => (_jsx(MenuItemComponent, { ...item, index: item.index ?? index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }, item.index ?? index))) }));
 };

package/components/navigation/AppNavigationBar.d.ts

@@ -1,4 +1,4 @@
-import React, { type MouseEvent, type ReactNode } from 'react';
+import { type MouseEvent, type ReactNode } from 'react';
 export type AppNavigationBarProps = {
     /**
      * The title for the content that is shown.
@@ -34,5 +34,5 @@ export type AppNavigationBarProps = {
      */
     className?: string;
 };
-export declare const AppNavigationBar: React.ForwardRefExoticComponent<AppNavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AppNavigationBar: import("react").ForwardRefExoticComponent<AppNavigationBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AppNavigationBar;

package/components/navigation/AppNavigationBar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import Button from '../button/Button';
+import { noop } from 'es-toolkit/function';
+import Button from "../button/Button.js";
 export const AppNavigationBar = forwardRef((props, ref) => {
     const { className, title, right = _jsx("span", {}), backButtonText = '', titleSize = 'md', subtitle, border = false, onNavigateBack = noop, ...remainingProps } = props;
     const navigationClasses = classNames('AppNavigationBar', 'width-100pct height-45 user-select-none padding-x-10', 'display-grid grid-stack align-items-center', titleSize === 'md' && 'text-size-14', titleSize === 'lg' && 'text-size-16', border && 'border border-bottom-only border-color-lighter', className);

package/components/noData/NoData.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { TooltipWidth } from '../tooltip/Tooltip';
 import { PLACEMENT } from '../../values/Placement';
 import type { ObjectValues } from '../../utils/ObjectValues';

package/components/noData/NoData.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import SimpleTooltip from '../tooltip/SimpleTooltip';
-import { PLACEMENT } from '../../values/Placement';
+import SimpleTooltip from "../tooltip/SimpleTooltip.js";
+import { PLACEMENT } from "../../values/Placement.js";
 const NoData = (props) => {
     const { text, className = '', tooltip, tooltipPlacement = PLACEMENT.BOTTOM, tooltipWidth = 'auto', ...remainingProps } = props;
     const noDataClasses = classNames('NoData', className);

package/components/notification/Notification.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5000;
 export declare const NOTIFICATION_TIMEOUT_INFINITE = 999999;
 export type NotificationOptions = {
@@ -16,13 +16,6 @@ export type NotificationOptions = {
      * A function that gets invoked when the notification is clicked.
      */
     callback?: VoidFunction;
-    /**
-     * If true, the message gets inserted at the top of the notification stack.
-     *
-     * @default false
-     * @deprecated
-     */
-    priority?: boolean;
     /**
      * Flag to enable a close button.
      *
@@ -43,10 +36,10 @@ export type NotificationOptions = {
     hideProgressBar?: boolean;
 };
 declare const Notification: {
-    default: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
-    success: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
-    info: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
-    warning: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
-    error: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    default: (message: string | React.ReactNode, options?: NotificationOptions) => import("react-toastify").Id;
+    success: (message: string | React.ReactNode, options?: NotificationOptions) => import("react-toastify").Id;
+    info: (message: string | React.ReactNode, options?: NotificationOptions) => import("react-toastify").Id;
+    warning: (message: string | React.ReactNode, options?: NotificationOptions) => import("react-toastify").Id;
+    error: (message: string | React.ReactNode, options?: NotificationOptions) => import("react-toastify").Id;
 };
 export default Notification;

package/components/notification/Notification.js

@@ -1,6 +1,4 @@
 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 React from 'react';
 import { toast, Slide } from 'react-toastify';
 export const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;
 export const NOTIFICATION_TIMEOUT_INFINITE = 999_999;
@@ -16,22 +14,8 @@ const ToastMessage = (props) => {
     const { title, message } = props;
     return (_jsx("div", { className: 'notification', children: _jsxs("div", { className: 'notification-message', role: 'alert', children: [title && _jsx("h4", { className: 'title', children: title }), _jsx("div", { className: 'message', children: message })] }) }));
 };
-const normalizeArgs = (optionsOrTitle, timeout, callback, priority) => {
-    // Handle the new options object format
-    if (optionsOrTitle && typeof optionsOrTitle === 'object' && !React.isValidElement(optionsOrTitle)) {
-        return { ...optionsOrTitle };
-    }
-    // Handle legacy format with multiple arguments
-    return {
-        title: typeof optionsOrTitle === 'string' ? optionsOrTitle : undefined,
-        timeout,
-        callback,
-        priority,
-    };
-};
 const mapOptions = (options) => {
-    const { timeout, callback, priority, // does not work like that with react-toastify, so we ignore it
-    iconClassName, closeButton = false, hideProgressBar = true, closeOnClick = true, } = options;
+    const { timeout, callback, iconClassName, closeButton = false, hideProgressBar = true, closeOnClick = true, } = options;
     return {
         ...baseOptions,
         autoClose: timeout || DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,
@@ -48,9 +32,8 @@ const mapOptions = (options) => {
     };
 };
 const Notification = (() => {
-    const notify = (type, message, optionsOrTitle, timeout, callback, priority) => {
-        // Normalize arguments
-        const { title, timeout: time, callback: cb, priority: prio, closeButton, closeOnClick, hideProgressBar, } = normalizeArgs(optionsOrTitle, timeout, callback, priority);
+    const notify = (type, message, options) => {
+        const { title, timeout: time, callback: cb, closeButton, closeOnClick, hideProgressBar } = options ?? {};
         // Map icon class names based on type
         const iconClassNames = {
             default: '',
@@ -63,7 +46,6 @@ const Notification = (() => {
             return toast(_jsx(ToastMessage, { message: message, title: title }), mapOptions({
                 timeout: time,
                 callback: cb,
-                priority: prio,
                 closeButton,
                 closeOnClick,
                 hideProgressBar,
@@ -74,7 +56,6 @@ const Notification = (() => {
         return toast[type](_jsx(ToastMessage, { message: message, title: title }), mapOptions({
             timeout: time,
             callback: cb,
-            priority: prio,
             closeButton,
             closeOnClick,
             hideProgressBar,
@@ -82,11 +63,11 @@ const Notification = (() => {
         }));
     };
     // Wrappers for specific types
-    const defaultNotification = (message, optionsOrTitle, timeout, callback, priority) => notify('default', message, optionsOrTitle, timeout, callback, priority);
-    const info = (message, optionsOrTitle, timeout, callback, priority) => notify('info', message, optionsOrTitle, timeout, callback, priority);
-    const success = (message, optionsOrTitle, timeout, callback, priority) => notify('success', message, optionsOrTitle, timeout, callback, priority);
-    const warning = (message, optionsOrTitle, timeout, callback, priority) => notify('warn', message, optionsOrTitle, timeout, callback, priority);
-    const error = (message, optionsOrTitle, timeout, callback, priority) => notify('error', message, optionsOrTitle, timeout, callback, priority);
+    const defaultNotification = (message, options) => notify('default', message, options);
+    const info = (message, options) => notify('info', message, options);
+    const success = (message, options) => notify('success', message, options);
+    const warning = (message, options) => notify('warn', message, options);
+    const error = (message, options) => notify('error', message, options);
     return {
         default: defaultNotification,
         success,

package/components/notification/NotificationsContainer.d.ts

@@ -1,10 +1,2 @@
-export type NotificationsContainerProps = {
-    /**
-     * Defines whether the notification are stacked.
-     *
-     * @deprecated
-     */
-    stacked?: boolean;
-};
-declare const NotificationsContainer: ({ stacked }: NotificationsContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const NotificationsContainer: () => import("react/jsx-runtime").JSX.Element;
 export default NotificationsContainer;

package/components/notification/NotificationsContainer.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
 import { ToastContainer } from 'react-toastify';
-const NotificationsContainer = ({ stacked }) => {
-    const wrapperClasses = classNames('notification-container-wrapper', stacked && 'stacked');
-    return (_jsx("div", { className: wrapperClasses, children: _jsx(ToastContainer, { className: 'notification-container', stacked: false, limit: 5 }) }));
+// Note:
+// With the new library we have to decide to either stack them all or to show a limit and one they are gone,
+// the remaining notifications slide in.
+const NotificationsContainer = () => {
+    return (_jsx("div", { className: 'notification-container-wrapper', children: _jsx(ToastContainer, { className: 'notification-container', stacked: false, limit: 5 }) }));
 };
 export default NotificationsContainer;

package/components/numberControl/NumberControl.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import { type NumberInputProps } from '../numberInput/NumberInput';
 export type NumberControlProps = NumberInputProps;
-declare const NumberControl: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const NumberControl: import("react").ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default NumberControl;

package/components/numberControl/NumberControl.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, forwardRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import NumberInput, { DEFAULT_STEP, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_VALUE, convertNonIntegerToDefault, } from '../numberInput/NumberInput';
+import { noop } from 'es-toolkit/function';
+import NumberInput, { DEFAULT_STEP, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_VALUE, convertNonIntegerToDefault, } from "../numberInput/NumberInput.js";
 const INITIAL_TICK = 700;
 const TICK_TIME = 50;
 const DEFAULT_DIGIT_PRECISION = 3;
 const NumberControl = forwardRef((props, ref) => {
-    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault, ...remainingProps } = props;
-    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
-    const callback = onChange || onValueChanged;
+    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onKeyDown = noop, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault, ...remainingProps } = props;
     const timeout = useRef(null);
     const [isHoldingDownInc, setIsHoldingDownInc] = useState(false);
     const [isHoldingDownDec, setIsHoldingDownDec] = useState(false);
@@ -35,8 +33,8 @@ const NumberControl = forwardRef((props, ref) => {
     }, [value]);
     // Notify external component if internal value has changed
     useEffect(() => {
-        if (internalValue !== value) {
-            callback(internalValue);
+        if (internalValue !== value && onChange) {
+            onChange(internalValue);
         }
     }, [internalValue]);
     useEffect(() => {
@@ -104,7 +102,7 @@ const NumberControl = forwardRef((props, ref) => {
         if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
             setInternalValue(Number(newValue));
         }
-        callback(newValue);
+        onChange?.(newValue);
     };
     const classes = classNames('NumberControl', className);
     const controls = (_jsxs("div", { className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding, children: [_jsx("div", { onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer', children: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) }), _jsx("div", { onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5', children: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) })] }));

package/components/numberInput/NumberInput.d.ts

@@ -60,10 +60,6 @@ export type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange
      * @param value The new value of the input.
      */
     onChange?: (value?: number) => void;
-    /**
-     * @deprecated Please use `onChange` instead.
-     */
-    onValueChanged?: (value?: number) => void;
     /**
      * Callback function that gets triggered after filtering out invalid keystrokes.
      *

package/components/numberInput/NumberInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import useAfterMount from '../../hooks/useAfterMount';
+import { noop } from 'es-toolkit/function';
+import useAfterMount from "../../hooks/useAfterMount.js";
 const DEFAULT_DIGIT_PRECISION = 3;
 export const DEFAULT_VALUE = 0;
 export const DEFAULT_STEP = 1;
@@ -58,9 +58,8 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = forwardRef((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop, onKeyDown = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '', ...remainingProps } = props;
+    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, noDefault = false, onChange, onKeyDown = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '', ...remainingProps } = props;
     const previousKeyRef = useRef('');
-    const callback = onChange || onValueChanged;
     const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);
     const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);
     const value = getValueFromProps(propValue, min, max, placeholder, noDefault);
@@ -88,7 +87,7 @@ const NumberInput = forwardRef((props, ref) => {
             return;
         }
         const enteredValue = Number(newValue);
-        const isValid = !isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;
+        const isValid = !Number.isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;
         const newValidValue = clampNumber(enteredValue, min, max);
         setState({
             value: newValidValue,
@@ -96,7 +95,7 @@ const NumberInput = forwardRef((props, ref) => {
             isValid,
         });
         // Only call back the caller for valid values
-        isValid && callback(newValidValue);
+        isValid && onChange && onChange(newValidValue);
     };
     const handleOnChange = (event) => {
         applyValue(event.target.value);
@@ -133,7 +132,7 @@ const NumberInput = forwardRef((props, ref) => {
         // since the user has finished his input
         const lastEnteredValue = state.enteredValue;
         if (lastEnteredValue === '') {
-            callback();
+            onChange?.();
             return;
         }
         // If there is no value defined and a placeholder is given or the default is not wanted,

package/components/onboarding/OnboardingTip.d.ts

@@ -56,21 +56,6 @@ export type OnboardingTipProps = {
      * @default noop
      */
     onHide: VoidFunction;
-    /**
-     * Defines whether to have a clickflow journey.
-     *
-     * @default false
-     * @deprecated Please use the "useOnboardingTour" hook instead.
-     */
-    clickflow?: boolean;
-    /**
-     * Adds a button to navigate to the previous onboarding tip when using the click flow onboarding.
-     */
-    previousButton?: OnboardingButton;
-    /**
-     * Adds a button to navigate to the next onboarding tip when using the click flow onboarding.
-     */
-    nextButton?: OnboardingButton;
     /**
      * Changes the z-index.
      *

package/components/onboarding/OnboardingTip.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import noop from 'lodash/noop';
-import Button from '../button/Button';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-import Tooltip from '../tooltip/Tooltip';
-import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
-import { PLACEMENT } from '../../values/Placement';
+import { noop } from 'es-toolkit/compat';
+import OverlayTrigger from "../overlay/OverlayTrigger.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import { TEXT_ALIGNMENT } from "../../values/TextAlignment.js";
+import { PLACEMENT } from "../../values/Placement.js";
 const OnboardingTip = (props) => {
-    const { id, show = false, placement = PLACEMENT.BOTTOM, title, content, onHide = noop, children, textAlignment = TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
-    // DEPRECATED in favor of driver.js - see useOnboardingTour hook
-    const clickFlowWithButtons = (_jsxs("div", { className: 'display-flex flex-column gap-25', children: [_jsx("div", { children: content }), _jsxs("div", { className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}`, children: [previousButton ? (_jsxs("div", { className: 'position-relative', children: [_jsx("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), _jsxs(Button, { bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick, children: [previousButton.iconName && (_jsx("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), _jsx("span", { children: previousButton.text })] })] })) : (_jsx("div", {})), nextButton ? (_jsxs(Button, { bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true, children: [_jsx("span", { children: nextButton.text }), nextButton.iconName && _jsx("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] })) : (_jsx("div", {}))] })] }));
-    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
-    const overlay = (_jsx(Tooltip, { className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true, children: _jsxs("div", { className: 'display-flex', children: [_jsxs("div", { className: 'display-flex flex-column flex-1-1', children: [title && _jsx("div", { className: 'tooltip-title', children: title }), content && _jsx("div", { className: 'tooltip-content', children: clickflow ? clickFlowWithButtons : content })] }), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] }) }));
+    const { id, show = false, placement = PLACEMENT.BOTTOM, title, content, onHide = noop, children, textAlignment = TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, className = '', width, preventOverflow = true, popperConfig, } = props;
+    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className);
+    const overlay = (_jsx(Tooltip, { className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true, children: _jsxs("div", { className: 'display-flex', children: [_jsxs("div", { className: 'display-flex flex-column flex-1-1', children: [title && _jsx("div", { className: 'tooltip-title', children: title }), content && _jsx("div", { className: 'tooltip-content', children: content })] }), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] }) }));
     const actualPopperConfig = popperConfig || {
         strategy: 'fixed',
         modifiers: [
@@ -25,6 +22,7 @@ const OnboardingTip = (props) => {
         ],
     };
     const trigger = (_jsx(OverlayTrigger, { placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig, children: children }));
+    // biome-ignore lint/complexity/noUselessFragments: fragment required
     return show ? trigger : _jsx(_Fragment, { children: children });
 };
 OnboardingTip.AUTO_START = PLACEMENT.AUTO_START;

package/components/overlay/OverlayTrigger.js

@@ -1,14 +1,13 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
-import { PLACEMENT } from '../../values/Placement';
-import { TRIGGER } from '../../values/Trigger';
-import mergeRefs from '../../utils/mergeRefs';
-import { useClickOutsideWithRef } from '../../hooks/useClickOutside';
-import { useChainedTimeout } from '../../hooks/useTimeout';
-import { useUncontrolledProp } from '../../hooks/useUncontrollable';
+import { PLACEMENT } from "../../values/Placement.js";
+import { TRIGGER } from "../../values/Trigger.js";
+import mergeRefs from "../../utils/mergeRefs.js";
+import { useClickOutsideWithRef } from "../../hooks/useClickOutside.js";
+import { useChainedTimeout } from "../../hooks/useTimeout.js";
+import { useUncontrolledProp } from "../../hooks/useUncontrollable.js";
 const OverlayTrigger = (props) => {
     const { show: propsShow, defaultShow = false, enablePortal = true, trigger = TRIGGER.HOVER, delay, overlay, placement = 'top', popperConfig, onToggle = () => { }, rootClose = true, children, } = props;
     // Use a hook to handle controlled props that work in pairs like in this case the "show"  and "onToggle"
@@ -21,7 +20,7 @@ const OverlayTrigger = (props) => {
     // React's built version is broken: https://github.com/facebook/react/issues/4251
     // for cases when the trigger is disabled and mouseOut/Over can cause flicker
     // moving from one child element to another.
-    const handleMouseOverOut = (handler, args, relatedNative) => {
+    const handleMouseOverOut = (handler, args, _relatedNative) => {
         const [event] = args;
         const target = event.currentTarget;
         const related = event.relatedTarget;
@@ -122,7 +121,7 @@ const OverlayTrigger = (props) => {
         popperConfig.placement = placement;
         // if it has an arrow modifier, inject the arrow element
         const updatedModifiers = [];
-        popperConfig.modifiers?.forEach((mod) => {
+        popperConfig.modifiers?.map((mod) => {
             if (mod.name !== 'arrow') {
                 return updatedModifiers.push(mod);
             }

package/components/page/Page.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type PageProps = {
     /**
      * Defines the width in pixel of the page. In landscape mode, the width is set as height.

package/components/pager/Pager.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { ObjectValues } from '../../utils/ObjectValues';
 export declare const PagerVariant: {
     readonly VARIANT_FULL: "full";

package/components/popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, isValidElement, useState, useEffect, } from 'react';
-import { PLACEMENT } from '../../values/Placement';
+import { PLACEMENT } from "../../values/Placement.js";
 export const PLACEMENT_MAP = {
     AUTO: PLACEMENT.AUTO,
     TOP: PLACEMENT.TOP,

package/components/preloader/ImagePreloader.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'react';
-import noop from 'lodash/noop';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { noop } from 'es-toolkit/compat';
 const loadImage = (onLoad, onError) => (src, isAnonymous) => {
     const image = new Image();
     if (isAnonymous) {
@@ -15,34 +15,37 @@ const loadImage = (onLoad, onError) => (src, isAnonymous) => {
 const ImagePreloader = (props) => {
     const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;
     const [status, setStatus] = useState('PENDING');
-    const [image, setImage] = useState();
+    const [image, setImage] = useState(null);
+    const imageRef = useRef(null);
     const willUnmount = useRef(false);
-    const handleImageLoaded = () => {
-        if (willUnmount.current) {
+    const handleImageLoaded = useCallback(() => {
+        const currentImage = imageRef.current;
+        if (willUnmount.current || !currentImage) {
             return;
         }
         setStatus('LOADED');
-        onLoaded(image);
-    };
-    const handleImageFailed = () => {
-        if (willUnmount.current) {
+        onLoaded(currentImage);
+    }, [onLoaded]);
+    const handleImageFailed = useCallback(() => {
+        const currentImage = imageRef.current;
+        if (willUnmount.current || !currentImage) {
             return;
         }
         setStatus('FAILED');
-        onFailed(image);
-    };
-    const loadImageWithCallbacks = loadImage(handleImageLoaded, handleImageFailed);
+        onFailed(currentImage);
+    }, [onFailed]);
+    const loadImageWithCallbacks = useMemo(() => loadImage(handleImageLoaded, handleImageFailed), [handleImageLoaded, handleImageFailed]);
     useEffect(() => {
-        setImage(loadImageWithCallbacks(src, isAnonymous));
+        willUnmount.current = false;
+        setStatus('PENDING');
+        const nextImage = loadImageWithCallbacks(src, isAnonymous);
+        imageRef.current = nextImage;
+        setImage(nextImage);
         return () => {
             willUnmount.current = true;
         };
-    }, []);
-    useEffect(() => {
-        setStatus('PENDING');
-        setImage(loadImageWithCallbacks(src, isAnonymous));
-    }, [src]);
-    return children ? children({ status, image: image }) : null;
+    }, [src, isAnonymous, loadImageWithCallbacks]);
+    return children && image ? children({ status, image }) : null;
 };
 ImagePreloader.STATUS_PENDING = 'PENDING';
 ImagePreloader.STATUS_LOADED = 'LOADED';

package/components/radiobutton/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type MouseEventHandler, type PropsWithChildren, type ReactNode, type Ref, HTMLProps } from 'react';
+import { type ChangeEventHandler, type MouseEventHandler, type PropsWithChildren, type ReactNode, type Ref, type HTMLProps } from 'react';
 export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick'> & {
     /**
      * Define any rioglyph icon like "rioglyph-truck".

package/components/radiobutton/RadioButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/noop';
+import { noop } from 'es-toolkit/compat';
 const RadioButtonIcon = (props) => {
     const { icon, iconSize, iconLabelPosition, text } = props;
     const iconStyles = {
@@ -41,7 +41,6 @@ const RadioButton = (props) => {
             const checkbox = labelRef.current.firstChild;
             checkbox.checked = !checkbox.checked;
         }
-        onClick(event);
     };
     const text = label || children;
     const labelClassnames = classNames('radio', inline && 'radio-inline', className);
@@ -49,7 +48,9 @@ const RadioButton = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", { className: 'radio-text', children: _jsx("span", { children: text }) })), renderCustomContent && children] }));
+    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, 
+                // Only wire onChange for controlled usage; uncontrolled relies on native state + onClick.
+                onChange: isControlled ? onChange : undefined, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", { className: 'radio-text', children: _jsx("span", { children: text }) })), renderCustomContent && children] }));
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];
 export type NoteProps = {
     version: string;

package/components/releaseNotes/ReleaseNotes.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import isArray from 'lodash/fp/isArray';
-import map from 'lodash/fp/map';
-import toPairs from 'lodash/fp/toPairs';
+import { isArray, map, toPairs } from 'es-toolkit/compat';
 const Note = (props) => {
     const { note, version } = props;
     const { date, content } = note;
-    return (_jsxs("div", { className: 'panel panel-default', children: [_jsx("div", { className: 'panel-heading', children: _jsxs("div", { className: 'display-flex justify-content-between', children: [_jsx("span", { className: 'text-size-16 text-medium', children: `${version}` }), _jsx("span", { className: 'text-thin', children: date })] }) }), _jsx("div", { className: 'panel-body white-space-pre-line', children: isArray(content) ? (_jsx("ul", { className: 'margin-bottom-0 margin-left-5 padding-left-25', children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) })) : (_jsx("div", { children: content })) })] }, `${version}-note`));
+    return (_jsxs("div", { className: 'panel panel-default', children: [_jsx("div", { className: 'panel-heading', children: _jsxs("div", { className: 'display-flex justify-content-between', children: [_jsx("span", { className: 'text-size-16 text-medium', children: `${version}` }), _jsx("span", { className: 'text-thin', children: date })] }) }), _jsx("div", { className: 'panel-body white-space-pre-line', children: isArray(content) ? (_jsx("ul", { className: 'margin-bottom-0 margin-left-5 padding-left-25', children: map(content, (item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`))) })) : (_jsx("div", { children: content })) })] }, `${version}-note`));
 };
 const ReleaseNotes = (props) => {
     const { releaseNotes, ...remainingProps } = props;
-    return (_jsx("div", { ...remainingProps, children: map(([key, note]) => (_jsx(Note, { note: note, version: key }, key)), toPairs(releaseNotes)) }));
+    return (_jsx("div", { ...remainingProps, children: map(toPairs(releaseNotes), ([key, note]) => (_jsx(Note, { note: note, version: key }, key))) }));
 };
 export default ReleaseNotes;

package/components/resizer/Resizer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 const HORIZONTAL = 'x';
 const VERTICAL = 'y';
 const LEFT = 'left';

package/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactHTML } from 'react';
+import { type ReactHTML } from 'react';
 export type ResponsiveColumnStripeProps = {
     /**
      * The minimum width in pixel of a single column.
@@ -75,7 +75,7 @@ export type ResponsiveColumnStripeProps = {
      */
     className?: string;
 };
-declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveColumnStripe: import("react").ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;