@vx-oss/heroui-v2-use-aria-overlay 2.0.5-alpha.0

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+The MIT License (MIT)
+
+Parameters
+
+Creator / Maintainer    : Vezham Technologies Private Limited
+Original Author         : NextUI Inc
+Licensor                : Vezham Technologies Private Limited
+
+Copyright © 2025, Vezham Technologies Private Limited. All rights reserved.
+Copyright (c) 2020, NextUI Inc.
+
+---
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @vx-oss/heroui-v2-use-aria-overlay
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @vx-oss/heroui-v2-use-aria-overlay
+# or
+npm i @vx-oss/heroui-v2-use-aria-overlay
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import { AriaOverlayProps, OverlayAria } from '@react-aria/overlays';
+import { RefObject } from 'react';
+
+interface UseAriaOverlayProps extends AriaOverlayProps {
+    /**
+     * When `true`, `click/focus` interactions will be disabled on elements outside
+     * the `Overlay`. Users need to click twice on outside elements to interact with them:
+     * once to close the overlay, and again to trigger the element.
+     *
+     * @default true
+     */
+    disableOutsideEvents?: boolean;
+}
+/**
+ * Provides the behavior for overlays such as dialogs, popovers, and menus.
+ * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
+ * or optionally, on blur. Only the top-most overlay will close at once.
+ */
+declare function useAriaOverlay(props: UseAriaOverlayProps, ref: RefObject<Element>): OverlayAria;
+
+export { type UseAriaOverlayProps, useAriaOverlay };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import { AriaOverlayProps, OverlayAria } from '@react-aria/overlays';
+import { RefObject } from 'react';
+
+interface UseAriaOverlayProps extends AriaOverlayProps {
+    /**
+     * When `true`, `click/focus` interactions will be disabled on elements outside
+     * the `Overlay`. Users need to click twice on outside elements to interact with them:
+     * once to close the overlay, and again to trigger the element.
+     *
+     * @default true
+     */
+    disableOutsideEvents?: boolean;
+}
+/**
+ * Provides the behavior for overlays such as dialogs, popovers, and menus.
+ * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
+ * or optionally, on blur. Only the top-most overlay will close at once.
+ */
+declare function useAriaOverlay(props: UseAriaOverlayProps, ref: RefObject<Element>): OverlayAria;
+
+export { type UseAriaOverlayProps, useAriaOverlay };

package/dist/index.js

@@ -0,0 +1,135 @@
+"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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useAriaOverlay: () => useAriaOverlay
+});
+module.exports = __toCommonJS(index_exports);
+var import_focus = require("@react-aria/focus");
+var import_interactions = require("@react-aria/interactions");
+var import_react = require("react");
+var visibleOverlays = [];
+function useAriaOverlay(props, ref) {
+  const {
+    disableOutsideEvents = true,
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    isOpen,
+    onClose,
+    shouldCloseOnBlur,
+    shouldCloseOnInteractOutside
+  } = props;
+  (0, import_react.useEffect)(() => {
+    if (isOpen && !visibleOverlays.includes(ref)) {
+      visibleOverlays.push(ref);
+      return () => {
+        let index = visibleOverlays.indexOf(ref);
+        if (index >= 0) {
+          visibleOverlays.splice(index, 1);
+        }
+      };
+    }
+  }, [isOpen, ref]);
+  const onHide = () => {
+    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
+      onClose();
+    }
+  };
+  const onInteractOutsideStart = (e) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        if (disableOutsideEvents) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+      if (getOverlayInteractionType(ref) !== "pressEnd") {
+        onHide();
+      }
+    }
+  };
+  const onInteractOutside = (e) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        if (disableOutsideEvents) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+      onHide();
+    }
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape" && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {
+      e.stopPropagation();
+      e.preventDefault();
+      onHide();
+    }
+  };
+  (0, import_interactions.useInteractOutside)({
+    isDisabled: !(isDismissable && isOpen),
+    onInteractOutside: isDismissable && isOpen ? onInteractOutside : void 0,
+    onInteractOutsideStart,
+    ref
+  });
+  const { focusWithinProps } = (0, import_interactions.useFocusWithin)({
+    isDisabled: !shouldCloseOnBlur,
+    onBlurWithin: (e) => {
+      if (!e.relatedTarget || (0, import_focus.isElementInChildOfActiveScope)(e.relatedTarget)) {
+        return;
+      }
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) {
+        onHide();
+      }
+    }
+  });
+  const onPointerDownUnderlay = (e) => {
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+    }
+  };
+  function getOverlayInteractionType(ref2) {
+    const el = ref2.current;
+    if (!el) return "unknown";
+    const role = (el.getAttribute("role") || "").toLowerCase();
+    const ariaModalAttr = el.getAttribute("aria-modal");
+    if ((role === "dialog" || role === "alertdialog") && (ariaModalAttr === null || ariaModalAttr.toLowerCase() === "true")) {
+      return "pressEnd";
+    }
+    if (["listbox", "menu", "tree", "grid", "combobox"].includes(role)) {
+      return "pressStart";
+    }
+    return "unknown";
+  }
+  return {
+    overlayProps: {
+      onKeyDown,
+      ...focusWithinProps
+    },
+    underlayProps: {
+      onPointerDown: onPointerDownUnderlay
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAriaOverlay
+});

package/dist/index.mjs

@@ -0,0 +1,110 @@
+// src/index.ts
+import { isElementInChildOfActiveScope } from "@react-aria/focus";
+import { useFocusWithin, useInteractOutside } from "@react-aria/interactions";
+import { useEffect } from "react";
+var visibleOverlays = [];
+function useAriaOverlay(props, ref) {
+  const {
+    disableOutsideEvents = true,
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    isOpen,
+    onClose,
+    shouldCloseOnBlur,
+    shouldCloseOnInteractOutside
+  } = props;
+  useEffect(() => {
+    if (isOpen && !visibleOverlays.includes(ref)) {
+      visibleOverlays.push(ref);
+      return () => {
+        let index = visibleOverlays.indexOf(ref);
+        if (index >= 0) {
+          visibleOverlays.splice(index, 1);
+        }
+      };
+    }
+  }, [isOpen, ref]);
+  const onHide = () => {
+    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
+      onClose();
+    }
+  };
+  const onInteractOutsideStart = (e) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        if (disableOutsideEvents) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+      if (getOverlayInteractionType(ref) !== "pressEnd") {
+        onHide();
+      }
+    }
+  };
+  const onInteractOutside = (e) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        if (disableOutsideEvents) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+      onHide();
+    }
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape" && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {
+      e.stopPropagation();
+      e.preventDefault();
+      onHide();
+    }
+  };
+  useInteractOutside({
+    isDisabled: !(isDismissable && isOpen),
+    onInteractOutside: isDismissable && isOpen ? onInteractOutside : void 0,
+    onInteractOutsideStart,
+    ref
+  });
+  const { focusWithinProps } = useFocusWithin({
+    isDisabled: !shouldCloseOnBlur,
+    onBlurWithin: (e) => {
+      if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {
+        return;
+      }
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) {
+        onHide();
+      }
+    }
+  });
+  const onPointerDownUnderlay = (e) => {
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+    }
+  };
+  function getOverlayInteractionType(ref2) {
+    const el = ref2.current;
+    if (!el) return "unknown";
+    const role = (el.getAttribute("role") || "").toLowerCase();
+    const ariaModalAttr = el.getAttribute("aria-modal");
+    if ((role === "dialog" || role === "alertdialog") && (ariaModalAttr === null || ariaModalAttr.toLowerCase() === "true")) {
+      return "pressEnd";
+    }
+    if (["listbox", "menu", "tree", "grid", "combobox"].includes(role)) {
+      return "pressStart";
+    }
+    return "unknown";
+  }
+  return {
+    overlayProps: {
+      onKeyDown,
+      ...focusWithinProps
+    },
+    underlayProps: {
+      onPointerDown: onPointerDownUnderlay
+    }
+  };
+}
+export {
+  useAriaOverlay
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@vx-oss/heroui-v2-use-aria-overlay",
+  "version": "2.0.5-alpha.0",
+  "description": "A custom implementation of react aria overlay",
+  "keywords": [
+    "use-aria-overlay"
+  ],
+  "author": "Vx OSS Devs <oss-developers@vezham.com>",
+  "homepage": "https://vezham.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vezham/heroui-v2.git",
+    "directory": "packages/hooks/use-aria-overlay"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/heroui-v2/issues"
+  },
+  "dependencies": {
+    "@react-aria/focus": "3.21.2",
+    "@react-aria/interactions": "3.25.6",
+    "@react-aria/overlays": "3.30.0",
+    "@react-types/shared": "3.32.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}