@sima-land/ui-nucleons 40.2.0 → 41.0.0

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

@@ -7,7 +7,7 @@ declare type State = {
     range: number;
     total: number;
 };
-export declare const cx: import("classnames/types").ClassNamesFn;
+export declare const cx: (...args: import("classnames").Argument[]) => string;
 /**
  * Фабрика объектов с данными о кнопке страницы.
  * @param value Номер целевой страницы.
@@ -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/price/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface PriceProps {
     /** Класс/стили цены. */
     className?: string;

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}`,
     ]

package/range/index.js

@@ -42,7 +42,7 @@ const cx = bind_1.default.bind(range_module_scss_1.default);
  * @param value Значение для расчета доли.
  * @return Доля, которую занимает значение.
  */
-const getFraction = (start, end, value) => ((value - start) / (end - start)) || 0;
+const getFraction = (start, end, value) => (value - start) / (end - start) || 0;
 /**
  * Возвращает процент от диапазона, заданную числом.
  * @param args Данные для расчета доли.
@@ -58,7 +58,7 @@ class Range extends react_1.Component {
      * @param props Свойства.
      */
     constructor(props) {
-        const { min = 0, max = 1, startValue = min, finishValue = max, } = props;
+        const { min = 0, max = 1, startValue = min, finishValue = max } = props;
         super(props);
         // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
         const readyStart = this.constrainValue(Math.min(startValue, finishValue));
@@ -93,7 +93,7 @@ class Range extends react_1.Component {
     componentDidUpdate(prevProps) {
         const propKeys = ['min', 'max', 'step', 'startValue', 'finishValue'];
         if (propKeys.some(key => !Object.is(this.props[key], prevProps[key]))) {
-            const { startValue = this.start.get(), finishValue = this.finish.get(), } = this.props;
+            const { startValue = this.start.get(), finishValue = this.finish.get() } = this.props;
             // конечное значение имеет приоритет - делаем стартовое зависимым от конечного
             const readyStart = this.constrainValue(Math.min(startValue, finishValue));
             const readyFinish = this.constrainValue(finishValue);
@@ -171,11 +171,9 @@ class Range extends react_1.Component {
             const { left, right } = (0, bounds_of_1.default)(this.containerRef.current);
             const wrappedX = Math.max(start, Math.min((0, events_1.getEventClientPos)(event).x, end));
             const fraction = getFraction(left, right, wrappedX);
-            const value = this.constrainValue(min + (fraction * (max - min)));
+            const value = this.constrainValue(min + fraction * (max - min));
             // проверяем, является ползунок стартовым или конечным
-            thumbEl === this.startThumbRef.current
-                ? this.start.set(value)
-                : this.finish.set(value);
+            thumbEl === this.startThumbRef.current ? this.start.set(value) : this.finish.set(value);
         }
     }
     /**
@@ -233,9 +231,7 @@ class Range extends react_1.Component {
         else {
             isStartActive = abs(startX - clientX) < abs(finishX - clientX);
         }
-        this.activeThumbEl = (isStartActive
-            ? this.startThumbRef.current
-            : this.finishThumbRef.current);
+        this.activeThumbEl = (isStartActive ? this.startThumbRef.current : this.finishThumbRef.current);
         this.activeBounds = isStartActive
             ? [(0, bounds_of_1.default)(this.containerRef.current).left, finishX]
             : [startX, (0, bounds_of_1.default)(this.containerRef.current).right];
@@ -262,10 +258,11 @@ class Range extends react_1.Component {
                 handleEvent = onSlide;
                 break;
         }
-        handleEvent && handleEvent({
-            startValue: this.start.get(),
-            finishValue: this.finish.get(),
-        });
+        handleEvent &&
+            handleEvent({
+                startValue: this.start.get(),
+                finishValue: this.finish.get(),
+            });
     }
     /** @inheritdoc */
     render() {

package/rating/index.js

@@ -37,8 +37,8 @@ exports.Rating = Rating;
  * @return Элемент.
  */
 const Star = ({ type, size = 's' }) => (react_1.default.createElement("div", { className: cx('star', `size-${size}`) },
-    type === 'empty' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg') })),
+    type === 'empty' && react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
     type === 'half' && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(star_svg_1.default, { className: cx('svg') }),
         react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'half'), preserveAspectRatio: 'xMinYMin slice' }))),
-    type === 'full' && (react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') }))));
+    type === 'full' && react_1.default.createElement(star_svg_1.default, { className: cx('svg', 'full') })));

package/readme.md

@@ -145,7 +145,7 @@ declare module '*.module.scss' {
 
 // svg как React-компоненты
 declare module '*.svg' {
-  const content: React.FC<React.SVGProps<SVGSVGElement>>;
+  const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default content;
 }
 ```
@@ -158,12 +158,12 @@ declare module '*.svg' {
 - компонент интерфейса не должен иметь внешних отступов по умолчанию
 
 ### Консольные команды, необходимые в процессе разработки
-* ```yarn build``` - сборка компонентов в `./build` для публикации
-* ```yarn test``` - запуск тестов *Jest*
-* ```yarn lint:scripts``` - запуск линтера *ESLint*
-* ```yarn lint:styles``` - запуск линтера *styleLint*
-* ```yarn type-check``` - Проверка типов TS
-* ```yarn storybook``` - запуск *storybook*
+* ```npm run build``` - сборка компонентов в `./build` для публикации
+* ```npm run test``` - запуск тестов *Jest*
+* ```npm run lint:scripts``` - запуск линтера *ESLint*
+* ```npm run lint:styles``` - запуск линтера *styleLint*
+* ```npm run type-check``` - Проверка типов TS
+* ```npm run storybook``` - запуск *storybook*
 
 ### Структура библиотеки
 

package/screen/index.d.ts

@@ -1,64 +1,29 @@
 import React from 'react';
-import { ScreenLayoutProps, CallbackData } from './screen-layout';
-import { OrNil } from './utils';
 import { LoadingOverlayProps } from '../loading-overlay';
-interface AdvancedCallbackData extends CallbackData {
-    rootElement: OrNil<HTMLDivElement>;
-}
 export interface ScreenProps {
     /** Содержимое. */
     children?: React.ReactNode;
-    /** Реф контента. */
-    contentRef?: ScreenLayoutProps['childrenRef'];
-    /** Содержимое подвала. */
-    footer?: any;
-    /** Отступ от нижней границы для срабатывания onFullScroll. */
-    fullScrollThreshold?: number;
     /** Нужно ли выводить вместо содержимого состояние загрузки. */
     loading?: boolean;
     /** Определяет область отображаемую как загружающуюся. */
     loadingArea?: 'content' | 'full';
     /** Свойства компонента LoadingOverlay. */
     loadingOverlayProps?: LoadingOverlayProps;
-    /** Свойства компонента NavBar. */
-    navBarProps?: ScreenLayoutProps['navBarProps'];
-    /** Сработает при клике на кнопку "назад". */
-    onBack?: (data: AdvancedCallbackData) => void;
-    /** Сработает при кнопке на крест. */
-    onClose?: (data: AdvancedCallbackData) => void;
-    /** Сработает при полной прокрутке контента. */
-    onFullScroll?: ScreenLayoutProps['onFullScroll'];
-    /** Подзаголовок. */
-    subtitle?: string;
-    /** Заголовок. */
-    title?: string;
-    /** Нужно ли выводить кнопку "назад". */
-    withBackButton?: boolean;
-    /** Нужно ли выводить закрывающий крест. */
-    withCloseButton?: boolean;
-    /** Нужно ли рисовать черту между шапкой и основным содержимым. */
-    withDivideHeader?: boolean;
-    /** Нужно ли выводить кнопку "назад". */
-    withHeader?: boolean;
-    /** Нужно ли выводить Layer (при SSR необходимо указать false). */
-    inPortal?: boolean;
+    /** Будет вызвана при полной прокрутке содержимого экрана. */
+    onFullScroll?: () => void;
+    /** Отступ от нижней границы содержимого экрана, после которого начинает срабатывать onFullScroll. */
+    fullScrollThreshold?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
 }
 /**
  * Экран.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Screen: React.FC<ScreenProps>;
-/**
- * Записывает переданное значение в ref контента.
- * @param ref Ref-контейнер.
- * @param value Значение для записи.
- */
-export declare const setRefValue: (ref: React.RefCallback<any> | React.MutableRefObject<any>, value: any) => void;
-/**
- * Записывает полученный элемент в ref и отключает прокрутку.
- * @param ref Ref-контейнер.
- * @param element Элемент для записи.
- */
-export declare const takeScrollableElement: (ref: React.MutableRefObject<OrNil<HTMLDivElement>>, element?: HTMLDivElement | null | undefined) => void;
-export {};
+export declare const Screen: {
+    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, "data-testid": testId, }: ScreenProps): JSX.Element;
+    Header: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: import("./slots").HeaderSlotProps) => JSX.Element;
+    Body: React.FC<{}>;
+    Footer: React.FC<{}>;
+};

package/screen/index.js

@@ -18,82 +18,45 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.takeScrollableElement = exports.setRefValue = exports.Screen = void 0;
+exports.Screen = void 0;
 const react_1 = __importStar(require("react"));
-const portal_1 = require("../portal");
-const lodash_1 = require("lodash");
-const screen_layout_1 = require("./screen-layout");
-const utils_1 = require("./utils");
+const slots_1 = require("./slots");
 const loading_overlay_1 = require("../loading-overlay");
-const body_scroll_lock_1 = require("body-scroll-lock");
+const body_scroll_1 = require("../_internal/body-scroll");
 const layer_1 = require("../helpers/layer");
+const define_slots_1 = require("../helpers/define-slots");
+const hooks_1 = require("../hooks");
+const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
 /**
  * Экран.
  * @param props Свойства.
  * @return Элемент.
  */
-const Screen = ({ children, contentRef, footer, fullScrollThreshold = 320, loading = false, loadingArea = 'full', loadingOverlayProps, navBarProps, onBack, onClose, onFullScroll, subtitle, title, withBackButton = false, withCloseButton = true, withDivideHeader = true, withHeader = true, inPortal = true, }) => {
-    const Wrapper = inPortal ? portal_1.Portal : react_1.Fragment;
+const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps, onFullScroll, fullScrollThreshold = 320, 'data-testid': testId = 'screen', }) => {
+    const fullLoading = loading && loadingArea === 'full';
     const layer = (0, layer_1.useLayer)() + 300; // 300 из-за монолита
-    const rootRef = (0, react_1.useRef)(null);
-    const innerContentRef = (0, react_1.useRef)(null);
-    // включаем прокрутку body при размонтировании
-    (0, react_1.useEffect)(() => () => {
-        innerContentRef.current && (0, body_scroll_lock_1.enableBodyScroll)(innerContentRef.current);
-    }, []);
-    return (react_1.default.createElement(Wrapper, null,
-        react_1.default.createElement("div", { ref: rootRef, className: (0, utils_1.cx)('screen', 'full-width'), style: { zIndex: layer } }, loading && loadingArea === 'full'
-            ? react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps))
-            : (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-                react_1.default.createElement(screen_layout_1.ScreenLayout, { title: title, subtitle: subtitle, withHeader: withHeader, withDivideHeader: withDivideHeader, withBackButton: withBackButton, withCloseButton: withCloseButton, children: loading && loadingArea === 'content'
-                        ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, loadingArea === 'content' && {
-                            fill: false,
-                            style: { height: '100%' },
-                        })))
-                        : children, childrenRef: element => {
-                        (0, exports.setRefValue)(contentRef, element);
-                        (0, exports.takeScrollableElement)(innerContentRef, element);
-                    }, footer: footer, onBack: ({ contentElement }) => {
-                        onBack && onBack({
-                            rootElement: rootRef.current,
-                            contentElement,
-                        });
-                    }, onClose: ({ contentElement }) => {
-                        onClose && onClose({
-                            rootElement: rootRef.current,
-                            contentElement,
-                        });
-                    }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold, navBarProps: navBarProps }))))));
+    const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
+        header: slots_1.HeaderSlot,
+        body: slots_1.BodySlot,
+        footer: slots_1.FooterSlot,
+    });
+    // при блокировке прокрутки нужно передавать элемент которому нужно сохранить возможность прокрутки
+    // https://github.com/willmcpo/body-scroll-lock/blame/79c4cf2c956eb7d5cf8d54a03d12751bc6ac8aa3/README.md#L52
+    // поэтому используем внутренний ref и useImperativeHandle
+    const bodyRef = (0, react_1.useRef)(null);
+    (0, body_scroll_1.useBodyScrollLock)(bodyRef, true);
+    (0, hooks_1.useInfiniteScroll)(bodyRef, { onFullScroll, threshold: fullScrollThreshold });
+    return (react_1.default.createElement("div", { className: screen_module_scss_1.default.root, style: { zIndex: layer }, "data-testid": testId },
+        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+            !fullLoading && header,
+            react_1.default.createElement("div", { ref: bodyRef, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (body)),
+            !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
 };
 exports.Screen = Screen;
-/**
- * Записывает переданное значение в ref контента.
- * @param ref Ref-контейнер.
- * @param value Значение для записи.
- */
-const setRefValue = (ref, value) => {
-    if ((0, lodash_1.isFunction)(ref)) {
-        ref(value);
-    }
-    else if (ref) {
-        ref.current = value;
-    }
-};
-exports.setRefValue = setRefValue;
-/**
- * Записывает полученный элемент в ref и отключает прокрутку.
- * @param ref Ref-контейнер.
- * @param element Элемент для записи.
- */
-const takeScrollableElement = (ref, element) => {
-    if (element && element !== ref.current) {
-        // если элемент изменился - включаем прокрутку для старого
-        ref.current && (0, body_scroll_lock_1.enableBodyScroll)(ref.current);
-        // сохраняем новый элемент
-        ref.current = element;
-        // отключаем прокрутку для нового элемента
-        (0, body_scroll_lock_1.disableBodyScroll)(element);
-    }
-};
-exports.takeScrollableElement = takeScrollableElement;
+exports.Screen.Header = slots_1.HeaderSlot;
+exports.Screen.Body = slots_1.BodySlot;
+exports.Screen.Footer = slots_1.FooterSlot;

package/screen/screen.module.scss

@@ -1,4 +1,4 @@
-.screen {
+.root {
   position: fixed;
 
   // для корректного отображения с динамическим viewport переменная --offsetTop должна быть доступна
@@ -9,24 +9,25 @@
 
   // для корректного отображения с динамическим viewport переменная --vh должна быть доступна
   height: calc(var(--vh, 1vh) * 100);
+  width: 100%;
   box-sizing: border-box;
   background-color: #fff;
   outline: 100px solid #fff;
-  .content {
-    height: 0;
-    overflow-y: auto;
-    flex-grow: 1;
-    flex-shrink: 0;
-    -webkit-overflow-scrolling: touch;
-  }
-  .footer {
-    min-height: 56px;
-    flex-grow: 0;
-    flex-shrink: 0;
-    box-shadow: inset 0 1px 0 #e0e0e0;
-  }
 }
 
-.full-width {
+.body {
+  width: 100%;
+  height: 0;
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.footer {
+  min-height: 56px;
   width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  box-shadow: inset 0 1px 0 #e0e0e0;
 }

package/screen/slots.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NavBarProps } from '../nav-bar';
+export interface HeaderSlotProps extends NavBarProps {
+    /** Нужна ли разделительная полоса внизу шапки экрана. */
+    divided?: boolean;
+    /** Заголовок. */
+    title?: string;
+    /** Подзаголовок. */
+    subtitle?: string;
+    /** Будет вызвана при нажатии на кнопку-стрелку. */
+    onBack?: () => void;
+    /** Будет вызвана при нажатии на кнопку-крести. */
+    onClose?: () => void;
+}
+/**
+ * Слот шапки экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const HeaderSlot: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: HeaderSlotProps) => JSX.Element;
+/**
+ * Слот основного контента экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const BodySlot: React.FC;
+/**
+ * Слот футера экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const FooterSlot: React.FC;

package/screen/slots.js

@@ -0,0 +1,64 @@
+"use strict";
+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.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
+const react_1 = __importDefault(require("react"));
+const nav_bar_1 = require("../nav-bar");
+const lodash_1 = require("lodash");
+const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
+const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
+/**
+ * Слот шапки экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const HeaderSlot = (_a) => {
+    var { divided, title, subtitle, buttons, onBack, onClose } = _a, restProps = __rest(_a, ["divided", "title", "subtitle", "buttons", "onBack", "onClose"]);
+    return (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, restProps, { title: title, subtitle: subtitle, bottomBordered: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
+                ? {
+                    // ВАЖНО: не подмешиваем свойства из buttons.start
+                    // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
+                    icon: arrow_left_1.default,
+                    onClick: onBack,
+                    'aria-label': 'Вернуться назад',
+                    'data-testid': 'screen:back',
+                }
+                : (0, lodash_1.get)(buttons, 'start'), end: onClose
+                ? {
+                    // ВАЖНО: не подмешиваем свойства из buttons.end
+                    // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
+                    icon: cross_1.default,
+                    onClick: onClose,
+                    'aria-label': `Закрыть ${title || ''}`.trim(),
+                    'data-testid': 'screen:close',
+                }
+                : (0, lodash_1.get)(buttons, 'end') }) })));
+};
+exports.HeaderSlot = HeaderSlot;
+/**
+ * Слот основного контента экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const BodySlot = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+exports.BodySlot = BodySlot;
+/**
+ * Слот футера экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const FooterSlot = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
+exports.FooterSlot = FooterSlot;

package/screen/utils.d.ts

@@ -1,2 +1 @@
-export declare type OrNil<T> = T | null | undefined;
-export declare const cx: import("classnames/types").ClassNamesFn;
+export declare const cx: (...args: import("classnames").Argument[]) => string;