formanitor 0.0.24 → 0.0.26

package/dist/index.cjs

@@ -1235,7 +1235,7 @@ var SelectContent = React13__namespace.forwardRef(({ className, children, positi
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-52 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -3576,6 +3576,9 @@ function mapToProcedure(result) {
     fromAI: false
   };
 }
+function createCustomProcedure(trimmedName) {
+  return { name: trimmedName.trim(), is_custom: true };
+}
 var AddProcedureField = ({
   label = "Procedures",
   value,
@@ -3594,7 +3597,9 @@ var AddProcedureField = ({
   const valueRef = React13.useRef([]);
   const searchInputRef = React13.useRef(null);
   valueRef.current = value;
-  const addedIds = new Set(value.map((proc) => proc.id));
+  const addedIds = new Set(
+    value.filter((proc) => !proc.is_custom).map((proc) => proc.id)
+  );
   React13.useEffect(() => {
     if (!open) {
       setQuery("");
@@ -3636,12 +3641,23 @@ var AddProcedureField = ({
       setTimeout(() => searchInputRef.current?.focus(), 0);
     }, ADD_FEEDBACK_MS3);
   }
-  function removeProcedure(id) {
-    onChange(value.filter((proc) => proc.id !== id));
+  function removeAt(index) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+  function removeBySearchId(id) {
+    onChange(value.filter((proc) => proc.is_custom || proc.id !== id));
+  }
+  function handleAddCustom() {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    if (valueRef.current.some((p) => p.is_custom && p.name === trimmed)) return;
+    onChange([...valueRef.current, createCustomProcedure(trimmed)]);
+    setQuery("");
+    setResults([]);
   }
   function handleRecentlyUsedToggle(result) {
     if (addedIds.has(result.id)) {
-      removeProcedure(result.id);
+      removeBySearchId(result.id);
     } else {
       addProcedure(result);
     }
@@ -3651,7 +3667,7 @@ var AddProcedureField = ({
     const addedById = addedIds.has(id);
     const addedByName = value.some((proc) => proc.name === item.name);
     if (addedById || addedByName) {
-      if (addedById) removeProcedure(id);
+      if (addedById) removeBySearchId(id);
       else onChange(value.filter((proc) => proc.name !== item.name));
       return;
     }
@@ -3659,7 +3675,7 @@ var AddProcedureField = ({
     try {
       const searchResults = await onSearch(item.name);
       const first = searchResults?.[0];
-      if (first && !valueRef.current.some((proc) => proc.id === first.id)) {
+      if (first && !valueRef.current.some((proc) => !proc.is_custom && proc.id === first.id)) {
         onChange([...valueRef.current, mapToProcedure(first)]);
       }
     } finally {
@@ -3688,7 +3704,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.id === id) || value.some((proc) => proc.name === item.name);
+    const isAdded = value.some((proc) => !proc.is_custom && proc.id === id) || value.some((proc) => proc.name === item.name);
     const isAdding = addingFrequentId === id;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3722,7 +3738,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) => /* @__PURE__ */ jsxRuntime.jsxs(
+    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(
       "div",
       {
         className: "flex items-center justify-between px-3 py-2 bg-white hover:bg-gray-50",
@@ -3732,14 +3748,14 @@ var AddProcedureField = ({
             "button",
             {
               type: "button",
-              onClick: () => removeProcedure(proc.id),
+              onClick: () => removeAt(index),
               className: "text-muted-foreground hover:text-red-500 transition-colors cursor-pointer",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
             }
           )
         ]
       },
-      proc.id
+      proc.is_custom ? `custom-${index}` : proc.id
     )) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AddEntityDialog,
@@ -3749,6 +3765,19 @@ var AddProcedureField = ({
         title: "Add Procedure",
         recentlyUsedSlot: frequentItemChips.length > 0 ? frequentItemChips : recentlyUsedChips.length > 0 ? recentlyUsedChips : void 0,
         chipSectionLabel: frequentItemChips.length > 0 ? "Frequently used" : void 0,
+        actionSlot: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !query.trim() || valueRef.current.some((p) => p.is_custom && p.name === query.trim()),
+            onClick: handleAddCustom,
+            className: cn(
+              "rounded-md px-5 py-2 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary/90 transition-opacity cursor-pointer",
+              (!query.trim() || valueRef.current.some((p) => p.is_custom && p.name === query.trim())) && "opacity-40 cursor-not-allowed"
+            ),
+            children: "Save Procedure"
+          }
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
@@ -4216,7 +4245,7 @@ var ReferralWidget = ({ fieldId }) => {
         },
         `referral-${selectedItems.map((i) => i.specialization).join(",")}`
       ),
-      selectedItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: selectedItems.map((item) => {
+      selectedItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 flex h-12 flex-wrap content-start gap-1.5 overflow-y-auto pr-1", children: selectedItems.map((item) => {
         const isUrgent = item.is_urgent;
         const chipClass = isUrgent ? "inline-flex items-center gap-0.5 px-2 py-0.5 bg-red-100 text-red-800 border border-red-300 rounded-full text-xs max-w-full cursor-pointer hover:bg-red-200 transition-colors" : "inline-flex items-center gap-0.5 px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs max-w-full cursor-pointer hover:bg-blue-200 transition-colors";
         return /* @__PURE__ */ jsxRuntime.jsxs(