@sima-land/ui-nucleons 42.1.1 → 42.2.0

package/autocomplete/index.js

@@ -66,15 +66,13 @@ const Autocomplete = (_a) => {
     const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)();
     const menuRef = (0, react_1.useRef)();
-    const [needDropdown, toggleDropdown] = (0, react_1.useState)(false);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
     const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
-    const canShowDropdown = preset === 'filled-only-list'
-        ? needDropdown && realValue && realValue.length > 0
-        : needDropdown;
+    const canShowDropdown = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
     const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') }) : undefined;
     (0, hooks_1.useOutsideClick)(rootRef, () => {
-        toggleDropdown(false);
+        toggleMenu(false);
     });
     (0, react_1.useEffect)(() => {
         setRealValue(value);
@@ -88,7 +86,7 @@ const Autocomplete = (_a) => {
         const osInstance = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance();
         if (menu && osInstance && activeIndex !== null) {
             const child = menu.querySelectorAll('[role="menuitem"]')[activeIndex];
-            child &&
+            child instanceof HTMLElement &&
                 osInstance.scroll({
                     el: child,
                     scroll: { y: 'ifneeded' },
@@ -96,11 +94,11 @@ const Autocomplete = (_a) => {
         }
     }, [activeIndex]);
     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, { ref: fieldRef, focused: needDropdown, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
-                toggleDropdown(true);
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
+                toggleMenu(true);
                 onClick && onClick(e);
             }, onChange: (e) => {
-                toggleDropdown(true);
+                toggleMenu(true);
                 setRealValue(e.target.value);
                 setActiveIndex(0);
                 onChange && onChange(e);
@@ -117,7 +115,7 @@ const Autocomplete = (_a) => {
                     case 'Enter':
                         if (items && !(0, lodash_1.isNull)(activeIndex) && items.length > activeIndex) {
                             onSelect && onSelect(items[activeIndex]);
-                            toggleDropdown(false);
+                            toggleMenu(false);
                         }
                         break;
                 }
@@ -127,7 +125,7 @@ const Autocomplete = (_a) => {
         canShowDropdown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onClick: () => {
                 onSelect && onSelect(item);
                 setActiveIndex(null);
-                toggleDropdown(false);
+                toggleMenu(false);
                 fieldRef.current && fieldRef.current.focus();
             } }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
 };

package/hooks/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsomorphicLayoutEffect = exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
 const react_1 = require("react");
 const is_touch_device_1 = require("../helpers/is-touch-device");
-const lodash_1 = require("lodash");
 const on_1 = __importDefault(require("../helpers/on"));
 const identity_1 = require("./identity");
 /**
@@ -51,16 +50,14 @@ exports.useInfiniteScroll = useInfiniteScroll;
  * @param callback Сработает при клике вне элемента.
  */
 const useOutsideClick = (elementRef, callback) => {
-    const callbackRef = (0, react_1.useRef)(callback);
-    callbackRef.current = callback;
-    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', (event) => {
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', event => {
         const { current: element } = elementRef;
         const { current: handleClick } = callbackRef;
         element &&
             element !== event.target &&
             !element.contains(event.target) &&
-            (0, lodash_1.isFunction)(handleClick) &&
-            handleClick(event);
+            (handleClick === null || handleClick === void 0 ? void 0 : handleClick(event));
     }), []);
 };
 exports.useOutsideClick = useOutsideClick;

package/package.json

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

package/phone-input/index.d.ts

@@ -5,7 +5,7 @@ import { Country } from './presets';
 interface PhoneInputStyle extends React.CSSProperties {
     '--phone-input-width'?: number | string;
 }
-export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style'> {
+export interface PhoneInputProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'value' | 'ref' | 'style' | 'multiline'> {
     /** Сработает при "blur". */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState & {
         ready?: boolean;

package/phone-input/index.js

@@ -35,7 +35,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInput = void 0;
 const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
 const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
 const dropdown_1 = require("../dropdown");
@@ -44,10 +43,9 @@ const text_field_1 = require("../text-field");
 const masked_field_1 = require("../masked-field");
 const hooks_1 = require("../hooks");
 const presets_1 = require("./presets");
-const sizes_1 = require("../styling/sizes");
-const colors_1 = require("../colors");
-const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
 const cx = bind_1.default.bind(phone_input_module_scss_1.default);
 /**
  * Удаляет из значения код переданной страны.
@@ -66,23 +64,32 @@ const PhoneInput = (_a) => {
     // маску определяем автоматически только при старте
     const [country, setCountry] = (0, react_1.useState)((0, utils_1.defineCountry)(value));
     const [cleanValue, setCleanValue] = (0, react_1.useState)(formatValue(value, country));
-    const [isPopupOpen, togglePopup] = (0, react_1.useState)(false);
-    const dropdownRef = (0, react_1.useRef)(null);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setCleanValue(formatValue(value, country));
     }, [value]);
-    (0, hooks_1.useOutsideClick)(dropdownRef, event => {
-        event.stopPropagation();
-        togglePopup(false);
+    (0, hooks_1.useOutsideClick)(rootRef, () => {
+        toggleMenu(false);
     });
-    const AdornmentSVG = isPopupOpen ? up_1.default : down_1.default;
-    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: event => {
-                event.stopPropagation();
-                togglePopup(true);
+    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
+                toggleMenu(true);
             } },
             react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
-            react_1.default.createElement(AdornmentSVG, { fill: colors_1.COLORS.get('gray38'), className: (0, sizes_1.marginLeft)(1) }))) });
-    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', className) },
+            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
+            const opener = openerRef.current;
+            if (opener instanceof Node &&
+                event.target instanceof Node &&
+                (opener === event.target || opener.contains(event.target))) {
+                event.preventDefault(); // чтобы не фокусировалось на поле
+            }
+            else {
+                toggleMenu(false);
+            }
+        } });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
         country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { onChange: (e) => {
                 e.target.value = e.target.value.replace(/\D/g, '').slice(0, 20);
                 onChange && onChange(e);
@@ -101,8 +108,8 @@ const PhoneInput = (_a) => {
                         // вставляем код страны обратно в чистое значение
                         cleanValue: `${country.codeChars}${state.cleanValue}` }));
             } }))),
-        isPopupOpen && (react_1.default.createElement(dropdown_1.Dropdown, { ref: dropdownRef, role: 'menu', className: cx('popup'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('popup-item'), onClick: () => {
-                togglePopup(false);
+        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'l', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                toggleMenu(false);
                 setCountry(item);
                 onCountrySelect && onCountrySelect(item);
             } },

package/phone-input/phone-input.module.scss

@@ -17,7 +17,14 @@
   cursor: pointer;
 }
 
-.popup {
+.arrow {
+  display: block;
+  fill: colors.$gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
   position: absolute;
   width: 100%;
   top: 56px;
@@ -25,7 +32,7 @@
   z-index: 2;
 }
 
-.popup-item {
+.menu-item {
   font-size: 16px;
   line-height: 24px;
   .item-name {

package/select/index.js

@@ -83,10 +83,9 @@ const Select = (_a) => {
                 onKeyDown: e => {
                     e.key === 'Enter' && toggleMenu(true);
                 },
-                onClick: e => {
-                    e.preventDefault();
-                    onClick && onClick(e);
-                },
+            }, 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' },

package/text-field/index.d.ts

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

package/text-field/index.js

@@ -68,9 +68,9 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
         variant,
     });
     (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
-    (0, react_1.useEffect)(() => toggleHasValue(Boolean(baseInputRef.current.value)));
+    (0, react_1.useEffect)(() => { var _a; return toggleHasValue(Boolean((_a = baseInputRef.current) === null || _a === void 0 ? void 0 : _a.value)); });
     return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        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 => {
+        react_1.default.createElement("div", Object.assign({}, blockProps, { "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 &&
@@ -78,7 +78,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
                     !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'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),