@sima-land/ui-nucleons 43.0.2 → 43.1.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "43.0.2",
+  "version": "43.1.0",
   "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];
-    unsubscribeList?: 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];

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
+  }
+}