@lumx/react 3.11.3 → 3.11.4-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.3",
-        "@lumx/icons": "^3.11.3",
+        "@lumx/core": "^3.11.4-alpha.0",
+        "@lumx/icons": "^3.11.4-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.11.3"
+    "version": "3.11.4-alpha.0"
 }

package/src/components/dialog/Dialog.test.tsx

@@ -6,6 +6,7 @@ import { render, screen } from '@testing-library/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 
 const CLASSNAME = Dialog.className as string;
 
@@ -33,6 +34,21 @@ describe(`<${Dialog.displayName}>`, () => {
         expect(container).toHaveAttribute('aria-modal', 'true');
     });
 
+    it('should have reset the heading level context', () => {
+        setup(
+            // Heading inside the dialog
+            { children: <Heading>Title</Heading> },
+            {
+                // This level context should not affect headings inside the dialog
+                wrapper({ children }) {
+                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
+                },
+            },
+        );
+        // Heading inside should use the dialog heading level 2
+        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
+
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
             const onClose = jest.fn();

package/src/components/dialog/Dialog.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
-import { Progress, ProgressVariant, Size } from '@lumx/react';
+import { HeadingLevelProvider, Progress, ProgressVariant, Size } from '@lumx/react';
 
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
@@ -212,67 +212,77 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
               >
                   <div className={`${CLASSNAME}__overlay`} />
 
-                  <ThemeProvider value={undefined}>
-                      <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                          <ClickAwayProvider
-                              callback={!shouldPreventCloseOnClickAway && onClose}
-                              childrenRefs={clickAwayRefs}
-                              parentRef={rootRef}
+                  <HeadingLevelProvider level={2}>
+                      <ThemeProvider value={undefined}>
+                          <section
+                              className={`${CLASSNAME}__container`}
+                              role="dialog"
+                              aria-modal="true"
+                              {...dialogProps}
                           >
-                              <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
-                                  {(header || headerChildContent) && (
-                                      <header
-                                          {...headerChildProps}
-                                          className={classNames(
-                                              `${CLASSNAME}__header`,
-                                              (forceHeaderDivider || hasTopIntersection) &&
-                                                  `${CLASSNAME}__header--has-divider`,
-                                              headerChildProps?.className,
-                                          )}
-                                      >
-                                          {header}
-                                          {headerChildContent}
-                                      </header>
-                                  )}
+                              <ClickAwayProvider
+                                  callback={!shouldPreventCloseOnClickAway && onClose}
+                                  childrenRefs={clickAwayRefs}
+                                  parentRef={rootRef}
+                              >
+                                  <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
+                                      {(header || headerChildContent) && (
+                                          <header
+                                              {...headerChildProps}
+                                              className={classNames(
+                                                  `${CLASSNAME}__header`,
+                                                  (forceHeaderDivider || hasTopIntersection) &&
+                                                      `${CLASSNAME}__header--has-divider`,
+                                                  headerChildProps?.className,
+                                              )}
+                                          >
+                                              {header}
+                                              {headerChildContent}
+                                          </header>
+                                      )}
 
-                                  <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
                                       <div
-                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
-                                          ref={setSentinelTop}
-                                      />
-
-                                      {content}
+                                          ref={mergeRefs(contentRef, localContentRef)}
+                                          className={`${CLASSNAME}__content`}
+                                      >
+                                          <div
+                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
+                                              ref={setSentinelTop}
+                                          />
 
-                                      <div
-                                          className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
-                                          ref={setSentinelBottom}
-                                      />
-                                  </div>
+                                          {content}
 
-                                  {(footer || footerChildContent) && (
-                                      <footer
-                                          {...footerChildProps}
-                                          className={classNames(
-                                              `${CLASSNAME}__footer`,
-                                              (forceFooterDivider || hasBottomIntersection) &&
-                                                  `${CLASSNAME}__footer--has-divider`,
-                                              footerChildProps?.className,
-                                          )}
-                                      >
-                                          {footer}
-                                          {footerChildContent}
-                                      </footer>
-                                  )}
-
-                                  {isLoading && (
-                                      <div className={`${CLASSNAME}__progress-overlay`}>
-                                          <Progress variant={ProgressVariant.circular} />
+                                          <div
+                                              className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}
+                                              ref={setSentinelBottom}
+                                          />
                                       </div>
-                                  )}
-                              </div>
-                          </ClickAwayProvider>
-                      </section>
-                  </ThemeProvider>
+
+                                      {(footer || footerChildContent) && (
+                                          <footer
+                                              {...footerChildProps}
+                                              className={classNames(
+                                                  `${CLASSNAME}__footer`,
+                                                  (forceFooterDivider || hasBottomIntersection) &&
+                                                      `${CLASSNAME}__footer--has-divider`,
+                                                  footerChildProps?.className,
+                                              )}
+                                          >
+                                              {footer}
+                                              {footerChildContent}
+                                          </footer>
+                                      )}
+
+                                      {isLoading && (
+                                          <div className={`${CLASSNAME}__progress-overlay`}>
+                                              <Progress variant={ProgressVariant.circular} />
+                                          </div>
+                                      )}
+                                  </div>
+                              </ClickAwayProvider>
+                          </section>
+                      </ThemeProvider>
+                  </HeadingLevelProvider>
               </div>,
               document.body,
           )

package/src/components/lightbox/Lightbox.test.tsx

@@ -5,6 +5,7 @@ import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
 
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { Lightbox, LightboxProps } from './Lightbox';
 
 const CLASSNAME = Lightbox.className as string;
@@ -22,6 +23,23 @@ const setup = (props: Partial<LightboxProps> = {}, { wrapper }: SetupRenderOptio
 };
 
 describe(`<${Lightbox.displayName}>`, () => {
+    it('should have reset the heading level context', () => {
+        setup(
+            {
+                // Heading inside the lightbox
+                children: <Heading>Title</Heading>,
+            },
+            {
+                // This level context should not affect headings inside the lightbox
+                wrapper({ children }) {
+                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
+                },
+            },
+        );
+        // Heading inside should use the lightbox heading level 2
+        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/lightbox/Lightbox.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { IconButton, IconButtonProps } from '@lumx/react';
+import { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -162,13 +162,15 @@ export const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) =
                     />
                 </div>
             )}
-            <ThemeProvider value={undefined}>
-                <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
-                    <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
-                        {children}
-                    </div>
-                </ClickAwayProvider>
-            </ThemeProvider>
+            <HeadingLevelProvider level={2}>
+                <ThemeProvider value={undefined}>
+                    <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
+                        <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
+                            {children}
+                        </div>
+                    </ClickAwayProvider>
+                </ThemeProvider>
+            </HeadingLevelProvider>
         </div>,
         document.body,
     );

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -40,7 +40,7 @@ export const WithButtonTrigger = (props: any) => {
 /**
  * Example PopoverDialog using an icon button as a trigger
  */
-export const WithIconButtonTrigger = (props: any) => {
+export const WithIconButtonTrigger = ({ children, ...props }: any) => {
     const anchorRef = React.useRef(null);
     const [isOpen, close, open] = useBooleanState(false);
 
@@ -57,6 +57,7 @@ export const WithIconButtonTrigger = (props: any) => {
                 {...props}
             >
                 <Button onClick={close}>Close</Button>
+                {children}
             </PopoverDialog>
         </>
     );

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { PopoverDialog } from './PopoverDialog';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
+import { PopoverDialog } from './PopoverDialog';
 
 jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
@@ -117,4 +118,23 @@ describe(`<${PopoverDialog.displayName}>`, () => {
         // Focus restored to the trigger element
         expect(triggerElement).toHaveFocus();
     });
+
+    it('should have reset the heading level context', async () => {
+        render(
+            // This level context should not affect headings inside the popover dialog
+
+            <HeadingLevelProvider level={3}>
+                <WithIconButtonTrigger>
+                    {/* Heading inside the popover dialog */}
+                    <Heading>Title</Heading>
+                </WithIconButtonTrigger>
+            </HeadingLevelProvider>,
+        );
+
+        // Open popover
+        await userEvent.click(screen.getByRole('button', { name: 'Open popover' }));
+
+        // Heading inside should use the popover dialog heading level 2
+        expect(screen.getByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
 });

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -6,6 +6,7 @@ import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
 import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { HeadingLevelProvider } from '@lumx/react/components/heading';
 import { Popover, PopoverProps } from '../popover/Popover';
 
 /**
@@ -65,7 +66,7 @@ export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((pro
             closeOnEscape
             withFocusTrap
         >
-            {children}
+            <HeadingLevelProvider level={2}>{children}</HeadingLevelProvider>
         </Popover>
     );
 });