@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.1

package/lib/es/components/datepicker/DayPicker.js

@@ -1,333 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_day_picker_1 = require("react-day-picker");
-const date_fns_1 = require("date-fns");
-const locales = tslib_1.__importStar(require("date-fns/locale"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
-require("react-day-picker/dist/style.css");
-const useClickOutside_1 = tslib_1.__importDefault(require("../../hooks/useClickOutside"));
-const usePopperDropdown_1 = tslib_1.__importDefault(require("../../hooks/usePopperDropdown"));
-const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
-const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
-const classnames_1 = tslib_1.__importDefault(require("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_1.default, 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] = (0, react_1.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] = (0, react_1.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
-    (0, react_1.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 = (0, react_1.useRef)((0, debounce_1.default)(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 keyboardRef = (0, react_1.useRef)(false);
-    const handleInputBlur = (event) => {
-        // Do not close the dropdown on input blur when the user selects something inside the dropdown itself
-        const nextFocused = event.relatedTarget;
-        const focusInsideDropdown = nextFocused && popperElementRef.current?.contains(nextFocused);
-        if (isDropdownOpen && !focusInsideDropdown) {
-            closePopper();
-        }
-        if (!isSingleMode) {
-            return;
-        }
-        const parsed = parseDateString(internalInputValue, locale, dateFormat);
-        if (parsed && (0, date_fns_1.isValid)(parsed)) {
-            setInternalSelected(parsed);
-            onSelectChange?.(parsed, {});
-            setInternalInputValue(formatDate(parsed, locale, dateFormat));
-        }
-    };
-    const handleOnInputFocus = () => {
-        if (!isDropdownOpen) {
-            openPopper();
-        }
-    };
-    const handleInputKeyPress = (event) => {
-        // Workaround to figure out if the user navigates via keyboard
-        if (event.key === 'Tab') {
-            keyboardRef.current = true;
-        }
-        if (event.key !== 'Enter') {
-            return;
-        }
-        // In case the dropdown is not open but the input is focused, open the dropdown on enter
-        if (!isDropdownOpen) {
-            handleInputClick();
-            return;
-        }
-        // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown
-        if (isDropdownOpen && closeOnSelect) {
-            onSelectChange(narrowedSelected, {});
-            closePopper();
-        }
-    };
-    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 (keyboardRef.current) {
-            // Note: When the date is selected via enter key, assume the user uses keyboard navigation.
-            // In this case the input should be focused to allow to tab to another element in his form.
-            // However, it is not possible to detect according to the event since the event.type is alway "click".
-            // Instead we check if the user used the tab key to focus the day picker.
-            inputRef?.current?.focus();
-        }
-        if (closeOnSelect) {
-            closePopper();
-            keyboardRef.current = false;
-        }
-    };
-    const { isOpen: isDropdownOpen, open: openPopper, close: closePopper, referenceRef: popperRef, popperElementRef: setPopperElement, popperStyles, popperAttributes, } = (0, usePopperDropdown_1.default)({ placement: alignRight ? 'bottom-end' : 'bottom-start' });
-    const inputRef = (0, react_1.useRef)(null);
-    const popperElementRef = (0, react_1.useRef)(null);
-    const assignPopperElement = (element) => {
-        popperElementRef.current = element;
-        setPopperElement(element);
-    };
-    // Close the dropdown when clicking outside the dropdown wrapper.
-    // It also checks if the click happened into the input, in which case the
-    // dropdown will remain open.
-    const outsideRef = (0, useClickOutside_1.default)(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, isDropdownOpen);
-    const handleInputClick = () => {
-        openPopper();
-        inputRef.current?.focus();
-    };
-    // Needed to select all tabbable elements inside the dropdown calendar and to disable the
-    // focus on tab for all of these. This allows the user to tab between multiple inputs on the page
-    // or when having two day pickers side by side. Tabbing from one day picker input to the other will
-    // open and close the dropdown respectively and achieving the same usability as the old DatePicker.
-    // useEffect(() => {
-    //     if (isDropdownOpen && outsideRef.current) {
-    //         // get all buttons to disable the tab on them
-    //         const tabbableElements = (outsideRef.current as HTMLElement).querySelectorAll<HTMLElement>(
-    //             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    //         );
-    //         tabbableElements.forEach((element: Element) => {
-    //             element.setAttribute('tabindex', '-1');
-    //         });
-    //     }
-    // }, [isDropdownOpen, outsideRef]);
-    // Close the dropdown when it is open and when the user presses the "escape" key
-    (0, useKey_1.default)('Escape', event => {
-        const target = event.target;
-        const isInput = inputRef.current && inputRef.current === target;
-        if (isInput && isDropdownOpen) {
-            closePopper();
-        }
-    });
-    (0, react_1.useEffect)(() => {
-        const handleKeyDown = (event) => {
-            if (!isDropdownOpen || !outsideRef.current) {
-                return;
-            }
-            if (event.key === 'Tab') {
-                const focusedInside = outsideRef.current.contains(document.activeElement);
-                if (focusedInside) {
-                    keyboardRef.current = true;
-                    console.log('User tabbed into dropdown');
-                    // Optional: closePopper(); or focus inputRef.current
-                }
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isDropdownOpen]);
-    const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;
-    if (inline) {
-        // Render day picker inline without a dropdown and an input
-        return ((0, jsx_runtime_1.jsxs)("div", { className: `display-flex flex-column justify-content-between ${className}`, children: [(0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { ...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 ? (0, jsx_runtime_1.jsx)("div", { className: 'padding-15', children: footer }) : (0, jsx_runtime_1.jsx)("div", {})] }));
-    }
-    const clearableInputProps = {
-        ...inputProps,
-        readOnly: !isSingleMode,
-        style: {
-            background: 'var(--color-white)',
-            ...(inputProps?.style ?? {}),
-        },
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: popperRef, className: `form-group ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [(0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', onClick: handleInputClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-calendar', "aria-hidden": 'true' }) }), isClearable && ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, { id: id, autoComplete: 'off', placeholder: placeholder, ...clearableInputProps, type: 'text', value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onClear: handleClearSelection, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyPress: handleInputKeyPress, 
-                            // hasError={hasError}
-                            ref: inputRef, inputClassName: inputClassName })), !isClearable && ((0, jsx_runtime_1.jsx)("input", { id: id, size: 12, type: 'text', autoComplete: 'off', placeholder: placeholder, ...inputProps, value: inputValue, onChange: handleInputChangeNative, onClick: handleInputClick, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyDown: handleInputKeyPress, ref: inputRef, readOnly: !isSingleMode, className: (0, classnames_1.default)('ClearableInput form-control bg-white', inputClassName) }))] }) }), isDropdownOpen && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { ref: outsideRef, className: 'display-flex flex-column justify-content-between', children: [(0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { ...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 ? (0, jsx_runtime_1.jsx)("div", { className: 'padding-15', children: footer }) : (0, jsx_runtime_1.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 (0, date_fns_1.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 ? (0, date_fns_1.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 = (0, date_fns_1.parse)(value, formatToUse, new Date());
-    return (0, date_fns_1.isValid)(parsed) ? parsed : undefined;
-};
-exports.default = DayPicker;

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

@@ -1,12 +0,0 @@
-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/lib/es/components/dialog/ConfirmationDialog.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-const ConfirmationDialog = (props) => {
-    const { content, onClickCancel = noop_1.default, cancelButtonText, onClickConfirm = noop_1.default, confirmButtonText, disableConfirm, ...remainingProps } = props;
-    const footer = ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm, children: confirmButtonText })] }));
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true }));
-};
-exports.default = ConfirmationDialog;

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

@@ -1,116 +0,0 @@
-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/lib/es/components/dialog/Dialog.js

@@ -1,133 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const framer_motion_1 = require("framer-motion");
-const portalRoot_1 = require("../../utils/portalRoot");
-const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
-const DialogHeader_1 = tslib_1.__importDefault(require("./DialogHeader"));
-const DialogBody_1 = tslib_1.__importDefault(require("./DialogBody"));
-const DialogFooter_1 = tslib_1.__importDefault(require("./DialogFooter"));
-const useFocusTrap_1 = tslib_1.__importDefault(require("../../hooks/useFocusTrap"));
-const dialogContext_1 = require("./dialogContext");
-const MODAL_DIALOG_CLASS = 'modal-dialog';
-const MODAL_OPEN_CLASS = 'modal-open';
-const Dialog = (props) => {
-    const { title, subtitle, body, footer, headerButtons, className = '', bodyClassName, footerClassName, showXsDialogBorders = false, showCloseButton = true, useOverflow = false, bsSize, show = false, onHide = noop_1.default, onClose, disableEsc = false, onEsc = noop_1.default, onCloseValidation = () => true, children, ...remainingProps } = props;
-    const [open, setOpen] = (0, react_1.useState)(show);
-    const dialogWrapperRef = (0, react_1.useRef)(null);
-    const onCloseCallback = onClose ?? onHide;
-    const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
-    const shouldReduceMotion = (0, framer_motion_1.useReducedMotion)();
-    // Use a setter function for the focus trap as it would not re-render
-    // and fails to set the focus listener
-    const [focusTrapRef, setFocusTrapRef] = (0, react_1.useState)();
-    (0, useFocusTrap_1.default)(focusTrapRef);
-    const toggleBodyClass = (add) => {
-        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS
-        // Remove "modal-open" from body only when there is no other dialog in the DOM
-        // in order to support multiple dialogs
-        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;
-        if (add) {
-            document.body.classList.add(MODAL_OPEN_CLASS);
-        }
-        else if (!add && !hasOtherDialogs) {
-            document.body.classList.remove(MODAL_OPEN_CLASS);
-        }
-    };
-    const handleCloseButton = () => closeDialog(true);
-    const closeDialog = (usedEscapeKey) => {
-        if (onCloseValidation()) {
-            setOpen(false);
-            onCloseCallback();
-            usedEscapeKey && onEsc();
-        }
-    };
-    const [previousShow, setPreviousShow] = (0, react_1.useState)(show);
-    if (show !== previousShow) {
-        setOpen(show);
-        toggleBodyClass(show);
-        setPreviousShow(show);
-    }
-    (0, useEsc_1.default)(() => {
-        if (!dialogWrapperRef || !dialogWrapperRef.current) {
-            return;
-        }
-        const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = document.activeElement;
-        // Only allow to close the dialog when the focus is inside the dialog
-        if (!disableEsc && dialogElement.contains(currentActiveElement)) {
-            closeDialog(true);
-        }
-    });
-    const handleAnimationComplete = (definition) => {
-        // The animation complete callback is invoked too when closing the dialog.
-        // For that we check the animation props like the "opacity" to skip focusing
-        // on the way out when closing the dialog.
-        // @ts-ignore
-        if (definition.opacity === 0) {
-            return;
-        }
-        const dialogElement = dialogWrapperRef.current;
-        const currentActiveElement = document.activeElement;
-        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused
-        // elements like inputs would lose their focus to the dialog.
-        // Note that in order to focus the dialog itself, the tabindex has to be set on that element
-        // IMPORTANT: make sure the dialog has a tabIndex prop
-        if (!dialogElement?.contains(currentActiveElement)) {
-            dialogWrapperRef?.current?.focus();
-        }
-    };
-    const modalClasses = (0, classnames_1.default)('modal', 'show', className);
-    const isSmallestDialog = bsSize === 'xs';
-    const hasChildren = !!children;
-    const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === 'xs' && 'modal-xs', bsSize === 'sm' && 'modal-sm', bsSize === 'lg' && 'modal-lg', bsSize === 'xl' && 'modal-xl', bsSize === 'full' && 'modal-full-width', bsSize === 'fullwidth' && 'modal-full-width', bsSize === 'fullheight' && 'modal-full-height', bsSize === 'fullheight-lg' && 'modal-full-height modal-lg', bsSize === 'fullheight-xl' && 'modal-full-height modal-xl', bsSize === 'fullscreen' && 'modal-fullscreen');
-    const spring = {
-        type: 'spring',
-        damping: 33,
-        stiffness: 500,
-    };
-    const springXs = {
-        type: 'spring',
-        damping: 25,
-        stiffness: 400,
-    };
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(dialogContext_1.DialogContextProvider, { value: { onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence
-        // Disable any initial animations on children that
-        // are present when the component is first rendered
-        , { 
-            // Disable any initial animations on children that
-            // are present when the component is first rendered
-            initial: false, 
-            // Only render one component at a time.
-            // The exiting component will finish its exit
-            // animation before entering component is rendered
-            exitBeforeEnter: true, children: open && ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: modalClasses, role: 'dialog', ref: dialogWrapperRef, "aria-label": 'dialog', 
-                // Make sure it has a tabIndex to focus the dialog so the close on esc works.
-                // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>
-                tabIndex: 0, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: shouldReduceMotion ? false : { opacity: 0, y: '-50%' }, animate: shouldReduceMotion
-                            ? { opacity: 1 }
-                            : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }, exit: shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }, transition: shouldReduceMotion ? { duration: 0 } : { opacity: 0.2, y: 0.3 }, onAnimationComplete: handleAnimationComplete, 
-                        // @ts-ignore
-                        ref: setFocusTrapRef, className: modalDialogClasses, role: 'document', children: (0, jsx_runtime_1.jsxs)("div", { className: 'modal-content', children: [hasChildren && children, !hasChildren && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons })), body && (0, jsx_runtime_1.jsx)(DialogBody_1.default, { className: bodyClassName, children: body }), footer && (0, jsx_runtime_1.jsx)(DialogFooter_1.default, { className: footerClassName, children: footer })] }))] }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: shouldReduceMotion ? undefined : { opacity: 0 }, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }, className: 'modal-backdrop' })] })) }) }), modalRoot);
-};
-Dialog.Title = DialogHeader_1.default;
-Dialog.Body = DialogBody_1.default;
-Dialog.Footer = DialogFooter_1.default;
-Dialog.SIZE_XS = 'xs';
-Dialog.SIZE_SM = 'sm';
-Dialog.SIZE_MD = 'md'; // default
-Dialog.SIZE_LG = 'lg';
-Dialog.SIZE_XL = 'xl';
-Dialog.SIZE_FULL = 'full';
-Dialog.SIZE_FULL_WIDTH = 'fullwidth';
-Dialog.SIZE_FULL_HEIGHT = 'fullheight';
-Dialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg';
-Dialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl';
-Dialog.SIZE_FULL_SCREEN = 'fullscreen';
-exports.default = Dialog;

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

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

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const DialogBody = ({ className = '', children, ...remainingProps }) => {
-    const classes = (0, classnames_1.default)('modal-body', className);
-    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, "aria-label": 'dialog body', children: children }));
-};
-exports.default = DialogBody;

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

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

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

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const dialogContext_1 = require("./dialogContext");
-const DialogFooter = (props) => {
-    const { className = '', children, ...remainingProps } = props;
-    const { isSmallestDialog, showXsDialogBorders } = (0, dialogContext_1.useDialogContext)();
-    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
-    const footerClassNames = (0, classnames_1.default)('modal-footer', !doShowXsDialogBorders && 'border-top-none padding-top-0', className);
-    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: footerClassNames, "aria-label": 'dialog footer', children: children }));
-};
-exports.default = DialogFooter;