Merge branch 'master' into prod

primefaces · Sep 16, 2024 · 5bc5de5 · 5bc5de5
2 parents 9c9114d + 6070e69
commit 5bc5de5
Show file tree

Hide file tree

Showing 177 changed files with 8,242 additions and 2,416 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -29,7 +29,8 @@ body:
       id: system-info
       attributes:
           label: System Information
-          description: Output of `npx envinfo --system --npmPackages primereact,react --binaries --browsers`
+          description: Output of `npx envinfo --system --npmPackages primereact,react,tailwindcss --binaries --browsers`
+          render: Shell
           placeholder: >
               System:...
               Binaries:...

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,83 @@
 # Changelog
 
+## [10.8.3](https://github.com/primefaces/primereact/tree/10.8.3) (2024-09-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.2...10.8.3)
+
+-    Fix #6987: Dropdown filter freezes screen [#6987](https://github.com/primefaces/primereact/pull/6991)
+-    Fix #6997: MenuBar re-render on props.model changes [#6997](https://github.com/primefaces/primereact/pull/6999)
+-    Fix #6993: fix Editor bullet issue when using Quill 2.0.2 [#6993](https://github.com/primefaces/primereact/pull/7004)
+-    Fix #7002: Dropdown improve Android key handling [#7002](https://github.com/primefaces/primereact/pull/7003)
+-    Fix #6995: Key should be reference on element and not spread [#6995](https://github.com/primefaces/primereact/pull/7000)
+-    Fix #7005: Avoid droppoints within undroppable node, not around [#7005](https://github.com/primefaces/primereact/pull/7005)
+-    Fix #7006: typos in DataTable documentation [#7006](https://github.com/primefaces/primereact/pull/7006)
+-    Fix #7008: calendar not closing on escape key press [#7008](https://github.com/primefaces/primereact/pull/7008)
+-    Fix #7016: Revert CascadeSelect type for input [#7016](https://github.com/primefaces/primereact/pull/7019)
+-    Fix #7014: inserting mentions results in duplicated text [#7014](https://github.com/primefaces/primereact/pull/7017)
+-    Fix #7015: Calendar passthrough type definition and docs [#7015](https://github.com/primefaces/primereact/pull/7021)
+-    Fix #7016: CascadeSelect passthrough type definition and docs [#7016](https://github.com/primefaces/primereact/pull/7020)
+-    Fix #6996: keep the selected row in its position when it gets focused [#6996](https://github.com/primefaces/primereact/pull/7022)
+-    Fix #7023: Toast typescript def for content [#7023](https://github.com/primefaces/primereact/pull/7024)
+-    Fix #7027: remove v-model example from iconfield documentation [#7027](https://github.com/primefaces/primereact/pull/7027)
+-    Fix #7029: remove v-model example from iconfield documentation [#7029](https://github.com/primefaces/primereact/pull/7029)
+-    Fix #7030: missing commas in PrimeReact message examples [#7030](https://github.com/primefaces/primereact/pull/7030)
+-    Fix #7032: Passthrough options type and missing docs [#7032](https://github.com/primefaces/primereact/pull/7033)
+-    Fix #7035: Dropdown: Remove unused depreciated code [#7035](https://github.com/primefaces/primereact/pull/7036)
+-    Fix #7013: Fix RadioButton appearing without tailwind style [#7013](https://github.com/primefaces/primereact/pull/7047)
+-    Fix #7046: TreeTable typescript for PT row/column [#7046](https://github.com/primefaces/primereact/pull/7048)
+-    Fix #7050: HeaderCheckbox passthrough [#7050](https://github.com/primefaces/primereact/pull/7053)
+-    Fix #6998: add closest check condition to detect handle icon drag [#6998](https://github.com/primefaces/primereact/pull/7051)
+-    Fix #6868: Refactor location of tailwind styles [#6868](https://github.com/primefaces/primereact/pull/7057)
+-    Fix #7037: Dropdown: Cannot change icon when expanding or collapsing options [#7037](https://github.com/primefaces/primereact/pull/7038)
+-    Fix #7061: Typo in Tailwind secondary button style [#7061](https://github.com/primefaces/primereact/pull/7062)
+-    Fix #7040: Stepper: add header position [#7040](https://github.com/primefaces/primereact/pull/7040)
+-    Fix #7042: Add Tailwind styling for IconField [#7042](https://github.com/primefaces/primereact/pull/7066)
+-    Fix #6855: ConfirmDialog group missing from typescript [#6855](https://github.com/primefaces/primereact/pull/7068)
+-    Fix #7074: ConfirmDialog - RejectButton classes in unstyled mode are not applied [#7074](https://github.com/primefaces/primereact/pull/7075)
+-    Fix #7069: Correct passthrough (pt) implementation for Stepperpanel [#7069](https://github.com/primefaces/primereact/pull/7069)
+-    Fix #7078: Typo in tailwinddoc of splitter [#7078](https://github.com/primefaces/primereact/pull/7078)
+-    Fix #7079: allow zero value using nullish coalescing operator(Slider) [#7079](https://github.com/primefaces/primereact/pull/7079)
+-    Fix #7084: formatting [#7084](https://github.com/primefaces/primereact/pull/7084)
+-    Fix #7086: add build project in window os [#7086](https://github.com/primefaces/primereact/pull/7086)
+-    Fix #7098: chore(deps): bump chart.js from 4.4.3 to 4.4.4 [#7098](https://github.com/primefaces/primereact/pull/7098)
+-    Fix #7099: chore(deps-dev): bump @types/node from 20.14.2 to 22.5.2 [#7099](https://github.com/primefaces/primereact/pull/7099)
+-    Fix #7100: chore(deps-dev): bump @testing-library/jest-dom from 6.4.8 to 6.5.0 [#7100](https://github.com/primefaces/primereact/pull/7100)
+-    Fix #7101: Ensure steps can be programmatically styled [#7101](https://github.com/primefaces/primereact/pull/7101)
+-    Fix #7104: Don't mix controlled and uncontrolled filter [#7104](https://github.com/primefaces/primereact/pull/7104)
+-    Fix #7102: DataView fix listTemplate typescript def [#7102](https://github.com/primefaces/primereact/pull/7105)
+-    Fix #7113: Multiselect focus problem [#7113](https://github.com/primefaces/primereact/pull/7113)
+-    Fix #7073: Add missing focused context [#7073](https://github.com/primefaces/primereact/pull/7107)
+-    Fix #7109: SplitterPanel pass onClick through [#7109](https://github.com/primefaces/primereact/pull/7114)
+-    Fix #6784: Toast onRemove message [#6784](https://github.com/primefaces/primereact/pull/7108)
+-    Fix #7110: SpeedDial : Fix aria-controls values [#7110](https://github.com/primefaces/primereact/pull/7111)
+-    Fix #7118: Updating Chart accessibility documentation [#7118](https://github.com/primefaces/primereact/pull/7119)
+-    Fix #6093: Fix Tailwind styles in unstyled mode [#6093](https://github.com/primefaces/primereact/pull/7124)
+-    Fix #7039: Correct Event handling for Cut Command [#7039](https://github.com/primefaces/primereact/pull/7127)
+-    Fix #7120: Breadcrumb shows a trailing separator when there [#7120](https://github.com/primefaces/primereact/pull/7133)
+-    Fix #7128: document undocumented start and end options, add types & improve [#7128](https://github.com/primefaces/primereact/pull/7128)
+-    Fix #5644: Add missing tailwind styles [#5644](https://github.com/primefaces/primereact/pull/7123)
+-    Fix #7134: Refactor Dropdown component to support using option as value [#7134](https://github.com/primefaces/primereact/pull/7141)
+-    Fix #7137: MultiSelect template docs [#7137](https://github.com/primefaces/primereact/pull/7143)
+-    Fix #7136: Defines a new File type extended with custom objectURL property [#7136](https://github.com/primefaces/primereact/pull/7145)
+-    Fix #6857: Adjust top up by 1px when gridlines are active [#6857](https://github.com/primefaces/primereact/pull/7151)
+-    Fix #7149: make AdditionalProps argument in IconOptions type optional [#7149](https://github.com/primefaces/primereact/pull/7149)
+-    Fix #7126: update Tree TypeScript documentation [#7126](https://github.com/primefaces/primereact/pull/7160)
+-    Fix #7161: replace src value in DataTable typescript documentation [#7161](https://github.com/primefaces/primereact/pull/7162)
+-    Fix #7166: Datatable : fix ColumnFilter aria-controls [#7166](https://github.com/primefaces/primereact/pull/7167)
+-    Fix #7163: Refactor AutoComplete.js to fix the group selection [#7163](https://github.com/primefaces/primereact/pull/7164)
+-    Fix #7155: prevent onselect event when prev, next calendar button [#7155](https://github.com/primefaces/primereact/pull/7155)
+-    Fix #7165: Badge/Tag typescript add secondary and contrast [#7165](https://github.com/primefaces/primereact/pull/7168)
+-    Fix #7171: TabMenu - resolve rendering issue of stackblitz apps for Command and Template examples [#7171](https://github.com/primefaces/primereact/pull/7171)
+-    Fix #7174: Datatable frozen columns bug [#7174](https://github.com/primefaces/primereact/pull/7174)
+-    Fix #7175: Fixing accessibility issue of dropdown [#7175](https://github.com/primefaces/primereact/pull/7175)
+-    Fix #7178: Panel Menu Component highlights bug [#7178](https://github.com/primefaces/primereact/pull/7178)
+-    Fix #7139: InputOtp IntegerOnly mode accepts "space" [#7139](https://github.com/primefaces/primereact/pull/7139)
+-    Fix #7181: Tree missing drag drop functionality [#7181](https://github.com/primefaces/primereact/pull/7181)
+-    Fix #7183: FloatLabel proper SPAN attributes [#7183](https://github.com/primefaces/primereact/pull/7183)
+-    Fix #7189: Pressing buttons on touch devices will not focus InputText in turn Keyboard [#7189](https://github.com/primefaces/primereact/pull/7189)
+-    Fix #7190: ContextMenu import error [#7190](https://github.com/primefaces/primereact/pull/7191)
+-    Fix #7188: Provide readable input value based on selected option labels [#7188](https://github.com/primefaces/primereact/pull/7188)
+
 ## [10.8.2](https://github.com/primefaces/primereact/tree/10.8.2) (2024-08-06)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.8.1...10.8.2)

diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js
@@ -5,7 +5,7 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {         
+const Tailwind = {
     button: {
         root: ({ props, context }) => ({
             className: classNames(
@@ -51,7 +51,7 @@ const Tailwind = {
                 {
                     'bg-transparent border-transparent': props.text && !props.plain,
                     'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
-                    'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                    'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
                     'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
                     'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
                     'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
@@ -114,7 +114,7 @@ const Tailwind = {
 
     const code2 = {
         javascript: `
-import React from 'react'; 
+import React from 'react';
 import { Button } from 'primereact/button';
 
 export default function UnstyledDemo() {

diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js
@@ -24,14 +24,14 @@ const Tailwind = {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
-        input: {
-            root: ({ parent }) => ({
+        input: ({ props }) => ({
+            root: {
                 className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
-                    'rounded-lg': !parent.props.showIcon,
-                    'border-r-0 rounded-l-lg': parent.props.showIcon
+                    'rounded-lg': !props.showIcon,
+                    'border-r-0 rounded-l-lg': props.showIcon
                 })
-            })
-        },
+            }
+        }),
         dropdownButton: {
             root: ({ props }) => ({
                 className: classNames({ 'rounded-l-none': props.icon })
@@ -53,7 +53,7 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        title: 'leading-8 mx-auto',
+        title: { className: 'leading-8 mx-auto' },
         monthTitle: {
             className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500')
         },
@@ -70,9 +70,9 @@ const Tailwind = {
         table: {
             className: classNames('border-collapse w-full', 'my-2')
         },
-        tableHeaderCell: 'p-2',
-        weekday: 'text-gray-600 dark:text-white/70',
-        day: 'p-2',
+        tableHeaderCell: { className: 'p-2' },
+        weekday: { className: 'text-gray-600 dark:text-white/70' },
+        day: { className: 'p-2' },
         dayLabel: ({ context }) => ({
             className: classNames(
                 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
@@ -88,7 +88,7 @@ const Tailwind = {
                 }
             )
         }),
-        monthPicker: 'my-2',
+        monthPicker: { className: 'my-2' },
         month: ({ context }) => ({
             className: classNames(
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -114,11 +114,11 @@ const Tailwind = {
         timePicker: {
             className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
         },
-        separatorContainer: 'flex items-center flex-col px-2',
-        separator: 'text-xl',
-        hourPicker: 'flex items-center flex-col px-2',
-        minutePicker: 'flex items-center flex-col px-2',
-        ampmPicker: 'flex items-center flex-col px-2',
+        separatorContainer: { className: 'flex items-center flex-col px-2' },
+        separator: { className: 'text-xl' },
+        hourPicker: { className: 'flex items-center flex-col px-2' },
+        minutePicker: { className: 'flex items-center flex-col px-2' },
+        ampmPicker: { className: 'flex items-center flex-col px-2' },
         incrementButton: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -133,7 +133,7 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupContainer: 'flex',
+        groupContainer: { className: 'flex' },
         group: {
             className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
         },

diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
@@ -85,7 +85,7 @@ export function FloatLabelDoc(props) {
     const code = {
         basic: `
 <FloatLabel>
-    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
         optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
         className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
     <label htmlFor="cs-city">City</label>
@@ -178,7 +178,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
@@ -290,7 +290,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>

diff --git a/components/doc/cascadeselect/theming/tailwinddoc.js b/components/doc/cascadeselect/theming/tailwinddoc.js
@@ -7,10 +7,13 @@ export function TailwindDoc(props) {
         basic: `
 const TRANSITIONS = {
     overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-0',
+            exitActive: 'transition-opacity duration-150 ease-linear'
+        }
     }
 };
 
@@ -27,8 +30,8 @@ const Tailwind = {
         dropdownButton: {
             className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6')
         },
-        panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
-        list: 'm-0 sm:p-0 list-none',
+        panel: { className: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md' },
+        list: { className: 'm-0 sm:p-0 list-none' },
         sublist: {
             className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
         },
@@ -41,7 +44,7 @@ const Tailwind = {
         content: {
             className: classNames('flex items-center overflow-hidden relative', 'py-3 px-5')
         },
-        optionGroupIcon: 'ml-auto',
+        optionGroupIcon: { className: 'ml-auto' },
         transition: TRANSITIONS.overlay
     }
 }

diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js
@@ -4,7 +4,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 export function AccessibilityDoc() {
     const code = {
         basic: `
-<Chart type="line" data={data} canvasProps={{'role': 'img', 'aria-label': 'Data'}} />
+<Chart type="line" data={data} pt={canvas: {'role': 'img', 'aria-label': 'Data'}}} />
 
 <Chart type="line" data={data}>
     <DataTable />
@@ -20,8 +20,8 @@ export function AccessibilityDoc() {
                 <a className="text-primary hover:underline font-medium" href="https://www.chartjs.org/docs/latest/general/accessibility.html">
                     Chart.js accessibility
                 </a>{' '}
-                guide for more information. The canvas element can be customized with <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able
-                to provide fallback content like a table.
+                guide for more information. The canvas element can be customized with <i>pt</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to
+                provide fallback content like a table.
             </p>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </DocSectionText>