chore(release): prepare new clay release 3.28.0

packages/clay-drop-down/src/DropDown.tsx

@@ -55,7 +55,8 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement | HTMLLIElement> {
 	/**
 	 * Prop to pass DOM element attributes to <DropDown.Menu />.
 	 */
-	menuElementAttrs?: React.HTMLAttributes<HTMLDivElement>;
+	menuElementAttrs?: React.HTMLAttributes<HTMLDivElement> &
+		Pick<React.ComponentProps<typeof Menu>, 'containerProps'>;
 
 	menuHeight?: React.ComponentProps<typeof Menu>['height'];
 

packages/clay-modal/src/Modal.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayPortal} from '@clayui/shared';
+import {ClayPortal, IPortalBaseProps} from '@clayui/shared';
 import classNames from 'classnames';
 import React, {useEffect, useRef} from 'react';
 import warning from 'warning';
@@ -36,6 +36,11 @@ interface IProps
 	 */
 	containerElementRef?: React.RefObject<Element>;
 
+	/**
+	 * Props to add to the <ClayPortal/>.
+	 */
+	containerProps?: IPortalBaseProps;
+
 	/**
 	 * The size of element modal.
 	 */
@@ -69,6 +74,7 @@ const ClayModal: React.FunctionComponent<IProps> = ({
 	children,
 	className,
 	containerElementRef,
+	containerProps = {},
 	observer,
 	size,
 	spritemap,
@@ -92,6 +98,7 @@ const ClayModal: React.FunctionComponent<IProps> = ({
 
 	return (
 		<ClayPortal
+			{...containerProps}
 			containerRef={containerElementRef}
 			subPortalRef={modalElementRef}
 		>

packages/clay-popover/src/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayPortal, observeRect} from '@clayui/shared';
+import {ClayPortal, IPortalBaseProps, observeRect} from '@clayui/shared';
 import classNames from 'classnames';
 import domAlign from 'dom-align';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -44,6 +44,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	alignPosition?: typeof ALIGN_POSITIONS[number];
 
+	/**
+	 * Props to add to the <ClayPortal/>.
+	 */
+	containerProps?: IPortalBaseProps;
+
 	/**
 	 * Flag to indicate if container should not be scrollable
 	 */
@@ -78,6 +83,7 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 			alignPosition = 'bottom',
 			children,
 			className,
+			containerProps = {},
 			disableScroll = false,
 			header,
 			onShowChange,
@@ -188,7 +194,9 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 						},
 					})}
 
-					{show && <ClayPortal>{content}</ClayPortal>}
+					{show && (
+						<ClayPortal {...containerProps}>{content}</ClayPortal>
+					)}
 				</>
 			);
 		}

packages/clay-tooltip/src/TooltipProvider.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayPortal, Keys, delegate} from '@clayui/shared';
+import {ClayPortal, IPortalBaseProps, Keys, delegate} from '@clayui/shared';
 import domAlign from 'dom-align';
 import React, {useCallback} from 'react';
 import warning from 'warning';
@@ -139,6 +139,11 @@ interface IPropsBase {
 	 */
 	autoAlign?: boolean;
 
+	/**
+	 * Props to add to the <ClayPortal/>.
+	 */
+	containerProps?: IPortalBaseProps;
+
 	/**
 	 * Custom function for rendering the contents of the tooltip
 	 */
@@ -171,6 +176,7 @@ const TooltipProvider: React.FunctionComponent<
 > = ({
 	autoAlign = true,
 	children,
+	containerProps = {},
 	contentRenderer = (props) => props.title,
 	delay = 600,
 	scope,
@@ -369,7 +375,7 @@ const TooltipProvider: React.FunctionComponent<
 	return (
 		<>
 			{show && (
-				<ClayPortal>
+				<ClayPortal {...containerProps}>
 					<ClayTooltip alignPosition={align} ref={tooltipRef} show>
 						{setAsHTML && typeof titleContent === 'string' ? (
 							<span