@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,198 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -1,43 +0,0 @@
-// 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

@@ -1,87 +0,0 @@
-// 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

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

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

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