@weavix/tracker-components 0.0.3 → 0.1.1

package/build/esm/components/Icon/MetaEntityIcon/MetaEntityIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","GoalIcon","KeyResultIcon","PortfolioIcon","ProjectIcon","jsx","_jsx","MetaEntityIcon","_ref","entity","_ref$size","size","entityType","id","shortId","portfolioId","projectId","Number","goalId"],"sources":["MetaEntityIcon.tsx"],"sourcesContent":["import React from 'react';\nimport type {FC} from 'react';\n\nimport type {MetaEntityV2} from '@weavix/tracker-api-types';\n\nimport {GoalIcon} from '../GoalIcon';\nimport {KeyResultIcon} from '../KeyResultIcon';\nimport {PortfolioIcon} from '../PortfolioIcon';\nimport {ProjectIcon} from '../ProjectIcon';\n\nexport type MetaEntityIconProps = {\n    entity: Pick<MetaEntityV2, 'entityType' | 'id' | 'shortId'>;\n    size?: number;\n};\n\nexport const MetaEntityIcon: FC<MetaEntityIconProps> = ({entity, size = 20}) => {\n    const {entityType, id, shortId} = entity;\n\n    switch (entityType) {\n        case 'portfolio':\n            return <PortfolioIcon portfolioId={id} size={size} />;\n        case 'project':\n            return <ProjectIcon projectId={Number(shortId)} size={size} />;\n        case 'goal':\n            return <GoalIcon goalId={Number(shortId)} size={size} />;\n        case 'keyResult' as unknown as MetaEntityV2['entityType']:\n            return <KeyResultIcon size={size} />;\n        default:\n            return null;\n    }\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAKzB,SAAQC,QAAQ;AAChB,SAAQC,aAAa;AACrB,SAAQC,aAAa;AACrB,SAAQC,WAAW;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAO3C,OAAO,IAAMC,cAAuC,GAAG,SAA1CA,cAAuCA,CAAAC,IAAA,EAA4B;EAAA,IAAvBC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAAC,SAAA,GAAAF,IAAA,CAAEG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;EACtE,IAAOE,UAAU,GAAiBH,MAAM,CAAjCG,UAAU;IAAEC,EAAE,GAAaJ,MAAM,CAArBI,EAAE;IAAEC,OAAO,GAAIL,MAAM,CAAjBK,OAAO;EAE9B,QAAQF,UAAU;IACd,KAAK,WAAW;MACZ,oBAAON,IAAA,CAACH,aAAa;QAACY,WAAW,EAAEF,EAAG;QAACF,IAAI,EAAEA;MAAK,CAAE,CAAC;IACzD,KAAK,SAAS;MACV,oBAAOL,IAAA,CAACF,WAAW;QAACY,SAAS,EAAEC,MAAM,CAACH,OAAO,CAAE;QAACH,IAAI,EAAEA;MAAK,CAAE,CAAC;IAClE,KAAK,MAAM;MACP,oBAAOL,IAAA,CAACL,QAAQ;QAACiB,MAAM,EAAED,MAAM,CAACH,OAAO,CAAE;QAACH,IAAI,EAAEA;MAAK,CAAE,CAAC;IAC5D,KAAK,WAAW;MACZ,oBAAOL,IAAA,CAACJ,aAAa;QAACS,IAAI,EAAEA;MAAK,CAAE,CAAC;IACxC;MACI,OAAO,IAAI;EACnB;AACJ,CAAC","ignoreList":[]}

package/build/esm/components/Icon/MetaEntityIcon/README.md

@@ -0,0 +1,126 @@
+# MetaEntityIcon
+
+<!-- description:start -->
+A dispatcher component that renders the correct icon for any Tracker meta entity type — project, portfolio, goal, or key result. Pass the entity object and the component automatically selects and renders the appropriate icon with a deterministic color derived from the entity ID.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {MetaEntityIcon} from '@weavix/tracker-components';
+
+<MetaEntityIcon entity={{entityType: 'project', id: 'proj-1', shortId: 42}} />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * The meta entity to display an icon for.
+     * Only `entityType`, `id`, and `shortId` are required.
+     */
+    entity: {
+        entityType: 'project' | 'portfolio' | 'goal' | 'keyResult';
+        /** String entity ID (used for portfolio color generation). */
+        id: string;
+        /** Numeric short ID (used for project and goal color generation). */
+        shortId: number;
+    };
+
+    /**
+     * Size of the SVG icon inside the container in pixels.
+     * @default 20
+     */
+    size?: number;
+}
+```
+<!-- props:end -->
+
+---
+
+## Supported entity types
+
+| `entityType` | Rendered component | Color source |
+|---|---|---|
+| `'project'` | [`ProjectIcon`](../ProjectIcon/README.md) | `shortId` |
+| `'portfolio'` | [`PortfolioIcon`](../PortfolioIcon/README.md) | `id` |
+| `'goal'` | [`GoalIcon`](../GoalIcon/README.md) | `shortId` |
+| `'keyResult'` | [`KeyResultIcon`](../KeyResultIcon/README.md) | fixed asset, no color |
+| anything else | `null` (renders nothing) | — |
+
+---
+
+## Examples
+
+### All entity types
+
+```tsx
+import {MetaEntityIcon} from '@weavix/tracker-components';
+
+<MetaEntityIcon entity={{entityType: 'project',   id: 'proj-1',  shortId: 42}} />
+<MetaEntityIcon entity={{entityType: 'portfolio', id: 'port-1',  shortId: 7}}  />
+<MetaEntityIcon entity={{entityType: 'goal',      id: 'goal-1',  shortId: 99}} />
+```
+
+### Custom size
+
+```tsx
+// 32 px icon for a page header
+<MetaEntityIcon
+    entity={{entityType: 'project', id: 'proj-1', shortId: 42}}
+    size={32}
+/>
+```
+
+### Rendering from a Tracker API response
+
+`MetaEntityIcon` accepts the shape returned directly by the Tracker entities search endpoint, so you can pass `result.data[i]` without any mapping:
+
+```tsx
+import React, {useEffect, useState} from 'react';
+import {MetaEntityIcon} from '@weavix/tracker-components';
+import type {MetaEntityV2} from '@weavix/tracker-api-types';
+
+interface Props {
+    trackerApi: TrackerApi;
+}
+
+export const EntityList: React.FC<Props> = ({trackerApi}) => {
+    const [entities, setEntities] = useState<MetaEntityV2[]>([]);
+
+    useEffect(() => {
+        trackerApi.v3
+            .post['/entities/{entityType}/_search']({
+                pathParams: {entityType: 'project'},
+                queryParams: {fields: ['summary'], page: 1, perPage: 20},
+                bodyParams: {filter: {}, filterTypes: ['ALL'], input: ''},
+            })
+            .then((result) => setEntities(result.data));
+    }, [trackerApi]);
+
+    return (
+        <ul>
+            {entities.map((entity) => (
+                <li key={entity.id} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+                    <MetaEntityIcon entity={entity} size={20} />
+                    <span>{entity.fields?.summary?.value ?? entity.id}</span>
+                </li>
+            ))}
+        </ul>
+    );
+};
+```
+
+### Used inside MetaEntitiesSelect
+
+`MetaEntityIcon` is used internally by [`MetaEntitiesSelect`](../../MetaEntitiesSelect/README.md) to render each item in the suggest list. You do not need to use it directly when using that component.
+
+---
+
+## Notes
+
+- The `entity` prop only requires `entityType`, `id`, and `shortId` — it is compatible with the full `MetaEntityV2` type from `@weavix/tracker-api-types`.
+- For unknown `entityType` values the component renders `null` silently.
+- To render individual entity icons directly, use [`ProjectIcon`](../ProjectIcon/README.md), [`PortfolioIcon`](../PortfolioIcon/README.md), [`GoalIcon`](../GoalIcon/README.md), or [`KeyResultIcon`](../KeyResultIcon/README.md).

package/build/esm/components/Icon/MetaEntityIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { MetaEntityIcon } from './MetaEntityIcon';
+export type { MetaEntityIconProps } from './MetaEntityIcon';

package/build/esm/components/Icon/MetaEntityIcon/index.js

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

package/build/esm/components/Icon/MetaEntityIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MetaEntityIcon"],"sources":["index.ts"],"sourcesContent":["export {MetaEntityIcon} from './MetaEntityIcon';\nexport type {MetaEntityIconProps} from './MetaEntityIcon';\n"],"mappings":"AAAA,SAAQA,cAAc","ignoreList":[]}

package/build/esm/components/Icon/PortfolioIcon/README.md

@@ -1,51 +1,129 @@
 # PortfolioIcon
 
 <!-- description:start -->
-Component displaying an icon for a portfolio entity
+Displays a colored icon for a Tracker portfolio entity. The icon color is deterministically derived from the `portfolioId`, so the same portfolio always renders the same color across sessions and environments.
 <!-- description:end -->
 
+## Usage
+
+```tsx
+import {PortfolioIcon} from '@weavix/tracker-components';
+
+<PortfolioIcon portfolioId="portfolio-abc" />
+```
+
 ## Component props
 
 <!-- props:start -->
 ```ts
 {
     /**
-     * Portfolio ID used to generate a deterministic color
+     * Portfolio ID used to generate a deterministic color.
+     * Typically the string entity ID returned by the Tracker API.
      */
     portfolioId: string;
+
     /**
-     * Additional class
+     * Additional CSS class applied to the root element.
      */
     className?: string;
+
     /**
-     * Entity type label (defaults to "portfolio")
+     * Entity type label. Defaults to "portfolio".
      */
     type?: string;
+
     /**
-     * Size of the SVG icon inside the container in pixels
+     * Size of the SVG icon inside the container in pixels.
      * @default 16
      */
     size?: number;
+
     /**
-     * Size of the icon container in pixels
+     * Size of the icon container (the colored square) in pixels.
      * @default 24
      */
     refugeSize?: number;
+
     /**
-     * Whether to render a colored background behind the icon
+     * Whether to render a colored background behind the icon.
      * @default false
      */
     withBackground?: boolean;
+
     /**
-     * Border radius variant of the icon container
+     * Border radius variant of the icon container.
      * @default 'm'
      */
     radius?: 'm' | 'l';
+
     /**
-     * Alpha (opacity) of the icon color
+     * Alpha (opacity) of the icon foreground color.
      * @default 1
      */
     colorAlpha?: number;
 }
 ```
 <!-- props:end -->
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import {PortfolioIcon} from '@weavix/tracker-components';
+
+<PortfolioIcon portfolioId="portfolio-abc" />
+```
+
+### With background
+
+```tsx
+<PortfolioIcon portfolioId="portfolio-abc" withBackground />
+```
+
+### Custom size
+
+```tsx
+<PortfolioIcon portfolioId="portfolio-abc" size={20} refugeSize={32} />
+```
+
+### Alongside portfolio name
+
+```tsx
+import {PortfolioIcon} from '@weavix/tracker-components';
+
+export const PortfolioLabel = ({portfolio}: {portfolio: {id: string; name: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <PortfolioIcon portfolioId={portfolio.id} />
+        <span>{portfolio.name}</span>
+    </div>
+);
+```
+
+### Multiple portfolios (each gets a unique color)
+
+```tsx
+const portfolios = [
+    {id: 'port-1', name: 'Platform'},
+    {id: 'port-2', name: 'Growth'},
+    {id: 'port-3', name: 'Infrastructure'},
+];
+
+portfolios.map((p) => (
+    <div key={p.id} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <PortfolioIcon portfolioId={p.id} />
+        <span>{p.name}</span>
+    </div>
+));
+```
+
+---
+
+## Notes
+
+- Unlike [`ProjectIcon`](../ProjectIcon/README.md) and [`GoalIcon`](../GoalIcon/README.md), `PortfolioIcon` uses the **string `id`** (not `shortId`) for color generation.
+- `withBackground` defaults to `false` for portfolios (vs `true` for projects). Pass `withBackground` explicitly if you want the colored square background.
+- To render the correct icon for an arbitrary meta entity type, use [`MetaEntityIcon`](../MetaEntityIcon/README.md) instead.

package/build/esm/components/Icon/PortfolioIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { PortfolioIcon } from './PortfolioIcon';
+export type { PortfolioIconProps } from './PortfolioIcon';

package/build/esm/components/Icon/PortfolioIcon/index.js

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

package/build/esm/components/Icon/PortfolioIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PortfolioIcon"],"sources":["index.ts"],"sourcesContent":["export {PortfolioIcon} from './PortfolioIcon';\nexport type {PortfolioIconProps} from './PortfolioIcon';\n"],"mappings":"AAAA,SAAQA,aAAa","ignoreList":[]}

package/build/esm/components/Icon/ProjectIcon/README.md

@@ -1,51 +1,175 @@
 # ProjectIcon
 
 <!-- description:start -->
-Component displaying an icon for a project entity
+Displays a colored icon for a Tracker project entity. The icon color is deterministically derived from the `projectId`, so the same project always renders the same color across sessions and environments.
 <!-- description:end -->
 
+## Usage
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+<ProjectIcon projectId={123} />
+```
+
 ## Component props
 
 <!-- props:start -->
 ```ts
 {
     /**
-     * Project ID used to generate a deterministic color
+     * Project ID used to generate a deterministic color.
+     * Accepts either the numeric shortId or a string entity ID.
      */
     projectId?: number | string;
+
     /**
-     * Additional class
+     * Additional CSS class applied to the root element.
      */
     className?: string;
+
     /**
-     * Entity type label (defaults to "project")
+     * Entity type label. Defaults to "project".
      */
     type?: string;
+
     /**
-     * Size of the SVG icon inside the container in pixels
+     * Size of the SVG icon inside the container in pixels.
      * @default 16
      */
     size?: number;
+
     /**
-     * Size of the icon container in pixels
+     * Size of the icon container (the colored square) in pixels.
      * @default 24
      */
     refugeSize?: number;
+
     /**
-     * Whether to render a colored background behind the icon
+     * Whether to render a colored background behind the icon.
      * @default true
      */
     withBackground?: boolean;
+
     /**
-     * Border radius variant of the icon container
+     * Border radius variant of the icon container.
      * @default 'm'
      */
     radius?: 'm' | 'l';
+
     /**
-     * Alpha (opacity) of the icon color
+     * Alpha (opacity) of the icon foreground color.
      * @default 1
      */
     colorAlpha?: number;
 }
 ```
 <!-- props:end -->
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+<ProjectIcon projectId={123} />
+```
+
+### Without background
+
+```tsx
+// Renders only the colored SVG, no background square
+<ProjectIcon projectId={123} withBackground={false} />
+```
+
+### Custom size
+
+```tsx
+<ProjectIcon projectId={123} size={20} refugeSize={32} />
+```
+
+### Large radius
+
+```tsx
+<ProjectIcon projectId={123} radius="l" />
+```
+
+### Alongside project name
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+export const ProjectLabel = ({project}: {project: {shortId: number; name: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <ProjectIcon projectId={project.shortId} />
+        <span>{project.name}</span>
+    </div>
+);
+```
+
+### Multiple projects (each gets a unique color)
+
+```tsx
+const projects = [
+    {shortId: 1, name: 'Backend API'},
+    {shortId: 2, name: 'Mobile App'},
+    {shortId: 3, name: 'Design System'},
+];
+
+projects.map((p) => (
+    <div key={p.shortId} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <ProjectIcon projectId={p.shortId} />
+        <span>{p.name}</span>
+    </div>
+));
+```
+
+### Rendering from a Tracker API response
+
+The Tracker entities search endpoint returns `shortId` as a number — pass it directly:
+
+```tsx
+import React, {useEffect, useState} from 'react';
+import {ProjectIcon} from '@weavix/tracker-components';
+import type {MetaEntityV2} from '@weavix/tracker-api-types';
+
+interface Props {
+    trackerApi: TrackerApi;
+}
+
+export const ProjectList: React.FC<Props> = ({trackerApi}) => {
+    const [projects, setProjects] = useState<MetaEntityV2[]>([]);
+
+    useEffect(() => {
+        trackerApi.v3
+            .post['/entities/{entityType}/_search']({
+                pathParams: {entityType: 'project'},
+                queryParams: {fields: ['summary'], page: 1, perPage: 20},
+                bodyParams: {filter: {}, filterTypes: ['ALL'], input: ''},
+            })
+            .then((result) => setProjects(result.data));
+    }, [trackerApi]);
+
+    return (
+        <ul>
+            {projects.map((project) => (
+                <li key={project.id} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+                    <ProjectIcon projectId={project.shortId} />
+                    <span>{project.fields?.summary?.value ?? project.id}</span>
+                </li>
+            ))}
+        </ul>
+    );
+};
+```
+
+---
+
+## Notes
+
+- `withBackground` defaults to `true` for projects (vs `false` for [`PortfolioIcon`](../PortfolioIcon/README.md)).
+- Pass `projectId` as the **numeric `shortId`** from the Tracker API for consistent color generation. String IDs are also accepted.
+- To render the correct icon for an arbitrary meta entity type, use [`MetaEntityIcon`](../MetaEntityIcon/README.md) instead.

package/build/esm/components/Icon/ProjectIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { ProjectIcon } from './ProjectIcon';
+export type { ProjectIconProps } from './ProjectIcon';

package/build/esm/components/Icon/ProjectIcon/index.js

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

package/build/esm/components/Icon/ProjectIcon/index.js.map

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

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

@@ -1,3 +1,8 @@
+export * from './EntityIcon';
+export * from './GoalIcon';
+export * from './IconRefuge';
 export * from './IssueTypeIcon';
-export * from './PortfolioIcon/PortfolioIcon';
-export * from './ProjectIcon/ProjectIcon';
+export * from './KeyResultIcon';
+export * from './MetaEntityIcon';
+export * from './PortfolioIcon';
+export * from './ProjectIcon';

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

@@ -1,4 +1,9 @@
+export * from "./EntityIcon";
+export * from "./GoalIcon";
+export * from "./IconRefuge";
 export * from "./IssueTypeIcon";
-export * from "./PortfolioIcon/PortfolioIcon";
-export * from "./ProjectIcon/ProjectIcon";
+export * from "./KeyResultIcon";
+export * from "./MetaEntityIcon";
+export * from "./PortfolioIcon";
+export * from "./ProjectIcon";
 // #sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './IssueTypeIcon';\nexport * from './PortfolioIcon/PortfolioIcon';\nexport * from './ProjectIcon/ProjectIcon';\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './EntityIcon';\nexport * from './GoalIcon';\nexport * from './IconRefuge';\nexport * from './IssueTypeIcon';\nexport * from './KeyResultIcon';\nexport * from './MetaEntityIcon';\nexport * from './PortfolioIcon';\nexport * from './ProjectIcon';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/build/esm/components/MetaEntitiesSelect/MetaEntitiesSelect.classname.d.ts

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

package/build/esm/components/MetaEntitiesSelect/MetaEntitiesSelect.classname.js

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

package/build/esm/components/MetaEntitiesSelect/MetaEntitiesSelect.classname.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["block","cnMetaEntitiesSelect"],"sources":["MetaEntitiesSelect.classname.ts"],"sourcesContent":["import {block} from '~/src/components/cn';\n\nexport const cnMetaEntitiesSelect = block('meta-entities-select');\n"],"mappings":"AAAA,SAAQA,KAAK;AAEb,OAAO,IAAMC,oBAAoB,GAAGD,KAAK,CAAC,sBAAsB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { MetaEntityV2 } from '@weavix/tracker-api-types';
+import type { EntitiesSuggestProps } from './components/EntitiesSuggest/EntitiesSuggest';
+type EntitiesSuggestPropsToOmit = 'getItemId' | 'getSuggestTextFromClickedItem' | 'renderItem';
+export type MetaEntitiesSelectProps = Omit<EntitiesSuggestProps<MetaEntityV2>, EntitiesSuggestPropsToOmit> & {
+    className?: string;
+    itemClassName?: string;
+};
+export declare const MetaEntitiesSelect: FC<MetaEntitiesSelectProps>;
+export {};

package/build/esm/components/MetaEntitiesSelect/MetaEntitiesSelect.js

@@ -0,0 +1,57 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "itemClassName", "placeholder", "text", "onTextChange"];
+import React, { useCallback, useState } from 'react';
+import { getConfig } from '@gravity-ui/uikit';
+import { MetaEntityIcon } from "./../Icon";
+import { useLocalizedString } from "./../../hooks/useLocalizedString";
+import { cnMetaEntitiesSelect } from "./MetaEntitiesSelect.classname";
+import { EntitiesSuggest } from "./components/EntitiesSuggest/EntitiesSuggest";
+import { EntitiesSuggestItem } from "./components/EntitiesSuggestItem/EntitiesSuggestItem";
+import { defaultMessages } from "./i18n";
+import { getMetaEntityDisplay } from "./utils/getMetaEntityDisplay";
+import { getMetaEntityId } from "./utils/getMetaEntityId";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MetaEntitiesSelect = function MetaEntitiesSelect(_ref) {
+  var className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    placeholder = _ref.placeholder,
+    initialText = _ref.text,
+    onTextChange = _ref.onTextChange,
+    suggestProps = _objectWithoutProperties(_ref, _excluded);
+  var config = getConfig();
+  var _useLocalizedString = useLocalizedString(defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var _useState = useState(initialText !== null && initialText !== void 0 ? initialText : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var handleTextChange = useCallback(function (value) {
+    setText(value);
+    onTextChange === null || onTextChange === void 0 || onTextChange(value);
+  }, [setText, onTextChange]);
+  var renderItem = useCallback(function (entity) {
+    var entityName = getMetaEntityDisplay(entity);
+    return /*#__PURE__*/_jsx(EntitiesSuggestItem, {
+      id: entity.id,
+      name: entityName,
+      className: cnMetaEntitiesSelect('item', itemClassName),
+      icon: /*#__PURE__*/_jsx(MetaEntityIcon, {
+        entity: entity
+      })
+    }, entity.id);
+  }, [itemClassName]);
+  return /*#__PURE__*/_jsx(EntitiesSuggest, _objectSpread(_objectSpread({}, suggestProps), {}, {
+    className: cnMetaEntitiesSelect(null, className),
+    renderItem: renderItem,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder'),
+    getItemsOnMount: true,
+    showItemsOnNoText: true,
+    getItemId: getMetaEntityId,
+    getSuggestTextFromClickedItem: getMetaEntityDisplay,
+    text: text,
+    onTextChange: handleTextChange
+  }));
+};
+// #sourceMappingURL=MetaEntitiesSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","getConfig","MetaEntityIcon","useLocalizedString","cnMetaEntitiesSelect","EntitiesSuggest","EntitiesSuggestItem","defaultMessages","getMetaEntityDisplay","getMetaEntityId","jsx","_jsx","MetaEntitiesSelect","_ref","className","itemClassName","placeholder","initialText","text","onTextChange","suggestProps","_objectWithoutProperties","_excluded","config","_useLocalizedString","lang","t","_useState","_useState2","_slicedToArray","setText","handleTextChange","value","renderItem","entity","entityName","id","name","icon","_objectSpread","getItemsOnMount","showItemsOnNoText","getItemId","getSuggestTextFromClickedItem"],"sources":["MetaEntitiesSelect.tsx"],"sourcesContent":["import type {FC} from 'react';\nimport React, {useCallback, useState} from 'react';\n\nimport {getConfig} from '@gravity-ui/uikit';\nimport type {MetaEntityV2} from '@weavix/tracker-api-types';\n\nimport {MetaEntityIcon} from '~/src/components/Icon/';\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {cnMetaEntitiesSelect} from './MetaEntitiesSelect.classname';\nimport {EntitiesSuggest} from './components/EntitiesSuggest/EntitiesSuggest';\nimport type {EntitiesSuggestProps} from './components/EntitiesSuggest/EntitiesSuggest';\nimport {EntitiesSuggestItem} from './components/EntitiesSuggestItem/EntitiesSuggestItem';\nimport {defaultMessages} from './i18n';\nimport {getMetaEntityDisplay} from './utils/getMetaEntityDisplay';\nimport {getMetaEntityId} from './utils/getMetaEntityId';\n\ntype EntitiesSuggestPropsToOmit = 'getItemId' | 'getSuggestTextFromClickedItem' | 'renderItem';\n\nexport type MetaEntitiesSelectProps = Omit<\n    EntitiesSuggestProps<MetaEntityV2>,\n    EntitiesSuggestPropsToOmit\n> & {\n    className?: string;\n    itemClassName?: string;\n};\n\nexport const MetaEntitiesSelect: FC<MetaEntitiesSelectProps> = ({\n    className,\n    itemClassName,\n    placeholder,\n    text: initialText,\n    onTextChange,\n    ...suggestProps\n}) => {\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n    const [text, setText] = useState(initialText ?? '');\n    const handleTextChange = useCallback(\n        (value: string) => {\n            setText(value);\n            onTextChange?.(value);\n        },\n        [setText, onTextChange],\n    );\n\n    const renderItem = useCallback(\n        (entity: MetaEntityV2) => {\n            const entityName = getMetaEntityDisplay(entity);\n            return (\n                <EntitiesSuggestItem\n                    key={entity.id}\n                    id={entity.id}\n                    name={entityName}\n                    className={cnMetaEntitiesSelect('item', itemClassName)}\n                    icon={<MetaEntityIcon entity={entity} />}\n                />\n            );\n        },\n        [itemClassName],\n    );\n\n    return (\n        <EntitiesSuggest<MetaEntityV2>\n            {...suggestProps}\n            className={cnMetaEntitiesSelect(null, className)}\n            renderItem={renderItem}\n            placeholder={placeholder ?? t('placeholder')}\n            getItemsOnMount\n            showItemsOnNoText\n            getItemId={getMetaEntityId}\n            getSuggestTextFromClickedItem={getMetaEntityDisplay}\n            text={text}\n            onTextChange={handleTextChange}\n        />\n    );\n};\n"],"mappings":";;;;AACA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAElD,SAAQC,SAAS,QAAO,mBAAmB;AAG3C,SAAQC,cAAc;AACtB,SAAQC,kBAAkB;AAE1B,SAAQC,oBAAoB;AAC5B,SAAQC,eAAe;AAEvB,SAAQC,mBAAmB;AAC3B,SAAQC,eAAe;AACvB,SAAQC,oBAAoB;AAC5B,SAAQC,eAAe;AAAiC,SAAAC,GAAA,IAAAC,IAAA;AAYxD,OAAO,IAAMC,kBAA+C,GAAG,SAAlDA,kBAA+CA,CAAAC,IAAA,EAOtD;EAAA,IANFC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACLC,WAAW,GAAAJ,IAAA,CAAjBK,IAAI;IACJC,YAAY,GAAAN,IAAA,CAAZM,YAAY;IACTC,YAAY,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEf,IAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,IAAAuB,mBAAA,GAAYrB,kBAAkB,CAACI,eAAe,EAAEgB,MAAM,CAACE,IAAI,CAAC;IAArDC,CAAC,GAAAF,mBAAA,CAADE,CAAC;EACR,IAAAC,SAAA,GAAwB3B,QAAQ,CAACiB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,EAAE,CAAC;IAAAW,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA5CT,IAAI,GAAAU,UAAA;IAAEE,OAAO,GAAAF,UAAA;EACpB,IAAMG,gBAAgB,GAAGhC,WAAW,CAChC,UAACiC,KAAa,EAAK;IACfF,OAAO,CAACE,KAAK,CAAC;IACdb,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAGa,KAAK,CAAC;EACzB,CAAC,EACD,CAACF,OAAO,EAAEX,YAAY,CAC1B,CAAC;EAED,IAAMc,UAAU,GAAGlC,WAAW,CAC1B,UAACmC,MAAoB,EAAK;IACtB,IAAMC,UAAU,GAAG3B,oBAAoB,CAAC0B,MAAM,CAAC;IAC/C,oBACIvB,IAAA,CAACL,mBAAmB;MAEhB8B,EAAE,EAAEF,MAAM,CAACE,EAAG;MACdC,IAAI,EAAEF,UAAW;MACjBrB,SAAS,EAAEV,oBAAoB,CAAC,MAAM,EAAEW,aAAa,CAAE;MACvDuB,IAAI,eAAE3B,IAAA,CAACT,cAAc;QAACgC,MAAM,EAAEA;MAAO,CAAE;IAAE,GAJpCA,MAAM,CAACE,EAKf,CAAC;EAEV,CAAC,EACD,CAACrB,aAAa,CAClB,CAAC;EAED,oBACIJ,IAAA,CAACN,eAAe,EAAAkC,aAAA,CAAAA,aAAA,KACRnB,YAAY;IAChBN,SAAS,EAAEV,oBAAoB,CAAC,IAAI,EAAEU,SAAS,CAAE;IACjDmB,UAAU,EAAEA,UAAW;IACvBjB,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIU,CAAC,CAAC,aAAa,CAAE;IAC7Cc,eAAe;IACfC,iBAAiB;IACjBC,SAAS,EAAEjC,eAAgB;IAC3BkC,6BAA6B,EAAEnC,oBAAqB;IACpDU,IAAI,EAAEA,IAAK;IACXC,YAAY,EAAEY;EAAiB,EAClC,CAAC;AAEV,CAAC","ignoreList":[]}