@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

package/components/datepicker/dayPickerUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayPickerUtils.js","sources":["../../../src/components/datepicker/dayPickerUtils.ts"],"sourcesContent":["import { format, isValid, parse, type Locale } from 'date-fns';\nimport * as locales from 'date-fns/locale';\n\nimport type { ClearableInputProps } from '../clearableInput/ClearableInput';\nimport type { DateRange, DayPickerMode } from './dayPickerTypes';\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\nexport const supportedDayPickerLocales = Object.keys(localeFormatMap);\n\nexport const resolveLocale = (localeCode: string): Locale => {\n    const normalizedLocaleCode = localeCode.trim();\n    const dateFnsLocaleKey = normalizedLocaleCode.replace(/-([a-z])/gi, (_, segment: string) => segment.toUpperCase());\n    const baseCode = normalizedLocaleCode.split('-')[0];\n\n    return (\n        (locales as Record<string, Locale>)[dateFnsLocaleKey] ||\n        (locales as Record<string, Locale>)[normalizedLocaleCode] ||\n        (locales as Record<string, Locale>)[baseCode] ||\n        locales.enGB\n    );\n};\n\nexport const formatDate = (date: Date | undefined, localeCode: string, dateFormat?: string): string => {\n    if (!date) {\n        return '';\n    }\n\n    return format(date, getInputFormat(localeCode, dateFormat));\n};\n\nexport const formatSelectionForInput = (\n    selected: Date | Date[] | DateRange | undefined,\n    localeCode: string,\n    mode: DayPickerMode,\n    dateFormat?: string\n): string => {\n    if (!selected) {\n        return '';\n    }\n\n    const formatFn = (date: Date) => formatDate(date, localeCode, dateFormat);\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 = selected.from ? formatFn(selected.from) : '...';\n        const to = selected.to ? formatFn(selected.to) : '...';\n        return `${from} - ${to}`;\n    }\n\n    return '';\n};\n\nexport const getInputFormat = (localeCode: string, dateFormat?: string) =>\n    dateFormat || localeFormatMap[localeCode] || 'yyyy-MM-dd';\n\nconst getInputMaskPattern = (inputFormat: string) => {\n    let pattern = '';\n\n    for (let index = 0; index < inputFormat.length; ) {\n        if (inputFormat.startsWith('dd', index)) {\n            pattern += 'd';\n            index += 2;\n            continue;\n        }\n\n        if (inputFormat.startsWith('MM', index)) {\n            pattern += 'm';\n            index += 2;\n            continue;\n        }\n\n        if (inputFormat.startsWith('yyyy', index)) {\n            pattern += 'Y';\n            index += 4;\n            continue;\n        }\n\n        const currentChar = inputFormat[index];\n        if (!currentChar) {\n            break;\n        }\n\n        if (/[a-zA-Z]/.test(currentChar)) {\n            return;\n        }\n\n        pattern += currentChar;\n        index += 1;\n    }\n\n    return pattern;\n};\n\nexport const getInputMaskProps = (\n    localeCode: string,\n    dateFormat?: string\n): Pick<ClearableInputProps, 'mask' | 'pattern' | 'format' | 'parse'> | undefined => {\n    const inputFormat = getInputFormat(localeCode, dateFormat);\n    const pattern = getInputMaskPattern(inputFormat);\n    if (!pattern) {\n        return;\n    }\n\n    return {\n        mask: Date,\n        pattern,\n        format: (value: Date | null) => {\n            if (!value) {\n                return '';\n            }\n\n            return format(value, inputFormat);\n        },\n        parse: (value: string) => parse(value, inputFormat, new Date()),\n    };\n};\n\nexport const parseDateString = (\n    value: string | undefined,\n    localeCode: string,\n    dateFormat?: string\n): Date | undefined => {\n    if (!value) {\n        return;\n    }\n\n    const expectedFormat = dateFormat || getInputFormat(localeCode);\n    const parsed = parse(value, expectedFormat, new Date());\n    if (!isValid(parsed)) {\n        return;\n    }\n\n    if (format(parsed, expectedFormat) !== value) {\n        return;\n    }\n\n    return parsed;\n};\n"],"names":["localeFormatMap","supportedDayPickerLocales","resolveLocale","localeCode","normalizedLocaleCode","dateFnsLocaleKey","_","segment","baseCode","locales","formatDate","date","dateFormat","format","getInputFormat","formatSelectionForInput","selected","mode","formatFn","from","to","getInputMaskPattern","inputFormat","pattern","index","currentChar","getInputMaskProps","value","parse","parseDateString","expectedFormat","parsed","isValid"],"mappings":"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"}

package/components/datepicker/useDayPickerInputState.d.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent, RefObject } from 'react';
+import { DayPickerProps, DayPickerSelection, Modifiers } from './dayPickerTypes';
+type UseDayPickerInputStateParams = {
+    props: DayPickerProps;
+    locale: string;
+    dateFormat?: string;
+    inputProps?: DayPickerProps['inputProps'];
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    isDropdownOpen: boolean;
+    isSingleMode: boolean;
+    selectionBehavior: 'immediate' | 'deferred';
+    closeOnOutsideClick: boolean;
+    committedValue: DayPickerSelection;
+    draftValue: DayPickerSelection;
+    setDraftValue: (value: DayPickerSelection) => void;
+    commitValue: (value: DayPickerSelection, modifiers?: Modifiers) => void;
+    clearValue: () => void;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    applyDraftValue: () => void;
+    popperElementRef: RefObject<HTMLElement | null>;
+};
+declare const useDayPickerInputState: ({ props, locale, dateFormat, inputProps, onBlur, isDropdownOpen, isSingleMode, selectionBehavior, closeOnOutsideClick, committedValue, draftValue, setDraftValue, commitValue, clearValue, openDropdown, closeDropdown, applyDraftValue, popperElementRef, }: UseDayPickerInputStateParams) => {
+    displayValue: string;
+    handleInputBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (nextValue: string, _event?: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLSpanElement>) => void;
+    handleClearInput: () => void;
+    handleInputFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    inputMaskProps: Pick<import('../clearableInput/ClearableInput').ClearableInputProps, "pattern" | "mask" | "format" | "parse"> | undefined;
+};
+export default useDayPickerInputState;

package/components/datepicker/useDayPickerInputState.js

@@ -0,0 +1,85 @@
+import { useState as R, useEffect as H } from "react";
+import { isSingleDayPickerProps as d, isMultipleDayPickerProps as U, isRangeDayPickerProps as V } from "./dayPickerTypes.js";
+import { getInputMaskProps as W, formatSelectionForInput as C, parseDateString as X } from "./dayPickerUtils.js";
+const x = ({
+  props: n,
+  locale: e,
+  dateFormat: r,
+  inputProps: f,
+  onBlur: b,
+  isDropdownOpen: a,
+  isSingleMode: I,
+  selectionBehavior: s,
+  closeOnOutsideClick: j,
+  committedValue: y,
+  draftValue: k,
+  setDraftValue: S,
+  commitValue: F,
+  clearValue: D,
+  openDropdown: l,
+  closeDropdown: E,
+  applyDraftValue: m,
+  popperElementRef: q
+}) => {
+  const [g, P] = R(""), [K, c] = R(!1);
+  H(() => {
+    I && c(!1);
+  }, [y, I]), H(() => {
+    const t = a && s === "deferred" ? k : y;
+    I && K || P(_(t, n, e, r));
+  }, [
+    y,
+    k,
+    K,
+    a,
+    e,
+    r,
+    s,
+    I,
+    n
+  ]);
+  const z = (t) => {
+    f?.onFocus?.(t), a || l();
+  }, A = (t) => {
+    b?.(t), f?.onBlur?.(t);
+    const h = t.relatedTarget;
+    if (!(h && q.current?.contains(h))) {
+      if (d(n)) {
+        const u = T(n, g, e), i = u instanceof Date;
+        n.onInputChange?.(g, u, i), g === "" ? D() : i ? (c(!1), s === "immediate" ? F(u, {}) : S(u)) : c(!0);
+      }
+      j && E();
+    }
+  }, G = (t) => {
+    if (f?.onKeyDown?.(t), t.key === "Enter") {
+      if (t.preventDefault(), !a) {
+        l();
+        return;
+      }
+      s === "deferred" ? m() : E();
+    }
+  }, J = (t, h) => {
+    if (P(t), !d(n))
+      return;
+    const u = T(n, t, e), i = u instanceof Date;
+    n.onInputChange?.(t, u, i), c(t !== "" && !i), t === "" ? D() : i && s === "immediate" ? F(u, {}) : i && S(u);
+  }, L = () => {
+    c(!1), P(""), D();
+  }, N = I ? g : _(a && s === "deferred" ? k : y, n, e, r), Q = d(n) && !n.parseInput && !n.renderValue ? W(e, r) : void 0;
+  return {
+    displayValue: N,
+    handleInputBlur: A,
+    handleInputChange: J,
+    handleClearInput: L,
+    handleInputFocus: z,
+    handleInputKeyDown: G,
+    inputMaskProps: Q
+  };
+}, T = (n, e, r) => {
+  if (d(n))
+    return n.parseInput ? n.parseInput(e, r) : X(e, r, n.dateFormat);
+}, _ = (n, e, r, f) => d(e) ? e.renderValue ? e.renderValue(n, r) : C(n, r, "single", f) : U(e) ? e.renderValue ? e.renderValue(n, r) : C(n, r, "multiple", f) : V(e) ? e.renderValue ? e.renderValue(n, r) : C(n, r, "range", f) : "";
+export {
+  x as default
+};
+//# sourceMappingURL=useDayPickerInputState.js.map

package/components/datepicker/useDayPickerInputState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDayPickerInputState.js","sources":["../../../src/components/datepicker/useDayPickerInputState.ts"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    type ChangeEvent,\n    type FocusEvent,\n    type FocusEventHandler,\n    type KeyboardEvent,\n    type MouseEvent,\n    type RefObject,\n} from 'react';\n\nimport {\n    isMultipleDayPickerProps,\n    isRangeDayPickerProps,\n    isSingleDayPickerProps,\n    type DateRange,\n    type DayPickerProps,\n    type DayPickerSelection,\n    type Modifiers,\n} from './dayPickerTypes';\nimport { formatSelectionForInput, getInputMaskProps, parseDateString } from './dayPickerUtils';\n\ntype UseDayPickerInputStateParams = {\n    props: DayPickerProps;\n    locale: string;\n    dateFormat?: string;\n    inputProps?: DayPickerProps['inputProps'];\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    isDropdownOpen: boolean;\n    isSingleMode: boolean;\n    selectionBehavior: 'immediate' | 'deferred';\n    closeOnOutsideClick: boolean;\n    committedValue: DayPickerSelection;\n    draftValue: DayPickerSelection;\n    setDraftValue: (value: DayPickerSelection) => void;\n    commitValue: (value: DayPickerSelection, modifiers?: Modifiers) => void;\n    clearValue: () => void;\n    openDropdown: () => void;\n    closeDropdown: () => void;\n    applyDraftValue: () => void;\n    popperElementRef: RefObject<HTMLElement | null>;\n};\n\nconst useDayPickerInputState = ({\n    props,\n    locale,\n    dateFormat,\n    inputProps,\n    onBlur,\n    isDropdownOpen,\n    isSingleMode,\n    selectionBehavior,\n    closeOnOutsideClick,\n    committedValue,\n    draftValue,\n    setDraftValue,\n    commitValue,\n    clearValue,\n    openDropdown,\n    closeDropdown,\n    applyDraftValue,\n    popperElementRef,\n}: UseDayPickerInputStateParams) => {\n    const [rawInputValue, setRawInputValue] = useState('');\n    const [hasInvalidSingleInput, setHasInvalidSingleInput] = useState(false);\n\n    useEffect(() => {\n        if (isSingleMode) {\n            setHasInvalidSingleInput(false);\n        }\n    }, [committedValue, isSingleMode]);\n\n    useEffect(() => {\n        const selectionForDisplay = isDropdownOpen && selectionBehavior === 'deferred' ? draftValue : committedValue;\n\n        if (isSingleMode && hasInvalidSingleInput) {\n            return;\n        }\n\n        setRawInputValue(getDisplayValue(selectionForDisplay, props, locale, dateFormat));\n    }, [\n        committedValue,\n        draftValue,\n        hasInvalidSingleInput,\n        isDropdownOpen,\n        locale,\n        dateFormat,\n        selectionBehavior,\n        isSingleMode,\n        props,\n    ]);\n\n    const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n        inputProps?.onFocus?.(event);\n        if (!isDropdownOpen) {\n            openDropdown();\n        }\n    };\n\n    const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n        onBlur?.(event);\n        inputProps?.onBlur?.(event);\n\n        const nextFocused = event.relatedTarget as Node | null;\n        if (nextFocused && popperElementRef.current?.contains(nextFocused)) {\n            return;\n        }\n\n        if (isSingleDayPickerProps(props)) {\n            // Blur is the final validation point for manual input:\n            // the mask narrows input, but only parsing decides whether it becomes a real Date value.\n            const parsed = parseSingleInputValue(props, rawInputValue, locale);\n            const isValid = parsed instanceof Date;\n            props.onInputChange?.(rawInputValue, parsed, isValid);\n\n            if (rawInputValue === '') {\n                clearValue();\n            } else if (isValid) {\n                setHasInvalidSingleInput(false);\n                if (selectionBehavior === 'immediate') {\n                    commitValue(parsed, {});\n                } else {\n                    setDraftValue(parsed);\n                }\n            } else {\n                setHasInvalidSingleInput(true);\n            }\n        }\n\n        if (!closeOnOutsideClick) {\n            return;\n        }\n\n        closeDropdown();\n    };\n\n    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        inputProps?.onKeyDown?.(event);\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!isDropdownOpen) {\n                openDropdown();\n                return;\n            }\n\n            if (selectionBehavior === 'deferred') {\n                applyDraftValue();\n            } else {\n                closeDropdown();\n            }\n        }\n    };\n\n    const handleInputChange = (\n        nextValue: string,\n        _event?: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLSpanElement>\n    ) => {\n        setRawInputValue(nextValue);\n\n        if (!isSingleDayPickerProps(props)) {\n            return;\n        }\n\n        // Parse on every change so consumers can react to incomplete/invalid intermediate input\n        // while only valid dates are promoted into picker state.\n        const parsed = parseSingleInputValue(props, nextValue, locale);\n        const isValid = parsed instanceof Date;\n\n        props.onInputChange?.(nextValue, parsed, isValid);\n        setHasInvalidSingleInput(nextValue !== '' && !isValid);\n\n        if (nextValue === '') {\n            clearValue();\n        } else if (isValid && selectionBehavior === 'immediate') {\n            commitValue(parsed, {});\n        } else if (isValid) {\n            setDraftValue(parsed);\n        }\n    };\n\n    const handleClearInput = () => {\n        setHasInvalidSingleInput(false);\n        setRawInputValue('');\n        clearValue();\n    };\n\n    const selectionForDisplay = isDropdownOpen && selectionBehavior === 'deferred' ? draftValue : committedValue;\n    const displayValue = isSingleMode ? rawInputValue : getDisplayValue(selectionForDisplay, props, locale, dateFormat);\n    const inputMaskProps =\n        isSingleDayPickerProps(props) && !props.parseInput && !props.renderValue\n            ? getInputMaskProps(locale, dateFormat)\n            : undefined;\n\n    return {\n        displayValue,\n        handleInputBlur,\n        handleInputChange,\n        handleClearInput,\n        handleInputFocus,\n        handleInputKeyDown,\n        inputMaskProps,\n    };\n};\n\nconst parseSingleInputValue = (props: DayPickerProps, rawValue: string, locale: string) => {\n    if (!isSingleDayPickerProps(props)) {\n        return;\n    }\n\n    // A custom parser fully owns validation semantics for manual single-date input.\n    if (props.parseInput) {\n        return props.parseInput(rawValue, locale);\n    }\n\n    // Default parsing still runs after the input mask and is the final source of truth for validity.\n    return parseDateString(rawValue, locale, props.dateFormat);\n};\n\nconst getDisplayValue = (value: DayPickerSelection, props: DayPickerProps, locale: string, dateFormat?: string) => {\n    if (isSingleDayPickerProps(props)) {\n        return props.renderValue\n            ? props.renderValue(value as Date | undefined, locale)\n            : formatSelectionForInput(value, locale, 'single', dateFormat);\n    }\n\n    if (isMultipleDayPickerProps(props)) {\n        return props.renderValue\n            ? props.renderValue(value as Date[] | undefined, locale)\n            : formatSelectionForInput(value, locale, 'multiple', dateFormat);\n    }\n\n    if (isRangeDayPickerProps(props)) {\n        return props.renderValue\n            ? props.renderValue(value as DateRange | undefined, locale)\n            : formatSelectionForInput(value, locale, 'range', dateFormat);\n    }\n\n    return '';\n};\n\nexport default useDayPickerInputState;\n"],"names":["useDayPickerInputState","props","locale","dateFormat","inputProps","onBlur","isDropdownOpen","isSingleMode","selectionBehavior","closeOnOutsideClick","committedValue","draftValue","setDraftValue","commitValue","clearValue","openDropdown","closeDropdown","applyDraftValue","popperElementRef","rawInputValue","setRawInputValue","useState","hasInvalidSingleInput","setHasInvalidSingleInput","useEffect","selectionForDisplay","getDisplayValue","handleInputFocus","event","handleInputBlur","nextFocused","isSingleDayPickerProps","parsed","parseSingleInputValue","isValid","handleInputKeyDown","handleInputChange","nextValue","_event","handleClearInput","displayValue","inputMaskProps","getInputMaskProps","rawValue","parseDateString","value","formatSelectionForInput","isMultipleDayPickerProps","isRangeDayPickerProps"],"mappings":"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"}

package/components/datepicker/useStackedDayPickerCalendars.d.ts

@@ -0,0 +1,5 @@
+declare const useStackedDayPickerCalendars: (dependencies?: readonly unknown[]) => {
+    calendarsRef: import('react').MutableRefObject<HTMLDivElement | null>;
+    stackCalendars: boolean;
+};
+export default useStackedDayPickerCalendars;

package/components/datepicker/useStackedDayPickerCalendars.js

@@ -0,0 +1,39 @@
+import { useState as S, useCallback as E, useEffect as y } from "react";
+import R from "../../hooks/useResizeObserver.js";
+import W from "../../hooks/useWindowResize.js";
+const A = 480, B = (m = []) => {
+  const [r, , { inlineSize: a }] = R(), [f, n] = S(!1), o = E(() => {
+    const e = r.current;
+    if (!e || typeof window > "u")
+      return;
+    const t = e.querySelector(".rdp-months"), s = t ? Array.from(t.querySelectorAll(".rdp-month")) : [], d = s[0];
+    if (!t || !d) {
+      n(!1);
+      return;
+    }
+    const l = e.parentElement, i = window.document.documentElement.clientWidth;
+    if (!l || !a || !i) {
+      n(!1);
+      return;
+    }
+    if (i < A) {
+      n(!1);
+      return;
+    }
+    const h = Number.parseFloat(window.getComputedStyle(t).columnGap || "0") || 0, p = d.getBoundingClientRect().width, w = Math.max(
+      0,
+      e.getBoundingClientRect().width - t.getBoundingClientRect().width
+    ), C = p * s.length + h * (s.length - 1) + w, g = Array.from(l.children).reduce((c, u) => u === e ? c : c + u.getBoundingClientRect().width, 0);
+    n(C + g > i - 32);
+  }, [a, r]);
+  return W(o), y(() => {
+    o();
+  }, [o, ...m]), {
+    calendarsRef: r,
+    stackCalendars: f
+  };
+};
+export {
+  B as default
+};
+//# sourceMappingURL=useStackedDayPickerCalendars.js.map

package/components/datepicker/useStackedDayPickerCalendars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStackedDayPickerCalendars.js","sources":["../../../src/components/datepicker/useStackedDayPickerCalendars.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport useWindowResize from '../../hooks/useWindowResize';\n\nconst STACKED_CALENDARS_XS_MAX = 480;\n\nconst useStackedDayPickerCalendars = (dependencies: readonly unknown[] = []) => {\n    const [calendarsRef, , { inlineSize: calendarsInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [stackCalendars, setStackCalendars] = useState(false);\n\n    const updateCalendarLayout = useCallback(() => {\n        const calendarsElement = calendarsRef.current;\n        if (!calendarsElement || typeof window === 'undefined') {\n            return;\n        }\n\n        const monthsWrapper = calendarsElement.querySelector<HTMLElement>('.rdp-months');\n        const monthElements = monthsWrapper\n            ? Array.from(monthsWrapper.querySelectorAll<HTMLElement>('.rdp-month'))\n            : [];\n        const firstMonthElement = monthElements[0];\n\n        if (!monthsWrapper || !firstMonthElement) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const rowElement = calendarsElement.parentElement;\n        const viewportWidth = window.document.documentElement.clientWidth;\n\n        if (!rowElement || !calendarsInlineSize || !viewportWidth) {\n            setStackCalendars(false);\n            return;\n        }\n\n        // XS layouts are always stacked via CSS so Popper measures the compact layout immediately.\n        if (viewportWidth < STACKED_CALENDARS_XS_MAX) {\n            setStackCalendars(false);\n            return;\n        }\n\n        const monthsGap = Number.parseFloat(window.getComputedStyle(monthsWrapper).columnGap || '0') || 0;\n        const monthWidth = firstMonthElement.getBoundingClientRect().width;\n        const calendarsExtraWidth = Math.max(\n            0,\n            calendarsElement.getBoundingClientRect().width - monthsWrapper.getBoundingClientRect().width\n        );\n        const requiredCalendarsWidth =\n            monthWidth * monthElements.length + monthsGap * (monthElements.length - 1) + calendarsExtraWidth;\n        const siblingWidth = Array.from(rowElement.children).reduce((sum, child) => {\n            if (child === calendarsElement) {\n                return sum;\n            }\n\n            return sum + (child as HTMLElement).getBoundingClientRect().width;\n        }, 0);\n\n        setStackCalendars(requiredCalendarsWidth + siblingWidth > viewportWidth - 32);\n    }, [calendarsInlineSize, calendarsRef]);\n\n    useWindowResize(updateCalendarLayout);\n\n    useEffect(() => {\n        updateCalendarLayout();\n    }, [updateCalendarLayout, ...dependencies]);\n\n    return {\n        calendarsRef,\n        stackCalendars,\n    };\n};\n\nexport default useStackedDayPickerCalendars;\n"],"names":["STACKED_CALENDARS_XS_MAX","useStackedDayPickerCalendars","dependencies","calendarsRef","calendarsInlineSize","useResizeObserver","stackCalendars","setStackCalendars","useState","updateCalendarLayout","useCallback","calendarsElement","monthsWrapper","monthElements","firstMonthElement","rowElement","viewportWidth","monthsGap","monthWidth","calendarsExtraWidth","requiredCalendarsWidth","siblingWidth","sum","child","useWindowResize","useEffect"],"mappings":";;;AAKA,MAAMA,IAA2B,KAE3BC,IAA+B,CAACC,IAAmC,OAAO;AAC5E,QAAM,CAACC,KAAgB,EAAE,YAAYC,EAAA,CAAqB,IAAIC,EAAA,GACxD,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,IAAuBC,EAAY,MAAM;AAC3C,UAAMC,IAAmBR,EAAa;AACtC,QAAI,CAACQ,KAAoB,OAAO,SAAW;AACvC;AAGJ,UAAMC,IAAgBD,EAAiB,cAA2B,aAAa,GACzEE,IAAgBD,IAChB,MAAM,KAAKA,EAAc,iBAA8B,YAAY,CAAC,IACpE,CAAA,GACAE,IAAoBD,EAAc,CAAC;AAEzC,QAAI,CAACD,KAAiB,CAACE,GAAmB;AACtC,MAAAP,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMQ,IAAaJ,EAAiB,eAC9BK,IAAgB,OAAO,SAAS,gBAAgB;AAEtD,QAAI,CAACD,KAAc,CAACX,KAAuB,CAACY,GAAe;AACvD,MAAAT,EAAkB,EAAK;AACvB;AAAA,IACJ;AAGA,QAAIS,IAAgBhB,GAA0B;AAC1C,MAAAO,EAAkB,EAAK;AACvB;AAAA,IACJ;AAEA,UAAMU,IAAY,OAAO,WAAW,OAAO,iBAAiBL,CAAa,EAAE,aAAa,GAAG,KAAK,GAC1FM,IAAaJ,EAAkB,sBAAA,EAAwB,OACvDK,IAAsB,KAAK;AAAA,MAC7B;AAAA,MACAR,EAAiB,sBAAA,EAAwB,QAAQC,EAAc,wBAAwB;AAAA,IAAA,GAErFQ,IACFF,IAAaL,EAAc,SAASI,KAAaJ,EAAc,SAAS,KAAKM,GAC3EE,IAAe,MAAM,KAAKN,EAAW,QAAQ,EAAE,OAAO,CAACO,GAAKC,MAC1DA,MAAUZ,IACHW,IAGJA,IAAOC,EAAsB,sBAAA,EAAwB,OAC7D,CAAC;AAEJ,IAAAhB,EAAkBa,IAAyBC,IAAeL,IAAgB,EAAE;AAAA,EAChF,GAAG,CAACZ,GAAqBD,CAAY,CAAC;AAEtC,SAAAqB,EAAgBf,CAAoB,GAEpCgB,EAAU,MAAM;AACZ,IAAAhB,EAAA;AAAA,EACJ,GAAG,CAACA,GAAsB,GAAGP,CAAY,CAAC,GAEnC;AAAA,IACH,cAAAC;AAAA,IACA,gBAAAG;AAAA,EAAA;AAER;"}

package/components/dialog/Dialog.js.map

@@ -1 +1 @@
-{"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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"}
+{"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                            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/DialogHeader.js

@@ -1,40 +1,43 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import f from "react";
 import { noop as v } from "es-toolkit/function";
-import r from "../../utils/classNames.js";
+import B from "../button/Button.js";
+import d 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(
+const T = (i) => {
+  const { title: s, subtitle: t, headerButtons: l, onCloseButtonClick: n = v, ...c } = i, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), r = a ? h : !0, g = a ? !1 : u, p = d("modal-header", !r && "border-bottom-none"), b = d(
     "modal-header-text",
-    !l && "padding-bottom-0 width-100pct"
+    !r && "padding-bottom-0 width-100pct"
   ), C = (N) => {
     n(), m(N);
   };
-  return /* @__PURE__ */ o("div", { ...c, className: p, "aria-label": "dialog header", children: [
-    /* @__PURE__ */ o("div", { className: g, children: [
-      t && /* @__PURE__ */ e("div", { className: "modal-header-subtitle", children: t }),
-      /* @__PURE__ */ e("div", { className: "modal-header-title", children: i })
+  return /* @__PURE__ */ e("div", { ...c, className: p, "aria-label": "dialog header", children: [
+    /* @__PURE__ */ e("div", { className: b, children: [
+      t && /* @__PURE__ */ o("div", { className: "modal-header-subtitle", children: t }),
+      /* @__PURE__ */ o("div", { className: "modal-header-title", children: s })
     ] }),
-    /* @__PURE__ */ o("div", { className: "modal-header-buttons", children: [
-      s && !a && /* @__PURE__ */ o(f.Fragment, { children: [
-        s,
-        /* @__PURE__ */ e("div", { className: "modal-header-buttons-spacer" })
+    /* @__PURE__ */ e("div", { className: "modal-header-buttons", children: [
+      l && !a && /* @__PURE__ */ e(f.Fragment, { children: [
+        l,
+        /* @__PURE__ */ o("div", { className: "modal-header-buttons-spacer" })
       ] }),
-      b && /* @__PURE__ */ e(
-        "button",
+      g && /* @__PURE__ */ o(
+        B,
         {
-          type: "button",
-          className: "btn btn-icon-only btn-muted modal-header-close close",
+          bsStyle: "muted",
+          iconOnly: !0,
+          iconName: "rioglyph-remove",
+          autoTrackingKey: `dialog::closed::${s}`,
+          className: "modal-header-close close",
           onClick: C,
           "data-testid": "close",
-          "aria-label": "dialog close button",
-          children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove", "aria-hidden": "true" })
+          "aria-label": "dialog close button"
         }
       )
     ] })
   ] });
 };
 export {
-  j as default
+  T as default
 };
 //# sourceMappingURL=DialogHeader.js.map

package/components/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <button\n                        type='button'\n                        className='btn btn-icon-only btn-muted modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    >\n                        <span className='rioglyph rioglyph-remove' aria-hidden='true' />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React"],"mappings":";;;;;AAyBA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAASH;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,UAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAClE,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <Button\n                        bsStyle='muted'\n                        iconOnly\n                        iconName='rioglyph-remove'\n                        autoTrackingKey={`dialog::closed::${title}`}\n                        className='modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React","Button"],"mappings":";;;;;;AA0BA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,UAAQ;AAAA,UACR,UAAS;AAAA,UACT,iBAAiB,mBAAmBrB,CAAK;AAAA,UACzC,WAAU;AAAA,UACV,SAASgB;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACf,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}

package/components/dialog/MediaDialog.js

@@ -29,7 +29,7 @@ const m = (o) => {
   }, M = () => /* @__PURE__ */ s("div", { className: "text-center text-size-h3", children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-missing text-size-200pct text-color-gray" }) }), S = (e) => {
     const t = r("img-responsive", e.className && e.className);
     return (
-      // @ts-ignore
+      // @ts-expect-error
       /* @__PURE__ */ s(c, { src: e.src, className: t, children: ({ status: u, image: g }) => u === c.STATUS_LOADED ? /* @__PURE__ */ s("img", { className: "ani-fade-in", src: g.src }, g.src) : u === c.STATUS_FAILED ? M() : /* @__PURE__ */ s(j, { isInverse: !1 }) })
     );
   }, _ = (e) => {

package/components/dialog/MediaDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => {\n        return (\n            <div className='text-center text-size-h3'>\n                <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n            </div>\n        );\n    };\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-ignore\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => (\n        <div className='text-center text-size-h3'>\n            <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n        </div>\n    );\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-expect-error\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":";;;;;;;;AAgFA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAUC;AAAA,IACV,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ,CAAA;AAAA,IACR,oBAAAC,IAAqB;AAAA,IACrB,wBAAAC,IAAyBN;AAAA,IACzB,gBAAAO,IAAiB;AAAA,IACjB,oBAAAC,IAAqBR;AAAA,IACrB,WAAAS;AAAA,IACA,GAAGC;AAAA,EAAA,IACHb,GAEE,CAACc,GAAmBC,CAAoB,IAAIC,EAAS,CAAC,GAEtDC,IAAiB,MAAM;AACzB,UAAMC,IAAWJ,GACXK,IAAWD,MAAa,IAAIlB,EAAM,MAAM,SAAS,IAAIkB,IAAW;AACtE,IAAAH,EAAqBI,CAAQ,GAC7BV,EAAuBU,CAAQ;AAAA,EACnC,GAEMC,IAAa,MAAM;AACrB,UAAMF,IAAWJ,GACXK,IAAWD,MAAalB,EAAM,MAAM,SAAS,IAAI,IAAIkB,IAAW;AACtE,IAAAH,EAAqBI,CAAQ,GAC7BR,EAAmBQ,CAAQ;AAAA,EAC/B,GAEME,IAAiB,MACnB,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACX,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,6DAAA,CAA6D,EAAA,CACjF,GAGEC,IAAc,CAACC,MAAgC;AACjD,UAAMC,IAAkBC,EAAW,kBAAkBF,EAAU,aAAaA,EAAU,SAAS;AAE/F;AAAA;AAAA,MAEI,gBAAAF,EAACK,GAAA,EAAe,KAAKH,EAAU,KAAK,WAAWC,GAC1C,UAAA,CAAC,EAAE,QAAAG,GAAQ,OAAAC,EAAA,MACJD,MAAWD,EAAe,gBAEnB,gBAAAL,EAAC,SAAI,WAAU,eAA8B,KAAKO,EAAM,IAAA,GAAtBA,EAAM,GAAqB,IAGpED,MAAWD,EAAe,gBACnBN,EAAA,IAGJ,gBAAAC,EAACQ,GAAA,EAAQ,WAAW,GAAA,CAAO,EACtC,CACJ;AAAA;AAAA,EAER,GAEMC,IAAc,CAACP,MAAgC;AACjD,UAAMQ,IAAkBN,EAAWF,EAAU,aAAaA,EAAU,SAAS;AAC7E,WACI,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACX,UAAA,gBAAAA;AAAA,MAACW;AAAA,MAAA;AAAA,QACG,KAAKT,EAAU;AAAA,QACf,aAAaA,EAAU,eAAe;AAAA,QACtC,WAAWQ;AAAA,MAAA;AAAA,IAAA,GAEnB;AAAA,EAER,GAEME,IAAqB,CAACV,IAAY,OAChCA,EAAU,SAASzB,EAAY,mBACxBgC,EAAYP,CAAS,IAIzBA,EAAU,OAAOD,EAAYC,CAAS,GAG3CW,IAAkBT,EAAW,gBAAgBd,KAAaA,CAAS,GACnEwB,IAAiBV,EAAW,WAAW,GACvCW,IAAyBX,EAAW,iBAAiB,gBAAgB,GAErEY,IAAa/B,EAAMO,CAAiB,EAAE,OACtCyB,IAAgBhC,EAAMO,CAAiB,EAAE,YAAY;AAE3D,SACI,gBAAAQ;AAAA,IAACkB;AAAA,IAAA;AAAA,MACI,GAAG3B;AAAA,MACJ,MAAAZ;AAAA,MACA,OAAOqC;AAAA,MACP,UAAUC;AAAA,MACV,wBAAO,OAAA,EAAI,WAAWF,GAAyB,UAAAH,EAAmB3B,EAAMO,CAAiB,CAAC,EAAA,CAAE;AAAA,MAC5F,QACIP,GAAO,SAAS,KACZ,gBAAAkC,EAAAC,GAAA,EACI,UAAA;AAAA,QAAA,gBAAAD,EAAC,YAAO,MAAK,UAAS,WAAU,sCAAqC,SAASxB,GAC1E,UAAA;AAAA,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC;AAAA,UAChDd;AAAA,QAAA,GACL;AAAA,QACA,gBAAAc,EAAC,SAAK,UAAA,GAAGR,IAAoB,CAAC,MAAMd,EAAM,MAAM,MAAM,GAAA,CAAG;AAAA,0BACxD,UAAA,EAAO,MAAK,UAAS,WAAU,2CAA0C,SAASoB,GAC/E,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,kCAAA,CAAkC;AAAA,UACjDZ;AAAA,QAAA,EAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAGR,SAAAR;AAAA,MACA,WAAWiC;AAAA,MACX,eAAeC;AAAA,MACf,YAAAhC;AAAA,MACA,aAAAC;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAP,EAAY,mBAAmB;AAC/BA,EAAY,mBAAmB;"}

package/components/divider/Divider.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { jsxs as t, Fragment as r, jsx as c } from "react/jsx-runtime";
 import o from "../../utils/classNames.js";
 const L = (h) => {
   const {
@@ -12,7 +12,7 @@ const L = (h) => {
     children: s
   } = h, N = o("Divider", "position-relative", !i && "width-100pct", x), l = `${m}px`, e = {};
   i && (e.paddingLeft = l, e.paddingRight = l), i || (e.paddingTop = l, e.paddingBottom = l);
-  const y = o("divider-line", `bg-${v}`), $ = typeof s == "string", g = /* @__PURE__ */ r(
+  const y = o("divider-line", `bg-${v}`), $ = typeof s == "string", g = /* @__PURE__ */ c(
     "div",
     {
       className: y,
@@ -21,20 +21,20 @@ const L = (h) => {
         height: i ? "100%" : `${p}px`
       }
     }
-  ), d = /* @__PURE__ */ r("div", { className: "flex-1-0", children: g }), a = /* @__PURE__ */ r("div", { className: $ ? "padding-x-10" : "", children: s }), u = o("divider-title", "display-flex", "align-items-center");
+  ), d = /* @__PURE__ */ c("div", { className: "flex-1-0", children: g }), a = /* @__PURE__ */ c("div", { className: $ ? "padding-x-10" : "", children: s }), u = o("divider-title", "display-flex", "align-items-center");
   return /* @__PURE__ */ t("div", { className: N, style: e, children: [
     !f && !s && g,
     s && /* @__PURE__ */ t("div", { className: u, children: [
-      n === "left" && /* @__PURE__ */ t(c, { children: [
+      n === "left" && /* @__PURE__ */ t(r, { children: [
         a,
         d
       ] }),
-      n === "center" && /* @__PURE__ */ t(c, { children: [
+      n === "center" && /* @__PURE__ */ t(r, { children: [
         d,
         a,
         d
       ] }),
-      n === "right" && /* @__PURE__ */ t(c, { children: [
+      n === "right" && /* @__PURE__ */ t(r, { children: [
         d,
         a
       ] })

package/components/dropdown/ButtonDropdown.d.ts

@@ -65,6 +65,10 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Optional rioglyph icon name forwarded to the underlying button toggle.
+     */
+    iconName?: string;
     /**
      * Defines whether the caret is shown or not.
      *