@sustaina/shared-ui 1.61.0 → 1.62.1

package/dist/index.mjs

@@ -4471,7 +4471,10 @@ var FieldSelect = ({ row, fieldOptions, onChangeField }) => /* @__PURE__ */ jsx(
       children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" })
     }
   ),
-  /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldOptions.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.value, children: f.label }, f.value)) })
+  /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldOptions.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.value, children: f.decorator ? /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+    f.decorator,
+    /* @__PURE__ */ jsx("span", { className: cn(f.labelStyle), children: f.label })
+  ] }) : f.label }, f.value)) })
 ] }) });
 
 // src/components/advanceSearch/types.ts
@@ -5651,7 +5654,7 @@ function MonthCal({
         setMenuYear(year);
       }
     }
-  }, [selectedMonthDate, menuYear]);
+  }, [selectedMonthDate]);
   React.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
@@ -7375,6 +7378,13 @@ var ConditionDropdownInput = ({ row, control, fieldSchema, onClear }) => {
               showClear: hasValue,
               showSearch: true,
               virtual: false,
+              labelRender: (option) => {
+                const opt = option;
+                return /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+                  opt.decorator,
+                  /* @__PURE__ */ jsx("span", { className: cn(opt.labelStyle), children: opt.label })
+                ] });
+              },
               onSelect: (val) => field.onChange(val),
               onClear: handleClear
             }
@@ -17125,60 +17135,11 @@ var Input2 = React.forwardRef(
   }
 );
 Input2.displayName = "Input";
-function useFillDecimalOnBlur({
-  enabled,
-  decimalScale,
-  value,
-  defaultValue
-}) {
-  const blurScale = enabled ? decimalScale ?? 2 : void 0;
-  const isUserEditingRef = React.useRef(false);
-  const [formattedValue, setFormattedValue] = React.useState(() => {
-    if (!enabled) return void 0;
-    const scale = decimalScale ?? 2;
-    const initial = parseToNumber(value) ?? parseToNumber(defaultValue);
-    if (initial !== void 0) return truncateToFixed(initial, scale);
-    return void 0;
-  });
-  React.useEffect(() => {
-    if (!enabled) return;
-    const parsed = parseToNumber(value);
-    if (parsed !== void 0) {
-      if (blurScale !== void 0 && !isUserEditingRef.current) {
-        setFormattedValue(truncateToFixed(parsed, blurScale));
-      }
-    } else if (value === null || value === "") {
-      setFormattedValue(void 0);
-    }
-  }, [value, enabled, blurScale]);
-  const onEdit = React.useCallback(
-    (values, sourceInfo) => {
-      if (!enabled || sourceInfo.source !== "event") return;
-      isUserEditingRef.current = true;
-      setFormattedValue(values.value || void 0);
-    },
-    [enabled]
-  );
-  const onBlur = React.useCallback(
-    (truncatedStr) => {
-      isUserEditingRef.current = false;
-      if (!enabled || blurScale === void 0) return;
-      setFormattedValue(truncatedStr);
-    },
-    [enabled, blurScale]
-  );
-  const resetEditing = React.useCallback(() => {
-    isUserEditingRef.current = false;
-  }, []);
-  return { formattedValue, blurScale, onEdit, onBlur, resetEditing, setFormattedValue };
-}
 function useStepper({ value, step, min, max, disabled, onStep }) {
-  const [changed, setChanged] = React.useState(false);
   const changeValue = React.useCallback(
     (delta) => {
       const current = value ?? 0;
       const clamped = clamp(current + delta, min, max);
-      setChanged(true);
       onStep(clamped);
     },
     [value, max, min, onStep]
@@ -17187,7 +17148,7 @@ function useStepper({ value, step, min, max, disabled, onStep }) {
   const decrement = React.useCallback(() => changeValue(-step), [changeValue, step]);
   const isIncrementDisabled = disabled || max !== void 0 && (value ?? 0) >= max;
   const isDecrementDisabled = disabled || min !== void 0 && (value ?? 0) <= min;
-  return { changed, increment, decrement, isIncrementDisabled, isDecrementDisabled };
+  return { increment, decrement, isIncrementDisabled, isDecrementDisabled };
 }
 var InputNumber = ({
   customInputProps,
@@ -17211,26 +17172,37 @@ var InputNumber = ({
   ...props
 }) => {
   const blurFormatEnabled = fillDecimalOnBlur || truncateDecimalOnBlur;
-  const [internalValue, setInternalValue] = React.useState(
+  const blurScale = blurFormatEnabled ? decimalScaleProp ?? 2 : void 0;
+  const [displayOverride, setDisplayOverride] = React.useState(() => {
+    if (!blurFormatEnabled) return void 0;
+    const scale = decimalScaleProp ?? 2;
+    const initial = parseToNumber(value) ?? parseToNumber(defaultValue);
+    if (initial !== void 0) return truncateToFixed(initial, scale);
+    return void 0;
+  });
+  const [numericValue, setNumericValue] = React.useState(
     () => parseToNumber(value) ?? parseToNumber(defaultValue)
   );
-  const internalValueRef = React.useRef(internalValue);
-  const rawValueRef = React.useRef("");
-  const isBlurClampedRef = React.useRef(false);
-  React.useEffect(() => {
-    const parsed = parseToNumber(value);
-    if (parsed !== void 0) {
-      internalValueRef.current = parsed;
-      setInternalValue(parsed);
-    }
-    isBlurClampedRef.current = false;
-  }, [value]);
-  const autoFormat = useFillDecimalOnBlur({
-    enabled: blurFormatEnabled,
-    decimalScale: decimalScaleProp,
-    value,
-    defaultValue
-  });
+  const isEditingRef = React.useRef(false);
+  const rawRef = React.useRef("");
+  const prevValueRef = React.useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    if (value === "" || value === null) {
+      if (displayOverride !== void 0) setDisplayOverride(void 0);
+      if (numericValue !== void 0) setNumericValue(void 0);
+      isEditingRef.current = false;
+    } else if (!isEditingRef.current) {
+      const num = parseToNumber(value);
+      if (num !== numericValue) setNumericValue(num);
+      if (blurFormatEnabled && num !== void 0) {
+        const formatted = truncateToFixed(num, blurScale);
+        if (formatted !== displayOverride) setDisplayOverride(formatted);
+      } else {
+        if (displayOverride !== void 0) setDisplayOverride(void 0);
+      }
+    }
+  }
   const isAllowed = React.useMemo(() => {
     if (maxIntegerDigits === void 0 && !isAllowedProp) return void 0;
     return (values) => {
@@ -17243,80 +17215,73 @@ var InputNumber = ({
       return isAllowedProp ? isAllowedProp(values) : true;
     };
   }, [maxIntegerDigits, isAllowedProp]);
-  const notifyChange = React.useCallback(
-    (newValue, event) => {
-      internalValueRef.current = newValue;
-      setInternalValue(newValue);
-      onStepChange?.(newValue);
-      onValueChange?.(
-        { floatValue: newValue, formattedValue: String(newValue), value: String(newValue) },
-        createSourceInfo(event)
-      );
-    },
-    [onStepChange, onValueChange]
-  );
   const stepper = useStepper({
-    value: internalValue,
+    value: numericValue,
     step,
     min,
     max,
     disabled,
     onStep: React.useCallback(
       (clamped) => {
-        setInternalValue(clamped);
-        if (autoFormat.blurScale !== void 0) {
-          autoFormat.setFormattedValue(truncateToFixed(clamped, autoFormat.blurScale));
-        }
-        notifyChange(clamped);
+        setNumericValue(clamped);
+        const formatted = blurScale !== void 0 ? truncateToFixed(clamped, blurScale) : String(clamped);
+        setDisplayOverride(formatted);
+        rawRef.current = String(clamped);
+        onStepChange?.(clamped);
+        onValueChange?.(
+          { floatValue: clamped, formattedValue: formatted, value: String(clamped) },
+          createSourceInfo()
+        );
       },
-      [autoFormat, notifyChange]
+      [blurScale, onStepChange, onValueChange]
     )
   });
   const handleValueChange = React.useCallback(
     (values, sourceInfo) => {
-      internalValueRef.current = values.floatValue;
-      rawValueRef.current = values.value;
-      setInternalValue(values.floatValue);
       if (sourceInfo.source === "event") {
-        isBlurClampedRef.current = false;
+        isEditingRef.current = true;
+        setDisplayOverride(values.value);
       }
+      setNumericValue(values.floatValue);
+      rawRef.current = values.value;
       onValueChange?.(values, sourceInfo);
       if (values.floatValue !== void 0) onStepChange?.(values.floatValue);
-      autoFormat.onEdit(values, sourceInfo);
     },
-    [onValueChange, onStepChange, autoFormat]
+    [onValueChange, onStepChange]
   );
   const handleBlur = React.useCallback(
     (event) => {
+      isEditingRef.current = false;
       onBlur?.(event);
-      const latestValue = internalValueRef.current;
-      if (latestValue === void 0) {
-        autoFormat.resetEditing();
+      const currentNumeric = numericValue;
+      if (currentNumeric === void 0) {
+        setDisplayOverride("");
         return;
       }
-      const clamped = clamp(latestValue, min, max);
-      const wasClamped = clamped !== latestValue;
+      const clamped = clamp(currentNumeric, min, max);
+      const wasClamped = clamped !== currentNumeric;
       if (wasClamped) {
-        isBlurClampedRef.current = true;
-        internalValueRef.current = clamped;
-        rawValueRef.current = String(clamped);
-        setInternalValue(clamped);
+        setNumericValue(clamped);
+        rawRef.current = String(clamped);
         onValueChange?.(
           { floatValue: clamped, formattedValue: String(clamped), value: String(clamped) },
           createSourceInfo()
         );
         onStepChange?.(clamped);
       }
-      if (blurFormatEnabled && autoFormat.blurScale !== void 0) {
-        const rawStr = wasClamped ? String(clamped) : rawValueRef.current || String(clamped);
-        autoFormat.onBlur(truncateStringToFixed(rawStr, autoFormat.blurScale));
+      if (blurFormatEnabled && blurScale !== void 0) {
+        const rawStr = wasClamped ? String(clamped) : rawRef.current || String(clamped);
+        setDisplayOverride(truncateStringToFixed(rawStr, blurScale));
+      } else if (wasClamped) {
+        setDisplayOverride(String(clamped));
       } else {
-        autoFormat.resetEditing();
+        setDisplayOverride(void 0);
       }
     },
-    [onBlur, blurFormatEnabled, autoFormat, min, max, onValueChange, onStepChange]
+    [onBlur, blurFormatEnabled, blurScale, numericValue, min, max, onValueChange, onStepChange]
   );
-  const effectiveValue = autoFormat.formattedValue !== void 0 ? autoFormat.formattedValue : isBlurClampedRef.current || stepper.changed || blurFormatEnabled ? internalValue : value;
+  const isValueExplicitlyEmpty = value === "" || value === null;
+  const effectiveValue = isValueExplicitlyEmpty ? "" : displayOverride !== void 0 ? displayOverride : value;
   const buttonClass = cn(
     "flex items-center justify-center h-3 w-5 transition-colors outline-none",
     "text-neutral-400 hover:text-neutral-600 active:text-neutral-900",
@@ -17332,7 +17297,7 @@ var InputNumber = ({
       onBlur: handleBlur,
       ...isAllowed && { isAllowed },
       ...truncateDecimalOnBlur ? {} : fillDecimalOnBlur ? { decimalScale: decimalScaleProp } : { decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp },
-      ...autoFormat.formattedValue !== void 0 && { valueIsNumericString: true },
+      ...displayOverride !== void 0 && { valueIsNumericString: true },
       ...props,
       disabled,
       invalid,