formanitor 0.1.8 → 0.1.10

package/dist/index.cjs

@@ -11,6 +11,7 @@ var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var Underline = require('@tiptap/extension-underline');
+var extensionTable = require('@tiptap/extension-table');
 var reactSlot = require('@radix-ui/react-slot');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -2098,6 +2099,10 @@ function fieldLabelClass(fieldDef, ...defaults) {
   return cn(...defaults, fieldDef.style?.classNames?.label);
 }
 function fieldControlClass(fieldDef, ...defaults) {
+  const controlClass = fieldDef.style?.classNames?.control;
+  if (fieldDef.style?.fullControl && controlClass) {
+    return cn(controlClass);
+  }
   return cn(...defaults, fieldDef.style?.classNames?.control);
 }
 function fieldDescriptionClass(fieldDef, ...defaults) {
@@ -2228,9 +2233,47 @@ function isEmptyHtml(html) {
   const t = html.trim();
   return t === "" || t === "<p></p>" || t === "<p><br></p>" || t === '<p><br class="ProseMirror-trailingBreak"></p>';
 }
+function buildRichTextExtensions(placeholder, tables) {
+  const base = [
+    StarterKit__default.default.configure({
+      // Disable headings entirely so the UI/content can't introduce H2/H3.
+      heading: false,
+      bulletList: {
+        HTMLAttributes: {
+          class: "list-disc pl-6 my-2"
+        }
+      },
+      orderedList: {
+        HTMLAttributes: {
+          class: "list-decimal pl-6 my-2"
+        }
+      },
+      listItem: {
+        HTMLAttributes: {
+          class: "my-1"
+        }
+      }
+    }),
+    Underline__default.default,
+    Placeholder__default.default.configure({
+      placeholder
+    })
+  ];
+  if (!tables) return base;
+  return [
+    ...base,
+    extensionTable.Table.configure({
+      resizable: false
+    }),
+    extensionTable.TableRow,
+    extensionTable.TableHeader,
+    extensionTable.TableCell
+  ];
+}
 function RichTextToolbar({
   editor,
-  disabled
+  disabled,
+  tablesEnabled
 }) {
   const [, rerender] = React15.useReducer((n) => n + 1, 0);
   React15.useEffect(() => {
@@ -2261,6 +2304,7 @@ function RichTextToolbar({
       children: icon
     }
   );
+  const inTable = tablesEnabled && editor.isActive("table");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2305,6 +2349,46 @@ function RichTextToolbar({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "h-4 w-4" }),
           "Numbered list"
         ),
+        tablesEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-6" }),
+          !inTable ? fmtBtn(
+            false,
+            () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" }),
+            "Insert table"
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            fmtBtn(
+              false,
+              () => editor.chain().focus().addRowAfter().run(),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows2, { className: "h-4 w-4" }),
+              "Add row below"
+            ),
+            fmtBtn(
+              false,
+              () => editor.chain().focus().addColumnAfter().run(),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns2, { className: "h-4 w-4" }),
+              "Add column right"
+            ),
+            fmtBtn(
+              false,
+              () => editor.chain().focus().deleteRow().run(),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TableRowsSplit, { className: "h-4 w-4" }),
+              "Delete row"
+            ),
+            fmtBtn(
+              false,
+              () => editor.chain().focus().deleteColumn().run(),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TableColumnsSplit, { className: "h-4 w-4" }),
+              "Delete column"
+            ),
+            fmtBtn(
+              false,
+              () => editor.chain().focus().deleteTable().run(),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }),
+              "Delete table"
+            )
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mx-0.5 h-6" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
@@ -2345,33 +2429,10 @@ var RichTextWidget = ({ fieldId }) => {
   const def = fieldDef;
   const placeholder = def?.placeholder ?? "Start typing\u2026";
   const minHeight = def?.minHeight ?? 160;
+  const tablesEnabled = !!def?.tables;
   const extensions = React15.useMemo(
-    () => [
-      StarterKit__default.default.configure({
-        // Disable headings entirely so the UI/content can't introduce H2/H3.
-        heading: false,
-        bulletList: {
-          HTMLAttributes: {
-            class: "list-disc pl-6 my-2"
-          }
-        },
-        orderedList: {
-          HTMLAttributes: {
-            class: "list-decimal pl-6 my-2"
-          }
-        },
-        listItem: {
-          HTMLAttributes: {
-            class: "my-1"
-          }
-        }
-      }),
-      Underline__default.default,
-      Placeholder__default.default.configure({
-        placeholder
-      })
-    ],
-    [placeholder]
+    () => buildRichTextExtensions(placeholder, tablesEnabled),
+    [placeholder, tablesEnabled]
   );
   const stringValue = typeof value === "string" ? value : "";
   const editor = react.useEditor(
@@ -2388,7 +2449,7 @@ var RichTextWidget = ({ fieldId }) => {
       editorProps: {
         attributes: {
           id: fieldId,
-          class: "focus:outline-none",
+          class: "tiptap focus:outline-none",
           style: `min-height: ${minHeight}px`
         }
       }
@@ -2454,7 +2515,14 @@ var RichTextWidget = ({ fieldId }) => {
           )
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RichTextToolbar, { editor, disabled }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RichTextToolbar,
+            {
+              editor,
+              disabled,
+              tablesEnabled
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -2480,6 +2548,9 @@ var RichTextWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
+function richTextHtmlClassName() {
+  return cn("richtext-content prose prose-sm max-w-none");
+}
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
 var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2763,7 +2834,7 @@ var MultiSelectWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorClass(fieldDef, "text-xs text-red-500"), children: error })
   ] });
 };
-var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table2 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -2771,9 +2842,9 @@ var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @
     ...props
   }
 ) }));
-Table.displayName = "Table";
-var TableHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
-TableHeader.displayName = "TableHeader";
+Table2.displayName = "Table";
+var TableHeader2 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader2.displayName = "TableHeader";
 var TableBody = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
@@ -2795,7 +2866,7 @@ var TableFooter = React15__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableRow2 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tr",
   {
     ref,
@@ -2806,7 +2877,7 @@ var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /
     ...props
   }
 ));
-TableRow.displayName = "TableRow";
+TableRow2.displayName = "TableRow";
 var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
@@ -2819,7 +2890,7 @@ var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell2 = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -2827,7 +2898,7 @@ var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) =>
     ...props
   }
 ));
-TableCell.displayName = "TableCell";
+TableCell2.displayName = "TableCell";
 var TableCaption = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
@@ -2877,15 +2948,15 @@ var RepeatableWidget = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow2, { children: [
         def.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: subDef.label }, subDef.id)),
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-[50px]" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
         rows.map(
-          (row, index) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
-            def.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: subDef.type === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          (row, index) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow2, { children: [
+            def.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { children: subDef.type === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 type: "number",
@@ -2903,7 +2974,7 @@ var RepeatableWidget = ({
                 disabled
               }
             ) }, subDef.id)),
-            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 type: "button",
@@ -2917,8 +2988,8 @@ var RepeatableWidget = ({
             ) })
           ] }, index)
         ),
-        rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          TableCell,
+        rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell2,
           {
             colSpan: def.row.length + 1,
             className: "h-24 text-center",
@@ -4002,13 +4073,7 @@ function Upload3({
                 /* @__PURE__ */ jsxRuntime.jsx("br", {}),
                 "and medical records"
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                lucideReact.Upload,
-                {
-                  size: 20,
-                  className: "rotate-180 text-[#727272] mt-4"
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 20, className: "text-[#727272] mt-4" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs mt-1 text-text-shades-2", children: placeholder }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-10px leading-[140%] text-[#989898]", children: [
                 "Supported formats - ",
@@ -4394,23 +4459,23 @@ var EditableTableWidget = ({
       /* @__PURE__ */ jsxRuntime.jsx(Label, { children: fieldDef.label }),
       fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: header.isPlaceholder ? null : reactTable.flexRender(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: header.isPlaceholder ? null : reactTable.flexRender(
         header.column.columnDef.header,
         header.getContext()
       ) }, header.id)) }, headerGroup.id)) }),
       /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
-        TableRow,
+        TableRow2,
         {
           "data-state": row.getIsSelected() && "selected",
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "p-1", children: reactTable.flexRender(
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "p-1", children: reactTable.flexRender(
             cell.column.columnDef.cell,
             cell.getContext()
           ) }, cell.id))
         },
         row.id
-      )) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        TableCell,
+      )) : /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
         {
           colSpan: columns.length,
           className: "h-24 text-center",
@@ -15410,7 +15475,10 @@ var ReadOnlyText = ({ fieldDef, value }) => {
     isRichText ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "prose prose-sm max-w-none text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50",
+        className: cn(
+          richTextHtmlClassName(),
+          "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50"
+        ),
         dangerouslySetInnerHTML: { __html: displayValue }
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] whitespace-pre-wrap", children: displayValue || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) })
@@ -15479,10 +15547,10 @@ var ReadOnlyRepeatable = ({ fieldDef, value }) => {
   const rows = Array.isArray(value) ? value : [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium text-gray-700", children: fieldDef.label }),
-    rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400 italic border border-gray-200 rounded-md p-4 bg-gray-50 text-center", children: "No items" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: fieldDef.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-gray-50", children: subDef.label }, subDef.id)) }) }),
+    rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400 italic border border-gray-200 rounded-md p-4 bg-gray-50 text-center", children: "No items" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: fieldDef.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-gray-50", children: subDef.label }, subDef.id)) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rows.map(
-        (row, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: fieldDef.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-gray-900", children: row[subDef.id] ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "\u2014" }) }, subDef.id)) }, index)
+        (row, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: fieldDef.row.map((subDef) => /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "text-gray-900", children: row[subDef.id] ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "\u2014" }) }, subDef.id)) }, index)
       ) })
     ] }) })
   ] });
@@ -15662,16 +15730,16 @@ var ReadOnlyTable = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { children: fieldDef.label }),
     fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: header.isPlaceholder ? null : reactTable.flexRender(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: header.isPlaceholder ? null : reactTable.flexRender(
         header.column.columnDef.header,
         header.getContext()
       ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "p-2", children: reactTable.flexRender(
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "p-2", children: reactTable.flexRender(
         cell.column.columnDef.cell,
         cell.getContext()
-      ) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        TableCell,
+      ) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
         {
           colSpan: columns.length,
           className: "h-16 text-center text-muted-foreground",
@@ -16412,6 +16480,7 @@ exports.fieldLabelClass = fieldLabelClass;
 exports.fieldMetaRequestsMarMedicationOrdersButton = fieldMetaRequestsMarMedicationOrdersButton;
 exports.fieldWrapperClass = fieldWrapperClass;
 exports.isLabelVisible = isLabelVisible;
+exports.richTextHtmlClassName = richTextHtmlClassName;
 exports.useField = useField;
 exports.useFieldHandlers = useFieldHandlers;
 exports.useForm = useForm;