@thecb/components 11.1.8 → 11.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.1.8",
+  "version": "11.1.9",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -11,6 +11,7 @@ import FilterDropdown from "./__private__/FilterDropdown";
 import SearchBox from "./__private__/SearchBox";
 import FilterableList from "./__private__/FilterableList";
 import useOutsideClickHook from "../../../hooks/use-outside-click";
+import { mergeOptions } from "./__private__/util";
 
 const MultipleSelectFilter = ({
   actions,
@@ -32,34 +33,71 @@ const MultipleSelectFilter = ({
   placeholder = "Search",
   searchable = true,
   themeValues,
-  truncateBtnTextWidth = "15rem"
+  truncateBtnTextWidth = "15rem",
+  activeAppliedOptions
 }) => {
+  // State to manage whether the dropdown is open or closed
   const [opened, setOpened] = useState(false);
+
+  // State to manage the currently selected options
   const [selectedOptions, setSelectedOptions] = useState([]);
-  const [appliedOptions, setAppliedOptions] = useState([]);
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  const [appliedOptions, setAppliedOptions] = useState(
+    activeAppliedOptions || []
+  );
+
+  // State to track whether the user has interacted with the component
+  const [hasInteracted, setHasInteracted] = useState(false);
+
+  // Reference to keep track of the opened state across renders without causing re-renders
   const openedRef = useRef(opened);
 
-  const handleOnClose = () => {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
-  };
+  // Hook to detect clicks outside the component and close the dropdown
   const containerRef = useOutsideClickHook(() => handleOnClose());
+
+  // References to various elements within the component
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
+
+  // IDs for accessibility and identification purposes
   const filterDropdownID = `${name}-filter-dropdown`;
   const listGroupID = `${name}-list-group`;
 
+  const handleOnClose = () => {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
+
   useEffect(() => {
     openedRef.current = opened;
     if (!opened) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
     }
   }, [opened]);
 
+  useEffect(() => {
+    // 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.
+    const mergedSelections = mergeOptions(
+      selectedOptions,
+      activeAppliedOptions
+    );
+    setSelectedOptions(mergedSelections);
+  }, [activeAppliedOptions]);
+
   useEffect(() => {
     const handleKeyDown = event => {
       if (event.key === "Escape") {
@@ -122,6 +160,7 @@ const MultipleSelectFilter = ({
         filterLabel={filterLabel}
         selectedOptions={selectedOptions}
         extraStyles={btnExtraStyles}
+        dataAppliedOptions={appliedOptions?.length}
       ></FilterButton>
       <FilterDropdown
         id={filterDropdownID}

package/src/components/molecules/multiple-select-filter/__private__/FilterButton.js

@@ -21,7 +21,8 @@ const FilterButton = forwardRef(
       truncateBtnTextWidth,
       filterLabel,
       selectedOptions,
-      extraStyles
+      extraStyles,
+      dataAppliedOptions
     },
     ref
   ) => {
@@ -48,6 +49,7 @@ const FilterButton = forwardRef(
         dataQa={`${name}-filter-button`}
         extraStyles={extraStyles}
         aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
+        data-applied-options={dataAppliedOptions}
         contentOverride
       >
         {btnContentOverride ? (

package/src/components/molecules/multiple-select-filter/__private__/util.js

@@ -29,3 +29,16 @@ export const selectOption = (option, selectedOptions, setSelectedOptions) => {
     setSelectedOptions(moreOptions);
   }
 };
+
+export const mergeOptions = (selectedOptions, activeOptions) => {
+  if (!activeOptions.length) return selectedOptions;
+  if (!selectedOptions.length) return activeOptions;
+
+  const mergedOptions = [...selectedOptions];
+  activeOptions.forEach(activeOption => {
+    if (!mergedOptions.some(option => option.name === activeOption.name)) {
+      mergedOptions.push(activeOption);
+    }
+  });
+  return mergedOptions;
+};