@lumx/react 3.20.1-alpha.36 → 3.20.1-alpha.38

package/_internal/components/radio-button/index-89b725af.js

@@ -1,149 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useId } from '../../3a1facc0.js';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Theme } from '@lumx/core/js/constants';
-import { InputLabel } from '../input-label/index-0113f382.js';
-import { InputHelper } from '../input-helper/index-5a837e7c.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 };

package/_internal/components/select/index-2755aa32.js

@@ -1,458 +0,0 @@
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import { Theme, Kind, Size, Emphasis } from '@lumx/core/js/constants';
-import { I as IconButton } from '../../b83e864b.js';
-import { C as Chip } from '../../c57190eb.js';
-import { I as Icon, m as mdiAlertCircle } from '../../bace1bf1.js';
-import { InputLabel } from '../input-label/index-0113f382.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs } from '../../f0d7d6ea.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { u as useTheme } from '../../3181f000.js';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Dropdown } from '../dropdown/index-cebfc268.js';
-import { InputHelper } from '../input-helper/index-5a837e7c.js';
-import { u as useFocusTrap } from '../../6f084a40.js';
-import { u as useId } from '../../3a1facc0.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { P as Placement } from '../../4f4c0582.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__*/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 };