sbwb-ds 3.36.0 → 3.36.2

package/dist/src/presentation/components/molecules/PopConfirm/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ButtonProps } from '../../atoms/Button';
 export interface PopConfirmProps {
     id?: string;
     children?: React.ReactNode;
@@ -13,6 +14,10 @@ export interface PopConfirmProps {
     wrapperStyles?: React.CSSProperties;
     onClickConfirm?: () => void;
     onClickCancel?: () => void;
+    cancelLabel?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    cancelButtonProps?: ButtonProps;
+    confirmButtonProps?: ButtonProps;
 }
-declare const PopConfirm: ({ id, children, type, title, text, position, isActive, popConfirmMargin, wrapperWidth, wrapperHeight, wrapperStyles, onClickConfirm, onClickCancel, }: PopConfirmProps) => import("react/jsx-runtime").JSX.Element;
+declare const PopConfirm: ({ id, children, type, title, text, position, isActive, popConfirmMargin, wrapperWidth, wrapperHeight, wrapperStyles, onClickConfirm, onClickCancel, cancelLabel, confirmLabel, cancelButtonProps, confirmButtonProps, }: PopConfirmProps) => import("react/jsx-runtime").JSX.Element;
 export default PopConfirm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.36.0",
+  "version": "3.36.2",
   "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/PopConfirm/PopConfirm.stories.tsx

@@ -64,9 +64,9 @@ Default.args = {
   width: '240px',
   height: 'fit-content',
   type: 'danger',
-  title: "Don't use big titles!",
-  text: 'A test with a long description. Are you sure you want to do this?',
+  title: 'Deletar projeto?',
+  text: 'Você tem certeza que deseja deletar este projeto?',
   onClickConfirm: () => {
-    alert('Confirmed!');
+    alert('Confirmado!');
   },
 };

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

@@ -2,10 +2,10 @@ import * as C from './styles';
 import ReactDOM from 'react-dom';
 import Icon from '../../atoms/Icon';
 import { sg } from '../../../styles';
-import Button from '../../atoms/Button';
+import Button, { ButtonProps } from '../../atoms/Button';
 import { pxToRem } from '../../../../main/helpers/functions/measurementConverters';
 
-import { useRef, useEffect } from 'react';
+import { useCallback, useLayoutEffect, useRef } from 'react';
 
 export interface PopConfirmProps {
   id?: string;
@@ -21,6 +21,10 @@ export interface PopConfirmProps {
   wrapperStyles?: React.CSSProperties;
   onClickConfirm?: () => void;
   onClickCancel?: () => void;
+  cancelLabel?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  cancelButtonProps?: ButtonProps;
+  confirmButtonProps?: ButtonProps;
 }
 
 const PopConfirm = ({
@@ -29,7 +33,7 @@ const PopConfirm = ({
   type,
   title,
   text,
-  position,
+  position = 'bottom',
   isActive = true,
   popConfirmMargin = '8px',
   wrapperWidth,
@@ -37,14 +41,20 @@ const PopConfirm = ({
   wrapperStyles,
   onClickConfirm,
   onClickCancel,
+  cancelLabel,
+  confirmLabel,
+  cancelButtonProps,
+  confirmButtonProps,
 }: PopConfirmProps) => {
   const targetRef = useRef<HTMLDivElement>(null);
   const popconfirmRef = useRef<HTMLDivElement>(null);
-  const updatePopConfirmPosition = () => {
+
+  const updatePopConfirmPosition = useCallback(() => {
     if (targetRef.current && popconfirmRef.current) {
       const targetRect = targetRef.current.getBoundingClientRect();
       const popconfirmRect = popconfirmRef.current.getBoundingClientRect();
-      const margin = parseInt(popConfirmMargin, 10);
+      const parsedMargin = Number.parseFloat(popConfirmMargin);
+      const margin = Number.isFinite(parsedMargin) ? parsedMargin : 0;
       let newStyle: React.CSSProperties = {};
 
       switch (position) {
@@ -83,17 +93,37 @@ const PopConfirm = ({
 
       Object.assign(popconfirmRef.current.style, newStyle);
     }
-  };
-  useEffect(() => {
+  }, [popConfirmMargin, position]);
+
+  useLayoutEffect(() => {
     if (isActive) {
       updatePopConfirmPosition();
       window.addEventListener('resize', updatePopConfirmPosition);
+      document.addEventListener('scroll', updatePopConfirmPosition, true);
+
+      const resizeObserver =
+        typeof ResizeObserver !== 'undefined'
+          ? new ResizeObserver(updatePopConfirmPosition)
+          : undefined;
+
+      if (resizeObserver) {
+        if (targetRef.current) resizeObserver.observe(targetRef.current);
+        if (popconfirmRef.current)
+          resizeObserver.observe(popconfirmRef.current);
+      }
+
+      return () => {
+        window.removeEventListener('resize', updatePopConfirmPosition);
+        document.removeEventListener('scroll', updatePopConfirmPosition, true);
+        resizeObserver?.disconnect();
+      };
     }
 
     return () => {
       window.removeEventListener('resize', updatePopConfirmPosition);
+      document.removeEventListener('scroll', updatePopConfirmPosition, true);
     };
-  }, [isActive, position, popConfirmMargin]);
+  }, [isActive, updatePopConfirmPosition]);
 
   if (!isActive) {
     return <>{children}</>;
@@ -123,6 +153,17 @@ const PopConfirm = ({
         return sg.colors.feedbackColors.colorFeedbackWarning;
     }
   };
+
+  const handleCancelClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    cancelButtonProps?.onClick?.(event);
+    onClickCancel?.();
+  };
+
+  const handleConfirmClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    confirmButtonProps?.onClick?.(event);
+    onClickConfirm?.();
+  };
+
   const popConfirmContent = (
     <C.PopconfirmContainer ref={popconfirmRef} position={position}>
       <C.Header>
@@ -130,26 +171,43 @@ const PopConfirm = ({
         <C.Spacing width={sg.spacings.spacingStack.spacingStackXs} />
         <C.Title>{title}</C.Title>
       </C.Header>
-      <C.Spacing height={sg.spacings.spacingStack.spacingStackXs} />
-      <C.Content>{text}</C.Content>
-      <C.Spacing height={sg.spacings.spacingInline.spacingInlineAnt} />
+      {text && (
+        <>
+          <C.Spacing height={sg.spacings.spacingStack.spacingStackXs} />
+          <C.Content>{text}</C.Content>
+          <C.Spacing height={sg.spacings.spacingInline.spacingInlineAnt} />
+        </>
+      )}
       <C.Footer>
         <Button
-          variant="secondary"
-          size="Small"
-          width={pxToRem('102px')}
-          onClick={onClickCancel}
+          {...cancelButtonProps}
+          variant={cancelButtonProps?.variant ?? 'secondary'}
+          size={cancelButtonProps?.size ?? 'Small'}
+          width={cancelButtonProps?.width ?? pxToRem('102px')}
+          onClick={handleCancelClick}
         >
-          Cancel
+          {cancelLabel ??
+            cancelButtonProps?.children ??
+            cancelButtonProps?.name ??
+            'Cancelar'}
         </Button>
-        <Button size="Small" width={pxToRem('102px')} onClick={onClickConfirm}>
-          Confirm
+        <Button
+          {...confirmButtonProps}
+          size={confirmButtonProps?.size ?? 'Small'}
+          width={confirmButtonProps?.width ?? pxToRem('102px')}
+          onClick={handleConfirmClick}
+        >
+          {confirmLabel ??
+            confirmButtonProps?.children ??
+            confirmButtonProps?.name ??
+            'Confirmar'}
         </Button>
       </C.Footer>
     </C.PopconfirmContainer>
   );
   return (
     <C.PopConfirmWrapper
+      id={id}
       ref={targetRef}
       wrapperWidth={wrapperWidth}
       wrapperHeight={wrapperHeight}

package/src/presentation/components/molecules/PopConfirm/styles.ts

@@ -33,7 +33,7 @@ export const PopconfirmContainer = styled.div<PopConfirmContainerProps>`
   border-color: ${sg.colors.neutralColors.colorNeutralClean};
   border-style: solid;
   min-width: 240px;
-  z-index: 1000;
+  z-index: ${sg.zIndexes.popover};
   &::before {
     content: '';
     position: absolute;