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

package/_internal/components/side-navigation/index-0bbe1fdd.js

@@ -1,165 +0,0 @@
-import { Children } from 'react';
-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, 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.
- */
-const COMPONENT_NAME = 'SideNavigationItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  emphasis: Emphasis.high,
-  closeMode: 'unmount'
-};
-
-/**
- * SideNavigationItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SideNavigationItem = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    emphasis = DEFAULT_PROPS.emphasis,
-    icon,
-    isOpen,
-    isSelected,
-    label,
-    linkAs,
-    linkProps,
-    onActionClick,
-    onClick,
-    toggleButtonProps,
-    closeMode = DEFAULT_PROPS.closeMode,
-    ...forwardedProps
-  } = props;
-  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = !isEmpty(content);
-  const shouldSplitActions = Boolean(onActionClick);
-  const showChildren = hasContent && isOpen;
-  const contentId = useId();
-  const ariaProps = {};
-  if (hasContent) {
-    ariaProps['aria-expanded'] = !!showChildren;
-    // Associate with content ID only if in DOM (shown or hidden and not unmounted)
-    ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
-  }
-  return /*#__PURE__*/jsxs("li", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      emphasis,
-      isOpen: showChildren,
-      isSelected,
-      prefix: CLASSNAME
-    })),
-    children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__wrapper`,
-      children: [/*#__PURE__*/jsxs(RawClickable, {
-        as: linkAs || (linkProps?.href ? 'a' : 'button'),
-        ...linkProps,
-        className: `${CLASSNAME}__link`,
-        onClick: onClick,
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME}__icon`,
-          icon: icon,
-          size: Size.xs
-        }), /*#__PURE__*/jsx("span", {
-          children: label
-        })]
-      }), /*#__PURE__*/jsx(IconButton, {
-        ...toggleButtonProps,
-        className: `${CLASSNAME}__toggle`,
-        icon: isOpen ? mdiChevronUp : mdiChevronDown,
-        size: Size.m,
-        emphasis: Emphasis.low,
-        onClick: onActionClick,
-        ...ariaProps
-      })]
-    }) : /*#__PURE__*/jsxs(RawClickable, {
-      as: linkAs || (linkProps?.href ? 'a' : 'button'),
-      ...linkProps,
-      className: `${CLASSNAME}__link`,
-      onClick: onClick,
-      ...ariaProps,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__icon`,
-        icon: icon,
-        size: Size.xs
-      }), /*#__PURE__*/jsx("span", {
-        children: label
-      }), hasContent && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__chevron`,
-        icon: isOpen ? mdiChevronUp : mdiChevronDown,
-        size: Size.xs
-      })]
-    }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
-      className: `${CLASSNAME}__children`,
-      id: contentId,
-      children: content
-    })]
-  });
-});
-SideNavigationItem.displayName = COMPONENT_NAME;
-SideNavigationItem.className = CLASSNAME;
-SideNavigationItem.defaultProps = DEFAULT_PROPS;
-
-export { SideNavigation, SideNavigationItem };

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

@@ -1,166 +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 { 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 };

package/_internal/components/slider/index-4f9b891b.js

@@ -1,311 +0,0 @@
-import React__default, { useMemo, useRef } 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 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';
-
-const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
-
-/**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
- *
- * @param fn A function to run
- * @return A React callback
- */
-function useEventCallback(fn) {
-  const ref = React__default.useRef(fn);
-  useEnhancedEffect(() => {
-    ref.current = fn;
-  });
-  return React__default.useCallback(event => ref.current(event), []);
-}
-
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-const clamp = (value, min, max) => {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-};
-
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Slider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  precision: 0,
-  steps: 0
-};
-
-/**
- * Convert a percent value to a value in range min - max.
- *
- * @param percent   Value to convert.
- * @param min       Minimum value.
- * @param max       Maximum value.
- * @param precision Precision.
- * @return Value in range min - max
- */
-const computeValueFromPercent = (percent, min, max, precision = 0) => Number((min + percent * (max - min)).toFixed(precision));
-
-/**
- * Convert a value in range min - max to a percent value.
- *
- * @param value Value to convert.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Value in percent
- */
-const computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
-
-/**
- * Slider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Slider = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    helper,
-    hideMinMaxLabel,
-    id,
-    label,
-    max,
-    min,
-    name,
-    onChange,
-    onMouseDown,
-    precision = DEFAULT_PROPS.precision,
-    steps = DEFAULT_PROPS.steps,
-    theme = defaultTheme,
-    value,
-    ...forwardedProps
-  } = otherProps;
-  const generatedId = useId();
-  const sliderId = id || generatedId;
-  const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
-  const sliderRef = useRef(null);
-
-  // build a lookup array for the steps.
-  const availableSteps = useMemo(() => {
-    if (!steps) return [];
-    const available = [0];
-    const percentStep = 1 / ((max - min) / steps);
-    let ptr = 0;
-    while (ptr + percentStep < 1) {
-      ptr += percentStep;
-      available.push(ptr);
-    }
-    return available;
-  }, [steps, min, max]);
-
-  /**
-   * Try to find the closest step to the current slider position.
-   *
-   * @param percentValue Reference value
-   * @return The closest step value
-   */
-  const findClosestStep = percentValue => {
-    const closest = availableSteps.reduce((acc, step) => {
-      const aDst = Math.abs(percentValue - step);
-      if (aDst < acc.dst) {
-        return {
-          dst: aDst,
-          val: step
-        };
-      }
-      return acc;
-    }, {
-      dst: Infinity,
-      val: -1
-    });
-    return closest.val;
-  };
-
-  /**
-   * Convert slider's handle position to percent.
-   *
-   * @param event The interaction event
-   * @param slider the slider element
-   * @return The computed percent value
-   */
-  const getPercentValue = (event, slider) => {
-    const {
-      width,
-      left
-    } = slider.getBoundingClientRect();
-    let percent = (event.pageX - left - window.pageXOffset) / width;
-    percent = clamp(percent, 0, 1);
-    if (steps) {
-      percent = findClosestStep(percent);
-    }
-    return percent;
-  };
-
-  /**
-   * Register a handler for the mouse move event.
-   */
-  const handleMove = useEventCallback(event => {
-    const {
-      current: slider
-    } = sliderRef;
-    if (!slider || !onChange) return;
-    const newValue = getPercentValue(event, slider);
-    onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-  });
-
-  /**
-   * Register a handler for the mouse up event.
-   * Clean a all listeners.
-   */
-  const handleEnd = useEventCallback(() => {
-    document.body.removeEventListener('mousemove', handleMove);
-    document.body.removeEventListener('mouseup', handleEnd);
-    document.body.removeEventListener('touchmove', handleMove);
-    document.body.removeEventListener('touchend', handleEnd);
-  });
-
-  /**
-   * Move to the next or previous value (i.e. + or - 10%) or next step
-   * @param previous Should seek the previous value.
-   */
-  const hopToValue = (previous = false) => {
-    const oldPercent = computePercentFromValue(value, min, max);
-    let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);
-    if (steps) {
-      percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
-      percent = findClosestStep(percent);
-    }
-    if (onChange) {
-      onChange(computeValueFromPercent(percent, min, max, precision), name);
-    }
-  };
-
-  /**
-   * Register a handler for keyboard interactions
-   */
-  const handleKeyDown = useEventCallback(event => {
-    if (event.key === 'ArrowRight') {
-      hopToValue();
-    } else if (event.key === 'ArrowLeft') {
-      hopToValue(true);
-    }
-  });
-
-  /**
-   * Register a handler for the mouseDown event.
-   */
-  const handleMouseDown = useEventCallback(event => {
-    onMouseDown?.(event);
-    const {
-      current: slider
-    } = sliderRef;
-    if (isAnyDisabled || !slider) return;
-    const newValue = getPercentValue(event, slider);
-    if (onChange) {
-      onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-    }
-    document.body.addEventListener('mousemove', handleMove);
-    document.body.addEventListener('mouseup', handleEnd);
-  });
-  const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme,
-      hasLabel: Boolean(label)
-    })),
-    onMouseDown: handleMouseDown,
-    children: [label && /*#__PURE__*/jsx(InputLabel, {
-      id: sliderLabelId,
-      htmlFor: sliderId,
-      className: `${CLASSNAME}__label`,
-      theme: theme,
-      children: label
-    }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME}__helper`,
-      theme: theme,
-      children: helper
-    }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__ui-wrapper`,
-      children: [!hideMinMaxLabel && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`,
-        children: min
-      }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__wrapper`,
-        ref: sliderRef,
-        children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__track ${CLASSNAME}__track--background`
-        }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__track ${CLASSNAME}__track--active`,
-          style: {
-            width: percentString
-          }
-        }), steps ? /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__ticks`,
-          children: availableSteps.map((step, idx) => /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME}__tick`,
-            style: {
-              left: `${step * 100}%`
-            }
-          }, `tick_${idx}`))
-        }) : null, /*#__PURE__*/jsx("button", {
-          type: "button",
-          "aria-labelledby": sliderLabelId,
-          name: name,
-          id: sliderId,
-          className: `${CLASSNAME}__handle`,
-          style: {
-            left: percentString
-          },
-          onKeyDown: isAnyDisabled ? undefined : handleKeyDown,
-          ...disabledStateProps
-        })]
-      }), !hideMinMaxLabel && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`,
-        children: max
-      })]
-    })]
-  });
-});
-Slider.displayName = COMPONENT_NAME;
-Slider.className = CLASSNAME;
-Slider.defaultProps = DEFAULT_PROPS;
-
-export { Slider, clamp };