@thecb/components 10.12.0 → 10.12.1

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

@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from "react";
+import { Box } from "../../../atoms";
+import FilterableListItem from "./FilterableListItem";
+import useKeyboardNavigation from "./useKeyboardNavigation";
+import {
+  sortItemsList,
+  filterItemsList,
+  selectOption,
+  isChecked,
+  isMaxSelectionReached
+} from "./util";
+import { GHOST_GREY } from "../../../../constants/colors";
+
+const FilterableList = ({
+  id,
+  options,
+  appliedOptions,
+  selectedOptions,
+  maxSelections,
+  name,
+  setSelectedOptions,
+  searchTerm,
+  themeValues
+}) => {
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [filteredAppliedOptions, setFilteredAppliedOptions] = useState([]);
+
+  useEffect(() => {
+    setFilteredOptions(options);
+    setFilteredAppliedOptions(appliedOptions);
+  }, [options, appliedOptions]);
+
+  useEffect(() => {
+    const filteredOptionItems = filterItemsList(options, searchTerm?.rawValue);
+    const filteredAppliedItems = filterItemsList(
+      appliedOptions,
+      searchTerm?.rawValue
+    );
+
+    setFilteredOptions(
+      filteredOptionItems.length ? filteredOptionItems : filteredOptions
+    );
+    setFilteredAppliedOptions(filteredAppliedItems);
+  }, [searchTerm.rawValue]);
+
+  const handleSelectOption = option =>
+    selectOption(option, selectedOptions, setSelectedOptions);
+
+  const isAppliedOption = option =>
+    filteredAppliedOptions?.some(
+      appliedItem => appliedItem?.name === option?.name
+    );
+
+  const currentFilteredOptions = filteredOptions.filter(
+    option => !isAppliedOption(option)
+  );
+
+  const sortedOptions = sortItemsList(currentFilteredOptions);
+  const sortedAppliedOptions = sortItemsList(filteredAppliedOptions);
+
+  const { itemRefs, focusedIndex, handleKeyDown } = useKeyboardNavigation({
+    options: sortedOptions,
+    appliedOptions: sortedAppliedOptions,
+    selectedOptions,
+    maxSelections
+  });
+
+  return (
+    <Box
+      id={id}
+      role="listbox"
+      padding="0"
+      extraStyles={`
+        overflow-y: auto;
+        max-height: 250px;
+        display: flex;
+        flex-flow: column;
+      `}
+      onKeyDown={handleKeyDown}
+    >
+      {sortedAppliedOptions?.length > 0 && (
+        <Box
+          padding="0"
+          extraStyles={
+            sortedOptions.length > 0 && `border-bottom: 1px solid ${GHOST_GREY}`
+          }
+        >
+          {sortedAppliedOptions.map((option, index) => {
+            const checked = isChecked(option, selectedOptions);
+            const tabIndex =
+              index === focusedIndex || (index === 0 && focusedIndex === -1)
+                ? "0"
+                : "-1";
+            return (
+              <FilterableListItem
+                key={index}
+                ref={el => (itemRefs.current[index] = el)}
+                index={index}
+                option={option}
+                checked={checked}
+                selectOption={handleSelectOption}
+                tabIndex={tabIndex}
+                name={name}
+                themeValues={themeValues}
+              ></FilterableListItem>
+            );
+          })}
+        </Box>
+      )}
+      {sortedOptions.map((option, index) => {
+        const checked = isChecked(option, selectedOptions);
+        const isDisabled =
+          isMaxSelectionReached(maxSelections, selectedOptions) && !checked;
+        const indexOffset = sortedAppliedOptions?.length
+          ? sortedAppliedOptions?.length
+          : 0;
+        const currentIndex = index === 0 ? indexOffset : index + indexOffset;
+        const tabIndex =
+          currentIndex === focusedIndex ||
+          (indexOffset === 0 &&
+            currentIndex === indexOffset &&
+            focusedIndex === -1)
+            ? "0"
+            : "-1";
+        return (
+          <FilterableListItem
+            key={currentIndex}
+            ref={el => (itemRefs.current[currentIndex] = el)}
+            index={currentIndex}
+            option={option}
+            checked={checked}
+            selectOption={isDisabled ? noop : handleSelectOption}
+            disabled={isDisabled}
+            tabIndex={tabIndex}
+            name={name}
+            themeValues={themeValues}
+          ></FilterableListItem>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default React.memo(FilterableList);

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

@@ -0,0 +1,67 @@
+import React, { forwardRef } from "react";
+import Checkbox from "../../../atoms/checkbox";
+import { Box } from "../../../atoms";
+
+const FilterableListItem = forwardRef(
+  (
+    {
+      index,
+      option,
+      checked,
+      selectOption,
+      disabled,
+      tabIndex,
+      name,
+      themeValues
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        padding="0"
+        key={index}
+        extraStyles={`
+        :hover,
+        :active,
+        :focus {
+        background-color: ${themeValues.primaryColor};
+        }
+    `}
+      >
+        <Checkbox
+          ref={ref}
+          title={option.name}
+          name={option.name}
+          checked={checked}
+          onChange={() => selectOption(option)}
+          textExtraStyles={`font-size: 0.875rem; margin: 0;`}
+          disabled={disabled}
+          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 && !disabled
+                ? `background: ` + themeValues.secondaryColor + `;`
+                : ""
+            }
+         `}
+          tabIndex={tabIndex}
+          dataQa={`${name}-option-${index}`}
+        />
+      </Box>
+    );
+  }
+);
+
+export default FilterableListItem;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, FormInput } from "../../../atoms";
+import { GHOST_GREY } from "../../../../constants/colors";
+
+const SearchBox = ({
+  autocompleteValue,
+  fields,
+  actions,
+  placeholder,
+  disabled,
+  showSearchBox
+}) => {
+  return (
+    <Box padding="0 0 0.5rem">
+      {showSearchBox && (
+        <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>
+  );
+};
+
+export default SearchBox;

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

@@ -0,0 +1,84 @@
+import React, { useRef, useState, useEffect } from "react";
+import { isMaxSelectionReached } from "./util";
+
+const useKeyboardNavigation = ({
+  options,
+  appliedOptions,
+  selectedOptions,
+  maxSelections
+}) => {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const itemRefs = useRef([]);
+  const totalItemsLength = options.length + appliedOptions.length;
+
+  const handleArrowUp = event => {
+    event.preventDefault();
+    setFocusedIndex(prevIndex =>
+      prevIndex > 0 ? prevIndex - 1 : totalItemsLength - 1
+    );
+  };
+
+  const handleArrowDown = event => {
+    event.preventDefault();
+    setFocusedIndex(prevIndex =>
+      prevIndex < totalItemsLength - 1 ? prevIndex + 1 : 0
+    );
+  };
+
+  const handleSpacebar = event => {
+    event.preventDefault();
+    const validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
+    // Select option on spacebar press if the maximum selection hasn't been reached.
+    if (
+      !isMaxSelectionReached(maxSelections, selectedOptions) &&
+      itemRefs.current &&
+      itemRefs.current[validFocusedIndex]
+    ) {
+      const nestedInput = itemRefs.current[validFocusedIndex].querySelector(
+        "input"
+      );
+      if (nestedInput) {
+        nestedInput.click();
+      }
+    }
+  };
+
+  const handleTab = event => {
+    // Reset focus when tabbing out of the list.
+    setFocusedIndex(-1);
+  };
+
+  const keyActions = {
+    " ": event => handleSpacebar(event),
+    Space: event => handleSpacebar(event),
+    Tab: event => handleTab(event),
+    ArrowUp: event => handleArrowUp(event),
+    ArrowDown: event => handleArrowDown(event)
+  };
+
+  const handleKeyDown = event => {
+    const eventKey = event.code || event.key;
+    const action = keyActions[eventKey];
+    if (action) {
+      action(event);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      focusedIndex !== -1 &&
+      itemRefs.current &&
+      itemRefs.current[focusedIndex]
+    ) {
+      itemRefs.current[focusedIndex].focus(); // move focus to the active option
+    }
+  }, [focusedIndex]);
+
+  return {
+    itemRefs,
+    focusedIndex,
+    handleKeyDown
+  };
+};
+
+export default useKeyboardNavigation;

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

@@ -0,0 +1,31 @@
+export const filterItemsList = (list, searchTerm) =>
+  list.filter(item =>
+    item?.name?.toLowerCase().includes(searchTerm?.toLowerCase())
+  );
+
+export const sortItemsList = list =>
+  list
+    .slice()
+    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+
+export const isMaxSelectionReached = (maxSelection, selectedOptions) =>
+  maxSelection && maxSelection === selectedOptions?.length;
+
+export const isChecked = (option, selectedOptions) =>
+  selectedOptions?.some(
+    selectedOption => selectedOption?.name === option?.name
+  );
+
+export const selectValues = items => items.map(item => item.value);
+
+export const selectOption = (option, selectedOptions, setSelectedOptions) => {
+  if (selectValues(selectedOptions).includes(option.value)) {
+    const fewerOptions = selectedOptions.filter(
+      selectedOption => selectedOption.value !== option.value
+    );
+    setSelectedOptions(fewerOptions);
+  } else {
+    const moreOptions = selectedOptions.concat(option);
+    setSelectedOptions(moreOptions);
+  }
+};

package/src/hooks/use-outside-click/index.js

@@ -18,12 +18,11 @@ const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);