@sustaina/shared-ui 1.51.0 → 1.51.1

package/dist/index.d.mts

@@ -1805,6 +1805,8 @@ type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<Vir
     onOpenChange?: (isOpen: boolean) => void;
     showValueWhenNoMatch?: boolean;
     virtual?: boolean;
+    isLoading?: boolean;
+    loadingContent?: React$1.ReactNode;
 };
 declare const Combobox: <TData extends OptionData>(props: ComboboxProps<TData> & React$1.RefAttributes<HTMLButtonElement>) => React$1.ReactElement | null;
 

package/dist/index.d.ts

@@ -1805,6 +1805,8 @@ type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<Vir
     onOpenChange?: (isOpen: boolean) => void;
     showValueWhenNoMatch?: boolean;
     virtual?: boolean;
+    isLoading?: boolean;
+    loadingContent?: React$1.ReactNode;
 };
 declare const Combobox: <TData extends OptionData>(props: ComboboxProps<TData> & React$1.RefAttributes<HTMLButtonElement>) => React$1.ReactElement | null;
 

package/dist/index.js

@@ -16470,6 +16470,8 @@ var ComboboxInner = ({
   onOpenChange,
   onClear,
   virtual = true,
+  isLoading,
+  loadingContent,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
@@ -16488,6 +16490,9 @@ var ComboboxInner = ({
     });
   }, [getValueField, options, selectedValue]);
   const renderValue = React__namespace.useMemo(() => {
+    if (isLoading) {
+      return loadingContent ?? "Loading...";
+    }
     if (!selectedValue) return placeholder2;
     if (currentSelectedOption) {
       return getLabelField(currentSelectedOption);
@@ -16496,7 +16501,15 @@ var ComboboxInner = ({
       return selectedValue;
     }
     return null;
-  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
+  }, [
+    currentSelectedOption,
+    getLabelField,
+    placeholder2,
+    selectedValue,
+    showValueWhenNoMatch,
+    isLoading,
+    loadingContent
+  ]);
   const handleSelect = React__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
@@ -16512,13 +16525,13 @@ var ComboboxInner = ({
   );
   const handleOpenPopover = React__namespace.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__namespace.useCallback(
     (event) => {
@@ -16549,7 +16562,8 @@ var ComboboxInner = ({
           className
         ),
         "data-state": openPopover ? "open" : "closed",
-        disabled,
+        "data-loading": isLoading,
+        disabled: disabled || isLoading,
         onFocus,
         onBlur,
         "data-testid": `combobox-trigger-${name}`,
@@ -16558,14 +16572,14 @@ var ComboboxInner = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             truncated_default,
             {
-              className: cn(!selectedValue && "text-sus-gray-1"),
+              className: cn(!selectedValue && !isLoading && "text-sus-gray-1"),
               tooltipProps: { disabled: true },
               children: renderValue
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
-            showClear && selectedValue && /* @__PURE__ */ jsxRuntime.jsx(
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 opacity-50" }),
+            showClear && selectedValue && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 role: "button",