@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/top-bar/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export type TopBarSize = 's' | 'm' | 'xl';
+export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Иконка. */
+    icon?: React.ReactNode;
+    /** Текст. */
+    text?: string;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export interface TopBarProps {
+    /** Свойства кнопок. */
+    buttons?: {
+        start?: TopBarButtonProps;
+        startSecondary?: TopBarButtonProps;
+        end?: TopBarButtonProps;
+        endSecondary?: TopBarButtonProps;
+    };
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Размер. */
+    size?: TopBarSize | 'unset';
+    /** Подзаголовок. */
+    subtitle?: string;
+    /** Заголовок. */
+    title?: string;
+    /** Нужна ли разделительная черта снизу. */
+    divided?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/top-bar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/top-bar/utils.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TopBarProps } from './types';
+export declare const TopBarButtonGroupContext: React.Context<{
+    stub?: boolean | undefined;
+}>;
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
+ * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
+ * @return Опция buttons для TopBar.
+ */
+export declare function navigationButtons({ buttons, onBack, onClose, }: Pick<TopBarProps, 'buttons'> & {
+    onBack?: VoidFunction;
+    onClose?: VoidFunction;
+}): TopBarProps['buttons'];

package/top-bar/utils.js

@@ -0,0 +1,56 @@
+"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.navigationButtons = exports.TopBarButtonGroupContext = void 0;
+const react_1 = __importStar(require("react"));
+const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
+const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
+exports.TopBarButtonGroupContext = (0, react_1.createContext)({
+    stub: false,
+});
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
+ * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
+ * @return Опция buttons для TopBar.
+ */
+function navigationButtons({ buttons, onBack, onClose, }) {
+    return Object.assign(Object.assign(Object.assign({}, buttons), (onBack && {
+        start: {
+            'data-testid': 'top-bar:back',
+            onClick: onBack,
+            icon: react_1.default.createElement(arrow_left_1.default, null),
+        },
+    })), (onClose && {
+        end: {
+            'data-testid': 'top-bar:close',
+            onClick: onClose,
+            icon: react_1.default.createElement(cross_1.default, null),
+        },
+    }));
+}
+exports.navigationButtons = navigationButtons;

package/touch-slider/index.d.ts

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

package/touch-slider/index.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TouchSlider = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("../layout");
-const constants_1 = require("../constants");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const touch_slider_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
 /**
  * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
  * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
  * @param props Свойства.
  * @return Элемент.
  */
 const TouchSlider = ({ children }) => (react_1.default.createElement(layout_1.MobileLayout, null,
-    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", Object.assign({ className: touch_slider_module_scss_1.default.outer }, { [page_scroll_lock_1.BSL_IGNORE_ATTR]: true }),
         react_1.default.createElement("div", { className: touch_slider_module_scss_1.default.inner }, children))));
 exports.TouchSlider = TouchSlider;

package/types.d.ts

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+/**
+ * Обозначение точки остановки в соответствии дизайн-гайдами.
+ */
+export type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
+/** Свойства компонента для маркировки атрибутом "data-testid". */
+export interface WithTestId {
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/** Свойства любого поля ввода. */
+export interface FieldProps {
+    /** Состояние с ошибками валидации. */
+    failed?: boolean;
+}
+/** Свойства компонента поля переключателя (input[type="checkbox"]). */
+export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps, WithTestId {
+}

package/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/unknown-content/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface UnknownContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Строка с html-версткой. */
     markup?: string;
     /** Содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const UnknownContent: ({ markup, children, className }: UnknownContentProps) => JSX.Element;
+export declare function UnknownContent({ markup, children, className }: UnknownContentProps): JSX.Element;

package/unknown-content/index.js

@@ -28,19 +28,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnknownContent = void 0;
 const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
 const classnames_1 = __importDefault(require("classnames"));
 const unknown_content_module_scss_1 = __importDefault(require("./unknown-content.module.scss"));
-const utils_1 = require("./utils");
 /**
  * Компонент, стилизующий верстку по гайдам.
  * @param props Свойства.
  * @return Элемент.
  */
-const UnknownContent = ({ markup, children, className }) => {
+function UnknownContent({ markup, children, className }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         ref.current && (0, utils_1.setTableRowLabels)(ref.current);
     });
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className) }, (children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }))));
-};
+}
 exports.UnknownContent = UnknownContent;

package/unknown-content/unknown-content.module.scss

@@ -120,34 +120,38 @@
     }
   }
   ol {
-    display: block;
+    // ВАЖНО: экспериментально используем стили таблицы чтобы содержимое элемента списка не залезало под номер
+    // это не позволяет сделать отступ от номера 12px по гайдам - согласовано с дизайнерами
+    // при возникновении проблем пересмотреть подход
+    display: table;
+    border-spacing: 0 16px;
     counter-reset: ordered-list;
     list-style: none;
     li {
-      display: flex;
-      flex-direction: row;
-      list-style-position: inside;
+      display: table-row;
       counter-increment: ordered-list;
     }
     li::before {
       content: counter(ordered-list) '.';
-      display: block;
-      flex-grow: 0;
-      margin-right: 12px;
+      display: table-cell;
+
+      // ВАЖНО: 10 вместо 12 по гайдам - согласовано с дизайнерами
+      // уменьшили потому что при табличной стилизации отступ от номера формируется по самому длинному номеру
+      padding-right: 10px;
     }
   }
   ul {
+    display: table;
+    border-spacing: 0 16px;
     list-style: none;
     li {
-      display: flex;
-      flex-direction: row;
-      list-style-position: inside;
+      display: table-row;
       counter-increment: ordered-list;
     }
     li::before {
-      display: block;
       content: '—';
-      margin-right: 12px;
+      display: table-cell;
+      padding-right: 10px;
     }
   }
 

package/upload-area/index.d.ts

@@ -0,0 +1,2 @@
+export type { UploadAreaProps, UploadAreaSize } from './types';
+export { UploadArea } from './upload-area';

package/upload-area/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadArea = void 0;
+var upload_area_1 = require("./upload-area");
+Object.defineProperty(exports, "UploadArea", { enumerable: true, get: function () { return upload_area_1.UploadArea; } });

package/upload-area/types.d.ts

@@ -0,0 +1,32 @@
+import type { ChangeEvent, CSSProperties, DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+export type UploadAreaSize = 's' | 'm';
+export interface UploadAreaProps {
+    /** Размер. */
+    size?: UploadAreaSize | 'unset';
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Ограничение на количество файлов. */
+    countLimit?: number;
+    /** Состояние с ошибками валидации. */
+    failed?: boolean;
+    /** Отключенное состояния. */
+    disabled?: boolean;
+    /** Роль файлов. */
+    fileRole?: string;
+    /** Форматы файлов, выводятся пользователю. */
+    formats?: string;
+    /** Ограничение на количество файлов. */
+    multiple?: boolean;
+    /** Сработает при выборе или перетаскивании файлов, получив список файлов и событие. */
+    onSelect?: (list: File[], event: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>) => void;
+    /** Ограничение на размер. */
+    sizeLimit?: string;
+    /** Свойства корневого элемента. */
+    rootProps?: HTMLAttributes<HTMLElement>;
+    /** Свойства элемента input. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/upload-area/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/upload-area/upload-area-util.scss

@@ -0,0 +1,17 @@
+@mixin size-s {
+  --padding-x: 16px;
+  --padding-y: 20px;
+  --justify-content: flex-start;
+  --icon-size: 0;
+  --icon-display: none;
+  --min-height: calc(48px + (2 * var(--padding-y)));
+}
+
+@mixin size-m {
+  --padding-x: 60px;
+  --padding-y: 20px;
+  --justify-content: center;
+  --icon-size: 64px;
+  --icon-display: block;
+  --min-height: calc(var(--icon-size) + (2 * var(--padding-y)));
+}

package/upload-area/upload-area.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { UploadAreaProps } from './types';
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function UploadArea({ className, style, size, multiple, disabled, failed, formats, fileRole, countLimit, onSelect, sizeLimit, rootProps, inputProps, 'data-testid': testId, }: UploadAreaProps): JSX.Element;

package/upload-area/upload-area.js

@@ -0,0 +1,105 @@
+"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.UploadArea = void 0;
+const react_1 = __importStar(require("react"));
+const link_1 = require("../link");
+const utils_1 = require("./utils");
+const lodash_1 = require("lodash");
+const get_declination_1 = require("../helpers/get-declination");
+const upload_svg_1 = __importDefault(require("./upload.svg"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const upload_area_module_scss_1 = __importDefault(require("./upload-area.module.scss"));
+const cx = bind_1.default.bind(upload_area_module_scss_1.default);
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function UploadArea({ className, style, size = 'm', multiple, disabled, failed, formats, fileRole = 'файл', countLimit = multiple ? undefined : 1, onSelect, sizeLimit, rootProps, inputProps, 'data-testid': testId = 'upload-area', }) {
+    const inputRef = (0, react_1.useRef)(null);
+    const secondaryInfo = (0, lodash_1.upperFirst)([
+        typeof countLimit === 'number' && countLimit > 0
+            ? `${countLimit} ${(0, get_declination_1.getDeclination)(countLimit, ['файл', 'файла', 'файлов'])}`
+            : null,
+        formats ? `формат ${formats}` : null,
+        sizeLimit ? `до ${sizeLimit}` : null,
+    ]
+        .filter(Boolean)
+        .join(', '));
+    const filterFiles = (0, react_1.useCallback)((files) => {
+        const result = [...files];
+        multiple
+            ? countLimit && Number.isFinite(countLimit) && result.splice(countLimit)
+            : result.splice(1);
+        return result;
+    }, [multiple, countLimit]);
+    const onInputChange = (0, react_1.useCallback)(event => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(filterFiles(event.target.files || []), event);
+        // очищаем поле чтобы можно было выбрать тот же файл повторно
+        event.target.value = '';
+    }, [filterFiles, onSelect]);
+    const { active, bind } = (0, utils_1.useFilesDrop)(event => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(filterFiles(event.dataTransfer.files), event);
+    });
+    const rootClassName = cx('root', size !== 'unset' && `size-${size}`, { active, failed, disabled }, className);
+    return (react_1.default.createElement("div", Object.assign({}, rootProps, bind, { "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
+            var _a;
+            if (!disabled) {
+                (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(rootProps, event);
+            }
+        }, onClick: event => {
+            var _a, _b;
+            if (!disabled) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                (_b = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onClick) === null || _b === void 0 ? void 0 : _b.call(rootProps, event);
+            }
+        }, onKeyDown: event => {
+            var _a, _b;
+            // имитируем поведение кнопки
+            if (!disabled && ['Enter', 'Space'].includes(event.code)) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                (_b = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(rootProps, event);
+            }
+        }, onBlur: event => {
+            var _a;
+            (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(rootProps, event);
+        } }),
+        react_1.default.createElement(upload_svg_1.default, { className: cx('icon') }),
+        react_1.default.createElement("div", { className: cx('info') },
+            react_1.default.createElement("div", { className: cx('text', 'primary') },
+                react_1.default.createElement("input", Object.assign({}, inputProps, { ref: inputRef, type: 'file', multiple: multiple, className: cx('input'), onChange: onInputChange, onClick: e => {
+                        // для того чтобы при клике на корневом элементе не вызывался второй клик
+                        e.stopPropagation();
+                    }, "data-testid": 'upload-area:input', disabled: disabled })),
+                react_1.default.createElement(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled },
+                    "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 ",
+                    fileRole)),
+            secondaryInfo && react_1.default.createElement("div", { className: cx('text', 'secondary') }, secondaryInfo))));
+}
+exports.UploadArea = UploadArea;

package/upload-area/upload-area.module.scss

@@ -0,0 +1,78 @@
+@use '../colors';
+@use './upload-area-util';
+
+.root {
+  --secondary-text-color: #{colors.$basic-gray38};
+  display: flex;
+  align-items: center;
+  justify-content: var(--justify-content);
+  padding: calc(var(--padding-y) - 1px) calc(var(--padding-x) - 1px);
+  min-height: var(--min-height);
+  border-radius: 8px;
+  border: 1px dashed colors.$basic-gray24;
+  max-width: 100%;
+  overflow: hidden;
+  outline: 0;
+  background: #fff;
+  &.size-s {
+    @include upload-area-util.size-s;
+  }
+  &.size-m {
+    @include upload-area-util.size-m;
+  }
+  &:not(.disabled):hover {
+    cursor: pointer;
+    border-color: colors.$basic-blue;
+  }
+  &:not(.disabled).active,
+  &:not(.disabled):focus-visible {
+    border-color: colors.$basic-blue;
+    border-style: solid;
+  }
+  &.disabled {
+    background: colors.$basic-gray4;
+    --secondary-text-color: #{colors.$basic-gray24};
+  }
+  &.failed {
+    --secondary-text-color: #{colors.$additional-deep-red};
+  }
+}
+
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  display: var(--icon-display);
+  flex-shrink: 0;
+  margin-right: 24px;
+  fill: colors.$basic-gray24;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  align-items: flex-start;
+  text-align: left;
+  .text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.primary {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    &.secondary {
+      margin-top: 4px;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--secondary-text-color);
+    }
+  }
+}
+
+.input {
+  display: none;
+}

package/upload-area/utils.d.ts

@@ -0,0 +1,17 @@
+import { DragEventHandler } from 'react';
+type UseFilesDropResult<T> = {
+    active: boolean;
+    bind: {
+        onDragEnter: DragEventHandler<T>;
+        onDragOver: DragEventHandler<T>;
+        onDragLeave: DragEventHandler<T>;
+        onDrop: DragEventHandler<T>;
+    };
+};
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+export declare function useFilesDrop<T extends HTMLElement = HTMLElement>(callback: DragEventHandler<T>): UseFilesDropResult<T>;
+export {};

package/upload-area/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilesDrop = void 0;
+const react_1 = require("react");
+const identity_1 = require("../hooks/identity");
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+function useFilesDrop(callback) {
+    const [active, setActive] = (0, react_1.useState)(false);
+    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    const onDragEnter = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragOver = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragLeave = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        const { currentTarget, relatedTarget } = event;
+        // игнорируем переход по дочерним элементам
+        if (!relatedTarget ||
+            (currentTarget instanceof Node &&
+                relatedTarget instanceof Node &&
+                !currentTarget.contains(relatedTarget))) {
+            setActive(false);
+        }
+    }, []);
+    const onDrop = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(false);
+        callbackRef.current(event);
+    }, []);
+    return {
+        active,
+        bind: {
+            onDragEnter,
+            onDragOver,
+            onDragLeave,
+            onDrop,
+        },
+    };
+}
+exports.useFilesDrop = useFilesDrop;

package/utils.scss

@@ -1,4 +1,8 @@
-// скрывает полосы прокрутки у элемента
+@use './colors';
+
+/**
+ * Скрывает полосы прокрутки у элемента.
+ */
 @mixin hidden-scrollbars {
   scrollbar-width: none; // Firefox
   overflow: -moz-scrollbars-none; // old Firefox
@@ -7,3 +11,72 @@
     display: none; // Chrome, Safari, Opera
   }
 }
+
+/**
+ * стилизует полосы прокрутки по дизайн-гайдам с ограничениями:
+ * - в браузерах на основе webkit/blink (Chrome, Opera, Safari) полоса прокрутки не накладывается поверх контента
+ * - в браузерах которые поддерживают только стандартизированный способ стилизации (Firefox) определяет только цвет ползунка
+ */
+@mixin semi-stylized-scrollbars($bg-color: #fff) {
+  // firefox
+  scrollbar-width: thin;
+  scrollbar-color: colors.$basic-gray12 transparent;
+
+  // webkit
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  &::-webkit-scrollbar-track {
+    background: $bg-color;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid $bg-color;
+    border-radius: 12px;
+    background: colors.$basic-gray12;
+  }
+}
+
+/**
+ * Полный сброс стилей button до состояния сравнимого с div.
+ * взято отсюда: https://gist.github.com/MoOx/9137295
+ */
+@mixin reset-button {
+  outline: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  -webkit-appearance: none;
+
+  /* Remove excess padding and border in Firefox 4+ */
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}
+
+/**
+ * Формирует стандартную визуальную подсветку для состояния focus-visible.
+ */
+@mixin focus-visible() {
+  &:focus-visible {
+    outline: 2px solid colors.$basic-blue;
+  }
+}