@yamada-ui/use-focus-visible 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+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,31 @@
+# @yamada-ui/use-focus-visible
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/use-focus-visible
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/use-focus-visible
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/use-focus-visible
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+type FocusVisibleCallback = (isFocusVisible: boolean) => void;
+declare const trackFocusVisible: (func: FocusVisibleCallback) => () => void;
+declare const useFocusVisible: () => {
+    focusVisible: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+
+export { trackFocusVisible, useFocusVisible };

package/dist/index.js

@@ -0,0 +1,131 @@
+"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 src_exports = {};
+__export(src_exports, {
+  trackFocusVisible: () => trackFocusVisible,
+  useFocusVisible: () => useFocusVisible
+});
+module.exports = __toCommonJS(src_exports);
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var hasSetup = false;
+var modality = null;
+var hasEventBeforeFocus = false;
+var hasBlurredWindowRecently = false;
+var handlers = /* @__PURE__ */ new Set();
+var trigger = (modality2, ev) => handlers.forEach((handler) => handler(modality2, ev));
+var onValid = (e) => {
+  return !(e.metaKey || !import_utils.isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+};
+var onKeyboard = (ev) => {
+  hasEventBeforeFocus = true;
+  if (onValid(ev)) {
+    modality = "keyboard";
+    trigger("keyboard", ev);
+  }
+};
+var onPointer = (ev) => {
+  modality = "pointer";
+  if (ev.type === "mousedown" || ev.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
+    if (target.matches(":focus-visible"))
+      return;
+    trigger("pointer", ev);
+  }
+};
+var isVirtualClick = (ev) => {
+  if (ev.mozInputSource === 0 && ev.isTrusted)
+    return true;
+  return ev.detail === 0 && !ev.pointerType;
+};
+var onClick = (ev) => {
+  if (!isVirtualClick(ev))
+    return;
+  hasEventBeforeFocus = true;
+  modality = "virtual";
+};
+var onFocus = (ev) => {
+  if (ev.target === window || ev.target === document)
+    return;
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+    modality = "virtual";
+    trigger("virtual", ev);
+  }
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
+};
+var onBlur = () => {
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
+};
+var isFocusVisible = () => modality !== "pointer";
+var setupGlobalFocusEvents = () => {
+  if (typeof window === "undefined" || hasSetup)
+    return;
+  const { focus } = HTMLElement.prototype;
+  HTMLElement.prototype.focus = (...args) => {
+    hasEventBeforeFocus = true;
+    if (void 0)
+      focus.apply(void 0, args);
+  };
+  document.addEventListener("keydown", onKeyboard, true);
+  document.addEventListener("keyup", onKeyboard, true);
+  document.addEventListener("click", onClick, true);
+  window.addEventListener("focus", onFocus, true);
+  window.addEventListener("blur", onBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", onPointer, true);
+    document.addEventListener("pointermove", onPointer, true);
+    document.addEventListener("pointerup", onPointer, true);
+  } else {
+    document.addEventListener("mousedown", onPointer, true);
+    document.addEventListener("mousemove", onPointer, true);
+    document.addEventListener("mouseup", onPointer, true);
+  }
+  hasSetup = true;
+};
+var trackFocusVisible = (func) => {
+  setupGlobalFocusEvents();
+  func(isFocusVisible());
+  const handler = () => func(isFocusVisible());
+  handlers.add(handler);
+  return () => {
+    handlers.delete(handler);
+  };
+};
+var useFocusVisible = () => {
+  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
+  const [focus, setFocus] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    return trackFocusVisible(setFocusVisible);
+  }, []);
+  return {
+    focusVisible: focusVisible && focus,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false)
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  trackFocusVisible,
+  useFocusVisible
+});

package/dist/index.mjs

@@ -0,0 +1,105 @@
+// src/index.ts
+import { isMac } from "@yamada-ui/utils";
+import { useEffect, useState } from "react";
+var hasSetup = false;
+var modality = null;
+var hasEventBeforeFocus = false;
+var hasBlurredWindowRecently = false;
+var handlers = /* @__PURE__ */ new Set();
+var trigger = (modality2, ev) => handlers.forEach((handler) => handler(modality2, ev));
+var onValid = (e) => {
+  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+};
+var onKeyboard = (ev) => {
+  hasEventBeforeFocus = true;
+  if (onValid(ev)) {
+    modality = "keyboard";
+    trigger("keyboard", ev);
+  }
+};
+var onPointer = (ev) => {
+  modality = "pointer";
+  if (ev.type === "mousedown" || ev.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
+    if (target.matches(":focus-visible"))
+      return;
+    trigger("pointer", ev);
+  }
+};
+var isVirtualClick = (ev) => {
+  if (ev.mozInputSource === 0 && ev.isTrusted)
+    return true;
+  return ev.detail === 0 && !ev.pointerType;
+};
+var onClick = (ev) => {
+  if (!isVirtualClick(ev))
+    return;
+  hasEventBeforeFocus = true;
+  modality = "virtual";
+};
+var onFocus = (ev) => {
+  if (ev.target === window || ev.target === document)
+    return;
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+    modality = "virtual";
+    trigger("virtual", ev);
+  }
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
+};
+var onBlur = () => {
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
+};
+var isFocusVisible = () => modality !== "pointer";
+var setupGlobalFocusEvents = () => {
+  if (typeof window === "undefined" || hasSetup)
+    return;
+  const { focus } = HTMLElement.prototype;
+  HTMLElement.prototype.focus = (...args) => {
+    hasEventBeforeFocus = true;
+    if (void 0)
+      focus.apply(void 0, args);
+  };
+  document.addEventListener("keydown", onKeyboard, true);
+  document.addEventListener("keyup", onKeyboard, true);
+  document.addEventListener("click", onClick, true);
+  window.addEventListener("focus", onFocus, true);
+  window.addEventListener("blur", onBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", onPointer, true);
+    document.addEventListener("pointermove", onPointer, true);
+    document.addEventListener("pointerup", onPointer, true);
+  } else {
+    document.addEventListener("mousedown", onPointer, true);
+    document.addEventListener("mousemove", onPointer, true);
+    document.addEventListener("mouseup", onPointer, true);
+  }
+  hasSetup = true;
+};
+var trackFocusVisible = (func) => {
+  setupGlobalFocusEvents();
+  func(isFocusVisible());
+  const handler = () => func(isFocusVisible());
+  handlers.add(handler);
+  return () => {
+    handlers.delete(handler);
+  };
+};
+var useFocusVisible = () => {
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [focus, setFocus] = useState(false);
+  useEffect(() => {
+    return trackFocusVisible(setFocusVisible);
+  }, []);
+  return {
+    focusVisible: focusVisible && focus,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false)
+  };
+};
+export {
+  trackFocusVisible,
+  useFocusVisible
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@yamada-ui/use-focus-visible",
+  "version": "0.1.0",
+  "description": "Yamada UI useFocusVisible custom hook",
+  "keywords": [
+    "use-focus-visible"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/hooks/use-focus-visible"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=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": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}