@sustaina/shared-ui 1.20.0 → 1.21.0

package/dist/index.d.mts

@@ -555,6 +555,7 @@ type FormulaTokenConfig<TItem extends FormulaTokenSuggestion = FormulaTokenSugge
 type FormulaEditorProps = {
     value?: string;
     disabled?: boolean;
+    loading?: boolean;
     className?: string;
     editorClassName?: string;
     errorMessage?: ReactNode;

package/dist/index.d.ts

@@ -555,6 +555,7 @@ type FormulaTokenConfig<TItem extends FormulaTokenSuggestion = FormulaTokenSugge
 type FormulaEditorProps = {
     value?: string;
     disabled?: boolean;
+    loading?: boolean;
     className?: string;
     editorClassName?: string;
     errorMessage?: ReactNode;

package/dist/index.js

@@ -5129,7 +5129,8 @@ function DialogAlert({
   }, [onCancel, onOpenChange]);
   const handleConfirm = React4.useCallback(() => {
     onConfirm?.();
-  }, [onConfirm]);
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
@@ -5391,6 +5392,26 @@ var getDialogAlertControls = () => ({
   closeDialogAlert,
   openErrorDialogAlert
 });
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "loading-overlay",
+      className: cn(
+        fullscreen ? "fixed z-100" : "absolute z-10",
+        "inset-0 flex items-center justify-center transition-opacity duration-300",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
+    }
+  );
+}
 
 // src/components/formulaEditor/constants/formulaOperation.ts
 var defaultOperators = [
@@ -6189,6 +6210,7 @@ var buildDocFromRaw = (raw, prefixMap, configLookup) => {
 var FormulaEditor = ({
   value,
   disabled,
+  loading = false,
   className,
   editorClassName,
   errorMessage,
@@ -6223,6 +6245,7 @@ var FormulaEditor = ({
   const allowedOperators = React4.useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
+  const isInteractionDisabled = Boolean(disabled || loading);
   const convertValueToContent = React4.useCallback(
     (input) => {
       if (!input) return "";
@@ -6265,16 +6288,17 @@ 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",
-          disabled && "pointer-events-none opacity-60",
+          isInteractionDisabled && "pointer-events-none opacity-60",
           editorClassName
-        )
+        ),
+        ...loading ? { "aria-busy": "true" } : {}
       }
     }
   });
   React4.useEffect(() => {
     if (!editor) return;
-    editor.setEditable(!disabled);
-  }, [disabled, editor]);
+    editor.setEditable(!isInteractionDisabled);
+  }, [editor, isInteractionDisabled]);
   React4.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
@@ -6306,6 +6330,7 @@ var FormulaEditor = ({
         onBlur: field?.onBlur,
         tabIndex: 0,
         className: "relative",
+        "aria-busy": loading,
         onFocus: () => {
           if (editor && !editor.isFocused) {
             editor.chain().focus().run();
@@ -6313,6 +6338,14 @@ var FormulaEditor = ({
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx(
+            LoadingOverlay,
+            {
+              fullscreen: false,
+              className: "rounded-lg bg-white/80 backdrop-blur-sm",
+              spinnerClassName: "size-6 text-sus-blue-3"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
@@ -6320,6 +6353,7 @@ var FormulaEditor = ({
               variant: "ghost",
               size: "icon",
               className: "absolute bottom-2 right-4 h-6 w-6 rounded-full bg-white shadow",
+              disabled: isInteractionDisabled,
               onClick: () => setIsExpanded((prev) => !prev),
               children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4" })
             }
@@ -6334,7 +6368,7 @@ var FormulaEditor = ({
         type: "button",
         onClick: () => insertOperator(operator.value),
         className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
-        disabled,
+        disabled: isInteractionDisabled,
         children: operator.label
       },
       operator.value
@@ -6740,26 +6774,6 @@ var useGridSettingsStore = zustand.create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
-function LoadingOverlay({
-  className,
-  fullscreen = true,
-  spinnerClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "loading-overlay",
-      className: cn(
-        fullscreen ? "fixed z-100" : "absolute z-10",
-        "inset-0 flex items-center justify-center transition-opacity duration-300",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
-    }
-  );
-}
 var DEVICE_SIZES = [320, 420, 640, 768, 1024, 1280, 1536, 1920];
 var IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var defaultLoader = ({ src }) => src;