Refactor #4359 - For OverlayPanel

components/doc/common/apidoc/index.json

@@ -24247,6 +24247,74 @@
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
             "values": {
+                "OverlayPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "OverlayPanelProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayPanelState": {
+                    "description": "Defines current inline state in OverlayPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
                 "OverlayPanelBreakpoints": {
                     "description": "Custom overlay panel breakpoints",
                     "relatedProp": "",
@@ -24261,6 +24329,14 @@
                     "callbacks": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OverlayPanelPassThroughType": {
+                    "values": "PassThroughType<T, OverlayPanelPassThroughMethodOptions>"
+                }
+            }
         }
     },
     "overlayservice": {

components/doc/overlaypanel/pt/ptdoc.js

@@ -0,0 +1,84 @@
+import React, { useRef } from 'react';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+import { OverlayPanel } from '../../../lib/overlaypanel/OverlayPanel';
+import { Button } from '../../../lib/button/Button';
+
+export function PTDoc(props) {
+    const op = useRef(null);
+
+    const code = {
+        basic: `
+<Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+<OverlayPanel ref={op}
+    pt={{
+        root: { className: 'surface-ground' }
+    }}
+>
+    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+</OverlayPanel>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+
+export default function PTDemo() {
+    const op = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+
+            <OverlayPanel ref={op}
+                pt={{
+                    root: { className: 'surface-ground' }
+                }}
+            >
+                <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+            </OverlayPanel>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+
+export default function PTDemo() {
+    const op = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+
+            <OverlayPanel ref={op}
+                pt={{
+                    root: { className: 'surface-ground' }
+                }}
+            >
+                <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+            </OverlayPanel>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+
+                <OverlayPanel ref={op}
+                    pt={{
+                        root: { className: 'surface-ground' }
+                    }}
+                >
+                    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+                </OverlayPanel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/overlaypanel/pt/wireframe.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="/images/pt/wireframe-placeholder.jpg" alt="card" />
+            </div>
+        </>
+    );
+};

components/lib/overlaypanel/OverlayPanel.js

@@ -5,14 +5,19 @@ import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/H
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, mergeProps, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 import { OverlayPanelBase } from './OverlayPanelBase';
 import { TimesIcon } from '../icons/times';
 
 export const OverlayPanel = React.forwardRef((inProps, ref) => {
     const props = OverlayPanelBase.getProps(inProps);
-
     const [visibleState, setVisibleState] = React.useState(false);
+    const { ptm } = OverlayPanelBase.setMetaData({
+        props,
+        state: {
+            visible: visibleState
+        }
+    });
     const attributeSelector = React.useRef('');
     const overlayRef = React.useRef(null);
     const currentTargetRef = React.useRef(null);
@@ -189,14 +194,29 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
     }));
 
     const createCloseIcon = () => {
-        const iconProps = { className: 'p-overlaypanel-close-icon', 'aria-hidden': true };
-        const icon = props.closeIcon || <TimesIcon {...iconProps} />;
-        const closeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+        const closeIconProps = mergeProps(
+            {
+                className: 'p-overlaypanel-close-icon',
+                'aria-hidden': true
+            },
+            ptm('closeIcon')
+        );
+        const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+        const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
         const ariaLabel = props.ariaCloseLabel || localeOption('close');
+        const closeButtonProps = mergeProps(
+            {
+                type: "button",
+                className: "p-overlaypanel-close p-link",
+                onClick: (e) => onCloseClick(e),
+                'aria-label': ariaLabel
+            },
+            ptm('closeButton')
+        )
 
         if (props.showCloseIcon) {
             return (
-                <button type="button" className="p-overlaypanel-close p-link" onClick={onCloseClick} aria-label={ariaLabel}>
+                <button {...closeButtonProps}>
                     {closeIcon}
                     <Ripple />
                 </button>
@@ -207,12 +227,32 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
     };
 
     const createElement = () => {
-        const otherProps = OverlayPanelBase.getOtherProps(props);
         const className = classNames('p-overlaypanel p-component', props.className, {
             'p-input-filled': PrimeReact.inputStyle === 'filled',
             'p-ripple-disabled': PrimeReact.ripple === false
         });
         const closeIcon = createCloseIcon();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: overlayRef,
+                className,
+                style: props.style,
+                onClick: (e) => onPanelClick(e)
+            },
+            OverlayPanelBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: "p-overlaypanel-content",
+                onClick: (e) => onContentClick(e),
+                onMouseDown: onContentClick
+            },
+            OverlayPanelBase.getOtherProps(props),
+            ptm('content')
+        );
 
         return (
             <CSSTransition
@@ -227,8 +267,8 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
                 onExit={onExit}
                 onExited={onExited}
             >
-                <div ref={overlayRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onPanelClick}>
-                    <div className="p-overlaypanel-content" onClick={onContentClick} onMouseDown={onContentClick}>
+                <div {...rootProps}>
+                    <div {...contentProps}>
                         {props.children}
                     </div>
                     {closeIcon}

components/lib/overlaypanel/OverlayPanelBase.js

@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const OverlayPanelBase = {
+export const OverlayPanelBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'OverlayPanel',
         id: null,
@@ -16,7 +16,5 @@ export const OverlayPanelBase = {
         onShow: null,
         onHide: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, OverlayPanelBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, OverlayPanelBase.defaultProps)
-};
+    }
+});

components/lib/overlaypanel/overlaypanel.d.ts

@@ -9,7 +9,51 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type OverlayPanelPassThroughType<T> = PassThroughType<T, OverlayPanelPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayPanelPassThroughMethodOptions {
+    props: OverlayPanelProps;
+    state: OverlayPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OverlayPanelProps.pt}
+ */
+export interface OverlayPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in OverlayPanel component.
+ */
+export interface OverlayPanelState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
 
 /**
  * Custom overlay panel breakpoints