@alfalab/core-components 19.11.1 → 20.0.0

package/keyboard-focusable/cssm/Component.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { RefObject } from 'react';
-type KeyboardFocusableProps = {
-    /**
-     * Рендер-проп, в который передается состояние фокуса и реф.
-     *
-     * Реф нужно установить на интерактивный элемент или на одного из его родителей.
-     */
-    children: (ref: RefObject<any>, focused: boolean) => JSX.Element;
-};
-declare const KeyboardFocusable: ({ children }: KeyboardFocusableProps) => JSX.Element;
-export { KeyboardFocusable };

package/keyboard-focusable/cssm/Component.js

@@ -1,14 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var hooks = require('@alfalab/hooks');
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-var KeyboardFocusable = function (_a) {
-    var children = _a.children;
-    var targetRef = react.useRef(null);
-    var focused = hooks.useFocus(targetRef, 'keyboard')[0];
-    return children(targetRef, focused);
-};
-
-exports.KeyboardFocusable = KeyboardFocusable;

package/keyboard-focusable/cssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/keyboard-focusable/cssm/index.js

@@ -1,9 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('react');
-require('@alfalab/hooks');
-var Component = require('./Component.js');
-
-
-
-exports.KeyboardFocusable = Component.KeyboardFocusable;

package/link/cssm/Component.d.ts

@@ -1,97 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { AnchorHTMLAttributes, ElementType, ReactNode } from "react";
-type NativeProps = AnchorHTMLAttributes<HTMLAnchorElement>;
-type LinkProps = NativeProps & {
-    /**
-     * URL для перехода (native prop)
-     */
-    href?: string;
-    /**
-     * Тип ссылки
-     */
-    view?: 'primary' | 'secondary' | 'default';
-    /**
-     * Пунктирное подчеркивание
-     */
-    pseudo?: boolean;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
-     */
-    Component?: ElementType;
-    /**
-     * Дополнительный класс (native prop)
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Обработчик нажатия (native prop)
-     */
-    onClick?: NativeProps['onClick'];
-    /**
-     * Дочерние элементы (native prop)
-     */
-    children: ReactNode;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: 'default' | 'inverted';
-};
-declare const Link: React.ForwardRefExoticComponent<NativeProps & {
-    /**
-     * URL для перехода (native prop)
-     */
-    href?: string | undefined;
-    /**
-     * Тип ссылки
-     */
-    view?: "primary" | "secondary" | "default" | undefined;
-    /**
-     * Пунктирное подчеркивание
-     */
-    pseudo?: boolean | undefined;
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
-     */
-    Component?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
-    /**
-     * Дополнительный класс (native prop)
-     */
-    className?: string | undefined;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string | undefined;
-    /**
-     * Обработчик нажатия (native prop)
-     */
-    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
-    /**
-     * Дочерние элементы (native prop)
-     */
-    children: React.ReactNode;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted" | undefined;
-} & React.RefAttributes<HTMLAnchorElement>>;
-export { LinkProps, Link };

package/link/cssm/Component.js

@@ -1,94 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var mergeRefs = require('react-merge-refs');
-var hooks = require('@alfalab/hooks');
-var styles = require('./index.module.css');
-var defaultColors = require('./default.module.css');
-var invertedColors = require('./inverted.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
-var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(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 colorStyles = {
-    default: defaultColors__default['default'],
-    inverted: invertedColors__default['default'],
-};
-var Link = React.forwardRef(function (_a, ref) {
-    var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'primary' : _d, _e = _a.pseudo, pseudo = _e === void 0 ? false : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, href = _a.href, _g = _a.Component, Component = _g === void 0 ? 'a' : _g, restProps = __rest(_a, ["view", "pseudo", "leftAddons", "rightAddons", "className", "dataTestId", "children", "colors", "href", "Component"]);
-    var linkRef = React.useRef(null);
-    var focused = hooks.useFocus(linkRef, 'keyboard')[0];
-    var componentProps = (_b = {
-            className: cn__default['default'](styles__default['default'].component, colorStyles[colors][view], (_c = {},
-                _c[styles__default['default'].pseudo] = pseudo,
-                _c[styles__default['default'].focused] = focused,
-                _c[styles__default['default'].withAddons] = leftAddons || rightAddons,
-                _c), className),
-            'data-test-id': dataTestId,
-            rel: restProps.target === '_blank' ? 'noreferrer noopener' : undefined
-        },
-        // Для совместимости с react-router-dom, меняем href на to
-        _b[typeof Component === 'string' ? 'href' : 'to'] = href,
-        _b);
-    return (React__default['default'].createElement(Component, __assign({}, componentProps, restProps, { ref: mergeRefs__default['default']([linkRef, ref]) }), leftAddons || rightAddons ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-        leftAddons && React__default['default'].createElement("span", { className: styles__default['default'].addons }, leftAddons),
-        children && (React__default['default'].createElement("span", null,
-            React__default['default'].createElement("span", { className: styles__default['default'].text }, children))),
-        rightAddons && React__default['default'].createElement("span", { className: styles__default['default'].addons }, rightAddons))) : (React__default['default'].createElement("span", { className: styles__default['default'].text }, children))));
-});
-/**
- * Для отображения в сторибуке
- */
-Link.defaultProps = {
-    view: 'primary',
-    pseudo: false,
-};
-
-exports.Link = Link;

package/link/cssm/default.module.css

@@ -1,68 +0,0 @@
-:root {
-    --color-light-text-link: #007aff;
-    --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
-    --color-light-text-link-shade-20: rgb(0, 98, 204);
-    --color-light-text-link-shade-40: rgb(0, 73, 153);
-    --color-light-text-primary-shade-20: rgb(9, 25, 42);
-    --color-light-text-primary-shade-40: rgb(7, 19, 32);
-    --color-light-text-secondary-shade-20: rgb(67, 78, 91);
-    --color-light-text-secondary-shade-40: rgb(50, 59, 68);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    /* primary */
-    --link-primary-color: var(--color-light-text-primary);
-    --link-primary-hover-color: var(--color-light-text-primary-shade-20);
-    --link-primary-active-color: var(--color-light-text-primary-shade-40);
-
-    /* secondary */
-    --link-secondary-color: var(--color-light-text-secondary);
-    --link-secondary-hover-color: var(--color-light-text-secondary-shade-20);
-    --link-secondary-active-color: var(--color-light-text-secondary-shade-40);
-
-    /* default */
-    --link-default-color: var(--color-light-text-link);
-    --link-default-hover-color: var(--color-light-text-link-shade-20);
-    --link-default-active-color: var(--color-light-text-link-shade-40);
-}
-.primary {
-    color: var(--link-primary-color);
-    border-bottom-color: var(--link-primary-color)
-}
-.primary:hover {
-        color: var(--link-primary-hover-color);
-    }
-.primary:active {
-        color: var(--link-primary-active-color);
-    }
-.secondary {
-    color: var(--link-secondary-color);
-    border-bottom-color: var(--link-secondary-color)
-}
-.secondary:hover {
-        color: var(--link-secondary-hover-color);
-    }
-.secondary:active {
-        color: var(--link-secondary-active-color);
-    }
-.default {
-    color: var(--link-default-color);
-    border-bottom-color: var(--link-default-color)
-}
-.default:hover {
-        color: var(--link-default-hover-color);
-    }
-.default:active {
-        color: var(--link-default-active-color);
-    }

package/link/cssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/link/cssm/index.js

@@ -1,14 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('react-merge-refs');
-require('@alfalab/hooks');
-require('./index.module.css');
-require('./default.module.css');
-require('./inverted.module.css');
-
-
-
-exports.Link = Component.Link;

package/link/cssm/index.module.css

@@ -1,64 +0,0 @@
-:root {
-    --color-light-border-link: #007aff;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-xs: 8px;
-}
-:root {
-    --focus-color: var(--color-light-border-link);
-    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-}
-.component {
-    box-sizing: border-box;
-    text-decoration: none;
-    font-family: var(--font-family);
-    cursor: pointer;
-    outline: none
-}
-.component:hover .text,
-    .component:active .text {
-        border-bottom-color: rgba(0, 0, 0, 0);
-    }
-.withAddons {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-}
-.text {
-    border-bottom: 1px solid;
-    transition: border 0.2s ease, color 0.2s ease;
-}
-.focused {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-}
-.pseudo .text {
-    border-bottom-style: dashed;
-}
-.addons {
-    display: flex;
-    align-items: center;
-    transition: color 0.2s ease;
-}
-.addons:first-child {
-    margin-right: var(--gap-xs);
-}
-.addons:last-child {
-    margin-left: var(--gap-xs);
-}
-.addons:only-child {
-    margin-right: 0;
-    margin-left: 0;
-}

package/link/cssm/inverted.module.css

@@ -1,62 +0,0 @@
-:root {
-    --color-light-text-link: #007aff;
-    --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary-inverted: #b6bcc3;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    /* primary */
-    --link-inverted-primary-color: var(--color-light-text-primary-inverted);
-    --link-inverted-primary-hover-color: rgb(204, 204, 204);
-    --link-inverted-primary-active-color: rgb(153, 153, 153);
-
-    /* secondary */
-    --link-inverted-secondary-color: var(--color-light-text-secondary-inverted);
-    --link-inverted-secondary-hover-color: rgb(146, 150, 156);
-    --link-inverted-secondary-active-color: rgb(109, 113, 117);
-
-    /* default */
-    --link-inverted-default-color: var(--color-light-text-link);
-    --link-inverted-default-hover-color: rgb(0, 98, 204);
-    --link-inverted-default-active-color: rgb(0, 73, 153);
-}
-.primary {
-    color: var(--link-inverted-primary-color);
-    border-bottom-color: var(--link-inverted-primary-color)
-}
-.primary:hover {
-        color: var(--link-inverted-primary-hover-color);
-    }
-.primary:active {
-        color: var(--link-inverted-primary-active-color);
-    }
-.secondary {
-    color: var(--link-inverted-secondary-color);
-    border-bottom-color: var(--link-inverted-secondary-color)
-}
-.secondary:hover {
-        color: var(--link-inverted-secondary-hover-color);
-    }
-.secondary:active {
-        color: var(--link-inverted-secondary-active-color);
-    }
-.default {
-    color: var(--link-inverted-default-color);
-    border-bottom-color: var(--link-inverted-default-color)
-}
-.default:hover {
-        color: var(--link-inverted-default-hover-color);
-    }
-.default:active {
-        color: var(--link-inverted-default-active-color);
-    }