@develemit/web-hooks 0.0.0-stage → 0.2.0

package/dist/focus-trap.cjs

@@ -0,0 +1,110 @@
+"use client";
+"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/focus-trap/index.ts
+var focus_trap_exports = {};
+__export(focus_trap_exports, {
+  FOCUSABLE_SELECTOR: () => FOCUSABLE_SELECTOR,
+  focusableWithin: () => focusableWithin,
+  nextFocusTarget: () => nextFocusTarget,
+  useFocusTrap: () => useFocusTrap
+});
+module.exports = __toCommonJS(focus_trap_exports);
+
+// src/focus-trap/focusables.ts
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusableWithin(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((el) => !el.closest("[hidden], [inert]"));
+}
+function nextFocusTarget(items, current, shiftKey, container) {
+  const first = items[0];
+  const last = items[items.length - 1];
+  if (!first || !last) return null;
+  if (!current || !container.contains(current)) return shiftKey ? last : first;
+  if (shiftKey && (current === first || current === container)) return last;
+  if (!shiftKey && current === last) return first;
+  return null;
+}
+
+// src/focus-trap/use-focus-trap.ts
+var import_react = require("react");
+var activeTraps = [];
+function useFocusTrap(containerRef, {
+  active,
+  initialFocusRef,
+  returnFocusRef,
+  restoreFocus = true
+}) {
+  const openerRef = (0, import_react.useRef)(null);
+  if (active && !openerRef.current && typeof document !== "undefined") {
+    openerRef.current = document.activeElement;
+  }
+  (0, import_react.useEffect)(() => {
+    if (!active) openerRef.current = null;
+  }, [active]);
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!active || !container) return;
+    const token = {};
+    activeTraps.push(token);
+    if (!container.contains(document.activeElement)) {
+      const target = initialFocusRef?.current ?? focusableWithin(container)[0] ?? container;
+      if (target === container && !container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "-1");
+      }
+      target.focus();
+    }
+    function onKeyDown(event) {
+      if (event.key !== "Tab" || !container) return;
+      if (activeTraps[activeTraps.length - 1] !== token) return;
+      const items = focusableWithin(container);
+      if (items.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const target = nextFocusTarget(
+        items,
+        document.activeElement,
+        event.shiftKey,
+        container
+      );
+      if (target) {
+        event.preventDefault();
+        target.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      activeTraps.splice(activeTraps.indexOf(token), 1);
+      const opener = returnFocusRef?.current ?? openerRef.current;
+      if (restoreFocus && opener?.isConnected) opener.focus();
+    };
+  }, [active, containerRef, initialFocusRef, returnFocusRef, restoreFocus]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FOCUSABLE_SELECTOR,
+  focusableWithin,
+  nextFocusTarget,
+  useFocusTrap
+});

package/dist/focus-trap.d.cts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+declare function focusableWithin(container: HTMLElement): HTMLElement[];
+/** The element Tab must be redirected to, or null when the browser's own move is fine. */
+declare function nextFocusTarget(items: HTMLElement[], current: Element | null, shiftKey: boolean, container: HTMLElement): HTMLElement | null;
+
+type UseFocusTrapOptions = {
+    active: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Wins over the captured opener. Safari leaves <body> focused after a tap on a button. */
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    restoreFocus?: boolean;
+};
+declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, { active, initialFocusRef, returnFocusRef, restoreFocus, }: UseFocusTrapOptions): void;
+
+export { FOCUSABLE_SELECTOR, type UseFocusTrapOptions, focusableWithin, nextFocusTarget, useFocusTrap };

package/dist/focus-trap.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+declare function focusableWithin(container: HTMLElement): HTMLElement[];
+/** The element Tab must be redirected to, or null when the browser's own move is fine. */
+declare function nextFocusTarget(items: HTMLElement[], current: Element | null, shiftKey: boolean, container: HTMLElement): HTMLElement | null;
+
+type UseFocusTrapOptions = {
+    active: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Wins over the captured opener. Safari leaves <body> focused after a tap on a button. */
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    restoreFocus?: boolean;
+};
+declare function useFocusTrap(containerRef: RefObject<HTMLElement | null>, { active, initialFocusRef, returnFocusRef, restoreFocus, }: UseFocusTrapOptions): void;
+
+export { FOCUSABLE_SELECTOR, type UseFocusTrapOptions, focusableWithin, nextFocusTarget, useFocusTrap };

package/dist/focus-trap.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  FOCUSABLE_SELECTOR,
+  focusableWithin,
+  nextFocusTarget,
+  useFocusTrap
+} from "./chunk-DNU57XEJ.js";
+export {
+  FOCUSABLE_SELECTOR,
+  focusableWithin,
+  nextFocusTarget,
+  useFocusTrap
+};

package/dist/hotkey.cjs

@@ -0,0 +1,127 @@
+"use client";
+"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/hotkey/index.ts
+var hotkey_exports = {};
+__export(hotkey_exports, {
+  detectApple: () => detectApple,
+  isEditableTarget: () => isEditableTarget,
+  matchHotkey: () => matchHotkey,
+  parseHotkey: () => parseHotkey,
+  useHotkey: () => useHotkey
+});
+module.exports = __toCommonJS(hotkey_exports);
+
+// src/hotkey/parse-hotkey.ts
+var KEY_ALIASES = {
+  esc: "escape",
+  space: " ",
+  plus: "+",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+function parseHotkey(combo) {
+  const parsed = { key: "", mod: false, ctrl: false, meta: false, alt: false, shift: false };
+  const parts = combo.trim().toLowerCase().split(/\+(?=.)/);
+  for (const part of parts) {
+    const token = part.trim();
+    if (token === "mod" || token === "ctrl" || token === "meta" || token === "alt" || token === "shift") {
+      parsed[token] = true;
+    } else {
+      parsed.key = KEY_ALIASES[token] ?? token;
+    }
+  }
+  if (!parsed.key) throw new Error(`Invalid hotkey "${combo}": no key`);
+  return parsed;
+}
+
+// src/hotkey/match-hotkey.ts
+var CODE_FOR_SYMBOL = {
+  "/": "Slash",
+  ".": "Period",
+  ",": "Comma",
+  ";": "Semicolon",
+  "'": "Quote",
+  "[": "BracketLeft",
+  "]": "BracketRight",
+  "\\": "Backslash",
+  "-": "Minus",
+  "=": "Equal",
+  "`": "Backquote"
+};
+function physicalCode(key) {
+  if (/^[a-z]$/.test(key)) return `Key${key.toUpperCase()}`;
+  if (/^[0-9]$/.test(key)) return `Digit${key}`;
+  return CODE_FOR_SYMBOL[key] ?? null;
+}
+function keyMatches(event, parsed) {
+  if (event.key.toLowerCase() === parsed.key) return true;
+  return parsed.shift && physicalCode(parsed.key) === event.code;
+}
+function matchHotkey(event, combo, isApple) {
+  const parsed = typeof combo === "string" ? parseHotkey(combo) : combo;
+  const wantMeta = parsed.meta || parsed.mod && isApple;
+  const wantCtrl = parsed.ctrl || parsed.mod && !isApple;
+  return event.metaKey === wantMeta && event.ctrlKey === wantCtrl && event.altKey === parsed.alt && event.shiftKey === parsed.shift && keyMatches(event, parsed);
+}
+function detectApple(nav) {
+  if (!nav) return false;
+  const platform = nav.userAgentData?.platform || nav.platform || "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function isEditableTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string") return false;
+  const tag = el.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable === true;
+}
+
+// src/hotkey/use-hotkey.ts
+var import_react = require("react");
+function useHotkey(combo, onHotkey, options = {}) {
+  const { enabled = true, allowInInputs = false, preventDefault = true } = options;
+  const handlerRef = (0, import_react.useRef)(onHotkey);
+  (0, import_react.useEffect)(() => {
+    handlerRef.current = onHotkey;
+  });
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    const parsed = parseHotkey(combo);
+    function onKeyDown(event) {
+      if (event.isComposing || event.keyCode === 229) return;
+      if (!allowInInputs && isEditableTarget(event.target)) return;
+      if (!matchHotkey(event, parsed, detectApple(navigator))) return;
+      if (preventDefault) event.preventDefault();
+      handlerRef.current(event);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [combo, enabled, allowInInputs, preventDefault]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+});

package/dist/hotkey.d.cts

@@ -0,0 +1,31 @@
+interface ParsedHotkey {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+}
+declare function parseHotkey(combo: string): ParsedHotkey;
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'code' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>;
+/** `isApple` decides what `mod` means: Cmd on Apple devices, Ctrl elsewhere. */
+declare function matchHotkey(event: KeyEventLike, combo: string | ParsedHotkey, isApple: boolean): boolean;
+interface NavigatorLike {
+    platform?: string;
+    userAgentData?: {
+        platform?: string;
+    };
+}
+/** iPad in desktop mode reports MacIntel, so it counts as Apple. */
+declare function detectApple(nav: NavigatorLike | undefined): boolean;
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
+interface UseHotkeyOptions {
+    enabled?: boolean;
+    allowInInputs?: boolean;
+    preventDefault?: boolean;
+}
+declare function useHotkey(combo: string, onHotkey: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;
+
+export { type ParsedHotkey, type UseHotkeyOptions, detectApple, isEditableTarget, matchHotkey, parseHotkey, useHotkey };

package/dist/hotkey.d.ts

@@ -0,0 +1,31 @@
+interface ParsedHotkey {
+    key: string;
+    mod: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    alt: boolean;
+    shift: boolean;
+}
+declare function parseHotkey(combo: string): ParsedHotkey;
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'code' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>;
+/** `isApple` decides what `mod` means: Cmd on Apple devices, Ctrl elsewhere. */
+declare function matchHotkey(event: KeyEventLike, combo: string | ParsedHotkey, isApple: boolean): boolean;
+interface NavigatorLike {
+    platform?: string;
+    userAgentData?: {
+        platform?: string;
+    };
+}
+/** iPad in desktop mode reports MacIntel, so it counts as Apple. */
+declare function detectApple(nav: NavigatorLike | undefined): boolean;
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
+interface UseHotkeyOptions {
+    enabled?: boolean;
+    allowInInputs?: boolean;
+    preventDefault?: boolean;
+}
+declare function useHotkey(combo: string, onHotkey: (event: KeyboardEvent) => void, options?: UseHotkeyOptions): void;
+
+export { type ParsedHotkey, type UseHotkeyOptions, detectApple, isEditableTarget, matchHotkey, parseHotkey, useHotkey };

package/dist/hotkey.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+} from "./chunk-NKLEB5TR.js";
+export {
+  detectApple,
+  isEditableTarget,
+  matchHotkey,
+  parseHotkey,
+  useHotkey
+};