@gravity-ui/dashkit 5.0.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [5.2.0](https://github.com/gravity-ui/dashkit/compare/v5.1.0...v5.2.0) (2023-03-27)
+
+
+### Features
+
+* add custom qa attribute for overlay controls ([#45](https://github.com/gravity-ui/dashkit/issues/45)) ([738ce14](https://github.com/gravity-ui/dashkit/commit/738ce14a7883a88d3096ed4c9bd21bcc16f3fd20))
+* export OverlayControlItem type ([#50](https://github.com/gravity-ui/dashkit/issues/50)) ([a68cc5c](https://github.com/gravity-ui/dashkit/commit/a68cc5cb4e4470278220e18f79f9b82dc6a7cfba))
+
+## [5.1.0](https://github.com/gravity-ui/dashkit/compare/v5.0.0...v5.1.0) (2023-02-09)
+
+
+### Features
+
+* generating a unique id for config ([#41](https://github.com/gravity-ui/dashkit/issues/41)) ([062c8d0](https://github.com/gravity-ui/dashkit/commit/062c8d015e334061fac193cf8c0a549a932e3a87))
+
 ## [5.0.0](https://github.com/gravity-ui/dashkit/compare/v4.1.0...v5.0.0) (2023-02-01)
 
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import GridLayout from '../GridLayout/GridLayout';
-import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin } from '../../typings';
+import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin, SetItemOptions } from '../../typings';
 import { GlobalParams, Config, ConfigItem, ItemsStateAndParams } from '../../shared';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -29,10 +29,11 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     static defaultProps: DashKitDefaultProps;
     static registerPlugins(...plugins: Plugin[]): void;
     static setSettings(settings: Settings): void;
-    static setItem({ item: setItem, namespace, config, }: {
+    static setItem({ item: setItem, namespace, config, options, }: {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
+        options?: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;

package/build/cjs/components/DashKit/DashKit.js

@@ -21,9 +21,9 @@ class DashKit extends react_1.default.PureComponent {
     static setSettings(settings) {
         registerManager.setSettings(settings);
     }
-    static setItem({ item: setItem, namespace = constants_1.DEFAULT_NAMESPACE, config, }) {
+    static setItem({ item: setItem, namespace = constants_1.DEFAULT_NAMESPACE, config, options = {}, }) {
         if (setItem.id) {
-            return utils_1.UpdateManager.editItem({ item: setItem, namespace, config });
+            return utils_1.UpdateManager.editItem({ item: setItem, namespace, config, options });
         }
         else {
             const item = setItem;
@@ -36,6 +36,7 @@ class DashKit extends react_1.default.PureComponent {
                 namespace,
                 config,
                 layout,
+                options,
             });
         }
     }

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

@@ -16,6 +16,7 @@ export interface OverlayControlItem {
     allWidgetsControls?: boolean;
     excludeWidgetsTypes?: Array<PluginBase['type']>;
     id?: string;
+    qa?: string;
 }
 export interface OverlayCustomControlItem {
     id: string;
@@ -25,6 +26,7 @@ export interface OverlayCustomControlItem {
     handler?: (item: ConfigItem, params: StringParams) => void;
     visible?: (item: ConfigItem) => boolean;
     className?: string;
+    qa?: string;
 }
 interface OverlayControlsDefaultProps {
     position: OverlayControlsPosition;

package/build/cjs/components/OverlayControls/OverlayControls.js

@@ -26,9 +26,9 @@ class OverlayControls extends react_1.default.Component {
         super(...arguments);
         this.renderControlsItem = (item, index, length) => {
             const { view, size } = this.props;
-            const { title, handler, icon, iconSize } = item;
+            const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop_1.default;
-            return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem) },
+            return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
                 react_1.default.createElement(uikit_1.Icon, { data: icon || CogIcon_1.CogIcon, size: icon ? iconSize : 24 })));
         };
         this.getCustomLeftOverlayControls = () => {
@@ -171,10 +171,11 @@ class OverlayControls extends react_1.default.Component {
                     icon: item.icon,
                     action: itemAction,
                     className: item.className,
+                    qa: item.qa,
                 };
             });
         items = items.filter(Boolean);
-        return (react_1.default.createElement(uikit_1.DropdownMenu, { items: items, switcher: react_1.default.createElement(uikit_1.Button, { view: view, size: size, pin: "brick-round" },
+        return (react_1.default.createElement(uikit_1.DropdownMenu, { items: items, switcher: react_1.default.createElement(uikit_1.Button, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" },
                 react_1.default.createElement(uikit_1.Icon, { data: DotsIcon_1.DotsIcon, size: "16" })) }));
     }
     getControlItemPinStyle(index, itemsLength) {

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

@@ -1 +1,2 @@
 export * from './DashKit';
+export { OverlayControlItem } from './OverlayControls/OverlayControls';

package/build/cjs/shared/modules/__tests__/uniq-id.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/shared/modules/__tests__/uniq-id.test.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const hashids_1 = tslib_1.__importDefault(require("hashids"));
+const uniq_id_1 = require("../uniq-id");
+const salt = 'salt';
+const hashids = new hashids_1.default(salt);
+const testCounter = 1;
+const id1 = hashids.encode(testCounter + 1);
+const id2 = hashids.encode(testCounter + 2);
+const id3 = hashids.encode(testCounter + 3);
+const id4 = hashids.encode(testCounter + 4);
+describe('modules.uniq-id: generateUniqId', () => {
+    it('return correct first id and counter', () => {
+        const { id, counter } = (0, uniq_id_1.generateUniqId)({
+            counter: testCounter,
+            ids: [],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id1);
+        expect(id).toEqual(id1);
+        expect(counter).toEqual(testCounter + 1);
+    });
+    it('return correct id and counter with ids=[id1]', () => {
+        const { id, counter } = (0, uniq_id_1.generateUniqId)({
+            counter: testCounter + 1,
+            ids: [id1],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id2);
+        expect(id).toEqual(id2);
+        expect(counter).toEqual(testCounter + 2);
+    });
+    it('return correct id4 and counter with ids=[id1, id2, id3] and incorrect counter=1', () => {
+        const { id, counter } = (0, uniq_id_1.generateUniqId)({
+            counter: 1,
+            ids: [id1, id2, id3],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id4);
+        expect(id).toEqual(id4);
+        expect(counter).toEqual(testCounter + 4);
+    });
+});
+const IDS = ['WZ', '9X', '2m', 'R2', 'Pd'];
+const config = {
+    items: [
+        {
+            id: IDS[0],
+            data: {
+                tabs: [
+                    {
+                        id: IDS[1],
+                    },
+                    {
+                        id: IDS[2],
+                    },
+                ],
+            },
+        },
+        {
+            id: IDS[3],
+        },
+    ],
+    layout: [{ i: IDS[0] }, { i: IDS[3] }],
+    connections: [
+        { from: IDS[2], to: IDS[4] },
+        { from: IDS[1], to: IDS[3] },
+    ],
+};
+describe('modules.uniq-id: extractIdsFromConfig', () => {
+    it('correct extract ids from config', () => {
+        const ids = (0, uniq_id_1.extractIdsFromConfig)(config);
+        expect(Array.isArray(ids)).toBe(true);
+        expect(IDS.concat().sort()).toEqual(ids.sort());
+    });
+});

package/build/cjs/shared/modules/index.d.ts

@@ -1,2 +1,3 @@
 export * from './helpers';
 export * from './state-and-params';
+export * from './uniq-id';

package/build/cjs/shared/modules/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./helpers"), exports);
 tslib_1.__exportStar(require("./state-and-params"), exports);
+tslib_1.__exportStar(require("./uniq-id"), exports);

package/build/cjs/shared/modules/uniq-id.d.ts

@@ -0,0 +1,12 @@
+import type { Config } from '../types';
+export declare function extractIdsFromConfig(config: Config): string[];
+type GenerateUniqIdArgs = {
+    salt: Config['salt'];
+    counter: Config['counter'];
+    ids: string[];
+};
+export declare function generateUniqId({ salt, counter, ids }: GenerateUniqIdArgs): {
+    counter: number;
+    id: string;
+};
+export {};

package/build/cjs/shared/modules/uniq-id.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateUniqId = exports.extractIdsFromConfig = void 0;
+const tslib_1 = require("tslib");
+const hashids_1 = tslib_1.__importDefault(require("hashids"));
+const helpers_1 = require("./helpers");
+function extractIdsFromConfig(config) {
+    const ids = [];
+    const items = config.items || [];
+    const connections = config.connections || [];
+    const layout = config.layout || [];
+    items.forEach((item) => {
+        ids.push(item.id);
+        if ((0, helpers_1.isItemWithTabs)(item)) {
+            item.data.tabs.forEach((tabItem) => ids.push(tabItem.id));
+        }
+    });
+    connections.forEach(({ from, to }) => ids.push(from, to));
+    layout.forEach(({ i }) => ids.push(i));
+    return Array.from(new Set(ids));
+}
+exports.extractIdsFromConfig = extractIdsFromConfig;
+function generateUniqId({ salt, counter, ids }) {
+    let newCounter = counter;
+    let uniqId = null;
+    const idsSet = new Set(ids);
+    const hashids = new hashids_1.default(salt);
+    while (uniqId === null) {
+        const id = hashids.encode(++newCounter);
+        if (!idsSet.has(id)) {
+            uniqId = id;
+        }
+    }
+    return { counter: newCounter, id: uniqId };
+}
+exports.generateUniqId = generateUniqId;

package/build/cjs/typings/config.d.ts

@@ -5,3 +5,6 @@ export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     layout?: ConfigLayout;
 }
 export type SetConfigItem = ConfigItem | AddConfigItem;
+export type SetItemOptions = {
+    excludeIds?: string[];
+};

package/build/cjs/utils/get-new-id.d.ts

@@ -0,0 +1,12 @@
+import { Config } from '../shared';
+type GetNewIdArgs = {
+    config: Config;
+    salt: Config['salt'];
+    counter: Config['counter'];
+    excludeIds?: string[];
+};
+export declare function getNewId({ config, salt, counter, excludeIds }: GetNewIdArgs): {
+    counter: number;
+    id: string;
+};
+export {};

package/build/cjs/utils/get-new-id.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNewId = void 0;
+const shared_1 = require("../shared");
+function getNewId({ config, salt, counter, excludeIds = [] }) {
+    const allIds = [...(0, shared_1.extractIdsFromConfig)(config), ...excludeIds];
+    return (0, shared_1.generateUniqId)({ salt, counter, ids: allIds });
+}
+exports.getNewId = getNewId;

package/build/cjs/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
 import { Config, ConfigItem, ItemsStateAndParams, ItemStateAndParams } from '../shared';
-import { AddConfigItem, WidgetLayout } from '../typings';
+import { AddConfigItem, WidgetLayout, SetItemOptions } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -13,16 +13,18 @@ interface ChangeStateAndParamsArg {
     stateAndParams: ItemStateAndParams;
 }
 export declare class UpdateManager {
-    static addItem({ item, namespace, layout, config, }: {
+    static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
+        options: SetItemOptions;
     }): Config;
-    static editItem({ item, namespace, config, }: {
+    static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;
         namespace: string;
         config: Config;
+        options: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams }: RemoveItemArg): {
         config: Config;

package/build/cjs/utils/update-manager.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateManager = void 0;
 const tslib_1 = require("tslib");
 const immutability_helper_1 = tslib_1.__importStar(require("immutability-helper"));
-const hashids_1 = tslib_1.__importDefault(require("hashids"));
 const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const shared_1 = require("../shared");
 const constants_1 = require("../constants");
+const get_new_id_1 = require("./get-new-id");
 (0, immutability_helper_1.extend)('$auto', (value, object) => (object ? (0, immutability_helper_1.default)(object, value) : (0, immutability_helper_1.default)({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -134,30 +134,51 @@ function changeStateAndParamsVersion1({ id: initiatorId, config, stateAndParams,
         return itemsStateAndParams;
     }
 }
+function getNewItemData({ item, config, counter: argsCounter, salt, options }) {
+    const excludeIds = [...(options.excludeIds || [])];
+    let counter = argsCounter;
+    let data = item.data;
+    if ((0, shared_1.isItemWithTabs)(item)) {
+        const tabs = item.data.tabs.map((tab) => {
+            if (tab.id) {
+                return tab;
+            }
+            const newIdTabData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds });
+            counter = newIdTabData.counter;
+            excludeIds.push(newIdTabData.id);
+            return Object.assign(Object.assign({}, tab), { id: newIdTabData.id });
+        });
+        data = Object.assign(Object.assign({}, item.data), { tabs });
+    }
+    return { data, counter, excludeIds };
+}
 class UpdateManager {
-    // TODO: проверять, что id нового элемента уникальный
-    static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, }) {
+    static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options, }) {
         const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
         const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
-        const hashids = new hashids_1.default(config.salt);
-        let counter = config.counter;
-        const resultData = (0, shared_1.isItemWithTabs)(item)
-            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
-        const newItem = Object.assign(Object.assign({}, item), { id: hashids.encode(++counter), data: resultData, namespace });
+        const salt = config.salt;
+        const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
+        let counter = newItemData.counter;
+        const newIdData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds: newItemData.excludeIds });
+        counter = newIdData.counter;
+        const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
         return (0, immutability_helper_1.default)(config, {
             items: { $push: [newItem] },
             layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
             counter: { $set: counter },
         });
     }
-    static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, }) {
-        const hashids = new hashids_1.default(config.salt);
-        let counter = config.counter;
+    static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);
-        const resultData = (0, shared_1.isItemWithTabs)(item)
-            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
+        const { counter, data } = getNewItemData({
+            item,
+            config,
+            salt: config.salt,
+            counter: config.counter,
+            options,
+        });
         return (0, immutability_helper_1.default)(config, {
-            items: { [itemIndex]: { $set: Object.assign(Object.assign({}, item), { data: resultData, namespace }) } },
+            items: { [itemIndex]: { $set: Object.assign(Object.assign({}, item), { data, namespace }) } },
             counter: { $set: counter },
         });
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import GridLayout from '../GridLayout/GridLayout';
-import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin } from '../../typings';
+import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin, SetItemOptions } from '../../typings';
 import { GlobalParams, Config, ConfigItem, ItemsStateAndParams } from '../../shared';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -29,10 +29,11 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     static defaultProps: DashKitDefaultProps;
     static registerPlugins(...plugins: Plugin[]): void;
     static setSettings(settings: Settings): void;
-    static setItem({ item: setItem, namespace, config, }: {
+    static setItem({ item: setItem, namespace, config, options, }: {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
+        options?: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;

package/build/esm/components/DashKit/DashKit.js

@@ -17,9 +17,9 @@ export class DashKit extends React.PureComponent {
     static setSettings(settings) {
         registerManager.setSettings(settings);
     }
-    static setItem({ item: setItem, namespace = DEFAULT_NAMESPACE, config, }) {
+    static setItem({ item: setItem, namespace = DEFAULT_NAMESPACE, config, options = {}, }) {
         if (setItem.id) {
-            return UpdateManager.editItem({ item: setItem, namespace, config });
+            return UpdateManager.editItem({ item: setItem, namespace, config, options });
         }
         else {
             const item = setItem;
@@ -32,6 +32,7 @@ export class DashKit extends React.PureComponent {
                 namespace,
                 config,
                 layout,
+                options,
             });
         }
     }

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

@@ -17,6 +17,7 @@ export interface OverlayControlItem {
     allWidgetsControls?: boolean;
     excludeWidgetsTypes?: Array<PluginBase['type']>;
     id?: string;
+    qa?: string;
 }
 export interface OverlayCustomControlItem {
     id: string;
@@ -26,6 +27,7 @@ export interface OverlayCustomControlItem {
     handler?: (item: ConfigItem, params: StringParams) => void;
     visible?: (item: ConfigItem) => boolean;
     className?: string;
+    qa?: string;
 }
 interface OverlayControlsDefaultProps {
     position: OverlayControlsPosition;

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -23,9 +23,9 @@ class OverlayControls extends React.Component {
         super(...arguments);
         this.renderControlsItem = (item, index, length) => {
             const { view, size } = this.props;
-            const { title, handler, icon, iconSize } = item;
+            const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop;
-            return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem) },
+            return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
                 React.createElement(Icon, { data: icon || CogIcon, size: icon ? iconSize : 24 })));
         };
         this.getCustomLeftOverlayControls = () => {
@@ -168,10 +168,11 @@ class OverlayControls extends React.Component {
                     icon: item.icon,
                     action: itemAction,
                     className: item.className,
+                    qa: item.qa,
                 };
             });
         items = items.filter(Boolean);
-        return (React.createElement(DropdownMenu, { items: items, switcher: React.createElement(Button, { view: view, size: size, pin: "brick-round" },
+        return (React.createElement(DropdownMenu, { items: items, switcher: React.createElement(Button, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" },
                 React.createElement(Icon, { data: DotsIcon, size: "16" })) }));
     }
     getControlItemPinStyle(index, itemsLength) {

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

@@ -1 +1,2 @@
 export * from './DashKit';
+export { OverlayControlItem } from './OverlayControls/OverlayControls';

package/build/esm/shared/modules/__tests__/uniq-id.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/shared/modules/__tests__/uniq-id.test.js

@@ -0,0 +1,74 @@
+import Hashids from 'hashids';
+import { generateUniqId, extractIdsFromConfig } from '../uniq-id';
+const salt = 'salt';
+const hashids = new Hashids(salt);
+const testCounter = 1;
+const id1 = hashids.encode(testCounter + 1);
+const id2 = hashids.encode(testCounter + 2);
+const id3 = hashids.encode(testCounter + 3);
+const id4 = hashids.encode(testCounter + 4);
+describe('modules.uniq-id: generateUniqId', () => {
+    it('return correct first id and counter', () => {
+        const { id, counter } = generateUniqId({
+            counter: testCounter,
+            ids: [],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id1);
+        expect(id).toEqual(id1);
+        expect(counter).toEqual(testCounter + 1);
+    });
+    it('return correct id and counter with ids=[id1]', () => {
+        const { id, counter } = generateUniqId({
+            counter: testCounter + 1,
+            ids: [id1],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id2);
+        expect(id).toEqual(id2);
+        expect(counter).toEqual(testCounter + 2);
+    });
+    it('return correct id4 and counter with ids=[id1, id2, id3] and incorrect counter=1', () => {
+        const { id, counter } = generateUniqId({
+            counter: 1,
+            ids: [id1, id2, id3],
+            salt,
+        });
+        expect(hashids.encode(counter)).toEqual(id4);
+        expect(id).toEqual(id4);
+        expect(counter).toEqual(testCounter + 4);
+    });
+});
+const IDS = ['WZ', '9X', '2m', 'R2', 'Pd'];
+const config = {
+    items: [
+        {
+            id: IDS[0],
+            data: {
+                tabs: [
+                    {
+                        id: IDS[1],
+                    },
+                    {
+                        id: IDS[2],
+                    },
+                ],
+            },
+        },
+        {
+            id: IDS[3],
+        },
+    ],
+    layout: [{ i: IDS[0] }, { i: IDS[3] }],
+    connections: [
+        { from: IDS[2], to: IDS[4] },
+        { from: IDS[1], to: IDS[3] },
+    ],
+};
+describe('modules.uniq-id: extractIdsFromConfig', () => {
+    it('correct extract ids from config', () => {
+        const ids = extractIdsFromConfig(config);
+        expect(Array.isArray(ids)).toBe(true);
+        expect(IDS.concat().sort()).toEqual(ids.sort());
+    });
+});

package/build/esm/shared/modules/index.d.ts

@@ -1,2 +1,3 @@
 export * from './helpers';
 export * from './state-and-params';
+export * from './uniq-id';

package/build/esm/shared/modules/index.js

@@ -1,2 +1,3 @@
 export * from './helpers';
 export * from './state-and-params';
+export * from './uniq-id';

package/build/esm/shared/modules/uniq-id.d.ts

@@ -0,0 +1,12 @@
+import type { Config } from '../types';
+export declare function extractIdsFromConfig(config: Config): string[];
+type GenerateUniqIdArgs = {
+    salt: Config['salt'];
+    counter: Config['counter'];
+    ids: string[];
+};
+export declare function generateUniqId({ salt, counter, ids }: GenerateUniqIdArgs): {
+    counter: number;
+    id: string;
+};
+export {};

package/build/esm/shared/modules/uniq-id.js

@@ -0,0 +1,30 @@
+import Hashids from 'hashids';
+import { isItemWithTabs } from './helpers';
+export function extractIdsFromConfig(config) {
+    const ids = [];
+    const items = config.items || [];
+    const connections = config.connections || [];
+    const layout = config.layout || [];
+    items.forEach((item) => {
+        ids.push(item.id);
+        if (isItemWithTabs(item)) {
+            item.data.tabs.forEach((tabItem) => ids.push(tabItem.id));
+        }
+    });
+    connections.forEach(({ from, to }) => ids.push(from, to));
+    layout.forEach(({ i }) => ids.push(i));
+    return Array.from(new Set(ids));
+}
+export function generateUniqId({ salt, counter, ids }) {
+    let newCounter = counter;
+    let uniqId = null;
+    const idsSet = new Set(ids);
+    const hashids = new Hashids(salt);
+    while (uniqId === null) {
+        const id = hashids.encode(++newCounter);
+        if (!idsSet.has(id)) {
+            uniqId = id;
+        }
+    }
+    return { counter: newCounter, id: uniqId };
+}

package/build/esm/typings/config.d.ts

@@ -5,3 +5,6 @@ export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     layout?: ConfigLayout;
 }
 export type SetConfigItem = ConfigItem | AddConfigItem;
+export type SetItemOptions = {
+    excludeIds?: string[];
+};

package/build/esm/utils/get-new-id.d.ts

@@ -0,0 +1,12 @@
+import { Config } from '../shared';
+type GetNewIdArgs = {
+    config: Config;
+    salt: Config['salt'];
+    counter: Config['counter'];
+    excludeIds?: string[];
+};
+export declare function getNewId({ config, salt, counter, excludeIds }: GetNewIdArgs): {
+    counter: number;
+    id: string;
+};
+export {};

package/build/esm/utils/get-new-id.js

@@ -0,0 +1,5 @@
+import { extractIdsFromConfig, generateUniqId } from '../shared';
+export function getNewId({ config, salt, counter, excludeIds = [] }) {
+    const allIds = [...extractIdsFromConfig(config), ...excludeIds];
+    return generateUniqId({ salt, counter, ids: allIds });
+}

package/build/esm/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
 import { Config, ConfigItem, ItemsStateAndParams, ItemStateAndParams } from '../shared';
-import { AddConfigItem, WidgetLayout } from '../typings';
+import { AddConfigItem, WidgetLayout, SetItemOptions } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -13,16 +13,18 @@ interface ChangeStateAndParamsArg {
     stateAndParams: ItemStateAndParams;
 }
 export declare class UpdateManager {
-    static addItem({ item, namespace, layout, config, }: {
+    static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
+        options: SetItemOptions;
     }): Config;
-    static editItem({ item, namespace, config, }: {
+    static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;
         namespace: string;
         config: Config;
+        options: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams }: RemoveItemArg): {
         config: Config;

package/build/esm/utils/update-manager.js

@@ -1,9 +1,9 @@
 import update, { extend } from 'immutability-helper';
-import Hashids from 'hashids';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import { mergeParamsWithAliases, isItemWithTabs, getCurrentVersion, META_KEY, deleteFromQueue, addToQueue, getInitialItemsStateAndParamsMeta, resolveItemInnerId, getItemsStateAndParamsMeta, } from '../shared';
 import { DEFAULT_NAMESPACE } from '../constants';
+import { getNewId } from './get-new-id';
 extend('$auto', (value, object) => (object ? update(object, value) : update({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -130,30 +130,51 @@ function changeStateAndParamsVersion1({ id: initiatorId, config, stateAndParams,
         return itemsStateAndParams;
     }
 }
+function getNewItemData({ item, config, counter: argsCounter, salt, options }) {
+    const excludeIds = [...(options.excludeIds || [])];
+    let counter = argsCounter;
+    let data = item.data;
+    if (isItemWithTabs(item)) {
+        const tabs = item.data.tabs.map((tab) => {
+            if (tab.id) {
+                return tab;
+            }
+            const newIdTabData = getNewId({ config, salt, counter, excludeIds });
+            counter = newIdTabData.counter;
+            excludeIds.push(newIdTabData.id);
+            return Object.assign(Object.assign({}, tab), { id: newIdTabData.id });
+        });
+        data = Object.assign(Object.assign({}, item.data), { tabs });
+    }
+    return { data, counter, excludeIds };
+}
 export class UpdateManager {
-    // TODO: проверять, что id нового элемента уникальный
-    static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, }) {
+    static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options, }) {
         const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
         const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
-        const hashids = new Hashids(config.salt);
-        let counter = config.counter;
-        const resultData = isItemWithTabs(item)
-            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
-        const newItem = Object.assign(Object.assign({}, item), { id: hashids.encode(++counter), data: resultData, namespace });
+        const salt = config.salt;
+        const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
+        let counter = newItemData.counter;
+        const newIdData = getNewId({ config, salt, counter, excludeIds: newItemData.excludeIds });
+        counter = newIdData.counter;
+        const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
         return update(config, {
             items: { $push: [newItem] },
             layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
             counter: { $set: counter },
         });
     }
-    static editItem({ item, namespace = DEFAULT_NAMESPACE, config, }) {
-        const hashids = new Hashids(config.salt);
-        let counter = config.counter;
+    static editItem({ item, namespace = DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);
-        const resultData = isItemWithTabs(item)
-            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
+        const { counter, data } = getNewItemData({
+            item,
+            config,
+            salt: config.salt,
+            counter: config.counter,
+            options,
+        });
         return update(config, {
-            items: { [itemIndex]: { $set: Object.assign(Object.assign({}, item), { data: resultData, namespace }) } },
+            items: { [itemIndex]: { $set: Object.assign(Object.assign({}, item), { data, namespace }) } },
             counter: { $set: counter },
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {