@lumx/react 3.0.2 → 3.0.3

package/esm/_internal/TextField.js

@@ -1,322 +0,0 @@
-import { b as _objectWithoutProperties, d as _slicedToArray, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Size, Theme, Emphasis, Kind } from './components.js';
-import React, { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { I as Icon, c as mdiAlertCircle, b as mdiCheckCircle, n as mdiCloseCircle } from './Icon2.js';
-import { u as uid } from '../index2.js';
-import get from 'lodash/get';
-import { m as mergeRefs } from './mergeRefs.js';
-import { I as IconButton } from './IconButton.js';
-import { I as InputHelper } from './InputHelper.js';
-import { I as InputLabel } from './InputLabel.js';
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME = 'TextField';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME = getRootClassName(COMPONENT_NAME);
-/**
- * Default minimum number of rows in the multiline mode.
- */
-
-var DEFAULT_MIN_ROWS = 2;
-/**
- * Component default props.
- */
-
-var DEFAULT_PROPS = {
-  theme: Theme.light,
-  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
- */
-
-var useComputeNumberOfRows = function useComputeNumberOfRows(minimumRows) {
-  var _useState = useState(minimumRows),
-      _useState2 = _slicedToArray(_useState, 2),
-      rows = _useState2[0],
-      setRows = _useState2[1];
-
-  var recompute = function 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;
-    var 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: rows
-  };
-};
-
-var renderInputNative = function renderInputNative(props) {
-  var id = props.id,
-      isDisabled = props.isDisabled,
-      isRequired = props.isRequired,
-      placeholder = props.placeholder,
-      multiline = props.multiline,
-      value = props.value,
-      setFocus = props.setFocus,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      inputRef = props.inputRef,
-      rows = props.rows,
-      recomputeNumberOfRows = props.recomputeNumberOfRows,
-      type = props.type,
-      name = props.name,
-      forwardedProps = _objectWithoutProperties(props, ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name"]); // eslint-disable-next-line react-hooks/rules-of-hooks
-
-
-  var ref = useRef(null); // eslint-disable-next-line react-hooks/rules-of-hooks
-
-  useEffect(function () {
-    // Recompute the number of rows for the first rendering
-    if (multiline && ref && ref.current) {
-      recomputeNumberOfRows(ref.current);
-    }
-  }, [ref, multiline, recomputeNumberOfRows, value]);
-
-  var onTextFieldFocus = function onTextFieldFocus(event) {
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    setFocus(true);
-  };
-
-  var onTextFieldBlur = function onTextFieldBlur(event) {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    setFocus(false);
-  };
-
-  var handleChange = function handleChange(event) {
-    onChange(get(event, 'target.value'), name, event);
-  };
-
-  var Component = multiline ? 'textarea' : 'input';
-
-  var inputProps = _objectSpread2({}, forwardedProps, {
-    id: id,
-    className: multiline ? "".concat(CLASSNAME, "__input-native ").concat(CLASSNAME, "__input-native--textarea") : "".concat(CLASSNAME, "__input-native ").concat(CLASSNAME, "__input-native--text"),
-    placeholder: placeholder,
-    value: value,
-    name: name,
-    disabled: isDisabled,
-    required: isRequired,
-    onFocus: onTextFieldFocus,
-    onBlur: onTextFieldBlur,
-    onChange: handleChange,
-    ref: mergeRefs(inputRef, ref)
-  });
-
-  if (multiline) {
-    inputProps.rows = rows;
-  } else {
-    inputProps.type = type;
-  }
-
-  return React.createElement(Component, inputProps);
-};
-/**
- * TextField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-
-var TextField = forwardRef(function (props, ref) {
-  var chips = props.chips,
-      className = props.className,
-      clearButtonProps = props.clearButtonProps,
-      disabled = props.disabled,
-      error = props.error,
-      forceFocusStyle = props.forceFocusStyle,
-      hasError = props.hasError,
-      helper = props.helper,
-      icon = props.icon,
-      id = props.id,
-      inputRef = props.inputRef,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? disabled : _props$isDisabled,
-      isRequired = props.isRequired,
-      isValid = props.isValid,
-      label = props.label,
-      maxLength = props.maxLength,
-      minimumRows = props.minimumRows,
-      multiline = props.multiline,
-      name = props.name,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      placeholder = props.placeholder,
-      textFieldRef = props.textFieldRef,
-      theme = props.theme,
-      type = props.type,
-      value = props.value,
-      afterElement = props.afterElement,
-      forwardedProps = _objectWithoutProperties(props, ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"]);
-
-  var textFieldId = useMemo(function () {
-    return id || "text-field-".concat(uid());
-  }, [id]);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocus = _useState4[0],
-      setFocus = _useState4[1];
-
-  var _useComputeNumberOfRo = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0),
-      rows = _useComputeNumberOfRo.rows,
-      recomputeNumberOfRows = _useComputeNumberOfRo.recomputeNumberOfRows;
-
-  var valueLength = (value || '').length;
-  var 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.
-   */
-
-  var onClear = function onClear(evt) {
-    evt.nativeEvent.preventDefault();
-    evt.nativeEvent.stopPropagation();
-    evt.currentTarget.blur();
-    onChange('');
-  };
-
-  return React.createElement("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: isDisabled,
-      isFocus: isFocus || forceFocusStyle,
-      isValid: isValid,
-      prefix: CLASSNAME,
-      theme: theme
-    }))
-  }, (label || maxLength) && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__header")
-  }, label && React.createElement(InputLabel, {
-    htmlFor: textFieldId,
-    className: "".concat(CLASSNAME, "__label"),
-    isRequired: isRequired,
-    theme: theme
-  }, label), maxLength && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__char-counter")
-  }, React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && React.createElement(Icon, {
-    icon: mdiAlertCircle,
-    size: Size.xxs
-  }))), React.createElement("div", {
-    className: "".concat(CLASSNAME, "__wrapper"),
-    ref: textFieldRef
-  }, icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME, "__input-icon"),
-    color: theme === Theme.dark ? 'light' : undefined,
-    icon: icon,
-    size: Size.xs
-  }), chips && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__chips")
-  }, chips, renderInputNative(_objectSpread2({
-    id: textFieldId,
-    inputRef: inputRef,
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    maxLength: maxLength,
-    multiline: multiline,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    placeholder: placeholder,
-    recomputeNumberOfRows: recomputeNumberOfRows,
-    rows: rows,
-    setFocus: setFocus,
-    type: type,
-    value: value,
-    name: name
-  }, forwardedProps))), !chips && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__input-wrapper")
-  }, renderInputNative(_objectSpread2({
-    id: textFieldId,
-    inputRef: inputRef,
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    maxLength: maxLength,
-    multiline: multiline,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    placeholder: placeholder,
-    recomputeNumberOfRows: recomputeNumberOfRows,
-    rows: rows,
-    setFocus: setFocus,
-    type: type,
-    value: value,
-    name: name
-  }, forwardedProps))), (isValid || hasError) && React.createElement(Icon, {
-    className: "".concat(CLASSNAME, "__input-validity"),
-    color: theme === Theme.dark ? 'light' : undefined,
-    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
-    size: Size.xxs
-  }), clearButtonProps && isNotEmpty && React.createElement(IconButton, _extends({}, clearButtonProps, {
-    className: "".concat(CLASSNAME, "__input-clear"),
-    icon: mdiCloseCircle,
-    emphasis: Emphasis.low,
-    size: Size.s,
-    theme: theme,
-    onClick: onClear,
-    type: "button"
-  })), afterElement && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__after-element")
-  }, afterElement)), hasError && error && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME, "__helper"),
-    kind: Kind.error,
-    theme: theme
-  }, error), helper && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME, "__helper"),
-    theme: theme
-  }, helper));
-});
-TextField.displayName = COMPONENT_NAME;
-TextField.className = CLASSNAME;
-TextField.defaultProps = DEFAULT_PROPS;
-
-export { TextField as T };
-//# sourceMappingURL=TextField.js.map

package/esm/_internal/TextField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport { uid } from 'uid';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps, HasTheme {\n    /** Chip Group to be rendered before the main text input. */\n    chips?: HTMLElement | ReactNode;\n    /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */\n    clearButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Error message. */\n    error?: string | ReactNode;\n    /** Whether we force the focus style or not. */\n    forceFocusStyle?: boolean;\n    /** Whether the text field is displayed with error style or not. */\n    hasError?: boolean;\n    /** Additional element to put at the end of the text field. */\n    afterElement?: ReactNode;\n    /** Helper text. */\n    helper?: string | ReactNode;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Native input id property (generated if not provided to link the label element). */\n    id?: string;\n    /** Reference to the <input> or <textarea> element. */\n    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is required or not. */\n    isRequired?: boolean;\n    /** Whether the text field is displayed with valid style or not. */\n    isValid?: boolean;\n    /** Label text. */\n    label?: string;\n    /** Max string length the input accepts (constrains the input and displays a character counter). */\n    maxLength?: number;\n    /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n    minimumRows?: number;\n    /** Whether the text field is a textarea or an input. */\n    multiline?: boolean;\n    /** Native input name property. */\n    name?: string;\n    /** Placeholder text. */\n    placeholder?: string;\n    /** Reference to the wrapper. */\n    textFieldRef?: Ref<HTMLDivElement>;\n    /** Value. */\n    value?: string;\n    /** On blur callback. */\n    onBlur?(event: React.FocusEvent): void;\n    /** On change callback. */\n    onChange(value: string, name?: string, event?: SyntheticEvent): void;\n    /** On focus callback. */\n    onFocus?(event: React.FocusEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TextField';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Default minimum number of rows in the multiline mode.\n */\nconst DEFAULT_MIN_ROWS = 2;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TextFieldProps> = {\n    theme: Theme.light,\n    type: 'text',\n};\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nconst useComputeNumberOfRows = (\n    minimumRows: number,\n): {\n    /** number of rows to be used on the text area */\n    rows: number;\n    /**\n     * Callback in order to recalculate the number of rows due to a change on the text area\n     */\n    recomputeNumberOfRows(target: Element): void;\n} => {\n    const [rows, setRows] = useState(minimumRows);\n\n    const recompute = (target: Element) => {\n        /**\n         * HEAD's UP! This part is a little bit tricky. The idea here is to only\n         * display the necessary rows on the textarea. In order to dynamically adjust\n         * the height on that field, we need to:\n         * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n         * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n         * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n         * by the line height.\n         * 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\n         * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n         * when we will not see the update and the rows will be resized to the minimum.\n         * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n         * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n         */\n        // eslint-disable-next-line no-param-reassign\n        (target as HTMLTextAreaElement).rows = minimumRows;\n        let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n        currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n        // eslint-disable-next-line no-param-reassign\n        (target as HTMLTextAreaElement).rows = currentRows;\n\n        setRows(currentRows);\n    };\n\n    return {\n        recomputeNumberOfRows: recompute,\n        rows,\n    };\n};\n\ninterface InputNativeProps {\n    id?: string;\n    inputRef?: TextFieldProps['inputRef'];\n    isDisabled?: boolean;\n    isRequired?: boolean;\n    multiline?: boolean;\n    maxLength?: number;\n    placeholder?: string;\n    rows: number;\n    type: string;\n    name?: string;\n    value?: string;\n    setFocus(focus: boolean): void;\n    recomputeNumberOfRows(target: Element): void;\n    onChange(value: string, name?: string, event?: SyntheticEvent): void;\n    onFocus?(value: React.FocusEvent): void;\n    onBlur?(value: React.FocusEvent): void;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n    const {\n        id,\n        isDisabled,\n        isRequired,\n        placeholder,\n        multiline,\n        value,\n        setFocus,\n        onChange,\n        onFocus,\n        onBlur,\n        inputRef,\n        rows,\n        recomputeNumberOfRows,\n        type,\n        name,\n        ...forwardedProps\n    } = props;\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const ref = useRef<HTMLElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        // Recompute the number of rows for the first rendering\n        if (multiline && ref && ref.current) {\n            recomputeNumberOfRows(ref.current);\n        }\n    }, [ref, multiline, recomputeNumberOfRows, value]);\n\n    const onTextFieldFocus = (event: React.FocusEvent) => {\n        onFocus?.(event);\n        setFocus(true);\n    };\n\n    const onTextFieldBlur = (event: React.FocusEvent) => {\n        onBlur?.(event);\n        setFocus(false);\n    };\n\n    const handleChange = (event: React.ChangeEvent) => {\n        onChange(get(event, 'target.value'), name, event);\n    };\n\n    const Component = multiline ? 'textarea' : 'input';\n    const inputProps: any = {\n        ...forwardedProps,\n        id,\n        className: multiline\n            ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`\n            : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,\n        placeholder,\n        value,\n        name,\n        disabled: isDisabled,\n        required: isRequired,\n        onFocus: onTextFieldFocus,\n        onBlur: onTextFieldBlur,\n        onChange: handleChange,\n        ref: mergeRefs(inputRef as any, ref) as any,\n    };\n    if (multiline) {\n        inputProps.rows = rows;\n    } else {\n        inputProps.type = type;\n    }\n    return <Component {...inputProps} />;\n};\n\n/**\n * TextField component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        chips,\n        className,\n        clearButtonProps,\n        disabled,\n        error,\n        forceFocusStyle,\n        hasError,\n        helper,\n        icon,\n        id,\n        inputRef,\n        isDisabled = disabled,\n        isRequired,\n        isValid,\n        label,\n        maxLength,\n        minimumRows,\n        multiline,\n        name,\n        onBlur,\n        onChange,\n        onFocus,\n        placeholder,\n        textFieldRef,\n        theme,\n        type,\n        value,\n        afterElement,\n        ...forwardedProps\n    } = props;\n    const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);\n    const [isFocus, setFocus] = useState(false);\n    const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);\n    const valueLength = (value || '').length;\n    const isNotEmpty = valueLength > 0;\n\n    /**\n     * Function triggered when the Clear Button is clicked.\n     * The idea is to execute the `onChange` callback with an empty string\n     * and remove focus from the clear button.\n     * @param evt On clear event.\n     */\n    const onClear = (evt: React.ChangeEvent) => {\n        evt.nativeEvent.preventDefault();\n        evt.nativeEvent.stopPropagation();\n        (evt.currentTarget as HTMLElement).blur();\n\n        onChange('');\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    hasChips: Boolean(chips),\n                    hasError: !isValid && hasError,\n                    hasIcon: Boolean(icon),\n                    hasInput: !multiline,\n                    hasInputClear: clearButtonProps && isNotEmpty,\n                    hasLabel: Boolean(label),\n                    hasPlaceholder: Boolean(placeholder),\n                    hasTextarea: multiline,\n                    hasValue: Boolean(value),\n                    isDisabled,\n                    isFocus: isFocus || forceFocusStyle,\n                    isValid,\n                    prefix: CLASSNAME,\n                    theme,\n                }),\n            )}\n        >\n            {(label || maxLength) && (\n                <div className={`${CLASSNAME}__header`}>\n                    {label && (\n                        <InputLabel\n                            htmlFor={textFieldId}\n                            className={`${CLASSNAME}__label`}\n                            isRequired={isRequired}\n                            theme={theme}\n                        >\n                            {label}\n                        </InputLabel>\n                    )}\n\n                    {maxLength && (\n                        <div className={`${CLASSNAME}__char-counter`}>\n                            <span>{maxLength - valueLength}</span>\n                            {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}\n                        </div>\n                    )}\n                </div>\n            )}\n\n            <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>\n                {icon && (\n                    <Icon\n                        className={`${CLASSNAME}__input-icon`}\n                        color={theme === Theme.dark ? 'light' : undefined}\n                        icon={icon}\n                        size={Size.xs}\n                    />\n                )}\n\n                {chips && (\n                    <div className={`${CLASSNAME}__chips`}>\n                        {chips}\n\n                        {renderInputNative({\n                            id: textFieldId,\n                            inputRef,\n                            isDisabled,\n                            isRequired,\n                            maxLength,\n                            multiline,\n                            onBlur,\n                            onChange,\n                            onFocus,\n                            placeholder,\n                            recomputeNumberOfRows,\n                            rows,\n                            setFocus,\n                            type,\n                            value,\n                            name,\n                            ...forwardedProps,\n                        })}\n                    </div>\n                )}\n\n                {!chips && (\n                    <div className={`${CLASSNAME}__input-wrapper`}>\n                        {renderInputNative({\n                            id: textFieldId,\n                            inputRef,\n                            isDisabled,\n                            isRequired,\n                            maxLength,\n                            multiline,\n                            onBlur,\n                            onChange,\n                            onFocus,\n                            placeholder,\n                            recomputeNumberOfRows,\n                            rows,\n                            setFocus,\n                            type,\n                            value,\n                            name,\n                            ...forwardedProps,\n                        })}\n                    </div>\n                )}\n\n                {(isValid || hasError) && (\n                    <Icon\n                        className={`${CLASSNAME}__input-validity`}\n                        color={theme === Theme.dark ? 'light' : undefined}\n                        icon={isValid ? mdiCheckCircle : mdiAlertCircle}\n                        size={Size.xxs}\n                    />\n                )}\n\n                {clearButtonProps && isNotEmpty && (\n                    <IconButton\n                        {...clearButtonProps}\n                        className={`${CLASSNAME}__input-clear`}\n                        icon={mdiCloseCircle}\n                        emphasis={Emphasis.low}\n                        size={Size.s}\n                        theme={theme}\n                        onClick={onClear}\n                        type=\"button\"\n                    />\n                )}\n\n                {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}\n            </div>\n\n            {hasError && error && (\n                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n                    {error}\n                </InputHelper>\n            )}\n\n            {helper && (\n                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n                    {helper}\n                </InputHelper>\n            )}\n        </div>\n    );\n});\nTextField.displayName = COMPONENT_NAME;\nTextField.className = CLASSNAME;\nTextField.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_MIN_ROWS","DEFAULT_PROPS","theme","Theme","light","type","useComputeNumberOfRows","minimumRows","useState","rows","setRows","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isDisabled","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","get","Component","inputProps","className","disabled","required","mergeRefs","TextField","forwardRef","chips","clearButtonProps","error","forceFocusStyle","hasError","helper","icon","isValid","label","maxLength","textFieldRef","afterElement","textFieldId","useMemo","uid","isFocus","valueLength","length","isNotEmpty","onClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","classNames","handleBasicClasses","hasChips","Boolean","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","prefix","mdiAlertCircle","Size","xxs","dark","undefined","xs","mdiCheckCircle","mdiCloseCircle","Emphasis","low","s","Kind","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Thumbnail2.js

@@ -1,301 +0,0 @@
-import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { AspectRatio, Size, Theme } from './components.js';
-import React, { useState, useEffect, useMemo, forwardRef } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { I as Icon, t as mdiImageBroken } from './Icon2.js';
-import { m as mergeRefs } from './mergeRefs.js';
-
-function getState(img, event) {
-  // Error event occurred or image loaded empty.
-  if ((event === null || event === void 0 ? void 0 : event.type) === 'error' || (img === null || img === void 0 ? void 0 : img.complete) && ((img === null || img === void 0 ? void 0 : img.naturalWidth) === 0 || (img === null || img === void 0 ? void 0 : img.naturalHeight) === 0)) {
-    return 'hasError';
-  } // Image is undefined or incomplete.
-
-
-  if (!img || !img.complete) {
-    return 'isLoading';
-  } // Else loaded.
-
-
-  return 'isLoaded';
-}
-
-function useImageLoad(imageURL, imgRef) {
-  var _useState = useState(getState(imgRef)),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1]; // Update state when changing image URL or DOM reference.
-
-
-  useEffect(function () {
-    setState(getState(imgRef));
-  }, [imageURL, imgRef]); // Listen to `load` and `error` event on image
-
-  useEffect(function () {
-    var img = imgRef;
-    if (!img) return undefined;
-
-    var update = function update(event) {
-      return setState(getState(img, event));
-    };
-
-    img.addEventListener('load', update);
-    img.addEventListener('error', update);
-    return function () {
-      img.removeEventListener('load', update);
-      img.removeEventListener('error', update);
-    };
-  }, [imgRef, imgRef === null || imgRef === void 0 ? void 0 : imgRef.src]);
-  return state;
-}
-
-// Calculate shift to center the focus point in the container.
-function shiftPosition(_ref) {
-  var scale = _ref.scale,
-      focusPoint = _ref.focusPoint,
-      imageSize = _ref.imageSize,
-      containerSize = _ref.containerSize;
-  var scaledSize = imageSize / scale;
-  if (scaledSize === containerSize) return 0;
-  var scaledFocusHeight = focusPoint * scaledSize;
-  var startFocus = scaledFocusHeight - containerSize / 2;
-  var shift = startFocus / (scaledSize - containerSize);
-  return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
-}
-// Compute CSS properties to apply the focus point.
-var useFocusPointStyle = function useFocusPointStyle(_ref2, element, isLoaded) {
-  var image = _ref2.image,
-      aspectRatio = _ref2.aspectRatio,
-      focusPoint = _ref2.focusPoint,
-      _ref2$imgProps = _ref2.imgProps;
-  _ref2$imgProps = _ref2$imgProps === void 0 ? {} : _ref2$imgProps;
-  var width = _ref2$imgProps.width,
-      height = _ref2$imgProps.height;
-  // Get natural image size from imgProps or img element.
-  var imageSize = useMemo(function () {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) return undefined;
-    if (typeof width === 'number' && typeof height === 'number') return {
-      width: width,
-      height: height
-    };
-    if (element && isLoaded) return {
-      width: element.naturalWidth,
-      height: element.naturalHeight
-    };
-    return undefined;
-  }, [aspectRatio, element, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, height, image, isLoaded, width]); // Get container size (dependant on imageSize).
-
-  var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      containerSize = _useState2[0],
-      setContainerSize = _useState2[1];
-
-  useEffect(function updateContainerSize() {
-    var cWidth = element === null || element === void 0 ? void 0 : element.offsetWidth;
-    var cHeight = element === null || element === void 0 ? void 0 : element.offsetHeight;
-
-    if (cWidth && cHeight) {
-      // Update only if needed.
-      setContainerSize(function (oldContainerSize) {
-        return (oldContainerSize === null || oldContainerSize === void 0 ? void 0 : oldContainerSize.width) === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
-          width: cWidth,
-          height: cHeight
-        };
-      });
-    } else if (imageSize) {
-      // Wait for a render (in case the container size is dependent on the image size).
-      requestAnimationFrame(updateContainerSize);
-    }
-  }, [element === null || element === void 0 ? void 0 : element.offsetHeight, element === null || element === void 0 ? void 0 : element.offsetWidth, imageSize]); // Compute style.
-
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
-
-  useEffect(function () {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y)) {
-      return;
-    }
-
-    if (!element || !imageSize) {
-      // Focus point can be computed but now right now (image size unknown).
-      setStyle({
-        visibility: 'hidden'
-      });
-      return;
-    }
-
-    if (!containerSize) {
-      // Missing container size abort focus point compute.
-      setStyle({});
-      return;
-    }
-
-    var heightScale = imageSize.height / containerSize.height;
-    var widthScale = imageSize.width / containerSize.width;
-    var scale = Math.min(widthScale, heightScale); // Focus Y relative to the top (instead of the center)
-
-    var focusPointFromTop = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2;
-    var y = shiftPosition({
-      scale: scale,
-      focusPoint: focusPointFromTop,
-      imageSize: imageSize.height,
-      containerSize: containerSize.height
-    }); // Focus X relative to the left (instead of the center)
-
-    var focusPointFromLeft = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2;
-    var x = shiftPosition({
-      scale: scale,
-      focusPoint: focusPointFromLeft,
-      imageSize: imageSize.width,
-      containerSize: containerSize.width
-    });
-    var objectPosition = "".concat(x, "% ").concat(y, "%"); // Update only if needed.
-
-    setStyle(function (oldStyle) {
-      return oldStyle.objectPosition === objectPosition ? oldStyle : {
-        objectPosition: objectPosition
-      };
-    });
-  }, [aspectRatio, containerSize, element, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x, focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y, image, imageSize]);
-  return style;
-};
-
-/**
- * Component display name.
- */
-var COMPONENT_NAME = 'Thumbnail';
-/**
- * Component default class name and class prefix.
- */
-
-var CLASSNAME = getRootClassName(COMPONENT_NAME);
-/**
- * Component default props.
- */
-
-var DEFAULT_PROPS = {
-  fallback: mdiImageBroken,
-  loading: 'lazy',
-  theme: Theme.light
-};
-/**
- * Thumbnail component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-
-var Thumbnail = forwardRef(function (props, ref) {
-  var align = props.align,
-      alt = props.alt,
-      _props$aspectRatio = props.aspectRatio,
-      aspectRatio = _props$aspectRatio === void 0 ? AspectRatio.original : _props$aspectRatio,
-      badge = props.badge,
-      className = props.className,
-      crossOrigin = props.crossOrigin,
-      fallback = props.fallback,
-      fillHeight = props.fillHeight,
-      focusPoint = props.focusPoint,
-      image = props.image,
-      imgProps = props.imgProps,
-      propImgRef = props.imgRef,
-      isLoadingProp = props.isLoading,
-      loading = props.loading,
-      size = props.size,
-      theme = props.theme,
-      variant = props.variant,
-      linkProps = props.linkProps,
-      linkAs = props.linkAs,
-      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"]);
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      imgElement = _useState2[0],
-      setImgElement = _useState2[1]; // Image loading state.
-
-
-  var loadingState = useImageLoad(image, imgElement);
-  var isLoaded = loadingState === 'isLoaded';
-  var isLoading = isLoadingProp || loadingState === 'isLoading';
-  var hasError = loadingState === 'hasError'; // Focus point.
-
-  var focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
-  var hasIconErrorFallback = hasError && typeof fallback === 'string';
-  var hasCustomErrorFallback = hasError && !hasIconErrorFallback;
-  var imageErrorStyle = {};
-
-  if (hasIconErrorFallback) {
-    // Keep the image layout on icon fallback.
-    imageErrorStyle.visibility = 'hidden';
-  } else if (hasCustomErrorFallback) {
-    // Remove the image on custom fallback.
-    imageErrorStyle.display = 'none';
-  }
-
-  var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
-  var isButton = !!forwardedProps.onClick;
-  var isClickable = isButton || isLink;
-  var Wrapper = 'div';
-
-  var wrapperProps = _objectSpread2({}, forwardedProps);
-
-  if (isLink) {
-    Wrapper = linkAs || 'a';
-    Object.assign(wrapperProps, linkProps);
-  } else if (isButton) {
-    Wrapper = 'button';
-    wrapperProps.type = forwardedProps.type || 'button';
-    wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
-  }
-
-  return React.createElement(Wrapper, _extends({}, wrapperProps, {
-    ref: ref,
-    className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
-      align: align,
-      aspectRatio: aspectRatio,
-      prefix: CLASSNAME,
-      size: size,
-      theme: theme,
-      variant: variant,
-      isClickable: isClickable,
-      hasError: hasError,
-      hasIconErrorFallback: hasIconErrorFallback,
-      hasCustomErrorFallback: hasCustomErrorFallback,
-      isLoading: isLoading,
-      hasBadge: !!badge
-    }), fillHeight && "".concat(CLASSNAME, "--fill-height"))
-  }), React.createElement("div", {
-    className: "".concat(CLASSNAME, "__background")
-  }, React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, imageErrorStyle, {}, focusPointStyle),
-    ref: mergeRefs(setImgElement, propImgRef),
-    className: classnames(handleBasicClasses({
-      prefix: "".concat(CLASSNAME, "__image"),
-      isLoading: isLoading,
-      hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
-    }), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className),
-    crossOrigin: crossOrigin,
-    src: image,
-    alt: alt,
-    loading: loading
-  })), !isLoading && hasError && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__fallback")
-  }, hasIconErrorFallback ? React.createElement(Icon, {
-    icon: fallback,
-    size: Size.xxs,
-    theme: theme
-  }) : fallback)), badge && React.cloneElement(badge, {
-    className: classnames("".concat(CLASSNAME, "__badge"), badge.props.className)
-  }));
-});
-Thumbnail.displayName = COMPONENT_NAME;
-Thumbnail.className = CLASSNAME;
-Thumbnail.defaultProps = DEFAULT_PROPS;
-
-export { Thumbnail as T, useFocusPointStyle as u };
-//# sourceMappingURL=Thumbnail2.js.map