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

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -5,7 +5,8 @@
 /**
  * @file PowerSearchEditPopover.tsx
  * @input InternalConfig, PartialFilter
- * @output Edit popover content with field/operator selectors and value editor
+ * @output Edit popover content with field/operator selectors and value editor;
+ *   the built-in NestedEditor the sheet presentation's value step shares
  * @position Sub-component; consumed by PowerSearch
  *
  * SYNC: When modified, update:
@@ -384,7 +385,7 @@ function NestedSubFilterRow({
 // Nested editor
 // =============================================================================
 
-interface NestedEditorProps {
+export interface NestedEditorProps {
   config: InternalConfig;
   partialFilter: PartialFilter;
   operatorOptions: {value: string; label: string}[];
@@ -392,9 +393,25 @@ 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;
 }
 
-function NestedEditor({
+/**
+ * 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({
   config,
   partialFilter,
   operatorOptions,
@@ -402,6 +419,8 @@ function NestedEditor({
   onPartialFilterChange,
   maxMenuItems,
   isReadOnly,
+  xstyle,
+  hasRootOperatorPicker = true,
 }: NestedEditorProps) {
   const t = useComponentTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
@@ -587,7 +606,7 @@ function NestedEditor({
 
   const rootLabel = (
     <div {...stylex.props(styles.nestedRootLabel)}>
-      {operatorOptions.length > 1 ? (
+      {hasRootOperatorPicker && operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
             label={t('@astryx.powersearch.editor.groupOperator')}
@@ -600,7 +619,10 @@ function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
+        (operatorOptions.find(option => option.value === partialFilter.operator)
+          ?.label ??
+        operatorOptions[0]?.label ??
+        t('@astryx.powersearch.editor.group'))
       )}
     </div>
   );
@@ -614,7 +636,7 @@ function NestedEditor({
     },
   ];
 
-  return <TreeList items={items} density="balanced" />;
+  return <TreeList items={items} density="balanced" xstyle={xstyle} />;
 }
 
 // =============================================================================

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -4,9 +4,12 @@
 
 /**
  * @file PowerSearchValueEditor.tsx
- * @input OperatorValue, FilterValue, onChange callback
+ * @input OperatorValue, FilterValue, onChange callback, and the presentation
+ *   the editor renders in
  * @output Renders the appropriate editor for a filter value type
- * @position Sub-component; consumed by PowerSearchEditPopover
+ * @position Sub-component; consumed by PowerSearchEditPopover (popover
+ *   presentation) and PowerSearchBottomSheet (sheet presentation, which
+ *   renders the closed vocabularies as rows itself)
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
@@ -43,9 +46,10 @@ import {DateRangeInput, type DateRange} from '../DateRangeInput';
 import {resolveDateTimeRangePart} from './resolveDateTimeRangePart';
 import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
-import {Tokenizer} from '../Tokenizer';
+import {Tokenizer} from '../Tokenizer/Tokenizer';
 import {Typeahead} from '../Typeahead';
 import {useLocale} from '../i18n';
+import type {TranslatorFn} from '../i18n';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -64,8 +68,30 @@ 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
 // =============================================================================
@@ -113,6 +139,7 @@ function StringEditor({
   onEnter: _onEnter,
   maxMenuItems,
   isDisabled,
+  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'string'};
   filterValue: FilterValue | undefined;
@@ -120,8 +147,10 @@ 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
@@ -148,6 +177,7 @@ function StringEditor({
         placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
         maxMenuItems={maxMenuItems}
+        width={width}
       />
     );
   }
@@ -162,6 +192,7 @@ function StringEditor({
       onChange={(value: string) => {
         onChange({type: 'string', value});
       }}
+      width={width}
     />
   );
 }
@@ -172,14 +203,19 @@ 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 [];
@@ -203,9 +239,16 @@ 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={t('@astryx.powersearch.valueEditor.values')}
+      label={
+        isSheet && fieldLabel != null
+          ? fieldLabel
+          : t('@astryx.powersearch.valueEditor.values')
+      }
       isLabelHidden
       isDisabled={isDisabled}
       searchSource={source}
@@ -220,6 +263,8 @@ function StringListEditor({
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
       maxMenuItems={maxMenuItems}
+      width={isSheet ? '100%' : undefined}
+      experimental={isSheet ? {presentation: 'bottom-sheet'} : undefined}
     />
   );
 }
@@ -231,6 +276,8 @@ function useNumberEditorHandlers({
   isIntegerOnly,
   onChange,
   onEnter,
+  onUnstage,
+  stagesAsTyped,
 }: {
   valueType: 'integer' | 'float';
   min?: number;
@@ -238,6 +285,14 @@ 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);
@@ -259,12 +314,30 @@ function useNumberEditorHandlers({
   }, []);
   const handleInput = useCallback(
     (event: FormEvent<HTMLElement>) => {
-      pendingDecisionRef.current = resolveNumberInputCommit(
+      const decision = 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],
+    [
+      isIntegerOnly,
+      locale,
+      max,
+      min,
+      onChange,
+      onUnstage,
+      stagesAsTyped,
+      toFilterValue,
+    ],
   );
   const handleEnter = useCallback(() => {
     const decision = pendingDecisionRef.current;
@@ -292,13 +365,17 @@ 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 =
@@ -310,6 +387,8 @@ function IntegerEditor({
     isIntegerOnly: true,
     onChange,
     onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -328,6 +407,7 @@ function IntegerEditor({
       units={operatorValue.units}
       isIntegerOnly
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -337,13 +417,17 @@ 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 =
@@ -355,6 +439,8 @@ function FloatEditor({
     isIntegerOnly: false,
     onChange,
     onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -372,6 +458,7 @@ function FloatEditor({
       max={operatorValue.maxValue}
       units={operatorValue.units}
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -381,11 +468,13 @@ 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 =
@@ -406,6 +495,7 @@ function TimeEditor({
       }}
       min={operatorValue.minValue as ISOTimeString | undefined}
       max={operatorValue.maxValue as ISOTimeString | undefined}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -414,11 +504,13 @@ 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
@@ -442,10 +534,69 @@ 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,
@@ -461,37 +612,18 @@ function DateRelativeEditor({
   const currentValue =
     filterValue?.type === 'date_relative' ? filterValue.value : undefined;
 
-  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]);
+  // 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],
+  );
 
   return (
     <Selector
@@ -511,11 +643,13 @@ 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>(() => {
@@ -569,6 +703,9 @@ 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>
   );
@@ -671,14 +808,19 @@ 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;
@@ -701,9 +843,15 @@ function EntityListEditor({
     }));
   }, [filterValue]);
 
+  // Sheet presentation: the Tokenizer's own sheet, titled with the field
+  // label, as for string_list.
   return (
     <Tokenizer
-      label={t('@astryx.powersearch.valueEditor.entities')}
+      label={
+        isSheet && fieldLabel != null
+          ? fieldLabel
+          : t('@astryx.powersearch.valueEditor.entities')
+      }
       isLabelHidden
       isDisabled={isDisabled}
       searchSource={source}
@@ -726,6 +874,8 @@ 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}
     />
   );
 }
@@ -771,6 +921,9 @@ export function PowerSearchValueEditor({
   onEnter,
   maxMenuItems,
   isDisabled,
+  onUnstage,
+  presentation = 'popover',
+  fieldLabel,
 }: PowerSearchValueEditorProps) {
   switch (operatorValue.type) {
     case 'empty':
@@ -780,6 +933,7 @@ export function PowerSearchValueEditor({
       return (
         <StringEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -792,6 +946,8 @@ export function PowerSearchValueEditor({
       return (
         <StringListEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -803,6 +959,8 @@ export function PowerSearchValueEditor({
       return (
         <IntegerEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -814,6 +972,8 @@ export function PowerSearchValueEditor({
       return (
         <FloatEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -825,6 +985,7 @@ export function PowerSearchValueEditor({
       return (
         <TimeEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -835,6 +996,7 @@ export function PowerSearchValueEditor({
       return (
         <DateAbsoluteEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -855,6 +1017,7 @@ export function PowerSearchValueEditor({
       return (
         <DateRangeEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -885,6 +1048,8 @@ export function PowerSearchValueEditor({
       return (
         <EntityListEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}

package/src/PowerSearch/formatFilterValue.ts

@@ -32,10 +32,27 @@ 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;
 }
 
+/**
+ * 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,