@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/PhoneField/index.js

@@ -0,0 +1,71 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import MaskedField from '../MaskedField';
+import { dropExtraPluses, templateToMask, usePhoneUtils } from './usePhoneUtils';
+import CountryFlagComponent from './CountryFlagComponent';
+const PhoneField = (props, ref) => {
+    var _a, _b;
+    const { value, templates, inputRef, withoutCountryFlag, onChange } = props, textFieldProps = __rest(props, ["value", "templates", "inputRef", "withoutCountryFlag", "onChange"]);
+    const { parseInput, parseAndFormat, getTemplateInfo } = usePhoneUtils({ templates });
+    const textInputRef = React.useRef(null);
+    // The current text of the field: the flag and the placeholder follow it
+    const [currentValue, setCurrentValue] = React.useState(() => parseAndFormat(String(value)).text);
+    const lastValue = React.useRef(value);
+    React.useEffect(() => {
+        if (lastValue.current !== value) {
+            lastValue.current = value;
+            setCurrentValue(parseAndFormat(String(value)).text);
+        }
+    }, [parseAndFormat, value]);
+    const { CountryFlag, placeholder } = React.useMemo(() => parseAndFormat(currentValue), [parseAndFormat, currentValue]);
+    // <MaskedField> gets the phone-specific parsing and the mask of the detected template
+    const parsePhone = React.useCallback((input, _mask, caret) => dropExtraPluses(parseInput(input, caret)), [parseInput]);
+    const getMask = React.useCallback((input) => templateToMask(getTemplateInfo(parsePhone(input, []).text).template), [getTemplateInfo, parsePhone]);
+    const handleChange = React.useCallback((payload, event) => {
+        var _a;
+        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}`,
+        });
+    }, [onChange, parseAndFormat]);
+    const setInputRef = React.useCallback((input) => {
+        textInputRef.current = input;
+        if (typeof inputRef === 'function') {
+            inputRef(input);
+        }
+        if (inputRef && typeof inputRef === 'object') {
+            inputRef.current = input;
+        }
+    }, [inputRef]);
+    const startIcon = React.useMemo(() => withoutCountryFlag ? undefined : (React.createElement(CountryFlagComponent, { flag: CountryFlag, onClick: () => {
+            if (textInputRef.current) {
+                textInputRef.current.select();
+                textInputRef.current.focus();
+            }
+        } })), [CountryFlag, withoutCountryFlag]);
+    return (React.createElement(MaskedField, 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 })));
+};
+export default React.forwardRef(PhoneField);
+export * from './usePhoneUtils';
+export * from './templates';

package/esm/PhoneField/templates.js

@@ -0,0 +1,39 @@
+import React from 'react';
+// import UnknownFlag from './UnknownFlag';
+import RU from './flags/RU';
+import BY from './flags/BY';
+import KZ from './flags/KZ';
+import UA from './flags/UA';
+import JP from './flags/JP';
+import US from './flags/US';
+import IL from './flags/IL';
+import CN from './flags/CN';
+export const templates = [
+    // Russian template
+    ['RU', React.createElement(RU, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
+    // 81... is Japan without «+»: Russian area codes never start with 1
+    ['RU', React.createElement(RU, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8(?!1)/], // 8912...
+    [
+        'RU',
+        React.createElement(RU, { key: "ru-3" }),
+        '7',
+        '+7 (xxx) xxx-xx-xx',
+        '+7 (987) 654-32-10',
+        // 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.createElement(BY, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
+    ['CN', React.createElement(CN, { key: "cn" }), '86', '+86 (xxx) xxxx-xxxx', '+86 (138) 0013-8000', /^\+{0,1}86/],
+    ['KZ', React.createElement(KZ, { key: "kz-1" }), '997', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
+    ['KZ', React.createElement(KZ, { key: "kz-2" }), '7', '+7 (xxx) xxx-xx-xx', '+7 (600) 765-43-21', /^\+{0,1}7[67]/], // +76, +77
+    ['UA', React.createElement(UA, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
+    // Mobile numbers (070, 080, 090) have 10 digits, landlines have 9
+    ['JP', React.createElement(JP, { key: "jp-1" }), '81', '+81 (xx) xxxx-xxxx', '+81 (90) 1234-5678', /^\+{0,1}81[789]0/],
+    ['JP', React.createElement(JP, { key: "jp-2" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
+    ['US', React.createElement(US, { 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.createElement(IL, { key: "il-1" }), '972', '+972 xx xxx-xx-xx', '+972 50 432-10-01', /^\+{0,1}972[57]/],
+    ['IL', React.createElement(IL, { key: "il-2" }), '972', '+972 x xxx-xxxx', '+972 3 432-1001', /^\+{0,1}972/],
+];
+export default templates;

package/esm/PhoneField/usePhoneUtils.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import UnknownFlag from './flags/Unknown';
+import { useMasked } from '../MaskedField/useMasked';
+/**
+ * Converts a phone template to a mask: «x» is a digit, other chars are literals
+ */
+export const templateToMask = (template) => template.split('').map(char => (char === 'x' ? /\d/ : char));
+/**
+ * «+» is allowed only as the first char of a parsed phone, the other ones are dropped
+ */
+export 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,
+    };
+};
+export const usePhoneUtils = (params) => {
+    const { templates } = params;
+    const masked = useMasked();
+    const templatesList = React.useMemo(() => templates.concat([
+        [
+            null,
+            React.createElement(UnknownFlag, { key: "unknnown" }),
+            null,
+            '+x xxx xxx-xx-xx',
+            '+7 987 654-32-10',
+            /^\+{0,1}.*/,
+        ],
+    ]), [templates]);
+    /**
+     * Get template info by parset value
+     */
+    const getTemplateInfo = React.useCallback(parsedValue => {
+        const [countryCode, CountryFlag, callingCode, template, placeholder, regexp] = templatesList.find(template => new RegExp(template[5]).test(parsedValue.trim())) ||
+            templatesList[0];
+        return {
+            countryCode,
+            CountryFlag,
+            callingCode,
+            template,
+            placeholder,
+            regexp,
+        };
+    }, [templatesList]);
+    /**
+     * Get phone validation status
+     */
+    const validateParsedInput = React.useCallback((inputValue, template) => {
+        const xLength = template.replace(/[^x\d]/g, '').split('').length;
+        const digitLength = inputValue.replace(/[^\d]/g, '').split('').length;
+        return xLength === digitLength;
+    }, []);
+    /**
+     * Format phone string
+     */
+    const formatParsedInput = React.useCallback((inputValue, caret, defaultCountry) => {
+        const defaultTemplateRecord = templatesList.find(t => t[0] === (defaultCountry || null));
+        const [defaultCountryCode, DefaultCountryFlag, defaultCountryCalling, defaultTemplate, defaultPlaceholder,] = defaultTemplateRecord || templatesList[templatesList.length - 1];
+        const data = {
+            text: '',
+            caret,
+            CountryFlag: DefaultCountryFlag,
+            countryCode: defaultCountryCode,
+            callingCode: defaultCountryCalling,
+            template: defaultTemplate,
+            placeholder: defaultPlaceholder,
+            number: '',
+            isValid: false,
+        };
+        if (inputValue === '') {
+            return data;
+        }
+        // The mask engine is shared with <MaskedField>, only the template is phone-specific
+        const normalized = dropExtraPluses({ text: inputValue, caret });
+        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(normalized.text);
+        const formatted = masked.formatParsedInput(normalized.text, 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(formatted.text, template) });
+    }, [getTemplateInfo, templatesList, validateParsedInput, masked]);
+    /**
+     * Parse phone string
+     */
+    const parseInput = React.useCallback((value, caret) => {
+        const data = {
+            text: '',
+            caret: 0,
+        };
+        value
+            .trim()
+            .split('')
+            .forEach((character, charIndex) => {
+            const isMatch = new RegExp(/[+0-9]/).test(character);
+            if (isMatch) {
+                data.text = `${data.text}${character}`;
+                if (charIndex < (caret || 0)) {
+                    data.caret += 1;
+                }
+            }
+        });
+        return Object.assign({}, data);
+    }, []);
+    const parseAndValidate = React.useCallback(inputValue => {
+        const { text } = parseInput(inputValue);
+        const { template } = getTemplateInfo(text);
+        return validateParsedInput(text, template);
+    }, [getTemplateInfo, parseInput, validateParsedInput]);
+    const parseAndFormat = React.useCallback((inputValue, caret) => {
+        const parsed = parseInput(inputValue, caret);
+        return formatParsedInput(parsed.text, parsed.caret);
+    }, [formatParsedInput, parseInput]);
+    return {
+        /**
+         * Validate parsed phone string by template\
+         * ```js
+         * // Example:
+         * validateParsedInput('79129876543', '7 (xxx) xxx-xx-xx'); // true
+         * validateParsedInput('79129876', '7 (xxx) xxx-xx-xx'); // false
+         * ```
+         */
+        validateParsedInput,
+        getTemplateInfo,
+        /**
+         * Parse plain phone string and validate result\
+         * ```js
+         * // Example:
+         * parseAndValidate('+7 912 659-99-88'); // true
+         * parseAndValidate('+7 912 659-99-'); // false
+         * ```
+         */
+        parseAndValidate,
+        parseAndFormat,
+        /**
+         * Format phone string by template\
+         * ```js
+         * // Example:
+         * format('')
+         * ```
+         */
+        formatParsedInput,
+        /**
+         * Parse input phone string\
+         * ```js
+         * // Example:
+         * const { text, caret } = parseInput('+7 (912', 7); // { '7912', 4 }
+         * ```
+         */
+        parseInput,
+    };
+};

package/esm/Popper/Popper.js

@@ -0,0 +1,98 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Container from './PopperContainer';
+import { usePopper } from './usePopper';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+export * from './usePopper';
+export const PORTAL_ID = 'ui-kit-portal';
+const Popper = (props, ref) => {
+    const _a = useThemeProps('Popper', props), { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = _a, nativeProps = __rest(_a, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
+    const [domLoaded, setDomLoaded] = React.useState(false);
+    const { actualPlacement, style, popperRef, isVisible } = usePopper({
+        anchorElement,
+        anchorPos,
+        positionStrategy,
+        autoFlip,
+        offset,
+        viewportMargin,
+        alternativePlacements,
+        isOpen,
+    });
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+    }), [overrides]);
+    /**
+     * Client render detection
+     */
+    React.useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    const portalEl = React.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', PORTAL_ID);
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, []);
+    const onAnchorPosChangedRef = React.useRef(onAnchorPosChanged);
+    onAnchorPosChangedRef.current = onAnchorPosChanged;
+    const prevPlacementRef = React.useRef(actualPlacement);
+    React.useEffect(() => {
+        var _a;
+        if (prevPlacementRef.current !== actualPlacement) {
+            prevPlacementRef.current = actualPlacement;
+            (_a = onAnchorPosChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onAnchorPosChangedRef, actualPlacement);
+        }
+    }, [actualPlacement]);
+    const childrenMemo = React.useMemo(() => children, [children]);
+    const renderNode = React.useCallback(() => (React.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',
+        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+            popperRef.current = el;
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(el);
+                }
+                if (typeof ref === 'object') {
+                    ref.current = el;
+                }
+            }
+        } }), childrenMemo)), [
+        overridesMap,
+        nativeProps,
+        style,
+        isVisible,
+        // getTransformOrigin,
+        actualPlacement,
+        positionStrategy,
+        zIndex,
+        childrenMemo,
+        popperRef,
+        ref,
+    ]);
+    if (!isOpen) {
+        return null;
+    }
+    if (positionStrategy === 'fixed') {
+        return domLoaded && portalEl ? ReactDOM.createPortal(renderNode(), portalEl, PORTAL_ID) : null;
+    }
+    return renderNode();
+};
+export default React.forwardRef(Popper);

package/esm/Popper/PopperContainer.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledContainer = styled.div `
+  position: ${({ $positionStrategy }) => $positionStrategy};
+  z-index: ${({ theme, $zIndex, $positionStrategy }) => {
+    if (typeof $zIndex !== 'undefined') {
+        return $zIndex;
+    }
+    return $positionStrategy === 'fixed' ? theme.zIndex.modal : undefined;
+}};
+`;
+const PopperContainer = (props, ref) => {
+    const { children, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "zIndex", "positionStrategy"]);
+    return (React.createElement(StyledContainer, Object.assign({ "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(PopperContainer);

package/esm/Popper/index.js

@@ -0,0 +1,5 @@
+import Popper from './Popper';
+export * from './Popper';
+export * from './PopperContainer';
+export * from './usePopper';
+export default Popper;