@seedgrid/fe-components 2026.8.2 → 2026.8.4

package/dist/layout/SgPageControl.js

@@ -15,6 +15,19 @@ function resolveRecords(children, hiddenPageIds) {
         return { id, props: element.props, element, hidden };
     });
 }
+// <option> so aceita texto. `title` e ReactNode (pode vir com icone/markup), entao
+// caimos para `hint` e, por ultimo, para o id — nunca para string vazia, que deixaria
+// a opcao invisivel no select do celular.
+function optionLabel(record) {
+    const { title, hint } = record.props;
+    if (typeof title === "string" && title.trim())
+        return title;
+    if (typeof title === "number")
+        return String(title);
+    if (hint?.trim())
+        return hint;
+    return record.id;
+}
 function clampIndex(index, length) {
     if (length <= 0)
         return 0;
@@ -23,7 +36,7 @@ function clampIndex(index, length) {
     return Math.max(0, Math.min(length - 1, Math.floor(index)));
 }
 export function SgPageControl(props) {
-    const { children, activePageId, activeIndex, defaultActivePageId, defaultActiveIndex = 0, onActivePageIdChange, onActiveIndexChange, hiddenPageIds, keepMounted = false, pageControlStyle = "underline", size = "md", fullWidthTabs = false, keyboardNavigation = true, ariaLabel, emptyMessage, className, tabListClassName, tabClassName, panelClassName, style } = props;
+    const { children, activePageId, activeIndex, defaultActivePageId, defaultActiveIndex = 0, onActivePageIdChange, onActiveIndexChange, hiddenPageIds, keepMounted = false, pageControlStyle = "underline", size = "md", fullWidthTabs = false, mobilePageControl = "scroll", keyboardNavigation = true, ariaLabel, emptyMessage, className, tabListClassName, tabClassName, panelClassName, style } = props;
     const i18n = useComponentsI18n();
     const resolvedAriaLabel = ariaLabel ?? t(i18n, "components.pageControl.ariaLabel");
     const resolvedEmptyMessage = emptyMessage ?? t(i18n, "components.pageControl.empty");
@@ -71,23 +84,50 @@ export function SgPageControl(props) {
         fireOnChange(nextId);
     }, [fireOnChange, isControlled, visiblePages]);
     const tabsRef = React.useRef([]);
+    const tabListRef = React.useRef(null);
     const rootId = React.useId();
+    // Com rolagem horizontal a aba ativa pode estar fora da area visivel — ao trocar de
+    // pagina por teclado, por codigo (modo controlado) ou pelo select do celular, ela
+    // precisa aparecer. Mexemos em scrollLeft em vez de scrollIntoView de proposito:
+    // scrollIntoView sobe pelos ancestrais e rola a PAGINA junto.
+    React.useEffect(() => {
+        const list = tabListRef.current;
+        const tab = tabsRef.current[activeIndexResolved];
+        if (!list || !tab)
+            return;
+        if (list.scrollWidth <= list.clientWidth)
+            return;
+        const margin = 8;
+        const tabStart = tab.offsetLeft;
+        const tabEnd = tabStart + tab.offsetWidth;
+        const viewStart = list.scrollLeft;
+        const viewEnd = viewStart + list.clientWidth;
+        if (tabStart < viewStart) {
+            list.scrollLeft = Math.max(0, tabStart - margin);
+        }
+        else if (tabEnd > viewEnd) {
+            list.scrollLeft = tabEnd - list.clientWidth + margin;
+        }
+    }, [activeIndexResolved]);
     const sizeClasses = size === "sm"
         ? {
             tab: "h-8 px-3 text-xs gap-1.5",
             icon: "size-4",
-            panel: "p-3"
+            panel: "p-3",
+            select: "h-8 text-xs"
         }
         : size === "lg"
             ? {
                 tab: "h-11 px-4 text-sm gap-2.5",
                 icon: "size-5",
-                panel: "p-5"
+                panel: "p-5",
+                select: "h-11 text-sm"
             }
             : {
                 tab: "h-9 px-3.5 text-sm gap-2",
                 icon: "size-4.5",
-                panel: "p-4"
+                panel: "p-4",
+                select: "h-9 text-sm"
             };
     const tabStyle = pageControlStyle === "pills"
         ? {
@@ -100,7 +140,14 @@ export function SgPageControl(props) {
             active: "border-primary text-primary bg-muted/30",
             inactive: ""
         };
-    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsx("div", { role: "tablist", "aria-label": resolvedAriaLabel, className: cn("flex min-h-0 items-end gap-1 overflow-x-auto border-b border-border pb-0.5", fullWidthTabs ? "grid auto-cols-fr grid-flow-col" : "", tabListClassName), onKeyDown: (event) => {
+    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [mobilePageControl === "select" && visiblePages.length > 0 ? (
+            // Alternativa do celular: as abas viram um select nativo. Fica escondido a partir
+            // do tablet, e a troca e feita por CSS (nao por media query em JS) para nao
+            // depender do tamanho da janela na primeira renderizacao.
+            _jsx("div", { className: "mb-2 md:hidden", children: _jsx("select", { "aria-label": resolvedAriaLabel, value: resolvedActiveId ?? "", onChange: (event) => selectPage(event.target.value), className: cn("w-full rounded-md border border-border bg-background px-3 font-medium text-foreground", sizeClasses.select), children: visiblePages.map((record) => (_jsx("option", { value: record.id, disabled: record.props.disabled, children: optionLabel(record) }, record.id))) }) })) : null, _jsx("div", { role: "tablist", ref: tabListRef, "aria-label": resolvedAriaLabel, className: cn("min-h-0 items-end gap-1 overflow-x-auto border-b border-border pb-0.5", 
+                // Um unico utilitario de display por breakpoint. Antes `flex` e `grid` saiam
+                // juntos no mesmo elemento e quem vencia dependia da ordem no CSS gerado.
+                mobilePageControl === "select" ? "hidden" : "flex", fullWidthTabs ? "md:grid md:auto-cols-fr md:grid-flow-col" : "md:flex", tabListClassName), onKeyDown: (event) => {
                     if (!keyboardNavigation || visiblePages.length === 0)
                         return;
                     const focused = document.activeElement;
@@ -141,7 +188,10 @@ export function SgPageControl(props) {
                     const panelId = `${rootId}-panel-${record.id}`;
                     return (_jsxs("button", { ref: (el) => {
                             tabsRef.current[index] = el;
-                        }, type: "button", id: tabId, role: "tab", "aria-controls": panelId, "aria-selected": isActive, tabIndex: isActive ? 0 : -1, title: record.props.hint, disabled: record.props.disabled, onClick: () => selectPage(record.id), className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors", sizeClasses.tab, tabStyle.base, isActive ? tabStyle.active : tabStyle.inactive, fullWidthTabs ? "w-full" : "", record.props.disabled ? "cursor-not-allowed opacity-45" : "", tabClassName, record.props.tabClassName), children: [record.props.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: record.props.icon })) : null, _jsx("span", { className: "truncate", children: record.props.title })] }, record.id));
+                        }, type: "button", id: tabId, role: "tab", "aria-controls": panelId, "aria-selected": isActive, tabIndex: isActive ? 0 : -1, title: record.props.hint, disabled: record.props.disabled, onClick: () => selectPage(record.id), className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors", sizeClasses.tab, tabStyle.base, isActive ? tabStyle.active : tabStyle.inactive, 
+                        // No celular a lista e flex com rolagem: `w-full` faria cada aba ocupar a
+                        // largura toda do container.
+                        fullWidthTabs ? "md:w-full" : "", record.props.disabled ? "cursor-not-allowed opacity-45" : "", tabClassName, record.props.tabClassName), children: [record.props.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: record.props.icon })) : null, _jsx("span", { className: "truncate", children: record.props.title })] }, record.id));
                 }) }), _jsx("div", { className: cn("rounded-b-md border border-t-0 border-border bg-background", panelClassName), children: visiblePages.length === 0 ? (_jsx("div", { className: cn(sizeClasses.panel, "text-sm text-muted-foreground"), children: resolvedEmptyMessage })) : keepMounted ? (visiblePages.map((record) => {
                     const isActive = record.id === resolvedActiveId;
                     const tabId = `${rootId}-tab-${record.id}`;

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

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

package/dist/layout/SgPageControl.meta.js

@@ -9,7 +9,7 @@ export const sgMeta = {
     subcategory: "page-control",
     description: "Controle de paginas em abas para alternar entre paineis de conteudo relacionados em uma mesma area da tela.",
     tags: ["navigation", "tabs", "page-control", "panels"],
-    capabilities: ["tab-navigation", "controlled-active-page", "hidden-pages", "keyboard-navigation"],
+    capabilities: ["tab-navigation", "controlled-active-page", "hidden-pages", "keyboard-navigation", "responsive-tabs"],
     fieldSemantics: ["tabs", "pageTabs", "panelNavigation", "sectionSwitcher"],
     props: [
         { name: "children", type: "ReactNode", required: true, description: "Paginas filhas definidas por SgPageControlPage.", semanticRole: "data", bindable: false },
@@ -18,6 +18,8 @@ export const sgMeta = {
         { name: "keepMounted", type: "boolean", default: false, description: "Mantem paineis inativos montados no DOM.", semanticRole: "behavior", bindable: true },
         { name: "pageControlStyle", type: '"underline" | "pills"', default: "underline", description: "Estilo visual da lista de abas.", semanticRole: "appearance", bindable: true },
         { name: "size", type: '"sm" | "md" | "lg"', default: "md", description: "Escala visual das abas.", semanticRole: "appearance", bindable: true },
+        { name: "fullWidthTabs", type: "boolean", default: false, description: "Distribui as abas em larguras iguais a partir do tablet; no celular elas mantem a largura natural e a lista rola.", semanticRole: "appearance", bindable: true },
+        { name: "mobilePageControl", type: '"scroll" | "select"', default: "scroll", description: "Comportamento no celular: rolagem horizontal das abas ou troca por um select nativo.", semanticRole: "behavior", bindable: true },
         { name: "onActivePageIdChange", type: "(pageId: string, context: object) => void", description: "Callback disparado quando a pagina ativa muda.", semanticRole: "event", bindable: false }
     ],
     states: ["default", "controlled", "keyboard-navigation"],