@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -5,8 +5,7 @@
 /**
  * @file PowerSearchEditPopover.tsx
  * @input InternalConfig, PartialFilter
- * @output Edit popover content with field/operator selectors and value editor;
- *   the built-in NestedEditor the sheet presentation's value step shares
+ * @output Edit popover content with field/operator selectors and value editor
  * @position Sub-component; consumed by PowerSearch
  *
  * SYNC: When modified, update:
@@ -385,7 +384,7 @@ function NestedSubFilterRow({
 // Nested editor
 // =============================================================================
 
-export interface NestedEditorProps {
+interface NestedEditorProps {
   config: InternalConfig;
   partialFilter: PartialFilter;
   operatorOptions: {value: string; label: string}[];
@@ -393,25 +392,9 @@ export interface NestedEditorProps {
   onPartialFilterChange: (filter: PartialFilter) => void;
   maxMenuItems?: number;
   isReadOnly: boolean;
-  /** Styles for the editor's tree root (the sheet makes it a query container). */
-  xstyle?: stylex.StyleXStyles;
-  /**
-   * Whether the tree root offers the group-operator picker when the field has
-   * several operators. The popover shows it; the sheet presentation's value
-   * step owns the operator choice in its own Operator group and hides it.
-   * @default true
-   */
-  hasRootOperatorPicker?: boolean;
 }
 
-/**
- * The built-in editor for a `nested` value: a tree of sub-filters with Add,
- * field/operator/value rows and removal. The popover renders it below its
- * field selector; the sheet presentation's value step renders the same editor
- * in its body, so a `nested` filter is created
- * and edited the same way in both presentations.
- */
-export function NestedEditor({
+function NestedEditor({
   config,
   partialFilter,
   operatorOptions,
@@ -419,8 +402,6 @@ export function NestedEditor({
   onPartialFilterChange,
   maxMenuItems,
   isReadOnly,
-  xstyle,
-  hasRootOperatorPicker = true,
 }: NestedEditorProps) {
   const t = useComponentTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
@@ -606,7 +587,7 @@ export function NestedEditor({
 
   const rootLabel = (
     <div {...stylex.props(styles.nestedRootLabel)}>
-      {hasRootOperatorPicker && operatorOptions.length > 1 ? (
+      {operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
             label={t('@astryx.powersearch.editor.groupOperator')}
@@ -619,10 +600,7 @@ export function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions.find(option => option.value === partialFilter.operator)
-          ?.label ??
-        operatorOptions[0]?.label ??
-        t('@astryx.powersearch.editor.group'))
+        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
       )}
     </div>
   );
@@ -636,7 +614,7 @@ export function NestedEditor({
     },
   ];
 
-  return <TreeList items={items} density="balanced" xstyle={xstyle} />;
+  return <TreeList items={items} density="balanced" />;
 }
 
 // =============================================================================

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -4,12 +4,9 @@
 
 /**
  * @file PowerSearchValueEditor.tsx
- * @input OperatorValue, FilterValue, onChange callback, and the presentation
- *   the editor renders in
+ * @input OperatorValue, FilterValue, onChange callback
  * @output Renders the appropriate editor for a filter value type
- * @position Sub-component; consumed by PowerSearchEditPopover (popover
- *   presentation) and PowerSearchBottomSheet (sheet presentation, which
- *   renders the closed vocabularies as rows itself)
+ * @position Sub-component; consumed by PowerSearchEditPopover
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
@@ -46,10 +43,9 @@ import {DateRangeInput, type DateRange} from '../DateRangeInput';
 import {resolveDateTimeRangePart} from './resolveDateTimeRangePart';
 import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
-import {Tokenizer} from '../Tokenizer/Tokenizer';
+import {Tokenizer} from '../Tokenizer';
 import {Typeahead} from '../Typeahead';
 import {useLocale} from '../i18n';
-import type {TranslatorFn} from '../i18n';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -68,30 +64,8 @@ export interface PowerSearchValueEditorProps {
   maxMenuItems?: number;
   isDisabled?: boolean;
   timezoneID?: string;
-  /**
-   * Called when a staged value no longer stands — the number input's draft is
-   * empty or does not parse — so the sheet presentation's confirm action
-   * disables again. Only the `bottom-sheet` presentation stages as typed; the
-   * popover commits on blur or Enter and never calls this.
-   */
-  onUnstage?: () => void;
-  /**
-   * Where the editor renders. In the `bottom-sheet` presentation the inputs
-   * fill the sheet's width, number inputs stage every parseable keystroke
-   * (the sheet's footer confirms; there is no Enter-to-save), the date range
-   * shows one month, and list values open the Tokenizer's own sheet titled
-   * with `fieldLabel`.
-   * @default 'popover'
-   */
-  presentation?: 'popover' | 'bottom-sheet';
-  /** The field's label; names the Tokenizer sheet in the sheet presentation. */
-  fieldLabel?: string;
 }
 
-type EditorPresentation = NonNullable<
-  PowerSearchValueEditorProps['presentation']
->;
-
 // =============================================================================
 // Helpers
 // =============================================================================
@@ -139,7 +113,6 @@ function StringEditor({
   onEnter: _onEnter,
   maxMenuItems,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'string'};
   filterValue: FilterValue | undefined;
@@ -147,10 +120,8 @@ function StringEditor({
   onEnter?: () => void;
   maxMenuItems?: number;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
-  const width = presentation === 'bottom-sheet' ? '100%' : undefined;
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
 
   // When a searchSource is provided, render a typeahead instead of a plain
@@ -177,7 +148,6 @@ function StringEditor({
         placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
         maxMenuItems={maxMenuItems}
-        width={width}
       />
     );
   }
@@ -192,7 +162,6 @@ function StringEditor({
       onChange={(value: string) => {
         onChange({type: 'string', value});
       }}
-      width={width}
     />
   );
 }
@@ -203,19 +172,14 @@ function StringListEditor({
   onChange,
   maxMenuItems,
   isDisabled,
-  presentation,
-  fieldLabel,
 }: {
   operatorValue: OperatorValue & {type: 'string_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   maxMenuItems?: number;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
-  fieldLabel?: string;
 }) {
   const t = useComponentTranslator();
-  const isSheet = presentation === 'bottom-sheet';
   const currentValue: SearchableItem[] = useMemo(() => {
     if (filterValue?.type !== 'string_list') {
       return [];
@@ -239,16 +203,9 @@ function StringListEditor({
   const hasCreate =
     operatorValue.isArbitraryStringAllowed || !operatorValue.searchSource;
 
-  // In the sheet presentation the list value edits through the Tokenizer's
-  // own sheet, titled with the field's label; a popover menu inside a sheet
-  // would stack a second anchored layer on a surface the person is already in.
   return (
     <Tokenizer
-      label={
-        isSheet && fieldLabel != null
-          ? fieldLabel
-          : t('@astryx.powersearch.valueEditor.values')
-      }
+      label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
       isDisabled={isDisabled}
       searchSource={source}
@@ -263,8 +220,6 @@ function StringListEditor({
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
       maxMenuItems={maxMenuItems}
-      width={isSheet ? '100%' : undefined}
-      experimental={isSheet ? {presentation: 'bottom-sheet'} : undefined}
     />
   );
 }
@@ -276,8 +231,6 @@ function useNumberEditorHandlers({
   isIntegerOnly,
   onChange,
   onEnter,
-  onUnstage,
-  stagesAsTyped,
 }: {
   valueType: 'integer' | 'float';
   min?: number;
@@ -285,14 +238,6 @@ function useNumberEditorHandlers({
   isIntegerOnly: boolean;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
-  onUnstage?: () => void;
-  /**
-   * Stage every keystroke the input would commit, and unstage when the draft
-   * stops parsing. The sheet presentation confirms from its footer, so the
-   * confirm action must enable while the person is still typing and disable
-   * again over an empty field; the popover commits on blur or Enter.
-   */
-  stagesAsTyped: boolean;
 }) {
   const locale = useLocale();
   const pendingDecisionRef = useRef<NumberInputCommitDecision | null>(null);
@@ -314,30 +259,12 @@ function useNumberEditorHandlers({
   }, []);
   const handleInput = useCallback(
     (event: FormEvent<HTMLElement>) => {
-      const decision = resolveNumberInputCommit(
+      pendingDecisionRef.current = resolveNumberInputCommit(
         (event.currentTarget as HTMLInputElement).value,
         {min, max, isIntegerOnly, locale, hasClear: false},
       );
-      pendingDecisionRef.current = decision;
-      if (stagesAsTyped) {
-        if (decision.type === 'commit') {
-          onChange(toFilterValue(decision.value));
-        } else {
-          // Cleared, or not a number: nothing stands to confirm.
-          onUnstage?.();
-        }
-      }
     },
-    [
-      isIntegerOnly,
-      locale,
-      max,
-      min,
-      onChange,
-      onUnstage,
-      stagesAsTyped,
-      toFilterValue,
-    ],
+    [isIntegerOnly, locale, max, min],
   );
   const handleEnter = useCallback(() => {
     const decision = pendingDecisionRef.current;
@@ -365,17 +292,13 @@ function IntegerEditor({
   filterValue,
   onChange,
   onEnter,
-  onUnstage,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'integer'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
-  onUnstage?: () => void;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
   const currentValue =
@@ -387,8 +310,6 @@ function IntegerEditor({
     isIntegerOnly: true,
     onChange,
     onEnter,
-    onUnstage,
-    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -407,7 +328,6 @@ function IntegerEditor({
       units={operatorValue.units}
       isIntegerOnly
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
-      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -417,17 +337,13 @@ function FloatEditor({
   filterValue,
   onChange,
   onEnter,
-  onUnstage,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'float'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
-  onUnstage?: () => void;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
   const currentValue =
@@ -439,8 +355,6 @@ function FloatEditor({
     isIntegerOnly: false,
     onChange,
     onEnter,
-    onUnstage,
-    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -458,7 +372,6 @@ function FloatEditor({
       max={operatorValue.maxValue}
       units={operatorValue.units}
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
-      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -468,13 +381,11 @@ function TimeEditor({
   filterValue,
   onChange,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'time'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
   const currentValue =
@@ -495,7 +406,6 @@ function TimeEditor({
       }}
       min={operatorValue.minValue as ISOTimeString | undefined}
       max={operatorValue.maxValue as ISOTimeString | undefined}
-      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -504,13 +414,11 @@ function DateAbsoluteEditor({
   filterValue,
   onChange,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'date_absolute'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
   // Convert unixSeconds to ISO date string for the date input
@@ -534,69 +442,10 @@ function DateAbsoluteEditor({
           onChange({type: 'date_absolute', unixSeconds});
         }
       }}
-      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
 
-const RELATIVE_DATE_UNITS = [
-  {
-    unit: 'day',
-    plural: 'days',
-    amounts: [1, 3, 7, 14, 30],
-    ago: '@astryx.powersearch.sheet.relativeDaysAgo',
-    fromNow: '@astryx.powersearch.sheet.relativeDaysFromNow',
-  },
-  {
-    unit: 'week',
-    plural: 'weeks',
-    amounts: [1, 2, 4],
-    ago: '@astryx.powersearch.sheet.relativeWeeksAgo',
-    fromNow: '@astryx.powersearch.sheet.relativeWeeksFromNow',
-  },
-  {
-    unit: 'month',
-    plural: 'months',
-    amounts: [1, 3, 6, 12],
-    ago: '@astryx.powersearch.sheet.relativeMonthsAgo',
-    fromNow: '@astryx.powersearch.sheet.relativeMonthsFromNow',
-  },
-] as const;
-
-/**
- * The relative-date choices an operator offers, in display order. Shared by
- * the popover's Selector and the sheet presentation's rows so both list the
- * same values. With `t` the labels resolve through the catalog's ICU plural
- * messages (the sheet presentation's rows); without it they are the popover
- * editor's own literals. In English the two read identically.
- */
-export function buildRelativeDateOptions(
-  operatorValue: OperatorValue & {type: 'date_relative'},
-  t?: TranslatorFn,
-): {value: string; label: string}[] {
-  const result: {value: string; label: string}[] = [];
-  for (const {unit, plural, amounts, ago, fromNow} of RELATIVE_DATE_UNITS) {
-    for (const amount of amounts) {
-      const unitWord = amount === 1 ? unit : plural;
-      if (operatorValue.isPastAllowed !== false) {
-        result.push({
-          value: `${amount}${unit[0]}_ago`,
-          label: t ? t(ago, {count: amount}) : `${amount} ${unitWord} ago`,
-        });
-      }
-      if (operatorValue.isFutureAllowed !== false) {
-        result.push({
-          value: `${amount}${unit[0]}_from_now`,
-          label: t
-            ? t(fromNow, {count: amount})
-            : `${amount} ${unitWord} from now`,
-        });
-      }
-    }
-  }
-  return result;
-}
-
 function DateRelativeEditor({
   operatorValue,
   filterValue,
@@ -612,18 +461,37 @@ function DateRelativeEditor({
   const currentValue =
     filterValue?.type === 'date_relative' ? filterValue.value : undefined;
 
-  // The choices depend on the two flags only; a config that rebuilds its
-  // operator objects per render keeps the same memoized list.
-  const {isPastAllowed, isFutureAllowed} = operatorValue;
-  const options = useMemo(
-    () =>
-      buildRelativeDateOptions({
-        type: 'date_relative',
-        isPastAllowed,
-        isFutureAllowed,
-      }),
-    [isPastAllowed, isFutureAllowed],
-  );
+  const options = useMemo(() => {
+    const result: {value: string; label: string}[] = [];
+    const units = [
+      {unit: 'day', plural: 'days'},
+      {unit: 'week', plural: 'weeks'},
+      {unit: 'month', plural: 'months'},
+    ];
+    for (const {unit, plural} of units) {
+      const amounts =
+        unit === 'day'
+          ? [1, 3, 7, 14, 30]
+          : unit === 'week'
+            ? [1, 2, 4]
+            : [1, 3, 6, 12];
+      for (const amount of amounts) {
+        if (operatorValue.isPastAllowed !== false) {
+          result.push({
+            value: `${amount}${unit[0]}_ago`,
+            label: `${amount} ${amount === 1 ? unit : plural} ago`,
+          });
+        }
+        if (operatorValue.isFutureAllowed !== false) {
+          result.push({
+            value: `${amount}${unit[0]}_from_now`,
+            label: `${amount} ${amount === 1 ? unit : plural} from now`,
+          });
+        }
+      }
+    }
+    return result;
+  }, [operatorValue.isPastAllowed, operatorValue.isFutureAllowed]);
 
   return (
     <Selector
@@ -643,13 +511,11 @@ function DateRangeEditor({
   filterValue,
   onChange,
   isDisabled,
-  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'date_range'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
 }) {
   const t = useComponentTranslator();
   const currentValue = useMemo<DateRange | null>(() => {
@@ -703,9 +569,6 @@ function DateRangeEditor({
         value={currentValue}
         onChange={handleChange}
         hasClear={false}
-        // A phone-wide sheet fits one month; the popover keeps the default.
-        numberOfMonths={presentation === 'bottom-sheet' ? 1 : undefined}
-        width={presentation === 'bottom-sheet' ? '100%' : undefined}
       />
     </div>
   );
@@ -808,19 +671,14 @@ function EntityListEditor({
   onChange,
   maxMenuItems,
   isDisabled,
-  presentation,
-  fieldLabel,
 }: {
   operatorValue: OperatorValue & {type: 'entity_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   maxMenuItems?: number;
   isDisabled?: boolean;
-  presentation: EditorPresentation;
-  fieldLabel?: string;
 }) {
   const t = useComponentTranslator();
-  const isSheet = presentation === 'bottom-sheet';
   const source = useMemo<SearchSource<SearchableItem>>(() => {
     if (operatorValue.searchSource) {
       return operatorValue.searchSource;
@@ -843,15 +701,9 @@ function EntityListEditor({
     }));
   }, [filterValue]);
 
-  // Sheet presentation: the Tokenizer's own sheet, titled with the field
-  // label, as for string_list.
   return (
     <Tokenizer
-      label={
-        isSheet && fieldLabel != null
-          ? fieldLabel
-          : t('@astryx.powersearch.valueEditor.entities')
-      }
+      label={t('@astryx.powersearch.valueEditor.entities')}
       isLabelHidden
       isDisabled={isDisabled}
       searchSource={source}
@@ -874,8 +726,6 @@ function EntityListEditor({
       placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       maxMenuItems={maxMenuItems}
-      width={isSheet ? '100%' : undefined}
-      experimental={isSheet ? {presentation: 'bottom-sheet'} : undefined}
     />
   );
 }
@@ -921,9 +771,6 @@ export function PowerSearchValueEditor({
   onEnter,
   maxMenuItems,
   isDisabled,
-  onUnstage,
-  presentation = 'popover',
-  fieldLabel,
 }: PowerSearchValueEditorProps) {
   switch (operatorValue.type) {
     case 'empty':
@@ -933,7 +780,6 @@ export function PowerSearchValueEditor({
       return (
         <StringEditor
           isDisabled={isDisabled}
-          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -946,8 +792,6 @@ export function PowerSearchValueEditor({
       return (
         <StringListEditor
           isDisabled={isDisabled}
-          presentation={presentation}
-          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -959,8 +803,6 @@ export function PowerSearchValueEditor({
       return (
         <IntegerEditor
           isDisabled={isDisabled}
-          presentation={presentation}
-          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -972,8 +814,6 @@ export function PowerSearchValueEditor({
       return (
         <FloatEditor
           isDisabled={isDisabled}
-          presentation={presentation}
-          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -985,7 +825,6 @@ export function PowerSearchValueEditor({
       return (
         <TimeEditor
           isDisabled={isDisabled}
-          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -996,7 +835,6 @@ export function PowerSearchValueEditor({
       return (
         <DateAbsoluteEditor
           isDisabled={isDisabled}
-          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -1017,7 +855,6 @@ export function PowerSearchValueEditor({
       return (
         <DateRangeEditor
           isDisabled={isDisabled}
-          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -1048,8 +885,6 @@ export function PowerSearchValueEditor({
       return (
         <EntityListEditor
           isDisabled={isDisabled}
-          presentation={presentation}
-          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}

package/src/PowerSearch/formatFilterValue.ts

@@ -32,27 +32,10 @@ function formatEnumLabel(
 }
 
 function formatNumber(value: number, locale: Locale, units?: string): string {
-  const formatted = formatSharedNumber(value, locale);
+  const formatted = new Intl.NumberFormat(locale).format(value);
   return units ? `${formatted} ${units}` : formatted;
 }
 
-/**
- * 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,
-  options?: Pick<
-    Intl.NumberFormatOptions,
-    'useGrouping' | 'maximumFractionDigits'
-  >,
-): string {
-  return new Intl.NumberFormat(locale, options).format(value);
-}
-
 export function formatDateAbsolute(
   unixSeconds: number,
   locale: Locale,

package/src/RadioList/RadioList.tsx

@@ -29,10 +29,9 @@ 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/useTooltip';
+import {useTooltip} from '../Tooltip';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
-import {composeEventHandlers} from '../utils/composeEventHandlers';
-import {mergeProps} from '../utils/mergeProps';
+import {composeEventHandlers, mergeProps} from '../utils';
 import {joinAriaIDs} from '../utils/inputAria';
 import {
   type FieldInputBaseProps,