@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/src/components/select/SelectMultiple.tsx

@@ -1,206 +0,0 @@
-import { ReactNode, RefObject, SyntheticEvent } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Size, Theme } from '@lumx/core/js/constants';
-import { Chip } from '@lumx/react/components/chip/Chip';
-import { Icon } from '@lumx/react/components/icon/Icon';
-import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-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 { WithSelectContext } from './WithSelectContext';
-import { CoreSelectProps, SelectVariant } from './constants';
-
-/** Defines the props of the component. */
-export interface SelectMultipleProps extends CoreSelectProps {
-    /** Selected values. */
-    value: string[];
-    /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender?(
-        choice: string,
-        index: number,
-        onClear?: (event: SyntheticEvent, choice: string) => void,
-        isDisabled?: boolean,
-        theme?: any,
-    ): ReactNode | string;
-}
-
-/** The display name of the component. */
-const COMPONENT_NAME = 'Select';
-
-/** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/** The default value of props. */
-const DEFAULT_PROPS: Partial<SelectMultipleProps> = {
-    selectedChipRender(choice, index, onClear, isDisabled?, theme?) {
-        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);
-        return (
-            <Chip
-                key={index}
-                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}
-                isDisabled={isDisabled}
-                size={Size.s}
-                onAfterClick={onClick}
-                onClick={onClick}
-                theme={theme}
-            >
-                {choice}
-            </Chip>
-        );
-    },
-    selectedValueRender: (choice) => choice,
-    variant: SelectVariant.input,
-};
-
-export const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {
-    const defaultTheme = useTheme();
-    const {
-        anchorRef,
-        handleKeyboardNav,
-        hasError,
-        icon,
-        id,
-        isDisabled,
-        isEmpty,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onInputClick,
-        placeholder,
-        selectedChipRender,
-        selectedValueRender,
-        theme = defaultTheme,
-        value,
-        variant,
-        selectElementRef,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <>
-            {variant === SelectVariant.input && (
-                <>
-                    {label && (
-                        <div className={`${CLASSNAME}__header`}>
-                            <InputLabel
-                                htmlFor={id}
-                                className={`${CLASSNAME}__label`}
-                                isRequired={isRequired}
-                                theme={theme}
-                            >
-                                {label}
-                            </InputLabel>
-                        </div>
-                    )}
-
-                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                    <div
-                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
-                        id={id}
-                        className={`${CLASSNAME}__wrapper`}
-                        onClick={onInputClick}
-                        onKeyDown={handleKeyboardNav}
-                        tabIndex={isDisabled ? undefined : 0}
-                        aria-disabled={isDisabled || undefined}
-                        {...forwardedProps}
-                    >
-                        {icon && (
-                            <Icon
-                                className={`${CLASSNAME}__input-icon`}
-                                color={theme === Theme.dark ? 'light' : undefined}
-                                icon={icon}
-                                size={Size.xs}
-                            />
-                        )}
-
-                        <div className={`${CLASSNAME}__chips`}>
-                            {!isEmpty &&
-                                value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}
-                        </div>
-
-                        {isEmpty && placeholder && (
-                            <div
-                                className={classNames([
-                                    `${CLASSNAME}__input-native`,
-                                    `${CLASSNAME}__input-native--placeholder`,
-                                ])}
-                            >
-                                <span>{placeholder}</span>
-                            </div>
-                        )}
-
-                        {(isValid || hasError) && (
-                            <div className={`${CLASSNAME}__input-validity`}>
-                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
-                            </div>
-                        )}
-
-                        <div className={`${CLASSNAME}__input-indicator`}>
-                            <Icon icon={mdiMenuDown} size={Size.s} />
-                        </div>
-                    </div>
-                </>
-            )}
-
-            {variant === SelectVariant.chip && (
-                <Chip
-                    id={id}
-                    isSelected={!isEmpty}
-                    isDisabled={isDisabled}
-                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
-                    onAfterClick={isEmpty ? onInputClick : onClear}
-                    onClick={onInputClick}
-                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
-                    theme={theme}
-                    {...forwardedProps}
-                >
-                    {isEmpty && <span>{label}</span>}
-
-                    {!isEmpty && (
-                        <span>
-                            <span>{selectedValueRender?.(value[0])}</span>
-
-                            {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}
-                        </span>
-                    )}
-                </Chip>
-            )}
-        </>
-    );
-};
-
-/**
- * SelectMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {
-    return WithSelectContext(
-        SelectMultipleField,
-        {
-            ...DEFAULT_PROPS,
-            ...props,
-            className: classNames(
-                props.className,
-                handleBasicClasses({
-                    hasMultiple: !props.isEmpty,
-                    prefix: CLASSNAME,
-                }),
-            ),
-            isEmpty: props.value.length === 0,
-            isMultiple: true,
-        },
-        ref,
-    );
-});
-SelectMultiple.displayName = COMPONENT_NAME;
-SelectMultiple.className = CLASSNAME;
-SelectMultiple.defaultProps = DEFAULT_PROPS;

package/src/components/select/WithSelectContext.tsx

@@ -1,147 +0,0 @@
-import classNames from 'classnames';
-import { Ref, useCallback, useRef } from 'react';
-
-import { Placement } from '@lumx/react';
-import { Kind, Theme } from '@lumx/core/js/constants';
-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/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 { CoreSelectProps } from './constants';
-
-/** The display name of the component. */
-const COMPONENT_NAME = 'Select';
-
-/** The default class name and classes prefix for this component. */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-export const WithSelectContext = (
-    SelectElement: React.FC<any>,
-    props: CoreSelectProps,
-    ref: Ref<HTMLDivElement>,
-): React.ReactElement => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        children,
-        className,
-        focusElement,
-        isMultiple,
-        closeOnClick = !isMultiple,
-        disabled,
-        error,
-        hasError,
-        helper,
-        id,
-        isDisabled = disabled,
-        isEmpty,
-        isOpen,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onDropdownClose,
-        onInfiniteScroll,
-        onInputClick,
-        placeholder,
-        theme = defaultTheme,
-        value,
-        variant,
-        ...forwardedProps
-    } = props;
-    const generatedSelectId = useId();
-    const selectId = id || generatedSelectId;
-    const anchorRef = useRef<HTMLElement>(null);
-    const selectRef = useRef<HTMLDivElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const isFocus = useListenFocus(anchorRef);
-
-    const handleKeyboardNav = useCallback(
-        (evt: React.KeyboardEvent<HTMLElement>) => {
-            if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
-                evt.preventDefault();
-                onInputClick();
-            }
-        },
-        [onInputClick],
-    );
-
-    const onClose = () => {
-        if (onDropdownClose) {
-            onDropdownClose();
-        }
-        anchorRef?.current?.blur();
-    };
-
-    // Handle focus trap.
-    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
-
-    return (
-        <div
-            ref={mergeRefs(ref, selectRef)}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    hasError,
-                    hasLabel: Boolean(label),
-                    hasPlaceholder: Boolean(placeholder),
-                    hasValue: !isEmpty,
-                    isDisabled,
-                    isEmpty,
-                    isFocus,
-                    isOpen,
-                    isValid,
-                    prefix: CLASSNAME,
-                    theme: theme === Theme.light ? Theme.light : Theme.dark,
-                }),
-            )}
-        >
-            <SelectElement
-                {...forwardedProps}
-                anchorRef={anchorRef}
-                aria-disabled={isDisabled}
-                handleKeyboardNav={handleKeyboardNav}
-                hasError={hasError}
-                isDisabled={isDisabled}
-                isEmpty={isEmpty}
-                isRequired={isRequired}
-                isValid={isValid}
-                label={label}
-                placeholder={placeholder}
-                id={selectId}
-                theme={theme}
-                value={value}
-                variant={variant}
-                onClear={onClear}
-                onInputClick={onInputClick}
-            />
-            <Dropdown
-                anchorRef={anchorRef}
-                closeOnClick={closeOnClick}
-                closeOnClickAway
-                closeOnEscape
-                isOpen={!!isOpen}
-                placement={Placement.BOTTOM_START}
-                onClose={onClose}
-                onInfiniteScroll={onInfiniteScroll}
-                ref={dropdownRef}
-            >
-                {children}
-            </Dropdown>
-            {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>
-                    {error}
-                </InputHelper>
-            )}
-            {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
-                    {helper}
-                </InputHelper>
-            )}
-        </div>
-    );
-};

package/src/components/select/constants.ts

@@ -1,55 +0,0 @@
-import { IconButtonProps } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { ReactNode, SyntheticEvent } from 'react';
-
-/**
- * Select variants.
- */
-export const SelectVariant = { input: 'input', chip: 'chip' } as const;
-export type SelectVariant = ValueOf<typeof SelectVariant>;
-
-export interface CoreSelectProps extends GenericProps, HasTheme {
-    /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /** Whether the select (input variant) is displayed with error style or not. */
-    hasError?: boolean;
-    /** Error message. */
-    error?: string | ReactNode;
-    /** Helper text. */
-    helper?: string;
-    /** Whether the select should close on click. */
-    closeOnClick?: boolean;
-    /** Icon (SVG path). */
-    icon?: string;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Whether the select (input variant) is displayed with valid style or not. */
-    isValid?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Placeholder input text. */
-    placeholder?: string;
-    /** Select variant. */
-    variant?: SelectVariant;
-    /** On clear callback. */
-    onClear?(event: SyntheticEvent, value?: string): void;
-    /** On blur callback. */
-    onBlur?(): void;
-    /** On filter text change callback (with 500ms debounce). */
-    onFilter?(): void;
-    /** On input click callback (can be used for dropdown toggle). */
-    onInputClick?(): void;
-    /** On dropdown close callback. */
-    onDropdownClose?(): void;
-    /** On scroll end callback. */
-    onInfiniteScroll?(): void;
-    /** Render value function. Default: Renders the value as a string. */
-    selectedValueRender?(choice: string): ReactNode | string;
-    /** Children */
-    children?: React.ReactNode;
-}

package/src/components/select/index.ts

@@ -1,2 +0,0 @@
-export * from './Select';
-export * from './SelectMultiple';

package/src/components/side-navigation/SideNavigation.stories.tsx

@@ -1,191 +0,0 @@
-/* eslint-disable no-script-url */
-import React from 'react';
-
-import { mdiAccount } from '@lumx/icons';
-import { Emphasis, SideNavigation, SideNavigationItem } from '@lumx/react';
-
-export default { title: 'LumX components/side-navigation/Side Navigation' };
-
-const CustomLink: React.FC<{ children?: React.ReactNode }> = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
-
-export const Simple = () => (
-    <SideNavigation>
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-        <SideNavigationItem
-            label="Navigation item"
-            emphasis={Emphasis.low}
-            linkProps={{ href: 'https://www.google.com' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem
-            label="Navigation item"
-            emphasis={Emphasis.low}
-            linkProps={{ href: 'https://www.google.com/not-visited' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem
-            label="Navigation item (custom link)"
-            emphasis={Emphasis.low}
-            linkAs={CustomLink}
-            linkProps={{ href: 'https://www.google.com/not-visited-1' }}
-            toggleButtonProps={{ label: 'Toggle' }}
-        />
-        <SideNavigationItem label="Navigation item" emphasis={Emphasis.low} toggleButtonProps={{ label: 'Toggle' }} />
-    </SideNavigation>
-);
-
-export const With3Levels = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                onClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    onClick={toggleL2}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3"
-                        emphasis={Emphasis.low}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-export const With3LevelsAndIcons = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                onClick={toggleL1}
-                icon={mdiAccount}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    onClick={toggleL2}
-                    icon={mdiAccount}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3.1"
-                        emphasis={Emphasis.low}
-                        isSelected
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.2"
-                        emphasis={Emphasis.low}
-                        icon={mdiAccount}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.3"
-                        emphasis={Emphasis.low}
-                        icon={mdiAccount}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-export const With3LevelsAndMultiActions = () => {
-    const [l1IsOpen, setL1IsOpen] = React.useState(true);
-    const [l2IsOpen, setL2IsOpen] = React.useState(true);
-    const toggleL1 = () => setL1IsOpen(!l1IsOpen);
-    const toggleL2 = () => setL2IsOpen(!l2IsOpen);
-    const alertMessage = (message: string) => () => alert(message);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={l1IsOpen}
-                linkProps={{ href: 'javascript:alert("Level 1")' }}
-                icon={mdiAccount}
-                onActionClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    isOpen={l2IsOpen}
-                    linkProps={{ href: 'javascript:alert("Level 2")' }}
-                    onActionClick={toggleL2}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                >
-                    <SideNavigationItem
-                        label="Level 3.1"
-                        emphasis={Emphasis.low}
-                        linkProps={{ href: 'javascript:alert("Level 3.1 item is clicked")' }}
-                        onActionClick={alertMessage('Level 3.1 action is clicked')}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                    <SideNavigationItem
-                        label="Level 3.2"
-                        emphasis={Emphasis.low}
-                        onClick={alertMessage('Level 3.2 item is clicked')}
-                        onActionClick={alertMessage('Level 3.2 action is clicked')}
-                        toggleButtonProps={{ label: 'Toggle' }}
-                    />
-                </SideNavigationItem>
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};
-
-/** Using closeMode="hide" keeps children in DOM on close */
-export const CloseModeHide = () => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggleL1 = () => setIsOpen(!isOpen);
-
-    return (
-        <SideNavigation>
-            <SideNavigationItem
-                closeMode="hide"
-                label="Level 1"
-                emphasis={Emphasis.high}
-                isOpen={isOpen}
-                onClick={toggleL1}
-                toggleButtonProps={{ label: 'Toggle' }}
-            >
-                <SideNavigationItem
-                    closeMode="hide"
-                    label="Level 2"
-                    emphasis={Emphasis.medium}
-                    toggleButtonProps={{ label: 'Toggle' }}
-                />
-            </SideNavigationItem>
-        </SideNavigation>
-    );
-};

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { Theme } from '@lumx/react';
-
-import { SideNavigation, SideNavigationProps } from './SideNavigation';
-
-const CLASSNAME = SideNavigation.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SideNavigationProps> = {}) => {
-    render(<SideNavigation {...(props as any)} />);
-    const sideNavigation = getByClassName(document.body, CLASSNAME);
-    return { props, sideNavigation };
-};
-
-describe(`<${SideNavigation.displayName}>`, () => {
-    it('should render default', () => {
-        const { sideNavigation } = setup();
-        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-side-navigation"');
-    });
-
-    it('should render dark theme', () => {
-        const { sideNavigation } = setup({ theme: Theme.dark });
-        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-color-font-light-N lumx-side-navigation"');
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'sideNavigation',
-        forwardAttributes: 'sideNavigation',
-        forwardRef: 'sideNavigation',
-    });
-});

package/src/components/side-navigation/SideNavigation.tsx

@@ -1,52 +0,0 @@
-import { Children, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { SideNavigationItem, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface SideNavigationProps extends GenericProps, HasTheme {
-    /** SideNavigationItem elements. */
-    children: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SideNavigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SideNavigation component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const { children, className, theme = defaultTheme, ...forwardedProps } = props;
-    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
-
-    return (
-        <ul
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}
-        >
-            {content}
-        </ul>
-    );
-});
-SideNavigation.displayName = COMPONENT_NAME;
-SideNavigation.className = CLASSNAME;