@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/DataTable/DataTable.js

@@ -1,17 +1,255 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './DataTable.css';
-import { faSort, faSortUp, faSortDown, faInbox, } from "@fortawesome/free-solid-svg-icons";
+import * as React from "react";
+import { useState } from "react";
+import { faSort, faSortUp, faSortDown, faInbox, faChevronRight, faChevronDown, } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Checkbox from "../Checkbox/Checkbox";
 function DataTable(props) {
+    const [expandedState, setExpandedState] = useState(() => Array());
+    const [expandTouched, setExpandTouched] = useState(() => false);
+    const [activeRow, setActiveRow] = useState(() => 0);
     function columnsList() {
         return props.columns || [];
     }
     function rows() {
+        if (props.treeData)
+            return treeNodes().map((node) => node.row);
         return props.data || [];
     }
-    function selected() {
+    function childField() {
+        return props.childrenKey || "children";
+    }
+    function isOpenKey(key, todas) {
+        if (todas)
+            return true;
+        if (props.expandedKeys)
+            return props.expandedKeys.includes(key);
+        if (expandTouched)
+            return expandedState.includes(key);
+        if (props.defaultExpandAll)
+            return true;
+        return (props.defaultExpandedKeys || []).includes(key);
+    }
+    function flatten(todas) {
+        const raizes = props.data || [];
+        const saida = [];
+        const pilha = [];
+        for (let r = raizes.length - 1; r >= 0; r--) {
+            pilha.push({
+                row: raizes[r],
+                level: 0,
+                pos: r,
+                size: raizes.length,
+                path: String(r),
+                guides: [],
+            });
+        }
+        while (pilha.length > 0) {
+            const item = pilha.pop();
+            const filhas = item.row[childField()];
+            const hasKids = Array.isArray(filhas) && filhas.length > 0;
+            const chave = typeof props.rowKey === "function"
+                ? props.rowKey(item.row)
+                : props.rowKey
+                    ? item.row[props.rowKey]
+                    : item.path;
+            const open = hasKids && isOpenKey(chave, todas);
+            saida.push({
+                row: item.row,
+                level: item.level,
+                key: chave,
+                hasKids,
+                open,
+                pos: item.pos + 1,
+                size: item.size,
+                guides: item.guides,
+            });
+            if (open) {
+                // Para as filhas, o guia do PRÓPRIO nó vira a linha que continua (tem irmã depois) ou some.
+                const base = item.guides.map((g, gi) => gi === item.guides.length - 1 ? (g === "tee" ? "line" : "none") : g);
+                for (let c = filhas.length - 1; c >= 0; c--) {
+                    pilha.push({
+                        row: filhas[c],
+                        level: item.level + 1,
+                        pos: c,
+                        size: filhas.length,
+                        path: item.path + "." + c,
+                        guides: [...base, c === filhas.length - 1 ? "elbow" : "tee"],
+                    });
+                }
+            }
+        }
+        return saida;
+    }
+    function treeNodes() {
+        if (!props.treeData)
+            return [];
+        return flatten(false);
+    }
+    function nodeAt(index) {
+        return treeNodes()[index];
+    }
+    function allParentKeys() {
+        return flatten(true)
+            .filter((node) => node.hasKids)
+            .map((node) => node.key);
+    }
+    function currentExpanded() {
+        if (props.expandedKeys)
+            return props.expandedKeys;
+        if (expandTouched)
+            return expandedState;
+        if (props.defaultExpandAll)
+            return allParentKeys();
+        return props.defaultExpandedKeys || [];
+    }
+    function toggleNode(index, abrir) {
+        const node = nodeAt(index);
+        if (!node || !node.hasKids)
+            return;
+        const vaiAbrir = typeof abrir === "boolean" ? abrir : !node.open;
+        if (vaiAbrir === node.open)
+            return;
+        const atuais = currentExpanded();
+        const proximas = vaiAbrir
+            ? [...atuais, node.key]
+            : atuais.filter((k) => k !== node.key);
+        setExpandedState(proximas);
+        setExpandTouched(true);
+        if (props.onExpand)
+            props.onExpand(proximas, node.row, vaiAbrir);
+    }
+    function handleToggleClick(index, event) {
+        if (event)
+            event.stopPropagation();
+        toggleNode(index);
+    }
+    function treeLevel(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.level + 1 : undefined;
+    }
+    function treePosInSet(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.pos : undefined;
+    }
+    function treeSetSize(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        return node ? node.size : undefined;
+    }
+    function treeExpanded(index) {
+        if (!props.treeData)
+            return undefined;
+        const node = nodeAt(index);
+        if (!node || !node.hasKids)
+            return undefined;
+        return node.open ? "true" : "false";
+    }
+    function treeHasKids(index) {
+        const node = nodeAt(index);
+        return !!node && node.hasKids;
+    }
+    function treeOpen(index) {
+        const node = nodeAt(index);
+        return !!node && node.open;
+    }
+    function isTreeCell(colIndex) {
+        return !!props.treeData && colIndex === 0;
+    }
+    function guidesOf(index) {
+        const node = nodeAt(index);
+        // Tipado na variável: o Mitosis tira a anotação de retorno, e sem ela o `map` do JSX fica com parâmetros `any` implícitos.
+        const guias = node ? node.guides : [];
+        return guias;
+    }
+    function guideClass(guia) {
+        return "umds-datatable__guide umds-datatable__guide--" + guia;
+    }
+    function indentOf(index) {
+        const node = nodeAt(index);
+        return ("calc(" +
+            (node ? node.level : 0) +
+            " * var(--umds-primitive-spacing-xxs))");
+    }
+    function toggleLabel(index) {
+        return treeOpen(index)
+            ? props.collapseLabel || "Recolher"
+            : props.expandLabel || "Expandir";
+    }
+    function treeToggleIcon(index) {
+        return treeOpen(index) ? faChevronDown : faChevronRight;
+    }
+    function parentIndexOf(index) {
+        const nos = treeNodes();
+        const nivel = nos[index] ? nos[index].level : 0;
+        for (let i = index - 1; i >= 0; i--) {
+            if (nos[i].level < nivel)
+                return i;
+        }
+        return -1;
+    }
+    function focusRowAt(atual, index) {
+        const linhas = atual.parentElement
+            ? atual.parentElement.querySelectorAll("tr[aria-level]")
+            : [];
+        const alvo = linhas[index];
+        if (alvo)
+            alvo.focus();
+    }
+    function handleTreeKey(index, event) {
+        const total = treeNodes().length;
+        const k = event.key;
+        const atual = event.currentTarget;
+        let alvo = -2;
+        if (k === "ArrowDown")
+            alvo = Math.min(index + 1, total - 1);
+        else if (k === "ArrowUp")
+            alvo = Math.max(index - 1, 0);
+        else if (k === "Home")
+            alvo = 0;
+        else if (k === "End")
+            alvo = total - 1;
+        else if (k === "ArrowRight") {
+            if (!treeHasKids(index))
+                return false;
+            if (!treeOpen(index)) {
+                toggleNode(index, true);
+                event.preventDefault();
+                return true;
+            }
+            alvo = index + 1;
+        }
+        else if (k === "ArrowLeft") {
+            if (treeHasKids(index) && treeOpen(index)) {
+                toggleNode(index, false);
+                event.preventDefault();
+                return true;
+            }
+            alvo = parentIndexOf(index);
+            if (alvo < 0)
+                return false;
+        }
+        else {
+            return false;
+        }
+        event.preventDefault();
+        if (alvo >= 0)
+            focusRowAt(atual, alvo);
+        return true;
+    }
+    function handleRowFocus(index, event) {
+        if (!props.treeData || !event || event.target !== event.currentTarget)
+            return;
+        setActiveRow(index);
+    }
+    function selectedIndexes() {
         return props.selectedRows || [];
     }
     function selectedKeysList() {
@@ -20,10 +258,22 @@ function DataTable(props) {
     function usesKeys() {
         return !!props.rowKey;
     }
+    function isDocument() {
+        return props.variant === "document";
+    }
+    function canSelect() {
+        return !!props.selectable && props.variant !== "document";
+    }
     function tableClasses() {
         return [
             "umds-datatable",
+            props.variant === "document" ? "umds-datatable--document" : "",
             props.density === "compact" ? "umds-datatable--compact" : "",
+            props.headerVariant === "dark" ? "umds-datatable--header-dark" : "",
+            props.headerUppercase ? "umds-datatable--header-uppercase" : "",
+            props.hideHeader ? "umds-datatable--header-hidden" : "",
+            props.striped ? "umds-datatable--striped" : "",
+            props.treeData ? "umds-datatable--tree" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -43,8 +293,31 @@ function DataTable(props) {
     function hasRows() {
         return !props.loading && rows().length > 0;
     }
+    function groupOf(row, index) {
+        if (!props.rowGroup)
+            return "";
+        const bruto = typeof props.rowGroup === "function"
+            ? props.rowGroup(row, index)
+            : row[props.rowGroup];
+        return bruto === undefined || bruto === null ? "" : String(bruto);
+    }
+    function newGroupLabel(index) {
+        if (!props.rowGroup)
+            return "";
+        const atual = groupOf(rows()[index], index);
+        if (!atual)
+            return "";
+        if (index === 0)
+            return atual;
+        return groupOf(rows()[index - 1], index - 1) === atual ? "" : atual;
+    }
+    function groupContent(label, row, index) {
+        if (props.renderRowGroup)
+            return props.renderRowGroup(label, row, index);
+        return label;
+    }
     function colSpan() {
-        return columnsList().length + (props.selectable ? 1 : 0);
+        return columnsList().length + (canSelect() ? 1 : 0);
     }
     function rowKeyOf(row, index) {
         if (typeof props.rowKey === "function")
@@ -59,17 +332,17 @@ function DataTable(props) {
         if (usesKeys()) {
             return rows().every((row, i) => selectedKeysList().includes(rowKeyOf(row, i)));
         }
-        return selected().length === rows().length;
+        return selectedIndexes().length === rows().length;
     }
     function someSelected() {
         if (usesKeys()) {
             return (!allSelected() &&
                 rows().some((row, i) => selectedKeysList().includes(rowKeyOf(row, i))));
         }
-        return selected().length > 0 && !allSelected();
+        return selectedIndexes().length > 0 && !allSelected();
     }
     function handleSort(col) {
-        if (!col.sortable)
+        if (!col.sortable || props.variant === "document")
             return;
         const dir = props.sortKey === col.key && props.sortDirection === "asc"
             ? "desc"
@@ -110,7 +383,7 @@ function DataTable(props) {
             const nextKeys = current.includes(key)
                 ? current.filter((k) => k !== key)
                 : [...current, key];
-            const currentIdx = selected();
+            const currentIdx = selectedIndexes();
             const nextIdx = currentIdx.includes(index)
                 ? currentIdx.filter((i) => i !== index)
                 : [...currentIdx, index];
@@ -119,7 +392,7 @@ function DataTable(props) {
         }
         if (!props.onSelect)
             return;
-        const current = selected();
+        const current = selectedIndexes();
         const next = current.includes(index)
             ? current.filter((i) => i !== index)
             : [...current, index];
@@ -129,19 +402,38 @@ function DataTable(props) {
         if (usesKeys()) {
             return selectedKeysList().includes(rowKeyOf(row, index));
         }
-        return selected().includes(index);
+        return selectedIndexes().includes(index);
     }
     function cellContent(col, row, rowIndex) {
         if (col.render)
             return col.render(row, rowIndex);
         return row[col.key];
     }
+    function isHighlighted(row, index) {
+        if (props.isRowSelected && props.isRowSelected(row, index))
+            return true;
+        if (props.selectedRowKeys && props.rowKey) {
+            return props.selectedRowKeys.includes(rowKeyOf(row, index));
+        }
+        return false;
+    }
+    function ariaSelectedRow(row, index) {
+        return isHighlighted(row, index) ? "true" : undefined;
+    }
     function handleRowClick(rowIndex, row) {
+        if (props.variant === "document")
+            return;
         if (props.onRowClick)
             props.onRowClick(rowIndex, row);
     }
     function aoTeclarNaLinha(rowIndex, row, event) {
-        if (!props.onRowClick || !event)
+        if (props.treeData &&
+            event &&
+            event.target === event.currentTarget &&
+            handleTreeKey(rowIndex, event)) {
+            return;
+        }
+        if (!props.onRowClick || props.variant === "document" || !event)
             return;
         // Só a própria linha aciona. Sem esta guarda, o Espaço dentro do
         // checkbox de seleção era engolido pelo preventDefault abaixo e a
@@ -156,8 +448,11 @@ function DataTable(props) {
         event.preventDefault();
         handleRowClick(rowIndex, row);
     }
-    function rowTabIndex() {
-        return props.onRowClick ? 0 : undefined;
+    function rowTabIndexAt(index) {
+        if (props.treeData) {
+            return index === Math.min(activeRow, treeNodes().length - 1) ? 0 : -1;
+        }
+        return props.onRowClick && props.variant !== "document" ? 0 : undefined;
     }
     function rowRole() {
         return undefined;
@@ -167,17 +462,26 @@ function DataTable(props) {
             return props.selectRowLabel(index + 1);
         return "Selecionar linha " + (index + 1);
     }
+    function tableRole() {
+        return props.treeData ? "treegrid" : undefined;
+    }
     function thClasses(col) {
         return [
             "umds-datatable__th",
-            col.sortable ? "umds-datatable__th--sortable" : "",
-            props.sortKey === col.key ? "umds-datatable__th--sorted" : "",
+            col.sortable && props.variant !== "document"
+                ? "umds-datatable__th--sortable"
+                : "",
+            props.sortKey === col.key && props.variant !== "document"
+                ? "umds-datatable__th--sorted"
+                : "",
             col.align ? `umds-datatable__th--${col.align}` : "",
         ]
             .filter(Boolean)
             .join(" ");
     }
     function ariaSort(col) {
+        if (props.variant === "document")
+            return undefined;
         if (props.sortKey !== col.key)
             return "none";
         return props.sortDirection === "asc" ? "ascending" : "descending";
@@ -195,10 +499,14 @@ function DataTable(props) {
             return faSort;
         return props.sortDirection === "desc" ? faSortDown : faSortUp;
     }
-    function tdClasses(col) {
+    function sortableCol(col) {
+        return !!col.sortable && props.variant !== "document";
+    }
+    function tdClasses(col, colIndex) {
         return [
             "umds-datatable__td",
             col.align ? `umds-datatable__td--${col.align}` : "",
+            isTreeCell(colIndex) ? "umds-datatable__td--tree" : "",
         ]
             .filter(Boolean)
             .join(" ");
@@ -206,16 +514,24 @@ function DataTable(props) {
     function rowClasses(row, rowIdx) {
         return [
             "umds-datatable__row",
-            isSelected(row, rowIdx) ? "umds-datatable__row--selected" : "",
-            props.onRowClick ? "umds-datatable__row--clickable" : "",
+            isSelected(row, rowIdx) || isHighlighted(row, rowIdx)
+                ? "umds-datatable__row--selected"
+                : "",
+            isHighlighted(row, rowIdx) ? "umds-datatable__row--highlighted" : "",
+            props.striped && rowIdx % 2 === 1 ? "umds-datatable__row--striped" : "",
+            props.onRowClick && props.variant !== "document"
+                ? "umds-datatable__row--clickable"
+                : "",
         ]
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [props.selectable ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
+    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, role: tableRole(), children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [canSelect() ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
                                     ? {
                                         width: col.width,
                                     }
-                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [col.sortable ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !col.sortable ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [props.selectable ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" })] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), tabIndex: rowTabIndex(), role: rowRole(), className: rowClasses(row, rowIdx), children: [props.selectable ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: tdClasses(col), children: cellContent(col, row, rowIdx) }, col.key)))] }, rowIdx))) })) : null] })] }) }));
+                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [sortableCol(col) ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !sortableCol(col) ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: props.emptyIcon || faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" }), !!props.emptyDescription ? (_jsx("span", { className: "umds-datatable__empty-desc", children: props.emptyDescription })) : null] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs(React.Fragment, { children: [newGroupLabel(rowIdx) ? (_jsx("tr", { className: "umds-datatable__row umds-datatable__row--group", children: _jsx("th", { scope: "rowgroup", className: "umds-datatable__group", colSpan: colSpan(), children: groupContent(newGroupLabel(rowIdx), row, rowIdx) }) })) : null, _jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), onFocus: (event) => handleRowFocus(rowIdx, event), tabIndex: rowTabIndexAt(rowIdx), role: rowRole(), "aria-selected": ariaSelectedRow(row, rowIdx), "aria-level": treeLevel(rowIdx), "aria-posinset": treePosInSet(rowIdx), "aria-setsize": treeSetSize(rowIdx), "aria-expanded": treeExpanded(rowIdx), className: rowClasses(row, rowIdx), children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col, colIdx) => (_jsxs("td", { className: tdClasses(col, colIdx), children: [isTreeCell(colIdx) ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__tree-guides", children: guidesOf(rowIdx)?.map((guia, guiaIdx) => (_jsx("span", { className: guideClass(guia) }, guiaIdx))) }), _jsxs("div", { className: "umds-datatable__tree-content", style: {
+                                                                    paddingLeft: indentOf(rowIdx),
+                                                                }, children: [treeHasKids(rowIdx) ? (_jsx("button", { type: "button", className: "umds-datatable__tree-toggle", tabIndex: -1, "aria-label": toggleLabel(rowIdx), onClick: (event) => handleToggleClick(rowIdx, event), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: treeToggleIcon(rowIdx) }) })) : null, !treeHasKids(rowIdx) ? (_jsx("span", { "aria-hidden": "true", className: "umds-datatable__tree-spacer" })) : null, _jsx("div", { className: "umds-datatable__tree-text", children: cellContent(col, row, rowIdx) })] })] })) : null, !isTreeCell(colIdx) ? (_jsx(_Fragment, { children: cellContent(col, row, rowIdx) })) : null] }, col.key)))] })] }, rowIdx))) })) : null] })] }) }));
 }
 export default DataTable;

package/dist/components/DatePicker/DatePicker.css

@@ -156,6 +156,14 @@
   background-color: var(--umds-semantic-field-readonly-background);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e o WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-datepicker--readonly .umds-datepicker__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Wrapper flutuante (Portal no body; posicionado pelo floating-ui via style inline) ── */
 .umds-datepicker__floating {
   display: block;

package/dist/components/DatePicker/DatePicker.js

@@ -34,14 +34,21 @@ function DatePicker(props) {
     const [viewYear, setViewYear] = useState(() => 0);
     const [viewMonth, setViewMonth] = useState(() => 0);
     const [uid, setUid] = useState(() => "umds-datepicker-" + Math.random().toString(36).slice(2, 9));
-    const [internalFrom, setInternalFrom] = useState(() => (props.defaultRange && props.defaultRange.from) || "");
+    const [internalFrom, setInternalFrom] = useState(() => props.mode !== "range" && props.defaultValue
+        ? props.defaultValue
+        : (props.defaultRange && props.defaultRange.from) || "");
     const [internalTo, setInternalTo] = useState(() => (props.defaultRange && props.defaultRange.to) || "");
     const [hoverIso, setHoverIso] = useState(() => "");
     const [focusedIso, setFocusedIso] = useState(() => "");
     function currentFrom() {
+        if (props.mode !== "range" && props.value !== undefined) {
+            return props.value || "";
+        }
         return props.range !== undefined ? props.range.from || "" : internalFrom;
     }
     function currentTo() {
+        if (props.mode !== "range" && props.value !== undefined)
+            return "";
         return props.range !== undefined ? props.range.to || "" : internalTo;
     }
     function monthNames() {
@@ -491,6 +498,8 @@ function DatePicker(props) {
     }
     function handleKeydown(event) {
         if (event && event.key === "Escape" && open) {
+            // O Esc é do calendário (fecha só ele): o Modal em volta não reage.
+            event.preventDefault();
             closeCalendar();
         }
     }

package/dist/components/DescriptionList/DescriptionList.css

@@ -0,0 +1,127 @@
+/* ─────────────────────────────────────────────
+   DESCRIPTION LIST
+   Pares rótulo/valor de um documento, em <dl>.
+
+   inline:  grade de bordas finas, rótulo pintado à esquerda, sem cabeçalho.
+            As linhas viram `display: contents` para as duas colunas alinharem
+            entre todos os pares; as bordas são as linhas de 1px que a grade
+            deixa entre as células (o fundo da lista é a cor da borda).
+   stacked: rótulo pequeno em cima, valor embaixo, em até 4 colunas.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-description-list {
+  margin: 0;
+  padding: 0;
+  font-family: var(--umds-semantic-font-family-base);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-description-list__term,
+.umds-description-list__description {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ── inline ── */
+.umds-description-list--inline {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--umds-primitive-border-width-hairline);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-description-list--inline.umds-description-list--fit {
+  display: inline-grid;
+}
+
+.umds-description-list--inline .umds-description-list__item {
+  display: contents;
+}
+
+.umds-description-list--inline .umds-description-list__term,
+.umds-description-list--inline .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
+/* O rótulo é a coluna pintada: sem negrito e sem quebra. */
+.umds-description-list--inline .umds-description-list__term {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+  white-space: nowrap;
+}
+
+.umds-description-list--inline .umds-description-list__description {
+  background: var(--umds-semantic-color-background-white);
+}
+
+/* ── stacked ── */
+.umds-description-list--stacked {
+  display: grid;
+  gap: var(--umds-primitive-spacing-xxxs); /* 16px */
+}
+
+.umds-description-list--cols-1 { grid-template-columns: minmax(0, 1fr); }
+.umds-description-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.umds-description-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.umds-description-list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.umds-description-list--stacked .umds-description-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  min-width: 0;
+}
+
+.umds-description-list--stacked .umds-description-list__term {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-description-list--bordered .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-field-readonly-background);
+}
+
+/* ── Compacta (density="compact"): a fonte de 12px do CrisDoc ──
+   O rótulo do `stacked` já é 12px; o valor desce de 14 para 12. */
+.umds-description-list--compact {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-description-list--compact.umds-description-list--stacked {
+  gap: var(--umds-primitive-spacing-mini); /* 12px */
+}
+
+.umds-description-list--compact.umds-description-list--bordered .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
+/* Telas estreitas: o stacked vira uma coluna só. */
+@media (max-width: 640px) {
+  .umds-description-list--cols-2,
+  .umds-description-list--cols-3,
+  .umds-description-list--cols-4 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ── Impressão: o par não é cortado entre duas páginas e a cor do rótulo sai ── */
+@media print {
+  .umds-description-list {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .umds-description-list__item {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}