@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/hooks/useOverflow.ts

@@ -9,8 +9,9 @@
  * @position Core hook; used by OverflowList and consumers for overflow patterns
  *
  * Measures children rendered in a hidden container to determine how many fit
- * in the available width, without flickering. Uses ResizeObserver to react
- * to container size changes. Supports an optional item cap (`maxVisibleItems`)
+ * in the available width, without flickering. Observes both the visible and
+ * hidden measurement containers so changes to available width or measured child
+ * sizes recalculate the result. Supports an optional item cap (`maxVisibleItems`)
  * and bounded multi-row wrapping (`maxRows`); the fit/clamp/row-packing math
  * lives in the pure `computeOverflow` helper.
  *
@@ -136,6 +137,7 @@ export function useOverflow(
   const containerElRef = useRef<HTMLElement | null>(null);
   const measureElRef = useRef<HTMLElement | null>(null);
   const observedElRef = useRef<HTMLElement | null>(null);
+  const observedMeasureElRef = useRef<HTMLElement | null>(null);
 
   const calculate = useCallback(() => {
     const container = containerElRef.current;
@@ -236,10 +238,20 @@ export function useOverflow(
 
   const measureRef = useCallback(
     (el: HTMLElement | null) => {
+      if (observedMeasureElRef.current) {
+        unobserveResize(observedMeasureElRef.current);
+        observedMeasureElRef.current = null;
+      }
+
       measureElRef.current = el;
-      if (el) {
-        calculate();
+      if (!el) {
+        return;
       }
+
+      observeResize(el, () => {
+        calculate();
+      });
+      observedMeasureElRef.current = el;
     },
     [calculate],
   );

package/src/hooks/useTypeahead.doc.mjs

@@ -0,0 +1,153 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useTypeahead',
+  displayName: 'useTypeahead',
+  keywords: [
+    'typeahead',
+    'type to focus',
+    'first character',
+    'keyboard',
+    'search',
+    'jump',
+    'menu',
+    'listbox',
+    'select',
+    'apg',
+    'accessibility',
+    'a11y',
+  ],
+  params: [
+    {
+      name: 'options',
+      type: 'UseTypeaheadOptions',
+      description: 'Configuration object.',
+      required: true,
+    },
+    {
+      name: 'options.getItemLabels',
+      type: '() => ReadonlyArray<string | null | undefined>',
+      description:
+        "Returns the item labels in DOM order. A null or empty entry marks a non-matchable slot and keeps indices aligned with the caller's items.",
+      required: true,
+    },
+    {
+      name: 'options.onMatch',
+      type: '(index: number) => void',
+      description:
+        "Called with the index of the matched item so the caller can focus or select it; typically useListFocus's focusItem.",
+      required: true,
+    },
+    {
+      name: 'options.getCurrentIndex',
+      type: '() => number',
+      description:
+        'The index to search from, usually the focused item, so repeated presses of one letter cycle through matches. A negative value means nothing is current.',
+      default: '() => -1',
+    },
+    {
+      name: 'options.resetMs',
+      type: 'number',
+      description:
+        'Milliseconds of inactivity after which the typed buffer resets.',
+      default: '750',
+    },
+    {
+      name: 'options.isDisabled',
+      type: '(index: number) => boolean',
+      description: 'Whether an index should be skipped, e.g. disabled items.',
+    },
+  ],
+  returns: [
+    {
+      name: 'onKeyDown',
+      type: '(e: React.KeyboardEvent | KeyboardEvent) => boolean',
+      description:
+        'Keydown handler. Returns true when it consumed a printable character, so the caller can stop its own key handling.',
+    },
+    {
+      name: 'reset',
+      type: '() => void',
+      description:
+        'Clears the pending buffer, e.g. when the collection closes.',
+    },
+  ],
+  usage: {
+    description:
+      "Adds APG type-to-focus search to a collection: printable keystrokes are buffered (resetting after a pause), and the first item whose label starts with the buffer is reported through onMatch. Pressing the same letter repeatedly cycles through the matches rather than filtering deeper. It moves nothing itself; pair it with the collection's own focus management, most often useListFocus or useGridFocus.",
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Wire onMatch to the focus manager you already have (useListFocus.focusItem) instead of moving focus yourself.',
+      },
+      {
+        guidance: true,
+        description:
+          'Let it see the key event first and fall through to arrow-key navigation only when it returns false.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pass getCurrentIndex so repeated presses of one letter walk through matches instead of sticking on the first.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use it on a text input; the field already receives the characters, and typeahead would fight the value.',
+      },
+    ],
+  },
+  relatedComponents: ['DropdownMenu', 'Selector', 'TreeList'],
+  relatedHooks: ['useListFocus', 'useGridFocus', 'useTreeFocus'],
+  importPath: '@astryxdesign/core/hooks',
+  category: 'focus',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    'APG type-to-focus search for a collection. Buffers printable keys (resets after pause), matches labels by prefix, reports index via onMatch. Same letter pressed repeatedly cycles matches. Moves nothing itself; pair w/ useListFocus / useGridFocus.',
+  paramDescriptions: {
+    options: 'config.',
+    'options.getItemLabels':
+      'item labels in DOM order; null / empty = non-matchable slot, indices stay aligned.',
+    'options.onMatch':
+      'called w/ matched index so caller focuses / selects (e.g. useListFocus focusItem).',
+    'options.getCurrentIndex':
+      'index to search from (usually focused item) so repeat presses cycle. negative = nothing current.',
+    'options.resetMs': 'ms of inactivity before typed buffer resets.',
+    'options.isDisabled': 'whether an index is skipped (e.g. disabled items).',
+  },
+  returnDescriptions: {
+    onKeyDown:
+      'keydown handler; true = consumed a printable char, caller can stop its own handling.',
+    reset: 'clears pending buffer (e.g. on close).',
+  },
+  usage: {
+    description:
+      'Type-to-jump for menus / listboxes / trees. Buffered prefix match w/ APG same-letter cycling; reports index, caller owns focus.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Wire onMatch to existing focus manager (useListFocus.focusItem), do not move focus yourself.',
+      },
+      {
+        guidance: true,
+        description:
+          'Give it the key event first; fall through to arrow navigation when it returns false.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pass getCurrentIndex so repeat presses walk matches instead of sticking on first.',
+      },
+      {
+        guidance: false,
+        description: 'Use on a text input; field already gets the characters.',
+      },
+    ],
+  },
+};

package/src/index.ts

@@ -135,6 +135,8 @@ export type {
   ToastOptions,
   ToastDismissFn,
   ShowToastFn,
+  ToastContentRenderProps,
+  ToastContentRenderFn,
 } from './Toast';
 
 // Popover component and hook

package/src/raw-import.d.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Ambient module declaration for Vite's `?raw` imports.
+ *
+ * numberParser.docblock.test.ts reads its own subject's source as text, to
+ * check the prose in it against the parser's behaviour. Vite serves that with
+ * the `?raw` query; without this declaration TypeScript fails with TS2307.
+ */
+
+declare module '*?raw' {
+  const content: string;
+  export default content;
+}

package/src/theme/Theme.test.tsx

@@ -1,10 +1,22 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
 import {render, cleanup} from '@testing-library/react';
 import React from 'react';
 import {Theme} from './Theme';
 import {defineTheme} from './defineTheme';
+import {dataTokenDefaults} from './domainTokens';
+import type * as DefineThemeModule from './defineTheme';
+
+const {generateThemeCSSSpy} = vi.hoisted(() => ({
+  generateThemeCSSSpy: vi.fn(),
+}));
+
+vi.mock('./defineTheme', async importOriginal => {
+  const actual = await importOriginal<typeof DefineThemeModule>();
+  generateThemeCSSSpy.mockImplementation(actual.generateThemeCSS);
+  return {...actual, generateThemeCSS: generateThemeCSSSpy};
+});
 
 const testTheme = defineTheme({
   name: 'test',
@@ -25,6 +37,7 @@ describe('Theme', () => {
     // Clean up documentElement state before each test
     document.documentElement.removeAttribute('data-theme');
     document.documentElement.removeAttribute('data-astryx-theme');
+    generateThemeCSSSpy.mockClear();
   });
 
   afterEach(() => {
@@ -120,7 +133,9 @@ describe('Theme', () => {
       'test',
     );
     unmount();
-    expect(document.documentElement.hasAttribute('data-astryx-theme')).toBe(false);
+    expect(document.documentElement.hasAttribute('data-astryx-theme')).toBe(
+      false,
+    );
   });
 
   // =========================================================================
@@ -166,4 +181,91 @@ describe('Theme', () => {
     expect(nestedWrapper).toBeTruthy();
     expect(nestedWrapper?.getAttribute('data-theme')).toBe('light');
   });
+
+  // =========================================================================
+  // Data token defaults — one shared :root block, not one per theme scope
+  // =========================================================================
+
+  const baseTags = () =>
+    Array.from(document.head.querySelectorAll('style[data-astryx-theme-base]'));
+
+  it('injects the data token defaults into @layer astryx-base', () => {
+    render(
+      <Theme theme={testTheme}>
+        <span>child</span>
+      </Theme>,
+    );
+
+    expect(baseTags()).toHaveLength(1);
+    const css = baseTags()[0].textContent ?? '';
+    expect(css).toContain('@layer astryx-base {');
+    expect(css).toContain(':root {');
+    expect(css).toContain(
+      `--color-data-categorical-blue: ${dataTokenDefaults['--color-data-categorical-blue']};`,
+    );
+  });
+
+  it('injects one shared block for nested themes, not one per scope', () => {
+    render(
+      <Theme theme={testTheme}>
+        <Theme theme={altTheme}>
+          <span>nested</span>
+        </Theme>
+      </Theme>,
+    );
+
+    expect(baseTags()).toHaveLength(1);
+
+    // The nested theme declares no --color-data-* of its own, so nothing
+    // shadows a value the parent theme set: that is what lets the override
+    // inherit through the ordinary cascade.
+    const themeTags = Array.from(
+      document.head.querySelectorAll('style[data-astryx-theme]'),
+    );
+    for (const tag of themeTags) {
+      expect(tag.textContent).not.toContain('--color-data-');
+    }
+  });
+
+  it('keeps the defaults while any theme is still mounted', () => {
+    const outer = render(
+      <Theme theme={testTheme}>
+        <span>a</span>
+      </Theme>,
+    );
+    render(
+      <Theme theme={altTheme}>
+        <span>b</span>
+      </Theme>,
+    );
+
+    outer.unmount();
+    expect(baseTags()).toHaveLength(1);
+
+    cleanup();
+    expect(baseTags()).toHaveLength(0);
+  });
+
+  it('generates a theme once across nested and sibling mounts', () => {
+    render(
+      <Theme theme={testTheme}>
+        <Theme theme={testTheme}>
+          <span>nested</span>
+        </Theme>
+      </Theme>,
+    );
+    render(
+      <Theme theme={testTheme}>
+        <span>sibling</span>
+      </Theme>,
+    );
+
+    expect(generateThemeCSSSpy).toHaveBeenCalledTimes(1);
+    expect(baseTags()).toHaveLength(1);
+
+    const injected = Array.from(document.querySelectorAll('style'))
+      .map(tag => tag.textContent ?? '')
+      .join('\n');
+    expect(injected.match(/:root\s*\{/g)).toHaveLength(1);
+  });
 });

package/src/theme/Theme.tsx

@@ -42,6 +42,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {ThemeMode} from './types';
 import {colorVars, typographyVars} from './tokens.stylex';
 import {generateThemeCSS, type DefinedTheme} from './defineTheme';
+import {generateDataTokenDefaultsCSS} from './generateThemeRules';
 import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
@@ -98,6 +99,16 @@ ThemeNestingContext.displayName = 'ThemeNestingContext';
 /** Track which themes have already been injected */
 const injectedThemes = new Set<string>();
 
+/**
+ * How many mounted `Theme`s are relying on the injected data-token defaults.
+ *
+ * The defaults are one document-wide `:root` block, shared by every theme, so
+ * they are injected once and removed only when the last theme that took a
+ * reference unmounts — tearing them down with whichever provider happened to
+ * inject them would strip the palette from the providers still mounted.
+ */
+let dataTokenDefaultsRefCount = 0;
+
 /**
  * Hook to inject theme CSS into the document.
  * Built themes (from `astryx theme build`) skip injection — their CSS
@@ -112,6 +123,8 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
       return;
     }
 
+    // Second and later `Theme`s using this theme do no work at all —
+    // generation included. Its CSS is document-wide and identical for each.
     const themeKey = `astryx-theme-${theme.name}`;
     if (injectedThemes.has(themeKey)) {
       return;
@@ -130,8 +143,26 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
     );
 
     const {prose, component} = generateThemeCSS(theme);
-    if (!prose && !component) {
-      return;
+    const base = generateDataTokenDefaultsCSS();
+    injectedThemes.add(themeKey);
+    const cleanups: (() => void)[] = [() => injectedThemes.delete(themeKey)];
+
+    // Data token defaults go into @layer astryx-base, where StyleX puts the
+    // core token defaults, so a theme's own `--color-data-*` outranks them by
+    // layer. Appended (never prepended) so it cannot register `astryx-base`
+    // ahead of `reset` and invert the layer order.
+    if (base) {
+      if (dataTokenDefaultsRefCount++ === 0) {
+        const baseStyle = document.createElement('style');
+        baseStyle.setAttribute(dataAttr('theme-base'), '');
+        baseStyle.textContent = `@layer astryx-base {\n${base}\n}`;
+        document.head.appendChild(baseStyle);
+      }
+      cleanups.push(() => {
+        if (--dataTokenDefaultsRefCount === 0) {
+          document.querySelector(`style[${dataAttr('theme-base')}]`)?.remove();
+        }
+      });
     }
 
     // Prose defaults go into @layer reset — lowest priority, scoped to
@@ -154,20 +185,24 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
       document.head.appendChild(compStyle);
     }
 
-    injectedThemes.add(themeKey);
+    if (prose || component) {
+      cleanups.push(() => {
+        // Matched by the astryx id marker, which is always written above.
+        const proseEl = document.querySelector(
+          `style[${dataAttr('theme-prose')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
+        );
+        const compEl = document.querySelector(
+          `style[${dataAttr('theme')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
+        );
+        proseEl?.remove();
+        compEl?.remove();
+      });
+    }
 
     return () => {
-      // Remove both prose and component style tags (matched by the new
-      // astryx id marker, which is always written above).
-      const proseEl = document.querySelector(
-        `style[${dataAttr('theme-prose')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
-      );
-      const compEl = document.querySelector(
-        `style[${dataAttr('theme')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
-      );
-      proseEl?.remove();
-      compEl?.remove();
-      injectedThemes.delete(themeKey);
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
     };
   }, [theme, id]);
 }

package/src/theme/defineTheme.test.ts

@@ -116,6 +116,29 @@ describe('generateThemeCSS', () => {
     expect(css).toContain('font-family: var(--font-family-heading)');
   });
 
+  it('keeps the data palette out of a theme that never mentions it', () => {
+    // That the palette IS declared is covered by `seeds the whole palette
+    // once, at :root` in generateThemeRules.test.ts. It is theme-independent,
+    // so there is nothing about it a theme can be used to assert.
+    const {component} = generateThemeCSS(defineTheme({name: 'chartless'}));
+    expect(component).not.toContain('--color-data-');
+  });
+
+  it('puts only the named data token in the theme block, not its siblings', () => {
+    const theme = defineTheme({
+      name: 'brand-charts',
+      tokens: {'--color-data-categorical-blue': '#00A3FF'},
+    });
+    const {component} = generateThemeCSS(theme);
+    expect(component).toContain('--color-data-categorical-blue: #00A3FF;');
+    // Leaving the siblings out of the theme's own block is what lets a nested
+    // theme inherit a parent's override instead of shadowing it.
+    expect(component).not.toContain('--color-data-categorical-orange');
+    // Defaults reach the stylesheet without entering the theme's own tokens,
+    // which are what `astryx theme build` reports as overrides.
+    expect(theme.tokens['--color-data-categorical-orange']).toBeUndefined();
+  });
+
   it('splits prose into reset layer and components into astryx-theme', () => {
     const theme = defineTheme({
       name: 'split-test',

package/src/theme/defineTheme.ts

@@ -36,7 +36,16 @@
  * - /packages/cli/assets/docs/theme.doc.mjs (`astryx docs theme`)
  */
 
-import type {IconRegistry} from '../Icon/globalIconRegistry';
+import type {ReactNode} from 'react';
+import type {IconName, NamespacedIconName} from '../Icon/globalIconRegistry';
+
+/**
+ * Icon overrides a theme may declare: any built-in semantic name, plus the
+ * namespaced keys components and libraries own (`'richtext:bold'`).
+ */
+type ThemeIconOverrides = Partial<
+  Record<IconName | NamespacedIconName, ReactNode>
+>;
 import type {IndicatorRegistry} from '../Indicator/types';
 import type {TypographyConfig, FontWeight} from './types';
 import {
@@ -319,7 +328,7 @@ export interface DefineThemeInput {
    */
   components?: ComponentStyleMap;
   /** Icon registry — maps semantic icon names to React nodes */
-  icons?: Partial<IconRegistry>;
+  icons?: ThemeIconOverrides;
   /**
    * Indicator overrides — replaces the components that draw stateful control
    * visuals with the theme's own, by name.
@@ -381,7 +390,7 @@ export interface DefinedTheme {
   /** Component style overrides */
   components?: ComponentStyleMap;
   /** Icon registry */
-  icons?: Partial<IconRegistry>;
+  icons?: ThemeIconOverrides;
   /** Indicator overrides for stateful control visuals, keyed by name */
   indicators?: IndicatorRegistry;
   /** Whether this theme has been pre-compiled by theme build CLI */

package/src/theme/derivedVarRegistry.test.ts

@@ -213,6 +213,7 @@ function discoverComponents(): ComponentInfo[] {
 // ---------------------------------------------------------------------------
 
 const DIR_TO_REGISTRY_KEY: Record<string, string> = {
+  Avatar: 'avatar',
   Banner: 'banner',
   Button: 'button',
   Card: 'card',
@@ -221,13 +222,13 @@ const DIR_TO_REGISTRY_KEY: Record<string, string> = {
   Dialog: 'dialog',
   DropdownMenu: 'dropdown-menu',
   Field: 'field',
-  HoverCard: 'hovercard',
+  HoverCard: 'hover-card',
   NumberInput: 'number-input',
   Popover: 'popover',
-  ProgressBar: 'progressbar-mark',
+  ProgressBar: 'progress-bar-mark',
   Section: 'section',
   SegmentedControl: 'segmented-control',
-  TextArea: 'textarea',
+  TextArea: 'text-area',
 };
 
 /**
@@ -279,6 +280,13 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   '--_thumbnail-hit-inset',
   '--_input-clear-hit-inset',
   '--_input-clear-hit-content',
+  // Placement and swipe lifecycle values are private Toast behavior. A theme
+  // author controls the surface transform/opacity as a whole, not these values.
+  '--_toast-slide-y',
+  '--_toast-swipe-y',
+  '--_toast-swipe-exit-y',
+  '--_toast-swipe-opacity',
+  '--_toast-swipe-scale',
   // Indentation and row-spacing metrics: --tree-list-indent is the authorable
   // step, --_tree-indent the per-row distance TreeListItem computes from it.
   // --tree-list-row-gap is applied as half a padding-block on each row wrapper,
@@ -292,6 +300,19 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   // other.
   '--_card-elevation',
   '--_card-ring',
+  // The colour inside that composed ring, for a variant only a theme knows.
+  // It is one component of one shadow in the list, so no standard property
+  // maps onto it either — a theme sets it beside the fill it has to contrast.
+  '--selectable-card-ring-color',
+  // The spinner's ring is drawn as an SVG circle, so none of its four vars is
+  // a CSS property of the element carrying the theme target: `width` and
+  // `borderWidth` would name a box the ring is not, and a `color` mapping
+  // would take the label's text color with it. They are public vars a theme
+  // sets directly under a size- or shade-variant key.
+  '--spinner-diameter',
+  '--spinner-stroke-width',
+  '--spinner-color',
+  '--spinner-track-color',
 ]);
 
 // ---------------------------------------------------------------------------
@@ -418,6 +439,21 @@ describe('getDerivedVars', () => {
     expect(getDerivedVars('unknown', 'borderRadius')).toEqual([]);
   });
 
+  it('resolves a deprecated key to the entries of the key that replaced it', () => {
+    // A theme written against the old spelling still selects the element (the
+    // component emits both classes), so its derived vars must still expand —
+    // otherwise the rule lands and the var half of it silently does nothing.
+    expect(getDerivedVars('hovercard', 'borderRadius')).toEqual(
+      getDerivedVars('hover-card', 'borderRadius'),
+    );
+    expect(getDerivedVars('textarea', 'paddingInline')).toEqual(
+      getDerivedVars('text-area', 'paddingInline'),
+    );
+    expect(getDerivedVars('progressbar-mark', 'width')).toEqual(
+      getDerivedVars('progress-bar-mark', 'width'),
+    );
+  });
+
   it('returns empty for unregistered property', () => {
     expect(getDerivedVars('card', 'color')).toEqual([]);
   });
@@ -441,3 +477,51 @@ describe('getDerivedVars', () => {
     }
   });
 });
+
+// ---------------------------------------------------------------------------
+// Read check: a registered var nothing reads is a dead theming knob
+// ---------------------------------------------------------------------------
+
+/**
+ * Every source file under packages/core/src, concatenated once.
+ *
+ * `--_popover-radius` shipped documented and registered while `usePopover`
+ * hardcoded its radius, so `popover: {borderRadius}` set a var no element ever
+ * read. Sync between source, docs and registry cannot catch that: the three
+ * agreed with each other, and none of them required a reader.
+ */
+function readAllSource(dir: string): string {
+  let out = '';
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out += readAllSource(path);
+    } else if (
+      (entry.name.endsWith('.ts') || entry.name.endsWith('.tsx')) &&
+      !entry.name.includes('.test.') &&
+      !entry.name.endsWith('.d.ts')
+    ) {
+      out += readFileSync(path, 'utf-8');
+    }
+  }
+  return out;
+}
+
+describe('registered derived vars are read by component styles', () => {
+  const source = readAllSource(SRC_DIR);
+
+  for (const [component, entries] of Object.entries(derivedVarRegistry)) {
+    for (const varName of entries.flatMap(e => e.vars ?? [])) {
+      it(`${component}: ${varName} is read via var()`, () => {
+        expect(
+          source.includes(`var(${varName})`) ||
+            source.includes(`var(${varName},`),
+          `${varName} is registered as the derived var for a CSS property on ` +
+            `\`${component}\`, but no component reads it. A theme setting that ` +
+            `property would write a var nothing consumes. Read it in the ` +
+            `element's StyleX styles, or drop the derived entry.`,
+        ).toBe(true);
+      });
+    }
+  }
+});