@octanejs/radix 0.1.32 → 0.1.33

package/dist/cjs/Popover.cjs

@@ -0,0 +1,340 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Popover_exports = {};
+__export(Popover_exports, {
+  Anchor: () => Anchor,
+  Arrow: () => Arrow,
+  Close: () => Close,
+  Content: () => Content,
+  Popover: () => Root,
+  PopoverAnchor: () => Anchor,
+  PopoverTrigger: () => Trigger,
+  Portal: () => Portal,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  createPopoverScope: () => createPopoverScope
+});
+module.exports = __toCommonJS(Popover_exports);
+var import_octane = require("octane");
+var import_aria_hidden = require("aria-hidden");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_DismissableLayer = require("./DismissableLayer.cjs");
+var import_FocusScope = require("./FocusScope.cjs");
+var import_focus_guards = require("./focus-guards.cjs");
+var import_internal = require("./internal.cjs");
+var PopperPrimitive = __toESM(require("./Popper.cjs"), 1);
+var import_Popper = require("./Popper.cjs");
+var import_Portal = require("./Portal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_scroll_lock = require("./scroll-lock.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const POPOVER_NAME = "Popover";
+const [createPopoverContext, createPopoverScope] = (0, import_context.createContextScope)(POPOVER_NAME, [
+  import_Popper.createPopperScope
+]);
+const usePopperScope = (0, import_Popper.createPopperScope)();
+const [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("Popover.Root");
+  const {
+    __scopePopover,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = false
+  } = props ?? {};
+  const popperScope = usePopperScope(__scopePopover, (0, import_internal.subSlot)(slot, "popper"));
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const [hasCustomAnchor, setHasCustomAnchor] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "anchor"));
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  return (0, import_octane.createElement)(PopperPrimitive.Root, {
+    ...popperScope,
+    children: (0, import_octane.createElement)(PopoverProvider, {
+      scope: __scopePopover,
+      contentId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId")),
+      triggerRef,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: (0, import_octane.useCallback)(
+        () => setOpen((prevOpen) => !prevOpen),
+        [setOpen],
+        (0, import_internal.subSlot)(slot, "toggle")
+      ),
+      hasCustomAnchor,
+      onCustomAnchorAdd: (0, import_octane.useCallback)(() => setHasCustomAnchor(true), [], (0, import_internal.subSlot)(slot, "add")),
+      onCustomAnchorRemove: (0, import_octane.useCallback)(
+        () => setHasCustomAnchor(false),
+        [],
+        (0, import_internal.subSlot)(slot, "remove")
+      ),
+      modal,
+      children
+    })
+  });
+}
+function Anchor(props) {
+  const slot = (0, import_internal.S)("Popover.Anchor");
+  const { __scopePopover, ...anchorProps } = props ?? {};
+  const context = usePopoverContext("PopoverAnchor", __scopePopover);
+  const popperScope = usePopperScope(__scopePopover, (0, import_internal.subSlot)(slot, "popper"));
+  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+  (0, import_octane.useEffect)(
+    () => {
+      onCustomAnchorAdd();
+      return () => onCustomAnchorRemove();
+    },
+    [onCustomAnchorAdd, onCustomAnchorRemove],
+    (0, import_internal.subSlot)(slot, "e:custom")
+  );
+  return (0, import_octane.createElement)(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Popover.Trigger");
+  const { __scopePopover, ref: forwardedRef, ...triggerProps } = props ?? {};
+  const context = usePopoverContext("PopoverTrigger", __scopePopover);
+  const popperScope = usePopperScope(__scopePopover, (0, import_internal.subSlot)(slot, "popper"));
+  const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    context.triggerRef,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const trigger = (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context.open,
+    "aria-controls": context.open ? context.contentId : void 0,
+    "data-state": getState(context.open),
+    ...triggerProps,
+    ref: composedTriggerRef,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, context.onOpenToggle)
+  });
+  return context.hasCustomAnchor ? trigger : (0, import_octane.createElement)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: trigger });
+}
+const [PortalProvider, usePortalContext] = createPopoverContext(
+  "PopoverPortal",
+  { forceMount: void 0 }
+);
+function Portal(props) {
+  const { __scopePopover, forceMount, children, container } = props ?? {};
+  const context = usePopoverContext("PopoverPortal", __scopePopover);
+  return (0, import_octane.createElement)(PortalProvider, {
+    scope: __scopePopover,
+    forceMount,
+    children: (0, import_octane.createElement)(import_Presence.Presence, {
+      present: forceMount || context.open,
+      children: (0, import_octane.createElement)(import_Portal.Portal, {
+        asChild: typeof children !== "function",
+        container,
+        children
+      })
+    })
+  });
+}
+function Content(props) {
+  const portalContext = usePortalContext("PopoverContent", props?.__scopePopover);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props ?? {};
+  const context = usePopoverContext("PopoverContent", props?.__scopePopover);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || context.open,
+    children: context.modal ? (0, import_octane.createElement)(ContentModal, contentProps) : (0, import_octane.createElement)(ContentNonModal, contentProps)
+  });
+}
+function ContentModal(props) {
+  const slot = (0, import_internal.S)("Popover.ContentModal");
+  const { ref: forwardedRef, ...rest } = props;
+  const context = usePopoverContext("PopoverContent", props.__scopePopover);
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef, (0, import_internal.subSlot)(slot, "refs"));
+  const isRightClickOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "rightClick"));
+  (0, import_octane.useEffect)(
+    () => {
+      const content = contentRef.current;
+      if (content) return (0, import_aria_hidden.hideOthers)(content);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:hide")
+  );
+  (0, import_scroll_lock.useScrollLock)(true, (0, import_internal.subSlot)(slot, "lock"));
+  return (0, import_octane.createElement)(ContentImpl, {
+    ...rest,
+    __scopePopover: props.__scopePopover,
+    ref: composedRefs,
+    // We make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out).
+    trapFocus: context.open,
+    disableOutsidePointerEvents: true,
+    onCloseAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+      event.preventDefault();
+      if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
+    }),
+    onPointerDownOutside: (0, import_compose_event_handlers.composeEventHandlers)(
+      props.onPointerDownOutside,
+      (event) => {
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        isRightClickOutsideRef.current = isRightClick;
+      },
+      { checkForDefaultPrevented: false }
+    ),
+    // When focus is trapped, a `focusout` event may still happen —
+    // make sure we don't trigger our `onDismiss` in such case.
+    onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(
+      props.onFocusOutside,
+      (event) => event.preventDefault(),
+      { checkForDefaultPrevented: false }
+    )
+  });
+}
+function ContentNonModal(props) {
+  const slot = (0, import_internal.S)("Popover.ContentNonModal");
+  const context = usePopoverContext("PopoverContent", props.__scopePopover);
+  const hasInteractedOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "interacted"));
+  const hasPointerDownOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pointer"));
+  return (0, import_octane.createElement)(ContentImpl, {
+    ...props,
+    trapFocus: false,
+    disableOutsidePointerEvents: false,
+    onCloseAutoFocus: (event) => {
+      props.onCloseAutoFocus?.(event);
+      if (!event.defaultPrevented) {
+        if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+        event.preventDefault();
+      }
+      hasInteractedOutsideRef.current = false;
+      hasPointerDownOutsideRef.current = false;
+    },
+    onInteractOutside: (event) => {
+      props.onInteractOutside?.(event);
+      if (!event.defaultPrevented) {
+        hasInteractedOutsideRef.current = true;
+        if (event.detail.originalEvent.type === "pointerdown") {
+          hasPointerDownOutsideRef.current = true;
+        }
+      }
+      const target = event.target;
+      const targetIsTrigger = context.triggerRef.current?.contains(target);
+      if (targetIsTrigger) event.preventDefault();
+      if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+        event.preventDefault();
+      }
+    }
+  });
+}
+function ContentImpl(props) {
+  const slot = (0, import_internal.S)("Popover.ContentImpl");
+  const {
+    __scopePopover,
+    trapFocus,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    disableOutsidePointerEvents,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    ...contentProps
+  } = props;
+  const context = usePopoverContext("PopoverContent", __scopePopover);
+  const popperScope = usePopperScope(__scopePopover, (0, import_internal.subSlot)(slot, "popper"));
+  (0, import_focus_guards.useFocusGuards)((0, import_internal.subSlot)(slot, "guards"));
+  return (0, import_octane.createElement)(import_FocusScope.FocusScope, {
+    asChild: true,
+    loop: true,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: onCloseAutoFocus,
+    children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+      asChild: true,
+      disableOutsidePointerEvents,
+      onInteractOutside,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onDismiss: () => context.onOpenChange(false),
+      deferPointerDownOutside: true,
+      children: (0, import_octane.createElement)(PopperPrimitive.Content, {
+        "data-state": getState(context.open),
+        role: "dialog",
+        id: context.contentId,
+        ...popperScope,
+        ...contentProps,
+        style: {
+          ...contentProps.style,
+          // re-namespace exposed content custom properties
+          "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+        }
+      })
+    })
+  });
+}
+function Close(props) {
+  const { __scopePopover, ...closeProps } = props ?? {};
+  const context = usePopoverContext("PopoverClose", __scopePopover);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    ...closeProps,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, () => context.onOpenChange(false))
+  });
+}
+function Arrow(props) {
+  const slot = (0, import_internal.S)("Popover.Arrow");
+  const { __scopePopover, ...arrowProps } = props ?? {};
+  const popperScope = usePopperScope(__scopePopover, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps });
+}
+function getState(open) {
+  return open ? "open" : "closed";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Anchor,
+  Arrow,
+  Close,
+  Content,
+  Popover,
+  PopoverAnchor,
+  PopoverTrigger,
+  Portal,
+  Root,
+  Trigger,
+  createPopoverScope
+});