feat(Flyout): contentZIndex

.changeset/plenty-colts-lie.md

@@ -0,0 +1,5 @@
+---
+"reshaped": minor
+---
+
+Flyout, Popover, DropdownMenu, Tooltip, ContextMenu, Autocomplete: Added contentZIndex property

packages/reshaped/src/components/Autocomplete/Autocomplete.tsx

@@ -36,6 +36,7 @@ const Autocomplete: React.FC<T.Props> = (props) => {
 		fallbackMinWidth,
 		fallbackMinHeight,
 		contentMaxHeight,
+		contentZIndex,
 		...textFieldProps
 	} = props;
 	const [highlightedId, setHighlightedId] = React.useState<string>();
@@ -194,6 +195,7 @@ const Autocomplete: React.FC<T.Props> = (props) => {
 				fallbackMinWidth={fallbackMinWidth}
 				fallbackMinHeight={fallbackMinHeight}
 				contentMaxHeight={contentMaxHeight}
+				contentZIndex={contentZIndex}
 				disableHideAnimation
 				instanceRef={instanceRef}
 			>

packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts

@@ -21,6 +21,7 @@ export type Props = TextFieldProps &
 		| "fallbackMinWidth"
 		| "fallbackMinHeight"
 		| "contentMaxHeight"
+		| "contentZIndex"
 	> & {
 		/** Callback for when value changes from user input */
 		onInput?: TextFieldProps["onChange"];

packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts

@@ -18,6 +18,7 @@ export type Props = Pick<
 	| "contentGap"
 	| "contentShift"
 	| "contentMaxHeight"
+	| "contentZIndex"
 	| "onOpen"
 	| "onClose"
 	| "active"

packages/reshaped/src/components/Flyout/Flyout.module.css

@@ -1,12 +1,13 @@
 .content {
 	--rs-flyout-max-h: 100%;
 	--rs-flyout-max-w: 100%;
+	--rs-flyout-z-index: var(--rs-z-index-absolute);
 	--rs-flyout-origin-x: 50%;
 	--rs-flyout-origin-y: 50%;
 
 	position: absolute;
 	isolation: isolate;
-	z-index: var(--rs-z-index-absolute);
+	z-index: var(--rs-flyout-z-index);
 
 	/* Make content child grow based on its max height with flex grow */
 	display: flex;

packages/reshaped/src/components/Flyout/Flyout.types.ts

@@ -152,6 +152,8 @@ type BaseProps = {
 	contentMaxHeight?: string;
 	/** Maximum width for the content */
 	contentMaxWidth?: string;
+	/** Z-index for the content element */
+	contentZIndex?: number;
 	/** Additional classname for the content element */
 	contentClassName?: string;
 	/** Additional attributes for the content element */
@@ -218,6 +220,7 @@ export type ContextProps = {
 	| "contentGap"
 	| "contentMaxHeight"
 	| "contentMaxWidth"
+	| "contentZIndex"
 	| "trapFocusMode"
 	| "containerRef"
 	| "disableContentHover"

packages/reshaped/src/components/Flyout/FlyoutContent.tsx

@@ -28,6 +28,7 @@ const FlyoutContent: React.FC<T.ContentProps> = (props) => {
 		contentAttributes,
 		contentMaxHeight,
 		contentMaxWidth,
+		contentZIndex,
 		trapFocusMode,
 		disableContentHover,
 		autoFocus,
@@ -71,6 +72,8 @@ const FlyoutContent: React.FC<T.ContentProps> = (props) => {
 		role = "menubar";
 	}
 
+	console.log("contentZIndex", contentZIndex);
+
 	const content = (
 		<ContentProvider value={{ elRef: flyoutElRef }}>
 			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
@@ -80,6 +83,7 @@ const FlyoutContent: React.FC<T.ContentProps> = (props) => {
 					{
 						"--rs-flyout-max-h": contentMaxHeight,
 						"--rs-flyout-max-w": contentMaxWidth,
+						"--rs-flyout-z-index": contentZIndex,
 					} as React.CSSProperties
 				}
 				ref={flyoutElRef}

packages/reshaped/src/components/Flyout/FlyoutControlled.tsx

@@ -49,6 +49,7 @@ const FlyoutControlled: React.FC<T.ControlledProps & T.DefaultProps> = (props) =
 		contentShift,
 		contentMaxHeight,
 		contentMaxWidth,
+		contentZIndex,
 		contentClassName,
 		contentAttributes,
 		position: passedPosition,
@@ -459,6 +460,7 @@ const FlyoutControlled: React.FC<T.ControlledProps & T.DefaultProps> = (props) =
 				handleContentMouseUp,
 				triggerType,
 				trapFocusMode,
+				contentZIndex,
 				contentClassName,
 				contentAttributes,
 				contentGap,

packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx

@@ -640,6 +640,26 @@ export const contentShift = {
 	render: () => <Demo contentShift={10} defaultActive />,
 };
 
+export const contentZIndex = {
+	name: "contentZIndex",
+	render: () => (
+		<View gap={6}>
+			<View direction="row" gap={20}>
+				<Demo contentZIndex={8999} active />
+				<Demo contentZIndex={9001} active />
+			</View>
+			<View
+				backgroundColor="primary-faded"
+				height={100}
+				width={100}
+				borderRadius="medium"
+				position="relative"
+				zIndex={9000}
+			/>
+		</View>
+	),
+};
+
 export const contentMaxHeight = {
 	name: "contentMaxHeight",
 	render: () => (

packages/reshaped/src/components/Popover/Popover.types.ts

@@ -21,6 +21,7 @@ export type Props = Pick<
 	| "contentGap"
 	| "contentShift"
 	| "contentMaxHeight"
+	| "contentZIndex"
 	| "instanceRef"
 	| "triggerType"
 	| "disableHideAnimation"

packages/reshaped/src/components/Tooltip/Tooltip.types.ts

@@ -16,6 +16,7 @@ export type Props = Pick<
 	| "contentGap"
 	| "contentShift"
 	| "contentMaxWidth"
+	| "contentZIndex"
 	| "originCoordinates"
 	| "contentAttributes"
 	| "contentClassName"

packages/utilities/src/flyout/utilities/applyPosition.ts

@@ -155,9 +155,9 @@ const applyPosition = (
 		transform: `translate(${translateX}px, ${translateY}px)`,
 	};
 
-	content.style.cssText = "";
-
 	Object.entries(resolvedStyles).forEach(([key, value]) => {
+		content.style.removeProperty(key);
+
 		if (!value) return;
 		content.style.setProperty(key, value);
 	});