@ozen-ui/kit/__inner__/cjs/components/InputOTP/InputOTP.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputOTP = exports.cnInputOTP = void 0;
var tslib_1 = require("tslib");
require("./InputOTP.css");
var react_1 = tslib_1.__importStar(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useStoredValue_1 = require("../../hooks/useStoredValue");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var array_1 = require("../../utils/array");
var classname_1 = require("../../utils/classname");
var isFunction_1 = require("../../utils/isFunction");
var isString_1 = require("../../utils/isString");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var setRef_1 = require("../../utils/setRef");
var FieldControl_1 = require("../FieldControl");
var FieldInput_1 = require("../FieldInput");
var Fieldset_1 = require("../Fieldset");
var Stack_1 = require("../Stack");
var constants_1 = require("./constants");
var helper_1 = require("./helper");
var hooks_1 = require("./hooks");
exports.cnInputOTP = (0, classname_1.cn)('InputOTP');
exports.InputOTP = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'InputOTP',
    });
    var _a = props.as, as = _a === void 0 ? constants_1.INPUT_OTP_DEFAULT_TAG : _a, className = props.className, length = props.length, autoComplete = props.autoComplete, _b = props.autoCompleteMode, autoCompleteMode = _b === void 0 ? constants_1.INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE : _b, placeholder = props.placeholder, disabled = props.disabled, error = props.error, onChangeFromProps = props.onChange, ariaLabel = props.ariaLabel, value = props.value, defaultValue = props.defaultValue, mask = props.mask, autoFocus = props.autoFocus, onFinish = props.onFinish, onPasteFromProps = props.onPaste, onKeyDownFromProps = props.onKeyDown, _c = props.disableStroke, disableStroke = _c === void 0 ? constants_1.INPUT_OTP_DEFAULT_DISABLE_STROKE : _c, validate = props.validate, _d = props.size, size = _d === void 0 ? constants_1.INPUT_OTP_DEFAULT_SIZE : _d, inputProps = props.inputProps, fieldProps = props.fieldProps, _e = props.finishBehavior, finishBehavior = _e === void 0 ? constants_1.INPUT_OTP_DEFAULT_FINISH_BEHAVIOR : _e, inputContainerProps = props.inputContainerProps, other = tslib_1.__rest(props, ["as", "className", "length", "autoComplete", "autoCompleteMode", "placeholder", "disabled", "error", "onChange", "ariaLabel", "value", "defaultValue", "mask", "autoFocus", "onFinish", "onPaste", "onKeyDown", "disableStroke", "validate", "size", "inputProps", "fieldProps", "finishBehavior", "inputContainerProps"]);
    var _f = tslib_1.__read((0, react_1.useState)(null), 2), focusedInputIndex = _f[0], setFocusedInputIndex = _f[1];
    var _g = tslib_1.__read((0, useControlled_1.useControlled)({
        value: (0, isString_1.isString)(value) ? (0, helper_1.valueToArray)(value) : value,
        defaultValue: (0, react_1.useMemo)(function () {
            if ((0, isString_1.isString)(defaultValue)) {
                return (0, helper_1.valueToArray)(defaultValue);
            }
            return defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
        }, []),
        name: 'InputOtp',
    }), 2), valueByIndex = _g[0], setValueByIndexState = _g[1];
    var inputs = (0, useStoredValue_1.useStoredValue)([]);
    var setValueByIndex = function (valueByIndex) {
        setValueByIndexState(valueByIndex);
        if (onChangeFromProps) {
            var maskedValueByIndex = (0, helper_1.maskValue)(mask, valueByIndex);
            onChangeFromProps((0, helper_1.valueToString)(valueByIndex), valueByIndex, (0, helper_1.valueToString)(maskedValueByIndex), maskedValueByIndex);
        }
    };
    var calculateInput = function (valueByIndex, index) {
        return (0, helper_1.calculateInput)({
            valueByIndex: valueByIndex,
            mask: mask,
            disabled: disabled,
            index: index,
            length: length,
            focusedInputIndex: focusedInputIndex,
        });
    };
    var _h = (0, hooks_1.useInputOTPEvents)({
        inputs: inputs,
        valueByIndex: valueByIndex,
        setValueByIndex: setValueByIndex,
        validate: validate,
        onFinish: onFinish,
        onPaste: onPasteFromProps,
        onKeyDown: onKeyDownFromProps,
        length: length,
        mask: mask,
        finishBehavior: finishBehavior,
    }), onInputSelect = _h.onInputSelect, onInputChange = _h.onInputChange, onKeyDown = _h.onKeyDown, onPaste = _h.onPaste;
    var getFirstNonFilledInput = function () {
        var firstNonFilledInputIndex = inputs.current.findIndex(function (_, index) {
            var _a;
            var inputValue = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex[index]) !== null && _a !== void 0 ? _a : '';
            return inputValue === '';
        });
        return inputs.current[firstNonFilledInputIndex];
    };
    var focusFirstNonFilledInput = function () {
        var _a;
        (_a = getFirstNonFilledInput()) === null || _a === void 0 ? void 0 : _a.focus();
    };
    (0, react_1.useEffect)(function () {
        if (!autoFocus) {
            return;
        }
        focusFirstNonFilledInput();
    }, []);
    (0, react_1.useImperativeHandle)(ref, function () { return ({
        focus: function () {
            var _a;
            if (getFirstNonFilledInput()) {
                focusFirstNonFilledInput();
            }
            else {
                (_a = inputs.current[length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
            }
        },
    }); });
    return (react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({ as: as, className: (0, exports.cnInputOTP)({
            size: size,
            disabled: disabled,
        }, [className]), gap: constants_1.INPUT_OTP_SPACING_BY_SIZE[size] }, other, { ref: ref }), (0, array_1.createEmptyArray)(length).map(function (_, index) {
        var _a, _b;
        var calculatedInput = calculateInput(valueByIndex, index);
        var isInputDisabled = calculatedInput.isDisabled, value = calculatedInput.value;
        var processedAutocomplete = (function () {
            if (autoCompleteMode === 'firstOnly') {
                return !!autoComplete && index === 0 ? autoComplete : 'off';
            }
            return autoComplete;
        })();
        var processedContainerProps = (0, isFunction_1.isFunction)(inputContainerProps)
            ? inputContainerProps(calculatedInput, index)
            : inputContainerProps;
        var processedFieldProps = (0, isFunction_1.isFunction)(fieldProps)
            ? fieldProps(calculatedInput, index)
            : fieldProps;
        var processedInputProps = (0, isFunction_1.isFunction)(inputProps)
            ? inputProps(calculatedInput, index)
            : inputProps;
        var processedPlaceholder = (0, isFunction_1.isFunction)(placeholder)
            ? placeholder(calculatedInput, index)
            : placeholder;
        return (
        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
        react_1.default.createElement("div", tslib_1.__assign({ key: index }, processedContainerProps, { className: (0, exports.cnInputOTP)('InputContainer', [
                processedContainerProps === null || processedContainerProps === void 0 ? void 0 : processedContainerProps.className,
            ]), onClick: function () {
                if (isInputDisabled) {
                    focusFirstNonFilledInput();
                }
            } }),
            react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, disabled: disabled, error: error, disableStroke: disableStroke }, processedFieldProps, { className: (0, exports.cnInputOTP)('Field', {
                    notAvailable: isInputDisabled,
                }, [processedFieldProps === null || processedFieldProps === void 0 ? void 0 : processedFieldProps.className]) }),
                react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ inputMode: (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.inputMode) !== null && _a !== void 0 ? _a : 'numeric', type: (_b = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.type) !== null && _b !== void 0 ? _b : 'text', value: value, autoComplete: processedAutocomplete, "aria-label": ariaLabel && "".concat(ariaLabel, ": ").concat(index + 1, "."), placeholder: processedPlaceholder, disabled: isInputDisabled }, processedInputProps, { onMouseDown: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onInputSelect(index);
                    }, onTouchStart: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onInputSelect(index);
                    }, onPointerDown: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onInputSelect(index);
                    }, onChange: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onInputChange(event, index);
                    }, onKeyDown: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onKeyDown(event, index);
                    }, onPaste: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        onPaste(event, index);
                    }, onFocus: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        setFocusedInputIndex(index);
                    }, onBlur: function (event) {
                        var _a;
                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
                        setFocusedInputIndex(null);
                    }, className: (0, exports.cnInputOTP)('Input', [
                        processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.className,
                    ]), ref: function (instance) {
                        if (instance) {
                            inputs.current[index] = instance;
                        }
                        (0, setRef_1.setRef)(processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.ref, instance);
                    } })),
                react_1.default.createElement(Fieldset_1.Fieldset, null))));
    })));
});
exports.InputOTP.displayName = 'InputOTP';