@astryxdesign/core 0.7.8-canary.fbb81c6 → 0.7.8

package/dist/motion/carryAnimations.js

@@ -1,305 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file carryAnimations.ts
- * @input The CSS animations and transitions of an element and its subtree,
- *   read before the browser starts them afresh
- * @output Exports `saveAnimations` and `carryAnimations`, which carry them on
- *   in a clone of the element. Also `saveAnimation` and `restoreAnimations`,
- *   which put them back after a display reset
- * @position Motion foundation; the transient copy (transientCopy.ts) and the
- *   layer runtime's re-placement (Layer/preserveAnimations.ts) use it
- */
-
-/**
- * Animation members written in a fixed order rather than generically: the
- * timeline before the range that is measured on it, the rate before the
- * time, and the start time (or, for a paused animation, the current time)
- * last, once the play state is set. `effect` is not
- * replaced, because a CSS animation whose effect script replaces leaves the
- * stylesheet's control; its state is copied onto the new effect instead.
- */
-const ORDERED = new Set(['effect', 'timeline', 'rangeStart', 'rangeEnd', 'playbackRate', 'startTime', 'currentTime']);
-/** Every accessor with a setter on `object`'s prototype chain. */
-function writableAccessors(object) {
-  const names = new Set();
-  for (let proto = Object.getPrototypeOf(object); proto != null && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
-    for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
-      if (descriptor.set != null) {
-        names.add(name);
-      }
-    }
-  }
-  return [...names];
-}
-
-/**
- * A textual form of a value that is compared by content rather than by
- * identity: a CSS numeric value (as in a timeline range offset) through its
- * serialization, a plain object (a range) through its members. Anything else
- * is compared by identity (`null`).
- */
-function contentOf(value) {
-  if (typeof CSSNumericValue !== 'undefined' && value instanceof CSSNumericValue) {
-    return value.toString();
-  }
-  if (value != null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
-    return Object.entries(value).map(([key, inner]) => `${key}:${contentOf(inner) ?? String(inner)}`).join(';');
-  }
-  return null;
-}
-function differs(a, b) {
-  if (a === b) {
-    return false;
-  }
-  const textA = contentOf(a);
-  return textA == null || textA !== contentOf(b);
-}
-
-/** One animation's state, read before the browser starts it afresh. */
-
-/**
- * Reads one animation's state generically, from what the platform exposes.
- * That is every accessor with a setter on the animation's and its effect's
- * prototype chains, every field of the effect's timing, and its keyframes. Only values
- * that differ from the recreated animation's are written back, so a value the
- * stylesheet controls stays under its control. A few members are not plain
- * state and are written in their own step (`ORDERED`). The Animation and
- * effect objects themselves cannot be carried over: the old ones keep their
- * listeners and promises.
- */
-export function saveAnimation(animation) {
-  const effect = animation.effect;
-  const values = {};
-  for (const name of writableAccessors(animation)) {
-    values[name] = animation[name];
-  }
-  const effectValues = {};
-  if (effect != null) {
-    for (const name of writableAccessors(effect)) {
-      effectValues[name] = effect[name];
-    }
-  }
-  return {
-    animation,
-    name: animation.animationName ?? '',
-    target: effect?.target ?? null,
-    pseudoElement: effect?.pseudoElement ?? null,
-    values,
-    effectValues,
-    timing: effect?.getTiming() ?? null,
-    keyframes: effect?.getKeyframes() ?? null,
-    playState: animation.playState,
-    replaceState: animation.replaceState
-  };
-}
-function write(object, name, value) {
-  object[name] = value;
-}
-
-/** Give `next` the effect state `saved` had: every writable member. */
-function restoreEffect(next, saved) {
-  for (const name of writableAccessors(next)) {
-    if (name in saved.effectValues && differs(saved.effectValues[name], next[name])) {
-      write(next, name, saved.effectValues[name]);
-    }
-  }
-  if (saved.timing != null) {
-    const timing = next.getTiming();
-    const changed = {};
-    for (const [field, value] of Object.entries(saved.timing)) {
-      if (differs(value, timing[field])) {
-        changed[field] = value;
-      }
-    }
-    if (Object.keys(changed).length > 0) {
-      next.updateTiming(changed);
-    }
-  }
-  if (saved.keyframes != null && JSON.stringify(saved.keyframes) !== JSON.stringify(next.getKeyframes())) {
-    next.setKeyframes(saved.keyframes);
-  }
-}
-
-/** Give `next` the state `saved` had, member by member. */
-function restore(next, saved) {
-  const effect = next.effect;
-  if (effect != null) {
-    restoreEffect(effect, saved);
-  }
-  const current = next;
-  for (const name of ['timeline', 'rangeStart', 'rangeEnd']) {
-    if (name in saved.values && differs(saved.values[name], current[name])) {
-      write(next, name, saved.values[name]);
-    }
-  }
-  for (const name of writableAccessors(next)) {
-    if (!ORDERED.has(name) && name in saved.values && differs(saved.values[name], current[name])) {
-      write(next, name, saved.values[name]);
-    }
-  }
-  if (saved.replaceState === 'persisted' && next.replaceState !== 'persisted') {
-    next.persist();
-  }
-  const rate = saved.values.playbackRate;
-  if (typeof rate === 'number' && rate !== next.playbackRate) {
-    next.playbackRate = rate;
-  }
-  if (saved.playState === 'paused' && next.playState !== 'paused') {
-    next.pause();
-  } else if (saved.playState !== 'paused' && next.playState === 'paused') {
-    next.play();
-  }
-  // A running animation is anchored to its timeline by its start time, which
-  // carries its current time on exactly. A paused one has none and keeps its
-  // current time. A finished one holds its end: finishing it again holds the
-  // same time, though its start time is then counted from now, since script
-  // cannot set a start time and a held time together.
-  const start = saved.values.startTime;
-  const time = saved.values.currentTime;
-  if (saved.playState === 'finished') {
-    next.finish();
-  } else if (start != null) {
-    next.startTime = start;
-  } else if (time != null) {
-    next.currentTime = time;
-  }
-}
-
-/** Resume a cancelled CSS transition with a script animation in its state. */
-function resumeTransition(saved) {
-  if (saved.target == null || saved.keyframes == null) {
-    return;
-  }
-  const replacement = saved.target.animate(saved.keyframes, {
-    pseudoElement: saved.pseudoElement ?? undefined
-  });
-  restore(replacement, saved);
-}
-function isTransition(animation) {
-  return typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition;
-}
-function isCssAnimation(animation) {
-  return typeof CSSAnimation !== 'undefined' && animation instanceof CSSAnimation;
-}
-
-/**
- * Finishes an animation that ends: an infinite one cannot be finished, and is
- * left as it runs.
- */
-function finishIfItEnds(animation) {
-  const end = animation.effect?.getComputedTiming().endTime;
-  if (end != null && Number.isFinite(Number(end)) && animation.playbackRate !== 0) {
-    animation.finish();
-  }
-}
-
-/** The members a copy's animation does not take: its element's keep them. */
-const IDENTITY_MEMBERS = new Set(['id', 'onfinish', 'oncancel', 'onremove']);
-
-/**
- * `saved` for an animation that carries on on the copy of its element:
- * aimed at the copy, without the element's id and event handlers.
- */
-function retarget(saved, copyOf) {
-  const target = saved.target == null ? null : copyOf(saved.target);
-  if (target == null) {
-    return null;
-  }
-  const values = Object.fromEntries(Object.entries(saved.values).filter(([name]) => !IDENTITY_MEMBERS.has(name)));
-  const effectValues = {
-    ...saved.effectValues
-  };
-  if ('target' in effectValues) {
-    effectValues.target = target;
-  }
-  return {
-    ...saved,
-    target,
-    values,
-    effectValues
-  };
-}
-
-/**
- * Puts each state `saved` holds on the CSS animations and transitions of
- * `root` and its subtree that are not among `survivors`. Each CSS animation
- * the browser started afresh takes the state of the one it replaces. It is
- * matched by element, pseudo-element and name, in order, and then by name
- * alone (an effect script moved to another element or pseudo-element). Each
- * transition whose animation no longer runs resumes as a script animation in
- * its state. One started afresh that replaces none is finished: an entrance
- * that had played and been dropped, or a transition from `@starting-style`.
- * Script animations are left as they are.
- */
-export function restoreAnimations(root, saved, survivors) {
-  const after = root.getAnimations({
-    subtree: true
-  });
-  const current = new Set(after);
-  const cancelled = [];
-  for (const state of saved) {
-    if (current.has(state.animation)) {
-      continue;
-    }
-    if (isTransition(state.animation)) {
-      resumeTransition(state);
-    } else {
-      cancelled.push(state);
-    }
-  }
-  const recreated = after.filter(animation => (isCssAnimation(animation) || isTransition(animation)) && !survivors.has(animation));
-  const unmatched = [];
-  for (const animation of recreated) {
-    const effect = animation.effect;
-    const name = animation.animationName ?? '';
-    const index = cancelled.findIndex(state => state.name === name && state.target === (effect?.target ?? null) && state.pseudoElement === (effect?.pseudoElement ?? null));
-    if (index === -1) {
-      unmatched.push(animation);
-    } else {
-      restore(animation, cancelled.splice(index, 1)[0]);
-    }
-  }
-  for (const animation of unmatched) {
-    const name = animation.animationName ?? '';
-    const index = cancelled.findIndex(state => state.name === name);
-    if (index === -1) {
-      finishIfItEnds(animation);
-    } else {
-      restore(animation, cancelled.splice(index, 1)[0]);
-    }
-  }
-}
-
-/** The CSS animations and transitions `saveAnimations` read. */
-
-/**
- * Reads the state of every CSS animation and transition of `root` and its
- * subtree, for `carryAnimations` to give a copy of it.
- */
-export function saveAnimations(root) {
-  if (typeof root.getAnimations !== 'function') {
-    return [];
-  }
-  return root.getAnimations({
-    subtree: true
-  }).filter(animation => isCssAnimation(animation) || isTransition(animation)).map(saveAnimation);
-}
-
-/**
- * Carries on in `copy`, a clone of the root `saved` was read from, now laid
- * out, the CSS animations and transitions its element ran. A clone starts
- * each CSS animation again and runs no transition but a `@starting-style`
- * one. So each CSS animation the clone started takes the state of its
- * element's, and each transition runs on as a script animation. One the
- * clone started that its element no longer ran is finished: an entrance that
- * had played, or a `@starting-style` transition. `copyOf` maps each element
- * of the cloned subtree to its copy. The element's own animations keep
- * running, so the copy's take no id or event handler.
- */
-export function carryAnimations(saved, copy, copyOf) {
-  if (typeof copy.getAnimations !== 'function') {
-    return;
-  }
-  restoreAnimations(copy, saved.flatMap(state => retarget(state, copyOf) ?? []), new Set());
-}

package/dist/privateAttributes/menuPressLit.stylex.d.ts

@@ -1,52 +0,0 @@
-/**
- * @file privateAttributes/menuPressLit.stylex.ts
- * @input The row that a held finger or pen lights in a menu
- * @output markMenuPressLit and clearMenuPressLit, which mark that row,
- *   isMenuPressLit, which reads the mark, menuPressLitRowStyle, which
- *   paints the marked row, holdMenuPressPaint and releaseMenuPressPaint,
- *   which keep the other rows off their pressed paint, and
- *   isMenuPressPaintHeld, which reads that hold
- * @position Owner module of the private menu-press-lit attribute: the only
- *   file that writes its name. The menu press model (hooks/useMenuPress.ts)
- *   marks the row; DropdownMenu's rows compose the styles. No package entry
- *   exports it.
- *
- * SYNC: Each row that composes menuPressLitRowStyle reads
- *   `--_menu-row-focus-paint` in its `:focus` background, and a row with an
- *   `:active` background reads `--_menu-row-active-paint` there:
- * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
- */
-import type { StyleXStyles } from '@stylexjs/stylex';
-/** Marks `row` as the row that a held finger or pen lights. */
-export declare function markMenuPressLit(row: Element): void;
-/** Removes the mark from `row`. */
-export declare function clearMenuPressLit(row: Element): void;
-/** Whether a held finger or pen lights `row`. */
-export declare function isMenuPressLit(row: Element): boolean;
-/**
- * Keeps `menu`'s rows off their `:active` paint while a held finger or pen
- * presses in it. The row the press began on stays `:active` as the press
- * moves on. The lit row keeps the pressed overlay through its own mark.
- */
-export declare function holdMenuPressPaint(menu: HTMLElement): void;
-/** Gives `menu`'s rows their `:active` paint back. */
-export declare function releaseMenuPressPaint(menu: HTMLElement): void;
-/** Whether a held finger or pen keeps `menu`'s rows off their `:active` paint. */
-export declare function isMenuPressPaintHeld(menu: HTMLElement): boolean;
-/**
- * Compose on a menu row whose `:focus` background is
- * `var(--_menu-row-focus-paint, <hover overlay>)`, and whose `:active`
- * background, if any, is `var(--_menu-row-active-paint, <pressed overlay>)`.
- * The row paints the hover overlay on focus, and the pressed overlay while a
- * held finger or pen lights it.
- * Under a finger, the hover overlay is too faint to follow. The variable has
- * no default: a layered stylesheet emits a default unlayered, and it would
- * beat the attribute arm. The value resolves on the row, so a theme set on any
- * ancestor applies. The style sets only a custom property, which shares no
- * key with StyleX's CSS property type, so TypeScript needs the wider type.
- */
-export declare const menuPressLitRowStyle: StyleXStyles;
-//# sourceMappingURL=menuPressLit.stylex.d.ts.map

package/dist/privateAttributes/menuPressLit.stylex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menuPressLit.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/menuPressLit.stylex.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAMnD,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAEnD;AAED,mCAAmC;AACnC,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAEpD;AAED,iDAAiD;AACjD,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAEpD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE1D;AAED,sDAAsD;AACtD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE7D;AAED,kFAAkF;AAClF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE/D;AA6BD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,EAAiB,YAAY,CAAC"}

package/dist/privateAttributes/menuPressLit.stylex.js

@@ -1,99 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file privateAttributes/menuPressLit.stylex.ts
- * @input The row that a held finger or pen lights in a menu
- * @output markMenuPressLit and clearMenuPressLit, which mark that row,
- *   isMenuPressLit, which reads the mark, menuPressLitRowStyle, which
- *   paints the marked row, holdMenuPressPaint and releaseMenuPressPaint,
- *   which keep the other rows off their pressed paint, and
- *   isMenuPressPaintHeld, which reads that hold
- * @position Owner module of the private menu-press-lit attribute: the only
- *   file that writes its name. The menu press model (hooks/useMenuPress.ts)
- *   marks the row; DropdownMenu's rows compose the styles. No package entry
- *   exports it.
- *
- * SYNC: Each row that composes menuPressLitRowStyle reads
- *   `--_menu-row-focus-paint` in its `:focus` background, and a row with an
- *   `:active` background reads `--_menu-row-active-paint` there:
- * - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
- * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
- */
-
-import * as stylex from '@stylexjs/stylex';
-import "../theme/tokens.stylex.js";
-import { colorVars } from "../theme/tokens.stylex.js";
-const MENU_PRESS_LIT = 'data-astryx-menu-press-lit';
-const ACTIVE_PAINT = '--_menu-row-active-paint';
-
-/** Marks `row` as the row that a held finger or pen lights. */
-export function markMenuPressLit(row) {
-  row.setAttribute(MENU_PRESS_LIT, '');
-}
-
-/** Removes the mark from `row`. */
-export function clearMenuPressLit(row) {
-  row.removeAttribute(MENU_PRESS_LIT);
-}
-
-/** Whether a held finger or pen lights `row`. */
-export function isMenuPressLit(row) {
-  return row.hasAttribute(MENU_PRESS_LIT);
-}
-
-/**
- * Keeps `menu`'s rows off their `:active` paint while a held finger or pen
- * presses in it. The row the press began on stays `:active` as the press
- * moves on. The lit row keeps the pressed overlay through its own mark.
- */
-export function holdMenuPressPaint(menu) {
-  menu.style.setProperty(ACTIVE_PAINT, 'transparent');
-}
-
-/** Gives `menu`'s rows their `:active` paint back. */
-export function releaseMenuPressPaint(menu) {
-  menu.style.removeProperty(ACTIVE_PAINT);
-}
-
-/** Whether a held finger or pen keeps `menu`'s rows off their `:active` paint. */
-export function isMenuPressPaintHeld(menu) {
-  return menu.style.getPropertyValue(ACTIVE_PAINT) !== '';
-}
-
-/**
- * A value for each attribute state. The index signature gives StyleX the value
- * type, which it cannot read from a literal attribute key.
- */
-
-const litRowPaint = {
-  '--_menu-row-focus-paint': {
-    default: null,
-    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
-  },
-  '--_menu-row-active-paint': {
-    default: null,
-    '[data-astryx-menu-press-lit]': colorVars['--color-overlay-pressed']
-  }
-};
-const styles = {
-  row: {
-    "--_menu-row-focus-paint": "x1ar3rj9",
-    "--_menu-row-active-paint": "xcukuoe",
-    $$css: true
-  }
-};
-
-/**
- * Compose on a menu row whose `:focus` background is
- * `var(--_menu-row-focus-paint, <hover overlay>)`, and whose `:active`
- * background, if any, is `var(--_menu-row-active-paint, <pressed overlay>)`.
- * The row paints the hover overlay on focus, and the pressed overlay while a
- * held finger or pen lights it.
- * Under a finger, the hover overlay is too faint to follow. The variable has
- * no default: a layered stylesheet emits a default unlayered, and it would
- * beat the attribute arm. The value resolves on the row, so a theme set on any
- * ancestor applies. The style sets only a custom property, which shares no
- * key with StyleX's CSS property type, so TypeScript needs the wider type.
- */
-export const menuPressLitRowStyle = styles.row;

package/src/hooks/menuPressValues.ts

@@ -1,18 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file menuPressValues.ts
- * @input None
- * @output The UIKit value the menu press model reads
- * @position A copy of one UIKit table entry, motion/uikit gestures.ts
- *   `UIKIT_MENU_PRESS.handoff`. A menu then bundles this number, not the
- *   table with its measurement records. The table stays the source and
- *   documents the measurement. menuPressValues.test.ts fails when the copy
- *   drifts.
- *
- * SYNC: When modified, update:
- * - /packages/core/src/motion/uikit/gestures.ts
- */
-
-/** How far the opening finger travels after the menu opens before it picks. */
-export const MENU_PRESS_HANDOFF_PX = 10;