@astryxdesign/core 0.7.7 → 0.7.8-canary.30b1896

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
@@ -39,13 +42,19 @@ import {
   type NumberInputCommitDecision,
 } from '../NumberInput/numberInputCommit';
 import {DateInput} from '../DateInput';
+import {
+  isoDateToUnixSeconds,
+  resolveDateZone,
+  unixSecondsToISODate,
+} from './powerSearchDateZone';
 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 +73,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
 // =============================================================================
@@ -96,10 +127,9 @@ function enumItemsToSearchableItems(
 function dateRangePartToISO(
   part: DateTimeRangePart,
   nowSeconds: number,
+  zone: string | undefined,
 ): ISODateString {
-  return new Date(resolveDateTimeRangePart(part, nowSeconds) * 1000)
-    .toISOString()
-    .split('T')[0] as ISODateString;
+  return unixSecondsToISODate(resolveDateTimeRangePart(part, nowSeconds), zone);
 }
 
 // =============================================================================
@@ -113,6 +143,7 @@ function StringEditor({
   onEnter: _onEnter,
   maxMenuItems,
   isDisabled,
+  presentation,
 }: {
   operatorValue: OperatorValue & {type: 'string'};
   filterValue: FilterValue | undefined;
@@ -120,8 +151,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 +181,7 @@ function StringEditor({
         placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
         maxMenuItems={maxMenuItems}
+        width={width}
       />
     );
   }
@@ -162,6 +196,7 @@ function StringEditor({
       onChange={(value: string) => {
         onChange({type: 'string', value});
       }}
+      width={width}
     />
   );
 }
@@ -172,14 +207,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 +243,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 +267,8 @@ function StringListEditor({
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
       maxMenuItems={maxMenuItems}
+      width={isSheet ? '100%' : undefined}
+      presentation={isSheet ? 'bottom-sheet' : 'popover'}
     />
   );
 }
@@ -231,6 +280,8 @@ function useNumberEditorHandlers({
   isIntegerOnly,
   onChange,
   onEnter,
+  onUnstage,
+  stagesAsTyped,
 }: {
   valueType: 'integer' | 'float';
   min?: number;
@@ -238,6 +289,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 +318,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 +369,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 +391,8 @@ function IntegerEditor({
     isIntegerOnly: true,
     onChange,
     onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -328,6 +411,7 @@ function IntegerEditor({
       units={operatorValue.units}
       isIntegerOnly
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -337,13 +421,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 +443,8 @@ function FloatEditor({
     isIntegerOnly: false,
     onChange,
     onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet',
   });
 
   return (
@@ -372,6 +462,7 @@ function FloatEditor({
       max={operatorValue.maxValue}
       units={operatorValue.units}
       placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
@@ -381,11 +472,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,46 +499,117 @@ function TimeEditor({
       }}
       min={operatorValue.minValue as ISOTimeString | undefined}
       max={operatorValue.maxValue as ISOTimeString | undefined}
+      width={presentation === 'bottom-sheet' ? '100%' : undefined}
     />
   );
 }
 
 function DateAbsoluteEditor({
+  operatorValue,
   filterValue,
   onChange,
   isDisabled,
+  presentation,
+  timezoneID,
 }: {
   operatorValue: OperatorValue & {type: 'date_absolute'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
+  presentation: EditorPresentation;
+  timezoneID?: string;
 }) {
   const t = useComponentTranslator();
-  // Convert unixSeconds to ISO date string for the date input
-  const currentValue = useMemo(() => {
-    if (filterValue?.type !== 'date_absolute') {
-      return undefined;
-    }
-    const date = new Date(filterValue.unixSeconds * 1000);
-    return date.toISOString().split('T')[0] as ISODateString;
-  }, [filterValue]);
+  // A date-only value edits in the zone the token and the label use. An
+  // `isDateOnly: false` value edits its UTC day.
+  const zone =
+    operatorValue.isDateOnly === false
+      ? 'UTC'
+      : resolveDateZone(timezoneID, true);
+  const unixSeconds =
+    filterValue?.type === 'date_absolute' ? filterValue.unixSeconds : undefined;
 
   return (
     <DateInput
       label={t('@astryx.powersearch.valueEditor.date')}
       isLabelHidden
       isDisabled={isDisabled}
-      value={currentValue}
+      value={
+        unixSeconds == null
+          ? undefined
+          : unixSecondsToISODate(unixSeconds, zone)
+      }
       onChange={value => {
         if (value != null) {
-          const unixSeconds = Math.floor(new Date(value).getTime() / 1000);
-          onChange({type: 'date_absolute', unixSeconds});
+          onChange({
+            type: 'date_absolute',
+            unixSeconds: isoDateToUnixSeconds(value, zone),
+          });
         }
       }}
+      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 +625,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,13 +656,19 @@ function DateRangeEditor({
   filterValue,
   onChange,
   isDisabled,
+  presentation,
+  timezoneID,
 }: {
   operatorValue: OperatorValue & {type: 'date_range'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
+  presentation: EditorPresentation;
+  timezoneID?: string;
 }) {
   const t = useComponentTranslator();
+  // A range part is a calendar day, read and written as a date-only value is.
+  const zone = resolveDateZone(timezoneID, true);
   const currentValue = useMemo<DateRange | null>(() => {
     if (filterValue?.type !== 'date_range') {
       return null;
@@ -525,10 +676,10 @@ function DateRangeEditor({
     const {start, end} = filterValue.value;
     const nowSeconds = Date.now() / 1000;
     return {
-      start: dateRangePartToISO(start, nowSeconds),
-      end: dateRangePartToISO(end, nowSeconds),
+      start: dateRangePartToISO(start, nowSeconds, zone),
+      end: dateRangePartToISO(end, nowSeconds, zone),
     };
-  }, [filterValue]);
+  }, [filterValue, zone]);
 
   const handleChange = useCallback(
     (range: DateRange | null) => {
@@ -540,16 +691,16 @@ function DateRangeEditor({
         value: {
           start: {
             type: 'ABSOLUTE',
-            unixSeconds: Date.parse(`${range.start}T00:00:00Z`) / 1000,
+            unixSeconds: isoDateToUnixSeconds(range.start, zone),
           },
           end: {
             type: 'ABSOLUTE',
-            unixSeconds: Date.parse(`${range.end}T00:00:00Z`) / 1000,
+            unixSeconds: isoDateToUnixSeconds(range.end, zone),
           },
         },
       });
     },
-    [onChange],
+    [onChange, zone],
   );
 
   const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
@@ -569,6 +720,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>
   );
@@ -661,6 +815,7 @@ function EnumListEditor({
       // all of them instead of BaseTypeahead's 10-suggestion default, which
       // would silently drop valid choices with no way to reach them.
       maxMenuItems={items.length}
+      presentation="popover"
     />
   );
 }
@@ -671,14 +826,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 +861,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 +892,8 @@ function EntityListEditor({
       placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       maxMenuItems={maxMenuItems}
+      width={isSheet ? '100%' : undefined}
+      presentation={isSheet ? 'bottom-sheet' : 'popover'}
     />
   );
 }
@@ -771,6 +939,10 @@ export function PowerSearchValueEditor({
   onEnter,
   maxMenuItems,
   isDisabled,
+  onUnstage,
+  presentation = 'popover',
+  fieldLabel,
+  timezoneID,
 }: PowerSearchValueEditorProps) {
   switch (operatorValue.type) {
     case 'empty':
@@ -780,6 +952,7 @@ export function PowerSearchValueEditor({
       return (
         <StringEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -792,6 +965,8 @@ export function PowerSearchValueEditor({
       return (
         <StringListEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -803,6 +978,8 @@ export function PowerSearchValueEditor({
       return (
         <IntegerEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -814,6 +991,8 @@ export function PowerSearchValueEditor({
       return (
         <FloatEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          onUnstage={onUnstage}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -825,6 +1004,7 @@ export function PowerSearchValueEditor({
       return (
         <TimeEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -835,9 +1015,11 @@ export function PowerSearchValueEditor({
       return (
         <DateAbsoluteEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          timezoneID={timezoneID}
         />
       );
 
@@ -855,9 +1037,11 @@ export function PowerSearchValueEditor({
       return (
         <DateRangeEditor
           isDisabled={isDisabled}
+          presentation={presentation}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
+          timezoneID={timezoneID}
         />
       );
 
@@ -885,6 +1069,8 @@ export function PowerSearchValueEditor({
       return (
         <EntityListEditor
           isDisabled={isDisabled}
+          presentation={presentation}
+          fieldLabel={fieldLabel}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}