@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.7

package/colors/index.js

@@ -1,8 +1,9 @@
 "use strict";
 // GENERATED FILE - DO NOT CHANGE IT MANUALLY
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLORS = void 0;
-const collection = {
+exports.COLORS = exports.COLOR = void 0;
+/** Цвета дизайн-системы. */
+exports.COLOR = {
     // basic
     'basic-blue': '#1f84db',
     'basic-gray87': '#212121',
@@ -20,6 +21,7 @@ const collection = {
     'additional-deep-red': '#d50000',
     'additional-red': '#fb3a2f',
     'additional-light-red': '#feebea',
+    'additional-dark-teal': '#089176',
     'additional-teal': '#09ab8b',
     'additional-green': '#00c853',
     'additional-light-green': '#64dd17',
@@ -41,5 +43,7 @@ const collection = {
     'additional-blue-gray': '#607d8b',
     'additional-deep-blue': '#00599d',
     'additional-dark-blue': '#002b41',
+    'additional-unlit-blue': '#1b75c2',
 };
-exports.COLORS = new Map(Object.entries(collection));
+exports.COLORS = new Map(Object.entries(exports.COLOR));
+//# sourceMappingURL=index.js.map

package/colors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/colors/index.ts"],"names":[],"mappings":";AAAA,6CAA6C;;;AAE7C,4BAA4B;AACf,QAAA,KAAK,GAAG;IACnB,QAAQ;IACR,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,MAAM;IAErB,aAAa;IACb,qBAAqB,EAAE,SAAS;IAChC,gBAAgB,EAAE,SAAS;IAC3B,sBAAsB,EAAE,SAAS;IACjC,sBAAsB,EAAE,SAAS;IACjC,iBAAiB,EAAE,SAAS;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,wBAAwB,EAAE,SAAS;IACnC,iBAAiB,EAAE,SAAS;IAC5B,wBAAwB,EAAE,SAAS;IACnC,iBAAiB,EAAE,SAAS;IAC5B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,wBAAwB,EAAE,SAAS;IACnC,0BAA0B,EAAE,SAAS;IACrC,uBAAuB,EAAE,SAAS;IAClC,iBAAiB,EAAE,SAAS;IAC5B,gBAAgB,EAAE,SAAS;IAC3B,wBAAwB,EAAE,SAAS;IACnC,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,iBAAiB,EAAE,SAAS;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,sBAAsB,EAAE,SAAS;IACjC,sBAAsB,EAAE,SAAS;IACjC,sBAAsB,EAAE,SAAS;IACjC,uBAAuB,EAAE,SAAS;CAC1B,CAAC;AAGE,QAAA,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,aAAK,CAAC,CAAuB,CAAC"}

package/colors.scss

@@ -18,6 +18,7 @@ $basic-white: #fff;
 $additional-deep-red: #d50000;
 $additional-red: #fb3a2f;
 $additional-light-red: #feebea;
+$additional-dark-teal: #089176;
 $additional-teal: #09ab8b;
 $additional-green: #00c853;
 $additional-light-green: #64dd17;
@@ -39,3 +40,4 @@ $additional-brown: #795548;
 $additional-blue-gray: #607d8b;
 $additional-deep-blue: #00599d;
 $additional-dark-blue: #002b41;
+$additional-unlit-blue: #1b75c2;

package/context/viewport.js

@@ -7,3 +7,4 @@ const react_1 = require("react");
  * внутри компонентов формирующих свою область видимости (например Modal).
  */
 exports.ViewportContext = (0, react_1.createContext)((0, react_1.createRef)());
+//# sourceMappingURL=viewport.js.map

package/context/viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../src/context/viewport.ts"],"names":[],"mappings":";;;AAAA,iCAA4D;AAE5D;;;GAGG;AACU,QAAA,eAAe,GAAG,IAAA,qBAAa,EAAyB,IAAA,iBAAS,GAAE,CAAC,CAAC"}

package/dot-nav/index.js

@@ -23,12 +23,12 @@ function DotNav({ size = 's', current = 0, total = 1, onSelect }) {
     const totalWidth = itemSize * total + itemGutter * (total - 1);
     const shift = useShift(current, total);
     const correction = withShift ? itemSize + itemGutter : (maxWidth - totalWidth) / 2;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('root', `size-${size}`), style: { width: maxWidth, height: itemSize } }, { children: (0, lodash_1.times)(total).map(index => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: cx('root', `size-${size}`), style: { width: maxWidth, height: itemSize }, children: (0, lodash_1.times)(total).map(index => {
             const position = index - shift + 1;
             return ((0, jsx_runtime_1.jsx)("div", { style: {
                     left: `${correction + (index - shift) * (itemSize + itemGutter)}px`,
                 }, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index), className: cx('item', index === current && 'active', withShift && (position <= 0 || position >= 4) && 'distant') }, index));
-        }) })));
+        }) }));
 }
 exports.DotNav = DotNav;
 /**
@@ -58,3 +58,4 @@ function useShift(current, total) {
     prevCurrentRef.current = current;
     return shiftRef.current;
 }
+//# sourceMappingURL=index.js.map

package/dot-nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dot-nav/index.tsx"],"names":[],"mappings":"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"}

package/dropdown/index.js

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -26,7 +15,7 @@ const cx = bind_1.default.bind(dropdown_module_scss_1.default);
 /**
  * Компонент выпадающего блока с контентом, например списком.
  */
-exports.Dropdown = (0, react_1.forwardRef)(function Dropdown(_a, ref) {
-    var { className, children, 'data-testid': testId = 'dropdown', customScrollbarProps } = _a, restProps = __rest(_a, ["className", "children", 'data-testid', "customScrollbarProps"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: cx('root', className, shadows_1.BoxShadow.z4, shapes_1.MediumRounds.all) }, restProps, { "data-testid": testId }, { children: (0, jsx_runtime_1.jsx)(custom_scrollbar_1.CustomScrollbar, Object.assign({}, customScrollbarProps, { className: cx('inner'), overflow: { x: 'h', y: 's' } }, { children: children })) })));
+exports.Dropdown = (0, react_1.forwardRef)(function Dropdown({ className, children, 'data-testid': testId = 'dropdown', customScrollbarProps, ...restProps }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cx('root', className, shadows_1.BoxShadow.z4, shapes_1.MediumRounds.all), ...restProps, "data-testid": testId, children: (0, jsx_runtime_1.jsx)(custom_scrollbar_1.CustomScrollbar, { ...customScrollbarProps, className: cx('inner'), overflow: { x: 'h', y: 's' }, children: children }) }));
 });
+//# sourceMappingURL=index.js.map

package/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmC;AACnC,gDAA+C;AAC/C,8CAAiD;AACjD,oEAAsF;AACtF,2DAAyC;AACzC,kFAA4C;AAiB5C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,8BAAM,CAAC,CAAC;AAEnC;;GAEG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAuC,SAAS,QAAQ,CACxF,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,GAAG,UAAU,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,EAC/F,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,mBAAS,CAAC,EAAE,EAAE,qBAAY,CAAC,GAAG,CAAC,KAC5D,SAAS,iBACA,MAAM,YAEnB,uBAAC,kCAAe,OACV,oBAAoB,EACxB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,QAAQ,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,YAE3B,QAAQ,GACO,GACd,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dropdown/utils.js

@@ -45,3 +45,4 @@ function useDropdownFloatingStyle({ strategy, x, y, refs, }) {
     };
 }
 exports.useDropdownFloatingStyle = useDropdownFloatingStyle;
+//# sourceMappingURL=utils.js.map

package/dropdown/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown/utils.ts"],"names":[],"mappings":";;;AAAA,8CAAkG;AAClG,4CAA4C;AAE5C;;;GAGG;AACH,SAAgB,sBAAsB;IACpC,OAAO;QACL,oBAAoB,EAAE,kBAAU;QAChC,SAAS,EAAE,cAAc;QACzB,UAAU,EAAE;YACV,wEAAwE;YACxE,iFAAiF;YACjF,IAAA,YAAI,EAAC;gBACH,OAAO,EAAE,EAAE;aACZ,CAAC;YACF,IAAA,aAAK,EAAC;gBACJ,OAAO,EAAE,EAAE;aACZ,CAAC;SACH;KACF,CAAC;AACJ,CAAC;AAfD,wDAeC;AAED;;;;GAIG;AACH,SAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,CAAC,EACD,CAAC,EACD,IAAI,GACqD;IACzD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,MAAM,WAAW,GAAuB,IAAI,CAAC,SAAS,CAAC,OAAO;QAC5D,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,IAAI;QAC7D,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO;QACL,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;QACX,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;QACZ,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,KAAK,GAAG,CAAC;QAEjB,6BAA6B;QAC7B,gBAAgB,EAAE,WAAW;KAC9B,CAAC;AACJ,CAAC;AAtBD,4DAsBC"}

package/dropdown-item/index.js

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -24,11 +13,11 @@ const cx = bind_1.default.bind(dropdown_item_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-function DropdownItem(_a) {
-    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", "dangerouslySetInnerHTML", 'data-testid']);
+function DropdownItem({ size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item', ...restProps }) {
     const start = StartIcon ? (0, jsx_runtime_1.jsx)(StartIcon, { className: cx('icon') }) : startContent;
     const end = EndIcon ? (0, jsx_runtime_1.jsx)(EndIcon, { className: cx('icon') }) : endContent;
     const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId }, { children: hasChildren ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [start && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('col', 'col-start') }, { children: start })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('col', 'col-center') }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('row-main') }, { children: children })), size === 'xl' && comment && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('row-comment') }, { children: comment }))] })), end && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('col', 'col-end') }, { children: end }))] })) : undefined })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...restProps, className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId, children: hasChildren ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [start && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-start'), children: start }), (0, jsx_runtime_1.jsxs)("div", { className: cx('col', 'col-center'), children: [(0, jsx_runtime_1.jsx)("div", { className: cx('row-main'), children: children }), size === 'xl' && comment && (0, jsx_runtime_1.jsx)("div", { className: cx('row-comment'), children: comment })] }), end && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-end'), children: end })] })) : undefined }));
 }
 exports.DropdownItem = DropdownItem;
+//# sourceMappingURL=index.js.map

package/dropdown-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown-item/index.tsx"],"names":[],"mappings":";;;;;;;AACA,2DAAyC;AACzC,4FAAiD;AAEjD,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,mCAAM,CAAC,CAAC;AA0CnC;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EACP,uBAAuB,EACvB,aAAa,EAAE,MAAM,GAAG,eAAe,EACvC,GAAG,SAAS,EACM;IAClB,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAC9E,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAC,OAAO,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,UAAU,CAAC;IAEtE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,WAAW,CAAC,CAAC;IAErF,OAAO,CACL,mCACM,SAAS,EACb,SAAS,EAAE,EAAE,CACX,MAAM,EACN,QAAQ,IAAI,EAAE,EACd,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,EACpB,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,UAAU,EACrB,SAAS,CACV,EACD,uBAAuB,EAAE,uBAAuB,iBACnC,MAAM,YAMlB,WAAW,CAAC,CAAC,CAAC,CACb,6DACG,KAAK,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAG,KAAK,GAAO,EAE/D,iCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,aACrC,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,YAAG,QAAQ,GAAO,EAC/C,IAAI,KAAK,IAAI,IAAI,OAAO,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,YAAG,OAAO,GAAO,IAC3E,EAEL,GAAG,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAAG,GAAG,GAAO,IACxD,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,CACP,CAAC;AACJ,CAAC;AAvDD,oCAuDC"}

package/dropdown-item/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dropdown-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/dropdown-item/types.ts"],"names":[],"mappings":""}

package/dropdown-item/utils.js

@@ -87,3 +87,4 @@ class LoopedIterator {
     }
 }
 exports.LoopedIterator = LoopedIterator;
+//# sourceMappingURL=utils.js.map

package/dropdown-item/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown-item/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAuC;AACvC,wBAAiC;AAGjC,yCAAyC;AACzC,MAAa,iBAAiB;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAA2C;QACnD,OAAO,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAY,CAAC;IAC9D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,QAA6B;QAC3C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC;QAE3C,4FAA4F;QAC5F,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,gBAAgB,CACrB,SAAgC,EAChC,YAAoB;QAEpB,IAAI,eAAe,GAAG,CAAC,CAAC,CAAC;QAEzB,MAAM,gBAAgB,GAAkB,SAAS,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACtF,IAAI,KAAK,KAAK,YAAY,EAAE;gBAC1B,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC;aAC9B;YAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACxB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACjB;YAED,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,IAAI,cAAc,CAAS,gBAAgB,EAAE,eAAe,CAAC,CAAC;IACvE,CAAC;CACF;AAhDD,8CAgDC;AAED,0EAA0E;AAC1E,MAAa,cAAc;IAIzB;;;;OAIG;IACH,YAAY,MAAW,EAAE,aAAa,GAAG,CAAC;QACxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5B,OAAO,SAAS,CAAC;SAClB;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACnC,SAAS,GAAG,CAAC,CAAC;SACf;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5B,OAAO,SAAS,CAAC;SAClB;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;CACF;AArDD,wCAqDC"}

package/expandable/expandable-group.module.scss

@@ -12,16 +12,12 @@
 .item {
   display: block;
   padding: 0;
-  max-width: 100%;
+  max-width: calc(100% - var(--expandable-gap, 0));
   height: var(--expandable-item-height);
   margin: 0 (var(--expandable-gap)) var(--expandable-gap) 0;
   &.hidden {
     display: none;
   }
-  &.invisible {
-    opacity: 0;
-    pointer-events: none;
-  }
   &.opener {
     width: var(--expandable-opener-width);
   }

package/expandable/index.d.ts

@@ -1,42 +1,12 @@
-import { 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;
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Стили корневого элемента. */
-    style?: CSSProperties;
-    /** Нужно ли выводить список развернутым. */
-    expanded?: boolean;
-    /** Ширина открывающего элемента. */
-    openerWidth?: number;
-}
-export interface GroupItemProps {
-    children?: ReactNode;
-    onClick?: MouseEventHandler;
-    'data-testid'?: string;
-}
+/// <reference types="react" />
+import { ExpandableGroupProps, ExpandableGroupItemProps } from './types';
 /**
  * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, expanded: expandedProp, openerWidth, }: ExpandableGroupProps): JSX.Element;
+export declare function ExpandableGroup(props: ExpandableGroupProps): JSX.Element;
 export declare const Expandable: {
     readonly Group: typeof ExpandableGroup;
-    readonly Item: import("react").ForwardRefExoticComponent<GroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    readonly Item: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
 };

package/expandable/index.js

@@ -6,52 +6,106 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Expandable = exports.ExpandableGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const hooks_1 = require("../hooks");
 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 ItemContext = (0, react_1.createContext)({});
+const initialState = {
+    status: 'initial',
+    lastVisibleIndex: -1,
+};
+const expandedState = {
+    status: 'expanded',
+    lastVisibleIndex: -1,
+};
 /**
  * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
  * @param props Свойства.
  * @return Элемент.
  */
-function ExpandableGroup({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, onExpand, opener = data => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u0415\u0449\u0451 ", data.hiddenCount] }), className, style, expanded: expandedProp, openerWidth = 72, }) {
-    const wrapperRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
+function ExpandableGroup(props) {
+    const time = (0, react_1.useRef)(1);
+    // @todo зациклить если каким-то невероятным образом уйдет за границу number
+    time.current = time.current + 1;
+    // ВАЖНО: рендер вызванный родительским компонентом должен приводить к пересчету, поэтому передаем уникальный time
+    return (0, jsx_runtime_1.jsx)(ExpandableGroupInner, { ...props, time: time.current });
+}
+exports.ExpandableGroup = ExpandableGroup;
+/**
+ * Внутренний компонент, необходимый для корректной обработки повторных render'ов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ExpandableGroupInner({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, opener: renderOpener = data => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u0415\u0449\u0451 ", data.hiddenCount] }), className, style, expanded: expandedProp, onExpand, openerWidth = 72, time, }) {
+    const outerRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_1.useRef)(null);
     const openerRef = (0, react_1.useRef)(null);
     const [mounted, setMounted] = (0, react_1.useState)(false);
-    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
-    const items = react_1.Children.toArray(children).reduce((result, child) => {
-        if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
-            result.push(child);
-        }
-        return result;
-    }, []);
+    const [state, setState] = (0, react_1.useState)(() => (defaultExpanded ? expandedState : initialState));
     (0, react_1.useEffect)(() => {
         setMounted(true);
     }, []);
+    // даем возможность управлять состоянием с помощью пропса "expanded"
     (0, react_1.useEffect)(() => {
-        expandedProp !== undefined && setExpanded(expandedProp);
+        if (typeof expandedProp === 'boolean') {
+            setState(expandedProp ? expandedState : initialState);
+        }
     }, [expandedProp]);
-    const { hiddenCount } = (0, utils_1.useExpandable)({
-        expanded,
-        wrapperRef,
-        containerRef,
-        openerRef,
-        gap,
+    // если "time" обновился - это сигнал о том что надо пересчитать состояние
+    (0, react_1.useEffect)(() => {
+        setState(current => (current.status === 'expanded' ? current : initialState));
+    }, [time]);
+    // следим за изменением ширины чтобы запустить перерасчет
+    (0, utils_1.useObserveWidth)(outerRef, () => {
+        setState(current => (current.status === 'expanded' ? current : initialState));
     });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: wrapperRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px`, '--expandable-item-height': `${itemHeight}px`, '--expandable-opener-width': `${openerWidth}px`, '--expandable-gap': `${gap}px` }) }, { children: (0, jsx_runtime_1.jsxs)("ul", Object.assign({ ref: containerRef, className: expandable_group_module_scss_1.default.inner }, { children: [items, mounted && !expanded && ((0, jsx_runtime_1.jsx)(ItemContext.Provider, Object.assign({ value: { invisible: hiddenCount === 0, opener: true } }, { children: (0, jsx_runtime_1.jsx)(ExpandableItem, Object.assign({ ref: openerRef, onClick: () => {
-                            setExpanded(true);
-                            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
-                        }, "data-testid": 'expandable:opener' }, { children: opener({ hiddenCount }) })) })))] })) })));
+    // выполняем расчет
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (state.status === 'initial') {
+            const outer = outerRef.current;
+            const inner = innerRef.current;
+            const opener = openerRef.current;
+            if (outer && inner && opener) {
+                const { lastVisibleIndex } = (0, utils_1.defineLastVisible)({ outer, inner, gap, opener, openerWidth });
+                setState({
+                    status: lastVisibleIndex !== -1 ? 'some-hidden' : 'all-visible',
+                    lastVisibleIndex,
+                });
+            }
+        }
+    }, [state, mounted]);
+    const rootStyle = {
+        ...style,
+        maxHeight: state.status === 'expanded'
+            ? undefined
+            : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px`,
+        '--expandable-gap': `${gap}px`,
+        '--expandable-item-height': `${itemHeight}px`,
+        '--expandable-opener-width': `${openerWidth}px`,
+    };
+    const handleExpand = (0, react_1.useCallback)(() => {
+        setState(expandedState);
+        onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+    }, [onExpand]);
+    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
+        if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
+            result.push((0, jsx_runtime_1.jsx)(ItemContext.Provider, { value: {
+                    hidden: state.status === 'some-hidden' && index > state.lastVisibleIndex,
+                }, children: child }, child.key));
+        }
+        return result;
+    }, []);
+    // ВАЖНО: root нужен для того чтобы формировать ограничение по высоте
+    return ((0, jsx_runtime_1.jsx)("div", { ref: outerRef, className: cx('root', className), style: rootStyle, children: (0, jsx_runtime_1.jsxs)("ul", { ref: innerRef, className: cx('inner'), children: [items, mounted && state.status !== 'expanded' && ((0, jsx_runtime_1.jsx)(ItemContext.Provider, { value: { hidden: state.status !== 'some-hidden' }, children: (0, jsx_runtime_1.jsx)(ExpandableItem, { ref: openerRef, onClick: handleExpand, "data-testid": 'expandable:opener', children: renderOpener({ hiddenCount: items.length - state.lastVisibleIndex - 1 }) }) }))] }) }));
 }
-exports.ExpandableGroup = ExpandableGroup;
 const ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
-    const context = (0, react_1.useContext)(ItemContext);
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ ref: ref, className: cx('item', context), "data-testid": testId, onClick: onClick }, { children: children })));
+    const { hidden } = (0, react_1.useContext)(ItemContext);
+    return ((0, jsx_runtime_1.jsx)("li", { ref: ref, className: cx('item', { hidden }), "data-testid": testId, onClick: onClick, children: children }));
 });
 exports.Expandable = {
     Group: ExpandableGroup,
     Item: ExpandableItem,
 };
+//# sourceMappingURL=index.js.map

package/expandable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expandable/index.tsx"],"names":[],"mappings":"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"}

package/expandable/types.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { WithTestId } from '../types';
+export interface ExpandableGroupInnerStyle extends CSSProperties {
+    '--expandable-item-height'?: string;
+    '--expandable-opener-width'?: string;
+    '--expandable-gap'?: string;
+}
+export interface ExpandableGroupProps {
+    /** Расстояние между элементами группы в пикселях. */
+    gap?: number;
+    /** Высота каждого элемента группы в пикселях. */
+    itemHeight?: number;
+    /** Развернут ли список по умолчанию. */
+    defaultExpanded?: boolean;
+    /** Количество строк в свернутом состоянии группы. */
+    lineLimit?: number;
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Функция, возвращающая содержимое кнопки разворачивания списка. */
+    opener?: (data: {
+        hiddenCount: number;
+    }) => ReactNode;
+    /** Сработает при разворачивании списка. */
+    onExpand?: () => void;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Нужно ли выводить список развернутым. */
+    expanded?: boolean;
+    /** Ширина открывающего элемента. */
+    openerWidth?: number;
+}
+export interface ExpandableGroupItemProps extends WithTestId {
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Сработает при клике. */
+    onClick?: MouseEventHandler;
+}

package/expandable/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/expandable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/expandable/types.ts"],"names":[],"mappings":""}

package/expandable/utils.d.ts

@@ -1,31 +1,30 @@
 import { RefObject } from 'react';
-export interface ViewState {
-    lastVisibleIndex: number;
-}
 /**
- * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param options.expanded Развернут ли список.
- * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
- * @param options.containerRef Реф элемента, содержащего список.
- * @param options.openerRef Реф элемента "открывашки".
- * @param options.gap Расстояние между элементами списка.
- * @return Рассчитанные данные: кол-во скрытых элементов.
+ * Определяет последний дочерний элемент который должен быть виден чтобы влезла "открывашка".
+ * @param payload Данные.
+ * @return Результат.
+ *
+ * ВАЖНО: lastVisibleIndex: -1 означает что все элементы видны и "открывашка" не нужна.
  */
-export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, gap, }: {
-    expanded: boolean;
-    wrapperRef: RefObject<HTMLElement>;
-    containerRef: RefObject<HTMLElement>;
-    openerRef: RefObject<HTMLElement>;
+export declare function defineLastVisible({ outer, inner, gap, opener, openerWidth, }: {
+    outer: Element;
+    inner: Element;
     gap: number;
+    opener: Element;
+    openerWidth: number;
 }): {
-    hiddenCount: number;
+    lastVisibleIndex: number;
 };
 /**
- * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param wrapper Элемент, формирующий ограничение по высоте.
- * @param items Элементы, все кроме "закрывашки".
- * @param opener Элемент "закрывашки".
- * @param gap Расстояние между элементами списка.
- * @return Состояние.
+ * Регистрирует обработчик изменения ширины элемента.
+ * @param element Элемент.
+ * @param callback Callback.
+ * @return Функция отписки.
+ */
+export declare function observeWidth(element: Element, callback: VoidFunction): () => void;
+/**
+ * Хук для регистрации обработчика изменения ширины элемента.
+ * @param ref Ref элемента.
+ * @param callback Callback.
  */
-export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement, gap: number): ViewState;
+export declare function useObserveWidth(ref: RefObject<Element>, callback: VoidFunction): void;