@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/src/PowerSearch/formatFilterValue.ts

@@ -16,6 +16,7 @@ import type {Locale, TranslatorFn} from '../i18n';
 import {truncateCharacters} from '../utils/characters';
 import {registerEnglishFallback} from '../i18n/englishFallback';
 import english from '../i18n/generated-english/PowerSearch/formatFilterValue.generated';
+import {resolveDateZone} from './powerSearchDateZone';
 
 registerEnglishFallback(english);
 
@@ -32,44 +33,59 @@ function formatEnumLabel(
 }
 
 function formatNumber(value: number, locale: Locale, units?: string): string {
-  const formatted = new Intl.NumberFormat(locale).format(value);
+  const formatted = formatSharedNumber(value, locale);
   return units ? `${formatted} ${units}` : formatted;
 }
 
-export function formatDateAbsolute(
-  unixSeconds: number,
+/**
+ * A number in the provider locale's digits, decimal mark, and — unless the
+ * options say otherwise — grouping. The shared number helper for
+ * PowerSearch's own readings of a value — this module owns the raw `Intl`
+ * access.
+ */
+export function formatSharedNumber(
+  value: number,
   locale: Locale,
-  timezoneID?: string,
+  options?: Pick<
+    Intl.NumberFormatOptions,
+    'useGrouping' | 'maximumFractionDigits'
+  >,
 ): string {
-  const options: Intl.DateTimeFormatOptions = {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    ...(timezoneID ? {timeZone: timezoneID} : {}),
-    calendar: 'gregory',
-  };
-  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+  return new Intl.NumberFormat(locale, options).format(value);
 }
 
 /**
- * Compact date-only rendering (no time-of-day) for the token pill's inline
- * value display, which has less room than the editor's full summary. Kept
- * separate from {@link formatDateAbsolute} rather than reusing it with
- * different options threaded through a param, since the two callers want
- * genuinely different shapes, not a parameterization of the same one.
+ * The one reading of a calendar-day `date_absolute` value: its day in the
+ * zone `resolveDateZone` names. The token text and the accessible label share
+ * it; the editors read the same zone through `resolveDateZone`, so a value
+ * never reads as two days in one field. A value whose operator sets
+ * `isDateOnly: false` is an instant: its date and time in `timezoneID`,
+ * else the viewer's zone, the time its editor reads and writes.
  */
-export function formatDateAbsoluteCompact(
+export function formatDateAbsolute(
   unixSeconds: number,
   locale: Locale,
+  timezoneID: string | undefined,
+  isDateOnly = true,
 ): string {
-  return new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    calendar: 'gregory',
-  }).format(unixSeconds * 1000);
+  const options: Intl.DateTimeFormatOptions = isDateOnly
+    ? {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        timeZone: resolveDateZone(timezoneID, true),
+        calendar: 'gregory',
+      }
+    : {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        timeZone: resolveDateZone(timezoneID, false),
+        calendar: 'gregory',
+      };
+  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
 }
 
 function formatRelativeDate(value: string): string {
@@ -188,7 +204,13 @@ export function formatFilterValue(
 
     case 'date_absolute':
       return truncate(
-        formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID),
+        formatDateAbsolute(
+          filterValue.unixSeconds,
+          locale,
+          timezoneID,
+          operatorValue.type !== 'date_absolute' ||
+            operatorValue.isDateOnly !== false,
+        ),
         maxLength,
       );
 

package/src/PowerSearch/formatTokenValue.ts

@@ -0,0 +1,220 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @fileoverview The text a PowerSearch filter token shows for a value.
+ *
+ * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @output `formatTokenValueText` — one string, or null for an empty value.
+ * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
+ * presentation's Filters rows and removal announcement
+ * (`PowerSearchBottomSheet.tsx`), so every reading of a value on the field
+ * uses the same words and the same zone handling.
+ */
+
+import type {OperatorValue, FilterValue, EnumItem} from './types';
+import type {Locale, TranslatorFn} from '../i18n';
+import {truncateCharacters} from '../utils/characters';
+import {formatDateAbsolute, formatSharedNumber} from './formatFilterValue';
+import {registerEnglishFallback} from '../i18n/englishFallback';
+import english from '../i18n/generated-english/PowerSearch/formatTokenValue.generated';
+
+registerEnglishFallback(english);
+
+type ListFormatFn = (items: ReadonlyArray<string>) => string;
+
+function truncateString(value: string, limit: number): string {
+  // Same semantics as before — strings within limit + 3 pass through, longer
+  // ones cut to limit + '...' — but counted in characters, not code units.
+  return truncateCharacters(value, limit + 3, '...');
+}
+
+function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {
+  return values.find(v => v.value === value)?.label ?? value;
+}
+
+// Intl's maximum fraction cap: no number the row formats is rounded.
+const MAX_FRACTION_DIGITS = 100;
+
+// Whether a locale writes a number with the token's own numerals: Latin
+// digits and a `.` decimal mark, so `String(value)` is already the locale's
+// reading. Probed once per locale through the shared number helper.
+const tokenNumeralLocales = new Map<string, boolean>();
+function usesTokenNumerals(locale: Locale): boolean {
+  let uses = tokenNumeralLocales.get(locale);
+  if (uses == null) {
+    uses =
+      formatSharedNumber(1234567.5, locale, {
+        useGrouping: false,
+        maximumFractionDigits: MAX_FRACTION_DIGITS,
+      }) === '1234567.5';
+    tokenNumeralLocales.set(locale, uses);
+  }
+  return uses;
+}
+
+// A number as the token reads it. Where the locale writes Latin digits and a
+// `.` decimal mark, use the token's own text, `String(value)`. Elsewhere, use
+// the locale's digits and decimal mark, with no grouping and no rounding: the
+// fraction cap is Intl's maximum, so `1e-21` keeps its digits.
+function formatNumberAsToken(value: number, locale: Locale): string {
+  return usesTokenNumerals(locale)
+    ? String(value)
+    : formatSharedNumber(value, locale, {
+        useGrouping: false,
+        maximumFractionDigits: MAX_FRACTION_DIGITS,
+      });
+}
+
+// The summaries, lists, and numbers the token writes as English literals, and
+// the locale-aware readings of the same: with a translator (the sheet
+// presentation's rows and announcements) the summaries resolve through the
+// catalog, lists through the provider locale's list format, and numbers
+// through its number format; without one they stay the token's own literals,
+// the released popover token's text. In English the two read identically.
+function itemsSummary(count: number, t: TranslatorFn | undefined): string {
+  return t
+    ? t('@astryx.powersearch.valueEditor.itemsCount', {count})
+    : // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      `${count} items`;
+}
+
+function formatListText(
+  labels: ReadonlyArray<string>,
+  maxLength: number,
+  t: TranslatorFn | undefined,
+  formatList: ListFormatFn | undefined,
+): string | null {
+  if (labels.length === 0) {
+    return null;
+  }
+  if (labels.length === 1) {
+    return truncateString(labels[0], maxLength);
+  }
+  const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
+  if (totalLength > maxLength) {
+    return itemsSummary(labels.length, t);
+  }
+  return formatList ? formatList(labels) : labels.join(', ');
+}
+
+/**
+ * The text a filter token shows for a value: the one place that decides how
+ * a value reads on the field, so every other reading of the same value —
+ * the sheet presentation's Filters rows and its removal announcement — can
+ * use the same words and the same zone handling. `maxLength` is the token's
+ * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * With `t`, the list, date-range and nested summaries resolve through the
+ * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
+ * token's own literals. With `formatList` (the provider's list formatter),
+ * several labels join as a list in the locale; without it they join with
+ * the token's literal ", ".
+ */
+export function formatTokenValueText(
+  operatorValue: OperatorValue,
+  filterValue: FilterValue,
+  maxLength: number,
+  locale: Locale,
+  t?: TranslatorFn,
+  formatList?: ListFormatFn,
+  timezoneID?: string,
+): string | null {
+  switch (filterValue.type) {
+    case 'empty':
+      return null;
+
+    case 'string':
+      return truncateString(filterValue.value, maxLength);
+
+    case 'integer':
+    case 'float':
+      return t
+        ? formatNumberAsToken(filterValue.value, locale)
+        : String(filterValue.value);
+
+    case 'enum':
+      if (operatorValue.type === 'enum') {
+        return truncateString(
+          getEnumLabel(operatorValue.values, filterValue.value),
+          maxLength,
+        );
+      }
+      return truncateString(filterValue.value, maxLength);
+
+    case 'string_list':
+      return formatListText(filterValue.value, maxLength, t, formatList);
+
+    case 'enum_list': {
+      const items = filterValue.value;
+      if (items.length === 0) {
+        return null;
+      }
+      if (operatorValue.type === 'enum_list') {
+        return formatListText(
+          items.map(v => getEnumLabel(operatorValue.values, v)),
+          maxLength,
+          t,
+          formatList,
+        );
+      }
+      if (items.length === 1) {
+        return truncateString(items[0], maxLength);
+      }
+      return itemsSummary(items.length, t);
+    }
+
+    case 'entity_list':
+      return formatListText(
+        filterValue.value.map(e => e.label),
+        maxLength,
+        t,
+        formatList,
+      );
+
+    case 'time':
+      return filterValue.value;
+
+    case 'date_absolute':
+      // The token reads a value in the zone its editor uses.
+      return truncateString(
+        formatDateAbsolute(
+          filterValue.unixSeconds,
+          locale,
+          timezoneID,
+          operatorValue.type !== 'date_absolute' ||
+            operatorValue.isDateOnly !== false,
+        ),
+        maxLength,
+      );
+
+    case 'date_relative':
+      return truncateString(filterValue.value, maxLength);
+
+    case 'date_range':
+      if (t) {
+        return t('@astryx.powersearch.valueEditor.dateRange');
+      }
+      // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      return 'date range';
+
+    case 'custom':
+      if (operatorValue.type === 'custom') {
+        return truncateString(
+          operatorValue.getString(filterValue.value),
+          maxLength,
+        );
+      }
+      return filterValue.value;
+
+    case 'nested': {
+      const count = filterValue.value.length;
+      if (t) {
+        return t('@astryx.powersearch.valueEditor.filtersCount', {count});
+      }
+      // eslint-disable-next-line @astryx/no-hardcoded-i18n-string -- the popover token's released English text; translating it is a separate stable change
+      return count === 1 ? '1 filter' : `${count} filters`;
+    }
+
+    default:
+      return null;
+  }
+}

package/src/PowerSearch/index.ts

@@ -12,7 +12,11 @@
  */
 
 export {PowerSearch} from './PowerSearch';
-export type {PowerSearchProps, PowerSearchSize} from './PowerSearch';
+export type {
+  PowerSearchPresentation,
+  PowerSearchProps,
+  PowerSearchSize,
+} from './PowerSearch';
 
 export {PowerSearchToken} from './PowerSearchToken';
 export {PowerSearchFilterEditor} from './PowerSearchFilterEditor';

package/src/PowerSearch/powerSearchDateZone.ts

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file powerSearchDateZone.ts
+ * @input A `date_absolute` or range part's `unixSeconds`, the operator's
+ *   `isDateOnly`, and the PowerSearch `timezoneID`
+ * @output The one zone every reading of such a value uses, and the
+ *   conversions between an instant and the calendar day or wall-clock time
+ *   shown in that zone
+ * @position Shared by the token text, the accessible label, and the value
+ *   editors, so a value reads as the same day everywhere in one field
+ */
+
+import type {ISODateString} from '../utils/dateTypes';
+import type {ISODateTimeString} from '../DateTimeInput/DateTimeInput';
+import {
+  getWallClock,
+  plainDateFromDate,
+  plainDateFromInstant,
+  plainDateFromISO,
+  plainDateToDate,
+  plainDateToInstant,
+  plainDateToISO,
+} from '../utils/plainDate';
+
+/**
+ * The zone a date value is read and written in. A calendar day is stored as
+ * midnight in `timezoneID`. With no `timezoneID` the day is the UTC day, so
+ * a value written before a zone was given keeps its day. A value with a time
+ * of day shows in `timezoneID`, else in the viewer's zone. `undefined` names
+ * the viewer's zone, because `Intl` and `Date` default to it.
+ */
+export function resolveDateZone(
+  timezoneID: string | undefined,
+  isDateOnly: boolean,
+): string | undefined {
+  // An empty string is no zone, as the formatter always read it.
+  if (timezoneID) {
+    return timezoneID;
+  }
+  return isDateOnly ? 'UTC' : undefined;
+}
+
+const pad = (n: number, width = 2) => String(n).padStart(width, '0');
+
+export function unixSecondsToISODate(
+  unixSeconds: number,
+  zone: string | undefined,
+): ISODateString {
+  const instant = unixSeconds * 1000;
+
+  return plainDateToISO(
+    zone == null
+      ? plainDateFromDate(new Date(instant))
+      : plainDateFromInstant(instant, zone),
+  );
+}
+
+export function isoDateToUnixSeconds(
+  date: ISODateString,
+  zone: string | undefined,
+): number {
+  const plain = plainDateFromISO(date);
+  const instant =
+    zone == null
+      ? plainDateToDate(plain).getTime()
+      : plainDateToInstant(plain, zone);
+  return Math.floor(instant / 1000);
+}
+
+export function unixSecondsToISODateTime(
+  unixSeconds: number,
+  zone: string | undefined,
+): ISODateTimeString {
+  const w = getWallClock(new Date(unixSeconds * 1000), zone);
+  return `${pad(w.year, 4)}-${pad(w.month)}-${pad(w.day)}T${pad(w.hour)}:${pad(w.minute)}` as ISODateTimeString;
+}
+
+export function isoDateTimeToUnixSeconds(
+  value: ISODateTimeString,
+  zone: string | undefined,
+): number {
+  const [datePart, timePart = '00:00'] = value.split('T');
+  const [hour = 0, minute = 0] = timePart.split(':').map(Number);
+  const plain = plainDateFromISO(datePart as ISODateString);
+  let instant: number;
+  if (zone == null) {
+    const d = plainDateToDate(plain);
+    d.setHours(hour, minute, 0, 0);
+    instant = d.getTime();
+  } else {
+    instant = plainDateToInstant(plain, zone, hour, minute);
+  }
+  return Math.floor(instant / 1000);
+}

package/src/PowerSearch/powerSearchSheetUtils.ts

@@ -0,0 +1,224 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file powerSearchSheetUtils.ts
+ * @input PowerSearch config/filter types and the field typeahead source
+ * @output Pure helpers for the sheet presentation: which operators the
+ *   sheet's own controls edit, field matching, filter identity tracking
+ *   across controlled re-renders, the focus target after a removal, and the
+ *   content search's suggestion source over the field typeahead
+ * @position Helper module; consumed by PowerSearchBottomSheet.tsx and its
+ *   tests
+ */
+
+import type {SearchSource} from '../Typeahead/types';
+import type {InternalConfig} from './useInternalConfig';
+import type {
+  PowerSearchField,
+  PowerSearchFilter,
+  PowerSearchItem,
+  PowerSearchOperator,
+} from './types';
+
+// =============================================================================
+// Operators and fields
+// =============================================================================
+
+/**
+ * Whether the value step edits an operator's value with a sheet-native
+ * control (choice rows, or the popover's editor in its sheet presentation).
+ * A `nested` value is the exception: it is edited by the popover's built-in
+ * NestedEditor, rendered in the step's body,
+ * so every operator opens an editable step and no field is left out.
+ */
+export function isSupportedOperator(operator: PowerSearchOperator): boolean {
+  return operator.value.type !== 'nested';
+}
+
+export function fieldMatchesQuery(
+  field: PowerSearchField,
+  normalizedQuery: string,
+): boolean {
+  if (normalizedQuery === '') {
+    return true;
+  }
+  if (field.label.toLowerCase().includes(normalizedQuery)) {
+    return true;
+  }
+  return (
+    field.typeaheadAliases?.some(alias =>
+      alias.toLowerCase().includes(normalizedQuery),
+    ) ?? false
+  );
+}
+
+/** Synchronous suggestion source; the sheet renders results inline. */
+export interface SheetSuggestionSource {
+  search(query: string): PowerSearchItem[];
+  bootstrap(): PowerSearchItem[];
+}
+
+/**
+ * The field typeahead source as the content search's rows: the popover
+ * presentation's own suggestions, minus any whose field the config no longer
+ * knows. That source resolves synchronously from the config; a promise (none
+ * today) yields no rows rather than a stale list.
+ */
+export function createSheetSuggestionSource(
+  config: InternalConfig,
+  source: SearchSource<PowerSearchItem>,
+): SheetSuggestionSource {
+  // Every suggestion whose field the config knows is offered: the value step
+  // edits every operator, `nested` included.
+  const isEditable = (item: PowerSearchItem): boolean => {
+    const aux = item.auxiliaryData;
+    return aux != null && config.getField(aux.fieldKey) != null;
+  };
+  const settle = (
+    results: PowerSearchItem[] | Promise<PowerSearchItem[]>,
+  ): PowerSearchItem[] =>
+    Array.isArray(results) ? results.filter(isEditable) : [];
+  return {
+    search: query => settle(source.search(query)),
+    bootstrap: () => settle(source.bootstrap()),
+  };
+}
+
+// =============================================================================
+// Filter identity across controlled updates
+// =============================================================================
+
+function stableSerialize(value: unknown): string {
+  if (Array.isArray(value)) {
+    return `[${value.map(stableSerialize).join(',')}]`;
+  }
+  if (value != null && typeof value === 'object') {
+    return `{${Object.entries(value)
+      .sort(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0))
+      .map(([key, entry]) => `${JSON.stringify(key)}:${stableSerialize(entry)}`)
+      .join(',')}}`;
+  }
+  return JSON.stringify(value) ?? 'undefined';
+}
+
+/**
+ * Stable identities for the Filters rows across controlled updates, so a row
+ * keeps its element — and its focus — when the parent reorders the filters or
+ * removes one above it. A filter object seen before keeps its
+ * id; a new object takes the id of a filter from the previous update with the
+ * same signature that no present object claims (a parent that clones its
+ * values on every change); anything else mints a new id. Two equal filters
+ * are told apart by order. Call `next` once per render with the current list.
+ */
+export function createFilterIdentities(): {
+  next: (filters: ReadonlyArray<PowerSearchFilter>) => number[];
+} {
+  const byObject = new WeakMap<PowerSearchFilter, number>();
+  let previousBySignature = new Map<string, number[]>();
+  let nextId = 0;
+  return {
+    next(filters) {
+      const used = new Set<number>();
+      const ids: (number | null)[] = filters.map(filter => {
+        const known = byObject.get(filter);
+        if (known == null || used.has(known)) {
+          return null;
+        }
+        used.add(known);
+        return known;
+      });
+      const bySignature = new Map<string, number[]>();
+      filters.forEach((filter, index) => {
+        const signature = filterSignature(filter);
+        let id = ids[index];
+        if (id == null) {
+          id =
+            previousBySignature
+              .get(signature)
+              ?.find(candidate => !used.has(candidate)) ?? nextId++;
+          used.add(id);
+          byObject.set(filter, id);
+          ids[index] = id;
+        }
+        bySignature.set(signature, [...(bySignature.get(signature) ?? []), id]);
+      });
+      previousBySignature = bySignature;
+      return ids as number[];
+    },
+  };
+}
+
+/** Structural snapshot of a filter, for parents that clone their values. */
+export function filterSignature(filter: PowerSearchFilter): string {
+  return stableSerialize({
+    field: filter.field,
+    operator: filter.operator,
+    value: filter.value,
+    isReadOnly: filter.isReadOnly ?? false,
+  });
+}
+
+/**
+ * Finds the filter a step was opened on after the controlled parent may have
+ * reordered, cloned, or removed it: object identity first, then the original
+ * slot when it still holds a structurally equal filter, then a unique
+ * structural match anywhere. Returns null when the target is gone or
+ * ambiguous, so an edit never lands on a different filter.
+ */
+export function resolveFilterIdentityIndex(
+  filters: ReadonlyArray<PowerSearchFilter>,
+  sourceFilter: PowerSearchFilter,
+  sourceSignature: string,
+  preferredIndex: number,
+): number | null {
+  const identityIndex = filters.indexOf(sourceFilter);
+  if (identityIndex >= 0) {
+    return identityIndex;
+  }
+  if (
+    filters[preferredIndex] != null &&
+    filterSignature(filters[preferredIndex]) === sourceSignature
+  ) {
+    return preferredIndex;
+  }
+  const matchingIndices = filters.flatMap((filter, index) =>
+    filterSignature(filter) === sourceSignature ? [index] : [],
+  );
+  return matchingIndices.length === 1 ? matchingIndices[0] : null;
+}
+
+/**
+ * After removing the filter at `removedIndex`, focus should land on the
+ * nearest remaining row that is a button, preferring the one after it.
+ * `isRowButton` is the Filters sheet's own rule for which rows are buttons:
+ * the field interactive and the filter not read-only (a `nested` or stale
+ * filter's row is a button too).
+ */
+export function nearestEditableIndex(
+  nextFilters: ReadonlyArray<PowerSearchFilter>,
+  removedIndex: number,
+  isRowButton: (filter: PowerSearchFilter) => boolean = filter =>
+    !filter.isReadOnly,
+): number | undefined {
+  const editableIndices = nextFilters.flatMap((candidate, candidateIndex) =>
+    isRowButton(candidate) ? [candidateIndex] : [],
+  );
+  return editableIndices.reduce<number | undefined>((nearest, candidate) => {
+    if (nearest == null) {
+      return candidate;
+    }
+    const candidateDistance = Math.abs(candidate - removedIndex);
+    const nearestDistance = Math.abs(nearest - removedIndex);
+    if (candidateDistance < nearestDistance) {
+      return candidate;
+    }
+    if (
+      candidateDistance === nearestDistance &&
+      candidate >= removedIndex &&
+      nearest < removedIndex
+    ) {
+      return candidate;
+    }
+    return nearest;
+  }, undefined);
+}

package/src/PowerSearch/types.ts

@@ -61,7 +61,12 @@ export interface TimeOperatorValue {
 
 export interface DateAbsoluteOperatorValue {
   readonly type: 'date_absolute';
-  /** If true, only show date picker without time. */
+  /**
+   * True or unset: the value is a calendar day, edited with a date picker.
+   * False: the value is an instant with a time of day, edited with a date
+   * picker and a time field and shown with its time in `timezoneID`, else
+   * the viewer's zone.
+   */
   readonly isDateOnly?: boolean;
 }
 
@@ -407,6 +412,8 @@ export interface PowerSearchTokenProps {
   readonly onClick?: () => void;
   readonly onRemove?: () => void;
   readonly isDisabled?: boolean;
+  /** The zone the field reads date values in; see PowerSearch `timezoneID`. */
+  readonly timezoneID?: string;
 }
 
 /**

package/src/ProgressBar/ProgressBarTouch.ts

@@ -75,6 +75,8 @@ export function useProgressBarTouch(
   const watchesTrack = isTouch && hasMarks;
   const trackRef = useRef<HTMLDivElement | null>(null);
   const [trackWidth, setTrackWidth] = useState(0);
+  // Syncs the shared resize observer with the track while the track width is
+  // needed.
   useEffect(() => {
     const element = trackRef.current;
     if (!watchesTrack || element == null) {