@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/checkbox/Checkbox.js

@@ -10,11 +10,10 @@ const DEFAULT_ICON_SIZE = 16;
 const ICON_LABEL_VERTICAL = 'vertical';
 const ICON_LABEL_HORIZONTAL = 'horizontal';
 const Checkbox = (props) => {
-    const { checked, children, className, custom = false, defaultChecked, disabled = false, error = false, icon = '', iconLabelPosition = ICON_LABEL_VERTICAL, iconSize = DEFAULT_ICON_SIZE, id = props.name, indeterminate = false, inline = false, inputRef, label, name, onChange = noop_1.default, onClick = noop_1.default, required = false, right, size, tabIndex = 0 } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"]);
+    const { checked, children, className, custom = false, defaultChecked, disabled = false, error = false, icon = '', iconLabelPosition = ICON_LABEL_VERTICAL, iconSize = DEFAULT_ICON_SIZE, id = props.name, indeterminate = false, inline = false, inputRef, label, name, onChange = noop_1.default, onClick = noop_1.default, required = false, right, size, tabIndex = 0, ...remainingProps } = props;
     const labelRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+        const input = labelRef.current?.firstChild;
         if (input) {
             input.indeterminate = indeterminate;
         }
@@ -34,12 +33,11 @@ const Checkbox = (props) => {
         }
     };
     const toggle = (event) => {
-        var _a;
         event.preventDefault();
         if (disabled) {
             return;
         }
-        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+        const input = labelRef.current?.firstChild;
         if (input.indeterminate) {
             input.indeterminate = false;
         }
@@ -53,7 +51,7 @@ const Checkbox = (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, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: text && (0, jsx_runtime_1.jsx)("span", { children: text }) })), renderCustomContent && children] })));
+    return ((0, jsx_runtime_1.jsxs)("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (0, jsx_runtime_1.jsx)("span", { className: 'checkbox-text', children: text && (0, jsx_runtime_1.jsx)("span", { children: text }) }), renderCustomContent && children] }));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/lib/es/components/checkbox/CheckboxIcon.js

@@ -10,6 +10,6 @@ const CheckboxIcon = (props) => {
         fontSize: `${iconSize}px`,
         lineHeight: `${iconSize}px`,
     };
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `checkbox-icon label-${iconLabelPosition}`, children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", { className: 'checkbox-label', children: text })] }));
 };
 exports.CheckboxIcon = CheckboxIcon;

package/lib/es/components/clearableInput/ClearableInput.js

@@ -16,7 +16,7 @@ exports.DEFAULT_TYPE = 'text';
 exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !(0, isEmpty_1.default)(`${value}`);
 const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
-    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, onClick = noop_1.default, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "onClick", "mask", "maskPlaceholder", "alwaysShowMask", "inputClassName", "disabled", "className", "children"]);
+    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, onClick = noop_1.default, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = (0, react_1.useState)(initialValue);
     const [showClear, setShowClear] = (0, react_1.useState)(hasValue(initialValue));
@@ -62,13 +62,25 @@ const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
     const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
     const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
     const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
-    const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
+    const convertedType = type?.toLowerCase();
     const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
-    const inputProps = Object.assign(Object.assign({}, (0, omit_1.default)(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
+    const inputProps = {
+        ...(0, omit_1.default)(['value', 'defaultValue', 'onClear'])(remainingProps),
+        className: inputClassNames,
+        autoComplete,
+        type: inputType,
+        value: inputValue,
+        onChange: handleChange,
+        onKeyPress: handleKeyPress,
+        onBlur,
         onFocus,
         onClick,
-        disabled, maxLength: hasMask ? undefined : maxLength, tabIndex, ref: inputRef || ref });
-    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, Object.assign({}, inputProps, { disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : ((0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : input, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+        disabled,
+        maxLength: hasMask ? undefined : maxLength,
+        tabIndex,
+        ref: inputRef || ref,
+    };
+    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, { ...inputProps, disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask })) : ((0, jsx_runtime_1.jsx)("input", { ...inputProps }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : input, (0, jsx_runtime_1.jsx)("span", { className: clearButtonClassNames, onClick: clearInputValue, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 exports.default = ClearableInput;

package/lib/es/components/collapse/Collapse.d.ts

@@ -5,7 +5,7 @@ type CollapseProps = {
      * @default false
      */
     open: boolean | undefined;
-    /** Deprecated, please use `show` instead. @deprecated */
+    /** Deprecated, please use `open` instead. @deprecated */
     in?: boolean;
     /**
      * Unmount the component (remove it from the DOM) when it is collapsed.

package/lib/es/components/collapse/Collapse.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 framer_motion_1 = require("framer-motion");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const DEFAULT_ANIMATION_TIME_IN_MS = 200;
@@ -23,7 +21,7 @@ const Collapse = (props) => {
         open: { opacity: 1, height: 'auto' },
         collapsed: { opacity: 0, height: 0 },
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart }, { children: children }), 'content')) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
 };
 //
 exports.default = Collapse;

package/lib/es/components/contentLoader/ContentLoader.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 react_content_loader_1 = tslib_1.__importDefault(require("react-content-loader"));
 const cond_1 = tslib_1.__importDefault(require("lodash/fp/cond"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
@@ -30,7 +28,7 @@ const renderCircle = ({ radius }) => (0, jsx_runtime_1.jsx)("circle", { cx: radi
  * @returns
  */
 const ContentLoader = (props) => {
-    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["speed", "width", "height", "radius", "type", "className", "children"]);
+    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children, ...remainingProps } = props;
     const isDarkMode = (0, useDarkMode_1.default)();
     // Since we define the default values while destructuring the props, we have to build up a new object
     // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
@@ -47,7 +45,7 @@ const ContentLoader = (props) => {
     ])(propsWithDefaults);
     const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
     const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
-    return ((0, jsx_runtime_1.jsx)(react_content_loader_1.default, Object.assign({ backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}` }, remainingProps, { children: content })));
+    return ((0, jsx_runtime_1.jsx)(react_content_loader_1.default, { backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`, ...remainingProps, children: content }));
 };
 ContentLoader.RECT = RECT;
 ContentLoader.CIRCLE = CIRCLE;

package/lib/es/components/dataTabs/DataTab.js

@@ -1,14 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const framer_motion_1 = require("framer-motion");
 const DataTab = (props) => {
     const { active = false, title, // exclude from remainingProps to avoid being set to the div element
-    tabKey, disableTransition = false, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["active", "title", "tabKey", "disableTransition", "className", "children"]);
+    tabKey, disableTransition = false, className = '', children, ...remainingProps } = props;
     if (disableTransition) {
         return (0, jsx_runtime_1.jsx)("div", { children: active && children });
     }
@@ -17,9 +14,9 @@ const DataTab = (props) => {
     }
     return (
     // @ts-ignore
-    (0, react_1.createElement)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
+    (0, react_1.createElement)(framer_motion_1.motion.div, { ...remainingProps, key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
         // TODO: added "fade in" for backwards compatibility for service tests
         // To be removed for next major version
-        className: 'fade in' }), children));
+        className: 'fade in' }, children));
 };
 exports.default = DataTab;

package/lib/es/components/dataTabs/DataTabHeader.js

@@ -8,6 +8,6 @@ const DataTabHeader = (props) => {
     const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
     const [isHovering, setIsHovering] = (0, react_1.useState)(false);
     const tabClassNames = (0, classnames_1.default)('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, (0, jsx_runtime_1.jsx)("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+    return ((0, jsx_runtime_1.jsxs)("li", { className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [title, (0, jsx_runtime_1.jsx)("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }, tabKey));
 };
 exports.default = DataTabHeader;

package/lib/es/components/dataTabs/DataTabs.js

@@ -8,10 +8,10 @@ const framer_motion_1 = require("framer-motion");
 const DataTabHeader_1 = tslib_1.__importDefault(require("./DataTabHeader"));
 const getFirstTabKey = (children) => {
     const [firstItem] = children;
-    return firstItem === null || firstItem === void 0 ? void 0 : firstItem.props.tabKey;
+    return firstItem?.props.tabKey;
 };
 const DataTabs = (props) => {
-    const { activeKey = '', bordered = true, className: wrapperClassName, commonTabContent, disableTransition = false, arrowClassName = 'bg-highlight-dark border-color-transparent', onSelectTab = () => { }, tabActiveClassName = 'bg-highlight-dark text-color-white', tabClassName = '', tabContentClassName = '', tabFirstChildClassName = '', tabHoverClassName = 'bg-highlight-decent text-color-darkest', tabLastChildClassName = '', tabsWrapperClassName = '', vertical = false, children } = props, remainingProps = tslib_1.__rest(props, ["activeKey", "bordered", "className", "commonTabContent", "disableTransition", "arrowClassName", "onSelectTab", "tabActiveClassName", "tabClassName", "tabContentClassName", "tabFirstChildClassName", "tabHoverClassName", "tabLastChildClassName", "tabsWrapperClassName", "vertical", "children"]);
+    const { activeKey = '', bordered = true, className: wrapperClassName, commonTabContent, disableTransition = false, arrowClassName = 'bg-highlight-dark border-color-transparent', onSelectTab = () => { }, tabActiveClassName = 'bg-highlight-dark text-color-white', tabClassName = '', tabContentClassName = '', tabFirstChildClassName = '', tabHoverClassName = 'bg-highlight-decent text-color-darkest', tabLastChildClassName = '', tabsWrapperClassName = '', vertical = false, children, ...remainingProps } = props;
     const [internalActiveKey, setInternalActiveKey] = (0, react_1.useState)(activeKey || getFirstTabKey(react_1.default.Children.toArray(children)));
     // Update internal activeKey when props change
     const [previousActiveKey, setPreviousActiveKey] = (0, react_1.useState)(activeKey);
@@ -20,8 +20,7 @@ const DataTabs = (props) => {
         setPreviousActiveKey(activeKey);
     }
     const handleSelectTab = (event) => {
-        var _a;
-        onSelectTab((_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('data-tabkey'));
+        onSelectTab(event.currentTarget?.getAttribute('data-tabkey'));
     };
     const wrapperClassNames = (0, classnames_1.default)('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
     const enrichChildren = () => {
@@ -41,14 +40,14 @@ const DataTabs = (props) => {
             .map(child => react_1.default.cloneElement(child, { active: true, disableTransition }));
         return (
         // @ts-ignore
-        (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: false, exitBeforeEnter: true }, { children: enhancedChildren })));
+        (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, exitBeforeEnter: true, children: enhancedChildren }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `DataTabsWrapper ${tabsWrapperClassName}` }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'DataTabs', role: 'tabList' }, { children: react_1.default.Children.map(children, (child, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: (0, jsx_runtime_1.jsx)("ul", { className: 'DataTabs', role: 'tabList', children: react_1.default.Children.map(children, (child, index) => {
                         if (!child) {
                             return null;
                         }
                         const { tabKey, title, className } = child.props;
-                        return ((0, jsx_runtime_1.jsx)(DataTabHeader_1.default, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!((children === null || children === void 0 ? void 0 : children.length) - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
-                    }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `tab-content ${tabContentClassName}`, role: 'tabpanel' }, { children: commonTabContent ? commonTabContent : enrichChildren() }))] })));
+                        return ((0, jsx_runtime_1.jsx)(DataTabHeader_1.default, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!(children?.length - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
+                    }) }) }), (0, jsx_runtime_1.jsx)("div", { className: `tab-content ${tabContentClassName}`, role: 'tabpanel', children: commonTabContent ? commonTabContent : enrichChildren() })] }));
 };
 exports.default = DataTabs;

package/lib/es/components/datepicker/DatePicker.d.ts

@@ -89,7 +89,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
     /**
      * An id used for the internal input element.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * The moment locale to be used for the date picker.
      * Make sure to import the respective moment locale files.
@@ -97,43 +97,43 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @default 'en-GB'
      * @example import 'moment/dist/locale/de';
      */
-    locale?: string | undefined;
+    locale?: string;
     /**
      * Once the day has been selected, the date picker will be closed automatically.
      *
      * @default true
      */
-    closeOnSelect?: boolean | undefined;
+    closeOnSelect?: boolean;
     /**
      * Default value of the DatePicker (date or moment).
      */
-    initialValue?: Date | Moment | undefined;
+    initialValue?: Date | Moment;
     /**
      * Value of the DatePicker (date or moment). Use this only if you want to use
      * this component as a controlled component
      */
-    value?: string | Date | Moment | undefined;
-    dateFormat?: string | boolean | undefined;
-    timeFormat?: string | boolean | undefined;
-    inputProps?: React.HTMLProps<HTMLInputElement> | undefined;
+    value?: Date | string | Moment;
+    dateFormat?: boolean | string;
+    timeFormat?: boolean | string;
+    inputProps?: React.HTMLProps<HTMLInputElement>;
     /**
      * Defines whether the dropdown opens upwards or not.
      *
      * @default false
      */
-    dropup?: boolean | undefined;
+    dropup?: boolean;
     /**
      * Opens the picker right aligned.
      *
      * @default false
      */
-    alignRight?: boolean | undefined;
+    alignRight?: boolean;
     /**
      * Defines whether the clearableInput button is shown.
      *
      * @default false
      */
-    clearableInput?: boolean | undefined;
+    clearableInput?: boolean;
     /**
      * Optional min-width value (without px). Since the DatePicker has a max-width of 100%
      * you can also set a high minWidth number to use 100% with of the parent element.
@@ -141,7 +141,7 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      *
      * @default 0
      */
-    minWidth?: number | undefined;
+    minWidth?: number;
     /**
      * Callback function when the value changes. Receives the new date (moment)
      * and a boolean (whether date is valid or not) as arguments.
@@ -150,23 +150,23 @@ declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.Datetime
      * @param isValid
      * @returns
      */
-    onChange?: ((value: Moment | string, isValid: boolean) => void) | undefined;
+    onChange?: (value: Moment | string, isValid: boolean) => void;
     /**
      * Defines whether the input shows an error when the date is invalid or cleared.
      *
      * @default true
      */
-    mandatory?: boolean | undefined;
+    mandatory?: boolean;
     /**
      * Overwrites the internal date validation function in case you need to customize it.
      *
      * @param date
      * @returns
      */
-    dateValidation?: ((date: Moment | string) => boolean) | undefined;
+    dateValidation?: (date: Moment | string) => boolean;
     /**
      * Additional classes to be set on the DatePicker element.
      */
-    className?: string | undefined;
+    className?: string;
 } & React.RefAttributes<unknown>>;
 export default DatePicker;

package/lib/es/components/datepicker/DatePicker.js

@@ -9,7 +9,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
 const DatePicker = (0, react_1.forwardRef)((props, ref) => {
-    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = tslib_1.__rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
+    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className, ...remainingProp } = props;
     const [hasError, setHasError] = (0, react_1.useState)(false);
     const validateDate = (dateToValidate) => {
         // If the entered date complies with the defined dateFormat, the Datetime component
@@ -30,10 +30,10 @@ const DatePicker = (0, react_1.forwardRef)((props, ref) => {
     const classes = (0, classnames_1.default)('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
     // This way we can expose the "id" as top level prop and not as part of the inputProps which
     // makes the use of the id much more convenient
-    const enhancedInputProps = Object.assign({ id }, inputProps);
+    const enhancedInputProps = { id, ...inputProps };
     return ((0, jsx_runtime_1.jsx)(react_datetime_1.default
     // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
     // ref={ref}
-    , Object.assign({}, remainingProp, { locale: locale, clearableInput: clearableInput, closeOnSelect: closeOnSelect, onChange: handleChange, minWidth: minWidth, inputProps: enhancedInputProps, className: classes })));
+    , { ...remainingProp, locale: locale, clearableInput: clearableInput, closeOnSelect: closeOnSelect, onChange: handleChange, minWidth: minWidth, inputProps: enhancedInputProps, className: classes }));
 });
 exports.default = DatePicker;

package/lib/es/components/datepicker/DateRangePicker.d.ts

@@ -116,82 +116,82 @@ declare namespace DateRangePicker {
     export { propTypes };
     export { defaultProps };
 }
-import React from "react";
-import moment from "moment";
+import React from 'react';
+import moment from 'moment';
 declare namespace propTypes {
-    const startValue: PropTypes.Requireable<object>;
-    const endValue: PropTypes.Requireable<object>;
-    const defaultStartValue: PropTypes.Requireable<object>;
-    const defaultEndValue: PropTypes.Requireable<object>;
-    const minValue: PropTypes.Requireable<object>;
-    const maxValue: PropTypes.Requireable<object>;
-    const onRangeChange: PropTypes.Requireable<(...args: any[]) => any>;
-    const locale: PropTypes.Requireable<string>;
-    const textDefault: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textToday: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textLastWeek: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textLastMonth: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textLastYear: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textCustom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textApply: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textCancel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textFrom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const textTo: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    const className: PropTypes.Requireable<string>;
-    const dropdownClass: PropTypes.Requireable<string>;
-    const dropdownMenuClass: PropTypes.Requireable<string>;
-    const hasTimePicker: PropTypes.Requireable<boolean>;
-    const customRangeOnly: PropTypes.Requireable<boolean>;
-    const customPresets: PropTypes.Requireable<(PropTypes.InferProps<{
+    let startValue: PropTypes.Requireable<object>;
+    let endValue: PropTypes.Requireable<object>;
+    let defaultStartValue: PropTypes.Requireable<object>;
+    let defaultEndValue: PropTypes.Requireable<object>;
+    let minValue: PropTypes.Requireable<object>;
+    let maxValue: PropTypes.Requireable<object>;
+    let onRangeChange: PropTypes.Requireable<(...args: any[]) => any>;
+    let locale: PropTypes.Requireable<string>;
+    let textDefault: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textToday: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textLastWeek: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textLastMonth: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textLastYear: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textCustom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textApply: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textCancel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textFrom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let textTo: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    let className: PropTypes.Requireable<string>;
+    let dropdownClass: PropTypes.Requireable<string>;
+    let dropdownMenuClass: PropTypes.Requireable<string>;
+    let hasTimePicker: PropTypes.Requireable<boolean>;
+    let customRangeOnly: PropTypes.Requireable<boolean>;
+    let customPresets: PropTypes.Requireable<(PropTypes.InferProps<{
         startValue: PropTypes.Validator<object>;
         endValue: PropTypes.Validator<object>;
         text: PropTypes.Validator<string>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
     }> | null | undefined)[]>;
-    const dropup: PropTypes.Requireable<boolean>;
-    const pullRight: PropTypes.Requireable<boolean>;
-    const autoDropDirection: PropTypes.Requireable<boolean>;
-    const clearable: PropTypes.Requireable<boolean>;
-    const onClear: PropTypes.Requireable<(...args: any[]) => any>;
+    let dropup: PropTypes.Requireable<boolean>;
+    let pullRight: PropTypes.Requireable<boolean>;
+    let autoDropDirection: PropTypes.Requireable<boolean>;
+    let clearable: PropTypes.Requireable<boolean>;
+    let onClear: PropTypes.Requireable<(...args: any[]) => any>;
 }
 declare namespace defaultProps {
-    const defaultStartValue_1: moment.Moment;
+    let defaultStartValue_1: moment.Moment;
     export { defaultStartValue_1 as defaultStartValue };
-    const defaultEndValue_1: moment.Moment;
+    let defaultEndValue_1: moment.Moment;
     export { defaultEndValue_1 as defaultEndValue };
-    const minValue_1: null;
+    let minValue_1: null;
     export { minValue_1 as minValue };
-    const maxValue_1: null;
+    let maxValue_1: null;
     export { maxValue_1 as maxValue };
-    const locale_1: string;
+    let locale_1: string;
     export { locale_1 as locale };
-    const textDefault_1: string;
+    let textDefault_1: string;
     export { textDefault_1 as textDefault };
-    const textToday_1: string;
+    let textToday_1: string;
     export { textToday_1 as textToday };
-    const textLastWeek_1: string;
+    let textLastWeek_1: string;
     export { textLastWeek_1 as textLastWeek };
-    const textLastMonth_1: string;
+    let textLastMonth_1: string;
     export { textLastMonth_1 as textLastMonth };
-    const textCustom_1: string;
+    let textCustom_1: string;
     export { textCustom_1 as textCustom };
-    const textFrom_1: string;
+    let textFrom_1: string;
     export { textFrom_1 as textFrom };
-    const textTo_1: string;
+    let textTo_1: string;
     export { textTo_1 as textTo };
-    const textApply_1: string;
+    let textApply_1: string;
     export { textApply_1 as textApply };
-    const textCancel_1: string;
+    let textCancel_1: string;
     export { textCancel_1 as textCancel };
-    const dropdownClass_1: string;
+    let dropdownClass_1: string;
     export { dropdownClass_1 as dropdownClass };
-    const dropdownMenuClass_1: string;
+    let dropdownMenuClass_1: string;
     export { dropdownMenuClass_1 as dropdownMenuClass };
-    const hasTimePicker_1: boolean;
+    let hasTimePicker_1: boolean;
     export { hasTimePicker_1 as hasTimePicker };
-    const customRangeOnly_1: boolean;
+    let customRangeOnly_1: boolean;
     export { customRangeOnly_1 as customRangeOnly };
-    const customPresets_1: {
+    let customPresets_1: {
         text: string;
         startValue: moment.Moment;
         endValue: moment.Moment;
@@ -199,15 +199,15 @@ declare namespace defaultProps {
     export { customPresets_1 as customPresets };
     export function onRangeChange_1(): void;
     export { onRangeChange_1 as onRangeChange };
-    const autoDropDirection_1: boolean;
+    let autoDropDirection_1: boolean;
     export { autoDropDirection_1 as autoDropDirection };
-    const dropup_1: boolean;
+    let dropup_1: boolean;
     export { dropup_1 as dropup };
-    const pullRight_1: boolean;
+    let pullRight_1: boolean;
     export { pullRight_1 as pullRight };
-    const clearable_1: boolean;
+    let clearable_1: boolean;
     export { clearable_1 as clearable };
     export function onClear_1(): undefined;
     export { onClear_1 as onClear };
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';