@hh.ru/magritte-ui-input 5.0.12

package/numberFormatter.js

@@ -0,0 +1,52 @@
+import './index.css';
+import { defaults, format } from '@hh.ru/magritte-common-number-formatter';
+
+const calculateDelimiters = (rawText, formatted, groupSeparator) => formatted.split(groupSeparator).length - rawText.trim().split(groupSeparator).length;
+const numberFormatterFactory = (passedParams = {}) => {
+    const filteredParams = Object.keys(passedParams).reduce((acc, key) => passedParams[key] === undefined
+        ? acc
+        : {
+            ...acc,
+            [key]: passedParams[key],
+        }, {});
+    const params = { ...defaults, ...filteredParams };
+    const ouputFormatParams = {
+        groupSeparator: '',
+        decimalMark: ['.', ...params.decimalMark],
+        allowNegative: params.allowNegative,
+        decimalLength: params.decimalLength,
+    };
+    const decimalDelimitersRegExp = new RegExp(`[${params.decimalMark?.join('')}]`, 'g');
+    return (prevValue, value, caretPosition) => {
+        const decimalDelimitersCount = value.match(decimalDelimitersRegExp)?.length || 0;
+        if (decimalDelimitersCount > 1) {
+            const lastChar = prevValue.charAt(value.length - 1);
+            const formattedValue = format(prevValue, params) + (params.decimalMark.includes(lastChar) ? lastChar : '');
+            const decimalDelimitersPosition = formattedValue.search(decimalDelimitersRegExp);
+            return {
+                formattedValue,
+                outputValue: format(prevValue, ouputFormatParams) + (params.decimalMark.includes(lastChar) ? lastChar : ''),
+                caretPosition: decimalDelimitersPosition + 1,
+            };
+        }
+        const lastChar = value.charAt(value.length - 1);
+        const prevLastChar = prevValue.charAt(prevValue.length - 1);
+        const formattedValue = format(value, params) + (params.decimalMark.includes(lastChar) ? lastChar : '');
+        const formattedPrevValue = format(prevValue, params) + (params.decimalMark.includes(prevLastChar) ? prevLastChar : '');
+        const outputValue = format(value, ouputFormatParams) + (params.decimalMark.includes(lastChar) ? lastChar : '');
+        // разница вы количестве разделителей разрядов между предыдушим и текущим значениями
+        const delimitersDelta = calculateDelimiters(formattedPrevValue, formattedValue, params.groupSeparator);
+        const prevValueFirstDelimiterPosition = formattedPrevValue.indexOf(params.groupSeparator) + 1;
+        // если каретка находится левее первого символа разделителя разрядов, то не применяем сдвиг с учетом
+        // разницы в количестве разделителей, т.к. сдвигаются только символы справа от первого разделителя
+        const caret = caretPosition < prevValueFirstDelimiterPosition ? caretPosition : caretPosition + delimitersDelta;
+        return {
+            formattedValue,
+            outputValue,
+            caretPosition: formattedPrevValue === formattedValue ? Math.max(caret - 1, 0) : caret,
+        };
+    };
+};
+
+export { numberFormatterFactory };
+//# sourceMappingURL=numberFormatter.js.map

package/numberFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberFormatter.js","sources":["../src/numberFormatter.ts"],"sourcesContent":["import { format, type FormatParams, defaults } from '@hh.ru/magritte-common-number-formatter';\nimport { InputFormatter } from '@hh.ru/magritte-ui-input/types';\n\nconst calculateDelimiters = (rawText: string, formatted: string, groupSeparator: string): number =>\n    formatted.split(groupSeparator).length - rawText.trim().split(groupSeparator).length;\n\nexport const numberFormatterFactory: (params?: FormatParams) => InputFormatter = (passedParams = {}) => {\n    const filteredParams = (Object.keys(passedParams) as Array<keyof typeof passedParams>).reduce<FormatParams>(\n        (acc, key) =>\n            passedParams[key] === undefined\n                ? acc\n                : {\n                      ...acc,\n                      [key]: passedParams[key],\n                  },\n        {}\n    );\n    const params = { ...defaults, ...filteredParams };\n    const ouputFormatParams = {\n        groupSeparator: '',\n        decimalMark: ['.', ...params.decimalMark],\n        allowNegative: params.allowNegative,\n        decimalLength: params.decimalLength,\n    };\n    const decimalDelimitersRegExp = new RegExp(`[${params.decimalMark?.join('')}]`, 'g');\n\n    return (prevValue: string, value: string, caretPosition: number) => {\n        const decimalDelimitersCount = value.match(decimalDelimitersRegExp)?.length || 0;\n        if (decimalDelimitersCount > 1) {\n            const lastChar = prevValue.charAt(value.length - 1);\n            const formattedValue = format(prevValue, params) + (params.decimalMark.includes(lastChar) ? lastChar : '');\n            const decimalDelimitersPosition = formattedValue.search(decimalDelimitersRegExp);\n            return {\n                formattedValue,\n                outputValue:\n                    format(prevValue, ouputFormatParams) + (params.decimalMark.includes(lastChar) ? lastChar : ''),\n                caretPosition: decimalDelimitersPosition + 1,\n            };\n        }\n        const lastChar = value.charAt(value.length - 1);\n        const prevLastChar = prevValue.charAt(prevValue.length - 1);\n        const formattedValue = format(value, params) + (params.decimalMark.includes(lastChar) ? lastChar : '');\n        const formattedPrevValue =\n            format(prevValue, params) + (params.decimalMark.includes(prevLastChar) ? prevLastChar : '');\n        const outputValue = format(value, ouputFormatParams) + (params.decimalMark.includes(lastChar) ? lastChar : '');\n        // разница вы количестве разделителей разрядов между предыдушим и текущим значениями\n        const delimitersDelta = calculateDelimiters(formattedPrevValue, formattedValue, params.groupSeparator);\n        const prevValueFirstDelimiterPosition = formattedPrevValue.indexOf(params.groupSeparator) + 1;\n        // если каретка находится левее первого символа разделителя разрядов, то не применяем сдвиг с учетом\n        // разницы в количестве разделителей, т.к. сдвигаются только символы справа от первого разделителя\n        const caret = caretPosition < prevValueFirstDelimiterPosition ? caretPosition : caretPosition + delimitersDelta;\n\n        return {\n            formattedValue,\n            outputValue,\n            caretPosition: formattedPrevValue === formattedValue ? Math.max(caret - 1, 0) : caret,\n        };\n    };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@hh.ru/magritte-ui-input",
+  "version": "5.0.12",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-focus-visible": "0.1.3",
+    "@hh.ru/magritte-common-number-formatter": "1.0.3",
+    "@hh.ru/magritte-common-text-selection": "0.1.3",
+    "@hh.ru/magritte-common-use-disabled": "1.0.8",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-internal-field-hint": "1.2.26",
+    "@hh.ru/magritte-ui-action": "4.3.3",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-counter": "4.0.8",
+    "@hh.ru/magritte-ui-icon": "7.1.3",
+    "@hh.ru/magritte-ui-mock-component": "1.0.10",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21",
+    "@hh.ru/magritte-ui-typography": "3.0.8",
+    "@maskito/core": "2.3.1",
+    "@maskito/kit": "2.3.1",
+    "@maskito/react": "2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,160 @@
+import type { FocusEventHandler, ForwardedRef, MouseEventHandler, ReactNode } from 'react';
+import { type FormatParams } from '@hh.ru/magritte-common-number-formatter';
+import { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon/iconTypes';
+export type InputSize = 'medium' | 'large';
+export interface InputFormatter {
+    /**
+     * @param prevValue - Значение до изменения
+     * @param value - Значение после изменения
+     * @param caretPosition - Позиция каретки после изменения
+     */
+    (prevValue: string, value: string, caretPosition: number): InputFormatterResult;
+}
+export interface InputFormatterResult {
+    /** Отформатированное значение предназначенное для отображение */
+    formattedValue: string;
+    /** Значение которое будет передано в обработчик onChange */
+    outputValue: string;
+    /** Позиция в которую должна быть установлена каретка после применения изменений */
+    caretPosition: number;
+}
+export interface ControlledProps {
+    /** Обработчик события изменения */
+    onChange: (value: string) => void;
+    /** Значение инпута */
+    value: string;
+}
+export type UncontrolledProps = Partial<ControlledProps>;
+interface InputBaseProps {
+    /** Текст плейсхолдера */
+    placeholder?: ReactNode;
+    /** Постфикс */
+    postfix?: ReactNode;
+    /** Обработчик события получения фокуса */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Обработчик события потери фокуса */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Текст подсказки под инпутом */
+    description?: ReactNode;
+    /** Текст сообщения об ошибке */
+    errorMessage?: ReactNode;
+    /** Флаг отключения инпута */
+    disabled?: boolean;
+    /** Признак невалидности */
+    invalid?: boolean;
+    /** Функция форматтер */
+    formatter?: InputFormatter;
+    /** data-qa атрибут кнопки инпута */
+    buttonDataQa?: string;
+    buttonRef?: ForwardedRef<HTMLButtonElement>;
+    wrapperRef?: ForwardedRef<HTMLDivElement>;
+    /** Ограничение на количество введенных символов */
+    maxLength?: number;
+}
+interface LargeInputProps extends InputBaseProps {
+    /** Размер инпута */
+    size: 'large';
+    /** Флаг управляющий режимом отображения поейсхолдера */
+    elevatePlaceholder?: boolean;
+}
+export interface MediumInputProps extends InputBaseProps {
+    size?: 'medium';
+    elevatePlaceholder?: false;
+}
+type OnButtonClickType = MouseEventHandler<HTMLButtonElement>;
+interface InputWithHintProps extends InputBaseProps {
+    /** Подсказка к полю ввода */
+    hint?: ReactNode;
+    /** Флаг показа подсказки при пустом значении инпута */
+    showHintAlways?: boolean;
+}
+interface InputWithRightButtonProps extends InputBaseProps {
+    /** Флаг управляющий показом кнопки очистки ввода */
+    clearable?: never;
+    /** Флаг управляющий показом кнопки очистки ввода при фокусе */
+    clearableOnFocus?: never;
+    /** Иконка кнопки */
+    buttonIcon: IconWrapperComponentSize24;
+    /** Обработчик события клика по кнопке */
+    onButtonClick: OnButtonClickType;
+    counter?: never;
+}
+export interface InputWithoutRightButtonProps extends InputBaseProps {
+    clearable?: false;
+    clearableOnFocus?: false;
+    buttonIcon?: never;
+    onButtonClick?: never;
+    counter?: never;
+}
+interface InputClearableProps extends InputBaseProps {
+    clearable: true;
+    clearableOnFocus?: never;
+    buttonIcon?: never;
+    onButtonClick?: OnButtonClickType;
+    counter?: never;
+}
+interface InputClearableOnFocusProps extends InputBaseProps {
+    clearable?: never;
+    clearableOnFocus: true;
+    buttonIcon?: never;
+    onButtonClick?: OnButtonClickType;
+    counter?: never;
+}
+export type InputWithRightButtonClearProps = InputClearableProps | InputClearableOnFocusProps;
+interface InputWithRightCounterProps extends InputBaseProps {
+    /** Значение счетчика */
+    counter: ReactNode;
+    clearable?: never;
+    clearableOnFocus?: never;
+    buttonIcon?: never;
+    onButtonClick?: never;
+}
+interface InputWithInputIconProps extends InputBaseProps {
+    inputIcon?: IconWrapperComponentSize24;
+}
+interface InputWithFixedPlaceholderProps extends InputBaseProps {
+    /** Фиксированный placeholder: отображается по мере ввода в input и обрезается на длину введённого значения. Обычно применяется для input-ов с маской: дата/время, номер телефона или банковской карты и т.д. */
+    fixedPlaceholder?: string;
+}
+type NoButtonInputProps = LargeInputProps | MediumInputProps;
+export type BaseInputProps = NoButtonInputProps & (InputWithRightButtonProps | InputWithoutRightButtonProps | InputWithRightButtonClearProps | InputWithRightCounterProps) & InputWithInputIconProps & InputWithFixedPlaceholderProps & InputWithHintProps & ControlledProps;
+type InputProps = NoButtonInputProps & InputWithHintProps & (InputWithRightButtonProps | InputWithoutRightButtonProps | InputWithRightButtonClearProps);
+export type ControlledInputProps = InputProps & ControlledProps;
+export type UncontrolledInputProps = InputProps & UncontrolledProps;
+type PasswordInputProps = NoButtonInputProps & InputWithHintProps & {
+    type?: never;
+    clearable?: never;
+};
+export type ControlledPasswordInputProps = PasswordInputProps & ControlledProps;
+export type UncontrolledPasswordInputProps = PasswordInputProps & UncontrolledProps;
+type NumberInputProps = InputProps & {
+    formatter?: never;
+} & FormatParams;
+export type ControlledNumberInputProps = NumberInputProps & ControlledProps;
+export type UncontrolledNumberInputProps = NumberInputProps & UncontrolledProps;
+export type SearchInputProps = (InputWithoutRightButtonProps | InputClearableProps) & {
+    type?: never;
+    postfix?: never;
+    errorMessage?: never;
+    invalid?: never;
+    description?: never;
+    size?: InputSize;
+    elevatePlaceholder?: false;
+};
+export type ControlledSearchInputProps = SearchInputProps & ControlledProps;
+export type UncontrolledSearchInputProps = SearchInputProps & UncontrolledProps;
+export type DateInputMask = 'd' | 'mm.yyyy' | 'dd.mm.yyyy';
+export type TimeInputRounding = 5 | 15 | 30 | 60;
+export type DateTimeInputProps = NoButtonInputProps & {
+    /** Формат заполнения даты */
+    dateMask?: DateInputMask;
+    /** Флаг для включения режима ввода времени */
+    timeMask?: boolean;
+    /** Шаг для округления введённого времени */
+    timeRounding?: TimeInputRounding;
+    /** Обработчик события клика по иконке, так же влияет на показ */
+    onButtonClick?: OnButtonClickType;
+};
+export type ControlledDateTimeInputProps = DateTimeInputProps & ControlledProps;
+export type UncontrolledDateTimeInputProps = DateTimeInputProps & UncontrolledProps;
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/useDateTimeMask.d.ts

@@ -0,0 +1,3 @@
+import { RefCallback } from 'react';
+import { type TimeInputRounding, type DateInputMask } from './types';
+export declare const useDateTimeMask: (dateMask?: DateInputMask, timeMask?: boolean, timeRounding?: TimeInputRounding) => RefCallback<HTMLElement>;

package/useDateTimeMask.js

@@ -0,0 +1,134 @@
+import './index.css';
+import { useMemo } from 'react';
+import { MASKITO_DEFAULT_OPTIONS } from '@maskito/core';
+import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
+import { useMaskito } from '@maskito/react';
+
+/**
+ * Округление времени (в формате 00:00) до ближайшего заданного шага
+ *
+ * @param dateTime {String} Строка с постфиксом HH:MM, где H - часы, M - минуты
+ * @param roundValue {Number} Шаг для округления
+ * @returns {String}
+ *
+ * @example
+ * roundTime('20.12.2023 15:19', 15); // '20.12.2023 15:15'
+ * @example
+ * roundTime('15:31', 60); // '16:00'
+ */
+const roundTime = (dateTime, roundValue) => {
+    const regexp = /(\d{2}):(\d{2})$/;
+    const match = dateTime.match(regexp);
+    const time = match?.[0];
+    if (time) {
+        const [hours, minutes] = time.split(':').map(Number);
+        const totalMinutes = hours * 60 + minutes;
+        const roundedMinutes = Math.round(totalMinutes / roundValue) * roundValue;
+        const roundedHours = Math.floor(roundedMinutes / 60) % 24;
+        const formattedHours = String(roundedHours).padStart(2, '0');
+        const formattedMinutes = String(roundedMinutes % 60).padStart(2, '0');
+        return dateTime.replace(regexp, `${formattedHours}:${formattedMinutes}`);
+    }
+    return dateTime;
+};
+/** Постпроцессор для округления времени до заданного шага */
+const roundTimePostprocessor = (enabled, rounding) => (state) => enabled && rounding ? { ...state, value: roundTime(state.value, rounding) } : state;
+/** Препроцессор для автоматического добавления разделителей из маски */
+const autoSeparatorsPreprocessor = (mask) => {
+    let lastActionIsInsert = false;
+    return (state, actionType) => {
+        if (actionType === 'insert') {
+            lastActionIsInsert = true;
+            return state;
+        }
+        const canAddSeparator = actionType === 'validation' && lastActionIsInsert;
+        lastActionIsInsert = false;
+        if (canAddSeparator) {
+            const { value, selection } = state.elementState;
+            const [from, to] = selection;
+            let newValue = '';
+            const dateArray = value.split('');
+            for (let i = 0; i < mask.length; i++) {
+                if (i < dateArray.length) {
+                    newValue += dateArray[i];
+                }
+                else if (typeof mask[i] === 'string') {
+                    newValue += mask[i];
+                }
+                else {
+                    break;
+                }
+            }
+            const addedCharacters = newValue.length - value.length;
+            return {
+                ...state,
+                elementState: {
+                    value: newValue,
+                    selection: [from + addedCharacters, to + addedCharacters],
+                },
+            };
+        }
+        return state;
+    };
+};
+/** Препроцессор для замены разделителей "., :;/_" на точку */
+const replaceSeparatorsPreprocessor = (state, actionType) => {
+    if (actionType === 'insert') {
+        return {
+            ...state,
+            data: state.data
+                .replace(/[^0-9., :;/_]/g, '')
+                .replace(/[., :;/_]/g, '.')
+                .replace(/([^0-9])\1+/g, '$1'),
+        };
+    }
+    return state;
+};
+const useDateTimeMask = (dateMask, timeMask, timeRounding) => {
+    const options = useMemo(() => {
+        // маска 'd' - исключение, которого нету в maskito api:
+        if (dateMask === 'd') {
+            return {
+                mask: /^([1-9]|1\d|2[0-9]|3[01])$/,
+            };
+        }
+        const dateSeparator = '.';
+        const dateMode = dateMask?.replace(/\./g, '/');
+        const timeMode = 'HH:MM';
+        let options = { ...MASKITO_DEFAULT_OPTIONS };
+        if (dateMask && timeMask) {
+            options = maskitoDateTimeOptionsGenerator({
+                dateMode,
+                timeMode,
+                dateSeparator,
+            });
+        }
+        else if (dateMask) {
+            options = maskitoDateOptionsGenerator({
+                mode: dateMode,
+                separator: dateSeparator,
+            });
+        }
+        else if (timeMask) {
+            options = maskitoTimeOptionsGenerator({
+                mode: timeMode,
+            });
+        }
+        return {
+            ...options,
+            preprocessors: [
+                replaceSeparatorsPreprocessor,
+                ...(options.preprocessors || []),
+                autoSeparatorsPreprocessor(options.mask),
+            ],
+            postprocessors: [
+                ...(options.postprocessors || []),
+                roundTimePostprocessor(Boolean(timeRounding && timeMode), timeRounding),
+            ],
+        };
+    }, [dateMask, timeMask, timeRounding]);
+    return useMaskito({ options });
+};
+
+export { useDateTimeMask };
+//# sourceMappingURL=useDateTimeMask.js.map

package/useDateTimeMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDateTimeMask.js","sources":["../src/useDateTimeMask.ts"],"sourcesContent":["import { RefCallback, useMemo } from 'react';\nimport { MaskitoOptions, MASKITO_DEFAULT_OPTIONS, MaskitoPreprocessor, MaskitoPostprocessor } from '@maskito/core';\nimport {\n    type MaskitoDateMode,\n    maskitoDateOptionsGenerator,\n    maskitoTimeOptionsGenerator,\n    maskitoDateTimeOptionsGenerator,\n} from '@maskito/kit';\nimport { useMaskito } from '@maskito/react';\n\nimport { type TimeInputRounding, type DateInputMask } from '@hh.ru/magritte-ui-input/types';\n\n/**\n * Округление времени (в формате 00:00) до ближайшего заданного шага\n *\n * @param dateTime {String} Строка с постфиксом HH:MM, где H - часы, M - минуты\n * @param roundValue {Number} Шаг для округления\n * @returns {String}\n *\n * @example\n * roundTime('20.12.2023 15:19', 15); // '20.12.2023 15:15'\n * @example\n * roundTime('15:31', 60); // '16:00'\n */\nconst roundTime = (dateTime: string, roundValue: TimeInputRounding): string => {\n    const regexp = /(\\d{2}):(\\d{2})$/;\n    const match = dateTime.match(regexp);\n    const time = match?.[0];\n\n    if (time) {\n        const [hours, minutes] = time.split(':').map(Number);\n        const totalMinutes = hours * 60 + minutes;\n        const roundedMinutes = Math.round(totalMinutes / roundValue) * roundValue;\n        const roundedHours = Math.floor(roundedMinutes / 60) % 24;\n        const formattedHours = String(roundedHours).padStart(2, '0');\n        const formattedMinutes = String(roundedMinutes % 60).padStart(2, '0');\n        return dateTime.replace(regexp, `${formattedHours}:${formattedMinutes}`);\n    }\n\n    return dateTime;\n};\n\n/** Постпроцессор для округления времени до заданного шага */\nconst roundTimePostprocessor =\n    (enabled: boolean, rounding?: TimeInputRounding): MaskitoPostprocessor =>\n    (state) =>\n        enabled && rounding ? { ...state, value: roundTime(state.value, rounding) } : state;\n\n/** Препроцессор для автоматического добавления разделителей из маски */\nconst autoSeparatorsPreprocessor = (mask: Array<RegExp | string>): MaskitoPreprocessor => {\n    let lastActionIsInsert = false;\n\n    return (state, actionType) => {\n        if (actionType === 'insert') {\n            lastActionIsInsert = true;\n            return state;\n        }\n\n        const canAddSeparator = actionType === 'validation' && lastActionIsInsert;\n        lastActionIsInsert = false;\n\n        if (canAddSeparator) {\n            const { value, selection } = state.elementState;\n            const [from, to] = selection;\n            let newValue = '';\n            const dateArray = value.split('');\n\n            for (let i = 0; i < mask.length; i++) {\n                if (i < dateArray.length) {\n                    newValue += dateArray[i];\n                } else if (typeof mask[i] === 'string') {\n                    newValue += mask[i];\n                } else {\n                    break;\n                }\n            }\n\n            const addedCharacters = newValue.length - value.length;\n\n            return {\n                ...state,\n                elementState: {\n                    value: newValue,\n                    selection: [from + addedCharacters, to + addedCharacters],\n                },\n            };\n        }\n\n        return state;\n    };\n};\n\n/** Препроцессор для замены разделителей \"., :;/_\" на точку */\nconst replaceSeparatorsPreprocessor: MaskitoPreprocessor = (state, actionType) => {\n    if (actionType === 'insert') {\n        return {\n            ...state,\n            data: state.data\n                .replace(/[^0-9., :;/_]/g, '')\n                .replace(/[., :;/_]/g, '.')\n                .replace(/([^0-9])\\1+/g, '$1'),\n        };\n    }\n    return state;\n};\n\nexport const useDateTimeMask = (\n    dateMask?: DateInputMask,\n    timeMask?: boolean,\n    timeRounding?: TimeInputRounding\n): RefCallback<HTMLElement> => {\n    const options = useMemo<MaskitoOptions>(() => {\n        // маска 'd' - исключение, которого нету в maskito api:\n        if (dateMask === 'd') {\n            return {\n                mask: /^([1-9]|1\\d|2[0-9]|3[01])$/,\n            };\n        }\n\n        const dateSeparator = '.';\n        const dateMode = dateMask?.replace(/\\./g, '/') as MaskitoDateMode;\n        const timeMode = 'HH:MM';\n        let options: MaskitoOptions = { ...MASKITO_DEFAULT_OPTIONS };\n\n        if (dateMask && timeMask) {\n            options = maskitoDateTimeOptionsGenerator({\n                dateMode,\n                timeMode,\n                dateSeparator,\n            });\n        } else if (dateMask) {\n            options = maskitoDateOptionsGenerator({\n                mode: dateMode,\n                separator: dateSeparator,\n            });\n        } else if (timeMask) {\n            options = maskitoTimeOptionsGenerator({\n                mode: timeMode,\n            });\n        }\n\n        return {\n            ...options,\n            preprocessors: [\n                replaceSeparatorsPreprocessor,\n                ...(options.preprocessors || []),\n                autoSeparatorsPreprocessor(options.mask as Array<RegExp | string>),\n            ],\n            postprocessors: [\n                ...(options.postprocessors || []),\n                roundTimePostprocessor(Boolean(timeRounding && timeMode), timeRounding),\n            ],\n        };\n    }, [dateMask, timeMask, timeRounding]);\n\n    return useMaskito({ options });\n};\n"],"names":[],"mappings":"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"}

package/useFocus.d.ts

@@ -0,0 +1,7 @@
+import { FocusEventHandler, ChangeEventHandler } from 'react';
+export declare const useFocus: <T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(onChange: (value: string) => void, onFocus: FocusEventHandler<T> | undefined, onBlur: FocusEventHandler<T> | undefined) => {
+    changeHandler: ChangeEventHandler<T>;
+    focusHandler: FocusEventHandler<T>;
+    blurHandler: FocusEventHandler<T>;
+    isFocused: boolean;
+};

package/useFocus.js

@@ -0,0 +1,21 @@
+import './index.css';
+import { useState, useCallback } from 'react';
+
+const useFocus = (onChange, onFocus, onBlur) => {
+    const [isFocused, setFocused] = useState(false);
+    const changeHandler = useCallback((event) => {
+        onChange(event.target.value);
+    }, [onChange]);
+    const focusHandler = useCallback((event) => {
+        setFocused(true);
+        onFocus?.(event);
+    }, [setFocused, onFocus]);
+    const blurHandler = useCallback((event) => {
+        setFocused(false);
+        onBlur?.(event);
+    }, [setFocused, onBlur]);
+    return { changeHandler, focusHandler, blurHandler, isFocused };
+};
+
+export { useFocus };
+//# sourceMappingURL=useFocus.js.map

package/useFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.js","sources":["../src/useFocus.ts"],"sourcesContent":["import { useCallback, useState, FocusEventHandler, ChangeEventHandler } from 'react';\n\nexport const useFocus = <T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(\n    onChange: (value: string) => void,\n    onFocus: FocusEventHandler<T> | undefined,\n    onBlur: FocusEventHandler<T> | undefined\n): {\n    changeHandler: ChangeEventHandler<T>;\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n\n    const changeHandler = useCallback<ChangeEventHandler<T>>(\n        (event) => {\n            onChange(event.target.value);\n        },\n        [onChange]\n    );\n\n    const focusHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [setFocused, onFocus]\n    );\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(false);\n            onBlur?.(event);\n        },\n        [setFocused, onBlur]\n    );\n\n    return { changeHandler, focusHandler, blurHandler, isFocused };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,QAAQ,GAAG,CACpB,QAAiC,EACjC,OAAyC,EACzC,MAAwC,KAMxC;IACA,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEhD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAK,KAAI;AACN,QAAA,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAK,KAAI;QACN,UAAU,CAAC,IAAI,CAAC,CAAC;AACjB,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACrB,KAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACxB,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAK,KAAI;QACN,UAAU,CAAC,KAAK,CAAC,CAAC;AAClB,QAAA,MAAM,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EACD,CAAC,UAAU,EAAE,MAAM,CAAC,CACvB,CAAC;IAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AACnE;;;;"}

package/useInputAriaProps.d.ts

@@ -0,0 +1,14 @@
+export interface InputAriaHookProps {
+    invalid?: boolean;
+    hasPlaceholder?: boolean;
+    hasDescription?: boolean;
+    descriptionId: string;
+    labelId: string;
+}
+interface AriaProps {
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+export declare const useInputAriaProps: ({ invalid, hasPlaceholder, hasDescription, descriptionId, labelId, }: InputAriaHookProps) => AriaProps;
+export {};

package/useInputAriaProps.js

@@ -0,0 +1,15 @@
+import './index.css';
+const useInputAriaProps = ({ invalid, hasPlaceholder, hasDescription, descriptionId, labelId, }) => {
+    const ariaProps = {};
+    invalid && (ariaProps['aria-invalid'] = !!invalid);
+    if (hasPlaceholder) {
+        ariaProps['aria-labelledby'] = `input-label-${labelId}`;
+    }
+    if (hasDescription) {
+        ariaProps['aria-describedby'] = `input-description-${descriptionId}`;
+    }
+    return ariaProps;
+};
+
+export { useInputAriaProps };
+//# sourceMappingURL=useInputAriaProps.js.map

package/useInputAriaProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputAriaProps.js","sources":["../src/useInputAriaProps.ts"],"sourcesContent":["export interface InputAriaHookProps {\n    invalid?: boolean;\n    hasPlaceholder?: boolean;\n    hasDescription?: boolean;\n    descriptionId: string;\n    labelId: string;\n}\n\ninterface AriaProps {\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-invalid'?: boolean;\n}\n\nexport const useInputAriaProps = ({\n    invalid,\n    hasPlaceholder,\n    hasDescription,\n    descriptionId,\n    labelId,\n}: InputAriaHookProps): AriaProps => {\n    const ariaProps: AriaProps = {};\n    invalid && (ariaProps['aria-invalid'] = !!invalid);\n    if (hasPlaceholder) {\n        ariaProps['aria-labelledby'] = `input-label-${labelId}`;\n    }\n    if (hasDescription) {\n        ariaProps['aria-describedby'] = `input-description-${descriptionId}`;\n    }\n    return ariaProps;\n};\n"],"names":[],"mappings":"AAca,MAAA,iBAAiB,GAAG,CAAC,EAC9B,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,OAAO,GACU,KAAe;IAChC,MAAM,SAAS,GAAc,EAAE,CAAC;IAChC,OAAO,KAAK,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;AACnD,IAAA,IAAI,cAAc,EAAE;AAChB,QAAA,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAe,YAAA,EAAA,OAAO,EAAE,CAAC;AAC3D,KAAA;AACD,IAAA,IAAI,cAAc,EAAE;AAChB,QAAA,SAAS,CAAC,kBAAkB,CAAC,GAAG,CAAqB,kBAAA,EAAA,aAAa,EAAE,CAAC;AACxE,KAAA;AACD,IAAA,OAAO,SAAS,CAAC;AACrB;;;;"}

package/useUncontrolledInput.d.ts

@@ -0,0 +1 @@
+export declare const useUncontrolledInput: (initialValue?: string, changeHandler?: ((value: string) => void) | undefined) => [string, (value: string) => void];

package/useUncontrolledInput.js

@@ -0,0 +1,14 @@
+import './index.css';
+import { useState, useCallback } from 'react';
+
+const useUncontrolledInput = (initialValue, changeHandler) => {
+    const [value, setValue] = useState(initialValue || '');
+    const onChange = useCallback((newValue) => {
+        setValue(newValue);
+        changeHandler?.(newValue);
+    }, [changeHandler, setValue]);
+    return [value, onChange];
+};
+
+export { useUncontrolledInput };
+//# sourceMappingURL=useUncontrolledInput.js.map

package/useUncontrolledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUncontrolledInput.js","sources":["../src/useUncontrolledInput.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nexport const useUncontrolledInput = (\n    initialValue?: string,\n    changeHandler?: (value: string) => void\n): [string, (value: string) => void] => {\n    const [value, setValue] = useState(initialValue || '');\n\n    const onChange = useCallback(\n        (newValue: string) => {\n            setValue(newValue);\n            changeHandler?.(newValue);\n        },\n        [changeHandler, setValue]\n    );\n\n    return [value, onChange];\n};\n"],"names":[],"mappings":";;MAEa,oBAAoB,GAAG,CAChC,YAAqB,EACrB,aAAuC,KACJ;AACnC,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;AAEvD,IAAA,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,QAAA,aAAa,GAAG,QAAQ,CAAC,CAAC;AAC9B,KAAC,EACD,CAAC,aAAa,EAAE,QAAQ,CAAC,CAC5B,CAAC;AAEF,IAAA,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC7B;;;;"}