@plexui/ui 0.2.0

package/dist/es/components/Menu/Menu.module.css

@@ -0,0 +1,289 @@
+@layer components {.Menu {
+  /* Top-level selector needs to exist */
+}.MenuList {
+  z-index: 50;
+  overflow: auto;
+  width: var(--menu-width, auto);
+  min-width: var(--menu-min-width, 300px);
+  max-width: var(--radix-dropdown-menu-content-available-width);
+  max-height: min(
+    var(--radix-dropdown-menu-content-available-height),
+    var(--menu-max-height, 1200px)
+  );
+  padding: var(--menu-gutter);
+  border-radius: var(--menu-radius);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  color: var(--color-text);
+  font-size: var(--menu-font-size);
+  line-height: var(--menu-line-height);
+  -webkit-overflow-scrolling: touch;
+  pointer-events: auto;
+  /* The transform-origin computed from the content and arrow positions/offsets */
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  will-change: transform;
+}
+
+  /* Animation states applied to a wrapping parent */
+  .Menu[data-entering] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  .Menu[data-entering-active] .MenuList,
+  .Menu[data-entering][data-interrupted] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: 0.35s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  .Menu[data-exiting] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .Menu[data-exiting-active] .MenuList,
+  .Menu[data-exiting][data-interrupted] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: 0.2s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-exit);
+  }.MenuItemContent {
+  padding: var(--menu-item-padding);
+}.MenuItem {
+  position: relative;
+  display: block;
+  /* Defaults to inherit from pressable wrapper, this container is not flex */
+  align-items: center;
+  gap: var(--menu-item-gap);
+  padding: var(--menu-item-padding);
+  color: var(--color-text);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  .MenuItem:focus {
+    outline: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {.MenuItem:hover {
+    /* Prevent links from changing colors */
+    color: var(--color-text);
+}
+}
+
+  .MenuItem::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    background: var(--menu-item-background-color);
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+    .MenuItem[data-state="open"]::before, .MenuItem[data-highlighted]::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .MenuItem[data-state="open"]:has(.ItemActions:hover)::before, .MenuItem[data-highlighted]:has(.ItemActions:hover)::before {
+      opacity: 0.4;
+    }
+
+    .MenuItem[data-state="open"]:not(:has(.ItemActions:hover)):active::before, .MenuItem[data-highlighted]:not(:has(.ItemActions:hover)):active::before {
+      transform: scale(var(--scale, 0.98));
+    }
+
+    .MenuItem[data-state="open"] .ItemActions, .MenuItem[data-highlighted] .ItemActions {
+      opacity: 1;
+    }
+
+  .MenuItem[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    .MenuItem[data-disabled]::before {
+      display: none;
+    }.PressableInner {
+  position: relative;
+  display: flex;
+  /* Allow flex settings to be applied to the container, for className ergonomics */
+  align-items: inherit;
+  justify-content: inherit;
+  gap: inherit;
+}.ItemActions {
+  /* Prevent adding height to the MenuItem, and horizontally center */
+  display: flex;
+  align-items: center;
+  height: 0;
+  /* Magic number that pulls back the icon an equal gutter from the top/bottom */
+  margin-right: -5px;
+  opacity: 0;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity;
+  transition-timing-function: var(--cubic-enter);
+}.Separator {
+  height: 1px;
+  margin: var(--menu-separator-gutter);
+  background: var(--menu-separator-background-color);
+}.SubMenuItem {
+  justify-content: space-between;
+}.SubTriggerIcon {
+  /* slight visual offset of svg canvas */
+  margin-right: -2px;
+  opacity: 0.75;
+  transition: opacity var(--transition-duration-basic) var(--transition-ease-basic);
+}
+
+  .SubMenuItem[data-state="open"] .SubTriggerIcon,
+  .SubMenuItem[data-highlighted] .SubTriggerIcon {
+    opacity: 1;
+  }.RadioItem {
+  gap: calc(var(--spacing) * 2);
+}
+
+  :where([data-indicator-position="end"]) .RadioItem {
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 3);
+  }.RadioIndicatorActive {
+  position: relative;
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  /* Don't play the animation when entering */
+}
+
+  .RadioIndicatorActive::before,
+  .RadioIndicatorActive::after {
+    display: block;
+    content: "";
+    grid-column-start: 1;
+    grid-row-start: 1;
+    place-self: center center;
+    will-change: transform;
+  }
+
+  /* Filled circle */
+  .RadioIndicatorActive::before {
+    width: var(--menu-radio-indicator-size);
+    height: var(--menu-radio-indicator-size);
+    border-radius: var(--radius-full);
+    animation: fade-in 0.4s var(--cubic-enter);
+    background-color: var(--radio-group-indicator-background-color);
+  }
+
+  /*  Empty middle circle */
+  .RadioIndicatorActive::after {
+    width: var(--menu-radio-indicator-hole-size);
+    height: var(--menu-radio-indicator-hole-size);
+    border-radius: var(--radius-full);
+    animation: scale-in 0.4s var(--cubic-enter);
+    background-color: var(--radio-group-indicator-hole-background-color);
+  }
+  [data-entering] .RadioIndicatorActive::before,
+  [data-entering] .RadioIndicatorActive::after {
+    animation-duration: 0s;
+  }.RadioIndicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--menu-radio-indicator-size);
+  height: var(--menu-radio-indicator-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
+  cursor: pointer;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  [data-indicator-position="end"] .RadioIndicator {
+    order: 1;
+  }
+
+  [data-highlighted] .RadioIndicator {
+    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color-hover) inset;
+  }
+
+  [data-disabled] .RadioIndicator {
+    cursor: not-allowed;
+  }
+
+  /* Can't be focused here anyway */
+  .RadioIndicator:focus {
+    outline: none;
+  }@keyframes scale-in {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}.CheckboxItem {
+  gap: calc(var(--spacing) * 2);
+}
+
+  .CheckboxItem:where([data-indicator-position="end"]) {
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 3);
+  }.CheckboxIndicator {
+  flex-shrink: 0;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+}
+
+  [data-indicator-position="end"] .CheckboxIndicator {
+    order: 1;
+  }
+
+  [data-indicator-variant="solid"] .CheckboxIndicator {
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
+  }.CheckboxCircle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+  border-radius: var(--radius-full);
+  animation: fade-in 0.5s var(--cubic-enter);
+  background-color: var(--radio-group-indicator-background-color);
+  color: var(--radio-group-indicator-hole-background-color);
+
+  /* Don't play the animation when entering */
+}
+  [data-entering] .CheckboxCircle::before,
+  [data-entering] .CheckboxCircle::after {
+    animation-duration: 0s;
+  }
+}

package/dist/es/components/Menu/index.js

@@ -0,0 +1,2 @@
+export { Menu } from "./Menu";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Menu } from \"./Menu\"\n"]}

package/dist/es/components/PlexUIProvider/PlexUIContext.js

@@ -0,0 +1,4 @@
+"use client";
+import { createContext } from "react";
+export const PlexUIContext = createContext(null);
+//# sourceMappingURL=PlexUIContext.js.map

package/dist/es/components/PlexUIProvider/PlexUIContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlexUIContext.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/PlexUIContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAsB,aAAa,EAAkC,MAAM,OAAO,CAAA;AAOzF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type ComponentType, createContext, type ForwardRefExoticComponent } from \"react\"\n\ntype PlexUIContextValue = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  linkComponent: ComponentType<any> | ForwardRefExoticComponent<any> | \"a\"\n}\n\nexport const PlexUIContext = createContext<PlexUIContextValue | null>(null)\n"]}

package/dist/es/components/PlexUIProvider/PlexUIProvider.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { PlexUIContext } from "./PlexUIContext";
+/**
+ * Shared context for all Plex UI components - wrap your app in this
+ * provider to use Plex UI components.
+ *
+ * It's pretty thin right now, we only use it to hold onto the component you
+ * use for rendering Links, but it could be expanded in the future.
+ */
+export function PlexUIProvider({ children, linkComponent, }) {
+    return _jsx(PlexUIContext.Provider, { value: { linkComponent }, children: children });
+}
+//# sourceMappingURL=PlexUIProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlexUIProvider.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/PlexUIProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAoB/C;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,aAAa,GAKd;IACC,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YAAG,QAAQ,GAA0B,CAAA;AAC9F,CAAC","sourcesContent":["\"use client\"\n\nimport { type ComponentType, type ForwardRefExoticComponent, type ReactNode } from \"react\"\nimport { PlexUIContext } from \"./PlexUIContext\"\n\n/// <reference path=\"../../global.d.ts\" />\n\ninterface DefaultConfig {\n  LinkComponent: \"a\"\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  interface PlexUIConfig {}\n}\n\n// Utility type to merge defaults with overrides. The override keys take precedence.\ntype MergeOverrides<Defaults, Overrides> = Omit<Defaults, keyof Overrides> & Overrides\n\nexport type Config = MergeOverrides<DefaultConfig, PlexUIConfig>\n\nexport type LinkComponent = Config[\"LinkComponent\"]\n\n/**\n * Shared context for all Plex UI components - wrap your app in this\n * provider to use Plex UI components.\n *\n * It's pretty thin right now, we only use it to hold onto the component you\n * use for rendering Links, but it could be expanded in the future.\n */\nexport function PlexUIProvider({\n  children,\n  linkComponent,\n}: {\n  children: ReactNode\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  linkComponent: ComponentType<any> | ForwardRefExoticComponent<any> | \"a\"\n}) {\n  return <PlexUIContext.Provider value={{ linkComponent }}>{children}</PlexUIContext.Provider>\n}\n"]}

package/dist/es/components/PlexUIProvider/index.js

@@ -0,0 +1,2 @@
+export { PlexUIProvider } from "./PlexUIProvider";
+//# sourceMappingURL=index.js.map

package/dist/es/components/PlexUIProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export { PlexUIProvider } from \"./PlexUIProvider\"\n"]}

package/dist/es/components/PlexUIProvider/internal.js

@@ -0,0 +1,8 @@
+"use client";
+import { useContext } from "react";
+import { PlexUIContext } from "./PlexUIContext";
+export function useLinkComponent() {
+    const context = useContext(PlexUIContext);
+    return context?.linkComponent ?? "a";
+}
+//# sourceMappingURL=internal.js.map

package/dist/es/components/PlexUIProvider/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/internal.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACzC,OAAO,OAAO,EAAE,aAAa,IAAI,GAAG,CAAA;AACtC,CAAC","sourcesContent":["\"use client\"\n\nimport { useContext } from \"react\"\nimport { PlexUIContext } from \"./PlexUIContext\"\n\nexport function useLinkComponent() {\n  const context = useContext(PlexUIContext)\n  return context?.linkComponent ?? \"a\"\n}\n"]}

package/dist/es/components/Popover/Popover.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Popover as RadixPopover } from "radix-ui";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useTimeout } from "usehooks-ts";
+import { useEscCloseStack } from "../../hooks/useEscCloseStack";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { focusableElements, preventDefaultHandler, toCssVariables } from "../../lib/helpers";
+import { TransitionGroup } from "../Transition";
+import { createPointerIntentArea, isPointInPolygon } from "./pointerIntent";
+import s from "./Popover.module.css";
+import { PopoverContext, usePopoverContext } from "./usePopoverContext";
+export const Popover = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, showOnHover = false, hoverOpenDelay = 150, children, }) => {
+    const [open, setOpen] = useState(false);
+    const [shake, setShake] = useState(false);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const openTimerRef = useRef(undefined);
+    const hoverOpenFocusedWithTab = useRef(false);
+    const isPointerInTransitRef = useRef(false);
+    const isOpen = controlledOpen ?? open;
+    const [temporarilyPreventClickToClose, setTemporarilyPreventClickToClose] = useState(false);
+    useTimeout(() => setTemporarilyPreventClickToClose(false), temporarilyPreventClickToClose ? 500 : null);
+    const latestOpenChange = useLatestValue(controlledOnOpenChange);
+    const handleOpenChangeImpl = useLatestValue((nextState) => {
+        clearTimeout(openTimerRef.current);
+        // No-op if the state is not changing
+        if (isOpen === nextState) {
+            return;
+        }
+        if (!nextState) {
+            // clear any running shake animation on close
+            setShake(false);
+            // Check for specific hover conditions where focus should be
+            // immediately restored to the trigger before closing
+            if (showOnHover && hoverOpenFocusedWithTab.current) {
+                triggerRef.current?.focus();
+            }
+            // Always cleanup this state
+            hoverOpenFocusedWithTab.current = false;
+        }
+        latestOpenChange.current?.(nextState);
+        setOpen(nextState);
+        if (showOnHover) {
+            setTemporarilyPreventClickToClose(nextState);
+        }
+    });
+    const handleOpenChange = useCallback((nextState) => {
+        handleOpenChangeImpl.current(nextState);
+    }, [handleOpenChangeImpl]);
+    const handleTriggerEnter = useCallback(() => {
+        openTimerRef.current = setTimeout(() => handleOpenChange(true), hoverOpenDelay);
+    }, [handleOpenChange, hoverOpenDelay]);
+    const handleTriggerLeave = useCallback(() => {
+        clearTimeout(openTimerRef.current);
+    }, []);
+    useEffect(() => {
+        return () => {
+            clearTimeout(openTimerRef.current);
+        };
+    }, []);
+    const store = useMemo(() => ({
+        open: isOpen,
+        setOpen: handleOpenChange,
+        shake,
+        setShake,
+        showOnHover,
+        temporarilyPreventClickToClose,
+        onTriggerEnter: handleTriggerEnter,
+        onTriggerLeave: handleTriggerLeave,
+        isPointerInTransitRef,
+        triggerRef,
+        contentRef,
+        hoverOpenFocusedWithTab,
+    }), [
+        isOpen,
+        handleOpenChange,
+        shake,
+        setShake,
+        showOnHover,
+        temporarilyPreventClickToClose,
+        hoverOpenFocusedWithTab,
+        isPointerInTransitRef,
+        handleTriggerEnter,
+        handleTriggerLeave,
+    ]);
+    return (_jsx(PopoverContext, { value: store, children: _jsx(RadixPopover.Root, { open: isOpen, onOpenChange: handleOpenChange, modal: false, children: children }) }));
+};
+const Trigger = ({ children, onPointerDown, onClick, }) => {
+    const { setOpen, showOnHover, temporarilyPreventClickToClose, onTriggerEnter, onTriggerLeave, isPointerInTransitRef, triggerRef, contentRef, } = usePopoverContext();
+    const hasPointerMoveOpenedRef = useRef(false);
+    const maybePreventClickClose = (evt) => {
+        // Don't prevent temporary close if the trigger is an anchor tag itself
+        const isLink = evt.currentTarget.nodeName.toLocaleLowerCase() === "a";
+        if (!isLink && temporarilyPreventClickToClose) {
+            // Prevents tooltip listeners from closing
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+    };
+    const handlePointerMove = (evt) => {
+        if (evt.pointerType === "touch") {
+            return;
+        }
+        if (!hasPointerMoveOpenedRef.current && !isPointerInTransitRef.current) {
+            onTriggerEnter();
+            hasPointerMoveOpenedRef.current = true;
+        }
+    };
+    const handlePointerLeave = () => {
+        if (!hasPointerMoveOpenedRef.current) {
+            return;
+        }
+        onTriggerLeave();
+        hasPointerMoveOpenedRef.current = false;
+    };
+    return (_jsx(RadixPopover.Trigger, { asChild: true, ref: triggerRef, onPointerDown: (evt) => {
+            maybePreventClickClose(evt);
+            onPointerDown?.(evt);
+        }, onClick: (evt) => {
+            maybePreventClickClose(evt);
+            onClick?.(evt);
+        }, onPointerMove: showOnHover ? handlePointerMove : undefined, onPointerLeave: showOnHover ? handlePointerLeave : undefined, onFocus: showOnHover ? () => setOpen(true) : undefined, onBlur: showOnHover
+            ? () => {
+                setTimeout(() => {
+                    // Ignore this handler if focus has moved into the popover
+                    if (contentRef.current?.contains(document.activeElement)) {
+                        return;
+                    }
+                    setOpen(false);
+                }, 50);
+            }
+            : undefined, children: children }));
+};
+const ContentImpl = ({ children, avoidCollisions, width, minWidth, maxWidth, side, sideOffset = 8, align, alignOffset, translucent, className, autoFocus = true, }) => {
+    const { showOnHover, shake, contentRef } = usePopoverContext();
+    const handleKeyDown = (evt) => {
+        const contentElement = contentRef.current;
+        if (
+        // When the current target is our container
+        contentElement &&
+            evt.target === contentElement &&
+            // We know that shift key tabs will lead to closing the popover (because we don't use `modal`)
+            evt.key === "Tab" &&
+            evt.shiftKey) {
+            // Prevent that from happening
+            evt.preventDefault();
+            evt.stopPropagation();
+            // Move focus to the last focusable element, placing the user in the focus loop
+            const focusable = focusableElements(contentElement);
+            const lastFocusable = focusable[focusable.length - 1];
+            lastFocusable?.focus();
+        }
+    };
+    // Important that we send initial focus into the popover, placing it onto the container.
+    // This allows focus looping to begin, as well as capturing scoped key presses.
+    // We prevent Radix's default behavior of focusing an element, because this can have adverse side-effects.
+    useEffect(() => {
+        const contentElement = contentRef.current;
+        if (!contentElement || !autoFocus) {
+            return;
+        }
+        // If we're already focused within the content area, no-op.
+        // This would be true if some inner component declares autoFocus
+        if (contentElement?.contains(document.activeElement)) {
+            return;
+        }
+        // Our focus isn't in the content area - move it there.
+        // NOTE: Don't automatically shift focus on hover popovers
+        if (!showOnHover) {
+            contentElement.focus({ preventScroll: true });
+        }
+    }, [contentRef, showOnHover, autoFocus]);
+    return (_jsx(RadixPopover.Content, { forceMount: true, ref: contentRef, className: clsx(s.Popover, className), style: toCssVariables({
+            "popover-width": width,
+            "popover-min-width": minWidth,
+            "popover-max-width": maxWidth,
+        }), onCloseAutoFocus: showOnHover ? preventDefaultHandler : undefined, "data-animate": shake ? "shake" : undefined, "data-translucent": translucent ? "true" : undefined, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset ?? (align === "center" ? 0 : -5), avoidCollisions: avoidCollisions ?? true, hideWhenDetached: true, collisionPadding: 20, onOpenAutoFocus: preventDefaultHandler, 
+        // Use custom esc listener because default Radix is bound to the document
+        // and cannot have propagation stopped.
+        onEscapeKeyDown: preventDefaultHandler, onKeyDown: handleKeyDown, children: children }));
+};
+const ContentHoverable = (props) => {
+    const { setOpen, triggerRef, contentRef, isPointerInTransitRef, hoverOpenFocusedWithTab } = usePopoverContext();
+    const [pointerGraceArea, setPointerGraceArea] = useState(null);
+    const handleRemoveGraceArea = useCallback(() => {
+        setPointerGraceArea(null);
+        isPointerInTransitRef.current = false;
+    }, [isPointerInTransitRef]);
+    const handleCreateGraceArea = useCallback((event, hoverTarget) => {
+        const graceArea = createPointerIntentArea(event, hoverTarget);
+        setPointerGraceArea(graceArea);
+        isPointerInTransitRef.current = true;
+    }, [isPointerInTransitRef]);
+    useEffect(() => {
+        return () => handleRemoveGraceArea();
+    }, [handleRemoveGraceArea]);
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        const content = contentRef.current;
+        if (!trigger || !content) {
+            return;
+        }
+        const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
+        const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
+        trigger.addEventListener("pointerleave", handleTriggerLeave);
+        content.addEventListener("pointerleave", handleContentLeave);
+        return () => {
+            trigger.removeEventListener("pointerleave", handleTriggerLeave);
+            content.removeEventListener("pointerleave", handleContentLeave);
+        };
+    }, [contentRef, triggerRef, handleCreateGraceArea, handleRemoveGraceArea]);
+    useEffect(() => {
+        if (!pointerGraceArea) {
+            return;
+        }
+        const handleTrackPointerGrace = (event) => {
+            const trigger = triggerRef.current;
+            const content = contentRef.current;
+            const target = event.target;
+            const pointerPosition = { x: event.clientX, y: event.clientY };
+            const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
+            const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
+            // Stop considering grace areas when the pointer runs into other control triggers
+            const targetHasPopup = target.hasAttribute("aria-haspopup");
+            if (hasEnteredTarget) {
+                handleRemoveGraceArea();
+            }
+            else if (isPointerOutsideGraceArea || targetHasPopup) {
+                handleRemoveGraceArea();
+                setOpen(false);
+            }
+        };
+        document.addEventListener("pointermove", handleTrackPointerGrace);
+        return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
+    }, [pointerGraceArea, setOpen, handleRemoveGraceArea, triggerRef, contentRef]);
+    // Hoverable doesn't place focus in the popover by default
+    // If this is open, and tab is pressed, and focusableElements() has an element, prevent default behavior and focus it
+    // Then set a flag (probably in context) that tells us to restore focus to the trigger on close (e.g., not execute the onCloseAutoFocus handler)
+    useEffect(() => {
+        const handleKeyDown = (evt) => {
+            if (!contentRef.current) {
+                return;
+            }
+            // Only assume forward tab is attempting to move into the popup
+            if (evt.key === "Tab" && !evt.shiftKey) {
+                const [firstFocusable] = focusableElements(contentRef.current);
+                if (firstFocusable) {
+                    evt.preventDefault();
+                    firstFocusable.focus();
+                    hoverOpenFocusedWithTab.current = true;
+                    document.removeEventListener("keydown", handleKeyDown);
+                }
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [contentRef, hoverOpenFocusedWithTab]);
+    return _jsx(ContentImpl, { ...props });
+};
+const Content = (props) => {
+    const { open, showOnHover, setOpen } = usePopoverContext();
+    useEscCloseStack(open, () => {
+        setOpen(false);
+    });
+    return (_jsx(RadixPopover.Portal, { forceMount: true, children: _jsx(TransitionGroup, { enterDuration: 600, exitDuration: 300, className: s.Transition, disableAnimations: true, children: open &&
+                (showOnHover ? (_jsx(ContentHoverable, { ...props }, "popover-hover")) : (_jsx(ContentImpl, { ...props }, "popover"))) }) }));
+};
+Popover.Trigger = Trigger;
+Popover.Content = Content;
+//# sourceMappingURL=Popover.js.map