@vector-business-services/cristal-ds-web 0.12.0 → 0.13.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -271,6 +271,32 @@ interface DrawerProps {
 }
 declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
+/** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
+type TooltipType = 'plain' | 'rich';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** Elemento que mostra o tooltip: ref, elemento ou seletor CSS. */
+    target: RefObject<HTMLElement | null> | HTMLElement | string;
+    /** Texto do tooltip (Label no Plain, Text no Rich). */
+    content: ReactNode;
+    type?: TooltipType;
+    /** Lado do alvo. O Prime inverte o lado se faltar espaço na tela. */
+    position?: TooltipPosition;
+    /** O que abre o tooltip; o padrão abre no hover e no foco do teclado. */
+    event?: 'hover' | 'focus' | 'both';
+    showDelay?: number;
+    hideDelay?: number;
+    disabled?: boolean;
+    /**
+     * Liga o texto ao alvo como descrição (aria-describedby). Padrão: true. Use false quando o texto
+     * já é o nome do alvo (como no IconButton), para o leitor de tela não ler duas vezes.
+     */
+    describe?: boolean;
+    id?: string;
+    className?: string;
+}
+declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, describe, id, className, }: TooltipProps): react.JSX.Element;
+
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
  * que aqui é `ghost`: só o ícone, com fundo no hover.
@@ -285,6 +311,13 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     icon: ReactNode;
     /** Obrigatório: o botão não tem texto, então é isso que o leitor de tela anuncia. */
     'aria-label': string;
+    /**
+     * Tooltip do botão. Padrão: o próprio `aria-label`, para quem vê saber o que o ícone faz. Um
+     * texto diferente vira também a descrição do botão; `false` tira o tooltip.
+     */
+    tooltip?: ReactNode | false;
+    /** Lado do tooltip. Padrão: bottom. */
+    tooltipPosition?: TooltipPosition;
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -554,9 +587,17 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     segmentControl?: ReactNode;
     /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
     actions?: ReactNode;
-    /** Mostra o botão de expandir, o último das ferramentas. */
-    onExpand?: () => void;
+    /**
+     * Mostra o botão de expandir, o último das ferramentas. Recebe o novo estado: true ao expandir,
+     * false ao recolher.
+     */
+    onExpand?: (expanded: boolean) => void;
+    /** Expandido (controlado). Sem ele, o PageHeader alterna sozinho a cada clique. */
+    expanded?: boolean;
+    /** Nome do botão recolhido (ArrowsOutSimple). */
     expandLabel?: string;
+    /** Nome do botão expandido (ArrowsInSimple). */
+    collapseLabel?: string;
     /** Abas abaixo do título (Show Tabs no Figma). */
     tabs?: PageHeaderTab[];
     /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
@@ -791,26 +832,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-/** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
-type TooltipType = 'plain' | 'rich';
-type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-interface TooltipProps {
-    /** Elemento que mostra o tooltip: ref, elemento ou seletor CSS. */
-    target: RefObject<HTMLElement | null> | HTMLElement | string;
-    /** Texto do tooltip (Label no Plain, Text no Rich). */
-    content: ReactNode;
-    type?: TooltipType;
-    /** Lado do alvo. O Prime inverte o lado se faltar espaço na tela. */
-    position?: TooltipPosition;
-    /** O que abre o tooltip; o padrão abre no hover e no foco do teclado. */
-    event?: 'hover' | 'focus' | 'both';
-    showDelay?: number;
-    hideDelay?: number;
-    disabled?: boolean;
-    id?: string;
-    className?: string;
-}
-declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
-
 export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
 export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -271,6 +271,32 @@ interface DrawerProps {
 }
 declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
+/** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
+type TooltipType = 'plain' | 'rich';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** Elemento que mostra o tooltip: ref, elemento ou seletor CSS. */
+    target: RefObject<HTMLElement | null> | HTMLElement | string;
+    /** Texto do tooltip (Label no Plain, Text no Rich). */
+    content: ReactNode;
+    type?: TooltipType;
+    /** Lado do alvo. O Prime inverte o lado se faltar espaço na tela. */
+    position?: TooltipPosition;
+    /** O que abre o tooltip; o padrão abre no hover e no foco do teclado. */
+    event?: 'hover' | 'focus' | 'both';
+    showDelay?: number;
+    hideDelay?: number;
+    disabled?: boolean;
+    /**
+     * Liga o texto ao alvo como descrição (aria-describedby). Padrão: true. Use false quando o texto
+     * já é o nome do alvo (como no IconButton), para o leitor de tela não ler duas vezes.
+     */
+    describe?: boolean;
+    id?: string;
+    className?: string;
+}
+declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, describe, id, className, }: TooltipProps): react.JSX.Element;
+
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
  * que aqui é `ghost`: só o ícone, com fundo no hover.
@@ -285,6 +311,13 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     icon: ReactNode;
     /** Obrigatório: o botão não tem texto, então é isso que o leitor de tela anuncia. */
     'aria-label': string;
+    /**
+     * Tooltip do botão. Padrão: o próprio `aria-label`, para quem vê saber o que o ícone faz. Um
+     * texto diferente vira também a descrição do botão; `false` tira o tooltip.
+     */
+    tooltip?: ReactNode | false;
+    /** Lado do tooltip. Padrão: bottom. */
+    tooltipPosition?: TooltipPosition;
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -554,9 +587,17 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     segmentControl?: ReactNode;
     /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
     actions?: ReactNode;
-    /** Mostra o botão de expandir, o último das ferramentas. */
-    onExpand?: () => void;
+    /**
+     * Mostra o botão de expandir, o último das ferramentas. Recebe o novo estado: true ao expandir,
+     * false ao recolher.
+     */
+    onExpand?: (expanded: boolean) => void;
+    /** Expandido (controlado). Sem ele, o PageHeader alterna sozinho a cada clique. */
+    expanded?: boolean;
+    /** Nome do botão recolhido (ArrowsOutSimple). */
     expandLabel?: string;
+    /** Nome do botão expandido (ArrowsInSimple). */
+    collapseLabel?: string;
     /** Abas abaixo do título (Show Tabs no Figma). */
     tabs?: PageHeaderTab[];
     /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
@@ -791,26 +832,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-/** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
-type TooltipType = 'plain' | 'rich';
-type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-interface TooltipProps {
-    /** Elemento que mostra o tooltip: ref, elemento ou seletor CSS. */
-    target: RefObject<HTMLElement | null> | HTMLElement | string;
-    /** Texto do tooltip (Label no Plain, Text no Rich). */
-    content: ReactNode;
-    type?: TooltipType;
-    /** Lado do alvo. O Prime inverte o lado se faltar espaço na tela. */
-    position?: TooltipPosition;
-    /** O que abre o tooltip; o padrão abre no hover e no foco do teclado. */
-    event?: 'hover' | 'focus' | 'both';
-    showDelay?: number;
-    hideDelay?: number;
-    disabled?: boolean;
-    id?: string;
-    className?: string;
-}
-declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
-
 export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
 export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useCallback, useEffect, useContext, cloneElement, useLayoutEffect, useMemo } from 'react';
 import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
-import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft, Question } from '@phosphor-icons/react';
+import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsInSimple, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft, Question } from '@phosphor-icons/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
 import { Badge as Badge$1 } from 'primereact/badge';
@@ -209,6 +209,11 @@ var Card = forwardRef(function Card2({ padding = "xsmall", outline = false, clas
     }
   );
 });
+var usandoTeclado = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("keydown", () => usandoTeclado = true, true);
+  document.addEventListener("pointerdown", () => usandoTeclado = false, true);
+}
 var resolveTargets = (target) => {
   if (typeof target === "string") return Array.from(document.querySelectorAll(target));
   if (target instanceof HTMLElement) return [target];
@@ -223,16 +228,18 @@ function Tooltip({
   showDelay,
   hideDelay,
   disabled,
+  describe = true,
   id,
   className
 }) {
   const autoId = useId();
   const tooltipId = id ?? autoId;
   useEffect(() => {
+    if (!describe) return;
     const elements = resolveTargets(target);
     elements.forEach((element) => element.setAttribute("aria-describedby", tooltipId));
     return () => elements.forEach((element) => element.removeAttribute("aria-describedby"));
-  }, [target, tooltipId]);
+  }, [target, tooltipId, describe]);
   const classes = ["cr-tooltip", `cr-tooltip--${type}`, className].filter(Boolean).join(" ");
   const pt = {
     root: (options) => {
@@ -253,6 +260,7 @@ function Tooltip({
       showDelay,
       hideDelay,
       disabled,
+      onBeforeShow: (e) => e.originalEvent?.type !== "focus" || usandoTeclado,
       pt,
       children: content
     }
@@ -656,24 +664,54 @@ var Divider = forwardRef(function Divider2({ orientation = "horizontal", variant
     }
   );
 });
-var IconButton = forwardRef(function IconButton2({ variant = "primary", size = "large", icon, type = "button", className, ...props }, ref) {
+var IconButton = forwardRef(function IconButton2({
+  variant = "primary",
+  size = "large",
+  icon,
+  type = "button",
+  tooltip,
+  tooltipPosition,
+  className,
+  ...props
+}, ref) {
+  const botao = useRef(null);
+  const ligar = useCallback(
+    (elemento) => {
+      botao.current = elemento;
+      if (typeof ref === "function") ref(elemento);
+      else if (ref) ref.current = elemento;
+    },
+    [ref]
+  );
+  const texto = tooltip ?? props["aria-label"];
   const classes = [
     "cr-icon-button",
     `cr-icon-button--${variant}`,
     `cr-icon-button--${size}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      unstyled: true,
-      ref,
-      type,
-      className: classes,
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        unstyled: true,
+        ref: ligar,
+        type,
+        className: classes,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
+      }
+    ),
+    texto !== false && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        target: botao,
+        content: texto,
+        position: tooltipPosition,
+        describe: texto !== props["aria-label"]
+      }
+    )
+  ] });
 });
 var FOCAVEIS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Drawer({
@@ -1590,7 +1628,9 @@ var PageHeader = forwardRef(function PageHeader2({
   segmentControl,
   actions,
   onExpand,
+  expanded,
   expandLabel = "Expandir",
+  collapseLabel = "Recolher",
   tabs,
   activeTab,
   onTabChange,
@@ -1600,6 +1640,8 @@ var PageHeader = forwardRef(function PageHeader2({
 }, ref) {
   const [interna, setInterna] = useState(0);
   const ativa = activeTab ?? interna;
+  const [expandidoInterno, setExpandidoInterno] = useState(false);
+  const expandido = expanded ?? expandidoInterno;
   const tools = segmentControl || actions;
   const tabTemplate = (tab) => (
     // O TabMenu também passa o index da aba nas opções, além do que o tipo do MenuItem declara.
@@ -1647,9 +1689,12 @@ var PageHeader = forwardRef(function PageHeader2({
               className: "cr-page-header__expand",
               variant: "tertiary",
               size: "medium",
-              icon: /* @__PURE__ */ jsx(ArrowsOutSimple, {}),
-              "aria-label": expandLabel,
-              onClick: onExpand
+              icon: expandido ? /* @__PURE__ */ jsx(ArrowsInSimple, {}) : /* @__PURE__ */ jsx(ArrowsOutSimple, {}),
+              "aria-label": expandido ? collapseLabel : expandLabel,
+              onClick: () => {
+                setExpandidoInterno(!expandido);
+                onExpand(!expandido);
+              }
             }
           )
         ]