@alfalab/core-components 20.2.0 → 20.4.0

package/phone-input/cssm/Component.js

@@ -0,0 +1,134 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var textMaskCore = require('text-mask-core');
+var coreComponentsMaskedInput = require('../../masked-input/cssm');
+var utils_index = require('./utils/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 mask = [
+    '+',
+    '7',
+    ' ',
+    /([0-6]|[8-9])/,
+    /\d/,
+    /\d/,
+    ' ',
+    /\d/,
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+    '-',
+    /\d/,
+    /\d/,
+];
+var countryPrefix = '+7 ';
+var PhoneInput = React__default['default'].forwardRef(function (_a, ref) {
+    var _b = _a.clearableCountryCode, clearableCountryCode = _b === void 0 ? true : _b, restProps = __rest(_a, ["clearableCountryCode"]);
+    var inputRef = React.useRef(null);
+    // Оставляет возможность прокинуть ref извне
+    React.useImperativeHandle(ref, function () { return inputRef.current; });
+    var handleBeforeDisplay = React.useCallback(function (conformedValue, config) {
+        var rawValue = config.rawValue, previousConformedValue = config.previousConformedValue, currentCaretPosition = config.currentCaretPosition;
+        /*
+         * код ниже нужен для фикса следующих багов библиотеки text-mask:
+         * 1) так как код страны указан в маске жестко как "+7",
+         * то при удалении цифры перед ним каретка устанавливается перед кодом страны
+         * 2) в номере телефона есть пробелы и дефисы,
+         * при редактировании цифр рядом с этими символами каретка перескакивает через них,
+         * а не остается на том же месте, на котором была до редактирования
+         */
+        var previousValueWithoutFormatting = previousConformedValue
+            ? utils_index.deleteFormatting(previousConformedValue)
+            : '';
+        var currentValueWithoutFormatting = utils_index.deleteFormatting(conformedValue) || '';
+        if (previousConformedValue &&
+            (([3, 6].includes(currentCaretPosition) &&
+                Math.abs(previousValueWithoutFormatting.length -
+                    currentValueWithoutFormatting.length) === 1) ||
+                ([7, 10, 13].includes(currentCaretPosition) &&
+                    previousConformedValue.length > currentCaretPosition))) {
+            utils_index.setCaretPosition({ position: currentCaretPosition, inputRef: inputRef });
+        }
+        // Удаление цифры перед кодом страны удаляет только саму цифру, код остается ("+7 1" -> "+7 ")
+        if (rawValue === countryPrefix) {
+            return rawValue;
+        }
+        // Вставка номера с 10 цифрами без кода страны
+        if (rawValue.length === 10 && conformedValue.length === mask.length) {
+            var masked = textMaskCore.conformToMask("+7" + rawValue, mask, config);
+            return masked.conformedValue;
+        }
+        var insertedNumber = utils_index.getInsertedNumber({
+            rawValue: rawValue,
+            clearableCountryCode: clearableCountryCode,
+            countryPrefix: countryPrefix,
+            previousConformedValue: previousConformedValue,
+        });
+        // Вставка номера, начинающегося с 8 или 7: 89990313131, 71112223344
+        if (conformedValue.length === mask.length &&
+            (insertedNumber.startsWith('8') || insertedNumber.startsWith('7'))) {
+            var masked = textMaskCore.conformToMask("+7" + insertedNumber.slice(1), mask, config);
+            return masked.conformedValue;
+        }
+        // Если ввод начат с 7 или 8 - выводит "+7 " и дает продолжить ввод со след. цифры
+        if (rawValue.length === 1 && ['7', '8'].includes(rawValue[0])) {
+            return countryPrefix;
+        }
+        var abortCountryCodeClearing = !clearableCountryCode && !conformedValue;
+        if (abortCountryCodeClearing) {
+            utils_index.setCaretPosition({ position: countryPrefix.length, inputRef: inputRef });
+            if (!rawValue.length)
+                return countryPrefix;
+            return false;
+        }
+        return conformedValue;
+    }, [clearableCountryCode]);
+    return (React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, __assign({}, restProps, { defaultValue: clearableCountryCode ? restProps.defaultValue : countryPrefix, mask: mask, onBeforeDisplay: handleBeforeDisplay, type: 'tel', ref: inputRef })));
+});
+
+exports.PhoneInput = PhoneInput;

package/phone-input/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/phone-input/cssm/index.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('text-mask-core');
+require('../../masked-input/cssm');
+require('./utils/index.js');
+
+
+
+exports.PhoneInput = Component.PhoneInput;

package/phone-input/cssm/utils/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+declare const deleteFormatting: (phone: string) => string;
+declare function setCaretPosition({ position, inputRef, }: {
+    position: number;
+    inputRef: React.RefObject<HTMLInputElement>;
+}): void;
+declare function getInsertedNumber({ rawValue, clearableCountryCode, countryPrefix, previousConformedValue, }: {
+    rawValue: string;
+    clearableCountryCode: boolean;
+    countryPrefix: string;
+    previousConformedValue: string;
+}): string;
+export { deleteFormatting, setCaretPosition, getInsertedNumber };

package/phone-input/cssm/utils/index.js

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Удаляет форматирование номера телефона
+ * @param phone Номер телефона
+ */
+var deleteFormatting = function (phone) {
+    return phone
+        .replace('+', '')
+        .replace(/^7/, '')
+        .replace(/\s/g, '')
+        .replace(/-/g, '');
+};
+function setCaretPosition(_a) {
+    var position = _a.position, inputRef = _a.inputRef;
+    window.requestAnimationFrame(function () {
+        if (inputRef === null || !inputRef.current)
+            return;
+        inputRef.current.setSelectionRange(position, position);
+    });
+}
+function getInsertedNumber(_a) {
+    var rawValue = _a.rawValue, clearableCountryCode = _a.clearableCountryCode, countryPrefix = _a.countryPrefix, previousConformedValue = _a.previousConformedValue;
+    if (!clearableCountryCode && previousConformedValue === countryPrefix) {
+        if (rawValue.startsWith('7') || rawValue.startsWith('8')) {
+            return rawValue;
+        }
+        return rawValue.slice(countryPrefix.length);
+    }
+    return rawValue;
+}
+
+exports.deleteFormatting = deleteFormatting;
+exports.getInsertedNumber = getInsertedNumber;
+exports.setCaretPosition = setCaretPosition;

package/picker-button/{Component-a2e04b2b.d.ts → Component-cb99627b.d.ts}

@@ -312,6 +312,10 @@ type BaseSelectProps = {
      * Начальное состояние селекта
      */
     defaultOpen?: boolean;
+    /**
+     * Управление открытием
+     */
+    open?: boolean;
     /**
      * Возможность выбрать несколько значений
      */

package/picker-button/{Component-a2e04b2b.js → Component-cb99627b.js}

@@ -48,7 +48,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"iconContainer":"picker-button__iconContainer_1d1ft","open":"picker-button__open_1d1ft"};
+var styles = {"iconContainer":"picker-button__iconContainer_1r9iy","open":"picker-button__open_1r9iy"};
 require('./field/index.css');
 
 var Field = function (_a) {

package/picker-button/Component.d.ts

@@ -9,7 +9,7 @@ type PickerButtonProps = Omit<BaseSelectProps, 'Field' | 'placeholder' | 'Arrow'
      */
     size?: PickerButtonSize;
 };
-declare const PickerButton: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "className" | "dataTestId" | "label" | "block" | "id" | "onBlur" | "onChange" | "onScroll" | "disabled" | "name" | "fieldClassName" | "error" | "preventFlip" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Option" | "optionsListClassName" | "optionClassName" | "circularNavigation" | "nativeSelect" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & Pick<Partial<import("../button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> | Partial<import("../button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>>, "view" | "leftAddons" | "loading"> & {
+declare const PickerButton: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "className" | "dataTestId" | "label" | "block" | "id" | "onBlur" | "onChange" | "onScroll" | "disabled" | "name" | "fieldClassName" | "error" | "preventFlip" | "open" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Option" | "optionsListClassName" | "optionClassName" | "circularNavigation" | "nativeSelect" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & Pick<Partial<import("../button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> | Partial<import("../button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>>, "view" | "leftAddons" | "loading"> & {
     /**
      * Размер кнопки
      */

package/picker-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('./Component-a2e04b2b.js');
+var field_Component = require('./Component-cb99627b.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsSelect = require('../select');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"container":"picker-button__container_ih76g"};
+var styles = {"container":"picker-button__container_azo3q"};
 require('./index.css');
 
 var PickerButton = React.forwardRef(function (_a, ref) {

package/picker-button/{esm/Component-69cca889.d.ts → cssm/Component-c7d52094.d.ts}

@@ -312,6 +312,10 @@ type BaseSelectProps = {
      * Начальное состояние селекта
      */
     defaultOpen?: boolean;
+    /**
+     * Управление открытием
+     */
+    open?: boolean;
     /**
      * Возможность выбрать несколько значений
      */

package/picker-button/cssm/Component-c7d52094.js

@@ -0,0 +1,62 @@
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../../button/cssm');
+var ArrowDownMIcon = require('@alfalab/icons-classic/ArrowDownMIcon');
+var ArrowDownSIcon = require('@alfalab/icons-classic/ArrowDownSIcon');
+var styles = require('./field/index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+function __rest(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 Field = function (_a) {
+    var _b = _a.buttonSize, buttonSize = _b === void 0 ? 'm' : _b, view = _a.view, label = _a.label, open = _a.open, multiple = _a.multiple, rightAddons = _a.rightAddons, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, selected = _a.selected, selectedMultiple = _a.selectedMultiple, valueRenderer = _a.valueRenderer, restProps = __rest(_a, ["buttonSize", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "valueRenderer"]);
+    var Icon = buttonSize === 'xs' ? ArrowDownSIcon.ArrowDownSIcon : ArrowDownMIcon.ArrowDownMIcon;
+    var buttonProps = exports.__assign(exports.__assign({}, restProps), innerProps);
+    return (React__default['default'].createElement(coreComponentsButton.Button, exports.__assign({}, buttonProps, { rightAddons: React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].iconContainer, open && styles__default['default'].open) },
+            React__default['default'].createElement(Icon, { "data-test-id": 'picker-button-icon' })), block: true, view: view, size: buttonSize, className: cn__default['default'](styles__default['default'].component, view === 'primary' && styles__default['default'].primary, className) }), label));
+};
+
+exports.Field = Field;
+exports.__rest = __rest;

package/picker-button/cssm/Component.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonProps } from "../../button";
+import { BaseSelectProps } from "../../select";
+type PickerButtonSize = 'xs' | 's' | 'm';
+type PickerButtonProps = Omit<BaseSelectProps, 'Field' | 'placeholder' | 'Arrow' | 'autocomplete' | 'size' | 'onFocus' | 'selected' | 'closeOnSelect' | 'multiple' | 'fieldProps' | 'hint' | 'allowUnselect'> & Pick<ButtonProps, 'view' | 'loading' | 'leftAddons'> & {
+    /**
+     * Размер кнопки
+     */
+    size?: PickerButtonSize;
+};
+declare const PickerButton: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "className" | "dataTestId" | "label" | "block" | "id" | "onBlur" | "onChange" | "onScroll" | "disabled" | "name" | "fieldClassName" | "error" | "preventFlip" | "open" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Option" | "optionsListClassName" | "optionClassName" | "circularNavigation" | "nativeSelect" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & Pick<Partial<import("../../button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> | Partial<import("../../button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>>, "view" | "leftAddons" | "loading"> & {
+    /**
+     * Размер кнопки
+     */
+    size?: "s" | "xs" | "m" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { PickerButtonSize, PickerButtonProps, PickerButton };

package/picker-button/cssm/Component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var field_Component = require('./Component-c7d52094.js');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsSelect = require('../../select/cssm');
+require('../../button/cssm');
+require('@alfalab/icons-classic/ArrowDownMIcon');
+require('@alfalab/icons-classic/ArrowDownSIcon');
+require('./field/index.module.css');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var PickerButton = React.forwardRef(function (_a, ref) {
+    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, view = _a.view, loading = _a.loading, _e = _a.size, size = _e === void 0 ? 'm' : _e, className = _a.className, leftAddons = _a.leftAddons, restProps = field_Component.__rest(_a, ["OptionsList", "Optgroup", "Option", "view", "loading", "size", "className", "leftAddons"]);
+    return (React__default['default'].createElement(coreComponentsSelect.BaseSelect, field_Component.__assign({}, restProps, { ref: ref, Option: Option, Field: field_Component.Field, size: size === 'm' ? 'm' : 's', fieldProps: {
+            view: view,
+            loading: loading,
+            /** size у select, button несовместимы */
+            buttonSize: size,
+            leftAddons: leftAddons,
+        }, Optgroup: Optgroup, OptionsList: OptionsList, className: cn__default['default'](styles__default['default'].container, className), selected: [], closeOnSelect: true })));
+});
+
+exports.PickerButton = PickerButton;

package/picker-button/cssm/field/Component.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var field_Component = require('../Component-c7d52094.js');
+require('react');
+require('classnames');
+require('../../../button/cssm');
+require('@alfalab/icons-classic/ArrowDownMIcon');
+require('@alfalab/icons-classic/ArrowDownSIcon');
+require('./index.module.css');
+
+
+
+exports.Field = field_Component.Field;

package/picker-button/cssm/field/index.d.ts

@@ -0,0 +1 @@
+export * from "../Component-c7d52094";

package/picker-button/cssm/field/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var field_Component = require('../Component-c7d52094.js');
+require('react');
+require('classnames');
+require('../../../button/cssm');
+require('@alfalab/icons-classic/ArrowDownMIcon');
+require('@alfalab/icons-classic/ArrowDownSIcon');
+require('./index.module.css');
+
+
+
+exports.Field = field_Component.Field;

package/picker-button/cssm/field/index.module.css

@@ -0,0 +1,18 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --arrow-transform: rotate(180deg);
+}
+.iconContainer {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+}
+.open {
+    transform: var(--arrow-transform);
+}

package/picker-button/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/picker-button/cssm/index.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./Component-c7d52094.js');
+require('react');
+require('classnames');
+require('../../select/cssm');
+require('../../button/cssm');
+require('@alfalab/icons-classic/ArrowDownMIcon');
+require('@alfalab/icons-classic/ArrowDownSIcon');
+require('./field/index.module.css');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.PickerButton = Component.PickerButton;

package/picker-button/cssm/index.module.css

@@ -0,0 +1,3 @@
+.container {
+    min-width: auto;
+}