@lumx/react 3.0.3 → 3.0.4-alpha.1

package/src/components/dropdown/Dropdown.tsx

@@ -60,6 +60,8 @@ export interface DropdownProps extends GenericProps {
     placement?: Placement;
     /** Whether the focus should be set on the list when the dropdown is open or not. */
     shouldFocusOnOpen?: boolean;
+    /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+    usePortal?: boolean;
     /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
     focusAnchorOnClose?: boolean;
     /**

package/src/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
 <Popover
   anchorRef={
-    Object {
+    {
       "current": null,
     }
   }
@@ -15,7 +15,7 @@ exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
   fitWithinViewportHeight={true}
   focusAnchorOnClose={true}
   focusElement={
-    Object {
+    {
       "current": null,
     }
   }

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<Flag /> Snapshots and structure should render story 'defaultProps' 1`]
 `;
 
 exports[`<Flag /> Snapshots and structure should render story 'withColor' 1`] = `
-Array [
+[
   <div
     className="lumx-flag lumx-flag--color-blue"
   >

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FlexBox> Snapshots and structure should render story 'Align' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-center lumx-flex-box--h-align-center"
   >
@@ -9,7 +9,7 @@ Array [
       emphasis="high"
       size="m"
       style={
-        Object {
+        {
           "height": 200,
         }
       }
@@ -19,7 +19,7 @@ Array [
     </Button>
     <FlexBox
       style={
-        Object {
+        {
           "height": "fit-content",
         }
       }
@@ -30,7 +30,7 @@ Array [
   <div
     className="lumx-flex-box"
     style={
-      Object {
+      {
         "height": "fit-content",
       }
     }
@@ -40,11 +40,27 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
+<header
+  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
+>
+  <div>
+    Element 1
+  </div>
+  <div>
+    Element 2
+  </div>
+  <div>
+    Element 2
+  </div>
+</header>
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
 <div
   className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
   style={
-    Object {
+    {
       "border": "1px solid red",
       "height": "300px",
       "width": "720px",
@@ -75,24 +91,8 @@ exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`
 </div>
 `;
 
-exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
-<header
-  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
->
-  <div>
-    Element 1
-  </div>
-  <div>
-    Element 2
-  </div>
-  <div>
-    Element 2
-  </div>
-</header>
-`;
-
 exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box"
   >
@@ -141,7 +141,7 @@ Array [
 `;
 
 exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
   >
@@ -221,11 +221,11 @@ Array [
 `;
 
 exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-horizontal"
     style={
-      Object {
+      {
         "border": "1px solid red",
         "height": "300px",
       }
@@ -311,11 +311,11 @@ Array [
 `;
 
 exports[`<FlexBox> Snapshots and structure should render story 'NoShrinkFlex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-horizontal"
     style={
-      Object {
+      {
         "border": "1px solid red",
         "width": "150px",
       }
@@ -350,11 +350,11 @@ Array [
 `;
 
 exports[`<FlexBox> Snapshots and structure should render story 'VerticalFlex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-vertical"
     style={
-      Object {
+      {
         "border": "1px solid red",
         "height": "300px",
       }
@@ -440,11 +440,11 @@ Array [
 `;
 
 exports[`<FlexBox> Snapshots and structure should render story 'WrapFlex' 1`] = `
-Array [
+[
   <div
     className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--wrap"
     style={
-      Object {
+      {
         "border": "1px solid red",
         "width": "150px",
       }

package/src/components/heading/Heading.test.tsx

@@ -1,35 +1,37 @@
 import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import { render, screen } from '@testing-library/react';
 
-import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { Heading, HeadingProps } from './Heading';
 import { HeadingLevelProvider } from './HeadingLevelProvider';
 
+const CLASSNAME = Heading.className as string;
+
 const setup = (props: Partial<HeadingProps> = {}) => {
-    const wrapper = shallow(<Heading {...props} />);
-    return { props, wrapper };
+    const { container } = render(<Heading {...props} />);
+    return { props, container, element: getByClassName(container, CLASSNAME) };
 };
 
 describe(`<${Heading.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
+    describe('Render', () => {
         it('should render a Text component with h1 by default', () => {
-            const { wrapper } = setup({ children: 'Some text' });
-            expect(wrapper).toHaveDisplayName('Text');
-            expect(wrapper).toHaveProp('as', 'h1');
-            expect(wrapper.prop('className')).toBe(Heading.className);
+            setup({ children: 'Some text' });
+            const heading = screen.getByRole('heading', { level: 1, name: 'Some text' });
+            expect(heading).toBeInTheDocument();
+            expect(heading).toHaveClass(CLASSNAME);
         });
 
         it('should render with as', () => {
-            const { wrapper } = setup({ children: 'Some text', as: 'h2' });
-            expect(wrapper).toHaveDisplayName('Text');
-            expect(wrapper).toHaveProp('as', 'h2');
-            expect(wrapper.prop('className')).toBe(Heading.className);
+            setup({ children: 'Some text', as: 'h2' });
+            const heading = screen.getByRole('heading', { level: 2, name: 'Some text' });
+            expect(heading).toBeInTheDocument();
+            expect(heading).toHaveClass(CLASSNAME);
         });
 
         it('should correctly render levels nested in HeadingLevel', () => {
-            const wrapper = mount(
+            render(
                 <>
                     <Heading>Level 1</Heading>
                     <HeadingLevelProvider>
@@ -51,27 +53,30 @@ describe(`<${Heading.displayName}>`, () => {
                             </HeadingLevelProvider>
                         </HeadingLevelProvider>
                     </HeadingLevelProvider>
-                    ,
                 </>,
             );
 
-            expect(wrapper.find('h1')).toHaveText('Level 1');
-            expect(wrapper.find('h2')).toHaveText('Level 2');
-            expect(wrapper.find('h3')).toHaveText('Level 3');
-            expect(wrapper.find('h4')).toHaveText('Level 4');
+            expect(screen.getByRole('heading', { level: 1, name: 'Level 1' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 2, name: 'Level 2' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 3, name: 'Level 3' })).toBeInTheDocument();
+            expect(screen.getByRole('heading', { level: 4, name: 'Level 4' })).toBeInTheDocument();
 
-            const h5 = wrapper.find('h5');
+            const h5 = screen.getAllByRole('heading', { level: 5 });
             expect(h5).toHaveLength(2);
-            expect(h5.at(0)).toHaveText('Level 5 - 1');
-            expect(h5.at(1)).toHaveText('Level 5 - 2');
+            expect(h5[0]).toHaveTextContent('Level 5 - 1');
+            expect(h5[1]).toHaveTextContent('Level 5 - 2');
             // There should be 2 h6 because it is the maximum value;
-            const h6 = wrapper.find('h6');
+            const h6 = screen.getAllByRole('heading', { level: 6 });
             expect(h6).toHaveLength(2);
-            expect(h6.at(0)).toHaveText('Level 6');
-            expect(h6.at(1)).toHaveText('Level 7');
+            expect(h6[0]).toHaveTextContent('Level 6');
+            expect(h6[1]).toHaveTextContent('Level 7');
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Heading.className });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
 });

package/src/components/icon/__snapshots__/Icon.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<Icon> Snapshots and structure should render color & color variant 1`]
     height="1em"
     preserveAspectRatio="xMidYMid meet"
     style={
-      Object {
+      {
         "verticalAlign": "-0.125em",
       }
     }
@@ -33,7 +33,7 @@ exports[`<Icon> Snapshots and structure should render correctly 1`] = `
     height="1em"
     preserveAspectRatio="xMidYMid meet"
     style={
-      Object {
+      {
         "verticalAlign": "-0.125em",
       }
     }

package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageB
     className="lumx-image-block__image"
     fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
     focusPoint={
-      Object {
+      {
         "x": 0,
         "y": 0,
       }

package/src/components/index.ts

@@ -169,3 +169,8 @@ export const Kind = {
     error: 'error',
 } as const;
 export type Kind = ValueOf<typeof Kind>;
+
+/**
+ * Re-exporting some utils types.
+ */
+export type { HeadingElement, TextElement, GenericProps, Callback } from '../utils/type';

package/src/components/inline-list/InlineList.tsx

@@ -62,7 +62,9 @@ export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
             {Children.toArray(children).map((child, index) => {
                 const key = (isValidElement(child) && child.key) || index;
                 return (
-                    <li key={key} className={`${CLASSNAME}__item`}>
+                    // We need to item is set as display: contents which removes the semantic.
+                    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+                    <li key={key} role="listitem" className={`${CLASSNAME}__item`}>
                         {index !== 0 && (
                             <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
                                 {'\u00A0•\u00A0'}

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

@@ -8,7 +8,7 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     aria-modal="true"
     className="lumx-lightbox lumx-lightbox--is-shown"
     style={
-      Object {
+      {
         "zIndex": undefined,
       }
     }
@@ -27,9 +27,9 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     <ClickAwayProvider
       callback={[Function]}
       childrenRefs={
-        Object {
-          "current": Array [
-            Object {
+        {
+          "current": [
+            {
               "current": null,
             },
           ],
@@ -47,11 +47,11 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
           groupBy={1}
           interval={5000}
           slideshowControlsProps={
-            Object {
-              "nextButtonProps": Object {
+            {
+              "nextButtonProps": {
                 "label": "Next",
               },
-              "previousButtonProps": Object {
+              "previousButtonProps": {
                 "label": "Previous",
               },
             }

package/src/components/list/__snapshots__/List.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<List> Snapshots and structure should render story 'AsLink' 1`] = `
     isHighlighted={false}
     key=".0"
     linkProps={
-      Object {
+      {
         "href": "#",
       }
     }
@@ -40,7 +40,7 @@ exports[`<List> Snapshots and structure should render story 'AsLink' 1`] = `
     isHighlighted={false}
     key=".1"
     linkProps={
-      Object {
+      {
         "href": "http://www.google.com",
         "target": "_blank",
       }
@@ -83,7 +83,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     isHighlighted={false}
     key=".2"
     linkProps={
-      Object {
+      {
         "href": "#",
       }
     }
@@ -111,7 +111,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     isHighlighted={false}
     key=".3..2"
     linkProps={
-      Object {
+      {
         "href": "#",
       }
     }
@@ -133,7 +133,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     isDisabled={true}
     key=".4"
     linkProps={
-      Object {
+      {
         "href": "#",
       }
     }
@@ -156,7 +156,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     isHighlighted={false}
     key=".7:$1"
     linkProps={
-      Object {
+      {
         "href": "#",
       }
     }
@@ -190,7 +190,7 @@ exports[`<List> Snapshots and structure should render story 'WithCustomChildren'
 `;
 
 exports[`<List> Snapshots and structure should render story 'WithItemPadding' 1`] = `
-Array [
+[
   <ul
     className="lumx-list lumx-list--item-padding-big"
     tabIndex={-1}
@@ -200,7 +200,7 @@ Array [
       isHighlighted={false}
       key=".0"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }
@@ -225,7 +225,7 @@ Array [
       isHighlighted={false}
       key=".1"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }
@@ -255,7 +255,7 @@ Array [
       isHighlighted={false}
       key=".0"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }
@@ -280,7 +280,7 @@ Array [
       isHighlighted={false}
       key=".1"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }
@@ -310,7 +310,7 @@ Array [
       isHighlighted={false}
       key=".0"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }
@@ -335,7 +335,7 @@ Array [
       isHighlighted={false}
       key=".1"
       linkProps={
-        Object {
+        {
           "href": "#",
         }
       }

package/src/components/notification/__snapshots__/Notification.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<Notification> Snapshots and structure should render defaults 1`] = `
     onClick={[Function]}
     role="alert"
     style={
-      Object {
+      {
         "zIndex": 9999,
       }
     }