@onewelcome/react-lib-components 0.3.0 → 1.0.1

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

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../readyclasses.module.scss";
 
 $listItemHeight: 2.125rem;
@@ -13,25 +29,24 @@ $listItemHeight: 2.125rem;
 
   [data-display] {
     color: var(--greyed-out);
+    font-family: var(--font-family);
   }
 
   &.expanded {
-    border: var(--input-border-width) solid transparent;
-
     .list-wrapper {
-      background: #fff;
+      background: var(--light);
     }
   }
 
   &:not(.expanded) {
-    button:focus-visible:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-primary);
+    button:focus:not(.error) {
+      border: var(--input-border-width-focus) solid var(--color-focus);
       padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
     }
   }
 
   &:hover:not(.disabled):not(.expanded):not(.error) {
-    button {
+    button:not(:focus) {
       border-color: var(--default);
       border-width: var(--input-border-width);
     }
@@ -44,7 +59,7 @@ $listItemHeight: 2.125rem;
     border: 0;
     padding: 0 1.25rem;
     background-color: transparent;
-    border-color: var(--input-border-color);
+    border-color: var(--light-grey-border);
     border-style: var(--input-border-style);
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
@@ -52,7 +67,7 @@ $listItemHeight: 2.125rem;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 
-    &:focus-visible {
+    &:focus {
       outline: 0;
     }
 
@@ -61,19 +76,19 @@ $listItemHeight: 2.125rem;
       color: var(--error);
     }
 
-    &.error:focus-visible {
+    &.error:focus {
       border-width: var(--input-border-width-focus);
     }
   }
 
   .list-wrapper {
-    border-color: var(--input-border-color);
+    border-color: var(--light-grey-border);
     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);
     position: absolute;
-    z-index: 2;
+    z-index: 11;
     top: 0;
     left: 0;
     width: 100%;
@@ -86,7 +101,7 @@ $listItemHeight: 2.125rem;
     width: 100%;
     margin: 0;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--light);
     border-radius: var(--input-border-radius);
     color: var(--default);
     text-align: left;
@@ -111,7 +126,7 @@ $listItemHeight: 2.125rem;
         opacity: 0.05;
       }
 
-      &:focus-visible {
+      &:focus {
         outline: 1px solid var(--color-primary);
         outline-offset: -1px;
       }

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

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Select as SelectComponent, Props } from "./Select";
 import { render, waitFor } from "@testing-library/react";
@@ -280,63 +296,6 @@ describe("List expansion", () => {
   });
 });
 
-describe("onClear method", () => {
-  it("should show a cross and fire the passed onClear function with enter", async () => {
-    const onClearHandler = jest.fn();
-
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      onClear: onClearHandler,
-      value: "option4"
-    }));
-
-    button.focus();
-    const clearButton = select.querySelector("[data-clear]");
-
-    userEvent.tab();
-
-    expect(clearButton).toHaveFocus();
-
-    userEvent.keyboard("{enter}");
-
-    expect(onClearHandler).toHaveBeenCalled();
-    expect(button?.getAttribute("aria-expanded")).toBe("false");
-  });
-
-  it("should show a cross and fire the passed onClear function with enter", async () => {
-    const onClearHandler = jest.fn();
-
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      onClear: onClearHandler,
-      value: "option4"
-    }));
-
-    button.focus();
-    const clearButton = select.querySelector("[data-clear]");
-    expect(document.querySelector("[data-display-inner]")).toBeInTheDocument();
-
-    userEvent.tab();
-
-    expect(clearButton).toHaveFocus();
-
-    userEvent.keyboard("{space}");
-
-    expect(onClearHandler).toHaveBeenCalled();
-    expect(button?.getAttribute("aria-expanded")).toBe("false");
-  });
-
-  it("should not show cross", () => {
-    createSelect(defaultParams => ({
-      ...defaultParams,
-      value: ""
-    }));
-
-    expect(document.querySelector("[data-clear]")).not.toBeInTheDocument();
-    expect(document.querySelector("[data-display-inner]")).not.toBeInTheDocument();
-  });
-});
-
 describe("previously selected item", () => {
   it("should have focus", () => {
     const { select, button } = createSelect(defaultParams => ({

package/src/Form/Select/Select.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import classes from "./Select.module.scss";
 
 import React, {
@@ -15,6 +31,7 @@ import { FormElement } from "../form.interfaces";
 import { useBodyClick } from "../../hooks/useBodyClick";
 import readyclasses from "../../readyclasses.module.scss";
 import { filterProps } from "../../util/helper";
+import { useArrowNavigation, useSelectPositionList } from "./SelectService";
 
 type PartialInputProps = Partial<InputProps>;
 
@@ -31,14 +48,8 @@ export interface Props extends ComponentPropsWithRef<"select">, FormElement {
   value: string;
   clearLabel?: string;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
-  onClear?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
-type Position = {
-  top: 0 | "initial";
-  bottom: 0 | "initial";
-};
-
 /** Amount of items to be rendered before a search input is rendered */
 const renderSearchCondition = 10;
 
@@ -59,17 +70,13 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
       value,
       clearLabel = "Clear selection",
       onChange,
-      onClear,
       ...rest
     }: Props,
     ref
   ) => {
     const [expanded, setExpanded] = useState(false);
-    const [opacity, setOpacity] = useState(0); // We set opacity because other wise if we calculate the max height you see the list full height for a split second and then it shortens.
     const [filter, setFilter] = useState("");
     const [display, setDisplay] = useState("");
-    const [listPosition, setListPosition] = useState<Partial<Position>>({});
-    const [optionsListMaxHeight, setOptionsListMaxHeight] = useState("none");
     const containerReference = useRef<HTMLDivElement>(null);
     const optionListReference = useRef<HTMLDivElement>(null);
     const [isSearching, setIsSearching] = useState(false);
@@ -82,105 +89,23 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
 
     const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
     const searchInputRef = useRef<HTMLInputElement>(null);
-
-    const onArrowNavigation = (event: React.KeyboardEvent) => {
-      const codesToPreventDefault = [
-        "ArrowDown",
-        "ArrowUp",
-        "ArrowLeft",
-        "ArrowRight",
-        "Space",
-        "Escape",
-        "End",
-        "Home"
-      ];
-
-      const codesToPreventDefaultWhenSearching = ["ArrowDown", "ArrowUp", "Enter", "Escape"];
-
-      /** If the select is expanded, we also want to control the Tab key */
-      if (expanded) {
-        codesToPreventDefault.push("Tab");
-      }
-
-      /** We will handle the way certain key strokes affect the Select, unless we're searching */
-      if (codesToPreventDefault.includes(event.code) && !isSearching) {
-        event.preventDefault();
-      }
-
-      if (isSearching && codesToPreventDefaultWhenSearching.includes(event.code)) {
-        event.preventDefault();
-      }
-
-      if (isSearching) {
-        switch (event.code) {
-          case "ArrowDown":
-          case "Enter":
-            setIsSearching(false);
-            setFocusedSelectItem(0);
-            return;
-          case "ArrowUp":
-            setIsSearching(false);
-            setFocusedSelectItem(childrenCount - 1);
-            return;
-          case "Escape":
-          case "Tab":
-            setIsSearching(false);
-            setExpanded(false);
-            containerReference.current &&
-              containerReference.current.querySelector("button")!.focus();
-        }
-      } else {
-        switch (event.code) {
-          case "ArrowDown":
-            if (!expanded) {
-              setExpanded(true);
-              return;
-            }
-            setFocusedSelectItem(prevState => {
-              return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
-            });
-            return;
-          case "ArrowUp":
-            setFocusedSelectItem(prevState => {
-              return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
-            });
-            return;
-          case "Space":
-            if (!expanded) {
-              setExpanded(true);
-              return;
-            }
-
-            setShouldClick(true);
-            setExpanded(false);
-            containerReference.current &&
-              containerReference.current.querySelector("button")!.focus();
-            return;
-          case "Tab":
-            if (childrenCount >= renderSearchCondition && expanded) {
-              setIsSearching(true);
-              searchInputRef.current && searchInputRef.current.focus();
-              return;
-            }
-            setExpanded(false);
-
-            return;
-          case "Escape":
-            if (expanded) {
-              setExpanded(false);
-              containerReference.current &&
-                containerReference.current.querySelector("button")!.focus();
-            }
-            return;
-          case "End":
-            setFocusedSelectItem(childrenCount - 1);
-            return;
-          case "Home":
-            setFocusedSelectItem(0);
-            return;
-        }
-      }
-    };
+    const customSelectButtonRef = useRef<HTMLButtonElement>(null);
+
+    const { onArrowNavigation } = useArrowNavigation({
+      expanded,
+      setExpanded,
+      isSearching,
+      setIsSearching,
+      setFocusedSelectItem,
+      childrenCount,
+      customSelectButtonRef,
+      setShouldClick,
+      searchInputRef,
+      renderSearchCondition
+    });
+
+    const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
+      useSelectPositionList({ expanded, optionListReference, containerReference });
 
     const syncDisplayValue = (val: string) => {
       React.Children.forEach(children, child => {
@@ -190,55 +115,6 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
       });
     };
 
-    const rePositionList = () => {
-      if (!expanded || !optionListReference.current || !containerReference.current) {
-        return;
-      }
-
-      // Check whether there is more space above or below the select
-      // Check space between the bottom of select and top of viewport
-      const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
-
-      // Check space between the top of the select and bottom of viewport
-      const spaceOnBottomOfSelect =
-        window.innerHeight - containerReference.current.getBoundingClientRect().top;
-
-      // Set position as if there's more space on the bottom
-      let position: Position = { top: 0, bottom: "initial" };
-
-      // Set the position of the select
-      if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-        position = { top: "initial", bottom: 0 };
-      }
-
-      setListPosition(position);
-
-      // Calculate the potential max height of the options list
-      calculateOptionListMaxHeight(position);
-    };
-
-    const calculateOptionListMaxHeight = (position: Position) => {
-      // Calculate max height if there's more space below the select
-      const listHeight = optionListReference.current!.getBoundingClientRect().height;
-      const transformOrigin = position.top !== "initial" ? "top" : "bottom";
-
-      const availableSpace =
-        transformOrigin === "top"
-          ? window.innerHeight -
-            containerReference.current!.getBoundingClientRect()[transformOrigin] -
-            16
-          : containerReference.current!.getBoundingClientRect()[transformOrigin] - 16;
-
-      if (availableSpace < listHeight) {
-        setOptionsListMaxHeight(`${availableSpace}px`);
-        setOpacity(100);
-        return;
-      }
-
-      setOptionsListMaxHeight("none");
-      setOpacity(100);
-    };
-
     const onOptionChangeHandler = (optionRef: React.RefObject<HTMLLIElement>) => {
       if (nativeSelect.current && optionRef.current) {
         nativeSelect.current.value = optionRef.current.getAttribute("data-value")!;
@@ -247,7 +123,7 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
 
       setExpanded(false);
 
-      containerReference.current && containerReference.current.querySelector("button")!.focus();
+      customSelectButtonRef.current && customSelectButtonRef.current.focus();
     };
 
     /**
@@ -313,33 +189,6 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
         return <Icon className={classes["warning"]} icon={Icons.Warning} />;
       }
 
-      if (value?.length !== 0 && onClear) {
-        return (
-          <div
-            aria-hidden={false}
-            role="button"
-            tabIndex={0}
-            data-clear
-            onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onClear(e);
-            }}
-            onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-              if (e.code === "Enter" || e.code === "Space") {
-                e.preventDefault();
-                e.stopPropagation();
-                onClear(e);
-                containerReference.current &&
-                  containerReference.current.querySelector("button")!.focus();
-              }
-            }}
-          >
-            <span className={readyclasses["sr-only"]}>{clearLabel}</span>
-            <Icon tag="span" icon={Icons.TimesThin} />
-          </div>
-        );
-      }
       return null;
     };
 
@@ -351,10 +200,6 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
       syncDisplayValue(value);
     }, [value]);
 
-    useEffect(() => {
-      rePositionList();
-    }, [expanded]);
-
     useBodyClick(
       (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
       () => {
@@ -401,6 +246,7 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
             onClick={() => {
               setExpanded(!expanded);
             }}
+            ref={customSelectButtonRef}
             type="button"
             name={name}
             className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}

package/src/Form/Select/SelectService.ts

@@ -0,0 +1,204 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { useEffect, useState } from "react";
+import {
+  Position,
+  UseArrowNavigationParams,
+  UseSelectPositionListParams
+} from "./Select.interfaces";
+
+export const useArrowNavigation = ({
+  expanded,
+  setExpanded,
+  isSearching,
+  setIsSearching,
+  setFocusedSelectItem,
+  childrenCount,
+  customSelectButtonRef,
+  setShouldClick,
+  searchInputRef,
+  renderSearchCondition
+}: UseArrowNavigationParams) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    const codesToPreventDefault = [
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "Space",
+      "Escape",
+      "End",
+      "Home"
+    ];
+
+    const codesToPreventDefaultWhenSearching = ["ArrowDown", "ArrowUp", "Enter", "Escape"];
+
+    /** If the select is expanded, we also want to control the Tab key */
+    if (expanded) {
+      codesToPreventDefault.push("Tab");
+    }
+
+    /** We will handle the way certain key strokes affect the Select, unless we're searching */
+    if (codesToPreventDefault.includes(event.code) && !isSearching) {
+      event.preventDefault();
+    }
+
+    if (isSearching && codesToPreventDefaultWhenSearching.includes(event.code)) {
+      event.preventDefault();
+    }
+
+    if (isSearching) {
+      switch (event.code) {
+        case "ArrowDown":
+        case "Enter":
+          setIsSearching(false);
+          setFocusedSelectItem(0);
+          return;
+        case "ArrowUp":
+          setIsSearching(false);
+          setFocusedSelectItem(childrenCount - 1);
+          return;
+        case "Escape":
+        case "Tab":
+          setIsSearching(false);
+          setExpanded(false);
+          customSelectButtonRef.current && customSelectButtonRef.current.focus();
+      }
+    } else {
+      switch (event.code) {
+        case "ArrowDown":
+          if (!expanded) {
+            setExpanded(true);
+            return;
+          }
+          setFocusedSelectItem(prevState => {
+            return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+          });
+          return;
+        case "ArrowUp":
+          setFocusedSelectItem(prevState => {
+            return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+          });
+          return;
+        case "Space":
+          if (!expanded) {
+            setExpanded(true);
+            return;
+          }
+
+          setShouldClick(true);
+          setExpanded(false);
+          customSelectButtonRef.current && customSelectButtonRef.current.focus();
+          return;
+        case "Tab":
+          if (childrenCount >= renderSearchCondition && expanded) {
+            setIsSearching(true);
+            searchInputRef.current && searchInputRef.current.focus();
+            return;
+          }
+          setExpanded(false);
+
+          return;
+        case "Escape":
+          if (expanded) {
+            setExpanded(false);
+            customSelectButtonRef.current && customSelectButtonRef.current.focus();
+          }
+          return;
+        case "End":
+          setFocusedSelectItem(childrenCount - 1);
+          return;
+        case "Home":
+          setFocusedSelectItem(0);
+          return;
+      }
+    }
+  };
+
+  return { onArrowNavigation };
+};
+
+export const useSelectPositionList = ({
+  expanded,
+  optionListReference,
+  containerReference
+}: UseSelectPositionListParams) => {
+  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState("none");
+  const [opacity, setOpacity] = useState(0); // We set opacity because other wise if we calculate the max height you see the list full height for a split second and then it shortens.
+  const [listPosition, setListPosition] = useState<Partial<Position>>({});
+
+  useEffect(() => {
+    rePositionList();
+  }, [expanded]);
+
+  const rePositionList = () => {
+    if (!expanded || !optionListReference.current || !containerReference.current) {
+      return;
+    }
+
+    // Check whether there is more space above or below the select
+    // Check space between the bottom of select and top of viewport
+    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
+
+    // Check space between the top of the select and bottom of viewport
+    const spaceOnBottomOfSelect =
+      window.innerHeight - containerReference.current.getBoundingClientRect().top;
+
+    // Set position as if there's more space on the bottom
+    let position: Position = { top: 0, bottom: "initial" };
+
+    // Set the position of the select
+    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
+      position = { top: "initial", bottom: 0 };
+    }
+
+    setListPosition(position);
+
+    // Calculate the potential max height of the options list
+    calculateOptionListMaxHeight(position);
+  };
+
+  const calculateOptionListMaxHeight = (position: Position) => {
+    // Calculate max height if there's more space below the select
+    const listHeight = optionListReference.current!.getBoundingClientRect().height;
+    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
+
+    const availableSpace =
+      transformOrigin === "top"
+        ? window.innerHeight -
+          containerReference.current!.getBoundingClientRect()[transformOrigin] -
+          16
+        : containerReference.current!.getBoundingClientRect()[transformOrigin] - 16;
+
+    if (availableSpace < listHeight) {
+      setOptionsListMaxHeight(`${availableSpace}px`);
+      setOpacity(100);
+      return;
+    }
+
+    setOptionsListMaxHeight("none");
+    setOpacity(100);
+  };
+
+  return {
+    optionsListMaxHeight,
+    opacity,
+    setOpacity,
+    listPosition,
+    setListPosition
+  };
+};