@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/text-field/index.d.ts

@@ -1,69 +0,0 @@
-import React from 'react';
-import { BaseInputProps } from '../base-input-deprecated';
-import { SmallRounds } from '../styling/shapes';
-type Variant = 'desktop' | 'mobile';
-export type DesktopSize = 'xs' | 's' | 'l';
-type Classes = {
-    root?: string;
-    baseInput?: string;
-    blockFocused?: string;
-};
-type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
-export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, IgnoredInputProps> {
-    /** Ярлык. */
-    label?: string;
-    /** Свойства BaseInput. */
-    baseInputProps?: BaseInputProps;
-    /** Подпись снизу. */
-    caption?: React.ReactNode;
-    /** CSS-классы. */
-    classes?: Classes;
-    /** Дополнительная верстка после текста. */
-    endAdornment?: React.ReactNode;
-    /** Показывать ли поле как ошибочное. */
-    failed?: boolean;
-    /** Показывать ли поле как сфокусированное (влияет только на оформление). */
-    focused?: boolean;
-    /** Нужно ли выводить textarea вместо input. */
-    multiline?: boolean;
-    /** Сработает при изменении значения. */
-    onChange?: BaseInputProps['onChange'];
-    /** Сработает при клике. */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /** Сработает при событии "input". */
-    onInput?: BaseInputProps['onInput'];
-    /** Сработает при событии "keydown". */
-    onKeyDown?: BaseInputProps['onKeyDown'];
-    /** Сработает при событии "keyup". */
-    onKeyUp?: BaseInputProps['onKeyUp'];
-    /** Placeholder, который выводится после введенного значения. */
-    restPlaceholder?: BaseInputProps['restPlaceholder'];
-    /** Задает скругления. */
-    rounds?: 'none' | keyof typeof SmallRounds;
-    /** Размеры поля для variant = "desktop". */
-    size?: DesktopSize;
-    /** Дополнительная верстка до текста. */
-    startAdornment?: React.ReactNode;
-    /** Вариант отображения. */
-    variant?: Variant;
-    /** Свойства элемента-блока. */
-    blockProps?: Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export declare const HEIGHTS: {
-    readonly xs: 32;
-    readonly s: 40;
-    readonly l: 56;
-};
-export declare const DEFAULTS: {
-    readonly size: "xs" | "s" | "l";
-};
-/**
- * Компонент текстового поля.
- * @deprecated На адаптивных страницах следует использовать Input или Textarea.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
-export {};

package/text-field/index.js

@@ -1,108 +0,0 @@
-"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.TextField = exports.DEFAULTS = exports.HEIGHTS = void 0;
-const react_1 = __importStar(require("react"));
-const lodash_1 = require("lodash");
-const box_1 = require("../box");
-const base_input_deprecated_1 = require("../base-input-deprecated");
-const shapes_1 = require("../styling/shapes");
-const bind_1 = __importDefault(require("classnames/bind"));
-const text_field_module_scss_1 = __importDefault(require("./text-field.module.scss"));
-const sizes_1 = require("../styling/sizes");
-const cx = bind_1.default.bind(text_field_module_scss_1.default);
-exports.HEIGHTS = { xs: 32, s: 40, l: 56 };
-exports.DEFAULTS = { size: 'l' };
-/**
- * Вернет true если переданное значение будет выведено при установке в input.
- * @param value Значение.
- * @return Будет ли выведено значение.
- */
-const isVisible = (value) => !(0, lodash_1.isNil)(value) && `${value}` !== '';
-/**
- * Получив данные визуальных модификаторов, возвращает строку с css-классами.
- * @param modifiers Данные визуальных модификаторов.
- * @return Строка с css-классами.
- */
-const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
-/**
- * Компонент текстового поля.
- * @deprecated На адаптивных страницах следует использовать Input или Textarea.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, type, name, autoComplete, id, }, ref) {
-    const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
-    const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
-    const focused = reallyFocused || Boolean(asFocused);
-    const baseInputRef = (0, react_1.useRef)();
-    const isDesktop = variant === 'desktop';
-    const isMobile = variant === 'mobile';
-    const isLargeDesktop = isDesktop && size === 'l';
-    const withLabel = (isLargeDesktop || isMobile) && Boolean(label);
-    const labelAsPlaceholder = !(focused || hasValue);
-    const commonModifyClasses = modifiersToClasses({
-        disabled,
-        failed,
-        focused,
-        variant,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
-    (0, react_1.useEffect)(() => { var _a; return toggleHasValue(Boolean((_a = baseInputRef.current) === null || _a === void 0 ? void 0 : _a.value)); });
-    return (react_1.default.createElement("div", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style },
-        react_1.default.createElement("div", Object.assign({}, blockProps, { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
-                const input = baseInputRef.current;
-                onClick === null || onClick === void 0 ? void 0 : onClick(event);
-                input &&
-                    !disabled &&
-                    !event.defaultPrevented &&
-                    input !== document.activeElement &&
-                    input.focus();
-            } }),
-            !multiline && Boolean(startAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginRight: 4 }, startAdornment)),
-            react_1.default.createElement("div", { className: cx('main-column') },
-                withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),
-                react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_deprecated_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
-                            onFocus && onFocus(event);
-                            toggleHasValue(Boolean(event.target.value));
-                            toggleFocused(true);
-                        }, onBlur: (event) => {
-                            onBlur && onBlur(event);
-                            toggleHasValue(Boolean(event.target.value));
-                            toggleFocused(false);
-                        }, onInput: (event) => {
-                            onInput === null || onInput === void 0 ? void 0 : onInput(event);
-                            toggleHasValue(Boolean(event.target.value));
-                        }, onChange: (event) => {
-                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                            toggleHasValue(Boolean(event.target.value));
-                        }, onKeyDown: onKeyDown, onKeyUp: onKeyUp })))),
-            !multiline && Boolean(endAdornment) && (react_1.default.createElement(box_1.Box, { display: 'flex', alignItems: 'center', marginLeft: 4 }, endAdornment))),
-        Boolean(caption) && (react_1.default.createElement("div", { className: cx('caption', (0, sizes_1.marginTop)(isMobile ? 1 : 2), failed && 'failed'), children: caption }))));
-});

package/text-field/text-field.module.scss

@@ -1,205 +0,0 @@
-@use '../colors';
-
-.reset {
-  margin: 0;
-  border: 0;
-  padding: 0;
-  outline: 0;
-  box-sizing: border-box;
-  font: inherit;
-}
-
-// В селекторе указан input потому что в основном проекте присутствуют стили,
-// которые переопределяют отступы для input. Иначе не хватает специфичности.
-input.reset {
-  padding: 0;
-}
-
-.root {
-  display: inline-block;
-}
-
-.input-block {
-  display: flex;
-  min-width: 56px; // минимальная ширина по договоренности с дизайнерами
-  max-width: 100%;
-  padding: 0 12px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  &.with-label {
-    .input-wrapper {
-      padding-top: 16px;
-    }
-  }
-
-  // variant: desktop
-  &.variant-desktop {
-    background-color: #fff;
-    border: 1px solid colors.$basic-gray12;
-    &.disabled {
-      border-color: colors.$basic-gray12;
-      background-color: colors.$basic-gray2;
-    }
-    &.focused:not(.disabled):not(.failed) {
-      border-color: colors.$basic-blue;
-    }
-    &.disabled {
-      border-color: colors.$basic-gray12;
-    }
-    &:not(.multiline) {
-      &.size-xs {
-        font-size: 14px;
-        height: 32px;
-      }
-      &.size-s {
-        height: 40px;
-      }
-      &.size-m {
-        height: 48px;
-      }
-      &.size-l {
-        height: 56px;
-        padding: 0 16px;
-      }
-    }
-    &.multiline {
-      align-items: flex-start;
-      min-height: 128px;
-      padding: 14px 16px; // 14px с учетом обводки
-      &.with-label {
-        padding: 7px 16px; // 7px с учетом обводки
-      }
-    }
-  }
-
-  // variant: mobile
-  &.variant-mobile {
-    padding: 0;
-    border: 0;
-    box-shadow: inset 0 -1px colors.$basic-gray12;
-    .main-column {
-      height: 100%;
-      justify-content: center;
-    }
-    &.with-label .main-column {
-      justify-content: flex-start;
-    }
-    &.focused:not(.disabled) {
-      box-shadow: inset 0 -1px colors.$basic-blue;
-    }
-    &.failed:not(:disabled) {
-      box-shadow: inset 0 -1px colors.$additional-deep-red;
-    }
-    &:not(.multiline) {
-      height: 48px;
-    }
-    &.multiline {
-      height: auto;
-      min-height: 48px;
-      .main-column {
-        padding-bottom: 8px;
-      }
-      &:not(.with-label) .main-column {
-        padding-top: 8px;
-      }
-    }
-  }
-
-  // чтобы startAdornment/endAdornment подхватили цвет
-  color: colors.$basic-gray87;
-  &.disabled {
-    color: colors.$basic-gray24;
-  }
-}
-
-.main-column {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.input-wrapper {
-  display: flex;
-}
-
-.label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  font-size: 12px;
-  line-height: 16px;
-  transition: transform 0.2s ease, font-size 0.2s ease, top 0.2s ease;
-  transform-origin: left bottom;
-  white-space: nowrap;
-  overflow: hidden;
-  color: colors.$basic-gray38;
-  &.disabled {
-    color: colors.$basic-gray24;
-  }
-  &.as-placeholder {
-    font-size: 16px;
-    line-height: 24px;
-    &.variant-desktop {
-      top: 8px;
-    }
-    &.variant-mobile {
-      top: 12px;
-    }
-  }
-  &.variant-mobile {
-    &.focused:not(.failed) {
-      color: colors.$basic-blue;
-    }
-    &.failed.focused,
-    &.failed.filled {
-      color: colors.$additional-deep-red;
-    }
-  }
-  &.variant-desktop {
-    &.failed:not(.focused):not(.filled) {
-      color: colors.$additional-deep-red;
-    }
-  }
-}
-
-// hotfix: storybook добавляет стили в порядке наименования компонентов (не сходится с порядком в webpack)
-.input-wrapper .base-input {
-  font-size: 16px;
-  line-height: 24px;
-  color: colors.$basic-gray87;
-  --placeholder-color: #{colors.$basic-gray38};
-  background-color: transparent;
-  width: 0;
-  flex-grow: 1;
-  &.disabled {
-    color: colors.$basic-gray24;
-    --placeholder-color: #{colors.$basic-gray24};
-    -webkit-text-fill-color: colors.$basic-gray24; //fix safari disabled
-  }
-  &.size-xs {
-    font-size: 14px;
-    line-height: 20px;
-  }
-  &.variant-mobile:not(:focus) {
-    text-overflow: ellipsis;
-  }
-  &.variant-desktop.failed {
-    color: colors.$additional-deep-red;
-    --placeholder-color: #{colors.$additional-deep-red};
-  }
-}
-
-.caption {
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$basic-gray38;
-  &.failed {
-    color: colors.$additional-deep-red;
-  }
-}

package/tooltip/index.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export interface TooltipProps {
-    /** Содержимое. */
-    children?: React.ReactNode;
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Сработает при клике за пределами или на крестик. */
-    onClose?: React.MouseEventHandler<SVGSVGElement>;
-    /** Стили. */
-    style?: React.CSSProperties;
-}
-/**
- * Компонент подсказки.
- * @deprecated Можно использовать `popup`.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | null>>;

package/tooltip/index.js

@@ -1,43 +0,0 @@
-"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.Tooltip = void 0;
-const react_1 = __importStar(require("react"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const tooltip_module_scss_1 = __importDefault(require("./tooltip.module.scss"));
-const cx = bind_1.default.bind(tooltip_module_scss_1.default);
-/**
- * Компонент подсказки.
- * @deprecated Можно использовать `popup`.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Tooltip = (0, react_1.forwardRef)(({ children, onClose, style, className }, ref) => (react_1.default.createElement("div", { ref: ref, style: style, className: cx('root', className), "data-testid": 'tooltip' },
-    react_1.default.createElement(cross_1.default, { className: cx('cross'), onClick: onClose, "data-testid": 'tooltip:cross' }),
-    react_1.default.createElement("div", { className: cx('content') }, children))));

package/tooltip/tooltip.module.scss

@@ -1,49 +0,0 @@
-@use '../colors';
-@import '../styling/shadows.module';
-
-.root {
-  display: inline-flex;
-  position: relative;
-  max-width: 400px;
-  max-height: 536px;
-  padding: 40px 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: colors.$basic-gray4;
-  border-radius: 4px;
-  @extend .shadow-z2;
-}
-
-.cross {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  cursor: pointer;
-}
-
-.content {
-  font-size: 16px;
-  line-height: 24px;
-  padding: 0 32px;
-  max-height: 456px; // 536 (по макетам) - 80 (отступы)
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  // base scrollbar styling for Gecko
-  scrollbar-color: #e0e0e0 transparent;
-  scrollbar-width: thin;
-
-  // base scrollbar styling for IE
-  scrollbar-face-color: #e0e0e0;
-  scrollbar-track-color: #fafafa;
-
-  // scrollbar styling for Webkit/Blink
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    width: 4px;
-    background-color: #e0e0e0;
-    border-radius: 4px;
-  }
-}

package/upload-area/upload.svg

@@ -1,6 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M57.2474 30.4336C55.7344 28.9358 53.7859 28.0106 51.6717 27.7685C51.693 27.4015 51.7037 27.0334 51.7037 26.6667C51.7037 16.3739 43.3299 8 33.037 8C24.6272 8 17.3482 13.5368 15.0787 21.5554C8.80692 22.2366 4 27.5639 4 33.9608C4 40.8226 9.58272 46.4401 16.4445 46.4401H23.7037C24.2764 46.4401 24.7408 45.9758 24.7408 45.403C24.7408 44.8302 24.2764 44.3659 23.7037 44.3659H16.4445C10.726 44.3659 6.07408 39.679 6.07408 33.9607C6.07408 28.4146 10.4096 23.8475 15.9442 23.5852C16.405 23.5634 16.7953 23.2311 16.9032 22.783C18.7008 15.3055 25.3351 10.0786 33.037 10.0786C42.186 10.0786 49.6296 17.52 49.6296 26.669C49.6296 27.3212 49.5917 27.9779 49.5162 28.6224C49.4817 28.9167 49.5749 29.2451 49.7714 29.4664C49.9683 29.6871 50.2504 29.8474 50.5461 29.8474H50.548C52.5406 29.8474 54.4015 30.5691 55.7884 31.9419C57.1667 33.3065 57.9258 35.1461 57.9258 37.0889C57.9258 41.092 54.6694 44.3659 50.6666 44.3659H42.3703C41.7976 44.3659 41.3332 44.8302 41.3332 45.403C41.3332 45.9758 41.7975 46.4401 42.3703 46.4401H50.6666C55.8128 46.4401 59.9999 42.2182 59.9999 37.0719C60 34.5711 59.0227 32.1907 57.2474 30.4336Z" fill="#C2C2C2"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M33 31.8519C33.5523 31.8519 34 32.2996 34 32.8519V54.8519C34 55.4042 33.5523 55.8519 33 55.8519C32.4477 55.8519 32 55.4042 32 54.8519V32.8519C32 32.2996 32.4477 31.8519 33 31.8519Z" fill="#C2C2C2"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M39.7318 39.1191C39.3555 39.5233 38.7228 39.5459 38.3185 39.1696L32.3185 33.5838C31.9143 33.2074 31.8916 32.5747 32.268 32.1704C32.6443 31.7662 33.277 31.7436 33.6813 32.1199L39.6813 37.7058C40.0855 38.0821 40.1082 38.7149 39.7318 39.1191Z" fill="#C2C2C2"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M26.2682 39.1191C26.6445 39.5233 27.2772 39.5459 27.6815 39.1696L33.6815 33.5838C34.0857 33.2074 34.1084 32.5747 33.732 32.1704C33.3557 31.7662 32.723 31.7436 32.3187 32.1199L26.3187 37.7058C25.9145 38.0821 25.8918 38.7149 26.2682 39.1191Z" fill="#C2C2C2"/>
-</svg>

package/with-hint/index.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { HintProps } from '../hint-deprecated';
-type ChildrenFn = (ref: React.RefObject<Element>, toggle: (opened: boolean) => void) => React.ReactNode;
-export interface WithHintProps {
-    /** Содержимое хинта. */
-    hint: React.ReactNode;
-    /** С какой стороны появляется хинт. */
-    direction?: HintProps['direction'];
-    /** Нужно ли показывать хинт. */
-    shown?: boolean;
-    /** Контент, содержащий элемент, рядом с которым будет показан хинт. */
-    children: ChildrenFn;
-    /** Срабатывает при закрытии. */
-    onClose?: () => void;
-}
-/**
- * Компонент вывода "хинта" рядом с заданным элементом.
- * @deprecated Следует использовать `hint`.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const WithHint: ({ children, direction, hint, onClose, shown: shownProp, }: WithHintProps) => JSX.Element;
-/**
- * Хук для формирования состояния временного хинта по гайдам.
- * @return Управление.
- */
-export declare const useTempHint: () => readonly [{
-    readonly shown: boolean;
-    readonly onClose: () => void;
-}, (value: boolean) => void];
-export {};

package/with-hint/index.js

@@ -1,73 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTempHint = exports.WithHint = void 0;
-const react_1 = __importStar(require("react"));
-const portal_1 = require("../portal");
-const positioning_hint_1 = require("./positioning-hint");
-const utils_1 = require("./utils");
-/**
- * Компонент вывода "хинта" рядом с заданным элементом.
- * @deprecated Следует использовать `hint`.
- * @param props Свойства.
- * @return Элемент.
- */
-const WithHint = ({ children, direction = 'top', hint, onClose, shown: shownProp = false, }) => {
-    const [shown, toggle] = (0, react_1.useState)(false);
-    const openerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => toggle(shownProp), [shownProp]);
-    // следим за прокруткой
-    (0, react_1.useEffect)(() => {
-        if (shown && openerRef.current) {
-            return (0, utils_1.onParentScroll)(openerRef.current, () => {
-                toggle(false);
-                onClose && onClose();
-            });
-        }
-    }, [shown]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        children(openerRef, toggle),
-        shown && hint && (react_1.default.createElement(portal_1.Portal, null,
-            react_1.default.createElement(positioning_hint_1.PositioningHint, { openerRef: openerRef, direction: direction, children: hint })))));
-};
-exports.WithHint = WithHint;
-/**
- * Хук для формирования состояния временного хинта по гайдам.
- * @return Управление.
- */
-const useTempHint = () => {
-    const timerRef = (0, react_1.useRef)();
-    const [shown, setShown] = (0, react_1.useState)(false);
-    const toggle = (0, react_1.useCallback)((value) => {
-        setShown(value);
-        window.clearTimeout(timerRef.current);
-        if (value) {
-            timerRef.current = window.setTimeout(() => setShown(false), 2000);
-        }
-    }, []);
-    const onClose = (0, react_1.useCallback)(() => toggle(false), []);
-    return [{ shown, onClose }, toggle];
-};
-exports.useTempHint = useTempHint;

package/with-hint/positioning-hint.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { HintProps } from '../hint-deprecated';
-interface Props extends HintProps {
-    openerRef: React.RefObject<Element | undefined | null>;
-}
-/**
- * Хинт, который выводится рядом с целевым элементом.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const PositioningHint: ({ children, direction, openerRef }: Props) => JSX.Element;
-export {};