@onewelcome/react-lib-components 6.5.0 → 6.6.0

package/src/components/Form/Select/MultiSelect/useArrowNavigation.ts

@@ -0,0 +1,128 @@
+/*
+ * 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.
+ */
+
+interface UseArrowNavigationParams {
+  expanded: boolean;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
+  childrenCount: number;
+  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+  addBtnRef: React.RefObject<HTMLButtonElement>;
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  customSelectButtonRef: React.RefObject<HTMLButtonElement>;
+  onClose: () => void;
+}
+
+/** @scope .*/
+export const useArrowNavigation = ({
+  expanded,
+  setExpanded,
+  setFocusedSelectItem,
+  childrenCount,
+  setShouldClick,
+  addBtnRef,
+  searchInputRef,
+  customSelectButtonRef,
+  onClose
+}: UseArrowNavigationParams) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    const codesToPreventDefault = ["ArrowDown", "ArrowUp", "Escape", "End", "Home"];
+    const hasAddBtn = !!addBtnRef?.current;
+    const childrenCountWithAddButton = childrenCount + (hasAddBtn ? 1 : 0);
+    const isSearchEvent = event.target === searchInputRef.current;
+    const isSelectButtonEvent = event.target === customSelectButtonRef.current;
+    const isSearchOrSelectButtonEvent = isSelectButtonEvent || isSearchEvent;
+
+    if (expanded) {
+      codesToPreventDefault.push("Tab");
+      codesToPreventDefault.push("Enter");
+    }
+
+    if (!expanded) {
+      codesToPreventDefault.push("Space");
+    }
+
+    if (codesToPreventDefault.includes(event.code) && !event.metaKey) {
+      event.preventDefault();
+    }
+
+    switch (event.code) {
+      case "ArrowDown":
+        if (!expanded) {
+          setExpanded(true);
+          setFocusedSelectItem(0);
+          break;
+        }
+        setFocusedSelectItem(prevState =>
+          prevState + 1 > childrenCountWithAddButton - 1 ? 0 : prevState + 1
+        );
+        break;
+      case "ArrowUp":
+        if (!expanded) {
+          setExpanded(true);
+          setFocusedSelectItem(childrenCountWithAddButton - 1);
+          break;
+        }
+
+        setFocusedSelectItem(prevState =>
+          prevState - 1 < 0 ? childrenCountWithAddButton - 1 : prevState - 1
+        );
+        break;
+      case "Enter":
+        if (expanded) {
+          setShouldClick(true);
+        } else {
+          setFocusedSelectItem(0);
+        }
+        if (isSearchOrSelectButtonEvent) {
+          setExpanded(!expanded);
+        }
+        break;
+      case "Space":
+        if (!expanded) {
+          setExpanded(true);
+          setFocusedSelectItem(0);
+        }
+        break;
+      case "Home":
+        setFocusedSelectItem(0);
+        break;
+      case "Escape":
+        if (expanded) {
+          setExpanded(false);
+          onClose();
+        }
+        break;
+      case "End":
+        setFocusedSelectItem(childrenCount - 1);
+        break;
+      case "ArrowLeft":
+        if (event.metaKey && expanded) {
+          event.preventDefault();
+          setFocusedSelectItem(0);
+        }
+        break;
+      case "ArrowRight":
+        if (event.metaKey && expanded) {
+          event.preventDefault();
+          setFocusedSelectItem(childrenCount - 1);
+        }
+        break;
+    }
+  };
+
+  return { onArrowNavigation };
+};

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

@@ -0,0 +1,126 @@
+/*
+ * 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, useState } from "react";
+import { PartialInputProps, SearchProps } from "../Select.interfaces";
+
+interface Props {
+  selectId: string;
+  search?: SearchProps;
+  optionsCount: number;
+  /**
+   * @deprecated
+   */
+  searchPlaceholder?: string;
+  /**
+   * @deprecated
+   */
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+  searchInputClassName: string;
+  expanded: boolean;
+  setFocusedSelectItem: (idx: number) => void;
+  focusedSelectItem: number;
+  describedBy?: string;
+  getOptionId: (multiSelectId: string, optionIndex: number) => string;
+  getListboxId: (multiSelectId: string) => string;
+}
+
+/** @scope .*/
+export const useSearch = ({
+  selectId,
+  search,
+  optionsCount,
+  searchPlaceholder,
+  searchInputProps,
+  searchInputClassName,
+  expanded,
+  setFocusedSelectItem,
+  focusedSelectItem,
+  describedBy,
+  getOptionId,
+  getListboxId
+}: Props) => {
+  const [filter, setFilter] = useState("");
+
+  const DEFAULT_RENDER_THRESHOLD = 0;
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;
+  const hasEnoughChildren = optionsCount >= threshold;
+
+  const shouldRenderSearch = () => {
+    if (search?.enabled) {
+      return hasEnoughChildren;
+    }
+
+    if (search) {
+      return search.enabled as boolean;
+    }
+
+    return optionsCount > DEFAULT_RENDER_THRESHOLD;
+  };
+
+  const renderSearch = () => {
+    return (
+      <input
+        {...((search?.searchInputProps as any) ?? searchInputProps ?? {})}
+        ref={searchInputRef}
+        value={filter}
+        onChange={event => setFilter(event.currentTarget.value)}
+        className={[searchInputClassName, searchInputProps?.className].join(" ")}
+        style={{
+          display: expanded ? "block" : "none"
+        }}
+        type="text"
+        name="search-option"
+        placeholder={search?.searchPlaceholder ?? searchPlaceholder}
+        role="combobox"
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck={false}
+        aria-controls={getListboxId(selectId)}
+        aria-describedby={describedBy}
+        aria-autocomplete="none"
+        aria-expanded={expanded}
+        aria-activedescendant={getOptionId(selectId, focusedSelectItem)}
+        aria-haspopup={true}
+      />
+    );
+  };
+
+  const resetSearchState = () => {
+    setFilter("");
+    setFocusedSelectItem(0);
+  };
+
+  const visible = shouldRenderSearch();
+
+  useEffect(() => {
+    if (search?.searchInputProps?.reset || searchInputProps?.reset) {
+      resetSearchState();
+    }
+  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
+
+  return {
+    renderSearch,
+    resetSearchState,
+    searchVisible: visible,
+    searchThreshold: threshold,
+    searchInputRef,
+    filter
+  };
+};

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

@@ -31,6 +31,7 @@ export interface AddNewProps {
   label: string;
   onAddNew: (value: string) => void;
   btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  alwaysEnabled?: boolean;
 }
 
 export interface SelectProps<V extends string | readonly string[] | undefined>

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

@@ -20,15 +20,18 @@ import React, {
   createRef,
   RefObject,
   useEffect,
-  ReactNode
+  ReactNode,
+  useRef
 } from "react";
 import classes from "./Select.module.scss";
+import { generateID } from "../../../../util/helper";
 
 export interface Props extends ComponentPropsWithRef<"li"> {
   children: ReactNode;
   value: string;
   disabled?: boolean;
   isSelected?: boolean;
+  disableDefaultSelectedStyle?: boolean;
   selectOpened?: boolean;
   hasFocus?: boolean;
   shouldClick?: boolean;
@@ -42,9 +45,11 @@ export interface Props extends ComponentPropsWithRef<"li"> {
 
 const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
   {
+    id,
     children,
     className,
     isSelected = false,
+    disableDefaultSelectedStyle,
     shouldClick,
     hasFocus,
     selectOpened,
@@ -59,8 +64,15 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
   }: Props,
   ref
 ) => {
+  const defaultOptionId = useRef(generateID(20));
+  const optionId = id ?? defaultOptionId.current;
   let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
+  const additionalClasses = [];
+  className && additionalClasses.push(className);
+  isSelected && !disableDefaultSelectedStyle && additionalClasses.push(classes["selected-option"]);
+  disabled && additionalClasses.push(classes["disabled"]);
+
   useEffect(() => {
     if (isSelected && innerOptionRef.current && shouldClick) {
       innerOptionRef.current.click();
@@ -79,11 +91,10 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
   return (
     <li
       {...rest}
+      id={optionId}
       ref={innerOptionRef}
       data-value={value}
-      className={`${isSelected ? classes["selected-option"] : ""} ${
-        disabled ? classes.disabled : ""
-      } ${className ?? ""}`}
+      className={additionalClasses.join(" ")}
       onClick={onSelectHandler}
       onKeyDown={event => {
         if (event.code === "Enter") {

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

@@ -125,8 +125,19 @@ $listItemHeight: 2.5rem;
       cursor: pointer;
 
       &:focus {
-        outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: var(--input-border-width-focus);
+        outline: none;
+
+        &::before {
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0.125rem;
+          height: 100%;
+          width: calc(100% - 0.25rem);
+          opacity: 1;
+          z-index: calc(variables.$popover-z-index + 1);
+        }
       }
 
       &:hover {

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

@@ -31,9 +31,10 @@ import readyclasses from "../../../../readyclasses.module.scss";
 import { filterProps } from "../../../../util/helper";
 import { Icon, Icons } from "../../../Icon/Icon";
 import { SingleSelectProps } from "../Select.interfaces";
-import { useArrowNavigation, useSelectPositionList } from "../SelectService";
+import { useSelectPositionList } from "../useSelectPositionList";
 import { useAddNewBtn } from "../useAddNewBtn";
-import { useSearch } from "../useSearch";
+import { useSearch } from "./useSearch";
+import { useArrowNavigation } from "./useArrowNavigation";
 
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
@@ -87,7 +88,10 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
   });
   const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
     addNew,
-    filter
+    filter,
+    focusedSelectItem,
+    optionsCount,
+    searchInputRef
   });
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();

package/src/components/Form/Select/{SelectService.ts → SingleSelect/useArrowNavigation.ts}

@@ -14,12 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect, useState } from "react";
-import {
-  Position,
-  UseArrowNavigationParams,
-  UseSelectPositionListParams
-} from "./Select.interfaces";
+import { UseArrowNavigationParams } from "../Select.interfaces";
 
 /** @scope .*/
 export const useArrowNavigation = ({
@@ -175,98 +170,3 @@ export const useArrowNavigation = ({
 
   return { onArrowNavigation };
 };
-
-/** @scope .*/
-export const useSelectPositionList = ({
-  expanded,
-  optionListReference,
-  addBtnRef,
-  containerReference
-}: UseSelectPositionListParams) => {
-  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{
-    wrapper?: string;
-    list?: string;
-  }>({
-    wrapper: undefined,
-    list: undefined
-  });
-  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise 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: "2.75rem", bottom: "initial" };
-
-    // Set the position of the select
-    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-      position = { top: "initial", bottom: "2.75rem" };
-    }
-
-    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 addNewButtonHeightWithMargin = addBtnRef.current
-      ? addBtnRef.current.getBoundingClientRect().height +
-        parseInt(getComputedStyle(addBtnRef.current).marginBottom)
-      : 0;
-    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
-
-    if (!containerReference.current) {
-      console.error(
-        "The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand"
-      );
-      return;
-    }
-
-    const availableSpace =
-      transformOrigin === "top"
-        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
-        : containerReference.current.getBoundingClientRect().top - 16;
-
-    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {
-      const maxHeightObject = {
-        wrapper: `${availableSpace}px`,
-        list:
-          addNewButtonHeightWithMargin > 0
-            ? `${availableSpace - addNewButtonHeightWithMargin}px`
-            : "none"
-      };
-      setOptionsListMaxHeight(maxHeightObject);
-      setOpacity(100);
-      return;
-    }
-
-    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });
-    setOpacity(100);
-  };
-
-  return {
-    optionsListMaxHeight,
-    opacity,
-    setOpacity,
-    listPosition,
-    setListPosition
-  };
-};

package/src/components/Form/Select/{useSearch.tsx → SingleSelect/useSearch.tsx}

@@ -15,8 +15,8 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
-import { PartialInputProps, SearchProps } from "./Select.interfaces";
-import { Input } from "../Input/Input";
+import { PartialInputProps, SearchProps } from "../Select.interfaces";
+import { Input } from "../../Input/Input";
 
 interface Props {
   search?: SearchProps;
@@ -34,6 +34,7 @@ interface Props {
   setFocusedSelectItem: (idx: number) => void;
 }
 
+/** @scope .*/
 export const useSearch = ({
   search,
   optionsCount,

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

@@ -13,12 +13,15 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+@use "src/mixins.module";
+@use "src/variables";
 
 ul.has-sibling {
   padding-bottom: 2px;
 }
 
 .action-button {
+  position: relative;
   border: none;
   border-top: 1px solid var(--color-blue-grey50);
   width: 100%;
@@ -35,10 +38,21 @@ ul.has-sibling {
   font-family: var(--font-family);
   font-size: var(--form-control-font-size);
 
-  &:focus {
-    outline: 1px solid;
-    outline-offset: 0;
-    border-radius: 0;
+  &:focus,
+  &.focus {
+    outline: none;
+
+    &::before {
+      @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0.125rem;
+      height: 100%;
+      width: calc(100% - 0.25rem);
+      opacity: 1;
+      z-index: calc(variables.$popover-z-index + 1);
+    }
   }
 
   &:hover {

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

@@ -16,28 +16,62 @@
 
 import classes from "./useAddNewBtn.module.scss";
 
-import React, { useRef } from "react";
+import React, { RefObject, useEffect, useRef } from "react";
 import { AddNewProps } from "./Select.interfaces";
 
 interface Props {
+  id?: string;
   addNew?: AddNewProps;
   filter: string;
+  focusedSelectItem: number;
+  optionsCount: number;
+  searchInputRef: RefObject<HTMLInputElement>;
+  shouldClick?: boolean;
+  onClickCallback?: () => void;
 }
 
-export const useAddNewBtn = ({ addNew, filter }: Props) => {
+/** @scope .*/
+export const useAddNewBtn = ({
+  id,
+  addNew,
+  filter,
+  focusedSelectItem,
+  optionsCount,
+  searchInputRef,
+  shouldClick,
+  onClickCallback
+}: Props) => {
   const addBtnRef = useRef<HTMLButtonElement>(null);
-
   const addNewLabel = addNew?.label ?? "Create new";
+  const isProgrammaticallyFocused = focusedSelectItem === optionsCount;
+  const isSearchDisabled = !searchInputRef.current;
+  const hasSearchQuery = typeof filter === "string" && !!filter.trim() && !!searchInputRef.current;
+  const shouldRender = addNew && (isSearchDisabled || hasSearchQuery || addNew.alwaysEnabled);
+
+  const additionalClasses = [classes["action-button"]];
+  addNew?.btnProps?.className && additionalClasses.push(addNew?.btnProps?.className);
+  isProgrammaticallyFocused && additionalClasses.push(classes["focus"]);
+
+  useEffect(() => {
+    const addBtnClicked = addBtnRef.current && isProgrammaticallyFocused && shouldClick;
+    if (addBtnClicked) {
+      addBtnRef.current.click();
+    }
+  }, [addBtnRef.current, isProgrammaticallyFocused, shouldClick]);
 
   const renderAddNew = () =>
-    addNew && (
+    shouldRender && (
       <button
-        data-testid={"select-action-button"}
-        className={classes["action-button"]}
-        onClick={() => addNew.onAddNew(filter)}
+        data-testid="select-action-button"
+        {...addNew.btnProps}
         ref={addBtnRef}
         type="button"
-        {...addNew.btnProps}
+        className={additionalClasses.join(" ")}
+        onClick={() => {
+          addNew.onAddNew(filter);
+          onClickCallback?.();
+        }}
+        id={id}
       >
         {!filter && addNewLabel}
         {filter && <span style={{ fontWeight: "700" }}>{`"${filter}"`}</span>}