@thecb/components 10.12.1 → 10.12.2-beta.1

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

@@ -1,23 +1,27 @@
 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>
-      )}
-    </>
-  );
-});
+const FilterDropdown = forwardRef(
+  ({ id, ariaOwns, ariaControls, opened, extraStyles, children }, ref) => {
+    return (
+      <>
+        {opened && (
+          <FilterDropdownContainer
+            ref={ref}
+            id={id}
+            role="combobox"
+            aria-expanded={opened}
+            aria-haspopup="listbox"
+            aria-owns={ariaOwns}
+            aria-controls={ariaControls}
+            extraStyles={extraStyles}
+          >
+            {children}
+          </FilterDropdownContainer>
+        )}
+      </>
+    );
+  }
+);
 
 export default FilterDropdown;

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

@@ -9,7 +9,6 @@ import {
   isChecked,
   isMaxSelectionReached
 } from "./util";
-import { GHOST_GREY } from "../../../../constants/colors";
 
 const FilterableList = ({
   id,
@@ -68,23 +67,20 @@ const FilterableList = ({
   return (
     <Box
       id={id}
-      role="listbox"
       padding="0"
+      role="listbox"
+      aria-label="Filter options container"
+      onKeyDown={handleKeyDown}
       extraStyles={`
         overflow-y: auto;
         max-height: 250px;
         display: flex;
         flex-flow: column;
-      `}
-      onKeyDown={handleKeyDown}
+        padding-bottom: 0.5rem;
+    `}
     >
       {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 =
@@ -102,41 +98,47 @@ const FilterableList = ({
                 tabIndex={tabIndex}
                 name={name}
                 themeValues={themeValues}
+                showDivider={
+                  sortedOptions.length > 0 &&
+                  index === sortedAppliedOptions.length - 1
+                }
               ></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>
-        );
-      })}
+      <>
+        {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>
   );
 };

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

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import Checkbox from "../../../atoms/checkbox";
-import { Box } from "../../../atoms";
+import { GHOST_GREY } from "../../../../constants/colors";
+import CheckboxCheckmarkIcon from "../../../atoms/icons/CheckboxCheckmarkIcon";
 
 const FilterableListItem = forwardRef(
   (
@@ -12,54 +13,64 @@ const FilterableListItem = forwardRef(
       disabled,
       tabIndex,
       name,
+      showDivider,
+      extraStyles,
       themeValues
     },
     ref
   ) => {
+    const dividerStyles = `
+    ::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      display: block;
+      height: 1px;
+      background-color: ${GHOST_GREY};
+      bottom: -0.5rem;
+      left: 0;
+    }`;
     return (
-      <Box
-        padding="0"
+      <Checkbox
         key={index}
+        ref={ref}
+        title={option.name}
+        name={option.name}
+        role="option"
+        aria-selected={checked}
+        tabIndex={tabIndex}
+        dataQa={`${name}-option-${index}`}
+        checked={checked}
+        onChange={() => selectOption(option)}
+        textExtraStyles={`font-size: 0.875rem; margin: 0;`}
+        disabled={disabled}
         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};
-            }
+          padding: 0.375rem 0.625rem; 
+          margin: 0;
+          :hover,
+          :active,
+          :focus {
+            background-color: ${themeValues.primaryColor};
+          }
+          ${showDivider && dividerStyles}
+          ${extraStyles}
         `}
-          checkboxMargin="0.3rem"
-          role="option"
-          checkboxExtraStyles={`
-            width: 1.375rem; 
-            height: 1.375rem;
-            ${
-              checked && !disabled
-                ? `background: ` + themeValues.secondaryColor + `;`
-                : ""
-            }
-         `}
-          tabIndex={tabIndex}
-          dataQa={`${name}-option-${index}`}
-        />
-      </Box>
+        checkboxMargin={showDivider ? "0 0 1rem" : "0"}
+        hasIconOverride={true}
+        icon={CheckboxCheckmarkIcon}
+        checkboxExtraStyles={`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 20px;
+          width: 20px;
+          ${
+            checked && !disabled
+              ? `background: ` + themeValues.secondaryColor + `;`
+              : ""
+          }
+       `}
+      />
     );
   }
 );

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

@@ -22,13 +22,16 @@ const SearchBox = ({
           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};
-           `}
+            height: 2.875rem;
+            border: 0; 
+            border-radius: 0;
+            padding: 0.45rem;
+            font-size: 0.875rem;
+            border-bottom: 1px solid ${GHOST_GREY};
+            :focus {
+              outline-offset: -3px;
+            }
+          `}
         />
       )}
     </Box>

package/src/components/molecules/multiple-select-filter/index.d.ts

@@ -10,7 +10,9 @@ export interface MultipleSelectFilterProps {
   actions: FieldActions;
   autocompleteValue?: boolean;
   btnContentOverride?: JSX.Element;
+  btnExtraStyles?: string;
   disabled: boolean;
+  dropdownExtraStyles?: string;
   extraStyles?: string;
   fields: {
     searchTerm: Field;
@@ -24,8 +26,6 @@ export interface MultipleSelectFilterProps {
   options: SearchableSelectOption[];
   placeholder?: string;
   searchable?: boolean;
-  selectedOptions: SearchableSelectOption[];
-  setSelectedOptions: (options: SearchableSelectOption[]) => void;
   themeValues?: any[];
   truncateBtnTextWidth?: string;
 }