@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/components/dialog/Dialog.js

@@ -1,31 +1,32 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import activeElement from 'dom-helpers/activeElement';
-import { CSSTransition } from 'react-transition-group';
+import noop from 'lodash/fp/noop';
+import { AnimatePresence, motion } from 'framer-motion';
 import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 import useEsc from '../../hooks/useEsc';
-import useAfterMount from '../../hooks/useAfterMount';
+import '../../hooks/useAfterMount';
 import DialogHeader from './DialogHeader';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
-import baseDialogPropTypes from './baseDialogPropTypes';
 import useFocusTrap from '../../hooks/useFocusTrap';
+import { DialogContextProvider } from './dialogContext';
 const MODAL_DIALOG_CLASS = 'modal-dialog';
 const MODAL_OPEN_CLASS = 'modal-open';
-const Dialog = props => {
-    const { title, subtitle, body, footer, headerButtons, className, bodyClassName, footerClassName, showCloseButton, useOverflow, bsSize, show, onHide, disableEsc, onEsc, onCloseValidation } = props, remainingProps = __rest(props, ["title", "subtitle", "body", "footer", "headerButtons", "className", "bodyClassName", "footerClassName", "showCloseButton", "useOverflow", "bsSize", "show", "onHide", "disableEsc", "onEsc", "onCloseValidation"]);
+const Dialog = (props) => {
+    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children } = props, remainingProps = __rest(props, ["title", "subtitle", "body", "footer", "headerButtons", "className", "bodyClassName", "footerClassName", "showXsDialogBorders", "showCloseButton", "useOverflow", "bsSize", "show", "onHide", "onClose", "disableEsc", "onEsc", "onCloseValidation", "children"]);
     const [open, setOpen] = useState(show);
-    const dialogWrapperRef = useRef();
+    const dialogWrapperRef = useRef(null);
+    const onCloseCallback = onClose !== null && onClose !== void 0 ? onClose : onHide;
     const modalRoot = getOrCreatePortalRoot();
-    // Use a setter function for the focus trap as it would nor re-render
+    // Use a setter function for the focus trap as it would not re-render
     // and fails to set the focus listener
     const [focusTrapRef, setFocusTrapRef] = useState();
     useFocusTrap(focusTrapRef);
-    const toggleBodyClass = add => {
+    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
@@ -37,43 +38,85 @@ const Dialog = props => {
             document.body.classList.remove(MODAL_OPEN_CLASS);
         }
     };
-    const handleClose = usedEscapeKey => {
+    const handleCloseButton = () => closeDialog(true);
+    const closeDialog = (usedEscapeKey) => {
         if (onCloseValidation()) {
             setOpen(false);
-            onHide();
+            onCloseCallback();
             usedEscapeKey && onEsc();
         }
     };
-    useAfterMount(() => {
+    const [previousShow, setPreviousShow] = useState(show);
+    if (show !== previousShow) {
         setOpen(show);
         toggleBodyClass(show);
-    }, [show]);
+        setPreviousShow(show);
+    }
     useEsc(() => {
         if (!dialogWrapperRef || !dialogWrapperRef.current) {
             return;
         }
         const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = activeElement(document);
+        const currentActiveElement = document.activeElement;
         // Only allow to close the dialog when the focus is inside the dialog
         if (!disableEsc && dialogElement.contains(currentActiveElement)) {
-            handleClose(true);
+            closeDialog(true);
         }
     });
-    const handleEntered = () => {
+    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.
+        // @ts-ignore
+        if (definition.opacity === 0) {
+            return;
+        }
         const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = activeElement(document);
+        const currentActiveElement = document.activeElement;
         // Set the focus to the dialog if no element inside has focus already. Otherwise, focused
-        // elements like inputs would loos their focus to the dialog.
+        // 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
-        if (!dialogElement.contains(currentActiveElement)) {
+        // 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();
         }
     };
     const modalClasses = classNames('modal', 'show', className);
-    const modalDialogClasses = classNames(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
-    return ReactDOM.createPortal(_jsx(CSSTransition, Object.assign({ in: open, timeout: 200, classNames: 'modal', unmountOnExit: true, onEntered: handleEntered }, { children: _jsxs("div", Object.assign({}, remainingProps, { className: modalClasses, tabIndex: 0, role: 'dialog', ref: dialogWrapperRef }, { children: [_jsx("div", Object.assign({ ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: _jsxs("div", Object.assign({ className: 'modal-content' }, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons, showCloseButton: showCloseButton, onClose: handleClose })), body && _jsx(DialogBody, Object.assign({ className: bodyClassName }, { children: body })), footer && _jsx(DialogFooter, Object.assign({ className: footerClassName }, { children: footer }))] })) })), _jsx("div", { className: 'modal-backdrop' })] })) })), modalRoot);
+    const isSmallestDialog = bsSize === 'xs';
+    const hasChildren = !!children;
+    const modalDialogClasses = classNames(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 === 'fullscreen' && 'modal-fullscreen');
+    const spring = {
+        type: 'spring',
+        damping: 33,
+        stiffness: 500,
+    };
+    const springXs = {
+        type: 'spring',
+        damping: 25,
+        stiffness: 400,
+    };
+    return ReactDOM.createPortal(_jsx(DialogContextProvider, Object.assign({ value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton } }, { children: _jsx(AnimatePresence
+        // Disable any initial animations on children that
+        // are present when the component is first rendered
+        , Object.assign({ 
+            // Disable any initial animations on children that
+            // are present when the component is first rendered
+            initial: false, 
+            // Only render one component at a time.
+            // The exiting component will finish its exit
+            // animation before entering component is rendered
+            exitBeforeEnter: true }, { children: open && (_jsxs("div", Object.assign({}, remainingProps, { className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
+                // Make sure it has a tabIndex to focus the dialog so the close on esc works.
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>
+                tabIndex: 0 }, { children: [_jsx(motion.div, Object.assign({ initial: { opacity: 0, y: '-50%' }, animate: { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: { opacity: 0, y: '-150%' }, transition: { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
+                        // @ts-ignore
+                        ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: _jsxs("div", Object.assign({ className: 'modal-content' }, { children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, Object.assign({ className: bodyClassName }, { children: body })), footer && _jsx(DialogFooter, Object.assign({ className: footerClassName }, { children: footer }))] }))] })) })), _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.1 }, className: 'modal-backdrop' })] }))) })) })), modalRoot);
 };
+Dialog.Title = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+Dialog.SIZE_XS = 'xs';
 Dialog.SIZE_SM = 'sm';
 Dialog.SIZE_MD = 'md'; // default
 Dialog.SIZE_LG = 'lg';
@@ -82,15 +125,4 @@ Dialog.SIZE_FULL = 'full';
 Dialog.SIZE_FULL_WIDTH = 'fullwidth';
 Dialog.SIZE_FULL_HEIGHT = 'fullheight';
 Dialog.SIZE_FULL_SCREEN = 'fullscreen';
-Dialog.defaultProps = {
-    show: false,
-    onHide: () => { },
-    onEsc: () => { },
-    className: '',
-    showCloseButton: true,
-    disableEsc: false,
-    useOverflow: false,
-    onCloseValidation: () => true,
-};
-Dialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes), { body: PropTypes.node, footer: PropTypes.node, headerButtons: PropTypes.node, className: PropTypes.string, bodyClassName: PropTypes.string, footerClassName: PropTypes.string, onHide: PropTypes.func, onEsc: PropTypes.func });
 export default Dialog;

package/components/dialog/DialogBody.d.ts

@@ -1,16 +1,9 @@
+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;
-declare function DialogBody({ className, children, ...remainingProps }: {
-    [x: string]: any;
-    className: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace DialogBody {
-    namespace defaultProps {
-        const className: string;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/components/dialog/DialogBody.js

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

package/components/dialog/DialogFooter.d.ts

@@ -1,16 +1,9 @@
+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;
-declare function DialogFooter({ className, children, ...remainingProps }: {
-    [x: string]: any;
-    className: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace DialogFooter {
-    namespace defaultProps {
-        const className: string;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/components/dialog/DialogFooter.js

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

package/components/dialog/DialogHeader.d.ts

@@ -1,18 +1,18 @@
+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;
-declare function DialogHeader(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace DialogHeader {
-    namespace defaultProps {
-        const showCloseButton: boolean;
-        function onClose(): void;
-    }
-    namespace propTypes {
-        export const title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        export const subtitle: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const showCloseButton_1: PropTypes.Requireable<boolean>;
-        export { showCloseButton_1 as showCloseButton };
-        const onClose_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onClose_1 as onClose };
-        export const headerButtons: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import PropTypes from "prop-types";

package/components/dialog/DialogHeader.js

@@ -1,20 +1,20 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
-const DialogHeader = props => {
-    const { title, subtitle, headerButtons, showCloseButton, onClose } = props, remainingProps = __rest(props, ["title", "subtitle", "headerButtons", "showCloseButton", "onClose"]);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: 'modal-header' }, { children: [_jsxs("div", Object.assign({ className: 'modal-header-text' }, { children: [subtitle && _jsx("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), _jsx("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), _jsxs("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), showCloseButton && (_jsx("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: onClose, "data-testid": 'close' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
-};
-DialogHeader.defaultProps = {
-    showCloseButton: true,
-    onClose: () => { },
-};
-DialogHeader.propTypes = {
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    showCloseButton: PropTypes.bool,
-    onClose: PropTypes.func,
-    headerButtons: PropTypes.node,
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import { useDialogContext } from './dialogContext';
+const DialogHeader = (props) => {
+    const { title, subtitle, headerButtons, onCloseButtonClick = noop } = props, remainingProps = __rest(props, ["title", "subtitle", "headerButtons", "onCloseButtonClick"]);
+    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();
+    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
+    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
+    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');
+    const headerTextClasses = classNames('modal-header-text', !doShowXsDialogBorders && 'padding-bottom-0 width-100pct');
+    const handleClose = (event) => {
+        onCloseButtonClick(event);
+        onClose(event);
+    };
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: headerClasses, "aria-label": 'dialog header' }, { children: [_jsxs("div", Object.assign({ className: headerTextClasses }, { children: [subtitle && _jsx("div", Object.assign({ className: 'modal-header-subtitle' }, { children: subtitle })), _jsx("div", Object.assign({ className: 'modal-header-title' }, { children: title }))] })), _jsxs("div", Object.assign({ className: 'modal-header-buttons' }, { children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_jsx("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: handleClose, "data-testid": 'close', "aria-label": 'dialog close button' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
 };
 export default DialogHeader;

package/components/dialog/FrameDialog.d.ts

@@ -0,0 +1,31 @@
+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/components/dialog/FrameDialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useState } from 'react';
+import IframeResizer from 'iframe-resizer-react';
+import Dialog from './Dialog';
+import usePostMessage from '../../hooks/usePostMessage';
+export const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';
+export const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';
+export const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';
+const FrameDialog = (props) => {
+    const { eventPrefix = DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;
+    const openDialogEvent = `${eventPrefix}${OPEN_DIALOG_EVENT}`;
+    const closeDialogEvent = `${eventPrefix}${CLOSE_DIALOG_EVENT}`;
+    const [showDialog, setShowDialog] = useState(false);
+    const [remoteDialogUrl, setRemoteDialogUrl] = useState('');
+    const [dialogProps, setDialogProps] = useState({});
+    const { sendMessageToWidget } = usePostMessage(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 (_jsx(Dialog, Object.assign({}, dialogProps, { show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: _jsx(IframeResizer, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
+        // Note: closing the dialog with escape is disabled by default.
+        // The widget would need to handle the 'esc' event and send a message to close it
+        disableEsc: true, className: dialogClassName })));
+};
+export default FrameDialog;

package/components/dialog/InfoDialog.d.ts

@@ -1,18 +1,10 @@
+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;
-declare function InfoDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace InfoDialog {
-    const propTypes: {
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/components/dialog/InfoDialog.js

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

package/components/dialog/MediaDialog.d.ts

@@ -1,58 +1,65 @@
+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;
-declare class MediaDialog extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        currentMediaIndex: number;
-    };
-    handlePrevious(): void;
-    handleNext(): void;
-    renderFallback(): import("react/jsx-runtime").JSX.Element;
-    renderImage(mediaData: any): import("react/jsx-runtime").JSX.Element;
-    renderVideo(mediaData: any): import("react/jsx-runtime").JSX.Element;
-    renderMediaContent(mediaData?: {}): any;
-    renderBody(media: any[] | undefined, currentMediaIndex: any): import("react/jsx-runtime").JSX.Element;
-    renderFooter(props: any): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element | null;
-}
-declare namespace MediaDialog {
-    const MEDIA_TYPE_IMAGE: string;
-    const MEDIA_TYPE_VIDEO: string;
-    namespace defaultProps {
-        const show: boolean;
-        function onClose(): void;
-        const disableEsc: boolean;
-        const useOverflow: boolean;
-        const bsSize: string;
-        const media: never[];
-        const previousButtonText: string;
-        function previousButtonCallback(): void;
-        const nextButtonText: string;
-        function nextButtonCallback(): void;
-    }
-    const propTypes: {
-        media: PropTypes.Validator<(PropTypes.InferProps<{
-            type: PropTypes.Validator<string>;
-            src: PropTypes.Validator<string>;
-            title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            subtitle: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            aspectRatio: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        previousButtonText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        previousButtonCallback: PropTypes.Requireable<(...args: any[]) => any>;
-        nextButtonText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        nextButtonCallback: PropTypes.Requireable<(...args: any[]) => any>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import React from "react";
-import PropTypes from "prop-types";