@gravity-ui/querieskit 1.0.4 → 1.1.0

package/build/cjs/components/Dashboard/Dashboard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_charts","_uikit","_actions","_Dashboard","_jsxRuntime","e","__esModule","default","errorsChart","legend","enabled","xAxis","type","yAxis","min","series","data","name","map","y","x","latencyChart","baseItems","id","content","_jsx","Chart","_jsxs","Flex","direction","gap","children","Text","variant","color","operationalItems","concat","balancedLayout","i","w","h","overviewLayout","StoryFrame","_ref","title","description","actions","_ref$narrow","narrow","className","alignItems","justifyContent","DynamicItemsStory","_React$useState","React","useState","_React$useState2","_slicedToArray","items","setItems","handleAddItem","currentItems","itemNumber","length","_toConsumableArray","handleRemoveItem","slice","_Fragment","Button","onClick","disabled","Dashboard","onLayoutChange","action","ControlledLayoutStory","_React$useState3","_React$useState4","layout","setLayout","selected","defaultLayout","nextLayout","NarrowGridStory","grid","cols","rowHeight","compactType","meta","component","tags","parameters","_default","exports","Default","render","DynamicItems","ControlledLayout","CustomGrid"],"sources":["Dashboard.stories.tsx"],"sourcesContent":["import React from 'react';\nimport {Chart, type ChartData} from '@gravity-ui/charts';\nimport type {ConfigLayout} from '@gravity-ui/dashkit';\nimport {Button, Flex, Text} from '@gravity-ui/uikit';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {action} from 'storybook/actions';\n\nimport {Dashboard} from './Dashboard';\nimport type {DashboardRenderItem} from './types';\n\nimport './Dashboard.stories.scss';\n\nconst errorsChart: ChartData = {\n    legend: {enabled: false},\n    xAxis: {type: 'linear'},\n    yAxis: [{type: 'linear', min: 0}],\n    series: {\n        data: [\n            {\n                type: 'line',\n                name: 'Errors',\n                data: [82, 76, 79, 68, 84, 61, 74, 44, 71, 59, 66, 63, 77, 72, 80, 75].map(\n                    (y, x) => ({x, y}),\n                ),\n            },\n        ],\n    },\n};\n\nconst latencyChart: ChartData = {\n    legend: {enabled: false},\n    xAxis: {type: 'linear'},\n    yAxis: [{type: 'linear', min: 0}],\n    series: {\n        data: [\n            {\n                type: 'area',\n                name: 'Latency',\n                data: [42, 58, 47, 69, 52, 74, 63, 78, 68, 81, 73, 86, 79, 88, 83, 91].map(\n                    (y, x) => ({x, y}),\n                ),\n            },\n        ],\n    },\n};\n\nconst baseItems: DashboardRenderItem[] = [\n    {id: 'errors', content: <Chart data={errorsChart} />},\n    {id: 'latency', content: <Chart data={latencyChart} />},\n    {\n        id: 'availability',\n        content: (\n            <Flex direction=\"column\" gap={1}>\n                <Text variant=\"display-3\">98.7%</Text>\n                <Text color=\"secondary\">Availability during the last 24 hours</Text>\n            </Flex>\n        ),\n    },\n];\n\nconst operationalItems: DashboardRenderItem[] = [\n    ...baseItems,\n    {\n        id: 'requests',\n        content: (\n            <Flex direction=\"column\" gap={1}>\n                <Text variant=\"display-3\">12.4k</Text>\n                <Text color=\"secondary\">Requests per minute</Text>\n            </Flex>\n        ),\n    },\n];\n\nconst balancedLayout: ConfigLayout[] = [\n    {i: 'errors', x: 0, y: 0, w: 2, h: 4},\n    {i: 'latency', x: 2, y: 0, w: 2, h: 4},\n    {i: 'availability', x: 0, y: 4, w: 2, h: 3},\n    {i: 'requests', x: 2, y: 4, w: 2, h: 3},\n];\n\nconst overviewLayout: ConfigLayout[] = [\n    {i: 'errors', x: 0, y: 0, w: 4, h: 5},\n    {i: 'latency', x: 0, y: 5, w: 2, h: 4},\n    {i: 'availability', x: 2, y: 5, w: 1, h: 4},\n    {i: 'requests', x: 3, y: 5, w: 1, h: 4},\n];\n\nfunction StoryFrame({\n    title,\n    description,\n    actions,\n    children,\n    narrow = false,\n}: {\n    title: string;\n    description: string;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n    narrow?: boolean;\n}) {\n    return (\n        <div className=\"qp-dashboard-story\">\n            <Flex direction=\"column\" gap={1} className=\"qp-dashboard-story__header\">\n                <Flex alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n                    <Text variant=\"header-1\">{title}</Text>\n                    {actions && <Flex gap={2}>{actions}</Flex>}\n                </Flex>\n                <Text color=\"secondary\">{description}</Text>\n            </Flex>\n            <div\n                className={\n                    narrow\n                        ? 'qp-dashboard-story__dashboard qp-dashboard-story__dashboard_narrow'\n                        : 'qp-dashboard-story__dashboard'\n                }\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n\nfunction DynamicItemsStory() {\n    const [items, setItems] = React.useState(baseItems);\n\n    const handleAddItem = () => {\n        setItems((currentItems) => {\n            const itemNumber = currentItems.length + 1;\n\n            return [\n                ...currentItems,\n                {\n                    id: `metric-${itemNumber}`,\n                    content: (\n                        <Flex direction=\"column\" gap={1}>\n                            <Text variant=\"display-3\">{itemNumber * 128}</Text>\n                            <Text color=\"secondary\">Dynamically added metric #{itemNumber}</Text>\n                        </Flex>\n                    ),\n                },\n            ];\n        });\n    };\n\n    const handleRemoveItem = () => {\n        setItems((currentItems) => currentItems.slice(0, -1));\n    };\n\n    return (\n        <StoryFrame\n            title=\"Dynamic items\"\n            description=\"Add and remove items: Dashboard creates layout entries for new stable ids automatically.\"\n            actions={\n                <>\n                    <Button onClick={handleAddItem}>Add metric</Button>\n                    <Button disabled={items.length === 0} onClick={handleRemoveItem}>\n                        Remove last\n                    </Button>\n                </>\n            }\n        >\n            <Dashboard items={items} onLayoutChange={action('onLayoutChange')} />\n        </StoryFrame>\n    );\n}\n\nfunction ControlledLayoutStory() {\n    const [layout, setLayout] = React.useState(balancedLayout);\n\n    return (\n        <StoryFrame\n            title=\"Controlled layout\"\n            description=\"Switch presets, then drag or resize a card: every change is saved back to the controlled layout.\"\n            actions={\n                <>\n                    <Button\n                        selected={layout === balancedLayout}\n                        onClick={() => setLayout(balancedLayout)}\n                    >\n                        Balanced\n                    </Button>\n                    <Button\n                        selected={layout === overviewLayout}\n                        onClick={() => setLayout(overviewLayout)}\n                    >\n                        Overview\n                    </Button>\n                </>\n            }\n        >\n            <Dashboard\n                items={operationalItems}\n                defaultLayout={layout}\n                onLayoutChange={(nextLayout) => {\n                    setLayout(nextLayout);\n                    action('onLayoutChange')(nextLayout);\n                }}\n            />\n        </StoryFrame>\n    );\n}\n\nfunction NarrowGridStory() {\n    return (\n        <StoryFrame\n            narrow\n            title=\"Custom grid\"\n            description=\"A one-column grid with custom row height and gap fits the same items into a narrow container.\"\n        >\n            <Dashboard\n                items={baseItems}\n                grid={{cols: 1, rowHeight: 56, gap: 12, compactType: 'vertical'}}\n                onLayoutChange={action('onLayoutChange')}\n            />\n        </StoryFrame>\n    );\n}\n\nconst meta: Meta<typeof Dashboard> = {\n    title: 'Components/Dashboard',\n    component: Dashboard,\n    tags: ['autodocs'],\n    parameters: {layout: 'fullscreen'},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Dashboard>;\n\n/** A draggable and resizable dashboard with charts and arbitrary React content. */\nexport const Default: Story = {\n    render: () => (\n        <StoryFrame\n            title=\"Service overview\"\n            description=\"Drag cards by the handle or resize them from the corner to rearrange the dashboard.\"\n        >\n            <Dashboard items={baseItems} onLayoutChange={action('onLayoutChange')} />\n        </StoryFrame>\n    ),\n};\n\n/** Dashboard manages a default layout and creates positions for items added at runtime. */\nexport const DynamicItems: Story = {render: () => <DynamicItemsStory />};\n\n/** The layout can be fully controlled, persisted and replaced with a preset. */\nexport const ControlledLayout: Story = {render: () => <ControlledLayoutStory />};\n\n/** Grid columns, row height, gaps and compaction can be adapted to the host container. */\nexport const CustomGrid: Story = {render: () => <NarrowGridStory />};\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/Dashboard/helpers/createDefaultLayout.d.ts

@@ -0,0 +1,10 @@
+import type { DashboardRenderItem } from '../types';
+import type { ConfigLayout } from '@gravity-ui/dashkit';
+export declare const createDefaultLayout: (items: DashboardRenderItem[], columns: number) => ConfigLayout[];
+export declare const createDefaultLayoutForItem: (item: DashboardRenderItem, columns: number, index: number) => {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};

package/build/cjs/components/Dashboard/helpers/createDefaultLayout.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDefaultLayoutForItem = exports.createDefaultLayout = void 0;
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.string.iterator.js");
+var DEFAULT_ITEM_HEIGHT = 4;
+var createDefaultLayout = exports.createDefaultLayout = function createDefaultLayout(items, columns) {
+  var itemCount = items.length;
+  var width = Math.min(Math.ceil(columns / 2), columns);
+  var height = DEFAULT_ITEM_HEIGHT;
+  var itemsPerRow = Math.max(Math.floor(columns / width), 1);
+  return Array.from({
+    length: itemCount
+  }, function (_, index) {
+    return {
+      i: items[index].id,
+      x: index % itemsPerRow * width,
+      y: Math.floor(index / itemsPerRow) * height,
+      w: width,
+      h: height
+    };
+  });
+};
+var createDefaultLayoutForItem = exports.createDefaultLayoutForItem = function createDefaultLayoutForItem(item, columns, index) {
+  var width = Math.min(Math.ceil(columns / 2), columns);
+  var height = DEFAULT_ITEM_HEIGHT;
+  var itemsPerRow = Math.max(Math.floor(columns / width), 1);
+  return {
+    i: item.id,
+    x: index % itemsPerRow * width,
+    y: Math.floor(index / itemsPerRow) * height,
+    w: width,
+    h: DEFAULT_ITEM_HEIGHT
+  };
+};
+// #sourceMappingURL=createDefaultLayout.js.map

package/build/cjs/components/Dashboard/helpers/createDefaultLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_ITEM_HEIGHT","createDefaultLayout","exports","items","columns","itemCount","length","width","Math","min","ceil","height","itemsPerRow","max","floor","Array","from","_","index","i","id","x","y","w","h","createDefaultLayoutForItem","item"],"sources":["createDefaultLayout.ts"],"sourcesContent":["import type {DashboardRenderItem} from '../types';\nimport type {ConfigLayout} from '@gravity-ui/dashkit';\n\nconst DEFAULT_ITEM_HEIGHT = 4;\n\nexport const createDefaultLayout = (\n    items: DashboardRenderItem[],\n    columns: number,\n): ConfigLayout[] => {\n    const itemCount = items.length;\n\n    const width = Math.min(Math.ceil(columns / 2), columns);\n    const height = DEFAULT_ITEM_HEIGHT;\n\n    const itemsPerRow = Math.max(Math.floor(columns / width), 1);\n\n    return Array.from({length: itemCount}, (_, index) => ({\n        i: items[index].id,\n        x: (index % itemsPerRow) * width,\n        y: Math.floor(index / itemsPerRow) * height,\n        w: width,\n        h: height,\n    }));\n};\n\nexport const createDefaultLayoutForItem = (\n    item: DashboardRenderItem,\n    columns: number,\n    index: number,\n) => {\n    const width = Math.min(Math.ceil(columns / 2), columns);\n    const height = DEFAULT_ITEM_HEIGHT;\n\n    const itemsPerRow = Math.max(Math.floor(columns / width), 1);\n\n    return {\n        i: item.id,\n        x: (index % itemsPerRow) * width,\n        y: Math.floor(index / itemsPerRow) * height,\n        w: width,\n        h: DEFAULT_ITEM_HEIGHT,\n    };\n};\n"],"mappings":";;;;;;;;AAGA,IAAMA,mBAAmB,GAAG,CAAC;AAEtB,IAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAC5BE,KAA4B,EAC5BC,OAAe,EACE;EACjB,IAAMC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAE9B,IAAMC,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,IAAI,CAACN,OAAO,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC;EACvD,IAAMO,MAAM,GAAGX,mBAAmB;EAElC,IAAMY,WAAW,GAAGJ,IAAI,CAACK,GAAG,CAACL,IAAI,CAACM,KAAK,CAACV,OAAO,GAAGG,KAAK,CAAC,EAAE,CAAC,CAAC;EAE5D,OAAOQ,KAAK,CAACC,IAAI,CAAC;IAACV,MAAM,EAAED;EAAS,CAAC,EAAE,UAACY,CAAC,EAAEC,KAAK;IAAA,OAAM;MAClDC,CAAC,EAAEhB,KAAK,CAACe,KAAK,CAAC,CAACE,EAAE;MAClBC,CAAC,EAAGH,KAAK,GAAGN,WAAW,GAAIL,KAAK;MAChCe,CAAC,EAAEd,IAAI,CAACM,KAAK,CAACI,KAAK,GAAGN,WAAW,CAAC,GAAGD,MAAM;MAC3CY,CAAC,EAAEhB,KAAK;MACRiB,CAAC,EAAEb;IACP,CAAC;EAAA,CAAC,CAAC;AACP,CAAC;AAEM,IAAMc,0BAA0B,GAAAvB,OAAA,CAAAuB,0BAAA,GAAG,SAA7BA,0BAA0BA,CACnCC,IAAyB,EACzBtB,OAAe,EACfc,KAAa,EACZ;EACD,IAAMX,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,IAAI,CAACN,OAAO,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC;EACvD,IAAMO,MAAM,GAAGX,mBAAmB;EAElC,IAAMY,WAAW,GAAGJ,IAAI,CAACK,GAAG,CAACL,IAAI,CAACM,KAAK,CAACV,OAAO,GAAGG,KAAK,CAAC,EAAE,CAAC,CAAC;EAE5D,OAAO;IACHY,CAAC,EAAEO,IAAI,CAACN,EAAE;IACVC,CAAC,EAAGH,KAAK,GAAGN,WAAW,GAAIL,KAAK;IAChCe,CAAC,EAAEd,IAAI,CAACM,KAAK,CAACI,KAAK,GAAGN,WAAW,CAAC,GAAGD,MAAM;IAC3CY,CAAC,EAAEhB,KAAK;IACRiB,CAAC,EAAExB;EACP,CAAC;AACL,CAAC","ignoreList":[]}

package/build/cjs/components/Dashboard/hooks/useDashboardConfig.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardProps, DashboardRenderItem } from '../types';
+import type { Config, ConfigLayout, DashKitGroup, ReactGridLayoutProps } from '@gravity-ui/dashkit';
+export declare const DASHBOARD_PLUGIN_TYPE = "querieskit-dashboard-item";
+export declare const DEFAULT_COLUMNS = 4;
+export declare const DEFAULT_GRID: DashboardProps['grid'];
+export declare const useDashboardConfig: (items: DashboardRenderItem[], customerGridState?: ReactGridLayoutProps, defaultLayout?: ConfigLayout[]) => {
+    config: Config;
+    gridGroups: DashKitGroup[];
+};

package/build/cjs/components/Dashboard/hooks/useDashboardConfig.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDashboardConfig = exports.DEFAULT_GRID = exports.DEFAULT_COLUMNS = exports.DASHBOARD_PLUGIN_TYPE = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = require("react");
+var _createDefaultLayout = require("../helpers/createDefaultLayout");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DASHBOARD_PLUGIN_TYPE = exports.DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';
+var DEFAULT_COLUMNS = exports.DEFAULT_COLUMNS = 4;
+var DEFAULT_GRID = exports.DEFAULT_GRID = {
+  cols: DEFAULT_COLUMNS,
+  rowHeight: 64,
+  gap: 8,
+  compactType: 'vertical'
+};
+var useDashboardConfig = exports.useDashboardConfig = function useDashboardConfig(items, customerGridState, defaultLayout) {
+  var gridProps = (0, _react.useMemo)(function () {
+    var _customerGridState$ga;
+    var gap = (_customerGridState$ga = customerGridState === null || customerGridState === void 0 ? void 0 : customerGridState.gap) !== null && _customerGridState$ga !== void 0 ? _customerGridState$ga : DEFAULT_GRID.gap;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      containerPadding: [0, 0],
+      margin: typeof gap === 'number' ? [gap, gap] : gap
+    }, DEFAULT_GRID), customerGridState);
+  }, [customerGridState]);
+  var gridGroups = (0, _react.useMemo)(function () {
+    return [{
+      gridProperties: function gridProperties() {
+        return gridProps;
+      }
+    }];
+  }, [gridProps]);
+  var cols = gridProps.cols;
+  var layout = (0, _react.useMemo)(function () {
+    return defaultLayout !== null && defaultLayout !== void 0 ? defaultLayout : (0, _createDefaultLayout.createDefaultLayout)(items, cols);
+  }, [defaultLayout, items, cols]);
+  var config = (0, _react.useMemo)(function () {
+    return {
+      salt: 'querieskit-dashboard',
+      counter: 0,
+      aliases: {},
+      connections: [],
+      items: items.map(function (_ref) {
+        var id = _ref.id;
+        return {
+          id: id,
+          type: DASHBOARD_PLUGIN_TYPE,
+          namespace: 'default',
+          data: {}
+        };
+      }),
+      layout: layout
+    };
+  }, [layout, items]);
+  return {
+    config: config,
+    gridGroups: gridGroups
+  };
+};
+// #sourceMappingURL=useDashboardConfig.js.map

package/build/cjs/components/Dashboard/hooks/useDashboardConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_createDefaultLayout","_interopRequireDefault","e","__esModule","default","DASHBOARD_PLUGIN_TYPE","exports","DEFAULT_COLUMNS","DEFAULT_GRID","cols","rowHeight","gap","compactType","useDashboardConfig","items","customerGridState","defaultLayout","gridProps","useMemo","_customerGridState$ga","_objectSpread","containerPadding","margin","gridGroups","gridProperties","layout","createDefaultLayout","config","salt","counter","aliases","connections","map","_ref","id","type","namespace","data"],"sources":["useDashboardConfig.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {createDefaultLayout} from '../helpers/createDefaultLayout';\nimport type {DashboardProps, DashboardRenderItem} from '../types';\nimport type {Config, ConfigLayout, DashKitGroup, ReactGridLayoutProps} from '@gravity-ui/dashkit';\n\nexport const DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';\n\nexport const DEFAULT_COLUMNS = 4;\n\nexport const DEFAULT_GRID: DashboardProps['grid'] = {\n    cols: DEFAULT_COLUMNS,\n    rowHeight: 64,\n    gap: 8,\n    compactType: 'vertical',\n};\n\nexport const useDashboardConfig = (\n    items: DashboardRenderItem[],\n    customerGridState?: ReactGridLayoutProps,\n    defaultLayout?: ConfigLayout[],\n) => {\n    const gridProps: ReactGridLayoutProps = useMemo(() => {\n        const gap = customerGridState?.gap ?? DEFAULT_GRID.gap;\n\n        return {\n            containerPadding: [0, 0],\n            margin: typeof gap === 'number' ? [gap, gap] : gap,\n            ...DEFAULT_GRID,\n            ...customerGridState,\n        };\n    }, [customerGridState]);\n\n    const gridGroups = useMemo<DashKitGroup[]>(\n        () => [{gridProperties: () => gridProps}],\n        [gridProps],\n    );\n\n    const cols = gridProps.cols;\n\n    const layout = useMemo(\n        () => defaultLayout ?? createDefaultLayout(items, cols),\n        [defaultLayout, items, cols],\n    );\n\n    const config: Config = useMemo(\n        () => ({\n            salt: 'querieskit-dashboard',\n            counter: 0,\n            aliases: {},\n            connections: [],\n            items: items.map(({id}) => ({\n                id,\n                type: DASHBOARD_PLUGIN_TYPE,\n                namespace: 'default',\n                data: {},\n            })),\n            layout,\n        }),\n        [layout, items],\n    );\n\n    return {config, gridGroups};\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AAA2B,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIpB,IAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,2BAA2B;AAEzD,IAAME,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,CAAC;AAEzB,IAAMC,YAAoC,GAAAF,OAAA,CAAAE,YAAA,GAAG;EAChDC,IAAI,EAAEF,eAAe;EACrBG,SAAS,EAAE,EAAE;EACbC,GAAG,EAAE,CAAC;EACNC,WAAW,EAAE;AACjB,CAAC;AAEM,IAAMC,kBAAkB,GAAAP,OAAA,CAAAO,kBAAA,GAAG,SAArBA,kBAAkBA,CAC3BC,KAA4B,EAC5BC,iBAAwC,EACxCC,aAA8B,EAC7B;EACD,IAAMC,SAA+B,GAAG,IAAAC,cAAO,EAAC,YAAM;IAAA,IAAAC,qBAAA;IAClD,IAAMR,GAAG,IAAAQ,qBAAA,GAAGJ,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEJ,GAAG,cAAAQ,qBAAA,cAAAA,qBAAA,GAAIX,YAAY,CAACG,GAAG;IAEtD,WAAAS,sBAAA,MAAAA,sBAAA;MACIC,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACxBC,MAAM,EAAE,OAAOX,GAAG,KAAK,QAAQ,GAAG,CAACA,GAAG,EAAEA,GAAG,CAAC,GAAGA;IAAG,GAC/CH,YAAY,GACZO,iBAAiB;EAE5B,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,IAAMQ,UAAU,GAAG,IAAAL,cAAO,EACtB;IAAA,OAAM,CAAC;MAACM,cAAc,EAAE,SAAhBA,cAAcA,CAAA;QAAA,OAAQP,SAAS;MAAA;IAAA,CAAC,CAAC;EAAA,GACzC,CAACA,SAAS,CACd,CAAC;EAED,IAAMR,IAAI,GAAGQ,SAAS,CAACR,IAAI;EAE3B,IAAMgB,MAAM,GAAG,IAAAP,cAAO,EAClB;IAAA,OAAMF,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,IAAAU,wCAAmB,EAACZ,KAAK,EAAEL,IAAI,CAAC;EAAA,GACvD,CAACO,aAAa,EAAEF,KAAK,EAAEL,IAAI,CAC/B,CAAC;EAED,IAAMkB,MAAc,GAAG,IAAAT,cAAO,EAC1B;IAAA,OAAO;MACHU,IAAI,EAAE,sBAAsB;MAC5BC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE,CAAC,CAAC;MACXC,WAAW,EAAE,EAAE;MACfjB,KAAK,EAAEA,KAAK,CAACkB,GAAG,CAAC,UAAAC,IAAA;QAAA,IAAEC,EAAE,GAAAD,IAAA,CAAFC,EAAE;QAAA,OAAO;UACxBA,EAAE,EAAFA,EAAE;UACFC,IAAI,EAAE9B,qBAAqB;UAC3B+B,SAAS,EAAE,SAAS;UACpBC,IAAI,EAAE,CAAC;QACX,CAAC;MAAA,CAAC,CAAC;MACHZ,MAAM,EAANA;IACJ,CAAC;EAAA,CAAC,EACF,CAACA,MAAM,EAAEX,KAAK,CAClB,CAAC;EAED,OAAO;IAACa,MAAM,EAANA,MAAM;IAAEJ,UAAU,EAAVA;EAAU,CAAC;AAC/B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { Dashboard } from './Dashboard';
+export type { DashboardItemAppearance, DashboardProps } from './types';

package/build/cjs/components/Dashboard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dashboard", {
+  enumerable: true,
+  get: function () {
+    return _Dashboard.Dashboard;
+  }
+});
+var _Dashboard = require("./Dashboard");
+// #sourceMappingURL=index.js.map

package/build/cjs/components/Dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Dashboard","require"],"sources":["index.ts"],"sourcesContent":["export {Dashboard} from './Dashboard';\nexport type {DashboardItemAppearance, DashboardProps} from './types';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA","ignoreList":[]}

package/build/cjs/components/Dashboard/internal/DashPlate.css

@@ -0,0 +1,22 @@
+.qp-dashplate__item {
+  background: var(--g-color-base-background);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.qp-dashplate__drag-icon {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: 100%;
+  color: var(--g-color-text-secondary);
+  text-align: center;
+  cursor: grab;
+  opacity: 0;
+}
+.qp-dashplate__item:hover .qp-dashplate__drag-icon, .qp-dashplate__item:focus-within .qp-dashplate__drag-icon {
+  opacity: 1;
+}
+/*# sourceMappingURL=DashPlate.css.map */

package/build/cjs/components/Dashboard/internal/DashPlate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DashPlate.scss"],"names":[],"mappings":"AACI;EACI,0CAAA;EACA,6CAAA;EACA,uCAAA;AAAR;AAGI;EACI,kBAAA;EACA,UAAA;EACA,MAAA;EAAA,QAAA;EAAA,YAAA;EAAA,OAAA;EACA,WAAA;EACA,oCAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;AADR;AAII;EAEI,UAAA;AAHR","file":"DashPlate.css","sourcesContent":[".qp-dashplate {\n    &__item {\n        background: var(--g-color-base-background);\n        border: 1px solid var(--g-color-line-generic);\n        border-radius: var(--g-border-radius-m);\n    }\n\n    &__drag-icon {\n        position: absolute;\n        z-index: 1;\n        inset: 0 0 auto;\n        width: 100%;\n        color: var(--g-color-text-secondary);\n        text-align: center;\n        cursor: grab;\n        opacity: 0;\n    }\n\n    &__item:hover &__drag-icon,\n    &__item:focus-within &__drag-icon {\n        opacity: 1;\n    }\n}"],"sourceRoot":""}

package/build/cjs/components/Dashboard/internal/DashPlate.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PluginWidgetProps } from '@gravity-ui/dashkit';
+import './DashPlate.scss';
+export declare const DRAG_HANDLE_CLASSNAME = "DRAG_HANDLE_CLASSNAME";
+export declare const DashPlate: ({ id }: PluginWidgetProps) => React.JSX.Element | null;

package/build/cjs/components/Dashboard/internal/DashPlate.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DashPlate = exports.DRAG_HANDLE_CLASSNAME = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@gravity-ui/icons");
+var _uikit = require("@gravity-ui/uikit");
+var _DashboardProvider = require("./DashboardProvider");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+require("./DashPlate.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var block = (0, _bemCnLite.default)('qp-dashplate');
+var DRAG_HANDLE_CLASSNAME = exports.DRAG_HANDLE_CLASSNAME = 'DRAG_HANDLE_CLASSNAME';
+var DashPlate = exports.DashPlate = function DashPlate(_ref) {
+  var id = _ref.id;
+  var _useDashboardContext = (0, _DashboardProvider.useDashboardContext)(),
+    getItem = _useDashboardContext.getItem;
+  var item = getItem(id);
+  if (!item) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+    direction: "column",
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    spacing: {
+      p: 4
+    },
+    className: block('item'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+      data: _icons.GripHorizontal,
+      className: block('drag-icon', DRAG_HANDLE_CLASSNAME)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      className: block('content'),
+      children: item.content
+    })]
+  });
+};
+// #sourceMappingURL=DashPlate.js.map

package/build/cjs/components/Dashboard/internal/DashPlate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_icons","_uikit","_DashboardProvider","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","DRAG_HANDLE_CLASSNAME","exports","DashPlate","_ref","id","_useDashboardContext","useDashboardContext","getItem","item","_jsxs","Flex","direction","position","width","height","overflow","spacing","p","className","children","_jsx","Icon","data","GripHorizontal","content"],"sources":["DashPlate.tsx"],"sourcesContent":["import React from 'react';\nimport {GripHorizontal} from '@gravity-ui/icons';\nimport {Flex, Icon} from '@gravity-ui/uikit';\nimport type {PluginWidgetProps} from '@gravity-ui/dashkit';\nimport {useDashboardContext} from './DashboardProvider';\nimport cn from 'bem-cn-lite';\nimport './DashPlate.scss';\n\nconst block = cn('qp-dashplate');\n\nexport const DRAG_HANDLE_CLASSNAME = 'DRAG_HANDLE_CLASSNAME';\n\nexport const DashPlate = ({id}: PluginWidgetProps) => {\n    const {getItem} = useDashboardContext();\n    const item = getItem(id);\n\n    if (!item) return null;\n\n    return (\n        <Flex\n            direction=\"column\"\n            position=\"relative\"\n            width=\"100%\"\n            height=\"100%\"\n            overflow=\"hidden\"\n            spacing={{p: 4}}\n            className={block('item')}\n        >\n            <Icon data={GripHorizontal} className={block('drag-icon', DRAG_HANDLE_CLASSNAME)} />\n            <Flex width=\"100%\" height=\"100%\" overflow=\"hidden\" className={block('content')}>\n                {item.content}\n            </Flex>\n        </Flex>\n    );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAL,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAA0B,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE1B,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,cAAc,CAAC;AAEzB,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,uBAAuB;AAErD,IAAME,SAAS,GAAAD,OAAA,CAAAC,SAAA,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAAgC;EAAA,IAA3BC,EAAE,GAAAD,IAAA,CAAFC,EAAE;EACzB,IAAAC,oBAAA,GAAkB,IAAAC,sCAAmB,EAAC,CAAC;IAAhCC,OAAO,GAAAF,oBAAA,CAAPE,OAAO;EACd,IAAMC,IAAI,GAAGD,OAAO,CAACH,EAAE,CAAC;EAExB,IAAI,CAACI,IAAI,EAAE,OAAO,IAAI;EAEtB,oBACI,IAAAC,gBAAA,EAACC,WAAI;IACDC,SAAS,EAAC,QAAQ;IAClBC,QAAQ,EAAC,UAAU;IACnBC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbC,QAAQ,EAAC,QAAQ;IACjBC,OAAO,EAAE;MAACC,CAAC,EAAE;IAAC,CAAE;IAChBC,SAAS,EAAEpB,KAAK,CAAC,MAAM,CAAE;IAAAqB,QAAA,gBAEzB,IAAAC,eAAA,EAACC,WAAI;MAACC,IAAI,EAAEC,qBAAe;MAACL,SAAS,EAAEpB,KAAK,CAAC,WAAW,EAAEE,qBAAqB;IAAE,CAAE,CAAC,eACpF,IAAAoB,eAAA,EAACV,WAAI;MAACG,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,QAAQ,EAAC,QAAQ;MAACG,SAAS,EAAEpB,KAAK,CAAC,SAAS,CAAE;MAAAqB,QAAA,EAC1EX,IAAI,CAACgB;IAAO,CACX,CAAC;EAAA,CACL,CAAC;AAEf,CAAC","ignoreList":[]}

package/build/cjs/components/Dashboard/internal/DashboardProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DashboardRenderItem } from '../types';
+type DashboardContextValue = {
+    items: DashboardRenderItem[];
+    getItem: (id: string) => DashboardRenderItem | undefined;
+};
+type DashboardProviderProps = {
+    items: DashboardRenderItem[];
+    children: React.ReactNode;
+};
+export declare const DashboardProvider: ({ items, children }: DashboardProviderProps) => React.JSX.Element;
+export declare const useDashboardContext: () => DashboardContextValue;
+export {};

package/build/cjs/components/Dashboard/internal/DashboardProvider.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDashboardContext = exports.DashboardProvider = void 0;
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.map.get-or-insert.js");
+require("core-js/modules/esnext.map.get-or-insert-computed.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var DashboardContext = /*#__PURE__*/(0, _react.createContext)(null);
+var DashboardProvider = exports.DashboardProvider = function DashboardProvider(_ref) {
+  var items = _ref.items,
+    children = _ref.children;
+  var contextValue = (0, _react.useMemo)(function () {
+    var itemsById = new Map(items.map(function (item) {
+      return [item.id, item];
+    }));
+    return {
+      items: items,
+      getItem: function getItem(id) {
+        return itemsById.get(id);
+      }
+    };
+  }, [items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+var useDashboardContext = exports.useDashboardContext = function useDashboardContext() {
+  var context = (0, _react.useContext)(DashboardContext);
+  if (!context) {
+    throw new Error('useDashboardContext must be used within a DashboardProvider');
+  }
+  return context;
+};
+// #sourceMappingURL=DashboardProvider.js.map

package/build/cjs/components/Dashboard/internal/DashboardProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DashboardContext","createContext","DashboardProvider","exports","_ref","items","children","contextValue","useMemo","itemsById","Map","map","item","id","getItem","_jsx","Provider","value","useDashboardContext","context","useContext","Error"],"sources":["DashboardProvider.tsx"],"sourcesContent":["import React, {createContext, useContext, useMemo} from 'react';\nimport type {DashboardRenderItem} from '../types';\n\ntype DashboardContextValue = {\n    items: DashboardRenderItem[];\n    getItem: (id: string) => DashboardRenderItem | undefined;\n};\n\nconst DashboardContext = createContext<DashboardContextValue | null>(null);\n\ntype DashboardProviderProps = {\n    items: DashboardRenderItem[];\n    children: React.ReactNode;\n};\n\nexport const DashboardProvider = ({items, children}: DashboardProviderProps) => {\n    const contextValue = useMemo<DashboardContextValue>(() => {\n        const itemsById = new Map(items.map((item) => [item.id, item]));\n\n        return {\n            items,\n            getItem: (id: string) => itemsById.get(id),\n        };\n    }, [items]);\n\n    return <DashboardContext.Provider value={contextValue}>{children}</DashboardContext.Provider>;\n};\n\nexport const useDashboardContext = () => {\n    const context = useContext(DashboardContext);\n\n    if (!context) {\n        throw new Error('useDashboardContext must be used within a DashboardProvider');\n    }\n\n    return context;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQhE,IAAMkB,gBAAgB,gBAAG,IAAAC,oBAAa,EAA+B,IAAI,CAAC;AAOnE,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAAE,IAAA,EAAkD;EAAA,IAA7CC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAC9C,IAAMC,YAAY,GAAG,IAAAC,cAAO,EAAwB,YAAM;IACtD,IAAMC,SAAS,GAAG,IAAIC,GAAG,CAACL,KAAK,CAACM,GAAG,CAAC,UAACC,IAAI;MAAA,OAAK,CAACA,IAAI,CAACC,EAAE,EAAED,IAAI,CAAC;IAAA,EAAC,CAAC;IAE/D,OAAO;MACHP,KAAK,EAALA,KAAK;MACLS,OAAO,EAAE,SAATA,OAAOA,CAAGD,EAAU;QAAA,OAAKJ,SAAS,CAAChB,GAAG,CAACoB,EAAE,CAAC;MAAA;IAC9C,CAAC;EACL,CAAC,EAAE,CAACR,KAAK,CAAC,CAAC;EAEX,oBAAO,IAAAU,eAAA,EAACf,gBAAgB,CAACgB,QAAQ;IAACC,KAAK,EAAEV,YAAa;IAAAD,QAAA,EAAEA;EAAQ,CAA4B,CAAC;AACjG,CAAC;AAEM,IAAMY,mBAAmB,GAAAf,OAAA,CAAAe,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACpB,gBAAgB,CAAC;EAE5C,IAAI,CAACmB,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,6DAA6D,CAAC;EAClF;EAEA,OAAOF,OAAO;AAClB,CAAC","ignoreList":[]}

package/build/cjs/components/Dashboard/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { ConfigLayout, ReactGridLayoutProps } from '@gravity-ui/dashkit';
+export type DashboardItemAppearance = 'card' | 'plain';
+export type DashboardRenderItem = {
+    id: string;
+    content: ReactNode;
+};
+export type DashboardProps = {
+    items: DashboardRenderItem[];
+    defaultLayout?: ConfigLayout[];
+    grid?: ReactGridLayoutProps;
+    focusable?: boolean;
+    className?: string;
+    onLayoutChange?: (layout: ConfigLayout[]) => void;
+    onItemFocus?: (item: ReactNode, index: number) => void;
+    onItemBlur?: (item: ReactNode, index: number) => void;
+};

package/build/cjs/components/Dashboard/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+// #sourceMappingURL=types.js.map

package/build/cjs/components/Dashboard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {ReactNode} from 'react';\nimport type {ConfigLayout, ReactGridLayoutProps} from '@gravity-ui/dashkit';\n\nexport type DashboardItemAppearance = 'card' | 'plain';\n\nexport type DashboardRenderItem = {\n    id: string;\n    content: ReactNode;\n};\n\nexport type DashboardProps = {\n    items: DashboardRenderItem[];\n    defaultLayout?: ConfigLayout[];\n    grid?: ReactGridLayoutProps;\n    focusable?: boolean;\n    className?: string;\n\n    onLayoutChange?: (layout: ConfigLayout[]) => void;\n    onItemFocus?: (item: ReactNode, index: number) => void;\n    onItemBlur?: (item: ReactNode, index: number) => void;\n};\n"],"mappings":"","ignoreList":[]}

package/build/cjs/components/DataTable/DataTable.css

@@ -0,0 +1,28 @@
+.qp-data-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.qp-data-table__empty {
+  flex: 1;
+}
+.qp-data-table__tr_empty .qp-data-table__td_empty {
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.qp-data-table__content_empty {
+  display: flex;
+}
+.qp-data-table__content_empty.qp-data-table__content_align_right {
+  justify-content: flex-end;
+}
+.qp-data-table__content_empty.qp-data-table__content_align_center {
+  justify-content: center;
+}
+.qp-data-table__no-data-placeholder {
+  width: 100%;
+  max-width: 120px;
+  height: var(--g-text-body-1-line-height);
+  border-radius: 4px;
+  background-color: var(--g-color-base-generic);
+}
+/*# sourceMappingURL=DataTable.css.map */

package/build/cjs/components/DataTable/DataTable.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DataTable.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,sBAAA;EACA,YAAA;AACF;AACE;EACE,OAAA;AACJ;AAGI;EACE,oDAAA;AADN;AAKE;EACE,aAAA;AAHJ;AAKI;EACE,yBAAA;AAHN;AAMI;EACE,uBAAA;AAJN;AAQE;EACE,WAAA;EACA,gBAAA;EACA,wCAAA;EACA,kBAAA;EACA,6CAAA;AANJ","file":"DataTable.css","sourcesContent":[".qp-data-table {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &__empty {\n    flex: 1;\n  }\n\n  &__tr_empty {\n    .qp-data-table__td_empty {\n      border-bottom: 1px solid var(--g-color-line-generic);\n    }\n  }\n\n  &__content_empty {\n    display: flex;\n\n    &.qp-data-table__content_align_right {\n      justify-content: flex-end;\n    }\n\n    &.qp-data-table__content_align_center {\n      justify-content: center;\n    }\n  }\n\n  &__no-data-placeholder {\n    width: 100%;\n    max-width: 120px;\n    height: var(--g-text-body-1-line-height);\n    border-radius: 4px;\n    background-color: var(--g-color-base-generic);\n  }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DataTableProps as BaseDataTableProps, Column } from '@gravity-ui/react-data-table';
+import { EmptyContentVariant } from '../EmptyContent';
+import './DataTable.scss';
+export type { Column };
+export type DataTableProps<T> = {
+    loading?: boolean;
+    loaded?: boolean;
+    className?: string;
+    emptyVariant?: EmptyContentVariant;
+} & Omit<BaseDataTableProps<T>, 'theme'>;
+export declare function DataTable<T>(props: DataTableProps<T>): React.JSX.Element;

package/build/cjs/components/DataTable/DataTable.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTable = DataTable;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _reactDataTable = _interopRequireDefault(require("@gravity-ui/react-data-table"));
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _EmptyContent = require("../EmptyContent");
+require("./DataTable.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["loading", "loaded", "className", "emptyVariant", "columns", "data", "settings"];
+var block = (0, _bemCnLite.default)('qp-data-table');
+var SKELETON_ROWS_COUNT = 4;
+function renderEmptyCell(key, align) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+    className: block('td', {
+      empty: true
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: block('content', {
+        empty: true,
+        align: align
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: block('no-data-placeholder')
+      })
+    })
+  }, key);
+}
+function renderLoadingSkeleton(columns, displayIndices) {
+  return Array.from({
+    length: SKELETON_ROWS_COUNT
+  }, function (_, index) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+      className: block('tr', {
+        empty: true
+      }),
+      children: [displayIndices && renderEmptyCell('__index'), columns.map(function (column) {
+        return renderEmptyCell(column.name, column.align);
+      })]
+    }, index);
+  });
+}
+function DataTable(props) {
+  var loading = props.loading,
+    loaded = props.loaded,
+    className = props.className,
+    _props$emptyVariant = props.emptyVariant,
+    emptyVariant = _props$emptyVariant === void 0 ? 'no-data' : _props$emptyVariant,
+    columns = props.columns,
+    data = props.data,
+    settings = props.settings,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isEmpty = loaded && data.length === 0;
+  var displayIndices = (settings === null || settings === void 0 ? void 0 : settings.displayIndices) !== false;
+  var renderEmptyRow = function renderEmptyRow() {
+    if (loading && !loaded) {
+      return renderLoadingSkeleton(columns, displayIndices);
+    }
+    return null;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDataTable.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+      columns: columns,
+      data: data,
+      settings: settings,
+      theme: "yandex-cloud",
+      emptyDataMessage: "",
+      renderEmptyRow: renderEmptyRow
+    })), isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyContent.EmptyContent, {
+      variant: emptyVariant,
+      className: block('empty')
+    })]
+  });
+}
+// #sourceMappingURL=DataTable.js.map

package/build/cjs/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactDataTable","_bemCnLite","_EmptyContent","_jsxRuntime","e","__esModule","default","block","cn","SKELETON_ROWS_COUNT","renderEmptyCell","key","align","_jsx","className","empty","children","renderLoadingSkeleton","columns","displayIndices","Array","from","length","_","index","_jsxs","map","column","name","DataTable","props","loading","loaded","_props$emptyVariant","emptyVariant","data","settings","rest","_objectWithoutProperties","_excluded","isEmpty","renderEmptyRow","BaseDataTable","_objectSpread","theme","emptyDataMessage","EmptyContent","variant"],"sources":["DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport BaseDataTable, {\n    DataTableProps as BaseDataTableProps,\n    Column,\n} from '@gravity-ui/react-data-table';\nimport cn from 'bem-cn-lite';\n\nimport {EmptyContent, EmptyContentVariant} from '../EmptyContent';\n\nimport './DataTable.scss';\n\nexport type {Column};\n\nconst block = cn('qp-data-table');\n\nconst SKELETON_ROWS_COUNT = 4;\n\nexport type DataTableProps<T> = {\n    loading?: boolean;\n    loaded?: boolean;\n    className?: string;\n    emptyVariant?: EmptyContentVariant;\n} & Omit<BaseDataTableProps<T>, 'theme'>;\n\nfunction renderEmptyCell(key: string, align?: Column<unknown>['align']) {\n    return (\n        <td key={key} className={block('td', {empty: true})}>\n            <div className={block('content', {empty: true, align})}>\n                <div className={block('no-data-placeholder')} />\n            </div>\n        </td>\n    );\n}\n\nfunction renderLoadingSkeleton<T>(columns: Array<Column<T>>, displayIndices: boolean) {\n    return Array.from({length: SKELETON_ROWS_COUNT}, (_, index) => (\n        <tr key={index} className={block('tr', {empty: true})}>\n            {displayIndices && renderEmptyCell('__index')}\n            {columns.map((column) => renderEmptyCell(column.name, column.align))}\n        </tr>\n    ));\n}\n\nexport function DataTable<T>(props: DataTableProps<T>) {\n    const {\n        loading,\n        loaded,\n        className,\n        emptyVariant = 'no-data',\n        columns,\n        data,\n        settings,\n        ...rest\n    } = props;\n\n    const isEmpty = loaded && data.length === 0;\n    const displayIndices = settings?.displayIndices !== false;\n\n    const renderEmptyRow = () => {\n        if (loading && !loaded) {\n            return renderLoadingSkeleton(columns, displayIndices);\n        }\n\n        return null;\n    };\n\n    return (\n        <div className={block(null, className)}>\n            <BaseDataTable\n                {...rest}\n                columns={columns}\n                data={data}\n                settings={settings}\n                theme=\"yandex-cloud\"\n                emptyDataMessage=\"\"\n                renderEmptyRow={renderEmptyRow}\n            />\n            {isEmpty && <EmptyContent variant={emptyVariant} className={block('empty')} />}\n        </div>\n    );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataTable } from './DataTable';
+type Row = {
+    id: number;
+    name: string;
+    status: string;
+    size: number;
+};
+declare const meta: Meta<typeof DataTable>;
+export default meta;
+type Story = StoryObj<typeof DataTable<Row>>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const EmptyNothingFound: Story;