@alfalab/core-components 19.11.1 → 20.0.0

package/select-with-tags/cssm/components/tag-list/component.d.ts

@@ -1,20 +0,0 @@
-import { FC, ReactNode, ChangeEvent, MutableRefObject } from 'react';
-import { FieldProps } from "../../../../select";
-import { FormControlProps } from "../../../../form-control";
-import { TagComponent } from "../../types";
-type TagListOwnProps = {
-    value?: string;
-    handleDeleteTag?: (key: string) => void;
-    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
-    inputRef?: MutableRefObject<HTMLInputElement>;
-    autocomplete?: boolean;
-    isPopoverOpen?: boolean;
-    collapseTagList?: boolean;
-    moveInputToNewLine?: boolean;
-    transformCollapsedTagText?: (collapsedCount: number) => string;
-    transformTagText?: (tagText?: ReactNode) => ReactNode;
-    Tag?: TagComponent;
-    handleUpdatePopover?: () => void;
-};
-declare const TagList: FC<FieldProps & FormControlProps & TagListOwnProps>;
-export { TagList };

package/select-with-tags/cssm/components/tag-list/component.js

@@ -1,133 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
-var React = require('react');
-var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
-var coreComponentsFormControl = require('../../../../form-control/cssm');
-require('../../../../tag/cssm');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
-require('../tag/index.module.css');
-var components_tag_component = require('../tag/component.js');
-var utils_calculateCollapseSize = require('../../utils/calculate-collapse-size.js');
-var styles = require('./index.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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var TagList = function (_a) {
-    var _b, _c, _d;
-    var _e = _a.size, size = _e === void 0 ? 'xl' : _e, open = _a.open, disabled = _a.disabled, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, fieldClassName = _a.fieldClassName, _g = _a.value, value = _g === void 0 ? '' : _g, autocomplete = _a.autocomplete, label = _a.label, valueRenderer = _a.valueRenderer, onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isPopoverOpen = _a.isPopoverOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h, restProps = tslib_es6.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isPopoverOpen", "handleUpdatePopover", "Tag"]);
-    var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(false), isShowMoreEnabled = _k[0], setShowMoreEnabled = _k[1];
-    var _l = React.useState(1), visibleElements = _l[0], setVisibleElements = _l[1];
-    var _m = React.useState(false), inputOnNewLine = _m[0], setInputOnNewLine = _m[1];
-    var wrapperRef = React.useRef(null);
-    var inputRef = React.useRef(null);
-    var contentWrapperRef = React.useRef(null);
-    var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
-    var inputFocusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
-    React.useLayoutEffect(function () {
-        setShowMoreEnabled(isPopoverOpen);
-    }, [isPopoverOpen]);
-    React.useLayoutEffect(function () {
-        setVisibleElements(selectedMultiple.length);
-        setShowMoreEnabled(false);
-    }, [selectedMultiple]);
-    React.useLayoutEffect(function () {
-        if (collapseTagList && contentWrapperRef.current) {
-            var totalVisibleElements = utils_calculateCollapseSize.calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
-            setVisibleElements(totalVisibleElements);
-        }
-    }, [collapseTagList, visibleElements, autocomplete]);
-    var handleFocus = React.useCallback(function () { return setFocused(true); }, []);
-    var handleBlur = React.useCallback(function () { return setFocused(false); }, []);
-    var inputTextIsOverflow = React.useCallback(function () { return inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth; }, []);
-    var handleMouseDown = React.useCallback(function (event) {
-        event.preventDefault();
-    }, []);
-    var onClick = innerProps.onClick, restInnerProps = tslib_es6.__rest(innerProps, ["onClick"]);
-    var handleClick = React.useCallback(function (event) {
-        if (onClick && contentWrapperRef.current) {
-            var eventTarget = event.target;
-            var clickedInsideContent = eventTarget !== contentWrapperRef.current &&
-                contentWrapperRef.current.contains(eventTarget);
-            if (!clickedInsideContent) {
-                onClick(event);
-            }
-        }
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [onClick]);
-    var handleKeyDown = React.useCallback(function (event) {
-        var lastSelectedTag = selectedMultiple[selectedMultiple.length - 1];
-        if (event.key === 'Backspace' && !value && handleDeleteTag && lastSelectedTag) {
-            handleDeleteTag(lastSelectedTag.key);
-        }
-    }, [handleDeleteTag, selectedMultiple, value]);
-    var toggleShowMoreLessButton = React.useCallback(function (event) {
-        event.stopPropagation();
-        setShowMoreEnabled(function (v) { return !v; });
-        if (handleUpdatePopover) {
-            handleUpdatePopover();
-        }
-    }, [handleUpdatePopover]);
-    React.useEffect(function () {
-        /**
-         * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
-         */
-        if (moveInputToNewLine) {
-            if (inputTextIsOverflow() && !inputOnNewLine) {
-                setInputOnNewLine(true);
-            }
-            else if (value.length === 0) {
-                setInputOnNewLine(false);
-            }
-        }
-    }, [value, inputOnNewLine, inputTextIsOverflow, moveInputToNewLine]);
-    var collapseTagTitle = React.useMemo(function () {
-        if (isShowMoreEnabled) {
-            return 'Свернуть';
-        }
-        if (transformCollapsedTagText) {
-            return transformCollapsedTagText(selectedMultiple.length - visibleElements);
-        }
-        return "+" + (selectedMultiple.length - visibleElements);
-    }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
-    var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
-    /**
-     * Флаг который позволит добавлять класс с вертикальными
-     * отступами если элементы не помещаются в один ряд,
-     * для того чтобы не менялась высота инпута
-     */
-    var shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !label);
-    return (React__default['default'].createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn__default['default'](className, styles__default['default'].component, styles__default['default'][size]) },
-        React__default['default'].createElement(coreComponentsFormControl.FormControl, tslib_es6.__assign({}, restProps, { ref: innerProps.ref, fieldClassName: cn__default['default'](fieldClassName, styles__default['default'].field, (_b = {},
-                _b[styles__default['default'].focusVisible] = focusVisible,
-                _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default['default'](styles__default['default'].addons, styles__default['default']["addons-size-" + size]), label: label, labelClassName: styles__default['default'].label }),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].contentWrapper, (_c = {},
-                    _c[styles__default['default'].hasLabel] = Boolean(label),
-                    _c[styles__default['default'].hasTags] = selectedMultiple.length > 0,
-                    _c[styles__default['default'].contentWrapperVertical] = shouldAddVerticalMargin,
-                    _c)), ref: contentWrapperRef },
-                selectedMultiple.map(function (option, index) {
-                    return isShowMoreEnabled || index + 1 <= visibleElements ? (React__default['default'].createElement(Tag, { option: tslib_es6.__assign(tslib_es6.__assign({}, option), { content: transformTagText
-                                ? transformTagText(option.content)
-                                : option.content }), key: option.key, handleDeleteTag: handleDeleteTag })) : null;
-                }),
-                visibleElements < selectedMultiple.length && (React__default['default'].createElement(Tag, { "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, option: {
-                        key: 'collapse',
-                        content: collapseTagTitle,
-                    } })),
-                autocomplete && (React__default['default'].createElement("input", tslib_es6.__assign({}, restInnerProps, { autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn__default['default'](styles__default['default'].input, (_d = {},
-                        _d[styles__default['default'].focusVisible] = inputFocusVisible,
-                        _d[styles__default['default'].block] = inputOnNewLine,
-                        _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),
-                placeholder && !filled && !autocomplete && (React__default['default'].createElement("span", { className: styles__default['default'].placeholder }, placeholder))))));
-};
-
-exports.TagList = TagList;

package/select-with-tags/cssm/components/tag-list/index.d.ts

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

package/select-with-tags/cssm/components/tag-list/index.js

@@ -1,18 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('../../tslib.es6-ce870b46.js');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-require('../../../../form-control/cssm');
-require('../../../../tag/cssm');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
-require('../tag/index.module.css');
-require('../tag/component.js');
-require('../../utils/calculate-collapse-size.js');
-require('./index.module.css');
-var components_tagList_component = require('./component.js');
-
-
-
-exports.TagList = components_tagList_component.TagList;

package/select-with-tags/cssm/components/tag-list/index.module.css

@@ -1,158 +0,0 @@
-:root {
-    --color-light-border-link: #007aff;
-    --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
-    --color-light-text-tertiary: #b6bcc3;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
-}
-:root {
-    --focus-color: var(--color-light-border-link);
-    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-}
-.component.xl .contentWrapper {
-    padding: var(--gap-l) var(--gap-m);
-}
-.component.l .contentWrapper {
-    padding: var(--gap-m) var(--gap-m);
-}
-.component.m .contentWrapper {
-    padding: var(--gap-m) var(--gap-s);
-}
-.component.s .contentWrapper {
-    padding: var(--gap-s) var(--gap-s);
-}
-.component.xl .contentWrapperVertical {
-    padding-top: var(--gap-l);
-    padding-bottom: var(--gap-l);
-}
-.component.l .contentWrapperVertical {
-    padding-top: var(--gap-m);
-    padding-bottom: var(--gap-m);
-}
-.component.m .contentWrapperVertical {
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-}
-.component.s .contentWrapperVertical {
-    padding-top: var(--gap-xs);
-    padding-bottom: var(--gap-xs);
-}
-.component .contentWrapper {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    margin: var(--gap-2xs-neg)
-}
-.component .contentWrapper:not(.contentWrapperVertical):not(.hasLabel) {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-.component .contentWrapper.hasLabel {
-        margin-top: var(--gap-xs);
-        padding-bottom: var(--gap-xs);
-    }
-.component .contentWrapper.hasTags.hasLabel {
-        margin-top: var(--gap-m);
-        padding-bottom: var(--gap-s);
-    }
-.component:hover .addons {
-    opacity: 0.7;
-}
-.field {
-    cursor: pointer;
-}
-.input {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-    flex-grow: 1;
-    flex-basis: 50px;
-    min-width: 50px;
-    padding: 0;
-    margin: var(--gap-2xs);
-    background-color: transparent;
-    outline: none;
-    border: none;
-    font-family: var(--font-family);
-    color: var(--color-light-text-primary)
-}
-.input:disabled {
-        color: var(--color-light-text-secondary);
-    }
-.input::placeholder {
-        color: var(--color-light-text-secondary);
-    }
-.input:focus::placeholder {
-        color: var(--color-light-text-tertiary);
-    }
-.block {
-    min-width: 100%;
-}
-.focusVisible {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-}
-.placeholder {
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    padding-left: var(--gap-2xs);
-    color: var(--color-light-text-tertiary);
-    pointer-events: none;
-}
-.addons {
-    align-self: flex-start;
-    padding-top: var(--gap-s);
-}
-.addons-size-m {
-    padding-top: var(--gap-m);
-}
-.addons-size-l {
-    padding-top: var(--gap-l);
-}
-.addons-size-xl {
-    padding-top: var(--gap-xl);
-}
-.component.s .label {
-    top: 5px;
-    left: 12px;
-}
-.component.m .label {
-    top: 8px;
-    left: 12px;
-}
-.component.l .label {
-    top: 10px;
-    left: 16px;
-}
-.component.xl .label {
-    top: 14px;
-    left: 16px;
-}
-.component .label {
-    top: 14px;
-    align-items: flex-start;
-    height: auto;
-    transform: none;
-    font-size: 14px;
-}

package/select-with-tags/cssm/index.d.ts

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

package/select-with-tags/cssm/index.js

@@ -1,21 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('./tslib.es6-ce870b46.js');
-require('react');
-require('../../select/cssm');
-require('classnames');
-require('@alfalab/hooks');
-require('../../form-control/cssm');
-require('../../tag/cssm');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
-require('./components/tag/index.module.css');
-require('./components/tag/component.js');
-require('./utils/calculate-collapse-size.js');
-require('./components/tag-list/index.module.css');
-require('./components/tag-list/component.js');
-require('./utils/match.js');
-var component = require('./component.js');
-
-
-
-exports.SelectWithTags = component.SelectWithTags;

package/select-with-tags/cssm/tslib.es6-ce870b46.js

@@ -1,40 +0,0 @@
-/*! *****************************************************************************
-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.
-***************************************************************************** */
-exports.__assign = function () {
-    exports.__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 exports.__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;
-}
-
-exports.__rest = __rest;

package/select-with-tags/cssm/types.d.ts

@@ -1,63 +0,0 @@
-import { ChangeEvent, FC, ReactNode } from 'react';
-import { BaseSelectProps, OptionShape } from "../../select";
-import { TagProps as TagPropsBase } from "../../tag";
-type OptionMatcher = (option: OptionShape, inputValue: string) => boolean;
-type TagProps = {
-    option: OptionShape;
-    handleDeleteTag?: (key: string) => void;
-} & TagPropsBase;
-type TagComponent = FC<TagProps>;
-type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'multiple' | 'autocomplete' | 'selected' | 'onChange'> & {
-    /**
-     * Значение поля ввода
-     */
-    value: string;
-    /**
-     * Обработчик ввода
-     */
-    onInput: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Список выбранных пунктов (controlled-селект)
-     */
-    selected?: Array<OptionShape | string>;
-    /**
-     * Обработчик выбора
-     */
-    onChange?: (payload: {
-        selectedMultiple: Array<OptionShape | string>;
-        name?: string;
-    }) => void;
-    /**
-     * Режим автокомплита
-     */
-    autocomplete?: boolean;
-    /**
-     * Функция сравнения при поиске
-     */
-    match?: OptionMatcher;
-    /**
-     * Будет отображаться, если компонент списка пустой
-     */
-    emptyListPlaceholder?: string;
-    /**
-     * Компонент Тэг
-     */
-    Tag?: TagComponent;
-    /**
-     * Показывать тэги только в одном ряду, а если не помещаются в один ряд - схлопнуть в одну кнопку
-     */
-    collapseTagList?: boolean;
-    /**
-     * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
-     */
-    moveInputToNewLine?: boolean;
-    /**
-     * Трансформировать текст компонента Тэг который отображает общее количество выбранных элементов
-     */
-    transformCollapsedTagText?: (collapsedCount: number) => string;
-    /**
-     * Трансформировать текст компонента Тэг
-     */
-    transformTagText?: (tagText?: ReactNode) => ReactNode;
-};
-export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps };