Fixes #554 - Switch toggle functionality Issue, Fixes #555 - Notification working after quick async operation, Enhancement #556 - Added width prop for Table, Fixes #557 - Fix alignment between text and icon of Top bar

packages/ui-lib/src/Alerts/atom/Notification.tsx

@@ -143,6 +143,8 @@ export type INotificationProps = {
   closeCallback?: () => void
 }
 
+export let handleDismiss = () => { };
+
 const Notification : React.FC<INotificationProps> = ({id, type ='info', message, icon = '', isPinned = false, actionTextButton, closeNow = false, closeCallback, onTextButtonClick}) => {
   const [dismiss, setDismiss] = useState(false);
   const [slideUp, setSlideUp] = useState(false);
@@ -154,13 +156,14 @@ const Notification : React.FC<INotificationProps> = ({id, type ='info', message,
     setTextClicked(false);
   },[id]);
 
-  const handleDismiss = useCallback(() => {
+  handleDismiss = useCallback(() => {
     setSlideUp(true);
   },[]);
 
   const handleTextClick = useCallback(async () => {
     setTextClicked(true);
     handleDismiss();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   },[handleDismiss]);
 
   const animationEnded = useCallback(() => {
@@ -191,12 +194,14 @@ const Notification : React.FC<INotificationProps> = ({id, type ='info', message,
     return () => {
       mounted = false;
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   },[isPinned, message, handleDismiss, id]);
 
   useEffect(() => {
     if(closeNow) {
       handleDismiss();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   },[closeNow, handleDismiss]);
 
   return( (message && !dismiss)

packages/ui-lib/src/Form/atoms/Switch.tsx

@@ -212,10 +212,10 @@ const Switch : React.FC<IProps> = ({ state = 'default', leftTheme = 'off', right
   }, [checked]);
 
   const positionSwitch = useCallback(() => {
-    if(inputRef.current?.checked){
+    if(inputRef.current?.defaultChecked){
      setPosition(SwitchPosition.On);
      setActiveTheming(rightTheme);
-   } else if(!inputRef.current?.checked){
+   } else if(!inputRef.current?.defaultChecked){
      setPosition(SwitchPosition.Off);
      setActiveTheming(leftTheme);
    }

packages/ui-lib/src/Global/atoms/DrawerBottomMenu.tsx

@@ -9,9 +9,6 @@ const Container = styled.div`
   border-top: 1px solid var(--dividing-line);
   align-items: center;
   cursor: pointer;
-  svg {
-    margin-top: 7px;
-  }
 `;
 
 const ColumnContainer = styled.div`

packages/ui-lib/src/Tables/molecules/TypeTableHeader.tsx

@@ -9,7 +9,7 @@ const HeaderRow = styled.div`
   height: 50px;
 `;
 
-const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignment, hasCopyButton?: boolean, minWidth?: number, headerStyle: string, isSortActive?: boolean }>`
+const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignment, hasCopyButton?: boolean, minWidth?: number, width?: number, headerStyle: string, isSortActive?: boolean }>`
   display: table-cell;
   height: inherit;
   vertical-align:top;
@@ -35,6 +35,10 @@ const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignme
     min-width:${minWidth}px;
   `};
 
+    ${({ width }) => width && css`
+    width:${width}px;
+  `};
+
   ${({ theme: {styles}, headerStyle, isSortActive }) => headerStyle === 'subHeader' && css`
   padding-bottom: 15px;
 
@@ -213,11 +217,11 @@ const TypeTableHeader: React.FC<ITableHeader> = ({
       {hasTypeIcon ? <HeaderItem headerStyle='header' fixedWidth={35} /> : null}
 
       {columnConfig.map((column, key, allColls) => {
-        const { header, alignment, hasCopyButton, sortActive, columnId, sortable, minWidth }: ITableColumnConfig = column;
+        const { header, alignment, hasCopyButton, sortActive, columnId, sortable, minWidth, width }: ITableColumnConfig = column;
         return (
           <HeaderItem
             key={key}
-            {...{ alignment, hasCopyButton, minWidth }}
+            {...{ alignment, hasCopyButton, minWidth, width }}
             headerStyle={hasHeaderGroups ? 'subHeader' : 'header'}
             isSortActive={sortActive}
           >

packages/ui-lib/src/context/NotificationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import Notification, { INotificationProps } from '../Alerts/atom/Notification';
+import Notification, { handleDismiss, INotificationProps } from '../Alerts/atom/Notification';
 import { uniqueID } from '../helpers';
 
 type NotificationContextType = {
@@ -19,7 +19,8 @@ const notificationList: INotificationProps[] = [];
 const NotificationProvider: React.FC = ({ children }) => {
   const [activeNotification, setActiveNotification] = useState<INotificationProps | null>(null);
 
-  const showNotification = useCallback(() => {
+  const showNotification = useCallback(async() => {
+    await new Promise((resolve) => setTimeout(resolve, 0)); 
     const nextNotification = notificationList.shift();
 
     if (!nextNotification) { return; }
@@ -66,11 +67,17 @@ const NotificationProvider: React.FC = ({ children }) => {
     }
 
     notificationList.push(validNotification);
-
-    if (notificationList.length === 1 && activeNotification === null) {
-      showNotification();
-    }
-  },[activeNotification, showNotification]);
+    handleDismiss();
+    setActiveNotification((prev)=>{
+        if (notificationList.length === 1 && prev === null) {
+          showNotification();
+        }
+        return prev;
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [showNotification, activeNotification]
+  );
 
   const clearNotifications = useCallback(() => {
     notificationList.length = 0;