@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/HoverCard.cjs

@@ -0,0 +1,309 @@
+"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 HoverCard_exports = {};
+__export(HoverCard_exports, {
+  Arrow: () => Arrow,
+  Content: () => Content,
+  HoverCard: () => Root,
+  HoverCardContent: () => Content,
+  HoverCardTrigger: () => Trigger,
+  Portal: () => Portal,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  createHoverCardScope: () => createHoverCardScope
+});
+module.exports = __toCommonJS(HoverCard_exports);
+var import_octane = require("octane");
+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_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_useControllableState = require("./useControllableState.cjs");
+let originalBodyUserSelect;
+const HOVERCARD_NAME = "HoverCard";
+const [createHoverCardContext, createHoverCardScope] = (0, import_context.createContextScope)(HOVERCARD_NAME, [
+  import_Popper.createPopperScope
+]);
+const usePopperScope = (0, import_Popper.createPopperScope)();
+const [HoverCardProvider, useHoverCardContext] = createHoverCardContext(HOVERCARD_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("HoverCard.Root");
+  const {
+    __scopeHoverCard,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    openDelay = 700,
+    closeDelay = 300
+  } = props ?? {};
+  const popperScope = usePopperScope(__scopeHoverCard, (0, import_internal.subSlot)(slot, "popper"));
+  const openTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "openTimer"));
+  const closeTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "closeTimer"));
+  const hasSelectionRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "selection"));
+  const isPointerDownOnContentRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pointerDown"));
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  const handleOpen = (0, import_octane.useCallback)(
+    () => {
+      clearTimeout(closeTimerRef.current);
+      openTimerRef.current = window.setTimeout(() => setOpen(true), openDelay);
+    },
+    [openDelay, setOpen],
+    (0, import_internal.subSlot)(slot, "handleOpen")
+  );
+  const handleClose = (0, import_octane.useCallback)(
+    () => {
+      clearTimeout(openTimerRef.current);
+      if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) {
+        closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);
+      }
+    },
+    [closeDelay, setOpen],
+    (0, import_internal.subSlot)(slot, "handleClose")
+  );
+  const handleDismiss = (0, import_octane.useCallback)(() => setOpen(false), [setOpen], (0, import_internal.subSlot)(slot, "dismiss"));
+  (0, import_octane.useEffect)(
+    () => {
+      return () => {
+        clearTimeout(openTimerRef.current);
+        clearTimeout(closeTimerRef.current);
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:cleanup")
+  );
+  return (0, import_octane.createElement)(HoverCardProvider, {
+    scope: __scopeHoverCard,
+    open,
+    onOpenChange: setOpen,
+    onOpen: handleOpen,
+    onClose: handleClose,
+    onDismiss: handleDismiss,
+    hasSelectionRef,
+    isPointerDownOnContentRef,
+    children: (0, import_octane.createElement)(PopperPrimitive.Root, { ...popperScope, children })
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("HoverCard.Trigger");
+  const { __scopeHoverCard, ...triggerProps } = props ?? {};
+  const context = useHoverCardContext("HoverCardTrigger", __scopeHoverCard);
+  const popperScope = usePopperScope(__scopeHoverCard, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Anchor, {
+    asChild: true,
+    ...popperScope,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.a, {
+      "data-state": context.open ? "open" : "closed",
+      ...triggerProps,
+      onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, excludeTouch(context.onOpen)),
+      onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerLeave, excludeTouch(context.onClose)),
+      onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocus, context.onOpen),
+      onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props?.onBlur, context.onClose),
+      // prevent focus event on touch devices
+      onTouchStart: (0, import_compose_event_handlers.composeEventHandlers)(
+        props?.onTouchStart,
+        (event) => event.preventDefault()
+      )
+    })
+  });
+}
+const [PortalProvider, usePortalContext] = createHoverCardContext(
+  "HoverCardPortal",
+  { forceMount: void 0 }
+);
+function Portal(props) {
+  const { __scopeHoverCard, forceMount, children, container } = props ?? {};
+  const context = useHoverCardContext("HoverCardPortal", __scopeHoverCard);
+  return (0, import_octane.createElement)(PortalProvider, {
+    scope: __scopeHoverCard,
+    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("HoverCardContent", props?.__scopeHoverCard);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props ?? {};
+  const context = useHoverCardContext("HoverCardContent", props?.__scopeHoverCard);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || context.open,
+    children: (0, import_octane.createElement)(ContentImpl, {
+      "data-state": context.open ? "open" : "closed",
+      ...contentProps,
+      onPointerEnter: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerEnter, excludeTouch(context.onOpen)),
+      onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerLeave, excludeTouch(context.onClose))
+    })
+  });
+}
+function ContentImpl(props) {
+  const slot = (0, import_internal.S)("HoverCard.ContentImpl");
+  const {
+    __scopeHoverCard,
+    ref: forwardedRef,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    ...contentProps
+  } = props;
+  const context = useHoverCardContext("HoverCardContent", __scopeHoverCard);
+  const popperScope = usePopperScope(__scopeHoverCard, (0, import_internal.subSlot)(slot, "popper"));
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const [containSelection, setContainSelection] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "contain"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (containSelection) {
+        const body = document.body;
+        originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
+        body.style.userSelect = "none";
+        body.style.webkitUserSelect = "none";
+        return () => {
+          body.style.userSelect = originalBodyUserSelect;
+          body.style.webkitUserSelect = originalBodyUserSelect;
+        };
+      }
+    },
+    [containSelection],
+    (0, import_internal.subSlot)(slot, "e:selection")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (ref.current) {
+        const handlePointerUp = () => {
+          setContainSelection(false);
+          context.isPointerDownOnContentRef.current = false;
+          setTimeout(() => {
+            const hasSelection = document.getSelection()?.toString() !== "";
+            if (hasSelection) context.hasSelectionRef.current = true;
+          });
+        };
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+          document.removeEventListener("pointerup", handlePointerUp);
+          context.hasSelectionRef.current = false;
+          context.isPointerDownOnContentRef.current = false;
+        };
+      }
+    },
+    [context.isPointerDownOnContentRef, context.hasSelectionRef],
+    (0, import_internal.subSlot)(slot, "e:pointerup")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (ref.current) {
+        const tabbables = getTabbableNodes(ref.current);
+        tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
+      }
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "e:tabbables")
+  );
+  return (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents: false,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(onFocusOutside, (event) => {
+      event.preventDefault();
+    }),
+    onDismiss: context.onDismiss,
+    children: (0, import_octane.createElement)(PopperPrimitive.Content, {
+      ...popperScope,
+      ...contentProps,
+      onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(contentProps.onPointerDown, (event) => {
+        if (event.currentTarget.contains(event.target)) {
+          setContainSelection(true);
+        }
+        context.hasSelectionRef.current = false;
+        context.isPointerDownOnContentRef.current = true;
+      }),
+      ref: composedRefs,
+      style: {
+        ...contentProps.style,
+        userSelect: containSelection ? "text" : void 0,
+        // Safari requires prefix
+        WebkitUserSelect: containSelection ? "text" : void 0,
+        // re-namespace exposed content custom properties
+        "--radix-hover-card-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-hover-card-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-hover-card-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-hover-card-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-hover-card-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    })
+  });
+}
+function Arrow(props) {
+  const slot = (0, import_internal.S)("HoverCard.Arrow");
+  const { __scopeHoverCard, ...arrowProps } = props ?? {};
+  const popperScope = usePopperScope(__scopeHoverCard, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps });
+}
+function excludeTouch(eventHandler) {
+  return (event) => event.pointerType === "touch" ? void 0 : eventHandler();
+}
+function getTabbableNodes(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  Content,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Portal,
+  Root,
+  Trigger,
+  createHoverCardScope
+});

package/dist/cjs/Label.cjs

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Label_exports = {};
+__export(Label_exports, {
+  Label: () => Label,
+  Root: () => Label
+});
+module.exports = __toCommonJS(Label_exports);
+var import_octane = require("octane");
+var import_Primitive = require("./Primitive.cjs");
+function Label(props) {
+  return (0, import_octane.createElement)(import_Primitive.Primitive.label, {
+    ...props,
+    onMouseDown: (event) => {
+      const target = event.target;
+      if (target.closest("button, input, select, textarea")) return;
+      props?.onMouseDown?.(event);
+      if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Label,
+  Root
+});