@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/_internal/e2440593.js

@@ -0,0 +1,148 @@
+import { m as getRootClassName, c as Size, n as forwardRef, b as Theme, j as ColorPalette, _ as _extends, l as classNames } from './d3321a86.js';
+import isFunction from 'lodash/isFunction';
+import { useCallback } from 'react';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { o as onEnterPressed } from './88ec77c2.js';
+import { u as useTheme } from './3181f000.js';
+import { u as useDisableStateProps } from './60923026.js';
+
+/**
+ * Wrap mouse event handler to stop event propagation.
+ *
+ * @param  handler   The mouse handler to wrap.
+ * @return Mouse handler stopping propagation.
+ */
+function useStopPropagation(handler) {
+  return useCallback(evt => {
+    if (!evt || !isFunction(handler)) {
+      return;
+    }
+    handler(evt);
+    evt.stopPropagation();
+  }, [handler]);
+}
+
+/**
+ * Chip sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Chip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  size: Size.m
+};
+
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Chip = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    after,
+    before,
+    children,
+    className,
+    color,
+    isClickable: propIsClickable,
+    isHighlighted,
+    isSelected,
+    onAfterClick,
+    onBeforeClick,
+    onClick,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    href,
+    onKeyDown,
+    ...forwardedProps
+  } = otherProps;
+  const hasAfterClick = isFunction(onAfterClick);
+  const hasBeforeClick = isFunction(onBeforeClick);
+  const hasOnClick = isFunction(props.onClick);
+  const isButton = hasOnClick && !href;
+  const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
+
+  // Adapt color to the theme.
+  const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+  const handleOnBeforeClick = useStopPropagation(onBeforeClick);
+  const handleOnAfterClick = useStopPropagation(onAfterClick);
+  const handleKeyDown = evt => {
+    onKeyDown?.(evt);
+    if (hasOnClick) {
+      onEnterPressed(onClick)(evt);
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("a", _extends({
+      role: isButton ? 'button' : undefined,
+      tabIndex: isClickable && !disabledStateProps.disabled ? 0 : undefined
+    }, forwardedProps, {
+      href: !disabledStateProps.disabled ? href : undefined,
+      ref: ref,
+      className: classNames(className, handleBasicClasses({
+        clickable: isClickable,
+        color: chipColor,
+        isDisabled: isAnyDisabled,
+        hasAfter: Boolean(after),
+        hasBefore: Boolean(before),
+        highlighted: Boolean(isHighlighted),
+        prefix: CLASSNAME,
+        selected: Boolean(isSelected),
+        size,
+        unselected: Boolean(!isSelected)
+      })),
+      "aria-disabled": isClickable && isAnyDisabled || undefined,
+      onClick: hasOnClick ? onClick : undefined,
+      onKeyDown: handleKeyDown
+    }), before &&
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      className: classNames(`${CLASSNAME}__before`, {
+        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick
+      }),
+      onClick: handleOnBeforeClick
+    }, before), /*#__PURE__*/React.createElement("div", {
+      className: `${CLASSNAME}__label`
+    }, children), after &&
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      className: classNames(`${CLASSNAME}__after`, {
+        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick
+      }),
+      onClick: handleOnAfterClick
+    }, after))
+  );
+});
+Chip.displayName = COMPONENT_NAME;
+Chip.className = CLASSNAME;
+Chip.defaultProps = DEFAULT_PROPS;
+
+export { Chip as C };
+//# sourceMappingURL=e2440593.js.map

package/_internal/e2440593.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2440593.js","sources":["../../src/hooks/useStopPropagation.ts","../../src/components/chip/Chip.tsx"],"sourcesContent":["import isFunction from 'lodash/isFunction';\nimport { MouseEventHandler, useCallback } from 'react';\n\n/**\n * Wrap mouse event handler to stop event propagation.\n *\n * @param  handler   The mouse handler to wrap.\n * @return Mouse handler stopping propagation.\n */\nexport function useStopPropagation(handler?: MouseEventHandler): MouseEventHandler {\n    return useCallback(\n        (evt) => {\n            if (!evt || !isFunction(handler)) {\n                return;\n            }\n            handler(evt);\n            evt.stopPropagation();\n        },\n        [handler],\n    );\n}\n","import { MouseEventHandler, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isFunction from 'lodash/isFunction';\n\nimport { ColorPalette, Size, Theme } from '@lumx/react';\nimport { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { onEnterPressed } from '@lumx/core/js/utils';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Chip sizes.\n */\ntype ChipSize = Extract<Size, 's' | 'm'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ChipProps extends GenericProps, HasTheme, HasAriaDisabled {\n    /** A component to be rendered after the content. */\n    after?: ReactNode;\n    /** A component to be rendered before the content. */\n    before?: ReactNode;\n    /** Color variant. */\n    color?: ColorPalette;\n    /** Whether the component is clickable or not. */\n    isClickable?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the chip is currently in a highlighted state or not. */\n    isHighlighted?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Size variant. */\n    size?: ChipSize;\n    /** On \"after\" element clicked callback. */\n    onAfterClick?: MouseEventHandler;\n    /** On \"before\" element clicked callback. */\n    onBeforeClick?: MouseEventHandler;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Chip';\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<ChipProps> = {\n    size: Size.m,\n};\n\n/**\n * Chip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        after,\n        before,\n        children,\n        className,\n        color,\n        isClickable: propIsClickable,\n        isHighlighted,\n        isSelected,\n        onAfterClick,\n        onBeforeClick,\n        onClick,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        href,\n        onKeyDown,\n        ...forwardedProps\n    } = otherProps;\n    const hasAfterClick = isFunction(onAfterClick);\n    const hasBeforeClick = isFunction(onBeforeClick);\n    const hasOnClick = isFunction(props.onClick);\n    const isButton = hasOnClick && !href;\n    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;\n\n    // Adapt color to the theme.\n    const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    const handleOnBeforeClick = useStopPropagation(onBeforeClick);\n    const handleOnAfterClick = useStopPropagation(onAfterClick);\n    const handleKeyDown = (evt: React.KeyboardEvent) => {\n        onKeyDown?.(evt);\n        if (hasOnClick) {\n            onEnterPressed(onClick)(evt);\n        }\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <a\n            role={isButton ? 'button' : undefined}\n            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : undefined}\n            {...forwardedProps}\n            href={!disabledStateProps.disabled ? href : undefined}\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    clickable: isClickable,\n                    color: chipColor,\n                    isDisabled: isAnyDisabled,\n                    hasAfter: Boolean(after),\n                    hasBefore: Boolean(before),\n                    highlighted: Boolean(isHighlighted),\n                    prefix: CLASSNAME,\n                    selected: Boolean(isSelected),\n                    size,\n                    unselected: Boolean(!isSelected),\n                }),\n            )}\n            aria-disabled={(isClickable && isAnyDisabled) || undefined}\n            onClick={hasOnClick ? onClick : undefined}\n            onKeyDown={handleKeyDown}\n        >\n            {before && (\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                <div\n                    className={classNames(`${CLASSNAME}__before`, {\n                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,\n                    })}\n                    onClick={handleOnBeforeClick}\n                >\n                    {before}\n                </div>\n            )}\n            <div className={`${CLASSNAME}__label`}>{children}</div>\n            {after && (\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                <div\n                    className={classNames(`${CLASSNAME}__after`, {\n                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,\n                    })}\n                    onClick={handleOnAfterClick}\n                >\n                    {after}\n                </div>\n            )}\n        </a>\n    );\n});\nChip.displayName = COMPONENT_NAME;\nChip.className = CLASSNAME;\nChip.defaultProps = DEFAULT_PROPS;\n"],"names":["useStopPropagation","handler","useCallback","evt","isFunction","stopPropagation","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Chip","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","after","before","children","className","color","isClickable","propIsClickable","isHighlighted","isSelected","onAfterClick","onBeforeClick","onClick","theme","href","onKeyDown","forwardedProps","hasAfterClick","hasBeforeClick","hasOnClick","isButton","Boolean","chipColor","ColorPalette","dark","handleOnBeforeClick","handleOnAfterClick","handleKeyDown","onEnterPressed","React","createElement","_extends","role","undefined","tabIndex","disabled","classNames","handleBasicClasses","clickable","isDisabled","hasAfter","hasBefore","highlighted","prefix","selected","unselected","displayName","defaultProps"],"mappings":"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"}

package/_internal/e4613195.js

@@ -0,0 +1,59 @@
+import { m as getRootClassName, n as forwardRef, _ as _extends, l as classNames } from './d3321a86.js';
+import isInteger from 'lodash/isInteger';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GridColumn';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @param ref Component ref.
+ * @return React element.
+ */
+const GridColumn = forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    gap,
+    maxColumns,
+    itemMinWidth,
+    children,
+    className,
+    style = {},
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    style: {
+      ...style,
+      ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+      ['--lumx-grid-column-columns']: maxColumns,
+      ['--lumx-grid-column-gap']: gap && `var(--lumx-spacing-unit-${gap})`
+    }
+  }), children);
+});
+GridColumn.displayName = COMPONENT_NAME;
+GridColumn.className = CLASSNAME;
+GridColumn.defaultProps = DEFAULT_PROPS;
+
+export { GridColumn };
+//# sourceMappingURL=e4613195.js.map

package/_internal/e4613195.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e4613195.js","sources":["../../src/components/grid-column/GridColumn.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport isInteger from 'lodash/isInteger';\nimport classNames from 'classnames';\n\nimport { Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface GridColumnProps extends GenericProps {\n    /** Customize the root element. */\n    as?: React.ElementType;\n    /** Children elements. */\n    children?: ReactNode;\n    /** Space between columns and rows. */\n    gap?: GridColumnGapSize;\n    /** Ideal number of columns. */\n    maxColumns?: number;\n    /** Minimum width for each item, reduce the number of column if there is not enough space. */\n    itemMinWidth?: number;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GridColumn';\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<GridColumnProps> = {};\n\n/**\n * The GridColumn is a layout component that can display children in a grid\n * with custom display properties. It also comes with a responsive design,\n * with a number of column that reduce when there is not enough space for each item.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement => {\n    const {\n        as: Component = 'div',\n        gap,\n        maxColumns,\n        itemMinWidth,\n        children,\n        className,\n        style = {},\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Component\n            {...forwardedProps}\n            ref={ref as React.Ref<any>}\n            className={classNames(className, CLASSNAME)}\n            style={{\n                ...style,\n                ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,\n                ['--lumx-grid-column-columns' as any]: maxColumns,\n                ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,\n            }}\n        >\n            {children}\n        </Component>\n    );\n});\nGridColumn.displayName = COMPONENT_NAME;\nGridColumn.className = CLASSNAME;\nGridColumn.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","GridColumn","forwardRef","props","ref","as","Component","gap","maxColumns","itemMinWidth","children","className","style","forwardedProps","React","createElement","_extends","classNames","isInteger","displayName","defaultProps"],"mappings":";;;AAYA;AACA;AACA;;AAcA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG,EAAE,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAmB;EAChF,MAAM;IACFC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBC,GAAG;IACHC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,SAAS;IACTC,KAAK,GAAG,EAAE;IACV,GAAGC,cAAAA;AACP,GAAC,GAAGV,KAAK,CAAA;EAET,oBACIW,KAAA,CAAAC,aAAA,CAACT,SAAS,EAAAU,QAAA,KACFH,cAAc,EAAA;AAClBT,IAAAA,GAAG,EAAEA,GAAsB;AAC3BO,IAAAA,SAAS,EAAEM,UAAU,CAACN,SAAS,EAAEb,SAAS,CAAE;AAC5Cc,IAAAA,KAAK,EAAE;AACH,MAAA,GAAGA,KAAK;MACR,CAAC,mCAAmC,GAAUM,SAAS,CAACT,YAAY,CAAC,IAAI,CAAGA,EAAAA,YAAY,CAAI,EAAA,CAAA;MAC5F,CAAC,4BAA4B,GAAUD,UAAU;AACjD,MAAA,CAAC,wBAAwB,GAAUD,GAAG,IAAI,2BAA2BA,GAAG,CAAA,CAAA,CAAA;AAC5E,KAAA;AAAE,GAAA,CAAA,EAEDG,QACM,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFT,UAAU,CAACkB,WAAW,GAAGtB,cAAc,CAAA;AACvCI,UAAU,CAACU,SAAS,GAAGb,SAAS,CAAA;AAChCG,UAAU,CAACmB,YAAY,GAAGpB,aAAa;;;;"}

package/_internal/e53b5a39.js

@@ -0,0 +1,407 @@
+import { m as getRootClassName, b as Theme, l as classNames, _ as _extends, K as Kind, n as forwardRef, c as Size, d as Emphasis } from './d3321a86.js';
+import isEmpty from 'lodash/isEmpty';
+import { I as IconButton } from './7b214f74.js';
+import { C as Chip } from './e2440593.js';
+import { I as Icon, m as mdiAlertCircle } from './4e1dde79.js';
+import { InputLabel } from './9210e2f3.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { u as useTheme } from './3181f000.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Dropdown } from './2938a251.js';
+import { InputHelper } from './fc47f2da.js';
+import { u as useFocusTrap } from './3f3de25e.js';
+import { u as useId } from './3a1facc0.js';
+import { P as Placement } from './407735b4.js';
+import { m as mdiCloseCircle } from './ef5d1aac.js';
+import { m as mdiCheckCircle } from './de24f857.js';
+import { m as mdiClose } from './eaf6c45a.js';
+
+const mdiMenuDown = 'm7 10 5 5 5-5z';
+
+/**
+ * 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__*/React.createElement("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
+    }))
+  }, /*#__PURE__*/React.createElement(SelectElement, _extends({}, 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__*/React.createElement(Dropdown, {
+    anchorRef: anchorRef,
+    closeOnClick: closeOnClick,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    isOpen: !!isOpen,
+    placement: Placement.BOTTOM_START,
+    onClose: onClose,
+    onInfiniteScroll: onInfiniteScroll,
+    ref: dropdownRef
+  }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME$2}__helper`,
+    kind: Kind.error,
+    theme: theme
+  }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME$2}__helper`,
+    theme: theme
+  }, 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__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__header`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    className: `${CLASSNAME$1}__label`,
+    isRequired: isRequired,
+    theme: theme
+  }, label)), /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(anchorRef, selectElementRef),
+    id: id,
+    className: `${CLASSNAME$1}__wrapper`,
+    onClick: onInputClick,
+    onKeyDown: handleKeyboardNav,
+    tabIndex: isDisabled ? undefined : 0,
+    "aria-disabled": isDisabled || undefined
+  }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$1}__input-icon`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames([`${CLASSNAME$1}__input-native`, isEmpty && placeholder && `${CLASSNAME$1}__input-native--placeholder`])
+  }, !isEmpty && /*#__PURE__*/React.createElement("span", null, selectedValueRender?.(value)), isEmpty && placeholder && /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__input-validity`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+    size: Size.xxs
+  })), hasInputClear && clearButtonProps && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
+    className: `${CLASSNAME$1}__input-clear`,
+    icon: mdiCloseCircle,
+    emphasis: Emphasis.low,
+    size: Size.s,
+    theme: theme,
+    onClick: onClear,
+    onKeyDown: stopPropagation
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME$1}__input-indicator`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiMenuDown,
+    size: Size.s
+  })))), variant === SelectVariant.chip && /*#__PURE__*/React.createElement(Chip, _extends({
+    id: id,
+    isSelected: !isEmpty,
+    isDisabled: isDisabled,
+    after: /*#__PURE__*/React.createElement(Icon, {
+      icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+    }),
+    onAfterClick: isEmpty ? onInputClick : onClear,
+    onClick: onInputClick,
+    ref: mergeRefs(anchorRef, selectElementRef),
+    theme: theme
+  }, forwardedProps), isEmpty && /*#__PURE__*/React.createElement("span", null, label), !isEmpty && /*#__PURE__*/React.createElement("span", null, 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;
+
+/** Defines the props of the component. */
+
+/** 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__*/React.createElement(Chip, {
+      key: index,
+      after: onClear && /*#__PURE__*/React.createElement(Icon, {
+        icon: mdiClose,
+        size: Size.xxs
+      }),
+      isDisabled: isDisabled,
+      size: Size.s,
+      onAfterClick: onClick,
+      onClick: onClick,
+      theme: theme
+    }, choice);
+  },
+  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__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__header`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    className: `${CLASSNAME}__label`,
+    isRequired: isRequired,
+    theme: theme
+  }, label)), /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(anchorRef, selectElementRef),
+    id: id,
+    className: `${CLASSNAME}__wrapper`,
+    onClick: onInputClick,
+    onKeyDown: handleKeyboardNav,
+    tabIndex: isDisabled ? undefined : 0,
+    "aria-disabled": isDisabled || undefined
+  }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__input-icon`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: icon,
+    size: Size.xs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__chips`
+  }, !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))), isEmpty && placeholder && /*#__PURE__*/React.createElement("div", {
+    className: classNames([`${CLASSNAME}__input-native`, `${CLASSNAME}__input-native--placeholder`])
+  }, /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-validity`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+    size: Size.xxs
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-indicator`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiMenuDown,
+    size: Size.s
+  })))), variant === SelectVariant.chip && /*#__PURE__*/React.createElement(Chip, _extends({
+    id: id,
+    isSelected: !isEmpty,
+    isDisabled: isDisabled,
+    after: /*#__PURE__*/React.createElement(Icon, {
+      icon: isEmpty ? mdiMenuDown : mdiCloseCircle
+    }),
+    onAfterClick: isEmpty ? onInputClick : onClear,
+    onClick: onInputClick,
+    ref: mergeRefs(anchorRef, selectElementRef),
+    theme: theme
+  }, forwardedProps), isEmpty && /*#__PURE__*/React.createElement("span", null, label), !isEmpty && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, selectedValueRender?.(value[0])), value.length > 1 && /*#__PURE__*/React.createElement("span", null, "\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=e53b5a39.js.map