@lumx/react 2.2.19 → 2.2.20-alpha-type.1

package/src/components/generic-block/__snapshots__/GenericBlock.test.tsx.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GenericBlock> Snapshots and structure should render story 'Default' 1`] = `
+Array [
+  <FlexBox
+    className="lumx-generic-block"
+    gap="regular"
+    hAlign="center"
+    orientation="vertical"
+    vAlign="center"
+  >
+    <FlexBox
+      className="lumx-generic-block__figure"
+    >
+      <Avatar
+        alt=""
+        image="/demo-assets/persona.png"
+        size="m"
+        theme="light"
+      />
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__content"
+      fillSpace={true}
+      orientation="vertical"
+      vAlign="center"
+    >
+      <h2>
+        Content title
+      </h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
+      </p>
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__actions"
+      vAlign="center"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Actions
+      </Button>
+    </FlexBox>
+  </FlexBox>,
+  <FlexBox
+    className="lumx-generic-block"
+    gap="regular"
+    hAlign="center"
+    orientation="horizontal"
+    vAlign="center"
+  >
+    <FlexBox
+      className="lumx-generic-block__figure"
+    >
+      <Avatar
+        alt=""
+        image="/demo-assets/persona.png"
+        size="m"
+        theme="light"
+      />
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__content"
+      fillSpace={true}
+      orientation="vertical"
+      vAlign="left"
+    >
+      <h2>
+        Content title
+      </h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus libero aliquet pharetra luctus. Fusce nisl turpis, posuere ac tellus at, euismod vulputate libero...
+      </p>
+    </FlexBox>
+    <FlexBox
+      className="lumx-generic-block__actions"
+      vAlign="right"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Actions
+      </Button>
+    </FlexBox>
+  </FlexBox>,
+]
+`;

package/src/components/generic-block/index.ts

@@ -0,0 +1 @@
+export * from './GenericBlock';

package/src/components/lightbox/Lightbox.tsx

@@ -87,7 +87,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
 
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
+    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const previousOpen = useRef(isOpen);

package/src/components/link-preview/LinkPreview.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils';
-import { Thumbnail } from '@lumx/react';
+import { Link, Thumbnail } from '@lumx/react';
 
 import { Size, Theme } from '..';
 import { LinkPreview, LinkPreviewProps } from './LinkPreview';
@@ -25,81 +25,76 @@ const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
 
     return {
         thumbnail: wrapper.find(Thumbnail),
+        title: wrapper.find(`.${CLASSNAME}__title`),
+        description: wrapper.find(`.${CLASSNAME}__description`),
+        link: wrapper.find(`.${CLASSNAME}__link`).find(Link),
         props,
         wrapper,
     };
 };
 
 describe(`<${LinkPreview.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
+    it('should render with default props', () => {
+        const { wrapper, thumbnail, title, link, description } = setup();
+        expect(wrapper).toHaveClassName(CLASSNAME);
 
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
+        ['size', 'theme'].forEach((type) => {
+            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type, value: DEFAULT_PROPS[type] }));
         });
+        expect(thumbnail).not.toExist();
+        expect(title).not.toExist();
+        expect(link).toExist();
+        expect(link).toHaveProp('tabIndex', undefined);
+        expect(description).not.toExist();
+    });
 
-        it('should render correctly', () => {
-            const { wrapper } = setup({ size: Size.big });
-            expect(wrapper).toMatchSnapshot();
+    it('should render with only the title', () => {
+        const { title, link } = setup({ title: 'Title' });
 
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
+        expect(title).toExist();
+        expect(link).toExist();
+        expect(link).toHaveProp('tabIndex', '-1');
     });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use default props', () => {
-            const { wrapper, thumbnail } = setup();
-            ['size', 'theme'].forEach((prop: string) => {
-                expect(wrapper).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
-            expect(thumbnail).not.toExist();
+    it('should render with complete props', () => {
+        const { wrapper, thumbnail, title, link, description, props } = setup({
+            size: Size.big,
+            theme: Theme.dark,
+            thumbnailProps: { image: 'https://example.com/thumbnail.jpg', alt: '' },
+            link: 'https://example.com',
+            linkProps: { 'data-custom-attr': 'true' },
+            title: 'Title',
+            description: 'Description',
         });
 
-        it('should pass className prop to the wrapper', () => {
-            const expectedClassName = 'must-be-set';
-            const { wrapper } = setup({ className: expectedClassName });
-
-            expect(wrapper).toHaveClassName(expectedClassName);
-        });
+        const validateLink = (linkElement: any) => {
+            expect(linkElement).toHaveProp('href', props.link);
+            // Props forwarding
+            expect(linkElement).toHaveProp('data-custom-attr', 'true');
+        };
 
-        it('should set --theme-dark class variant on wrapper if theme = Theme.dark', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
+        expect(wrapper).toExist();
 
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
-        });
-    });
+        // Thumbnail
+        expect(thumbnail).toExist();
+        validateLink((thumbnail as any).dive());
 
-    // 3. Test events.
-    describe('Events', () => {
-        const expectedUrl = 'https://expected.url';
-        const { thumbnail } = setup({
-            link: expectedUrl,
-            thumbnailProps: { image: 'https://expected.url/image.png', alt: 'Alt' },
-        });
-        window.open = jest.fn();
+        // Title
+        expect(title).toHaveText(props.title);
+        validateLink(title.find(Link));
 
-        thumbnail.simulate('click');
+        // Link
+        expect(link).toHaveText(props.link);
+        validateLink(link.find(Link));
 
-        expect(window.open).toHaveBeenCalledWith(expectedUrl, '_blank');
-    });
+        // Description
+        expect(description).toHaveText(props.description);
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
+        // Size prop applied
+        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'size', value: props.size }));
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+        // Dark theme applied
+        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
     });
 
     // Common tests suite.

package/src/components/link-preview/LinkPreview.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
@@ -14,16 +14,18 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
 export interface LinkPreviewProps extends GenericProps {
-    /** Description (either a string, or sanitized html). */
-    description?: string | { __html: string };
+    /** Description. */
+    description?: string;
     /** Link URL. */
     link: string;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
     /** Props to pass to the link (minus those already set by the LinkPreview props). */
     linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
     /** Size variant. */
@@ -34,6 +36,8 @@ export interface LinkPreviewProps extends GenericProps {
     thumbnailProps?: ThumbnailProps;
     /** Title. */
     title?: string;
+    /** Customize the title heading tag. */
+    titleHeading?: HeadingElement;
 }
 
 /**
@@ -49,10 +53,11 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<LinkPreviewProps> = {
+const DEFAULT_PROPS = {
     size: Size.regular,
     theme: Theme.light,
-};
+    titleHeading: 'h2',
+} as const;
 
 /**
  * LinkPreview component.
@@ -62,13 +67,24 @@ const DEFAULT_PROPS: Partial<LinkPreviewProps> = {
  * @return React element.
  */
 export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, description, link, linkProps, size, theme, thumbnailProps, title, ...forwardedProps } = props;
-
-    //TODO: a11y
-    const goToUrl = useCallback(() => window.open(link, '_blank'), [link]);
+    const {
+        className,
+        description,
+        link,
+        linkAs,
+        linkProps,
+        size,
+        theme,
+        thumbnailProps,
+        title,
+        titleHeading,
+        ...forwardedProps
+    } = props;
+    // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
+    const TitleHeading = titleHeading as HeadingElement;
 
     return (
-        <div
+        <article
             ref={ref}
             {...forwardedProps}
             className={classNames(
@@ -85,8 +101,14 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                     <div className={`${CLASSNAME}__thumbnail`}>
                         <Thumbnail
                             {...thumbnailProps}
-                            onClick={goToUrl}
-                            role="link"
+                            linkAs={linkAs}
+                            linkProps={{
+                                ...linkProps,
+                                href: link,
+                                target: '_blank',
+                                // Avoid redundant links in focus order
+                                tabIndex: -1,
+                            }}
                             aspectRatio={AspectRatio.free}
                             fillHeight
                         />
@@ -95,9 +117,10 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
 
                 <div className={`${CLASSNAME}__container`}>
                     {title && (
-                        <div className={`${CLASSNAME}__title`}>
+                        <TitleHeading className={`${CLASSNAME}__title`}>
                             <Link
                                 {...linkProps}
+                                linkAs={linkAs}
                                 target="_blank"
                                 href={link}
                                 color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}
@@ -105,25 +128,29 @@ export const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((p
                             >
                                 {title}
                             </Link>
-                        </div>
+                        </TitleHeading>
                     )}
+
                     {description && <p className={`${CLASSNAME}__description`}>{description}</p>}
 
                     <div className={`${CLASSNAME}__link`}>
                         <Link
                             {...linkProps}
+                            linkAs={linkAs}
                             className={classNames(`${CLASSNAME}__link`, linkProps?.className)}
                             target="_blank"
                             href={link}
                             color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}
                             colorVariant={ColorVariant.N}
+                            // Avoid redundant links in focus order
+                            tabIndex={title ? '-1' : undefined}
                         >
                             {link}
                         </Link>
                     </div>
                 </div>
             </div>
-        </div>
+        </article>
     );
 });
 

package/src/components/popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { detectOverflow } from '@popperjs/core';
-import React, { forwardRef, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
@@ -13,6 +13,7 @@ import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
 
 /**
  * Different possible placements for the popover.
@@ -90,6 +91,8 @@ export interface PopoverProps extends GenericProps {
     isOpen: boolean;
     /** Offset placement relative to anchor. */
     offset?: Offset;
+    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+    parentElement?: RefObject<HTMLElement>;
     /** Placement relative to anchor. */
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
@@ -212,6 +215,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         isOpen,
         offset,
         onClose,
+        parentElement,
         placement,
         style,
         usePortal,
@@ -245,7 +249,8 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     });
 
     /** Action on close */
-    const handleClose = () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const handleClose = useCallback(() => {
         if (!onClose) {
             return;
         }
@@ -256,11 +261,22 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            anchorRef.current?.focus();
+            if (parentElement?.current) {
+                parentElement?.current.focus();
+            }
+
+            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
+            if (firstFocusable) {
+                // Focus the first focusable element in anchor.
+                firstFocusable.focus();
+            } else {
+                // Fallback on the anchor element.
+                anchorRef?.current?.focus();
+            }
         }
 
         onClose();
-    };
+    }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
 
     const modifiers: any = [];
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];

package/src/components/select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { mdiBullhornOutline } from '@lumx/icons/';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { text } from '@storybook/addon-knobs';
@@ -32,6 +33,7 @@ export const SimpleSelect = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiBullhornOutline}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/Select.tsx

@@ -5,7 +5,7 @@ import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Emphasis, Size } from '@lumx/react/components';
+import { Emphasis, Size, Theme } from '@lumx/react/components';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
@@ -46,6 +46,7 @@ const SelectField: React.FC<SelectProps> = ({
     handleKeyboardNav,
     hasError,
     hasInputClear,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -89,6 +90,15 @@ const SelectField: React.FC<SelectProps> = ({
                         aria-disabled={isDisabled || undefined}
                         {...forwardedProps}
                     >
+                        {icon && (
+                            <Icon
+                                className={`${CLASSNAME}__input-icon`}
+                                color={theme === Theme.dark ? 'light' : undefined}
+                                icon={icon}
+                                size={Size.xs}
+                            />
+                        )}
+
                         <div
                             className={classNames([
                                 `${CLASSNAME}__input-native`,

package/src/components/select/SelectMultiple.stories.tsx

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+import { mdiTram } from '@lumx/icons/';
 import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
@@ -40,6 +41,7 @@ export const DefaultSelectMultiple = ({ theme }: any) => {
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
+            icon={mdiTram}
         >
             <List isClickable>
                 {CHOICES.length > 0

package/src/components/select/SelectMultiple.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 
-import { Size } from '@lumx/react/components';
+import { Size, Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
@@ -59,6 +59,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     anchorRef,
     handleKeyboardNav,
     hasError,
+    icon,
     id,
     isDisabled,
     isEmpty,
@@ -102,6 +103,15 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                     aria-disabled={isDisabled || undefined}
                     {...forwardedProps}
                 >
+                    {icon && (
+                        <Icon
+                            className={`${CLASSNAME}__input-icon`}
+                            color={theme === Theme.dark ? 'light' : undefined}
+                            icon={icon}
+                            size={Size.xs}
+                        />
+                    )}
+
                     <div className={`${CLASSNAME}__chips`}>
                         {!isEmpty &&
                             value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}

package/src/components/select/constants.ts

@@ -21,6 +21,8 @@ export interface CoreSelectProps extends GenericProps {
     helper?: string;
     /** Whether the select should close on click. */
     closeOnClick?: boolean;
+    /** Icon (SVG path). */
+    icon?: string;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the component is required or not. */

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -3,6 +3,11 @@
 exports[`<Table> Snapshots and structure should render story 'Default' 1`] = `
 <table
   className="lumx-table lumx-table--has-dividers lumx-table--theme-light"
+  style={
+    Object {
+      "minWidth": 620,
+    }
+  }
 >
   <TableHeader>
     <TableRow>

package/src/components/text-field/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -33,7 +33,7 @@ export interface TextFieldProps extends GenericProps {
     /** Native input id property (generated if not provided to link the label element). */
     id?: string;
     /** Reference to the <input> or <textarea> element. */
-    inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the component is required or not. */
@@ -53,7 +53,7 @@ export interface TextFieldProps extends GenericProps {
     /** Placeholder text. */
     placeholder?: string;
     /** Reference to the wrapper. */
-    textFieldRef?: RefObject<HTMLDivElement>;
+    textFieldRef?: Ref<HTMLDivElement>;
     /** Theme adapting the component to light or dark background. */
     theme?: Theme;
     /** Value. */
@@ -139,7 +139,7 @@ const useComputeNumberOfRows = (
 
 interface InputNativeProps {
     id?: string;
-    inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;
+    inputRef?: TextFieldProps['inputRef'];
     isDisabled?: boolean;
     isRequired?: boolean;
     multiline?: boolean;

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -34,7 +34,7 @@ export interface ThumbnailProps extends GenericProps {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Badge. */
-    badge?: ReactElement;
+    badge?: ReactElement | Falsy;
     /** Image cross origin resource policy. */
     crossOrigin?: ImgHTMLProps['crossOrigin'];
     /** Fallback icon (SVG path) or react node when image fails to load. */