@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,133 @@
+/*
+ * 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;
+  isReadOnlyView?: boolean;
+}
+
+/** @scope .*/
+export const useArrowNavigation = ({
+  expanded,
+  setExpanded,
+  setFocusedSelectItem,
+  childrenCount,
+  setShouldClick,
+  addBtnRef,
+  searchInputRef,
+  customSelectButtonRef,
+  onClose,
+  isReadOnlyView = false
+}: UseArrowNavigationParams) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    if (isReadOnlyView) {
+      return;
+    }
+    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/useMultiSelect.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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 from "react";
+import { MultiOption } from "./MultiOption";
+
+export interface UseMultiSelectArgs {
+  initialOptions?: string[];
+  allOptions?: string[];
+  setAllOptions?: (options: string[]) => void;
+  pickedOptions: string[];
+  setPickedOptions: (options: string[]) => void;
+  onAddNew?: (newOption: string) => void;
+}
+
+export interface UseMultiSelectResult {
+  handleOptionChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onAddNew: (newValue: string) => void;
+  optionElements: React.JSX.Element[];
+}
+
+export type UseMultiSelect = (args: UseMultiSelectArgs) => UseMultiSelectResult;
+
+export const useMultiSelect: UseMultiSelect = ({
+  initialOptions,
+  pickedOptions,
+  allOptions = pickedOptions,
+  setPickedOptions,
+  setAllOptions = setPickedOptions,
+  onAddNew
+}) => {
+  const handleOptionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const htmlOptions = e.target.options;
+
+    const newPickedOptions = [...pickedOptions];
+    Array.from(htmlOptions).forEach(option => {
+      const selected = option.selected;
+      const exists = pickedOptions.includes(option.value);
+
+      const shouldAdd = !exists && selected;
+      const shouldRemove = exists && !selected;
+
+      if (shouldAdd) {
+        newPickedOptions.push(option.value);
+      } else if (shouldRemove) {
+        const index = newPickedOptions.indexOf(option.value);
+        newPickedOptions.splice(index, 1);
+
+        if (initialOptions && !initialOptions.includes(option.value)) {
+          setAllOptions?.(allOptions.filter(value => value !== option.value));
+        }
+      }
+    });
+    setPickedOptions(newPickedOptions);
+  };
+
+  const onAddNewWrapper = (value: string) => {
+    if (value == undefined || value.length === 0) {
+      onAddNew?.("");
+      return;
+    }
+
+    const trimmedValue = value.trim();
+    if (trimmedValue.length === 0 || allOptions.includes(trimmedValue)) {
+      return;
+    }
+
+    setAllOptions?.([...allOptions, trimmedValue]);
+    setPickedOptions([...pickedOptions, trimmedValue]);
+
+    onAddNew?.(trimmedValue);
+  };
+
+  const optionElements = allOptions.map(option => (
+    <MultiOption key={option} value={option}>
+      {option}
+    </MultiOption>
+  ));
+
+  return {
+    handleOptionChange,
+    onAddNew: onAddNewWrapper,
+    optionElements
+  };
+};

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

@@ -0,0 +1,117 @@
+/*
+ * 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 { SearchProps } from "../Select.interfaces";
+
+interface Props {
+  selectId: string;
+  search?: SearchProps;
+  optionsCount: number;
+  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,
+  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
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        {...((search?.searchInputProps as any) ?? {})}
+        ref={searchInputRef}
+        value={filter}
+        onChange={event => setFilter(event.currentTarget.value)}
+        className={[searchInputClassName, search?.searchInputProps?.className].join(" ")}
+        style={{
+          display: expanded ? "block" : "none"
+        }}
+        type="text"
+        name="search-option"
+        placeholder={search?.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) {
+      resetSearchState();
+    }
+  }, [search?.searchInputProps?.reset]);
+
+  return {
+    renderSearch,
+    resetSearchState,
+    searchVisible: visible,
+    searchThreshold: threshold,
+    searchInputRef,
+    filter
+  };
+};

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

@@ -0,0 +1,84 @@
+/*
+ * 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 { 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>;
+  alwaysEnabled?: boolean;
+}
+
+export interface SelectProps<V extends string | readonly string[] | undefined>
+  extends ComponentPropsWithRef<"select">,
+    FormElement {
+  children: ReactElement[];
+  name?: string;
+  labeledBy?: string;
+  describedBy?: string;
+  placeholder?: string;
+  selectButtonProps?: ComponentPropsWithRef<"button"> & FormElement;
+  search?: SearchProps;
+  className?: string;
+  value: V;
+  clearLabel?: string;
+  noResultsLabel?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+  addNew?: AddNewProps;
+  isReadOnlyView?: boolean;
+}
+
+export type SingleSelectProps = SelectProps<string>;
+export type MultiSelectProps = SelectProps<string[]>;
+
+export enum Position {
+  Above = "Above",
+  Below = "Below"
+}
+
+export interface UseArrowNavigationParams {
+  expanded: boolean;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  isSearching: boolean;
+  setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
+  setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
+  childrenCount: number;
+  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+  onOptionChangeHandler: (optionElement: HTMLElement | null) => void;
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  addBtnRef?: React.RefObject<HTMLButtonElement>;
+  renderThreshold: number;
+  isReadOnlyView?: boolean;
+}
+
+export interface UseSelectPositionListParams {
+  expanded: boolean;
+  optionListReference: React.RefObject<HTMLDivElement>;
+  containerReference: React.RefObject<HTMLDivElement>;
+  addBtnRef: React.RefObject<HTMLButtonElement>;
+}

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

@@ -0,0 +1,116 @@
+/*
+ * 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,
+  createRef,
+  RefObject,
+  useEffect,
+  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;
+  isSearching?: boolean;
+  label?: string;
+  childIndex?: number;
+  onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;
+  onFocusChange?: (childIndex: number) => void;
+  isAddBtnFocused?: boolean;
+}
+
+const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
+  {
+    id,
+    children,
+    className,
+    isSelected = false,
+    disableDefaultSelectedStyle,
+    shouldClick,
+    hasFocus,
+    selectOpened,
+    isSearching,
+    childIndex,
+    onOptionSelect,
+    onFocusChange,
+    disabled,
+    value,
+    isAddBtnFocused,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const defaultOptionId = useRef(generateID(20));
+  const optionId = id ?? defaultOptionId.current;
+  const 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();
+    }
+  }, [isSelected, shouldClick]);
+
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching && !isAddBtnFocused) {
+      onFocusChange && childIndex && onFocusChange(childIndex);
+      innerOptionRef.current.focus();
+    }
+  }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
+
+  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);
+
+  return (
+    <li
+      {...rest}
+      id={optionId}
+      ref={innerOptionRef}
+      data-value={value}
+      className={additionalClasses.join(" ")}
+      onClick={onSelectHandler}
+      onKeyDown={event => {
+        if (event.code === "Enter") {
+          event.stopPropagation();
+          event.preventDefault();
+
+          onSelectHandler();
+        }
+      }}
+      aria-selected={isSelected}
+      role="option"
+      tabIndex={disabled ? -1 : 0}
+    >
+      {children}
+    </li>
+  );
+};
+
+export const Option = React.forwardRef(OptionComponent);