@usefillo/react 0.5.2 → 0.5.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
-import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, FormTheme, FilloError, CodeForm } from '@usefillo/core';
+import { FormSchema, FilloClient, ResponseData, FieldValue, FormPage, Block, FormStatus, FieldKind, Field, CustomField, FormTheme, FilloError, CodeForm } from '@usefillo/core';
 export { CodeForm, Field, FieldValue, FileValue, FilloClient, FilloError, FormSchema, FormStatus, FormTheme, ProvisionWorkspaceResult, PublishedForm, ResponseData, createClient, defineForm, provisionWorkspace } from '@usefillo/core';
 
 /**
@@ -47,14 +47,25 @@ interface FieldComponentProps<F extends Field = Field> {
     api: FilloApi;
     ids?: FilloFieldIds;
 }
-/** Per-kind component overrides — swap any built-in field for your own. */
-type FieldComponents = Partial<Record<FieldKind, ComponentType<FieldComponentProps>>>;
+/**
+ * The Field variant carrying a given kind. Some variants share a union `kind`
+ * (ChoiceField is "select" | "multi_select" | "dropdown"), so `Extract` would
+ * collapse to `never` — distribute over the union and keep the matching member.
+ */
+type FieldOfKind<K extends FieldKind> = Field extends infer V ? V extends Field ? K extends V["kind"] ? V : never : never : never;
+/**
+ * Per-kind component overrides — swap any built-in field for your own. Each
+ * kind's `field` is narrowed to its variant, so an override reads it cast-free.
+ */
+type FieldComponents = {
+    [K in FieldKind]?: ComponentType<FieldComponentProps<FieldOfKind<K>>>;
+};
 /**
  * Renderers for your own field kinds, keyed by a custom field's `component`.
  * A block `{ kind: "custom", component: "color", config: {...} }` renders
  * `customComponents.color`. The component reads `field.config` for options.
  */
-type CustomComponents = Record<string, ComponentType<FieldComponentProps>>;
+type CustomComponents = Record<string, ComponentType<FieldComponentProps<CustomField>>>;
 
 interface FilloFormBaseProps {
     theme?: FormTheme;

package/dist/index.js

@@ -138,6 +138,7 @@ import { memo, useEffect as useEffect6, useState as useState5 } from "react";
 import {
   PHONE_COUNTRIES,
   countryByIso,
+  countryByTimeZone,
   digitsOnly,
   flagEmoji,
   formatNational,
@@ -152,17 +153,58 @@ function localeCountry() {
   const region = tag.split("-")[1];
   return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
 }
+function browserTimeZone() {
+  if (typeof Intl === "undefined") return void 0;
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return typeof timeZone === "string" && timeZone ? timeZone : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function nationalFor(stored, country) {
   const digits = digitsOnly(stored);
   return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
 }
+var PHONE_POPOVER_VIEWPORT_GAP = 8;
+function positionPhonePopover(anchor, popover) {
+  if (!anchor || !popover || typeof window === "undefined") return "below";
+  const gap = PHONE_POPOVER_VIEWPORT_GAP;
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const anchorRect = anchor.getBoundingClientRect();
+  const spaceBelow = Math.max(0, viewportHeight - anchorRect.bottom - gap);
+  const spaceAbove = Math.max(0, anchorRect.top - gap);
+  const placement = spaceBelow < popover.scrollHeight && spaceAbove > spaceBelow ? "above" : "below";
+  const availableHeight = placement === "above" ? spaceAbove : spaceBelow;
+  const maxHeight = Math.max(0, Math.min(availableHeight, viewportHeight - gap * 2));
+  const maxWidth = Math.max(0, viewportWidth - gap * 2);
+  popover.style.setProperty("--fillo-phone-popover-max-height", `${Math.floor(maxHeight)}px`);
+  popover.style.setProperty("--fillo-phone-popover-max-width", `${Math.floor(maxWidth)}px`);
+  popover.style.setProperty("--fillo-phone-popover-offset-x", "0px");
+  const width = Math.min(popover.offsetWidth, maxWidth);
+  let offsetX = 0;
+  const rightOverflow = anchorRect.left + width - (viewportWidth - gap);
+  if (rightOverflow > 0) offsetX -= rightOverflow;
+  const leftOverflow = gap - (anchorRect.left + offsetX);
+  if (leftOverflow > 0) offsetX += leftOverflow;
+  popover.style.setProperty("--fillo-phone-popover-offset-x", `${Math.round(offsetX)}px`);
+  return placement;
+}
 function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const schema = field;
   const stored = typeof value === "string" ? value : "";
   const [country, setCountry] = useState2(
-    () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? countryByIso(localeCountry()) ?? PHONE_COUNTRIES[0]
+    () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? PHONE_COUNTRIES[0]
   );
+  const touched = useRef2(false);
+  useEffect3(() => {
+    if (touched.current) return;
+    if (parsePhone(stored).country || countryByIso(schema.defaultCountry)) return;
+    const guess = countryByTimeZone(browserTimeZone()) ?? countryByIso(localeCountry());
+    if (guess) setCountry(guess);
+  }, []);
   const national = nationalFor(stored, country);
   const display = formatNational(country, national);
   const inputRef = useRef2(null);
@@ -185,6 +227,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   });
   const commit = (c, nat) => setValue(nat ? toE164(c, nat) : "");
   function onInput(e) {
+    touched.current = true;
     const el = e.target;
     const raw = el.value;
     const caret = el.selectionStart ?? raw.length;
@@ -198,6 +241,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     commit(country, digitsOnly(raw));
   }
   function pickCountry(c) {
+    touched.current = true;
     setCountry(c);
     commit(c, national);
     inputRef.current?.focus();
@@ -240,7 +284,10 @@ function CountrySelect({
   const [open, setOpen] = useState2(false);
   const [query, setQuery] = useState2("");
   const [active, setActive] = useState2(0);
+  const [placement, setPlacement] = useState2("below");
   const rootRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const popoverRef = useRef2(null);
   const searchRef = useRef2(null);
   const listId = `${labelledBy}-countries`;
   const matches = useMemo3(() => {
@@ -266,6 +313,17 @@ function CountrySelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => setPlacement(positionPhonePopover(rootRef.current, popoverRef.current));
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, matches.length]);
   useEffect3(() => {
     if (!open) return;
     document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
@@ -288,12 +346,14 @@ function CountrySelect({
     } else if (e.key === "Escape") {
       e.preventDefault();
       setOpen(false);
+      triggerRef.current?.focus();
     }
   }
   return /* @__PURE__ */ jsxs("div", { className: "fillo-phone-country", ref: rootRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         className: "fillo-phone-flag",
         "aria-haspopup": "listbox",
@@ -310,7 +370,7 @@ function CountrySelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "fillo-phone-popover", children: [
+    open && /* @__PURE__ */ jsxs("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -603,7 +663,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs3("div", { className: `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs3("label", { className: "fillo-label", htmlFor: ids.inputId, children: [
+    /* @__PURE__ */ jsxs3("label", { className: "fillo-label", id: ids.labelId, htmlFor: ids.inputId, children: [
       field.label,
       !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: " (optional)" })
     ] }),
@@ -625,6 +685,10 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         onClick: () => canUpload && inputRef.current?.click(),
         role: "button",
         tabIndex: 0,
+        "aria-labelledby": ids.labelId,
+        "aria-required": field.required ? true : void 0,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": describedBy,
         onKeyDown: (e) => {
           if ((e.key === "Enter" || e.key === " ") && canUpload) inputRef.current?.click();
         },
@@ -636,9 +700,6 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
               id: ids.inputId,
               type: "file",
               hidden: true,
-              "aria-invalid": error ? true : void 0,
-              "aria-required": field.required ? true : void 0,
-              "aria-describedby": describedBy,
               multiple: maxFiles > 1,
               accept: schema.accept?.join(","),
               onChange: (e) => handleFiles(e.target.files)
@@ -740,6 +801,9 @@ function fieldAria(field, error, ids) {
     "aria-describedby": describedBy.length ? describedBy.join(" ") : void 0
   };
 }
+function isNativeControlTarget(target) {
+  return target instanceof HTMLElement && Boolean(target.closest("input, textarea, select, button"));
+}
 function FieldShell({
   field,
   error,
@@ -852,6 +916,12 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
           {
             "data-option": opt.id,
             className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${value === opt.id ? " fillo-option--selected" : ""}`,
+            onClick: (event) => {
+              if (isNativeControlTarget(event.target)) return;
+              event.preventDefault();
+              setOtherOn(false);
+              setValue(opt.id);
+            },
             children: [
               /* @__PURE__ */ jsx4(
                 "input",
@@ -937,6 +1007,11 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
           {
             "data-option": opt.id,
             className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
+            onClick: (event) => {
+              if (isNativeControlTarget(event.target)) return;
+              event.preventDefault();
+              toggle(opt.id);
+            },
             children: [
               /* @__PURE__ */ jsx4(
                 "input",
@@ -1382,8 +1457,12 @@ function blockPropsEqual(prev, next) {
   const id = next.block.id;
   if (prev.api.data[id] !== next.api.data[id]) return false;
   if (prev.api.errors[id] !== next.api.errors[id]) return false;
-  const needsWiderState = next.block.kind === "custom" || blockHasPiping(prev.block) || blockHasPiping(next.block);
-  if (needsWiderState && prev.api.data !== next.api.data) return false;
+  if (next.block.kind === "custom") {
+    return prev.api.data === next.api.data && prev.api.status === next.api.status && prev.api.uploading === next.api.uploading && prev.api.isFirstPage === next.api.isFirstPage && prev.api.isLastPage === next.api.isLastPage && prev.api.pageIndex === next.api.pageIndex;
+  }
+  if ((blockHasPiping(prev.block) || blockHasPiping(next.block)) && prev.api.data !== next.api.data) {
+    return false;
+  }
   if (next.api.form.settings.submitMode === "auto") {
     if (prev.api.data !== next.api.data || prev.api.status !== next.api.status || prev.api.uploading !== next.api.uploading || prev.api.isLastPage !== next.api.isLastPage) {
       return false;
@@ -1511,6 +1590,10 @@ function FilloForm(props) {
   const inlineSchema = codeForm ? codeForm.schema : form;
   const onError = props.onError;
   const syncedFormId = useCodeFormSync(form, client, onError);
+  const onErrorRef = useRef5(onError);
+  useEffect7(() => {
+    onErrorRef.current = onError;
+  });
   const needsFetch = !inlineSchema && Boolean(client && formId);
   useEffect7(() => {
     if (!needsFetch || !client || !formId) return;
@@ -1527,12 +1610,12 @@ function FilloForm(props) {
       if (cancelled) return;
       const error = err instanceof FilloError2 ? err : new FilloError2("This form could not be loaded.", 0);
       setLoadError(error);
-      onError?.(error);
+      onErrorRef.current?.(error);
     });
     return () => {
       cancelled = true;
     };
-  }, [needsFetch, client, formId, onError]);
+  }, [needsFetch, client, formId]);
   const rawSchema = inlineSchema ?? fetched;
   const normalized = useMemo4(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
   const schema = normalized?.ok ? normalized.schema : null;
@@ -1618,15 +1701,37 @@ function ResolvedForm(props) {
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [submitted, settings.redirectUrl]);
+  const successRef = useRef5(null);
+  useEffect7(() => {
+    if (submitted) successRef.current?.focus();
+  }, [submitted]);
+  const blocksRef = useRef5(null);
+  const prevPageIndex = useRef5(api.pageIndex);
+  useEffect7(() => {
+    if (prevPageIndex.current === api.pageIndex) return;
+    prevPageIndex.current = api.pageIndex;
+    blocksRef.current?.focus();
+  }, [api.pageIndex]);
   if (api.status === "submitted") {
-    return /* @__PURE__ */ jsxs5("div", { className: `fillo-form fillo-form--success ${props.className ?? ""}`, ...themed, children: [
-      props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5("div", { className: "fillo-success", children: [
-        /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
-        /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
-        /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
-      ] }),
-      props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
-    ] });
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: successRef,
+        tabIndex: -1,
+        role: "status",
+        "aria-live": "polite",
+        className: `fillo-form fillo-form--success ${props.className ?? ""}`,
+        ...themed,
+        children: [
+          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5("div", { className: "fillo-success", children: [
+            /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+            /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
+            /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
+          ] }),
+          props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+        ]
+      }
+    );
   }
   const multiPage = api.pageCount > 1;
   const autoSubmit = settings.submitMode === "auto";
@@ -1671,7 +1776,7 @@ function ResolvedForm(props) {
           schema.description && /* @__PURE__ */ jsx5("p", { className: "fillo-form-description", children: schema.description })
         ] }),
         multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx5("h2", { className: "fillo-page-title", children: api.page.title }),
-        /* @__PURE__ */ jsx5("div", { className: "fillo-blocks", children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5("div", { className: "fillo-blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
           BlockRenderer,
           {
             block,

package/dist/styles.css

@@ -126,12 +126,18 @@
   .fillo-field--error .fillo-phone-flag { border-color: var(--fillo-error); }
   .fillo-phone-popover {
     position: absolute; z-index: 30; top: calc(100% + 0.3rem); left: 0;
-    width: 18rem; max-width: 84vw; padding: 0.4rem;
+    width: min(18rem, calc(100vw - 1rem));
+    max-width: var(--fillo-phone-popover-max-width, 84vw);
+    max-height: min(var(--fillo-phone-popover-max-height, 20rem), calc(100vh - 1rem));
+    padding: 0.4rem;
+    box-sizing: border-box; overflow: hidden;
+    transform: translateX(var(--fillo-phone-popover-offset-x, 0px));
     display: flex; flex-direction: column; gap: 0.35rem;
     background: var(--fillo-control-bg);
     border: 1px solid var(--fillo-border); border-radius: var(--fillo-radius);
     box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35);
   }
+  .fillo-phone-popover--above { top: auto; bottom: calc(100% + 0.3rem); }
   .fillo-phone-search {
     appearance: none; font: inherit; width: 100%; box-sizing: border-box;
     color: var(--fillo-text); background: var(--fillo-bg);
@@ -139,7 +145,10 @@
     border-radius: calc(var(--fillo-radius) - 3px); padding: 0.45rem 0.6rem;
   }
   .fillo-phone-search:focus-visible { outline: none; border-color: var(--fillo-primary); }
-  .fillo-phone-list { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
+  .fillo-phone-list {
+    flex: 1 1 auto; min-height: 0;
+    list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto;
+  }
   .fillo-phone-option {
     display: flex; align-items: center; gap: 0.5rem;
     padding: 0.45rem 0.5rem; border-radius: calc(var(--fillo-radius) - 3px);
@@ -586,17 +595,17 @@
   }
 
   /* ---------- Success ---------- */
-  .fillo-success { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding: 2.5rem 1rem; }
+  .fillo-success { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; padding: 1.4rem 1rem; }
   .fillo-success-mark {
-    width: 3rem; height: 3rem;
+    width: 2rem; height: 2rem;
     display: grid; place-items: center;
     border-radius: 999px;
     background: color-mix(in srgb, var(--fillo-primary) 10%, transparent);
     color: var(--fillo-primary);
-    font-size: 1.4rem; font-weight: 700;
+    font-size: 0.95rem; font-weight: 700;
   }
-  .fillo-success-title { margin: 0; font-size: 1.35rem; letter-spacing: 0; }
-  .fillo-success-message { margin: 0; color: var(--fillo-muted); }
+  .fillo-success-title { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
+  .fillo-success-message { margin: 0; font-size: 0.875rem; color: var(--fillo-muted); }
 
   /* Honeypot — off-screen, never display:none (bots check that) */
   .fillo-hp {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.5.0"
+    "@usefillo/core": "^0.5.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",