Merge branch 'master' into NONCE

components/lib/componentbase/ComponentBase.js

@@ -34,20 +34,28 @@ export const ComponentBase = {
         const getOtherProps = (props) => ObjectUtils.getDiffProps(props, defaultProps);
 
         const getOptionValue = (obj = {}, key = '', params = {}) => {
-            const fKeys = String(ObjectUtils.convertToFlatCase(key)).split('.');
+            const fKeys = String(ObjectUtils.toFlatCase(key)).split('.');
             const fKey = fKeys.shift();
-            const matchedPTOption = Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || '';
+            const matchedPTOption = Object.keys(obj).find((k) => ObjectUtils.toFlatCase(k) === fKey) || '';
 
             return fKey ? (ObjectUtils.isObject(obj) ? getOptionValue(ObjectUtils.getJSXElement(obj[matchedPTOption], params), fKeys.join('.'), params) : undefined) : ObjectUtils.getJSXElement(obj, params);
         };
 
         const getPTValue = (obj = {}, key = '', params = {}) => {
-            const fkey = ObjectUtils.convertToFlatCase(key);
+            const fkey = ObjectUtils.toFlatCase(key);
             const datasetPrefix = 'data-pc-';
-            const componentName = (params.props && params.props.__TYPE && ObjectUtils.convertToFlatCase(params.props.__TYPE)) || '';
+            const componentName = (params.props && params.props.__TYPE && ObjectUtils.toFlatCase(params.props.__TYPE)) || '';
             const pt = ComponentBase.context.pt || PrimeReact.pt || {};
-            const defaultPT = (ptKey) => pt && getOptionValue(pt[componentName], ptKey);
-            const self = ObjectUtils.getPropValue(ObjectUtils.getPropCaseInsensitive(obj, fkey), params);
+
+            const getValue = (...args) => {
+                const value = getOptionValue(ObjectUtils.getPropCaseInsensitive(...args));
+
+                return ObjectUtils.isString(value) ? { className: value } : value;
+            };
+
+            const defaultPT = (ptKey) => pt && getValue(pt[componentName], ptKey);
+
+            const self = getValue(obj, fkey, params);
 
             const globalPT = defaultPT(fkey);
             const datasetProps = {

components/lib/fileupload/FileUpload.css

@@ -33,11 +33,11 @@
     flex-wrap: wrap;
 }
 
-.p-button.p-fileupload-choose input[type=file] {
+.p-button.p-fileupload-choose input[type='file'] {
     display: none;
 }
 
-.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {
+.p-fileupload-choose.p-fileupload-choose-selected input[type='file'] {
     display: none;
 }
 

components/lib/hooks/useStyle.js

@@ -25,6 +25,7 @@ export const useStyle = (css, options = {}) => {
             styleRef.current.type = 'text/css';
             id && (styleRef.current.id = id);
             media && (styleRef.current.media = media);
+
             DomHandler.addNonce(styleRef.current, (context && context.nonce) || PrimeReact.nonce);
             document.head.appendChild(styleRef.current);
             name && styleRef.current.setAttribute('data-primereact-style-id', name);

components/lib/portal/Portal.js

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { DomHandler } from '../utils/Utils';
 import { PortalBase } from './PortalBase';
-import { PrimeReactContext } from '../api/Api';
-import PrimeReact from '../api/Api';
 
 export const Portal = React.memo((inProps) => {
     const props = PortalBase.getProps(inProps);
     const context = React.useContext(PrimeReactContext);
 
-    const [mountedState, setMountedState] = React.useState(props.visible && DomHandler.hasDOM());
+    const [mountedState, setMountedState] = React.useState(props.visible && DomHandler.isClient());
 
     useMountEffect(() => {
-        if (DomHandler.hasDOM() && !mountedState) {
+        if (DomHandler.isClient() && !mountedState) {
             setMountedState(true);
             props.onMounted && props.onMounted();
         }

components/lib/utils/DomHandler.js

@@ -226,6 +226,74 @@ export default class DomHandler {
         return null;
     }
 
+    static setAttributes(element, attributes = {}) {
+        if (element) {
+            const computedStyles = (rule, value) => {
+                const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
+
+                return [value].flat().reduce((cv, v) => {
+                    if (v !== null && v !== undefined) {
+                        const type = typeof v;
+
+                        if (type === 'string' || type === 'number') {
+                            cv.push(v);
+                        } else if (type === 'object') {
+                            const _cv = Array.isArray(v)
+                                ? computedStyles(rule, v)
+                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
+
+                            cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
+                        }
+                    }
+
+                    return cv;
+                }, styles);
+            };
+
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    const matchedEvent = key.match(/^on(.+)/);
+
+                    if (matchedEvent) {
+                        element.addEventListener(matchedEvent[1].toLowerCase(), value);
+                    } else if (key === 'p-bind') {
+                        this.setAttributes(element, value);
+                    } else {
+                        value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
+                        (element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
+                        element.setAttribute(key, value);
+                    }
+                }
+            });
+        }
+    }
+
+    static getAttribute(element, name) {
+        if (element) {
+            const value = element.getAttribute(name);
+
+            if (!isNaN(value)) {
+                return +value;
+            }
+
+            if (value === 'true' || value === 'false') {
+                return value === 'true';
+            }
+
+            return value;
+        }
+
+        return undefined;
+    }
+
+    static isAttributeEquals(element, name, value) {
+        return element ? this.getAttribute(element, name) === value : false;
+    }
+
+    static isAttributeNotEquals(element, name, value) {
+        return !this.isAttributeEquals(element, name, value);
+    }
+
     static getHeight(el) {
         if (el) {
             let height = el.offsetHeight;
@@ -795,10 +863,6 @@ export default class DomHandler {
         return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
     }
 
-    static hasDOM() {
-        return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-    }
-
     static getFocusableElements(element, selector = '') {
         let focusableElements = DomHandler.find(
             element,

components/lib/utils/MergeProps.js

@@ -4,21 +4,23 @@ export function mergeProps(...props) {
 
         return props.reduce((merged, ps) => {
             for (const key in ps) {
+                const value = ps[key];
+
                 if (key === 'style') {
                     merged['style'] = { ...merged['style'], ...ps['style'] };
                 } else if (key === 'className') {
                     merged['className'] = [merged['className'], ps['className']].join(' ').trim();
-                } else if (isFn(ps[key])) {
+                } else if (isFn(value)) {
                     const fn = merged[key];
 
                     merged[key] = fn
                         ? (...args) => {
                               fn(...args);
                               value(...args);
                           }
-                        : ps[key];
+                        : value;
                 } else {
-                    merged[key] = ps[key];
+                    merged[key] = value;
                 }
             }
 

components/lib/utils/ObjectUtils.js

@@ -83,18 +83,6 @@ export default class ObjectUtils {
         }
     }
 
-    static isFunction(obj) {
-        return !!(obj && obj.constructor && obj.call && obj.apply);
-    }
-
-    static isObject(obj) {
-        return obj !== null && obj instanceof Object && obj.constructor === Object;
-    }
-
-    static isLetter(char) {
-        return char && (char.toUpperCase() != char.toLowerCase() || char.codePointAt(0) > 127);
-    }
-
     static findDiffKeys(obj1, obj2) {
         if (!obj1 || !obj2) {
             return {};
@@ -163,16 +151,16 @@ export default class ObjectUtils {
     }
 
     static getPropCaseInsensitive(props, prop, defaultProps = {}) {
-        const fkey = ObjectUtils.convertToFlatCase(prop);
+        const fkey = this.toFlatCase(prop);
 
         for (let key in props) {
-            if (props.hasOwnProperty(key) && ObjectUtils.convertToFlatCase(key) === fkey) {
+            if (props.hasOwnProperty(key) && this.toFlatCase(key) === fkey) {
                 return props[key];
             }
         }
 
         for (let key in defaultProps) {
-            if (defaultProps.hasOwnProperty(key) && ObjectUtils.convertToFlatCase(key) === fkey) {
+            if (defaultProps.hasOwnProperty(key) && this.toFlatCase(key) === fkey) {
                 return defaultProps[key];
             }
         }
@@ -282,9 +270,13 @@ export default class ObjectUtils {
         return str;
     }
 
-    static convertToFlatCase(str) {
+    static toFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+    }
+
+    static toCapitalCase(str) {
+        return this.isNotEmpty(str) && this.isString(str) ? str[0].toUpperCase() + str.slice(1) : str;
     }
 
     static isEmpty(value) {
@@ -295,6 +287,70 @@ export default class ObjectUtils {
         return !this.isEmpty(value);
     }
 
+    static isFunction(value) {
+        return !!(value && value.constructor && value.call && value.apply);
+    }
+
+    static isObject(value) {
+        return value !== null && value instanceof Object && value.constructor === Object;
+    }
+
+    static isDate(value) {
+        return value !== null && value instanceof Date && value.constructor === Date;
+    }
+
+    static isArray(value) {
+        return value !== null && Array.isArray(value);
+    }
+
+    static isString(value) {
+        return value !== null && typeof value === 'string';
+    }
+
+    static isPrintableCharacter(char = '') {
+        return this.isNotEmpty(char) && char.length === 1 && char.match(/\S| /);
+    }
+
+    static isLetter(char) {
+        return char && (char.toUpperCase() != char.toLowerCase() || char.codePointAt(0) > 127);
+    }
+
+    /**
+     * Firefox-v103 does not currently support the "findLast" method. It is stated that this method will be supported with Firefox-v104.
+     * https://caniuse.com/mdn-javascript_builtins_array_findlast
+     */
+    static findLast(arr, callback) {
+        let item;
+
+        if (this.isNotEmpty(arr)) {
+            try {
+                item = arr.findLast(callback);
+            } catch {
+                item = [...arr].reverse().find(callback);
+            }
+        }
+
+        return item;
+    }
+
+    /**
+     * Firefox-v103 does not currently support the "findLastIndex" method. It is stated that this method will be supported with Firefox-v104.
+     * https://caniuse.com/mdn-javascript_builtins_array_findlastindex
+     */
+    static findLastIndex(arr, callback) {
+        let index = -1;
+
+        if (this.isNotEmpty(arr)) {
+            try {
+                index = arr.findLastIndex(callback);
+            } catch {
+                index = arr.lastIndexOf([...arr].reverse().find(callback));
+            }
+        }
+
+        return index;
+    }
+
     static sort(value1, value2, order = 1, locale, nullSortOrder = 1) {
         const result = ObjectUtils.compare(value1, value2, locale, order);
         let finalSortOrder = order;

components/lib/utils/utils.d.ts

@@ -31,6 +31,11 @@ export declare class DomHandler {
     static hasClass(el: HTMLElement, className: string): boolean;
     static find(el: HTMLElement, selector: string): any[];
     static findSingle(el: HTMLElement, selector: string): any;
+    static createElement(type: string, attributes: object, ...children: any): HTMLElement;
+    static setAttributes(el: HTMLElement, attributes: object): void;
+    static getAttribute(el: HTMLElement, name: string): any;
+    static isAttributeEquals(el: HTMLElement, name: string, value: any): boolean;
+    static isAttributeNotEquals(el: HTMLElement, name: string, value: any): boolean;
     static getHeight(el: HTMLElement): number;
     static getWidth(el: HTMLElement): number;
     static alignOverlay(overlay: HTMLElement, target: HTMLElement, appendTo?: string, calculateMinWidth?: boolean): void;
@@ -61,7 +66,6 @@ export declare class DomHandler {
     static resolveUserAgent(): { browser: string; version: string };
     static isVisible(el: HTMLElement): boolean;
     static isExist(el: HTMLElement): boolean;
-    static hasDOM(): boolean;
     static getFocusableElements(el: HTMLElement, selector?: string): any[];
     static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
     static getLastFocusableElement(el: HTMLElement, selector?: string): any;
@@ -98,7 +102,6 @@ export declare class ObjectUtils {
     static equals(obj1: any, obj2: any, field: string): boolean;
     static deepEquals(a: any, b: any): boolean;
     static resolveFieldData(data: any, field: string): any;
-    static isFunction(obj: any): boolean;
     static findDiffKeys(obj1: any, obj2: any): object;
     static reorderArray(value: any, from: number, to: number): void;
     static findIndexInList(value: any, list: any[], dataKey?: string): number;
@@ -115,8 +118,19 @@ export declare class ObjectUtils {
     static getRefElement(ref: any): any;
     static combinedRefs(innerRef: any, forwardRef: any): void;
     static removeAccents(str: any): string;
+    static toFlatCase(str: string): string;
+    static toCapitalCase(str: string): string;
     static isEmpty(value: any): boolean;
     static isNotEmpty(value: any): boolean;
+    static isFunction(value: any): boolean;
+    static isObject(value: any): boolean;
+    static isDate(value: any): boolean;
+    static isArray(value: any): boolean;
+    static isString(value: any): boolean;
+    static isPrintableCharacter(char: string): boolean;
+    static isLetter(char: string): boolean;
+    static findLast(value: any[], callback: () => any): any;
+    static findLastIndex(value: any[], callback: () => any): number;
     static sort(value1: any, value2: any, order: number, locale: string | string[]): number;
 }