@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,97 @@
+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,
+      backgroundHoverColor,
+      textColor,
+      textHoverColor,
+      name,
+      filterDropdownID,
+      hasIcon = false,
+      icon: Icon,
+      truncateBtnTextWidth,
+      filterLabel,
+      selectedOptions,
+      extraStyles,
+      dataAppliedOptions
+    },
+    ref
+  ) => {
+    const btnTextFilterDescription = selectedOptions?.length
+      ? `${filterLabel ? `${filterLabel}: ` : ""}${selectedOptions[0].name}`
+      : `${filterLabel ? filterLabel : ""}`;
+    const btnTextItemsDescription =
+      selectedOptions?.length && selectedOptions?.length > 1
+        ? `, +${selectedOptions?.length - 1} More`
+        : "";
+    return (
+      <StyledFilterButton
+        ref={ref}
+        variant="tertiary"
+        action={action}
+        aria-haspopup="listbox"
+        aria-expanded={opened}
+        aria-controls={filterDropdownID}
+        backgroundColor={backgroundColor}
+        backgroundHoverColor={backgroundHoverColor}
+        textColor={textColor}
+        textHoverColor={textHoverColor}
+        opened={opened}
+        dataQa={`${name}-filter-button`}
+        extraStyles={extraStyles}
+        aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
+        data-applied-options={dataAppliedOptions}
+        contentOverride
+      >
+        {btnContentOverride ? (
+          btnContentOverride
+        ) : (
+          <Center
+            as="span"
+            style={{ display: "flex", flexDirection: "row" }}
+            intrinsic
+          >
+            {hasIcon && <Icon color={opened ? textHoverColor : textColor} />}
+            <Center
+              as="span"
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                padding: "0 0.5rem 0 0.25rem"
+              }}
+              intrinsic
+            >
+              <Text
+                variant="pS"
+                color={opened ? textHoverColor : textColor}
+                extraStyles={`
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
+                `}
+              >
+                {btnTextFilterDescription}
+              </Text>
+              <Text color={opened ? textHoverColor : textColor} variant="pS">
+                {btnTextItemsDescription}
+              </Text>
+            </Center>
+            <DropdownIconV2 color={opened ? textHoverColor : textColor} />
+          </Center>
+        )}
+      </StyledFilterButton>
+    );
+  }
+);
+
+export default FilterButton;

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

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import { FilterDropdownContainer } from "../MultipleSelectFilter.styled";
+
+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

@@ -0,0 +1,146 @@
+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";
+
+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}
+      padding="0"
+      role="listbox"
+      aria-label="Filter options container"
+      onKeyDown={handleKeyDown}
+      extraStyles={`
+        overflow-y: auto;
+        max-height: 250px;
+        display: flex;
+        flex-flow: column;
+        padding-bottom: 0.5rem;
+    `}
+    >
+      {sortedAppliedOptions?.length > 0 && (
+        <>
+          {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}
+                showDivider={
+                  sortedOptions.length > 0 &&
+                  index === sortedAppliedOptions.length - 1
+                }
+              ></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>
+  );
+};
+
+export default React.memo(FilterableList);

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

@@ -0,0 +1,78 @@
+import React, { forwardRef } from "react";
+import Checkbox from "../../../atoms/checkbox";
+import { GHOST_GREY } from "../../../../constants/colors";
+import CheckboxCheckmarkIcon from "../../../atoms/icons/CheckboxCheckmarkIcon";
+
+const FilterableListItem = forwardRef(
+  (
+    {
+      index,
+      option,
+      checked,
+      selectOption,
+      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 (
+      <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={`
+          padding: 0.375rem 0.625rem; 
+          margin: 0;
+          :hover,
+          :active,
+          :focus {
+            background-color: ${themeValues.primaryHoverColor};
+          }
+          ${showDivider && dividerStyles}
+          ${extraStyles}
+        `}
+        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 + `;`
+              : ""
+          }
+       `}
+      />
+    );
+  }
+);
+
+export default FilterableListItem;

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

@@ -0,0 +1,41 @@
+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};
+            :focus {
+              outline-offset: -3px;
+            }
+          `}
+        />
+      )}
+    </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,44 @@
+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);
+  }
+};
+
+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;
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import {
+  Field,
+  FieldActions,
+  SearchableSelectOption
+} from "../../../types/common";
+
+export interface MultipleSelectFilterProps {
+  actions: FieldActions;
+  autocompleteValue?: boolean;
+  btnContentOverride?: JSX.Element;
+  btnExtraStyles?: string;
+  disabled: boolean;
+  dropdownExtraStyles?: string;
+  extraStyles?: string;
+  fields: {
+    searchTerm: Field;
+  };
+  filterLabel?: string;
+  icon?: JSX.Element;
+  maxSelections?: number;
+  name: string;
+  onApply?: () => void;
+  onClear?: () => void;
+  options: SearchableSelectOption[];
+  placeholder?: string;
+  searchable?: boolean;
+  themeValues?: any[];
+  truncateBtnTextWidth?: string;
+}
+
+export const MultipleSelectFilter: React.FC<Expand<MultipleSelectFilterProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,3 @@
+import MultipleSelectFilter from "./MultipleSelectFilter";
+
+export default MultipleSelectFilter;

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -1,45 +1,36 @@
 import React from "react";
 import styled from "styled-components";
-import posed from "react-pose";
-import { easeIn, easeOut } from "@popmotion/easing";
-import { Box } from "../../atoms/layouts";
+import { Box, Motion } from "../../atoms/layouts";
 import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
-const menu = posed.div({
+const menuVariants = {
   invisible: {
-    left: "-100vw",
-    right: "100vw",
+    x: "-100vw",
     transition: {
-      right: {
-        ease: easeOut,
-        duration: 500
-      },
-      left: {
-        ease: easeOut,
-        duration: 500
-      }
+      ease: "easeOut",
+      duration: 0.5
     }
   },
   visible: {
-    left: "0",
-    right: "0",
+    x: "0",
     transition: {
-      left: {
-        ease: easeIn,
-        duration: 500
-      },
-      right: {
-        ease: easeIn,
-        duration: 500
-      }
+      ease: "easeIn",
+      duration: 0.5
     }
   }
-});
+};
 
-const ImposterMenu = styled(menu)`
+const ImposterMenu = styled(Motion)`
+  /* Overlay starts below the header */
   position: fixed;
   top: ${({ headerSize }) => headerSize};
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* Dim background for everything below the navbar */
+  background: ${({ themeValues }) =>
+    themeValues?.overlayColor || "rgba(0, 0, 0, 0.5)"};
 `;
 
 const NavMenuMobile = ({
@@ -52,12 +43,19 @@ const NavMenuMobile = ({
   return (
     <ImposterMenu
       id={id}
-      initialPose="invisible"
-      pose={visible ? "visible" : "invisible"}
+      variants={menuVariants}
+      initial="invisible"
+      animate={visible ? "visible" : "invisible"}
       headerSize={headerSize}
+      themeValues={themeValues}
     >
+      {/*
+        The Box is the “menu” portion.
+        It’s narrower, but the parent ImposterMenu is full-screen & gray.
+      */}
       <Box
-        width="100vw"
+        width="100%"
+        maxWidth="400px"
         padding="1rem 0.5rem"
         extraStyles={`position: relative; max-width: 400px; height: calc(100vh - 72px);`}
         background={themeValues.backgroundColor}

package/src/components/molecules/nav-menu/NavMenuMobile.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as NavMenuMobileStories from './NavMenuMobile.stories.js';
+
+<Story />
+
+<Meta of={NavMenuMobileStories} />
+
+<Title />
+
+The `NavMenuMobile` component is a responsive navigation menu designed specifically for mobile devices. It provides a clean and accessible interface for navigating through application sections. The menu can be toggled open or closed and supports customizable content and themes.
+
+<Controls />
+
+
+### Features
+
+- **Customizable Content**: The `menuContent` prop allows you to define the content displayed inside the menu.
+- **Theming**: The component supports theming via the `themeValues` prop, enabling you to style the menu to match your application's design system.
+- **Visibility Control**: The `visible` prop determines whether the menu is displayed, making it easy to toggle programmatically.
+- **Header Positioning**: The `headerSize` prop ensures the menu is positioned correctly relative to the header.