fix: Menu and CSSContainerQuery interop

src/core/menu/menu.stories.tsx

@@ -200,3 +200,47 @@ export const PreventingClosure: Story = {
     ),
   },
 }
+
+/**
+ * If a menu item prevents the automatic closure of the menu, it's likely it will need to manually close
+ * the menu itself at some point (e.g., after an asynchrous action has settled). To do this, the menu
+ * element must be used.
+ *
+ * The `Menu.getClosestMenuElement` helper is available to assist with this. For example,
+ *
+ * ```ts
+ * const handleClick = (event: React.MouseEvent) => {
+ *   // Prevent the menu from closing automatically
+ *   event.preventDefault()
+ *   const menu = Menu.getClosestMenuElement(event.currentTarget)
+ *
+ *   await doSomethingAsync()
+ *
+ *   // Close the menu after the async action has completed
+ *   menu?.hidePopover()
+ * }
+ * ```
+ */
+export const ImperativeClosure: Story = {
+  args: {
+    ...Example.args,
+    children: (
+      <>
+        <Menu.Item
+          onClick={async (event) => {
+            event.preventDefault()
+            const menu = Menu.getClosestMenuElement(event.currentTarget)
+
+            // Simulate an async action
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+
+            menu?.hidePopover()
+          }}
+        >
+          I&apos;ll close the menu in a second
+        </Menu.Item>
+        <Menu.Item>But I will</Menu.Item>
+      </>
+    ),
+  },
+}

src/core/menu/menu.tsx

@@ -75,5 +75,5 @@ Menu.Divider = MenuDivider
 Menu.Group = MenuGroup
 Menu.Item = MenuItem
 
-// Make this helper available for convenience.
+Menu.getClosestMenuElement = Popover.getClosestPopoverElement
 Menu.getTriggerProps = Popover.getTriggerProps

src/core/menu/styles.ts

@@ -8,11 +8,14 @@ export const elMenu = css`
 
   padding: var(--spacing-2);
 
-  & > ${ElMenuDivider} {
+  /* NOTE: We do NOT use the immediate child selector here because we want to allow
+     for dividers and menu groups to be nested within other elements. This is primarily
+     to support the use of CSSContainerQuery and it's reliance on a wrapping <div> */
+  & ${ElMenuDivider} {
     margin-inline: calc(0px - var(--spacing-2));
   }
 
-  & > ${ElMenuGroup} {
+  & ${ElMenuGroup} {
     margin-inline: calc(0px - var(--spacing-2));
 
     &:first-child {

src/index.ts

@@ -85,7 +85,6 @@ export * from './core/checkbox-group'
 export * from './core/chip'
 export * from './core/chip-group'
 export * from './core/compact-select-native'
-export * from './core/container-query'
 export * from './core/dialog'
 export * from './core/drawer'
 export * from './core/empty-data'

src/storybook/changelog.mdx

@@ -19,6 +19,9 @@ Beta versions should be relatively stable but subject to occssional breaking cha
 ### **5.0.0-beta.44 - ??/??/25**
 
 - **fix:** App Switcher now accepts standard button attributes and fowards them to the underlying trigger button.
+- **fix:** Menu groups and dividers will be correctly styled even if they are not direct descendants of the Menu.
+- **feat:** Added `Menu.getClosestMenuElement` helper function to allow menu items to more easily find their parent menu. This is particularly useful for menu items that need to manually close the menu.
+- **chore!:** Moves `@reapit/elements/core/container-query` to `@reapit/elements/utils/css-container-query` to align with it's actual name (`CSSContainerQuery`) and the fact its not a "core" component.
 
 ### **5.0.0-beta.43 - 12/08/25**
 

src/core/container-query/__tests__/__snapshots__/container-query.test.tsx.snap → src/utils/css-container-query/__tests__/__snapshots__/css-container-query.test.tsx.snap

@@ -1,19 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ContainerQuery > renders correctly and matches snapshot 1`] = `
+exports[`renders correctly and matches snapshot 1`] = `
 <DocumentFragment>
   <style>
 
-         .el-container-query-1 {
+        .el-css-container-query-1 {
           display: contents;
 
           @container (max-width: 600px)  {
             display: none;
           }
-      }
+        }
+
   </style>
   <div
-    class="el-container-query-1"
+    class="el-css-container-query-1"
   >
     <p>
       Snapshot Test Content

src/utils/css-container-query/__tests__/css-container-query.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import { CSSContainerQuery } from '../css-container-query'
+
+test('renders correctly and matches snapshot', () => {
+  const { asFragment } = render(
+    <CSSContainerQuery condition="(max-width: 600px)">
+      <p>Snapshot Test Content</p>
+    </CSSContainerQuery>,
+  )
+
+  expect(asFragment()).toMatchSnapshot()
+})

src/core/container-query/container-query.tsx → src/utils/css-container-query/css-container-query.tsx

@@ -16,17 +16,16 @@ export const CSSContainerQuery: FC<CSSContainerQueryProps> = ({ children, condit
   const id = useRef(baseId++)
   return (
     <>
-      <style>
-        {`
-         .el-container-query-${id.current} {
+      <style>{`
+        .el-css-container-query-${id.current} {
           display: contents;
 
           @container ${condition}  {
             display: none;
           }
-      }`}
-      </style>
-      <div className={`el-container-query-${id.current}`}>{children}</div>
+        }
+      `}</style>
+      <div className={`el-css-container-query-${id.current}`}>{children}</div>
     </>
   )
 }

src/utils/css-container-query/index.ts

@@ -0,0 +1 @@
+export * from './css-container-query'

src/utils/index.ts

@@ -1,4 +1,7 @@
 export * from './breakpoints'
+export * from './css-container-query'
+export * from './keyboard-navigation'
 export * from './match-media'
+export * from './path'
 export * from './popover'
 export * from './url-search-params'

src/utils/popover/__tests__/get-closest-popover-element.test.ts

@@ -0,0 +1,52 @@
+import { getClosestPopoverElement } from '../get-closest-popover-element'
+
+test('returns the element itself if it has a popover attribute', () => {
+  const element = document.createElement('div')
+  element.setAttribute('popover', 'auto')
+
+  expect(getClosestPopoverElement(element)).toBe(element)
+})
+
+test('returns the closest ancestor with popover attribute', () => {
+  const grandparent = document.createElement('div')
+  grandparent.setAttribute('popover', 'auto')
+
+  const parent = document.createElement('div')
+  const child = document.createElement('div')
+
+  grandparent.appendChild(parent)
+  parent.appendChild(child)
+
+  expect(getClosestPopoverElement(child)).toBe(grandparent)
+})
+
+test('returns null when no ancestor has popover attribute', () => {
+  const parent = document.createElement('div')
+  const child = document.createElement('div')
+
+  parent.appendChild(child)
+
+  expect(getClosestPopoverElement(child)).toBeNull()
+})
+
+test('works with popover="manual"', () => {
+  const element = document.createElement('div')
+  element.setAttribute('popover', 'manual')
+
+  expect(getClosestPopoverElement(element)).toBe(element)
+})
+
+test('returns the first popover ancestor when multiple exist', () => {
+  const outerPopover = document.createElement('div')
+  outerPopover.setAttribute('popover', 'auto')
+
+  const innerPopover = document.createElement('div')
+  innerPopover.setAttribute('popover', 'manual')
+
+  const child = document.createElement('div')
+
+  outerPopover.appendChild(innerPopover)
+  innerPopover.appendChild(child)
+
+  expect(getClosestPopoverElement(child)).toBe(innerPopover)
+})

src/utils/popover/get-closest-popover-element.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns the closest ancestor acting as a popover for the given element. Useful in event
+ * handlers when needing to imperatively control the popover from one of its descendants.
+ */
+export function getClosestPopoverElement(element: HTMLElement): HTMLElement | null {
+  return element.closest('[popover]')
+}

src/utils/popover/popover.tsx

@@ -2,6 +2,7 @@ import { applyCSSAnchorPositioningPolyfill } from '#src/polyfills/css-anchor-pos
 import { buildAnchorPositioningCSS } from './build-anchor-positioning-css'
 import { cx } from '@linaria/core'
 import { elPopover } from './styles'
+import { getClosestPopoverElement } from './get-closest-popover-element'
 import { getPopoverTriggerProps } from './get-popover-trigger-props'
 import { useLayoutEffect, useRef } from 'react'
 
@@ -150,3 +151,4 @@ export function Popover({
 }
 
 Popover.getTriggerProps = getPopoverTriggerProps
+Popover.getClosestPopoverElement = getClosestPopoverElement