@alfalab/core-components 45.5.0 → 45.6.0-beta.0

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

@@ -1,139 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var hooks = require('@alfalab/hooks');
-var utils_calculateCollapseSize = require('../../utils/calculate-collapse-size.js');
-var components_tag_component = require('../tag/component.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-var styles = {"component":"select-with-tags__component_ryhst","size-72":"select-with-tags__size-72_ryhst","contentWrapper":"select-with-tags__contentWrapper_ryhst","placeholder":"select-with-tags__placeholder_ryhst","input":"select-with-tags__input_ryhst","size-64":"select-with-tags__size-64_ryhst","size-56":"select-with-tags__size-56_ryhst","size-48":"select-with-tags__size-48_ryhst","hasInnerLabel":"select-with-tags__hasInnerLabel_ryhst","hasTags":"select-with-tags__hasTags_ryhst","addons":"select-with-tags__addons_ryhst","field":"select-with-tags__field_ryhst","disabled":"select-with-tags__disabled_ryhst","hidden":"select-with-tags__hidden_ryhst","focusVisible":"select-with-tags__focusVisible_ryhst","addons-size-56":"select-with-tags__addons-size-56_ryhst","addons-size-64":"select-with-tags__addons-size-64_ryhst","addons-size-72":"select-with-tags__addons-size-72_ryhst","label":"select-with-tags__label_ryhst"};
-require('./index.css');
-
-var SIZE_TO_CLASSNAME_MAP = {
-    s: 'size-48',
-    m: 'size-56',
-    l: 'size-64',
-    xl: 'size-72',
-    48: 'size-48',
-    56: 'size-56',
-    64: 'size-64',
-    72: 'size-72',
-};
-var TagList = function (_a) {
-    var _b, _c, _d;
-    var _e = _a.size, size = _e === void 0 ? 72 : _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; _a.valueRenderer; var onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isOpen = _a.isOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h; _a.setSelectedItems; _a.toggleMenu; var labelView = _a.labelView, _j = _a.inputRef, inputRefProp = _j === void 0 ? null : _j, FormControlComponent = _a.FormControlComponent, restProps = tslib.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isOpen", "handleUpdatePopover", "Tag", "setSelectedItems", "toggleMenu", "labelView", "inputRef", "FormControlComponent"]);
-    var _k = React.useState(false), focused = _k[0], setFocused = _k[1];
-    var _l = React.useState(false), isShowMoreEnabled = _l[0], setShowMoreEnabled = _l[1];
-    var _m = React.useState(1), visibleElements = _m[0], setVisibleElements = _m[1];
-    var _o = React.useState(false), inputOnNewLine = _o[0], setInputOnNewLine = _o[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];
-    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
-        setShowMoreEnabled(isOpen);
-    }, [isOpen]);
-    React.useEffect(function () {
-        setVisibleElements(selectedMultiple.length);
-    }, [selectedMultiple.length]);
-    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
-        if (collapseTagList && contentWrapperRef.current) {
-            var totalVisibleElements = utils_calculateCollapseSize.calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
-            setVisibleElements(totalVisibleElements);
-        }
-        handleUpdatePopover === null || handleUpdatePopover === void 0 ? void 0 : handleUpdatePopover();
-    }, [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 _p = (innerProps || {}), onClick = _p.onClick, restInnerProps = tslib.__rest(_p, ["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) {
-        if (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 "\u0415\u0449\u0451 ".concat(selectedMultiple.length - visibleElements);
-    }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
-    var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
-    var hasInnerLabel = Boolean(label) && labelView !== 'outer';
-    return (React__default.default.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn__default.default(className, styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]]) },
-        React__default.default.createElement(FormControlComponent, tslib.__assign({}, restProps, { ref: innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles.field, (_b = {},
-                _b[styles.focusVisible] = focusVisible,
-                _b[styles.disabled] = disabled,
-                _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default.default(styles.addons, styles["addons-".concat(SIZE_TO_CLASSNAME_MAP[size])]), label: label, labelClassName: styles.label, labelView: labelView }),
-            React__default.default.createElement("div", { className: cn__default.default(styles.contentWrapper, (_c = {},
-                    _c[styles.hasInnerLabel] = hasInnerLabel,
-                    _c[styles.hasTags] = selectedMultiple.length > 0,
-                    _c)), ref: contentWrapperRef },
-                selectedMultiple.map(function (option, index) {
-                    return (collapseTagList && isShowMoreEnabled) || index + 1 <= visibleElements ? (React__default.default.createElement(Tag, { checked: true, disabled: disabled, option: tslib.__assign(tslib.__assign({}, option), { content: transformTagText
-                                ? transformTagText(option.content)
-                                : option.content }), key: option.key, handleDeleteTag: disabled ? undefined : handleDeleteTag })) : null;
-                }),
-                collapseTagList && visibleElements < selectedMultiple.length && (React__default.default.createElement(Tag, { disabled: disabled, "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, view: 'filled', option: {
-                        key: 'collapse',
-                        content: collapseTagTitle,
-                    } })),
-                autocomplete && (React__default.default.createElement("input", tslib.__assign({}, restInnerProps, { autoComplete: 'off', ref: mergeRefs__default.default([inputRef, inputRefProp]), value: value, onChange: onInput, className: cn__default.default(styles.input, (_d = {},
-                        _d[styles.focusVisible] = inputFocusVisible,
-                        _d[styles.hidden] = !isOpen && selectedMultiple.length > 0,
-                        _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),
-                placeholder && !filled && !autocomplete && (React__default.default.createElement("span", { className: styles.placeholder }, placeholder))))));
-};
-
-exports.TagList = TagList;

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

@@ -1,132 +0,0 @@
-/* hash: izto6 */
-:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-text-primary: #0e0e0e;
-    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
-    --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root {
-} :root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-} :root {
-} :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-} :root {
-} :root {
-    --focus-color: var(--color-light-border-link);
-    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-} .select-with-tags__component_ryhst.select-with-tags__size-72_ryhst .select-with-tags__contentWrapper_ryhst {
-        padding: 18px 14px;
-    } .select-with-tags__component_ryhst.select-with-tags__size-72_ryhst .select-with-tags__placeholder_ryhst {
-        padding-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-72_ryhst .select-with-tags__input_ryhst {
-        margin-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-64_ryhst .select-with-tags__contentWrapper_ryhst {
-        padding: 14px 10px;
-    } .select-with-tags__component_ryhst.select-with-tags__size-64_ryhst .select-with-tags__placeholder_ryhst {
-        padding-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-64_ryhst .select-with-tags__input_ryhst {
-        margin-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-56_ryhst .select-with-tags__contentWrapper_ryhst {
-        padding: 10px;
-    } .select-with-tags__component_ryhst.select-with-tags__size-56_ryhst .select-with-tags__placeholder_ryhst {
-        padding-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-56_ryhst .select-with-tags__input_ryhst {
-        margin-left: var(--gap-3xs);
-    } .select-with-tags__component_ryhst.select-with-tags__size-48_ryhst .select-with-tags__contentWrapper_ryhst {
-        padding: 6px;
-    } .select-with-tags__component_ryhst.select-with-tags__size-48_ryhst .select-with-tags__placeholder_ryhst {
-        padding-left: 6px;
-    } .select-with-tags__component_ryhst.select-with-tags__size-48_ryhst .select-with-tags__input_ryhst {
-        margin-left: 6px;
-    } .select-with-tags__component_ryhst .select-with-tags__contentWrapper_ryhst {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%
-} .select-with-tags__component_ryhst .select-with-tags__contentWrapper_ryhst.select-with-tags__hasInnerLabel_ryhst {
-        margin-top: var(--gap-xs);
-        padding-bottom: var(--gap-xs);
-    } .select-with-tags__component_ryhst .select-with-tags__contentWrapper_ryhst.select-with-tags__hasTags_ryhst.select-with-tags__hasInnerLabel_ryhst {
-        margin-top: var(--gap-m);
-        padding-bottom: var(--gap-s);
-    } .select-with-tags__component_ryhst:hover .select-with-tags__addons_ryhst {
-    opacity: 0.7;
-} .select-with-tags__field_ryhst {
-    cursor: pointer;
-} .select-with-tags__disabled_ryhst {
-    cursor: not-allowed;
-} .select-with-tags__input_ryhst {
-    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)
-} .select-with-tags__input_ryhst:disabled,
-    .select-with-tags__input_ryhst:disabled::placeholder {
-        color: var(--color-light-text-tertiary);
-    } .select-with-tags__input_ryhst::placeholder {
-        color: var(--color-light-text-secondary);
-    } .select-with-tags__input_ryhst:focus::placeholder {
-        color: var(--color-light-text-tertiary);
-    } .select-with-tags__hidden_ryhst {
-    max-height: 0;
-    margin: 0;
-} .select-with-tags__focusVisible_ryhst {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-} .select-with-tags__placeholder_ryhst {
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    padding-left: var(--gap-2xs);
-    color: var(--color-light-text-secondary);
-    pointer-events: none;
-} .select-with-tags__addons_ryhst {
-    align-self: flex-start;
-    padding-top: var(--gap-s);
-} .select-with-tags__addons-size-56_ryhst {
-    padding-top: var(--gap-m);
-} .select-with-tags__addons-size-64_ryhst {
-    padding-top: var(--gap-l);
-} .select-with-tags__addons-size-72_ryhst {
-    padding-top: var(--gap-xl);
-} .select-with-tags__component_ryhst.select-with-tags__size-48_ryhst .select-with-tags__label_ryhst {
-    top: 5px;
-    left: 12px;
-} .select-with-tags__component_ryhst.select-with-tags__size-56_ryhst .select-with-tags__label_ryhst {
-    top: 8px;
-    left: 12px;
-} .select-with-tags__component_ryhst.select-with-tags__size-64_ryhst.select-with-tags__label_ryhst {
-    top: 10px;
-    left: 16px;
-} .select-with-tags__component_ryhst.select-with-tags__size-72_ryhst .select-with-tags__label_ryhst {
-    top: 14px;
-    left: 16px;
-} .select-with-tags__component_ryhst .select-with-tags__label_ryhst {
-    top: 14px;
-    align-items: flex-start;
-    height: auto;
-    transform: none;
-    font-size: 14px;
-}

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

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

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

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_tagList_component = require('./component.js');
-
-
-
-exports.TagList = components_tagList_component.TagList;

package/select-with-tags/cssm/Component.responsive.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SelectWithTags: React.ForwardRefExoticComponent<Omit<import("../../select/typings").BaseSelectProps, "onChange" | "selected" | "multiple" | "autocomplete" | "nativeSelect" | "Field"> & {
-    value: string;
-    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    selected?: (string | import("../../select/typings").OptionShape)[] | undefined;
-    onChange?: ((payload: {
-        selectedMultiple: (string | import("../../select/typings").OptionShape)[];
-        initiator?: import("../../select/typings").OptionShape | null | undefined;
-        name?: string | undefined;
-    }) => void) | undefined;
-    autocomplete?: boolean | undefined;
-    match?: import("./types").OptionMatcher | undefined;
-    Tag?: import("./types").TagComponent | undefined;
-    collapseTagList?: boolean | undefined;
-    moveInputToNewLine?: boolean | undefined;
-    transformCollapsedTagText?: ((collapsedCount: number) => string) | undefined;
-    transformTagText?: ((tagText?: React.ReactNode) => React.ReactNode) | undefined;
-    breakpoint?: number | undefined;
-    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { SelectWithTags };

package/select-with-tags/cssm/Component.responsive.js

@@ -1,22 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var coreComponentsBottomSheet = require('../../bottom-sheet/cssm');
-var desktop = require('../../form-control/cssm/desktop');
-var mobile = require('../../form-control/cssm/mobile');
-var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsPopover = require('../../popover/cssm');
-var components_baseSelectWithTags_Component = require('./components/base-select-with-tags/Component.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var SelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
-    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
-    return (React__default.default.createElement(components_baseSelectWithTags_Component.BaseSelectWithTags, tslib.__assign({}, restProps, { ref: ref, view: isDesktop ? 'desktop' : 'mobile', Popover: coreComponentsPopover.Popover, BottomSheet: coreComponentsBottomSheet.BottomSheet, FormControlComponent: isDesktop ? desktop.FormControlDesktop : mobile.FormControlMobile })));
-});
-
-exports.SelectWithTags = SelectWithTags;

package/select-with-tags/cssm/components/base-select-with-tags/Component.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ForwardRefExoticComponent } from "react";
-import { BottomSheetProps } from "../../../../bottom-sheet";
-import { FormControlProps } from "../../../../form-control";
-import { PopoverProps } from "../../../../popover";
-import { BaseSelectProps, OptionShape } from "../../../../select/shared";
-declare const BaseSelectWithTags: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onChange" | "selected" | "multiple" | "autocomplete" | "nativeSelect" | "Field"> & {
-    value: string;
-    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    selected?: (string | OptionShape)[] | undefined;
-    onChange?: ((payload: {
-        selectedMultiple: (string | OptionShape)[];
-        initiator?: OptionShape | null | undefined;
-        name?: string | undefined;
-    }) => void) | undefined;
-    autocomplete?: boolean | undefined;
-    match?: import("../../types").OptionMatcher | undefined;
-    Tag?: import("../../types").TagComponent | undefined;
-    collapseTagList?: boolean | undefined;
-    moveInputToNewLine?: boolean | undefined;
-    transformCollapsedTagText?: ((collapsedCount: number) => string) | undefined;
-    transformTagText?: ((tagText?: React.ReactNode) => React.ReactNode) | undefined;
-    breakpoint?: number | undefined;
-    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
-} & {
-    view: 'mobile' | 'desktop';
-    FormControlComponent: ForwardRefExoticComponent<FormControlProps>;
-    Popover?: React.ForwardRefExoticComponent<PopoverProps> | undefined;
-    BottomSheet?: React.ForwardRefExoticComponent<BottomSheetProps> | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { BaseSelectWithTags };

package/select-with-tags/cssm/components/base-select-with-tags/Component.js

@@ -1,108 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var shared = require('../../../../select/cssm/shared');
-var utils_match = require('../../utils/match.js');
-var components_tagList_component = require('../tag-list/component.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-
-var BaseSelectWithTags = React.forwardRef(function (_a, ref) {
-    var _b = _a.OptionsList, OptionsList = _b === void 0 ? shared.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? shared.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? shared.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? shared.Arrow : _e, value = _a.value, selectedProp = _a.selected, _f = _a.size, size = _f === void 0 ? 72 : _f, onOpen = _a.onOpen, 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, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, view = _a.view, FormControlComponent = _a.FormControlComponent, dataTestId = _a.dataTestId, openProp = _a.open, searchProps = _a.searchProps, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag", "view", "FormControlComponent", "dataTestId", "open", "searchProps"]);
-    var controlled = Boolean(selectedProp);
-    var _l = React.useState(selectedProp || []), selectedTags = _l[0], setSelectedTags = _l[1];
-    var _m = React.useState(false), open = _m[0], setOpen = _m[1];
-    var updatePopover = React.useRef(function () { return null; });
-    var inputRef = React.useRef(null);
-    var frozenValue = React.useRef([]);
-    var selected = selectedProp || selectedTags;
-    var isAutocomplete = autocomplete || Boolean(match);
-    var resetValue = function () {
-        if (value) {
-            var event_1 = { target: { value: '' } };
-            onInput(event_1);
-        }
-    };
-    var handleUpdatePopover = React.useCallback(function () {
-        if (updatePopover && updatePopover.current) {
-            requestAnimationFrame(function () { var _a; return (_a = updatePopover.current) === null || _a === void 0 ? void 0 : _a.call(updatePopover); });
-        }
-    }, []);
-    var updateSelectedTags = function (payload) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(payload);
-        if (!controlled) {
-            setSelectedTags(payload.selectedMultiple);
-        }
-    };
-    var handleDeleteTag = function (deletedKey) {
-        var tags = selected.filter(function (tag) {
-            var key = typeof tag === 'string' ? tag : tag.key;
-            return deletedKey !== key;
-        });
-        updateSelectedTags({ selectedMultiple: tags });
-    };
-    var handleChange = function (payload) {
-        updateSelectedTags(payload);
-        resetValue();
-    };
-    var handleOpen = function (payload) {
-        var isOpen = payload.open;
-        if (isOpen) {
-            frozenValue.current = selected;
-        }
-        else {
-            resetValue();
-        }
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen(payload);
-        setOpen(isOpen);
-    };
-    var filteredOptions = React.useMemo(function () { return utils_match.filterOptions(options, value, match); }, [options, value, match]);
-    var isOpen = Boolean(openProp !== null && openProp !== void 0 ? openProp : open);
-    return (React__default.default.createElement(shared.BaseSelect, tslib.__assign({}, restProps, { open: isOpen, dataTestId: dataTestId, view: view, ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: tslib.__assign({ value: value, isOpen: isOpen, autocomplete: view === 'desktop' && isAutocomplete, onInput: onInput, handleDeleteTag: handleDeleteTag, Tag: Tag, collapseTagList: collapseTagList, moveInputToNewLine: moveInputToNewLine, transformCollapsedTagText: transformCollapsedTagText, transformTagText: transformTagText, handleUpdatePopover: handleUpdatePopover, FormControlComponent: FormControlComponent }, (view === 'mobile' && isOpen
-            ? { selectedMultiple: frozenValue.current }
-            : null)), selected: selected, autocomplete: view === 'desktop' && isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen }, (view === 'mobile'
-        ? (function () {
-            var _a;
-            var handleApply = function () {
-                setOpen(false);
-                resetValue();
-            };
-            var handleClear = function () {
-                setOpen(false);
-                updateSelectedTags({ selectedMultiple: [] });
-                resetValue();
-            };
-            var handleClose = function () {
-                updateSelectedTags({ selectedMultiple: frozenValue.current });
-            };
-            var handleOptionsListTouchMove = function () {
-                var input = inputRef.current;
-                if (input && document.activeElement === input) {
-                    input.blur();
-                }
-            };
-            return {
-                showSearch: isAutocomplete,
-                Search: shared.Search,
-                searchProps: tslib.__assign(tslib.__assign({ filterFn: function () { return true; } }, searchProps), { value: value, componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, clear: true, onClear: resetValue }, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps), { ref: mergeRefs__default.default([
-                            inputRef,
-                            (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.ref,
-                        ]), onChange: onInput }) }),
-                bottomSheetProps: {
-                    onClose: handleClose,
-                    containerProps: {
-                        onTouchMove: handleOptionsListTouchMove,
-                    },
-                },
-                optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleClear, handleApply: handleApply, dataTestId: dataTestId })) }, restProps.optionsListProps),
-            };
-        })()
-        : null))));
-});
-
-exports.BaseSelectWithTags = BaseSelectWithTags;

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

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

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

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_baseSelectWithTags_Component = require('./Component.js');
-
-
-
-exports.BaseSelectWithTags = components_baseSelectWithTags_Component.BaseSelectWithTags;

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 = require('tslib');
-var React = require('react');
-var cn = require('classnames');
-var desktop = require('../../../../tag/cssm/desktop');
-var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var Tag = function (_a) {
-    var _b, _c;
-    var _d = _a.option, content = _d.content, key = _d.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, checked = _a.checked, disabled = _a.disabled, props = tslib.__rest(_a, ["option", "onClick", "handleDeleteTag", "checked", "disabled"]);
-    var handleClick = React.useCallback(function () {
-        if (handleDeleteTag) {
-            handleDeleteTag(key);
-        }
-    }, [handleDeleteTag, key]);
-    return (React__default.default.createElement(desktop.TagDesktop, tslib.__assign({ key: key, size: 32, shape: 'rectangular', onClick: onClick, checked: checked, className: cn__default.default(styles__default.default.tag, (_b = {}, _b[styles__default.default.tagNoClose] = !handleDeleteTag, _b)), disabled: disabled }, props),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.tagContentWrap, (_c = {}, _c[styles__default.default.cursorPointer] = !disabled, _c)) },
-            content,
-            handleDeleteTag && (
-            // eslint-disable-next-line
-            React__default.default.createElement("span", { className: styles__default.default.tagCross, onClick: handleClick },
-                React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { width: 16, height: 16 }))))));
-};
-
-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,7 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_tag_component = require('./component.js');
-
-
-
-exports.Tag = components_tag_component.Tag;

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

@@ -1,87 +0,0 @@
-:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root {
-    --color-light-accent-secondary: #0e0e0e;
-    --color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
-    --color-light-neutral-translucent-700-inverted-hover: rgba(239, 240, 252, 0.65);
-    --color-light-neutral-translucent-700-inverted-press: rgba(243, 245, 254, 0.75);
-    --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :root {
-} :root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-} :root {
-} :root {
-    --gap-3xs: 2px;
-    --gap-xs: 8px;
-} :root {
-} :root {
-} :root {
-    /* border */
-
-    /* background-color outlined */
-
-    /* background-color filled */
-
-    /* background-color checked */
-    --tag-background-color-checked: var(--color-light-accent-secondary);
-
-    /* text color */
-    --tag-text-color-checked: var(--color-light-text-primary-inverted);
-
-    /* inverted */
-
-    /* border */
-
-    /* background-color outlined */
-
-    /* background-color filled */
-
-    /* background-color checked */
-
-    /* text color */
-
-    /* mobile */
-
-    /* mobile inverted */
-} .tag {
-    padding: 0 0 0 var(--gap-xs);
-    margin: var(--gap-3xs);
-    cursor: default
-} .tag:not(.tagNoClose):active:not(:disabled) {
-        background-color: var(--tag-background-color-checked);
-        color: var(--tag-text-color-checked);
-    } .tag:not(.tagNoClose):hover:not(:disabled):not(:active) {
-        background-color: var(--tag-background-color-checked);
-        color: var(--tag-text-color-checked);
-    } .tag > span {
-        width: 100%;
-        height: 100%;
-    } .tag.tag {
-    min-width: unset;
-} .tagNoClose {
-    padding-right: var(--gap-xs);
-    padding-left: var(--gap-xs);
-} .tagContentWrap {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-} .cursorPointer {
-    cursor: pointer;
-} .tagCross {
-    padding: 0 6px;
-    height: 100%
-} .tagCross > svg {
-        fill: var(--color-light-neutral-translucent-700-inverted);
-    } .tagCross:hover > svg {
-        fill: var(--color-light-neutral-translucent-700-inverted-hover);
-    } .tagCross:active > svg {
-        fill: var(--color-light-neutral-translucent-700-inverted-press);
-    } .tagCross svg {
-        height: 100%;
-    }