@sima-land/ui-nucleons 41.2.1 → 42.1.0

package/alert/index.d.ts

@@ -8,8 +8,6 @@ export interface AlertProps extends WithBodyScrollLock {
     className?: string;
     /** Содержимое "подвала". */
     footer?: React.ReactNode;
-    /** Нужно ли выводить в Layer. */
-    inPortal?: boolean;
     /** Свойства компонента NavBar. */
     navBarProps?: NavBarProps;
     /** Заголовок. */
@@ -26,4 +24,4 @@ export interface AlertProps extends WithBodyScrollLock {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Alert: ({ inPortal, ...restProps }: AlertProps) => JSX.Element;
+export declare const Alert: ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar, withScrollDisable, scrollDisableOptions, onClose, }: AlertProps) => JSX.Element;

package/alert/index.js

@@ -18,24 +18,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.Alert = void 0;
 const react_1 = __importStar(require("react"));
-const portal_1 = require("../portal");
 const nav_bar_1 = require("../nav-bar");
 const bind_1 = __importDefault(require("classnames/bind"));
 const alert_module_scss_1 = __importDefault(require("./alert.module.scss"));
@@ -48,27 +36,15 @@ const cx = bind_1.default.bind(alert_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Alert = (_a) => {
-    var { inPortal = true } = _a, restProps = __rest(_a, ["inPortal"]);
+const Alert = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const layer = (0, layer_1.useLayer)() + 100;
-    const Wrapper = inPortal ? portal_1.Portal : react_1.Fragment;
-    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement(AlertInner, Object.assign({}, restProps)))));
-};
-exports.Alert = Alert;
-/**
- * Промежуточный компонент, необходимый для того чтобы не передавать реф для блокировки прокрутки через портал.
- * @param props Свойства.
- * @return Элемент.
- */
-const AlertInner = ({ children, className, footer, navBarProps, title, withDivideNavBar, withNavBar = Boolean(title), withScrollDisable = false, scrollDisableOptions, onClose, }) => {
     const rootRef = (0, react_1.useRef)(null);
-    const layer = (0, layer_1.useLayer)();
     (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
-    return (react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
-        react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
-            withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
-            react_1.default.createElement("div", { className: cx('main') }, children),
-            Boolean(footer) && react_1.default.createElement("div", { className: borders_1.InnerBorder.top }, footer))));
+    return (react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+        react_1.default.createElement("div", { ref: rootRef, className: cx('overlay'), style: { zIndex: layer }, onClick: e => e.target === e.currentTarget && (onClose === null || onClose === void 0 ? void 0 : onClose()), "data-testid": 'alert:overlay' },
+            react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
+                withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
+                react_1.default.createElement("div", { className: cx('main') }, children),
+                Boolean(footer) && react_1.default.createElement("div", { className: borders_1.InnerBorder.top }, footer)))));
 };
+exports.Alert = Alert;

package/modal/index.d.ts

@@ -13,8 +13,6 @@ export interface ModalProps extends WithBodyScrollLock {
     onClose?: () => void;
     /** Размер окна. */
     size?: ModalSize;
-    /** Нужно ли выводить элемент в портале (для SSR следует указывать false). */
-    inPortal?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/modal/index.js

@@ -18,17 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -39,7 +28,6 @@ const top_bar_1 = require("../top-bar");
 const bottom_bar_1 = require("../bottom-bar");
 const utils_1 = require("./utils");
 const shadows_1 = require("../styling/shadows");
-const portal_1 = require("../portal");
 const lodash_1 = require("lodash");
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
@@ -53,19 +41,7 @@ const cx = bind_1.default.bind(modal_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Modal = (_a) => {
-    var { inPortal } = _a, restProps = __rest(_a, ["inPortal"]);
-    const Wrapper = inPortal ? portal_1.Portal : react_1.Fragment;
-    return (react_1.default.createElement(Wrapper, null,
-        react_1.default.createElement(ModalInner, Object.assign({}, restProps))));
-};
-exports.Modal = Modal;
-/**
- * Внутренний компонент для того чтобы не прокидывать реф через портал.
- * @param props Свойства.
- * @return Элемент.
- */
-const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
+const Modal = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
     const layer = (0, layer_1.useLayer)() + 100;
     const rootRef = (0, react_1.useRef)(null);
     const bind = (0, utils_1.useCloseHandler)(onClose);
@@ -102,6 +78,7 @@ const ModalInner = ({ children, height, onClose, scrollDisableOptions = { reserv
             !footer && !fullscreen && react_1.default.createElement("div", { className: cx('footer-stub') }),
             !fullscreen && overlap && react_1.default.createElement("div", { className: cx('overlap') }, overlap))));
 };
+exports.Modal = Modal;
 exports.Modal.Header = slots_1.ModalHeader;
 exports.Modal.Body = slots_1.ModalBody;
 exports.Modal.Footer = slots_1.ModalFooter;

package/modal/utils.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 /**
  * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
  * @param callback Сработает при клике.
  * @return Свойства для целевого элемента.
  */
 export declare const useCloseHandler: (callback?: (() => void) | undefined) => {
-    onMouseUp: ({ target, currentTarget, button }: any) => void;
-    onMouseDown: ({ button, target }: any) => void;
+    onMouseUp: ({ target, currentTarget, button }: React.MouseEvent) => void;
+    onMouseDown: ({ button, target }: React.MouseEvent) => void;
 };

package/modal/utils.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseHandler = void 0;
 const react_1 = require("react");
+const identity_1 = require("../hooks/identity");
 /**
  * Вызывает callback только если клик был начат и закончен по одному и тому же элементу.
  * @param callback Сработает при клике.
  * @return Свойства для целевого элемента.
  */
 const useCloseHandler = (callback) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
     const mouseDownTarget = (0, react_1.useRef)();
     const onMouseDown = (0, react_1.useCallback)(({ button, target }) => {
         if (button === 0) {
@@ -15,12 +17,13 @@ const useCloseHandler = (callback) => {
         }
     }, []);
     const onMouseUp = (0, react_1.useCallback)(({ target, currentTarget, button }) => {
-        callback &&
+        const fn = callbackRef.current;
+        fn &&
             button === 0 &&
             target === currentTarget &&
             currentTarget === mouseDownTarget.current &&
-            callback();
-    }, [callback]);
+            fn();
+    }, []);
     return { onMouseUp, onMouseDown };
 };
 exports.useCloseHandler = useCloseHandler;

package/package.json

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

package/select/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextFieldProps } from '../text-field';
 declare type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style'> {
+export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
     /** Нужно ли выводить состояние загрузки списка. */
     loading?: boolean;
     /** Сработает при открытии/закрытии меню. */
@@ -16,11 +16,18 @@ export interface SelectProps extends Omit<TextFieldProps, 'style'> {
     renderOption?: (option: any) => React.ReactNode;
     /** Стили. */
     style?: React.CSSProperties;
+    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
 }
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
 export {};

package/select/index.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = exports.renderDefaultArrow = void 0;
 const react_1 = __importStar(require("react"));
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
@@ -45,38 +45,61 @@ const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/A
 const select_module_scss_1 = __importDefault(require("./select.module.scss"));
 const colors_1 = require("../colors");
 const dropdown_loading_1 = require("../_internal/dropdown-loading");
+const hooks_1 = require("../hooks");
 const cx = bind_1.default.bind(select_module_scss_1.default);
+/**
+ * Выводит иконку стрелки для поля Select по умолчанию.
+ * @param opened Открыт ли список опций.
+ * @return Элемент.
+ */
+const renderDefaultArrow = (opened) => {
+    const ArrowSVG = opened ? up_1.default : down_1.default;
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') });
+};
+exports.renderDefaultArrow = renderDefaultArrow;
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
 const Select = (_a) => {
-    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid']);
+    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size, endAdornment = exports.renderDefaultArrow } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size", "endAdornment"]);
+    const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [opened, toggleMenu] = (0, react_1.useState)(false);
-    const ArrowSVG = opened ? up_1.default : down_1.default;
     (0, react_1.useEffect)(() => {
-        opened && menuRef.current.focus();
+        opened && menuRef.current && menuRef.current.focus();
         onMenuToggle && onMenuToggle(opened);
     }, [opened]);
-    return (react_1.default.createElement("div", { style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { readOnly: true, "data-testid": 'select:field', ref: fieldRef, variant: 'desktop', label: label, value: value, multiline: false, focused: opened, onClick: e => {
-                toggleMenu(o => !o);
-                onClick && onClick(e);
-            }, onBlur: ({ relatedTarget }) => {
-                relatedTarget !== menuRef.current && toggleMenu(false);
-            }, onKeyDown: (e) => {
-                e.key === 'Enter' && toggleMenu(true);
-            }, className: cx('field'), endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) })),
-        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'select:menu', tabIndex: -1, className: cx('menu'), onBlur: () => {
-                toggleMenu(false);
-            }, role: 'menu', onKeyDown: (event) => {
+    (0, hooks_1.useOutsideClick)(rootRef, toggleMenu.bind(null, false));
+    return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { size: size, blockProps: {
+                ref: fieldRef,
+                tabIndex: 0,
+                onMouseDown: () => {
+                    toggleMenu(a => !a);
+                },
+                onKeyDown: e => {
+                    e.key === 'Enter' && toggleMenu(true);
+                },
+                onClick: e => {
+                    e.preventDefault();
+                    onClick && onClick(e);
+                },
+            }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
+                // чтобы не ловить фокус на поле
+                style: { pointerEvents: 'none' },
+                tabIndex: -1,
+            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: typeof endAdornment === 'function' ? endAdornment(opened) : endAdornment })),
+        opened && (loading || options.length > 0) && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     toggleMenu(false);
                     fieldRef.current && fieldRef.current.focus();
                 }
+            }, onBlur: () => {
+                toggleMenu(false);
+                fieldRef.current && fieldRef.current.focus();
             } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (options.map((option, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: optionSize, key: index, role: 'menuitem', onClick: () => {
                 toggleMenu(false);
                 onSelect && onSelect(option);

package/side-page/index.d.ts

@@ -41,7 +41,7 @@ export declare const SidePage: {
     };
     Body: {
         ({ children }: {
-            children?: React.ReactNode; /** Обработчик "onExiting" для CSSTransition. */
+            children?: React.ReactNode;
         }): JSX.Element;
         displayName: string;
     };

package/side-page/index.js

@@ -81,10 +81,11 @@ const SidePageInner = ({ size = 'm', children, onClose, withScrollDisable, scrol
     });
     (0, body_scroll_1.useBodyScrollLock)(ref, withScrollDisable, scrollDisableOptions);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: cx('overlay'), style: overlayStyles }, (transitionStatus !== 'entering' && overlayBind)),
-        react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
-            header,
-            react_1.default.createElement("div", { className: cx('body') }, body),
-            footer)));
+        react_1.default.createElement(layer_1.LayerProvider, { value: layer },
+            react_1.default.createElement("div", { className: cx('main', `size-${size}`) },
+                header,
+                react_1.default.createElement("div", { className: cx('body') }, body),
+                footer))));
 };
 exports.SidePage.Header = slots_1.SidePageHeader;
 exports.SidePage.Body = slots_1.SidePageBody;

package/text-field/index.d.ts

@@ -46,6 +46,8 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     startAdornment?: React.ReactNode;
     /** Вариант отображения. */
     variant?: Variant;
+    /** Свойства элемента-блока. */
+    blockProps?: React.HTMLProps<HTMLDivElement>;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/text-field/index.js

@@ -51,7 +51,7 @@ const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disab
  * @param props Свойства.
  * @return Элемент.
  */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, 'data-testid': dataTestId, }, ref) {
+exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, }, ref) {
     const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
     const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
     const focused = reallyFocused || Boolean(asFocused);
@@ -70,21 +70,25 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
     (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
     (0, react_1.useEffect)(() => toggleHasValue(Boolean(baseInputRef.current.value)));
     return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        react_1.default.createElement("div", { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds]), onClick: event => {
+        react_1.default.createElement("div", Object.assign({ "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
                 const input = baseInputRef.current;
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
-                input && !disabled && input !== document.activeElement && input.focus();
-            } },
+                input &&
+                    !disabled &&
+                    !event.defaultPrevented &&
+                    input !== document.activeElement &&
+                    input.focus();
+            } }, blockProps),
             !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
             react_1.default.createElement("div", { className: cx('main-column') },
                 withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
                     react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
-                            (0, lodash_1.isFunction)(onFocus) && onFocus(event);
+                            onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);
                         }, onBlur: (event) => {
-                            (0, lodash_1.isFunction)(onBlur) && onBlur(event);
+                            onBlur && onBlur(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(false);
                         }, onInput: onInput, onChange: onChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),