@sima-land/ui-nucleons 43.0.1 → 43.1.1

package/arrow-button/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-declare type Size = 's' | 'l';
-declare type Direction = 'up' | 'right' | 'down' | 'left';
+export declare type ArrowButtonSize = 's' | 'l';
+export declare type ArrowDirection = 'up' | 'right' | 'down' | 'left';
 export interface ArrowButtonProps extends Omit<JSX.IntrinsicElements['button'], 'size' | 'children'> {
     /** Размер. */
-    size?: Size;
+    size?: ArrowButtonSize;
     /** Направление (отвечает за иконку). */
-    direction?: Direction;
+    direction?: ArrowDirection;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
@@ -15,4 +15,3 @@ export interface ArrowButtonProps extends Omit<JSX.IntrinsicElements['button'],
  * @return Элемент.
  */
 export declare const ArrowButton: ({ size, direction, className, "data-testid": testId, ...buttonProps }: ArrowButtonProps) => JSX.Element;
-export {};

package/autocomplete/autocomplete.module.scss

@@ -1,8 +1,14 @@
+@use '../colors';
+
 .root {
   position: relative;
   width: var(--width, 320px);
 }
 
+.arrow {
+  fill: colors.$basic-gray38;
+}
+
 .field {
   width: 100%;
 }

package/autocomplete/index.d.ts

@@ -22,14 +22,6 @@ export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value'
 /**
  * Поле ввода с подсказками.
  * @param props Свойства.
- * @param props.defaultValue Значение по умолчанию.
- * @param props.items Элементы меню.
- * @param props.itemSize Размер элемента меню.
- * @param props.loading Нужно ли выводить состояние загрузки списка.
- * @param props.onSelect Сработает при выборе.
- * @param props.preset Пресет (со стрелкой или без).
- * @param props.renderItem Выведет содержимое элемента.
- * @param props.value Значение.
  * @return Элемент.
  */
-export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onClick, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;
+export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;

package/autocomplete/index.js

@@ -39,41 +39,28 @@ const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
 const text_field_1 = require("../text-field");
 const dropdown_2 = require("../_internal/utils/dropdown");
-const bind_1 = __importDefault(require("classnames/bind"));
 const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
-const colors_1 = require("../colors");
-const hooks_1 = require("../hooks");
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
 const dropdown_loading_1 = require("../_internal/dropdown-loading");
-const lodash_1 = require("lodash");
+const bind_1 = __importDefault(require("classnames/bind"));
 const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
 const cx = bind_1.default.bind(autocomplete_module_scss_1.default);
 /**
  * Поле ввода с подсказками.
  * @param props Свойства.
- * @param props.defaultValue Значение по умолчанию.
- * @param props.items Элементы меню.
- * @param props.itemSize Размер элемента меню.
- * @param props.loading Нужно ли выводить состояние загрузки списка.
- * @param props.onSelect Сработает при выборе.
- * @param props.preset Пресет (со стрелкой или без).
- * @param props.renderItem Выведет содержимое элемента.
- * @param props.value Значение.
  * @return Элемент.
  */
 const Autocomplete = (_a) => {
-    var { items, itemSize, onSelect, onChange, onClick, onKeyDown, style, className, value, defaultValue, loading, renderItem = String, preset = 'default', 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["items", "itemSize", "onSelect", "onChange", "onClick", "onKeyDown", "style", "className", "value", "defaultValue", "loading", "renderItem", "preset", 'data-testid']);
+    var { items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem = String, preset = 'default', 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["items", "itemSize", "onSelect", "onChange", "onKeyDown", "style", "className", "value", "defaultValue", "loading", "renderItem", "preset", 'data-testid']);
     const osComponentRef = (0, react_1.useRef)(null);
-    const rootRef = (0, react_1.useRef)(null);
-    const fieldRef = (0, react_1.useRef)();
-    const menuRef = (0, react_1.useRef)();
+    const fieldRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
     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' ? withMenu && realValue && realValue.length > 0 : withMenu;
-    const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('basic-gray38') }) : undefined;
-    (0, hooks_1.useOutsideClick)(rootRef, () => {
-        toggleMenu(false);
-    });
+    const needMenu = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
+    const arrowIcon = needMenu ? (react_1.default.createElement(up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : (react_1.default.createElement(down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
+    const endAdornment = preset === 'default' ? arrowIcon : undefined;
     (0, react_1.useEffect)(() => {
         setRealValue(value);
     }, [value]);
@@ -93,40 +80,47 @@ 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: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
+    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, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
                 toggleMenu(true);
-                onClick && onClick(e);
-            }, onChange: (e) => {
+                setActiveIndex(null);
+            }, onBlur: () => {
+                toggleMenu(false);
+            }, onChange: (event) => {
                 toggleMenu(true);
-                setRealValue(e.target.value);
+                setRealValue(event.target.value);
                 setActiveIndex(0);
-                onChange && onChange(e);
-            }, className: cx('field'), onKeyDown: (e) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            }, onKeyDown: (event) => {
                 const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
                 let nextIndex;
-                switch (e.key) {
+                switch (event.key) {
                     case 'ArrowDown':
-                        nextIndex = (!(0, lodash_1.isNull)(activeIndex) ? size + activeIndex + 1 : 0) % size;
+                        nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
                         break;
                     case 'ArrowUp':
                         nextIndex = (size + Number(activeIndex) - 1) % size;
                         break;
                     case 'Enter':
-                        if (items && !(0, lodash_1.isNull)(activeIndex) && items.length > activeIndex) {
+                        if (items && activeIndex !== null && items.length > activeIndex) {
                             onSelect && onSelect(items[activeIndex]);
                             toggleMenu(false);
                         }
                         break;
                 }
-                Number.isFinite(nextIndex) && setActiveIndex(nextIndex);
-                onKeyDown && onKeyDown(e);
+                if (typeof nextIndex === 'number') {
+                    event.preventDefault(); // не даём каретке в поле перемещаться
+                    setActiveIndex(nextIndex);
+                }
+                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
             } })),
-        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);
+        needMenu && (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, onMouseDown: event => {
+                // чтобы при нажатии на опцию предотвратить blur на поле
+                event.preventDefault();
+            }, onClick: () => {
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
                 setActiveIndex(null);
                 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"))))))));
 };
 exports.Autocomplete = Autocomplete;

package/base-input/base-input.module.scss

@@ -1,3 +1,5 @@
+@use '../utils';
+
 .reset {
   border: 0;
   box-sizing: border-box;
@@ -38,14 +40,7 @@
   }
   &.multiline {
     resize: none;
-
-    // скрытие полосы прокрутки
-    scrollbar-width: none; // Firefox
-    overflow: -moz-scrollbars-none; // old Firefox
-    -ms-overflow-style: none; // IE, old Edge
-    &::-webkit-scrollbar {
-      display: none; // Chrome, Safari, Opera
-    }
+    @include utils.hidden-scrollbars;
   }
 }
 

package/carousel/draggable.d.ts

@@ -22,7 +22,6 @@ export interface DraggableProps {
     transitionDuration?: number;
     containerProps?: React.HTMLProps<HTMLDivElement>;
 }
-declare type Cb = () => void;
 /**
  * Компонент области, которую можно прокручивать перетаскиванием.
  */
@@ -33,7 +32,7 @@ export default class Draggable extends Component<DraggableProps> {
     currentOffset: IPoint;
     clientPosition: IPoint;
     draggableRef: React.RefObject<HTMLDivElement>;
-    offList: Array<Cb>;
+    offList: Array<VoidFunction>;
     /**
      * Конструктор компонента области, которую можно прокручивать перетаскиванием.
      * @param props Свойства.
@@ -76,7 +75,7 @@ export default class Draggable extends Component<DraggableProps> {
      * Предотвращает клик если было произведено смещение мышью.
      * @param event Событие окончания захвата.
      */
-    handleClick(event: React.MouseEvent<HTMLDivElement>): void;
+    handleClickCapture(event: React.MouseEvent<HTMLDivElement>): void;
     /**
      * Возвращает разницу последней сохраненной позиции и позиции в переданном событии.
      * @param event Touch- или mouse-событие.
@@ -116,4 +115,3 @@ export default class Draggable extends Component<DraggableProps> {
      */
     render(): JSX.Element;
 }
-export {};

package/carousel/draggable.js

@@ -51,7 +51,7 @@ class Draggable extends react_1.Component {
         this.currentOffset = (0, point_1.default)();
         this.clientPosition = (0, point_1.default)();
         this.draggableRef = (0, react_1.createRef)();
-        this.handleClick = this.handleClick.bind(this);
+        this.handleClickCapture = this.handleClickCapture.bind(this);
         this.startCapture = this.startCapture.bind(this);
         this.offList = [];
     }
@@ -166,7 +166,7 @@ class Draggable extends react_1.Component {
      * Предотвращает клик если было произведено смещение мышью.
      * @param event Событие окончания захвата.
      */
-    handleClick(event) {
+    handleClickCapture(event) {
         if (this.needPreventClick) {
             event.preventDefault();
             this.togglePreventClickNeed(false);
@@ -240,7 +240,7 @@ class Draggable extends react_1.Component {
         const { x, y } = this.currentOffset;
         return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('draggable-container', containerProps.className), 
             // обрабатываем захват чтобы при обработке клика на дочернем элементе defaultPrevented уже был true
-            onClickCapture: this.handleClick, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
+            onClickCapture: this.handleClickCapture, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
             react_1.default.createElement("div", { ref: this.draggableRef, style: {
                     transform: (0, styles_1.getTranslateStyle)(x, y),
                     transition: this.hasTransition ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '',

package/carousel/index.js

@@ -36,6 +36,7 @@ const arrow_button_1 = require("../arrow-button");
 const on_1 = __importDefault(require("../helpers/on"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const carousel_module_scss_1 = __importDefault(require("./carousel.module.scss"));
+const is_browser_1 = __importDefault(require("../helpers/is-browser"));
 const CLONE_FACTOR = 3;
 const cx = bind_1.default.bind(carousel_module_scss_1.default);
 const isAuto = (0, fp_1.eq)('auto');
@@ -531,7 +532,7 @@ class Carousel extends react_1.Component {
      * @return Данные прямоугольной области видимости карусели.
      */
     getViewport() {
-        return (0, bounds_of_1.default)(this.wrapperRef.current);
+        return (0, is_browser_1.default)() ? (0, bounds_of_1.default)(this.wrapperRef.current) : null;
     }
     /**
      * Сохраняет смещение карусели и позицию из события при старте захвата.

package/helpers/center-of.d.ts

@@ -3,5 +3,5 @@
  * @param rect Прямоугольник.
  * @return Центр.
  */
-declare const centerOf: (rect: ClientRect) => import("./point").IPoint;
+declare const centerOf: (rect: DOMRect) => import("./point").IPoint;
 export default centerOf;

package/package.json

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

package/range/index.d.ts

@@ -35,7 +35,7 @@ export declare class Range extends Component<RangeProps> {
     start: Container<number>;
     finish: Container<number>;
     activeBounds: [number, number];
-    unsubscribers?: Array<() => void>;
+    unsubscribeList: Array<() => void>;
     activeThumbEl?: HTMLElement;
     isGrabbed?: boolean;
     /**

package/range/index.js

@@ -67,6 +67,7 @@ class Range extends react_1.Component {
         this.rangeRef = (0, react_1.createRef)();
         this.startThumbRef = (0, react_1.createRef)();
         this.finishThumbRef = (0, react_1.createRef)();
+        this.unsubscribeList = [];
         this.start = (0, create_container_1.default)(readyStart);
         this.finish = (0, create_container_1.default)(readyFinish);
         this.activeBounds = [0, 0];
@@ -77,7 +78,7 @@ class Range extends react_1.Component {
     /** @inheritdoc */
     componentDidMount() {
         const { current: containerElem } = this.containerRef;
-        this.unsubscribers = [
+        this.unsubscribeList = [
             (0, on_1.default)(window, 'mousemove', this.updateValues),
             (0, on_1.default)(window, 'touchmove', this.updateValues),
             (0, on_1.default)(window, 'mouseup', this.handleDragEnd),
@@ -103,7 +104,7 @@ class Range extends react_1.Component {
     }
     /** @inheritdoc */
     componentWillUnmount() {
-        this.unsubscribers.forEach(fn => fn());
+        this.unsubscribeList.forEach(fn => fn());
     }
     /**
      * Обрабатывает событие как начало слежения за указателем/пальцем.

package/touch-slider/index.d.ts

@@ -5,6 +5,7 @@ export interface TouchSliderProps {
 }
 /**
  * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
+ * Предназначен для использования на странице без дополнительных отступов по горизонтали.
  * @param props Свойства.
  * @return Элемент.
  */

package/touch-slider/index.js

@@ -7,15 +7,14 @@ exports.TouchSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("../layout");
 const constants_1 = require("../constants");
-const bind_1 = __importDefault(require("classnames/bind"));
 const touch_slider_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
-const cx = bind_1.default.bind(touch_slider_module_scss_1.default);
 /**
  * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
+ * Предназначен для использования на странице без дополнительных отступов по горизонтали.
  * @param props Свойства.
  * @return Элемент.
  */
 const TouchSlider = ({ children }) => (react_1.default.createElement(layout_1.MobileLayout, null,
-    react_1.default.createElement("div", Object.assign({ className: cx('outer', 'invisible-scroll') }, { [constants_1.BSL_IGNORE_ATTR]: true }),
-        react_1.default.createElement("div", { className: cx('inner') }, children))));
+    react_1.default.createElement("div", Object.assign({ className: touch_slider_module_scss_1.default.outer }, { [constants_1.BSL_IGNORE_ATTR]: true }),
+        react_1.default.createElement("div", { className: touch_slider_module_scss_1.default.inner }, children))));
 exports.TouchSlider = TouchSlider;

package/touch-slider/touch-slider.module.scss

@@ -1,22 +1,24 @@
+@use '../breakpoints';
+@use '../utils';
+
 .outer {
   display: flex;
   overflow: hidden;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  --slider-gutter: calc((100vw - var(--l-width)) / 2);
-  margin: 0 calc(-1 * var(--slider-gutter));
+  @include utils.hidden-scrollbars;
 }
 
 .inner {
   display: flex;
-  padding: 0 var(--slider-gutter);
 }
 
-.invisible-scroll {
-  scrollbar-width: none; // Firefox
-  overflow: -moz-scrollbars-none; // old Firefox
-  -ms-overflow-style: none; // IE, old Edge
-  &::-webkit-scrollbar {
-    display: none; // Chrome, Safari, Opera
+@include breakpoints.down('mm') {
+  .outer {
+    --slider-gutter: calc((100vw - var(--l-width)) / 2);
+    margin: 0 calc(-1 * var(--slider-gutter));
+  }
+  .inner {
+    padding: 0 var(--slider-gutter);
   }
 }

package/utils.scss

@@ -0,0 +1,9 @@
+// скрывает полосы прокрутки у элемента
+@mixin hidden-scrollbars {
+  scrollbar-width: none; // Firefox
+  overflow: -moz-scrollbars-none; // old Firefox
+  -ms-overflow-style: none; // IE, old Edge
+  &::-webkit-scrollbar {
+    display: none; // Chrome, Safari, Opera
+  }
+}