@sustaina/shared-ui 1.52.0 → 1.54.0

package/dist/index.d.mts

@@ -826,6 +826,7 @@ declare const useGridSettingsStore: zustand.UseBoundStore<zustand.StoreApi<UseGr
 
 interface IconProps extends React$1.SVGProps<SVGSVGElement> {
     size?: number | string;
+    strokeWidth?: number | string;
 }
 
 declare const AdministrationIcon: React__default.FC<IconProps>;
@@ -1734,8 +1735,9 @@ type InputNumberProps = NumericFormatProps<InputProps> & {
     min?: number;
     max?: number;
     onStepChange?: (value: number) => void;
+    autoFormatDecimal?: boolean;
 };
-declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
+declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, autoFormatDecimal, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
 
 type PermissionAction = "CREATE" | "READ" | "EDIT" | "DELETE" | "NOTIFY" | "CREATE_DRAFT" | "REQUIRE_SITE";
 type PermissionString = `${string}.${PermissionAction}`;

package/dist/index.d.ts

@@ -826,6 +826,7 @@ declare const useGridSettingsStore: zustand.UseBoundStore<zustand.StoreApi<UseGr
 
 interface IconProps extends React$1.SVGProps<SVGSVGElement> {
     size?: number | string;
+    strokeWidth?: number | string;
 }
 
 declare const AdministrationIcon: React__default.FC<IconProps>;
@@ -1734,8 +1735,9 @@ type InputNumberProps = NumericFormatProps<InputProps> & {
     min?: number;
     max?: number;
     onStepChange?: (value: number) => void;
+    autoFormatDecimal?: boolean;
 };
-declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
+declare const InputNumber: ({ customInputProps, showStepper, step, min, max, onStepChange, onValueChange, value, defaultValue, disabled, onBlur, isAllowed: isAllowedProp, autoFormatDecimal, decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp, ...props }: InputNumberProps) => react_jsx_runtime.JSX.Element;
 
 type PermissionAction = "CREATE" | "READ" | "EDIT" | "DELETE" | "NOTIFY" | "CREATE_DRAFT" | "REQUIRE_SITE";
 type PermissionString = `${string}.${PermissionAction}`;

package/dist/index.js

@@ -1176,18 +1176,25 @@ var DataEntryIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */ j
     ]
   }
 );
-var DecreaseIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+var DecreaseIcon = ({
+  size = "1em",
+  strokeWidth = 1.5,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 9 4",
-    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
     width: size,
     height: size,
     className,
-    "aria-hidden": true,
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.572754", y: "0.441406", width: "7.57659", height: "2.75347", fill: "currentColor" })
+    children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
   }
 );
 var SuiDotsVerticalIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2325,46 +2332,27 @@ var OutlineArrowIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ *
     )
   }
 );
-var PlusIcon = ({ size = "1em", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var PlusIcon = ({
+  size = "1em",
+  strokeWidth = 1.5,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 9 9",
-    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
     width: size,
     height: size,
     className,
-    "aria-hidden": true,
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M3.12305 8.23047L3.12305 0.653882L5.87652 0.653882L5.87652 8.23047L3.12305 8.23047Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M3.12305 8.23047L3.12305 0.653882L5.87652 0.653882L5.87652 8.23047L3.12305 8.23047Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M0.710938 3.06641L8.28752 3.06641V5.81988L0.710937 5.81988L0.710938 3.06641Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M0.710938 3.06641L8.28752 3.06641V5.81988L0.710937 5.81988L0.710938 3.06641Z",
-          fill: "currentColor"
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
     ]
   }
 );
@@ -15869,8 +15857,11 @@ var Input2 = React__namespace.forwardRef(
   }
 );
 Input2.displayName = "Input";
-var createSourceInfo = () => ({
-  source: "prop"
+
+// src/components/inputNumber/helper.ts
+var createSourceInfo = (event) => ({
+  event,
+  source: event ? "event" : "prop"
 });
 var parseToNumber = (val) => {
   if (typeof val === "number") return val;
@@ -15880,6 +15871,112 @@ var parseToNumber = (val) => {
   }
   return void 0;
 };
+var truncateToFixed = (num, scale) => {
+  if (scale === 0) return Math.trunc(num).toString();
+  const sign = num < 0 ? "-" : "";
+  const abs = Math.abs(num);
+  const str = abs.toString();
+  const dotIndex = str.indexOf(".");
+  let intPart;
+  let fracPart;
+  if (dotIndex === -1) {
+    intPart = str;
+    fracPart = "";
+  } else {
+    intPart = str.slice(0, dotIndex);
+    fracPart = str.slice(dotIndex + 1, dotIndex + 1 + scale);
+  }
+  fracPart = fracPart.padEnd(scale, "0");
+  return `${sign}${intPart}.${fracPart}`;
+};
+var truncateStringToFixed = (str, scale) => {
+  const trimmed = str.trim();
+  if (trimmed === "" || trimmed === "-") return "0" + (scale > 0 ? "." + "0".repeat(scale) : "");
+  const negative = trimmed.startsWith("-");
+  const unsigned = negative ? trimmed.slice(1) : trimmed;
+  const dotIndex = unsigned.indexOf(".");
+  let intPart;
+  let fracPart;
+  if (dotIndex === -1) {
+    intPart = unsigned || "0";
+    fracPart = "";
+  } else {
+    intPart = unsigned.slice(0, dotIndex) || "0";
+    fracPart = unsigned.slice(dotIndex + 1, dotIndex + 1 + scale);
+  }
+  if (scale === 0) return (negative ? "-" : "") + intPart;
+  fracPart = fracPart.padEnd(scale, "0");
+  return (negative ? "-" : "") + intPart + "." + fracPart;
+};
+var clamp = (value, min, max) => {
+  if (max !== void 0 && value > max) return max;
+  if (min !== void 0 && value < min) return min;
+  return value;
+};
+function useAutoFormatDecimal({
+  enabled,
+  decimalScale,
+  value,
+  defaultValue
+}) {
+  const blurScale = enabled ? decimalScale ?? 2 : void 0;
+  const isUserEditingRef = React__namespace.useRef(false);
+  const [formattedValue, setFormattedValue] = React__namespace.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__namespace.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 === void 0 || value === null || value === "") {
+      setFormattedValue(void 0);
+    }
+  }, [value, enabled, blurScale]);
+  const onEdit = React__namespace.useCallback(
+    (values, sourceInfo) => {
+      if (!enabled || sourceInfo.source !== "event") return;
+      isUserEditingRef.current = true;
+      setFormattedValue(values.value || void 0);
+    },
+    [enabled]
+  );
+  const onBlur = React__namespace.useCallback(
+    (truncatedStr) => {
+      isUserEditingRef.current = false;
+      if (!enabled || blurScale === void 0) return;
+      setFormattedValue(truncatedStr);
+    },
+    [enabled, blurScale]
+  );
+  const resetEditing = React__namespace.useCallback(() => {
+    isUserEditingRef.current = false;
+  }, []);
+  return { formattedValue, blurScale, onEdit, onBlur, resetEditing, setFormattedValue };
+}
+function useStepper({ value, step, min, max, disabled, onStep }) {
+  const [changed, setChanged] = React__namespace.useState(false);
+  const changeValue = React__namespace.useCallback(
+    (delta) => {
+      const current = value ?? 0;
+      const clamped = clamp(current + delta, min, max);
+      setChanged(true);
+      onStep(clamped);
+    },
+    [value, max, min, onStep]
+  );
+  const increment = React__namespace.useCallback(() => changeValue(step), [changeValue, step]);
+  const decrement = React__namespace.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 };
+}
 var InputNumber = ({
   customInputProps,
   showStepper = false,
@@ -15892,58 +15989,106 @@ var InputNumber = ({
   defaultValue,
   disabled,
   onBlur,
+  isAllowed: isAllowedProp,
+  autoFormatDecimal = false,
+  decimalScale: decimalScaleProp,
+  fixedDecimalScale: fixedDecimalScaleProp,
   ...props
 }) => {
   const [internalValue, setInternalValue] = React__namespace.useState(
     () => parseToNumber(value) ?? parseToNumber(defaultValue)
   );
-  const [stepperChanged, setStepperChanged] = React__namespace.useState(false);
+  const internalValueRef = React__namespace.useRef(internalValue);
+  const rawValueRef = React__namespace.useRef("");
+  const isBlurClampedRef = React__namespace.useRef(false);
   React__namespace.useEffect(() => {
     const parsed = parseToNumber(value);
-    if (parsed !== void 0) setInternalValue(parsed);
+    if (parsed !== void 0) {
+      internalValueRef.current = parsed;
+      setInternalValue(parsed);
+    }
+    isBlurClampedRef.current = false;
   }, [value]);
-  const notifyChange = (newValue) => {
-    onStepChange?.(newValue);
-    onValueChange?.(
-      {
-        floatValue: newValue,
-        formattedValue: String(newValue),
-        value: String(newValue)
+  const autoFormat = useAutoFormatDecimal({
+    enabled: autoFormatDecimal,
+    decimalScale: decimalScaleProp,
+    value,
+    defaultValue
+  });
+  const notifyChange = React__namespace.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,
+    step,
+    min,
+    max,
+    disabled,
+    onStep: React__namespace.useCallback(
+      (clamped) => {
+        setInternalValue(clamped);
+        if (autoFormat.blurScale !== void 0) {
+          autoFormat.setFormattedValue(truncateToFixed(clamped, autoFormat.blurScale));
+        }
+        notifyChange(clamped);
       },
-      createSourceInfo()
-    );
-  };
-  const handleValueChange = (values, sourceInfo) => {
-    setInternalValue(values.floatValue);
-    onValueChange?.(values, sourceInfo);
-    if (values.floatValue !== void 0) {
-      onStepChange?.(values.floatValue);
-    }
-  };
-  const handleBlur = (event) => {
-    onBlur?.(event);
-    if (internalValue === void 0) return;
-    const clamped = max !== void 0 && internalValue > max ? max : min !== void 0 && internalValue < min ? min : internalValue;
-    if (clamped !== internalValue) {
-      setInternalValue(clamped);
-      notifyChange(clamped);
-    }
-  };
-  const isAllowed = (values) => {
-    const { floatValue } = values;
-    if (floatValue !== void 0 && max !== void 0 && floatValue > max) return false;
-    if (props.isAllowed && !props.isAllowed(values)) return false;
-    return true;
-  };
-  const changeValue = (delta) => {
-    const current = internalValue ?? 0;
-    const clamped = delta > 0 && max !== void 0 ? Math.min(current + delta, max) : delta < 0 && min !== void 0 ? Math.max(current + delta, min) : current + delta;
-    setInternalValue(clamped);
-    setStepperChanged(true);
-    notifyChange(clamped);
-  };
-  const isIncrementDisabled = disabled || max !== void 0 && (internalValue ?? 0) >= max;
-  const isDecrementDisabled = disabled || min !== void 0 && (internalValue ?? 0) <= min;
+      [autoFormat, notifyChange]
+    )
+  });
+  const handleValueChange = React__namespace.useCallback(
+    (values, sourceInfo) => {
+      internalValueRef.current = values.floatValue;
+      rawValueRef.current = values.value;
+      setInternalValue(values.floatValue);
+      if (sourceInfo.source === "event") {
+        isBlurClampedRef.current = false;
+      }
+      onValueChange?.(values, sourceInfo);
+      if (values.floatValue !== void 0) onStepChange?.(values.floatValue);
+      autoFormat.onEdit(values, sourceInfo);
+    },
+    [onValueChange, onStepChange, autoFormat]
+  );
+  const handleBlur = React__namespace.useCallback(
+    (event) => {
+      onBlur?.(event);
+      const latestValue = internalValueRef.current;
+      if (latestValue === void 0) {
+        autoFormat.resetEditing();
+        return;
+      }
+      const clamped = clamp(latestValue, min, max);
+      const wasClamped = clamped !== latestValue;
+      if (wasClamped) {
+        isBlurClampedRef.current = true;
+        internalValueRef.current = clamped;
+        rawValueRef.current = String(clamped);
+        setInternalValue(clamped);
+        onValueChange?.(
+          { floatValue: clamped, formattedValue: String(clamped), value: String(clamped) },
+          createSourceInfo()
+        );
+        onStepChange?.(clamped);
+      }
+      if (autoFormatDecimal && autoFormat.blurScale !== void 0) {
+        const rawStr = wasClamped ? String(clamped) : rawValueRef.current || "0";
+        autoFormat.onBlur(truncateStringToFixed(rawStr, autoFormat.blurScale));
+      } else {
+        autoFormat.resetEditing();
+      }
+    },
+    [onBlur, autoFormatDecimal, autoFormat, min, max, onValueChange, onStepChange]
+  );
+  const effectiveValue = autoFormat.formattedValue !== void 0 ? autoFormat.formattedValue : isBlurClampedRef.current || stepper.changed || autoFormatDecimal ? internalValue : 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",
@@ -15953,11 +16098,16 @@ var InputNumber = ({
     reactNumberFormat.NumericFormat,
     {
       customInput: Input2,
-      value: stepperChanged ? internalValue : value,
+      value: effectiveValue?.toString(),
       defaultValue,
       onValueChange: handleValueChange,
       onBlur: handleBlur,
-      isAllowed,
+      ...isAllowedProp && { isAllowed: isAllowedProp },
+      ...!autoFormatDecimal && {
+        decimalScale: decimalScaleProp,
+        fixedDecimalScale: fixedDecimalScaleProp
+      },
+      ...autoFormat.formattedValue !== void 0 && { valueIsNumericString: true },
       ...props,
       disabled,
       ...customInputProps,
@@ -15966,8 +16116,8 @@ var InputNumber = ({
           "button",
           {
             type: "button",
-            onClick: () => changeValue(step),
-            disabled: isIncrementDisabled,
+            onClick: stepper.increment,
+            disabled: stepper.isIncrementDisabled,
             className: buttonClass,
             tabIndex: -1,
             "aria-label": "Increment",
@@ -15978,8 +16128,8 @@ var InputNumber = ({
           "button",
           {
             type: "button",
-            onClick: () => changeValue(-step),
-            disabled: isDecrementDisabled,
+            onClick: stepper.decrement,
+            disabled: stepper.isDecrementDisabled,
             className: buttonClass,
             tabIndex: -1,
             "aria-label": "Decrement",