@weavix/tracker-components 0.0.1

package/build/esm/components/QueueSelect/QueueSelect.css

@@ -0,0 +1,113 @@
+.tpc-queue-select:not(.tpc-queue-select_with-border) .tpc-select__button::before {
+  border: none;
+}
+.tpc-queue-select__control {
+  width: 100%;
+}
+.tpc-queue-select__control-block.g-button_size_xl .g-button__icon-inner {
+  color: var(--g-color-text-secondary);
+}
+.tpc-queue-select_mobile .tpc-queue-select__control-block {
+  --g-button-background-color-hover: transparent;
+  align-items: center;
+  height: auto;
+  color: var(--g-color-text-primary);
+}
+.tpc-queue-select_mobile .g-select-list {
+  margin: var(--g-spacing-2) 0;
+}
+.tpc-queue-select__popup-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.tpc-queue-select__select-item_forPopup {
+  display: flex;
+  align-items: center;
+}
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-texts {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  padding-left: var(--g-spacing-3);
+}
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-name,
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-key {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-name {
+  color: var(--g-color-text-primary);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-key {
+  color: var(--g-color-text-secondary);
+}
+.tpc-queue-select__select-item_forPopup .tpc-queue-select__select-item-icon {
+  min-width: 24px;
+}
+
+.tpc-queue-select__select-item_forControl {
+  display: flex;
+  align-items: center;
+}
+.tpc-queue-select__select-item_forControl_size-xl {
+  padding: var(--g-spacing-2) 0;
+}
+.tpc-queue-select__select-item_forControl .tpc-queue-select__select-item-icon {
+  margin-right: var(--g-spacing-3);
+}
+
+.tpc-queue-select__select-item_platform_touch .tpc-queue-select__select-item-icon {
+  margin-right: var(--g-spacing-1);
+}
+
+.tpc-queue-select__control.tpc-queue-select__select-item.tpc-queue-select__select-item_forPopup {
+  display: none;
+}
+.tpc-queue-select__control.tpc-queue-select__select-item.tpc-queue-select__select-item_forControl {
+  display: flex;
+}
+
+.tpc-queue-select__popup.tpc-queue-select__select-item.tpc-queue-select__select-item_forPopup {
+  display: flex;
+}
+.tpc-queue-select__popup.tpc-queue-select__select-item.tpc-queue-select__select-item_forControl {
+  display: none;
+}
+
+.tpc-queue-select__popup {
+  min-width: 320px;
+}
+
+.tpc-queue-select__select-value-name {
+  line-height: inherit;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tpc-queue-select__select-display {
+  gap: var(--g-spacing-2);
+}
+
+.tpc-queue-select__search {
+  box-sizing: border-box;
+  padding: var(--g-spacing-2) var(--g-spacing-4);
+}
+
+.tpc-queue-select__list-item {
+  padding: 0;
+}
+
+.g-select-list__option_colored:has(.tpc-queue-select__list-item_selected) {
+  background-color: transparent;
+}
+
+.g-select-list__item.g-list__item_active:has(.tpc-queue-select__list-item_selected) {
+  background-color: transparent;
+}
+/*# sourceMappingURL=QueueSelect.css.map */

package/build/esm/components/QueueSelect/QueueSelect.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["QueueSelect.scss"],"names":[],"mappings":"AACI;EACI,YAAA;AAAR;AAGI;EACI,WAAA;AADR;AAII;EACI,oCAAA;AAFR;AAMQ;EACI,8CAAA;EACA,mBAAA;EAEA,YAAA;EAEA,kCAAA;AANZ;AASQ;EACI,4BAAA;AAPZ;AAWI;EACI,aAAA;EACA,sBAAA;AATR;;AAaA;EACI,aAAA;EACA,mBAAA;AAVJ;AAYI;EACI,aAAA;EACA,sBAAA;EAEA,UAAA;EACA,YAAA;EACA,gCAAA;AAXR;AAcI;;EAEI,yCAAA;EACA,6CAAA;AAZR;AAeI;EACI,kCAAA;EACA,gBAAA;EAEA,mBAAA;EACA,uBAAA;AAdR;AAiBI;EACI,oCAAA;AAfR;AAkBI;EACI,eAAA;AAhBR;;AAoBA;EACI,aAAA;EACA,mBAAA;AAjBJ;AAmBI;EACI,6BAAA;AAjBR;AAoBI;EACI,gCAAA;AAlBR;;AAuBI;EACI,gCAAA;AApBR;;AAyBI;EACI,aAAA;AAtBR;AAyBI;EACI,aAAA;AAvBR;;AA4BI;EACI,aAAA;AAzBR;AA4BI;EACI,aAAA;AA1BR;;AA8BA;EACI,gBAAA;AA3BJ;;AA8BA;EACI,oBAAA;EAEA,gBAAA;EAEA,mBAAA;EACA,uBAAA;AA7BJ;;AAgCA;EACI,uBAAA;AA7BJ;;AAgCA;EACI,sBAAA;EACA,8CAAA;AA7BJ;;AAgCA;EACI,UAAA;AA7BJ;;AAgCA;EACI,6BAAA;AA7BJ;;AAgCA;EACI,6BAAA;AA7BJ","file":"QueueSelect.css","sourcesContent":[".tpc-queue-select {\n    &:not(.tpc-queue-select_with-border) .tpc-select__button::before {\n        border: none;\n    }\n\n    &__control {\n        width: 100%;\n    }\n\n    &__control-block.g-button_size_xl .g-button__icon-inner {\n        color: var(--g-color-text-secondary);\n    }\n\n    &_mobile {\n        .tpc-queue-select__control-block {\n            --g-button-background-color-hover: transparent;\n            align-items: center;\n\n            height: auto;\n\n            color: var(--g-color-text-primary);\n        }\n\n        .g-select-list {\n            margin: var(--g-spacing-2) 0;\n        }\n    }\n\n    &__popup-content {\n        display: flex;\n        flex-direction: column;\n    }\n}\n\n.tpc-queue-select__select-item_forPopup {\n    display: flex;\n    align-items: center;\n\n    .tpc-queue-select__select-item-texts {\n        display: flex;\n        flex-direction: column;\n\n        flex: auto;\n        min-width: 0;\n        padding-left: var(--g-spacing-3);\n    }\n\n    .tpc-queue-select__select-item-name,\n    .tpc-queue-select__select-item-key {\n        font-size: var(--g-text-body-1-font-size);\n        line-height: var(--g-text-body-1-line-height);\n    }\n\n    .tpc-queue-select__select-item-name {\n        color: var(--g-color-text-primary);\n        overflow: hidden;\n\n        white-space: nowrap;\n        text-overflow: ellipsis;\n    }\n\n    .tpc-queue-select__select-item-key {\n        color: var(--g-color-text-secondary);\n    }\n\n    .tpc-queue-select__select-item-icon {\n        min-width: 24px;\n    }\n}\n\n.tpc-queue-select__select-item_forControl {\n    display: flex;\n    align-items: center;\n\n    &_size-xl {\n        padding: var(--g-spacing-2) 0;\n    }\n\n    .tpc-queue-select__select-item-icon {\n        margin-right: var(--g-spacing-3);\n    }\n}\n\n.tpc-queue-select__select-item_platform_touch {\n    .tpc-queue-select__select-item-icon {\n        margin-right: var(--g-spacing-1);\n    }\n}\n\n.tpc-queue-select__control.tpc-queue-select__select-item {\n    &.tpc-queue-select__select-item_forPopup {\n        display: none;\n    }\n\n    &.tpc-queue-select__select-item_forControl {\n        display: flex;\n    }\n}\n\n.tpc-queue-select__popup.tpc-queue-select__select-item {\n    &.tpc-queue-select__select-item_forPopup {\n        display: flex;\n    }\n\n    &.tpc-queue-select__select-item_forControl {\n        display: none;\n    }\n}\n\n.tpc-queue-select__popup {\n    min-width: 320px;\n}\n\n.tpc-queue-select__select-value-name {\n    line-height: unset; // stylelint-disable-line\n\n    overflow: hidden;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n}\n\n.tpc-queue-select__select-display {\n    gap: var(--g-spacing-2);\n}\n\n.tpc-queue-select__search {\n    box-sizing: border-box;\n    padding: var(--g-spacing-2) var(--g-spacing-4);\n}\n\n.tpc-queue-select__list-item {\n    padding: 0;\n}\n\n.g-select-list__option_colored:has(.tpc-queue-select__list-item_selected) {\n    background-color: transparent;\n}\n\n.g-select-list__item.g-list__item_active:has(.tpc-queue-select__list-item_selected) {\n    background-color: transparent;\n}\n"],"sourceRoot":""}

package/build/esm/components/QueueSelect/QueueSelect.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CancellablePromise } from '@gravity-ui/sdk';
+import type { AutocompleteProps } from '~/src/components/Select/Autocomplete';
+import type { QueueInfo } from './types';
+import './QueueSelect.scss';
+export type QueueSelectProps = {
+    queues?: QueueInfo[] | string[];
+    defaultQueue?: QueueInfo | string;
+    loading?: boolean;
+    hideQueues?: ReadonlySet<string>;
+    onSearch?: ((text: string) => CancellablePromise<QueueInfo[]>) | ((text: string) => Promise<QueueInfo[]>);
+    onChange?: (queue: QueueInfo) => void;
+    onSelectClick?: () => void;
+    initialEmpty?: boolean;
+    withoutSuggest?: boolean;
+    withValueIcon?: boolean;
+    confirmUpdate?: () => Promise<{
+        success: boolean;
+    }>;
+    className?: string;
+    withBorder?: boolean;
+    size?: AutocompleteProps['size'];
+    popupWidth?: AutocompleteProps['popupWidth'];
+    error?: AutocompleteProps['error'];
+    id?: AutocompleteProps['id'];
+    withArrow?: AutocompleteProps['withArrow'];
+    placeholder?: AutocompleteProps['placeholder'];
+    renderFilter?: AutocompleteProps['renderFilter'];
+    controlClassName?: AutocompleteProps['controlClassName'];
+    disablePortal?: boolean;
+};
+export declare const QueueSelect: ({ defaultQueue: propsDefaultQueue, queues: propsQueues, withoutSuggest, onChange, className, controlClassName, hideQueues, initialEmpty, withBorder, size, popupWidth, error, id, withValueIcon, withArrow, placeholder, disablePortal, confirmUpdate, onSelectClick, renderFilter, loading, onSearch, }: QueueSelectProps) => React.JSX.Element;

package/build/esm/components/QueueSelect/QueueSelect.js

@@ -0,0 +1,246 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.array.unshift.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
+import "core-js/modules/es.iterator.find.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.iterator.some.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CancellablePromise } from '@gravity-ui/sdk';
+import { getConfig } from '@gravity-ui/uikit';
+import { useUpdateEffect } from 'react-use';
+import { Autocomplete } from "./../Select/Autocomplete";
+import { useAutocomplete } from "./../Select/hooks/useAutocomplete";
+import { useAutoFocus } from "./../../hooks/useAutoFocus";
+import { useLocalizedString } from "./../../hooks/useLocalizedString";
+import { cnQueueSelect } from "./QueueSelect.classname";
+import { defaultMessages } from "./i18n";
+import { filterQueues } from "./utils/filterQueues";
+import { mapQueueToSelectItem } from "./utils/mapQueueToSelectItem";
+import { normalizeQueue } from "./utils/normalizeQueue";
+import { renderDisplayValue } from "./utils/renderDisplayValue";
+import "./QueueSelect.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export var QueueSelect = function QueueSelect(_ref) {
+  var _queues$find, _queue$data2;
+  var propsDefaultQueue = _ref.defaultQueue,
+    propsQueues = _ref.queues,
+    withoutSuggest = _ref.withoutSuggest,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    controlClassName = _ref.controlClassName,
+    hideQueues = _ref.hideQueues,
+    _ref$initialEmpty = _ref.initialEmpty,
+    initialEmpty = _ref$initialEmpty === void 0 ? false : _ref$initialEmpty,
+    _ref$withBorder = _ref.withBorder,
+    withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    popupWidth = _ref.popupWidth,
+    error = _ref.error,
+    id = _ref.id,
+    _ref$withValueIcon = _ref.withValueIcon,
+    withValueIcon = _ref$withValueIcon === void 0 ? false : _ref$withValueIcon,
+    withArrow = _ref.withArrow,
+    placeholder = _ref.placeholder,
+    disablePortal = _ref.disablePortal,
+    confirmUpdate = _ref.confirmUpdate,
+    onSelectClick = _ref.onSelectClick,
+    renderFilter = _ref.renderFilter,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onSearch = _ref.onSearch;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    delayedIsOpen = _useState4[0],
+    setDelayedIsOpen = _useState4[1];
+  var popupContainerRef = useRef(null);
+  var config = getConfig();
+  var _useLocalizedString = useLocalizedString(defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var handleOpenChange = useCallback(function (value) {
+    if (value) {
+      onSelectClick === null || onSelectClick === void 0 || onSelectClick();
+    }
+    setIsOpen(value);
+    requestAnimationFrame(function () {
+      setDelayedIsOpen(value);
+    });
+  }, [onSelectClick]);
+  var fixedDefaultQueue = useMemo(function () {
+    return normalizeQueue(propsDefaultQueue);
+  }, [propsDefaultQueue]);
+  var fixedQueues = useMemo(function () {
+    if (!propsQueues) {
+      return undefined;
+    }
+    return propsQueues.map(function (queue) {
+      return normalizeQueue(queue);
+    });
+  }, [propsQueues]);
+  var filterQueue = useCallback(function (queue) {
+    if (hideQueues === undefined || queue === undefined) {
+      return queue;
+    }
+    return hideQueues.has(queue.key) ? undefined : queue;
+  }, [hideQueues]);
+  var queues = useMemo(function () {
+    return filterQueues(fixedQueues || [], hideQueues);
+  }, [fixedQueues, hideQueues]);
+  var defaultQueue = filterQueue(fixedDefaultQueue) || filterQueue(fixedQueues === null || fixedQueues === void 0 ? void 0 : fixedQueues[0]) || filterQueue(queues[0]);
+  useEffect(function () {
+    if (!initialEmpty && Array.isArray(queues) && queues.length > 0) {
+      onChange === null || onChange === void 0 || onChange(defaultQueue !== null && defaultQueue !== void 0 ? defaultQueue : queues[0]);
+    }
+  }, [onChange, queues, defaultQueue, initialEmpty]);
+  var getQueues = useCallback(function (searchText) {
+    if (!onSearch) {
+      return new CancellablePromise(Promise.resolve([]), function () {});
+    }
+    var innerPromise = onSearch(searchText);
+    return new CancellablePromise(innerPromise.then(function (results) {
+      return filterQueues(results, hideQueues);
+    }), function () {
+      var _cancel, _ref2;
+      return (_cancel = (_ref2 = innerPromise).cancel) === null || _cancel === void 0 ? void 0 : _cancel.call(_ref2);
+    });
+  }, [onSearch, hideQueues]);
+  var handleDisplayRender = useCallback(function (value) {
+    return renderDisplayValue(value, withValueIcon, placeholder, size);
+  }, [placeholder, withValueIcon, size]);
+  var _useAutocomplete = useAutocomplete(getQueues),
+    filteredQueues = _useAutocomplete.filteredItems,
+    handleFilterChange = _useAutocomplete.handleFilterChange,
+    loadingQueues = _useAutocomplete.isLoading;
+  var _useState5 = useState(initialEmpty || !defaultQueue ? undefined : mapQueueToSelectItem((_queues$find = queues.find(function (item) {
+      return item.key === defaultQueue.key;
+    })) !== null && _queues$find !== void 0 ? _queues$find : defaultQueue, true)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    queue = _useState6[0],
+    setQueue = _useState6[1];
+  var items = useMemo(function () {
+    var queuesItems = filteredQueues !== null && filteredQueues !== void 0 ? filteredQueues : queues.length ? _toConsumableArray(queues) : [defaultQueue];
+    if (!filteredQueues && !queuesItems.some(function (q) {
+      return (q === null || q === void 0 ? void 0 : q.key) === (defaultQueue === null || defaultQueue === void 0 ? void 0 : defaultQueue.key);
+    })) {
+      queuesItems.unshift(defaultQueue);
+    }
+    return queuesItems.filter(Boolean).map(function (queueItem) {
+      var _queue$data;
+      return mapQueueToSelectItem(queueItem, (queueItem === null || queueItem === void 0 ? void 0 : queueItem.key) === (queue === null || queue === void 0 || (_queue$data = queue.data) === null || _queue$data === void 0 ? void 0 : _queue$data.key));
+    });
+  }, [defaultQueue, filteredQueues, queue === null || queue === void 0 || (_queue$data2 = queue.data) === null || _queue$data2 === void 0 ? void 0 : _queue$data2.key, queues]);
+  useUpdateEffect(function () {
+    var _queue$data3;
+    if (!initialEmpty && defaultQueue !== undefined && defaultQueue.key !== (queue === null || queue === void 0 || (_queue$data3 = queue.data) === null || _queue$data3 === void 0 ? void 0 : _queue$data3.key)) {
+      setQueue(mapQueueToSelectItem(defaultQueue, true));
+      onChange === null || onChange === void 0 || onChange(defaultQueue);
+    }
+  }, [defaultQueue, initialEmpty]);
+  var handleSelectUpdate = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(queueOption) {
+      var _queueOption$data, _queueOption$data2;
+      var selectedQueue, confirmResult;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            selectedQueue = {
+              key: queueOption.value,
+              showDefaultCreationForm: (_queueOption$data = queueOption.data) === null || _queueOption$data === void 0 ? void 0 : _queueOption$data.showDefaultCreationForm,
+              enableCloneMoveForAll: (_queueOption$data2 = queueOption.data) === null || _queueOption$data2 === void 0 ? void 0 : _queueOption$data2.enableCloneMoveForAll
+            };
+            if (!confirmUpdate) {
+              _context.next = 2;
+              break;
+            }
+            _context.next = 1;
+            return confirmUpdate();
+          case 1:
+            confirmResult = _context.sent;
+            if (confirmResult.success) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            onChange === null || onChange === void 0 || onChange(selectedQueue);
+            setQueue(mapQueueToSelectItem(queueOption.data, true));
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [confirmUpdate, onChange]);
+  useAutoFocus({
+    containerRef: popupContainerRef,
+    elementSelector: 'input',
+    shouldFocus: delayedIsOpen
+  });
+  var renderPopup = useCallback(function (_ref4) {
+    var renderList = _ref4.renderList,
+      renderFilter = _ref4.renderFilter;
+    return /*#__PURE__*/_jsxs("div", {
+      className: cnQueueSelect('popup-content'),
+      ref: popupContainerRef,
+      children: [renderFilter(), renderList()]
+    });
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: cnQueueSelect({
+      'with-border': withBorder,
+      loading: loading
+    }, className),
+    children: /*#__PURE__*/_jsx(Autocomplete, {
+      disablePortal: disablePortal,
+      filterPlaceholder: t('filter-placeholder'),
+      className: cnQueueSelect('control'),
+      popupClassName: cnQueueSelect('popup'),
+      controlClassName: cnQueueSelect('control-block', controlClassName),
+      id: id,
+      size: size,
+      options: items,
+      onFilterChange: withoutSuggest ? undefined : handleFilterChange,
+      onUpdate: handleSelectUpdate,
+      value: queue,
+      loading: loading,
+      loadingItems: loadingQueues,
+      popupWidth: popupWidth,
+      getOptionHeight: function getOptionHeight() {
+        return 48;
+      },
+      error: error,
+      withArrow: withArrow,
+      placeholder: placeholder,
+      renderFilter: renderFilter,
+      controlProps: {
+        'aria-label': t('select-queue')
+      },
+      title: t('queue'),
+      renderDisplayValue: handleDisplayRender,
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      disableTooltip: true,
+      name: "queue-input",
+      renderPopup: renderPopup
+    })
+  });
+};
+// #sourceMappingURL=QueueSelect.js.map

package/build/esm/components/QueueSelect/QueueSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","CancellablePromise","getConfig","useUpdateEffect","Autocomplete","useAutocomplete","useAutoFocus","useLocalizedString","cnQueueSelect","defaultMessages","filterQueues","mapQueueToSelectItem","normalizeQueue","renderDisplayValue","jsxs","_jsxs","jsx","_jsx","QueueSelect","_ref","_queues$find","_queue$data2","propsDefaultQueue","defaultQueue","propsQueues","queues","withoutSuggest","onChange","className","controlClassName","hideQueues","_ref$initialEmpty","initialEmpty","_ref$withBorder","withBorder","_ref$size","size","popupWidth","error","id","_ref$withValueIcon","withValueIcon","withArrow","placeholder","disablePortal","confirmUpdate","onSelectClick","renderFilter","_ref$loading","loading","onSearch","_useState","_useState2","_slicedToArray","isOpen","setIsOpen","_useState3","_useState4","delayedIsOpen","setDelayedIsOpen","popupContainerRef","config","_useLocalizedString","lang","t","handleOpenChange","value","requestAnimationFrame","fixedDefaultQueue","fixedQueues","undefined","map","queue","filterQueue","has","key","Array","isArray","length","getQueues","searchText","Promise","resolve","innerPromise","then","results","_cancel","_ref2","cancel","call","handleDisplayRender","_useAutocomplete","filteredQueues","filteredItems","handleFilterChange","loadingQueues","isLoading","_useState5","find","item","_useState6","setQueue","items","queuesItems","_toConsumableArray","some","q","unshift","filter","Boolean","queueItem","_queue$data","data","_queue$data3","handleSelectUpdate","_ref3","_asyncToGenerator","_regeneratorRuntime","mark","_callee","queueOption","_queueOption$data","_queueOption$data2","selectedQueue","confirmResult","wrap","_context","prev","next","showDefaultCreationForm","enableCloneMoveForAll","sent","success","abrupt","stop","_x","apply","arguments","containerRef","elementSelector","shouldFocus","renderPopup","_ref4","renderList","ref","children","filterPlaceholder","popupClassName","options","onFilterChange","onUpdate","loadingItems","getOptionHeight","controlProps","title","open","onOpenChange","disableTooltip","name"],"sources":["QueueSelect.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\nimport {CancellablePromise} from '@gravity-ui/sdk';\nimport type {SelectOption} from '@gravity-ui/uikit';\nimport {getConfig} from '@gravity-ui/uikit';\nimport {useUpdateEffect} from 'react-use';\n\nimport type {AutocompleteProps} from '~/src/components/Select/Autocomplete';\nimport {Autocomplete} from '~/src/components/Select/Autocomplete';\nimport {useAutocomplete} from '~/src/components/Select/hooks/useAutocomplete';\nimport {useAutoFocus} from '~/src/hooks/useAutoFocus';\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {cnQueueSelect} from './QueueSelect.classname';\nimport {defaultMessages} from './i18n';\nimport type {QueueInfo} from './types';\nimport {filterQueues} from './utils/filterQueues';\nimport {mapQueueToSelectItem} from './utils/mapQueueToSelectItem';\nimport {normalizeQueue} from './utils/normalizeQueue';\nimport {renderDisplayValue} from './utils/renderDisplayValue';\n\nimport './QueueSelect.scss';\n\nexport type QueueSelectProps = {\n    queues?: QueueInfo[] | string[];\n    defaultQueue?: QueueInfo | string;\n    loading?: boolean;\n    hideQueues?: ReadonlySet<string>;\n    onSearch?:\n        | ((text: string) => CancellablePromise<QueueInfo[]>)\n        | ((text: string) => Promise<QueueInfo[]>);\n    onChange?: (queue: QueueInfo) => void;\n    onSelectClick?: () => void;\n    initialEmpty?: boolean;\n    withoutSuggest?: boolean;\n    withValueIcon?: boolean;\n    confirmUpdate?: () => Promise<{success: boolean}>;\n    className?: string;\n    withBorder?: boolean;\n    size?: AutocompleteProps['size'];\n    popupWidth?: AutocompleteProps['popupWidth'];\n    error?: AutocompleteProps['error'];\n    id?: AutocompleteProps['id'];\n    withArrow?: AutocompleteProps['withArrow'];\n    placeholder?: AutocompleteProps['placeholder'];\n    renderFilter?: AutocompleteProps['renderFilter'];\n    controlClassName?: AutocompleteProps['controlClassName'];\n    disablePortal?: boolean;\n};\n\nexport const QueueSelect = ({\n    defaultQueue: propsDefaultQueue,\n    queues: propsQueues,\n    withoutSuggest,\n    onChange,\n    className,\n    controlClassName,\n    hideQueues,\n    initialEmpty = false,\n    withBorder = false,\n    size = 'm',\n    popupWidth,\n    error,\n    id,\n    withValueIcon = false,\n    withArrow,\n    placeholder,\n    disablePortal,\n    confirmUpdate,\n    onSelectClick,\n    renderFilter,\n    loading = false,\n    onSearch,\n}: QueueSelectProps) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const [delayedIsOpen, setDelayedIsOpen] = useState(false);\n    const popupContainerRef = useRef<HTMLDivElement>(null);\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n\n    const handleOpenChange = useCallback(\n        (value: boolean) => {\n            if (value) {\n                onSelectClick?.();\n            }\n            setIsOpen(value);\n            requestAnimationFrame(() => {\n                setDelayedIsOpen(value);\n            });\n        },\n        [onSelectClick],\n    );\n\n    const fixedDefaultQueue: QueueInfo | undefined = useMemo(\n        () => normalizeQueue(propsDefaultQueue),\n        [propsDefaultQueue],\n    );\n\n    const fixedQueues: QueueInfo[] | undefined = useMemo(() => {\n        if (!propsQueues) {\n            return undefined;\n        }\n        return propsQueues.map((queue: QueueInfo | string) => normalizeQueue(queue)!);\n    }, [propsQueues]);\n\n    const filterQueue = useCallback(\n        <TQueue extends QueueInfo | undefined>(queue: TQueue) => {\n            if (hideQueues === undefined || queue === undefined) {\n                return queue;\n            }\n            return (hideQueues.has(queue.key) ? undefined : queue) as TQueue;\n        },\n        [hideQueues],\n    );\n\n    const queues = useMemo(\n        () => filterQueues(fixedQueues || [], hideQueues),\n        [fixedQueues, hideQueues],\n    );\n\n    const defaultQueue =\n        filterQueue(fixedDefaultQueue) || filterQueue(fixedQueues?.[0]) || filterQueue(queues[0]);\n\n    useEffect(() => {\n        if (!initialEmpty && Array.isArray(queues) && queues.length > 0) {\n            onChange?.(defaultQueue ?? queues[0]!);\n        }\n    }, [onChange, queues, defaultQueue, initialEmpty]);\n\n    const getQueues = useCallback(\n        (searchText: string): CancellablePromise<QueueInfo[]> => {\n            if (!onSearch) {\n                return new CancellablePromise(Promise.resolve([]), () => {});\n            }\n            const innerPromise = onSearch(searchText);\n            return new CancellablePromise(\n                innerPromise.then((results) => filterQueues(results, hideQueues)),\n                () => (innerPromise as CancellablePromise<QueueInfo[]>).cancel?.(),\n            );\n        },\n        [onSearch, hideQueues],\n    );\n\n    const handleDisplayRender = useCallback(\n        (value: SelectOption<QueueInfo>[]) =>\n            renderDisplayValue(value, withValueIcon, placeholder, size),\n        [placeholder, withValueIcon, size],\n    );\n\n    const {\n        filteredItems: filteredQueues,\n        handleFilterChange,\n        isLoading: loadingQueues,\n    } = useAutocomplete<QueueInfo[]>(getQueues);\n\n    const [queue, setQueue] = useState<SelectOption<QueueInfo> | undefined>(\n        initialEmpty || !defaultQueue\n            ? undefined\n            : mapQueueToSelectItem(\n                  queues.find((item) => item.key === defaultQueue.key) ?? defaultQueue,\n                  true,\n              ),\n    );\n\n    const items = useMemo(() => {\n        const queuesItems = filteredQueues ?? (queues.length ? [...queues] : [defaultQueue]);\n\n        if (!filteredQueues && !queuesItems.some((q) => q?.key === defaultQueue?.key)) {\n            queuesItems.unshift(defaultQueue);\n        }\n\n        return queuesItems\n            .filter(Boolean)\n            .map((queueItem) =>\n                mapQueueToSelectItem(queueItem, queueItem?.key === queue?.data?.key),\n            ) as SelectOption<QueueInfo>[];\n    }, [defaultQueue, filteredQueues, queue?.data?.key, queues]);\n\n    useUpdateEffect(() => {\n        if (!initialEmpty && defaultQueue !== undefined && defaultQueue.key !== queue?.data?.key) {\n            setQueue(mapQueueToSelectItem(defaultQueue, true));\n            onChange?.(defaultQueue);\n        }\n    }, [defaultQueue, initialEmpty]);\n\n    const handleSelectUpdate = useCallback(\n        async (queueOption: SelectOption<QueueInfo>) => {\n            const selectedQueue = {\n                key: queueOption.value,\n                showDefaultCreationForm: queueOption.data?.showDefaultCreationForm,\n                enableCloneMoveForAll: queueOption.data?.enableCloneMoveForAll,\n            };\n\n            if (confirmUpdate) {\n                const confirmResult = await confirmUpdate();\n                if (!confirmResult.success) return;\n            }\n\n            onChange?.(selectedQueue);\n            setQueue(mapQueueToSelectItem(queueOption.data, true));\n        },\n        [confirmUpdate, onChange],\n    );\n\n    useAutoFocus({\n        containerRef: popupContainerRef,\n        elementSelector: 'input',\n        shouldFocus: delayedIsOpen,\n    });\n\n    const renderPopup = useCallback<NonNullable<AutocompleteProps['renderPopup']>>(\n        ({renderList, renderFilter}) => (\n            <div className={cnQueueSelect('popup-content')} ref={popupContainerRef}>\n                {renderFilter()}\n                {renderList()}\n            </div>\n        ),\n        [],\n    );\n\n    return (\n        <div className={cnQueueSelect({'with-border': withBorder, loading}, className)}>\n            <Autocomplete\n                disablePortal={disablePortal}\n                filterPlaceholder={t('filter-placeholder')}\n                className={cnQueueSelect('control')}\n                popupClassName={cnQueueSelect('popup')}\n                controlClassName={cnQueueSelect('control-block', controlClassName)}\n                id={id}\n                size={size}\n                options={items}\n                onFilterChange={withoutSuggest ? undefined : handleFilterChange}\n                onUpdate={handleSelectUpdate}\n                value={queue}\n                loading={loading}\n                loadingItems={loadingQueues}\n                popupWidth={popupWidth}\n                getOptionHeight={() => 48}\n                error={error}\n                withArrow={withArrow}\n                placeholder={placeholder}\n                renderFilter={renderFilter}\n                controlProps={{'aria-label': t('select-queue')}}\n                title={t('queue')}\n                renderDisplayValue={handleDisplayRender}\n                open={isOpen}\n                onOpenChange={handleOpenChange}\n                disableTooltip\n                name=\"queue-input\"\n                renderPopup={renderPopup}\n            />\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/QueueSelect/QueueSelect.scss

@@ -0,0 +1,142 @@
+.tpc-queue-select {
+    &:not(.tpc-queue-select_with-border) .tpc-select__button::before {
+        border: none;
+    }
+
+    &__control {
+        width: 100%;
+    }
+
+    &__control-block.g-button_size_xl .g-button__icon-inner {
+        color: var(--g-color-text-secondary);
+    }
+
+    &_mobile {
+        .tpc-queue-select__control-block {
+            --g-button-background-color-hover: transparent;
+            align-items: center;
+
+            height: auto;
+
+            color: var(--g-color-text-primary);
+        }
+
+        .g-select-list {
+            margin: var(--g-spacing-2) 0;
+        }
+    }
+
+    &__popup-content {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.tpc-queue-select__select-item_forPopup {
+    display: flex;
+    align-items: center;
+
+    .tpc-queue-select__select-item-texts {
+        display: flex;
+        flex-direction: column;
+
+        flex: auto;
+        min-width: 0;
+        padding-left: var(--g-spacing-3);
+    }
+
+    .tpc-queue-select__select-item-name,
+    .tpc-queue-select__select-item-key {
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-1-line-height);
+    }
+
+    .tpc-queue-select__select-item-name {
+        color: var(--g-color-text-primary);
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .tpc-queue-select__select-item-key {
+        color: var(--g-color-text-secondary);
+    }
+
+    .tpc-queue-select__select-item-icon {
+        min-width: 24px;
+    }
+}
+
+.tpc-queue-select__select-item_forControl {
+    display: flex;
+    align-items: center;
+
+    &_size-xl {
+        padding: var(--g-spacing-2) 0;
+    }
+
+    .tpc-queue-select__select-item-icon {
+        margin-right: var(--g-spacing-3);
+    }
+}
+
+.tpc-queue-select__select-item_platform_touch {
+    .tpc-queue-select__select-item-icon {
+        margin-right: var(--g-spacing-1);
+    }
+}
+
+.tpc-queue-select__control.tpc-queue-select__select-item {
+    &.tpc-queue-select__select-item_forPopup {
+        display: none;
+    }
+
+    &.tpc-queue-select__select-item_forControl {
+        display: flex;
+    }
+}
+
+.tpc-queue-select__popup.tpc-queue-select__select-item {
+    &.tpc-queue-select__select-item_forPopup {
+        display: flex;
+    }
+
+    &.tpc-queue-select__select-item_forControl {
+        display: none;
+    }
+}
+
+.tpc-queue-select__popup {
+    min-width: 320px;
+}
+
+.tpc-queue-select__select-value-name {
+    line-height: unset; // stylelint-disable-line
+
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.tpc-queue-select__select-display {
+    gap: var(--g-spacing-2);
+}
+
+.tpc-queue-select__search {
+    box-sizing: border-box;
+    padding: var(--g-spacing-2) var(--g-spacing-4);
+}
+
+.tpc-queue-select__list-item {
+    padding: 0;
+}
+
+.g-select-list__option_colored:has(.tpc-queue-select__list-item_selected) {
+    background-color: transparent;
+}
+
+.g-select-list__item.g-list__item_active:has(.tpc-queue-select__list-item_selected) {
+    background-color: transparent;
+}