@via-profit/ui-kit 0.2.1-alpha.3 → 0.2.3

package/MaskedField/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,61 +31,55 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const useMasked_1 = require("./useMasked");
 const TextField_1 = __importDefault(require("../TextField"));
+__exportStar(require("./useMasked"), exports);
 const MaskedField = (props, ref) => {
     const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
-    const propValueRef = react_1.default.useRef(propValue);
-    const textInputRef = react_1.default.useRef(null);
-    const decoratorsErrorDisplayed = react_1.default.useRef(false);
     const masked = (0, useMasked_1.useMasked)();
     const parseInputFn = parseInput || masked.parseInput;
-    const getMask = react_1.default.useCallback((input) => {
-        const currentMask = typeof mask === 'function' ? mask(input) : mask;
-        if (!decoratorsErrorDisplayed.current &&
-            currentMask.find(elem => typeof elem === 'string' &&
-                typeof parseInput === 'undefined' &&
-                elem.match(/[0-9a-zа-яё]/i))) {
-            decoratorsErrorDisplayed.current = true;
-            console.warn('[MaskedField component] You use symbols as decorators, which should be replaced with RegExp or provide the «parseInput» function instead');
-        }
-        return currentMask;
-    }, [mask, parseInput]);
+    const inputRef = react_1.default.useRef(null);
+    const lastPropValue = react_1.default.useRef(propValue);
+    const getMask = react_1.default.useCallback((input) => (typeof mask === 'function' ? mask(input) : mask), [mask]);
     const getInputValue = react_1.default.useCallback((v) => {
         var _a;
-        const mask = getMask(v || '');
-        const parsed = parseInputFn(v || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
-        return text;
-    }, [getMask, masked, parseInputFn]);
+        const m = getMask(v);
+        const parsed = parseInputFn(v, m, ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const formatted = masked.formatParsedInput(parsed.text, m, parsed.caret);
+        return formatted.text;
+    }, [getMask, parseInputFn, masked]);
     const [inputValue, setInputValue] = react_1.default.useState(getInputValue(propValue || ''));
+    // Обновление при изменении внешнего значения
     react_1.default.useEffect(() => {
-        if (propValueRef.current !== propValue) {
-            propValueRef.current = propValue;
+        if (lastPropValue.current !== propValue) {
+            lastPropValue.current = propValue;
             setInputValue(getInputValue(propValue || ''));
         }
-    }, [getInputValue, getMask, parseInputFn, masked, propValue]);
+    }, [propValue, getInputValue]);
     const handleOnChange = react_1.default.useCallback(event => {
         var _a;
-        const mask = getMask(event.currentTarget.value);
-        const parsed = parseInputFn(event.currentTarget.value, mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { caret, isValid, text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
-        const transformedText = transform ? transform(text) : text;
-        setInputValue(transformedText);
+        const raw = event.currentTarget.value;
+        const caret = ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0;
+        const m = getMask(raw);
+        const parsed = parseInputFn(raw, m, caret);
+        const formatted = masked.formatParsedInput(parsed.text, m, parsed.caret);
+        const finalText = transform ? transform(formatted.text) : formatted.text;
+        setInputValue(finalText);
         onChange({
-            caret,
-            isValid,
-            text: transformedText,
+            caret: formatted.caret,
+            isValid: formatted.isValid,
+            text: finalText,
         });
-        setTimeout(() => {
+        // Устанавливаем caret после рендера
+        requestAnimationFrame(() => {
             var _a;
-            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
-        }, 15);
-    }, [getMask, masked, transform, onChange, parseInputFn]);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(formatted.caret, formatted.caret);
+        });
+    }, [getMask, parseInputFn, masked, transform, onChange]);
     const setInputRef = react_1.default.useCallback((elem) => {
-        textInputRef.current = elem;
+        inputRef.current = elem;
         if (typeof nativeProps.inputRef === 'function') {
             nativeProps.inputRef(elem);
         }
-        if (nativeProps.inputRef !== null && typeof nativeProps.inputRef === 'object') {
+        else if (nativeProps.inputRef && typeof nativeProps.inputRef === 'object') {
             nativeProps.inputRef.current = elem;
         }
     }, [nativeProps]);

package/MaskedField/useMasked.js

@@ -12,13 +12,12 @@ const useMasked = () => {
             caret: 0,
         };
         value
-            .replace(/\s/, '')
+            .replace(/\s+/g, '')
             .split('')
             .forEach((character, charIndex) => {
             const isMatch = mask.some(pattern => {
                 if (typeof pattern === 'string') {
-                    return false;
-                    // return character === pattern && character;
+                    return character === pattern && character;
                 }
                 if (pattern instanceof RegExp) {
                     return new RegExp(pattern).test(character);
@@ -45,7 +44,9 @@ const useMasked = () => {
         if (parsedValue === '') {
             return data;
         }
-        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+        let patternIndex = 0;
+        for (patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            data.isValid = false;
             if (data.charIndex >= parsedValue.length) {
                 break;
             }
@@ -57,6 +58,7 @@ const useMasked = () => {
             if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
                 data.text = `${data.text}${char}`;
                 data.charIndex += 1;
+                data.isValid = true;
             }
             // If char is correct (equal with pattern string)
             // then accept char into text
@@ -79,7 +81,7 @@ const useMasked = () => {
         const result = {
             text: data.text,
             caret: data.caret,
-            isValid: data.text.length >= mask.length,
+            isValid: data.isValid,
         };
         return result;
     }, []);

package/Menu/MenuContainer.d.ts

@@ -90,6 +90,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * Default: `bottom`
      */
     readonly anchorPos?: AnchorPos;
+    readonly alternativePlacements?: readonly AnchorPos[];
     readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
     /**
      * When enabled, the popper will automatically try to find the best placement
@@ -164,6 +165,28 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * The function that will be called at the moment when you want to close the menu
      */
     readonly onRequestClose?: OnRequestClose;
+    /**
+     * List menu maximum width (px, em, etc.)\
+     * Using pixels:
+     * ```tsx
+     * <Menu
+     *  maxWidth={250}
+     * >
+     * ```
+     * Using em:
+     * ```tsx
+     * <Menu
+     *  maxWidth="16em"
+     * >
+     * ```
+     * Using pixels:
+     * ```tsx
+     * <Menu
+     *  maxWidth="16px"
+     * >
+     * ```
+     */
+    readonly maxWidth?: number | string;
 }
 export interface MenuOverrides {
     /**
@@ -220,9 +243,8 @@ export type MenuRef = {
      * Returns the list HTML container
      */
     getListElement: () => HTMLDivElement | null;
-    setActualPlacement: (placement: AnchorPos) => void;
 };
-export type Value<T, Multiple> = Multiple extends undefined | undefined ? T | null : readonly T[];
+export type Value<T, Multiple> = Multiple extends undefined ? T | null : readonly T[];
 export type GetOptionSelected<T> = (payload: {
     readonly item: T;
     readonly value: T;