fix: plugin component ref refactoring

src/components/ChartKit.tsx

@@ -3,13 +3,7 @@ import block from 'bem-cn-lite';
 import {i18n} from '../i18n';
 import {CHARTKIT_ERROR_CODE, ChartKitError, settings} from '../libs';
 import {getRandomCKId, typedMemo} from '../utils';
-import type {
-    ChartKitType,
-    ChartKitRef,
-    ChartKitWidgetRef,
-    ChartKitProps,
-    ChartRenderedRef,
-} from '../types';
+import type {ChartKitType, ChartKitRef, ChartKitWidgetRef, ChartKitProps} from '../types';
 import {ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
 import {Loader} from './Loader/Loader';
 
@@ -19,7 +13,6 @@ const b = block('chartkit');
 
 type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
     instanceRef?: React.ForwardedRef<ChartKitRef | undefined>;
-    rendererRef?: ChartRenderedRef<T>;
 };
 
 const ChartKitComponent = <T extends ChartKitType>(props: ChartKitComponentProps<T>) => {

src/plugins/yagr/__stories__/Yagr.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Meta, Story} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../libs';
-import {YagrPlugin} from '../../../plugins';
+import {YagrPlugin, YagrReactRef} from '../../../plugins';
 import {ChartKit} from '../../../components/ChartKit';
 import type {ChartKitRef} from '../../../types';
 import {getNewConfig, line10} from './mocks/line10';
@@ -17,6 +17,8 @@ export default {
 const LineTemplate: Story<any> = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
+    // Example of usage pluginRef property
+    const yagrPluginRef = React.useRef<YagrReactRef>(null);
 
     if (!shown) {
         settings.set({plugins: [YagrPlugin]});
@@ -25,7 +27,13 @@ const LineTemplate: Story<any> = () => {
 
     return (
         <div style={{height: 300, width: '100%'}}>
-            <ChartKit ref={chartkitRef} id="1" type="yagr" data={line10} />
+            <ChartKit
+                ref={chartkitRef}
+                id="1"
+                type="yagr"
+                data={line10}
+                pluginRef={yagrPluginRef}
+            />
         </div>
     );
 };

src/plugins/yagr/renderer/YagrWidget.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
+import {useForkRef} from '@gravity-ui/uikit';
 import YagrComponent, {YagrChartProps, YagrReactRef} from '@gravity-ui/yagr/dist/react';
 import {i18n} from '../../../i18n';
 import type {ChartKitWidgetRef, ChartKitProps} from '../../../types';
@@ -18,11 +19,13 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
     const {
         id,
         data: {data},
+        pluginRef,
         onLoad,
         onRender,
         onChartLoad,
     } = props;
     const yagrRef = React.useRef<YagrReactRef>(null);
+    const handleRef = useForkRef(pluginRef, yagrRef);
 
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
@@ -38,7 +41,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
             onLoad?.({...data, widget: chart, widgetRendering: renderTime});
             onRender?.({renderTime});
         },
-        [onLoad, data],
+        [onLoad, onRender, data],
     );
 
     const onWindowResize = React.useCallback(() => {
@@ -63,8 +66,6 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
         [onWindowResize],
     );
 
-    React.useImperativeHandle(props.rendererRef, () => yagrRef.current!);
-
     React.useEffect(() => {
         const yagr = yagrRef.current?.yagr();
 
@@ -111,7 +112,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
 
     return (
         <YagrComponent
-            ref={yagrRef}
+            ref={handleRef}
             id={id}
             config={config}
             debug={debug}

src/plugins/yagr/types.ts

@@ -1,6 +1,7 @@
 import type {RawSerieData, YagrConfig} from '@gravity-ui/yagr';
 
 export type {default as Yagr} from '@gravity-ui/yagr';
+export type {YagrReactRef} from '@gravity-ui/yagr/dist/react';
 export * from '@gravity-ui/yagr/dist/types';
 
 export type YagrWidgetData = {

src/types/index.ts

@@ -2,7 +2,6 @@ import React from 'react';
 
 import type {ChartKitWidget} from './widget';
 import {ChartKitError} from '../libs';
-import {YagrReactRef} from '@gravity-ui/yagr/dist/react';
 
 export type {ChartKitHolidays} from './misc';
 
@@ -18,12 +17,6 @@ export type ChartKitWidgetRef = {
     reflow?: ChartKitRef['reflow'];
 };
 
-export type ChartRenderedRef<T extends ChartKitType | undefined = undefined> = T extends undefined
-    ? undefined
-    : T extends 'yagr'
-    ? React.MutableRefObject<YagrReactRef | null>
-    : undefined;
-
 export type ChartKitOnLoadData<T extends ChartKitType> = {
     widget?: ChartKitWidget[T]['widget'];
     widgetRendering?: number;
@@ -41,8 +34,9 @@ export type ChartKitOnError = (data: {error: any}) => void;
 
 export type ChartKitProps<T extends ChartKitType> = {
     type: T;
-    rendererRef?: ChartRenderedRef<T>;
     data: ChartKitWidget[T]['data'];
+    /** Plugin component's react ref */
+    pluginRef?: ChartKitWidget[T]['pluginRef'];
     id?: string;
     isMobile?: boolean;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
@@ -56,7 +50,9 @@ export type ChartKitProps<T extends ChartKitType> = {
     renderError?: RenderError;
     /** Used to render user's plugin loader component */
     renderPluginLoader?: () => React.ReactNode;
-} & {[key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key]};
+} & {
+    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget' | 'pluginRef'>]: ChartKitWidget[T][key];
+};
 
 export type ChartKitPlugin = {
     type: ChartKitType;

src/types/widget.ts

@@ -1,20 +1,23 @@
-import type {Yagr, YagrWidgetData} from '../plugins/yagr/types';
+import type {Yagr, YagrReactRef, YagrWidgetData} from '../plugins/yagr/types';
 import type {IndicatorWidgetData} from '../plugins/indicator/types';
 import type {Highcharts, HighchartsWidgetData, StringParams} from '../plugins/highcharts/types';
 
 export interface ChartKitWidget {
     yagr: {
         data: YagrWidgetData;
         widget: Yagr;
+        pluginRef: React.MutableRefObject<YagrReactRef | null>;
     };
     indicator: {
         data: IndicatorWidgetData;
         widget: never;
+        pluginRef: never;
         formatNumber?: <T = any>(value: number, options?: T) => string;
     };
     highcharts: {
         data: HighchartsWidgetData;
         widget: Highcharts.Chart | null;
+        pluginRef: never;
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;