@aspprev/versi-ds 0.4.3 → 0.4.6

package/dist/{chunk-MC4MSOCM.js → chunk-CLXCB6LY.js}

@@ -88,6 +88,23 @@ var FieldFrame_default = FieldFrame;
 
 // src/components/input/Input.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getFormattedCaretPosition(rawValue, formattedValue, selectionStart, formatter, sanitize) {
+  if (selectionStart === null) return null;
+  if (selectionStart >= rawValue.length) return formattedValue.length;
+  const formattedSuffix = sanitize(formatter(rawValue.slice(selectionStart)));
+  return Math.max(
+    0,
+    Math.min(formattedValue.length, formattedValue.length - formattedSuffix.length)
+  );
+}
+function restoreCaretPosition(inputRef, position) {
+  if (position === null || typeof window === "undefined") return;
+  window.requestAnimationFrame(() => {
+    const input = inputRef.current;
+    if (!input || document.activeElement !== input) return;
+    input.setSelectionRange(position, position);
+  });
+}
 var BaseInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(
   "input",
   {
@@ -150,6 +167,7 @@ var Input = ({
   prefix,
   suffix,
   mask,
+  formatter,
   disabled,
   error,
   disallowSpaces,
@@ -248,6 +266,44 @@ var Input = ({
   };
   const renderMaskedInput = (inputType) => {
     const autoCompleteValue = rest.autoComplete;
+    if (formatter) {
+      const currentValue = String(safeValue(field.value));
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ...rest,
+          ...accessibilityProps,
+          name,
+          ref: inputRef,
+          type: inputType === "date" ? "text" : inputType,
+          value: currentValue,
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            const formattedValue = sanitizeValue(formatter(rawValue));
+            const caretPosition = getFormattedCaretPosition(
+              rawValue,
+              formattedValue,
+              event.target.selectionStart,
+              formatter,
+              sanitizeValue
+            );
+            helpers.setValue(formattedValue);
+            restoreCaretPosition(inputRef, caretPosition);
+            rest.onChange?.({
+              ...event,
+              target: { ...event.target, value: formattedValue },
+              currentTarget: { ...event.currentTarget, value: formattedValue }
+            });
+          },
+          onBlur: field.onBlur,
+          onPaste: handlePasteFormik,
+          placeholder,
+          className: classNames2(FIELD_INPUT_CLASS, className),
+          autoComplete: autoCompleteValue,
+          disabled
+        }
+      );
+    }
     if (mask === "currency") {
       const rawCurrencyValue = typeof field.value === "string" || typeof field.value === "number" ? field.value : "";
       return /* @__PURE__ */ jsx2(
@@ -531,6 +587,7 @@ var InputStandalone = (props) => {
     prefix,
     suffix,
     mask,
+    formatter,
     disabled,
     error,
     errorText,
@@ -615,6 +672,41 @@ var InputStandalone = (props) => {
   };
   const renderMaskedInput = (inputType) => {
     const autoCompleteValue = rest.autoComplete;
+    if (formatter) {
+      const currentValue = String(safeValue(rest.value));
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ...rest,
+          ...accessibilityProps,
+          ref: inputRef,
+          type: inputType === "date" ? "text" : inputType,
+          value: currentValue,
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            const formattedValue = sanitizeValue(formatter(rawValue));
+            const caretPosition = getFormattedCaretPosition(
+              rawValue,
+              formattedValue,
+              event.target.selectionStart,
+              formatter,
+              sanitizeValue
+            );
+            restoreCaretPosition(inputRef, caretPosition);
+            rest.onChange?.({
+              ...event,
+              target: { ...event.target, value: formattedValue },
+              currentTarget: { ...event.currentTarget, value: formattedValue }
+            });
+          },
+          onPaste: handlePasteStandalone,
+          placeholder: rest.placeholder,
+          className: classNames2(FIELD_INPUT_CLASS, className),
+          autoComplete: autoCompleteValue,
+          disabled
+        }
+      );
+    }
     if (mask === "currency") {
       const rawCurrencyValue = typeof rest.value === "string" || typeof rest.value === "number" ? rest.value : "";
       return /* @__PURE__ */ jsx2(
@@ -3653,4 +3745,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-MC4MSOCM.js.map
+//# sourceMappingURL=chunk-CLXCB6LY.js.map