@frontify/fondue 13.0.0 → 13.1.1

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\nexport enum FilterableMultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum FilterableMultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport type FilterableMultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\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\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 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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.es.js","sources":["../../../src/components/FilterableMultiSelect/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { FilterableMultiSelectSize } from './FilterableMultiSelect';\n\nexport const getPaddingClasses = (size: FilterableMultiSelectSize) => {\n    const classes = ['tw-pr-9'];\n    switch (size) {\n        case FilterableMultiSelectSize.Small:\n            classes.push('tw-pl-3 tw-py-1');\n            break;\n        case FilterableMultiSelectSize.Medium:\n            classes.push('tw-pl-[19px] tw-py-[11px]');\n            break;\n        default:\n            return;\n    }\n\n    return merge(classes);\n};\n\n/*\nThis function should live here temporarily and removed once the new MultiSelect implementation is done.\nThe new Hook update works well in any overlay component but doesn't work in the current MultiSelect component.\nIt messes with the Popper positioning which should be also fixed in another PR using the combo -> Popper component, overlayStyles, and downshift.\n*/\nexport const useClickOutside = (\n    reference: HTMLElement | null,\n    callback: () => void,\n    ignoredElements?: HTMLElement[],\n): void => {\n    useEffect(() => {\n        function handleClickOutside(event: MouseEvent) {\n            if (\n                !reference?.contains(event.target as Node) &&\n                !ignoredElements?.find(\n                    (element) => element && (event.target === element || element.contains(event.target as Node)),\n                )\n            ) {\n                callback();\n            }\n        }\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [callback, reference, ignoredElements]);\n};\n"],"names":["getPaddingClasses","size","classes","FilterableMultiSelectSize","merge","useClickOutside","reference","callback","ignoredElements","useEffect","handleClickOutside","event","element"],"mappings":";;;AAQO,MAAMA,IAAoB,CAACC,MAAoC;AAClE,QAAMC,IAAU,CAAC,SAAS;AAC1B,UAAQD,GAAA;AAAA,IACJ,KAAKE,EAA0B;AAC3B,MAAAD,EAAQ,KAAK,iBAAiB;AAC9B;AAAA,IACJ,KAAKC,EAA0B;AAC3B,MAAAD,EAAQ,KAAK,2BAA2B;AACxC;AAAA,IACJ;AACI;AAAA,EAAA;AAGR,SAAOE,EAAMF,CAAO;AACxB,GAOaG,IAAkB,CAC3BC,GACAC,GACAC,MACO;AACP,EAAAC,EAAU,MAAM;AACZ,aAASC,EAAmBC,GAAmB;AAC3C,MAEKH,KAAA,QAAAA,EAAiB;AAAA,QACd,CAACI,MAAYA,MAAYD,EAAM,WAAWC,KAAWA,EAAQ,SAASD,EAAM,MAAc;AAAA,WAG9FJ,EAAA;AAAA,IAER;AAEA,oBAAS,iBAAiB,aAAaG,CAAkB,GAClD,MAAM;AACT,eAAS,oBAAoB,aAAaA,CAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAACH,GAAUD,GAAWE,CAAe,CAAC;AAC7C;"}
+{"version":3,"file":"helpers.es.js","sources":["../../../src/components/FilterableMultiSelect/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { FilterableMultiSelectSize } from './FilterableMultiSelect';\n\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport const getPaddingClasses = (size: FilterableMultiSelectSize) => {\n    const classes = ['tw-pr-9'];\n    switch (size) {\n        case FilterableMultiSelectSize.Small:\n            classes.push('tw-pl-3 tw-py-1');\n            break;\n        case FilterableMultiSelectSize.Medium:\n            classes.push('tw-pl-[19px] tw-py-[11px]');\n            break;\n        default:\n            return;\n    }\n\n    return merge(classes);\n};\n\n/*\nThis function should live here temporarily and removed once the new MultiSelect implementation is done.\nThe new Hook update works well in any overlay component but doesn't work in the current MultiSelect component.\nIt messes with the Popper positioning which should be also fixed in another PR using the combo -> Popper component, overlayStyles, and downshift.\n*/\n/**\n * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead.\n */\nexport const useClickOutside = (\n    reference: HTMLElement | null,\n    callback: () => void,\n    ignoredElements?: HTMLElement[],\n): void => {\n    useEffect(() => {\n        function handleClickOutside(event: MouseEvent) {\n            if (\n                !reference?.contains(event.target as Node) &&\n                !ignoredElements?.find(\n                    (element) => element && (event.target === element || element.contains(event.target as Node)),\n                )\n            ) {\n                callback();\n            }\n        }\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [callback, reference, ignoredElements]);\n};\n"],"names":["getPaddingClasses","size","classes","FilterableMultiSelectSize","merge","useClickOutside","reference","callback","ignoredElements","useEffect","handleClickOutside","event","element"],"mappings":";;;AAWO,MAAMA,IAAoB,CAACC,MAAoC;AAClE,QAAMC,IAAU,CAAC,SAAS;AAC1B,UAAQD,GAAA;AAAA,IACJ,KAAKE,EAA0B;AAC3B,MAAAD,EAAQ,KAAK,iBAAiB;AAC9B;AAAA,IACJ,KAAKC,EAA0B;AAC3B,MAAAD,EAAQ,KAAK,2BAA2B;AACxC;AAAA,IACJ;AACI;AAAA,EAAA;AAGR,SAAOE,EAAMF,CAAO;AACxB,GAUaG,IAAkB,CAC3BC,GACAC,GACAC,MACO;AACP,EAAAC,EAAU,MAAM;AACZ,aAASC,EAAmBC,GAAmB;AAC3C,MAEKH,KAAA,QAAAA,EAAiB;AAAA,QACd,CAACI,MAAYA,MAAYD,EAAM,WAAWC,KAAWA,EAAQ,SAASD,EAAM,MAAc;AAAA,WAG9FJ,EAAA;AAAA,IAER;AAEA,oBAAS,iBAAiB,aAAaG,CAAkB,GAClD,MAAM;AACT,eAAS,oBAAoB,aAAaA,CAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAACH,GAAUD,GAAWE,CAAe,CAAC;AAC7C;"}

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\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\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\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\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":";;;;;;;;;;;;;;AA2BO,IAAKA,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,aAAa,cAFLA,IAAAA,MAAA,CAAA,CAAA,GAKAC,uBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,MAAA,CAAA,CAAA;AA0CL,MAAMC,KAAc,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAaC,GAAW;AAAA,EACxB,iBAAiBC;AAAA,EACjB,uBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,GAAgB;AAAA,EAC3B,cAAAC,IAAe;AACnB,MAAsC;AAClC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAA,CAAE,GACjDG,IAAiBC,EAA8B,IAAI,GAEnD,CAACC,GAAoBC,CAAqB,IAAIN,EAAgC,IAAI,GAClF,CAACO,GAAYC,CAAa,IAAIR,EAAgC,IAAI,GAElES,IAAiBL,EAAgC,IAAI,GACrD,EAAE,gBAAAM,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjC,EAAE,WAAAC,EAAA,IAAcC,GAAsB,EAAE,SAASP,KAAc,EAAE,QAAQT,GAAM,YAAY,IAAM,GAEjGiB,IAAmBjC,EAAe,SAAS,GAC3CkC,IAAkBxB,KAA4B,CAACV,EAAe,QAAQ,UAAU,EAAE,KAAK,GAAG;AAIhG,EAAAmC,GAAgB,MAFI,MAAMlB,EAAQ,EAAK,GAEJ,CAACI,KAAA,gBAAAA,EAAgB,SAAwBE,CAAiC,CAAC;AAE9G,QAAMa,IAAgBL,MAAcM,IAE9BC,IAAsBC,EAAA,GAEtBC,IAAa,MAAMvB,EAAQ,CAACD,MAAS,CAACA,CAAI,GAE1C,EAAE,aAAAyB,MAAgBC;AAAA,IACpB;AAAA,MACI,SAASF;AAAA,MACT,WAAW,CAAC,MAAM;AACd,QAAI,EAAE,QAAQ,YACVvB,EAAQ,EAAK;AAAA,MAErB;AAAA,MACA,aAAa;AAAA,IAAA;AAAA,IAEjB,EAAE,SAASQ,EAAA;AAAA,EAAW,GAGpBkB,IAAkB,CAACC,MAAyB;AAC9C,UAAMC,IAAS,IAAI,IAAI7C,CAAc;AAErC,IAAI6C,EAAO,IAAID,CAAG,IACdC,EAAO,OAAOD,CAAG,IAEjBC,EAAO,IAAID,CAAG,GAGlB3C,EAAkB,MAAM,KAAK4C,CAAM,CAAC;AAAA,EACxC,GAEMC,IAAuB,CAAC,MAAqC;AAC/D,KAAI,EAAE,SAAS,WAAW,EAAE,SAAS,YACjCN,EAAA;AAAA,EAER,GAEMO,IAAa,MACV/B,IAGEgC,EAAQ,oBAFJA,EAAQ;AAKvB,EAAAC,EAAU,MAAM;AACZ,IAAAzB,EAAsBH,KAAA,gBAAAA,EAAgB,OAAyB;AAAA,EACnE,GAAG,CAAA,CAAE,GAEL4B,EAAU,MAAM;AACZ,IAAA7B;AAAA,MACIrB,EAAM,IAAI,CAACmD,MAAS;AAChB,cAAMC,IAAmB,EAAE,GAAGD,GAAM,OAAOA,EAAK,MAAA;AAChD,eAAIvC,KAAA,QAAAA,EAAuB,SAASuC,EAAK,SAC9B,EAAE,GAAGC,GAAkB,OAAOC,GAAc,MAAA,IAEhDD;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EAET,GAAG,CAACpD,GAAOY,CAAqB,CAAC;AAEjC,QAAM0C,IAAiBC,EAAU7B,GAAYF,GAAoB;AAAA,IAC7D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAAG,CAAC;AAAA,QAAA;AAAA,MACjB;AAAA,MAEJ;AAAA,QACI,MAAM;AAAA,QACN,SAASX;AAAA,MAAA;AAAA,IACb;AAAA,EACJ,CACH;AAED,SAAAqC,EAAU,MAAM;AAOZ,KANqB,YAAY;AAC7B,MAAII,EAAe,UACf,MAAMA,EAAe,OAAA;AAAA,IAE7B,KAEe,MAAM,QAAQ,KAAK;AAAA,EAEtC,GAAG,CAACrD,CAAc,CAAC,GAEnBuD,EAAgB,MAAM;AAClB,UAAMC,IAAkB,CAACC,MAAoC;AACzD,MAAIA,EAAM,QAAQ,YACdxC,EAAQ,EAAK;AAAA,IAErB;AAEA,kBAAO,iBAAiB,SAASuC,CAAe,GAEzC,MAAM;AACT,aAAO,oBAAoB,SAASA,CAAe;AAAA,IACvD;AAAA,EACJ,GAAG,CAAA,CAAE,GAGD,gBAAAE,EAAC,OAAA,EAAI,WAAU,eAAc,KAAKrC,GAC9B,UAAA;AAAA,IAAA,gBAAAsC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,UAAAzD;AAAA,QACA,aAAAsC;AAAA,QACA,gBAAAb;AAAA,QACA,QAAQZ;AAAA,QACR,YAAAR;AAAA,QACA,UAAAK;AAAA,QAEA,UAAA,gBAAA8C,EAAC,OAAA,EAAI,WAAWE,GAAM,CAAC,8BAA8BC,GAAkBvD,CAAI,CAAC,CAAC,GAAG,KAAKmB,GACjF,UAAA,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,SAAS,CAAC,MAAM;AACZ,cAAI,EAAE,WAAWhC,EAAe,WAAWX,KAG3CwB,EAAA;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,iBAAexB;AAAA,YACf,iBAAesB;AAAA,YACf,cAAYpC;AAAA,YACX,GAAG2B;AAAA,YACJ,UAAU;AAAA,YACV,WAAWiB;AAAA,YAEX,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,iFACV,UAAA;AAAA,cAAArD,KAAS4B,KACN,gBAAA0B,EAAC,QAAA,EAAK,WAAU,yCAAyC,UAAAtD,GAAM;AAAA,cAElEC,MAAS,aACNN,EAAe,IAAI,CAAC4C,MAChB,gBAAAe;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBAEG,MAAMhB,EAAA;AAAA,kBACN,OAAOH,EAAI,SAAA;AAAA,kBACX,MAAMrC,MAAS,UAAwByD,EAAQ,QAAQA,EAAQ;AAAA,kBAC/D,SAAS7D,IAAW,SAAY,MAAMwC,EAAgBC,CAAG;AAAA,gBAAA;AAAA,gBAJpDA;AAAA,cAAA,CAMZ;AAAA,cAEJtC,MAAS,iBAA+B2B,KAAoBvB,MACzD,gBAAAiD;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,MAAMhB,EAAA;AAAA,kBACN,OAAOb;AAAA,kBACP,MAAM3B,MAAS,UAAwByD,EAAQ,QAAQA,EAAQ;AAAA,kBAC/D,UACIrD,KAAA,gBAAAA,EAAuB,YAAW,IAAI,MAAMV,EAAkB,CAAA,CAAE,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAK/ED,EAAe,WAAW,KAAKI,uBAC3B,QAAA,EAAK,WAAU,oCAAoC,UAAAA,EAAA,CAAY;AAAA,YAAA,EAAA,CAExE;AAAA,UAAA;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHY,KAAQoB,KACL,gBAAAuB,EAACM,IAAA,EAAoB,cAAAlD,GACjB,UAAA,gBAAA4C;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIrB;AAAA,QACJ,KAAKd;AAAA,QACL,WAAU;AAAA,QAEV,OAAO;AAAA,UACH,GAAG6B,EAAe,OAAO;AAAA,UACzB,OAAO5B,KAAA,gBAAAA,EAAY,wBAAwB;AAAA,QAAA;AAAA,QAE9C,GAAG4B,EAAe,WAAW;AAAA,QAE9B,UAAA,gBAAAM,EAACO,GAAA,EAAW,cAAY,IACpB,UAAA,gBAAAP;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO,EAAE,WAAA5B,EAAA;AAAA,YAET,UAAA,gBAAA4B;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACG,cAAcnE,EAAe,IAAI,CAAC4C,MAAQA,EAAI,UAAU;AAAA,gBACxD,iBAAiB3C;AAAA,gBACjB,YAAYkB,EAAW,OAAO,CAAC+B,MAAS,CAACA,EAAK,aAAa,CAACA,EAAK,UAAU;AAAA,gBAC3E,WAAWkB,GAAmB;AAAA,gBAC9B,WAAAlE;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,MApBI;AAAA,IAAA,EAqBR,CACJ;AAAA,EAAA,GAER;AAER;AACAJ,GAAY,cAAc;"}
+{"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":";;;;;;;;;;;;;;AA8BO,IAAKA,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,aAAa,cAFLA,IAAAA,MAAA,CAAA,CAAA,GAQAC,uBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,MAAA,CAAA,CAAA;AAsDL,MAAMC,KAAc,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAaC,GAAW;AAAA,EACxB,iBAAiBC;AAAA,EACjB,uBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,GAAgB;AAAA,EAC3B,cAAAC,IAAe;AACnB,MAAsC;AAClC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAA,CAAE,GACjDG,IAAiBC,EAA8B,IAAI,GAEnD,CAACC,GAAoBC,CAAqB,IAAIN,EAAgC,IAAI,GAClF,CAACO,GAAYC,CAAa,IAAIR,EAAgC,IAAI,GAElES,IAAiBL,EAAgC,IAAI,GACrD,EAAE,gBAAAM,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjC,EAAE,WAAAC,EAAA,IAAcC,GAAsB,EAAE,SAASP,KAAc,EAAE,QAAQT,GAAM,YAAY,IAAM,GAEjGiB,IAAmBjC,EAAe,SAAS,GAC3CkC,IAAkBxB,KAA4B,CAACV,EAAe,QAAQ,UAAU,EAAE,KAAK,GAAG;AAIhG,EAAAmC,GAAgB,MAFI,MAAMlB,EAAQ,EAAK,GAEJ,CAACI,KAAA,gBAAAA,EAAgB,SAAwBE,CAAiC,CAAC;AAE9G,QAAMa,IAAgBL,MAAcM,IAE9BC,IAAsBC,EAAA,GAEtBC,IAAa,MAAMvB,EAAQ,CAACD,MAAS,CAACA,CAAI,GAE1C,EAAE,aAAAyB,MAAgBC;AAAA,IACpB;AAAA,MACI,SAASF;AAAA,MACT,WAAW,CAAC,MAAM;AACd,QAAI,EAAE,QAAQ,YACVvB,EAAQ,EAAK;AAAA,MAErB;AAAA,MACA,aAAa;AAAA,IAAA;AAAA,IAEjB,EAAE,SAASQ,EAAA;AAAA,EAAW,GAGpBkB,IAAkB,CAACC,MAAyB;AAC9C,UAAMC,IAAS,IAAI,IAAI7C,CAAc;AAErC,IAAI6C,EAAO,IAAID,CAAG,IACdC,EAAO,OAAOD,CAAG,IAEjBC,EAAO,IAAID,CAAG,GAGlB3C,EAAkB,MAAM,KAAK4C,CAAM,CAAC;AAAA,EACxC,GAEMC,IAAuB,CAAC,MAAqC;AAC/D,KAAI,EAAE,SAAS,WAAW,EAAE,SAAS,YACjCN,EAAA;AAAA,EAER,GAEMO,IAAa,MACV/B,IAGEgC,EAAQ,oBAFJA,EAAQ;AAKvB,EAAAC,EAAU,MAAM;AACZ,IAAAzB,EAAsBH,KAAA,gBAAAA,EAAgB,OAAyB;AAAA,EACnE,GAAG,CAAA,CAAE,GAEL4B,EAAU,MAAM;AACZ,IAAA7B;AAAA,MACIrB,EAAM,IAAI,CAACmD,MAAS;AAChB,cAAMC,IAAmB,EAAE,GAAGD,GAAM,OAAOA,EAAK,MAAA;AAChD,eAAIvC,KAAA,QAAAA,EAAuB,SAASuC,EAAK,SAC9B,EAAE,GAAGC,GAAkB,OAAOC,GAAc,MAAA,IAEhDD;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EAET,GAAG,CAACpD,GAAOY,CAAqB,CAAC;AAEjC,QAAM0C,IAAiBC,EAAU7B,GAAYF,GAAoB;AAAA,IAC7D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAAG,CAAC;AAAA,QAAA;AAAA,MACjB;AAAA,MAEJ;AAAA,QACI,MAAM;AAAA,QACN,SAASX;AAAA,MAAA;AAAA,IACb;AAAA,EACJ,CACH;AAED,SAAAqC,EAAU,MAAM;AAOZ,KANqB,YAAY;AAC7B,MAAII,EAAe,UACf,MAAMA,EAAe,OAAA;AAAA,IAE7B,KAEe,MAAM,QAAQ,KAAK;AAAA,EAEtC,GAAG,CAACrD,CAAc,CAAC,GAEnBuD,EAAgB,MAAM;AAClB,UAAMC,IAAkB,CAACC,MAAoC;AACzD,MAAIA,EAAM,QAAQ,YACdxC,EAAQ,EAAK;AAAA,IAErB;AAEA,kBAAO,iBAAiB,SAASuC,CAAe,GAEzC,MAAM;AACT,aAAO,oBAAoB,SAASA,CAAe;AAAA,IACvD;AAAA,EACJ,GAAG,CAAA,CAAE,GAGD,gBAAAE,EAAC,OAAA,EAAI,WAAU,eAAc,KAAKrC,GAC9B,UAAA;AAAA,IAAA,gBAAAsC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,UAAAzD;AAAA,QACA,aAAAsC;AAAA,QACA,gBAAAb;AAAA,QACA,QAAQZ;AAAA,QACR,YAAAR;AAAA,QACA,UAAAK;AAAA,QAEA,UAAA,gBAAA8C,EAAC,OAAA,EAAI,WAAWE,GAAM,CAAC,8BAA8BC,GAAkBvD,CAAI,CAAC,CAAC,GAAG,KAAKmB,GACjF,UAAA,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,SAAS,CAAC,MAAM;AACZ,cAAI,EAAE,WAAWhC,EAAe,WAAWX,KAG3CwB,EAAA;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,iBAAexB;AAAA,YACf,iBAAesB;AAAA,YACf,cAAYpC;AAAA,YACX,GAAG2B;AAAA,YACJ,UAAU;AAAA,YACV,WAAWiB;AAAA,YAEX,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,iFACV,UAAA;AAAA,cAAArD,KAAS4B,KACN,gBAAA0B,EAAC,QAAA,EAAK,WAAU,yCAAyC,UAAAtD,GAAM;AAAA,cAElEC,MAAS,aACNN,EAAe,IAAI,CAAC4C,MAChB,gBAAAe;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBAEG,MAAMhB,EAAA;AAAA,kBACN,OAAOH,EAAI,SAAA;AAAA,kBACX,MAAMrC,MAAS,UAAwByD,EAAQ,QAAQA,EAAQ;AAAA,kBAC/D,SAAS7D,IAAW,SAAY,MAAMwC,EAAgBC,CAAG;AAAA,gBAAA;AAAA,gBAJpDA;AAAA,cAAA,CAMZ;AAAA,cAEJtC,MAAS,iBAA+B2B,KAAoBvB,MACzD,gBAAAiD;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,MAAMhB,EAAA;AAAA,kBACN,OAAOb;AAAA,kBACP,MAAM3B,MAAS,UAAwByD,EAAQ,QAAQA,EAAQ;AAAA,kBAC/D,UACIrD,KAAA,gBAAAA,EAAuB,YAAW,IAAI,MAAMV,EAAkB,CAAA,CAAE,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAK/ED,EAAe,WAAW,KAAKI,uBAC3B,QAAA,EAAK,WAAU,oCAAoC,UAAAA,EAAA,CAAY;AAAA,YAAA,EAAA,CAExE;AAAA,UAAA;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHY,KAAQoB,KACL,gBAAAuB,EAACM,IAAA,EAAoB,cAAAlD,GACjB,UAAA,gBAAA4C;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAIrB;AAAA,QACJ,KAAKd;AAAA,QACL,WAAU;AAAA,QAEV,OAAO;AAAA,UACH,GAAG6B,EAAe,OAAO;AAAA,UACzB,OAAO5B,KAAA,gBAAAA,EAAY,wBAAwB;AAAA,QAAA;AAAA,QAE9C,GAAG4B,EAAe,WAAW;AAAA,QAE9B,UAAA,gBAAAM,EAACO,GAAA,EAAW,cAAY,IACpB,UAAA,gBAAAP;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO,EAAE,WAAA5B,EAAA;AAAA,YAET,UAAA,gBAAA4B;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACG,cAAcnE,EAAe,IAAI,CAAC4C,MAAQA,EAAI,UAAU;AAAA,gBACxD,iBAAiB3C;AAAA,gBACjB,YAAYkB,EAAW,OAAO,CAAC+B,MAAS,CAACA,EAAK,aAAa,CAACA,EAAK,UAAU;AAAA,gBAC3E,WAAWkB,GAAmB;AAAA,gBAC9B,WAAAlE;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,MApBI;AAAA,IAAA,EAqBR,CACJ;AAAA,EAAA,GAER;AAER;AACAJ,GAAY,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.es.js","sources":["../../../src/components/MultiSelect/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { MultiSelectSize } from './MultiSelect';\n\nexport const getPaddingClasses = (size: MultiSelectSize) => {\n    const classes = ['tw-pr-9'];\n    switch (size) {\n        case MultiSelectSize.Small:\n            classes.push('tw-pl-3 tw-py-1');\n            break;\n        case MultiSelectSize.Medium:\n            classes.push('tw-pl-[19px] tw-py-[11px]');\n            break;\n        default:\n            return;\n    }\n\n    return merge(classes);\n};\n\n/*\nThis function should live here temporarily and removed once the new MultiSelect implementation is done.\nThe new Hook update works well in any overlay component but doesn't work in the current MultiSelect component.\nIt messes with the Popper positioning which should be also fixed in another PR using the combo -> Popper component, overlayStyles, and downshift.\n*/\nexport const useClickOutside = (\n    reference: HTMLElement | null,\n    callback: () => void,\n    ignoredElements?: HTMLElement[],\n): void => {\n    useEffect(() => {\n        function handleClickOutside(event: MouseEvent) {\n            if (\n                !reference?.contains(event.target as Node) &&\n                !ignoredElements?.find(\n                    (element) => element && (event.target === element || element.contains(event.target as Node)),\n                )\n            ) {\n                callback();\n            }\n        }\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [callback, reference, ignoredElements]);\n};\n"],"names":["getPaddingClasses","size","classes","MultiSelectSize","merge","useClickOutside","reference","callback","ignoredElements","useEffect","handleClickOutside","event","element"],"mappings":";;;AAQO,MAAMA,IAAoB,CAACC,MAA0B;AACxD,QAAMC,IAAU,CAAC,SAAS;AAC1B,UAAQD,GAAA;AAAA,IACJ,KAAKE,EAAgB;AACjB,MAAAD,EAAQ,KAAK,iBAAiB;AAC9B;AAAA,IACJ,KAAKC,EAAgB;AACjB,MAAAD,EAAQ,KAAK,2BAA2B;AACxC;AAAA,IACJ;AACI;AAAA,EAAA;AAGR,SAAOE,EAAMF,CAAO;AACxB,GAOaG,IAAkB,CAC3BC,GACAC,GACAC,MACO;AACP,EAAAC,EAAU,MAAM;AACZ,aAASC,EAAmBC,GAAmB;AAC3C,MAEKH,KAAA,QAAAA,EAAiB;AAAA,QACd,CAACI,MAAYA,MAAYD,EAAM,WAAWC,KAAWA,EAAQ,SAASD,EAAM,MAAc;AAAA,WAG9FJ,EAAA;AAAA,IAER;AAEA,oBAAS,iBAAiB,aAAaG,CAAkB,GAClD,MAAM;AACT,eAAS,oBAAoB,aAAaA,CAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAACH,GAAUD,GAAWE,CAAe,CAAC;AAC7C;"}
+{"version":3,"file":"helpers.es.js","sources":["../../../src/components/MultiSelect/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { MultiSelectSize } from './MultiSelect';\n\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport const getPaddingClasses = (size: MultiSelectSize) => {\n    const classes = ['tw-pr-9'];\n    switch (size) {\n        case MultiSelectSize.Small:\n            classes.push('tw-pl-3 tw-py-1');\n            break;\n        case MultiSelectSize.Medium:\n            classes.push('tw-pl-[19px] tw-py-[11px]');\n            break;\n        default:\n            return;\n    }\n\n    return merge(classes);\n};\n\n/*\nThis function should live here temporarily and removed once the new MultiSelect implementation is done.\nThe new Hook update works well in any overlay component but doesn't work in the current MultiSelect component.\nIt messes with the Popper positioning which should be also fixed in another PR using the combo -> Popper component, overlayStyles, and downshift.\n*/\n/**\n * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead.\n */\nexport const useClickOutside = (\n    reference: HTMLElement | null,\n    callback: () => void,\n    ignoredElements?: HTMLElement[],\n): void => {\n    useEffect(() => {\n        function handleClickOutside(event: MouseEvent) {\n            if (\n                !reference?.contains(event.target as Node) &&\n                !ignoredElements?.find(\n                    (element) => element && (event.target === element || element.contains(event.target as Node)),\n                )\n            ) {\n                callback();\n            }\n        }\n\n        document.addEventListener('mousedown', handleClickOutside);\n        return () => {\n            document.removeEventListener('mousedown', handleClickOutside);\n        };\n    }, [callback, reference, ignoredElements]);\n};\n"],"names":["getPaddingClasses","size","classes","MultiSelectSize","merge","useClickOutside","reference","callback","ignoredElements","useEffect","handleClickOutside","event","element"],"mappings":";;;AAWO,MAAMA,IAAoB,CAACC,MAA0B;AACxD,QAAMC,IAAU,CAAC,SAAS;AAC1B,UAAQD,GAAA;AAAA,IACJ,KAAKE,EAAgB;AACjB,MAAAD,EAAQ,KAAK,iBAAiB;AAC9B;AAAA,IACJ,KAAKC,EAAgB;AACjB,MAAAD,EAAQ,KAAK,2BAA2B;AACxC;AAAA,IACJ;AACI;AAAA,EAAA;AAGR,SAAOE,EAAMF,CAAO;AACxB,GAUaG,IAAkB,CAC3BC,GACAC,GACAC,MACO;AACP,EAAAC,EAAU,MAAM;AACZ,aAASC,EAAmBC,GAAmB;AAC3C,MAEKH,KAAA,QAAAA,EAAiB;AAAA,QACd,CAACI,MAAYA,MAAYD,EAAM,WAAWC,KAAWA,EAAQ,SAASD,EAAM,MAAc;AAAA,WAG9FJ,EAAA;AAAA,IAER;AAEA,oBAAS,iBAAiB,aAAaG,CAAkB,GAClD,MAAM;AACT,eAAS,oBAAoB,aAAaA,CAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAACH,GAAUD,GAAWE,CAAe,CAAC;AAC7C;"}