@rio-cloud/rio-uikit 1.6.0 → 1.7.0

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

@@ -14,7 +14,7 @@ const isNull_1 = tslib_1.__importDefault(require("lodash/fp/isNull"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
 const DatePicker_1 = tslib_1.__importDefault(require("./DatePicker"));
 const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
-const Placeholder = ({ text }) => (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: text }));
+const Placeholder = ({ text }) => (0, jsx_runtime_1.jsx)("span", { className: 'placeholder', children: text });
 const propTypes = {
     startValue: prop_types_1.default.object,
     endValue: prop_types_1.default.object,
@@ -115,8 +115,8 @@ class DateRangePicker extends react_1.Component {
             isMounted: false,
             isCustomVisible: props.customRangeOnly,
             isDropdownOpen: false,
-            customRangeStartValue: (0, moment_1.default)(customRangeStartValue),
-            customRangeEndValue: (0, moment_1.default)(customRangeEndValue),
+            customRangeStartValue: (0, moment_1.default)(customRangeStartValue), // default value for individual datepickers
+            customRangeEndValue: (0, moment_1.default)(customRangeEndValue), // default value for individual datepickers
             isStartValid: true,
             isEndValid: true,
             dropdownToggleText: (0, jsx_runtime_1.jsx)(Placeholder, { text: props.textDefault }),
@@ -204,9 +204,18 @@ class DateRangePicker extends react_1.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);
         });
     }
@@ -255,7 +264,12 @@ class DateRangePicker extends react_1.Component {
         const menuNode = react_dom_1.default.findDOMNode(this.refDropdownMenu);
         const dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? (0, getDropDirection_1.default)(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);
@@ -397,16 +411,16 @@ class DateRangePicker extends react_1.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 ((0, jsx_runtime_1.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)) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: labelClassNames }, { children: dropdownToggleText }))), isClearable && this.getClearButton(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+        return ((0, jsx_runtime_1.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)) : ((0, jsx_runtime_1.jsx)("span", { className: labelClassNames, children: dropdownToggleText })), isClearable && this.getClearButton(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
     }
     getClearButton() {
-        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'clearButton', onClick: this.handleResetInternalState }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+        return ((0, jsx_runtime_1.jsx)("span", { className: 'clearButton', onClick: this.handleResetInternalState, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
     }
     getCustomPanelToggle(isCustomVisible, textCustom) {
-        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel-toggle', isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'button', onClick: this.handleCustomToggle }, { children: [textCustom, " ..."] })) })));
+        return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('custom-panel-toggle', isCustomVisible && 'hidden'), children: (0, jsx_runtime_1.jsxs)("a", { role: 'button', onClick: this.handleCustomToggle, children: [textCustom, " ..."] }) }));
     }
     getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
-        return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right' }, { children: textApply })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right' }, { children: textCancel }))] })) })));
+        return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden'), children: (0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)("button", { type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right', children: textApply }), (0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right', children: textCancel })] }) }));
     }
     // eslint-disable-next-line complexity
     render() {
@@ -422,11 +436,11 @@ class DateRangePicker extends react_1.Component {
         }
         const classes = (0, classnames_1.default)('DateRangePicker', className && className);
         const dropDownClassNames = (0, classnames_1.default)('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: dropDownClassNames }, { children: [this.getDropdownToggle(dropdownToggleText, clearable), (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node) }, { children: [customPresets.map((preset, i) => {
-                                return ((0, jsx_runtime_1.jsx)("li", Object.assign({ title: (preset.disabled && preset.disabledText) || null, className: (0, classnames_1.default)(preset.disabled && 'disabled') }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button', className: (0, classnames_1.default)(isCustomVisible && 'hidden'), onClick: !preset.disabled
+        return ((0, jsx_runtime_1.jsx)("div", { className: classes, children: (0, jsx_runtime_1.jsxs)("div", { className: dropDownClassNames, children: [this.getDropdownToggle(dropdownToggleText, clearable), (0, jsx_runtime_1.jsxs)("ul", { className: (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node), children: [customPresets.map((preset, i) => {
+                                return ((0, jsx_runtime_1.jsx)("li", { title: (preset.disabled && preset.disabledText) || null, className: (0, classnames_1.default)(preset.disabled && 'disabled'), children: (0, jsx_runtime_1.jsx)("a", { role: 'button', className: (0, classnames_1.default)(isCustomVisible && 'hidden'), onClick: !preset.disabled
                                             ? this.handleCustomPresetSelect.bind(this, preset)
-                                            : undefined }, { children: preset.text })) }), `preset-${i}`));
-                            }), (0, jsx_runtime_1.jsx)("li", { role: 'separator', className: (0, classnames_1.default)('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)('custom-panel', !isCustomVisible && 'hidden') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'row' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'col-sm-6' }, { children: [(0, jsx_runtime_1.jsx)("label", { children: textFrom }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: (0, classnames_1.default)('DatePicker', !isStartValid && 'has-error') })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'col-sm-6' }, { children: [(0, jsx_runtime_1.jsx)("label", { children: textTo }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: (0, classnames_1.default)('DatePicker', !isEndValid && 'has-error') })] }))] })) })), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] }))] })) })));
+                                            : undefined, children: preset.text }) }, `preset-${i}`));
+                            }), (0, jsx_runtime_1.jsx)("li", { role: 'separator', className: (0, classnames_1.default)('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), (0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('custom-panel', !isCustomVisible && 'hidden'), children: (0, jsx_runtime_1.jsxs)("div", { className: 'row', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'col-sm-6', children: [(0, jsx_runtime_1.jsx)("label", { children: textFrom }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: (0, classnames_1.default)('DatePicker', !isStartValid && 'has-error') })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'col-sm-6', children: [(0, jsx_runtime_1.jsx)("label", { children: textTo }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: (0, classnames_1.default)('DatePicker', !isEndValid && 'has-error') })] })] }) }), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] })] }) }));
     }
 }
 exports.DateRangePickerPure = DateRangePicker;

package/lib/es/components/dialog/ConfirmationDialog.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const ConfirmationDialog = (props) => {
-    const { content, onClickCancel = noop_1.default, cancelButtonText, onClickConfirm = noop_1.default, confirmButtonText, disableConfirm } = props, remainingProps = tslib_1.__rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
-    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm }, { children: confirmButtonText }))] })));
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true })));
+    const { content, onClickCancel = noop_1.default, cancelButtonText, onClickConfirm = noop_1.default, confirmButtonText, disableConfirm, ...remainingProps } = props;
+    const footer = ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm, children: confirmButtonText })] }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true }));
 };
 exports.default = ConfirmationDialog;

package/lib/es/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/lib/es/components/dialog/Dialog.js

@@ -10,7 +10,6 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const framer_motion_1 = require("framer-motion");
 const portalRoot_1 = require("../../utils/portalRoot");
 const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
-require("../../hooks/useAfterMount");
 const DialogHeader_1 = tslib_1.__importDefault(require("./DialogHeader"));
 const DialogBody_1 = tslib_1.__importDefault(require("./DialogBody"));
 const DialogFooter_1 = tslib_1.__importDefault(require("./DialogFooter"));
@@ -19,11 +18,12 @@ const dialogContext_1 = require("./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_1.default, onClose, disableEsc = false, onEsc = noop_1.default, onCloseValidation = () => true, children } = props, remainingProps = tslib_1.__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_1.default, onClose, disableEsc = false, onEsc = noop_1.default, onCloseValidation = () => true, children, ...remainingProps } = props;
     const [open, setOpen] = (0, react_1.useState)(show);
     const dialogWrapperRef = (0, react_1.useRef)(null);
-    const onCloseCallback = onClose !== null && onClose !== void 0 ? onClose : onHide;
+    const onCloseCallback = onClose ?? onHide;
     const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
+    const shouldReduceMotion = (0, framer_motion_1.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] = (0, react_1.useState)();
@@ -66,7 +66,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.
@@ -80,8 +79,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 = (0, classnames_1.default)('modal', 'show', className);
@@ -98,22 +97,24 @@ const Dialog = (props) => {
         damping: 25,
         stiffness: 400,
     };
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(dialogContext_1.DialogContextProvider, Object.assign({ value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton } }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(dialogContext_1.DialogContextProvider, { value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.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 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
+            exitBeforeEnter: true, children: open && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)(framer_motion_1.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: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-content' }, { children: [hasChildren && children, !hasChildren && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && (0, jsx_runtime_1.jsx)(DialogBody_1.default, Object.assign({ className: bodyClassName }, { children: body })), footer && (0, jsx_runtime_1.jsx)(DialogFooter_1.default, Object.assign({ className: footerClassName }, { children: footer }))] }))] })) })), (0, jsx_runtime_1.jsx)(framer_motion_1.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: (0, jsx_runtime_1.jsxs)("div", { className: 'modal-content', children: [hasChildren && children, !hasChildren && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && (0, jsx_runtime_1.jsx)(DialogBody_1.default, { className: bodyClassName, children: body }), footer && (0, jsx_runtime_1.jsx)(DialogFooter_1.default, { className: footerClassName, children: footer })] }))] }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.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_1.default;
 Dialog.Body = DialogBody_1.default;

package/lib/es/components/dialog/DialogBody.js

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const DialogBody = (_a) => {
-    var { className = '', children } = _a, remainingProps = tslib_1.__rest(_a, ["className", "children"]);
+const DialogBody = ({ className = '', children, ...remainingProps }) => {
     const classes = (0, classnames_1.default)('modal-body', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes, "aria-label": 'dialog body' }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, "aria-label": 'dialog body', children: children }));
 };
 exports.default = DialogBody;

package/lib/es/components/dialog/DialogFooter.js

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const dialogContext_1 = require("./dialogContext");
 const DialogFooter = (props) => {
-    const { className = '', children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
+    const { className = '', children, ...remainingProps } = props;
     const { isSmallestDialog, showXsDialogBorders } = (0, dialogContext_1.useDialogContext)();
     const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
     const footerClassNames = (0, classnames_1.default)('modal-footer', !doShowXsDialogBorders && 'border-top-none padding-top-0', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: footerClassNames, "aria-label": 'dialog footer' }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: footerClassNames, "aria-label": 'dialog footer', children: children }));
 };
 exports.default = DialogFooter;

package/lib/es/components/dialog/DialogHeader.js

@@ -7,7 +7,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const dialogContext_1 = require("./dialogContext");
 const DialogHeader = (props) => {
-    const { title, subtitle, headerButtons, onCloseButtonClick = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["title", "subtitle", "headerButtons", "onCloseButtonClick"]);
+    const { title, subtitle, headerButtons, onCloseButtonClick = noop_1.default, ...remainingProps } = props;
     const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = (0, dialogContext_1.useDialogContext)();
     const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
     const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
@@ -17,6 +17,6 @@ const DialogHeader = (props) => {
         onCloseButtonClick(event);
         onClose(event);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: headerClasses, "aria-label": 'dialog header' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: headerTextClasses }, { children: [subtitle && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && !isSmallestDialog && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerButtons, (0, jsx_runtime_1.jsx)("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: headerClasses, "aria-label": 'dialog header', children: [(0, jsx_runtime_1.jsxs)("div", { className: headerTextClasses, children: [subtitle && (0, jsx_runtime_1.jsx)("div", { className: 'modal-header-subtitle', children: subtitle }), (0, jsx_runtime_1.jsx)("div", { className: 'modal-header-title', children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'modal-header-buttons', children: [headerButtons && !isSmallestDialog && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerButtons, (0, jsx_runtime_1.jsx)("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) }))] })] }));
 };
 exports.default = DialogHeader;

package/lib/es/components/dialog/FrameDialog.js

@@ -38,9 +38,9 @@ const FrameDialog = (props) => {
         }
     });
     const dialogClassName = `frame-dialog ${className}`;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, dialogProps, { show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: (0, jsx_runtime_1.jsx)(iframe_resizer_react_1.default, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...dialogProps, show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: (0, jsx_runtime_1.jsx)(iframe_resizer_react_1.default, { 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 }));
 };
 exports.default = FrameDialog;

package/lib/es/components/dialog/InfoDialog.js

@@ -2,12 +2,10 @@
 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 Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const InfoDialog = (props) => {
-    const { content, className } = props, remainingProps = tslib_1.__rest(props, ["content", "className"]);
+    const { content, className, ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} info-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: content, className: dialogClassName });
 };
 exports.default = InfoDialog;

package/lib/es/components/dialog/MediaDialog.js

@@ -10,7 +10,7 @@ const ResponsiveVideo_1 = tslib_1.__importDefault(require("../video/ResponsiveVi
 const ImagePreloader_1 = tslib_1.__importDefault(require("../preloader/ImagePreloader"));
 const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
 const MediaDialog = (props) => {
-    const { show = false, onClose = noop_1.default, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop_1.default, nextButtonText = 'Next', nextButtonCallback = noop_1.default, className } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "disableEsc", "useOverflow", "bsSize", "media", "previousButtonText", "previousButtonCallback", "nextButtonText", "nextButtonCallback", "className"]);
+    const { show = false, onClose = noop_1.default, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop_1.default, nextButtonText = 'Next', nextButtonCallback = noop_1.default, className, ...remainingProps } = props;
     const [currentMediaIndex, setCurrentMediaIndex] = (0, react_1.useState)(0);
     const handlePrevious = () => {
         const oldIndex = currentMediaIndex;
@@ -25,13 +25,13 @@ const MediaDialog = (props) => {
         nextButtonCallback(newIndex);
     };
     const renderFallback = () => {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-center text-size-h3' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) })));
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'text-center text-size-h3', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) }));
     };
     const renderImage = (mediaData) => {
         const imageClassNames = (0, classnames_1.default)('img-responsive', mediaData.className && mediaData.className);
         return (
         // @ts-ignore
-        (0, jsx_runtime_1.jsx)(ImagePreloader_1.default, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
+        (0, jsx_runtime_1.jsx)(ImagePreloader_1.default, { src: mediaData.src, className: imageClassNames, children: ({ status, image }) => {
                 if (status === ImagePreloader_1.default.STATUS_LOADED) {
                     // When image has been loaded, render the image tag
                     return (0, jsx_runtime_1.jsx)("img", { className: 'ani-fade-in', src: image.src }, image.src);
@@ -40,12 +40,11 @@ const MediaDialog = (props) => {
                     return renderFallback();
                 }
                 return (0, jsx_runtime_1.jsx)(Spinner_1.default, { isInverse: false });
-            } })));
+            } }));
     };
     const renderVideo = (mediaData) => {
-        var _a;
         const videoClassNames = (0, classnames_1.default)(mediaData.className && mediaData.className);
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-0' }, { children: (0, jsx_runtime_1.jsx)(ResponsiveVideo_1.default, { src: mediaData.src, aspectRatio: (_a = mediaData.aspectRatio) !== null && _a !== void 0 ? _a : '16by9', className: videoClassNames }) })));
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'flex-1-0', children: (0, jsx_runtime_1.jsx)(ResponsiveVideo_1.default, { src: mediaData.src, aspectRatio: mediaData.aspectRatio ?? '16by9', className: videoClassNames }) }));
     };
     const renderMediaContent = (mediaData = {}) => {
         if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
@@ -59,7 +58,7 @@ const MediaDialog = (props) => {
     const mediaContentClassNames = (0, classnames_1.default)('media-content', 'content-center');
     const mediaTitle = media[currentMediaIndex].title;
     const mediaSubtitle = media[currentMediaIndex].subtitle || null;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: mediaContentClassNames }, { children: renderMediaContent(media[currentMediaIndex]) })), footer: (media === null || media === void 0 ? void 0 : media.length) > 1 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative clearfix' }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${currentMediaIndex + 1} / ${props.media.length}` })), (0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: handleNext }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] }))] }))), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize })));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, show: show, title: mediaTitle, subtitle: mediaSubtitle, body: (0, jsx_runtime_1.jsx)("div", { className: mediaContentClassNames, children: renderMediaContent(media[currentMediaIndex]) }), footer: media?.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious, children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] }), (0, jsx_runtime_1.jsx)("div", { children: `${currentMediaIndex + 1} / ${props.media.length}` }), (0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'btn btn-primary btn-link btn-icon-right', onClick: handleNext, children: [(0, jsx_runtime_1.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/lib/es/components/dialog/OnboardingDialog.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const OnboardingDialog = (props) => {
-    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-medium' }, { children: "Get started with a quick tour to explore UIKIT and discover its key features." })), ' ', (0, jsx_runtime_1.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 = tslib_1.__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 = ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: "Get started with a quick tour to explore UIKIT and discover its key features." }), ' ', (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative padding-20 margin-top-10 margin-x-20' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-bottom-15 margin-right-20 text-color-darkest' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-h3 text-medium' }, { children: title })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-darker' }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'text-size-16' }, { children: description })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'text-color-darker' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'margin-top-25 text-medium' }, { children: onboardingRestartHint })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: 'text-color-darker padding-bottom-15 margin-top-5' }, { children: onboardingRestartDescription }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar justify-content-end margin-y-20' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.MUTED, onClick: onClose }, { children: skipButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: Button_1.default.PRIMARY, onClick: onStartTour }, { children: tourButtonText }))] }))] }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'position-relative padding-20 margin-top-10 margin-x-20', children: [(0, jsx_runtime_1.jsx)("div", { className: 'margin-bottom-15 margin-right-20 text-color-darkest', children: (0, jsx_runtime_1.jsx)("div", { className: 'text-size-h3 text-medium', children: title }) }), (0, jsx_runtime_1.jsx)("div", { className: 'text-color-darker', children: (0, jsx_runtime_1.jsx)("p", { className: 'text-size-16', children: description }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'text-color-darker', children: [(0, jsx_runtime_1.jsx)("div", { className: 'margin-top-25 text-medium', children: onboardingRestartHint }), (0, jsx_runtime_1.jsx)("p", { className: 'text-color-darker padding-bottom-15 margin-top-5', children: onboardingRestartDescription })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar justify-content-end margin-y-20', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.MUTED, onClick: onClose, children: skipButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.PRIMARY, onClick: onStartTour, children: tourButtonText })] })] })] }) }));
 };
 exports.default = OnboardingDialog;

package/lib/es/components/dialog/ReleaseNotesDialog.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 ReleaseNotes_1 = tslib_1.__importDefault(require("../releaseNotes/ReleaseNotes"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
@@ -14,6 +12,6 @@ const setReleaseNotesItem = (props) => {
 const getModuleName = (moduleName, whatsNew) => ((0, jsx_runtime_1.jsx)("span", { children: moduleName ? moduleName : whatsNew }));
 const ReleaseNotesDialog = (props) => {
     const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: (0, jsx_runtime_1.jsx)(ReleaseNotes_1.default, { releaseNotes: translatedReleaseNotes }), footer: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })), onClose: () => setReleaseNotesItem(props) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: (0, jsx_runtime_1.jsx)(ReleaseNotes_1.default, { releaseNotes: translatedReleaseNotes }), footer: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setReleaseNotesItem(props), children: closeButtonText || 'Close' }), onClose: () => setReleaseNotesItem(props) }));
 };
 exports.default = ReleaseNotesDialog;

package/lib/es/components/dialog/SaveDialog.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const SaveDialog = (props) => {
-    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop_1.default, onClickCancel = noop_1.default, onClickConfirm = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["showCloseButton", "content", "discardButtonText", "cancelButtonText", "confirmButtonText", "onClickDiscard", "onClickCancel", "onClickConfirm"]);
-    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'DiscardButton', onClick: onClickDiscard }, { children: discardButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, 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_1.default, onClickCancel = noop_1.default, onClickConfirm = noop_1.default, ...remainingProps } = props;
+    const footer = ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: 'DiscardButton', onClick: onClickDiscard, children: discardButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm, children: confirmButtonText })] }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true }));
 };
 exports.default = SaveDialog;

package/lib/es/components/dialog/SimpleDialog.js

@@ -2,15 +2,13 @@
 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 Dialog_1 = tslib_1.__importDefault(require("./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 = tslib_1.__rest(props, ["content", "showCloseButton", "className"]);
+    const { content, showCloseButton = true, className, ...remainingProps } = props;
     const dialogClassName = `${className ? className : ''} simple-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, showCloseButton: showCloseButton, body: content, className: dialogClassName });
 };
 exports.default = SimpleDialog;

package/lib/es/components/dialog/SplitDialog.js

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const SplitDialog = (props) => {
-    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true } = props, remainingProps = tslib_1.__rest(props, ["leftContent", "rightContent", "leftContentClassName", "rightContentClassName", "className", "useOverflow"]);
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true, ...remainingProps } = props;
     const dialogClassName = `split-dialog ${className}`;
     const dividerClasses = (0, classnames_1.default)('split-divider', 'bg-lighter');
-    const body = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'split-wrapper' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `split-left ${leftContentClassName}` }, { children: [leftContent, (0, jsx_runtime_1.jsx)("div", { className: dividerClasses })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `split-right ${rightContentClassName}` }, { children: rightContent }))] })));
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: body, className: dialogClassName, useOverflow: useOverflow }));
+    const body = ((0, jsx_runtime_1.jsxs)("div", { className: 'split-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: `split-left ${leftContentClassName}`, children: [leftContent, (0, jsx_runtime_1.jsx)("div", { className: dividerClasses })] }), (0, jsx_runtime_1.jsx)("div", { className: `split-right ${rightContentClassName}`, children: rightContent })] }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: body, className: dialogClassName, useOverflow: useOverflow });
 };
 exports.default = SplitDialog;

package/lib/es/components/divider/Divider.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Divider = (props) => {
     const { spacing = 15, dividerWidth = 1, dividerColor = 'light', asSpacer = false, vertical = false, titleAlignment = 'center', className = '', children, } = props;
@@ -24,9 +22,9 @@ const Divider = (props) => {
             width: vertical ? `${dividerWidth}px` : '100%',
             height: vertical ? '100%' : `${dividerWidth}px`,
         } }));
-    const titleLine = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-0' }, { children: line }));
-    const title = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: isStringTitle ? 'padding-x-10' : '' }, { children: children }));
+    const titleLine = (0, jsx_runtime_1.jsx)("div", { className: 'flex-1-0', children: line });
+    const title = (0, jsx_runtime_1.jsx)("div", { className: isStringTitle ? 'padding-x-10' : '', children: children });
     const dividerTitleClasses = (0, classnames_1.default)('divider-title', 'display-flex', 'align-items-center');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, style: wrapperStyle }, { children: [!asSpacer && !children && line, children && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: dividerTitleClasses }, { children: [titleAlignment === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, titleLine] })), titleAlignment === 'center' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title, titleLine] })), titleAlignment === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title] }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, style: wrapperStyle, children: [!asSpacer && !children && line, children && ((0, jsx_runtime_1.jsxs)("div", { className: dividerTitleClasses, children: [titleAlignment === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, titleLine] })), titleAlignment === 'center' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title, titleLine] })), titleAlignment === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title] }))] }))] }));
 };
 exports.default = Divider;

package/lib/es/components/dropdown/ButtonDropdown.d.ts

@@ -118,6 +118,6 @@ export type ButtonDropdownProps = {
     className?: string;
 };
 declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonDropdown;

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -10,7 +10,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const portalRoot_1 = require("../../utils/portalRoot");
-const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
+const useClickOutside_1 = tslib_1.__importStar(require("../../hooks/useClickOutside"));
 const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
 const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
 const DropdownToggleButton_1 = tslib_1.__importDefault(require("./DropdownToggleButton"));
@@ -29,7 +29,7 @@ const getPlacement = (pullRight, dropup) => {
     return 'bottom-start';
 };
 const ButtonDropdown = (0, react_1.forwardRef)((props, ref) => {
-    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
     const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
     const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
@@ -40,22 +40,24 @@ const ButtonDropdown = (0, react_1.forwardRef)((props, ref) => {
     };
     const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
     const { styles, attributes } = (0, react_popper_1.usePopper)(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
+    const isUncontrolled = (0, isNil_1.default)(open);
+    const isOpen = isUncontrolled ? internalOpen : open;
     const wrapperRef = (0, useClickOutside_1.default)(event => {
         if (usePortal) {
-            // In case the dropdown is rendered via portal the clickOutside the toggle button element is triggered
-            // since the dropdown is not a child of the wrapper element.
+            // In case the dropdown is rendered via portal the clickOutside the toggle button element is
+            // triggered since the dropdown is not a child of the wrapper element.
             // In this case we need to check if the event target is inside the dropdown-menu and prevent closing
             // the dropdown
-            if (!(refDropdownMenu === null || refDropdownMenu === void 0 ? void 0 : refDropdownMenu.contains(event.target))) {
+            if (!refDropdownMenu?.contains(event.target)) {
                 closeMenu();
             }
         }
         else {
             closeMenu();
         }
-    });
+    }, useClickOutside_1.DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
+    );
     const dropdownRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
-    const isUncontrolled = (0, isNil_1.default)(open);
     const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
     (0, react_1.useEffect)(() => {
         if (!isUncontrolled) {
@@ -88,10 +90,9 @@ const ButtonDropdown = (0, react_1.forwardRef)((props, ref) => {
         onLabelButtonClick();
     };
     const handleDropdownButtonClick = splitButton ? handleSplitLabelButtonClick : toggleOpen;
-    const isOpen = isUncontrolled ? internalOpen : open;
     const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
-    const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+    const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) }), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] }));
 });
 exports.default = ButtonDropdown;

package/lib/es/components/dropdown/Caret.js

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