@sustaina/shared-ui 1.25.0 → 1.26.0

package/dist/index.mjs

@@ -6265,7 +6265,8 @@ var FormulaEditor = ({
   onChange,
   onSelectSuggestion,
   field,
-  fieldState
+  fieldState,
+  mode = "edit"
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const lastEmittedValueRef = useRef(null);
@@ -6282,27 +6283,22 @@ var FormulaEditor = ({
   const prefixMap = useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
   const configLookup = useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
-    normalizedConfigs.forEach((config) => {
-      lookup.set(config.prefix, config);
-    });
+    normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
   const allowedOperators = useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
-  const isInteractionDisabled = Boolean(disabled || loading);
+  const isEditorReadOnly = mode === "display";
+  const isEditorDisabled = disabled || loading || isEditorReadOnly;
   const convertValueToContent = useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
       if (!trimmed) return "";
       const parsedJSON = tryParseJSON(trimmed);
-      if (parsedJSON && parsedJSON.type === "doc") {
-        return parsedJSON;
-      }
-      if (looksLikeHTML(trimmed)) {
-        return input;
-      }
+      if (parsedJSON && parsedJSON.type === "doc") return parsedJSON;
+      if (looksLikeHTML(trimmed)) return input;
       return buildDocFromRaw(input, prefixMap, configLookup);
     },
     [configLookup, prefixMap]
@@ -6333,7 +6329,7 @@ var FormulaEditor = ({
           hasError ? "border border-destructive" : "border focus-visible:border-ring",
           "w-full rounded-lg bg-white px-4 py-3",
           "overflow-y-auto whitespace-pre-wrap wrap-break-word focus:outline-none",
-          isInteractionDisabled && "pointer-events-none opacity-60",
+          isEditorDisabled && "pointer-events-none",
           editorClassName
         ),
         ...loading ? { "aria-busy": "true" } : {}
@@ -6342,8 +6338,8 @@ var FormulaEditor = ({
   });
   useEffect(() => {
     if (!editor) return;
-    editor.setEditable(!isInteractionDisabled);
-  }, [editor, isInteractionDisabled]);
+    editor.setEditable(!isEditorDisabled);
+  }, [editor, isEditorDisabled]);
   useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
@@ -6377,9 +6373,7 @@ var FormulaEditor = ({
         className: "relative",
         "aria-busy": loading,
         onFocus: () => {
-          if (editor && !editor.isFocused) {
-            editor.chain().focus().run();
-          }
+          if (editor && !editor.isFocused) editor.chain().focus().run();
         },
         children: [
           /* @__PURE__ */ jsx(EditorContent, { editor }),
@@ -6391,14 +6385,14 @@ var FormulaEditor = ({
               spinnerClassName: "size-6 text-sus-blue-3"
             }
           ),
-          /* @__PURE__ */ jsx(
+          !isEditorReadOnly && /* @__PURE__ */ jsx(
             Button,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
               className: "absolute bottom-2 right-4 h-6 w-6 rounded-full bg-white shadow",
-              disabled: isInteractionDisabled,
+              disabled: isEditorDisabled,
               onClick: () => setIsExpanded((prev) => !prev),
               children: isExpanded ? /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
             }
@@ -6407,13 +6401,13 @@ var FormulaEditor = ({
       }
     ),
     hasError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: displayError }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsx(
+    mode === "edit" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsx(
       Button,
       {
         type: "button",
         onClick: () => insertOperator(operator.value),
         className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
-        disabled: isInteractionDisabled,
+        disabled: isEditorDisabled,
         children: operator.label
       },
       operator.value