@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/charts/ResponsiveContainer.js

@@ -1 +1 @@
-import 'react';
+export {};

package/components/charts/XAxis.js

@@ -6,10 +6,10 @@ export const renderAxis = (axis, index) => {
     const key = `additional-axis-${index}`;
     if (React.isValidElement(axis)) {
         if (axis.type === XAxis) {
-            return _jsx(RechartsXAxis, Object.assign({}, axis.props), key);
+            return _jsx(RechartsXAxis, { ...axis.props }, key);
         }
         if (axis.type === YAxis) {
-            return _jsx(RechartsYAxis, Object.assign({}, axis.props), key);
+            return _jsx(RechartsYAxis, { ...axis.props }, key);
         }
     }
     return null;

package/components/charts/YAxis.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { YAxisProps as YAxisPropsProps } from 'recharts';
 export type YAxisProps = Omit<YAxisPropsProps, 'ref'> & {};
 declare const YAxis: React.FC<YAxisProps>;

package/components/charts/chartHelper.d.ts

@@ -6,5 +6,5 @@ export declare const defaultChartColors: string[];
 export declare const getFromDefaultColors: (index: number) => string;
 export declare const getColor: (colorKey?: string) => string | undefined;
 export declare const mapGridOptions: <T extends {
-    stroke?: string | undefined;
-}>(gridOptions?: T | undefined) => T | undefined;
+    stroke?: string;
+}>(gridOptions?: T) => T | undefined;

package/components/charts/chartHelper.js

@@ -12,7 +12,7 @@ export const mapGridOptions = (gridOptions) => {
     if (!gridOptions) {
         return;
     }
-    const mappedGridOptions = Object.assign({}, gridOptions);
+    const mappedGridOptions = { ...gridOptions };
     const { stroke } = mappedGridOptions;
     mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;
     return mappedGridOptions;

package/components/checkbox/Checkbox.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
@@ -8,11 +7,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, onClick = noop, required = false, right, size, tabIndex = 0 } = props, remainingProps = __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, onClick = noop, required = false, right, size, tabIndex = 0, ...remainingProps } = props;
     const labelRef = useRef(null);
     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;
         }
@@ -32,12 +30,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;
         }
@@ -51,7 +48,7 @@ const Checkbox = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_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 && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", Object.assign({ className: 'checkbox-text' }, { children: text && _jsx("span", { children: text }) })), renderCustomContent && children] })));
+    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_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 && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", { className: 'checkbox-text', children: text && _jsx("span", { children: text }) }), renderCustomContent && children] }));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/components/checkbox/CheckboxIcon.js

@@ -7,5 +7,5 @@ export const CheckboxIcon = (props) => {
         fontSize: `${iconSize}px`,
         lineHeight: `${iconSize}px`,
     };
-    return (_jsxs("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
+    return (_jsxs("span", { className: `checkbox-icon label-${iconLabelPosition}`, children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", { className: 'checkbox-label', children: text })] }));
 };

package/components/clearableInput/ClearableInput.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import omit from 'lodash/fp/omit';
@@ -13,7 +12,7 @@ export const DEFAULT_TYPE = 'text';
 export const SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !isEmpty(`${value}`);
 const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children } = props, remainingProps = __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 = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
@@ -59,13 +58,25 @@ const ClearableInput = forwardRef((props, ref) => {
     const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
     const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
     const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
-    const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
+    const convertedType = type?.toLowerCase();
     const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-    const inputProps = Object.assign(Object.assign({}, omit(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
+    const inputProps = {
+        ...omit(['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 ? (_jsx(InputMask, Object.assign({}, inputProps, { disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : (_jsx("input", Object.assign({}, inputProps)));
-    return (_jsxs("div", Object.assign({ className: classes }, { children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+        disabled,
+        maxLength: hasMask ? undefined : maxLength,
+        tabIndex,
+        ref: inputRef || ref,
+    };
+    const input = hasMask ? (_jsx(InputMask, { ...inputProps, disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask })) : (_jsx("input", { ...inputProps }));
+    return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 export default ClearableInput;

package/components/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/components/collapse/Collapse.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import noop from 'lodash/fp/noop';
 const DEFAULT_ANIMATION_TIME_IN_MS = 200;
@@ -20,7 +18,7 @@ const Collapse = (props) => {
         open: { opacity: 1, height: 'auto' },
         collapsed: { opacity: 0, height: 0 },
     };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && (_jsx(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 (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && (_jsx(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')) }) }));
 };
 //
 export default Collapse;

package/components/contentLoader/ContentLoader.js

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { default as _ContentLoader } from 'react-content-loader';
 import cond from 'lodash/fp/cond';
 import isNil from 'lodash/fp/isNil';
@@ -28,7 +25,7 @@ const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r:
  * @returns
  */
 const ContentLoader = (props) => {
-    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children } = props, remainingProps = __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 = useDarkMode();
     // 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
@@ -45,7 +42,7 @@ const ContentLoader = (props) => {
     ])(propsWithDefaults);
     const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
     const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
-    return (_jsx(_ContentLoader, 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 (_jsx(_ContentLoader, { 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/components/dataTabs/DataTab.js

@@ -1,12 +1,9 @@
-import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { motion } from '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 = __rest(props, ["active", "title", "tabKey", "disableTransition", "className", "children"]);
+    tabKey, disableTransition = false, className = '', children, ...remainingProps } = props;
     if (disableTransition) {
         return _jsx("div", { children: active && children });
     }
@@ -15,9 +12,9 @@ const DataTab = (props) => {
     }
     return (
     // @ts-ignore
-    _createElement(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 }, 
+    _createElement(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));
 };
 export default DataTab;

package/components/dataTabs/DataTabHeader.js

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

package/components/dataTabs/DataTabs.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import classNames from 'classnames';
@@ -6,10 +5,10 @@ import { AnimatePresence } from 'framer-motion';
 import DataTabHeader from './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 = __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] = useState(activeKey || getFirstTabKey(React.Children.toArray(children)));
     // Update internal activeKey when props change
     const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);
@@ -18,8 +17,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 = classNames('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
     const enrichChildren = () => {
@@ -39,14 +37,14 @@ const DataTabs = (props) => {
             .map(child => React.cloneElement(child, { active: true, disableTransition }));
         return (
         // @ts-ignore
-        _jsx(AnimatePresence, Object.assign({ initial: false, exitBeforeEnter: true }, { children: enhancedChildren })));
+        _jsx(AnimatePresence, { initial: false, exitBeforeEnter: true, children: enhancedChildren }));
     };
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: `DataTabsWrapper ${tabsWrapperClassName}` }, { children: _jsx("ul", Object.assign({ className: 'DataTabs', role: 'tabList' }, { children: React.Children.map(children, (child, index) => {
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: _jsx("ul", { className: 'DataTabs', role: 'tabList', children: React.Children.map(children, (child, index) => {
                         if (!child) {
                             return null;
                         }
                         const { tabKey, title, className } = child.props;
-                        return (_jsx(DataTabHeader, { 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 }));
-                    }) })) })), _jsx("div", Object.assign({ className: `tab-content ${tabContentClassName}`, role: 'tabpanel' }, { children: commonTabContent ? commonTabContent : enrichChildren() }))] })));
+                        return (_jsx(DataTabHeader, { 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 }));
+                    }) }) }), _jsx("div", { className: `tab-content ${tabContentClassName}`, role: 'tabpanel', children: commonTabContent ? commonTabContent : enrichChildren() })] }));
 };
 export default DataTabs;

package/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/components/datepicker/DatePicker.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
 import classNames from 'classnames';
@@ -7,7 +6,7 @@ import noop from 'lodash/fp/noop';
 const DEFAULT_LOCALE = 'en-GB';
 const DEFAULT_MIN_WIDTH = 0;
 const DatePicker = forwardRef((props, ref) => {
-    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = __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, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className, ...remainingProp } = props;
     const [hasError, setHasError] = useState(false);
     const validateDate = (dateToValidate) => {
         // If the entered date complies with the defined dateFormat, the Datetime component
@@ -28,10 +27,10 @@ const DatePicker = forwardRef((props, ref) => {
     const classes = classNames('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 (_jsx(Datetime
     // 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 }));
 });
 export default DatePicker;

package/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';