@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/datepicker/DayPicker.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { DayPicker as ReactDayPicker } from 'react-day-picker';
+import { format, isValid, parse } from 'date-fns';
+import * as locales from 'date-fns/locale';
+import noop from 'lodash/fp/noop';
+import debounce from 'lodash/fp/debounce';
+import 'react-day-picker/dist/style.css';
+import useClickOutside from '../../hooks/useClickOutside';
+import usePopperDropdown from '../../hooks/usePopperDropdown';
+import useKey from '../../hooks/useKey';
+import ClearableInput from '../clearableInput/ClearableInput';
+import classNames from 'classnames';
+const DayPicker = (props) => {
+    const { id, selected, inputProps = {}, alignRight, bsSize = '', locale = 'en-GB', footer, inline, showOutsideDays = true, fixedWeeks = true, mode = 'single', dateFormat, placeholder, isClearable = false, closeOnSelect = true, onSelectChange = noop, defaultMonth, startMonth, endMonth, inputClassName, className, } = props;
+    const isSingleMode = mode === 'single';
+    const isMultipleMode = mode === 'multiple';
+    const isRangeMode = mode === 'range';
+    const isControlled = selected !== undefined;
+    const [internalSelected, setInternalSelected] = useState();
+    const selectedValue = isControlled ? selected : internalSelected;
+    const narrowedSelected = (() => {
+        if (isSingleMode) {
+            return selectedValue instanceof Date ? selectedValue : undefined;
+        }
+        if (isMultipleMode) {
+            return Array.isArray(selectedValue) ? selectedValue : undefined;
+        }
+        return isDateRange(selectedValue) ? selectedValue : undefined;
+    })();
+    const selectionProps = { selected: narrowedSelected };
+    const resolvedLocale = resolveLocale(locale);
+    const [internalInputValue, setInternalInputValue] = useState('');
+    const inputValue = isControlled && !isSingleMode
+        ? formatSelectedForInput(narrowedSelected, locale, mode, dateFormat)
+        : internalInputValue;
+    // const inputValue = isSingleMode
+    //     ? internalInputValue
+    //     : formatSelectedForInput(narrowedSelected, locale, mode, dateFormat);
+    // const inputValue = internalInputValue;
+    // This ensures that whenever the external selected prop changes, the input field gets updated accordingly
+    useEffect(() => {
+        if (isSingleMode && isControlled && selected instanceof Date) {
+            setInternalInputValue(formatDate(selected, locale, dateFormat));
+        }
+    }, [selected, isSingleMode, isControlled, locale, dateFormat]);
+    const handleInputChange = (newValue) => doHandleInputValue(newValue);
+    const handleInputChangeNative = (event) => doHandleInputValue(event.currentTarget.value);
+    const debouncedParseInput = useRef(debounce(300, (rawValue) => {
+        const parsed = parseDateString(rawValue, locale);
+        console.log(parsed);
+        const isValid = !!parsed;
+        setInternalSelected(parsed);
+        if (isSingleMode && 'onInputChange' in props && props.onInputChange) {
+            props.onInputChange(rawValue, parsed, isValid);
+        }
+        const shouldNotify = parsed !== undefined || rawValue === '';
+        if (shouldNotify) {
+            // parse to desired dateFormat for use on outside
+            const formattedSelected = dateFormat ? parseDateString(rawValue, locale, dateFormat) : parsed;
+            onSelectChange(formattedSelected, {});
+        }
+    })).current;
+    const doHandleInputValue = (rawValue) => {
+        // const parsed = parseDateString(rawValue, locale, dateFormat);
+        // const isValid = !!parsed;
+        // if (!isControlled) {
+        //     // && isValidDate(parsed); // TODO: optional second validation
+        //     setInternalInputValue(rawValue);
+        //     setInternalSelected(parsed as typeof props.selected);
+        // } else if (isSingleMode) {
+        //     setInternalInputValue(rawValue);
+        // }
+        // if (isSingleMode && 'onInputChange' in props && props.onInputChange) {
+        //     props.onInputChange(rawValue, parsed, isValid);
+        // }
+        // const shouldNotify = parsed !== undefined || rawValue === '';
+        // if (shouldNotify) {
+        //     onSelectChange(parsed as typeof selected, {});
+        // }
+        setInternalInputValue(rawValue); // always update input state
+        debouncedParseInput(rawValue); // defer parsing & callback execution
+    };
+    const handleInputBlur = () => {
+        closePopper();
+        if (!isSingleMode) {
+            return;
+        }
+        const parsed = parseDateString(internalInputValue, locale, dateFormat);
+        if (parsed && isValid(parsed)) {
+            setInternalSelected(parsed);
+            onSelectChange?.(parsed, {});
+            setInternalInputValue(formatDate(parsed, locale, dateFormat));
+        }
+    };
+    const handleSelectedChange = (newValue) => {
+        if (!isControlled) {
+            setInternalSelected(newValue);
+        }
+    };
+    const handleClearSelection = () => {
+        handleInputChange('');
+        handleSelectedChange(undefined);
+        setInternalInputValue('');
+        if (isControlled) {
+            setInternalSelected(undefined);
+        }
+        if (isRangeMode && 'onChange' in props && props.onChange) {
+            props.onChange(undefined);
+        }
+        onSelectChange(undefined, {});
+    };
+    const handleDaySelect = (selected, triggerDate, modifiers, event) => {
+        // safe because of discriminated union
+        handleSelectedChange(selected);
+        // trigger callback
+        onSelectChange(selected, modifiers);
+        if (isSingleMode && !isControlled) {
+            // should be the only place formatting is applied to the input
+            setInternalInputValue(formatDate(selected, locale, dateFormat));
+        }
+        if (closeOnSelect) {
+            closePopper();
+        }
+    };
+    const { isOpen: isPopperOpen, open: openPopper, close: closePopper, referenceRef: popperRef, popperElementRef: setPopperElement, popperStyles, popperAttributes, } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });
+    const inputRef = useRef(null);
+    const popperElementRef = useRef(null);
+    const assignPopperElement = (element) => {
+        popperElementRef.current = element;
+        setPopperElement(element);
+    };
+    const outsideRef = useClickOutside(event => {
+        const target = event.target;
+        if (!target) {
+            closePopper();
+            return;
+        }
+        const clickedWithinTrigger = popperRef.current?.contains(target);
+        const clickedWithinInput = inputRef.current?.contains(target);
+        if (clickedWithinTrigger || clickedWithinInput) {
+            return;
+        }
+        closePopper();
+    }, undefined, isPopperOpen);
+    const handleInputClick = () => {
+        openPopper();
+        inputRef.current?.focus();
+    };
+    useKey('Enter', event => {
+        const target = event.target;
+        const isWithinReference = !!(target && popperRef.current?.contains(target));
+        const isWithinPopper = !!(target && popperElementRef.current?.contains(target));
+        if (!isWithinReference && !isWithinPopper) {
+            return;
+        }
+        event.preventDefault();
+        if (!isPopperOpen) {
+            handleInputClick();
+            return;
+        }
+        if (isPopperOpen && closeOnSelect) {
+            onSelectChange(narrowedSelected, {});
+            closePopper();
+        }
+    });
+    useKey('Escape', () => {
+        if (isPopperOpen) {
+            closePopper();
+        }
+    });
+    const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;
+    // Render day picker inline without a dropdown
+    if (inline) {
+        return (_jsxs("div", { className: `display-flex flex-column justify-content-between ${className}`, children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }));
+    }
+    const clearableInputProps = {
+        ...inputProps,
+        readOnly: !isSingleMode,
+        style: {
+            background: 'var(--color-white)',
+            ...(inputProps?.style ?? {}),
+        },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: popperRef, className: `form-group ${className}`, children: _jsxs("div", { className: 'input-group', children: [_jsx("span", { className: 'input-group-addon', onClick: handleInputClick, children: _jsx("span", { className: 'rioglyph rioglyph-calendar', "aria-hidden": 'true' }) }), isClearable && (_jsx(ClearableInput, { id: id, autoComplete: 'off', placeholder: placeholder, ...clearableInputProps, type: 'text', value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onClear: handleClearSelection, onBlur: handleInputBlur, 
+                            // hasError={hasError}
+                            ref: inputRef, inputClassName: inputClassName })), !isClearable && (_jsx("input", { id: id, size: 12, type: 'text', autoComplete: 'off', placeholder: placeholder, ...inputProps, value: inputValue, onChange: handleInputChangeNative, onClick: handleInputClick, onBlur: handleInputBlur, ref: inputRef, readOnly: !isSingleMode, className: classNames('ClearableInput form-control bg-white', inputClassName) }))] }) }), isPopperOpen && (_jsx("div", { style: popperStyles, className: 'DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border', ...popperAttributes, ref: assignPopperElement, role: 'dialog', "aria-label": 'DayPicker calendar', children: _jsxs("div", { ref: outsideRef, className: 'display-flex flex-column justify-content-between', children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }) }))] }));
+};
+const isDateRange = (value) => {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const range = value;
+    const fromIsValid = range.from === undefined || range.from instanceof Date;
+    const toIsValid = range.to === undefined || range.to instanceof Date;
+    return fromIsValid && toIsValid;
+};
+const resolveLocale = (localeCode) => {
+    const baseCode = localeCode.split('-')[0]; // 'de-DE' → 'de'
+    return (locales[baseCode] || locales[localeCode] || locales.enGB);
+};
+const formatDate = (date, localeCode, dateFormat) => {
+    if (!date) {
+        return '';
+    }
+    if (dateFormat) {
+        return format(date, dateFormat); // use override
+    }
+    // fallback to locale-based formatting
+    return new Intl.DateTimeFormat(localeCode).format(date);
+};
+const formatSelectedForInput = (selected, localeCode, mode, dateFormat) => {
+    if (!selected) {
+        return '';
+    }
+    const formatFn = (date) => dateFormat ? format(date, dateFormat) : new Intl.DateTimeFormat(localeCode).format(date);
+    if (mode === 'single' && selected instanceof Date) {
+        return formatFn(selected);
+    }
+    if (mode === 'multiple' && Array.isArray(selected)) {
+        return selected.map(formatFn).join(', ');
+    }
+    if (mode === 'range' && typeof selected === 'object' && 'from' in selected) {
+        const { from, to } = selected;
+        if (!from || !to) {
+            return '';
+        }
+        return [from, to].filter(Boolean).map(formatFn).join(' – ');
+    }
+    return '';
+};
+const localeFormatMap = {
+    'bg-BG': 'dd.MM.yyyy',
+    'cs-CZ': 'dd.MM.yyyy',
+    'da-DK': 'dd-MM-yyyy',
+    'de-DE': 'dd.MM.yyyy',
+    'el-GR': 'dd/MM/yyyy',
+    'en-GB': 'dd/MM/yyyy',
+    'es-ES': 'dd/MM/yyyy',
+    'et-EE': 'dd.MM.yyyy',
+    'fi-FI': 'dd.MM.yyyy',
+    'fr-FR': 'dd/MM/yyyy',
+    'hr-HR': 'dd.MM.yyyy',
+    'hu-HU': 'yyyy. MM. dd.',
+    'it-IT': 'dd/MM/yyyy',
+    'lt-LT': 'dd-MM-yyyy',
+    'lv-LV': 'dd.MM.yyyy',
+    'nb-NO': 'dd.MM.yyyy',
+    'nl-NL': 'dd-MM-yyyy',
+    'pl-PL': 'dd.MM.yyyy',
+    'pt-BR': 'dd/MM/yyyy',
+    'pt-PT': 'dd/MM/yyyy',
+    'ro-RO': 'dd.MM.yyyy',
+    'sk-SK': 'dd.MM.yyyy',
+    'sl-SI': 'dd.MM.yyyy',
+    'sv-SE': 'yyyy-MM-dd',
+};
+const getFormatForLocale = (localeCode, fallback = 'yyyy-MM-dd') => {
+    return localeFormatMap[localeCode] || fallback;
+};
+const parseDateString = (value, localeCode, dateFormat) => {
+    if (!value) {
+        return undefined;
+    }
+    const formatToUse = dateFormat || getFormatForLocale(localeCode, dateFormat);
+    const parsed = parse(value, formatToUse, new Date());
+    return isValid(parsed) ? parsed : undefined;
+};
+export default DayPicker;

package/src/components/dialog/ConfirmationDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type ConfirmationDialogProps = BaseDialogProps & {
+    content?: string | React.ReactNode;
+    onClickConfirm?: VoidFunction;
+    onClickCancel?: VoidFunction;
+    cancelButtonText?: string | React.ReactNode;
+    confirmButtonText?: string | React.ReactNode;
+    disableConfirm?: boolean;
+};
+declare const ConfirmationDialog: (props: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default ConfirmationDialog;

package/src/components/dialog/ConfirmationDialog.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import noop from 'lodash/fp/noop';
+import Button from '../button/Button';
+import Dialog from './Dialog';
+const ConfirmationDialog = (props) => {
+    const { content, onClickCancel = noop, cancelButtonText, onClickConfirm = noop, confirmButtonText, disableConfirm, ...remainingProps } = props;
+    const footer = (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), _jsx(Button, { bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm, children: confirmButtonText })] }));
+    return (_jsx(Dialog, { ...remainingProps, body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true }));
+};
+export default ConfirmationDialog;

package/src/components/dialog/Dialog.d.ts

@@ -0,0 +1,116 @@
+import React, { type PropsWithChildren } from 'react';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullheight-lg' | 'fullheight-xl' | '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` 'fullheight-lg' 'fullheight-xl' `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
+     */
+    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 }: PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
+    SIZE_XS: "xs";
+    SIZE_SM: "sm";
+    SIZE_MD: "md";
+    SIZE_LG: "lg";
+    SIZE_XL: "xl";
+    SIZE_FULL: "full";
+    SIZE_FULL_WIDTH: "fullwidth";
+    SIZE_FULL_HEIGHT: "fullheight";
+    SIZE_FULL_HEIGHT_LG: "fullheight-lg";
+    SIZE_FULL_HEIGHT_XL: "fullheight-xl";
+    SIZE_FULL_SCREEN: "fullscreen";
+};
+export default Dialog;

package/src/components/dialog/Dialog.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+import useEsc from '../../hooks/useEsc';
+import DialogHeader from './DialogHeader';
+import DialogBody from './DialogBody';
+import DialogFooter from './DialogFooter';
+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, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop, onClose, disableEsc = false, onEsc = noop, onCloseValidation = () => true, children, ...remainingProps } = props;
+    const [open, setOpen] = useState(show);
+    const dialogWrapperRef = useRef(null);
+    const onCloseCallback = onClose ?? onHide;
+    const modalRoot = getOrCreatePortalRoot();
+    const shouldReduceMotion = 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] = useState();
+    useFocusTrap(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] = useState(show);
+    if (show !== previousShow) {
+        setOpen(show);
+        toggleBodyClass(show);
+        setPreviousShow(show);
+    }
+    useEsc(() => {
+        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 = classNames('modal', 'show', className);
+    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 === '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 ReactDOM.createPortal(_jsx(DialogContextProvider, { value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }, children: _jsx(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 && (_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: [_jsx(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: _jsxs("div", { className: 'modal-content', children: [hasChildren && children, !hasChildren && (_jsxs(_Fragment, { children: [title && (_jsx(DialogHeader, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && _jsx(DialogBody, { className: bodyClassName, children: body }), footer && _jsx(DialogFooter, { className: footerClassName, children: footer })] }))] }) }), _jsx(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;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+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';
+export default Dialog;

package/src/components/dialog/DialogBody.d.ts

@@ -0,0 +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;

package/src/components/dialog/DialogBody.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const DialogBody = ({ className = '', children, ...remainingProps }) => {
+    const classes = classNames('modal-body', className);
+    return (_jsx("div", { ...remainingProps, className: classes, "aria-label": 'dialog body', children: children }));
+};
+export default DialogBody;

package/src/components/dialog/DialogFooter.d.ts

@@ -0,0 +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;

package/src/components/dialog/DialogFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useDialogContext } from './dialogContext';
+const DialogFooter = (props) => {
+    const { className = '', children, ...remainingProps } = props;
+    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", { ...remainingProps, className: footerClassNames, "aria-label": 'dialog footer', children: children }));
+};
+export default DialogFooter;

package/src/components/dialog/DialogHeader.d.ts

@@ -0,0 +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;

package/src/components/dialog/DialogHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import { useDialogContext } from './dialogContext';
+const DialogHeader = (props) => {
+    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;
+    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", { ...remainingProps, className: headerClasses, "aria-label": 'dialog header', children: [_jsxs("div", { className: headerTextClasses, children: [subtitle && _jsx("div", { className: 'modal-header-subtitle', children: subtitle }), _jsx("div", { className: 'modal-header-title', children: title })] }), _jsxs("div", { className: 'modal-header-buttons', children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_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: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) }))] })] }));
+};
+export default DialogHeader;

package/src/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;