@rio-cloud/rio-uikit 1.6.0 → 1.7.0

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

@@ -18,7 +18,7 @@ const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)(value || []);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -73,17 +73,17 @@ const Multiselect = (props) => {
         if (counterMessage || renderCounterMessage) {
             return ((0, jsx_runtime_1.jsx)(MultiselectToggleCounter_1.default, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
         }
-        return ((0, jsx_runtime_1.jsx)(MultiselectToggleSelection_1.default, Object.assign({ options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter }, { children: multiline && renderFilter() })));
+        return ((0, jsx_runtime_1.jsx)(MultiselectToggleSelection_1.default, { options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter, children: multiline && renderFilter() }));
     };
     const renderToggle = () => {
         const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = (0, isEmpty_1.default)(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
-        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", { type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle, children: [showPlaceholder ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }
-        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, Object.assign({ bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace }, { children: toggleButton })));
+        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
     };
     const renderDropdownMenu = () => {
         const nonSelectedOptions = filteredOptions.map(option => {
@@ -112,7 +112,7 @@ const Multiselect = (props) => {
     };
     const onOptionChange = (currentSelectedItem) => {
         // prevent selecting disabled Items via keyboard
-        if (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.disabled) {
+        if (currentSelectedItem?.disabled) {
             return;
         }
         const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
@@ -175,7 +175,6 @@ const Multiselect = (props) => {
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
-        var _a;
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
@@ -183,10 +182,10 @@ const Multiselect = (props) => {
             setFilteredOptions(options);
             setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
             setKeyboardUsed(false);
-            (_a = refToggle === null || refToggle === void 0 ? void 0 : refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
+            refToggle?.current?.focus();
         }
     };
     const wrapperClasses = (0, classnames_1.default)('select', 'multiselect', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
 };
 exports.default = Multiselect;

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

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const MultiselectToggleCounter = (props) => {
     const { customRenderer, selectedAmount, counterMessage } = props;
     if (customRenderer) {
@@ -10,7 +8,7 @@ const MultiselectToggleCounter = (props) => {
     }
     if (counterMessage) {
         const message = selectedAmount === 1 ? counterMessage.one : counterMessage.many;
-        return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'option-counter margin-right-1' }, { children: selectedAmount })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'counter-message margin-left-1' }, { children: message }))] }));
+        return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'option-counter margin-right-1', children: selectedAmount }), (0, jsx_runtime_1.jsx)("span", { className: 'counter-message margin-left-1', children: message })] }));
     }
 };
 exports.default = MultiselectToggleCounter;

package/lib/es/components/selects/MultiselectToggleFilter.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 isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const MultiselectToggleFilter = (props) => {

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

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const MultiselectTogglePlaceholder = ({ placeholder }) => {
-    return placeholder ? (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : (0, jsx_runtime_1.jsx)("span", {});
+    return placeholder ? (0, jsx_runtime_1.jsx)("span", { className: 'placeholder', children: placeholder }) : (0, jsx_runtime_1.jsx)("span", {});
 };
 exports.default = MultiselectTogglePlaceholder;

package/lib/es/components/selects/MultiselectToggleSelection.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 isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const MultiselectToggleSelection = (props) => {
@@ -17,15 +15,15 @@ const MultiselectToggleSelection = (props) => {
     const renderSelectionItem = (item, index) => {
         if (showSelectedItemIcon) {
             const inactiveClassNames = (0, classnames_1.default)('margin-right-5', !isItemSelected(item) && 'inactiveIcon');
-            return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: inactiveClassNames }, { children: item.icon }), item.id));
+            return ((0, jsx_runtime_1.jsx)("span", { className: inactiveClassNames, children: item.icon }, item.id));
         }
-        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option' }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-label' }, { children: [item.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), item.label] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'removeIcon', onClick: event => {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: 'selected-option', children: [(0, jsx_runtime_1.jsxs)("span", { className: 'selected-label', children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: 'margin-right-5', children: item.icon }), item.label] }), (0, jsx_runtime_1.jsx)("span", { className: 'removeIcon', onClick: event => {
                         onRemoveItem(event, item.id);
-                    } }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))] }), index));
+                    }, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })] }, index));
     };
     const optionListClassNames = (0, classnames_1.default)(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list', multiline && 'flex-wrap', hasInputAddon && 'margin-left-0', hasFilter && 'padding-left-1');
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: optionListClassNames }, { children: [options
+    return ((0, jsx_runtime_1.jsxs)("span", { className: optionListClassNames, children: [options
                 .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))
-                .map((option, index) => renderSelectionItem(option, index)), children] })));
+                .map((option, index) => renderSelectionItem(option, index)), children] }));
 };
 exports.default = MultiselectToggleSelection;

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

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const NoItemMessage = (props) => {
     const { noItemMessage, className } = props;
     if (!noItemMessage) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: className, role: 'menu' }, { children: (0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'no-item-message disabled', role: 'presentation' }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'menuitem' }, { children: (0, jsx_runtime_1.jsx)("i", { children: noItemMessage }) })) })) })));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: className, role: 'menu', children: (0, jsx_runtime_1.jsx)("li", { className: 'no-item-message disabled', role: 'presentation', children: (0, jsx_runtime_1.jsx)("a", { role: 'menuitem', children: (0, jsx_runtime_1.jsx)("i", { children: noItemMessage }) }) }) }));
 };
 exports.default = NoItemMessage;

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

@@ -17,7 +17,7 @@ const SelectedOption_1 = tslib_1.__importDefault(require("./SelectedOption"));
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -63,11 +63,11 @@ const Select = (props) => {
     };
     const renderToggle = () => {
         const toggleClasses = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle }, { children: [useFilter && isOpen && ((0, jsx_runtime_1.jsx)(SelectFilter_1.default, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : ((0, jsx_runtime_1.jsx)(SelectedOption_1.default, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), (0, jsx_runtime_1.jsx)(ClearButton_1.default, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", { type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle, children: [useFilter && isOpen && ((0, jsx_runtime_1.jsx)(SelectFilter_1.default, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : ((0, jsx_runtime_1.jsx)(SelectedOption_1.default, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), (0, jsx_runtime_1.jsx)(ClearButton_1.default, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }
-        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, Object.assign({ bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace }, { children: toggleButton })));
+        return ((0, jsx_runtime_1.jsx)(WithFeedbackAndAddon_1.default, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
     };
     const renderDropdownMenu = () => {
         // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
@@ -118,7 +118,6 @@ const Select = (props) => {
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
-        var _a;
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
@@ -126,10 +125,10 @@ const Select = (props) => {
             setFilteredOptions(options);
             setKeyboardUsed(false);
             setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
-            (_a = refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
+            refToggle.current?.focus();
         }
     };
     const classes = (0, classnames_1.default)('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
 };
 exports.default = Select;

package/lib/es/components/selects/SelectFilter.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 SelectFilter = (props) => {
     const { isFilterActive, filterValue, onChange } = props;

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

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const SelectedOption = (props) => {
     const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;
     const renderUnselectedItemIcons = (optionsToRender, currentSelectedItem) => {
         const optionSpans = optionsToRender
             .filter(option => !option.header)
-            .map(option => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `margin-right-5 ${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}` }, { children: option.icon }), option.id)));
-        return (0, jsx_runtime_1.jsx)("span", { children: optionSpans });
+            .map(option => ((0, jsx_runtime_1.jsx)("span", { className: `${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`, children: option.icon }, option.id)));
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionSpans });
     };
     const getSelectedItemLabel = (item, placeholderValue) => {
         if (showUnselectedItemIcons) {
@@ -17,10 +15,10 @@ const SelectedOption = (props) => {
         }
         if (!item) {
             // render a placeholder or if there is none render a non-breaking space " "
-            return placeholderValue ? (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: placeholderValue })) : '\u00a0';
+            return placeholderValue ? (0, jsx_runtime_1.jsx)("span", { className: 'placeholder', children: placeholderValue }) : '\u00a0';
         }
-        return ((0, jsx_runtime_1.jsxs)("span", { children: [item.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), !showSelectedItemIcon && item.label] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon && (0, jsx_runtime_1.jsx)("span", { children: item.icon }), !showSelectedItemIcon && item.label] }));
     };
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option-text' }, { children: [label && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'selected-option-text-label' }, { children: [label, ":"] })), (0, jsx_runtime_1.jsx)("span", { children: getSelectedItemLabel(selectedItem, placeholder) })] })));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-text', children: [label && (0, jsx_runtime_1.jsxs)("span", { className: 'selected-option-text-label', children: [label, ":"] }), getSelectedItemLabel(selectedItem, placeholder)] }));
 };
 exports.default = SelectedOption;

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

@@ -2,14 +2,12 @@
 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 WithFeedbackAndAddon = (props) => {
     const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;
     const formGroupClassName = (0, classnames_1.default)('form-group margin-bottom-0', (errorMessage || warningMessage) && 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
     const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const hasFeedbackMessage = errorMessage || warningMessage;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formGroupClassName }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [children, hasFeedbackMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) }))] }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: formGroupClassName, children: (0, jsx_runtime_1.jsxs)("div", { className: inputGroupClassNames, children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [children, hasFeedbackMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] })] }) }));
 };
 exports.default = WithFeedbackAndAddon;

package/lib/es/components/sidebars/Sidebar.js

@@ -56,7 +56,7 @@ const animationVariants = {
     },
 };
 const Sidebar = (props) => {
-    const { fly = false, closed = false, title = '', footer, resizable = false, position, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, hasBackdrop = false, hasSmoothScrollbar = false, makeBackdropVisible = false, enableFullscreenToggle = false, fullscreenToggleTooltip, openInFullscreen = false, showHeaderBorder = false, disableClose = false, bodyRef, headerButtons, switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT, onClose = noop_1.default, onResizeEnd = noop_1.default, onFullScreenChange = noop_1.default, onBackdropClick = noop_1.default, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["fly", "closed", "title", "footer", "resizable", "position", "width", "minWidth", "maxWidth", "hasBackdrop", "hasSmoothScrollbar", "makeBackdropVisible", "enableFullscreenToggle", "fullscreenToggleTooltip", "openInFullscreen", "showHeaderBorder", "disableClose", "bodyRef", "headerButtons", "switchModeBreakpoint", "onClose", "onResizeEnd", "onFullScreenChange", "onBackdropClick", "disableEsc", "titleClassName", "bodyClassName", "headerClassName", "footerClassName", "backdropClassName", "className", "children"]);
+    const { fly = false, closed = false, title = '', footer, resizable = false, position, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, hasBackdrop = false, hasSmoothScrollbar = false, makeBackdropVisible = false, enableFullscreenToggle = false, fullscreenToggleTooltip, openInFullscreen = false, showHeaderBorder = false, disableClose = false, bodyRef, headerButtons, switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT, onClose = noop_1.default, onResizeEnd = noop_1.default, onFullScreenChange = noop_1.default, onBackdropClick = noop_1.default, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children, ...remainingProps } = props;
     const [internalWidth, setInternalWidth] = (0, react_1.useState)((0, toNumber_1.default)(width));
     const [sidebarMode, setSidebarMode] = (0, react_1.useState)(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(openInFullscreen);
@@ -76,7 +76,7 @@ const Sidebar = (props) => {
     (0, react_1.useEffect)(() => {
         if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {
             const sidebarLayout = sidebarRef.current.parentNode;
-            if (sidebarLayout === null || sidebarLayout === void 0 ? void 0 : sidebarLayout.className.includes('right')) {
+            if (sidebarLayout?.className.includes('right')) {
                 setIsRight(true);
             }
         }
@@ -118,8 +118,7 @@ const Sidebar = (props) => {
         }
     });
     const adaptSidebarMode = () => {
-        var _a;
-        const moduleContentWidth = (_a = moduleContentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const moduleContentWidth = moduleContentRef.current?.clientWidth;
         if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {
             return;
         }
@@ -154,12 +153,12 @@ const Sidebar = (props) => {
     };
     const handleResizeStart = () => {
         const body = document.body;
-        body === null || body === void 0 ? void 0 : body.classList.add('pointer-events-none');
+        body?.classList.add('pointer-events-none');
         setIsResize(true);
     };
     const handleResizeEnd = () => {
         const body = document.body;
-        body === null || body === void 0 ? void 0 : body.classList.remove('pointer-events-none');
+        body?.classList.remove('pointer-events-none');
         setIsResize(false);
         onResizeEnd();
     };
@@ -175,10 +174,10 @@ const Sidebar = (props) => {
     const resizeLimitClasses = (0, classnames_1.default)('SidebarResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
-    const sidebarContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarContent' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: headerClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassNames }, { children: title })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableFullscreenToggle && ((0, jsx_runtime_1.jsx)(SidebarFullscreenToggle_1.default, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && ((0, jsx_runtime_1.jsx)("div", { className: 'SidebarButtons-spacer' })), !disableClose && (0, jsx_runtime_1.jsx)(SidebarCloseButton_1.default, { onClick: onClose })] }))] })), hasSmoothScrollbar ? ((0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, Object.assign({ slideIn: true, className: bodyClassNames, ref: bodyRef }, { children: children }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children }))), (0, jsx_runtime_1.jsx)(SidebarFooter_1.default, { footer: footer, className: footerClassName })] })), resizable && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: isRight ? Resizer_1.default.LEFT : Resizer_1.default.RIGHT }))] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: true, exitBeforeEnter: true }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
+    const sidebarContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", { className: 'SidebarContent', children: [(0, jsx_runtime_1.jsxs)("div", { className: headerClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: titleClassNames, children: title }), (0, jsx_runtime_1.jsxs)("div", { className: 'SidebarButtons non-printable close', children: [headerButtons, enableFullscreenToggle && ((0, jsx_runtime_1.jsx)(SidebarFullscreenToggle_1.default, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && ((0, jsx_runtime_1.jsx)("div", { className: 'SidebarButtons-spacer' })), !disableClose && (0, jsx_runtime_1.jsx)(SidebarCloseButton_1.default, { onClick: onClose })] })] }), hasSmoothScrollbar ? ((0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, { slideIn: true, className: bodyClassNames, ref: bodyRef, children: children })) : ((0, jsx_runtime_1.jsx)("div", { className: bodyClassNames, ref: bodyRef, children: children })), (0, jsx_runtime_1.jsx)(SidebarFooter_1.default, { footer: footer, className: footerClassName })] }), resizable && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: isRight ? Resizer_1.default.LEFT : Resizer_1.default.RIGHT }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: true, exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ...remainingProps, initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
                     // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted
-                    exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef }, { children: sidebarContent })) })), hasBackdrop && !closed && ((0, jsx_runtime_1.jsx)(SidebarBackdrop_1.default, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
+                    exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef, children: sidebarContent }) }), hasBackdrop && !closed && ((0, jsx_runtime_1.jsx)(SidebarBackdrop_1.default, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
 };
 Sidebar.LEFT = SidebarPosition.LEFT;
 Sidebar.RIGHT = SidebarPosition.RIGHT;

package/lib/es/components/sidebars/SidebarBackdrop.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const SidebarBackdrop = ({ onClick = noop_1.default, makeBackdropVisible = false, className = '' }) => {

package/lib/es/components/sidebars/SidebarCloseButton.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const SidebarCloseButton = ({ onClick = noop_1.default }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }));
 };
 exports.default = SidebarCloseButton;

package/lib/es/components/sidebars/SidebarFooter.js

@@ -2,14 +2,12 @@
 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 SidebarFooter = ({ footer, className = '' }) => {
     if (!footer) {
         return null;
     }
     const footerClassNames = (0, classnames_1.default)('SidebarFooter', className);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: footerClassNames }, { children: footer }));
+    return (0, jsx_runtime_1.jsx)("div", { className: footerClassNames, children: footer });
 };
 exports.default = SidebarFooter;

package/lib/es/components/sidebars/SidebarFullscreenToggle.js

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
 const SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop_1.default }) => {
     const fullscreenIconClasses = (0, classnames_1.default)('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
-    const button = ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle' }, { children: (0, jsx_runtime_1.jsx)("span", { className: fullscreenIconClasses }) })));
+    const button = ((0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle', children: (0, jsx_runtime_1.jsx)("span", { className: fullscreenIconClasses }) }));
     if (tooltip) {
-        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: tooltip, placement: 'bottom' }, { children: button })));
+        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { content: tooltip, placement: 'bottom', children: button }));
     }
     return button;
 };

package/lib/es/components/slider/RangeSlider.js

@@ -12,7 +12,7 @@ const getRangeValues = (valueLeft, valueRight) => {
     return [finalLeftValue, finalRightValue];
 };
 const RangeSlider = (props) => {
-    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "color", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default, ...remainingProps } = props;
     const [activeLeft, setActiveLeft] = (0, react_1.useState)(false);
     const [activeRight, setActiveRight] = (0, react_1.useState)(false);
     const [valueLeft, setValueLeft] = (0, react_1.useState)(leftValue ? leftValue : minValue);
@@ -106,6 +106,6 @@ const RangeSlider = (props) => {
     const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
     const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) }))] }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", { className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` }, children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", { className: 'user-select-none', children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) }), (0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) })] })) }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] }));
 };
 exports.default = RangeSlider;

package/lib/es/components/slider/Slider.js

@@ -7,7 +7,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const currentColors_1 = require("../../utils/currentColors");
 const Slider = (props) => {
-    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false } = props, remainingProps = tslib_1.__rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "color", "step", "onChange", "onDragEnd", "className", "disabled"]);
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false, ...remainingProps } = props;
     const [currentValue, setCurrentValue] = (0, react_1.useState)(value ? value : minValue);
     const [isChanging, setIsChanging] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -31,6 +31,6 @@ const Slider = (props) => {
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
     const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
     const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", { className: 'range-track', style: { width: `${trackWidth}%` }, children: valueLabels && ((0, jsx_runtime_1.jsx)("div", { className: 'range-value', children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) })) }), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }));
 };
 exports.default = Slider;

package/lib/es/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -11,6 +11,6 @@ export type SmoothScrollbarsProps = {
     onScroll?: (event: React.UIEvent<any> | undefined) => void;
 };
 declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<any>>;
 export default SmoothScrollbars;

package/lib/es/components/smoothScrollbars/SmoothScrollbars.js

@@ -39,16 +39,16 @@ const SmoothScrollbars = (0, react_1.forwardRef)((componentProps, ref) => {
     const renderThumbVerticalNames = (0, classnames_1.default)('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = (0, classnames_1.default)('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = (0, classnames_1.default)('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, Object.assign({ ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: 'scrollbar-view' }));
+    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, { ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+            return (0, jsx_runtime_1.jsx)("div", { ...props, className: 'scrollbar-view' });
         }, renderTrackVertical: props => {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
+            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderTrackVerticalNames });
         }, renderThumbVertical: props => {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderThumbVerticalNames }));
+            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderThumbVerticalNames });
         }, renderTrackHorizontal: props => {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
+            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderTrackHorizontalNames });
         }, renderThumbHorizontal: props => {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
-        } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'scrollbar-content-wrapper', ref: contentRef }, { children: children })) })));
+            return (0, jsx_runtime_1.jsx)("div", { ...props, className: renderThumbHorizontalNames });
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: 'scrollbar-content-wrapper', ref: contentRef, children: children }) }));
 });
 exports.default = SmoothScrollbars;

package/lib/es/components/spinner/Spinner.js

@@ -2,25 +2,23 @@
 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 Fade_1 = tslib_1.__importDefault(require("../fade/Fade"));
 const BaseSpinner = (props) => {
-    const { isInverse, isDoubleSized } = props, remainingProps = tslib_1.__rest(props, ["isInverse", "isDoubleSized"]);
+    const { isInverse, isDoubleSized, ...remainingProps } = props;
     const className = (0, classnames_1.default)('spinner', { inverse: isInverse, double: isDoubleSized });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: className }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: className, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
 };
 const Spinner = (props) => {
-    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text } = props, remainingProps = tslib_1.__rest(props, ["isInverse", "isFullSized", "isFullScreen", "isDoubleSized", "isInline", "show", "text"]);
-    const baseSpinner = (0, jsx_runtime_1.jsx)(BaseSpinner, Object.assign({ isDoubleSized: isDoubleSized, isInverse: isInverse }, remainingProps));
+    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text, ...remainingProps } = props;
+    const baseSpinner = (0, jsx_runtime_1.jsx)(BaseSpinner, { isDoubleSized: isDoubleSized, isInverse: isInverse, ...remainingProps });
     if (isInline) {
         return baseSpinner;
     }
     const classes = (0, classnames_1.default)(['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'], { fullsized: isFullSized, fullscreen: isFullScreen });
-    const wrappedSpinner = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [baseSpinner, text && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'spinnerText' }, { children: text }))] })));
+    const wrappedSpinner = ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [baseSpinner, text && (0, jsx_runtime_1.jsx)("div", { className: 'spinnerText', children: text })] }));
     if (isFullScreen || isFullSized) {
-        return ((0, jsx_runtime_1.jsx)(Fade_1.default, Object.assign({ show: show, duration: 0.1 }, { children: wrappedSpinner })));
+        return ((0, jsx_runtime_1.jsx)(Fade_1.default, { show: show, duration: 0.1, children: wrappedSpinner }));
     }
     return wrappedSpinner;
 };

package/lib/es/components/states/BaseStateProps.js

@@ -1,4 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");

package/lib/es/components/states/CustomState.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 isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const StateButton_1 = tslib_1.__importDefault(require("./StateButton"));
@@ -19,29 +17,29 @@ const renderButtons = (buttons) => {
         return;
     }
     if (buttons.length === 1) {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[0])) })));
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar margin-top-20', children: (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[0] }) }));
     }
     if (buttons.length === 2) {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index))) })));
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttonProps }, index))) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: [(0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[0]), '1'), (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttons[1]), '2')] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
-                    return index > 1 && (0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index);
-                }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: [(0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[0] }, '1'), (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttons[1] }, '2')] }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar', children: buttons.map((buttonProps, index) => {
+                    return index > 1 && (0, jsx_runtime_1.jsx)(StateButton_1.default, { ...buttonProps }, index);
+                }) })] }));
 };
 const CustomState = (props) => {
-    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children, ...remainingProps } = props;
     const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !(0, hasUtilityClass_1.hasPaddingClass)(outerClassName) && condensed ? 'padding-10' : 'padding-15', outerClassName);
     const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', !(0, hasUtilityClass_1.hasPaddingClass)(innerClassName) && condensed ? 'padding-15' : 'padding-25', innerClassName);
     const iconClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = (0, classnames_1.default)(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');
-    const renderIcon = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconClasses }, { children: (0, jsx_runtime_1.jsx)(StateIcon_1.default, { name: icon }) })));
-    const renderIcons = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => ((0, jsx_runtime_1.jsx)(StateIcon_1.default, Object.assign({}, iconProps), index))) })));
-    const renderChildren = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'width-500 max-width-100pct margin-top-25' }, { children: children }));
-    const renderHeadline = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: headlineClassNames }, { children: headline }));
-    const renderMessage = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance' }, { children: message })));
+    const renderIcon = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon && ((0, jsx_runtime_1.jsx)("div", { className: iconClasses, children: (0, jsx_runtime_1.jsx)(StateIcon_1.default, { name: icon }) })) }));
+    const renderIcons = ((0, jsx_runtime_1.jsx)("div", { className: iconsClasses, children: icons.map((iconProps, index) => ((0, jsx_runtime_1.jsx)(StateIcon_1.default, { ...iconProps }, index))) }));
+    const renderChildren = (0, jsx_runtime_1.jsx)("div", { className: 'width-500 max-width-100pct margin-top-25', children: children });
+    const renderHeadline = (0, jsx_runtime_1.jsx)("div", { className: headlineClassNames, children: headline });
+    const renderMessage = ((0, jsx_runtime_1.jsx)("div", { className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance', children: message }));
     const singleOrMultiIcon = (0, isEmpty_1.default)(icons) ? renderIcon : renderIcons;
     const imageOrIcon = image ? image : singleOrMultiIcon;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] })) })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `display-flex ${justify[alignment]} max-width-100pct`, ...remainingProps, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: innerClassNames, children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] }) }) }));
 };
 exports.default = CustomState;