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

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

@@ -0,0 +1,177 @@
+/*
+ * 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 { UseArrowNavigationParams } from "../Select.interfaces";
+
+/** @scope .*/
+export const useArrowNavigation = ({
+  expanded,
+  setExpanded,
+  isSearching,
+  setIsSearching,
+  setFocusedSelectItem,
+  onOptionChangeHandler,
+  childrenCount,
+  setShouldClick,
+  searchInputRef,
+  addBtnRef,
+  renderThreshold,
+  isReadOnlyView
+}: UseArrowNavigationParams) => {
+  const onArrowNavigation = (event: React.KeyboardEvent) => {
+    const codesToPreventDefault = [
+      "ArrowDown",
+      "ArrowUp",
+      "ArrowLeft",
+      "ArrowRight",
+      "Space",
+      "Escape",
+      "End",
+      "Home"
+    ];
+
+    const codesToPreventDefaultWhenSearching = [
+      "ArrowDown",
+      "ArrowUp",
+      "Enter",
+      "Escape",
+      "MetaLeft",
+      "MetaRight"
+    ];
+
+    const isAddBtnFocused = addBtnRef?.current === document.activeElement;
+
+    if (isReadOnlyView) {
+      return;
+    }
+
+    if (expanded) {
+      codesToPreventDefault.push("Tab");
+    }
+
+    if (addBtnRef) {
+      codesToPreventDefaultWhenSearching.push("Tab");
+    }
+
+    if (codesToPreventDefault.includes(event.code) && !event.metaKey && !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":
+          setIsSearching(false);
+          setExpanded(false);
+          return;
+        case "Tab":
+          if (addBtnRef?.current) {
+            addBtnRef.current.focus();
+            return;
+          }
+          setIsSearching(false);
+          setExpanded(false);
+      }
+    } else {
+      switch (event.code) {
+        case "ArrowDown":
+          if (!expanded) {
+            setExpanded(true);
+            setFocusedSelectItem(0);
+            return;
+          }
+          setFocusedSelectItem(prevState => {
+            return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+          });
+          return;
+        case "ArrowUp":
+          if (!expanded) {
+            setExpanded(true);
+            setFocusedSelectItem(childrenCount - 1);
+            return;
+          }
+
+          setFocusedSelectItem(prevState => {
+            return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+          });
+          return;
+        case "Space":
+          if (!expanded) {
+            setExpanded(true);
+            setFocusedSelectItem(0);
+            return;
+          }
+
+          onOptionChangeHandler(event.target as HTMLElement);
+          setShouldClick(true);
+          setExpanded(false);
+
+          return;
+        case "Enter":
+        case "Home":
+          setFocusedSelectItem(0);
+
+          return;
+        case "Tab":
+          if (childrenCount >= renderThreshold && expanded && !isAddBtnFocused) {
+            setIsSearching(true);
+            searchInputRef.current?.focus();
+            return;
+          } else if (addBtnRef?.current && expanded && !isAddBtnFocused) {
+            addBtnRef.current.focus();
+            return;
+          }
+          setExpanded(false);
+
+          return;
+        case "Escape":
+          if (expanded) {
+            setExpanded(false);
+          }
+          return;
+        case "End":
+          setFocusedSelectItem(childrenCount - 1);
+          return;
+        case "ArrowLeft":
+          if (event.metaKey && expanded) {
+            event.preventDefault();
+            setFocusedSelectItem(0);
+          }
+          return;
+        case "ArrowRight":
+          if (event.metaKey && expanded) {
+            event.preventDefault();
+            setFocusedSelectItem(childrenCount - 1);
+          }
+          return;
+      }
+    }
+  };
+
+  return { onArrowNavigation };
+};

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

@@ -0,0 +1,113 @@
+/*
+ * 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";
+import { Input } from "../../Input/Input";
+
+interface Props {
+  search?: SearchProps;
+  optionsCount: number;
+  searchInputClassName: string;
+  expanded: boolean;
+  setFocusedSelectItem: (idx: number) => void;
+}
+
+/** @scope .*/
+export const useSearch = ({
+  search,
+  optionsCount,
+  searchInputClassName,
+  expanded,
+  setFocusedSelectItem
+}: Props) => {
+  const [filter, setFilter] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+
+  const DEFAULT_RENDER_THRESHOLD = 10;
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;
+  const hasEnoughChildren = optionsCount >= threshold;
+
+  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(event.currentTarget.value);
+  };
+
+  const shouldRenderSearch = () => {
+    if (search?.enabled) {
+      return hasEnoughChildren;
+    }
+
+    if (search) {
+      return search.enabled as boolean;
+    }
+
+    return optionsCount > DEFAULT_RENDER_THRESHOLD;
+  };
+
+  const renderSearch = () => (
+    <Input
+      {...(search?.searchInputProps ?? {})}
+      ref={searchInputRef}
+      onFocus={() => setIsSearching(true)}
+      onBlur={() => setIsSearching(false)}
+      onChange={filterResults}
+      className={searchInputClassName}
+      wrapperProps={{
+        className: search?.searchInputProps?.wrapperProps?.className
+      }}
+      style={{
+        display: expanded ? "block" : "none"
+      }}
+      type="text"
+      name="search-option"
+      placeholder={search?.searchPlaceholder ? search?.searchPlaceholder : "Search item"}
+    />
+  );
+
+  const resetSearchState = () => {
+    setFilter("");
+    setIsSearching(false);
+    setFocusedSelectItem(-1);
+  };
+
+  const visible = shouldRenderSearch();
+
+  useEffect(() => {
+    search?.searchInputProps?.reset && resetSearchState();
+  }, [search?.searchInputProps?.reset]);
+
+  useEffect(() => {
+    const searchDeactivated =
+      !visible &&
+      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */
+    if (searchDeactivated) {
+      resetSearchState();
+    }
+  }, [isSearching, visible]);
+
+  return {
+    renderSearch,
+    setIsSearching,
+    searchVisible: visible,
+    searchThreshold: threshold,
+    searchInputRef,
+    filter,
+    isSearching
+  };
+};

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

@@ -0,0 +1,66 @@
+/*!
+ * 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 *;
+
+ul.has-sibling {
+  padding-bottom: 2px;
+}
+
+.action-button {
+  position: relative;
+  border: none;
+  border-top: 1px solid var(--color-blue-grey50);
+  width: 100%;
+  height: relativeToBaseFontSize(2.5);
+  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,
+  &.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 {
+    background-color: var(--color-blue-grey50);
+  }
+
+  &:active {
+    background-color: var(--color-blue-grey100);
+  }
+}

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

@@ -0,0 +1,89 @@
+/*
+ * 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 "./useAddNewBtn.module.scss";
+
+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;
+}
+
+/** @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 = () =>
+    shouldRender && (
+      <button
+        data-testid="select-action-button"
+        {...addNew.btnProps}
+        ref={addBtnRef}
+        type="button"
+        className={additionalClasses.join(" ")}
+        onClick={() => {
+          addNew.onAddNew(filter);
+          onClickCallback?.();
+        }}
+        id={id}
+      >
+        {!filter && addNewLabel}
+        {filter && <span style={{ fontWeight: "700" }}>{`"${filter}"`}</span>}
+        {filter && ` (${addNewLabel.toLowerCase()})`}
+      </button>
+    );
+
+  const addNewBtnOptionsContainerClassName = addNew ? classes["has-sibling"] : "";
+
+  return {
+    addNewBtnOptionsContainerClassName,
+    renderAddNew,
+    addBtnRef
+  };
+};

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

@@ -0,0 +1,109 @@
+/*
+ * 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 { useEffect, useState } from "react";
+import { Position, UseSelectPositionListParams } from "./Select.interfaces";
+
+/** @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<Position>(Position.Below);
+
+  useEffect(() => {
+    rePositionList();
+  }, [expanded]);
+
+  const rePositionList = () => {
+    if (!expanded || !optionListReference.current || !containerReference.current) {
+      return;
+    }
+
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
+
+    const viewportRelativeRect = containerReference.current.getBoundingClientRect();
+
+    const spaceOnTopOfSelect = viewportRelativeRect.top;
+    const spaceOnBottomOfSelect = window.innerHeight - viewportRelativeRect.bottom;
+
+    const position =
+      listHeight > spaceOnBottomOfSelect && spaceOnTopOfSelect > spaceOnBottomOfSelect
+        ? Position.Above
+        : Position.Below;
+
+    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 === Position.Below ? "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/Textarea/Textarea.module.scss

@@ -0,0 +1,142 @@
+/*!
+ * 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 "../../../variables";
+@use "../../../functions" as *;
+
+.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: var(--font-size-big);
+
+    &:before {
+      font-size: var(--icon-font-big);
+      height: 1.25rem;
+      width: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+  }
+
+  @include mixins.outlineStates();
+
+  &:has(div[data-readonlyview="true"]:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:has(div[data-readonlyview="true"]:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
+
+  div[data-readonlyview="true"] {
+    min-height: 4rem;
+    border: 1px solid var(--color-blue-grey100);
+    color: var(--read-only-text-color);
+    background-color: var(--color-white);
+    padding: 0.5rem 0.75rem;
+    font-family: var(--font-family);
+    font-size: var(--input-font-size);
+    position: relative;
+    border-radius: 0.125rem;
+    word-wrap: break-word;
+
+    &:focus {
+      outline: none;
+    }
+
+    & ~ span.outline {
+      display: none;
+    }
+
+    &:has(~ [data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
+
+  & .outline {
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
+  }
+
+  &:not(.disabled):has(textarea:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:not(.disabled):has(textarea:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
+}
+
+.textarea {
+  padding: relativeToBaseFontSize(variables.$form-element-vertical-padding-ratio-mobile)
+    relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  color: var(--color-blue-grey900);
+  vertical-align: top;
+  resize: vertical;
+  position: relative;
+  background-color: transparent;
+  z-index: 1;
+  /* making space for outline in text area when scroll bar is visible: width smaller and margin top & bottom to have space for border */
+  width: calc(100% - var(--input-border-width));
+  margin: var(--input-border-width) 0;
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled();
+  }
+
+  &:has(~ [data-icon-status]) {
+    padding-right: 2.5rem;
+  }
+}
+
+.error {
+  border-color: var(--error);
+}
+
+@include mixins.outline();