@thecb/components 10.9.0-beta.8 → 10.9.0-beta.9

package/dist/index.cjs.js

@@ -26767,9 +26767,7 @@ var inject = function inject(baseString) {
   };
 };
 var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
-  // TODO: fix this
   var maxFormatExceeded = rawValue.length >= formatter.formats.length;
-  console.log("🚀 ~ maxFormatExceeded:", maxFormatExceeded);
   if (maxFormatExceeded) {
     return formattedIndex;
   } else {
@@ -26781,9 +26779,7 @@ var formattedToUnformattedIndex = function formattedToUnformattedIndex(formatted
   }
 };
 var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex, rawValue, formatter, del) {
-  // TODO: fix this
-  var maxFormatExceeded = rawValue.length >= formatter.formats.length;
-  console.log("🚀 ~ unformattedToFormattedIndex ~ maxFormatExceeded:", maxFormatExceeded); // If forced to stay formatted, offset by delims - 1
+  var maxFormatExceeded = rawValue.length >= formatter.formats.length; // If forced to stay formatted, offset by delims - 1
   // This is done so the component doesn't assume that any added chars will be kept
   // (i.e. if an external constraint is applied)
 
@@ -26810,15 +26806,17 @@ var FormattedInput = function FormattedInput(_ref) {
     props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
   var inputEl = React.useRef(null);
   var _useState = React.useState({
-      selectionStart: 0,
-      selectionEnd: 0,
-      rawValue: value,
       formattedValue: format$1(formatter)(value)
     }),
     _useState2 = _slicedToArray$1(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var isDeleteRef = React.useRef(false);
+  var stateRefs = React.useRef({
+    selectionStart: 0,
+    selectionEnd: 0,
+    isDelete: false,
+    rawValue: ''
+  });
   React.useLayoutEffect(function () {
     // A lot of the work here is cursor manipulation
     if (inputEl.current && inputEl.current === document.activeElement) {
@@ -26826,52 +26824,54 @@ var FormattedInput = function FormattedInput(_ref) {
     }
   });
   var handleChange = function handleChange(event) {
-    // Detect the key event before the value change
-    // const deleteKeyPressed = isDeleteRef.current;
-    debugger;
-    var deleteKeyPressed = event.key === "Backspace" || event.key === "Delete";
     /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
-             * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
-             * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-             * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
-             * old unformatted value.
-             */
-
+    * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
+    * the unformatted value for the user's onChange, the formatted string and unformatted injection need
+    * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+    * old unformatted value.
+    */
     var injectionLength = event.target.value.length - state.formattedValue.length;
-    var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
-    var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
+    var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
+    var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
     // Need to find where to put it
 
-    var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
-    var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.rawValue, formatter); // Unformat the previous formatted value for injection
+    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
+    var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
     // Using the relevant format string, strips away chars not marked with the formatChar
 
-    var unformattedOldValue = unformat(formatter)(state.formattedValue, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+    var unformattedOldValue = unformat(formatter)(state.formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
 
     var injectIntoOldValue = inject(unformattedOldValue);
+    var deleteKeyPressed = stateRefs.current.isDelete;
     var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-    var lengthDifference = unformattedNewValue.length - state.rawValue.length;
-    var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
+    var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
+    var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
     // Applied by useLayoutEffect
 
-    var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? state.selectionStart : state.selectionEnd;
+    var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
     setState({
       selectionStart: newFormattedCursorPosition,
       selectionEnd: newFormattedCursorPosition,
       rawValue: unformattedNewValue,
       formattedValue: format$1(formatter)(unformattedNewValue)
-    });
+    }); // Apply the external onChange function to the raw underlying string
+    // This is where the user generally updates the input value
+
     if (onChange) {
       onChange(unformattedNewValue);
-    } // Reset delete flag
-
-    isDeleteRef.current = false;
+    }
   };
   return /*#__PURE__*/React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
-    value: state.formattedValue,
+    value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
-      isDeleteRef.current = event.key === "Backspace" || event.key === "Delete";
+      // Keep track of the state of the input before onChange
+      stateRefs.current = {
+        isDelete: event.key === "Backspace" || event.key === "Delete",
+        selectionStart: event.target.selectionStart,
+        selectionEnd: event.target.selectionEnd,
+        rawValue: value
+      };
     },
     onChange: handleChange
   }));