@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/top-bar/top-bar.module.scss

@@ -0,0 +1,174 @@
+@use '../colors';
+@use './top-bar-util';
+
+.root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background: colors.$basic-white;
+  height: var(--top-bar-height);
+  flex-shrink: 0; // ВАЖНО: для использования в Modal
+  &.inner-border-bottom {
+    box-shadow: inset 0 -1px 0 colors.$basic-gray12;
+  }
+}
+
+.size-s {
+  @include top-bar-util.size-s;
+}
+
+.size-m {
+  @include top-bar-util.size-m;
+}
+
+.size-xl {
+  @include top-bar-util.size-xl;
+}
+
+.rounds-s {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.rounds-m {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  overflow: hidden;
+  text-align: var(--top-bar-text-align, center);
+
+  // когда нет кнопок
+  &:first-child:last-child {
+    margin: 0 var(--top-bar-gutter);
+  }
+}
+
+.title {
+  color: colors.$basic-gray87;
+  font-size: var(--top-bar-title-size);
+  line-height: var(--top-bar-title-height);
+  font-weight: 600;
+
+  // когда нет подзаголовка
+  &:first-child:last-child {
+    font-size: var(--top-bar-title-only-size, var(--top-bar-title-size));
+    line-height: var(--top-bar-title-only-height, var(--top-bar-title-height));
+  }
+}
+
+.subtitle {
+  color: colors.$basic-gray38;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-top: -2px;
+}
+
+.title,
+.subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  &:not(.end) {
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
+      }
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
+      }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
+      }
+    }
+  }
+  &.end {
+    justify-content: flex-end;
+    .iconic {
+      &:first-child:last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
+      }
+      &:not(:last-child):first-child {
+        justify-content: flex-start;
+        padding-left: var(--top-bar-gutter);
+      }
+      &:not(:first-child):last-child {
+        justify-content: flex-end;
+        padding-right: var(--top-bar-gutter);
+      }
+    }
+    :not(.iconic) {
+      justify-content: flex-end;
+    }
+  }
+  &:not(.stub) {
+    height: 100%;
+  }
+}
+
+.button {
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  margin: 0;
+  outline: 0;
+  text-align: inherit;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  &:hover {
+    cursor: pointer;
+  }
+  &.iconic {
+    color: colors.$basic-gray87;
+    width: var(--top-bar-icon-button-width);
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  }
+  &:not(.iconic) {
+    color: colors.$basic-blue;
+    width: 100%;
+    padding: 0 var(--top-bar-gutter);
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  }
+  &.stub {
+    height: 0;
+    overflow: hidden;
+  }
+  svg {
+    // чтобы выравнивались по центру по вертикали
+    display: block;
+    flex-shrink: 0;
+    fill: currentColor;
+  }
+}

package/dist/top-bar/types.d.ts

@@ -0,0 +1,42 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { WithTestId } from '../types';
+export type TopBarSize = 's' | 'm' | 'xl';
+export interface TopBarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, WithTestId {
+    /** Иконка. */
+    icon?: ReactNode;
+    /** Текст. */
+    text?: string;
+}
+export interface TopBarStyle extends CSSProperties {
+    '--top-bar-height'?: string;
+    '--top-bar-title-size'?: string;
+    '--top-bar-title-height'?: string;
+    '--top-bar-gutter'?: string;
+    '--top-bar-icon-button-width'?: string;
+    '--top-bar-title-only-size'?: string;
+    '--top-bar-title-only-height'?: string;
+    '--top-bar-text-align'?: string;
+}
+export interface TopBarProps extends WithTestId {
+    /** Свойства кнопок. */
+    buttons?: {
+        start?: TopBarButtonProps;
+        startSecondary?: TopBarButtonProps;
+        end?: TopBarButtonProps;
+        endSecondary?: TopBarButtonProps;
+    };
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили. */
+    style?: TopBarStyle;
+    /** Размер. */
+    size?: TopBarSize | 'unset';
+    /** Подзаголовок. */
+    subtitle?: ReactNode;
+    /** Заголовок. */
+    title?: ReactNode;
+    /** Нужна ли разделительная черта снизу. */
+    divided?: boolean;
+    /** Скругления углов. */
+    rounds?: 's' | 'm' | 'unset';
+}

package/dist/top-bar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/top-bar/utils.d.ts

@@ -0,0 +1,13 @@
+import { TopBarProps } from './types';
+export declare const TopBarButtonGroupContext: import("react").Context<{
+    stub?: boolean;
+}>;
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в 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/dist/top-bar/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBarButtonGroupContext = void 0;
+exports.navigationButtons = navigationButtons;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
+const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
+exports.TopBarButtonGroupContext = (0, react_1.createContext)({
+    stub: false,
+});
+/**
+ * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
+ * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
+ * @return Опция buttons для TopBar.
+ */
+function navigationButtons({ buttons, onBack, onClose, }) {
+    return {
+        ...buttons,
+        ...(onBack && {
+            start: {
+                'data-testid': 'top-bar:back',
+                onClick: onBack,
+                icon: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}),
+            },
+        }),
+        ...(onClose && {
+            end: {
+                'data-testid': 'top-bar:close',
+                onClick: onClose,
+                icon: (0, jsx_runtime_1.jsx)(Cross_1.default, {}),
+            },
+        }),
+    };
+}
+//# sourceMappingURL=utils.js.map

package/dist/top-bar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/top-bar/utils.tsx"],"names":[],"mappings":";;;;;;AAcA,8CAyBC;;AAvCD,iCAAsC;AAEtC,2FAAsE;AACtE,mGAA8E;AAEjE,QAAA,wBAAwB,GAAG,IAAA,qBAAa,EAAqB;IACxE,IAAI,EAAE,KAAK;CACZ,CAAC,CAAC;AAEH;;;;GAIG;AACH,SAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,OAAO,GAIR;IACC,OAAO;QACL,GAAG,OAAO;QACV,GAAG,CAAC,MAAM,IAAI;YACZ,KAAK,EAAE;gBACL,aAAa,EAAE,cAAc;gBAC7B,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,uBAAC,mBAAY,KAAG;aACvB;SACF,CAAC;QACF,GAAG,CAAC,OAAO,IAAI;YACb,GAAG,EAAE;gBACH,aAAa,EAAE,eAAe;gBAC9B,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,uBAAC,eAAQ,KAAG;aACnB;SACF,CAAC;KACH,CAAC;AACJ,CAAC"}

package/dist/touch-slider/index.d.ts

@@ -0,0 +1,2 @@
+export type { TouchSliderProps } from './types';
+export { TouchSlider } from './touch-slider';

package/dist/touch-slider/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TouchSlider = void 0;
+var touch_slider_1 = require("./touch-slider");
+Object.defineProperty(exports, "TouchSlider", { enumerable: true, get: function () { return touch_slider_1.TouchSlider; } });
+//# sourceMappingURL=index.js.map

package/dist/touch-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/touch-slider/index.ts"],"names":[],"mappings":";;;AACA,+CAA6C;AAApC,2GAAA,WAAW,OAAA"}

package/dist/touch-slider/touch-slider.d.ts

@@ -0,0 +1,9 @@
+import { TouchSliderProps } from './types';
+/**
+ * Блок, прокручиваемый по горизонтали. Реализует отступы MobileLayout.
+ * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TouchSlider({ children }: TouchSliderProps): import("react").JSX.Element;

package/dist/touch-slider/touch-slider.js

@@ -0,0 +1,51 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TouchSlider = TouchSlider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const styles = __importStar(require("./touch-slider.module.scss"));
+/**
+ * Блок, прокручиваемый по горизонтали. Реализует отступы MobileLayout.
+ * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TouchSlider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(layout_1.MobileLayout, { children: (0, jsx_runtime_1.jsx)("div", { className: styles.outer, [page_scroll_lock_1.BSL_IGNORE_ATTR]: true, children: (0, jsx_runtime_1.jsx)("div", { className: styles.inner, children: children }) }) }));
+}
+//# sourceMappingURL=touch-slider.js.map

package/dist/touch-slider/touch-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-slider.js","sourceRoot":"","sources":["../../src/touch-slider/touch-slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,kCAQC;;AApBD,sCAAyC;AACzC,oEAAgE;AAEhE,mEAAqD;AAErD;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAoB;IACxD,OAAO,CACL,uBAAC,qBAAY,cACX,gCAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAQ,CAAC,kCAAe,CAAC,EAAE,IAAI,YACzD,gCAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,QAAQ,GAAO,GAC1C,GACO,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,24 @@
+@use '../breakpoints';
+@use '../utils';
+
+.outer {
+  display: flex;
+  overflow: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  @include utils.hidden-scrollbars;
+}
+
+.inner {
+  display: flex;
+}
+
+@include breakpoints.lt('mm') {
+  .outer {
+    --slider-gutter: calc((100vw - var(--l-width)) / 2);
+    margin: 0 calc(-1 * var(--slider-gutter));
+  }
+  .inner {
+    padding: 0 var(--slider-gutter);
+  }
+}

package/dist/touch-slider/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface TouchSliderProps {
+    /** Прокручиваемое содержимое. */
+    children?: ReactNode;
+}

package/dist/touch-slider/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/touch-slider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/touch-slider/types.ts"],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+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 Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, FieldProps, WithTestId {
+}
+export type Theme = 'light' | 'dark' | 'unset';

package/dist/types/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":""}

package/dist/unknown-content/index.d.ts

@@ -0,0 +1,2 @@
+export type { UnknownContentProps } from './types';
+export { UnknownContent } from './unknown-content';

package/dist/unknown-content/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnknownContent = void 0;
+var unknown_content_1 = require("./unknown-content");
+Object.defineProperty(exports, "UnknownContent", { enumerable: true, get: function () { return unknown_content_1.UnknownContent; } });
+//# sourceMappingURL=index.js.map

package/dist/unknown-content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/unknown-content/index.ts"],"names":[],"mappings":";;;AACA,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}

package/dist/unknown-content/types.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface UnknownContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Строка с html-версткой. */
+    markup?: string;
+    /** Содержимое. */
+    children?: ReactNode;
+}

package/dist/unknown-content/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/unknown-content/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/unknown-content/types.ts"],"names":[],"mappings":""}

package/dist/unknown-content/unknown-content.d.ts

@@ -0,0 +1,8 @@
+import type { UnknownContentProps } from './types';
+/**
+ * Блок, стилизующий содержимое по дизайн-гайдам.
+ * @todo Переименовать в StyledMarkup?
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function UnknownContent({ markup, children, className }: UnknownContentProps): import("react").JSX.Element;

package/dist/unknown-content/unknown-content.js

@@ -0,0 +1,58 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.UnknownContent = UnknownContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./unknown-content.module.scss"));
+/**
+ * Блок, стилизующий содержимое по дизайн-гайдам.
+ * @todo Переименовать в StyledMarkup?
+ * @param props Свойства.
+ * @return Элемент.
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(styles.root, className), ...(children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }) }));
+}
+//# sourceMappingURL=unknown-content.js.map

package/dist/unknown-content/unknown-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unknown-content.js","sourceRoot":"","sources":["../../src/unknown-content/unknown-content.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,wCAcC;;AAzBD,iCAA0C;AAC1C,mCAA4C;AAC5C,4DAA4B;AAC5B,sEAAwD;AAExD;;;;;GAKG;AACH,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAuB;IACjF,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,IAAI,IAAA,yBAAiB,EAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KACjC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC,GACrF,CACH,CAAC;AACJ,CAAC"}