@thecb/components 11.1.9-beta.0 → 11.1.10-beta.0

package/dist/index.cjs.js

@@ -28470,10 +28470,12 @@ var ProcessingFee = function ProcessingFee(_ref) {
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
 
 var activeColor$6 = MATISSE_BLUE;
+var disabledColor$1 = MANATEE_GREY;
 var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$x = {
-  inactiveBorderColor: inactiveBorderColor,
-  activeColor: activeColor$6
+  activeColor: activeColor$6,
+  disabledColor: disabledColor$1,
+  inactiveBorderColor: inactiveBorderColor
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -28484,8 +28486,8 @@ var Circle = styled__default.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
 })(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
-  var inactiveBorderColor = _ref.inactiveBorderColor;
-  return "1px solid ".concat(inactiveBorderColor);
+  var borderColor = _ref.borderColor;
+  return "1px solid ".concat(borderColor);
 }, function (_ref2) {
   var activeColor = _ref2.activeColor;
   return activeColor;
@@ -28494,11 +28496,11 @@ var InputAndLabelContainer = styled__default(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
 })(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
-  var activeColor = _ref3.activeColor;
-  return "1px solid ".concat(activeColor, ";");
+  var borderColor = _ref3.borderColor;
+  return "1px solid ".concat(borderColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var activeColor = _ref4.activeColor;
-  return "0px 0px 2px 1px ".concat(activeColor, ";");
+  var borderColor = _ref4.borderColor;
+  return "0px 0px 2px 1px ".concat(borderColor, ";");
 });
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   var _ref5$id = _ref5.id,
@@ -28515,7 +28517,9 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     _ref5$handleChange = _ref5.handleChange,
     handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
     field = _ref5.field,
-    config = _ref5.config;
+    config = _ref5.config,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
       return c.value;
@@ -28530,8 +28534,9 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
-    activeColor: themeValues.activeColor
+    borderColor: disabled ? themeValues.inactiveBorderColor : themeValues.activeColor
   }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
+    disabled: disabled,
     "aria-invalid": ariaInvalid,
     style: {
       marginTop: 0
@@ -28550,8 +28555,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
   }, /*#__PURE__*/React__default.createElement(Circle, {
-    activeColor: themeValues.activeColor,
-    inactiveBorderColor: themeValues.inactiveBorderColor
+    activeColor: disabled ? themeValues.disabledColor : themeValues.activeColor,
+    borderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
@@ -46471,7 +46476,7 @@ var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(
 
 var disabledBackgroundColor$1 = TRANSPARENT;
 var disabledBorderColor$1 = GHOST_GREY;
-var disabledColor$1 = MANATEE_GREY;
+var disabledColor$2 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
@@ -46479,7 +46484,7 @@ var color$b = ROYAL_BLUE_VIVID;
 var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
-  disabledColor: disabledColor$1,
+  disabledColor: disabledColor$2,
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
@@ -46845,8 +46850,8 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
     onClick = _ref.onClick,
     onKeyPress = _ref.onKeyPress;
   var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
-    var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
-    var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    var allowsCard = allowedPaymentInstruments === null || allowedPaymentInstruments === void 0 ? void 0 : allowedPaymentInstruments.includes(CC_METHOD);
+    var allowsACH = allowedPaymentInstruments === null || allowedPaymentInstruments === void 0 ? void 0 : allowedPaymentInstruments.includes(ACH_METHOD);
     var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
     return "To set up ".concat(planText, " you must have a saved ").concat(methodRequired, " and address. Do you want to save these now?");
   };
@@ -47354,7 +47359,8 @@ var fallbackValues$N = {
 var Obligation = function Obligation(_ref) {
   var _obligations$, _firstObligation$cust;
   var config = _ref.config,
-    obligations = _ref.obligations,
+    _ref$obligations = _ref.obligations,
+    obligations = _ref$obligations === void 0 ? [] : _ref$obligations,
     actions = _ref.actions,
     autoPayEnabled = _ref.autoPayEnabled,
     autoPayAvailable = _ref.autoPayAvailable,
@@ -47454,6 +47460,7 @@ var Obligation = function Obligation(_ref) {
     isLoading: true
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    obligationAssocID: obligationAssocID,
     autoPayEnabled: autoPayEnabled,
     autoPayAvailable: autoPayAvailable,
     handleAutopayAction: handleAutopayAction,
@@ -47474,6 +47481,7 @@ var Obligation = function Obligation(_ref) {
     isContentLoading: true
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    obligationAssocID: obligationAssocID,
     autoPayEnabled: autoPayEnabled,
     autoPayAvailable: autoPayAvailable,
     handleAutopayAction: handleAutopayAction,
@@ -50735,8 +50743,7 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
     selectedOptions = _ref.selectedOptions,
-    extraStyles = _ref.extraStyles,
-    dataAppliedOptions = _ref.dataAppliedOptions;
+    extraStyles = _ref.extraStyles;
   var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
   var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
   return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
@@ -50754,7 +50761,6 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     dataQa: "".concat(name, "-filter-button"),
     extraStyles: extraStyles,
     "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
-    "data-applied-options": dataAppliedOptions,
     contentOverride: true
   }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
     as: "span",
@@ -50939,19 +50945,6 @@ var selectOption = function selectOption(option, selectedOptions, setSelectedOpt
     setSelectedOptions(moreOptions);
   }
 };
-var mergeOptions = function mergeOptions(selectedOptions, activeOptions) {
-  if (!activeOptions.length) return selectedOptions;
-  if (!selectedOptions.length) return activeOptions;
-  var mergedOptions = _toConsumableArray(selectedOptions);
-  activeOptions.forEach(function (activeOption) {
-    if (!mergedOptions.some(function (option) {
-      return option.name === activeOption.name;
-    })) {
-      mergedOptions.push(activeOption);
-    }
-  });
-  return mergedOptions;
-};
 
 var useKeyboardNavigation = function useKeyboardNavigation(_ref) {
   var options = _ref.options,
@@ -51152,75 +51145,41 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     searchable = _ref$searchable === void 0 ? true : _ref$searchable,
     themeValues = _ref.themeValues,
     _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
-    truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW,
-    activeAppliedOptions = _ref.activeAppliedOptions;
-  // State to manage whether the dropdown is open or closed
+    truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     opened = _useState2[0],
     setOpened = _useState2[1];
-
-  // State to manage the currently selected options
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-
-  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
-  var _useState5 = React.useState(activeAppliedOptions || []),
+  var _useState5 = React.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     appliedOptions = _useState6[0],
     setAppliedOptions = _useState6[1];
-
-  // State to track whether the user has interacted with the component
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    hasInteracted = _useState8[0],
-    setHasInteracted = _useState8[1];
-
-  // Reference to keep track of the opened state across renders without causing re-renders
   var openedRef = React.useRef(opened);
-
-  // Hook to detect clicks outside the component and close the dropdown
+  var handleOnClose = function handleOnClose() {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
   var containerRef = useOutsideClickHook(function () {
     return handleOnClose();
   });
-
-  // References to various elements within the component
   var dropdownRef = React.useRef(null);
   var filterButtonRef = React.useRef(null);
   var applyFilterButtonRef = React.useRef(null);
-
-  // IDs for accessibility and identification purposes
   var filterDropdownID = "".concat(name, "-filter-dropdown");
   var listGroupID = "".concat(name, "-list-group");
-  var handleOnClose = function handleOnClose() {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
-  };
   React.useEffect(function () {
     openedRef.current = opened;
     if (!opened) {
-      if (hasInteracted) {
-        onApply(selectedOptions);
-        setAppliedOptions(selectedOptions);
-      }
-    } else {
-      setHasInteracted(true);
+      onApply(selectedOptions);
+      setAppliedOptions(selectedOptions);
     }
   }, [opened]);
-  React.useEffect(function () {
-    // Update the applied options state with the current active applied options,
-    // or an empty array if activeAppliedOptions is undefined or null.
-    // This ensures that the current applied options are in sync with the parent component.
-    setAppliedOptions(activeAppliedOptions || []);
-
-    // Merge the selected options with the active applied options.
-    var mergedSelections = mergeOptions(selectedOptions, activeAppliedOptions);
-    setSelectedOptions(mergedSelections);
-  }, [activeAppliedOptions]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === "Escape") {
@@ -51262,8 +51221,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
     selectedOptions: selectedOptions,
-    extraStyles: btnExtraStyles,
-    dataAppliedOptions: appliedOptions === null || appliedOptions === void 0 ? void 0 : appliedOptions.length
+    extraStyles: btnExtraStyles
   }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,