@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

package/components/datepicker/dayPickerTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"dayPickerTypes.js","sources":["../../../src/components/datepicker/dayPickerTypes.ts"],"sourcesContent":["import type { FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';\nimport type { DateRange as ReactDayPickerDateRange } from 'react-day-picker';\nimport type { RioglyphIconType } from '../rioglyph/RioglyphIconType';\n\nexport type DateRange = ReactDayPickerDateRange;\nexport type Modifiers = Record<string, boolean>;\nexport type DayPickerMode = 'single' | 'multiple' | 'range';\nexport type DayPickerSelection = Date | Date[] | DateRange | undefined;\nexport type DayPickerRangeSelectionVariant = 'default' | 'week' | 'month' | 'rolling';\nexport type DayPickerDateBefore = { before: Date };\nexport type DayPickerDateAfter = { after: Date };\nexport type DayPickerDateInterval = { before: Date; after: Date };\nexport type DayPickerDayOfWeek = { dayOfWeek: number | number[] };\nexport type DayPickerDateMatcher =\n    | boolean\n    | Date\n    | Date[]\n    | DateRange\n    | DayPickerDateBefore\n    | DayPickerDateAfter\n    | DayPickerDateInterval\n    | DayPickerDayOfWeek\n    | ((date: Date) => boolean);\nexport type DayPickerDisabledDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerHiddenDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerCustomModifiers = Record<string, DayPickerDateMatcher | DayPickerDateMatcher[]>;\n\ntype CommonCalendarProps = {\n    /**\n     * Locale used for calendar labels and default input formatting.\n     *\n     * @default 'en-GB'\n     */\n    locale?: string;\n\n    /**\n     * Optional size variant for the rendered calendar density.\n     *\n     * Changes the size and spacing of the individual day cells instead of the outer wrapper.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Additional classes for the calendar root element.\n     */\n    className?: string;\n\n    /**\n     * Number of visible calendar months.\n     *\n     * @default 1\n     */\n    numberOfMonths?: 1 | 2;\n\n    /**\n     * Shows the days from adjacent months inside the current month grid.\n     *\n     * @default true\n     */\n    showOutsideDays?: boolean;\n\n    /**\n     * Keeps the calendar height stable by always rendering full weeks.\n     *\n     * @default true\n     */\n    fixedWeeks?: boolean;\n\n    /**\n     * Shows the calendar week number column.\n     *\n     * @default false\n     */\n    showWeekNumber?: boolean;\n\n    /**\n     * Overrides the first day of the week.\n     *\n     * `0` is Sunday, `1` is Monday, up to `6` for Saturday.\n     */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /**\n     * Initial month shown when the calendar is first rendered.\n     */\n    defaultMonth?: Date;\n\n    /**\n     * Controlled currently visible month.\n     */\n    month?: Date;\n\n    /**\n     * Called when the visible month changes.\n     */\n    onMonthChange?: (month: Date) => void;\n\n    /**\n     * Lower month boundary for month navigation.\n     */\n    startMonth?: Date;\n\n    /**\n     * Upper month boundary for month navigation.\n     */\n    endMonth?: Date;\n\n    /**\n     * Days that cannot be selected.\n     */\n    disabledDays?: DayPickerDisabledDays;\n\n    /**\n     * Days that should not be rendered in the calendar grid.\n     */\n    hiddenDays?: DayPickerHiddenDays;\n\n    /**\n     * Custom day modifiers forwarded to the underlying calendar.\n     */\n    modifiers?: DayPickerCustomModifiers;\n\n    /**\n     * Additional CSS classes attached to custom modifiers.\n     */\n    modifiersClassNames?: Record<string, string>;\n\n    /**\n     * Renders optional custom content inside a day cell.\n     *\n     * Useful for icons, dots, tooltips or other domain-specific markers.\n     */\n    renderDayContent?: (date: Date, modifiers: Modifiers) => ReactNode;\n};\n\nexport type SingleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n};\n\nexport type MultipleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n};\n\nexport type RangeDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n};\n\nexport type DayPickerCalendarProps =\n    | SingleDayPickerCalendarProps\n    | MultipleDayPickerCalendarProps\n    | RangeDayPickerCalendarProps;\n\nexport type DayPickerSlotRenderProps<TValue> = {\n    /**\n     * Currently committed value of the picker.\n     */\n    value: TValue | undefined;\n\n    /**\n     * Current draft value while the dropdown is open.\n     *\n     * In deferred mode, this can differ from `value` until `apply()` is called.\n     */\n    draftValue: TValue | undefined;\n\n    /**\n     * Updates the current draft value from custom slot content.\n     */\n    setDraftValue: (value: TValue | undefined) => void;\n\n    /**\n     * Commits the current draft value and closes the dropdown.\n     */\n    apply: () => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clear: () => void;\n\n    /**\n     * Closes the dropdown without necessarily committing the current draft value.\n     */\n    close: () => void;\n\n    /**\n     * Active selection mode of the picker.\n     */\n    mode: DayPickerMode;\n\n    /**\n     * Active locale used for formatting and calendar labels.\n     */\n    locale: string;\n};\n\nexport type DayPickerTriggerRenderProps<TValue> = DayPickerSlotRenderProps<TValue> & {\n    /**\n     * Optional id forwarded from the DayPicker props.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded from the DayPicker props.\n     */\n    name?: string;\n\n    /**\n     * String currently shown by the default trigger input.\n     */\n    displayValue: string;\n\n    /**\n     * Whether the dropdown is currently open.\n     */\n    isOpen: boolean;\n\n    /**\n     * Opens the dropdown.\n     */\n    open: () => void;\n\n    /**\n     * Toggles the dropdown open state.\n     */\n    toggle: () => void;\n};\n\ntype CommonDayPickerProps = Omit<CommonCalendarProps, 'size'> & {\n    /**\n     * Optional id forwarded to the default input trigger.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded to the default input trigger.\n     */\n    name?: string;\n\n    /**\n     * Placeholder text shown in the default input trigger.\n     */\n    placeholder?: string;\n\n    /**\n     * Rioglyph icon shown in the default input trigger addon.\n     *\n     * @default 'rioglyph-calendar'\n     */\n    iconName?: RioglyphIconType;\n\n    /**\n     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.\n     * If omitted, locale-based display is used for the input.\n     */\n    dateFormat?: string;\n\n    /**\n     * Called when the internal input loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n\n    /**\n     * Additional props forwarded to the default input element.\n     *\n     * Useful for attributes like `readOnly`, `disabled`, `required`, `autoFocus`, or custom ARIA labels.\n     */\n    inputProps?: Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        'children' | 'value' | 'defaultValue' | 'onChange' | 'size'\n    >;\n\n    /**\n     * Shows the built-in error styling and help block below the input.\n     */\n    errorMessage?: string | ReactNode;\n\n    /**\n     * Shows the built-in warning styling and help block below the input.\n     */\n    warningMessage?: string | ReactNode;\n\n    /**\n     * Controls white-space handling inside the built-in help block.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional classes for the text input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes for the dropdown container.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes for the left sidebar container.\n     */\n    leftSidebarClassName?: string;\n\n    /**\n     * Additional classes for the right sidebar container.\n     */\n    rightSidebarClassName?: string;\n\n    /**\n     * Additional classes for the footer container.\n     */\n    footerClassName?: string;\n\n    /**\n     * Renders the dropdown into a dedicated react portal.\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Aligns the dropdown to the right edge of the input.\n     *\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Shows a clear button inside the input.\n     *\n     * @default false\n     */\n    isClearable?: boolean;\n\n    /**\n     * Closes the dropdown after selecting a complete value.\n     *\n     * Range mode closes only after both dates are selected.\n     *\n     * @default true for `selectionBehavior='immediate'`, otherwise false\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Closes the dropdown when clicking outside of the trigger and dropdown.\n     *\n     * @default true\n     */\n    closeOnOutsideClick?: boolean;\n\n    /**\n     * Defines whether the value is committed immediately or only when applied explicitly.\n     *\n     * @default 'immediate'\n     */\n    selectionBehavior?: 'immediate' | 'deferred';\n};\n\n/**\n * Props for a `DayPicker` with single-date selection.\n */\nexport type SingleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Called whenever the user changes the raw input value.\n     * Useful for custom validation and form-library integration.\n     */\n    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;\n\n    /**\n     * Custom parser for manual single-date input.\n     * Overrides the built-in locale/dateFormat parsing.\n     */\n    parseInput?: (rawValue: string, locale: string) => Date | undefined;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with multiple independent dates.\n */\nexport type MultipleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date[] | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with date-range selection.\n */\nexport type RangeDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: DateRange | undefined, locale: string) => string;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n};\n\nexport type DayPickerProps = SingleDayPickerProps | MultipleDayPickerProps | RangeDayPickerProps;\n\nexport const isSingleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is SingleDayPickerProps | SingleDayPickerCalendarProps => !props.mode || props.mode === 'single';\n\nexport const isMultipleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is MultipleDayPickerProps | MultipleDayPickerCalendarProps => props.mode === 'multiple';\n\nexport const isRangeDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is RangeDayPickerProps | RangeDayPickerCalendarProps => props.mode === 'range';\n"],"names":["isSingleDayPickerProps","props","isMultipleDayPickerProps","isRangeDayPickerProps"],"mappings":"AA6mBO,MAAMA,IAAyB,CAClCC,MAC+D,CAACA,EAAM,QAAQA,EAAM,SAAS,UAEpFC,IAA2B,CACpCD,MACmEA,EAAM,SAAS,YAEzEE,IAAwB,CACjCF,MAC6DA,EAAM,SAAS;"}
+{"version":3,"file":"dayPickerTypes.js","sources":["../../../src/components/datepicker/dayPickerTypes.ts"],"sourcesContent":["import type { FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';\nimport type { DateRange as ReactDayPickerDateRange } from 'react-day-picker';\nimport type { RioglyphIconType } from '../rioglyph/RioglyphIconType';\n\nexport type DateRange = ReactDayPickerDateRange;\nexport type Modifiers = Record<string, boolean>;\nexport type DayPickerMode = 'single' | 'multiple' | 'range';\nexport type DayPickerSelection = Date | Date[] | DateRange | undefined;\nexport type DayPickerRangeSelectionVariant = 'default' | 'week' | 'month' | 'rolling';\nexport type DayPickerDateBefore = { before: Date };\nexport type DayPickerDateAfter = { after: Date };\nexport type DayPickerDateInterval = { before: Date; after: Date };\nexport type DayPickerDayOfWeek = { dayOfWeek: number | number[] };\nexport type DayPickerDateMatcher =\n    | boolean\n    | Date\n    | Date[]\n    | DateRange\n    | DayPickerDateBefore\n    | DayPickerDateAfter\n    | DayPickerDateInterval\n    | DayPickerDayOfWeek\n    | ((date: Date) => boolean);\nexport type DayPickerDisabledDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerHiddenDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerCustomModifiers = Record<string, DayPickerDateMatcher | DayPickerDateMatcher[]>;\n\ntype CommonCalendarProps = {\n    /**\n     * Locale used for calendar labels and default input formatting.\n     *\n     * @default 'en-GB'\n     */\n    locale?: string;\n\n    /**\n     * Optional size variant for the rendered calendar density.\n     *\n     * Changes the size and spacing of the individual day cells instead of the outer wrapper.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Additional classes for the calendar root element.\n     */\n    className?: string;\n\n    /**\n     * Number of visible calendar months.\n     *\n     * @default 1\n     */\n    numberOfMonths?: 1 | 2;\n\n    /**\n     * Shows the days from adjacent months inside the current month grid.\n     *\n     * @default true\n     */\n    showOutsideDays?: boolean;\n\n    /**\n     * Keeps the calendar height stable by always rendering full weeks.\n     *\n     * @default true\n     */\n    fixedWeeks?: boolean;\n\n    /**\n     * Shows the calendar week number column.\n     *\n     * @default false\n     */\n    showWeekNumber?: boolean;\n\n    /**\n     * Overrides the first day of the week.\n     *\n     * `0` is Sunday, `1` is Monday, up to `6` for Saturday.\n     */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /**\n     * Initial month shown when the calendar is first rendered.\n     */\n    defaultMonth?: Date;\n\n    /**\n     * Controlled currently visible month.\n     */\n    month?: Date;\n\n    /**\n     * Called when the visible month changes.\n     */\n    onMonthChange?: (month: Date) => void;\n\n    /**\n     * Lower month boundary for month navigation.\n     */\n    startMonth?: Date;\n\n    /**\n     * Upper month boundary for month navigation.\n     */\n    endMonth?: Date;\n\n    /**\n     * Days that cannot be selected.\n     */\n    disabledDays?: DayPickerDisabledDays;\n\n    /**\n     * Days that should not be rendered in the calendar grid.\n     */\n    hiddenDays?: DayPickerHiddenDays;\n\n    /**\n     * Custom day modifiers forwarded to the underlying calendar.\n     */\n    modifiers?: DayPickerCustomModifiers;\n\n    /**\n     * Additional CSS classes attached to custom modifiers.\n     */\n    modifiersClassNames?: Record<string, string>;\n\n    /**\n     * Renders optional custom content inside a day cell.\n     *\n     * Useful for icons, dots, tooltips or other domain-specific markers.\n     */\n    renderDayContent?: (date: Date, modifiers: Modifiers) => ReactNode;\n};\n\nexport type SingleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n};\n\nexport type MultipleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n};\n\nexport type RangeDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n};\n\nexport type DayPickerCalendarProps =\n    | SingleDayPickerCalendarProps\n    | MultipleDayPickerCalendarProps\n    | RangeDayPickerCalendarProps;\n\nexport type DayPickerSlotRenderProps<TValue> = {\n    /**\n     * Currently committed value of the picker.\n     */\n    value: TValue | undefined;\n\n    /**\n     * Current draft value while the dropdown is open.\n     *\n     * In deferred mode, this can differ from `value` until `apply()` is called.\n     */\n    draftValue: TValue | undefined;\n\n    /**\n     * Updates the current draft value from custom slot content.\n     */\n    setDraftValue: (value: TValue | undefined) => void;\n\n    /**\n     * Commits the current draft value and closes the dropdown.\n     */\n    apply: () => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clear: () => void;\n\n    /**\n     * Closes the dropdown without necessarily committing the current draft value.\n     */\n    close: () => void;\n\n    /**\n     * Active selection mode of the picker.\n     */\n    mode: DayPickerMode;\n\n    /**\n     * Active locale used for formatting and calendar labels.\n     */\n    locale: string;\n};\n\nexport type DayPickerTriggerRenderProps<TValue> = DayPickerSlotRenderProps<TValue> & {\n    /**\n     * Optional id forwarded from the DayPicker props.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded from the DayPicker props.\n     */\n    name?: string;\n\n    /**\n     * String currently shown by the default trigger input.\n     */\n    displayValue: string;\n\n    /**\n     * Whether the dropdown is currently open.\n     */\n    isOpen: boolean;\n\n    /**\n     * Opens the dropdown.\n     */\n    open: () => void;\n\n    /**\n     * Toggles the dropdown open state.\n     */\n    toggle: () => void;\n};\n\ntype CommonDayPickerProps = Omit<CommonCalendarProps, 'size'> & {\n    /**\n     * Optional id forwarded to the default input trigger.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded to the default input trigger.\n     */\n    name?: string;\n\n    /**\n     * Placeholder text shown in the default input trigger.\n     */\n    placeholder?: string;\n\n    /**\n     * Rioglyph icon shown in the default input trigger addon.\n     *\n     * @default 'rioglyph-calendar'\n     */\n    iconName?: RioglyphIconType;\n\n    /**\n     * Custom date-fns format string (e.g., 'yyyy-MM-dd' or 'dd.MM.yyyy HH:mm') to override locale-based formatting.\n     * The built-in input mask supports numeric `dd`, `MM`, `yyyy`, `HH` and `mm` tokens with separators.\n     * If omitted, locale-based date-only display is used for the input.\n     */\n    dateFormat?: string;\n\n    /**\n     * Called when the internal input loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n\n    /**\n     * Additional props forwarded to the default input element.\n     *\n     * Useful for attributes like `readOnly`, `disabled`, `required`, `autoFocus`, or custom ARIA labels.\n     */\n    inputProps?: Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        'children' | 'value' | 'defaultValue' | 'onChange' | 'size'\n    >;\n\n    /**\n     * Shows the built-in error styling and help block below the input.\n     */\n    errorMessage?: string | ReactNode;\n\n    /**\n     * Shows the built-in warning styling and help block below the input.\n     */\n    warningMessage?: string | ReactNode;\n\n    /**\n     * Controls white-space handling inside the built-in help block.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional classes for the text input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes for the dropdown container.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes for the left sidebar container.\n     */\n    leftSidebarClassName?: string;\n\n    /**\n     * Additional classes for the right sidebar container.\n     */\n    rightSidebarClassName?: string;\n\n    /**\n     * Additional classes for the footer container.\n     */\n    footerClassName?: string;\n\n    /**\n     * Renders the dropdown into a dedicated react portal.\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Aligns the dropdown to the right edge of the input.\n     *\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Shows a clear button inside the input.\n     *\n     * @default false\n     */\n    isClearable?: boolean;\n\n    /**\n     * Closes the dropdown after selecting a complete value.\n     *\n     * Range mode closes only after both dates are selected.\n     *\n     * @default true for `selectionBehavior='immediate'`, otherwise false\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Closes the dropdown when clicking outside of the trigger and dropdown.\n     *\n     * @default true\n     */\n    closeOnOutsideClick?: boolean;\n\n    /**\n     * Defines whether the value is committed immediately or only when applied explicitly.\n     *\n     * @default 'immediate'\n     */\n    selectionBehavior?: 'immediate' | 'deferred';\n};\n\n/**\n * Props for a `DayPicker` with single-date selection.\n */\nexport type SingleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Called whenever the user changes the raw input value.\n     * Useful for custom validation and form-library integration.\n     */\n    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;\n\n    /**\n     * Custom parser for manual single-date input.\n     * Overrides the built-in locale/dateFormat parsing.\n     */\n    parseInput?: (rawValue: string, locale: string) => Date | undefined;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with multiple independent dates.\n */\nexport type MultipleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date[] | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with date-range selection.\n */\nexport type RangeDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: DateRange | undefined, locale: string) => string;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n};\n\nexport type DayPickerProps = SingleDayPickerProps | MultipleDayPickerProps | RangeDayPickerProps;\n\nexport const isSingleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is SingleDayPickerProps | SingleDayPickerCalendarProps => !props.mode || props.mode === 'single';\n\nexport const isMultipleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is MultipleDayPickerProps | MultipleDayPickerCalendarProps => props.mode === 'multiple';\n\nexport const isRangeDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is RangeDayPickerProps | RangeDayPickerCalendarProps => props.mode === 'range';\n"],"names":["isSingleDayPickerProps","props","isMultipleDayPickerProps","isRangeDayPickerProps"],"mappings":"AA8mBO,MAAMA,IAAyB,CAClCC,MAC+D,CAACA,EAAM,QAAQA,EAAM,SAAS,UAEpFC,IAA2B,CACpCD,MACmEA,EAAM,SAAS,YAEzEE,IAAwB,CACjCF,MAC6DA,EAAM,SAAS;"}

package/components/datepicker/dayPickerUtils.d.ts

@@ -6,5 +6,5 @@ export declare const resolveLocale: (localeCode: string) => Locale;
 export declare const formatDate: (date: Date | undefined, localeCode: string, dateFormat?: string) => string;
 export declare const formatSelectionForInput: (selected: Date | Date[] | DateRange | undefined, localeCode: string, mode: DayPickerMode, dateFormat?: string) => string;
 export declare const getInputFormat: (localeCode: string, dateFormat?: string) => string;
-export declare const getInputMaskProps: (localeCode: string, dateFormat?: string) => Pick<ClearableInputProps, "mask" | "pattern" | "format" | "parse"> | undefined;
+export declare const getInputMaskProps: (localeCode: string, dateFormat?: string) => Pick<ClearableInputProps, "mask" | "pattern" | "format" | "parse" | "blocks"> | undefined;
 export declare const parseDateString: (value: string | undefined, localeCode: string, dateFormat?: string) => Date | undefined;

package/components/datepicker/dayPickerUtils.js

@@ -1,6 +1,7 @@
-import { parse as s, format as e, isValid as c } from "date-fns";
-import * as d from "date-fns/locale";
-const i = {
+import { parse as i, format as a, isValid as m } from "date-fns";
+import * as e from "date-fns/locale";
+import { IMask as d } from "react-imask";
+const f = {
   "bg-BG": "dd.MM.yyyy",
   "cs-CZ": "dd.MM.yyyy",
   "da-DK": "dd-MM-yyyy",
@@ -25,10 +26,10 @@ const i = {
   "sk-SK": "dd.MM.yyyy",
   "sl-SI": "dd.MM.yyyy",
   "sv-SE": "yyyy-MM-dd"
-}, l = Object.keys(i), g = (y) => {
+}, k = Object.keys(f), h = (y) => {
   const r = y.trim(), t = r.replace(/-([a-z])/gi, (n, M) => M.toUpperCase()), o = r.split("-")[0];
-  return d[t] || d[r] || d[o] || d.enGB;
-}, p = (y, r, t) => y ? e(y, a(r, t)) : "", D = (y, r, t, o) => {
+  return e[t] || e[r] || e[o] || e.enGB;
+}, p = (y, r, t) => y ? a(y, s(r, t)) : "", L = (y, r, t, o) => {
   if (!y)
     return "";
   const n = (M) => p(M, r, o);
@@ -37,11 +38,11 @@ const i = {
   if (t === "multiple" && Array.isArray(y))
     return y.map(n).join(", ");
   if (t === "range" && typeof y == "object" && "from" in y) {
-    const M = y.from ? n(y.from) : "...", f = y.to ? n(y.to) : "...";
-    return `${M} - ${f}`;
+    const M = y.from ? n(y.from) : "...", c = y.to ? n(y.to) : "...";
+    return `${M} - ${c}`;
   }
   return "";
-}, a = (y, r) => r || i[y] || "yyyy-MM-dd", u = (y) => {
+}, s = (y, r) => r || f[y] || "yyyy-MM-dd", u = (y) => {
   let r = "";
   for (let t = 0; t < y.length; ) {
     if (y.startsWith("dd", t)) {
@@ -56,6 +57,14 @@ const i = {
       r += "Y", t += 4;
       continue;
     }
+    if (y.startsWith("HH", t)) {
+      r += "H", t += 2;
+      continue;
+    }
+    if (y.startsWith("mm", t)) {
+      r += "M", t += 2;
+      continue;
+    }
     const o = y[t];
     if (!o)
       break;
@@ -64,29 +73,43 @@ const i = {
     r += o, t += 1;
   }
   return r;
-}, L = (y, r) => {
-  const t = a(y, r), o = u(t);
+}, D = (y, r) => {
+  const t = s(y, r), o = u(t);
   if (o)
     return {
       mask: Date,
       pattern: o,
-      format: (n) => n ? e(n, t) : "",
-      parse: (n) => s(n, t, /* @__PURE__ */ new Date())
+      blocks: {
+        H: {
+          mask: d.MaskedRange,
+          from: 0,
+          to: 23,
+          maxLength: 2
+        },
+        M: {
+          mask: d.MaskedRange,
+          from: 0,
+          to: 59,
+          maxLength: 2
+        }
+      },
+      format: (n) => n ? a(n, t) : "",
+      parse: (n) => i(n, t, /* @__PURE__ */ new Date())
     };
-}, h = (y, r, t) => {
+}, I = (y, r, t) => {
   if (!y)
     return;
-  const o = t || a(r), n = s(y, o, /* @__PURE__ */ new Date());
-  if (c(n) && e(n, o) === y)
+  const o = t || s(r), n = i(y, o, /* @__PURE__ */ new Date());
+  if (m(n) && a(n, o) === y)
     return n;
 };
 export {
   p as formatDate,
-  D as formatSelectionForInput,
-  a as getInputFormat,
-  L as getInputMaskProps,
-  h as parseDateString,
-  g as resolveLocale,
-  l as supportedDayPickerLocales
+  L as formatSelectionForInput,
+  s as getInputFormat,
+  D as getInputMaskProps,
+  I as parseDateString,
+  h as resolveLocale,
+  k as supportedDayPickerLocales
 };
 //# sourceMappingURL=dayPickerUtils.js.map

package/components/datepicker/dayPickerUtils.js.map

@@ -1 +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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"}
+{"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';\nimport { IMask } from 'react-imask';\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        if (inputFormat.startsWith('HH', index)) {\n            pattern += 'H';\n            index += 2;\n            continue;\n        }\n\n        if (inputFormat.startsWith('mm', index)) {\n            pattern += 'M';\n            index += 2;\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' | 'blocks'> | 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        blocks: {\n            H: {\n                mask: IMask.MaskedRange,\n                from: 0,\n                to: 23,\n                maxLength: 2,\n            },\n            M: {\n                mask: IMask.MaskedRange,\n                from: 0,\n                to: 59,\n                maxLength: 2,\n            },\n        },\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","IMask","value","parse","parseDateString","expectedFormat","parsed","isValid"],"mappings":"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"}

package/components/datepicker/useDayPickerInputState.d.ts

@@ -27,6 +27,6 @@ declare const useDayPickerInputState: ({ props, locale, dateFormat, inputProps,
     handleClearInput: () => void;
     handleInputFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    inputMaskProps: Pick<import('../clearableInput/ClearableInput').ClearableInputProps, "pattern" | "mask" | "format" | "parse"> | undefined;
+    inputMaskProps: Pick<import('../clearableInput/ClearableInput').ClearableInputProps, "mask" | "pattern" | "format" | "parse" | "blocks"> | undefined;
 };
 export default useDayPickerInputState;

package/components/dialog/ConfirmationDialog.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AutoTrackingAttributes } from '../../utils/analytics/autoTracking';
 import { BaseDialogProps } from './Dialog';
 export type ConfirmationDialogProps = BaseDialogProps & {
     /**
@@ -21,10 +22,26 @@ export type ConfirmationDialogProps = BaseDialogProps & {
      * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
      */
     cancelButtonText?: string | React.ReactNode;
+    /**
+     * Optional key used to generate automatic GA tracking attributes for the cancel button.
+     */
+    cancelButtonAutoTrackingKey?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the cancel button.
+     */
+    cancelButtonTrackingAttributes?: AutoTrackingAttributes;
     /**
      * The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text.
      */
     confirmButtonText?: string | React.ReactNode;
+    /**
+     * Optional key used to generate automatic GA tracking attributes for the confirmation button.
+     */
+    confirmButtonAutoTrackingKey?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the confirmation button.
+     */
+    confirmButtonTrackingAttributes?: AutoTrackingAttributes;
     /**
      * When set to `true` the confirmation button will be disabled.
      */

package/components/dialog/ConfirmationDialog.js

@@ -1,27 +1,51 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { noop as t } from "es-toolkit/function";
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
+import { noop as n } from "es-toolkit/function";
 import i from "../button/Button.js";
-import C from "./Dialog.js";
+import B from "./Dialog.js";
 const x = (r) => {
   const {
-    content: e,
-    onClickCancel: n = t,
-    cancelButtonText: a,
-    onClickConfirm: l = t,
-    confirmButtonText: s,
-    disableConfirm: c,
-    ...m
-  } = r;
+    content: a,
+    onClickCancel: t = n,
+    cancelButtonText: c,
+    cancelButtonAutoTrackingKey: e,
+    cancelButtonTrackingAttributes: l,
+    onClickConfirm: s = n,
+    confirmButtonText: m,
+    confirmButtonAutoTrackingKey: u,
+    confirmButtonTrackingAttributes: f,
+    disableConfirm: C,
+    ...d
+  } = r, g = /* @__PURE__ */ k("div", { className: "btn-toolbar", children: [
+    /* @__PURE__ */ o(
+      i,
+      {
+        className: "CancelButton",
+        onClick: t,
+        autoTrackingKey: e,
+        ...l,
+        children: c
+      }
+    ),
+    /* @__PURE__ */ o(
+      i,
+      {
+        bsStyle: "primary",
+        className: "ConfirmationButton",
+        onClick: s,
+        disabled: C,
+        autoTrackingKey: u,
+        ...f,
+        children: m
+      }
+    )
+  ] });
   return /* @__PURE__ */ o(
-    C,
+    B,
     {
-      ...m,
-      body: e,
-      footer: /* @__PURE__ */ f("div", { className: "btn-toolbar", children: [
-        /* @__PURE__ */ o(i, { className: "CancelButton", onClick: n, children: a }),
-        /* @__PURE__ */ o(i, { bsStyle: "primary", className: "ConfirmationButton", onClick: l, disabled: c, children: s })
-      ] }),
-      onClose: n,
+      ...d,
+      body: a,
+      footer: g,
+      onClose: t,
       showCloseButton: !1,
       className: "confirmation-dialog",
       disableEsc: !0

package/components/dialog/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.js","sources":["../../../src/components/dialog/ConfirmationDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type ConfirmationDialogProps = BaseDialogProps & {\n    /**\n     * The content of the dialog body itself\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * A callback fired when the confirmation button is clicked.\n     *\n     * @default () => {}\n     */\n    onClickConfirm?: VoidFunction;\n\n    /**\n     * A callback fired when the cancel button is clicked or the dialog is closed.\n     *\n     * @default () => {}\n     */\n    onClickCancel?: VoidFunction;\n\n    /**\n     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text.\n     */\n    confirmButtonText?: string | React.ReactNode;\n\n    /**\n     * When set to `true` the confirmation button will be disabled.\n     */\n    disableConfirm?: boolean;\n};\n\nconst ConfirmationDialog = (props: ConfirmationDialogProps) => {\n    const {\n        content,\n        onClickCancel = noop,\n        cancelButtonText,\n        onClickConfirm = noop,\n        confirmButtonText,\n        disableConfirm,\n        ...remainingProps\n    } = props;\n\n    const footer = (\n        <div className='btn-toolbar'>\n            <Button className='CancelButton' onClick={onClickCancel}>\n                {cancelButtonText}\n            </Button>\n            <Button bsStyle='primary' className='ConfirmationButton' onClick={onClickConfirm} disabled={disableConfirm}>\n                {confirmButtonText}\n            </Button>\n        </div>\n    );\n\n    return (\n        <Dialog\n            {...remainingProps}\n            body={content}\n            footer={footer}\n            onClose={onClickCancel}\n            showCloseButton={false}\n            className='confirmation-dialog'\n            disableEsc\n        />\n    );\n};\n\nexport default ConfirmationDialog;\n"],"names":["ConfirmationDialog","props","content","onClickCancel","noop","cancelButtonText","onClickConfirm","confirmButtonText","disableConfirm","remainingProps","jsx","Dialog","jsxs","Button"],"mappings":";;;;AA0CA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,eAAAC,IAAgBC;AAAA,IAChB,kBAAAC;AAAA,IACA,gBAAAC,IAAiBF;AAAA,IACjB,mBAAAG;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR;AAaJ,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,MAAMP;AAAA,MACN,QAdJ,gBAAAU,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EAAO,WAAU,gBAAe,SAASV,GACrC,UAAAE,GACL;AAAA,QACA,gBAAAK,EAACG,GAAA,EAAO,SAAQ,WAAU,WAAU,sBAAqB,SAASP,GAAgB,UAAUE,GACvF,UAAAD,EAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAQI,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,WAAU;AAAA,MACV,YAAU;AAAA,IAAA;AAAA,EAAA;AAGtB;"}
+{"version":3,"file":"ConfirmationDialog.js","sources":["../../../src/components/dialog/ConfirmationDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport type { AutoTrackingAttributes } from '../../utils/analytics/autoTracking';\nimport Dialog, { type BaseDialogProps } from './Dialog';\n\nexport type ConfirmationDialogProps = BaseDialogProps & {\n    /**\n     * The content of the dialog body itself\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * A callback fired when the confirmation button is clicked.\n     *\n     * @default () => {}\n     */\n    onClickConfirm?: VoidFunction;\n\n    /**\n     * A callback fired when the cancel button is clicked or the dialog is closed.\n     *\n     * @default () => {}\n     */\n    onClickCancel?: VoidFunction;\n\n    /**\n     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes for the cancel button.\n     */\n    cancelButtonAutoTrackingKey?: string;\n\n    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the cancel button.\n     */\n    cancelButtonTrackingAttributes?: AutoTrackingAttributes;\n\n    /**\n     * The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text.\n     */\n    confirmButtonText?: string | React.ReactNode;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes for the confirmation button.\n     */\n    confirmButtonAutoTrackingKey?: string;\n\n    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the confirmation button.\n     */\n    confirmButtonTrackingAttributes?: AutoTrackingAttributes;\n\n    /**\n     * When set to `true` the confirmation button will be disabled.\n     */\n    disableConfirm?: boolean;\n};\n\nconst ConfirmationDialog = (props: ConfirmationDialogProps) => {\n    const {\n        content,\n        onClickCancel = noop,\n        cancelButtonText,\n        cancelButtonAutoTrackingKey,\n        cancelButtonTrackingAttributes,\n        onClickConfirm = noop,\n        confirmButtonText,\n        confirmButtonAutoTrackingKey,\n        confirmButtonTrackingAttributes,\n        disableConfirm,\n        ...remainingProps\n    } = props;\n\n    const footer = (\n        <div className='btn-toolbar'>\n            <Button\n                className='CancelButton'\n                onClick={onClickCancel}\n                autoTrackingKey={cancelButtonAutoTrackingKey}\n                {...cancelButtonTrackingAttributes}\n            >\n                {cancelButtonText}\n            </Button>\n            <Button\n                bsStyle='primary'\n                className='ConfirmationButton'\n                onClick={onClickConfirm}\n                disabled={disableConfirm}\n                autoTrackingKey={confirmButtonAutoTrackingKey}\n                {...confirmButtonTrackingAttributes}\n            >\n                {confirmButtonText}\n            </Button>\n        </div>\n    );\n\n    return (\n        <Dialog\n            {...remainingProps}\n            body={content}\n            footer={footer}\n            onClose={onClickCancel}\n            showCloseButton={false}\n            className='confirmation-dialog'\n            disableEsc\n        />\n    );\n};\n\nexport default ConfirmationDialog;\n"],"names":["ConfirmationDialog","props","content","onClickCancel","noop","cancelButtonText","cancelButtonAutoTrackingKey","cancelButtonTrackingAttributes","onClickConfirm","confirmButtonText","confirmButtonAutoTrackingKey","confirmButtonTrackingAttributes","disableConfirm","remainingProps","footer","jsxs","jsx","Button","Dialog"],"mappings":";;;;AA+DA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,eAAAC,IAAgBC;AAAA,IAChB,kBAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,gCAAAC;AAAA,IACA,gBAAAC,IAAiBJ;AAAA,IACjB,mBAAAK;AAAA,IACA,8BAAAC;AAAA,IACA,iCAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHZ,GAEEa,IACF,gBAAAC,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAASd;AAAA,QACT,iBAAiBG;AAAA,QAChB,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAST;AAAA,QACT,UAAUI;AAAA,QACV,iBAAiBF;AAAA,QAChB,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAGJ,SACI,gBAAAO;AAAA,IAACE;AAAA,IAAA;AAAA,MACI,GAAGL;AAAA,MACJ,MAAMX;AAAA,MACN,QAAAY;AAAA,MACA,SAASX;AAAA,MACT,iBAAiB;AAAA,MACjB,WAAU;AAAA,MACV,YAAU;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/components/dialog/DialogHeader.js

@@ -1,35 +1,36 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import f from "react";
-import { noop as v } from "es-toolkit/function";
-import B from "../button/Button.js";
-import d from "../../utils/classNames.js";
-import { useDialogContext as x } from "./dialogContext.js";
-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(
+import v from "react";
+import { noop as B } from "es-toolkit/function";
+import x from "../button/Button.js";
+import { getTrackingLabelFromNode as k } from "../../utils/analytics/getTrackingLabelFromNode.js";
+import i from "../../utils/classNames.js";
+import { useDialogContext as w } from "./dialogContext.js";
+const H = (n) => {
+  const { title: t, subtitle: s, headerButtons: l, onCloseButtonClick: c = B, ...m } = n, { onClose: h, isSmallestDialog: a, showXsDialogBorders: u, showCloseButton: g } = w(), r = a ? u : !0, p = a ? !1 : g, b = i("modal-header", !r && "border-bottom-none"), C = i(
     "modal-header-text",
     !r && "padding-bottom-0 width-100pct"
-  ), C = (N) => {
-    n(), m(N);
+  ), d = k(t), N = (f) => {
+    c(), h(f);
   };
-  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 })
+  return /* @__PURE__ */ e("div", { ...m, className: b, "aria-label": "dialog header", children: [
+    /* @__PURE__ */ e("div", { className: C, children: [
+      s && /* @__PURE__ */ o("div", { className: "modal-header-subtitle", children: s }),
+      /* @__PURE__ */ o("div", { className: "modal-header-title", children: t })
     ] }),
     /* @__PURE__ */ e("div", { className: "modal-header-buttons", children: [
-      l && !a && /* @__PURE__ */ e(f.Fragment, { children: [
+      l && !a && /* @__PURE__ */ e(v.Fragment, { children: [
         l,
         /* @__PURE__ */ o("div", { className: "modal-header-buttons-spacer" })
       ] }),
-      g && /* @__PURE__ */ o(
-        B,
+      p && /* @__PURE__ */ o(
+        x,
         {
           bsStyle: "muted",
           iconOnly: !0,
           iconName: "rioglyph-remove",
-          autoTrackingKey: `dialog::closed::${s}`,
+          autoTrackingKey: d && `dialog::closed::${d}`,
           className: "modal-header-close close",
-          onClick: C,
+          onClick: N,
           "data-testid": "close",
           "aria-label": "dialog close button"
         }
@@ -38,6 +39,6 @@ const T = (i) => {
   ] });
 };
 export {
-  T as default
+  H 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 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;"}
+{"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 { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\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    const titleTrackingValue = getTrackingLabelFromNode(title);\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={titleTrackingValue && `dialog::closed::${titleTrackingValue}`}\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","titleTrackingValue","getTrackingLabelFromNode","handleClose","event","jsxs","jsx","React","Button"],"mappings":";;;;;;;AA2BA,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,GAExBK,IAAqBC,EAAyBjB,CAAK,GAEnDkB,IAAc,CAACC,MAA+C;AAChE,IAAAhB,EAAA,GACAG,EAAQa,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGd,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWL,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAoB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAApB,GAAS;AAAA,MAC9D,gBAAAoB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAArB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAoB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAlB,KAAiB,CAACK,KACf,gBAAAa,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAApB;AAAA,QACD,gBAAAmB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHT,KACG,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,UAAQ;AAAA,UACR,UAAS;AAAA,UACT,iBAAiBP,KAAsB,mBAAmBA,CAAkB;AAAA,UAC5E,WAAU;AAAA,UACV,SAASE;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACf,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}

package/components/dropdown/ButtonDropdown.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { DropdownToggleEvent, DropdownToggleButtonType } from './DropdownToggleButton';
 import { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
 import { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
 export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {
     /**
      * Unique button id. If not present a random id is generated.
@@ -128,6 +129,10 @@ export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> =
      * Additional classes to be set on the dropdown-toggle button.
      */
     toggleClassName?: string;
+    /**
+     * Optional tracking attributes added to the dropdown toggle button.
+     */
+    trackingAttributes?: TrackingAttributes;
     /**
      * Additional classes to be set on the dropdown.
      */