@awsui/components-react/input/internal.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React, { useRef } from 'react';
import clsx from 'clsx';
import mergeRefs from 'react-merge-refs';
import Icon from '../icon';
import styles from './styles.css.js';
import { fireNonCancelableEvent, fireKeyboardEvent } from '../internal/events';
import { getBaseProps } from '../internal/base-component';
import { useSearchProps } from './use-search-props';
import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
var iconClassName = function (position, handler) {
    var _a;
    return clsx(styles['input-icon'], styles["input-icon-" + position], (_a = {}, _a[styles['input-icon-hoverable']] = handler, _a));
};
var preventMouseDown = function (e) { return e.preventDefault(); };
function InternalInput(_a, ref) {
    var _b;
    var _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.autoComplete, autoComplete = _d === void 0 ? true : _d, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, name = _a.name, value = _a.value, controlId = _a.controlId, placeholder = _a.placeholder, autoFocus = _a.autoFocus, disabled = _a.disabled, readOnly = _a.readOnly, disableBrowserAutocorrect = _a.disableBrowserAutocorrect, noBorderRadius = _a.noBorderRadius, leftIcon = _a.leftIcon, _e = _a.leftIconVariant, leftIconVariant = _e === void 0 ? 'subtle' : _e, onLeftIconClick = _a.onLeftIconClick, invalid = _a.invalid, ariaRequired = _a.ariaRequired, rightIcon = _a.rightIcon, _f = _a.rightIconVariant, rightIconVariant = _f === void 0 ? 'normal' : _f, onRightIconClick = _a.onRightIconClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onChange = _a.onChange, onDelayedInput = _a.onDelayedInput, onBlur = _a.onBlur, onFocus = _a.onFocus, nativeAttributes = _a.nativeAttributes, rest = __rest(_a, ["type", "autoComplete", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "name", "value", "controlId", "placeholder", "autoFocus", "disabled", "readOnly", "disableBrowserAutocorrect", "noBorderRadius", "leftIcon", "leftIconVariant", "onLeftIconClick", "invalid", "ariaRequired", "rightIcon", "rightIconVariant", "onRightIconClick", "onKeyDown", "onKeyUp", "onChange", "onDelayedInput", "onBlur", "onFocus", "nativeAttributes"]);
    var baseProps = getBaseProps(rest);
    var fireDelayedInput = useDebounceCallback(function (value) { return fireNonCancelableEvent(onDelayedInput, { value: value }); });
    var handleChange = function (value) {
        fireDelayedInput(value);
        fireNonCancelableEvent(onChange, { value: value });
    };
    var inputRef = useRef(null);
    var searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);
    leftIcon = leftIcon !== null && leftIcon !== void 0 ? leftIcon : searchProps.leftIcon;
    rightIcon = rightIcon !== null && rightIcon !== void 0 ? rightIcon : searchProps.rightIcon;
    onRightIconClick = onRightIconClick !== null && onRightIconClick !== void 0 ? onRightIconClick : searchProps.onRightIconClick;
    var attributes = __assign({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, name: name,
        placeholder: placeholder,
        autoFocus: autoFocus, id: controlId, className: clsx(styles.input, type && styles["input-type-" + type], rightIcon && styles['input-has-icon-right'], leftIcon && styles['input-has-icon-left'], noBorderRadius && styles['input-has-no-border-radius'], (_b = {},
            _b[styles['input-readonly']] = readOnly,
            _b[styles['input-invalid']] = invalid,
            _b)), autoComplete: autoComplete ? 'on' : 'off', disabled: disabled,
        readOnly: readOnly,
        type: type, onKeyDown: onKeyDown && (function (event) { return fireKeyboardEvent(onKeyDown, event); }), onKeyUp: onKeyUp && (function (event) { return fireKeyboardEvent(onKeyUp, event); }), value: value !== null && value !== void 0 ? value : '', onChange: onChange && (function (event) { return handleChange(event.target.value); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }), onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }) }, nativeAttributes);
    if (disableBrowserAutocorrect) {
        attributes.autoCorrect = 'off';
        attributes.autoCapitalize = 'off';
    }
    if (ariaRequired) {
        attributes['aria-required'] = 'true';
    }
    if (invalid) {
        attributes['aria-invalid'] = 'true';
    }
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['input-container']) }),
        leftIcon && (React.createElement("span", { onClick: onLeftIconClick, className: iconClassName('left', onLeftIconClick) },
            React.createElement(Icon, { name: leftIcon, variant: disabled ? 'disabled' : leftIconVariant }))),
        React.createElement("input", __assign({ ref: mergeRefs([ref, inputRef]) }, attributes)),
        rightIcon && (React.createElement("span", { onClick: onRightIconClick, onMouseDown: preventMouseDown, className: iconClassName('right', onRightIconClick) },
            React.createElement(Icon, { name: rightIcon, variant: disabled ? 'disabled' : rightIconVariant })))));
}
export default React.forwardRef(InternalInput);