@onewelcome/react-lib-components 6.1.0 → 6.3.0

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

@@ -0,0 +1,363 @@
+/*
+ * 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 "./MultiSelect.module.scss";
+
+import React, {
+  createRef,
+  ForwardRefRenderFunction,
+  Fragment,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Icon, Icons } from "../../../Icon/Icon";
+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";
+import { SelectedOptions, Display } from "./SelectedOptions";
+import { SelectButton } from "./SelectButton";
+import { MultiSelectProps } from "../Select.interfaces";
+import { useSearch } from "../useSearch";
+import { useAddNewBtn } from "../useAddNewBtn";
+
+const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (
+  {
+    children,
+    name,
+    disabled = false,
+    labeledBy,
+    placeholder,
+    describedBy,
+    searchPlaceholder = "Search item",
+    searchInputProps,
+    selectButtonProps = {},
+    className,
+    error = false,
+    success = false,
+    value,
+    clearLabel = "Clear selection",
+    noResultsLabel = "No results found",
+    onChange,
+    addNew,
+    search,
+    ...rest
+  }: MultiSelectProps,
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const [display, setDisplay] = useState<Record<string, Display>>({});
+  const containerReference = useRef<HTMLDivElement>(null);
+  const optionListReference = useRef<HTMLDivElement>(null);
+  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 [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
+  const optionsVisibleCount = React.Children.count(children) - Object.keys(display).length;
+  const {
+    filter,
+    isSearching,
+    renderSearch,
+    searchInputRef,
+    setIsSearching,
+    searchThreshold,
+    searchVisible
+  } = useSearch({
+    expanded,
+    search,
+    searchInputClassName: classes["select-search"],
+    optionsCount: optionsVisibleCount,
+    setFocusedSelectItem,
+    searchInputProps,
+    searchPlaceholder
+  });
+  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
+    addNew,
+    filter
+  });
+
+  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
+
+  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
+    if (nativeSelect.current && optionElement) {
+      const value = optionElement.getAttribute("data-value")!;
+      const options = [...nativeSelect.current.options];
+      const lastSelectedOptionValues = options
+        .filter(option => option.selected)
+        .map(option => option.value);
+      options.forEach(option => {
+        if (option.value === value || lastSelectedOptionValues.includes(option.value)) {
+          option.selected = true;
+        }
+      });
+      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    setExpanded(false);
+  };
+
+  const onSelectedOptionRemoveHandler = (value: string) => {
+    if (nativeSelect.current) {
+      const options = [...nativeSelect.current.options];
+      options.find(option => option.value === value)!.selected = false;
+      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  };
+
+  const customSelectButtonRef = useRef<HTMLButtonElement>(null);
+  const { onArrowNavigation } = useArrowNavigation({
+    expanded,
+    setExpanded,
+    isSearching,
+    setIsSearching,
+    setFocusedSelectItem,
+    onOptionChangeHandler,
+    childrenCount: optionsVisibleCount,
+    setShouldClick,
+    searchInputRef,
+    addBtnRef,
+    renderThreshold: searchThreshold
+  });
+
+  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
+    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });
+
+  const syncDisplayValue = (vals: string[]) => {
+    const displayArray = React.Children.map(children, child => child).reduce(
+      (prevOption, curOption) => {
+        if (vals.includes(curOption.props.value)) {
+          prevOption[curOption.props.value] = {
+            label: curOption.props.children,
+            fixed: curOption.props.fixed
+          };
+        }
+        return prevOption;
+      },
+      {} as Record<string, Display>
+    );
+    setDisplay(displayArray);
+  };
+
+  const syncSelectedOption = (vals: string[]) => {
+    if (nativeSelect.current) {
+      const options = [...nativeSelect.current.options];
+      options.forEach(option => {
+        if (vals.includes(option.value)) {
+          option.selected = true;
+        } else {
+          option.selected = false;
+        }
+      });
+    }
+  };
+
+  /**
+   * @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 = () => {
+    type ReactChildrenType = ReturnType<typeof React.Children.toArray>;
+
+    const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {
+      const selectedValues = Object.keys(display);
+      return internalChildren.filter(
+        child =>
+          typeof child === "object" &&
+          "props" in child &&
+          !selectedValues.includes(child.props.value as string)
+      );
+    };
+
+    if (isSearching || filter !== "") {
+      const filteredChildren = React.Children.toArray(children).filter(
+        child =>
+          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
+      );
+
+      const internalChildren = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));
+
+      if (internalChildren.length === 0) {
+        return <li className={classes["no-results"]}>{noResultsLabel}</li>;
+      }
+
+      return internalChildren;
+    }
+
+    return _internalRenderChildren(filterOutSelectedChildren(React.Children.toArray(children)));
+
+    function _internalRenderChildren(internalChildren: ReactChildrenType) {
+      return React.Children.map(internalChildren, (child, index) => {
+        return React.cloneElement(child as ReactElement, {
+          onFocusChange: (childIndex: number) => {
+            setFocusedSelectItem(childIndex);
+          },
+          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {
+            onOptionChangeHandler(optionRef.current);
+            setShouldClick(false);
+          },
+          isSearching: isSearching,
+          selectOpened: expanded,
+          childIndex: index,
+          hasFocus: focusedSelectItem === index,
+          shouldClick: shouldClick
+        });
+      });
+    }
+  };
+
+  const renderChevronIcon = () => {
+    return expanded ? (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronUp} />
+    ) : (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronDown} />
+    );
+  };
+
+  const icon = useDetermineStatusIcon({ success, error });
+
+  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    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);
+    syncSelectedOption(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);
+
+  const onSelectButtonClick = () => {
+    setExpanded(!expanded);
+  };
+
+  /** 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}
+        multiple={true}
+        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 ?? ""
+        }`}
+      >
+        {searchVisible && renderSearch()}
+        <div
+          className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
+          style={{ display: expanded && searchVisible ? "none" : "flex" }}
+        >
+          <div className={classes["display-container"]} data-display>
+            <SelectButton
+              {...selectButtonProps}
+              onClick={onSelectButtonClick}
+              name={name}
+              ref={customSelectButtonRef}
+              disabled={disabled}
+              aria-disabled={disabled}
+              aria-invalid={error}
+              aria-expanded={expanded}
+              aria-haspopup="listbox"
+              aria-labelledby={labeledBy}
+              aria-describedby={describedBy}
+            />
+            {value?.length === 0 && placeholder && (
+              <span className={classes["placeholder"]}>{placeholder}</span>
+            )}
+            {value?.length > 0 && (
+              <SelectedOptions
+                disabled={disabled}
+                display={display}
+                onClick={onSelectButtonClick}
+                onRemove={onSelectedOptionRemoveHandler}
+              />
+            )}
+          </div>
+          <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
+        </div>
+
+        <div
+          ref={optionListReference}
+          className={`list-wrapper ${classes["list-wrapper"]}`}
+          style={{
+            display: expanded ? "block" : "none",
+            opacity: opacity,
+            maxHeight: optionsListMaxHeight.wrapper,
+            pointerEvents: expanded ? "auto" : "none",
+            ...listPosition
+          }}
+        >
+          <ul
+            className={addNewBtnOptionsContainerClassName}
+            role="listbox"
+            style={{ maxHeight: optionsListMaxHeight.list }}
+          >
+            {renderOptions()}
+          </ul>
+          {renderAddNew()}
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export const MultiSelect = React.forwardRef(MultiSelectComponent);

package/src/{.scope.ts → components/Form/Select/MultiSelect/SelectButton.module.scss}

@@ -1,4 +1,4 @@
-/*
+/*!
  * Copyright 2022 OneWelcome B.V.
  *
  *    Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,4 +14,14 @@
  *    limitations under the License.
  */
 
-export default "*";
+.add-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+}

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

@@ -0,0 +1,37 @@
+/*
+ * 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, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./SelectButton.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"button"> {}
+
+const SelectButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { onClick, name, ...rest }: Props,
+  ref
+) => {
+  return (
+    <button
+      {...rest}
+      className={classes["add-btn"]}
+      onClick={onClick}
+      ref={ref}
+      type="button"
+      name={name}
+    ></button>
+  );
+};
+export const SelectButton = React.forwardRef(SelectButtonComponent);

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

@@ -0,0 +1,31 @@
+/*!
+ * 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.
+ */
+
+.options {
+  position: relative;
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  cursor: pointer;
+}
+
+.tag {
+  cursor: text;
+
+  .remove-btn {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,67 @@
+/*
+ * 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, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import { Tag } from "../../../Tag/Tag";
+
+import classes from "./SelectedOptions.module.scss";
+
+export type Display = {
+  label: string;
+  fixed?: boolean;
+};
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  display: Record<string, Display>;
+  onRemove: (value: string) => void;
+  disabled: boolean;
+}
+
+const SelectedOptionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { display, onRemove, disabled, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} className={classes["options"]} ref={ref}>
+      {Object.entries(display).map(([value, item]) => (
+        <Tag
+          key={value}
+          onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+            e.stopPropagation();
+          }}
+          className={classes["tag"]}
+          removeButton={
+            !disabled && !item.fixed
+              ? {
+                  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    onRemove(value);
+                  },
+                  className: classes["remove-btn"]
+                }
+              : undefined
+          }
+          backgroundColor="var(--color-blue-grey100)"
+          shape="sharp"
+        >
+          {item.label}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const SelectedOptions = React.forwardRef(SelectedOptionsComponent);

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

@@ -14,6 +14,54 @@
  *    limitations under the License.
  */
 
+import { ComponentPropsWithRef, ReactElement } from "react";
+import { Props as InputProps } from "../Input/Input";
+import { FormElement } from "../form.interfaces";
+
+export type PartialInputProps = Partial<InputProps>;
+
+export interface SearchProps {
+  enabled?: boolean;
+  renderThreshold?: number;
+  searchPlaceholder?: string;
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+}
+
+export interface AddNewProps {
+  label: string;
+  onAddNew: (value: string) => void;
+  btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export interface SelectProps<V extends string | readonly string[] | undefined>
+  extends ComponentPropsWithRef<"select">,
+    FormElement {
+  children: ReactElement[];
+  name?: string;
+  labeledBy?: string;
+  describedBy?: string;
+  placeholder?: string;
+  /**
+   * @deprecated
+   */
+  searchPlaceholder?: string;
+  /**
+   * @deprecated
+   */
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+  selectButtonProps?: ComponentPropsWithRef<"button">;
+  search?: SearchProps;
+  className?: string;
+  value: V;
+  clearLabel?: string;
+  noResultsLabel?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+  addNew?: AddNewProps;
+}
+
+export type SingleSelectProps = SelectProps<string>;
+export type MultiSelectProps = SelectProps<string[]>;
+
 export type Position = {
   top: number | `${number}rem` | "initial";
   bottom: number | `${number}rem` | "initial";

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

@@ -21,7 +21,7 @@ import {
   UseSelectPositionListParams
 } from "./Select.interfaces";
 
-/** @scope . */
+/** @scope .*/
 export const useArrowNavigation = ({
   expanded,
   setExpanded,
@@ -176,13 +176,20 @@ export const useArrowNavigation = ({
   return { onArrowNavigation };
 };
 
+/** @scope .*/
 export const useSelectPositionList = ({
   expanded,
   optionListReference,
   addBtnRef,
   containerReference
 }: UseSelectPositionListParams) => {
-  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState("none");
+  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>>({});
 
@@ -220,7 +227,10 @@ export const useSelectPositionList = ({
   const calculateOptionListMaxHeight = (position: Position) => {
     // Calculate max height if there's more space below the select
     const listHeight = optionListReference.current?.getBoundingClientRect().height;
-    const addNewButtonHeight = addBtnRef.current?.getBoundingClientRect().height ?? 0;
+    const addNewButtonHeightWithMargin = addBtnRef.current
+      ? addBtnRef.current.getBoundingClientRect().height +
+        parseInt(getComputedStyle(addBtnRef.current).marginBottom)
+      : 0;
     const transformOrigin = position.top !== "initial" ? "top" : "bottom";
 
     if (!containerReference.current) {
@@ -235,13 +245,20 @@ export const useSelectPositionList = ({
         ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
         : containerReference.current.getBoundingClientRect().top - 16;
 
-    if (listHeight && availableSpace < listHeight + addNewButtonHeight) {
-      setOptionsListMaxHeight(`${availableSpace}px`);
+    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {
+      const maxHeightObject = {
+        wrapper: `${availableSpace}px`,
+        list:
+          addNewButtonHeightWithMargin > 0
+            ? `${availableSpace - addNewButtonHeightWithMargin}px`
+            : "none"
+      };
+      setOptionsListMaxHeight(maxHeightObject);
       setOpacity(100);
       return;
     }
 
-    setOptionsListMaxHeight("none");
+    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });
     setOpacity(100);
   };
 

package/src/components/Form/Select/{Select.module.scss → SingleSelect/Select.module.scss}

@@ -111,6 +111,8 @@ $listItemHeight: 2.5rem;
     border-radius: var(--input-border-radius);
     color: var(--default);
     text-align: left;
+    overflow: auto;
+    max-height: calc($listItemHeight * 10);
 
     li {
       padding: 0.62rem 0.75rem;
@@ -144,10 +146,6 @@ $listItemHeight: 2.5rem;
   }
 }
 
-ul.has-sibling {
-  padding-bottom: 2px;
-}
-
 .selected-option {
   content: "";
   position: absolute;
@@ -167,38 +165,6 @@ ul.has-sibling {
   pointer-events: none;
 }
 
-.action-button {
-  border: none;
-  border-top: 1px solid var(--color-blue-grey50);
-  width: 100%;
-  height: 2.5rem;
-  padding: 0.625rem 0.75rem;
-  margin: 0 0 0.25rem;
-  background-color: var(--light);
-  border-radius: var(--input-border-radius);
-  color: var(--default);
-  text-align: left;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  font-family: var(--font-family);
-  font-size: var(--form-control-font-size);
-
-  &:focus {
-    outline: 1px solid;
-    outline-offset: 0;
-    border-radius: 0;
-  }
-
-  &:hover {
-    background-color: var(--color-blue-grey50);
-  }
-
-  &:active {
-    background-color: var(--color-blue-grey100);
-  }
-}
-
 .status {
   position: absolute;
   top: 50%;