@onewelcome/react-lib-components 6.7.1 → 7.0.0

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

@@ -15,20 +15,12 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
-import { PartialInputProps, SearchProps } from "../Select.interfaces";
+import { 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;
@@ -38,8 +30,6 @@ interface Props {
 export const useSearch = ({
   search,
   optionsCount,
-  searchPlaceholder,
-  searchInputProps,
   searchInputClassName,
   expanded,
   setFocusedSelectItem
@@ -72,23 +62,21 @@ export const useSearch = ({
 
   const renderSearch = () => (
     <Input
-      {...(search?.searchInputProps ?? searchInputProps ?? {})}
+      {...(search?.searchInputProps ?? {})}
       ref={searchInputRef}
       onFocus={() => setIsSearching(true)}
       onBlur={() => setIsSearching(false)}
       onChange={filterResults}
       className={searchInputClassName}
       wrapperProps={{
-        className:
-          search?.searchInputProps?.wrapperProps?.className ??
-          searchInputProps?.wrapperProps?.className
+        className: search?.searchInputProps?.wrapperProps?.className
       }}
       style={{
         display: expanded ? "block" : "none"
       }}
       type="text"
       name="search-option"
-      placeholder={search?.searchPlaceholder ?? searchPlaceholder}
+      placeholder={search?.searchPlaceholder ? search?.searchPlaceholder : "Search item"}
     />
   );
 
@@ -101,8 +89,8 @@ export const useSearch = ({
   const visible = shouldRenderSearch();
 
   useEffect(() => {
-    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();
-  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);
+    search?.searchInputProps?.reset && resetSearchState();
+  }, [search?.searchInputProps?.reset]);
 
   useEffect(() => {
     const searchDeactivated =

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

@@ -357,3 +357,8 @@
   content: "\e94b";
   @include fontProperties();
 }
+
+.icon-add-circle:before {
+  content: "\e94c";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -95,7 +95,8 @@ export enum Icons {
   DownloadFile = "download-file-outline",
   RetryFile = "retry",
   AbortFile = "cancel",
-  FileAltIcon = "file-alt"
+  FileAltIcon = "file-alt",
+  AddCircle = "add-circle"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Layout/FormPage/FormWithStepper/FormWithStepper.module.scss

@@ -16,24 +16,21 @@
 
 $header-height: 13.25rem;
 
-.wrapper {
-  position: relative;
+.content {
   margin: 0 auto;
   font-family: var(--font-family);
-  .content {
-    position: relative;
-    display: flex;
-    gap: 3.5rem;
+  position: relative;
+  display: flex;
+  gap: 3.5rem;
 
-    background-color: var(--color-white);
-    height: calc(100vh - $header-height);
-    overflow: auto;
-    scroll-behavior: smooth;
+  background-color: var(--color-white);
+  height: calc(100vh - $header-height);
+  overflow: auto;
+  scroll-behavior: smooth;
 
-    .form-section {
-      display: flex;
-      flex-direction: column;
-      flex: 0 0 72%;
-    }
+  .form-section {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 72%;
   }
 }

package/src/components/Layout/FormPage/FormWithStepper/FormWithStepper.tsx

@@ -24,11 +24,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const FormWithStepper = ({ children, stepper, ...rest }: Props) => {
   return (
-    <div className={`${classes["wrapper"]} ${rest.className}`} {...rest}>
-      <div className={classes["content"]}>
-        {stepper}
-        <div className={classes["form-section"]}>{children}</div>
-      </div>
+    <div className={`${classes["content"]} ${rest.className}`} {...rest}>
+      {stepper}
+      <div className={classes["form-section"]}>{children}</div>
     </div>
   );
 };

package/src/components/Notifications/NotificationProvider/NotificationContext.tsx

@@ -30,9 +30,9 @@ import {
   AddNotification
 } from "./notification.interfaces";
 import { defaultTranslations } from "./NotificationService";
-import { useSnackbar } from "../Snackbar/useSnackbar";
 import { deepMerge, generateID } from "../../../util/helper";
 import { DeepPartial } from "../../../interfaces";
+import { useAlert } from "../Alert/useAlert";
 
 interface NotificationState {
   notifications: Notification<ErrorNotification | SuccessNotification>[];
@@ -59,7 +59,7 @@ export const NotificationHandler = ({
   translations = {},
   dispatchFn
 }: NotificationHandlerProps) => {
-  const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
+  const { enqueueErrorAlert, enqueueSuccessAlert } = useAlert();
   const {
     state: { notifications }
   } = useNotificationContext();
@@ -101,22 +101,18 @@ export const NotificationHandler = ({
       ) {
         dispatchFn({ type: "remove", payload: { id: notification.id } });
       } else if (notification.status && !notification.handled && notification.type === "error") {
-        enqueueErrorSnackbar(
-          notification.title ?? mergedTranslations.general.error,
-          determineNotificationMessage(notification as Notification<ErrorNotification>),
-          {
-            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
-          }
-        );
+        enqueueErrorAlert({
+          title: notification.title ?? mergedTranslations.general.error,
+          content: determineNotificationMessage(notification as Notification<ErrorNotification>),
+          onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+        });
         dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
       } else if (notification.title && !notification.handled && notification.type === "success") {
-        enqueueSuccessSnackbar(
-          notification.title ?? mergedTranslations.general.success,
-          notification.message,
-          {
-            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
-          }
-        );
+        enqueueSuccessAlert({
+          title: notification.title ?? mergedTranslations.general.success,
+          content: notification.message,
+          onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+        });
 
         dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
       }

package/src/components/Pagination/Pagination.tsx

@@ -102,10 +102,16 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       <div className={classes["left"]}>
         {pageSize && (
           <div className={classes["per-page"]}>
-            <Label id="page-size-select-label" className={classes["label"]}>
+            <Label
+              id="page-size-select-label"
+              htmlFor="page-size-select"
+              className={classes["label"]}
+            >
               {translate.itemsPerPage}
             </Label>
             <Select
+              name="page-size-select"
+              id="page-size-select"
               labeledBy="page-size-select-label"
               className={`${classes["form-element"]} ${classes["page-size-select"]}`}
               value={pageSize.toString()}
@@ -147,10 +153,13 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
                 name="current-value-input"
                 value={currentPage.toString()}
                 className={`${classes["form-element"]} ${classes["current-page-select"]}`}
-                searchInputProps={{
-                  wrapperProps: { className: classes["search-input-wrapper"] },
-                  reset: resetPageNoSelect,
-                  autoComplete: "off"
+                search={{
+                  enabled: true,
+                  searchInputProps: {
+                    wrapperProps: { className: classes["search-input-wrapper"] },
+                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,
+                    autoComplete: "off"
+                  }
                 }}
               >
                 {Array.from(Array(pagesAmount).keys()).map(page => (
@@ -192,7 +201,7 @@ const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             </div>
           )}
           <div className={classes["next"]}>
-            {!!(currentPage !== undefined || (currentPage !== undefined && !totalElements)) && (
+            {(currentPage !== undefined || false) && (
               <IconButton
                 disabled={currentPage >= pagesAmount}
                 title="next"

package/src/components/Popover/Popover.tsx

@@ -97,7 +97,7 @@ const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   useEffect(() => {
     calculatePosition();
-  }, [showPopover]);
+  }, [showPopover, elToBePositioned, anchorEl]);
 
   useEffect(() => {
     const anchor = anchorEl?.current as HTMLElement;

package/src/components/Tag/RemoveButton.module.scss

@@ -23,6 +23,7 @@
   border: none;
   padding: 0;
   margin-right: -0.375rem;
+  cursor: pointer;
 
   &:hover {
     border-radius: 0.125rem;

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -124,31 +124,6 @@ interface CSSProperties {
   skeletonBackgroundColor?: string;
   skeletonAnimationColorRgb?: string;
 
-  /**
-   * @deprecated
-   */
-  snackbarTextColor?: string;
-  /**
-   * @deprecated
-   */
-  snackbarInfoBackgroundColor?: string;
-  /**
-   * @deprecated
-   */
-  snackbarSuccessBackgroundColor?: string;
-  /**
-   * @deprecated
-   */
-  snackbarErrorBackgroundColor?: string;
-  /**
-   * @deprecated
-   */
-  snackbarWarningBackgroundColor?: string;
-  /**
-   * @deprecated
-   */
-  snackbarBorderRadius?: string;
-
   alertTextColor?: string;
   alertTextInvertedColor?: string;
 
@@ -211,7 +186,6 @@ interface CSSProperties {
   tabPressedColor?: string;
   toggleBackgroundColor?: string;
   tooltipBackgroundColor?: string;
-  wizardStepIndicatorFutureColor?: string;
   contextMenuHoverColor?: string;
   contextMenuPressedColor?: string;
   default?: string;
@@ -236,7 +210,6 @@ interface CSSProperties {
   formControlFontSize?: string;
   fileUploadBorderWidth?: string;
   dragDropBorderStyle?: string;
-  defaultZIndex1?: string;
   fontSizeDataGrid?: string;
 }
 
@@ -350,13 +323,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
 
-    snackbarTextColor: "var(--light)",
-    snackbarInfoBackgroundColor: "var(--color-primary500)",
-    snackbarSuccessBackgroundColor: "var(--color-green500)",
-    snackbarErrorBackgroundColor: "var(--color-red500)",
-    snackbarWarningBackgroundColor: "var(--color-orange500)",
-    snackbarBorderRadius: "2px",
-
     alertTextColor: "var(--default)",
     alertTextInvertedColor: "var(--light)",
 
@@ -422,7 +388,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     tabPressedColor: "var(--default-pressed-color)",
     toggleBackgroundColor: "var(--color-blue-grey100)",
     tooltipBackgroundColor: "var(--default)",
-    wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
     contextMenuHoverColor: "var(--default-hover-color)",
     contextMenuPressedColor: "var(--default-pressed-color)",
     default: "var(--color-blue-grey900)",
@@ -444,7 +409,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
-    defaultZIndex1: "1",
     formControlFontSize: "0.875rem", //FIXME: UCL-395
     fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
   };

package/src/font/icomoon.svg

@@ -83,5 +83,6 @@
 <glyph unicode="&#xe949;" glyph-name="retry" d="M856.071 792.378c-88.386 88.381-209.679 143.238-344.383 143.238-269.41 0-487.010-218.21-487.010-487.619 0-269.411 217.6-487.619 487.010-487.619 227.354 0 416.911 155.429 471.161 365.714h-126.779c-49.986-142.021-185.297-243.806-344.383-243.806-201.753 0-365.714 163.959-365.714 365.711s163.961 365.714 365.714 365.714c101.181 0 191.39-42.057 257.219-108.495l-196.266-196.267h426.666v426.667l-143.236-143.238z" />
 <glyph unicode="&#xe94a;" glyph-name="cancel" d="M512 960c-283.136 0-512-228.864-512-512s228.864-512 512-512c283.136 0 512 228.864 512 512s-228.864 512-512 512zM512 38.4c-225.792 0-409.6 183.808-409.6 409.6s183.808 409.6 409.6 409.6c225.792 0 409.6-183.808 409.6-409.6s-183.808-409.6-409.6-409.6zM695.808 704l-183.808-183.808-183.808 183.808-72.192-72.192 183.808-183.808-183.808-183.808 72.192-72.192 183.808 183.808 183.808-183.808 72.192 72.192-183.808 183.808 183.808 183.808-72.192 72.192z" />
 <glyph unicode="&#xe94b;" glyph-name="file-alt" d="M635.447 846.222l274.773-274.773v-521.67h-796.443v796.443h521.67zM635.447 960h-521.67c-62.578 0-113.778-51.2-113.778-113.778v-796.443c0-62.579 51.2-113.779 113.778-113.779h796.443c62.579 0 113.779 51.2 113.779 113.779v521.67c0 30.151-11.947 59.165-33.566 80.213l-274.773 274.773c-21.047 21.618-50.061 33.564-80.213 33.564zM227.555 277.333h568.89v-113.779h-568.89v113.779zM227.555 504.887h568.89v-113.775h-568.89v113.775zM227.555 732.445h398.224v-113.778h-398.224v113.778z" />
+<glyph unicode="&#xe94c;" glyph-name="add-circle" d="M512 960c-282.624 0-512-229.376-512-512s229.376-512 512-512c282.624 0 512 229.376 512 512s-229.376 512-512 512zM767.999 396.8h-204.8v-204.8h-102.4v204.8h-204.8v102.4h204.8v204.8h102.4v-204.8h204.8v-102.4z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>