@gravity-ui/querieskit 1.2.0 → 1.3.0

package/build/esm/widgets/QueryResults/QueryResults.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryResults } from './QueryResults';
+type Row = {
+    age: number;
+    ip: string;
+    last_url: string;
+    last_visit_time: number;
+    name: unknown;
+    region: number;
+    user_agent: string;
+};
+declare const meta: Meta<typeof QueryResults>;
+export default meta;
+type Story = StoryObj<typeof QueryResults<Row>>;
+export declare const Default: Story;
+export declare const ControlledView: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const CustomSchema: Story;

package/build/esm/widgets/QueryResults/QueryResults.stories.js

@@ -0,0 +1,191 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { ArrowDownToLine, ArrowUpFromLine, ArrowUpRightFromSquare, DatabaseArrowRight, Gear, LayoutColumns } from '@gravity-ui/icons';
+import { Button, Flex, Icon, Link } from '@gravity-ui/uikit';
+import { action } from 'storybook/actions';
+import { QueryResults } from "./QueryResults";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var columns = [{
+  name: 'age',
+  header: 'age',
+  type: ['DataType', 'Int32'],
+  width: 70
+}, {
+  name: 'ip',
+  header: 'ip',
+  type: ['DataType', 'String'],
+  width: 180
+}, {
+  name: 'last_url',
+  header: 'last_url',
+  type: ['DataType', 'Utf8'],
+  width: 420
+}, {
+  name: 'last_visit_time',
+  header: 'last_visit_time',
+  type: ['DataType', 'Timestamp'],
+  width: 160
+}, {
+  name: 'name',
+  header: 'name',
+  type: ['OptionalType', ['DataType', 'Utf8']],
+  width: 160
+}, {
+  name: 'region',
+  header: 'region',
+  type: ['DataType', 'Uint32'],
+  width: 100
+}, {
+  name: 'user_agent',
+  header: 'user_agent',
+  type: ['DataType', 'String'],
+  width: 360
+}];
+var rows = [{
+  age: 15,
+  ip: '95.106.17.32',
+  last_url: 'http://avia-talk.ru/otzyvy-o-aviakompaniyax-rossii/otzyvy-aviakompaniya-s7-sibir/comments2',
+  last_visit_time: 1447027200,
+  name: ['Anya'],
+  region: 213,
+  user_agent: 'Mozilla/5.0'
+}, {
+  age: 25,
+  ip: '88.78.248.151',
+  last_url: 'http://www.arrivo.ru/statii/sovety/kak-puteshestvovat-s-peresadkami-vazhney-sovety.html',
+  last_visit_time: 1447113600,
+  name: ['Petr'],
+  region: 225,
+  user_agent: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648)'
+}, {
+  age: 17,
+  ip: '93.94.183.63',
+  last_url: 'http://www.avia77.ru/advices/change%20of%20plane/',
+  last_visit_time: 1447160400,
+  name: ['Masha'],
+  region: 1,
+  user_agent: 'Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.17'
+}];
+var meta = {
+  title: 'Widgets/QueryResults',
+  component: QueryResults,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded'
+  }
+};
+export default meta;
+export var Default = {
+  args: {
+    columns: columns,
+    rows: rows,
+    totalRows: 6,
+    toolbarContent: /*#__PURE__*/_jsxs(Flex, {
+      gap: 2,
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Link, {
+        href: "#",
+        children: "markov: `tmp/yql/mbobelyuk/result`"
+      }), /*#__PURE__*/_jsxs(Button, {
+        view: "flat-secondary",
+        size: "s",
+        onClick: action('insert'),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: DatabaseArrowRight,
+          size: 16
+        }), "Insert"]
+      }), /*#__PURE__*/_jsxs(Button, {
+        view: "flat-secondary",
+        size: "s",
+        onClick: action('go-to-yt'),
+        children: ["Go to YT", /*#__PURE__*/_jsx(Icon, {
+          data: ArrowUpRightFromSquare,
+          size: 16
+        })]
+      })]
+    }),
+    actions: /*#__PURE__*/_jsxs(Flex, {
+      gap: 1,
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs(Button, {
+        view: "flat-secondary",
+        size: "s",
+        onClick: action('export'),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: ArrowUpFromLine,
+          size: 16
+        }), "Export"]
+      }), /*#__PURE__*/_jsxs(Button, {
+        view: "flat-secondary",
+        size: "s",
+        onClick: action('download'),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: ArrowDownToLine,
+          size: 16
+        }), "Download"]
+      }), /*#__PURE__*/_jsx(Button, {
+        view: "flat-secondary",
+        size: "s",
+        "aria-label": "Configure columns",
+        onClick: action('configure-columns'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: LayoutColumns,
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        view: "flat-secondary",
+        size: "s",
+        "aria-label": "Settings",
+        onClick: action('settings'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: Gear,
+          size: 16
+        })
+      })]
+    })
+  }
+};
+var ControlledViewStory = function ControlledViewStory() {
+  var _useState = useState('schema'),
+    _useState2 = _slicedToArray(_useState, 2),
+    view = _useState2[0],
+    setView = _useState2[1];
+  return /*#__PURE__*/_jsx(QueryResults, {
+    columns: columns,
+    rows: rows,
+    view: view,
+    onViewChange: setView
+  });
+};
+export var ControlledView = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(ControlledViewStory, {});
+  }
+};
+export var Loading = {
+  args: {
+    columns: columns,
+    rows: [],
+    loading: true
+  }
+};
+export var Error = {
+  args: {
+    columns: columns,
+    rows: [],
+    errorContent: 'Failed to load query results'
+  }
+};
+export var CustomSchema = {
+  args: {
+    columns: columns,
+    rows: rows,
+    renderSchema: function renderSchema(_ref) {
+      var schemaColumns = _ref.columns;
+      return /*#__PURE__*/_jsx("div", {
+        children: "The result contains ".concat(schemaColumns.length, " columns.")
+      });
+    }
+  }
+};
+// #sourceMappingURL=QueryResults.stories.js.map

package/build/esm/widgets/QueryResults/QueryResults.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ArrowDownToLine","ArrowUpFromLine","ArrowUpRightFromSquare","DatabaseArrowRight","Gear","LayoutColumns","Button","Flex","Icon","Link","action","QueryResults","jsx","_jsx","jsxs","_jsxs","columns","name","header","type","width","rows","age","ip","last_url","last_visit_time","region","user_agent","meta","title","component","tags","parameters","layout","Default","args","totalRows","toolbarContent","gap","alignItems","children","href","view","size","onClick","data","actions","ControlledViewStory","_useState","_useState2","_slicedToArray","setView","onViewChange","ControlledView","render","Loading","loading","Error","errorContent","CustomSchema","renderSchema","_ref","schemaColumns","concat","length"],"sources":["QueryResults.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {\n    ArrowDownToLine,\n    ArrowUpFromLine,\n    ArrowUpRightFromSquare,\n    DatabaseArrowRight,\n    Gear,\n    LayoutColumns,\n} from '@gravity-ui/icons';\nimport {Button, Flex, Icon, Link} from '@gravity-ui/uikit';\nimport {action} from 'storybook/actions';\nimport {QueryResults} from './QueryResults';\nimport type {QueryResultColumn, QueryResultsView} from '../../types/queryResults';\n\ntype Row = {\n    age: number;\n    ip: string;\n    last_url: string;\n    last_visit_time: number;\n    name: unknown;\n    region: number;\n    user_agent: string;\n};\n\nconst columns: Array<QueryResultColumn<Row>> = [\n    {name: 'age', header: 'age', type: ['DataType', 'Int32'], width: 70},\n    {name: 'ip', header: 'ip', type: ['DataType', 'String'], width: 180},\n    {name: 'last_url', header: 'last_url', type: ['DataType', 'Utf8'], width: 420},\n    {\n        name: 'last_visit_time',\n        header: 'last_visit_time',\n        type: ['DataType', 'Timestamp'],\n        width: 160,\n    },\n    {name: 'name', header: 'name', type: ['OptionalType', ['DataType', 'Utf8']], width: 160},\n    {name: 'region', header: 'region', type: ['DataType', 'Uint32'], width: 100},\n    {name: 'user_agent', header: 'user_agent', type: ['DataType', 'String'], width: 360},\n];\n\nconst rows: Row[] = [\n    {\n        age: 15,\n        ip: '95.106.17.32',\n        last_url:\n            'http://avia-talk.ru/otzyvy-o-aviakompaniyax-rossii/otzyvy-aviakompaniya-s7-sibir/comments2',\n        last_visit_time: 1447027200,\n        name: ['Anya'],\n        region: 213,\n        user_agent: 'Mozilla/5.0',\n    },\n    {\n        age: 25,\n        ip: '88.78.248.151',\n        last_url:\n            'http://www.arrivo.ru/statii/sovety/kak-puteshestvovat-s-peresadkami-vazhney-sovety.html',\n        last_visit_time: 1447113600,\n        name: ['Petr'],\n        region: 225,\n        user_agent:\n            'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648)',\n    },\n    {\n        age: 17,\n        ip: '93.94.183.63',\n        last_url: 'http://www.avia77.ru/advices/change%20of%20plane/',\n        last_visit_time: 1447160400,\n        name: ['Masha'],\n        region: 1,\n        user_agent: 'Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.17',\n    },\n];\n\nconst meta: Meta<typeof QueryResults> = {\n    title: 'Widgets/QueryResults',\n    component: QueryResults,\n    tags: ['autodocs'],\n    parameters: {layout: 'padded'},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof QueryResults<Row>>;\n\nexport const Default: Story = {\n    args: {\n        columns,\n        rows,\n        totalRows: 6,\n        toolbarContent: (\n            <Flex gap={2} alignItems=\"center\">\n                <Link href=\"#\">markov: `tmp/yql/mbobelyuk/result`</Link>\n                <Button view=\"flat-secondary\" size=\"s\" onClick={action('insert')}>\n                    <Icon data={DatabaseArrowRight} size={16} />\n                    Insert\n                </Button>\n                <Button view=\"flat-secondary\" size=\"s\" onClick={action('go-to-yt')}>\n                    Go to YT\n                    <Icon data={ArrowUpRightFromSquare} size={16} />\n                </Button>\n            </Flex>\n        ),\n        actions: (\n            <Flex gap={1} alignItems=\"center\">\n                <Button view=\"flat-secondary\" size=\"s\" onClick={action('export')}>\n                    <Icon data={ArrowUpFromLine} size={16} />\n                    Export\n                </Button>\n                <Button view=\"flat-secondary\" size=\"s\" onClick={action('download')}>\n                    <Icon data={ArrowDownToLine} size={16} />\n                    Download\n                </Button>\n                <Button\n                    view=\"flat-secondary\"\n                    size=\"s\"\n                    aria-label=\"Configure columns\"\n                    onClick={action('configure-columns')}\n                >\n                    <Icon data={LayoutColumns} size={16} />\n                </Button>\n                <Button\n                    view=\"flat-secondary\"\n                    size=\"s\"\n                    aria-label=\"Settings\"\n                    onClick={action('settings')}\n                >\n                    <Icon data={Gear} size={16} />\n                </Button>\n            </Flex>\n        ),\n    },\n};\n\nconst ControlledViewStory = () => {\n    const [view, setView] = useState<QueryResultsView>('schema');\n\n    return <QueryResults columns={columns} rows={rows} view={view} onViewChange={setView} />;\n};\n\nexport const ControlledView: Story = {render: () => <ControlledViewStory />};\n\nexport const Loading: Story = {args: {columns, rows: [], loading: true}};\n\nexport const Error: Story = {\n    args: {columns, rows: [], errorContent: 'Failed to load query results'},\n};\n\nexport const CustomSchema: Story = {\n    args: {\n        columns,\n        rows,\n        renderSchema: ({columns: schemaColumns}) => (\n            <div>{`The result contains ${schemaColumns.length} columns.`}</div>\n        ),\n    },\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/widgets/QueryResults/i18n/dicts.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    en: {
+        tab_result: string;
+        tab_schema: string;
+        field_name: string;
+        field_type: string;
+        "context_rows-info": {
+            one: string;
+            other: string;
+        };
+    };
+    ru: {
+        tab_result: string;
+        tab_schema: string;
+        field_name: string;
+        field_type: string;
+        "context_rows-info": {
+            one: string;
+            few: string;
+            many: string;
+            other: string;
+        };
+    };
+};
+export default _default;

package/build/esm/widgets/QueryResults/i18n/dicts.js

@@ -0,0 +1,7 @@
+import en from "./en.json";
+import ru from "./ru.json";
+export default {
+  en: en,
+  ru: ru
+};
+// #sourceMappingURL=dicts.js.map

package/build/esm/widgets/QueryResults/i18n/dicts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["en","ru"],"sources":["dicts.ts"],"sourcesContent":["import en from './en.json';\nimport ru from './ru.json';\n\nexport default {en, ru};\n"],"mappings":"AAAA,OAAOA,EAAE;AACT,OAAOC,EAAE;AAET,eAAe;EAACD,EAAE,EAAFA,EAAE;EAAEC,EAAE,EAAFA;AAAE,CAAC","ignoreList":[]}

package/build/esm/widgets/QueryResults/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "tab_result": "Full result",
+  "tab_schema": "Schema",
+  "field_name": "Name",
+  "field_type": "Type",
+  "context_rows-info": {
+    "one": "{{visible}} of {{total}} row",
+    "other": "{{visible}} of {{total}} rows"
+  }
+}

package/build/esm/widgets/QueryResults/i18n/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ((key: "field_name" | "tab_result" | "tab_schema" | "field_type" | "context_rows-info", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "qp:query-results": Record<"field_name" | "tab_result" | "tab_schema" | "field_type" | "context_rows-info", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;

package/build/esm/widgets/QueryResults/i18n/index.js

@@ -0,0 +1,4 @@
+import { addI18Keysets } from "../../../i18n";
+import dicts from "./dicts";
+export default addI18Keysets('qp:query-results', dicts);
+// #sourceMappingURL=index.js.map

package/build/esm/widgets/QueryResults/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addI18Keysets","dicts"],"sources":["index.ts"],"sourcesContent":["import {addI18Keysets} from '../../../i18n';\nimport dicts from './dicts';\n\nexport default addI18Keysets('qp:query-results', dicts);\n"],"mappings":"AAAA,SAAQA,aAAa;AACrB,OAAOC,KAAK;AAEZ,eAAeD,aAAa,CAAC,kBAAkB,EAAEC,KAAK,CAAC","ignoreList":[]}

package/build/esm/widgets/QueryResults/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "tab_result": "Результат",
+  "tab_schema": "Схема",
+  "field_name": "Название",
+  "field_type": "Тип",
+  "context_rows-info": {
+    "one": "{{visible}} из {{total}} строки",
+    "few": "{{visible}} из {{total}} строк",
+    "many": "{{visible}} из {{total}} строк",
+    "other": "{{visible}} из {{total}} строки"
+  }
+}

package/build/esm/widgets/QueryResults/index.d.ts

@@ -0,0 +1,2 @@
+export { QueryResults } from './QueryResults';
+export type { QueryResultsProps } from './QueryResults';

package/build/esm/widgets/QueryResults/index.js

@@ -0,0 +1,2 @@
+export { QueryResults } from "./QueryResults";
+// #sourceMappingURL=index.js.map

package/build/esm/widgets/QueryResults/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["QueryResults"],"sources":["index.ts"],"sourcesContent":["export {QueryResults} from './QueryResults';\nexport type {QueryResultsProps} from './QueryResults';\n"],"mappings":"AAAA,SAAQA,YAAY","ignoreList":[]}

package/build/esm/widgets/QueryResults/internal/QueryResultsSchema.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { QueryResultColumn } from '../../../types/queryResults';
+export type QueryResultsSchemaProps<TRow extends Record<string, unknown>> = {
+    columns: Array<QueryResultColumn<TRow>>;
+    loading?: boolean;
+};
+export declare function QueryResultsSchema<TRow extends Record<string, unknown>>({ columns, loading, }: QueryResultsSchemaProps<TRow>): React.JSX.Element;

package/build/esm/widgets/QueryResults/internal/QueryResultsSchema.js

@@ -0,0 +1,41 @@
+import "core-js/modules/es.function.name.js";
+import React, { useMemo } from 'react';
+import { DataTable, formatQueryResultType } from "../../../components";
+import i18n from "../i18n";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function QueryResultsSchema(_ref) {
+  var columns = _ref.columns,
+    loading = _ref.loading;
+  var tableColumns = useMemo(function () {
+    return [{
+      name: 'name',
+      header: i18n('field_name'),
+      render: function render(_ref2) {
+        var _row$header;
+        var row = _ref2.row;
+        return (_row$header = row.header) !== null && _row$header !== void 0 ? _row$header : row.name;
+      }
+    }, {
+      name: 'type',
+      header: i18n('field_type'),
+      render: function render(_ref3) {
+        var row = _ref3.row;
+        return /*#__PURE__*/_jsx("code", {
+          children: formatQueryResultType(row.type)
+        });
+      }
+    }];
+  }, []);
+  return /*#__PURE__*/_jsx(DataTable, {
+    columns: tableColumns,
+    data: columns,
+    loading: loading,
+    loaded: !loading,
+    settings: {
+      displayIndices: false,
+      sortable: false,
+      stripedRows: true
+    }
+  });
+}
+// #sourceMappingURL=QueryResultsSchema.js.map

package/build/esm/widgets/QueryResults/internal/QueryResultsSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","DataTable","formatQueryResultType","i18n","jsx","_jsx","QueryResultsSchema","_ref","columns","loading","tableColumns","name","header","render","_ref2","_row$header","row","_ref3","children","type","data","loaded","settings","displayIndices","sortable","stripedRows"],"sources":["QueryResultsSchema.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport type {Column} from '@gravity-ui/react-data-table';\nimport {DataTable, formatQueryResultType} from '../../../components';\nimport type {QueryResultColumn} from '../../../types/queryResults';\nimport i18n from '../i18n';\n\nexport type QueryResultsSchemaProps<TRow extends Record<string, unknown>> = {\n    columns: Array<QueryResultColumn<TRow>>;\n    loading?: boolean;\n};\n\nexport function QueryResultsSchema<TRow extends Record<string, unknown>>({\n    columns,\n    loading,\n}: QueryResultsSchemaProps<TRow>) {\n    const tableColumns = useMemo<Array<Column<QueryResultColumn<TRow>>>>(\n        () => [\n            {\n                name: 'name',\n                header: i18n('field_name'),\n                render: ({row}) => row.header ?? row.name,\n            },\n            {\n                name: 'type',\n                header: i18n('field_type'),\n                render: ({row}) => <code>{formatQueryResultType(row.type)}</code>,\n            },\n        ],\n        [],\n    );\n\n    return (\n        <DataTable<QueryResultColumn<TRow>>\n            columns={tableColumns}\n            data={columns}\n            loading={loading}\n            loaded={!loading}\n            settings={{displayIndices: false, sortable: false, stripedRows: true}}\n        />\n    );\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AAEpC,SAAQC,SAAS,EAAEC,qBAAqB;AAExC,OAAOC,IAAI;AAAgB,SAAAC,GAAA,IAAAC,IAAA;AAO3B,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAGA;EAAA,IAF9BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,OAAO,GAAAF,IAAA,CAAPE,OAAO;EAEP,IAAMC,YAAY,GAAGV,OAAO,CACxB;IAAA,OAAM,CACF;MACIW,IAAI,EAAE,MAAM;MACZC,MAAM,EAAET,IAAI,CAAC,YAAY,CAAC;MAC1BU,MAAM,EAAE,SAARA,MAAMA,CAAAC,KAAA;QAAA,IAAAC,WAAA;QAAA,IAAIC,GAAG,GAAAF,KAAA,CAAHE,GAAG;QAAA,QAAAD,WAAA,GAAMC,GAAG,CAACJ,MAAM,cAAAG,WAAA,cAAAA,WAAA,GAAIC,GAAG,CAACL,IAAI;MAAA;IAC7C,CAAC,EACD;MACIA,IAAI,EAAE,MAAM;MACZC,MAAM,EAAET,IAAI,CAAC,YAAY,CAAC;MAC1BU,MAAM,EAAE,SAARA,MAAMA,CAAAI,KAAA;QAAA,IAAID,GAAG,GAAAC,KAAA,CAAHD,GAAG;QAAA,oBAAMX,IAAA;UAAAa,QAAA,EAAOhB,qBAAqB,CAACc,GAAG,CAACG,IAAI;QAAC,CAAO,CAAC;MAAA;IACrE,CAAC,CACJ;EAAA,GACD,EACJ,CAAC;EAED,oBACId,IAAA,CAACJ,SAAS;IACNO,OAAO,EAAEE,YAAa;IACtBU,IAAI,EAAEZ,OAAQ;IACdC,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAE,CAACZ,OAAQ;IACjBa,QAAQ,EAAE;MAACC,cAAc,EAAE,KAAK;MAAEC,QAAQ,EAAE,KAAK;MAAEC,WAAW,EAAE;IAAI;EAAE,CACzE,CAAC;AAEV","ignoreList":[]}

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

@@ -5,5 +5,7 @@ export type { SavedQueriesProps } from './SavedQueries';
 export { DashboardCharts } from './DashboardCharts';
 export { TutorialsHistory } from './TutorialsHistory';
 export type { TutorialsHistoryProps } from './TutorialsHistory';
+export { QueryResults } from './QueryResults';
+export type { QueryResultsProps } from './QueryResults';
 export { QueriesNavigation, createTableDetailConfig, createNavigationDetailResolver, } from './QueriesNavigation';
 export type { QueriesNavigationProps, CreateTableDetailConfigOptions, NavigationPreviewResolver, NavigationSchemaResolver, } from './QueriesNavigation';

package/build/esm/widgets/index.js

@@ -2,5 +2,6 @@ export { QueriesHistory } from "./QueriesHistory";
 export { SavedQueries } from "./SavedQueries";
 export { DashboardCharts } from "./DashboardCharts";
 export { TutorialsHistory } from "./TutorialsHistory";
+export { QueryResults } from "./QueryResults";
 export { QueriesNavigation, createTableDetailConfig, createNavigationDetailResolver } from "./QueriesNavigation";
 // #sourceMappingURL=index.js.map

package/build/esm/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["QueriesHistory","SavedQueries","DashboardCharts","TutorialsHistory","QueriesNavigation","createTableDetailConfig","createNavigationDetailResolver"],"sources":["index.ts"],"sourcesContent":["export {QueriesHistory} from './QueriesHistory';\nexport type {QueriesHistoryProps} from './QueriesHistory';\nexport {SavedQueries} from './SavedQueries';\nexport type {SavedQueriesProps} from './SavedQueries';\nexport {DashboardCharts} from './DashboardCharts';\nexport {TutorialsHistory} from './TutorialsHistory';\nexport type {TutorialsHistoryProps} from './TutorialsHistory';\nexport {\n    QueriesNavigation,\n    createTableDetailConfig,\n    createNavigationDetailResolver,\n} from './QueriesNavigation';\nexport type {\n    QueriesNavigationProps,\n    CreateTableDetailConfigOptions,\n    NavigationPreviewResolver,\n    NavigationSchemaResolver,\n} from './QueriesNavigation';\n"],"mappings":"AAAA,SAAQA,cAAc;AAEtB,SAAQC,YAAY;AAEpB,SAAQC,eAAe;AACvB,SAAQC,gBAAgB;AAExB,SACIC,iBAAiB,EACjBC,uBAAuB,EACvBC,8BAA8B","ignoreList":[]}
+{"version":3,"names":["QueriesHistory","SavedQueries","DashboardCharts","TutorialsHistory","QueryResults","QueriesNavigation","createTableDetailConfig","createNavigationDetailResolver"],"sources":["index.ts"],"sourcesContent":["export {QueriesHistory} from './QueriesHistory';\nexport type {QueriesHistoryProps} from './QueriesHistory';\nexport {SavedQueries} from './SavedQueries';\nexport type {SavedQueriesProps} from './SavedQueries';\nexport {DashboardCharts} from './DashboardCharts';\nexport {TutorialsHistory} from './TutorialsHistory';\nexport type {TutorialsHistoryProps} from './TutorialsHistory';\nexport {QueryResults} from './QueryResults';\nexport type {QueryResultsProps} from './QueryResults';\nexport {\n    QueriesNavigation,\n    createTableDetailConfig,\n    createNavigationDetailResolver,\n} from './QueriesNavigation';\nexport type {\n    QueriesNavigationProps,\n    CreateTableDetailConfigOptions,\n    NavigationPreviewResolver,\n    NavigationSchemaResolver,\n} from './QueriesNavigation';\n"],"mappings":"AAAA,SAAQA,cAAc;AAEtB,SAAQC,YAAY;AAEpB,SAAQC,eAAe;AACvB,SAAQC,gBAAgB;AAExB,SAAQC,YAAY;AAEpB,SACIC,iBAAiB,EACjBC,uBAAuB,EACvBC,8BAA8B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/querieskit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Query page component library",
   "main": "build/index.js",
   "scripts": {

package/plans/styles-rules.md

@@ -0,0 +1,137 @@
+# Правила владения SCSS-стилями
+
+Подробные правила для агентов, работающих со стилями в `@gravity-ui/querieskit`. Краткая обязательная выжимка находится в разделе [`## Styles`](../AGENTS.md) файла `AGENTS.md`.
+
+## Структура
+
+Каждый компонент, модуль или виджет, которому нужны стили, хранит одноимённый SCSS-файл рядом с файлом реализации и самостоятельно импортирует его:
+
+```text
+ComponentName/
+  ComponentName.tsx
+  ComponentName.scss
+  index.ts
+```
+
+```tsx
+// Child.tsx
+import cn from 'bem-cn-lite';
+
+import './Child.scss';
+
+const block = cn('qp-child');
+
+export type ChildProps = {
+    className?: string;
+};
+
+export const Child = ({className}: ChildProps) => (
+    <div className={block(null, className)}>...</div>
+);
+```
+
+```scss
+// Child.scss
+.qp-child {
+  // Внутренние стили Child.
+}
+```
+
+Если компоненту не нужны собственные стили, создавать пустой SCSS-файл не требуется.
+
+## Flex-раскладка
+
+Для flexbox-раскладки в приоритете компонент `Flex` из `@gravity-ui/uikit`. Если нужное поведение выражается его пропсами, следует задать направление, расстояние между детьми и выравнивание прямо в JSX, не дублируя их через `display: flex` в SCSS:
+
+```tsx
+import {Flex} from '@gravity-ui/uikit';
+
+export const Parent = () => (
+    <Flex direction="column" gap={2} alignItems="center">
+        <Child />
+        <AnotherChild />
+    </Flex>
+);
+```
+
+Не следует без необходимости заменять такую раскладку отдельным классом:
+
+```scss
+// Parent.scss — не нужно, если достаточно пропсов Flex
+.qp-parent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+```
+
+SCSS остаётся допустимым, когда API `Flex` не может выразить требуемое поведение: например, для псевдоклассов, вложенных селекторов, BEM-модификаторов состояния или отдельных правил внешней геометрии дочернего компонента. В таких случаях продолжают действовать правила владения стилями и передачи `className`.
+
+## Владение стилями
+
+Компонент владеет своим внутренним оформлением: размерами и расположением собственных элементов, цветами, состояниями, внутренними отступами и своим BEM-блоком. Его SCSS импортируется из его же файла реализации, поэтому компонент корректно выглядит независимо от того, через какого родителя он был отрендерен.
+
+Родитель владеет компоновкой своих детей: расположением относительно контейнера и соседних элементов, участием в grid/flex-раскладке и внешней геометрией, необходимой конкретному сценарию. Сначала следует использовать `Flex` и возможности его API, например `gap` и `alignItems`; для grid-раскладки — подходящий контейнер. Если стиль нужно применить непосредственно к корневому элементу ребёнка, родитель передаёт собственный BEM-элемент через `className`:
+
+```tsx
+// Parent.tsx
+import cn from 'bem-cn-lite';
+
+import {Child} from '../Child';
+import './Parent.scss';
+
+const block = cn('qp-parent');
+
+export const Parent = () => <Child className={block('child')} />;
+```
+
+```scss
+// Parent.scss
+.qp-parent {
+  &__child {
+    flex-shrink: 0;
+  }
+}
+```
+
+`Child` обязан объединить переданный `className` со своим корневым классом, а не заменить один класс другим. Текущий пример такого взаимодействия — [`HistorySearchRow`](../src/modules/HistorySearchRow/HistorySearchRow.tsx), который передаёт `className={block('icon')}` в [`QueryStatusIcon`](../src/components/QueryStatusIcon/QueryStatusIcon.tsx), а правило внешней компоновки хранит в [`HistorySearchRow.scss`](../src/modules/HistorySearchRow/HistorySearchRow.scss).
+
+## Запрещённый паттерн
+
+Нельзя складывать собственные стили дочерних компонентов в один SCSS-файл родителя и рассчитывать, что они загрузятся только потому, что родитель импортирует этот файл:
+
+```scss
+// Parent.scss — запрещено
+.qp-child {
+  width: 100%;
+
+  &__title {
+    min-width: 0;
+  }
+}
+
+.qp-another-child {
+  padding: var(--g-spacing-2);
+}
+```
+
+Такой подход связывает внешний вид ребёнка с конкретным родителем: при самостоятельном использовании или переносе ребёнка его стили не загрузятся. Родительский SCSS должен описывать BEM-блок родителя и его элементы, но не BEM-блоки самостоятельных дочерних компонентов.
+
+В текущем коде есть исторические нарушения этого правила:
+
+- [`ClustersList.scss`](../src/modules/ClustersList/ClustersList.scss) объявляет блок `.qp-cluster-row`, принадлежащий [`ClusterRow`](../src/components/ClusterRow/ClusterRow.tsx).
+- [`NavigationItemsList.scss`](../src/modules/NavigationItemsList/NavigationItemsList.scss) объявляет блок `.qp-navigation-item-row`, принадлежащий [`NavigationItemRow`](../src/components/NavigationItemRow/NavigationItemRow.tsx).
+
+Эти места зафиксированы как анти-примеры и не должны использоваться как образец для нового кода. Их исправление выполняется отдельно.
+
+## Чек-лист
+
+1. У каждого компонента со своими стилями есть одноимённый SCSS-файл рядом с `.tsx`.
+2. Компонент самостоятельно импортирует свой SCSS-файл.
+3. SCSS компонента объявляет его собственный BEM-блок, а не блоки самостоятельных дочерних компонентов.
+4. Внутреннее оформление ребёнка остаётся у ребёнка; родитель описывает только компоновку своего сценария.
+5. Flexbox-раскладка сначала выражается через `Flex` из `@gravity-ui/uikit`; `display: flex` в SCSS используется только при недостаточности его API.
+6. Для расстояний между детьми сначала используется `gap` компонента `Flex` или другое свойство подходящего контейнера.
+7. Если родителю нужен класс на корневом элементе ребёнка, ребёнок принимает `className` и объединяет его со своим BEM-классом.
+8. Переданный родителем класс является элементом BEM-блока родителя, например `qp-parent__child`.

package/src/components/AttachmentList/AttachmentList.scss

@@ -0,0 +1,25 @@
+.qp-attachment-list {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &__item {
+        min-width: 0;
+    }
+
+    &__button {
+        --g-button-padding: var(--g-spacing-2);
+
+        min-width: 0;
+        justify-content: flex-start;
+        text-align: start;
+
+        &_active {
+            --g-button-background-color: var(--g-color-base-selection);
+            --g-button-background-color-hover: var(--g-color-base-selection-hover);
+        }
+    }
+}