@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/MultiSelect/MultiSelect.js

@@ -7,6 +7,7 @@ import Text from "../Text/Text";
 import Checkbox from "../Checkbox/Checkbox";
 import Tag from "../Tag/Tag";
 import Icon from "../Icon/Icon";
+import { gerarId } from "../../utils/id";
 function MultiSelect(props) {
     const containerRef = useRef(null);
     const searchInputRef = useRef(null);
@@ -42,15 +43,46 @@ function MultiSelect(props) {
     const [activeIndex, setActiveIndex] = useState(() => -1);
     const [internalSelected, setInternalSelected] = useState(() => props.defaultValue || Array());
     const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
-    const [uid, setUid] = useState(() => "umds-multiselect-" + Math.random().toString(36).slice(2, 9));
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
     function comboboxIdText() {
-        return (props.id || uid) + "-combobox";
+        return baseId() ? baseId() + "-combobox" : undefined;
     }
     function listboxIdText() {
-        return (props.id || uid) + "-listbox";
+        return baseId() ? baseId() + "-listbox" : undefined;
     }
     function labelIdText() {
-        return (props.id || uid) + "-label";
+        return baseId() ? baseId() + "-label" : undefined;
+    }
+    function comboboxLabelledBy() {
+        return props.label && baseId() ? labelIdText() : undefined;
+    }
+    function comboboxAriaLabel() {
+        return props.label && !baseId() ? props.label : undefined;
+    }
+    function errorIdText() {
+        return baseId() ? baseId() + "-error" : undefined;
+    }
+    function helperIdText() {
+        return baseId() ? baseId() + "-helper" : undefined;
+    }
+    function isInvalid() {
+        return !!props.invalid || !!props.errorMessage;
+    }
+    function ariaInvalidText() {
+        return isInvalid() ? "true" : undefined;
+    }
+    function describedByText() {
+        if (!baseId())
+            return undefined;
+        const partes = Array();
+        if (props.errorMessage)
+            partes.push(baseId() + "-error");
+        if (mostraApoio())
+            partes.push(baseId() + "-helper");
+        return partes.length > 0 ? partes.join(" ") : undefined;
     }
     function currentValue() {
         return props.value !== undefined
@@ -136,6 +168,8 @@ function MultiSelect(props) {
             toggle();
         }
         else if (event.key === "Escape" && isOpen) {
+            // O Esc é da lista (fecha só ela): o Modal em volta não reage.
+            event.preventDefault();
             setIsOpen(false);
             setSearchTerm("");
         }
@@ -151,6 +185,7 @@ function MultiSelect(props) {
     }
     function handleSearchKeyDown(event) {
         if (event.key === "Escape") {
+            event.preventDefault();
             setIsOpen(false);
             setSearchTerm("");
             setActiveIndex(-1);
@@ -185,12 +220,12 @@ function MultiSelect(props) {
         }
     }
     function activeOptionId() {
-        if (!isOpen || activeIndex < 0)
+        if (!isOpen || activeIndex < 0 || !baseId())
             return undefined;
-        return listboxIdText() + "-option-" + activeIndex;
+        return baseId() + "-listbox-option-" + activeIndex;
     }
     function optionIdText(index) {
-        return listboxIdText() + "-option-" + index;
+        return baseId() ? baseId() + "-listbox-option-" + index : undefined;
     }
     function clearSearchTerm() {
         setSearchTerm("");
@@ -229,6 +264,8 @@ function MultiSelect(props) {
             props.onChange([]);
     }
     useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-multiselect"));
         if (typeof document !== "undefined") {
             const handleClickOutside = (event) => {
                 if (containerRef.current &&
@@ -257,6 +294,6 @@ function MultiSelect(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { ref: containerRef, className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-multiselect__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-multiselect__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-multiselect__container", children: [_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-multiselect__trigger", id: comboboxIdText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-labelledby": props.label ? labelIdText() : undefined, "aria-disabled": props.disabled, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-multiselect__tags-area", children: [selectedOptions().length === 0 ? (_jsx("span", { className: "umds-multiselect__placeholder", children: props.placeholder || "Selecione..." })) : null, selectedOptions().length > 0 ? (_jsx(_Fragment, { children: selectedOptions()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, closeAriaLabel: removeTagAriaLabelText(opt.label), onClose: (event) => removeTag(opt.value, event) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-multiselect__actions", children: [selectedOptions().length > 0 && !props.disabled ? (_jsx("span", { role: "button", className: "umds-multiselect__clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, "aria-label": clearSelectionText(), title: clearSelectionText(), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null, _jsx("div", { className: "umds-multiselect__arrow", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faChevronDown }) })] })] }), isOpen ? (_jsxs("div", { className: "umds-multiselect__dropdown", children: [_jsxs("div", { className: "umds-multiselect__search", children: [_jsx("div", { className: "umds-multiselect__search-icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", role: "combobox", className: "umds-multiselect__search-input", ref: searchInputRef, "aria-label": props.searchAriaLabel || "Buscar", placeholder: props.searchPlaceholder || "Buscar...", value: searchTerm, onInput: (event) => handleSearch(event), onChange: (event) => handleSearch(event), onKeyDown: (event) => handleSearchKeyDown(event), onClick: (event) => event.stopPropagation(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeOptionId() }), !!searchTerm ? (_jsx("span", { role: "button", className: "umds-multiselect__search-clear", onClick: (event) => clearSearchTerm(), onKeyDown: (event) => aoTeclarLimparBusca(event), tabIndex: 0, "aria-label": props.clearSearchAriaLabel || "Limpar busca", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }), _jsxs("div", { role: "listbox", "aria-multiselectable": "true", className: "umds-multiselect__options", id: listboxIdText(), children: [filteredOptions().length === 0 ? (_jsx("div", { className: "umds-multiselect__empty", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptions()?.map((option, indice) => (_jsxs("div", { role: "option", id: optionIdText(indice), onClick: (event) => selectOption(option.value), "aria-selected": isSelected(option.value), className: optionClasses(option.value, indice), children: [_jsx("div", { "aria-hidden": "true", className: "umds-multiselect__option-checkbox", children: _jsx(Checkbox, { size: "sm", checked: isSelected(option.value), decorative: true }) }), _jsx("span", { className: "umds-multiselect__option-label", children: option.label })] }, option.value)))] }), selectedOptions().length > 0 ? (_jsxs("div", { className: "umds-multiselect__footer", children: [_jsx(Text, { variant: "caption", color: "secondary", children: selectedCountText() }), _jsx("span", { role: "button", className: "umds-multiselect__footer-clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, children: props.clearAllLabel || "Limpar tudo" })] })) : null] })) : null] }), props.name ? (_jsx(_Fragment, { children: currentValue()?.map((val) => (_jsx("input", { type: "hidden", name: props.name, value: String(val) }, String(val)))) })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-multiselect__error-message", children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-multiselect__description", children: textoDeApoio() })) : null] }));
+    return (_jsxs("div", { ref: containerRef, className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-multiselect__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-multiselect__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-multiselect__container", children: [_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-multiselect__trigger", id: comboboxIdText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-disabled": props.disabled, "aria-invalid": ariaInvalidText(), "aria-describedby": describedByText(), tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-multiselect__tags-area", children: [selectedOptions().length === 0 ? (_jsx("span", { className: "umds-multiselect__placeholder", children: props.placeholder || "Selecione..." })) : null, selectedOptions().length > 0 ? (_jsx(_Fragment, { children: selectedOptions()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, closeAriaLabel: removeTagAriaLabelText(opt.label), onClose: (event) => removeTag(opt.value, event) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-multiselect__actions", children: [selectedOptions().length > 0 && !props.disabled ? (_jsx("span", { role: "button", className: "umds-multiselect__clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, "aria-label": clearSelectionText(), title: clearSelectionText(), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null, _jsx("div", { className: "umds-multiselect__arrow", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faChevronDown }) })] })] }), isOpen ? (_jsxs("div", { className: "umds-multiselect__dropdown", children: [_jsxs("div", { className: "umds-multiselect__search", children: [_jsx("div", { className: "umds-multiselect__search-icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", role: "combobox", className: "umds-multiselect__search-input", ref: searchInputRef, "aria-label": props.searchAriaLabel || "Buscar", placeholder: props.searchPlaceholder || "Buscar...", value: searchTerm, onInput: (event) => handleSearch(event), onChange: (event) => handleSearch(event), onKeyDown: (event) => handleSearchKeyDown(event), onClick: (event) => event.stopPropagation(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeOptionId() }), !!searchTerm ? (_jsx("span", { role: "button", className: "umds-multiselect__search-clear", onClick: (event) => clearSearchTerm(), onKeyDown: (event) => aoTeclarLimparBusca(event), tabIndex: 0, "aria-label": props.clearSearchAriaLabel || "Limpar busca", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }), _jsxs("div", { role: "listbox", "aria-multiselectable": "true", className: "umds-multiselect__options", id: listboxIdText(), children: [filteredOptions().length === 0 ? (_jsx("div", { className: "umds-multiselect__empty", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptions()?.map((option, indice) => (_jsxs("div", { role: "option", id: optionIdText(indice), onClick: (event) => selectOption(option.value), "aria-selected": isSelected(option.value), className: optionClasses(option.value, indice), children: [_jsx("div", { "aria-hidden": "true", className: "umds-multiselect__option-checkbox", children: _jsx(Checkbox, { size: "sm", checked: isSelected(option.value), decorative: true }) }), _jsx("span", { className: "umds-multiselect__option-label", children: option.label })] }, option.value)))] }), selectedOptions().length > 0 ? (_jsxs("div", { className: "umds-multiselect__footer", children: [_jsx(Text, { variant: "caption", color: "secondary", children: selectedCountText() }), _jsx("span", { role: "button", className: "umds-multiselect__footer-clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, children: props.clearAllLabel || "Limpar tudo" })] })) : null] })) : null] }), props.name ? (_jsx(_Fragment, { children: currentValue()?.map((val) => (_jsx("input", { type: "hidden", name: props.name, value: String(val) }, String(val)))) })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-multiselect__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-multiselect__description", id: helperIdText(), children: textoDeApoio() })) : null] }));
 }
 export default MultiSelect;

package/dist/components/OrgChart/OrgChart.css

@@ -0,0 +1,149 @@
+/* ─────────────────────────────────────────────
+   ORG CHART
+   Organograma de cima para baixo, com conectores.
+
+   O desenho é calculado em JS (posições absolutas numa superfície do tamanho do
+   organograma); este CSS dá a cara dos nós e das linhas. A raiz sai cheia na
+   cor primária, os demais em tom claro. O texto do nó corta com reticências.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-org-chart {
+  font-family: var(--umds-semantic-font-family-base);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-org-chart__scroller {
+  overflow: auto;
+  /* Folga para o foco e a sombra dos nós não serem cortados pelo overflow. */
+  padding: var(--umds-primitive-spacing-nano);
+}
+
+.umds-org-chart__surface {
+  position: relative;
+  margin: 0 auto;
+}
+
+.umds-org-chart__lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.umds-org-chart__line {
+  fill: none;
+  stroke: var(--umds-semantic-color-neutral-light-down);
+  stroke-width: var(--umds-primitive-border-width-hairline);
+}
+
+/* ── Nó ── */
+.umds-org-chart__node {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--umds-primitive-spacing-micro); /* 2px */
+  padding: var(--umds-primitive-spacing-nano); /* 8px */
+  text-align: center;
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  box-shadow: var(--umds-semantic-shadow-sm);
+  cursor: pointer;
+  transition:
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-org-chart__node--root {
+  background: var(--umds-semantic-color-primary-pure);
+  /* Texto claro sobre o primário cheio. */
+  color: var(--umds-semantic-color-background-white);
+  border-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:hover {
+  box-shadow: var(--umds-semantic-shadow-md);
+}
+
+.umds-org-chart__node--selected {
+  border-color: var(--umds-semantic-color-primary-pure);
+  box-shadow: 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-border-width-thin);
+}
+
+.umds-org-chart__title,
+.umds-org-chart__subtitle {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.umds-org-chart__title {
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-org-chart__subtitle {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-org-chart__custom {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── Expandir e recolher (mouse; o teclado usa Espaço no nó) ── */
+.umds-org-chart__toggle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xxs); /* 24px */
+  height: var(--umds-primitive-spacing-xxs);
+  margin: 0;
+  padding: 0;
+  transform: translate(-50%, -50%);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-circular);
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  line-height: 1;
+  cursor: pointer;
+}
+
+.umds-org-chart__toggle:hover {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+@media (forced-colors: active) {
+  .umds-org-chart__node {
+    border: var(--umds-primitive-border-width-hairline) solid CanvasText;
+  }
+
+  .umds-org-chart__node--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+
+  .umds-org-chart__line {
+    stroke: CanvasText;
+  }
+}

package/dist/components/OrgChart/OrgChart.d.ts

@@ -0,0 +1,83 @@
+import './OrgChart.css';
+/**
+ * Nó do organograma.
+ * @property {string} id - Identidade do nó (única no organograma)
+ * @property {string} title - Título do nó (a sigla, por exemplo)
+ * @property {string} subtitle - Segunda linha (o nome por extenso)
+ * @property {OrgChartNode[]} children - Nós filhos
+ */
+export interface OrgChartNode {
+    id: string;
+    title: string;
+    subtitle?: string;
+    children?: OrgChartNode[];
+    [key: string]: any;
+}
+/**
+ * OrgChart — organograma: uma árvore hierárquica desenhada de cima para baixo,
+ * com conectores, em que cada nó mostra título e subtítulo (ou o conteúdo que
+ * você der) e os que têm filhos expandem e recolhem.
+ *
+ * O desenho é calculado, não aninhado: cada nó tem largura e altura fixas
+ * (`nodeWidth`, `nodeHeight`), os filhos se distribuem sob o pai e o pai se
+ * centra sobre eles. Por isso o texto do nó corta com reticências (o `title`
+ * completo vai no tooltip) e o conteúdo livre precisa caber na caixa. Se o
+ * organograma passar da largura do container, o container rola.
+ *
+ * O primeiro nível (a raiz) sai cheio na cor primária e os demais em tom claro;
+ * `selectedId` marca um nó. O conteúdo do nó é livre: no React, `renderNode(nó,
+ * { level, expanded })`; no Vue, o slot `node` com `{ node, level, expanded }`.
+ *
+ * Acessibilidade: é uma `role="tree"` com nós `treeitem` (`aria-level`,
+ * `aria-posinset`, `aria-setsize`, `aria-expanded`). Um Tab entra no nó em foco;
+ * Cima vai ao pai, Baixo ao primeiro filho (abrindo o nó, se estiver recolhido),
+ * Esquerda e Direita aos irmãos, Home e End ao primeiro e ao último irmão, Espaço
+ * expande ou recolhe, Enter aciona o nó (`onNodeClick`). O botão de expandir
+ * desenhado no nó é para o mouse (a mesma ação do teclado já existe).
+ *
+ * Tudo expandido por padrão: `collapsedIds` (controlado) ou `defaultCollapsedIds`
+ * escolhem o que começa recolhido, e `onCollapsedChange` avisa a lista nova.
+ *
+ * Limites: só de cima para baixo; sem zoom nem arrastar (a rolagem é a do
+ * container); nó de altura variável não cabe: use `nodeHeight` para o maior.
+ * @property {OrgChartNode[]} nodes - A árvore: lista de nós raiz, cada um com `children`
+ * @property {string[]} collapsedIds - Ids recolhidos (controlado)
+ * @property {string[]} defaultCollapsedIds - Ids que começam recolhidos (não controlado)
+ * @property {string} selectedId - Id do nó marcado
+ * @property {number} nodeWidth - Largura de cada nó, em px (padrão 176)
+ * @property {number} nodeHeight - Altura de cada nó, em px (padrão 64)
+ * @property {number} gapX - Espaço entre nós irmãos, em px (padrão 16)
+ * @property {number} gapY - Espaço entre um nível e o seguinte, em px (padrão 40)
+ * @property {string} ariaLabel - Nome acessível da árvore (padrão "Organograma")
+ * @property {string} expandLabel - Nome do botão de expandir (padrão "Expandir")
+ * @property {string} collapseLabel - Nome do botão de recolher (padrão "Recolher")
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} renderNode - Só no React: conteúdo do nó, `(nó, { level, expanded }) => nó`. No Vue, o slot `node`.
+ * @property {function} onNodeClick - Clique ou Enter num nó: recebe o nó
+ * @property {function} onCollapsedChange - Mudou o que está recolhido: recebe a lista de ids
+ * @slot node - Só no Vue. Conteúdo do nó: `{ node, level, expanded }`.
+ * @quandoUsar Mostrar a estrutura de setores ou de cargos de um órgão como um desenho, com a hierarquia à vista.
+ * @quandoNaoUsar Para navegar e escolher em hierarquias grandes, use `Tree` (lista indentada, mais densa e acessível). Para um fluxo de processo, use o editor de processos. Para uma lista plana, use `List`.
+ */
+export interface OrgChartProps {
+    nodes?: OrgChartNode[];
+    collapsedIds?: string[];
+    defaultCollapsedIds?: string[];
+    selectedId?: string;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    gapX?: number;
+    gapY?: number;
+    ariaLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    className?: string;
+    renderNode?: (node: OrgChartNode, meta: {
+        level: number;
+        expanded: boolean;
+    }) => any;
+    onNodeClick?: (node: OrgChartNode) => void;
+    onCollapsedChange?: (ids: string[]) => void;
+}
+declare function OrgChart(props: OrgChartProps): import("react/jsx-runtime").JSX.Element;
+export default OrgChart;

package/dist/components/OrgChart/OrgChart.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './OrgChart.css';
+import { useState, useRef, useEffect } from "react";
+function OrgChart(props) {
+    const rootRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const [internalCollapsed, setInternalCollapsed] = useState(() => props.defaultCollapsedIds || []);
+    const [focusId, setFocusId] = useState(() => "");
+    function widthPx() {
+        return props.nodeWidth && props.nodeWidth > 0 ? props.nodeWidth : 176;
+    }
+    function heightPx() {
+        return props.nodeHeight && props.nodeHeight > 0 ? props.nodeHeight : 64;
+    }
+    function gapXPx() {
+        return props.gapX !== undefined && props.gapX >= 0 ? props.gapX : 16;
+    }
+    function gapYPx() {
+        return props.gapY !== undefined && props.gapY >= 0 ? props.gapY : 40;
+    }
+    function collapsed() {
+        return props.collapsedIds !== undefined
+            ? props.collapsedIds
+            : internalCollapsed;
+    }
+    function treeName() {
+        return props.ariaLabel || "Organograma";
+    }
+    function classes() {
+        return ["umds-org-chart", props.className].filter(Boolean).join(" ");
+    }
+    function layout() {
+        const raizes = props.nodes || [];
+        const larg = widthPx();
+        const alt = heightPx();
+        const passoX = larg + gapXPx();
+        const passoY = alt + gapYPx();
+        const fechados = collapsed();
+        const lista = [];
+        const caminhos = [];
+        let folha = 0;
+        let maxNivel = 0;
+        const visitar = (no, nivel, paiId, pos, total) => {
+            const filhos = no.children || [];
+            const temFilhos = filhos.length > 0;
+            const aberto = temFilhos && fechados.indexOf(no.id) === -1;
+            const item = {
+                id: no.id,
+                node: no,
+                level: nivel,
+                parentId: paiId,
+                position: pos,
+                setSize: total,
+                hasChildren: temFilhos,
+                expanded: aberto,
+                childIds: [],
+                x: 0,
+                y: nivel * passoY,
+            };
+            if (nivel > maxNivel)
+                maxNivel = nivel;
+            lista.push(item);
+            if (aberto) {
+                const acima = [];
+                for (let i = 0; i < filhos.length; i++) {
+                    const filho = visitar(filhos[i], nivel + 1, no.id, i + 1, filhos.length);
+                    acima.push(filho);
+                    item.childIds.push(filho.id);
+                }
+                item.x = (acima[0].x + acima[acima.length - 1].x) / 2;
+                // Conector: desce do pai até o meio do espaço, corre na horizontal e desce a cada filho.
+                const paiCentro = item.x + larg / 2;
+                const baseDoPai = item.y + alt;
+                const meio = baseDoPai + gapYPx() / 2;
+                let d = "M" + paiCentro + " " + baseDoPai + " V" + meio;
+                const primeiro = acima[0].x + larg / 2;
+                const ultimo = acima[acima.length - 1].x + larg / 2;
+                if (acima.length > 1)
+                    d += " M" + primeiro + " " + meio + " H" + ultimo;
+                for (let j = 0; j < acima.length; j++) {
+                    const cx = acima[j].x + larg / 2;
+                    d += " M" + cx + " " + meio + " V" + acima[j].y;
+                }
+                caminhos.push(d);
+            }
+            else {
+                item.x = folha * passoX;
+                folha = folha + 1;
+            }
+            return item;
+        };
+        for (let r = 0; r < raizes.length; r++) {
+            visitar(raizes[r], 0, "", r + 1, raizes.length);
+        }
+        return {
+            items: lista,
+            paths: caminhos,
+            width: Math.max(folha * passoX - gapXPx(), larg),
+            height: (maxNivel + 1) * passoY - gapYPx(),
+        };
+    }
+    function itemList() {
+        return layout().items;
+    }
+    function toggleList() {
+        return itemList().filter((item) => item.hasChildren);
+    }
+    function pathList() {
+        return layout().paths;
+    }
+    function surfaceStyle() {
+        return {
+            width: layout().width + "px",
+            height: layout().height + "px",
+        };
+    }
+    function hasNodes() {
+        return itemList().length > 0;
+    }
+    function tabId() {
+        const lista = itemList();
+        for (let i = 0; i < lista.length; i++) {
+            if (lista[i].id === focusId)
+                return focusId;
+        }
+        return lista.length ? lista[0].id : "";
+    }
+    function nodeClasses(item) {
+        return [
+            "umds-org-chart__node",
+            item.level === 0 ? "umds-org-chart__node--root" : "",
+            item.id === props.selectedId ? "umds-org-chart__node--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function nodeStyle(item) {
+        return {
+            left: item.x + "px",
+            top: item.y + "px",
+            width: widthPx() + "px",
+            height: heightPx() + "px",
+        };
+    }
+    function toggleStyle(item) {
+        return {
+            left: item.x + widthPx() / 2 + "px",
+            top: item.y + heightPx() + "px",
+        };
+    }
+    function expandedText(item) {
+        return item.hasChildren ? (item.expanded ? "true" : "false") : undefined;
+    }
+    function selectedText(item) {
+        return item.id === props.selectedId ? "true" : undefined;
+    }
+    function toggleGlyph(item) {
+        return item.expanded ? "−" : "+";
+    }
+    function toggleName(item) {
+        return item.expanded
+            ? props.collapseLabel || "Recolher"
+            : props.expandLabel || "Expandir";
+    }
+    function subtitleOf(item) {
+        return item.node.subtitle || "";
+    }
+    function customContent(item) {
+        if (props.renderNode)
+            return props.renderNode(item.node, {
+                level: item.level,
+                expanded: item.expanded,
+            });
+        return "";
+    }
+    function hasCustomContent() {
+        return !!props.renderNode;
+    }
+    function plainContent() {
+        return !props.renderNode;
+    }
+    function mudarRecolhidos(proximos) {
+        setInternalCollapsed(proximos);
+        if (props.onCollapsedChange)
+            props.onCollapsedChange(proximos);
+    }
+    function alternar(item) {
+        if (!item.hasChildren)
+            return;
+        const atuais = collapsed();
+        mudarRecolhidos(item.expanded
+            ? atuais.concat([item.id])
+            : atuais.filter((id) => id !== item.id));
+    }
+    function acharItem(id) {
+        const lista = itemList();
+        for (let i = 0; i < lista.length; i++) {
+            if (lista[i].id === id)
+                return lista[i];
+        }
+        return null;
+    }
+    function irPara(id) {
+        if (!id)
+            return;
+        setFocusId(id);
+        focoPendenteRef.current = id;
+    }
+    function focarNo(id) {
+        if (!rootRef.current)
+            return;
+        const alvo = rootRef.current.querySelector('[data-node-id="' + id + '"]');
+        if (alvo)
+            alvo.focus();
+    }
+    function handleNodeClick(item) {
+        setFocusId(item.id);
+        if (props.onNodeClick)
+            props.onNodeClick(item.node);
+    }
+    function handleToggleClick(event, item) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        alternar(item);
+    }
+    function irmaosDe(item) {
+        return itemList().filter((outro) => outro.parentId === item.parentId);
+    }
+    function handleKeyDown(event, item) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.target !== event.currentTarget)
+            return;
+        const tecla = event.key;
+        const irmaos = irmaosDe(item);
+        // Por id: o desenho é recalculado a cada leitura, então os objetos mudam e a identidade não vale.
+        let indice = -1;
+        for (let i = 0; i < irmaos.length; i++) {
+            if (irmaos[i].id === item.id)
+                indice = i;
+        }
+        if (tecla === "ArrowLeft" || tecla === "ArrowRight") {
+            event.preventDefault();
+            const alvo = irmaos[indice + (tecla === "ArrowRight" ? 1 : -1)];
+            if (alvo)
+                irPara(alvo.id);
+        }
+        else if (tecla === "Home") {
+            event.preventDefault();
+            irPara(irmaos[0].id);
+        }
+        else if (tecla === "End") {
+            event.preventDefault();
+            irPara(irmaos[irmaos.length - 1].id);
+        }
+        else if (tecla === "ArrowUp") {
+            event.preventDefault();
+            if (item.parentId)
+                irPara(item.parentId);
+        }
+        else if (tecla === "ArrowDown") {
+            event.preventDefault();
+            if (!item.hasChildren)
+                return;
+            if (!item.expanded) {
+                // Recolhido: o primeiro Baixo abre; o foco desce no seguinte.
+                alternar(item);
+                return;
+            }
+            irPara(item.childIds[0]);
+        }
+        else if (tecla === " ") {
+            event.preventDefault();
+            alternar(item);
+        }
+        else if (tecla === "Enter") {
+            event.preventDefault();
+            handleNodeClick(item);
+        }
+    }
+    function handleFocus(event, item) {
+        if (event && event.target !== event.currentTarget)
+            return;
+        if (focusId !== item.id)
+            setFocusId(item.id);
+    }
+    useEffect(() => {
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            focarNo(alvo);
+        }
+    });
+    return (_jsx("div", { ref: rootRef, className: classes(), children: hasNodes() ? (_jsx("div", { role: "tree", className: "umds-org-chart__scroller", "aria-label": treeName(), children: _jsxs("div", { className: "umds-org-chart__surface", style: surfaceStyle(), children: [_jsx("svg", { "aria-hidden": "true", focusable: "false", className: "umds-org-chart__lines", width: layout().width, height: layout().height, children: pathList()?.map((caminho, posicao) => (_jsx("path", { className: "umds-org-chart__line", d: caminho }, posicao))) }), itemList()?.map((item) => (_jsxs("div", { role: "treeitem", style: nodeStyle(item), "data-node-id": item.id, "aria-level": item.level + 1, "aria-posinset": item.position, "aria-setsize": item.setSize, "aria-expanded": expandedText(item), "aria-selected": selectedText(item), tabIndex: item.id === tabId() ? 0 : -1, onClick: (event) => handleNodeClick(item), onKeyDown: (event) => handleKeyDown(event, item), onFocus: (event) => handleFocus(event, item), className: nodeClasses(item), children: [hasCustomContent() ? (_jsx("div", { className: "umds-org-chart__custom", children: customContent(item) })) : null, plainContent() ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-org-chart__title", title: item.node.title, children: item.node.title }), item.node.subtitle ? (_jsx("span", { className: "umds-org-chart__subtitle", title: subtitleOf(item), children: item.node.subtitle })) : null] })) : null] }, item.id))), toggleList()?.map((item) => (_jsx("button", { type: "button", "aria-hidden": "true", className: "umds-org-chart__toggle", style: toggleStyle(item), tabIndex: -1, title: toggleName(item), onClick: (event) => handleToggleClick(event, item), children: toggleGlyph(item) }, item.id)))] }) })) : null }));
+}
+export default OrgChart;