@sustaina/shared-ui 1.34.0 → 1.35.0

package/dist/index.mjs

@@ -4331,18 +4331,25 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React26.useState(value ?? defaultValue);
+  const isControlled = typeof value !== "undefined";
+  const [internalValue, setInternalValue] = React26.useState(() => {
+    return isControlled ? value : defaultValue;
+  });
   React26.useEffect(() => {
-    if (value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const updateState = React26.useCallback((nextValue) => {
-    setInternalValue(nextValue);
-  }, []);
+    if (!isControlled) return;
+    setInternalValue(value);
+  }, [isControlled, value]);
+  const setValue = React26.useCallback(
+    (nextValue) => {
+      if (isControlled) return;
+      setInternalValue(nextValue);
+    },
+    [isControlled]
+  );
   return {
-    value: internalValue,
-    updateState
+    value: isControlled ? value : internalValue,
+    setValue,
+    isControlled
   };
 };
 var useControllableState_default = useControllableState;
@@ -5502,6 +5509,11 @@ var defaultResource = {
           description: "Unsaved changes. Do you want to leave this page?",
           confirm_text: "Leave"
         },
+        "confirm.reset_form": {
+          title: "Confirmation",
+          description: "Unsaved changes. If you continue, all changes will be lost.",
+          confirm_text: "Reset"
+        },
         "confirm.remove": {
           title: "Confirmation",
           description: "Are you sure you want to remove this item?",
@@ -5741,6 +5753,12 @@ var DIALOG_ALERT_TEMPLATES = {
     description: "confirm.leave_page.description",
     confirmText: "confirm.leave_page.confirm_text"
   },
+  "confirm.reset_form": {
+    variant: "confirm",
+    title: "confirm.reset_form.title",
+    description: "confirm.reset_form.description",
+    confirmText: "confirm.reset_form.confirm_text"
+  },
   "confirm.remove": {
     variant: "confirm",
     title: "confirm.remove.title",
@@ -11198,40 +11216,71 @@ var ComboboxInner = ({
   notFoundContent,
   searchPlaceholder,
   showSearch,
+  open,
+  showValueWhenNoMatch,
+  onOpenChange,
+  onClear,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React26.useState(false);
-  const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
+  const { value: openPopover, setValue: setOpenPopover } = useControllableState_default({
+    defaultValue: false,
+    value: open
+  });
+  const { value: selectedValue, setValue: setSelectedValue } = useControllableState_default({
     defaultValue,
     value
   });
-  const renderValue = React26.useMemo(() => {
-    if (!selectedValue) return placeholder2;
-    const selectedOptionFound = options?.find((option) => {
+  const currentSelectedOption = React26.useMemo(() => {
+    return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
-    return selectedOptionFound ? getLabelField(selectedOptionFound) : null;
-  }, [getLabelField, getValueField, options, placeholder2, selectedValue]);
+  }, [getValueField, options, selectedValue]);
+  const renderValue = React26.useMemo(() => {
+    if (!selectedValue) return placeholder2;
+    if (currentSelectedOption) {
+      return getLabelField(currentSelectedOption);
+    }
+    if (showValueWhenNoMatch) {
+      return selectedValue;
+    }
+    return null;
+  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
   const handleSelect = React26.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
-      setOpen(false);
+      setOpenPopover(false);
       if (typeof onSelect === "function") {
         onSelect(selected, option);
       }
+      if (typeof onOpenChange === "function") {
+        onOpenChange(false);
+      }
+    },
+    [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
+  );
+  const handleOpenPopover = React26.useCallback(
+    (isOpen) => {
+      if (disabled) return;
+      setOpenPopover(isOpen);
+      if (typeof onOpenChange === "function") {
+        onOpenChange(isOpen);
+      }
     },
-    [onSelect, setSelectedValue]
+    [disabled, onOpenChange, setOpenPopover]
   );
   const handleClear = React26.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
+      if (typeof onClear === "function") {
+        onClear(selectedValue, currentSelectedOption);
+      }
     },
-    [setSelectedValue]
+    [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -11239,7 +11288,7 @@ var ComboboxInner = ({
         name,
         type: "button",
         role: "combobox",
-        "aria-expanded": open,
+        "aria-expanded": openPopover,
         className: cn(
           "flex items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -11249,7 +11298,7 @@ var ComboboxInner = ({
           "transition-all",
           className
         ),
-        "data-state": open ? "open" : "closed",
+        "data-state": openPopover ? "open" : "closed",
         disabled,
         onFocus,
         onBlur,