@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

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, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, 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,7 +22,6 @@ 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";
@@ -32,7 +31,7 @@ import { usePowerSearchSource } from "./usePowerSearchSource.js";
 import { formatFilterValue } from "./formatFilterValue.js";
 import { PowerSearchEditPopover } from "./PowerSearchEditPopover.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // =============================================================================
 // Icon mapping for typeahead entries
 // =============================================================================
@@ -81,35 +80,35 @@ function PowerSearchTokenValue({
     case 'empty':
       return null;
     case 'string':
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      }, void 0, false);
+      });
     case 'integer':
     case 'float':
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      }, void 0, false);
+      });
     case 'enum':
       if (operatorValue.type === 'enum') {
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(getEnumLabel(operatorValue.values, filterValue.value), maxLength)
-        }, void 0, false);
+        });
       }
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      }, void 0, false);
+      });
     case 'string_list':
       {
         const items = filterValue.value;
@@ -117,28 +116,28 @@ function PowerSearchTokenValue({
           return null;
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsx("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__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsxs("span", {
             ...{
               className: "x1lvx875"
             },
             children: [items.length, " items"]
-          }, void 0, true);
+          });
         }
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: items.join(', ')
-        }, void 0, false);
+        });
       }
     case 'enum_list':
       {
@@ -149,43 +148,43 @@ function PowerSearchTokenValue({
         if (operatorValue.type === 'enum_list') {
           const labels = items.map(v => getEnumLabel(operatorValue.values, v));
           if (labels.length === 1) {
-            return /*#__PURE__*/_jsxDEV("span", {
+            return /*#__PURE__*/_jsx("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__*/_jsxDEV("span", {
+            return /*#__PURE__*/_jsxs("span", {
               ...{
                 className: "x1lvx875"
               },
               children: [labels.length, " items"]
-            }, void 0, true);
+            });
           }
-          return /*#__PURE__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsx("span", {
             ...{
               className: "x1lvx875"
             },
             children: labels.join(', ')
-          }, void 0, false);
+          });
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsx("span", {
             ...{
               className: "x1lvx875"
             },
             children: truncateString(items[0], maxLength)
-          }, void 0, false);
+          });
         }
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsxs("span", {
           ...{
             className: "x1lvx875"
           },
           children: [items.length, " items"]
-        }, void 0, true);
+        });
       }
     case 'entity_list':
       {
@@ -194,36 +193,36 @@ function PowerSearchTokenValue({
           return null;
         }
         if (entities.length === 1) {
-          return /*#__PURE__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsx("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__*/_jsxDEV("span", {
+          return /*#__PURE__*/_jsxs("span", {
             ...{
               className: "x1lvx875"
             },
             children: [entities.length, " items"]
-          }, void 0, true);
+          });
         }
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: entities.map(e => e.label).join(', ')
-        }, void 0, false);
+        });
       }
     case 'time':
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      }, void 0, false);
+      });
     case 'date_absolute':
       {
         const date = new Date(filterValue.unixSeconds * 1000);
@@ -232,51 +231,51 @@ function PowerSearchTokenValue({
           month: 'short',
           day: 'numeric'
         }).format(date);
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(formatted, maxLength)
-        }, void 0, false);
+        });
       }
     case 'date_relative':
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: truncateString(filterValue.value, maxLength)
-      }, void 0, false);
+      });
     case 'date_range':
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: "date range"
-      }, void 0, false);
+      });
     case 'custom':
       if (operatorValue.type === 'custom') {
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: truncateString(operatorValue.getString(filterValue.value), maxLength)
-        }, void 0, false);
+        });
       }
-      return /*#__PURE__*/_jsxDEV("span", {
+      return /*#__PURE__*/_jsx("span", {
         ...{
           className: "x1lvx875"
         },
         children: filterValue.value
-      }, void 0, false);
+      });
     case 'nested':
       {
         const count = filterValue.value.length;
-        return /*#__PURE__*/_jsxDEV("span", {
+        return /*#__PURE__*/_jsx("span", {
           ...{
             className: "x1lvx875"
           },
           children: count === 1 ? '1 filter' : `${count} filters`
-        }, void 0, false);
+        });
       }
     default:
       return null;
@@ -582,7 +581,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__*/_jsxDEV(TokenOverride, {
+      return /*#__PURE__*/_jsx(TokenOverride, {
         config: configProp,
         filter: filter,
         field: field,
@@ -591,7 +590,7 @@ export function PowerSearch({
         onClick: handleClick,
         onRemove: handleRemove,
         isDisabled: isDisabled
-      }, void 0, false);
+      });
     }
 
     // Default token rendering
@@ -599,23 +598,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__*/_jsxDEV(PowerSearchTokenValue, {
+    const valueContent = operator && filter ? /*#__PURE__*/_jsx(PowerSearchTokenValue, {
       operatorValue: operator.value,
       filterValue: filter.value,
       maxLength: adjustedMaxLength
-    }, void 0, false) : undefined;
+    }) : 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__*/_jsxDEV(Avatar, {
+      tokenIcon = /*#__PURE__*/_jsx(Avatar, {
         src: entity.photo,
         name: entity.label,
         size: 16
-      }, void 0, false);
+      });
     }
-    return /*#__PURE__*/_jsxDEV(Token, {
+    return /*#__PURE__*/_jsx(Token, {
       label: tokenLabel,
       size: size,
       icon: tokenIcon,
@@ -626,16 +625,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__*/_jsxDEV(TypeaheadItem, {
+      return /*#__PURE__*/_jsx(TypeaheadItem, {
         item: item
-      }, void 0, false);
+      });
     }
     const field = config.getField(auxData.fieldKey);
     let icon = null;
@@ -644,17 +643,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__*/_jsxDEV(Icon, {
+      icon = /*#__PURE__*/_jsx(Icon, {
         icon: iconName,
         size: "sm",
         color: "secondary"
-      }, void 0, false);
+      });
     }
-    return /*#__PURE__*/_jsxDEV(TypeaheadItem, {
+    return /*#__PURE__*/_jsx(TypeaheadItem, {
       item: item,
       icon: icon,
       description: field?.description
-    }, void 0, false);
+    });
   }, [config]);
 
   // The partial filter for the popover
@@ -677,7 +676,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__*/_jsxDEV(EditorOverride, {
+      return /*#__PURE__*/_jsx(EditorOverride, {
         config: configProp,
         filter: popoverPartialFilter,
         mode: mode,
@@ -685,9 +684,9 @@ export function PowerSearch({
         onCancel: handlePopoverCancel,
         saveButtonLabel: popoverSaveButtonLabel,
         isReadOnly: isReadOnly
-      }, popoverKey, false);
+      }, popoverKey);
     }
-    return /*#__PURE__*/_jsxDEV(PowerSearchEditPopover, {
+    return /*#__PURE__*/_jsx(PowerSearchEditPopover, {
       config: config,
       filter: popoverPartialFilter,
       mode: mode,
@@ -695,59 +694,42 @@ export function PowerSearch({
       onCancel: handlePopoverCancel,
       saveButtonLabel: popoverSaveButtonLabel,
       isReadOnly: isReadOnly
-    }, popoverKey, false);
+    }, popoverKey);
   }, [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(() => {
-    const resultCountNode = resultCountText != null ? /*#__PURE__*/_jsxDEV("span", {
-      ...{
-        className: "x141an7d x1ltkj2j xv1l7n4 xuxw1ft"
-      },
-      children: resultCountText
-    }, void 0, false) : null;
+    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
+        });
+      }
+    }
     if (resultCountNode && endContent) {
-      return /*#__PURE__*/_jsxDEV(_Fragment, {
+      return /*#__PURE__*/_jsxs(_Fragment, {
         children: [resultCountNode, endContent]
-      }, void 0, true);
+      });
     }
     return resultCountNode || endContent || undefined;
-  }, [resultCountText, endContent]);
-  return /*#__PURE__*/_jsxDEV(_Fragment, {
-    children: [/*#__PURE__*/_jsxDEV("div", {
+  }, [resultCount, endContent]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
       ref: mergeRefs(ref, popover.triggerRef),
       ...themeProps('power-search'),
-      children: /*#__PURE__*/_jsxDEV(Tokenizer, {
+      children: /*#__PURE__*/_jsx(Tokenizer, {
         handleRef: tokenizerRef,
         label: label,
         isLabelHidden: isLabelHidden,
@@ -774,12 +756,12 @@ export function PowerSearch({
         className: className,
         style: style,
         "data-testid": testId
-      }, void 0, false)
-    }, void 0, false), popover.render(popoverContent, {
+      })
+    }), popover.render(popoverContent, {
       placement: 'below',
       alignment: 'start',
       xstyle: [popoverLayerStyles.layer, layerAnimations.below]
     })]
-  }, void 0, true);
+  });
 }
 PowerSearch.displayName = 'PowerSearch';