@weavix/tracker-components 0.0.1

package/build/esm/components/Select/Select.scss

@@ -0,0 +1,180 @@
+$arrowIconSpace: 25px;
+
+.tpc-select {
+    &__button {
+        vertical-align: text-bottom;
+
+        &_error::before {
+            --_--focus-outline-color: var(--g-color-line-danger);
+            border-color: var(--g-color-line-danger);
+        }
+
+        &:not(.tpc-select__button_with-icon) {
+            &.tpc-select__button_empty {
+                color: var(--g-color-text-hint);
+            }
+        }
+
+        &:not(.tpc-select__button_loading) {
+            justify-content: space-between;
+        }
+
+        &:disabled {
+            color: var(--g-color-text-hint);
+        }
+
+        &_clear {
+            padding: 0;
+
+            .g-button__icon_side_end {
+                margin: 0;
+            }
+        }
+
+        &_loading.g-button_width_max {
+            justify-content: space-between;
+
+            .g-button__text {
+                margin: auto;
+            }
+        }
+
+        &_platform {
+            &_desktop {
+                .tpc-select__chevron_open {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
+    &__loader {
+        vertical-align: middle;
+    }
+
+    &__items-loader {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__option {
+        display: inline-block;
+
+        width: 100%;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &_disabled {
+            cursor: default;
+
+            color: var(--g-color-text-secondary);
+        }
+    }
+
+    &__no-options {
+        justify-content: center;
+    }
+
+    &__popup {
+        .g-select-list__group-label-content {
+            color: var(--g-color-text-hint);
+        }
+
+        .tpc-select__filter {
+            width: auto;
+            padding: var(--g-spacing-1) var(--g-spacing-1) 0;
+        }
+    }
+
+    &__button-wrapper {
+        width: 100%;
+    }
+
+    &__popup_mobile {
+        --suggest-offset: 230px;
+
+        .tpc-select__filter {
+            width: auto;
+            padding: 0 var(--g-spacing-5);
+            margin-bottom: var(--g-spacing-2);
+        }
+
+        .g-sheet__sheet-content {
+            display: flex;
+            flex-direction: column;
+
+            padding: 0;
+
+            > div:not([class]) {
+                display: flex;
+                flex-direction: column;
+
+                flex: auto;
+                width: 100%;
+                min-height: 0;
+            }
+
+            .g-select-filter {
+                flex: none;
+            }
+
+            .g-select-list_mobile {
+                flex: auto;
+            }
+        }
+
+        .g-select-list__option {
+            padding: var(--g-spacing-2) var(--g-spacing-4);
+        }
+
+        .g-select-list__group-label-content {
+            font-weight: inherit;
+        }
+
+        .g-select-list_mobile .g-select-list__group-label:not(.g-select-list__group-label_empty) {
+            height: auto;
+        }
+
+        .g-select-list__item:has(.g-select-list__group-label) {
+            margin-top: var(--g-spacing-2);
+        }
+
+        .g-select-list__item:not(:first-child) .g-select-list__group-label::before {
+            right: var(--g-spacing-3);
+            left: var(--g-spacing-3);
+
+            width: auto;
+        }
+
+        &.tpc-select__popup_filterable {
+            .g-sheet__sheet-content {
+                height: calc(100dvh - var(--suggest-offset));
+            }
+        }
+    }
+
+    &__popup:not(.tpc-select__popup_mobile) {
+        &.tpc-select__popup_with-groups {
+            .g-select-list__option {
+                padding-left: var(--g-spacing-4);
+            }
+        }
+
+        .g-select-list {
+            // override Select styles
+            /* stylelint-disable-next-line declaration-no-important */
+            max-height: 40vh !important;
+        }
+    }
+
+    &__title {
+        &_platform_touch {
+            padding-top: var(--g-spacing-3);
+            padding-bottom: var(--g-spacing-3);
+            margin: auto;
+        }
+    }
+}

package/build/esm/components/Select/SelectSearch/SelectSearch.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnSelectSearch: import("@bem-react/classname").ClassNameFormatter;

package/build/esm/components/Select/SelectSearch/SelectSearch.classname.js

@@ -0,0 +1,3 @@
+import { block } from "../../cn";
+export var cnSelectSearch = block('select-search');
+// #sourceMappingURL=SelectSearch.classname.js.map

package/build/esm/components/Select/SelectSearch/SelectSearch.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["block","cnSelectSearch"],"sources":["SelectSearch.classname.ts"],"sourcesContent":["import {block} from '../../cn';\n\nexport const cnSelectSearch = block('select-search');\n"],"mappings":"AAAA,SAAQA,KAAK;AAEb,OAAO,IAAMC,cAAc,GAAGD,KAAK,CAAC,eAAe,CAAC","ignoreList":[]}

package/build/esm/components/Select/SelectSearch/SelectSearch.css

@@ -0,0 +1,50 @@
+.tpc-select-search__suggest {
+  width: 100%;
+  max-width: 100%;
+}
+.tpc-select-search__suggest_mode_tags {
+  margin-bottom: var(--g-spacing-2);
+}
+.tpc-select-search__popup {
+  padding: var(--g-spacing-1) 0;
+}
+.tpc-select-search__option {
+  display: flex;
+  gap: var(--g-spacing-2);
+  align-items: center;
+  padding: var(--g-spacing-2) var(--g-spacing-1);
+}
+.tpc-select-search__option:hover {
+  background-color: var(--g-color-base-neutral-light);
+}
+.tpc-select-search__option_disabled {
+  cursor: not-allowed;
+  background-color: var(--g-color-base-neutral-light);
+}
+.tpc-select-search__option path {
+  fill: var(--g-color-private-blue-400);
+}
+.tpc-select-search__selected-icon {
+  visibility: hidden;
+}
+.tpc-select-search__selected-icon_active {
+  visibility: visible;
+}
+.tpc-select-search__selected-icon_active path {
+  fill: var(--g-color-private-blue-400);
+}
+.tpc-select-search__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-2);
+  width: 100%;
+  max-width: inherit;
+}
+.tpc-select-search__tag {
+  min-width: 0;
+}
+.tpc-select-search__tag .g-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/*# sourceMappingURL=SelectSearch.css.map */

package/build/esm/components/Select/SelectSearch/SelectSearch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SelectSearch.scss"],"names":[],"mappings":"AACI;EACI,WAAA;EACA,eAAA;AAAR;AAEQ;EACI,iCAAA;AAAZ;AAII;EACI,6BAAA;AAFR;AAKI;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EAEA,8CAAA;AAJR;AAMQ;EACI,mDAAA;AAJZ;AAOQ;EACI,mBAAA;EAEA,mDAAA;AANZ;AASQ;EACI,qCAAA;AAPZ;AAWI;EACI,kBAAA;AATR;AAWQ;EACI,mBAAA;AATZ;AAWY;EACI,qCAAA;AAThB;AAcI;EACI,aAAA;EACA,eAAA;EACA,uBAAA;EAEA,WAAA;EACA,kBAAA;AAbR;AAgBI;EACI,YAAA;AAdR;AAgBQ;EACI,gBAAA;EAEA,uBAAA;AAfZ","file":"SelectSearch.css","sourcesContent":[".tpc-select-search {\n    &__suggest {\n        width: 100%;\n        max-width: 100%;\n\n        &_mode_tags {\n            margin-bottom: var(--g-spacing-2);\n        }\n    }\n\n    &__popup {\n        padding: var(--g-spacing-1) 0;\n    }\n\n    &__option {\n        display: flex;\n        gap: var(--g-spacing-2);\n        align-items: center;\n\n        padding: var(--g-spacing-2) var(--g-spacing-1);\n\n        &:hover {\n            background-color: var(--g-color-base-neutral-light);\n        }\n\n        &_disabled {\n            cursor: not-allowed;\n\n            background-color: var(--g-color-base-neutral-light);\n        }\n\n        path {\n            fill: var(--g-color-private-blue-400);\n        }\n    }\n\n    &__selected-icon {\n        visibility: hidden;\n\n        &_active {\n            visibility: visible;\n\n            path {\n                fill: var(--g-color-private-blue-400);\n            }\n        }\n    }\n\n    &__tags {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--g-spacing-2);\n\n        width: 100%;\n        max-width: inherit;\n    }\n\n    &__tag {\n        min-width: 0;\n\n        .g-label__content {\n            overflow: hidden;\n\n            text-overflow: ellipsis;\n        }\n    }\n}\n"],"sourceRoot":""}

package/build/esm/components/Select/SelectSearch/SelectSearch.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { SuggestProps } from '@yandex-data-ui/common';
+import type { Option } from './types';
+import './SelectSearch.scss';
+export type SelectSearchProps<V = string> = SuggestProps & {
+    className?: string;
+    mode?: 'tags';
+    /** Max tag count to show */
+    maxTagCount?: number;
+    /** Customize tag render, only applies when mode is set to multiple or tags */
+    tagRender?: (option: Option<V>) => ReactNode;
+    /** Called when an option is deselected, param is the selected option's value. Only called for tags */
+    onDeselect?: (value: V) => void;
+    /** Current selected option */
+    values: Option<V>[];
+};
+declare const SelectSearchInternal: <V>({ className, mode, values, maxTagCount, inputClassName, popupClassName, tagRender, onDeselect, renderItem: customRenderItem, ...suggestProps }: SelectSearchProps<V>) => React.JSX.Element;
+export declare const SelectSearch: typeof SelectSearchInternal;
+export {};

package/build/esm/components/Select/SelectSearch/SelectSearch.js

@@ -0,0 +1,55 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "mode", "values", "maxTagCount", "inputClassName", "popupClassName", "tagRender", "onDeselect", "renderItem"];
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { memo } from 'react';
+import { Suggest } from '@yandex-data-ui/common';
+import { TagsList } from "../TagsList/TagsList";
+import { cnSelectSearch } from "./SelectSearch.classname";
+import { useSelectSearch } from "./hooks/useSelectSearch";
+import "./SelectSearch.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SelectSearchInternal = function SelectSearchInternal(_ref) {
+  var className = _ref.className,
+    mode = _ref.mode,
+    values = _ref.values,
+    maxTagCount = _ref.maxTagCount,
+    inputClassName = _ref.inputClassName,
+    popupClassName = _ref.popupClassName,
+    tagRender = _ref.tagRender,
+    onDeselect = _ref.onDeselect,
+    customRenderItem = _ref.renderItem,
+    suggestProps = _objectWithoutProperties(_ref, _excluded);
+  var _useSelectSearch = useSelectSearch({
+      values: values,
+      customRenderItem: customRenderItem
+    }),
+    renderItem = _useSelectSearch.renderItem;
+  var withTags = mode === 'tags' && (Boolean(onDeselect) || Boolean(tagRender));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cnSelectSearch(null, className),
+    children: [/*#__PURE__*/_jsx(Suggest, _objectSpread(_objectSpread({
+      autoComplete: false,
+      renderItem: renderItem
+    }, suggestProps), {}, {
+      inputClassName: cnSelectSearch('suggest', _defineProperty({}, 'mode_tags', values.length > 0), inputClassName),
+      popupClassName: cnSelectSearch('popup', popupClassName)
+    })), withTags && /*#__PURE__*/_jsx("div", {
+      className: cnSelectSearch('tags'),
+      children: /*#__PURE__*/_jsx(TagsList, {
+        values: values,
+        maxTagCount: maxTagCount,
+        renderTag: tagRender,
+        onDeselect: onDeselect,
+        tagTheme: "normal",
+        tagClassName: cnSelectSearch('tag'),
+        tagSize: "xs"
+      })
+    })]
+  });
+};
+export var SelectSearch = /*#__PURE__*/memo(SelectSearchInternal);
+// #sourceMappingURL=SelectSearch.js.map

package/build/esm/components/Select/SelectSearch/SelectSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Suggest","TagsList","cnSelectSearch","useSelectSearch","jsx","_jsx","jsxs","_jsxs","SelectSearchInternal","_ref","className","mode","values","maxTagCount","inputClassName","popupClassName","tagRender","onDeselect","customRenderItem","renderItem","suggestProps","_objectWithoutProperties","_excluded","_useSelectSearch","withTags","Boolean","children","_objectSpread","autoComplete","_defineProperty","length","renderTag","tagTheme","tagClassName","tagSize","SelectSearch"],"sources":["SelectSearch.tsx"],"sourcesContent":["import React, {memo} from 'react';\nimport type {ReactNode} from 'react';\n\nimport {Suggest} from '@yandex-data-ui/common';\nimport type {SuggestProps} from '@yandex-data-ui/common';\n\nimport {TagsList} from '../TagsList/TagsList';\n\nimport {cnSelectSearch} from './SelectSearch.classname';\nimport {useSelectSearch} from './hooks/useSelectSearch';\nimport type {Option} from './types';\n\nimport './SelectSearch.scss';\n\nexport type SelectSearchProps<V = string> = SuggestProps & {\n    className?: string;\n    mode?: 'tags';\n    /** Max tag count to show */\n    maxTagCount?: number;\n    /** Customize tag render, only applies when mode is set to multiple or tags */\n    tagRender?: (option: Option<V>) => ReactNode;\n    /** Called when an option is deselected, param is the selected option's value. Only called for tags */\n    onDeselect?: (value: V) => void;\n    /** Current selected option */\n    values: Option<V>[];\n};\n\nconst SelectSearchInternal = <V,>({\n    className,\n    mode,\n    values,\n    maxTagCount,\n    inputClassName,\n    popupClassName,\n    tagRender,\n    onDeselect,\n    renderItem: customRenderItem,\n    ...suggestProps\n}: SelectSearchProps<V>) => {\n    const {renderItem} = useSelectSearch({values, customRenderItem});\n    const withTags = mode === 'tags' && (Boolean(onDeselect) || Boolean(tagRender));\n\n    return (\n        <div className={cnSelectSearch(null, className)}>\n            {/*@ts-expect-error*/}\n            <Suggest\n                autoComplete={false}\n                renderItem={renderItem}\n                {...suggestProps}\n                inputClassName={cnSelectSearch(\n                    'suggest',\n                    {['mode_tags']: values.length > 0},\n                    inputClassName,\n                )}\n                popupClassName={cnSelectSearch('popup', popupClassName)}\n            />\n            {withTags && (\n                <div className={cnSelectSearch('tags')}>\n                    <TagsList<V>\n                        values={values}\n                        maxTagCount={maxTagCount}\n                        renderTag={tagRender}\n                        onDeselect={onDeselect!}\n                        tagTheme=\"normal\"\n                        tagClassName={cnSelectSearch('tag')}\n                        tagSize=\"xs\"\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const SelectSearch = memo(SelectSearchInternal) as typeof SelectSearchInternal;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAGC,IAAI,QAAO,OAAO;AAGjC,SAAQC,OAAO,QAAO,wBAAwB;AAG9C,SAAQC,QAAQ;AAEhB,SAAQC,cAAc;AACtB,SAAQC,eAAe;AAGvB;AAA6B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAe7B,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAWE;EAAA,IAVxBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,cAAc,GAAAN,IAAA,CAAdM,cAAc;IACdC,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACEC,gBAAgB,GAAAT,IAAA,CAA5BU,UAAU;IACPC,YAAY,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAEf,IAAAC,gBAAA,GAAqBpB,eAAe,CAAC;MAACS,MAAM,EAANA,MAAM;MAAEM,gBAAgB,EAAhBA;IAAgB,CAAC,CAAC;IAAzDC,UAAU,GAAAI,gBAAA,CAAVJ,UAAU;EACjB,IAAMK,QAAQ,GAAGb,IAAI,KAAK,MAAM,KAAKc,OAAO,CAACR,UAAU,CAAC,IAAIQ,OAAO,CAACT,SAAS,CAAC,CAAC;EAE/E,oBACIT,KAAA;IAAKG,SAAS,EAAER,cAAc,CAAC,IAAI,EAAEQ,SAAS,CAAE;IAAAgB,QAAA,gBAE5CrB,IAAA,CAACL,OAAO,EAAA2B,aAAA,CAAAA,aAAA;MACJC,YAAY,EAAE,KAAM;MACpBT,UAAU,EAAEA;IAAW,GACnBC,YAAY;MAChBN,cAAc,EAAEZ,cAAc,CAC1B,SAAS,EAAA2B,eAAA,KACP,WAAW,EAAGjB,MAAM,CAACkB,MAAM,GAAG,CAAC,GACjChB,cACJ,CAAE;MACFC,cAAc,EAAEb,cAAc,CAAC,OAAO,EAAEa,cAAc;IAAE,EAC3D,CAAC,EACDS,QAAQ,iBACLnB,IAAA;MAAKK,SAAS,EAAER,cAAc,CAAC,MAAM,CAAE;MAAAwB,QAAA,eACnCrB,IAAA,CAACJ,QAAQ;QACLW,MAAM,EAAEA,MAAO;QACfC,WAAW,EAAEA,WAAY;QACzBkB,SAAS,EAAEf,SAAU;QACrBC,UAAU,EAAEA,UAAY;QACxBe,QAAQ,EAAC,QAAQ;QACjBC,YAAY,EAAE/B,cAAc,CAAC,KAAK,CAAE;QACpCgC,OAAO,EAAC;MAAI,CACf;IAAC,CACD,CACR;EAAA,CACA,CAAC;AAEd,CAAC;AAED,OAAO,IAAMC,YAAY,gBAAGpC,IAAI,CAACS,oBAAoB,CAAgC","ignoreList":[]}

package/build/esm/components/Select/SelectSearch/SelectSearch.scss

@@ -0,0 +1,67 @@
+.tpc-select-search {
+    &__suggest {
+        width: 100%;
+        max-width: 100%;
+
+        &_mode_tags {
+            margin-bottom: var(--g-spacing-2);
+        }
+    }
+
+    &__popup {
+        padding: var(--g-spacing-1) 0;
+    }
+
+    &__option {
+        display: flex;
+        gap: var(--g-spacing-2);
+        align-items: center;
+
+        padding: var(--g-spacing-2) var(--g-spacing-1);
+
+        &:hover {
+            background-color: var(--g-color-base-neutral-light);
+        }
+
+        &_disabled {
+            cursor: not-allowed;
+
+            background-color: var(--g-color-base-neutral-light);
+        }
+
+        path {
+            fill: var(--g-color-private-blue-400);
+        }
+    }
+
+    &__selected-icon {
+        visibility: hidden;
+
+        &_active {
+            visibility: visible;
+
+            path {
+                fill: var(--g-color-private-blue-400);
+            }
+        }
+    }
+
+    &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--g-spacing-2);
+
+        width: 100%;
+        max-width: inherit;
+    }
+
+    &__tag {
+        min-width: 0;
+
+        .g-label__content {
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+        }
+    }
+}

package/build/esm/components/Select/SelectSearch/hooks/useSelectSearch.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SuggestProps } from '@yandex-data-ui/common';
+import type { Option } from '../types';
+export type UseSelectSearchProps<V> = {
+    customRenderItem?: SuggestProps['renderItem'];
+    values: Option<V>[];
+};
+export declare const useSelectSearch: <V>({ values, customRenderItem }: UseSelectSearchProps<V>) => {
+    textInputRef: React.MutableRefObject<React.RefObject<HTMLInputElement> | undefined>;
+    renderItem: ((item: any) => ReactNode) | ((option: Option<V>) => React.JSX.Element);
+};

package/build/esm/components/Select/SelectSearch/hooks/useSelectSearch.js

@@ -0,0 +1,43 @@
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.some.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useRef } from 'react';
+import { Check } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { cnSelectSearch } from "../SelectSearch.classname";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var useSelectSearch = function useSelectSearch(_ref) {
+  var values = _ref.values,
+    customRenderItem = _ref.customRenderItem;
+  var textInputRef = useRef();
+  var defaultRenderItem = useCallback(function (option) {
+    var value = option.value,
+      content = option.content,
+      disabled = option.disabled;
+    var active = values.some(function (item) {
+      return item.value === value;
+    });
+    return /*#__PURE__*/_jsxs("div", {
+      className: cnSelectSearch('option', {
+        disabled: disabled
+      }),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        className: cnSelectSearch('selected-icon', {
+          active: active
+        }),
+        data: Check,
+        size: 16
+      }), /*#__PURE__*/_jsx("span", {
+        children: content
+      })]
+    });
+  }, [values]);
+  return {
+    textInputRef: textInputRef,
+    renderItem: customRenderItem || defaultRenderItem
+  };
+};
+// #sourceMappingURL=useSelectSearch.js.map

package/build/esm/components/Select/SelectSearch/hooks/useSelectSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useRef","Check","Icon","cnSelectSearch","jsx","_jsx","jsxs","_jsxs","useSelectSearch","_ref","values","customRenderItem","textInputRef","defaultRenderItem","option","value","content","disabled","active","some","item","className","children","data","size","renderItem"],"sources":["useSelectSearch.tsx"],"sourcesContent":["import React, {useCallback, useRef} from 'react';\nimport type {RefObject} from 'react';\n\nimport {Check} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\nimport type {SuggestProps} from '@yandex-data-ui/common';\n\nimport {cnSelectSearch} from '../SelectSearch.classname';\nimport type {Option} from '../types';\n\nexport type UseSelectSearchProps<V> = {\n    customRenderItem?: SuggestProps['renderItem'];\n    values: Option<V>[];\n};\n\nexport const useSelectSearch = <V,>({values, customRenderItem}: UseSelectSearchProps<V>) => {\n    const textInputRef = useRef<RefObject<HTMLInputElement>>();\n\n    const defaultRenderItem = useCallback(\n        (option: Option<V>) => {\n            const {value, content, disabled} = option;\n            const active = values.some((item) => item.value === value);\n\n            return (\n                <div className={cnSelectSearch('option', {disabled})}>\n                    <Icon\n                        className={cnSelectSearch('selected-icon', {active})}\n                        data={Check}\n                        size={16}\n                    />\n                    <span>{content}</span>\n                </div>\n            );\n        },\n        [values],\n    );\n\n    return {\n        textInputRef,\n        renderItem: customRenderItem || defaultRenderItem,\n    };\n};\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,MAAM,QAAO,OAAO;AAGhD,SAAQC,KAAK,QAAO,mBAAmB;AACvC,SAAQC,IAAI,QAAO,mBAAmB;AAGtC,SAAQC,cAAc;AAAmC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQzD,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAAgE;EAAA,IAAvDC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,gBAAgB,GAAAF,IAAA,CAAhBE,gBAAgB;EACzD,IAAMC,YAAY,GAAGZ,MAAM,CAA8B,CAAC;EAE1D,IAAMa,iBAAiB,GAAGd,WAAW,CACjC,UAACe,MAAiB,EAAK;IACnB,IAAOC,KAAK,GAAuBD,MAAM,CAAlCC,KAAK;MAAEC,OAAO,GAAcF,MAAM,CAA3BE,OAAO;MAAEC,QAAQ,GAAIH,MAAM,CAAlBG,QAAQ;IAC/B,IAAMC,MAAM,GAAGR,MAAM,CAACS,IAAI,CAAC,UAACC,IAAI;MAAA,OAAKA,IAAI,CAACL,KAAK,KAAKA,KAAK;IAAA,EAAC;IAE1D,oBACIR,KAAA;MAAKc,SAAS,EAAElB,cAAc,CAAC,QAAQ,EAAE;QAACc,QAAQ,EAARA;MAAQ,CAAC,CAAE;MAAAK,QAAA,gBACjDjB,IAAA,CAACH,IAAI;QACDmB,SAAS,EAAElB,cAAc,CAAC,eAAe,EAAE;UAACe,MAAM,EAANA;QAAM,CAAC,CAAE;QACrDK,IAAI,EAAEtB,KAAM;QACZuB,IAAI,EAAE;MAAG,CACZ,CAAC,eACFnB,IAAA;QAAAiB,QAAA,EAAON;MAAO,CAAO,CAAC;IAAA,CACrB,CAAC;EAEd,CAAC,EACD,CAACN,MAAM,CACX,CAAC;EAED,OAAO;IACHE,YAAY,EAAZA,YAAY;IACZa,UAAU,EAAEd,gBAAgB,IAAIE;EACpC,CAAC;AACL,CAAC","ignoreList":[]}

package/build/esm/components/Select/SelectSearch/types.d.ts

@@ -0,0 +1,5 @@
+export type Option<V> = {
+    value: V;
+    content: string;
+    disabled?: boolean;
+};

package/build/esm/components/Select/SelectSearch/types.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=types.js.map

package/build/esm/components/Select/SelectSearch/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type Option<V> = {\n    value: V;\n    content: string;\n    disabled?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/components/Select/TagsList/TagsList.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { LabelProps } from '@gravity-ui/uikit';
+import type { TagOption } from './types';
+export type TagsListProps<ValueType> = {
+    maxTagCount?: number;
+    renderTag?: (option: TagOption<ValueType>) => ReactNode;
+    onDeselect: (value: ValueType) => void;
+    canDeselect?: (value: ValueType) => boolean;
+    values?: TagOption<ValueType>[];
+    tagTheme?: LabelProps['theme'];
+    tagSize?: LabelProps['size'];
+    tagClassName?: string;
+    disabled?: boolean;
+};
+export declare const TagsListInternal: <ValueType>({ values, maxTagCount, renderTag, onDeselect, tagClassName, tagTheme, tagSize, disabled, canDeselect, }: TagsListProps<ValueType>) => React.JSX.Element;
+export declare const TagsList: typeof TagsListInternal;

package/build/esm/components/Select/TagsList/TagsList.js

@@ -0,0 +1,58 @@
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { memo } from 'react';
+import { Label, getConfig } from '@gravity-ui/uikit';
+import { useLocalizedString } from "./../../../hooks/useLocalizedString";
+import { defaultMessages } from "../i18n";
+import { getTagsValues } from "./utils/getRemainingTagsOption";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export var TagsListInternal = function TagsListInternal(_ref) {
+  var values = _ref.values,
+    _ref$maxTagCount = _ref.maxTagCount,
+    maxTagCount = _ref$maxTagCount === void 0 ? 0 : _ref$maxTagCount,
+    renderTag = _ref.renderTag,
+    onDeselect = _ref.onDeselect,
+    tagClassName = _ref.tagClassName,
+    tagTheme = _ref.tagTheme,
+    tagSize = _ref.tagSize,
+    disabled = _ref.disabled,
+    canDeselect = _ref.canDeselect;
+  var config = getConfig();
+  var _useLocalizedString = useLocalizedString(defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var _getTagsValues = getTagsValues(values, maxTagCount),
+    tags = _getTagsValues.tags,
+    remainingTagOption = _getTagsValues.remainingTagOption;
+  if (renderTag) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [tags.map(renderTag), remainingTagOption && renderTag(remainingTagOption)]
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [tags.map(function (_ref2) {
+      var value = _ref2.value,
+        content = _ref2.content;
+      return /*#__PURE__*/_jsx(Label, {
+        className: tagClassName,
+        theme: tagTheme,
+        type: disabled || canDeselect && !canDeselect(value) ? 'default' : 'close',
+        size: tagSize,
+        onCloseClick: function onCloseClick() {
+          return onDeselect(value);
+        },
+        closeButtonLabel: t('label-deselect'),
+        children: content
+      }, content);
+    }), remainingTagOption && /*#__PURE__*/_jsx(Label, {
+      theme: "normal",
+      size: "xs",
+      children: remainingTagOption.content
+    })]
+  });
+};
+export var TagsList = /*#__PURE__*/memo(TagsListInternal);
+// #sourceMappingURL=TagsList.js.map

package/build/esm/components/Select/TagsList/TagsList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","Label","getConfig","useLocalizedString","defaultMessages","getTagsValues","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","TagsListInternal","_ref","values","_ref$maxTagCount","maxTagCount","renderTag","onDeselect","tagClassName","tagTheme","tagSize","disabled","canDeselect","config","_useLocalizedString","lang","t","_getTagsValues","tags","remainingTagOption","children","map","_ref2","value","content","className","theme","type","size","onCloseClick","closeButtonLabel","TagsList"],"sources":["TagsList.tsx"],"sourcesContent":["import React, {memo} from 'react';\nimport type {ReactNode} from 'react';\n\nimport type {LabelProps} from '@gravity-ui/uikit';\nimport {Label, getConfig} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {defaultMessages} from '../i18n';\n\nimport type {TagOption} from './types';\nimport {getTagsValues} from './utils/getRemainingTagsOption';\n\nexport type TagsListProps<ValueType> = {\n    maxTagCount?: number;\n    renderTag?: (option: TagOption<ValueType>) => ReactNode;\n    onDeselect: (value: ValueType) => void;\n    canDeselect?: (value: ValueType) => boolean;\n    values?: TagOption<ValueType>[];\n    tagTheme?: LabelProps['theme'];\n    tagSize?: LabelProps['size'];\n    tagClassName?: string;\n    disabled?: boolean;\n};\n\nexport const TagsListInternal = <ValueType,>({\n    values,\n    maxTagCount = 0,\n    renderTag,\n    onDeselect,\n    tagClassName,\n    tagTheme,\n    tagSize,\n    disabled,\n    canDeselect,\n}: TagsListProps<ValueType>) => {\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n    const {tags, remainingTagOption} = getTagsValues<ValueType>(values, maxTagCount);\n\n    if (renderTag) {\n        return (\n            <>\n                {tags.map(renderTag)}\n                {remainingTagOption && renderTag(remainingTagOption as TagOption<ValueType>)}\n            </>\n        );\n    }\n\n    return (\n        <>\n            {tags.map(({value, content}) => (\n                <Label\n                    key={content}\n                    className={tagClassName}\n                    theme={tagTheme}\n                    type={disabled || (canDeselect && !canDeselect(value)) ? 'default' : 'close'}\n                    size={tagSize}\n                    onCloseClick={() => onDeselect(value)}\n                    closeButtonLabel={t('label-deselect')}\n                >\n                    {content}\n                </Label>\n            ))}\n            {remainingTagOption && (\n                <Label theme=\"normal\" size=\"xs\">\n                    {remainingTagOption.content}\n                </Label>\n            )}\n        </>\n    );\n};\n\nexport const TagsList = memo(TagsListInternal) as typeof TagsListInternal;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAGC,IAAI,QAAO,OAAO;AAIjC,SAAQC,KAAK,EAAEC,SAAS,QAAO,mBAAmB;AAElD,SAAQC,kBAAkB;AAE1B,SAAQC,eAAe;AAGvB,SAAQC,aAAa;AAAwC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAc7D,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAUG;EAAA,IAT5BC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAAC,gBAAA,GAAAF,IAAA,CACNG,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,CAAC,GAAAA,gBAAA;IACfE,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACVC,YAAY,GAAAN,IAAA,CAAZM,YAAY;IACZC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACPC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,WAAW,GAAAV,IAAA,CAAXU,WAAW;EAEX,IAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,IAAAuB,mBAAA,GAAYtB,kBAAkB,CAACC,eAAe,EAAEoB,MAAM,CAACE,IAAI,CAAC;IAArDC,CAAC,GAAAF,mBAAA,CAADE,CAAC;EACR,IAAAC,cAAA,GAAmCvB,aAAa,CAAYS,MAAM,EAAEE,WAAW,CAAC;IAAzEa,IAAI,GAAAD,cAAA,CAAJC,IAAI;IAAEC,kBAAkB,GAAAF,cAAA,CAAlBE,kBAAkB;EAE/B,IAAIb,SAAS,EAAE;IACX,oBACIR,KAAA,CAAAF,SAAA;MAAAwB,QAAA,GACKF,IAAI,CAACG,GAAG,CAACf,SAAS,CAAC,EACnBa,kBAAkB,IAAIb,SAAS,CAACa,kBAA0C,CAAC;IAAA,CAC9E,CAAC;EAEX;EAEA,oBACIrB,KAAA,CAAAF,SAAA;IAAAwB,QAAA,GACKF,IAAI,CAACG,GAAG,CAAC,UAAAC,KAAA;MAAA,IAAEC,KAAK,GAAAD,KAAA,CAALC,KAAK;QAAEC,OAAO,GAAAF,KAAA,CAAPE,OAAO;MAAA,oBACtBxB,IAAA,CAACV,KAAK;QAEFmC,SAAS,EAAEjB,YAAa;QACxBkB,KAAK,EAAEjB,QAAS;QAChBkB,IAAI,EAAEhB,QAAQ,IAAKC,WAAW,IAAI,CAACA,WAAW,CAACW,KAAK,CAAE,GAAG,SAAS,GAAG,OAAQ;QAC7EK,IAAI,EAAElB,OAAQ;QACdmB,YAAY,EAAE,SAAdA,YAAYA,CAAA;UAAA,OAAQtB,UAAU,CAACgB,KAAK,CAAC;QAAA,CAAC;QACtCO,gBAAgB,EAAEd,CAAC,CAAC,gBAAgB,CAAE;QAAAI,QAAA,EAErCI;MAAO,GARHA,OASF,CAAC;IAAA,CACX,CAAC,EACDL,kBAAkB,iBACfnB,IAAA,CAACV,KAAK;MAACoC,KAAK,EAAC,QAAQ;MAACE,IAAI,EAAC,IAAI;MAAAR,QAAA,EAC1BD,kBAAkB,CAACK;IAAO,CACxB,CACV;EAAA,CACH,CAAC;AAEX,CAAC;AAED,OAAO,IAAMO,QAAQ,gBAAG1C,IAAI,CAACY,gBAAgB,CAA4B","ignoreList":[]}

package/build/esm/components/Select/TagsList/types.d.ts

@@ -0,0 +1,4 @@
+export type TagOption<ValueType> = {
+    content: string;
+    value: ValueType;
+};

package/build/esm/components/Select/TagsList/types.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=types.js.map

package/build/esm/components/Select/TagsList/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type TagOption<ValueType> = {\n    content: string;\n    value: ValueType;\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/components/Select/TagsList/utils/getRemainingTagsOption.d.ts

@@ -0,0 +1,8 @@
+import type { TagOption } from '../types';
+export declare const getTagsValues: <ValueType>(values?: TagOption<ValueType>[], maxTagCount?: number) => {
+    tags: TagOption<ValueType>[];
+    remainingTagOption: {
+        value: number;
+        content: string;
+    } | undefined;
+};

package/build/esm/components/Select/TagsList/utils/getRemainingTagsOption.js

@@ -0,0 +1,26 @@
+import "core-js/modules/es.array.slice.js";
+export var getTagsValues = function getTagsValues(values, maxTagCount) {
+  if (!values || !maxTagCount) {
+    return {
+      tags: values !== null && values !== void 0 ? values : [],
+      remainingTagOption: undefined
+    };
+  }
+  var countRemainingTags;
+  var tags = values;
+  if (maxTagCount > 0) {
+    countRemainingTags = Math.max(values.length - maxTagCount, 0);
+    if (countRemainingTags > 0) {
+      tags = values.slice(0, maxTagCount);
+    }
+  }
+  var remainingTagOption = countRemainingTags ? {
+    value: -1,
+    content: "+ ".concat(countRemainingTags)
+  } : undefined;
+  return {
+    tags: tags,
+    remainingTagOption: remainingTagOption
+  };
+};
+// #sourceMappingURL=getRemainingTagsOption.js.map

package/build/esm/components/Select/TagsList/utils/getRemainingTagsOption.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTagsValues","values","maxTagCount","tags","remainingTagOption","undefined","countRemainingTags","Math","max","length","slice","value","content","concat"],"sources":["getRemainingTagsOption.ts"],"sourcesContent":["import type {TagOption} from '../types';\n\nexport const getTagsValues = <ValueType>(values?: TagOption<ValueType>[], maxTagCount?: number) => {\n    if (!values || !maxTagCount) {\n        return {\n            tags: values ?? [],\n            remainingTagOption: undefined,\n        };\n    }\n\n    let countRemainingTags;\n    let tags = values;\n\n    if (maxTagCount > 0) {\n        countRemainingTags = Math.max(values.length - maxTagCount, 0);\n\n        if (countRemainingTags > 0) {\n            tags = values.slice(0, maxTagCount);\n        }\n    }\n\n    const remainingTagOption = countRemainingTags\n        ? {\n              value: -1,\n              content: `+ ${countRemainingTags}`,\n          }\n        : undefined;\n\n    return {tags, remainingTagOption};\n};\n"],"mappings":";AAEA,OAAO,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAeC,MAA+B,EAAEC,WAAoB,EAAK;EAC/F,IAAI,CAACD,MAAM,IAAI,CAACC,WAAW,EAAE;IACzB,OAAO;MACHC,IAAI,EAAEF,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,EAAE;MAClBG,kBAAkB,EAAEC;IACxB,CAAC;EACL;EAEA,IAAIC,kBAAkB;EACtB,IAAIH,IAAI,GAAGF,MAAM;EAEjB,IAAIC,WAAW,GAAG,CAAC,EAAE;IACjBI,kBAAkB,GAAGC,IAAI,CAACC,GAAG,CAACP,MAAM,CAACQ,MAAM,GAAGP,WAAW,EAAE,CAAC,CAAC;IAE7D,IAAII,kBAAkB,GAAG,CAAC,EAAE;MACxBH,IAAI,GAAGF,MAAM,CAACS,KAAK,CAAC,CAAC,EAAER,WAAW,CAAC;IACvC;EACJ;EAEA,IAAME,kBAAkB,GAAGE,kBAAkB,GACvC;IACIK,KAAK,EAAE,CAAC,CAAC;IACTC,OAAO,OAAAC,MAAA,CAAOP,kBAAkB;EACpC,CAAC,GACDD,SAAS;EAEf,OAAO;IAACF,IAAI,EAAJA,IAAI;IAAEC,kBAAkB,EAAlBA;EAAkB,CAAC;AACrC,CAAC","ignoreList":[]}

package/build/esm/components/Select/TagsSelect/TagsSelect.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnTagsSelect: import("@bem-react/classname").ClassNameFormatter;

package/build/esm/components/Select/TagsSelect/TagsSelect.classname.js

@@ -0,0 +1,3 @@
+import { block } from "../../cn";
+export var cnTagsSelect = block('tags-select');
+// #sourceMappingURL=TagsSelect.classname.js.map

package/build/esm/components/Select/TagsSelect/TagsSelect.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["block","cnTagsSelect"],"sources":["TagsSelect.classname.ts"],"sourcesContent":["import {block} from '../../cn';\n\nexport const cnTagsSelect = block('tags-select');\n"],"mappings":"AAAA,SAAQA,KAAK;AAEb,OAAO,IAAMC,YAAY,GAAGD,KAAK,CAAC,aAAa,CAAC","ignoreList":[]}

package/build/esm/components/Select/TagsSelect/TagsSelect.css

@@ -0,0 +1,11 @@
+.tpc-tags-select {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-2);
+  align-items: center;
+}
+.tpc-tags-select__tag {
+  color: var(--g-color-text-primary);
+  background-color: var(--g-color-base-generic);
+}
+/*# sourceMappingURL=TagsSelect.css.map */