sbwb-ds 3.1.13 → 3.1.14

package/dist/sbwb-ds.js

@@ -86763,23 +86763,23 @@ const oWe = ({
     hasMore: p,
     isLoading: v,
     onLoadMore: g
-  }) => {
-    const [C, w] = lt(n), b = tt(null), x = fr(() => {
-      w((L) => !L), i == null || i();
-    }, [i]), S = fr(() => {
-      if (!b.current || v || !p)
+  }, C) => {
+    const [w, b] = lt(n), x = tt(null), S = fr(() => {
+      b((V) => !V), i == null || i();
+    }, [i]), M = fr(() => {
+      if (!x.current || v || !p)
         return;
-      const { scrollTop: L, scrollHeight: V, clientHeight: D } = b.current;
-      V - L <= D + 5 && (g == null || g());
+      const { scrollTop: V, scrollHeight: D, clientHeight: T } = x.current;
+      D - V <= T + 5 && (g == null || g());
     }, [v, p, g]);
     if (!f)
       return null;
-    const M = /* @__PURE__ */ Ve(
+    const L = /* @__PURE__ */ Ve(
       Jze,
       {
-        ref: b,
+        ref: C,
         style: { ...s, width: c, height: u },
-        isPinned: C,
+        isPinned: w,
         floating: l,
         zIndex: h,
         children: [
@@ -86789,11 +86789,11 @@ const oWe = ({
               i && /* @__PURE__ */ R(
                 Sr,
                 {
-                  iconName: C ? "PinFillMd" : "PinMd",
+                  iconName: w ? "PinFillMd" : "PinMd",
                   color: y.colors.neutralColors.colorNeutralCloudy,
                   hoverColor: y.colors.neutralColors.colorNeutralDarkest,
-                  title: C ? "Desfixar da tela" : "Fixar na tela",
-                  onClick: x
+                  title: w ? "Desfixar da tela" : "Fixar na tela",
+                  onClick: S
                 }
               ),
               a && /* @__PURE__ */ R(
@@ -86814,14 +86814,14 @@ const oWe = ({
           o === "default" ? lWe(
             e,
             t,
-            b,
-            S,
+            x,
+            M,
             v
-          ) : /* @__PURE__ */ R(fW, { ref: b, onScroll: S, children: d })
+          ) : /* @__PURE__ */ R(fW, { ref: x, onScroll: M, children: d })
         ]
       }
     );
-    return l ? Qf.createPortal(M, document.body) : M;
+    return l ? Qf.createPortal(L, document.body) : L;
   }
 );
 export {

package/dist/sbwb-ds.umd.cjs

@@ -7456,4 +7456,4 @@ echarts.use([`+F+"]);":"Unknown series "+$))}return}if(d==="tooltip"){if(S){proc
       font-weight: ${e?y.fonts.fontWeight.fontWeightBold:y.fonts.fontWeight.fontWeightRegular};
     }
   `}
-`;const hW=({id:e,message:t,date:r,isNew:n,onClick:a})=>R(YEe,{isNew:n,onClick:()=>e!==void 0&&(a==null?void 0:a(e)),children:ke("div",{children:[ke("p",{children:[t,n&&R(mr,{iconName:"FiberManualRecordFill1Sm",color:"rgba(33, 150, 243, 1)",customStyles:{marginLeft:"2.5px",marginTop:"2px",marginRight:"3.1px"}})]}),R("span",{children:r})]})}),KEe=(e,t,r,n,a)=>e.length===0?R(qEe,{children:"Você ainda não tem notificações."}):ke(fW,{ref:r,onScroll:n,children:[e.map(i=>R(hW,{...i,onClick:t},i.id)),a&&R(XEe,{children:"Carregando mais notificações..."})]}),QEe=ee.forwardRef(({notifications:e=[],onNotificationClick:t,title:r,pinned:n=!1,onClose:a,onPin:i,mode:o="default",floating:l=!1,position:s={top:"10px",right:"10px"},width:c="309px",height:u="400px",children:d,isOpen:f,zIndex:h="9999999",hasMore:p,isLoading:g,onLoadMore:m})=>{const[C,w]=ee.useState(n),S=ee.useRef(null),b=ee.useCallback(()=>{w(L=>!L),i==null||i()},[i]),x=ee.useCallback(()=>{if(!S.current||g||!p)return;const{scrollTop:L,scrollHeight:V,clientHeight:H}=S.current;V-L<=H+5&&(m==null||m())},[g,p,m]);if(!f)return null;const _=ke(WEe,{ref:S,style:{...s,width:c,height:u},isPinned:C,floating:l,zIndex:h,children:[ke(GEe,{children:[R(UEe,{children:r}),ke(jEe,{children:[i&&R(mr,{iconName:C?"PinFillMd":"PinMd",color:y.colors.neutralColors.colorNeutralCloudy,hoverColor:y.colors.neutralColors.colorNeutralDarkest,title:C?"Desfixar da tela":"Fixar na tela",onClick:b}),a&&R(mr,{iconName:"CloseMd",color:y.colors.neutralColors.colorNeutralCloudy,hoverColor:y.colors.neutralColors.colorNeutralDarkest,title:"Fechar",onClick:a,customStyles:{cursor:"pointer"}})]})]}),o==="default"?KEe(e,t,S,x,g):R(fW,{ref:S,onScroll:x,children:d})]});return l?U6.default.createPortal(_,document.body):_});ht.Accordion=LG,ht.ActionButton=Fn,ht.ActionButtonCell=n3e,ht.Actions=OG,ht.Alert=yj,ht.Autocomplete=oL,ht.Avatar=RM,ht.BackgroundSection=Tee,ht.Breadcrumb=BM,ht.Button=x1,ht.ChartBar=N_e,ht.ChartPie=E_e,ht.ChartRadar=u_e,ht.Checkbox=p0,ht.Column=aU,ht.Container=oU,ht.DataTable=J2e,ht.DatePicker=MV,ht.Divider=Jc,ht.EmptyBox=iX,ht.Footer=zEe,ht.HeaderTitle=V2e,ht.Icon=mr,ht.Input=Zc,ht.ItemList=SU,ht.Linear=S_e,ht.Loading=Fj,ht.LocalStorageAdapter=Jh,ht.MenuMultiSelect=Hv,ht.MenuSelect=D2,ht.Modal=ote,ht.MultiSelect=PV,ht.Notification=QEe,ht.NotificationText=hW,ht.Pagination=EU,ht.ProgressBar=jj,ht.ProgressCircle=tX,ht.Radio=GM,ht.ReviewStatus=U_e,ht.Row=TU,ht.Select=bp,ht.Sheet=TEe,ht.SheetHistory=wEe,ht.Sidebar=t2e,ht.SkeletonLoading=GU,ht.Status=YU,ht.Stepper=tY,ht.Switch=lY,ht.TabBar=d2e,ht.Table=_2e,ht.TableCell=j9,ht.TableHeaderCell=P4,ht.TableProvider=C2e,ht.TableRow=Tg,ht.Tag=xp,ht.Textarea=Mp,ht.TokenArea=oj,ht.Toolbar=t3e,ht.Tooltip=Qr,ht.Tree=dW,ht.sg=y,ht.useTableContext=VV,Object.defineProperty(ht,Symbol.toStringTag,{value:"Module"})});
+`;const hW=({id:e,message:t,date:r,isNew:n,onClick:a})=>R(YEe,{isNew:n,onClick:()=>e!==void 0&&(a==null?void 0:a(e)),children:ke("div",{children:[ke("p",{children:[t,n&&R(mr,{iconName:"FiberManualRecordFill1Sm",color:"rgba(33, 150, 243, 1)",customStyles:{marginLeft:"2.5px",marginTop:"2px",marginRight:"3.1px"}})]}),R("span",{children:r})]})}),KEe=(e,t,r,n,a)=>e.length===0?R(qEe,{children:"Você ainda não tem notificações."}):ke(fW,{ref:r,onScroll:n,children:[e.map(i=>R(hW,{...i,onClick:t},i.id)),a&&R(XEe,{children:"Carregando mais notificações..."})]}),QEe=ee.forwardRef(({notifications:e=[],onNotificationClick:t,title:r,pinned:n=!1,onClose:a,onPin:i,mode:o="default",floating:l=!1,position:s={top:"10px",right:"10px"},width:c="309px",height:u="400px",children:d,isOpen:f,zIndex:h="9999999",hasMore:p,isLoading:g,onLoadMore:m},C)=>{const[w,S]=ee.useState(n),b=ee.useRef(null),x=ee.useCallback(()=>{S(V=>!V),i==null||i()},[i]),_=ee.useCallback(()=>{if(!b.current||g||!p)return;const{scrollTop:V,scrollHeight:H,clientHeight:T}=b.current;H-V<=T+5&&(m==null||m())},[g,p,m]);if(!f)return null;const L=ke(WEe,{ref:C,style:{...s,width:c,height:u},isPinned:w,floating:l,zIndex:h,children:[ke(GEe,{children:[R(UEe,{children:r}),ke(jEe,{children:[i&&R(mr,{iconName:w?"PinFillMd":"PinMd",color:y.colors.neutralColors.colorNeutralCloudy,hoverColor:y.colors.neutralColors.colorNeutralDarkest,title:w?"Desfixar da tela":"Fixar na tela",onClick:x}),a&&R(mr,{iconName:"CloseMd",color:y.colors.neutralColors.colorNeutralCloudy,hoverColor:y.colors.neutralColors.colorNeutralDarkest,title:"Fechar",onClick:a,customStyles:{cursor:"pointer"}})]})]}),o==="default"?KEe(e,t,b,_,g):R(fW,{ref:b,onScroll:_,children:d})]});return l?U6.default.createPortal(L,document.body):L});ht.Accordion=LG,ht.ActionButton=Fn,ht.ActionButtonCell=n3e,ht.Actions=OG,ht.Alert=yj,ht.Autocomplete=oL,ht.Avatar=RM,ht.BackgroundSection=Tee,ht.Breadcrumb=BM,ht.Button=x1,ht.ChartBar=N_e,ht.ChartPie=E_e,ht.ChartRadar=u_e,ht.Checkbox=p0,ht.Column=aU,ht.Container=oU,ht.DataTable=J2e,ht.DatePicker=MV,ht.Divider=Jc,ht.EmptyBox=iX,ht.Footer=zEe,ht.HeaderTitle=V2e,ht.Icon=mr,ht.Input=Zc,ht.ItemList=SU,ht.Linear=S_e,ht.Loading=Fj,ht.LocalStorageAdapter=Jh,ht.MenuMultiSelect=Hv,ht.MenuSelect=D2,ht.Modal=ote,ht.MultiSelect=PV,ht.Notification=QEe,ht.NotificationText=hW,ht.Pagination=EU,ht.ProgressBar=jj,ht.ProgressCircle=tX,ht.Radio=GM,ht.ReviewStatus=U_e,ht.Row=TU,ht.Select=bp,ht.Sheet=TEe,ht.SheetHistory=wEe,ht.Sidebar=t2e,ht.SkeletonLoading=GU,ht.Status=YU,ht.Stepper=tY,ht.Switch=lY,ht.TabBar=d2e,ht.Table=_2e,ht.TableCell=j9,ht.TableHeaderCell=P4,ht.TableProvider=C2e,ht.TableRow=Tg,ht.Tag=xp,ht.Textarea=Mp,ht.TokenArea=oj,ht.Toolbar=t3e,ht.Tooltip=Qr,ht.Tree=dW,ht.sg=y,ht.useTableContext=VV,Object.defineProperty(ht,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/molecules/Notification/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, forwardRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import * as C from './styles';
-import { sg } from '../../../styles/styleGuide'
+import { sg } from '../../../styles/styleGuide';
 import Icon from '../../atoms/Icon';
 
 export interface NotificationItemProps {
@@ -68,10 +68,12 @@ const renderNotificationContent = (
   onNotificationClick?: (id: number) => void,
   listRef?: React.RefObject<HTMLDivElement>,
   handleScroll?: () => void,
-  isLoading?: boolean,
+  isLoading?: boolean
 ) => {
   if (notifications.length === 0) {
-    return <C.EmptyStateText>Você ainda não tem notificações.</C.EmptyStateText>;
+    return (
+      <C.EmptyStateText>Você ainda não tem notificações.</C.EmptyStateText>
+    );
   }
 
   return (
@@ -87,105 +89,110 @@ const renderNotificationContent = (
         <C.LoadingWrapper>Carregando mais notificações...</C.LoadingWrapper>
       )}
     </C.NotificationList>
-  )
-}
+  );
+};
+
+const NotificationComponent = forwardRef<HTMLDivElement, NotificationProps>(
+  (
+    {
+      notifications = [],
+      onNotificationClick,
+      title,
+      pinned = false,
+      onClose,
+      onPin,
+      mode = 'default',
+      floating = false,
+      position = { top: '10px', right: '10px' },
+      width = '309px',
+      height = '400px',
+      children,
+      isOpen,
+      zIndex = '9999999',
+      hasMore,
+      isLoading,
+      onLoadMore,
+    },
+    ref
+  ) => {
+    const [isPinned, setIsPinned] = useState(pinned);
+    const notificationListRef = useRef<HTMLDivElement>(null);
 
-const NotificationComponent = forwardRef<HTMLDivElement, NotificationProps>(({
-  notifications = [],
-  onNotificationClick,
-  title,
-  pinned = false,
-  onClose,
-  onPin,
-  mode = 'default',
-  floating = false,
-  position = { top: '10px', right: '10px' },
-  width = '309px',
-  height = '400px',
-  children,
-  isOpen,
-  zIndex = '9999999',
-  hasMore,
-  isLoading,
-  onLoadMore,
-}) => {
-  const [isPinned, setIsPinned] = useState(pinned);
-  const notificationRef = useRef<HTMLDivElement>(null);
+    const handlePin = useCallback(() => {
+      setIsPinned((prev) => !prev);
+      onPin?.();
+    }, [onPin]);
 
-  const handlePin = useCallback(() => {
-    setIsPinned((prev) => !prev)
-    onPin?.()
-  }, [onPin])
+    const handleScroll = useCallback(() => {
+      if (!notificationListRef.current || isLoading || !hasMore) return;
+      const { scrollTop, scrollHeight, clientHeight } =
+        notificationListRef.current;
+      if (scrollHeight - scrollTop <= clientHeight + 5) {
+        onLoadMore?.();
+      }
+    }, [isLoading, hasMore, onLoadMore]);
 
-  const handleScroll = useCallback(() => {
-    if (!notificationRef.current || isLoading || !hasMore) return
-    const { scrollTop, scrollHeight, clientHeight } = notificationRef.current
-    if (scrollHeight - scrollTop <= clientHeight + 5) {
-      onLoadMore?.()
+    if (!isOpen) {
+      return null;
     }
-  }, [isLoading, hasMore, onLoadMore])
 
-  if (!isOpen) {
-    return null;
-  }
+    const notificationContent = (
+      <C.Container
+        ref={ref}
+        style={{ ...position, width, height }}
+        isPinned={isPinned}
+        floating={floating}
+        zIndex={zIndex}
+      >
+        <C.Header>
+          <C.Title>{title}</C.Title>
+          <C.Icons>
+            {onPin && (
+              <Icon
+                iconName={isPinned ? 'PinFillMd' : 'PinMd'}
+                color={sg.colors.neutralColors.colorNeutralCloudy}
+                hoverColor={sg.colors.neutralColors.colorNeutralDarkest}
+                title={isPinned ? 'Desfixar da tela' : 'Fixar na tela'}
+                onClick={handlePin}
+              />
+            )}
+            {onClose && (
+              <Icon
+                iconName="CloseMd"
+                color={sg.colors.neutralColors.colorNeutralCloudy}
+                hoverColor={sg.colors.neutralColors.colorNeutralDarkest}
+                title="Fechar"
+                onClick={onClose}
+                customStyles={{
+                  cursor: 'pointer',
+                }}
+              />
+            )}
+          </C.Icons>
+        </C.Header>
 
-  const notificationContent = (
-    <C.Container
-      ref={notificationRef}
-      style={{ ...position, width, height }}
-      isPinned={isPinned}
-      floating={floating}
-      zIndex={zIndex}
-    >
-      <C.Header>
-        <C.Title>{title}</C.Title>
-        <C.Icons>
-          {onPin && (
-            <Icon
-              iconName={isPinned ? "PinFillMd" : "PinMd"}
-              color={sg.colors.neutralColors.colorNeutralCloudy}
-              hoverColor={sg.colors.neutralColors.colorNeutralDarkest}
-              title={isPinned ? "Desfixar da tela" : "Fixar na tela"}
-              onClick={handlePin}
-            />
-          )}
-          {onClose && (
-            <Icon
-              iconName="CloseMd"
-              color={sg.colors.neutralColors.colorNeutralCloudy}
-              hoverColor={sg.colors.neutralColors.colorNeutralDarkest}
-              title="Fechar"
-              onClick={onClose}
-              customStyles={{
-                cursor: "pointer",
-              }}
-            />
-          )}
-        </C.Icons>
-      </C.Header>
+        {mode === 'default' ? (
+          renderNotificationContent(
+            notifications,
+            onNotificationClick,
+            notificationListRef,
+            handleScroll,
+            isLoading
+          )
+        ) : (
+          <C.NotificationList ref={notificationListRef} onScroll={handleScroll}>
+            {children}
+          </C.NotificationList>
+        )}
+      </C.Container>
+    );
 
-      {mode === "default" ? (
-        renderNotificationContent(
-          notifications,
-          onNotificationClick,
-          notificationRef,
-          handleScroll,
-          isLoading,
-        )
-      ) : (
-        <C.NotificationList ref={notificationRef} onScroll={handleScroll}>
-          {children}
-        </C.NotificationList>
-      )}
-    </C.Container>
-  );
+    if (floating) {
+      return ReactDOM.createPortal(notificationContent, document.body);
+    }
 
-  if (floating) {
-    return ReactDOM.createPortal(notificationContent, document.body);
+    return notificationContent;
   }
-
-  return notificationContent;
-}
 );
 
 export default NotificationComponent;