formanitor 0.0.26 → 0.0.28

package/dist/index.cjs

@@ -430,6 +430,11 @@ var FormStore = class {
         result[field.id] = raw?.text ?? null;
         return;
       }
+      if (field.type === "diagnosis_textarea") {
+        const raw = values[field.id];
+        result[field.id] = typeof raw === "string" ? raw : raw && typeof raw === "object" ? raw.text ?? null : null;
+        return;
+      }
       if (field.type === "ophthal_diagnosis") {
         const raw = values[field.id];
         const formatEye = (eyeData, eyeLabel) => {
@@ -3360,8 +3365,9 @@ var AddInvestigationField = ({
   const debounceRef = React13.useRef(null);
   const valueRef = React13.useRef([]);
   const searchInputRef = React13.useRef(null);
-  valueRef.current = value;
-  const addedIds = new Set(value.map((inv) => inv.id));
+  const safeValue = Array.isArray(value) ? value : [];
+  valueRef.current = safeValue;
+  const addedIds = new Set(safeValue.map((inv) => inv.id));
   React13.useEffect(() => {
     if (!open) {
       setQuery("");
@@ -3404,7 +3410,7 @@ var AddInvestigationField = ({
     }, ADD_FEEDBACK_MS2);
   }
   function removeInvestigation(id) {
-    onChange(value.filter((inv) => inv.id !== id));
+    onChange(safeValue.filter((inv) => inv.id !== id));
   }
   function handleRecentlyUsedToggle(result) {
     if (addedIds.has(result.id)) {
@@ -3416,10 +3422,10 @@ var AddInvestigationField = ({
   async function handleFrequentItemToggle(item) {
     const id = String(item.id);
     const addedById = addedIds.has(id);
-    const addedByName = value.some((inv) => inv.name === item.name);
+    const addedByName = safeValue.some((inv) => inv.name === item.name);
     if (addedById || addedByName) {
       if (addedById) removeInvestigation(id);
-      else onChange(value.filter((inv) => inv.name !== item.name));
+      else onChange(safeValue.filter((inv) => inv.name !== item.name));
       return;
     }
     setAddingFrequentId(id);
@@ -3455,7 +3461,7 @@ var AddInvestigationField = ({
   const limitedFrequentItems = frequentItems.slice(0, 25);
   const frequentItemChips = limitedFrequentItems.length > 0 ? limitedFrequentItems.map((item) => {
     const id = String(item.id);
-    const isAdded = value.some((inv) => inv.id === id) || value.some((inv) => inv.name === item.name);
+    const isAdded = safeValue.some((inv) => inv.id === id) || safeValue.some((inv) => inv.name === item.name);
     const isAdding = addingFrequentId === id;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3489,7 +3495,7 @@ var AddInvestigationField = ({
         }
       )
     ] }),
-    value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border rounded-lg border border-border overflow-hidden", children: value.map((inv) => /* @__PURE__ */ jsxRuntime.jsxs(
+    safeValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border rounded-lg border border-border overflow-hidden", children: safeValue.map((inv) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "flex items-center justify-between px-3 py-2 bg-white hover:bg-gray-50",
@@ -3556,10 +3562,11 @@ var AddInvestigationWidget = ({ fieldId }) => {
   const { value, setValue } = useField(fieldId);
   const handlers = useFieldHandlers(fieldId);
   const { investigations: frequentInvestigations } = useFrequentItems();
+  const safeValue = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsxRuntime.jsx(
     AddInvestigationField,
     {
-      value: value ?? [],
+      value: safeValue,
       onChange: setValue,
       onSearch: handlers.onSearch,
       recentlyUsed: handlers.recentlyUsed,
@@ -3596,9 +3603,10 @@ var AddProcedureField = ({
   const debounceRef = React13.useRef(null);
   const valueRef = React13.useRef([]);
   const searchInputRef = React13.useRef(null);
-  valueRef.current = value;
+  const safeValue = Array.isArray(value) ? value : [];
+  valueRef.current = safeValue;
   const addedIds = new Set(
-    value.filter((proc) => !proc.is_custom).map((proc) => proc.id)
+    safeValue.filter((proc) => !proc.is_custom).map((proc) => proc.id)
   );
   React13.useEffect(() => {
     if (!open) {
@@ -3642,10 +3650,10 @@ var AddProcedureField = ({
     }, ADD_FEEDBACK_MS3);
   }
   function removeAt(index) {
-    onChange(value.filter((_, i) => i !== index));
+    onChange(safeValue.filter((_, i) => i !== index));
   }
   function removeBySearchId(id) {
-    onChange(value.filter((proc) => proc.is_custom || proc.id !== id));
+    onChange(safeValue.filter((proc) => proc.is_custom || proc.id !== id));
   }
   function handleAddCustom() {
     const trimmed = query.trim();
@@ -3665,10 +3673,10 @@ var AddProcedureField = ({
   async function handleFrequentItemToggle(item) {
     const id = String(item.id);
     const addedById = addedIds.has(id);
-    const addedByName = value.some((proc) => proc.name === item.name);
+    const addedByName = safeValue.some((proc) => proc.name === item.name);
     if (addedById || addedByName) {
       if (addedById) removeBySearchId(id);
-      else onChange(value.filter((proc) => proc.name !== item.name));
+      else onChange(safeValue.filter((proc) => proc.name !== item.name));
       return;
     }
     setAddingFrequentId(id);
@@ -3704,7 +3712,7 @@ var AddProcedureField = ({
   const limitedFrequentItems = frequentItems.slice(0, 25);
   const frequentItemChips = limitedFrequentItems.length > 0 ? limitedFrequentItems.map((item) => {
     const id = String(item.id);
-    const isAdded = value.some((proc) => !proc.is_custom && proc.id === id) || value.some((proc) => proc.name === item.name);
+    const isAdded = safeValue.some((proc) => !proc.is_custom && proc.id === id) || safeValue.some((proc) => proc.name === item.name);
     const isAdding = addingFrequentId === id;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3738,7 +3746,7 @@ var AddProcedureField = ({
         }
       )
     ] }),
-    value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border rounded-lg border border-border overflow-hidden", children: value.map((proc, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    safeValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border rounded-lg border border-border overflow-hidden", children: safeValue.map((proc, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "flex items-center justify-between px-3 py-2 bg-white hover:bg-gray-50",
@@ -3818,10 +3826,11 @@ var AddProcedureWidget = ({ fieldId }) => {
   const { value, setValue } = useField(fieldId);
   const handlers = useFieldHandlers(fieldId);
   const { procedures: frequentProcedures } = useFrequentItems();
+  const safeValue = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsxRuntime.jsx(
     AddProcedureField,
     {
-      value: value ?? [],
+      value: safeValue,
       onChange: setValue,
       onSearch: handlers.onSearch,
       recentlyUsed: handlers.recentlyUsed,
@@ -4790,6 +4799,174 @@ var SmartTextareaWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
+function normalizeDiagnosisGrades(payload) {
+  const result = [];
+  const pushGroup = (conditionRaw, gradesRaw) => {
+    const condition = typeof conditionRaw === "string" ? conditionRaw.trim() : "";
+    if (!condition) return;
+    if (!Array.isArray(gradesRaw)) return;
+    const grades = Array.from(
+      new Set(
+        gradesRaw.map((grade) => typeof grade === "string" ? grade.trim() : "").filter(Boolean)
+      )
+    );
+    if (grades.length === 0) return;
+    result.push({ condition, grades });
+  };
+  const asArrayResponse = payload;
+  if (Array.isArray(asArrayResponse?.diagnosisGrades)) {
+    asArrayResponse.diagnosisGrades.forEach((item) => {
+      pushGroup(item?.condition, item?.grades);
+    });
+    return result;
+  }
+  const asMapResponse = payload;
+  const mapLike = asMapResponse?.field === "diagnosisgrade" && asMapResponse?.value && typeof asMapResponse.value === "object" ? asMapResponse.value : null;
+  if (mapLike) {
+    Object.entries(mapLike).forEach(([condition, grades]) => {
+      pushGroup(condition, grades);
+    });
+  }
+  return result;
+}
+var DiagnosisTextareaWidget = ({ fieldId }) => {
+  const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { state } = useForm();
+  const handler = useFieldHandlers(fieldId);
+  const def = fieldDef;
+  const [gradeGroups, setGradeGroups] = React13__namespace.default.useState([]);
+  const [isLoadingGrades, setIsLoadingGrades] = React13__namespace.default.useState(false);
+  const normalized = React13__namespace.default.useMemo(() => {
+    const raw = value;
+    if (typeof raw === "string") {
+      return { text: raw, selectedGradesByCondition: {} };
+    }
+    if (!raw || typeof raw !== "object") {
+      return { text: "", selectedGradesByCondition: {} };
+    }
+    const text = typeof raw.text === "string" ? raw.text : "";
+    const mapRaw = raw.selectedGradesByCondition;
+    let selectedGradesByCondition = {};
+    if (mapRaw && typeof mapRaw === "object" && !Array.isArray(mapRaw)) {
+      const entries = Object.entries(mapRaw);
+      for (const [condition, gradeRaw] of entries) {
+        if (typeof condition !== "string") continue;
+        if (typeof gradeRaw === "string" && gradeRaw.trim()) {
+          selectedGradesByCondition[condition] = gradeRaw;
+        }
+      }
+    }
+    const sg = raw.selectedGrade;
+    if (sg && typeof sg === "object" && typeof sg.condition === "string" && typeof sg.grade === "string") {
+      const condition = sg.condition.trim();
+      const grade = sg.grade.trim();
+      if (condition && grade && !selectedGradesByCondition[condition]) {
+        selectedGradesByCondition = { ...selectedGradesByCondition, [condition]: grade };
+      }
+    }
+    return { text, selectedGradesByCondition };
+  }, [value]);
+  const textValue = normalized.text;
+  const showError = !!error && (touched || state.submitAttempted);
+  React13__namespace.default.useEffect(() => {
+    const query = textValue.trim();
+    const fetchGrades = handler.onFetchDiagnosisGrades;
+    const debounceMs = def?.debounceDelay ?? 1e3;
+    if (!query || !fetchGrades) {
+      setGradeGroups([]);
+      setIsLoadingGrades(false);
+      return;
+    }
+    let isActive = true;
+    const timer = window.setTimeout(async () => {
+      setIsLoadingGrades(true);
+      try {
+        const response = await fetchGrades(query);
+        if (!isActive) return;
+        setGradeGroups(normalizeDiagnosisGrades(response));
+      } catch {
+        if (!isActive) return;
+        setGradeGroups([]);
+      } finally {
+        if (isActive) setIsLoadingGrades(false);
+      }
+    }, debounceMs);
+    return () => {
+      isActive = false;
+      window.clearTimeout(timer);
+    };
+  }, [textValue, handler.onFetchDiagnosisGrades, def?.debounceDelay]);
+  if (!def) return null;
+  const theme = getThemeConfig("textarea", def.theme);
+  const wrapperClass = theme?.wrapperClassName ?? "space-y-2";
+  const labelClass = theme?.labelClassName;
+  const inputClass = cn(theme?.inputClassName, showError && "border-red-500");
+  const toggleSelectedGrade = (condition, grade) => {
+    if (disabled) return;
+    const current = normalized.selectedGradesByCondition[condition];
+    const nextForCondition = current === grade ? "" : grade;
+    const nextMap = { ...normalized.selectedGradesByCondition };
+    if (!nextForCondition) {
+      delete nextMap[condition];
+    } else {
+      nextMap[condition] = nextForCondition;
+    }
+    setValue({ text: normalized.text, selectedGradesByCondition: nextMap });
+    setTouched();
+  };
+  const labelContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    def.label,
+    " ",
+    def.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClass, children: [
+    theme ? /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: fieldId, className: labelClass, children: labelContent }) : /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: fieldId, children: labelContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea,
+      {
+        id: fieldId,
+        value: textValue,
+        onChange: (e) => setValue({ text: e.target.value, selectedGradesByCondition: normalized.selectedGradesByCondition }),
+        onBlur: setTouched,
+        disabled,
+        placeholder: def.placeholder,
+        className: inputClass,
+        ...def.height != null ? { height: def.height } : {}
+      }
+    ),
+    isLoadingGrades && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Checking diagnosis grades..." }),
+    !isLoadingGrades && gradeGroups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "mt-2 space-y-3 rounded-lg border border-border bg-muted/30 p-3",
+        role: "group",
+        "aria-label": "Diagnosis grade options",
+        children: gradeGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium leading-none text-muted-foreground", children: [
+            group.condition,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: group.grades.map((grade) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleSelectedGrade(group.condition, grade),
+              disabled,
+              className: cn(
+                "inline-flex min-h-8 items-center rounded-full border px-3 py-1 text-xs font-medium leading-none transition-colors",
+                normalized.selectedGradesByCondition[group.condition] === grade ? "border-primary bg-primary/15 text-primary shadow-sm" : "border-border/80 bg-background text-foreground hover:bg-muted/80",
+                disabled && "cursor-not-allowed opacity-60"
+              ),
+              children: grade
+            },
+            `${group.condition}-${grade}`
+          )) })
+        ] }, group.condition))
+      }
+    ),
+    showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+};
 var DEFAULT_DRAFT = {
   gpal: { G: 0, P: 0, A: 0, L: 0 },
   lmp: "",
@@ -7143,6 +7320,8 @@ var FieldRenderer = ({ fieldId }) => {
       return /* @__PURE__ */ jsxRuntime.jsx(FollowupWidget, { fieldId });
     case "smart_textarea":
       return /* @__PURE__ */ jsxRuntime.jsx(SmartTextareaWidget, { fieldId });
+    case "diagnosis_textarea":
+      return /* @__PURE__ */ jsxRuntime.jsx(DiagnosisTextareaWidget, { fieldId });
     case "obstetric_history":
       return /* @__PURE__ */ jsxRuntime.jsx(ObstetricHistoryWidget, { fieldId });
     case "eye_prescription":