@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Form/Select/Option.tsx

@@ -19,12 +19,13 @@ import React, {
   ComponentPropsWithRef,
   createRef,
   RefObject,
-  useEffect
+  useEffect,
+  ReactNode
 } from "react";
 import classes from "./Select.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"li"> {
-  children: string;
+  children: ReactNode;
   value: string;
   disabled?: boolean;
   isSelected?: boolean;
@@ -71,9 +72,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
     }
   }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-  const onSelectHandler = () => {
-    if (onOptionSelect) onOptionSelect(innerOptionRef);
-  };
+  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);
 
   return (
     <li

package/src/components/Form/Select/Select.interfaces.ts

@@ -15,8 +15,8 @@
  */
 
 export type Position = {
-  top: 0 | "initial";
-  bottom: 0 | "initial";
+  top: number | `${number}rem` | "initial";
+  bottom: number | `${number}rem` | "initial";
 };
 
 export interface UseArrowNavigationParams {
@@ -26,8 +26,8 @@ export interface UseArrowNavigationParams {
   setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
   setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
   childrenCount: number;
-  customSelectButtonRef: React.RefObject<HTMLButtonElement>;
   setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+  onOptionChangeHandler: (optionElement: HTMLElement | null) => void;
   searchInputRef: React.RefObject<HTMLInputElement>;
   renderSearchCondition: number;
 }

package/src/components/Form/Select/Select.module.scss

@@ -29,8 +29,8 @@ $listItemHeight: 2.125rem;
   font-size: var(--form-control-font-size);
 
   [data-display] {
-    color: var(--greyed-out);
-    font-family: var(--form-control-font-size);
+    color: var(--color-default);
+    font-family: var(--font-family);
   }
 
   &.expanded {
@@ -43,10 +43,7 @@ $listItemHeight: 2.125rem;
     button:focus:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-focus);
       padding: 0
-        calc(
-          variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus) +
-            var(--input-border-width)
-        );
+        calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus));
     }
   }
 
@@ -54,16 +51,17 @@ $listItemHeight: 2.125rem;
     button:not(:focus) {
       border-color: var(--default);
       border-width: var(--input-border-width);
+      background-color: var(--color-blue-grey25);
     }
   }
 
   .custom-select {
     position: relative;
     width: 100%;
-    min-height: calc(2.86rem - (2 * var(--input-border-width)));
-    padding: 0 variables.$form-element-horizontal-padding-mobile;
+    min-height: calc(2.625rem - (2 * var(--input-border-width)));
+    padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
     background-color: transparent;
-    border-color: var(--light-grey-border);
+    border-color: var(--color-blue-grey500);
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
@@ -83,6 +81,10 @@ $listItemHeight: 2.125rem;
     &.error:focus {
       border-width: var(--input-border-width-focus);
     }
+
+    &.disabled {
+      border-color: var(--color-disabled);
+    }
   }
 
   .list-wrapper {
@@ -90,10 +92,12 @@ $listItemHeight: 2.125rem;
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.29);
+    box-shadow: 0px 4px 5px 0px #01053233;
+    box-shadow: 0px 3px 14px 0px #0105321f;
+    box-shadow: 0px 8px 10px 0px #01053224;
     position: absolute;
     z-index: 11;
-    top: 0;
+    top: 44px;
     left: 0;
     width: 100%;
     overflow: auto;
@@ -112,8 +116,8 @@ $listItemHeight: 2.125rem;
     max-height: calc($listItemHeight * 10);
 
     li {
-      padding: 0.5rem 1rem;
-      font-size: var(--font-size);
+      padding: 0.5rem 0.75rem;
+      font-size: var(--form-control-font-size);
       margin: 0;
       position: relative;
       line-height: var(--default-line-height);
@@ -131,14 +135,19 @@ $listItemHeight: 2.125rem;
       }
 
       &:focus {
-        outline: 1px solid var(--color-primary);
-        outline-offset: -1px;
+        outline: var(--input-border-width-focus) solid var(--color-primary300);
+        outline-offset: -var(--input-border-width-focus);
       }
 
-      &:hover:after {
+      &:hover:after,
+      &:active:after {
         background-color: var(--color-primary);
       }
 
+      &:active:after {
+        opacity: 0.1;
+      }
+
       &.disabled {
         color: var(--greyed-out);
         background-color: var(--disabled);
@@ -154,11 +163,12 @@ $listItemHeight: 2.125rem;
     position: absolute;
     top: 0;
     left: 0;
-    background-color: var(--color-primary);
-    width: 100%;
     height: 100%;
-    opacity: 0.1;
+    border-top-right-radius: 0.125rem;
+    border-bottom-right-radius: 0.125rem;
+    border-left: 0.25rem solid var(--color-primary);
   }
+  color: var(--color-primary);
 }
 
 .selected {
@@ -171,7 +181,7 @@ $listItemHeight: 2.125rem;
 .status {
   position: absolute;
   top: 50%;
-  right: 1.625rem;
+  right: 0.8125rem;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
@@ -186,7 +196,7 @@ $listItemHeight: 2.125rem;
     font-size: 1.25rem;
   }
 
-  .triangle-down {
+  .chevron-icon {
     color: var(--default);
     font-size: 0.625rem;
   }
@@ -200,11 +210,8 @@ $listItemHeight: 2.125rem;
   color: var(--greyed-out);
 }
 
-.select-search-wrapper + ul {
-  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
-}
-
 .select-search {
+  position: relative;
   width: 100%;
   box-sizing: border-box;
   border-bottom-left-radius: 0;
@@ -214,7 +221,7 @@ $listItemHeight: 2.125rem;
 .disabled {
   cursor: not-allowed;
   color: var(--greyed-out);
-  background-color: var(--disabled);
+  background-color: var(--color-blue-grey25);
 
   > * {
     pointer-events: none;
@@ -224,16 +231,14 @@ $listItemHeight: 2.125rem;
 @media only screen and (min-width: 30em) {
   .select {
     .custom-select {
-      padding: 0 variables.$form-element-horizontal-padding-desktop;
+      padding: 0
+        calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width));
     }
 
     &:not(.expanded) {
       button:focus:not(.error) {
         padding: 0
-          calc(
-            variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus) +
-              var(--input-border-width)
-          );
+          calc(variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus));
       }
     }
   }

package/src/components/Form/Select/Select.test.tsx

@@ -126,7 +126,7 @@ describe("Select should render", () => {
       success: true
     }));
 
-    const icon = button.querySelector("[class*='icon-checkmark-circle-breakout']");
+    const icon = button.querySelector("[class*='icon-checkmark-circle-alt']");
     expect(button).toHaveClass("success");
     expect(icon).toBeDefined();
   });
@@ -207,20 +207,75 @@ describe("Selecting options using keyboard", () => {
 
     await userEvent.keyboard("{arrowdown}");
 
-    expect(select.querySelector('li[data-value="option3"]')).toHaveFocus();
+    expect(select.querySelector('li[data-value="option2"]')).toHaveFocus();
 
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
     await userEvent.keyboard("{arrowup}");
 
-    expect(select.querySelector('li[data-value="option16"]')).toHaveFocus();
+    expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
+    await userEvent.keyboard("{arrowup}");
+    expect(select.querySelector('li[data-value="option14"]')).toHaveFocus();
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
+
+    await userEvent.keyboard("{escape}");
+
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should focus through list items and select on spacebar press", async () => {
+    const onChangeHandler = jest.fn();
+    const { select, button } = createSelect(defaultParams => ({
+      ...defaultParams,
+      onChange: onChangeHandler
+    }));
+
+    await act(() => {
+      button.focus();
+    });
+
+    expect(button).toHaveFocus();
+
+    await userEvent.keyboard("[Space]");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("[Space]");
+
+    await waitFor(() => expect(button).toHaveAttribute("aria-expanded", "false"));
+
+    expect(onChangeHandler).toHaveBeenCalled();
+
+    await userEvent.keyboard("[Space]");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{arrowdown}");
+
+    expect(select.querySelector('li[data-value="option2"]')).toHaveFocus();
+
     await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+    await userEvent.keyboard("{arrowup}");
+
     expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
+    await userEvent.keyboard("{arrowup}");
+    expect(select.querySelector('li[data-value="option14"]')).toHaveFocus();
 
     await userEvent.keyboard("{arrowdown}");
     await userEvent.keyboard("{arrowdown}");
     await userEvent.keyboard("{arrowdown}");
+    await userEvent.keyboard("{arrowdown}");
 
     expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
 
@@ -266,7 +321,7 @@ describe("List expansion", () => {
       await userEvent.click(button);
     }
 
-    expect(dropdownWrapper).toHaveStyle({ bottom: "0px" });
+    expect(dropdownWrapper).toHaveStyle({ bottom: "2.75rem" });
   });
 
   it("should expand downwards with a max height set", async () => {
@@ -304,7 +359,7 @@ describe("List expansion", () => {
     await userEvent.click(button);
 
     expect(dropdownWrapper).toHaveStyle({ maxHeight: "474px" });
-    expect(dropdownWrapper).toHaveStyle({ top: "0px" });
+    expect(dropdownWrapper).toHaveStyle({ top: "2.75rem" });
   });
 });
 
@@ -319,7 +374,7 @@ describe("previously selected item", () => {
       button.focus();
     });
 
-    const option2 = select.querySelector('li[data-value="option2"]')!;
+    const option1 = select.querySelector('li[data-value="option1"]')!;
 
     await userEvent.keyboard("{enter}");
 
@@ -330,7 +385,7 @@ describe("previously selected item", () => {
 
     await userEvent.click(button);
 
-    expect(document.activeElement).toStrictEqual(option2);
+    expect(document.activeElement).toStrictEqual(option1);
   });
 });
 
@@ -392,6 +447,18 @@ describe("search input", () => {
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
 
+  it("expand list with arrowup", async () => {
+    const { button } = createSelect();
+
+    await act(() => {
+      button.focus();
+    });
+
+    await userEvent.keyboard("{arrowup}");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("expand list with space", async () => {
     const { button } = createSelect();
 
@@ -463,3 +530,35 @@ describe("search input props work", () => {
     expect(document.querySelector(".test-wrapper-classname")).toBeInTheDocument();
   });
 });
+
+describe("meta arrow left and right", () => {
+  it("goes to the last item in the list when pressing meta right", async () => {
+    const { button } = createSelect();
+
+    await act(() => {
+      button.focus();
+    });
+
+    await userEvent.keyboard("{enter}");
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+
+    await userEvent.keyboard("{Meta>}{arrowright}");
+
+    await waitFor(() => expect(document.querySelector('li[data-value="option17"]')).toHaveFocus());
+  });
+
+  it("goes to the first item in the list when pressing meta left", async () => {
+    const { button } = createSelect();
+
+    await userEvent.click(button);
+
+    await userEvent.keyboard("{Meta>}{arrowright}");
+
+    await waitFor(() => expect(document.querySelector('li[data-value="option17"]')).toHaveFocus());
+
+    await userEvent.keyboard("{Meta>}{arrowleft}");
+
+    expect(document.querySelector('li[data-value="option1"]')).toHaveFocus();
+  });
+});

package/src/components/Form/Select/Select.tsx

@@ -49,6 +49,7 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
   className?: string;
   value: string;
   clearLabel?: string;
+  noResultsLabel?: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
 }
 
@@ -71,6 +72,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     success = false,
     value,
     clearLabel = "Clear selection",
+    noResultsLabel = "No results found",
     onChange,
     ...rest
   }: Props,
@@ -87,10 +89,21 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     useState(
       false
     ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the "click" listener in Option component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
+  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
   const [childrenCount] = useState(React.Children.count(children));
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
   const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
+    if (nativeSelect.current && optionElement) {
+      nativeSelect.current.value = optionElement.getAttribute("data-value")!;
+      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    setExpanded(false);
+  };
+
   const customSelectButtonRef = useRef<HTMLButtonElement>(null);
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
@@ -98,8 +111,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     isSearching,
     setIsSearching,
     setFocusedSelectItem,
+    onOptionChangeHandler,
     childrenCount,
-    customSelectButtonRef,
     setShouldClick,
     searchInputRef,
     renderSearchCondition
@@ -116,17 +129,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     });
   };
 
-  const onOptionChangeHandler = (optionRef: React.RefObject<HTMLLIElement>) => {
-    if (nativeSelect.current && optionRef.current) {
-      nativeSelect.current.value = optionRef.current.getAttribute("data-value")!;
-      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-
-    setExpanded(false);
-
-    customSelectButtonRef.current?.focus();
-  };
-
   /**
    * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.
    * The `children` prop can be either a single object (1 child) or an array of multiple children.
@@ -138,6 +140,12 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
       );
 
+      const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);
+
+      if (internalChildren.length === 0) {
+        return <li className={classes["no-results"]}>{noResultsLabel}</li>;
+      }
+
       return _internalRenderChildren(filteredChildren as ReactElement[]);
     }
 
@@ -146,9 +154,11 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     function _internalRenderChildren(internalChildren: ReactElement[]) {
       return React.Children.map(internalChildren, (child, index) => {
         return React.cloneElement(child, {
-          onFocusChange: (childIndex: number) => setFocusedSelectItem(childIndex),
+          onFocusChange: (childIndex: number) => {
+            setFocusedSelectItem(childIndex);
+          },
           onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
-            onOptionChangeHandler(optionRef);
+            onOptionChangeHandler(optionRef.current);
             setShouldClick(false);
           },
           isSelected: child.props.value === value,
@@ -162,17 +172,22 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     }
   };
 
+  const shouldRenderSearch =
+    expanded && Array.isArray(children) && children.length > renderSearchCondition;
+
   const renderSearch = () => (
     <Input
       {...searchInputProps}
-      autoFocus
       ref={searchInputRef}
       onFocus={() => setIsSearching(true)}
       onBlur={() => setIsSearching(false)}
       onChange={filterResults}
       className={classes["select-search"]}
       wrapperProps={{
-        className: `${classes["select-search-wrapper"]} ${searchInputProps?.wrapperProps?.className}`
+        className: searchInputProps?.wrapperProps?.className
+      }}
+      style={{
+        display: expanded ? "block" : "none"
       }}
       type="text"
       name="search-option"
@@ -180,6 +195,14 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     />
   );
 
+  const renderChevronIcon = () => {
+    return expanded ? (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronUp} />
+    ) : (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronDown} />
+    );
+  };
+
   const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilter(event.currentTarget.value);
   };
@@ -190,6 +213,18 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     onChange?.(event);
   };
 
+  useEffect(() => {
+    if (expanded) {
+      setFocusedSelectItem(0);
+      setShouldFocusButtonAfterClose(true);
+    }
+
+    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {
+      customSelectButtonRef.current.focus();
+      setShouldFocusButtonAfterClose(false);
+    }
+  }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);
+
   useEffect(() => {
     syncDisplayValue(value);
   }, [value]);
@@ -236,6 +271,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           className ?? ""
         }`}
       >
+        {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
         <button
           {...selectButtonProps}
           onClick={() => {
@@ -245,6 +281,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           type="button"
           name={name}
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
+          style={{ display: shouldRenderSearch ? "none" : "initial" }}
           disabled={disabled}
           aria-disabled={disabled}
           aria-invalid={error}
@@ -257,11 +294,9 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             {!value && placeholder && <span className={classes["placeholder"]}>{placeholder}</span>}
             {value?.length > 0 && <span data-display-inner>{display}</span>}
           </div>
-          <div className={classes["status"]}>
-            {icon}
-            <Icon className={classes["triangle-down"]} icon={Icons.TriangleDown} />
-          </div>
+          <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </button>
+
         <div
           ref={optionListReference}
           className={`list-wrapper ${classes["list-wrapper"]}`}
@@ -273,7 +308,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
             ...listPosition
           }}
         >
-          {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
           <ul role="listbox">{renderOptions()}</ul>
         </div>
       </div>