@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Coachmark/Coachmark.js

@@ -0,0 +1,321 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './Coachmark.css';
+import { useState, useRef, useEffect } from "react";
+import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+import Button from "../Button/Button";
+import Portal from "../Portal/Portal";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+function Coachmark(props) {
+    const cardRef = useRef(null);
+    const cleanupRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const attachedRef = useRef(null);
+    const [internalStep, setInternalStep] = useState(() => props.defaultStep || 0);
+    const [uid, setUid] = useState(() => "");
+    const [active, setActive] = useState(() => false);
+    const [hasTarget, setHasTarget] = useState(() => false);
+    const [positioned, setPositioned] = useState(() => false);
+    const [rectTop, setRectTop] = useState(() => 0);
+    const [rectLeft, setRectLeft] = useState(() => 0);
+    const [rectWidth, setRectWidth] = useState(() => 0);
+    const [rectHeight, setRectHeight] = useState(() => 0);
+    const [posX, setPosX] = useState(() => 0);
+    const [posY, setPosY] = useState(() => 0);
+    const [tentativas, setTentativas] = useState(() => 0);
+    function stepList() {
+        return props.steps || [];
+    }
+    function stepCount() {
+        return stepList().length;
+    }
+    function index() {
+        const bruto = props.step !== undefined ? props.step : internalStep;
+        const max = stepCount() > 0 ? stepCount() - 1 : 0;
+        return Math.max(0, Math.min(bruto, max));
+    }
+    function currentStep() {
+        return (stepList()[index()] || {
+            title: "",
+        });
+    }
+    function isFirst() {
+        return index() === 0;
+    }
+    function isLast() {
+        return index() === stepCount() - 1;
+    }
+    function baseId() {
+        return uid || "umds-coachmark";
+    }
+    function titleId() {
+        return baseId() + "-title";
+    }
+    function contentId() {
+        return baseId() + "-content";
+    }
+    function counterText() {
+        const modelo = props.counterLabel || "{current} de {total}";
+        return modelo
+            .replace("{current}", String(index() + 1))
+            .replace("{total}", String(stepCount()));
+    }
+    function announceText() {
+        return counterText() + ": " + currentStep().title;
+    }
+    function nextText() {
+        if (isLast())
+            return props.finishLabel || "Concluir";
+        return props.nextLabel || "Próximo";
+    }
+    function previousText() {
+        return props.previousLabel || "Anterior";
+    }
+    function skipText() {
+        return props.skipLabel || "Sair do tour";
+    }
+    function showSkip() {
+        return !props.hideSkip;
+    }
+    function show() {
+        return !!props.open && stepCount() > 0;
+    }
+    function rootClasses() {
+        return [
+            "umds-coachmark",
+            hasTarget ? "" : "umds-coachmark--no-target",
+            positioned ? "umds-coachmark--ready" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function cardClasses() {
+        return [
+            "umds-coachmark__card",
+            hasTarget ? "" : "umds-coachmark__card--centered",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function cutoutStyle() {
+        const folga = props.padding !== undefined ? props.padding : 8;
+        return {
+            top: rectTop - folga + "px",
+            left: rectLeft - folga + "px",
+            width: rectWidth + folga * 2 + "px",
+            height: rectHeight + folga * 2 + "px",
+        };
+    }
+    function cardStyle() {
+        if (!hasTarget)
+            return undefined;
+        // Opacidade, e não `visibility`: o cartão precisa poder receber o foco antes de ser posicionado.
+        return {
+            transform: "translate(" + posX + "px, " + posY + "px)",
+            opacity: positioned ? 1 : 0,
+        };
+    }
+    function resolverAlvo(alvo) {
+        if (!alvo || typeof document === "undefined")
+            return null;
+        if (typeof alvo === "string") {
+            try {
+                return document.querySelector(alvo);
+            }
+            catch (erro) {
+                return null;
+            }
+        }
+        if (typeof alvo === "function")
+            return resolverAlvo(alvo());
+        if (alvo.nodeType === 1)
+            return alvo;
+        if (alvo.current !== undefined)
+            return resolverAlvo(alvo.current);
+        if (alvo.value !== undefined)
+            return resolverAlvo(alvo.value);
+        if (alvo.$el)
+            return alvo.$el.nodeType === 1 ? alvo.$el : null;
+        return null;
+    }
+    function atualizar(alvo) {
+        if (!alvo || !cardRef.current)
+            return;
+        const caixa = alvo.getBoundingClientRect();
+        setRectTop(caixa.top);
+        setRectLeft(caixa.left);
+        setRectWidth(caixa.width);
+        setRectHeight(caixa.height);
+        const lado = (currentStep().placement || "bottom");
+        computePosition(alvo, cardRef.current, {
+            placement: lado,
+            strategy: "fixed",
+            middleware: [
+                offset(16),
+                flip(),
+                shift({
+                    padding: 16,
+                }),
+            ],
+        }).then((posicao) => {
+            const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+            setPosX(Math.round(posicao.x * dpr) / dpr);
+            setPosY(Math.round(posicao.y * dpr) / dpr);
+            setPositioned(true);
+        });
+    }
+    function ligar() {
+        desligar();
+        const alvo = resolverAlvo(currentStep().target);
+        attachedRef.current = index();
+        if (!alvo) {
+            setHasTarget(false);
+            setPositioned(true);
+            return;
+        }
+        setHasTarget(true);
+        if (alvo.scrollIntoView) {
+            const caixa = alvo.getBoundingClientRect();
+            const altura = typeof window !== "undefined" ? window.innerHeight : 0;
+            if (caixa.top < 0 || caixa.bottom > altura) {
+                alvo.scrollIntoView({
+                    block: "center",
+                    inline: "nearest",
+                });
+            }
+        }
+        if (cardRef.current) {
+            cleanupRef.current = autoUpdate(alvo, cardRef.current, () => atualizar(alvo));
+        }
+    }
+    function desligar() {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+    }
+    function sincronizar() {
+        if (typeof document === "undefined")
+            return;
+        if (show() && !active && !cardRef.current) {
+            if (tentativas < 30) {
+                requestAnimationFrame(() => {
+                    setTentativas(tentativas + 1);
+                });
+            }
+            return;
+        }
+        if (show() && !active) {
+            setActive(true);
+            setTentativas(0);
+            previousFocusRef.current = document.activeElement;
+            ligar();
+            if (cardRef.current)
+                cardRef.current.focus({
+                    preventScroll: true,
+                });
+        }
+        else if (show() && active && attachedRef.current !== index()) {
+            ligar();
+        }
+        else if (!show() && active) {
+            setActive(false);
+            desligar();
+            attachedRef.current = null;
+            setHasTarget(false);
+            setPositioned(false);
+            if (props.step === undefined)
+                setInternalStep(props.defaultStep || 0);
+            if (previousFocusRef.current && previousFocusRef.current.focus) {
+                previousFocusRef.current.focus();
+                previousFocusRef.current = null;
+            }
+        }
+    }
+    function irPara(proximo) {
+        if (proximo < 0 || proximo > stepCount() - 1)
+            return;
+        setInternalStep(proximo);
+        if (props.onStepChange)
+            props.onStepChange(proximo);
+    }
+    function fechar(motivo) {
+        if (props.onClose)
+            props.onClose(motivo);
+    }
+    function handleNext() {
+        if (isLast())
+            fechar("finish");
+        else
+            irPara(index() + 1);
+    }
+    function handlePrevious() {
+        irPara(index() - 1);
+    }
+    function handleKeyDown(event) {
+        if (!event)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            fechar("escape");
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            handleNext();
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            handlePrevious();
+            return;
+        }
+        if (event.key !== "Tab" || !cardRef.current)
+            return;
+        // Foco preso: Tab e Shift+Tab giram dentro do cartão.
+        const focaveis = cardRef.current.querySelectorAll("button:not([disabled])");
+        if (focaveis.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const primeiro = focaveis[0];
+        const ultimo = focaveis[focaveis.length - 1];
+        const ativo = document.activeElement;
+        if (event.shiftKey) {
+            if (ativo === primeiro || ativo === cardRef.current) {
+                event.preventDefault();
+                ultimo.focus();
+            }
+        }
+        else if (ativo === ultimo) {
+            event.preventDefault();
+            primeiro.focus();
+        }
+    }
+    function handleVeilMouseDown(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        if (cardRef.current)
+            cardRef.current.focus({
+                preventScroll: true,
+            });
+    }
+    useEffect(() => {
+        setUid(gerarId("umds-coachmark"));
+        sincronizar();
+    }, []);
+    useEffect(() => {
+        sincronizar();
+    });
+    useEffect(() => {
+        return () => {
+            desligar();
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) }), hasTarget ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", "aria-modal": "true", ref: cardRef, style: cardStyle(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), _jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() }), _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
+}
+export default Coachmark;

package/dist/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,96 @@
+/* ─────────────────────────────────────────────
+   CODE BLOCK
+   Texto em fonte monoespaçada, com borda, rolagem e botão de copiar.
+
+   Fundo claro e texto escuro (contraste de texto, nos temas claro e escuro: os
+   dois vêm dos semânticos). Sem cor de sintaxe.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-code-block {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--umds-semantic-color-background-light);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  overflow: hidden;
+}
+
+.umds-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-code-block__language {
+  font-family: var(--umds-semantic-font-family-mono);
+  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-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  margin: 0 0 0 auto;
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: transparent;
+  font: inherit;
+  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);
+  cursor: pointer;
+}
+
+.umds-code-block__copy:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-code-block__copy:focus-visible,
+.umds-code-block__scroll:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-code-block__scroll {
+  margin: 0;
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  overflow: auto;
+  font-family: var(--umds-semantic-font-family-mono);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  line-height: var(--umds-primitive-font-line-height-lg);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  white-space: pre;
+  tab-size: 2;
+}
+
+.umds-code-block--wrap .umds-code-block__scroll {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.umds-code-block__code {
+  font-family: inherit;
+}
+
+.umds-code-block__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,47 @@
+import './CodeBlock.css';
+/**
+ * CodeBlock — trecho de código (ou JSON, ou um log) em fonte monoespaçada, com
+ * borda, rolagem e botão de copiar.
+ *
+ * O texto vem por `code` ou como conteúdo (`<CodeBlock>{...}</CodeBlock>`); o
+ * espaço e as quebras de linha são mantidos. Linha longa rola na horizontal
+ * (ou quebra, com `wrap`), e `maxHeight` limita a altura e rola na vertical. A
+ * área de rolagem é focável (Tab) e tem nome (`ariaLabel`), para quem usa o
+ * teclado poder rolar.
+ *
+ * `copyable` põe o botão de copiar no canto: copia o texto inteiro (não o que
+ * está à vista), troca o ícone por "Copiado" por dois segundos e anuncia isso ao
+ * leitor de tela. `onCopy` recebe o texto. Os textos são props.
+ *
+ * É só texto: não colore sintaxe (isso pede uma biblioteca, e o bloco do 1Doc
+ * mostra JSON e logs, que ficam bem em uma cor só).
+ * @property {string} code - O texto (ou passe como conteúdo)
+ * @property {string} language - Nome da linguagem, mostrado no topo (ex.: "JSON"). É só rótulo
+ * @property {boolean} wrap - Quebra a linha longa em vez de rolar
+ * @property {number} maxHeight - Altura máxima, em px (rola dentro dela)
+ * @property {boolean} copyable - Mostra o botão de copiar
+ * @property {string} copyLabel - Nome do botão de copiar (padrão "Copiar")
+ * @property {string} copiedLabel - Nome do botão e anúncio depois de copiar (padrão "Copiado")
+ * @property {string} ariaLabel - Nome da área de rolagem (padrão: a linguagem, ou "Código")
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onCopy - Chamado com o texto depois de copiar
+ * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê em fonte monoespaçada e se copia.
+ * @quandoNaoUsar Para uma tecla ou atalho, use `Kbd`. Para código dentro de uma frase, use `<code>` direto. Para editar código, use um editor especializado: este bloco só mostra.
+ */
+export interface CodeBlockProps {
+    code?: string;
+    language?: string;
+    wrap?: boolean;
+    maxHeight?: number;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    ariaLabel?: string;
+    className?: string;
+    id?: string;
+    onCopy?: (code: string) => void;
+    /** O texto, quando não vem por `code`. */
+    children?: any;
+}
+declare function CodeBlock(props: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export default CodeBlock;

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './CodeBlock.css';
+import { useState, useRef, useEffect } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import Icon from "../Icon/Icon";
+function CodeBlock(props) {
+    const codeRef = useRef(null);
+    const timerRef = useRef(null);
+    const [copied, setCopied] = useState(() => false);
+    function classes() {
+        return [
+            "umds-code-block",
+            props.wrap ? "umds-code-block--wrap" : "",
+            props.copyable ? "umds-code-block--copyable" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function scrollStyle() {
+        return props.maxHeight
+            ? {
+                maxHeight: props.maxHeight + "px",
+            }
+            : undefined;
+    }
+    function regionName() {
+        return props.ariaLabel || props.language || "Código";
+    }
+    function copyText() {
+        return props.copyLabel || "Copiar";
+    }
+    function copiedText() {
+        return props.copiedLabel || "Copiado";
+    }
+    function buttonName() {
+        return copied ? copiedText() : copyText();
+    }
+    function buttonIcon() {
+        return copied ? faCheck : faCopy;
+    }
+    function announce() {
+        return copied ? copiedText() : "";
+    }
+    function textoDoBloco() {
+        if (props.code !== undefined)
+            return props.code;
+        return codeRef.current ? codeRef.current.textContent || "" : "";
+    }
+    function copiarComFallback(texto) {
+        if (typeof document === "undefined")
+            return;
+        const campo = document.createElement("textarea");
+        campo.value = texto;
+        campo.setAttribute("readonly", "");
+        campo.style.position = "fixed";
+        campo.style.opacity = "0";
+        document.body.appendChild(campo);
+        campo.select();
+        try {
+            document.execCommand("copy");
+        }
+        catch (erro) {
+            // Sem como copiar neste navegador: o botão não confirma.
+        }
+        document.body.removeChild(campo);
+    }
+    function marcarCopiado(texto) {
+        setCopied(true);
+        if (props.onCopy)
+            props.onCopy(texto);
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    }
+    function handleCopy() {
+        const texto = textoDoBloco();
+        if (typeof navigator !== "undefined" &&
+            navigator.clipboard &&
+            navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(texto).then(() => marcarCopiado(texto), () => {
+                copiarComFallback(texto);
+                marcarCopiado(texto);
+            });
+            return;
+        }
+        copiarComFallback(texto);
+        marcarCopiado(texto);
+    }
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { id: props.id, className: classes(), children: [props.language || props.copyable ? (_jsxs("div", { className: "umds-code-block__header", children: [_jsx("span", { className: "umds-code-block__language", children: props.language }), props.copyable ? (_jsxs("button", { type: "button", className: "umds-code-block__copy", "aria-label": buttonName(), title: buttonName(), onClick: (event) => handleCopy(), children: [_jsx(Icon, { size: "sm", variant: "inherit", icon: buttonIcon() }), _jsx("span", { className: "umds-code-block__copy-text", children: buttonName() })] })) : null] })) : null, _jsx("pre", { role: "region", className: "umds-code-block__scroll", "aria-label": regionName(), tabIndex: 0, style: scrollStyle(), children: _jsxs("code", { className: "umds-code-block__code", ref: codeRef, children: [props.code, _jsx(_Fragment, { children: props.children })] }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "umds-code-block__sr", children: announce() })] }));
+}
+export default CodeBlock;