@weavix/tracker-components 0.0.1

package/build/cjs/components/Select/MultiAutocomplete.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SelectOption } from '@gravity-ui/uikit';
+import type { MultiSelectProps } from './MultiSelect';
+export type MultiAutocompleteProps = Omit<MultiSelectProps, 'filterable' | 'value' | 'onUpdate'> & {
+    value?: SelectOption[];
+    onUpdate: (value: SelectOption[]) => void;
+    searchDelay?: number;
+};
+export declare const MultiAutocomplete: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "onUpdate" | "value" | "filterable"> & {
+    value?: SelectOption[];
+    onUpdate: (value: SelectOption[]) => void;
+    searchDelay?: number;
+} & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/Select/MultiAutocomplete.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiAutocomplete = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.find.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.iterator.some.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _MultiSelect = require("./MultiSelect");
+var _filterAutocompleteOption = require("./utils/filterAutocompleteOption");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["options", "value", "onUpdate", "onFilterChange", "searchDelay"];
+var MultiAutocomplete = exports.MultiAutocomplete = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onFilterChange = _ref.onFilterChange,
+    searchDelay = _ref.searchDelay,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var handleFilterChange = (0, _react.useMemo)(function () {
+    return onFilterChange ? (0, _debounce.default)(onFilterChange, searchDelay) : undefined;
+  }, [onFilterChange, searchDelay]);
+  var optionsWithValue = (0, _react.useMemo)(function () {
+    return [].concat((0, _toConsumableArray2.default)(value !== null && value !== void 0 ? value : []), (0, _toConsumableArray2.default)((options !== null && options !== void 0 ? options : []).filter(function (option) {
+      return !(value !== null && value !== void 0 && value.some(function (valueItem) {
+        return 'value' in option && option.value === valueItem.value;
+      }));
+    })));
+  }, [options, value]);
+  var handleUpdate = (0, _react.useCallback)(function (newValue) {
+    onUpdate(newValue.map(function (valueItem) {
+      return optionsWithValue.find(function (option) {
+        return 'value' in option && option.value === valueItem;
+      });
+    }));
+  }, [onUpdate, optionsWithValue]);
+  var selectValue = (0, _react.useMemo)(function () {
+    return value === null || value === void 0 ? void 0 : value.map(function (valueItem) {
+      return valueItem.value;
+    });
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiSelect.MultiSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    ref: ref,
+    onUpdate: handleUpdate,
+    value: selectValue,
+    options: optionsWithValue,
+    onFilterChange: handleFilterChange,
+    filterable: true,
+    filterOption: _filterAutocompleteOption.filterAutocompleteOption
+  }));
+});
+MultiAutocomplete.displayName = 'MultiAutocomplete';
+// #sourceMappingURL=MultiAutocomplete.js.map

package/build/cjs/components/Select/MultiAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_MultiSelect","_filterAutocompleteOption","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiAutocomplete","exports","forwardRef","_ref","ref","options","value","onUpdate","onFilterChange","searchDelay","props","_objectWithoutProperties","_excluded","handleFilterChange","useMemo","debounce","undefined","optionsWithValue","concat","_toConsumableArray","filter","option","some","valueItem","handleUpdate","useCallback","newValue","map","find","selectValue","_jsx","MultiSelect","_objectSpread","filterable","filterOption","filterAutocompleteOption","displayName"],"sources":["MultiAutocomplete.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react';\n\nimport type {SelectOption} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\n\nimport type {MultiSelectProps} from './MultiSelect';\nimport {MultiSelect} from './MultiSelect';\nimport {filterAutocompleteOption} from './utils/filterAutocompleteOption';\n\nexport type MultiAutocompleteProps = Omit<MultiSelectProps, 'filterable' | 'value' | 'onUpdate'> & {\n    value?: SelectOption[];\n    onUpdate: (value: SelectOption[]) => void;\n    searchDelay?: number;\n};\n\nexport const MultiAutocomplete = forwardRef<HTMLButtonElement, MultiAutocompleteProps>(\n    ({options, value, onUpdate, onFilterChange, searchDelay, ...props}, ref) => {\n        const handleFilterChange = useMemo(\n            () => (onFilterChange ? debounce(onFilterChange, searchDelay) : undefined),\n            [onFilterChange, searchDelay],\n        );\n\n        const optionsWithValue = useMemo(() => {\n            return [\n                ...(value ?? []),\n                ...(options ?? []).filter(\n                    (option) =>\n                        !value?.some(\n                            (valueItem) => 'value' in option && option.value === valueItem.value,\n                        ),\n                ),\n            ];\n        }, [options, value]);\n\n        const handleUpdate = useCallback(\n            (newValue: string[]) => {\n                onUpdate(\n                    newValue.map(\n                        (valueItem) =>\n                            optionsWithValue.find(\n                                (option) => 'value' in option && option.value === valueItem,\n                            ) as SelectOption,\n                    ),\n                );\n            },\n            [onUpdate, optionsWithValue],\n        );\n\n        const selectValue = useMemo(() => value?.map((valueItem) => valueItem.value), [value]);\n\n        return (\n            <MultiSelect\n                {...props}\n                ref={ref}\n                onUpdate={handleUpdate}\n                value={selectValue}\n                options={optionsWithValue}\n                onFilterChange={handleFilterChange}\n                filterable\n                filterOption={filterAutocompleteOption}\n            />\n        );\n    },\n);\n\nMultiAutocomplete.displayName = 'MultiAutocomplete';\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/Select/MultiSelect.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ButtonButtonProps, SelectProps as CommonSelectProps, SelectOption } from '@gravity-ui/uikit';
+import './Select.scss';
+export type MultiSelectProps = CommonSelectProps & {
+    id?: string;
+    loading?: boolean;
+    loadingItems?: boolean;
+    controlProps?: ButtonButtonProps;
+    withArrow?: boolean;
+    title?: string;
+    icon?: ReactNode;
+    selectSize?: CommonSelectProps['size'];
+    renderDisplayValue?: (value: SelectOption[]) => ReactNode;
+    chevronView?: 'desktop' | 'touch';
+    autoFocus?: boolean;
+    withSpecialNoOptions?: boolean;
+    disablePortal?: boolean;
+    disableTooltip?: boolean;
+    filterOption?: (option: SelectOption, filter: string) => boolean;
+};
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/Select/MultiSelect.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiSelect = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.some.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.timers.js");
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@gravity-ui/icons");
+var _uikit = require("@gravity-ui/uikit");
+var _useLocalizedString2 = require("./../../hooks/useLocalizedString");
+var _Select = require("./Select.classname");
+var _i18n = require("./i18n");
+var _filterOption = require("./utils/filterOption");
+var _getValueOption = require("./utils/getValueOption");
+var _isGroupOption = require("./utils/isGroupOption");
+var _renderOption = require("./utils/renderOption");
+require("./Select.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["id", "loading", "loadingItems", "disabled", "renderControl", "className", "options", "value", "width", "size", "name", "placeholder", "popupClassName", "renderOption", "renderSelectedOption", "renderDisplayValue", "controlProps", "controlClassName", "withArrow", "title", "icon", "validationState", "selectSize", "chevronView", "open", "filterable", "disablePortal", "filterOption", "renderFilter", "autoFocus", "filterPlaceholder", "withSpecialNoOptions", "onOpenChange", "disableTooltip"];
+var MultiSelect = exports.MultiSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+    loading = _ref.loading,
+    loadingItems = _ref.loadingItems,
+    disabled = _ref.disabled,
+    providedRenderControl = _ref.renderControl,
+    className = _ref.className,
+    options = _ref.options,
+    value = _ref.value,
+    width = _ref.width,
+    size = _ref.size,
+    name = _ref.name,
+    placeholder = _ref.placeholder,
+    popupClassName = _ref.popupClassName,
+    _ref$renderOption = _ref.renderOption,
+    providedRenderOption = _ref$renderOption === void 0 ? _renderOption.renderOption : _ref$renderOption,
+    renderSelectedOption = _ref.renderSelectedOption,
+    renderDisplayValue = _ref.renderDisplayValue,
+    controlProps = _ref.controlProps,
+    controlClassName = _ref.controlClassName,
+    _ref$withArrow = _ref.withArrow,
+    withArrow = _ref$withArrow === void 0 ? true : _ref$withArrow,
+    title = _ref.title,
+    icon = _ref.icon,
+    validationState = _ref.validationState,
+    selectSize = _ref.selectSize,
+    _ref$chevronView = _ref.chevronView,
+    chevronView = _ref$chevronView === void 0 ? 'desktop' : _ref$chevronView,
+    open = _ref.open,
+    filterable = _ref.filterable,
+    disablePortal = _ref.disablePortal,
+    providedFilterOption = _ref.filterOption,
+    providedRenderFilter = _ref.renderFilter,
+    autoFocus = _ref.autoFocus,
+    filterPlaceholder = _ref.filterPlaceholder,
+    withSpecialNoOptions = _ref.withSpecialNoOptions,
+    onOpenChange = _ref.onOpenChange,
+    disableTooltip = _ref.disableTooltip,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var config = (0, _uikit.getConfig)();
+  var _useLocalizedString = (0, _useLocalizedString2.useLocalizedString)(_i18n.defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var inputRef = (0, _react.useRef)(null);
+  var renderControl = (0, _react.useCallback)(function (renderControlProps, config) {
+    var triggerProps = renderControlProps.triggerProps,
+      ref = renderControlProps.ref,
+      open = renderControlProps.open;
+    var hasError = validationState === 'invalid';
+    if (loading) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        className: (0, _Select.cnSelect)('button-wrapper'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.ActionTooltip, {
+          title: title !== null && title !== void 0 ? title : '',
+          disabled: disableTooltip || !title,
+          placement: "bottom",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+            view: "outlined",
+            size: size,
+            disabled: true,
+            width: "max",
+            name: name,
+            className: (0, _Select.cnSelect)('button', {
+              loading: true,
+              error: hasError,
+              platform: 'desktop'
+            }, controlClassName)
+          }, controlProps), {}, {
+            id: id,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Loader, {
+              className: (0, _Select.cnSelect)('loader')
+            }), withArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+              data: chevronView === 'touch' ? _icons.ChevronRight : _icons.ChevronDown
+            })]
+          }))
+        })
+      });
+    }
+    if (providedRenderControl) {
+      return providedRenderControl(renderControlProps, config);
+    }
+    var valueOptions = [];
+    if (value && value.length) {
+      var _iterator = (0, _createForOfIteratorHelper2.default)(value),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var valueItem = _step.value;
+          var valueOption = (0, _getValueOption.getValueOption)(options !== null && options !== void 0 ? options : [], valueItem);
+          if (valueOption) {
+            valueOptions.push(valueOption);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: (0, _Select.cnSelect)('button-wrapper'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.ActionTooltip, {
+        title: title !== null && title !== void 0 ? title : '',
+        disabled: disableTooltip || !title,
+        placement: "bottom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+          view: "outlined",
+          size: size
+        }, triggerProps), {}, {
+          name: name,
+          "aria-haspopup": "listbox",
+          width: "max",
+          disabled: disabled,
+          className: (0, _Select.cnSelect)('button', {
+            empty: valueOptions.length === 0,
+            'with-icon': Boolean(icon),
+            error: hasError,
+            platform: 'desktop'
+          }, controlClassName)
+        }, controlProps), {}, {
+          id: id,
+          children: [icon, renderDisplayValue ? renderDisplayValue(valueOptions) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [valueOptions.length === 0 && (placeholder || '—'), valueOptions.map(function (item, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+                children: [renderSelectedOption ? renderSelectedOption(item, index) : item.text || item.content, index < valueOptions.length - 1 && ', ']
+              }, item.value);
+            })]
+          }), withArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+            size: chevronView === 'touch' ? 24 : 16,
+            data: chevronView === 'touch' ? _icons.ChevronRight : _icons.ChevronDown,
+            className: (0, _Select.cnSelect)('chevron', {
+              open: open
+            })
+          })]
+        }))
+      })
+    });
+  }, [validationState, loading, providedRenderControl, value, title, disableTooltip, id, size, name, disabled, icon, controlClassName, controlProps, renderDisplayValue, placeholder, withArrow, chevronView, options, renderSelectedOption]);
+  var renderPopup = (0, _react.useCallback)(function (_ref2) {
+    var renderFilter = _ref2.renderFilter,
+      renderList = _ref2.renderList;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [renderFilter(), renderList()]
+    });
+  }, []);
+  var renderFilter = (0, _react.useCallback)(function (_ref3) {
+    var _props$defaultValue$l, _props$defaultValue;
+    var inputProps = _ref3.inputProps;
+    var hasDefaultValue = ((_props$defaultValue$l = (_props$defaultValue = props.defaultValue) === null || _props$defaultValue === void 0 ? void 0 : _props$defaultValue.length) !== null && _props$defaultValue$l !== void 0 ? _props$defaultValue$l : 0) > 0;
+    var controlProps = {
+      role: 'combobox',
+      'aria-activedescendant': inputProps['aria-activedescendant'],
+      'aria-controls': inputProps['aria-controls'],
+      'aria-label': inputProps['aria-label']
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.TextInput, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      autoFocus: autoFocus && !hasDefaultValue,
+      className: (0, _Select.cnSelect)('filter')
+    }, inputProps), {}, {
+      controlProps: controlProps,
+      controlRef: inputRef,
+      size: selectSize,
+      name: name
+    }));
+  }, [autoFocus, props.defaultValue, selectSize, name]);
+  var optionsWithLoading = (0, _react.useMemo)(function () {
+    if (!loadingItems) {
+      if (!(options !== null && options !== void 0 && options.length)) {
+        return [{
+          value: '',
+          disabled: true,
+          content: withSpecialNoOptions ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _Select.cnSelect)('no-options'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+              color: "primary",
+              variant: "subheader-3",
+              children: t('no-options-title')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+              variant: "body-2",
+              children: t('no-options-description')
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _Select.cnSelect)('no-options'),
+            children: t('no-options')
+          })
+        }];
+      }
+      return options;
+    }
+    return [{
+      value: '',
+      disabled: true,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _Select.cnSelect)('items-loader'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Loader, {
+          size: "m"
+        })
+      })
+    }];
+  }, [loadingItems, options, t, withSpecialNoOptions]);
+  var withGroups = options === null || options === void 0 ? void 0 : options.some(_isGroupOption.isGroupOption);
+  (0, _react.useEffect)(function () {
+    var timer;
+    if (open && inputRef.current) {
+      timer = setTimeout(function () {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+          preventScroll: true
+        });
+      }, 0);
+    }
+    return function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- inputRef.current must be in list
+  }, [open && inputRef.current]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Select, (0, _objectSpread2.default)({
+    disablePortal: disablePortal,
+    disabled: disabled || loading,
+    options: optionsWithLoading,
+    value: value,
+    renderControl: renderControl,
+    multiple: true,
+    renderOption: loadingItems || !(options !== null && options !== void 0 && options.length) ? _renderOption.renderOption : providedRenderOption,
+    ref: ref,
+    filterPlaceholder: filterPlaceholder !== null && filterPlaceholder !== void 0 ? filterPlaceholder : t('search'),
+    popupClassName: (0, _Select.cnSelect)('popup', {
+      'with-groups': withGroups,
+      filterable: filterable
+    }, popupClassName),
+    filterOption: providedFilterOption !== null && providedFilterOption !== void 0 ? providedFilterOption : _filterOption.filterOption,
+    width: width,
+    className: (0, _Select.cnSelect)(null, className),
+    size: size,
+    validationState: validationState,
+    renderPopup: renderPopup,
+    open: open,
+    renderFilter: providedRenderFilter !== null && providedRenderFilter !== void 0 ? providedRenderFilter : renderFilter,
+    filterable: filterable,
+    onOpenChange: onOpenChange
+  }, props));
+});
+MultiSelect.displayName = 'MultiSelect';
+// #sourceMappingURL=MultiSelect.js.map

package/build/cjs/components/Select/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_icons","_uikit","_useLocalizedString2","_Select","_i18n","_filterOption","_getValueOption","_isGroupOption","_renderOption","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","MultiSelect","exports","forwardRef","_ref","ref","id","loading","loadingItems","disabled","providedRenderControl","renderControl","className","options","value","width","size","name","placeholder","popupClassName","_ref$renderOption","renderOption","providedRenderOption","renderSelectedOption","renderDisplayValue","controlProps","controlClassName","_ref$withArrow","withArrow","title","icon","validationState","selectSize","_ref$chevronView","chevronView","open","filterable","disablePortal","providedFilterOption","filterOption","providedRenderFilter","renderFilter","autoFocus","filterPlaceholder","withSpecialNoOptions","onOpenChange","disableTooltip","props","_objectWithoutProperties","_excluded","config","getConfig","_useLocalizedString","useLocalizedString","defaultMessages","lang","inputRef","useRef","useCallback","renderControlProps","triggerProps","hasError","_jsx","cnSelect","children","ActionTooltip","placement","_jsxs","Button","_objectSpread","view","error","platform","Loader","Icon","data","ChevronRight","ChevronDown","valueOptions","length","_iterator","_createForOfIteratorHelper","_step","s","done","valueItem","valueOption","getValueOption","push","err","empty","Boolean","_Fragment","map","item","index","Fragment","text","content","renderPopup","_ref2","renderList","_ref3","_props$defaultValue$l","_props$defaultValue","inputProps","hasDefaultValue","defaultValue","role","TextInput","controlRef","optionsWithLoading","useMemo","Text","color","variant","withGroups","some","isGroupOption","useEffect","timer","current","setTimeout","_inputRef$current","focus","preventScroll","clearTimeout","CommonSelect","multiple","displayName"],"sources":["MultiSelect.tsx"],"sourcesContent":["import type {ReactNode, Ref} from 'react';\nimport React, {Fragment, forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';\n\nimport {ChevronDown, ChevronRight} from '@gravity-ui/icons';\nimport type {\n    ButtonButtonProps,\n    SelectProps as CommonSelectProps,\n    SelectOption,\n} from '@gravity-ui/uikit';\nimport {\n    ActionTooltip,\n    Button,\n    Select as CommonSelect,\n    Icon,\n    Loader,\n    Text,\n    TextInput,\n    getConfig,\n} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {cnSelect} from './Select.classname';\nimport {defaultMessages} from './i18n';\nimport {filterOption} from './utils/filterOption';\nimport {getValueOption} from './utils/getValueOption';\nimport {isGroupOption} from './utils/isGroupOption';\nimport {renderOption} from './utils/renderOption';\n\nimport './Select.scss';\n\nexport type MultiSelectProps = CommonSelectProps & {\n    id?: string;\n    loading?: boolean;\n    loadingItems?: boolean;\n    controlProps?: ButtonButtonProps;\n    withArrow?: boolean;\n    title?: string;\n    icon?: ReactNode;\n    selectSize?: CommonSelectProps['size'];\n    renderDisplayValue?: (value: SelectOption[]) => ReactNode;\n    chevronView?: 'desktop' | 'touch';\n    autoFocus?: boolean;\n    withSpecialNoOptions?: boolean;\n    disablePortal?: boolean;\n    disableTooltip?: boolean;\n    filterOption?: (option: SelectOption, filter: string) => boolean;\n};\n\nexport const MultiSelect: React.ForwardRefExoticComponent<\n    MultiSelectProps & React.RefAttributes<HTMLButtonElement>\n> = forwardRef<HTMLButtonElement, MultiSelectProps>(\n    (\n        {\n            id,\n            loading,\n            loadingItems,\n            disabled,\n            renderControl: providedRenderControl,\n            className,\n            options,\n            value,\n            width,\n            size,\n            name,\n            placeholder,\n            popupClassName,\n            renderOption: providedRenderOption = renderOption,\n            renderSelectedOption,\n            renderDisplayValue,\n            controlProps,\n            controlClassName,\n            withArrow = true,\n            title,\n            icon,\n            validationState,\n            selectSize,\n            chevronView = 'desktop',\n            open,\n            filterable,\n            disablePortal,\n            filterOption: providedFilterOption,\n            renderFilter: providedRenderFilter,\n            autoFocus,\n            filterPlaceholder,\n            withSpecialNoOptions,\n            onOpenChange,\n            disableTooltip,\n            ...props\n        },\n        ref,\n    ) => {\n        const config = getConfig();\n        const {t} = useLocalizedString(defaultMessages, config.lang);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const renderControl = useCallback<NonNullable<CommonSelectProps['renderControl']>>(\n            (renderControlProps, config) => {\n                const {triggerProps, ref, open} = renderControlProps;\n                const hasError = validationState === 'invalid';\n\n                if (loading) {\n                    return (\n                        <div\n                            ref={ref as Ref<HTMLDivElement>}\n                            className={cnSelect('button-wrapper')}\n                        >\n                            <ActionTooltip\n                                title={title ?? ''}\n                                disabled={disableTooltip || !title}\n                                placement=\"bottom\"\n                            >\n                                <Button\n                                    view=\"outlined\"\n                                    size={size}\n                                    disabled\n                                    width=\"max\"\n                                    name={name}\n                                    className={cnSelect(\n                                        'button',\n                                        {\n                                            loading: true,\n                                            error: hasError,\n                                            platform: 'desktop',\n                                        },\n                                        controlClassName,\n                                    )}\n                                    {...controlProps}\n                                    id={id}\n                                >\n                                    <Loader className={cnSelect('loader')} />\n                                    {withArrow && (\n                                        <Icon\n                                            data={\n                                                chevronView === 'touch' ? ChevronRight : ChevronDown\n                                            }\n                                        />\n                                    )}\n                                </Button>\n                            </ActionTooltip>\n                        </div>\n                    );\n                }\n\n                if (providedRenderControl) {\n                    return providedRenderControl(renderControlProps, config);\n                }\n\n                const valueOptions: SelectOption[] = [];\n\n                if (value && value.length) {\n                    for (const valueItem of value) {\n                        const valueOption = getValueOption(options ?? [], valueItem);\n\n                        if (valueOption) {\n                            valueOptions.push(valueOption);\n                        }\n                    }\n                }\n\n                return (\n                    <div ref={ref as Ref<HTMLDivElement>} className={cnSelect('button-wrapper')}>\n                        <ActionTooltip\n                            title={title ?? ''}\n                            disabled={disableTooltip || !title}\n                            placement=\"bottom\"\n                        >\n                            <Button\n                                view=\"outlined\"\n                                size={size}\n                                {...triggerProps}\n                                name={name}\n                                aria-haspopup=\"listbox\"\n                                width=\"max\"\n                                disabled={disabled}\n                                className={cnSelect(\n                                    'button',\n                                    {\n                                        empty: valueOptions.length === 0,\n                                        'with-icon': Boolean(icon),\n                                        error: hasError,\n                                        platform: 'desktop',\n                                    },\n                                    controlClassName,\n                                )}\n                                {...controlProps}\n                                id={id}\n                            >\n                                {icon}\n                                {renderDisplayValue ? (\n                                    renderDisplayValue(valueOptions)\n                                ) : (\n                                    <>\n                                        {valueOptions.length === 0 && (placeholder || '—')}\n                                        {valueOptions.map((item, index) => (\n                                            <Fragment key={item.value}>\n                                                {renderSelectedOption\n                                                    ? renderSelectedOption(item, index)\n                                                    : item.text || item.content}\n                                                {index < valueOptions.length - 1 && ', '}\n                                            </Fragment>\n                                        ))}\n                                    </>\n                                )}\n                                {withArrow && (\n                                    <Icon\n                                        size={chevronView === 'touch' ? 24 : 16}\n                                        data={chevronView === 'touch' ? ChevronRight : ChevronDown}\n                                        className={cnSelect('chevron', {\n                                            open,\n                                        })}\n                                    />\n                                )}\n                            </Button>\n                        </ActionTooltip>\n                    </div>\n                );\n            },\n            [\n                validationState,\n                loading,\n                providedRenderControl,\n                value,\n                title,\n                disableTooltip,\n                id,\n                size,\n                name,\n                disabled,\n                icon,\n                controlClassName,\n                controlProps,\n                renderDisplayValue,\n                placeholder,\n                withArrow,\n                chevronView,\n                options,\n                renderSelectedOption,\n            ],\n        );\n\n        const renderPopup = useCallback<NonNullable<CommonSelectProps['renderPopup']>>(\n            ({renderFilter, renderList}) => (\n                <>\n                    {renderFilter()}\n                    {renderList()}\n                </>\n            ),\n            [],\n        );\n\n        const renderFilter = useCallback<NonNullable<CommonSelectProps['renderFilter']>>(\n            ({inputProps}) => {\n                const hasDefaultValue = (props.defaultValue?.length ?? 0) > 0;\n\n                const controlProps = {\n                    role: 'combobox',\n                    'aria-activedescendant': inputProps['aria-activedescendant'],\n                    'aria-controls': inputProps['aria-controls'],\n                    'aria-label': inputProps['aria-label'],\n                };\n\n                return (\n                    <TextInput\n                        autoFocus={autoFocus && !hasDefaultValue}\n                        className={cnSelect('filter')}\n                        {...inputProps}\n                        controlProps={controlProps}\n                        controlRef={inputRef}\n                        size={selectSize}\n                        name={name}\n                    />\n                );\n            },\n            [autoFocus, props.defaultValue, selectSize, name],\n        );\n\n        const optionsWithLoading = useMemo(() => {\n            if (!loadingItems) {\n                if (!options?.length) {\n                    return [\n                        {\n                            value: '',\n                            disabled: true,\n                            content: withSpecialNoOptions ? (\n                                <div className={cnSelect('no-options')}>\n                                    <Text color=\"primary\" variant=\"subheader-3\">\n                                        {t('no-options-title')}\n                                    </Text>\n                                    <Text variant=\"body-2\">{t('no-options-description')}</Text>\n                                </div>\n                            ) : (\n                                <div className={cnSelect('no-options')}>{t('no-options')}</div>\n                            ),\n                        },\n                    ];\n                }\n\n                return options;\n            }\n\n            return [\n                {\n                    value: '',\n                    disabled: true,\n                    content: (\n                        <div className={cnSelect('items-loader')}>\n                            <Loader size=\"m\" />\n                        </div>\n                    ),\n                },\n            ];\n        }, [loadingItems, options, t, withSpecialNoOptions]);\n\n        const withGroups = options?.some(isGroupOption);\n\n        useEffect(() => {\n            let timer: NodeJS.Timeout | undefined;\n\n            if (open && inputRef.current) {\n                timer = setTimeout(() => inputRef.current?.focus({preventScroll: true}), 0);\n            }\n\n            return () => {\n                if (timer) {\n                    clearTimeout(timer);\n                }\n            };\n            // eslint-disable-next-line react-hooks/exhaustive-deps -- inputRef.current must be in list\n        }, [open && inputRef.current]);\n\n        return (\n            <CommonSelect\n                disablePortal={disablePortal}\n                disabled={disabled || loading}\n                options={optionsWithLoading}\n                value={value}\n                renderControl={renderControl}\n                multiple\n                renderOption={\n                    loadingItems || !options?.length ? renderOption : providedRenderOption\n                }\n                ref={ref}\n                filterPlaceholder={filterPlaceholder ?? t('search')}\n                popupClassName={cnSelect(\n                    'popup',\n                    {\n                        'with-groups': withGroups,\n                        filterable,\n                    },\n                    popupClassName,\n                )}\n                filterOption={providedFilterOption ?? filterOption}\n                width={width}\n                className={cnSelect(null, className)}\n                size={size}\n                validationState={validationState}\n                renderPopup={renderPopup}\n                open={open}\n                renderFilter={providedRenderFilter ?? renderFilter}\n                filterable={filterable}\n                onOpenChange={onOpenChange}\n                {...props}\n            />\n        );\n    },\n);\n\nMultiSelect.displayName = 'MultiSelect';\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/Select/Select.classname.d.ts

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

package/build/cjs/components/Select/Select.classname.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cnSelect = void 0;
+var _cn = require("../cn");
+var cnSelect = exports.cnSelect = (0, _cn.block)('select');
+// #sourceMappingURL=Select.classname.js.map

package/build/cjs/components/Select/Select.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cn","require","cnSelect","exports","block"],"sources":["Select.classname.ts"],"sourcesContent":["import {block} from '../cn';\n\nexport const cnSelect = block('select');\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,IAAMC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,SAAK,EAAC,QAAQ,CAAC","ignoreList":[]}

package/build/cjs/components/Select/Select.css

@@ -0,0 +1,121 @@
+.tpc-select__button {
+  vertical-align: text-bottom;
+}
+.tpc-select__button_error::before {
+  --_--focus-outline-color: var(--g-color-line-danger);
+  border-color: var(--g-color-line-danger);
+}
+.tpc-select__button:not(.tpc-select__button_with-icon).tpc-select__button_empty {
+  color: var(--g-color-text-hint);
+}
+.tpc-select__button:not(.tpc-select__button_loading) {
+  justify-content: space-between;
+}
+.tpc-select__button:disabled {
+  color: var(--g-color-text-hint);
+}
+.tpc-select__button_clear {
+  padding: 0;
+}
+.tpc-select__button_clear .g-button__icon_side_end {
+  margin: 0;
+}
+.tpc-select__button_loading.g-button_width_max {
+  justify-content: space-between;
+}
+.tpc-select__button_loading.g-button_width_max .g-button__text {
+  margin: auto;
+}
+.tpc-select__button_platform_desktop .tpc-select__chevron_open {
+  transform: rotate(180deg);
+}
+.tpc-select__loader {
+  vertical-align: middle;
+}
+.tpc-select__items-loader {
+  display: flex;
+  justify-content: center;
+}
+.tpc-select__option {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tpc-select__option_disabled {
+  cursor: default;
+  color: var(--g-color-text-secondary);
+}
+.tpc-select__no-options {
+  justify-content: center;
+}
+.tpc-select__popup .g-select-list__group-label-content {
+  color: var(--g-color-text-hint);
+}
+.tpc-select__popup .tpc-select__filter {
+  width: auto;
+  padding: var(--g-spacing-1) var(--g-spacing-1) 0;
+}
+.tpc-select__button-wrapper {
+  width: 100%;
+}
+.tpc-select__popup_mobile {
+  --suggest-offset: 230px;
+}
+.tpc-select__popup_mobile .tpc-select__filter {
+  width: auto;
+  padding: 0 var(--g-spacing-5);
+  margin-bottom: var(--g-spacing-2);
+}
+.tpc-select__popup_mobile .g-sheet__sheet-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+.tpc-select__popup_mobile .g-sheet__sheet-content > div:not([class]) {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  width: 100%;
+  min-height: 0;
+}
+.tpc-select__popup_mobile .g-sheet__sheet-content .g-select-filter {
+  flex: none;
+}
+.tpc-select__popup_mobile .g-sheet__sheet-content .g-select-list_mobile {
+  flex: auto;
+}
+.tpc-select__popup_mobile .g-select-list__option {
+  padding: var(--g-spacing-2) var(--g-spacing-4);
+}
+.tpc-select__popup_mobile .g-select-list__group-label-content {
+  font-weight: inherit;
+}
+.tpc-select__popup_mobile .g-select-list_mobile .g-select-list__group-label:not(.g-select-list__group-label_empty) {
+  height: auto;
+}
+.tpc-select__popup_mobile .g-select-list__item:has(.g-select-list__group-label) {
+  margin-top: var(--g-spacing-2);
+}
+.tpc-select__popup_mobile .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_mobile.tpc-select__popup_filterable .g-sheet__sheet-content {
+  height: calc(100dvh - var(--suggest-offset));
+}
+.tpc-select__popup:not(.tpc-select__popup_mobile).tpc-select__popup_with-groups .g-select-list__option {
+  padding-left: var(--g-spacing-4);
+}
+.tpc-select__popup:not(.tpc-select__popup_mobile) .g-select-list {
+  /* stylelint-disable-next-line declaration-no-important */
+  max-height: 40vh !important;
+}
+.tpc-select__title_platform_touch {
+  padding-top: var(--g-spacing-3);
+  padding-bottom: var(--g-spacing-3);
+  margin: auto;
+}
+/*# sourceMappingURL=Select.css.map */

package/build/cjs/components/Select/Select.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Select.scss"],"names":[],"mappings":"AAGI;EACI,2BAAA;AAFR;AAIQ;EACI,oDAAA;EACA,wCAAA;AAFZ;AAMY;EACI,+BAAA;AAJhB;AAQQ;EACI,8BAAA;AANZ;AASQ;EACI,+BAAA;AAPZ;AAUQ;EACI,UAAA;AARZ;AAUY;EACI,SAAA;AARhB;AAYQ;EACI,8BAAA;AAVZ;AAYY;EACI,YAAA;AAVhB;AAgBgB;EACI,yBAAA;AAdpB;AAoBI;EACI,sBAAA;AAlBR;AAqBI;EACI,aAAA;EACA,uBAAA;AAnBR;AAsBI;EACI,qBAAA;EAEA,WAAA;EAEA,gBAAA;EAEA,mBAAA;EACA,uBAAA;AAvBR;AAyBQ;EACI,eAAA;EAEA,oCAAA;AAxBZ;AA4BI;EACI,uBAAA;AA1BR;AA8BQ;EACI,+BAAA;AA5BZ;AA+BQ;EACI,WAAA;EACA,gDAAA;AA7BZ;AAiCI;EACI,WAAA;AA/BR;AAkCI;EACI,uBAAA;AAhCR;AAkCQ;EACI,WAAA;EACA,6BAAA;EACA,iCAAA;AAhCZ;AAmCQ;EACI,aAAA;EACA,sBAAA;EAEA,UAAA;AAlCZ;AAoCY;EACI,aAAA;EACA,sBAAA;EAEA,UAAA;EACA,WAAA;EACA,aAAA;AAnChB;AAsCY;EACI,UAAA;AApChB;AAuCY;EACI,UAAA;AArChB;AAyCQ;EACI,8CAAA;AAvCZ;AA0CQ;EACI,oBAAA;AAxCZ;AA2CQ;EACI,YAAA;AAzCZ;AA4CQ;EACI,8BAAA;AA1CZ;AA6CQ;EACI,yBAAA;EACA,wBAAA;EAEA,WAAA;AA5CZ;AAgDY;EACI,4CAAA;AA9ChB;AAqDY;EACI,gCAAA;AAnDhB;AAuDQ;EAEI,yDAAA;EACA,2BAAA;AAtDZ;AA2DQ;EACI,+BAAA;EACA,kCAAA;EACA,YAAA;AAzDZ","file":"Select.css","sourcesContent":["$arrowIconSpace: 25px;\n\n.tpc-select {\n    &__button {\n        vertical-align: text-bottom;\n\n        &_error::before {\n            --_--focus-outline-color: var(--g-color-line-danger);\n            border-color: var(--g-color-line-danger);\n        }\n\n        &:not(.tpc-select__button_with-icon) {\n            &.tpc-select__button_empty {\n                color: var(--g-color-text-hint);\n            }\n        }\n\n        &:not(.tpc-select__button_loading) {\n            justify-content: space-between;\n        }\n\n        &:disabled {\n            color: var(--g-color-text-hint);\n        }\n\n        &_clear {\n            padding: 0;\n\n            .g-button__icon_side_end {\n                margin: 0;\n            }\n        }\n\n        &_loading.g-button_width_max {\n            justify-content: space-between;\n\n            .g-button__text {\n                margin: auto;\n            }\n        }\n\n        &_platform {\n            &_desktop {\n                .tpc-select__chevron_open {\n                    transform: rotate(180deg);\n                }\n            }\n        }\n    }\n\n    &__loader {\n        vertical-align: middle;\n    }\n\n    &__items-loader {\n        display: flex;\n        justify-content: center;\n    }\n\n    &__option {\n        display: inline-block;\n\n        width: 100%;\n\n        overflow: hidden;\n\n        white-space: nowrap;\n        text-overflow: ellipsis;\n\n        &_disabled {\n            cursor: default;\n\n            color: var(--g-color-text-secondary);\n        }\n    }\n\n    &__no-options {\n        justify-content: center;\n    }\n\n    &__popup {\n        .g-select-list__group-label-content {\n            color: var(--g-color-text-hint);\n        }\n\n        .tpc-select__filter {\n            width: auto;\n            padding: var(--g-spacing-1) var(--g-spacing-1) 0;\n        }\n    }\n\n    &__button-wrapper {\n        width: 100%;\n    }\n\n    &__popup_mobile {\n        --suggest-offset: 230px;\n\n        .tpc-select__filter {\n            width: auto;\n            padding: 0 var(--g-spacing-5);\n            margin-bottom: var(--g-spacing-2);\n        }\n\n        .g-sheet__sheet-content {\n            display: flex;\n            flex-direction: column;\n\n            padding: 0;\n\n            > div:not([class]) {\n                display: flex;\n                flex-direction: column;\n\n                flex: auto;\n                width: 100%;\n                min-height: 0;\n            }\n\n            .g-select-filter {\n                flex: none;\n            }\n\n            .g-select-list_mobile {\n                flex: auto;\n            }\n        }\n\n        .g-select-list__option {\n            padding: var(--g-spacing-2) var(--g-spacing-4);\n        }\n\n        .g-select-list__group-label-content {\n            font-weight: inherit;\n        }\n\n        .g-select-list_mobile .g-select-list__group-label:not(.g-select-list__group-label_empty) {\n            height: auto;\n        }\n\n        .g-select-list__item:has(.g-select-list__group-label) {\n            margin-top: var(--g-spacing-2);\n        }\n\n        .g-select-list__item:not(:first-child) .g-select-list__group-label::before {\n            right: var(--g-spacing-3);\n            left: var(--g-spacing-3);\n\n            width: auto;\n        }\n\n        &.tpc-select__popup_filterable {\n            .g-sheet__sheet-content {\n                height: calc(100dvh - var(--suggest-offset));\n            }\n        }\n    }\n\n    &__popup:not(.tpc-select__popup_mobile) {\n        &.tpc-select__popup_with-groups {\n            .g-select-list__option {\n                padding-left: var(--g-spacing-4);\n            }\n        }\n\n        .g-select-list {\n            // override Select styles\n            /* stylelint-disable-next-line declaration-no-important */\n            max-height: 40vh !important;\n        }\n    }\n\n    &__title {\n        &_platform_touch {\n            padding-top: var(--g-spacing-3);\n            padding-bottom: var(--g-spacing-3);\n            margin: auto;\n        }\n    }\n}\n"],"sourceRoot":""}

package/build/cjs/components/Select/Select.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MultiSelectProps } from './MultiSelect';
+export type SelectProps = Omit<MultiSelectProps, 'multiple' | 'value' | 'onUpdate' | 'onFocus' | 'onBlur'> & {
+    value?: string;
+    onUpdate: (value: string) => void;
+};
+export declare const Select: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "multiple" | "onUpdate" | "value" | "onFocus" | "onBlur"> & {
+    value?: string;
+    onUpdate: (value: string) => void;
+} & React.RefAttributes<HTMLButtonElement>>;