@seedgrid/fe-components 2026.11.4 → 2026.11.5

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;
+}