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

package/dist/index.cjs.js

@@ -28470,12 +28470,10 @@ var ProcessingFee = function ProcessingFee(_ref) {
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
 
 var activeColor$6 = MATISSE_BLUE;
-var disabledColor$1 = MANATEE_GREY; // or GREY_CHATEAU?
 var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$x = {
-  activeColor: activeColor$6,
-  disabledColor: disabledColor$1,
-  inactiveBorderColor: inactiveBorderColor
+  inactiveBorderColor: inactiveBorderColor,
+  activeColor: activeColor$6
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -28486,8 +28484,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 borderColor = _ref.borderColor;
-  return "1px solid ".concat(borderColor);
+  var inactiveBorderColor = _ref.inactiveBorderColor;
+  return "1px solid ".concat(inactiveBorderColor);
 }, function (_ref2) {
   var activeColor = _ref2.activeColor;
   return activeColor;
@@ -28496,11 +28494,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 borderColor = _ref3.borderColor;
-  return "1px solid ".concat(borderColor, ";");
+  var activeColor = _ref3.activeColor;
+  return "1px solid ".concat(activeColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var borderColor = _ref4.borderColor;
-  return "0px 0px 2px 1px ".concat(borderColor, ";");
+  var activeColor = _ref4.activeColor;
+  return "0px 0px 2px 1px ".concat(activeColor, ";");
 });
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   var _ref5$id = _ref5.id,
@@ -28517,11 +28515,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     _ref5$handleChange = _ref5.handleChange,
     handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
     field = _ref5.field,
-    config = _ref5.config,
-    _ref5$disabled = _ref5.disabled,
-    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
-    _ref5$title = _ref5.title,
-    title = _ref5$title === void 0 ? "" : _ref5$title;
+    config = _ref5.config;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
       return c.value;
@@ -28536,10 +28530,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
-    borderColor: disabled ? themeValues.inactiveBorderColor : themeValues.activeColor,
-    title: title
+    activeColor: themeValues.activeColor
   }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
-    disabled: disabled,
     "aria-invalid": ariaInvalid,
     style: {
       marginTop: 0
@@ -28558,8 +28550,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: disabled ? themeValues.disabledColor : themeValues.activeColor,
-    borderColor: themeValues.inactiveBorderColor
+    activeColor: themeValues.activeColor,
+    inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
@@ -46479,7 +46471,7 @@ var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(
 
 var disabledBackgroundColor$1 = TRANSPARENT;
 var disabledBorderColor$1 = GHOST_GREY;
-var disabledColor$2 = MANATEE_GREY;
+var disabledColor$1 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
@@ -46487,7 +46479,7 @@ var color$b = ROYAL_BLUE_VIVID;
 var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
-  disabledColor: disabledColor$2,
+  disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
@@ -50743,7 +50735,8 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     truncateBtnTextWidth = _ref.truncateBtnTextWidth,
     filterLabel = _ref.filterLabel,
     selectedOptions = _ref.selectedOptions,
-    extraStyles = _ref.extraStyles;
+    extraStyles = _ref.extraStyles,
+    dataAppliedOptions = _ref.dataAppliedOptions;
   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, {
@@ -50761,6 +50754,7 @@ 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",
@@ -50945,6 +50939,19 @@ 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,
@@ -51145,41 +51152,75 @@ 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;
+    truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW,
+    activeAppliedOptions = _ref.activeAppliedOptions;
+  // State to manage whether the dropdown is open or closed
   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];
-  var _useState5 = React.useState([]),
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  var _useState5 = React.useState(activeAppliedOptions || []),
     _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);
-  var handleOnClose = function handleOnClose() {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
-  };
+
+  // Hook to detect clicks outside the component and close the dropdown
   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) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
     }
   }, [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") {
@@ -51221,7 +51262,8 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     truncateBtnTextWidth: truncateBtnTextWidth,
     filterLabel: filterLabel,
     selectedOptions: selectedOptions,
-    extraStyles: btnExtraStyles
+    extraStyles: btnExtraStyles,
+    dataAppliedOptions: appliedOptions === null || appliedOptions === void 0 ? void 0 : appliedOptions.length
   }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,