@weavix/tracker-components 0.0.1

package/build/esm/components/QueueSelect/README.md

@@ -0,0 +1,249 @@
+# QueueSelect
+
+<!-- description:start -->
+A dropdown select component for choosing a Tracker queue. Supports static queue lists, async search/suggest, icons, loading states, and confirmation dialogs before selection changes.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {QueueSelect} from '@weavix/tracker-components';
+import type {QueueInfo} from '@weavix/tracker-components';
+
+const queues: QueueInfo[] = [
+    {key: 'DEV', display: 'Development'},
+    {key: 'DESIGN', display: 'Design'},
+];
+
+<QueueSelect
+    queues={queues}
+    defaultQueue={queues[0]}
+    onChange={(queue) => console.log(queue)}
+/>;
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * List of queues to display in the dropdown.
+     * Accepts either QueueInfo objects or plain queue key strings.
+     */
+    queues?: QueueInfo[] | string[];
+
+    /**
+     * The queue selected by default when the component mounts.
+     * Accepts either a QueueInfo object or a plain queue key string.
+     */
+    defaultQueue?: QueueInfo | string;
+
+    /**
+     * Whether the component is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * Set of queue keys to exclude from the displayed list.
+     */
+    hideQueues?: ReadonlySet<string>;
+
+    /**
+     * Async callback invoked when the user types in the search filter.
+     * Should return a promise resolving to a list of matching QueueInfo objects.
+     * When provided, the component fetches suggestions on each filter change.
+     */
+    onSearch?: (text: string) => Promise<QueueInfo[]> | CancellablePromise<QueueInfo[]>;
+
+    /**
+     * Callback fired when the selected queue changes.
+     */
+    onChange?: (queue: QueueInfo) => void;
+
+    /**
+     * Callback fired when the select control is clicked/opened.
+     */
+    onSelectClick?: () => void;
+
+    /**
+     * When true, no queue is pre-selected on mount.
+     * @default false
+     */
+    initialEmpty?: boolean;
+
+    /**
+     * When true, disables the search/filter input inside the dropdown.
+     * @default false
+     */
+    withoutSuggest?: boolean;
+
+    /**
+     * When true, shows a queue icon next to the selected value in the control.
+     * @default false
+     */
+    withValueIcon?: boolean;
+
+    /**
+     * Optional async guard called before applying a new selection.
+     * Return { success: true } to allow the change, { success: false } to cancel it.
+     */
+    confirmUpdate?: () => Promise<{success: boolean}>;
+
+    /**
+     * Additional CSS class applied to the root element.
+     */
+    className?: string;
+
+    /**
+     * When true, renders a visible border around the control.
+     * @default false
+     */
+    withBorder?: boolean;
+
+    /**
+     * Size of the select control.
+     * @default 'm'
+     */
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+
+    /**
+     * Width of the dropdown popup in pixels, or 'fit' / 'outfit'.
+     */
+    popupWidth?: number | 'fit' | 'outfit';
+
+    /**
+     * Error message or boolean to display an error state on the control.
+     */
+    error?: string | boolean;
+
+    /**
+     * HTML id attribute for the underlying select control.
+     */
+    id?: string;
+
+    /**
+     * When false, hides the dropdown arrow indicator.
+     */
+    withArrow?: boolean;
+
+    /**
+     * Placeholder text shown when no queue is selected.
+     */
+    placeholder?: string;
+
+    /**
+     * Custom render function for the filter input inside the popup.
+     */
+    renderFilter?: (props: object) => React.ReactNode;
+
+    /**
+     * Additional CSS class applied to the inner control block.
+     */
+    controlClassName?: string;
+
+    /**
+     * When true, the dropdown popup renders inline instead of in a portal.
+     * @default false
+     */
+    disablePortal?: boolean;
+}
+```
+<!-- props:end -->
+
+## Types
+
+```ts
+type QueueInfo = {
+    /** Queue key, e.g. "DEV" */
+    key: string;
+    /** Human-readable queue name */
+    display?: string;
+    showDefaultCreationForm?: boolean;
+    enableCloneMoveForAll?: boolean;
+};
+
+type QueueSuggestItem = {
+    key: string;
+    name?: string;
+    showDefaultCreationForm?: boolean;
+    enableCloneMoveForAll?: boolean;
+};
+```
+
+---
+
+## Tracker API
+
+`QueueSelect` is data-agnostic — it accepts queues via the `queues` prop and search results via the `onSearch` callback. You are responsible for fetching data from the Tracker API and passing it to the component.
+
+There are two fetch flows depending on whether the user has typed anything in the search filter.
+
+### Flow 1 — Initial load (no user input)
+
+When the dropdown opens without any search text, fetch the full queue list:
+
+```ts
+const result = await trackerApi.v3.get['/queues']();
+return result.data; // QueueInfo[]
+```
+
+### Flow 2 — Suggest (non-empty user input)
+
+When the user types in the filter, fetch suggestions using the suggest endpoint:
+
+```ts
+const result = await trackerApi.v3.get['/queues/_suggest']({
+    queryParams: {input: text, fields: []},
+});
+return result.data; // QueueInfo[]
+```
+
+### Example: static initial list + async suggest
+
+The example below loads queues once on mount (Flow 1) and switches to the suggest endpoint (Flow 2) as soon as the user starts typing.
+
+```tsx
+import React, {useEffect, useState} from 'react';
+import {CancellablePromise} from '@gravity-ui/sdk';
+import {QueueSelect} from '@weavix/tracker-components';
+import type {QueueInfo} from '@weavix/tracker-components';
+
+interface Props {
+    trackerApi: TrackerApi; // your Tracker API client
+    onChange: (queue: QueueInfo) => void;
+}
+
+export const QueueSelectWithApi: React.FC<Props> = ({trackerApi, onChange}) => {
+    const [queues, setQueues] = useState<QueueInfo[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    // Flow 1 — fetch all queues on mount (no user input)
+    useEffect(() => {
+        trackerApi.v3
+            .get['/queues']()
+            .then((result) => setQueues(result.data))
+            .finally(() => setLoading(false));
+    }, [trackerApi]);
+
+    // Flow 2 — suggest queues when the user types
+    const handleSearch = (text: string): CancellablePromise<QueueInfo[]> => {
+        const promise = trackerApi.v3
+            .get['/queues/_suggest']({queryParams: {input: text, fields: []}})
+            .then((result) => result.data);
+
+        return new CancellablePromise(promise, () => {});
+    };
+
+    return (
+        <QueueSelect
+            queues={queues}
+            loading={loading}
+            onSearch={handleSearch}
+            onChange={onChange}
+            placeholder="Select a queue"
+        />
+    );
+};
+```

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

@@ -0,0 +1,2 @@
+import type { ButtonSize } from '@gravity-ui/uikit';
+export declare const iconSizeByButtonSize: Record<ButtonSize, number>;

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

@@ -0,0 +1,8 @@
+export var iconSizeByButtonSize = {
+  xl: 28,
+  l: 24,
+  m: 22,
+  s: 16,
+  xs: 12
+};
+// #sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconSizeByButtonSize","xl","l","m","s","xs"],"sources":["constants.ts"],"sourcesContent":["import type {ButtonSize} from '@gravity-ui/uikit';\n\nexport const iconSizeByButtonSize: Record<ButtonSize, number> = {\n    xl: 28,\n    l: 24,\n    m: 22,\n    s: 16,\n    xs: 12,\n};\n"],"mappings":"AAEA,OAAO,IAAMA,oBAAgD,GAAG;EAC5DC,EAAE,EAAE,EAAE;EACNC,CAAC,EAAE,EAAE;EACLC,CAAC,EAAE,EAAE;EACLC,CAAC,EAAE,EAAE;EACLC,EAAE,EAAE;AACR,CAAC","ignoreList":[]}

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

@@ -0,0 +1,34 @@
+export declare const defaultMessages: {
+    'all-items-link': {
+        ru: string;
+        en: string;
+    };
+    favorite: {
+        ru: string;
+        en: string;
+    };
+    'filter-placeholder': {
+        ru: string;
+        en: string;
+    };
+    mine: {
+        ru: string;
+        en: string;
+    };
+    owner: {
+        ru: string;
+        en: string;
+    };
+    queue: {
+        ru: string;
+        en: string;
+    };
+    'recently-viewed': {
+        ru: string;
+        en: string;
+    };
+    'select-queue': {
+        ru: string;
+        en: string;
+    };
+};

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

@@ -0,0 +1,35 @@
+export var defaultMessages = {
+  'all-items-link': {
+    ru: 'Все очереди организации',
+    en: 'All organization queues'
+  },
+  favorite: {
+    ru: 'Избранные',
+    en: 'Favorites'
+  },
+  'filter-placeholder': {
+    ru: 'Название или ключ очереди',
+    en: 'Queue name or key'
+  },
+  mine: {
+    ru: 'Мои очереди',
+    en: 'My queues'
+  },
+  owner: {
+    ru: 'Я владелец',
+    en: 'Owner'
+  },
+  queue: {
+    ru: 'Очередь',
+    en: 'Queue'
+  },
+  'recently-viewed': {
+    ru: 'Недавно просмотренные',
+    en: 'Recently viewed'
+  },
+  'select-queue': {
+    ru: 'Выбрать очередь',
+    en: 'Select queue'
+  }
+};
+// #sourceMappingURL=i18n.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultMessages","ru","en","favorite","mine","owner","queue"],"sources":["i18n.ts"],"sourcesContent":["export const defaultMessages = {\n    'all-items-link': {\n        ru: 'Все очереди организации',\n        en: 'All organization queues',\n    },\n    favorite: {\n        ru: 'Избранные',\n        en: 'Favorites',\n    },\n    'filter-placeholder': {\n        ru: 'Название или ключ очереди',\n        en: 'Queue name or key',\n    },\n    mine: {\n        ru: 'Мои очереди',\n        en: 'My queues',\n    },\n    owner: {\n        ru: 'Я владелец',\n        en: 'Owner',\n    },\n    queue: {\n        ru: 'Очередь',\n        en: 'Queue',\n    },\n    'recently-viewed': {\n        ru: 'Недавно просмотренные',\n        en: 'Recently viewed',\n    },\n    'select-queue': {\n        ru: 'Выбрать очередь',\n        en: 'Select queue',\n    },\n};\n"],"mappings":"AAAA,OAAO,IAAMA,eAAe,GAAG;EAC3B,gBAAgB,EAAE;IACdC,EAAE,EAAE,yBAAyB;IAC7BC,EAAE,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACNF,EAAE,EAAE,WAAW;IACfC,EAAE,EAAE;EACR,CAAC;EACD,oBAAoB,EAAE;IAClBD,EAAE,EAAE,2BAA2B;IAC/BC,EAAE,EAAE;EACR,CAAC;EACDE,IAAI,EAAE;IACFH,EAAE,EAAE,aAAa;IACjBC,EAAE,EAAE;EACR,CAAC;EACDG,KAAK,EAAE;IACHJ,EAAE,EAAE,YAAY;IAChBC,EAAE,EAAE;EACR,CAAC;EACDI,KAAK,EAAE;IACHL,EAAE,EAAE,SAAS;IACbC,EAAE,EAAE;EACR,CAAC;EACD,iBAAiB,EAAE;IACfD,EAAE,EAAE,uBAAuB;IAC3BC,EAAE,EAAE;EACR,CAAC;EACD,cAAc,EAAE;IACZD,EAAE,EAAE,iBAAiB;IACrBC,EAAE,EAAE;EACR;AACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+export { QueueSelect } from './QueueSelect';
+export type { QueueSelectProps } from './QueueSelect';
+export type { QueueInfo, QueueSuggestItem } from './types';

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

@@ -0,0 +1,2 @@
+export { QueueSelect } from "./QueueSelect";
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["QueueSelect"],"sources":["index.ts"],"sourcesContent":["export {QueueSelect} from './QueueSelect';\nexport type {QueueSelectProps} from './QueueSelect';\nexport type {QueueInfo, QueueSuggestItem} from './types';\n"],"mappings":"AAAA,SAAQA,WAAW","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+export type QueueInfo = {
+    key: string;
+    display?: string;
+    showDefaultCreationForm?: boolean;
+    enableCloneMoveForAll?: boolean;
+};
+export type QueueSuggestItem = {
+    key: string;
+    name?: string;
+    showDefaultCreationForm?: boolean;
+    enableCloneMoveForAll?: boolean;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type QueueInfo = {\n    key: string;\n    display?: string;\n    showDefaultCreationForm?: boolean;\n    enableCloneMoveForAll?: boolean;\n};\n\nexport type QueueSuggestItem = {\n    key: string;\n    name?: string;\n    showDefaultCreationForm?: boolean;\n    enableCloneMoveForAll?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import type { QueueInfo } from '../types';
+export declare const filterQueues: <TQueues extends Array<QueueInfo> | undefined>(queues?: TQueues, hideQueues?: ReadonlySet<string>) => QueueInfo[];

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

@@ -0,0 +1,16 @@
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
+import "core-js/modules/es.object.to-string.js";
+export var filterQueues = function filterQueues(queues, hideQueues) {
+  if (queues === undefined) {
+    return [];
+  }
+  if (hideQueues === undefined) {
+    return queues;
+  }
+  return queues.filter(function (queue) {
+    return !hideQueues.has(queue.key);
+  });
+};
+// #sourceMappingURL=filterQueues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["filterQueues","queues","hideQueues","undefined","filter","queue","has","key"],"sources":["filterQueues.ts"],"sourcesContent":["import type {QueueInfo} from '../types';\n\nexport const filterQueues = <TQueues extends Array<QueueInfo> | undefined>(\n    queues?: TQueues,\n    hideQueues?: ReadonlySet<string>,\n): QueueInfo[] => {\n    if (queues === undefined) {\n        return [];\n    }\n\n    if (hideQueues === undefined) {\n        return queues;\n    }\n\n    return queues.filter((queue) => !hideQueues.has(queue.key));\n};\n"],"mappings":";;;;AAEA,OAAO,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CACrBC,MAAgB,EAChBC,UAAgC,EAClB;EACd,IAAID,MAAM,KAAKE,SAAS,EAAE;IACtB,OAAO,EAAE;EACb;EAEA,IAAID,UAAU,KAAKC,SAAS,EAAE;IAC1B,OAAOF,MAAM;EACjB;EAEA,OAAOA,MAAM,CAACG,MAAM,CAAC,UAACC,KAAK;IAAA,OAAK,CAACH,UAAU,CAACI,GAAG,CAACD,KAAK,CAACE,GAAG,CAAC;EAAA,EAAC;AAC/D,CAAC","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { QueueInfo } from '../types';
+export declare const mapQueueToSelectItem: (queue?: QueueInfo, selected?: boolean) => {
+    data: QueueInfo | undefined;
+    value: string;
+    content: React.JSX.Element;
+    selected: boolean;
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { QueueIcon } from "./../../QueueIcon/QueueIcon";
+import { cnQueueSelect } from "../QueueSelect.classname";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var mapQueueToSelectItem = function mapQueueToSelectItem(queue) {
+  var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var queueId = (queue === null || queue === void 0 ? void 0 : queue.key) || '';
+  var content = /*#__PURE__*/_jsxs("div", {
+    className: cnQueueSelect('select-item', {
+      forPopup: true
+    }),
+    children: [/*#__PURE__*/_jsx(QueueIcon, {
+      queueId: queueId,
+      className: cnQueueSelect('select-item-icon'),
+      size: 24
+    }), /*#__PURE__*/_jsxs("div", {
+      className: cnQueueSelect('select-item-texts'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cnQueueSelect('select-item-name'),
+        children: (queue === null || queue === void 0 ? void 0 : queue.display) || (queue === null || queue === void 0 ? void 0 : queue.key)
+      }), /*#__PURE__*/_jsx("div", {
+        "data-testid": "".concat(queueId, "-key"),
+        className: cnQueueSelect('select-item-key'),
+        children: queueId
+      })]
+    })]
+  });
+  return {
+    data: queue,
+    value: queueId,
+    content: content,
+    selected: selected
+  };
+};
+// #sourceMappingURL=mapQueueToSelectItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","QueueIcon","cnQueueSelect","jsx","_jsx","jsxs","_jsxs","mapQueueToSelectItem","queue","selected","arguments","length","undefined","queueId","key","content","className","forPopup","children","size","display","concat","data","value"],"sources":["mapQueueToSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {QueueIcon} from '~/src/components/QueueIcon/QueueIcon';\n\nimport {cnQueueSelect} from '../QueueSelect.classname';\nimport type {QueueInfo} from '../types';\n\nexport const mapQueueToSelectItem = (queue?: QueueInfo, selected = false) => {\n    const queueId = queue?.key || '';\n\n    const content = (\n        <div className={cnQueueSelect('select-item', {forPopup: true})}>\n            <QueueIcon queueId={queueId} className={cnQueueSelect('select-item-icon')} size={24} />\n            <div className={cnQueueSelect('select-item-texts')}>\n                <div className={cnQueueSelect('select-item-name')}>\n                    {queue?.display || queue?.key}\n                </div>\n                <div data-testid={`${queueId}-key`} className={cnQueueSelect('select-item-key')}>\n                    {queueId}\n                </div>\n            </div>\n        </div>\n    );\n\n    return {\n        data: queue,\n        value: queueId,\n        content,\n        selected,\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,SAAS;AAEjB,SAAQC,aAAa;AAAkC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGvD,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAAiB,EAAuB;EAAA,IAArBC,QAAQ,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EACpE,IAAMG,OAAO,GAAG,CAAAL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,GAAG,KAAI,EAAE;EAEhC,IAAMC,OAAO,gBACTT,KAAA;IAAKU,SAAS,EAAEd,aAAa,CAAC,aAAa,EAAE;MAACe,QAAQ,EAAE;IAAI,CAAC,CAAE;IAAAC,QAAA,gBAC3Dd,IAAA,CAACH,SAAS;MAACY,OAAO,EAAEA,OAAQ;MAACG,SAAS,EAAEd,aAAa,CAAC,kBAAkB,CAAE;MAACiB,IAAI,EAAE;IAAG,CAAE,CAAC,eACvFb,KAAA;MAAKU,SAAS,EAAEd,aAAa,CAAC,mBAAmB,CAAE;MAAAgB,QAAA,gBAC/Cd,IAAA;QAAKY,SAAS,EAAEd,aAAa,CAAC,kBAAkB,CAAE;QAAAgB,QAAA,EAC7C,CAAAV,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,OAAO,MAAIZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,GAAG;MAAA,CAC5B,CAAC,eACNV,IAAA;QAAK,kBAAAiB,MAAA,CAAgBR,OAAO,SAAO;QAACG,SAAS,EAAEd,aAAa,CAAC,iBAAiB,CAAE;QAAAgB,QAAA,EAC3EL;MAAO,CACP,CAAC;IAAA,CACL,CAAC;EAAA,CACL,CACR;EAED,OAAO;IACHS,IAAI,EAAEd,KAAK;IACXe,KAAK,EAAEV,OAAO;IACdE,OAAO,EAAPA,OAAO;IACPN,QAAQ,EAARA;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import type { QueueInfo } from '../types';
+export declare const normalizeQueue: (queue: QueueInfo | undefined | string) => QueueInfo | undefined;

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

@@ -0,0 +1,9 @@
+export var normalizeQueue = function normalizeQueue(queue) {
+  if (!queue) {
+    return undefined;
+  }
+  return typeof queue === 'string' ? {
+    key: queue
+  } : queue;
+};
+// #sourceMappingURL=normalizeQueue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["normalizeQueue","queue","undefined","key"],"sources":["normalizeQueue.ts"],"sourcesContent":["import type {QueueInfo} from '../types';\n\nexport const normalizeQueue = (queue: QueueInfo | undefined | string): QueueInfo | undefined => {\n    if (!queue) {\n        return undefined;\n    }\n\n    return typeof queue === 'string' ? {key: queue} : queue;\n};\n"],"mappings":"AAEA,OAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAqC,EAA4B;EAC5F,IAAI,CAACA,KAAK,EAAE;IACR,OAAOC,SAAS;EACpB;EAEA,OAAO,OAAOD,KAAK,KAAK,QAAQ,GAAG;IAACE,GAAG,EAAEF;EAAK,CAAC,GAAGA,KAAK;AAC3D,CAAC","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ButtonSize, SelectOption } from '@gravity-ui/uikit';
+import type { QueueInfo } from '../types';
+export declare const renderDisplayValue: (valueOptions: SelectOption<QueueInfo>[], withValueIcon?: boolean, placeholder?: ReactNode, buttonSize?: ButtonSize) => string | number | true | React.JSX.Element | Iterable<ReactNode>;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import { QueueIcon } from "./../../QueueIcon/QueueIcon";
+import { cnQueueSelect } from "../QueueSelect.classname";
+import { iconSizeByButtonSize } from "../constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var renderDisplayValue = function renderDisplayValue(valueOptions) {
+  var _valueOptions$, _queue$display;
+  var withValueIcon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var placeholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var buttonSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'm';
+  var queue = (_valueOptions$ = valueOptions[0]) === null || _valueOptions$ === void 0 ? void 0 : _valueOptions$.data;
+  var queueId = (queue === null || queue === void 0 ? void 0 : queue.key) || '';
+  var iconSize = iconSizeByButtonSize[buttonSize];
+  if (valueOptions.length === 0) {
+    return placeholder || '—';
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: cnQueueSelect('select-item', {
+      forControl: true,
+      size: buttonSize
+    }),
+    children: [withValueIcon && /*#__PURE__*/_jsx(QueueIcon, {
+      queueId: queueId,
+      className: cnQueueSelect('select-item-icon'),
+      size: iconSize
+    }), /*#__PURE__*/_jsxs(Text, {
+      className: cnQueueSelect('select-value-name'),
+      variant: "body-1",
+      color: "primary",
+      children: [queueId, ": ", (_queue$display = queue === null || queue === void 0 ? void 0 : queue.display) !== null && _queue$display !== void 0 ? _queue$display : queueId]
+    })]
+  });
+};
+// #sourceMappingURL=renderDisplayValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","QueueIcon","cnQueueSelect","iconSizeByButtonSize","jsx","_jsx","jsxs","_jsxs","renderDisplayValue","valueOptions","_valueOptions$","_queue$display","withValueIcon","arguments","length","undefined","placeholder","buttonSize","queue","data","queueId","key","iconSize","className","forControl","size","children","variant","color","display"],"sources":["renderDisplayValue.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport React from 'react';\n\nimport type {ButtonSize, SelectOption} from '@gravity-ui/uikit';\nimport {Text} from '@gravity-ui/uikit';\n\nimport {QueueIcon} from '~/src/components/QueueIcon/QueueIcon';\n\nimport {cnQueueSelect} from '../QueueSelect.classname';\nimport {iconSizeByButtonSize} from '../constants';\nimport type {QueueInfo} from '../types';\n\nexport const renderDisplayValue = (\n    valueOptions: SelectOption<QueueInfo>[],\n    withValueIcon = false,\n    placeholder: ReactNode = '',\n    buttonSize: ButtonSize = 'm',\n) => {\n    const queue = valueOptions[0]?.data;\n    const queueId = queue?.key || '';\n    const iconSize = iconSizeByButtonSize[buttonSize];\n\n    if (valueOptions.length === 0) {\n        return placeholder || '—';\n    }\n\n    return (\n        <div className={cnQueueSelect('select-item', {forControl: true, size: buttonSize})}>\n            {withValueIcon && (\n                <QueueIcon\n                    queueId={queueId}\n                    className={cnQueueSelect('select-item-icon')}\n                    size={iconSize}\n                />\n            )}\n            <Text className={cnQueueSelect('select-value-name')} variant=\"body-1\" color=\"primary\">\n                {queueId}: {queue?.display ?? queueId}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAAQC,IAAI,QAAO,mBAAmB;AAEtC,SAAQC,SAAS;AAEjB,SAAQC,aAAa;AACrB,SAAQC,oBAAoB;AAAsB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlD,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAC3BC,YAAuC,EAItC;EAAA,IAAAC,cAAA,EAAAC,cAAA;EAAA,IAHDC,aAAa,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,IACrBG,WAAsB,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAAA,IAC3BI,UAAsB,GAAAJ,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,GAAG;EAE5B,IAAMK,KAAK,IAAAR,cAAA,GAAGD,YAAY,CAAC,CAAC,CAAC,cAAAC,cAAA,uBAAfA,cAAA,CAAiBS,IAAI;EACnC,IAAMC,OAAO,GAAG,CAAAF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,GAAG,KAAI,EAAE;EAChC,IAAMC,QAAQ,GAAGnB,oBAAoB,CAACc,UAAU,CAAC;EAEjD,IAAIR,YAAY,CAACK,MAAM,KAAK,CAAC,EAAE;IAC3B,OAAOE,WAAW,IAAI,GAAG;EAC7B;EAEA,oBACIT,KAAA;IAAKgB,SAAS,EAAErB,aAAa,CAAC,aAAa,EAAE;MAACsB,UAAU,EAAE,IAAI;MAAEC,IAAI,EAAER;IAAU,CAAC,CAAE;IAAAS,QAAA,GAC9Ed,aAAa,iBACVP,IAAA,CAACJ,SAAS;MACNmB,OAAO,EAAEA,OAAQ;MACjBG,SAAS,EAAErB,aAAa,CAAC,kBAAkB,CAAE;MAC7CuB,IAAI,EAAEH;IAAS,CAClB,CACJ,eACDf,KAAA,CAACP,IAAI;MAACuB,SAAS,EAAErB,aAAa,CAAC,mBAAmB,CAAE;MAACyB,OAAO,EAAC,QAAQ;MAACC,KAAK,EAAC,SAAS;MAAAF,QAAA,GAChFN,OAAO,EAAC,IAAE,GAAAT,cAAA,GAACO,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEW,OAAO,cAAAlB,cAAA,cAAAA,cAAA,GAAIS,OAAO;IAAA,CACnC,CAAC;EAAA,CACN,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SelectOption } from '@gravity-ui/uikit';
+import type { MultiAutocompleteProps } from './MultiAutocomplete';
+export type AutocompleteProps<TValue = any> = Omit<MultiAutocompleteProps, 'multiple' | 'value' | 'onUpdate'> & {
+    value?: SelectOption<TValue>;
+    onUpdate: (value: SelectOption<TValue>) => void;
+};
+export declare const Autocomplete: React.ForwardRefExoticComponent<Omit<MultiAutocompleteProps, "multiple" | "onUpdate" | "value"> & {
+    value?: SelectOption<any> | undefined;
+    onUpdate: (value: SelectOption<any>) => void;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,27 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onUpdate"];
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { MultiAutocomplete } from "./MultiAutocomplete";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- It's currently used everywhere without a generic
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var normalizedValue = useMemo(function () {
+    return value ? [value] : [];
+  }, [value]);
+  var handleUpdate = useCallback(function (values) {
+    onUpdate(values[0]);
+  }, [onUpdate]);
+  return /*#__PURE__*/_jsx(MultiAutocomplete, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    value: normalizedValue,
+    onUpdate: handleUpdate,
+    multiple: false
+  }));
+});
+Autocomplete.displayName = 'Autocomplete';
+// #sourceMappingURL=Autocomplete.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useCallback","useMemo","MultiAutocomplete","jsx","_jsx","Autocomplete","_ref","ref","value","onUpdate","props","_objectWithoutProperties","_excluded","normalizedValue","handleUpdate","values","_objectSpread","multiple","displayName"],"sources":["Autocomplete.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react';\n\nimport type {SelectOption} from '@gravity-ui/uikit';\n\nimport type {MultiAutocompleteProps} from './MultiAutocomplete';\nimport {MultiAutocomplete} from './MultiAutocomplete';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- It's currently used everywhere without a generic\nexport type AutocompleteProps<TValue = any> = Omit<\n    MultiAutocompleteProps,\n    'multiple' | 'value' | 'onUpdate'\n> & {\n    value?: SelectOption<TValue>;\n    onUpdate: (value: SelectOption<TValue>) => void;\n};\n\nexport const Autocomplete = forwardRef<HTMLButtonElement, AutocompleteProps>(\n    ({value, onUpdate, ...props}, ref) => {\n        const normalizedValue = useMemo(() => (value ? [value] : []), [value]);\n\n        const handleUpdate = useCallback(\n            (values: SelectOption[]) => {\n                onUpdate(values[0]!);\n            },\n            [onUpdate],\n        );\n\n        return (\n            <MultiAutocomplete\n                {...props}\n                ref={ref}\n                value={normalizedValue}\n                onUpdate={handleUpdate}\n                multiple={false}\n            />\n        );\n    },\n);\n\nAutocomplete.displayName = 'Autocomplete';\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAGC,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAK7D,SAAQC,iBAAiB;;AAEzB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASA,OAAO,IAAMC,YAAY,gBAAGN,UAAU,CAClC,UAAAO,IAAA,EAA8BC,GAAG,EAAK;EAAA,IAApCC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACvB,IAAMC,eAAe,GAAGZ,OAAO,CAAC;IAAA,OAAOO,KAAK,GAAG,CAACA,KAAK,CAAC,GAAG,EAAE;EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEtE,IAAMM,YAAY,GAAGd,WAAW,CAC5B,UAACe,MAAsB,EAAK;IACxBN,QAAQ,CAACM,MAAM,CAAC,CAAC,CAAE,CAAC;EACxB,CAAC,EACD,CAACN,QAAQ,CACb,CAAC;EAED,oBACIL,IAAA,CAACF,iBAAiB,EAAAc,aAAA,CAAAA,aAAA,KACVN,KAAK;IACTH,GAAG,EAAEA,GAAI;IACTC,KAAK,EAAEK,eAAgB;IACvBJ,QAAQ,EAAEK,YAAa;IACvBG,QAAQ,EAAE;EAAM,EACnB,CAAC;AAEV,CACJ,CAAC;AAEDZ,YAAY,CAACa,WAAW,GAAG,cAAc","ignoreList":[]}

package/build/esm/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/esm/components/Select/MultiAutocomplete.js

@@ -0,0 +1,61 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["options", "value", "onUpdate", "onFilterChange", "searchDelay"];
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.some.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 React, { forwardRef, useCallback, useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { MultiSelect } from "./MultiSelect";
+import { filterAutocompleteOption } from "./utils/filterAutocompleteOption";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MultiAutocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onFilterChange = _ref.onFilterChange,
+    searchDelay = _ref.searchDelay,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleFilterChange = useMemo(function () {
+    return onFilterChange ? debounce(onFilterChange, searchDelay) : undefined;
+  }, [onFilterChange, searchDelay]);
+  var optionsWithValue = useMemo(function () {
+    return [].concat(_toConsumableArray(value !== null && value !== void 0 ? value : []), _toConsumableArray((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 = useCallback(function (newValue) {
+    onUpdate(newValue.map(function (valueItem) {
+      return optionsWithValue.find(function (option) {
+        return 'value' in option && option.value === valueItem;
+      });
+    }));
+  }, [onUpdate, optionsWithValue]);
+  var selectValue = useMemo(function () {
+    return value === null || value === void 0 ? void 0 : value.map(function (valueItem) {
+      return valueItem.value;
+    });
+  }, [value]);
+  return /*#__PURE__*/_jsx(MultiSelect, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    onUpdate: handleUpdate,
+    value: selectValue,
+    options: optionsWithValue,
+    onFilterChange: handleFilterChange,
+    filterable: true,
+    filterOption: filterAutocompleteOption
+  }));
+});
+MultiAutocomplete.displayName = 'MultiAutocomplete';
+// #sourceMappingURL=MultiAutocomplete.js.map