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

package/_internal/components/radio-button-559a4863.js

@@ -0,0 +1,149 @@
+import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useId } from '../useId-3a1facc0.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Theme } from '@lumx/core/js/constants';
+import { InputLabel } from './input-label-2feb0bb0.js';
+import { InputHelper } from './input-helper-64153099.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'RadioButton';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * RadioButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const RadioButton = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    checked,
+    className,
+    helper,
+    id,
+    inputRef,
+    isChecked = checked,
+    label,
+    name,
+    onChange,
+    theme = defaultTheme,
+    value,
+    inputProps,
+    ...forwardedProps
+  } = otherProps;
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
+  const handleChange = event => {
+    if (onChange) {
+      onChange(value, name, event);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      isChecked,
+      isDisabled: isAnyDisabled,
+      isUnchecked: !isChecked,
+      prefix: CLASSNAME$1,
+      theme
+    })),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME$1}__input-wrapper`,
+      children: [/*#__PURE__*/jsx("input", {
+        ref: inputRef,
+        className: `${CLASSNAME$1}__input-native`,
+        ...disabledStateProps,
+        id: inputId,
+        type: "radio",
+        name: name,
+        value: value,
+        checked: isChecked,
+        onChange: handleChange,
+        readOnly: inputProps?.readOnly || isAnyDisabled,
+        "aria-describedby": helper ? `${inputId}-helper` : undefined,
+        ...inputProps
+      }), /*#__PURE__*/jsxs("div", {
+        className: `${CLASSNAME$1}__input-placeholder`,
+        children: [/*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME$1}__input-background`
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME$1}__input-indicator`
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME$1}__content`,
+      children: [label && /*#__PURE__*/jsx(InputLabel, {
+        htmlFor: inputId,
+        theme: theme,
+        className: `${CLASSNAME$1}__label`,
+        children: label
+      }), helper && /*#__PURE__*/jsx(InputHelper, {
+        id: `${inputId}-helper`,
+        theme: theme,
+        className: `${CLASSNAME$1}__helper`,
+        children: helper
+      })]
+    })]
+  });
+});
+RadioButton.displayName = COMPONENT_NAME$1;
+RadioButton.className = CLASSNAME$1;
+RadioButton.defaultProps = DEFAULT_PROPS;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'RadioGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * RadioGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const RadioGroup = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME),
+    children: children
+  });
+});
+RadioGroup.displayName = COMPONENT_NAME;
+RadioGroup.className = CLASSNAME;
+
+export { RadioButton, RadioGroup };
+//# sourceMappingURL=radio-button-559a4863.js.map

package/_internal/components/radio-button-559a4863.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-559a4863.js","sources":["../../../src/components/radio-button/RadioButton.tsx","../../../src/components/radio-button/RadioGroup.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioButtonProps extends GenericProps, HasTheme, HasAriaDisabled {\n    /** Helper text. */\n    helper?: string;\n    /** Native input id property. */\n    id?: string;\n    /** Native input ref. */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /** Whether it is checked or not. */\n    isChecked?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label content. */\n    label?: ReactNode;\n    /** Native input name property. */\n    name?: string;\n    /** Native input value property. */\n    value?: string;\n    /** On change callback. */\n    onChange?(value?: string, name?: string, event?: SyntheticEvent): void;\n    /** optional props for input */\n    inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioButton';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<RadioButtonProps> = {};\n\n/**\n * RadioButton component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        checked,\n        className,\n        helper,\n        id,\n        inputRef,\n        isChecked = checked,\n        label,\n        name,\n        onChange,\n        theme = defaultTheme,\n        value,\n        inputProps,\n        ...forwardedProps\n    } = otherProps;\n    const generatedInputId = useId();\n    const inputId = id || generatedInputId;\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            onChange(value, name, event);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    isChecked,\n                    isDisabled: isAnyDisabled,\n                    isUnchecked: !isChecked,\n                    prefix: CLASSNAME,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__input-wrapper`}>\n                <input\n                    ref={inputRef}\n                    className={`${CLASSNAME}__input-native`}\n                    {...disabledStateProps}\n                    id={inputId}\n                    type=\"radio\"\n                    name={name}\n                    value={value}\n                    checked={isChecked}\n                    onChange={handleChange}\n                    readOnly={inputProps?.readOnly || isAnyDisabled}\n                    aria-describedby={helper ? `${inputId}-helper` : undefined}\n                    {...inputProps}\n                />\n\n                <div className={`${CLASSNAME}__input-placeholder`}>\n                    <div className={`${CLASSNAME}__input-background`} />\n                    <div className={`${CLASSNAME}__input-indicator`} />\n                </div>\n            </div>\n\n            <div className={`${CLASSNAME}__content`}>\n                {label && (\n                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>\n                        {label}\n                    </InputLabel>\n                )}\n                {helper && (\n                    <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>\n                        {helper}\n                    </InputHelper>\n                )}\n            </div>\n        </div>\n    );\n});\nRadioButton.displayName = COMPONENT_NAME;\nRadioButton.className = CLASSNAME;\nRadioButton.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioGroupProps extends GenericProps {\n    /** RadioButton elements */\n    children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioGroup';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * RadioGroup component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {\n    const { children, className, ...forwardedProps } = props;\n\n    return (\n        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            {children}\n        </div>\n    );\n});\nRadioGroup.displayName = COMPONENT_NAME;\nRadioGroup.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","RadioButton","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","generatedInputId","useId","inputId","handleChange","event","_jsxs","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","children","_jsx","type","readOnly","undefined","InputLabel","htmlFor","InputHelper","displayName","defaultProps","RadioGroup"],"mappings":"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"}

package/_internal/components/select-48d4fa8c.js

@@ -0,0 +1,454 @@
+import { c as classNames, f as forwardRef } from '../forwardRef-15f62847.js';
+import isEmpty from 'lodash/isEmpty';
+import { mdiCheckCircle, mdiAlertCircle, mdiCloseCircle, mdiMenuDown, mdiClose } from '@lumx/icons';
+import { Theme, Kind, Size, Emphasis } from '@lumx/core/js/constants';
+import { I as IconButton } from '../IconButton-f4df224c.js';
+import { C as Chip } from '../Chip-a34f6905.js';
+import { Icon } from './icon-b708cca4.js';
+import { InputLabel } from './input-label-2feb0bb0.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Dropdown } from './dropdown-0baed51b.js';
+import { InputHelper } from './input-helper-64153099.js';
+import { u as useFocusTrap } from '../useFocusTrap-c3c6378b.js';
+import { u as useId } from '../useId-3a1facc0.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { P as Placement } from '../constants-b9e57936.js';
+
+/**
+ * Listen on element focus to store the focus status.
+ */
+function useListenFocus(ref) {
+  const [isFocus, setFocus] = useState(false);
+  useEffect(() => {
+    const {
+      current: element
+    } = ref;
+    if (!element) {
+      return undefined;
+    }
+    const onFocus = () => setFocus(true);
+    const onBlur = () => setFocus(false);
+    element.addEventListener('focus', onFocus);
+    element.addEventListener('blur', onBlur);
+    return () => {
+      element.removeEventListener('focus', onFocus);
+      element.removeEventListener('blur', onBlur);
+    };
+  }, [ref, setFocus]);
+  return isFocus;
+}
+
+/** The display name of the component. */
+const COMPONENT_NAME$2 = 'Select';
+
+/** The default class name and classes prefix for this component. */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+const WithSelectContext = (SelectElement, props, ref) => {
+  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(null);
+  const selectRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const isFocus = useListenFocus(anchorRef);
+  const handleKeyboardNav = useCallback(evt => {
+    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 /*#__PURE__*/jsxs("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$2,
+      theme: theme === Theme.light ? Theme.light : Theme.dark
+    })),
+    children: [/*#__PURE__*/jsx(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
+    }), /*#__PURE__*/jsx(Dropdown, {
+      anchorRef: anchorRef,
+      closeOnClick: closeOnClick,
+      closeOnClickAway: true,
+      closeOnEscape: true,
+      isOpen: !!isOpen,
+      placement: Placement.BOTTOM_START,
+      onClose: onClose,
+      onInfiniteScroll: onInfiniteScroll,
+      ref: dropdownRef,
+      children: children
+    }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
+      className: `${CLASSNAME$2}__helper`,
+      kind: Kind.error,
+      theme: theme,
+      children: error
+    }), helper && /*#__PURE__*/jsx(InputHelper, {
+      className: `${CLASSNAME$2}__helper`,
+      theme: theme,
+      children: helper
+    })]
+  });
+};
+
+/**
+ * Select variants.
+ */
+const SelectVariant = {
+  input: 'input',
+  chip: 'chip'
+};
+
+/** The display name of the component. */
+const COMPONENT_NAME$1 = 'Select';
+
+/** The default class name and classes prefix for this component. */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/** The default value of props. */
+const DEFAULT_PROPS$1 = {
+  selectedValueRender: choice => choice,
+  variant: SelectVariant.input
+};
+const stopPropagation = evt => evt.stopPropagation();
+
+/**
+ * Select component.
+ */
+const SelectField = 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 /*#__PURE__*/jsxs(Fragment, {
+    children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
+      children: [label && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$1}__header`,
+        children: /*#__PURE__*/jsx(InputLabel, {
+          htmlFor: id,
+          className: `${CLASSNAME$1}__label`,
+          isRequired: isRequired,
+          theme: theme,
+          children: label
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        ref: mergeRefs(anchorRef, selectElementRef),
+        id: id,
+        className: `${CLASSNAME$1}__wrapper`,
+        onClick: onInputClick,
+        onKeyDown: handleKeyboardNav,
+        tabIndex: isDisabled ? undefined : 0,
+        "aria-disabled": isDisabled || undefined,
+        ...forwardedProps,
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$1}__input-icon`,
+          color: theme === Theme.dark ? 'light' : undefined,
+          icon: icon,
+          size: Size.xs
+        }), /*#__PURE__*/jsxs("div", {
+          className: classNames([`${CLASSNAME$1}__input-native`, isEmpty && placeholder && `${CLASSNAME$1}__input-native--placeholder`]),
+          children: [!isEmpty && /*#__PURE__*/jsx("span", {
+            children: selectedValueRender?.(value)
+          }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
+            children: placeholder
+          })]
+        }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME$1}__input-validity`,
+          children: /*#__PURE__*/jsx(Icon, {
+            icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+            size: Size.xxs
+          })
+        }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
+          ...clearButtonProps,
+          className: `${CLASSNAME$1}__input-clear`,
+          icon: mdiCloseCircle,
+          emphasis: Emphasis.low,
+          size: Size.s,
+          theme: theme,
+          onClick: onClear,
+          onKeyDown: stopPropagation
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME$1}__input-indicator`,
+          children: /*#__PURE__*/jsx(Icon, {
+            icon: mdiMenuDown,
+            size: Size.s
+          })
+        })]
+      })]
+    }), variant === SelectVariant.chip && /*#__PURE__*/jsxs(Chip, {
+      id: id,
+      isSelected: !isEmpty,
+      isDisabled: isDisabled,
+      after: /*#__PURE__*/jsx(Icon, {
+        icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+      }),
+      onAfterClick: isEmpty ? onInputClick : onClear,
+      onClick: onInputClick,
+      ref: mergeRefs(anchorRef, selectElementRef),
+      theme: theme,
+      ...forwardedProps,
+      children: [isEmpty && /*#__PURE__*/jsx("span", {
+        children: label
+      }), !isEmpty && /*#__PURE__*/jsx("span", {
+        children: selectedValueRender?.(value)
+      })]
+    })]
+  });
+};
+
+/**
+ * Select component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Select = forwardRef((props, ref) => {
+  const isEmpty$1 = isEmpty(props.value);
+  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
+  return WithSelectContext(SelectField, {
+    ...DEFAULT_PROPS$1,
+    ...props,
+    className: classNames(props.className, handleBasicClasses({
+      hasInputClear,
+      hasUnique: !props.isEmpty,
+      prefix: CLASSNAME$1
+    })),
+    hasInputClear,
+    isEmpty: isEmpty$1
+  }, ref);
+});
+Select.displayName = COMPONENT_NAME$1;
+Select.className = CLASSNAME$1;
+Select.defaultProps = DEFAULT_PROPS$1;
+Select.className = CLASSNAME$1;
+
+/** 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 = {
+  selectedChipRender(choice, index, onClear, isDisabled, theme) {
+    const onClick = event => onClear && onClear(event, choice);
+    return /*#__PURE__*/jsx(Chip, {
+      after: onClear && /*#__PURE__*/jsx(Icon, {
+        icon: mdiClose,
+        size: Size.xxs
+      }),
+      isDisabled: isDisabled,
+      size: Size.s,
+      onAfterClick: onClick,
+      onClick: onClick,
+      theme: theme,
+      children: choice
+    }, index);
+  },
+  selectedValueRender: choice => choice,
+  variant: SelectVariant.input
+};
+const SelectMultipleField = 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 /*#__PURE__*/jsxs(Fragment, {
+    children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
+      children: [label && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__header`,
+        children: /*#__PURE__*/jsx(InputLabel, {
+          htmlFor: id,
+          className: `${CLASSNAME}__label`,
+          isRequired: isRequired,
+          theme: theme,
+          children: label
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        ref: mergeRefs(anchorRef, selectElementRef),
+        id: id,
+        className: `${CLASSNAME}__wrapper`,
+        onClick: onInputClick,
+        onKeyDown: handleKeyboardNav,
+        tabIndex: isDisabled ? undefined : 0,
+        "aria-disabled": isDisabled || undefined,
+        ...forwardedProps,
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME}__input-icon`,
+          color: theme === Theme.dark ? 'light' : undefined,
+          icon: icon,
+          size: Size.xs
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}__chips`,
+          children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
+        }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
+          className: classNames([`${CLASSNAME}__input-native`, `${CLASSNAME}__input-native--placeholder`]),
+          children: /*#__PURE__*/jsx("span", {
+            children: placeholder
+          })
+        }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}__input-validity`,
+          children: /*#__PURE__*/jsx(Icon, {
+            icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+            size: Size.xxs
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}__input-indicator`,
+          children: /*#__PURE__*/jsx(Icon, {
+            icon: mdiMenuDown,
+            size: Size.s
+          })
+        })]
+      })]
+    }), variant === SelectVariant.chip && /*#__PURE__*/jsxs(Chip, {
+      id: id,
+      isSelected: !isEmpty,
+      isDisabled: isDisabled,
+      after: /*#__PURE__*/jsx(Icon, {
+        icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+      }),
+      onAfterClick: isEmpty ? onInputClick : onClear,
+      onClick: onInputClick,
+      ref: mergeRefs(anchorRef, selectElementRef),
+      theme: theme,
+      ...forwardedProps,
+      children: [isEmpty && /*#__PURE__*/jsx("span", {
+        children: label
+      }), !isEmpty && /*#__PURE__*/jsxs("span", {
+        children: [/*#__PURE__*/jsx("span", {
+          children: selectedValueRender?.(value[0])
+        }), value.length > 1 && /*#__PURE__*/jsxs("span", {
+          children: ["\xA0+", value.length - 1]
+        })]
+      })]
+    })]
+  });
+};
+
+/**
+ * SelectMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SelectMultiple = forwardRef((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;
+
+export { Select, SelectMultiple, SelectMultipleField, SelectVariant };
+//# sourceMappingURL=select-48d4fa8c.js.map