@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,198 @@
+import React, { forwardRef, ReactNode, RefObject, SyntheticEvent } from 'react';
+
+import classNames from 'classnames';
+
+import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
+
+import { Size, Theme } from '@lumx/react/components';
+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 { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+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,
+};
+
+export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
+    anchorRef,
+    handleKeyboardNav,
+    hasError,
+    icon,
+    id,
+    isDisabled,
+    isEmpty,
+    isRequired,
+    isValid,
+    label,
+    onClear,
+    onInputClick,
+    placeholder,
+    selectedChipRender,
+    selectedValueRender,
+    theme,
+    value,
+    variant,
+    ...forwardedProps
+}) => (
+    <>
+        {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={anchorRef as RefObject<HTMLDivElement>}
+                    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={anchorRef as RefObject<HTMLAnchorElement>}
+                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: Comp<SelectMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {
+    return WithSelectContext(
+        SelectMultipleField,
+        {
+            ...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/dist/src/components/select/WithSelectContext.tsx

@@ -0,0 +1,143 @@
+import React, { Ref, useCallback, useMemo, useRef } from 'react';
+
+import classNames from 'classnames';
+import { uid } from 'uid';
+
+import { Kind, Theme } from '@lumx/react/components';
+import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
+import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
+import { Placement } from '@lumx/react/components/popover/Popover';
+
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
+import { CoreSelectProps, SelectVariant } 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);
+
+/** The default value of props. */
+export const DEFAULT_PROPS: Partial<CoreSelectProps> = {
+    theme: Theme.light,
+    variant: SelectVariant.input,
+};
+
+export const WithSelectContext = (
+    SelectElement: React.FC<any>,
+    {
+        children,
+        className,
+        isMultiple,
+        closeOnClick = !isMultiple,
+        disabled,
+        error,
+        hasError,
+        helper,
+        id,
+        isDisabled = disabled,
+        isEmpty,
+        isOpen,
+        isRequired,
+        isValid,
+        label,
+        onClear,
+        onDropdownClose,
+        onInfiniteScroll,
+        onInputClick,
+        placeholder,
+        theme = DEFAULT_PROPS.theme,
+        value,
+        variant = DEFAULT_PROPS.variant,
+        ...forwardedProps
+    }: CoreSelectProps,
+    ref: Ref<HTMLDivElement>,
+): React.ReactElement => {
+    const selectId = useMemo(() => id || `select-${uid()}`, [id]);
+    const anchorRef = useRef<HTMLElement>(null);
+    const selectRef = 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();
+    };
+
+    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}
+            >
+                {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/dist/src/components/select/__snapshots__/Select.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Select> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-select lumx-select--has-unique lumx-select lumx-select--is-empty lumx-select--theme-light"
+>
+  <SelectField
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    handleKeyboardNav={[Function]}
+    id="select-uid"
+    isEmpty={true}
+    selectedValueRender={[Function]}
+    theme="light"
+    value=""
+    variant="input"
+  />
+  <Dropdown
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    closeOnClick={true}
+    closeOnClickAway={true}
+    closeOnEscape={true}
+    fitToAnchorWidth={true}
+    fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
+    isOpen={false}
+    onClose={[Function]}
+    placement="bottom-start"
+    shouldFocusOnOpen={true}
+  >
+    <span>
+      Select Component
+    </span>
+  </Dropdown>
+</div>
+`;

package/dist/src/components/select/__snapshots__/SelectMultiple.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SelectMultiple> Snapshots and structure should render chips 1`] = `
+<div
+  className="lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"
+>
+  <SelectMultipleField
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    handleKeyboardNav={[Function]}
+    id="select-uid"
+    isEmpty={true}
+    selectedChipRender={[Function]}
+    selectedValueRender={[Function]}
+    theme="light"
+    value={[]}
+    variant="chip"
+  />
+  <Dropdown
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    closeOnClick={false}
+    closeOnClickAway={true}
+    closeOnEscape={true}
+    fitToAnchorWidth={true}
+    fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
+    isOpen={false}
+    onClose={[Function]}
+    placement="bottom-start"
+    shouldFocusOnOpen={true}
+  >
+    <span>
+      Select Component
+    </span>
+  </Dropdown>
+</div>
+`;
+
+exports[`<SelectMultiple> Snapshots and structure should render defaults 1`] = `
+<div
+  className="lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"
+>
+  <SelectMultipleField
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    handleKeyboardNav={[Function]}
+    id="select-uid"
+    isEmpty={true}
+    selectedChipRender={[Function]}
+    selectedValueRender={[Function]}
+    theme="light"
+    value={[]}
+    variant="input"
+  />
+  <Dropdown
+    anchorRef={
+      {
+        "current": null,
+      }
+    }
+    closeOnClick={false}
+    closeOnClickAway={true}
+    closeOnEscape={true}
+    fitToAnchorWidth={true}
+    fitWithinViewportHeight={true}
+    focusAnchorOnClose={true}
+    isOpen={false}
+    onClose={[Function]}
+    placement="bottom-start"
+    shouldFocusOnOpen={true}
+  >
+    <span>
+      Select Component
+    </span>
+  </Dropdown>
+</div>
+`;

package/dist/src/components/select/constants.ts

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

package/dist/src/components/select/index.ts

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