@giro-ds/react 12.6.0 → 12.6.2

package/dist/index.cjs

@@ -4071,7 +4071,7 @@ var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogCo
 
 const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxRuntime.jsxs(radixUi.AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsxRuntime.jsx(radixUi.AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsxRuntime.jsx(radixUi.AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsxRuntime.jsx("div", { children: bodyContent }) }), jsxRuntime.jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsxRuntime.jsx(radixUi.AlertDialog.Cancel, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsxRuntime.jsx(radixUi.AlertDialog.Action, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
 
-var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
+var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj","drawerFooter":"Drawer-module__drawerFooter___qGaC-"};
 
 const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
     const internalClose = React.useCallback(() => {
@@ -4120,6 +4120,25 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
         event.stopPropagation();
         internalClose();
     };
+    const contentRef = React.useRef(null);
+    const [scrollbarWidth, setScrollbarWidth] = React.useState(0);
+    React.useEffect(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const measureScrollbar = () => {
+            setScrollbarWidth(contentEl.offsetWidth - contentEl.clientWidth);
+        };
+        measureScrollbar();
+        const resizeObserver = new ResizeObserver(measureScrollbar);
+        resizeObserver.observe(contentEl);
+        const mutationObserver = new MutationObserver(measureScrollbar);
+        mutationObserver.observe(contentEl, { childList: true, subtree: true, characterData: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [isOpen, children]);
     return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$f['drawerShadow'], {
                     [styles$f['drawerShadow--visible']]: isOpen,
                 }), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
@@ -4127,7 +4146,8 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
                     [styles$f['drawerSidebar--disabled']]: disabled,
                 }, className), style: {
                     '--drawer-custom-width': customWidth,
-                }, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$f.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
+                    '--drawer-scrollbar-width': `${scrollbarWidth}px`,
+                }, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$f.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { ref: contentRef, className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer && (jsxRuntime.jsx("div", { className: styles$f.drawerFooter, children: footer }))] })] }), document.body);
 };
 
 var styles$e = {"container":"FileUpload-module__container___hFeKV","dropZone":"FileUpload-module__dropZone___716hF","disabled":"FileUpload-module__disabled___mwePo","alert":"FileUpload-module__alert___Dnzqc","dragging":"FileUpload-module__dragging___XZghy","emptyState":"FileUpload-module__emptyState___6Ll9D","uploadIcon":"FileUpload-module__uploadIcon___MkBLe","uploadText":"FileUpload-module__uploadText___VWc9g","alertIcon":"FileUpload-module__alertIcon___pTaMS","alertText":"FileUpload-module__alertText___sfV4z","fileList":"FileUpload-module__fileList___K6KQD","thumb":"FileUpload-module__thumb___eg59D","removeButton":"FileUpload-module__removeButton___jUFNv","thumbClip":"FileUpload-module__thumbClip___sP9wp","thumbImage":"FileUpload-module__thumbImage___Swxhd","thumbFile":"FileUpload-module__thumbFile___y7lg5","thumbFileName":"FileUpload-module__thumbFileName___LPSCX","helperText":"FileUpload-module__helperText___DzPqP","errorText":"FileUpload-module__errorText___cHd1Z"};
@@ -6150,11 +6170,17 @@ ToastProvider.displayName = 'ToastProvider';
  */
 const ToastContainer = () => {
     const { toasts } = useToastContext();
+    const portalRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (toasts.length > 0 && portalRef.current) {
+            document.body.appendChild(portalRef.current);
+        }
+    }, [toasts.length]);
     return (jsxRuntime.jsxs(radixUi.Toast.Provider, { swipeDirection: "left", children: [toasts.map((toast) => {
                 if (!toast.id)
                     return null;
                 return jsxRuntime.jsx(Toast, { id: toast.id, ...toast }, toast.id);
-            }), jsxRuntime.jsx(radixUi.Toast.Viewport, { className: styles$2.toastViewport })] }));
+            }), jsxRuntime.jsx(radixUi.Portal.Root, { ref: portalRef, children: jsxRuntime.jsx(radixUi.Toast.Viewport, { className: styles$2.toastViewport }) })] }));
 };
 ToastContainer.displayName = 'ToastContainer';