@onewelcome/react-lib-components 6.5.0 → 6.7.0

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

@@ -24,25 +24,27 @@
 .file-dropzone {
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
-  padding: 1.25rem;
+  padding: 0.25rem 1.25rem;
   position: relative;
-  @include transition(all, 0.2s, ease-in-out);
-  &.drag-active {
-    @include outline(
-      var(--color-blue-grey500),
-      var(--drag-border-style),
-      var(--input-border-width),
-      var(--input-border-radius),
-      var(--drag-background-color)
-    );
-    @include outlineStates;
+
+  .file-upload-title {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.875rem;
+    font-weight: 400;
   }
+
+  @include transition(all, 0.2s, ease-in-out);
   &.error {
     span[data-icon-status],
     .file-upload-title {
       color: var(--error);
     }
+
+    .file-select {
+      border-color: var(--error);
+    }
   }
+
   &.success {
     span[data-icon-status] {
       color: var(--success);
@@ -54,11 +56,58 @@
     background-color: var(--disabled);
     color: var(--greyed-out);
   }
+
   span[data-icon-status] {
     font-size: 1.25rem;
     position: absolute;
-    top: 2.74rem;
-    right: 1.375rem;
+    top: auto;
+    right: 2rem;
+  }
+
+  .file-upload-title-mandatory {
+    color: var(--color-red500);
+  }
+}
+
+.upload-button-wrapper {
+  background: var(--color-blue-grey25);
+  padding: 4px;
+
+  &.drag-active {
+    .outline {
+      pointer-events: none;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      inset: 0;
+      border: var(--file-upload-border-width) var(--drag-drop-border-style)
+        var(--color-blue-grey500);
+      border-radius: var(--input-border-radius);
+      background-color: var(--color-primary-light);
+
+      @include transition(all, 0.2s, ease-in-out);
+      &::before {
+        content: "Drop here";
+        text-align: center;
+        display: block;
+        color: var(--color-primary);
+        padding-top: 2rem;
+      }
+    }
+
+    &:hover .outline {
+      background-color: var(--color-primary-light);
+    }
+
+    & .file-select {
+      position: relative;
+    }
+
+    .error {
+      .outline {
+        border-color: var(--error);
+      }
+    }
   }
 }
 
@@ -73,12 +122,18 @@
 .file-select {
   display: flex;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
+  border: var(--file-upload-border-width) var(--drag-drop-border-style) var(--color-blue-grey100);
+  padding: 1.25rem;
+
   [class*="file"] {
     font-size: 1.25rem;
+    margin-left: 0.5rem;
   }
+
   [class*="typography"] {
-    margin-bottom: 0.625rem;
+    margin-bottom: 0;
   }
 }
 
@@ -94,6 +149,7 @@
   bottom: 0;
   opacity: 0;
   cursor: pointer;
+
   &:focus {
     outline: none;
   }
@@ -106,7 +162,8 @@
 .file-list {
   list-style: none;
   padding: 0;
-  margin: 0.75rem 0;
+  margin: 0.25rem 0;
+
   li:not(:last-child) {
     margin-bottom: 0.5rem;
   }

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

@@ -27,7 +27,6 @@ import { FILE_ACTION, FileItem, Props as FileConfig } from "./FileItem/FileItem"
 import { Props as InputProps } from "../Input/Input";
 import { Typography } from "../../Typography/Typography";
 import classes from "./FileUpload.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
@@ -50,6 +49,9 @@ export interface Props extends FileUploadType {
   onDrop?: (e: FileType[]) => void;
   onChange?: (e: FileType[]) => void;
   onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+  downloadFileLink?: string;
+  isRequired?: boolean;
+  invalidDropErrorMessage?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -65,8 +67,8 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     labeledBy,
     disabled = false,
     onChange,
-    dragAndDropText = "Drop file here or",
-    selectButtonText = "Select file",
+    dragAndDropText = "Drag and drop or",
+    selectButtonText = "Browse file",
     onDragOver,
     onDragLeave,
     wrapperProps,
@@ -75,19 +77,30 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
+    downloadFileLink,
+    isRequired = true,
+    invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     ...rest
   }: Props,
   ref
 ) => {
   const labelRef = useRef(null);
   const [dragActive, setDragActive] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
   const [inputError, setInputError] = useState(false);
   const icon = useDetermineStatusIcon({ success, error });
   let dropzoneClassNames = [classes["file-dropzone"]];
+  let dropzoneContainerClassNames = [classes["upload-button-wrapper"]];
   let subTextClass = [classes["file-selector-sub-text"]];
-  dragActive && dropzoneClassNames.push(classes["drag-active"]);
-  inputError ||
-    (error && dropzoneClassNames.push(classes["error"]) && subTextClass.push(classes["error"]));
+  let errorTextClass = [classes["file-selector-sub-text"]];
+  dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
+  const hasError = inputError || error || errorMsg;
+  if (hasError) {
+    const errorClass = classes["error"];
+    dropzoneClassNames.push(errorClass);
+    subTextClass.push(errorClass);
+    errorTextClass.push(errorClass);
+  }
   disabled && dropzoneClassNames.push(classes["disabled"]);
   success && !error && dropzoneClassNames.push(classes["success"]);
 
@@ -177,10 +190,13 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     e.preventDefault();
     e.stopPropagation();
     if (e?.dataTransfer?.files && e.dataTransfer.files.length) {
-      const extension = e?.dataTransfer?.files[0].name.split(".").pop();
+      const extension = e?.dataTransfer?.files[0]?.name.split(".").pop();
       if (extension && accept && !accept.includes(extension)) {
+        setErrorMsg(invalidDropErrorMessage.replace("$accept", accept));
         setDragActive(false);
         return;
+      } else {
+        setErrorMsg("");
       }
       const validatedFiles = getFileList(e.dataTransfer.files);
       onDrop?.(validatedFiles);
@@ -191,40 +207,62 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
-        <div
-          className={dropzoneClassNames.join(" ")}
-          onDragOver={e => !disabled && handleOnDragOver(e)}
-          onDragLeave={e => !disabled && handleOnDragLeave(e)}
-          onDrop={e => !disabled && handleOnDrop(e)}
-        >
+        <div className={dropzoneClassNames.join(" ")}>
           <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
-            {title}
+            {title}{" "}
+            {isRequired && <span className={classes["file-upload-title-mandatory"]}>*</span>}
           </Typography>
-          <div className={classes["file-select"]}>
-            <Icon className={"drop-file-icon"} icon={Icons.FileUpload} />
-            <Typography variant="body" className={"drag-and-drop-text"}>
-              {dragAndDropText}
-            </Typography>
-            <div className={classes["file-upload-btn"]}>
-              <Button variant="outline" disabled={disabled}>
-                {selectButtonText}
-                <input
-                  className={classes["upload-input"]}
-                  {...rest}
-                  ref={ref}
-                  aria-labelledby={labeledBy}
-                  type="file"
-                  name={name}
-                  {...(multiple && { multiple: true })}
-                  disabled={disabled}
-                  accept={accept}
-                  onChange={onInputChange}
-                  spellCheck={rest.spellCheck ?? false}
-                />
-              </Button>
+
+          {fileList?.length > 0 && (
+            <ul className={classes["file-list"]}>
+              {fileList.map(({ name, status, progress, error }) => (
+                <li key={name} className={status} id={name}>
+                  <FileItem
+                    name={name}
+                    key={`${name}_${status}`}
+                    status={status}
+                    progress={progress}
+                    error={error}
+                    downloadFileLink={downloadFileLink}
+                    onRequestedFileAction={onRequestedFileAction}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <div
+            className={dropzoneContainerClassNames.join(" ")}
+            onDragOver={e => !disabled && handleOnDragOver(e)}
+            onDragLeave={e => !disabled && handleOnDragLeave(e)}
+            onDrop={e => !disabled && handleOnDrop(e)}
+          >
+            <div className={classes["file-select"]}>
+              <Typography variant="body" className={"drag-and-drop-text"}>
+                {dragAndDropText}
+              </Typography>
+
+              <div className={classes["file-upload-btn"]}>
+                <Button variant="outline" disabled={disabled}>
+                  {selectButtonText}
+                  <input
+                    {...rest}
+                    className={`${classes["upload-input"]} ${rest.className}`}
+                    ref={ref}
+                    aria-labelledby={labeledBy}
+                    type="file"
+                    name={name}
+                    multiple={multiple}
+                    disabled={disabled}
+                    accept={accept}
+                    onChange={onInputChange}
+                    spellCheck={false}
+                  />
+                </Button>
+              </div>
+              {!disabled && icon}
+              <span className={classes["outline"]}></span>
             </div>
-            {!disabled && icon}
-            <span className={classes["outline"]}></span>
           </div>
         </div>
         {subText && (
@@ -232,22 +270,13 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             {subText}
           </Typography>
         )}
+
+        {errorMsg && (
+          <Typography variant={"sub-text"} className={errorTextClass.join(" ")}>
+            {errorMsg}
+          </Typography>
+        )}
       </div>
-      {fileList?.length > 0 && (
-        <ul className={classes["file-list"]}>
-          {fileList.map(({ name, status, progress, error }) => (
-            <li key={name} className={status} id={name}>
-              <FileItem
-                name={name}
-                status={status}
-                progress={progress}
-                error={error}
-                onRequestedFileAction={onRequestedFileAction}
-              />
-            </li>
-          ))}
-        </ul>
-      )}
     </div>
   );
 };

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

@@ -0,0 +1,12 @@
+.section-wrapper {
+  padding-bottom: 4rem;
+}
+
+.section-header-wrapper {
+  margin-bottom: 1rem;
+}
+
+.section-header {
+  line-height: 2rem;
+  color: var(--color-primary500);
+}

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

@@ -14,18 +14,51 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction } from "react";
+import React, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from "react";
 import { Props as SelectOptionProps, Option as SelectOption } from "../SingleSelect/Option";
 
+import classes from "./MultiSelect.module.scss";
+
 export interface Props extends SelectOptionProps {
   fixed?: boolean;
 }
 
 const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
-  { fixed: _fixed, ...rest }: Props,
+  { fixed: _fixed, hasFocus, className, ...rest }: Props,
   ref
 ) => {
-  return <SelectOption ref={ref} {...rest} />;
+  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+
+  const additionalClasses = [];
+  className && additionalClasses.push(className);
+  hasFocus && additionalClasses.push(classes["focus"]);
+
+  const scrollToSelectedElement = (element: HTMLLIElement) => {
+    const listbox = element.parentElement;
+    const listboxWrapper = element.parentElement?.parentElement;
+    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;
+    if (isListboxWrapperScrollable) {
+      listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
+    }
+    listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
+  };
+
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus) {
+      scrollToSelectedElement(innerOptionRef.current);
+    }
+  }, [hasFocus, innerOptionRef]);
+
+  return (
+    <SelectOption
+      ref={innerOptionRef}
+      isSelected={hasFocus}
+      disableDefaultSelectedStyle
+      className={additionalClasses.join(" ")}
+      aria-disabled={false}
+      {...rest}
+    />
+  );
 };
 
 export const MultiOption = React.forwardRef(MultiOptionComponent);

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

@@ -90,6 +90,7 @@ $listItemHeight: 2.5rem;
       display: flex;
       align-items: center;
       padding: 0.1875rem 0;
+      gap: 0.375rem;
     }
   }
 
@@ -143,9 +144,21 @@ $listItemHeight: 2.5rem;
         opacity: 0.05;
       }
 
-      &:focus {
-        outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: -var(--input-border-width-focus);
+      &: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:after,
@@ -166,20 +179,6 @@ $listItemHeight: 2.5rem;
   }
 }
 
-.selected-option {
-  &:before {
-    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);
-}
-
 .status {
   padding: 0.3125rem;
   display: flex;
@@ -210,11 +209,22 @@ $listItemHeight: 2.5rem;
 }
 
 .select-search {
-  position: relative;
-  width: 100%;
+  flex: 1;
   box-sizing: border-box;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--default);
+  font-family: var(--font-family);
+  line-height: 1.3333;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible,
+  &:focus {
+    outline: none;
+  }
 }
 
 .disabled {