@lumx/react 3.20.1-alpha.3 → 3.20.1-alpha.30

package/src/components/alert-dialog/AlertDialog.tsx

@@ -1,189 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import {
-    DialogProps,
-    Dialog,
-    Button,
-    Emphasis,
-    ColorPalette,
-    Icon,
-    Size,
-    Kind,
-    Toolbar,
-    ButtonProps,
-} from '@lumx/react';
-import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from '@lumx/react/hooks/useId';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
-    /** Message variant. */
-    kind?: Kind;
-    /** Dialog title. */
-    title?: string;
-    /** Props forwarded to the confirm button */
-    confirmProps: ButtonProps & {
-        onClick(): void;
-        label: string;
-    };
-    /**
-     * Props forwarded to the cancel button.
-     * Will not render a cancel button if undefined.
-     */
-    cancelProps?: ButtonProps & {
-        onClick(): void;
-        label: string;
-    };
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-
-/**
- * Associative map from message kind to color and icon.
- */
-const CONFIG = {
-    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
-    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },
-    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
-    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'AlertDialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<DialogProps> = {
-    size: Size.tiny,
-    kind: Kind.info,
-};
-
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-export const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {
-    const {
-        id,
-        title,
-        className,
-        cancelProps,
-        confirmProps,
-        kind = DEFAULT_PROPS.kind,
-        size = DEFAULT_PROPS.size,
-        dialogProps,
-        children,
-        ...forwardedProps
-    } = props;
-
-    const cancelButtonRef = React.useRef(null);
-    const confirmationButtonRef = React.useRef(null);
-    const { color, icon } = CONFIG[kind as Kind] || {};
-
-    // Define a unique ID to target title and description for aria attributes.
-    const generatedId = useId();
-    const uniqueId = id || generatedId;
-    const titleId = `${uniqueId}-title`;
-    const descriptionId = `${uniqueId}-description`;
-
-    // If content is a string, set in a paragraph.
-    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
-
-    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;
-    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};
-
-    return (
-        <Dialog
-            ref={ref}
-            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}
-            size={size}
-            dialogProps={{
-                id: uniqueId,
-                role: 'alertdialog',
-                'aria-labelledby': titleId,
-                'aria-describedby': descriptionId,
-                ...dialogProps,
-            }}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    kind,
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
-            <header>
-                <Toolbar
-                    className="lumx-spacing-margin-horizontal"
-                    before={<Icon icon={icon} size={Size.s} color={color} />}
-                    label={
-                        <h2 id={titleId} className="lumx-typography-title">
-                            {title}
-                        </h2>
-                    }
-                />
-            </header>
-
-            {children && (
-                <DescriptionElement
-                    id={descriptionId}
-                    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
-                >
-                    {children}
-                </DescriptionElement>
-            )}
-
-            <footer>
-                <Toolbar
-                    className="lumx-spacing-margin-horizontal"
-                    after={
-                        <>
-                            {cancelProps && (
-                                <Button
-                                    {...forwardedCancelProps}
-                                    ref={cancelButtonRef}
-                                    emphasis={Emphasis.medium}
-                                    onClick={cancelOnClick}
-                                >
-                                    {cancelLabel}
-                                </Button>
-                            )}
-                            <Button
-                                {...forwardedConfirmProps}
-                                ref={confirmationButtonRef}
-                                color={color}
-                                className="lumx-spacing-margin-left-regular"
-                                onClick={confirmOnClick}
-                            >
-                                {confirmLabel}
-                            </Button>
-                        </>
-                    }
-                />
-            </footer>
-        </Dialog>
-    );
-});
-
-AlertDialog.displayName = COMPONENT_NAME;
-AlertDialog.className = CLASSNAME;
-AlertDialog.defaultProps = DEFAULT_PROPS;

package/src/components/alert-dialog/index.ts

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

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -1,75 +0,0 @@
-import { useMemo, useRef, useState } from 'react';
-
-import { Autocomplete, List, ListItem, Size } from '@lumx/react';
-
-import { CITIES } from './__mockData__';
-
-export default { title: 'LumX components/autocomplete/Autocomplete' };
-
-const cityNames = CITIES.map((city) => city.text);
-
-export const Simple = (args: any) => {
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [value, setValue] = useState('');
-    const inputRef = useRef(null);
-
-    const filteredCities = useMemo(
-        () =>
-            cityNames.filter((city) => {
-                const noSpacesCity = city.replace(' ', '').toLowerCase();
-                return noSpacesCity.includes(value.replace(' ', '').toLowerCase());
-            }),
-        [value],
-    );
-
-    const close = () => setShowSuggestions(false);
-
-    const setSelectedCity = (city: string) => {
-        setValue(city);
-        setShowSuggestions(false);
-    };
-    const selectItem = (city: string) => () => setSelectedCity(city);
-
-    const onChange = (newValue: string) => {
-        setValue(newValue);
-        setShowSuggestions(newValue.length > 0);
-    };
-
-    const { activeItemIndex } = List.useKeyboardListNavigation(filteredCities, inputRef, setSelectedCity);
-
-    const onFocus = () => setShowSuggestions(value.length > 0);
-
-    const hasSuggestions = filteredCities.length > 0;
-
-    return (
-        <Autocomplete
-            isOpen={showSuggestions && hasSuggestions}
-            onClose={close}
-            value={value}
-            onChange={onChange}
-            onFocus={onFocus}
-            inputRef={inputRef}
-            {...args}
-        >
-            {hasSuggestions && (
-                <List isClickable>
-                    {filteredCities.map((city, index) => (
-                        <ListItem
-                            size={Size.tiny}
-                            key={city}
-                            isHighlighted={index === activeItemIndex}
-                            onItemSelected={selectItem(city)}
-                        >
-                            <div>{city}</div>
-                        </ListItem>
-                    ))}
-                </List>
-            )}
-        </Autocomplete>
-    );
-};
-
-export const WithClearButton = Simple.bind({}) as any;
-WithClearButton.args = {
-    clearButtonProps: { label: 'Clear' },
-};

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,99 +0,0 @@
-import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { CITIES as suggestions } from './__mockData__';
-import { Autocomplete, AutocompleteProps } from './Autocomplete';
-
-const CLASSNAME = Autocomplete.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(
-        <Autocomplete {...(props as any)}>
-            <List>
-                {suggestions.map((suggestion) => (
-                    <ListItem size={Size.tiny} key={suggestion.id}>
-                        <div>{suggestion.text}</div>
-                    </ListItem>
-                ))}
-            </List>
-        </Autocomplete>,
-        { wrapper },
-    );
-    const autocomplete = getByClassName(document.body, CLASSNAME);
-    const textField = getByClassName(autocomplete, TextField.className as string);
-    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
-    const inputNative = getByTagName(autocomplete, 'input');
-    return { props, textField, getDropdown, autocomplete, inputNative };
-};
-
-describe(`<${Autocomplete.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { autocomplete, textField, getDropdown } = setup();
-
-            expect(autocomplete.className).toMatchInlineSnapshot('"lumx-autocomplete"');
-            expect(textField).toBeInTheDocument();
-            expect(getDropdown()).not.toBeInTheDocument();
-        });
-
-        it('should render open', () => {
-            const { getDropdown } = setup({ isOpen: true });
-            expect(getDropdown()).toBeInTheDocument();
-        });
-    });
-
-    describe('Events', () => {
-        it('should trigger the onChange callback when there is a change on the Text Field', async () => {
-            const name = 'autocomplete-name';
-            const onChange = vi.fn();
-            const { inputNative } = setup({
-                name,
-                onChange,
-            });
-
-            await userEvent.tab();
-            expect(inputNative).toHaveFocus();
-            await userEvent.keyboard('a');
-
-            // (text, name, event)
-            expect(onChange).toHaveBeenCalledWith('a', name, expect.any(Object));
-        });
-
-        it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
-            const onFocus = vi.fn();
-            const onBlur = vi.fn();
-            const { inputNative } = setup({
-                onFocus,
-                onBlur,
-            });
-
-            await userEvent.tab();
-            expect(inputNative).toHaveFocus();
-            expect(onFocus).toHaveBeenCalled();
-
-            await userEvent.tab();
-            expect(inputNative).not.toHaveFocus();
-            expect(onBlur).toHaveBeenCalled();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'autocomplete',
-        forwardAttributes: 'autocomplete',
-        forwardRef: 'autocomplete',
-        applyTheme: {
-            affects: [{ element: 'textField' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,294 +0,0 @@
-import { ReactNode, SyntheticEvent, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
-
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { useFocus } from '@lumx/react/hooks/useFocus';
-import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-
-/**
- * Defines the props of the component.
- */
-export interface AutocompleteProps extends GenericProps, HasTheme {
-    /**
-     * Whether the suggestions list should display anchored to the input or to the wrapper.
-     * @see {@link DropdownProps#anchorToInput}
-     */
-    anchorToInput?: boolean;
-    /**
-     * Props to pass to the clear button (minus those already set by the TextField props).
-     * If not specified, the button won't be displayed.
-     * @see {@link TextFieldProps#clearButtonProps}
-     */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /**
-     * Reference to the <input> or <textarea> element.
-     * @see {@link TextFieldProps#inputRef}
-     */
-    inputRef?: TextFieldProps['inputRef'];
-    /**
-     * The offset that will be applied to the Dropdown position.
-     * @see {@link DropdownProps#offset}
-     */
-    offset?: Offset;
-    /**
-     * The preferred Dropdown location against the anchor element.
-     * @see {@link DropdownProps#placement}
-     */
-    placement?: Placement;
-    /**
-     * Manage dropdown width:
-     *   - `maxWidth`: dropdown not bigger than anchor
-     *   - `minWidth` or `true`: dropdown not smaller than anchor
-     *   - `width`: dropdown equal to the anchor.
-     * @see {@link DropdownProps#fitToAnchorWidth}
-     */
-    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
-    /**
-     * The error related to the component.
-     * @see {@link TextFieldProps#error}
-     */
-    error?: string | ReactNode;
-    /**
-     * Whether the text field is displayed with error style or not.
-     * @see {@link TextFieldProps#hasError}
-     */
-    hasError?: boolean;
-    /**
-     * Whether the text box should be focused upon closing the suggestions or not.
-     */
-    shouldFocusOnClose?: boolean;
-    /**
-     * The helper message of the text field.
-     * @see {@link TextFieldProps#helper}
-     */
-    helper?: string;
-    /**
-     * The icon of the text field (SVG path).
-     * @see {@link TextFieldProps#icon}
-     */
-    icon?: string;
-    /**
-     * Whether the component is disabled or not.
-     * @see {@link TextFieldProps#isDisabled}
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the component is required or not.
-     * @see {@link TextFieldProps#isRequired}
-     */
-    isRequired?: boolean;
-    /**
-     * Whether the text field is displayed with valid style or not.
-     * @see {@link TextFieldProps#isValid}
-     */
-    isValid?: boolean;
-    /**
-     * The label of the text field displayed in a label tag.
-     * @see {@link TextFieldProps#label}
-     */
-    label?: string;
-    /**
-     * The placeholder message of the text field.
-     * @see {@link TextFieldProps#placeholder}
-     */
-    placeholder?: string;
-    /** List of suggestions to display during autocomplete. */
-    children: React.ReactNode;
-    /**
-     * The list of chips to be displayed before the text field input.
-     */
-    chips?: React.ReactNode;
-    /**
-     * The value of the text field.
-     * @see {@link TextFieldProps#value}
-     */
-    value: string;
-    /**
-     * Whether the suggestions from the autocomplete should be displayed or not.
-     * @see {@link DropdownProps#isOpen}
-     */
-    isOpen: boolean;
-    /**
-     * The native input name property.
-     * @see {@link TextFieldProps#name}
-     */
-    name?: string;
-    /**
-     * Whether a click in the Autocomplete dropdown would close it or not.
-     * @see {@link DropdownProps#closeOnClick}
-     */
-    closeOnClick?: boolean;
-    /**
-     * Whether a click anywhere out of the Autocomplete would close it or not.
-     * @see {@link DropdownProps#closeOnClickAway}
-     */
-    closeOnClickAway?: boolean;
-    /**
-     * Whether an escape key press would close the Autocomplete or not.
-     * @see {@link DropdownProps#closeOnEscape}
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
-     * @see {@link DropdownProps#focusAnchorOnClose}
-     */
-    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
-    /**
-     * The function called on blur.
-     * @see {@link TextFieldProps#onBlur}
-     */
-    onBlur?(event: React.FocusEvent): void;
-    /**
-     * On change callback.
-     * @see {@link TextFieldProps#onChange}
-     */
-    onChange(value: string, name?: string, event?: SyntheticEvent): void;
-    /**
-     * The function called on close.
-     * @see {@link DropdownProps#onClose}
-     */
-    onClose?(): void;
-    /**
-     * The function called on focus.
-     * @see {@link TextFieldProps#onFocus}
-     */
-    onFocus?(event: React.FocusEvent): void;
-    /**
-     * The function called when the bottom of the dropdown is reached.
-     * @see {@link DropdownProps#onInfiniteScroll}
-     */
-    onInfiniteScroll?(): void;
-    /**
-     * Props forwarded to the underlying TextField component.
-     * Only the props not managed by the Autocomplete can be set.
-     * @see {@link TextFieldProps}
-     */
-    textFieldProps?: Partial<TextFieldProps>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Autocomplete';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<AutocompleteProps> = {
-    anchorToInput: false,
-    closeOnClick: false,
-    closeOnClickAway: true,
-    closeOnEscape: true,
-    shouldFocusOnClose: false,
-};
-
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        anchorToInput = DEFAULT_PROPS.anchorToInput,
-        children,
-        chips,
-        className,
-        closeOnClick = DEFAULT_PROPS.closeOnClick,
-        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
-        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-        error,
-        fitToAnchorWidth,
-        hasError,
-        helper,
-        icon,
-        inputRef,
-        clearButtonProps,
-        isRequired,
-        isOpen,
-        isValid,
-        label,
-        name,
-        offset,
-        onBlur,
-        onChange,
-        onClose,
-        onFocus,
-        onInfiniteScroll,
-        placeholder,
-        placement,
-        shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,
-        theme = defaultTheme,
-        value,
-        textFieldProps = {},
-        focusAnchorOnClose,
-        ...forwardedProps
-    } = otherProps;
-    const inputAnchorRef = useRef<HTMLElement>(null);
-    const textFieldRef = useRef(null);
-    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            <TextField
-                {...textFieldProps}
-                chips={chips}
-                error={error}
-                hasError={hasError}
-                helper={helper}
-                icon={icon}
-                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
-                clearButtonProps={clearButtonProps}
-                {...disabledStateProps}
-                isRequired={isRequired}
-                isValid={isValid}
-                label={label}
-                name={name}
-                onBlur={onBlur}
-                onChange={onChange}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                textFieldRef={textFieldRef}
-                theme={theme}
-                value={value}
-            />
-            <Dropdown
-                anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}
-                closeOnClick={closeOnClick}
-                closeOnClickAway={closeOnClickAway}
-                closeOnEscape={closeOnEscape}
-                focusAnchorOnClose={focusAnchorOnClose}
-                fitToAnchorWidth={fitToAnchorWidth}
-                isOpen={isOpen}
-                offset={offset}
-                onClose={onClose}
-                onInfiniteScroll={onInfiniteScroll}
-                placement={placement}
-                shouldFocusOnOpen={false}
-                theme={theme}
-            >
-                {children}
-            </Dropdown>
-        </div>
-    );
-});
-Autocomplete.displayName = COMPONENT_NAME;
-Autocomplete.className = CLASSNAME;
-Autocomplete.defaultProps = DEFAULT_PROPS;