@frontify/fondue 12.2.5 → 12.2.7

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { type ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { type MenuBlock, type MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n    MenuItemContent,\n    MenuItemContentSize,\n    MenuItemStyle,\n    MenuItemTextColorState,\n    menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; // Small Input height as default\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n    emphasis?: TriggerEmphasis;\n    flip?: boolean;\n    'data-test-id'?: string;\n    enablePortal?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\n};\n\nexport const Dropdown = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n    emphasis = TriggerEmphasis.Default,\n    flip = false,\n    'data-test-id': dataTestId = 'dropdown',\n    enablePortal = true,\n}: DropdownProps): ReactElement => {\n    const activeItem = activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key as string),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        if (activeItemId !== state.selectedKey) {\n            state.setSelectedKey(activeItemId as string);\n        }\n    }, [activeItemId]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-text-x-weak';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        'Top-Start': 'top-start',\n        'Top-End': 'top-end',\n        'Bottom-Start': 'bottom-start',\n        'Bottom-End': 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\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    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\" data-test-id={dataTestId}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                emphasis={emphasis}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id={`${dataTestId}-trigger`}\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-12' : 'tw-pr-8',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        subtitle={activeItem?.subtitle}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {!disabled && isOpen && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        ref={dropdownRef}\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef.current?.getBoundingClientRect().width,\n                            minWidth: 'fit-content',\n                        }}\n                        {...popperInstance.attributes.popper}\n                        className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                        key=\"content\"\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                style={autoResize ? { maxHeight } : {}}\n                                className=\"tw-flex tw-flex-col\"\n                                data-test-id={`${dataTestId}-menu`}\n                                role=\"dialog\"\n                            >\n                                <DismissButton onDismiss={() => close()} />\n                                <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n                                <DismissButton onDismiss={() => close()} />\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n        </div>\n    );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","dataTestId","enablePortal","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","jsxs","Trigger","TriggerSize","jsx","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","createElement","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}
+{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { type ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { type MenuBlock, type MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n    MenuItemContent,\n    MenuItemContentSize,\n    MenuItemStyle,\n    MenuItemTextColorState,\n    menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; // Small Input height as default\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n    emphasis?: TriggerEmphasis;\n    flip?: boolean;\n    'data-test-id'?: string;\n    enablePortal?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\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-replaces-dropdown-and-menu the migration guide}.\n */\nexport const Dropdown = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n    emphasis = TriggerEmphasis.Default,\n    flip = false,\n    'data-test-id': dataTestId = 'dropdown',\n    enablePortal = true,\n}: DropdownProps): ReactElement => {\n    const activeItem = activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key as string),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        if (activeItemId !== state.selectedKey) {\n            state.setSelectedKey(activeItemId as string);\n        }\n    }, [activeItemId]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-text-x-weak';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        'Top-Start': 'top-start',\n        'Top-End': 'top-end',\n        'Bottom-Start': 'bottom-start',\n        'Bottom-End': 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\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    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\" data-test-id={dataTestId}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                emphasis={emphasis}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id={`${dataTestId}-trigger`}\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-12' : 'tw-pr-8',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        subtitle={activeItem?.subtitle}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {!disabled && isOpen && heightIsReady && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        ref={dropdownRef}\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef.current?.getBoundingClientRect().width,\n                            minWidth: 'fit-content',\n                        }}\n                        {...popperInstance.attributes.popper}\n                        className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                        key=\"content\"\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                style={autoResize ? { maxHeight } : {}}\n                                className=\"tw-flex tw-flex-col\"\n                                data-test-id={`${dataTestId}-menu`}\n                                role=\"dialog\"\n                            >\n                                <DismissButton onDismiss={() => close()} />\n                                <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n                                <DismissButton onDismiss={() => close()} />\n                            </div>\n                        </FocusScope>\n                    </div>\n                </EnablePortalWrapper>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n        </div>\n    );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","dataTestId","enablePortal","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","jsxs","Trigger","TriggerSize","jsx","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","createElement","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"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\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\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":";;;;;;;AAqBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAEzDC,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,KACQA;EAGjB,GAAA,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,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAC3C,GACD,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EAAA,GACnB,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACR,IAAAf,KAAca,EAAe,UAC7BA,EAAe,OAAO;AAAA,EAC1B,GAED,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACR,IAAAJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,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,CAAC;AAAA,MACtD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAG,EAAA,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,GACL;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\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-replaces-dropdown-and-menu 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":";;;;;;;AAqBA,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,KACQA;EAGjB,GAAA,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,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAC3C,GACD,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EAAA,GACnB,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACR,IAAAf,KAAca,EAAe,UAC7BA,EAAe,OAAO;AAAA,EAC1B,GAED,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACR,IAAAJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,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,CAAC;AAAA,MACtD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAG,EAAA,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,GACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}