type ItemManipulationCallback = (eventData: { layout: Layouts; oldItem: Layout; newItem: Layout; placeholder: Layout; e: MouseEvent; element: HTMLElement; }) => void; interface DashKitProps { config: Config; editMode: boolean; onItemEdit: ({id}: {id: string}) => void; onChange: (data: {config: Config; itemsStateAndParams: ItemsStateAndParams}) => void; onDrop: (dropProps: ItemDropProps) => void; onItemMountChange: (item: ConfigItem, state: {isAsync: boolead; isMounted: boolean}) => void; onItemRender: (item: ConfigItem) => void; onDragStart?: ItemManipulationCallback; onDrag?: ItemManipulationCallback; onDragStop?: ItemManipulationCallback; onResizeStart?: ItemManipulationCallback; onResize?: ItemManipulationCallback; onResizeStop?: ItemManipulationCallback; defaultGlobalParams: GlobalParams; globalParams: GlobalParams; itemsStateAndParams: ItemsStateAndParams; settings: SettingsProps; context: ContextProps; overlayControls?: Record<string, OverlayControlItem[]> | null; overlayMenuItems?: MenuItems[] | null; noOverlay?: boolean; focusable?: boolean; onItemFocus: (item: ConfigItem) => void; onItemBlur: (item: ConfigItem) => void; draggableHandleClassName?: string; getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions; onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void; }

export interface Config { salt: string; // to form a unique id counter: number; // to form a unique id, only increases items: ConfigItem[]; // initial widget states layout: ConfigLayout[]; // widget position on the grid https://github.com/react-grid-layout aliases: ConfigAliases; // aliases for parameters see #Params connections: ConfigConnection[]; // links between widgets see #Params }

import {DashKitProps} from '@gravity-ui/dashkit'; const config: DashKitProps['config'] = { salt: '0.46703554571365613', counter: 4, items: [ { id: 'tT', data: { size: 'm', text: 'Caption', showInTOC: true, }, type: 'title', namespace: 'default', orderId: 1, }, { id: 'Ea', data: { text: 'mode _editActive', _editActive: true, }, type: 'text', namespace: 'default', }, { id: 'zR', data: { text: '### Text', }, type: 'text', namespace: 'default', orderId: 0, }, { id: 'Dk', data: { foo: 'bar', }, type: 'custom', namespace: 'default', orderId: 5, }, ], layout: [ { h: 2, i: 'tT', w: 36, x: 0, y: 0, }, { h: 6, i: 'Ea', w: 12, x: 0, y: 2, }, { h: 6, i: 'zR', w: 12, x: 12, y: 2, }, { h: 4, i: 'Dk', w: 8, x: 0, y: 8, }, ], aliases: {}, connections: [], };

const newLayout = updateLayout: [ { h: 6, i: 'Ea', w: 12, x: 0, y: 6, }, { h: 4, i: 'Dk', w: 8, x: 0, y: 12, }, ]; const newConfig = DashKit.setItem({ item: { data: { text: `Some text`, }, namespace: 'default', type: 'text', // Optional. If new item needed to be inserted in current layout with predefined dimensions layout: { // Current item inseterted before 'Ea' h: 6, w: 12, x: 0, y: 2, },, }, config: config, options: { // Optional. New layout values for existing items when new element is dropped from ActionPanel updateLayout: newLayout, }, });

const newConfig = DashKit.setItem({ item: { id: 'tT', // item.id data: { size: 'm', text: `New caption`, }, namespace: 'default', type: 'title', }, config: config, });

import {DashKitProps} from '@gravity-ui/dashkit'; const oldItemsStateAndParams: DashKitProps['itemsStateAndParams'] = {}; const {config: newConfig, itemsStateAndParams} = DashKit.removeItem({ id: 'tT', // item.id config: config, itemsStateAndParams: this.state.itemsStateAndParams, });

type Params = Record<string, string | string[]>;

interface StateAndParamsMeta = { __meta__: { queue: {id: string}[]; // queue version: number; // current version itemsStateAndParams }; }

interface ItemsStateAndParamsBase { [itemId: string]: { state?: Record<string, any>; params?: Params; }; }

type ItemsStateAndParams = StateAndParamsMeta & ItemsStateAndParamsBase;

type MenuItem = { id: string; // uniq id title?: string; // string title icon?: ReactNode; // node of icon iconSize?: number | string; // icon size in px as number or as string with units handler?: (item: ConfigItem) => void; // custom item action handler visible?: (item: ConfigItem) => boolean; // optional visibility handler for filtering menu items className?: string; // custom class property }; // use array of menu items in settings <Dashkit overlayMenuItems={[] as Array<MenuItem> | null} /> [deprecated] // overlayMenuItems property has greater priority over setSettings menu DashKit.setSettings({menu: [] as Array<MenuItem>});

type DraggedOverItem = { h: number; w: number; type: string; parent: string; i?: number; }; interface DashKitDnDWrapperProps { dragImageSrc?: string; onDragStart?: (dragProps: ItemDragProps) => void; onDragEnd?: () => void; onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean; }

type ItemDragProps = { type: string; // Plugin type layout?: { // Optional. Layout item size for preview and init w?: number; h?: number; }; extra?: any; // Custom user context };

type ItemDropProps = { commit: () => void; // Callback should be called after all config operations are made dragProps: ItemDragProps; // Item drag props itemLayout: ConfigLayout; // Calculated item layout dimensions newLayout: ConfigLayout[]; // New layout after element is dropped };