Related #4431, #4602 - For Form components

primefaces · Aug 19, 2023 · 5a3beca · 5a3beca
1 parent 48723c1
commit 5a3beca
Show file tree

Hide file tree

Showing 39 changed files with 258 additions and 190 deletions.
diff --git a/components/doc/cascadeselect/basicdoc.js b/components/doc/cascadeselect/basicdoc.js
@@ -84,7 +84,7 @@ export function BasicDoc(props) {
         basic: `
 <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City"  />
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -173,7 +173,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City"  />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
         </div>
     )
 }
@@ -281,7 +281,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect 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" placeholder="Select a City"  />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
         </div>
     )
 }
@@ -307,6 +307,7 @@ export default function BasicDemo() {
                     className="w-full md:w-14rem"
                     breakpoint="767px"
                     placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
                 />
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
@@ -85,7 +85,7 @@ export function FloatLabelDoc(props) {
 <span className="p-float-label">
     <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" />
+        className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
     <label htmlFor="cs-city">City</label>
 </span>
         `,
@@ -177,7 +177,7 @@ export default function FloatLabelDemo() {
             <span className="p-float-label">
                 <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" />
+                    className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
             </span>
         </div>
@@ -288,7 +288,7 @@ export default function FloatLabelDemo() {
             <span className="p-float-label">
                 <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" />
+                    className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
             </span>
         </div>
@@ -314,6 +314,7 @@ export default function FloatLabelDemo() {
                         optionGroupChildren={['states', 'cities']}
                         className="w-full md:w-14rem"
                         breakpoint="767px"
+                        style={{ minWidth: '14rem' }}
                     />
                     <label htmlFor="cs-city">City</label>
                 </span>

diff --git a/components/doc/cascadeselect/invaliddoc.js b/components/doc/cascadeselect/invaliddoc.js
@@ -84,7 +84,7 @@ export function InvalidDoc(props) {
         basic: `
 <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-    className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" />
+    className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -173,7 +173,7 @@ export default function InvalidDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" />
+                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -281,7 +281,7 @@ export default function InvalidDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
-                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" />
+                className="p-invalid w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -306,6 +306,7 @@ export default function InvalidDemo() {
                     className="p-invalid w-full md:w-14rem"
                     breakpoint="767px"
                     placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
                 />
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/cascadeselect/templatedoc.js b/components/doc/cascadeselect/templatedoc.js
@@ -95,7 +95,7 @@ export function TemplateDoc(props) {
         basic: `
 <CascadeSelect value={selectedCity} onChange={e => setSelectedCity(e.value)} options={countries} 
     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
-    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} />
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -196,7 +196,7 @@ export default function TemplateDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect value={selectedCity} onChange={e => setSelectedCity(e.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
-                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -315,7 +315,7 @@ export default function TemplateDemo() {
         <div className="card flex justify-content-center">
             <CascadeSelect value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(event.value)} options={countries} 
                 optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
-                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} />
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
         </div>
     )
 }
@@ -341,6 +341,7 @@ export default function TemplateDemo() {
                     breakpoint="767px"
                     placeholder="Select a City"
                     itemTemplate={countryOptionTemplate}
+                    style={{ minWidth: '14rem' }}
                 />
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/inputgroup/basicdoc.js b/components/doc/inputgroup/basicdoc.js
@@ -6,20 +6,20 @@ import { DocSectionText } from '../common/docsectiontext';
 export function BasicDoc(props) {
     const code = {
         basic: `
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <span className="p-inputgroup-addon">
         <i className="pi pi-user"></i>
     </span>
     <InputText placeholder="Username" />
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <span className="p-inputgroup-addon">$</span>
     <InputNumber placeholder="Price" />
     <span className="p-inputgroup-addon">.00</span>
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <span className="p-inputgroup-addon">www</span>
     <InputText placeholder="Website" />
 </div>

diff --git a/components/doc/inputgroup/buttondoc.js b/components/doc/inputgroup/buttondoc.js
@@ -6,17 +6,17 @@ import { DocSectionText } from '../common/docsectiontext';
 export function ButtonDoc(props) {
     const code = {
         basic: `
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <Button label="Search" />
     <InputText placeholder="Keyword" />
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <InputText placeholder="Keyword" />
     <Button icon="pi pi-search" className="p-button-warning" />
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <Button icon="pi pi-check" className="p-button-success" />
     <InputText placeholder="Vote" />
     <Button icon="pi pi-times" className="p-button-danger" />

diff --git a/components/doc/inputgroup/checkboxdoc.js b/components/doc/inputgroup/checkboxdoc.js
@@ -12,21 +12,21 @@ export function CheckboxDoc(props) {
 
     const code = {
         basic: `
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <InputText placeholder="Price" />
     <span className="p-inputgroup-addon">
         <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e) => setRadioValue(e.value)} />
     </span>
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <span className="p-inputgroup-addon">
         <Checkbox checked={checked1} onChange={(e) => setChecked1(!checked1)} />
     </span>
     <InputText placeholder="Username" />
 </div>
 
-<div className="p-inputgroup">
+<div className="p-inputgroup flex-1">
     <span className="p-inputgroup-addon">
         <Checkbox checked={checked2} onChange={(e) => setChecked2(!checked2)} />
     </span>

diff --git a/components/doc/inputgroup/multipledoc.js b/components/doc/inputgroup/multipledoc.js
@@ -5,7 +5,7 @@ import { DocSectionText } from '../common/docsectiontext';
 export function MultipleDoc(props) {
     const code = {
         basic: `
-<div className="p-inputgroup">
+<div className="p-inputgroup w-full md:w-30rem">
     <span className="p-inputgroup-addon">
         <i className="pi pi-clock"></i>
     </span>

diff --git a/components/doc/treetable/templatedoc.js b/components/doc/treetable/templatedoc.js
@@ -5,7 +5,7 @@ import { Column } from '../../lib/column/Column';
 import { TreeTable } from '../../lib/treetable/TreeTable';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
-import { classNames } from '../../lib/utils/ClassNames';
+import { classNames } from '../../lib/utils/Utils';
 
 export function TemplateDoc(props) {
     const [nodes, setNodes] = useState([]);

diff --git a/components/layout/config.js b/components/layout/config.js
@@ -3,7 +3,7 @@ import { Button } from '../lib/button/Button';
 import { InputSwitch } from '../lib/inputswitch/InputSwitch';
 import { RadioButton } from '../lib/radiobutton/RadioButton';
 import { Sidebar } from '../lib/sidebar/Sidebar';
-import { classNames } from '../lib/utils/ClassNames';
+import { classNames } from '../lib/utils/Utils';
 
 export default function Config(props) {
     const [scale, setScale] = useState(14);

diff --git a/components/layout/layout.js b/components/layout/layout.js
@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useContext, useEffect, useState } from 'react';
-import { classNames } from '../lib/utils/ClassNames';
+import { classNames } from '../lib/utils/Utils';
 import NewsSection from '../news/newssection';
 import AppContentContext from './appcontentcontext';
 import Config from './config';

diff --git a/components/layout/menu.js b/components/layout/menu.js
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { memo, useEffect } from 'react';
 import { StyleClass } from '../lib/styleclass/StyleClass';
-import { classNames } from '../lib/utils/ClassNames';
+import { classNames } from '../lib/utils/Utils';
 import MenuData from './menu.json';
 
 const Menu = memo((props) => {

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -74,7 +74,7 @@ export const Button = React.memo(
                 return <span {...labelProps}>{props.label}</span>;
             }
 
-            return !props.children && !props.label && <span className="p-button-label p-c" dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>;
+            return !props.children && !props.label && <span className={cx('label')} dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>;
         };
 
         const createBadge = () => {

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -227,13 +227,13 @@ export const Calendar = React.memo(
                 if (navigation.current.button) {
                     initFocusableCell();
 
-                    if (navigation.current.backward) DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();
-                    else DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
+                    if (navigation.current.backward) previousButton.current.focus();
+                    else nextButton.current.focus();
                 } else {
                     let cell;
 
                     if (navigation.current.backward) {
-                        let cells = DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
+                        let cells = DomHandler.find(overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)'); /* @todo */
 
                         cell = cells[cells.length - 1];
                     } else {
@@ -2663,7 +2663,7 @@ export const Calendar = React.memo(
             );
 
             return (
-                <button {...previousButtonProps}>
+                <button ref={previousButton} {...previousButtonProps}>
                     {backwardNavigatorIcon}
                     <Ripple />
                 </button>
@@ -2690,7 +2690,7 @@ export const Calendar = React.memo(
             );
 
             return (
-                <button {...nextButtonProps}>
+                <button ref={nextButton} {...nextButtonProps}>
                     {forwardNavigatorIcon}
                     <Ripple />
                 </button>

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -390,7 +390,6 @@ export const CascadeSelect = React.memo(
                             <CascadeSelectSub
                                 options={props.options}
                                 selectionPath={selectionPath.current}
-                                className={'p-cascadeselect-items'}
                                 optionGroupIcon={props.optionGroupIcon}
                                 optionLabel={props.optionLabel}
                                 optionValue={props.optionValue}

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -19,20 +19,17 @@ const classes = {
             'p-placeholder': label === props.placeholder,
             'p-cascadeselect-label-empty': !props.value && label === 'p-emptylabel'
         }),
-    list: ({ subProps, context }) =>
-        classNames('p-cascadeselect-panel p-cascadeselect-items', subProps, {
+    list: ({ context }) =>
+        classNames('p-cascadeselect-panel p-cascadeselect-items', {
             'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),
+    sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
     item: ({ option, isOptionGroup, activeOptionState }) =>
-        classNames(
-            'p-cascadeselect-item',
-            {
-                'p-cascadeselect-item-group': isOptionGroup(option),
-                'p-cascadeselect-item-active p-highlight': activeOptionState === option
-            },
-            option.className
-        ),
+        classNames('p-cascadeselect-item', {
+            'p-cascadeselect-item-group': isOptionGroup(option),
+            'p-cascadeselect-item-active p-highlight': activeOptionState === option
+        }),
     dropdownIcon: 'p-cascadeselect-trigger-icon',
     dropdownButton: 'p-cascadeselect-trigger',
     wrapper: 'p-cascadeselect-items-wrapper',

diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -179,7 +179,7 @@ export const CascadeSelectSub = React.memo((props) => {
             return (
                 <CascadeSelectSub
                     options={options}
-                    className="p-cascadeselect-sublist"
+                    className={cx('sublist')}
                     selectionPath={props.selectionPath}
                     optionLabel={props.optionLabel}
                     optionValue={props.optionValue}
@@ -231,7 +231,7 @@ export const CascadeSelectSub = React.memo((props) => {
 
         const itemProps = mergeProps(
             {
-                className: cx('item', { option, isOptionGroup, activeOptionState }),
+                className: classNames(option.className, cx('item', { option, isOptionGroup, activeOptionState })),
                 style: option.style,
                 role: 'none'
             },
@@ -258,11 +258,11 @@ export const CascadeSelectSub = React.memo((props) => {
     const listProps = mergeProps(
         {
             ref: elementRef,
-            className: cx('list', { subProps: props.className, context }),
+            className: cx(props.level === 0 ? 'list' : 'sublist', { context }),
             role: 'listbox',
             'aria-orientation': 'horizontal'
         },
-        ptm('list')
+        props.level === 0 ? ptm('list') : ptm('sublist')
     );
 
     return <ul {...listProps}>{submenu}</ul>;