@stackone/malachite 2.66.0 → 2.68.0

package/dist/components/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport {\n    PopoverAction,\n    PopoverEmpty,\n    PopoverHeader,\n    PopoverList,\n    PopoverSection,\n} from './PopoverParts';\nimport { getDeepActiveElement } from './activeElement';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n    type FloatingOffset,\n    type FloatingPlacement,\n    MENU_VIEWPORT_PADDING_PX,\n} from './floatingMenuGeometry';\nimport { firstTabStopIn } from './overlayBehaviour';\nimport { usePopupLayer } from './overlayLayers';\nimport { PopoverTreeContext } from './popoverTree';\nimport { useHoverClose } from './useHoverClose';\nimport { useLatestRef } from './useLatestRef';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { usePopoverTree } from './usePopoverTree';\n\nexport type PopoverPlacement = FloatingPlacement;\n\ninterface PopoverBaseProps {\n    trigger: React.ReactElement;\n    children?: React.ReactNode;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    placement?: PopoverPlacement;\n    openOn?: 'click' | 'hover';\n    width?: 'content' | 'trigger';\n    padding?: 'none' | 'small' | 'medium';\n    anchorRef?: React.RefObject<HTMLElement | null>;\n    offset?: FloatingOffset;\n    elevation?: 'default' | 'raised';\n    initialFocusRef?: React.RefObject<HTMLElement | null>;\n    /** A click panel also opens, focus inside, on the arrow key its placement points at. */\n    openOnArrowKey?: boolean;\n    role?: 'dialog' | 'menu' | 'listbox';\n    className?: string;\n}\n\ntype PopoverName =\n    | { 'aria-label': string; 'aria-labelledby'?: string }\n    | { 'aria-label'?: string; 'aria-labelledby': string };\n\nexport type PopoverProps = PopoverBaseProps & PopoverName;\n\nconst PANEL =\n    'font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]';\n\nconst ELEVATION: Record<NonNullable<PopoverBaseProps['elevation']>, string> = {\n    default: '[box-shadow:0px_4px_10px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n    raised: '[box-shadow:0px_8px_24px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n};\n\nconst PADDING: Record<NonNullable<PopoverBaseProps['padding']>, string> = {\n    none: 'p-0',\n    small: 'p-1',\n    medium: 'p-2',\n};\n\nconst pathHits = (path: EventTarget[], nodes: Iterable<Element | null | undefined>): boolean => {\n    for (const node of nodes) {\n        if (node && path.includes(node)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst KEYBOARD_OPEN_KEY: Record<string, string> = {\n    bottom: 'ArrowDown',\n    top: 'ArrowUp',\n    right: 'ArrowRight',\n    left: 'ArrowLeft',\n};\n\nconst isTextEntry = (target: EventTarget): boolean =>\n    target instanceof HTMLElement &&\n    (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\nconst composedPathOf = (node: EventTarget | null): Node[] => {\n    if (!(node instanceof Node)) {\n        return [];\n    }\n    const root = node.getRootNode();\n    return [node, ...(root instanceof ShadowRoot ? composedPathOf(root.host) : [])];\n};\n\nconst subscribeToNothing = () => () => undefined;\nconst onClient = () => true;\nconst onServer = () => false;\n\nconst focusTarget = (panel: HTMLElement, initial: HTMLElement | null | undefined): HTMLElement =>\n    initial ?? firstTabStopIn(panel) ?? panel;\n\n/** An anchored, non-modal panel; nested Popovers count as inside their parent. */\nconst PopoverRoot: React.FC<PopoverProps> = ({\n    trigger,\n    children,\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    openOn = 'click',\n    width = 'content',\n    padding = 'small',\n    anchorRef,\n    offset = 'small',\n    elevation = 'default',\n    initialFocusRef,\n    openOnArrowKey = false,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const parent = useContext(PopoverTreeContext);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const isOpen = controlledOpen ?? uncontrolledOpen;\n    const isClient = useSyncExternalStore(subscribeToNothing, onClient, onServer);\n\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const popupIdentity = usePopupLayer('popover', isOpen, hostRef);\n    const [panel, setPanel] = useState<HTMLDivElement | null>(null);\n    const heldByChildren = useRef(0);\n    const focusOnOpen = useRef(false);\n    const returningFocus = useRef(false);\n    const pointerPressedTrigger = useRef(false);\n\n    const isOpenRef = useLatestRef(isOpen);\n    const controlledRef = useLatestRef(controlledOpen);\n    const onOpenChangeRef = useLatestRef(onOpenChange);\n\n    const setOpen = useCallback(\n        (next: boolean) => {\n            if (next === isOpenRef.current) {\n                return;\n            }\n            if (controlledRef.current === undefined) {\n                setUncontrolledOpen(next);\n            }\n            onOpenChangeRef.current?.(next);\n        },\n        [isOpenRef, controlledRef, onOpenChangeRef],\n    );\n\n    const { pointerInside, focusInside, triggerFocused, cancelClose, scheduleClose } =\n        useHoverClose({\n            isOpenRef,\n            heldByChildren,\n            setOpen,\n        });\n\n    const { tree, ownedSources } = usePopoverTree({\n        parent,\n        isOpen,\n        openOn,\n        isOpenRef,\n        heldByChildren,\n        cancelClose,\n        scheduleClose,\n    });\n\n    const geometry = usePopoverPosition({\n        isOpen,\n        panel,\n        hostRef,\n        triggerRef,\n        anchorRef,\n        placement,\n        width,\n        offset,\n    });\n\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n        const closeOnOutsidePress = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const inside = pathHits(path, [\n                triggerRef.current,\n                hostRef.current,\n                ...[...ownedSources.current].map((source) => source()),\n            ]);\n            if (!inside) {\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            pointerInside.current = false;\n            const active = getDeepActiveElement();\n            if (focusInside.current && (!active || active === document.body)) {\n                returningFocus.current = true;\n                triggerRef.current?.focus({ preventScroll: true });\n                returningFocus.current = false;\n            }\n            focusInside.current = false;\n        };\n    }, [isOpen, setOpen, ownedSources, pointerInside, focusInside]);\n\n    const shown = isOpen && panel !== null && geometry !== null;\n\n    useEffect(() => {\n        const shouldFocus = openOn === 'click' || focusOnOpen.current;\n        if (!shown || !panel || !shouldFocus) {\n            return;\n        }\n        focusOnOpen.current = false;\n        focusTarget(panel, initialFocusRef?.current).focus({ preventScroll: true });\n    }, [shown, panel, openOn, initialFocusRef]);\n\n    const openWithFocus = () => {\n        cancelClose();\n        if (isOpen && panel) {\n            focusTarget(panel, initialFocusRef?.current).focus({ preventScroll: true });\n            return;\n        }\n        focusOnOpen.current = true;\n        setOpen(true);\n    };\n\n    const isInside = (node: EventTarget | null): boolean => {\n        const containers = [\n            triggerRef.current,\n            hostRef.current,\n            panel,\n            ...[...ownedSources.current].map((source) => source()),\n        ];\n        return composedPathOf(node).some((step) =>\n            containers.some((container) => container?.contains(step)),\n        );\n    };\n\n    const closeIfFocusLeft = (next: EventTarget | null) => {\n        if (!next) {\n            return;\n        }\n        queueMicrotask(() => {\n            if (!isInside(next) && !isInside(getDeepActiveElement())) {\n                setOpen(false);\n            }\n        });\n    };\n\n    const hoverHandlers =\n        openOn === 'hover'\n            ? {\n                  onMouseEnter: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                      setOpen(true);\n                  },\n                  onMouseLeave: () => {\n                      pointerInside.current = false;\n                      scheduleClose();\n                  },\n                  onPanelMouseOver: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                  },\n              }\n            : null;\n\n    const triggerProps = trigger.props as Record<string, unknown>;\n    type Handler<E extends React.SyntheticEvent> = ((event: E) => void) | undefined;\n\n    const ownTriggerRef = elementRef<HTMLElement>(trigger);\n    const composedTriggerRef = useMemo(\n        () => composeRefs(ownTriggerRef, triggerRef),\n        [ownTriggerRef],\n    );\n    const openKey = KEYBOARD_OPEN_KEY[placement.split('-')[0]];\n\n    const clonedTrigger = React.cloneElement(trigger, {\n        ref: composedTriggerRef,\n        'aria-haspopup': role,\n        'aria-expanded': isOpen,\n        onClick: chainHandler(\n            triggerProps.onClick as Handler<React.MouseEvent>,\n            (event: React.MouseEvent) => {\n                if (openOn !== 'hover') {\n                    setOpen(!isOpen);\n                    return;\n                }\n                const fromKeyboard = event.detail === 0;\n                if (fromKeyboard) {\n                    openWithFocus();\n                    return;\n                }\n                cancelClose();\n                setOpen(true);\n            },\n        ),\n        ...(hoverHandlers\n            ? {\n                  onMouseEnter: chainHandler(\n                      triggerProps.onMouseEnter as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseEnter,\n                  ),\n                  onMouseLeave: chainHandler(\n                      triggerProps.onMouseLeave as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseLeave,\n                  ),\n                  onMouseDown: chainHandler(\n                      triggerProps.onMouseDown as Handler<React.MouseEvent>,\n                      () => {\n                          pointerPressedTrigger.current = true;\n                          setTimeout(() => {\n                              pointerPressedTrigger.current = false;\n                          });\n                      },\n                  ),\n                  onFocus: chainHandler(triggerProps.onFocus as Handler<React.FocusEvent>, () => {\n                      const fromPointer = pointerPressedTrigger.current;\n                      pointerPressedTrigger.current = false;\n                      triggerFocused.current = !fromPointer && !returningFocus.current;\n                      if (returningFocus.current) {\n                          return;\n                      }\n                      cancelClose();\n                      setOpen(true);\n                  }),\n                  onKeyDown: chainHandler(\n                      triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                      (event: React.KeyboardEvent) => {\n                          if (event.key !== openKey) {\n                              return;\n                          }\n                          event.preventDefault();\n                          openWithFocus();\n                      },\n                  ),\n              }\n            : openOnArrowKey\n              ? {\n                    onKeyDown: chainHandler(\n                        triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                        (event: React.KeyboardEvent) => {\n                            if (event.key !== openKey || isTextEntry(event.target)) {\n                                return;\n                            }\n                            event.preventDefault();\n                            openWithFocus();\n                        },\n                    ),\n                }\n              : {}),\n        onBlur: chainHandler(\n            triggerProps.onBlur as Handler<React.FocusEvent>,\n            (event: React.FocusEvent) => {\n                triggerFocused.current = false;\n                if (!isOpen || isInside(event.relatedTarget)) {\n                    return;\n                }\n                if (openOn === 'hover') {\n                    scheduleClose();\n                    return;\n                }\n                closeIfFocusLeft(event.relatedTarget);\n            },\n        ),\n    } as Record<string, unknown>);\n\n    const panelStyle: React.CSSProperties = {\n        maxHeight: geometry?.maxHeight,\n        maxWidth: `calc(100vw - ${MENU_VIEWPORT_PADDING_PX * 2}px)`,\n        visibility: geometry ? 'visible' : 'hidden',\n    };\n\n    return (\n        <>\n            {clonedTrigger}\n            {isOpen &&\n                isClient &&\n                createPortal(\n                    <PopoverTreeContext.Provider value={tree}>\n                        <ShadowRootWrapper\n                            hostRef={hostRef}\n                            hostProps={popupIdentity}\n                            hostStyle={{\n                                position: 'fixed',\n                                top: geometry?.top ?? 0,\n                                left: geometry?.left ?? 0,\n                            }}\n                        >\n                            <div\n                                ref={setPanel}\n                                role={role}\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                data-side={geometry?.side}\n                                tabIndex={-1}\n                                className={`${PANEL} ${ELEVATION[elevation]} ${PADDING[padding]} ${className}`.trim()}\n                                style={panelStyle}\n                                // React's mouseenter stops at the shadow host, so the panel listens for mouseover.\n                                onMouseOver={hoverHandlers?.onPanelMouseOver}\n                                onMouseLeave={hoverHandlers?.onMouseLeave}\n                                onFocus={() => {\n                                    focusInside.current = true;\n                                    cancelClose();\n                                }}\n                                onBlur={(event) => {\n                                    if (isInside(event.relatedTarget)) {\n                                        return;\n                                    }\n                                    focusInside.current = false;\n                                    if (openOn === 'hover') {\n                                        scheduleClose();\n                                        return;\n                                    }\n                                    closeIfFocusLeft(event.relatedTarget);\n                                }}\n                            >\n                                {children}\n                            </div>\n                        </ShadowRootWrapper>\n                    </PopoverTreeContext.Provider>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport const Popover = Object.assign(PopoverRoot, {\n    Header: PopoverHeader,\n    Action: PopoverAction,\n    List: PopoverList,\n    Section: PopoverSection,\n    Empty: PopoverEmpty,\n});\n\nexport default Popover;\n"],"names":["PANEL","ELEVATION","PADDING","pathHits","path","nodes","node","KEYBOARD_OPEN_KEY","isTextEntry","target","composedPathOf","root","subscribeToNothing","onClient","onServer","focusTarget","panel","initial","firstTabStopIn","PopoverRoot","trigger","children","controlledOpen","defaultOpen","onOpenChange","placement","openOn","width","padding","anchorRef","offset","elevation","initialFocusRef","openOnArrowKey","role","ariaLabel","ariaLabelledBy","className","parent","useContext","PopoverTreeContext","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","isClient","useSyncExternalStore","triggerRef","useRef","hostRef","popupIdentity","usePopupLayer","setPanel","heldByChildren","focusOnOpen","returningFocus","pointerPressedTrigger","isOpenRef","useLatestRef","controlledRef","onOpenChangeRef","setOpen","useCallback","next","_a","pointerInside","focusInside","triggerFocused","cancelClose","scheduleClose","useHoverClose","tree","ownedSources","usePopoverTree","geometry","usePopoverPosition","useEffect","closeOnOutsidePress","event","source","popEscapeLayer","pushEscapeLayer","active","getDeepActiveElement","shown","shouldFocus","openWithFocus","isInside","containers","step","container","closeIfFocusLeft","hoverHandlers","triggerProps","ownTriggerRef","elementRef","composedTriggerRef","useMemo","composeRefs","openKey","clonedTrigger","React","chainHandler","fromPointer","panelStyle","MENU_VIEWPORT_PADDING_PX","jsxs","Fragment","createPortal","jsx","ShadowRootWrapper","Popover","PopoverHeader","PopoverAction","PopoverList","PopoverSection","PopoverEmpty"],"mappings":";;;;;;;;;;;;;;;;AA8DA,MAAMA,KACF,kRAEEC,KAAwE;AAAA,EAC1E,SAAS;AAAA,EACT,QAAQ;AACZ,GAEMC,KAAoE;AAAA,EACtE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,KAAW,CAACC,GAAqBC,MAAyD;AAC5F,aAAWC,KAAQD;AACf,QAAIC,KAAQF,EAAK,SAASE,CAAI;AAC1B,aAAO;AAGf,SAAO;AACX,GAEMC,KAA4C;AAAA,EAC9C,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACV,GAEMC,KAAc,CAACC,MACjBA,aAAkB,gBACjBA,EAAO,qBAAqB,CAAC,SAAS,YAAY,QAAQ,EAAE,SAASA,EAAO,OAAO,IAElFC,IAAiB,CAACJ,MAAqC;AACzD,MAAI,EAAEA,aAAgB;AAClB,WAAO,CAAA;AAEX,QAAMK,IAAOL,EAAK,YAAA;AAClB,SAAO,CAACA,GAAM,GAAIK,aAAgB,aAAaD,EAAeC,EAAK,IAAI,IAAI,EAAG;AAClF,GAEMC,KAAqB,MAAM,MAAA;AAAA,GAC3BC,KAAW,MAAM,IACjBC,KAAW,MAAM,IAEjBC,IAAc,CAACC,GAAoBC,MACrCA,KAAWC,GAAeF,CAAK,KAAKA,GAGlCG,KAAsC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,KAAY;AAAA,EACZ,iBAAAC;AAAA,EACA,gBAAAC,KAAiB;AAAA,EACjB,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,KAAY;AAChB,MAAM;AACF,QAAMC,KAASC,GAAWC,CAAkB,GACtC,CAACC,IAAkBC,EAAmB,IAAIC,EAASpB,CAAW,GAC9DqB,IAAStB,KAAkBmB,IAC3BI,KAAWC,GAAqBlC,IAAoBC,IAAUC,EAAQ,GAEtEiC,IAAaC,EAA2B,IAAI,GAC5CC,IAAUD,EAA8B,IAAI,GAC5CE,KAAgBC,GAAc,WAAWP,GAAQK,CAAO,GACxD,CAACjC,GAAOoC,EAAQ,IAAIT,EAAgC,IAAI,GACxDU,IAAiBL,EAAO,CAAC,GACzBM,IAAcN,EAAO,EAAK,GAC1BO,IAAiBP,EAAO,EAAK,GAC7BQ,IAAwBR,EAAO,EAAK,GAEpCS,IAAYC,EAAad,CAAM,GAC/Be,IAAgBD,EAAapC,CAAc,GAC3CsC,IAAkBF,EAAalC,CAAY,GAE3CqC,IAAUC;AAAA,IACZ,CAACC,MAAkB;;AACf,MAAIA,MAASN,EAAU,YAGnBE,EAAc,YAAY,UAC1BjB,GAAoBqB,CAAI,IAE5BC,IAAAJ,EAAgB,YAAhB,QAAAI,EAAA,KAAAJ,GAA0BG;AAAA,IAC9B;AAAA,IACA,CAACN,GAAWE,GAAeC,CAAe;AAAA,EAAA,GAGxC,EAAE,eAAAK,GAAe,aAAAC,GAAa,gBAAAC,GAAgB,aAAAC,GAAa,eAAAC,EAAA,IAC7DC,GAAc;AAAA,IACV,WAAAb;AAAA,IACA,gBAAAJ;AAAA,IACA,SAAAQ;AAAA,EAAA,CACH,GAEC,EAAE,MAAAU,IAAM,cAAAC,EAAA,IAAiBC,GAAe;AAAA,IAC1C,QAAAnC;AAAA,IACA,QAAAM;AAAA,IACA,QAAAlB;AAAA,IACA,WAAA+B;AAAA,IACA,gBAAAJ;AAAA,IACA,aAAAe;AAAA,IACA,eAAAC;AAAA,EAAA,CACH,GAEKK,IAAWC,GAAmB;AAAA,IAChC,QAAA/B;AAAA,IACA,OAAA5B;AAAA,IACA,SAAAiC;AAAA,IACA,YAAAF;AAAA,IACA,WAAAlB;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAE;AAAA,IACA,QAAAG;AAAA,EAAA,CACH;AAED,EAAA8C,EAAU,MAAM;AACZ,QAAI,CAAChC;AACD;AAEJ,UAAMiC,IAAsB,CAACC,MAAsB;AAC/C,YAAM1E,IAAO0E,EAAM,aAAA;AAMnB,MALe3E,GAASC,GAAM;AAAA,QAC1B2C,EAAW;AAAA,QACXE,EAAQ;AAAA,QACR,GAAG,CAAC,GAAGuB,EAAa,OAAO,EAAE,IAAI,CAACO,OAAWA,GAAA,CAAQ;AAAA,MAAA,CACxD,KAEGlB,EAAQ,EAAK;AAAA,IAErB;AACA,aAAS,iBAAiB,aAAagB,GAAqB,EAAI;AAChE,UAAMG,IAAiBC,GAAgB,MAAMpB,EAAQ,EAAK,CAAC;AAC3D,WAAO,MAAM;;AACT,eAAS,oBAAoB,aAAagB,GAAqB,EAAI,GACnEG,EAAA,GACAf,EAAc,UAAU;AACxB,YAAMiB,IAASC,EAAA;AACf,MAAIjB,EAAY,YAAY,CAACgB,KAAUA,MAAW,SAAS,UACvD3B,EAAe,UAAU,KACzBS,IAAAjB,EAAW,YAAX,QAAAiB,EAAoB,MAAM,EAAE,eAAe,OAC3CT,EAAe,UAAU,KAE7BW,EAAY,UAAU;AAAA,IAC1B;AAAA,EACJ,GAAG,CAACtB,GAAQiB,GAASW,GAAcP,GAAeC,CAAW,CAAC;AAE9D,QAAMkB,IAAQxC,KAAU5B,MAAU,QAAQ0D,MAAa;AAEvD,EAAAE,EAAU,MAAM;AACZ,UAAMS,IAAc3D,MAAW,WAAW4B,EAAY;AACtD,IAAI,CAAC8B,KAAS,CAACpE,KAAS,CAACqE,MAGzB/B,EAAY,UAAU,IACtBvC,EAAYC,GAAOgB,KAAA,gBAAAA,EAAiB,OAAO,EAAE,MAAM,EAAE,eAAe,IAAM;AAAA,EAC9E,GAAG,CAACoD,GAAOpE,GAAOU,GAAQM,CAAe,CAAC;AAE1C,QAAMsD,IAAgB,MAAM;AAExB,QADAlB,EAAA,GACIxB,KAAU5B,GAAO;AACjB,MAAAD,EAAYC,GAAOgB,KAAA,gBAAAA,EAAiB,OAAO,EAAE,MAAM,EAAE,eAAe,IAAM;AAC1E;AAAA,IACJ;AACA,IAAAsB,EAAY,UAAU,IACtBO,EAAQ,EAAI;AAAA,EAChB,GAEM0B,IAAW,CAACjF,MAAsC;AACpD,UAAMkF,IAAa;AAAA,MACfzC,EAAW;AAAA,MACXE,EAAQ;AAAA,MACRjC;AAAA,MACA,GAAG,CAAC,GAAGwD,EAAa,OAAO,EAAE,IAAI,CAACO,MAAWA,EAAA,CAAQ;AAAA,IAAA;AAEzD,WAAOrE,EAAeJ,CAAI,EAAE;AAAA,MAAK,CAACmF,MAC9BD,EAAW,KAAK,CAACE,MAAcA,KAAA,gBAAAA,EAAW,SAASD,EAAK;AAAA,IAAA;AAAA,EAEhE,GAEME,IAAmB,CAAC5B,MAA6B;AACnD,IAAKA,KAGL,eAAe,MAAM;AACjB,MAAI,CAACwB,EAASxB,CAAI,KAAK,CAACwB,EAASJ,EAAA,CAAsB,KACnDtB,EAAQ,EAAK;AAAA,IAErB,CAAC;AAAA,EACL,GAEM+B,IACFlE,MAAW,UACL;AAAA,IACI,cAAc,MAAM;AAChB,MAAAuC,EAAc,UAAU,IACxBG,EAAA,GACAP,EAAQ,EAAI;AAAA,IAChB;AAAA,IACA,cAAc,MAAM;AAChB,MAAAI,EAAc,UAAU,IACxBI,EAAA;AAAA,IACJ;AAAA,IACA,kBAAkB,MAAM;AACpB,MAAAJ,EAAc,UAAU,IACxBG,EAAA;AAAA,IACJ;AAAA,EAAA,IAEJ,MAEJyB,IAAezE,EAAQ,OAGvB0E,IAAgBC,GAAwB3E,CAAO,GAC/C4E,KAAqBC;AAAA,IACvB,MAAMC,GAAYJ,GAAe/C,CAAU;AAAA,IAC3C,CAAC+C,CAAa;AAAA,EAAA,GAEZK,IAAU5F,GAAkBkB,EAAU,MAAM,GAAG,EAAE,CAAC,CAAC,GAEnD2E,KAAgBC,GAAM,aAAajF,GAAS;AAAA,IAC9C,KAAK4E;AAAA,IACL,iBAAiB9D;AAAA,IACjB,iBAAiBU;AAAA,IACjB,SAAS0D;AAAA,MACLT,EAAa;AAAA,MACb,CAACf,MAA4B;AACzB,YAAIpD,MAAW,SAAS;AACpB,UAAAmC,EAAQ,CAACjB,CAAM;AACf;AAAA,QACJ;AAEA,YADqBkC,EAAM,WAAW,GACpB;AACd,UAAAQ,EAAA;AACA;AAAA,QACJ;AACA,QAAAlB,EAAA,GACAP,EAAQ,EAAI;AAAA,MAChB;AAAA,IAAA;AAAA,IAEJ,GAAI+B,IACE;AAAA,MACI,cAAcU;AAAA,QACVT,EAAa;AAAA,QACbD,EAAc;AAAA,MAAA;AAAA,MAElB,cAAcU;AAAA,QACVT,EAAa;AAAA,QACbD,EAAc;AAAA,MAAA;AAAA,MAElB,aAAaU;AAAA,QACTT,EAAa;AAAA,QACb,MAAM;AACF,UAAArC,EAAsB,UAAU,IAChC,WAAW,MAAM;AACb,YAAAA,EAAsB,UAAU;AAAA,UACpC,CAAC;AAAA,QACL;AAAA,MAAA;AAAA,MAEJ,SAAS8C,EAAaT,EAAa,SAAsC,MAAM;AAC3E,cAAMU,IAAc/C,EAAsB;AAG1C,QAFAA,EAAsB,UAAU,IAChCW,EAAe,UAAU,CAACoC,KAAe,CAAChD,EAAe,SACrD,CAAAA,EAAe,YAGnBa,EAAA,GACAP,EAAQ,EAAI;AAAA,MAChB,CAAC;AAAA,MACD,WAAWyC;AAAA,QACPT,EAAa;AAAA,QACb,CAACf,MAA+B;AAC5B,UAAIA,EAAM,QAAQqB,MAGlBrB,EAAM,eAAA,GACNQ,EAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IACJ,IAEJrD,KACE;AAAA,MACI,WAAWqE;AAAA,QACPT,EAAa;AAAA,QACb,CAACf,MAA+B;AAC5B,UAAIA,EAAM,QAAQqB,KAAW3F,GAAYsE,EAAM,MAAM,MAGrDA,EAAM,eAAA,GACNQ,EAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IACJ,IAEJ,CAAA;AAAA,IACR,QAAQgB;AAAA,MACJT,EAAa;AAAA,MACb,CAACf,MAA4B;AAEzB,YADAX,EAAe,UAAU,IACrB,GAACvB,KAAU2C,EAAST,EAAM,aAAa,IAG3C;AAAA,cAAIpD,MAAW,SAAS;AACpB,YAAA2C,EAAA;AACA;AAAA,UACJ;AACA,UAAAsB,EAAiBb,EAAM,aAAa;AAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EACJ,CACwB,GAEtB0B,KAAkC;AAAA,IACpC,WAAW9B,KAAA,gBAAAA,EAAU;AAAA,IACrB,UAAU,gBAAgB+B,KAA2B,CAAC;AAAA,IACtD,YAAY/B,IAAW,YAAY;AAAA,EAAA;AAGvC,SACI,gBAAAgC,GAAAC,IAAA,EACK,UAAA;AAAA,IAAAP;AAAA,IACAxD,KACGC,MACA+D;AAAA,MACI,gBAAAC,EAACrE,EAAmB,UAAnB,EAA4B,OAAO+B,IAChC,UAAA,gBAAAsC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,SAAA7D;AAAA,UACA,WAAWC;AAAA,UACX,WAAW;AAAA,YACP,UAAU;AAAA,YACV,MAAKwB,KAAA,gBAAAA,EAAU,QAAO;AAAA,YACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,UAAA;AAAA,UAG5B,UAAA,gBAAAmC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKzD;AAAA,cACL,MAAAlB;AAAA,cACA,cAAYC;AAAA,cACZ,mBAAiBC;AAAA,cACjB,aAAWsC,KAAA,gBAAAA,EAAU;AAAA,cACrB,UAAU;AAAA,cACV,WAAW,GAAG1E,EAAK,IAAIC,GAAU8B,EAAS,CAAC,IAAI7B,GAAQ0B,CAAO,CAAC,IAAIS,EAAS,GAAG,KAAA;AAAA,cAC/E,OAAOmE;AAAA,cAEP,aAAaZ,KAAA,gBAAAA,EAAe;AAAA,cAC5B,cAAcA,KAAA,gBAAAA,EAAe;AAAA,cAC7B,SAAS,MAAM;AACX,gBAAA1B,EAAY,UAAU,IACtBE,EAAA;AAAA,cACJ;AAAA,cACA,QAAQ,CAACU,MAAU;AACf,oBAAI,CAAAS,EAAST,EAAM,aAAa,GAIhC;AAAA,sBADAZ,EAAY,UAAU,IAClBxC,MAAW,SAAS;AACpB,oBAAA2C,EAAA;AACA;AAAA,kBACJ;AACA,kBAAAsB,EAAiBb,EAAM,aAAa;AAAA;AAAA,cACxC;AAAA,cAEC,UAAAzD;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA,GAER;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,EACb,GACR;AAER,GAEa0F,KAAU,OAAO,OAAO5F,IAAa;AAAA,EAC9C,QAAQ6F;AAAA,EACR,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,OAAOC;AACX,CAAC;"}
+{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport {\n    PopoverAction,\n    PopoverEmpty,\n    PopoverHeader,\n    PopoverList,\n    PopoverNote,\n    PopoverSearch,\n    PopoverSection,\n    PopoverStatus,\n} from './PopoverParts';\nimport { getDeepActiveElement } from './activeElement';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { pushEscapeLayer } from './escapeLayers';\nimport {\n    type FloatingOffset,\n    type FloatingPlacement,\n    MENU_VIEWPORT_PADDING_PX,\n} from './floatingMenuGeometry';\nimport { firstTabStopIn } from './overlayBehaviour';\nimport { usePopupLayer } from './overlayLayers';\nimport { PopoverShownContext, PopoverTreeContext } from './popoverTree';\nimport { useHoverClose } from './useHoverClose';\nimport { useLatestRef } from './useLatestRef';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { usePopoverTree } from './usePopoverTree';\n\nexport type PopoverPlacement = FloatingPlacement;\n\nexport type PopoverInitialFocus =\n    | React.RefObject<HTMLElement | null>\n    | (() => HTMLElement | null | undefined);\n\ninterface PopoverBaseProps {\n    trigger: React.ReactElement;\n    children?: React.ReactNode;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    placement?: PopoverPlacement;\n    openOn?: 'click' | 'hover';\n    width?: 'content' | 'trigger';\n    padding?: 'none' | 'small' | 'medium';\n    anchorRef?: React.RefObject<HTMLElement | null>;\n    offset?: FloatingOffset;\n    elevation?: 'default' | 'raised';\n    /** A click panel also opens, focus inside, on the arrow key its placement points at. */\n    openOnArrowKey?: boolean;\n    role?: 'dialog' | 'menu' | 'listbox';\n    className?: string;\n}\n\ntype PopoverName =\n    | { 'aria-label': string; 'aria-labelledby'?: string }\n    | { 'aria-label'?: string; 'aria-labelledby': string };\n\ntype PopoverFocusSource =\n    | {\n          /**\n           * What takes focus when the panel is shown, in place of its first tab stop. Re-read as the\n           * content changes, so focus follows late content but never leaves where the user moved it.\n           */\n          initialFocus?: PopoverInitialFocus;\n          initialFocusRef?: never;\n      }\n    | {\n          initialFocus?: never;\n          /** @deprecated Use `initialFocus`, which takes the same ref and also follows late content. */\n          initialFocusRef?: React.RefObject<HTMLElement | null>;\n      };\n\nexport type PopoverProps = PopoverBaseProps & PopoverName & PopoverFocusSource;\n\nconst PANEL =\n    'font-sans box-border overflow-auto outline-none rounded-[var(--malachite-radius-xl,12px)] border border-solid border-[var(--malachite-card-border,rgb(232,232,232))] bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-primary,rgb(10,10,10))]';\n\nconst ELEVATION: Record<NonNullable<PopoverBaseProps['elevation']>, string> = {\n    default: '[box-shadow:0px_4px_10px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n    raised: '[box-shadow:0px_8px_24px_0px_var(--malachite-card-shadow,rgba(0,0,0,0.1))]',\n};\n\nconst PADDING: Record<NonNullable<PopoverBaseProps['padding']>, string> = {\n    none: 'p-0',\n    small: 'p-1',\n    medium: 'p-2',\n};\n\nconst pathHits = (path: EventTarget[], nodes: Iterable<Element | null | undefined>): boolean => {\n    for (const node of nodes) {\n        if (node && path.includes(node)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst KEYBOARD_OPEN_KEY: Record<string, string> = {\n    bottom: 'ArrowDown',\n    top: 'ArrowUp',\n    right: 'ArrowRight',\n    left: 'ArrowLeft',\n};\n\nconst isTextEntry = (target: EventTarget): boolean =>\n    target instanceof HTMLElement &&\n    (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\nconst composedPathOf = (node: EventTarget | null): Node[] => {\n    if (!(node instanceof Node)) {\n        return [];\n    }\n    const root = node.getRootNode();\n    return [node, ...(root instanceof ShadowRoot ? composedPathOf(root.host) : [])];\n};\n\nconst subscribeToNothing = () => () => undefined;\nconst onClient = () => true;\nconst onServer = () => false;\n\nconst focusTarget = (panel: HTMLElement, initial: HTMLElement | null | undefined): HTMLElement =>\n    initial ?? firstTabStopIn(panel) ?? panel;\n\nconst resolveFocus = (source: PopoverInitialFocus | undefined): HTMLElement | null | undefined =>\n    typeof source === 'function' ? source() : source?.current;\n\n// Some engines keep a removed element as `activeElement`, and a shadow host with nothing\n// focused inside it holds focus for no one.\nconst focusIsLost = (active: HTMLElement | null, host: HTMLElement | null): boolean =>\n    !active || active === document.body || !active.isConnected || active === host;\n\n/** An anchored, non-modal panel; nested Popovers count as inside their parent. */\nconst PopoverRoot: React.FC<PopoverProps> = ({\n    trigger,\n    children,\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    openOn = 'click',\n    width = 'content',\n    padding = 'small',\n    anchorRef,\n    offset = 'small',\n    elevation = 'default',\n    initialFocus,\n    initialFocusRef,\n    openOnArrowKey = false,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const parent = useContext(PopoverTreeContext);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const isOpen = controlledOpen ?? uncontrolledOpen;\n    const isClient = useSyncExternalStore(subscribeToNothing, onClient, onServer);\n\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const popupIdentity = usePopupLayer('popover', isOpen, hostRef);\n    const [panel, setPanel] = useState<HTMLDivElement | null>(null);\n    const heldByChildren = useRef(0);\n    const focusOnOpen = useRef(false);\n    const returningFocus = useRef(false);\n    const pointerPressedTrigger = useRef(false);\n    const placedFocus = useRef<HTMLElement | null>(null);\n    const heldFocus = useRef<HTMLElement | null>(null);\n\n    const isOpenRef = useLatestRef(isOpen);\n    const controlledRef = useLatestRef(controlledOpen);\n    const onOpenChangeRef = useLatestRef(onOpenChange);\n    const initialFocusSource = useLatestRef(initialFocus);\n    const followsContent = initialFocus !== undefined;\n\n    const setOpen = useCallback(\n        (next: boolean) => {\n            if (next === isOpenRef.current) {\n                return;\n            }\n            if (controlledRef.current === undefined) {\n                setUncontrolledOpen(next);\n            }\n            onOpenChangeRef.current?.(next);\n        },\n        [isOpenRef, controlledRef, onOpenChangeRef],\n    );\n\n    const { pointerInside, focusInside, triggerFocused, cancelClose, scheduleClose } =\n        useHoverClose({\n            isOpenRef,\n            heldByChildren,\n            setOpen,\n        });\n\n    const { tree, ownedSources } = usePopoverTree({\n        parent,\n        isOpen,\n        openOn,\n        isOpenRef,\n        heldByChildren,\n        cancelClose,\n        scheduleClose,\n    });\n\n    const geometry = usePopoverPosition({\n        isOpen,\n        panel,\n        hostRef,\n        triggerRef,\n        anchorRef,\n        placement,\n        width,\n        offset,\n    });\n\n    useEffect(() => {\n        if (!isOpen) {\n            return;\n        }\n        const closeOnOutsidePress = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const inside = pathHits(path, [\n                triggerRef.current,\n                hostRef.current,\n                ...[...ownedSources.current].map((source) => source()),\n            ]);\n            if (!inside) {\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            pointerInside.current = false;\n            const active = getDeepActiveElement();\n            if (focusInside.current && (!active || active === document.body)) {\n                returningFocus.current = true;\n                triggerRef.current?.focus({ preventScroll: true });\n                returningFocus.current = false;\n            }\n            focusInside.current = false;\n            placedFocus.current = null;\n            heldFocus.current = null;\n        };\n    }, [isOpen, setOpen, ownedSources, pointerInside, focusInside]);\n\n    const shown = isOpen && panel !== null && geometry !== null;\n\n    const placeFocus = useCallback((target: HTMLElement) => {\n        placedFocus.current = target;\n        target.focus({ preventScroll: true });\n    }, []);\n\n    useEffect(() => {\n        const shouldFocus = openOn === 'click' || focusOnOpen.current;\n        if (!shown || !panel || !shouldFocus) {\n            return;\n        }\n        focusOnOpen.current = false;\n        const initial = followsContent\n            ? resolveFocus(initialFocusSource.current)\n            : initialFocusRef?.current;\n        placeFocus(focusTarget(panel, initial));\n    }, [shown, panel, openOn, followsContent, initialFocusRef, initialFocusSource, placeFocus]);\n\n    useEffect(() => {\n        if (!shown || !panel || !followsContent) {\n            return;\n        }\n        const followContent = () => {\n            const active = getDeepActiveElement();\n            if (focusIsLost(active, hostRef.current)) {\n                if (heldFocus.current && !heldFocus.current.isConnected) {\n                    placeFocus(focusTarget(panel, resolveFocus(initialFocusSource.current)));\n                }\n                return;\n            }\n            if (active !== placedFocus.current) {\n                return;\n            }\n            const next =\n                resolveFocus(initialFocusSource.current) ??\n                (active === panel ? firstTabStopIn(panel) : null);\n            if (next && next !== active && next.isConnected) {\n                placeFocus(next);\n            }\n        };\n        const observer = new MutationObserver(followContent);\n        observer.observe(panel, { childList: true, subtree: true });\n        return () => observer.disconnect();\n    }, [shown, panel, followsContent, initialFocusSource, placeFocus]);\n\n    const openWithFocus = () => {\n        cancelClose();\n        if (isOpen && panel) {\n            const initial = followsContent\n                ? resolveFocus(initialFocusSource.current)\n                : initialFocusRef?.current;\n            placeFocus(focusTarget(panel, initial));\n            return;\n        }\n        focusOnOpen.current = true;\n        setOpen(true);\n    };\n\n    const isInside = (node: EventTarget | null): boolean => {\n        const containers = [\n            triggerRef.current,\n            hostRef.current,\n            panel,\n            ...[...ownedSources.current].map((source) => source()),\n        ];\n        return composedPathOf(node).some((step) =>\n            containers.some((container) => container?.contains(step)),\n        );\n    };\n\n    const closeIfFocusLeft = (next: EventTarget | null) => {\n        if (!next) {\n            return;\n        }\n        queueMicrotask(() => {\n            if (!isInside(next) && !isInside(getDeepActiveElement())) {\n                setOpen(false);\n            }\n        });\n    };\n\n    const hoverHandlers =\n        openOn === 'hover'\n            ? {\n                  onMouseEnter: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                      setOpen(true);\n                  },\n                  onMouseLeave: () => {\n                      pointerInside.current = false;\n                      scheduleClose();\n                  },\n                  onPanelMouseOver: () => {\n                      pointerInside.current = true;\n                      cancelClose();\n                  },\n              }\n            : null;\n\n    const triggerProps = trigger.props as Record<string, unknown>;\n    type Handler<E extends React.SyntheticEvent> = ((event: E) => void) | undefined;\n\n    const ownTriggerRef = elementRef<HTMLElement>(trigger);\n    const composedTriggerRef = useMemo(\n        () => composeRefs(ownTriggerRef, triggerRef),\n        [ownTriggerRef],\n    );\n    const openKey = KEYBOARD_OPEN_KEY[placement.split('-')[0]];\n\n    const clonedTrigger = React.cloneElement(trigger, {\n        ref: composedTriggerRef,\n        'aria-haspopup': role,\n        'aria-expanded': isOpen,\n        onClick: chainHandler(\n            triggerProps.onClick as Handler<React.MouseEvent>,\n            (event: React.MouseEvent) => {\n                if (openOn !== 'hover') {\n                    setOpen(!isOpen);\n                    return;\n                }\n                const fromKeyboard = event.detail === 0;\n                if (fromKeyboard) {\n                    openWithFocus();\n                    return;\n                }\n                cancelClose();\n                setOpen(true);\n            },\n        ),\n        ...(hoverHandlers\n            ? {\n                  onMouseEnter: chainHandler(\n                      triggerProps.onMouseEnter as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseEnter,\n                  ),\n                  onMouseLeave: chainHandler(\n                      triggerProps.onMouseLeave as Handler<React.MouseEvent>,\n                      hoverHandlers.onMouseLeave,\n                  ),\n                  onMouseDown: chainHandler(\n                      triggerProps.onMouseDown as Handler<React.MouseEvent>,\n                      () => {\n                          pointerPressedTrigger.current = true;\n                          setTimeout(() => {\n                              pointerPressedTrigger.current = false;\n                          });\n                      },\n                  ),\n                  onFocus: chainHandler(triggerProps.onFocus as Handler<React.FocusEvent>, () => {\n                      const fromPointer = pointerPressedTrigger.current;\n                      pointerPressedTrigger.current = false;\n                      triggerFocused.current = !fromPointer && !returningFocus.current;\n                      if (returningFocus.current) {\n                          return;\n                      }\n                      cancelClose();\n                      setOpen(true);\n                  }),\n                  onKeyDown: chainHandler(\n                      triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                      (event: React.KeyboardEvent) => {\n                          if (event.key !== openKey) {\n                              return;\n                          }\n                          event.preventDefault();\n                          openWithFocus();\n                      },\n                  ),\n              }\n            : openOnArrowKey\n              ? {\n                    onKeyDown: chainHandler(\n                        triggerProps.onKeyDown as Handler<React.KeyboardEvent>,\n                        (event: React.KeyboardEvent) => {\n                            if (event.key !== openKey || isTextEntry(event.target)) {\n                                return;\n                            }\n                            event.preventDefault();\n                            openWithFocus();\n                        },\n                    ),\n                }\n              : {}),\n        onBlur: chainHandler(\n            triggerProps.onBlur as Handler<React.FocusEvent>,\n            (event: React.FocusEvent) => {\n                triggerFocused.current = false;\n                if (!isOpen || isInside(event.relatedTarget)) {\n                    return;\n                }\n                if (openOn === 'hover') {\n                    scheduleClose();\n                    return;\n                }\n                closeIfFocusLeft(event.relatedTarget);\n            },\n        ),\n    } as Record<string, unknown>);\n\n    const panelStyle: React.CSSProperties = {\n        maxHeight: geometry?.maxHeight,\n        maxWidth: `calc(100vw - ${MENU_VIEWPORT_PADDING_PX * 2}px)`,\n        visibility: geometry ? 'visible' : 'hidden',\n    };\n\n    return (\n        <>\n            {clonedTrigger}\n            {isOpen &&\n                isClient &&\n                createPortal(\n                    <PopoverTreeContext.Provider value={tree}>\n                        <ShadowRootWrapper\n                            hostRef={hostRef}\n                            hostProps={popupIdentity}\n                            hostStyle={{\n                                position: 'fixed',\n                                top: geometry?.top ?? 0,\n                                left: geometry?.left ?? 0,\n                            }}\n                        >\n                            <div\n                                ref={setPanel}\n                                role={role}\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                data-side={geometry?.side}\n                                tabIndex={-1}\n                                className={`${PANEL} ${ELEVATION[elevation]} ${PADDING[padding]} ${className}`.trim()}\n                                style={panelStyle}\n                                // React's mouseenter stops at the shadow host, so the panel listens for mouseover.\n                                onMouseOver={hoverHandlers?.onPanelMouseOver}\n                                onMouseLeave={hoverHandlers?.onMouseLeave}\n                                onFocus={(event) => {\n                                    focusInside.current = true;\n                                    if (event.target !== placedFocus.current) {\n                                        placedFocus.current = null;\n                                    }\n                                    if (\n                                        event.target instanceof HTMLElement &&\n                                        panel?.contains(event.target)\n                                    ) {\n                                        heldFocus.current = event.target;\n                                    }\n                                    cancelClose();\n                                }}\n                                onBlur={(event) => {\n                                    if (isInside(event.relatedTarget)) {\n                                        return;\n                                    }\n                                    if (event.relatedTarget) {\n                                        heldFocus.current = null;\n                                    }\n                                    focusInside.current = false;\n                                    if (openOn === 'hover') {\n                                        scheduleClose();\n                                        return;\n                                    }\n                                    closeIfFocusLeft(event.relatedTarget);\n                                }}\n                            >\n                                <PopoverShownContext.Provider value={shown}>\n                                    {children}\n                                </PopoverShownContext.Provider>\n                            </div>\n                        </ShadowRootWrapper>\n                    </PopoverTreeContext.Provider>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport const Popover = Object.assign(PopoverRoot, {\n    Header: PopoverHeader,\n    Action: PopoverAction,\n    List: PopoverList,\n    Section: PopoverSection,\n    Empty: PopoverEmpty,\n    Search: PopoverSearch,\n    Status: PopoverStatus,\n    Note: PopoverNote,\n});\n\nexport default Popover;\n"],"names":["PANEL","ELEVATION","PADDING","pathHits","path","nodes","node","KEYBOARD_OPEN_KEY","isTextEntry","target","composedPathOf","root","subscribeToNothing","onClient","onServer","focusTarget","panel","initial","firstTabStopIn","resolveFocus","source","focusIsLost","active","host","PopoverRoot","trigger","children","controlledOpen","defaultOpen","onOpenChange","placement","openOn","width","padding","anchorRef","offset","elevation","initialFocus","initialFocusRef","openOnArrowKey","role","ariaLabel","ariaLabelledBy","className","parent","useContext","PopoverTreeContext","uncontrolledOpen","setUncontrolledOpen","useState","isOpen","isClient","useSyncExternalStore","triggerRef","useRef","hostRef","popupIdentity","usePopupLayer","setPanel","heldByChildren","focusOnOpen","returningFocus","pointerPressedTrigger","placedFocus","heldFocus","isOpenRef","useLatestRef","controlledRef","onOpenChangeRef","initialFocusSource","followsContent","setOpen","useCallback","next","_a","pointerInside","focusInside","triggerFocused","cancelClose","scheduleClose","useHoverClose","tree","ownedSources","usePopoverTree","geometry","usePopoverPosition","useEffect","closeOnOutsidePress","event","popEscapeLayer","pushEscapeLayer","getDeepActiveElement","shown","placeFocus","shouldFocus","followContent","observer","openWithFocus","isInside","containers","step","container","closeIfFocusLeft","hoverHandlers","triggerProps","ownTriggerRef","elementRef","composedTriggerRef","useMemo","composeRefs","openKey","clonedTrigger","React","chainHandler","fromPointer","panelStyle","MENU_VIEWPORT_PADDING_PX","jsxs","Fragment","createPortal","jsx","ShadowRootWrapper","PopoverShownContext","Popover","PopoverHeader","PopoverAction","PopoverList","PopoverSection","PopoverEmpty","PopoverSearch","PopoverStatus","PopoverNote"],"mappings":"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"}

package/dist/components/PopoverParts.js

@@ -1,60 +1,137 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import v from "./Tooltip.js";
-import { BORDER as m, NO_SCROLLBAR as f } from "./chromeStyles.js";
-import { FOCUS_RING_INSET as b } from "./focusRing.js";
-import { isPlainClick as h } from "./linkClick.js";
-import { safeHref as u } from "./safeHref.js";
-const w = ({ title: e, action: t }) => /* @__PURE__ */ d(
+import { jsx as n, jsxs as u, Fragment as f } from "react/jsx-runtime";
+import { forwardRef as v, useContext as x, useRef as h, useLayoutEffect as b } from "react";
+import { Button as g } from "./Button.js";
+import T from "./Tooltip.js";
+import { BORDER as c, NO_SCROLLBAR as N } from "./chromeStyles.js";
+import { FOCUS_RING_INSET as y } from "./focusRing.js";
+import { isPlainClick as S } from "./linkClick.js";
+import { PopoverShownContext as w } from "./popoverTree.js";
+import { safeHref as R } from "./safeHref.js";
+const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
   "div",
   {
-    className: `flex items-center justify-between border-0 border-b border-solid ${m} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
+    className: `flex items-center justify-between border-0 border-b border-solid ${c} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
     children: [
-      /* @__PURE__ */ r("span", { children: e }),
+      /* @__PURE__ */ n("span", { children: e }),
       t
     ]
   }
-), O = ({ children: e }) => /* @__PURE__ */ r("div", { className: `flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${f}`, children: e }), g = x(
-  ({ children: e }, t) => /* @__PURE__ */ r("div", { ref: t, className: `border-0 border-t border-solid ${m} p-2`, children: e })
+), E = '[aria-current]:not([aria-current="false"]):not([aria-current=""]), [aria-selected="true"], [role="radio"][aria-checked="true"]', P = ["aria-current", "aria-selected", "aria-checked"], m = (e) => {
+  const t = e.querySelector(E);
+  if (!t)
+    return !1;
+  const r = e.getBoundingClientRect().top + e.clientTop, { top: l, bottom: o } = t.getBoundingClientRect(), a = l - r + e.scrollTop, i = o - r + e.scrollTop;
+  return a < e.scrollTop ? e.scrollTop = a : i > e.scrollTop + e.clientHeight && (e.scrollTop = i - e.clientHeight), !0;
+}, U = ({ children: e, scrollToSelected: t = !1 }) => {
+  const r = x(w), l = h(null);
+  return b(() => {
+    const o = l.current;
+    if (!t || !r || !o || m(o))
+      return;
+    const a = new MutationObserver(() => {
+      m(o) && a.disconnect();
+    });
+    return a.observe(o, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: P
+    }), () => a.disconnect();
+  }, [t, r]), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: l,
+      className: `flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${N}`,
+      children: e
+    }
+  );
+}, C = v(
+  ({ children: e }, t) => /* @__PURE__ */ n("div", { ref: t, className: `border-0 border-t border-solid ${c} p-2`, children: e })
+);
+C.displayName = "Popover.Section";
+const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), q = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-2 pt-2", children: e }), G = ({ children: e }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `border-0 border-t border-solid ${c} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`,
+    children: e
+  }
+), O = {
+  default: "text-[var(--malachite-text-secondary,rgb(123,123,123))]",
+  error: "text-[var(--malachite-text-error,rgb(237,53,54))]"
+}, _ = (e) => e != null && e !== !1 && e !== "", $ = v(
+  ({ message: e, tone: t = "default", action: r, focusable: l = !1 }, o) => {
+    const a = _(e);
+    return /* @__PURE__ */ u(f, { children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: o,
+          role: "status",
+          tabIndex: l ? -1 : void 0,
+          className: a ? "outline-none" : "sr-only",
+          children: a && /* @__PURE__ */ n(
+            "div",
+            {
+              className: `px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${O[t]}`,
+              children: e
+            }
+          )
+        }
+      ),
+      a && r && /* @__PURE__ */ n("div", { className: "px-3 pb-2", children: /* @__PURE__ */ n(
+        g,
+        {
+          variant: "outline",
+          size: "small",
+          loading: r.pending,
+          onClick: r.onClick,
+          children: r.label
+        }
+      ) })
+    ] });
+  }
 );
-g.displayName = "Popover.Section";
-const _ = ({ children: e }) => /* @__PURE__ */ r("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), z = ({
+$.displayName = "Popover.Status";
+const V = ({
   icon: e,
   "aria-label": t,
-  onClick: a,
-  href: p,
+  onClick: r,
+  href: l,
   disabled: o = !1,
-  tooltip: i
+  tooltip: a
 }) => {
-  const l = o ? void 0 : u(p), n = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${b}`, s = l !== void 0 ? /* @__PURE__ */ r(
+  const i = o ? void 0 : R(l), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${y}`, d = i !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
-      href: l,
+      href: i,
       "aria-label": t,
-      onClick: (c) => {
-        h(c) && a && (c.preventDefault(), a());
+      onClick: (p) => {
+        S(p) && r && (p.preventDefault(), r());
       },
-      className: `no-underline ${n}`,
+      className: `no-underline ${s}`,
       children: e
     }
-  ) : /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       "aria-label": t,
       "aria-disabled": o || void 0,
-      onClick: o ? void 0 : a,
-      className: n,
+      onClick: o ? void 0 : r,
+      className: s,
       children: e
     }
   );
-  return i ? /* @__PURE__ */ r(v, { text: i, children: s }) : s;
+  return a ? /* @__PURE__ */ n(T, { text: a, children: d }) : d;
 };
 export {
-  z as PopoverAction,
-  _ as PopoverEmpty,
-  w as PopoverHeader,
-  O as PopoverList,
-  g as PopoverSection
+  V as PopoverAction,
+  M as PopoverEmpty,
+  F as PopoverHeader,
+  U as PopoverList,
+  G as PopoverNote,
+  q as PopoverSearch,
+  C as PopoverSection,
+  $ as PopoverStatus
 };
 //# sourceMappingURL=PopoverParts.js.map

package/dist/components/PopoverParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nexport const PopoverList: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","PopoverList","children","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":";;;;;;;AAYO,MAAMA,IAA8C,CAAC,EAAE,OAAAC,GAAO,QAAAC,QACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oEAAoEC,CAAM;AAAA,IAErF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,MACZC;AAAA,IAAA;AAAA,EAAA;AACL,GAGSI,IAAuD,CAAC,EAAE,UAAAC,EAAA,MACnE,gBAAAF,EAAC,OAAA,EAAI,WAAW,wDAAwDG,CAAY,IAC/E,UAAAD,EAAA,CACL,GAGSE,IAAiBC;AAAA,EAC1B,CAAC,EAAE,UAAAH,EAAA,GAAYI,MACX,gBAAAN,EAAC,OAAA,EAAI,KAAAM,GAAU,WAAW,kCAAkCP,CAAM,QAC7D,UAAAG,EAAA,CACL;AAER;AACAE,EAAe,cAAc;AAEtB,MAAMG,IAAwD,CAAC,EAAE,UAAAL,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,kIACV,UAAAE,EAAA,CACL,GAaSM,IAA8C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,MAAMC;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,SAAAC;AACJ,MAAM;AACF,QAAMC,IAAOF,IAAW,SAAYG,EAASJ,CAAO,GAC9CK,IAAY,0KAA0KJ,IAAW,4FAA4F,2MAA2M,IAAIK,CAAgB,IAC5fC,IACFJ,MAAS,SACL,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAe;AAAA,MACA,cAAYL;AAAA,MACZ,SAAS,CAACU,MAAU;AAChB,QAAIC,EAAaD,CAAK,KAAKT,MACvBS,EAAM,eAAA,GACNT,EAAA;AAAA,MAER;AAAA,MACA,WAAW,gBAAgBM,CAAS;AAAA,MAEnC,UAAAR;AAAA,IAAA;AAAA,EAAA,IAGL,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYU;AAAA,MACZ,iBAAeG,KAAY;AAAA,MAC3B,SAASA,IAAW,SAAYF;AAAA,MAChC,WAAAM;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGb,SAAOK,IAAU,gBAAAd,EAACsB,GAAA,EAAQ,MAAMR,GAAU,aAAO,IAAaK;AAClE;"}
+{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Button from './Button';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport const PopoverSearch: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-2 pt-2\">{children}</div>\n);\n\nexport const PopoverNote: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className={`border-0 border-t border-solid ${BORDER} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`}\n    >\n        {children}\n    </div>\n);\n\nexport type PopoverStatusTone = 'default' | 'error';\n\nexport interface PopoverStatusAction {\n    label: string;\n    onClick: () => void;\n    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */\n    pending?: boolean;\n}\n\nexport interface PopoverStatusProps {\n    /**\n     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:\n     * only a region already in the tree announces a new message.\n     */\n    message?: React.ReactNode;\n    tone?: PopoverStatusTone;\n    /** A button under the message that resolves it, such as Retry. Shown only with a message. */\n    action?: PopoverStatusAction;\n    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */\n    focusable?: boolean;\n}\n\nconst STATUS_TONE_TEXT: Record<PopoverStatusTone, string> = {\n    default: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n    error: 'text-[var(--malachite-text-error,rgb(237,53,54))]',\n};\n\nconst hasMessage = (message: React.ReactNode): boolean =>\n    message !== undefined && message !== null && message !== false && message !== '';\n\nexport const PopoverStatus = forwardRef<HTMLDivElement, PopoverStatusProps>(\n    ({ message, tone = 'default', action, focusable = false }, ref) => {\n        const shown = hasMessage(message);\n        return (\n            <>\n                {/* Stays `status` while empty and for errors: a role or aria-hidden changed with the\n                    text is not reliably announced. No ring: a focus target, not a control. */}\n                <div\n                    ref={ref}\n                    role=\"status\"\n                    tabIndex={focusable ? -1 : undefined}\n                    className={shown ? 'outline-none' : 'sr-only'}\n                >\n                    {shown && (\n                        <div\n                            className={`px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${STATUS_TONE_TEXT[tone]}`}\n                        >\n                            {message}\n                        </div>\n                    )}\n                </div>\n                {shown && action && (\n                    <div className=\"px-3 pb-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            loading={action.pending}\n                            onClick={action.onClick}\n                        >\n                            {action.label}\n                        </Button>\n                    </div>\n                )}\n            </>\n        );\n    },\n);\nPopoverStatus.displayName = 'Popover.Status';\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverSearch","PopoverNote","STATUS_TONE_TEXT","hasMessage","message","PopoverStatus","tone","focusable","Fragment","Button","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":";;;;;;;;;AAcO,MAAMA,IAA8C,CAAC,EAAE,OAAAC,GAAO,QAAAC,QACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oEAAoEC,CAAM;AAAA,IAErF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,MACZC;AAAA,IAAA;AAAA,EAAA;AACL,GAGEI,IACF,kIACEC,IAAuB,CAAC,gBAAgB,iBAAiB,cAAc,GAGvEC,IAA4B,CAACC,MAA+B;AAC9D,QAAMC,IAAMD,EAAK,cAA2BH,CAAY;AACxD,MAAI,CAACI;AACD,WAAO;AAEX,QAAMC,IAAUF,EAAK,sBAAA,EAAwB,MAAMA,EAAK,WAClD,EAAE,KAAAG,GAAK,QAAAC,MAAWH,EAAI,sBAAA,GACtBI,IAASF,IAAMD,IAAUF,EAAK,WAC9BM,IAAYF,IAASF,IAAUF,EAAK;AAC1C,SAAIK,IAASL,EAAK,YACdA,EAAK,YAAYK,IACVC,IAAYN,EAAK,YAAYA,EAAK,iBACzCA,EAAK,YAAYM,IAAYN,EAAK,eAE/B;AACX,GAWaO,IAA0C,CAAC,EAAE,UAAAC,GAAU,kBAAAC,IAAmB,SAAY;AAC/F,QAAMC,IAAQC,EAAWC,CAAmB,GACtCC,IAAUC,EAAuB,IAAI;AAG3C,SAAAC,EAAgB,MAAM;AAClB,UAAMf,IAAOa,EAAQ;AACrB,QAAI,CAACJ,KAAoB,CAACC,KAAS,CAACV,KAAQD,EAA0BC,CAAI;AACtE;AAEJ,UAAMgB,IAAW,IAAI,iBAAiB,MAAM;AACxC,MAAIjB,EAA0BC,CAAI,KAC9BgB,EAAS,WAAA;AAAA,IAEjB,CAAC;AACD,WAAAA,EAAS,QAAQhB,GAAM;AAAA,MACnB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiBF;AAAA,IAAA,CACpB,GACM,MAAMkB,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACP,GAAkBC,CAAK,CAAC,GAGxB,gBAAAd;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKiB;AAAA,MACL,WAAW,wDAAwDI,CAAY;AAAA,MAE9E,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGb,GAEaU,IAAiBC;AAAA,EAC1B,CAAC,EAAE,UAAAX,EAAA,GAAYY,MACX,gBAAAxB,EAAC,OAAA,EAAI,KAAAwB,GAAU,WAAW,kCAAkCzB,CAAM,QAC7D,UAAAa,EAAA,CACL;AAER;AACAU,EAAe,cAAc;AAEtB,MAAMG,IAAwD,CAAC,EAAE,UAAAb,QACpE,gBAAAZ,EAAC,OAAA,EAAI,WAAU,kIACV,UAAAY,EAAA,CACL,GAGSc,IAAyD,CAAC,EAAE,UAAAd,QACrE,gBAAAZ,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAY,EAAA,CAAS,GAG5Be,IAAuD,CAAC,EAAE,UAAAf,EAAA,MACnE,gBAAAZ;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,kCAAkCD,CAAM;AAAA,IAElD,UAAAa;AAAA,EAAA;AACL,GAyBEgB,IAAsD;AAAA,EACxD,SAAS;AAAA,EACT,OAAO;AACX,GAEMC,IAAa,CAACC,MACSA,KAAY,QAAQA,MAAY,MAASA,MAAY,IAErEC,IAAgBR;AAAA,EACzB,CAAC,EAAE,SAAAO,GAAS,MAAAE,IAAO,WAAW,QAAAnC,GAAQ,WAAAoC,IAAY,GAAA,GAAST,MAAQ;AAC/D,UAAMV,IAAQe,EAAWC,CAAO;AAChC,WACI,gBAAAhC,EAAAoC,GAAA,EAGI,UAAA;AAAA,MAAA,gBAAAlC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAAwB;AAAA,UACA,MAAK;AAAA,UACL,UAAUS,IAAY,KAAK;AAAA,UAC3B,WAAWnB,IAAQ,iBAAiB;AAAA,UAEnC,UAAAA,KACG,gBAAAd;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,iEAAiE4B,EAAiBI,CAAI,CAAC;AAAA,cAEjG,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,MAGPhB,KAASjB,KACN,gBAAAG,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA;AAAA,QAACmC;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAStC,EAAO;AAAA,UAChB,SAASA,EAAO;AAAA,UAEf,UAAAA,EAAO;AAAA,QAAA;AAAA,MAAA,EACZ,CACJ;AAAA,IAAA,GAER;AAAA,EAER;AACJ;AACAkC,EAAc,cAAc;AAYrB,MAAMK,IAA8C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,MAAMC;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,SAAAC;AACJ,MAAM;AACF,QAAMC,IAAOF,IAAW,SAAYG,EAASJ,CAAO,GAC9CK,IAAY,0KAA0KJ,IAAW,4FAA4F,2MAA2M,IAAIK,CAAgB,IAC5fC,IACFJ,MAAS,SACL,gBAAA3C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAA2C;AAAA,MACA,cAAYL;AAAA,MACZ,SAAS,CAACU,MAAU;AAChB,QAAIC,EAAaD,CAAK,KAAKT,MACvBS,EAAM,eAAA,GACNT,EAAA;AAAA,MAER;AAAA,MACA,WAAW,gBAAgBM,CAAS;AAAA,MAEnC,UAAAR;AAAA,IAAA;AAAA,EAAA,IAGL,gBAAArC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYsC;AAAA,MACZ,iBAAeG,KAAY;AAAA,MAC3B,SAASA,IAAW,SAAYF;AAAA,MAChC,WAAAM;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGb,SAAOK,IAAU,gBAAA1C,EAACkD,GAAA,EAAQ,MAAMR,GAAU,aAAO,IAAaK;AAClE;"}

package/dist/components/popoverTree.js

@@ -1,14 +1,15 @@
-import { useContext as r, useLayoutEffect as n, createContext as s } from "react";
-const f = 150, u = s(null), p = (t, o) => {
+import { useContext as r, useLayoutEffect as s, createContext as n } from "react";
+const f = 150, u = n(null), p = n(!1), x = (t, o) => {
   const e = r(u);
-  n(() => {
+  s(() => {
     if (!(!o || !e))
       return e.register(t);
   }, [o, e, t]);
 };
 export {
   f as HOVER_CLOSE_DELAY_MS,
+  p as PopoverShownContext,
   u as PopoverTreeContext,
-  p as useOwnedByPopover
+  x as useOwnedByPopover
 };
 //# sourceMappingURL=popoverTree.js.map

package/dist/components/popoverTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n    register: (source: OverlaySource) => () => void;\n    hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n    const tree = useContext(PopoverTreeContext);\n    useLayoutEffect(() => {\n        if (!active || !tree) {\n            return;\n        }\n        return tree.register(source);\n    }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,EAAWN,CAAkB;AAC1C,EAAAO,EAAgB,MAAM;AAClB,QAAI,GAACH,KAAU,CAACC;AAGhB,aAAOA,EAAK,SAASF,CAAM;AAAA,EAC/B,GAAG,CAACC,GAAQC,GAAMF,CAAM,CAAC;AAC7B;"}
+{"version":3,"file":"popoverTree.js","sources":["../../src/components/popoverTree.ts"],"sourcesContent":["import { createContext, useContext, useLayoutEffect } from 'react';\n\nexport type OverlaySource = () => HTMLElement | null;\n\nexport interface PopoverTree {\n    register: (source: OverlaySource) => () => void;\n    hold: () => () => void;\n}\n\nexport const HOVER_CLOSE_DELAY_MS = 150;\n\nexport const PopoverTreeContext = createContext<PopoverTree | null>(null);\n\nexport const PopoverShownContext = createContext(false);\n\nexport const useOwnedByPopover = (source: OverlaySource, active: boolean): void => {\n    const tree = useContext(PopoverTreeContext);\n    useLayoutEffect(() => {\n        if (!active || !tree) {\n            return;\n        }\n        return tree.register(source);\n    }, [active, tree, source]);\n};\n"],"names":["HOVER_CLOSE_DELAY_MS","PopoverTreeContext","createContext","PopoverShownContext","useOwnedByPopover","source","active","tree","useContext","useLayoutEffect"],"mappings":";AASO,MAAMA,IAAuB,KAEvBC,IAAqBC,EAAkC,IAAI,GAE3DC,IAAsBD,EAAc,EAAK,GAEzCE,IAAoB,CAACC,GAAuBC,MAA0B;AAC/E,QAAMC,IAAOC,EAAWP,CAAkB;AAC1C,EAAAQ,EAAgB,MAAM;AAClB,QAAI,GAACH,KAAU,CAACC;AAGhB,aAAOA,EAAK,SAASF,CAAM;AAAA,EAC/B,GAAG,CAACC,GAAQC,GAAMF,CAAM,CAAC;AAC7B;"}

package/dist/index.d.ts

@@ -3943,15 +3943,20 @@ export declare const PlusIcon: React.FC<IconProps_85>;
 export declare const Popover: default_2.FC<PopoverProps> & {
     Header: default_2.FC< PopoverHeaderProps>;
     Action: default_2.FC< PopoverActionProps>;
-    List: default_2.FC<{
-        children: default_2.ReactNode;
-    }>;
+    List: default_2.FC< PopoverListProps>;
     Section: default_2.ForwardRefExoticComponent<{
         children: default_2.ReactNode;
     } & default_2.RefAttributes<HTMLDivElement>>;
     Empty: default_2.FC<{
         children: default_2.ReactNode;
     }>;
+    Search: default_2.FC<{
+        children: default_2.ReactNode;
+    }>;
+    Status: default_2.ForwardRefExoticComponent< PopoverStatusProps & default_2.RefAttributes<HTMLDivElement>>;
+    Note: default_2.FC<{
+        children: default_2.ReactNode;
+    }>;
 };
 
 export declare interface PopoverActionProps {
@@ -3977,18 +3982,41 @@ declare interface PopoverBaseProps {
     anchorRef?: default_2.RefObject<HTMLElement | null>;
     offset?: FloatingOffset;
     elevation?: 'default' | 'raised';
-    initialFocusRef?: default_2.RefObject<HTMLElement | null>;
     /** A click panel also opens, focus inside, on the arrow key its placement points at. */
     openOnArrowKey?: boolean;
     role?: 'dialog' | 'menu' | 'listbox';
     className?: string;
 }
 
+declare type PopoverFocusSource = {
+    /**
+     * What takes focus when the panel is shown, in place of its first tab stop. Re-read as the
+     * content changes, so focus follows late content but never leaves where the user moved it.
+     */
+    initialFocus?: PopoverInitialFocus;
+    initialFocusRef?: never;
+} | {
+    initialFocus?: never;
+    /** @deprecated Use `initialFocus`, which takes the same ref and also follows late content. */
+    initialFocusRef?: default_2.RefObject<HTMLElement | null>;
+};
+
 export declare interface PopoverHeaderProps {
     title: string;
     action?: default_2.ReactNode;
 }
 
+export declare type PopoverInitialFocus = default_2.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+
+export declare interface PopoverListProps {
+    children: default_2.ReactNode;
+    /**
+     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)
+     * each time the popover is shown, once that row mounts. Only the list scrolls.
+     */
+    scrollToSelected?: boolean;
+}
+
 declare type PopoverName = {
     'aria-label': string;
     'aria-labelledby'?: string;
@@ -3999,7 +4027,29 @@ declare type PopoverName = {
 
 export declare type PopoverPlacement = FloatingPlacement;
 
-export declare type PopoverProps = PopoverBaseProps & PopoverName;
+export declare type PopoverProps = PopoverBaseProps & PopoverName & PopoverFocusSource;
+
+export declare interface PopoverStatusAction {
+    label: string;
+    onClick: () => void;
+    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */
+    pending?: boolean;
+}
+
+export declare interface PopoverStatusProps {
+    /**
+     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:
+     * only a region already in the tree announces a new message.
+     */
+    message?: default_2.ReactNode;
+    tone?: PopoverStatusTone;
+    /** A button under the message that resolves it, such as Retry. Shown only with a message. */
+    action?: PopoverStatusAction;
+    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */
+    focusable?: boolean;
+}
+
+export declare type PopoverStatusTone = 'default' | 'error';
 
 export declare const PreviewIcon: React.FC<IconProps_86>;