@thecb/components 11.1.9 → 11.1.11-beta.0

package/dist/index.esm.js

@@ -46854,7 +46854,7 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
   var nextDate = dueDate || nextAutopayDate;
   var modalExtraProps = {
     modalHeaderText: autoPayActive ? deactivateText : activateText,
-    modalBodyText: autoPayActive ? "Are you sure you want to stop ".concat(plan, "? ").concat(!inactive && nextDate && nextDate !== "On" ? "Your next payment will be due on " + nextDate + "." : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
+    modalBodyText: autoPayActive ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph$1, null, "Are you sure you want to stop ", plan, "?", !inactive && nextDate && nextDate !== "On" ? "Your next payment will be due on " + nextDate + "." : ""), !isPaymentPlan && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Paragraph$1, null, "If your next autopayment is scheduled to run today, you may be billed today and autopay will then stop for the next billing cycle."))) : generateMethodNeededText(plan, allowedPaymentInstruments),
     continueButtonText: autoPayActive ? "Stop ".concat(shortPlan) : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
@@ -50732,8 +50732,7 @@ var FilterButton$1 = /*#__PURE__*/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.createElement(StyledFilterButton, {
@@ -50751,7 +50750,6 @@ var FilterButton$1 = /*#__PURE__*/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.createElement(Center, {
     as: "span",
@@ -50936,19 +50934,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,
@@ -51149,75 +51134,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     opened = _useState2[0],
     setOpened = _useState2[1];
-
-  // State to manage the currently selected options
   var _useState3 = 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 = useState(activeAppliedOptions || []),
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     appliedOptions = _useState6[0],
     setAppliedOptions = _useState6[1];
-
-  // State to track whether the user has interacted with the component
-  var _useState7 = 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 = 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 = useRef(null);
   var filterButtonRef = useRef(null);
   var applyFilterButtonRef = 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("");
-    }
-  };
   useEffect$1(function () {
     openedRef.current = opened;
     if (!opened) {
-      if (hasInteracted) {
-        onApply(selectedOptions);
-        setAppliedOptions(selectedOptions);
-      }
-    } else {
-      setHasInteracted(true);
+      onApply(selectedOptions);
+      setAppliedOptions(selectedOptions);
     }
   }, [opened]);
-  useEffect$1(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]);
   useEffect$1(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === "Escape") {
@@ -51259,8 +51210,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.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,