@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/context-menu.cjs

@@ -0,0 +1,257 @@
+"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 context_menu_exports = {};
+__export(context_menu_exports, {
+  ContextMenu: () => ContextMenu
+});
+module.exports = __toCommonJS(context_menu_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_menu = require("./menu.cjs");
+var import_ContextMenuRootContext = require("./utils/ContextMenuRootContext.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useTimeout = require("./utils/useTimeout.cjs");
+var import_addEventListener = require("./utils/addEventListener.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_contains = require("./utils/contains.cjs");
+var import_list_utils = require("./utils/composite/list-utils.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_popupStateMapping = require("./utils/popupStateMapping.cjs");
+var import_findRootOwnerId = require("./utils/findRootOwnerId.cjs");
+const LONG_PRESS_DELAY = 500;
+function ContextMenuRoot(props) {
+  const slot = (0, import_internal.S)("ContextMenuRoot");
+  const [anchor, setAnchor] = (0, import_octane.useState)(
+    {
+      getBoundingClientRect() {
+        return DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 });
+      }
+    },
+    (0, import_internal.subSlot)(slot, "anchor")
+  );
+  const backdropRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "backdrop"));
+  const internalBackdropRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ibackdrop"));
+  const actionsRef = (0, import_octane.useRef)(
+    null,
+    (0, import_internal.subSlot)(slot, "actions")
+  );
+  const positionerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "positioner"));
+  const allowMouseUpTriggerRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "amut"));
+  const initialCursorPointRef = (0, import_octane.useRef)(
+    null,
+    (0, import_internal.subSlot)(slot, "cursor")
+  );
+  const id = (0, import_octane.useId)((0, import_internal.subSlot)(slot, "id"));
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      anchor,
+      setAnchor,
+      actionsRef,
+      backdropRef,
+      internalBackdropRef,
+      positionerRef,
+      allowMouseUpTriggerRef,
+      initialCursorPointRef,
+      rootId: id
+    }),
+    [anchor, id],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(import_ContextMenuRootContext.ContextMenuRootContext.Provider, {
+    value: contextValue,
+    children: (0, import_octane.createElement)(import_menu.MenuRootContext.Provider, {
+      value: void 0,
+      children: (0, import_octane.createElement)(import_menu.Menu.Root, props)
+    })
+  });
+}
+function ContextMenuTrigger(componentProps) {
+  const slot = (0, import_internal.S)("ContextMenuTrigger");
+  const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+  const {
+    setAnchor,
+    actionsRef,
+    internalBackdropRef,
+    backdropRef,
+    positionerRef,
+    allowMouseUpTriggerRef,
+    initialCursorPointRef,
+    rootId
+  } = (0, import_ContextMenuRootContext.useContextMenuRootContext)(false);
+  const { store } = (0, import_menu.useMenuRootContext)();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const disabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "disabled"));
+  const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const touchPositionRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "touch"));
+  const longPressTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "lp"));
+  const allowMouseUpTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "amu"));
+  const allowMouseUpRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "amur"));
+  function handleLongPress(x, y, event) {
+    const isTouchEvent = event.type.startsWith("touch");
+    initialCursorPointRef.current = { x, y };
+    setAnchor({
+      getBoundingClientRect() {
+        return DOMRect.fromRect({
+          width: isTouchEvent ? 10 : 0,
+          height: isTouchEvent ? 10 : 0,
+          x,
+          y
+        });
+      }
+    });
+    allowMouseUpRef.current = false;
+    actionsRef.current?.setOpen(true, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerPress, event));
+    allowMouseUpTimeout.start(LONG_PRESS_DELAY, () => {
+      allowMouseUpRef.current = true;
+    });
+  }
+  function handleContextMenu(event) {
+    if (disabled) {
+      return;
+    }
+    allowMouseUpTriggerRef.current = true;
+    (0, import_list_utils.stopEvent)(event);
+    handleLongPress(event.clientX, event.clientY, event);
+    const doc = (0, import_owner.ownerDocument)(triggerRef.current);
+    (0, import_addEventListener.addEventListener)(
+      doc,
+      "mouseup",
+      (mouseEvent) => {
+        allowMouseUpTriggerRef.current = false;
+        if (!allowMouseUpRef.current) {
+          return;
+        }
+        allowMouseUpTimeout.clear();
+        allowMouseUpRef.current = false;
+        const mouseUpTarget = (0, import_list_utils.getTarget)(mouseEvent);
+        if ((0, import_contains.contains)(positionerRef.current, mouseUpTarget)) {
+          return;
+        }
+        if (rootId && mouseUpTarget && (0, import_findRootOwnerId.findRootOwnerId)(mouseUpTarget) === rootId) {
+          return;
+        }
+        actionsRef.current?.setOpen(
+          false,
+          (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.cancelOpen, mouseEvent)
+        );
+      },
+      { once: true }
+    );
+  }
+  function handleTouchStart(event) {
+    if (disabled) {
+      return;
+    }
+    allowMouseUpTriggerRef.current = false;
+    if (event.touches.length === 1) {
+      event.stopPropagation();
+      const touch = event.touches[0];
+      touchPositionRef.current = { x: touch.clientX, y: touch.clientY };
+      longPressTimeout.start(LONG_PRESS_DELAY, () => {
+        if (touchPositionRef.current) {
+          handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event);
+        }
+      });
+    }
+  }
+  function handleTouchMove(event) {
+    if (longPressTimeout.isStarted() && touchPositionRef.current && event.touches.length === 1) {
+      const touch = event.touches[0];
+      const moveThreshold = 10;
+      const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
+      const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
+      if (deltaX > moveThreshold || deltaY > moveThreshold) {
+        longPressTimeout.clear();
+      }
+    }
+  }
+  function handleTouchEnd() {
+    longPressTimeout.clear();
+    touchPositionRef.current = null;
+  }
+  (0, import_octane.useEffect)(
+    () => {
+      function handleDocumentContextMenu(event) {
+        if (disabled) {
+          return;
+        }
+        const target = (0, import_list_utils.getTarget)(event);
+        const targetElement = target;
+        if ((0, import_contains.contains)(triggerRef.current, targetElement) || (0, import_contains.contains)(internalBackdropRef.current, targetElement) || (0, import_contains.contains)(backdropRef.current, targetElement)) {
+          event.preventDefault();
+        }
+      }
+      const doc = (0, import_owner.ownerDocument)(triggerRef.current);
+      return (0, import_addEventListener.addEventListener)(doc, "contextmenu", handleDocumentContextMenu);
+    },
+    [backdropRef, disabled, internalBackdropRef],
+    (0, import_internal.subSlot)(slot, "e:ctxmenu")
+  );
+  const state = {
+    open
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: [triggerRef, forwardedRef],
+      props: [
+        {
+          onContextMenu: handleContextMenu,
+          onTouchStart: handleTouchStart,
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          style: {
+            WebkitTouchCallout: "none"
+          }
+        },
+        elementProps
+      ],
+      stateAttributesMapping: import_popupStateMapping.pressableTriggerOpenStateMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Backdrop: import_menu.Menu.Backdrop,
+  Portal: import_menu.Menu.Portal,
+  Positioner: import_menu.Menu.Positioner,
+  Popup: import_menu.Menu.Popup,
+  Arrow: import_menu.Menu.Arrow,
+  Group: import_menu.Menu.Group,
+  GroupLabel: import_menu.Menu.GroupLabel,
+  Item: import_menu.Menu.Item,
+  CheckboxItem: import_menu.Menu.CheckboxItem,
+  CheckboxItemIndicator: import_menu.Menu.CheckboxItemIndicator,
+  LinkItem: import_menu.Menu.LinkItem,
+  RadioGroup: import_menu.Menu.RadioGroup,
+  RadioItem: import_menu.Menu.RadioItem,
+  RadioItemIndicator: import_menu.Menu.RadioItemIndicator,
+  SubmenuRoot: import_menu.Menu.SubmenuRoot,
+  SubmenuTrigger: import_menu.Menu.SubmenuTrigger,
+  Separator: import_menu.Menu.Separator
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextMenu
+});

package/dist/cjs/csp-provider.cjs

@@ -0,0 +1,40 @@
+"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 csp_provider_exports = {};
+__export(csp_provider_exports, {
+  CSPProvider: () => CSPProvider
+});
+module.exports = __toCommonJS(csp_provider_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_CSPContext = require("./utils/CSPContext.cjs");
+function CSPProvider(props) {
+  const slot = (0, import_internal.S)("CSPProvider");
+  const { children, nonce, disableStyleElements } = props;
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ nonce, disableStyleElements }),
+    [nonce, disableStyleElements],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(import_CSPContext.CSPContext.Provider, { value: contextValue, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSPProvider
+});