Ignite UI for React 19.5.1: O que há de novo?

Ignite UI for React 19.5.1 já está disponível na NPM. Esta versão oferece Habilidades de Agente LLM incorporadas diretamente no pacote, exportação em PDF para todas as variantes de grade, uma reformulação completa do i18n com uma nova API pública de localização, melhorias no desempenho da rolagem dinâmica e suporte nativo à API Popover para menus suspensos e diálogos.

Todas as atualizações do Ignite UI for React 19.5.1 em um relance:

• Habilidades de Agentes LLM: 3 arquivos de habilidades específicos para React vêm dentro do pacote npm, fornecendo ao GitHub Copilot e outros agentes LLM orientações passo a passo para tarefas comuns
• Grid PDF Export: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF
• Desempenho de rolagem na grade: ajuste dinâmico da aceleração com base em dados renderizados reduz problemas em grandes conjuntos de dados
• API Popover: os menus suspensos e diálogos agora usam a API HTML Popover para melhor posicionamento e acessibilidade
• i18n Overhaul: novo pipeline de renderização baseado em Intl, localização atualizada para todos os idiomas suportados e um novoigniteui-i18n-resources pacote com API pública
• Quebra: prefixos de propriedades personalizadas CSS renomeados; a detecção de mutações em matriz de grade mudou; API de slot de chat atualizada; DicadisableArrow removida; Node.js ≥ 22 exigidos

npm install igniteui-react@19.5.1
npm install igniteui-react-grids@19.5.1

Acesse o registro completo de alterações aqui.

LLM Agent Skills

Três Habilidades de Agente LLM agora são distribuídas dentro doigniteui-react pacote npm noskills/ diretório, ensinando ao GitHub Copilot, Cursor, Windsurf, Claude Code e outros agentes com LLM os componentes corretosIgr*, caminhos de importação, padrões JSX e abordagens de estilo — todos específicos para React e aigniteui-react família de pacotes.

Cada Habilidade é um arquivo de marcação autônomo com instruções passo a passo, exemplos de código e umreference/ subdiretório de material de apoio. Envie-os ao seu agente uma vez por projeto e toda sessão segue automaticamente seus padrões.

Skill	O que ela cobre	Uso quando
igniteui-react-components	Identifique o componente certoIgr* para um padrão de interface, depois instale, importe e use — padrões JSX, eventos, referências, formulários	Escolher componentes ou montá-los e usá-los em React
igniteui-react-customize-theme	Personalize o estilo usando propriedades personalizadas CSS, Sass e o sistema de temas Ignite UI em um contexto React	Applying custom brand colors or styles
igniteui-react-optimize-bundle-size	Reduce bundle size with granular imports, tree-shaking, and lazy loading	Optimizing production performance

Incorporando as habilidades ao seu IDE

As habilidades já estão no disco assim que o pacote é instalado. Copie-os no caminho de descoberta do seu agente — a estrutura é independente do agente, então qualquer assistente que suporte arquivos de habilidades pode usá-los diretamente.

# macOS / Linux / Windows (PowerShell) - installed npm package
cp -r node_modules/igniteui-react/skills/. .agents/skills/
# Use the npx skills CLI
npx skills add IgniteUI/igniteui-react
# GitHub Copilot — copy into .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/
 
# Claude Code — copy into .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-components .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .claude/skills/
cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .claude/skills/

Para Cursor, Windsurf e outros agentes, consulte a documentação do seu agente para encontrar o caminho correto do diretório de habilidades — os arquivos de habilidades funcionam com qualquer assistente que suporte carregamento de contexto baseado em habilidades.

View LLM Agent Skills documentation →

Grid PDF Export

Todas as quatro variantes de grade —IgrGrid,IgrTreeGrid,IgrHierarchicalGrid, eIgrPivotGrid— agora suportam exportar dados diretamente para PDF. A exportação em PDF se junta ao pipeline de exportação existente do Excel, oferecendo às aplicações um caminho nativo para documentos imprimíveis e compartilháveis sem uma etapa de renderização do lado do servidor. O recurso está disponível por meio doigniteui-react-grids pacote e se integra à infraestrutura existente da barra de ferramentas.

import { IgrGridToolbarExporter } from 'igniteui-react-grids';

// In your toolbar, PDF export is available alongside Excel export

View Grid PDF Export documentation

Grid Scroll Performance

IgrGrid,IgrTreeGrid,IgrHierarchicalGrid, eIgrPivotGrid recebeu um conjunto alvo de seis otimizações de renderização e detecção de mudanças na versão 7.0. O resultado combinado em um conjunto de dados de 100 mil linhas com 100 operações de rolagem: ~40–55 FPS vs. ~15–25 FPS antes (melhora de 100–150%), e o Tempo Total de Bloqueio foi reduzido de ~8–12 segundos para ~3–5 segundos (redução de 50–60%).

O impacto agregado medido no hardware benchmarkado (100 mil linhas, 100 operações de rolagem):

Metric	Antes	Depois	Delta
Long Tasks Count	~80–120	~30–50	−50% a −60%
Avg Long Task Duration	~80–120ms	~55–75ms	−30% a −40%
Total Blocking Time	~8–12 sec	~3–5 sec	−50% a −60%
Frames per second	~15–25 fps	~40–55 fps	+100% a +150%

View Grid Virtualization documentation

API Popover para Menus Suspensos e Diálogos

Menus suspensos e diálogos agora usam a API HTML Popover nativa do navegador em vez da lógica de posicionamento de sobreposição personalizada. A API do Popover posiciona elementos flutuantes na camada superior, resolvendo problemas antigos de empilhamento de z-index em layouts complexos e eliminando clipping dentro de contêineres ocultos no excesso de transbordamento. A acessibilidade melhora como efeito colateral: o gerenciamento de foco e o comportamento de descarte estão alinhados com as expectativas nativas do navegador, em vez de implementações personalizadas. Essa mudança é transparente, sem necessidade de alterações na superfície da API ou migração.

View Dialog documentation

i18n Overhaul and New igniteui-i18n-resources Package

Componentes de grade que renderizam datas e números agora utilizam um pipeline nativoIntl, e as implementações Calendar, DatePicker e DateRangePicker foram atualizadas para corresponder. Uma nova API pública de localização acompanha a mudança do motor, junto com um pacote separadoigniteui-i18n-resources contendo strings de recursos para todos os idiomas atualmente suportados. Aplicações que consomem cadeias de recursos personalizadas precisarão migrar para o novo pacote e API. Veja o guia de migração linkado abaixo. Os componentes Combo, Chip, Input, Tree e Carousel também estão cobertos pela nova implementação de localização.

npm install igniteui-i18n-resources@19.5.1

View Localization documentation

Breaking Changes & Migration

CSS Custom Property Prefix Rename (Themes)

Afetado: Todos os componentes usando propriedades personalizadas CSS para a tematização
O que mudou: Prefixos de propriedades personalizadas globais CSS foram renomeados para alinhar com outras bibliotecas Ignite UI. Propriedades que usam o prefixo[OLD_PREFIX] antigo devem ser atualizadas[NEW_PREFIX].
Migração: Encontre e substitua todas as referências personalizadas de propriedades nas suas folhas de estilo. Uma lista completa das propriedades renomeadas está disponível no guia de migração.
Veja o guia de migração

Detecção de mutação em matriz de grade removida

Afetado:,,,OIgrGrid​IgrTreeGrid que mudou: Mutações diretas no array limitadoIgrHierarchicalGrid (push, splice, atribuição de índice) não acionam mais uma re-renderização automaticamente.IgrPivotGrid
​data​
Migração: Substitua mutações no local por uma nova referência de array — por exemplo,setData([...data, newRow]) em vez dedata.push(newRow). Isso está alinhado com os padrões padrão React de imutabilidade e é a mudança comportamental de maior impacto nesta versão.
Veja o guia de migração

Chat:typingIndicator renderizador de templates removido

Afetado:IgrChat O que mudou: OtypingIndicator prop do template renderer foi removido.
Migração: Use otyping-indicatorslot em vez disso.

Tooltip: disableArrow Removed

Afetado:IgrTooltip
O que mudou: A propriedade anteriormente obsoletadisableArrow foi removida.
Migração: Remover quaisquer referências adisableArrow do uso de tooltip; a propriedade não teve substituição.

Node.js Minimum Version: ≥ 22

Afetados: Ambientes de construção e pipelines de CI
O que mudou: O mínimo exigido Node.js versão agora é 22.
Migração: Atualize seu tempo de execução Node.js antes de atualizar. Verifique a configuração do seu pipeline CI, as imagens base do Docker e a cadeia de ferramentas local.

Como instalar Ignite UI for React 19.5.1?

# Core package
npm install igniteui-react@19.5.1

# Grids package (required for all grid components)
npm install igniteui-react-grids@19.5.1

# New: localization resources package
npm install igniteui-i18n-resources@19.5.1

Comece com Ignite UI for React 19.5.1

Atualize seu projeto hoje mesmo e siga o guia de início para acessar as habilidades do Copilot da IA, Grid PDF Export e a nova API do i18n, e revise o guia de migração antes de atualizar se você usar binding de dados em grade, o componente Chat ou propriedades personalizadas CSS para tematizado.

• Notas de Lançamento & Registro completo de alterações
• Guia para Começar
• Guia de Desenvolvimento Assistido por IA
• Discussões no GitHub