@gravity-ui/dashkit 8.22.1 → 8.24.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
-import { MenuItem } from '../../typings';
+import { OverlayControlsCtxShape } from '../../context';
+import { type ConfigItem, type ItemParams, type ItemState, type PluginBase } from '../../shared';
 import './OverlayControls.css';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",
@@ -25,7 +25,7 @@ export interface OverlayCustomControlItem {
     title?: string;
     icon?: MenuItemProps['icon'];
     iconSize?: number | string;
-    handler?: (item: ConfigItem, params: StringParams, state: ItemState) => void;
+    handler?: (item: ConfigItem, params: ItemParams, state: ItemState) => void;
     visible?: (item: ConfigItem) => boolean;
     className?: string;
     qa?: string;
@@ -51,21 +51,9 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
 };
-export interface OverlayControlsCtxShape {
-    overlayControls?: Record<string, OverlayControlItem[]>;
-    context: Record<string, any>;
-    menu: MenuItem[];
-    itemsStateAndParams: ItemsStateAndParamsBase;
-    itemsParams: Record<string, StringParams>;
-    editItem: (item: ConfigItem) => void;
-    removeItem: (id: string) => void;
-    getLayoutItem: (id: string) => ConfigLayout | void;
-    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
-    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
-}
 type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
 declare class OverlayControls extends React.Component<OverlayControlsProps> {
-    static contextType: React.Context<any>;
+    static contextType: React.Context<void | OverlayControlsCtxShape>;
     static defaultProps: OverlayControlsDefaultProps;
     context: React.ContextType<OverlayControlsCtx>;
     render(): JSX.Element;

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

@@ -3,7 +3,7 @@ import { Ellipsis, Gear, Xmark } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon, } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 import { COPIED_WIDGET_STORE_KEY, DRAGGABLE_CANCEL_CLASS_NAME, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
-import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
+import { DashkitOvelayControlsContext } from '../../context';
 import { i18n } from '../../i18n';
 import { isItemWithTabs, resolveItemInnerId, } from '../../shared';
 import { cn } from '../../utils/cn';
@@ -119,9 +119,9 @@ class OverlayControls extends React.Component {
             (_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
         };
         this.onEditItem = () => {
-            var _a, _b;
-            this.context.editItem(this.props.configItem);
-            (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            var _a, _b, _c, _d;
+            (_b = (_a = this.context).editItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.configItem);
+            (_d = (_c = this.props).onItemClick) === null || _d === void 0 ? void 0 : _d.call(_c);
         };
         this.onRemoveItem = () => {
             var _a, _b;
@@ -192,13 +192,12 @@ class OverlayControls extends React.Component {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
     }
     renderDropdownMenu(isOnlyOneItem) {
-        var _a;
         const { view, size, onItemClick } = this.props;
-        const { menu: contextMenu, itemsParams, itemsStateAndParams } = this.context;
+        const { menu: contextMenu, itemsParams, itemsState } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
-        const itemState = ((_a = itemsStateAndParams[configItem.id]) === null || _a === void 0 ? void 0 : _a.state) || {};
-        const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
+        const itemState = (itemsState === null || itemsState === void 0 ? void 0 : itemsState[configItem.id]) || {};
+        const menu = contextMenu && contextMenu.length > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
         const isDefaultMenu = this.isDefaultMenu(menu);
         const items = isDefaultMenu
             ? (menu || []).reduce((memo, name) => {

package/build/esm/context/DashKitContext.d.ts

@@ -1,4 +1,31 @@
-export const DashKitContext: React.Context<any>;
-export const DashkitOvelayControlsContext: React.Context<any>;
-export const DashKitDnDContext: React.Context<any>;
+/// <reference types="react-grid-layout" />
 import React from 'react';
+import type { RegisterManager } from '..//utils';
+import type { DashKitProps } from '../components/DashKit';
+import type { ConfigItem, ConfigLayout, ItemParams, ItemState, ItemStateAndParams, ItemStateAndParamsChangeOptions } from '../shared';
+type DashkitPropsPassedToCtx = Pick<DashKitProps, 'config' | 'groups' | 'context' | 'noOverlay' | 'focusable' | 'globalParams' | 'editMode' | 'settings' | 'onItemMountChange' | 'onItemRender' | 'draggableHandleClassName' | 'onDragStart' | 'onDrag' | 'onDragStop' | 'onResizeStart' | 'onResize' | 'onResizeStop'>;
+type PluginType = string;
+export type DashKitCtxShape = DashkitPropsPassedToCtx & {
+    registerManager: RegisterManager;
+    forwardedMetaRef: React.ForwardedRef<any>;
+    layout: ConfigLayout[];
+    temporaryLayout: ConfigLayout[] | null;
+    memorizeOriginalLayout: (widgetId: string, preAutoHeightLayout: ConfigLayout, postAutoHeightLayout: ConfigLayout) => void;
+    revertToOriginalLayout: (widgetId: string) => void;
+    itemsState?: Record<string, ItemState>;
+    itemsParams: Record<string, ItemParams>;
+    onItemStateAndParamsChange: (id: string, stateAndParams: ItemStateAndParams, options: ItemStateAndParamsChangeOptions) => void;
+    getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;
+    reloadItems: (pluginsRefs: Array<React.RefObject<any>>, data: {
+        silentLoading: boolean;
+        noVeil: boolean;
+    }) => void;
+    onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;
+    onDropDragOver: (e: DragEvent | MouseEvent, group: string | void, gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>, groupLayout: ConfigLayout[], sharedItem: (Partial<ConfigLayout> & {
+        type: PluginType;
+    }) | void) => void | boolean;
+    outerDnDEnable: boolean;
+    dragOverPlugin: null | PluginType;
+};
+declare const DashKitContext: React.Context<DashKitCtxShape>;
+export { DashKitContext };

package/build/esm/context/DashKitContext.js

@@ -1,5 +1,3 @@
 import React from 'react';
-const DashKitContext = React.createContext();
-const DashkitOvelayControlsContext = React.createContext();
-const DashKitDnDContext = React.createContext();
-export { DashKitContext, DashkitOvelayControlsContext, DashKitDnDContext };
+const DashKitContext = React.createContext({});
+export { DashKitContext };

package/build/esm/context/DashKitDnDContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DraggedOverItem, ItemDragProps } from '../shared/types';
+export type DashKitDnDCtxShape = {
+    dragProps: ItemDragProps | null;
+    dragImagePreview: HTMLImageElement;
+    onDragStart: (e: React.DragEvent<Element>, itemDragProps: ItemDragProps) => void;
+    onDragEnd: (e: React.DragEvent<Element>) => void;
+    onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean;
+};
+export declare const DashKitDnDContext: React.Context<void | DashKitDnDCtxShape>;

package/build/esm/context/DashKitDnDContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const DashKitDnDContext = React.createContext(undefined);

package/build/esm/context/DashkitOverlayControlsContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DashKitProps } from '../components';
+import type { ConfigLayout, ItemParams, ItemState } from '../shared';
+import type { MenuItem } from '../typings';
+export type OverlayControlsCtxShape = Pick<DashKitProps, 'context' | 'overlayControls' | 'itemsStateAndParams' | 'getPreparedCopyItemOptions' | 'onCopyFulfill'> & {
+    menu: DashKitProps['overlayMenuItems'] | MenuItem[];
+    itemsState?: Record<string, ItemState>;
+    itemsParams: Record<string, ItemParams>;
+    editItem: DashKitProps['onItemEdit'];
+    removeItem: (id: string) => void;
+    getLayoutItem: (id: string) => ConfigLayout | void;
+};
+export declare const DashkitOvelayControlsContext: React.Context<void | OverlayControlsCtxShape>;

package/build/esm/context/DashkitOverlayControlsContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const DashkitOvelayControlsContext = React.createContext(undefined);

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

@@ -0,0 +1,3 @@
+export * from './DashKitContext';
+export * from './DashkitOverlayControlsContext';
+export * from './DashKitDnDContext';

package/build/esm/context/index.js

@@ -0,0 +1,3 @@
+export * from './DashKitContext';
+export * from './DashkitOverlayControlsContext';
+export * from './DashKitDnDContext';

package/build/esm/hocs/prepareItem.d.ts

@@ -66,6 +66,7 @@ export function prepareItem(Component: any): {
         onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
-    contextType: React.Context<any>;
+    contextType: React.Context<import("../context").DashKitCtxShape>;
 };
 import React from 'react';
+import PropTypes from 'prop-types';

package/build/esm/hocs/prepareItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import { DashKitContext } from '../context/DashKitContext';
+import { DashKitContext } from '../context';
 export function prepareItem(Component) {
     var _a;
     return _a = class PrepareItem extends React.Component {

package/build/esm/hocs/withContext.js

@@ -3,7 +3,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common';
-import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext, } from '../context/DashKitContext';
+import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext } from '../context';
 import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager, resolveLayoutGroup } from '../utils';
@@ -283,6 +283,7 @@ function useMemoStateContext(props) {
         }
         return itemLayout;
     }, [
+        props.registerManager,
         resetTemporaryLayout,
         temporaryLayout,
         dragOverPlugin,
@@ -311,8 +312,6 @@ function useMemoStateContext(props) {
         });
     }, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     const dashkitContextValue = React.useMemo(() => ({
-        layout: resultLayout,
-        temporaryLayout,
         config: props.config,
         groups: props.groups,
         context: props.context,
@@ -322,24 +321,26 @@ function useMemoStateContext(props) {
         globalParams: props.globalParams,
         editMode: props.editMode,
         settings: props.settings,
-        itemsState,
-        itemsParams,
-        registerManager: props.registerManager,
-        onItemStateAndParamsChange,
-        onDrop,
-        onDropDragOver,
         onItemMountChange: props.onItemMountChange,
         onItemRender: props.onItemRender,
+        draggableHandleClassName: props.draggableHandleClassName,
+        registerManager: props.registerManager,
+        forwardedMetaRef: props.forwardedMetaRef,
+        layout: resultLayout,
+        temporaryLayout,
         layoutChange: onLayoutChange,
-        getItemsMeta,
-        reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
-        forwardedMetaRef: props.forwardedMetaRef,
-        draggableHandleClassName: props.draggableHandleClassName,
+        itemsState,
+        itemsParams,
+        onItemStateAndParamsChange,
+        getItemsMeta,
+        reloadItems,
+        onDrop,
+        onDropDragOver,
         outerDnDEnable,
         dragOverPlugin,
-        /* default bypassing handlers */
+        /* default handlers bypass */
         onDragStart: props.onDragStart,
         onDrag: props.onDrag,
         onDragStop: props.onDragStop,
@@ -385,14 +386,15 @@ function useMemoStateContext(props) {
     const controlsContextValue = React.useMemo(() => ({
         overlayControls: props.overlayControls,
         context: props.context,
-        menu: overlayMenuItems,
         itemsStateAndParams: props.itemsStateAndParams,
+        itemsState,
         itemsParams,
+        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
+        onCopyFulfill: props.onCopyFulfill,
+        menu: overlayMenuItems,
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
-        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
-        onCopyFulfill: props.onCopyFulfill,
     }), [
         props.overlayControls,
         props.context,
@@ -401,6 +403,7 @@ function useMemoStateContext(props) {
         props.getPreparedCopyItemOptions,
         props.onCopyFulfill,
         overlayMenuItems,
+        itemsState,
         itemsParams,
         onItemRemove,
         getLayoutItem,

package/build/esm/hooks/useDnDItemProps.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashKitDnDContext } from '../context/DashKitContext';
+import { DashKitDnDContext } from '../context';
 export const useDnDItemProps = (item) => {
     const dragContext = React.useContext(DashKitDnDContext);
     const onDragStart = React.useCallback((e) => {

package/build/esm/plugins/Title/Title.d.ts

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Plugin, PluginWidgetProps } from '../../typings';
+import type { PluginTitleSize, TitleFontParams } from './types';
 import './Title.css';
-export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
 export interface PluginTitleProps extends PluginWidgetProps {
     data: {
-        size: PluginTitleSize;
+        size: PluginTitleSize | TitleFontParams;
         text: string;
         showInTOC: boolean;
     } & PluginWidgetProps['data'];
 }
-export declare class PluginTitle extends React.Component<PluginTitleProps> {
-    render(): JSX.Element;
-}
+export declare const PluginTitle: React.ForwardRefExoticComponent<PluginTitleProps & React.RefAttributes<HTMLDivElement>>;
 declare const plugin: Plugin<PluginTitleProps>;
 export default plugin;

package/build/esm/plugins/Title/Title.js

@@ -1,17 +1,24 @@
 import React from 'react';
 import { cn } from '../../utils/cn';
 import { PLUGIN_ROOT_ATTR_NAME } from '../constants';
+import { RECCOMMENDED_LINE_HEIGHT_MULTIPLIER } from './constants';
+import { isCustomSize } from './utils';
 import './Title.css';
 const b = cn('dashkit-plugin-title');
-export class PluginTitle extends React.Component {
-    render() {
-        const { data } = this.props;
-        const text = data.text ? data.text : '';
-        const size = data.size ? data.size : false;
-        const id = data.showInTOC && text ? encodeURIComponent(text) : undefined;
-        return (React.createElement("div", { id: id, className: b({ size }), [PLUGIN_ROOT_ATTR_NAME]: 'title' }, text));
-    }
-}
+export const PluginTitle = React.forwardRef(function PluginTitleForwardRef(props, ref) {
+    var _a, _b;
+    const { data } = props;
+    const text = data.text ? data.text : '';
+    const size = isCustomSize(data.size) ? false : data.size;
+    const styles = isCustomSize(data.size) && ((_a = data.size) === null || _a === void 0 ? void 0 : _a.fontSize)
+        ? {
+            fontSize: data.size.fontSize,
+            lineHeight: (_b = data.size.lineHeight) !== null && _b !== void 0 ? _b : RECCOMMENDED_LINE_HEIGHT_MULTIPLIER,
+        }
+        : undefined;
+    const id = data.showInTOC && text ? encodeURIComponent(text) : undefined;
+    return (React.createElement("div", { ref: ref, id: id, style: styles, className: b({ size }), [PLUGIN_ROOT_ATTR_NAME]: 'title' }, text));
+});
 const plugin = {
     type: 'title',
     defaultLayout: { w: 36, h: 2 },

package/build/esm/plugins/Title/constants.d.ts

@@ -0,0 +1,3 @@
+import { PluginTitleSize, TitleFontParams } from './types';
+export declare const TITLE_DEFAULT_SIZES: Record<PluginTitleSize, TitleFontParams>;
+export declare const RECCOMMENDED_LINE_HEIGHT_MULTIPLIER = 1.25;

package/build/esm/plugins/Title/constants.js

@@ -0,0 +1,23 @@
+export const TITLE_DEFAULT_SIZES = {
+    xl: {
+        fontSize: '32px',
+        lineHeight: '40px',
+    },
+    l: {
+        fontSize: '24px',
+        lineHeight: '28px',
+    },
+    m: {
+        fontSize: '20px',
+        lineHeight: '24px',
+    },
+    s: {
+        fontSize: '17px',
+        lineHeight: '24px',
+    },
+    xs: {
+        fontSize: '15px',
+        lineHeight: '20px',
+    },
+};
+export const RECCOMMENDED_LINE_HEIGHT_MULTIPLIER = 1.25;

package/build/esm/plugins/Title/index.d.ts

@@ -1,2 +1,4 @@
 export * from './Title';
 export { default as pluginTitle } from './Title';
+export { PluginTitleSize, TitleFontParams } from './types';
+export { TITLE_DEFAULT_SIZES } from './constants';

package/build/esm/plugins/Title/index.js

@@ -1,2 +1,3 @@
 export * from './Title';
 export { default as pluginTitle } from './Title';
+export { TITLE_DEFAULT_SIZES } from './constants';

package/build/esm/plugins/Title/types.d.ts

@@ -0,0 +1,5 @@
+export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+export interface TitleFontParams {
+    fontSize: string;
+    lineHeight?: string;
+}

package/build/esm/plugins/Title/types.js

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

package/build/esm/plugins/Title/utils.d.ts

@@ -0,0 +1,2 @@
+import type { PluginTitleSize, TitleFontParams } from './types';
+export declare function isCustomSize(size: PluginTitleSize | TitleFontParams): size is TitleFontParams;

package/build/esm/plugins/Title/utils.js

@@ -0,0 +1,3 @@
+export function isCustomSize(size) {
+    return typeof size === 'object';
+}

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

@@ -18,7 +18,7 @@ export declare function formQueueData({ items, itemsStateAndParams, }: {
 }): FormedQueueData[];
 export declare function resolveItemInnerId({ item, itemsStateAndParams, }: {
     item: Pick<ConfigItemWithTabs, 'data' | 'id'>;
-    itemsStateAndParams: ItemsStateAndParams;
+    itemsStateAndParams?: ItemsStateAndParams;
 }): string;
 export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
     items: (ConfigItem | ConfigItemGroup)[];

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

@@ -108,7 +108,7 @@ export function formQueueData({ items, itemsStateAndParams, }) {
 export function resolveItemInnerId({ item, itemsStateAndParams, }) {
     var _a, _b;
     const { id } = item;
-    const stateTabId = (_b = (_a = itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
+    const stateTabId = (_b = (_a = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
     const { tabs } = item.data;
     if (stateTabId && tabs.some((tab) => tab.id === stateTabId)) {
         return stateTabId;

package/build/esm/shared/types/state-and-params.d.ts

@@ -3,6 +3,7 @@ import { StringParams } from './common';
 export interface ItemState {
     [key: string]: any;
 }
+export type ItemParams = StringParams | Record<string, StringParams>;
 export interface QueueItem {
     id: string;
     tabId?: string;
@@ -16,7 +17,7 @@ export type StateAndParamsMeta = {
     [META_KEY]: StateAndParamsMetaData;
 };
 export type ItemStateAndParams = {
-    params?: StringParams | Record<string, StringParams>;
+    params?: ItemParams;
     state?: ItemState;
 };
 export type ItemStateAndParamsChangeOptions = {

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

@@ -28,6 +28,7 @@ export type AddNewItemOptions = SetItemOptions & {
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
+    isMobile: boolean;
     items: ConfigItem[];
     layout: ConfigLayout[];
     context: any;

package/package.json

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