@vector-business-services/cristal-ds-web 0.16.0 → 0.18.0

package/dist/index.d.cts

@@ -1,11 +1,13 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
+import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, RefObject, MouseEvent, Ref, ReactElement } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
 import { RadioButtonChangeEvent } from 'primereact/radiobutton';
 import { InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { DataTableValue, DataTableProps, DataTableSelectionSingleChangeEvent, DataTableSelectionMultipleChangeEvent, DataTable } from 'primereact/datatable';
+import { ColumnProps as ColumnProps$1 } from 'primereact/column';
 import { ToastProps as ToastProps$1 } from 'primereact/toast';
 
 /** Um item (.Accordion Item no Figma) e o conteúdo dele. */
@@ -62,7 +64,7 @@ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttri
 
 type AutoCompleteVariant = InputVariant;
 type AutoCompleteSize = InputSize;
-interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdown' | 'dropdownAriaLabel' | 'dropdownAutoFocus' | 'dropdownIcon' | 'dropdownMode' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
+interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdownIcon' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
     /** Type no Figma: Outline (com borda) e Filled (com fundo). */
     variant?: AutoCompleteVariant;
     /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -73,6 +75,14 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     hint?: string;
     /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
     error?: string;
+    /**
+     * Seta à direita do campo (o botão de dropdown do Prime): abre a lista sem digitar, com todas as
+     * sugestões (`dropdownMode="blank"`, o padrão) ou filtrando pelo texto (`"current"`).
+     * Padrão: false, como no Figma.
+     */
+    dropdown?: boolean;
+    /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
+    dropdownAriaLabel?: string;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -200,8 +210,8 @@ type ChipVariant = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'high
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
 type ChipSize = 'small' | 'medium' | 'large' | 'x-large';
 interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    /** Texto do chip (Label no Figma). */
-    label: string;
+    /** Texto do chip (Label no Figma). Aceita marcação, como o rótulo e o valor do filtro da Table. */
+    label: ReactNode;
     variant?: ChipVariant;
     size?: ChipSize;
     /** Ícone antes do texto (Leading Icon no Figma). Use um ícone de `@vector-business-services/cristal-ds-web/icons`. */
@@ -219,6 +229,80 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
 
+/** Density no Figma: Normal (itens de 37px) e Compacted (29px). */
+type MenuDensity = 'normal' | 'compact';
+/** Um item da lista (.Dropdown Item no Figma). */
+interface MenuItem {
+    label: string;
+    /** Ícone à esquerda (Leading Icon no Figma). Use um ícone de `@vector-business-services/cristal-ds-web/icons`. */
+    icon?: ReactNode;
+    /** Estado Selected do Figma: texto e ícone em brand, fundo selected/subtlest. */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Ação do item; o menu popup fecha depois dela. */
+    command?: (event: MenuItemCommandEvent) => void;
+    /** Link do item; sem ele o clique não navega. */
+    url?: string;
+    target?: string;
+    id?: string;
+    className?: string;
+}
+interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    model: MenuItem[];
+    density?: MenuDensity;
+    /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
+    popup?: boolean;
+    /** Alinhamento do popup com o elemento que o abriu. */
+    popupAlignment?: 'left' | 'right';
+    /** Estado Loading do Figma: troca os itens pelo indicador de carregamento. */
+    loading?: boolean;
+    /** O que o leitor de tela anuncia no carregamento. */
+    loadingLabel?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onShow?: (event: SyntheticEvent) => void;
+    onHide?: (event: SyntheticEvent) => void;
+    id?: string;
+    className?: string;
+}
+/** Controle do menu popup, pela ref. */
+interface MenuHandle {
+    toggle: (event: SyntheticEvent) => void;
+    show: (event: SyntheticEvent) => void;
+    hide: (event: SyntheticEvent) => void;
+    /** O <div> raiz do menu (só existe com o popup aberto). */
+    getElement: () => HTMLDivElement | null;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<MenuHandle>>;
+
+/**
+ * Um item do menu de contexto: o mesmo do Menu, sem o Selected (o Context Menu do Prime não diz
+ * ao item qual está selecionado, então o estado não seria anunciado).
+ */
+type ContextMenuItem = Omit<MenuItem, 'selected'>;
+interface ContextMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    model: ContextMenuItem[];
+    /** Density no Figma: Normal (itens de 37px) e Compacted (29px). Padrão: normal. */
+    density?: MenuDensity;
+    /** Abre com o botão direito em qualquer lugar da página, sem precisar chamar `show`. */
+    global?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onShow?: (event: SyntheticEvent) => void;
+    onHide?: (event: SyntheticEvent) => void;
+    id?: string;
+    className?: string;
+}
+/** Controle do menu de contexto, pela ref. */
+interface ContextMenuHandle {
+    /** Abre no ponto do evento (o do botão direito, normalmente o onContextMenu). */
+    show: (event: SyntheticEvent) => void;
+    hide: (event: SyntheticEvent) => void;
+    /** O <div> raiz do menu (só existe com ele aberto). */
+    getElement: () => HTMLDivElement | null;
+}
+declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
+
 /** Horizontal Divider e Vertical Divider no Figma. */
 type DividerOrientation = 'horizontal' | 'vertical';
 /** Style no Figma: Solid (Default no vertical) e Dashed. */
@@ -327,52 +411,6 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-/** Density no Figma: Normal (itens de 37px) e Compacted (29px). */
-type MenuDensity = 'normal' | 'compact';
-/** Um item da lista (.Dropdown Item no Figma). */
-interface MenuItem {
-    label: string;
-    /** Ícone à esquerda (Leading Icon no Figma). Use um ícone de `@vector-business-services/cristal-ds-web/icons`. */
-    icon?: ReactNode;
-    /** Estado Selected do Figma: texto e ícone em brand, fundo selected/subtlest. */
-    selected?: boolean;
-    disabled?: boolean;
-    /** Ação do item; o menu popup fecha depois dela. */
-    command?: (event: MenuItemCommandEvent) => void;
-    /** Link do item; sem ele o clique não navega. */
-    url?: string;
-    target?: string;
-    id?: string;
-    className?: string;
-}
-interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    model: MenuItem[];
-    density?: MenuDensity;
-    /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
-    popup?: boolean;
-    /** Alinhamento do popup com o elemento que o abriu. */
-    popupAlignment?: 'left' | 'right';
-    /** Estado Loading do Figma: troca os itens pelo indicador de carregamento. */
-    loading?: boolean;
-    /** O que o leitor de tela anuncia no carregamento. */
-    loadingLabel?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    onShow?: (event: SyntheticEvent) => void;
-    onHide?: (event: SyntheticEvent) => void;
-    id?: string;
-    className?: string;
-}
-/** Controle do menu popup, pela ref. */
-interface MenuHandle {
-    toggle: (event: SyntheticEvent) => void;
-    show: (event: SyntheticEvent) => void;
-    hide: (event: SyntheticEvent) => void;
-    /** O <div> raiz do menu (só existe com o popup aberto). */
-    getElement: () => HTMLDivElement | null;
-}
-declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<MenuHandle>>;
-
 /** Um botão de ferramenta (.Menubar Tools Button no Figma). */
 interface MenubarTool {
     /** Nome do botão: vira o aria-label e o texto do tooltip. */
@@ -763,6 +801,22 @@ interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' |
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/** Formato do bloco. */
+type SkeletonShape = 'rectangle' | 'circle';
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Padrão: rectangle. */
+    shape?: SkeletonShape;
+    /** Largura (CSS). Padrão: 100%. */
+    width?: string;
+    /** Altura (CSS). Padrão: 16px. */
+    height?: string;
+    /** Largura e altura iguais (para o círculo ou um quadrado). */
+    size?: string;
+    /** Brilho que passa pelo bloco. Padrão: true (parado com prefers-reduced-motion). */
+    animated?: boolean;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
 /** Size no Figma: Medium (48x28) e Small (32x20). */
 type SwitchSize = 'medium' | 'small';
 /** Label Position no Figma: lado do rótulo em relação ao switch. */
@@ -814,6 +868,119 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Props da Column do PrimeReact (filtros, edição, `body`, `sortable`, `frozen`, `align`, `style`...),
+ * mais a ajuda do Figma. O visual (pt e unstyled) é do Cristal.
+ */
+interface ColumnProps extends Omit<ColumnProps$1, 'pt' | 'ptOptions' | 'unstyled'> {
+    /** Texto do tooltip no ícone de ajuda antes do título (Show Help no Figma). */
+    help?: ReactNode;
+}
+/**
+ * Uma coluna da Table. Não desenha nada sozinha: a Table lê as props de cada `<Column>` e monta a
+ * Column do Prime com o visual do Cristal.
+ */
+declare function Column(_props: ColumnProps): null;
+type PrimeTableProps<T extends DataTableValue> = Omit<DataTableProps<T[]>, 'pt' | 'ptOptions' | 'unstyled' | 'value' | 'children' | 'selection' | 'selectionMode' | 'onSelectionChange' | 'cellSelection' | 'onContextMenuSelectionChange'>;
+/** Props do DataTable do PrimeReact, mais o que o Cristal acrescenta. */
+interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
+    /** Linhas da tabela. */
+    value: T[];
+    /** As colunas (`<Column>`). */
+    children: ReactNode;
+    /**
+     * Como no Prime. Com uma `<Column selectionMode="multiple" />` e sem este, o Cristal usa
+     * `checkbox`: só a caixa seleciona (o clique na linha, não).
+     */
+    selectionMode?: 'single' | 'radiobutton' | 'multiple' | 'checkbox' | null;
+    selection?: T | T[] | null;
+    onSelectionChange?: (event: DataTableSelectionSingleChangeEvent<T[]> | DataTableSelectionMultipleChangeEvent<T[]>) => void;
+    /** Texto do rodapé. Padrão: "Mostrando 10 de 123 registros". */
+    report?: (info: {
+        shown: number;
+        totalRecords: number;
+    }) => ReactNode;
+    /** Nome do Select de itens por página para o leitor de tela. Padrão: "Itens por página". */
+    rowsPerPageLabel?: string;
+    /**
+     * Menu de contexto do cabeçalho (a Dropdown List do Figma): o botão direito numa coluna abre
+     * Fixar coluna, Ajustar ao conteúdo e, nas ordenáveis, Ordenar ascendente e descendente.
+     * Padrão: true.
+     */
+    columnMenu?: boolean;
+}
+/** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
+type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;
+/** Table do Figma "Cristal - Core Components | Web", sobre o DataTable do PrimeReact. */
+declare const Table: <T extends DataTableValue>(props: TableProps<T> & {
+    ref?: Ref<TableHandle<T>>;
+}) => ReactElement;
+
+/** Um botão da Topbar (os Buttons à direita no Figma). */
+interface TableToolbarAction {
+    label: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** primary: o botão principal (fica visível até 768px); tertiary: os demais. Padrão: tertiary. */
+    variant?: 'primary' | 'tertiary';
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+/** Um filtro aplicado (Chip da .Filter bar no Figma). */
+interface TableFilter {
+    /** Nome do filtro, como "Status do lote". */
+    label: string;
+    /** Valor escolhido, como "Divulgação". */
+    value: string;
+    onRemove?: () => void;
+}
+interface TableToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Texto da busca (controlado). Com ele ou com onSearchChange, a busca aparece. */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    /** Padrão: "Procurar por". */
+    searchPlaceholder?: string;
+    /** Nome do campo de busca para o leitor de tela. Padrão: "Procurar". */
+    searchLabel?: string;
+    /** Clique no Filtrar. Sem ele, o botão não aparece. */
+    onFilter?: (event: MouseEvent<HTMLElement>) => void;
+    /** Padrão: "Filtrar". */
+    filterLabel?: string;
+    /** Filtros aplicados: viram os chips da .Filter bar e o Badge do Filtrar. */
+    filters?: TableFilter[];
+    /** Limpar todos os filtros (a lixeira da .Filter bar). */
+    onClearFilters?: () => void;
+    /** Padrão: "Limpar filtros". */
+    clearFiltersLabel?: string;
+    /** Botões à direita. */
+    actions?: TableToolbarAction[];
+    /** Nome do botão que abre o menu com os botões que não cabem. Padrão: "Mais ações". */
+    moreActionsLabel?: string;
+}
+/**
+ * Topbar da Table (.Table Topbar no Figma): busca, Filtrar, botões e, com filtros aplicados, a
+ * .Filter bar. Vai no `toolbar` da Table.
+ */
+declare const TableToolbar: react.ForwardRefExoticComponent<TableToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TableRowActionsProps {
+    /** Itens do menu (os do Menu do Cristal). Cada `command` já sabe de que linha é. */
+    model: MenuItem[];
+    /** Nome do botão, com a linha: por exemplo "Ações do lote M000000374". */
+    'aria-label': string;
+    /** Padrão: a engrenagem (GearSix) do Type=Actions no Figma. */
+    icon?: ReactNode;
+    /** Tooltip do botão. Padrão: "Ações". */
+    tooltip?: ReactNode;
+    /** Lado do menu em relação ao botão. Padrão: left. */
+    popupAlignment?: 'left' | 'right';
+    disabled?: boolean;
+}
+/**
+ * Ações da linha (Type=Actions do .Table Main Cell no Figma): a engrenagem abre o Menu do Cristal
+ * com as ações daquela linha. Vai no `body` de uma `<Column align="center">`.
+ */
+declare function TableRowActions({ model, 'aria-label': label, icon, tooltip, popupAlignment, disabled, }: TableRowActionsProps): react.JSX.Element;
+
 /** Type no Figma. */
 type TagVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'gray' | 'inverse' | 'outline';
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
@@ -860,5 +1027,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-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, DrawerHandle, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalHandle, 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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Column, ContextMenu, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, 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, ColumnProps, ContextMenuHandle, ContextMenuItem, ContextMenuProps, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerHandle, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalHandle, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SkeletonProps, SkeletonShape, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TableFilter, TableHandle, TableProps, TableRowActionsProps, TableToolbarAction, TableToolbarProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };