@rio-cloud/rio-uikit 1.6.1 → 1.7.1

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

package/components/datepicker/DateRangePicker.js

@@ -10,7 +10,7 @@ import isNull from 'lodash/fp/isNull';
 import isEqual from 'lodash/fp/isEqual';
 import DatePicker from './DatePicker';
 import getDropDirection from '../../utils/getDropDirection';
-const Placeholder = ({ text }) => _jsx("span", Object.assign({ className: 'placeholder' }, { children: text }));
+const Placeholder = ({ text }) => _jsx("span", { className: 'placeholder', children: text });
 const propTypes = {
     startValue: PropTypes.object,
     endValue: PropTypes.object,
@@ -111,8 +111,8 @@ class DateRangePicker extends Component {
             isMounted: false,
             isCustomVisible: props.customRangeOnly,
             isDropdownOpen: false,
-            customRangeStartValue: moment(customRangeStartValue),
-            customRangeEndValue: moment(customRangeEndValue),
+            customRangeStartValue: moment(customRangeStartValue), // default value for individual datepickers
+            customRangeEndValue: moment(customRangeEndValue), // default value for individual datepickers
             isStartValid: true,
             isEndValid: true,
             dropdownToggleText: _jsx(Placeholder, { text: props.textDefault }),
@@ -200,9 +200,18 @@ class DateRangePicker extends Component {
         const endValueText = `${finalEndValue.locale(locale).format(format)}`;
         const dropdownToggleText = startValueText === endValueText ? startValueText : `${startValueText} → ${endValueText}`;
         // set state, and call callback
-        this.setState(Object.assign({ internalStartValue: finalStartValue, internalEndValue: finalEndValue, customRangeStartValue: finalStartValue, customRangeEndValue: finalEndValue, dropdownToggleText,
+        this.setState({
+            internalStartValue: finalStartValue,
+            internalEndValue: finalEndValue,
+            customRangeStartValue: finalStartValue,
+            customRangeEndValue: finalEndValue,
+            dropdownToggleText,
             startValueText,
-            endValueText, isStartValid: true, isEndValid: !finalEndValue.isBefore(finalStartValue) }, extras), () => {
+            endValueText,
+            isStartValid: true,
+            isEndValid: !finalEndValue.isBefore(finalStartValue),
+            ...extras,
+        }, () => {
             callback && callback(finalStartValue, finalEndValue);
         });
     }
@@ -251,7 +260,12 @@ class DateRangePicker extends Component {
         const menuNode = ReactDOM.findDOMNode(this.refDropdownMenu);
         const dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? getDropDirection(toggleNode, menuNode) : {};
         const left = event.currentTarget.getBoundingClientRect().left;
-        this.setState(prevState => (Object.assign(Object.assign({ isDropdownOpen: !prevState.isDropdownOpen, isCustomVisible: this.props.customRangeOnly }, dropDirection), { pullRight: left + DROPDOWN_WIDTH > document.body.clientWidth })));
+        this.setState(prevState => ({
+            isDropdownOpen: !prevState.isDropdownOpen,
+            isCustomVisible: this.props.customRangeOnly,
+            ...dropDirection,
+            pullRight: left + DROPDOWN_WIDTH > document.body.clientWidth,
+        }));
     }
     isAutoDropActive() {
         return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
@@ -393,16 +407,16 @@ class DateRangePicker extends Component {
         const isRenderCallback = children && typeof children === 'function';
         // Note: due to issues with nested events in Firefox (for toggle and inside the clear)
         // the toggle element must not be a <button> but a div.
-        return (_jsxs("div", Object.assign({ type: 'button', className: 'DateRangePickerToggle form-control dropdown-toggle text-left', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: this.toggleDropdownOpen, ref: node => (this.refDropdownToggle = node) }, { children: [isRenderCallback ? (this.props.children(startValueText, endValueText)) : (_jsx("span", Object.assign({ className: labelClassNames }, { children: dropdownToggleText }))), isClearable && this.getClearButton(), _jsx("span", { className: 'caret' })] })));
+        return (_jsxs("div", { type: 'button', className: 'DateRangePickerToggle form-control dropdown-toggle text-left', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: this.toggleDropdownOpen, ref: node => (this.refDropdownToggle = node), children: [isRenderCallback ? (this.props.children(startValueText, endValueText)) : (_jsx("span", { className: labelClassNames, children: dropdownToggleText })), isClearable && this.getClearButton(), _jsx("span", { className: 'caret' })] }));
     }
     getClearButton() {
-        return (_jsx("span", Object.assign({ className: 'clearButton', onClick: this.handleResetInternalState }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+        return (_jsx("span", { className: 'clearButton', onClick: this.handleResetInternalState, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
     }
     getCustomPanelToggle(isCustomVisible, textCustom) {
-        return (_jsx("li", Object.assign({ className: classNames('custom-panel-toggle', isCustomVisible && 'hidden') }, { children: _jsxs("a", Object.assign({ role: 'button', onClick: this.handleCustomToggle }, { children: [textCustom, " ..."] })) })));
+        return (_jsx("li", { className: classNames('custom-panel-toggle', isCustomVisible && 'hidden'), children: _jsxs("a", { role: 'button', onClick: this.handleCustomToggle, children: [textCustom, " ..."] }) }));
     }
     getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
-        return (_jsx("li", Object.assign({ className: classNames('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden') }, { children: _jsxs("div", Object.assign({ className: 'btn-toolbar' }, { children: [_jsx("button", Object.assign({ type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right' }, { children: textApply })), _jsx("button", Object.assign({ type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right' }, { children: textCancel }))] })) })));
+        return (_jsx("li", { className: classNames('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden'), children: _jsxs("div", { className: 'btn-toolbar', children: [_jsx("button", { type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right', children: textApply }), _jsx("button", { type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right', children: textCancel })] }) }));
     }
     // eslint-disable-next-line complexity
     render() {
@@ -418,11 +432,11 @@ class DateRangePicker extends Component {
         }
         const classes = classNames('DateRangePicker', className && className);
         const dropDownClassNames = classNames('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
-        return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: dropDownClassNames }, { children: [this.getDropdownToggle(dropdownToggleText, clearable), _jsxs("ul", Object.assign({ className: classNames('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node) }, { children: [customPresets.map((preset, i) => {
-                                return (_jsx("li", Object.assign({ title: (preset.disabled && preset.disabledText) || null, className: classNames(preset.disabled && 'disabled') }, { children: _jsx("a", Object.assign({ role: 'button', className: classNames(isCustomVisible && 'hidden'), onClick: !preset.disabled
+        return (_jsx("div", { className: classes, children: _jsxs("div", { className: dropDownClassNames, children: [this.getDropdownToggle(dropdownToggleText, clearable), _jsxs("ul", { className: classNames('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node), children: [customPresets.map((preset, i) => {
+                                return (_jsx("li", { title: (preset.disabled && preset.disabledText) || null, className: classNames(preset.disabled && 'disabled'), children: _jsx("a", { role: 'button', className: classNames(isCustomVisible && 'hidden'), onClick: !preset.disabled
                                             ? this.handleCustomPresetSelect.bind(this, preset)
-                                            : undefined }, { children: preset.text })) }), `preset-${i}`));
-                            }), _jsx("li", { role: 'separator', className: classNames('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), _jsx("li", Object.assign({ className: classNames('custom-panel', !isCustomVisible && 'hidden') }, { children: _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsxs("div", Object.assign({ className: 'col-sm-6' }, { children: [_jsx("label", { children: textFrom }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: classNames('DatePicker', !isStartValid && 'has-error') })] })), _jsxs("div", Object.assign({ className: 'col-sm-6' }, { children: [_jsx("label", { children: textTo }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: classNames('DatePicker', !isEndValid && 'has-error') })] }))] })) })), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] }))] })) })));
+                                            : undefined, children: preset.text }) }, `preset-${i}`));
+                            }), _jsx("li", { role: 'separator', className: classNames('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), _jsx("li", { className: classNames('custom-panel', !isCustomVisible && 'hidden'), children: _jsxs("div", { className: 'row', children: [_jsxs("div", { className: 'col-sm-6', children: [_jsx("label", { children: textFrom }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: classNames('DatePicker', !isStartValid && 'has-error') })] }), _jsxs("div", { className: 'col-sm-6', children: [_jsx("label", { children: textTo }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: classNames('DatePicker', !isEndValid && 'has-error') })] })] }) }), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] })] }) }));
     }
 }
 DateRangePicker.propTypes = propTypes;

package/components/dialog/ConfirmationDialog.js

@@ -1,13 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
 import Dialog from './Dialog';
 const ConfirmationDialog = (props) => {
-    const { content, onClickCancel = noop, cancelButtonText, onClickConfirm = noop, confirmButtonText, disableConfirm } = props, remainingProps = __rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
-    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_jsx(Button, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), _jsx(Button, Object.assign({ bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm }, { children: confirmButtonText }))] })));
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true })));
+    const { content, onClickCancel = noop, cancelButtonText, onClickConfirm = noop, confirmButtonText, disableConfirm, ...remainingProps } = props;
+    const footer = (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), _jsx(Button, { bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm, children: confirmButtonText })] }));
+    return (_jsx(Dialog, { ...remainingProps, body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true }));
 };
 export default ConfirmationDialog;

package/components/dialog/Dialog.d.ts

@@ -99,8 +99,8 @@ export type DialogProps = BaseDialogProps & {
 declare const Dialog: {
     (props: PropsWithChildren<DialogProps>): React.ReactPortal;
     Title: (props: import("./DialogHeader").DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Body: ({ className, children, ...remainingProps }: React.PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
-    Footer: (props: React.PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...remainingProps }: PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
     SIZE_XS: "xs";
     SIZE_SM: "sm";
     SIZE_MD: "md";

package/components/dialog/Dialog.js

@@ -1,14 +1,12 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 import useEsc from '../../hooks/useEsc';
-import '../../hooks/useAfterMount';
 import DialogHeader from './DialogHeader';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
@@ -17,11 +15,12 @@ import { DialogContextProvider } from './dialogContext';
 const MODAL_DIALOG_CLASS = 'modal-dialog';
 const MODAL_OPEN_CLASS = 'modal-open';
 const Dialog = (props) => {
-    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children } = props, remainingProps = __rest(props, ["title", "subtitle", "body", "footer", "headerButtons", "className", "bodyClassName", "footerClassName", "showXsDialogBorders", "showCloseButton", "useOverflow", "bsSize", "show", "onHide", "onClose", "disableEsc", "onEsc", "onCloseValidation", "children"]);
+    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children, ...remainingProps } = props;
     const [open, setOpen] = useState(show);
     const dialogWrapperRef = useRef(null);
-    const onCloseCallback = onClose !== null && onClose !== void 0 ? onClose : onHide;
+    const onCloseCallback = onClose ?? onHide;
     const modalRoot = getOrCreatePortalRoot();
+    const shouldReduceMotion = useReducedMotion();
     // Use a setter function for the focus trap as it would not re-render
     // and fails to set the focus listener
     const [focusTrapRef, setFocusTrapRef] = useState();
@@ -64,7 +63,6 @@ const Dialog = (props) => {
         }
     });
     const handleAnimationComplete = (definition) => {
-        var _a;
         // The animation complete callback is invoked too when closing the dialog.
         // For that we check the animation props like the "opacity" to skip focusing
         // on the way out when closing the dialog.
@@ -78,8 +76,8 @@ const Dialog = (props) => {
         // elements like inputs would lose their focus to the dialog.
         // Note that in order to focus the dialog itself, the tabindex has to be set on that element
         // IMPORTANT: make sure the dialog has a tabIndex prop
-        if (!(dialogElement === null || dialogElement === void 0 ? void 0 : dialogElement.contains(currentActiveElement))) {
-            (_a = dialogWrapperRef === null || dialogWrapperRef === void 0 ? void 0 : dialogWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (!dialogElement?.contains(currentActiveElement)) {
+            dialogWrapperRef?.current?.focus();
         }
     };
     const modalClasses = classNames('modal', 'show', className);
@@ -96,22 +94,24 @@ const Dialog = (props) => {
         damping: 25,
         stiffness: 400,
     };
-    return ReactDOM.createPortal(_jsx(DialogContextProvider, Object.assign({ value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton } }, { children: _jsx(AnimatePresence
+    return ReactDOM.createPortal(_jsx(DialogContextProvider, { value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }, children: _jsx(AnimatePresence
         // Disable any initial animations on children that
         // are present when the component is first rendered
-        , Object.assign({ 
+        , { 
             // Disable any initial animations on children that
             // are present when the component is first rendered
             initial: false, 
             // Only render one component at a time.
             // The exiting component will finish its exit
             // animation before entering component is rendered
-            exitBeforeEnter: true }, { children: open && (_jsxs("div", Object.assign({}, remainingProps, { className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
+            exitBeforeEnter: true, children: open && (_jsxs("div", { ...remainingProps, className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
                 // Make sure it has a tabIndex to focus the dialog so the close on esc works.
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>
-                tabIndex: 0 }, { children: [_jsx(motion.div, Object.assign({ initial: { opacity: 0, y: '-50%' }, animate: { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: { opacity: 0, y: '-150%' }, transition: { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
+                tabIndex: 0, children: [_jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0, y: '-50%' }, animate: shouldReduceMotion
+                            ? { opacity: 1 }
+                            : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }, transition: shouldReduceMotion ? { duration: 0 } : { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
                         // @ts-ignore
-                        ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: _jsxs("div", Object.assign({ className: 'modal-content' }, { children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, Object.assign({ className: bodyClassName }, { children: body })), footer && _jsx(DialogFooter, Object.assign({ className: footerClassName }, { children: footer }))] }))] })) })), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.1 }, className: 'modal-backdrop' })] }))) })) })), modalRoot);
+                        ref: setFocusTrapRef, className: modalDialogClasses, role: 'document', children: _jsxs("div", { className: 'modal-content', children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, { className: bodyClassName, children: body }), footer && _jsx(DialogFooter, { className: footerClassName, children: footer })] }))] }) }), _jsx(motion.div, { initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: shouldReduceMotion ? undefined : { opacity: 0 }, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }, className: 'modal-backdrop' })] })) }) }), modalRoot);
 };
 Dialog.Title = DialogHeader;
 Dialog.Body = DialogBody;

package/components/dialog/DialogBody.js

@@ -1,11 +1,7 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
-const DialogBody = (_a) => {
-    var { className = '', children } = _a, remainingProps = __rest(_a, ["className", "children"]);
+const DialogBody = ({ className = '', children, ...remainingProps }) => {
     const classes = classNames('modal-body', className);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: classes, "aria-label": 'dialog body' }, { children: children })));
+    return (_jsx("div", { ...remainingProps, className: classes, "aria-label": 'dialog body', children: children }));
 };
 export default DialogBody;

package/components/dialog/DialogFooter.js

@@ -1,14 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { useDialogContext } from './dialogContext';
 const DialogFooter = (props) => {
-    const { className = '', children } = props, remainingProps = __rest(props, ["className", "children"]);
+    const { className = '', children, ...remainingProps } = props;
     const { isSmallestDialog, showXsDialogBorders } = useDialogContext();
     const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
     const footerClassNames = classNames('modal-footer', !doShowXsDialogBorders && 'border-top-none padding-top-0', className);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: footerClassNames, "aria-label": 'dialog footer' }, { children: children })));
+    return (_jsx("div", { ...remainingProps, className: footerClassNames, "aria-label": 'dialog footer', children: children }));
 };
 export default DialogFooter;

package/components/dialog/DialogHeader.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import noop from 'lodash/fp/noop';
 import classNames from 'classnames';
 import { useDialogContext } from './dialogContext';
 const DialogHeader = (props) => {
-    const { title, subtitle, headerButtons, onCloseButtonClick = noop } = props, remainingProps = __rest(props, ["title", "subtitle", "headerButtons", "onCloseButtonClick"]);
+    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;
     const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();
     const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
     const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
@@ -15,6 +14,6 @@ const DialogHeader = (props) => {
         onCloseButtonClick(event);
         onClose(event);
     };
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: headerClasses, "aria-label": 'dialog header' }, { children: [_jsxs("div", Object.assign({ className: headerTextClasses }, { children: [subtitle && _jsx("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), _jsx("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), _jsxs("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_jsx("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: handleClose, "data-testid": 'close', "aria-label": 'dialog close button' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
+    return (_jsxs("div", { ...remainingProps, className: headerClasses, "aria-label": 'dialog header', children: [_jsxs("div", { className: headerTextClasses, children: [subtitle && _jsx("div", { className: 'modal-header-subtitle', children: subtitle }), _jsx("div", { className: 'modal-header-title', children: title })] }), _jsxs("div", { className: 'modal-header-buttons', children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_jsx("button", { type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: handleClose, "data-testid": 'close', "aria-label": 'dialog close button', children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) }))] })] }));
 };
 export default DialogHeader;

package/components/dialog/FrameDialog.js

@@ -34,9 +34,9 @@ const FrameDialog = (props) => {
         }
     });
     const dialogClassName = `frame-dialog ${className}`;
-    return (_jsx(Dialog, Object.assign({}, dialogProps, { show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: _jsx(IframeResizer, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
+    return (_jsx(Dialog, { ...dialogProps, show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: _jsx(IframeResizer, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
         // Note: closing the dialog with escape is disabled by default.
         // The widget would need to handle the 'esc' event and send a message to close it
-        disableEsc: true, className: dialogClassName })));
+        disableEsc: true, className: dialogClassName }));
 };
 export default FrameDialog;

package/components/dialog/InfoDialog.js

@@ -1,11 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import Dialog from './Dialog';
 const InfoDialog = (props) => {
-    const { content, className } = props, remainingProps = __rest(props, ["content", "className"]);
+    const { content, className, ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} info-dialog`;
-    return _jsx(Dialog, Object.assign({}, remainingProps, { body: content, className: dialogClassName }));
+    return _jsx(Dialog, { ...remainingProps, body: content, className: dialogClassName });
 };
 export default InfoDialog;

package/components/dialog/MediaDialog.js

@@ -1,5 +1,4 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
@@ -8,7 +7,7 @@ import ResponsiveVideo from '../video/ResponsiveVideo';
 import ImagePreloader from '../preloader/ImagePreloader';
 import Spinner from '../spinner/Spinner';
 const MediaDialog = (props) => {
-    const { show = false, onClose = noop, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop, nextButtonText = 'Next', nextButtonCallback = noop, className } = props, remainingProps = __rest(props, ["show", "onClose", "disableEsc", "useOverflow", "bsSize", "media", "previousButtonText", "previousButtonCallback", "nextButtonText", "nextButtonCallback", "className"]);
+    const { show = false, onClose = noop, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop, nextButtonText = 'Next', nextButtonCallback = noop, className, ...remainingProps } = props;
     const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
     const handlePrevious = () => {
         const oldIndex = currentMediaIndex;
@@ -23,13 +22,13 @@ const MediaDialog = (props) => {
         nextButtonCallback(newIndex);
     };
     const renderFallback = () => {
-        return (_jsx("div", Object.assign({ className: 'text-center text-size-h3' }, { children: _jsx("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) })));
+        return (_jsx("div", { className: 'text-center text-size-h3', children: _jsx("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) }));
     };
     const renderImage = (mediaData) => {
         const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);
         return (
         // @ts-ignore
-        _jsx(ImagePreloader, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
+        _jsx(ImagePreloader, { src: mediaData.src, className: imageClassNames, children: ({ status, image }) => {
                 if (status === ImagePreloader.STATUS_LOADED) {
                     // When image has been loaded, render the image tag
                     return _jsx("img", { className: 'ani-fade-in', src: image.src }, image.src);
@@ -38,12 +37,11 @@ const MediaDialog = (props) => {
                     return renderFallback();
                 }
                 return _jsx(Spinner, { isInverse: false });
-            } })));
+            } }));
     };
     const renderVideo = (mediaData) => {
-        var _a;
         const videoClassNames = classNames(mediaData.className && mediaData.className);
-        return (_jsx("div", Object.assign({ className: 'flex-1-0' }, { children: _jsx(ResponsiveVideo, { src: mediaData.src, aspectRatio: (_a = mediaData.aspectRatio) !== null && _a !== void 0 ? _a : '16by9', className: videoClassNames }) })));
+        return (_jsx("div", { className: 'flex-1-0', children: _jsx(ResponsiveVideo, { src: mediaData.src, aspectRatio: mediaData.aspectRatio ?? '16by9', className: videoClassNames }) }));
     };
     const renderMediaContent = (mediaData = {}) => {
         if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
@@ -57,7 +55,7 @@ const MediaDialog = (props) => {
     const mediaContentClassNames = classNames('media-content', 'content-center');
     const mediaTitle = media[currentMediaIndex].title;
     const mediaSubtitle = media[currentMediaIndex].subtitle || null;
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: _jsx("div", Object.assign({ className: mediaContentClassNames }, { children: renderMediaContent(media[currentMediaIndex]) })), footer: (media === null || media === void 0 ? void 0 : media.length) > 1 && (_jsxs("div", Object.assign({ className: 'position-relative clearfix' }, { children: [_jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] })), _jsx("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${currentMediaIndex + 1} / ${props.media.length}` })), _jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: handleNext }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] }))] }))), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize })));
+    return (_jsx(Dialog, { ...remainingProps, show: show, title: mediaTitle, subtitle: mediaSubtitle, body: _jsx("div", { className: mediaContentClassNames, children: renderMediaContent(media[currentMediaIndex]) }), footer: media?.length > 1 && (_jsxs(_Fragment, { children: [_jsxs("button", { type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious, children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] }), _jsx("div", { children: `${currentMediaIndex + 1} / ${props.media.length}` }), _jsxs("button", { type: 'button', className: 'btn btn-primary btn-link btn-icon-right', onClick: handleNext, children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] })] })), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize }));
 };
 MediaDialog.MEDIA_TYPE_IMAGE = 'image';
 MediaDialog.MEDIA_TYPE_VIDEO = 'video';

package/components/dialog/OnboardingDialog.js

@@ -1,12 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import Dialog from './Dialog';
 import Button from '../button/Button';
 const OnboardingDialog = (props) => {
-    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = (_jsxs("span", { children: [_jsx("span", Object.assign({ className: 'text-medium' }, { children: "Get started with a quick tour to explore UIKIT and discover its key features." })), ' ', _jsx("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour' } = props, remainingProps = __rest(props, ["className", "show", "onClose", "onStartTour", "imageSrc", "imageAlt", "title", "description", "onboardingRestartHint", "onboardingRestartDescription", "skipButtonText", "tourButtonText"]);
+    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = (_jsxs("span", { children: [_jsx("span", { className: 'text-medium', children: "Get started with a quick tour to explore UIKIT and discover its key features." }), ' ', _jsx("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour', ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} onboarding-dialog`;
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: _jsxs("div", { children: [_jsx("div", { children: _jsx("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), _jsxs("div", Object.assign({ className: 'position-relative padding-20 margin-top-10 margin-x-20' }, { children: [_jsx("div", Object.assign({ className: 'margin-bottom-15 margin-right-20 text-color-darkest' }, { children: _jsx("div", Object.assign({ className: 'text-size-h3 text-medium' }, { children: title })) })), _jsx("div", Object.assign({ className: 'text-color-darker' }, { children: _jsx("p", Object.assign({ className: 'text-size-16' }, { children: description })) })), _jsxs("div", Object.assign({ className: 'text-color-darker' }, { children: [_jsx("div", Object.assign({ className: 'margin-top-25 text-medium' }, { children: onboardingRestartHint })), _jsx("p", Object.assign({ className: 'text-color-darker padding-bottom-15 margin-top-5' }, { children: onboardingRestartDescription }))] })), _jsxs("div", Object.assign({ className: 'btn-toolbar justify-content-end margin-y-20' }, { children: [_jsx(Button, Object.assign({ bsStyle: Button.MUTED, onClick: onClose }, { children: skipButtonText })), _jsx(Button, Object.assign({ bsStyle: Button.PRIMARY, onClick: onStartTour }, { children: tourButtonText }))] }))] }))] }) })));
+    return (_jsx(Dialog, { ...remainingProps, show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: _jsxs("div", { children: [_jsx("div", { children: _jsx("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), _jsxs("div", { className: 'position-relative padding-20 margin-top-10 margin-x-20', children: [_jsx("div", { className: 'margin-bottom-15 margin-right-20 text-color-darkest', children: _jsx("div", { className: 'text-size-h3 text-medium', children: title }) }), _jsx("div", { className: 'text-color-darker', children: _jsx("p", { className: 'text-size-16', children: description }) }), _jsxs("div", { className: 'text-color-darker', children: [_jsx("div", { className: 'margin-top-25 text-medium', children: onboardingRestartHint }), _jsx("p", { className: 'text-color-darker padding-bottom-15 margin-top-5', children: onboardingRestartDescription })] }), _jsxs("div", { className: 'btn-toolbar justify-content-end margin-y-20', children: [_jsx(Button, { bsStyle: Button.MUTED, onClick: onClose, children: skipButtonText }), _jsx(Button, { bsStyle: Button.PRIMARY, onClick: onStartTour, children: tourButtonText })] })] })] }) }));
 };
 export default OnboardingDialog;

package/components/dialog/ReleaseNotesDialog.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import ReleaseNotes from '../releaseNotes/ReleaseNotes';
 import Button from '../button/Button';
 import Dialog from './Dialog';
@@ -11,6 +9,6 @@ const setReleaseNotesItem = (props) => {
 const getModuleName = (moduleName, whatsNew) => (_jsx("span", { children: moduleName ? moduleName : whatsNew }));
 const ReleaseNotesDialog = (props) => {
     const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
-    return (_jsx(Dialog, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: _jsx(ReleaseNotes, { releaseNotes: translatedReleaseNotes }), footer: _jsx(Button, Object.assign({ onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })), onClose: () => setReleaseNotesItem(props) }));
+    return (_jsx(Dialog, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: _jsx(ReleaseNotes, { releaseNotes: translatedReleaseNotes }), footer: _jsx(Button, { onClick: () => setReleaseNotesItem(props), children: closeButtonText || 'Close' }), onClose: () => setReleaseNotesItem(props) }));
 };
 export default ReleaseNotesDialog;

package/components/dialog/SaveDialog.js

@@ -1,13 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
 import Dialog from './Dialog';
 const SaveDialog = (props) => {
-    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop, onClickCancel = noop, onClickConfirm = noop } = props, remainingProps = __rest(props, ["showCloseButton", "content", "discardButtonText", "cancelButtonText", "confirmButtonText", "onClickDiscard", "onClickCancel", "onClickConfirm"]);
-    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_jsx(Button, Object.assign({ className: 'DiscardButton', onClick: onClickDiscard }, { children: discardButtonText })), _jsx(Button, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), _jsx(Button, Object.assign({ className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true })));
+    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop, onClickCancel = noop, onClickConfirm = noop, ...remainingProps } = props;
+    const footer = (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { className: 'DiscardButton', onClick: onClickDiscard, children: discardButtonText }), _jsx(Button, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), _jsx(Button, { className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm, children: confirmButtonText })] }));
+    return (_jsx(Dialog, { ...remainingProps, showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true }));
 };
 export default SaveDialog;

package/components/dialog/SimpleDialog.js

@@ -1,14 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import Dialog from './Dialog';
 /*
  * Component to show a modal popup containing a title, a content and a close handler.
  */
 const SimpleDialog = (props) => {
-    const { content, showCloseButton = true, className } = props, remainingProps = __rest(props, ["content", "showCloseButton", "className"]);
+    const { content, showCloseButton = true, className, ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} simple-dialog`;
-    return _jsx(Dialog, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, className: dialogClassName }));
+    return _jsx(Dialog, { ...remainingProps, showCloseButton: showCloseButton, body: content, className: dialogClassName });
 };
 export default SimpleDialog;