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

package/src/utils/pressFeedback.test.ts

@@ -12,6 +12,10 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
+import {TEMPO_RANGE, expandThemeMotion} from '../theme/themeMotion';
+import {readFileSync} from 'node:fs';
+import {dirname, join} from 'node:path';
+import {fileURLToPath} from 'node:url';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {
   durationToMs,
@@ -317,6 +321,122 @@ describe('the release', () => {
     expect(rows[0].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
   });
 
+  it('scales the fade by the tempo its stylesheet reads, a theme\u2019s or an adaptation rule\u2019s (spec:AST-108 FR4, component:Button FR15)', () => {
+    // A rule writes the tempo (a media-query adaptation, say); browsers
+    // inherit it from the theme, jsdom only reads it where it is declared.
+    const style = document.createElement('style');
+    style.textContent = '.slow-row { --_astryx-motion-tempo: 1.5; }';
+    document.head.appendChild(style);
+    rows[0].classList.add('slow-row');
+    try {
+      press(rows[0], 'pointerdown', 10, 10);
+      vi.advanceTimersByTime(PRESS_ONSET_MS);
+      press(rows[0], 'pointerup', 10, 10);
+      vi.advanceTimersByTime(PRESS_FADE_MS);
+      expect(rows[0].getAttribute(PRESSED_ATTRIBUTE)).toBe('fading');
+      vi.advanceTimersByTime(PRESS_FADE_MS / 2);
+      expect(rows[0].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
+    } finally {
+      style.remove();
+    }
+  });
+
+  it('under Reduce Motion a tempo may shorten the fade but never lengthens it past 200 ms (spec:AST-108 FR4)', () => {
+    vi.stubGlobal(
+      'matchMedia',
+      (query: string): MediaQueryList =>
+        ({
+          matches: /prefers-reduced-motion:\s*reduce/.test(query),
+          media: query,
+          onchange: null,
+          addListener: () => undefined,
+          removeListener: () => undefined,
+          addEventListener: () => undefined,
+          removeEventListener: () => undefined,
+          dispatchEvent: () => false,
+        }) as MediaQueryList,
+    );
+    const style = document.createElement('style');
+    style.textContent =
+      '.slow-row { --_astryx-motion-tempo: 1.5; } .quick-row { --_astryx-motion-tempo: 0.75; }';
+    document.head.appendChild(style);
+    try {
+      rows[0].classList.add('slow-row');
+      press(rows[0], 'pointerdown', 10, 10);
+      vi.advanceTimersByTime(PRESS_ONSET_MS);
+      press(rows[0], 'pointerup', 10, 10);
+      vi.advanceTimersByTime(PRESS_FADE_MS);
+      expect(rows[0].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
+      rows[0].classList.replace('slow-row', 'quick-row');
+      press(rows[0], 'pointerdown', 10, 10);
+      vi.advanceTimersByTime(PRESS_ONSET_MS);
+      press(rows[0], 'pointerup', 10, 10);
+      vi.advanceTimersByTime(PRESS_FADE_MS * 0.75);
+      expect(rows[0].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
+    } finally {
+      rows[0].classList.remove('slow-row', 'quick-row');
+      style.remove();
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it('bounds the release’s tempo at its own maximum, so the bound changes nothing', () => {
+    // The clock's 1.5 is TEMPO_RANGE.max, and every tempo a theme writes is
+    // clamped to it: a theme asking for 3 writes 1.5.
+    const source = readFileSync(
+      join(
+        dirname(fileURLToPath(import.meta.url)),
+        'interactionOverlay.stylex.ts',
+      ),
+      'utf8',
+    );
+    expect(source).toContain(
+      `min(var(--_astryx-motion-tempo, 1), ${TEMPO_RANGE.max})`,
+    );
+    expect(expandThemeMotion({tempo: 3})['--_astryx-motion-tempo']).toBe(
+      String(TEMPO_RANGE.max),
+    );
+  });
+
+  it('caps the stylesheet’s release fade under Reduce Motion', () => {
+    const source = readFileSync(
+      join(
+        dirname(fileURLToPath(import.meta.url)),
+        'interactionOverlay.stylex.ts',
+      ),
+      'utf8',
+    );
+    expect(source).toMatch(
+      /min\(\$\{pressConsts\.releaseMs\}ms, calc\(\$\{pressConsts\.releaseMs\}ms \* var\(--_astryx-motion-tempo, 1\)\)\)/,
+    );
+    expect(source).toMatch(
+      /'@media \(prefers-reduced-motion: reduce\)': PRESS_RELEASE_DURATION_REDUCED/,
+    );
+  });
+
+  it('keeps the 200 ms fade without a tempo', () => {
+    press(rows[0], 'pointerdown', 10, 10);
+    vi.advanceTimersByTime(PRESS_ONSET_MS);
+    press(rows[0], 'pointerup', 10, 10);
+    vi.advanceTimersByTime(PRESS_FADE_MS);
+    expect(rows[0].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
+  });
+
+  it('times the stylesheet’s release fade by the same tempo', () => {
+    // The animation the attribute drives, scaled by the custom property a
+    // theme with a tempo writes beside its duration tokens.
+    const source = readFileSync(
+      join(
+        dirname(fileURLToPath(import.meta.url)),
+        'interactionOverlay.stylex.ts',
+      ),
+      'utf8',
+    );
+    expect(source).toMatch(
+      /calc\(\$\{pressConsts\.releaseMs\}ms \* min\(var\(--_astryx-motion-tempo, 1\),/,
+    );
+  });
+
   it('answers a tap too quick for the delay, at the release', () => {
     press(rows[0], 'pointerdown', 10, 10);
     vi.advanceTimersByTime(20);
@@ -418,6 +538,24 @@ describe('a phone or tablet paints a mouse or Space press itself', () => {
     expect(rows[1].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
   });
 
+  it('fades a mouse press by the theme\u2019s tempo too (spec:AST-108 FR4, component:Button FR15)', () => {
+    const style = document.createElement('style');
+    style.textContent = '.slow-row { --_astryx-motion-tempo: 1.5; }';
+    document.head.appendChild(style);
+    rows[1].classList.add('slow-row');
+    try {
+      press(rows[1], 'pointerdown', 10, 100, 'mouse');
+      press(rows[1], 'pointerup', 10, 100, 'mouse');
+      vi.advanceTimersByTime(PRESS_FADE_MS);
+      expect(rows[1].getAttribute(PRESSED_ATTRIBUTE)).toBe('fading');
+      vi.advanceTimersByTime(PRESS_FADE_MS / 2);
+      expect(rows[1].hasAttribute(PRESSED_ATTRIBUTE)).toBe(false);
+    } finally {
+      rows[1].classList.remove('slow-row');
+      style.remove();
+    }
+  });
+
   it('keeps the paint while the mouse is dragged off the surface, as `:active` does', () => {
     press(rows[1], 'pointerdown', 10, 100, 'mouse');
     press(document.body, 'pointermove', 400, 900, 'mouse');

package/src/utils/pressFeedback.ts

@@ -156,6 +156,24 @@ const TIMER_MS: Record<NonNullable<PressStep['timer']>, number> = {
   onset: PRESS_ONSET_MS,
 };
 
+/**
+ * The release fade's clock on `element`, read once, at the release, from the
+ * property its stylesheet reads: the theme's `--_astryx-motion-tempo`
+ * (`spec:AST-108` FR4, `component:Button` FR15). Under Reduce Motion a tempo
+ * may shorten the fade, never lengthen it past 200 ms.
+ */
+function fadeMs(element: Element): number {
+  const style = getComputedStyle(element);
+  const value = style.getPropertyValue('--_astryx-motion-tempo').trim();
+  const read = value === '' ? Number.NaN : Number(value);
+  const tempo = Number.isFinite(read) && read > 0 ? read : 1;
+  const scaled = PRESS_FADE_MS * tempo;
+  const reduced =
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
+}
+
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -217,17 +235,22 @@ function apply(slot: Slot, step: PressStep): void {
     // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
     // while a scroll runs, so a frame-based delay would fire late, after the
     // scroll, and paint a control nobody is pressing any more.
-    live.timer = setTimeout(() => {
-      if (slot.live != null) {
-        slot.live.timer = null;
-      }
-      apply(
-        slot,
-        pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
-          kind: TIMER_EVENT[kind],
-        }),
-      );
-    }, TIMER_MS[kind]);
+    live.timer = setTimeout(
+      () => {
+        if (slot.live != null) {
+          slot.live.timer = null;
+        }
+        apply(
+          slot,
+          pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
+            kind: TIMER_EVENT[kind],
+          }),
+        );
+      },
+      // The release fade follows the theme's tempo (`spec:AST-108` FR4,
+      // `component:Button` FR15); the onset delay and the tap flash do not.
+      kind === 'fade' ? fadeMs(live.element) : TIMER_MS[kind],
+    );
   }
 }
 

package/src/utils/pressPaintPriority.test.ts

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file pressPaintPriority.test.ts
+ * @input Uses vitest, Babel with the StyleX plugin (the repository's shared
+ *   module resolution) and interactionOverlay.stylex.ts
+ * @output Checks, in the compiled CSS, that the press paint outranks the
+ *   coarse-pointer `:active` reset of the overlay
+ * @position Regression test for the cascade order of the press overlay
+ *
+ * WebKit applies `:active` during a touch. Under a coarse pointer the overlay
+ * turns the bare `:active` image off, and the press paint
+ * (`[data-astryx-press="on"]`) must still win: its rule has to sit in a
+ * higher StyleX priority than the reset. The order is a property of how
+ * each key is spelled: an imported `defineConsts` key compiles to a higher
+ * priority than the same literal, which put the reset above the paint and
+ * erased the touch-down frame.
+ */
+
+import fs from 'node:fs';
+import {createRequire} from 'node:module';
+import path from 'node:path';
+import {describe, expect, it} from 'vitest';
+import stylexResolution from '../../../../scripts/stylex-module-resolution.cjs';
+
+type Rule = [string, {ltr: string}, number];
+
+// Babel's types are not part of core's typecheck; type the one call used.
+const {transformSync} = createRequire(import.meta.url)('@babel/core') as {
+  transformSync: (
+    code: string,
+    options: Record<string, unknown>,
+  ) => {metadata?: unknown} | null;
+};
+
+function compiledRules(file: string): Rule[] {
+  const output = transformSync(fs.readFileSync(file, 'utf8'), {
+    filename: file,
+    babelrc: false,
+    configFile: false,
+    parserOpts: {plugins: ['typescript', 'jsx']},
+    plugins: [
+      [
+        '@stylexjs/babel-plugin',
+        {
+          dev: false,
+          runtimeInjection: false,
+          genConditionalClasses: true,
+          treeshakeCompensation: true,
+          unstable_moduleResolution: stylexResolution.stylexModuleResolution,
+        },
+      ],
+    ],
+  });
+  return (output?.metadata as {stylex?: Rule[]}).stylex ?? [];
+}
+
+describe('press overlay cascade', () => {
+  it('ranks the press paint above the coarse-pointer :active reset', () => {
+    const rules = compiledRules(
+      path.resolve(__dirname, 'interactionOverlay.stylex.ts'),
+    );
+    const resets = rules.filter(
+      // Matched without its condition's text: an imported key compiles to a
+      // placeholder until the bundle step.
+      ([, {ltr}]) =>
+        ltr.includes(':active') && ltr.includes('background-image:none'),
+    );
+    const paints = rules.filter(
+      ([, {ltr}]) =>
+        ltr.includes('[data-astryx-press="on"]') &&
+        ltr.includes('background-image:'),
+    );
+    expect(resets.length).toBeGreaterThan(0);
+    expect(paints.length).toBeGreaterThan(0);
+    const highestReset = Math.max(...resets.map(([, , priority]) => priority));
+    const lowestPaint = Math.min(...paints.map(([, , priority]) => priority));
+    expect(highestReset).toBeLessThan(lowestPaint);
+  });
+});

package/src/utils/primaryClick.test.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file primaryClick.test.ts
+ * @input isPrimaryClick over button presses on Apple and other platforms
+ * @output Tests that only the main button, and not a ctrl-click on macOS,
+ *   is a primary click (spec:AST-094 FR43)
+ * @position Unit tests of packages/core/src/utils/primaryClick.ts
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {isPrimaryClick} from './primaryClick';
+
+function onPlatform(platform: string) {
+  vi.spyOn(navigator, 'platform', 'get').mockReturnValue(platform);
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('isPrimaryClick (spec:AST-094 FR43)', () => {
+  it('takes the main button, and no right click or pen barrel button', () => {
+    onPlatform('Win32');
+    expect(isPrimaryClick({button: 0, ctrlKey: false})).toBe(true);
+    expect(isPrimaryClick({button: 2, ctrlKey: false})).toBe(false);
+    expect(isPrimaryClick({button: 1, ctrlKey: false})).toBe(false);
+  });
+
+  it("takes no ctrl-click on macOS, that platform's context click, and a ctrl-click elsewhere", () => {
+    onPlatform('MacIntel');
+    expect(isPrimaryClick({button: 0, ctrlKey: true})).toBe(false);
+    expect(isPrimaryClick({button: 0, ctrlKey: false})).toBe(true);
+    vi.restoreAllMocks();
+    onPlatform('Win32');
+    expect(isPrimaryClick({button: 0, ctrlKey: true})).toBe(true);
+  });
+});

package/src/utils/primaryClick.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file primaryClick.ts
+ * @input A mouse or pen button press: its `button` and `ctrlKey`
+ * @output Exports isPrimaryClick
+ * @position Internal util, the one primary-click rule: the gesture host
+ *   starts a press only for one, and the press controller paints only one;
+ *   platform detection is utils/isApplePlatform.ts
+ *
+ * Deliberately absent from utils/index.ts: packages/core/src/index.ts does
+ * `export * from './utils'`, so naming it there would publish it as API.
+ */
+
+import {isApplePlatform} from './isApplePlatform';
+
+/**
+ * Whether a button press is a primary click: the main button, and not a
+ * ctrl-click on macOS or iPadOS, which is that platform's context click
+ * (`spec:AST-094` FR43). A right click, a pen's barrel button and a macOS
+ * ctrl-click start no press.
+ */
+export function isPrimaryClick(event: {
+  readonly button: number;
+  readonly ctrlKey: boolean;
+}): boolean {
+  return event.button === 0 && !(event.ctrlKey && isApplePlatform());
+}

package/src/utils/timeFormat.test.ts

@@ -0,0 +1,204 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file timeFormat.test.ts
+ * @input Uses vitest and the timeFormat helpers
+ * @output Unit tests for locale hour cycles, locale time text, and parsing it back
+ * @position Testing; validates utils/timeFormat.ts
+ *
+ * SYNC: When timeFormat.ts changes, update tests to match new behavior
+ */
+
+import {describe, expect, it} from 'vitest';
+import {
+  formatLocaleTime,
+  parseLocaleTime,
+  resolveHourFormat,
+  type HourFormat,
+} from './timeFormat';
+import {parseTimeInput, type ISOTimeString} from './timeParser';
+
+const iso = (time: string) => time as ISOTimeString;
+
+describe('resolveHourFormat', () => {
+  it.each([
+    ['en', '12h'],
+    ['en-US', '12h'],
+    ['ko-KR', '12h'],
+    ['en-GB', '24h'],
+    ['de-DE', '24h'],
+    ['vi-VN', '24h'],
+    ['fr-FR', '24h'],
+  ] as const)('reads the hour cycle of %s as %s', (locale, expected) => {
+    expect(resolveHourFormat(locale)).toBe(expected);
+  });
+
+  it('honors a -u-hc- preference carried on the locale tag', () => {
+    expect(resolveHourFormat('en-US-u-hc-h23')).toBe('24h');
+    expect(resolveHourFormat('de-DE-u-hc-h12')).toBe('12h');
+  });
+
+  it('lets an explicit hour format win over the locale', () => {
+    expect(resolveHourFormat('de-DE', '12h')).toBe('12h');
+    expect(resolveHourFormat('en-US', '24h')).toBe('24h');
+  });
+
+  it('falls back to twelve-hour for a malformed tag', () => {
+    expect(resolveHourFormat('not a locale')).toBe('12h');
+  });
+});
+
+describe('formatLocaleTime', () => {
+  it('keeps the released English text exactly, with a plain space', () => {
+    expect(formatLocaleTime(iso('14:30'), 'en', '12h')).toBe('2:30 PM');
+    expect(formatLocaleTime(iso('00:05'), 'en', '12h')).toBe('12:05 AM');
+    expect(formatLocaleTime(iso('14:30:05'), 'en', '12h', true)).toBe(
+      '2:30:05 PM',
+    );
+    expect(formatLocaleTime(iso('09:05'), 'en', '24h')).toBe('09:05');
+    expect(formatLocaleTime(iso('09:05:07'), 'en', '24h', true)).toBe(
+      '09:05:07',
+    );
+  });
+
+  it("uses the locale's day-period words and their position", () => {
+    expect(formatLocaleTime(iso('14:30'), 'ko-KR', '12h')).toBe('오후 2:30');
+    expect(formatLocaleTime(iso('09:05'), 'zh-CN', '12h')).toBe('上午9:05');
+    expect(formatLocaleTime(iso('14:30'), 'es-ES', '12h')).toBe('2:30 p. m.');
+  });
+
+  it('writes noon as 12 in a twelve-hour reading, not 0', () => {
+    expect(formatLocaleTime(iso('12:30'), 'ja-JP', '12h')).toBe('午後12:30');
+  });
+
+  it('writes English twelve-hour text when the locale would drop the day period', () => {
+    // fr-CM's twelve-hour reading writes 02:30 and 14:30 both as "2:30".
+    expect(formatLocaleTime(iso('14:30'), 'fr-CM', '12h')).toBe('2:30 PM');
+    expect(formatLocaleTime(iso('02:30'), 'fr-CM', '12h')).toBe('2:30 AM');
+    expect(formatLocaleTime(iso('14:30'), 'fr-CM', '24h')).toBe('14:30');
+  });
+
+  it("uses the locale's separator and digits", () => {
+    expect(formatLocaleTime(iso('14:30'), 'fi-FI', '24h')).toBe('14.30');
+    expect(formatLocaleTime(iso('14:30'), 'ar-EG', '12h')).toBe('٢:٣٠ م');
+  });
+
+  it('returns empty text for an empty or malformed time', () => {
+    expect(formatLocaleTime(undefined, 'en', '12h')).toBe('');
+    expect(formatLocaleTime(iso('25:00'), 'en', '12h')).toBe('');
+  });
+});
+
+describe('parseLocaleTime', () => {
+  const LOCALES = [
+    'en-US',
+    'en-GB',
+    'de-DE',
+    'fi-FI',
+    'fr-CA',
+    'es-ES',
+    'sv-SE',
+    'vi-VN',
+    'ja-JP',
+    'ko-KR',
+    'zh-TW',
+    'ar-EG',
+    'fa-IR',
+    'he-IL',
+    // Twelve-hour readings whose separators or surrounding words differ from
+    // the twenty-four-hour reading: a dot (as, nds), "h" (oc), a word between
+    // the day period and the hour (brx, ee), a word before the hour (dz, nds,
+    // tok), and Tibetan digits (dz).
+    'as',
+    'brx',
+    'dz',
+    'ee',
+    'nds',
+    'oc',
+    'tok',
+    // A one-letter day period that English input contains ("m" in "pm").
+    'gd',
+    // A twelve-hour reading with no day period at all.
+    'fr-CM',
+  ];
+  const TIMES = ['00:00', '00:30', '09:05', '11:59', '12:00', '12:30', '23:45'];
+  const FORMATS: HourFormat[] = ['12h', '24h'];
+
+  it.each(LOCALES)('reads back every time %s writes', locale => {
+    for (const hourFormat of FORMATS) {
+      for (const time of TIMES) {
+        const text = formatLocaleTime(iso(time), locale, hourFormat);
+        expect(
+          parseLocaleTime(text, locale),
+          `${locale} ${hourFormat} "${text}"`,
+        ).toBe(time);
+      }
+      const withSeconds = formatLocaleTime(
+        iso('14:30:05'),
+        locale,
+        hourFormat,
+        true,
+      );
+      expect(parseLocaleTime(withSeconds, locale, true)).toBe('14:30:05');
+    }
+  });
+
+  it('reads a spaced day period as the half of the day it names', () => {
+    // Previously parsed as 02:30: the English matcher missed "p. m.".
+    expect(parseLocaleTime('2:30 p. m.', 'es-ES')).toBe('14:30');
+    expect(parseLocaleTime('午後2:30', 'ja-JP')).toBe('14:30');
+  });
+
+  it('reads twelve-hour text whose pattern differs from the 24-hour one', () => {
+    expect(parseLocaleTime('অপৰাহ্ন ২.৩০', 'as')).toBe('14:30');
+    expect(parseLocaleTime('ɣetrɔ ga 2:30', 'ee')).toBe('14:30');
+    expect(parseLocaleTime('Klock 2.30:05 PM', 'nds', true)).toBe('14:30:05');
+    expect(parseLocaleTime('2h30:05 PM', 'oc', true)).toBe('14:30:05');
+  });
+
+  it("reads the locale's separator", () => {
+    // Previously "14.30" read only its "14" prefix.
+    expect(parseLocaleTime('14.30', 'fi-FI')).toBe('14:30');
+    expect(parseLocaleTime('14 h 30', 'fr-CA')).toBe('14:30');
+  });
+
+  it('does not read a day-period word out of the middle of an English word', () => {
+    // gd writes the morning as "m": the "m" of "pm" is not that word.
+    expect(parseLocaleTime('2:30 PM', 'gd')).toBe('14:30');
+    expect(parseLocaleTime('12:00 PM', 'gd')).toBe('12:00');
+    expect(parseLocaleTime('2pm', 'gd')).toBe('14:00');
+    expect(parseLocaleTime('2:30 p.m', 'gd')).toBe('14:30');
+    expect(parseLocaleTime('12:00 p.m', 'gd')).toBe('12:00');
+    expect(parseLocaleTime('2 p.m', 'gd')).toBe('14:00');
+    expect(parseLocaleTime('11 a.m', 'gd')).toBe('11:00');
+    expect(parseLocaleTime('2:30m', 'gd')).toBe('02:30');
+  });
+
+  it('still reads English input in every locale exactly as before', () => {
+    const inputs = [
+      '2:30 PM',
+      '2:30 p.m',
+      '2:30 p.m.',
+      '12:00 PM',
+      '12:00 AM',
+      '2pm',
+      '2 p.m',
+      '11 a.m',
+      '14:30',
+      '1430',
+    ];
+    for (const locale of LOCALES) {
+      for (const input of inputs) {
+        expect(parseLocaleTime(input, locale), `${locale} "${input}"`).toBe(
+          parseTimeInput(input),
+        );
+      }
+    }
+  });
+
+  it('rejects text no reading fits', () => {
+    expect(parseLocaleTime('', 'en-US')).toBeNull();
+    expect(parseLocaleTime('25:99', 'de-DE')).toBeNull();
+    expect(parseLocaleTime('午後14:30', 'ja-JP')).toBeNull();
+  });
+});