business-obligations-ui 0.4.0 → 0.4.1

package/dist/index.cjs

@@ -739,6 +739,7 @@ function Collapse({
 }
 
 // src/shared/Select.tsx
+var import_react2 = require("react");
 var import_tamagui5 = require("tamagui");
 
 // src/shared/ClearButton.tsx
@@ -788,6 +789,17 @@ var visuallyHidden = {
 
 // src/shared/Select.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var COARSE = "(pointer: coarse)";
+var onCoarseChange = (notify) => {
+  const query = window.matchMedia(COARSE);
+  query.addEventListener("change", notify);
+  return () => query.removeEventListener("change", notify);
+};
+var useCoarsePointer = () => (0, import_react2.useSyncExternalStore)(
+  onCoarseChange,
+  () => window.matchMedia(COARSE).matches,
+  () => false
+);
 function Select({
   id,
   value,
@@ -800,8 +812,57 @@ function Select({
   describedBy
 }) {
   const controlProps = useControlProps();
+  const touch = useCoarsePointer();
   const chosen = options.find((option) => option.value === value);
   const clearable = Boolean(onClear && chosen);
+  if (touch) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "select",
+        {
+          id,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          "aria-invalid": invalid || void 0,
+          "aria-describedby": describedBy,
+          style: {
+            width: "100%",
+            height: controlProps.height,
+            appearance: "none",
+            WebkitAppearance: "none",
+            borderRadius: 8,
+            border: `1px solid ${invalid ? "var(--red-600, #dc2626)" : "var(--border-color)"}`,
+            backgroundColor: "var(--background)",
+            color: chosen ? "var(--color)" : "var(--placeholder-color)",
+            // 16px stops iOS zooming on focus; the end padding leaves room for the chevron and the ✕
+            fontSize: Math.max(16, controlProps.fontSize),
+            padding: `0 ${clearable ? 56 : 32}px 0 12px`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", disabled: !onClear, hidden: !onClear, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "svg",
+        {
+          "aria-hidden": true,
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "var(--placeholder-color)",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: { position: "absolute", right: 12, top: "50%", marginTop: -6, pointerEvents: "none" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2.5 4.5 6 8l3.5-3.5" })
+        }
+      ),
+      clearable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton, { label: clearLabel, right: 26, onClear }) : null
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tamagui5.Select, { value, onValueChange: onChange, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -859,7 +920,7 @@ function Select({
 var import_tamagui6 = require("tamagui");
 
 // src/i18n/context.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createI18n(locale = "en", custom) {
   return {
@@ -870,14 +931,14 @@ function createI18n(locale = "en", custom) {
     relativeDays: (value, from) => relativeDays(value, from, locale)
   };
 }
-var I18nContext = /* @__PURE__ */ (0, import_react2.createContext)(/* @__PURE__ */ createI18n());
-var useI18n = () => (0, import_react2.useContext)(I18nContext);
+var I18nContext = /* @__PURE__ */ (0, import_react3.createContext)(/* @__PURE__ */ createI18n());
+var useI18n = () => (0, import_react3.useContext)(I18nContext);
 function WithLocale({
   locale,
   messages: messages2,
   children
 }) {
-  const i18n = (0, import_react2.useMemo)(() => createI18n(locale, messages2), [locale, messages2]);
+  const i18n = (0, import_react3.useMemo)(() => createI18n(locale, messages2), [locale, messages2]);
   if (locale === void 0 && messages2 === void 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(I18nContext.Provider, { value: i18n, children });
 }
@@ -1460,7 +1521,7 @@ function writeProfileQuery(search, choices, defaults = PROFILE_DEFAULTS) {
 }
 
 // src/profile/store.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/profile/place.ts
 var import_business_obligations2 = require("business-obligations");
@@ -1517,7 +1578,7 @@ function setProfileQuery(patch, defaults = PROFILE_DEFAULTS) {
   window.history.replaceState(window.history.state, "", `${pathname}${next}${hash}`);
   window.dispatchEvent(new Event(CHANGE_EVENT));
 }
-var Context = /* @__PURE__ */ (0, import_react3.createContext)({
+var Context = /* @__PURE__ */ (0, import_react4.createContext)({
   defaults: PROFILE_DEFAULTS,
   fixed: {},
   place: {}
@@ -1527,44 +1588,44 @@ function ProfileQueryProvider({
   values,
   children
 }) {
-  const parent = (0, import_react3.useContext)(Context);
-  const merged = (0, import_react3.useMemo)(() => ({ ...parent.defaults, ...defaults }), [parent.defaults, defaults]);
-  const given = (0, import_react3.useMemo)(
+  const parent = (0, import_react4.useContext)(Context);
+  const merged = (0, import_react4.useMemo)(() => ({ ...parent.defaults, ...defaults }), [parent.defaults, defaults]);
+  const given = (0, import_react4.useMemo)(
     () => Object.entries(values ?? {}).filter(([, value]) => value !== void 0),
     [values]
   );
-  const fixed = (0, import_react3.useMemo)(
+  const fixed = (0, import_react4.useMemo)(
     () => ({
       ...parent.fixed,
       ...Object.fromEntries(given.filter(([key]) => !PLACE_KEYS.includes(key)))
     }),
     [parent.fixed, given]
   );
-  const place = (0, import_react3.useMemo)(
+  const place = (0, import_react4.useMemo)(
     () => ({
       ...parent.place,
       ...Object.fromEntries(given.filter(([key]) => PLACE_KEYS.includes(key)))
     }),
     [parent.place, given]
   );
-  const context = (0, import_react3.useMemo)(() => ({ defaults: merged, fixed, place }), [merged, fixed, place]);
+  const context = (0, import_react4.useMemo)(() => ({ defaults: merged, fixed, place }), [merged, fixed, place]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Context.Provider, { value: context, children });
 }
 var hasPlace = (place) => PLACE_KEYS.every((key) => place[key]);
 function useFixedChoices() {
-  const { fixed, place } = (0, import_react3.useContext)(Context);
-  return (0, import_react3.useMemo)(() => {
+  const { fixed, place } = (0, import_react4.useContext)(Context);
+  return (0, import_react4.useMemo)(() => {
     const keys = new Set(Object.keys(fixed));
     if (PLACE_KEYS.some((key) => place[key])) keys.add("zip");
     return keys;
   }, [fixed, place]);
 }
 function useProfilePlace() {
-  const { place: fixedPlace } = (0, import_react3.useContext)(Context);
+  const { place: fixedPlace } = (0, import_react4.useContext)(Context);
   const [{ zip }] = useProfileChoices();
-  const [found, setFound] = (0, import_react3.useState)();
+  const [found, setFound] = (0, import_react4.useState)();
   const complete = hasPlace(fixedPlace);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (complete || !/^\d{5}$/.test(zip)) {
       setFound(void 0);
       return;
@@ -1575,20 +1636,20 @@ function useProfilePlace() {
       current = false;
     };
   }, [zip, complete]);
-  return (0, import_react3.useMemo)(() => {
+  return (0, import_react4.useMemo)(() => {
     if (complete) return fixedPlace;
     if (!found) return found;
     return { ...found, ...fixedPlace };
   }, [complete, fixedPlace, found]);
 }
 function useProfileChoices() {
-  const { defaults, fixed } = (0, import_react3.useContext)(Context);
-  const search = (0, import_react3.useSyncExternalStore)(subscribe, currentSearch, serverSearch);
-  const choices = (0, import_react3.useMemo)(
+  const { defaults, fixed } = (0, import_react4.useContext)(Context);
+  const search = (0, import_react4.useSyncExternalStore)(subscribe, currentSearch, serverSearch);
+  const choices = (0, import_react4.useMemo)(
     () => ({ ...readProfileQuery(search, defaults), ...fixed }),
     [search, defaults, fixed]
   );
-  const set = (0, import_react3.useCallback)(
+  const set = (0, import_react4.useCallback)(
     (patch) => {
       const open = Object.fromEntries(Object.entries(patch).filter(([key]) => !(key in fixed)));
       setProfileQuery(open, defaults);
@@ -1599,7 +1660,7 @@ function useProfileChoices() {
 }
 
 // src/profile/ProfileForm.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_business_obligations4 = require("business-obligations");
 var import_tamagui15 = require("tamagui");
 
@@ -1644,7 +1705,7 @@ function ChoiceField({
 }
 
 // src/profile/fields/DateField.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_tamagui10 = require("tamagui");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var pad = (n) => String(n).padStart(2, "0");
@@ -1667,7 +1728,7 @@ function Calendar({
 }) {
   const { m, tag, date } = useI18n();
   const start = /^\d{4}-\d{2}-\d{2}$/.test(value) ? value : min ?? todayIso();
-  const [view, setView] = (0, import_react4.useState)({ year: Number(start.slice(0, 4)), month: Number(start.slice(5, 7)) - 1 });
+  const [view, setView] = (0, import_react5.useState)({ year: Number(start.slice(0, 4)), month: Number(start.slice(5, 7)) - 1 });
   const shift = (by) => setView(({ year, month }) => {
     const d = new Date(Date.UTC(year, month + by, 1));
     return { year: d.getUTCFullYear(), month: d.getUTCMonth() };
@@ -1715,7 +1776,7 @@ function DateField({
   clearable = false
 }) {
   const { m, date } = useI18n();
-  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [open, setOpen] = (0, import_react5.useState)(false);
   const controlProps = useControlProps();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Labeled, { id, label, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_tamagui10.Popover, { open, onOpenChange: setOpen, placement: "top-start", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui10.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1761,7 +1822,7 @@ function DateField({
 }
 
 // src/profile/fields/DetailsField.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_tamagui11 = require("tamagui");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var S_ELECTION_TYPES = ["pc", "benefit_corp"];
@@ -1772,8 +1833,8 @@ function AnswerBox({
   onAnswer
 }) {
   const { m } = useI18n();
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => setMounted(true), []);
+  const [mounted, setMounted] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => setMounted(true), []);
   const shown = answer2 === true && !mounted ? void 0 : answer2;
   const next = answer2 === void 0 ? true : answer2 ? false : void 0;
   const status = answer2 === void 0 ? m.profile.answers.unanswered : answer2 ? m.profile.answers.yes : m.profile.answers.no;
@@ -1809,8 +1870,8 @@ function AnswerBox({
 function NotFormedBox({ id }) {
   const { m } = useI18n();
   const [choices, set] = useProfileChoices();
-  const [mounted, setMounted] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => setMounted(true), []);
+  const [mounted, setMounted] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => setMounted(true), []);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui11.XStack, { gap: "3", alignItems: "flex-start", paddingVertical: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_tamagui11.Checkbox,
@@ -1828,7 +1889,7 @@ function NotFormedBox({ id }) {
 }
 function DetailChecks({ legend }) {
   const { m } = useI18n();
-  const prefix = (0, import_react5.useId)();
+  const prefix = (0, import_react6.useId)();
   const [choices, set] = useProfileChoices();
   const fixed = useFixedChoices();
   const shown = DETAIL_FIELDS.filter(
@@ -1879,7 +1940,7 @@ function DetailsField({ locale, messages: messages2, legend = true }) {
 }
 
 // src/profile/fields/IndustryField.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_tamagui12 = require("tamagui");
 
 // src/profile/validation.ts
@@ -1942,11 +2003,11 @@ function IndustryControl({ id }) {
   const controlProps = useControlProps();
   const listId = `${id}-list`;
   const value = choices.naics;
-  const [text2, setText] = (0, import_react6.useState)(value);
-  const [results, setResults] = (0, import_react6.useState)();
-  const [active, setActive] = (0, import_react6.useState)(0);
-  const [title, setTitle] = (0, import_react6.useState)("");
-  const [unknown, setUnknown] = (0, import_react6.useState)(false);
+  const [text2, setText] = (0, import_react7.useState)(value);
+  const [results, setResults] = (0, import_react7.useState)();
+  const [active, setActive] = (0, import_react7.useState)(0);
+  const [title, setTitle] = (0, import_react7.useState)("");
+  const [unknown, setUnknown] = (0, import_react7.useState)(false);
   const open = results !== void 0;
   const error2 = firstError(naicsTextSchema, text2.trim()) ?? (unknown ? "naicsUnknown" : void 0);
   const errorId = `${id}-error`;
@@ -1957,10 +2018,10 @@ function IndustryControl({ id }) {
     "aria-autocomplete": "list",
     "aria-activedescendant": open && results.length > 0 ? `${listId}-${active}` : void 0
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setText((current) => /^\d*$/.test(current) && current !== value ? value : current);
   }, [value]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let current = true;
     if (value.length !== 6) {
       setTitle("");
@@ -2067,13 +2128,13 @@ function IndustryControl({ id }) {
   ] });
 }
 function IndustryField({ locale, messages: messages2, id }) {
-  const generated = (0, import_react6.useId)();
+  const generated = (0, import_react7.useId)();
   if (useFixedChoices().has("naics")) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WithLocale, { locale, messages: messages2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IndustryControl, { id: id ?? generated }) });
 }
 
 // src/profile/fields/NumberField.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_tamagui13 = require("tamagui");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var kindSpec = (kind) => kind === "employees" ? { schema: employeesTextSchema, strip: /\D/g, length: String(MAX_EMPLOYEES).length } : kind === "owners" ? { schema: ownersTextSchema, strip: /\D/g, length: 9 } : kind === "whole" ? { schema: wholeTextSchema, strip: /\D/g, length: 9 } : { schema: amountTextSchema, strip: /[^\d.]/g, length: 15 };
@@ -2091,8 +2152,8 @@ function NumberControl({
   const { schema, strip, length } = kindSpec(kind);
   const value = choices[field];
   const shown = value === void 0 ? "" : String(value);
-  const [draft, setDraft] = (0, import_react7.useState)(shown);
-  (0, import_react7.useEffect)(
+  const [draft, setDraft] = (0, import_react8.useState)(shown);
+  (0, import_react8.useEffect)(
     // Keep what is being typed ("012", "12.") while it means the same number; otherwise follow the address.
     () => setDraft((current) => current !== "" && Number(current) === value ? current : shown),
     [value, shown]
@@ -2178,13 +2239,13 @@ function EmployeesField({
   id,
   placeholder
 }) {
-  const generated = (0, import_react7.useId)();
+  const generated = (0, import_react8.useId)();
   if (useFixedChoices().has("employeeCount")) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WithLocale, { locale, messages: messages2, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EmployeesControl, { id: id ?? generated, placeholder }) });
 }
 
 // src/profile/fields/TypeField.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_business_obligations3 = require("business-obligations");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function TypeControl({ id }) {
@@ -2204,13 +2265,13 @@ function TypeControl({ id }) {
   ) });
 }
 function TypeField({ locale, messages: messages2, id }) {
-  const generated = (0, import_react8.useId)();
+  const generated = (0, import_react9.useId)();
   if (useFixedChoices().has("entityType")) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(WithLocale, { locale, messages: messages2, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypeControl, { id: id ?? generated }) });
 }
 
 // src/profile/fields/ZipField.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_tamagui14 = require("tamagui");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ZipField({ id }) {
@@ -2218,9 +2279,9 @@ function ZipField({ id }) {
   const [choices, set] = useProfileChoices();
   const controlProps = useControlProps();
   const zip = choices.zip;
-  const [place, setPlace] = (0, import_react9.useState)("");
-  const [unknown, setUnknown] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [place, setPlace] = (0, import_react10.useState)("");
+  const [unknown, setUnknown] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     setUnknown(false);
     if (zip.length !== 5) {
       setPlace("");
@@ -2312,13 +2373,13 @@ function Full({ children }) {
 function ProfileFormBody({ today, onFieldUsed }) {
   const { m, tag } = useI18n();
   const f = m.profileForm;
-  const prefix = (0, import_react10.useId)();
+  const prefix = (0, import_react11.useId)();
   const [choices, set] = useProfileChoices();
   const fixed = useFixedChoices();
   const now = today ?? todayIso();
   const asOf = choices.asOf || now;
-  const before = (0, import_react10.useRef)(void 0);
-  (0, import_react10.useEffect)(() => {
+  const before = (0, import_react11.useRef)(void 0);
+  (0, import_react11.useEffect)(() => {
     const previous = before.current;
     before.current = choices;
     if (!previous || !onFieldUsed) return;