@frontify/fondue 12.0.0-beta.13 → 12.0.0-beta.16

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.es.js","sources":["../../../src/components/OverflowMenu/OverflowMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { IconDotsHorizontal } from '@foundation/Icon';\nimport { merge } from '@utilities/merge';\nimport { OverflowMenuItem, OverflowMenuItemProps } from './OverflowMenuItem';\nimport { useOverflowMenuKeyboardNavigation } from './useOverflowMenuKeyboardNavigation';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nexport interface OverflowMenuProps {\n    items: OverflowMenuItemProps[];\n}\n\nexport const OverflowMenu = ({ items }: OverflowMenuProps) => {\n    const [isMenuOpened, setIsMenuOpened] = useState(false);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLButtonElement | null>(null);\n    const menuKeyboardNavigationAction = useOverflowMenuKeyboardNavigation(\n        isMenuOpened,\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: [0, 8],\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU') {\n            setIsMenuOpened(false);\n        }\n    }, [menuKeyboardNavigationAction]);\n\n    return (\n        <div data-test-id=\"overflow-menu\" className=\"tw-relative tw-bottom-0 tw-top-0 tw-flex\">\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={isMenuOpened}\n                aria-label=\"Open overflow menu\"\n                ref={setMenuOpenerRef}\n                className={merge([\n                    'tw-w-6 tw-h-6 hover:tw-bg-box-neutral-strong-inverse-hover tw-rounded tw-flex tw-justify-center tw-items-center',\n                    isMenuOpened ? 'tw-bg-box-neutral-strong-inverse-pressed' : 'tw-bg-box-neutral-strong-inverse',\n                    FOCUS_VISIBLE_STYLE,\n                ])}\n                type=\"button\"\n                onClick={() => {\n                    setIsMenuOpened(!isMenuOpened);\n                }}\n            >\n                <IconDotsHorizontal />\n            </button>\n            {isMenuOpened && (\n                <nav\n                    className=\"tw-bg-base tw-border tw-border-line-strong tw-rounded-lg tw-absolute tw-left-0 tw-top-7 tw-py-1.5 tw-shadow tw-w-max\"\n                    role=\"dialog\"\n                    ref={setMenuContainerRef}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                >\n                    <ol className=\"tw-list-none tw-flex-wrap tw-gap-y-1\" role=\"menu\">\n                        {items.map((item, index) => (\n                            <OverflowMenuItem {...item} key={`overflow-menu-item-${index}`} />\n                        ))}\n                    </ol>\n                </nav>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAe,CAAC,EAAE,eAA+B;AAC1D,QAAM,CAAC,GAAc,KAAmB,EAAS,EAAK,GAChD,CAAC,GAAkB,KAAuB,EAA6B,IAAI,GAC3E,CAAC,GAAe,KAAoB,EAAmC,IAAI,GAC3E,IAA+B,EACjC,GACA,GACA,oCACJ,GAEM,IAAiB,EAAU,GAAe,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,QAAQ,CAAC,GAAG,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,WAAU,MAAM;AACZ,IAAI,MAAiC,gBACjC,EAAgB,EAAK;AAAA,EACzB,GACD,CAAC,CAA4B,CAAC,GAG5B,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,IAAgB,WAAU;AAAA,EAAA,GACvC,kBAAA,cAAA,UAAA;AAAA,IACG,iBAAc;AAAA,IACd,iBAAe;AAAA,IACf,cAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAe,6CAA6C;AAAA,MAC5D;AAAA,IAAA,CACH;AAAA,IACD,MAAK;AAAA,IACL,SAAS,MAAM;AACX,QAAgB,CAAC,CAAY;AAAA,IACjC;AAAA,EAAA,GAEC,kBAAA,cAAA,GAAA,IAAmB,CACxB,GACC,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,MAAK;AAAA,IACL,KAAK;AAAA,IACL,OAAO,EAAe,OAAO;AAAA,IAC5B,GAAG,EAAe,WAAW;AAAA,EAAA,GAE7B,kBAAA,cAAA,MAAA;AAAA,IAAG,WAAU;AAAA,IAAuC,MAAK;AAAA,EAAA,GACrD,EAAM,IAAI,CAAC,GAAM,MACb,kBAAA,cAAA,GAAA;AAAA,IAAkB,GAAG;AAAA,IAAM,KAAK,sBAAsB;AAAA,EAAA,CAAS,CACnE,CACL,CACJ,CAER;AAER;"}

package/dist/components/OverflowMenu/OverflowMenuItem.d.ts

@@ -0,0 +1,11 @@
+import { MouseEvent, ReactElement } from 'react';
+import { IconProps } from '../../foundation/Icon/IconProps';
+export interface OverflowMenuItemProps {
+    id?: string;
+    label: string;
+    link?: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    decorator?: ReactElement<IconProps>;
+    disabled?: boolean;
+}
+export declare const OverflowMenuItem: ({ id, label, link, onClick, disabled, }: OverflowMenuItemProps) => JSX.Element;