@sustaina/shared-ui 1.51.0 → 1.51.1

package/dist/index.mjs

@@ -16428,6 +16428,8 @@ var ComboboxInner = ({
   onOpenChange,
   onClear,
   virtual = true,
+  isLoading,
+  loadingContent,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
@@ -16446,6 +16448,9 @@ var ComboboxInner = ({
     });
   }, [getValueField, options, selectedValue]);
   const renderValue = React.useMemo(() => {
+    if (isLoading) {
+      return loadingContent ?? "Loading...";
+    }
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -16454,7 +16459,15 @@ var ComboboxInner = ({
       return selectedValue;
     }
     return null;
-  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
+  }, [
+    currentSelectedOption,
+    getLabelField,
+    placeholder2,
+    selectedValue,
+    showValueWhenNoMatch,
+    isLoading,
+    loadingContent
+  ]);
   const handleSelect = React.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
@@ -16470,13 +16483,13 @@ var ComboboxInner = ({
   );
   const handleOpenPopover = React.useCallback(
     (isOpen) => {
-      if (disabled) return;
+      if (disabled || isLoading) return;
       setOpenPopover(isOpen);
       if (typeof onOpenChange === "function") {
         onOpenChange(isOpen);
       }
     },
-    [disabled, onOpenChange, setOpenPopover]
+    [disabled, isLoading, onOpenChange, setOpenPopover]
   );
   const handleClear = React.useCallback(
     (event) => {
@@ -16507,7 +16520,8 @@ var ComboboxInner = ({
           className
         ),
         "data-state": openPopover ? "open" : "closed",
-        disabled,
+        "data-loading": isLoading,
+        disabled: disabled || isLoading,
         onFocus,
         onBlur,
         "data-testid": `combobox-trigger-${name}`,
@@ -16516,14 +16530,14 @@ var ComboboxInner = ({
           /* @__PURE__ */ jsx(
             truncated_default,
             {
-              className: cn(!selectedValue && "text-sus-gray-1"),
+              className: cn(!selectedValue && !isLoading && "text-sus-gray-1"),
               tooltipProps: { disabled: true },
               children: renderValue
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }),
-            showClear && selectedValue && /* @__PURE__ */ jsx(
+            isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "size-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }),
+            showClear && selectedValue && !isLoading && /* @__PURE__ */ jsx(
               "span",
               {
                 role: "button",