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

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

@@ -0,0 +1,409 @@
+/*!
+ * 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";
+@use "../../../../variables";
+@use "../../../../functions" as *;
+
+$listItemHeight: 2.5rem;
+
+.select {
+  position: relative;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  font-size: var(--form-control-font-size);
+
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
+
+  [data-display] {
+    color: var(--color-default);
+    font-family: var(--font-family);
+  }
+
+  &.expanded {
+    .list-wrapper {
+      background: var(--light);
+    }
+  }
+
+  &:not(.expanded) {
+    &:has(button:focus) {
+      position: relative;
+      z-index: 2;
+      @include mixins.focusVisibleOutline($selectors: null);
+    }
+
+    button:focus:not(.error) {
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
+      padding: 0
+        calc(
+          relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
+              --input-border-width
+            )
+        );
+    }
+  }
+
+  &:hover:not(.disabled):not(.expanded):not(.error) {
+    button:not(:focus) {
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
+      background-color: var(--color-blue-grey25);
+    }
+  }
+
+  .custom-select {
+    position: relative;
+    width: 100%;
+    min-height: calc(relativeToBaseFontSize(2.875) - (2 * var(--input-border-width)));
+    padding: 0
+      calc(
+        relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
+            --input-border-width
+          )
+      );
+    background-color: transparent;
+    border-color: var(--input-border-color);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
+    border-radius: var(--input-border-radius);
+    font-size: var(--form-control-font-size);
+    cursor: pointer;
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
+
+    &:focus {
+      outline: 0;
+    }
+
+    &.error {
+      border-color: var(--error);
+      color: var(--error);
+    }
+
+    &.error:focus {
+      border-width: var(--input-border-width);
+    }
+
+    &.disabled {
+      border-color: var(--color-disabled);
+    }
+  }
+
+  .list-wrapper-container {
+    position: relative;
+  }
+
+  .list-wrapper {
+    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 8px 10px 0 #01053224;
+    position: absolute;
+    z-index: variables.$select-z-index;
+    left: 0;
+    width: 100%;
+    overflow: auto;
+  }
+
+  ul {
+    box-sizing: border-box;
+    padding: 0.25rem 0;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    background-color: var(--light);
+    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;
+      font-size: var(--form-control-font-size);
+      margin: 0;
+      position: relative;
+      line-height: 1.43;
+      box-sizing: border-box;
+      min-height: $listItemHeight;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+
+        &::before {
+          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);
+
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-blue-grey50);
+      }
+
+      &:active {
+        background-color: var(--color-blue-grey100);
+      }
+
+      &.disabled {
+        color: var(--greyed-out);
+        background-color: var(--disabled);
+        pointer-events: none;
+      }
+    }
+  }
+
+  &[data-readonlyview="true"] {
+    user-select: text;
+    pointer-events: none;
+
+    & button[type="button"] {
+      background-color: var(--color-white);
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+
+      & .selected {
+        color: var(--read-only-text-color);
+      }
+
+      &.error,
+      &.success {
+        border-color: var(--read-only-border-color);
+        color: var(--read-only-text-color);
+
+        & .status {
+          visibility: visible;
+        }
+      }
+
+      & .status {
+        & .chevron-icon {
+          visibility: hidden;
+        }
+      }
+    }
+    & .list-wrapper {
+      visibility: hidden;
+      & ul {
+        display: none;
+      }
+    }
+  }
+}
+
+.selected-option {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-top-right-radius: 0.125rem;
+  border-bottom-right-radius: 0.125rem;
+  border-left: 0.25rem solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.selected {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  left: calc(
+    relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
+        --input-border-width
+      )
+  );
+  right: calc(2.25rem);
+  text-align: left;
+  white-space: normal;
+  .required {
+    color: var(--error);
+  }
+}
+
+.status {
+  position: absolute;
+  top: 50%;
+  right: 0.8125rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="info"] {
+    color: var(--default);
+    font-size: var(--font-size-big);
+  }
+
+  .chevron-icon {
+    color: var(--default);
+    font-size: var(--font-size-small);
+  }
+
+  * + * {
+    margin-left: 1.25rem;
+  }
+}
+
+.placeholder {
+  color: var(--greyed-out);
+}
+
+.select-search {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.disabled {
+  cursor: not-allowed;
+  color: var(--greyed-out);
+  background-color: var(--color-blue-grey25);
+
+  > * {
+    pointer-events: none;
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .select {
+    .custom-select {
+      padding: 0
+        calc(
+          relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
+              --input-border-width
+            )
+        );
+    }
+
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        padding: 0
+          calc(
+            relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
+                --input-border-width
+              )
+          );
+      }
+    }
+  }
+}
+
+[data-readonlyview="true"] .root {
+  [data-readonlyview] {
+    & button {
+      border-color: var(--read-only-border-color);
+
+      & .status {
+        & .chevron-icon {
+          visibility: hidden;
+        }
+      }
+
+      &.error {
+        border-color: var(--read-only-border-color);
+        color: var(--read-only-text-color);
+      }
+    }
+  }
+}
+
+.inlineEditing {
+  & .select {
+    background-color: transparent;
+    transition: none;
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        border-width: 0;
+        border-radius: 0.3125rem;
+      }
+    }
+    &:focus {
+      & button {
+        &:focus {
+          border: 0.125rem solid var(--color-focus);
+        }
+      }
+    }
+    &:hover {
+      & button {
+        & .status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:not(.disabled):not(.expanded):not(.error) {
+        button:not(:focus) {
+          border: 0;
+          background-color: transparent;
+        }
+      }
+    }
+    & button {
+      border: 0;
+      &.expanded {
+        div.status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:focus-visible {
+        outline: 0.125rem solid var(--color-focus);
+        border-radius: 0.3125rem;
+        outline-offset: -1px;
+      }
+      &.error {
+        color: var(--color-default);
+      }
+      & .status {
+        span.chevron-icon {
+          visibility: hidden;
+        }
+      }
+    }
+    &[data-readonlyview="true"] {
+      & button {
+        background-color: transparent;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,312 @@
+/*
+ * 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, {
+  createRef,
+  ForwardRefRenderFunction,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useClickOutside } from "../../../../hooks/useClickOutside";
+import readyclasses from "../../../../readyclasses.module.scss";
+import { filterProps } from "../../../../util/helper";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Position, SingleSelectProps } from "../Select.interfaces";
+import { useSelectPositionList } from "../useSelectPositionList";
+import { useAddNewBtn } from "../useAddNewBtn";
+import { useSearch } from "./useSearch";
+import { useArrowNavigation } from "./useArrowNavigation";
+import { withReadOnly } from "../../../withReadOnly";
+import { RequiredSign } from "../../../RequiredSign/RequiredSign";
+import { FormStatusIndicator } from "../../FormStatusIndicator/FormStatusIndicator";
+import { useInlineEditing } from "../../../InlineEditing/InlineEditingContext";
+
+const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
+  {
+    children,
+    name,
+    disabled = false,
+    labeledBy,
+    placeholder,
+    describedBy,
+    selectButtonProps,
+    className,
+    error = false,
+    success = false,
+    value,
+    clearLabel = "Clear selection",
+    noResultsLabel = "No results found",
+    onChange,
+    addNew,
+    search,
+    isReadOnlyView,
+    ...rest
+  }: SingleSelectProps,
+  ref
+) => {
+  const [expanded, setExpanded] = useState(false);
+  const [display, setDisplay] = useState("");
+  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 optionsCount = React.Children.count(children);
+  const {
+    filter,
+    isSearching,
+    renderSearch,
+    searchInputRef,
+    setIsSearching,
+    searchThreshold,
+    searchVisible
+  } = useSearch({
+    expanded,
+    search,
+    searchInputClassName: classes["select-search"],
+    optionsCount,
+    setFocusedSelectItem
+  });
+  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
+    addNew,
+    filter,
+    focusedSelectItem,
+    optionsCount,
+    searchInputRef
+  });
+
+  const { inlineClassNames } = useInlineEditing();
+  const rootClassNames = inlineClassNames ? ` ${inlineClassNames}` : "";
+
+  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
+
+  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
+    if (nativeSelect.current && optionElement) {
+      nativeSelect.current.value = optionElement.getAttribute("data-value")!;
+      nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    setExpanded(false);
+  };
+
+  const customSelectButtonRef = useRef<HTMLButtonElement>(null);
+  const { onArrowNavigation } = useArrowNavigation({
+    expanded,
+    setExpanded,
+    isSearching,
+    setIsSearching,
+    setFocusedSelectItem,
+    onOptionChangeHandler,
+    childrenCount: optionsCount,
+    setShouldClick,
+    searchInputRef,
+    addBtnRef,
+    renderThreshold: searchThreshold,
+    isReadOnlyView: isReadOnlyView || !!rest["data-readonlyview"]
+  });
+
+  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
+    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });
+
+  const syncDisplayValue = (val: string) => {
+    React.Children.forEach(children, child => {
+      if (child.props.value === val) {
+        setDisplay(child.props.children);
+      }
+    });
+  };
+
+  /**
+   * @description We have to modify the children (Option component) to have an 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 => {
+        const childElement = child as React.ReactElement;
+        const innerChildren = childElement.props.children;
+
+        const childText = Array.isArray(innerChildren)
+          ? innerChildren.map(String).join("")
+          : String(innerChildren);
+        return childText.toLowerCase().includes(filter.toLowerCase());
+      });
+
+      const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);
+
+      if (internalChildren.length === 0) {
+        return <li className={classes["no-results"]}>{noResultsLabel}</li>;
+      }
+
+      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.current);
+            setShouldClick(false);
+          },
+          isSelected: child.props.value === value,
+          isSearching: isSearching,
+          selectOpened: expanded,
+          childIndex: index,
+          hasFocus: focusedSelectItem === index,
+          shouldClick: shouldClick,
+          isAddBtnFocused: addBtnRef.current === document.activeElement
+        });
+      });
+    }
+  };
+
+  const renderChevronIcon = () => {
+    return expanded ? (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronUp} />
+    ) : (
+      <Icon className={classes["chevron-icon"]} icon={Icons.ChevronDown} />
+    );
+  };
+
+  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);
+  }, [value]);
+
+  const myElementRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(myElementRef, () => {
+    if (!expanded) {
+      return;
+    }
+    setExpanded(false);
+    setListPosition(Position.Below);
+    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 (
+    <div ref={myElementRef} className={`${classes["root"]}${rootClassNames}`}>
+      <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(" ")}`}
+      >
+        {searchVisible && renderSearch()}
+        <button
+          {...selectButtonProps}
+          onClick={() => {
+            setExpanded(isReadOnlyView || rest["data-readonlyview"] ? false : !expanded);
+          }}
+          ref={customSelectButtonRef}
+          type="button"
+          name={name}
+          className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
+          style={{ display: expanded && searchVisible ? "none" : "block" }}
+          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>}
+            <RequiredSign className={classes["required"]} />
+          </div>
+          <div className={classes["status"]}>
+            <FormStatusIndicator isReadOnlyView={isReadOnlyView} success={success} error={error}>
+              {renderChevronIcon()}
+            </FormStatusIndicator>
+          </div>
+        </button>
+        <div className="list-wrapper-container">
+          <div
+            ref={optionListReference}
+            className={`list-wrapper ${classes["list-wrapper"]}`}
+            style={{
+              display: expanded ? "block" : "none",
+              opacity: opacity,
+              maxHeight: optionsListMaxHeight.wrapper,
+              pointerEvents: expanded ? "auto" : "none",
+              bottom: listPosition === Position.Above ? "2.85rem" : "initial",
+              marginTop: "4px"
+            }}
+          >
+            <ul
+              className={addNewBtnOptionsContainerClassName}
+              role="listbox"
+              style={{ maxHeight: optionsListMaxHeight.list }}
+            >
+              {renderOptions()}
+            </ul>
+            {renderAddNew()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export const Select = withReadOnly(React.forwardRef(SelectComponent));