feat: Add Portal and BlockUI

apps/showcase/app/(page)/blockui/page.tsx

@@ -0,0 +1,16 @@
+import DocComponent from '@/components/doc/DocComponent';
+import features from '@/doc/blockui/features';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'React BlockUI Component',
+    description: 'BlockUI can either block other components or the whole page.'
+};
+
+export default function BlockUIPage() {
+    const docs = {
+        features
+    };
+
+    return <DocComponent header="BlockUI" description={metadata.description} docs={docs} apiKeys={['BlockUI']} />;
+}

apps/showcase/assets/menu/menu.json

@@ -42,6 +42,10 @@
                             "name": "Badge",
                             "to": "/badge"
                         },
+                        {
+                            "name": "BlockUI",
+                            "to": "/blockui"
+                        },
                         {
                             "name": "Chip",
                             "to": "/chip"

apps/showcase/doc/blockui/features/basic/demo.tsx

@@ -0,0 +1,31 @@
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import * as React from 'react';
+
+export default function BasicDemo() {
+    const [blocked, setBlocked] = React.useState(false);
+
+    return (
+        <div className="card">
+            <div className="mb-4">
+                <button className="mr-2" onClick={() => setBlocked(true)}>
+                    Block
+                </button>
+                <button onClick={() => setBlocked(false)}>Unblock</button>
+            </div>
+            <BlockUI blocked={blocked}>
+                <BlockUI.Mask />
+                <Panel>
+                    <Panel.Header>Basic</Panel.Header>
+                    <Panel.Content>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Panel.Content>
+                </Panel>
+            </BlockUI>
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/basic/doc.tsx

@@ -0,0 +1,18 @@
+import { CodeViewer } from '@primereact/code-viewer';
+import BasicDemo from './demo';
+import { source } from './source.auto';
+
+export default function BasicDoc() {
+    return (
+        <div>
+            <h2>Basic</h2>
+            <p>
+                Content to display is defined with the <i>value</i> property or the default slot.
+            </p>
+
+            <BasicDemo />
+            <br />
+            <CodeViewer source={source} />
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/basic/source.auto.ts

@@ -0,0 +1,7 @@
+/****************************************************************************
+****************** PrimeReact Demo Source (Auto-Generated) ******************
+*****************************************************************************/
+
+export const source = {
+    "code": "import { BlockUI } from 'primereact/blockui';\nimport { Panel } from 'primereact/panel';\nimport * as React from 'react';\n\nexport default function BasicDemo() {\n    const [blocked, setBlocked] = React.useState(false);\n\n    return (\n        <div className=\"card\">\n            <div className=\"mb-4\">\n                <button className=\"mr-2\" onClick={() => setBlocked(true)}>\n                    Block\n                </button>\n                <button onClick={() => setBlocked(false)}>Unblock</button>\n            </div>\n            <BlockUI blocked={blocked}>\n                <BlockUI.Mask />\n                <Panel>\n                    <Panel.Header>Basic</Panel.Header>\n                    <Panel.Content>\n                        <p className=\"m-0\">\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n                            laborum.\n                        </p>\n                    </Panel.Content>\n                </Panel>\n            </BlockUI>\n        </div>\n    );\n}\n"
+};

apps/showcase/doc/blockui/features/document/demo.tsx

@@ -0,0 +1,23 @@
+import { BlockUI } from 'primereact/blockui';
+import * as React from 'react';
+
+export default function DocumentDemo() {
+    const [blocked, setBlocked] = React.useState(false);
+
+    React.useEffect(() => {
+        if (blocked) {
+            setTimeout(() => {
+                setBlocked(false);
+            }, 3000);
+        }
+    }, [blocked]);
+
+    return (
+        <div className="card">
+            <button onClick={() => setBlocked(true)}>Block</button>
+            <BlockUI blocked={blocked} fullScreen>
+                <BlockUI.Mask />
+            </BlockUI>
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/document/doc.tsx

@@ -0,0 +1,18 @@
+import { CodeViewer } from '@primereact/code-viewer';
+import DocumentDemo from './demo';
+import { source } from './source.auto';
+
+export default function DocumentDoc() {
+    return (
+        <div>
+            <h2>Document</h2>
+            <p>
+                Enabling <i>fullScreen</i> property controls the document.
+            </p>
+
+            <DocumentDemo />
+            <br />
+            <CodeViewer source={source} />
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/document/source.auto.ts

@@ -0,0 +1,7 @@
+/****************************************************************************
+****************** PrimeReact Demo Source (Auto-Generated) ******************
+*****************************************************************************/
+
+export const source = {
+    "code": "import { BlockUI } from 'primereact/blockui';\nimport * as React from 'react';\n\nexport default function DocumentDemo() {\n    const [blocked, setBlocked] = React.useState(false);\n\n    React.useEffect(() => {\n        if (blocked) {\n            setTimeout(() => {\n                setBlocked(false);\n            }, 3000);\n        }\n    }, [blocked]);\n\n    return (\n        <div className=\"card\">\n            <button onClick={() => setBlocked(true)}>Block</button>\n            <BlockUI blocked={blocked} fullScreen>\n                <BlockUI.Mask />\n            </BlockUI>\n        </div>\n    );\n}\n"
+};

apps/showcase/doc/blockui/features/import/doc.tsx

@@ -0,0 +1,5 @@
+import { CodeViewer } from '@primereact/code-viewer';
+
+export default function ImportDoc() {
+    return <CodeViewer source={`import { BlockUI } from 'primereact/blockui';`} />;
+}

apps/showcase/doc/blockui/features/index.ts

@@ -0,0 +1,30 @@
+'use client';
+import BasicDoc from './basic/doc';
+import DocumentDoc from './document/doc';
+import ImportDoc from './import/doc';
+import TemplateDoc from './template/doc';
+
+const features = [
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'document',
+        label: 'Document',
+        component: DocumentDoc
+    },
+    {
+        id: 'template',
+        label: 'Template',
+        component: TemplateDoc
+    }
+];
+
+export default features;

apps/showcase/doc/blockui/features/template/demo.tsx

@@ -0,0 +1,32 @@
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import * as React from 'react';
+
+export default function TemplateDemo() {
+    const [blocked, setBlocked] = React.useState(true);
+    const buttonText = blocked ? 'Subscribe' : 'Unsubscribe';
+
+    return (
+        <div className="card">
+            <BlockUI blocked={blocked}>
+                <BlockUI.Mask className="flex items-center justify-center">
+                    <i className="pi pi-lock text-surface-500 dark:text-white" style={{ fontSize: '3rem' }}></i>
+                </BlockUI.Mask>
+                <Panel>
+                    <Panel.Header>Prime React News</Panel.Header>
+                    <Panel.Content>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Panel.Content>
+                </Panel>
+            </BlockUI>
+            <div className="mt-3 flex flex-col items-center">
+                <h3>Continue reading?</h3>
+                <button onClick={() => setBlocked((prevState) => !prevState)}>{buttonText}</button>
+            </div>
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/template/doc.tsx

@@ -0,0 +1,18 @@
+import { CodeViewer } from '@primereact/code-viewer';
+import TemplateDemo from './demo';
+import { source } from './source.auto';
+
+export default function TemplateDoc() {
+    return (
+        <div>
+            <h2>Template</h2>
+            <p>
+                Custom content can be placed inside the modal layer using the <i>BlockUI.Mask</i> component.
+            </p>
+
+            <TemplateDemo />
+            <br />
+            <CodeViewer source={source} />
+        </div>
+    );
+}

apps/showcase/doc/blockui/features/template/source.auto.ts

@@ -0,0 +1,7 @@
+/****************************************************************************
+****************** PrimeReact Demo Source (Auto-Generated) ******************
+*****************************************************************************/
+
+export const source = {
+    "code": "import { BlockUI } from 'primereact/blockui';\nimport { Panel } from 'primereact/panel';\nimport * as React from 'react';\n\nexport default function TemplateDemo() {\n    const [blocked, setBlocked] = React.useState(true);\n    const buttonText = blocked ? 'Subscribe' : 'Unsubscribe';\n\n    return (\n        <div className=\"card\">\n            <BlockUI blocked={blocked}>\n                <BlockUI.Mask className=\"flex items-center justify-center\">\n                    <i className=\"pi pi-lock text-surface-500 dark:text-white\" style={{ fontSize: '3rem' }}></i>\n                </BlockUI.Mask>\n                <Panel>\n                    <Panel.Header>Prime React News</Panel.Header>\n                    <Panel.Content>\n                        <p className=\"m-0\">\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n                            laborum.\n                        </p>\n                    </Panel.Content>\n                </Panel>\n            </BlockUI>\n            <div className=\"mt-3 flex flex-col items-center\">\n                <h3>Continue reading?</h3>\n                <button onClick={() => setBlocked((prevState) => !prevState)}>{buttonText}</button>\n            </div>\n        </div>\n    );\n}\n"
+};

packages/core/src/config/PrimeReact.context.tsx

@@ -20,7 +20,8 @@ export const PrimeReactProvider = (inProps: React.PropsWithChildren<PrimeReactPr
         ripple,
         setRipple,
         inputVariant,
-        setInputVariant
+        setInputVariant,
+        zIndex: { modal: 1100, overlay: 1000, menu: 1000, tooltip: 1100 }
     };
 
     return (

packages/headless/src/blockui/index.ts

@@ -0,0 +1,2 @@
+export * from './useBlockUI';
+export * from './useBlockUI.props';

packages/headless/src/blockui/useBlockUI.props.ts

@@ -0,0 +1,9 @@
+import type { useBlockUIProps } from '@primereact/types/shared/blockui';
+
+export const defaultProps: useBlockUIProps = {
+    __TYPE: 'useBlockUI',
+    blocked: false,
+    fullScreen: false,
+    autoZIndex: true,
+    baseZIndex: 0
+};

packages/headless/src/blockui/useBlockUI.ts

@@ -0,0 +1,97 @@
+import { withHeadless } from '@primereact/core/headless';
+import { useMountEffect, useUnmountEffect, useUpdateEffect } from '@primereact/hooks';
+import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils';
+import { addClass, hasCSSAnimation } from '@primeuix/utils/dom';
+import { ZIndex } from '@primeuix/utils/zindex';
+import * as React from 'react';
+import { defaultProps } from './useBlockUI.props';
+
+export const useBlockUI = withHeadless({
+    setup: ({ props, $primereact }) => {
+        const [visibleState, setVisibleState] = React.useState(props.blocked);
+        const activeElementRef = React.useRef<HTMLElement | null>(null);
+        const maskRef = React.useRef<HTMLDivElement | null>(null);
+
+        const block = () => {
+            setVisibleState(true);
+            activeElementRef.current = document.activeElement as HTMLElement | null;
+        };
+
+        const unblock = () => {
+            if (maskRef.current) {
+                addClass(maskRef.current, 'p-overlay-mask-leave');
+
+                if (hasCSSAnimation(maskRef.current)) {
+                    maskRef.current.addEventListener('animationend', () => {
+                        removeMask();
+                    });
+                } else {
+                    removeMask();
+                }
+            }
+        };
+
+        const removeMask = () => {
+            if (maskRef.current) {
+                ZIndex.clear(maskRef.current);
+            }
+
+            setVisibleState(false);
+
+            if (props.fullScreen) {
+                unblockBodyScroll('');
+
+                if (activeElementRef.current) {
+                    activeElementRef.current.focus();
+                }
+            }
+        };
+
+        const onPortalMounted = () => {
+            if (props.fullScreen) {
+                blockBodyScroll('');
+
+                if (activeElementRef.current) {
+                    activeElementRef.current.blur();
+                }
+            }
+
+            if (props.autoZIndex && maskRef.current) {
+                const key = props.fullScreen ? 'modal' : 'overlay';
+
+                ZIndex.set(key, maskRef.current, $primereact?.config?.zIndex[key]);
+            }
+        };
+
+        useMountEffect(() => {
+            if (visibleState) {
+                block();
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (props.blocked) {
+                block();
+            } else {
+                unblock();
+            }
+        }, [props.blocked]);
+
+        useUnmountEffect(() => {
+            if (props.fullScreen) {
+                unblockBodyScroll('');
+            }
+
+            if (maskRef.current) {
+                ZIndex.clear(maskRef.current);
+            }
+        });
+
+        return {
+            visibleState,
+            maskRef,
+            onPortalMounted
+        };
+    },
+    defaultProps
+});

packages/headless/src/portal/index.ts

@@ -0,0 +1,2 @@
+export * from './usePortal';
+export * from './usePortal.props';

packages/headless/src/portal/usePortal.props.ts

@@ -0,0 +1,8 @@
+import type { usePortalProps } from '@primereact/types/shared/portal';
+
+export const defaultProps: usePortalProps = {
+    __TYPE: 'usePortal',
+    visible: false,
+    onMounted: null,
+    onUnmounted: null
+};