@economic/taco 14.0.0 → 14.1.0-EC-85807-code-report-fixes.0

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

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport type {\n    ScrollableListItem,\n    ScrollableListItemValue,\n    ScrollableListPropsWithRef,\n} from '@/components/Listbox/ScrollableList';\nimport { getId } from '@/components/Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '@/utils/dom';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport type { ComboboxProps } from './Combobox';\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    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue)) {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            if (inputValue !== '') {\n                setInputValue('');\n            }\n        }\n    }\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        // `value` commits one render after the input on Tab/select; without it in the deps the guard\n        // reopens the popover with a stale `value` and never re-runs to close it. EC-83328\n    }, [inputValue, data, value]);\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 debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport type { InputProps } from '@/components';\nimport type {\n    ScrollableListItem,\n    ScrollableListItemValue,\n    ScrollableListPropsWithRef,\n} from '@/components/Listbox/ScrollableList';\nimport { getId } from '@/components/Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '@/components/Listbox/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '@/utils/dom';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport type { ComboboxProps } from './Combobox';\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: React.LegacyRef<HTMLButtonElement> };\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    // Sync input text when `value` changes externally, during render (not in an effect) so it's correct before the\n    // \"show listbox\" effect below — otherwise a one-render stale-text window can open the popover on reset.\n    const [prevValue, setPrevValue] = React.useState(value);\n    if (value !== prevValue) {\n        setPrevValue(value);\n\n        if (value !== undefined) {\n            // Compare rendered values to handle valueRenderer (e.g. \"1000\" renders as \"1000 - Account Name\").\n            const renderedValue = convertToInputValue(value);\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        } else if (prevValue !== undefined && inputValue === convertToInputValue(prevValue) && inputValue !== '') {\n            // `value` was cleared externally and the input still shows its previous rendered text (not user-typed),\n            // so clear it. Text the user typed never matches the previous render, so it's preserved.\n            setInputValue('');\n        }\n    }\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        // `value` commits one render after the input on Tab/select; without it in the deps the guard\n        // reopens the popover with a stale `value` and never re-runs to close it. EC-83328\n    }, [inputValue, data, value]);\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/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';\n\nimport type { CalendarProps, InputProps as BaseInputProps } from '@/components';\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { format, parse, parseFromCustomString } from '@/utils/date';\nimport { setInputValueByRef } from '@/utils/input';\n\nimport type { DatepickerProps } from './Datepicker';\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,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;;"}
+{"version":3,"file":"useDatepicker.cjs","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\n\nimport type { CalendarProps, InputProps as BaseInputProps } from '@/components';\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { format, parse, parseFromCustomString } from '@/utils/date';\nimport { setInputValueByRef } from '@/utils/input';\n\nimport type { DatepickerProps } from './Datepicker';\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            // can happen if you type a disabled date in input.\n            return isMatch(originalValueAsDate, calendar?.disabledDays);\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,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;AAE/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.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';\n\nimport type { CalendarProps, InputProps as BaseInputProps } from '@/components';\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { format, parse, parseFromCustomString } from '@/utils/date';\nimport { setInputValueByRef } from '@/utils/input';\n\nimport type { DatepickerProps } from './Datepicker';\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":";;;;;;AAiBO,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;"}
+{"version":3,"file":"useDatepicker.js","sources":["../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isMatch } from 'react-day-picker';\n\nimport type { CalendarProps, InputProps as BaseInputProps } from '@/components';\nimport { useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { format, parse, parseFromCustomString } from '@/utils/date';\nimport { setInputValueByRef } from '@/utils/input';\n\nimport type { DatepickerProps } from './Datepicker';\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            // can happen if you type a disabled date in input.\n            return isMatch(originalValueAsDate, calendar?.disabledDays);\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":";;;;;;AAiBO,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;AAE/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;"}

package/dist/components/Dialog/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\n\nimport type { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    /** Stable ref to the dialog popup element. */\n    popupRef: React.RefObject<HTMLElement | null> | null;\n    props: Record<string, any>;\n    /** Forwarded ref from `<Dialog>` — attached to the Trigger button. */\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    popupRef: null,\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,gBAAgBA,iBAAM,cAA6B;AAAA,EAC5D,eAAe;AAAA,EACf,WAAW;AAAA,EACX,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,MAAM;AAAA,IAAC;AAAA,EAAA;AAAA,EAEnB,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAEX,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU;AAAA,EACV,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AAAA,EACjB,MAAM;AACV,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAOA,iBAAM,WAAW,aAAa;AACzC;;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\n\nimport type { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    /** Stable ref to the dialog popup element. */\n    popupRef: React.RefObject<HTMLElement | null> | null;\n    props: Record<string, unknown>;\n    /** Forwarded ref from `<Dialog>` — attached to the Trigger button. */\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    popupRef: null,\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,gBAAgBA,iBAAM,cAA6B;AAAA,EAC5D,eAAe;AAAA,EACf,WAAW;AAAA,EACX,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,MAAM;AAAA,IAAC;AAAA,EAAA;AAAA,EAEnB,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAEX,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU;AAAA,EACV,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AAAA,EACjB,MAAM;AACV,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAOA,iBAAM,WAAW,aAAa;AACzC;;;"}

package/dist/components/Dialog/Context.d.ts

@@ -14,7 +14,7 @@ export type DialogContext = {
     onClose?: () => void;
     /** Stable ref to the dialog popup element. */
     popupRef: React.RefObject<HTMLElement | null> | null;
-    props: Record<string, any>;
+    props: Record<string, unknown>;
     /** Forwarded ref from `<Dialog>` — attached to the Trigger button. */
     ref: React.Ref<HTMLElement>;
     showCloseButton: boolean;

package/dist/components/Dialog/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\n\nimport type { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    /** Stable ref to the dialog popup element. */\n    popupRef: React.RefObject<HTMLElement | null> | null;\n    props: Record<string, any>;\n    /** Forwarded ref from `<Dialog>` — attached to the Trigger button. */\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    popupRef: null,\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":[],"mappings":";AA0BO,MAAM,gBAAgB,MAAM,cAA6B;AAAA,EAC5D,eAAe;AAAA,EACf,WAAW;AAAA,EACX,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,MAAM;AAAA,IAAC;AAAA,EAAA;AAAA,EAEnB,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAEX,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU;AAAA,EACV,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AAAA,EACjB,MAAM;AACV,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAO,MAAM,WAAW,aAAa;AACzC;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* oxlint-disable no-empty-function */\nimport * as React from 'react';\n\nimport type { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    /** Stable ref to the dialog popup element. */\n    popupRef: React.RefObject<HTMLElement | null> | null;\n    props: Record<string, unknown>;\n    /** Forwarded ref from `<Dialog>` — attached to the Trigger button. */\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    popupRef: null,\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":[],"mappings":";AA0BO,MAAM,gBAAgB,MAAM,cAA6B;AAAA,EAC5D,eAAe;AAAA,EACf,WAAW;AAAA,EACX,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,MAAM;AAAA,IAAC;AAAA,EAAA;AAAA,EAEnB,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAEX,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU;AAAA,EACV,OAAO,CAAA;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AAAA,EACjB,MAAM;AACV,CAAC;AAEM,MAAM,mBAAmB,MAAM;AAClC,SAAO,MAAM,WAAW,aAAa;AACzC;"}

package/dist/components/Dialog/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Backdrop, LegacyIconButton, useLocalization } from '@/components';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.MutableRefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["React","DialogPrimitive","dialog","useCurrentDialog","RenderPropWrapper","mergeRefs","useDraggable","useLocalization","DIALOG_POSITION_CLASSNAMES","DIALOG_SIZE_CLASSNAME","Backdrop","LegacyIconButton"],"mappings":"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"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Backdrop, LegacyIconButton, useLocalization } from '@/components';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.RefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["React","DialogPrimitive","dialog","useCurrentDialog","RenderPropWrapper","mergeRefs","useDraggable","useLocalization","DIALOG_POSITION_CLASSNAMES","DIALOG_SIZE_CLASSNAME","Backdrop","LegacyIconButton"],"mappings":"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"}

package/dist/components/Dialog/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Backdrop, LegacyIconButton, useLocalization } from '@/components';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.MutableRefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["DialogPrimitive","RenderPropWrapper"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { Backdrop, LegacyIconButton, useLocalization } from '@/components';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.RefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["DialogPrimitive","RenderPropWrapper"],"mappings":"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"}

package/dist/components/Drawer/components/Content.cjs

@@ -98,7 +98,7 @@ const Content = React.forwardRef(function Content2(props, externalRef) {
     if (containerWidth) {
       return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
     }
-    return;
+    return void 0;
   }, [containerWidth, position]);
   React.useImperativeHandle(
     containerRef,

package/dist/components/Drawer/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n\n        return undefined;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}

package/dist/components/Drawer/components/Content.js

@@ -96,7 +96,7 @@ const Content = React__default.forwardRef(function Content2(props, externalRef)
     if (containerWidth) {
       return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
     }
-    return;
+    return void 0;
   }, [containerWidth, position]);
   React__default.useImperativeHandle(
     containerRef,

package/dist/components/Drawer/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["React","RenderPropWrapper","DrawerPrimitive","Actions","InnerContent","Content","contentClassName","dragHandlerClassName"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n\n        return undefined;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["React","RenderPropWrapper","DrawerPrimitive","Actions","InnerContent","Content","contentClassName","dragHandlerClassName"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa;AACnB,MAAM,aAAa;AAOnB,MAAM,oBAAoBA,eAAM,WAAW,SAASC,mBAAkB,EAAE,UAAU,SAAS,YAAA,GAAoB,KAAK;AAChH,QAAM,QAAQ,MAAM;AAChB,YAAQ,IAAI,YAAY,OAAO,CAAC;AAAA,EACpC;AAEA,SAAO,SAAS,EAAE,OAAO,KAAK,GAAG,aAAa;AAClD,CAAC;AAGM,MAAM,QAAQD,eAAM,WAAW,SAAS,YAAY,OAAyB,aAA4C;AAC5H,QAAM,EAAE,WAAW,UAAU,GAAG,eAAe;AAC/C,QAAM,MAAM,aAAiC,WAAW;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,CAAA,CAAE;AAC3C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,EAAE,YAAA,IAAgB,iBAAA;AAOxB,QAAM,QAAQ,GAAG,4FAA4F,SAAS;AAEtHA,iBAAM,UAAU,MAAM;AAClB,UAAM,SAAS,KAAK,SAAS,QAAQ,sBAAsB;AAG3D,UAAM,eAAe;AAErB,UAAM,cAAwC,QAAQ,cAAc,gBAAgB,MAAM,OAAO,KAAK,IAAI,KAAK;AAC/G,UAAM,mBAAmB,aAAa,eAAe;AACrD,UAAM,yBAAyB;AAE/B,UAAM,iBAAyC,QAAQ,cAAc,yCAAyC,KAAK;AACnH,UAAM,sBAAsB,gBAAgB,eAAe;AAC3D,UAAM,4BAA4B;AAElC,UAAM,cACF,mBAAmB,sBAAsB,yBAAyB,4BAA4B;AAElG,aAAS,EAAE,aAAa;AAAA,EAC5B,GAAG,CAAC,KAAK,MAAM,OAAO,KAAK,CAAC;AAE5B,SACIA,+BAAA,cAACE,OAAgB,OAAhB,EAAsB,WAAW,OAAQ,GAAG,YAAY,IAAA,GACpD,cACGF,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EAAA,IAEb,MAMJA,+BAAA,cAAC,QAAA,EAAK,WAAU,+CAA8C,SACzD,QACL,CACJ;AAER,CAAC;AAGM,MAAM,SAASA,eAAM,WAAW,SAAS,aAAa,OAA0B,KAAgC;AACnH,QAAM,EAAE,WAAW,IAAI,GAAG,eAAe;AAIzC,QAAM,QAAQ,GAAG,sEAAsE,MAAM,SAAS;AACtG,sDAAQ,OAAA,EAAK,GAAG,YAAY,WAAW,OAAO,KAAU;AAC5D,CAAC;AAEM,MAAM,UAAUA,eAAM,WAAW,SAASG,SAAQ,OAAmB,KAAgC;AACxG,QAAM,EAAE,WAAW,GAAG,WAAA,IAAe;AACrC,QAAM,QAAQ,GAAG,kDAAkD,SAAS;AAE5E,SAAOH,+BAAA,cAAC,SAAK,GAAG,YAAY,WAAW,OAAO,IAAG,uBAAsB,IAAA,CAAU;AACrF,CAAC;AAMM,MAAM,QAAQA,eAAM,WAAW,SAAS,YAAY,OAAyB,KAAmC;AACnH,QAAM,EAAE,QAAA,IAAY,iBAAA;AAEpB,QAAM,EAAE,UAAU,GAAG,UAAA,IAAc;AAEnC,SAAOA,+BAAA,cAACE,OAAgB,OAAhB,EAAuB,GAAG,WAAW,SAAS,SAAS,KAAU,QAAQ,SAAA,CAAU;AAC/F,CAAC;AAQM,MAAM,eAAeF,eAAM,WAAW,SAASI,cAClD,OACA,KACF;AACE,QAAM,EAAE,WAAW,UAAU,GAAG,eAAe;AAC/C,SACIJ,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,GAAG,wCAAwC,SAAS,GAAG,OACnFA,+BAAA,cAAC,OAAA,EAAI,WAAU,wCAAsC,QAAS,CAClE;AAER,CAAC;AAOM,MAAM,UAAUA,eAAM,WAAW,SAASK,SAAQ,OAA2B,aAAwC;AACxH,QAAM,EAAE,cAAc,MAAM,UAAU,SAAS,iBAAiB,OAAA,IAAW,iBAAA;AAC3E,QAAM,EAAE,WAAW,UAAU,GAAG,eAAe;AAC/C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,MAAM,aAA6B,WAAW;AAEpD,QAAM,aAAaL,eAAM,OAAO,IAAI;AAIpC,QAAM,OAAO,eAAA;AACb,MAAI;AAEJ,MAAI,MAAM;AACN,iBAAa,MAAM;AACf,WAAK,MAAA;AAAA,IACT;AAAA,EACJ;AAEA,QAAM,qBAA6BA,eAAM,QAAQ,MAAM,GAAG,6BAA6B,OAAO,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAExH,QAAM,EAAE,kBAAkB,qBAAA,IAAyBA,eAAM,QAAQ,MAAM;AACnE,UAAMM,oBAAmB,2BAA2B,MAAM,OAAO;AACjE,UAAMC,wBAA+B,+BAAA;AACrC,WAAO,EAAE,kBAAAD,mBAAkB,sBAAAC,sBAAAA;AAAAA,EAC/B,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,QAAM,CAAC,gBAAgB,iBAAiB,IAAIP,eAAM,SAAA;AAGlD,QAAM,iBAAiBA,eAAM,OAAuB,IAAI;AAExD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EAAA,IACA,aAAa,aAA6B,cAAc,CAAC;AAE7D,QAAM,eAAeA,eAAM,QAAQ,MAA0B;AACzD,QAAI,gBAAgB;AAChB,aAAO,KAAK,IAAI,YAAY,KAAK,IAAI,YAAY,iBAAiB,SAAS,KAAK,CAAC,CAAC;AAAA,IACtF;AAEA,WAAO;AAAA,EACX,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7BA,iBAAM;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACH,QAAQ,MAAM;AACV,8BAAsB,MAAM;AACxB,cAAI,WAAW,SAAS;AACpB,8BAAmB,WAAW,SAAyB,WAAW;AAAA,UACtE;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,IAAA;AAAA,IAEJ,CAAA;AAAA,EAAC;AAGLA,iBAAM,UAAU,MAAM;AAClB,QAAI,UAAU;AACV,eAAS,SAAS,CAAC;AAAA,IACvB;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEbA,iBAAM,UAAU,MAAM;AAClB,QAAI,CAAC,YAAY,cAAc;AAC3B,wBAAkB,YAAY;AAC9B,oBAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,MAAI;AAEJ,MAAI,OAAO,aAAa,YAAY;AAChC,aACIA,+BAAA,cAAC,OAAA,MACGA,+BAAA,cAAC,mBAAA,MAAmB,QAAS,CACjC;AAAA,EAER,OAAO;AACH,aAAS;AAAA,EACb;AAEA,QAAM,UACFA,+BAAA,cAAC,OAAA,EAAI,KAAK,YAAY,aAAU,UAAS,WAAW,sBAC/C,QACDA,+BAAA,cAAC,OAAA,EAAI,WAAW,sBAAuB,GAAG,iBAAiB,eAAY,kBAAiB,KAAK,eAAA,GACxF,WAAWA,+BAAA,cAAC,SAAI,eAAY,mBAAkB,WAAU,uCAAsC,IAAK,IACxG,GACC,+DACI,OAAA,MACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,IAAA;AAAA,EAAA,CAEb,IACA,IACR;AAGJ,MAAI,CAAC,QAAQ;AACT,WAAO;AAAA,EACX;AAEA,SACIA,+BAAA,cAACE,OAAgB,QAAhB,EAAuB,WAAW,UAAU,QAAW,WAAU,SAAA,GAC7D,YAAY,YACTF,+BAAA;AAAA,IAACE,OAAgB;AAAA,IAAhB;AAAA,MACG,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,EAAA,IAEd,MACJF,+BAAA,cAACE,OAAgB,UAAhB,EAAyB,WAAU,YAChCF,+BAAA;AAAA,IAACE,OAAgB;AAAA,IAAhB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,OAAO,EAAE,OAAO,aAAA;AAAA,IAAa;AAAA,IAC7BF,+BAAA,cAACE,OAAgB,SAAhB,MAAyB,OAAQ;AAAA,EAAA,CAE1C,CACJ;AAER,CAAC;"}

package/dist/components/Drawer/useDrawerStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerStack.cjs","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) | undefined> | undefined;\n\ntype Props = {\n    open: boolean | undefined;\n    setOpen: (open: boolean) => void;\n    onClose?: () => void;\n    onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n    const onCloseRef = React.useRef<(() => void) | undefined>(undefined);\n\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [setOpen, onClose]);\n\n    React.useLayoutEffect(() => {\n        onCloseRef.current = close;\n    }, [close]);\n\n    React.useEffect(() => {\n        if (open) {\n            onOpen();\n\n            if (drawerStack !== undefined) {\n                drawerStack.current?.();\n            }\n            drawerStack = onCloseRef;\n        } else if (drawerStack === onCloseRef) {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            drawerStack = undefined;\n        }\n\n        return () => {\n            if (drawerStack === onCloseRef) {\n                drawerStack = undefined;\n            }\n        };\n    }, [open]);\n};\n"],"names":[],"mappings":";;;AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAa,MAAM,OAAiC,MAAS;AAEnE,QAAM,QAAQ,MAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;;"}
+{"version":3,"file":"useDrawerStack.cjs","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.RefObject<(() => void) | undefined> | undefined;\n\ntype Props = {\n    open: boolean | undefined;\n    setOpen: (open: boolean) => void;\n    onClose?: () => void;\n    onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n    const onCloseRef = React.useRef<(() => void) | undefined>(undefined);\n\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [setOpen, onClose]);\n\n    React.useLayoutEffect(() => {\n        onCloseRef.current = close;\n    }, [close]);\n\n    React.useEffect(() => {\n        if (open) {\n            onOpen();\n\n            if (drawerStack !== undefined) {\n                drawerStack.current?.();\n            }\n            drawerStack = onCloseRef;\n        } else if (drawerStack === onCloseRef) {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            drawerStack = undefined;\n        }\n\n        return () => {\n            if (drawerStack === onCloseRef) {\n                drawerStack = undefined;\n            }\n        };\n    }, [open]);\n};\n"],"names":[],"mappings":";;;AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAa,MAAM,OAAiC,MAAS;AAEnE,QAAM,QAAQ,MAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;;"}

package/dist/components/Drawer/useDrawerStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerStack.js","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) | undefined> | undefined;\n\ntype Props = {\n    open: boolean | undefined;\n    setOpen: (open: boolean) => void;\n    onClose?: () => void;\n    onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n    const onCloseRef = React.useRef<(() => void) | undefined>(undefined);\n\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [setOpen, onClose]);\n\n    React.useLayoutEffect(() => {\n        onCloseRef.current = close;\n    }, [close]);\n\n    React.useEffect(() => {\n        if (open) {\n            onOpen();\n\n            if (drawerStack !== undefined) {\n                drawerStack.current?.();\n            }\n            drawerStack = onCloseRef;\n        } else if (drawerStack === onCloseRef) {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            drawerStack = undefined;\n        }\n\n        return () => {\n            if (drawerStack === onCloseRef) {\n                drawerStack = undefined;\n            }\n        };\n    }, [open]);\n};\n"],"names":["React"],"mappings":";AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAaA,eAAM,OAAiC,MAAS;AAEnE,QAAM,QAAQA,eAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErBA,iBAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEVA,iBAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;"}
+{"version":3,"file":"useDrawerStack.js","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.RefObject<(() => void) | undefined> | undefined;\n\ntype Props = {\n    open: boolean | undefined;\n    setOpen: (open: boolean) => void;\n    onClose?: () => void;\n    onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n    const onCloseRef = React.useRef<(() => void) | undefined>(undefined);\n\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose?.();\n    }, [setOpen, onClose]);\n\n    React.useLayoutEffect(() => {\n        onCloseRef.current = close;\n    }, [close]);\n\n    React.useEffect(() => {\n        if (open) {\n            onOpen();\n\n            if (drawerStack !== undefined) {\n                drawerStack.current?.();\n            }\n            drawerStack = onCloseRef;\n        } else if (drawerStack === onCloseRef) {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            drawerStack = undefined;\n        }\n\n        return () => {\n            if (drawerStack === onCloseRef) {\n                drawerStack = undefined;\n            }\n        };\n    }, [open]);\n};\n"],"names":["React"],"mappings":";AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAaA,eAAM,OAAiC,MAAS;AAEnE,QAAM,QAAQA,eAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErBA,iBAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEVA,iBAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;"}

package/dist/components/Hanger/Hanger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport type { Placement } from '@/types';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","LegacyIconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,sFAAkB,QAAS;AAGnE,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAOA,iCAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAUA,iBAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACID,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,EAAwB,UAAA,GACrBF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAAA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAAA,eAAA,EAAc,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAAA;AAAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACIA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3BA,iCAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvBA,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}
+{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport type { Placement } from '@/types';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.RefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","LegacyIconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,sFAAkB,QAAS;AAGnE,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAOA,iCAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAUA,iBAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACID,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,EAAwB,UAAA,GACrBF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAAA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAAA,eAAA,EAAc,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAAA;AAAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAAA,UAAU,CAAC,WAAkD,GAAG,CAAC;AACrF,QAAM,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACIA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3BA,iCAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvBA,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}