@onewelcome/react-lib-components 8.5.0 → 8.6.0

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -30,6 +30,7 @@ import {
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
+import { withReadOnly } from "../../withReadOnly";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
@@ -182,4 +183,4 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Checkbox = React.forwardRef(CheckboxComponent);
+export const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -32,6 +32,7 @@ import { FormHelperText } from "../FormHelperText/FormHelperText";
 import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
 import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
 import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"fieldset"> {
   children?: ReactElement | ReactElement[];
@@ -123,4 +124,4 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
   );
 };
 
-export const Fieldset = React.forwardRef(FieldsetComponent);
+export const Fieldset = withReadOnly(React.forwardRef(FieldsetComponent));

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -186,4 +186,20 @@
   .file-subtitle {
     margin-left: 0;
   }
+
+  &[data-readonlyview="true"] {
+    & .file-list-container {
+      & p {
+        & span {
+          &:before {
+            color: var(--font-family);
+          }
+        }
+      }
+
+      & button {
+        visibility: hidden;
+      }
+    }
+  }
 }

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -22,6 +22,7 @@ import { ProgressBar } from "../../../ProgressBar/ProgressBar";
 import { FileType } from "../FileUpload";
 import { Button } from "../../../Button/Button";
 import { Link } from "../../../Link/Link";
+import { withReadOnly } from "../../../withReadOnly";
 export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -62,7 +63,8 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     progress,
     downloadFileLink,
     totalPercentage,
-    onRequestedFileAction
+    onRequestedFileAction,
+    ...rest
   }: Props,
   ref
 ) => {
@@ -213,8 +215,20 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
   };
 
+  const restPropsWithoutPointerEvents = () => {
+    let props = rest;
+    delete rest?.style?.pointerEvents;
+    return props;
+  };
+
   return (
-    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+    <div
+      ref={ref}
+      className={classes["file-item-wrapper"]}
+      aria-label={`${name}-wrapper`}
+      tabIndex={0}
+      {...restPropsWithoutPointerEvents()}
+    >
       <div className={classes["file-list-container"]}>
         {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}
 
@@ -240,4 +254,4 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const FileItem = React.forwardRef(FileItemComponent);
+export const FileItem = withReadOnly(React.forwardRef(FileItemComponent));

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

@@ -80,6 +80,58 @@
   & {
     @include transition(all, 0.2s, ease-in-out);
   }
+
+  &[data-readonlyview="true"]:has(.file-list) {
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+
+    ul {
+      li {
+        p {
+          span[data-icon] {
+            &:before {
+              color: var(--color-blue-grey900);
+            }
+          }
+        }
+
+        button {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .upload-button-wrapper {
+      display: none;
+    }
+  }
+
+  &[data-readonlyview="true"]:not(:has(.file-list)) {
+    .upload-button-wrapper {
+      min-height: 4.5rem;
+
+      & .file-select {
+        border: 0;
+
+        & p {
+          color: var(--read-only-text-color);
+        }
+      }
+
+      & .file-upload-btn {
+        display: none;
+      }
+    }
+
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+  }
 }
 
 .upload-button-wrapper {
@@ -88,7 +140,6 @@
 
   &.drag-active {
     .outline {
-      pointer-events: none;
       position: absolute;
       margin: 0;
       padding: 0;
@@ -134,6 +185,11 @@
   }
 }
 
+.file-selector-helper-text {
+  color: var(--greyed-out);
+  display: block;
+}
+
 .file-select {
   display: flex;
   align-items: center;

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -29,6 +29,7 @@ import { Typography } from "../../Typography/Typography";
 import classes from "./FileUpload.module.scss";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 import { Label } from "../Label/Label";
+import { withReadOnly } from "../../withReadOnly";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
 export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
@@ -43,6 +44,9 @@ export interface Props extends FileUploadType {
   maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
+  /**
+   * @deprecated use the `helperText` prop instead
+   */
   subText?: string;
   onDragOver?: DragEventHandler;
   onDragEnter?: DragEventHandler;
@@ -54,6 +58,8 @@ export interface Props extends FileUploadType {
   isRequired?: boolean;
   invalidDropErrorMessage?: string;
   noMultipleFileDropErrorMessage?: string;
+  readOnlyViewMessage?: string;
+  helperText?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -71,11 +77,12 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange,
     dragAndDropText = "Drag and drop or",
     selectButtonText = "Browse file",
+    readOnlyViewMessage = "No file uploaded",
     onDragOver,
     onDragLeave,
     wrapperProps,
     onDrop,
-    subText,
+    subText, // @deprecated
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
@@ -83,6 +90,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     noMultipleFileDropErrorMessage = "You can upload only a single file.",
+    helperText = subText,
     ...rest
   }: Props,
   ref
@@ -98,6 +106,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   let errorTextClass = [classes["file-selector-sub-text"]];
   dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
   const hasError = inputError || error || errorMsg;
+  const readOnlyView = rest["data-readonlyview"];
   if (hasError) {
     const errorClass = classes["error"];
     dropzoneClassNames.push(errorClass);
@@ -231,7 +240,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
-        <div className={dropzoneClassNames.join(" ")}>
+        <div className={dropzoneClassNames.join(" ")} data-readonlyview={readOnlyView}>
           <Label ref={labelRef} className={`${labelClasses.join(" ")}`} htmlFor={inputId}>
             {title}
           </Label>
@@ -258,10 +267,11 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             onDragOver={e => !disabled && handleOnDragOver(e)}
             onDragLeave={e => !disabled && handleOnDragLeave(e)}
             onDrop={e => !disabled && handleOnDrop(e)}
+            tabIndex={readOnlyView ? 0 : -1}
           >
             <div className={classes["file-select"]}>
               <Typography variant="body" className={"drag-and-drop-text"}>
-                {dragAndDropText}
+                {readOnlyView ? readOnlyViewMessage : dragAndDropText}
               </Typography>
 
               <div className={classes["file-upload-btn"]}>
@@ -293,9 +303,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             {errorMsg}
           </Typography>
         )}
-        {subText && (
+        {helperText && (
           <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
-            {subText}
+            {helperText}
           </Typography>
         )}
       </div>
@@ -303,4 +313,4 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const FileUpload = React.forwardRef(FileUploadComponent);
+export const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));

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

@@ -26,3 +26,7 @@ div.disabled {
 div.error {
   color: var(--error);
 }
+
+[data-readonlyview="true"] div.form-helper-text {
+  display: none;
+}

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

@@ -94,6 +94,32 @@
   [data-icon-status="error"] {
     color: var(--error);
   }
+
+  &[data-readonlyview="true"] {
+    color: var(--read-only-text-color);
+
+    & .Input-module {
+      border-color: var(--read-only-border-color);
+    }
+
+    & span.outline {
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+      background-color: var(--color-white);
+
+      &.focus {
+        border-color: var(--read-only-border-color);
+      }
+    }
+
+    &:hover {
+      & .outline {
+        color: var(--read-only-text-color);
+        background-color: var(--color-white);
+        border-color: var(--read-only-border-color);
+      }
+    }
+  }
 }
 
 .input {

package/src/components/Form/Input/Input.tsx

@@ -28,6 +28,7 @@ import readyclasses from "../../../readyclasses.module.scss";
 import { FormElement } from "../form.interfaces";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 import { MergeElementProps } from "../../../interfaces";
+import { withReadOnly } from "../../withReadOnly";
 
 export const dateTypes = ["date", "time", "datetime-local"] as const;
 
@@ -51,6 +52,7 @@ export type Props = MergeElementProps<
     type: Type;
     suffix?: ReactNode;
     prefix?: ReactNode;
+    readOnlyView?: boolean;
   }
 >;
 
@@ -69,6 +71,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     disabled,
     onFocus,
     onBlur,
+    readOnlyView,
     ...rest
   }: Props,
   ref: Ref<HTMLInputElement>
@@ -106,13 +109,16 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   success && wrapperClasses.push(classes["success"]);
 
   const icon = useDetermineStatusIcon({ success, error });
+  const readOnlyMode = rest["data-readonlyview"] as boolean;
 
   return (
     <div
       ref={inputWrapperRef}
       {...wrapperProps}
       style={{ ...style }}
+      data-readonlyview={readOnlyMode}
       className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
+      tabIndex={readOnlyMode ? 0 : -1}
     >
       {prefix && (
         <div data-prefix className={classes["prefix"]}>
@@ -122,6 +128,8 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       <input
         {...rest}
         ref={ref}
+        aria-readonly={readOnlyMode}
+        readOnly={readOnlyMode}
         onFocus={event => {
           setFocus(true);
           onFocus?.(event);
@@ -136,6 +144,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         disabled={disabled}
         className={inputClassNames.join(" ")}
         spellCheck={rest.spellCheck ?? false}
+        tabIndex={readOnlyMode ? -1 : 0}
       />
       {icon}
       {suffix && (
@@ -149,4 +158,4 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Input = React.forwardRef(InputComponent);
+export const Input = withReadOnly(React.forwardRef(InputComponent));

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

@@ -143,3 +143,49 @@
   color: var(--disabled);
   pointer-events: none;
 }
+
+[data-readonlyview="true"] {
+  & .radio-wrapper {
+    color: var(--read-only-text-color);
+
+    & span.input {
+      color: var(--read-only-text-color);
+      cursor: not-allowed;
+
+      &:before {
+        outline: 1px solid var(--read-only-border-color);
+        outline-offset: -1px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  label {
+    user-select: text;
+  }
+}
+
+input[type="radio"] {
+  &[data-readonlyview="true"] {
+    & ~ span.input {
+      color: var(--read-only-text-color);
+      cursor: not-allowed;
+
+      &:before {
+        outline: 1px solid var(--read-only-border-color);
+        outline-offset: -1px;
+        border-radius: 50%;
+      }
+    }
+
+    & ~ label {
+      user-select: text;
+      pointer-events: none;
+    }
+
+    & :focus-visible {
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
+    }
+  }
+}

package/src/components/Form/Radio/Radio.tsx

@@ -24,6 +24,7 @@ import {
   FormSelectorWrapper,
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   children: string;
@@ -127,4 +128,4 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Radio = React.forwardRef(RadioComponent);
+export const Radio = withReadOnly(React.forwardRef(RadioComponent));

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

@@ -96,6 +96,10 @@ $listItemHeight: 2.5rem;
     }
   }
 
+  .list-wrapper-container {
+    position: relative;
+  }
+
   .list-wrapper {
     border-color: var(--light-grey-border);
     border-style: var(--input-border-style);
@@ -106,7 +110,6 @@ $listItemHeight: 2.5rem;
     box-shadow: 0px 8px 10px 0px #01053224;
     position: absolute;
     z-index: variables.$select-z-index;
-    top: 44px;
     left: 0;
     width: 100%;
     overflow: auto;
@@ -255,3 +258,34 @@ $listItemHeight: 2.5rem;
     }
   }
 }
+
+[data-readonlyview="true"] {
+  & .custom-select {
+    color: var(--read-only-text-color);
+    border-color: var(--read-only-border-color);
+    background-color: var(--color-white);
+
+    &.error,
+    &.success {
+      border-color: var(--read-only-border-color);
+    }
+
+    button {
+      pointer-events: none;
+    }
+  }
+
+  & .status {
+    .chevron-icon {
+      visibility: hidden;
+    }
+  }
+
+  &:hover:not(.disabled):not(.expanded):not(.error) {
+    .custom-select:not(:focus) {
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+      background-color: var(--color-white);
+    }
+  }
+}

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

@@ -30,13 +30,14 @@ import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon
 import readyclasses from "../../../../readyclasses.module.scss";
 import { escapeRegExp, filterProps, generateID } from "../../../../util/helper";
 import { Icon, Icons } from "../../../Icon/Icon";
-import { MultiSelectProps } from "../Select.interfaces";
+import { MultiSelectProps, Position } from "../Select.interfaces";
 import { useAddNewBtn } from "../useAddNewBtn";
 import { useSelectPositionList } from "../useSelectPositionList";
 import { SelectButton } from "./SelectButton";
 import { Display, SelectedOptions } from "./SelectedOptions";
 import { useArrowNavigation } from "./useArrowNavigation";
 import { useSearch } from "./useSearch";
+import { withReadOnly } from "../../../withReadOnly";
 
 const getOptionId = (multiSelectId: string, optionIndex: number) =>
   `${multiSelectId}_option${optionIndex}`;
@@ -62,6 +63,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     onChange,
     addNew,
     search = { enabled: true, renderThreshold: 0, searchPlaceholder: "Search item" },
+    isReadOnlyView,
     ...rest
   }: MultiSelectProps,
   ref
@@ -135,6 +137,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
   };
 
   const customSelectButtonRef = useRef<HTMLButtonElement>(null);
+  const readOnlyView = !!rest["data-readonlyview"] || isReadOnlyView;
   const { onArrowNavigation } = useArrowNavigation({
     expanded,
     setExpanded,
@@ -144,7 +147,8 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     addBtnRef,
     searchInputRef,
     customSelectButtonRef,
-    onClose: resetSearchState
+    onClose: resetSearchState,
+    isReadOnlyView: readOnlyView
   });
 
   const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =
@@ -274,7 +278,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
     () => {
       setExpanded(false);
-      setListPosition({ top: 0, bottom: "initial" });
+      setListPosition(Position.Below);
       setOpacity(0);
     },
     expanded
@@ -288,10 +292,41 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
   success && additionalClasses.push(classes.success);
 
   const onSelectButtonClick = () => {
+    if (rest["data-readonlyview"] || isReadOnlyView) {
+      return;
+    }
     setExpanded(expanded => !expanded);
     setShouldClick(false);
   };
 
+  const optionsElement = (
+    <div className={`list-wrapper-container ${classes["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",
+          top: listPosition === Position.Below ? "4px" : "initial",
+          bottom: listPosition === Position.Above ? "4px" : "initial"
+        }}
+      >
+        <ul
+          id={getListboxId(multiSelectId.current)}
+          className={addNewBtnOptionsContainerClassName}
+          role="listbox"
+          aria-multiselectable="true"
+          style={{ maxHeight: optionsListMaxHeight.list }}
+        >
+          {renderOptions()}
+        </ul>
+        {renderAddNew()}
+      </div>
+    </div>
+  );
+
   /** 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 (
     <Fragment>
@@ -317,6 +352,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
         onKeyDown={onArrowNavigation}
         className={`custom-select ${classes.select} ${additionalClasses.join(" ")}`}
       >
+        {listPosition === Position.Above ? optionsElement : undefined}
         <div
           className={`${classes["custom-select"]} ${additionalClasses.join(" ")} `}
           style={{ display: "flex" }}
@@ -350,31 +386,10 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
           </div>
           <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </div>
-        <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
-            id={getListboxId(multiSelectId.current)}
-            className={addNewBtnOptionsContainerClassName}
-            role="listbox"
-            aria-multiselectable="true"
-            style={{ maxHeight: optionsListMaxHeight.list }}
-          >
-            {renderOptions()}
-          </ul>
-          {renderAddNew()}
-        </div>
+        {listPosition === Position.Below ? optionsElement : undefined}
       </div>
     </Fragment>
   );
 };
 
-export const MultiSelect = React.forwardRef(MultiSelectComponent);
+export const MultiSelect = withReadOnly(React.forwardRef(MultiSelectComponent));

package/src/components/Form/Select/MultiSelect/SelectedOptions.module.scss

@@ -29,3 +29,11 @@
     cursor: pointer;
   }
 }
+
+[data-readonlyview="true"] {
+  .tag {
+    .remove-btn {
+      display: none;
+    }
+  }
+}

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

@@ -24,6 +24,7 @@ interface UseArrowNavigationParams {
   searchInputRef: React.RefObject<HTMLInputElement>;
   customSelectButtonRef: React.RefObject<HTMLButtonElement>;
   onClose: () => void;
+  isReadOnlyView?: boolean;
 }
 
 /** @scope .*/
@@ -36,9 +37,13 @@ export const useArrowNavigation = ({
   addBtnRef,
   searchInputRef,
   customSelectButtonRef,
-  onClose
+  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);