From c3ba2b5acd0375a954669a52cbca003040939eec Mon Sep 17 00:00:00 2001 From: Dima Belyaev Date: Sat, 17 Jan 2026 11:14:27 +0000 Subject: [PATCH] Flyout: contentZIndex --- .changeset/plenty-colts-lie.md | 5 +++++ packages/{headless => core}/CHANGELOG.md | 0 packages/{headless => core}/package.json | 0 packages/{headless => core}/src/index.ts | 0 packages/{headless => core}/tsconfig.json | 0 .../components/Autocomplete/Autocomplete.tsx | 2 ++ .../Autocomplete/Autocomplete.types.ts | 1 + .../DropdownMenu/DropdownMenu.types.ts | 1 + .../src/components/Flyout/Flyout.module.css | 3 ++- .../src/components/Flyout/Flyout.types.ts | 3 +++ .../src/components/Flyout/FlyoutContent.tsx | 4 ++++ .../components/Flyout/FlyoutControlled.tsx | 2 ++ .../Flyout/tests/Flyout.stories.tsx | 20 +++++++++++++++++++ .../src/components/Popover/Popover.types.ts | 1 + .../src/components/Tooltip/Tooltip.types.ts | 1 + .../src/flyout/utilities/applyPosition.ts | 4 ++-- pnpm-lock.yaml | 2 +- 17 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 .changeset/plenty-colts-lie.md rename packages/{headless => core}/CHANGELOG.md (100%) rename packages/{headless => core}/package.json (100%) rename packages/{headless => core}/src/index.ts (100%) rename packages/{headless => core}/tsconfig.json (100%) diff --git a/.changeset/plenty-colts-lie.md b/.changeset/plenty-colts-lie.md new file mode 100644 index 00000000..dd47d375 --- /dev/null +++ b/.changeset/plenty-colts-lie.md @@ -0,0 +1,5 @@ +--- +"reshaped": minor +--- + +Flyout, Popover, DropdownMenu, Tooltip, ContextMenu, Autocomplete: Added contentZIndex property diff --git a/packages/headless/CHANGELOG.md b/packages/core/CHANGELOG.md similarity index 100% rename from packages/headless/CHANGELOG.md rename to packages/core/CHANGELOG.md diff --git a/packages/headless/package.json b/packages/core/package.json similarity index 100% rename from packages/headless/package.json rename to packages/core/package.json diff --git a/packages/headless/src/index.ts b/packages/core/src/index.ts similarity index 100% rename from packages/headless/src/index.ts rename to packages/core/src/index.ts diff --git a/packages/headless/tsconfig.json b/packages/core/tsconfig.json similarity index 100% rename from packages/headless/tsconfig.json rename to packages/core/tsconfig.json diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx index a6d72b41..db4fd731 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx @@ -36,6 +36,7 @@ const Autocomplete: React.FC = (props) => { fallbackMinWidth, fallbackMinHeight, contentMaxHeight, + contentZIndex, ...textFieldProps } = props; const [highlightedId, setHighlightedId] = React.useState(); @@ -194,6 +195,7 @@ const Autocomplete: React.FC = (props) => { fallbackMinWidth={fallbackMinWidth} fallbackMinHeight={fallbackMinHeight} contentMaxHeight={contentMaxHeight} + contentZIndex={contentZIndex} disableHideAnimation instanceRef={instanceRef} > diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts index d1fbb688..8bdecf73 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts +++ b/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"]; diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts index 46d01f14..66dd7ace 100644 --- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts +++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts @@ -18,6 +18,7 @@ export type Props = Pick< | "contentGap" | "contentShift" | "contentMaxHeight" + | "contentZIndex" | "onOpen" | "onClose" | "active" diff --git a/packages/reshaped/src/components/Flyout/Flyout.module.css b/packages/reshaped/src/components/Flyout/Flyout.module.css index fe5d1004..64d69384 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.module.css +++ b/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; diff --git a/packages/reshaped/src/components/Flyout/Flyout.types.ts b/packages/reshaped/src/components/Flyout/Flyout.types.ts index 0cf53138..77cbaaa6 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.types.ts +++ b/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" diff --git a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx index 36e763fe..286b786c 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx @@ -28,6 +28,7 @@ const FlyoutContent: React.FC = (props) => { contentAttributes, contentMaxHeight, contentMaxWidth, + contentZIndex, trapFocusMode, disableContentHover, autoFocus, @@ -71,6 +72,8 @@ const FlyoutContent: React.FC = (props) => { role = "menubar"; } + console.log("contentZIndex", contentZIndex); + const content = ( {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */} @@ -80,6 +83,7 @@ const FlyoutContent: React.FC = (props) => { { "--rs-flyout-max-h": contentMaxHeight, "--rs-flyout-max-w": contentMaxWidth, + "--rs-flyout-z-index": contentZIndex, } as React.CSSProperties } ref={flyoutElRef} diff --git a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx index 1e2a0a21..1c0ac91f 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx @@ -49,6 +49,7 @@ const FlyoutControlled: React.FC = (props) = contentShift, contentMaxHeight, contentMaxWidth, + contentZIndex, contentClassName, contentAttributes, position: passedPosition, @@ -459,6 +460,7 @@ const FlyoutControlled: React.FC = (props) = handleContentMouseUp, triggerType, trapFocusMode, + contentZIndex, contentClassName, contentAttributes, contentGap, diff --git a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx index 5c27794f..f48150e0 100644 --- a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx +++ b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx @@ -640,6 +640,26 @@ export const contentShift = { render: () => , }; +export const contentZIndex = { + name: "contentZIndex", + render: () => ( + + + + + + + + ), +}; + export const contentMaxHeight = { name: "contentMaxHeight", render: () => ( diff --git a/packages/reshaped/src/components/Popover/Popover.types.ts b/packages/reshaped/src/components/Popover/Popover.types.ts index e89f270d..a985e808 100644 --- a/packages/reshaped/src/components/Popover/Popover.types.ts +++ b/packages/reshaped/src/components/Popover/Popover.types.ts @@ -21,6 +21,7 @@ export type Props = Pick< | "contentGap" | "contentShift" | "contentMaxHeight" + | "contentZIndex" | "instanceRef" | "triggerType" | "disableHideAnimation" diff --git a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts index 4c5268c0..2e54be12 100644 --- a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts +++ b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts @@ -16,6 +16,7 @@ export type Props = Pick< | "contentGap" | "contentShift" | "contentMaxWidth" + | "contentZIndex" | "originCoordinates" | "contentAttributes" | "contentClassName" diff --git a/packages/utilities/src/flyout/utilities/applyPosition.ts b/packages/utilities/src/flyout/utilities/applyPosition.ts index 2ae699b5..c609019c 100644 --- a/packages/utilities/src/flyout/utilities/applyPosition.ts +++ b/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); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37ba8d63..dc52af2a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,7 +186,7 @@ importers: specifier: 2.0.2 version: 2.0.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vitest@4.0.16) - packages/headless: + packages/core: dependencies: '@reshaped/utilities': specifier: workspace:*