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

package/_internal/components/autocomplete/index-27a49d5d.js

@@ -1,261 +0,0 @@
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { u as useFocus } from '../../3864a6c1.js';
-import { m as mergeRefs } from '../../f0d7d6ea.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 { TextField } from '../text-field/index-47c98d09.js';
-import { Dropdown } from '../dropdown/index-cebfc268.js';
-import { C as Chip } from '../../c57190eb.js';
-import { m as mdiClose } from '../../eaf6c45a.js';
-import { I as Icon } from '../../bace1bf1.js';
-import { Size } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'Autocomplete';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$1 = {
-  anchorToInput: false,
-  closeOnClick: false,
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  shouldFocusOnClose: false
-};
-
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Autocomplete = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    anchorToInput = DEFAULT_PROPS$1.anchorToInput,
-    children,
-    chips,
-    className,
-    closeOnClick = DEFAULT_PROPS$1.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1.closeOnEscape,
-    error,
-    fitToAnchorWidth,
-    hasError,
-    helper,
-    icon,
-    inputRef,
-    clearButtonProps,
-    isRequired,
-    isOpen,
-    isValid,
-    label,
-    name,
-    offset,
-    onBlur,
-    onChange,
-    onClose,
-    onFocus,
-    onInfiniteScroll,
-    placeholder,
-    placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1.shouldFocusOnClose,
-    theme = defaultTheme,
-    value,
-    textFieldProps = {},
-    focusAnchorOnClose,
-    ...forwardedProps
-  } = otherProps;
-  const inputAnchorRef = useRef(null);
-  const textFieldRef = useRef(null);
-  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, CLASSNAME$1),
-    children: [/*#__PURE__*/jsx(TextField, {
-      ...textFieldProps,
-      chips: chips,
-      error: error,
-      hasError: hasError,
-      helper: helper,
-      icon: icon,
-      inputRef: mergeRefs(inputAnchorRef, inputRef),
-      clearButtonProps: clearButtonProps,
-      ...disabledStateProps,
-      isRequired: isRequired,
-      isValid: isValid,
-      label: label,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      onFocus: onFocus,
-      placeholder: placeholder,
-      textFieldRef: textFieldRef,
-      theme: theme,
-      value: value
-    }), /*#__PURE__*/jsx(Dropdown, {
-      anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
-      closeOnClick: closeOnClick,
-      closeOnClickAway: closeOnClickAway,
-      closeOnEscape: closeOnEscape,
-      focusAnchorOnClose: focusAnchorOnClose,
-      fitToAnchorWidth: fitToAnchorWidth,
-      isOpen: isOpen,
-      offset: offset,
-      onClose: onClose,
-      onInfiniteScroll: onInfiniteScroll,
-      placement: placement,
-      shouldFocusOnOpen: false,
-      theme: theme,
-      children: children
-    })]
-  });
-});
-Autocomplete.displayName = COMPONENT_NAME$1;
-Autocomplete.className = CLASSNAME$1;
-Autocomplete.defaultProps = DEFAULT_PROPS$1;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'AutocompleteMultiple';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  selectedChipRender(choice, index, onClear, isDisabled) {
-    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,
-      children: choice
-    }, index);
-  },
-  values: []
-};
-
-/**
- * AutocompleteMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const AutocompleteMultiple = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    anchorToInput,
-    children,
-    // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    chipsAlignment,
-    className,
-    closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-    fitToAnchorWidth,
-    hasError,
-    helper,
-    icon,
-    inputRef,
-    clearButtonProps,
-    isRequired,
-    isOpen,
-    isValid,
-    label,
-    name,
-    offset,
-    onBlur,
-    onChange,
-    onClear,
-    onClose,
-    onFocus,
-    onInfiniteScroll,
-    onKeyDown,
-    placeholder,
-    placement,
-    selectedChipRender = DEFAULT_PROPS.selectedChipRender,
-    shouldFocusOnClose,
-    theme = defaultTheme,
-    type,
-    value,
-    values = DEFAULT_PROPS.values,
-    ...forwardedProps
-  } = otherProps;
-  return /*#__PURE__*/jsx(Autocomplete, {
-    ref: ref,
-    ...forwardedProps,
-    anchorToInput: anchorToInput,
-    className: classNames(className, CLASSNAME),
-    name: name,
-    value: value,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur,
-    shouldFocusOnClose: shouldFocusOnClose,
-    onFocus: onFocus,
-    hasError: hasError,
-    helper: helper,
-    icon: icon,
-    inputRef: inputRef,
-    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
-    ...disabledStateProps,
-    isRequired: isRequired,
-    clearButtonProps: clearButtonProps,
-    isValid: isValid,
-    label: label,
-    placeholder: placeholder,
-    theme: theme,
-    type: type,
-    isOpen: isOpen,
-    closeOnClick: false,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    onClose: onClose,
-    offset: offset,
-    placement: placement,
-    fitToAnchorWidth: fitToAnchorWidth,
-    onInfiniteScroll: onInfiniteScroll,
-    children: children
-  });
-});
-AutocompleteMultiple.displayName = COMPONENT_NAME;
-AutocompleteMultiple.className = CLASSNAME;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
-
-export { Autocomplete, AutocompleteMultiple };

package/_internal/components/avatar/index-b8bc3cae.js

@@ -1,83 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { T as Thumbnail } from '../../035c132d.js';
-import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Avatar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  size: Size.m
-};
-
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Avatar = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    actions,
-    alt,
-    badge,
-    className,
-    image,
-    linkProps,
-    linkAs,
-    onClick,
-    onKeyPress,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    thumbnailProps,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      size,
-      theme
-    })),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      linkProps: linkProps,
-      linkAs: linkAs,
-      className: `${CLASSNAME}__thumbnail`,
-      onClick: onClick,
-      onKeyPress: onKeyPress,
-      ...thumbnailProps,
-      aspectRatio: AspectRatio.square,
-      size: size,
-      image: image,
-      alt: alt,
-      theme: theme
-    }), actions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__actions`,
-      children: actions
-    }), badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__badge`,
-      children: badge
-    })]
-  });
-});
-Avatar.displayName = COMPONENT_NAME;
-Avatar.className = CLASSNAME;
-Avatar.defaultProps = DEFAULT_PROPS;
-
-export { Avatar };

package/_internal/components/badge/index-9880f056.js

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ColorPalette } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'Badge';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  color: ColorPalette.primary
-};
-
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Badge = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    color = DEFAULT_PROPS.color,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
-      color
-    })),
-    children: children
-  });
-});
-Badge.displayName = COMPONENT_NAME$1;
-Badge.className = CLASSNAME$1;
-Badge.defaultProps = DEFAULT_PROPS;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'BadgeWrapper';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const BadgeWrapper = forwardRef((props, ref) => {
-  const {
-    badge,
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, CLASSNAME),
-    children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__badge`,
-      children: badge
-    })]
-  });
-});
-BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME;
-
-export { Badge, BadgeWrapper };

package/_internal/components/button/index-d919f96d.js

@@ -1,47 +0,0 @@
-export { a as Button, B as ButtonEmphasis } from '../../7ad474e4.js';
-export { I as IconButton } from '../../b83e864b.js';
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ButtonGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * ButtonGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ButtonGroup = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, CLASSNAME),
-    children: children
-  });
-});
-ButtonGroup.displayName = COMPONENT_NAME;
-ButtonGroup.className = CLASSNAME;
-ButtonGroup.defaultProps = DEFAULT_PROPS;
-
-export { ButtonGroup };

package/_internal/components/checkbox/index-dd478de9.js

@@ -1,143 +0,0 @@
-import React__default from 'react';
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useId } from '../../3a1facc0.js';
-import { u as useMergeRefs } from '../../f0d7d6ea.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 { InputLabel } from '../input-label/index-0113f382.js';
-import { InputHelper } from '../input-helper/index-5a837e7c.js';
-import { Theme } from '@lumx/core/js/constants';
-import { I as Icon } from '../../bace1bf1.js';
-
-const mdiCheck = 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';
-
-const mdiMinus = 'M19 13H5v-2h14z';
-
-/**
- * Intermediate state of checkbox.
- */
-const INTERMEDIATE_STATE = 'intermediate';
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Checkbox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Checkbox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Checkbox = 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 localInputRef = React__default.useRef(null);
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(!isChecked, value, name, event);
-    }
-  };
-  const intermediateState = isChecked === INTERMEDIATE_STATE;
-  React__default.useEffect(() => {
-    const input = localInputRef.current;
-    if (input) input.indeterminate = intermediateState;
-  }, [intermediateState]);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      // Whether state is intermediate class name will "-checked"
-      isChecked: intermediateState ? true : isChecked,
-      isDisabled: isAnyDisabled,
-      isUnchecked: !isChecked,
-      prefix: CLASSNAME,
-      theme
-    })),
-    children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__input-wrapper`,
-      children: [/*#__PURE__*/jsx("input", {
-        ref: useMergeRefs(inputRef, localInputRef),
-        type: "checkbox",
-        id: inputId,
-        className: `${CLASSNAME}__input-native`,
-        ...disabledStateProps,
-        name: name,
-        value: value,
-        checked: isChecked,
-        onChange: handleChange,
-        "aria-describedby": helper ? `${inputId}-helper` : undefined,
-        "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
-        readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
-        ...inputProps
-      }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__input-placeholder`,
-        children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__input-background`
-        }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__input-indicator`,
-          children: /*#__PURE__*/jsx(Icon, {
-            icon: intermediateState ? mdiMinus : mdiCheck
-          })
-        })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__content`,
-      children: [label && /*#__PURE__*/jsx(InputLabel, {
-        htmlFor: inputId,
-        className: `${CLASSNAME}__label`,
-        theme: theme,
-        children: label
-      }), helper && /*#__PURE__*/jsx(InputHelper, {
-        id: `${inputId}-helper`,
-        className: `${CLASSNAME}__helper`,
-        theme: theme,
-        children: helper
-      })]
-    })]
-  });
-});
-Checkbox.displayName = COMPONENT_NAME;
-Checkbox.className = CLASSNAME;
-Checkbox.defaultProps = DEFAULT_PROPS;
-
-export { Checkbox };

package/_internal/components/chip/index-7f84cdbd.js

@@ -1,102 +0,0 @@
-export { C as Chip } from '../../c57190eb.js';
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { useState } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-const INITIAL_STATE_ACTIVE_CHIP = -1;
-
-/**
- * Hook that provides the necessary information to manage chips navigation.
- * @param chips             List of chips selected.
- * @param onChipDeleted     Callback executed when a chip must be eliminated.
- * @param initialActiveChip Initial active chip index.
- *
- * @return chip navigation tools.
- */
-const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIAL_STATE_ACTIVE_CHIP) => {
-  const [wasBackspacePressed, setWasBackspacePressed] = useState(false);
-  const [activeChip, setActiveChip] = useState(initialActiveChip);
-
-  /**
-   * Resets the active index and backspace control to their initial state
-   */
-  const resetChipNavigation = () => {
-    setWasBackspacePressed(false);
-    setActiveChip(initialActiveChip);
-  };
-
-  /**
-   * Callback to be executed when the backspace was pressed. If there are no chips
-   * selected, it will return immediately. If there are it will check if the
-   * backspace was already pressed. if it was, it means that the user wants to eliminate
-   * the chip, so we execute the `onChipDeleted` function and reset internal state.
-   *
-   * If it was not pressed before, we set the `wasBackspacePressed` flag to true and
-   * highlight the last chip.
-   */
-  const onBackspacePressed = () => {
-    if (chips.length === 0) {
-      return;
-    }
-    if (wasBackspacePressed) {
-      const chipDeleted = chips[chips.length - 1];
-      onChipDeleted(chipDeleted);
-      resetChipNavigation();
-    } else {
-      setActiveChip(chips.length - 1);
-      setWasBackspacePressed(true);
-    }
-  };
-  return {
-    activeChip,
-    onBackspacePressed,
-    resetChipNavigation
-  };
-};
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ChipGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalChipGroup = forwardRef((props, ref) => {
-  const {
-    align,
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, CLASSNAME),
-    children: children
-  });
-});
-InternalChipGroup.displayName = COMPONENT_NAME;
-InternalChipGroup.className = CLASSNAME;
-InternalChipGroup.defaultProps = DEFAULT_PROPS;
-const ChipGroup = Object.assign(InternalChipGroup, {
-  useChipGroupNavigation
-});
-
-export { ChipGroup };