@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/overlay/OverlayTrigger.js

@@ -13,7 +13,6 @@ const useClickOutside_1 = require("../../hooks/useClickOutside");
 const useTimeout_1 = require("../../hooks/useTimeout");
 const useUncontrollable_1 = require("../../hooks/useUncontrollable");
 const OverlayTrigger = (props) => {
-    var _a, _b;
     const { show: propsShow, defaultShow = false, enablePortal = true, trigger = Trigger_1.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"
     // props. It returns a setter function that automatically triggers the callback.
@@ -36,7 +35,7 @@ const OverlayTrigger = (props) => {
     const handleShow = () => {
         timeout.clear();
         hoverStateRef.current = 'show';
-        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.show)) {
+        if (typeof delay === 'number' || !delay?.show) {
             setShow(true);
             return;
         }
@@ -44,12 +43,12 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'show') {
                 setShow(true);
             }
-        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.show);
+        }, typeof delay === 'number' ? delay : delay?.show);
     };
     const handleHide = () => {
         timeout.clear();
         hoverStateRef.current = 'hide';
-        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.hide)) {
+        if (typeof delay === 'number' || !delay?.hide) {
             setShow(false);
             return;
         }
@@ -57,19 +56,19 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'hide') {
                 setShow(false);
             }
-        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.hide);
+        }, typeof delay === 'number' ? delay : delay?.hide);
     };
     const handleFocus = (0, react_1.useCallback)((...args) => {
         handleShow();
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
+        onFocus?.(...args);
     }, [handleShow, onFocus]);
     const handleBlur = (0, react_1.useCallback)((...args) => {
         handleHide();
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+        onBlur?.(...args);
     }, [handleHide, onBlur]);
     const handleClick = (0, react_1.useCallback)((...args) => {
         setShow(!show);
-        onClick === null || onClick === void 0 ? void 0 : onClick(...args);
+        onClick?.(...args);
     }, [onClick, setShow, show]);
     const handleMouseOver = (0, react_1.useCallback)((...args) => {
         handleMouseOverOut(handleShow, args, 'fromElement');
@@ -82,8 +81,8 @@ const OverlayTrigger = (props) => {
     const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
     const [arrowPlacement, setArrowPlacement] = (0, react_1.useState)(placement);
     const handleClickOutside = (0, react_1.useCallback)((event) => {
-        const isToggleTarget = triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.contains(event.target);
-        const isOverlayTarget = popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(event.target);
+        const isToggleTarget = triggerNode?.contains(event.target);
+        const isOverlayTarget = popperElement?.contains(event.target);
         // Check if the click occurred outside the trigger element. Clicking on the trigger
         // itself is handled by the onClick handler
         if (show && rootClose && !isToggleTarget && !isOverlayTarget) {
@@ -126,11 +125,17 @@ const OverlayTrigger = (props) => {
         popperConfig.placement = placement;
         // if it has an arrow modifier, inject the arrow element
         const updatedModifiers = [];
-        (_a = popperConfig.modifiers) === null || _a === void 0 ? void 0 : _a.forEach((mod) => {
+        popperConfig.modifiers?.forEach((mod) => {
             if (mod.name !== 'arrow') {
                 return updatedModifiers.push(mod);
             }
-            return updatedModifiers.push(Object.assign(Object.assign({}, mod), { options: Object.assign(Object.assign({}, mod.options), { element: arrowElement }) }));
+            return updatedModifiers.push({
+                ...mod,
+                options: {
+                    ...mod.options,
+                    element: arrowElement,
+                },
+            });
         });
         popperConfig.modifiers = updatedModifiers;
     }
@@ -142,8 +147,18 @@ const OverlayTrigger = (props) => {
             // Adjust arrow styles based on placement if necessary
             setArrowPlacement(popper.state.placement);
         }
-    }, [(_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement]);
-    const overlayElement = react_1.default.cloneElement(overlay, Object.assign(Object.assign({}, popper.attributes.popper), { ref: setPopperElement, placement: arrowPlacement, style: Object.assign({}, popper.styles.popper), arrowProps: Object.assign(Object.assign({}, popper.attributes.arrow), { style: popper.styles.arrow, ref: setArrowElement }) }));
+    }, [popper.state?.placement]);
+    const overlayElement = react_1.default.cloneElement(overlay, {
+        ...popper.attributes.popper,
+        ref: setPopperElement,
+        placement: arrowPlacement,
+        style: { ...popper.styles.popper },
+        arrowProps: {
+            ...popper.attributes.arrow,
+            style: popper.styles.arrow,
+            ref: setArrowElement,
+        },
+    });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [show && (enablePortal ? react_dom_1.default.createPortal(overlayElement, document.body) : overlayElement), react_1.default.cloneElement(children, triggerProps)] }));
 };
 OverlayTrigger.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;

package/lib/es/components/page/Page.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Page = (props) => {
     const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;
@@ -16,6 +14,6 @@ const Page = (props) => {
     if (width && !isPortrait) {
         style.height = `${width}px`;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClassNames, style: style }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassNames, style: style, children: children }));
 };
 exports.default = Page;

package/lib/es/components/pager/Pager.js

@@ -10,25 +10,25 @@ exports.PagerVariant = {
     VARIANT_COMPACT: 'compact',
 };
 const Pager = (props) => {
-    const { title, label, alignRight = false, variant = exports.PagerVariant.VARIANT_FULL, disabled = false, onClick, className } = props, remainingProps = tslib_1.__rest(props, ["title", "label", "alignRight", "variant", "disabled", "onClick", "className"]);
+    const { title, label, alignRight = false, variant = exports.PagerVariant.VARIANT_FULL, disabled = false, onClick, className, ...remainingProps } = props;
     const [isHover, setIsHover] = (0, react_1.useState)(false);
     const handleEnter = () => !disabled && setIsHover(true);
     const handleLeave = () => setIsHover(false);
     const isCompactVariant = variant === Pager.VARIANT_COMPACT;
     const wrapperClassesBase = (0, classnames_1.default)('Pager', 'bg-white', 'border', 'display-flex justify-space-between align-items-center', isHover && 'border-color-highlight', alignRight && 'flex-row-reverse', disabled && 'pointer-events-none', 'cursor-pointer user-select-none');
-    const iconClassesBase = (0, classnames_1.default)('rioplyph', disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
+    const iconClassesBase = (0, classnames_1.default)('rioglyph', disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
     const titleClassesBase = (0, classnames_1.default)(disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
     // The compact version has a slightly different markup and different classes for the
     // individual parts, hence we extend the base classes
     if (isCompactVariant) {
         const wrapperClassesCompact = (0, classnames_1.default)(wrapperClassesBase, 'rounded-circle', 'padding-y-5 padding-x-15', 'width-auto', className);
         const iconClassesCompact = (0, classnames_1.default)(iconClassesBase, alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5', 'text-size-10');
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassesCompact, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}` }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassesBase }, { children: title })) })), (0, jsx_runtime_1.jsx)("span", { className: iconClassesCompact })] })));
+        return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassesCompact, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: (0, jsx_runtime_1.jsx)("div", { className: titleClassesBase, children: title }) }), (0, jsx_runtime_1.jsx)("span", { className: iconClassesCompact })] }));
     }
     const wrapperClassesFull = (0, classnames_1.default)(wrapperClassesBase, 'rounded', 'padding-y-15 padding-x-20', 'width-100pct', className);
     const iconClassesFull = (0, classnames_1.default)(iconClassesBase, alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10', 'text-size-200pct');
     const titleClassesFull = (0, classnames_1.default)(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-gray line-height-16' }, { children: label })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassesFull }, { children: title }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-12' }, { children: (0, jsx_runtime_1.jsx)("span", { className: iconClassesFull }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: [(0, jsx_runtime_1.jsx)("div", { className: 'text-color-gray line-height-16', children: label }), (0, jsx_runtime_1.jsx)("div", { className: titleClassesFull, children: title })] }), (0, jsx_runtime_1.jsx)("div", { className: 'text-size-12 display-grid place-items-center', children: (0, jsx_runtime_1.jsx)("span", { className: iconClassesFull }) })] }));
 };
 Pager.VARIANT_FULL = exports.PagerVariant.VARIANT_FULL;
 Pager.VARIANT_COMPACT = exports.PagerVariant.VARIANT_COMPACT;

package/lib/es/components/popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React, { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
+import { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
 export declare const PLACEMENT_MAP: {
     readonly AUTO: "auto";
     readonly TOP: "top";
@@ -47,11 +47,11 @@ export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
      */
     className?: string;
 };
-declare const PopoverTitle: ({ className, children }: React.PropsWithChildren<{
-    className?: string | undefined;
+declare const PopoverTitle: ({ className, children }: PropsWithChildren<{
+    className?: string;
 }>) => import("react/jsx-runtime").JSX.Element;
-declare const PopoverContent: ({ className, children }: React.PropsWithChildren<{
-    className?: string | undefined;
+declare const PopoverContent: ({ className, children }: PropsWithChildren<{
+    className?: string;
 }>) => import("react/jsx-runtime").JSX.Element;
 type PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {
     Title: typeof PopoverTitle;

package/lib/es/components/popover/Popover.js

@@ -4,7 +4,6 @@ exports.PLACEMENT_MAP = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-require("framer-motion");
 const Placement_1 = require("../../values/Placement");
 exports.PLACEMENT_MAP = {
     AUTO: Placement_1.PLACEMENT.AUTO,
@@ -13,20 +12,20 @@ exports.PLACEMENT_MAP = {
     BOTTOM: Placement_1.PLACEMENT.BOTTOM,
     LEFT: Placement_1.PLACEMENT.LEFT,
 };
-const PopoverTitle = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
-const PopoverContent = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const PopoverTitle = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", { className: `popover-header popover-title ${className}`, children: children }));
+const PopoverContent = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", { className: `popover-content popover-body ${className}`, children: children }));
 const isPopoverTitleOrContent = (element) => {
     return (0, react_1.isValidElement)(element) && (element.type === PopoverTitle || element.type === PopoverContent);
 };
 const Popover = (0, react_1.forwardRef)((props, ref) => {
-    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = tslib_1.__rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '', ...remainingProps } = props;
     const hasTitle = !!title;
     const hasCustomContent = react_1.default.Children.toArray(children).some(isPopoverTitleOrContent);
     // Mount the component but don't show it yet via CSS.
     // After it is mounted, we set the visibility class to use CSS animation
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsMounted(true), []);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && (0, jsx_runtime_1.jsx)(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : (0, jsx_runtime_1.jsx)(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: 'arrow', ...arrowProps }), hasTitle && (0, jsx_runtime_1.jsx)(PopoverTitle, { className: titleClassName, children: title }), hasCustomContent ? children : (0, jsx_runtime_1.jsx)(PopoverContent, { className: contentClassName, children: children })] }));
 });
 Popover.Title = PopoverTitle;
 Popover.Content = PopoverContent;

package/lib/es/components/position/Position.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const format = (degrees, positivePrefix, negativePrefix) => {
     const prefix = degrees >= 0 ? positivePrefix : negativePrefix;
     const absDegrees = Math.abs(degrees);
@@ -11,6 +10,6 @@ const format = (degrees, positivePrefix, negativePrefix) => {
 };
 const Position = (props) => {
     const { latitude, longitude, address } = props;
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` })));
+    return ((0, jsx_runtime_1.jsx)("span", { className: 'vehiclePositionInfo', children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` }));
 };
 exports.default = Position;

package/lib/es/components/radiobutton/RadioButton.js

@@ -13,10 +13,10 @@ const RadioButtonIcon = (props) => {
         fontSize: `${iconSize}px`,
         lineHeight: `${iconSize}px`,
     };
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `radio-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'radio-label' }, { children: text }))] })));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `radio-icon label-${iconLabelPosition}`, children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", { className: 'radio-label', children: text })] }));
 };
 const RadioButton = (props) => {
-    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop_1.default, onChange = noop_1.default, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "iconLabelPosition", "iconSize", "label", "onClick", "onChange", "checked", "defaultChecked", "disabled", "className", "inline", "right", "custom", "name", "value", "tabIndex", "inputRef", "children"]);
+    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop_1.default, onChange = noop_1.default, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children, ...remainingProps } = props;
     const isControlled = checked !== null && checked !== undefined;
     const labelRef = (0, react_1.useRef)(null);
     const handleToggleKeyDown = (event) => {
@@ -52,7 +52,7 @@ const RadioButton = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'radio-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
+    return ((0, jsx_runtime_1.jsxs)("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [(0, jsx_runtime_1.jsx)("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", { className: 'radio-text', children: (0, jsx_runtime_1.jsx)("span", { children: text }) })), renderCustomContent && children] }));
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';

package/lib/es/components/releaseNotes/ReleaseNotes.js

@@ -2,18 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
 const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
 const toPairs_1 = tslib_1.__importDefault(require("lodash/fp/toPairs"));
 const Note = (props) => {
     const { note, version } = props;
     const { date, content } = note;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'panel panel-default' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-heading' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-thin' }, { children: date }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: (0, isArray_1.default)(content) ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: (0, map_1.default)((item) => ((0, jsx_runtime_1.jsx)("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : ((0, jsx_runtime_1.jsx)("div", { children: content })) }))] }), `${version}-note`));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'panel panel-default', children: [(0, jsx_runtime_1.jsx)("div", { className: 'panel-heading', children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex justify-content-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-size-16 text-medium', children: `${version}` }), (0, jsx_runtime_1.jsx)("span", { className: 'text-thin', children: date })] }) }), (0, jsx_runtime_1.jsx)("div", { className: 'panel-body white-space-pre-line', children: (0, isArray_1.default)(content) ? ((0, jsx_runtime_1.jsx)("ul", { className: 'margin-bottom-0 margin-left-5 padding-left-25', children: (0, map_1.default)((item) => ((0, jsx_runtime_1.jsx)("li", { children: item }, `${version}-note-${Math.random()}`)), content) })) : ((0, jsx_runtime_1.jsx)("div", { children: content })) })] }, `${version}-note`));
 };
 const ReleaseNotes = (props) => {
-    const { releaseNotes } = props, remainingProps = tslib_1.__rest(props, ["releaseNotes"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { children: (0, map_1.default)(([key, note]) => ((0, jsx_runtime_1.jsx)(Note, { note: note, version: key }, key)), (0, toPairs_1.default)(releaseNotes)) })));
+    const { releaseNotes, ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, children: (0, map_1.default)(([key, note]) => ((0, jsx_runtime_1.jsx)(Note, { note: note, version: key }, key)), (0, toPairs_1.default)(releaseNotes)) }));
 };
 exports.default = ReleaseNotes;

package/lib/es/components/resizer/Resizer.js

@@ -32,7 +32,7 @@ const createListeners = (targetNode, onEnd, onMove) => {
     };
 };
 const Resizer = (props) => {
-    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop_1.default, onResize = noop_1.default, onResizeEnd = noop_1.default, children } = props, remainingProps = tslib_1.__rest(props, ["className", "direction", "position", "onResizeStart", "onResize", "onResizeEnd", "children"]);
+    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop_1.default, onResize = noop_1.default, onResizeEnd = noop_1.default, children, ...remainingProps } = props;
     const eventsRef = (0, react_1.useRef)(null);
     // Use refs here instead of local state as the move event listener fired before the state is set
     // and then it would work with outdated state at that time.
@@ -122,7 +122,7 @@ const Resizer = (props) => {
         }
     };
     const wrapperClasses = (0, classnames_1.default)('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart }, remainingProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart, ...remainingProps, children: children }));
 };
 Resizer.HORIZONTAL = HORIZONTAL;
 Resizer.VERTICAL = VERTICAL;

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -76,6 +76,6 @@ export type ResponsiveColumnStripeProps = {
     className?: string;
 };
 declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -30,7 +30,7 @@ const getFirstColumnItem = (node) => {
     return getFirstColumnItem(node.children[0]);
 };
 const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
-    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop_1.default, onNextClick = noop_1.default, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children } = props, remainingProps = tslib_1.__rest(props, ["minColumnWith", "minColumns", "maxColumns", "stretchLastItems", "activePage", "asType", "onPreviousClick", "onNextClick", "buttonClassName", "columnsWrapperClassName", "className", "disableAnimation", "children"]);
+    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop_1.default, onNextClick = noop_1.default, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children, ...remainingProps } = props;
     const [currentPage, setCurrentPage] = (0, react_1.useState)(activePage);
     const [columnsPerPage, setColumnsPerPage] = (0, react_1.useState)(maxColumns);
     const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
@@ -127,16 +127,13 @@ const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
     const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
     // Use the given custom component type "div" or any other. Clone the children to inject certain
     // properties that are required to stretch the items and deal with their size.
-    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: react_1.Children.map(columnsToDisplay, column => {
-            var _a;
-            return (0, react_1.cloneElement)(column, {
-                className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
-                // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-                'data-key': column.key,
-            });
-        }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
+    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, { className: mergedColumnsWrapperClassName, children: react_1.Children.map(columnsToDisplay, column => (0, react_1.cloneElement)(column, {
+            className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,
+            // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+            'data-key': column.key,
+        })) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", { className: previousButtonClassName, onClick: handlePrevClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
                     // @ts-ignore-next-line
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION }, { children: columns }), currentPage) })))] })), showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && ((0, jsx_runtime_1.jsx)("div", { className: nextButtonClassName, onClick: handleNextClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
 });
 exports.default = ResponsiveColumnStripe;

package/lib/es/components/rules/RuleConnector.js

@@ -2,21 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
 const commonRoundedClasses = (0, classnames_1.default)('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
 const commonRoundedBorderClippingClasses = (0, classnames_1.default)('position-relative', 'width-20', 'height-20');
 const RuleConnector = (props) => {
-    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
+    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children, ...remainingProps } = props;
     const wrapperClassNames = (0, classnames_1.default)('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
     const leftRoundedBox = (0, classnames_1.default)('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const leftRoundedBoxBorderClipping = (0, classnames_1.default)('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
     const contentWrapperClassNames = (0, classnames_1.default)('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
     const rightRoundedBox = (0, classnames_1.default)('margin-left--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const rightRoundedBoxBorderClipping = (0, classnames_1.default)('left-50pct', commonRoundedBorderClippingClasses, pageBackground);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": 'ruleConnector' }, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: leftRoundedBox }, { children: (0, jsx_runtime_1.jsx)("div", { className: leftRoundedBoxBorderClipping }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: contentWrapperClassNames }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: contentClassName }, { children: children ? children : (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: rightRoundedBox }, { children: (0, jsx_runtime_1.jsx)("div", { className: rightRoundedBoxBorderClipping }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": 'ruleConnector', ...remainingProps, className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: leftRoundedBox, children: (0, jsx_runtime_1.jsx)("div", { className: leftRoundedBoxBorderClipping }) }), (0, jsx_runtime_1.jsx)("span", { className: contentWrapperClassNames, children: (0, jsx_runtime_1.jsx)("span", { className: contentClassName, children: children ? children : (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) }) }), (0, jsx_runtime_1.jsx)("div", { className: rightRoundedBox, children: (0, jsx_runtime_1.jsx)("div", { className: rightRoundedBoxBorderClipping }) })] }));
 };
 RuleConnector.START = 'start';
 RuleConnector.CENTER = 'center';

package/lib/es/components/rules/RuleContainer.js

@@ -7,13 +7,12 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const RuleConnector_1 = tslib_1.__importDefault(require("./RuleConnector"));
 const RuleContainer = (props) => {
-    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
+    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children, ...remainingProps } = props;
     if (!show) {
         return null;
     }
     const boxClassNames = (0, classnames_1.default)('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: react_1.Children.map(children, child => {
-                        var _a;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'RuleContainer', ...remainingProps, children: [(0, jsx_runtime_1.jsx)("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: react_1.Children.map(children, child => {
                         if (!child) {
                             return null;
                         }
@@ -21,7 +20,7 @@ const RuleContainer = (props) => {
                         const childAsElement = child;
                         // In case there are multiple children of RuleContainer, use the
                         // type name or the type itself as a key to animate between the two children
-                        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = childAsElement.type) === null || _a === void 0 ? void 0 : _a.name) || childAsElement.type));
-                    }) })) })), customConnector ? customConnector : (0, jsx_runtime_1.jsx)(RuleConnector_1.default, { hidden: unchecked || hideConnector })] })));
+                        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: child }, childAsElement.type?.name || childAsElement.type));
+                    }) }) }), customConnector ? customConnector : (0, jsx_runtime_1.jsx)(RuleConnector_1.default, { hidden: unchecked || hideConnector })] }));
 };
 exports.default = RuleContainer;

package/lib/es/components/rules/RulesWrapper.js

@@ -1,14 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const framer_motion_1 = require("framer-motion");
-const RulesWrapper = (_a) => {
-    var { children } = _a, remainingProps = tslib_1.__rest(_a, ["children"]);
-    return (
-    // @ts-ignore-next-line
-    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: false, layout: true }, remainingProps, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
-};
+const RulesWrapper = ({ children, ...remainingProps }) => (
+// @ts-ignore-next-line
+(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: false, layout: true, ...remainingProps, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: 'position', children: children }) }) }));
 exports.default = RulesWrapper;

package/lib/es/components/saveableInput/SaveableInput.js

@@ -32,7 +32,7 @@ const useFocus = (isEditable) => {
 // [x] allow for unit and icon
 // [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "isValid", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
     const [oldInputValue, setOldInputValue] = (0, react_1.useState)(externalOldValue);
@@ -92,17 +92,16 @@ const SaveableInput = (props) => {
         }
     };
     const handleInputChange = (event) => {
-        var _a;
         // Only update internal value if the external "onInputChange" callback function is not defined
         // as it will be used in a controlled way
         if (onInputChange) {
             // Use type assertion to access nativeEvent.data
-            const nativeEventData = (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data;
+            const nativeEventData = event.nativeEvent?.data;
             // Whe "backspace" is used to remove a value, the nativeEventData is undefined. In this case
             // we need to use the target value for the callback otherwise the user will not be able to
             // remove a character from the input
             const currentInputValue = event.target.value;
-            onInputChange(nativeEventData !== null && nativeEventData !== void 0 ? nativeEventData : currentInputValue, event.currentTarget.value);
+            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);
             return;
         }
         setInputValue(event.target.value);
@@ -116,6 +115,6 @@ const SaveableInput = (props) => {
     const oldValueClasses = (0, classnames_1.default)('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const disableButton = (editInput && !isValid) || disabled;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group' }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit' }, { children: unit }))), showOldValue && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: oldValueClasses, "aria-label": 'previous value' }, { children: oldInputValue }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-btn' }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton }, { children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapperClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), (0, jsx_runtime_1.jsx)("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && ((0, jsx_runtime_1.jsx)("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }) }));
 };
 exports.default = SaveableInput;

package/lib/es/components/selects/BaseSelectDropdown.js

@@ -37,10 +37,10 @@ const BaseSelectDropdown = (props) => {
         if (dropdownMenuRef.current) {
             const parent = dropdownMenuRef.current.parentElement;
             if (dropDirection.dropup) {
-                parent === null || parent === void 0 ? void 0 : parent.classList.add('dropup');
+                parent?.classList.add('dropup');
             }
             else {
-                parent === null || parent === void 0 ? void 0 : parent.classList.remove('dropup');
+                parent?.classList.remove('dropup');
             }
         }
     }, [dropDirection, dropdownMenuRef]);
@@ -121,7 +121,7 @@ const BaseSelectDropdown = (props) => {
     };
     const getOptionNodes = () => {
         const node = dropdownMenuRef.current;
-        return (node === null || node === void 0 ? void 0 : node.getElementsByTagName('a')) || [];
+        return node?.getElementsByTagName('a') || [];
     };
     const updateItemDOMValues = () => {
         if (dropdownMenuRef.current) {
@@ -161,20 +161,20 @@ const BaseSelectDropdown = (props) => {
     if ((0, isEmpty_1.default)(options)) {
         return (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) }))), !isLoading &&
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu', children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: 'display-flex justify-content-center padding-10', children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })), !isLoading &&
                 options.map((option, index) => {
                     if (option.header) {
                         return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
                     }
                     // Show focused style only when keyboard is in use
-                    const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const anchorClassNames = (0, classnames_1.default)(keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none', 'display-flex align-items-center gap-3');
                     const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                    return ((0, jsx_runtime_1.jsx)("li", { className: wrapperClassNames, role: 'listitem', children: (0, jsx_runtime_1.jsxs)("a", { role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
                             // Note, we need to assign the click callback only when it's not disabled
                             // otherwise the functions is still triggered
                             // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
-                            onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
-                })] })));
+                            onClick: option.disabled ? undefined : handleOptionChange, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-dropdown-item', children: [option.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.icon }), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] }) }, option.id));
+                })] }));
 };
 const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

package/lib/es/components/selects/ClearButton.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const ClearButton = (props) => {
     const { showClear, selectedItem, onClear } = props;
     const clearButtonClassNames = (0, classnames_1.default)('clearButton', (!showClear || (0, isNil_1.default)(selectedItem)) && 'hide pointer-events-none');
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: onClear }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+    return ((0, jsx_runtime_1.jsx)("span", { className: clearButtonClassNames, onClick: onClear, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
 };
 exports.default = ClearButton;

package/lib/es/components/selects/DropdownHeader.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const DropdownHeader = (props) => {
     const { icon, label, center = true, className = '' } = props;
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''} ${className}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
+    return ((0, jsx_runtime_1.jsx)("li", { className: `dropdown-header ${center ? 'center' : ''} ${className}`, children: (0, jsx_runtime_1.jsxs)("span", { className: 'dropdown-header-text', children: [icon && (0, jsx_runtime_1.jsx)("span", { className: 'margin-right-5', children: icon }), label] }) }));
 };
 exports.default = DropdownHeader;