@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/modal/slots.d.ts

@@ -1,35 +1,38 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { TopBarProps } from '../top-bar';
 import { BottomBarProps } from '../bottom-bar';
-export interface ModalHeaderProps extends TopBarProps {
+export interface ModalHeaderProps extends Omit<TopBarProps, 'size'> {
     onBack?: () => void;
     onClose?: () => void;
 }
+export type ModalFooterProps = Omit<BottomBarProps, 'size'>;
 /**
  * Шапка окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalHeader: ({ onBack, onClose, ...topBarProps }: ModalHeaderProps) => JSX.Element;
+export declare function ModalHeader({ className, onBack, onClose, buttons, ...rest }: ModalHeaderProps): JSX.Element;
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalBody: ({ children, onFullScroll, fullScrollThreshold, }: {
-    children?: React.ReactNode;
-    fullScrollThreshold?: number | undefined;
-    onFullScroll?: (() => void) | undefined;
-}) => JSX.Element;
+export declare function ModalBody({ children, onFullScroll, fullScrollThreshold, }: {
+    children?: ReactNode;
+    fullScrollThreshold?: number;
+    onFullScroll?: () => void;
+}): JSX.Element;
 /**
  * Футер окна.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalFooter: (props: BottomBarProps) => JSX.Element;
+export declare function ModalFooter({ className, ...rest }: ModalFooterProps): JSX.Element;
 /**
  * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ModalOverlap: React.FC;
+export declare function ModalOverlap({ children }: {
+    children?: ReactNode;
+}): JSX.Element;

package/modal/slots.js

@@ -40,58 +40,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalOverlap = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
 const react_1 = __importStar(require("react"));
 const top_bar_1 = require("../top-bar");
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
-const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
+const utils_1 = require("../top-bar/utils");
 const bottom_bar_1 = require("../bottom-bar");
 const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
-const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const viewport_1 = require("../context/viewport");
-const constants_1 = require("../constants");
+const utils_2 = require("./utils");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
+const cx = bind_1.default.bind(modal_module_scss_1.default);
 /**
  * Шапка окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalHeader = (_a) => {
-    var { onBack, onClose } = _a, topBarProps = __rest(_a, ["onBack", "onClose"]);
-    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, topBarProps, { buttonsProps: Object.assign(Object.assign(Object.assign({}, topBarProps.buttonsProps), (onBack && {
-            start: {
-                'data-testid': 'modal:back',
-                onClick: onBack,
-                icon: react_1.default.createElement(arrow_left_1.default, null),
-            },
-        })), (onClose && {
-            end: {
-                'data-testid': 'modal:close',
-                onClick: onClose,
-                icon: react_1.default.createElement(cross_1.default, null),
-            },
-        })), className: modal_module_scss_1.default.header })));
-};
+function ModalHeader(_a) {
+    var { className, onBack, onClose, buttons } = _a, rest = __rest(_a, ["className", "onBack", "onClose", "buttons"]);
+    const { topBarSize } = (0, react_1.useContext)(utils_2.ModalContext);
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, rest, { size: topBarSize, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }), className: cx('header', className) })));
+}
 exports.ModalHeader = ModalHeader;
 /**
  * Основной контент окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalBody = ({ children, onFullScroll, fullScrollThreshold, }) => {
-    const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { inFlexBox: true, className: modal_module_scss_1.default.body, overflow: { x: 'h', y: 's' }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold },
-        react_1.default.createElement(viewport_1.ViewportContext.Provider, { value: ref },
-            react_1.default.createElement("div", Object.assign({ className: modal_module_scss_1.default.main, ref: ref }, { [constants_1.BSL_IGNORE_ATTR]: true }), children))));
-};
+function ModalBody({ children, onFullScroll, fullScrollThreshold, }) {
+    const viewportRef = (0, react_1.useRef)(null);
+    const scrollableRef = (0, react_1.useRef)(null);
+    const osComponentRef = (0, react_1.useRef)(null);
+    const { withScrollDisable, scrollDisableOptions } = (0, react_1.useContext)(utils_2.ModalContext);
+    (0, react_1.useImperativeHandle)(scrollableRef, () => (0, custom_scrollbar_1.getViewport)(osComponentRef.current));
+    (0, react_1.useImperativeHandle)(viewportRef, () => (0, custom_scrollbar_1.getViewport)(osComponentRef.current));
+    (0, page_scroll_lock_1.usePageScrollLock)(scrollableRef, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
+    return (react_1.default.createElement(viewport_1.ViewportContext.Provider, { value: viewportRef },
+        react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { inFlexBox: true, osComponentRef: osComponentRef, className: modal_module_scss_1.default.body, overflow: { x: 'hidden', y: 'scroll' }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold }, children)));
+}
 exports.ModalBody = ModalBody;
 /**
  * Футер окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalFooter = (props) => react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, props));
+function ModalFooter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const { bottomBarSize } = (0, react_1.useContext)(utils_2.ModalContext);
+    return react_1.default.createElement(bottom_bar_1.BottomBar, Object.assign({}, rest, { size: bottomBarSize, className: cx('footer', className) }));
+}
 exports.ModalFooter = ModalFooter;
 /**
  * Контент который будет выводится поверх окна с абсолютным позиционированием.
  * @param props Свойства.
  * @return Элемент.
  */
-const ModalOverlap = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+function ModalOverlap({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
 exports.ModalOverlap = ModalOverlap;

package/modal/utils.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
-/**
- * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
- * @param callback Сработает при клике.
- * @return Свойства для целевого элемента.
- */
-export declare const useCloseHandler: (callback?: (() => void) | undefined) => {
-    onMouseUp: ({ target, currentTarget, button }: React.MouseEvent) => void;
-    onMouseDown: ({ button, target }: React.MouseEvent) => void;
-};
+/// <reference types="react" />
+import { BottomBarProps } from '../bottom-bar';
+import { TopBarProps } from '../top-bar';
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export declare const ModalContext: import("react").Context<WithPageScrollLock & {
+    topBarSize?: TopBarProps['size'];
+    bottomBarSize?: BottomBarProps['size'];
+}>;

package/modal/utils.js

@@ -1,29 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCloseHandler = void 0;
+exports.ModalContext = void 0;
 const react_1 = require("react");
-const identity_1 = require("../hooks/identity");
-/**
- * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
- * @param callback Сработает при клике.
- * @return Свойства для целевого элемента.
- */
-const useCloseHandler = (callback) => {
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    const mouseDownTarget = (0, react_1.useRef)();
-    const onMouseDown = (0, react_1.useCallback)(({ button, target }) => {
-        if (button === 0) {
-            mouseDownTarget.current = target;
-        }
-    }, []);
-    const onMouseUp = (0, react_1.useCallback)(({ target, currentTarget, button }) => {
-        const fn = callbackRef.current;
-        fn &&
-            button === 0 &&
-            target === currentTarget &&
-            currentTarget === mouseDownTarget.current &&
-            fn();
-    }, []);
-    return { onMouseUp, onMouseDown };
-};
-exports.useCloseHandler = useCloseHandler;
+exports.ModalContext = (0, react_1.createContext)({});

package/modal-overlay/index.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, Ref } from 'react';
+export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/**
+ * Полноэкранное затемнение для модальных компонентов (Alert, Modal, SidePage...).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ModalOverlay({ rootRef, children, className, style, 'data-testid': testId, ...restProps }: ModalOverlayProps): JSX.Element;

package/modal-overlay/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const styles_1 = require("../hooks/styles");
+const layer_1 = require("../helpers/layer");
+const classnames_1 = __importDefault(require("classnames"));
+const modal_overlay_module_scss_1 = __importDefault(require("./modal-overlay.module.scss"));
+/**
+ * Полноэкранное затемнение для модальных компонентов (Alert, Modal, SidePage...).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ModalOverlay(_a) {
+    var { rootRef, children, className, style, 'data-testid': testId = 'modal-overlay' } = _a, restProps = __rest(_a, ["rootRef", "children", "className", "style", 'data-testid']);
+    const layer = (0, layer_1.useLayer)() + 100;
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(rootRef, () => ref.current);
+    (0, styles_1.useViewportHeightUnit)(ref);
+    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+        react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: (0, classnames_1.default)(modal_overlay_module_scss_1.default.root, className), "data-testid": testId, style: Object.assign(Object.assign({}, style), { zIndex: layer }) }), children)));
+}
+exports.ModalOverlay = ModalOverlay;

package/modal-overlay/modal-overlay-util.scss

@@ -0,0 +1 @@
+$overlay-color: rgba(0, 0, 0, 0.24);

package/modal-overlay/modal-overlay.module.scss

@@ -0,0 +1,14 @@
+@use '../utils';
+@use './modal-overlay-util';
+
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100);
+  background: modal-overlay-util.$overlay-color;
+  overflow: auto;
+  @include utils.hidden-scrollbars;
+}

package/modal-overlay/utils.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+/**
+ * Вызывает callback только если клик был начат и закончен на одном и том же элементе.
+ * @param onExactClick Сработает при клике.
+ * @param options Опции.
+ * @return Свойства для целевого элемента.
+ */
+export declare function useExactClick(onExactClick: VoidFunction | undefined, { onMouseDown, onMouseUp, }?: {
+    onMouseDown?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
+}): {
+    onMouseUp: MouseEventHandler<Element>;
+    onMouseDown: MouseEventHandler<Element>;
+};

package/modal-overlay/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExactClick = void 0;
+const react_1 = require("react");
+const identity_1 = require("../hooks/identity");
+/**
+ * Вызывает callback только если клик был начат и закончен на одном и том же элементе.
+ * @param onExactClick Сработает при клике.
+ * @param options Опции.
+ * @return Свойства для целевого элемента.
+ */
+function useExactClick(onExactClick, { onMouseDown, onMouseUp, } = {}) {
+    const callbackRef = (0, identity_1.useIdentityRef)(onExactClick);
+    const mouseDownTarget = (0, react_1.useRef)(null);
+    const handleMouseDown = (0, react_1.useCallback)(event => {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        if (event.button === 0) {
+            mouseDownTarget.current = event.target;
+        }
+    }, []);
+    const handleMouseUp = (0, react_1.useCallback)(event => {
+        const fn = callbackRef.current;
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+        fn &&
+            event.button === 0 &&
+            event.target === event.currentTarget &&
+            event.currentTarget === mouseDownTarget.current &&
+            fn();
+    }, []);
+    return { onMouseUp: handleMouseUp, onMouseDown: handleMouseDown };
+}
+exports.useExactClick = useExactClick;

package/package.json

@@ -1,68 +1,92 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.10",
+  "version": "45.0.0-alpha.1",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
   "private": false,
   "engines": {
-    "node": ">=14.15.5"
+    "node": ">=16.15.1"
+  },
+  "scripts": {
+    "export:colors": "node .template/build.mjs",
+    "build:before": "rimraf build",
+    "build:main": "tsc --project tsconfig.build.json",
+    "build:after": "node dist.mjs",
+    "build": "npm run build:before && npm run build:main && npm run build:after",
+    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
+    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
+    "type-check": "tsc -p . --noEmit",
+    "lint": "npm run lint:scripts && npm run lint:styles",
+    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
+    "lint:styles": "stylelint 'src/**/*.{css,scss}'",
+    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
+    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --quiet --loglevel error -o build-storybook",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\"",
+    "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\""
   },
   "dependencies": {
-    "@krutoo/input-mask": "^0.0.8",
-    "@sima-land/ui-quarks": "^3.0.0",
+    "@floating-ui/react": "^0.17.0",
+    "@krutoo/input-mask": "^0.0.9",
+    "@sima-land/ui-quarks": "^3.6.0",
     "body-scroll-lock": "3.1.5",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
-    "intersection-observer": "^0.12.0",
+    "focus-trap": "^7.2.0",
     "lodash": "^4.17.21",
-    "overlayscrollbars": "^1.13.1",
-    "overlayscrollbars-react": "^0.2.3",
-    "react-transition-group": "^4.4.2"
+    "overlayscrollbars": "^1.13.3",
+    "overlayscrollbars-react": "^0.3.0",
+    "react-transition-group": "^4.4.2",
+    "redux": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@playwright/test": "^1.27.1",
     "@rushstack/eslint-patch": "^1.1.1",
     "@sima-land/linters": "^2.1.2",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-backgrounds": "^6.4.19",
-    "@storybook/addon-docs": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-backgrounds": "^6.5.14",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-storysource": "^6.5.14",
+    "@storybook/addons": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/react": "^6.5.14",
+    "@storybook/theming": "^6.5.14",
     "@svgr/core": "^6.2.1",
     "@svgr/plugin-jsx": "^6.2.1",
     "@svgr/plugin-svgo": "^6.2.0",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^14.4.3",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.180",
+    "@types/overlayscrollbars": "^1.12.1",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-transition-group": "^4.4.4",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
-    "babel-preset-jest": "^27.5.1",
+    "clipboard": "^2.0.11",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "enzyme": "^3.9.0",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.11.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "file-loader": "^6.2.0",
     "handlebars": "^4.7.7",
     "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "jest-css-modules-transform": "^4.3.0",
+    "jest": "^29.3.1",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.3.5",
+    "lorem-ipsum": "^2.0.8",
     "postcss": "^8.4.11",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
@@ -73,29 +97,13 @@
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "stylelint": "^14.5.3",
-    "typescript": "^4.6.2",
-    "typescript-plugin-css-modules": "^3.4.0",
-    "webpack": "^5.70.0"
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "typescript-plugin-css-modules": "^4.1.1",
+    "webpack": "^5.75.0"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
-  },
-  "scripts": {
-    "prepare": "",
-    "export:colors": "node .template/build.mjs",
-    "build:before": "rimraf build",
-    "build:main": "tsc --project tsconfig.build.json",
-    "build:after": "node dist.js",
-    "build": "npm run build:before && npm run build:main && npm run build:after",
-    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
-    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
-    "type-check": "tsc -p . --noEmit",
-    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
-    "lint:styles": "stylelint 'src/**/*.{css,scss}'",
-    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
-    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --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/utils.d.ts

@@ -2,12 +2,12 @@ interface IPageButton {
     value: number;
     content: string | number;
 }
-declare type State = {
+type State = {
     current: number;
     range: number;
     total: number;
 };
-export declare const cx: (...args: import("classnames").Argument[]) => string;
+export declare const cx: (...args: import("classnames").ArgumentArray) => string;
 /**
  * Фабрика объектов с данными о кнопке страницы.
  * @param value Номер целевой страницы.

package/panel/index.d.ts

@@ -1,24 +1,38 @@
-import React from 'react';
-import { Token } from '../colors';
+import { CSSProperties, ReactNode } from 'react';
+import type { LinkProps } from '../link';
+export type PanelType = 'info' | 'error' | 'success' | 'warning';
 export interface PanelProps {
-    /** Наименование цвета панели. */
-    color?: Token;
-    /** Наименование цвета содержимого. */
-    contentColor?: Token;
-    /** Нужно ли стилизовать как inline-элемент. */
-    inline?: boolean;
-    /** Компонент иконки. */
-    icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
+    /** Тип панели. Влияет на отображение. */
+    type?: PanelType;
+    /** Иконка перед основным контентом. */
+    adornmentStart?: ReactNode;
+    /** Иконка после основного контента. */
+    adornmentEnd?: ReactNode;
     /** CSS-класс корневого элемента. */
     className?: string;
-    /** Содержимое в виде строки с html-версткой. */
-    html?: string;
+    /** Стили корневого элемента панели. */
+    style?: CSSProperties;
+    /** Содержимое. */
+    children?: ReactNode;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
+export declare const LINK_COLOR_BY_TYPE: Record<PanelType, LinkProps['color']>;
 /**
  * Компонент панели с информацией.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Panel: React.FC<PanelProps>;
+export declare function Panel({ type, adornmentStart, adornmentEnd, className, style, children, 'data-testid': testId, }: PanelProps): JSX.Element;
+export declare namespace Panel {
+    var UnknownContent: typeof PanelUnknownContent;
+}
+/**
+ * Компонент для вывода неизвестной html-верстки, стилизованной по гайдам Panel.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function PanelUnknownContent({ markup }: {
+    markup: string;
+}): JSX.Element;
+export {};

package/panel/index.js

@@ -3,22 +3,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = void 0;
+exports.Panel = exports.LINK_COLOR_BY_TYPE = void 0;
 const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const colors_1 = require("../styling/colors");
-const colors_2 = require("../colors");
+const bind_1 = __importDefault(require("classnames/bind"));
 const panel_module_scss_1 = __importDefault(require("./panel.module.scss"));
 const cx = bind_1.default.bind(panel_module_scss_1.default);
+const PANEL_COLORS_BY_TYPE = {
+    info: {
+        textColor: 'basic-gray87',
+        panelColor: 'basic-gray4',
+    },
+    error: {
+        textColor: 'basic-white',
+        panelColor: 'additional-deep-red',
+    },
+    success: {
+        textColor: 'basic-white',
+        panelColor: 'additional-teal',
+    },
+    warning: {
+        textColor: 'basic-gray87',
+        panelColor: 'additional-yellow',
+    },
+};
+exports.LINK_COLOR_BY_TYPE = {
+    info: 'basic-blue',
+    error: 'basic-white',
+    success: 'basic-white',
+    warning: 'basic-gray87',
+};
 /**
  * Компонент панели с информацией.
  * @param props Свойства.
  * @return Элемент.
  */
-const Panel = ({ color: panelColor = 'basic-gray4', contentColor = 'basic-gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
-    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)) }))));
-};
+function Panel({ type = 'info', adornmentStart, adornmentEnd, className, style, children, 'data-testid': testId = 'panel', }) {
+    const textColor = PANEL_COLORS_BY_TYPE[type].textColor;
+    const panelColor = PANEL_COLORS_BY_TYPE[type].panelColor;
+    return (react_1.default.createElement("div", { className: cx('root', `type-${type}`, (0, colors_1.bgColor)(panelColor), (0, colors_1.color)(textColor), className), "data-testid": testId, style: style },
+        adornmentStart && react_1.default.createElement("div", { className: cx('adornment') }, adornmentStart),
+        react_1.default.createElement("div", { className: cx('main') }, children),
+        adornmentEnd && react_1.default.createElement("div", { className: cx('adornment') }, adornmentEnd)));
+}
 exports.Panel = Panel;
+/**
+ * Компонент для вывода неизвестной html-верстки, стилизованной по гайдам Panel.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PanelUnknownContent({ markup }) {
+    return react_1.default.createElement("div", { className: cx('unknown-content'), dangerouslySetInnerHTML: { __html: markup } });
+}
+Panel.UnknownContent = PanelUnknownContent;