@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/select/Select.tsx

@@ -0,0 +1,199 @@
+import { 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

@@ -0,0 +1,315 @@
+/* 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 { 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>
+    );
+};