@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/ControlledTabs.js

@@ -0,0 +1,515 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState, useImperativeHandle, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import { useUiAccess } from "../UI/access/UiAccessContext.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { formatNumber } from "../../helpers/formatHelpers.js";
+import { claimUrlParam, URL_PARAM_PRIORITY, TABS_URL_PARAM, releaseUrlParam, queueUrlParamUpdate } from "../../helpers/urlParamSync.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledButton from "./ControlledButton.js";
+import { Tab, TabsRoot, TabsHeader, TabsBody, TabPanel } from "./ControlledTabsPrimitives.js";
+const EDGE_TOLERANCE = 1;
+const ARROW_ROOM = 40;
+const distanceToReveal = (container, tab) => {
+  const strip = container.getBoundingClientRect();
+  const rect = tab.getBoundingClientRect();
+  const pastStart = rect.left - strip.left - ARROW_ROOM;
+  const pastEnd = rect.right - strip.right + ARROW_ROOM;
+  if (pastEnd > EDGE_TOLERANCE) return Math.min(pastEnd, pastStart);
+  if (pastStart < -EDGE_TOLERANCE && container.scrollLeft > 0) return Math.max(pastStart, -container.scrollLeft);
+  return 0;
+};
+const EditableTabLabel = ({
+  label,
+  count,
+  loading,
+  isVisible = true,
+  canToggleVisibility = true,
+  onRename,
+  onToggleVisibility
+}) => {
+  const { t } = useTranslation("ui");
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(label);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [editing]);
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setDraft(label);
+    setEditing(true);
+  };
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== label) onRename(trimmed);
+    setEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Escape") {
+      setEditing(false);
+      setDraft(label);
+    }
+    e.stopPropagation();
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: commit,
+        onKeyDown: handleKeyDown,
+        style: { width: `${Math.max(draft.length + 2, 6)}ch` },
+        className: "border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "group/tab flex items-center gap-x-1.5 align-bottom", children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    count !== void 0 && (loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 }) : /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle", children: formatNumber(count) })),
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: t("controlledTabs.renameTab"), children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        "aria-label": t("controlledTabs.renameTab"),
+        defaultHtmlButton: true,
+        onClick: handleEditClick,
+        className: "ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis",
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "edit", size: 14 })
+      }
+    ) }),
+    onToggleVisibility && /* @__PURE__ */ jsx(
+      ControlledTooltip,
+      {
+        content: !canToggleVisibility ? t("controlledTabs.mustKeepOneEnabled") : isVisible ? t("controlledTabs.disableTab") : t("controlledTabs.enableTabShort"),
+        children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            "aria-label": isVisible ? t("controlledTabs.disableTab") : t("controlledTabs.enableTabShort"),
+            defaultHtmlButton: true,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (canToggleVisibility) onToggleVisibility();
+            },
+            className: classNames("ml-0.5 flex items-center transition-colors", {
+              ["text-foreground-faint hover:text-warning-emphasis"]: isVisible && canToggleVisibility,
+              ["text-warning-emphasis hover:text-success-emphasis"]: !isVisible,
+              ["cursor-not-allowed text-foreground-faint"]: isVisible && !canToggleVisibility
+            }),
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: isVisible ? "visibility" : "visibility_off", size: 14 })
+          }
+        )
+      }
+    )
+  ] });
+};
+const ControlledTabs = forwardRef(
+  ({
+    initialActiveTab,
+    activeTab: controlledActiveTab,
+    tabs: tabsProp,
+    dataTabs: dataTabsProp,
+    loading = false,
+    disabled = false,
+    handleActiveTabChildren,
+    useRenderValidation = false,
+    onTabChange,
+    beforeTabChange,
+    tabsBodyClassName,
+    tabPanelClassName,
+    rootClassName,
+    tabClassName,
+    headerSlot,
+    actionsSlot,
+    onRenameTab,
+    onToggleTabVisibility,
+    onReorderTab,
+    scrollableHeader = false,
+    stickyHeader = false,
+    syncWithUrl = true
+  }, ref) => {
+    const { t } = useTranslation("ui");
+    const { check } = useUiAccess();
+    const deniedTabValues = useMemo(
+      () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),
+      [tabsProp, check]
+    );
+    const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);
+    const dataTabs = useMemo(
+      () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),
+      [dataTabsProp, deniedTabValues]
+    );
+    const { location, searchParams, setSearchParams } = useUiNavigation();
+    const urlParamOwnerIdRef = useRef({});
+    const scrollRef = useRef(null);
+    const revealedTabRef = useRef(null);
+    const stickySentinelRef = useRef(null);
+    const stickyBarRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const [isStuck, setIsStuck] = useState(false);
+    const dragTabValueRef = useRef(null);
+    const [draggingTabValue, setDraggingTabValue] = useState(null);
+    const [dragOverTabValue, setDragOverTabValue] = useState(null);
+    const resolveInitialActiveTab = () => {
+      const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab) ? initialActiveTab : tabs[0]?.value ?? initialActiveTab;
+      if (!syncWithUrl) return fallbackTab;
+      if (location.state?.ignoreActiveTab === true)
+        return fallbackTab;
+      const urlActiveTab = searchParams.get(TABS_URL_PARAM);
+      const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);
+      return isValidUrlTab ? urlActiveTab : fallbackTab;
+    };
+    const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);
+    const isControlled = controlledActiveTab !== void 0;
+    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+    const handleActiveTab = (tab) => {
+      if (disabled) return;
+      if (beforeTabChange && !beforeTabChange(activeTab, tab)) {
+        if (!isControlled) {
+          setInternalActiveTab(activeTab);
+        }
+        return;
+      }
+      if (handleActiveTabChildren) {
+        handleActiveTabChildren();
+      }
+      if (!isControlled) {
+        setInternalActiveTab(tab);
+      }
+      if (onTabChange) {
+        onTabChange(tab);
+      }
+      if (syncWithUrl) {
+        queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);
+      }
+    };
+    useImperativeHandle(ref, () => ({
+      activeTab,
+      setActiveTab: handleActiveTab
+    }));
+    const handleToggleTabVisibility = (value) => {
+      const visibleCount = tabs.filter((t2) => t2.isVisible !== false).length;
+      const isCurrentlyVisible = tabs.find((t2) => t2.value === value)?.isVisible !== false;
+      if (isCurrentlyVisible && visibleCount <= 1) return;
+      onToggleTabVisibility?.(value);
+    };
+    useEffect(() => {
+      if (!syncWithUrl) return;
+      const ownerId = urlParamOwnerIdRef.current;
+      claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);
+      return () => releaseUrlParam(TABS_URL_PARAM, ownerId);
+    }, [syncWithUrl]);
+    useEffect(() => {
+      if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {
+        queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);
+      }
+      const tabButton = document.querySelector(`li[data-value=${activeTab}]`);
+      if (tabButton) {
+        tabButton.click();
+      }
+    }, [activeTab]);
+    const updateOverflow = useCallback(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      setCanScrollLeft(container.scrollLeft > 4);
+      setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);
+    }, []);
+    useEffect(() => {
+      if (!stickyHeader) return;
+      const sentinel = stickySentinelRef.current;
+      if (!sentinel || typeof IntersectionObserver === "undefined") return;
+      let scrollParent = sentinel.parentElement;
+      while (scrollParent) {
+        const overflowY = getComputedStyle(scrollParent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") break;
+        scrollParent = scrollParent.parentElement;
+      }
+      const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {
+        root: scrollParent ?? null,
+        threshold: 0
+      });
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [stickyHeader]);
+    useEffect(() => {
+      if (!stickyHeader) return;
+      const bar = stickyBarRef.current;
+      if (!bar) return;
+      let scrollParent = bar.parentElement;
+      while (scrollParent) {
+        const overflowY = getComputedStyle(scrollParent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") break;
+        scrollParent = scrollParent.parentElement;
+      }
+      if (!scrollParent) return;
+      const target = scrollParent;
+      let rafId = 0;
+      let lastHeight = -1;
+      const publishHeight = () => {
+        const height = bar.offsetHeight;
+        if (height === lastHeight) return;
+        lastHeight = height;
+        target.style.setProperty("--sticky-tabs-height", `${height}px`);
+      };
+      publishHeight();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(publishHeight);
+      });
+      observer.observe(bar);
+      return () => {
+        cancelAnimationFrame(rafId);
+        observer.disconnect();
+        target.style.removeProperty("--sticky-tabs-height");
+      };
+    }, [stickyHeader]);
+    const revealActiveTab = useCallback(
+      (behavior) => {
+        const container = scrollRef.current;
+        if (!container?.clientWidth) return false;
+        const tab = Array.from(container.querySelectorAll("[data-value]")).find(
+          (node) => node.getAttribute("data-value") === activeTab
+        );
+        if (!tab) return false;
+        const distance = distanceToReveal(container, tab);
+        if (distance !== 0) container.scrollBy({ left: distance, behavior });
+        return true;
+      },
+      [activeTab]
+    );
+    useEffect(() => {
+      if (!scrollableHeader) return;
+      if (revealedTabRef.current !== activeTab) {
+        const behavior = revealedTabRef.current === null ? "auto" : "smooth";
+        if (revealActiveTab(behavior)) revealedTabRef.current = activeTab;
+      }
+      updateOverflow();
+      const onResize = () => {
+        revealActiveTab("auto");
+        updateOverflow();
+      };
+      window.addEventListener("resize", onResize);
+      const scroller = scrollRef.current;
+      const observer = scroller && typeof ResizeObserver !== "undefined" ? new ResizeObserver(onResize) : null;
+      if (scroller && observer) {
+        observer.observe(scroller);
+        if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);
+      }
+      return () => {
+        window.removeEventListener("resize", onResize);
+        observer?.disconnect();
+      };
+    }, [scrollableHeader, tabs, updateOverflow, revealActiveTab, activeTab]);
+    const scrollByStep = (direction) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const containerRect = container.getBoundingClientRect();
+      const nodes = Array.from(container.querySelectorAll("[data-value]"));
+      if (direction > 0) {
+        const nextHidden = nodes.find(
+          (node) => node.getBoundingClientRect().right > containerRect.right - ARROW_ROOM + EDGE_TOLERANCE
+        );
+        if (!nextHidden) return;
+        const distance2 = nextHidden.getBoundingClientRect().left - containerRect.left - ARROW_ROOM;
+        container.scrollBy({ left: Math.max(distance2, ARROW_ROOM), behavior: "smooth" });
+        return;
+      }
+      const previousHidden = [...nodes].reverse().find((node) => node.getBoundingClientRect().left < containerRect.left + ARROW_ROOM - EDGE_TOLERANCE);
+      if (!previousHidden) return;
+      const distance = previousHidden.getBoundingClientRect().right - containerRect.right + ARROW_ROOM;
+      container.scrollBy({
+        left: Math.min(distance, -ARROW_ROOM),
+        behavior: "smooth"
+      });
+    };
+    const tabLabel = (label, count, alertCount) => {
+      const showCount = count !== void 0;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5 align-bottom", children: [
+        label,
+        loading && showCount ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 }) : showCount ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle", children: formatNumber(count) }) : null,
+        Boolean(alertCount) && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1.5 py-px text-[11px] font-semibold leading-none text-warning-emphasis", children: formatNumber(alertCount) })
+      ] });
+    };
+    const handleTabDragEnd = () => {
+      const from = dragTabValueRef.current;
+      const to = dragOverTabValue;
+      if (from && to && from !== to) {
+        onReorderTab?.(from, to);
+      }
+      dragTabValueRef.current = null;
+      setDraggingTabValue(null);
+      setDragOverTabValue(null);
+    };
+    const tabElements = tabs.map((tab, index) => {
+      const isActive = activeTab === tab.value && tab.isVisible !== false;
+      const isInactive = activeTab !== tab.value && tab.isVisible !== false;
+      const isTabDropTarget = Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;
+      const tabDragProps = onReorderTab ? {
+        draggable: true,
+        onDragStart: (event) => {
+          if (event.target.closest("input, [data-tab-trailing-slot]")) {
+            event.preventDefault();
+            return;
+          }
+          event.dataTransfer.effectAllowed = "move";
+          dragTabValueRef.current = tab.value;
+          setDraggingTabValue(tab.value);
+        },
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (dragTabValueRef.current) setDragOverTabValue(tab.value);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragEnd: handleTabDragEnd
+      } : {};
+      return /* @__PURE__ */ jsxs(
+        Tab,
+        {
+          value: tab.value,
+          style: { zIndex: 2 },
+          disabled: loading,
+          onClick: () => handleActiveTab(tab.value),
+          ...tabDragProps,
+          className: classNames(
+            "max-w-fit px-4",
+            tabClassName,
+            // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas
+            // inativas e peso de fonte mais leve ao trocar de aba.
+            stickyHeader && "rounded-md transition-interactive duration-fast",
+            {
+              [stickyHeader ? "font-medium text-brand-emphasis" : "text-brand-emphasis"]: isActive,
+              [stickyHeader ? "font-normal opacity-70 hover:bg-muted-hover hover:opacity-100" : "opacity-70"]: isInactive,
+              ["!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint"]: tab.isVisible === false,
+              ["cursor-grab active:cursor-grabbing"]: Boolean(onReorderTab),
+              ["rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border"]: isTabDropTarget,
+              ["opacity-40"]: draggingTabValue === tab.value
+            }
+          ),
+          children: [
+            onRenameTab && tab.editable !== false ? /* @__PURE__ */ jsx(
+              EditableTabLabel,
+              {
+                label: tab.label,
+                count: tab.count,
+                loading,
+                isVisible: tab.isVisible !== false,
+                canToggleVisibility: tab.isVisible === false || tabs.filter((t2) => t2.isVisible !== false).length > 1,
+                onRename: (newLabel) => onRenameTab(tab.value, newLabel),
+                onToggleVisibility: onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : void 0
+              }
+            ) : tab.tooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: tab.tooltip, className: "max-w-60", children: tabLabel(tab.label, tab.count, tab.alertCount) }) : tabLabel(tab.label, tab.count, tab.alertCount),
+            tab.trailingSlot && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-tab-trailing-slot": true,
+                className: "ml-1 flex items-center",
+                onClick: (event) => event.stopPropagation(),
+                onMouseDown: (event) => event.stopPropagation(),
+                onPointerDown: (event) => event.stopPropagation(),
+                onKeyDown: (event) => event.stopPropagation(),
+                children: tab.trailingSlot
+              }
+            )
+          ]
+        },
+        `controlled-tab-${index}-${tab.value}`
+      );
+    });
+    const scrollArrowClass = (
+      // Centred with margins: a product may scale a pressed button, and that would drop a translate.
+      "absolute inset-y-0 z-10 my-auto bg-surface shadow-xs flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis"
+    );
+    return /* @__PURE__ */ jsxs(TabsRoot, { value: activeTab, className: classNames("!overflow-visible", rootClassName), children: [
+      stickyHeader && /* @__PURE__ */ jsx("div", { ref: stickySentinelRef, className: "h-px", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stickyBarRef,
+          className: classNames(
+            "flex shrink-0 items-center",
+            // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll
+            // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca
+            // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.
+            scrollableHeader ? "flex-nowrap gap-x-3" : actionsSlot ? "flex-wrap gap-x-3 gap-y-2" : "gap-1",
+            // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que
+            // rola por baixo e sombra sutil só depois que a barra encosta no topo.
+            stickyHeader && "sticky top-0 z-20 bg-surface transition-shadow duration-fast",
+            stickyHeader && isStuck && "shadow-elevation1",
+            disabled && "pointer-events-none select-none opacity-50"
+          ),
+          children: [
+            headerSlot && /* @__PURE__ */ jsx(Fragment, { children: headerSlot }),
+            scrollableHeader ? /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 items-center border-b border-border-subtle", children: [
+              canScrollLeft && /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  "aria-label": t("controlledTabs.scrollLeft"),
+                  defaultHtmlButton: true,
+                  onClick: () => scrollByStep(-1),
+                  className: classNames(scrollArrowClass, "left-0"),
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_left", size: 20 })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: updateOverflow, className: "scrollbar-hide min-w-0 flex-1 overflow-x-auto", children: /* @__PURE__ */ jsx(TabsHeader, { className: "flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0", children: tabElements }) }),
+              canScrollRight && /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  "aria-label": t("controlledTabs.scrollRight"),
+                  defaultHtmlButton: true,
+                  onClick: () => scrollByStep(1),
+                  className: classNames(scrollArrowClass, "right-0"),
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 20 })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(TabsHeader, { className: "flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0", children: tabElements }),
+            actionsSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: actionsSlot })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TabsBody, { className: tabsBodyClassName, children: dataTabs.map((tabPanel) => {
+        const isTabVisible = tabs.find((t2) => t2.value === tabPanel.key)?.isVisible !== false;
+        return /* @__PURE__ */ jsx(TabPanel, { value: tabPanel.key, className: classNames("size-full", tabPanelClassName), children: /* @__PURE__ */ jsxs("div", { className: classNames("relative size-full", { ["pointer-events-none"]: !isTabVisible }), children: [
+          useRenderValidation ? activeTab === tabPanel.key && /* @__PURE__ */ jsx("div", { className: "size-full animate-fade-in transition-interactive duration-slow ease-standard", children: tabPanel.element }) : tabPanel.element,
+          !isTabVisible && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil", children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { icon: "visibility_off", size: 32, className: "text-foreground-faint" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground-subtle", children: t("controlledTabs.tabDisabled") }),
+            onToggleTabVisibility && /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                size: "sm",
+                variant: "outlined",
+                className: "pointer-events-auto mt-1 flex items-center gap-x-1",
+                onClick: () => onToggleTabVisibility(tabPanel.key),
+                children: [
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "visibility", size: 16 }),
+                  t("controlledTabs.enableTab")
+                ]
+              }
+            )
+          ] })
+        ] }) }, tabPanel.key);
+      }) })
+    ] });
+  }
+);
+export {
+  ControlledTabs as default
+};
+//# sourceMappingURL=ControlledTabs.js.map

package/dist/components/Form/ControlledTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTabs.js","sources":["../../../src/components/Form/ControlledTabs.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { TUiCapability, useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport {\n  claimUrlParam,\n  queueUrlParamUpdate,\n  releaseUrlParam,\n  TABS_URL_PARAM,\n  URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport { Tab, TabPanel, TabsBody, TabsHeader, TabsRoot } from './ControlledTabsPrimitives';\n\nconst EDGE_TOLERANCE = 1;\n// The arrows lie over the strip: a tab under one is not in view, and landing there would hide it.\nconst ARROW_ROOM = 40;\n\n/** How far the strip has to move to show a tab clear of both arrows; 0 when it already is. */\nconst distanceToReveal = (container: HTMLElement, tab: HTMLElement): number => {\n  const strip = container.getBoundingClientRect();\n  const rect = tab.getBoundingClientRect();\n  const pastStart = rect.left - strip.left - ARROW_ROOM;\n  const pastEnd = rect.right - strip.right + ARROW_ROOM;\n  if (pastEnd > EDGE_TOLERANCE) return Math.min(pastEnd, pastStart);\n  if (pastStart < -EDGE_TOLERANCE && container.scrollLeft > 0) return Math.max(pastStart, -container.scrollLeft);\n  return 0;\n};\n\ninterface IEditableTabLabelProps {\n  label: string;\n  count?: number;\n  loading?: boolean;\n  isVisible?: boolean;\n  canToggleVisibility?: boolean;\n  onRename: (newLabel: string) => void;\n  onToggleVisibility?: () => void;\n}\n\nconst EditableTabLabel = ({\n  label,\n  count,\n  loading,\n  isVisible = true,\n  canToggleVisibility = true,\n  onRename,\n  onToggleVisibility,\n}: IEditableTabLabelProps) => {\n  const { t } = useTranslation('ui');\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(label);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (editing) {\n      inputRef.current?.focus();\n      inputRef.current?.select();\n    }\n  }, [editing]);\n\n  const handleEditClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setDraft(label);\n    setEditing(true);\n  };\n\n  const commit = () => {\n    const trimmed = draft.trim();\n    if (trimmed && trimmed !== label) onRename(trimmed);\n    setEditing(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      commit();\n    }\n    if (e.key === 'Escape') {\n      setEditing(false);\n      setDraft(label);\n    }\n    e.stopPropagation();\n  };\n\n  if (editing) {\n    return (\n      <div className=\"flex items-center\" onClick={(e) => e.stopPropagation()}>\n        <input\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => setDraft(e.target.value)}\n          onBlur={commit}\n          onKeyDown={handleKeyDown}\n          style={{ width: `${Math.max(draft.length + 2, 6)}ch` }}\n          className=\"border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"group/tab flex items-center gap-x-1.5 align-bottom\">\n      <span>{label}</span>\n      {count !== undefined &&\n        (loading ? (\n          <LoadingSpinner size={3} />\n        ) : (\n          <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n            {formatNumber(count)}\n          </span>\n        ))}\n      <ControlledTooltip content={t('controlledTabs.renameTab')}>\n        <ControlledButton\n          aria-label={t('controlledTabs.renameTab')}\n          defaultHtmlButton\n          onClick={handleEditClick}\n          className=\"ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis\"\n          tabIndex={-1}\n        >\n          <MaterialSymbol icon=\"edit\" size={14} />\n        </ControlledButton>\n      </ControlledTooltip>\n      {onToggleVisibility && (\n        <ControlledTooltip\n          content={\n            !canToggleVisibility\n              ? t('controlledTabs.mustKeepOneEnabled')\n              : isVisible\n                ? t('controlledTabs.disableTab')\n                : t('controlledTabs.enableTabShort')\n          }\n        >\n          <ControlledButton\n            aria-label={isVisible ? t('controlledTabs.disableTab') : t('controlledTabs.enableTabShort')}\n            defaultHtmlButton\n            onClick={(e) => {\n              e.stopPropagation();\n              if (canToggleVisibility) onToggleVisibility();\n            }}\n            className={classNames('ml-0.5 flex items-center transition-colors', {\n              ['text-foreground-faint hover:text-warning-emphasis']: isVisible && canToggleVisibility,\n              ['text-warning-emphasis hover:text-success-emphasis']: !isVisible,\n              ['cursor-not-allowed text-foreground-faint']: isVisible && !canToggleVisibility,\n            })}\n            tabIndex={-1}\n          >\n            <MaterialSymbol icon={isVisible ? 'visibility' : 'visibility_off'} size={14} />\n          </ControlledButton>\n        </ControlledTooltip>\n      )}\n    </div>\n  );\n};\n\nexport interface ITabInfo {\n  label: string;\n  value: string;\n  /** Missing capability removes the tab and never mounts its panel, so no protected request runs. */\n  capability?: TUiCapability | Array<TUiCapability>;\n  count?: number;\n  /** Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). */\n  alertCount?: number;\n  tooltip?: string;\n  status?: number | string;\n  isVisible?: boolean;\n  /** When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). */\n  editable?: boolean;\n  /**\n   * Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses\n   * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.\n   */\n  trailingSlot?: ReactNode;\n}\n\nexport interface IDataTab {\n  key: string;\n  element: ReactNode;\n}\n\ninterface IControlledTabsProps {\n  initialActiveTab: string;\n  activeTab?: string;\n  tabs: Array<ITabInfo>;\n  dataTabs: Array<IDataTab>;\n  loading?: boolean;\n  /** Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. */\n  disabled?: boolean;\n  handleActiveTabChildren?: () => void;\n  useRenderValidation?: boolean;\n  onTabChange?: (tab: string) => void;\n  beforeTabChange?: (from: string, to: string) => boolean;\n  tabsBodyClassName?: string;\n  tabPanelClassName?: string;\n\n  rootClassName?: string;\n  /** Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). */\n  tabClassName?: string;\n  headerSlot?: ReactNode;\n  /** Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). */\n  actionsSlot?: ReactNode;\n  onRenameTab?: (value: string, newLabel: string) => void;\n  onToggleTabVisibility?: (value: string) => void;\n  /**\n   * Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos\n   * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;\n   * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).\n   */\n  onReorderTab?: (fromValue: string, toValue: string) => void;\n  /**\n   * Renders the tab header as a single horizontally-scrollable line (browser-tab style)\n   * with navigation arrows and a \"+N\" overflow menu, instead of wrapping onto several lines.\n   */\n  scrollableHeader?: boolean;\n  /**\n   * Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com\n   * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais\n   * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra\n   * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).\n   */\n  stickyHeader?: boolean;\n  /**\n   * Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e\n   * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/\n   * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir\n   * com abas de nível de página que já usam `activeTab`.\n   */\n  syncWithUrl?: boolean;\n}\n\nconst ControlledTabs = forwardRef<unknown, IControlledTabsProps>(\n  (\n    {\n      initialActiveTab,\n      activeTab: controlledActiveTab,\n      tabs: tabsProp,\n      dataTabs: dataTabsProp,\n      loading = false,\n      disabled = false,\n      handleActiveTabChildren,\n      useRenderValidation = false,\n      onTabChange,\n      beforeTabChange,\n      tabsBodyClassName,\n      tabPanelClassName,\n      rootClassName,\n      tabClassName,\n      headerSlot,\n      actionsSlot,\n      onRenameTab,\n      onToggleTabVisibility,\n      onReorderTab,\n      scrollableHeader = false,\n      stickyHeader = false,\n      syncWithUrl = true,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const { check } = useUiAccess();\n\n    const deniedTabValues = useMemo(\n      () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),\n      [tabsProp, check],\n    );\n\n    const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);\n\n    const dataTabs = useMemo(\n      () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),\n      [dataTabsProp, deniedTabValues],\n    );\n\n    const { location, searchParams, setSearchParams } = useUiNavigation();\n    const urlParamOwnerIdRef = useRef<object>({});\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const revealedTabRef = useRef<string | null>(null);\n    const stickySentinelRef = useRef<HTMLDivElement>(null);\n    const stickyBarRef = useRef<HTMLDivElement>(null);\n    const [canScrollLeft, setCanScrollLeft] = useState(false);\n    const [canScrollRight, setCanScrollRight] = useState(false);\n    // Abas que cruzam uma borda da área rolável (visíveis só pela metade). Ficam invisíveis para\n    // que na borda só apareça aba inteira ou espaço vazio, nunca um pedaço de texto cortado.\n    // Barra sticky: detecta quando a barra \"grudou\" (usuário já rolou) para só então mostrar a sombra.\n    const [isStuck, setIsStuck] = useState(false);\n    // Drag nativo das abas (opt-in via onReorderTab), mesmo molde dos campos do construtor.\n    const dragTabValueRef = useRef<string | null>(null);\n    const [draggingTabValue, setDraggingTabValue] = useState<string | null>(null);\n    const [dragOverTabValue, setDragOverTabValue] = useState<string | null>(null);\n\n    const resolveInitialActiveTab = () => {\n      const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab)\n        ? initialActiveTab\n        : (tabs[0]?.value ?? initialActiveTab);\n\n      if (!syncWithUrl) return fallbackTab;\n      if ((location.state as { ignoreActiveTab?: boolean } | null | undefined)?.ignoreActiveTab === true)\n        return fallbackTab;\n      const urlActiveTab = searchParams.get(TABS_URL_PARAM);\n      const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);\n      return isValidUrlTab ? urlActiveTab : fallbackTab;\n    };\n\n    const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);\n    const isControlled = controlledActiveTab !== undefined;\n    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n    const handleActiveTab = (tab: string) => {\n      if (disabled) return;\n      if (beforeTabChange && !beforeTabChange(activeTab, tab)) {\n        if (!isControlled) {\n          setInternalActiveTab(activeTab);\n        }\n        return;\n      }\n      if (handleActiveTabChildren) {\n        handleActiveTabChildren();\n      }\n      if (!isControlled) {\n        setInternalActiveTab(tab);\n      }\n      if (onTabChange) {\n        onTabChange(tab);\n      }\n\n      if (syncWithUrl) {\n        queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);\n      }\n    };\n\n    useImperativeHandle(ref, () => ({\n      activeTab,\n      setActiveTab: handleActiveTab,\n    }));\n\n    const handleToggleTabVisibility = (value: string) => {\n      const visibleCount = tabs.filter((t) => t.isVisible !== false).length;\n      const isCurrentlyVisible = tabs.find((t) => t.value === value)?.isVisible !== false;\n      if (isCurrentlyVisible && visibleCount <= 1) return;\n      onToggleTabVisibility?.(value);\n    };\n\n    // As abas são o topo da hierarquia de parâmetros: assumem `activeTab` mesmo montando depois de\n    // um controle que já o tivesse reivindicado, e o liberam ao desmontar.\n    useEffect(() => {\n      if (!syncWithUrl) return;\n\n      const ownerId = urlParamOwnerIdRef.current;\n      claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);\n\n      return () => releaseUrlParam(TABS_URL_PARAM, ownerId);\n    }, [syncWithUrl]);\n\n    useEffect(() => {\n      if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {\n        queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);\n      }\n      const tabButton = document.querySelector(`li[data-value=${activeTab}]`) as HTMLElement | null;\n      if (tabButton) {\n        tabButton.click();\n      }\n    }, [activeTab]);\n\n    const updateOverflow = useCallback(() => {\n      const container = scrollRef.current;\n      if (!container) return;\n\n      setCanScrollLeft(container.scrollLeft > 4);\n      setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);\n    }, []);\n\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const sentinel = stickySentinelRef.current;\n      if (!sentinel || typeof IntersectionObserver === 'undefined') return;\n      // Descobre o ancestral rolável para observar o sentinela em relação a ele. Quando o sentinela\n      // (logo acima da barra) sai do topo do container, a barra grudou e ligamos a sombra.\n      let scrollParent = sentinel.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {\n        root: scrollParent ?? null,\n        threshold: 0,\n      });\n      observer.observe(sentinel);\n      return () => observer.disconnect();\n    }, [stickyHeader]);\n\n    // Publica a altura da barra fixa como `--sticky-tabs-height` no container rolável, para\n    // que conteúdo sticky mais abaixo (ex.: cabeçalho de material da ficha) possa grudar logo\n    // abaixo da barra em vez de ficar escondido atrás dela.\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const bar = stickyBarRef.current;\n      if (!bar) return;\n      let scrollParent = bar.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      if (!scrollParent) return;\n      const target = scrollParent;\n      let rafId = 0;\n      let lastHeight = -1;\n      // Escreve a variável só quando a altura muda de fato, e fora do ciclo de entrega do\n      // ResizeObserver (via rAF): escrever um valor que afeta layout dentro do callback dispara\n      // \"ResizeObserver loop completed with undelivered notifications\".\n      const publishHeight = () => {\n        const height = bar.offsetHeight;\n        if (height === lastHeight) return;\n        lastHeight = height;\n        target.style.setProperty('--sticky-tabs-height', `${height}px`);\n      };\n      publishHeight();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(publishHeight);\n      });\n      observer.observe(bar);\n      return () => {\n        cancelAnimationFrame(rafId);\n        observer.disconnect();\n        target.style.removeProperty('--sticky-tabs-height');\n      };\n    }, [stickyHeader]);\n\n    /** False while the strip or the tab is not laid out yet, so the caller tries again later. */\n    const revealActiveTab = useCallback(\n      (behavior: ScrollBehavior): boolean => {\n        const container = scrollRef.current;\n        if (!container?.clientWidth) return false;\n        const tab = Array.from(container.querySelectorAll<HTMLElement>('[data-value]')).find(\n          (node) => node.getAttribute('data-value') === activeTab,\n        );\n        if (!tab) return false;\n        const distance = distanceToReveal(container, tab);\n        if (distance !== 0) container.scrollBy({ left: distance, behavior });\n        return true;\n      },\n      [activeTab],\n    );\n\n    useEffect(() => {\n      if (!scrollableHeader) return;\n      // Once per tab, so a new render never undoes the person's own scrolling. A page opened on a far\n      // tab simply starts there; after that the strip travels, as it does with the arrows.\n      if (revealedTabRef.current !== activeTab) {\n        const behavior = revealedTabRef.current === null ? 'auto' : 'smooth';\n        if (revealActiveTab(behavior)) revealedTabRef.current = activeTab;\n      }\n      updateOverflow();\n      const onResize = () => {\n        revealActiveTab('auto');\n        updateOverflow();\n      };\n      window.addEventListener('resize', onResize);\n\n      // The strip also changes size with no window resize: a side panel opening, the web font\n      // arriving, the arrows themselves appearing.\n      const scroller = scrollRef.current;\n      const observer = scroller && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n      if (scroller && observer) {\n        observer.observe(scroller);\n        if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);\n      }\n\n      return () => {\n        window.removeEventListener('resize', onResize);\n        observer?.disconnect();\n      };\n    }, [scrollableHeader, tabs, updateOverflow, revealActiveTab, activeTab]);\n\n    const scrollByStep = (direction: number) => {\n      const container = scrollRef.current;\n      if (!container) return;\n      const containerRect = container.getBoundingClientRect();\n      const nodes = Array.from(container.querySelectorAll('[data-value]')) as Array<HTMLElement>;\n\n      if (direction > 0) {\n        const nextHidden = nodes.find(\n          (node) => node.getBoundingClientRect().right > containerRect.right - ARROW_ROOM + EDGE_TOLERANCE,\n        );\n        if (!nextHidden) return;\n        const distance = nextHidden.getBoundingClientRect().left - containerRect.left - ARROW_ROOM;\n        container.scrollBy({ left: Math.max(distance, ARROW_ROOM), behavior: 'smooth' });\n        return;\n      }\n\n      const previousHidden = [...nodes]\n        .reverse()\n        .find((node) => node.getBoundingClientRect().left < containerRect.left + ARROW_ROOM - EDGE_TOLERANCE);\n      if (!previousHidden) return;\n      const distance = previousHidden.getBoundingClientRect().right - containerRect.right + ARROW_ROOM;\n      container.scrollBy({\n        left: Math.min(distance, -ARROW_ROOM),\n        behavior: 'smooth',\n      });\n    };\n\n    const tabLabel = (label: string, count?: number, alertCount?: number) => {\n      const showCount = count !== undefined;\n      return (\n        <div className=\"flex items-center gap-x-1.5 align-bottom\">\n          {label}\n          {loading && showCount ? (\n            <LoadingSpinner size={3} />\n          ) : showCount ? (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n              {formatNumber(count)}\n            </span>\n          ) : null}\n          {Boolean(alertCount) && (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1.5 py-px text-[11px] font-semibold leading-none text-warning-emphasis\">\n              {formatNumber(alertCount as number)}\n            </span>\n          )}\n        </div>\n      );\n    };\n\n    const handleTabDragEnd = () => {\n      const from = dragTabValueRef.current;\n      const to = dragOverTabValue;\n\n      if (from && to && from !== to) {\n        onReorderTab?.(from, to);\n      }\n\n      dragTabValueRef.current = null;\n      setDraggingTabValue(null);\n      setDragOverTabValue(null);\n    };\n\n    const tabElements = tabs.map((tab, index) => {\n      const isActive = activeTab === tab.value && tab.isVisible !== false;\n      const isInactive = activeTab !== tab.value && tab.isVisible !== false;\n      const isTabDropTarget =\n        Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;\n      const tabDragProps = onReorderTab\n        ? {\n            draggable: true,\n            onDragStart: (event: React.DragEvent) => {\n              // Arrastar a partir do input de renomear deve selecionar texto, não mover a aba; e a\n              // partir do slot de ações (menu da aba) não deve mover nada.\n              if ((event.target as HTMLElement).closest('input, [data-tab-trailing-slot]')) {\n                event.preventDefault();\n                return;\n              }\n              event.dataTransfer.effectAllowed = 'move';\n              dragTabValueRef.current = tab.value;\n              setDraggingTabValue(tab.value);\n            },\n            onDragEnter: (event: React.DragEvent) => {\n              event.preventDefault();\n              if (dragTabValueRef.current) setDragOverTabValue(tab.value);\n            },\n            onDragOver: (event: React.DragEvent) => event.preventDefault(),\n            onDragEnd: handleTabDragEnd,\n          }\n        : {};\n      return (\n        <Tab\n          key={`controlled-tab-${index}-${tab.value}`}\n          value={tab.value}\n          style={{ zIndex: 2 }}\n          disabled={loading}\n          onClick={() => handleActiveTab(tab.value)}\n          {...tabDragProps}\n          className={classNames(\n            'max-w-fit px-4',\n            tabClassName,\n            // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas\n            // inativas e peso de fonte mais leve ao trocar de aba.\n            stickyHeader && 'rounded-md transition-interactive duration-fast',\n            {\n              [stickyHeader ? 'font-medium text-brand-emphasis' : 'text-brand-emphasis']: isActive,\n              [stickyHeader ? 'font-normal opacity-70 hover:bg-muted-hover hover:opacity-100' : 'opacity-70']:\n                isInactive,\n              ['!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint']: tab.isVisible === false,\n              ['cursor-grab active:cursor-grabbing']: Boolean(onReorderTab),\n              ['rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border']: isTabDropTarget,\n              ['opacity-40']: draggingTabValue === tab.value,\n            },\n          )}\n        >\n          {onRenameTab && tab.editable !== false ? (\n            <EditableTabLabel\n              label={tab.label}\n              count={tab.count}\n              loading={loading}\n              isVisible={tab.isVisible !== false}\n              canToggleVisibility={tab.isVisible === false || tabs.filter((t) => t.isVisible !== false).length > 1}\n              onRename={(newLabel) => onRenameTab(tab.value, newLabel)}\n              onToggleVisibility={onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : undefined}\n            />\n          ) : tab.tooltip ? (\n            <ControlledTooltip content={tab.tooltip} className=\"max-w-60\">\n              {tabLabel(tab.label, tab.count, tab.alertCount)}\n            </ControlledTooltip>\n          ) : (\n            tabLabel(tab.label, tab.count, tab.alertCount)\n          )}\n          {tab.trailingSlot && (\n            <span\n              data-tab-trailing-slot\n              className=\"ml-1 flex items-center\"\n              onClick={(event) => event.stopPropagation()}\n              onMouseDown={(event) => event.stopPropagation()}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              {tab.trailingSlot}\n            </span>\n          )}\n        </Tab>\n      );\n    });\n\n    // Sublinhado fino (2px). Na barra sticky mantemos a animação de deslize nativa (transform) com\n    // transição suave de ~120ms; nas demais telas o indicador segue estático como antes.\n\n    // Each arrow lies over the strip and only exists while there is something to reach on its side:\n    // the strip keeps its width either way, so the first tab lines up with the content at the start\n    // and the tabs never jump under the pointer.\n    const scrollArrowClass =\n      // Centred with margins: a product may scale a pressed button, and that would drop a translate.\n      'absolute inset-y-0 z-10 my-auto bg-surface shadow-xs ' +\n      'flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis';\n\n    return (\n      <TabsRoot value={activeTab} className={classNames('!overflow-visible', rootClassName)}>\n        {/* Sentinela de 1px: quando sai do topo do container rolável a barra já grudou e acende a sombra. */}\n        {stickyHeader && <div ref={stickySentinelRef} className=\"h-px\" aria-hidden />}\n        <div\n          ref={stickyBarRef}\n          className={classNames(\n            'flex shrink-0 items-center',\n            // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll\n            // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca\n            // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.\n            scrollableHeader ? 'flex-nowrap gap-x-3' : actionsSlot ? 'flex-wrap gap-x-3 gap-y-2' : 'gap-1',\n            // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que\n            // rola por baixo e sombra sutil só depois que a barra encosta no topo.\n            stickyHeader && 'sticky top-0 z-20 bg-surface transition-shadow duration-fast',\n            stickyHeader && isStuck && 'shadow-elevation1',\n            disabled && 'pointer-events-none select-none opacity-50',\n          )}\n        >\n          {headerSlot && <>{headerSlot}</>}\n          {scrollableHeader ? (\n            <div className=\"relative flex min-w-0 flex-1 items-center border-b border-border-subtle\">\n              {canScrollLeft && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollLeft')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(-1)}\n                  className={classNames(scrollArrowClass, 'left-0')}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_left\" size={20} />\n                </ControlledButton>\n              )}\n\n              <div ref={scrollRef} onScroll={updateOverflow} className=\"scrollbar-hide min-w-0 flex-1 overflow-x-auto\">\n                <TabsHeader className=\"flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n                  {tabElements}\n                </TabsHeader>\n              </div>\n\n              {canScrollRight && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollRight')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(1)}\n                  className={classNames(scrollArrowClass, 'right-0')}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_right\" size={20} />\n                </ControlledButton>\n              )}\n            </div>\n          ) : (\n            <TabsHeader className=\"flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n              {tabElements}\n            </TabsHeader>\n          )}\n          {actionsSlot && <div className=\"ml-auto flex shrink-0 items-center\">{actionsSlot}</div>}\n        </div>\n\n        <TabsBody className={tabsBodyClassName}>\n          {dataTabs.map((tabPanel) => {\n            const isTabVisible = tabs.find((t) => t.value === tabPanel.key)?.isVisible !== false;\n            return (\n              <TabPanel key={tabPanel.key} value={tabPanel.key} className={classNames('size-full', tabPanelClassName)}>\n                <div className={classNames('relative size-full', { ['pointer-events-none']: !isTabVisible })}>\n                  {useRenderValidation\n                    ? activeTab === tabPanel.key && (\n                        <div className=\"size-full animate-fade-in transition-interactive duration-slow ease-standard\">\n                          {tabPanel.element}\n                        </div>\n                      )\n                    : tabPanel.element}\n                  {!isTabVisible && (\n                    <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil\">\n                      <MaterialSymbol icon=\"visibility_off\" size={32} className=\"text-foreground-faint\" />\n                      <span className=\"text-sm font-medium text-foreground-subtle\">\n                        {t('controlledTabs.tabDisabled')}\n                      </span>\n                      {onToggleTabVisibility && (\n                        <ControlledButton\n                          size=\"sm\"\n                          variant=\"outlined\"\n                          className=\"pointer-events-auto mt-1 flex items-center gap-x-1\"\n                          onClick={() => onToggleTabVisibility(tabPanel.key)}\n                        >\n                          <MaterialSymbol icon=\"visibility\" size={16} />\n                          {t('controlledTabs.enableTab')}\n                        </ControlledButton>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </TabPanel>\n            );\n          })}\n        </TabsBody>\n      </TabsRoot>\n    );\n  },\n);\n\nexport default ControlledTabs;\n"],"names":["t","distance"],"mappings":"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"}

package/dist/components/Form/ControlledTabsPrimitives.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+interface ITabsRootProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsRoot: React.FC<ITabsRootProps>;
+interface ITabsHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsHeader: React.FC<ITabsHeaderProps>;
+interface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Rendered as a div with role="tab", not a native button: a tab can carry its own controls
+ * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid
+ * HTML that silently breaks the inner controls.
+ *
+ * The active underline lives on the tab itself rather than on a separate sliding indicator,
+ * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.
+ */
+export declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
+interface ITabsBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsBody: React.FC<ITabsBodyProps>;
+interface ITabPanelProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus
+ * and scroll position of every tab the user is not looking at.
+ */
+export declare const TabPanel: React.FC<ITabPanelProps>;
+export {};