@onewelcome/react-lib-components 6.1.0 → 6.3.0

package/src/components/Form/Select/{Select.tsx → SingleSelect/Select.tsx}

@@ -17,7 +17,6 @@
 import classes from "./Select.module.scss";
 
 import React, {
-  ComponentPropsWithRef,
   createRef,
   ForwardRefRenderFunction,
   Fragment,
@@ -26,53 +25,17 @@ import React, {
   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>;
-
-interface SearchProps {
-  enabled?: boolean;
-  renderThreshold?: number;
-  searchPlaceholder?: string;
-  searchInputProps?: PartialInputProps & { reset?: boolean };
-}
-
-export interface Props 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: string;
-  clearLabel?: string;
-  noResultsLabel?: string;
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
-  addNew?: {
-    label: string;
-    onAddNew: (value: string) => void;
-    btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
-  };
-}
-
-const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
+import { useBodyClick } from "../../../../hooks/useBodyClick";
+import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
+import readyclasses from "../../../../readyclasses.module.scss";
+import { filterProps } from "../../../../util/helper";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { SingleSelectProps } from "../Select.interfaces";
+import { useArrowNavigation, useSelectPositionList } from "../SelectService";
+import { useAddNewBtn } from "../useAddNewBtn";
+import { useSearch } from "../useSearch";
+
+const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
     children,
     name,
@@ -93,42 +56,41 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     addNew,
     search,
     ...rest
-  }: Props,
+  }: SingleSelectProps,
   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 [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
-
-  const DEFAULT_RENDER_THRESHOLD = 10;
+  const optionsCount = React.Children.count(children);
+  const {
+    filter,
+    isSearching,
+    renderSearch,
+    searchInputRef,
+    setIsSearching,
+    searchThreshold,
+    searchVisible
+  } = useSearch({
+    expanded,
+    search,
+    searchInputClassName: classes["select-search"],
+    optionsCount,
+    setFocusedSelectItem,
+    searchInputProps,
+    searchPlaceholder
+  });
+  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
+    addNew,
+    filter
+  });
 
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const addBtnRef = useRef<HTMLButtonElement>(null);
-
-  const addNewLabel = addNew?.label ?? "Create new";
-
-  const getRenderThreshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;
-  const hasEnoughChildren = Array.isArray(children) && children.length > getRenderThreshold;
-
-  const shouldRenderSearch = () => {
-    if (search?.enabled) {
-      return hasEnoughChildren;
-    }
-
-    if (search) {
-      return search.enabled as boolean;
-    }
-
-    return children.length > DEFAULT_RENDER_THRESHOLD;
-  };
 
   const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
     if (nativeSelect.current && optionElement) {
@@ -147,11 +109,11 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     setIsSearching,
     setFocusedSelectItem,
     onOptionChangeHandler,
-    childrenCount: React.Children.count(children),
+    childrenCount: optionsCount,
     setShouldClick,
     searchInputRef,
     addBtnRef,
-    renderThreshold: getRenderThreshold
+    renderThreshold: searchThreshold
   });
 
   const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
@@ -209,28 +171,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     }
   };
 
-  const renderSearch = () => (
-    <Input
-      {...(search?.searchInputProps ?? searchInputProps)}
-      ref={searchInputRef}
-      onFocus={() => setIsSearching(true)}
-      onBlur={() => setIsSearching(false)}
-      onChange={filterResults}
-      className={classes["select-search"]}
-      wrapperProps={{
-        className:
-          search?.searchInputProps?.wrapperProps?.className ??
-          searchInputProps?.wrapperProps?.className
-      }}
-      style={{
-        display: expanded ? "block" : "none"
-      }}
-      type="text"
-      name="search-option"
-      placeholder={search?.searchPlaceholder ?? searchPlaceholder}
-    />
-  );
-
   const renderChevronIcon = () => {
     return expanded ? (
       <Icon className={classes["chevron-icon"]} icon={Icons.ChevronUp} />
@@ -239,10 +179,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     );
   };
 
-  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFilter(event.currentTarget.value);
-  };
-
   const icon = useDetermineStatusIcon({ success, error });
 
   const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -275,16 +211,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
     expanded
   );
 
-  const resetSearchState = () => {
-    setFilter("");
-    setIsSearching(false);
-    setFocusedSelectItem(-1);
-  };
-
-  useEffect(() => {
-    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();
-  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
-
   const additionalClasses = [];
   expanded && additionalClasses.push(classes.expanded);
   error && additionalClasses.push(classes.error);
@@ -317,7 +243,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           className ?? ""
         }`}
       >
-        {shouldRenderSearch() && renderSearch()}
+        {searchVisible && renderSearch()}
         <button
           {...selectButtonProps}
           onClick={() => {
@@ -327,7 +253,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           type="button"
           name={name}
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
-          style={{ display: expanded && shouldRenderSearch() ? "none" : "initial" }}
+          style={{ display: expanded && searchVisible ? "none" : "initial" }}
           disabled={disabled}
           aria-disabled={disabled}
           aria-invalid={error}
@@ -349,27 +275,19 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, Props> = (
           style={{
             display: expanded ? "block" : "none",
             opacity: opacity,
-            maxHeight: optionsListMaxHeight,
+            maxHeight: optionsListMaxHeight.wrapper,
             pointerEvents: expanded ? "auto" : "none",
             ...listPosition
           }}
         >
-          <ul className={addNew && classes["has-sibling"]} role="listbox">
+          <ul
+            className={addNewBtnOptionsContainerClassName}
+            role="listbox"
+            style={{ maxHeight: optionsListMaxHeight.list }}
+          >
             {renderOptions()}
           </ul>
-          {addNew && (
-            <button
-              data-testid={"select-action-button"}
-              className={classes["action-button"]}
-              onClick={() => addNew.onAddNew(filter)}
-              ref={addBtnRef}
-              {...addNew.btnProps}
-            >
-              {!filter && addNewLabel}
-              {filter && <span style={{ fontWeight: "700" }}>{`"${filter}"`}</span>}
-              {filter && ` (${addNewLabel.toLowerCase()})`}
-            </button>
-          )}
+          {renderAddNew()}
         </div>
       </div>
     </Fragment>

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

@@ -0,0 +1,51 @@
+/*!
+ * 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.
+ */
+
+ul.has-sibling {
+  padding-bottom: 2px;
+}
+
+.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);
+  }
+}

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

@@ -0,0 +1,54 @@
+/*
+ * 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, { useRef } from "react";
+import { AddNewProps } from "./Select.interfaces";
+
+interface Props {
+  addNew?: AddNewProps;
+  filter: string;
+}
+
+export const useAddNewBtn = ({ addNew, filter }: Props) => {
+  const addBtnRef = useRef<HTMLButtonElement>(null);
+
+  const addNewLabel = addNew?.label ?? "Create new";
+
+  const renderAddNew = () =>
+    addNew && (
+      <button
+        data-testid={"select-action-button"}
+        className={classes["action-button"]}
+        onClick={() => addNew.onAddNew(filter)}
+        ref={addBtnRef}
+        {...addNew.btnProps}
+      >
+        {!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/useSearch.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, useState } from "react";
+import { PartialInputProps, SearchProps } from "./Select.interfaces";
+import { Input } from "../Input/Input";
+
+interface Props {
+  search?: SearchProps;
+  optionsCount: number;
+  /**
+   * @deprecated
+   */
+  searchPlaceholder?: string;
+  /**
+   * @deprecated
+   */
+  searchInputProps?: PartialInputProps & { reset?: boolean };
+  searchInputClassName: string;
+  expanded: boolean;
+  setFocusedSelectItem: (idx: number) => void;
+}
+
+export const useSearch = ({
+  search,
+  optionsCount,
+  searchPlaceholder,
+  searchInputProps,
+  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 ?? searchInputProps ?? {})}
+      ref={searchInputRef}
+      onFocus={() => setIsSearching(true)}
+      onBlur={() => setIsSearching(false)}
+      onChange={filterResults}
+      className={searchInputClassName}
+      wrapperProps={{
+        className:
+          search?.searchInputProps?.wrapperProps?.className ??
+          searchInputProps?.wrapperProps?.className
+      }}
+      style={{
+        display: expanded ? "block" : "none"
+      }}
+      type="text"
+      name="search-option"
+      placeholder={search?.searchPlaceholder ?? searchPlaceholder}
+    />
+  );
+
+  const resetSearchState = () => {
+    setFilter("");
+    setIsSearching(false);
+    setFocusedSelectItem(-1);
+  };
+
+  const visible = shouldRenderSearch();
+
+  useEffect(() => {
+    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();
+  }, [searchInputProps?.reset, 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/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -36,10 +36,6 @@ input {
     justify-content: center;
   }
 
-  .floating-label-active [data-icon]:before {
-    transform: translateY(5px);
-  }
-
   [data-prefix],
   [data-suffix] {
     font-size: var(--form-control-font-size);
@@ -63,9 +59,3 @@ input {
     color: var(--greyed-out);
   }
 }
-
-.floating-label-active [data-prefix],
-.floating-label-active [data-suffix] {
-  padding-top: 1rem;
-  transform: translateY(0);
-}

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.module.scss

@@ -0,0 +1,27 @@
+/*!
+ * 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 "src/variables";
+
+.select-label {
+  left: calc(
+    1.25rem + 2px
+  ); // 2px is for offset of the selectwrapper border. It's relative to the parent div which doesn't have a border.
+}
+
+.select-helper-text {
+  margin-top: 0.15rem;
+}

package/src/components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper.tsx

@@ -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 React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
+import classes from "./MultiSelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../../hooks/useWrapper";
+import { MultiSelect } from "../../Select/MultiSelect/MultiSelect";
+import { MultiSelectProps } from "../../Select/Select.interfaces";
+
+interface PartialSelectProps extends Partial<MultiSelectProps> {}
+
+export interface Props
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
+  children: ReactElement[] | ReactElement | number[];
+  placeholder?: string;
+  value: string[];
+  error?: boolean;
+  selectProps?: PartialSelectProps;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  success?: boolean;
+}
+
+const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    error,
+    success,
+    value,
+    placeholder,
+    selectProps,
+    helperProps,
+    onChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const { errorId, helperId, labelId } = useWrapper();
+
+  return (
+    <Wrapper
+      {...rest}
+      ref={ref}
+      errorId={errorId}
+      helperId={helperId}
+      labelProps={{ id: labelId, className: classes["select-label"] }}
+      helperProps={{
+        ...helperProps,
+        className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
+      }}
+      error={error}
+    >
+      <MultiSelect
+        {...selectProps}
+        value={value}
+        labeledBy={labelId}
+        error={error}
+        success={success}
+        describedBy={error ? errorId : helperId}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={`${selectProps?.className ?? ""}`}
+      >
+        {children as ReactElement[]}
+      </MultiSelect>
+    </Wrapper>
+  );
+};
+
+export const MultiSelectWrapper = React.forwardRef(MultiSelectWrapperComponent);

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -25,7 +25,3 @@
 .select-helper-text {
   margin-top: 0.15rem;
 }
-
-.floating-label-active [data-display] {
-  top: calc(50% + 0.5rem);
-}

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -17,10 +17,11 @@
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
 import classes from "./SelectWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
-import { Select, Props as SelectProps } from "../../Select/Select";
+import { Select } from "../../Select/SingleSelect/Select";
 import { useWrapper } from "../../../../hooks/useWrapper";
+import { SingleSelectProps } from "../../Select/Select.interfaces";
 
-interface PartialSelectProps extends Partial<SelectProps> {}
+interface PartialSelectProps extends Partial<SingleSelectProps> {}
 
 export interface Props
   extends Omit<ComponentPropsWithRef<"div">, "onChange">,

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

@@ -31,12 +31,6 @@
     @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
 
-    &.floating-label-active {
-      font-size: 0.75rem;
-      transform: translateY(-0.8rem);
-      color: var(--default);
-    }
-
     &.error {
       color: var(--error);
     }

package/src/components/Icon/Icon.module.scss

@@ -337,3 +337,8 @@
   content: "\e9d1";
   @include fontProperties();
 }
+
+.icon-warning-filled:before {
+  content: "\e948";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -85,6 +85,7 @@ export enum Icons {
   TriangleUp = "triangle-up",
   Undo = "undo",
   Warning = "warning",
+  WarningFilled = "warning-filled",
   FileOutline = "file-outline",
   FileUpload = "file-upload-outline",
   FileDownload = "file-download-outline",