@sima-land/ui-nucleons 40.0.0 → 40.2.2

package/field-grid/index.js

@@ -41,7 +41,7 @@ const TypeCheck = {
  * @param props Свойства.
  * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
  * @param props.rootProps Свойства корневого элемента.
- * @return Компонент сетки полей.
+ * @return Элемент.
  */
 const FieldGrid = ({ children, rootProps }) => {
     const rows = react_1.Children.toArray(children).filter(TypeCheck.isRow);
@@ -111,7 +111,7 @@ const Row = ({ isFirst: isFirstRow, isLast: isLastRow, children }) => {
  * @param props.rounds Скругления для поля (будет задан автоматически).
  * @param props.field Поле.
  * @param props.renderField Должна вернуть поле получив свойства для него.
- * @return Компонент ряда для сетки полей.
+ * @return Элемент.
  */
 const Cell = ({ size, rounds, field, renderField }) => {
     var _a;
@@ -127,7 +127,7 @@ const Cell = ({ size, rounds, field, renderField }) => {
             className: cx(field.props.className, 'size-full'),
         });
     }
-    return (react_1.default.createElement("div", { className: cx('cell', `size-${size}`) }, content));
+    return react_1.default.createElement("div", { className: cx('cell', `size-${size}`) }, content);
 };
 exports.FieldGrid.Row = Row;
 exports.FieldGrid.Cell = Cell;

package/file-icon/index.js

@@ -34,11 +34,10 @@ const VARIANTS = {
 const FileIcon = (_a) => {
     var { type } = _a, svgProps = __rest(_a, ["type"]);
     const typeProps = VARIANTS[type];
-    return type && typeProps
-        ? (react_1.default.createElement("svg", Object.assign({ width: '32', height: '32', viewBox: '0 0 32 32' }, svgProps),
-            react_1.default.createElement("path", { opacity: '0.88', d: 'M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z', fill: typeProps.fill }),
-            react_1.default.createElement("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: 'white' }),
-            react_1.default.createElement("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }),
-            react_1.default.createElement("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff' }, type.toUpperCase()))) : (react_1.default.createElement(unknown_svg_1.default, Object.assign({}, svgProps)));
+    return type && typeProps ? (react_1.default.createElement("svg", Object.assign({ width: '32', height: '32', viewBox: '0 0 32 32' }, svgProps),
+        react_1.default.createElement("path", { opacity: '0.88', d: 'M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z', fill: typeProps.fill }),
+        react_1.default.createElement("path", { opacity: '0.32', d: 'M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z', fill: 'white' }),
+        react_1.default.createElement("path", { opacity: '0.24', d: 'M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z', fill: 'black' }),
+        react_1.default.createElement("text", { x: '16', y: '23', textAnchor: 'middle', fontSize: '6.5', fontWeight: '700', fill: '#fff' }, type.toUpperCase()))) : (react_1.default.createElement(unknown_svg_1.default, Object.assign({}, svgProps)));
 };
 exports.FileIcon = FileIcon;

package/helpers/bounds-of.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @return Ограничивающий прямоугольник.
  */
 function boundsOf(element) {
-    return (element instanceof Element
-        ? element.getBoundingClientRect()
-        : null);
+    return (element instanceof Element ? element.getBoundingClientRect() : null);
 }
 exports.default = boundsOf;

package/helpers/find-child-element.js

@@ -14,9 +14,7 @@ const lodash_1 = require("lodash");
  */
 const findChildElement = ({ target, startIndex = 0, increment = 1, defaultResult = -1, isSuitable, needBreakLoop = lodash_1.identity, }) => {
     let result = defaultResult;
-    if (target
-        && target.children
-        && isSuitable !== undefined) {
+    if (target && target.children && isSuitable !== undefined) {
         const { children } = target;
         for (let i = startIndex; i >= 0 && i < children.length; i += increment) {
             const sibling = children[i];

package/helpers/find-offset-parent.js

@@ -9,9 +9,10 @@ exports.findOffsetParent = void 0;
 const findOffsetParent = (element) => {
     let parent = element.offsetParent || document.body;
     if (getComputedStyle(parent).position === 'static') {
-        parent = getComputedStyle(document.documentElement).position === 'static'
-            ? null
-            : document.documentElement;
+        parent =
+            getComputedStyle(document.documentElement).position === 'static'
+                ? null
+                : document.documentElement;
     }
     return parent;
 };

package/helpers/fit-element-height.js

@@ -9,7 +9,7 @@ exports.fitElementHeight = void 0;
 const fitElementHeight = ({ target }) => {
     target.style.height = 'auto';
     // актуальные значения после установки "auto" (в начало функции не переносить)
-    const { scrollHeight, offsetHeight, clientHeight, } = target;
+    const { scrollHeight, offsetHeight, clientHeight } = target;
     target.style.height = `${scrollHeight + offsetHeight - clientHeight}px`;
 };
 exports.fitElementHeight = fitElementHeight;

package/helpers/format-date.js

@@ -21,7 +21,9 @@ const createDateFormatter = ({ formatFrom = ['yyyy-MM-dd', 'dd.MM.yyyy'], format
     const date = (0, exports.parseMultiple)(dateString, formatFrom, new Date());
     let result = invalidPlaceholder;
     if ((0, isValid_1.default)(date)) {
-        result = (0, format_1.default)(date, (0, lodash_1.isFunction)(formatTo) ? formatTo(new Date(date.getTime())) : formatTo, { locale: ru_1.default });
+        result = (0, format_1.default)(date, (0, lodash_1.isFunction)(formatTo) ? formatTo(new Date(date.getTime())) : formatTo, {
+            locale: ru_1.default,
+        });
     }
     return result;
 };

package/helpers/get-fraction-depth.js

@@ -8,8 +8,6 @@ exports.getFractionDepth = void 0;
  */
 const getFractionDepth = (fraction = null) => {
     const fractionString = Number(fraction).toString();
-    return fractionString.includes('.')
-        ? fractionString.length - fractionString.indexOf('.') - 1
-        : 0;
+    return fractionString.includes('.') ? fractionString.length - fractionString.indexOf('.') - 1 : 0;
 };
 exports.getFractionDepth = getFractionDepth;

package/hooks/breakpoint/index.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBreakpoint = exports.BreakpointProvider = void 0;
 const react_1 = __importStar(require("react"));
+const __1 = require("..");
 const is_browser_1 = __importDefault(require("../../helpers/is-browser"));
 const utils_1 = require("./utils");
 const Context = (0, react_1.createContext)(null);
@@ -34,7 +35,7 @@ const Context = (0, react_1.createContext)(null);
  */
 const BreakpointProvider = ({ children }) => {
     const [contextValue, setRegistry] = (0, react_1.useState)(null);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, __1.useIsomorphicLayoutEffect)(() => {
         (0, is_browser_1.default)() && setRegistry((0, utils_1.createRegistry)());
     }, []);
     return react_1.default.createElement(Context.Provider, { value: contextValue }, children);
@@ -51,7 +52,7 @@ const useBreakpoint = (query) => {
     }
     const registry = (0, react_1.useContext)(Context);
     const [matches, setMatches] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, __1.useIsomorphicLayoutEffect)(() => {
         if (registry) {
             const subscription = registry.subscribe(query, e => {
                 setMatches(e.matches);

package/hooks/identity.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 /**
  * Реф с актуальным переданным значением.
+ * Нужен, когда в ref-значение нужно обновлять значение при каждом рендере.
  * @param value Значение.
  * @return Реф.
  */

package/hooks/identity.js

@@ -4,6 +4,7 @@ exports.useIdentityRef = void 0;
 const react_1 = require("react");
 /**
  * Реф с актуальным переданным значением.
+ * Нужен, когда в ref-значение нужно обновлять значение при каждом рендере.
  * @param value Значение.
  * @return Реф.
  */

package/hooks/index.d.ts

@@ -21,3 +21,8 @@ export declare const useInfiniteScroll: (ref: React.MutableRefObject<HTMLElement
  * @param callback Сработает при клике вне элемента.
  */
 export declare const useOutsideClick: (elementRef: React.MutableRefObject<HTMLElement | undefined | null>, callback: (e: MouseEvent) => void) => void;
+/**
+ * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.
+ * @see {@link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-2911761}
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
+exports.useIsomorphicLayoutEffect = exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
 const react_1 = require("react");
 const is_touch_device_1 = require("../helpers/is-touch-device");
 const lodash_1 = require("lodash");
@@ -32,7 +32,7 @@ const useInfiniteScroll = (ref, { onFullScroll, threshold = 0, }) => {
         const { current: element } = ref;
         if (element) {
             return (0, on_1.default)(element, 'scroll', (event) => {
-                const { scrollTop, clientHeight, scrollHeight, } = event.target;
+                const { scrollTop, clientHeight, scrollHeight } = event.target;
                 const bottom = threshold + scrollTop + clientHeight;
                 const isFullyScrolled = bottom >= scrollHeight;
                 if (isFullyScrolled && onFullScroll) {
@@ -62,3 +62,8 @@ const useOutsideClick = (elementRef, callback) => {
     }), []);
 };
 exports.useOutsideClick = useOutsideClick;
+/**
+ * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.
+ * @see {@link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-2911761}
+ */
+exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;

package/layout/index.js

@@ -42,7 +42,7 @@ const cx = bind_1.default.bind(layout_module_scss_1.default);
  * Возвращает созданный функциональный компонент, формирующий Layout.
  * @param specificClass Специальный класс.
  * @param displayName Отображаемое имя компонента.
- * @return Компонент.
+ * @return Элемент.
  */
 const createLayout = (specificClass, displayName) => {
     const Component = (0, react_1.forwardRef)((_a, ref) => {

package/link/index.js

@@ -45,9 +45,7 @@ const cx = bind_1.default.bind(link_module_scss_1.default);
  * @param noIndex Флаг запрета индексации.
  * @return Объект со свойствами, формирующими содержимое..
  */
-const getContentProps = (children, noIndex) => noIndex
-    ? { dangerouslySetInnerHTML: (0, get_no_index_1.getNoIndex)(children) }
-    : { children };
+const getContentProps = (children, noIndex) => noIndex ? { dangerouslySetInnerHTML: (0, get_no_index_1.getNoIndex)(children) } : { children };
 /**
  * Компонент ссылки.
  * @param props Свойства компонента. Поддерживаются свойства span/a.

package/loading-overlay/index.d.ts

@@ -15,4 +15,4 @@ export interface LoadingOverlayProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const LoadingOverlay: ({ style, className, spinnerProps, fill }: LoadingOverlayProps) => JSX.Element;
+export declare const LoadingOverlay: ({ style, className, spinnerProps, fill, }: LoadingOverlayProps) => JSX.Element;

package/loading-overlay/index.js

@@ -14,6 +14,6 @@ const cx = bind_1.default.bind(loading_overlay_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const LoadingOverlay = ({ style, className, spinnerProps = {}, fill = true }) => (react_1.default.createElement("div", { className: cx('loading-overlay', fill && 'fill', className), style: style },
+const LoadingOverlay = ({ style, className, spinnerProps = {}, fill = true, }) => (react_1.default.createElement("div", { className: cx('loading-overlay', fill && 'fill', className), style: style },
     react_1.default.createElement(spinner_1.Spinner, Object.assign({}, spinnerProps))));
 exports.LoadingOverlay = LoadingOverlay;

package/modal/index.js

@@ -68,7 +68,7 @@ exports.Modal = Modal;
 const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
     const layer = (0, layer_1.useLayer)() + 100;
     const rootRef = (0, react_1.useRef)(null);
-    const handleClose = (0, utils_1.useCloseHandler)(onClose);
+    const bind = (0, utils_1.useCloseHandler)(onClose);
     const fullscreen = size === 'fullscreen';
     const { header, content, footer, overlap } = (0, define_slots_1.defineSlots)(children, {
         header: slots_1.ModalHeader,
@@ -88,7 +88,7 @@ const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserv
         '--footer-height': `${footerHeight}px`,
     };
     (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, scrollDisableOptions);
-    return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('overlay'), "data-testid": 'modal:overlay', style: { zIndex: layer } }, handleClose),
+    return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('overlay'), "data-testid": 'modal:overlay', style: { zIndex: layer } }, bind),
         react_1.default.createElement("div", { className: cx('modal', `size-${size}`, !fullscreen && shadows_1.BoxShadow.z4), style: style, "data-testid": testId },
             header &&
                 (0, react_1.cloneElement)(header, {

package/modal/utils.d.ts

@@ -1,6 +1,7 @@
 /**
- * @param callback Сработает при закрытии.
- * @return Свойства для закрывающего элемента.
+ * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
+ * @param callback Сработает при клике.
+ * @return Свойства для целевого элемента.
  */
 export declare const useCloseHandler: (callback?: (() => void) | undefined) => {
     onMouseUp: ({ target, currentTarget, button }: any) => void;

package/modal/utils.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseHandler = void 0;
 const react_1 = require("react");
 /**
- * @param callback Сработает при закрытии.
- * @return Свойства для закрывающего элемента.
+ * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
+ * @param callback Сработает при клике.
+ * @return Свойства для целевого элемента.
  */
 const useCloseHandler = (callback) => {
     const mouseDownTarget = (0, react_1.useRef)();
@@ -14,11 +15,11 @@ const useCloseHandler = (callback) => {
         }
     }, []);
     const onMouseUp = (0, react_1.useCallback)(({ target, currentTarget, button }) => {
-        callback
-            && button === 0
-            && target === currentTarget
-            && currentTarget === mouseDownTarget.current
-            && callback();
+        callback &&
+            button === 0 &&
+            target === currentTarget &&
+            currentTarget === mouseDownTarget.current &&
+            callback();
     }, [callback]);
     return { onMouseUp, onMouseDown };
 };

package/nav-bar/index.d.ts

@@ -4,6 +4,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
     stub?: boolean;
     shift?: 'left' | 'right';
+    'data-testid'?: string;
 }
 export interface NavBarProps {
     /** Заголовок. */

package/nav-bar/index.js

@@ -71,6 +71,6 @@ exports.NavBar = NavBar;
  */
 const NavButton = (_a) => {
     var { text, icon: Icon, stub = false, shift, className } = _a, buttonProps = __rest(_a, ["text", "icon", "stub", "shift", "className"]);
-    return (react_1.default.createElement("button", Object.assign({}, buttonProps, { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
+    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
 };
 exports.NavButton = NavButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "40.0.0",
+  "version": "40.2.2",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -18,7 +18,7 @@
     "lodash": "^4.17.21",
     "overlayscrollbars": "^1.13.1",
     "overlayscrollbars-react": "^0.2.2",
-    "react-transition-group": "^4.3.0"
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -28,12 +28,13 @@
     "@babel/preset-react": "^7.12.10",
     "@rushstack/eslint-patch": "^1.0.6",
     "@sima-land/linters": "^2.1.0",
-    "@storybook/addon-actions": "^6.3.5",
-    "@storybook/addon-backgrounds": "^6.3.5",
-    "@storybook/addon-docs": "^6.3.5",
-    "@storybook/addon-storysource": "^6.3.5",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/react": "^6.3.5",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-backgrounds": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-storysource": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/theming": "^6.3.12",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
@@ -44,6 +45,7 @@
     "@types/lodash": "^4.14.168",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
+    "@types/react-transition-group": "^4.4.3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
@@ -65,7 +67,7 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
-    "react-docgen-typescript": "^1.21.0",
+    "react-docgen-typescript": "^2.1.1",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "sass": "^1.30.0",
@@ -93,6 +95,8 @@
     "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
     "lint:styles": "stylelint 'src/**/*.{css,scss}'",
     "storybook": "start-storybook -p 9009 -c .storybook",
-    "storybook:build": "build-storybook --no-dll --quiet --loglevel error -o build-storybook"
+    "storybook:build": "build-storybook --no-dll --quiet --loglevel error -o build-storybook",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error",
+    "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   }
 }

package/pagination/base-pagination.js

@@ -62,34 +62,32 @@ const BasePagination = ({ total, current, onButtonClick, isButtonSelected = (0,
         buttonKeys: exports.BUTTON_TYPES,
     });
     return (react_1.default.createElement("div", { className: (0, utils_1.cx)('base-pagination-wrapper') },
-        needPrevButton({ current, total }) && renderButton({
-            'aria-label': 'Назад',
-            type: exports.BUTTON_TYPES.prev,
-            children: exports.BUTTON_CONTENTS.prev,
-            onClick: () => onButtonClick && onButtonClick(current - 1),
-            page: current - 1,
-        }),
+        needPrevButton({ current, total }) &&
+            renderButton({
+                'aria-label': 'Назад',
+                type: exports.BUTTON_TYPES.prev,
+                children: exports.BUTTON_CONTENTS.prev,
+                onClick: () => onButtonClick && onButtonClick(current - 1),
+                page: current - 1,
+            }),
         pageButtons.map(({ content, value }, index) => renderButton({
-            type: content === exports.BUTTON_TYPES.more
-                ? exports.BUTTON_TYPES.more
-                : undefined,
+            type: content === exports.BUTTON_TYPES.more ? exports.BUTTON_TYPES.more : undefined,
             isFirst: index === 0,
             isLast: index === pageButtons.length - 1,
-            children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content)
-                ? exports.BUTTON_CONTENTS[content]
-                : content,
+            children: (0, lodash_1.has)(exports.BUTTON_CONTENTS, content) ? exports.BUTTON_CONTENTS[content] : content,
             selected: isButtonSelected(content),
             'aria-label': `Перейти на страницу ${value}`,
             onClick: () => onButtonClick && onButtonClick(value),
             page: value,
         }, index)),
-        needNextButton({ current, total }) && renderButton({
-            'aria-label': 'Вперед',
-            type: exports.BUTTON_TYPES.next,
-            children: exports.BUTTON_CONTENTS.next,
-            onClick: () => onButtonClick && onButtonClick(current + 1),
-            page: current + 1,
-        })));
+        needNextButton({ current, total }) &&
+            renderButton({
+                'aria-label': 'Вперед',
+                type: exports.BUTTON_TYPES.next,
+                children: exports.BUTTON_CONTENTS.next,
+                onClick: () => onButtonClick && onButtonClick(current + 1),
+                page: current + 1,
+            })));
 };
 exports.BasePagination = BasePagination;
 const resolveRounded = (0, fp_1.cond)([

package/pagination/index.js

@@ -12,8 +12,6 @@ const base_pagination_1 = require("./base-pagination");
  * @return Элемент.
  */
 const Pagination = ({ total, current, onChange, renderButton, }) => (react_1.default.createElement(base_pagination_1.BasePagination, { total: total, current: current, renderButton: renderButton, onButtonClick: content => {
-        Number.isFinite(content)
-            && onChange
-            && onChange({ value: content });
+        Number.isFinite(content) && onChange && onChange({ value: content });
     } }));
 exports.Pagination = Pagination;

package/pagination/utils.d.ts

@@ -41,7 +41,7 @@ export declare const getPageButtons: ({ current, total, buttonKeys, }: {
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total, }: State) => number[];
+export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
 /**
  * Возвращает список чисел вокруг заданного.
  * @param props Свойства.
@@ -50,5 +50,5 @@ export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getRangeNumbers: ({ current, range: rangeSize, total, }: State) => number[];
+export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
 export {};

package/pagination/utils.js

@@ -14,7 +14,10 @@ exports.cx = bind_1.default.bind(pagination_module_scss_1.default);
  * @param content Содержимое кнопки.
  * @return Список кнопок.
  */
-const PageButton = (value, content = value) => ({ value, content });
+const PageButton = (value, content = value) => ({
+    value,
+    content,
+});
 exports.PageButton = PageButton;
 /**
  * Возвращает список кнопок навигации.
@@ -40,9 +43,7 @@ const getPageButtons = ({ current, total, buttonKeys = { more: '...' }, }) => {
             else {
                 list.unshift((0, exports.PageButton)(1), 
                 // не выводим многоточие когда вместо него можно поставить одно число
-                list[0].value === 3
-                    ? (0, exports.PageButton)(2)
-                    : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
+                list[0].value === 3 ? (0, exports.PageButton)(2) : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
             }
         }
         if (list[list.length - 1].value < total) {
@@ -72,7 +73,7 @@ exports.getPageButtons = getPageButtons;
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getCorrectRangeNumbers = ({ current, range: rangeSize, total, }) => {
+const getCorrectRangeNumbers = ({ current, range: rangeSize, total }) => {
     let result = [
         ...(0, exports.getRangeNumbers)({
             current,
@@ -99,7 +100,7 @@ exports.getCorrectRangeNumbers = getCorrectRangeNumbers;
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getRangeNumbers = ({ current, range: rangeSize, total, }) => {
+const getRangeNumbers = ({ current, range: rangeSize, total }) => {
     const pageNumbers = [];
     const readyRange = Math.min(rangeSize, total) || 0;
     const halfRange = Math.floor(readyRange / 2);

package/panel/index.js

@@ -16,9 +16,7 @@ const cx = bind_1.default.bind(panel_module_scss_1.default);
  * @return Элемент.
  */
 const Panel = ({ color: panelColor = 'gray4', contentColor = 'gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
-    const contentProps = html
-        ? { dangerouslySetInnerHTML: { __html: html } }
-        : { children };
+    const contentProps = html ? { dangerouslySetInnerHTML: { __html: html } } : { children };
     return (react_1.default.createElement("div", { className: cx('panel', inline && 'inline', (0, colors_1.bgColor)(panelColor), className), "data-testid": testId },
         Icon && (react_1.default.createElement(Icon, { fill: colors_2.COLORS.get(contentColor), width: 16, height: 20, className: cx('icon'), "aria-hidden": 'true' })),
         react_1.default.createElement("div", Object.assign({}, contentProps, { className: cx('content', (0, colors_1.color)(contentColor)) }))));

package/phone-input/index.js

@@ -83,32 +83,31 @@ const PhoneInput = (_a) => {
             react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
             react_1.default.createElement(AdornmentSVG, { fill: colors_1.COLORS.get('gray38'), className: (0, sizes_1.marginLeft)(1) }))) });
     return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', className) },
-        country.id === presets_1.IDS.other
-            ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { onChange: (e) => {
-                    e.target.value = e.target.value.replace(/\D/g, '').slice(0, 20);
-                    onChange && onChange(e);
-                }, onBlur: e => {
-                    onBlur && onBlur(e, {
+        country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { onChange: (e) => {
+                e.target.value = e.target.value.replace(/\D/g, '').slice(0, 20);
+                onChange && onChange(e);
+            }, onBlur: e => {
+                onBlur &&
+                    onBlur(e, {
                         value: e.target.value,
                         cleanValue: e.target.value,
                         ready: e.target.value.length > 0,
                     });
-                } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
+            } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
             // убираем код страны, так как он уже зашит в маску
             value: cleanValue, mask: country.mask, onBlur: (event, state) => {
-                onBlur && onBlur(event, Object.assign(Object.assign({}, state), { 
-                    // вставляем код страны обратно в чистое значение
-                    cleanValue: `${country.codeChars}${state.cleanValue}` }));
+                onBlur &&
+                    onBlur(event, Object.assign(Object.assign({}, state), { 
+                        // вставляем код страны обратно в чистое значение
+                        cleanValue: `${country.codeChars}${state.cleanValue}` }));
             } }))),
-        isPopupOpen && (react_1.default.createElement(dropdown_1.Dropdown, { ref: dropdownRef, role: 'menu', className: cx('popup'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id
-            ? null
-            : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('popup-item'), onClick: () => {
-                    togglePopup(false);
-                    setCountry(item);
-                    onCountrySelect && onCountrySelect(item);
-                } },
-                react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc }),
-                react_1.default.createElement("span", { className: cx('item-name') }, item.name),
-                react_1.default.createElement("span", { className: cx('item-code') }, item.code))))))));
+        isPopupOpen && (react_1.default.createElement(dropdown_1.Dropdown, { ref: dropdownRef, role: 'menu', className: cx('popup'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('popup-item'), onClick: () => {
+                togglePopup(false);
+                setCountry(item);
+                onCountrySelect && onCountrySelect(item);
+            } },
+            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc }),
+            react_1.default.createElement("span", { className: cx('item-name') }, item.name),
+            react_1.default.createElement("span", { className: cx('item-code') }, item.code))))))));
 };
 exports.PhoneInput = PhoneInput;

package/portal/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Portal = void 0;
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const hooks_1 = require("../hooks");
 /**
  * Компонент слоя. Выводит содержимое в портале.
  * @param props Свойства.
@@ -11,7 +12,7 @@ const react_dom_1 = require("react-dom");
 const Portal = ({ children, defineRoot = () => document.body }) => {
     const [mounted, setMounted] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)();
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         const root = defineRoot();
         ref.current = document.createElement('div');
         root.appendChild(ref.current);
@@ -20,8 +21,6 @@ const Portal = ({ children, defineRoot = () => document.body }) => {
             ref.current && ref.current.remove();
         };
     }, []);
-    return mounted && ref.current
-        ? (0, react_dom_1.createPortal)(children, ref.current)
-        : null;
+    return mounted && ref.current ? (0, react_dom_1.createPortal)(children, ref.current) : null;
 };
 exports.Portal = Portal;

package/price/utils.js

@@ -16,9 +16,7 @@ const formatPrice = (value, grapheme, { graphemeBefore } = {}) => {
         // целая часть
         (0, exports.formatInteger)(number),
         // дробная часть
-        Number.isFinite(number) &&
-            !Number.isInteger(number) &&
-            `,${(0, exports.formatFractional)(number)}`,
+        Number.isFinite(number) && !Number.isInteger(number) && `,${(0, exports.formatFractional)(number)}`,
         // графема после
         grapheme && !graphemeBefore && ` ${grapheme}`,
     ]