@sustaina/shared-ui 1.34.0 → 1.35.0

package/dist/index.d.mts

@@ -503,7 +503,7 @@ interface DialogAlertProps {
     outlet?: React.ReactNode | null;
     persistent?: boolean;
 }
-type TemplateKeys = "success.saved" | "success.deleted" | "success.removed" | "error.api_db_error" | "error.permission_denied" | "error.session_expired" | "error.user_not_found" | "error.data_not_found" | "error.data_restrict_editing" | "error.network_timeout_error" | "error.queue_full" | "error.invalid_data_format" | "error.data_linked_to_system_data" | "error.pending_workflow_conflict" | "error.invalid_incomplete_data" | "error.client_side_error" | "error.system_limitation" | "error.timeout" | "error.duplicate_data" | "error.something_went_wrong" | "confirm.delete" | "confirm.inactive" | "confirm.active" | "confirm.leave_page" | "confirm.remove" | "confirm.logout";
+type TemplateKeys = "success.saved" | "success.deleted" | "success.removed" | "error.api_db_error" | "error.permission_denied" | "error.session_expired" | "error.user_not_found" | "error.data_not_found" | "error.data_restrict_editing" | "error.network_timeout_error" | "error.queue_full" | "error.invalid_data_format" | "error.data_linked_to_system_data" | "error.pending_workflow_conflict" | "error.invalid_incomplete_data" | "error.client_side_error" | "error.system_limitation" | "error.timeout" | "error.duplicate_data" | "error.something_went_wrong" | "confirm.delete" | "confirm.inactive" | "confirm.active" | "confirm.leave_page" | "confirm.reset_form" | "confirm.remove" | "confirm.logout";
 type DialogAlertTemplateUnit = Omit<DialogAlertProps, "open" | "onOpenChange">;
 type DialogAlertTemplates = Record<TemplateKeys, DialogAlertTemplateUnit>;
 type DialogAlertI18nResource = Resource;
@@ -1458,6 +1458,10 @@ type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<Vir
     showClear?: boolean;
     onBlur?: (event: React$1.FocusEvent<HTMLButtonElement, Element>) => void;
     onFocus?: (event: React$1.FocusEvent<HTMLButtonElement, Element>) => void;
+    onClear?: (selected: string, option: VirtualizedCommandOption<TData>) => void;
+    open?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    showValueWhenNoMatch?: boolean;
 };
 declare const Combobox: <TData extends OptionData>(props: ComboboxProps<TData> & React$1.RefAttributes<HTMLButtonElement>) => React$1.ReactElement | null;
 
@@ -1590,7 +1594,8 @@ type UseControllableStateOptions<T = any> = {
 };
 type UseControllableStateResult<T = any> = {
     value: T;
-    updateState: (nextValue: T | ((prev: T) => T)) => void;
+    setValue: (nextValue: T | ((prev: T) => T)) => void;
+    isControlled: boolean;
 };
 declare const useControllableState: <T = any>({ defaultValue, value }: UseControllableStateOptions<T>) => UseControllableStateResult<T>;
 

package/dist/index.d.ts

@@ -503,7 +503,7 @@ interface DialogAlertProps {
     outlet?: React.ReactNode | null;
     persistent?: boolean;
 }
-type TemplateKeys = "success.saved" | "success.deleted" | "success.removed" | "error.api_db_error" | "error.permission_denied" | "error.session_expired" | "error.user_not_found" | "error.data_not_found" | "error.data_restrict_editing" | "error.network_timeout_error" | "error.queue_full" | "error.invalid_data_format" | "error.data_linked_to_system_data" | "error.pending_workflow_conflict" | "error.invalid_incomplete_data" | "error.client_side_error" | "error.system_limitation" | "error.timeout" | "error.duplicate_data" | "error.something_went_wrong" | "confirm.delete" | "confirm.inactive" | "confirm.active" | "confirm.leave_page" | "confirm.remove" | "confirm.logout";
+type TemplateKeys = "success.saved" | "success.deleted" | "success.removed" | "error.api_db_error" | "error.permission_denied" | "error.session_expired" | "error.user_not_found" | "error.data_not_found" | "error.data_restrict_editing" | "error.network_timeout_error" | "error.queue_full" | "error.invalid_data_format" | "error.data_linked_to_system_data" | "error.pending_workflow_conflict" | "error.invalid_incomplete_data" | "error.client_side_error" | "error.system_limitation" | "error.timeout" | "error.duplicate_data" | "error.something_went_wrong" | "confirm.delete" | "confirm.inactive" | "confirm.active" | "confirm.leave_page" | "confirm.reset_form" | "confirm.remove" | "confirm.logout";
 type DialogAlertTemplateUnit = Omit<DialogAlertProps, "open" | "onOpenChange">;
 type DialogAlertTemplates = Record<TemplateKeys, DialogAlertTemplateUnit>;
 type DialogAlertI18nResource = Resource;
@@ -1458,6 +1458,10 @@ type ComboboxProps<TData extends OptionData> = React$1.AriaAttributes & Omit<Vir
     showClear?: boolean;
     onBlur?: (event: React$1.FocusEvent<HTMLButtonElement, Element>) => void;
     onFocus?: (event: React$1.FocusEvent<HTMLButtonElement, Element>) => void;
+    onClear?: (selected: string, option: VirtualizedCommandOption<TData>) => void;
+    open?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    showValueWhenNoMatch?: boolean;
 };
 declare const Combobox: <TData extends OptionData>(props: ComboboxProps<TData> & React$1.RefAttributes<HTMLButtonElement>) => React$1.ReactElement | null;
 
@@ -1590,7 +1594,8 @@ type UseControllableStateOptions<T = any> = {
 };
 type UseControllableStateResult<T = any> = {
     value: T;
-    updateState: (nextValue: T | ((prev: T) => T)) => void;
+    setValue: (nextValue: T | ((prev: T) => T)) => void;
+    isControlled: boolean;
 };
 declare const useControllableState: <T = any>({ defaultValue, value }: UseControllableStateOptions<T>) => UseControllableStateResult<T>;
 

package/dist/index.js

@@ -4371,18 +4371,25 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React26__namespace.useState(value ?? defaultValue);
+  const isControlled = typeof value !== "undefined";
+  const [internalValue, setInternalValue] = React26__namespace.useState(() => {
+    return isControlled ? value : defaultValue;
+  });
   React26__namespace.useEffect(() => {
-    if (value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const updateState = React26__namespace.useCallback((nextValue) => {
-    setInternalValue(nextValue);
-  }, []);
+    if (!isControlled) return;
+    setInternalValue(value);
+  }, [isControlled, value]);
+  const setValue = React26__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) return;
+      setInternalValue(nextValue);
+    },
+    [isControlled]
+  );
   return {
-    value: internalValue,
-    updateState
+    value: isControlled ? value : internalValue,
+    setValue,
+    isControlled
   };
 };
 var useControllableState_default = useControllableState;
@@ -5542,6 +5549,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?",
@@ -5781,6 +5793,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",
@@ -11238,40 +11256,71 @@ var ComboboxInner = ({
   notFoundContent,
   searchPlaceholder,
   showSearch,
+  open,
+  showValueWhenNoMatch,
+  onOpenChange,
+  onClear,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React26__namespace.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__namespace.useMemo(() => {
-    if (!selectedValue) return placeholder2;
-    const selectedOptionFound = options?.find((option) => {
+  const currentSelectedOption = React26__namespace.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__namespace.useMemo(() => {
+    if (!selectedValue) return placeholder2;
+    if (currentSelectedOption) {
+      return getLabelField(currentSelectedOption);
+    }
+    if (showValueWhenNoMatch) {
+      return selectedValue;
+    }
+    return null;
+  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
   const handleSelect = React26__namespace.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__namespace.useCallback(
+    (isOpen) => {
+      if (disabled) return;
+      setOpenPopover(isOpen);
+      if (typeof onOpenChange === "function") {
+        onOpenChange(isOpen);
+      }
     },
-    [onSelect, setSelectedValue]
+    [disabled, onOpenChange, setOpenPopover]
   );
   const handleClear = React26__namespace.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
+      if (typeof onClear === "function") {
+        onClear(selectedValue, currentSelectedOption);
+      }
     },
-    [setSelectedValue]
+    [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -11279,7 +11328,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",
@@ -11289,7 +11338,7 @@ var ComboboxInner = ({
           "transition-all",
           className
         ),
-        "data-state": open ? "open" : "closed",
+        "data-state": openPopover ? "open" : "closed",
         disabled,
         onFocus,
         onBlur,