@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12

package/src/PowerSearch/formatTokenValue.ts

@@ -0,0 +1,215 @@
+// 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 {
+  formatDateAbsoluteCompact,
+  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,
+): 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':
+      return truncateString(
+        formatDateAbsoluteCompact(filterValue.unixSeconds, locale),
+        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/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/RadioList/RadioList.tsx

@@ -29,9 +29,10 @@ import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {Field} from '../Field/Field';
 import type {InputStatus} from '../Field/types';
-import {useTooltip} from '../Tooltip';
+import {useTooltip} from '../Tooltip/useTooltip';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
-import {composeEventHandlers, mergeProps} from '../utils';
+import {composeEventHandlers} from '../utils/composeEventHandlers';
+import {mergeProps} from '../utils/mergeProps';
 import {joinAriaIDs} from '../utils/inputAria';
 import {
   type FieldInputBaseProps,

package/src/RadioList/RadioListItem.tsx

@@ -26,12 +26,14 @@ import {RadioListContext} from './RadioList';
 import {RadioListReasonContext} from './RadioListReasonContext';
 import {joinAriaIDs} from '../utils/inputAria';
 import {colorVars, radiusVars} from '../theme/tokens.stylex';
-import {mergeProps, isRenderable, rtlStyles} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
+import {mergeProps} from '../utils/mergeProps';
+import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useIndicator} from '../Indicator';
-import {Item, type ItemAlign} from '../Item';
+import {useIndicator} from '../Indicator/useIndicator';
+import {Item, type ItemAlign} from '../Item/Item';
 import {themeProps} from '../utils/themeProps';
 
 // The touch press's paint, declared by the shared overlay styles on the

package/src/SegmentedControl/useSegmentedSelectionMotion.ts

@@ -25,7 +25,7 @@ import {
   type RefObject,
 } from 'react';
 import {
-  createAnimator,
+  createMotionAnimator,
   type AnimateOptions,
   type Animator,
   type MotionCurve,
@@ -539,7 +539,7 @@ export class SegmentedSelectionMotion {
   private readonly after: Animator;
 
   constructor(
-    private readonly animator: Animator = createAnimator(null, {
+    private readonly animator: Animator = createMotionAnimator(null, {
       pseudoElement: '::before',
     }),
     options: SegmentedSelectionMotionOptions = {},
@@ -552,7 +552,10 @@ export class SegmentedSelectionMotion {
     this.now = options.now ?? defaultNow;
     this.after =
       options.afterAnimator ??
-      createAnimator(null, {pseudoElement: '::after', initial: {opacity: 0}});
+      createMotionAnimator(null, {
+        pseudoElement: '::after',
+        initial: {opacity: 0},
+      });
   }
 
   /** Attaches the radiogroup whose pseudo-elements are the lens (null detaches). */

package/src/Slider/sliderTouchController.ts

@@ -29,7 +29,7 @@ import {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
 import type {PointerKind} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
   type MotionHandle,
@@ -1186,7 +1186,7 @@ export class SliderTouchController {
   private animatorFor(element: HTMLElement): Animator {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createAnimator(element);
+      animator = createMotionAnimator(element);
       this.animators.set(element, animator);
     }
     return animator;