@rio-cloud/rio-uikit 1.6.1 → 1.7.1

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;

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

@@ -8,7 +8,7 @@ const react_popper_1 = require("react-popper");
 const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
 const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
 const DropdownSubmenu = (props) => {
-    const { title = '', items = [], disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["title", "items", "disabled", "className"]);
+    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;
     const classes = (0, classnames_1.default)('dropdown-submenu', disabled && 'disabled', className);
     const [refParentPopper, setRefParentPopper] = (0, react_1.useState)(null);
     const [refDropdownSubmenu, setRefDropdownSubmenu] = (0, react_1.useState)(null);
@@ -29,6 +29,6 @@ const DropdownSubmenu = (props) => {
         ],
     });
     // return a list item that is also automatically the new toggle for the submenu
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ ref: setRefParentPopper }, remainingProps, { className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [(0, jsx_runtime_1.jsxs)("a", Object.assign({ className: 'submenu-title', role: 'menuitem' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' })] })), isHover && !disabled && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ ref: setRefDropdownSubmenu, style: styles.popper }, attributes.popper, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)("li", { ref: setRefParentPopper, ...remainingProps, className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [(0, jsx_runtime_1.jsxs)("a", { className: 'submenu-title', role: 'menuitem', children: [(0, jsx_runtime_1.jsx)("span", { className: 'submenu-title-text', children: title }), (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' })] }), isHover && !disabled && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { ref: setRefDropdownSubmenu, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items }) }))] }));
 };
 exports.default = DropdownSubmenu;

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

@@ -7,9 +7,9 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
 const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef, ...remainingProps } = props;
     const toggleRef = (0, useMergeRefs_1.default)(outerRef, ref);
     const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses, children: children }));
 });
 exports.default = DropdownToggleButton;

package/lib/es/components/dropdown/SimpleButtonDropdown.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 ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
-const SimpleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, Object.assign({}, props, { noCaret: true }));
+const SimpleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props, noCaret: true });
 exports.default = SimpleButtonDropdown;

package/lib/es/components/dropdown/SingleButtonDropdown.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 ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
-const SingleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, Object.assign({}, props));
+const SingleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props });
 exports.default = SingleButtonDropdown;

package/lib/es/components/dropdown/SplitButtonDropdown.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 ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
-const SplitButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, Object.assign({}, props, { splitButton: true }));
+const SplitButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props, splitButton: true });
 exports.default = SplitButtonDropdown;

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

@@ -7,8 +7,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Caret_1 = tslib_1.__importDefault(require("./Caret"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const SplitCaretButton = (0, react_1.forwardRef)((props, ref) => {
-    const { disabled = false, bsStyle, bsSize, onClick, className } = props, remainingProps = tslib_1.__rest(props, ["disabled", "bsStyle", "bsSize", "onClick", "className"]);
+    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
     const splitCaretButtonClasses = (0, classnames_1.default)('dropdown-toggle', className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses }, { children: (0, jsx_runtime_1.jsx)(Caret_1.default, {}) })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses, children: (0, jsx_runtime_1.jsx)(Caret_1.default, {}) }));
 });
 exports.default = SplitCaretButton;

package/lib/es/components/editableContent/EditableContent.js

@@ -25,7 +25,7 @@ const POPOVER_OFFSET_TOP = -13;
 const POPOVER_OFFSET_LEFT = -18;
 const DEFAULT_TEXTAREA_ROWS = 1;
 const EditableContent = (props) => {
-    const { show = undefined, onSave = noop_1.default, onCancel = noop_1.default, onFocus = noop_1.default, onBlur = noop_1.default, onEditMode = noop_1.default, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["show", "onSave", "onCancel", "onFocus", "onBlur", "onEditMode", "onSaveValidation", "isValid", "errorMessage", "allowResize", "inputRows", "editorOffsetTop", "editorOffsetLeft", "customEditor", "size", "className", "inputClassName", "editorClassName", "children"]);
+    const { show = undefined, onSave = noop_1.default, onCancel = noop_1.default, onFocus = noop_1.default, onBlur = noop_1.default, onEditMode = noop_1.default, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children, ...remainingProps } = props;
     const [isEditMode, setIsEditMode] = (0, react_1.useState)(show);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const [hasError, setHasError] = (0, react_1.useState)(!isValid);
@@ -39,10 +39,9 @@ const EditableContent = (props) => {
     // Input ref used to focus inside when entering edit mode
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (inputRef.current && isEditMode) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+            inputRef.current?.focus();
+            inputRef.current?.select();
         }
     }, [isEditMode, inputRef.current]);
     const customModifier = (0, react_1.useMemo)(() => ({
@@ -70,9 +69,8 @@ const EditableContent = (props) => {
         onEditMode();
     };
     const enterEditMode = () => {
-        var _a, _b;
         setIsEditMode(true);
-        setInputValue((_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) === null || _a === void 0 ? void 0 : _a.trimEnd()) !== null && _b !== void 0 ? _b : '');
+        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');
         setHasError(false);
     };
     const handleInputChange = (event) => {
@@ -125,7 +123,7 @@ const EditableContent = (props) => {
         minWidth: '100px',
         resize: allowResize ? 'vertical' : 'none',
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex gap-5' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), (0, portalRoot_1.getOrCreatePortalRoot)())] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses, children: children }), isEditMode &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper, ...attributes.popper, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: inputWrapperClasses, children: [hasCustomControl && customEditor, !hasCustomControl && ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && (0, jsx_runtime_1.jsx)("div", { className: 'help-block position-relative', children: errorMessage })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex gap-5', children: [(0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }), (0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) })] })] }), (0, portalRoot_1.getOrCreatePortalRoot)())] }));
 };
 exports.default = EditableContent;