@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

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

@@ -1,78 +0,0 @@
-@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

@@ -1,17 +0,0 @@
-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

@@ -1,48 +0,0 @@
-"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/with-hint/index.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="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,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTempHint = exports.WithHint = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children(openerRef, toggle), shown && hint && ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(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 @@
-/// <reference types="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 {};

package/with-hint/positioning-hint.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PositioningHint = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const hint_deprecated_1 = require("../hint-deprecated");
-const utils_1 = require("./utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const positioning_hint_module_scss_1 = __importDefault(require("./positioning-hint.module.scss"));
-const layer_1 = require("../helpers/layer");
-const cx = bind_1.default.bind(positioning_hint_module_scss_1.default);
-/**
- * Хинт, который выводится рядом с целевым элементом.
- * @param props Свойства.
- * @return Элемент.
- */
-const PositioningHint = ({ children, direction, openerRef }) => {
-    const layer = (0, layer_1.useLayer)();
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (ref.current && openerRef.current) {
-            ref.current.classList.remove(cx('hidden'));
-            utils_1.PlaceAt[direction](ref.current, openerRef.current);
-        }
-    }, [direction, children]);
-    return ((0, jsx_runtime_1.jsx)(hint_deprecated_1.Hint, { ref: ref, direction: direction, className: cx('hint', 'hidden'), style: { zIndex: layer + 1 }, children: children }));
-};
-exports.PositioningHint = PositioningHint;

package/with-hint/positioning-hint.module.scss

@@ -1,10 +0,0 @@
-.hint {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.hidden {
-  opacity: 0;
-  pointer-events: 0;
-}

package/with-hint/utils.d.ts

@@ -1,17 +0,0 @@
-export declare const PlaceAt: {
-    commons: (hint: HTMLDivElement, opener: Element) => readonly [DOMRect, DOMRect, {
-        x: number;
-        y: number;
-    }];
-    top: (hint: HTMLDivElement, opener: Element) => void;
-    right: (hint: HTMLDivElement, opener: Element) => void;
-    bottom: (hint: HTMLDivElement, opener: Element) => void;
-    left: (hint: HTMLDivElement, opener: Element) => void;
-};
-/**
- * Правильно подписывает функцию на прокрутку заданного элемента.
- * @param element Элемент.
- * @param callback Функция.
- * @return Функция отписки.
- */
-export declare const onParentScroll: (element: Element, callback: (e: Event) => void) => () => undefined;

package/with-hint/utils.js

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onParentScroll = exports.PlaceAt = void 0;
-const get_scroll_parent_1 = require("../helpers/get-scroll-parent");
-const on_1 = __importDefault(require("../helpers/on"));
-const utils_1 = require("../with-tooltip/utils");
-const SPACE = 4;
-exports.PlaceAt = {
-    commons: (hint, opener) => [
-        hint.getBoundingClientRect(),
-        opener.getBoundingClientRect(),
-        (0, utils_1.getOriginCorrection)(hint),
-    ],
-    top: (hint, opener) => {
-        const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x + openerRect.left + openerRect.width / 2 - hintRect.width / 2}px`;
-        hint.style.top = `${correct.y - SPACE + openerRect.top - hintRect.height}px`;
-    },
-    right: (hint, opener) => {
-        const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x + SPACE + openerRect.right}px`;
-        hint.style.top = `${correct.y + openerRect.top + openerRect.height / 2 - hintRect.height / 2}px`;
-    },
-    bottom: (hint, opener) => {
-        const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x + openerRect.left + openerRect.width / 2 - hintRect.width / 2}px`;
-        hint.style.top = `${correct.y + SPACE + openerRect.bottom}px`;
-    },
-    left: (hint, opener) => {
-        const [hintRect, openerRect, correct] = exports.PlaceAt.commons(hint, opener);
-        hint.style.left = `${correct.x - SPACE + openerRect.left - hintRect.width}px`;
-        hint.style.top = `${correct.y + openerRect.top + openerRect.height / 2 - hintRect.height / 2}px`;
-    },
-};
-/**
- * Правильно подписывает функцию на прокрутку заданного элемента.
- * @param element Элемент.
- * @param callback Функция.
- * @return Функция отписки.
- */
-const onParentScroll = (element, callback) => {
-    let scrollParent = (0, get_scroll_parent_1.getScrollParent)(element);
-    // прокрутка на body не работает с addEventListener, https://stackoverflow.com/a/43632204/13166471
-    scrollParent = scrollParent === document.body ? document : scrollParent;
-    return (0, on_1.default)(scrollParent, 'scroll', callback);
-};
-exports.onParentScroll = onParentScroll;

package/with-tooltip/index.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type ChildrenFn = (ref: React.RefObject<HTMLElement>, toggle: (opened: boolean) => void, shown: boolean) => React.ReactNode;
-export interface WithTooltipProps {
-    /** Сработает при клике вне подсказки или на крестик в ней. */
-    onDismiss?: () => void;
-    /** Содержимое компонента Tooltip. */
-    tooltip?: React.ReactNode;
-    /** Рендер-проп. */
-    children: ChildrenFn;
-}
-/**
- * Компонент, добавляющий к содержимому подсказку.
- * @deprecated Можно использовать `popup/utils`.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const WithTooltip: ({ onDismiss, children, tooltip }: WithTooltipProps) => JSX.Element;
-export {};

package/with-tooltip/index.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithTooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const get_scroll_parent_1 = require("../helpers/get-scroll-parent");
-const portal_1 = require("../portal");
-const positioning_tooltip_1 = require("./positioning-tooltip");
-/**
- * Компонент, добавляющий к содержимому подсказку.
- * @deprecated Можно использовать `popup/utils`.
- * @param props Свойства.
- * @return Элемент.
- */
-const WithTooltip = ({ onDismiss, children, tooltip }) => {
-    const openerRef = (0, react_1.useRef)(null);
-    const [shown, toggle] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children(openerRef, toggle, shown), shown && ((0, jsx_runtime_1.jsx)(portal_1.Portal, Object.assign({ defineRoot: () => (0, get_scroll_parent_1.getScrollParent)(openerRef.current) }, { children: (0, jsx_runtime_1.jsx)(positioning_tooltip_1.PositioningTooltip, { openerRef: openerRef, children: tooltip, onDismiss: () => {
-                        onDismiss && onDismiss();
-                        toggle(false);
-                    } }) })))] }));
-};
-exports.WithTooltip = WithTooltip;

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface PositioningTooltipProps {
-    /** Содержимое. */
-    children?: React.ReactNode;
-    /** Реф с элементом, относительно которого нужно позиционироваться. */
-    openerRef: React.RefObject<HTMLElement | undefined>;
-    /** Сработает при клике за пределами или на крестик. */
-    onDismiss?: () => void;
-}
-/**
- * Позиционируется относительно заданного элемента.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const PositioningTooltip: ({ openerRef, children, onDismiss }: PositioningTooltipProps) => JSX.Element;

package/with-tooltip/positioning-tooltip.js

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PositioningTooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const viewport_1 = require("../context/viewport");
-const lodash_1 = require("lodash");
-const get_scroll_parent_1 = require("../helpers/get-scroll-parent");
-const utils_1 = require("./utils");
-const tooltip_1 = require("../tooltip");
-const layer_1 = require("../helpers/layer");
-const hooks_1 = require("../hooks");
-const on_1 = __importDefault(require("../helpers/on"));
-/**
- * Позиционируется относительно заданного элемента.
- * @param props Свойства.
- * @return Элемент.
- */
-const PositioningTooltip = ({ openerRef, children, onDismiss }) => {
-    const layer = (0, layer_1.useLayer)();
-    const tooltipRef = (0, react_1.useRef)(null);
-    const viewportRef = (0, react_1.useContext)(viewport_1.ViewportContext);
-    const place = (0, react_1.useCallback)(() => {
-        if (tooltipRef.current && openerRef.current) {
-            (0, utils_1.placeTooltip)(tooltipRef.current, openerRef.current, viewportRef.current || (0, get_scroll_parent_1.getScrollParent)(tooltipRef.current));
-            tooltipRef.current.style.opacity = '1';
-        }
-    }, [openerRef, viewportRef]);
-    (0, react_1.useEffect)(place);
-    (0, react_1.useEffect)(() => {
-        const offList = [
-            (0, on_1.default)(window, 'scroll', place),
-            (0, on_1.default)(window, 'resize', (0, lodash_1.debounce)(place, 200)),
-            // у тултипа и открывашки могут быть разные scroll-родители а может быть один,
-            // учитываем оба варианта и накидываем обработчик прокрутки
-            ...[tooltipRef, openerRef]
-                .map(ref => (0, get_scroll_parent_1.getScrollParent)(ref.current))
-                .filter(el => el !== document.body && el !== document.documentElement)
-                .reduce((a, b) => (!a.includes(b) && a.push(b), a), [])
-                .map(el => (0, on_1.default)(el, 'scroll', place)),
-        ];
-        return () => offList.forEach(fn => fn());
-    }, []);
-    (0, hooks_1.useOutsideClick)(tooltipRef, () => {
-        onDismiss && onDismiss();
-    });
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ ref: tooltipRef, style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            opacity: 0,
-            zIndex: layer + 1,
-        }, onClose: onDismiss }, { children: children })));
-};
-exports.PositioningTooltip = PositioningTooltip;

package/with-tooltip/utils.d.ts

@@ -1,38 +0,0 @@
-type DOMRectLike = Record<(typeof rectKeys)[number], number>;
-type CanPlaceFn = (holder: HTMLElement, tooltipEl: HTMLElement, area: DOMRectLike) => boolean;
-declare const rectKeys: readonly ["top", "left", "bottom", "right", "width", "height"];
-export declare const CanPlace: Record<'onRight' | 'onLeft' | 'onBottom' | 'onTop', CanPlaceFn>;
-export declare const PlaceOffset: {
-    reset: (element: HTMLElement) => void;
-    onRight: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onLeft: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onBottom: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onTop: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-};
-export declare const CorrectOffset: {
-    vertically: (tooltipEl: HTMLElement, holderEl: HTMLElement, area: DOMRectLike) => number;
-    horizontally: (tooltipEl: HTMLElement, area: DOMRectLike) => number;
-};
-/**
- * Позиционирует элемент подсказки относительно "держащего" элемента.
- * @param tooltipEl Элемент подсказки.
- * @param holderEl Держащий элемент.
- * @param viewportEl Элемент, определяющий прямоугольник в который нужно вписать тултип.
- */
-export declare const placeTooltip: (tooltipEl: HTMLElement, holderEl: HTMLElement, viewportEl: HTMLElement) => void;
-/**
- * Возвращает внутреннюю доступную область блока (с учетом прокруток).
- * @param element Элемент.
- * @return Прямоугольник.
- */
-export declare const getInnerRect: (element: Element) => DOMRectLike;
-/**
- * Получив элемент, вернет смещение, с которым можно задать координаты относительно левого верхнего угла страницы.
- * @param element Элемент, должен находиться в документе.
- * @return Смещение по осям.
- */
-export declare const getOriginCorrection: (element: HTMLElement) => {
-    x: number;
-    y: number;
-};
-export {};