@lumx/react 3.3.1-alpha.0 → 3.3.1

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

@@ -12,6 +12,7 @@ export default {
         clearButtonProps: { control: false },
         chips: { control: false },
         afterElement: { control: false },
+        onClear: { action: true },
     },
     decorators: [withValueOnChange({})],
 };
@@ -49,11 +50,19 @@ export const LabelAndHelper = {
 /**
  * With clear button
  */
-export const Clearable = {
-    args: {
-        value: 'Some value',
-        clearButtonProps: { label: 'Clear' },
-    },
+export const Clearable = () => {
+    const inputRef = React.useRef(null);
+    const [value, setValue] = React.useState('Some value');
+
+    return (
+        <TextField
+            value={value}
+            clearButtonProps={{ label: 'Clear' }}
+            onChange={setValue}
+            inputRef={inputRef}
+            {...TextField.defaultProps}
+        />
+    );
 };
 
 /**

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

@@ -4,9 +4,14 @@ import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
-
 import { render } from '@testing-library/react';
-import { getByClassName, getByTagName, queryAllByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
+import {
+    getByClassName,
+    getByTagName,
+    queryAllByClassName,
+    queryByClassName,
+    queryByTagName,
+} from '@lumx/react/testing/utils/queries';
 import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
@@ -27,9 +32,11 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
         | HTMLInputElement;
     const helpers = queryAllByClassName(container, 'lumx-text-field__helper');
     const [[helper], [error]] = partition(helpers, (h) => !h.className.includes('lumx-input-helper--color-red'));
+    const clearButton = queryByClassName(container, 'lumx-text-field__input-clear');
 
     return {
         props,
+        clearButton,
         container,
         element,
         inputNative,
@@ -43,7 +50,7 @@ describe(`<${TextField.displayName}>`, () => {
         it('should render defaults', () => {
             const { element, inputNative } = setup({ id: 'fixedId' });
             expect(element).toBeInTheDocument();
-            expect(element).toMatchSnapshot();
+
             expect(element).not.toHaveClass(`${CLASSNAME}--is-valid`);
             expect(element).not.toHaveClass(`${CLASSNAME}--has-error`);
             expect(element).not.toHaveClass(`${CLASSNAME}--has-label`);
@@ -59,12 +66,11 @@ describe(`<${TextField.displayName}>`, () => {
         it('should render textarea', () => {
             const { element, inputNative } = setup({ id: 'fixedId', multiline: true });
             expect(element).toBeInTheDocument();
-            expect(element).toMatchSnapshot();
+
             expect(inputNative.tagName).toBe('TEXTAREA');
         });
     });
 
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
         it('should add all class names (except has-error)', () => {
             const modifiedProps = {
@@ -106,22 +112,27 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should have helper text', () => {
-            const { helper } = setup({
+            const { helper, inputNative } = setup({
                 helper: 'helper',
                 label: 'test',
                 placeholder: 'test',
             });
+
             expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAttribute('aria-describedby');
         });
 
         it('should have error text', () => {
-            const { error } = setup({
+            const { error, inputNative } = setup({
                 error: 'error',
                 hasError: true,
                 label: 'test',
                 placeholder: 'test',
             });
+
             expect(error).toHaveTextContent('error');
+            expect(inputNative).toHaveAttribute('aria-invalid', 'true');
+            expect(inputNative).toHaveAttribute('aria-describedby');
         });
 
         it('should not have error text', () => {
@@ -147,7 +158,6 @@ describe(`<${TextField.displayName}>`, () => {
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
         it('should trigger `onChange` when text field is changed', async () => {
             const onChange = jest.fn();
@@ -160,6 +170,41 @@ describe(`<${TextField.displayName}>`, () => {
 
             expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
         });
+
+        it('should trigger `onChange` with empty value when text field is cleared', async () => {
+            const onChange = jest.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+        });
+
+        it('should trigger `onChange` with empty value and `onClear` when text field is cleared', async () => {
+            const onChange = jest.fn();
+            const onClear = jest.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+                onClear,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+            expect(onClear).toHaveBeenCalled();
+        });
     });
 
     // Common tests suite.
@@ -167,5 +212,6 @@ describe(`<${TextField.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'element',
         forwardAttributes: 'inputNative',
+        forwardRef: 'element',
     });
 });

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

@@ -1,4 +1,14 @@
-import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+    forwardRef,
+    ReactNode,
+    Ref,
+    RefObject,
+    SyntheticEvent,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -61,6 +71,8 @@ export interface TextFieldProps extends GenericProps, HasTheme {
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /** On clear callback. */
+    onClear?(event?: SyntheticEvent): void;
     /** On focus callback. */
     onFocus?(event: React.FocusEvent): void;
 }
@@ -153,6 +165,8 @@ interface InputNativeProps {
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
     onFocus?(value: React.FocusEvent): void;
     onBlur?(value: React.FocusEvent): void;
+    hasError?: boolean;
+    describedById?: string;
 }
 
 const renderInputNative: React.FC<InputNativeProps> = (props) => {
@@ -172,6 +186,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         recomputeNumberOfRows,
         type,
         name,
+        hasError,
+        describedById,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -214,6 +230,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         onFocus: onTextFieldFocus,
         onBlur: onTextFieldBlur,
         onChange: handleChange,
+        'aria-invalid': hasError ? 'true' : undefined,
+        'aria-describedby': describedById,
         ref: mergeRefs(inputRef as any, ref) as any,
     };
     if (multiline) {
@@ -254,6 +272,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         name,
         onBlur,
         onChange,
+        onClear,
         onFocus,
         placeholder,
         textFieldRef,
@@ -264,6 +283,17 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         ...forwardedProps
     } = props;
     const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+    /**
+     * Generate unique ids for both the helper and error texts, in order to
+     * later on add them to the input native as aria-describedby. If both the error and the helper are present,
+     * we want to first use the most important one, which is the errorId. That way, screen readers will read first
+     * the error and then the helper
+     */
+    const helperId = helper ? `text-field-helper-${uid()}` : undefined;
+    const errorId = error ? `text-field-error-${uid()}` : undefined;
+    const describedByIds = [errorId, helperId].filter(Boolean);
+    const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
+
     const [isFocus, setFocus] = useState(false);
     const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
     const valueLength = (value || '').length;
@@ -275,12 +305,22 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
      * and remove focus from the clear button.
      * @param evt On clear event.
      */
-    const onClear = (evt: React.ChangeEvent) => {
+    const handleClear = (evt: React.ChangeEvent) => {
         evt.nativeEvent.preventDefault();
         evt.nativeEvent.stopPropagation();
         (evt.currentTarget as HTMLElement).blur();
 
         onChange('');
+
+        if (onClear) {
+            onClear(evt);
+        }
+
+        const inputElement = inputRef as RefObject<HTMLInputElement | HTMLTextAreaElement>;
+
+        if (inputElement && inputElement.current) {
+            inputElement.current.focus();
+        }
     };
 
     return (
@@ -359,6 +399,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
+                            hasError,
+                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -383,6 +425,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
+                            hasError,
+                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -405,7 +449,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                         emphasis={Emphasis.low}
                         size={Size.s}
                         theme={theme}
-                        onClick={onClear}
+                        onClick={handleClear}
                         type="button"
                     />
                 )}
@@ -414,13 +458,13 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
             </div>
 
             {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>
+                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme} id={errorId}>
                     {error}
                 </InputHelper>
             )}
 
             {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
+                <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>
                     {helper}
                 </InputHelper>
             )}

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,105 +1,164 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
+
+import { Button } from '@lumx/react';
+import { act, render, waitFor } from '@testing-library/react';
+import {
+    findByClassName,
+    getByClassName,
+    queryAllByTagName,
+    queryByClassName,
+} from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { Button, Icon } from '@lumx/react';
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
-type SetupProps = Partial<TooltipProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(
-        <Tooltip label="Tooltip" {...props}>
-            Anchor
-        </Tooltip>,
+const setup = async (propsOverride: Partial<TooltipProps> = {}) => {
+    const props: any = { forceOpen: true, ...propsOverride };
+    // Hack to remove act() warning in console
+    await (act as any)(() =>
+        Promise.resolve(
+            render(
+                <Tooltip label="Tooltip" {...props}>
+                    {props.children || 'Anchor'}
+                </Tooltip>,
+            ),
+        ),
     );
-    const tooltip = wrapper.find(`.${CLASSNAME}`);
-
-    return {
-        props,
-        tooltip,
-        wrapper,
-    };
+    const tooltip = queryByClassName(document.body, CLASSNAME);
+    const anchorWrapper = queryByClassName(document.body, 'lumx-tooltip-anchor-wrapper');
+    return { props, tooltip, anchorWrapper };
 };
 
-jest.mock('./useTooltipOpen', () => ({ useTooltipOpen: () => true }));
-
 describe(`<${Tooltip.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 correctly', () => {
-            const { tooltip, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(tooltip).toExist();
-            expect(tooltip).toHaveClassName(CLASSNAME);
+    describe('render', () => {
+        it('should not render with empty label', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: undefined,
+                forceOpen: true,
+            });
+            expect(tooltip).not.toBeInTheDocument();
+            expect(anchorWrapper).not.toBeInTheDocument();
         });
 
-        it('should return children when empty label', () => {
-            const wrapper = shallow(
-                <Tooltip label="">
-                    <Icon icon="icon" />
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
+        it('should wrap unknown children', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: 'Anchor',
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).toBeInTheDocument();
+            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
-        it('should wrap children', () => {
-            // Wrap string children
-            const wrapper1 = shallow(<Tooltip label="tooltip1">children</Tooltip>);
-            expect(wrapper1).toMatchSnapshot();
+        it('should not wrap Button', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).not.toBeInTheDocument();
+            const button = queryByClassName(document.body, Button.className as string);
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+        });
 
-            // Wrap fragment children
-            const wrapper2 = shallow(
-                <Tooltip label="tooltip1">
-                    <>children</>
-                </Tooltip>,
-            );
-            expect(wrapper2).toMatchSnapshot();
+        it('should wrap disabled Button', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: <Button isDisabled>Anchor</Button>,
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).toBeInTheDocument();
+            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            const button = queryByClassName(document.body, Button.className as string);
+            expect(button?.parentElement).toBe(anchorWrapper);
         });
 
-        it('should not wrap Icon', () => {
-            const wrapper = shallow(
-                <Tooltip label="tooltip1">
-                    <Icon icon="icon" />
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
+        it('should render multiline', async () => {
+            const { tooltip } = await setup({
+                label: 'First line\nSecond line',
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            const lines = queryAllByTagName(tooltip as any, 'p');
+            expect(lines.length).toBe(2);
+            expect(lines[0]).toHaveTextContent('First line');
+            expect(lines[1]).toHaveTextContent('Second line');
         });
+    });
 
-        it('should not wrap Button', () => {
-            const wrapper = shallow(
-                <Tooltip label="tooltip1">
-                    <Button>button</Button>
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
+    describe('activation', () => {
+        it('should activate on anchor hover', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Hover anchor button
+            const button = getByClassName(document.body, Button.className as string);
+            await userEvent.hover(button);
+
+            // Tooltip opened
+            tooltip = await findByClassName(document.body, CLASSNAME);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Un-hover anchor button
+            userEvent.unhover(button);
+            await waitFor(() => {
+                expect(button).not.toHaveFocus();
+                // Tooltip closed
+                expect(tooltip).not.toBeInTheDocument();
+            });
         });
 
-        it('should work on disabled elements', () => {
-            const wrapper = shallow(
-                <Tooltip label="Tooltip on disabled button" forceOpen>
-                    <Button isDisabled>Empty</Button>
-                </Tooltip>,
-            );
-            expect(wrapper).toMatchSnapshot();
+        it('should activate on anchor focus', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus anchor button
+            await userEvent.tab();
+            const button = getByClassName(document.body, Button.className as string);
+            expect(button).toHaveFocus();
+
+            // Tooltip opened
+            tooltip = await findByClassName(document.body, CLASSNAME);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Focus next element
+            userEvent.tab();
+            await waitFor(() => {
+                expect(button).not.toHaveFocus();
+                // Tooltip closed
+                expect(tooltip).not.toBeInTheDocument();
+            });
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'tooltip', prop: 'tooltip' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tooltip',
+        forwardAttributes: 'tooltip',
+        forwardRef: 'tooltip',
+    });
 });

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,7 +1,9 @@
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import get from 'lodash/get';
+import isUndefined from 'lodash/isUndefined';
 import React, { cloneElement, ReactNode, useMemo } from 'react';
 
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
  * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
@@ -20,7 +22,12 @@ export const useInjectTooltipRef = (
     id: string,
 ): ReactNode => {
     return useMemo(() => {
-        const ariaProps = { 'aria-describedby': isOpen ? id : undefined };
+        // Let the children remove the aria-describedby attribute by setting it to undefined
+        const childrenHasAriaProp = get(children, 'props')
+            ? 'aria-describedby' in get(children, 'props') && isUndefined(get(children, 'props.aria-describedby'))
+            : false;
+        const ariaProps = { 'aria-describedby': isOpen && !childrenHasAriaProp ? id : undefined };
+
         if (
             children &&
             get(children, '$$typeof') &&