@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/select/Select.tsx

@@ -1,199 +0,0 @@
-import React, { RefObject } from 'react';
-
-import classNames from 'classnames';
-import lodashIsEmpty from 'lodash/isEmpty';
-
-import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
-import { IconButton } from '@lumx/react/components/button/IconButton';
-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 { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { WithSelectContext } from './WithSelectContext';
-import { CoreSelectProps, SelectVariant } from './constants';
-
-/** Defines the props of the component. */
-export interface SelectProps extends CoreSelectProps {
-    /** Selected value. */
-    value: string;
-}
-
-export { SelectVariant };
-
-/** 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<SelectProps> = {
-    selectedValueRender: (choice) => choice,
-    variant: SelectVariant.input,
-};
-
-const stopPropagation = (evt: Event) => evt.stopPropagation();
-
-/**
- * Select component.
- */
-const SelectField: React.FC<SelectProps> = (props) => {
-    const defaultTheme = useTheme();
-    const {
-        anchorRef,
-        clearButtonProps,
-        handleKeyboardNav,
-        hasError,
-        hasInputClear,
-        icon,
-        id,
-        isDisabled,
-        isEmpty,
-        isRequired,
-        isValid,
-        label,
-        onClear,
-        onInputClick,
-        placeholder,
-        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={classNames([
-                                `${CLASSNAME}__input-native`,
-                                isEmpty && placeholder && `${CLASSNAME}__input-native--placeholder`,
-                            ])}
-                        >
-                            {!isEmpty && <span>{selectedValueRender?.(value)}</span>}
-
-                            {isEmpty && placeholder && <span>{placeholder}</span>}
-                        </div>
-
-                        {(isValid || hasError) && (
-                            <div className={`${CLASSNAME}__input-validity`}>
-                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />
-                            </div>
-                        )}
-
-                        {hasInputClear && clearButtonProps && (
-                            <IconButton
-                                {...clearButtonProps}
-                                className={`${CLASSNAME}__input-clear`}
-                                icon={mdiCloseCircle}
-                                emphasis={Emphasis.low}
-                                size={Size.s}
-                                theme={theme}
-                                onClick={onClear}
-                                onKeyDown={stopPropagation}
-                            />
-                        )}
-
-                        <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>{selectedValueRender?.(value)}</span>}
-                </Chip>
-            )}
-        </>
-    );
-};
-
-/**
- * Select component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
-    const isEmpty = lodashIsEmpty(props.value);
-    const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
-
-    return WithSelectContext(
-        SelectField,
-        {
-            ...DEFAULT_PROPS,
-            ...props,
-            className: classNames(
-                props.className,
-                handleBasicClasses({
-                    hasInputClear,
-                    hasUnique: !props.isEmpty,
-                    prefix: CLASSNAME,
-                }),
-            ),
-            hasInputClear,
-            isEmpty,
-        },
-        ref,
-    );
-});
-Select.displayName = COMPONENT_NAME;
-Select.className = CLASSNAME;
-Select.defaultProps = DEFAULT_PROPS;
-Select.className = CLASSNAME;

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

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