@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/_internal/3646abc3.js

@@ -0,0 +1,346 @@
+import { m as getRootClassName, n as forwardRef, b as Theme, l as classNames, _ as _extends, c as Size, d as Emphasis, K as Kind } from './d3321a86.js';
+import { useRef, useState, useEffect } from 'react';
+import get from 'lodash/get';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { u as useId } from './3a1facc0.js';
+import { u as useTheme } from './3181f000.js';
+import { u as useDisableStateProps } from './60923026.js';
+import { InputLabel } from './9210e2f3.js';
+import { I as Icon, m as mdiAlertCircle } from './4e1dde79.js';
+import { m as mdiCheckCircle } from './de24f857.js';
+import { I as IconButton } from './7b214f74.js';
+import { m as mdiCloseCircle } from './ef5d1aac.js';
+import { InputHelper } from './fc47f2da.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * 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__*/React.createElement(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__*/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: isAnyDisabled,
+      isFocus: isFocus || forceFocusStyle,
+      isValid,
+      prefix: CLASSNAME,
+      theme
+    }))
+  }, (label || maxLength) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__header`
+  }, label && /*#__PURE__*/React.createElement(InputLabel, _extends({}, labelProps, {
+    htmlFor: textFieldId,
+    className: `${CLASSNAME}__label`,
+    isRequired: isRequired,
+    theme: theme
+  }), label), maxLength && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__char-counter`
+  }, /*#__PURE__*/React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && /*#__PURE__*/React.createElement(Icon, {
+    icon: mdiAlertCircle,
+    size: Size.xxs
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__wrapper`,
+    ref: textFieldRef
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__input-icon`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: icon,
+    size: Size.xs
+  }), chips && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__chips`
+  }, chips, renderInputNative({
+    id: textFieldId,
+    inputRef,
+    ...disabledStateProps,
+    isRequired,
+    maxLength,
+    multiline,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    recomputeNumberOfRows,
+    rows,
+    setFocus,
+    type,
+    value,
+    name,
+    hasError,
+    describedById,
+    ...forwardedProps
+  })), !chips && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__input-wrapper`
+  }, renderInputNative({
+    id: textFieldId,
+    inputRef,
+    ...disabledStateProps,
+    isRequired,
+    maxLength,
+    multiline,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    recomputeNumberOfRows,
+    rows,
+    setFocus,
+    type,
+    value,
+    name,
+    hasError,
+    describedById,
+    ...forwardedProps
+  })), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME}__input-validity`,
+    color: theme === Theme.dark ? 'light' : undefined,
+    icon: isValid ? mdiCheckCircle : mdiAlertCircle,
+    size: Size.xxs
+  }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
+    className: `${CLASSNAME}__input-clear`,
+    icon: mdiCloseCircle,
+    emphasis: Emphasis.low,
+    size: Size.s,
+    theme: theme,
+    onClick: handleClear,
+    type: "button"
+  })), afterElement && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__after-element`
+  }, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME}__helper`,
+    kind: Kind.error,
+    theme: theme,
+    id: errorId
+  }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
+    className: `${CLASSNAME}__helper`,
+    theme: theme,
+    id: helperId
+  }, helper));
+});
+TextField.displayName = COMPONENT_NAME;
+TextField.className = CLASSNAME;
+TextField.defaultProps = DEFAULT_PROPS;
+
+export { TextField };
+//# sourceMappingURL=3646abc3.js.map

package/_internal/3646abc3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3646abc3.js","sources":["../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport {\n    Emphasis,\n    Icon,\n    IconButton,\n    IconButtonProps,\n    InputHelper,\n    InputLabel,\n    InputLabelProps,\n    Kind,\n    Size,\n    Theme,\n} from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps, HasTheme, HasAriaDisabled {\n    /** Chip Group to be rendered before the main text input. */\n    chips?: 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    /** Additional label props. */\n    labelProps?: InputLabelProps;\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    /** Native input type (only when `multiline` is disabled). */\n    type?: React.ComponentProps<'input'>['type'];\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 clear callback. */\n    onClear?(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    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    'aria-disabled'?: boolean;\n    isRequired?: boolean;\n    readOnly?: boolean;\n    multiline?: boolean;\n    maxLength?: number;\n    placeholder?: string;\n    rows: number;\n    type: TextFieldProps['type'];\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    hasError?: boolean;\n    describedById?: string;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n    const {\n        id,\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        hasError,\n        describedById,\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        required: isRequired,\n        onFocus: onTextFieldFocus,\n        onBlur: onTextFieldBlur,\n        onChange: handleChange,\n        'aria-invalid': hasError ? 'true' : undefined,\n        'aria-describedby': describedById,\n        readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],\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 = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        chips,\n        className,\n        clearButtonProps,\n        error,\n        forceFocusStyle,\n        hasError,\n        helper,\n        icon,\n        id,\n        inputRef: inputRefProps,\n        isRequired,\n        isValid,\n        label,\n        labelProps,\n        maxLength,\n        minimumRows,\n        multiline,\n        name,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        textFieldRef,\n        theme = defaultTheme,\n        type = DEFAULT_PROPS.type,\n        value,\n        afterElement,\n        ...forwardedProps\n    } = otherProps;\n    const generatedTextFieldId = useId();\n    const textFieldId = id || generatedTextFieldId;\n    /** Keep a clean local input ref to manage focus */\n    const localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n    /** Merge prop input ref and local input ref */\n    const inputRef = mergeRefs(localInputRef, inputRefProps);\n    /**\n     * Generate unique ids for both the helper and error texts, in order to\n     * later on add them to the input native as aria-describedby. If both the error and the helper are present,\n     * we want to first use the most important one, which is the errorId. That way, screen readers will read first\n     * the error and then the helper\n     */\n    const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;\n    const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;\n    const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);\n    const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');\n\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 handleClear = (evt: React.ChangeEvent) => {\n        evt.nativeEvent.preventDefault();\n        evt.nativeEvent.stopPropagation();\n        (evt.currentTarget as HTMLElement).blur();\n\n        onChange('');\n\n        if (onClear) {\n            onClear(evt);\n        }\n\n        /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */\n        const inputElement = localInputRef as RefObject<HTMLInputElement | HTMLTextAreaElement>;\n\n        if (inputElement && inputElement.current) {\n            inputElement.current.focus();\n        }\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: isAnyDisabled,\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                            {...labelProps}\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                            ...disabledStateProps,\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                            hasError,\n                            describedById,\n                            ...forwardedProps,\n                        })}\n                    </div>\n                )}\n\n                {!chips && (\n                    <div className={`${CLASSNAME}__input-wrapper`}>\n                        {renderInputNative({\n                            id: textFieldId,\n                            inputRef,\n                            ...disabledStateProps,\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                            hasError,\n                            describedById,\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 && !isAnyDisabled && (\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={handleClear}\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} id={errorId}>\n                    {error}\n                </InputHelper>\n            )}\n\n            {helper && (\n                <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>\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","type","useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","hasError","describedById","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","get","Component","inputProps","className","required","undefined","readOnly","mergeRefs","React","createElement","TextField","forwardRef","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","chips","clearButtonProps","error","forceFocusStyle","helper","icon","inputRefProps","isValid","label","labelProps","maxLength","onClear","textFieldRef","theme","afterElement","generatedTextFieldId","useId","textFieldId","localInputRef","helperId","errorId","describedByIds","filter","Boolean","length","join","isFocus","valueLength","isNotEmpty","handleClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","inputElement","focus","classNames","handleBasicClasses","hasChips","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","isDisabled","prefix","InputLabel","_extends","htmlFor","Icon","mdiAlertCircle","size","Size","xxs","color","dark","xs","mdiCheckCircle","IconButton","mdiCloseCircle","emphasis","Emphasis","low","s","onClick","InputHelper","kind","Kind","displayName","defaultProps"],"mappings":"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"}

package/_internal/3683d267.js

@@ -0,0 +1,52 @@
+import { m as getRootClassName, n as forwardRef, b as Theme, _ as _extends, l as classNames } from './d3321a86.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { u as useTheme } from './3181f000.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Divider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Divider = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("hr", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }))
+  }));
+});
+Divider.displayName = COMPONENT_NAME;
+Divider.className = CLASSNAME;
+Divider.defaultProps = DEFAULT_PROPS;
+
+export { Divider };
+//# sourceMappingURL=3683d267.js.map

package/_internal/3683d267.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3683d267.js","sources":["../../src/components/divider/Divider.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DividerProps> = {};\n\n/**\n * Divider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <hr\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        />\n    );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Divider","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;AAQA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAoC,GAAG,EAAE,CAAA;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGL,YAAY;IAAE,GAAGM,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAEpE,EAAA,oBACIS,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AACIV,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLO,cAAc,EAAA;AAClBF,IAAAA,SAAS,EAAEM,UAAU,CAACN,SAAS,EAAEO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEnB,SAAS;AAAEY,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CACtF,CAAC,CAAA;AAEV,CAAC,EAAC;AACFT,OAAO,CAACiB,WAAW,GAAGrB,cAAc,CAAA;AACpCI,OAAO,CAACQ,SAAS,GAAGX,SAAS,CAAA;AAC7BG,OAAO,CAACkB,YAAY,GAAGnB,aAAa;;;;"}