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

package/_internal/components/tabs/index-af1538d6.js

@@ -1,298 +0,0 @@
-import ReactDOM from 'react-dom';
-import React__default, { useReducer, useEffect, useCallback } from 'react';
-import { I as INIT_STATE, r as reducer, T as TabProviderContext, a as useTabProviderContext } from '../../825ac334.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import '../../d0e3f49e.js';
-import { 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 { u as useRovingTabIndex } from '../../7daf0f24.js';
-import { Alignment, Theme, CSS_PREFIX, Size } from '@lumx/core/js/constants';
-import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
-import { I as Icon } from '../../bace1bf1.js';
-import { T as Text } from '../../e913a3af.js';
-
-const DEFAULT_PROPS$3 = {
-  isLazy: INIT_STATE.isLazy,
-  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
-};
-
-/**
- * This component provides a context in which tabs can be defined and linked to their tab panel.
- *
- * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel
- * components in the react tree.
- *
- * @param  props React component props.
- * @return React element.
- */
-const TabProvider = props => {
-  const {
-    children,
-    onChange,
-    ...propState
-  } = props;
-  const [state, dispatch] = useReducer(reducer, INIT_STATE);
-
-  // On prop state change => dispatch update.
-  useEffect(() => {
-    dispatch({
-      type: 'update',
-      payload: {
-        ...DEFAULT_PROPS$3,
-        ...propState
-      }
-    });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [dispatch, ...Object.values(propState)]);
-
-  // On active tab index state change => send update to the onChange.
-  useEffect(() => {
-    if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
-      return;
-    }
-
-    // Escape rendering/useEffect context
-    queueMicrotask(() => {
-      // Wait for React to commit last state changes (avoid looping state update)
-      ReactDOM.flushSync(() => {
-        onChange(state.activeTabIndex);
-      });
-    });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onChange, state.activeTabIndex]);
-  return /*#__PURE__*/jsx(TabProviderContext.Provider, {
-    value: [state, dispatch],
-    children: children
-  });
-};
-TabProvider.defaultProps = DEFAULT_PROPS$3;
-
-let TabListLayout = /*#__PURE__*/function (TabListLayout) {
-  TabListLayout["clustered"] = "clustered";
-  TabListLayout["fixed"] = "fixed";
-  return TabListLayout;
-}({});
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$2 = 'TabList';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$2 = `${CSS_PREFIX}-tabs`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$2 = {
-  layout: TabListLayout.fixed,
-  position: Alignment.left
-};
-
-/**
- * TabList component.
- *
- * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const TabList = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    'aria-label': ariaLabel,
-    children,
-    className,
-    layout = DEFAULT_PROPS$2.layout,
-    position = DEFAULT_PROPS$2.position,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  const tabListRef = React__default.useRef(null);
-  useRovingTabIndex({
-    parentRef: tabListRef,
-    elementSelector: '[role="tab"]',
-    keepTabIndex: false,
-    extraDependencies: [children]
-  });
-  return /*#__PURE__*/jsx("div", {
-    ref: mergeRefs(ref, tabListRef),
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$2,
-      layout,
-      position,
-      theme
-    })),
-    children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$2}__links`,
-      role: "tablist",
-      "aria-label": ariaLabel,
-      children: children
-    })
-  });
-});
-TabList.displayName = COMPONENT_NAME$2;
-TabList.className = CLASSNAME$2;
-TabList.defaultProps = DEFAULT_PROPS$2;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'Tab';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = `${CSS_PREFIX}-tabs__link`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$1 = {};
-
-/**
- * Tab component.
- *
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Tab = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    className,
-    icon,
-    iconProps = {},
-    id,
-    isActive: propIsActive,
-    label,
-    onFocus,
-    onKeyPress,
-    tabIndex = -1,
-    ...forwardedProps
-  } = otherProps;
-  const state = useTabProviderContext('tab', id);
-  const isActive = propIsActive || state?.isActive;
-  const changeToCurrentTab = useCallback(() => {
-    if (isAnyDisabled) {
-      return;
-    }
-    state?.changeToTab();
-  }, [isAnyDisabled, state]);
-  const handleFocus = useCallback(event => {
-    onFocus?.(event);
-    if (state?.shouldActivateOnFocus) {
-      changeToCurrentTab();
-    }
-  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
-  const handleKeyPress = useCallback(event => {
-    onKeyPress?.(event);
-    if (event.key !== 'Enter' || isAnyDisabled) {
-      return;
-    }
-    changeToCurrentTab();
-  }, [changeToCurrentTab, isAnyDisabled, onKeyPress]);
-  return /*#__PURE__*/jsxs("button", {
-    ref: ref,
-    ...forwardedProps,
-    type: "button",
-    id: state?.tabId,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1,
-      isActive,
-      isDisabled: isAnyDisabled
-    })),
-    onClick: changeToCurrentTab,
-    onKeyPress: handleKeyPress,
-    onFocus: handleFocus,
-    role: "tab",
-    tabIndex: isActive ? 0 : tabIndex,
-    "aria-disabled": isAnyDisabled,
-    "aria-selected": isActive,
-    "aria-controls": state?.tabPanelId,
-    children: [icon && /*#__PURE__*/jsx(Icon, {
-      icon: icon,
-      size: Size.xs,
-      ...iconProps
-    }), label && /*#__PURE__*/jsx(Text, {
-      as: "span",
-      truncate: true,
-      children: label
-    })]
-  });
-});
-Tab.displayName = COMPONENT_NAME$1;
-Tab.className = CLASSNAME$1;
-Tab.defaultProps = DEFAULT_PROPS$1;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TabPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = `${CSS_PREFIX}-tab-panel`;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * TabPanel component.
- *
- * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const TabPanel = forwardRef((props, ref) => {
-  const {
-    children,
-    id,
-    className,
-    isActive: propIsActive,
-    ...forwardedProps
-  } = props;
-  const state = useTabProviderContext('tabPanel', id);
-  const isActive = propIsActive || state?.isActive;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    id: state?.tabPanelId,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      isActive
-    })),
-    role: "tabpanel",
-    tabIndex: isActive ? 0 : -1,
-    "aria-labelledby": state?.tabId,
-    children: (!state?.isLazy || isActive) && children
-  });
-});
-TabPanel.displayName = COMPONENT_NAME;
-TabPanel.className = CLASSNAME;
-TabPanel.defaultProps = DEFAULT_PROPS;
-
-export { Tab, TabList, TabListLayout, TabPanel, TabProvider };

package/_internal/components/text/index-5bfc6d5e.js

@@ -1 +0,0 @@
-export { T as Text } from '../../e913a3af.js';

package/_internal/components/text-field/index-47c98d09.js

@@ -1,360 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import classNames from 'classnames';
-import get from 'lodash/get';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs } from '../../f0d7d6ea.js';
-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, Size, Emphasis, Kind } from '@lumx/core/js/constants';
-import { InputLabel } from '../input-label/index-0113f382.js';
-import { I as Icon, m as mdiAlertCircle } from '../../bace1bf1.js';
-import { m as mdiCheckCircle } from '../../de24f857.js';
-import { I as IconButton } from '../../b83e864b.js';
-import { m as mdiCloseCircle } from '../../ef5d1aac.js';
-import { InputHelper } from '../input-helper/index-5a837e7c.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'TextField';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Default minimum number of rows in the multiline mode.
- */
-const DEFAULT_MIN_ROWS = 2;
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  type: 'text'
-};
-
-/**
- * Hook that allows to calculate the number of rows needed for a text area.
- * @param minimumRows Minimum number of rows that we want to display.
- * @return rows to be used and a callback to recalculate
- */
-const useComputeNumberOfRows = minimumRows => {
-  const [rows, setRows] = useState(minimumRows);
-  const recompute = target => {
-    /**
-     * HEAD's UP! This part is a little bit tricky. The idea here is to only
-     * display the necessary rows on the textarea. In order to dynamically adjust
-     * the height on that field, we need to:
-     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
-     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
-     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
-     * by the line height.
-     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
-     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
-     * when we will not see the update and the rows will be resized to the minimum.
-     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
-     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
-     */
-    // eslint-disable-next-line no-param-reassign
-    target.rows = minimumRows;
-    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
-    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
-    // eslint-disable-next-line no-param-reassign
-    target.rows = currentRows;
-    setRows(currentRows);
-  };
-  return {
-    recomputeNumberOfRows: recompute,
-    rows
-  };
-};
-const renderInputNative = props => {
-  const {
-    id,
-    isRequired,
-    placeholder,
-    multiline,
-    value,
-    setFocus,
-    onChange,
-    onFocus,
-    onBlur,
-    inputRef,
-    rows,
-    recomputeNumberOfRows,
-    type,
-    name,
-    hasError,
-    describedById,
-    ...forwardedProps
-  } = props;
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const ref = useRef(null);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    // Recompute the number of rows for the first rendering
-    if (multiline && ref && ref.current) {
-      recomputeNumberOfRows(ref.current);
-    }
-  }, [ref, multiline, recomputeNumberOfRows, value]);
-  const onTextFieldFocus = event => {
-    onFocus?.(event);
-    setFocus(true);
-  };
-  const onTextFieldBlur = event => {
-    onBlur?.(event);
-    setFocus(false);
-  };
-  const handleChange = event => {
-    onChange(get(event, 'target.value'), name, event);
-  };
-  const Component = multiline ? 'textarea' : 'input';
-  const inputProps = {
-    ...forwardedProps,
-    id,
-    className: multiline ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea` : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,
-    placeholder,
-    value,
-    name,
-    required: isRequired,
-    onFocus: onTextFieldFocus,
-    onBlur: onTextFieldBlur,
-    onChange: handleChange,
-    'aria-invalid': hasError ? 'true' : undefined,
-    'aria-describedby': describedById,
-    readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
-    ref: mergeRefs(inputRef, ref)
-  };
-  if (multiline) {
-    inputProps.rows = rows;
-  } else {
-    inputProps.type = type;
-  }
-  return /*#__PURE__*/jsx(Component, {
-    ...inputProps
-  });
-};
-
-/**
- * TextField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const TextField = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    chips,
-    className,
-    clearButtonProps,
-    error,
-    forceFocusStyle,
-    hasError,
-    helper,
-    icon,
-    id,
-    inputRef: inputRefProps,
-    isRequired,
-    isValid,
-    label,
-    labelProps,
-    maxLength,
-    minimumRows,
-    multiline,
-    name,
-    onBlur,
-    onChange,
-    onClear,
-    onFocus,
-    placeholder,
-    textFieldRef,
-    theme = defaultTheme,
-    type = DEFAULT_PROPS.type,
-    value,
-    afterElement,
-    ...forwardedProps
-  } = otherProps;
-  const generatedTextFieldId = useId();
-  const textFieldId = id || generatedTextFieldId;
-  /** Keep a clean local input ref to manage focus */
-  const localInputRef = useRef(null);
-  /** Merge prop input ref and local input ref */
-  const inputRef = mergeRefs(localInputRef, inputRefProps);
-  /**
-   * Generate unique ids for both the helper and error texts, in order to
-   * later on add them to the input native as aria-describedby. If both the error and the helper are present,
-   * we want to first use the most important one, which is the errorId. That way, screen readers will read first
-   * the error and then the helper
-   */
-  const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
-  const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
-  const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
-  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
-  const [isFocus, setFocus] = useState(false);
-  const {
-    rows,
-    recomputeNumberOfRows
-  } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
-  const valueLength = (value || '').length;
-  const isNotEmpty = valueLength > 0;
-
-  /**
-   * Function triggered when the Clear Button is clicked.
-   * The idea is to execute the `onChange` callback with an empty string
-   * and remove focus from the clear button.
-   * @param evt On clear event.
-   */
-  const handleClear = evt => {
-    evt.nativeEvent.preventDefault();
-    evt.nativeEvent.stopPropagation();
-    evt.currentTarget.blur();
-    onChange('');
-    if (onClear) {
-      onClear(evt);
-    }
-
-    /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
-    const inputElement = localInputRef;
-    if (inputElement && inputElement.current) {
-      inputElement.current.focus();
-    }
-  };
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames(className, handleBasicClasses({
-      hasChips: Boolean(chips),
-      hasError: !isValid && hasError,
-      hasIcon: Boolean(icon),
-      hasInput: !multiline,
-      hasInputClear: clearButtonProps && isNotEmpty,
-      hasLabel: Boolean(label),
-      hasPlaceholder: Boolean(placeholder),
-      hasTextarea: multiline,
-      hasValue: Boolean(value),
-      isDisabled: isAnyDisabled,
-      isFocus: isFocus || forceFocusStyle,
-      isValid,
-      prefix: CLASSNAME,
-      theme
-    })),
-    children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__header`,
-      children: [label && /*#__PURE__*/jsx(InputLabel, {
-        ...labelProps,
-        htmlFor: textFieldId,
-        className: `${CLASSNAME}__label`,
-        isRequired: isRequired,
-        theme: theme,
-        children: label
-      }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__char-counter`,
-        children: [/*#__PURE__*/jsx("span", {
-          children: maxLength - valueLength
-        }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
-          icon: mdiAlertCircle,
-          size: Size.xxs
-        })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__wrapper`,
-      ref: textFieldRef,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__input-icon`,
-        color: theme === Theme.dark ? 'light' : undefined,
-        icon: icon,
-        size: Size.xs
-      }), chips && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__chips`,
-        children: [chips, renderInputNative({
-          id: textFieldId,
-          inputRef,
-          ...disabledStateProps,
-          isRequired,
-          maxLength,
-          multiline,
-          onBlur,
-          onChange,
-          onFocus,
-          placeholder,
-          recomputeNumberOfRows,
-          rows,
-          setFocus,
-          type,
-          value,
-          name,
-          hasError,
-          describedById,
-          ...forwardedProps
-        })]
-      }), !chips && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__input-wrapper`,
-        children: renderInputNative({
-          id: textFieldId,
-          inputRef,
-          ...disabledStateProps,
-          isRequired,
-          maxLength,
-          multiline,
-          onBlur,
-          onChange,
-          onFocus,
-          placeholder,
-          recomputeNumberOfRows,
-          rows,
-          setFocus,
-          type,
-          value,
-          name,
-          hasError,
-          describedById,
-          ...forwardedProps
-        })
-      }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__input-validity`,
-        color: theme === Theme.dark ? 'light' : undefined,
-        icon: isValid ? mdiCheckCircle : mdiAlertCircle,
-        size: Size.xxs
-      }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
-        ...clearButtonProps,
-        className: `${CLASSNAME}__input-clear`,
-        icon: mdiCloseCircle,
-        emphasis: Emphasis.low,
-        size: Size.s,
-        theme: theme,
-        onClick: handleClear,
-        type: "button"
-      }), afterElement && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__after-element`,
-        children: afterElement
-      })]
-    }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME}__helper`,
-      kind: Kind.error,
-      theme: theme,
-      id: errorId,
-      children: error
-    }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME}__helper`,
-      theme: theme,
-      id: helperId,
-      children: helper
-    })]
-  });
-});
-TextField.displayName = COMPONENT_NAME;
-TextField.className = CLASSNAME;
-TextField.defaultProps = DEFAULT_PROPS;
-
-export { TextField };

package/_internal/components/thumbnail/index-71545d95.js

@@ -1,41 +0,0 @@
-export { T as Thumbnail, u as useFocusPointStyle } from '../../035c132d.js';
-import { AspectRatio } from '@lumx/core/js/constants';
-
-/**
- *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
- */
-
-/**
- * Loading attribute is not yet supported in typescript, so we need
- * to add it in order to avoid a ts error.
- * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
- */
-
-/**
- * All available aspect ratios.
- * @deprecated
- */
-const ThumbnailAspectRatio = {
-  ...AspectRatio
-};
-
-/**
- *  Thumbnail sizes.
- */
-
-/**
- * Thumbnail variants.
- */
-const ThumbnailVariant = {
-  squared: 'squared',
-  rounded: 'rounded'
-};
-/**
- * Thumbnail object fit.
- */
-const ThumbnailObjectFit = {
-  cover: 'cover',
-  contain: 'contain'
-};
-
-export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };