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

package/dist/PowerSearch/PowerSearchEditPopover.d.ts

@@ -1,13 +1,15 @@
 /**
  * @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:
  * - /packages/core/src/PowerSearch/index.ts
  */
 import React from 'react';
+import * as stylex from '@stylexjs/stylex';
 import type { InternalConfig } from './useInternalConfig.js';
 import type { PowerSearchFilter, PartialFilter } from './types.js';
 export interface PowerSearchEditPopoverProps {
@@ -27,5 +29,34 @@ export interface PowerSearchEditPopoverProps {
     /** Whether the filter is read-only. */
     isReadOnly?: boolean;
 }
+export interface NestedEditorProps {
+    config: InternalConfig;
+    partialFilter: PartialFilter;
+    operatorOptions: {
+        value: string;
+        label: string;
+    }[];
+    onOperatorChange: (operatorKey: string) => void;
+    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 declare function NestedEditor({ config, partialFilter, operatorOptions, onOperatorChange, onPartialFilterChange, maxMenuItems, isReadOnly, xstyle, hasRootOperatorPicker, }: NestedEditorProps): React.JSX.Element;
 export declare function PowerSearchEditPopover({ config, filter: initialFilter, mode, onSave, onCancel, saveButtonLabel: saveButtonLabelFromProps, maxMenuItems, isReadOnly, }: PowerSearchEditPopoverProps): React.JSX.Element;
 //# sourceMappingURL=PowerSearchEditPopover.d.ts.map

package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchEditPopover.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchEditPopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EAId,MAAM,SAAS,CAAC;AAsEjB,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA0hBD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,MAAM,EAAE,aAAa,EACrB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,eAAe,EAAE,wBAAwB,EACzC,YAAY,EACZ,UAAkB,GACnB,EAAE,2BAA2B,qBAsS7B"}
+{"version":3,"file":"PowerSearchEditPopover.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchEditPopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAa3C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EAId,MAAM,SAAS,CAAC;AAsEjB,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAyQD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,cAAc,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,qBAAqB,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,UAAU,EACV,MAAM,EACN,qBAA4B,GAC7B,EAAE,iBAAiB,qBAwNnB;AA0CD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,MAAM,EAAE,aAAa,EACrB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,eAAe,EAAE,wBAAwB,EACzC,YAAY,EACZ,UAAkB,GACnB,EAAE,2BAA2B,qBAsS7B"}

package/dist/PowerSearch/PowerSearchEditPopover.js

@@ -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:
@@ -241,14 +242,23 @@ function NestedSubFilterRow({
 // Nested editor
 // =============================================================================
 
-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,
   onOperatorChange,
   onPartialFilterChange,
   maxMenuItems,
-  isReadOnly
+  isReadOnly,
+  xstyle,
+  hasRootOperatorPicker = true
 }) {
   const t = useComponentTranslator();
   const [subFilters, setSubFilters] = useState(() => {
@@ -390,7 +400,7 @@ function NestedEditor({
     ...{
       className: "xcr08ib"
     },
-    children: operatorOptions.length > 1 ? /*#__PURE__*/_jsx("div", {
+    children: hasRootOperatorPicker && operatorOptions.length > 1 ? /*#__PURE__*/_jsx("div", {
       ...{
         className: "x1iyjqo2 x2lah0s x193iq5w"
       },
@@ -403,7 +413,7 @@ function NestedEditor({
         isDisabled: isReadOnly,
         size: "md"
       })
-    }) : operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group')
+    }) : operatorOptions.find(option => option.value === partialFilter.operator)?.label ?? operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group')
   });
   const items = [{
     id: 'nested-root',
@@ -413,7 +423,8 @@ function NestedEditor({
   }];
   return /*#__PURE__*/_jsx(TreeList, {
     items: items,
-    density: "balanced"
+    density: "balanced",
+    xstyle: xstyle
   });
 }
 

package/dist/PowerSearch/PowerSearchValueEditor.d.ts

@@ -1,8 +1,11 @@
 /**
  * @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
@@ -10,6 +13,7 @@
 import React from 'react';
 import type { OperatorValue, FilterValue } from './types.js';
 import type { InternalConfig } from './useInternalConfig.js';
+import type { TranslatorFn } from '../i18n/index.js';
 export interface PowerSearchValueEditorProps {
     operatorValue: OperatorValue;
     filterValue: FilterValue | undefined;
@@ -20,6 +24,37 @@ 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;
 }
-export declare function PowerSearchValueEditor({ operatorValue, filterValue, onChange, onEnter, maxMenuItems, isDisabled, }: PowerSearchValueEditorProps): React.JSX.Element | null;
+/**
+ * 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 declare function buildRelativeDateOptions(operatorValue: OperatorValue & {
+    type: 'date_relative';
+}, t?: TranslatorFn): {
+    value: string;
+    label: string;
+}[];
+export declare function PowerSearchValueEditor({ operatorValue, filterValue, onChange, onEnter, maxMenuItems, isDisabled, onUnstage, presentation, fieldLabel, }: PowerSearchValueEditorProps): React.JSX.Element | null;
 //# sourceMappingURL=PowerSearchValueEditor.d.ts.map

package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AA4BxD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4rBD,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,UAAU,GACX,EAAE,2BAA2B,4BA0I7B"}
+{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAoBxD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAS1C,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAC1C,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6dD;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,aAAa,GAAG;IAAC,IAAI,EAAE,eAAe,CAAA;CAAC,EACtD,CAAC,CAAC,EAAE,YAAY,GACf;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,EAAE,CAsBlC;AA+TD,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,UAAU,EACV,SAAS,EACT,YAAwB,EACxB,UAAU,GACX,EAAE,2BAA2B,4BAsJ7B"}

package/dist/PowerSearch/PowerSearchValueEditor.js

@@ -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
@@ -21,7 +24,7 @@ import { DateRangeInput } from "../DateRangeInput/index.js";
 import { resolveDateTimeRangePart } from "./resolveDateTimeRangePart.js";
 import { TimeInput } from "../TimeInput/index.js";
 import { Selector } from "../Selector/index.js";
-import { Tokenizer } from "../Tokenizer/index.js";
+import { Tokenizer } from "../Tokenizer/Tokenizer.js";
 import { Typeahead } from "../Typeahead/index.js";
 import { useLocale } from "../i18n/index.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
@@ -63,9 +66,11 @@ function StringEditor({
   onChange,
   onEnter: _onEnter,
   maxMenuItems,
-  isDisabled
+  isDisabled,
+  presentation
 }) {
   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
@@ -96,7 +101,8 @@ function StringEditor({
       },
       placeholder: t('@astryx.powersearch.valueEditor.searchPlaceholder'),
       debounceMs: 150,
-      maxMenuItems: maxMenuItems
+      maxMenuItems: maxMenuItems,
+      width: width
     });
   }
   return /*#__PURE__*/_jsx(TextInput, {
@@ -110,7 +116,8 @@ function StringEditor({
         type: 'string',
         value
       });
-    }
+    },
+    width: width
   });
 }
 function StringListEditor({
@@ -118,9 +125,12 @@ function StringListEditor({
   filterValue,
   onChange,
   maxMenuItems,
-  isDisabled
+  isDisabled,
+  presentation,
+  fieldLabel
 }) {
   const t = useComponentTranslator();
+  const isSheet = presentation === 'bottom-sheet';
   const currentValue = useMemo(() => {
     if (filterValue?.type !== 'string_list') {
       return [];
@@ -144,8 +154,12 @@ function StringListEditor({
   // Enable creatable mode when no searchSource is provided (free-text tags)
   // or when isArbitraryStringAllowed is explicitly set (#1107).
   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 /*#__PURE__*/_jsx(Tokenizer, {
-    label: t('@astryx.powersearch.valueEditor.values'),
+    label: isSheet && fieldLabel != null ? fieldLabel : t('@astryx.powersearch.valueEditor.values'),
     isLabelHidden: true,
     isDisabled: isDisabled,
     searchSource: source,
@@ -159,7 +173,11 @@ function StringListEditor({
     placeholder: t('@astryx.powersearch.valueEditor.addValuesPlaceholder'),
     debounceMs: operatorValue.searchSource ? 150 : 0,
     hasCreate: hasCreate,
-    maxMenuItems: maxMenuItems
+    maxMenuItems: maxMenuItems,
+    width: isSheet ? '100%' : undefined,
+    experimental: isSheet ? {
+      presentation: 'bottom-sheet'
+    } : undefined
   });
 }
 function useNumberEditorHandlers({
@@ -168,7 +186,9 @@ function useNumberEditorHandlers({
   max,
   isIntegerOnly,
   onChange,
-  onEnter
+  onEnter,
+  onUnstage,
+  stagesAsTyped
 }) {
   const locale = useLocale();
   const pendingDecisionRef = useRef(null);
@@ -186,14 +206,23 @@ function useNumberEditorHandlers({
     pendingDecisionRef.current = null;
   }, []);
   const handleInput = useCallback(event => {
-    pendingDecisionRef.current = resolveNumberInputCommit(event.currentTarget.value, {
+    const decision = resolveNumberInputCommit(event.currentTarget.value, {
       min,
       max,
       isIntegerOnly,
       locale,
       hasClear: false
     });
-  }, [isIntegerOnly, locale, max, min]);
+    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]);
   const handleEnter = useCallback(() => {
     const decision = pendingDecisionRef.current;
     pendingDecisionRef.current = null;
@@ -221,7 +250,9 @@ function IntegerEditor({
   filterValue,
   onChange,
   onEnter,
-  isDisabled
+  onUnstage,
+  isDisabled,
+  presentation
 }) {
   const t = useComponentTranslator();
   const currentValue = filterValue?.type === 'integer' ? filterValue.value : undefined;
@@ -231,7 +262,9 @@ function IntegerEditor({
     max: operatorValue.maxValue,
     isIntegerOnly: true,
     onChange,
-    onEnter
+    onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet'
   });
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
@@ -247,7 +280,8 @@ function IntegerEditor({
     max: operatorValue.maxValue,
     units: operatorValue.units,
     isIntegerOnly: true,
-    placeholder: t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')
+    placeholder: t('@astryx.powersearch.valueEditor.enterNumberPlaceholder'),
+    width: presentation === 'bottom-sheet' ? '100%' : undefined
   });
 }
 function FloatEditor({
@@ -255,7 +289,9 @@ function FloatEditor({
   filterValue,
   onChange,
   onEnter,
-  isDisabled
+  onUnstage,
+  isDisabled,
+  presentation
 }) {
   const t = useComponentTranslator();
   const currentValue = filterValue?.type === 'float' ? filterValue.value : undefined;
@@ -265,7 +301,9 @@ function FloatEditor({
     max: operatorValue.maxValue,
     isIntegerOnly: false,
     onChange,
-    onEnter
+    onEnter,
+    onUnstage,
+    stagesAsTyped: presentation === 'bottom-sheet'
   });
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
@@ -280,14 +318,16 @@ function FloatEditor({
     min: operatorValue.minValue,
     max: operatorValue.maxValue,
     units: operatorValue.units,
-    placeholder: t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')
+    placeholder: t('@astryx.powersearch.valueEditor.enterNumberPlaceholder'),
+    width: presentation === 'bottom-sheet' ? '100%' : undefined
   });
 }
 function TimeEditor({
   operatorValue,
   filterValue,
   onChange,
-  isDisabled
+  isDisabled,
+  presentation
 }) {
   const t = useComponentTranslator();
   const currentValue = filterValue?.type === 'time' ? filterValue.value : undefined;
@@ -305,13 +345,15 @@ function TimeEditor({
       }
     },
     min: operatorValue.minValue,
-    max: operatorValue.maxValue
+    max: operatorValue.maxValue,
+    width: presentation === 'bottom-sheet' ? '100%' : undefined
   });
 }
 function DateAbsoluteEditor({
   filterValue,
   onChange,
-  isDisabled
+  isDisabled,
+  presentation
 }) {
   const t = useComponentTranslator();
   // Convert unixSeconds to ISO date string for the date input
@@ -335,9 +377,68 @@ function DateAbsoluteEditor({
           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'
+}];
+
+/**
+ * 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, t) {
+  const result = [];
+  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,
@@ -346,40 +447,18 @@ function DateRelativeEditor({
 }) {
   const t = useComponentTranslator();
   const currentValue = filterValue?.type === 'date_relative' ? filterValue.value : undefined;
-  const options = useMemo(() => {
-    const result = [];
-    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 /*#__PURE__*/_jsx(Selector, {
     label: t('@astryx.powersearch.valueEditor.relativeDate'),
     isLabelHidden: true,
@@ -397,7 +476,8 @@ function DateRelativeEditor({
 function DateRangeEditor({
   filterValue,
   onChange,
-  isDisabled
+  isDisabled,
+  presentation
 }) {
   const t = useComponentTranslator();
   const currentValue = useMemo(() => {
@@ -448,6 +528,10 @@ 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
     })
   });
 }
@@ -525,9 +609,12 @@ function EntityListEditor({
   filterValue,
   onChange,
   maxMenuItems,
-  isDisabled
+  isDisabled,
+  presentation,
+  fieldLabel
 }) {
   const t = useComponentTranslator();
+  const isSheet = presentation === 'bottom-sheet';
   const source = useMemo(() => {
     if (operatorValue.searchSource) {
       return operatorValue.searchSource;
@@ -551,8 +638,11 @@ function EntityListEditor({
       } : undefined
     }));
   }, [filterValue]);
+
+  // Sheet presentation: the Tokenizer's own sheet, titled with the field
+  // label, as for string_list.
   return /*#__PURE__*/_jsx(Tokenizer, {
-    label: t('@astryx.powersearch.valueEditor.entities'),
+    label: isSheet && fieldLabel != null ? fieldLabel : t('@astryx.powersearch.valueEditor.entities'),
     isLabelHidden: true,
     isDisabled: isDisabled,
     searchSource: source,
@@ -576,7 +666,11 @@ function EntityListEditor({
     renderItem: operatorValue.renderItem,
     placeholder: t('@astryx.powersearch.valueEditor.searchPlaceholder'),
     debounceMs: operatorValue.searchSource ? 150 : 0,
-    maxMenuItems: maxMenuItems
+    maxMenuItems: maxMenuItems,
+    width: isSheet ? '100%' : undefined,
+    experimental: isSheet ? {
+      presentation: 'bottom-sheet'
+    } : undefined
   });
 }
 function CustomEditor({
@@ -613,7 +707,10 @@ export function PowerSearchValueEditor({
   onChange,
   onEnter,
   maxMenuItems,
-  isDisabled
+  isDisabled,
+  onUnstage,
+  presentation = 'popover',
+  fieldLabel
 }) {
   switch (operatorValue.type) {
     case 'empty':
@@ -621,6 +718,7 @@ export function PowerSearchValueEditor({
     case 'string':
       return /*#__PURE__*/_jsx(StringEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -630,6 +728,8 @@ export function PowerSearchValueEditor({
     case 'string_list':
       return /*#__PURE__*/_jsx(StringListEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
+        fieldLabel: fieldLabel,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -638,6 +738,8 @@ export function PowerSearchValueEditor({
     case 'integer':
       return /*#__PURE__*/_jsx(IntegerEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
+        onUnstage: onUnstage,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -646,6 +748,8 @@ export function PowerSearchValueEditor({
     case 'float':
       return /*#__PURE__*/_jsx(FloatEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
+        onUnstage: onUnstage,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -654,6 +758,7 @@ export function PowerSearchValueEditor({
     case 'time':
       return /*#__PURE__*/_jsx(TimeEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
@@ -661,6 +766,7 @@ export function PowerSearchValueEditor({
     case 'date_absolute':
       return /*#__PURE__*/_jsx(DateAbsoluteEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
@@ -675,6 +781,7 @@ export function PowerSearchValueEditor({
     case 'date_range':
       return /*#__PURE__*/_jsx(DateRangeEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
@@ -696,6 +803,8 @@ export function PowerSearchValueEditor({
     case 'entity_list':
       return /*#__PURE__*/_jsx(EntityListEditor, {
         isDisabled: isDisabled,
+        presentation: presentation,
+        fieldLabel: fieldLabel,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,

package/dist/PowerSearch/formatFilterValue.d.ts

@@ -10,6 +10,13 @@
 import type { OperatorValue, FilterValue } from './types.js';
 import type { InternalConfig } from './useInternalConfig.js';
 import type { Locale, TranslatorFn } from '../i18n/index.js';
+/**
+ * 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 declare function formatSharedNumber(value: number, locale: Locale, options?: Pick<Intl.NumberFormatOptions, 'useGrouping' | 'maximumFractionDigits'>): string;
 export declare function formatDateAbsolute(unixSeconds: number, locale: Locale, timezoneID?: string): string;
 /**
  * Compact date-only rendering (no time-of-day) for the token pill's inline