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

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

@@ -0,0 +1,458 @@
+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 };

package/_internal/{36008a95.js → components/side-navigation/index-0bbe1fdd.js}

@@ -1,17 +1,53 @@
 import { Children } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import { isComponent } from './ebe24fd7.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from './11687649.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { RawClickable } from './a6dc95cd.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Emphasis, Size } from '@lumx/core/js/constants';
-import { Icon } from './595d0e66.js';
-import { IconButton } from './5a0207d9.js';
-import { mdiChevronUp } from './0846b7f3.js';
-import { mdiChevronDown } from './256f8eff.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { i as isComponent } from '../../78df9309.js';
+import isEmpty from 'lodash/isEmpty';
+import { u as useId } from '../../3a1facc0.js';
+import { R as RawClickable } from '../../2c2b6a89.js';
+import { Theme, Emphasis, Size } from '@lumx/core/js/constants';
+import { I as Icon } from '../../bace1bf1.js';
+import { I as IconButton } from '../../b83e864b.js';
+import { m as mdiChevronUp, a as mdiChevronDown } from '../../0b9c76cb.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'SideNavigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * SideNavigation component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SideNavigation = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    children,
+    className,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
+  return /*#__PURE__*/jsx("ul", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$1),
+    children: content
+  });
+});
+SideNavigation.displayName = COMPONENT_NAME$1;
+SideNavigation.className = CLASSNAME$1;
 
 /**
  * Component display name.
@@ -126,5 +162,4 @@ SideNavigationItem.displayName = COMPONENT_NAME;
 SideNavigationItem.className = CLASSNAME;
 SideNavigationItem.defaultProps = DEFAULT_PROPS;
 
-export { SideNavigationItem };
-//# sourceMappingURL=36008a95.js.map
+export { SideNavigation, SideNavigationItem };

package/_internal/components/skeleton/index-b2f8501c.js

@@ -0,0 +1,166 @@
+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 { jsx } from 'react/jsx-runtime';
+import { Theme } from '@lumx/core/js/constants';
+
+const DEFAULT_PROPS$2 = {};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'SkeletonCircle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonCircle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    size,
+    color,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      size,
+      color,
+      theme
+    }))
+  });
+});
+SkeletonCircle.displayName = COMPONENT_NAME$2;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$2;
+SkeletonCircle.className = CLASSNAME$2;
+
+const SkeletonRectangleVariant = {
+  squared: 'squared',
+  rounded: 'rounded',
+  pill: 'pill'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$1 = {
+  variant: SkeletonRectangleVariant.squared
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'SkeletonRectangle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonRectangle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    aspectRatio,
+    className,
+    height,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS$1.variant,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      aspectRatio,
+      height: aspectRatio ? undefined : height,
+      theme,
+      variant,
+      width,
+      color
+    })),
+    children: /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$1}__inner`
+    })
+  });
+});
+SkeletonRectangle.displayName = COMPONENT_NAME$1;
+SkeletonRectangle.className = CLASSNAME$1;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$1;
+
+const DEFAULT_PROPS = {};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonTypography';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonTypography = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    typography,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme,
+      typography,
+      color
+    })),
+    style: {
+      ...forwardedProps.style,
+      width
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__inner`
+    })
+  });
+});
+SkeletonTypography.displayName = COMPONENT_NAME;
+SkeletonTypography.defaultProps = DEFAULT_PROPS;
+SkeletonTypography.className = CLASSNAME;
+
+export { SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography };