@astryxdesign/core 0.7.7 → 0.7.8-canary.07ee4b5

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:
@@ -59,6 +60,12 @@ const styles = stylex.create({
   chipRow: {
     flexWrap: {default: 'nowrap', [CHIP_ROW_COLLAPSE]: 'wrap'},
   },
+  // A date-and-time control is two inputs wide. Beside the selectors it
+  // shrinks the field selector to nothing. The row wraps, so the control
+  // gets its own line.
+  chipRowWrapped: {
+    flexWrap: 'wrap',
+  },
   footer: {
     padding: spacingVars['--spacing-3'],
     paddingTop: 0,
@@ -79,6 +86,9 @@ const styles = stylex.create({
     flexGrow: 2,
     minWidth: 0,
   },
+  valueEditorFullWidth: {
+    flexBasis: '100%',
+  },
   // Nested editor styles
   nestedRootLabel: {
     fontSize: typeScaleVars['--text-label-size'],
@@ -117,6 +127,7 @@ export interface PowerSearchEditPopoverProps {
   saveButtonLabel?: string;
   /** Max suggestions in string and entity value typeaheads. */
   maxMenuItems?: number;
+  timezoneID?: string;
   /** Whether the filter is read-only. */
   isReadOnly?: boolean;
 }
@@ -260,6 +271,7 @@ interface NestedSubFilterRowProps {
   subFilter: EditablePartialFilter;
   onChange: (subFilter: EditablePartialFilter) => void;
   maxMenuItems?: number;
+  timezoneID?: string;
   isReadOnly: boolean;
 }
 
@@ -268,6 +280,7 @@ function NestedSubFilterRow({
   subFilter,
   onChange,
   maxMenuItems,
+  timezoneID,
   isReadOnly,
 }: NestedSubFilterRowProps) {
   const t = useComponentTranslator();
@@ -372,6 +385,7 @@ function NestedSubFilterRow({
             onChange={handleValueChange}
             config={config}
             maxMenuItems={maxMenuItems}
+            timezoneID={timezoneID}
             isDisabled={isReadOnly}
           />
         </div>
@@ -384,24 +398,44 @@ function NestedSubFilterRow({
 // Nested editor
 // =============================================================================
 
-interface NestedEditorProps {
+export interface NestedEditorProps {
   config: InternalConfig;
   partialFilter: PartialFilter;
   operatorOptions: {value: string; label: string}[];
   onOperatorChange: (operatorKey: string) => void;
   onPartialFilterChange: (filter: PartialFilter) => void;
   maxMenuItems?: number;
+  timezoneID?: string;
   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,
   onOperatorChange,
   onPartialFilterChange,
   maxMenuItems,
+  timezoneID,
   isReadOnly,
+  xstyle,
+  hasRootOperatorPicker = true,
 }: NestedEditorProps) {
   const t = useComponentTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
@@ -523,6 +557,7 @@ function NestedEditor({
               subFilter={sf}
               onChange={updated => handleUpdate(itemPath, updated)}
               maxMenuItems={maxMenuItems}
+              timezoneID={timezoneID}
               isReadOnly={isReadOnly}
             />
           ),
@@ -550,6 +585,7 @@ function NestedEditor({
             subFilter={sf}
             onChange={updated => handleUpdate(itemPath, updated)}
             maxMenuItems={maxMenuItems}
+            timezoneID={timezoneID}
             isReadOnly={isReadOnly}
           />
         ),
@@ -587,7 +623,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 +636,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 +653,7 @@ function NestedEditor({
     },
   ];
 
-  return <TreeList items={items} density="balanced" />;
+  return <TreeList items={items} density="balanced" xstyle={xstyle} />;
 }
 
 // =============================================================================
@@ -629,7 +668,10 @@ function valueEditorKey(filter: {field: string; operator?: string}): string {
 
 // Keyed on field + operator, so this also mounts on a field switch, not just
 // when the popover opens; the focus handoff below runs for both.
-function ValueEditorCell(props: PowerSearchValueEditorProps) {
+function ValueEditorCell({
+  isFullWidth = false,
+  ...props
+}: PowerSearchValueEditorProps & {isFullWidth?: boolean}) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -647,7 +689,12 @@ function ValueEditorCell(props: PowerSearchValueEditorProps) {
   }, []);
 
   return (
-    <div ref={ref} {...stylex.props(styles.valueEditor)}>
+    <div
+      ref={ref}
+      {...stylex.props(
+        styles.valueEditor,
+        isFullWidth && styles.valueEditorFullWidth,
+      )}>
       <PowerSearchValueEditor {...props} />
     </div>
   );
@@ -665,6 +712,7 @@ export function PowerSearchEditPopover({
   onCancel,
   saveButtonLabel: saveButtonLabelFromProps,
   maxMenuItems,
+  timezoneID,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
   const t = useComponentTranslator();
@@ -818,6 +866,9 @@ export function PowerSearchEditPopover({
 
   const operatorValue: OperatorValue | undefined = currentOperator?.value;
   const isEmptyType = operatorValue?.type === 'empty';
+  const hasDateTimeValue =
+    operatorValue?.type === 'date_absolute' &&
+    operatorValue.isDateOnly === false;
   const isNestedType = operatorValue?.type === 'nested';
 
   const showOperatorSelector = operatorOptions.length > 1 || !isEmptyType;
@@ -848,6 +899,7 @@ export function PowerSearchEditPopover({
               onOperatorChange={handleOperatorChange}
               onPartialFilterChange={setPartialFilter}
               maxMenuItems={maxMenuItems}
+              timezoneID={timezoneID}
               isReadOnly={isReadOnly}
             />
           </VStack>
@@ -888,7 +940,9 @@ export function PowerSearchEditPopover({
   return (
     <div {...stylex.props(styles.container)} onKeyDown={handleKeyDown}>
       <div {...stylex.props(styles.content)}>
-        <HStack gap={2} xstyle={styles.chipRow}>
+        <HStack
+          gap={2}
+          xstyle={[styles.chipRow, hasDateTimeValue && styles.chipRowWrapped]}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
               label={t('@astryx.powersearch.editor.field')}
@@ -916,12 +970,14 @@ export function PowerSearchEditPopover({
           {operatorValue && !isEmptyType && (
             <ValueEditorCell
               key={valueEditorKey(partialFilter)}
+              isFullWidth={hasDateTimeValue}
               operatorValue={operatorValue}
               filterValue={partialFilter.value}
               onChange={handleValueChange}
               onEnter={handleSave}
               config={config}
               maxMenuItems={maxMenuItems}
+              timezoneID={timezoneID}
               isDisabled={isReadOnly}
             />
           )}

package/src/PowerSearch/PowerSearchFilterEditor.tsx

@@ -30,6 +30,7 @@ export function PowerSearchFilterEditor({
   onCancel,
   saveButtonLabel,
   isReadOnly,
+  timezoneID,
 }: PowerSearchEditorProps) {
   const config = useInternalConfig(configProp);
 
@@ -43,6 +44,7 @@ export function PowerSearchFilterEditor({
       onCancel={onCancel}
       saveButtonLabel={saveButtonLabel}
       isReadOnly={isReadOnly}
+      timezoneID={timezoneID}
     />
   );
 }

package/src/PowerSearch/PowerSearchToken.tsx

@@ -42,6 +42,7 @@ export function PowerSearchToken({
   onClick,
   onRemove,
   isDisabled,
+  timezoneID,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
   const t = useComponentTranslator();
@@ -66,6 +67,7 @@ export function PowerSearchToken({
     adjustedMaxLength,
     t,
     locale,
+    timezoneID,
   );
 
   const valueContent = valueStr ? (