@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

package/backdrop/cssm/Component.js

@@ -1,12 +1,22 @@
-import React, { useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import cn from 'classnames';
-import styles from './index.module.css';
-
-const Backdrop = ({ className, open = false, invisible = false, timeout = 200, children, onClose, dataTestId, transitionClassNames = styles, ...restProps }) => {
-    const nodeRef = useRef(null);
-    return (React.createElement(CSSTransition, { timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: !invisible && open, appear: true, ...restProps, nodeRef: nodeRef },
-        React.createElement("div", { ref: nodeRef, "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn(styles.backdrop, className) }, children)));
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Backdrop = function (_a) {
+    var className = _a.className, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.invisible, invisible = _c === void 0 ? false : _c, _d = _a.timeout, timeout = _d === void 0 ? 200 : _d, children = _a.children, onClose = _a.onClose, dataTestId = _a.dataTestId, _e = _a.transitionClassNames, transitionClassNames = _e === void 0 ? styles__default.default : _e, restProps = tslib.__rest(_a, ["className", "open", "invisible", "timeout", "children", "onClose", "dataTestId", "transitionClassNames"]);
+    var nodeRef = React.useRef(null);
+    return (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: !invisible && open, appear: true }, restProps, { nodeRef: nodeRef }),
+        React__default.default.createElement("div", { ref: nodeRef, "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn__default.default(styles__default.default.backdrop, className) }, children)));
 };
 
-export { Backdrop };
+exports.Backdrop = Backdrop;

package/backdrop/cssm/index.js

@@ -1,5 +1,7 @@
-export { Backdrop } from './Component.js';
-import 'react';
-import 'react-transition-group';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Backdrop = Component.Backdrop;

package/badge/cssm/Component.js

@@ -1,6 +1,15 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 function getSize(height) {
     if (height >= 16 && height <= 18)
@@ -19,25 +28,25 @@ function getSize(height) {
  * @deprecated Используйте StatusBadge или Indicator
  */
 // eslint-disable-next-line complexity
-const Badge = ({ className, size = 'm', view, visibleIconOutline = false, visibleColorOutline = false, content, height = 16, iconColor, color = 'accent', iconUnderlayColor = 'static-light', dataTestId, }) => {
-    const isCountView = view === 'count';
-    const isHidden = isCountView && typeof content === 'number' && content <= 0;
-    const componentContent = isCountView && content && content >= 100 ? '99+' : content;
-    const heightSize = getSize(height);
-    return (React.createElement("div", { className: cn(!isCountView && styles.wrapper, iconColor && styles[iconColor], {
-            [styles[size]]: !isCountView,
-            [styles.outline]: !isCountView && visibleIconOutline,
-            [styles.outlineColor]: !isCountView && visibleColorOutline,
-            [styles.countWrapper]: isCountView,
-        }, className), "data-test-id": dataTestId },
-        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], styles[`background-${color}`], styles[`graphic-${iconUnderlayColor}`], iconColor && styles[iconColor], {
-                [styles[heightSize]]: isCountView,
-                [styles.isHidden]: isHidden,
-                [styles.dot]: !content,
-                [styles.outlineCount]: isCountView && visibleIconOutline,
-            }), style: {
-                ...(isCountView && content && { height, minWidth: height }),
-            } }, componentContent)));
+var Badge = function (_a) {
+    var _b, _c;
+    var className = _a.className, _d = _a.size, size = _d === void 0 ? 'm' : _d, view = _a.view, _e = _a.visibleIconOutline, visibleIconOutline = _e === void 0 ? false : _e, _f = _a.visibleColorOutline, visibleColorOutline = _f === void 0 ? false : _f, content = _a.content, _g = _a.height, height = _g === void 0 ? 16 : _g, iconColor = _a.iconColor, _h = _a.color, color = _h === void 0 ? 'accent' : _h, _j = _a.iconUnderlayColor, iconUnderlayColor = _j === void 0 ? 'static-light' : _j, dataTestId = _a.dataTestId;
+    var isCountView = view === 'count';
+    var isHidden = isCountView && typeof content === 'number' && content <= 0;
+    var componentContent = isCountView && content && content >= 100 ? '99+' : content;
+    var heightSize = getSize(height);
+    return (React__default.default.createElement("div", { className: cn__default.default(!isCountView && styles__default.default.wrapper, iconColor && styles__default.default[iconColor], (_b = {},
+            _b[styles__default.default[size]] = !isCountView,
+            _b[styles__default.default.outline] = !isCountView && visibleIconOutline,
+            _b[styles__default.default.outlineColor] = !isCountView && visibleColorOutline,
+            _b[styles__default.default.countWrapper] = isCountView,
+            _b), className), "data-test-id": dataTestId },
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], styles__default.default[view], styles__default.default["background-".concat(color)], styles__default.default["graphic-".concat(iconUnderlayColor)], iconColor && styles__default.default[iconColor], (_c = {},
+                _c[styles__default.default[heightSize]] = isCountView,
+                _c[styles__default.default.isHidden] = isHidden,
+                _c[styles__default.default.dot] = !content,
+                _c[styles__default.default.outlineCount] = isCountView && visibleIconOutline,
+                _c)), style: tslib.__assign({}, (isCountView && content && { height: height, minWidth: height })) }, componentContent)));
 };
 
-export { Badge };
+exports.Badge = Badge;

package/badge/cssm/index.js

@@ -1,4 +1,7 @@
-export { Badge } from './Component.js';
-import 'react';
-import 'classnames';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Badge = Component.Badge;

package/bank-card/cssm/Component.js

@@ -1,49 +1,59 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import cn from 'classnames';
-import { MaskedInput } from '../../masked-input/cssm';
-import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
-import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
-import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
-import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
-import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
-import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
-import { MaskTypeEnum } from './enums.js';
-import { validateCardNumber } from './utils.js';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsMaskedInput = require('../../masked-input/cssm');
+var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
+var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
+var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
+var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
+var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
+var helpers_getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
+var enums = require('./enums.js');
+var utils = require('./utils.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 // prettier-ignore
-const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+var cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
 // prettier-ignore
-const accountNumberMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
-const getBrandIcon = (value = '') => {
+var accountNumberMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+var getBrandIcon = function (value) {
+    if (value === void 0) { value = ''; }
     // Показываем логотип только после ввода всех цифр карты
-    if (value.replace(/\s/g, '').length === 16 && validateCardNumber(value)) {
+    if (value.replace(/\s/g, '').length === 16 && utils.validateCardNumber(value)) {
         if (value.startsWith('2'))
-            return React.createElement(MirXxlIcon, null);
+            return React__default.default.createElement(MirXxlIcon.MirXxlIcon, null);
         if (value.startsWith('4'))
-            return React.createElement(VisaXxlIcon, null);
+            return React__default.default.createElement(VisaXxlIcon.VisaXxlIcon, null);
         if (value.startsWith('5'))
-            return React.createElement(MastercardLIcon, null);
+            return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
         if (value.startsWith('6'))
-            return React.createElement(MastercardLIcon, null);
+            return React__default.default.createElement(MastercardLIcon.MastercardLIcon, null);
     }
     return null;
 };
-const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', value, className, onUsePhoto, onChange, dataTestId, maskType = MaskTypeEnum.Default, inputLabel = getDefaultInputLabel(maskType), }, ref) => {
-    const uncontrolled = value === undefined;
-    const [brandIcon, setBrandIcon] = useState(getBrandIcon(value));
-    const getMask = useCallback((newValue) => {
+var BankCard = React__default.default.forwardRef(function (_a, ref) {
+    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? helpers_getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
+    var uncontrolled = value === undefined;
+    var _f = React.useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
+    var getMask = React.useCallback(function (newValue) {
         switch (maskType) {
-            case MaskTypeEnum.Card:
+            case enums.MaskTypeEnum.Card:
                 return cardMask;
-            case MaskTypeEnum.AccountNumber:
+            case enums.MaskTypeEnum.AccountNumber:
                 return accountNumberMask;
-            case MaskTypeEnum.Default:
+            case enums.MaskTypeEnum.Default:
             default:
                 return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
         }
     }, [maskType]);
-    const handleInputChange = useCallback((event, payload) => {
+    var handleInputChange = React.useCallback(function (event, payload) {
         if (uncontrolled) {
             setBrandIcon(getBrandIcon(event.target.value));
         }
@@ -51,17 +61,17 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIco
             onChange(event, payload);
         }
     }, [onChange, uncontrolled]);
-    const renderRightAddons = useCallback(() => (React.createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
-        React.createElement(CameraMIcon, null))), [onUsePhoto]);
-    useEffect(() => {
+    var renderRightAddons = React.useCallback(function () { return (React__default.default.createElement("button", { type: 'button', className: styles__default.default.usePhoto, onClick: onUsePhoto },
+        React__default.default.createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
+    React.useEffect(function () {
         setBrandIcon(getBrandIcon(value));
     }, [value]);
-    return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement("div", { className: styles.aspectRatioContainer },
-            React.createElement("div", { className: styles.content, style: { backgroundColor } },
-                React.createElement("div", { className: styles.bankLogo }, bankLogo),
-                React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
-                brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
+        React__default.default.createElement("div", { className: styles__default.default.aspectRatioContainer },
+            React__default.default.createElement("div", { className: styles__default.default.content, style: { backgroundColor: backgroundColor } },
+                React__default.default.createElement("div", { className: styles__default.default.bankLogo }, bankLogo),
+                React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default.default.input, labelClassName: styles__default.default.label, filledClassName: styles__default.default.filled, focusedClassName: styles__default.default.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
+                brandIcon && React__default.default.createElement("div", { className: styles__default.default.brandLogo }, brandIcon)))));
 });
 
-export { BankCard };
+exports.BankCard = BankCard;

package/bank-card/cssm/enums.js

@@ -1,8 +1,8 @@
-var MaskTypeEnum;
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.MaskTypeEnum = void 0;
 (function (MaskTypeEnum) {
     MaskTypeEnum["Card"] = "card";
     MaskTypeEnum["AccountNumber"] = "account-number";
     MaskTypeEnum["Default"] = "default";
-})(MaskTypeEnum || (MaskTypeEnum = {}));
-
-export { MaskTypeEnum };
+})(exports.MaskTypeEnum || (exports.MaskTypeEnum = {}));

package/bank-card/cssm/helpers/getDefaultInputLabel.js

@@ -1,15 +1,17 @@
-import { MaskTypeEnum } from '../enums.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const getDefaultInputLabel = (maskType) => {
+var enums = require('../enums.js');
+
+var getDefaultInputLabel = function (maskType) {
     switch (maskType) {
-        case MaskTypeEnum.Card:
+        case enums.MaskTypeEnum.Card:
             return 'Номер карты';
-        case MaskTypeEnum.AccountNumber:
+        case enums.MaskTypeEnum.AccountNumber:
             return 'Номер счёта';
-        case MaskTypeEnum.Default:
+        case enums.MaskTypeEnum.Default:
         default:
             return 'Номер карты или счёта';
     }
 };
 
-export { getDefaultInputLabel };
+exports.getDefaultInputLabel = getDefaultInputLabel;

package/bank-card/cssm/index.js

@@ -1,13 +1,7 @@
-export { BankCard } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../masked-input/cssm';
-import '@alfalab/icons-glyph/CameraMIcon';
-import '@alfalab/icons-logotype/AlfaBankLIcon';
-import '@alfalab/icons-logotype/MastercardLIcon';
-import '@alfalab/icons-logotype/MirXxlIcon';
-import '@alfalab/icons-logotype/VisaXxlIcon';
-import './helpers/getDefaultInputLabel.js';
-import './enums.js';
-import './utils.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.BankCard = Component.BankCard;

package/bank-card/cssm/utils.js

@@ -1,3 +1,5 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
 /**
  * Проверяет номер карты по алгоритму Луна
  *
@@ -5,10 +7,10 @@
  *
  */
 function validateCardNumber(cardNumber) {
-    const digits = cardNumber.replace(/\s+/g, '');
-    let sum = 0;
-    for (let i = 0; i < digits.length; i++) {
-        let cardNum = parseInt(digits[i], 10);
+    var digits = cardNumber.replace(/\s+/g, '');
+    var sum = 0;
+    for (var i = 0; i < digits.length; i++) {
+        var cardNum = parseInt(digits[i], 10);
         if (cardNum > 9)
             return false;
         if ((digits.length - i) % 2 === 0) {
@@ -22,4 +24,4 @@ function validateCardNumber(cardNumber) {
     return sum % 10 === 0;
 }
 
-export { validateCardNumber };
+exports.validateCardNumber = validateCardNumber;