@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/dist/Layer/usePressPin.js

@@ -1,363 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file usePressPin.ts
- * @input A hover layer's trigger, open state, show and hide, and its
- *   `triggerBehavior` and `touchTrigger` options
- * @output usePressPin, the press toggle that pins a hover layer open;
- *   isPressPinTrigger; stopPressPinClick; the LayerTriggerBehavior type
- * @position Core-internal: one call per hover layer, useTooltip's. It owns
- *   the layer's touch trigger, so the host makes no second touch-trigger call.
- *
- * SYNC: When modified, update:
- * - /packages/core/src/Tooltip/useTooltip.tsx
- * - /packages/core/src/Layer/usePressPin.test.tsx
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useAnnounce } from "../hooks/useAnnounce.js";
-import { useDevWarning } from "../hooks/useDevWarning.js";
-import { stopInReactTree } from "./layerClickBoundary.js";
-import { useTouchTriggerInternal } from "./useTouchTrigger.js";
-
-/**
- * How the trigger opens the layer. `adaptive`, the default, previews it on
- * hover and focus, and `touchTrigger` decides taps. `toggle` pins it on every
- * press of a button trigger. Internal: InfoTip's press-to-pin uses `toggle`.
- */
-
-/** The clicks a press pin answered, so the wrapper can stop them (`stopPressPinClick`). */
-const pressPinClicks = new WeakSet();
-
-/**
- * The layer component's wrapper handler. It stops a press that pinned or
- * closed the layer in the React tree only, after the trigger's own handlers.
- * No clickable row, card, or container around the trigger then receives it,
- * and document and window listeners still do. An anchored trigger has no
- * wrapper, so a plain `onClick` element around it still receives the press.
- */
-export function stopPressPinClick(event) {
-  if (pressPinClicks.has(event.nativeEvent)) {
-    stopInReactTree(event);
-  }
-}
-
-/** Whether presses on this element can pin a layer: a button, by role. */
-export function isPressPinTrigger(element) {
-  const role = element.getAttribute('role');
-  if (role != null && role !== '') {
-    return role === 'button';
-  }
-  return element.tagName === 'BUTTON';
-}
-function restoreAttribute(element, name, value) {
-  if (value == null) {
-    element.removeAttribute(name);
-  } else {
-    element.setAttribute(name, value);
-  }
-}
-function writeAttribute(element, name, value) {
-  if (element.getAttribute(name) !== value) {
-    restoreAttribute(element, name, value);
-  }
-}
-
-/**
- * Pins a hover layer open on a press of a button trigger, under
- * `triggerBehavior="toggle"`. The same press closes it, and so do Escape, a
- * press or scroll outside, and focus that leaves the trigger and the layer.
- * The press stops at the trigger. A trigger that is not a button gets a
- * development warning and keeps tap-only opening.
- */
-export function usePressPin(options) {
-  const {
-    triggerBehavior,
-    isOpen,
-    isLayerOpen,
-    layerId
-  } = options;
-  const isToggleMode = triggerBehavior === 'toggle';
-
-  // DOM listeners read the latest options and announcer through refs. The
-  // announcer is the layer's own: inside a modal, the modal's region.
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-  const announce = useAnnounce();
-  const announceRef = useRef(announce);
-  announceRef.current = announce;
-  const isPinnedRef = useRef(false);
-  const [isPinned, setIsPinnedState] = useState(false);
-  const setPinned = useCallback(next => {
-    isPinnedRef.current = next;
-    setIsPinnedState(next);
-  }, []);
-
-  // The last offered element lets a `triggerBehavior` change rewire it.
-  const triggerRef = useRef(null);
-  const offeredRef = useRef(null);
-  // A primitive: re-attaching the same trigger renders nothing.
-  const [offeredKind, setOfferedKind] = useState('none');
-  // The trigger's own aria-expanded and aria-controls, restored on unwiring.
-  const ownStateRef = useRef(null);
-
-  // The touch trigger's outside dismissal (a press or scroll outside) closes
-  // a pinned layer through the pin, so the pin drops with it.
-  const hideFromTouch = useCallback(() => {
-    const current = optionsRef.current;
-    if (current.triggerBehavior === 'toggle' && triggerRef.current != null) {
-      if (current.isOpen !== undefined) {
-        current.report(false);
-        return;
-      }
-      if (isPinnedRef.current) {
-        setPinned(false);
-      }
-    }
-    current.hide();
-  }, [setPinned]);
-  const {
-    isTouchPointerRef,
-    isTouchInteraction,
-    handlePointerEnter,
-    handlePointerDown,
-    clearTapOpen,
-    armOutsideDismiss
-  } = useTouchTriggerInternal({
-    touchTrigger: isToggleMode ? 'tap' : options.touchTrigger,
-    isEnabled: options.isEnabled,
-    isControlled: isOpen !== undefined,
-    isOpen: isLayerOpen,
-    layerId,
-    triggerRef: options.triggerRef,
-    show: options.show,
-    hide: hideFromTouch
-  });
-  const isToggleTrigger = useCallback(element => optionsRef.current.triggerBehavior === 'toggle' && element != null && isPressPinTrigger(element), []);
-  const close = useCallback(() => {
-    const current = optionsRef.current;
-    clearTapOpen();
-    if (current.isOpen !== undefined) {
-      current.report(false);
-      return;
-    }
-    setPinned(false);
-    current.hide();
-  }, [setPinned, clearTapOpen]);
-  const announceName = useCallback(() => {
-    const current = optionsRef.current;
-    const name = current.label?.trim() ?? '';
-    if (name !== '') {
-      announceRef.current(name, 'polite');
-    }
-  }, []);
-  const toggle = useCallback(() => {
-    const current = optionsRef.current;
-    if (current.isOpen !== undefined) {
-      if (!current.isOpen) {
-        armOutsideDismiss();
-        announceName();
-      } else {
-        clearTapOpen();
-      }
-      current.report(!current.isOpen);
-      return;
-    }
-    // A pin counts only while its layer shows; a closed layer pins again.
-    if (isPinnedRef.current && current.isLayerOpen) {
-      setPinned(false);
-      clearTapOpen();
-      current.hide();
-    } else {
-      setPinned(true);
-      current.show();
-      armOutsideDismiss();
-      announceName();
-    }
-  }, [setPinned, announceName, armOutsideDismiss, clearTapOpen]);
-
-  // A non-native button gets no click from the browser for a key. So Enter
-  // presses it on keydown, and Space on keyup, as on a native button. A click
-  // with no pointer (`detail` 0) while Space is down, or in a key press's
-  // task, is that same press.
-  const keyPressedRef = useRef(false);
-  const spaceHeldRef = useRef(false);
-  const handlePress = useCallback(event => {
-    const current = optionsRef.current;
-    if (!current.isEnabled || current.triggerBehavior !== 'toggle') {
-      return;
-    }
-    // The press stops at its trigger: no label control, link, or submit.
-    event.preventDefault();
-    pressPinClicks.add(event);
-    if (event.detail === 0 && (keyPressedRef.current || spaceHeldRef.current)) {
-      return;
-    }
-    toggle();
-  }, [toggle]);
-  const pressFromKey = useCallback(() => {
-    keyPressedRef.current = true;
-    setTimeout(() => {
-      keyPressedRef.current = false;
-    }, 0);
-    toggle();
-  }, [toggle]);
-  const handleKeyDown = useCallback(event => {
-    const current = optionsRef.current;
-    if (!current.isEnabled || current.triggerBehavior !== 'toggle' || event.isComposing || event.key !== 'Enter' && event.key !== ' ') {
-      return;
-    }
-    // The press replaces the key's own action, such as a page scroll on Space.
-    event.preventDefault();
-    if (event.repeat) {
-      return;
-    }
-    if (event.key === ' ') {
-      spaceHeldRef.current = true;
-      return;
-    }
-    pressFromKey();
-  }, [pressFromKey]);
-  // Only a Space that went down on the trigger presses it when it comes up.
-  const handleKeyUp = useCallback(event => {
-    if (event.key !== ' ' || !spaceHeldRef.current) {
-      return;
-    }
-    spaceHeldRef.current = false;
-    const current = optionsRef.current;
-    if (!current.isEnabled || current.triggerBehavior !== 'toggle') {
-      return;
-    }
-    pressFromKey();
-  }, [pressFromKey]);
-  const isHeldOpen = useCallback(() => {
-    const current = optionsRef.current;
-    if (current.triggerBehavior !== 'toggle' || triggerRef.current == null) {
-      return false;
-    }
-    return current.isOpen !== undefined ? current.isOpen && current.isLayerOpen : isPinnedRef.current && current.isLayerOpen;
-  }, []);
-  const handleFocusLeave = useCallback(event => {
-    // A Space that comes up after focus left presses nothing.
-    spaceHeldRef.current = false;
-    if (!isHeldOpen()) {
-      return false;
-    }
-    const next = event.relatedTarget;
-    const trigger = triggerRef.current;
-    // Focus that leaves for no element is a press's to decide. The trigger
-    // can sit in another document, so the check uses its own window.
-    const view = trigger?.ownerDocument.defaultView;
-    if (view == null || !(next instanceof view.Node)) {
-      return true;
-    }
-    const surface = trigger?.ownerDocument.getElementById(optionsRef.current.layerId) ?? null;
-    if (trigger?.contains(next) === true || surface?.contains(next) === true) {
-      return true;
-    }
-    close();
-    return true;
-  }, [isHeldOpen, close]);
-  const unwire = useCallback(() => {
-    const previous = triggerRef.current;
-    if (previous == null) {
-      return;
-    }
-    previous.removeEventListener('click', handlePress);
-    previous.removeEventListener('keydown', handleKeyDown);
-    previous.removeEventListener('keyup', handleKeyUp);
-    previous.removeEventListener('focusout', handleFocusLeave);
-    const own = ownStateRef.current;
-    if (own != null) {
-      restoreAttribute(previous, 'aria-expanded', own.expanded);
-      restoreAttribute(previous, 'aria-controls', own.controls);
-    }
-    ownStateRef.current = null;
-    triggerRef.current = null;
-  }, [handlePress, handleKeyDown, handleKeyUp, handleFocusLeave]);
-
-  // The element and mode last settled; the same pair again does nothing.
-  const settledRef = useRef(null);
-  const wire = useCallback(element => {
-    const current = optionsRef.current;
-    const settled = settledRef.current;
-    if (settled != null && settled.element === element && settled.mode === current.triggerBehavior) {
-      return;
-    }
-    settledRef.current = {
-      element,
-      mode: current.triggerBehavior
-    };
-    unwire();
-    if (element == null || current.triggerBehavior !== 'toggle') {
-      return;
-    }
-    if (!isPressPinTrigger(element)) {
-      return;
-    }
-    element.addEventListener('click', handlePress);
-    if (element.tagName !== 'BUTTON') {
-      element.addEventListener('keydown', handleKeyDown);
-      element.addEventListener('keyup', handleKeyUp);
-    }
-    // Its own focus-leave listener: `focusTrigger="never"` attaches none.
-    element.addEventListener('focusout', handleFocusLeave);
-    ownStateRef.current = {
-      expanded: element.getAttribute('aria-expanded'),
-      controls: element.getAttribute('aria-controls')
-    };
-    triggerRef.current = element;
-  }, [unwire, handlePress, handleKeyDown, handleKeyUp, handleFocusLeave]);
-  const attach = useCallback(element => {
-    offeredRef.current = element;
-    // Hosts detach and re-attach within one commit, so a detach is not kept.
-    if (element != null) {
-      setOfferedKind(isPressPinTrigger(element) ? 'button' : 'other');
-    }
-    wire(element);
-  }, [wire]);
-  const isWired = isToggleMode && offeredKind === 'button';
-  useDevWarning(options.component, 'A press-to-pin tooltip pins only a button trigger (a <button> or role="button"); this trigger keeps tap-only opening.', isToggleMode && offeredKind === 'other');
-
-  // A later `triggerBehavior` change rewires here; the ref does not rerun.
-  useEffect(() => {
-    wire(offeredRef.current);
-  }, [triggerBehavior, wire]);
-  const unpin = useCallback(() => {
-    if (isPinnedRef.current) {
-      setPinned(false);
-    }
-  }, [setPinned]);
-
-  // Each path that hides a pinned layer drops the pin itself, so a layer that
-  // does not show is never reported expanded.
-  const isExpanded = (isOpen !== undefined ? isOpen : isPinned) && isLayerOpen;
-
-  // The trigger's aria-expanded and aria-controls follow the pin. No deps: a
-  // host can swap the trigger on any commit; equal values are not rewritten.
-  useEffect(() => {
-    const trigger = triggerRef.current;
-    if (!isToggleMode || !isWired || trigger == null) {
-      return;
-    }
-    writeAttribute(trigger, 'aria-expanded', isExpanded ? 'true' : 'false');
-    writeAttribute(trigger, 'aria-controls', isLayerOpen ? layerId : null);
-  });
-  const isPinShown = isToggleMode && isWired && isExpanded;
-  return {
-    isToggleTrigger,
-    isHeldOpen,
-    attach,
-    unpin,
-    handleFocusLeave,
-    isPinShown,
-    touch: {
-      isTouchPointerRef,
-      isTouchInteraction,
-      handlePointerEnter,
-      handlePointerDown,
-      clearTapOpen
-    }
-  };
-}

package/dist/internal/touch-sheet.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from './SheetConfirmation.js';
-export type { SheetConfirmationProps } from './SheetConfirmation.js';
-export { useDismissSearchOnTouchDrag } from './useDismissSearchOnTouchDrag.js';
-export { hasSameSelection, nameSheetDraftChange } from './sheetDraft.js';
-export type { SheetDraftChange } from './sheetDraft.js';
-//# sourceMappingURL=touch-sheet.d.ts.map

package/dist/internal/touch-sheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"touch-sheet.d.ts","sourceRoot":"","sources":["../../src/internal/touch-sheet.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,cAAc,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC"}

package/dist/internal/touch-sheet.js

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from "./SheetConfirmation.js";
-export { useDismissSearchOnTouchDrag } from "./useDismissSearchOnTouchDrag.js";
-export { hasSameSelection, nameSheetDraftChange } from "./sheetDraft.js";