@thecb/components 11.1.8 → 11.1.9

package/dist/index.esm.js

@@ -50732,7 +50732,8 @@ var FilterButton$1 = /*#__PURE__*/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.createElement(StyledFilterButton, {
@@ -50750,6 +50751,7 @@ 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",
@@ -50934,6 +50936,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,
@@ -51134,41 +51149,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 = 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];
-  var _useState5 = useState([]),
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  var _useState5 = 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 = 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);
-  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 = 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) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
     }
   }, [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") {
@@ -51210,7 +51259,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.createElement(FilterDropdown, {
     id: filterDropdownID,
     ref: dropdownRef,