@lumx/react 3.20.1-alpha.8 → 3.21.0

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

@@ -0,0 +1,68 @@
+import React, { ComponentProps, ChangeEventHandler, SyntheticEvent, useRef, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme, useTheme } from '@lumx/react';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import type { HasClassName, HasTheme } from '@lumx/core/js/types';
+
+import { handleBasicClasses } from '@lumx/core/js/utils';
+
+import { useFitRowsToContent } from './useFitRowsToContent';
+import { INPUT_NATIVE_CLASSNAME } from './constants';
+
+type NativeTextareaProps = ComponentProps<'textarea'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface RawInputTextareaProps extends Omit<NativeTextareaProps, 'value' | 'onChange'>, HasTheme, HasClassName {
+    minimumRows?: number;
+    value?: string;
+    onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
+}
+
+/**
+ * Component default props.
+ */
+export const DEFAULT_PROPS: Partial<RawInputTextareaProps> = {
+    minimumRows: 2,
+};
+
+/**
+ * Raw input text area component
+ * (textarea element without any decoration)
+ */
+export const RawInputTextarea = forwardRef<Omit<RawInputTextareaProps, 'type'>, HTMLTextAreaElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        className,
+        theme = defaultTheme,
+        minimumRows = DEFAULT_PROPS.minimumRows as number,
+        value,
+        onChange,
+        ...forwardedProps
+    } = props;
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const rows = useFitRowsToContent(minimumRows, textareaRef, value);
+
+    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+        (evt) => {
+            onChange?.(evt.target.value, evt.target.name, evt);
+        },
+        [onChange],
+    );
+
+    return (
+        <textarea
+            className={classNames(className, handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }))}
+            ref={useMergeRefs(ref, textareaRef)}
+            {...forwardedProps}
+            onChange={handleChange}
+            value={value}
+            rows={rows}
+        />
+    );
+});

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

@@ -1,4 +1,6 @@
 import { Mock } from 'vitest';
+import React from 'react';
+
 import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
@@ -15,6 +17,7 @@ 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;
@@ -52,7 +55,8 @@ describe(`<${TextField.displayName}>`, () => {
 
     describe('Render', () => {
         it('should render defaults', () => {
-            const { element, inputNative } = setup({ id: 'fixedId' });
+            const inputRef = createRef<HTMLInputElement>();
+            const { element, inputNative } = setup({ id: 'fixedId', inputRef });
             expect(element).toBeInTheDocument();
 
             expect(element).not.toHaveClass(`${CLASSNAME}--is-valid`);
@@ -65,13 +69,16 @@ describe(`<${TextField.displayName}>`, () => {
 
             expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
             expect(inputNative.tagName).toBe('INPUT');
+            expect(inputRef.current).toBe(inputNative);
         });
 
         it('should render textarea', () => {
-            const { element, inputNative } = setup({ id: 'fixedId', multiline: true });
+            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);
         });
     });
 
@@ -174,6 +181,8 @@ describe(`<${TextField.displayName}>`, () => {
             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-'));
         });
     });
 

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

@@ -1,7 +1,6 @@
-import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, Ref, RefObject, SyntheticEvent, useRef, useState } from 'react';
 
 import classNames from 'classnames';
-import get from 'lodash/get';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
 import {
@@ -17,7 +16,7 @@ import {
     Theme,
 } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+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';
@@ -25,6 +24,10 @@ 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.
  */
@@ -86,21 +89,6 @@ export interface TextFieldProps extends GenericProps, HasTheme, HasAriaDisabled
     onFocus?(event: React.FocusEvent): void;
 }
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TextField';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Default minimum number of rows in the multiline mode.
- */
-const DEFAULT_MIN_ROWS = 2;
-
 /**
  * Component default props.
  */
@@ -108,149 +96,6 @@ const DEFAULT_PROPS: Partial<TextFieldProps> = {
     type: 'text',
 };
 
-/**
- * Hook that allows to calculate the number of rows needed for a text area.
- * @param minimumRows Minimum number of rows that we want to display.
- * @return rows to be used and a callback to recalculate
- */
-const useComputeNumberOfRows = (
-    minimumRows: number,
-): {
-    /** number of rows to be used on the text area */
-    rows: number;
-    /**
-     * Callback in order to recalculate the number of rows due to a change on the text area
-     */
-    recomputeNumberOfRows(target: Element): void;
-} => {
-    const [rows, setRows] = useState(minimumRows);
-
-    const recompute = (target: Element) => {
-        /**
-         * HEAD's UP! This part is a little bit tricky. The idea here is to only
-         * display the necessary rows on the textarea. In order to dynamically adjust
-         * the height on that field, we need to:
-         * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
-         * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
-         * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
-         * by the line height.
-         * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
-         * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
-         * when we will not see the update and the rows will be resized to the minimum.
-         * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
-         * on the state in order to allow React to re-render. Therefore, we save them using `useState`
-         */
-        // eslint-disable-next-line no-param-reassign
-        (target as HTMLTextAreaElement).rows = minimumRows;
-        let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
-        currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
-        // eslint-disable-next-line no-param-reassign
-        (target as HTMLTextAreaElement).rows = currentRows;
-
-        setRows(currentRows);
-    };
-
-    return {
-        recomputeNumberOfRows: recompute,
-        rows,
-    };
-};
-
-interface InputNativeProps {
-    id?: string;
-    inputRef?: TextFieldProps['inputRef'];
-    isDisabled?: boolean;
-    'aria-disabled'?: boolean;
-    isRequired?: boolean;
-    readOnly?: boolean;
-    multiline?: boolean;
-    maxLength?: number;
-    placeholder?: string;
-    rows: number;
-    type: TextFieldProps['type'];
-    name?: string;
-    value?: string;
-    setFocus(focus: boolean): void;
-    recomputeNumberOfRows(target: Element): void;
-    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) => {
-    const {
-        id,
-        isRequired,
-        placeholder,
-        multiline,
-        value,
-        setFocus,
-        onChange,
-        onFocus,
-        onBlur,
-        inputRef,
-        rows,
-        recomputeNumberOfRows,
-        type,
-        name,
-        hasError,
-        describedById,
-        ...forwardedProps
-    } = props;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<HTMLElement>(null);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        // Recompute the number of rows for the first rendering
-        if (multiline && ref && ref.current) {
-            recomputeNumberOfRows(ref.current);
-        }
-    }, [ref, multiline, recomputeNumberOfRows, value]);
-
-    const onTextFieldFocus = (event: React.FocusEvent) => {
-        onFocus?.(event);
-        setFocus(true);
-    };
-
-    const onTextFieldBlur = (event: React.FocusEvent) => {
-        onBlur?.(event);
-        setFocus(false);
-    };
-
-    const handleChange = (event: React.ChangeEvent) => {
-        onChange(get(event, 'target.value'), name, event);
-    };
-
-    const Component = multiline ? 'textarea' : 'input';
-    const inputProps: any = {
-        ...forwardedProps,
-        id,
-        className: multiline
-            ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`
-            : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,
-        placeholder,
-        value,
-        name,
-        required: isRequired,
-        onFocus: onTextFieldFocus,
-        onBlur: onTextFieldBlur,
-        onChange: handleChange,
-        'aria-invalid': hasError ? 'true' : undefined,
-        'aria-describedby': describedById,
-        readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
-        ref: mergeRefs(inputRef as any, ref) as any,
-    };
-    if (multiline) {
-        inputProps.rows = rows;
-    } else {
-        inputProps.type = type;
-    }
-    return <Component {...inputProps} />;
-};
-
 /**
  * TextField component.
  *
@@ -310,7 +155,6 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
     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;
     const isNotEmpty = valueLength > 0;
 
@@ -339,6 +183,36 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
         }
     };
 
+    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}
@@ -395,58 +269,14 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
                     />
                 )}
 
-                {chips && (
+                {chips ? (
                     <div className={`${CLASSNAME}__chips`}>
                         {chips}
 
-                        {renderInputNative({
-                            id: textFieldId,
-                            inputRef,
-                            ...disabledStateProps,
-                            isRequired,
-                            maxLength,
-                            multiline,
-                            onBlur,
-                            onChange,
-                            onFocus,
-                            placeholder,
-                            recomputeNumberOfRows,
-                            rows,
-                            setFocus,
-                            type,
-                            value,
-                            name,
-                            hasError,
-                            describedById,
-                            ...forwardedProps,
-                        })}
-                    </div>
-                )}
-
-                {!chips && (
-                    <div className={`${CLASSNAME}__input-wrapper`}>
-                        {renderInputNative({
-                            id: textFieldId,
-                            inputRef,
-                            ...disabledStateProps,
-                            isRequired,
-                            maxLength,
-                            multiline,
-                            onBlur,
-                            onChange,
-                            onFocus,
-                            placeholder,
-                            recomputeNumberOfRows,
-                            rows,
-                            setFocus,
-                            type,
-                            value,
-                            name,
-                            hasError,
-                            describedById,
-                            ...forwardedProps,
-                        })}
+                        {input}
                     </div>
+                ) : (
+                    <div className={`${CLASSNAME}__input-wrapper`}>{input}</div>
                 )}
 
                 {(isValid || hasError) && (

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

@@ -0,0 +1,16 @@
+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 +1,3 @@
-export * from './TextField';
+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

@@ -0,0 +1,42 @@
+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;
+}

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
-
 import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
+import React, { useState } from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
 import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';

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

@@ -1,6 +1,6 @@
+import { MockInstance } from 'vitest';
 import React from 'react';
 
-import { MockInstance } from 'vitest';
 import { Button } from '@lumx/react';
 import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/uploader/Uploader.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';

package/src/components/user-block/UserBlock.stories.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+
 import { mdiMenuDown, mdiStar } from '@lumx/icons';
 import { Badge, ColorPalette, Icon, IconButton, Link, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';

package/src/components/user-block/UserBlock.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/hooks/useId.test.tsx

@@ -1,5 +1,6 @@
 import { useId } from '@lumx/react/hooks/useId';
 import { render } from '@testing-library/react';
+import React from 'react';
 
 function setup() {
     const Component = (): any => useId();

package/src/hooks/useInfiniteScroll.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 type useInfiniteScrollType = (
     ref: React.RefObject<HTMLElement>,

package/src/hooks/usePreviousValue.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 /**
  * Returns the value from the previous render.
  */

package/src/stories/decorators/withChromaticForceScreenSize.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import isChromatic from 'chromatic/isChromatic';
 
 /** Story decorator used to force a minimum screen size when running in chromatic */

package/src/stories/decorators/withNestedProps.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import set from 'lodash/set';
 
 /**

package/src/stories/decorators/withThemedBackground.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const LIGHT_BACKGROUND_COLOR = '#EEE';
 const DARK_BACKGROUND_COLOR = '#333';
 

package/src/stories/decorators/withWrapper.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * SB decorator adding a wrapping div around the story
  */

package/src/stories/utils/CustomLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 /**
  * Example custom link that can be used in linkAs props.
  */

package/src/testing/utils/ThemeSentinel.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 const TEST_ID = 'theme-sentinel';

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Button } from '@lumx/react';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
 interface ContextValue {

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Switch } from '@lumx/react/components/switch';
 import { Alignment } from '@lumx/react';
 

package/src/utils/Portal/Portal.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Portal } from './Portal';
 

package/src/utils/Portal/PortalProvider.stories.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button } from '@lumx/react';
 import { initDemoShadowDOMPortal } from '@lumx/react/stories/utils/initDemoShadowDOMPortal';
 import { PortalProvider } from './PortalProvider';

package/src/utils/Portal/PortalProvider.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PortalInit, PortalProvider } from './PortalProvider';
 import { Portal } from './Portal';

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
     Button,
     Checkbox,

package/src/utils/react/OnBeforeUnmount.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 /**
  * Helper component using useLayoutEffect to trigger a callback on before unmount.