@lumx/react 3.3.0 → 3.3.1-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.3.0",
-        "@lumx/icons": "^3.3.0",
+        "@lumx/core": "^3.3.1-alpha.0",
+        "@lumx/icons": "^3.3.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.3.0"
+    "version": "3.3.1-alpha.0"
 }

package/src/components/index.ts

@@ -146,6 +146,8 @@ export type Typography = TypographyInterface | TypographyCustom;
 export const AspectRatio = {
     /** Intrinsic content ratio. */
     original: 'original',
+    /** Ratio 3:1 */
+    panoramic: 'panoramic',
     /** Ratio 16:9 */
     wide: 'wide',
     /** Ratio 3:2 */

package/src/components/popover/Popover.tsx

@@ -173,16 +173,18 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            let elementToFocus = parentElement?.current;
-            if (!elementToFocus && anchorRef?.current) {
-                // Focus the first focusable element in anchor.
-                elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+            if (parentElement?.current) {
+                parentElement?.current.focus();
             }
-            if (!elementToFocus) {
+
+            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.
-                elementToFocus = anchorRef?.current;
+                anchorRef?.current?.focus();
             }
-            elementToFocus?.focus({ preventScroll: true });
         }
 
         onClose();

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

@@ -1,20 +1,9 @@
 /* istanbul ignore file */
 import { mdiTram } from '@lumx/icons/';
-import {
-    Chip,
-    Dialog,
-    List,
-    ListDivider,
-    ListItem,
-    ListSubheader,
-    SelectMultiple,
-    Size,
-    TextField,
-    Toolbar,
-} from '@lumx/react';
+import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
+import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };
@@ -236,95 +225,3 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
         </SelectMultiple>
     );
 };
-
-/**
- * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
- */
-export const SelectWithinADialog = ({ theme }: any) => {
-    const searchFieldRef = useRef(null);
-
-    const [searchText, setSearchText] = useState<string>();
-    const [values, setValues] = useState<string[]>([]);
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const clearSelected = (event: SyntheticEvent, value: string) => {
-        event.stopPropagation();
-        setValues(value ? values.filter((val) => val !== value) : []);
-    };
-
-    const selectItem = (item: string) => () => {
-        if (values.includes(item)) {
-            return;
-        }
-
-        closeSelect();
-        setValues([...values, item]);
-    };
-
-    const filteredChoices =
-        searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
-
-    return (
-        <>
-            <Dialog isOpen>
-                <header>
-                    <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
-                </header>
-                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
-                    {/* Testing hidden input do not count in th focus trap*/}
-                    <input hidden type="file" />
-                    <input type="hidden" />
-
-                    <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
-
-                    <SelectMultiple
-                        isOpen={isOpen}
-                        value={values}
-                        onClear={clearSelected}
-                        clearButtonProps={{ label: 'Clear' }}
-                        label={LABEL}
-                        placeholder={PLACEHOLDER}
-                        theme={theme}
-                        onInputClick={toggleSelect}
-                        onDropdownClose={closeSelect}
-                        icon={mdiTram}
-                        focusElement={searchFieldRef}
-                    >
-                        <List isClickable>
-                            <>
-                                <ListSubheader>
-                                    <TextField
-                                        clearButtonProps={{ label: 'Clear' }}
-                                        placeholder="Search"
-                                        role="searchbox"
-                                        inputRef={searchFieldRef}
-                                        onChange={setSearchText}
-                                        value={searchText}
-                                    />
-                                </ListSubheader>
-                                <ListDivider role="presentation" />
-                            </>
-
-                            {filteredChoices.length > 0
-                                ? filteredChoices.map((choice) => (
-                                      <ListItem
-                                          isSelected={values.includes(choice)}
-                                          key={choice}
-                                          onItemSelected={selectItem(choice)}
-                                          size={Size.tiny}
-                                      >
-                                          {choice}
-                                      </ListItem>
-                                  ))
-                                : [
-                                      <ListItem key={0} size={Size.tiny}>
-                                          No data
-                                      </ListItem>,
-                                  ]}
-                        </List>
-                    </SelectMultiple>
-                </div>
-            </Dialog>
-        </>
-    );
-};

package/src/components/select/WithSelectContext.tsx

@@ -1,15 +1,15 @@
-import classNames from 'classnames';
 import React, { Ref, useCallback, useMemo, useRef } from 'react';
+
+import classNames from 'classnames';
 import { uid } from 'uid';
 
-import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/react/components';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
+import { Placement } from '@lumx/react';
 
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -30,7 +30,6 @@ export const WithSelectContext = (
     {
         children,
         className,
-        focusElement,
         isMultiple,
         closeOnClick = !isMultiple,
         disabled,
@@ -59,7 +58,6 @@ export const WithSelectContext = (
     const selectId = useMemo(() => id || `select-${uid()}`, [id]);
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
     const isFocus = useListenFocus(anchorRef);
 
     const handleKeyboardNav = useCallback(
@@ -79,9 +77,6 @@ export const WithSelectContext = (
         anchorRef?.current?.blur();
     };
 
-    // Handle focus trap.
-    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
-
     return (
         <div
             ref={mergeRefs(ref, selectRef)}
@@ -130,7 +125,6 @@ export const WithSelectContext = (
                 placement={Placement.BOTTOM_START}
                 onClose={onClose}
                 onInfiniteScroll={onInfiniteScroll}
-                ref={dropdownRef}
             >
                 {children}
             </Dropdown>

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

@@ -12,7 +12,6 @@ export default {
         clearButtonProps: { control: false },
         chips: { control: false },
         afterElement: { control: false },
-        onClear: { action: true },
     },
     decorators: [withValueOnChange({})],
 };

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

@@ -5,14 +5,8 @@ import camelCase from 'lodash/camelCase';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 
-import { render, screen } from '@testing-library/react';
-import {
-    getByClassName,
-    getByTagName,
-    queryAllByClassName,
-    queryByClassName,
-    queryByTagName,
-} from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import { getByClassName, getByTagName, queryAllByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
 import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
@@ -33,11 +27,9 @@ 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,
@@ -114,27 +106,22 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should have helper text', () => {
-            const { helper, inputNative } = setup({
+            const { helper } = setup({
                 helper: 'helper',
                 label: 'test',
                 placeholder: 'test',
             });
-
             expect(helper).toHaveTextContent('helper');
-            expect(inputNative).toHaveAttribute('aria-describedby');
         });
 
         it('should have error text', () => {
-            const { error, inputNative } = setup({
+            const { error } = 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', () => {
@@ -173,41 +160,6 @@ 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.

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

@@ -61,8 +61,6 @@ 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;
 }
@@ -155,8 +153,6 @@ 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) => {
@@ -176,8 +172,6 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         recomputeNumberOfRows,
         type,
         name,
-        hasError,
-        describedById,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -220,8 +214,6 @@ 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) {
@@ -262,7 +254,6 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         name,
         onBlur,
         onChange,
-        onClear,
         onFocus,
         placeholder,
         textFieldRef,
@@ -273,17 +264,6 @@ 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;
@@ -295,16 +275,12 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
      * and remove focus from the clear button.
      * @param evt On clear event.
      */
-    const handleClear = (evt: React.ChangeEvent) => {
+    const onClear = (evt: React.ChangeEvent) => {
         evt.nativeEvent.preventDefault();
         evt.nativeEvent.stopPropagation();
         (evt.currentTarget as HTMLElement).blur();
 
         onChange('');
-
-        if (onClear) {
-            onClear(evt);
-        }
     };
 
     return (
@@ -383,8 +359,6 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
-                            hasError,
-                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -409,8 +383,6 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
-                            hasError,
-                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -433,7 +405,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                         emphasis={Emphasis.low}
                         size={Size.s}
                         theme={theme}
-                        onClick={handleClear}
+                        onClick={onClear}
                         type="button"
                     />
                 )}
@@ -442,13 +414,13 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
             </div>
 
             {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme} id={errorId}>
+                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>
                     {error}
                 </InputHelper>
             )}
 
             {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>
+                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
                     {helper}
                 </InputHelper>
             )}

package/src/hooks/useFocusTrap.ts

@@ -72,10 +72,10 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
         // SETUP:
         if (focusElement && focusZoneElement.contains(focusElement)) {
             // Focus the given element.
-            focusElement.focus({ preventScroll: true });
+            focusElement.focus();
         } else {
             // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElement).first?.focus({ preventScroll: true });
+            getFirstAndLastFocusable(focusZoneElement).first?.focus();
         }
         FOCUS_TRAPS.register(focusTrap);