@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/PowerSearch/PowerSearch.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/PowerSearch/index.ts
  * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
-import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Tokenizer } from "../Tokenizer/index.js";
 import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
@@ -22,6 +22,7 @@ import { Avatar } from "../Avatar/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { Icon } from "../Icon/index.js";
 import { usePopover } from "../Popover/usePopover.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, colorVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
 import { mergeRefs } from "../utils/index.js";
@@ -31,7 +32,7 @@ import { usePowerSearchSource } from "./usePowerSearchSource.js";
 import { formatFilterValue } from "./formatFilterValue.js";
 import { PowerSearchEditPopover } from "./PowerSearchEditPopover.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 // =============================================================================
 // Icon mapping for typeahead entries
 // =============================================================================
@@ -80,35 +81,35 @@ function PowerSearchTokenValue({
     case 'empty':
       return null;
     case 'string':
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      });
+      }, void 0, false);
     case 'integer':
     case 'float':
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      });
+      }, void 0, false);
     case 'enum':
       if (operatorValue.type === 'enum') {
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(getEnumLabel(operatorValue.values, filterValue.value), maxLength)
-        });
+        }, void 0, false);
       }
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      });
+      }, void 0, false);
     case 'string_list':
       {
         const items = filterValue.value;
@@ -116,28 +117,28 @@ function PowerSearchTokenValue({
           return null;
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: truncateString(items[0], maxLength)
-          });
+          }, void 0, false);
         }
         const totalLength = items.reduce((sum, s) => sum + s.length, 0);
         if (totalLength > maxLength) {
-          return /*#__PURE__*/_jsxs("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: [items.length, " items"]
-          });
+          }, void 0, true);
         }
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: items.join(', ')
-        });
+        }, void 0, false);
       }
     case 'enum_list':
       {
@@ -148,43 +149,43 @@ function PowerSearchTokenValue({
         if (operatorValue.type === 'enum_list') {
           const labels = items.map(v => getEnumLabel(operatorValue.values, v));
           if (labels.length === 1) {
-            return /*#__PURE__*/_jsx("span", {
+            return /*#__PURE__*/_jsxDEV("span", {
               ...{
                 className: "x1lvx875"
               },
               children: truncateString(labels[0], maxLength)
-            });
+            }, void 0, false);
           }
           const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
           if (totalLength > maxLength) {
-            return /*#__PURE__*/_jsxs("span", {
+            return /*#__PURE__*/_jsxDEV("span", {
               ...{
                 className: "x1lvx875"
               },
               children: [labels.length, " items"]
-            });
+            }, void 0, true);
           }
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: labels.join(', ')
-          });
+          }, void 0, false);
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: truncateString(items[0], maxLength)
-          });
+          }, void 0, false);
         }
-        return /*#__PURE__*/_jsxs("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: [items.length, " items"]
-        });
+        }, void 0, true);
       }
     case 'entity_list':
       {
@@ -193,36 +194,36 @@ function PowerSearchTokenValue({
           return null;
         }
         if (entities.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: truncateString(entities[0].label, maxLength)
-          });
+          }, void 0, false);
         }
         const totalLength = entities.reduce((sum, e) => sum + e.label.length, 0);
         if (totalLength > maxLength) {
-          return /*#__PURE__*/_jsxs("span", {
+          return /*#__PURE__*/_jsxDEV("span", {
             ...{
               className: "x1lvx875"
             },
             children: [entities.length, " items"]
-          });
+          }, void 0, true);
         }
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: entities.map(e => e.label).join(', ')
-        });
+        }, void 0, false);
       }
     case 'time':
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      });
+      }, void 0, false);
     case 'date_absolute':
       {
         const date = new Date(filterValue.unixSeconds * 1000);
@@ -231,51 +232,51 @@ function PowerSearchTokenValue({
           month: 'short',
           day: 'numeric'
         }).format(date);
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(formatted, maxLength)
-        });
+        }, void 0, false);
       }
     case 'date_relative':
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      });
+      }, void 0, false);
     case 'date_range':
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: "date range"
-      });
+      }, void 0, false);
     case 'custom':
       if (operatorValue.type === 'custom') {
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(operatorValue.getString(filterValue.value), maxLength)
-        });
+        }, void 0, false);
       }
-      return /*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      });
+      }, void 0, false);
     case 'nested':
       {
         const count = filterValue.value.length;
-        return /*#__PURE__*/_jsx("span", {
+        return /*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x1lvx875"
           },
           children: count === 1 ? '1 filter' : `${count} filters`
-        });
+        }, void 0, false);
       }
     default:
       return null;
@@ -581,7 +582,7 @@ export function PowerSearch({
     // Check for full Token override
     const TokenOverride = operator ? componentOverrides?.[operator.value.type]?.Token : undefined;
     if (TokenOverride && filter && field && operator) {
-      return /*#__PURE__*/_jsx(TokenOverride, {
+      return /*#__PURE__*/_jsxDEV(TokenOverride, {
         config: configProp,
         filter: filter,
         field: field,
@@ -590,7 +591,7 @@ export function PowerSearch({
         onClick: handleClick,
         onRemove: handleRemove,
         isDisabled: isDisabled
-      });
+      }, void 0, false);
     }
 
     // Default token rendering
@@ -598,23 +599,23 @@ export function PowerSearch({
     const operatorLabel = operator?.label ?? '';
     const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
     const adjustedMaxLength = Math.max(maxTokenLength - fieldLabel.length - operatorLabel.length, 10);
-    const valueContent = operator && filter ? /*#__PURE__*/_jsx(PowerSearchTokenValue, {
+    const valueContent = operator && filter ? /*#__PURE__*/_jsxDEV(PowerSearchTokenValue, {
       operatorValue: operator.value,
       filterValue: filter.value,
       maxLength: adjustedMaxLength
-    }) : undefined;
+    }, void 0, false) : undefined;
 
     // Show entity photo as token icon for single-entity filters
     let tokenIcon;
     if (filter?.value.type === 'entity_list' && filter.value.value.length === 1 && filter.value.value[0].photo) {
       const entity = filter.value.value[0];
-      tokenIcon = /*#__PURE__*/_jsx(Avatar, {
+      tokenIcon = /*#__PURE__*/_jsxDEV(Avatar, {
         src: entity.photo,
         name: entity.label,
         size: 16
-      });
+      }, void 0, false);
     }
-    return /*#__PURE__*/_jsx(Token, {
+    return /*#__PURE__*/_jsxDEV(Token, {
       label: tokenLabel,
       size: size,
       icon: tokenIcon,
@@ -625,16 +626,16 @@ export function PowerSearch({
       } : undefined,
       onRemove: handleRemove,
       isDisabled: isDisabled
-    });
+    }, void 0, false);
   }, [filters, config, configProp, maxTokenLength, size, isReadOnly, isDisabled, handleTokenClick, componentOverrides]);
 
   // Custom typeahead item renderer — adds field icon and description
   const renderItem = useCallback(item => {
     const auxData = item.auxiliaryData;
     if (!auxData) {
-      return /*#__PURE__*/_jsx(TypeaheadItem, {
+      return /*#__PURE__*/_jsxDEV(TypeaheadItem, {
         item: item
-      });
+      }, void 0, false);
     }
     const field = config.getField(auxData.fieldKey);
     let icon = null;
@@ -643,17 +644,17 @@ export function PowerSearch({
     } else if (field) {
       const operator = auxData.operatorKey ? config.getOperator(auxData.fieldKey, auxData.operatorKey) : config.getDefaultOperator(auxData.fieldKey);
       const iconName = OPERATOR_VALUE_TYPE_TO_ICON[operator?.value.type ?? ''] ?? 'search';
-      icon = /*#__PURE__*/_jsx(Icon, {
+      icon = /*#__PURE__*/_jsxDEV(Icon, {
         icon: iconName,
         size: "sm",
         color: "secondary"
-      });
+      }, void 0, false);
     }
-    return /*#__PURE__*/_jsx(TypeaheadItem, {
+    return /*#__PURE__*/_jsxDEV(TypeaheadItem, {
       item: item,
       icon: icon,
       description: field?.description
-    });
+    }, void 0, false);
   }, [config]);
 
   // The partial filter for the popover
@@ -676,7 +677,7 @@ export function PowerSearch({
     const mode = popoverState.type === 'editing' ? 'edit' : 'create';
     const popoverKey = popoverState.type === 'editing' ? `edit-${popoverState.filterIndex}-${popoverPartialFilter.field}` : `add-${popoverPartialFilter.field}`;
     if (EditorOverride) {
-      return /*#__PURE__*/_jsx(EditorOverride, {
+      return /*#__PURE__*/_jsxDEV(EditorOverride, {
         config: configProp,
         filter: popoverPartialFilter,
         mode: mode,
@@ -684,9 +685,9 @@ export function PowerSearch({
         onCancel: handlePopoverCancel,
         saveButtonLabel: popoverSaveButtonLabel,
         isReadOnly: isReadOnly
-      }, popoverKey);
+      }, popoverKey, false);
     }
-    return /*#__PURE__*/_jsx(PowerSearchEditPopover, {
+    return /*#__PURE__*/_jsxDEV(PowerSearchEditPopover, {
       config: config,
       filter: popoverPartialFilter,
       mode: mode,
@@ -694,42 +695,59 @@ export function PowerSearch({
       onCancel: handlePopoverCancel,
       saveButtonLabel: popoverSaveButtonLabel,
       isReadOnly: isReadOnly
-    }, popoverKey);
+    }, popoverKey, false);
   }, [popoverPartialFilter, popoverState, EditorOverride, configProp, config, handlePopoverSave, handlePopoverCancel, popoverSaveButtonLabel, isReadOnly]);
 
+  // Plain-text form of the result count, shared by the visible label and the
+  // screen-reader announcement so the two never drift.
+  const resultCountText = useMemo(() => {
+    if (resultCount == null) {
+      return null;
+    }
+    if (typeof resultCount === 'number') {
+      const formatted = new Intl.NumberFormat().format(resultCount);
+      return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
+    }
+    return resultCount;
+  }, [resultCount]);
+
+  // Announce result-count changes to screen readers through a polite live
+  // region, mirroring the way Typeahead announces its dropdown result count.
+  // The count is otherwise only shown visually and stays silent to assistive
+  // tech. Skip the first run so the count already present on mount isn't
+  // announced unprompted — only user-driven changes are spoken.
+  const announce = useAnnounce();
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    if (resultCountText != null) {
+      announce(resultCountText);
+    }
+  }, [resultCountText, announce]);
+
   // Build combined endContent from resultCount + endContent props
   const combinedEndContent = useMemo(() => {
-    let resultCountNode = null;
-    if (resultCount != null) {
-      if (typeof resultCount === 'number') {
-        const formatted = new Intl.NumberFormat().format(resultCount);
-        resultCountNode = /*#__PURE__*/_jsxs("span", {
-          ...{
-            className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
-          },
-          children: [formatted, " ", resultCount === 1 ? 'result' : 'results']
-        });
-      } else {
-        resultCountNode = /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
-          },
-          children: resultCount
-        });
-      }
-    }
+    const resultCountNode = resultCountText != null ? /*#__PURE__*/_jsxDEV("span", {
+      ...{
+        className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
+      },
+      children: resultCountText
+    }, void 0, false) : null;
     if (resultCountNode && endContent) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
+      return /*#__PURE__*/_jsxDEV(_Fragment, {
         children: [resultCountNode, endContent]
-      });
+      }, void 0, true);
     }
     return resultCountNode || endContent || undefined;
-  }, [resultCount, endContent]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
+  }, [resultCountText, endContent]);
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: mergeRefs(ref, popover.triggerRef),
       ...themeProps('power-search'),
-      children: /*#__PURE__*/_jsx(Tokenizer, {
+      children: /*#__PURE__*/_jsxDEV(Tokenizer, {
         handleRef: tokenizerRef,
         label: label,
         isLabelHidden: isLabelHidden,
@@ -756,12 +774,12 @@ export function PowerSearch({
         className: className,
         style: style,
         "data-testid": testId
-      })
-    }), popover.render(popoverContent, {
+      }, void 0, false)
+    }, void 0, false), popover.render(popoverContent, {
       placement: 'below',
       alignment: 'start',
       xstyle: [popoverLayerStyles.layer, layerAnimations.below]
     })]
-  });
+  }, void 0, true);
 }
 PowerSearch.displayName = 'PowerSearch';