@frontify/fondue 13.4.3 → 13.4.5

package/dist/components/EditableText/EditableText.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    type ChangeEvent,\n    type FocusEvent,\n    type FocusEventHandler,\n    type KeyboardEvent,\n    type KeyboardEventHandler,\n    type ReactElement,\n    cloneElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport enum EditableMode {\n    INPUT = 'INPUT',\n    LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n    fontSize: string;\n    lineHeight: string;\n    letterSpacing: string;\n    minWidth: string;\n    fontWeight: string;\n}\n\n/**\n * isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n */\ninterface EditableOptionProps {\n    isSlimInputField?: boolean;\n    mode?: EditableMode;\n    enableDoubleClick?: boolean;\n    additionalValues?: string;\n    removeBoxPadding?: boolean;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport interface EditableTextProps {\n    children?: ReactElement;\n    onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n    onEditableSave?: (value: string) => void;\n    onModeChange?: (editableState?: EditableMode) => void;\n    options?: EditableOptionProps;\n    /** @deprecated Temporary solution for text with ellipisis in Tree Component */\n    isOverflowing?: boolean;\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport const EditableText = ({\n    onEditableSave,\n    onModeChange,\n    onAdditionalValueSave,\n    children,\n    options,\n    isOverflowing = false,\n    'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n    // Read initial text strings from children\n    const childrenLabel = EditableTextHelper.getLabel(children);\n\n    // use text strings from children in the input field\n    const [inputValue, setInputValue] = useState(childrenLabel);\n    const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n    const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n    const handleSwitchToLabel = (event: KeyboardEvent | FocusEvent) => {\n        setEditableState(EditableMode.LABEL);\n\n        if (onModeChange) {\n            onModeChange(EditableMode.LABEL);\n        }\n        if (options?.additionalValues && onAdditionalValueSave) {\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        }\n        if (onEditableSave) {\n            onEditableSave((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        if (onModeChange) {\n            onModeChange(EditableMode.INPUT);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            handleSwitchToLabel(event);\n        }\n    };\n    const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n    // Set initial state of component if provided in the mode\n    useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n    const clickBehaviour = options?.enableDoubleClick\n        ? {\n              onDoubleClick: handleSwitchToInput(childrenLabel),\n              onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n          }\n        : {\n              onClick: handleSwitchToInput(childrenLabel),\n          };\n\n    // Update Input Style and select input field if visible\n    useEffect(() => {\n        if (childRef.current) {\n            setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n        }\n\n        if (editableState === EditableMode.INPUT) {\n            inputRef.current?.select();\n        }\n    }, [editableState, inputRef, children]);\n\n    const childRef = useRef();\n\n    // Clone Child and add ref to Children\n    const ChildrenWithRef =\n        children &&\n        // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs\n        cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n        >\n            {editableState === EditableMode.INPUT ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center',\n                        options?.isSlimInputField === true\n                            ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n                            : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                    ])}\n                >\n                    <div\n                        data-test-id=\"editable-input\"\n                        className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n                    >\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                options?.isSlimInputField === true\n                                    ? 'focus-visible:tw-outline-none'\n                                    : FOCUS_VISIBLE_STYLE,\n                                'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n                                options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n                            ])}\n                            style={inputStyling}\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onKeyDown={handleKeyDown}\n                            onBlur={handleBlur}\n                        />\n                        <span\n                            aria-hidden=\"true\"\n                            className={merge([\n                                'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n                                isOverflowing && 'tw-w-0',\n                            ])}\n                            style={inputStyling}\n                        >\n                            {inputValue}\n                        </span>\n                    </div>\n                </div>\n            ) : null}\n            <button\n                type=\"button\"\n                style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n                className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n                {...clickBehaviour}\n                data-test-id={'node-link-name'}\n                aria-pressed=\"false\"\n            >\n                {ChildrenWithRef}\n            </button>\n        </div>\n    );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":"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"}
+{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    type ChangeEvent,\n    type FocusEvent,\n    type FocusEventHandler,\n    type KeyboardEvent,\n    type KeyboardEventHandler,\n    type ReactElement,\n    cloneElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport enum EditableMode {\n    INPUT = 'INPUT',\n    LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n    fontSize: string;\n    lineHeight: string;\n    letterSpacing: string;\n    minWidth: string;\n    fontWeight: string;\n}\n\n/**\n * isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n */\ninterface EditableOptionProps {\n    isSlimInputField?: boolean;\n    mode?: EditableMode;\n    enableDoubleClick?: boolean;\n    additionalValues?: string;\n    removeBoxPadding?: boolean;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport interface EditableTextProps {\n    children?: ReactElement;\n    onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n    onEditableSave?: (value: string) => void;\n    onModeChange?: (editableState?: EditableMode) => void;\n    options?: EditableOptionProps;\n    /** @deprecated Temporary solution for text with ellipisis in Tree Component */\n    isOverflowing?: boolean;\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport const EditableText = ({\n    onEditableSave,\n    onModeChange,\n    onAdditionalValueSave,\n    children,\n    options,\n    isOverflowing = false,\n    'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n    // Read initial text strings from children\n    const childrenLabel = EditableTextHelper.getLabel(children);\n\n    // use text strings from children in the input field\n    const [inputValue, setInputValue] = useState(childrenLabel);\n    const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n    const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n    const handleSwitchToLabel = (event: KeyboardEvent | FocusEvent) => {\n        setEditableState(EditableMode.LABEL);\n\n        if (onModeChange) {\n            onModeChange(EditableMode.LABEL);\n        }\n        if (options?.additionalValues && onAdditionalValueSave) {\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        }\n        if (onEditableSave) {\n            onEditableSave((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        if (onModeChange) {\n            onModeChange(EditableMode.INPUT);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            handleSwitchToLabel(event);\n        }\n    };\n    const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n    // Set initial state of component if provided in the mode\n    useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n    const clickBehaviour = options?.enableDoubleClick\n        ? {\n              onDoubleClick: handleSwitchToInput(childrenLabel),\n              onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n          }\n        : {\n              onClick: handleSwitchToInput(childrenLabel),\n          };\n\n    // Update Input Style and select input field if visible\n    useEffect(() => {\n        if (childRef.current) {\n            setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n        }\n\n        if (editableState === EditableMode.INPUT) {\n            inputRef.current?.select();\n        }\n    }, [editableState, inputRef, children]);\n\n    const childRef = useRef();\n\n    // Clone Child and add ref to Children\n    const ChildrenWithRef =\n        children &&\n        // eslint-disable-next-line @eslint-react/no-clone-element, @eslint-react/refs\n        cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n        >\n            {editableState === EditableMode.INPUT ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center',\n                        options?.isSlimInputField === true\n                            ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n                            : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                    ])}\n                >\n                    <div\n                        data-test-id=\"editable-input\"\n                        className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n                    >\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                options?.isSlimInputField === true\n                                    ? 'focus-visible:tw-outline-none'\n                                    : FOCUS_VISIBLE_STYLE,\n                                'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n                                options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n                            ])}\n                            style={inputStyling}\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onKeyDown={handleKeyDown}\n                            onBlur={handleBlur}\n                        />\n                        <span\n                            aria-hidden=\"true\"\n                            className={merge([\n                                'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n                                isOverflowing && 'tw-w-0',\n                            ])}\n                            style={inputStyling}\n                        >\n                            {inputValue}\n                        </span>\n                    </div>\n                </div>\n            ) : null}\n            <button\n                type=\"button\"\n                style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n                className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n                {...clickBehaviour}\n                data-test-id={'node-link-name'}\n                aria-pressed=\"false\"\n            >\n                {ChildrenWithRef}\n            </button>\n        </div>\n    );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":"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"}

package/dist/components/FilterableMultiSelect/FilterableMultiSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterableMultiSelect.es.js","sources":["../../../src/components/FilterableMultiSelect/FilterableMultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport enum FilterableMultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport enum FilterableMultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport type FilterableMultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport type FilterableMultiSelectProps = {\n    items: FilterableMultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: FilterableMultiSelectType;\n    size?: FilterableMultiSelectSize;\n    validation?: Validation;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n    emphasis?: TriggerEmphasis;\n    enablePortal?: boolean;\n    filterLabel?: string;\n    emptyFilteredResultsLabel?: string;\n};\n\ntype FilterableMultiSelectCheckboxItem = {\n    label: string;\n    value: string;\n    avatar?: ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport const FilterableMultiSelect = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    type = FilterableMultiSelectType.Default,\n    size = FilterableMultiSelectSize.Medium,\n    validation = Validation.Default,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n    emphasis = TriggerEmphasis.Default,\n    enablePortal = true,\n    filterLabel,\n    emptyFilteredResultsLabel,\n}: FilterableMultiSelectProps): ReactElement => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<FilterableMultiSelectCheckboxItem[]>([]);\n    const [searchTerm, setSearchTerm] = useState<string>('');\n\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const multiSelectContentId = useId();\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpaceBarToggle = (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.code === 'Space') {\n            toggleOpen();\n        }\n    };\n\n    const getTagType = () => {\n        if (!open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    useEffect(() => {\n        setMultiSelectMenuRef(multiSelectRef?.current as HTMLDivElement);\n    }, []);\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...item, label: item.value, state: CheckboxState.Mixed };\n                }\n\n                return { ...item, label: item.value };\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const handleFilterChange = useCallback(\n        (newValue: string) => {\n            setSearchTerm(newValue);\n\n            setCheckboxes(\n                items.reduce((acc: FilterableMultiSelectCheckboxItem[], item) => {\n                    if (\n                        item.isCategory ||\n                        item.isDivider ||\n                        item.value.toLowerCase().includes(newValue.toLowerCase())\n                    ) {\n                        if (indeterminateItemKeys?.includes(item.value)) {\n                            return [...acc, { ...item, label: item.value, state: CheckboxState.Mixed }];\n                        }\n\n                        return [...acc, { ...item, label: item.value }];\n                    }\n                    return acc;\n                }, []),\n            );\n        },\n        [indeterminateItemKeys, items],\n    );\n\n    useEffect(() => {\n        if (!open) {\n            handleFilterChange('');\n        }\n    }, [open, handleFilterChange]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const updatePopper = async () => {\n            if (popperInstance.update) {\n                await popperInstance.update();\n            }\n        };\n\n        updatePopper().catch(console.error);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={toggleOpen}\n                        role=\"combobox\"\n                        aria-expanded={open}\n                        aria-controls={multiSelectContentId}\n                        aria-label={ariaLabel}\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpaceBarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {label && hasSelectedItems && (\n                                <span className=\"tw-body-medium-strong tw-text-primary\">{label}</span>\n                            )}\n                            {type === FilterableMultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={disabled ? undefined : () => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === FilterableMultiSelectType.Summarized &&\n                                (hasSelectedItems || summarizedLabelFromProps) && (\n                                    <Tag\n                                        type={getTagType()}\n                                        label={summarizedLabel}\n                                        size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={\n                                            indeterminateItemKeys?.length === 0\n                                                ? () => onSelectionChange([])\n                                                : undefined\n                                        }\n                                    />\n                                )}\n\n                            {activeItemKeys.length === 0 && placeholder && (\n                                <span className=\"tw-body-medium tw-text-secondary\">{placeholder}</span>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </Trigger>\n\n            {open && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        id={multiSelectContentId}\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div className=\"tw-p-4 tw-pb-0\">\n                                <TextInput\n                                    value={searchTerm}\n                                    placeholder={filterLabel}\n                                    clearable\n                                    onChange={handleFilterChange}\n                                    focusOnMount\n                                />\n                            </div>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                {checkboxes.length > 0 && (\n                                    <Checklist\n                                        activeValues={activeItemKeys.map((key) => key.toString())}\n                                        setActiveValues={onSelectionChange}\n                                        checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                        direction={ChecklistDirection.Vertical}\n                                        ariaLabel={ariaLabel}\n                                    />\n                                )}\n\n                                {checkboxes.length === 0 && searchTerm !== '' && (\n                                    <span className=\"tw-body-small tw-text-secondary\">{emptyFilteredResultsLabel}</span>\n                                )}\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </div>\n    );\n};\nFilterableMultiSelect.displayName = 'FondueFilterableMultiSelect';\n"],"names":["FilterableMultiSelectType","FilterableMultiSelectSize","FilterableMultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","filterLabel","emptyFilteredResultsLabel","open","setOpen","useState","checkboxes","setCheckboxes","searchTerm","setSearchTerm","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","multiSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpaceBarToggle","event","getTagType","TagType","useEffect","item","CheckboxState","handleFilterChange","useCallback","newValue","acc","popperInstance","usePopper","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","TextInput","Checklist","ChecklistDirection"],"mappings":"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"}
+{"version":3,"file":"FilterableMultiSelect.es.js","sources":["../../../src/components/FilterableMultiSelect/FilterableMultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport enum FilterableMultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport enum FilterableMultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport type FilterableMultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport type FilterableMultiSelectProps = {\n    items: FilterableMultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: FilterableMultiSelectType;\n    size?: FilterableMultiSelectSize;\n    validation?: Validation;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n    emphasis?: TriggerEmphasis;\n    enablePortal?: boolean;\n    filterLabel?: string;\n    emptyFilteredResultsLabel?: string;\n};\n\ntype FilterableMultiSelectCheckboxItem = {\n    label: string;\n    value: string;\n    avatar?: ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport const FilterableMultiSelect = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    type = FilterableMultiSelectType.Default,\n    size = FilterableMultiSelectSize.Medium,\n    validation = Validation.Default,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n    emphasis = TriggerEmphasis.Default,\n    enablePortal = true,\n    filterLabel,\n    emptyFilteredResultsLabel,\n}: FilterableMultiSelectProps): ReactElement => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<FilterableMultiSelectCheckboxItem[]>([]);\n    const [searchTerm, setSearchTerm] = useState<string>('');\n\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const multiSelectContentId = useId();\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpaceBarToggle = (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.code === 'Space') {\n            toggleOpen();\n        }\n    };\n\n    const getTagType = () => {\n        if (!open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    useEffect(() => {\n        setMultiSelectMenuRef(multiSelectRef?.current);\n    }, []);\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...item, label: item.value, state: CheckboxState.Mixed };\n                }\n\n                return { ...item, label: item.value };\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const handleFilterChange = useCallback(\n        (newValue: string) => {\n            setSearchTerm(newValue);\n\n            setCheckboxes(\n                items.reduce((acc: FilterableMultiSelectCheckboxItem[], item) => {\n                    if (\n                        item.isCategory ||\n                        item.isDivider ||\n                        item.value.toLowerCase().includes(newValue.toLowerCase())\n                    ) {\n                        if (indeterminateItemKeys?.includes(item.value)) {\n                            return [...acc, { ...item, label: item.value, state: CheckboxState.Mixed }];\n                        }\n\n                        return [...acc, { ...item, label: item.value }];\n                    }\n                    return acc;\n                }, []),\n            );\n        },\n        [indeterminateItemKeys, items],\n    );\n\n    useEffect(() => {\n        if (!open) {\n            handleFilterChange('');\n        }\n    }, [open, handleFilterChange]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const updatePopper = async () => {\n            if (popperInstance.update) {\n                await popperInstance.update();\n            }\n        };\n\n        updatePopper().catch(console.error);\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={toggleOpen}\n                        role=\"combobox\"\n                        aria-expanded={open}\n                        aria-controls={multiSelectContentId}\n                        aria-label={ariaLabel}\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpaceBarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {label && hasSelectedItems && (\n                                <span className=\"tw-body-medium-strong tw-text-primary\">{label}</span>\n                            )}\n                            {type === FilterableMultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={disabled ? undefined : () => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === FilterableMultiSelectType.Summarized &&\n                                (hasSelectedItems || summarizedLabelFromProps) && (\n                                    <Tag\n                                        type={getTagType()}\n                                        label={summarizedLabel}\n                                        size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={\n                                            indeterminateItemKeys?.length === 0\n                                                ? () => onSelectionChange([])\n                                                : undefined\n                                        }\n                                    />\n                                )}\n\n                            {activeItemKeys.length === 0 && placeholder && (\n                                <span className=\"tw-body-medium tw-text-secondary\">{placeholder}</span>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </Trigger>\n\n            {open && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        id={multiSelectContentId}\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div className=\"tw-p-4 tw-pb-0\">\n                                <TextInput\n                                    value={searchTerm}\n                                    placeholder={filterLabel}\n                                    clearable\n                                    onChange={handleFilterChange}\n                                    focusOnMount\n                                />\n                            </div>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                {checkboxes.length > 0 && (\n                                    <Checklist\n                                        activeValues={activeItemKeys.map((key) => key.toString())}\n                                        setActiveValues={onSelectionChange}\n                                        checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                        direction={ChecklistDirection.Vertical}\n                                        ariaLabel={ariaLabel}\n                                    />\n                                )}\n\n                                {checkboxes.length === 0 && searchTerm !== '' && (\n                                    <span className=\"tw-body-small tw-text-secondary\">{emptyFilteredResultsLabel}</span>\n                                )}\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </div>\n    );\n};\nFilterableMultiSelect.displayName = 'FondueFilterableMultiSelect';\n"],"names":["FilterableMultiSelectType","FilterableMultiSelectSize","FilterableMultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","filterLabel","emptyFilteredResultsLabel","open","setOpen","useState","checkboxes","setCheckboxes","searchTerm","setSearchTerm","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","multiSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpaceBarToggle","event","getTagType","TagType","useEffect","item","CheckboxState","handleFilterChange","useCallback","newValue","acc","popperInstance","usePopper","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","TextInput","Checklist","ChecklistDirection"],"mappings":"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"}

package/dist/components/LegacyTooltip/LegacyTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyTooltip.es.js","sources":["../../../src/components/LegacyTooltip/LegacyTooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Placement } from '@popperjs/core';\nimport { useLink } from '@react-aria/link';\nimport {\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FocusEvent,\n    type HTMLAttributes,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { Portal } from '@components/Portal/Portal';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BrightHeader, brightHeaderArrowBackgroundColors, type BrightHeaderStyle } from './BrightHeader';\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport type LegacyTooltipProps = {\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactNode;\n    position?: TooltipPosition | 'top' | 'bottom' | 'left' | 'right';\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    withStrongBorder?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n    enablePortal?: boolean;\n    'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n    small: 'tw-pt-2',\n    large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-2',\n    large: 'tw-pb-3',\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum TooltipPosition {\n    Top = 'top',\n    Right = 'right',\n    Bottom = 'bottom',\n    Left = 'left',\n}\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n}\n\nconst placementMap: Record<`${TooltipPosition | 'top' | 'bottom' | 'left' | 'right'}-${TooltipAlignment}`, Placement> =\n    {\n        'top-Start': 'top-start',\n        'bottom-Start': 'bottom-start',\n        'left-Start': 'left-start',\n        'right-Start': 'right-start',\n        'top-Middle': 'top',\n        'right-Middle': 'right',\n        'bottom-Middle': 'bottom',\n        'left-Middle': 'left',\n    };\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-primary';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-primary',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-bg-primary',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-primary',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-primary';\n    }\n};\n\nconst TooltipWrapper = ({\n    enablePortal = false,\n    children,\n}: {\n    enablePortal?: boolean;\n    children?: ReactNode | ReactNode[];\n}) => {\n    if (enablePortal) {\n        return (<Portal>{children}</Portal>) as JSX.Element;\n    }\n\n    return children as JSX.Element;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const LegacyTooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withStrongBorder = false,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    enablePortal = false,\n    hidden = false,\n    'data-test-id': dataTestId = 'tooltip',\n}: LegacyTooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || buttons || heading || headingIcon,\n        [linkUrl, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'eventListeners',\n                options: { scroll: isOpen, resize: isOpen },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event: MouseEvent) => {\n            const hoveredElement = event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                <div ref={setTriggerElementRef} aria-describedby={id} role=\"tooltip\">\n                    {triggerElement}\n                </div>\n            </div>\n            <TooltipWrapper enablePortal={enablePortal}>\n                <div\n                    ref={setTooltipContainerRef}\n                    aria-hidden={shouldPreventTooltipOpening}\n                    className={merge([\n                        'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-primary tw-rounded-md tw-shadow-mid tw-text-primary-on-primary tw-z-[120000]',\n                        !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                        withStrongBorder && 'tw-border tw-border-line-mid',\n                    ])}\n                    data-test-id={dataTestId}\n                    role=\"tooltip\"\n                    id={id}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                    {...openingEvents}\n                >\n                    {brightHeader ? <BrightHeader headerStyle={brightHeader} /> : null}\n                    <div\n                        className={merge([\n                            'tw-px-3 tw-bg-primary tw-rounded-md tw-relative tw-z-[120000]',\n                            hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n                            linkUrl ? paddingsBottom.large : paddingsBottom.small,\n                        ])}\n                    >\n                        {heading ? (\n                            <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                {headingIcon && (\n                                    <span className=\"tw-mr-1.5\">{cloneElement(headingIcon, { size: 20 })}</span>\n                                )}\n                                {heading}\n                            </h4>\n                        ) : null}\n                        <div className=\"tw-flex\">\n                            {tooltipIcon ? (\n                                <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                    {cloneElement(tooltipIcon, { size: 16 })}\n                                </span>\n                            ) : null}\n                            <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                        </div>\n                        {linkUrl ? (\n                            <a\n                                {...linkProps}\n                                data-test-id={`${dataTestId}-link`}\n                                ref={linkRef}\n                                href={linkUrl}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className={merge([\n                                    'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n                                    FOCUS_VISIBLE_STYLE,\n                                ])}\n                            >\n                                {linkLabel ?? 'Click here to learn more.'}\n                            </a>\n                        ) : null}\n                        {buttons ? (\n                            <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                {buttons.length > 0 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                )}\n                                {buttons.length === 2 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                )}\n                            </div>\n                        ) : null}\n                    </div>\n                    {/**\n                     * This container is needed for the arrow element to not be styled by popperJS\n                     * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                     * */}\n                    <div aria-hidden=\"true\">\n                        <div\n                            data-test-id=\"popover-arrow\"\n                            data-popper-arrow={withArrow}\n                            ref={setArrowElement}\n                            style={popperInstance.styles.arrow}\n                            className={merge([\n                                withArrow &&\n                                    'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border',\n                                withArrow && arrowStyling,\n                                withStrongBorder\n                                    ? 'before:tw-border-line-strong'\n                                    : withArrow && 'before:tw-border-line',\n                            ])}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </TooltipWrapper>\n        </>\n    );\n};\nLegacyTooltip.displayName = 'FondueLegacyTooltip';\n"],"names":["paddingsTop","paddingsBottom","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","jsx","Portal","LegacyTooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withStrongBorder","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","jsxs","Fragment","BrightHeader","cloneElement","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"LegacyTooltip.es.js","sources":["../../../src/components/LegacyTooltip/LegacyTooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Placement } from '@popperjs/core';\nimport { useLink } from '@react-aria/link';\nimport {\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FocusEvent,\n    type HTMLAttributes,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { Portal } from '@components/Portal/Portal';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BrightHeader, brightHeaderArrowBackgroundColors, type BrightHeaderStyle } from './BrightHeader';\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport type LegacyTooltipProps = {\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactNode;\n    position?: TooltipPosition | 'top' | 'bottom' | 'left' | 'right';\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    withStrongBorder?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n    enablePortal?: boolean;\n    'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n    small: 'tw-pt-2',\n    large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-2',\n    large: 'tw-pb-3',\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum TooltipPosition {\n    Top = 'top',\n    Right = 'right',\n    Bottom = 'bottom',\n    Left = 'left',\n}\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n}\n\nconst placementMap: Record<`${TooltipPosition | 'top' | 'bottom' | 'left' | 'right'}-${TooltipAlignment}`, Placement> =\n    {\n        'top-Start': 'top-start',\n        'bottom-Start': 'bottom-start',\n        'left-Start': 'left-start',\n        'right-Start': 'right-start',\n        'top-Middle': 'top',\n        'right-Middle': 'right',\n        'bottom-Middle': 'bottom',\n        'left-Middle': 'left',\n    };\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-primary';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-primary',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-bg-primary',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-primary',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-primary';\n    }\n};\n\nconst TooltipWrapper = ({\n    enablePortal = false,\n    children,\n}: {\n    enablePortal?: boolean;\n    children?: ReactNode | ReactNode[];\n}) => {\n    if (enablePortal) {\n        return (<Portal>{children}</Portal>) as JSX.Element;\n    }\n\n    return children as JSX.Element;\n};\n\n/**\n * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n */\nexport const LegacyTooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withStrongBorder = false,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    enablePortal = false,\n    hidden = false,\n    'data-test-id': dataTestId = 'tooltip',\n}: LegacyTooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || buttons || heading || headingIcon,\n        [linkUrl, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'eventListeners',\n                options: { scroll: isOpen, resize: isOpen },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event: MouseEvent) => {\n            const hoveredElement = event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                <div ref={setTriggerElementRef} aria-describedby={id} role=\"tooltip\">\n                    {triggerElement}\n                </div>\n            </div>\n            <TooltipWrapper enablePortal={enablePortal}>\n                <div\n                    ref={setTooltipContainerRef}\n                    aria-hidden={shouldPreventTooltipOpening}\n                    className={merge([\n                        'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-primary tw-rounded-md tw-shadow-mid tw-text-primary-on-primary tw-z-[120000]',\n                        !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                        withStrongBorder && 'tw-border tw-border-line-mid',\n                    ])}\n                    data-test-id={dataTestId}\n                    role=\"tooltip\"\n                    id={id}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                    {...openingEvents}\n                >\n                    {brightHeader ? <BrightHeader headerStyle={brightHeader} /> : null}\n                    <div\n                        className={merge([\n                            'tw-px-3 tw-bg-primary tw-rounded-md tw-relative tw-z-[120000]',\n                            hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n                            linkUrl ? paddingsBottom.large : paddingsBottom.small,\n                        ])}\n                    >\n                        {heading ? (\n                            <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                {headingIcon && (\n                                    <span className=\"tw-mr-1.5\">{cloneElement(headingIcon, { size: 20 })}</span>\n                                )}\n                                {heading}\n                            </h4>\n                        ) : null}\n                        <div className=\"tw-flex\">\n                            {tooltipIcon ? (\n                                <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                    {cloneElement(tooltipIcon, { size: 16 })}\n                                </span>\n                            ) : null}\n                            <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                        </div>\n                        {linkUrl ? (\n                            <a\n                                {...linkProps}\n                                data-test-id={`${dataTestId}-link`}\n                                ref={linkRef}\n                                href={linkUrl}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className={merge([\n                                    'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n                                    FOCUS_VISIBLE_STYLE,\n                                ])}\n                            >\n                                {linkLabel ?? 'Click here to learn more.'}\n                            </a>\n                        ) : null}\n                        {buttons ? (\n                            <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                {buttons.length > 0 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                )}\n                                {buttons.length === 2 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                )}\n                            </div>\n                        ) : null}\n                    </div>\n                    {/**\n                     * This container is needed for the arrow element to not be styled by popperJS\n                     * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                     * */}\n                    <div aria-hidden=\"true\">\n                        <div\n                            data-test-id=\"popover-arrow\"\n                            data-popper-arrow={withArrow}\n                            ref={setArrowElement}\n                            style={popperInstance.styles.arrow}\n                            className={merge([\n                                withArrow &&\n                                    'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border',\n                                withArrow && arrowStyling,\n                                withStrongBorder\n                                    ? 'before:tw-border-line-strong'\n                                    : withArrow && 'before:tw-border-line',\n                            ])}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </TooltipWrapper>\n        </>\n    );\n};\nLegacyTooltip.displayName = 'FondueLegacyTooltip';\n"],"names":["paddingsTop","paddingsBottom","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","jsx","Portal","LegacyTooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withStrongBorder","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","jsxs","Fragment","BrightHeader","cloneElement","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}

package/dist/components/Menu/Menu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, type RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuProps = Props;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const Menu = ({\n    triggerRef,\n    children,\n    open = true,\n    offset = [0, 8],\n    onClose,\n    'data-test-id': dataTestId = 'menu',\n}: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    const { dismissibleElementRef } = useClickOutside<HTMLOListElement>(handleClickOutside, [\n        menuOpenerRef as HTMLElement,\n    ]);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n    }, [open]);\n\n    useEffect(() => {\n        if (isMenuOpen && popperInstance.update) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMenuOpen]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n            data-test-id={dataTestId}\n            role={isMenuOpen ? 'navigation' : ''}\n        >\n            <ol ref={dismissibleElementRef} className=\"tw-list-none\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","setMenuOpenerRef","menuContainerRef","setMenuContainerRef","handleClickOutside","useCallback","dismissibleElementRef","useClickOutside","menuKeyboardNavigationAction","useMenuKeyboardNavigation","popperInstance","usePopper","useEffect","trigger","jsx"],"mappings":";;;;;;;AAwBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAKzDC,IAAO,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS,CAAC,GAAG,CAAC;AAAA,EACd,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAiB;AACb,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAI,GAC3C,CAACO,GAAeC,CAAgB,IAAIF,EAA6B,IAAI,GACrE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA6B,IAAI,GAE3EK,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBH,MACjBC,EAAc,EAAK,GACfH,KACAA,EAAA;AAAA,EAGZ,GAAG,CAACK,GAAeH,GAAYF,CAAO,CAAC,GAEjC,EAAE,uBAAAW,EAAA,IAA0BC,EAAkCH,GAAoB;AAAA,IACpFJ;AAAA,EAAA,CACH,GAEKQ,IAA+BC;AAAA,IACjCZ;AAAA,IACAK;AAAA,IACA;AAAA,EAAA,GAGEQ,IAAiBC,EAAUX,GAAeE,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,MAEb;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAE/C,GAAG,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EACtB,GAAG,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACZ,IAAIf,KAAca,EAAe,UAC7BA,EAAe,OAAA;AAAA,EAGvB,GAAG,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACZ,IAAIJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACAA,EAAA;AAAA,EAGZ,GAAG,CAACa,GAA8Bb,GAASK,CAAa,CAAC,GAGrD,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW1B,EAAM,CAACD,GAAmBU,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,KAAKM;AAAA,MACL,OAAOH,IAAgBU,EAAe,OAAO,SAAS,CAAA;AAAA,MACrD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAA;AAAA,MACxD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAA,EAAG,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}
+{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, type RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport type MenuProps = Props;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\n/**\n * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.\n */\nexport const Menu = ({\n    triggerRef,\n    children,\n    open = true,\n    offset = [0, 8],\n    onClose,\n    'data-test-id': dataTestId = 'menu',\n}: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    const { dismissibleElementRef } = useClickOutside<HTMLOListElement>(handleClickOutside, [\n        menuOpenerRef as HTMLElement,\n    ]);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n    }, [open]);\n\n    useEffect(() => {\n        if (isMenuOpen && popperInstance.update) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [isMenuOpen]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n            data-test-id={dataTestId}\n            role={isMenuOpen ? 'navigation' : ''}\n        >\n            <ol ref={dismissibleElementRef} className=\"tw-list-none\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","setMenuOpenerRef","menuContainerRef","setMenuContainerRef","handleClickOutside","useCallback","dismissibleElementRef","useClickOutside","menuKeyboardNavigationAction","useMenuKeyboardNavigation","popperInstance","usePopper","useEffect","trigger","jsx"],"mappings":";;;;;;;AAwBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAKzDC,IAAO,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS,CAAC,GAAG,CAAC;AAAA,EACd,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAiB;AACb,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAI,GAC3C,CAACO,GAAeC,CAAgB,IAAIF,EAA6B,IAAI,GACrE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA6B,IAAI,GAE3EK,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBH,MACjBC,EAAc,EAAK,GACfH,KACAA,EAAA;AAAA,EAGZ,GAAG,CAACK,GAAeH,GAAYF,CAAO,CAAC,GAEjC,EAAE,uBAAAW,EAAA,IAA0BC,EAAkCH,GAAoB;AAAA,IACpFJ;AAAA,EAAA,CACH,GAEKQ,IAA+BC;AAAA,IACjCZ;AAAA,IACAK;AAAA,IACA;AAAA,EAAA,GAGEQ,IAAiBC,EAAUX,GAAeE,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,MAEb;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAE/C,GAAG,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EACtB,GAAG,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACZ,IAAIf,KAAca,EAAe,UAC7BA,EAAe,OAAA;AAAA,EAGvB,GAAG,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACZ,IAAIJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACAA,EAAA;AAAA,EAGZ,GAAG,CAACa,GAA8Bb,GAASK,CAAa,CAAC,GAGrD,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW1B,EAAM,CAACD,GAAmBU,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,KAAKM;AAAA,MACL,OAAOH,IAAgBU,EAAe,OAAO,SAAS,CAAA;AAAA,MACrD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAA;AAAA,MACxD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAA,EAAG,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}

package/dist/components/Menu/useMenuKeyboardNavigation.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuKeyboardNavigation.es.js","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useState } from 'react';\n\n/**\n * @deprecated Please use custom keyboard navigation instead.\n */\nexport const useMenuKeyboardNavigation = (\n    isMenuOpened: boolean,\n    menuContainerRef: HTMLElement | null,\n    focusableElementsSelector = 'li > button:not(:disabled)',\n) => {\n    const [currentItemIndex, setCurrentItemIndex] = useState(0);\n    const [itemsElements, setItemsElements] = useState<NodeList>();\n    const [menuKeyboardNavigationAction, setMenuKeyboardNavigationAction] = useState('');\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!itemsElements || !['Tab', 'ArrowDown', 'ArrowUp', 'Escape'].includes(event.key)) {\n                return;\n            }\n\n            const isTab = event.key === 'Tab' && !event.shiftKey;\n            const isShiftTab = event.key === 'Tab' && event.shiftKey;\n            const isEsc = event.key === 'Escape';\n            const shouldMoveDown = isTab || event.key === 'ArrowDown';\n            const shouldMoveUp = isShiftTab || event.key === 'ArrowUp';\n\n            if (\n                (isShiftTab && currentItemIndex <= 0) ||\n                (isTab && currentItemIndex >= itemsElements.length - 1) ||\n                isEsc\n            ) {\n                setMenuKeyboardNavigationAction('CLOSE_MENU');\n                return;\n            }\n\n            if (shouldMoveDown) {\n                setCurrentItemIndex(Math.min(currentItemIndex + 1, itemsElements.length - 1));\n            } else if (shouldMoveUp) {\n                setCurrentItemIndex(Math.max(currentItemIndex - 1, 0));\n            }\n\n            event.preventDefault();\n        },\n        [itemsElements, currentItemIndex],\n    );\n\n    useEffect(() => {\n        if (!isMenuOpened || !menuContainerRef) {\n            return;\n        }\n\n        const focusableItems = menuContainerRef.querySelectorAll(focusableElementsSelector);\n        for (const item of focusableItems) {\n            (item as HTMLButtonElement | HTMLAnchorElement).onkeydown = handleKeyDown;\n        }\n\n        if (!itemsElements && focusableItems.length > 0) {\n            // eslint-disable-next-line react-hooks/set-state-in-effect\n            setItemsElements(focusableItems);\n        }\n    }, [isMenuOpened, menuContainerRef, itemsElements, handleKeyDown, focusableElementsSelector]);\n\n    useEffect(() => {\n        if (!itemsElements) {\n            return;\n        }\n\n        if (itemsElements[currentItemIndex]) {\n            (itemsElements[currentItemIndex] as HTMLButtonElement | HTMLAnchorElement).focus();\n        }\n    }, [currentItemIndex, itemsElements]);\n\n    useEffect(() => {\n        if (!isMenuOpened) {\n            // eslint-disable-next-line react-hooks/set-state-in-effect\n            setItemsElements(undefined);\n            setMenuKeyboardNavigationAction('');\n        }\n\n        setCurrentItemIndex(0);\n    }, [isMenuOpened]);\n\n    return menuKeyboardNavigationAction;\n};\n"],"names":["useMenuKeyboardNavigation","isMenuOpened","menuContainerRef","focusableElementsSelector","currentItemIndex","setCurrentItemIndex","useState","itemsElements","setItemsElements","menuKeyboardNavigationAction","setMenuKeyboardNavigationAction","handleKeyDown","useCallback","event","isTab","isShiftTab","isEsc","shouldMoveDown","shouldMoveUp","useEffect","focusableItems","item"],"mappings":";AAOO,MAAMA,IAA4B,CACrCC,GACAC,GACAC,IAA4B,iCAC3B;AACD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,CAAC,GACpD,CAACC,GAAeC,CAAgB,IAAIF,EAAA,GACpC,CAACG,GAA8BC,CAA+B,IAAIJ,EAAS,EAAE,GAG7EK,IAAgBC;AAAA,IAClB,CAACC,MAAyB;AACtB,UAAI,CAACN,KAAiB,CAAC,CAAC,OAAO,aAAa,WAAW,QAAQ,EAAE,SAASM,EAAM,GAAG;AAC/E;AAGJ,YAAMC,IAAQD,EAAM,QAAQ,SAAS,CAACA,EAAM,UACtCE,IAAaF,EAAM,QAAQ,SAASA,EAAM,UAC1CG,IAAQH,EAAM,QAAQ,UACtBI,IAAiBH,KAASD,EAAM,QAAQ,aACxCK,IAAeH,KAAcF,EAAM,QAAQ;AAEjD,UACKE,KAAcX,KAAoB,KAClCU,KAASV,KAAoBG,EAAc,SAAS,KACrDS,GACF;AACE,QAAAN,EAAgC,YAAY;AAC5C;AAAA,MACJ;AAEA,MAAIO,IACAZ,EAAoB,KAAK,IAAID,IAAmB,GAAGG,EAAc,SAAS,CAAC,CAAC,IACrEW,KACPb,EAAoB,KAAK,IAAID,IAAmB,GAAG,CAAC,CAAC,GAGzDS,EAAM,eAAA;AAAA,IACV;AAAA,IACA,CAACN,GAAeH,CAAgB;AAAA,EAAA;AAGpC,SAAAe,EAAU,MAAM;AACZ,QAAI,CAAClB,KAAgB,CAACC;AAClB;AAGJ,UAAMkB,IAAiBlB,EAAiB,iBAAiBC,CAAyB;AAClF,eAAWkB,KAAQD;AACd,MAAAC,EAA+C,YAAYV;AAGhE,IAAI,CAACJ,KAAiBa,EAAe,SAAS,KAE1CZ,EAAiBY,CAAc;AAAA,EAEvC,GAAG,CAACnB,GAAcC,GAAkBK,GAAeI,GAAeR,CAAyB,CAAC,GAE5FgB,EAAU,MAAM;AACZ,IAAKZ,KAIDA,EAAcH,CAAgB,KAC7BG,EAAcH,CAAgB,EAA4C,MAAA;AAAA,EAEnF,GAAG,CAACA,GAAkBG,CAAa,CAAC,GAEpCY,EAAU,MAAM;AACZ,IAAKlB,MAEDO,EAAiB,MAAS,GAC1BE,EAAgC,EAAE,IAGtCL,EAAoB,CAAC;AAAA,EACzB,GAAG,CAACJ,CAAY,CAAC,GAEVQ;AACX;"}
+{"version":3,"file":"useMenuKeyboardNavigation.es.js","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useState } from 'react';\n\n/**\n * @deprecated Please use custom keyboard navigation instead.\n */\nexport const useMenuKeyboardNavigation = (\n    isMenuOpened: boolean,\n    menuContainerRef: HTMLElement | null,\n    focusableElementsSelector = 'li > button:not(:disabled)',\n) => {\n    const [currentItemIndex, setCurrentItemIndex] = useState(0);\n    const [itemsElements, setItemsElements] = useState<NodeList>();\n    const [menuKeyboardNavigationAction, setMenuKeyboardNavigationAction] = useState('');\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!itemsElements || !['Tab', 'ArrowDown', 'ArrowUp', 'Escape'].includes(event.key)) {\n                return;\n            }\n\n            const isTab = event.key === 'Tab' && !event.shiftKey;\n            const isShiftTab = event.key === 'Tab' && event.shiftKey;\n            const isEsc = event.key === 'Escape';\n            const shouldMoveDown = isTab || event.key === 'ArrowDown';\n            const shouldMoveUp = isShiftTab || event.key === 'ArrowUp';\n\n            if (\n                (isShiftTab && currentItemIndex <= 0) ||\n                (isTab && currentItemIndex >= itemsElements.length - 1) ||\n                isEsc\n            ) {\n                setMenuKeyboardNavigationAction('CLOSE_MENU');\n                return;\n            }\n\n            if (shouldMoveDown) {\n                setCurrentItemIndex(Math.min(currentItemIndex + 1, itemsElements.length - 1));\n            } else if (shouldMoveUp) {\n                setCurrentItemIndex(Math.max(currentItemIndex - 1, 0));\n            }\n\n            event.preventDefault();\n        },\n        [itemsElements, currentItemIndex],\n    );\n\n    useEffect(() => {\n        if (!isMenuOpened || !menuContainerRef) {\n            return;\n        }\n\n        const focusableItems = menuContainerRef.querySelectorAll(focusableElementsSelector);\n        for (const item of focusableItems) {\n            (item as HTMLButtonElement | HTMLAnchorElement).onkeydown = handleKeyDown;\n        }\n\n        if (!itemsElements && focusableItems.length > 0) {\n            // eslint-disable-next-line @eslint-react/set-state-in-effect\n            setItemsElements(focusableItems);\n        }\n    }, [isMenuOpened, menuContainerRef, itemsElements, handleKeyDown, focusableElementsSelector]);\n\n    useEffect(() => {\n        if (!itemsElements) {\n            return;\n        }\n\n        if (itemsElements[currentItemIndex]) {\n            (itemsElements[currentItemIndex] as HTMLButtonElement | HTMLAnchorElement).focus();\n        }\n    }, [currentItemIndex, itemsElements]);\n\n    useEffect(() => {\n        if (!isMenuOpened) {\n            // eslint-disable-next-line @eslint-react/set-state-in-effect\n            setItemsElements(undefined);\n            setMenuKeyboardNavigationAction('');\n        }\n\n        setCurrentItemIndex(0);\n    }, [isMenuOpened]);\n\n    return menuKeyboardNavigationAction;\n};\n"],"names":["useMenuKeyboardNavigation","isMenuOpened","menuContainerRef","focusableElementsSelector","currentItemIndex","setCurrentItemIndex","useState","itemsElements","setItemsElements","menuKeyboardNavigationAction","setMenuKeyboardNavigationAction","handleKeyDown","useCallback","event","isTab","isShiftTab","isEsc","shouldMoveDown","shouldMoveUp","useEffect","focusableItems","item"],"mappings":";AAOO,MAAMA,IAA4B,CACrCC,GACAC,GACAC,IAA4B,iCAC3B;AACD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,CAAC,GACpD,CAACC,GAAeC,CAAgB,IAAIF,EAAA,GACpC,CAACG,GAA8BC,CAA+B,IAAIJ,EAAS,EAAE,GAG7EK,IAAgBC;AAAA,IAClB,CAACC,MAAyB;AACtB,UAAI,CAACN,KAAiB,CAAC,CAAC,OAAO,aAAa,WAAW,QAAQ,EAAE,SAASM,EAAM,GAAG;AAC/E;AAGJ,YAAMC,IAAQD,EAAM,QAAQ,SAAS,CAACA,EAAM,UACtCE,IAAaF,EAAM,QAAQ,SAASA,EAAM,UAC1CG,IAAQH,EAAM,QAAQ,UACtBI,IAAiBH,KAASD,EAAM,QAAQ,aACxCK,IAAeH,KAAcF,EAAM,QAAQ;AAEjD,UACKE,KAAcX,KAAoB,KAClCU,KAASV,KAAoBG,EAAc,SAAS,KACrDS,GACF;AACE,QAAAN,EAAgC,YAAY;AAC5C;AAAA,MACJ;AAEA,MAAIO,IACAZ,EAAoB,KAAK,IAAID,IAAmB,GAAGG,EAAc,SAAS,CAAC,CAAC,IACrEW,KACPb,EAAoB,KAAK,IAAID,IAAmB,GAAG,CAAC,CAAC,GAGzDS,EAAM,eAAA;AAAA,IACV;AAAA,IACA,CAACN,GAAeH,CAAgB;AAAA,EAAA;AAGpC,SAAAe,EAAU,MAAM;AACZ,QAAI,CAAClB,KAAgB,CAACC;AAClB;AAGJ,UAAMkB,IAAiBlB,EAAiB,iBAAiBC,CAAyB;AAClF,eAAWkB,KAAQD;AACd,MAAAC,EAA+C,YAAYV;AAGhE,IAAI,CAACJ,KAAiBa,EAAe,SAAS,KAE1CZ,EAAiBY,CAAc;AAAA,EAEvC,GAAG,CAACnB,GAAcC,GAAkBK,GAAeI,GAAeR,CAAyB,CAAC,GAE5FgB,EAAU,MAAM;AACZ,IAAKZ,KAIDA,EAAcH,CAAgB,KAC7BG,EAAcH,CAAgB,EAA4C,MAAA;AAAA,EAEnF,GAAG,CAACA,GAAkBG,CAAa,CAAC,GAEpCY,EAAU,MAAM;AACZ,IAAKlB,MAEDO,EAAiB,MAAS,GAC1BE,EAAgC,EAAE,IAGtCL,EAAoB,CAAC;AAAA,EACzB,GAAG,CAACJ,CAAY,CAAC,GAEVQ;AACX;"}

package/dist/components/MultiSelect/MultiSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n    emphasis?: TriggerEmphasis;\n    enablePortal?: boolean;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport const MultiSelect = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n    emphasis = TriggerEmphasis.Default,\n    enablePortal = true,\n}: MultiSelectProps): ReactElement => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const muliSelectContentId = useId();\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' || e.code === 'Enter') {\n            toggleOpen();\n        }\n    };\n\n    const getTagType = () => {\n        if (!open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    useEffect(() => {\n        setMultiSelectMenuRef(multiSelectRef?.current as HTMLDivElement);\n    }, []);\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const updatePopper = async () => {\n            if (popperInstance.update) {\n                await popperInstance.update();\n            }\n        };\n\n        updatePopper().catch(console.error);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [activeItemKeys]);\n\n    useLayoutEffect(() => {\n        const handleEscapeKey = (event: globalThis.KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                setOpen(false);\n            }\n        };\n\n        window.addEventListener('keyup', handleEscapeKey);\n\n        return () => {\n            window.removeEventListener('keyup', handleEscapeKey);\n        };\n    }, []);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"combobox\"\n                        aria-expanded={open}\n                        aria-controls={muliSelectContentId}\n                        aria-label={ariaLabel}\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {label && hasSelectedItems && (\n                                <span className=\"tw-body-medium-strong tw-text-primary\">{label}</span>\n                            )}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={disabled ? undefined : () => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {activeItemKeys.length === 0 && placeholder && (\n                                <span className=\"tw-body-medium tw-text-secondary\">{placeholder}</span>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </Trigger>\n\n            {open && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        id={muliSelectContentId}\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","open","setOpen","useState","checkboxes","setCheckboxes","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","muliSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getTagType","TagType","useEffect","item","checkboxBaseItem","CheckboxState","popperInstance","usePopper","useLayoutEffect","handleEscapeKey","event","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","Checklist","ChecklistDirection"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n    emphasis?: TriggerEmphasis;\n    enablePortal?: boolean;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport const MultiSelect = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n    emphasis = TriggerEmphasis.Default,\n    enablePortal = true,\n}: MultiSelectProps): ReactElement => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const muliSelectContentId = useId();\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' || e.code === 'Enter') {\n            toggleOpen();\n        }\n    };\n\n    const getTagType = () => {\n        if (!open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    useEffect(() => {\n        setMultiSelectMenuRef(multiSelectRef?.current);\n    }, []);\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const updatePopper = async () => {\n            if (popperInstance.update) {\n                await popperInstance.update();\n            }\n        };\n\n        updatePopper().catch(console.error);\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [activeItemKeys]);\n\n    useLayoutEffect(() => {\n        const handleEscapeKey = (event: globalThis.KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                setOpen(false);\n            }\n        };\n\n        window.addEventListener('keyup', handleEscapeKey);\n\n        return () => {\n            window.removeEventListener('keyup', handleEscapeKey);\n        };\n    }, []);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"combobox\"\n                        aria-expanded={open}\n                        aria-controls={muliSelectContentId}\n                        aria-label={ariaLabel}\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {label && hasSelectedItems && (\n                                <span className=\"tw-body-medium-strong tw-text-primary\">{label}</span>\n                            )}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={disabled ? undefined : () => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {activeItemKeys.length === 0 && placeholder && (\n                                <span className=\"tw-body-medium tw-text-secondary\">{placeholder}</span>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </Trigger>\n\n            {open && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        id={muliSelectContentId}\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","open","setOpen","useState","checkboxes","setCheckboxes","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","muliSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getTagType","TagType","useEffect","item","checkboxBaseItem","CheckboxState","popperInstance","usePopper","useLayoutEffect","handleEscapeKey","event","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","Checklist","ChecklistDirection"],"mappings":"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"}

package/dist/components/OrderableList/OrderableList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListItemStyle, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n    if (itemA.sort === null && itemB.sort === null) {\n        return 1;\n    }\n    if (itemA.sort === null) {\n        return 1;\n    }\n    if (itemB.sort === null) {\n        return -1;\n    }\n\n    return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n    id: string,\n    newPosition: number | null,\n    items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n    const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n    return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\n/**\n * @deprecated Use the new OrderableList component from @frontify/fondue/components instead.\n */\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    dragHandlerPosition = 'none',\n    enableDragDelay = true,\n    itemStyle,\n    selectedId,\n    renderContent,\n    'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n    const isDraggable = !dragDisabled;\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop: OnTreeDropCallback = (dropArgs) => {\n        onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n    };\n\n    const treeItemStyle = useMemo(() => {\n        return {\n            spacingY: 'small',\n            contentHight: 'content-fit',\n            shadow: 'small',\n            borderRadius: 'medium',\n            borderWidth: 'x-small',\n            borderStyle: 'solid',\n            activeColorStyle: 'soft',\n            ...itemStyle,\n        } as OrderableListItemStyle;\n    }, [itemStyle]);\n\n    return (\n        <Tree\n            draggable={isDraggable}\n            id={listId}\n            onDrop={handleDrop}\n            data-test-id={dataTestId}\n            selectedIds={selectedId ? [selectedId] : []}\n            itemStyle={treeItemStyle}\n            showDragHandlerOnHoverOnly={!isDraggable}\n            dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n            showContentWhileDragging\n            enableDragDelay={enableDragDelay}\n        >\n            {itemsState.map((item) => {\n                const identifier = `collection-item-${item.id}`;\n                return (\n                    <TreeItem\n                        data-test-id={`${dataTestId}-item`}\n                        id={item.id}\n                        key={identifier}\n                        type=\"collection-item\"\n                        accepts=\"collection-item\"\n                        expandable={false}\n                        levelConstraint={0}\n                        contentComponent={renderContent(item)}\n                    />\n                );\n            })}\n        </Tree>\n    );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAKaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,GAElCmB,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAQ,OACnB;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}
+{"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback, type TreeItemStyling } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n    if (itemA.sort === null && itemB.sort === null) {\n        return 1;\n    }\n    if (itemA.sort === null) {\n        return 1;\n    }\n    if (itemB.sort === null) {\n        return -1;\n    }\n\n    return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n    id: string,\n    newPosition: number | null,\n    items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n    const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n    return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\n/**\n * @deprecated Use the new OrderableList component from @frontify/fondue/components instead.\n */\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    dragHandlerPosition = 'none',\n    enableDragDelay = true,\n    itemStyle,\n    selectedId,\n    renderContent,\n    'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n    const isDraggable = !dragDisabled;\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        // eslint-disable-next-line @eslint-react/set-state-in-effect\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop: OnTreeDropCallback = (dropArgs) => {\n        onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n    };\n\n    const treeItemStyle = useMemo<TreeItemStyling>(() => {\n        return {\n            spacingY: 'small',\n            contentHight: 'content-fit',\n            shadow: 'small',\n            borderRadius: 'medium',\n            borderWidth: 'x-small',\n            borderStyle: 'solid',\n            activeColorStyle: 'soft',\n            ...itemStyle,\n        };\n    }, [itemStyle]);\n\n    return (\n        <Tree\n            draggable={isDraggable}\n            id={listId}\n            onDrop={handleDrop}\n            data-test-id={dataTestId}\n            selectedIds={selectedId ? [selectedId] : []}\n            itemStyle={treeItemStyle}\n            showDragHandlerOnHoverOnly={!isDraggable}\n            dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n            showContentWhileDragging\n            enableDragDelay={enableDragDelay}\n        >\n            {itemsState.map((item) => {\n                const identifier = `collection-item-${item.id}`;\n                return (\n                    <TreeItem\n                        data-test-id={`${dataTestId}-item`}\n                        id={item.id}\n                        key={identifier}\n                        type=\"collection-item\"\n                        accepts=\"collection-item\"\n                        expandable={false}\n                        levelConstraint={0}\n                        contentComponent={renderContent(item)}\n                    />\n                );\n            })}\n        </Tree>\n    );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAKaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,GAElCmB,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAyB,OACpC;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}