@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

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

@@ -1,42 +1,106 @@
+import React, { type PropsWithChildren } from 'react';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type BaseDialogProps = {
+    /**
+     * Opens the dialog when set to `true`.
+     * @default false
+     */
+    show: boolean;
+    /**
+     * The dialog title (can also be a FormattedMessage component).
+     */
+    title?: React.ReactNode;
+    /**
+     * The dialog header subtitle content.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Shows a close button when set to `true`.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * A callback function invoked when the dialog closes.
+     */
+    onClose?: () => void;
+    /**
+     * Defined how large the dialog will be rendered.
+     * By default, the dialog has a medium size and thus it can be omitted.
+     *
+     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     * @default 'md'
+     */
+    bsSize?: DialogSize;
+    /**
+     * Enables or disabled closing the dialog via esc key.
+     * @default false
+     */
+    disableEsc?: boolean;
+    /**
+     * Enables the modal body to overflow and use inline scrolling if needed.
+     * @default false
+     */
+    useOverflow?: boolean;
+    /**
+     * Show Header and Footer Borders for the "xs" dialog
+     * @default false
+     */
+    showXsDialogBorders?: boolean;
+    /**
+     * Additional classes for the modal element.
+     */
+    className?: string;
+};
+export type DialogProps = BaseDialogProps & {
+    /**
+     * The dialog body content.
+     */
+    body?: React.ReactNode;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-body element.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
+    /**
+     * Allows to add additional buttons to the dialog header.
+     */
+    headerButtons?: React.ReactNode;
+    /**
+     * Deprecate to align with other dialog callbacks.
+     * @deprecated please use `onClose`
+     */
+    onHide?: VoidFunction;
+    /**
+     * A callback fired when esc key is pressed and the dialog is about to close.
+     */
+    onEsc?: VoidFunction;
+    /**
+     * A callback function to be executed before closing the dialog. If the function returns
+     * `false` the dialog will not be closed
+     * @returns
+     */
+    onCloseValidation?: () => boolean;
+};
+declare const Dialog: {
+    (props: PropsWithChildren<DialogProps>): React.ReactPortal;
+    Title: (props: import("./DialogHeader").DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...remainingProps }: React.PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: React.PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
+    SIZE_XS: "xs";
+    SIZE_SM: "sm";
+    SIZE_MD: "md";
+    SIZE_LG: "lg";
+    SIZE_XL: "xl";
+    SIZE_FULL: "full";
+    SIZE_FULL_WIDTH: "fullwidth";
+    SIZE_FULL_HEIGHT: "fullheight";
+    SIZE_FULL_SCREEN: "fullscreen";
+};
 export default Dialog;
-declare function Dialog(props: any): import("react-dom/node_modules/@types/react").ReactPortal;
-declare namespace Dialog {
-    const SIZE_SM: string;
-    const SIZE_MD: string;
-    const SIZE_LG: string;
-    const SIZE_XL: string;
-    const SIZE_FULL: string;
-    const SIZE_FULL_WIDTH: string;
-    const SIZE_FULL_HEIGHT: string;
-    const SIZE_FULL_SCREEN: string;
-    namespace defaultProps {
-        const show: boolean;
-        function onHide(): void;
-        function onEsc(): void;
-        const className: string;
-        const showCloseButton: boolean;
-        const disableEsc: boolean;
-        const useOverflow: boolean;
-        function onCloseValidation(): boolean;
-    }
-    const propTypes: {
-        body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        headerButtons: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        bodyClassName: PropTypes.Requireable<string>;
-        footerClassName: PropTypes.Requireable<string>;
-        onHide: PropTypes.Requireable<(...args: any[]) => any>;
-        onEsc: 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>;
-    };
-}
-import PropTypes from "prop-types";

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

@@ -2,32 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+const react_1 = require("react");
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const activeElement_1 = tslib_1.__importDefault(require("dom-helpers/activeElement"));
-const react_transition_group_1 = require("react-transition-group");
+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 useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
+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"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
 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, showCloseButton, useOverflow, bsSize, show, onHide, disableEsc, onEsc, onCloseValidation } = props, remainingProps = tslib_1.__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_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 [open, setOpen] = (0, react_1.useState)(show);
-    const dialogWrapperRef = (0, react_1.useRef)();
+    const dialogWrapperRef = (0, react_1.useRef)(null);
+    const onCloseCallback = onClose !== null && onClose !== void 0 ? onClose : onHide;
     const modalRoot = (0, portalRoot_1.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] = (0, react_1.useState)();
     (0, useFocusTrap_1.default)(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
@@ -39,43 +40,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();
         }
     };
-    (0, useAfterMount_1.default)(() => {
+    const [previousShow, setPreviousShow] = (0, react_1.useState)(show);
+    if (show !== previousShow) {
         setOpen(show);
         toggleBodyClass(show);
-    }, [show]);
+        setPreviousShow(show);
+    }
     (0, useEsc_1.default)(() => {
         if (!dialogWrapperRef || !dialogWrapperRef.current) {
             return;
         }
         const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = (0, activeElement_1.default)(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 = (0, activeElement_1.default)(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 = (0, classnames_1.default)('modal', 'show', className);
-    const modalDialogClasses = (0, classnames_1.default)(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 react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, Object.assign({ in: open, timeout: 200, classNames: 'modal', unmountOnExit: true, onEntered: handleEntered }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: modalClasses, tabIndex: 0, role: 'dialog', ref: dialogWrapperRef }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-content' }, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons, showCloseButton: showCloseButton, onClose: handleClose })), 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)("div", { className: 'modal-backdrop' })] })) })), modalRoot);
+    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 === '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, Object.assign({ 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', 
+                // 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, 
+                        // @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);
 };
+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';
@@ -84,15 +127,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_1.default), { body: prop_types_1.default.node, footer: prop_types_1.default.node, headerButtons: prop_types_1.default.node, className: prop_types_1.default.string, bodyClassName: prop_types_1.default.string, footerClassName: prop_types_1.default.string, onHide: prop_types_1.default.func, onEsc: prop_types_1.default.func });
 exports.default = Dialog;

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

@@ -2,18 +2,12 @@
 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @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"]);
+    var { className = '', children } = _a, remainingProps = tslib_1.__rest(_a, ["className", "children"]);
     const classes = (0, classnames_1.default)('modal-body', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
-};
-DialogBody.defaultProps = {
-    className: '',
-};
-DialogBody.propTypes = {
-    className: prop_types_1.default.string,
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes, "aria-label": 'dialog body' }, { children: children })));
 };
 exports.default = DialogBody;

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

@@ -2,18 +2,15 @@
 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const DialogFooter = (_a) => {
-    var { className, children } = _a, remainingProps = tslib_1.__rest(_a, ["className", "children"]);
-    const footerClassNames = (0, classnames_1.default)('modal-footer', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: footerClassNames }, { children: children })));
-};
-DialogFooter.defaultProps = {
-    className: '',
-};
-DialogFooter.propTypes = {
-    className: prop_types_1.default.string,
+const dialogContext_1 = require("./dialogContext");
+const DialogFooter = (props) => {
+    const { className = '', children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
+    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 })));
 };
 exports.default = DialogFooter;

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

@@ -3,20 +3,20 @@ 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const DialogHeader = props => {
-    const { title, subtitle, headerButtons, showCloseButton, onClose } = props, remainingProps = tslib_1.__rest(props, ["title", "subtitle", "headerButtons", "showCloseButton", "onClose"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: 'modal-header' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-header-text' }, { 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 && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerButtons, (0, jsx_runtime_1.jsx)("div", { className: 'modal-header-buttons-spacer' })] })), showCloseButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: onClose, "data-testid": 'close' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) })))] }))] })));
-};
-DialogHeader.defaultProps = {
-    showCloseButton: true,
-    onClose: () => { },
-};
-DialogHeader.propTypes = {
-    title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
-    subtitle: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    showCloseButton: prop_types_1.default.bool,
-    onClose: prop_types_1.default.func,
-    headerButtons: prop_types_1.default.node,
+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 { 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", 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' }) })))] }))] })));
 };
 exports.default = DialogHeader;

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

@@ -0,0 +1,46 @@
+"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");
+// @ts-ignore-next-line importsNotUsedAsValues
+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, 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' }), 
+        // 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,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/lib/es/components/dialog/InfoDialog.js

@@ -2,14 +2,12 @@
 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
-const InfoDialog = props => {
-    const { content, onClose, className } = props;
+const InfoDialog = (props) => {
+    const { content, className } = props, remainingProps = tslib_1.__rest(props, ["content", "className"]);
     const dialogClassName = `${className ? className : ''} info-dialog`;
-    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, props, { body: content, onHide: onClose, className: dialogClassName }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, className: dialogClassName }));
 };
-InfoDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes_1.default), { content: prop_types_1.default.node });
 exports.default = InfoDialog;