@skbkontur/react-ui 4.25.1-MaskedInput-fix.1 → 4.25.1-MaskedInput-fix.2

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputElement, InputElementProps } from '../../Input';
+export declare type ColorableInputElementProps = InputElementProps & {
+    active?: boolean;
+    showOnFocus?: boolean;
+    children: React.ReactElement;
+};
+export declare const ColorableInputElement: import("../../../lib/forwardRefAndName").ReactUIComponentWithRef<InputElement, InputElementProps & {
+    active?: boolean | undefined;
+    showOnFocus?: boolean | undefined;
+    children: React.ReactElement;
+}> & Record<never, never>;

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.js

@@ -0,0 +1,157 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ColorableInputElement = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+
+var _forwardRefAndName = require("../../../lib/forwardRefAndName");
+var _Emotion = require("../../../lib/theming/Emotion");
+
+var _ColorableInputElement = require("./ColorableInputElement.styles");var _excluded = ["children", "onInput", "onFocus", "onBlur", "active", "showOnFocus"];
+
+
+
+
+
+
+
+var dictionary = new Map();
+var paintText = function paintText(entries) {
+  entries.forEach(function (entry) {var _dictionary$get;return (_dictionary$get = dictionary.get(entry.target)) == null ? void 0 : _dictionary$get();});
+};
+var resizeObserver = _globalObject.globalObject.ResizeObserver ? new _globalObject.globalObject.ResizeObserver((0, _lodash.default)(paintText)) : null;
+
+// Возможно придётся включить.
+// Иногда, на тяжёлых страницах, текст рендерится итеративно.
+// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.
+// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 10000);
+
+var ColorableInputElement = (0, _forwardRefAndName.forwardRefAndName)(
+'ColorableInputElement',
+function ColorableInputElement(props, ref) {
+  var inputRef = (0, _react.useRef)(null);
+  var spanRef = (0, _react.useRef)(null);
+  var focused = (0, _react.useRef)(false);
+  var inputStyle = _react.default.useRef();
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  var children = props.children,onInput = props.onInput,onFocus = props.onFocus,onBlur = props.onBlur,_props$active = props.active,active = _props$active === void 0 ? true : _props$active,_props$showOnFocus = props.showOnFocus,showOnFocus = _props$showOnFocus === void 0 ? false : _props$showOnFocus,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+  (0, _react.useImperativeHandle)(
+  ref,
+  function () {return {
+      input: inputRef.current,
+      getRootNode: function getRootNode() {return inputRef.current;} };},
+
+  []);
+
+
+  (0, _react.useEffect)(function () {
+    if (inputRef.current) {
+      dictionary.set(inputRef.current, paintText);
+      resizeObserver == null ? void 0 : resizeObserver.observe(inputRef.current);
+    }
+
+    return function () {
+      if (inputRef.current) {
+        dictionary.delete(inputRef.current);
+        resizeObserver == null ? void 0 : resizeObserver.unobserve(inputRef.current);
+      }
+    };
+  }, []);
+
+  (0, _react.useEffect)(function () {
+    // При деактивации быстро выключаем покраску
+    !active ? unPaintText() : setTimeout(paintText);
+  }, [showOnFocus, active]);
+
+  (0, _react.useEffect)(function () {
+    if (inputRef.current) {
+      inputStyle.current = getComputedStyle(inputRef.current);
+    }
+  });
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.cloneElement(children, (0, _extends2.default)({},
+    inputProps, {
+      onInput: handleInput,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      inputRef: inputRef,
+      className: (0, _Emotion.cx)(props.className, active && _ColorableInputElement.styles.input()) })), /*#__PURE__*/
+
+    _react.default.createElement("span", { style: { visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }, ref: spanRef })));
+
+
+
+  function handleInput(e) {
+    // iMask может изменить value после вызова onInput
+    setTimeout(paintText);
+
+    onInput == null ? void 0 : onInput(e);
+  }
+
+  function handleFocus(e) {
+    focused.current = true;
+    setTimeout(paintText);
+
+    onFocus == null ? void 0 : onFocus(e);
+  }
+
+  function handleBlur(e) {
+    focused.current = false;
+    setTimeout(paintText);
+
+    onBlur == null ? void 0 : onBlur(e);
+  }
+
+  function unPaintText() {
+    inputRef.current && (inputRef.current.style.backgroundImage = '');
+  }
+
+  function paintText() {var _shadow;
+    if (!active || !spanRef.current || !inputRef.current || !inputStyle.current || !(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
+      return;
+    }
+
+    var shadow = spanRef.current.shadowRoot;
+    var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
+
+    if (!typedValueElement) {
+      shadow = spanRef.current.attachShadow({ mode: 'open' });
+
+      typedValueElement = _globalObject.globalObject.document.createElement('span');
+      typedValueElement.setAttribute('id', 'span');
+
+      shadow.appendChild(typedValueElement);
+    }
+
+    var style = inputStyle.current;
+
+    typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';
+
+    var inputRect = inputRef.current.getBoundingClientRect();
+    var filledRect = spanRef.current.getBoundingClientRect();
+
+    var threshold = filledRect.width / (inputRect.width / 100);
+    var degree = style.fontStyle === 'italic' ? 100 : 90;
+
+    var typedValueColor = theme.inputTextColor;
+    var maskColor = theme.inputPlaceholderColor;
+    if (props.disabled) {
+      typedValueColor = theme.inputTextColorDisabled;
+      maskColor = theme.inputTextColorDisabled;
+    }
+    if (showOnFocus) {
+      maskColor = focused.current ? maskColor : 'transparent';
+    }
+
+    inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " +
+
+    degree + "deg,\n          " +
+    typedValueColor + " " + threshold + "%,\n          " +
+    maskColor + " " + threshold + "%\n      )";
+
+  }
+});exports.ColorableInputElement = ColorableInputElement;

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorableInputElement.tsx"],"names":["dictionary","Map","paintText","entries","forEach","entry","get","target","resizeObserver","globalObject","ResizeObserver","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","React","useRef","theme","ThemeContext","children","onInput","onFocus","onBlur","active","showOnFocus","inputProps","input","current","getRootNode","set","observe","delete","unobserve","unPaintText","setTimeout","getComputedStyle","cloneElement","handleInput","handleFocus","handleBlur","className","styles","visibility","position","whiteSpace","e","style","backgroundImage","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","disabled","inputTextColorDisabled"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { styles } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  active?: boolean;\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\nconst dictionary = new Map<Element, () => void>();\nconst paintText: ResizeObserverCallback = (entries) => {\n  entries.forEach((entry) => dictionary.get(entry.target)?.());\n};\nconst resizeObserver = globalObject.ResizeObserver ? new globalObject.ResizeObserver(debounce(paintText)) : null;\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 10000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n\n    const { children, onInput, onFocus, onBlur, active = true, showOnFocus = false, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      if (inputRef.current) {\n        dictionary.set(inputRef.current, paintText);\n        resizeObserver?.observe(inputRef.current);\n      }\n\n      return () => {\n        if (inputRef.current) {\n          dictionary.delete(inputRef.current);\n          resizeObserver?.unobserve(inputRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      // При деактивации быстро выключаем покраску\n      !active ? unPaintText() : setTimeout(paintText);\n    }, [showOnFocus, active]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && styles.input()),\n        })}\n        <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      // iMask может изменить value после вызова onInput\n      setTimeout(paintText);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = true;\n      setTimeout(paintText);\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = false;\n      setTimeout(paintText);\n\n      onBlur?.(e);\n    }\n\n    function unPaintText() {\n      inputRef.current && (inputRef.current.style.backgroundImage = '');\n    }\n\n    function paintText() {\n      if (!active || !spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\n      if (props.disabled) {\n        typedValueColor = theme.inputTextColorDisabled;\n        maskColor = theme.inputTextColorDisabled;\n      }\n      if (showOnFocus) {\n        maskColor = focused.current ? maskColor : 'transparent';\n      }\n\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    input(): string;
+};

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles.js

@@ -0,0 +1,13 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  input: function input() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      background-color: transparent;\n      background-size: 100%;\n      background-repeat: repeat;\n      background-clip: text;\n      -webkit-text-fill-color: transparent;\n    "])));
+
+
+
+
+
+
+
+  } });exports.styles = styles;

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorableInputElement.styles.ts"],"names":["styles","input","css"],"mappings":"oRAAA,uD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,mBACzB;AACN,eAAOC,YAAP;;;;;;;;AAQD,GAVgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  input() {\n    return css`\n      display: inline-block;\n      background-color: transparent;\n      background-size: 100%;\n      background-repeat: repeat;\n      background-clip: text;\n      -webkit-text-fill-color: transparent;\n    `;\n  },\n});\n"]}

package/cjs/components/MaskedInput/ColorableInputElement/index.d.ts

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

package/cjs/components/MaskedInput/ColorableInputElement/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _ColorableInputElement = require("./ColorableInputElement");Object.keys(_ColorableInputElement).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ColorableInputElement[key]) return;exports[key] = _ColorableInputElement[key];});

package/cjs/components/MaskedInput/ColorableInputElement/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ColorableInputElement';\n"]}

package/cjs/components/MaskedInput/FixedIMaskInput.d.ts

@@ -0,0 +1,9 @@
+import { InputMask, MaskedPatternOptions } from 'imask';
+import { IMaskInputProps } from 'react-imask';
+export declare type FixedIMaskInputProps = IMaskInputProps<HTMLInputElement>;
+interface IMaskRefType {
+    maskRef: InputMask<MaskedPatternOptions>;
+    element: HTMLInputElement;
+}
+export declare const FixedIMaskInput: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<IMaskRefType, FixedIMaskInputProps> & Record<never, never>;
+export {};

package/cjs/components/MaskedInput/FixedIMaskInput.js

@@ -0,0 +1,219 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.FixedIMaskInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _reactImask = require("react-imask");
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+
+
+
+
+
+
+
+
+
+
+
+var _MouseDrag = require("../../lib/events/MouseDrag");var _excluded = ["inputRef"];
+
+
+
+
+
+
+
+
+
+
+
+
+var FixedIMaskInput = (0, _forwardRefAndName.forwardRefAndName)(
+'FixedIMaskInput',
+function FixedIMaskInput(props, ref) {
+  var inputRef = props.inputRef,restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var imaskRef = (0, _react.useRef)(null);
+  var focused = (0, _react.useRef)(false);
+
+  (0, _react.useEffect)(function () {var _imaskRef$current;
+    if ((_imaskRef$current = imaskRef.current) != null && _imaskRef$current.element) {
+      fillTypedValue();
+      var mouseDrag = _MouseDrag.MouseDrag.listen(imaskRef.current.element).onMouseDragEnd(function (e) {var _imaskRef$current2, _imaskRef$current3;
+        var direction = 'none';
+
+        if (
+        mouseDrag.mouseDragStartEvent &&
+        ((_imaskRef$current2 = imaskRef.current) == null ? void 0 : _imaskRef$current2.element.selectionStart) !== ((_imaskRef$current3 = imaskRef.current) == null ? void 0 : _imaskRef$current3.element.selectionEnd))
+        {
+          direction = mouseDrag.mouseDragStartEvent.pageX > e.pageX ? 'backward' : 'forward';
+        }
+
+        var _getSelection = getSelection(),start = _getSelection[0],end = _getSelection[1];
+        setSelection(start, end, direction);
+      });
+    }
+  }, []);
+
+  (0, _react.useImperativeHandle)(ref, function () {return imaskRef.current;}, []);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_reactImask.IMaskInput, (0, _extends2.default)({},
+    restProps, {
+      ref: imaskRef,
+      inputRef: inputRef,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseUp: handleMouseUp,
+      onAccept: handleAccept })));
+
+
+  function getTypedValue() {var _imaskRef$current4;
+    var _ref = ((_imaskRef$current4 = imaskRef.current) == null ? void 0 : _imaskRef$current4.maskRef.masked) || {},_ref$_value = _ref._value,_value = _ref$_value === void 0 ? '' : _ref$_value,_ref$displayValue = _ref.displayValue,displayValue = _ref$displayValue === void 0 ? '' : _ref$displayValue;
+    var end = getMaxCaretPosition();
+    var value = _value !== '' || focused.current === true ? displayValue : '';
+
+    return value.slice(0, end);
+  }
+
+  function fillTypedValue() {var _imaskRef$current5;
+    (_imaskRef$current5 = imaskRef.current) == null ? void 0 : _imaskRef$current5.element.setAttribute('data-typed-value', getTypedValue());
+  }
+
+  function getMaxCaretPosition() {
+    var maskChars = [];
+    if (imaskRef.current) {
+      maskChars.push(imaskRef.current.maskRef.masked.placeholderChar);
+      if (imaskRef.current.maskRef.masked.blocks) {
+        Object.values(imaskRef.current.maskRef.masked.blocks).forEach(
+        function (_ref2) {var placeholderChar = _ref2.placeholderChar;return placeholderChar && maskChars.push(placeholderChar);});
+
+      }
+      return imaskRef.current.element.value.split(new RegExp(maskChars.join('|')))[0].length;
+    }
+
+    return Infinity;
+  }
+
+  function normalizeSelection() {
+    var _getSelection2 = getSelection(),start = _getSelection2[0],end = _getSelection2[1];
+    var max = getMaxCaretPosition();
+    if (end > max) {
+      setSelection(start, max);
+    }
+  }
+
+  function getNormalizedRange(calc) {
+    return typeof calc === 'number' ? Math.min(getMaxCaretPosition(), Math.max(0, calc)) : 0;
+  }
+
+  function getSelection() {
+    if (imaskRef.current) {
+      return [
+      imaskRef.current.element.selectionStart || 0,
+      imaskRef.current.element.selectionEnd || 0,
+      imaskRef.current.element.selectionDirection || 'none'];
+
+    }
+    return [0, 0, 'none'];
+  }
+
+  function setSelection() {var _imaskRef$current6;for (var _len = arguments.length, _ref3 = new Array(_len), _key = 0; _key < _len; _key++) {_ref3[_key] = arguments[_key];}var start = _ref3[0],end = _ref3[1],direction = _ref3[2];
+    (_imaskRef$current6 = imaskRef.current) == null ? void 0 : _imaskRef$current6.element.setSelectionRange(
+    getNormalizedRange(start),
+    getNormalizedRange(end),
+    direction || 'none');
+
+  }
+
+  function jumpCaret(prev, headDirection) {var _imaskRef$current7, _imaskRef$current7$el;
+    var word = /а-яa-z0-9_/.valueOf();
+    var wordRegExp = new RegExp("([" + word + "])+[\\s]*|([^" + word + "])+", 'gi');
+    var next = headDirection === 'right' ? prev : 0;
+    (_imaskRef$current7 = imaskRef.current) == null ? void 0 : (_imaskRef$current7$el = _imaskRef$current7.element.value.match(wordRegExp)) == null ? void 0 : _imaskRef$current7$el.reduce(function (s, a) {
+      var pos = a.length + (s.slice(-1)[0] || 0);
+      if (headDirection === 'right' && next === prev && next < pos) {
+        next = getNormalizedRange(pos);
+      } else if (headDirection === 'left' && prev > pos) {
+        next = getNormalizedRange(pos);
+      }
+      return [].concat(s, [pos]);
+    }, []);
+    return next;
+  }
+
+  /**
+   * Вычислят положение каретки при управлении клавишами
+   * @param e
+   */
+  function calcSelection(e) {
+    var _getSelection3 = getSelection(),start = _getSelection3[0],end = _getSelection3[1],direction = _getSelection3[2];
+    var isSelectionMode = (0, _identifiers.isModShift)()(e);
+    var tail = start !== end && direction === 'backward' ? end : start;
+    var head = start !== end && direction === 'backward' ? start : end;
+    var headDirection = (0, _identifiers.someKeys)(_identifiers.isKeyArrowLeft, _identifiers.isKeyArrowUp, _identifiers.isKeyHome)(e) ? 'left' : 'right';
+    var step = (0, _identifiers.isKeyArrowHorizontal)(e) ? 1 : Infinity;
+    var increment = headDirection === 'left' ? -step : step;
+    if ((0, _identifiers.isShortcutJumpCaret)(e)) {
+      head = jumpCaret(head, headDirection);
+    } else if (head !== tail && !isSelectionMode && (0, _identifiers.isKeyArrowHorizontal)(e)) {
+      head = headDirection === 'right' ? Math.max(tail, head) : Math.min(tail, head);
+    } else {
+      head = head + increment;
+    }
+    if (isSelectionMode) {
+      var _start = Math.min(tail, head);
+      var _end = Math.max(tail, head);
+      return [getNormalizedRange(_start), getNormalizedRange(_end), _end === head ? 'forward' : 'backward'];
+    }
+    tail = head;
+    return [getNormalizedRange(tail), getNormalizedRange(head), 'none'];
+  }
+
+  function handleMouseUp(e) {
+    normalizeSelection();
+
+    props.onMouseUp == null ? void 0 : props.onMouseUp(e);
+  }
+
+  function handleFocus(e) {
+    focused.current = true;
+    fillTypedValue();
+    normalizeSelection();
+
+    props.onFocus == null ? void 0 : props.onFocus(e);
+  }
+
+  function handleBlur(e) {
+    focused.current = false;
+    fillTypedValue();
+
+    props.onBlur == null ? void 0 : props.onBlur(e);
+  }
+
+  function handleAccept() {
+    fillTypedValue();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}
+
+    props.onAccept == null ? void 0 : props.onAccept.apply(props, args);
+  }
+
+  function handleKeyDown(e) {
+    var nearest = getMaxCaretPosition();
+    if ((0, _identifiers.isShortcutSelectAll)(e)) {
+      e.preventDefault();
+      setSelection(0, nearest);
+    } else if ((0, _identifiers.isKeyArrow)(e) || (0, _identifiers.isKeyEnd)(e) || (0, _identifiers.isKeyHome)(e)) {
+      e.preventDefault();
+      var _calcSelection = calcSelection(e),start = _calcSelection[0],end = _calcSelection[1],direction = _calcSelection[2];
+      setSelection(start, end, direction);
+    } else {
+      var _getSelection4 = getSelection(),_start2 = _getSelection4[0],_end2 = _getSelection4[1];
+      var max = getMaxCaretPosition();
+      if (_end2 > max) {
+        setSelection(_start2, max);
+      }
+    }
+
+    props.onKeyDown == null ? void 0 : props.onKeyDown(e);
+  }
+});exports.FixedIMaskInput = FixedIMaskInput;

package/cjs/components/MaskedInput/FixedIMaskInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FixedIMaskInput.tsx"],"names":["FixedIMaskInput","props","ref","inputRef","restProps","imaskRef","focused","current","element","fillTypedValue","mouseDrag","MouseDrag","listen","onMouseDragEnd","e","direction","mouseDragStartEvent","selectionStart","selectionEnd","pageX","getSelection","start","end","setSelection","handleKeyDown","handleFocus","handleBlur","handleMouseUp","handleAccept","getTypedValue","maskRef","masked","_value","displayValue","getMaxCaretPosition","value","slice","setAttribute","maskChars","push","placeholderChar","blocks","Object","values","forEach","split","RegExp","join","length","Infinity","normalizeSelection","max","getNormalizedRange","calc","Math","min","selectionDirection","setSelectionRange","jumpCaret","prev","headDirection","word","valueOf","wordRegExp","next","match","reduce","s","a","pos","calcSelection","isSelectionMode","tail","head","isKeyArrowLeft","isKeyArrowUp","isKeyHome","step","increment","onMouseUp","onFocus","onBlur","args","onAccept","nearest","preventDefault","onKeyDown"],"mappings":"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","sourcesContent":["import React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport { InputMask, MaskedPatternOptions } from 'imask';\nimport { IMaskInput, IMaskInputProps } from 'react-imask';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport {\n  isKeyArrow,\n  isKeyArrowHorizontal,\n  isKeyArrowLeft,\n  isKeyArrowUp,\n  isKeyEnd,\n  isKeyHome,\n  isModShift,\n  isShortcutJumpCaret,\n  isShortcutSelectAll,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { MouseDrag } from '../../lib/events/MouseDrag';\n\nexport type FixedIMaskInputProps = IMaskInputProps<HTMLInputElement>;\n\ntype HeadDirection = 'left' | 'right';\ntype SelectionDirection = 'forward' | 'backward' | 'none';\ntype SelectionSet = [number, number, SelectionDirection];\n\ninterface IMaskRefType {\n  maskRef: InputMask<MaskedPatternOptions>;\n  element: HTMLInputElement;\n}\n\nexport const FixedIMaskInput = forwardRefAndName(\n  'FixedIMaskInput',\n  function FixedIMaskInput(props: FixedIMaskInputProps, ref: React.Ref<IMaskRefType | null>) {\n    const { inputRef, ...restProps } = props;\n    const imaskRef = useRef<IMaskRefType>(null);\n    const focused = useRef(false);\n\n    useEffect(() => {\n      if (imaskRef.current?.element) {\n        fillTypedValue();\n        const mouseDrag = MouseDrag.listen(imaskRef.current.element).onMouseDragEnd((e) => {\n          let direction: SelectionDirection = 'none';\n\n          if (\n            mouseDrag.mouseDragStartEvent &&\n            imaskRef.current?.element.selectionStart !== imaskRef.current?.element.selectionEnd\n          ) {\n            direction = mouseDrag.mouseDragStartEvent.pageX > e.pageX ? 'backward' : 'forward';\n          }\n\n          const [start, end] = getSelection();\n          setSelection(start, end, direction);\n        });\n      }\n    }, []);\n\n    useImperativeHandle(ref, () => imaskRef.current, []);\n\n    return (\n      <IMaskInput\n        {...restProps}\n        ref={imaskRef}\n        inputRef={inputRef}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onMouseUp={handleMouseUp}\n        onAccept={handleAccept}\n      />\n    );\n    function getTypedValue() {\n      const { _value = '', displayValue = '' } = imaskRef.current?.maskRef.masked || {};\n      const end = getMaxCaretPosition();\n      const value = _value !== '' || focused.current === true ? displayValue : '';\n\n      return value.slice(0, end);\n    }\n\n    function fillTypedValue() {\n      imaskRef.current?.element.setAttribute('data-typed-value', getTypedValue());\n    }\n\n    function getMaxCaretPosition(): number {\n      const maskChars = [];\n      if (imaskRef.current) {\n        maskChars.push(imaskRef.current.maskRef.masked.placeholderChar);\n        if (imaskRef.current.maskRef.masked.blocks) {\n          (Object.values(imaskRef.current.maskRef.masked.blocks) as Array<{ placeholderChar?: string }>).forEach(\n            ({ placeholderChar }) => placeholderChar && maskChars.push(placeholderChar),\n          );\n        }\n        return imaskRef.current.element.value.split(new RegExp(maskChars.join('|')))[0].length;\n      }\n\n      return Infinity;\n    }\n\n    function normalizeSelection() {\n      const [start, end] = getSelection();\n      const max = getMaxCaretPosition();\n      if (end > max) {\n        setSelection(start, max);\n      }\n    }\n\n    function getNormalizedRange(calc: number | unknown) {\n      return typeof calc === 'number' ? Math.min(getMaxCaretPosition(), Math.max(0, calc)) : 0;\n    }\n\n    function getSelection(): SelectionSet {\n      if (imaskRef.current) {\n        return [\n          imaskRef.current.element.selectionStart || 0,\n          imaskRef.current.element.selectionEnd || 0,\n          imaskRef.current.element.selectionDirection || 'none',\n        ];\n      }\n      return [0, 0, 'none'];\n    }\n\n    function setSelection(...[start, end, direction]: Parameters<HTMLInputElement['setSelectionRange']>) {\n      imaskRef.current?.element.setSelectionRange(\n        getNormalizedRange(start),\n        getNormalizedRange(end),\n        direction || 'none',\n      );\n    }\n\n    function jumpCaret(prev: number, headDirection: HeadDirection) {\n      const word = /а-яa-z0-9_/.valueOf();\n      const wordRegExp = new RegExp(`([${word}])+[\\\\s]*|([^${word}])+`, 'gi');\n      let next = headDirection === 'right' ? prev : 0;\n      imaskRef.current?.element.value.match(wordRegExp)?.reduce<number[]>((s, a) => {\n        const pos = a.length + (s.slice(-1)[0] || 0);\n        if (headDirection === 'right' && next === prev && next < pos) {\n          next = getNormalizedRange(pos);\n        } else if (headDirection === 'left' && prev > pos) {\n          next = getNormalizedRange(pos);\n        }\n        return [...s, pos];\n      }, []);\n      return next;\n    }\n\n    /**\n     * Вычислят положение каретки при управлении клавишами\n     * @param e\n     */\n    function calcSelection(e: React.KeyboardEvent<HTMLInputElement>): SelectionSet {\n      const [start, end, direction] = getSelection();\n      const isSelectionMode = isModShift()(e);\n      let tail = start !== end && direction === 'backward' ? end : start;\n      let head = start !== end && direction === 'backward' ? start : end;\n      const headDirection: HeadDirection = someKeys(isKeyArrowLeft, isKeyArrowUp, isKeyHome)(e) ? 'left' : 'right';\n      const step = isKeyArrowHorizontal(e) ? 1 : Infinity;\n      const increment = headDirection === 'left' ? -step : step;\n      if (isShortcutJumpCaret(e)) {\n        head = jumpCaret(head, headDirection);\n      } else if (head !== tail && !isSelectionMode && isKeyArrowHorizontal(e)) {\n        head = headDirection === 'right' ? Math.max(tail, head) : Math.min(tail, head);\n      } else {\n        head = head + increment;\n      }\n      if (isSelectionMode) {\n        const start = Math.min(tail, head);\n        const end = Math.max(tail, head);\n        return [getNormalizedRange(start), getNormalizedRange(end), end === head ? 'forward' : 'backward'];\n      }\n      tail = head;\n      return [getNormalizedRange(tail), getNormalizedRange(head), 'none'];\n    }\n\n    function handleMouseUp(e: React.MouseEvent<HTMLInputElement>) {\n      normalizeSelection();\n\n      props.onMouseUp?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = true;\n      fillTypedValue();\n      normalizeSelection();\n\n      props.onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = false;\n      fillTypedValue();\n\n      props.onBlur?.(e);\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      fillTypedValue();\n\n      props.onAccept?.(...args);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const nearest = getMaxCaretPosition();\n      if (isShortcutSelectAll(e)) {\n        e.preventDefault();\n        setSelection(0, nearest);\n      } else if (isKeyArrow(e) || isKeyEnd(e) || isKeyHome(e)) {\n        e.preventDefault();\n        const [start, end, direction] = calcSelection(e);\n        setSelection(start, end, direction);\n      } else {\n        const [start, end] = getSelection();\n        const max = getMaxCaretPosition();\n        if (end > max) {\n          setSelection(start, max);\n        }\n      }\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"]}

package/cjs/components/MaskedInput/MaskedInput.d.ts

@@ -1,25 +1,30 @@
-import { InputMask, MaskedPatternOptions } from 'imask';
 import { IMaskInputProps } from 'react-imask';
 import { Nullable } from '../../typings/utility-types';
 import { Input, InputProps, InputType } from '../Input';
 export interface MaskedProps {
     /** Паттерн маски */
     mask: string;
-    /** Символ маски */
+    /**
+     * Символ маски
+     *
+     * @see См. `imaskProps.placeholderChar`
+     * @default _
+     */
     maskChar?: Nullable<string>;
     /**
      * Словарь символов-регулярок для маски
+     *
+     * @see См. `imaskProps.definitions`
      * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
      */
     formatChars?: Record<string, string>;
     /**
-     * Показывать символы маски
+     * Всегда показывать символы маски
      *
-     * null - не показывать
-     * true - показывать всегда
-     * false - показывать по фокусу
+     * @see См. `imaskProps.lazy`
+     * @default false
      */
-    alwaysShowMask?: boolean | null;
+    alwaysShowMask?: boolean;
     /**
      * Пропы для компонента `IMaskInput`
      *
@@ -28,10 +33,6 @@ export interface MaskedProps {
     imaskProps?: IMaskInputProps<HTMLInputElement>;
 }
 export declare type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;
-export interface IMaskRefType {
-    maskRef: InputMask<MaskedPatternOptions>;
-    element: HTMLInputElement;
-}
 export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask'> {
     type?: MaskInputType;
 }