@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/popup/popup-view.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupView = void 0;
+const react_1 = __importDefault(require("react"));
+const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const popup_view_module_scss_1 = __importDefault(require("./popup-view.module.scss"));
+const cx = bind_1.default.bind(popup_view_module_scss_1.default);
+/**
+ * Popup.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupView(_a) {
+    var { children, onClose, popupRef, className, 'data-testid': testId = 'popup' } = _a, rest = __rest(_a, ["children", "onClose", "popupRef", "className", 'data-testid']);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: cx('root', className), ref: popupRef, "data-testid": testId }),
+        onClose && (react_1.default.createElement("button", { "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: cx('close'), onClick: onClose, "data-testid": 'popup:close' },
+            react_1.default.createElement(cross_1.default, null))),
+        react_1.default.createElement("div", { className: cx('content') }, children)));
+}
+exports.PopupView = PopupView;

package/popup/popup-view.module.scss

@@ -0,0 +1,40 @@
+@use '../colors';
+@use '../shadows';
+@use '../utils';
+
+.root {
+  @include shadows.box-shadow('z2');
+  display: inline-flex;
+  position: relative;
+  max-width: 400px;
+  max-height: min(536px, calc(100vh - 16px));
+  padding: 40px 8px;
+  box-sizing: border-box;
+  background: colors.$basic-gray4;
+  border-radius: 4px;
+}
+
+.close {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  padding: 8px 8px 0 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  cursor: pointer;
+}
+
+.content {
+  @include utils.semi-stylized-scrollbars(colors.$basic-gray4);
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0 32px;
+  max-height: 456px; // 536 (по гайдам) - 80 (горизонтальные отступы)
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/popup/popup.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PopupViewProps } from './popup-view';
+export interface PopupProps extends Omit<PopupViewProps, 'onClose'> {
+    /** Элемент для которого нужно показать Popup ил null. */
+    showFor?: Element | null;
+    /** Сработает при попытке закрыть Popup. */
+    onDismiss?: () => void;
+}
+export interface PopupInnerProps extends PopupProps {
+    showFor: Element;
+}
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Popup({ showFor, ...rest }: PopupProps): JSX.Element;

package/popup/popup.js

@@ -0,0 +1,73 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const react_1 = __importStar(require("react"));
+const popup_view_1 = require("./popup-view");
+const react_2 = require("@floating-ui/react");
+const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
+const identity_1 = require("../hooks/identity");
+const portal_1 = require("../portal");
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Popup(_a) {
+    var { showFor } = _a, rest = __rest(_a, ["showFor"]);
+    return react_1.default.createElement(portal_1.Portal, null, showFor && react_1.default.createElement(PopupInner, Object.assign({ showFor: showFor }, rest)));
+}
+exports.Popup = Popup;
+/**
+ * Внутренний компонент, необходим из-за использования портала.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupInner(_a) {
+    var { showFor, popupRef, children, style, onDismiss } = _a, rest = __rest(_a, ["showFor", "popupRef", "children", "style", "onDismiss"]);
+    const _b = (0, react_2.useFloating)((0, utils_1.popupFloatingConfig)()), { refs } = _b, floating = __rest(_b, ["refs"]);
+    const floatingStyle = (0, utils_1.usePopupFloatingStyle)(floating);
+    (0, react_1.useImperativeHandle)(popupRef, () => refs.floating.current);
+    (0, react_1.useImperativeHandle)(refs.setReference, () => showFor, [showFor]);
+    const anchorRef = (0, identity_1.useIdentityRef)(showFor);
+    (0, hooks_1.useOutsideClick)([anchorRef, refs.floating], onDismiss);
+    (0, utils_1.useFocusTrap)(refs.floating, {
+        enabled: floating.isPositioned,
+        afterDeactivate: onDismiss,
+    });
+    return (react_1.default.createElement(popup_view_1.PopupView, Object.assign({}, rest, { popupRef: refs.setFloating, style: Object.assign(Object.assign({}, style), floatingStyle), onClose: onDismiss }), children));
+}

package/popup/utils.d.ts

@@ -0,0 +1,38 @@
+import { UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+import { RefObject } from 'react';
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+export declare function popupFloatingConfig(): Partial<UseFloatingProps>;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+export declare function usePopupFloatingStyle({ strategy, x, y, }: Pick<UseFloatingReturn, 'strategy' | 'x' | 'y'>): {
+    position: import("@floating-ui/react").Strategy;
+    top: number;
+    left: number;
+    zIndex: number;
+};
+/**
+ * Показ всплывающего элемента по клику и скрытие.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+export declare function usePopupOnClick(floating: Pick<UseFloatingReturn, 'context' | 'strategy' | 'x' | 'y'>): {
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+};
+/**
+ * Хук ловушки фокуса.
+ * @todo Вынести в общие утилиты тк понадобится для Modal и тд.
+ * @param ref Элемент-контейнер для которого нужно захватить фокус.
+ * @param options Опции.
+ */
+export declare function useFocusTrap(ref: RefObject<HTMLElement | SVGElement>, { enabled, afterDeactivate, }: {
+    enabled: boolean;
+    afterDeactivate?: () => void;
+}): void;

package/popup/utils.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = exports.usePopupOnClick = exports.usePopupFloatingStyle = exports.popupFloatingConfig = void 0;
+const react_1 = require("@floating-ui/react");
+const focus_trap_1 = require("focus-trap");
+const layer_1 = require("../helpers/layer");
+const hooks_1 = require("../hooks");
+const identity_1 = require("../hooks/identity");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function popupFloatingConfig() {
+    return {
+        strategy: 'absolute',
+        placement: 'right-start',
+        middleware: [
+            (0, react_1.offset)(8),
+            (0, react_1.flip)({
+                padding: 16,
+                crossAxis: false,
+                fallbackAxisSideDirection: 'start',
+            }),
+            (0, react_1.shift)({
+                padding: 16,
+            }),
+        ],
+        whileElementsMounted: react_1.autoUpdate,
+    };
+}
+exports.popupFloatingConfig = popupFloatingConfig;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function usePopupFloatingStyle({ strategy, x, y, }) {
+    const layer = (0, layer_1.useLayer)();
+    return {
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0,
+        zIndex: layer + 2,
+    };
+}
+exports.usePopupFloatingStyle = usePopupFloatingStyle;
+/**
+ * Показ всплывающего элемента по клику и скрытие.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+function usePopupOnClick(floating) {
+    const style = usePopupFloatingStyle(floating);
+    const click = (0, react_1.useClick)(floating.context);
+    const dismiss = (0, react_1.useDismiss)(floating.context);
+    return (0, react_1.useInteractions)([click, dismiss, { floating: { style } }]);
+}
+exports.usePopupOnClick = usePopupOnClick;
+/**
+ * Хук ловушки фокуса.
+ * @todo Вынести в общие утилиты тк понадобится для Modal и тд.
+ * @param ref Элемент-контейнер для которого нужно захватить фокус.
+ * @param options Опции.
+ */
+function useFocusTrap(ref, { enabled, afterDeactivate, }) {
+    const afterDeactivateRef = (0, identity_1.useIdentityRef)(afterDeactivate);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const element = ref.current;
+        if (enabled && element) {
+            const trap = (0, focus_trap_1.createFocusTrap)(element, {
+                allowOutsideClick: true,
+                tabbableOptions: { displayCheck: 'none' },
+                onPostDeactivate: afterDeactivateRef.current,
+                fallbackFocus: element,
+            });
+            trap.activate();
+            return () => {
+                trap.deactivate({ returnFocus: true });
+            };
+        }
+    }, [ref, enabled]);
+}
+exports.useFocusTrap = useFocusTrap;

package/price/index.d.ts

@@ -18,4 +18,4 @@ export interface PriceProps {
  * @param props Параметры компонента.
  * @return Элемент.
  */
-export declare const Price: ({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, "data-testid": testId, }: PriceProps) => JSX.Element;
+export declare function Price({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId, }: PriceProps): JSX.Element;

package/price/index.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Price = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
-const price_module_scss_1 = __importDefault(require("./price.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
+const price_module_scss_1 = __importDefault(require("./price.module.scss"));
 const cx = bind_1.default.bind(price_module_scss_1.default);
 /**
  * Цена товара с указанием знака валюты.
  * @param props Параметры компонента.
  * @return Элемент.
  */
-const Price = ({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId = 'price', }) => {
+function Price({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId = 'price', }) {
     const content = (0, utils_1.formatPrice)(value, grapheme, {
         graphemeBefore,
     });
     return (react_1.default.createElement("span", { className: cx('root', className, crossedOut && 'crossed-out'), "data-testid": testId }, content));
-};
+}
 exports.Price = Price;

package/price/utils.d.ts

@@ -5,8 +5,8 @@
  * @param options Опции.
  * @return Отформатированная цена.
  */
-export declare const formatPrice: (value: number | string, grapheme?: string | undefined, { graphemeBefore }?: {
-    graphemeBefore?: boolean | undefined;
-}) => string;
-export declare const formatInteger: (value: number) => string;
-export declare const formatFractional: (value: number) => string;
+export declare function formatPrice(value: number | string, grapheme?: string, { graphemeBefore }?: {
+    graphemeBefore?: boolean;
+}): string;
+export declare function formatInteger(value: number): string;
+export declare function formatFractional(value: number): string;

package/price/utils.js

@@ -8,30 +8,30 @@ exports.formatFractional = exports.formatInteger = exports.formatPrice = void 0;
  * @param options Опции.
  * @return Отформатированная цена.
  */
-const formatPrice = (value, grapheme, { graphemeBefore } = {}) => {
+function formatPrice(value, grapheme, { graphemeBefore } = {}) {
     const number = Number(value);
     return [
         // графема до
         grapheme && graphemeBefore && `${grapheme} `,
         // целая часть
-        (0, exports.formatInteger)(number),
+        formatInteger(number),
         // дробная часть
-        Number.isFinite(number) && !Number.isInteger(number) && `,${(0, exports.formatFractional)(number)}`,
+        Number.isFinite(number) && !Number.isInteger(number) && `,${formatFractional(number)}`,
         // графема после
         grapheme && !graphemeBefore && ` ${grapheme}`,
     ]
         .filter(Boolean)
         .map(s => s.replace(/\s/g, '\u2009')) // заменяем все пробелы на полупробелы
         .join('');
-};
+}
 exports.formatPrice = formatPrice;
-// eslint-disable-next-line require-jsdoc
-const formatInteger = (value) => {
+// eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
+function formatInteger(value) {
     let result = '0';
     if (Number.isFinite(value)) {
         // если число меньше 0.0001 - округляем до 0.0001
         const valid = value === 0 ? 0 : Math.max(value, 0.0001);
-        const integer = valid.toString().replace(/\..*$/g, ''); // все числа до точки
+        const integer = toString(valid).replace(/\..*$/g, ''); // все числа до точки
         const separated = [];
         const list = integer.split('');
         while (list.length) {
@@ -41,23 +41,33 @@ const formatInteger = (value) => {
         result = separated.join(' ');
     }
     return result;
-};
+}
 exports.formatInteger = formatInteger;
-// eslint-disable-next-line require-jsdoc
-const formatFractional = (value) => {
-    let result = '';
+// eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
+function formatFractional(value) {
+    let fractional = '';
     if (Number.isFinite(value) && !Number.isInteger(value)) {
-        if (value <= 0.0001) {
-            // если число меньше 0.0001 - округляем до 0.0001
-            result = '0001';
-        }
-        else if (value < 0.01) {
-            result = value.toFixed(4).slice(-4);
-        }
-        else {
-            result = value.toFixed(2).slice(-2);
-        }
+        fractional = toString(value).replace(/^.*\./g, '');
     }
-    return result;
-};
+    return fractional;
+}
 exports.formatFractional = formatFractional;
+/**
+ * Округляет число и приводит его к строке по дизайн-гайдам цен.
+ * @param value Число.
+ * @return Отформатированное число.
+ */
+function toString(value) {
+    let result;
+    if (value <= 0.0001) {
+        // если число меньше 0.0001 - округляем до 0.0001
+        result = '0.0001';
+    }
+    else if (value < 0.01) {
+        result = value.toFixed(4);
+    }
+    else {
+        result = value.toFixed(2);
+    }
+    return result;
+}

package/radio-button/index.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { FieldProps, WithTestId } from '../types';
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, FieldProps, WithTestId {
+}
+/**
+ * Радио-кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function RadioButton({ style, className, 'data-testid': testId, ...restProps }: RadioButtonProps): JSX.Element;

package/radio-button/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const radio_button_module_scss_1 = __importDefault(require("./radio-button.module.scss"));
+const cx = bind_1.default.bind(radio_button_module_scss_1.default);
+/**
+ * Радио-кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function RadioButton(_a) {
+    var { style, className, 'data-testid': testId = 'radio-button' } = _a, restProps = __rest(_a, ["style", "className", 'data-testid']);
+    return (react_1.default.createElement("div", { style: style, className: cx('root', className) },
+        react_1.default.createElement("input", Object.assign({}, restProps, { type: 'radio', className: cx('input'), "data-testid": testId })),
+        react_1.default.createElement("div", { className: cx('circle') })));
+}
+exports.RadioButton = RadioButton;

package/radio-button/radio-button.module.scss

@@ -0,0 +1,46 @@
+@use '../colors';
+
+.root {
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  vertical-align: -0.125em; // не понятно почему, но это значение ставит блок ровно по середине строки
+}
+
+.circle {
+  --radio-border-width: 1px;
+  --radio-border-color: #{colors.$basic-gray38};
+  --radio-color: #fff;
+  display: block;
+  pointer-events: none;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  background: var(--radio-color);
+  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-border-color);
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  &:checked + .circle {
+    --radio-border-width: 6px;
+    --radio-border-color: #{colors.$basic-blue};
+  }
+  &:not(:checked):disabled + .circle {
+    --radio-border-color: #{colors.$basic-gray24};
+    --radio-color: #{colors.$basic-gray4};
+  }
+  &:checked:disabled + .circle {
+    --radio-border-width: 6px;
+    --radio-border-color: #{colors.$basic-gray24};
+    --radio-color: #{colors.$basic-gray4};
+  }
+}

package/rating/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export declare type StarSize = 's' | 'm';
+export type StarSize = 's' | 'm';
 export interface RatingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Размер. */
     size?: StarSize;
     /** Значение рейтинга. */
     value: number;

package/rating/types.d.ts

@@ -1 +1 @@
-export declare type StarType = 'full' | 'half' | 'empty';
+export type StarType = 'full' | 'half' | 'empty';