@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

package/dist/Layer/holdEntranceInput.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file holdEntranceInput.ts
+ * @input A layer root whose CSS entrance has just started
+ * @output holdEntranceInput: under a coarse primary pointer, a finger's or a
+ *   pen's input held away from the layer until its entrance ends
+ * @position The entrance hold for layers that enter through CSS (Dialog,
+ *   Drawer, MobileNav), on the Layer module's input hold (inputHold.ts)
+ *
+ * SYNC: When modified, update holdEntranceInput.test.ts and its callers
+ * (Dialog.tsx, Drawer/useDrawerDialogPresence.ts, MobileNav/MobileNav.tsx).
+ */
+import { isCoarsePointer } from "../utils/coarsePointer.js";
+import { holdInput } from "./inputHold.js";
+
+/** Options for {@link holdEntranceInput}. */
+
+/**
+ * Holds a finger's and a pen's input away from `layer` until its entrance
+ * ends, or at most `capMs`. Returns the release, or `null` when nothing is
+ * held: no entrance runs, or the primary pointer is fine.
+ */
+export function holdEntranceInput(layer, {
+  isModal = true,
+  entrance: animated = layer,
+  capMs
+} = {}) {
+  if (animated == null || typeof animated.getAnimations !== 'function') {
+    return null;
+  }
+  // getAnimations() flushes styles, so it lists an entrance the open has just
+  // started. A theme's duration, a shorter reduced-motion entrance and a
+  // canceled entrance all end the hold when they end.
+  const entrance = animated.getAnimations().filter(isEntrance);
+  if (entrance.length === 0) {
+    return null;
+  }
+  // A touch presentation only, read as the layer opens. A finger on a device
+  // whose primary pointer is fine, such as a touchscreen laptop, is not held.
+  if (!isCoarsePointer(layer.ownerDocument.defaultView)) {
+    return null;
+  }
+  const ended = Promise.all(entrance.map(async animation => animation.finished));
+  return holdInput(layer, {
+    until: capMs == null ? ended : Promise.race([ended, after(capMs)]),
+    scope: isModal ? 'viewport' : 'surface'
+  });
+}
+async function after(ms) {
+  await new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/** A running animation that ends on its own: an entrance, not a spin. */
+function isEntrance(animation) {
+  if (animation.playState !== 'running') {
+    return false;
+  }
+  const end = animation.effect?.getComputedTiming().endTime;
+  return typeof end === 'number' && Number.isFinite(end);
+}

package/dist/Layer/inputHold.d.ts

@@ -0,0 +1,49 @@
+/**
+ * What a hold does. `'viewport'` and `'layer'` add one shield over the whole
+ * viewport. `'layer'` also makes the layer's content inert and moves focus
+ * out of it. `'surface'` shields only the layer's own box, and the page
+ * around it stays live.
+ */
+export type InputHoldScope = 'viewport' | 'layer' | 'surface';
+/** What ends a hold: a promise, or an animator handle (its `finished`). */
+export type InputHoldEnd = PromiseLike<unknown> | {
+    readonly finished: PromiseLike<unknown>;
+};
+export interface InputHoldOptions {
+    /** The hold ends when this settles. */
+    until: InputHoldEnd;
+    /**
+     * `'viewport'` while presenting, `'layer'` while dismissing, `'surface'`
+     * while a non-modal layer presents.
+     */
+    scope: InputHoldScope;
+}
+/**
+ * Whether `node` is the shield of a live hold. A hit test that must see past
+ * held input takes the first element of `elementsFromPoint` that is not one.
+ */
+export declare function isInputShield(node: Node | null): boolean;
+/**
+ * Whether `target` is inside a held layer. It walks the flat tree as the
+ * gesture host does: a slotted node goes to its slot, and a shadow root to
+ * its host.
+ */
+export declare function isInHeldLayer(target: Node | null): boolean;
+/**
+ * Whether the gesture host holds `target` away for the current pointer. A
+ * dismissing layer holds every pointer. A presenting layer holds every
+ * pointer but a mouse, which keeps today's behavior. The host asks this for
+ * every touch. So this module imports nothing from gestures/, and a
+ * root-entry component can hold its layer without gesture code. With nothing
+ * held, this answers false.
+ */
+export declare function holdsTouch(target: Node): boolean;
+/**
+ * Holds input away from `layer` until `until` settles. Returns the release
+ * (idempotent), for a hold that ends early. Holds on one layer stack, and
+ * the layer comes back when the last one ends. Each event is judged by its
+ * own pointer, never by the primary pointer. So a mouse on a touch screen
+ * keeps its clicks during a presentation.
+ */
+export declare function holdInput(layer: Element, { until, scope }: InputHoldOptions): () => void;
+//# sourceMappingURL=inputHold.d.ts.map

package/dist/Layer/inputHold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputHold.d.ts","sourceRoot":"","sources":["../../src/Layer/inputHold.ts"],"names":[],"mappings":"AAwBA;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,2EAA2E;AAC3E,MAAM,MAAM,YAAY,GACtB,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAAC,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAC;CACvB;AAsCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAW1D;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,IAAI,GAAG,OAAO,CAyBhD;AAwHD;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,EAAC,KAAK,EAAE,KAAK,EAAC,EAAE,gBAAgB,GAC/B,MAAM,IAAI,CA+EZ"}