@rio-cloud/rio-uikit 1.12.0 → 1.13.0

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

@@ -1,133 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-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"));
-const DialogHeader_1 = tslib_1.__importDefault(require("./DialogHeader"));
-const DialogBody_1 = tslib_1.__importDefault(require("./DialogBody"));
-const DialogFooter_1 = tslib_1.__importDefault(require("./DialogFooter"));
-const useFocusTrap_1 = tslib_1.__importDefault(require("../../hooks/useFocusTrap"));
-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, ...remainingProps } = props;
-    const [open, setOpen] = (0, react_1.useState)(show);
-    const dialogWrapperRef = (0, react_1.useRef)(null);
-    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)();
-    (0, useFocusTrap_1.default)(focusTrapRef);
-    const toggleBodyClass = (add) => {
-        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS
-        // Remove "modal-open" from body only when there is no other dialog in the DOM
-        // in order to support multiple dialogs
-        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;
-        if (add) {
-            document.body.classList.add(MODAL_OPEN_CLASS);
-        }
-        else if (!add && !hasOtherDialogs) {
-            document.body.classList.remove(MODAL_OPEN_CLASS);
-        }
-    };
-    const handleCloseButton = () => closeDialog(true);
-    const closeDialog = (usedEscapeKey) => {
-        if (onCloseValidation()) {
-            setOpen(false);
-            onCloseCallback();
-            usedEscapeKey && onEsc();
-        }
-    };
-    const [previousShow, setPreviousShow] = (0, react_1.useState)(show);
-    if (show !== previousShow) {
-        setOpen(show);
-        toggleBodyClass(show);
-        setPreviousShow(show);
-    }
-    (0, useEsc_1.default)(() => {
-        if (!dialogWrapperRef || !dialogWrapperRef.current) {
-            return;
-        }
-        const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = document.activeElement;
-        // Only allow to close the dialog when the focus is inside the dialog
-        if (!disableEsc && dialogElement.contains(currentActiveElement)) {
-            closeDialog(true);
-        }
-    });
-    const handleAnimationComplete = (definition) => {
-        // 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.
-        // @ts-ignore
-        if (definition.opacity === 0) {
-            return;
-        }
-        const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = document.activeElement;
-        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused
-        // 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?.contains(currentActiveElement)) {
-            dialogWrapperRef?.current?.focus();
-        }
-    };
-    const modalClasses = (0, classnames_1.default)('modal', 'show', className);
-    const isSmallestDialog = bsSize === 'xs';
-    const hasChildren = !!children;
-    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullheight-lg' && 'modal-full-height modal-lg', bsSize === 'fullheight-xl' && 'modal-full-height modal-xl', bsSize === 'fullscreen' && 'modal-fullscreen');
-    const spring = {
-        type: 'spring',
-        damping: 33,
-        stiffness: 500,
-    };
-    const springXs = {
-        type: 'spring',
-        damping: 25,
-        stiffness: 400,
-    };
-    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
-        , { 
-            // 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", { ...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, { 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", { 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;
-Dialog.Footer = DialogFooter_1.default;
-Dialog.SIZE_XS = 'xs';
-Dialog.SIZE_SM = 'sm';
-Dialog.SIZE_MD = 'md'; // default
-Dialog.SIZE_LG = 'lg';
-Dialog.SIZE_XL = 'xl';
-Dialog.SIZE_FULL = 'full';
-Dialog.SIZE_FULL_WIDTH = 'fullwidth';
-Dialog.SIZE_FULL_HEIGHT = 'fullheight';
-Dialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg';
-Dialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl';
-Dialog.SIZE_FULL_SCREEN = 'fullscreen';
-exports.default = Dialog;

package/lib/es/components/dialog/DialogBody.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
-export type DialogBodyProps = ComponentProps<'div'> & {
-    /**
-     * Additional classes for the modal-body element.
-     */
-    className?: string;
-};
-declare const DialogBody: ({ className, children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
-export default DialogBody;

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const DialogBody = ({ className = '', children, ...remainingProps }) => {
-    const classes = (0, classnames_1.default)('modal-body', className);
-    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.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
-export type DialogFooterProps = ComponentProps<'div'> & {
-    /**
-     * Additional classes for the modal-footer element.
-     */
-    className?: string;
-};
-declare const DialogFooter: (props: PropsWithChildren<DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
-export default DialogFooter;

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

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const dialogContext_1 = require("./dialogContext");
-const DialogFooter = (props) => {
-    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", { ...remainingProps, className: footerClassNames, "aria-label": 'dialog footer', children: children }));
-};
-exports.default = DialogFooter;

package/lib/es/components/dialog/DialogHeader.d.ts

@@ -1,18 +0,0 @@
-import React, { type ComponentProps } from 'react';
-export type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
-    /**
-     * The dialog title (can also be a FormattedMessage component).
-     */
-    title: string | React.ReactNode;
-    /**
-     * The dialog header subtitle content.
-     */
-    subtitle?: string | React.ReactNode;
-    /**
-     * Allows to add additional buttons to the dialog header.
-     */
-    headerButtons?: React.ReactNode;
-    onCloseButtonClick?: () => void;
-};
-declare const DialogHeader: (props: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default DialogHeader;

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-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, ...remainingProps } = props;
-    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = (0, dialogContext_1.useDialogContext)();
-    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
-    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
-    const headerClasses = (0, classnames_1.default)('modal-header', !doShowXsDialogBorders && 'border-bottom-none');
-    const headerTextClasses = (0, classnames_1.default)('modal-header-text', !doShowXsDialogBorders && 'padding-bottom-0 width-100pct');
-    const handleClose = (event) => {
-        onCloseButtonClick(event);
-        onClose(event);
-    };
-    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.d.ts

@@ -1,31 +0,0 @@
-import { type DialogSize } from './Dialog';
-export declare const DEFAULT_PREFIX = "EVENT_FRAME_DIALOG";
-export declare const OPEN_DIALOG_EVENT = "_OPEN_DIALOG";
-export declare const CLOSE_DIALOG_EVENT = "_CLOSE_DIALOG";
-export type DialogOptions = {
-    bsSize?: DialogSize;
-    showXsDialogBorders?: boolean;
-};
-export type OPEN_DIALOG_EVENT_TYPE = {
-    src: string;
-    dialogProps?: DialogOptions;
-};
-export type FrameDialogProps = {
-    /**
-     * A prefix for all event types.
-     *
-     * @default 'EVENT_FRAME_DIALOG'
-     */
-    eventPrefix?: string;
-    /**
-     * A function to retrieve the iframe DOM element so a message can be sent to it. This is required
-     * when sending messages back to the origin widget iframe that triggered the dialog in the first place.
-     */
-    getSourceFrame?: () => HTMLIFrameElement | null;
-    /**
-     * Additional classes for the modal element.
-     */
-    className?: string;
-};
-declare const FrameDialog: (props: FrameDialogProps) => import("react/jsx-runtime").JSX.Element;
-export default FrameDialog;

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

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CLOSE_DIALOG_EVENT = exports.OPEN_DIALOG_EVENT = exports.DEFAULT_PREFIX = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-react"));
-const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const usePostMessage_1 = tslib_1.__importDefault(require("../../hooks/usePostMessage"));
-exports.DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';
-exports.OPEN_DIALOG_EVENT = '_OPEN_DIALOG';
-exports.CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';
-const FrameDialog = (props) => {
-    const { eventPrefix = exports.DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;
-    const openDialogEvent = `${eventPrefix}${exports.OPEN_DIALOG_EVENT}`;
-    const closeDialogEvent = `${eventPrefix}${exports.CLOSE_DIALOG_EVENT}`;
-    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
-    const [remoteDialogUrl, setRemoteDialogUrl] = (0, react_1.useState)('');
-    const [dialogProps, setDialogProps] = (0, react_1.useState)({});
-    const { sendMessageToWidget } = (0, usePostMessage_1.default)(eventPrefix, (remoteAction) => {
-        console.log(remoteAction);
-        if (remoteAction.type === openDialogEvent) {
-            setShowDialog(true);
-            setRemoteDialogUrl(remoteAction.payload.src);
-            setDialogProps(remoteAction.payload.dialogProps);
-        }
-        else if (remoteAction.type === closeDialogEvent) {
-            setShowDialog(false);
-            // Forward messages from dialog back to widget
-            const widgetFrame = getSourceFrame();
-            if (widgetFrame) {
-                sendMessageToWidget({
-                    type: closeDialogEvent,
-                    payload: remoteAction.payload,
-                }, [widgetFrame]);
-            }
-        }
-    });
-    const dialogClassName = `frame-dialog ${className}`;
-    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 }));
-};
-exports.default = FrameDialog;

package/lib/es/components/dialog/InfoDialog.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import Dialog from './Dialog';
-export type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {
-    /**
-     * The content of the dialog body itself.
-     */
-    content: string | React.ReactNode;
-};
-declare const InfoDialog: (props: InfoDialogProps) => import("react/jsx-runtime").JSX.Element;
-export default InfoDialog;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const InfoDialog = (props) => {
-    const { content, className, ...remainingProps } = props;
-    const dialogClassName = `${className ? className : ''} info-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: content, className: dialogClassName });
-};
-exports.default = InfoDialog;

package/lib/es/components/dialog/MediaDialog.d.ts

@@ -1,65 +0,0 @@
-import React from 'react';
-import { type BaseDialogProps } from './Dialog';
-export type MediaDialogMedia = {
-    /**
-     * Defines the media type that is going to be displayed.
-     *
-     * Possible values are: `image` and `video`.
-     */
-    type: 'image' | 'video';
-    /**
-     * The source location for the media data.
-     */
-    src: string;
-    /**
-     * The name or title of the media used for the dialogs title.
-     */
-    title: string | React.ReactNode;
-    /**
-     * Additional media information used for the dialogs subtitle.
-     */
-    subtitle?: string | React.ReactNode;
-    /**
-     * Only relevant for videos where the aspect of the video is defined.
-     *
-     * Possible values are: `4by3` and `16by9`.
-     * @default '16by9'
-     */
-    aspectRatio?: '4by3' | '16by9';
-    /**
-     * Additional classes for the image element.
-     */
-    className?: string;
-};
-export type MediaDialogProps = BaseDialogProps & {
-    /**
-     * List of media objects.
-     */
-    media: MediaDialogMedia[];
-    /**
-     * The button text for switching to the previous media if there are multiple.
-     */
-    previousButtonText: string | React.ReactNode;
-    /**
-     * Callback function for when the previous button is clicked.
-     * @param newIndex
-     * @returns
-     */
-    previousButtonCallback?: (newIndex: number) => void;
-    /**
-     * The button text for switching to the next media if there are multiple.
-     */
-    nextButtonText: string | React.ReactNode;
-    /**
-     * Callback function for when the next button is clicked.
-     * @param newIndex
-     * @returns
-     */
-    nextButtonCallback?: (newIndex: number) => void;
-};
-declare const MediaDialog: {
-    (props: MediaDialogProps): import("react/jsx-runtime").JSX.Element;
-    MEDIA_TYPE_IMAGE: "image";
-    MEDIA_TYPE_VIDEO: "video";
-};
-export default MediaDialog;

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

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const ResponsiveVideo_1 = tslib_1.__importDefault(require("../video/ResponsiveVideo"));
-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, ...remainingProps } = props;
-    const [currentMediaIndex, setCurrentMediaIndex] = (0, react_1.useState)(0);
-    const handlePrevious = () => {
-        const oldIndex = currentMediaIndex;
-        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;
-        setCurrentMediaIndex(newIndex);
-        previousButtonCallback(newIndex);
-    };
-    const handleNext = () => {
-        const oldIndex = currentMediaIndex;
-        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;
-        setCurrentMediaIndex(newIndex);
-        nextButtonCallback(newIndex);
-    };
-    const renderFallback = () => {
-        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, { 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);
-                }
-                if (status === ImagePreloader_1.default.STATUS_FAILED) {
-                    return renderFallback();
-                }
-                return (0, jsx_runtime_1.jsx)(Spinner_1.default, { isInverse: false });
-            } }));
-    };
-    const renderVideo = (mediaData) => {
-        const videoClassNames = (0, classnames_1.default)(mediaData.className && mediaData.className);
-        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) {
-            return renderVideo(mediaData);
-        }
-        // image media is default
-        return mediaData.src && renderImage(mediaData);
-    };
-    const dialogClassName = (0, classnames_1.default)('media-dialog', className && className);
-    const bodyClassNames = (0, classnames_1.default)('padding-0');
-    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, { ...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';
-exports.default = MediaDialog;

package/lib/es/components/dialog/OnboardingDialog.d.ts

@@ -1,44 +0,0 @@
-import React from 'react';
-import { type BaseDialogProps } from './Dialog';
-export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
-    /**
-     * The source URL of the image to be displayed in the dialog.
-     */
-    imageSrc: string;
-    /**
-     * Alternative text for the image, used for accessibility.
-     */
-    imageAlt?: string;
-    /**
-     * The title of the dialog. A welcome message.
-     */
-    title?: string | React.ReactNode;
-    /**
-     * A short description of the service and it's onboarding.
-     */
-    description?: string | React.ReactNode;
-    /**
-     * Hint text for restarting the onboarding process.
-     */
-    onboardingRestartHint?: string | React.ReactNode;
-    /**
-     * Detailed description for restarting the onboarding process.
-     */
-    onboardingRestartDescription?: string | React.ReactNode;
-    /**
-     * Text for the skip button
-     */
-    skipButtonText?: string | React.ReactNode;
-    /**
-     * Text for the button to start the tour
-     */
-    tourButtonText?: string | React.ReactNode;
-    /**
-     * Callback function to be called when the tour starts.
-     *
-     * @returns
-     */
-    onStartTour: () => void;
-};
-declare const OnboardingDialog: (props: OnboardingDialogProps) => import("react/jsx-runtime").JSX.Element;
-export default OnboardingDialog;

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-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", { 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, { ...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.d.ts

@@ -1,61 +0,0 @@
-import { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
-export type ReleaseNotesDialogProps = {
-    /**
-     * Decides if the dialog is opened.
-     */
-    showReleaseNotes: boolean;
-    /**
-     * Callback set showReleaseNotes state
-     * @param show
-     * @returns
-     */
-    setShowReleaseNotes: (show: boolean) => void;
-    /**
-     * Translated text for "What`s new?"
-     */
-    whatsNewTitle?: string;
-    /**
-     * The translated modulename.
-     */
-    moduleName?: string;
-    /**
-     * Translated text for the close button.
-     */
-    closeButtonText?: string;
-    /**
-     * Translated release notes.
-     *
-     * @example
-     *
-     * ```tsx
-     * {
-     *     "0.1.2": {
-     *         date: '20.10.2023',
-     *         content: (
-     *             <div className='padding-left-15'>
-     *                 Summary
-     *                 • Feature 1
-     *                 • Feature 2
-     *             </div>
-     *         ),
-     *     }
-     * }
-     * ```
-     */
-    translatedReleaseNotes: ReleaseNotesData;
-    /**
-     * Specifies the current module version.
-     */
-    currentVersion: string;
-    /**
-     * Specifies the item in the localStorage that is used to save the last read module version.
-     */
-    RELEASE_NOTES_ITEM: string;
-    /**
-     * Enables the content of the dialog to scroll when it overflows.
-     * This means the dialog body scrolls instead of the entire dialog.
-     */
-    useOverflow?: boolean;
-};
-declare const ReleaseNotesDialog: (props: ReleaseNotesDialogProps) => import("react/jsx-runtime").JSX.Element;
-export default ReleaseNotesDialog;

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-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"));
-const setReleaseNotesItem = (props) => {
-    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
-    props.setShowReleaseNotes(false);
-};
-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, { onClick: () => setReleaseNotesItem(props), children: closeButtonText || 'Close' }), onClose: () => setReleaseNotesItem(props) }));
-};
-exports.default = ReleaseNotesDialog;

package/lib/es/components/dialog/SaveDialog.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import { type BaseDialogProps } from './Dialog';
-export type SaveDialogProps = BaseDialogProps & {
-    /**
-     * The content of the dialog body itself.
-     */
-    content: string | React.ReactNode;
-    /**
-     * A callback fired when the cancel button is clicked or the dialog is closed.
-     */
-    onClickCancel: VoidFunction;
-    /**
-     * A callback fired when the discard button is clicked.
-     */
-    onClickDiscard: VoidFunction;
-    /**
-     * A callback fired when the confirmation button is clicked.
-     */
-    onClickConfirm: VoidFunction;
-    /**
-     * The content of the discard button. (Usually a text, can also be a FormattedMessage component).
-     */
-    discardButtonText: string | React.ReactNode;
-    /**
-     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
-     */
-    cancelButtonText: string | React.ReactNode;
-    /**
-     * The content of the confirmation button. Since it is a node, it can be a simple text
-     * or any JSX node like a div element with an icon and a text.
-     */
-    confirmButtonText: string | React.ReactNode;
-};
-declare const SaveDialog: (props: SaveDialogProps) => import("react/jsx-runtime").JSX.Element;
-export default SaveDialog;