@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

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

@@ -1,146 +1,16 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { fallbackValues } from "./MultipleSelectFilter.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Center } from "../../atoms/layouts";
-import { FormInput } from "../../atoms/form-layouts";
-import ButtonWithAction from "../../atoms/button-with-action";
-import Checkbox from "../../atoms/checkbox";
-import { GHOST_GREY, WHITE } from "../../../constants/colors";
-import { Text } from "../../atoms";
-import DropdownIconV2 from "../../atoms/dropdown/DropdownIconV2";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { Box } from "../../atoms/layouts";
+import { GHOST_GREY, WHITE, CHARADE_GREY } from "../../../constants/colors";
 import { noop } from "../../../util/general";
-import {
-  FilterContainer,
-  FilterButton,
-  FilterDropdown
-} from "./MultipleSelectFilter.styled";
-
-const ScrollableOptionsList = ({
-  id,
-  optionsList,
-  selectedOptions,
-  themeValues,
-  selectOption,
-  maxSelections,
-  name
-}) => {
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const checkboxRefs = useRef([]);
-  const isMaxSelectionReached =
-    maxSelections && maxSelections === selectedOptions?.length;
-  const isChecked = option =>
-    selectedOptions?.some(
-      selectedOption => selectedOption?.name === option?.name
-    );
-
-  useEffect(() => {
-    if (
-      focusedIndex !== -1 &&
-      checkboxRefs.current &&
-      checkboxRefs.current[focusedIndex]
-    ) {
-      checkboxRefs.current[focusedIndex].focus(); // move focus to the active option
-    }
-  }, [focusedIndex]);
-
-  const handleKeyDown = event => {
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      setFocusedIndex(prevIndex =>
-        prevIndex < optionsList.length - 1 ? prevIndex + 1 : 0
-      );
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      setFocusedIndex(prevIndex =>
-        prevIndex > 0 ? prevIndex - 1 : optionsList.length - 1
-      );
-    } else if (event.key === " ") {
-      event.preventDefault();
-      // Select option on spacebar press if the maximum selection hasn't been reached.
-      const validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
-      if (
-        !isMaxSelectionReached ||
-        (focusedIndex !== -1 && isChecked(optionsList[validFocusedIndex]))
-      ) {
-        selectOption(optionsList[validFocusedIndex]);
-      }
-    } else if (event.key === "Tab") {
-      // Reset focus when tabbing out of the list.
-      setTimeout(() => {
-        setFocusedIndex(-1);
-      }, 500);
-    }
-  };
-
-  return (
-    <Box
-      id={id}
-      role="listbox"
-      padding="0"
-      extraStyles={`
-        overflow-y: auto; 
-        max-height: 250px; 
-        display: flex; 
-        flex-flow: column;
-      `}
-      onKeyDown={handleKeyDown}
-    >
-      {optionsList.map((option, index) => {
-        const checked = isChecked(option);
-        const isDisabled = isMaxSelectionReached && !checked;
-        const tabIndex =
-          index === focusedIndex || (index === 0 && focusedIndex === -1)
-            ? "0"
-            : "-1";
-        return (
-          <Box
-            padding="0"
-            key={index}
-            extraStyles={`
-              :hover,
-              :active,
-              :focus {
-                background-color: ${themeValues.primaryColor};
-              }
-          `}
-          >
-            <Checkbox
-              ref={el => (checkboxRefs.current[index] = el)}
-              title={option.name}
-              name={option.name}
-              checked={checked}
-              onChange={() => (isDisabled ? noop : selectOption(option))}
-              textExtraStyles={`font-size: 0.875rem; margin: 0;`}
-              disabled={isDisabled}
-              extraStyles={`
-                padding: 0.075rem 0.325rem; 
-                margin: 0;
-                :hover,
-                :active,
-                :focus {
-                  background-color: ${themeValues.primaryColor};
-                }
-            `}
-              checkboxMargin="0.3rem"
-              role="option"
-              checkboxExtraStyles={`
-                width: 1.375rem; 
-                height: 1.375rem; 
-                ${
-                  checked && !isDisabled
-                    ? `background: ` + themeValues.secondaryColor + `;`
-                    : ""
-                }`}
-              tabIndex={tabIndex}
-              dataQa={`${name}-option-${index}`}
-            />
-          </Box>
-        );
-      })}
-    </Box>
-  );
-};
+import { FilterContainer } from "./MultipleSelectFilter.styled";
+import ActionLinkButton from "./__private__/ActionLinkButton";
+import FilterButton from "./__private__/FilterButton";
+import FilterDropdown from "./__private__/FilterDropdown";
+import SearchBox from "./__private__/SearchBox";
+import FilterableList from "./__private__/FilterableList";
+import useOutsideClickHook from "../../../hooks/use-outside-click";
 
 const MultipleSelectFilter = ({
   actions,
@@ -164,53 +34,27 @@ const MultipleSelectFilter = ({
   themeValues,
   truncateBtnTextWidth = "15rem"
 }) => {
-  const [itemList, setItemList] = useState([]);
   const [opened, setOpened] = useState(false);
-  const containerRef = useRef(null);
+  const [appliedOptions, setAppliedOptions] = useState([]);
+
+  const handleClickOutsideContainer = () => {
+    setOpened(false);
+    actions.fields.searchTerm.set("");
+    onApply(selectedOptions);
+  };
+  const containerRef = useOutsideClickHook(() => handleClickOutsideContainer());
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
   const filterDropdownID = `${name}-filter-dropdown`;
   const checkboxListID = `${name}-checkbox-list`;
 
-  const backgroundColor = opened
-    ? themeValues.primaryColor
-    : selectedOptions?.length
-    ? themeValues.secondaryColor
-    : WHITE;
-  const contentColor = !opened && selectedOptions?.length ? WHITE : "#292A33";
-
-  const completeOptionsList = itemList
-    .slice()
-    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-  const selectValues = items => items.map(item => item.value);
-  const selectOption = selectedOption => {
-    if (selectValues(selectedOptions).includes(selectedOption.value)) {
-      const fewerOptions = selectedOptions.filter(
-        option => option.value !== selectedOption.value
-      );
-      setSelectedOptions(fewerOptions);
-    } else {
-      const moreOptions = selectedOptions.concat(selectedOption);
-      setSelectedOptions(moreOptions);
-    }
-  };
-
-  useEffect(() => setItemList(options), [options]);
-
   useEffect(() => {
-    const filteredItems = options.filter(item =>
-      item?.name
-        ?.toLowerCase()
-        .includes(fields?.searchTerm?.rawValue?.toLowerCase())
-    );
-    // If no items are filtered, display the entire list of options.
-    if (filteredItems?.length) {
-      setItemList(filteredItems);
-    } else {
-      setItemList(options);
+    if (!opened) {
+      onApply(selectedOptions);
+      setAppliedOptions(selectedOptions);
     }
-  }, [fields.searchTerm.rawValue]);
+  }, [opened]);
 
   useEffect(() => {
     const handleKeyDown = event => {
@@ -238,22 +82,8 @@ const MultipleSelectFilter = ({
         onApply(selectedOptions);
       }
     };
-    const handleClickOutside = event => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target) &&
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target)
-      ) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.addEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -262,101 +92,53 @@ const MultipleSelectFilter = ({
     <FilterContainer ref={containerRef} extraStyles={`${extraStyles}`}>
       <FilterButton
         ref={filterButtonRef}
-        variant="tertiary"
+        btnContentOverride={btnContentOverride}
         action={() => {
           actions.fields.searchTerm.set("");
           setOpened(!opened);
         }}
-        aria-haspopup="listbox"
-        aria-expanded={opened}
-        aria-controls={filterDropdownID}
-        backgroundColor={backgroundColor}
-        dataQa={`${name}-filter-button`}
-        contentOverride
-      >
-        {btnContentOverride ? (
-          btnContentOverride
-        ) : (
-          <Center
-            as="span"
-            style={{ display: "flex", flexDirection: "row" }}
-            intrinsic
-          >
-            {hasIcon && <Icon color={contentColor} />}
-            <Center
-              as="span"
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                padding: "0 0.5rem 0 0.25rem"
-              }}
-              intrinsic
-            >
-              <Text
-                variant="pS"
-                color={contentColor}
-                extraStyles={`
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
-                `}
-              >
-                {selectedOptions?.length
-                  ? `${filterLabel ? filterLabel + ": " : ""}${
-                      selectedOptions[0].name
-                    }`
-                  : `${filterLabel ? filterLabel : ""}`}
-              </Text>
-              <Text color={contentColor} variant="pS">
-                {selectedOptions?.length && selectedOptions?.length > 1
-                  ? `, +${selectedOptions?.length - 1} More`
-                  : ""}
-              </Text>
-            </Center>
-            <DropdownIconV2 color={contentColor} />
-          </Center>
-        )}
-      </FilterButton>
+        opened={opened}
+        backgroundColor={
+          opened
+            ? themeValues.primaryColor
+            : selectedOptions?.length
+            ? themeValues.secondaryColor
+            : WHITE
+        }
+        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
+        name={name}
+        filterDropdownID={filterDropdownID}
+        hasIcon={hasIcon}
+        icon={Icon}
+        truncateBtnTextWidth={truncateBtnTextWidth}
+        filterLabel={filterLabel}
+        selectedOptions={selectedOptions}
+      ></FilterButton>
       <FilterDropdown
         id={filterDropdownID}
         ref={dropdownRef}
-        hidden={!opened}
-        role="combobox"
-        aria-expanded={opened}
-        aria-haspopup="listbox"
-        aria-owns={checkboxListID}
+        ariaOwns={checkboxListID}
+        opened={opened}
       >
-        <Box padding="0 0 0.5rem">
-          {searchable && options?.length > 8 && (
-            <FormInput
-              autocompleteValue={autocompleteValue}
-              showFieldErrorRow={false}
-              errorMessages={{}}
-              field={fields.searchTerm}
-              fieldActions={actions.fields.searchTerm}
-              placeholder={placeholder}
-              disabled={disabled}
-              extraStyles={`
-                height: 2.875rem;
-                border: 0; 
-                border-radius: 0;
-                padding: 0.45rem;
-                font-size: 0.875rem;
-                border-bottom: 1px solid ${GHOST_GREY};
-             `}
-            />
-          )}
-        </Box>
-        <ScrollableOptionsList
+        <SearchBox
+          showSearchBox={searchable && options?.length > 8}
+          autocompleteValue={autocompleteValue}
+          fields={fields}
+          actions={actions}
+          placeholder={placeholder}
+          disabled={disabled}
+        ></SearchBox>
+        <FilterableList
           id={checkboxListID}
-          optionsList={completeOptionsList}
-          selectedOptions={selectedOptions}
+          options={options}
+          appliedOptions={appliedOptions}
           themeValues={themeValues}
-          selectOption={selectOption}
+          selectedOptions={selectedOptions}
           maxSelections={maxSelections}
           name={name}
-        ></ScrollableOptionsList>
+          setSelectedOptions={setSelectedOptions}
+          searchTerm={fields?.searchTerm}
+        ></FilterableList>
         <Box
           padding="0 0.5rem 0.0625rem 0.5rem"
           extraStyles={`
@@ -367,42 +149,26 @@ const MultipleSelectFilter = ({
             border-top: 1px solid ${GHOST_GREY};
           `}
         >
-          <ButtonWithAction
+          <ActionLinkButton
             action={() => {
               setOpened(false);
               setSelectedOptions([]);
               actions.fields.searchTerm.set("");
               onClear();
             }}
-            variant="tertiary"
-            extraStyles={`
-              padding: 0.2rem; 
-              margin: 0.5rem; 
-              min-height: auto; 
-              min-width: auto;
-            `}
-            textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
             text="Clear"
             dataQa={`${name}-clear-filters`}
-          ></ButtonWithAction>
-          <ButtonWithAction
+          ></ActionLinkButton>
+          <ActionLinkButton
             ref={applyFilterButtonRef}
             action={() => {
               setOpened(false);
               actions.fields.searchTerm.set("");
               onApply(selectedOptions);
             }}
-            variant="tertiary"
-            extraStyles={`
-              padding: 0.2rem; 
-              margin: 0.5rem; 
-              min-height: auto; 
-              min-width: auto;
-            `}
-            textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
             text="Apply"
             dataQa={`${name}-apply-filters`}
-          ></ButtonWithAction>
+          ></ActionLinkButton>
         </Box>
       </FilterDropdown>
     </FilterContainer>

package/src/components/molecules/multiple-select-filter/{MultipleSelectFilter.oldstories.js → MultipleSelectFilter.stories.js}

@@ -41,7 +41,7 @@ const items = [
 ];
 
 const FormWrapper = props => {
-  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+  const [selectedItems, setSelectedItems] = useState([]);
 
   return (
     <MultipleSelectFilter

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

@@ -28,11 +28,11 @@ const StyledFilterDropdown = styled(Box)`
   max-width: 18.625rem;
 `;
 
-export const FilterDropdown = forwardRef((props, ref) => (
+export const FilterDropdownContainer = forwardRef((props, ref) => (
   <StyledFilterDropdown ref={ref} {...props} />
 ));
 
-const StyledFilterButton = styled(ButtonWithAction)`
+const FilterButton = styled(ButtonWithAction)`
   min-width: auto;
   min-height: 2.3125rem;
   margin: 0;
@@ -52,6 +52,6 @@ const StyledFilterButton = styled(ButtonWithAction)`
   `}
 `;
 
-export const FilterButton = forwardRef((props, ref) => (
-  <StyledFilterButton ref={ref} {...props} />
+export const StyledFilterButton = forwardRef((props, ref) => (
+  <FilterButton ref={ref} {...props} />
 ));

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

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { ButtonWithAction } from "../../../atoms";
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+
+const ActionLinkButton = forwardRef(({ action, text, dataQa }, ref) => {
+  return (
+    <ButtonWithAction
+      ref={ref}
+      action={action}
+      variant="tertiary"
+      extraStyles={`
+        padding: 0.2rem; 
+        margin: 0.5rem; 
+        min-height: auto; 
+        min-width: auto;
+      `}
+      textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
+      text={text}
+      dataQa={dataQa}
+    ></ButtonWithAction>
+  );
+});
+
+export default ActionLinkButton;

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

@@ -0,0 +1,85 @@
+import React, { forwardRef } from "react";
+import { Text, Center } from "../../../atoms";
+import DropdownIconV2 from "../../../atoms/dropdown/DropdownIconV2";
+import { StyledFilterButton } from "../MultipleSelectFilter.styled";
+import { noop } from "../../../../util/general";
+
+const FilterButton = forwardRef(
+  (
+    {
+      btnContentOverride,
+      action = noop,
+      opened,
+      backgroundColor,
+      contentColor,
+      name,
+      filterDropdownID,
+      hasIcon = false,
+      icon: Icon,
+      truncateBtnTextWidth,
+      filterLabel,
+      selectedOptions
+    },
+    ref
+  ) => {
+    return (
+      <StyledFilterButton
+        ref={ref}
+        variant="tertiary"
+        action={action}
+        aria-haspopup="listbox"
+        aria-expanded={opened}
+        aria-controls={filterDropdownID}
+        backgroundColor={backgroundColor}
+        dataQa={`${name}-filter-button`}
+        contentOverride
+      >
+        {btnContentOverride ? (
+          btnContentOverride
+        ) : (
+          <Center
+            as="span"
+            style={{ display: "flex", flexDirection: "row" }}
+            intrinsic
+          >
+            {hasIcon && <Icon color={contentColor} />}
+            <Center
+              as="span"
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                padding: "0 0.5rem 0 0.25rem"
+              }}
+              intrinsic
+            >
+              <Text
+                variant="pS"
+                color={contentColor}
+                extraStyles={`
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
+                `}
+              >
+                {selectedOptions?.length
+                  ? `${filterLabel ? filterLabel + ": " : ""}${
+                      selectedOptions[0].name
+                    }`
+                  : `${filterLabel ? filterLabel : ""}`}
+              </Text>
+              <Text color={contentColor} variant="pS">
+                {selectedOptions?.length && selectedOptions?.length > 1
+                  ? `, +${selectedOptions?.length - 1} More`
+                  : ""}
+              </Text>
+            </Center>
+            <DropdownIconV2 color={contentColor} />
+          </Center>
+        )}
+      </StyledFilterButton>
+    );
+  }
+);
+
+export default FilterButton;

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

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import { FilterDropdownContainer } from "../MultipleSelectFilter.styled";
+
+const FilterDropdown = forwardRef(({ id, ariaOwns, opened, children }, ref) => {
+  return (
+    <>
+      {opened && (
+        <FilterDropdownContainer
+          ref={ref}
+          id={id}
+          role="combobox"
+          aria-expanded={opened}
+          aria-haspopup="listbox"
+          aria-owns={ariaOwns}
+        >
+          {children}
+        </FilterDropdownContainer>
+      )}
+    </>
+  );
+});
+
+export default FilterDropdown;