@giro-ds/react 12.6.1 → 12.6.2

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
+import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Portal, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
 import * as React from 'react';
 import React__default, { useId, version, forwardRef as forwardRef$1, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer } from 'react';
 import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Spacebar20Regular, ArrowImport20Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
@@ -4052,7 +4052,7 @@ var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogCo
 
 const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxs(AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsx(AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsx(AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsx("div", { children: bodyContent }) }), jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsx(AlertDialog.Cancel, { asChild: true, children: jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsx(AlertDialog.Action, { asChild: true, children: 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 = useCallback(() => {
@@ -4101,6 +4101,25 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
         event.stopPropagation();
         internalClose();
     };
+    const contentRef = useRef(null);
+    const [scrollbarWidth, setScrollbarWidth] = useState(0);
+    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 createPortal(jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$f['drawerShadow'], {
                     [styles$f['drawerShadow--visible']]: isOpen,
                 }), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
@@ -4108,7 +4127,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: [jsxs("div", { className: styles$f.drawerTitleClose, children: [jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), 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: [jsxs("div", { className: styles$f.drawerTitleClose, children: [jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsx("div", { ref: contentRef, className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer && (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"};
@@ -6131,11 +6151,17 @@ ToastProvider.displayName = 'ToastProvider';
  */
 const ToastContainer = () => {
     const { toasts } = useToastContext();
+    const portalRef = React.useRef(null);
+    React.useEffect(() => {
+        if (toasts.length > 0 && portalRef.current) {
+            document.body.appendChild(portalRef.current);
+        }
+    }, [toasts.length]);
     return (jsxs(Toast$1.Provider, { swipeDirection: "left", children: [toasts.map((toast) => {
                 if (!toast.id)
                     return null;
                 return jsx(Toast, { id: toast.id, ...toast }, toast.id);
-            }), jsx(Toast$1.Viewport, { className: styles$2.toastViewport })] }));
+            }), jsx(Portal.Root, { ref: portalRef, children: jsx(Toast$1.Viewport, { className: styles$2.toastViewport }) })] }));
 };
 ToastContainer.displayName = 'ToastContainer';