@stackone/malachite 2.37.0 → 2.38.0

package/dist/components/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","sources":["../../src/components/ActionMenu.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    useInsertionEffect,\n    useLayoutEffect,\n    useCallback,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport Button from './Button';\nimport type { ButtonVariant } from './Button';\nimport MoreHorizontalIcon from './CustomIcons/MoreHorizontalIcon';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n    MENU_SPECS,\n    type MenuGeometry,\n    measureContentWidth,\n    measureMenuGeometry,\n} from './floatingMenuGeometry';\nimport { ensureOverlayStyles, overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\nconst LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nconst EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport type ActionMenuItem =\n    | {\n          type?: 'item';\n          key: string;\n          label: React.ReactNode;\n          onClick?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n          tooltip?: string;\n          icon?: React.ReactNode;\n      }\n    | {\n          type: 'divider';\n          key: string;\n      };\n\nexport interface ActionMenuProps {\n    items: ActionMenuItem[];\n    label?: string;\n    triggerIcon?: React.ReactNode;\n    minWidth?: number;\n    size?: 'small' | 'xsmall';\n    /**\n     * Shows `label` beside the icon instead of leaving it to the accessible name. For a menu\n     * that is the point of its corner rather than an overflow for a row that already reads —\n     * a kebab nobody can name is only safe when the row it belongs to says what it acts on.\n     */\n    showLabel?: boolean;\n    /** Trigger's Button variant. Defaults to `outline`, the overflow-kebab look. */\n    variant?: ButtonVariant;\n}\n\n// No box here: pinning `--malachite-control-height-small` beat Button's own `size-[28px]`, so a\n// theme that moved that token moved the kebab and left the Button behind. Only the glyph is\n// left to size, Button sizing one only for its `icon` prop.\nconst TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nconst itemStyle = (item: ActionMenuItem): React.CSSProperties => {\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: item.danger\n            ? 'var(--malachite-text-destructive, rgb(237, 53, 54))'\n            : 'var(--malachite-text-primary, rgb(10, 10, 10))',\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        background: 'transparent',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\n/**\n * ActionMenu is a kebab-style overflow action menu. The trigger is a square\n * icon-only outline Button (three-dot icon by default); on click, a popover\n * appears with the given items. The popover is rendered to document.body via\n * createPortal so it escapes any Shadow DOM or overflow:hidden ancestors —\n * which is also why the popover is styled inline rather than with Tailwind:\n * the scoped stylesheet does not reach document.body.\n */\nconst ActionMenu: React.FC<ActionMenuProps> = ({\n    items,\n    label = 'More actions',\n    triggerIcon,\n    minWidth,\n    size = 'small',\n    showLabel = false,\n    variant = 'outline',\n}) => {\n    const trigger = TRIGGER_SIZES[size];\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<MenuGeometry | null>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const contentWidthRef = useRef<number | undefined>(undefined);\n\n    useTopLayer(popoverRef, open);\n\n    const updatePosition = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n            return;\n        }\n        contentWidthRef.current =\n            measureContentWidth(popoverRef.current) ?? contentWidthRef.current;\n\n        setPosition(\n            measureMenuGeometry(popoverRef.current, {\n                triggerRect: trigger.getBoundingClientRect(),\n                preset: 'options',\n                minWidth,\n                contentWidth: contentWidthRef.current,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n            }),\n        );\n    }, [minWidth]);\n\n    useEffect(() => {\n        if (!open) {\n            setPosition(null);\n            contentWidthRef.current = undefined;\n            return;\n        }\n        updatePosition();\n        const handleScrollOrResize = () => updatePosition();\n        const handleClickOutside = (e: MouseEvent) => {\n            const target = e.target as Node;\n            if (!triggerRef.current?.contains(target) && !popoverRef.current?.contains(target)) {\n                setOpen(false);\n            }\n        };\n        // ESC via the shared layer stack: closes only the topmost overlay.\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n        window.addEventListener('scroll', handleScrollOrResize, true);\n        window.addEventListener('resize', handleScrollOrResize);\n        document.addEventListener('mousedown', handleClickOutside, true);\n        return () => {\n            window.removeEventListener('scroll', handleScrollOrResize, true);\n            window.removeEventListener('resize', handleScrollOrResize);\n            document.removeEventListener('mousedown', handleClickOutside, true);\n            popEscapeLayer();\n        };\n    }, [open, updatePosition]);\n\n    useLayoutEffect(() => {\n        if (open && popoverRef.current) {\n            updatePosition();\n        }\n    }, [open, updatePosition]);\n\n    const handleItemClick = (item: ActionMenuItem) => {\n        if (item.type === 'divider' || item.disabled) {\n            return;\n        }\n        item.onClick?.();\n        setOpen(false);\n    };\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureOverlayStyles();\n        }\n    }, [open]);\n\n    const popoverStyle: React.CSSProperties = {\n        position: 'fixed',\n        top: position?.top ?? 0,\n        left: position?.left ?? 0,\n        width: position?.width,\n        maxHeight: position?.maxHeight,\n        overflowY: 'auto',\n        background: MENU_SPECS.options.background,\n        border: MENU_SPECS.options.border,\n        borderRadius: MENU_SPECS.options.radius,\n        boxShadow: MENU_SPECS.options.shadow,\n        padding: MENU_SPECS.options.padding,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 2,\n        visibility: position ? 'visible' : 'hidden',\n        opacity: position ? 1 : 0,\n    };\n\n    return (\n        <>\n            <Button\n                ref={triggerRef}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                iconOnly={!showLabel}\n                // With the label drawn, it is already the accessible name; repeating it here\n                // would have a screen reader announce it twice.\n                aria-label={showLabel ? undefined : label}\n                aria-haspopup=\"menu\"\n                aria-expanded={open}\n                // The engaged border while open is each variant's own, keyed off aria-expanded\n                // in the stylesheet — pinning the outline token here stripped it from every\n                // other variant.\n                //\n                // Button only spaces the icon it owns via its `icon` prop; this one is a child,\n                // so the gap is set here rather than left to collapse against the label. `gap-2`\n                // because the stylesheet is precompiled: a utility no source file already uses\n                // is never emitted, and the class then does nothing with nothing to show for it.\n                className={`shrink-0${showLabel ? ' gap-2' : ''}`}\n                onClick={(e) => {\n                    e.stopPropagation();\n                    setOpen((v) => !v);\n                }}\n                onMouseDown={(e) => e.stopPropagation()}\n            >\n                {/* `!important` because every CustomIcon writes its size inline; `text-[…]` for a\n                    glyph that is not an svg at all, which the svg rule never matches. */}\n                <span className={`inline-flex items-center justify-center ${trigger.iconBox}`}>\n                    {triggerIcon ?? <MoreHorizontalIcon size={trigger.icon} />}\n                </span>\n                {showLabel && <span>{label}</span>}\n            </Button>\n            {open &&\n                createPortal(\n                    <div\n                        ref={popoverRef}\n                        role=\"menu\"\n                        {...overlayIdentity('actionmenu')}\n                        style={popoverStyle}\n                        onMouseDown={(e) => e.stopPropagation()}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {items.length === 0 && (\n                            // role=\"menu\" takes menuitem children only, so the notice is one.\n                            <div role=\"menuitem\" aria-disabled=\"true\" style={EMPTY_ITEM_STYLE}>\n                                No actions available\n                            </div>\n                        )}\n                        {items.map((item) =>\n                            item.type === 'divider' ? (\n                                <div key={item.key} style={itemStyle(item)} />\n                            ) : (\n                                <button\n                                    key={item.key}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    disabled={item.disabled}\n                                    title={item.tooltip}\n                                    onClick={() => handleItemClick(item)}\n                                    onMouseEnter={(e) => {\n                                        if (!item.disabled) {\n                                            (\n                                                e.currentTarget as HTMLButtonElement\n                                            ).style.background = 'rgba(0, 0, 0, 0.04)';\n                                        }\n                                    }}\n                                    onMouseLeave={(e) => {\n                                        (e.currentTarget as HTMLButtonElement).style.background =\n                                            'transparent';\n                                    }}\n                                    style={itemStyle(item)}\n                                >\n                                    {/* Leading: every caller's icon names the action itself —\n                                        copy, open, delete — and an icon that is part of an\n                                        item's identity belongs where the eye starts, not\n                                        right-aligned where it reads as a status column. */}\n                                    {item.icon && (\n                                        <span\n                                            style={{\n                                                display: 'inline-flex',\n                                                flexShrink: 0,\n                                                color: 'var(--malachite-icon-secondary, rgb(148, 148, 148))',\n                                            }}\n                                        >\n                                            {item.icon}\n                                        </span>\n                                    )}\n                                    <span style={LABEL_STYLE}>{item.label}</span>\n                                </button>\n                            ),\n                        )}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ActionMenu;\n"],"names":["LABEL_STYLE","EMPTY_ITEM_STYLE","TRIGGER_SIZES","itemStyle","item","ActionMenu","items","label","triggerIcon","minWidth","size","showLabel","variant","trigger","open","setOpen","useState","position","setPosition","triggerRef","useRef","popoverRef","contentWidthRef","useTopLayer","updatePosition","useCallback","measureContentWidth","measureMenuGeometry","useEffect","handleScrollOrResize","handleClickOutside","e","target","_a","_b","popEscapeLayer","pushEscapeLayer","useLayoutEffect","handleItemClick","useInsertionEffect","ensureOverlayStyles","popoverStyle","MENU_SPECS","jsxs","Fragment","Button","v","jsx","MoreHorizontalIcon","createPortal","overlayIdentity"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.js","sources":["../../src/components/ActionMenu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport Button from './Button';\nimport type { ButtonVariant } from './Button';\nimport MoreHorizontalIcon from './CustomIcons/MoreHorizontalIcon';\nimport {\n    type MenuEdge,\n    edgeForTriggerKey,\n    enabledItems,\n    focusEdge,\n    itemForMenuKey,\n} from './actionMenuKeyboard';\nimport {\n    EMPTY_ITEM_STYLE,\n    ITEM_CLASS,\n    ITEM_ICON_STYLE,\n    LABEL_STYLE,\n    TEXT_ITEM_STYLE,\n    TRIGGER_SIZES,\n    type ActionMenuTone,\n    itemStyle,\n    menuStyle,\n} from './actionMenuStyles';\nimport type { ActionMenuItem, ActionMenuPlacement } from './actionMenuTypes';\nimport { getDeepActiveElement } from './activeElement';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { pushEscapeLayer } from './escapeLayers';\nimport type { FloatingOffset } from './floatingMenuGeometry';\nimport { overlayIdentity } from './portalOverlay';\nimport { useActionMenuPosition } from './useActionMenuPosition';\n\nexport type { ActionMenuItem, ActionMenuPlacement, ActionMenuTone };\n\nexport interface ActionMenuProps {\n    items: ActionMenuItem[];\n    label?: string;\n    triggerIcon?: React.ReactNode;\n    minWidth?: number;\n    size?: 'small' | 'xsmall';\n    /**\n     * Shows `label` beside the icon instead of leaving it to the accessible name. For a menu\n     * that is the point of its corner rather than an overflow for a row that already reads —\n     * a kebab nobody can name is only safe when the row it belongs to says what it acts on.\n     */\n    showLabel?: boolean;\n    /** Trigger's Button variant. Defaults to `outline`, the overflow-kebab look. */\n    variant?: ButtonVariant;\n    trigger?: React.ReactElement;\n    placement?: ActionMenuPlacement;\n    offset?: FloatingOffset;\n    /** `muted` reads items in the secondary text colour, as in a sidebar's menus. */\n    tone?: ActionMenuTone;\n}\n\ntype TriggerHandlers = {\n    onClick?: (event: React.MouseEvent) => void;\n    onMouseDown?: (event: React.MouseEvent) => void;\n    onKeyDown?: (event: React.KeyboardEvent) => void;\n};\n\nconst stopPropagation = (event: React.SyntheticEvent) => event.stopPropagation();\n\nconst MenuItemRow: React.FC<{\n    item: ActionMenuItem;\n    tone: ActionMenuTone;\n    onSelect: (item: ActionMenuItem) => void;\n}> = ({ item, tone, onSelect }) => {\n    if (item.type === 'divider') {\n        return <div style={itemStyle(item)} />;\n    }\n    if (item.type === 'text') {\n        return (\n            <div role=\"menuitem\" aria-disabled=\"true\" style={TEXT_ITEM_STYLE}>\n                {item.label}\n            </div>\n        );\n    }\n    return (\n        <button\n            type=\"button\"\n            role=\"menuitem\"\n            disabled={item.disabled}\n            title={item.tooltip}\n            className={ITEM_CLASS}\n            onClick={() => onSelect(item)}\n            style={itemStyle(item, tone)}\n        >\n            {item.icon && <span style={ITEM_ICON_STYLE}>{item.icon}</span>}\n            <span style={LABEL_STYLE}>{item.label}</span>\n        </button>\n    );\n};\n\n/**\n * ActionMenu is an overflow action menu. The trigger is a three-dot `Button` by default, or\n * your own control via `trigger`. The menu is portaled to document.body, so it escapes any\n * Shadow DOM or overflow:hidden ancestor, which is also why it is styled inline.\n */\nconst ActionMenu: React.FC<ActionMenuProps> = ({\n    items,\n    label = 'More actions',\n    triggerIcon,\n    minWidth,\n    size = 'small',\n    showLabel = false,\n    variant = 'outline',\n    trigger: customTrigger,\n    placement = 'bottom-end',\n    offset,\n    tone = 'default',\n}) => {\n    const triggerSize = TRIGGER_SIZES[size];\n    const [open, setOpen] = useState(false);\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const focusOnOpen = useRef<MenuEdge | null>(null);\n    const focusInMenu = useRef(false);\n\n    const position = useActionMenuPosition(open, triggerRef, menuRef, {\n        minWidth,\n        placement,\n        offset,\n    });\n\n    useEffect(() => {\n        if (!open) {\n            return;\n        }\n        if (focusOnOpen.current) {\n            focusEdge(menuRef.current, focusOnOpen.current);\n            focusOnOpen.current = null;\n        }\n        const closeOnOutsidePress = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const inside = [triggerRef.current, menuRef.current].some(\n                (node) => node && path.includes(node),\n            );\n            if (!inside) {\n                focusInMenu.current = false;\n                setOpen(false);\n            }\n        };\n        document.addEventListener('mousedown', closeOnOutsidePress, true);\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n        return () => {\n            document.removeEventListener('mousedown', closeOnOutsidePress, true);\n            popEscapeLayer();\n            const active = getDeepActiveElement();\n            if (focusInMenu.current && (!active || active === document.body)) {\n                triggerRef.current?.focus({ preventScroll: true });\n            }\n            focusInMenu.current = false;\n        };\n    }, [open]);\n\n    const toggleFromTrigger = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        const openedFromKeyboard = !open && event.detail === 0;\n        focusOnOpen.current = openedFromKeyboard ? 'first' : null;\n        setOpen((v) => !v);\n    };\n\n    const handleTriggerKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Tab' && open) {\n            setOpen(false);\n            return;\n        }\n        const edge = edgeForTriggerKey(event.key, placement);\n        if (!edge) {\n            return;\n        }\n        event.preventDefault();\n        if (open) {\n            focusEdge(menuRef.current, edge);\n            return;\n        }\n        focusOnOpen.current = edge;\n        setOpen(true);\n    };\n\n    const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'Tab') {\n            focusInMenu.current = false;\n            triggerRef.current?.focus({ preventScroll: true });\n            setOpen(false);\n            return;\n        }\n        const target = itemForMenuKey(enabledItems(menuRef.current), event.target, event.key);\n        if (target) {\n            event.preventDefault();\n            target.focus();\n        }\n    };\n\n    const selectItem = (item: ActionMenuItem) => {\n        if (item.type === 'divider' || item.type === 'text' || item.disabled) {\n            return;\n        }\n        item.onClick?.();\n        setOpen(false);\n    };\n\n    const ownTriggerRef = customTrigger ? elementRef<HTMLElement>(customTrigger) : undefined;\n    const composedTriggerRef = useMemo(\n        () => composeRefs(ownTriggerRef, triggerRef),\n        [ownTriggerRef],\n    );\n    const customHandlers = customTrigger?.props as TriggerHandlers | undefined;\n\n    const triggerElement = customTrigger ? (\n        React.cloneElement(customTrigger, {\n            ref: composedTriggerRef,\n            'aria-haspopup': 'menu',\n            'aria-expanded': open,\n            onClick: chainHandler(customHandlers?.onClick, toggleFromTrigger),\n            onMouseDown: chainHandler(customHandlers?.onMouseDown, stopPropagation),\n            onKeyDown: chainHandler(customHandlers?.onKeyDown, handleTriggerKeyDown),\n        } as Record<string, unknown>)\n    ) : (\n        <Button\n            ref={triggerRef as React.RefObject<HTMLButtonElement>}\n            type=\"button\"\n            variant={variant}\n            size={size}\n            iconOnly={!showLabel}\n            aria-label={showLabel ? undefined : label}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            className={`shrink-0${showLabel ? ' gap-2' : ''}`}\n            onClick={toggleFromTrigger}\n            onMouseDown={stopPropagation}\n            onKeyDown={handleTriggerKeyDown}\n        >\n            <span className={`inline-flex items-center justify-center ${triggerSize.iconBox}`}>\n                {triggerIcon ?? <MoreHorizontalIcon size={triggerSize.icon} />}\n            </span>\n            {showLabel && <span>{label}</span>}\n        </Button>\n    );\n\n    return (\n        <>\n            {triggerElement}\n            {open &&\n                createPortal(\n                    <div\n                        ref={menuRef}\n                        role=\"menu\"\n                        tabIndex={-1}\n                        aria-label={label}\n                        {...overlayIdentity('actionmenu')}\n                        style={menuStyle(position)}\n                        onMouseDown={stopPropagation}\n                        onClick={stopPropagation}\n                        onKeyDown={handleMenuKeyDown}\n                        onFocus={() => {\n                            focusInMenu.current = true;\n                        }}\n                        onBlur={(e) => {\n                            if (!menuRef.current?.contains(e.relatedTarget as Node | null)) {\n                                focusInMenu.current = false;\n                            }\n                        }}\n                    >\n                        {items.length === 0 && (\n                            <div role=\"menuitem\" aria-disabled=\"true\" style={EMPTY_ITEM_STYLE}>\n                                No actions available\n                            </div>\n                        )}\n                        {items.map((item) => (\n                            <MenuItemRow key={item.key} item={item} tone={tone} onSelect={selectItem} />\n                        ))}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ActionMenu;\n"],"names":["stopPropagation","event","MenuItemRow","item","tone","onSelect","jsx","itemStyle","TEXT_ITEM_STYLE","jsxs","ITEM_CLASS","ITEM_ICON_STYLE","LABEL_STYLE","ActionMenu","items","label","triggerIcon","minWidth","size","showLabel","variant","customTrigger","placement","offset","triggerSize","TRIGGER_SIZES","open","setOpen","useState","triggerRef","useRef","menuRef","focusOnOpen","focusInMenu","position","useActionMenuPosition","useEffect","focusEdge","closeOnOutsidePress","path","node","popEscapeLayer","pushEscapeLayer","active","getDeepActiveElement","_a","toggleFromTrigger","openedFromKeyboard","v","handleTriggerKeyDown","edge","edgeForTriggerKey","handleMenuKeyDown","target","itemForMenuKey","enabledItems","selectItem","ownTriggerRef","elementRef","composedTriggerRef","useMemo","composeRefs","customHandlers","triggerElement","React","chainHandler","Button","MoreHorizontalIcon","Fragment","createPortal","overlayIdentity","menuStyle","EMPTY_ITEM_STYLE"],"mappings":"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"}