@sima-land/ui-nucleons 40.3.0 → 41.2.1

package/screen/index.js

@@ -1,97 +1,43 @@
 "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.takeScrollableElement = exports.setRefValue = 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 loading_overlay_1 = require("../loading-overlay");
-const body_scroll_lock_1 = require("body-scroll-lock");
+exports.Screen = void 0;
+const react_1 = __importDefault(require("react"));
+const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
+const define_slots_1 = require("../helpers/define-slots");
+const utils_1 = require("./utils");
+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 }))))));
-};
-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);
+    const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
+        header: slots_1.HeaderSlot,
+        body: slots_1.BodySlot,
+        footer: slots_1.FooterSlot,
+    });
+    if (!body) {
+        throw Error('Looks like you are trying to render <Screen /> without <Screen.Body /> slot, but it is required');
     }
+    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(utils_1.ScreenContext.Provider, { value: {
+                    loading,
+                    loadingOverlayProps,
+                    onFullScroll,
+                    fullScrollThreshold,
+                } }, body),
+            !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
 };
-exports.takeScrollableElement = takeScrollableElement;
+exports.Screen = Screen;
+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;
+/**
+ * Слот основного контента экрана.
+ */
+export declare const BodySlot: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * Слот футера экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const FooterSlot: React.FC;

package/screen/slots.js

@@ -0,0 +1,97 @@
+"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 __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 = __importStar(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"));
+const body_scroll_1 = require("../_internal/body-scroll");
+const hooks_1 = require("../hooks");
+const loading_overlay_1 = require("../loading-overlay");
+const utils_1 = require("./utils");
+const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
+/**
+ * Слот шапки экрана.
+ * @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;
+/**
+ * Слот основного контента экрана.
+ */
+exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outerRef) {
+    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold } = (0, react_1.useContext)(utils_1.ScreenContext);
+    // при блокировке прокрутки нужно передавать элемент, которому нужно сохранить возможность прокрутки
+    // https://github.com/willmcpo/body-scroll-lock/blame/79c4cf2c956eb7d5cf8d54a03d12751bc6ac8aa3/README.md#L52
+    // поэтому используем внутренний ref и useImperativeHandle
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(outerRef, () => ref.current);
+    (0, body_scroll_1.useBodyScrollLock)(ref, true, { allowTouchMove: body_scroll_1.allowTouchMove });
+    (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
+    return (
+    // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
+    react_1.default.createElement("div", { ref: ref, 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%' } }))) : (children)));
+});
+/**
+ * Слот футера экрана.
+ * @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,13 @@
-export declare type OrNil<T> = T | null | undefined;
-export declare const cx: import("classnames/types").ClassNamesFn;
+/// <reference types="react" />
+import { LoadingOverlayProps } from '../loading-overlay';
+export interface ScreenInnerProps {
+    /** Нужно ли выводить вместо содержимого состояние загрузки. */
+    loading?: boolean;
+    /** Свойства компонента LoadingOverlay. */
+    loadingOverlayProps?: LoadingOverlayProps;
+    /** Будет вызвана при полной прокрутке содержимого экрана. */
+    onFullScroll?: () => void;
+    /** Отступ от нижней границы содержимого экрана, после которого начинает срабатывать onFullScroll. */
+    fullScrollThreshold?: number;
+}
+export declare const ScreenContext: import("react").Context<ScreenInnerProps>;

package/screen/utils.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = void 0;
-const bind_1 = __importDefault(require("classnames/bind"));
-const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
-exports.cx = bind_1.default.bind(screen_module_scss_1.default);
+exports.ScreenContext = void 0;
+const react_1 = require("react");
+exports.ScreenContext = (0, react_1.createContext)({});

package/side-page/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithBodyScrollLock } from '../_internal/body-scroll';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export interface SidePageProps extends WithBodyScrollLock {
     /** Нужно ли показать компонент. */
     shown?: boolean;
@@ -11,6 +12,18 @@ export interface SidePageProps extends WithBodyScrollLock {
     children?: React.ReactNode;
     /** Сработает при закрытии. */
     onClose?: () => void;
+    /** Обработчик "onEntering" для CSSTransition. */
+    onEntering?: CSSTransitionProps['onEntering'];
+    /** Обработчик "onEnter" для CSSTransition. */
+    onEnter?: CSSTransitionProps['onEnter'];
+    /** Обработчик "onEntered" для CSSTransition. */
+    onEntered?: CSSTransitionProps['onEntered'];
+    /** Обработчик "onExiting" для CSSTransition. */
+    onExiting?: CSSTransitionProps['onExiting'];
+    /** Обработчик "onExited" для CSSTransition. */
+    onExited?: CSSTransitionProps['onExited'];
+    /** Обработчик "onExit" для CSSTransition. */
+    onExit?: CSSTransitionProps['onExit'];
 }
 /**
  * Компонент модального окна, прикрепленного к правой стороне экрана.
@@ -18,7 +31,7 @@ export interface SidePageProps extends WithBodyScrollLock {
  * @return Элемент.
  */
 export declare const SidePage: {
-    ({ shown, withTransitions, ...restProps }: SidePageProps): JSX.Element;
+    ({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
     Header: {
         ({ onBack, onClose, ...topBarProps }: import("../top-bar").TopBarProps & {
             onBack?: (() => void) | undefined;
@@ -28,7 +41,7 @@ export declare const SidePage: {
     };
     Body: {
         ({ children }: {
-            children?: React.ReactNode;
+            children?: React.ReactNode; /** Обработчик "onExiting" для CSSTransition. */
         }): JSX.Element;
         displayName: string;
     };

package/side-page/index.js

@@ -56,9 +56,9 @@ const transitionClasses = {
  * @return Элемент.
  */
 const SidePage = (_a) => {
-    var { shown, withTransitions } = _a, restProps = __rest(_a, ["shown", "withTransitions"]);
+    var { shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited } = _a, restProps = __rest(_a, ["shown", "withTransitions", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
     const transitionDuration = withTransitions ? 300 : 0;
-    return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
+    return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
 };
 exports.SidePage = SidePage;
 /**

package/stroked-svg/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface StrokedSVGProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Компонент, выводящий svg-элемент. */
+    component: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
+    /** Ширина внешней обводки. */
+    stroke?: string;
+    /** Цвет внешней обводки. */
+    strokeWidth?: number;
+    /** Цвет заливки. */
+    fill?: string;
+}
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const StrokedSVG: React.ForwardRefExoticComponent<StrokedSVGProps & React.RefAttributes<HTMLDivElement>>;

package/stroked-svg/index.js

@@ -0,0 +1,52 @@
+"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 __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.StrokedSVG = void 0;
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../colors");
+const classnames_1 = __importDefault(require("classnames"));
+const index_module_scss_1 = __importDefault(require("./index.module.scss"));
+/**
+ * Выводит иконку с внешней обводкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.StrokedSVG = (0, react_1.forwardRef)((_a, ref) => {
+    var { component: Tag, fill, stroke = colors_1.COLORS.get('gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(index_module_scss_1.default.root, className) }, restProps),
+        react_1.default.createElement(Tag, { stroke: stroke, strokeWidth: `${strokeWidth * 2}px`, className: index_module_scss_1.default.stroke }),
+        react_1.default.createElement(Tag, { fill: fill, className: index_module_scss_1.default.svg })));
+});
+exports.StrokedSVG.displayName = 'StrokedSVG';

package/stroked-svg/index.module.scss

@@ -0,0 +1,17 @@
+.root {
+  display: inline-flex;
+  position: relative;
+}
+
+.stroke {
+  overflow: visible;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.svg {
+  display: block;
+  position: relative;
+}

package/super-ellipse-clip-path/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface SuperEllipseClipPathProps {
     /** Идентификатор. */
     id?: string;

package/tabs/index.d.ts

@@ -1,29 +1,36 @@
-/**
- * Компонент списка табов.
- * @param props Свойства компонента.
- * @param props.items Список табов.
- * @param props.getItemName Функция получения имени для отрисовки элемента.
- * @param props.onSelectItem Функция, вызываемая при выборе элемента списка.
- * @param props.isSelectedItem Функция, определяющая, является ли элемент выбранным.
- * @param props.isDisabledItem Функция, определяющая, является ли элемент невыбираемым.
- * @param props.type Тип таба.
- * @param props.underline Нужно ли подчеркивание группы табов.
- * @param props.stretch Необходимо ли растягивать табы под размер контейнера.
- * @param props.gapSize Размер отступа между табами.
- * @param props.className Внешние классы.
- * @return Элемент.
- */
-export declare function Tabs<T = any>({ items, getItemName, onSelectItem, isSelectedItem, isDisabledItem, view, underline, stretch, gapSize, className, 'data-testid': dataTestId, }: {
-    items?: T[];
-} & {
-    getItemName?: (i: T) => string;
-    onSelectItem?: (i: T) => void;
-    isSelectedItem?: (i: T) => boolean | undefined;
-    isDisabledItem?: (i: T) => boolean | undefined;
-    view?: 'clean' | 'round';
-    underline?: boolean;
+import React from 'react';
+export interface TabsProps {
+    /** Визуальный вариант вкладок. */
+    view?: 'clean' | 'clean-underline' | 'round';
+    /** Необходимо ли растягивать вкладки под размер контейнера. */
     stretch?: boolean;
+    /** Размер отступа между вкладками. */
     gapSize?: 's' | 'm';
+    /** Внешние классы. */
     className?: string;
+    /** Вкладки. */
+    children?: React.ReactNode;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface TabsItemProps {
+    /** Название вкладки. */
+    name: string;
+    /** Выбрана ли вкладка. */
+    selected?: boolean;
+    /** Отключена ли вкладка. */
+    disabled?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
-}): JSX.Element;
+    /** Обработчик клика. */
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+}
+/**
+ * Компонент строки вкладок.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Tabs: {
+    ({ children, view, stretch, gapSize, className, "data-testid": testId, }: TabsProps): JSX.Element;
+    Item: ({ name, selected, disabled, "data-testid": testId, onClick, }: TabsItemProps) => JSX.Element;
+};

package/tabs/index.js

@@ -1,37 +1,43 @@
 "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.Tabs = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const lodash_1 = require("lodash");
-const fp_1 = require("lodash/fp");
 const tabs_module_scss_1 = __importDefault(require("./tabs.module.scss"));
 const cx = bind_1.default.bind(tabs_module_scss_1.default);
 /**
- * Компонент списка табов.
- * @param props Свойства компонента.
- * @param props.items Список табов.
- * @param props.getItemName Функция получения имени для отрисовки элемента.
- * @param props.onSelectItem Функция, вызываемая при выборе элемента списка.
- * @param props.isSelectedItem Функция, определяющая, является ли элемент выбранным.
- * @param props.isDisabledItem Функция, определяющая, является ли элемент невыбираемым.
- * @param props.type Тип таба.
- * @param props.underline Нужно ли подчеркивание группы табов.
- * @param props.stretch Необходимо ли растягивать табы под размер контейнера.
- * @param props.gapSize Размер отступа между табами.
- * @param props.className Внешние классы.
+ * Вкладка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Tab = ({ name, selected, disabled, 'data-testid': testId = 'tab', onClick, }) => (react_1.default.createElement("li", { className: cx('item', { selected, disabled }), "data-testid": testId, onClick: disabled ? undefined : onClick }, String(name)));
+/**
+ * Компонент строки вкладок.
+ * @param props Свойства.
  * @return Элемент.
  */
-function Tabs({ items, getItemName = lodash_1.identity, onSelectItem, isSelectedItem = (0, fp_1.prop)('active'), isDisabledItem = (0, fp_1.prop)('disabled'), view = 'clean', underline = false, stretch = false, gapSize = 'm', className, 'data-testid': dataTestId = 'tabs', }) {
-    return (react_1.default.createElement("ul", { "data-testid": dataTestId, className: cx('root', `view-${view}`, `gap-${gapSize}`, {
-            underline,
-            stretch,
-        }, className) }, items === null || items === void 0 ? void 0 : items.map((item, index) => (react_1.default.createElement("li", { key: index, onClick: () => onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(item), className: cx('tab-item', {
-            selected: isSelectedItem(item),
-            disabled: isDisabledItem(item),
-        }), "data-testid": 'tab' }, getItemName(item))))));
-}
+const Tabs = ({ children, view = 'clean', stretch = false, gapSize = 'm', className, 'data-testid': testId = 'tabs', }) => (react_1.default.createElement("ul", { "data-testid": testId, className: cx('root', `view-${view}`, `gap-${gapSize}`, { stretch }, className) }, react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Tab)));
 exports.Tabs = Tabs;
+exports.Tabs.Item = Tab;