@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/theme/themeMotion.ts

@@ -0,0 +1,221 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file themeMotion.ts
+ * @input A theme's motion configuration: the knobs (`tempo`, `character`),
+ *   the existing `MotionScaleConfig`, or both
+ * @output The resolved knobs, the motion tokens they generate, and
+ *   `resolveThemeMotion`, the internal resolver the animator and server code
+ *   read (`spec:AST-108` FR1, FR2, FR5, FR6)
+ * @position Theme utility; consumed by resolveThemeValues.ts. Pure: no DOM,
+ *   no import-time work, safe on the server.
+ *
+ * `tempo` scales every motion duration token, clamped to 0.75–1.5.
+ * `character` picks the entrance and move curves. Every theme follows each
+ * person's Reduce Motion setting (`reducedMotion` resolves to `'system'`).
+ * No spring reads the knobs yet. With the defaults (tempo 1, `'standard'`, `'system'`) every token is
+ * today's.
+ *
+ * A `MotionScaleConfig` keeps generating its duration tokens, and its fields
+ * win over `tempo` (FR5); explicit `tokens` win over both in
+ * resolveThemeValues.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/theme/themeMotion.test.ts
+ * - /packages/core/src/theme/resolveThemeValues.ts
+ * - /packages/core/src/theme/defineTheme.ts (the `motion` field's docs)
+ */
+
+import {expandMotionScale, type MotionScaleConfig} from './expandMotionScale';
+import {
+  resolveKnobs,
+  type MotionCharacter,
+  type ResolvedMotionKnobs,
+  type ThemeMotionKnobs,
+} from './motionKnobs';
+import {durationDefaults, easeDefaults} from './tokens.stylex';
+import {resolveTokenReferences} from './tokenReferences';
+
+export {
+  TEMPO_RANGE,
+  type MotionCharacter,
+  type ResolvedMotionKnobs,
+  type ThemeMotionKnobs,
+  type ThemeReducedMotion,
+} from './motionKnobs';
+
+/**
+ * A theme's `motion`: the knobs, the existing `MotionScaleConfig`, or both.
+ * A `MotionScaleConfig`'s fields win over `tempo` for the durations they set.
+ */
+export type ThemeMotionConfig =
+  ThemeMotionKnobs | (MotionScaleConfig & ThemeMotionKnobs);
+
+/**
+ * The entrance and move curve at each character. `'standard'` is the theme's
+ * `--ease-standard`, so a theme that overrides that easing keeps its entrances
+ * on it.
+ */
+export const CHARACTER_EASE = {
+  crisp: 'cubic-bezier(0, 0, 0.2, 1)',
+  standard: null,
+  expressive: 'cubic-bezier(0.3, 1.2, 0.5, 1)',
+} as const satisfies Record<MotionCharacter, string | null>;
+
+/** The knobs of `config`, defaults filled in, `tempo` clamped. */
+export function resolveMotionKnobs(
+  config: ThemeMotionConfig | undefined,
+): ResolvedMotionKnobs {
+  return resolveKnobs(config);
+}
+
+function isScaleConfig(
+  config: ThemeMotionConfig,
+): config is MotionScaleConfig & ThemeMotionKnobs {
+  return 'fast' in config && 'medium' in config && 'ratio' in config;
+}
+
+/** A duration token's value in ms (`'175ms'` → 175). */
+function msOf(value: string): number {
+  return Number.parseFloat(value);
+}
+
+/**
+ * The private custom property a theme with a `tempo` writes beside its
+ * duration tokens: the press release fade (`utils/interactionOverlay.stylex.ts`)
+ * multiplies its clock by it.
+ */
+export const MOTION_TEMPO_PROPERTY = '--_astryx-motion-tempo';
+
+/** The duration tokens at `tempo`: today's values times it, to the ms. */
+export function durationTokensAt(tempo: number): Record<string, string> {
+  const tokens: Record<string, string> = {};
+  for (const [name, value] of Object.entries(durationDefaults)) {
+    tokens[name] = `${Math.round(msOf(value) * tempo)}ms`;
+  }
+  return tokens;
+}
+
+/**
+ * The private custom property holding a duration token's value before
+ * `tempo` scaled it (`--duration-slow` → `--_astryx-pre-tempo-duration-slow`).
+ * Busy loops (Spinner, Skeleton) read it, falling back to the token, so their
+ * timing follows a duration scale or an explicit token but never `tempo`
+ * (FR4). Private, like every property the knobs add beside the core tokens
+ * (`architecture:theme-tokens` INV1).
+ */
+export function preTempoName(token: string): string {
+  return token.replace(/^--duration-/, '--_astryx-pre-tempo-duration-');
+}
+
+/**
+ * The motion tokens `config` generates (FR2, FR5): `--duration-*` times
+ * `tempo`, with a `MotionScaleConfig`'s own durations winning, and the
+ * job-named `--ease-entrance` and `--ease-move` at the theme's character.
+ * A knob the config leaves out writes nothing, so a theme extending another
+ * keeps the base's value for it; a knob it sets is written even at its
+ * default, so a child can set a base's tempo back to 1.
+ */
+export function expandThemeMotion(
+  config: ThemeMotionConfig,
+): Record<string, string> {
+  const knobs = resolveMotionKnobs(config);
+  const tokens: Record<string, string> = {};
+  if (knobs.tempoIsSet) {
+    Object.assign(tokens, durationTokensAt(knobs.tempo));
+    for (const [name, value] of Object.entries(durationDefaults)) {
+      tokens[preTempoName(name)] = value;
+    }
+    // The press release fade, a fixed clock in the stylesheet, scales by the
+    // tempo itself (FR4; `component:Button` FR15), read where it plays.
+    tokens[MOTION_TEMPO_PROPERTY] = String(knobs.tempo);
+  }
+  if (isScaleConfig(config)) {
+    const scale = expandMotionScale(config);
+    Object.assign(tokens, scale);
+    if (knobs.tempoIsSet) {
+      for (const [name, value] of Object.entries(scale)) {
+        if (name.startsWith('--duration-')) {
+          tokens[preTempoName(name)] = value;
+        }
+      }
+    }
+  }
+  const scaleEasing =
+    isScaleConfig(config) && config.easing != null ? config.easing : null;
+  const ease =
+    CHARACTER_EASE[knobs.character] ??
+    (config.character != null
+      ? (scaleEasing ?? easeDefaults['--ease-standard'])
+      : scaleEasing);
+  if (ease != null) {
+    tokens['--ease-entrance'] = ease;
+    tokens['--ease-move'] = ease;
+  }
+  return tokens;
+}
+
+/** What `resolveThemeMotion` returns for a theme. */
+export interface ThemeMotion {
+  /** The knobs, defaults filled in. */
+  readonly knobs: ResolvedMotionKnobs;
+  /** Every `--duration-*` token's value. */
+  readonly durations: Readonly<Record<string, string>>;
+  /** `--ease-standard`, `--ease-entrance` and `--ease-move`. */
+  readonly easings: Readonly<Record<string, string>>;
+}
+
+/**
+ * A theme's motion values, for the animator and for server code (FR6): the
+ * knobs, and the duration and easing tokens they resolve to with the theme's
+ * explicit tokens applied. A token written as a reference (`var(--name)`)
+ * resolves through the theme's tokens, as `resolveThemeTokens` resolves it
+ * (`architecture:theme-tokens` INV6). Pure: it reads only `theme`.
+ */
+export function resolveThemeMotion(theme: {
+  readonly motion?: ThemeMotionConfig;
+  readonly __axes?: {readonly motion?: ThemeMotionConfig};
+  readonly tokens?: Readonly<Record<string, unknown>>;
+  readonly localTokens?: Readonly<Record<string, unknown>>;
+}): ThemeMotion {
+  // A defined theme's motion is its axes': its own merged with its base's.
+  const config = theme.__axes?.motion ?? theme.motion;
+  const knobs = resolveMotionKnobs(config);
+  const generated = config ? expandThemeMotion(config) : {};
+  // The graph the references resolve through: the defaults, the knobs'
+  // tokens, then the theme's own (a light/dark pair is not a motion value, so
+  // only plain strings take part).
+  const graph: Record<string, string> = {
+    ...durationDefaults,
+    ...easeDefaults,
+    ...generated,
+  };
+  for (const tokens of [theme.localTokens, theme.tokens]) {
+    for (const [name, value] of Object.entries(tokens ?? {})) {
+      if (typeof value === 'string') {
+        graph[name] = value;
+      }
+    }
+  }
+  const explicit = (name: string): boolean =>
+    typeof theme.tokens?.[name] === 'string' || name in generated;
+  const resolved = resolveTokenReferences(graph);
+  const durations: Record<string, string> = {};
+  for (const name of Object.keys(durationDefaults)) {
+    durations[name] = resolved[name];
+  }
+  const standard = resolved['--ease-standard'];
+  return {
+    knobs,
+    durations,
+    easings: {
+      '--ease-standard': standard,
+      '--ease-entrance': explicit('--ease-entrance')
+        ? resolved['--ease-entrance']
+        : standard,
+      '--ease-move': explicit('--ease-move')
+        ? resolved['--ease-move']
+        : standard,
+    },
+  };
+}

package/src/theme/tokenReferences.ts

@@ -0,0 +1,149 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tokenReferences.ts
+ * @input A flat map of token names to raw CSS values
+ * @output `resolveTokenReferences`, which follows `var(--name[, fallback])`
+ *   references through the map, and the CSS parsing helpers it shares
+ *   (`splitTopLevelComma`, `findMatchingParen`)
+ * @position Theme utility with no imports: tokens.ts resolves a theme's token
+ *   graph on it (evaluating color functions as it goes), and themeMotion.ts
+ *   resolves motion tokens written as references on it. Pure; safe on the
+ *   server.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/theme/tokens.ts
+ * - /packages/core/src/theme/themeMotion.ts
+ */
+
+/**
+ * Split the arguments of a CSS function body on the first top-level comma.
+ * Handles nested functions such as rgba(), color-mix(), var(), and quoted strings.
+ */
+export function splitTopLevelComma(input: string): [string, string] | null {
+  let depth = 0;
+  let quote: '"' | "'" | null = null;
+  let isEscaped = false;
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (quote !== null) {
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (char === '\\') {
+        isEscaped = true;
+      } else if (char === quote) {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+
+    if (char === '(') {
+      depth++;
+      continue;
+    }
+
+    if (char === ')') {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+
+    if (char === ',' && depth === 0) {
+      return [input.slice(0, i).trim(), input.slice(i + 1).trim()];
+    }
+  }
+
+  return null;
+}
+
+/** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
+export function findMatchingParen(input: string, openIndex: number): number {
+  let depth = 0;
+  for (let i = openIndex; i < input.length; i++) {
+    const char = input[i];
+    if (char === '(') {
+      depth++;
+    } else if (char === ')') {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+
+/**
+ * Resolves every value in `raw` to a concrete one: each `var(--name[,
+ * fallback])` is replaced by `name`'s resolved value, or by its fallback when
+ * `raw` has no `name`, and is kept as written when neither exists or the
+ * references form a cycle. `evaluate` then runs on each substituted value
+ * (tokens.ts evaluates CSS color functions there).
+ */
+export function resolveTokenReferences(
+  raw: Readonly<Record<string, string>>,
+  evaluate: (expr: string) => string = expr => expr,
+): Record<string, string> {
+  const cache: Record<string, string> = {};
+
+  // `seen` tracks the reference chain, so a cycle resolves to the literal
+  // reference instead of recursing forever.
+  const substitute = (expr: string, seen: Set<string>): string => {
+    const start = expr.indexOf('var(');
+    if (start === -1) {
+      return expr;
+    }
+    const openIndex = start + 'var'.length;
+    const closeIndex = findMatchingParen(expr, openIndex);
+    if (closeIndex === -1) {
+      return expr;
+    }
+
+    const inner = expr.slice(openIndex + 1, closeIndex);
+    const commaSplit = splitTopLevelComma(inner);
+    const name = (commaSplit ? commaSplit[0] : inner).trim();
+    const fallback = commaSplit ? commaSplit[1] : null;
+
+    let replacement: string;
+    if (seen.has(name)) {
+      replacement = expr.slice(start, closeIndex + 1);
+    } else if (name in raw) {
+      seen.add(name);
+      replacement = reference(name, seen);
+      seen.delete(name);
+    } else if (fallback !== null) {
+      replacement = substitute(fallback.trim(), seen);
+    } else {
+      replacement = expr.slice(start, closeIndex + 1);
+    }
+
+    const rest = substitute(expr.slice(closeIndex + 1), seen);
+    return expr.slice(0, start) + replacement + rest;
+  };
+
+  const reference = (name: string, seen: Set<string>): string => {
+    if (name in cache) {
+      return cache[name];
+    }
+    const value = raw[name];
+    if (value === undefined) {
+      return '';
+    }
+    const resolved = evaluate(
+      value.includes('var(') ? substitute(value, seen) : value,
+    );
+    cache[name] = resolved;
+    return resolved;
+  };
+
+  for (const name of Object.keys(raw)) {
+    reference(name, new Set<string>());
+  }
+  return cache;
+}

package/src/theme/tokens.stylex.ts

@@ -323,6 +323,16 @@ export type DurationVarName = keyof typeof durationDefaults;
 
 export const easeDefaults = {
   '--ease-standard': 'cubic-bezier(0.24, 1, 0.4, 1)',
+  /**
+   * Entrances: a layer or element arriving. A theme's `character` sets it
+   * (spec:AST-108 FR2); at `'standard'` it equals --ease-standard.
+   */
+  '--ease-entrance': 'cubic-bezier(0.24, 1, 0.4, 1)',
+  /**
+   * Moves: an element changing place or size on screen. A theme's
+   * `character` sets it; at `'standard'` it equals --ease-standard.
+   */
+  '--ease-move': 'cubic-bezier(0.24, 1, 0.4, 1)',
   '--ease-exit': 'cubic-bezier(0.3, 0, 0.6, 0.6)',
 } as const;
 

package/src/theme/tokens.ts

@@ -17,6 +17,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/useTheme.ts
+ * - /packages/core/src/theme/tokenReferences.ts (the `var()` resolver)
  * - /packages/core/src/theme/index.ts
  */
 
@@ -28,6 +29,11 @@ import {
 } from './defineTheme';
 import {parseColor, formatColor} from '../utils/color';
 import {generatedScopedStatusRoleDefaults} from './generateThemeRules';
+import {
+  findMatchingParen,
+  resolveTokenReferences,
+  splitTopLevelComma,
+} from './tokenReferences';
 
 /** Resolved color mode used when choosing the side of light/dark token values. */
 export type ResolvedThemeMode = 'light' | 'dark';
@@ -70,52 +76,6 @@ export const tokenVars: Record<TokenName, string> = Object.fromEntries(
   Object.keys(tokenDefaults).map(name => [name, tokenVar(name)]),
 ) as Record<TokenName, string>;
 
-/**
- * Split the arguments of a CSS function body on the first top-level comma.
- * Handles nested functions such as rgba(), color-mix(), var(), and quoted strings.
- */
-function splitTopLevelComma(input: string): [string, string] | null {
-  let depth = 0;
-  let quote: '"' | "'" | null = null;
-  let isEscaped = false;
-
-  for (let i = 0; i < input.length; i++) {
-    const char = input[i];
-
-    if (quote !== null) {
-      if (isEscaped) {
-        isEscaped = false;
-      } else if (char === '\\') {
-        isEscaped = true;
-      } else if (char === quote) {
-        quote = null;
-      }
-      continue;
-    }
-
-    if (char === '"' || char === "'") {
-      quote = char;
-      continue;
-    }
-
-    if (char === '(') {
-      depth++;
-      continue;
-    }
-
-    if (char === ')') {
-      depth = Math.max(0, depth - 1);
-      continue;
-    }
-
-    if (char === ',' && depth === 0) {
-      return [input.slice(0, i).trim(), input.slice(i + 1).trim()];
-    }
-  }
-
-  return null;
-}
-
 /** Parse a CSS light-dark(light, dark) function into its two argument values. */
 function parseLightDark(value: string): [light: string, dark: string] | null {
   const trimmed = value.trim();
@@ -158,27 +118,11 @@ function resolveXDSTokenValue(
 // Generated themes emit derived tokens as references to other tokens rather
 // than baked-in values, so a scoped CSS override of a base token re-themes the
 // subtree that references it. The CSS cascade resolves those references, but
-// non-CSS consumers (canvas, SVG, data-viz) need the concrete value. These
-// helpers replay the same resolution in JS: follow `var()` references through
-// the resolved token map (iteratively, guarding against cycles) and evaluate
-// the CSS color functions used by the theme generator against those values.
-
-/** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
-function findMatchingParen(input: string, openIndex: number): number {
-  let depth = 0;
-  for (let i = openIndex; i < input.length; i++) {
-    const char = input[i];
-    if (char === '(') {
-      depth++;
-    } else if (char === ')') {
-      depth--;
-      if (depth === 0) {
-        return i;
-      }
-    }
-  }
-  return -1;
-}
+// non-CSS consumers (canvas, SVG, data-viz) need the concrete value. The same
+// resolution replays in JS: tokenReferences.ts follows `var()` references
+// through the resolved token map (guarding against cycles), and these helpers
+// evaluate the CSS color functions used by the theme generator against those
+// values.
 
 /** Split a color-mix component into its color and optional percentage. */
 function parseMixComponent(
@@ -290,93 +234,6 @@ function evaluateColorFunctions(expr: string): string {
   );
 }
 
-/**
- * Substitute `var(--name[, fallback])` references with their resolved values.
- * `seen` tracks the reference chain so cycles resolve to the literal reference
- * instead of recursing forever.
- */
-function substituteVars(
-  expr: string,
-  raw: Record<string, string>,
-  cache: Record<string, string>,
-  seen: Set<string>,
-): string {
-  const start = expr.indexOf('var(');
-  if (start === -1) {
-    return expr;
-  }
-  const openIndex = start + 'var'.length;
-  const closeIndex = findMatchingParen(expr, openIndex);
-  if (closeIndex === -1) {
-    return expr;
-  }
-
-  const inner = expr.slice(openIndex + 1, closeIndex);
-  const commaSplit = splitTopLevelComma(inner);
-  const name = (commaSplit ? commaSplit[0] : inner).trim();
-  const fallback = commaSplit ? commaSplit[1] : null;
-
-  let replacement: string;
-  if (seen.has(name)) {
-    replacement = expr.slice(start, closeIndex + 1);
-  } else if (name in raw) {
-    seen.add(name);
-    replacement = resolveReference(name, raw, cache, seen);
-    seen.delete(name);
-  } else if (fallback !== null) {
-    replacement = substituteVars(fallback.trim(), raw, cache, seen);
-  } else {
-    replacement = expr.slice(start, closeIndex + 1);
-  }
-
-  const rest = substituteVars(expr.slice(closeIndex + 1), raw, cache, seen);
-  return expr.slice(0, start) + replacement + rest;
-}
-
-/** Fully resolve a single expression: substitute references, then evaluate colors. */
-function resolveExpression(
-  expr: string,
-  raw: Record<string, string>,
-  cache: Record<string, string>,
-  seen: Set<string>,
-): string {
-  if (!expr.includes('var(') && !expr.includes('color-mix(')) {
-    return expr;
-  }
-  const substituted = substituteVars(expr, raw, cache, seen);
-  return evaluateColorFunctions(substituted);
-}
-
-/** Resolve one token by name, memoizing the result in `cache`. */
-function resolveReference(
-  name: string,
-  raw: Record<string, string>,
-  cache: Record<string, string>,
-  seen: Set<string>,
-): string {
-  if (name in cache) {
-    return cache[name];
-  }
-  const value = raw[name];
-  if (value === undefined) {
-    return '';
-  }
-  const resolved = resolveExpression(value, raw, cache, seen);
-  cache[name] = resolved;
-  return resolved;
-}
-
-/** Resolve every reference/color function in a raw token map to concrete values. */
-function resolveReferences(
-  raw: Record<string, string>,
-): Record<string, string> {
-  const cache: Record<string, string> = {};
-  for (const name of Object.keys(raw)) {
-    resolveReference(name, raw, cache, new Set<string>());
-  }
-  return cache;
-}
-
 /**
  * Resolve all Astryx token values for a theme and effective color mode.
  *
@@ -403,7 +260,7 @@ export function resolveThemeTokens(
   }
 
   if (theme == null) {
-    return resolveReferences(resolved);
+    return resolveTokenReferences(resolved, evaluateColorFunctions);
   }
 
   // A theme's local tokens resolve its references to them, then leave the
@@ -436,9 +293,9 @@ export function resolveThemeTokens(
   }
 
   return Object.fromEntries(
-    Object.entries(resolveReferences(resolved)).filter(
-      ([key]) => !localKeys.has(key),
-    ),
+    Object.entries(
+      resolveTokenReferences(resolved, evaluateColorFunctions),
+    ).filter(([key]) => !localKeys.has(key)),
   );
 }
 

package/src/utils/focusOutline.stylex.ts

@@ -160,6 +160,34 @@ export const focusOutlineStyles = stylex.create({
       ':has(> :first-child:focus-visible)': FOCUS_OUTLINE_OFFSET,
     },
   },
+  /**
+   * Like {@link focusOutlineStyles.focusWithin}, but only for a direct child
+   * with `role="combobox"` — for a control box that paints the ring for its
+   * combobox trigger while sibling controls inside it (a status info-tip, a
+   * clear button) ring themselves. One focus move, one ring
+   * (architecture:interaction-modality INV3).
+   */
+  focusWithinCombobox: {
+    outlineWidth: {
+      default: '0',
+      ':has(> [role="combobox"]:focus-visible)':
+        focusOutlineLonghands.outlineWidth,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':has(> [role="combobox"]:focus-visible)':
+        focusOutlineLonghands.outlineStyle,
+    },
+    outlineColor: {
+      default: null,
+      ':has(> [role="combobox"]:focus-visible)':
+        focusOutlineLonghands.outlineColor,
+    },
+    outlineOffset: {
+      default: '0',
+      ':has(> [role="combobox"]:focus-visible)': FOCUS_OUTLINE_OFFSET,
+    },
+  },
   /**
    * Draws no ring, and keeps the UA's own off — for an element whose ring an
    * ancestor paints.

package/src/utils/focusReturn.ts

@@ -12,7 +12,10 @@
  *   overlays (Dialog, DropdownMenu) that move focus programmatically.
  */
 
-import {getInteractionModality} from './interactionModality';
+import {
+  getInteractionModality,
+  type InteractionModality,
+} from './interactionModality';
 
 /**
  * True when focus rests on nothing in particular — no active element, or the
@@ -43,21 +46,29 @@ export function isFocusDetached(doc: Document = document): boolean {
  * autofocus target, the control that opened a Dialog, or a menu trigger the
  * caller renders. Pass `options` (for example `preventScroll`) as to `focus()`.
  *
+ * `modality` defaults to the page's last input. A caller moving focus inside a
+ * second document (a same-origin iframe, a Document Picture-in-Picture window)
+ * passes that document's, which it tracks with `trackInteractionModalityIn`.
+ *
  * Make sure modality tracking is active (`useInteractionModalityTracking()`)
  * in the component that calls this.
  */
 export function focusForLastInput(
   element: HTMLElement,
   options?: FocusOptions,
+  modality: InteractionModality = getInteractionModality(),
 ): void {
   // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched.
+  // goes, and an extra blur there can run validation or mark it touched. The
+  // field's own window: one in an iframe or a Picture-in-Picture window is
+  // never an instance of the page's constructors.
+  const view = element.ownerDocument.defaultView ?? window;
   const isTextEntry =
-    element instanceof HTMLInputElement ||
-    element instanceof HTMLTextAreaElement ||
-    element instanceof HTMLSelectElement ||
+    element instanceof view.HTMLInputElement ||
+    element instanceof view.HTMLTextAreaElement ||
+    element instanceof view.HTMLSelectElement ||
     element.isContentEditable;
-  if (isTextEntry || getInteractionModality() !== 'pointer') {
+  if (isTextEntry || modality !== 'pointer') {
     if (options === undefined) {
       element.focus();
     } else {