npm - @umodeapporg/ui - Versions diffs - 0.9.3 → 0.11.0 - Mend

@umodeapporg/ui 0.9.3 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/components/Form/ControlledTabs.d.ts CHANGED Viewed

@@ -13,6 +13,11 @@ export interface ITabInfo {
     isVisible?: boolean;
     /** When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). */
     editable?: boolean;
+    /**
+     * Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses
+     * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.
+     */
+    trailingSlot?: ReactNode;
 }
 export interface IDataTab {
     key: string;

package/dist/components/Form/ControlledTabs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+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";
@@ -333,7 +333,7 @@ const ControlledTabs = forwardRef(
       const tabDragProps = onReorderTab ? {
         draggable: true,
         onDragStart: (event) => {
-          if (event.target.closest("input")) {
+          if (event.target.closest("input, [data-tab-trailing-slot]")) {
             event.preventDefault();
             return;
           }
@@ -348,7 +348,7 @@ const ControlledTabs = forwardRef(
         onDragOver: (event) => event.preventDefault(),
         onDragEnd: handleTabDragEnd
       } : {};
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
         Tab,
         {
           value: tab.value,
@@ -372,18 +372,32 @@ const ControlledTabs = forwardRef(
               ["invisible"]: clippedTabValues.includes(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)
+          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}`
       );

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

	@@ -1 +1 @@
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\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 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 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\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 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 const [clippedTabValues, setClippedTabValues] = useState<Array<string>>([]);\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 const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const clipped: Array<string> = [];\n container.querySelectorAll('[data-value]').forEach((node) => {\n const element = node as HTMLElement;\n const value = element.getAttribute('data-value');\n if (!value \|\| value === activeTab) return;\n const rect = element.getBoundingClientRect();\n const crossesLeftEdge =\n rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;\n const crossesRightEdge =\n rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;\n if (crossesLeftEdge \|\| crossesRightEdge) clipped.push(value);\n });\n setClippedTabValues((prev) =>\n prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped,\n );\n }, [activeTab]);\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 useEffect(() => {\n if (!scrollableHeader) return;\n updateOverflow();\n const onResize = () => updateOverflow();\n window.addEventListener('resize', onResize);\n return () => window.removeEventListener('resize', onResize);\n }, [scrollableHeader, tabs, updateOverflow]);\n\n const scrollByStep = (direction: number) => {\n const container = scrollRef.current;\n if (!container) return;\n const EDGE_TOLERANCE = 1;\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 + EDGE_TOLERANCE,\n );\n if (!nextHidden) return;\n container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: 'smooth' });\n return;\n }\n\n const previousHidden = [...nodes]\n .reverse()\n .find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);\n if (!previousHidden) return;\n container.scrollBy({\n left: previousHidden.getBoundingClientRect().right - containerRect.right,\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.\n if ((event.target as HTMLElement).closest('input')) {\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 ['invisible']: clippedTabValues.includes(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>\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 const scrollArrowClass =\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=\"flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle\">\n <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(-1)}\n disabled={!canScrollLeft}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollLeft })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_left\" size={20} />\n </ControlledButton>\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 <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(1)}\n disabled={!canScrollRight}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollRight })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_right\" size={20} />\n </ControlledButton>\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"],"mappings":"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"}
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\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 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 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 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 const [clippedTabValues, setClippedTabValues] = useState<Array<string>>([]);\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 const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const clipped: Array<string> = [];\n container.querySelectorAll('[data-value]').forEach((node) => {\n const element = node as HTMLElement;\n const value = element.getAttribute('data-value');\n if (!value \|\| value === activeTab) return;\n const rect = element.getBoundingClientRect();\n const crossesLeftEdge =\n rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;\n const crossesRightEdge =\n rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;\n if (crossesLeftEdge \|\| crossesRightEdge) clipped.push(value);\n });\n setClippedTabValues((prev) =>\n prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped,\n );\n }, [activeTab]);\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 useEffect(() => {\n if (!scrollableHeader) return;\n updateOverflow();\n const onResize = () => updateOverflow();\n window.addEventListener('resize', onResize);\n return () => window.removeEventListener('resize', onResize);\n }, [scrollableHeader, tabs, updateOverflow]);\n\n const scrollByStep = (direction: number) => {\n const container = scrollRef.current;\n if (!container) return;\n const EDGE_TOLERANCE = 1;\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 + EDGE_TOLERANCE,\n );\n if (!nextHidden) return;\n container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: 'smooth' });\n return;\n }\n\n const previousHidden = [...nodes]\n .reverse()\n .find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);\n if (!previousHidden) return;\n container.scrollBy({\n left: previousHidden.getBoundingClientRect().right - containerRect.right,\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 ['invisible']: clippedTabValues.includes(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 const scrollArrowClass =\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=\"flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle\">\n <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(-1)}\n disabled={!canScrollLeft}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollLeft })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_left\" size={20} />\n </ControlledButton>\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 <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(1)}\n disabled={!canScrollRight}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollRight })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_right\" size={20} />\n </ControlledButton>\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"],"mappings":"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"}

package/dist/components/UI/DataTable/DataTable.js CHANGED Viewed

@@ -50,6 +50,7 @@ import { useColumnOrder, useDetailColumnOrder } from "./useColumnOrder.js";
 import { useColumnSizing } from "./useColumnSizing.js";
 import { useColumnVisibility, useDetailColumnVisibility } from "./useColumnVisibility.js";
 import { useDataTableInstance } from "./useDataTableInstance.js";
+import { useDataTableUndoHistory } from "./useDataTableUndoHistory.js";
 const DataTable = ({
   config: configProp,
   rows,
@@ -92,8 +93,26 @@ const DataTable = ({
   const dense = !spacious && (isFit || denseProp);
   const editingRows = configProp.editing?.rows;
   const showAddRow = !!editingRows?.canAdd && !!editingRows.onAddRow;
+  const hostFillCells = configProp.spreadsheet ? configProp.spreadsheet.fill?.onFillCells : void 0;
+  const isUndoEnabled = !!configProp.editing?.onCellChange && configProp.editing.undo !== false;
+  const { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut } = useDataTableUndoHistory({
+    enabled: isUndoEnabled,
+    rows,
+    columns: configProp.columns,
+    onCellChange: configProp.editing?.onCellChange,
+    onFillCells: hostFillCells
+  });
+  const configWithUndo = useMemo(() => {
+    if (!isUndoEnabled || !configProp.editing) return configProp;
+    const spreadsheetConfig = configProp.spreadsheet;
+    return {
+      ...configProp,
+      editing: { ...configProp.editing, onCellChange: recordedOnCellChange },
+      spreadsheet: spreadsheetConfig && spreadsheetConfig.fill?.onFillCells ? { ...spreadsheetConfig, fill: { ...spreadsheetConfig.fill, onFillCells: recordedOnFillCells } } : spreadsheetConfig
+    };
+  }, [configProp, isUndoEnabled, recordedOnCellChange, recordedOnFillCells]);
   const config = useMemo(() => {
-    if (!editingRows?.onRemoveRow) return configProp;
+    if (!editingRows?.onRemoveRow) return configWithUndo;
     const removeColumn = {
       id: DATA_TABLE_REMOVE_COLUMN_ID,
       header: "",
@@ -111,8 +130,8 @@ const DataTable = ({
         }
       ]
     };
-    return { ...configProp, columns: [...configProp.columns, removeColumn] };
-  }, [configProp, editingRows, t]);
+    return { ...configWithUndo, columns: [...configWithUndo.columns, removeColumn] };
+  }, [configWithUndo, editingRows, t]);
   const { columnVisibility, onColumnVisibilityChange } = useColumnVisibility(config);
   const { columnOrder, onColumnOrderChange, resetColumnOrder } = useColumnOrder(config);
   const { columnSizing, onColumnSizingChange, resetColumnSizing } = useColumnSizing(config);
@@ -263,6 +282,16 @@ const DataTable = ({
     spreadsheet,
     onCellChange: config.editing?.onCellChange
   });
+  const handleTableKeyDown = useCallback(
+    (event) => {
+      const restoredCell = handleUndoShortcut(event);
+      if (!restoredCell || !gridStore || !gridStore.getState().isEditMode) return;
+      const restoredGridRow = visibleRowsRef.current.find((candidate) => candidate.original.id === restoredCell.row.id);
+      if (!restoredGridRow) return;
+      gridStore.getState().setActiveCell({ rowId: restoredGridRow.id, columnId: restoredCell.columnId });
+    },
+    [handleUndoShortcut, gridStore]
+  );
   const handleEditModeToggle = useCallback(() => {
     const store = gridStore;
     if (!store) return;
@@ -453,89 +482,96 @@ const DataTable = ({
       onClearAll: () => onFilterValuesChange(buildEmptyFilterValues(config.filters?.fields ?? []))
     }
   ) : null;
-  const content = /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col gap-4", children: [
-    activeFiltersBar,
-    showToolbar && /* @__PURE__ */ jsx(
-      DataTableToolbar,
-      {
-        tabs,
-        activeTab,
-        onTabChange: handleTabChange,
-        showViewToggle: hasCardView && !hideViewToggle && !forceCardsOnMobile,
-        showGroupedView: hasGroupedView,
-        showKanbanView: hasKanbanView,
-        viewMode,
-        onViewModeChange: handleViewModeChange,
-        showSearch,
-        searchLabel,
-        initialSearch,
-        searchDisabled,
-        searchDebounceTime: isClientMode ? clientSearchDebounceMs : searchDebounceTime,
-        searchMinLength,
-        searchAtStart,
-        onSearchInput: handleSearchInput,
-        toolbarSlot,
-        toolbarStartSlot,
-        columnToggleSlot,
-        showSkeleton: loading && !hasLoadedOnce
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 animate-fade-in flex-col", children: renderBody() }, viewMode),
-    showAddRow && // Sibling of the scrolling rows region, so it stays pinned below the grid
-    // (outside its scroll) — the rows scroll, this control does not move.
-    /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs(
-      ControlledButton,
-      {
-        variant: "outlined",
-        className: "flex items-center gap-1.5",
-        onClick: () => editingRows?.onAddRow?.(),
-        children: [
-          /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add", size: 16 }),
-          t("dataTable.addRow")
-        ]
-      }
-    ) }),
-    (showFooterColumnToggle || showFooterEditToggle || showBulkEdit || showPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-      (showFooterColumnToggle || showFooterEditToggle || showBulkEdit) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
-        showFooterColumnToggle && /* @__PURE__ */ jsx(
-          DataTableColumnToggle,
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-0 w-full flex-1 flex-col gap-4",
+      onKeyDown: isUndoEnabled ? handleTableKeyDown : void 0,
+      children: [
+        activeFiltersBar,
+        showToolbar && /* @__PURE__ */ jsx(
+          DataTableToolbar,
           {
-            table,
-            columns: config.columns,
-            columnOrder,
-            onColumnOrderChange,
-            resetColumnOrder,
-            resetColumnSizing,
-            variant: "toolbar"
+            tabs,
+            activeTab,
+            onTabChange: handleTabChange,
+            showViewToggle: hasCardView && !hideViewToggle && !forceCardsOnMobile,
+            showGroupedView: hasGroupedView,
+            showKanbanView: hasKanbanView,
+            viewMode,
+            onViewModeChange: handleViewModeChange,
+            showSearch,
+            searchLabel,
+            initialSearch,
+            searchDisabled,
+            searchDebounceTime: isClientMode ? clientSearchDebounceMs : searchDebounceTime,
+            searchMinLength,
+            searchAtStart,
+            onSearchInput: handleSearchInput,
+            toolbarSlot,
+            toolbarStartSlot,
+            columnToggleSlot,
+            showSkeleton: loading && !hasLoadedOnce
           }
         ),
-        showFooterEditToggle && /* @__PURE__ */ jsx(DataTableEditModeButton, { active: isEditMode, onToggle: handleEditModeToggle }),
-        showBulkEdit && /* @__PURE__ */ jsx(DataTableBulkEditButton, { onClick: () => setIsBulkEditOpen(true) })
-      ] }),
-      showPagination && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-        DataTablePagination,
-        {
-          pageSize: clientPaginationProps.pageSize,
-          numberOfPages: clientPaginationProps.numberOfPages,
-          currentPage: clientPaginationProps.currentPage,
-          setCurrentPage: clientPaginationProps.setCurrentPage,
-          onPageSizeChange: clientPaginationProps.onPageSizeChange,
-          totalItems: clientPaginationProps.totalItems
-        }
-      ) })
-    ] }),
-    showBulkEdit && /* @__PURE__ */ jsx(
-      DataTableBulkEditDialog,
-      {
-        open: isBulkEditOpen,
-        onClose: () => setIsBulkEditOpen(false),
-        columns: config.columns,
-        rows: bulkEditRows,
-        getRowLabel: config.getRowLabel,
-        onApply: (changes) => spreadsheet?.fill?.onFillCells?.(changes)
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 animate-fade-in flex-col", children: renderBody() }, viewMode),
+        showAddRow && // Sibling of the scrolling rows region, so it stays pinned below the grid
+        // (outside its scroll) — the rows scroll, this control does not move.
+        /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "outlined",
+            className: "flex items-center gap-1.5",
+            onClick: () => editingRows?.onAddRow?.(),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add", size: 16 }),
+              t("dataTable.addRow")
+            ]
+          }
+        ) }),
+        (showFooterColumnToggle || showFooterEditToggle || showBulkEdit || showPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          (showFooterColumnToggle || showFooterEditToggle || showBulkEdit) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
+            showFooterColumnToggle && /* @__PURE__ */ jsx(
+              DataTableColumnToggle,
+              {
+                table,
+                columns: config.columns,
+                columnOrder,
+                onColumnOrderChange,
+                resetColumnOrder,
+                resetColumnSizing,
+                variant: "toolbar"
+              }
+            ),
+            showFooterEditToggle && /* @__PURE__ */ jsx(DataTableEditModeButton, { active: isEditMode, onToggle: handleEditModeToggle }),
+            showBulkEdit && /* @__PURE__ */ jsx(DataTableBulkEditButton, { onClick: () => setIsBulkEditOpen(true) })
+          ] }),
+          showPagination && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            DataTablePagination,
+            {
+              pageSize: clientPaginationProps.pageSize,
+              numberOfPages: clientPaginationProps.numberOfPages,
+              currentPage: clientPaginationProps.currentPage,
+              setCurrentPage: clientPaginationProps.setCurrentPage,
+              onPageSizeChange: clientPaginationProps.onPageSizeChange,
+              totalItems: clientPaginationProps.totalItems
+            }
+          ) })
+        ] }),
+        showBulkEdit && /* @__PURE__ */ jsx(
+          DataTableBulkEditDialog,
+          {
+            open: isBulkEditOpen,
+            onClose: () => setIsBulkEditOpen(false),
+            columns: config.columns,
+            rows: bulkEditRows,
+            getRowLabel: config.getRowLabel,
+            onApply: (changes) => spreadsheet?.fill?.onFillCells?.(changes)
+          }
+        )
+      ]
+    }
+  );
   const editableContent = config.editing?.clickToEdit ? /* @__PURE__ */ jsx(DataTableCellEditingProvider, { children: content }) : content;
   if (!gridStore) return editableContent;
   return /* @__PURE__ */ jsx(GridProvider, { store: gridStore, onFillCommit: handleFillCommit, children: editableContent });

package/dist/components/UI/DataTable/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","sources":["../../../../src/components/UI/DataTable/DataTable.tsx"],"sourcesContent":["import { Fragment, JSX, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { ActiveFiltersBar, buildEmptyFilterValues, emptyValueForKind } from '@/components/Search/filters';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport GridProvider from './grid/GridProvider';\nimport { type IGridCellCoord } from './grid/gridTypes';\nimport { useGridFillApply } from './grid/useGridFillApply';\nimport { useGridEditMode, useGridInstance, useGridMatrixSync } from './grid/useGridInstance';\nimport { useGridKeyboard } from './grid/useGridKeyboard';\nimport DataTableAutoCard from './DataTableAutoCard';\nimport DataTableBody from './DataTableBody';\nimport DataTableBulkEditButton from './DataTableBulkEditButton';\nimport DataTableBulkEditDialog from './DataTableBulkEditDialog';\nimport { isBadgeColumnType } from './dataTableClasses';\nimport DataTableColumnToggle from './DataTableColumnToggle';\nimport { type IDataTableDetailColumnsState } from './DataTableDetailTable';\nimport DataTableEditModeButton from './DataTableEditModeButton';\nimport DataTableHead from './DataTableHead';\nimport DataTablePaginationBar, { DATA_TABLE_MIN_PAGE_SIZE } from './DataTablePagination';\nimport {\n DataTableCardsSkeletonState,\n DataTableEmptyState,\n DataTableErrorState,\n DataTableSkeletonState,\n} from './DataTableStates';\nimport DataTableToolbar from './DataTableToolbar';\nimport {\n DATA_TABLE_REMOVE_COLUMN_ID,\n type IDataTableColumnConfig,\n type IDataTableConfig,\n type IDataTableRow,\n type IDataTableSortState,\n type IDataTableSpreadsheetConfig,\n isDataTableDetailTableExpansion,\n type TDataTableFilterValues,\n type TDataTableViewMode,\n} from './types';\nimport DataTableCellEditingProvider from './useCellEditingState';\nimport { useColumnOrder, useDetailColumnOrder } from './useColumnOrder';\nimport { useColumnSizing } from './useColumnSizing';\nimport { useColumnVisibility, useDetailColumnVisibility } from './useColumnVisibility';\nimport {\n type IDataTableClientPaginationState,\n type IDataTablePagination,\n useDataTableInstance,\n} from './useDataTableInstance';\n\ninterface IDataTableProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n config: IDataTableConfig<T, C>;\n rows: Array<T>;\n loading?: boolean;\n error?: boolean;\n /** Cause behind `error`, so the empty state can name a denial instead of a system failure. /\n errorCause?: unknown;\n onRetry?: () => void;\n emptyMessage?: string;\n searchLabel?: string;\n onSearch?: (value: string) => void;\n initialSearch?: string;\n onSearchTermChange?: (value: string) => void;\n searchDisabled?: boolean;\n searchDebounceTime?: number;\n searchMinLength?: number;\n /* Renders the search input in the toolbar's start (left) group instead of the end. /\n searchAtStart?: boolean;\n sort?: IDataTableSortState \| null;\n onSortChange?: (sort: IDataTableSortState \| null) => void;\n pagination?: IDataTablePagination;\n /* Client mode: seeds page/pageSize (1-based page), e.g. from the URL. /\n initialClientPagination?: IDataTableClientPaginationState;\n /* Client mode: reports page/pageSize changes and keeps the page across in-place row updates. /\n onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;\n toolbarSlot?: JSX.Element;\n /\n Applied filter values. Passing them (together with `config.filters`) makes\n * the table render the always-visible active-filter chips above the toolbar,\n * so the user never has to hover the button to see what is filtering.\n /\n filterValues?: TDataTableFilterValues;\n onFilterValuesChange?: (values: TDataTableFilterValues) => void;\n /* Rendered at the start (left) of the toolbar, before tabs and view toggle. /\n toolbarStartSlot?: JSX.Element;\n /\n Full-width band rendered as the first row of the list body, spanning every\n * column (below the header, above the data rows). Opt-in: omit for a normal\n * table. When set, the empty state is skipped so the band stays visible even\n * with zero data rows (e.g. an inline \"create the first record\" editor).\n /\n bodyTopRow?: ReactNode;\n /* Client mode: reports the filtered (post-search) row count on every change. /\n onFilteredCountChange?: (count: number) => void;\n /\n Controlled view mode. When provided, the host owns the state (e.g. to persist\n * it) and must update it via `onViewModeChange`; omit for internal state.\n /\n viewMode?: TDataTableViewMode;\n /\n Fired on every view-toggle click, including re-selecting the active mode\n * (hosts use it e.g. to reopen the grouping dialog).\n /\n onViewModeChange?: (mode: TDataTableViewMode) => void;\n /\n Where the \"Columns\" toggle renders: `header` (default, inside the table\n * header), `toolbar` (next to the view toggle) or `footer` (bottom-left,\n * on the same row as the pagination).\n /\n columnTogglePlacement?: 'header' \| 'toolbar' \| 'footer';\n /\n Enables infinite scroll in the Cards view: the table observes a bottom\n * sentinel and calls `loadMore` while `hasMore`. Pass `source.cardsInfinite`\n * from `useDataTableSource`. The Lista view keeps its pagination bar.\n /\n cardsInfiniteScroll?: {\n hasMore: boolean;\n loadingMore: boolean;\n loadMore: () => void;\n };\n /\n Hides the built-in segmented view toggle. Use when the host renders its own\n * Cards/Lista switcher (e.g. a page-level `ControlledTabs`) and drives `viewMode`\n * itself. Other consumers keep the default toggle.\n /\n hideViewToggle?: boolean;\n /\n Layout mode. `page` (default): the table owns a bounded, vertically-scrolling\n * region (`flex-1 min-h-0`) for full-page lists. `fit`: the table sizes to its\n * content and scrolls only horizontally — for embedding inside a dialog / card /\n * editor grid where the host container owns vertical scroll. In `fit` mode the\n * empty state is compact (no full illustration) so surrounding controls such as\n * the add-row button stay visible.\n /\n layout?: 'page' \| 'fit';\n /* Reduces cell vertical padding for more visible rows per viewport. /\n dense?: boolean;\n /* Roomier cell padding and type scale, for tables that need to read bigger. /\n spacious?: boolean;\n /\n Per-cell persistence state (`statuses` from `useDataTableCommitQueue`), painted\n * on the cells so the user sees what is saving and what failed.\n /\n commitStatuses?: ReadonlyMap<string, string>;\n}\n\nconst DataTable = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({\n config: configProp,\n rows,\n loading = false,\n error = false,\n errorCause,\n onRetry,\n emptyMessage,\n searchLabel,\n onSearch,\n initialSearch = '',\n onSearchTermChange,\n searchDisabled = false,\n searchDebounceTime = 400,\n searchMinLength = 1,\n searchAtStart = false,\n sort,\n onSortChange,\n pagination,\n initialClientPagination,\n onClientPaginationChange,\n toolbarSlot,\n filterValues,\n onFilterValuesChange,\n toolbarStartSlot,\n bodyTopRow,\n onFilteredCountChange,\n viewMode: controlledViewMode,\n onViewModeChange,\n columnTogglePlacement = 'header',\n cardsInfiniteScroll,\n hideViewToggle = false,\n layout = 'page',\n dense: denseProp = false,\n spacious = false,\n commitStatuses,\n}: IDataTableProps<T, C>) => {\n const { t } = useTranslation('ui');\n\n const isFit = layout === 'fit';\n const dense = !spacious && (isFit \|\| denseProp);\n const editingRows = configProp.editing?.rows;\n const showAddRow = !!editingRows?.canAdd && !!editingRows.onAddRow;\n\n // When `editing.rows.onRemoveRow` is set, append a synthetic trailing actions\n // column carrying a per-row delete control. It is a real `actions` column, so\n // it flows through the existing sizing / sticky-right / flex-exclusion / order\n // paths unchanged (see useColumnOrder: actions columns are pinned to the end).\n const config = useMemo<IDataTableConfig<T, C>>(() => {\n if (!editingRows?.onRemoveRow) return configProp;\n\n const removeColumn: IDataTableColumnConfig<T> = {\n id: DATA_TABLE_REMOVE_COLUMN_ID,\n header: '',\n type: 'actions',\n hideable: false,\n resizable: false,\n actions: [\n {\n key: 'remove',\n label: t('dataTable.removeRow'),\n icon: 'delete',\n danger: true,\n hidden: (row) => (editingRows.canRemove ? !editingRows.canRemove(row) : false),\n onClick: (row) => editingRows.onRemoveRow?.(row),\n },\n ],\n };\n\n return { ...configProp, columns: [...configProp.columns, removeColumn] };\n }, [configProp, editingRows, t]);\n\n const { columnVisibility, onColumnVisibilityChange } = useColumnVisibility(config);\n const { columnOrder, onColumnOrderChange, resetColumnOrder } = useColumnOrder(config);\n const { columnSizing, onColumnSizingChange, resetColumnSizing } = useColumnSizing(config);\n\n // Every table restores the persisted column order back to the config default\n // on mount (equivalent to firing \"Restaurar ordem padrão\" from the columns\n // menu), so a stale/incompatible persisted order never sticks. Does not touch\n // column widths or visibility, and does not affect the Cards view.\n useEffect(() => {\n resetColumnOrder();\n }, []);\n\n const detailExpansionColumns =\n config.expansion && isDataTableDetailTableExpansion(config.expansion) && Array.isArray(config.expansion.columns)\n ? config.expansion.columns\n : null;\n const { detailColumnVisibility, toggleDetailColumn } = useDetailColumnVisibility(\n config.entityKey,\n detailExpansionColumns,\n );\n const { detailColumnOrder, onDetailColumnOrderChange, resetDetailColumnOrder } = useDetailColumnOrder(\n config.entityKey,\n detailExpansionColumns,\n );\n\n const detailColumnsState: IDataTableDetailColumnsState \| undefined = detailExpansionColumns\n ? {\n visibility: detailColumnVisibility,\n toggleVisibility: toggleDetailColumn,\n order: detailColumnOrder,\n onOrderChange: onDetailColumnOrderChange,\n resetOrder: resetDetailColumnOrder,\n }\n : undefined;\n\n const { isMobile } = useBreakpoint();\n\n const hasCardView = !!config.renderCard;\n const hasGroupedView = !!config.renderGroupedBody;\n const hasKanbanView = !!config.renderKanbanBody;\n // Fixed behaviour: card-capable tables always open on Cards (first), Lista second.\n // The toggle switches within the session and resets to Cards on remount, unless\n // the host controls the mode via the `viewMode` prop (e.g. persisted preference).\n const [internalViewMode, setInternalViewMode] = useState<TDataTableViewMode>('cards');\n const viewMode = controlledViewMode ?? internalViewMode;\n\n const [isBulkEditOpen, setIsBulkEditOpen] = useState(false);\n\n const handleViewModeChange = (mode: TDataTableViewMode) => {\n if (controlledViewMode === undefined) setInternalViewMode(mode);\n onViewModeChange?.(mode);\n };\n\n const {\n table,\n isClientMode,\n columnContentWidths,\n registerRow,\n beginRowsExit,\n visibleRows,\n activeTab,\n tabs,\n handleTabChange,\n handleSearchInput,\n handleHeaderSortClick,\n resolveSortDirection,\n clientPaginationProps,\n showUpdatingBar,\n contentOpacityStyle,\n dataTableOpacityTransitionClass,\n showSkeleton,\n hasRows,\n clientSearchDebounceMs,\n } = useDataTableInstance({\n config,\n rows,\n loading,\n sort,\n onSortChange,\n onSearch,\n initialSearch,\n onSearchTermChange,\n pagination,\n initialClientPagination,\n onClientPaginationChange,\n columnVisibility,\n onColumnVisibilityChange,\n columnOrder,\n onColumnOrderChange,\n columnSizing,\n onColumnSizingChange,\n onFilteredCountChange,\n });\n\n const columnConfigById = useMemo(\n () => new Map(config.columns.map((columnConfig) => [columnConfig.id, columnConfig])),\n [config.columns],\n );\n\n // Under `table-fixed` one column absorbs leftover horizontal space. The last\n // visible non-actions, non-badge, non-first column is the flex column.\n const visibleLeafColumns = table.getVisibleLeafColumns();\n const flexColumnId = useMemo(() => {\n if (config.flexColumnId && visibleLeafColumns.some((leafColumn) => leafColumn.id === config.flexColumnId)) {\n return config.flexColumnId;\n }\n\n const candidates = visibleLeafColumns.filter((leafColumn, index) => {\n if (index === 0) return false;\n const type = columnConfigById.get(leafColumn.id)?.type;\n return type !== 'actions' && !isBadgeColumnType(type);\n });\n return candidates[candidates.length - 1]?.id ?? null;\n }, [visibleLeafColumns, columnConfigById, config.flexColumnId]);\n\n // `table-fixed` sizes columns from the table width, so the table must be at\n // least the sum of ALL column widths (including the absorber's seed) for their\n // widths to be honored; below that the browser shrinks them proportionally.\n // `min-w-full` still lets the table stretch to fill the container, and the\n // auto-width absorber soaks the surplus (never shrinking below its own seed,\n // because its seed is part of this total).\n const totalTableWidth = useMemo(\n () => visibleLeafColumns.reduce((sum, leafColumn) => sum + leafColumn.getSize(), 0),\n [visibleLeafColumns, columnSizing],\n );\n\n // ----- Spreadsheet layer -----\n // Toda tabela com coluna editável ganha a camada de planilha sem configuração.\n // O que muda por tabela é QUANDO ela fica ativa: onde o clique na linha já\n // significa \"abrir o registro\", selecionar célula e navegar seriam o mesmo\n // gesto, então o usuário liga o modo no toolbar antes de editar.\n const spreadsheet = useMemo<IDataTableSpreadsheetConfig<T> \| undefined>(() => {\n if (config.spreadsheet === false) return undefined;\n return config.spreadsheet ?? { selection: 'range', fill: {} };\n }, [config.spreadsheet]);\n\n const hasEditableColumns = useMemo(\n () => !!config.editing?.onCellChange && config.columns.some((columnConfig) => !!columnConfig.editable),\n [config.editing, config.columns],\n );\n\n const editModeBehavior = spreadsheet?.mode ?? (config.onRowClick ? 'toggle' : 'always');\n const gridEnabled = !!spreadsheet && (hasEditableColumns \|\| !!config.spreadsheet);\n\n const gridStore = useGridInstance({\n spreadsheet,\n enabled: gridEnabled,\n startsInEditMode: editModeBehavior === 'always',\n });\n\n const isEditMode = useGridEditMode(gridStore);\n const showEditModeToggle = gridEnabled && editModeBehavior === 'toggle';\n\n // Below the tablet edge a real table is unreadable: even the narrowest column\n // set overflows and the user reads it through a horizontal scrollbar. Cards are\n // the readable shape there, so the narrow viewport takes over the choice.\n // Excluded: `fit` layouts without a bespoke card (their cell geometry IS the\n // feature) and the spreadsheet grid while it is ACTIVE. Merely being able to edit\n // is not enough: a table whose edit mode is a toggle stays a reading surface\n // until the user turns it on. A `fit` table that ships `renderCard` opted into a\n // narrow shape, so it takes over as well.\n const forceCardsOnMobile = isMobile && (!isFit \|\| hasCardView) && !isEditMode;\n\n const isGroupedView = hasGroupedView && viewMode === 'grouped';\n const isKanbanView = hasKanbanView && viewMode === 'kanban';\n // Grouped and kanban both hand the whole body to the host, so everything the\n // table draws around a real row list is off in either of them.\n const isDelegatedView = isGroupedView \|\| isKanbanView;\n const isCardsView = hasCardView && (viewMode === 'cards' \|\| (forceCardsOnMobile && !isDelegatedView));\n const useAutoCards = forceCardsOnMobile && !hasCardView && !isDelegatedView;\n\n useEffect(() => {\n if (!gridStore \|\| !commitStatuses) return;\n gridStore.getState().setCellStatuses(commitStatuses);\n }, [gridStore, commitStatuses]);\n\n const navigableColumnIds = useMemo(\n () =>\n visibleLeafColumns\n .filter((leafColumn) => columnConfigById.get(leafColumn.id)?.type !== 'actions')\n .map((leafColumn) => leafColumn.id),\n [visibleLeafColumns, columnConfigById],\n );\n const gridRowIds = useMemo(() => visibleRows.map((row) => row.id), [visibleRows]);\n\n useGridMatrixSync(gridStore, gridRowIds, navigableColumnIds);\n\n // Read through a ref so the callback stays stable while the rows change on\n // every edit: an unstable handler would re-bind the grid keyboard each render.\n const visibleRowsRef = useRef(visibleRows);\n visibleRowsRef.current = visibleRows;\n\n const canEditCell = useCallback(\n ({ rowId, columnId }: IGridCellCoord) => {\n if (!config.editing?.onCellChange) return false;\n\n const editable = columnConfigById.get(columnId)?.editable;\n if (!editable) return false;\n\n const row = visibleRowsRef.current.find((candidate) => candidate.id === rowId);\n if (!row) return false;\n\n return !(editable.disabled?.(row.original) ?? false);\n },\n [config.editing, columnConfigById],\n );\n\n const handleGridKeyDown = useGridKeyboard({\n store: gridStore,\n canEditCell,\n onSave: spreadsheet?.onSave,\n });\n\n const handleFillCommit = useGridFillApply<T>({\n visibleRows,\n columnConfigById,\n spreadsheet,\n onCellChange: config.editing?.onCellChange,\n });\n\n const handleEditModeToggle = useCallback(() => {\n const store = gridStore;\n if (!store) return;\n store.getState().setEditMode(!store.getState().isEditMode);\n }, [gridStore]);\n\n const cardsScrollRef = useRef<HTMLDivElement \| null>(null);\n const cardsSentinelRef = useRef<HTMLDivElement \| null>(null);\n const cardsLoadMore = cardsInfiniteScroll?.loadMore;\n const cardsHasMore = cardsInfiniteScroll?.hasMore ?? false;\n\n // Cards infinite scroll: load the next page when the bottom sentinel enters the\n // cards scroll container. `loadMore` is stable and self-guards while a page is\n // in flight; re-running on row count keeps the observer bound after each append.\n useEffect(() => {\n if (!isCardsView \|\| !cardsHasMore \|\| !cardsLoadMore) return;\n\n const root = cardsScrollRef.current;\n const sentinel = cardsSentinelRef.current;\n if (!root \|\| !sentinel) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries.some((entry) => entry.isIntersecting)) cardsLoadMore();\n },\n { root, rootMargin: '300px' },\n );\n observer.observe(sentinel);\n\n return () => observer.disconnect();\n }, [isCardsView, cardsHasMore, cardsLoadMore, visibleRows.length]);\n\n const listScrollRef = useRef<HTMLDivElement \| null>(null);\n const [detailSlotWidth, setDetailSlotWidth] = useState<number \| undefined>(undefined);\n const [parentHasHorizontalOverflow, setParentHasHorizontalOverflow] = useState(false);\n\n // Track the list scrollport: its clientWidth sizes the detail panel to the\n // visible area (detailTable expansion), and its horizontal overflow toggles the\n // frozen actions-column shadow (shown only while columns scroll under it, so\n // there is no always-on divider line otherwise). Observing the inner table too\n // keeps both in sync when columns are toggled or the layout reflows. The\n // branch-state deps re-bind when the scroller remounts (view/skeleton/error/\n // empty transitions swap the rendered subtree).\n useEffect(() => {\n const scroller = listScrollRef.current;\n if (!scroller) return undefined;\n\n const measure = () => {\n setDetailSlotWidth(scroller.clientWidth \|\| undefined);\n setParentHasHorizontalOverflow(scroller.scrollWidth > scroller.clientWidth + 1);\n };\n measure();\n\n const observer = new ResizeObserver(measure);\n observer.observe(scroller);\n const parentTable = scroller.querySelector('table');\n if (parentTable) observer.observe(parentTable);\n\n return () => observer.disconnect();\n }, [isCardsView, isDelegatedView, showSkeleton, error, hasRows]);\n\n const renderBody = () => {\n // Grouped view delegates the whole body to the host (it owns fetching,\n // accordions, loading and empty states for each group).\n if (isGroupedView && config.renderGroupedBody) return config.renderGroupedBody();\n if (isKanbanView && config.renderKanbanBody) return config.renderKanbanBody();\n\n if (showSkeleton)\n return isCardsView ? (\n <DataTableCardsSkeletonState cardClassName={config.cardSkeletonClassName} />\n ) : (\n <DataTableSkeletonState rows={config.skeletonRows} />\n );\n\n if (error) return <DataTableErrorState onRetry={onRetry} errorCause={errorCause} />;\n\n // A `bodyTopRow` (e.g. an inline create editor) must stay visible even with\n // zero data rows, so it takes precedence over the empty state.\n if (!hasRows && !bodyTopRow) {\n if (isFit) {\n // Embedded/editor context: skip the full illustration so surrounding\n // controls (e.g. the add-row button) stay visible in a compact dialog.\n return emptyMessage ? (\n <div className=\"py-6 text-center text-sm text-foreground-faint\">{emptyMessage}</div>\n ) : null;\n }\n return <DataTableEmptyState emptyMessage={emptyMessage} />;\n }\n\n if (isCardsView && config.renderCard) {\n // Cards render from the SAME visible rows the table uses (already searched,\n // filtered, sorted and paginated), so both views share one source. No grid:\n // flex-wrap keeps the layout responsive per the project's no-CSS-grid rule.\n return (\n <div ref={cardsScrollRef} className=\"relative min-h-0 flex-1 overflow-y-auto @container\">\n {showUpdatingBar && (\n <div className=\"absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover\" aria-hidden />\n )}\n {/ Cards têm largura fixa, então uma faixa estreita demais para duas colunas\n deixa a sobra toda de um lado. Abaixo disso eles se centram; a partir de\n duas colunas o alinhamento à esquerda volta a ser o que lê melhor. */}\n <div\n className={classNames(\n 'flex flex-wrap justify-center gap-4 @md:justify-start',\n dataTableOpacityTransitionClass,\n config.cardGridClassName,\n )}\n style={contentOpacityStyle}\n >\n {visibleRows\n .filter((row) => row.depth === 0)\n .map((row) => (\n <Fragment key={row.id}>{config.renderCard?.(row.original)}</Fragment>\n ))}\n </div>\n\n {cardsInfiniteScroll?.loadingMore && (\n <div className=\"flex justify-center py-4\">\n <LoadingSpinner size={6} />\n </div>\n )}\n\n {cardsHasMore && <div ref={cardsSentinelRef} className=\"h-px w-full\" aria-hidden />}\n </div>\n );\n }\n\n // Narrow viewport with no bespoke card renderer: stack each row into a card\n // derived from the same columns, so the list stays readable without the host\n // authoring a second renderer.\n if (useAutoCards) {\n return (\n <div className=\"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto\">\n {visibleRows\n .filter((row) => row.depth === 0)\n .map((row) => (\n <DataTableAutoCard key={row.id} row={row} columnConfigById={columnConfigById} />\n ))}\n </div>\n );\n }\n\n // The table scrolls inside this bounded region (flex-1 + min-h-0). The sticky\n // header pins to the top of the data area; the region also scrolls horizontally\n // so columns keep a minimum readable width instead of being crushed. The first\n // column and the actions column are frozen (sticky left/right) so navigation\n // anchors stay visible while the middle columns scroll past.\n return (\n <div\n ref={listScrollRef}\n onKeyDown={gridStore ? handleGridKeyDown : undefined}\n className={classNames(\n 'relative [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-emphasis hover:[&::-webkit-scrollbar-thumb]:bg-foreground-faint [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5',\n // The rows scroll inside this bounded region (flex-1 + min-h-0), so the\n // host provides the height (a full page, or a bounded flex parent like a\n // fixed-size dialog) and the add-row/footer below stay pinned outside it.\n 'min-h-0 flex-1 overflow-auto',\n )}\n >\n {showUpdatingBar && (\n <div className=\"absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover\" aria-hidden />\n )}\n <table\n role={gridStore ? 'grid' : undefined}\n aria-multiselectable={gridStore && spreadsheet?.selection === 'range' ? true : undefined}\n className={classNames(\n // `table-fixed`: column widths come exclusively from the colgroup so\n // user resizes are honored exactly (under `table-auto` the browser\n // ignores explicit col widths and sizes by content). The slack\n // absorber (auto-width col) still soaks any leftover space.\n 'min-w-full table-fixed border-separate border-spacing-0 rounded-md border-y border-border-subtle',\n dataTableOpacityTransitionClass,\n )}\n style={{ ...contentOpacityStyle, width: totalTableWidth \|\| undefined }}\n >\n <DataTableHead\n table={table}\n columns={config.columns}\n columnConfigById={columnConfigById}\n columnContentWidths={columnContentWidths}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n onHeaderSortClick={handleHeaderSortClick}\n resolveSortDirection={resolveSortDirection}\n hideColumnToggle={columnTogglePlacement !== 'header'}\n flexColumnId={flexColumnId}\n showActionsShadow={parentHasHorizontalOverflow}\n dense={dense}\n spacious={spacious}\n />\n\n <DataTableBody\n config={config}\n visibleRows={visibleRows}\n columnConfigById={columnConfigById}\n columnContentWidths={columnContentWidths}\n registerRow={registerRow}\n onCollapseStart={beginRowsExit}\n detailColumnsState={detailColumnsState}\n detailSlotWidth={detailSlotWidth}\n showActionsShadow={parentHasHorizontalOverflow}\n dense={dense}\n spacious={spacious}\n fillEnabled={!!spreadsheet?.fill}\n editMode={isEditMode}\n bodyTopRow={bodyTopRow}\n bodyTopRowColSpan={table.getVisibleLeafColumns().length}\n />\n </table>\n </div>\n );\n };\n\n // Cards normally page themselves through infinite scroll, so the pager is\n // hidden. When the narrow viewport takes the choice over, the host is still in\n // list mode and its `cardsInfiniteScroll` is not wired: without the pager the\n // user would be stranded on the first page.\n const isMobileCardsTakeover = isCardsView && viewMode !== 'cards' && !cardsInfiniteScroll;\n\n const showPagination =\n (!isCardsView \|\| isMobileCardsTakeover) &&\n !isDelegatedView &&\n !!clientPaginationProps &&\n !showSkeleton &&\n !error &&\n hasRows &&\n clientPaginationProps.numberOfPages > 0 &&\n !(clientPaginationProps.numberOfPages === 1 && clientPaginationProps.pageSize <= DATA_TABLE_MIN_PAGE_SIZE);\n\n // The toolbar only skeletons on the very first load: a refetch (tab switch,\n // filter, search) keeps the real controls mounted, so the search term and the\n // focus survive and the row never changes height.\n const [hasLoadedOnce, setHasLoadedOnce] = useState(!loading);\n\n useEffect(() => {\n if (!loading) setHasLoadedOnce(true);\n }, [loading]);\n\n const showSearch = (!!onSearch \|\| isClientMode) && config.searchable !== false;\n const showToolbar =\n (tabs?.length ?? 0) > 0 \|\|\n hasCardView \|\|\n showSearch \|\|\n !!toolbarSlot \|\|\n !!toolbarStartSlot \|\|\n columnTogglePlacement === 'toolbar';\n\n const columnToggleSlot =\n columnTogglePlacement === 'toolbar' ? (\n <DataTableColumnToggle\n table={table}\n columns={config.columns}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n variant=\"toolbar\"\n />\n ) : undefined;\n\n // O rodapé é o lugar dos controles da própria tabela (colunas e modo de edição),\n // ao lado da paginação. Ambos só existem sobre uma lista real.\n const showTableControls = !isCardsView && !isDelegatedView && !showSkeleton && !error && hasRows;\n const showFooterColumnToggle = columnTogglePlacement === 'footer' && showTableControls;\n const showFooterEditToggle = showEditModeToggle && showTableControls;\n\n // A edição em massa não depende do modo de exibição: em cards ela é a única\n // forma de editar, já que não existe célula para clicar.\n const showBulkEdit =\n hasEditableColumns && !!spreadsheet?.fill?.onFillCells && !isDelegatedView && !showSkeleton && !error && hasRows;\n const bulkEditRows = useMemo(\n () => visibleRows.filter((row) => row.depth === 0).map((row) => row.original),\n [visibleRows],\n );\n\n const activeFiltersBar =\n config.filters && filterValues && onFilterValuesChange ? (\n <ActiveFiltersBar\n fields={config.filters.fields ?? []}\n values={filterValues}\n onRemove={(key) =>\n onFilterValuesChange({\n ...filterValues,\n [key]: emptyValueForKind((config.filters?.fields ?? []).find((field) => field.key === key)?.kind ?? 'text'),\n })\n }\n onClearAll={() => onFilterValuesChange(buildEmptyFilterValues(config.filters?.fields ?? []))}\n />\n ) : null;\n\n const content = (\n <div className=\"flex min-h-0 w-full flex-1 flex-col gap-4\">\n {activeFiltersBar}\n {showToolbar && (\n <DataTableToolbar\n tabs={tabs}\n activeTab={activeTab}\n onTabChange={handleTabChange}\n showViewToggle={hasCardView && !hideViewToggle && !forceCardsOnMobile}\n showGroupedView={hasGroupedView}\n showKanbanView={hasKanbanView}\n viewMode={viewMode}\n onViewModeChange={handleViewModeChange}\n showSearch={showSearch}\n searchLabel={searchLabel}\n initialSearch={initialSearch}\n searchDisabled={searchDisabled}\n searchDebounceTime={isClientMode ? clientSearchDebounceMs : searchDebounceTime}\n searchMinLength={searchMinLength}\n searchAtStart={searchAtStart}\n onSearchInput={handleSearchInput}\n toolbarSlot={toolbarSlot}\n toolbarStartSlot={toolbarStartSlot}\n columnToggleSlot={columnToggleSlot}\n showSkeleton={loading && !hasLoadedOnce}\n />\n )}\n\n <div key={viewMode} className=\"flex min-h-0 flex-1 animate-fade-in flex-col\">\n {renderBody()}\n </div>\n\n {showAddRow && (\n // Sibling of the scrolling rows region, so it stays pinned below the grid\n // (outside its scroll) — the rows scroll, this control does not move.\n <div className=\"flex\">\n <ControlledButton\n variant=\"outlined\"\n className=\"flex items-center gap-1.5\"\n onClick={() => editingRows?.onAddRow?.()}\n >\n <MaterialSymbol icon=\"add\" size={16} />\n {t('dataTable.addRow')}\n </ControlledButton>\n </div>\n )}\n\n {(showFooterColumnToggle \|\| showFooterEditToggle \|\| showBulkEdit \|\| showPagination) && (\n <div className=\"flex items-center justify-between gap-4\">\n {(showFooterColumnToggle \|\| showFooterEditToggle \|\| showBulkEdit) && (\n <div className=\"flex flex-wrap items-center gap-2 pb-3\">\n {showFooterColumnToggle && (\n <DataTableColumnToggle\n table={table}\n columns={config.columns}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n variant=\"toolbar\"\n />\n )}\n {showFooterEditToggle && <DataTableEditModeButton active={isEditMode} onToggle={handleEditModeToggle} />}\n {showBulkEdit && <DataTableBulkEditButton onClick={() => setIsBulkEditOpen(true)} />}\n </div>\n )}\n\n {showPagination && (\n <div className=\"flex-1\">\n <DataTablePaginationBar\n pageSize={clientPaginationProps.pageSize}\n numberOfPages={clientPaginationProps.numberOfPages}\n currentPage={clientPaginationProps.currentPage}\n setCurrentPage={clientPaginationProps.setCurrentPage}\n onPageSizeChange={clientPaginationProps.onPageSizeChange}\n totalItems={clientPaginationProps.totalItems}\n />\n </div>\n )}\n </div>\n )}\n\n {showBulkEdit && (\n <DataTableBulkEditDialog\n open={isBulkEditOpen}\n onClose={() => setIsBulkEditOpen(false)}\n columns={config.columns}\n rows={bulkEditRows}\n getRowLabel={config.getRowLabel}\n onApply={(changes) => spreadsheet?.fill?.onFillCells?.(changes)}\n />\n )}\n </div>\n );\n\n // Os providers ficam por fora do conteúdo já montado: abrir ou fechar uma célula re-renderiza\n // apenas as células editáveis, não a tabela inteira.\n const editableContent = config.editing?.clickToEdit ? (\n <DataTableCellEditingProvider>{content}</DataTableCellEditingProvider>\n ) : (\n content\n );\n\n if (!gridStore) return editableContent;\n\n return (\n <GridProvider store={gridStore} onFillCommit={handleFillCommit}>\n {editableContent}\n </GridProvider>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTablePaginationBar"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","sources":["../../../../src/components/UI/DataTable/DataTable.tsx"],"sourcesContent":["import { Fragment, JSX, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { ActiveFiltersBar, buildEmptyFilterValues, emptyValueForKind } from '@/components/Search/filters';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport GridProvider from './grid/GridProvider';\nimport { type IGridCellCoord } from './grid/gridTypes';\nimport { useGridFillApply } from './grid/useGridFillApply';\nimport { useGridEditMode, useGridInstance, useGridMatrixSync } from './grid/useGridInstance';\nimport { useGridKeyboard } from './grid/useGridKeyboard';\nimport DataTableAutoCard from './DataTableAutoCard';\nimport DataTableBody from './DataTableBody';\nimport DataTableBulkEditButton from './DataTableBulkEditButton';\nimport DataTableBulkEditDialog from './DataTableBulkEditDialog';\nimport { isBadgeColumnType } from './dataTableClasses';\nimport DataTableColumnToggle from './DataTableColumnToggle';\nimport { type IDataTableDetailColumnsState } from './DataTableDetailTable';\nimport DataTableEditModeButton from './DataTableEditModeButton';\nimport DataTableHead from './DataTableHead';\nimport DataTablePaginationBar, { DATA_TABLE_MIN_PAGE_SIZE } from './DataTablePagination';\nimport {\n DataTableCardsSkeletonState,\n DataTableEmptyState,\n DataTableErrorState,\n DataTableSkeletonState,\n} from './DataTableStates';\nimport DataTableToolbar from './DataTableToolbar';\nimport {\n DATA_TABLE_REMOVE_COLUMN_ID,\n type IDataTableColumnConfig,\n type IDataTableConfig,\n type IDataTableRow,\n type IDataTableSortState,\n type IDataTableSpreadsheetConfig,\n isDataTableDetailTableExpansion,\n type TDataTableFilterValues,\n type TDataTableViewMode,\n} from './types';\nimport DataTableCellEditingProvider from './useCellEditingState';\nimport { useColumnOrder, useDetailColumnOrder } from './useColumnOrder';\nimport { useColumnSizing } from './useColumnSizing';\nimport { useColumnVisibility, useDetailColumnVisibility } from './useColumnVisibility';\nimport {\n type IDataTableClientPaginationState,\n type IDataTablePagination,\n useDataTableInstance,\n} from './useDataTableInstance';\nimport { useDataTableUndoHistory } from './useDataTableUndoHistory';\n\ninterface IDataTableProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n config: IDataTableConfig<T, C>;\n rows: Array<T>;\n loading?: boolean;\n error?: boolean;\n /** Cause behind `error`, so the empty state can name a denial instead of a system failure. /\n errorCause?: unknown;\n onRetry?: () => void;\n emptyMessage?: string;\n searchLabel?: string;\n onSearch?: (value: string) => void;\n initialSearch?: string;\n onSearchTermChange?: (value: string) => void;\n searchDisabled?: boolean;\n searchDebounceTime?: number;\n searchMinLength?: number;\n /* Renders the search input in the toolbar's start (left) group instead of the end. /\n searchAtStart?: boolean;\n sort?: IDataTableSortState \| null;\n onSortChange?: (sort: IDataTableSortState \| null) => void;\n pagination?: IDataTablePagination;\n /* Client mode: seeds page/pageSize (1-based page), e.g. from the URL. /\n initialClientPagination?: IDataTableClientPaginationState;\n /* Client mode: reports page/pageSize changes and keeps the page across in-place row updates. /\n onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;\n toolbarSlot?: JSX.Element;\n /\n Applied filter values. Passing them (together with `config.filters`) makes\n * the table render the always-visible active-filter chips above the toolbar,\n * so the user never has to hover the button to see what is filtering.\n /\n filterValues?: TDataTableFilterValues;\n onFilterValuesChange?: (values: TDataTableFilterValues) => void;\n /* Rendered at the start (left) of the toolbar, before tabs and view toggle. /\n toolbarStartSlot?: JSX.Element;\n /\n Full-width band rendered as the first row of the list body, spanning every\n * column (below the header, above the data rows). Opt-in: omit for a normal\n * table. When set, the empty state is skipped so the band stays visible even\n * with zero data rows (e.g. an inline \"create the first record\" editor).\n /\n bodyTopRow?: ReactNode;\n /* Client mode: reports the filtered (post-search) row count on every change. /\n onFilteredCountChange?: (count: number) => void;\n /\n Controlled view mode. When provided, the host owns the state (e.g. to persist\n * it) and must update it via `onViewModeChange`; omit for internal state.\n /\n viewMode?: TDataTableViewMode;\n /\n Fired on every view-toggle click, including re-selecting the active mode\n * (hosts use it e.g. to reopen the grouping dialog).\n /\n onViewModeChange?: (mode: TDataTableViewMode) => void;\n /\n Where the \"Columns\" toggle renders: `header` (default, inside the table\n * header), `toolbar` (next to the view toggle) or `footer` (bottom-left,\n * on the same row as the pagination).\n /\n columnTogglePlacement?: 'header' \| 'toolbar' \| 'footer';\n /\n Enables infinite scroll in the Cards view: the table observes a bottom\n * sentinel and calls `loadMore` while `hasMore`. Pass `source.cardsInfinite`\n * from `useDataTableSource`. The Lista view keeps its pagination bar.\n /\n cardsInfiniteScroll?: {\n hasMore: boolean;\n loadingMore: boolean;\n loadMore: () => void;\n };\n /\n Hides the built-in segmented view toggle. Use when the host renders its own\n * Cards/Lista switcher (e.g. a page-level `ControlledTabs`) and drives `viewMode`\n * itself. Other consumers keep the default toggle.\n /\n hideViewToggle?: boolean;\n /\n Layout mode. `page` (default): the table owns a bounded, vertically-scrolling\n * region (`flex-1 min-h-0`) for full-page lists. `fit`: the table sizes to its\n * content and scrolls only horizontally — for embedding inside a dialog / card /\n * editor grid where the host container owns vertical scroll. In `fit` mode the\n * empty state is compact (no full illustration) so surrounding controls such as\n * the add-row button stay visible.\n /\n layout?: 'page' \| 'fit';\n /* Reduces cell vertical padding for more visible rows per viewport. /\n dense?: boolean;\n /* Roomier cell padding and type scale, for tables that need to read bigger. /\n spacious?: boolean;\n /\n Per-cell persistence state (`statuses` from `useDataTableCommitQueue`), painted\n * on the cells so the user sees what is saving and what failed.\n /\n commitStatuses?: ReadonlyMap<string, string>;\n}\n\nconst DataTable = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({\n config: configProp,\n rows,\n loading = false,\n error = false,\n errorCause,\n onRetry,\n emptyMessage,\n searchLabel,\n onSearch,\n initialSearch = '',\n onSearchTermChange,\n searchDisabled = false,\n searchDebounceTime = 400,\n searchMinLength = 1,\n searchAtStart = false,\n sort,\n onSortChange,\n pagination,\n initialClientPagination,\n onClientPaginationChange,\n toolbarSlot,\n filterValues,\n onFilterValuesChange,\n toolbarStartSlot,\n bodyTopRow,\n onFilteredCountChange,\n viewMode: controlledViewMode,\n onViewModeChange,\n columnTogglePlacement = 'header',\n cardsInfiniteScroll,\n hideViewToggle = false,\n layout = 'page',\n dense: denseProp = false,\n spacious = false,\n commitStatuses,\n}: IDataTableProps<T, C>) => {\n const { t } = useTranslation('ui');\n\n const isFit = layout === 'fit';\n const dense = !spacious && (isFit \|\| denseProp);\n const editingRows = configProp.editing?.rows;\n const showAddRow = !!editingRows?.canAdd && !!editingRows.onAddRow;\n\n const hostFillCells = configProp.spreadsheet ? configProp.spreadsheet.fill?.onFillCells : undefined;\n const isUndoEnabled = !!configProp.editing?.onCellChange && configProp.editing.undo !== false;\n const { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut } = useDataTableUndoHistory<T>({\n enabled: isUndoEnabled,\n rows,\n columns: configProp.columns,\n onCellChange: configProp.editing?.onCellChange,\n onFillCells: hostFillCells,\n });\n\n const configWithUndo = useMemo<IDataTableConfig<T, C>>(() => {\n if (!isUndoEnabled \|\| !configProp.editing) return configProp;\n\n const spreadsheetConfig = configProp.spreadsheet;\n return {\n ...configProp,\n editing: { ...configProp.editing, onCellChange: recordedOnCellChange },\n spreadsheet:\n spreadsheetConfig && spreadsheetConfig.fill?.onFillCells\n ? { ...spreadsheetConfig, fill: { ...spreadsheetConfig.fill, onFillCells: recordedOnFillCells } }\n : spreadsheetConfig,\n };\n }, [configProp, isUndoEnabled, recordedOnCellChange, recordedOnFillCells]);\n\n // When `editing.rows.onRemoveRow` is set, append a synthetic trailing actions\n // column carrying a per-row delete control. It is a real `actions` column, so\n // it flows through the existing sizing / sticky-right / flex-exclusion / order\n // paths unchanged (see useColumnOrder: actions columns are pinned to the end).\n const config = useMemo<IDataTableConfig<T, C>>(() => {\n if (!editingRows?.onRemoveRow) return configWithUndo;\n\n const removeColumn: IDataTableColumnConfig<T> = {\n id: DATA_TABLE_REMOVE_COLUMN_ID,\n header: '',\n type: 'actions',\n hideable: false,\n resizable: false,\n actions: [\n {\n key: 'remove',\n label: t('dataTable.removeRow'),\n icon: 'delete',\n danger: true,\n hidden: (row) => (editingRows.canRemove ? !editingRows.canRemove(row) : false),\n onClick: (row) => editingRows.onRemoveRow?.(row),\n },\n ],\n };\n\n return { ...configWithUndo, columns: [...configWithUndo.columns, removeColumn] };\n }, [configWithUndo, editingRows, t]);\n\n const { columnVisibility, onColumnVisibilityChange } = useColumnVisibility(config);\n const { columnOrder, onColumnOrderChange, resetColumnOrder } = useColumnOrder(config);\n const { columnSizing, onColumnSizingChange, resetColumnSizing } = useColumnSizing(config);\n\n // Every table restores the persisted column order back to the config default\n // on mount (equivalent to firing \"Restaurar ordem padrão\" from the columns\n // menu), so a stale/incompatible persisted order never sticks. Does not touch\n // column widths or visibility, and does not affect the Cards view.\n useEffect(() => {\n resetColumnOrder();\n }, []);\n\n const detailExpansionColumns =\n config.expansion && isDataTableDetailTableExpansion(config.expansion) && Array.isArray(config.expansion.columns)\n ? config.expansion.columns\n : null;\n const { detailColumnVisibility, toggleDetailColumn } = useDetailColumnVisibility(\n config.entityKey,\n detailExpansionColumns,\n );\n const { detailColumnOrder, onDetailColumnOrderChange, resetDetailColumnOrder } = useDetailColumnOrder(\n config.entityKey,\n detailExpansionColumns,\n );\n\n const detailColumnsState: IDataTableDetailColumnsState \| undefined = detailExpansionColumns\n ? {\n visibility: detailColumnVisibility,\n toggleVisibility: toggleDetailColumn,\n order: detailColumnOrder,\n onOrderChange: onDetailColumnOrderChange,\n resetOrder: resetDetailColumnOrder,\n }\n : undefined;\n\n const { isMobile } = useBreakpoint();\n\n const hasCardView = !!config.renderCard;\n const hasGroupedView = !!config.renderGroupedBody;\n const hasKanbanView = !!config.renderKanbanBody;\n // Fixed behaviour: card-capable tables always open on Cards (first), Lista second.\n // The toggle switches within the session and resets to Cards on remount, unless\n // the host controls the mode via the `viewMode` prop (e.g. persisted preference).\n const [internalViewMode, setInternalViewMode] = useState<TDataTableViewMode>('cards');\n const viewMode = controlledViewMode ?? internalViewMode;\n\n const [isBulkEditOpen, setIsBulkEditOpen] = useState(false);\n\n const handleViewModeChange = (mode: TDataTableViewMode) => {\n if (controlledViewMode === undefined) setInternalViewMode(mode);\n onViewModeChange?.(mode);\n };\n\n const {\n table,\n isClientMode,\n columnContentWidths,\n registerRow,\n beginRowsExit,\n visibleRows,\n activeTab,\n tabs,\n handleTabChange,\n handleSearchInput,\n handleHeaderSortClick,\n resolveSortDirection,\n clientPaginationProps,\n showUpdatingBar,\n contentOpacityStyle,\n dataTableOpacityTransitionClass,\n showSkeleton,\n hasRows,\n clientSearchDebounceMs,\n } = useDataTableInstance({\n config,\n rows,\n loading,\n sort,\n onSortChange,\n onSearch,\n initialSearch,\n onSearchTermChange,\n pagination,\n initialClientPagination,\n onClientPaginationChange,\n columnVisibility,\n onColumnVisibilityChange,\n columnOrder,\n onColumnOrderChange,\n columnSizing,\n onColumnSizingChange,\n onFilteredCountChange,\n });\n\n const columnConfigById = useMemo(\n () => new Map(config.columns.map((columnConfig) => [columnConfig.id, columnConfig])),\n [config.columns],\n );\n\n // Under `table-fixed` one column absorbs leftover horizontal space. The last\n // visible non-actions, non-badge, non-first column is the flex column.\n const visibleLeafColumns = table.getVisibleLeafColumns();\n const flexColumnId = useMemo(() => {\n if (config.flexColumnId && visibleLeafColumns.some((leafColumn) => leafColumn.id === config.flexColumnId)) {\n return config.flexColumnId;\n }\n\n const candidates = visibleLeafColumns.filter((leafColumn, index) => {\n if (index === 0) return false;\n const type = columnConfigById.get(leafColumn.id)?.type;\n return type !== 'actions' && !isBadgeColumnType(type);\n });\n return candidates[candidates.length - 1]?.id ?? null;\n }, [visibleLeafColumns, columnConfigById, config.flexColumnId]);\n\n // `table-fixed` sizes columns from the table width, so the table must be at\n // least the sum of ALL column widths (including the absorber's seed) for their\n // widths to be honored; below that the browser shrinks them proportionally.\n // `min-w-full` still lets the table stretch to fill the container, and the\n // auto-width absorber soaks the surplus (never shrinking below its own seed,\n // because its seed is part of this total).\n const totalTableWidth = useMemo(\n () => visibleLeafColumns.reduce((sum, leafColumn) => sum + leafColumn.getSize(), 0),\n [visibleLeafColumns, columnSizing],\n );\n\n // ----- Spreadsheet layer -----\n // Toda tabela com coluna editável ganha a camada de planilha sem configuração.\n // O que muda por tabela é QUANDO ela fica ativa: onde o clique na linha já\n // significa \"abrir o registro\", selecionar célula e navegar seriam o mesmo\n // gesto, então o usuário liga o modo no toolbar antes de editar.\n const spreadsheet = useMemo<IDataTableSpreadsheetConfig<T> \| undefined>(() => {\n if (config.spreadsheet === false) return undefined;\n return config.spreadsheet ?? { selection: 'range', fill: {} };\n }, [config.spreadsheet]);\n\n const hasEditableColumns = useMemo(\n () => !!config.editing?.onCellChange && config.columns.some((columnConfig) => !!columnConfig.editable),\n [config.editing, config.columns],\n );\n\n const editModeBehavior = spreadsheet?.mode ?? (config.onRowClick ? 'toggle' : 'always');\n const gridEnabled = !!spreadsheet && (hasEditableColumns \|\| !!config.spreadsheet);\n\n const gridStore = useGridInstance({\n spreadsheet,\n enabled: gridEnabled,\n startsInEditMode: editModeBehavior === 'always',\n });\n\n const isEditMode = useGridEditMode(gridStore);\n const showEditModeToggle = gridEnabled && editModeBehavior === 'toggle';\n\n // Below the tablet edge a real table is unreadable: even the narrowest column\n // set overflows and the user reads it through a horizontal scrollbar. Cards are\n // the readable shape there, so the narrow viewport takes over the choice.\n // Excluded: `fit` layouts without a bespoke card (their cell geometry IS the\n // feature) and the spreadsheet grid while it is ACTIVE. Merely being able to edit\n // is not enough: a table whose edit mode is a toggle stays a reading surface\n // until the user turns it on. A `fit` table that ships `renderCard` opted into a\n // narrow shape, so it takes over as well.\n const forceCardsOnMobile = isMobile && (!isFit \|\| hasCardView) && !isEditMode;\n\n const isGroupedView = hasGroupedView && viewMode === 'grouped';\n const isKanbanView = hasKanbanView && viewMode === 'kanban';\n // Grouped and kanban both hand the whole body to the host, so everything the\n // table draws around a real row list is off in either of them.\n const isDelegatedView = isGroupedView \|\| isKanbanView;\n const isCardsView = hasCardView && (viewMode === 'cards' \|\| (forceCardsOnMobile && !isDelegatedView));\n const useAutoCards = forceCardsOnMobile && !hasCardView && !isDelegatedView;\n\n useEffect(() => {\n if (!gridStore \|\| !commitStatuses) return;\n gridStore.getState().setCellStatuses(commitStatuses);\n }, [gridStore, commitStatuses]);\n\n const navigableColumnIds = useMemo(\n () =>\n visibleLeafColumns\n .filter((leafColumn) => columnConfigById.get(leafColumn.id)?.type !== 'actions')\n .map((leafColumn) => leafColumn.id),\n [visibleLeafColumns, columnConfigById],\n );\n const gridRowIds = useMemo(() => visibleRows.map((row) => row.id), [visibleRows]);\n\n useGridMatrixSync(gridStore, gridRowIds, navigableColumnIds);\n\n // Read through a ref so the callback stays stable while the rows change on\n // every edit: an unstable handler would re-bind the grid keyboard each render.\n const visibleRowsRef = useRef(visibleRows);\n visibleRowsRef.current = visibleRows;\n\n const canEditCell = useCallback(\n ({ rowId, columnId }: IGridCellCoord) => {\n if (!config.editing?.onCellChange) return false;\n\n const editable = columnConfigById.get(columnId)?.editable;\n if (!editable) return false;\n\n const row = visibleRowsRef.current.find((candidate) => candidate.id === rowId);\n if (!row) return false;\n\n return !(editable.disabled?.(row.original) ?? false);\n },\n [config.editing, columnConfigById],\n );\n\n const handleGridKeyDown = useGridKeyboard({\n store: gridStore,\n canEditCell,\n onSave: spreadsheet?.onSave,\n });\n\n const handleFillCommit = useGridFillApply<T>({\n visibleRows,\n columnConfigById,\n spreadsheet,\n onCellChange: config.editing?.onCellChange,\n });\n\n // After an undo in the spreadsheet grid the restored cell becomes the active one, so\n // the user sees which cell changed, even when it sits on another row of the page.\n const handleTableKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const restoredCell = handleUndoShortcut(event);\n if (!restoredCell \|\| !gridStore \|\| !gridStore.getState().isEditMode) return;\n\n const restoredGridRow = visibleRowsRef.current.find((candidate) => candidate.original.id === restoredCell.row.id);\n if (!restoredGridRow) return;\n gridStore.getState().setActiveCell({ rowId: restoredGridRow.id, columnId: restoredCell.columnId });\n },\n [handleUndoShortcut, gridStore],\n );\n\n const handleEditModeToggle = useCallback(() => {\n const store = gridStore;\n if (!store) return;\n store.getState().setEditMode(!store.getState().isEditMode);\n }, [gridStore]);\n\n const cardsScrollRef = useRef<HTMLDivElement \| null>(null);\n const cardsSentinelRef = useRef<HTMLDivElement \| null>(null);\n const cardsLoadMore = cardsInfiniteScroll?.loadMore;\n const cardsHasMore = cardsInfiniteScroll?.hasMore ?? false;\n\n // Cards infinite scroll: load the next page when the bottom sentinel enters the\n // cards scroll container. `loadMore` is stable and self-guards while a page is\n // in flight; re-running on row count keeps the observer bound after each append.\n useEffect(() => {\n if (!isCardsView \|\| !cardsHasMore \|\| !cardsLoadMore) return;\n\n const root = cardsScrollRef.current;\n const sentinel = cardsSentinelRef.current;\n if (!root \|\| !sentinel) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries.some((entry) => entry.isIntersecting)) cardsLoadMore();\n },\n { root, rootMargin: '300px' },\n );\n observer.observe(sentinel);\n\n return () => observer.disconnect();\n }, [isCardsView, cardsHasMore, cardsLoadMore, visibleRows.length]);\n\n const listScrollRef = useRef<HTMLDivElement \| null>(null);\n const [detailSlotWidth, setDetailSlotWidth] = useState<number \| undefined>(undefined);\n const [parentHasHorizontalOverflow, setParentHasHorizontalOverflow] = useState(false);\n\n // Track the list scrollport: its clientWidth sizes the detail panel to the\n // visible area (detailTable expansion), and its horizontal overflow toggles the\n // frozen actions-column shadow (shown only while columns scroll under it, so\n // there is no always-on divider line otherwise). Observing the inner table too\n // keeps both in sync when columns are toggled or the layout reflows. The\n // branch-state deps re-bind when the scroller remounts (view/skeleton/error/\n // empty transitions swap the rendered subtree).\n useEffect(() => {\n const scroller = listScrollRef.current;\n if (!scroller) return undefined;\n\n const measure = () => {\n setDetailSlotWidth(scroller.clientWidth \|\| undefined);\n setParentHasHorizontalOverflow(scroller.scrollWidth > scroller.clientWidth + 1);\n };\n measure();\n\n const observer = new ResizeObserver(measure);\n observer.observe(scroller);\n const parentTable = scroller.querySelector('table');\n if (parentTable) observer.observe(parentTable);\n\n return () => observer.disconnect();\n }, [isCardsView, isDelegatedView, showSkeleton, error, hasRows]);\n\n const renderBody = () => {\n // Grouped view delegates the whole body to the host (it owns fetching,\n // accordions, loading and empty states for each group).\n if (isGroupedView && config.renderGroupedBody) return config.renderGroupedBody();\n if (isKanbanView && config.renderKanbanBody) return config.renderKanbanBody();\n\n if (showSkeleton)\n return isCardsView ? (\n <DataTableCardsSkeletonState cardClassName={config.cardSkeletonClassName} />\n ) : (\n <DataTableSkeletonState rows={config.skeletonRows} />\n );\n\n if (error) return <DataTableErrorState onRetry={onRetry} errorCause={errorCause} />;\n\n // A `bodyTopRow` (e.g. an inline create editor) must stay visible even with\n // zero data rows, so it takes precedence over the empty state.\n if (!hasRows && !bodyTopRow) {\n if (isFit) {\n // Embedded/editor context: skip the full illustration so surrounding\n // controls (e.g. the add-row button) stay visible in a compact dialog.\n return emptyMessage ? (\n <div className=\"py-6 text-center text-sm text-foreground-faint\">{emptyMessage}</div>\n ) : null;\n }\n return <DataTableEmptyState emptyMessage={emptyMessage} />;\n }\n\n if (isCardsView && config.renderCard) {\n // Cards render from the SAME visible rows the table uses (already searched,\n // filtered, sorted and paginated), so both views share one source. No grid:\n // flex-wrap keeps the layout responsive per the project's no-CSS-grid rule.\n return (\n <div ref={cardsScrollRef} className=\"relative min-h-0 flex-1 overflow-y-auto @container\">\n {showUpdatingBar && (\n <div className=\"absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover\" aria-hidden />\n )}\n {/ Cards têm largura fixa, então uma faixa estreita demais para duas colunas\n deixa a sobra toda de um lado. Abaixo disso eles se centram; a partir de\n duas colunas o alinhamento à esquerda volta a ser o que lê melhor. */}\n <div\n className={classNames(\n 'flex flex-wrap justify-center gap-4 @md:justify-start',\n dataTableOpacityTransitionClass,\n config.cardGridClassName,\n )}\n style={contentOpacityStyle}\n >\n {visibleRows\n .filter((row) => row.depth === 0)\n .map((row) => (\n <Fragment key={row.id}>{config.renderCard?.(row.original)}</Fragment>\n ))}\n </div>\n\n {cardsInfiniteScroll?.loadingMore && (\n <div className=\"flex justify-center py-4\">\n <LoadingSpinner size={6} />\n </div>\n )}\n\n {cardsHasMore && <div ref={cardsSentinelRef} className=\"h-px w-full\" aria-hidden />}\n </div>\n );\n }\n\n // Narrow viewport with no bespoke card renderer: stack each row into a card\n // derived from the same columns, so the list stays readable without the host\n // authoring a second renderer.\n if (useAutoCards) {\n return (\n <div className=\"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto\">\n {visibleRows\n .filter((row) => row.depth === 0)\n .map((row) => (\n <DataTableAutoCard key={row.id} row={row} columnConfigById={columnConfigById} />\n ))}\n </div>\n );\n }\n\n // The table scrolls inside this bounded region (flex-1 + min-h-0). The sticky\n // header pins to the top of the data area; the region also scrolls horizontally\n // so columns keep a minimum readable width instead of being crushed. The first\n // column and the actions column are frozen (sticky left/right) so navigation\n // anchors stay visible while the middle columns scroll past.\n return (\n <div\n ref={listScrollRef}\n onKeyDown={gridStore ? handleGridKeyDown : undefined}\n className={classNames(\n 'relative [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-emphasis hover:[&::-webkit-scrollbar-thumb]:bg-foreground-faint [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar]:w-2.5',\n // The rows scroll inside this bounded region (flex-1 + min-h-0), so the\n // host provides the height (a full page, or a bounded flex parent like a\n // fixed-size dialog) and the add-row/footer below stay pinned outside it.\n 'min-h-0 flex-1 overflow-auto',\n )}\n >\n {showUpdatingBar && (\n <div className=\"absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-brand-hover\" aria-hidden />\n )}\n <table\n role={gridStore ? 'grid' : undefined}\n aria-multiselectable={gridStore && spreadsheet?.selection === 'range' ? true : undefined}\n className={classNames(\n // `table-fixed`: column widths come exclusively from the colgroup so\n // user resizes are honored exactly (under `table-auto` the browser\n // ignores explicit col widths and sizes by content). The slack\n // absorber (auto-width col) still soaks any leftover space.\n 'min-w-full table-fixed border-separate border-spacing-0 rounded-md border-y border-border-subtle',\n dataTableOpacityTransitionClass,\n )}\n style={{ ...contentOpacityStyle, width: totalTableWidth \|\| undefined }}\n >\n <DataTableHead\n table={table}\n columns={config.columns}\n columnConfigById={columnConfigById}\n columnContentWidths={columnContentWidths}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n onHeaderSortClick={handleHeaderSortClick}\n resolveSortDirection={resolveSortDirection}\n hideColumnToggle={columnTogglePlacement !== 'header'}\n flexColumnId={flexColumnId}\n showActionsShadow={parentHasHorizontalOverflow}\n dense={dense}\n spacious={spacious}\n />\n\n <DataTableBody\n config={config}\n visibleRows={visibleRows}\n columnConfigById={columnConfigById}\n columnContentWidths={columnContentWidths}\n registerRow={registerRow}\n onCollapseStart={beginRowsExit}\n detailColumnsState={detailColumnsState}\n detailSlotWidth={detailSlotWidth}\n showActionsShadow={parentHasHorizontalOverflow}\n dense={dense}\n spacious={spacious}\n fillEnabled={!!spreadsheet?.fill}\n editMode={isEditMode}\n bodyTopRow={bodyTopRow}\n bodyTopRowColSpan={table.getVisibleLeafColumns().length}\n />\n </table>\n </div>\n );\n };\n\n // Cards normally page themselves through infinite scroll, so the pager is\n // hidden. When the narrow viewport takes the choice over, the host is still in\n // list mode and its `cardsInfiniteScroll` is not wired: without the pager the\n // user would be stranded on the first page.\n const isMobileCardsTakeover = isCardsView && viewMode !== 'cards' && !cardsInfiniteScroll;\n\n const showPagination =\n (!isCardsView \|\| isMobileCardsTakeover) &&\n !isDelegatedView &&\n !!clientPaginationProps &&\n !showSkeleton &&\n !error &&\n hasRows &&\n clientPaginationProps.numberOfPages > 0 &&\n !(clientPaginationProps.numberOfPages === 1 && clientPaginationProps.pageSize <= DATA_TABLE_MIN_PAGE_SIZE);\n\n // The toolbar only skeletons on the very first load: a refetch (tab switch,\n // filter, search) keeps the real controls mounted, so the search term and the\n // focus survive and the row never changes height.\n const [hasLoadedOnce, setHasLoadedOnce] = useState(!loading);\n\n useEffect(() => {\n if (!loading) setHasLoadedOnce(true);\n }, [loading]);\n\n const showSearch = (!!onSearch \|\| isClientMode) && config.searchable !== false;\n const showToolbar =\n (tabs?.length ?? 0) > 0 \|\|\n hasCardView \|\|\n showSearch \|\|\n !!toolbarSlot \|\|\n !!toolbarStartSlot \|\|\n columnTogglePlacement === 'toolbar';\n\n const columnToggleSlot =\n columnTogglePlacement === 'toolbar' ? (\n <DataTableColumnToggle\n table={table}\n columns={config.columns}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n variant=\"toolbar\"\n />\n ) : undefined;\n\n // O rodapé é o lugar dos controles da própria tabela (colunas e modo de edição),\n // ao lado da paginação. Ambos só existem sobre uma lista real.\n const showTableControls = !isCardsView && !isDelegatedView && !showSkeleton && !error && hasRows;\n const showFooterColumnToggle = columnTogglePlacement === 'footer' && showTableControls;\n const showFooterEditToggle = showEditModeToggle && showTableControls;\n\n // A edição em massa não depende do modo de exibição: em cards ela é a única\n // forma de editar, já que não existe célula para clicar.\n const showBulkEdit =\n hasEditableColumns && !!spreadsheet?.fill?.onFillCells && !isDelegatedView && !showSkeleton && !error && hasRows;\n const bulkEditRows = useMemo(\n () => visibleRows.filter((row) => row.depth === 0).map((row) => row.original),\n [visibleRows],\n );\n\n const activeFiltersBar =\n config.filters && filterValues && onFilterValuesChange ? (\n <ActiveFiltersBar\n fields={config.filters.fields ?? []}\n values={filterValues}\n onRemove={(key) =>\n onFilterValuesChange({\n ...filterValues,\n [key]: emptyValueForKind((config.filters?.fields ?? []).find((field) => field.key === key)?.kind ?? 'text'),\n })\n }\n onClearAll={() => onFilterValuesChange(buildEmptyFilterValues(config.filters?.fields ?? []))}\n />\n ) : null;\n\n const content = (\n <div\n className=\"flex min-h-0 w-full flex-1 flex-col gap-4\"\n onKeyDown={isUndoEnabled ? handleTableKeyDown : undefined}\n >\n {activeFiltersBar}\n {showToolbar && (\n <DataTableToolbar\n tabs={tabs}\n activeTab={activeTab}\n onTabChange={handleTabChange}\n showViewToggle={hasCardView && !hideViewToggle && !forceCardsOnMobile}\n showGroupedView={hasGroupedView}\n showKanbanView={hasKanbanView}\n viewMode={viewMode}\n onViewModeChange={handleViewModeChange}\n showSearch={showSearch}\n searchLabel={searchLabel}\n initialSearch={initialSearch}\n searchDisabled={searchDisabled}\n searchDebounceTime={isClientMode ? clientSearchDebounceMs : searchDebounceTime}\n searchMinLength={searchMinLength}\n searchAtStart={searchAtStart}\n onSearchInput={handleSearchInput}\n toolbarSlot={toolbarSlot}\n toolbarStartSlot={toolbarStartSlot}\n columnToggleSlot={columnToggleSlot}\n showSkeleton={loading && !hasLoadedOnce}\n />\n )}\n\n <div key={viewMode} className=\"flex min-h-0 flex-1 animate-fade-in flex-col\">\n {renderBody()}\n </div>\n\n {showAddRow && (\n // Sibling of the scrolling rows region, so it stays pinned below the grid\n // (outside its scroll) — the rows scroll, this control does not move.\n <div className=\"flex\">\n <ControlledButton\n variant=\"outlined\"\n className=\"flex items-center gap-1.5\"\n onClick={() => editingRows?.onAddRow?.()}\n >\n <MaterialSymbol icon=\"add\" size={16} />\n {t('dataTable.addRow')}\n </ControlledButton>\n </div>\n )}\n\n {(showFooterColumnToggle \|\| showFooterEditToggle \|\| showBulkEdit \|\| showPagination) && (\n <div className=\"flex items-center justify-between gap-4\">\n {(showFooterColumnToggle \|\| showFooterEditToggle \|\| showBulkEdit) && (\n <div className=\"flex flex-wrap items-center gap-2 pb-3\">\n {showFooterColumnToggle && (\n <DataTableColumnToggle\n table={table}\n columns={config.columns}\n columnOrder={columnOrder}\n onColumnOrderChange={onColumnOrderChange}\n resetColumnOrder={resetColumnOrder}\n resetColumnSizing={resetColumnSizing}\n variant=\"toolbar\"\n />\n )}\n {showFooterEditToggle && <DataTableEditModeButton active={isEditMode} onToggle={handleEditModeToggle} />}\n {showBulkEdit && <DataTableBulkEditButton onClick={() => setIsBulkEditOpen(true)} />}\n </div>\n )}\n\n {showPagination && (\n <div className=\"flex-1\">\n <DataTablePaginationBar\n pageSize={clientPaginationProps.pageSize}\n numberOfPages={clientPaginationProps.numberOfPages}\n currentPage={clientPaginationProps.currentPage}\n setCurrentPage={clientPaginationProps.setCurrentPage}\n onPageSizeChange={clientPaginationProps.onPageSizeChange}\n totalItems={clientPaginationProps.totalItems}\n />\n </div>\n )}\n </div>\n )}\n\n {showBulkEdit && (\n <DataTableBulkEditDialog\n open={isBulkEditOpen}\n onClose={() => setIsBulkEditOpen(false)}\n columns={config.columns}\n rows={bulkEditRows}\n getRowLabel={config.getRowLabel}\n onApply={(changes) => spreadsheet?.fill?.onFillCells?.(changes)}\n />\n )}\n </div>\n );\n\n // Os providers ficam por fora do conteúdo já montado: abrir ou fechar uma célula re-renderiza\n // apenas as células editáveis, não a tabela inteira.\n const editableContent = config.editing?.clickToEdit ? (\n <DataTableCellEditingProvider>{content}</DataTableCellEditingProvider>\n ) : (\n content\n );\n\n if (!gridStore) return editableContent;\n\n return (\n <GridProvider store={gridStore} onFillCommit={handleFillCommit}>\n {editableContent}\n </GridProvider>\n );\n};\n\nexport default DataTable;\n"],"names":["DataTablePaginationBar"],"mappings":"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"}

package/dist/components/UI/DataTable/grid/useGridKeyboard.d.ts CHANGED Viewed

@@ -8,6 +8,12 @@ interface IUseGridKeyboardParams {
     canEditCell?: (coord: IGridCellCoord) => boolean;
     onSave?: () => void;
 }
+/**
+ * A control that owns the caret (input, textarea, select, contenteditable) keeps
+ * every key the grid would otherwise claim: the horizontal arrows walk the text,
+ * not the columns.
+ */
+export declare const isTextEntryTarget: (target: EventTarget | null) => boolean;
 /**
  * The grid's ONLY keyboard listener: one React handler on the scroll container,
  * reached by bubbling from the focused cell. No document listeners, no per-cell

package/dist/components/UI/DataTable/grid/useGridKeyboard.js CHANGED Viewed

@@ -115,6 +115,7 @@ const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
   [store, canEditCell, onSave]
 );
 export {
+  isTextEntryTarget,
   useGridKeyboard
 };
 //# sourceMappingURL=useGridKeyboard.js.map

package/dist/components/UI/DataTable/grid/useGridKeyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useGridKeyboard.js","sources":["../../../../../src/components/UI/DataTable/grid/useGridKeyboard.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridState } from './gridStore';\nimport { GRID_CELL_DATA_ATTR, type IGridCellCoord } from './gridTypes';\n\ninterface IUseGridKeyboardParams {\n store: StoreApi<IGridState> \| null;\n /** Whether the cell can open an editor, so Enter/F2 know what to do. /\n canEditCell?: (coord: IGridCellCoord) => boolean;\n onSave?: () => void;\n}\n\nconst CELL_CONTENT_FOCUS_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]',\n]\n .map((selector) => `${selector}:not([tabindex=\"-1\"])`)\n .join(', ');\n\n/* The `<td>` the event came from, so the handler never queries the whole document. /\nconst resolveCellElement = (target: EventTarget \| null): HTMLElement \| null =>\n target instanceof HTMLElement ? target.closest<HTMLElement>(`[${GRID_CELL_DATA_ATTR}]`) : null;\n\n/\n A control that owns the caret (input, textarea, select, contenteditable) keeps\n * every key the grid would otherwise claim: the horizontal arrows walk the text,\n * not the columns.\n /\~~nconst~~ isTextEntryTarget = (target: EventTarget \| null): boolean => {\n if (!(target instanceof HTMLElement)) return false;\n if (target.isContentEditable) return true;\n\n return target.tagName === 'INPUT' \|\| target.tagName === 'TEXTAREA' \|\| target.tagName === 'SELECT';\n};\n\n/\n Tab walks to the neighbouring cell and OPENS its editor when the cell accepts one, so a\n * row is filled by typing and tabbing instead of reopening the editor at every stop.\n * Returns whether the active cell moved, which is what decides if the grid keeps the event.\n /\nconst moveKeepingTheEditorOpen = (\n store: StoreApi<IGridState>,\n columnDelta: 1 \| -1,\n canEditCell?: (coord: IGridCellCoord) => boolean,\n): boolean => {\n // Past the last cell the grid gives the focus back to the page: trapping Tab inside a\n // table is a keyboard trap, not a spreadsheet.\n if (!store.getState().moveActiveCell(0, columnDelta, { wrap: true })) return false;\n\n const { activeCell, startEditing } = store.getState();\n if (activeCell && canEditCell?.(activeCell)) startEditing(activeCell);\n\n return true;\n};\n\n/\n The grid's ONLY keyboard listener: one React handler on the scroll container,\n * reached by bubbling from the focused cell. No document listeners, no per-cell\n * handlers, so two tables on the same screen never fight over the same keys.\n */\nexport const useGridKeyboard = ({ store, canEditCell, onSave }: IUseGridKeyboardParams) =>\n useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if (!store) return;\n\n const state = store.getState();\n const { key } = event;\n\n if ((event.metaKey \|\| event.ctrlKey) && (key === 's' \|\| key === 'S')) {\n if (!onSave) return;\n event.preventDefault();\n onSave();\n return;\n }\n\n const isEditing = !!state.editingCell \|\| isTextEntryTarget(event.target);\n\n if (isEditing) {\n if (key === 'Escape') {\n // The table may live inside a dialog or drawer: leaving the editor must\n // not also close the surface around it.\n event.stopPropagation();\n state.stopEditing('cancel');\n return;\n }\n\n if (key === 'Enter') {\n event.preventDefault();\n state.stopEditing();\n state.moveActiveCell(1, 0);\n return;\n }\n\n if (key === 'Tab') {\n state.stopEditing();\n if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n }\n\n return;\n }\n\n const cellElement = resolveCellElement(event.target);\n const isInsideCellContent = !!cellElement && event.target !== cellElement;\n\n // Focus went into a control inside the cell (an action button, a link).\n // While it is there the cell content owns the keyboard, and Escape brings\n // the focus back to the cell.\n if (isInsideCellContent) {\n if (key !== 'Escape') return;\n event.preventDefault();\n cellElement.focus();\n return;\n }\n\n const extend = event.shiftKey;\n\n switch (key) {\n case 'ArrowUp':\n event.preventDefault();\n state.moveActiveCell(-1, 0, { extend });\n return;\n case 'ArrowDown':\n event.preventDefault();\n state.moveActiveCell(1, 0, { extend });\n return;\n case 'ArrowLeft':\n event.preventDefault();\n state.moveActiveCell(0, -1, { extend });\n return;\n case 'ArrowRight':\n event.preventDefault();\n state.moveActiveCell(0, 1, { extend });\n return;\n case 'Tab':\n if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n return;\n case 'Home':\n event.preventDefault();\n state.moveActiveToEdge(event.ctrlKey \|\| event.metaKey ? -1 : 0, -1, { extend });\n return;\n case 'End':\n event.preventDefault();\n state.moveActiveToEdge(event.ctrlKey \|\| event.metaKey ? 1 : 0, 1, { extend });\n return;\n case 'Enter':\n case 'F2': {\n const active = state.activeCell;\n if (!active) return;\n\n if (canEditCell?.(active)) {\n event.preventDefault();\n state.startEditing(active);\n return;\n }\n\n // Read-only cell: Enter steps INTO whatever control it holds, which is\n // the only way a keyboard user reaches the per-row actions now that Tab\n // walks the cells.\n const focusableInsideCell = cellElement?.querySelector<HTMLElement>(CELL_CONTENT_FOCUS_SELECTOR);\n if (focusableInsideCell) {\n event.preventDefault();\n focusableInsideCell.focus();\n return;\n }\n\n if (key !== 'Enter') return;\n event.preventDefault();\n state.moveActiveCell(1, 0);\n\n return;\n }\n case 'Escape':\n state.clearSelection();\n return;\n default:\n }\n },\n [store, canEditCell, onSave],\n );\n"],"names":[],"mappings":";;AAaA,MAAM,8BAA8B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,CAAC,aAAa,GAAG,QAAQ,uBAAuB,EACpD,KAAK,IAAI;AAGZ,MAAM,qBAAqB,CAAC,WAC1B,kBAAkB,cAAc,OAAO,QAAqB,IAAI,mBAAmB,GAAG,IAAI;~~AAO5F~~,MAAM,oBAAoB,CAAC,WAAwC;~~AACjE~~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"}
1	+ {"version":3,"file":"useGridKeyboard.js","sources":["../../../../../src/components/UI/DataTable/grid/useGridKeyboard.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridState } from './gridStore';\nimport { GRID_CELL_DATA_ATTR, type IGridCellCoord } from './gridTypes';\n\ninterface IUseGridKeyboardParams {\n store: StoreApi<IGridState> \| null;\n /** Whether the cell can open an editor, so Enter/F2 know what to do. /\n canEditCell?: (coord: IGridCellCoord) => boolean;\n onSave?: () => void;\n}\n\nconst CELL_CONTENT_FOCUS_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]',\n]\n .map((selector) => `${selector}:not([tabindex=\"-1\"])`)\n .join(', ');\n\n/* The `<td>` the event came from, so the handler never queries the whole document. /\nconst resolveCellElement = (target: EventTarget \| null): HTMLElement \| null =>\n target instanceof HTMLElement ? target.closest<HTMLElement>(`[${GRID_CELL_DATA_ATTR}]`) : null;\n\n/\n A control that owns the caret (input, textarea, select, contenteditable) keeps\n * every key the grid would otherwise claim: the horizontal arrows walk the text,\n * not the columns.\n /\nexport const isTextEntryTarget = (target: EventTarget \| null): boolean => {\n if (!(target instanceof HTMLElement)) return false;\n if (target.isContentEditable) return true;\n\n return target.tagName === 'INPUT' \|\| target.tagName === 'TEXTAREA' \|\| target.tagName === 'SELECT';\n};\n\n/\n Tab walks to the neighbouring cell and OPENS its editor when the cell accepts one, so a\n * row is filled by typing and tabbing instead of reopening the editor at every stop.\n * Returns whether the active cell moved, which is what decides if the grid keeps the event.\n /\nconst moveKeepingTheEditorOpen = (\n store: StoreApi<IGridState>,\n columnDelta: 1 \| -1,\n canEditCell?: (coord: IGridCellCoord) => boolean,\n): boolean => {\n // Past the last cell the grid gives the focus back to the page: trapping Tab inside a\n // table is a keyboard trap, not a spreadsheet.\n if (!store.getState().moveActiveCell(0, columnDelta, { wrap: true })) return false;\n\n const { activeCell, startEditing } = store.getState();\n if (activeCell && canEditCell?.(activeCell)) startEditing(activeCell);\n\n return true;\n};\n\n/\n The grid's ONLY keyboard listener: one React handler on the scroll container,\n * reached by bubbling from the focused cell. No document listeners, no per-cell\n * handlers, so two tables on the same screen never fight over the same keys.\n */\nexport const useGridKeyboard = ({ store, canEditCell, onSave }: IUseGridKeyboardParams) =>\n useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if (!store) return;\n\n const state = store.getState();\n const { key } = event;\n\n if ((event.metaKey \|\| event.ctrlKey) && (key === 's' \|\| key === 'S')) {\n if (!onSave) return;\n event.preventDefault();\n onSave();\n return;\n }\n\n const isEditing = !!state.editingCell \|\| isTextEntryTarget(event.target);\n\n if (isEditing) {\n if (key === 'Escape') {\n // The table may live inside a dialog or drawer: leaving the editor must\n // not also close the surface around it.\n event.stopPropagation();\n state.stopEditing('cancel');\n return;\n }\n\n if (key === 'Enter') {\n event.preventDefault();\n state.stopEditing();\n state.moveActiveCell(1, 0);\n return;\n }\n\n if (key === 'Tab') {\n state.stopEditing();\n if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n }\n\n return;\n }\n\n const cellElement = resolveCellElement(event.target);\n const isInsideCellContent = !!cellElement && event.target !== cellElement;\n\n // Focus went into a control inside the cell (an action button, a link).\n // While it is there the cell content owns the keyboard, and Escape brings\n // the focus back to the cell.\n if (isInsideCellContent) {\n if (key !== 'Escape') return;\n event.preventDefault();\n cellElement.focus();\n return;\n }\n\n const extend = event.shiftKey;\n\n switch (key) {\n case 'ArrowUp':\n event.preventDefault();\n state.moveActiveCell(-1, 0, { extend });\n return;\n case 'ArrowDown':\n event.preventDefault();\n state.moveActiveCell(1, 0, { extend });\n return;\n case 'ArrowLeft':\n event.preventDefault();\n state.moveActiveCell(0, -1, { extend });\n return;\n case 'ArrowRight':\n event.preventDefault();\n state.moveActiveCell(0, 1, { extend });\n return;\n case 'Tab':\n if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n return;\n case 'Home':\n event.preventDefault();\n state.moveActiveToEdge(event.ctrlKey \|\| event.metaKey ? -1 : 0, -1, { extend });\n return;\n case 'End':\n event.preventDefault();\n state.moveActiveToEdge(event.ctrlKey \|\| event.metaKey ? 1 : 0, 1, { extend });\n return;\n case 'Enter':\n case 'F2': {\n const active = state.activeCell;\n if (!active) return;\n\n if (canEditCell?.(active)) {\n event.preventDefault();\n state.startEditing(active);\n return;\n }\n\n // Read-only cell: Enter steps INTO whatever control it holds, which is\n // the only way a keyboard user reaches the per-row actions now that Tab\n // walks the cells.\n const focusableInsideCell = cellElement?.querySelector<HTMLElement>(CELL_CONTENT_FOCUS_SELECTOR);\n if (focusableInsideCell) {\n event.preventDefault();\n focusableInsideCell.focus();\n return;\n }\n\n if (key !== 'Enter') return;\n event.preventDefault();\n state.moveActiveCell(1, 0);\n\n return;\n }\n case 'Escape':\n state.clearSelection();\n return;\n default:\n }\n },\n [store, canEditCell, onSave],\n );\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/types.d.ts CHANGED Viewed

@@ -219,6 +219,12 @@ export interface IDataTableEditingConfig<T extends IDataTableRow> {
      * continuam sendo editores sempre visíveis.
      */
     clickToEdit?: boolean;
+    /**
+     * Ctrl/Cmd+Z reverts the last edit made through the table and Ctrl/Cmd+Shift+Z
+     * (or Ctrl+Y) reapplies it, by writing the previous value back through
+     * `onCellChange` / `spreadsheet.fill.onFillCells`. On by default; `false` opts out.
+     */
+    undo?: boolean;
     rows?: IDataTableEditingRowsConfig<T>;
 }
 export interface IDataTableDetailField {

package/dist/components/UI/DataTable/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../../src/components/UI/DataTable/types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { IFilterGroup, TFilterCombinator, TFilterField } from '@/components/Search/filters';\nimport type { TUiCapability } from '@/components/UI/access/UiAccessContext';\nimport type { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport type { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport type { IGridNavigationConfig } from './grid/gridTypes';\n\nexport type { IGridNavigationConfig, TGridSelectionMode } from './grid/gridTypes';\n\nexport interface IDataTableRow {\n id: string;\n}\n\nexport type TDataTableSortDirection = 'asc' \| 'desc';\n\nexport interface IDataTableSortState {\n sortBy: string;\n sortDir: TDataTableSortDirection;\n}\n\nexport type TDataTableStatusTone = 'active' \| 'inactive';\n\nexport interface IDataTableStatusValue {\n label: string;\n tone: TDataTableStatusTone;\n}\n\nexport type TDataTableOriginTone = 'erp' \| 'custom' \| 'official' \| 'legacy' \| 'default';\n\nexport interface IDataTableOriginValue {\n label: string;\n tone: TDataTableOriginTone;\n}\n\nexport interface IDataTableTagValue {\n label: string;\n className?: string;\n chipIcon?: SymbolCodepoints;\n}\n\nexport interface IDataTableColorValue {\n hex: string \| null;\n label?: string;\n}\n\nexport interface IDataTableThumbnailValue {\n src: string \| null;\n label?: string;\n}\n\nexport interface IDataTableActionItem<T extends IDataTableRow> {\n key: string;\n label: string \| ((row: T) => string);\n icon?: SymbolCodepoints \| ((row: T) => SymbolCodepoints);\n /*\n Optional numeric badge rendered next to the icon (e.g. how many users the\n * action navigates to). Return `null`/`undefined` to render the icon alone.\n /\n count?: (row: T) => number \| null \| undefined;\n danger?: boolean;\n hidden?: (row: T) => boolean;\n disabled?: (row: T) => boolean;\n /* Missing capability disables the action and replaces its tooltip with the denial reason. /\n capability?: TUiCapability \| Array<TUiCapability>;\n /\n Renders the action as a real `ControlledSwitch` instead of an icon button, returning\n * the current on/off state of the row. `onClick` still fires on toggle; `icon` is ignored.\n /\n toggle?: (row: T) => boolean;\n onClick: (row: T) => void;\n}\n\nexport type TDataTableCellType =\n \| 'text'\n \| 'code'\n \| 'color'\n \| 'thumbnail'\n \| 'badgeStatus'\n \| 'tag'\n \| 'origin'\n \| 'count'\n \| 'date'\n \| 'commitment'\n \| 'actions'\n \| 'custom';\n\n/\n A column config describes how to render one cell type from an entity row.\n * `accessor` maps a row to the value the cell renderer consumes; the concrete\n * value shape depends on `type` (see the cell renderers). `render` allows a\n * fully custom cell when no catalog renderer fits.\n /\nexport interface IDataTableColumnConfig<T extends IDataTableRow> {\n id: string;\n header: string;\n /* Optional tooltip shown on hover over the column header label. /\n headerTooltip?: string;\n /\n Optional banded header. Contiguous VISIBLE columns sharing the same label\n * render one spanning cell in an extra row above the header row; columns\n * without a label get an empty band cell. The band follows the current column\n * order, so it is meant for tables with fixed ordering (editor grids).\n /\n headerGroupLabel?: string;\n type: TDataTableCellType;\n headerAlign?: 'left' \| 'center' \| 'right';\n cellAlign?: 'left' \| 'center' \| 'right';\n /\n Escape hatch for exceptional column widths. Prefer the built-in rules per\n * `type` (actions fixed, badge compact, default min-w-[7.5rem]).\n /\n widthClassName?: string;\n sortable?: boolean;\n /\n Whether the end-user may hide this column via the \"Colunas\" toggle. A column\n * is hideable unless this is explicitly `false`. Identity/first columns and the\n * `actions` column must set `hideable: false` so the table never goes empty.\n /\n hideable?: boolean;\n /* Column starts hidden (still toggleable back on via the \"Colunas\" control). /\n defaultHidden?: boolean;\n /\n Whether the end-user may drag-resize this column. Defaults to `true`. The\n * `actions` column is never resizable regardless of this flag. Minimum width\n * is max(type seed, header label width); resizing only ever widens it.\n /\n resizable?: boolean;\n /* Backend sort field. Used by server mode. Required when `sortable` in server mode. /\n sortField?: string;\n /\n Entity property this column maps to in the backend export catalog. Columns\n * that declare it are offered to the export as `fields`, so the generated file\n * carries the columns the user left visible, in the order they arranged them.\n * A column with no equivalent in the catalog simply omits it.\n /\n exportKey?: string;\n accessor?: (row: T) => unknown;\n /\n Client mode: the sortable/globally-filterable primitive for this column.\n * Required for sortable columns whose `accessor` returns an object (e.g.\n * badgeStatus/origem/tag). Falls back to `accessor` when it returns a\n * primitive, else to an empty string.\n /\n sortAccessor?: (row: T) => string \| number \| boolean;\n render?: (row: T) => ReactNode;\n /* For the `actions` cell type. /\n actions?: Array<IDataTableActionItem<T>>;\n /\n Additive, opt-in inline editing for this column. When set (and the table has\n * `editing.onCellChange`), the cell renders a controlled editor instead of the\n * read-only renderer. Omit to keep the column read-only.\n /\n editable?: IDataTableEditableConfig<T>;\n}\n\n/\n Inline editing descriptor for one column (additive, opt-in). Turns the cell\n * into a live editor rendered with the project's controlled inputs. This is a\n * CONTROLLED model: the host owns the row data and re-renders after each change,\n * mirroring the existing `onRowsChange` pattern of editor grids. Columns without\n * this field render read-only exactly as before.\n /\nexport type TDataTableEditableType = 'text' \| 'number' \| 'date' \| 'select' \| 'multiselect';\n\nexport interface IDataTableEditableConfig<T extends IDataTableRow> {\n type: TDataTableEditableType;\n /* Options for `type: 'select'` / `'multiselect'`. Ignored by the other input types. /\n options?: Array<IFilterOption>;\n /\n Editor próprio, para o que os tipos acima não alcançam (uma lista paginada\n * vinda de uma biblioteca, por exemplo). Quando existe, ele substitui o editor\n * derivado de `type`, que segue valendo para leitura, preenchimento e validação.\n /\n renderEditor?: (params: {\n value: unknown;\n onChange: (value: unknown) => void;\n disabled?: boolean;\n label?: string;\n }) => ReactNode;\n /* Current cell value read from the (host-owned) row. /\n getValue: (row: T) => string \| number \| Array<string> \| null;\n /* Disable editing for a specific row (renders a disabled input). /\n disabled?: (row: T) => boolean;\n /* Returns an inline error message for the current value, or `null` when valid. /\n validate?: (value: unknown, row: T) => string \| null;\n /\n Texto exibido no modo de leitura de `editing.clickToEdit`. Por padrão o valor é derivado do\n * tipo do editor (o rótulo da opção nos selects, a data formatada, o valor cru nos demais).\n /\n displayValue?: (row: T) => string;\n /* Drag-to-fill from this column. Defaults to `true` when the table enables `spreadsheet.fill`. /\n fillable?: boolean;\n /\n Forces one fill strategy instead of detecting it from the source values\n * (`constant`, `numericSeries`, `dateSeries`).\n /\n fillStrategy?: string;\n}\n\nexport interface IDataTableFillChange<T extends IDataTableRow> {\n row: T;\n columnId: string;\n value: unknown;\n}\n\nexport interface IDataTableFillConfig<T extends IDataTableRow> {\n /\n Applies a whole fill in one call: the host decides how to persist it (a batch\n * request, one queued mutation per cell, an optimistic update). Without it the\n * table falls back to `editing.onCellChange` per written cell.\n /\n onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;\n /* Upper bound of cells one drag may write. Defaults to 500. /\n maxCells?: number;\n}\n\nexport interface IDataTableSpreadsheetConfig<T extends IDataTableRow> extends IGridNavigationConfig {\n /* Enables the fill handle on editable columns. Omit for navigation only. /\n fill?: IDataTableFillConfig<T>;\n}\n\n/\n Add/remove row affordances for an editable table. Only rendered when the\n * corresponding handler is configured: the \"add row\" button appears in the\n * footer when `onAddRow` is set, and a trailing delete control per row when\n * `onRemoveRow` is set (`canRemove` hides it per row).\n /\nexport interface IDataTableEditingRowsConfig<T extends IDataTableRow> {\n canAdd?: boolean;\n onAddRow?: () => void;\n canRemove?: (row: T) => boolean;\n onRemoveRow?: (row: T) => void;\n}\n\n/\n Root editing config. `onCellChange` is fired for every editable cell edit with\n * the row, the column id and the new value; the host translates it into its own\n * state update (controlled). Adding this object never changes a table that has no\n * `editable` columns and no `rows` handlers.\n /\nexport interface IDataTableEditingConfig<T extends IDataTableRow> {\n onCellChange: (row: T, columnId: string, value: unknown) => void;\n /\n Opt-in: pressing Enter inside a typeable editable cell (text/number) moves\n * focus to the next editable input in DOM order. Native Tab still traverses all\n * cells; date/select cells keep their own popover Enter behaviour.\n /\n keyboardNav?: boolean;\n /\n Opt-in: as células editáveis exibem o valor como texto e só viram o editor ao serem clicadas\n * (Tab / Shift+Tab andam entre elas, Esc e o clique fora encerram). Sem a flag, todas as células\n * continuam sendo editores sempre visíveis.\n /\n clickToEdit?: boolean;\n rows?: IDataTableEditingRowsConfig<T>;\n}\n\nexport interface IDataTableDetailField {\n label: string;\n value: ReactNode;\n}\n\nexport interface IDataTableDetailConfig<T extends IDataTableRow> {\n title: (row: T) => string;\n code?: (row: T) => string \| null;\n status?: (row: T) => IDataTableStatusValue \| null;\n color?: (row: T) => IDataTableColorValue \| null;\n thumbnail?: (row: T) => IDataTableThumbnailValue \| null;\n fields: (row: T) => Array<IDataTableDetailField>;\n /\n Full-width block rendered under the two-column `fields`, for content that does not fit a\n * label/value pair (a child list, a nested table). Omit for a fields-only detail.\n /\n content?: (row: T) => ReactNode;\n}\n\nexport interface IDataTableTab<T extends IDataTableRow = IDataTableRow> {\n value: string;\n label: string;\n count?: number;\n /\n Client mode: rows are filtered by the active tab's predicate BEFORE search,\n * sort and pagination. Omit (or return true) for an \"all\" tab.\n /\n clientPredicate?: (row: T) => boolean;\n}\n\n/\n How the table processes filter/sort/pagination.\n * - `server` (default): the host owns round-trips; the table renders the rows\n * it is given and reports intent via `onSearch` / `onSortChange` / `pagination`.\n * - `client`: the table receives ALL rows once and does filter/sort/pagination\n * in memory (TanStack row models). No round-trips, instant, animated.\n /\nexport type TDataTableDataMode = 'server' \| 'client';\n\n/* Body layout the user can switch between via the toolbar toggle. /\nexport type TDataTableViewMode = 'list' \| 'cards' \| 'grouped' \| 'kanban';\n\n/\n Shared expand affordance. Chevron visibility is driven by `canExpand` (or a\n * mode-specific default). `onExpandChange` fires after the toggle. Use it for\n * lazy fetches in either mode.\n /\ninterface IDataTableExpansionConfigBase<T extends IDataTableRow> {\n canExpand?: (row: T) => boolean;\n onExpandChange?: (row: T, expanded: boolean) => void;\n /\n Column that carries the expand chevron and toggles the row when its cell is clicked.\n * Defaults to the first column. Use it when the expansion belongs to one specific\n * column (a \"pending approvals\" count) rather than to the row identity.\n /\n triggerColumnId?: string;\n}\n\n/\n Master/detail expansion: child rows render indented under the parent using\n * the same columns. Children can be loaded lazily: `getSubRows` returns\n * `undefined` until they arrive, `canExpand` decides the chevron from a count,\n * and `isLoadingChildren` drives a loading placeholder while the fetch runs.\n \n `mode` defaults to `'subRows'` when omitted so existing Libraries configs\n * keep working without changes.\n /\nexport interface IDataTableSubRowsExpansionConfig<T extends IDataTableRow> extends IDataTableExpansionConfigBase<T> {\n mode?: 'subRows';\n getSubRows: (row: T) => Array<T> \| undefined;\n isLoadingChildren?: (row: T) => boolean;\n}\n\n/\n Helpers passed to panel `renderExpandedContent` so the panel can sync with\n * the table's expand state (e.g. a \"Collapse\" button inside an inline form).\n /\nexport interface IDataTableExpandedContentContext {\n collapse: () => void;\n}\n\n/\n Panel expansion: the row expands into arbitrary React content (forms, editors,\n * rich panels) spanning the full table width. XOR with subRows. Do not combine\n * `getSubRows` and `renderExpandedContent` on the same config.\n \n When `canExpand` is omitted, every row is expandable. Use `isLoadingContent`\n * for a lazy-load spinner in the panel slot.\n /\nexport interface IDataTablePanelExpansionConfig<T extends IDataTableRow> extends IDataTableExpansionConfigBase<T> {\n mode: 'panel';\n renderExpandedContent: (row: T, context: IDataTableExpandedContentContext) => ReactNode;\n isLoadingContent?: (row: T) => boolean;\n}\n\n/\n Master/detail expansion with child-specific columns (AG-Grid style): the row\n * expands into a nested detail table whose columns describe a DIFFERENT row\n * type (`C`) than the parent (`T`). The detail table renders in the full-width\n * expanded slot with its own header row and the standard cell renderer catalog,\n * but has no toolbar, pagination or sorting. The detail table carries its OWN\n * \"Colunas\" menu (visibility + drag reordering), independent from the parent's\n * and persisted under `${entityKey}:detail`; `defaultHidden` detail columns\n * start hidden and can be toggled back on there.\n \n Children can be loaded lazily: `getDetailRows` returns `undefined` until they\n * arrive and a spinner shows while it does (or while `isLoadingChildren` is\n * true). Use `onExpandChange` from the base config to trigger the fetch.\n /\nexport interface IDataTableDetailTableExpansionConfig<\n T extends IDataTableRow,\n C extends IDataTableRow = IDataTableRow,\n> extends IDataTableExpansionConfigBase<T> {\n mode: 'detailTable';\n /* Columns for the detail (child) rows, independent from the parent columns. A function form receives the parent row, for details whose columns vary per parent (dynamic columns skip the persisted show/hide and order state). /\n columns: Array<IDataTableColumnConfig<C>> \| ((parentRow: T) => Array<IDataTableColumnConfig<C>>);\n /* Detail rows of a parent. Return `undefined` while they are still loading. /\n getDetailRows: (row: T) => Array<C> \| undefined;\n isLoadingChildren?: (row: T) => boolean;\n onDetailRowClick?: (detailRow: C, parentRow: T) => void;\n detailRowIsDimmed?: (detailRow: C) => boolean;\n /* Shown when a parent expands to zero detail rows. Defaults to the shared empty label. /\n emptyMessage?: string;\n}\n\n/\n Master/detail expansion into a FULL nested `DataTable`: the row expands into a\n * self-contained `DataTable` driven by its own `childConfig` (its own toolbar,\n * search, pagination, cell catalog, etc.) for a child row type `C`. Unlike\n * `detailTable` (a lightweight header+rows panel), this reuses the whole\n * component so the nested table has every DataTable capability.\n \n Children can be loaded lazily: `getChildRows` returns `undefined` until they\n * arrive, `loadChildren` is invoked on expand to trigger the fetch, and\n * `isLoadingChildren` drives the nested table's own loading state.\n /\nexport interface IDataTableTableExpansionConfig<\n T extends IDataTableRow,\n C extends IDataTableRow = IDataTableRow,\n> extends IDataTableExpansionConfigBase<T> {\n mode: 'table';\n /* Full config for the nested child table. /\n childConfig: IDataTableConfig<C>;\n /* Child rows of a parent. Return `undefined` while they are still loading / not fetched. /\n getChildRows: (row: T) => Array<C> \| undefined;\n /* Lazy fetch invoked on expand when `getChildRows` returns `undefined`. /\n loadChildren?: (row: T) => Promise<void>;\n isLoadingChildren?: (row: T) => boolean;\n}\n\n/\n Row expansion config. Discriminated by `mode`:\n * - `'subRows'` (default): nested table rows via `getSubRows`, same columns\n * - `'panel'`: custom React content via `renderExpandedContent`\n * - `'detailTable'`: nested detail table with its own columns for a child row type\n * - `'table'`: a full nested `DataTable` driven by `childConfig` for a child row type\n /\nexport type TDataTableExpansionConfig<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> =\n \| IDataTableSubRowsExpansionConfig<T>\n \| IDataTablePanelExpansionConfig<T>\n \| IDataTableDetailTableExpansionConfig<T, C>\n \| IDataTableTableExpansionConfig<T, C>;\n\nexport const isDataTablePanelExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTablePanelExpansionConfig<T> => expansion.mode === 'panel';\n\nexport const isDataTableDetailTableExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableDetailTableExpansionConfig<T, C> => expansion.mode === 'detailTable';\n\nexport const isDataTableTableExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableTableExpansionConfig<T, C> => expansion.mode === 'table';\n\nexport const isDataTableSubRowsExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableSubRowsExpansionConfig<T> => expansion.mode === undefined \|\| expansion.mode === 'subRows';\n\n/\n Id of the synthetic trailing actions column injected when `editing.rows`\n * declares an `onRemoveRow` handler. Reserved so hosts do not collide with it.\n /\nexport const DATA_TABLE_REMOVE_COLUMN_ID = '__dataTableRemoveRow__';\n\n/\n A table filter field is a shared `TFilterField` (the 13 kinds understood by\n * `FiltersPanel`) plus how its value reaches the data: `predicate` for CLIENT\n * mode, `toServerParams` for SERVER mode. The rendering contract lives in\n * `common/components/Search/filters`, so a new field kind is available to every\n * table without touching the DataTable.\n /\nexport interface IDataTableFilterBinding<T extends IDataTableRow> {\n /\n CLIENT mode: in-memory row test. Only called when the field is active.\n * Optional so a field can be server-only.\n /\n predicate?: (row: T, value: unknown) => boolean;\n /\n SERVER mode: maps the active value to backend query params, merged into the\n * fetch. Optional so a field can be client-only.\n /\n toServerParams?: (value: unknown) => Record<string, unknown>;\n}\n\nexport type TDataTableFilterField<T extends IDataTableRow> = TFilterField & IDataTableFilterBinding<T>;\n\nexport interface IDataTableFilterOption extends IFilterOption {}\n\nexport interface IDataTableFiltersConfig<T extends IDataTableRow> {\n /* Drawer title. Defaults to the shared \"Filtros\" label. /\n title?: string;\n subtitle?: string;\n /* Collapsible sections. A single group renders without a section header. /\n groups?: Array<IFilterGroup>;\n fields: Array<TDataTableFilterField<T>>;\n /* How active fields combine in CLIENT mode. Defaults to AND. /\n combinator?: TFilterCombinator;\n}\n\n/\n The applied value of every filter field, keyed by field `key`. The shape per\n * field follows its `kind` (see `emptyValueForKind`).\n /\nexport type TDataTableFilterValues = Record<string, unknown>;\n\n/\n Root entity config that drives the whole table. Adding a new library later\n * means writing one of these objects, not touching the table implementation.\n /\nexport interface IDataTableConfig<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n entityKey: string;\n /* Rows shown by the list-view loading skeleton. Defaults to 8; lower it for short config tables. /\n skeletonRows?: number;\n dataMode?: TDataTableDataMode;\n columns: Array<IDataTableColumnConfig<T>>;\n /\n Additive, opt-in inline editing. Enables `editable` columns (via\n * `onCellChange`) and add/remove-row affordances (via `rows`). Omit for a\n * read-only table — existing configs behave identically.\n /\n editing?: IDataTableEditingConfig<T>;\n /\n Spreadsheet layer: active cell, keyboard navigation, range selection and the\n * fill handle on editable columns. It is ON by default in every table; pass a\n * config to narrow it, or `false` to opt out entirely.\n /\n spreadsheet?: IDataTableSpreadsheetConfig<T> \| false;\n detail?: IDataTableDetailConfig<T>;\n onRowClick?: (row: T) => void;\n rowIsDimmed?: (row: T) => boolean;\n /\n Whether the toolbar search box renders. Defaults to `true`. Set `false` to\n * suppress the search input entirely (e.g. a small/nested table); the toolbar\n * still shows if it has other slots (tabs, view toggle, custom slots).\n /\n searchable?: boolean;\n /\n Pinned footer row. Called with the currently-visible rows (outside\n * pagination) and returns the cells to render, keyed by `columnId`. The cells\n * align to their columns like a normal row and the footer is styled distinctly\n * (top border, semibold). Omit for no footer.\n /\n summaryRow?: (visibleRows: Array<T>) => Array<{ columnId: string; content: ReactNode }>;\n /\n Segmented toolbar tabs. In client mode the active tab's `clientPredicate`\n * filters rows before search/sort/pagination. First tab is the default.\n /\n tabs?: Array<IDataTableTab<T>>;\n /\n Client-side, config-driven filters rendered in a \"Filtrar\" drawer. Each\n * field maps to a drawer input and provides a `predicate` applied in memory\n * before search/sort/pagination. Render the control with `DataTableFilters`.\n /\n filters?: IDataTableFiltersConfig<T>;\n /\n Client mode only. Returns the concatenated searchable text for a row so the\n * global filter can match fields that are not even columns (label, description,\n * derived labels). Matching is accent/case-insensitive.\n /\n getSearchableText?: (row: T) => string;\n /\n How one row is named outside its own line: today, the pick list of the bulk\n * editor. Without it the first `text` column answers, which is right for most\n * tables and wrong wherever the identity lives in a `custom` column.\n /\n getRowLabel?: (row: T) => string;\n /\n Row expansion. When present, the first cell gets a chevron for expandable\n * rows. Use `mode: 'subRows'` (default) for nested table rows, `mode: 'panel'`\n * for custom expanded content under the row, or `mode: 'detailTable'` for a\n * nested detail table with its own columns for a child row type `C`.\n /\n expansion?: TDataTableExpansionConfig<T, C>;\n /\n Column that absorbs the leftover horizontal width under `table-fixed`. Defaults to the last\n * visible non-actions, non-badge, non-first column. Name it when the natural candidate is a\n * fixed-size cell (a grid of size columns) and the slack should land on the trailing column.\n /\n flexColumnId?: string;\n /\n Card renderer for the current page rows. When present, the toolbar shows a\n * Lista/Cards view toggle; the Cards view renders `renderCard` for every\n * visible (searched/filtered/paginated) row, so both views share one source,\n * toolbar, filters and pagination. Omit for a list-only table.\n /\n renderCard?: (row: T) => ReactNode;\n /* Extra classes for the flex-wrap cards container (spacing/basis overrides). /\n cardGridClassName?: string;\n /\n Width class of one skeleton card, so the loading grid matches the real cards\n * when the host renders them at a size other than the default.\n /\n cardSkeletonClassName?: string;\n /\n Grouped view. When present, the toolbar view toggle offers a third \"grouping\"\n * option and the body delegates entirely to this renderer while it is active\n * (the host owns fetching, accordions and empty states).\n /\n renderGroupedBody?: () => ReactNode;\n /\n Kanban view. Same contract as `renderGroupedBody`: the host owns the lanes,\n * their fetching and their empty states, and the table only yields the body.\n */\n renderKanbanBody?: () => ReactNode;\n}\n"],"names":[],"mappings":"AAsaO,MAAM,4BAA4B,CACvC,cACmD,UAAU,SAAS;AAEjE,MAAM,kCAAkC,CAC7C,cAC4D,UAAU,SAAS;AAE1E,MAAM,4BAA4B,CACvC,cACsD,UAAU,SAAS;AAEpE,MAAM,8BAA8B,CACzC,cACqD,UAAU,SAAS,UAAa,UAAU,SAAS;AAMnG,MAAM,8BAA8B;"}
1	+ {"version":3,"file":"types.js","sources":["../../../../src/components/UI/DataTable/types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { IFilterGroup, TFilterCombinator, TFilterField } from '@/components/Search/filters';\nimport type { TUiCapability } from '@/components/UI/access/UiAccessContext';\nimport type { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport type { IFilterOption } from '@/interfaces/IFilterOption';\n\nimport type { IGridNavigationConfig } from './grid/gridTypes';\n\nexport type { IGridNavigationConfig, TGridSelectionMode } from './grid/gridTypes';\n\nexport interface IDataTableRow {\n id: string;\n}\n\nexport type TDataTableSortDirection = 'asc' \| 'desc';\n\nexport interface IDataTableSortState {\n sortBy: string;\n sortDir: TDataTableSortDirection;\n}\n\nexport type TDataTableStatusTone = 'active' \| 'inactive';\n\nexport interface IDataTableStatusValue {\n label: string;\n tone: TDataTableStatusTone;\n}\n\nexport type TDataTableOriginTone = 'erp' \| 'custom' \| 'official' \| 'legacy' \| 'default';\n\nexport interface IDataTableOriginValue {\n label: string;\n tone: TDataTableOriginTone;\n}\n\nexport interface IDataTableTagValue {\n label: string;\n className?: string;\n chipIcon?: SymbolCodepoints;\n}\n\nexport interface IDataTableColorValue {\n hex: string \| null;\n label?: string;\n}\n\nexport interface IDataTableThumbnailValue {\n src: string \| null;\n label?: string;\n}\n\nexport interface IDataTableActionItem<T extends IDataTableRow> {\n key: string;\n label: string \| ((row: T) => string);\n icon?: SymbolCodepoints \| ((row: T) => SymbolCodepoints);\n /*\n Optional numeric badge rendered next to the icon (e.g. how many users the\n * action navigates to). Return `null`/`undefined` to render the icon alone.\n /\n count?: (row: T) => number \| null \| undefined;\n danger?: boolean;\n hidden?: (row: T) => boolean;\n disabled?: (row: T) => boolean;\n /* Missing capability disables the action and replaces its tooltip with the denial reason. /\n capability?: TUiCapability \| Array<TUiCapability>;\n /\n Renders the action as a real `ControlledSwitch` instead of an icon button, returning\n * the current on/off state of the row. `onClick` still fires on toggle; `icon` is ignored.\n /\n toggle?: (row: T) => boolean;\n onClick: (row: T) => void;\n}\n\nexport type TDataTableCellType =\n \| 'text'\n \| 'code'\n \| 'color'\n \| 'thumbnail'\n \| 'badgeStatus'\n \| 'tag'\n \| 'origin'\n \| 'count'\n \| 'date'\n \| 'commitment'\n \| 'actions'\n \| 'custom';\n\n/\n A column config describes how to render one cell type from an entity row.\n * `accessor` maps a row to the value the cell renderer consumes; the concrete\n * value shape depends on `type` (see the cell renderers). `render` allows a\n * fully custom cell when no catalog renderer fits.\n /\nexport interface IDataTableColumnConfig<T extends IDataTableRow> {\n id: string;\n header: string;\n /* Optional tooltip shown on hover over the column header label. /\n headerTooltip?: string;\n /\n Optional banded header. Contiguous VISIBLE columns sharing the same label\n * render one spanning cell in an extra row above the header row; columns\n * without a label get an empty band cell. The band follows the current column\n * order, so it is meant for tables with fixed ordering (editor grids).\n /\n headerGroupLabel?: string;\n type: TDataTableCellType;\n headerAlign?: 'left' \| 'center' \| 'right';\n cellAlign?: 'left' \| 'center' \| 'right';\n /\n Escape hatch for exceptional column widths. Prefer the built-in rules per\n * `type` (actions fixed, badge compact, default min-w-[7.5rem]).\n /\n widthClassName?: string;\n sortable?: boolean;\n /\n Whether the end-user may hide this column via the \"Colunas\" toggle. A column\n * is hideable unless this is explicitly `false`. Identity/first columns and the\n * `actions` column must set `hideable: false` so the table never goes empty.\n /\n hideable?: boolean;\n /* Column starts hidden (still toggleable back on via the \"Colunas\" control). /\n defaultHidden?: boolean;\n /\n Whether the end-user may drag-resize this column. Defaults to `true`. The\n * `actions` column is never resizable regardless of this flag. Minimum width\n * is max(type seed, header label width); resizing only ever widens it.\n /\n resizable?: boolean;\n /* Backend sort field. Used by server mode. Required when `sortable` in server mode. /\n sortField?: string;\n /\n Entity property this column maps to in the backend export catalog. Columns\n * that declare it are offered to the export as `fields`, so the generated file\n * carries the columns the user left visible, in the order they arranged them.\n * A column with no equivalent in the catalog simply omits it.\n /\n exportKey?: string;\n accessor?: (row: T) => unknown;\n /\n Client mode: the sortable/globally-filterable primitive for this column.\n * Required for sortable columns whose `accessor` returns an object (e.g.\n * badgeStatus/origem/tag). Falls back to `accessor` when it returns a\n * primitive, else to an empty string.\n /\n sortAccessor?: (row: T) => string \| number \| boolean;\n render?: (row: T) => ReactNode;\n /* For the `actions` cell type. /\n actions?: Array<IDataTableActionItem<T>>;\n /\n Additive, opt-in inline editing for this column. When set (and the table has\n * `editing.onCellChange`), the cell renders a controlled editor instead of the\n * read-only renderer. Omit to keep the column read-only.\n /\n editable?: IDataTableEditableConfig<T>;\n}\n\n/\n Inline editing descriptor for one column (additive, opt-in). Turns the cell\n * into a live editor rendered with the project's controlled inputs. This is a\n * CONTROLLED model: the host owns the row data and re-renders after each change,\n * mirroring the existing `onRowsChange` pattern of editor grids. Columns without\n * this field render read-only exactly as before.\n /\nexport type TDataTableEditableType = 'text' \| 'number' \| 'date' \| 'select' \| 'multiselect';\n\nexport interface IDataTableEditableConfig<T extends IDataTableRow> {\n type: TDataTableEditableType;\n /* Options for `type: 'select'` / `'multiselect'`. Ignored by the other input types. /\n options?: Array<IFilterOption>;\n /\n Editor próprio, para o que os tipos acima não alcançam (uma lista paginada\n * vinda de uma biblioteca, por exemplo). Quando existe, ele substitui o editor\n * derivado de `type`, que segue valendo para leitura, preenchimento e validação.\n /\n renderEditor?: (params: {\n value: unknown;\n onChange: (value: unknown) => void;\n disabled?: boolean;\n label?: string;\n }) => ReactNode;\n /* Current cell value read from the (host-owned) row. /\n getValue: (row: T) => string \| number \| Array<string> \| null;\n /* Disable editing for a specific row (renders a disabled input). /\n disabled?: (row: T) => boolean;\n /* Returns an inline error message for the current value, or `null` when valid. /\n validate?: (value: unknown, row: T) => string \| null;\n /\n Texto exibido no modo de leitura de `editing.clickToEdit`. Por padrão o valor é derivado do\n * tipo do editor (o rótulo da opção nos selects, a data formatada, o valor cru nos demais).\n /\n displayValue?: (row: T) => string;\n /* Drag-to-fill from this column. Defaults to `true` when the table enables `spreadsheet.fill`. /\n fillable?: boolean;\n /\n Forces one fill strategy instead of detecting it from the source values\n * (`constant`, `numericSeries`, `dateSeries`).\n /\n fillStrategy?: string;\n}\n\nexport interface IDataTableFillChange<T extends IDataTableRow> {\n row: T;\n columnId: string;\n value: unknown;\n}\n\nexport interface IDataTableFillConfig<T extends IDataTableRow> {\n /\n Applies a whole fill in one call: the host decides how to persist it (a batch\n * request, one queued mutation per cell, an optimistic update). Without it the\n * table falls back to `editing.onCellChange` per written cell.\n /\n onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;\n /* Upper bound of cells one drag may write. Defaults to 500. /\n maxCells?: number;\n}\n\nexport interface IDataTableSpreadsheetConfig<T extends IDataTableRow> extends IGridNavigationConfig {\n /* Enables the fill handle on editable columns. Omit for navigation only. /\n fill?: IDataTableFillConfig<T>;\n}\n\n/\n Add/remove row affordances for an editable table. Only rendered when the\n * corresponding handler is configured: the \"add row\" button appears in the\n * footer when `onAddRow` is set, and a trailing delete control per row when\n * `onRemoveRow` is set (`canRemove` hides it per row).\n /\nexport interface IDataTableEditingRowsConfig<T extends IDataTableRow> {\n canAdd?: boolean;\n onAddRow?: () => void;\n canRemove?: (row: T) => boolean;\n onRemoveRow?: (row: T) => void;\n}\n\n/\n Root editing config. `onCellChange` is fired for every editable cell edit with\n * the row, the column id and the new value; the host translates it into its own\n * state update (controlled). Adding this object never changes a table that has no\n * `editable` columns and no `rows` handlers.\n /\nexport interface IDataTableEditingConfig<T extends IDataTableRow> {\n onCellChange: (row: T, columnId: string, value: unknown) => void;\n /\n Opt-in: pressing Enter inside a typeable editable cell (text/number) moves\n * focus to the next editable input in DOM order. Native Tab still traverses all\n * cells; date/select cells keep their own popover Enter behaviour.\n /\n keyboardNav?: boolean;\n /\n Opt-in: as células editáveis exibem o valor como texto e só viram o editor ao serem clicadas\n * (Tab / Shift+Tab andam entre elas, Esc e o clique fora encerram). Sem a flag, todas as células\n * continuam sendo editores sempre visíveis.\n /\n clickToEdit?: boolean;\n /\n Ctrl/Cmd+Z reverts the last edit made through the table and Ctrl/Cmd+Shift+Z\n * (or Ctrl+Y) reapplies it, by writing the previous value back through\n * `onCellChange` / `spreadsheet.fill.onFillCells`. On by default; `false` opts out.\n /\n undo?: boolean;\n rows?: IDataTableEditingRowsConfig<T>;\n}\n\nexport interface IDataTableDetailField {\n label: string;\n value: ReactNode;\n}\n\nexport interface IDataTableDetailConfig<T extends IDataTableRow> {\n title: (row: T) => string;\n code?: (row: T) => string \| null;\n status?: (row: T) => IDataTableStatusValue \| null;\n color?: (row: T) => IDataTableColorValue \| null;\n thumbnail?: (row: T) => IDataTableThumbnailValue \| null;\n fields: (row: T) => Array<IDataTableDetailField>;\n /\n Full-width block rendered under the two-column `fields`, for content that does not fit a\n * label/value pair (a child list, a nested table). Omit for a fields-only detail.\n /\n content?: (row: T) => ReactNode;\n}\n\nexport interface IDataTableTab<T extends IDataTableRow = IDataTableRow> {\n value: string;\n label: string;\n count?: number;\n /\n Client mode: rows are filtered by the active tab's predicate BEFORE search,\n * sort and pagination. Omit (or return true) for an \"all\" tab.\n /\n clientPredicate?: (row: T) => boolean;\n}\n\n/\n How the table processes filter/sort/pagination.\n * - `server` (default): the host owns round-trips; the table renders the rows\n * it is given and reports intent via `onSearch` / `onSortChange` / `pagination`.\n * - `client`: the table receives ALL rows once and does filter/sort/pagination\n * in memory (TanStack row models). No round-trips, instant, animated.\n /\nexport type TDataTableDataMode = 'server' \| 'client';\n\n/* Body layout the user can switch between via the toolbar toggle. /\nexport type TDataTableViewMode = 'list' \| 'cards' \| 'grouped' \| 'kanban';\n\n/\n Shared expand affordance. Chevron visibility is driven by `canExpand` (or a\n * mode-specific default). `onExpandChange` fires after the toggle. Use it for\n * lazy fetches in either mode.\n /\ninterface IDataTableExpansionConfigBase<T extends IDataTableRow> {\n canExpand?: (row: T) => boolean;\n onExpandChange?: (row: T, expanded: boolean) => void;\n /\n Column that carries the expand chevron and toggles the row when its cell is clicked.\n * Defaults to the first column. Use it when the expansion belongs to one specific\n * column (a \"pending approvals\" count) rather than to the row identity.\n /\n triggerColumnId?: string;\n}\n\n/\n Master/detail expansion: child rows render indented under the parent using\n * the same columns. Children can be loaded lazily: `getSubRows` returns\n * `undefined` until they arrive, `canExpand` decides the chevron from a count,\n * and `isLoadingChildren` drives a loading placeholder while the fetch runs.\n \n `mode` defaults to `'subRows'` when omitted so existing Libraries configs\n * keep working without changes.\n /\nexport interface IDataTableSubRowsExpansionConfig<T extends IDataTableRow> extends IDataTableExpansionConfigBase<T> {\n mode?: 'subRows';\n getSubRows: (row: T) => Array<T> \| undefined;\n isLoadingChildren?: (row: T) => boolean;\n}\n\n/\n Helpers passed to panel `renderExpandedContent` so the panel can sync with\n * the table's expand state (e.g. a \"Collapse\" button inside an inline form).\n /\nexport interface IDataTableExpandedContentContext {\n collapse: () => void;\n}\n\n/\n Panel expansion: the row expands into arbitrary React content (forms, editors,\n * rich panels) spanning the full table width. XOR with subRows. Do not combine\n * `getSubRows` and `renderExpandedContent` on the same config.\n \n When `canExpand` is omitted, every row is expandable. Use `isLoadingContent`\n * for a lazy-load spinner in the panel slot.\n /\nexport interface IDataTablePanelExpansionConfig<T extends IDataTableRow> extends IDataTableExpansionConfigBase<T> {\n mode: 'panel';\n renderExpandedContent: (row: T, context: IDataTableExpandedContentContext) => ReactNode;\n isLoadingContent?: (row: T) => boolean;\n}\n\n/\n Master/detail expansion with child-specific columns (AG-Grid style): the row\n * expands into a nested detail table whose columns describe a DIFFERENT row\n * type (`C`) than the parent (`T`). The detail table renders in the full-width\n * expanded slot with its own header row and the standard cell renderer catalog,\n * but has no toolbar, pagination or sorting. The detail table carries its OWN\n * \"Colunas\" menu (visibility + drag reordering), independent from the parent's\n * and persisted under `${entityKey}:detail`; `defaultHidden` detail columns\n * start hidden and can be toggled back on there.\n \n Children can be loaded lazily: `getDetailRows` returns `undefined` until they\n * arrive and a spinner shows while it does (or while `isLoadingChildren` is\n * true). Use `onExpandChange` from the base config to trigger the fetch.\n /\nexport interface IDataTableDetailTableExpansionConfig<\n T extends IDataTableRow,\n C extends IDataTableRow = IDataTableRow,\n> extends IDataTableExpansionConfigBase<T> {\n mode: 'detailTable';\n /* Columns for the detail (child) rows, independent from the parent columns. A function form receives the parent row, for details whose columns vary per parent (dynamic columns skip the persisted show/hide and order state). /\n columns: Array<IDataTableColumnConfig<C>> \| ((parentRow: T) => Array<IDataTableColumnConfig<C>>);\n /* Detail rows of a parent. Return `undefined` while they are still loading. /\n getDetailRows: (row: T) => Array<C> \| undefined;\n isLoadingChildren?: (row: T) => boolean;\n onDetailRowClick?: (detailRow: C, parentRow: T) => void;\n detailRowIsDimmed?: (detailRow: C) => boolean;\n /* Shown when a parent expands to zero detail rows. Defaults to the shared empty label. /\n emptyMessage?: string;\n}\n\n/\n Master/detail expansion into a FULL nested `DataTable`: the row expands into a\n * self-contained `DataTable` driven by its own `childConfig` (its own toolbar,\n * search, pagination, cell catalog, etc.) for a child row type `C`. Unlike\n * `detailTable` (a lightweight header+rows panel), this reuses the whole\n * component so the nested table has every DataTable capability.\n \n Children can be loaded lazily: `getChildRows` returns `undefined` until they\n * arrive, `loadChildren` is invoked on expand to trigger the fetch, and\n * `isLoadingChildren` drives the nested table's own loading state.\n /\nexport interface IDataTableTableExpansionConfig<\n T extends IDataTableRow,\n C extends IDataTableRow = IDataTableRow,\n> extends IDataTableExpansionConfigBase<T> {\n mode: 'table';\n /* Full config for the nested child table. /\n childConfig: IDataTableConfig<C>;\n /* Child rows of a parent. Return `undefined` while they are still loading / not fetched. /\n getChildRows: (row: T) => Array<C> \| undefined;\n /* Lazy fetch invoked on expand when `getChildRows` returns `undefined`. /\n loadChildren?: (row: T) => Promise<void>;\n isLoadingChildren?: (row: T) => boolean;\n}\n\n/\n Row expansion config. Discriminated by `mode`:\n * - `'subRows'` (default): nested table rows via `getSubRows`, same columns\n * - `'panel'`: custom React content via `renderExpandedContent`\n * - `'detailTable'`: nested detail table with its own columns for a child row type\n * - `'table'`: a full nested `DataTable` driven by `childConfig` for a child row type\n /\nexport type TDataTableExpansionConfig<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> =\n \| IDataTableSubRowsExpansionConfig<T>\n \| IDataTablePanelExpansionConfig<T>\n \| IDataTableDetailTableExpansionConfig<T, C>\n \| IDataTableTableExpansionConfig<T, C>;\n\nexport const isDataTablePanelExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTablePanelExpansionConfig<T> => expansion.mode === 'panel';\n\nexport const isDataTableDetailTableExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableDetailTableExpansionConfig<T, C> => expansion.mode === 'detailTable';\n\nexport const isDataTableTableExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableTableExpansionConfig<T, C> => expansion.mode === 'table';\n\nexport const isDataTableSubRowsExpansion = <T extends IDataTableRow, C extends IDataTableRow>(\n expansion: TDataTableExpansionConfig<T, C>,\n): expansion is IDataTableSubRowsExpansionConfig<T> => expansion.mode === undefined \|\| expansion.mode === 'subRows';\n\n/\n Id of the synthetic trailing actions column injected when `editing.rows`\n * declares an `onRemoveRow` handler. Reserved so hosts do not collide with it.\n /\nexport const DATA_TABLE_REMOVE_COLUMN_ID = '__dataTableRemoveRow__';\n\n/\n A table filter field is a shared `TFilterField` (the 13 kinds understood by\n * `FiltersPanel`) plus how its value reaches the data: `predicate` for CLIENT\n * mode, `toServerParams` for SERVER mode. The rendering contract lives in\n * `common/components/Search/filters`, so a new field kind is available to every\n * table without touching the DataTable.\n /\nexport interface IDataTableFilterBinding<T extends IDataTableRow> {\n /\n CLIENT mode: in-memory row test. Only called when the field is active.\n * Optional so a field can be server-only.\n /\n predicate?: (row: T, value: unknown) => boolean;\n /\n SERVER mode: maps the active value to backend query params, merged into the\n * fetch. Optional so a field can be client-only.\n /\n toServerParams?: (value: unknown) => Record<string, unknown>;\n}\n\nexport type TDataTableFilterField<T extends IDataTableRow> = TFilterField & IDataTableFilterBinding<T>;\n\nexport interface IDataTableFilterOption extends IFilterOption {}\n\nexport interface IDataTableFiltersConfig<T extends IDataTableRow> {\n /* Drawer title. Defaults to the shared \"Filtros\" label. /\n title?: string;\n subtitle?: string;\n /* Collapsible sections. A single group renders without a section header. /\n groups?: Array<IFilterGroup>;\n fields: Array<TDataTableFilterField<T>>;\n /* How active fields combine in CLIENT mode. Defaults to AND. /\n combinator?: TFilterCombinator;\n}\n\n/\n The applied value of every filter field, keyed by field `key`. The shape per\n * field follows its `kind` (see `emptyValueForKind`).\n /\nexport type TDataTableFilterValues = Record<string, unknown>;\n\n/\n Root entity config that drives the whole table. Adding a new library later\n * means writing one of these objects, not touching the table implementation.\n /\nexport interface IDataTableConfig<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n entityKey: string;\n /* Rows shown by the list-view loading skeleton. Defaults to 8; lower it for short config tables. /\n skeletonRows?: number;\n dataMode?: TDataTableDataMode;\n columns: Array<IDataTableColumnConfig<T>>;\n /\n Additive, opt-in inline editing. Enables `editable` columns (via\n * `onCellChange`) and add/remove-row affordances (via `rows`). Omit for a\n * read-only table — existing configs behave identically.\n /\n editing?: IDataTableEditingConfig<T>;\n /\n Spreadsheet layer: active cell, keyboard navigation, range selection and the\n * fill handle on editable columns. It is ON by default in every table; pass a\n * config to narrow it, or `false` to opt out entirely.\n /\n spreadsheet?: IDataTableSpreadsheetConfig<T> \| false;\n detail?: IDataTableDetailConfig<T>;\n onRowClick?: (row: T) => void;\n rowIsDimmed?: (row: T) => boolean;\n /\n Whether the toolbar search box renders. Defaults to `true`. Set `false` to\n * suppress the search input entirely (e.g. a small/nested table); the toolbar\n * still shows if it has other slots (tabs, view toggle, custom slots).\n /\n searchable?: boolean;\n /\n Pinned footer row. Called with the currently-visible rows (outside\n * pagination) and returns the cells to render, keyed by `columnId`. The cells\n * align to their columns like a normal row and the footer is styled distinctly\n * (top border, semibold). Omit for no footer.\n /\n summaryRow?: (visibleRows: Array<T>) => Array<{ columnId: string; content: ReactNode }>;\n /\n Segmented toolbar tabs. In client mode the active tab's `clientPredicate`\n * filters rows before search/sort/pagination. First tab is the default.\n /\n tabs?: Array<IDataTableTab<T>>;\n /\n Client-side, config-driven filters rendered in a \"Filtrar\" drawer. Each\n * field maps to a drawer input and provides a `predicate` applied in memory\n * before search/sort/pagination. Render the control with `DataTableFilters`.\n /\n filters?: IDataTableFiltersConfig<T>;\n /\n Client mode only. Returns the concatenated searchable text for a row so the\n * global filter can match fields that are not even columns (label, description,\n * derived labels). Matching is accent/case-insensitive.\n /\n getSearchableText?: (row: T) => string;\n /\n How one row is named outside its own line: today, the pick list of the bulk\n * editor. Without it the first `text` column answers, which is right for most\n * tables and wrong wherever the identity lives in a `custom` column.\n /\n getRowLabel?: (row: T) => string;\n /\n Row expansion. When present, the first cell gets a chevron for expandable\n * rows. Use `mode: 'subRows'` (default) for nested table rows, `mode: 'panel'`\n * for custom expanded content under the row, or `mode: 'detailTable'` for a\n * nested detail table with its own columns for a child row type `C`.\n /\n expansion?: TDataTableExpansionConfig<T, C>;\n /\n Column that absorbs the leftover horizontal width under `table-fixed`. Defaults to the last\n * visible non-actions, non-badge, non-first column. Name it when the natural candidate is a\n * fixed-size cell (a grid of size columns) and the slack should land on the trailing column.\n /\n flexColumnId?: string;\n /\n Card renderer for the current page rows. When present, the toolbar shows a\n * Lista/Cards view toggle; the Cards view renders `renderCard` for every\n * visible (searched/filtered/paginated) row, so both views share one source,\n * toolbar, filters and pagination. Omit for a list-only table.\n /\n renderCard?: (row: T) => ReactNode;\n /* Extra classes for the flex-wrap cards container (spacing/basis overrides). /\n cardGridClassName?: string;\n /\n Width class of one skeleton card, so the loading grid matches the real cards\n * when the host renders them at a size other than the default.\n /\n cardSkeletonClassName?: string;\n /\n Grouped view. When present, the toolbar view toggle offers a third \"grouping\"\n * option and the body delegates entirely to this renderer while it is active\n * (the host owns fetching, accordions and empty states).\n /\n renderGroupedBody?: () => ReactNode;\n /\n Kanban view. Same contract as `renderGroupedBody`: the host owns the lanes,\n * their fetching and their empty states, and the table only yields the body.\n */\n renderKanbanBody?: () => ReactNode;\n}\n"],"names":[],"mappings":"AA4aO,MAAM,4BAA4B,CACvC,cACmD,UAAU,SAAS;AAEjE,MAAM,kCAAkC,CAC7C,cAC4D,UAAU,SAAS;AAE1E,MAAM,4BAA4B,CACvC,cACsD,UAAU,SAAS;AAEpE,MAAM,8BAA8B,CACzC,cACqD,UAAU,SAAS,UAAa,UAAU,SAAS;AAMnG,MAAM,8BAA8B;"}

package/dist/components/UI/DataTable/useDataTableUndoHistory.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { KeyboardEvent } from 'react';
+import { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';
+export interface IDataTableRestoredCell<T extends IDataTableRow> {
+    row: T;
+    columnId: string;
+}
+interface IUseDataTableUndoHistoryParams<T extends IDataTableRow> {
+    enabled: boolean;
+    rows: Array<T>;
+    columns: Array<IDataTableColumnConfig<T>>;
+    onCellChange?: (row: T, columnId: string, value: unknown) => void;
+    onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;
+}
+/**
+ * Undo/redo of the edits made through the table. Every write already goes through
+ * `editing.onCellChange` or `spreadsheet.fill.onFillCells`, and the column knows the
+ * value the cell held (`editable.getValue`), so undoing is writing that value back
+ * through the same handler: the host persists it like any other edit.
+ *
+ * - keystrokes on the same cell within a short window become one step;
+ * - a fill, a bulk edit or any writes fired in the same tick become one step;
+ * - a write that brings a cell back to the value before its last step (Escape on
+ *   an editor) removes that step instead of stacking a second one.
+ */
+export declare function useDataTableUndoHistory<T extends IDataTableRow>({ enabled, rows, columns, onCellChange, onFillCells, }: IUseDataTableUndoHistoryParams<T>): {
+    recordedOnCellChange: (row: T, columnId: string, value: unknown) => void;
+    recordedOnFillCells: (changes: Array<IDataTableFillChange<T>>) => void;
+    handleUndoShortcut: (event: KeyboardEvent<HTMLElement>) => IDataTableRestoredCell<T> | null;
+};
+export {};

package/dist/components/UI/DataTable/useDataTableUndoHistory.js ADDED Viewed

@@ -0,0 +1,130 @@
+import { useRef, useCallback } from "react";
+import { isTextEntryTarget } from "./grid/useGridKeyboard.js";
+const TYPING_MERGE_WINDOW_MS = 1e3;
+const resolveUndoDirection = (event) => {
+  if (!(event.ctrlKey || event.metaKey) || event.altKey) return null;
+  const pressedKey = event.key.toLowerCase();
+  if (pressedKey === "z") return event.shiftKey ? "redo" : "undo";
+  if (pressedKey === "y" && event.ctrlKey && !event.shiftKey) return "redo";
+  return null;
+};
+const areCellValuesEqual = (left, right) => JSON.stringify(left ?? null) === JSON.stringify(right ?? null);
+function useDataTableUndoHistory({
+  enabled,
+  rows,
+  columns,
+  onCellChange,
+  onFillCells
+}) {
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const columnsRef = useRef(columns);
+  columnsRef.current = columns;
+  const onCellChangeRef = useRef(onCellChange);
+  onCellChangeRef.current = onCellChange;
+  const onFillCellsRef = useRef(onFillCells);
+  onFillCellsRef.current = onFillCells;
+  const undoStackRef = useRef([]);
+  const redoStackRef = useRef([]);
+  const sameTickEntryRef = useRef(null);
+  const readCellValue = useCallback(
+    (row, columnId) => (columnsRef.current ?? []).find((column) => column.id === columnId)?.editable?.getValue(row) ?? null,
+    []
+  );
+  const recordCellChanges = useCallback(
+    (changes) => {
+      if (!enabledRef.current) return;
+      const changedCells = (changes ?? []).map(({ row, columnId, value }) => ({
+        row,
+        columnId,
+        previousValue: readCellValue(row, columnId),
+        nextValue: value
+      })).filter((cell) => !areCellValuesEqual(cell.previousValue, cell.nextValue));
+      if (changedCells.length === 0) return;
+      redoStackRef.current = [];
+      const now = Date.now();
+      const sameTickEntry = sameTickEntryRef.current;
+      if (sameTickEntry) {
+        sameTickEntry.cells.push(...changedCells);
+        return;
+      }
+      const lastEntry = undoStackRef.current[undoStackRef.current.length - 1];
+      const lastCell = lastEntry?.cells.length === 1 ? lastEntry.cells[0] : void 0;
+      const onlyChangedCell = changedCells.length === 1 ? changedCells[0] : void 0;
+      if (lastEntry && lastCell && onlyChangedCell && lastCell.row.id === onlyChangedCell.row.id && lastCell.columnId === onlyChangedCell.columnId) {
+        if (areCellValuesEqual(onlyChangedCell.nextValue, lastCell.previousValue)) {
+          undoStackRef.current = undoStackRef.current.slice(0, -1);
+          return;
+        }
+        if (now - lastEntry.recordedAt < TYPING_MERGE_WINDOW_MS) {
+          lastCell.nextValue = onlyChangedCell.nextValue;
+          lastEntry.recordedAt = now;
+          return;
+        }
+      }
+      const entry = { cells: changedCells, recordedAt: now };
+      undoStackRef.current = [...undoStackRef.current, entry].slice(-100);
+      sameTickEntryRef.current = entry;
+      queueMicrotask(() => {
+        sameTickEntryRef.current = null;
+      });
+    },
+    [readCellValue]
+  );
+  const recordedOnCellChange = useCallback(
+    (row, columnId, value) => {
+      recordCellChanges([{ row, columnId, value }]);
+      onCellChangeRef.current?.(row, columnId, value);
+    },
+    [recordCellChanges]
+  );
+  const recordedOnFillCells = useCallback(
+    (changes) => {
+      recordCellChanges(changes);
+      onFillCellsRef.current?.(changes);
+    },
+    [recordCellChanges]
+  );
+  const replayLastEntry = useCallback((direction) => {
+    const sourceStackRef = direction === "undo" ? undoStackRef : redoStackRef;
+    const targetStackRef = direction === "undo" ? redoStackRef : undoStackRef;
+    const entry = sourceStackRef.current[sourceStackRef.current.length - 1];
+    if (!entry) return null;
+    const cellWrites = entry.cells.map((cell) => ({
+      row: (rowsRef.current ?? []).find((candidate) => candidate.id === cell.row.id) ?? cell.row,
+      columnId: cell.columnId,
+      value: direction === "undo" ? cell.previousValue : cell.nextValue
+    }));
+    if (cellWrites.length > 1 && onFillCellsRef.current) {
+      onFillCellsRef.current(cellWrites);
+    } else {
+      cellWrites.forEach((write) => onCellChangeRef.current?.(write.row, write.columnId, write.value));
+    }
+    sourceStackRef.current = sourceStackRef.current.slice(0, -1);
+    targetStackRef.current = [...targetStackRef.current, entry].slice(-100);
+    sameTickEntryRef.current = null;
+    const firstWrite = cellWrites[0];
+    return firstWrite ? { row: firstWrite.row, columnId: firstWrite.columnId } : null;
+  }, []);
+  const handleUndoShortcut = useCallback(
+    (event) => {
+      if (!enabledRef.current || event.defaultPrevented) return null;
+      if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target)) return null;
+      const direction = resolveUndoDirection(event);
+      if (!direction || isTextEntryTarget(event.target)) return null;
+      const restoredCell = replayLastEntry(direction);
+      if (!restoredCell) return null;
+      event.preventDefault();
+      event.stopPropagation();
+      return restoredCell;
+    },
+    [replayLastEntry]
+  );
+  return { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut };
+}
+export {
+  useDataTableUndoHistory
+};
+//# sourceMappingURL=useDataTableUndoHistory.js.map

package/dist/components/UI/DataTable/useDataTableUndoHistory.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDataTableUndoHistory.js","sources":["../../../../src/components/UI/DataTable/useDataTableUndoHistory.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback, useRef } from 'react';\n\nimport { isTextEntryTarget } from './grid/useGridKeyboard';\nimport type { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';\n\nconst MAX_UNDO_ENTRIES = 100;\nconst TYPING_MERGE_WINDOW_MS = 1000;\n\ntype TDataTableUndoDirection = 'undo' | 'redo';\n\ninterface IDataTableUndoCell<T extends IDataTableRow> {\n row: T;\n columnId: string;\n previousValue: unknown;\n nextValue: unknown;\n}\n\ninterface IDataTableUndoEntry<T extends IDataTableRow> {\n cells: Array<IDataTableUndoCell<T>>;\n recordedAt: number;\n}\n\nexport interface IDataTableRestoredCell<T extends IDataTableRow> {\n row: T;\n columnId: string;\n}\n\ninterface IUseDataTableUndoHistoryParams<T extends IDataTableRow> {\n enabled: boolean;\n rows: Array<T>;\n columns: Array<IDataTableColumnConfig<T>>;\n onCellChange?: (row: T, columnId: string, value: unknown) => void;\n onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;\n}\n\nconst resolveUndoDirection = (event: KeyboardEvent): TDataTableUndoDirection | null => {\n if (!(event.ctrlKey || event.metaKey) || event.altKey) return null;\n const pressedKey = event.key.toLowerCase();\n if (pressedKey === 'z') return event.shiftKey ? 'redo' : 'undo';\n if (pressedKey === 'y' && event.ctrlKey && !event.shiftKey) return 'redo';\n return null;\n};\n\nconst areCellValuesEqual = (left: unknown, right: unknown): boolean =>\n JSON.stringify(left ?? null) === JSON.stringify(right ?? null);\n\n/**\n * Undo/redo of the edits made through the table. Every write already goes through\n * `editing.onCellChange` or `spreadsheet.fill.onFillCells`, and the column knows the\n * value the cell held (`editable.getValue`), so undoing is writing that value back\n * through the same handler: the host persists it like any other edit.\n *\n * - keystrokes on the same cell within a short window become one step;\n * - a fill, a bulk edit or any writes fired in the same tick become one step;\n * - a write that brings a cell back to the value before its last step (Escape on\n * an editor) removes that step instead of stacking a second one.\n */\nexport function useDataTableUndoHistory<T extends IDataTableRow>({\n enabled,\n rows,\n columns,\n onCellChange,\n onFillCells,\n}: IUseDataTableUndoHistoryParams<T>) {\n const enabledRef = useRef(enabled);\n enabledRef.current = enabled;\n const rowsRef = useRef(rows);\n rowsRef.current = rows;\n const columnsRef = useRef(columns);\n columnsRef.current = columns;\n const onCellChangeRef = useRef(onCellChange);\n onCellChangeRef.current = onCellChange;\n const onFillCellsRef = useRef(onFillCells);\n onFillCellsRef.current = onFillCells;\n\n const undoStackRef = useRef<Array<IDataTableUndoEntry<T>>>([]);\n const redoStackRef = useRef<Array<IDataTableUndoEntry<T>>>([]);\n const sameTickEntryRef = useRef<IDataTableUndoEntry<T> | null>(null);\n\n const readCellValue = useCallback(\n (row: T, columnId: string): unknown =>\n (columnsRef.current ?? []).find((column) => column.id === columnId)?.editable?.getValue(row) ?? null,\n [],\n );\n\n const recordCellChanges = useCallback(\n (changes: Array<IDataTableFillChange<T>>) => {\n if (!enabledRef.current) return;\n\n const changedCells = (changes ?? [])\n .map<IDataTableUndoCell<T>>(({ row, columnId, value }) => ({\n row,\n columnId,\n previousValue: readCellValue(row, columnId),\n nextValue: value,\n }))\n .filter((cell) => !areCellValuesEqual(cell.previousValue, cell.nextValue));\n if (changedCells.length === 0) return;\n\n redoStackRef.current = [];\n const now = Date.now();\n\n const sameTickEntry = sameTickEntryRef.current;\n if (sameTickEntry) {\n sameTickEntry.cells.push(...changedCells);\n return;\n }\n\n const lastEntry = undoStackRef.current[undoStackRef.current.length - 1];\n const lastCell = lastEntry?.cells.length === 1 ? lastEntry.cells[0] : undefined;\n const onlyChangedCell = changedCells.length === 1 ? changedCells[0] : undefined;\n\n if (\n lastEntry &&\n lastCell &&\n onlyChangedCell &&\n lastCell.row.id === onlyChangedCell.row.id &&\n lastCell.columnId === onlyChangedCell.columnId\n ) {\n if (areCellValuesEqual(onlyChangedCell.nextValue, lastCell.previousValue)) {\n undoStackRef.current = undoStackRef.current.slice(0, -1);\n return;\n }\n if (now - lastEntry.recordedAt < TYPING_MERGE_WINDOW_MS) {\n lastCell.nextValue = onlyChangedCell.nextValue;\n lastEntry.recordedAt = now;\n return;\n }\n }\n\n const entry: IDataTableUndoEntry<T> = { cells: changedCells, recordedAt: now };\n undoStackRef.current = [...undoStackRef.current, entry].slice(-MAX_UNDO_ENTRIES);\n sameTickEntryRef.current = entry;\n queueMicrotask(() => {\n sameTickEntryRef.current = null;\n });\n },\n [readCellValue],\n );\n\n const recordedOnCellChange = useCallback(\n (row: T, columnId: string, value: unknown) => {\n recordCellChanges([{ row, columnId, value }]);\n onCellChangeRef.current?.(row, columnId, value);\n },\n [recordCellChanges],\n );\n\n const recordedOnFillCells = useCallback(\n (changes: Array<IDataTableFillChange<T>>) => {\n recordCellChanges(changes);\n onFillCellsRef.current?.(changes);\n },\n [recordCellChanges],\n );\n\n const replayLastEntry = useCallback((direction: TDataTableUndoDirection): IDataTableRestoredCell<T> | null => {\n const sourceStackRef = direction === 'undo' ? undoStackRef : redoStackRef;\n const targetStackRef = direction === 'undo' ? redoStackRef : undoStackRef;\n const entry = sourceStackRef.current[sourceStackRef.current.length - 1];\n if (!entry) return null;\n\n const cellWrites = entry.cells.map<IDataTableFillChange<T>>((cell) => ({\n row: (rowsRef.current ?? []).find((candidate) => candidate.id === cell.row.id) ?? cell.row,\n columnId: cell.columnId,\n value: direction === 'undo' ? cell.previousValue : cell.nextValue,\n }));\n\n if (cellWrites.length > 1 && onFillCellsRef.current) {\n onFillCellsRef.current(cellWrites);\n } else {\n cellWrites.forEach((write) => onCellChangeRef.current?.(write.row, write.columnId, write.value));\n }\n\n sourceStackRef.current = sourceStackRef.current.slice(0, -1);\n targetStackRef.current = [...targetStackRef.current, entry].slice(-MAX_UNDO_ENTRIES);\n sameTickEntryRef.current = null;\n\n const firstWrite = cellWrites[0];\n return firstWrite ? { row: firstWrite.row, columnId: firstWrite.columnId } : null;\n }, []);\n\n /**\n * Handles Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z (or Ctrl+Y) pressed inside the table.\n * A focused text control keeps its own native undo, and with nothing to replay the\n * event is left untouched so an outer surface can still handle it.\n */\n const handleUndoShortcut = useCallback(\n (event: KeyboardEvent<HTMLElement>): IDataTableRestoredCell<T> | null => {\n if (!enabledRef.current || event.defaultPrevented) return null;\n if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target)) return null;\n\n const direction = resolveUndoDirection(event);\n if (!direction || isTextEntryTarget(event.target)) return null;\n\n const restoredCell = replayLastEntry(direction);\n if (!restoredCell) return null;\n\n event.preventDefault();\n event.stopPropagation();\n return restoredCell;\n },\n [replayLastEntry],\n );\n\n return { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut };\n}\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.9.3",
+  "version": "0.11.0",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [