@lumx/react 3.20.1-alpha.31 → 3.20.1-alpha.33

package/_internal/{components/radio-button-929c7bee.js → packages/lumx-react/src/components/radio-button/RadioButton-0a59ffbf.js}

@@ -1,23 +1,23 @@
 import classNames from 'classnames';
 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 { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
+import { useId } from '../../hooks/useId-11687649.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useDisableStateProps } from '../../utils/disabled/useDisableStateProps-2391c02d.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
-import { InputLabel } from './input-label-30d199c3.js';
-import { InputHelper } from './input-helper-2e4e49fd.js';
+import { InputLabel } from '../input-label/InputLabel-7ce8e604.js';
+import { InputHelper } from '../input-helper/InputHelper-a6c7ec2d.js';
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1 = 'RadioButton';
+const COMPONENT_NAME = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -67,14 +67,14 @@ const RadioButton = forwardRef((props, ref) => {
       isChecked,
       isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
-      prefix: CLASSNAME$1,
+      prefix: CLASSNAME,
       theme
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$1}__input-wrapper`,
+      className: `${CLASSNAME}__input-wrapper`,
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
-        className: `${CLASSNAME$1}__input-native`,
+        className: `${CLASSNAME}__input-native`,
         ...disabledStateProps,
         id: inputId,
         type: "radio",
@@ -86,65 +86,32 @@ const RadioButton = forwardRef((props, ref) => {
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$1}__input-placeholder`,
+        className: `${CLASSNAME}__input-placeholder`,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$1}__input-background`
+          className: `${CLASSNAME}__input-background`
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$1}__input-indicator`
+          className: `${CLASSNAME}__input-indicator`
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$1}__content`,
+      className: `${CLASSNAME}__content`,
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
         theme: theme,
-        className: `${CLASSNAME$1}__label`,
+        className: `${CLASSNAME}__label`,
         children: label
       }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
-        className: `${CLASSNAME$1}__helper`,
+        className: `${CLASSNAME}__helper`,
         children: helper
       })]
     })]
   });
 });
-RadioButton.displayName = COMPONENT_NAME$1;
-RadioButton.className = CLASSNAME$1;
+RadioButton.displayName = COMPONENT_NAME;
+RadioButton.className = CLASSNAME;
 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-929c7bee.js.map
+export { RadioButton };
+//# sourceMappingURL=RadioButton-0a59ffbf.js.map

package/_internal/packages/lumx-react/src/components/radio-button/RadioButton-0a59ffbf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton-0a59ffbf.js","sources":["../../../../../../../src/components/radio-button/RadioButton.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"],"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"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/radio-button/RadioGroup-7957765c.js

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * 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 { RadioGroup };
+//# sourceMappingURL=RadioGroup-7957765c.js.map

package/_internal/packages/lumx-react/src/components/radio-button/RadioGroup-7957765c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-7957765c.js","sources":["../../../../../../../src/components/radio-button/RadioGroup.tsx"],"sourcesContent":["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","RadioGroup","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName"],"mappings":";;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEP,SAAS,CAAE;AAAAM,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,UAAU,CAACS,WAAW,GAAGZ,cAAc,CAAA;AACvCG,UAAU,CAACK,SAAS,GAAGP,SAAS;;;;"}

package/_internal/packages/lumx-react/src/components/select/Select-530565a4.js

@@ -0,0 +1,165 @@
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import { Theme, Size, Emphasis } from '@lumx/core/js/constants';
+import { IconButton } from '../button/IconButton-a740ce59.js';
+import { Chip } from '../chip/Chip-f1a3942a.js';
+import { Icon } from '../icon/Icon-21a83e8c.js';
+import { InputLabel } from '../input-label/InputLabel-7ce8e604.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { WithSelectContext } from './WithSelectContext-864d6be2.js';
+import { SelectVariant } from './constants-5178b7ba.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mdiCloseCircle } from '../../../../lumx-icons/dist/esm/close-circle-6f37d603.js';
+import { mdiMenuDown } from '../../../../lumx-icons/dist/esm/menu-down-b0846836.js';
+import { mdiCheckCircle } from '../../../../lumx-icons/dist/esm/check-circle-e47dacb8.js';
+import { mdiAlertCircle } from '../../../../lumx-icons/dist/esm/alert-circle-893eb653.js';
+
+/** 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 = {
+  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}__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__*/jsxs("div", {
+          className: classNames([`${CLASSNAME}__input-native`, isEmpty && placeholder && `${CLASSNAME}__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}__input-validity`,
+          children: /*#__PURE__*/jsx(Icon, {
+            icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+            size: Size.xxs
+          })
+        }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
+          ...clearButtonProps,
+          className: `${CLASSNAME}__input-clear`,
+          icon: mdiCloseCircle,
+          emphasis: Emphasis.low,
+          size: Size.s,
+          theme: theme,
+          onClick: onClear,
+          onKeyDown: stopPropagation
+        }), /*#__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__*/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,
+    ...props,
+    className: classNames(props.className, handleBasicClasses({
+      hasInputClear,
+      hasUnique: !props.isEmpty,
+      prefix: CLASSNAME
+    })),
+    hasInputClear,
+    isEmpty: isEmpty$1
+  }, ref);
+});
+Select.displayName = COMPONENT_NAME;
+Select.className = CLASSNAME;
+Select.defaultProps = DEFAULT_PROPS;
+Select.className = CLASSNAME;
+
+export { Select, SelectVariant };
+//# sourceMappingURL=Select-530565a4.js.map

package/_internal/packages/lumx-react/src/components/select/Select-530565a4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-530565a4.js","sources":["../../../../../../../src/components/select/Select.tsx"],"sourcesContent":["import { RefObject } from 'react';\n\nimport classNames from 'classnames';\nimport lodashIsEmpty from 'lodash/isEmpty';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';\nimport { Emphasis, Size, Theme } from '@lumx/core/js/constants';\nimport { IconButton } from '@lumx/react/components/button/IconButton';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectProps extends CoreSelectProps {\n    /** Selected value. */\n    value: string;\n}\n\nexport { SelectVariant };\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectProps> = {\n    selectedValueRender: (choice) => choice,\n    variant: SelectVariant.input,\n};\n\nconst stopPropagation = (evt: Event) => evt.stopPropagation();\n\n/**\n * Select component.\n */\nconst SelectField: React.FC<SelectProps> = (props) => {\n    const defaultTheme = useTheme();\n    const {\n        anchorRef,\n        clearButtonProps,\n        handleKeyboardNav,\n        hasError,\n        hasInputClear,\n        icon,\n        id,\n        isDisabled,\n        isEmpty,\n        isRequired,\n        isValid,\n        label,\n        onClear,\n        onInputClick,\n        placeholder,\n        selectedValueRender,\n        theme = defaultTheme,\n        value,\n        variant,\n        selectElementRef,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <>\n            {variant === SelectVariant.input && (\n                <>\n                    {label && (\n                        <div className={`${CLASSNAME}__header`}>\n                            <InputLabel\n                                htmlFor={id}\n                                className={`${CLASSNAME}__label`}\n                                isRequired={isRequired}\n                                theme={theme}\n                            >\n                                {label}\n                            </InputLabel>\n                        </div>\n                    )}\n\n                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                    <div\n                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n                        id={id}\n                        className={`${CLASSNAME}__wrapper`}\n                        onClick={onInputClick}\n                        onKeyDown={handleKeyboardNav}\n                        tabIndex={isDisabled ? undefined : 0}\n                        aria-disabled={isDisabled || undefined}\n                        {...forwardedProps}\n                    >\n                        {icon && (\n                            <Icon\n                                className={`${CLASSNAME}__input-icon`}\n                                color={theme === Theme.dark ? 'light' : undefined}\n                                icon={icon}\n                                size={Size.xs}\n                            />\n                        )}\n\n                        <div\n                            className={classNames([\n                                `${CLASSNAME}__input-native`,\n                                isEmpty && placeholder && `${CLASSNAME}__input-native--placeholder`,\n                            ])}\n                        >\n                            {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n\n                            {isEmpty && placeholder && <span>{placeholder}</span>}\n                        </div>\n\n                        {(isValid || hasError) && (\n                            <div className={`${CLASSNAME}__input-validity`}>\n                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n                            </div>\n                        )}\n\n                        {hasInputClear && clearButtonProps && (\n                            <IconButton\n                                {...clearButtonProps}\n                                className={`${CLASSNAME}__input-clear`}\n                                icon={mdiCloseCircle}\n                                emphasis={Emphasis.low}\n                                size={Size.s}\n                                theme={theme}\n                                onClick={onClear}\n                                onKeyDown={stopPropagation}\n                            />\n                        )}\n\n                        <div className={`${CLASSNAME}__input-indicator`}>\n                            <Icon icon={mdiMenuDown} size={Size.s} />\n                        </div>\n                    </div>\n                </>\n            )}\n\n            {variant === SelectVariant.chip && (\n                <Chip\n                    id={id}\n                    isSelected={!isEmpty}\n                    isDisabled={isDisabled}\n                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n                    onAfterClick={isEmpty ? onInputClick : onClear}\n                    onClick={onInputClick}\n                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n                    theme={theme}\n                    {...forwardedProps}\n                >\n                    {isEmpty && <span>{label}</span>}\n\n                    {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n                </Chip>\n            )}\n        </>\n    );\n};\n\n/**\n * Select component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {\n    const isEmpty = lodashIsEmpty(props.value);\n    const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;\n\n    return WithSelectContext(\n        SelectField,\n        {\n            ...DEFAULT_PROPS,\n            ...props,\n            className: classNames(\n                props.className,\n                handleBasicClasses({\n                    hasInputClear,\n                    hasUnique: !props.isEmpty,\n                    prefix: CLASSNAME,\n                }),\n            ),\n            hasInputClear,\n            isEmpty,\n        },\n        ref,\n    );\n});\nSelect.displayName = COMPONENT_NAME;\nSelect.className = CLASSNAME;\nSelect.defaultProps = DEFAULT_PROPS;\nSelect.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","selectedValueRender","choice","variant","SelectVariant","input","stopPropagation","evt","SelectField","props","defaultTheme","useTheme","anchorRef","clearButtonProps","handleKeyboardNav","hasError","hasInputClear","icon","id","isDisabled","isEmpty","isRequired","isValid","label","onClear","onInputClick","placeholder","theme","value","selectElementRef","forwardedProps","_jsxs","_Fragment","children","_jsx","className","InputLabel","htmlFor","ref","mergeRefs","onClick","onKeyDown","tabIndex","undefined","Icon","color","Theme","dark","size","Size","xs","classNames","mdiCheckCircle","mdiAlertCircle","xxs","IconButton","mdiCloseCircle","emphasis","Emphasis","low","s","mdiMenuDown","chip","Chip","isSelected","after","onAfterClick","Select","forwardRef","lodashIsEmpty","WithSelectContext","handleBasicClasses","hasUnique","prefix","displayName","defaultProps"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/select/SelectMultiple-d7fa1cf7.js

@@ -0,0 +1,165 @@
+import classNames from 'classnames';
+import { Size, Theme } from '@lumx/core/js/constants';
+import { Chip } from '../chip/Chip-f1a3942a.js';
+import { Icon } from '../icon/Icon-21a83e8c.js';
+import { InputLabel } from '../input-label/InputLabel-7ce8e604.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { WithSelectContext } from './WithSelectContext-864d6be2.js';
+import { SelectVariant } from './constants-5178b7ba.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { mdiClose } from '../../../../lumx-icons/dist/esm/close-ad7c38b0.js';
+import { mdiCheckCircle } from '../../../../lumx-icons/dist/esm/check-circle-e47dacb8.js';
+import { mdiAlertCircle } from '../../../../lumx-icons/dist/esm/alert-circle-893eb653.js';
+import { mdiMenuDown } from '../../../../lumx-icons/dist/esm/menu-down-b0846836.js';
+import { mdiCloseCircle } from '../../../../lumx-icons/dist/esm/close-circle-6f37d603.js';
+
+/** 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 { SelectMultiple, SelectMultipleField };
+//# sourceMappingURL=SelectMultiple-d7fa1cf7.js.map

package/_internal/packages/lumx-react/src/components/select/SelectMultiple-d7fa1cf7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultiple-d7fa1cf7.js","sources":["../../../../../../../src/components/select/SelectMultiple.tsx"],"sourcesContent":["import { ReactNode, RefObject, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';\nimport { Size, Theme } from '@lumx/core/js/constants';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectMultipleProps extends CoreSelectProps {\n    /** Selected values. */\n    value: string[];\n    /** Selected value render function. Default: Renders the value inside of a Chip. */\n    selectedChipRender?(\n        choice: string,\n        index: number,\n        onClear?: (event: SyntheticEvent, choice: string) => void,\n        isDisabled?: boolean,\n        theme?: any,\n    ): ReactNode | string;\n}\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectMultipleProps> = {\n    selectedChipRender(choice, index, onClear, isDisabled?, theme?) {\n        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n        return (\n            <Chip\n                key={index}\n                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n                isDisabled={isDisabled}\n                size={Size.s}\n                onAfterClick={onClick}\n                onClick={onClick}\n                theme={theme}\n            >\n                {choice}\n            </Chip>\n        );\n    },\n    selectedValueRender: (choice) => choice,\n    variant: SelectVariant.input,\n};\n\nexport const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {\n    const defaultTheme = useTheme();\n    const {\n        anchorRef,\n        handleKeyboardNav,\n        hasError,\n        icon,\n        id,\n        isDisabled,\n        isEmpty,\n        isRequired,\n        isValid,\n        label,\n        onClear,\n        onInputClick,\n        placeholder,\n        selectedChipRender,\n        selectedValueRender,\n        theme = defaultTheme,\n        value,\n        variant,\n        selectElementRef,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <>\n            {variant === SelectVariant.input && (\n                <>\n                    {label && (\n                        <div className={`${CLASSNAME}__header`}>\n                            <InputLabel\n                                htmlFor={id}\n                                className={`${CLASSNAME}__label`}\n                                isRequired={isRequired}\n                                theme={theme}\n                            >\n                                {label}\n                            </InputLabel>\n                        </div>\n                    )}\n\n                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n                    <div\n                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n                        id={id}\n                        className={`${CLASSNAME}__wrapper`}\n                        onClick={onInputClick}\n                        onKeyDown={handleKeyboardNav}\n                        tabIndex={isDisabled ? undefined : 0}\n                        aria-disabled={isDisabled || undefined}\n                        {...forwardedProps}\n                    >\n                        {icon && (\n                            <Icon\n                                className={`${CLASSNAME}__input-icon`}\n                                color={theme === Theme.dark ? 'light' : undefined}\n                                icon={icon}\n                                size={Size.xs}\n                            />\n                        )}\n\n                        <div className={`${CLASSNAME}__chips`}>\n                            {!isEmpty &&\n                                value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}\n                        </div>\n\n                        {isEmpty && placeholder && (\n                            <div\n                                className={classNames([\n                                    `${CLASSNAME}__input-native`,\n                                    `${CLASSNAME}__input-native--placeholder`,\n                                ])}\n                            >\n                                <span>{placeholder}</span>\n                            </div>\n                        )}\n\n                        {(isValid || hasError) && (\n                            <div className={`${CLASSNAME}__input-validity`}>\n                                <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n                            </div>\n                        )}\n\n                        <div className={`${CLASSNAME}__input-indicator`}>\n                            <Icon icon={mdiMenuDown} size={Size.s} />\n                        </div>\n                    </div>\n                </>\n            )}\n\n            {variant === SelectVariant.chip && (\n                <Chip\n                    id={id}\n                    isSelected={!isEmpty}\n                    isDisabled={isDisabled}\n                    after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n                    onAfterClick={isEmpty ? onInputClick : onClear}\n                    onClick={onInputClick}\n                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n                    theme={theme}\n                    {...forwardedProps}\n                >\n                    {isEmpty && <span>{label}</span>}\n\n                    {!isEmpty && (\n                        <span>\n                            <span>{selectedValueRender?.(value[0])}</span>\n\n                            {value.length > 1 && <span>&nbsp;+{value.length - 1}</span>}\n                        </span>\n                    )}\n                </Chip>\n            )}\n        </>\n    );\n};\n\n/**\n * SelectMultiple component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {\n    return WithSelectContext(\n        SelectMultipleField,\n        {\n            ...DEFAULT_PROPS,\n            ...props,\n            className: classNames(\n                props.className,\n                handleBasicClasses({\n                    hasMultiple: !props.isEmpty,\n                    prefix: CLASSNAME,\n                }),\n            ),\n            isEmpty: props.value.length === 0,\n            isMultiple: true,\n        },\n        ref,\n    );\n});\nSelectMultiple.displayName = COMPONENT_NAME;\nSelectMultiple.className = CLASSNAME;\nSelectMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","selectedChipRender","choice","index","onClear","isDisabled","theme","onClick","event","_jsx","Chip","after","Icon","icon","mdiClose","size","Size","xxs","s","onAfterClick","children","selectedValueRender","variant","SelectVariant","input","SelectMultipleField","props","defaultTheme","useTheme","anchorRef","handleKeyboardNav","hasError","id","isEmpty","isRequired","isValid","label","onInputClick","placeholder","value","selectElementRef","forwardedProps","_jsxs","_Fragment","className","InputLabel","htmlFor","ref","mergeRefs","onKeyDown","tabIndex","undefined","color","Theme","dark","xs","map","val","classNames","mdiCheckCircle","mdiAlertCircle","mdiMenuDown","chip","isSelected","mdiCloseCircle","length","SelectMultiple","forwardRef","WithSelectContext","handleBasicClasses","hasMultiple","prefix","isMultiple","displayName","defaultProps"],"mappings":"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"}