@ozen-ui/kit 0.63.0 → 0.64.0

package/__inner__/esm/components/InputOTP/hooks/useInputOTPEvents.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent, ClipboardEvent, ClipboardEventHandler, KeyboardEvent, KeyboardEventHandler } from 'react';
+import type { StoredValue } from '../../../hooks/useStoredValue';
+import type { InputOTPRawValue, InputOTPInputs, InputOTPOnFinish, InputOTPValidate, InputOTPMask, InputOTPFinishBehavior } from '../types';
+export declare const useInputOTPEvents: ({ inputs, valueByIndex, setValueByIndex, validate: validateFromProps, length, onPaste: onPasteFromProps, onKeyDown: onKeyDownFromProps, onFinish, mask, finishBehavior, }: {
+    inputs: StoredValue<InputOTPInputs>;
+    valueByIndex: InputOTPRawValue | undefined;
+    setValueByIndex: (valueByIndex: InputOTPRawValue) => void;
+    validate: InputOTPValidate | undefined;
+    length: number;
+    onKeyDown: KeyboardEventHandler<HTMLElement> | undefined;
+    onPaste: ClipboardEventHandler<HTMLElement> | undefined;
+    onFinish: InputOTPOnFinish | undefined;
+    mask: InputOTPMask | undefined;
+    finishBehavior: InputOTPFinishBehavior;
+}) => {
+    onInputChange: (event: ChangeEvent<HTMLInputElement>, index: number) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>, index: number) => void;
+    onPaste: (event: ClipboardEvent<HTMLInputElement>, inputIndex: number) => void;
+    onInputSelect: (index: number) => void;
+};

package/__inner__/esm/components/InputOTP/hooks/useInputOTPEvents.js

@@ -0,0 +1,179 @@
+import { __read, __spreadArray } from "tslib";
+import { isFunction } from '../../../utils/isFunction';
+import { isKey } from '../../../utils/isKey';
+import { isKeys } from '../../../utils/isKeys';
+import { isNumber } from '../../../utils/isNumber';
+import { maskSymbol, maskValue, valueToString } from '../helper';
+export var useInputOTPEvents = function (_a) {
+    var inputs = _a.inputs, valueByIndex = _a.valueByIndex, setValueByIndex = _a.setValueByIndex, validateFromProps = _a.validate, length = _a.length, onPasteFromProps = _a.onPaste, onKeyDownFromProps = _a.onKeyDown, onFinish = _a.onFinish, mask = _a.mask, finishBehavior = _a.finishBehavior;
+    var validate = function (value) {
+        if (isFunction(validateFromProps)) {
+            return validateFromProps(value);
+        }
+        return true;
+    };
+    var tryToFinish = function (valueByIndex, index, options) {
+        var _a;
+        var _b = (options !== null && options !== void 0 ? options : {}).isEnter, isEnter = _b === void 0 ? false : _b;
+        var requiredValueByIndex = valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [];
+        var stringValue = valueToString(requiredValueByIndex);
+        var isFullFilledValue = requiredValueByIndex.filter(function (value) { return value !== ''; }).length === length;
+        var isChangeOnLastInput = index + 1 === length;
+        var maskedRawValue = maskValue(mask, valueByIndex);
+        var finishContext = {
+            isChangeOnLastInput: isChangeOnLastInput,
+            inputIndex: index,
+            value: valueToString(valueByIndex),
+            rawValue: valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [],
+            maskedValue: valueToString(maskedRawValue),
+            maskedRawValue: maskedRawValue,
+            isFullFilled: isFullFilledValue,
+            isEnter: isEnter,
+        };
+        var isFinish = finishBehavior(finishContext);
+        if (isFinish) {
+            var activeElement = document.activeElement;
+            if (activeElement instanceof HTMLElement) {
+                activeElement.blur();
+            }
+            if (onFinish) {
+                var maskedValueByIndex = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex.map(function (value, index) { return maskSymbol(mask, value, index); })) !== null && _a !== void 0 ? _a : [];
+                onFinish(stringValue, valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [], valueToString(maskedValueByIndex), maskedValueByIndex);
+            }
+        }
+    };
+    var onInputChange = function (event, index) {
+        event.preventDefault();
+        var target = event.target;
+        var value = (function () {
+            var _a;
+            var previousValue = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex[index]) !== null && _a !== void 0 ? _a : '';
+            var previousMaskedValue = maskSymbol(mask, previousValue, index);
+            var rawValue = target.value;
+            var changedValuePart = rawValue.replace(previousMaskedValue, '');
+            if (changedValuePart.length > 1) {
+                return changedValuePart.slice(0, 1);
+            }
+            return changedValuePart;
+        })();
+        var isValidValue = validate(value);
+        var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+        if (isValidValue) {
+            newValueByIndex[index] = value;
+            var isLastInput = index === length - 1;
+            var firstEmptyInputIndex = newValueByIndex.findIndex(function (value) { return !value; });
+            if (isLastInput && firstEmptyInputIndex !== -1) {
+                var firstEmptyInput = inputs.current[firstEmptyInputIndex];
+                if (firstEmptyInput) {
+                    firstEmptyInput.focus();
+                }
+            }
+            else {
+                var nextInput = inputs.current[index + 1];
+                if (nextInput) {
+                    nextInput.disabled = false;
+                    nextInput.focus();
+                }
+            }
+            setValueByIndex(newValueByIndex);
+        }
+        tryToFinish(newValueByIndex, index);
+    };
+    var onKeyDown = function (event, index) {
+        if (onKeyDownFromProps) {
+            onKeyDownFromProps(event);
+        }
+        var target = event.target;
+        if (isKey(event, 'Backspace')) {
+            var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+            if (target.value === '') {
+                var previousInput = inputs.current[index - 1];
+                var previousInputIndex = index - 1;
+                if (previousInput) {
+                    newValueByIndex[previousInputIndex] = '';
+                    previousInput.focus();
+                    event.preventDefault();
+                }
+            }
+            else {
+                newValueByIndex[index] = '';
+            }
+            setValueByIndex(newValueByIndex);
+        }
+        else if (isKeys(event, ['ArrowLeft', 'ArrowDown'])) {
+            event.preventDefault();
+            var previousInput = inputs.current[index - 1];
+            if (previousInput) {
+                previousInput.focus();
+            }
+        }
+        else if (isKeys(event, ['ArrowRight', 'ArrowUp'])) {
+            event.preventDefault();
+            var nextInput = inputs.current[index + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+        else if (isKey(event, 'Enter')) {
+            tryToFinish(valueByIndex, index, {
+                isEnter: true,
+            });
+        }
+    };
+    var onPaste = function (event, inputIndex) {
+        event.preventDefault();
+        if (onPasteFromProps) {
+            onPasteFromProps(event);
+        }
+        var currentInputs = inputs.current;
+        var pastedValue = event.clipboardData.getData('Text');
+        var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+        var lastChangedInputIndex = {
+            current: null,
+        };
+        var focusedInputIndex = {
+            current: null,
+        };
+        __spreadArray([], __read(pastedValue), false).forEach(function (symbol, symbolIndex) {
+            var currentInputIndex = symbolIndex + inputIndex;
+            var isIndexExistInArray = currentInputIndex >= 0 && currentInputIndex < currentInputs.length;
+            if (isIndexExistInArray && validate(symbol)) {
+                lastChangedInputIndex.current = currentInputIndex;
+                newValueByIndex[currentInputIndex] = symbol;
+                var nextInput = currentInputs[currentInputIndex + 1];
+                if (nextInput) {
+                    focusedInputIndex.current = currentInputIndex + 1;
+                }
+            }
+        });
+        if (isNumber(focusedInputIndex.current)) {
+            var input = currentInputs[focusedInputIndex.current];
+            if (input) {
+                input.disabled = false;
+                input.focus();
+            }
+        }
+        setValueByIndex(newValueByIndex);
+        if (lastChangedInputIndex.current !== null) {
+            tryToFinish(newValueByIndex, lastChangedInputIndex.current);
+        }
+    };
+    var onInputSelect = function (index) {
+        setTimeout(function () {
+            var currentInput = inputs.current[index];
+            if (!currentInput) {
+                return;
+            }
+            var originalType = currentInput.type;
+            currentInput.type = 'text';
+            currentInput.setSelectionRange(1, 1);
+            currentInput.type = originalType;
+        });
+    };
+    return {
+        onInputChange: onInputChange,
+        onKeyDown: onKeyDown,
+        onPaste: onPaste,
+        onInputSelect: onInputSelect,
+    };
+};

package/__inner__/esm/components/InputOTP/index.d.ts

@@ -0,0 +1,3 @@
+export * from './presets';
+export * from './InputOTP';
+export * from './types';

package/__inner__/esm/components/InputOTP/index.js

@@ -0,0 +1,3 @@
+export * from './presets';
+export * from './InputOTP';
+export * from './types';

package/__inner__/esm/components/InputOTP/presets.d.ts

@@ -0,0 +1,12 @@
+export declare const INPUT_OTP_VALIDATE_PRESET: {
+    TEXT: (value: string) => boolean;
+    NUMERIC: (value: string) => boolean;
+    TEXT_NUMERIC: (value: string) => boolean;
+};
+export declare const INPUT_OTP_MASK_PRESET: {
+    PASSWORD: string;
+};
+export declare const INPUT_OTP_FINISH_BEHAVIOR_PRESET: {
+    FULL_FILLED_NON_LAST_INPUT: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+    FULL_FILLED_ON_LAST_INPUT: ({ isFullFilled, isChangeOnLastInput, isEnter, }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+};

package/__inner__/esm/components/InputOTP/presets.js

@@ -0,0 +1,24 @@
+export var INPUT_OTP_VALIDATE_PRESET = {
+    TEXT: function (value) { return /[a-zA-Z]{1}/.test(value); },
+    NUMERIC: function (value) { return /\d{1}/.test(value); },
+    TEXT_NUMERIC: function (value) { return /[a-zA-Z0-9]{1}/.test(value); },
+};
+export var INPUT_OTP_MASK_PRESET = {
+    PASSWORD: '•',
+};
+export var INPUT_OTP_FINISH_BEHAVIOR_PRESET = {
+    FULL_FILLED_NON_LAST_INPUT: function (_a) {
+        var isFullFilled = _a.isFullFilled;
+        return isFullFilled;
+    },
+    FULL_FILLED_ON_LAST_INPUT: function (_a) {
+        var isFullFilled = _a.isFullFilled, isChangeOnLastInput = _a.isChangeOnLastInput, isEnter = _a.isEnter;
+        if (isFullFilled && isChangeOnLastInput) {
+            return true;
+        }
+        if (isFullFilled && isEnter) {
+            return true;
+        }
+        return false;
+    },
+};

package/__inner__/esm/components/InputOTP/types.d.ts

@@ -0,0 +1,101 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { FIELD_CONTROL_DEFAULT_TAG, FieldControlBaseProps } from '../FieldControl';
+import type { FieldInputProps } from '../FieldInput';
+import type { INPUT_OTP_DEFAULT_TAG } from './constants';
+export declare const inputOTPAutoCompleteMode: readonly ["firstOnly", "all"];
+export type InputOTPAutoCompleteMode = (typeof inputOTPAutoCompleteMode)[number];
+export declare const inputOTPSizeVariant: readonly ["s", "m"];
+export type InputOTPSizeVariant = (typeof inputOTPSizeVariant)[number];
+export type InputOTPValidate = (value: string) => boolean;
+export type InputOTPRawValue = string[];
+export type InputOTPValue = InputOTPRawValue | string;
+export type InputOTPOnChange = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
+export type InputOTPOnFinish = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
+export type InputOTPInputs = HTMLInputElement[];
+export type InputOTPInputProps = FieldInputProps;
+export type InputOTPCalculatedInput = {
+    /** Значение input */
+    value: string;
+    /** Необработанное input */
+    rawValue: string;
+    /** Флаг: это предыдущий input */
+    isPrevious: boolean;
+    /** Флаг: это следующий input */
+    isNext: boolean;
+    /** Флаг: это текущий input */
+    isCurrentInput: boolean;
+    /** Флаг: это последний input */
+    isLast: boolean;
+    /** Флаг: input отключен */
+    isDisabled: boolean;
+};
+export type InputOTPMask = string | ((value: string, index: number) => string);
+export type InputOTPFinishBehaviorContext = {
+    /** Флаг: Поле полностью заполнено */
+    isFullFilled: boolean;
+    /** Значение */
+    value: string;
+    /** Необработанное значение */
+    rawValue: InputOTPRawValue;
+    /** Значение с маской */
+    maskedValue: string;
+    /** Необработанное значение с маской */
+    maskedRawValue: InputOTPRawValue;
+    /** Флаг: Это изменение на последнем input'е */
+    isChangeOnLastInput: boolean;
+    /** index input'а, на котором произошло изменение */
+    inputIndex: number;
+    /** Флаг: Был нажат enter */
+    isEnter: boolean;
+};
+export type InputOTPFinishBehavior = (context: InputOTPFinishBehaviorContext) => boolean;
+export type InputOTPDynamicInputParameter<Parameter> = Parameter | ((calculatedInput: InputOTPCalculatedInput, index: number) => Parameter);
+export type InputOTPBaseProps = {
+    /** Длина кода */
+    length: number;
+    /** Значение */
+    value?: InputOTPValue;
+    /** Значение по умолчанию */
+    defaultValue?: InputOTPValue;
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputOTPOnChange;
+    /** Обработчик события на завершение ввода */
+    onFinish?: InputOTPOnFinish;
+    /** Маска значения */
+    mask?: InputOTPMask;
+    /** autoComplete */
+    autoComplete?: InputOTPInputProps['autoComplete'];
+    /**
+     * Мод autoComplete.
+     * В зависимости от режима, autoComplete будет устанавливаться разным input
+     */
+    autoCompleteMode?: InputOTPAutoCompleteMode;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Функция-валидатор */
+    validate?: InputOTPValidate;
+    /** Размер */
+    size?: InputOTPSizeVariant;
+    /** Лейбл */
+    ariaLabel?: string;
+    /** Если `true` отключает обводку */
+    disableStroke?: boolean;
+    /** Подсказка. Отображается, когда значение не введено */
+    placeholder?: InputOTPDynamicInputParameter<string>;
+    /** Свойства Field */
+    fieldProps?: InputOTPDynamicInputParameter<PolymorphicComponentPropsWithRef<FieldControlBaseProps, typeof FIELD_CONTROL_DEFAULT_TAG>>;
+    /** Свойства Input */
+    inputProps?: InputOTPDynamicInputParameter<FieldInputProps>;
+    /** Свойства InputContainer */
+    inputContainerProps?: InputOTPDynamicInputParameter<ComponentPropsWithRef<'div'> & {
+        'data-testid'?: string;
+    }>;
+    /** Функция, которая определяет поведение финиша */
+    finishBehavior?: InputOTPFinishBehavior;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+};
+export type InputOTPProps<As extends ElementType = typeof INPUT_OTP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<InputOTPBaseProps, As>;

package/__inner__/esm/components/InputOTP/types.js

@@ -0,0 +1,4 @@
+// ---- AUTO-COMPLETE MODE ----
+export var inputOTPAutoCompleteMode = ['firstOnly', 'all'];
+// ---- SIZE ----
+export var inputOTPSizeVariant = ['s', 'm'];

package/__inner__/esm/components/Tabs/Tabs.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tabs.css';
 import React, { useState, useCallback, useMemo, useEffect, forwardRef, useRef, } from 'react';
+import { isFragment } from 'react-is';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useEventListener } from '../../hooks/useEventListener';
 import { animateProperty } from '../../utils/animateProperty';
@@ -28,9 +29,12 @@ export var Tabs = forwardRef(function (_a, ref) {
      * для более точного контроля
      */
     var tabsValueToIndex = useMemo(function () { return new Map(); }, [children]);
+    var resolvedChildren = isFragment(children)
+        ? children.props.children
+        : children;
     /** Children только ноды Табов */
     var onlyTabsChildren = useMemo(function () {
-        return React.Children.toArray(children)
+        return React.Children.toArray(resolvedChildren)
             .filter(function (child) { return React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type) === Tab; })
             .map(function (child, index) {
             if (!React.isValidElement(child))
@@ -39,7 +43,7 @@ export var Tabs = forwardRef(function (_a, ref) {
             tabsValueToIndex.set(childValue, index);
             return React.cloneElement(child, { value: childValue });
         });
-    }, [children]);
+    }, [resolvedChildren]);
     var isScrollButtonsActive = variant === 'scrollable' &&
         !disableScrollButtons &&
         tabsListRef.current &&

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -111,6 +111,7 @@ export type Theme = {
         Indicator?: Partial<IndicatorProps>;
         Input?: Partial<InputProps>;
         InputNumber?: Partial<InputNumberProps>;
+        InputOTP?: Partial<InputProps>;
         Link?: Partial<LinkProps>;
         List?: Partial<ListProps>;
         ListItem?: Partial<ListItemProps>;

package/__inner__/esm/hooks/useStoredValue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './utils';
+export * from './useStoredValue';
+export * from './types';

package/__inner__/esm/hooks/useStoredValue/index.js

@@ -0,0 +1,3 @@
+export * from './utils';
+export * from './useStoredValue';
+export * from './types';

package/__inner__/esm/hooks/useStoredValue/types.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export type StoredValue<Value> = MutableRefObject<Value>;

package/__inner__/esm/hooks/useStoredValue/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/hooks/useStoredValue/useStoredValue.d.ts

@@ -0,0 +1,4 @@
+import type { StoredValue } from './types';
+export declare function useStoredValue<Value>(
+/** Изначальное значение */
+initialValue: Value | (() => Value)): StoredValue<Value>;

package/__inner__/esm/hooks/useStoredValue/useStoredValue.js

@@ -0,0 +1,13 @@
+import { useMemo, useRef } from 'react';
+import { isFunction } from '../../utils/isFunction';
+export function useStoredValue(
+/** Изначальное значение */
+initialValue) {
+    var processedInitialValue = useMemo(function () {
+        if (isFunction(initialValue)) {
+            return initialValue();
+        }
+        return initialValue;
+    }, []);
+    return useRef(processedInitialValue);
+}

package/__inner__/esm/hooks/useStoredValue/utils.d.ts

@@ -0,0 +1,2 @@
+import type { StoredValue } from './types';
+export declare function isStoredValue(valueToCheck: unknown): valueToCheck is StoredValue<unknown>;

package/__inner__/esm/hooks/useStoredValue/utils.js

@@ -0,0 +1,5 @@
+export function isStoredValue(valueToCheck) {
+    return (!!valueToCheck &&
+        typeof valueToCheck === 'object' &&
+        Object.prototype.hasOwnProperty.call(valueToCheck, 'current'));
+}

package/__inner__/esm/utils/array/create-empty/createEmptyArray.d.ts

@@ -0,0 +1 @@
+export declare const createEmptyArray: (length: number) => null[];

package/__inner__/esm/utils/array/create-empty/createEmptyArray.js

@@ -0,0 +1,4 @@
+import { createFilledArray } from '../create-filled';
+export var createEmptyArray = function (length) {
+    return createFilledArray(length, null);
+};

package/__inner__/esm/utils/array/create-empty/index.d.ts

@@ -0,0 +1 @@
+export * from './createEmptyArray';

package/__inner__/esm/utils/array/create-empty/index.js

@@ -0,0 +1 @@
+export * from './createEmptyArray';

package/__inner__/esm/utils/array/create-filled/createFilledArray.d.ts

@@ -0,0 +1 @@
+export declare const createFilledArray: <Value>(length: number, value: Value) => Value[];

package/__inner__/esm/utils/array/create-filled/createFilledArray.js

@@ -0,0 +1,3 @@
+export var createFilledArray = function (length, value) {
+    return new Array(length).fill(value);
+};

package/__inner__/esm/utils/array/create-filled/index.d.ts

@@ -0,0 +1 @@
+export * from './createFilledArray';

package/__inner__/esm/utils/array/create-filled/index.js

@@ -0,0 +1 @@
+export * from './createFilledArray';

package/__inner__/esm/utils/array/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create-empty';
+export * from './create-filled';

package/__inner__/esm/utils/array/index.js

@@ -0,0 +1,2 @@
+export * from './create-empty';
+export * from './create-filled';

package/__inner__/esm/utils/isFunction.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (data: unknown) => data is (...args: any[]) => any;

package/__inner__/esm/utils/isFunction.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export var isFunction = function (data) {
+    return typeof data === 'function';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "React component library",
   "files": [
     "*"
@@ -27,9 +27,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/logger": "0.63.0",
-    "@ozen-ui/icons": "0.63.0",
-    "@ozen-ui/fonts": "0.63.0"
+    "@ozen-ui/fonts": "0.64.0",
+    "@ozen-ui/icons": "0.64.0",
+    "@ozen-ui/logger": "0.64.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",

package/useStoredValue/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useStoredValue/index.js",
+	"module": "../__inner__/esm/hooks/useStoredValue/index.js",
+	"types": "../__inner__/esm/hooks/useStoredValue/index.d.ts"
+}