Merge branch 'primefaces:master' into new-feature-primefaces#4134

userkks · Jun 25, 2023 · dedcd80 · dedcd80
2 parents 95e48df + f151504
commit dedcd80
Show file tree

Hide file tree

Showing 158 changed files with 2,004 additions and 781 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
diff --git a/components/doc/common/docapisection.js b/components/doc/common/docapisection.js
@@ -8,15 +8,24 @@ import DocApiTable from './docapitable';
 export function DocApiSection(props) {
     const { doc, header } = props;
     const capitalize = (s) => (s && s[0].toUpperCase() + s.slice(1)) || '';
+    const exclude = props.apiExclude;
 
     const docs = doc.reduce((cDocs, name) => {
         const splitedName = name.split('.');
         const modName = capitalize(splitedName[0]);
         const mod = APIDoc[modName.toLowerCase()];
 
+        const isExcluded = (option, key) => {
+            return exclude && exclude[option] && exclude[option].includes(key);
+        };
+
+        const isExcludedAll = (option) => {
+            return exclude && exclude[option] && exclude[option] === 'excludeAll';
+        };
+
         if (mod) {
             const addToChildDoc = (childDoc, componentName) => {
-                if (ObjectUtils.isNotEmpty(mod.events) && ObjectUtils.isNotEmpty(mod.events.values)) {
+                if (ObjectUtils.isNotEmpty(mod.events) && ObjectUtils.isNotEmpty(mod.events.values) && !isExcludedAll('events')) {
                     const eMap = {
                         id: `api.${componentName}.events`,
                         label: 'Events',
@@ -27,6 +36,8 @@ export function DocApiSection(props) {
                     Object.entries(mod.events.values).forEach(([eKey, eValue]) => {
                         const [id, label] = [`api.${componentName}.${eKey}`, eKey];
 
+                        if (isExcluded('event', eKey)) return;
+
                         eMap.children.push({
                             id,
                             label,
@@ -48,7 +59,7 @@ export function DocApiSection(props) {
                     childDoc.push(eMap);
                 }
 
-                if (ObjectUtils.isNotEmpty(mod.interfaces) && ObjectUtils.isNotEmpty(mod.interfaces.values)) {
+                if (ObjectUtils.isNotEmpty(mod.interfaces) && ObjectUtils.isNotEmpty(mod.interfaces.values) && !isExcludedAll('interfaces')) {
                     const iMap = {
                         id: `api.${componentName}.interfaces`,
                         label: 'Interfaces',
@@ -59,6 +70,8 @@ export function DocApiSection(props) {
                     Object.entries(mod.interfaces.values).forEach(([iKey, iValue]) => {
                         const [id, label] = [`api.${componentName}.${iKey}`, iKey];
 
+                        if (isExcluded('interfaces', iKey)) return;
+
                         iMap.children.push({
                             id,
                             label,
@@ -85,7 +98,7 @@ export function DocApiSection(props) {
                     childDoc.push(iMap);
                 }
 
-                if (ObjectUtils.isNotEmpty(mod.types) && ObjectUtils.isNotEmpty(mod.types.values)) {
+                if (ObjectUtils.isNotEmpty(mod.types) && ObjectUtils.isNotEmpty(mod.types.values) && !isExcludedAll('types')) {
                     const tMap = {
                         id: `api.${componentName}.types`,
                         label: 'Types',
@@ -96,6 +109,8 @@ export function DocApiSection(props) {
                     Object.entries(mod.types.values).forEach(([tKey, tValue]) => {
                         const [id, label] = [`api.${componentName}.${tKey}`, tKey];
 
+                        if (isExcluded('types', tKey)) return;
+
                         tMap.children.push({
                             id,
                             label,
@@ -199,29 +214,35 @@ export function DocApiSection(props) {
                             children: []
                         };
 
-                        if (ObjectUtils.isNotEmpty(cValue.props) && ObjectUtils.isNotEmpty(cValue.props.values)) {
+                        if (ObjectUtils.isNotEmpty(cValue.props) && ObjectUtils.isNotEmpty(cValue.props.values) && !isExcludedAll('props')) {
                             const [id, label] = [`api.${cKey}.props`, 'Props'];
 
+                            if (isExcluded('props', cKey)) return;
+
                             cMap.children.push({
                                 id,
                                 label,
                                 component: (inProps) => <DocApiTable name={cKey} data={cValue.props.values} description={cValue.props.description} {...inProps} />
                             });
                         }
 
-                        if (ObjectUtils.isNotEmpty(cValue.callbacks) && ObjectUtils.isNotEmpty(cValue.callbacks.values)) {
+                        if (ObjectUtils.isNotEmpty(cValue.callbacks) && ObjectUtils.isNotEmpty(cValue.callbacks.values) && !isExcludedAll('callbacks')) {
                             const [id, label] = [`api.${cKey}.callbacks`, 'Callbacks'];
 
+                            if (isExcluded('callbacks', cKey)) return;
+
                             cMap.children.push({
                                 id,
                                 label,
                                 component: (inProps) => <DocApiTable name={cKey} data={cValue.callbacks.values} description={cValue.callbacks.description} {...inProps} />
                             });
                         }
 
-                        if (ObjectUtils.isNotEmpty(cValue.methods) && ObjectUtils.isNotEmpty(cValue.methods.values)) {
+                        if (ObjectUtils.isNotEmpty(cValue.methods) && ObjectUtils.isNotEmpty(cValue.methods.values) && !isExcludedAll('methods')) {
                             const [id, label] = [`api.${cKey}.methods`, 'Methods'];
 
+                            if (isExcluded('methods', cKey)) return;
+
                             cMap.children.push({
                                 id,
                                 label,
@@ -245,9 +266,11 @@ export function DocApiSection(props) {
                             children: []
                         };
 
-                        if (ObjectUtils.isNotEmpty(mValue.props) && ObjectUtils.isNotEmpty(mValue.props.values)) {
+                        if (ObjectUtils.isNotEmpty(mValue.props) && ObjectUtils.isNotEmpty(mValue.props.values) && !isExcludedAll('props')) {
                             const [id, label] = [`api.${mKey}.props`, 'Props'];
 
+                            if (isExcluded('props', mKey)) return;
+
                             mMap.children.push({
                                 id,
                                 label,
@@ -261,6 +284,8 @@ export function DocApiSection(props) {
 
                         cDocs.push(mMap);
                     });
+
+                !mod.components && !mod.model && addToChildDoc(cDocs, modName);
             }
         }
 

diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js
@@ -9,15 +9,20 @@ import { DocSections } from './docsections';
 export function DocComponent(props) {
     const [tab, setTab] = useState(0);
     const router = useRouter();
+    let header;
+
+    if (props.header.startsWith('use')) header = 'HOOK';
+    else if (props.header === 'PassThrough' || props.header === 'Configuration') header = 'OVERVIEW';
+    else header = 'FEATURES';
 
     const activateTab = (i) => {
         setTab(i);
         router.replace(router.pathname);
     };
 
     useEffect(() => {
-        if (router.asPath.includes('#api.')) setTab(1);
-        if (router.asPath.includes('#pt.')) setTab(2);
+        if (router.asPath.includes('#api')) setTab(1);
+        if (router.asPath.includes('#pt')) setTab(2);
     }, [router.asPath]);
 
     return (
@@ -30,7 +35,7 @@ export function DocComponent(props) {
                 <ul className="doc-tabmenu">
                     <li className={classNames({ 'doc-tabmenu-active': tab === 0 })}>
                         <button type="button" onClick={() => activateTab(0)}>
-                            {props.header.startsWith('use') ? 'HOOK' : 'FEATURES'}
+                            {header}
                         </button>
                     </li>
 
@@ -65,7 +70,7 @@ export function DocComponent(props) {
                 {tab === 1 ? (
                     <div className="doc-tabpanel">
                         {props.apiDocs ? (
-                            <DocApiSection header={props.header} doc={props.apiDocs} />
+                            <DocApiSection header={props.header} doc={props.apiDocs} apiExclude={props.apiExclude} />
                         ) : (
                             <>
                                 <div className="doc-main">

diff --git a/components/doc/configuration/appendtodoc.js b/components/doc/configuration/appendtodoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function AppendToDoc(props) {
     const code = {
         basic: `
-PrimeReact.appendTo = 'self';
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setAppendTo } = useContext(PrimeReactContext);
+
+setAppendTo('self');
         `
     };
 

diff --git a/components/doc/configuration/csstransitiondoc.js b/components/doc/configuration/csstransitiondoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function CSSTransitionDoc(props) {
     const code = {
         basic: `
-PrimeReact.cssTransition = false;
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setCSSTransition } = useContext(PrimeReactContext);
+
+setCSSTransition(false);
         `
     };
 

diff --git a/components/doc/configuration/filtermatchmodedoc.js b/components/doc/configuration/filtermatchmodedoc.js
@@ -4,11 +4,16 @@ import { DocSectionText } from '../common/docsectiontext';
 export function FilterMatchModeDoc(props) {
     const code = {
         basic: `
-PrimeReact.filterMatchModeOptions = {
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setFilterMatchMode } = useContext(PrimeReactContext);
+
+setFilterMatchMode({
     text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
     numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
     date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
-};
+});
         `
     };
 

diff --git a/components/doc/configuration/hideoverlaysdoc.js b/components/doc/configuration/hideoverlaysdoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function HideOverlaysDoc(props) {
     const code = {
         basic: `
-PrimeReact.hideOverlaysOnDocumentScrolling = true;
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setHideOverlayOnScroll } = useContext(PrimeReactContext);
+
+setHideOverlayOnScroll(true);
         `
     };
 

diff --git a/components/doc/configuration/importdoc.js b/components/doc/configuration/importdoc.js
diff --git a/components/doc/configuration/inputstyledoc.js b/components/doc/configuration/inputstyledoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function InputStyleDoc(props) {
     const code = {
         basic: `
-PrimeReact.inputStyle = 'filled';
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setInputStyle } = useContext(PrimeReactContext);
+
+setInputStyle('filled');
         `
     };
 

diff --git a/components/doc/configuration/localedoc.js b/components/doc/configuration/localedoc.js
diff --git a/components/doc/configuration/noncedoc.js b/components/doc/configuration/noncedoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function NonceDoc(props) {
     const code = {
         basic: `
-PrimeReact.nonce = '.........';
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setNonce } = useContext(PrimeReactContext);
+
+setNonce('.........');
         `
     };
 

diff --git a/components/doc/configuration/nullsortorderdoc.js b/components/doc/configuration/nullsortorderdoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function NullSortOrderDoc(props) {
     const code = {
         basic: `
-PrimeReact.nullSortOrder = 1;
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setNullSortOrder } = useContext(PrimeReactContext);
+
+setNullSortOrder(1);
         `
     };
 

diff --git a/components/doc/configuration/rippledoc.js b/components/doc/configuration/rippledoc.js
@@ -4,7 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
 export function RippleDoc(props) {
     const code = {
         basic: `
-PrimeReact.ripple = true;
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setRipple } = useContext(PrimeReactContext);
+
+setRipple(true);
         `
     };
 

diff --git a/components/doc/configuration/zindexdoc.js b/components/doc/configuration/zindexdoc.js
@@ -4,15 +4,20 @@ import { DocSectionText } from '../common/docsectiontext';
 export function ZIndexDoc(props) {
     const code = {
         basic: `
-PrimeReact.zIndex = {
+import { PrimeReactContext } from 'primereact/api';
+
+//use in a component
+const { setZIndex, autoZIndex } = useContext(PrimeReactContext);
+
+setZIndex({
     modal: 1100,    // dialog, sidebar
     overlay: 1000,  // dropdown, overlaypanel
     menu: 1000,     // overlay menus
     tooltip: 1100   // tooltip
     toast: 1200     // toast
-}
+});
 
-PrimeReact.autoZIndex = true;
+setAutoZIndex(true);
         `
     };
 
@@ -22,7 +27,7 @@ PrimeReact.autoZIndex = true;
                 <p>
                     ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a
                     custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeReact configuration offers the <i>zIndex</i> property
-                    to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeReact.
+                    to customize the default values for components categories. Default values are described below and can be customized when setting up the context value.
                 </p>
                 <p>
                     The ZIndex of all components is increased according to their groups in harmony with each other. When <i>autoZIndex</i> is false, each group increments its zIndex within itself.

diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { NodeService } from '../../../service/NodeService';
 import { PhotoService } from '../../../service/PhotoService';
-import { PrimeReactContext } from '../../lib/api/context';
+import { PrimeReactContext } from '../../lib/api/Api';
 import { Dialog } from '../../lib/dialog/Dialog';
 import { Dock } from '../../lib/dock/Dock';
 import { Galleria } from '../../lib/galleria/Galleria';

diff --git a/components/doc/galleria/responsivedoc.js b/components/doc/galleria/responsivedoc.js
@@ -154,7 +154,9 @@ export default function ResponsiveDoc() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>Responsive Doc</p>
+                <p>
+                    Galleria responsiveness is defined with the <i>responsiveOptions</i> property.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <div>