@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/ErrorBoundary/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import RenderError from './RenderError';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    render() {
+        const { error } = this.state;
+        const { children, fallback, title, description } = this.props;
+        if (error) {
+            if (typeof fallback !== 'undefined') {
+                return fallback;
+            }
+            return React.createElement(RenderError, { error: error, title: title, description: description });
+        }
+        return children;
+    }
+}
+export default ErrorBoundary;

package/esm/Grid/index.js

@@ -0,0 +1,38 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { resolveSpacing } from '../utils/spacing';
+const StyledGrid = styled.div `
+  display: grid;
+  grid-template-columns: ${({ $template }) => $template};
+  gap: ${({ theme, $gap }) => resolveSpacing(theme, $gap)};
+  ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${resolveSpacing(theme, $rowGap)};` : ''}
+  align-items: ${({ $align }) => $align !== null && $align !== void 0 ? $align : 'stretch'};
+  min-width: 0;
+`;
+const getTemplate = (minColumnWidth, columns) => {
+    if (minColumnWidth) {
+        // min(…, 100%): a column wider than the container does not overflow it
+        return `repeat(auto-fit, minmax(min(${minColumnWidth}, 100%), 1fr))`;
+    }
+    // minmax(0, 1fr): a long word or a wide child does not stretch its column
+    return typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns;
+};
+/**
+ * The grid of cells with the same gap. The children are the cells: no wrappers for the items
+ */
+const Grid = (props, ref) => {
+    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align"]);
+    return (React.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, ref: ref }), children));
+};
+export default React.forwardRef(Grid);

package/esm/Highlighted/HighlightedContainer.js

@@ -0,0 +1,17 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+const HighlightedContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement("span", Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(HighlightedContainer);

package/esm/Highlighted/HighlightedMark.js

@@ -0,0 +1,25 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledMark = styled.mark `
+  background: none;
+  font-weight: 700;
+  color: ${({ theme }) => theme.isDark
+    ? theme.color.accentPrimary.lighten(10).toString()
+    : theme.color.accentPrimary.darken(30).toString()};
+`;
+const HighlightedMark = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledMark, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(HighlightedMark);

package/esm/Highlighted/HighlightedText.js

@@ -0,0 +1,17 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+const HighlightedText = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement("span", Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(HighlightedText);

package/esm/Highlighted/index.js

@@ -0,0 +1,51 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import Container from './HighlightedContainer';
+import Mark from './HighlightedMark';
+import Text from './HighlightedText';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+export const escapeRegex = (pattern) => pattern.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+/**
+ * The component allows you to highlight text matches in a string
+ */
+const Highlighted = (props, ref) => {
+    const _a = useThemeProps('Highlighted', props), { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = _a, nativeProps = __rest(_a, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
+    const patterns = React.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
+        .filter(h => h.trim() !== '')
+        // Longest first: the alternation takes the first matching pattern,
+        // so «star» must not win over «starfish»
+        .slice()
+        .sort((a, b) => b.length - a.length)
+        .map(escapeRegex), [highlight]);
+    const regex = React.useMemo(() => new RegExp(`(${patterns.join('|')})`, caseSensitive ? 'g' : 'gi'), [patterns, caseSensitive]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || Mark,
+        Text: (overrides === null || overrides === void 0 ? void 0 : overrides.Text) || Text,
+    }), [overrides]);
+    const parts = React.useMemo(() => {
+        if (disabledHighlighting || patterns.length === 0) {
+            return [text];
+        }
+        // With the capturing group, split puts the matches at the odd indexes
+        return text.split(regex);
+    }, [disabledHighlighting, patterns.length, regex, text]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }), parts.map((part, i) => {
+        if (part === '') {
+            return null;
+        }
+        return i % 2 === 1 ? (React.createElement(overridesMap.Mark, { key: i }, part)) : (React.createElement(overridesMap.Text, { key: i }, part));
+    })));
+};
+export default React.forwardRef(Highlighted);

package/esm/Image/index.js

@@ -0,0 +1,40 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Img = styled.img `
+  object-fit: cover;
+  object-position: center center;
+  filter: ${({ theme }) => (theme.isDark ? 'brightness(0.86)' : 'none')};
+`;
+const Image = (props, ref) => {
+    const { src, thumb } = props, otherProps = __rest(props, ["src", "thumb"]);
+    const srcRef = React.useRef(null);
+    const [currentSrc, setSrc] = React.useState(typeof thumb === 'string' ? thumb : src);
+    const isMountedRef = React.useRef(true);
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        if (typeof thumb === 'string' && srcRef.current !== thumb) {
+            srcRef.current = thumb;
+            const imageElement = new window.Image();
+            imageElement.onload = () => {
+                if (isMountedRef.current) {
+                    setSrc(src);
+                }
+            };
+            imageElement.src = src;
+        }
+    }, [src, thumb]);
+    React.useEffect(() => () => void (isMountedRef.current = false), []);
+    return React.createElement(Img, Object.assign({ src: currentSrc }, otherProps, { ref: ref }));
+};
+export default React.forwardRef(Image);

package/esm/LoadingIndicator/LoadingOverlay.js

@@ -0,0 +1,35 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import SpinnerCircle, { DEFAULT_SIZE, toCssSize } from './SpinnerCircle';
+const Container = styled.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+/**
+ * Covers the nearest positioned ancestor (`position: relative` etc.) and centers the spinner in it
+ */
+const LoadingOverlay = (props, ref) => {
+    const { size = DEFAULT_SIZE } = props, nativeProps = __rest(props, ["size"]);
+    return (
+    // Announced by screen readers; the label can be replaced by the props
+    React.createElement(Container, Object.assign({ role: "status", "aria-label": "Loading" }, nativeProps, { ref: ref }),
+        React.createElement(SpinnerCircle, { "$size": toCssSize(size) })));
+};
+export default React.forwardRef(LoadingOverlay);

package/esm/LoadingIndicator/Spinner.js

@@ -0,0 +1,53 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import SpinnerCircle, { DEFAULT_SIZE, toCssSize } from './SpinnerCircle';
+import LoadingOverlay from './LoadingOverlay';
+const Container = styled.span `
+  justify-content: center;
+  align-items: center;
+  ${({ $fill }) => $fill
+    ? css `
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+        `
+    : css `
+          display: inline-flex;
+          vertical-align: middle;
+        `}
+`;
+/**
+ * Inline loading spinner: takes place in the layout, e.g. inside a button, a field or a list
+ */
+const Spinner = (props, ref) => {
+    const { size = DEFAULT_SIZE, fill = true } = props, nativeProps = __rest(props, ["size", "fill"]);
+    return (
+    // Announced by screen readers; the label can be replaced by the props
+    React.createElement(Container, Object.assign({ role: "status", "aria-label": "Loading" }, nativeProps, { "$fill": fill, ref: ref }),
+        React.createElement(SpinnerCircle, { "$size": toCssSize(size) })));
+};
+const SpinnerWithRef = React.forwardRef(Spinner);
+SpinnerWithRef.displayName = 'Spinner';
+/**
+ * @deprecated Use `Spinner` instead
+ */
+export const StaticLoadingIndicator = SpinnerWithRef;
+/**
+ * @deprecated Use `LoadingOverlay` from `@via-profit/ui-kit/LoadingIndicator` instead
+ */
+export const LoadingIndicator = LoadingOverlay;
+export default SpinnerWithRef;

package/esm/LoadingIndicator/SpinnerCircle.js

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+// The size of the spinner before the `size` property (2em plus the ring), so nothing changes
+export const DEFAULT_SIZE = '2.4em';
+export const toCssSize = (size) => (typeof size === 'number' ? `${size}px` : size);
+const spin = keyframes `
+    to {
+        transform: rotate(360deg);
+    }
+`;
+/**
+ * The rotating circle shared by <Spinner> and <LoadingOverlay>.
+ * A span, so the spinner can be placed inside phrasing content (e.g. a button)
+ */
+const SpinnerCircle = styled.span `
+  display: block;
+  box-sizing: border-box;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  /* The ring width follows the size, so the proportions stay the same */
+  border: calc(${({ $size }) => $size} * 0.08) solid
+    ${({ theme }) => theme.color.surface.darken(30).toString()};
+  border-top-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
+`;
+export default SpinnerCircle;

package/esm/LoadingIndicator/index.js

@@ -0,0 +1,6 @@
+import Spinner from './Spinner';
+export { default as Spinner } from './Spinner';
+export { default as LoadingOverlay } from './LoadingOverlay';
+// Deprecated aliases of the previous names
+export { StaticLoadingIndicator, LoadingIndicator } from './Spinner';
+export default Spinner;

package/esm/MaskedField/index.js

@@ -0,0 +1,74 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useMasked } from './useMasked';
+import TextField from '../TextField';
+export * from './useMasked';
+const MaskedField = (props, ref) => {
+    const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
+    const masked = useMasked();
+    const parseInputFn = parseInput || masked.parseInput;
+    const inputRef = React.useRef(null);
+    const lastPropValue = React.useRef(propValue);
+    const getMask = React.useCallback((input) => (typeof mask === 'function' ? mask(input) : mask), [mask]);
+    const getInputValue = React.useCallback((v) => {
+        var _a;
+        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.useState(getInputValue(propValue || ''));
+    // Обновление при изменении внешнего значения
+    React.useEffect(() => {
+        if (lastPropValue.current !== propValue) {
+            lastPropValue.current = propValue;
+            setInputValue(getInputValue(propValue || ''));
+        }
+    }, [propValue, getInputValue]);
+    const handleOnChange = React.useCallback(event => {
+        var _a;
+        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);
+        // The input shows finalText after the render anyway,
+        // this makes the event consistent with the payload
+        event.currentTarget.value = finalText;
+        onChange({
+            caret: formatted.caret,
+            isValid: formatted.isValid,
+            text: finalText,
+        }, event);
+        // Устанавливаем caret после рендера
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(formatted.caret, formatted.caret);
+        });
+    }, [getMask, parseInputFn, masked, transform, onChange]);
+    const setInputRef = React.useCallback((elem) => {
+        inputRef.current = elem;
+        if (typeof nativeProps.inputRef === 'function') {
+            nativeProps.inputRef(elem);
+        }
+        else if (nativeProps.inputRef && typeof nativeProps.inputRef === 'object') {
+            nativeProps.inputRef.current = elem;
+        }
+    }, [nativeProps]);
+    return (React.createElement(TextField, Object.assign({ ref: ref }, nativeProps, { 
+        // The caret can be moved only in text-like inputs, `tel` also brings up the phone keypad
+        type: nativeProps.type === 'tel' ? 'tel' : 'text', value: inputValue, onChange: handleOnChange, inputRef: setInputRef })));
+};
+export default React.forwardRef(MaskedField);

package/esm/MaskedField/templates.js

@@ -0,0 +1,80 @@
+export const kpp = [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/];
+export const snils = [
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+];
+/**
+ * 13 symbols
+ */
+export const ogrn = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+/**
+ * 15 symbols
+ */
+export const ogrnip = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+export const vin = [
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    '-',
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    '-',
+    /[A-HJ-NPR-Z0-9]/i,
+    /[A-HJ-NPR-Z0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+    /[0-9]/i,
+];

package/esm/MaskedField/useMasked.js

@@ -0,0 +1,106 @@
+import React from 'react';
+export const useMasked = () => {
+    const parseInput = React.useCallback((value, mask, caret) => {
+        const data = {
+            text: '',
+            caret: 0,
+        };
+        // Whitespaces are skipped in place, not stripped beforehand:
+        // charIndex must stay the index in the original value to be compared with the caret
+        value.split('').forEach((character, charIndex) => {
+            if (/\s/.test(character)) {
+                return;
+            }
+            const isMatch = mask.some(pattern => {
+                if (typeof pattern === 'string') {
+                    return character === pattern && character;
+                }
+                if (pattern instanceof RegExp) {
+                    return new RegExp(pattern).test(character);
+                }
+                return false;
+            });
+            if (isMatch) {
+                data.text = `${data.text}${character}`;
+                if (charIndex < (caret || 0)) {
+                    data.caret += 1;
+                }
+            }
+        });
+        const result = Object.assign({}, data);
+        return result;
+    }, []);
+    const formatParsedInput = React.useCallback((parsedValue, mask, caret) => {
+        const data = {
+            text: '',
+            caret,
+            isValid: false,
+            charIndex: 0,
+        };
+        if (parsedValue === '') {
+            return { text: '', caret, isValid: false };
+        }
+        const requiredCount = mask.filter(pattern => pattern instanceof RegExp).length;
+        let filledCount = 0;
+        let patternIndex = 0;
+        for (patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            if (data.charIndex >= parsedValue.length) {
+                break;
+            }
+            const char = parsedValue[data.charIndex];
+            const pattern = mask[patternIndex];
+            // A mask literal (e.g. a shifted separator) got into a RegExp position:
+            // drop the char and try the same pattern with the next one, otherwise the rest of input is lost
+            if (pattern instanceof RegExp && !new RegExp(pattern).test(char) && mask.includes(char)) {
+                if (data.charIndex < (caret || 0)) {
+                    data.caret -= 1;
+                }
+                data.charIndex += 1;
+                patternIndex -= 1;
+                continue;
+            }
+            // If char is correct (matched with Regexp pattern)
+            // then accept char into text
+            // and increment the charIndex and caret
+            if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
+                data.text = `${data.text}${char}`;
+                data.charIndex += 1;
+                filledCount += 1;
+            }
+            // If char is correct (equal with pattern string)
+            // then accept char into text and increment the charIndex.
+            // The caret is not changed: this char is already counted by parseInput
+            if (typeof pattern === 'string' && pattern === char) {
+                data.text = `${data.text}${char}`;
+                data.charIndex += 1;
+            }
+            // If pattern is a string and char is not correct
+            // (not equal with pattern string)
+            // then accept pattern string into text and increment caret
+            if (typeof pattern === 'string' && pattern !== char) {
+                data.text = `${data.text}${pattern}`;
+                if (data.charIndex < (caret || 0)) {
+                    data.caret += 1;
+                }
+            }
+        }
+        const result = {
+            text: data.text,
+            // Extra input beyond the mask is dropped, the caret must not point past the text
+            caret: Math.min(data.caret, data.text.length),
+            // Valid when every RegExp position of the mask is filled
+            isValid: requiredCount > 0 && filledCount === requiredCount,
+        };
+        return result;
+    }, []);
+    const parseAndFormat = React.useCallback((inputValue, mask, caret) => {
+        const parsed = parseInput(inputValue, mask, caret);
+        return formatParsedInput(parsed.text, mask, parsed.caret);
+    }, [formatParsedInput, parseInput]);
+    return {
+        formatParsedInput,
+        parseAndFormat,
+        parseInput,
+    };
+};
+export default useMasked;