Merge branch 'master' into PR2671

api-generator/components/togglebutton.js

@@ -70,12 +70,6 @@ const ToggleButtonProps = [
         type: 'object',
         default: 'null',
         description: 'Configuration of the tooltip, refer to the tooltip documentation for more information.'
-    },
-    {
-        name: 'ariaLabelledBy',
-        type: 'string',
-        default: 'null',
-        description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
     }
 ];
 

components/doc/chips/index.js

@@ -356,7 +356,7 @@ customChip(item) {
                                     <td>onAdd</td>
                                     <td>originalEvent: Browser event <br />
                             value: Added item value</td>
-                                    <td>Callback to invoke when a chip is added.</td>
+                                    <td>Callback to invoke when a chip is added. Return 'false' to prevent the item from being added.</td>
                                 </tr>
                                 <tr>
                                     <td>onRemove</td>

components/doc/inputmask/index.js

@@ -307,6 +307,7 @@ import { InputMask } from 'primereact/inputmask';
                     </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>InputMask passes any valid attribute to the underlying React HTMLInputElement element. Extended properties are as follows;</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>
@@ -474,7 +475,44 @@ import { InputMask } from 'primereact/inputmask';
                     </div>
 
                     <h5>Styling</h5>
-                    <p>Styling is same as <Link href="/inputtext"> inputtext component</Link>, for theming classes visit <Link href="/theming"> theming page.</Link></p>
+                    <p>Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.</p>
+                    <div className="doc-tablewrapper">
+                        <table className="doc-table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Element</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>p-inputtext</td>
+                                    <td>Input element</td>
+                                </tr>
+                                <tr>
+                                    <td>p-inputmask</td>
+                                    <td>Input element</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h5>Accessibility</h5>
+                    <h6>Screen Reader</h6>
+                    <p>InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
+<CodeHighlight>
+{`
+<label htmlFor="date">Date</label>
+<InputMask id="firstname" />
+
+<span id="phone">Phone</span>
+<InputMask id="phone" aria-labelledby="phone" />
+
+<InputMask aria-label="Age" />
+`}
+</CodeHighlight>
+                    <h6>Keyboard Support</h6>
+                    <p>InputMask can receive focus using the <i>tab</i> key.</p>
 
                     <h5>Dependencies</h5>
                     <p>None.</p>

components/doc/inputswitch/index.js

@@ -292,8 +292,8 @@ import { InputSwitch } from 'primereact/inputswitch';
                 </div>
 
                 <h5>Accessibility</h5>
-                    <h6>Screen Reader</h6>
-                    <p>InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
+                <h6>Screen Reader</h6>
+                <p>InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
 <CodeHighlight>
 {`
 <label htmlFor="switch1">Remember Me</label>
@@ -305,8 +305,8 @@ import { InputSwitch } from 'primereact/inputswitch';
 <InputSwitch aria-label="Remember Me" />
 `}
 </CodeHighlight>
-                    <h6>Keyboard Support</h6>
-                    <p>InputSwitch can receive focus using the <i>tab</i> key, while being focused <i>space</i> key is used to toggle the checked state.</p>
+                <h6>Keyboard Support</h6>
+                <p>InputSwitch can receive focus using the <i>tab</i> key, while being focused <i>space</i> key is used to toggle the checked state.</p>
 
                 <h5>Dependencies</h5>
                 <p>None.</p>

components/doc/inputtext/index.js

@@ -402,7 +402,7 @@ import { InputText } from 'primereact/inputtext';
 `}
 </CodeHighlight>
                     <h6>Keyboard Support</h6>
-                    <p>Checkbox can receive focus using the <i>tab</i> key.</p>
+                    <p>InputText can receive focus using the <i>tab</i> key.</p>
 
                     <h5>Dependencies</h5>
                     <p>None.</p>

components/doc/togglebutton/index.js

@@ -29,10 +29,10 @@ export class ToggleButtonDemo extends Component {
             <div>
                 <div className="card">
                     <h5>Basic</h5>
-                    <ToggleButton checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} onIcon="pi pi-check" offIcon="pi pi-times" />
+                    <ToggleButton checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
 
                     <h5>Customized</h5>
-                    <ToggleButton checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style={{width: '10em'}} />
+                    <ToggleButton checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
                 </div>
             </div>
         );
@@ -54,10 +54,10 @@ const ToggleButtonDemo = () => {
         <div>
             <div className="card">
                 <h5>Basic</h5>
-                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" />
+                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" aria-label="Confirmation" />
 
                 <h5>Customized</h5>
-                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style={{width: '10em'}} />
+                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style={{width: '10em'}} aria-label="Confirmation" />
             </div>
         </div>
     );
@@ -78,10 +78,10 @@ const ToggleButtonDemo = () => {
         <div>
             <div className="card">
                 <h5>Basic</h5>
-                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" />
+                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
 
                 <h5>Customized</h5>
-                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style={{width: '10em'}} />
+                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
             </div>
         </div>
     );
@@ -105,10 +105,10 @@ const ToggleButtonDemo = () => {
         <div>
             <div className="card">
                 <h5>Basic</h5>
-                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" />
+                <ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
 
                 <h5>Customized</h5>
-                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style={{width: '10em'}} />
+                <ToggleButton checked={checked2} onChange={(e) => setChecked2(e.value)} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" className="w-full sm:w-10rem" aria-label="Confirmation" />
             </div>
         </div>
     );
@@ -239,12 +239,6 @@ import { ToggleButton } from 'primereact/togglebutton';
                                     <td>null</td>
                                     <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
                                 </tr>
-                                <tr>
-                                    <td>ariaLabelledBy</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -306,6 +300,20 @@ import { ToggleButton } from 'primereact/togglebutton';
                             </tbody>
                         </table>
                     </div>
+
+                    <h6>Screen Reader</h6>
+                    <p>ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is highly suggested to use 
+                    either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.</p>
+<CodeHighlight>
+{`
+<span id="rememberme">Remember Me</span>
+<ToggleButton aria-labelledby="rememberme" />
+
+<ToggleButton aria-label="Remember Me" />
+`}
+</CodeHighlight>
+                    <h6>Keyboard Support</h6>
+                    <p>ToggleButton can receive focus using the <i>tab</i> key, while being focused <i>space</i> key is used to toggle the checked state.</p>
 
                     <h5>Dependencies</h5>
                     <p>None.</p>

components/lib/button/Button.css

@@ -66,7 +66,3 @@
     position: relative;
     z-index: 1;
 }
-
-.p-button-label {
-    transition: all .2s;
-}

components/lib/calendar/Calendar.d.ts

@@ -149,7 +149,7 @@ export interface CalendarProps {
     onInput?(event: React.FormEvent<HTMLInputElement>): void;
     onSelect?(e: CalendarSelectParams): void;
     onChange?(e: CalendarChangeParams): void;
-    onMonthChange(e: CalendarMonthChangeParams): void
+    onMonthChange?(e: CalendarMonthChangeParams): void
     onViewDateChange?(e: CalendarViewChangeParams): void;
     onTodayButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
     onClearButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;

components/lib/carousel/Carousel.js

@@ -28,7 +28,6 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     const itemsContainerRef = React.useRef(null);
     const remainingItems = React.useRef(0);
     const allowAutoplay = React.useRef(!!props.autoplayInterval);
-    const circular = React.useRef(props.circular || !!props.autoplayInterval);
     const attributeSelector = React.useRef('');
     const swipeThreshold = React.useRef(20);
     const startPos = React.useRef(null);
@@ -41,6 +40,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     const prevValue = usePrevious(props.value);
     const prevPage = usePrevious(props.page);
     const isVertical = props.orientation === 'vertical';
+    const circular = props.circular || !!props.autoplayInterval;
     const isCircular = circular && props.value.length >= numVisibleState;
     const isAutoplay = props.autoplayInterval && allowAutoplay.current;
     const currentPage = props.onPageChange ? props.page : pageState;
@@ -80,7 +80,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         }
         else if (isCircular && pageState === 0 && dir === 1) {
             totalShiftedItems = 0;
-            page = (totalShiftedItems - 1);
+            page = (totalIndicators - 1);
         }
         else if (page === (totalIndicators - 1) && remainingItems.current > 0) {
             totalShiftedItems += ((remainingItems.current * -1) - (numScrollState * dir));
@@ -309,7 +309,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
             remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
 
             let page = currentPage;
-            if (totalIndicators !== 0 && pageState >= totalIndicators) {
+            if (totalIndicators !== 0 && page >= totalIndicators) {
                 page = totalIndicators - 1;
 
                 if (props.onPageChange) {
@@ -513,7 +513,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
 
     const createIndicator = (index) => {
         const isActive = currentPage === index;
-        const key = 'p-carousel-indicator-' + index;
+        const key = 'carousel-indicator-' + index;
         const className = classNames('p-carousel-indicator', {
             'p-highlight': isActive
         });

components/lib/chips/Chips.js

@@ -47,14 +47,17 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
             let values = props.value ? [...props.value] : [];
 
             if (props.allowDuplicate || values.indexOf(item) === -1) {
-                values.push(item);
-
+                let allowAddition = true;
                 if (props.onAdd) {
-                    props.onAdd({
+                    allowAddition = props.onAdd({
                         originalEvent: event,
                         value: item
                     });
                 }
+
+                if (allowAddition !== false) {
+                    values.push(item);
+                }
             }
 
             updateInput(event, values, preventDefault);

components/lib/hooks/Hooks.d.ts

@@ -1,35 +1,18 @@
-import { Dispatch, DependencyList, EffectCallback, Ref } from 'react';
+import * as React from 'react';
 
-export type TargetType = 'document' | 'window' | Ref<HTMLElement> | undefined;
+export type TargetType = 'document' | 'window' | React.Ref<HTMLElement> | undefined;
 export type StorageType = 'local' | 'session';
 
-interface EventOptions {
-    target?: TargetType;
-    type?: string;
-    listener?(event: Event): void;
-    options?: any;
-    when?: boolean;
-}
 
-interface OverlayEventOptions {
-    target?: TargetType;
-    overlay?: TargetType;
-    listener?(event: Event, type?: string): void;
-    when?: boolean;
-}
-
-interface ResizeEventOptions {
-    listener?(event: Event): void;
-}
 
 export declare function usePrevious(value: any): any;
-export declare function useMountEffect(effect: EffectCallback): void;
-export declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;
-export declare function useUnmountEffect(effect: EffectCallback): void;
+export declare function useMountEffect(effect: React.EffectCallback): void;
+export declare function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+export declare function useUnmountEffect(effect: React.EffectCallback): void;
 export declare function useEventListener(options: EventOptions): any[];
 export declare function useOverlayListener(options: OverlayEventOptions): any[];
 export declare function useOverlayScrollListener(options: EventOptions): any[];
 export declare function useResizeListener(options: ResizeEventOptions): any[];
 export declare function useInterval(fn: any, delay?: number, when?: boolean): any[];
 export declare function useTimeout(fn: any, delay?: number, when?: boolean): any[];
-export declare function useStorage<S>(initialValue: S, key: string, storage?: StorageType): [S, Dispatch<SetStateAction<S>>];
+export declare function useStorage<S>(initialValue: S, key: string, storage?: StorageType): [S, React.Dispatch<React.SetStateAction<S>>];

components/lib/inputmask/InputMask.d.ts

@@ -41,7 +41,6 @@ export interface InputMaskProps {
     required?: boolean;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
     onComplete?(e: InputMaskCompleteParams): void;
     onChange?(e: InputMaskChangeParams): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;

components/lib/inputmask/InputMask.js

@@ -533,7 +533,7 @@ export const InputMask = React.memo(React.forwardRef((props, ref) => {
         <InputText ref={elementRef} id={props.id} type={props.type} name={props.name} style={props.style} className={className} {...otherProps} placeholder={props.placeholder}
             size={props.size} maxLength={props.maxLength} tabIndex={props.tabIndex} disabled={props.disabled} readOnly={props.readOnly}
             onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onKeyPress={onKeyPress} onInput={onInput} onPaste={handleInputChange}
-            required={props.required} aria-labelledby={props.ariaLabelledBy} tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
+            required={props.required} tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
     )
 }));
 
@@ -560,7 +560,6 @@ InputMask.defaultProps = {
     required: false,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     onComplete: null,
     onChange: null,
     onFocus: null,

components/lib/togglebutton/ToggleButton.d.ts

@@ -31,7 +31,6 @@ export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.In
     tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
     onChange?(e: ToggleButtonChangeParams): void;
     onFocus?(event: React.FocusEvent<HTMLElement>): void;
     onBlur?(event: React.FocusEvent<HTMLElement>): void;

components/lib/togglebutton/ToggleButton.js

@@ -27,7 +27,7 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
     }
 
     const onKeyDown = (event) => {
-        if (event.key === 'Enter') {
+        if (event.keyCode === 32) {
             toggle(event);
             event.preventDefault();
         }
@@ -60,7 +60,7 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
         <>
             <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}
                 onClick={toggle} onFocus={props.onFocus} onBlur={props.onBlur} onKeyDown={onKeyDown}
-                tabIndex={tabIndex} aria-labelledby={props.ariaLabelledBy}>
+                tabIndex={tabIndex} role="button" aria-pressed={props.checked}>
                 {iconElement}
                 <span className="p-button-label">{label}</span>
                 <Ripple />
@@ -85,7 +85,6 @@ ToggleButton.defaultProps = {
     tabIndex: 0,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     onChange: null,
     onFocus: null,
     onBlur: null