@lumx/react 3.21.1 → 3.21.2-alpha.1

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

@@ -1,307 +0,0 @@
-import { Mock } from 'vitest';
-import React from 'react';
-
-import camelCase from 'lodash/camelCase';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/core/js/utils/className';
-import { render } from '@testing-library/react';
-import {
-    getByClassName,
-    getByTagName,
-    queryAllByClassName,
-    queryByClassName,
-    queryByTagName,
-} from '@lumx/react/testing/utils/queries';
-import partition from 'lodash/partition';
-import userEvent from '@testing-library/user-event';
-
-import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
-import { createRef } from 'react';
-import { TextField, TextFieldProps } from './TextField';
-
-const CLASSNAME = TextField.className as string;
-
-vi.mock('@lumx/react/utils/browser/isFocusVisible');
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-    const { container } = render(<TextField {...props} />, { wrapper });
-
-    const element = getByClassName(container, CLASSNAME);
-    const inputNative = (queryByTagName(container, 'textarea') || getByTagName(container, 'input')) as
-        | HTMLTextAreaElement
-        | 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,
-        error,
-        helper,
-    };
-};
-
-describe(`<${TextField.displayName}>`, () => {
-    (isFocusVisible as Mock).mockReturnValue(false);
-
-    describe('Render', () => {
-        it('should render defaults', () => {
-            const inputRef = createRef<HTMLInputElement>();
-            const { element, inputNative } = setup({ id: 'fixedId', inputRef });
-            expect(element).toBeInTheDocument();
-
-            expect(element).not.toHaveClass(`${CLASSNAME}--is-valid`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--has-error`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--has-label`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--is-disabled`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--has-placeholder`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--is-focus`);
-            expect(element).not.toHaveClass(`${CLASSNAME}--has-icon`);
-
-            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
-            expect(inputNative.tagName).toBe('INPUT');
-            expect(inputRef.current).toBe(inputNative);
-        });
-
-        it('should render textarea', () => {
-            const inputRef = createRef<HTMLTextAreaElement>();
-            const { element, inputNative } = setup({ id: 'fixedId', multiline: true, inputRef });
-            expect(element).toBeInTheDocument();
-
-            expect(inputNative.tagName).toBe('TEXTAREA');
-            expect(inputRef.current).toBe(inputNative);
-        });
-    });
-
-    describe('Props', () => {
-        it('should add all class names (except has-error)', () => {
-            const modifiedProps = {
-                icon: 'icon',
-                isDisabled: true,
-                isValid: true,
-                label: 'test',
-                placeholder: 'test',
-            };
-            const hasProps = ['icon', 'label', 'placeholder'];
-            const { element } = setup(modifiedProps);
-
-            for (const [prop, value] of Object.entries(modifiedProps)) {
-                const propType = hasProps.includes(prop) ? camelCase(`has-${prop}`) : prop;
-                const propValue = hasProps.includes(prop) ? true : value;
-                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: propType, value: propValue }));
-            }
-        });
-
-        it('should add "has-error" class name', () => {
-            const modifiedProps = { hasError: true };
-            const { element } = setup(modifiedProps);
-
-            for (const [prop, value] of Object.entries(modifiedProps)) {
-                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: prop, value }));
-            }
-        });
-
-        it('should have text as value', () => {
-            const value = 'test';
-            const { inputNative } = setup({ value });
-            expect(inputNative.value).toEqual(value);
-        });
-
-        it('should have no value', () => {
-            const value = undefined;
-            const { inputNative } = setup({ value });
-            expect(inputNative.value).toEqual('');
-        });
-
-        it('should have helper text', () => {
-            const { helper, inputNative } = setup({
-                helper: 'helper',
-                label: 'test',
-                placeholder: 'test',
-            });
-
-            expect(helper).toHaveTextContent('helper');
-            expect(inputNative).toHaveAccessibleDescription('helper');
-        });
-
-        it('should have error text', () => {
-            const { error, inputNative } = setup({
-                error: 'error',
-                hasError: true,
-                label: 'test',
-                placeholder: 'test',
-            });
-
-            expect(error).toHaveTextContent('error');
-            expect(inputNative).toHaveAttribute('aria-invalid', 'true');
-            expect(inputNative).toHaveAccessibleDescription('error');
-        });
-
-        it('should not have error text', () => {
-            const { error } = setup({
-                error: 'error',
-                hasError: false,
-                label: 'test',
-                placeholder: 'test',
-            });
-            expect(error).not.toBeDefined();
-        });
-
-        it('should have error and helper text', () => {
-            const { error, helper, inputNative } = setup({
-                error: 'error',
-                hasError: true,
-                helper: 'helper',
-                label: 'test',
-                placeholder: 'test',
-            });
-            expect(error).toHaveTextContent('error');
-            expect(helper).toHaveTextContent('helper');
-            expect(inputNative).toHaveAccessibleDescription('error helper');
-        });
-
-        it('should have error and helper text and custom aria describedby', () => {
-            const { error, helper, inputNative } = setup({
-                error: 'error',
-                hasError: true,
-                helper: 'helper',
-                label: 'test',
-                placeholder: 'test',
-                'aria-describedby': 'aria-description',
-            });
-            expect(error).toHaveTextContent('error');
-            expect(helper).toHaveTextContent('helper');
-            expect(inputNative).toHaveAttribute('aria-describedby', expect.stringContaining('aria-description'));
-            expect(inputNative).toHaveAttribute('aria-describedby', expect.stringContaining('text-field-error-'));
-            expect(inputNative).toHaveAttribute('aria-describedby', expect.stringContaining('text-field-helper-'));
-        });
-    });
-
-    describe('Events', () => {
-        it('should trigger `onChange` when text field is changed', async () => {
-            const onChange = vi.fn();
-            const { inputNative } = setup({ value: '', name: 'name', onChange });
-
-            await userEvent.tab();
-            expect(inputNative).toHaveFocus();
-
-            await userEvent.keyboard('a');
-
-            expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
-        });
-
-        it('should trigger `onChange` with empty value when text field is cleared', async () => {
-            const onChange = vi.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 = vi.fn();
-            const onClear = vi.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();
-        });
-    });
-
-    describe('Disabled state', () => {
-        it('should render with "isDisabled"', async () => {
-            const onChange = vi.fn();
-            const { element, inputNative } = setup({
-                label: 'Label',
-                isDisabled: true,
-                value: 'test',
-                onChange,
-            });
-
-            expect(element).toHaveClass('lumx-text-field--is-disabled');
-            expect(inputNative).toBeDisabled();
-
-            // Cannot type in disabled input.
-            await userEvent.type(inputNative, 'new value');
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('should not render clear button when disabled', () => {
-            const { clearButton } = setup({
-                value: 'initial value',
-                clearButtonProps: { label: 'Clear' },
-                isDisabled: true,
-            });
-            expect(clearButton).not.toBeInTheDocument();
-        });
-
-        it('should render with "aria-disabled"', async () => {
-            const onChange = vi.fn();
-            const { element, inputNative } = setup({
-                label: 'Label',
-                'aria-disabled': true,
-                value: 'test',
-                onChange,
-            });
-
-            expect(element).toHaveClass('lumx-text-field--is-disabled');
-            expect(inputNative).not.toBeDisabled();
-            expect(inputNative).toHaveAttribute('aria-disabled', 'true');
-            expect(inputNative).toHaveAttribute('readonly');
-
-            // Cannot type in readonly input.
-            await userEvent.type(inputNative, 'new value');
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('should not render clear button when aria-disabled', () => {
-            const { clearButton } = setup({
-                value: 'initial value',
-                clearButtonProps: { label: 'Clear' },
-                'aria-disabled': true,
-            });
-            expect(clearButton).not.toBeInTheDocument();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'element',
-        forwardAttributes: 'inputNative',
-        forwardRef: 'element',
-        applyTheme: {
-            affects: [{ element: 'element' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

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

@@ -1,323 +0,0 @@
-import React, { ReactNode, Ref, RefObject, SyntheticEvent, useRef, useState } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
-import {
-    Emphasis,
-    Icon,
-    IconButton,
-    IconButtonProps,
-    InputHelper,
-    InputLabel,
-    InputLabelProps,
-    Kind,
-    Size,
-    Theme,
-} from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-import { CLASSNAME, COMPONENT_NAME } from './constants';
-import { RawInputText } from './RawInputText';
-import { RawInputTextarea } from './RawInputTextarea';
-
-/**
- * Defines the props of the component.
- */
-export interface TextFieldProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** Chip Group to be rendered before the main text input. */
-    chips?: ReactNode;
-    /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /** Error message. */
-    error?: string | ReactNode;
-    /** Whether we force the focus style or not. */
-    forceFocusStyle?: boolean;
-    /** Whether the text field is displayed with error style or not. */
-    hasError?: boolean;
-    /** Additional element to put at the end of the text field. */
-    afterElement?: ReactNode;
-    /** Helper text. */
-    helper?: string | ReactNode;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Native input id property (generated if not provided to link the label element). */
-    id?: string;
-    /** Reference to the <input> or <textarea> element. */
-    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /** Whether the text field is displayed with valid style or not. */
-    isValid?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Additional label props. */
-    labelProps?: InputLabelProps;
-    /** Max string length the input accepts (constrains the input and displays a character counter). */
-    maxLength?: number;
-    /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
-    minimumRows?: number;
-    /** Whether the text field is a textarea or an input. */
-    multiline?: boolean;
-    /** Native input name property. */
-    name?: string;
-    /** Placeholder text. */
-    placeholder?: string;
-    /** Reference to the wrapper. */
-    textFieldRef?: Ref<HTMLDivElement>;
-    /** Native input type (only when `multiline` is disabled). */
-    type?: React.ComponentProps<'input'>['type'];
-    /** Value. */
-    value?: string;
-    /** On blur callback. */
-    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;
-}
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TextFieldProps> = {
-    type: 'text',
-};
-
-/**
- * TextField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        chips,
-        className,
-        clearButtonProps,
-        error,
-        forceFocusStyle,
-        hasError,
-        helper,
-        icon,
-        id,
-        inputRef: inputRefProps,
-        isRequired,
-        isValid,
-        label,
-        labelProps,
-        maxLength,
-        minimumRows,
-        multiline,
-        name,
-        onBlur,
-        onChange,
-        onClear,
-        onFocus,
-        placeholder,
-        textFieldRef,
-        theme = defaultTheme,
-        type = DEFAULT_PROPS.type,
-        value,
-        afterElement,
-        ...forwardedProps
-    } = otherProps;
-    const generatedTextFieldId = useId();
-    const textFieldId = id || generatedTextFieldId;
-    /** Keep a clean local input ref to manage focus */
-    const localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
-    /** Merge prop input ref and local input ref */
-    const inputRef = mergeRefs(localInputRef, inputRefProps);
-    /**
-     * 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-${generatedTextFieldId}` : undefined;
-    const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
-    const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
-    const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
-
-    const [isFocus, setFocus] = useState(false);
-    const valueLength = (value || '').length;
-    const isNotEmpty = valueLength > 0;
-
-    /**
-     * Function triggered when the Clear Button is clicked.
-     * The idea is to execute the `onChange` callback with an empty string
-     * and remove focus from the clear button.
-     * @param evt On clear event.
-     */
-    const handleClear = (evt: React.ChangeEvent) => {
-        evt.nativeEvent.preventDefault();
-        evt.nativeEvent.stopPropagation();
-        (evt.currentTarget as HTMLElement).blur();
-
-        onChange('');
-
-        if (onClear) {
-            onClear(evt);
-        }
-
-        /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
-        const inputElement = localInputRef as RefObject<HTMLInputElement | HTMLTextAreaElement>;
-
-        if (inputElement && inputElement.current) {
-            inputElement.current.focus();
-        }
-    };
-
-    const inputProps = {
-        id: textFieldId,
-        ref: inputRef as any,
-        ...disabledStateProps,
-        ...forwardedProps,
-        required: isRequired,
-        maxLength,
-        onBlur(evt: React.FocusEvent) {
-            setFocus(false);
-            onBlur?.(evt);
-        },
-        onFocus(evt: React.FocusEvent) {
-            setFocus(true);
-            onFocus?.(evt);
-        },
-        placeholder,
-        value,
-        onChange,
-        name,
-        'aria-invalid': hasError || undefined,
-        'aria-describedby': describedById,
-        readOnly: forwardedProps.readOnly || disabledStateProps['aria-disabled'],
-        theme,
-    };
-    const input = multiline ? (
-        <RawInputTextarea {...inputProps} minimumRows={minimumRows} />
-    ) : (
-        <RawInputText type={type} {...inputProps} />
-    );
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    hasChips: Boolean(chips),
-                    hasError: !isValid && hasError,
-                    hasIcon: Boolean(icon),
-                    hasInput: !multiline,
-                    hasInputClear: clearButtonProps && isNotEmpty,
-                    hasLabel: Boolean(label),
-                    hasPlaceholder: Boolean(placeholder),
-                    hasTextarea: multiline,
-                    hasValue: Boolean(value),
-                    isDisabled: isAnyDisabled,
-                    isFocus: isFocus || forceFocusStyle,
-                    isValid,
-                    prefix: CLASSNAME,
-                    theme,
-                }),
-            )}
-        >
-            {(label || maxLength) && (
-                <div className={`${CLASSNAME}__header`}>
-                    {label && (
-                        <InputLabel
-                            {...labelProps}
-                            htmlFor={textFieldId}
-                            className={`${CLASSNAME}__label`}
-                            isRequired={isRequired}
-                            theme={theme}
-                        >
-                            {label}
-                        </InputLabel>
-                    )}
-
-                    {maxLength && (
-                        <div className={`${CLASSNAME}__char-counter`}>
-                            <span>{maxLength - valueLength}</span>
-                            {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}
-                        </div>
-                    )}
-                </div>
-            )}
-
-            <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>
-                {icon && (
-                    <Icon
-                        className={`${CLASSNAME}__input-icon`}
-                        color={theme === Theme.dark ? 'light' : undefined}
-                        icon={icon}
-                        size={Size.xs}
-                    />
-                )}
-
-                {chips ? (
-                    <div className={`${CLASSNAME}__chips`}>
-                        {chips}
-
-                        {input}
-                    </div>
-                ) : (
-                    <div className={`${CLASSNAME}__input-wrapper`}>{input}</div>
-                )}
-
-                {(isValid || hasError) && (
-                    <Icon
-                        className={`${CLASSNAME}__input-validity`}
-                        color={theme === Theme.dark ? 'light' : undefined}
-                        icon={isValid ? mdiCheckCircle : mdiAlertCircle}
-                        size={Size.xxs}
-                    />
-                )}
-
-                {clearButtonProps && isNotEmpty && !isAnyDisabled && (
-                    <IconButton
-                        {...clearButtonProps}
-                        className={`${CLASSNAME}__input-clear`}
-                        icon={mdiCloseCircle}
-                        emphasis={Emphasis.low}
-                        size={Size.s}
-                        theme={theme}
-                        onClick={handleClear}
-                        type="button"
-                    />
-                )}
-
-                {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}
-            </div>
-
-            {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme} id={errorId}>
-                    {error}
-                </InputHelper>
-            )}
-
-            {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>
-                    {helper}
-                </InputHelper>
-            )}
-        </div>
-    );
-});
-TextField.displayName = COMPONENT_NAME;
-TextField.className = CLASSNAME;
-TextField.defaultProps = DEFAULT_PROPS;

package/src/components/text-field/constants.ts

@@ -1,16 +0,0 @@
-import { getRootClassName } from '@lumx/core/js/utils';
-
-/**
- * Component display name.
- */
-export const COMPONENT_NAME = 'TextField';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Input native element class name.
- */
-export const INPUT_NATIVE_CLASSNAME = `${CLASSNAME}__input-native`;

package/src/components/text-field/index.ts

@@ -1,3 +0,0 @@
-export { TextField, type TextFieldProps } from './TextField';
-export { RawInputText, type RawInputTextProps } from './RawInputText';
-export { RawInputTextarea, type RawInputTextareaProps } from './RawInputTextarea';

package/src/components/text-field/useFitRowsToContent.ts

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-
-/**
- * Fit textarea rows to its content
- */
-export function useFitRowsToContent(
-    minimumRows: number,
-    textareaRef: React.RefObject<HTMLTextAreaElement>,
-    value: string | undefined,
-) {
-    const [rows, setRows] = useState(minimumRows);
-    React.useLayoutEffect(() => {
-        const { current: textarea } = textareaRef;
-        if (!textarea) {
-            return;
-        }
-
-        // Save the current number of rows to restore it later and avoid a flicker.
-        const previousRows = textarea.rows;
-
-        // Set the rows to the minimum to get a baseline for row height.
-        // This is necessary to get a consistent row height calculation.
-        textarea.rows = minimumRows;
-        const rowHeight = textarea.clientHeight / minimumRows;
-
-        // Set rows to 1 to get the smallest possible textarea, which forces
-        // scrollHeight to be the actual content height.
-        textarea.rows = 1;
-        const { scrollHeight } = textarea;
-
-        // Restore the rows to the previous value.
-        textarea.rows = previousRows;
-
-        // Calculate the number of rows required to display the content.
-        // Fallback to `minimumRows` if `rowHeight` is 0.
-        const requiredRows = rowHeight > 0 ? Math.ceil(scrollHeight / rowHeight) : minimumRows;
-
-        // Update the rows state with the new calculated value.
-        setRows(Math.max(requiredRows, minimumRows));
-    }, [value, minimumRows, textareaRef]);
-    return rows;
-}