@sima-land/ui-nucleons 40.3.0 → 41.2.1

package/tabs/tabs.module.scss

@@ -10,6 +10,7 @@
   font-weight: 600;
   line-height: 24px;
   li {
+    display: block;
     margin: 0;
     &::before {
       content: none;
@@ -17,13 +18,14 @@
   }
   &.stretch {
     justify-items: stretch;
-    .tab-item {
+    .item {
       width: 100%;
     }
   }
-  &.view-clean {
+  &.view-clean,
+  &.view-clean-underline {
     height: 32px;
-    .tab-item {
+    .item {
       color: colors.$gray38;
       &.selected {
         position: relative;
@@ -49,22 +51,22 @@
         color: colors.$gray54;
       }
     }
-    &.underline {
-      height: 40px;
-      position: relative;
-      &::before {
-        position: absolute;
-        bottom: 0;
-        content: '';
-        height: 1px;
-        width: 100%;
-        background-color: colors.$gray12;
-      }
+  }
+  &.view-clean-underline {
+    height: 40px;
+    position: relative;
+    &::before {
+      position: absolute;
+      bottom: 0;
+      content: '';
+      height: 1px;
+      width: 100%;
+      background-color: colors.$gray12;
     }
   }
   &.view-round {
     height: 40px;
-    .tab-item {
+    .item {
       color: colors.$gray87;
       padding: 8px 16px;
       border-radius: 4px;
@@ -83,15 +85,15 @@
     }
   }
   &.gap-m {
-    --gap: 24px;
+    --tabs-gap: 24px;
   }
   &.gap-s {
-    --gap: 16px;
+    --tabs-gap: 16px;
   }
-  .tab-item {
+  .item {
     text-align: center;
     &:not(:last-child) {
-      margin-right: var(--gap);
+      margin-right: var(--tabs-gap);
     }
   }
 }

package/text-field/index.js

@@ -77,7 +77,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
             } },
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
-                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label })),
+                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
                     react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             (0, lodash_1.isFunction)(onFocus) && onFocus(event);

package/touch-slider/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TouchSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("../layout");
+const constants_1 = require("../constants");
 const bind_1 = __importDefault(require("classnames/bind"));
 const touch_slider_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
 const cx = bind_1.default.bind(touch_slider_module_scss_1.default);
@@ -15,6 +16,6 @@ const cx = bind_1.default.bind(touch_slider_module_scss_1.default);
  * @return Элемент.
  */
 const TouchSlider = ({ children }) => (react_1.default.createElement(layout_1.MobileLayout, null,
-    react_1.default.createElement("div", { className: cx('outer', 'invisible-scroll') },
+    react_1.default.createElement("div", Object.assign({ className: cx('outer', 'invisible-scroll') }, { [constants_1.BSL_IGNORE_ATTR]: true }),
         react_1.default.createElement("div", { className: cx('inner') }, children))));
 exports.TouchSlider = TouchSlider;

package/unknown-content/unknown-content.module.scss

@@ -220,9 +220,9 @@
     display: block;
     max-width: 100%;
     margin-bottom: 32px;
-  }
-  @include breakpoints.up('xs') {
-    margin-bottom: 40px;
+    @include breakpoints.up('xs') {
+      margin-bottom: 40px;
+    }
   }
 
   // цитата

package/screen/screen-layout.d.ts

@@ -1,57 +0,0 @@
-import React from 'react';
-import { NavBarProps } from '../nav-bar';
-import { OrNil } from './utils';
-export interface CallbackData {
-    contentElement: OrNil<HTMLDivElement>;
-}
-export interface ScreenLayoutProps {
-    childrenRef?: React.MutableRefObject<OrNil<HTMLDivElement>> | React.RefCallback<OrNil<HTMLDivElement>>;
-    footer?: React.ReactNode;
-    fullScrollThreshold?: number;
-    navBarProps?: NavBarProps;
-    onBack?: (data: CallbackData) => void;
-    onClose?: (data: CallbackData) => void;
-    onFullScroll?: (data: CallbackData) => void;
-    subtitle?: string;
-    title?: string;
-    withBackButton?: boolean;
-    withCloseButton?: boolean;
-    withDivideHeader?: boolean;
-    withHeader?: boolean;
-}
-/**
- * Разметка содержимого компонента Screen.
- * @param props Свойства.
- * @param props.children Содержимое.
- * @param props.childrenRef Ref для элемента содержимого.
- * @param props.footer Содержимое подвала.
- * @param props.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @param props.navBarProps Свойства компонента NavBar.
- * @param props.onBack Сработает при клике на кнопку "назад".
- * @param props.onClose Сработает при клике на крест.
- * @param props.onFullScroll Сработает при полной прокрутке контента.
- * @param props.subtitle Подзаголовок.
- * @param props.title Заголовок.
- * @param props.withBackButton Нужно ли выводить кнопку "назад".
- * @param props.withCloseButton Нужно ли выводить закрывающий крест.
- * @param props.withDivideHeader Нужно ли рисовать черту между шапкой и основным содержимым.
- * @param props.withHeader Нужно ли выводить шапку с заголовком и кнопками.
- * @return Элемент.
- */
-export declare const ScreenLayout: React.FC<ScreenLayoutProps>;
-/**
- * Возвращает функцию сохранения аргумента в ref-контейнер.
- * Возвращаемая функция выполняет подписку на "scroll" и вызывает callback в момент полной прокрутки.
- * @param options Опции.
- * @param options.elementRef Ref-контейнер для элемента.
- * @param options.unsubscribeRef Ref-контейнер для функции отписки от "scroll".
- * @param options.onFullScroll Сработает при полной прокрутке.
- * @param options.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @return Функция сохранения аргумента в ref-контейнер.
- */
-export declare const createTakeContentRef: ({ elementRef, unsubscribeRef, onFullScroll, fullScrollThreshold: threshold, }: {
-    elementRef: React.MutableRefObject<OrNil<HTMLDivElement>>;
-    unsubscribeRef: React.MutableRefObject<undefined | (() => void)>;
-    onFullScroll?: ((data: CallbackData) => void) | undefined;
-    fullScrollThreshold?: number | undefined;
-}) => (element?: HTMLDivElement | undefined) => void;

package/screen/screen-layout.js

@@ -1,116 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTakeContentRef = exports.ScreenLayout = void 0;
-const react_1 = __importStar(require("react"));
-const nav_bar_1 = require("../nav-bar");
-const utils_1 = require("./utils");
-const on_1 = __importDefault(require("../helpers/on"));
-const is_fully_scrolled_1 = require("../helpers/is-fully-scrolled");
-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"));
-/**
- * Разметка содержимого компонента Screen.
- * @param props Свойства.
- * @param props.children Содержимое.
- * @param props.childrenRef Ref для элемента содержимого.
- * @param props.footer Содержимое подвала.
- * @param props.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @param props.navBarProps Свойства компонента NavBar.
- * @param props.onBack Сработает при клике на кнопку "назад".
- * @param props.onClose Сработает при клике на крест.
- * @param props.onFullScroll Сработает при полной прокрутке контента.
- * @param props.subtitle Подзаголовок.
- * @param props.title Заголовок.
- * @param props.withBackButton Нужно ли выводить кнопку "назад".
- * @param props.withCloseButton Нужно ли выводить закрывающий крест.
- * @param props.withDivideHeader Нужно ли рисовать черту между шапкой и основным содержимым.
- * @param props.withHeader Нужно ли выводить шапку с заголовком и кнопками.
- * @return Элемент.
- */
-const ScreenLayout = ({ children, childrenRef, footer, fullScrollThreshold, navBarProps = {}, onBack, onClose, onFullScroll, subtitle, title, withBackButton, withCloseButton, withDivideHeader, withHeader, }) => {
-    const contentRef = (0, react_1.useRef)();
-    const unsubscribeRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(childrenRef, () => contentRef.current);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        Boolean(withHeader) && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, subtitle: subtitle, bottomBordered: withDivideHeader, buttons: Object.assign(Object.assign({}, navBarProps.buttons), { start: withBackButton
-                    ? {
-                        // ВАЖНО: не подмешиваем свойства из navBarProps.buttons.start
-                        // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                        icon: arrow_left_1.default,
-                        onClick: () => onBack && onBack({ contentElement: contentRef.current }),
-                        'aria-label': 'Вернуться назад',
-                        'data-testid': 'screen:back',
-                    }
-                    : (0, lodash_1.get)(navBarProps.buttons, 'start'), end: withCloseButton
-                    ? {
-                        // ВАЖНО: не подмешиваем свойства из navBarProps.buttons.end
-                        // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                        icon: cross_1.default,
-                        onClick: () => onClose && onClose({ contentElement: contentRef.current }),
-                        'aria-label': `Закрыть ${title || ''}`.trim(),
-                        'data-testid': 'screen:close',
-                    }
-                    : (0, lodash_1.get)(navBarProps.buttons, 'end') }) }))),
-        react_1.default.createElement("div", { className: (0, utils_1.cx)('content', 'full-width'), children: children, ref: (0, exports.createTakeContentRef)({
-                elementRef: contentRef,
-                unsubscribeRef,
-                onFullScroll,
-                fullScrollThreshold,
-            }) }),
-        Boolean(footer) && react_1.default.createElement("div", { className: (0, utils_1.cx)('footer', 'full-width') }, footer)));
-};
-exports.ScreenLayout = ScreenLayout;
-/**
- * Возвращает функцию сохранения аргумента в ref-контейнер.
- * Возвращаемая функция выполняет подписку на "scroll" и вызывает callback в момент полной прокрутки.
- * @param options Опции.
- * @param options.elementRef Ref-контейнер для элемента.
- * @param options.unsubscribeRef Ref-контейнер для функции отписки от "scroll".
- * @param options.onFullScroll Сработает при полной прокрутке.
- * @param options.fullScrollThreshold Отступ от нижней границы для срабатывания onFullScroll.
- * @return Функция сохранения аргумента в ref-контейнер.
- */
-const createTakeContentRef = ({ elementRef, unsubscribeRef, onFullScroll, fullScrollThreshold: threshold = 0, }) => (element) => {
-    if (!element) {
-        // чистим реф
-        elementRef.current = undefined;
-        // если ранее были подписаны - отписываемся
-        unsubscribeRef.current && unsubscribeRef.current();
-    }
-    else if (element !== elementRef.current) {
-        // сохраняем ссылку для последующей отправки в onClose/onBack
-        elementRef.current = element;
-        // если ранее были подписаны - отписываемся
-        unsubscribeRef.current && unsubscribeRef.current();
-        // выполняем подписку, сохраняем функцию отписки
-        unsubscribeRef.current = (0, on_1.default)(element, 'scroll', () => {
-            (0, is_fully_scrolled_1.isFullyScrolled)(element, { threshold }) &&
-                onFullScroll &&
-                onFullScroll({ contentElement: element });
-        });
-    }
-};
-exports.createTakeContentRef = createTakeContentRef;