@alfalab/core-components 19.11.1 → 20.0.0

package/select/cssm/typings.js

@@ -1 +0,0 @@
-

package/select/cssm/utils.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-import { OptionShape, GroupShape, BaseSelectProps } from "./typings";
-declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
-declare const isOptionShape: (item: string | OptionShape | null) => item is OptionShape;
-declare const joinOptions: ({ selected, selectedMultiple, }: {
-    selected?: OptionShape | undefined;
-    selectedMultiple?: OptionShape[] | undefined;
-}) => ReactNode[] | null;
-declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected']): {
-    flatOptions: OptionShape[];
-    selectedOptions: OptionShape[];
-};
-type useVisibleOptionsArgs = {
-    /**
-     * Количество видимых пунктов
-     */
-    visibleOptions: number;
-    /**
-     * Реф на контейнер с пунтами меню
-     */
-    listRef: RefObject<HTMLElement>;
-    /**
-     * Реф на контейнер, которому нужно установить высоту
-     */
-    styleTargetRef?: RefObject<HTMLElement>;
-    /**
-     * Флаг открытия меню
-     */
-    open?: boolean;
-    /**
-     * Позволяет вызвать пересчет высоты
-     */
-    invalidate?: unknown;
-};
-declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
-declare function usePrevious<T>(value: T): T | undefined;
-declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };

package/select/cssm/utils.js

@@ -1,93 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-var isGroup = function (item) {
-    return Object.prototype.hasOwnProperty.call(item, 'options');
-};
-var isOptionShape = function (item) {
-    return !!item && Object.prototype.hasOwnProperty.call(item, 'key');
-};
-var joinOptions = function (_a) {
-    var selected = _a.selected, selectedMultiple = _a.selectedMultiple;
-    var options = selectedMultiple || (selected ? [selected] : []);
-    if (!options.length)
-        return null;
-    return options.reduce(function (acc, option, index) {
-        if (React.isValidElement(option.content)) {
-            acc.push(React.cloneElement(option.content, { key: option.key }));
-        }
-        else {
-            acc.push(option.content);
-        }
-        if (index < options.length - 1)
-            acc.push(', ');
-        return acc;
-    }, []);
-};
-// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу
-function processOptions(options, selected) {
-    if (selected === void 0) { selected = []; }
-    var flatOptions = [];
-    var selectedArray = Array.isArray(selected) ? selected : [selected];
-    var selectedOptions = selectedArray.filter(isOptionShape);
-    var selectedKeys = selectedArray.filter(function (option) { return typeof option === 'string'; });
-    var isSelected = function (option) { return selectedKeys.includes(option.key); };
-    var process = function (option) {
-        flatOptions.push(option);
-        if (isSelected(option)) {
-            selectedOptions.push(option);
-        }
-    };
-    options.forEach(function (option) {
-        if (isGroup(option)) {
-            option.options.forEach(process);
-        }
-        else {
-            process(option);
-        }
-    });
-    return { flatOptions: flatOptions, selectedOptions: selectedOptions };
-}
-function useVisibleOptions(_a) {
-    var visibleOptions = _a.visibleOptions, listRef = _a.listRef, _b = _a.styleTargetRef, styleTargetRef = _b === void 0 ? listRef : _b, open = _a.open, invalidate = _a.invalidate;
-    React.useEffect(function () {
-        var list = listRef.current;
-        var styleTarget = styleTargetRef.current;
-        if (open && list && styleTarget) {
-            var optionsNodes = [].slice.call(list.children, 0, visibleOptions + 1);
-            var height = optionsNodes
-                .slice(0, visibleOptions)
-                .reduce(function (acc, child) { return acc + child.clientHeight; }, 0);
-            if (visibleOptions < list.children.length) {
-                // Добавляем половинку
-                height += Math.round(optionsNodes[optionsNodes.length - 1].clientHeight / 2);
-            }
-            styleTarget.style.height = height + "px";
-        }
-    }, [listRef, open, styleTargetRef, visibleOptions, invalidate]);
-}
-// TODO: перенести
-function usePrevious(value) {
-    var ref = React.useRef();
-    React.useEffect(function () {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-// TODO: перенести
-var lastIndexOf = function (array, predicate) {
-    for (var i = array.length - 1; i >= 0; i--) {
-        if (predicate(array[i]))
-            return i;
-    }
-    return -1;
-};
-
-exports.isGroup = isGroup;
-exports.isOptionShape = isOptionShape;
-exports.joinOptions = joinOptions;
-exports.lastIndexOf = lastIndexOf;
-exports.processOptions = processOptions;
-exports.usePrevious = usePrevious;
-exports.useVisibleOptions = useVisibleOptions;

package/select/cssm/vars.css

@@ -1,10 +0,0 @@
-:root {
-
-    /* options list */
-
-    /* option */
-
-    /* checkmark */
-
-    /* optgroup */
-}

package/select/tslib.es6-e98a9028.d.ts

@@ -1,32 +0,0 @@
-declare function __extends(d: any, b: any): void;
-declare function __rest(s: any, e: any): {};
-declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
-declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
-declare function __metadata(metadataKey: any, metadataValue: any): any;
-declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
-declare function __generator(thisArg: any, body: any): {
-    next: (v: any) => any;
-    throw: (v: any) => any;
-    return: (v: any) => any;
-};
-declare function __exportStar(m: any, o: any): void;
-declare function __values(o: any): any;
-declare function __read(o: any, n: any): any;
-declare function __spread(...args: any[]): any[];
-declare function __spreadArrays(...args: any[]): any[];
-declare function __await(v: any): any;
-declare class __await {
-    constructor(v: any);
-    v: any;
-}
-declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
-declare function __asyncDelegator(o: any): {};
-declare function __asyncValues(o: any): any;
-declare function __makeTemplateObject(cooked: any, raw: any): any;
-declare function __importStar(mod: any): any;
-declare function __importDefault(mod: any): any;
-declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
-declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
-declare function __assign(...args: any[]): any;
-declare function __createBinding(o: any, m: any, k: any, k2: any): void;
-export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };

package/select/tslib.es6-e98a9028.js

@@ -1,49 +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;
-}
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-        s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
-exports.__rest = __rest;
-exports.__spreadArrays = __spreadArrays;

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

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseSelectProps } from "../../select";
-declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "name" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & {
-    value: string;
-    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    selected?: (string | import("../../select").OptionShape)[] | undefined;
-    onChange?: ((payload: {
-        selectedMultiple: (string | import("../../select").OptionShape)[];
-        name?: string | undefined;
-    }) => void) | undefined;
-    autocomplete?: boolean | undefined;
-    match?: import("./types").OptionMatcher | undefined;
-    emptyListPlaceholder?: string | undefined;
-    Tag?: React.FC<import("./types").TagProps> | undefined;
-    collapseTagList?: boolean | undefined;
-    moveInputToNewLine?: boolean | undefined;
-    transformCollapsedTagText?: ((collapsedCount: number) => string) | undefined;
-    transformTagText?: ((tagText?: React.ReactNode) => React.ReactNode) | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { SelectWithTags };

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

@@ -1,88 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('./tslib.es6-ce870b46.js');
-var React = require('react');
-var coreComponentsSelect = 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');
-var components_tagList_component = require('./components/tag-list/component.js');
-var utils_match = require('./utils/match.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var SelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, _l = _a.emptyListPlaceholder, emptyListPlaceholder = _l === void 0 ? 'Ничего не найдено.' : _l, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib_es6.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "emptyListPlaceholder", "transformCollapsedTagText", "transformTagText", "Tag"]);
-    var controlled = Boolean(selected);
-    var _m = React.useState(selected || []), selectedTags = _m[0], setSelectedTags = _m[1];
-    var _o = React.useState(false), isPopoverOpen = _o[0], setPopoverOpen = _o[1];
-    var updatePopover = React.useRef(function () { return null; });
-    var resetValue = React.useCallback(function () {
-        var event = { target: { value: '' } };
-        onInput(event);
-    }, [onInput]);
-    var handleUpdatePopover = React.useCallback(function () {
-        if (updatePopover && updatePopover.current) {
-            updatePopover.current();
-        }
-    }, []);
-    var handleDeleteTag = React.useCallback(function (deletedKey) {
-        var tags = selected || selectedTags;
-        tags = tags.filter(function (tag) {
-            var key = typeof tag === 'string' ? tag : tag.key;
-            return deletedKey !== key;
-        });
-        if (onChange) {
-            onChange({ selectedMultiple: tags });
-        }
-        if (!controlled) {
-            setSelectedTags(tags);
-        }
-    }, [controlled, onChange, selected, selectedTags]);
-    var handleChange = React.useCallback(function (_a) {
-        var selectedMultiple = _a.selectedMultiple, name = _a.name;
-        if (onChange) {
-            onChange({ selectedMultiple: selectedMultiple, name: name });
-        }
-        if (!controlled) {
-            setSelectedTags(selectedMultiple);
-        }
-        if (value) {
-            resetValue();
-        }
-    }, [onChange, controlled, value, resetValue]);
-    var handleOpen = React.useCallback(function (_a) {
-        var open = _a.open;
-        if (!open && value) {
-            resetValue();
-        }
-        setPopoverOpen(open);
-    }, [resetValue, value]);
-    var filteredOptions = utils_match.filterOptions(options, value, match);
-    var isAutocomplete = autocomplete || Boolean(match);
-    return (React__default['default'].createElement(coreComponentsSelect.BaseSelect, tslib_es6.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
-            value: value,
-            autocomplete: isAutocomplete,
-            onInput: onInput,
-            handleDeleteTag: handleDeleteTag,
-            Tag: Tag,
-            collapseTagList: collapseTagList,
-            moveInputToNewLine: moveInputToNewLine,
-            transformCollapsedTagText: transformCollapsedTagText,
-            transformTagText: transformTagText,
-            handleUpdatePopover: handleUpdatePopover,
-            isPopoverOpen: isPopoverOpen,
-        }, optionsListProps: {
-            emptyPlaceholder: emptyListPlaceholder,
-        }, selected: selected || selectedTags, autocomplete: isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen })));
-});
-
-exports.SelectWithTags = SelectWithTags;

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

@@ -1,2 +0,0 @@
-export * from "./tag-list/index";
-export * from "./tag/index";

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

@@ -1,19 +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');
-var components_tag_component = require('./tag/component.js');
-require('../utils/calculate-collapse-size.js');
-require('./tag-list/index.module.css');
-var components_tagList_component = require('./tag-list/component.js');
-
-
-
-exports.Tag = components_tag_component.Tag;
-exports.TagList = components_tagList_component.TagList;

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

@@ -1,3 +0,0 @@
-import { TagComponent } from "../../types";
-declare const Tag: TagComponent;
-export { Tag };

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

@@ -1,33 +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 coreComponentsTag = require('../../../../tag/cssm');
-var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
-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 Tag = function (_a) {
-    var _b;
-    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib_es6.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
-    var handleClick = React.useCallback(function () {
-        if (handleDeleteTag) {
-            handleDeleteTag(key);
-        }
-    }, [handleDeleteTag, key]);
-    return (React__default['default'].createElement(coreComponentsTag.Tag, tslib_es6.__assign({ key: key, size: 'xs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default['default'](styles__default['default'].tag, (_b = {}, _b[styles__default['default'].tagNoClose] = !handleDeleteTag, _b)) }, props),
-        React__default['default'].createElement("span", { className: styles__default['default'].tagContentWrap },
-            content,
-            handleDeleteTag && (
-            // eslint-disable-next-line
-            React__default['default'].createElement("span", { className: styles__default['default'].tagCross, onClick: handleClick },
-                React__default['default'].createElement(CrossCompactMIcon.CrossCompactMIcon, null))))));
-};
-
-exports.Tag = Tag;

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

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

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

@@ -1,13 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('../../tslib.es6-ce870b46.js');
-require('react');
-require('classnames');
-require('../../../../tag/cssm');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
-require('./index.module.css');
-var components_tag_component = require('./component.js');
-
-
-
-exports.Tag = components_tag_component.Tag;

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

@@ -1,50 +0,0 @@
-.tag {
-    padding: 0;
-    padding-left: var(--gap-m);
-    margin: var(--gap-2xs);
-    cursor: default
-}
-
-.tag:active:not(:disabled) {
-        background-color: var(--tag-background-color-checked);
-        color: var(--tag-text-color-checked);
-    }
-
-.tag:hover:not(:disabled):not(:active) {
-        background-color: var(--tag-background-color-checked);
-        color: var(--tag-text-color-checked);
-    }
-
-.tag > span {
-        width: 100%;
-        height: 100%;
-    }
-
-.tagNoClose {
-    padding-right: var(--gap-m);
-}
-
-.tagContentWrap {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    cursor: pointer;
-}
-
-.tagCross {
-    padding-right: var(--gap-xs);
-    height: 100%
-}
-
-.tagCross:hover {
-        opacity: 0.7;
-    }
-
-.tagCross:active {
-        opacity: 0.5;
-    }
-
-.tagCross svg {
-        height: 100%;
-    }