@sima-land/ui-nucleons 45.0.0-alpha.3 → 45.0.0-alpha.4

package/_internal/custom-scrollbar/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, Ref } from 'react';
+import { CSSProperties, ReactNode, Ref, UIEvent as ReactUIEvent } from 'react';
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
 type Options = NonNullable<OverlayScrollbarsComponentProps['options']>;
@@ -32,7 +32,7 @@ export declare function CustomScrollbar({ osComponentRef, style, className, chil
  * @param threshold Запас.
  * @return Обработчик.
  */
-export declare function HandleFullScroll(callback: () => void, threshold?: number): (event: UIEvent | undefined) => void;
+export declare function useFullScroll(callback: VoidFunction | undefined, threshold?: number): (event: UIEvent | ReactUIEvent | undefined) => void;
 /**
  * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
  * @param component Экземпляр OverlayScrollbarsComponent.

package/_internal/custom-scrollbar/index.js

@@ -1,14 +1,38 @@
 "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.getViewport = exports.HandleFullScroll = exports.CustomScrollbar = void 0;
-const react_1 = __importDefault(require("react"));
+exports.getViewport = exports.useFullScroll = exports.CustomScrollbar = void 0;
+const react_1 = __importStar(require("react"));
 const overlayscrollbars_react_1 = require("overlayscrollbars-react");
 const bind_1 = __importDefault(require("classnames/bind"));
 const custom_scrollbar_module_scss_1 = __importDefault(require("./custom-scrollbar.module.scss"));
 require("overlayscrollbars/css/OverlayScrollbars.css");
+const identity_1 = require("../../hooks/identity");
 const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
 /**
  * Компонент блока с кастомными полосами прокрутки по гайдам.
@@ -16,13 +40,10 @@ const cx = bind_1.default.bind(custom_scrollbar_module_scss_1.default);
  * @return Элемент.
  */
 function CustomScrollbar({ osComponentRef, style, className, children, overflow, inFlexBox = false, onFullScroll, fullScrollThreshold, }) {
+    const onScrollStop = useFullScroll(onFullScroll, fullScrollThreshold);
     return (react_1.default.createElement(overlayscrollbars_react_1.OverlayScrollbarsComponent, { ref: osComponentRef, style: style, className: cx('custom-scrollbar', className, { 'os-host-flexbox': inFlexBox }), options: {
             overflowBehavior: overflow,
-            callbacks: onFullScroll
-                ? {
-                    onScrollStop: HandleFullScroll(onFullScroll, fullScrollThreshold),
-                }
-                : undefined,
+            callbacks: { onScrollStop },
         } }, children));
 }
 exports.CustomScrollbar = CustomScrollbar;
@@ -32,15 +53,19 @@ exports.CustomScrollbar = CustomScrollbar;
  * @param threshold Запас.
  * @return Обработчик.
  */
-function HandleFullScroll(callback, threshold = 16) {
-    return (event) => {
+function useFullScroll(callback, threshold = 16) {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    // ВАЖНО: overlayscrollbars не реагирует на замену callback'а onScrollStop на undefined поэтому проверяем сами
+    const handleScrollStop = (0, react_1.useMemo)(() => (event) => {
+        var _a;
         const el = event === null || event === void 0 ? void 0 : event.target;
         el instanceof Element &&
             el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
-            callback();
-    };
+            ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef));
+    }, []);
+    return handleScrollStop;
 }
-exports.HandleFullScroll = HandleFullScroll;
+exports.useFullScroll = useFullScroll;
 /**
  * Получив OverlayScrollbarsComponent вернет элемент-viewport или null.
  * @param component Экземпляр OverlayScrollbarsComponent.

package/arrow-button/arrow-button.module.scss

@@ -1,6 +1,6 @@
 @use '../colors';
 @use '../utils';
-@import '../styling/shadows.module';
+@use '../shadows';
 
 .arrow-button {
   @include utils.focus-visible;
@@ -25,17 +25,17 @@
   &.size-s {
     width: 32px;
     height: 32px;
-    @extend .shadow-z2;
+    @include shadows.box-shadow('z2');
     &:not(:disabled):hover {
-      @extend .shadow-z3;
+      @include shadows.box-shadow('z3');
     }
   }
   &.size-l {
     width: 56px;
     height: 56px;
-    @extend .shadow-z3;
+    @include shadows.box-shadow('z3');
     &:not(:disabled):hover {
-      @extend .shadow-z4;
+      @include shadows.box-shadow('z4');
     }
   }
 }

package/avatar/index.js

@@ -28,13 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const colors_1 = require("../colors");
-const person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/person"));
-const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
 const utils_1 = require("./utils");
 const colors_2 = require("../styling/colors");
-const cx = bind_1.default.bind(avatar_module_scss_1.default);
+const person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/person"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
 const SIZES = [40, 48, 56, 64, 72, 80, 104];
 const ICON_SIZES = {
     40: 16,
@@ -45,6 +44,7 @@ const ICON_SIZES = {
     80: 24,
     104: 24,
 };
+const cx = bind_1.default.bind(avatar_module_scss_1.default);
 /**
  * Компонент аватара.
  * @param props Свойства компонента.

package/avatar/utils.d.ts

@@ -3,4 +3,4 @@
  * @param value Переданная строка.
  * @return Монограмма.
  */
-export declare const getMonogram: (value: any) => string;
+export declare function getMonogram(value: any): string;

package/avatar/utils.js

@@ -1,19 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMonogram = void 0;
-const lodash_1 = require("lodash");
 /**
  * Формирует монограмму из переданной строки.
  * @param value Переданная строка.
  * @return Монограмма.
  */
-const getMonogram = (value) => (0, lodash_1.isString)(value)
-    ? value
-        .split(/\s+/g)
-        .slice(0, 2)
-        .map(s => s[0])
-        .reverse()
-        .join('')
-        .toUpperCase()
-    : '';
+function getMonogram(value) {
+    if (typeof value === 'string') {
+        return value
+            .split(/\s+/g)
+            .slice(0, 2)
+            .map(s => s[0])
+            .reverse()
+            .join('')
+            .toUpperCase();
+    }
+    return '';
+}
 exports.getMonogram = getMonogram;

package/group-overflow/index.js

@@ -52,7 +52,9 @@ function GroupOverflow(_a) {
     const ref = (0, react_1.useRef)(null);
     const { state, start } = (0, utils_1.useItemsHide)(ref, el => { var _a; return (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement; });
     const total = react_1.Children.count(children);
-    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(group_overflow_module_scss_1.default.root, className), style: gap ? Object.assign(Object.assign({}, style), { '--group-overflow-gap': `${gap}px` }) : style }, restProps),
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(group_overflow_module_scss_1.default.root, className), style: typeof gap === 'number'
+            ? Object.assign(Object.assign({}, style), { '--group-overflow-gap': `${gap}px` })
+            : style }, restProps),
         react_1.default.createElement("div", { ref: ref, className: group_overflow_module_scss_1.default.items }, state === 'initial'
             ? react_1.Children.toArray(children)
             : react_1.Children.toArray(children).slice(0, start)),

package/hint/utils.d.ts

@@ -56,7 +56,10 @@ export declare function useHintOnClick(floating: Pick<UseFloatingReturn, 'contex
 /**
  * Состояние хинта с автоматическим скрытием по таймауту.
  * @param initialState Начальное состояние.
+ * @param options Опции.
  * @return Результат вызова `useState`.
  */
-export declare function useTempHintState(initialState: boolean): readonly [boolean, Dispatch<SetStateAction<boolean>>];
+export declare function useTempHintState(initialState: boolean, { timeout }?: {
+    timeout?: number;
+}): readonly [boolean, Dispatch<SetStateAction<boolean>>];
 export {};

package/hint/utils.js

@@ -134,9 +134,10 @@ exports.useHintOnClick = useHintOnClick;
 /**
  * Состояние хинта с автоматическим скрытием по таймауту.
  * @param initialState Начальное состояние.
+ * @param options Опции.
  * @return Результат вызова `useState`.
  */
-function useTempHintState(initialState) {
+function useTempHintState(initialState, { timeout = 3000 } = {}) {
     const [open, setOpen] = (0, react_1.useState)(initialState);
     const timerRef = (0, react_1.useRef)(null);
     const updateTimer = (0, react_1.useCallback)((value) => {
@@ -146,9 +147,9 @@ function useTempHintState(initialState) {
         }
         // запускаем новый таймер если надо
         if (value) {
-            timerRef.current = window.setTimeout(() => setOpen(false), 2000);
+            timerRef.current = window.setTimeout(() => setOpen(false), timeout);
         }
-    }, []);
+    }, [timeout]);
     (0, react_1.useEffect)(() => {
         updateTimer(open);
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.3",
+  "version": "45.0.0-alpha.4",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/text-button/text-button.module.scss

@@ -11,8 +11,8 @@
   white-space: nowrap;
   background: transparent;
   padding: 0;
-  margin: 0;
   border: 0;
+  // ВАЖНО: не надо указывать здесь сброс margin так как его сложно перебить при сборке стилей
 }
 
 .root,

package/top-bar/index.d.ts

@@ -1,3 +1,3 @@
 export type { TopBarProps, TopBarSize } from './types';
-export type { navigationButtons } from './utils';
+export { navigationButtons } from './utils';
 export { TopBar, TOP_BAR_HEIGHT } from './top-bar';

package/top-bar/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOP_BAR_HEIGHT = exports.TopBar = void 0;
+exports.TOP_BAR_HEIGHT = exports.TopBar = exports.navigationButtons = void 0;
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "navigationButtons", { enumerable: true, get: function () { return utils_1.navigationButtons; } });
 var top_bar_1 = require("./top-bar");
 Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return top_bar_1.TopBar; } });
 Object.defineProperty(exports, "TOP_BAR_HEIGHT", { enumerable: true, get: function () { return top_bar_1.TOP_BAR_HEIGHT; } });