@algenium/blocks 1.6.0 → 1.7.0-rc.2

package/dist/index.cjs

@@ -7362,6 +7362,15 @@ function useDebouncedValue(value, delayMs) {
   }, [value, delayMs]);
   return debounced;
 }
+function useDebouncedValueStrict(value, delayMs) {
+  const [debounced, setDebounced] = React2.useState(void 0);
+  React2.useEffect(() => {
+    setDebounced(void 0);
+    const id = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(id);
+  }, [value, delayMs]);
+  return debounced;
+}
 function onlyDigits(s, max) {
   return s.replace(/\D/g, "").slice(0, max);
 }
@@ -7645,6 +7654,20 @@ function parseInitial(value) {
     country: "US"
   };
 }
+function addressSig(a) {
+  return JSON.stringify({
+    street: a.street.trim(),
+    street2: (a.street2 ?? "").trim(),
+    city: a.city.trim(),
+    state: a.state.trim().toUpperCase(),
+    zip: a.zip.replace(/\D/g, "").slice(0, 5)
+  });
+}
+function isAddressComplete(a) {
+  const zip5 = a.zip.replace(/\D/g, "").slice(0, 5);
+  const st = a.state.trim();
+  return a.street.trim().length > 0 && a.city.trim().length > 0 && /^[A-Za-z]{2}$/.test(st) && zip5.length === 5;
+}
 var inputClassName2 = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
 function USAddressInput({
   value,
@@ -7656,10 +7679,8 @@ function USAddressInput({
   disabled = false,
   largeText = false,
   className,
-  onError,
-  showAutocompleteToggle = true
+  onError
 }) {
-  const [autocompleteEnabled, setAutocompleteEnabled] = React2.useState(false);
   const [searchQuery, setSearchQuery] = React2.useState("");
   const [showSuggestions, setShowSuggestions] = React2.useState(false);
   const [suggestions, setSuggestions] = React2.useState([]);
@@ -7675,6 +7696,7 @@ function USAddressInput({
   const [uspsSuggestion, setUspsSuggestion] = React2.useState(
     null
   );
+  const [uspsVerifiedNoChange, setUspsVerifiedNoChange] = React2.useState(false);
   const searchRef = React2.useRef(null);
   const suggestionCache = React2.useRef(/* @__PURE__ */ new Map());
   const warnedRef = React2.useRef({
@@ -7683,9 +7705,13 @@ function USAddressInput({
     validate: false
   });
   const lastZipLookup = React2.useRef("");
-  const debouncedSearch = useDebouncedValue(searchQuery, 300);
+  const addressRef = React2.useRef(address);
+  addressRef.current = address;
+  const lastValidatedSigRef = React2.useRef("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 400);
   const zipDigits = address.zip.replace(/\D/g, "").slice(0, 5);
   const debouncedZip = useDebouncedValue(zipDigits, 400);
+  const debouncedAddressForValidate = useDebouncedValueStrict(address, 1200);
   const inputClass = largeText ? "text-base py-3" : "";
   const labelClass = largeText ? "text-base" : "text-sm";
   React2.useEffect(() => {
@@ -7708,11 +7734,18 @@ function USAddressInput({
       return next;
     });
   };
+  React2.useEffect(() => {
+    const sig = addressSig(addressRef.current);
+    if (sig !== lastValidatedSigRef.current) {
+      setUspsVerifiedNoChange(false);
+      setUspsSuggestion(null);
+    }
+  }, [address]);
   const allowAutocomplete = Boolean(autocomplete);
   const allowUspsValidation = Boolean(validateAddress);
   const allowZipLookup = Boolean(lookupZip);
   React2.useEffect(() => {
-    if (!allowAutocomplete || !autocompleteEnabled || !autocomplete) return;
+    if (!allowAutocomplete || !autocomplete) return;
     const q = debouncedSearch.trim();
     if (q.length < 3) {
       setSuggestions([]);
@@ -7731,6 +7764,7 @@ function USAddressInput({
     const ctrl = new AbortController();
     setLoadingAutocomplete(true);
     autocomplete.search(q, sessionToken, ctrl.signal).then((list) => {
+      if (ctrl.signal.aborted) return;
       suggestionCache.current.set(cacheKey, list);
       setSuggestions(list);
       setShowSuggestions(list.length > 0);
@@ -7747,7 +7781,6 @@ function USAddressInput({
   }, [
     debouncedSearch,
     allowAutocomplete,
-    autocompleteEnabled,
     autocomplete,
     sessionToken,
     labels.autocompleteUnavailable,
@@ -7760,6 +7793,7 @@ function USAddressInput({
     const ctrl = new AbortController();
     setLoadingZip(true);
     lookupZip(debouncedZip, ctrl.signal).then((data) => {
+      if (ctrl.signal.aborted) return;
       lastZipLookup.current = debouncedZip;
       setAddress((prev) => {
         const cityEmpty = !prev.city.trim();
@@ -7786,6 +7820,52 @@ function USAddressInput({
     labels.zipLookupFailed,
     onError
   ]);
+  React2.useEffect(() => {
+    if (!allowUspsValidation || !validateAddress || disabled) return;
+    if (debouncedAddressForValidate === void 0) return;
+    const addr = debouncedAddressForValidate;
+    if (!isAddressComplete(addr)) return;
+    const requestSig = addressSig(addr);
+    if (requestSig === lastValidatedSigRef.current) return;
+    const ctrl = new AbortController();
+    const timeoutId = window.setTimeout(() => ctrl.abort(), 8e3);
+    setLoadingValidate(true);
+    setUspsVerifiedNoChange(false);
+    setUspsSuggestion(null);
+    validateAddress(addr, ctrl.signal).then((result) => {
+      if (ctrl.signal.aborted) return;
+      if (addressSig(addressRef.current) !== requestSig) return;
+      lastValidatedSigRef.current = requestSig;
+      const std = result.standardized;
+      if (result.changed) {
+        setUspsSuggestion(std);
+        setUspsVerifiedNoChange(false);
+      } else {
+        setUspsSuggestion(null);
+        setUspsVerifiedNoChange(true);
+      }
+    }).catch(() => {
+      if (ctrl.signal.aborted) return;
+      if (!warnedRef.current.validate) {
+        onError?.(labels.uspsUnavailable);
+        warnedRef.current.validate = true;
+      }
+    }).finally(() => {
+      window.clearTimeout(timeoutId);
+      setLoadingValidate(false);
+    });
+    return () => {
+      window.clearTimeout(timeoutId);
+      ctrl.abort();
+    };
+  }, [
+    debouncedAddressForValidate,
+    allowUspsValidation,
+    validateAddress,
+    disabled,
+    labels.uspsUnavailable,
+    onError
+  ]);
   const handleSelectSuggestion = async (row) => {
     if (!autocomplete) return;
     try {
@@ -7802,72 +7882,27 @@ function USAddressInput({
       setShowSuggestions(false);
       setSearchQuery("");
       setUspsSuggestion(null);
+      lastValidatedSigRef.current = "";
+      setUspsVerifiedNoChange(false);
     } catch {
       onError?.(labels.placeLookupFailed);
     }
   };
-  const runUspsValidate = async () => {
-    if (!allowUspsValidation || !validateAddress || disabled) return;
-    setLoadingValidate(true);
-    setUspsSuggestion(null);
-    try {
-      const result = await validateAddress(address, AbortSignal.timeout(8e3));
-      const std = result.standardized;
-      if (result.changed) {
-        setUspsSuggestion(std);
-      }
-    } catch {
-      if (!warnedRef.current.validate) {
-        onError?.(labels.uspsUnavailable);
-        warnedRef.current.validate = true;
-      }
-    } finally {
-      setLoadingValidate(false);
-    }
-  };
   const applyUspsSuggestion = () => {
     if (!uspsSuggestion) return;
     setAddress(uspsSuggestion);
     onChange(uspsSuggestion);
     setUspsSuggestion(null);
+    lastValidatedSigRef.current = addressSig(uspsSuggestion);
+    setUspsVerifiedNoChange(true);
+  };
+  const dismissUspsSuggestion = () => {
+    setUspsSuggestion(null);
+    lastValidatedSigRef.current = addressSig(addressRef.current);
+    setUspsVerifiedNoChange(true);
   };
-  const showAutocompleteUi = allowAutocomplete && showAutocompleteToggle && autocompleteEnabled;
-  const toggleTitle = labels.autocompleteTitle ?? labels.searchPlaceholder;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), children: [
-    allowAutocomplete && showAutocompleteToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-lg border bg-muted/50 p-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium", labelClass), children: toggleTitle }),
-          labels.autocompleteDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: labels.autocompleteDescription }) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": autocompleteEnabled,
-          disabled,
-          onClick: () => setAutocompleteEnabled((v) => !v),
-          className: cn(
-            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-            autocompleteEnabled ? "bg-primary" : "bg-input",
-            disabled && "cursor-not-allowed opacity-50"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "pointer-events-none block size-5 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform",
-                autocompleteEnabled && "translate-x-5"
-              )
-            }
-          )
-        }
-      )
-    ] }),
-    showAutocompleteUi && autocomplete && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: searchRef, className: "relative", children: [
+    allowAutocomplete && autocomplete && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: searchRef, className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7877,7 +7912,8 @@ function USAddressInput({
             onChange: (e) => setSearchQuery(e.target.value),
             placeholder: labels.searchPlaceholder,
             disabled,
-            className: cn(inputClassName2, "pl-9 pr-9", inputClass)
+            className: cn(inputClassName2, "pl-9 pr-9", inputClass),
+            "aria-label": labels.searchPlaceholder
           }
         ),
         loadingAutocomplete && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute right-10 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" }),
@@ -7905,29 +7941,6 @@ function USAddressInput({
         suggestion.placeId
       )) })
     ] }),
-    allowUspsValidation && uspsSuggestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: labels.uspsSuggested }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: [
-        uspsSuggestion.street,
-        uspsSuggestion.street2,
-        uspsSuggestion.city,
-        uspsSuggestion.state,
-        uspsSuggestion.zip
-      ].filter(Boolean).join(", ") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: applyUspsSuggestion, children: labels.uspsUseSuggestion }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "outline",
-            onClick: () => setUspsSuggestion(null),
-            children: labels.uspsKeepMine
-          }
-        )
-      ] })
-    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -8075,22 +8088,46 @@ function USAddressInput({
             }
           )
         ] })
-      ] }),
-      allowUspsValidation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
+      ] })
+    ] }),
+    allowUspsValidation && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          type: "button",
-          variant: "secondary",
-          size: "sm",
-          disabled: disabled || loadingValidate,
-          onClick: () => void runUspsValidate(),
-          className: "gap-2",
+          className: "flex min-h-7 items-center gap-2 text-xs text-muted-foreground",
+          "aria-live": "polite",
           children: loadingValidate ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
-            labels.uspsValidating
-          ] }) : labels.uspsValidate
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.uspsValidating })
+          ] }) : uspsVerifiedNoChange && !uspsSuggestion ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.uspsVerified })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-none opacity-0", "aria-hidden": true, children: "\xA0" })
         }
-      ) })
+      ),
+      uspsSuggestion ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/30", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: labels.uspsSuggested }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: [
+          uspsSuggestion.street,
+          uspsSuggestion.street2,
+          uspsSuggestion.city,
+          uspsSuggestion.state,
+          uspsSuggestion.zip
+        ].filter(Boolean).join(", ") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: applyUspsSuggestion, children: labels.uspsUseSuggestion }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              onClick: dismissUspsSuggestion,
+              children: labels.uspsKeepMine
+            }
+          )
+        ] })
+      ] }) : null
     ] })
   ] });
 }
@@ -8181,6 +8218,7 @@ exports.useCalendarContext = useCalendarContext;
 exports.useChatRoom = useChatRoom;
 exports.useChatSidebar = useChatSidebar;
 exports.useDebouncedValue = useDebouncedValue;
+exports.useDebouncedValueStrict = useDebouncedValueStrict;
 exports.useEnvironmentContext = useEnvironmentContext;
 exports.useLanguageContext = useLanguageContext;
 exports.useNotificationsContext = useNotificationsContext;