@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.16

package/_internal/components/select-d46cfe35.js

@@ -1,404 +0,0 @@
-import { c as classNames, _ as _extends, f as forwardRef } from '../forwardRef-49d2bb84.js';
-import isEmpty from 'lodash/isEmpty';
-import { mdiCheckCircle, mdiAlertCircle, mdiCloseCircle, mdiMenuDown, mdiClose } from '@lumx/icons';
-import { Theme, Kind, Size, Emphasis } from '@lumx/core/js/constants';
-import { I as IconButton } from '../IconButton-10585058.js';
-import { C as Chip } from '../Chip-4c572eec.js';
-import { Icon } from './icon-2e7345ad.js';
-import { InputLabel } from './input-label-5e509a1b.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Dropdown } from './dropdown-38b0b6a0.js';
-import { InputHelper } from './input-helper-e644e05e.js';
-import { u as useFocusTrap } from '../useFocusTrap-c3c6378b.js';
-import { u as useId } from '../useId-3a1facc0.js';
-import { P as Placement } from '../constants-b9e57936.js';
-
-/**
- * Listen on element focus to store the focus status.
- */
-function useListenFocus(ref) {
-  const [isFocus, setFocus] = useState(false);
-  useEffect(() => {
-    const {
-      current: element
-    } = ref;
-    if (!element) {
-      return undefined;
-    }
-    const onFocus = () => setFocus(true);
-    const onBlur = () => setFocus(false);
-    element.addEventListener('focus', onFocus);
-    element.addEventListener('blur', onBlur);
-    return () => {
-      element.removeEventListener('focus', onFocus);
-      element.removeEventListener('blur', onBlur);
-    };
-  }, [ref, setFocus]);
-  return isFocus;
-}
-
-/** The display name of the component. */
-const COMPONENT_NAME$2 = 'Select';
-
-/** The default class name and classes prefix for this component. */
-const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
-const WithSelectContext = (SelectElement, props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    children,
-    className,
-    focusElement,
-    isMultiple,
-    closeOnClick = !isMultiple,
-    disabled,
-    error,
-    hasError,
-    helper,
-    id,
-    isDisabled = disabled,
-    isEmpty,
-    isOpen,
-    isRequired,
-    isValid,
-    label,
-    onClear,
-    onDropdownClose,
-    onInfiniteScroll,
-    onInputClick,
-    placeholder,
-    theme = defaultTheme,
-    value,
-    variant,
-    ...forwardedProps
-  } = props;
-  const generatedSelectId = useId();
-  const selectId = id || generatedSelectId;
-  const anchorRef = useRef(null);
-  const selectRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const isFocus = useListenFocus(anchorRef);
-  const handleKeyboardNav = useCallback(evt => {
-    if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
-      evt.preventDefault();
-      onInputClick();
-    }
-  }, [onInputClick]);
-  const onClose = () => {
-    if (onDropdownClose) {
-      onDropdownClose();
-    }
-    anchorRef?.current?.blur();
-  };
-
-  // Handle focus trap.
-  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
-  return /*#__PURE__*/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=select-d46cfe35.js.map

package/_internal/components/text-289c0526.js

@@ -1,2 +0,0 @@
-export { T as Text } from '../index-b4d256e7.js';
-//# sourceMappingURL=text-289c0526.js.map

package/_internal/components/text-289c0526.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-289c0526.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}