@via-profit/ui-kit 0.2.6 → 0.4.0

package/Grid/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Spacing } from '../utils/spacing';
+export type { Spacing };
+export type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The adaptive grid: as many columns as fit, every column is not narrower than this width.
+     * On a narrow screen the columns become one column by themselves, without breakpoints.\
+     * Wins over `columns`
+     */
+    readonly minColumnWidth?: string;
+    /**
+     * A number — that many equal columns, a string — the `grid-template-columns` value
+     * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
+     * **Default:** `1`
+     */
+    readonly columns?: number | string;
+    /**
+     * The gap between the cells: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing;
+    /**
+     * The gap between the rows, if it differs from `gap`
+     */
+    readonly rowGap?: Spacing;
+    /**
+     * The vertical alignment of the cells in a row (`align-items`)\
+     * **Default:** `stretch`
+     */
+    readonly align?: React.CSSProperties['alignItems'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The adaptive grid: as many columns as fit, every column is not narrower than this width.
+     * On a narrow screen the columns become one column by themselves, without breakpoints.\
+     * Wins over `columns`
+     */
+    readonly minColumnWidth?: string | undefined;
+    /**
+     * A number — that many equal columns, a string — the `grid-template-columns` value
+     * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
+     * **Default:** `1`
+     */
+    readonly columns?: string | number | undefined;
+    /**
+     * The gap between the cells: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing | undefined;
+    /**
+     * The gap between the rows, if it differs from `gap`
+     */
+    readonly rowGap?: Spacing | undefined;
+    /**
+     * The vertical alignment of the cells in a row (`align-items`)\
+     * **Default:** `stretch`
+     */
+    readonly align?: import("csstype").Property.AlignItems | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Grid/index.js

@@ -0,0 +1,43 @@
+"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 spacing_1 = require("../utils/spacing");
+const StyledGrid = styled_1.default.div `
+  display: grid;
+  grid-template-columns: ${({ $template }) => $template};
+  gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
+  ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${(0, spacing_1.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_1.default.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(Grid);

package/Highlighted/index.d.ts

@@ -48,7 +48,7 @@ export interface HighlightedOverrides {
      */
     readonly Mark?: React.ComponentType<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
     /**
-     * Text element (HTML <span>)regex
+     * Text element (HTML <span>)
      */
     readonly Text?: React.ComponentType<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
 }

package/Highlighted/index.js

@@ -29,6 +29,10 @@ const Highlighted = (props, ref) => {
     const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
     const patterns = react_1.default.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(exports.escapeRegex), [highlight]);
     const regex = react_1.default.useMemo(() => new RegExp(`(${patterns.join('|')})`, caseSensitive ? 'g' : 'gi'), [patterns, caseSensitive]);
     const overridesMap = react_1.default.useMemo(() => ({
@@ -36,18 +40,18 @@ const Highlighted = (props, ref) => {
         Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || HighlightedMark_1.default,
         Text: (overrides === null || overrides === void 0 ? void 0 : overrides.Text) || HighlightedText_1.default,
     }), [overrides]);
-    const renderParts = react_1.default.useCallback(() => {
+    const parts = react_1.default.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_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }), parts.map((part, i) => {
+        if (part === '') {
             return null;
         }
-        return text.split(regex).map((part, i) => {
-            const isMatch = part.match(regex) !== null;
-            return isMatch ? (react_1.default.createElement(overridesMap.Mark, { key: i }, part)) : (react_1.default.createElement(overridesMap.Text, { key: i }, part));
-        });
-    }, [disabledHighlighting, patterns.length, regex, text, overridesMap]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
-        disabledHighlighting && react_1.default.createElement(overridesMap.Text, null, text),
-        !disabledHighlighting && patterns.length === 0 && (react_1.default.createElement(overridesMap.Text, null, text)),
-        renderParts()));
+        return i % 2 === 1 ? (react_1.default.createElement(overridesMap.Mark, { key: i }, part)) : (react_1.default.createElement(overridesMap.Text, { key: i }, part));
+    })));
 };
 exports.default = react_1.default.forwardRef(Highlighted);

package/LoadingIndicator/LoadingOverlay.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Spinner diameter: a number is in pixels, a string is any CSS length (`'1em'`, `'3rem'`)\
+     * \
+     * **Default**: `'2.4em'`
+     */
+    readonly size?: number | string;
+}
+declare const _default: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/LoadingIndicator/LoadingOverlay.js

@@ -0,0 +1,63 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const SpinnerCircle_1 = __importStar(require("./SpinnerCircle"));
+const Container = styled_1.default.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 = SpinnerCircle_1.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_1.default, { "$size": (0, SpinnerCircle_1.toCssSize)(size) })));
+};
+exports.default = React.forwardRef(LoadingOverlay);

package/LoadingIndicator/Spinner.d.ts

@@ -1,6 +1,35 @@
 import * as React from 'react';
-type Props = React.HTMLAttributes<HTMLDivElement>;
-export declare const LoadingIndicator: React.ForwardRefRenderFunction<HTMLDivElement, Props>;
-export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import { LoadingOverlayProps } from './LoadingOverlay';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Spinner diameter: a number is in pixels, a string is any CSS length (`'1em'`, `'3rem'`)\
+     * \
+     * **Default**: `'2.4em'`
+     */
+    readonly size?: number | string;
+    /**
+     * If `true`, the spinner takes all the free space of a flex parent and is centered in it
+     * (e.g. in place of an empty list). If `false`, it takes only its own size\
+     * \
+     * **Default**: `true`
+     */
+    readonly fill?: boolean;
+}
+declare const SpinnerWithRef: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `Spinner` instead
+ */
+export declare const StaticLoadingIndicator: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * @deprecated Use `SpinnerProps` instead
+ */
+export type StaticLoadingIndicatorProps = SpinnerProps;
+/**
+ * @deprecated Use `LoadingOverlay` from `@via-profit/ui-kit/LoadingIndicator` instead
+ */
+export declare const LoadingIndicator: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `LoadingOverlayProps` instead
+ */
+export type LoadingIndicatorProps = LoadingOverlayProps;
+export default SpinnerWithRef;

package/LoadingIndicator/Spinner.js

@@ -22,50 +22,61 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 });
-exports.StaticLoadingIndicator = exports.LoadingIndicator = void 0;
+exports.LoadingIndicator = exports.StaticLoadingIndicator = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
-const Container = styled_1.default.div `
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const spin = (0, react_1.keyframes) `
-    to {
-        transform: rotate(360deg);
-    }
-`;
-const SpinLoader = styled_1.default.div `
-  width: 2em;
-  height: 2em;
-  border: 0.187em 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;
-`;
-const LoadingIndicator = (props, ref) => (React.createElement(Container, Object.assign({}, props, { ref: ref }),
-    React.createElement(SpinLoader, null)));
-exports.LoadingIndicator = LoadingIndicator;
-const StaticLoadingIndicatorContainer = styled_1.default.span `
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
+const SpinnerCircle_1 = __importStar(require("./SpinnerCircle"));
+const LoadingOverlay_1 = __importDefault(require("./LoadingOverlay"));
+const Container = styled_1.default.span `
   justify-content: center;
   align-items: center;
+  ${({ $fill }) => $fill
+    ? (0, react_1.css) `
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+        `
+    : (0, react_1.css) `
+          display: inline-flex;
+          vertical-align: middle;
+        `}
 `;
-exports.StaticLoadingIndicator = React.forwardRef((props, ref) => (React.createElement(StaticLoadingIndicatorContainer, Object.assign({}, props, { ref: ref }),
-    React.createElement(SpinLoader, null))));
-exports.StaticLoadingIndicator.displayName = 'StaticLoadingIndicator';
-exports.default = React.forwardRef(exports.LoadingIndicator);
+/**
+ * Inline loading spinner: takes place in the layout, e.g. inside a button, a field or a list
+ */
+const Spinner = (props, ref) => {
+    const { size = SpinnerCircle_1.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_1.default, { "$size": (0, SpinnerCircle_1.toCssSize)(size) })));
+};
+const SpinnerWithRef = React.forwardRef(Spinner);
+SpinnerWithRef.displayName = 'Spinner';
+/**
+ * @deprecated Use `Spinner` instead
+ */
+exports.StaticLoadingIndicator = SpinnerWithRef;
+/**
+ * @deprecated Use `LoadingOverlay` from `@via-profit/ui-kit/LoadingIndicator` instead
+ */
+exports.LoadingIndicator = LoadingOverlay_1.default;
+exports.default = SpinnerWithRef;

package/LoadingIndicator/SpinnerCircle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const DEFAULT_SIZE = "2.4em";
+export declare const toCssSize: (size: number | string) => string;
+/**
+ * The rotating circle shared by <Spinner> and <LoadingOverlay>.
+ * A span, so the spinner can be placed inside phrasing content (e.g. a button)
+ */
+declare const SpinnerCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    readonly $size: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default SpinnerCircle;

package/LoadingIndicator/SpinnerCircle.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCssSize = exports.DEFAULT_SIZE = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+// The size of the spinner before the `size` property (2em plus the ring), so nothing changes
+exports.DEFAULT_SIZE = '2.4em';
+const toCssSize = (size) => (typeof size === 'number' ? `${size}px` : size);
+exports.toCssSize = toCssSize;
+const spin = (0, react_1.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_1.default.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;
+`;
+exports.default = SpinnerCircle;

package/LoadingIndicator/index.d.ts

@@ -1,3 +1,8 @@
-import LoadingIndicator from './Spinner';
-export * from './Spinner';
-export default LoadingIndicator;
+import Spinner from './Spinner';
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { default as LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps } from './LoadingOverlay';
+export { StaticLoadingIndicator, LoadingIndicator } from './Spinner';
+export type { StaticLoadingIndicatorProps, LoadingIndicatorProps } from './Spinner';
+export default Spinner;

package/LoadingIndicator/index.js

@@ -1,22 +1,16 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingIndicator = exports.StaticLoadingIndicator = exports.LoadingOverlay = exports.Spinner = void 0;
 const Spinner_1 = __importDefault(require("./Spinner"));
-__exportStar(require("./Spinner"), exports);
+var Spinner_2 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_2).default; } });
+var LoadingOverlay_1 = require("./LoadingOverlay");
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return __importDefault(LoadingOverlay_1).default; } });
+// Deprecated aliases of the previous names
+var Spinner_3 = require("./Spinner");
+Object.defineProperty(exports, "StaticLoadingIndicator", { enumerable: true, get: function () { return Spinner_3.StaticLoadingIndicator; } });
+Object.defineProperty(exports, "LoadingIndicator", { enumerable: true, get: function () { return Spinner_3.LoadingIndicator; } });
 exports.default = Spinner_1.default;

package/MaskedField/index.d.ts

@@ -13,9 +13,10 @@ export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChan
      */
     readonly mask: Mask | GetMask;
     /**
-     * Function will be called when field value was changed
+     * Function will be called when field value was changed.\
+     * `event.currentTarget.value` already contains the formatted text
      */
-    readonly onChange: (payload: FormatParsedPayload) => void;
+    readonly onChange: (payload: FormatParsedPayload, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * If you are not using a simple mask, you can provide a function to analyze the input value
      */

package/MaskedField/index.js

@@ -63,11 +63,14 @@ const MaskedField = (props, ref) => {
         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;
@@ -83,6 +86,8 @@ const MaskedField = (props, ref) => {
             nativeProps.inputRef.current = elem;
         }
     }, [nativeProps]);
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { type: "text", value: inputValue, onChange: handleOnChange, inputRef: setInputRef })));
+    return (react_1.default.createElement(TextField_1.default, 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 })));
 };
 exports.default = react_1.default.forwardRef(MaskedField);

package/MaskedField/templates.js

@@ -57,6 +57,8 @@ exports.ogrnip = [
     /\d/,
     /\d/,
     /\d/,
+    /\d/,
+    /\d/,
 ];
 exports.vin = [
     /[A-HJ-NPR-Z0-9]/i,

package/MaskedField/useMasked.js

@@ -11,10 +11,12 @@ const useMasked = () => {
             text: '',
             caret: 0,
         };
-        value
-            .replace(/\s+/g, '')
-            .split('')
-            .forEach((character, charIndex) => {
+        // 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;
@@ -42,30 +44,40 @@ const useMasked = () => {
             charIndex: 0,
         };
         if (parsedValue === '') {
-            return data;
+            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++) {
-            data.isValid = false;
             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;
-                data.isValid = true;
+                filledCount += 1;
             }
             // If char is correct (equal with pattern string)
-            // then accept char into text
-            // and increment the charIndex and caret
+            // 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.caret += 1;
                 data.charIndex += 1;
             }
             // If pattern is a string and char is not correct
@@ -80,8 +92,10 @@ const useMasked = () => {
         }
         const result = {
             text: data.text,
-            caret: data.caret,
-            isValid: data.isValid,
+            // 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;
     }, []);

package/Menu/MenuContainer.d.ts

@@ -71,6 +71,14 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * **Default**: `true`
      */
     readonly closeOutsideClick?: boolean;
+    /**
+     * Also close the list when the anchor element is clicked.\
+     * Leave it `false` when the anchor toggles the list by itself,
+     * otherwise the anchor click closes the list and the anchor opens it again\
+     * \
+     * **Default**: `false`
+     */
+    readonly closeOnAnchorClick?: boolean;
     /**
      * Allow the multiple selection
      * \
@@ -97,7 +105,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * if the preferred placement doesn't fit in the viewport.
      * The component will iterate through possible placements until it finds one that fits.
      *
-     * **Default**: `true`
+     * **Default**: `false`
      * ```
      */
     readonly autoFlip?: boolean;
@@ -115,7 +123,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * - `'absolute'`: Positions relative to the nearest positioned ancestor.
      *                 When using 'absolute', make sure a parent element has `position: relative`.
      *
-     * **Default**: `'`absolute`'`
+     * **Default**: `fixed`
      * ```
      */
     readonly positionStrategy?: PositionStrategy;
@@ -124,7 +132,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * Used to prevent the popper from being positioned too close to the screen boundaries.
      * The popper will try to flip to another placement if it cannot maintain this margin.
      *
-     * **Default**: `8`
+     * **Default**: `30`
      * ```
      */
     readonly viewportMargin?: number;