@alfalab/core-components 23.12.0 → 25.0.0

package/code-input/cssm/component.js

@@ -0,0 +1,163 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+require('./components/input/index.module.css');
+var components_input_component = require('./components/input/component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+        s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+var CodeInput = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, disabled = _a.disabled, error = _a.error, _c = _a.fields, fields = _c === void 0 ? 4 : _c, _d = _a.initialValues, initialValues = _d === void 0 ? '' : _d, dataTestId = _a.dataTestId, onChange = _a.onChange, onComplete = _a.onComplete;
+    var inputRefs = Array(fields)
+        .fill({})
+        .map(function () { return React.createRef(); });
+    var _e = React.useState(initialValues.split('')), values = _e[0], setValues = _e[1];
+    var focusOnInput = function (inputRef) {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    var focus = function (index) {
+        if (index === void 0) { index = 0; }
+        focusOnInput(inputRefs[index]);
+    };
+    var blur = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.blur();
+        }
+    };
+    var unselect = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.setSelectionRange(0, 0);
+        }
+    };
+    var reset = function () {
+        setValues([]);
+    };
+    React.useImperativeHandle(ref, function () { return ({ focus: focus, blur: blur, reset: reset, unselect: unselect }); });
+    var triggerChange = function (argumentValues) {
+        var newValue = (argumentValues || values).join('');
+        if (onChange) {
+            onChange(newValue);
+        }
+        if (onComplete && newValue.length >= fields) {
+            onComplete(newValue);
+        }
+    };
+    var handleChange = function (event, _a) {
+        var index = _a.index;
+        var _b = event.target, value = _b.value, valid = _b.validity.valid;
+        var newValue = value.replace(/\D/g, '');
+        if (newValue === '' || !valid) {
+            return;
+        }
+        var nextRef;
+        var newValues = __spreadArrays(values);
+        if (newValue.length > 1) {
+            var nextIndex = newValue.length + index - 1;
+            if (nextIndex >= fields) {
+                nextIndex = fields - 1;
+            }
+            nextRef = inputRefs[nextIndex];
+            newValue.split('').forEach(function (item, i) {
+                var cursor = index + i;
+                if (cursor < fields) {
+                    newValues[cursor] = item;
+                }
+            });
+        }
+        else {
+            nextRef = inputRefs[index + 1];
+            newValues[index] = newValue;
+        }
+        setValues(newValues);
+        if (nextRef && nextRef.current) {
+            nextRef.current.focus();
+            nextRef.current.select();
+        }
+        triggerChange(newValues);
+    };
+    var handleKeyDown = function (event, _a) {
+        var index = _a.index;
+        var prevIndex = index - 1;
+        var nextIndex = index + 1;
+        var prevRef = inputRefs[prevIndex];
+        var nextRef = inputRefs[nextIndex];
+        var newValues = __spreadArrays(values);
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (values[index]) {
+                    newValues[index] = '';
+                }
+                else if (prevRef) {
+                    newValues[prevIndex] = '';
+                    focusOnInput(prevRef);
+                }
+                setValues(newValues);
+                triggerChange(newValues);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (prevRef) {
+                    focusOnInput(prevRef);
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (nextRef) {
+                    focusOnInput(nextRef);
+                }
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+        }
+    };
+    var handleFocus = function (event) {
+        /**
+         * В сафари выделение корректно работает только с асинхронным вызовом
+         */
+        requestAnimationFrame(function () {
+            event.target.select();
+        });
+    };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className), "data-test-id": dataTestId },
+        React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles__default['default'].shake] = Boolean(error), _b)) }, new Array(fields).fill('').map(function (_, index) { return (React__default['default'].createElement(components_input_component.Input, { ref: inputRefs[index], key: index.toString(), index: index, value: values[index], disabled: disabled, error: !!error, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown, className: styles__default['default'].input, compact: fields > 6 })); })),
+        error && (React__default['default'].createElement("div", { className: styles__default['default'].error, role: 'alert' }, error))));
+});
+
+exports.CodeInput = CodeInput;

package/code-input/cssm/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./input/index";

package/code-input/cssm/components/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('./input/index.module.css');
+var components_input_component = require('./input/component.js');
+
+
+
+exports.Input = components_input_component.Input;

package/code-input/cssm/components/input/component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from "react";
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onKeyDown'> & {
+    index: number;
+    value: string;
+    error: boolean;
+    compact?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+};
+declare const Input: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    index: number;
+    value: string;
+    error: boolean;
+    compact?: boolean | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input };

package/code-input/cssm/components/input/component.js

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Input = React.forwardRef(function (_a, ref) {
+    var _b;
+    var index = _a.index, error = _a.error, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.compact, compact = _d === void 0 ? false : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus;
+    var handleChange = function (event) {
+        onChange(event, { index: index });
+    };
+    var handleKeyDown = function (event) {
+        onKeyDown(event, { index: index });
+    };
+    var handleClick = function (event) {
+        var target = event.target;
+        /**
+         * В сафари выделение корректно работает только с асинхронным вызовом
+         */
+        requestAnimationFrame(function () {
+            target.select();
+        });
+    };
+    return (React__default['default'].createElement("input", { ref: ref, className: cn__default['default'](styles__default['default'].input, (_b = {},
+            _b[styles__default['default'].hasError] = error,
+            _b[styles__default['default'].disabled] = disabled,
+            _b[styles__default['default'].compact] = compact,
+            _b)), disabled: disabled, value: value, autoComplete: index === 0 ? 'one-time-code' : '', inputMode: 'numeric', pattern: '[0-9]*', onChange: handleChange, onKeyDown: handleKeyDown, onFocus: onFocus, onClick: handleClick }));
+});
+
+exports.Input = Input;

package/code-input/cssm/components/input/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('./index.module.css');
+var components_input_component = require('./component.js');
+
+
+
+exports.Input = components_input_component.Input;

package/code-input/cssm/components/input/index.module.css

@@ -0,0 +1,66 @@
+:root {
+    --color-light-bg-negative-muted: #feebea;
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-text-negative: #d91d0b;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-tertiary: #b6bcc3;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --code-input-font-size: 30px;
+    --code-input-font-weight: 700;
+    --code-input-font-family: var(--font-family-system);
+    --code-input-text-color: var(--color-light-text-primary);
+    --code-input-bg-color: var(--color-light-bg-secondary);
+    --code-input-error-bg-color: var(--color-light-bg-negative-muted);
+}
+.component {
+    display: flex;
+}
+.input {
+    flex-shrink: 0;
+    width: 36px;
+    height: 48px;
+    margin-right: var(--gap-xs);
+    padding: 0;
+    background-color: var(--code-input-bg-color);
+    border: none;
+    border-radius: var(--border-radius-s);
+    box-sizing: border-box;
+    outline: none;
+    color: var(--code-input-text-color);
+    text-align: center;
+    font-size: var(--code-input-font-size);
+    font-weight: var(--code-input-font-weight);
+    font-family: var(--code-input-font-family)
+}
+.input.hasError {
+        color: var(--color-light-text-negative);
+        caret-color: var(--code-input-text-color);
+        background-color: var(--code-input-error-bg-color);
+    }
+.input.disabled {
+        color: var(--color-light-text-tertiary);
+        opacity: 1;
+    }
+.compact {
+    width: 28px;
+    height: 40px;
+}

package/code-input/cssm/index.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var component = require('./component.js');
+require('react');
+require('classnames');
+require('./components/input/index.module.css');
+require('./components/input/component.js');
+require('./index.module.css');
+
+
+
+exports.CodeInput = component.CodeInput;

package/code-input/cssm/index.module.css

@@ -0,0 +1,46 @@
+:root {
+    --color-light-text-negative: #d91d0b;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+.component {
+    display: flex;
+    flex-direction: column;
+}
+.error {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    margin-top: var(--gap-xs);
+    color: var(--color-light-text-negative);
+}
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+.shake {
+    animation: shake 0.15s linear 0s 3;
+}

package/code-input/cssm/vars.css

@@ -0,0 +1,8 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}

package/code-input/esm/component.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type CodeInputProps = {
+    /**
+     * Количество полей
+     */
+    fields?: number;
+    /**
+     * Значение для предзаполнения
+     */
+    initialValues?: string;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Состояние с ошибкой
+     */
+    error?: ReactNode;
+    /**
+     * Дополнительный класс (native prop)
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбек ввода значения
+     */
+    onChange?: (code: string) => void;
+    /**
+     * Коллбек полного заполнения
+     */
+    onComplete?: (code: string) => void;
+};
+type CustomInputRef = {
+    focus: (index?: number) => void;
+    blur: () => void;
+    reset: () => void;
+    unselect: () => void;
+};
+declare const CodeInput: React.ForwardRefExoticComponent<CodeInputProps & React.RefAttributes<CustomInputRef>>;
+export { CodeInputProps, CustomInputRef, CodeInput };

package/code-input/esm/component.js

@@ -0,0 +1,156 @@
+import React, { forwardRef, createRef, useState, useImperativeHandle } from 'react';
+import cn from 'classnames';
+import { Input } from './components/input/component.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+        s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+var styles = {"component":"code-input__component_17r4c","error":"code-input__error_17r4c","shake":"code-input__shake_17r4c"};
+require('./index.css');
+
+var CodeInput = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, disabled = _a.disabled, error = _a.error, _c = _a.fields, fields = _c === void 0 ? 4 : _c, _d = _a.initialValues, initialValues = _d === void 0 ? '' : _d, dataTestId = _a.dataTestId, onChange = _a.onChange, onComplete = _a.onComplete;
+    var inputRefs = Array(fields)
+        .fill({})
+        .map(function () { return createRef(); });
+    var _e = useState(initialValues.split('')), values = _e[0], setValues = _e[1];
+    var focusOnInput = function (inputRef) {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    var focus = function (index) {
+        if (index === void 0) { index = 0; }
+        focusOnInput(inputRefs[index]);
+    };
+    var blur = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.blur();
+        }
+    };
+    var unselect = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.setSelectionRange(0, 0);
+        }
+    };
+    var reset = function () {
+        setValues([]);
+    };
+    useImperativeHandle(ref, function () { return ({ focus: focus, blur: blur, reset: reset, unselect: unselect }); });
+    var triggerChange = function (argumentValues) {
+        var newValue = (argumentValues || values).join('');
+        if (onChange) {
+            onChange(newValue);
+        }
+        if (onComplete && newValue.length >= fields) {
+            onComplete(newValue);
+        }
+    };
+    var handleChange = function (event, _a) {
+        var index = _a.index;
+        var _b = event.target, value = _b.value, valid = _b.validity.valid;
+        var newValue = value.replace(/\D/g, '');
+        if (newValue === '' || !valid) {
+            return;
+        }
+        var nextRef;
+        var newValues = __spreadArrays(values);
+        if (newValue.length > 1) {
+            var nextIndex = newValue.length + index - 1;
+            if (nextIndex >= fields) {
+                nextIndex = fields - 1;
+            }
+            nextRef = inputRefs[nextIndex];
+            newValue.split('').forEach(function (item, i) {
+                var cursor = index + i;
+                if (cursor < fields) {
+                    newValues[cursor] = item;
+                }
+            });
+        }
+        else {
+            nextRef = inputRefs[index + 1];
+            newValues[index] = newValue;
+        }
+        setValues(newValues);
+        if (nextRef && nextRef.current) {
+            nextRef.current.focus();
+            nextRef.current.select();
+        }
+        triggerChange(newValues);
+    };
+    var handleKeyDown = function (event, _a) {
+        var index = _a.index;
+        var prevIndex = index - 1;
+        var nextIndex = index + 1;
+        var prevRef = inputRefs[prevIndex];
+        var nextRef = inputRefs[nextIndex];
+        var newValues = __spreadArrays(values);
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (values[index]) {
+                    newValues[index] = '';
+                }
+                else if (prevRef) {
+                    newValues[prevIndex] = '';
+                    focusOnInput(prevRef);
+                }
+                setValues(newValues);
+                triggerChange(newValues);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (prevRef) {
+                    focusOnInput(prevRef);
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (nextRef) {
+                    focusOnInput(nextRef);
+                }
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+        }
+    };
+    var handleFocus = function (event) {
+        /**
+         * В сафари выделение корректно работает только с асинхронным вызовом
+         */
+        requestAnimationFrame(function () {
+            event.target.select();
+        });
+    };
+    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
+        React.createElement("div", { className: cn((_b = {}, _b[styles.shake] = Boolean(error), _b)) }, new Array(fields).fill('').map(function (_, index) { return (React.createElement(Input, { ref: inputRefs[index], key: index.toString(), index: index, value: values[index], disabled: disabled, error: !!error, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown, className: styles.input, compact: fields > 6 })); })),
+        error && (React.createElement("div", { className: styles.error, role: 'alert' }, error))));
+});
+
+export { CodeInput };

package/code-input/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./input/index";

package/code-input/esm/components/index.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { Input } from './input/component.js';

package/code-input/esm/components/input/component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, InputHTMLAttributes, KeyboardEvent } from "react";
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onKeyDown'> & {
+    index: number;
+    value: string;
+    error: boolean;
+    compact?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+};
+declare const Input: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    index: number;
+    value: string;
+    error: boolean;
+    compact?: boolean | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, payload: {
+        index: number;
+    }) => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input };