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

package/_internal/{595d0e66.js → bace1bf1.js}

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, resolveColorWithVariants, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
+import { f as forwardRef } from './8bce732e.js';
+import { u as useTheme } from './3181f000.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-import { mdiAlertCircle } from './893eb653.js';
+
+const mdiAlertCircle = 'M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
 
 /**
  * Component display name.
@@ -99,5 +100,4 @@ Icon.displayName = COMPONENT_NAME;
 Icon.className = CLASSNAME;
 Icon.defaultProps = DEFAULT_PROPS;
 
-export { Icon };
-//# sourceMappingURL=595d0e66.js.map
+export { Icon as I, mdiAlertCircle as m };

package/_internal/{b125b718.js → c57190eb.js}

@@ -1,14 +1,30 @@
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
-import { useStopPropagation } from './eef5d63f.js';
+import { useCallback } from 'react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { onEnterPressed } from '@lumx/core/js/utils';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
-import { useDisableStateProps } from './ef982c3d.js';
+import { f as forwardRef } from './8bce732e.js';
+import { u as useTheme } from './3181f000.js';
+import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Size, Theme, ColorPalette } from '@lumx/core/js/constants';
 
+/**
+ * Wrap mouse event handler to stop event propagation.
+ *
+ * @param  handler   The mouse handler to wrap.
+ * @return Mouse handler stopping propagation.
+ */
+function useStopPropagation(handler) {
+  return useCallback(evt => {
+    if (!evt || !isFunction(handler)) {
+      return;
+    }
+    handler(evt);
+    evt.stopPropagation();
+  }, [handler]);
+}
+
 /**
  * Component display name.
  */
@@ -127,5 +143,4 @@ Chip.displayName = COMPONENT_NAME;
 Chip.className = CLASSNAME;
 Chip.defaultProps = DEFAULT_PROPS;
 
-export { Chip };
-//# sourceMappingURL=b125b718.js.map
+export { Chip as C };

package/_internal/{c51d37f8.js → components/alert-dialog/index-284fed80.js}

@@ -1,17 +1,15 @@
 import React__default from 'react';
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from './11687649.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useId } from '../../3a1facc0.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { mdiAlert } from './f419ecef.js';
-import { mdiInformation } from './68f13c1c.js';
-import { mdiCheckCircle } from './e47dacb8.js';
-import { mdiAlertCircle } from './893eb653.js';
-import { Dialog } from './cd8457fc.js';
-import { Toolbar } from './a1974f13.js';
-import { Icon } from './595d0e66.js';
-import { Button } from './0d7cc1e0.js';
+import { m as mdiAlert, a as mdiInformation } from '../../49bbeed3.js';
+import { m as mdiCheckCircle } from '../../de24f857.js';
+import { m as mdiAlertCircle, I as Icon } from '../../bace1bf1.js';
+import { Dialog } from '../dialog/index-c7066813.js';
+import { Toolbar } from '../toolbar/index-7041a5a6.js';
+import { a as Button } from '../../7ad474e4.js';
 import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
 
 /**
@@ -163,4 +161,3 @@ AlertDialog.className = CLASSNAME;
 AlertDialog.defaultProps = DEFAULT_PROPS;
 
 export { AlertDialog };
-//# sourceMappingURL=c51d37f8.js.map

package/_internal/components/autocomplete/__mockData__/index-96fc7ea7.js

@@ -0,0 +1,27 @@
+const CITIES = [{
+  text: 'Los Angeles',
+  id: 'losangeles'
+}, {
+  text: 'San Francisco',
+  id: 'sanfrancisco'
+}, {
+  text: 'Paris',
+  id: 'paris'
+}, {
+  text: 'Montpellier',
+  id: 'montpellier'
+}, {
+  text: 'Bordeaux',
+  id: 'bordeaux'
+}, {
+  text: 'Toulouse',
+  id: 'toulouse'
+}, {
+  text: 'Lyon',
+  id: 'lyon'
+}, {
+  text: 'Montevideo',
+  id: 'montevideo'
+}];
+
+export { CITIES };

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

@@ -0,0 +1,261 @@
+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/{ffb2f7fa.js → components/avatar/index-b8bc3cae.js}

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Thumbnail } from './dbe906f1.js';
+import { T as Thumbnail } from '../../035c132d.js';
 import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
 
 /**
@@ -81,4 +81,3 @@ Avatar.className = CLASSNAME;
 Avatar.defaultProps = DEFAULT_PROPS;
 
 export { Avatar };
-//# sourceMappingURL=ffb2f7fa.js.map

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

@@ -0,0 +1,81 @@
+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/{bae815e2.js → components/button/index-d919f96d.js}

@@ -1,6 +1,8 @@
+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 { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -43,4 +45,3 @@ ButtonGroup.className = CLASSNAME;
 ButtonGroup.defaultProps = DEFAULT_PROPS;
 
 export { ButtonGroup };
-//# sourceMappingURL=bae815e2.js.map

package/_internal/{6b510f5e.js → components/checkbox/index-dd478de9.js}

@@ -1,18 +1,20 @@
 import React__default from 'react';
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from './11687649.js';
-import { useMergeRefs } from './27df0cb6.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { useDisableStateProps } from './ef982c3d.js';
+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 { mdiMinus } from './b9ed1f7a.js';
-import { mdiCheck } from './1c3b349b.js';
-import { InputLabel } from './26a92990.js';
-import { InputHelper } from './3119c1fe.js';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
 import { Theme } from '@lumx/core/js/constants';
-import { Icon } from './595d0e66.js';
+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.
@@ -139,4 +141,3 @@ Checkbox.className = CLASSNAME;
 Checkbox.defaultProps = DEFAULT_PROPS;
 
 export { Checkbox };
-//# sourceMappingURL=6b510f5e.js.map

package/_internal/{7d9c0855.js → components/chip/index-7f84cdbd.js}

@@ -1,4 +1,9 @@
+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;
 
@@ -51,5 +56,47 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
   };
 };
 
-export { useChipGroupNavigation };
-//# sourceMappingURL=7d9c0855.js.map
+/**
+ * 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 };

package/_internal/{cc5cac50.js → components/comment-block/index-e942de30.js}

@@ -1,12 +1,12 @@
 import { Children } from 'react';
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useTheme } from '../../3181f000.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Avatar } from './ffb2f7fa.js';
+import { Avatar } from '../avatar/index-b8bc3cae.js';
 import { Theme, Size } from '@lumx/core/js/constants';
-import { Tooltip } from './659a1cdd.js';
+import { Tooltip } from '../tooltip/index-8bb97e60.js';
 
 /**
  * Comment block variants.
@@ -136,4 +136,3 @@ CommentBlock.className = CLASSNAME;
 CommentBlock.defaultProps = DEFAULT_PROPS;
 
 export { CommentBlock, CommentBlockVariant };
-//# sourceMappingURL=cc5cac50.js.map