@gravity-ui/dashkit 8.23.0 → 8.24.0

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

@@ -1,15 +1,13 @@
 import React from 'react';
 import { Plugin, PluginWidgetProps } from '../../typings';
-export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+import type { PluginTitleSize, TitleFontParams } from './types';
 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/cjs/plugins/Title/Title.js

@@ -5,22 +5,28 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
+const constants_2 = require("./constants");
+const utils_1 = require("./utils");
 const b = (0, cn_1.cn)('dashkit-plugin-title');
-class PluginTitle extends react_1.default.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_1.default.createElement("div", { id: id, className: b({ size }), [constants_1.PLUGIN_ROOT_ATTR_NAME]: 'title' }, text));
-    }
-}
-exports.PluginTitle = PluginTitle;
+exports.PluginTitle = react_1.default.forwardRef(function PluginTitleForwardRef(props, ref) {
+    var _a, _b;
+    const { data } = props;
+    const text = data.text ? data.text : '';
+    const size = (0, utils_1.isCustomSize)(data.size) ? false : data.size;
+    const styles = (0, utils_1.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 : constants_2.RECCOMMENDED_LINE_HEIGHT_MULTIPLIER,
+        }
+        : undefined;
+    const id = data.showInTOC && text ? encodeURIComponent(text) : undefined;
+    return (react_1.default.createElement("div", { ref: ref, id: id, style: styles, className: b({ size }), [constants_1.PLUGIN_ROOT_ATTR_NAME]: 'title' }, text));
+});
 const plugin = {
     type: 'title',
     defaultLayout: { w: 36, h: 2 },
     renderer(props, forwardedRef) {
-        return react_1.default.createElement(PluginTitle, Object.assign({}, props, { ref: forwardedRef }));
+        return react_1.default.createElement(exports.PluginTitle, Object.assign({}, props, { ref: forwardedRef }));
     },
 };
 exports.default = plugin;

package/build/cjs/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/cjs/plugins/Title/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RECCOMMENDED_LINE_HEIGHT_MULTIPLIER = exports.TITLE_DEFAULT_SIZES = void 0;
+exports.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',
+    },
+};
+exports.RECCOMMENDED_LINE_HEIGHT_MULTIPLIER = 1.25;

package/build/cjs/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/cjs/plugins/Title/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pluginTitle = void 0;
+exports.TITLE_DEFAULT_SIZES = exports.pluginTitle = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Title"), exports);
 var Title_1 = require("./Title");
 Object.defineProperty(exports, "pluginTitle", { enumerable: true, get: function () { return tslib_1.__importDefault(Title_1).default; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "TITLE_DEFAULT_SIZES", { enumerable: true, get: function () { return constants_1.TITLE_DEFAULT_SIZES; } });

package/build/cjs/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/cjs/plugins/Title/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/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/cjs/plugins/Title/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCustomSize = void 0;
+function isCustomSize(size) {
+    return typeof size === 'object';
+}
+exports.isCustomSize = isCustomSize;

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/package.json

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