@gravity-ui/querieskit 1.0.4 → 1.2.0

package/build/esm/components/Breadcrumbs/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "action_reset": "Сбросить навигацию",
+  "action_edit-path": "Редактировать путь"
+}

package/build/esm/components/Breadcrumbs/index.d.ts

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

package/build/esm/components/Breadcrumbs/index.js

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

package/build/esm/components/Breadcrumbs/index.js.map

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

package/build/esm/components/Chart/Chart.css

@@ -0,0 +1,40 @@
+.qp-chart {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--g-color-base-background);
+}
+.qp-chart_fullscreen {
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  z-index: var(--z-index-overlay, 1000);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.qp-chart__controls {
+  position: absolute;
+  z-index: 1;
+  top: var(--g-spacing-2);
+  right: var(--g-spacing-2);
+  display: flex;
+  gap: var(--g-spacing-1);
+  background: var(--g-color-base-background);
+  border-radius: var(--g-border-radius-m);
+}
+@media (hover: hover) {
+  .qp-chart__controls_visibility_hover {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .qp-chart:hover .qp-chart__controls_visibility_hover, .qp-chart:focus-within .qp-chart__controls_visibility_hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+/*# sourceMappingURL=Chart.css.map */

package/build/esm/components/Chart/Chart.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Chart.scss"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,0CAAA;AACJ;AACI;EACI,YAAA;EACA,aAAA;EACA,aAAA;EAAA,qCAAA;EACA,eAAA;EACA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;AACR;AAEI;EACI,kBAAA;EACA,UAAA;EACA,uBAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,0CAAA;EACA,uCAAA;AAAR;AAGI;EACI;IACI,UAAA;IACA,oBAAA;EADV;EAIM;IAEI,UAAA;IACA,oBAAA;EAHV;AACF","file":"Chart.css","sourcesContent":[".qp-chart {\n    position: relative;\n    min-width: 0;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--g-color-base-background);\n\n    &_fullscreen {\n        width: 100vw;\n        height: 100vh;\n        z-index: var(--z-index-overlay, 1000);\n        position: fixed;\n        inset: 0;\n    }\n\n    &__controls {\n        position: absolute;\n        z-index: 1;\n        inset-block-start: var(--g-spacing-2);\n        inset-inline-end: var(--g-spacing-2);\n        display: flex;\n        gap: var(--g-spacing-1);\n        background: var(--g-color-base-background);\n        border-radius: var(--g-border-radius-m);\n    }\n\n    @media (hover: hover) {\n        &__controls_visibility_hover {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        &:hover &__controls_visibility_hover,\n        &:focus-within &__controls_visibility_hover {\n            opacity: 1;\n            pointer-events: auto;\n        }\n    }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ChartRef, type ChartProps as GravityChartProps } from '@gravity-ui/charts';
+import './Chart.scss';
+export type ChartAction = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export type ChartProps = GravityChartProps & {
+    actions?: readonly ChartAction[];
+    onPencilEdit?: () => void;
+    controlsVisibility?: 'always' | 'hover';
+    className?: string;
+};
+export declare const Chart: React.ForwardRefExoticComponent<GravityChartProps & {
+    actions?: readonly ChartAction[];
+    onPencilEdit?: () => void;
+    controlsVisibility?: "always" | "hover";
+    className?: string;
+} & React.RefAttributes<ChartRef>>;

package/build/esm/components/Chart/Chart.js

@@ -0,0 +1,120 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actions", "onPencilEdit", "controlsVisibility", "className"];
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.some.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.iterator.some.js";
+import "core-js/modules/es.object.to-string.js";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Chart as GravityChart } from '@gravity-ui/charts';
+import { ChevronsCollapseUpRight, ChevronsExpandUpRight, Ellipsis, Pencil } from '@gravity-ui/icons';
+import { Button, DropdownMenu, Icon, Portal } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import i18n from "./i18n";
+import "./Chart.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-chart');
+export var Chart = /*#__PURE__*/React.forwardRef(function ChartComponent(_ref, ref) {
+  var _actions$some, _containerRef$current, _containerRef$current2;
+  var actions = _ref.actions,
+    onPencilEdit = _ref.onPencilEdit,
+    _ref$controlsVisibili = _ref.controlsVisibility,
+    controlsVisibility = _ref$controlsVisibili === void 0 ? 'always' : _ref$controlsVisibili,
+    className = _ref.className,
+    chartProps = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFullscreen = _useState2[0],
+    setIsFullscreen = _useState2[1];
+  var handleFullscreenToggle = useCallback(function () {
+    setIsFullscreen(function (value) {
+      return !value;
+    });
+  }, []);
+  var menuItems = useMemo(function () {
+    return actions === null || actions === void 0 ? void 0 : actions.map(function (_ref2) {
+      var text = _ref2.text,
+        icon = _ref2.icon,
+        hidden = _ref2.hidden,
+        disabled = _ref2.disabled,
+        onClick = _ref2.onClick;
+      return {
+        text: text,
+        iconStart: icon,
+        hidden: hidden,
+        disabled: disabled,
+        action: onClick
+      };
+    });
+  }, [actions]);
+  var hasVisibleActions = (_actions$some = actions === null || actions === void 0 ? void 0 : actions.some(function (_ref3) {
+    var hidden = _ref3.hidden;
+    return !hidden;
+  })) !== null && _actions$some !== void 0 ? _actions$some : false;
+  var fullscreenLabel = isFullscreen ? i18n('action_exit-fullscreen') : i18n('action_enter-fullscreen');
+  return /*#__PURE__*/_jsx(Portal, {
+    container: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.ownerDocument.body,
+    disablePortal: !isFullscreen,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
+      className: block({
+        fullscreen: isFullscreen
+      }, className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: block('controls', {
+          visibility: controlsVisibility
+        }),
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "button",
+          view: "flat-secondary",
+          size: "s",
+          "aria-label": fullscreenLabel,
+          title: fullscreenLabel,
+          onClick: handleFullscreenToggle,
+          children: /*#__PURE__*/_jsx(Icon, {
+            data: isFullscreen ? ChevronsCollapseUpRight : ChevronsExpandUpRight,
+            size: 16
+          })
+        }), onPencilEdit && /*#__PURE__*/_jsx(Button, {
+          type: "button",
+          view: "flat-secondary",
+          size: "s",
+          "aria-label": i18n('action_edit-chart'),
+          title: i18n('action_edit-chart'),
+          onClick: onPencilEdit,
+          children: /*#__PURE__*/_jsx(Icon, {
+            data: Pencil,
+            size: 16
+          })
+        }), hasVisibleActions && /*#__PURE__*/_jsx(DropdownMenu, {
+          items: menuItems,
+          size: "s",
+          popupProps: {
+            container: isFullscreen ? (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.ownerDocument.body : undefined
+          },
+          renderSwitcher: function renderSwitcher(switcherProps) {
+            return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, switcherProps), {}, {
+              type: "button",
+              view: "flat",
+              size: "s",
+              "aria-label": i18n('action_open-chart-menu'),
+              title: i18n('action_open-chart-menu'),
+              "aria-haspopup": "menu",
+              children: /*#__PURE__*/_jsx(Icon, {
+                data: Ellipsis,
+                size: 16
+              })
+            }));
+          }
+        })]
+      }), /*#__PURE__*/_jsx(GravityChart, _objectSpread(_objectSpread({}, chartProps), {}, {
+        ref: ref
+      }))]
+    })
+  });
+});
+// #sourceMappingURL=Chart.js.map

package/build/esm/components/Chart/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useRef","useState","Chart","GravityChart","ChevronsCollapseUpRight","ChevronsExpandUpRight","Ellipsis","Pencil","Button","DropdownMenu","Icon","Portal","cn","i18n","jsx","_jsx","jsxs","_jsxs","block","forwardRef","ChartComponent","_ref","ref","_actions$some","_containerRef$current","_containerRef$current2","actions","onPencilEdit","_ref$controlsVisibili","controlsVisibility","className","chartProps","_objectWithoutProperties","_excluded","containerRef","_useState","_useState2","_slicedToArray","isFullscreen","setIsFullscreen","handleFullscreenToggle","value","menuItems","map","_ref2","text","icon","hidden","disabled","onClick","iconStart","action","hasVisibleActions","some","_ref3","fullscreenLabel","container","current","ownerDocument","body","disablePortal","children","fullscreen","visibility","type","view","size","title","data","items","popupProps","undefined","renderSwitcher","switcherProps","_objectSpread"],"sources":["Chart.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport {\n    type ChartRef,\n    Chart as GravityChart,\n    type ChartProps as GravityChartProps,\n} from '@gravity-ui/charts';\nimport {ChevronsCollapseUpRight, ChevronsExpandUpRight, Ellipsis, Pencil} from '@gravity-ui/icons';\nimport {Button, DropdownMenu, type DropdownMenuItem, Icon, Portal} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport i18n from './i18n';\n\nimport './Chart.scss';\n\nconst block = cn('qp-chart');\n\nexport type ChartAction = {\n    text: React.ReactNode;\n    icon?: React.ReactNode;\n    hidden?: boolean;\n    disabled?: boolean;\n    onClick: () => void;\n};\n\nexport type ChartProps = GravityChartProps & {\n    actions?: readonly ChartAction[];\n    onPencilEdit?: () => void;\n    controlsVisibility?: 'always' | 'hover';\n    className?: string;\n};\n\nexport const Chart = React.forwardRef<ChartRef, ChartProps>(function ChartComponent(\n    {actions, onPencilEdit, controlsVisibility = 'always', className, ...chartProps},\n    ref,\n) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [isFullscreen, setIsFullscreen] = useState(false);\n\n    const handleFullscreenToggle = useCallback(() => {\n        setIsFullscreen((value) => !value);\n    }, []);\n\n    const menuItems = useMemo(\n        () =>\n            actions?.map<DropdownMenuItem>(({text, icon, hidden, disabled, onClick}) => ({\n                text,\n                iconStart: icon,\n                hidden,\n                disabled,\n                action: onClick,\n            })),\n        [actions],\n    );\n    const hasVisibleActions = actions?.some(({hidden}) => !hidden) ?? false;\n    const fullscreenLabel = isFullscreen\n        ? i18n('action_exit-fullscreen')\n        : i18n('action_enter-fullscreen');\n\n    return (\n        <Portal container={containerRef.current?.ownerDocument.body} disablePortal={!isFullscreen}>\n            <div ref={containerRef} className={block({fullscreen: isFullscreen}, className)}>\n                <div className={block('controls', {visibility: controlsVisibility})}>\n                    <Button\n                        type=\"button\"\n                        view=\"flat-secondary\"\n                        size=\"s\"\n                        aria-label={fullscreenLabel}\n                        title={fullscreenLabel}\n                        onClick={handleFullscreenToggle}\n                    >\n                        <Icon\n                            data={isFullscreen ? ChevronsCollapseUpRight : ChevronsExpandUpRight}\n                            size={16}\n                        />\n                    </Button>\n\n                    {onPencilEdit && (\n                        <Button\n                            type=\"button\"\n                            view=\"flat-secondary\"\n                            size=\"s\"\n                            aria-label={i18n('action_edit-chart')}\n                            title={i18n('action_edit-chart')}\n                            onClick={onPencilEdit}\n                        >\n                            <Icon data={Pencil} size={16} />\n                        </Button>\n                    )}\n\n                    {hasVisibleActions && (\n                        <DropdownMenu\n                            items={menuItems}\n                            size=\"s\"\n                            popupProps={{\n                                container: isFullscreen\n                                    ? containerRef.current?.ownerDocument.body\n                                    : undefined,\n                            }}\n                            renderSwitcher={(switcherProps) => (\n                                <Button\n                                    {...switcherProps}\n                                    type=\"button\"\n                                    view=\"flat\"\n                                    size=\"s\"\n                                    aria-label={i18n('action_open-chart-menu')}\n                                    title={i18n('action_open-chart-menu')}\n                                    aria-haspopup=\"menu\"\n                                >\n                                    <Icon data={Ellipsis} size={16} />\n                                </Button>\n                            )}\n                        />\n                    )}\n                </div>\n\n                <GravityChart {...chartProps} ref={ref} />\n            </div>\n        </Portal>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/Chart/Chart.scss

@@ -0,0 +1,40 @@
+.qp-chart {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--g-color-base-background);
+
+    &_fullscreen {
+        width: 100vw;
+        height: 100vh;
+        z-index: var(--z-index-overlay, 1000);
+        position: fixed;
+        inset: 0;
+    }
+
+    &__controls {
+        position: absolute;
+        z-index: 1;
+        inset-block-start: var(--g-spacing-2);
+        inset-inline-end: var(--g-spacing-2);
+        display: flex;
+        gap: var(--g-spacing-1);
+        background: var(--g-color-base-background);
+        border-radius: var(--g-border-radius-m);
+    }
+
+    @media (hover: hover) {
+        &__controls_visibility_hover {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &:hover &__controls_visibility_hover,
+        &:focus-within &__controls_visibility_hover {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+}

package/build/esm/components/Chart/Chart.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chart } from './Chart';
+declare const meta: Meta<typeof Chart>;
+export default meta;
+type Story = StoryObj<typeof Chart>;
+export declare const Default: Story;
+export declare const ControlsOnHover: Story;
+export declare const WithoutOptionalActions: Story;

package/build/esm/components/Chart/Chart.stories.js

@@ -0,0 +1,88 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React from 'react';
+import { Copy, TrashBin } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { action } from 'storybook/actions';
+import { Chart } from "./Chart";
+import { jsx as _jsx } from "react/jsx-runtime";
+var data = {
+  title: {
+    text: 'Query duration'
+  },
+  xAxis: {
+    type: 'category',
+    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+  },
+  series: {
+    data: [{
+      type: 'line',
+      name: 'Duration',
+      data: [{
+        x: 0,
+        y: 12
+      }, {
+        x: 1,
+        y: 18
+      }, {
+        x: 2,
+        y: 10
+      }, {
+        x: 3,
+        y: 24
+      }, {
+        x: 4,
+        y: 16
+      }]
+    }]
+  }
+};
+var meta = {
+  title: 'Components/Chart',
+  component: Chart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded'
+  },
+  args: {
+    data: data,
+    controlsVisibility: 'always',
+    onPencilEdit: action('onPencilEdit'),
+    actions: [{
+      text: 'Duplicate',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        data: Copy,
+        size: 16
+      }),
+      onClick: action('duplicate')
+    }, {
+      text: 'Delete',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        data: TrashBin,
+        size: 16
+      }),
+      onClick: action('delete')
+    }]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        height: 400
+      },
+      children: /*#__PURE__*/_jsx(Chart, _objectSpread({}, args))
+    });
+  }
+};
+export default meta;
+export var Default = {};
+export var ControlsOnHover = {
+  args: {
+    controlsVisibility: 'hover'
+  }
+};
+export var WithoutOptionalActions = {
+  args: {
+    actions: undefined,
+    onPencilEdit: undefined
+  }
+};
+// #sourceMappingURL=Chart.stories.js.map

package/build/esm/components/Chart/Chart.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Copy","TrashBin","Icon","action","Chart","jsx","_jsx","data","title","text","xAxis","type","categories","series","name","x","y","meta","component","tags","parameters","layout","args","controlsVisibility","onPencilEdit","actions","icon","size","onClick","render","style","height","children","_objectSpread","Default","ControlsOnHover","WithoutOptionalActions","undefined"],"sources":["Chart.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport type {ChartData} from '@gravity-ui/charts';\nimport {Copy, TrashBin} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\nimport {action} from 'storybook/actions';\n\nimport {Chart} from './Chart';\n\nconst data: ChartData = {\n    title: {text: 'Query duration'},\n    xAxis: {type: 'category', categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},\n    series: {\n        data: [\n            {\n                type: 'line',\n                name: 'Duration',\n                data: [\n                    {x: 0, y: 12},\n                    {x: 1, y: 18},\n                    {x: 2, y: 10},\n                    {x: 3, y: 24},\n                    {x: 4, y: 16},\n                ],\n            },\n        ],\n    },\n};\n\nconst meta: Meta<typeof Chart> = {\n    title: 'Components/Chart',\n    component: Chart,\n    tags: ['autodocs'],\n    parameters: {layout: 'padded'},\n    args: {\n        data,\n        controlsVisibility: 'always',\n        onPencilEdit: action('onPencilEdit'),\n        actions: [\n            {\n                text: 'Duplicate',\n                icon: <Icon data={Copy} size={16} />,\n                onClick: action('duplicate'),\n            },\n            {\n                text: 'Delete',\n                icon: <Icon data={TrashBin} size={16} />,\n                onClick: action('delete'),\n            },\n        ],\n    },\n    render: (args) => (\n        <div style={{height: 400}}>\n            <Chart {...args} />\n        </div>\n    ),\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Chart>;\n\nexport const Default: Story = {};\n\nexport const ControlsOnHover: Story = {\n    args: {\n        controlsVisibility: 'hover',\n    },\n};\n\nexport const WithoutOptionalActions: Story = {\n    args: {\n        actions: undefined,\n        onPencilEdit: undefined,\n    },\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAAQC,IAAI,EAAEC,QAAQ,QAAO,mBAAmB;AAChD,SAAQC,IAAI,QAAO,mBAAmB;AACtC,SAAQC,MAAM,QAAO,mBAAmB;AAExC,SAAQC,KAAK;AAAiB,SAAAC,GAAA,IAAAC,IAAA;AAE9B,IAAMC,IAAe,GAAG;EACpBC,KAAK,EAAE;IAACC,IAAI,EAAE;EAAgB,CAAC;EAC/BC,KAAK,EAAE;IAACC,IAAI,EAAE,UAAU;IAAEC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK;EAAC,CAAC;EAC1EC,MAAM,EAAE;IACJN,IAAI,EAAE,CACF;MACII,IAAI,EAAE,MAAM;MACZG,IAAI,EAAE,UAAU;MAChBP,IAAI,EAAE,CACF;QAACQ,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,EACb;QAACD,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,EACb;QAACD,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,EACb;QAACD,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,EACb;QAACD,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;IAErB,CAAC;EAET;AACJ,CAAC;AAED,IAAMC,IAAwB,GAAG;EAC7BT,KAAK,EAAE,kBAAkB;EACzBU,SAAS,EAAEd,KAAK;EAChBe,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IAACC,MAAM,EAAE;EAAQ,CAAC;EAC9BC,IAAI,EAAE;IACFf,IAAI,EAAJA,IAAI;IACJgB,kBAAkB,EAAE,QAAQ;IAC5BC,YAAY,EAAErB,MAAM,CAAC,cAAc,CAAC;IACpCsB,OAAO,EAAE,CACL;MACIhB,IAAI,EAAE,WAAW;MACjBiB,IAAI,eAAEpB,IAAA,CAACJ,IAAI;QAACK,IAAI,EAAEP,IAAK;QAAC2B,IAAI,EAAE;MAAG,CAAE,CAAC;MACpCC,OAAO,EAAEzB,MAAM,CAAC,WAAW;IAC/B,CAAC,EACD;MACIM,IAAI,EAAE,QAAQ;MACdiB,IAAI,eAAEpB,IAAA,CAACJ,IAAI;QAACK,IAAI,EAAEN,QAAS;QAAC0B,IAAI,EAAE;MAAG,CAAE,CAAC;MACxCC,OAAO,EAAEzB,MAAM,CAAC,QAAQ;IAC5B,CAAC;EAET,CAAC;EACD0B,MAAM,EAAE,SAARA,MAAMA,CAAGP,IAAI;IAAA,oBACThB,IAAA;MAAKwB,KAAK,EAAE;QAACC,MAAM,EAAE;MAAG,CAAE;MAAAC,QAAA,eACtB1B,IAAA,CAACF,KAAK,EAAA6B,aAAA,KAAKX,IAAI,CAAG;IAAC,CAClB,CAAC;EAAA;AAEd,CAAC;AAED,eAAeL,IAAI;AAGnB,OAAO,IAAMiB,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,IAAMC,eAAsB,GAAG;EAClCb,IAAI,EAAE;IACFC,kBAAkB,EAAE;EACxB;AACJ,CAAC;AAED,OAAO,IAAMa,sBAA6B,GAAG;EACzCd,IAAI,EAAE;IACFG,OAAO,EAAEY,SAAS;IAClBb,YAAY,EAAEa;EAClB;AACJ,CAAC","ignoreList":[]}

package/build/esm/components/Chart/i18n/dicts.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    en: {
+        "action_enter-fullscreen": string;
+        "action_exit-fullscreen": string;
+        "action_edit-chart": string;
+        "action_open-chart-menu": string;
+    };
+    ru: {
+        "action_enter-fullscreen": string;
+        "action_exit-fullscreen": string;
+        "action_edit-chart": string;
+        "action_open-chart-menu": string;
+    };
+};
+export default _default;

package/build/esm/components/Chart/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/components/Chart/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/components/Chart/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "action_enter-fullscreen": "Enter fullscreen",
+  "action_exit-fullscreen": "Exit fullscreen",
+  "action_edit-chart": "Edit chart",
+  "action_open-chart-menu": "Open chart menu"
+}

package/build/esm/components/Chart/i18n/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ((key: "action_enter-fullscreen" | "action_exit-fullscreen" | "action_edit-chart" | "action_open-chart-menu", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "qp:chart": Record<"action_enter-fullscreen" | "action_exit-fullscreen" | "action_edit-chart" | "action_open-chart-menu", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;

package/build/esm/components/Chart/i18n/index.js

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

package/build/esm/components/Chart/i18n/index.js.map

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

package/build/esm/components/Chart/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "action_enter-fullscreen": "Развернуть на весь экран",
+  "action_exit-fullscreen": "Выйти из полноэкранного режима",
+  "action_edit-chart": "Редактировать график",
+  "action_open-chart-menu": "Открыть меню графика"
+}

package/build/esm/components/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export { Chart } from './Chart';
+export type { ChartAction, ChartProps } from './Chart';

package/build/esm/components/Chart/index.js

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

package/build/esm/components/Chart/index.js.map

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

package/build/esm/components/ChartEditorForm/ChartEditorForm.css

@@ -0,0 +1,18 @@
+.qp-chart-editor-form {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow-y: auto;
+}
+.qp-chart-editor-form__title {
+  margin: 0;
+}
+.qp-chart-editor-form__fields {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.qp-chart-editor-form__actions {
+  margin-top: auto;
+}
+/*# sourceMappingURL=ChartEditorForm.css.map */

package/build/esm/components/ChartEditorForm/ChartEditorForm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartEditorForm.scss"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AACJ;AACI;EACI,SAAA;AACR;AAEI;EACI,cAAA;EACA,aAAA;AAAR;AAGI;EACI,gBAAA;AADR","file":"ChartEditorForm.css","sourcesContent":[".qp-chart-editor-form {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 16px;\n    overflow-y: auto;\n\n    &__title {\n        margin: 0;\n    }\n\n    &__fields {\n        flex: 1 1 auto;\n        min-height: 0;\n    }\n\n    &__actions {\n        margin-top: auto;\n    }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ChartEditorFormProps } from './types';
+import './ChartEditorForm.scss';
+export declare function ChartEditorForm({ dataIds, axisVariants, labels, className, formValues, onFormValuesChange, disabled, onCancel, onSubmit, }: ChartEditorFormProps): React.JSX.Element;

package/build/esm/components/ChartEditorForm/ChartEditorForm.js

@@ -0,0 +1,152 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import React, { useMemo } from 'react';
+import { Button, Flex, Select, Switch, Text, TextInput } from '@gravity-ui/uikit';
+import { Field } from "./internal/Field";
+import { resolveLabels } from "./helpers/resolveLabels";
+import cn from 'bem-cn-lite';
+import "./ChartEditorForm.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-chart-editor-form');
+export function ChartEditorForm(_ref) {
+  var dataIds = _ref.dataIds,
+    axisVariants = _ref.axisVariants,
+    labels = _ref.labels,
+    className = _ref.className,
+    formValues = _ref.formValues,
+    onFormValuesChange = _ref.onFormValuesChange,
+    disabled = _ref.disabled,
+    onCancel = _ref.onCancel,
+    onSubmit = _ref.onSubmit;
+  var updateFormValues = function updateFormValues(patch) {
+    onFormValuesChange === null || onFormValuesChange === void 0 || onFormValuesChange(_objectSpread(_objectSpread({}, formValues), patch));
+  };
+  var axisOptions = useMemo(function () {
+    return axisVariants === null || axisVariants === void 0 ? void 0 : axisVariants.map(function (axisType) {
+      return {
+        value: axisType,
+        children: axisType
+      };
+    });
+  }, [axisVariants]);
+  var dataIdsOptions = useMemo(function () {
+    return dataIds === null || dataIds === void 0 ? void 0 : dataIds.map(function (dataId) {
+      return {
+        value: dataId,
+        children: dataId
+      };
+    });
+  }, [dataIds]);
+  var resolvedLables = resolveLabels(labels);
+  var needShowDataIdsSelector = (dataIdsOptions === null || dataIdsOptions === void 0 ? void 0 : dataIdsOptions.length) && (dataIdsOptions === null || dataIdsOptions === void 0 ? void 0 : dataIdsOptions.length) > 1;
+  return /*#__PURE__*/_jsxs(Flex, {
+    as: "aside",
+    direction: "column",
+    gap: 3,
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "subheader-2",
+      className: block('title'),
+      children: resolvedLables.formTitle
+    }), /*#__PURE__*/_jsxs(Flex, {
+      direction: "column",
+      gap: 3,
+      className: block('fields'),
+      children: [needShowDataIdsSelector && /*#__PURE__*/_jsx(Field, {
+        label: resolvedLables.data,
+        children: /*#__PURE__*/_jsx(Select, {
+          multiple: true,
+          "aria-label": resolvedLables.data,
+          options: dataIdsOptions,
+          value: formValues.dataIds,
+          onUpdate: function onUpdate(pathDataIds) {
+            return updateFormValues({
+              dataIds: pathDataIds
+            });
+          },
+          disabled: disabled,
+          width: "max"
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: resolvedLables.axisType,
+        children: /*#__PURE__*/_jsx(Select, {
+          "aria-label": resolvedLables.axisType,
+          options: axisOptions,
+          value: formValues.axisType ? [formValues.axisType] : [],
+          onUpdate: function onUpdate(axisType) {
+            return updateFormValues({
+              axisType: axisType[0]
+            });
+          },
+          disabled: disabled,
+          width: "max"
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: resolvedLables.chartTitle,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          "aria-label": resolvedLables.chartTitle,
+          value: formValues.chartTitle,
+          onUpdate: function onUpdate(chartTitle) {
+            return updateFormValues({
+              chartTitle: chartTitle
+            });
+          },
+          disabled: disabled
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: resolvedLables.xTitle,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          "aria-label": resolvedLables.xTitle,
+          value: formValues.xTitle,
+          onUpdate: function onUpdate(xTitle) {
+            return updateFormValues({
+              xTitle: xTitle
+            });
+          },
+          disabled: disabled
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: resolvedLables.yTitle,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          "aria-label": resolvedLables.yTitle,
+          value: formValues.yTitle,
+          onUpdate: function onUpdate(yTitle) {
+            return updateFormValues({
+              yTitle: yTitle
+            });
+          },
+          disabled: disabled
+        })
+      }), /*#__PURE__*/_jsx(Switch, {
+        checked: Boolean(formValues.showLegend),
+        onUpdate: function onUpdate(showLegend) {
+          return updateFormValues({
+            showLegend: showLegend
+          });
+        },
+        disabled: disabled,
+        content: resolvedLables.showLegend
+      })]
+    }), /*#__PURE__*/_jsxs(Flex, {
+      gap: 2,
+      justifyContent: "flex-end",
+      className: block('actions'),
+      children: [/*#__PURE__*/_jsx(Button, {
+        view: "flat",
+        onClick: onCancel,
+        disabled: disabled,
+        children: resolvedLables.cancel
+      }), /*#__PURE__*/_jsx(Button, {
+        view: "action",
+        onClick: onSubmit,
+        disabled: disabled,
+        children: resolvedLables.submit
+      })]
+    })]
+  });
+}
+// #sourceMappingURL=ChartEditorForm.js.map