@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

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

@@ -0,0 +1,284 @@
+/*
+ * 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, {
+  ComponentPropsWithRef,
+  createRef,
+  ForwardRefRenderFunction,
+  Fragment,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Input, Props as InputProps } from "../Input/Input";
+import { Icon, Icons } from "../../Icon/Icon";
+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";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+
+type PartialInputProps = Partial<InputProps>;
+
+export interface Props extends ComponentPropsWithRef<"select">, FormElement {
+  children: ReactElement[];
+  name?: string;
+  labeledBy?: string;
+  describedBy?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  searchInputProps?: PartialInputProps;
+  selectButtonProps?: ComponentPropsWithRef<"button">;
+  className?: string;
+  value: string;
+  clearLabel?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+}
+
+/** Amount of items to be rendered before a search input is rendered */
+const renderSearchCondition = 10;
+
+const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
+  {
+    children,
+    name,
+    disabled = false,
+    labeledBy,
+    placeholder,
+    describedBy,
+    searchPlaceholder = "Search item",
+    searchInputProps,
+    selectButtonProps,
+    className,
+    error = false,
+    success = false,
+    value,
+    clearLabel = "Clear selection",
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const [filter, setFilter] = useState("");
+  const [display, setDisplay] = useState("");
+  const containerReference = useRef<HTMLDivElement>(null);
+  const optionListReference = useRef<HTMLDivElement>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [focusedSelectItem, setFocusedSelectItem] = useState(-1);
+  const [shouldClick, setShouldClick] =
+    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 [childrenCount] = useState(React.Children.count(children));
+
+  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  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 => {
+      if (child.props.value === val) {
+        setDisplay(child.props.children);
+      }
+    });
+  };
+
+  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.
+   */
+  const renderOptions = () => {
+    if (isSearching || filter !== "") {
+      const filteredChildren = React.Children.toArray(children).filter(
+        child =>
+          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
+      );
+
+      return _internalRenderChildren(filteredChildren as ReactElement[]);
+    }
+
+    return _internalRenderChildren(children);
+
+    function _internalRenderChildren(internalChildren: ReactElement[]) {
+      return React.Children.map(internalChildren, (child, index) => {
+        return React.cloneElement(child, {
+          onFocusChange: (childIndex: number) => setFocusedSelectItem(childIndex),
+          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
+            onOptionChangeHandler(optionRef);
+            setShouldClick(false);
+          },
+          isSelected: child.props.value === value,
+          isSearching: isSearching,
+          selectOpened: expanded,
+          childIndex: index,
+          hasFocus: focusedSelectItem === index,
+          shouldClick: shouldClick
+        });
+      });
+    }
+  };
+
+  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}`
+      }}
+      type="text"
+      name="search-option"
+      placeholder={searchPlaceholder}
+    />
+  );
+
+  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(event.currentTarget.value);
+  };
+
+  const icon = useDetermineStatusIcon({ success, error });
+
+  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange?.(event);
+  };
+
+  useEffect(() => {
+    syncDisplayValue(value);
+  }, [value]);
+
+  useBodyClick(
+    (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
+    () => {
+      setExpanded(false);
+      setListPosition({ top: 0, bottom: "initial" });
+      setOpacity(0);
+    },
+    expanded
+  );
+
+  const additionalClasses = [];
+  expanded && additionalClasses.push(classes.expanded);
+  error && additionalClasses.push(classes.error);
+  disabled && additionalClasses.push(classes.disabled);
+  className && additionalClasses.push(className);
+  success && additionalClasses.push(classes.success);
+
+  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
+  return (
+    <Fragment>
+      <select
+        {...filterProps(rest, /^data-/, false)}
+        tabIndex={-1}
+        aria-hidden="true"
+        ref={nativeSelect}
+        name={name}
+        onChange={nativeOnChangeHandler}
+        className={readyclasses["sr-only"]}
+      >
+        <option value=""></option>
+        {React.Children.map(children, child => (
+          <option value={child.props.value}></option>
+        ))}
+      </select>
+      <div
+        {...filterProps(rest, /^data-/)}
+        ref={containerReference}
+        onKeyDown={onArrowNavigation}
+        className={`custom-select ${classes.select} ${additionalClasses.join(" ")} ${
+          className ?? ""
+        }`}
+      >
+        <button
+          {...selectButtonProps}
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
+          ref={customSelectButtonRef}
+          type="button"
+          name={name}
+          className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
+          disabled={disabled}
+          aria-disabled={disabled}
+          aria-invalid={error}
+          aria-expanded={expanded}
+          aria-haspopup="listbox"
+          aria-labelledby={labeledBy}
+          aria-describedby={describedBy}
+        >
+          <div data-display className={classes["selected"]}>
+            {!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>
+        </button>
+        <div
+          ref={optionListReference}
+          className={`list-wrapper ${classes["list-wrapper"]}`}
+          style={{
+            display: expanded ? "block" : "none",
+            opacity: opacity,
+            maxHeight: optionsListMaxHeight,
+            pointerEvents: expanded ? "auto" : "none",
+            ...listPosition
+          }}
+        >
+          {Array.isArray(children) && children.length > renderSearchCondition && renderSearch()}
+          <ul role="listbox">{renderOptions()}</ul>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export const Select = React.forwardRef(SelectComponent);

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

@@ -0,0 +1,211 @@
+/*
+ * 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?.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?.focus();
+          return;
+        case "Tab":
+          if (childrenCount >= renderSearchCondition && expanded) {
+            setIsSearching(true);
+            searchInputRef.current?.focus();
+            return;
+          }
+          setExpanded(false);
+
+          return;
+        case "Escape":
+          if (expanded) {
+            setExpanded(false);
+            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";
+
+    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()[transformOrigin] -
+          16
+        : containerReference.current.getBoundingClientRect()[transformOrigin] - 16;
+
+    if (listHeight && availableSpace < listHeight) {
+      setOptionsListMaxHeight(`${availableSpace}px`);
+      setOpacity(100);
+      return;
+    }
+
+    setOptionsListMaxHeight("none");
+    setOpacity(100);
+  };
+
+  return {
+    optionsListMaxHeight,
+    opacity,
+    setOpacity,
+    listPosition,
+    setListPosition
+  };
+};

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

@@ -0,0 +1,70 @@
+/*!
+ * 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.
+ */
+
+@use "../../../mixins.module.scss";
+@use "src/variables";
+
+.textarea-wrapper {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  [data-icon-status="success"],
+  [data-icon-status="error"] {
+    position: absolute;
+    right: 1.25rem;
+    z-index: 1;
+    top: 0.85rem;
+    font-size: 1.25rem;
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
+
+  @include mixins.outlineStates();
+}
+
+.textarea {
+  padding: variables.$form-element-horizontal-padding-mobile 0.856em;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  @include mixins.transition(all, 0.2s, ease-in-out);
+  font-family: var(--font-family);
+  font-size: var(--form-control-font-size);
+  color: var(--greyed-out);
+  width: 100%;
+  vertical-align: top;
+  resize: vertical;
+
+  &:disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+  }
+
+  @include mixins.browserOutlineDisabled();
+}
+
+@include mixins.outline();
+
+.error {
+  border-color: var(--error);
+  color: var(--error);
+}

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

@@ -0,0 +1,124 @@
+/*
+ * 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 { Textarea, Props } from "./Textarea";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const createTextarea = (params?: Props) => {
+  const queries = render(<Textarea data-testid="textarea" {...params} />);
+  const textarea = queries.getByRole("textbox");
+
+  return {
+    ...queries,
+    textarea
+  };
+};
+
+describe("Textarea should render", () => {
+  it("renders without crashing", () => {
+    const { textarea } = createTextarea();
+    expect(textarea).toBeTruthy();
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Textarea data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});
+
+describe("Textarea properties", () => {
+  it("is disabled", () => {
+    const { textarea } = createTextarea({ disabled: true });
+
+    expect(textarea).toHaveAttribute("disabled");
+  });
+
+  it("has 20 columns", () => {
+    const { textarea } = createTextarea({ cols: 20 });
+
+    expect(textarea).toHaveAttribute("cols", "20");
+  });
+
+  it("has autofocus", () => {
+    const { textarea } = createTextarea({ autoFocus: true });
+
+    waitFor(() => expect(textarea).toHaveAttribute("autofocus"));
+  });
+});
+
+describe("Textarea listeners", () => {
+  it("executes the functions", async () => {
+    const onChangeHandler = jest.fn();
+    const onKeyUpHandler = jest.fn();
+    const onKeyDownHandler = jest.fn();
+
+    const { textarea } = createTextarea({
+      onKeyUp: onKeyUpHandler,
+      onKeyDown: onKeyDownHandler,
+      onChange: onChangeHandler
+    });
+
+    textarea.focus();
+
+    expect(textarea).toHaveFocus();
+
+    await userEvent.keyboard("test");
+
+    expect(onKeyUpHandler).toHaveBeenCalled();
+    expect(onKeyDownHandler).toHaveBeenCalled();
+    expect(onChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe("Error status", () => {
+  it("has error class, and an icon", () => {
+    const { textarea } = createTextarea({ error: true });
+
+    expect(textarea).toHaveClass("error");
+    expect(textarea.nextElementSibling).toHaveClass("icon-error-circle");
+  });
+});
+
+describe("Success status", () => {
+  it("success icon should be visible", () => {
+    const { textarea } = createTextarea({ success: true });
+    const icon = textarea.parentElement?.querySelector(".icon-checkmark-circle-breakout");
+    expect(icon).toBeDefined();
+  });
+});