@sima-land/ui-nucleons 43.1.1 → 44.1.0

package/alert/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/autocomplete/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/avatar/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/avatar/user.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/base-input/index.d.ts

@@ -3,7 +3,7 @@ interface RestPlaceholder {
     value: string;
     shiftValue?: string;
 }
-interface Styles extends React.CSSProperties {
+interface BaseInputStyle extends React.CSSProperties {
     '--placeholder-color'?: string;
 }
 export interface CustomProps {
@@ -11,7 +11,7 @@ export interface CustomProps {
     /** Остаточный placeholder (выводится после введенного значения). */
     restPlaceholder?: string | RestPlaceholder;
     /** Стили. */
-    style?: Styles;
+    style?: BaseInputStyle;
 }
 export declare type BaseInputProps = CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement>;
 /**

package/base-input/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];
@@ -35,10 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseInput = void 0;
 const react_1 = __importStar(require("react"));
+const fit_element_height_1 = require("../helpers/fit-element-height");
 const bind_1 = __importDefault(require("classnames/bind"));
 const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
-const fit_element_height_1 = require("../helpers/fit-element-height");
-const lodash_1 = require("lodash");
 const cx = bind_1.default.bind(base_input_module_scss_1.default);
 /**
  * Компонент поля ввода.
@@ -60,7 +63,7 @@ exports.BaseInput = (0, react_1.forwardRef)(function BaseInput(_a, ref) {
                 target: inputRef.current,
             });
     });
-    const restPlaceholder = (0, lodash_1.isString)(restPlaceholderProp)
+    const restPlaceholder = typeof restPlaceholderProp === 'string'
         ? { shiftValue: value, value: restPlaceholderProp }
         : Object.assign({ shiftValue: value }, restPlaceholderProp);
     return (react_1.default.createElement("div", { style: style, className: cx('reset', 'root', disabled && 'disabled', className) },

package/bottom-bar/index.js

@@ -19,6 +19,7 @@ const react_1 = __importDefault(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const bottom_bar_module_scss_1 = __importDefault(require("./bottom-bar.module.scss"));
 const shapes_1 = require("../styling/shapes");
+const utils_1 = require("../clean-buttons/utils");
 const cx = bind_1.default.bind(bottom_bar_module_scss_1.default);
 // некоторым компонентам нужно знать конкретную высоту, делаем единый источник
 exports.BOTTOM_BAR_HEIGHT = {
@@ -26,6 +27,7 @@ exports.BOTTOM_BAR_HEIGHT = {
     m: 72,
     l: 80,
 };
+// некоторым компонентам нужно знать значения по умолчанию, делаем единый источник
 exports.BOTTOM_BAR_DEFAULTS = {
     size: 'm',
 };
@@ -36,6 +38,9 @@ exports.BOTTOM_BAR_DEFAULTS = {
  */
 const BottomBar = (_a) => {
     var { size = exports.BOTTOM_BAR_DEFAULTS.size, divided, children, className, style, 'data-testid': testId = 'bottom-bar' } = _a, rest = __rest(_a, ["size", "divided", "children", "className", "style", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({ className: cx('root', { divided }, shapes_1.MediumRounds.bottom, className), style: Object.assign(Object.assign({}, style), { height: `${exports.BOTTOM_BAR_HEIGHT[size]}px` }) }, rest, { "data-testid": testId }), children));
+    return (
+    // чтобы Clean.Button автоматически брали размер, соответствующий размер BottomBar
+    react_1.default.createElement(utils_1.CleanGroupSizeContext.Provider, { value: size },
+        react_1.default.createElement("div", Object.assign({ className: cx('root', { divided }, shapes_1.MediumRounds.bottom, className), style: Object.assign(Object.assign({}, style), { height: `${exports.BOTTOM_BAR_HEIGHT[size]}px` }) }, rest, { "data-testid": testId }), children)));
 };
 exports.BottomBar = BottomBar;

package/box/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/button/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/card/slots.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/carousel/draggable.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/carousel/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/checkbox/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/checkbox-field/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/chips/chips.module.scss

@@ -1,11 +1,11 @@
 @use '../colors';
 
-$gutter: 8px;
-
 .list {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 (-$gutter) (-$gutter) 0;
+  --chips-gutter: 8px;
+  margin-right: calc(-1 * var(--chips-gutter));
+  margin-bottom: calc(-1 * var(--chips-gutter));
 }
 
 .item {
@@ -15,7 +15,10 @@ $gutter: 8px;
   display: flex;
   align-items: center;
   height: 32px;
-  margin: 0 $gutter $gutter 0;
+
+  // по умолчанию 0 чтобы вне Chips отступов не было
+  margin-right: var(--chips-gutter, 0);
+  margin-bottom: var(--chips-gutter, 0);
   overflow: hidden;
   outline: 0;
   border: 0;
@@ -29,10 +32,6 @@ $gutter: 8px;
   font-weight: 600;
   line-height: 16px;
   text-decoration: none;
-  &.checked {
-    background: colors.$basic-gray76;
-    color: colors.$basic-white;
-  }
 
   // переопределяем стили монолита
   &,
@@ -52,6 +51,8 @@ $gutter: 8px;
     color: colors.$basic-gray87;
   }
   &.checked {
+    background: colors.$basic-gray76;
+    color: colors.$basic-white;
     &:hover,
     &:active {
       background: colors.$basic-gray66;

package/chips/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/clean-buttons/clean-buttons.module.scss

@@ -1,6 +1,21 @@
 @use '../colors';
 
-.clean-button {
+.group {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: 100%;
+  .button {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    + .button {
+      border-left: 1px solid colors.$basic-gray12;
+    }
+  }
+}
+
+.button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,21 +26,17 @@
 
   font-size: 16px;
   line-height: 24px;
-  height: 64px;
   overflow: hidden;
 }
 
-.clean-group {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  width: 100%;
-  .clean-button {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0;
-    + .clean-button {
-      border-left: 1px solid colors.$basic-gray12;
-    }
-  }
+.size-s {
+  height: 64px;
+}
+
+.size-m {
+  height: 72px;
+}
+
+.size-l {
+  height: 80px;
 }

package/clean-buttons/index.d.ts

@@ -1,13 +1,18 @@
 import React from 'react';
 import { LinkProps } from '../link';
+import { CleanButtonSize } from './types';
 export interface CleanButtonProps extends LinkProps {
     asLink?: boolean;
+    /** Размер (высота). */
+    size?: CleanButtonSize;
 }
 export interface CleanGroupProps {
+    /** Размер (высота). */
+    size?: CleanButtonSize;
     /** Содержимое. */
-    children?: React.ReactElement<CleanButtonProps> | React.ReactElement<CleanButtonProps>[];
+    children?: React.ReactNode;
 }
 export declare const Clean: {
     Group: React.FC<CleanGroupProps>;
-    Button: ({ href, asLink, ...restProps }: CleanButtonProps) => JSX.Element;
+    Button: ({ size, href, asLink, ...restProps }: CleanButtonProps) => JSX.Element;
 };

package/clean-buttons/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];
@@ -36,27 +40,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clean = void 0;
 const react_1 = __importStar(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const clean_buttons_module_scss_1 = __importDefault(require("./clean-buttons.module.scss"));
 const link_1 = require("../link");
+const clean_buttons_module_scss_1 = __importDefault(require("./clean-buttons.module.scss"));
+const utils_1 = require("./utils");
 const cx = bind_1.default.bind(clean_buttons_module_scss_1.default);
 /**
  * Компонент группы прозрачных кнопок.
  * @param props Свойства.
  * @return Элемент.
  */
-const CleanGroup = ({ children }) => (react_1.default.createElement("div", { className: cx('clean-group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton ? item : null)));
+const CleanGroup = ({ size: sizeFromProps, children }) => {
+    const sizeFromContext = (0, react_1.useContext)(utils_1.CleanGroupSizeContext);
+    // значение из пропсов имеет приоритет
+    const size = sizeFromProps || sizeFromContext;
+    return (react_1.default.createElement("div", { className: cx('group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton ? (0, react_1.cloneElement)(item, { size }) : null)));
+};
 /**
  * Компонент прозрачной кнопки.
- * @param props Свойства. Поддерживаются свойства элементов button/a (зависит от того, передан ли asLink).
- * @param props.children Содержимое.
- * @param props.size Размер.
- * @param props.href Адрес ссылки.
- * @param props.asLink Нужно ли выводить кнопку как ссылку.
+ * @param props Свойства.
  * @return Элемент.
  */
 const CleanButton = (_a) => {
-    var { href, asLink = Boolean(href) } = _a, restProps = __rest(_a, ["href", "asLink"]);
-    return (react_1.default.createElement(link_1.Link, Object.assign({ pseudo: asLink, className: cx('clean-button'), href: href }, restProps)));
+    var { size = 's', href, asLink = Boolean(href) } = _a, restProps = __rest(_a, ["size", "href", "asLink"]);
+    return (react_1.default.createElement(link_1.Link, Object.assign({ pseudo: !asLink, className: cx('button', `size-${size}`), href: href }, restProps)));
 };
 exports.Clean = {
     Group: CleanGroup,

package/clean-buttons/types.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Размер прозрачных кнопок (высота) по дизайн-гайдам.
+ */
+export declare type CleanButtonSize = 's' | 'm' | 'l';

package/clean-buttons/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/clean-buttons/utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CleanButtonSize } from './types';
+export declare const CleanGroupSizeContext: import("react").Context<CleanButtonSize | undefined>;

package/clean-buttons/utils.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CleanGroupSizeContext = void 0;
+const react_1 = require("react");
+exports.CleanGroupSizeContext = (0, react_1.createContext)(undefined);

package/dot-nav/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/dropdown/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    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];

package/expandable/expandable-group.module.scss

@@ -0,0 +1,18 @@
+.root {
+  overflow: hidden;
+}
+
+.inner {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item {
+  max-width: 100%;
+  &.hidden {
+    display: none;
+  }
+  &.invisible {
+    opacity: 0;
+  }
+}

package/expandable/index.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode, MouseEventHandler, CSSProperties } from 'react';
+export interface ExpandableGroupProps {
+    gap?: number;
+    itemHeight?: number;
+    defaultExpanded?: boolean;
+    lineLimit?: number;
+    children?: ReactNode;
+    opener?: (data: {
+        hiddenCount: number;
+    }) => ReactNode;
+    onExpand?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface GroupItemProps {
+    children?: ReactNode;
+    onClick?: MouseEventHandler;
+    'data-testid'?: string;
+}
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, }: ExpandableGroupProps): JSX.Element;
+export declare const Expandable: {
+    readonly Group: typeof ExpandableGroup;
+    readonly Item: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/expandable/index.js

@@ -0,0 +1,78 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expandable = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
+const cx = bind_1.default.bind(expandable_group_module_scss_1.default);
+const GroupContext = (0, react_1.createContext)({ gap: 8, itemHeight: 32 });
+const ItemContext = (0, react_1.createContext)({});
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ExpandableGroup({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, onExpand, opener = data => react_1.default.createElement(react_1.default.Fragment, null,
+    "\u0415\u0449\u0451 ",
+    data.hiddenCount), className, style, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
+    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
+    const viewState = (0, utils_1.useViewState)(containerRef, openerRef);
+    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
+        const needHideItems = viewState.lastVisibleIndex !== -1 && !expanded;
+        const isDisplayed = !needHideItems || index < viewState.lastVisibleIndex;
+        (0, react_1.isValidElement)(child) &&
+            child.type === ExpandableItem &&
+            result.push(react_1.default.createElement(ItemContext.Provider, { key: index, value: { hidden: !isDisplayed } }, (0, react_1.cloneElement)(child, { hidden: !isDisplayed })));
+        return result;
+    }, []);
+    return (react_1.default.createElement(GroupContext.Provider, { value: { gap, itemHeight } },
+        react_1.default.createElement("div", { ref: containerRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px` }) },
+            react_1.default.createElement("div", { className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px` } },
+                items,
+                !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: viewState.lastVisibleIndex === -1 } },
+                    react_1.default.createElement(ExpandableItem, { ref: openerRef, onClick: () => {
+                            setExpanded(true);
+                            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+                        }, "data-testid": 'expandable:opener' }, opener({ hiddenCount: items.length - viewState.lastVisibleIndex }))))))));
+}
+const ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
+    const { gap, itemHeight } = (0, react_1.useContext)(GroupContext);
+    const { invisible, hidden } = (0, react_1.useContext)(ItemContext);
+    return (react_1.default.createElement("div", { ref: ref, className: cx('item', { hidden, invisible }), "data-testid": testId, onClick: onClick, style: {
+            height: `${itemHeight}px`,
+            margin: `0 ${gap}px ${gap}px 0`,
+        } }, children));
+});
+exports.Expandable = {
+    Group: ExpandableGroup,
+    Item: ExpandableItem,
+};

package/expandable/utils.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+export interface ViewState {
+    phase: 'default' | 'ready';
+    lastVisibleIndex: number;
+}
+export declare const initialViewState: ViewState;
+/**
+ * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей всю группу.
+ * @return Состояние.
+ */
+export declare function useViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
+/**
+ * Определяет индекс последнего видимого элемента для свернутого списка.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @return Состояние.
+ */
+export declare function defineViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;