@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Combobox/useCombobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}
+{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}

package/dist/components/Combobox/useCombobox.d.ts

@@ -2,7 +2,7 @@ import { ComboboxProps } from './Combobox';
 import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
 import { InputProps } from '../Input/Input';
 import * as React from 'react';
-type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
+type useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {
     combobox: React.HTMLAttributes<HTMLSpanElement>;
     input: Omit<InputProps, 'defaultValue'> & {
         ref: React.RefObject<HTMLInputElement>;

package/dist/components/Combobox/useCombobox.js

@@ -66,7 +66,7 @@ const useCombobox = (props, ref) => {
       return;
     }
     const option = data[index];
-    if ((option == null ? void 0 : option.value) === value) {
+    if (option?.value === value) {
       setInputValue(convertToInputValue(value));
     } else {
       setInputValueByIndex(index, event);
@@ -138,7 +138,7 @@ const useCombobox = (props, ref) => {
     }
     if (onChange && event.target.value !== convertToInputValue(value)) {
       event.detail = sanitizeItem(item);
-      const parents = getOptionParents(flattenedData, item == null ? void 0 : item.path);
+      const parents = getOptionParents(flattenedData, item?.path);
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
       }

package/dist/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { nanoid } from 'nanoid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Datepicker/Datepicker.cjs

@@ -29,7 +29,7 @@ const PopoverArrow = () => /* @__PURE__ */ React__namespace.createElement(popove
   "path",
   {
     d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas] "
+    className: "fill-[canvas]"
   }
 ), /* @__PURE__ */ React__namespace.createElement(
   "path",
@@ -43,22 +43,20 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
   const { calendar, input } = useDatepicker.useDatepicker(otherProps, ref);
   const [open, setOpen] = React__namespace.useState(false);
   const { texts } = Localization.useLocalization();
-  const className = cn("inline-flex w-full text-black font-normal", externalClassName);
+  const className = cn("inline-flex w-full font-normal text-black", externalClassName);
   const popoverContentRef = React__namespace.useRef(null);
   const handlePopoverClick = React__namespace.useCallback((event) => {
     event.stopPropagation();
   }, []);
   const handleCloseAutoFocus = () => input.ref.current;
   const handleOpenAutoFocus = () => {
-    var _a;
-    const currentDay = ((_a = popoverContentRef == null ? void 0 : popoverContentRef.current) == null ? void 0 : _a.querySelector("td.rdp-selected button")) ?? null;
+    const currentDay = popoverContentRef?.current?.querySelector("td.rdp-selected button") ?? null;
     return currentDay;
   };
   const handleInputKeyDown = (event) => {
-    var _a, _b;
-    (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
+    props.onKeyDown?.(event);
     if (!event.defaultPrevented) {
-      (_b = input.onKeyDown) == null ? void 0 : _b.call(input, event);
+      input.onKeyDown?.(event);
     }
   };
   return /* @__PURE__ */ React__namespace.createElement("span", { className, "data-taco": "datepicker", style }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Root, { modal: "trap-focus", open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(
@@ -88,7 +86,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
     {
       initialFocus: handleOpenAutoFocus,
       finalFocus: handleCloseAutoFocus,
-      className: "yt-shadow group rounded border border-transparent bg-white p-3 outline-none"
+      className: "group rounded border border-transparent bg-white p-3 outline-none yt-shadow"
     },
     /* @__PURE__ */ React__namespace.createElement(PopoverArrow, null),
     /* @__PURE__ */ React__namespace.createElement("div", { ref: popoverContentRef, className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React__namespace.createElement(
@@ -104,7 +102,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
       "button",
       {
         type: "button",
-        className: "hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs",
+        className: "flex w-full items-start px-4 py-1 text-xs hover:wcag-gray-100",
         "data-taco": "datepicker-shortcut",
         onClick: (event) => {
           shortcut.onClick(event);

package/dist/components/Datepicker/Datepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","LegacyIconButton","Calendar"],"mappings":"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"}
+{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 outline-none yt-shadow\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:wcag-gray-100\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","LegacyIconButton","Calendar"],"mappings":"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"}

package/dist/components/Datepicker/Datepicker.js

@@ -10,7 +10,7 @@ const PopoverArrow = () => /* @__PURE__ */ React.createElement(Popover.Arrow, {
   "path",
   {
     d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas] "
+    className: "fill-[canvas]"
   }
 ), /* @__PURE__ */ React.createElement(
   "path",
@@ -24,22 +24,20 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
   const { calendar, input } = useDatepicker(otherProps, ref);
   const [open, setOpen] = React.useState(false);
   const { texts } = useLocalization();
-  const className = cn("inline-flex w-full text-black font-normal", externalClassName);
+  const className = cn("inline-flex w-full font-normal text-black", externalClassName);
   const popoverContentRef = React.useRef(null);
   const handlePopoverClick = React.useCallback((event) => {
     event.stopPropagation();
   }, []);
   const handleCloseAutoFocus = () => input.ref.current;
   const handleOpenAutoFocus = () => {
-    var _a;
-    const currentDay = ((_a = popoverContentRef == null ? void 0 : popoverContentRef.current) == null ? void 0 : _a.querySelector("td.rdp-selected button")) ?? null;
+    const currentDay = popoverContentRef?.current?.querySelector("td.rdp-selected button") ?? null;
     return currentDay;
   };
   const handleInputKeyDown = (event) => {
-    var _a, _b;
-    (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
+    props.onKeyDown?.(event);
     if (!event.defaultPrevented) {
-      (_b = input.onKeyDown) == null ? void 0 : _b.call(input, event);
+      input.onKeyDown?.(event);
     }
   };
   return /* @__PURE__ */ React.createElement("span", { className, "data-taco": "datepicker", style }, /* @__PURE__ */ React.createElement(Popover.Root, { modal: "trap-focus", open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
@@ -69,7 +67,7 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
     {
       initialFocus: handleOpenAutoFocus,
       finalFocus: handleCloseAutoFocus,
-      className: "yt-shadow group rounded border border-transparent bg-white p-3 outline-none"
+      className: "group rounded border border-transparent bg-white p-3 outline-none yt-shadow"
     },
     /* @__PURE__ */ React.createElement(PopoverArrow, null),
     /* @__PURE__ */ React.createElement("div", { ref: popoverContentRef, className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React.createElement(
@@ -85,7 +83,7 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
       "button",
       {
         type: "button",
-        className: "hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs",
+        className: "flex w-full items-start px-4 py-1 text-xs hover:wcag-gray-100",
         "data-taco": "datepicker-shortcut",
         onClick: (event) => {
           shortcut.onClick(event);

package/dist/components/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 outline-none yt-shadow\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:wcag-gray-100\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}

package/dist/components/Datepicker/useDatepicker.cjs

@@ -35,8 +35,8 @@ const useDatepicker = ({ defaultValue: _, calendar, onBlur, onChange, value, ...
     }
   }, [value]);
   const isDisabledDay = React__namespace.useMemo(() => {
-    if (originalValueAsDate && (calendar == null ? void 0 : calendar.disabledDays)) {
-      return reactDayPicker.isMatch(originalValueAsDate, calendar == null ? void 0 : calendar.disabledDays);
+    if (originalValueAsDate && calendar?.disabledDays) {
+      return reactDayPicker.isMatch(originalValueAsDate, calendar?.disabledDays);
     }
     return false;
   }, [originalValueAsDate]);
@@ -45,8 +45,8 @@ const useDatepicker = ({ defaultValue: _, calendar, onBlur, onChange, value, ...
     const valueAsDate = date.parseFromCustomString(
       event.target.value,
       "dd.mm.yy",
-      originalValueAsDate == null ? void 0 : originalValueAsDate.getMonth(),
-      originalValueAsDate == null ? void 0 : originalValueAsDate.getFullYear()
+      originalValueAsDate?.getMonth(),
+      originalValueAsDate?.getFullYear()
     );
     const formattedValue = valueAsDate ? date.format(valueAsDate) || "" : "";
     event.target.value = formattedValue;

package/dist/components/Datepicker/useDatepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDatepicker.cjs","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\nimport { format, parse, parseFromCustomString } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    const isDisabledDay = React.useMemo(() => {\n        if (originalValueAsDate && calendar?.disabledDays) {\n            return isMatch(originalValueAsDate, calendar?.disabledDays); // can happen if you type a disabled date in input.\n        }\n\n        return false;\n    }, [originalValueAsDate]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        const isEmpty = !event.target.value.trim();\n\n        if (onChange) {\n            (event as any).detail = isEmpty ? null : valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(isEmpty ? '' : formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = (date: Date) => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        invalid: props.invalid || isDisabledDay,\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useMergedRef","useLocalization","React","format","parse","isMatch","parseFromCustomString","date","setInputValueByRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAgB,CACzB,EAAE,cAAc,GAAG,UAAU,QAAQ,UAAU,OAAO,GAAG,MAAM,GAC/D,QACgB;AACV,QAAA,WAAWA,0BAA+B,GAAG;AAC7C,QAAA,EAAE,WAAW,IAAIC,6BAAgB;AACjC,QAAA,CAAC,eAAe,gBAAgB,IAAIC,iBAAM,SAASC,KAAA,OAAO,OAAO,WAAW,IAAI,KAAK,EAAE;AACvF,QAAA,sBAAsBC,WAAM,KAAK;AAGvCF,mBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiBC,KAAA,OAAO,OAAO,WAAW,IAAI;AAEpD,QAAI,mBAAmB,eAAe;AAClC,uBAAiB,kBAAkB,EAAE;AAAA,IAAA;AAAA,EACzC,GACD,CAAC,KAAK,CAAC;AAEJ,QAAA,gBAAgBD,iBAAM,QAAQ,MAAM;AAClC,QAAA,wBAAuB,qCAAU,eAAc;AACxC,aAAAG,uBAAQ,qBAAqB,qCAAU,YAAY;AAAA,IAAA;AAGvD,WAAA;AAAA,EAAA,GACR,CAAC,mBAAmB,CAAC;AAGlB,QAAA,kBAAkB,CAAC,UAAoD;AACzE,UAAM,QAAQ;AAEd,UAAM,cAAcC,KAAA;AAAA,MAChB,MAAM,OAAO;AAAA,MACb;AAAA,MACA,2DAAqB;AAAA,MACrB,2DAAqB;AAAA,IACzB;AACA,UAAM,iBAAiB,cAAcH,KAAAA,OAAO,WAAW,KAAK,KAAK;AAEjE,UAAM,OAAO,QAAQ;AAErB,UAAM,UAAU,CAAC,MAAM,OAAO,MAAM,KAAK;AAEzC,QAAI,UAAU;AACT,YAAc,SAAS,UAAU,OAAO;AACzC,eAAS,KAAK;AAAA,IAAA,OACX;AAEc,uBAAA,UAAU,KAAK,cAAc;AAAA,IAAA;AAGlD,QAAI,QAAQ;AACR,aAAO,KAAK;AAAA,IAAA;AAAA,EAEpB;AAEM,QAAA,oBAAoB,CAAC,UAAqD;AAC3D,qBAAA,MAAM,OAAO,KAAK;AAAA,EACvC;AAEM,QAAA,eAAe,CAACI,WAAe;AACjCC,6BAAmB,SAAS,SAASL,KAAA,OAAOI,QAAM,WAAW,IAAI,GAAG,UAAU;AAAA,EAClF;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,WAAW;AACjB,YAAM,UAAU,KAAK;AAAA,IAAA;AAGrB,QAAA,MAAM,QAAQ,SAAS;AACjB,YAAA,OAAO,cAAc,IAAI,MAAM,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,IAAA;AAAA,EAE3E;AAEA,QAAM,aAAyB;AAAA,IAC3B,GAAG;AAAA,IACH,cAAc;AAAA,IACd,SAAS,MAAM,WAAW;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACX;AAEA,QAAM,gBAA+B;AAAA,IACjC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AAEO,SAAA;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,EACd;AACJ;;"}
+{"version":3,"file":"useDatepicker.cjs","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\nimport { format, parse, parseFromCustomString } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    const isDisabledDay = React.useMemo(() => {\n        if (originalValueAsDate && calendar?.disabledDays) {\n            return isMatch(originalValueAsDate, calendar?.disabledDays); // can happen if you type a disabled date in input.\n        }\n\n        return false;\n    }, [originalValueAsDate]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        const isEmpty = !event.target.value.trim();\n\n        if (onChange) {\n            (event as any).detail = isEmpty ? null : valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(isEmpty ? '' : formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = (date: Date) => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        invalid: props.invalid || isDisabledDay,\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useMergedRef","useLocalization","React","format","parse","isMatch","parseFromCustomString","date","setInputValueByRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAgB,CACzB,EAAE,cAAc,GAAG,UAAU,QAAQ,UAAU,OAAO,GAAG,MAAA,GACzD,QACgB;AAChB,QAAM,WAAWA,aAAAA,aAA+B,GAAG;AACnD,QAAM,EAAE,WAAA,IAAeC,6BAAA;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAIC,iBAAM,SAASC,KAAAA,OAAO,OAAO,WAAW,IAAI,KAAK,EAAE;AAC7F,QAAM,sBAAsBC,KAAAA,MAAM,KAAK;AAGvCF,mBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiBC,KAAAA,OAAO,OAAO,WAAW,IAAI;AAEpD,QAAI,mBAAmB,eAAe;AAClC,uBAAiB,kBAAkB,EAAE;AAAA,IACzC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,gBAAgBD,iBAAM,QAAQ,MAAM;AACtC,QAAI,uBAAuB,UAAU,cAAc;AAC/C,aAAOG,uBAAQ,qBAAqB,UAAU,YAAY;AAAA,IAC9D;AAEA,WAAO;AAAA,EACX,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,kBAAkB,CAAC,UAAoD;AACzE,UAAM,QAAA;AAEN,UAAM,cAAcC,KAAAA;AAAAA,MAChB,MAAM,OAAO;AAAA,MACb;AAAA,MACA,qBAAqB,SAAA;AAAA,MACrB,qBAAqB,YAAA;AAAA,IAAY;AAErC,UAAM,iBAAiB,cAAcH,KAAAA,OAAO,WAAW,KAAK,KAAK;AAEjE,UAAM,OAAO,QAAQ;AAErB,UAAM,UAAU,CAAC,MAAM,OAAO,MAAM,KAAA;AAEpC,QAAI,UAAU;AACT,YAAc,SAAS,UAAU,OAAO;AACzC,eAAS,KAAK;AAAA,IAClB,OAAO;AAEH,uBAAiB,UAAU,KAAK,cAAc;AAAA,IAClD;AAEA,QAAI,QAAQ;AACR,aAAO,KAAK;AAAA,IAChB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,qBAAiB,MAAM,OAAO,KAAK;AAAA,EACvC;AAEA,QAAM,eAAe,CAACI,WAAe;AACjCC,6BAAmB,SAAS,SAASL,KAAAA,OAAOI,QAAM,WAAW,IAAI,GAAG,UAAU;AAAA,EAClF;AAEA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,WAAW;AACjB,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,OAAO,cAAc,IAAI,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACvE;AAAA,EACJ;AAEA,QAAM,aAAyB;AAAA,IAC3B,GAAG;AAAA,IACH,cAAc;AAAA,IACd,SAAS,MAAM,WAAW;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAGX,QAAM,gBAA+B;AAAA,IACjC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAGX,SAAO;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAElB;;"}

package/dist/components/Datepicker/useDatepicker.js

@@ -16,8 +16,8 @@ const useDatepicker = ({ defaultValue: _, calendar, onBlur, onChange, value, ...
     }
   }, [value]);
   const isDisabledDay = React.useMemo(() => {
-    if (originalValueAsDate && (calendar == null ? void 0 : calendar.disabledDays)) {
-      return isMatch(originalValueAsDate, calendar == null ? void 0 : calendar.disabledDays);
+    if (originalValueAsDate && calendar?.disabledDays) {
+      return isMatch(originalValueAsDate, calendar?.disabledDays);
     }
     return false;
   }, [originalValueAsDate]);
@@ -26,8 +26,8 @@ const useDatepicker = ({ defaultValue: _, calendar, onBlur, onChange, value, ...
     const valueAsDate = parseFromCustomString(
       event.target.value,
       "dd.mm.yy",
-      originalValueAsDate == null ? void 0 : originalValueAsDate.getMonth(),
-      originalValueAsDate == null ? void 0 : originalValueAsDate.getFullYear()
+      originalValueAsDate?.getMonth(),
+      originalValueAsDate?.getFullYear()
     );
     const formattedValue = valueAsDate ? format(valueAsDate) || "" : "";
     event.target.value = formattedValue;

package/dist/components/Datepicker/useDatepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDatepicker.js","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\nimport { format, parse, parseFromCustomString } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    const isDisabledDay = React.useMemo(() => {\n        if (originalValueAsDate && calendar?.disabledDays) {\n            return isMatch(originalValueAsDate, calendar?.disabledDays); // can happen if you type a disabled date in input.\n        }\n\n        return false;\n    }, [originalValueAsDate]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        const isEmpty = !event.target.value.trim();\n\n        if (onChange) {\n            (event as any).detail = isEmpty ? null : valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(isEmpty ? '' : formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = (date: Date) => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        invalid: props.invalid || isDisabledDay,\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,gBAAgB,CACzB,EAAE,cAAc,GAAG,UAAU,QAAQ,UAAU,OAAO,GAAG,MAAM,GAC/D,QACgB;AACV,QAAA,WAAW,aAA+B,GAAG;AAC7C,QAAA,EAAE,WAAW,IAAI,gBAAgB;AACjC,QAAA,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,OAAO,OAAO,WAAW,IAAI,KAAK,EAAE;AACvF,QAAA,sBAAsB,MAAM,KAAK;AAGvC,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,OAAO,OAAO,WAAW,IAAI;AAEpD,QAAI,mBAAmB,eAAe;AAClC,uBAAiB,kBAAkB,EAAE;AAAA,IAAA;AAAA,EACzC,GACD,CAAC,KAAK,CAAC;AAEJ,QAAA,gBAAgB,MAAM,QAAQ,MAAM;AAClC,QAAA,wBAAuB,qCAAU,eAAc;AACxC,aAAA,QAAQ,qBAAqB,qCAAU,YAAY;AAAA,IAAA;AAGvD,WAAA;AAAA,EAAA,GACR,CAAC,mBAAmB,CAAC;AAGlB,QAAA,kBAAkB,CAAC,UAAoD;AACzE,UAAM,QAAQ;AAEd,UAAM,cAAc;AAAA,MAChB,MAAM,OAAO;AAAA,MACb;AAAA,MACA,2DAAqB;AAAA,MACrB,2DAAqB;AAAA,IACzB;AACA,UAAM,iBAAiB,cAAc,OAAO,WAAW,KAAK,KAAK;AAEjE,UAAM,OAAO,QAAQ;AAErB,UAAM,UAAU,CAAC,MAAM,OAAO,MAAM,KAAK;AAEzC,QAAI,UAAU;AACT,YAAc,SAAS,UAAU,OAAO;AACzC,eAAS,KAAK;AAAA,IAAA,OACX;AAEc,uBAAA,UAAU,KAAK,cAAc;AAAA,IAAA;AAGlD,QAAI,QAAQ;AACR,aAAO,KAAK;AAAA,IAAA;AAAA,EAEpB;AAEM,QAAA,oBAAoB,CAAC,UAAqD;AAC3D,qBAAA,MAAM,OAAO,KAAK;AAAA,EACvC;AAEM,QAAA,eAAe,CAAC,SAAe;AACjC,uBAAmB,SAAS,SAAS,OAAO,MAAM,WAAW,IAAI,GAAG,UAAU;AAAA,EAClF;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,WAAW;AACjB,YAAM,UAAU,KAAK;AAAA,IAAA;AAGrB,QAAA,MAAM,QAAQ,SAAS;AACjB,YAAA,OAAO,cAAc,IAAI,MAAM,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,IAAA;AAAA,EAE3E;AAEA,QAAM,aAAyB;AAAA,IAC3B,GAAG;AAAA,IACH,cAAc;AAAA,IACd,SAAS,MAAM,WAAW;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACX;AAEA,QAAM,gBAA+B;AAAA,IACjC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AAEO,SAAA;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,EACd;AACJ;"}
+{"version":3,"file":"useDatepicker.js","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\nimport { format, parse, parseFromCustomString } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(format(value, formatting.date) ?? '');\n    const originalValueAsDate = parse(value);\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        const formattedValue = format(value, formatting.date);\n\n        if (formattedValue !== internalValue) {\n            setInternalValue(formattedValue ?? '');\n        }\n    }, [value]);\n\n    const isDisabledDay = React.useMemo(() => {\n        if (originalValueAsDate && calendar?.disabledDays) {\n            return isMatch(originalValueAsDate, calendar?.disabledDays); // can happen if you type a disabled date in input.\n        }\n\n        return false;\n    }, [originalValueAsDate]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(\n            event.target.value,\n            'dd.mm.yy',\n            originalValueAsDate?.getMonth(),\n            originalValueAsDate?.getFullYear()\n        );\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        const isEmpty = !event.target.value.trim();\n\n        if (onChange) {\n            (event as any).detail = isEmpty ? null : valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(isEmpty ? '' : formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = (date: Date) => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        invalid: props.invalid || isDisabledDay,\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value: originalValueAsDate,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,gBAAgB,CACzB,EAAE,cAAc,GAAG,UAAU,QAAQ,UAAU,OAAO,GAAG,MAAA,GACzD,QACgB;AAChB,QAAM,WAAW,aAA+B,GAAG;AACnD,QAAM,EAAE,WAAA,IAAe,gBAAA;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,OAAO,OAAO,WAAW,IAAI,KAAK,EAAE;AAC7F,QAAM,sBAAsB,MAAM,KAAK;AAGvC,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,OAAO,OAAO,WAAW,IAAI;AAEpD,QAAI,mBAAmB,eAAe;AAClC,uBAAiB,kBAAkB,EAAE;AAAA,IACzC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACtC,QAAI,uBAAuB,UAAU,cAAc;AAC/C,aAAO,QAAQ,qBAAqB,UAAU,YAAY;AAAA,IAC9D;AAEA,WAAO;AAAA,EACX,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,kBAAkB,CAAC,UAAoD;AACzE,UAAM,QAAA;AAEN,UAAM,cAAc;AAAA,MAChB,MAAM,OAAO;AAAA,MACb;AAAA,MACA,qBAAqB,SAAA;AAAA,MACrB,qBAAqB,YAAA;AAAA,IAAY;AAErC,UAAM,iBAAiB,cAAc,OAAO,WAAW,KAAK,KAAK;AAEjE,UAAM,OAAO,QAAQ;AAErB,UAAM,UAAU,CAAC,MAAM,OAAO,MAAM,KAAA;AAEpC,QAAI,UAAU;AACT,YAAc,SAAS,UAAU,OAAO;AACzC,eAAS,KAAK;AAAA,IAClB,OAAO;AAEH,uBAAiB,UAAU,KAAK,cAAc;AAAA,IAClD;AAEA,QAAI,QAAQ;AACR,aAAO,KAAK;AAAA,IAChB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,qBAAiB,MAAM,OAAO,KAAK;AAAA,EACvC;AAEA,QAAM,eAAe,CAAC,SAAe;AACjC,uBAAmB,SAAS,SAAS,OAAO,MAAM,WAAW,IAAI,GAAG,UAAU;AAAA,EAClF;AAEA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,WAAW;AACjB,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,OAAO,cAAc,IAAI,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACvE;AAAA,EACJ;AAEA,QAAM,aAAyB;AAAA,IAC3B,GAAG;AAAA,IACH,cAAc;AAAA,IACd,SAAS,MAAM,WAAW;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAGX,QAAM,gBAA+B;AAAA,IACjC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAGX,SAAO;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAElB;"}