@spaced-out/ui-design-system 0.6.35-beta.0 → 0.6.35

package/lib/hooks/useInteractionModality/useInteractionModality.js

@@ -1,103 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInteractionModality = exports.getInteractionModality = void 0;
-var _react = require("react");
-/*
- * Input modality is a property of the SESSION, not of any one component, so it
- * lives in module scope rather than in state that each consumer would have to
- * thread around. This is the same shape the platform itself uses: `:focus-visible`
- * is implemented by the engine tracking the last interaction globally.
- *
- * Reach for this only when CSS cannot answer the question — `:focus-visible` is
- * the right tool whenever the element you need to style is the one that was
- * interacted with. This exists for the case where it is NOT: a popup deciding
- * whether to show a keyboard cursor has to know how its TRIGGER was operated,
- * and the trigger's own `:focus-visible` cannot be trusted for that, because
- * browsers always match it on text inputs (typing is expected there) — so an
- * input-triggered popup would always look keyboard-opened.
- */
-let currentModality = 'pointer';
-let listening = false;
-const subscribers = new Set();
-
-// Keys that navigate even when chorded with a modifier — Cmd+Down is "jump to
-// the end" on macOS and the menus honour it as such.
-const NAVIGATION_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Tab', 'Enter', ' ']);
-const MODIFIER_KEYS = new Set(['Shift', 'Meta', 'Alt', 'Control']);
-const set = modality => {
-  if (currentModality === modality) {
-    return;
-  }
-  currentModality = modality;
-  subscribers.forEach(notify => notify(modality));
-};
-const handleKeyDown = event => {
-  // A modifier pressed on its own — Shift held for a click, say — is not an
-  // interaction, and a chorded shortcut (Cmd+C, Ctrl+S) is a command rather than
-  // navigation. Neither should make the session look keyboard-driven. A chorded
-  // NAVIGATION key (Cmd+Down) does count: it moves the highlight.
-  if (MODIFIER_KEYS.has(event.key)) {
-    return;
-  }
-  if ((event.metaKey || event.altKey || event.ctrlKey) && !NAVIGATION_KEYS.has(event.key)) {
-    return;
-  }
-  set('keyboard');
-};
-const handlePointerDown = () => set('pointer');
-
-/*
- * Capture phase, so the modality is recorded before any component handler reacts
- * to the same event.
- *
- * Listening starts when this module is imported, NOT lazily on first read. It has
- * to: the interesting question is usually "how was the thing that just mounted
- * opened?", and the keypress that opened it happened before it existed. Attaching
- * on first read would miss exactly that event and report the default instead.
- */
-const subscribe = notify => {
-  // Session-scoped by design: the listeners live for the life of the page, so
-  // there is nothing to tear down.
-  if (typeof document !== 'undefined' && !listening) {
-    listening = true;
-    document.addEventListener('keydown', handleKeyDown, true);
-    document.addEventListener('pointerdown', handlePointerDown, true);
-  }
-  if (!notify) {
-    return () => undefined;
-  }
-  subscribers.add(notify);
-  return () => {
-    subscribers.delete(notify);
-  };
-};
-
-// Start listening at import time — see the note on `subscribe`.
-subscribe();
-
-/**
- * How the user last interacted with the page, read imperatively.
- *
- * Use this when the answer is needed during render or in an effect rather than
- * as reactive state — for example a popup deciding on mount whether it was opened
- * by keyboard, where re-rendering on later modality changes would be wrong.
- */
-const getInteractionModality = () => {
-  subscribe();
-  return currentModality;
-};
-
-/**
- * How the user last interacted with the page, as reactive state. Re-renders the
- * caller when the user switches between keyboard and pointer.
- */
-exports.getInteractionModality = getInteractionModality;
-const useInteractionModality = () => {
-  const [modality, setModality] = (0, _react.useState)(() => getInteractionModality());
-  (0, _react.useEffect)(() => subscribe(setModality), []);
-  return modality;
-};
-exports.useInteractionModality = useInteractionModality;