@thecb/components 10.8.3-beta.2 → 10.8.3-beta.3

package/dist/index.cjs.js

@@ -26834,11 +26834,15 @@ var createFormat = function createFormat(formats, formatChar) {
 };
 
 var FormattedInput = function FormattedInput(_ref) {
-  var value = _ref.value,
+  var _ref$isMobile = _ref.isMobile,
+      isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+      value = _ref.value,
       formatter = _ref.formatter,
-      _onChange = _ref.onChange,
-      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties$1(_ref, ["isMobile", "value", "formatter", "onChange"]);
 
+  console.log("🚀 ~ FormattedInput ~ props:", props);
+  console.log('isMobile line', isMobile);
   var inputEl = React.useRef(null);
 
   var _useState = React.useState({
@@ -26858,6 +26862,48 @@ var FormattedInput = function FormattedInput(_ref) {
       inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
     }
   });
+
+  var handleFormat = function handleFormat(event) {
+    console.log('in handle format');
+    /* 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.
+    */
+
+    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
+    // 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
+    // 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 injectIntoOldValue = inject(unformattedOldValue);
+    var unformattedNewValue = state["delete"] ? 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
+    // Applied by useLayoutEffect
+
+    var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
+    setState({
+      selectionStart: newFormattedCursorPosition,
+      selectionEnd: newFormattedCursorPosition,
+      rawValue: state.rawValue,
+      "delete": false,
+      formattedValue: state.formattedValue
+    }); // Apply the external onChange function to the raw underlying string
+    // This is where the user generally updates the input value
+
+    if (onChange) {
+      onChange(unformattedNewValue);
+    }
+  };
+
   return React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
@@ -26870,44 +26916,16 @@ var FormattedInput = function FormattedInput(_ref) {
         "delete": event.key === "Backspace" || event.key === "Delete",
         formattedValue: event.target.value
       });
-    },
-    onChange: function onChange(event) {
-      /* 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.
-       */
-      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
-      // 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
-      // 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 injectIntoOldValue = inject(unformattedOldValue);
-      var unformattedNewValue = state["delete"] ? 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
-      // Applied by useLayoutEffect
-
-      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
-      setState({
-        selectionStart: newFormattedCursorPosition,
-        selectionEnd: newFormattedCursorPosition,
-        rawValue: state.rawValue,
-        "delete": false,
-        formattedValue: state.formattedValue
-      }); // Apply the external onChange function to the raw underlying string
-      // This is where the user generally updates the input value
-
-      if (_onChange) {
-        _onChange(unformattedNewValue);
-      }
+    }
+  }, isMobile ? {
+    onBlur: function onBlur(e) {
+      debugger;
+      handleFormat(e);
+    }
+  } : {
+    onChange: function onChange(e) {
+      debugger;
+      handleFormat(e);
     }
   }));
 };
@@ -28602,7 +28620,7 @@ var Search = function Search(_ref) {
     id: "searchInput",
     role: "search",
     "aria-controls": ariaControlsId,
-    extraStyles: "border-radius: 4px 0 0 4px;; border: none; box-shadow: 0px 1px 2px 0px ".concat(CHARADE_GREY, "1A; font-size: 0.875rem;"),
+    extraStyles: "border-radius: 4px 0 0 4px; border: none; box-shadow: 0px 1px 2px 0px ".concat(CHARADE_GREY, "1A; font-size: 0.875rem;"),
     onKeyDown: function onKeyDown(e) {
       return searchOnKeypress || e.key === "Enter" ? handleSubmit() : noop;
     },
@@ -28630,7 +28648,7 @@ var Search = function Search(_ref) {
     minWidth: "0",
     width: "3rem",
     padding: ".5rem",
-    extraStyles: "\n          height: 48px; \n          margin: 4px 0 0;\n          border-radius: 0 4px 4px 0;\n          background: ".concat(themeValues.searchIconBackgroundColor, ";\n        "),
+    extraStyles: "\n          height: 48px; \n          margin: 4px 0 0;\n          border-radius: 0 4px 4px 0;\n          background: ".concat(themeValues.searchIconBackgroundColor, ";\n          border: none;\n          box-shadow: 0px 1px 2px 0px ").concat(CHARADE_GREY, "1A;\n        "),
     variant: "primary",
     contentOverride: true,
     action: handleSubmit
@@ -48024,8 +48042,6 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
     _ref4$isError = _ref4.isError,
     isError = _ref4$isError === void 0 ? false : _ref4$isError,
-    _ref4$multiCartEnable = _ref4.multiCartEnabled,
-    multiCartEnabled = _ref4$multiCartEnable === void 0 ? false : _ref4$multiCartEnable,
     agencyDisplayName = _ref4.agencyDisplayName;
   var _useState = React.useState(initiallyOpen),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48066,7 +48082,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
   });
-  var agencySubheading = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, multiCartEnabled && agencyDisplayName && /*#__PURE__*/React__default.createElement(Cluster, {
+  var agencySubheading = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, agencyDisplayName && /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center",
     style: {