@kaizen/components 3.3.10 → 3.3.12

package/dist/cjs/src/MultiSelect/subcomponents/Popover/Popover.cjs

@@ -14,7 +14,20 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * react-aria stamps this attribute on the overlays it owns. Focus-scope guards
+ * (`isElementInChildOfActiveScope`) and `useInteractOutside` treat a marked element — and its
+ * subtree — as part of the top layer, so the outer overlay is not dismissed when focus moves
+ * into the portal.
+ *
+ * The select popover is a plain `createPortal` rather than a react-aria `Overlay`, so nothing
+ * marks it for us. Without this, opening it inside a react-aria overlay (eg. a `MenuPopover`)
+ * closes that overlay as soon as focus enters the portal. See KZN-4210.
+ */
+var TOP_LAYER_ATTRIBUTE = 'data-react-aria-top-layer';
 var Popover = function (_a) {
+  var _b;
   var children = _a.children,
     refs = _a.refs,
     floatingOptions = _a.floatingOptions,
@@ -45,11 +58,11 @@ var Popover = function (_a) {
   return ReactDOM.createPortal(React__default.default.createElement(reactFocusOn.FocusOn, tslib.__assign({
     enabled: false,
     scrollLock: false
-  }, focusOnProps), React__default.default.createElement("div", tslib.__assign({
+  }, focusOnProps), React__default.default.createElement("div", tslib.__assign((_b = {
     ref: refs.setFloating,
     style: floatingStyles,
     className: classnames__default.default(Popover_module.popover, classNameOverride)
-  }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+  }, _b[TOP_LAYER_ATTRIBUTE] = 'true', _b), restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 };
 Popover.displayName = 'Popover';
 exports.Popover = Popover;

package/dist/esm/src/MultiSelect/subcomponents/Popover/Popover.mjs

@@ -5,7 +5,20 @@ import { useFloating, autoUpdate, offset, flip, size } from '@floating-ui/react-
 import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import modules_ef8f756f from './Popover.module.scss.mjs';
+
+/**
+ * react-aria stamps this attribute on the overlays it owns. Focus-scope guards
+ * (`isElementInChildOfActiveScope`) and `useInteractOutside` treat a marked element — and its
+ * subtree — as part of the top layer, so the outer overlay is not dismissed when focus moves
+ * into the portal.
+ *
+ * The select popover is a plain `createPortal` rather than a react-aria `Overlay`, so nothing
+ * marks it for us. Without this, opening it inside a react-aria overlay (eg. a `MenuPopover`)
+ * closes that overlay as soon as focus enters the portal. See KZN-4210.
+ */
+var TOP_LAYER_ATTRIBUTE = 'data-react-aria-top-layer';
 var Popover = function (_a) {
+  var _b;
   var children = _a.children,
     refs = _a.refs,
     floatingOptions = _a.floatingOptions,
@@ -36,11 +49,11 @@ var Popover = function (_a) {
   return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(FocusOn, __assign({
     enabled: false,
     scrollLock: false
-  }, focusOnProps), /*#__PURE__*/React__default.createElement("div", __assign({
+  }, focusOnProps), /*#__PURE__*/React__default.createElement("div", __assign((_b = {
     ref: refs.setFloating,
     style: floatingStyles,
     className: classnames(modules_ef8f756f.popover, classNameOverride)
-  }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+  }, _b[TOP_LAYER_ATTRIBUTE] = 'true', _b), restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 };
 Popover.displayName = 'Popover';
 export { Popover };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.3.10",
+  "version": "3.3.12",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -146,24 +146,24 @@
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.25",
+    "postcss": "^8.5.26",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^11.3.2",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.4.1",
+    "query-string": "^9.5.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-highlight": "^0.15.0",
-    "react-intl": "^10.1.19",
-    "rollup": "^4.62.3",
+    "react-intl": "^10.1.20",
+    "rollup": "^4.62.4",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
     "svgo": "^4.0.2",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
-    "tsx": "^4.23.1",
-    "@kaizen/design-tokens": "11.0.16"
+    "tsx": "^4.23.11",
+    "@kaizen/design-tokens": "11.0.17"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/MultiSelect/subcomponents/Popover/Popover.spec.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import { ariaHideOutside } from '@react-aria/overlays'
 import { render, waitFor } from '@testing-library/react'
 import { Popover, useFloating, type PopoverProps } from './'
 
@@ -51,5 +52,33 @@ describe('<Popover />', () => {
         expect(getByTestId('portal-container')).not.toHaveTextContent('Hello')
       })
     })
+
+    /**
+     * react-aria uses `data-react-aria-top-layer` to exempt an element from dismissal and from
+     * `ariaHideOutside`. This popover is a plain portal, so it marks itself — otherwise opening
+     * it inside a react-aria overlay closes that overlay as soon as focus enters the portal.
+     */
+    describe('react-aria top layer', () => {
+      it('marks the popover itself as part of the top layer', () => {
+        const { getByText } = render(<PopoverWrapper />)
+
+        expect(getByText('Hello')).toHaveAttribute('data-react-aria-top-layer', 'true')
+      })
+
+      it('is not hidden when another overlay isolates the rest of the page', () => {
+        const otherOverlay = document.createElement('div')
+        document.body.appendChild(otherOverlay)
+
+        const { getByText } = render(<PopoverWrapper />)
+        const popover = getByText('Hello')
+
+        const revertAriaHide = ariaHideOutside([otherOverlay])
+
+        expect(popover.closest('[aria-hidden="true"]')).toBeNull()
+
+        revertAriaHide()
+        otherOverlay.remove()
+      })
+    })
   })
 })

package/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -16,6 +16,18 @@ import { type ReactFocusOnProps } from 'react-focus-on/dist/es5/types'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Popover.module.scss'
 
+/**
+ * react-aria stamps this attribute on the overlays it owns. Focus-scope guards
+ * (`isElementInChildOfActiveScope`) and `useInteractOutside` treat a marked element — and its
+ * subtree — as part of the top layer, so the outer overlay is not dismissed when focus moves
+ * into the portal.
+ *
+ * The select popover is a plain `createPortal` rather than a react-aria `Overlay`, so nothing
+ * marks it for us. Without this, opening it inside a react-aria overlay (eg. a `MenuPopover`)
+ * closes that overlay as soon as focus enters the portal. See KZN-4210.
+ */
+const TOP_LAYER_ATTRIBUTE = 'data-react-aria-top-layer'
+
 export type PopoverProps<RT extends ReferenceType = ReferenceType> = {
   children: React.ReactNode
   refs: UseFloatingReturn<RT>['refs']
@@ -65,6 +77,7 @@ export const Popover = <RT extends ReferenceType>({
         ref={refs.setFloating}
         style={floatingStyles}
         className={classnames(styles.popover, classNameOverride)}
+        {...{ [TOP_LAYER_ATTRIBUTE]: 'true' }}
         {...restProps}
       >
         {children}

package/src/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -3,6 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { Button } from '~components/Button'
 import { FieldMessage } from '~components/FieldMessage'
+import { Menu, MenuItem, MenuPopover, MenuTrigger } from '~components/Menu'
 import { ContextModal } from '~components/Modal'
 import { RadioField, RadioGroup } from '~components/Radio'
 import { SingleSelect } from '../SingleSelect'
@@ -339,3 +340,60 @@ export const NativeFormValidationWithSelectedVal: Story = {
     })
   },
 }
+
+/**
+ * The select popover is portalled out of the menu popover, so react-aria's dismissal guards and
+ * its `inert` isolation both have to be told to leave it alone. Without that the menu closes as
+ * soon as the select opens, or the listbox renders but cannot be focused or clicked.
+ */
+export const InsideMenuPopover: Story = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button>Open menu</Button>
+      <MenuPopover>
+        <Menu aria-label="Actions">
+          <MenuItem>An action</MenuItem>
+        </Menu>
+        <div className="p-16">
+          <SingleSelect {...args} label="Coffee" />
+        </div>
+      </MenuPopover>
+    </MenuTrigger>
+  ),
+  parameters: {
+    // Interaction coverage only — the open popovers make for an unstable visual baseline.
+    chromatic: { disable: true },
+    docs: { source: { type: 'code' } },
+  },
+  play: async ({ canvasElement, step }) => {
+    // Both popovers are portalled out of the story root.
+    const canvas = within(canvasElement.parentElement!)
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Open menu' }))
+
+    const selectToggle = await canvas.findByRole('combobox', { name: /Coffee/ })
+
+    await step('Opening the select does not dismiss the menu popover', async () => {
+      await userEvent.click(selectToggle)
+
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', { name: 'An action' })).toBeVisible()
+      })
+    })
+
+    await step('Options are interactive, not inert', async () => {
+      const option = await canvas.findByRole('option', { name: 'Latte' })
+
+      // The `inert` failure mode leaves the listbox visible but non-interactive, so assert the
+      // options are reachable rather than only that they rendered.
+      expect(option.closest('[inert]')).toBeNull()
+
+      await userEvent.click(option)
+
+      await waitFor(() => {
+        expect(selectToggle).toHaveTextContent('Latte')
+        expect(canvas.getByRole('menuitem', { name: 'An action' })).toBeVisible()
+      })
+    })
+  },
+}