@rio-cloud/rio-uikit 2.3.0-beta.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/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.
      *

package/components/dropdown/ButtonDropdown.js

@@ -1,18 +1,18 @@
 import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as ro, useState as f, useEffect as so } from "react";
-import lo from "react-dom";
-import { usePopper as po } from "react-popper";
+import { forwardRef as so, useState as c, useEffect as lo } from "react";
+import po from "react-dom";
+import { usePopper as ao } from "react-popper";
 import { noop as u } from "es-toolkit/function";
-import { isNil as ao } from "es-toolkit/predicate";
+import { isNil as io } from "es-toolkit/predicate";
 import P from "../../utils/classNames.js";
-import { getOrCreatePortalRoot as io } from "../../utils/portalRoot.js";
-import fo, { DEFAULT_EVENT_TYPES as co } from "../../hooks/useClickOutside.js";
-import mo from "../menuItems/MenuItems.js";
-import uo from "../menuItems/MenuItemList.js";
-import go from "./DropdownToggleButton.js";
-import wo from "./SplitCaretButton.js";
-import Co from "./Caret.js";
-const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", Do = () => ro((r, s) => {
+import { getOrCreatePortalRoot as co } from "../../utils/portalRoot.js";
+import fo, { DEFAULT_EVENT_TYPES as mo } from "../../hooks/useClickOutside.js";
+import uo from "../menuItems/MenuItems.js";
+import go from "../menuItems/MenuItemList.js";
+import wo from "./DropdownToggleButton.js";
+import Co from "./SplitCaretButton.js";
+import Bo from "./Caret.js";
+const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", No = () => so((r, s) => {
   const {
     id: g = Math.random().toString(36).slice(2, 16),
     items: R = [],
@@ -20,67 +20,68 @@ const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
     bsStyle: C = "default",
     variant: T,
     disabled: B = !1,
+    iconName: k,
     iconOnly: D = !1,
-    title: k,
+    title: y,
     splitButton: t = !1,
-    customDropdown: O,
+    customDropdown: N,
     open: e,
-    dropup: y = !1,
-    pullRight: c = !1,
-    noCaret: E = !1,
-    onOpen: L = u,
-    onClose: x = u,
-    onLabelButtonClick: I = u,
+    dropup: E = !1,
+    pullRight: f = !1,
+    noCaret: L = !1,
+    onOpen: x = u,
+    onClose: I = u,
+    onLabelButtonClick: j = u,
     usePortal: l = !1,
-    popperConfig: j,
-    toggleButtonType: U = "button",
-    toggleClassName: S = "",
-    dropdownClassName: _,
-    className: v = "",
-    ...z
-  } = r, [b, m] = f(e), [A, F] = f(null), [M, V] = f(null), [Y, q] = f(null), G = {
-    placement: Bo(c, y),
+    popperConfig: U,
+    toggleButtonType: _ = "button",
+    toggleClassName: O = "",
+    dropdownClassName: v,
+    className: z = "",
+    ...A
+  } = r, [S, m] = c(e), [F, V] = c(null), [b, Y] = c(null), [q, G] = c(null), H = {
+    placement: Do(f, E),
     modifiers: []
-  }, H = t && c ? Y : A, { styles: J, attributes: K } = po(H, M, j || G), n = ao(e), p = n ? b : e, Q = fo(
+  }, J = t && f ? q : F, { styles: K, attributes: Q } = ao(J, b, U || H), n = io(e), p = n ? S : e, W = fo(
     (o) => {
-      l && M?.contains(o.target) || a();
+      l && b?.contains(o.target) || a();
     },
-    co,
+    mo,
     !!p
     // only listen to clicks outside when the dropdown is open
-  ), W = io(), X = !E && !t && !D;
-  so(() => {
+  ), X = co(), Z = !L && !t && !D;
+  lo(() => {
     n || m(e);
   }, [n, e]);
   const d = (o) => {
-    (n ? b : e) ? a() : Z(o);
-  }, Z = (o) => {
-    n && m(!0), o && L(o);
+    (n ? S : e) ? a() : $(o);
+  }, $ = (o) => {
+    n && m(!0), o && x(o);
   }, a = () => {
-    n && m(!1), x();
-  }, $ = () => {
-    a(), I();
-  }, oo = (o) => {
-    d(o);
+    n && m(!1), I();
+  }, oo = () => {
+    a(), j();
   }, to = (o) => {
-    t ? $() : d(o);
-  }, eo = P("dropdown", "btn-group", p && "open", v), no = P(
+    d(o);
+  }, eo = (o) => {
+    t ? oo() : d(o);
+  }, no = P("dropdown", "btn-group", p && "open", z), ro = P(
     l && "dropdown-portal",
-    t && c && "pull-right",
-    _
-  ), N = /* @__PURE__ */ i(
-    uo,
+    t && f && "pull-right",
+    v
+  ), M = /* @__PURE__ */ i(
+    go,
     {
-      className: no,
-      ref: V,
-      style: J.popper,
-      ...K.popper,
-      children: O || /* @__PURE__ */ i(mo, { items: R, closeMenu: d })
+      className: ro,
+      ref: Y,
+      style: K.popper,
+      ...Q.popper,
+      children: N || /* @__PURE__ */ i(uo, { items: R, closeMenu: d })
     }
   );
-  return /* @__PURE__ */ h("div", { ...z, className: eo, ref: Q, children: [
+  return /* @__PURE__ */ h("div", { ...A, className: no, ref: W, children: [
     /* @__PURE__ */ h(
-      go,
+      wo,
       {
         id: g,
         splitButton: t,
@@ -88,35 +89,36 @@ const Bo = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bot
         bsSize: w,
         variant: T,
         iconOnly: D,
+        iconName: k,
         disabled: B,
-        ref: F,
-        onClick: to,
+        ref: V,
+        onClick: eo,
         outerRef: s,
-        toggleButtonType: U,
-        className: S,
+        toggleButtonType: _,
+        className: O,
         children: [
-          k,
-          X && /* @__PURE__ */ i(Co, {})
+          y,
+          Z && /* @__PURE__ */ i(Bo, {})
         ]
       }
     ),
     t && /* @__PURE__ */ i(
-      wo,
+      Co,
       {
         id: g,
         bsStyle: C,
         bsSize: w,
         disabled: B,
-        className: S,
-        onClick: oo,
-        ref: q
+        className: O,
+        onClick: to,
+        ref: G
       }
     ),
-    p && l && lo.createPortal(N, W),
-    p && !l && N
+    p && l && po.createPortal(M, X),
+    p && !l && M
   ] });
-}), jo = Do();
+}), Uo = No();
 export {
-  jo as default
+  Uo as default
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/dropdown/ButtonDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as any);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}
+{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/dropdown/ButtonDropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useClickOutside, { DEFAULT_EVENT_TYPES } from '../../hooks/useClickOutside';\nimport MenuItems from '../menuItems/MenuItems';\nimport MenuItemList from '../menuItems/MenuItemList';\nimport DropdownToggleButton, { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';\nimport SplitCaretButton from './SplitCaretButton';\nimport Caret from './Caret';\nimport type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\nconst getPlacement = (pullRight: boolean, dropup: boolean) => {\n    if (pullRight && dropup) {\n        return 'top-end';\n    }\n    if (!pullRight && dropup) {\n        return 'top-start';\n    }\n    if (pullRight && !dropup) {\n        return 'bottom-end';\n    }\n    return 'bottom-start';\n};\n\nexport type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {\n    /**\n     * Unique button id. If not present a random id is generated.\n     */\n    id?: string;\n\n    /**\n     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Defined weather or not the menu is rendered.\n     * Use this to control the component from the outside.\n     *\n     * @default undefined\n     */\n    open?: boolean;\n\n    /**\n     * Defines whether the dropdown opens above or below.\n     * Set it to \"true\" additionally disables the automatic position feature.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned to the dropdown or not.\n     */\n    pullRight?: boolean;\n\n    /**\n     * Defines how large the button will be rendered.\n     *\n     * Possible values are: `xs`, `sm`, `md`, `lg`\n     *\n     * @default 'md'\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Defines the button color.\n     *\n     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`\n     *\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Defines the variation of the button design.\n     *\n     * Possible values are: `link`, `link-inline`, `outline`, `action`\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Specify the toggle element type.\n     * It supports the following types: \"button\" | \"tag\" | \"label\"\n     *\n     * @default 'button'\n     */\n    toggleButtonType?: DropdownToggleButtonType;\n\n    /**\n     * Optional prop to defines whether the dropdown title is icon only which\n     * applies different padding so the button is a square.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Optional rioglyph icon name forwarded to the underlying button toggle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the caret is shown or not.\n     *\n     * @default false\n     */\n    noCaret?: boolean;\n\n    /**\n     * Defines whether the dropdown-toggle (with caret) should be in a separate button.\n     *\n     * @default false\n     */\n    splitButton?: boolean;\n\n    /**\n     * Renders the dropdown into a dedicated react portal\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.\n     */\n    items?: MenuItem[];\n\n    /**\n     * Disables the dropdown button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback for splitButton label button click.\n     */\n    onLabelButtonClick?: () => void;\n\n    /**\n     * Callback for when the toggle button was clicked to open it.\n     * @param event\n     * @returns\n     */\n    onOpen?: (event: DropdownToggleEvent<T>) => void;\n\n    /**\n     * Callback for when the toggle button was clicked to close it.\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Allows to pass in custom dropdown menu content.\n     */\n    customDropdown?: React.ReactNode;\n\n    /**\n     * Define custom popper.js configuration for dropdown placement and modifiers.\n     */\n    popperConfig?: object;\n\n    /**\n     * Additional classes to be set on the dropdown-toggle button.\n     */\n    toggleClassName?: string;\n\n    /**\n     * Additional classes to be set on the dropdown.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes to be set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst createButtonDropdown = <T extends DropdownToggleButtonType = 'button'>() => {\n    return forwardRef<\n        T extends 'button' ? HTMLButtonElement : HTMLDivElement,\n        PropsWithChildren<ButtonDropdownProps<T>>\n    >((props, ref) => {\n        const {\n            id = Math.random().toString(36).slice(2, 16),\n            items = [],\n            bsSize = 'md',\n            bsStyle = 'default',\n            variant,\n            disabled = false,\n            iconName,\n            iconOnly = false,\n            title,\n            splitButton = false,\n            customDropdown,\n            open,\n            dropup = false,\n            pullRight = false,\n            noCaret = false,\n            onOpen = noop,\n            onClose = noop,\n            onLabelButtonClick = noop,\n            usePortal = false,\n            popperConfig,\n            toggleButtonType = 'button',\n            toggleClassName = '',\n            dropdownClassName,\n            className = '',\n            ...remainingProps\n        } = props;\n\n        const [internalOpen, setInternalOpen] = useState(open);\n\n        const [refDropdownToggle, setRefDropdownToggle] = useState<HTMLButtonElement | HTMLDivElement | null>(null);\n        const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState<HTMLButtonElement | null>(null);\n\n        const defaultPopperConfig = {\n            placement: getPlacement(pullRight, dropup),\n            modifiers: [],\n        };\n\n        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;\n\n        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);\n\n        const isUncontrolled = isNil(open);\n        const isOpen = isUncontrolled ? internalOpen : open;\n\n        const wrapperRef = useClickOutside(\n            event => {\n                if (usePortal) {\n                    // In case the dropdown is rendered via portal the clickOutside the toggle button element is\n                    // triggered since the dropdown is not a child of the wrapper element.\n                    // In this case we need to check if the event target is inside the dropdown-menu and prevent closing\n                    // the dropdown\n                    if (!refDropdownMenu?.contains(event.target as Node)) {\n                        closeMenu();\n                    }\n                } else {\n                    closeMenu();\n                }\n            },\n            DEFAULT_EVENT_TYPES,\n            Boolean(isOpen) // only listen to clicks outside when the dropdown is open\n        );\n\n        const dropdownRoot = getOrCreatePortalRoot();\n\n        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;\n\n        useEffect(() => {\n            if (!isUncontrolled) {\n                setInternalOpen(open);\n            }\n        }, [isUncontrolled, open]);\n\n        const toggleOpen = (event?: DropdownToggleEvent<T>) => {\n            const isDropdownOpen = isUncontrolled ? internalOpen : open;\n\n            if (isDropdownOpen) {\n                closeMenu();\n            } else {\n                openMenu(event);\n            }\n        };\n\n        const openMenu = (event?: DropdownToggleEvent<T>) => {\n            if (isUncontrolled) {\n                setInternalOpen(true);\n            }\n            if (event) {\n                onOpen(event);\n            }\n        };\n\n        const closeMenu = () => {\n            if (isUncontrolled) {\n                setInternalOpen(false);\n            }\n            onClose();\n        };\n\n        const handleSplitLabelButtonClick = () => {\n            closeMenu();\n            onLabelButtonClick();\n        };\n\n        const handleSplitCaretButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            toggleOpen(event as DropdownToggleEvent<T>);\n        };\n\n        const handleDropdownButtonClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            if (splitButton) {\n                handleSplitLabelButtonClick();\n            } else {\n                toggleOpen(event as DropdownToggleEvent<T>);\n            }\n        };\n\n        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);\n\n        const dropdownClasses = classNames(\n            usePortal && 'dropdown-portal',\n            splitButton && pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        const dropdownMenu = (\n            <MenuItemList\n                className={dropdownClasses}\n                ref={setRefDropdownMenu}\n                style={styles.popper}\n                {...attributes.popper}\n            >\n                {customDropdown ? customDropdown : <MenuItems items={items} closeMenu={toggleOpen} />}\n            </MenuItemList>\n        );\n\n        return (\n            <div {...remainingProps} className={wrapperClasses} ref={wrapperRef}>\n                <DropdownToggleButton\n                    id={id}\n                    splitButton={splitButton}\n                    bsStyle={bsStyle}\n                    bsSize={bsSize}\n                    variant={variant}\n                    iconOnly={iconOnly}\n                    iconName={iconName}\n                    disabled={disabled}\n                    ref={setRefDropdownToggle}\n                    onClick={handleDropdownButtonClick}\n                    outerRef={ref}\n                    toggleButtonType={toggleButtonType}\n                    className={toggleClassName}\n                >\n                    {title}\n                    {shouldShowCaret && <Caret />}\n                </DropdownToggleButton>\n                {splitButton && (\n                    <SplitCaretButton\n                        id={id}\n                        bsStyle={bsStyle}\n                        bsSize={bsSize}\n                        disabled={disabled}\n                        className={toggleClassName}\n                        onClick={handleSplitCaretButtonClick}\n                        ref={setRefSplitButtonToggle}\n                    />\n                )}\n                {isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot)}\n                {isOpen && !usePortal && dropdownMenu}\n            </div>\n        );\n    });\n};\n\nconst ButtonDropdown = createButtonDropdown();\n\nexport default ButtonDropdown;\n"],"names":["getPlacement","pullRight","dropup","createButtonDropdown","forwardRef","props","ref","id","items","bsSize","bsStyle","variant","disabled","iconName","iconOnly","title","splitButton","customDropdown","open","noCaret","onOpen","noop","onClose","onLabelButtonClick","usePortal","popperConfig","toggleButtonType","toggleClassName","dropdownClassName","className","remainingProps","internalOpen","setInternalOpen","useState","refDropdownToggle","setRefDropdownToggle","refDropdownMenu","setRefDropdownMenu","refSplitButtonToggle","setRefSplitButtonToggle","defaultPopperConfig","popperParentRef","styles","attributes","usePopper","isUncontrolled","isNil","isOpen","wrapperRef","useClickOutside","event","closeMenu","DEFAULT_EVENT_TYPES","dropdownRoot","getOrCreatePortalRoot","shouldShowCaret","useEffect","toggleOpen","openMenu","handleSplitLabelButtonClick","handleSplitCaretButtonClick","handleDropdownButtonClick","wrapperClasses","classNames","dropdownClasses","dropdownMenu","jsx","MenuItemList","MenuItems","jsxs","DropdownToggleButton","Caret","SplitCaretButton","ReactDOM","ButtonDropdown"],"mappings":"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"}

package/components/dropdown/DropdownToggleButton.d.ts

@@ -5,6 +5,7 @@ export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> =
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
+    iconName?: string;
     splitButton?: boolean;
     iconOnly?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;