@giro-ds/react 12.5.0 → 12.5.1

package/dist/index.cjs

@@ -3107,6 +3107,29 @@ const SHIFT_TOGGLES = {
 
 var styles$k = {"container":"VirtualKeyboard-module__container___A-e0I","layout--numeric":"VirtualKeyboard-module__layout--numeric___zfd7G","mode--fixed":"VirtualKeyboard-module__mode--fixed___1eFY1","layout--default":"VirtualKeyboard-module__layout--default___qyY1b","textFieldContainer":"VirtualKeyboard-module__textFieldContainer___XxGen","keyboardWrapper":"VirtualKeyboard-module__keyboardWrapper___jryTf","keyboardNumpadActive":"VirtualKeyboard-module__keyboardNumpadActive___jPpJD","overlay":"VirtualKeyboard-module__overlay___a5y7i","overlayOpen":"VirtualKeyboard-module__overlayOpen___hREu-","textFieldWrapper":"VirtualKeyboard-module__textFieldWrapper___bmi-z","keyPreview":"VirtualKeyboard-module__keyPreview___oWaO1","accentMenu":"VirtualKeyboard-module__accentMenu___A6tTy","accentMenuRow":"VirtualKeyboard-module__accentMenuRow___3kbvT","accentOption":"VirtualKeyboard-module__accentOption___ao-Ta"};
 
+/**
+ * Atributo usado para marcar raízes de elementos portalizados (ex.: renderizados via
+ * `createPortal` em `document.body`) que devem ser ignorados pela lógica de
+ * "clique/foco fora" de camadas dispensáveis do Radix UI (Dialog, Popover, DropdownMenu etc.).
+ *
+ * Componentes que renderizam conteúdo fora da árvore DOM do elemento pai (como o
+ * `VirtualKeyboard` em modo `native`) devem adicionar este atributo à raiz portalizada
+ * para evitar que o Radix trate cliques nesse conteúdo como "fora" do componente,
+ * o que causaria fechamentos indesejados quando usados dentro de um `Modal` (ou outro
+ * componente baseado em Radix Dialog/Popover).
+ */
+const DISMISS_OUTSIDE_IGNORE_ATTRIBUTE = 'data-dismiss-outside-ignore';
+/**
+ * Verifica se o alvo de um evento de "interação fora" (Radix `onInteractOutside`,
+ * `onPointerDownOutside`, `onFocusOutside`) está dentro de um elemento marcado com
+ * {@link DISMISS_OUTSIDE_IGNORE_ATTRIBUTE}.
+ */
+const isDismissOutsideIgnored = (target) => {
+    if (!(target instanceof Element))
+        return false;
+    return target.closest(`[${DISMISS_OUTSIDE_IGNORE_ATTRIBUTE}]`) !== null;
+};
+
 const LONG_PRESS_DELAY_MS = 400;
 const ACCENT_OPTIONS = {
     a: ['a', 'á', 'à', 'â', 'ã', 'ä', 'å', 'æ', '@', 'ª'],
@@ -3471,6 +3494,25 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
         layoutName,
         capsLockOn,
     ]);
+    // Cobre toda a área do overlay do teclado (inclusive espaços/paddings fora do
+    // `keyboardWrapperRef`, como o preview de tecla e o menu de acento portalizados),
+    // garantindo que `isKeyboardInteractingRef` não seja perdido em cliques que não
+    // caem exatamente sobre um `.hg-button`. Isso evita que o teclado feche sozinho
+    // (via blur do targetRef) ao interagir com áreas adjacentes do próprio teclado.
+    const handleOverlayPointerDown = React.useCallback((event) => {
+        if (keyboardWrapperRef.current?.contains(event.target))
+            return;
+        isKeyboardInteractingRef.current = true;
+        if (hideTimeoutRef.current !== null) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+    }, []);
+    const handleOverlayPointerUp = React.useCallback((event) => {
+        if (keyboardWrapperRef.current?.contains(event.target))
+            return;
+        isKeyboardInteractingRef.current = false;
+        scheduleHideIfBlurred();
+    }, [scheduleHideIfBlurred]);
     const handleAccentSelect = React.useCallback((accentedChar) => {
         const currentValue = valueRef.current;
         const baseLayout = type === 'numeric' ? 'abc' : 'default';
@@ -3643,7 +3685,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
                     if (instance) {
                         instance.setInput(valueRef.current);
                     }
-                }, layoutName: layoutName, layout: activeLayout, theme: 'hg-theme-default', display: keyboardDisplay, onChange: handleChange, onKeyPress: handleKeyPress, preventMouseDownDefault: true }), (() => {
+                }, layoutName: layoutName, layout: activeLayout, theme: 'hg-theme-default', display: keyboardDisplay, onChange: handleChange, onKeyPress: handleKeyPress, preventMouseDownDefault: true, disableButtonHold: true }), (() => {
                 const shiftCount = { current: 0 };
                 return iconSlots.map((slot) => {
                     const key = slot.getAttribute('data-icon-key');
@@ -3657,14 +3699,14 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
                     }
                     return reactDom.createPortal(React.createElement(Icon), slot, `icon-${key}`);
                 });
-            })(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: styles$k.keyPreview, style: {
+            })(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: clsx(styles$k.keyPreview, className), style: {
                     top: keyPreview.top,
                     left: keyPreview.left + keyPreviewOffsetX,
                     width: portalSizes.preview,
                     height: portalSizes.preview,
                     ...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
                 }, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
-                reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: styles$k.accentMenu, style: {
+                reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: clsx(styles$k.accentMenu, className), style: {
                         top: accentMenu.top,
                         left: accentMenu.left + accentMenuOffsetX,
                     }, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: Array.from({ length: Math.ceil(accentMenu.options.length / 5) }, (_, rowIndex) => accentMenu.options.slice(rowIndex * 5, rowIndex * 5 + 5)).map((rowOptions, rowIndex) => (jsxRuntime.jsx("div", { className: styles$k.accentMenuRow, children: rowOptions.map((option) => (jsxRuntime.jsx("button", { type: "button", className: styles$k.accentOption, style: {
@@ -3676,7 +3718,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
                                 event.stopPropagation();
                             }, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
     if (variant === 'native' && typeof document !== 'undefined') {
-        return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), style: nativeHeight ? { '--vkeyboard-native-height': nativeHeight } : undefined, children: keyboardEl }), document.body);
+        return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), style: nativeHeight ? { '--vkeyboard-native-height': nativeHeight } : undefined, [DISMISS_OUTSIDE_IGNORE_ATTRIBUTE]: true, onPointerDownCapture: handleOverlayPointerDown, onPointerUpCapture: handleOverlayPointerUp, onPointerCancelCapture: handleOverlayPointerUp, children: keyboardEl }), document.body);
     }
     return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: placeholder, value: effectiveValue, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
 };
@@ -4457,7 +4499,7 @@ const Simple = ({ items, type = 'multiple', selectedIds, onApplyFilter, placehol
                                 toggleItem(itemId, item);
                             }
                         }, children: [type === 'multiple' && (jsxRuntime.jsx(Checkbox, { checked: isSelected, disabled: item.disabled, label: "" })), item.icon && (jsxRuntime.jsx("span", { className: styles$d.itemIcon, children: item.icon })), jsxRuntime.jsx("span", { className: styles$d.itemText, children: item.text })] }, itemId));
-                })) : (jsxRuntime.jsx("li", { className: styles$d.noResults, role: "status", "aria-live": "polite", children: "Nenhum item encontrado" })) }), jsxRuntime.jsxs("div", { className: styles$d.footer, children: [jsxRuntime.jsx(Button, { fullWidth: true, variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsxRuntime.jsx(Button, { fullWidth: true, onClick: handleApplyFilter, children: "Aplicar" })] })] }));
+                })) : (jsxRuntime.jsx("li", { className: styles$d.noResults, role: "status", "aria-live": "polite", children: "Nenhum resultado encontrado" })) }), jsxRuntime.jsxs("div", { className: styles$d.footer, children: [jsxRuntime.jsx(Button, { fullWidth: true, variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsxRuntime.jsx(Button, { fullWidth: true, onClick: handleApplyFilter, children: "Aplicar" })] })] }));
     return (jsxRuntime.jsx("div", { className: filterClass, id: id, ...rest, children: jsxRuntime.jsx(Popover, { open: isOpen, onOpenChange: handleOpenChange, side: side, align: align, onOpenAutoFocus: (e) => e.preventDefault(), trigger: triggerButton, content: popoverContent }) }));
 };
 
@@ -4630,7 +4672,7 @@ const ListItem = ({ id, className, variant = 'text', text, subText, disabled = f
                     : children }))] }));
 };
 
-var styles$a = {"content":"Menu-module__content___pnDF6","subContent":"Menu-module__subContent___O9T-y","itemsWrapper":"Menu-module__itemsWrapper___Fcg71","item":"Menu-module__item___S3HKY","subTrigger":"Menu-module__subTrigger___CdnJE","itemSubText":"Menu-module__itemSubText___U1HFP","itemIcon":"Menu-module__itemIcon___iyxmZ","wrapperText":"Menu-module__wrapperText___PomUe","itemText":"Menu-module__itemText___2fd2B","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","emptyState":"Menu-module__emptyState___3wh-S","loadingMore":"Menu-module__loadingMore___fUCvH"};
+var styles$a = {"content":"Menu-module__content___pnDF6","subContent":"Menu-module__subContent___O9T-y","itemsWrapper":"Menu-module__itemsWrapper___Fcg71","item":"Menu-module__item___S3HKY","subTrigger":"Menu-module__subTrigger___CdnJE","itemSubText":"Menu-module__itemSubText___U1HFP","itemIcon":"Menu-module__itemIcon___iyxmZ","wrapperText":"Menu-module__wrapperText___PomUe","itemText":"Menu-module__itemText___2fd2B","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","noResults":"Menu-module__noResults___f-Bi0","loadingMore":"Menu-module__loadingMore___fUCvH"};
 
 const MenuItem = React.memo(({ item, isSelected, onSelect }) => {
     const handleSelect = () => {
@@ -4884,7 +4926,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
                         if (search) {
                             e.stopPropagation();
                         }
-                    }, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$a.searchWrapper, children: jsxRuntime.jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$a.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsxRuntime.jsx("div", { className: styles$a.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$a.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsxRuntime.jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
+                    }, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$a.searchWrapper, children: jsxRuntime.jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$a.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsxRuntime.jsx("div", { className: styles$a.noResults, children: "Nenhum resultado encontrado" })), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$a.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsxRuntime.jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
 };
 
 var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalCloseButton":"Modal-module__modalCloseButton___VoWHD","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
@@ -4900,10 +4942,21 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
         e.preventDefault();
         contentRef.current?.focus();
     };
+    const handleInteractOutside = (e) => {
+        // Ignora interações em elementos portalizados que se declararam isentos
+        // (ex.: VirtualKeyboard em modo native), evitando fechamentos indesejados.
+        if (isDismissOutsideIgnored(e.target)) {
+            e.preventDefault();
+            return;
+        }
+        if (!closeOnOverlayClick) {
+            e.preventDefault();
+        }
+    };
     return (jsxRuntime.jsx(radixUi.Dialog.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [jsxRuntime.jsx(radixUi.Dialog.Overlay, { className: styles$9.modalOverlay }), jsxRuntime.jsxs(radixUi.Dialog.Content, { ref: contentRef, className: clsx(styles$9.modalContent, fullscreen && styles$9['modalContent--fullscreen'], className), id: id, style: {
                         '--modal-custom-width': customWidth,
                         '--modal-custom-height': customHeight,
-                    }, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [(title || headerContent || closingButton) && (jsxRuntime.jsxs("header", { className: styles$9.modalHeader, children: [title && (jsxRuntime.jsx(radixUi.Dialog.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsxRuntime.jsx("div", { children: headerContent })), closingButton && (jsxRuntime.jsx("div", { className: styles$9.modalCloseButton, children: jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) }) }))] })), jsxRuntime.jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsxRuntime.jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
+                    }, onInteractOutside: handleInteractOutside, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [(title || headerContent || closingButton) && (jsxRuntime.jsxs("header", { className: styles$9.modalHeader, children: [title && (jsxRuntime.jsx(radixUi.Dialog.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsxRuntime.jsx("div", { children: headerContent })), closingButton && (jsxRuntime.jsx("div", { className: styles$9.modalCloseButton, children: jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) }) }))] })), jsxRuntime.jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsxRuntime.jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
 };
 
 var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
@@ -5421,19 +5474,33 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
     };
 }
 
-const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, hasMore = true, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
+const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, hasMore = true, isLoadingMore = false, enableApiSearch, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
     const componentId = React.useId();
     const selectId = `select-${componentId}`;
     const viewportRef = React.useRef(null);
     const hasReachedEndRef = React.useRef(false);
     const wasLoadingMoreRef = React.useRef(false);
+    const isApiSearch = enableApiSearch ?? Boolean(onApiSearch);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== 'production' && enableApiSearch !== undefined) {
+            console.warn('[Giro DS] `enableApiSearch` está depreciado. ' +
+                'A busca remota será ativada pela presença de `onApiSearch`. ' +
+                'Remoção psera feita futuramente.');
+        }
+    }, [enableApiSearch]);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== 'production' && enableApiSearch === false && onApiSearch) {
+            console.warn('[Giro DS] A combinação `enableApiSearch={false}` com `onApiSearch` ' +
+                'futuramente o comportamento ira mudar');
+        }
+    }, [enableApiSearch, onApiSearch]);
     const { state, actions, refs, utils, } = useSelectLogic({
         value,
         required,
         search,
         onValueChange,
         onOpenChange,
-        enableApiSearch,
+        enableApiSearch: isApiSearch,
         onApiSearch,
         isSearching,
         error,
@@ -5471,9 +5538,9 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
     }, [isLoadingMore, enableInfiniteScroll]);
     const displayText = React.useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
     const filteredItems = React.useMemo(() => {
-        const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
+        const termToFilter = isApiSearch ? state.searchTerm : state.searchInput;
         return utils.getFilteredItems(items, termToFilter);
-    }, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
+    }, [items, state.searchTerm, state.searchInput, isApiSearch, utils]);
     React.useEffect(() => {
         if (!state.isOpen || !enableInfiniteScroll || !onScrollEnd || isLoadingMore)
             return;
@@ -5496,7 +5563,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
     const handleSearchChange = (e) => {
         const value = e.target.value;
         actions.setSearchInput(value);
-        if (enableApiSearch) {
+        if (isApiSearch) {
             actions.setSearchTerm(value);
         }
     };
@@ -5521,7 +5588,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
     };
     const handleClear = () => {
         actions.resetSearch();
-        if (enableApiSearch && onApiSearch) {
+        if (isApiSearch && onApiSearch) {
             onApiSearch('');
         }
     };
@@ -5554,9 +5621,9 @@ var styles$5 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Tabl
 
 const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxRuntime.jsxs("div", { className: styles$5.tableEmpty, children: [jsxRuntime.jsx("div", { className: styles$5.tableEmptyContent, children: emptyIcon ?? jsxRuntime.jsx(reactIcons.SearchInfo20Regular, {}) }), jsxRuntime.jsxs("div", { className: styles$5.tableEmptyText, children: [jsxRuntime.jsx("h3", { className: styles$5.tableEmptyTitle, children: emptyTitle ?? 'Nenhum dado encontrado' }), jsxRuntime.jsx("p", { className: styles$5.tableEmptyCaption, children: emptyText ?? 'Nenhum registro encontrado' })] })] }));
 
-var styles$4 = {"toggle":"ToggleButton-module__toggle___c1Ym-","item":"ToggleButton-module__item___2Qll-","toggle-lg":"ToggleButton-module__toggle-lg___8f3lo","item-lg":"ToggleButton-module__item-lg___479w-","toggle-sm":"ToggleButton-module__toggle-sm___SAGGb","item-sm":"ToggleButton-module__item-sm___4ju--","toggleIconLeft":"ToggleButton-module__toggleIconLeft___VwgKk","toggleWithIcon":"ToggleButton-module__toggleWithIcon___WbCr7","toggleIconOnly":"ToggleButton-module__toggleIconOnly___4iMEp","group":"ToggleButton-module__group___BoR-e"};
+var styles$4 = {"toggle":"ToggleButton-module__toggle___c1Ym-","item":"ToggleButton-module__item___2Qll-","toggle-lg":"ToggleButton-module__toggle-lg___8f3lo","item-lg":"ToggleButton-module__item-lg___479w-","toggle-sm":"ToggleButton-module__toggle-sm___SAGGb","item-sm":"ToggleButton-module__item-sm___4ju--","toggleIconLeft":"ToggleButton-module__toggleIconLeft___VwgKk","toggleWithIcon":"ToggleButton-module__toggleWithIcon___WbCr7","toggleIconOnly":"ToggleButton-module__toggleIconOnly___4iMEp","toggleLabel":"ToggleButton-module__toggleLabel___nCwcu","itemExpandOnSelect":"ToggleButton-module__itemExpandOnSelect___FVQj3","group":"ToggleButton-module__group___BoR-e","groupExpandable":"ToggleButton-module__groupExpandable___BWYWN"};
 
-const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className, label, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', icon, iconOnly = false, mode: _mode, selectionType: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, items: _items, ...rest }) => {
+const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className, label, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', icon, iconOnly = false, mode: _mode, selectionType: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, items: _items, expandOnSelect: _expandOnSelect, requireSelection: _requireSelection, ...rest }) => {
     const toggle = (jsxRuntime.jsx(radixUi.Toggle.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
             [styles$4.toggleIconOnly]: iconOnly,
             [styles$4.toggleWithIcon]: !!icon && !iconOnly,
@@ -5567,7 +5634,20 @@ const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, cl
     return toggle;
 };
 
-const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange, disabled = false, items = [], className, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', mode: _mode, icon: _icon, iconOnly: _iconOnly, pressed: _pressed, defaultPressed: _defaultPressed, onPressedChange: _onPressedChange, ...rest }) => {
+const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange, requireSelection = false, disabled = false, items = [], expandOnSelect: groupExpandOnSelect = false, className, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', mode: _mode, icon: _icon, iconOnly: _iconOnly, pressed: _pressed, defaultPressed: _defaultPressed, onPressedChange: _onPressedChange, ...rest }) => {
+    const singleValueProp = value;
+    const singleOnValueChange = onValueChange;
+    const isSingleControlled = singleValueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
+    const handleSingleValueChange = React.useCallback((next) => {
+        if (requireSelection && !next) {
+            return;
+        }
+        if (!isSingleControlled) {
+            setUncontrolledValue(next);
+        }
+        singleOnValueChange?.(next);
+    }, [requireSelection, isSingleControlled, singleOnValueChange]);
     const rootProps = selectionType === 'multiple'
         ? {
             type: 'multiple',
@@ -5575,16 +5655,27 @@ const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueCha
             defaultValue: defaultValue,
             onValueChange: onValueChange,
         }
-        : {
-            type: 'single',
-            value: value,
-            defaultValue: defaultValue,
-            onValueChange: onValueChange,
-        };
-    const group = (jsxRuntime.jsx(radixUi.ToggleGroup.Root, { ...rootProps, disabled: disabled, className: clsx(styles$4.group, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: items.map((item) => (jsxRuntime.jsx(radixUi.ToggleGroup.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
-                [styles$4.toggleIconOnly]: item.iconOnly,
-                [styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
-            }), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
+        : requireSelection
+            ? {
+                type: 'single',
+                value: isSingleControlled ? singleValueProp : uncontrolledValue,
+                onValueChange: handleSingleValueChange,
+            }
+            : {
+                type: 'single',
+                value: singleValueProp,
+                defaultValue: defaultValue,
+                onValueChange: singleOnValueChange,
+            };
+    const hasExpandableItems = groupExpandOnSelect || items.some((item) => item.expandOnSelect);
+    const group = (jsxRuntime.jsx(radixUi.ToggleGroup.Root, { ...rootProps, disabled: disabled, className: clsx(styles$4.group, { [styles$4.groupExpandable]: hasExpandableItems }, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: items.map((item) => {
+            const expandOnSelect = item.expandOnSelect ?? groupExpandOnSelect;
+            return (jsxRuntime.jsx(radixUi.ToggleGroup.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
+                    [styles$4.toggleIconOnly]: item.iconOnly && !expandOnSelect,
+                    [styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly && !expandOnSelect,
+                    [styles$4.itemExpandOnSelect]: expandOnSelect,
+                }), style: { '--giro-scale': scale }, children: expandOnSelect ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), jsxRuntime.jsx("span", { className: styles$4.toggleLabel, children: item.label })] })) : item.iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value));
+        }) }));
     if (tooltipText) {
         return (jsxRuntime.jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
     }
@@ -5737,7 +5828,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
                                             footer?.onPageChange?.(1);
                                         }
                                         header?.onSearchChange?.('');
-                                    }, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$5.tableHeaderSearch }) })), header.viewToggle && (jsxRuntime.jsx(ToggleButton, { mode: "combined", selectionType: "single", value: activeView, onValueChange: (val) => {
+                                    }, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$5.tableHeaderSearch }) })), header.viewToggle && (jsxRuntime.jsx(ToggleButton, { mode: "combined", selectionType: "single", value: activeView, requireSelection: true, onValueChange: (val) => {
                                     if (!val)
                                         return;
                                     setActiveView(val);