Merge branch 'master' into accessibility

primefaces · Dec 29, 2023 · 8b33923 · 8b33923
2 parents 5f8dc68 + 71da6b0
commit 8b33923
Show file tree

Hide file tree

Showing 358 changed files with 5,558 additions and 6,871 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -49,8 +49,3 @@ jobs:
       if: ${{ success() }}
       run: |
         npm run security:check
-
-    - name: Unit Tests Check
-      if: ${{ success() }}
-      run: |
-        npm run test:check
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,55 @@
 # Changelog
 
+## [10.2.1](https://github.com/primefaces/primereact/tree/10.2.1) (2023-11-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.2.0...10.2.1)
+
+**Fixed bugs:**
+
+- Tree Table Header Bug [\#5412](https://github.com/primefaces/primereact/issues/5412)
+
+## [10.2.0](https://github.com/primefaces/primereact/tree/10.2.0) (2023-11-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.1.1...10.2.0)
+
+**Enhancements:**
+
+- MISC Section | Accessibility [\#5356](https://github.com/primefaces/primereact/issues/5356)
+- Chip Removable Icon to have button role [\#4190](https://github.com/primefaces/primereact/issues/4190)
+- TreeTable: selected rows are not highlighted [\#5370](https://github.com/primefaces/primereact/issues/5370)
+- CascadeSelect: Popup does not close on escape key press [\#5360](https://github.com/primefaces/primereact/issues/5360)
+- SplitButton: SplitButton popup not closing on escape button click [\#5365](https://github.com/primefaces/primereact/issues/5365)
+- Speed Dial: Speed Dial Menu does not close on escape key press [\#5367](https://github.com/primefaces/primereact/issues/5367)
+- PanelMenu: Menu items with no sub-items toggling border [\#5349](https://github.com/primefaces/primereact/issues/5349)
+
+**Fixed bugs:**
+
+- DataTable: Cell editing with Dropdown doesn't work [\#3079](https://github.com/primefaces/primereact/issues/3079)
+- DataTable editor with 3rd party dropdown / overlay [\#2097](https://github.com/primefaces/primereact/issues/2097)
+- Mention: Page Breaks when navigating to Mention component [\#5363](https://github.com/primefaces/primereact/issues/5363)
+- TabView: Closes all tabs on click [\#5369](https://github.com/primefaces/primereact/issues/5369)
+- DataTable: Cell edit support Dropdown [\#2666](https://github.com/primefaces/primereact/issues/2666)
+- DataTable: editMode="cell" and Dropdown z-Index issue [\#5320](https://github.com/primefaces/primereact/issues/5320)
+- AccordionTab: Invalid values for props $$typeof, type on div tag [\#5379](https://github.com/primefaces/primereact/issues/5379)
+- Password: inputClassName doesn't work with Tailwind [\#5385](https://github.com/primefaces/primereact/issues/5385)
+- TreeTable: Unable to hide a column with hidden prop [\#5384](https://github.com/primefaces/primereact/issues/5384)
+- Calendar: monthNavigator={true} with numberOfMonths={>1} shows controls for the first month only [\#5390](https://github.com/primefaces/primereact/issues/5390)
+- TreeTable: column align header is not working [\#5315](https://github.com/primefaces/primereact/issues/5315)
+- Tree: Custom collapseIcon/expandIcon is not applied on children [\#5393](https://github.com/primefaces/primereact/issues/5393)
+- Slider: Setting min boundary value component is breaking the component. [\#5398](https://github.com/primefaces/primereact/issues/5398)
+- MultiSelect emptyMessage prop results in error [\#5340](https://github.com/primefaces/primereact/issues/5340)
+- SplitButton: pt attribute doesn't behave as described in documentation [\#4883](https://github.com/primefaces/primereact/issues/4883)
+- Tailwind: Button tailwind/index.js  [\#5407](https://github.com/primefaces/primereact/issues/5407)
+- DataTable: memory leak when data updated continuously [\#4656](https://github.com/primefaces/primereact/issues/4656)
+- Removing style section from pages [\#5354](https://github.com/primefaces/primereact/issues/5354)
+- Missing type definition in for hideOverlaysOnDocumentScrolling in APIOptions [\#5378](https://github.com/primefaces/primereact/issues/5378)
+- Misc Demos Refactor [\#5357](https://github.com/primefaces/primereact/issues/5357)
+- Tailwind: Documentation transition: TRANSITIONS.overlay [\#5387](https://github.com/primefaces/primereact/issues/5387)
+- Mention: Component not rendering [\#5374](https://github.com/primefaces/primereact/issues/5374)
+- Primereact Tooltip props children and content have different types [\#5376](https://github.com/primefaces/primereact/issues/5376)
+- Slider: Setting min boundary value component is breaking the component. [\#5398](https://github.com/primefaces/primereact/issues/5398)
+
+
 ## [10.1.1](https://github.com/primefaces/primereact/tree/10.1.1) (2023-11-21)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/10.1.0...10.1.1)

diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2022 PrimeTek
+Copyright (c) 2016-2023 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -10,68 +10,54 @@
 
 # PrimeReact
 
-PrimeReact is available at [npm](https://www.npmjs.com/package/primereact).
+PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://primereact.org/) for live showcase and documentation.
 
 ## Download
 
-PrimeReact is available at npm, if you have an existing application run the following command to download it to your project.
+PrimeReact is available at [npm](https://www.npmjs.com/package/primereact).
 
 ```
-// with npm
+# Using npm
 npm install primereact
 
-// with yarn
+# Using yarn
 yarn add primereact
-```
-
-Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies and some components have optional dependencies.
-
-## Styles
-
-Theme is the necessary css file of the components, visit the [Themes](https://primereact.org/theming) section for the complete list of available themes to choose from.
-
-```javascript
-//theme
-import 'primereact/resources/themes/lara-light-indigo/theme.css';
-```
 
-Each PrimeReact theme has its own font family so it is suggested to apply it to your application for a unified look.
-
-```
-body {
-    font-family: var(--font-family);
-}
+# Using pnpm
+pnpm add primereact
 ```
 
-## Usage
+## Import
 
 Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
 
-#### Module
-
 ```javascript
 //import { ComponentName } from 'primereact/{componentname}';
-import { Dialog } from 'primereact/dialog';
-import { Accordion, AccordionTab } from 'primereact/accordion';
-```
+import { Button } from 'primereact/button';
 
-## QuickStart
+export default function MyComponent() {
+  return (
+    <Button label="PrimeReact" />
+  )
+}
+```
 
-[Example applications](https://github.com/primefaces/primereact-examples) based on create-react-app and Next.js are available at github.
+## Theming
 
-Next.js
-PrimeReact has first class support for SSR and Next.JS, in fact this website is also built with Next.js
+PrimeReact has two theming has modes; styled or unstyled.
 
-[![Getting Started with NextJS and PrimeReact](http://img.youtube.com/vi/OrRffCobuts/0.jpg)](http://www.youtube.com/watch?v=OrRffCobuts 'Getting Started with NextJS and PrimeReact')
+**Styled Mode**
 
-CRA
-Create-React-App is the official scaffolding project by Facebook
+Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primereact.org/theming) section for the complete list of available themes to choose from.
 
-[![Getting Started with PrimeReact](http://img.youtube.com/vi/Prz3phy2bHY/0.jpg)](http://www.youtube.com/watch?v=Prz3phy2bHY 'Getting Started with PrimeReact')
+```javascript
+// theme
+import 'primereact/resources/themes/lara-light-cyan/theme.css';
+```
 
-## TypeScript
+**Unstyled Mode**
 
-Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample [typescript-primereact application](https://github.com/primefaces/primereact-examples/tree/main/cra-basic-ts) is available as well at github.
+Unstyled mode is disabled by default for all components. Using the PrimeReact context, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primereact.org/unstyled) documentation for more information and examples.
 
 ## Contributors
 

diff --git a/components/doc/accordion/styledoc.js b/components/doc/accordion/styledoc.js
diff --git a/components/doc/autocomplete/styledoc.js b/components/doc/autocomplete/styledoc.js
diff --git a/components/doc/autocomplete/theming/tailwinddoc.js b/components/doc/autocomplete/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: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
     }
 };
 
@@ -33,7 +36,7 @@ const Tailwind = {
                 'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             )
         },
-        inputtoken: {
+        inputToken: {
             className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
         },
         input: ({ props }) => ({
@@ -53,28 +56,22 @@ const Tailwind = {
         token: {
             className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
         },
-        dropdownbutton: {
+        dropdownButton: {
             root: 'rounded-tl-none rounded-bl-none'
         },
         panel: {
             className: classNames('bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'dark:bg-gray-900 dark:text-white/80')
         },
         list: 'py-3 list-none m-0',
         item: ({ context }) => ({
-            className: classNames(
-                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
-                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
-                'dark:text-white/80 dark:hover:bg-gray-800',
-                'hover:text-gray-700 hover:bg-gray-200',
-                {
-                    'text-gray-700': !context.focused && !context.selected,
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
-                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
-                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
-                }
-            )
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.selected
+            })
         }),
-        itemgroup: {
+        itemGroup: {
             className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
         },
         transition: TRANSITIONS.overlay

diff --git a/components/doc/avatar/groupdoc.js b/components/doc/avatar/groupdoc.js
@@ -12,7 +12,7 @@ export function GroupDoc(props) {
   <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
   <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
   <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-  <Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+  <Avatar label="+2" shape="circle" size="large"/>
 </AvatarGroup>
 
         `,
@@ -32,7 +32,7 @@ export default function GroupDemo() {
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-                <Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                <Avatar label="+2" shape="circle" size="large"/>
             </AvatarGroup>
         </div>
     )
@@ -54,7 +54,7 @@ export default function GroupDemo() {
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
                 <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-                <Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                <Avatar label="+2" shape="circle" size="large"/>
             </AvatarGroup>
         </div>
     )
@@ -74,7 +74,7 @@ export default function GroupDemo() {
                     <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
                     <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
                     <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-                    <Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                    <Avatar label="+2" shape="circle" size="large" />
                 </AvatarGroup>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/avatar/labeldoc.js b/components/doc/avatar/labeldoc.js
@@ -14,7 +14,7 @@ export function LabelDoc(props) {
 <Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
 <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
 
-<Avatar label="U" size="xlarge" className="p-overlay-badge" style={{ backgroundColor: '#4caf4f', color: '#ffffff' }}>
+<Avatar label="U" size="xlarge" className="p-overlay-badge">
 <Badge value="4" />
         `,
         javascript: `
@@ -41,7 +41,7 @@ export default function LabelDemo() {
 
             <div className="flex-auto">
                 <h5>Badge</h5>
-                <Avatar label="U" size="xlarge" className="p-overlay-badge" style={{ backgroundColor: '#4caf4f', color: '#ffffff' }}>
+                <Avatar label="U" size="xlarge" className="p-overlay-badge">
                     <Badge value="4" />
                 </Avatar>
             </div>
@@ -73,7 +73,7 @@ export default function LabelDemo() {
 
             <div className="flex-auto">
                 <h5>Badge</h5>
-                <Avatar label="U" size="xlarge" className="p-overlay-badge" style={{ backgroundColor: '#4caf4f', color: '#ffffff' }}>
+                <Avatar label="U" size="xlarge" className="p-overlay-badge">
                     <Badge value="4" />
                 </Avatar>
             </div>
@@ -108,7 +108,7 @@ export default function LabelDemo() {
 
                     <div className="flex-auto">
                         <h5>Badge</h5>
-                        <Avatar label="U" size="xlarge" className="p-overlay-badge" style={{ backgroundColor: '#4caf4f', color: '#ffffff' }}>
+                        <Avatar label="U" size="xlarge" className="p-overlay-badge">
                             <Badge value="4" />
                         </Avatar>
                     </div>