@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/datepicker/DayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DayPicker.js","sources":["../../../src/components/datepicker/DayPicker.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\nimport { DayPicker as ReactDayPicker } from 'react-day-picker';\nimport { format, isValid, parse, type Locale } from 'date-fns';\nimport * as locales from 'date-fns/locale';\nimport { debounce } from 'es-toolkit/function';\n\nimport 'react-day-picker/dist/style.css';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport usePopperDropdown from '../../hooks/usePopperDropdown';\nimport useKey from '../../hooks/useKey';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport classNames from 'classnames';\n\n// Features\n// [ ] input parsing and error handling\n// [-] time picker -> use a dedicated time picker input next to the day picker\n// [-] time range callback + validation\n// [ ] wrap all react-day-picker callbacks to avoid exposing internals and types\n// [x] start/end month\n// [ ] reserved days / unselectable days\n// [ ] disable editable input - use selected date only\n// [x] disallow editing input for mode: \"multi\" and \"range\" since input contains custom value\n// [ ] modifier and modifiersStyles\n// [x] closeOnSelect\n// [x] enter confirms the manual input and closes the dropdown\n// [x] esc closed the dropdown\n// [ ] support different sizes\n// [ ] mandatory value\n// [x] avoid opening dropdown again when clicking inside the input\n// [x] clear inputs\n// [ ] tab should select elements inside the dropdown, select should close but keep focus on input\n\nexport type DateRange = {\n    from?: Date | undefined;\n    to?: Date | undefined;\n};\n\nexport type Modifiers = Record<string, boolean>;\n\nexport type OnSelectHandler<T> = (\n    selected: T,\n    triggerDate: Date,\n    modifiers: Modifiers,\n    event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\n// - By default, don't show a time picker\n// - Handle given formats like \"2020-04-04\" or ISO dates \"2020-03-12T16:20:44.193Z\" as initialValue - really?\n\ntype CommonProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value' | 'selected'> & {\n    id?: string;\n    locale?: string;\n    closeOnSelect?: boolean;\n    initialValue?: Date;\n    inputProps?: Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'defaultValue' | 'children'>;\n\n    /**\n     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.\n     * If omitted, locale-based display is used for the input.\n     */\n    dateFormat?: string;\n\n    alignRight?: boolean;\n    isClearable?: boolean;\n    minWidth?: number;\n    mandatory?: boolean;\n    bsSize?: 'sm' | 'md' | 'lg' | 'xl';\n    footer?: React.ReactNode;\n    inline?: boolean;\n    placeholder?: string | React.ReactElement;\n\n    inputClassName?: string;\n    className?: string;\n\n    // react-day-picker props\n    showOutsideDays?: boolean;\n    fixedWeeks?: boolean;\n    defaultMonth?: Date;\n    startMonth?: Date;\n    endMonth?: Date;\n};\n\ntype SingleModeProps = CommonProps & {\n    mode?: 'single';\n    selected?: Date;\n    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;\n    onSelectChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n};\n\ntype MultipleModeProps = CommonProps & {\n    mode: 'multiple';\n    selected?: Date[];\n    onSelectChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n};\n\ntype RangeModeProps = CommonProps & {\n    mode: 'range';\n    selected?: DateRange;\n    onChange?: (value: DateRange | undefined) => void;\n    onSelectChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n};\n\ntype DayPickerProps = SingleModeProps | MultipleModeProps | RangeModeProps;\n\nconst isSingleProps = (props: DayPickerProps): props is SingleModeProps => !props.mode || props.mode === 'single';\nconst isMultipleProps = (props: DayPickerProps): props is MultipleModeProps => props.mode === 'multiple';\nconst isRangeProps = (props: DayPickerProps): props is RangeModeProps => props.mode === 'range';\n\nconst DayPicker = (props: DayPickerProps) => {\n    const {\n        id,\n        selected,\n        inputProps = {},\n        alignRight,\n        bsSize = '',\n        locale = 'en-GB',\n        footer,\n        inline,\n        showOutsideDays = true,\n        fixedWeeks = true,\n        mode = 'single',\n        dateFormat,\n        placeholder,\n        isClearable = false,\n        closeOnSelect = true,\n        defaultMonth,\n        startMonth,\n        endMonth,\n        inputClassName,\n        className,\n    } = props;\n\n    const isSingleMode = mode === 'single';\n    const isMultipleMode = mode === 'multiple';\n    const isRangeMode = mode === 'range';\n\n    const isControlled = selected !== undefined;\n    const [internalSelected, setInternalSelected] = useState<typeof selected>();\n\n    const selectedValue = isControlled ? selected : internalSelected;\n\n    const narrowedSelected = (() => {\n        if (isSingleMode) {\n            return selectedValue instanceof Date ? selectedValue : undefined;\n        }\n        if (isMultipleMode) {\n            return Array.isArray(selectedValue) ? selectedValue : undefined;\n        }\n        return isDateRange(selectedValue) ? selectedValue : undefined;\n    })();\n\n    const selectionProps = { selected: narrowedSelected };\n\n    const resolvedLocale = resolveLocale(locale);\n\n    const [internalInputValue, setInternalInputValue] = useState<string>('');\n\n    const inputValue =\n        isControlled && !isSingleMode\n            ? formatSelectedForInput(narrowedSelected, locale, mode, dateFormat)\n            : internalInputValue;\n\n    // const inputValue = isSingleMode\n    //     ? internalInputValue\n    //     : formatSelectedForInput(narrowedSelected, locale, mode, dateFormat);\n\n    // const inputValue = internalInputValue;\n\n    // This ensures that whenever the external selected prop changes, the input field gets updated accordingly\n    useEffect(() => {\n        if (isSingleMode && isControlled && selected instanceof Date) {\n            setInternalInputValue(formatDate(selected, locale, dateFormat));\n        }\n    }, [selected, isSingleMode, isControlled, locale, dateFormat]);\n\n    const notifySelectChange = (value: typeof selected, modifiers: Modifiers) => {\n        if (isSingleProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as SingleModeProps['selected'], modifiers);\n            return;\n        }\n\n        if (isMultipleProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as MultipleModeProps['selected'], modifiers);\n            return;\n        }\n\n        if (isRangeProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as RangeModeProps['selected'], modifiers);\n        }\n    };\n\n    const handleInputChange = (newValue: string) => doHandleInputValue(newValue);\n    const handleInputChangeNative = (event: any) => doHandleInputValue(event.currentTarget.value);\n\n    const debouncedParseInput = useRef(\n        debounce((rawValue: string) => {\n            const parsed = parseDateString(rawValue, locale);\n            console.log(parsed);\n            const isValid = !!parsed;\n\n            setInternalSelected(parsed as typeof props.selected);\n\n            if (isSingleMode && 'onInputChange' in props && props.onInputChange) {\n                props.onInputChange(rawValue, parsed, isValid);\n            }\n\n            const shouldNotify = parsed !== undefined || rawValue === '';\n            if (shouldNotify) {\n                // parse to desired dateFormat for use on outside\n                const formattedSelected = dateFormat ? parseDateString(rawValue, locale, dateFormat) : parsed;\n                notifySelectChange(formattedSelected as typeof selected, {});\n            }\n        }, 300)\n    ).current;\n\n    const doHandleInputValue = (rawValue: string) => {\n        // const parsed = parseDateString(rawValue, locale, dateFormat);\n\n        // const isValid = !!parsed;\n\n        // if (!isControlled) {\n        //     // && isValidDate(parsed); // TODO: optional second validation\n\n        //     setInternalInputValue(rawValue);\n        //     setInternalSelected(parsed as typeof props.selected);\n        // } else if (isSingleMode) {\n        //     setInternalInputValue(rawValue);\n        // }\n\n        // if (isSingleMode && 'onInputChange' in props && props.onInputChange) {\n        //     props.onInputChange(rawValue, parsed, isValid);\n        // }\n\n        // const shouldNotify = parsed !== undefined || rawValue === '';\n        // if (shouldNotify) {\n        //     onSelectChange(parsed as typeof selected, {});\n        // }\n\n        setInternalInputValue(rawValue); // always update input state\n        debouncedParseInput(rawValue); // defer parsing & callback execution\n    };\n\n    const keyboardRef = useRef(false);\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        // Do not close the dropdown on input blur when the user selects something inside the dropdown itself\n        const nextFocused = event.relatedTarget as Node | null;\n        const focusInsideDropdown = nextFocused && popperElementRef.current?.contains(nextFocused);\n        if (isDropdownOpen && !focusInsideDropdown) {\n            closePopper();\n        }\n\n        if (!isSingleMode) {\n            return;\n        }\n\n        const parsed = parseDateString(internalInputValue, locale, dateFormat);\n\n        if (parsed && isValid(parsed)) {\n            setInternalSelected(parsed as typeof selected);\n            notifySelectChange(parsed as typeof selected, {});\n            setInternalInputValue(formatDate(parsed, locale, dateFormat));\n        }\n    };\n\n    const handleOnInputFocus = () => {\n        if (!isDropdownOpen) {\n            openPopper();\n        }\n    };\n\n    const handleInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Workaround to figure out if the user navigates via keyboard\n        if (event.key === 'Tab') {\n            keyboardRef.current = true;\n        }\n\n        if (event.key !== 'Enter') {\n            return;\n        }\n        // In case the dropdown is not open but the input is focused, open the dropdown on enter\n        if (!isDropdownOpen) {\n            handleInputClick();\n            return;\n        }\n        // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown\n        if (isDropdownOpen && closeOnSelect) {\n            notifySelectChange(narrowedSelected as typeof selected, {});\n            closePopper();\n        }\n    };\n\n    const handleSelectedChange = (newValue: typeof selected) => {\n        if (!isControlled) {\n            setInternalSelected(newValue);\n        }\n    };\n\n    const handleClearSelection = () => {\n        handleInputChange('');\n        handleSelectedChange(undefined as typeof selected);\n        setInternalInputValue('');\n\n        if (isControlled) {\n            setInternalSelected(undefined);\n        }\n\n        if (isRangeMode && 'onChange' in props && props.onChange) {\n            props.onChange(undefined);\n        }\n\n        notifySelectChange(undefined as typeof selected, {});\n    };\n\n    const handleDaySelect: OnSelectHandler<typeof selected> = (selected, triggerDate, modifiers, event) => {\n        // safe because of discriminated union\n        handleSelectedChange(selected as typeof selected);\n\n        // trigger callback\n        notifySelectChange(selected, modifiers);\n\n        if (isSingleMode && !isControlled) {\n            // should be the only place formatting is applied to the input\n            setInternalInputValue(formatDate(selected as Date, locale, dateFormat));\n        }\n\n        if (keyboardRef.current) {\n            // Note: When the date is selected via enter key, assume the user uses keyboard navigation.\n            // In this case the input should be focused to allow to tab to another element in his form.\n            // However, it is not possible to detect according to the event since the event.type is alway \"click\".\n            // Instead we check if the user used the tab key to focus the day picker.\n            inputRef?.current?.focus();\n        }\n\n        if (closeOnSelect) {\n            closePopper();\n            keyboardRef.current = false;\n        }\n    };\n\n    const {\n        isOpen: isDropdownOpen,\n        open: openPopper,\n        close: closePopper,\n        referenceRef: popperRef,\n        popperElementRef: setPopperElement,\n        popperStyles,\n        popperAttributes,\n    } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const popperElementRef = useRef<HTMLElement | null>(null);\n\n    const assignPopperElement = (element: HTMLElement | null) => {\n        popperElementRef.current = element;\n        setPopperElement(element);\n    };\n\n    // Close the dropdown when clicking outside the dropdown wrapper.\n    // It also checks if the click happened into the input, in which case the\n    // dropdown will remain open.\n    const outsideRef = useClickOutside(\n        event => {\n            const target = event.target as Node | null;\n            if (!target) {\n                closePopper();\n                return;\n            }\n\n            const clickedWithinTrigger = popperRef.current?.contains(target);\n            const clickedWithinInput = inputRef.current?.contains(target);\n\n            if (clickedWithinTrigger || clickedWithinInput) {\n                return;\n            }\n\n            closePopper();\n        },\n        undefined,\n        isDropdownOpen\n    );\n\n    const handleInputClick = () => {\n        openPopper();\n        inputRef.current?.focus();\n    };\n\n    // Needed to select all tabbable elements inside the dropdown calendar and to disable the\n    // focus on tab for all of these. This allows the user to tab between multiple inputs on the page\n    // or when having two day pickers side by side. Tabbing from one day picker input to the other will\n    // open and close the dropdown respectively and achieving the same usability as the old DatePicker.\n    // useEffect(() => {\n    //     if (isDropdownOpen && outsideRef.current) {\n    //         // get all buttons to disable the tab on them\n    //         const tabbableElements = (outsideRef.current as HTMLElement).querySelectorAll<HTMLElement>(\n    //             'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    //         );\n\n    //         tabbableElements.forEach((element: Element) => {\n    //             element.setAttribute('tabindex', '-1');\n    //         });\n    //     }\n    // }, [isDropdownOpen, outsideRef]);\n\n    // Close the dropdown when it is open and when the user presses the \"escape\" key\n    useKey('Escape', event => {\n        const target = event.target;\n        const isInput = inputRef.current && inputRef.current === target;\n\n        if (isInput && isDropdownOpen) {\n            closePopper();\n        }\n    });\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (!isDropdownOpen || !outsideRef.current) {\n                return;\n            }\n\n            if (event.key === 'Tab') {\n                const focusedInside = outsideRef.current.contains(document.activeElement);\n                if (focusedInside) {\n                    keyboardRef.current = true;\n                    console.log('User tabbed into dropdown');\n                    // Optional: closePopper(); or focus inputRef.current\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [isDropdownOpen]);\n\n    const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;\n\n    if (inline) {\n        // Render day picker inline without a dropdown and an input\n        return (\n            <div className={`display-flex flex-column justify-content-between ${className}`}>\n                <ReactDayPicker\n                    {...selectionProps}\n                    mode={mode as any}\n                    defaultMonth={defaultMonth}\n                    locale={resolvedLocale}\n                    onSelect={handleDaySelect}\n                    captionLayout='dropdown'\n                    animate\n                    navLayout='around'\n                    startMonth={startMonth}\n                    endMonth={endMonth}\n                    showOutsideDays={showOutsideDays}\n                    fixedWeeks={fixedWeeks}\n                    className={dayPickerClassName}\n                />\n                {footer ? <div className='padding-15'>{footer}</div> : <div />}\n            </div>\n        );\n    }\n\n    const clearableInputProps = {\n        ...inputProps,\n        readOnly: !isSingleMode,\n        style: {\n            background: 'var(--color-white)',\n            ...(inputProps?.style ?? {}),\n        },\n    };\n\n    return (\n        <>\n            <div ref={popperRef} className={`form-group ${className}`}>\n                <div className='input-group'>\n                    <span className='input-group-addon' onClick={handleInputClick}>\n                        <span className='rioglyph rioglyph-calendar' aria-hidden='true' />\n                    </span>\n                    {isClearable && (\n                        <ClearableInput\n                            id={id}\n                            autoComplete='off'\n                            placeholder={placeholder}\n                            {...clearableInputProps}\n                            type='text'\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onClick={handleInputClick}\n                            onClear={handleClearSelection}\n                            onBlur={handleInputBlur}\n                            onFocus={handleOnInputFocus}\n                            onKeyPress={handleInputKeyPress}\n                            // hasError={hasError}\n                            ref={inputRef}\n                            inputClassName={inputClassName}\n                        />\n                    )}\n                    {!isClearable && (\n                        <input\n                            id={id}\n                            size={12}\n                            type='text'\n                            autoComplete='off'\n                            placeholder={placeholder}\n                            {...inputProps}\n                            value={inputValue}\n                            onChange={handleInputChangeNative}\n                            onClick={handleInputClick}\n                            onBlur={handleInputBlur}\n                            onFocus={handleOnInputFocus}\n                            onKeyDown={handleInputKeyPress}\n                            ref={inputRef}\n                            readOnly={!isSingleMode}\n                            className={classNames('ClearableInput form-control bg-white', inputClassName)}\n                        />\n                    )}\n                </div>\n            </div>\n            {isDropdownOpen && (\n                <div\n                    style={popperStyles}\n                    className='DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border'\n                    {...popperAttributes}\n                    ref={assignPopperElement}\n                    role='dialog'\n                    aria-label='DayPicker calendar'\n                >\n                    <div ref={outsideRef} className='display-flex flex-column justify-content-between'>\n                        <ReactDayPicker\n                            {...selectionProps}\n                            mode={mode as any}\n                            defaultMonth={defaultMonth}\n                            locale={resolvedLocale}\n                            onSelect={handleDaySelect}\n                            captionLayout='dropdown'\n                            animate\n                            navLayout='around'\n                            startMonth={startMonth}\n                            endMonth={endMonth}\n                            showOutsideDays={showOutsideDays}\n                            fixedWeeks={fixedWeeks}\n                            className={dayPickerClassName}\n                        />\n                        {footer ? <div className='padding-15'>{footer}</div> : <div />}\n                    </div>\n                </div>\n            )}\n        </>\n    );\n};\n\nconst isDateRange = (value: unknown): value is DateRange => {\n    if (!value || typeof value !== 'object') {\n        return false;\n    }\n\n    const range = value as DateRange;\n\n    const fromIsValid = range.from === undefined || range.from instanceof Date;\n    const toIsValid = range.to === undefined || range.to instanceof Date;\n\n    return fromIsValid && toIsValid;\n};\n\nconst resolveLocale = (localeCode: string): Locale => {\n    const baseCode = localeCode.split('-')[0]; // 'de-DE' → 'de'\n    return (\n        (locales as Record<string, Locale>)[baseCode] || (locales as Record<string, Locale>)[localeCode] || locales.enGB\n    );\n};\n\nconst formatDate = (date: Date | undefined, localeCode: string, dateFormat?: string): string => {\n    if (!date) {\n        return '';\n    }\n\n    if (dateFormat) {\n        return format(date, dateFormat); // use override\n    }\n\n    // fallback to locale-based formatting\n    return new Intl.DateTimeFormat(localeCode).format(date);\n};\n\nconst formatSelectedForInput = (\n    selected: unknown,\n    localeCode: string,\n    mode: 'single' | 'multiple' | 'range',\n    dateFormat?: string\n): string => {\n    if (!selected) {\n        return '';\n    }\n\n    const formatFn = (date: Date) =>\n        dateFormat ? format(date, dateFormat) : new Intl.DateTimeFormat(localeCode).format(date);\n\n    if (mode === 'single' && selected instanceof Date) {\n        return formatFn(selected);\n    }\n\n    if (mode === 'multiple' && Array.isArray(selected)) {\n        return selected.map(formatFn).join(', ');\n    }\n\n    if (mode === 'range' && typeof selected === 'object' && 'from' in selected) {\n        const { from, to } = selected as { from?: Date; to?: Date };\n        if (!from || !to) {\n            return '';\n        }\n        return [from, to].filter(Boolean).map(formatFn).join(' – ');\n    }\n\n    return '';\n};\n\nconst localeFormatMap: Record<string, string> = {\n    'bg-BG': 'dd.MM.yyyy',\n    'cs-CZ': 'dd.MM.yyyy',\n    'da-DK': 'dd-MM-yyyy',\n    'de-DE': 'dd.MM.yyyy',\n    'el-GR': 'dd/MM/yyyy',\n    'en-GB': 'dd/MM/yyyy',\n    'es-ES': 'dd/MM/yyyy',\n    'et-EE': 'dd.MM.yyyy',\n    'fi-FI': 'dd.MM.yyyy',\n    'fr-FR': 'dd/MM/yyyy',\n    'hr-HR': 'dd.MM.yyyy',\n    'hu-HU': 'yyyy. MM. dd.',\n    'it-IT': 'dd/MM/yyyy',\n    'lt-LT': 'dd-MM-yyyy',\n    'lv-LV': 'dd.MM.yyyy',\n    'nb-NO': 'dd.MM.yyyy',\n    'nl-NL': 'dd-MM-yyyy',\n    'pl-PL': 'dd.MM.yyyy',\n    'pt-BR': 'dd/MM/yyyy',\n    'pt-PT': 'dd/MM/yyyy',\n    'ro-RO': 'dd.MM.yyyy',\n    'sk-SK': 'dd.MM.yyyy',\n    'sl-SI': 'dd.MM.yyyy',\n    'sv-SE': 'yyyy-MM-dd',\n};\n\nconst getFormatForLocale = (localeCode: string, fallback = 'yyyy-MM-dd'): string => {\n    return localeFormatMap[localeCode] || fallback;\n};\n\nconst parseDateString = (value: string | undefined, localeCode: string, dateFormat?: string): Date | undefined => {\n    if (!value) {\n        return undefined;\n    }\n\n    const formatToUse = dateFormat || getFormatForLocale(localeCode, dateFormat);\n    const parsed = parse(value, formatToUse, new Date());\n\n    return isValid(parsed) ? parsed : undefined;\n};\n\nexport default DayPicker;\n"],"names":["isSingleProps","props","isMultipleProps","isRangeProps","DayPicker","id","selected","inputProps","alignRight","bsSize","locale","footer","inline","showOutsideDays","fixedWeeks","mode","dateFormat","placeholder","isClearable","closeOnSelect","defaultMonth","startMonth","endMonth","inputClassName","className","isSingleMode","isMultipleMode","isRangeMode","isControlled","internalSelected","setInternalSelected","useState","selectedValue","narrowedSelected","isDateRange","selectionProps","resolvedLocale","resolveLocale","internalInputValue","setInternalInputValue","inputValue","formatSelectedForInput","useEffect","formatDate","notifySelectChange","value","modifiers","handleInputChange","newValue","doHandleInputValue","handleInputChangeNative","event","debouncedParseInput","useRef","debounce","rawValue","parsed","parseDateString","isValid","formattedSelected","keyboardRef","handleInputBlur","nextFocused","focusInsideDropdown","popperElementRef","isDropdownOpen","closePopper","handleOnInputFocus","openPopper","handleInputKeyPress","handleInputClick","handleSelectedChange","handleClearSelection","handleDaySelect","triggerDate","inputRef","popperRef","setPopperElement","popperStyles","popperAttributes","usePopperDropdown","assignPopperElement","element","outsideRef","useClickOutside","target","clickedWithinTrigger","clickedWithinInput","useKey","handleKeyDown","dayPickerClassName","jsxs","jsx","ReactDayPicker","clearableInputProps","Fragment","ClearableInput","classNames","range","fromIsValid","toIsValid","localeCode","baseCode","locales","date","format","formatFn","from","to","localeFormatMap","getFormatForLocale","fallback","formatToUse","parse"],"mappings":"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"}
+{"version":3,"file":"DayPicker.js","sources":["../../../src/components/datepicker/DayPicker.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\nimport { DayPicker as ReactDayPicker } from 'react-day-picker';\nimport { format, isValid, parse, type Locale } from 'date-fns';\nimport * as locales from 'date-fns/locale';\nimport { debounce } from 'es-toolkit/function';\n\nimport 'react-day-picker/dist/style.css';\n\nimport useClickOutside from '../../hooks/useClickOutside';\nimport usePopperDropdown from '../../hooks/usePopperDropdown';\nimport useKey from '../../hooks/useKey';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport classNames from '../../utils/classNames';\n\n// Features\n// [ ] input parsing and error handling\n// [-] time picker -> use a dedicated time picker input next to the day picker\n// [-] time range callback + validation\n// [ ] wrap all react-day-picker callbacks to avoid exposing internals and types\n// [x] start/end month\n// [ ] reserved days / unselectable days\n// [ ] disable editable input - use selected date only\n// [x] disallow editing input for mode: \"multi\" and \"range\" since input contains custom value\n// [ ] modifier and modifiersStyles\n// [x] closeOnSelect\n// [x] enter confirms the manual input and closes the dropdown\n// [x] esc closed the dropdown\n// [ ] support different sizes\n// [ ] mandatory value\n// [x] avoid opening dropdown again when clicking inside the input\n// [x] clear inputs\n// [ ] tab should select elements inside the dropdown, select should close but keep focus on input\n\nexport type DateRange = {\n    from?: Date | undefined;\n    to?: Date | undefined;\n};\n\nexport type Modifiers = Record<string, boolean>;\n\nexport type OnSelectHandler<T> = (\n    selected: T,\n    triggerDate: Date,\n    modifiers: Modifiers,\n    event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\n// - By default, don't show a time picker\n// - Handle given formats like \"2020-04-04\" or ISO dates \"2020-03-12T16:20:44.193Z\" as initialValue - really?\n\ntype CommonProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value' | 'selected'> & {\n    id?: string;\n    locale?: string;\n    closeOnSelect?: boolean;\n    initialValue?: Date;\n    inputProps?: Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'defaultValue' | 'children'>;\n\n    /**\n     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.\n     * If omitted, locale-based display is used for the input.\n     */\n    dateFormat?: string;\n\n    alignRight?: boolean;\n    isClearable?: boolean;\n    minWidth?: number;\n    mandatory?: boolean;\n    bsSize?: 'sm' | 'md' | 'lg' | 'xl';\n    footer?: React.ReactNode;\n    inline?: boolean;\n    placeholder?: string | React.ReactElement;\n\n    inputClassName?: string;\n    className?: string;\n\n    // react-day-picker props\n    showOutsideDays?: boolean;\n    fixedWeeks?: boolean;\n    defaultMonth?: Date;\n    startMonth?: Date;\n    endMonth?: Date;\n};\n\ntype SingleModeProps = CommonProps & {\n    mode?: 'single';\n    selected?: Date;\n    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;\n    onSelectChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n};\n\ntype MultipleModeProps = CommonProps & {\n    mode: 'multiple';\n    selected?: Date[];\n    onSelectChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n};\n\ntype RangeModeProps = CommonProps & {\n    mode: 'range';\n    selected?: DateRange;\n    onChange?: (value: DateRange | undefined) => void;\n    onSelectChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n};\n\ntype DayPickerProps = SingleModeProps | MultipleModeProps | RangeModeProps;\n\nconst isSingleProps = (props: DayPickerProps): props is SingleModeProps => !props.mode || props.mode === 'single';\nconst isMultipleProps = (props: DayPickerProps): props is MultipleModeProps => props.mode === 'multiple';\nconst isRangeProps = (props: DayPickerProps): props is RangeModeProps => props.mode === 'range';\n\nconst DayPicker = (props: DayPickerProps) => {\n    const {\n        id,\n        selected,\n        inputProps = {},\n        alignRight,\n        bsSize = '',\n        locale = 'en-GB',\n        footer,\n        inline,\n        showOutsideDays = true,\n        fixedWeeks = true,\n        mode = 'single',\n        dateFormat,\n        placeholder,\n        isClearable = false,\n        closeOnSelect = true,\n        defaultMonth,\n        startMonth,\n        endMonth,\n        inputClassName,\n        className,\n    } = props;\n\n    const isSingleMode = mode === 'single';\n    const isMultipleMode = mode === 'multiple';\n    const isRangeMode = mode === 'range';\n\n    const isControlled = selected !== undefined;\n    const [internalSelected, setInternalSelected] = useState<typeof selected>();\n\n    const selectedValue = isControlled ? selected : internalSelected;\n\n    const narrowedSelected = (() => {\n        if (isSingleMode) {\n            return selectedValue instanceof Date ? selectedValue : undefined;\n        }\n        if (isMultipleMode) {\n            return Array.isArray(selectedValue) ? selectedValue : undefined;\n        }\n        return isDateRange(selectedValue) ? selectedValue : undefined;\n    })();\n\n    const selectionProps = { selected: narrowedSelected };\n\n    const resolvedLocale = resolveLocale(locale);\n\n    const [internalInputValue, setInternalInputValue] = useState<string>('');\n\n    const inputValue =\n        isControlled && !isSingleMode\n            ? formatSelectedForInput(narrowedSelected, locale, mode, dateFormat)\n            : internalInputValue;\n\n    // const inputValue = isSingleMode\n    //     ? internalInputValue\n    //     : formatSelectedForInput(narrowedSelected, locale, mode, dateFormat);\n\n    // const inputValue = internalInputValue;\n\n    // This ensures that whenever the external selected prop changes, the input field gets updated accordingly\n    useEffect(() => {\n        if (isSingleMode && isControlled && selected instanceof Date) {\n            setInternalInputValue(formatDate(selected, locale, dateFormat));\n        }\n    }, [selected, isSingleMode, isControlled, locale, dateFormat]);\n\n    const notifySelectChange = (value: typeof selected, modifiers: Modifiers) => {\n        if (isSingleProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as SingleModeProps['selected'], modifiers);\n            return;\n        }\n\n        if (isMultipleProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as MultipleModeProps['selected'], modifiers);\n            return;\n        }\n\n        if (isRangeProps(props) && props.onSelectChange) {\n            props.onSelectChange(value as RangeModeProps['selected'], modifiers);\n        }\n    };\n\n    const handleInputChange = (newValue: string) => doHandleInputValue(newValue);\n    const handleInputChangeNative = (event: any) => doHandleInputValue(event.currentTarget.value);\n\n    const debouncedParseInput = useRef(\n        debounce((rawValue: string) => {\n            const parsed = parseDateString(rawValue, locale);\n            console.log(parsed);\n            const isValid = !!parsed;\n\n            setInternalSelected(parsed as typeof props.selected);\n\n            if (isSingleMode && 'onInputChange' in props && props.onInputChange) {\n                props.onInputChange(rawValue, parsed, isValid);\n            }\n\n            const shouldNotify = parsed !== undefined || rawValue === '';\n            if (shouldNotify) {\n                // parse to desired dateFormat for use on outside\n                const formattedSelected = dateFormat ? parseDateString(rawValue, locale, dateFormat) : parsed;\n                notifySelectChange(formattedSelected as typeof selected, {});\n            }\n        }, 300)\n    ).current;\n\n    const doHandleInputValue = (rawValue: string) => {\n        // const parsed = parseDateString(rawValue, locale, dateFormat);\n\n        // const isValid = !!parsed;\n\n        // if (!isControlled) {\n        //     // && isValidDate(parsed); // TODO: optional second validation\n\n        //     setInternalInputValue(rawValue);\n        //     setInternalSelected(parsed as typeof props.selected);\n        // } else if (isSingleMode) {\n        //     setInternalInputValue(rawValue);\n        // }\n\n        // if (isSingleMode && 'onInputChange' in props && props.onInputChange) {\n        //     props.onInputChange(rawValue, parsed, isValid);\n        // }\n\n        // const shouldNotify = parsed !== undefined || rawValue === '';\n        // if (shouldNotify) {\n        //     onSelectChange(parsed as typeof selected, {});\n        // }\n\n        setInternalInputValue(rawValue); // always update input state\n        debouncedParseInput(rawValue); // defer parsing & callback execution\n    };\n\n    const keyboardRef = useRef(false);\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        // Do not close the dropdown on input blur when the user selects something inside the dropdown itself\n        const nextFocused = event.relatedTarget as Node | null;\n        const focusInsideDropdown = nextFocused && popperElementRef.current?.contains(nextFocused);\n        if (isDropdownOpen && !focusInsideDropdown) {\n            closePopper();\n        }\n\n        if (!isSingleMode) {\n            return;\n        }\n\n        const parsed = parseDateString(internalInputValue, locale, dateFormat);\n\n        if (parsed && isValid(parsed)) {\n            setInternalSelected(parsed as typeof selected);\n            notifySelectChange(parsed as typeof selected, {});\n            setInternalInputValue(formatDate(parsed, locale, dateFormat));\n        }\n    };\n\n    const handleOnInputFocus = () => {\n        if (!isDropdownOpen) {\n            openPopper();\n        }\n    };\n\n    const handleInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Workaround to figure out if the user navigates via keyboard\n        if (event.key === 'Tab') {\n            keyboardRef.current = true;\n        }\n\n        if (event.key !== 'Enter') {\n            return;\n        }\n        // In case the dropdown is not open but the input is focused, open the dropdown on enter\n        if (!isDropdownOpen) {\n            handleInputClick();\n            return;\n        }\n        // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown\n        if (isDropdownOpen && closeOnSelect) {\n            notifySelectChange(narrowedSelected as typeof selected, {});\n            closePopper();\n        }\n    };\n\n    const handleSelectedChange = (newValue: typeof selected) => {\n        if (!isControlled) {\n            setInternalSelected(newValue);\n        }\n    };\n\n    const handleClearSelection = () => {\n        handleInputChange('');\n        handleSelectedChange(undefined as typeof selected);\n        setInternalInputValue('');\n\n        if (isControlled) {\n            setInternalSelected(undefined);\n        }\n\n        if (isRangeMode && 'onChange' in props && props.onChange) {\n            props.onChange(undefined);\n        }\n\n        notifySelectChange(undefined as typeof selected, {});\n    };\n\n    const handleDaySelect: OnSelectHandler<typeof selected> = (selected, triggerDate, modifiers, event) => {\n        // safe because of discriminated union\n        handleSelectedChange(selected as typeof selected);\n\n        // trigger callback\n        notifySelectChange(selected, modifiers);\n\n        if (isSingleMode && !isControlled) {\n            // should be the only place formatting is applied to the input\n            setInternalInputValue(formatDate(selected as Date, locale, dateFormat));\n        }\n\n        if (keyboardRef.current) {\n            // Note: When the date is selected via enter key, assume the user uses keyboard navigation.\n            // In this case the input should be focused to allow to tab to another element in his form.\n            // However, it is not possible to detect according to the event since the event.type is alway \"click\".\n            // Instead we check if the user used the tab key to focus the day picker.\n            inputRef?.current?.focus();\n        }\n\n        if (closeOnSelect) {\n            closePopper();\n            keyboardRef.current = false;\n        }\n    };\n\n    const {\n        isOpen: isDropdownOpen,\n        open: openPopper,\n        close: closePopper,\n        referenceRef: popperRef,\n        popperElementRef: setPopperElement,\n        popperStyles,\n        popperAttributes,\n    } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const popperElementRef = useRef<HTMLElement | null>(null);\n\n    const assignPopperElement = (element: HTMLElement | null) => {\n        popperElementRef.current = element;\n        setPopperElement(element);\n    };\n\n    // Close the dropdown when clicking outside the dropdown wrapper.\n    // It also checks if the click happened into the input, in which case the\n    // dropdown will remain open.\n    const outsideRef = useClickOutside(\n        event => {\n            const target = event.target as Node | null;\n            if (!target) {\n                closePopper();\n                return;\n            }\n\n            const clickedWithinTrigger = popperRef.current?.contains(target);\n            const clickedWithinInput = inputRef.current?.contains(target);\n\n            if (clickedWithinTrigger || clickedWithinInput) {\n                return;\n            }\n\n            closePopper();\n        },\n        undefined,\n        isDropdownOpen\n    );\n\n    const handleInputClick = () => {\n        openPopper();\n        inputRef.current?.focus();\n    };\n\n    // Needed to select all tabbable elements inside the dropdown calendar and to disable the\n    // focus on tab for all of these. This allows the user to tab between multiple inputs on the page\n    // or when having two day pickers side by side. Tabbing from one day picker input to the other will\n    // open and close the dropdown respectively and achieving the same usability as the old DatePicker.\n    // useEffect(() => {\n    //     if (isDropdownOpen && outsideRef.current) {\n    //         // get all buttons to disable the tab on them\n    //         const tabbableElements = (outsideRef.current as HTMLElement).querySelectorAll<HTMLElement>(\n    //             'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n    //         );\n\n    //         tabbableElements.forEach((element: Element) => {\n    //             element.setAttribute('tabindex', '-1');\n    //         });\n    //     }\n    // }, [isDropdownOpen, outsideRef]);\n\n    // Close the dropdown when it is open and when the user presses the \"escape\" key\n    useKey('Escape', event => {\n        const target = event.target;\n        const isInput = inputRef.current && inputRef.current === target;\n\n        if (isInput && isDropdownOpen) {\n            closePopper();\n        }\n    });\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (!isDropdownOpen || !outsideRef.current) {\n                return;\n            }\n\n            if (event.key === 'Tab') {\n                const focusedInside = outsideRef.current.contains(document.activeElement);\n                if (focusedInside) {\n                    keyboardRef.current = true;\n                    console.log('User tabbed into dropdown');\n                    // Optional: closePopper(); or focus inputRef.current\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [isDropdownOpen]);\n\n    const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;\n\n    if (inline) {\n        // Render day picker inline without a dropdown and an input\n        return (\n            <div className={`display-flex flex-column justify-content-between ${className}`}>\n                <ReactDayPicker\n                    {...selectionProps}\n                    mode={mode as any}\n                    defaultMonth={defaultMonth}\n                    locale={resolvedLocale}\n                    onSelect={handleDaySelect}\n                    captionLayout='dropdown'\n                    animate\n                    navLayout='around'\n                    startMonth={startMonth}\n                    endMonth={endMonth}\n                    showOutsideDays={showOutsideDays}\n                    fixedWeeks={fixedWeeks}\n                    className={dayPickerClassName}\n                />\n                {footer ? <div className='padding-15'>{footer}</div> : <div />}\n            </div>\n        );\n    }\n\n    const clearableInputProps = {\n        ...inputProps,\n        readOnly: !isSingleMode,\n        style: {\n            background: 'var(--color-white)',\n            ...(inputProps?.style ?? {}),\n        },\n    };\n\n    return (\n        <>\n            <div ref={popperRef} className={`form-group ${className}`}>\n                <div className='input-group'>\n                    <span className='input-group-addon' onClick={handleInputClick}>\n                        <span className='rioglyph rioglyph-calendar' aria-hidden='true' />\n                    </span>\n                    {isClearable && (\n                        <ClearableInput\n                            id={id}\n                            autoComplete='off'\n                            placeholder={placeholder}\n                            {...clearableInputProps}\n                            type='text'\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onClick={handleInputClick}\n                            onClear={handleClearSelection}\n                            onBlur={handleInputBlur}\n                            onFocus={handleOnInputFocus}\n                            onKeyPress={handleInputKeyPress}\n                            // hasError={hasError}\n                            ref={inputRef}\n                            inputClassName={inputClassName}\n                        />\n                    )}\n                    {!isClearable && (\n                        <input\n                            id={id}\n                            size={12}\n                            type='text'\n                            autoComplete='off'\n                            placeholder={placeholder}\n                            {...inputProps}\n                            value={inputValue}\n                            onChange={handleInputChangeNative}\n                            onClick={handleInputClick}\n                            onBlur={handleInputBlur}\n                            onFocus={handleOnInputFocus}\n                            onKeyDown={handleInputKeyPress}\n                            ref={inputRef}\n                            readOnly={!isSingleMode}\n                            className={classNames('ClearableInput form-control bg-white', inputClassName)}\n                        />\n                    )}\n                </div>\n            </div>\n            {isDropdownOpen && (\n                <div\n                    style={popperStyles}\n                    className='DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border'\n                    {...popperAttributes}\n                    ref={assignPopperElement}\n                    role='dialog'\n                    aria-label='DayPicker calendar'\n                >\n                    <div ref={outsideRef} className='display-flex flex-column justify-content-between'>\n                        <ReactDayPicker\n                            {...selectionProps}\n                            mode={mode as any}\n                            defaultMonth={defaultMonth}\n                            locale={resolvedLocale}\n                            onSelect={handleDaySelect}\n                            captionLayout='dropdown'\n                            animate\n                            navLayout='around'\n                            startMonth={startMonth}\n                            endMonth={endMonth}\n                            showOutsideDays={showOutsideDays}\n                            fixedWeeks={fixedWeeks}\n                            className={dayPickerClassName}\n                        />\n                        {footer ? <div className='padding-15'>{footer}</div> : <div />}\n                    </div>\n                </div>\n            )}\n        </>\n    );\n};\n\nconst isDateRange = (value: unknown): value is DateRange => {\n    if (!value || typeof value !== 'object') {\n        return false;\n    }\n\n    const range = value as DateRange;\n\n    const fromIsValid = range.from === undefined || range.from instanceof Date;\n    const toIsValid = range.to === undefined || range.to instanceof Date;\n\n    return fromIsValid && toIsValid;\n};\n\nconst resolveLocale = (localeCode: string): Locale => {\n    const baseCode = localeCode.split('-')[0]; // 'de-DE' → 'de'\n    return (\n        (locales as Record<string, Locale>)[baseCode] || (locales as Record<string, Locale>)[localeCode] || locales.enGB\n    );\n};\n\nconst formatDate = (date: Date | undefined, localeCode: string, dateFormat?: string): string => {\n    if (!date) {\n        return '';\n    }\n\n    if (dateFormat) {\n        return format(date, dateFormat); // use override\n    }\n\n    // fallback to locale-based formatting\n    return new Intl.DateTimeFormat(localeCode).format(date);\n};\n\nconst formatSelectedForInput = (\n    selected: unknown,\n    localeCode: string,\n    mode: 'single' | 'multiple' | 'range',\n    dateFormat?: string\n): string => {\n    if (!selected) {\n        return '';\n    }\n\n    const formatFn = (date: Date) =>\n        dateFormat ? format(date, dateFormat) : new Intl.DateTimeFormat(localeCode).format(date);\n\n    if (mode === 'single' && selected instanceof Date) {\n        return formatFn(selected);\n    }\n\n    if (mode === 'multiple' && Array.isArray(selected)) {\n        return selected.map(formatFn).join(', ');\n    }\n\n    if (mode === 'range' && typeof selected === 'object' && 'from' in selected) {\n        const { from, to } = selected as { from?: Date; to?: Date };\n        if (!from || !to) {\n            return '';\n        }\n        return [from, to].filter(Boolean).map(formatFn).join(' – ');\n    }\n\n    return '';\n};\n\nconst localeFormatMap: Record<string, string> = {\n    'bg-BG': 'dd.MM.yyyy',\n    'cs-CZ': 'dd.MM.yyyy',\n    'da-DK': 'dd-MM-yyyy',\n    'de-DE': 'dd.MM.yyyy',\n    'el-GR': 'dd/MM/yyyy',\n    'en-GB': 'dd/MM/yyyy',\n    'es-ES': 'dd/MM/yyyy',\n    'et-EE': 'dd.MM.yyyy',\n    'fi-FI': 'dd.MM.yyyy',\n    'fr-FR': 'dd/MM/yyyy',\n    'hr-HR': 'dd.MM.yyyy',\n    'hu-HU': 'yyyy. MM. dd.',\n    'it-IT': 'dd/MM/yyyy',\n    'lt-LT': 'dd-MM-yyyy',\n    'lv-LV': 'dd.MM.yyyy',\n    'nb-NO': 'dd.MM.yyyy',\n    'nl-NL': 'dd-MM-yyyy',\n    'pl-PL': 'dd.MM.yyyy',\n    'pt-BR': 'dd/MM/yyyy',\n    'pt-PT': 'dd/MM/yyyy',\n    'ro-RO': 'dd.MM.yyyy',\n    'sk-SK': 'dd.MM.yyyy',\n    'sl-SI': 'dd.MM.yyyy',\n    'sv-SE': 'yyyy-MM-dd',\n};\n\nconst getFormatForLocale = (localeCode: string, fallback = 'yyyy-MM-dd'): string => {\n    return localeFormatMap[localeCode] || fallback;\n};\n\nconst parseDateString = (value: string | undefined, localeCode: string, dateFormat?: string): Date | undefined => {\n    if (!value) {\n        return undefined;\n    }\n\n    const formatToUse = dateFormat || getFormatForLocale(localeCode, dateFormat);\n    const parsed = parse(value, formatToUse, new Date());\n\n    return isValid(parsed) ? parsed : undefined;\n};\n\nexport default DayPicker;\n"],"names":["isSingleProps","props","isMultipleProps","isRangeProps","DayPicker","id","selected","inputProps","alignRight","bsSize","locale","footer","inline","showOutsideDays","fixedWeeks","mode","dateFormat","placeholder","isClearable","closeOnSelect","defaultMonth","startMonth","endMonth","inputClassName","className","isSingleMode","isMultipleMode","isRangeMode","isControlled","internalSelected","setInternalSelected","useState","selectedValue","narrowedSelected","isDateRange","selectionProps","resolvedLocale","resolveLocale","internalInputValue","setInternalInputValue","inputValue","formatSelectedForInput","useEffect","formatDate","notifySelectChange","value","modifiers","handleInputChange","newValue","doHandleInputValue","handleInputChangeNative","event","debouncedParseInput","useRef","debounce","rawValue","parsed","parseDateString","isValid","formattedSelected","keyboardRef","handleInputBlur","nextFocused","focusInsideDropdown","popperElementRef","isDropdownOpen","closePopper","handleOnInputFocus","openPopper","handleInputKeyPress","handleInputClick","handleSelectedChange","handleClearSelection","handleDaySelect","triggerDate","inputRef","popperRef","setPopperElement","popperStyles","popperAttributes","usePopperDropdown","assignPopperElement","element","outsideRef","useClickOutside","target","clickedWithinTrigger","clickedWithinInput","useKey","handleKeyDown","dayPickerClassName","jsxs","jsx","ReactDayPicker","clearableInputProps","Fragment","ClearableInput","classNames","range","fromIsValid","toIsValid","localeCode","baseCode","locales","date","format","formatFn","from","to","localeFormatMap","getFormatForLocale","fallback","formatToUse","parse"],"mappings":"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"}

package/components/dialog/ConfirmationDialog.d.ts

@@ -1,11 +1,33 @@
 import { default as React } from 'react';
 import { BaseDialogProps } from './Dialog';
 export type ConfirmationDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself
+     */
     content?: string | React.ReactNode;
+    /**
+     * A callback fired when the confirmation button is clicked.
+     *
+     * @default () => {}
+     */
     onClickConfirm?: VoidFunction;
+    /**
+     * A callback fired when the cancel button is clicked or the dialog is closed.
+     *
+     * @default () => {}
+     */
     onClickCancel?: VoidFunction;
+    /**
+     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
+     */
     cancelButtonText?: string | React.ReactNode;
+    /**
+     * The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text.
+     */
     confirmButtonText?: string | React.ReactNode;
+    /**
+     * When set to `true` the confirmation button will be disabled.
+     */
     disableConfirm?: boolean;
 };
 declare const ConfirmationDialog: (props: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;

package/components/dialog/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.js","sources":["../../../src/components/dialog/ConfirmationDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type ConfirmationDialogProps = BaseDialogProps & {\n    content?: string | React.ReactNode;\n    onClickConfirm?: VoidFunction;\n    onClickCancel?: VoidFunction;\n    cancelButtonText?: string | React.ReactNode;\n    confirmButtonText?: string | React.ReactNode;\n    disableConfirm?: boolean;\n};\n\nconst ConfirmationDialog = (props: ConfirmationDialogProps) => {\n    const {\n        content,\n        onClickCancel = noop,\n        cancelButtonText,\n        onClickConfirm = noop,\n        confirmButtonText,\n        disableConfirm,\n        ...remainingProps\n    } = props;\n\n    const footer = (\n        <div className='btn-toolbar'>\n            <Button className='CancelButton' onClick={onClickCancel}>\n                {cancelButtonText}\n            </Button>\n            <Button bsStyle='primary' className='ConfirmationButton' onClick={onClickConfirm} disabled={disableConfirm}>\n                {confirmButtonText}\n            </Button>\n        </div>\n    );\n\n    return (\n        <Dialog\n            {...remainingProps}\n            body={content}\n            footer={footer}\n            onClose={onClickCancel}\n            showCloseButton={false}\n            className='confirmation-dialog'\n            disableEsc\n        />\n    );\n};\n\nexport default ConfirmationDialog;\n"],"names":["ConfirmationDialog","props","content","onClickCancel","noop","cancelButtonText","onClickConfirm","confirmButtonText","disableConfirm","remainingProps","jsx","Dialog","jsxs","Button"],"mappings":";;;;AAeA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,eAAAC,IAAgBC;AAAA,IAChB,kBAAAC;AAAA,IACA,gBAAAC,IAAiBF;AAAA,IACjB,mBAAAG;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR;AAaJ,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,MAAMP;AAAA,MACN,QAdJ,gBAAAU,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EAAO,WAAU,gBAAe,SAASV,GACrC,UAAAE,GACL;AAAA,QACA,gBAAAK,EAACG,GAAA,EAAO,SAAQ,WAAU,WAAU,sBAAqB,SAASP,GAAgB,UAAUE,GACvF,UAAAD,EAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAQI,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,WAAU;AAAA,MACV,YAAU;AAAA,IAAA;AAAA,EAAA;AAGtB;"}
+{"version":3,"file":"ConfirmationDialog.js","sources":["../../../src/components/dialog/ConfirmationDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type ConfirmationDialogProps = BaseDialogProps & {\n    /**\n     * The content of the dialog body itself\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * A callback fired when the confirmation button is clicked.\n     *\n     * @default () => {}\n     */\n    onClickConfirm?: VoidFunction;\n\n    /**\n     * A callback fired when the cancel button is clicked or the dialog is closed.\n     *\n     * @default () => {}\n     */\n    onClickCancel?: VoidFunction;\n\n    /**\n     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text.\n     */\n    confirmButtonText?: string | React.ReactNode;\n\n    /**\n     * When set to `true` the confirmation button will be disabled.\n     */\n    disableConfirm?: boolean;\n};\n\nconst ConfirmationDialog = (props: ConfirmationDialogProps) => {\n    const {\n        content,\n        onClickCancel = noop,\n        cancelButtonText,\n        onClickConfirm = noop,\n        confirmButtonText,\n        disableConfirm,\n        ...remainingProps\n    } = props;\n\n    const footer = (\n        <div className='btn-toolbar'>\n            <Button className='CancelButton' onClick={onClickCancel}>\n                {cancelButtonText}\n            </Button>\n            <Button bsStyle='primary' className='ConfirmationButton' onClick={onClickConfirm} disabled={disableConfirm}>\n                {confirmButtonText}\n            </Button>\n        </div>\n    );\n\n    return (\n        <Dialog\n            {...remainingProps}\n            body={content}\n            footer={footer}\n            onClose={onClickCancel}\n            showCloseButton={false}\n            className='confirmation-dialog'\n            disableEsc\n        />\n    );\n};\n\nexport default ConfirmationDialog;\n"],"names":["ConfirmationDialog","props","content","onClickCancel","noop","cancelButtonText","onClickConfirm","confirmButtonText","disableConfirm","remainingProps","jsx","Dialog","jsxs","Button"],"mappings":";;;;AA0CA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,eAAAC,IAAgBC;AAAA,IAChB,kBAAAC;AAAA,IACA,gBAAAC,IAAiBF;AAAA,IACjB,mBAAAG;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR;AAaJ,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,MAAMP;AAAA,MACN,QAdJ,gBAAAU,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EAAO,WAAU,gBAAe,SAASV,GACrC,UAAAE,GACL;AAAA,QACA,gBAAAK,EAACG,GAAA,EAAO,SAAQ,WAAU,WAAU,sBAAqB,SAASP,GAAgB,UAAUE,GACvF,UAAAD,EAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAQI,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,WAAU;AAAA,MACV,YAAU;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/components/dialog/Dialog.d.ts

@@ -30,7 +30,17 @@ export type BaseDialogProps = {
      *
      * 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`
+     * Possible values are:
+     *
+     * - `'xs'`
+     * - `'sm'`
+     * - `'lg'`
+     * - `'xl'`
+     * - `'fullwidth'`
+     * - `'fullheight'`
+     * - `'fullheight-lg'`
+     * - `'fullheight-xl'`
+     * - `'fullscreen'`
      *
      * @default 'md'
      */
@@ -87,6 +97,8 @@ export type DialogProps = BaseDialogProps & {
      * A callback function to be executed before closing the dialog.
      *
      * If the function returns `false`, the dialog will not be closed
+     *
+     * @default () => true
      */
     onCloseValidation?: () => boolean;
 };

package/components/dialog/Dialog.js

@@ -1,19 +1,19 @@
-import { jsx as s, jsxs as r, Fragment as oo } from "react/jsx-runtime";
-import { useState as c, useRef as eo } from "react";
-import lo from "react-dom";
-import L from "classnames";
-import { noop as S } from "es-toolkit/function";
-import { useReducedMotion as to, AnimatePresence as so, motion as _ } from "motion/react";
-import { getOrCreatePortalRoot as ao } from "../../utils/portalRoot.js";
-import io from "../../hooks/useEsc.js";
-import x from "./DialogHeader.js";
-import I from "./DialogBody.js";
+import { jsx as s, jsxs as r, Fragment as $ } from "react/jsx-runtime";
+import { useState as m } from "react";
+import oo from "react-dom";
+import { noop as L } from "es-toolkit/function";
+import { useReducedMotion as eo, AnimatePresence as lo, motion as S } from "motion/react";
+import _ from "../../utils/classNames.js";
+import { getOrCreatePortalRoot as to } from "../../utils/portalRoot.js";
+import so from "../../hooks/useEsc.js";
+import I from "./DialogHeader.js";
+import v from "./DialogBody.js";
 import D from "./DialogFooter.js";
-import no from "../../hooks/useFocusTrap.js";
-import { DialogContextProvider as ro } from "./dialogContext.js";
-const C = "modal-dialog", v = "modal-open", o = (w) => {
+import ao from "../../hooks/useFocusTrap.js";
+import { DialogContextProvider as io } from "./dialogContext.js";
+const C = "modal-dialog", x = "modal-open", o = (w) => {
   const {
-    title: m,
+    title: c,
     subtitle: N,
     body: d,
     footer: f,
@@ -21,39 +21,39 @@ const C = "modal-dialog", v = "modal-open", o = (w) => {
     className: F = "",
     bodyClassName: Z,
     footerClassName: A,
-    showXsDialogBorders: R = !1,
-    showCloseButton: O = !0,
-    useOverflow: B = !1,
+    showXsDialogBorders: O = !1,
+    showCloseButton: B = !0,
+    useOverflow: H = !1,
     bsSize: e,
     show: a = !1,
-    onClose: H = S,
+    onClose: R = L,
     disableEsc: T = !1,
-    onEsc: M = S,
+    onEsc: M = L,
     onCloseValidation: P = () => !0,
     children: u,
     ...G
-  } = w, [U, h] = c(a), i = eo(null), p = ao(), l = to(), [X, j] = c();
-  no(X);
-  const k = (t) => {
-    const n = p.getElementsByClassName(C).length > 1;
-    t ? document.body.classList.add(v) : !t && !n && document.body.classList.remove(v);
-  }, W = () => g(), g = (t) => {
-    P() && (h(!1), H(), M());
-  }, [z, K] = c(a);
-  a !== z && (h(a), k(a), K(a)), io(() => {
-    if (!i || !i.current)
+  } = w, [U, h] = m(a), p = to(), l = eo(), [n, X] = m(null);
+  ao(n);
+  const j = (t) => {
+    const i = p.getElementsByClassName(C).length > 1;
+    t ? document.body.classList.add(x) : !t && !i && document.body.classList.remove(x);
+  }, k = () => g(), g = (t) => {
+    P() && (h(!1), R(), M());
+  }, [z, K] = m(a);
+  a !== z && (h(a), j(a), K(a)), so(() => {
+    if (!n)
       return;
-    const t = i.current, n = document.activeElement;
-    !T && t.contains(n) && g();
+    const t = n, i = document.activeElement;
+    !T && t.contains(i) && g();
   });
   const V = (t) => {
     if (t.opacity === 0)
       return;
-    const n = i.current, $ = document.activeElement;
-    n?.contains($) || i?.current?.focus();
-  }, q = L("modal", "show", F), E = e === "xs", y = !!u, J = L(
+    const i = n, Y = document.activeElement;
+    i?.contains(Y) || i?.focus();
+  }, W = _("modal", "show", F), E = e === "xs", y = !!u, q = _(
     C,
-    B && "modal-overflow",
+    H && "modal-overflow",
     e === "xs" && "modal-xs",
     e === "sm" && "modal-sm",
     e === "lg" && "modal-lg",
@@ -64,22 +64,22 @@ const C = "modal-dialog", v = "modal-open", o = (w) => {
     e === "fullheight-lg" && "modal-full-height modal-lg",
     e === "fullheight-xl" && "modal-full-height modal-xl",
     e === "fullscreen" && "modal-fullscreen"
-  ), Q = {
+  ), J = {
     type: "spring",
     damping: 33,
     stiffness: 500
-  }, Y = {
+  }, Q = {
     type: "spring",
     damping: 25,
     stiffness: 400
   };
-  return lo.createPortal(
+  return oo.createPortal(
     /* @__PURE__ */ s(
-      ro,
+      io,
       {
-        value: { onClose: W, isSmallestDialog: E, showXsDialogBorders: R, showCloseButton: O },
+        value: { onClose: k, isSmallestDialog: E, showXsDialogBorders: O, showCloseButton: B },
         children: /* @__PURE__ */ s(
-          so,
+          lo,
           {
             initial: !1,
             mode: "wait",
@@ -87,45 +87,45 @@ const C = "modal-dialog", v = "modal-open", o = (w) => {
               "div",
               {
                 ...G,
-                className: q,
+                className: W,
                 role: "dialog",
-                ref: i,
                 "aria-label": "dialog",
                 tabIndex: 0,
                 children: [
                   /* @__PURE__ */ s(
-                    _.div,
+                    S.div,
                     {
                       initial: l ? !1 : { opacity: 0, y: "-50%" },
-                      animate: l ? { opacity: 1 } : { opacity: 1, y: 0, transition: E ? Y : Q },
+                      animate: l ? { opacity: 1 } : { opacity: 1, y: 0, transition: E ? Q : J },
                       exit: l ? void 0 : { opacity: 0, y: "-150%" },
                       transition: l ? { duration: 0 } : {
                         opacity: { duration: 0.2 },
                         y: { duration: 0.3 }
                       },
                       onAnimationComplete: V,
-                      ref: j,
-                      className: J,
+                      ref: X,
+                      className: q,
                       role: "document",
+                      tabIndex: -1,
                       children: /* @__PURE__ */ r("div", { className: "modal-content", children: [
                         y && u,
-                        !y && /* @__PURE__ */ r(oo, { children: [
-                          m && /* @__PURE__ */ s(
-                            x,
+                        !y && /* @__PURE__ */ r($, { children: [
+                          c && /* @__PURE__ */ s(
+                            I,
                             {
-                              title: m,
+                              title: c,
                               subtitle: N,
                               headerButtons: b
                             }
                           ),
-                          d && /* @__PURE__ */ s(I, { className: Z, children: d }),
+                          d && /* @__PURE__ */ s(v, { className: Z, children: d }),
                           f && /* @__PURE__ */ s(D, { className: A, children: f })
                         ] })
                       ] })
                     }
                   ),
                   /* @__PURE__ */ s(
-                    _.div,
+                    S.div,
                     {
                       initial: l ? !1 : { opacity: 0 },
                       animate: { opacity: 1 },
@@ -144,8 +144,8 @@ const C = "modal-dialog", v = "modal-open", o = (w) => {
     p
   );
 };
-o.Title = x;
-o.Body = I;
+o.Title = I;
+o.Body = v;
 o.Footer = D;
 o.SIZE_XS = "xs";
 o.SIZE_SM = "sm";

package/components/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import React, { useState, useRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport { AnimatePresence, type AnimationDefinition, motion, type Transition, useReducedMotion } from 'motion/react';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport DialogHeader from './DialogHeader';\nimport DialogBody from './DialogBody';\nimport DialogFooter from './DialogFooter';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { DialogContextProvider } from './dialogContext';\n\nconst MODAL_DIALOG_CLASS = 'modal-dialog';\nconst MODAL_OPEN_CLASS = 'modal-open';\n\nexport type DialogSize =\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | 'full'\n    | 'fullwidth'\n    | 'fullheight'\n    | 'fullheight-lg'\n    | 'fullheight-xl'\n    | 'fullscreen';\n\nexport type BaseDialogProps = {\n    /**\n     * Opens the dialog when set to `true`.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title?: React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * Shows a close button when set to `true`.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * A callback function invoked when the dialog closes.\n     */\n    onClose?: () => void;\n\n    /**\n     * Defined how large the dialog will be rendered.\n     *\n     * By default, the dialog has a medium size, and thus it can be omitted.\n     *\n     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` 'fullheight-lg' 'fullheight-xl' `fullscreen`\n     *\n     * @default 'md'\n     */\n    bsSize?: DialogSize;\n\n    /**\n     * Enables or disabled closing the dialog via esc key.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default false\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Show Header and Footer Borders for the \"xs\" dialog\n     *\n     * @default false\n     */\n    showXsDialogBorders?: boolean;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nexport type DialogProps = BaseDialogProps & {\n    /**\n     * The dialog body content.\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * A callback fired when esc key is pressed and the dialog is about to close.\n     */\n    onEsc?: VoidFunction;\n\n    /**\n     * A callback function to be executed before closing the dialog.\n     *\n     * If the function returns `false`, the dialog will not be closed\n     */\n    onCloseValidation?: () => boolean;\n};\n\nconst Dialog = (props: PropsWithChildren<DialogProps>) => {\n    const {\n        title,\n        subtitle,\n        body,\n        footer,\n        headerButtons,\n        className = '',\n        bodyClassName,\n        footerClassName,\n        showXsDialogBorders = false,\n        showCloseButton = true,\n        useOverflow = false,\n        bsSize,\n        show = false,\n        onClose: onCloseCallback = noop,\n        disableEsc = false,\n        onEsc = noop,\n        onCloseValidation = () => true,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [open, setOpen] = useState(show);\n    const dialogWrapperRef = useRef<HTMLDivElement>(null);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const shouldReduceMotion = useReducedMotion();\n\n    // Use a setter function for the focus trap as it would not re-render\n    // and fails to set the focus listener\n    const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement>();\n    useFocusTrap(focusTrapRef);\n\n    const toggleBodyClass = (add: boolean) => {\n        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS\n\n        // Remove \"modal-open\" from body only when there is no other dialog in the DOM\n        // in order to support multiple dialogs\n        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;\n\n        if (add) {\n            document.body.classList.add(MODAL_OPEN_CLASS);\n        } else if (!add && !hasOtherDialogs) {\n            document.body.classList.remove(MODAL_OPEN_CLASS);\n        }\n    };\n\n    const handleCloseButton = () => closeDialog(true);\n\n    const closeDialog = (usedEscapeKey: boolean) => {\n        if (onCloseValidation()) {\n            setOpen(false);\n            onCloseCallback();\n\n            usedEscapeKey && onEsc();\n        }\n    };\n\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        setOpen(show);\n        toggleBodyClass(show);\n        setPreviousShow(show);\n    }\n\n    useEsc(() => {\n        if (!dialogWrapperRef || !dialogWrapperRef.current) {\n            return;\n        }\n\n        const dialogElement = dialogWrapperRef.current;\n        const currentActiveElement = document.activeElement;\n\n        // Only allow to close the dialog when the focus is inside the dialog\n        if (!disableEsc && dialogElement.contains(currentActiveElement)) {\n            closeDialog(true);\n        }\n    });\n\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        // The animation complete callback is invoked too when closing the dialog.\n        // For that we check the animation props like the \"opacity\" to skip focusing\n        // on the way out when closing the dialog.\n        // @ts-ignore\n        if (definition.opacity === 0) {\n            return;\n        }\n\n        const dialogElement = dialogWrapperRef.current;\n        const currentActiveElement = document.activeElement;\n\n        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused\n        // elements like inputs would lose their focus to the dialog.\n        // Note that in order to focus the dialog itself, the tabindex has to be set on that element\n        // IMPORTANT: make sure the dialog has a tabIndex prop\n        if (!dialogElement?.contains(currentActiveElement)) {\n            dialogWrapperRef?.current?.focus();\n        }\n    };\n\n    const modalClasses = classNames('modal', 'show', className);\n\n    const isSmallestDialog = bsSize === 'xs';\n\n    const hasChildren = !!children;\n\n    const modalDialogClasses = classNames(\n        MODAL_DIALOG_CLASS,\n        useOverflow && 'modal-overflow',\n        bsSize === 'xs' && 'modal-xs',\n        bsSize === 'sm' && 'modal-sm',\n        bsSize === 'lg' && 'modal-lg',\n        bsSize === 'xl' && 'modal-xl',\n        bsSize === 'full' && 'modal-full-width',\n        bsSize === 'fullwidth' && 'modal-full-width',\n        bsSize === 'fullheight' && 'modal-full-height',\n        bsSize === 'fullheight-lg' && 'modal-full-height modal-lg',\n        bsSize === 'fullheight-xl' && 'modal-full-height modal-xl',\n        bsSize === 'fullscreen' && 'modal-fullscreen'\n    );\n\n    const spring: Transition = {\n        type: 'spring',\n        damping: 33,\n        stiffness: 500,\n    };\n\n    const springXs: Transition = {\n        type: 'spring',\n        damping: 25,\n        stiffness: 400,\n    };\n\n    return ReactDOM.createPortal(\n        <DialogContextProvider\n            value={{ onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }}\n        >\n            {/* @ts-ignore-next-line */}\n            <AnimatePresence\n                // Disable any initial animations on children that\n                // are present when the component is first rendered\n                initial={false}\n                // Only render one component at a time.\n                // The exiting component will finish its exit\n                // animation before entering component is rendered\n                mode='wait'\n            >\n                {open && (\n                    <div\n                        {...remainingProps}\n                        className={modalClasses}\n                        role='dialog'\n                        ref={dialogWrapperRef}\n                        aria-label='dialog'\n                        // Make sure it has a tabIndex to focus the dialog so the close on esc works.\n                        // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>\n                        tabIndex={0}\n                    >\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0, y: '-50%' }}\n                            animate={\n                                shouldReduceMotion\n                                    ? { opacity: 1 }\n                                    : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }\n                            }\n                            exit={shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }}\n                            transition={\n                                shouldReduceMotion\n                                    ? { duration: 0 }\n                                    : {\n                                          opacity: { duration: 0.2 },\n                                          y: { duration: 0.3 },\n                                      }\n                            }\n                            onAnimationComplete={handleAnimationComplete}\n                            // @ts-ignore\n                            ref={setFocusTrapRef}\n                            className={modalDialogClasses}\n                            role='document'\n                        >\n                            <div className='modal-content'>\n                                {hasChildren && children}\n                                {!hasChildren && (\n                                    <>\n                                        {title && (\n                                            <DialogHeader\n                                                title={title}\n                                                subtitle={subtitle}\n                                                headerButtons={headerButtons}\n                                            />\n                                        )}\n                                        {body && <DialogBody className={bodyClassName}>{body}</DialogBody>}\n                                        {footer && <DialogFooter className={footerClassName}>{footer}</DialogFooter>}\n                                    </>\n                                )}\n                            </div>\n                        </motion.div>\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={shouldReduceMotion ? undefined : { opacity: 0 }}\n                            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }}\n                            className='modal-backdrop'\n                        />\n                    </div>\n                )}\n            </AnimatePresence>\n        </DialogContextProvider>,\n        modalRoot\n    );\n};\n\nDialog.Title = DialogHeader;\nDialog.Body = DialogBody;\nDialog.Footer = DialogFooter;\n\nDialog.SIZE_XS = 'xs' as const;\nDialog.SIZE_SM = 'sm' as const;\nDialog.SIZE_MD = 'md' as const; // default\nDialog.SIZE_LG = 'lg' as const;\nDialog.SIZE_XL = 'xl' as const;\nDialog.SIZE_FULL = 'full' as const;\nDialog.SIZE_FULL_WIDTH = 'fullwidth' as const;\nDialog.SIZE_FULL_HEIGHT = 'fullheight' as const;\nDialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg' as const;\nDialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl' as const;\nDialog.SIZE_FULL_SCREEN = 'fullscreen' as const;\n\nexport default Dialog;\n"],"names":["MODAL_DIALOG_CLASS","MODAL_OPEN_CLASS","Dialog","props","title","subtitle","body","footer","headerButtons","className","bodyClassName","footerClassName","showXsDialogBorders","showCloseButton","useOverflow","bsSize","show","onCloseCallback","noop","disableEsc","onEsc","onCloseValidation","children","remainingProps","open","setOpen","useState","dialogWrapperRef","useRef","modalRoot","getOrCreatePortalRoot","shouldReduceMotion","useReducedMotion","focusTrapRef","setFocusTrapRef","useFocusTrap","toggleBodyClass","add","hasOtherDialogs","handleCloseButton","closeDialog","usedEscapeKey","previousShow","setPreviousShow","useEsc","dialogElement","currentActiveElement","handleAnimationComplete","definition","modalClasses","classNames","isSmallestDialog","hasChildren","modalDialogClasses","spring","springXs","ReactDOM","jsx","DialogContextProvider","AnimatePresence","jsxs","motion","Fragment","DialogHeader","DialogBody","DialogFooter"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import React, { useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { noop } from 'es-toolkit/function';\nimport { AnimatePresence, type AnimationDefinition, motion, type Transition, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport DialogHeader from './DialogHeader';\nimport DialogBody from './DialogBody';\nimport DialogFooter from './DialogFooter';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { DialogContextProvider } from './dialogContext';\n\nconst MODAL_DIALOG_CLASS = 'modal-dialog';\nconst MODAL_OPEN_CLASS = 'modal-open';\n\nexport type DialogSize =\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | 'full'\n    | 'fullwidth'\n    | 'fullheight'\n    | 'fullheight-lg'\n    | 'fullheight-xl'\n    | 'fullscreen';\n\nexport type BaseDialogProps = {\n    /**\n     * Opens the dialog when set to `true`.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title?: React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * Shows a close button when set to `true`.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * A callback function invoked when the dialog closes.\n     */\n    onClose?: () => void;\n\n    /**\n     * Defined how large the dialog will be rendered.\n     *\n     * By default, the dialog has a medium size, and thus it can be omitted.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'lg'`\n     * - `'xl'`\n     * - `'fullwidth'`\n     * - `'fullheight'`\n     * - `'fullheight-lg'`\n     * - `'fullheight-xl'`\n     * - `'fullscreen'`\n     *\n     * @default 'md'\n     */\n    bsSize?: DialogSize;\n\n    /**\n     * Enables or disabled closing the dialog via esc key.\n     *\n     * @default false\n     */\n    disableEsc?: boolean;\n\n    /**\n     * Enables the modal body to overflow and use inline scrolling if needed.\n     *\n     * @default false\n     */\n    useOverflow?: boolean;\n\n    /**\n     * Show Header and Footer Borders for the \"xs\" dialog\n     *\n     * @default false\n     */\n    showXsDialogBorders?: boolean;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nexport type DialogProps = BaseDialogProps & {\n    /**\n     * The dialog body content.\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The dialog body content.\n     */\n    footer?: React.ReactNode;\n\n    /**\n     * Additional classes for the modal-body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    footerClassName?: string;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    /**\n     * A callback fired when esc key is pressed and the dialog is about to close.\n     */\n    onEsc?: VoidFunction;\n\n    /**\n     * A callback function to be executed before closing the dialog.\n     *\n     * If the function returns `false`, the dialog will not be closed\n     *\n     * @default () => true\n     */\n    onCloseValidation?: () => boolean;\n};\n\nconst Dialog = (props: PropsWithChildren<DialogProps>) => {\n    const {\n        title,\n        subtitle,\n        body,\n        footer,\n        headerButtons,\n        className = '',\n        bodyClassName,\n        footerClassName,\n        showXsDialogBorders = false,\n        showCloseButton = true,\n        useOverflow = false,\n        bsSize,\n        show = false,\n        onClose: onCloseCallback = noop,\n        disableEsc = false,\n        onEsc = noop,\n        onCloseValidation = () => true,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [open, setOpen] = useState(show);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const shouldReduceMotion = useReducedMotion();\n\n    // Use a setter function for the focus trap as it would not re-render\n    // and fails to set the focus listener\n    const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement | null>(null);\n    useFocusTrap(focusTrapRef);\n\n    const toggleBodyClass = (add: boolean) => {\n        // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS\n\n        // Remove \"modal-open\" from body only when there is no other dialog in the DOM\n        // in order to support multiple dialogs\n        const hasOtherDialogs = modalRoot.getElementsByClassName(MODAL_DIALOG_CLASS).length > 1;\n\n        if (add) {\n            document.body.classList.add(MODAL_OPEN_CLASS);\n        } else if (!add && !hasOtherDialogs) {\n            document.body.classList.remove(MODAL_OPEN_CLASS);\n        }\n    };\n\n    const handleCloseButton = () => closeDialog(true);\n\n    const closeDialog = (usedEscapeKey: boolean) => {\n        if (onCloseValidation()) {\n            setOpen(false);\n            onCloseCallback();\n\n            usedEscapeKey && onEsc();\n        }\n    };\n\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        setOpen(show);\n        toggleBodyClass(show);\n        setPreviousShow(show);\n    }\n\n    useEsc(() => {\n        if (!focusTrapRef) {\n            return;\n        }\n\n        const dialogElement = focusTrapRef;\n        const currentActiveElement = document.activeElement;\n\n        // Only allow to close the dialog when the focus is inside the dialog\n        if (!disableEsc && dialogElement.contains(currentActiveElement)) {\n            closeDialog(true);\n        }\n    });\n\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        // The animation complete callback is invoked too when closing the dialog.\n        // For that we check the animation props like the \"opacity\" to skip focusing\n        // on the way out when closing the dialog.\n        // @ts-expect-error\n        if (definition.opacity === 0) {\n            return;\n        }\n\n        const dialogElement = focusTrapRef;\n        const currentActiveElement = document.activeElement;\n\n        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused\n        // elements like inputs would lose their focus to the dialog.\n        // Note that in order to focus the dialog itself, the tabindex has to be set on that element\n        // IMPORTANT: make sure the dialog has a tabIndex prop\n        if (!dialogElement?.contains(currentActiveElement)) {\n            dialogElement?.focus();\n        }\n    };\n\n    const modalClasses = classNames('modal', 'show', className);\n\n    const isSmallestDialog = bsSize === 'xs';\n\n    const hasChildren = !!children;\n\n    const modalDialogClasses = classNames(\n        MODAL_DIALOG_CLASS,\n        useOverflow && 'modal-overflow',\n        bsSize === 'xs' && 'modal-xs',\n        bsSize === 'sm' && 'modal-sm',\n        bsSize === 'lg' && 'modal-lg',\n        bsSize === 'xl' && 'modal-xl',\n        bsSize === 'full' && 'modal-full-width',\n        bsSize === 'fullwidth' && 'modal-full-width',\n        bsSize === 'fullheight' && 'modal-full-height',\n        bsSize === 'fullheight-lg' && 'modal-full-height modal-lg',\n        bsSize === 'fullheight-xl' && 'modal-full-height modal-xl',\n        bsSize === 'fullscreen' && 'modal-fullscreen'\n    );\n\n    const spring: Transition = {\n        type: 'spring',\n        damping: 33,\n        stiffness: 500,\n    };\n\n    const springXs: Transition = {\n        type: 'spring',\n        damping: 25,\n        stiffness: 400,\n    };\n\n    return ReactDOM.createPortal(\n        <DialogContextProvider\n            value={{ onClose: handleCloseButton, isSmallestDialog, showXsDialogBorders, showCloseButton }}\n        >\n            <AnimatePresence\n                // Disable any initial animations on children that\n                // are present when the component is first rendered\n                initial={false}\n                // Only render one component at a time.\n                // The exiting component will finish its exit\n                // animation before entering component is rendered\n                mode='wait'\n            >\n                {open && (\n                    <div\n                        {...remainingProps}\n                        className={modalClasses}\n                        role='dialog'\n                        aria-label='dialog'\n                        // Make sure it has a tabIndex to focus the dialog so the close on esc works.\n                        // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>\n                        tabIndex={0}\n                    >\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0, y: '-50%' }}\n                            animate={\n                                shouldReduceMotion\n                                    ? { opacity: 1 }\n                                    : { opacity: 1, y: 0, transition: isSmallestDialog ? springXs : spring }\n                            }\n                            exit={shouldReduceMotion ? undefined : { opacity: 0, y: '-150%' }}\n                            transition={\n                                shouldReduceMotion\n                                    ? { duration: 0 }\n                                    : {\n                                          opacity: { duration: 0.2 },\n                                          y: { duration: 0.3 },\n                                      }\n                            }\n                            onAnimationComplete={handleAnimationComplete}\n                            ref={setFocusTrapRef}\n                            className={modalDialogClasses}\n                            role='document'\n                            // Focus target for keyboard handling after open.\n                            // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable container\n                            tabIndex={-1}\n                        >\n                            <div className='modal-content'>\n                                {hasChildren && children}\n                                {!hasChildren && (\n                                    <>\n                                        {title && (\n                                            <DialogHeader\n                                                title={title}\n                                                subtitle={subtitle}\n                                                headerButtons={headerButtons}\n                                            />\n                                        )}\n                                        {body && <DialogBody className={bodyClassName}>{body}</DialogBody>}\n                                        {footer && <DialogFooter className={footerClassName}>{footer}</DialogFooter>}\n                                    </>\n                                )}\n                            </div>\n                        </motion.div>\n                        <motion.div\n                            initial={shouldReduceMotion ? false : { opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={shouldReduceMotion ? undefined : { opacity: 0 }}\n                            transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.1 }}\n                            className='modal-backdrop'\n                        />\n                    </div>\n                )}\n            </AnimatePresence>\n        </DialogContextProvider>,\n        modalRoot\n    );\n};\n\nDialog.Title = DialogHeader;\nDialog.Body = DialogBody;\nDialog.Footer = DialogFooter;\n\nDialog.SIZE_XS = 'xs' as const;\nDialog.SIZE_SM = 'sm' as const;\nDialog.SIZE_MD = 'md' as const; // default\nDialog.SIZE_LG = 'lg' as const;\nDialog.SIZE_XL = 'xl' as const;\nDialog.SIZE_FULL = 'full' as const;\nDialog.SIZE_FULL_WIDTH = 'fullwidth' as const;\nDialog.SIZE_FULL_HEIGHT = 'fullheight' as const;\nDialog.SIZE_FULL_HEIGHT_LG = 'fullheight-lg' as const;\nDialog.SIZE_FULL_HEIGHT_XL = 'fullheight-xl' as const;\nDialog.SIZE_FULL_SCREEN = 'fullscreen' as const;\n\nexport default Dialog;\n"],"names":["MODAL_DIALOG_CLASS","MODAL_OPEN_CLASS","Dialog","props","title","subtitle","body","footer","headerButtons","className","bodyClassName","footerClassName","showXsDialogBorders","showCloseButton","useOverflow","bsSize","show","onCloseCallback","noop","disableEsc","onEsc","onCloseValidation","children","remainingProps","open","setOpen","useState","modalRoot","getOrCreatePortalRoot","shouldReduceMotion","useReducedMotion","focusTrapRef","setFocusTrapRef","useFocusTrap","toggleBodyClass","add","hasOtherDialogs","handleCloseButton","closeDialog","usedEscapeKey","previousShow","setPreviousShow","useEsc","dialogElement","currentActiveElement","handleAnimationComplete","definition","modalClasses","classNames","isSmallestDialog","hasChildren","modalDialogClasses","spring","springXs","ReactDOM","jsx","DialogContextProvider","AnimatePresence","jsxs","motion","Fragment","DialogHeader","DialogBody","DialogFooter"],"mappings":"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"}

package/components/dialog/DialogBody.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 const t = ({ className: a = "", children: o, ...s }) => {
   const l = d("modal-body", a);
   return /* @__PURE__ */ r("div", { ...s, className: l, "aria-label": "dialog body", children: o });

package/components/dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../src/components/dialog/DialogBody.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type DialogBodyProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-body element.\n     */\n    className?: string;\n};\n\nconst DialogBody = ({ className = '', children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => {\n    const classes = classNames('modal-body', className);\n    return (\n        <div {...remainingProps} className={classes} aria-label='dialog body'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogBody;\n"],"names":["DialogBody","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;AAUA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAAyD;AACxG,QAAMC,IAAUC,EAAW,cAAcJ,CAAS;AAClD,SACI,gBAAAK,EAAC,SAAK,GAAGH,GAAgB,WAAWC,GAAS,cAAW,eACnD,UAAAF,GACL;AAER;"}
+{"version":3,"file":"DialogBody.js","sources":["../../../src/components/dialog/DialogBody.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DialogBodyProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-body element.\n     */\n    className?: string;\n};\n\nconst DialogBody = ({ className = '', children, ...remainingProps }: PropsWithChildren<DialogBodyProps>) => {\n    const classes = classNames('modal-body', className);\n    return (\n        <div {...remainingProps} className={classes} aria-label='dialog body'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogBody;\n"],"names":["DialogBody","className","children","remainingProps","classes","classNames","jsx"],"mappings":";;AAWA,MAAMA,IAAa,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,QAAyD;AACxG,QAAMC,IAAUC,EAAW,cAAcJ,CAAS;AAClD,SACI,gBAAAK,EAAC,SAAK,GAAGH,GAAgB,WAAWC,GAAS,cAAW,eACnD,UAAAF,GACL;AAER;"}

package/components/dialog/DialogFooter.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 import { useDialogContext as m } from "./dialogContext.js";
 const f = (o) => {
   const { className: s = "", children: r, ...a } = o, { isSmallestDialog: e, showXsDialogBorders: t } = m(), l = d(

package/components/dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogFooterProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    className?: string;\n};\n\nconst DialogFooter = (props: PropsWithChildren<DialogFooterProps>) => {\n    const { className = '', children, ...remainingProps } = props;\n\n    const { isSmallestDialog, showXsDialogBorders } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const footerClassNames = classNames(\n        'modal-footer',\n        !doShowXsDialogBorders && 'border-top-none padding-top-0',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={footerClassNames} aria-label='dialog footer'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogFooter;\n"],"names":["DialogFooter","props","className","children","remainingProps","isSmallestDialog","showXsDialogBorders","useDialogContext","footerClassNames","classNames","jsx"],"mappings":";;;AAYA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBH,GAElD,EAAE,kBAAAI,GAAkB,qBAAAC,EAAA,IAAwBC,EAAA,GAI5CC,IAAmBC;AAAA,IACrB;AAAA,IACA,EAJ0BJ,IAAmBC,IAAsB,OAIzC;AAAA,IAC1BJ;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,SAAK,GAAGN,GAAgB,WAAWI,GAAkB,cAAW,iBAC5D,UAAAL,GACL;AAER;"}
+{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogFooterProps = ComponentProps<'div'> & {\n    /**\n     * Additional classes for the modal-footer element.\n     */\n    className?: string;\n};\n\nconst DialogFooter = (props: PropsWithChildren<DialogFooterProps>) => {\n    const { className = '', children, ...remainingProps } = props;\n\n    const { isSmallestDialog, showXsDialogBorders } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const footerClassNames = classNames(\n        'modal-footer',\n        !doShowXsDialogBorders && 'border-top-none padding-top-0',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={footerClassNames} aria-label='dialog footer'>\n            {children}\n        </div>\n    );\n};\n\nexport default DialogFooter;\n"],"names":["DialogFooter","props","className","children","remainingProps","isSmallestDialog","showXsDialogBorders","useDialogContext","footerClassNames","classNames","jsx"],"mappings":";;;AAaA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBH,GAElD,EAAE,kBAAAI,GAAkB,qBAAAC,EAAA,IAAwBC,EAAA,GAI5CC,IAAmBC;AAAA,IACrB;AAAA,IACA,EAJ0BJ,IAAmBC,IAAsB,OAIzC;AAAA,IAC1BJ;AAAA,EAAA;AAGJ,SACI,gBAAAQ,EAAC,SAAK,GAAGN,GAAgB,WAAWI,GAAkB,cAAW,iBAC5D,UAAAL,GACL;AAER;"}

package/components/dialog/DialogHeader.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import f from "react";
 import { noop as v } from "es-toolkit/function";
-import r from "classnames";
+import r from "../../utils/classNames.js";
 import { useDialogContext as x } from "./dialogContext.js";
 const j = (d) => {
   const { title: i, subtitle: t, headerButtons: s, onCloseButtonClick: n = v, ...c } = d, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), l = a ? h : !0, b = a ? !1 : u, p = r("modal-header", !l && "border-bottom-none"), g = r(