feat(Overlay/Modal): keep position fixed

.changeset/shaky-eagles-rescue.md

@@ -0,0 +1,5 @@
+---
+"reshaped": minor
+---
+
+Modal/Overlay: Adding the contained prop to control whether the component should be contained within the container element.

packages/reshaped/src/components/Modal/Modal.tsx

@@ -80,6 +80,7 @@ const Modal: React.FC<T.Props> = (props) => {
 		disableSwipeGesture,
 		disableCloseOnOutsideClick,
 		containerRef,
+		contained,
 		overlayClassName,
 		className,
 		attributes,
@@ -99,6 +100,7 @@ const Modal: React.FC<T.Props> = (props) => {
 	const [dragDistance, setDragDistance] = React.useState(0);
 	const [hideProgress, setHideProgress] = React.useState(0);
 	const mixinStyles = resolveMixin({ padding });
+	const shouldBeContained = containerRef && contained !== false;
 
 	const value = React.useMemo(
 		() => ({
@@ -247,6 +249,7 @@ const Modal: React.FC<T.Props> = (props) => {
 			blurred={blurredOverlay}
 			overflow={clientPosition === "center" ? "auto" : "hidden"}
 			className={overlayClassName}
+			contained={contained}
 			containerRef={containerRef}
 			attributes={{
 				onTouchStart: handleDragStart,
@@ -259,7 +262,7 @@ const Modal: React.FC<T.Props> = (props) => {
 					active && s["--active"],
 					dragging && s["--dragging"],
 					overflow && s[`--overflow-${overflow}`],
-					containerRef && s["--contained"],
+					shouldBeContained && s["--contained"],
 					responsiveClassNames(s, "--position", position),
 					mixinStyles.classNames
 				);

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

@@ -53,4 +53,7 @@ export type Props = {
 	overlayClassName?: G.ClassName;
 	/** Additional attributes for the root element */
 	attributes?: G.Attributes<"div"> & { ref?: React.RefObject<HTMLDivElement | null> };
-} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;
+} & Pick<
+	OverlayProps,
+	"onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef" | "contained"
+>;

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

@@ -212,8 +212,10 @@ export const containerRef = {
 	render: () => {
 		const containerRef = React.useRef<HTMLDivElement>(null);
 		const containerRef2 = React.useRef<HTMLDivElement>(null);
+		const containerRef3 = React.useRef<HTMLDivElement>(null);
 		const toggle = useToggle();
 		const toggle2 = useToggle();
+		const toggle3 = useToggle();
 
 		return (
 			<Example>
@@ -260,6 +262,27 @@ export const containerRef = {
 						</Modal>
 					</View>
 				</Example.Item>
+				<Example.Item title="ignoring container size">
+					<View
+						attributes={{ ref: containerRef3 }}
+						borderRadius="medium"
+						height="400px"
+						overflow="hidden"
+						backgroundColor="neutral-faded"
+						padding={4}
+					>
+						<Button onClick={toggle3.activate}>Open modal</Button>
+						<Modal
+							contained={false}
+							containerRef={containerRef3}
+							active={toggle3.active}
+							onClose={toggle3.deactivate}
+							position="end"
+						>
+							<Placeholder />
+						</Modal>
+					</View>
+				</Example.Item>
 			</Example>
 		);
 	},

packages/reshaped/src/components/Overlay/Overlay.tsx

@@ -31,6 +31,7 @@ const Overlay: React.FC<T.Props> = (props) => {
 		onAfterOpen,
 		disableCloseOnClick,
 		containerRef,
+		contained,
 		className,
 		attributes,
 	} = props;
@@ -57,14 +58,15 @@ const Overlay: React.FC<T.Props> = (props) => {
 	const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
 	const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
 	const isDismissible = useIsDismissible({ active, contentRef, hasTrigger: false });
+	const shouldBeContained = containerRef && contained !== false;
 
 	const rootClassNames = classNames(
 		s.root,
 		visible && s["--visible"],
 		isTransparent && s["--click-through"],
 		blurred && s["--blurred"],
 		animated && s["--animated"],
-		containerRef && s["--contained"],
+		shouldBeContained && s["--contained"],
 		overflow === "auto" && s["--overflow-auto"],
 		className
 	);

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

@@ -26,6 +26,8 @@ export type Props = {
 	disableCloseOnClick?: boolean;
 	/** Element to render the component in */
 	containerRef?: React.RefObject<HTMLElement | null>;
+	/** Contain the component within the container element. Defaults to true when containerRef is provided */
+	contained?: boolean;
 	/** Additional classname for the root element */
 	className?: G.ClassName;
 	/** Additional attributes for the root element */

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

@@ -264,6 +264,29 @@ export const containerRef: StoryObj = {
 	},
 };
 
+export const containerRefNotContained: StoryObj = {
+	name: "containerRef with contained={false}",
+	render: () => {
+		const containerRef = React.useRef<HTMLDivElement>(null);
+
+		return (
+			<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }} />
+				<Overlay active containerRef={containerRef} contained={false}>
+					Content
+				</Overlay>
+			</>
+		);
+	},
+	play: ({ canvasElement }) => {
+		const canvas = within(canvasElement.ownerDocument.body);
+		const container = canvas.getByTestId("test-id");
+		const overlay = canvas.getByText("Content");
+
+		expect(container).toContainElement(overlay);
+	},
+};
+
 export const className: StoryObj = {
 	name: "className, attributes",
 	render: () => (