@via-profit/ui-kit 0.1.0-rc.1

package/dist/Calendar/use-calendar.js

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendar = void 0;
+const react_1 = __importDefault(require("react"));
+const calendarReducer = (state, action) => {
+    switch (action.type) {
+        case 'partial':
+            return Object.assign(Object.assign({}, state), action.payload);
+        case 'date': {
+            return Object.assign(Object.assign({}, state), { date: action.payload });
+        }
+        default:
+            return state;
+    }
+};
+const calendarDefaults = {
+    date: new Date(),
+    minDate: new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0),
+    maxDate: new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0),
+    locale: 'ru-RU',
+    weekStartDay: 'monday',
+    displayLeadingZero: false,
+};
+const useCalendar = (props) => {
+    const [state, dispatch] = react_1.default.useReducer(calendarReducer, Object.assign(Object.assign({}, calendarDefaults), props));
+    const { date, minDate, maxDate, locale, weekStartDay, displayLeadingZero } = state;
+    const isSameDay = react_1.default.useCallback((a, b) => a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate(), []);
+    const isToday = react_1.default.useCallback((dateValue) => isSameDay(dateValue, new Date()), [isSameDay]);
+    const isDisabled = react_1.default.useCallback((dateValue) => {
+        const min = minDate.getTime() || 0;
+        const max = maxDate.getTime() || Number.MAX_VALUE;
+        const current = dateValue.getTime();
+        return current > max || current < min;
+    }, [maxDate, minDate]);
+    const calculateWeekNumber = react_1.default.useCallback((dt) => {
+        const tdt = new Date(dt.valueOf());
+        const dayn = (dt.getDay() + 6) % 7;
+        tdt.setDate(tdt.getDate() - dayn + 3);
+        const firstThursday = tdt.valueOf();
+        tdt.setMonth(0, 1);
+        if (tdt.getDay() !== 4) {
+            tdt.setMonth(0, 1 + ((4 - tdt.getDay() + 7) % 7));
+        }
+        return 1 + Math.ceil((firstThursday - tdt.getTime()) / 604800000);
+    }, []);
+    const weekDaysMap = react_1.default.useMemo(() => ({
+        sunday: 0,
+        monday: 1,
+        tuesday: 2,
+        wednesday: 3,
+        thursday: 4,
+        friday: 5,
+        saturday: 6,
+    }), []);
+    const weeks = react_1.default.useMemo(() => {
+        const list = [];
+        const startOfDate = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
+        const lastOfDate = new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0);
+        const startDayNum = weekDaysMap[weekStartDay];
+        const week = new Set();
+        const d = new Date(date);
+        for (let dateNum = 1; dateNum < lastOfDate.getDate() + 1; dateNum++) {
+            d.setDate(dateNum);
+            // if is start of the week then set a new week
+            if (d.getDay() === startDayNum) {
+                const days = [...week].map(day => ({
+                    date: day,
+                    isToday: isToday(day),
+                    isDisabled: isDisabled(day),
+                }));
+                if (days.length) {
+                    list.push({
+                        weekNumber: calculateWeekNumber(days[0].date),
+                        days,
+                    });
+                }
+                week.clear();
+            }
+            week.add(new Date(d));
+            // if is last of iteration
+            if (dateNum === lastOfDate.getDate()) {
+                const days = [...week].map(day => ({
+                    date: day,
+                    isToday: isToday(day),
+                    isDisabled: isDisabled(day),
+                }));
+                if (days.length) {
+                    list.push({
+                        weekNumber: calculateWeekNumber(days[0].date),
+                        days,
+                    });
+                }
+                week.clear();
+            }
+        }
+        // Fill the prev days
+        if (list[0].days.length < 7) {
+            const fillDays = 7 - list[0].days.length;
+            const days = list[0].days;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(startOfDate.getFullYear(), startOfDate.getMonth(), -fillIndex, 0, 0, 0, 0);
+                days.unshift({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list[0] = {
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            };
+        }
+        // fill the next days
+        if (list[list.length - 1].days.length < 7) {
+            const fillDays = 7 - list[list.length - 1].days.length;
+            const days = list[list.length - 1].days;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(lastOfDate.getFullYear(), lastOfDate.getMonth() + 1, fillIndex + 1, 0, 0, 0, 0);
+                days.push({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list[list.length - 1] = {
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            };
+        }
+        // if weeks length is 4 only
+        // then prepend week
+        if (list.length === 4) {
+            const fillDays = 7;
+            const days = [];
+            const firstWeek = list[0];
+            const firstDate = firstWeek.days[0].date;
+            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
+                const day = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() - fillIndex, 0, 0, 0, 0);
+                days.unshift({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list.unshift({
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            });
+        }
+        // if weeks length is 5 only
+        // then append week
+        if (list.length === 5) {
+            const lastWeek = list[list.length - 1];
+            const lastDate = lastWeek.days[lastWeek.days.length - 1].date;
+            const days = [];
+            for (let fillIndex = 0; fillIndex < 7; fillIndex++) {
+                const day = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + fillIndex + 1, 0, 0, 0, 0);
+                days.push({
+                    date: day,
+                    isDisabled: isDisabled(day),
+                    isToday: isToday(day),
+                });
+            }
+            list.push({
+                days,
+                weekNumber: calculateWeekNumber(days[0].date),
+            });
+        }
+        return list;
+    }, [date, weekDaysMap, weekStartDay, isToday, isDisabled, calculateWeekNumber]);
+    const setDate = react_1.default.useCallback((value) => {
+        dispatch({
+            type: 'date',
+            payload: value,
+        });
+    }, []);
+    return {
+        isSameDay,
+        isToday,
+        setDate,
+        dispatch,
+        minDate,
+        maxDate,
+        weeks,
+        weekStartDay,
+        locale,
+        displayLeadingZero,
+        date,
+    };
+};
+exports.useCalendar = useCalendar;
+exports.default = exports.useCalendar;

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DatePicker: React.FC;
+export default DatePicker;

package/dist/DatePicker/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const DatePicker = () => react_1.default.createElement(react_1.default.Fragment, null, "Date picker");
+exports.default = DatePicker;

package/dist/ErrorBoundary/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ErrorBoundaryComponentProps {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+}
+interface State {
+    readonly error: Error | null;
+    readonly errorInfo: React.ErrorInfo | null;
+}
+interface Props {
+    readonly children: React.ReactNode | React.ReactNode[];
+    readonly styles?: React.CSSProperties;
+}
+declare class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.JSX.Element;
+}
+export default ErrorBoundary;

package/dist/ErrorBoundary/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: theme.spacing(1);
+  border-radius: inherit;
+  border: 1px solid rgb(92, 0, 0);
+  background-color: rgb(41, 0, 0);
+`;
+const Inner = styled_1.default.div `
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+`;
+const Title = styled_1.default.h1 `
+  margin-top: 0;
+`;
+const ErrorBox = styled_1.default.div `
+  color: rgb(255, 128, 128);
+  padding: 1rem;
+`;
+const ErrorMessage = styled_1.default.pre `
+  max-height: 300;
+  overflow: auto;
+`;
+const CallStack = styled_1.default.pre `
+  opacity: 0.8;
+  max-height: 300;
+  overflow: auto;
+  white-space: break-spaces;
+`;
+class ErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+            errorInfo: null,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error,
+            errorInfo,
+        });
+    }
+    render() {
+        const { error } = this.state;
+        const { children, styles } = this.props;
+        if (error) {
+            return (react_1.default.createElement(Container, { style: styles },
+                react_1.default.createElement(Inner, null, process.env.NODE_ENV === 'development' ? (react_1.default.createElement(ErrorBox, null,
+                    react_1.default.createElement(Title, null, "Something went wrong"),
+                    react_1.default.createElement(ErrorMessage, null, error.message),
+                    react_1.default.createElement("h2", null, "Callstack:"),
+                    react_1.default.createElement(CallStack, null, error.stack))) : (react_1.default.createElement(ErrorBox, null,
+                    react_1.default.createElement(Title, null, "It looks like our server has broken down"),
+                    react_1.default.createElement("p", null, "We're already fixing it. We are waiting for you later"))))));
+        }
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+}
+exports.default = ErrorBoundary;

package/dist/Image/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    readonly src: string;
+    readonly thumb?: string | null;
+}
+declare const _default: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+export default _default;

package/dist/Image/index.js

@@ -0,0 +1,45 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Img = styled_1.default.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_1.default.useRef(null);
+    const [currentSrc, setSrc] = react_1.default.useState(typeof thumb === 'string' ? thumb : src);
+    const isMountedRef = react_1.default.useRef(true);
+    react_1.default.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_1.default.useEffect(() => () => void (isMountedRef.current = false), []);
+    return react_1.default.createElement(Img, Object.assign({ src: currentSrc }, otherProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(Image);

package/dist/MaskedField/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Mask, FormatParsedPayload, ParseInput } from './useMasked';
+import { TextFieldProps } from '../TextField';
+export type GetMask = (input: string) => Mask;
+export interface Payload {
+    readonly text: string;
+    readonly caret: number;
+    readonly isValid: boolean;
+}
+export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    /**
+     * Field value
+     */
+    readonly value: string | null;
+    /**
+     * An array of RegExp or a function that returns an array of RegExp
+     */
+    readonly mask: Mask | GetMask;
+    /**
+     * Function will be called when field value was changed
+     */
+    readonly onChange: (payload: FormatParsedPayload) => void;
+    /**
+     * If you are not using a simple mask, you can provide a function to analyze the input value
+     */
+    readonly parseInput?: ParseInput;
+    /**
+     * You can transform the output value before using it
+     */
+    readonly transform?: (value: string) => string;
+}
+declare const _default: React.ForwardRefExoticComponent<MaskedFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/MaskedField/index.js

@@ -0,0 +1,63 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const useMasked_1 = require("./useMasked");
+const TextField_1 = __importDefault(require("../TextField"));
+const MaskedField = (props, ref) => {
+    const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
+    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 [inputValue, setInputValue] = react_1.default.useState(() => {
+        var _a;
+        const mask = getMask(propValue || '');
+        const parsed = parseInputFn(propValue || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const { text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
+        return text;
+    });
+    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);
+        onChange({
+            caret,
+            isValid,
+            text: transformedText,
+        });
+        setTimeout(() => {
+            var _a;
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
+        }, 15);
+    }, [getMask, masked, transform, onChange, parseInputFn]);
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { inputRef: textInputRef, type: "text", value: inputValue, onChange: handleOnChange })));
+};
+exports.default = react_1.default.forwardRef(MaskedField);

package/dist/MaskedField/templates.d.ts

@@ -0,0 +1,11 @@
+export declare const kpp: (string | RegExp)[];
+export declare const snils: (string | RegExp)[];
+/**
+ * 13 symbols
+ */
+export declare const ogrn: (string | RegExp)[];
+/**
+ * 15 symbols
+ */
+export declare const ogrnip: (string | RegExp)[];
+export declare const vin: (string | RegExp)[];

package/dist/MaskedField/templates.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vin = exports.ogrnip = exports.ogrn = exports.snils = exports.kpp = void 0;
+exports.kpp = [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/];
+exports.snils = [
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+];
+/**
+ * 13 symbols
+ */
+exports.ogrn = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+/**
+ * 15 symbols
+ */
+exports.ogrnip = [
+    /[1-9]/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+exports.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/dist/MaskedField/useMasked.d.ts

@@ -0,0 +1,18 @@
+export type Mask = (RegExp | string)[];
+export interface ParseInputPayload {
+    readonly text: string;
+    readonly caret: number;
+}
+export interface FormatParsedPayload {
+    readonly text: string;
+    readonly caret: number;
+    readonly isValid: boolean;
+}
+export type ParseInput = (value: string, mask: Mask, caret?: number) => ParseInputPayload;
+export type FormatParsed = (parsedValue: string, mask: Mask, caret: number) => FormatParsedPayload;
+export declare const useMasked: () => {
+    formatParsedInput: FormatParsed;
+    parseAndFormat: (inputValue: string, mask: Mask, caret?: number) => FormatParsedPayload;
+    parseInput: ParseInput;
+};
+export default useMasked;

package/dist/MaskedField/useMasked.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMasked = void 0;
+const react_1 = __importDefault(require("react"));
+const useMasked = () => {
+    const parseInput = react_1.default.useCallback((value, mask, caret) => {
+        const data = {
+            text: '',
+            caret: 0,
+        };
+        value
+            .replace(/\s/, '')
+            .split('')
+            .forEach((character, charIndex) => {
+            const isMatch = mask.some(pattern => {
+                if (typeof pattern === 'string') {
+                    // return false;
+                    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_1.default.useCallback((parsedValue, mask, caret) => {
+        const data = {
+            text: '',
+            caret,
+            isValid: false,
+            charIndex: 0,
+        };
+        if (parsedValue === '') {
+            return data;
+        }
+        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            if (data.charIndex >= parsedValue.length) {
+                break;
+            }
+            const char = parsedValue[data.charIndex];
+            const pattern = mask[patternIndex];
+            // 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;
+                data.caret += 1;
+            }
+            // If char is correct (equal with pattern string)
+            // then accept char into text
+            // and increment the charIndex and caret
+            if (typeof pattern === 'string' && pattern === char) {
+                data.text = `${data.text}${char}`;
+                data.charIndex += 1;
+                data.caret += 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}`;
+                data.caret += 1;
+            }
+        }
+        const result = {
+            text: data.text,
+            caret: data.caret,
+            isValid: data.text.length >= mask.length,
+        };
+        return result;
+    }, []);
+    const parseAndFormat = react_1.default.useCallback((inputValue, mask, caret) => {
+        const parsed = parseInput(inputValue, mask, caret);
+        return formatParsedInput(parsed.text, mask, parsed.caret);
+    }, [formatParsedInput, parseInput]);
+    return {
+        formatParsedInput,
+        parseAndFormat,
+        parseInput,
+    };
+};
+exports.useMasked = useMasked;
+exports.default = exports.useMasked;

package/dist/Menu/MenuItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly style: React.CSSProperties;
+    readonly index: number;
+    readonly setRowHeight: (index: number, height: number) => void;
+    readonly selected: boolean;
+    readonly hovered: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;