feat: Overlay new type prop

Author: tugcekucukoglu

packages/headless/src/overlay/useOverlay.props.ts

@@ -2,11 +2,12 @@ import type { useOverlayProps } from '@primereact/types/shared/overlay';
 
 export const defaultProps: useOverlayProps = {
     target: undefined,
+    defaultOpen: undefined,
+    open: undefined,
     appendTo: 'body',
+    type: 'overlay',
     baseZIndex: 0,
     autoZIndex: true,
     closeOnEscape: true,
-    defaultOpen: undefined,
-    open: undefined,
     onOpenChange: undefined
 };

packages/headless/src/overlay/useOverlay.ts

@@ -54,8 +54,8 @@ export const useOverlay = withHeadless({
 
             addStyle(containerElement, { position: 'absolute', top: '0' });
 
-            if (props.autoZIndex) {
-                ZIndex.set('overlay', containerElement, props.baseZIndex ?? 0 + ($primereact.config?.zIndex?.modal ?? 1100));
+            if (props.autoZIndex && props.type) {
+                ZIndex.set(props.type, containerElement, (props.baseZIndex ?? 0) + ($primereact.config?.zIndex?.[props.type] ?? 1000));
             }
 
             alignOverlay();

packages/primereact/src/datepicker/portal/DatePickerPortal.tsx

@@ -47,6 +47,7 @@ export const DatePickerPortal = withComponent({
                     ref={datepicker?.portalRef}
                     appendTo={datepicker?.props.appendTo}
                     target={datepicker?.inputRef?.current?.elementRef?.current}
+                    type="overlay"
                     open={datepicker?.state.overlayVisible}
                     onOpenChange={({ value }: useOverlayOpenChangeEvent) => datepicker?.changeVisibleState(value)}
                     onEnter={datepicker?.onOverlayEnter}

packages/primereact/src/password/portal/PasswordPortal.tsx

@@ -47,6 +47,7 @@ export const PasswordPortal = withComponent({
                     ref={password?.portalRef}
                     appendTo={password?.props.appendTo}
                     target={password?.inputRef?.current?.elementRef?.current}
+                    type="overlay"
                     open={password?.state.overlayVisible}
                     onOpenChange={({ value }: useOverlayOpenChangeEvent) => password?.changeVisibleState(value)}
                     onEnter={password?.onOverlayEnter}

packages/types/src/shared/overlay/useOverlay.types.ts

@@ -28,6 +28,19 @@ export interface useOverlayProps {
      * The target element to attach the overlay to.
      */
     target?: HTMLElement | undefined;
+    /**
+     * Default open state for uncontrolled mode.
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Whether the overlay is visible (controlled mode).
+     */
+    open?: boolean | undefined;
+    /**
+     * Type of the overlay.
+     * @default 'overlay'
+     */
+    type?: 'overlay' | 'menu' | undefined;
     /**
      * Where to append the overlay.
      * @default 'body'
@@ -48,14 +61,6 @@ export interface useOverlayProps {
      * @default true
      */
     closeOnEscape?: boolean | undefined;
-    /**
-     * Default open state for uncontrolled mode.
-     */
-    defaultOpen?: boolean | undefined;
-    /**
-     * Whether the overlay is visible (controlled mode).
-     */
-    open?: boolean | undefined;
     /**
      * Callback function that is called when the overlay's open state changes.
      */