@via-profit/ui-kit 0.2.6 → 0.4.0

package/Modal/Drawer/DrawerHeader.js

@@ -51,11 +51,11 @@ const StyledDrawerCloseButton = (0, styled_1.default)(Button_1.default) `
   cursor: pointer;
 `;
 const DrawerHeader = (props, ref) => {
-    const { header, children, showCloseButton, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "onRequestClose"]);
+    const { header, children, showCloseButton, closeButtonLabel = 'Close', dialogID, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "closeButtonLabel", "dialogID", "onRequestClose"]);
     return (react_1.default.createElement(StyledDrawerHeader, Object.assign({}, nativeProps, { ref: ref }),
-        typeof header !== 'undefined' && react_1.default.createElement(DrawerTitle, null, header),
+        typeof header !== 'undefined' && (react_1.default.createElement(DrawerTitle, { id: dialogID ? `${dialogID}-title` : undefined }, header)),
         typeof children !== 'undefined' && react_1.default.createElement(DrawerToolbar, null, children),
-        typeof onRequestClose === 'function' && showCloseButton && (react_1.default.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": Boolean(toolbar), onClick: onRequestClose },
+        typeof onRequestClose === 'function' && showCloseButton && (react_1.default.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": typeof children !== 'undefined' && children !== null, "aria-label": closeButtonLabel, onClick: onRequestClose },
             react_1.default.createElement(DrawerCloseIcon_1.default, null)))));
 };
 exports.default = react_1.default.forwardRef(DrawerHeader);

package/Modal/Drawer/DrawerInner.js

@@ -30,6 +30,8 @@ const StyledDrawerBottomInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -56,6 +58,8 @@ const StyledDrawerTopInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -82,6 +86,8 @@ const StyledDrawerRightInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -108,6 +114,8 @@ const StyledDrawerLeftInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -137,6 +145,6 @@ const DrawerInner = (props, ref) => {
                 return StyledDrawerBottomInner;
         }
     }, [anchor]);
-    return (react_1.default.createElement(Element, Object.assign({ isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(DrawerInner);

package/Modal/Drawer/index.d.ts

@@ -6,6 +6,7 @@ import { DrawerHeaderProps } from './DrawerHeader';
 import { DrawerContentProps } from './DrawerContent';
 import { DrawerFooterProps } from './DrawerFooter';
 import { ModalOverlayProps } from '../BaseModal/ModalOverlay';
+export type { AnchorVariant } from './DrawerInner';
 export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
     /**
      * Drawer position\
@@ -34,6 +35,12 @@ export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
      * Display close button in the header
      */
     readonly showCloseButton?: boolean;
+    /**
+     * Accessible label of the close button (it contains only an icon)\
+     * \
+     * **Default**: `'Close'`
+     */
+    readonly closeButtonLabel?: string;
     /**
      * Overridable components map
      */

package/Modal/Drawer/index.js

@@ -45,13 +45,20 @@ const DrawerHeader_1 = __importDefault(require("./DrawerHeader"));
 const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "anchor", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
         typeof showCloseButton !== 'undefined', [showCloseButton, header, toolbar]);
-    const dialogID = React.useMemo(() => `drawer-${new Date().getTime()}`, []);
+    const dialogID = (0, useDialogID_1.default)('drawer');
+    const hasTitle = typeof header !== 'undefined' && header !== null;
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole drawer content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
+        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || DrawerContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || DrawerHeader_1.default,
@@ -59,16 +66,11 @@ const Drawer = props => {
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || DrawerFooter_1.default,
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,
     }), [overrides]);
+    const modalOverrides = React.useMemo(() => ({ Overlay: overridesMap.Overlay, Inner }), [overridesMap.Overlay, Inner]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(BaseModal_1.default, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: {
-                Overlay: overridesMap.Overlay,
-                Inner: React.forwardRef(function Inner(props, ref) {
-                    const { children } = props;
-                    return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, ref: ref }, props), children));
-                }),
-            } }),
+        React.createElement(BaseModal_1.default, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: modalOverrides }),
             React.createElement(overridesMap.Container, { anchor: anchor },
-                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, header: header, onRequestClose: onRequestClose }, toolbar)),
+                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, closeButtonLabel: closeButtonLabel, dialogID: dialogID, header: header, onRequestClose: onRequestClose }, toolbar)),
                 React.createElement(overridesMap.Content, { anchor: anchor }, children),
                 hasFooter && React.createElement(overridesMap.Footer, { anchor: anchor }, footer)))));
 };

package/Modal/MessageBox/MessageBoxContainer.js

@@ -23,6 +23,6 @@ const Container = styled_1.default.div `
 `;
 const MessageBoxContainer = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(Container, Object.assign({ role: "modal-MessageBox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Container, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(MessageBoxContainer);

package/Modal/MessageBox/index.js

@@ -44,9 +44,10 @@ const MessageBoxContent_1 = __importDefault(require("./MessageBoxContent"));
 const MessageBoxFooter_1 = __importDefault(require("./MessageBoxFooter"));
 const MessageBoxHeader_1 = __importDefault(require("./MessageBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const MessageBox = props => {
     const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
-    const dialogID = React.useMemo(() => `dialog-Message-${new Date().getTime()}`, []);
+    const dialogID = (0, useDialogID_1.default)('dialog-message');
     const buttonRef = React.useRef(null);
     React.useEffect(() => {
         setTimeout(() => {

package/PhoneField/CountryFlagComponent.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
 const CountryFlagContainer = styled_1.default.span `
   display: flex;
   align-items: center;
@@ -39,6 +39,6 @@ const CountryFlagContainer = styled_1.default.span `
 `;
 const CountryFlagComponent = props => {
     const { flag } = props, otherProps = __rest(props, ["flag"]);
-    return (react_1.default.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? react_1.default.createElement(UnknownFlag_1.default, null) : flag));
+    return (react_1.default.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? react_1.default.createElement(Unknown_1.default, null) : flag));
 };
 exports.default = CountryFlagComponent;

package/PhoneField/UnknownFlag.d.ts

@@ -1,3 +1,6 @@
-import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;
+/// <reference types="react" />
+/**
+ * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/Unknown`
+ */
+declare const UnknownFlag: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default UnknownFlag;

package/PhoneField/UnknownFlag.js

@@ -1,34 +1,11 @@
 "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 __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 react_1 = require("@emotion/react");
-const UnknownFlag = (props, ref) => {
-    const { color } = (0, react_1.useTheme)();
-    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: color.surface.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: color.textPrimary.toString(), strokeWidth: ".72279" })));
-};
-exports.default = React.forwardRef(UnknownFlag);
+const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+/**
+ * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/Unknown`
+ */
+const UnknownFlag = Unknown_1.default;
+exports.default = UnknownFlag;

package/PhoneField/index.js

@@ -29,71 +29,61 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TextField_1 = __importDefault(require("../TextField"));
+const MaskedField_1 = __importDefault(require("../MaskedField"));
 const usePhoneUtils_1 = require("./usePhoneUtils");
 const CountryFlagComponent_1 = __importDefault(require("./CountryFlagComponent"));
 const PhoneField = (props, ref) => {
+    var _a, _b;
     const { value, templates, inputRef, withoutCountryFlag, onChange } = props, textFieldProps = __rest(props, ["value", "templates", "inputRef", "withoutCountryFlag", "onChange"]);
-    const { formatParsedInput, parseInput, parseAndFormat } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
+    const { parseInput, parseAndFormat, getTemplateInfo } = (0, usePhoneUtils_1.usePhoneUtils)({ templates });
     const textInputRef = react_1.default.useRef(null);
-    const initialValue = react_1.default.useRef(value);
-    const [state, setState] = react_1.default.useState(() => {
-        const { text, countryCode, placeholder, number, CountryFlag } = parseAndFormat(String(initialValue.current));
-        return {
-            currentValue: text,
-            number,
-            countryCode,
-            placeholder,
-            CountryFlag,
-        };
-    });
-    const { countryCode, currentValue, placeholder, CountryFlag } = state;
+    // The current text of the field: the flag and the placeholder follow it
+    const [currentValue, setCurrentValue] = react_1.default.useState(() => parseAndFormat(String(value)).text);
+    const lastValue = react_1.default.useRef(value);
     react_1.default.useEffect(() => {
-        if (initialValue.current !== value) {
-            initialValue.current = value;
-            const formatted = parseAndFormat(String(value));
-            if (formatted.text !== currentValue) {
-                setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: formatted.text, countryCode: formatted.countryCode, placeholder: formatted.placeholder, CountryFlag: formatted.CountryFlag })));
-            }
+        if (lastValue.current !== value) {
+            lastValue.current = value;
+            setCurrentValue(parseAndFormat(String(value)).text);
         }
-    }, [countryCode, currentValue, parseAndFormat, placeholder, value]);
-    const handleChange = event => {
+    }, [parseAndFormat, value]);
+    const { CountryFlag, placeholder } = react_1.default.useMemo(() => parseAndFormat(currentValue), [parseAndFormat, currentValue]);
+    // <MaskedField> gets the phone-specific parsing and the mask of the detected template
+    const parsePhone = react_1.default.useCallback((input, _mask, caret) => (0, usePhoneUtils_1.dropExtraPluses)(parseInput(input, caret)), [parseInput]);
+    const getMask = react_1.default.useCallback((input) => (0, usePhoneUtils_1.templateToMask)(getTemplateInfo(parsePhone(input, []).text).template), [getTemplateInfo, parsePhone]);
+    const handleChange = react_1.default.useCallback((payload, event) => {
         var _a;
-        const parsed = parseInput(String(event.currentTarget.value), ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { caret, text, template, placeholder, countryCode, callingCode, CountryFlag, number, isValid, } = formatParsedInput(parsed.text, parsed.caret);
-        onChange(Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: text }) }), {
-            value: text,
-            placeholder,
-            CountryFlag,
-            template,
-            countryCode,
-            callingCode,
-            number,
-            isValid,
-            combined: `${callingCode !== null && callingCode !== void 0 ? callingCode : ''}${number}`,
+        const formatted = parseAndFormat(payload.text);
+        setCurrentValue(payload.text);
+        onChange(event, {
+            value: payload.text,
+            placeholder: formatted.placeholder,
+            CountryFlag: formatted.CountryFlag,
+            template: formatted.template,
+            countryCode: formatted.countryCode,
+            callingCode: formatted.callingCode,
+            number: formatted.number,
+            isValid: formatted.isValid,
+            combined: `${(_a = formatted.callingCode) !== null && _a !== void 0 ? _a : ''}${formatted.number}`,
         });
-        setState(prev => (Object.assign(Object.assign({}, prev), { currentValue: text, countryCode,
-            placeholder,
-            CountryFlag })));
-        setTimeout(() => {
-            var _a;
-            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
-        }, 15);
-    };
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref, startIcon: react_1.default.useMemo(() => withoutCountryFlag ? undefined : (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
-                if (textInputRef.current) {
-                    textInputRef.current.select();
-                    textInputRef.current.focus();
-                }
-            } })), [CountryFlag, withoutCountryFlag]) }, textFieldProps, { value: currentValue, placeholder: placeholder, onChange: handleChange, inputRef: input => {
-            textInputRef.current = input;
-            if (typeof inputRef === 'function') {
-                inputRef(input);
-            }
-            if (inputRef && typeof inputRef === 'object') {
-                inputRef.current = input;
+    }, [onChange, parseAndFormat]);
+    const setInputRef = react_1.default.useCallback((input) => {
+        textInputRef.current = input;
+        if (typeof inputRef === 'function') {
+            inputRef(input);
+        }
+        if (inputRef && typeof inputRef === 'object') {
+            inputRef.current = input;
+        }
+    }, [inputRef]);
+    const startIcon = react_1.default.useMemo(() => withoutCountryFlag ? undefined : (react_1.default.createElement(CountryFlagComponent_1.default, { flag: CountryFlag, onClick: () => {
+            if (textInputRef.current) {
+                textInputRef.current.select();
+                textInputRef.current.focus();
             }
-        } })));
+        } })), [CountryFlag, withoutCountryFlag]);
+    return (react_1.default.createElement(MaskedField_1.default, Object.assign({ ref: ref }, textFieldProps, { 
+        // An explicit `startIcon={undefined}` (e.g. from <Autocomplete>) must not hide the flag
+        startIcon: (_a = textFieldProps.startIcon) !== null && _a !== void 0 ? _a : startIcon, value: value, mask: getMask, parseInput: parsePhone, placeholder: (_b = textFieldProps.placeholder) !== null && _b !== void 0 ? _b : placeholder, onChange: handleChange, inputRef: setInputRef })));
 };
 exports.default = react_1.default.forwardRef(PhoneField);
 __exportStar(require("./usePhoneUtils"), exports);

package/PhoneField/templates.js

@@ -17,30 +17,29 @@ const CN_1 = __importDefault(require("../CountryFlags/CN"));
 exports.templates = [
     // Russian template
     ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/], // 8912...
+    // 81... is Japan without «+»: Russian area codes never start with 1
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8(?!1)/], // 8912...
     [
         'RU',
         react_1.default.createElement(RU_1.default, { key: "ru-3" }),
         '7',
         '+7 (xxx) xxx-xx-xx',
         '+7 (987) 654-32-10',
-        /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
+        // Also matches a bare «+7» while typing, so the flag does not blink; 76 and 77 are Kazakhstan
+        /^\+{0,1}7(?![67])/,
     ], // +79...
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
     ['CN', react_1.default.createElement(CN_1.default, { key: "cn" }), '86', '+86 (xxx) xxxx-xxxx', '+86 (138) 0013-8000', /^\+{0,1}86/],
-    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
-    [
-        'KZ',
-        react_1.default.createElement(KZ_1.default, { key: "kz-2" }),
-        '7',
-        '+7 (xxx) xxx-xx-xx',
-        '+7 (600) 765-43-21',
-        /^\+{0,1}7[6-7][0-9][0-9]/,
-    ], // +7600 - +7700
+    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '997', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
+    ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-2" }), '7', '+7 (xxx) xxx-xx-xx', '+7 (600) 765-43-21', /^\+{0,1}7[67]/], // +76, +77
     ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
-    ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
-    ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],
-    ['IL', react_1.default.createElement(IL_1.default, { key: "il" }), '972', '+972 xx xxx-xx-xx', '+972 65 432-10-01', /^\+972/],
+    // Mobile numbers (070, 080, 090) have 10 digits, landlines have 9
+    ['JP', react_1.default.createElement(JP_1.default, { key: "jp-1" }), '81', '+81 (xx) xxxx-xxxx', '+81 (90) 1234-5678', /^\+{0,1}81[789]0/],
+    ['JP', react_1.default.createElement(JP_1.default, { key: "jp-2" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
+    ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 (xxx) xxx-xxxx', '+1 (987) 654-3210', /^\+{0,1}1/],
+    // Mobile (5x) and VoIP (7x) numbers have 9 digits, landlines have 8
+    ['IL', react_1.default.createElement(IL_1.default, { key: "il-1" }), '972', '+972 xx xxx-xx-xx', '+972 50 432-10-01', /^\+{0,1}972[57]/],
+    ['IL', react_1.default.createElement(IL_1.default, { key: "il-2" }), '972', '+972 x xxx-xxxx', '+972 3 432-1001', /^\+{0,1}972/],
 ];
 exports.default = exports.templates;

package/PhoneField/usePhoneUtils.d.ts

@@ -1,4 +1,5 @@
 import type { CountryCode, PhoneTemplate, CountryFlag } from './templates';
+import { Mask } from '../MaskedField/useMasked';
 export interface Formatted {
     readonly text: string;
     readonly caret: number;
@@ -26,6 +27,20 @@ type Validate = (inputValue: string, template: string) => boolean;
 type Format = (text: string, caret: number, defaultCountry?: string | null) => Formatted;
 type ParseAndValidate = (inputValue: string) => boolean;
 type ParseAndFormat = (inputValue: string, caret?: number) => Formatted;
+/**
+ * Converts a phone template to a mask: «x» is a digit, other chars are literals
+ */
+export declare const templateToMask: (template: string) => Mask;
+/**
+ * «+» is allowed only as the first char of a parsed phone, the other ones are dropped
+ */
+export declare const dropExtraPluses: (parsed: {
+    readonly text: string;
+    readonly caret: number;
+}) => {
+    text: string;
+    caret: number;
+};
 export declare const usePhoneUtils: (params: {
     templates: readonly PhoneTemplate[];
 }) => {

package/PhoneField/usePhoneUtils.js

@@ -3,15 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePhoneUtils = void 0;
+exports.usePhoneUtils = exports.dropExtraPluses = exports.templateToMask = void 0;
 const react_1 = __importDefault(require("react"));
-const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const useMasked_1 = require("../MaskedField/useMasked");
+/**
+ * Converts a phone template to a mask: «x» is a digit, other chars are literals
+ */
+const templateToMask = (template) => template.split('').map(char => (char === 'x' ? /\d/ : char));
+exports.templateToMask = templateToMask;
+/**
+ * «+» is allowed only as the first char of a parsed phone, the other ones are dropped
+ */
+const dropExtraPluses = (parsed) => {
+    const { text, caret } = parsed;
+    const removedBeforeCaret = (text.slice(1, Math.max(caret, 1)).match(/\+/g) || []).length;
+    return {
+        text: text.charAt(0) + text.slice(1).replace(/\+/g, ''),
+        caret: caret - removedBeforeCaret,
+    };
+};
+exports.dropExtraPluses = dropExtraPluses;
 const usePhoneUtils = (params) => {
     const { templates } = params;
+    const masked = (0, useMasked_1.useMasked)();
     const templatesList = react_1.default.useMemo(() => templates.concat([
         [
             null,
-            react_1.default.createElement(UnknownFlag_1.default, { key: "unknnown" }),
+            react_1.default.createElement(Unknown_1.default, { key: "unknnown" }),
             null,
             '+x xxx xxx-xx-xx',
             '+7 987 654-32-10',
@@ -61,44 +80,18 @@ const usePhoneUtils = (params) => {
         if (inputValue === '') {
             return data;
         }
-        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(inputValue);
-        const mask = template.split('').map(c => (c === 'x' ? /\d/ : c));
-        let charIndex = 0;
-        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
-            if (charIndex >= inputValue.length) {
-                break;
-            }
-            const char = inputValue[charIndex];
-            const template = mask[patternIndex];
-            // If put +, but not first
-            if (charIndex !== 0 && char === '+') {
-                break;
-            }
-            if (template instanceof RegExp && new RegExp(template).test(char)) {
-                data.text = `${data.text}${char}`;
-                charIndex += 1;
-            }
-            if (typeof template === 'string' && template === char) {
-                data.text = `${data.text}${char}`;
-                charIndex += 1;
-            }
-            if (typeof template === 'string' && template !== char) {
-                data.text = `${data.text}${template}`;
-                if (charIndex < caret) {
-                    data.caret += 1;
-                }
-            }
-        }
-        // const templateLength = template.replace(/[^x\d]/g, '').split('').length;
-        // const valueLength = inputValue.replace(/[^\d]/g, '').split('').length;
-        const number = data.text.replace(/[^0-9]/g, '').substring((callingCode === null || callingCode === void 0 ? void 0 : callingCode.length) || 0);
-        return Object.assign(Object.assign({}, data), { countryCode,
+        // The mask engine is shared with <MaskedField>, only the template is phone-specific
+        const normalized = (0, exports.dropExtraPluses)({ text: inputValue, caret });
+        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(normalized.text);
+        const formatted = masked.formatParsedInput(normalized.text, (0, exports.templateToMask)(template), normalized.caret);
+        const number = formatted.text.replace(/[^0-9]/g, '').substring((callingCode === null || callingCode === void 0 ? void 0 : callingCode.length) || 0);
+        return Object.assign(Object.assign({}, data), { text: formatted.text, caret: formatted.caret, countryCode,
             callingCode,
             CountryFlag,
             template,
             placeholder,
-            number, isValid: validateParsedInput(data.text, template) });
-    }, [getTemplateInfo, templatesList, validateParsedInput]);
+            number, isValid: validateParsedInput(formatted.text, template) });
+    }, [getTemplateInfo, templatesList, validateParsedInput, masked]);
     /**
      * Parse phone string
      */

package/Popper/Popper.d.ts

@@ -16,9 +16,9 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
     /**
      * The HTML element to which the popper will be attached and positioned relative to.
-     * If `null` or undefined, the popper will not be positioned.
+     * While it is `null`, the popper stays hidden even if `isOpen` is `true`.
      *
-     * @default undefined
+     * @required
      * @example
      * ```tsx
      * const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
@@ -38,13 +38,33 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * ```
      */
     readonly anchorPos?: AnchorPos;
+    /**
+     * Placements to try right after `anchorPos` when `autoFlip` is enabled.
+     * For `auto` placements this is the full list of placements to try.
+     * For the other placements `auto` and `*-fill` values of this list are ignored.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper anchorPos="bottom-fill" autoFlip alternativePlacements={['top-fill']}>...</Popper>
+     * ```
+     */
     readonly alternativePlacements?: readonly AnchorPos[];
+    /**
+     * Called when the actual placement changes, e.g. after a flip caused by `autoFlip`
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper autoFlip onAnchorPosChanged={placement => setArrowSide(placement)}>...</Popper>
+     * ```
+     */
     readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
     /**
      * The z-index value for the popper container.
      * Used to control the stacking order of the popper relative to other elements.
      *
-     * @default theme.zIndex.modal
+     * @default theme.zIndex.modal for the `fixed` strategy, not set for `absolute`
      * @example
      * ```tsx
      * <Popper zIndex={9999}>...</Popper>
@@ -56,7 +76,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * 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
      * @example
      * ```tsx
      * <Popper autoFlip={true}>...</Popper> // Will flip if needed
@@ -78,8 +98,9 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly offset?: number;
     /**
      * The positioning strategy to use.
-     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
-     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     * - `'fixed'`: Renders into a portal and positions relative to the viewport.
+     *              The popper is kept inside the viewport and is not clipped by `overflow: hidden` parents.
+     * - `'absolute'`: Renders in place and positions relative to the nearest positioned ancestor.
      *                 When using 'absolute', make sure a parent element has `position: relative`.
      *
      * @default 'fixed'
@@ -92,13 +113,12 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly positionStrategy?: PositionStrategy;
     /**
      * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
-     * 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.
+     * With `autoFlip` a placement that breaks this margin is skipped.
+     * With the `fixed` strategy the popper is also shifted to keep this margin.
      *
-     * @default 8
+     * @default 30
      * @example
      * ```tsx
-     * // Larger margin for better visibility
      * <Popper viewportMargin={16}>...</Popper>
      *
      * // No margin (allow touching edges)

package/Popper/Popper.js

@@ -67,17 +67,19 @@ const Popper = (props, ref) => {
         }
         const newNode = window.document.createElement('div');
         newNode.setAttribute('id', exports.PORTAL_ID);
-        if (positionStrategy === 'absolute') {
-            newNode.style.position = 'relative';
-        }
         window.document.body.appendChild(newNode);
         return newNode;
-    }, [positionStrategy]);
+    }, []);
+    const onAnchorPosChangedRef = react_1.default.useRef(onAnchorPosChanged);
+    onAnchorPosChangedRef.current = onAnchorPosChanged;
+    const prevPlacementRef = react_1.default.useRef(actualPlacement);
     react_1.default.useEffect(() => {
-        if (anchorPos !== actualPlacement && typeof onAnchorPosChanged === 'function') {
-            onAnchorPosChanged(actualPlacement);
+        var _a;
+        if (prevPlacementRef.current !== actualPlacement) {
+            prevPlacementRef.current = actualPlacement;
+            (_a = onAnchorPosChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onAnchorPosChangedRef, actualPlacement);
         }
-    }, [anchorPos, actualPlacement, onAnchorPosChanged]);
+    }, [actualPlacement]);
     const childrenMemo = react_1.default.useMemo(() => children, [children]);
     const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
             position: 'fixed',