@onewelcome/react-lib-components 8.5.0 → 8.6.0

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/Select.interfaces.ts

@@ -50,15 +50,16 @@ export interface SelectProps<V extends string | readonly string[] | undefined>
   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 type Position = {
-  top: number | `${number}rem` | "initial";
-  bottom: number | `${number}rem` | "initial";
-};
+export enum Position {
+  Above = "Above",
+  Below = "Below"
+}
 
 export interface UseArrowNavigationParams {
   expanded: boolean;
@@ -72,6 +73,7 @@ export interface UseArrowNavigationParams {
   searchInputRef: React.RefObject<HTMLInputElement>;
   addBtnRef?: React.RefObject<HTMLButtonElement>;
   renderThreshold: number;
+  isReadOnlyView?: boolean;
 }
 
 export interface UseSelectPositionListParams {

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

@@ -88,6 +88,10 @@ $listItemHeight: 2.5rem;
     }
   }
 
+  .list-wrapper-container {
+    position: relative;
+  }
+
   .list-wrapper {
     border-color: var(--light-grey-border);
     border-style: var(--input-border-style);
@@ -96,7 +100,6 @@ $listItemHeight: 2.5rem;
     box-shadow: 0 8px 10px 0 #01053224;
     position: absolute;
     z-index: variables.$select-z-index;
-    top: 44px;
     left: 0;
     width: 100%;
     overflow: auto;
@@ -157,6 +160,43 @@ $listItemHeight: 2.5rem;
       }
     }
   }
+
+  &[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 {
@@ -243,3 +283,22 @@ $listItemHeight: 2.5rem;
     }
   }
 }
+
+[data-readonlyview="true"] {
+  [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);
+      }
+    }
+  }
+}

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

@@ -30,11 +30,12 @@ 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 { 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";
 
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
@@ -54,6 +55,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     onChange,
     addNew,
     search,
+    isReadOnlyView,
     ...rest
   }: SingleSelectProps,
   ref
@@ -113,7 +115,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     setShouldClick,
     searchInputRef,
     addBtnRef,
-    renderThreshold: searchThreshold
+    renderThreshold: searchThreshold,
+    isReadOnlyView: isReadOnlyView || !!rest["data-readonlyview"]
   });
 
   const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
@@ -205,7 +208,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
     () => {
       setExpanded(false);
-      setListPosition({ top: 0, bottom: "initial" });
+      setListPosition(Position.Below);
       setOpacity(0);
     },
     expanded
@@ -245,13 +248,13 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
         <button
           {...selectButtonProps}
           onClick={() => {
-            setExpanded(!expanded);
+            setExpanded(isReadOnlyView || rest["data-readonlyview"] ? false : !expanded);
           }}
           ref={customSelectButtonRef}
           type="button"
           name={name}
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
-          style={{ display: expanded && searchVisible ? "none" : "initial" }}
+          style={{ display: expanded && searchVisible ? "none" : "block" }}
           disabled={disabled}
           aria-disabled={disabled}
           aria-invalid={error}
@@ -266,29 +269,31 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
           </div>
           <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </button>
-
-        <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 }}
+        <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"
+            }}
           >
-            {renderOptions()}
-          </ul>
-          {renderAddNew()}
+            <ul
+              className={addNewBtnOptionsContainerClassName}
+              role="listbox"
+              style={{ maxHeight: optionsListMaxHeight.list }}
+            >
+              {renderOptions()}
+            </ul>
+            {renderAddNew()}
+          </div>
         </div>
       </div>
     </Fragment>
   );
 };
-export const Select = React.forwardRef(SelectComponent);
+export const Select = withReadOnly(React.forwardRef(SelectComponent));

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

@@ -28,7 +28,8 @@ export const useArrowNavigation = ({
   setShouldClick,
   searchInputRef,
   addBtnRef,
-  renderThreshold
+  renderThreshold,
+  isReadOnlyView
 }: UseArrowNavigationParams) => {
   const onArrowNavigation = (event: React.KeyboardEvent) => {
     const codesToPreventDefault = [
@@ -53,6 +54,10 @@ export const useArrowNavigation = ({
 
     const isAddBtnFocused = addBtnRef?.current === document.activeElement;
 
+    if (isReadOnlyView) {
+      return;
+    }
+
     if (expanded) {
       codesToPreventDefault.push("Tab");
     }

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

@@ -32,7 +32,7 @@ export const useSelectPositionList = ({
     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>>({});
+  const [listPosition, setListPosition] = useState<Position>(Position.Below);
 
   useEffect(() => {
     rePositionList();
@@ -52,11 +52,11 @@ export const useSelectPositionList = ({
       window.innerHeight - containerReference.current.getBoundingClientRect().top;
 
     // Set position as if there's more space on the bottom
-    let position: Position = { top: "2.75rem", bottom: "initial" };
+    let position = Position.Below;
 
     // Set the position of the select
     if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-      position = { top: "initial", bottom: "2.75rem" };
+      position = Position.Above;
     }
 
     setListPosition(position);
@@ -72,7 +72,7 @@ export const useSelectPositionList = ({
       ? addBtnRef.current.getBoundingClientRect().height +
         parseInt(getComputedStyle(addBtnRef.current).marginBottom)
       : 0;
-    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
+    const transformOrigin = position === Position.Below ? "top" : "bottom";
 
     if (!containerReference.current) {
       console.error(

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

@@ -48,6 +48,26 @@
   }
 
   @include mixins.outlineStates();
+
+  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(--form-control-font-size);
+    position: relative;
+    border-radius: 0.125rem;
+
+    & ~ span.outline {
+      display: none;
+    }
+
+    &:has(~ [data-icon-status]) {
+      padding-right: 2.5rem;
+    }
+  }
 }
 
 .textarea {
@@ -77,6 +97,10 @@
     @include mixins.transition(all, 0.2s, ease-in-out);
     @include mixins.browserOutlineDisabled();
   }
+
+  &:has(~ [data-icon-status]) {
+    padding-right: 2.5rem;
+  }
 }
 
 .error {

package/src/components/Form/Textarea/Textarea.tsx

@@ -18,9 +18,11 @@ import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useState } from
 import classes from "./Textarea.module.scss";
 import { FormElement } from "../form.interfaces";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"textarea">, FormElement {
   wrapperProps?: ComponentPropsWithRef<"div">;
+  readOnlyView?: boolean;
 }
 
 const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
@@ -33,6 +35,7 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
     wrapperProps,
     onFocus,
     onBlur,
+    value,
     ...rest
   }: Props,
   ref
@@ -50,8 +53,19 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
 
   const icon = useDetermineStatusIcon({ success, error });
 
-  return (
-    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
+  const renderTextarea = () => {
+    if (rest["data-readonlyview"]) {
+      return (
+        <div
+          data-readonlyview={true}
+          tabIndex={0}
+          className={`${error ? classes["error"] : ""} ${success ? classes["success"] : ""}`}
+        >
+          {value}
+        </div>
+      );
+    }
+    return (
       <textarea
         {...rest}
         ref={ref}
@@ -66,11 +80,18 @@ const TextareaComponent: ForwardRefRenderFunction<HTMLTextAreaElement, Props> =
           setFocus(false);
           onBlur?.(event);
         }}
+        value={value}
       />
+    );
+  };
+
+  return (
+    <div {...wrapperProps} className={wrapperClasses.join(" ")}>
+      {renderTextarea()}
       {icon}
       <span className={outlineClasses.join(" ")}></span>
     </div>
   );
 };
 
-export const Textarea = React.forwardRef(TextareaComponent);
+export const Textarea = withReadOnly(React.forwardRef(TextareaComponent));

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

@@ -25,6 +25,7 @@ import { useWrapper } from "../../../../hooks/useWrapper";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+import { withReadOnly } from "../../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"div">, Omit<WrapperProps, "success"> {
   children: ReactElement[] | ReactElement;
@@ -80,7 +81,9 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   );
 };
 
+const ForwardedCheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);
+ForwardedCheckboxWrapper.displayName = "CheckboxWrapper";
 /**
  * @deprecated
  */
-export const CheckboxWrapper = React.forwardRef(CheckboxWrapperComponent);
+export const CheckboxWrapper = withReadOnly(ForwardedCheckboxWrapper);

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

@@ -37,6 +37,10 @@ input {
     justify-content: center;
 
     @include mixins.transition(all, 0.2s, ease-in-out);
+
+    &[data-readonlyview="true"] {
+      padding: auto;
+    }
   }
 
   [data-prefix],
@@ -61,4 +65,14 @@ input {
     cursor: not-allowed;
     color: var(--greyed-out);
   }
+
+  &[data-readonlyview="true"] {
+    & label {
+      color: var(--read-only-text-color);
+    }
+
+    & input {
+      color: var(--read-only-text-color);
+    }
+  }
 }

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

@@ -19,6 +19,7 @@ import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialInputProps extends Partial<InputProps> {}
 
@@ -63,7 +64,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   inputProps?.wrapperProps?.className &&
     inputWrapperClasses.push(inputProps?.wrapperProps?.className);
   disabled && inputWrapperClasses.push(classes["disabled"]);
-
+  const readValue = rest["data-readonlyview"] as boolean;
   return (
     <Wrapper
       {...rest}
@@ -88,6 +89,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         {...inputProps}
         prefix={prefix}
         suffix={suffix}
+        readOnlyView={readValue}
         wrapperProps={{
           className: inputWrapperClasses.join(" ")
         }}
@@ -116,4 +118,4 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const InputWrapper = React.forwardRef(InputWrapperComponent);
+export const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent));

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

@@ -20,6 +20,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { MultiSelect } from "../../Select/MultiSelect/MultiSelect";
 import { MultiSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialSelectProps extends Partial<MultiSelectProps> {}
 
@@ -74,6 +75,7 @@ const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Prop
         onChange={onChange}
         placeholder={placeholder}
         className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
       >
         {children as ReactElement[]}
       </MultiSelect>
@@ -81,4 +83,4 @@ const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Prop
   );
 };
 
-export const MultiSelectWrapper = React.forwardRef(MultiSelectWrapperComponent);
+export const MultiSelectWrapper = withReadOnly(React.forwardRef(MultiSelectWrapperComponent));

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

@@ -25,6 +25,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { Icons } from "../../../Icon/Icon";
 import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
+import { withReadOnly } from "../../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   children: ReactElement | ReactElement[];
@@ -49,6 +50,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   ref
 ) => {
   const { errorId, helperId } = useWrapper();
+  const readOnlyView = !!rest["data-readonlyview"];
 
   useEffect(() => {
     if (fieldsetProps.legend === undefined) {
@@ -59,17 +61,20 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   }, []);
 
   const renderChildren = () =>
-    React.Children.map(children, child =>
-      React.cloneElement(child, {
-        parentErrorId: errorId,
-        error: error,
-        checked: child.props.value === value,
-        name: name,
-        parentHelperId: helperText ? helperId : false,
-        onChange: onChange,
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
-      })
-    );
+    React.Children.map(children, child => {
+      if (!readOnlyView || child.props.value === value) {
+        return React.cloneElement(child, {
+          parentErrorId: errorId,
+          error: error,
+          checked: child.props.value === value,
+          name: name,
+          parentHelperId: helperText ? helperId : false,
+          onChange: onChange,
+          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
+        });
+      }
+      return null;
+    });
 
   return (
     <Fieldset {...fieldsetProps} disabled={disabled}>
@@ -96,4 +101,4 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const RadioWrapper = React.forwardRef(RadioWrapperComponent);
+export const RadioWrapper = withReadOnly(React.forwardRef(RadioWrapperComponent));

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

@@ -20,6 +20,7 @@ import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { Select } from "../../Select/SingleSelect/Select";
 import { useWrapper } from "../../../../hooks/useWrapper";
 import { SingleSelectProps } from "../../Select/Select.interfaces";
+import { withReadOnly } from "../../../withReadOnly";
 
 interface PartialSelectProps extends Partial<SingleSelectProps> {}
 
@@ -74,6 +75,7 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
         onChange={onChange}
         placeholder={placeholder}
         className={`${selectProps?.className ?? ""}`}
+        isReadOnlyView={!!rest["data-readonlyview"]}
       >
         {children as ReactElement[]}
       </Select>
@@ -81,4 +83,7 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
   );
 };
 
-export const SelectWrapper = React.forwardRef(SelectWrapperComponent);
+const forwardedSelectWrapper = React.forwardRef(SelectWrapperComponent);
+forwardedSelectWrapper.displayName = "SelectWrapper";
+
+export const SelectWrapper = withReadOnly(forwardedSelectWrapper);