@seedgrid/fe-components 2026.11.3 → 2026.11.5

package/dist/inputs/SgDatatable.js

@@ -226,7 +226,7 @@ function SgDatatableBase(props, imperativeRef) {
     const i18n = useComponentsI18n();
     const hasEnvironmentProvider = useHasSgEnvironmentProvider();
     const persistence = useSgPersistence();
-    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, infiniteScroll, onLoadMore, sortField, sortOrder, onSort, removableSort = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {}, showColumnManager = true, columnManagerLabel, columnManagerMaxHeight = 320, mobileMode } = props;
+    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, infiniteScroll, onLoadMore, sortField, sortOrder, onSort, removableSort = true, enabled = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {}, showColumnManager = true, columnManagerLabel, columnManagerMaxHeight = 320, mobileMode } = props;
     const isFirstControlled = first !== undefined;
     const isSortFieldControlled = sortField !== undefined;
     const isSortOrderControlled = sortOrder !== undefined;
@@ -609,18 +609,24 @@ function SgDatatableBase(props, imperativeRef) {
         return () => observer.disconnect();
     }, [infiniteHasMore, loadMore, pagedRows.length]);
     const commitSort = React.useCallback((nextSortField, nextSortOrder) => {
+        if (!enabled)
+            return;
         if (!isSortFieldControlled)
             setInternalSortField(nextSortField);
         if (!isSortOrderControlled)
             setInternalSortOrder(nextSortOrder);
         onSort?.({ sortField: nextSortField, sortOrder: nextSortOrder });
-    }, [isSortFieldControlled, isSortOrderControlled, onSort]);
+    }, [enabled, isSortFieldControlled, isSortOrderControlled, onSort]);
     const commitSelection = React.useCallback((nextSelection) => {
+        if (!enabled)
+            return;
         if (!isSelectionControlled)
             setInternalSelection(nextSelection);
         onSelectionChange?.(nextSelection);
-    }, [isSelectionControlled, onSelectionChange]);
+    }, [enabled, isSelectionControlled, onSelectionChange]);
     const commitFilters = React.useCallback((nextFilters, nextGlobalFilter) => {
+        if (!enabled)
+            return;
         if (!isFiltersControlled)
             setInternalFilters(nextFilters);
         if (!isGlobalFilterControlled)
@@ -744,6 +750,8 @@ function SgDatatableBase(props, imperativeRef) {
     const showAllColumnsLabel = resolveMessage(t(i18n, "components.datatable.showAllColumns"), "components.datatable.showAllColumns", "Show all");
     const dragHandleLabel = resolveMessage(t(i18n, "components.datatable.dragToReorder"), "components.datatable.dragToReorder", "Drag to reorder");
     const toggleColumnVisibility = React.useCallback((columnKey, forceVisible) => {
+        if (!enabled)
+            return;
         setHiddenColumnsMap((prev) => {
             const isCurrentlyHidden = Boolean(prev[columnKey]);
             const willHide = forceVisible === undefined ? !isCurrentlyHidden : !forceVisible;
@@ -766,6 +774,8 @@ function SgDatatableBase(props, imperativeRef) {
         });
     }, []);
     const restoreDefaultColumns = React.useCallback(() => {
+        if (!enabled)
+            return;
         setColumnOrder(columnDescriptors.map((item) => item.key));
         setHiddenColumnsMap(columnDescriptors.reduce((acc, item) => {
             acc[item.key] = Boolean(item.column.hidden);
@@ -773,6 +783,8 @@ function SgDatatableBase(props, imperativeRef) {
         }, {}));
     }, [columnDescriptors]);
     const showAllColumns = React.useCallback(() => {
+        if (!enabled)
+            return;
         setHiddenColumnsMap((prev) => {
             const next = { ...prev };
             for (const item of columnDescriptors) {
@@ -811,7 +823,7 @@ function SgDatatableBase(props, imperativeRef) {
     const sortDirectionLabel = resolveMessage(t(i18n, "components.datatable.sortDirection"), "components.datatable.sortDirection", "Reverse order");
     const filtersPanelLabel = resolveMessage(t(i18n, "components.datatable.filters"), "components.datatable.filters", "Filters");
     const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
-    return (_jsx("div", { ref: rootRef, className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
+    return (_jsx("div", { ref: rootRef, className: enabled ? className : cn(className, "opacity-60"), style: style, "aria-disabled": enabled ? undefined : true, "data-sg-enabled": enabled ? undefined : "false", children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, disabled: !enabled, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", enabled: enabled, onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, disabled: !enabled, onClick: () => enabled && setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
                                 ? createPortal(_jsxs("div", { ref: columnManagerPanelRef, className: "fixed z-[1400] w-[300px] rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] shadow-xl", style: {
                                         top: columnManagerPosition.top,
                                         left: columnManagerPosition.left
@@ -841,7 +853,7 @@ function SgDatatableBase(props, imperativeRef) {
                                                                     ? "text-[rgb(var(--sg-muted))]"
                                                                     : "text-[rgb(var(--sg-text))]", !canHideThisColumn ? "cursor-not-allowed" : ""), children: columnLabel }), _jsx("div", { className: cn("inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[rgb(var(--sg-muted))]", isReorderable ? "cursor-grab active:cursor-grabbing" : "opacity-40"), title: dragHandleLabel, children: _jsx(GripVertical, { size: 16 }) })] }, `manager-${item.key}`));
                                                 }) }) }), _jsxs("div", { className: "flex items-center gap-2 border-t border-[rgb(var(--sg-border))] px-3 py-3", children: [_jsx(SgButton, { size: "sm", appearance: "outline", onClick: restoreDefaultColumns, children: restoreColumnsLabel }), _jsx(SgButton, { size: "sm", appearance: "outline", onClick: showAllColumns, children: showAllColumnsLabel })] })] }), document.body)
-                                : null, cardsActive ? (_jsxs("div", { "data-sg-datatable-cards": "true", className: "space-y-2", children: [cardSortColumns.length > 0 || (showColumnFilters && cardFilterColumns.length > 0) ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [cardSortColumns.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("select", { "aria-label": sortByLabel, value: currentSortOrder === 0 || !currentSortField ? "" : currentSortField, onChange: (event) => {
+                                : null, cardsActive ? (_jsxs("div", { "data-sg-datatable-cards": "true", className: "space-y-2", children: [cardSortColumns.length > 0 || (showColumnFilters && cardFilterColumns.length > 0) ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [cardSortColumns.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("select", { "aria-label": sortByLabel, disabled: !enabled, value: currentSortOrder === 0 || !currentSortField ? "" : currentSortField, onChange: (event) => {
                                                             const next = event.target.value;
                                                             if (!next)
                                                                 commitSort(null, 0);
@@ -850,14 +862,14 @@ function SgDatatableBase(props, imperativeRef) {
                                                         }, className: "min-w-0 flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: [_jsx("option", { value: "", children: sortNoneLabel }), cardSortColumns.map((column, columnIndex) => {
                                                                 const key = (column.sortField ?? column.field);
                                                                 return (_jsx("option", { value: key, children: cardHeaderLabel(column) }, `sort-${column.columnId ?? key}-${columnIndex}`));
-                                                            })] }), _jsx(SgButton, { size: "sm", appearance: "outline", iconOnly: true, "aria-label": sortDirectionLabel, title: sortDirectionLabel, enabled: !(!currentSortField || currentSortOrder === 0), onClick: () => {
+                                                            })] }), _jsx(SgButton, { size: "sm", appearance: "outline", iconOnly: true, "aria-label": sortDirectionLabel, title: sortDirectionLabel, enabled: enabled && !(!currentSortField || currentSortOrder === 0), onClick: () => {
                                                             if (!currentSortField)
                                                                 return;
                                                             commitSort(currentSortField, currentSortOrder === 1 ? -1 : 1);
                                                         }, leftIcon: currentSortOrder === -1 ? _jsx(ArrowDown, { size: 16 }) : _jsx(ArrowUp, { size: 16 }) })] })) : null, showColumnFilters && cardFilterColumns.length > 0 ? (_jsx(SgButton, { size: "sm", appearance: "outline", "aria-expanded": isCardFiltersOpen, onClick: () => setIsCardFiltersOpen((prev) => !prev), children: filtersPanelLabel })) : null] })) : null, showColumnFilters && isCardFiltersOpen && cardFilterColumns.length > 0 ? (_jsx("div", { "data-sg-datatable-filters-panel": "true", className: "space-y-2 rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-3", children: cardFilterColumns.map((column, columnIndex) => {
                                             const filterField = (column.filterField ?? column.field);
                                             const filterValue = currentFilters[filterField] ?? "";
-                                            return (_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("input", { value: filterValue, onChange: (event) => {
+                                            return (_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-xs font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("input", { value: filterValue, disabled: !enabled, onChange: (event) => {
                                                             const normalized = normalizeFilters({ ...currentFilters, [filterField]: event.target.value });
                                                             commitFilters(normalized, currentGlobalFilter);
                                                         }, placeholder: column.filterPlaceholder ?? t(i18n, "components.datatable.columnFilterPlaceholder", { column: String(column.header ?? "") }), className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })] }, `cardfilter-${column.columnId ?? filterField}-${columnIndex}`));
@@ -871,7 +883,7 @@ function SgDatatableBase(props, imperativeRef) {
                                                         return;
                                                     }
                                                     handleRowSelection(rowData);
-                                                }, className: cn("rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-3", selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", selected ? "border-[rgb(var(--sg-primary-600))] bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: [cardTitleColumn ? (_jsx("div", { "data-sg-card-title": "true", className: "mb-2 text-base font-semibold text-[rgb(var(--sg-text))]", children: renderCellContent(cardTitleColumn, rowData, absoluteRowIndex) })) : null, _jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm", children: cardBodyColumns.map((column, columnIndex) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("dd", { className: cn("min-w-0 break-words text-[rgb(var(--sg-text))]", column.className), children: renderCellContent(column, rowData, absoluteRowIndex) })] }, `card-${column.columnId ?? column.field ?? columnIndex}-${absoluteRowIndex}`))) })] }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
+                                                }, className: cn("rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-3", selectionMode && enabled ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", selected ? "border-[rgb(var(--sg-primary-600))] bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: [cardTitleColumn ? (_jsx("div", { "data-sg-card-title": "true", className: "mb-2 text-base font-semibold text-[rgb(var(--sg-text))]", children: renderCellContent(cardTitleColumn, rowData, absoluteRowIndex) })) : null, _jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-sm", children: cardBodyColumns.map((column, columnIndex) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "font-semibold text-[rgb(var(--sg-muted))]", children: column.header }), _jsx("dd", { className: cn("min-w-0 break-words text-[rgb(var(--sg-text))]", column.className), children: renderCellContent(column, rowData, absoluteRowIndex) })] }, `card-${column.columnId ?? column.field ?? columnIndex}-${absoluteRowIndex}`))) })] }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
                                         }) })), hasFooter ? (_jsx("dl", { "data-sg-card-footer": "true", className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 rounded-lg bg-[rgb(var(--sg-primary-50))] p-3 text-sm font-semibold text-[rgb(var(--sg-text))]", children: visibleColumns
                                             .filter((column) => column.footer !== undefined && !column.cardHidden)
                                             .map((column, columnIndex) => (_jsxs(React.Fragment, { children: [_jsx("dt", { children: column.header }), _jsx("dd", { children: typeof column.footer === "function" ? column.footer(sortedRows) : column.footer })] }, `cardfoot-${column.columnId ?? column.field ?? columnIndex}`))) })) : null] })) : (_jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
@@ -883,11 +895,11 @@ function SgDatatableBase(props, imperativeRef) {
                                                         // direcao. `aria-hidden` no wrapper mantem o leitor de tela lendo so' o
                                                         // rotulo, como antes.
                                                         const sortIcon = !column.sortable ? null : isSorted && currentSortOrder === 1 ? (_jsx(ArrowUp, { size: 14 })) : isSorted && currentSortOrder === -1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ChevronsUpDown, { size: 14, className: "opacity-60" }));
-                                                        return (_jsx("th", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.headerClassName, column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => handleHeaderSort(column), className: cn("inline-flex items-center gap-1 font-semibold", resolveAlignmentClass(column.align), "text-[rgb(var(--sg-text))] hover:text-[rgb(var(--sg-primary-600))]"), children: [_jsx("span", { children: column.header }), _jsx("span", { "aria-hidden": "true", className: "inline-flex items-center", children: sortIcon })] })) : (_jsx("span", { children: column.header })) }, `head-${column.columnId ?? column.field ?? columnIndex}`));
+                                                        return (_jsx("th", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.headerClassName, column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: column.sortable ? (_jsxs("button", { type: "button", disabled: !enabled, onClick: () => handleHeaderSort(column), className: cn("inline-flex items-center gap-1 font-semibold", resolveAlignmentClass(column.align), "text-[rgb(var(--sg-text))] hover:text-[rgb(var(--sg-primary-600))]"), children: [_jsx("span", { children: column.header }), _jsx("span", { "aria-hidden": "true", className: "inline-flex items-center", children: sortIcon })] })) : (_jsx("span", { children: column.header })) }, `head-${column.columnId ?? column.field ?? columnIndex}`));
                                                     }) }), shouldShowFiltersRow ? (_jsx("tr", { children: visibleColumns.map((column, columnIndex) => {
                                                         const filterField = column.filterField ?? column.field;
                                                         const filterValue = filterField ? currentFilters[filterField] ?? "" : "";
-                                                        return (_jsx("th", { className: cn("px-3 py-2 align-top", showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]"), children: column.filter && filterField ? (_jsx("input", { value: filterValue, onChange: (event) => {
+                                                        return (_jsx("th", { className: cn("px-3 py-2 align-top", showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]"), children: column.filter && filterField ? (_jsx("input", { value: filterValue, disabled: !enabled, onChange: (event) => {
                                                                     const nextFilters = {
                                                                         ...currentFilters,
                                                                         [filterField]: event.target.value
@@ -905,7 +917,7 @@ function SgDatatableBase(props, imperativeRef) {
                                                             return;
                                                         }
                                                         handleRowSelection(rowData);
-                                                    }, className: cn(selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", hoverableRows ? "hover:bg-[rgb(var(--sg-primary-100))]" : "", selected ? "bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: visibleColumns.map((column, columnIndex) => {
+                                                    }, className: cn(selectionMode && enabled ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", hoverableRows ? "hover:bg-[rgb(var(--sg-primary-100))]" : "", selected ? "bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: visibleColumns.map((column, columnIndex) => {
                                                         const cellField = column.field;
                                                         const customCellClass = typeof column.bodyClassName === "function"
                                                             ? column.bodyClassName(rowData, absoluteRowIndex)

package/dist/inputs/SgDatatable.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgDatatable.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAoCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAoBrB,CAAC"}
+{"version":3,"file":"SgDatatable.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAqCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAoBrB,CAAC"}

package/dist/inputs/SgDatatable.meta.js

@@ -20,6 +20,7 @@ export const sgMeta = {
         { name: "rows", type: "number", description: "Linhas por pagina quando a paginacao esta ativa (os dados vao em value).", semanticRole: "behavior", bindable: true },
         { name: "selectionMode", type: "\"single\" | \"multiple\"", description: "Modo de selecao de linhas.", semanticRole: "behavior", bindable: true },
         { name: "loading", type: "boolean", default: false, description: "Indica estado de carregamento.", semanticRole: "appearance", bindable: true },
+        { name: "enabled", type: "boolean", default: true, description: "Quando false, bloqueia as acoes que mudam estado: ordenacao, selecao de linhas, filtros (global e por coluna), limpar filtros e gerenciador de colunas. Paginacao, rolagem e carga de mais linhas continuam funcionando. Aparencia de desabilitado e aria-disabled.", semanticRole: "behavior", bindable: true },
         { name: "mobileMode", type: "\"scroll\" | \"cards\"", default: "(omitido = automatico)", description: "Comportamento em tela estreita. Omitido (padrao): cartoes quando o container fica abaixo de 600 px, tabela acima; cards: forca cartoes em qualquer largura; scroll: forca a tabela com rolagem horizontal. Nos cartoes mantem ordenacao, selecao, acoes, rodape e paginacao.", semanticRole: "behavior", bindable: true },
         { name: "infiniteScroll", type: "boolean", default: "(true nos cartoes, false na tabela)", description: "Rolagem infinita: sem paginador, ao chegar perto do fim da lista avanca a pagina (rows) e acrescenta os proximos registros, com indicador de carregando e de fim da lista. Padrao ligado quando a lista e exibida como cartoes (abaixo de 600 px no modo automatico) e desligado na tabela. Exige paginator. Com lazy, o pai acrescenta a proxima pagina a value (first/rows/page vem em onPage/onLoadMore).", semanticRole: "behavior", bindable: true },
         { name: "onLoadMore", type: "(event: SgDatatablePageEvent) => void", description: "Chamado (alem de onPage) quando a rolagem infinita pede a proxima pagina.", semanticRole: "event", bindable: false },

package/dist/layout/SgToolBar.d.ts

@@ -27,6 +27,12 @@ export type SgToolBarProps = {
     collapsed?: boolean;
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Quando a barra nao comporta todos os itens na largura (ou altura, na vertical) disponivel, os
+     * `SgToolbarIconButton` que nao cabem vao para um menu "..." (SgMenu). Abaixo de 600px de largura
+     * de tela o menu abre como painel inferior. Padrao: false. Ignorado com `buttonsPerDirection`.
+     */
+    overflow?: boolean;
     children?: React.ReactNode;
 };
 export type SgToolbarIconButtonProps = {

package/dist/layout/SgToolBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAgFF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAsjBxD;yBAtjBe,SAAS;;;AAwjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAiJpE;yBAlJe,mBAAmB"}
+{"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAgFF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA6jBxD;yBA7jBe,SAAS;;;AA+jBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAiJpE;yBAlJe,mBAAmB"}

package/dist/layout/SgToolBar.js

@@ -2,11 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { MoreHorizontal } from "lucide-react";
 import { useSgDockLayout } from "./SgDockLayout";
 import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
 import { t, useComponentsI18n } from "../i18n";
 import { buildToolbarStorageKey, parseStoredPanelDragPosition } from "./drag-position";
-import { buildToolbarLayoutState } from "./toolbar-logic";
+import { buildToolbarLayoutState, resolveToolbarOverflow } from "./toolbar-logic";
+import { SgMenu } from "./SgMenu";
+import { SgPopup } from "../overlay/SgPopup";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
@@ -72,7 +75,7 @@ export function SgToolBar(props) {
     const hasEnvironmentProvider = useHasSgEnvironmentProvider();
     const i18n = useComponentsI18n();
     const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
-    const { id, title, orientationDirection, buttonsPerDirection, bgColorTitle, bgColor, size, className, style, dockZone, draggable = false, freeDrag = false, defaultPosition, collapsible = true, collapsed, defaultCollapsed = false, onCollapsedChange, children } = props;
+    const { id, title, orientationDirection, buttonsPerDirection, bgColorTitle, bgColor, size, className, style, dockZone, draggable = false, freeDrag = false, defaultPosition, collapsible = true, collapsed, defaultCollapsed = false, onCollapsedChange, overflow = false, children } = props;
     const dock = useSgDockLayout();
     const inDock = !!dock;
     const assignedZone = inDock ? dock.getToolbarZone(id) : null;
@@ -441,7 +444,8 @@ export function SgToolBar(props) {
     const normalizedButtonsPerDirection = Number.isFinite(buttonsPerDirection) && typeof buttonsPerDirection === "number" && buttonsPerDirection > 0
         ? Math.floor(buttonsPerDirection)
         : undefined;
-    const content = showContent ? (_jsx("div", { className: cn("gap-2 p-2", normalizedButtonsPerDirection
+    const overflowActive = overflow && !normalizedButtonsPerDirection && showContent;
+    const content = showContent ? (_jsx("div", { className: cn("gap-2 p-2", overflowActive && "min-h-0 min-w-0 flex-1", normalizedButtonsPerDirection
             ? "grid"
             : orientation === "horizontal"
                 ? "flex flex-row"
@@ -452,7 +456,7 @@ export function SgToolBar(props) {
                     gridTemplateRows: `repeat(${normalizedButtonsPerDirection}, max-content)`,
                     gridAutoFlow: "column"
                 }
-            : undefined, children: children })) : null;
+            : undefined, children: overflowActive ? (_jsx(SgToolBarOverflowFlow, { horizontal: orientation === "horizontal", children: children })) : children })) : null;
     const toolbar = (_jsx(SgToolbarOrientationContext.Provider, { value: orientation, children: _jsxs("div", { ref: containerRef, "data-sg-toolbar-root": "true", "data-sg-toolbar-id": id, className: cn("select-none rounded-xl border border-border bg-background shadow-sm", orientation === "horizontal" ? "inline-flex flex-row items-center" : "inline-flex flex-col items-center", className), style: {
                 width: size?.w,
                 height: size?.h,
@@ -464,7 +468,7 @@ export function SgToolBar(props) {
                 order: detachFromDockFlow ? undefined : toolbarRenderOrder,
                 zIndex: dragPos ? 1000 : undefined,
                 ...style
-            }, onPointerDown: handlePointerDown, children: [openUp || openLeft ? content : null, (title || collapsible) && (_jsxs("div", { className: cn("flex items-center gap-2 px-2 py-1", orientation === "horizontal" ? "w-auto" : "w-full", orientation === "horizontal"
+            }, onPointerDown: handlePointerDown, children: [openUp || openLeft ? content : null, (title || collapsible) && (_jsxs("div", { className: cn("flex items-center gap-2 px-2 py-1", overflowActive && "shrink-0", orientation === "horizontal" ? "w-auto" : "w-full", orientation === "horizontal"
                         ? showContent
                             ? (openLeft ? "border-l border-border" : "border-r border-border")
                             : ""
@@ -559,6 +563,104 @@ export function SgToolbarIconButton(props) {
                     ...style
                 }, children: [isLoading ? (_jsx("span", { className: "inline-flex size-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent" })) : icon && typeof icon !== "string" ? (_jsx("span", { className: "inline-flex shrink-0", children: icon })) : (_jsx("span", { className: "shrink-0 text-[10px] font-semibold", children: text?.slice(0, 2) })), hasVisibleLabel ? (_jsx("span", { className: "text-xs font-medium leading-none", children: label })) : null] }), hintNode] }));
 }
+const OVERFLOW_GAP = 8;
+const OVERFLOW_NARROW_WIDTH = 600;
+const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function sameMetrics(a, b) {
+    return (!!a &&
+        a.more === b.more &&
+        a.available === b.available &&
+        a.extents.length === b.extents.length &&
+        a.extents.every((v, i) => v === b.extents[i]));
+}
+/**
+ * Itens da toolbar com `overflow`: mede a largura (ResizeObserver) e move para o menu "..." os
+ * `SgToolbarIconButton` que nao cabem. Outros elementos que nao cabem ficam escondidos.
+ * Uma copia invisivel de todos os itens ("ghost") fornece os tamanhos naturais.
+ */
+function SgToolBarOverflowFlow(props) {
+    const { horizontal, children } = props;
+    const i18n = useComponentsI18n();
+    const items = React.Children.toArray(children);
+    const hostRef = React.useRef(null);
+    const ghostRef = React.useRef(null);
+    const moreRef = React.useRef(null);
+    const [metrics, setMetrics] = React.useState(null);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [narrow, setNarrow] = React.useState(false);
+    const measure = React.useCallback(() => {
+        const host = hostRef.current;
+        const ghost = ghostRef.current;
+        if (!host || !ghost)
+            return;
+        const sizes = Array.from(ghost.children).map((el) => horizontal ? el.offsetWidth : el.offsetHeight);
+        const more = sizes.pop() ?? 0;
+        const next = { extents: sizes, more, available: horizontal ? host.clientWidth : host.clientHeight };
+        setMetrics((prev) => (sameMetrics(prev, next) ? prev : next));
+    }, [horizontal]);
+    useIsoLayoutEffect(() => {
+        measure();
+    });
+    React.useEffect(() => {
+        const host = hostRef.current;
+        const ghost = ghostRef.current;
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", measure);
+            return () => window.removeEventListener("resize", measure);
+        }
+        const observer = new ResizeObserver(() => measure());
+        if (host)
+            observer.observe(host);
+        if (ghost)
+            observer.observe(ghost);
+        return () => observer.disconnect();
+    }, [measure]);
+    const count = metrics && metrics.extents.length === items.length
+        ? resolveToolbarOverflow({
+            extents: metrics.extents,
+            available: metrics.available,
+            gap: OVERFLOW_GAP,
+            overflowExtent: metrics.more
+        })
+        : items.length;
+    const showMore = count < items.length;
+    const hiddenNodes = [];
+    items.forEach((item, index) => {
+        if (index < count || !React.isValidElement(item) || item.type !== SgToolbarIconButton)
+            return;
+        const p = item.props;
+        hiddenNodes.push({
+            id: `sg-toolbar-overflow-${index}`,
+            label: p.label ?? p.hint ?? "",
+            hint: p.hint,
+            icon: p.icon,
+            enabled: p.enabled,
+            onClick: p.onClick ? () => { void p.onClick?.(); } : undefined
+        });
+    });
+    React.useEffect(() => {
+        if (!showMore && menuOpen)
+            setMenuOpen(false);
+    }, [showMore, menuOpen]);
+    const total = metrics ? metrics.extents.reduce((acc, v, i) => acc + v + (i > 0 ? OVERFLOW_GAP : 0), 0) : 0;
+    const openLabel = t(i18n, "components.menu.open");
+    const flexDir = horizontal ? "row" : "column";
+    return (_jsxs("div", { ref: hostRef, "data-sg-toolbar-overflow": "true", style: { position: "relative", minWidth: 0, minHeight: 0, flex: "1 1 0%", display: "flex" }, children: [metrics ? (_jsx("div", { "aria-hidden": "true", style: { flex: "none", width: horizontal ? total : 0, height: horizontal ? 0 : total } })) : null, _jsxs("div", { "data-sg-toolbar-overflow-items": "true", style: { display: "flex", flexDirection: flexDir, alignItems: "center", gap: OVERFLOW_GAP, minWidth: 0 }, children: [items.slice(0, count), showMore ? (_jsx("span", { ref: moreRef, "data-sg-toolbar-overflow-button": "true", style: { display: "inline-flex" }, children: _jsx(SgToolbarIconButton, { icon: _jsx(MoreHorizontal, { className: "size-4" }), hint: openLabel, onClick: () => {
+                                setNarrow(typeof window !== "undefined" && window.innerWidth < OVERFLOW_NARROW_WIDTH);
+                                setMenuOpen((open) => !open);
+                            } }) })) : null] }), _jsx("div", { "aria-hidden": "true", style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: 0,
+                    height: 0,
+                    overflow: "hidden",
+                    visibility: "hidden",
+                    pointerEvents: "none"
+                }, children: _jsxs("div", { ref: ghostRef, style: { display: "flex", flexDirection: flexDir, alignItems: "center", gap: OVERFLOW_GAP, width: "max-content" }, children: [items.map((item, index) => (_jsx("div", { style: { flex: "none" }, children: item }, index))), _jsx("div", { style: { flex: "none" }, children: _jsx(SgToolbarIconButton, { icon: _jsx(MoreHorizontal, { className: "size-4" }) }) })] }) }), showMore && menuOpen ? (_jsx(SgPopup, { open: true, onOpenChange: setMenuOpen, anchorRef: moreRef, placement: horizontal ? "bottom" : "right", align: "start", offset: 4, zIndex: 1300, minWidth: narrow ? 0 : 240, style: narrow
+                    ? { top: "auto", left: 0, right: 0, bottom: 0, width: "100%", borderRadius: "12px 12px 0 0" }
+                    : undefined, children: _jsx(SgMenu, { menu: hiddenNodes, menuStyle: "inline", border: false, elevation: "none", expandedWidth: narrow ? "100%" : 240, ariaLabel: openLabel, onItemClick: () => setMenuOpen(false) }) })) : null] }));
+}
 function CollapseIcon(props) {
     const { direction, collapsed } = props;
     const arrowUp = "M6 15l6-6 6 6";

package/dist/layout/SgToolBar.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgToolBar.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAyGpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}
+{"version":3,"file":"SgToolBar.meta.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAiHpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/layout/SgToolBar.meta.js

@@ -65,6 +65,14 @@ export const sgMeta = {
             semanticRole: "behavior",
             bindable: true
         },
+        {
+            name: "overflow",
+            type: "boolean",
+            default: false,
+            description: "Move para um menu '...' os botoes que nao cabem na largura disponivel; abaixo de 600px abre como painel inferior.",
+            semanticRole: "behavior",
+            bindable: true
+        },
         {
             name: "children",
             type: "ReactNode",

package/dist/layout/toolbar-logic.d.ts

@@ -23,4 +23,15 @@ export declare function buildToolbarLayoutState(args: {
     showLeadingCollapseButton: boolean;
     collapseIconDirection: "left" | "right" | "up" | "down";
 };
+/**
+ * Overflow da SgToolBar (mesma regra do Flutter): quantos itens cabem no espaco principal.
+ * `extents` = tamanho de cada item no eixo principal; `overflowExtent` = tamanho do botao "..."
+ * (so conta se algum item ficar de fora). Devolve `extents.length` quando tudo cabe.
+ */
+export declare function resolveToolbarOverflow(args: {
+    extents: number[];
+    available: number;
+    gap: number;
+    overflowExtent: number;
+}): number;
 //# sourceMappingURL=toolbar-logic.d.ts.map

package/dist/layout/toolbar-logic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-logic.d.ts","sourceRoot":"","sources":["../../src/layout/toolbar-logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAC;AAEvF,wBAAgB,kCAAkC,CAChD,oBAAoB,EAAE,6BAA6B,GAClD;IAAE,WAAW,EAAE,oBAAoB,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAA;CAAE,CAYpF;AAED,wBAAgB,sCAAsC,CACpD,oBAAoB,EAAE,6BAA6B,EACnD,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GACjD,6BAA6B,CAQ/B;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE;IAC5C,oBAAoB,EAAE,6BAA6B,CAAC;IACpD,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,WAAW,EAAE,OAAO,CAAC;CACtB,GAAG;IACF,kBAAkB,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjE,4BAA4B,EAAE,6BAA6B,CAAC;IAC5D,WAAW,EAAE,oBAAoB,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,EAAE,OAAO,CAAC;IACnC,qBAAqB,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;CACzD,CAoBA"}
+{"version":3,"file":"toolbar-logic.d.ts","sourceRoot":"","sources":["../../src/layout/toolbar-logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAC;AAEvF,wBAAgB,kCAAkC,CAChD,oBAAoB,EAAE,6BAA6B,GAClD;IAAE,WAAW,EAAE,oBAAoB,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAA;CAAE,CAYpF;AAED,wBAAgB,sCAAsC,CACpD,oBAAoB,EAAE,6BAA6B,EACnD,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GACjD,6BAA6B,CAQ/B;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE;IAC5C,oBAAoB,EAAE,6BAA6B,CAAC;IACpD,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,WAAW,EAAE,OAAO,CAAC;CACtB,GAAG;IACF,kBAAkB,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjE,4BAA4B,EAAE,6BAA6B,CAAC;IAC5D,WAAW,EAAE,oBAAoB,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,EAAE,OAAO,CAAC;IACnC,qBAAqB,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;CACzD,CAoBA;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE;IAC3C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,MAAM,CAeT"}

package/dist/layout/toolbar-logic.js

@@ -36,3 +36,28 @@ export function buildToolbarLayoutState(args) {
         collapseIconDirection: resolvedOrientationDirection === "horizontal-right" ? "right" : direction
     };
 }
+/**
+ * Overflow da SgToolBar (mesma regra do Flutter): quantos itens cabem no espaco principal.
+ * `extents` = tamanho de cada item no eixo principal; `overflowExtent` = tamanho do botao "..."
+ * (so conta se algum item ficar de fora). Devolve `extents.length` quando tudo cabe.
+ */
+export function resolveToolbarOverflow(args) {
+    const { extents, available, gap, overflowExtent } = args;
+    if (!Number.isFinite(available))
+        return extents.length;
+    let total = 0;
+    for (let i = 0; i < extents.length; i++)
+        total += (extents[i] ?? 0) + (i > 0 ? gap : 0);
+    if (total <= available + 0.01)
+        return extents.length;
+    let used = 0;
+    let count = 0;
+    for (let i = 0; i < extents.length; i++) {
+        const next = used + (extents[i] ?? 0) + (count > 0 ? gap : 0);
+        if (next + gap + overflowExtent > available + 0.01)
+            break;
+        used = next;
+        count++;
+    }
+    return count;
+}