@gravity-ui/querieskit 1.0.3 → 1.1.0

package/build/esm/components/AddChartButton/AddChartButton.js

@@ -0,0 +1,124 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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, useState } from 'react';
+import { ChartAreaStacked, ChartBar, ChartColumn, ChartLine, ChartPie, Circles5Random, Plus, SquareBars } from '@gravity-ui/icons';
+import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import "./AddChartButton.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-add-chart-button');
+export var DEFAULT_ADD_CHART_BUTTON_OPTIONS = [{
+  value: 'Area',
+  text: 'Area',
+  icon: ChartAreaStacked
+}, {
+  value: 'BarX',
+  text: 'BarX',
+  icon: ChartBar
+}, {
+  value: 'BarY',
+  text: 'BarY',
+  icon: ChartColumn
+}, {
+  value: 'Line',
+  text: 'Line',
+  icon: ChartLine
+}, {
+  value: 'Pie',
+  text: 'Pie',
+  icon: ChartPie
+}, {
+  value: 'Scatter',
+  text: 'Scatter',
+  icon: Circles5Random
+}, {
+  value: 'Waterfall',
+  text: 'Waterfall',
+  icon: SquareBars
+}];
+export var AddChartButton = function AddChartButton(_ref) {
+  var _menuProps$size;
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? 'Add chart' : _ref$text,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_ADD_CHART_BUTTON_OPTIONS : _ref$options,
+    onSelect = _ref.onSelect,
+    open = _ref.open,
+    onOpenToggle = _ref.onOpenToggle,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    buttonProps = _ref.buttonProps,
+    menuProps = _ref.menuProps,
+    popupProps = _ref.popupProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerOpen = _useState2[0],
+    setInnerOpen = _useState2[1];
+  var isOpen = open !== null && open !== void 0 ? open : innerOpen;
+  var items = useMemo(function () {
+    return options.map(function (_ref2) {
+      var value = _ref2.value,
+        optionText = _ref2.text,
+        icon = _ref2.icon,
+        optionDisabled = _ref2.disabled,
+        hidden = _ref2.hidden;
+      return {
+        text: optionText,
+        iconStart: icon && /*#__PURE__*/_jsx(Icon, {
+          data: icon,
+          size: 16,
+          className: block('option-icon')
+        }),
+        disabled: optionDisabled,
+        hidden: hidden,
+        action: function action() {
+          return onSelect(value);
+        }
+      };
+    });
+  }, [onSelect, options]);
+  var handleOpenToggle = function handleOpenToggle(nextOpen) {
+    var nextValue = typeof nextOpen === 'function' ? nextOpen(isOpen) : nextOpen;
+    if (open === undefined) {
+      setInnerOpen(nextValue);
+    }
+    onOpenToggle === null || onOpenToggle === void 0 || onOpenToggle(nextValue);
+  };
+  return /*#__PURE__*/_jsx(DropdownMenu, {
+    items: items,
+    open: isOpen,
+    onOpenToggle: handleOpenToggle,
+    disabled: disabled,
+    size: "s",
+    switcherWrapperClassName: block(null, className),
+    renderSwitcher: function renderSwitcher(switcherProps) {
+      var _buttonProps$type;
+      return /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread(_objectSpread({}, buttonProps), switcherProps), {}, {
+        type: (_buttonProps$type = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) !== null && _buttonProps$type !== void 0 ? _buttonProps$type : 'button',
+        view: "flat-action",
+        size: "m",
+        selected: isOpen,
+        disabled: disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        className: block('button'),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: Plus,
+          size: 16
+        }), text]
+      }));
+    },
+    menuProps: _objectSpread(_objectSpread({}, menuProps), {}, {
+      size: (_menuProps$size = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _menuProps$size !== void 0 ? _menuProps$size : 's',
+      className: block('menu', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className)
+    }),
+    popupProps: _objectSpread({
+      placement: 'bottom-start'
+    }, popupProps)
+  });
+};
+// #sourceMappingURL=AddChartButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","ChartAreaStacked","ChartBar","ChartColumn","ChartLine","ChartPie","Circles5Random","Plus","SquareBars","Button","DropdownMenu","Icon","cn","jsx","_jsx","jsxs","_jsxs","block","DEFAULT_ADD_CHART_BUTTON_OPTIONS","value","text","icon","AddChartButton","_ref","_menuProps$size","_ref$text","_ref$options","options","onSelect","open","onOpenToggle","disabled","className","buttonProps","menuProps","popupProps","_useState","_useState2","_slicedToArray","innerOpen","setInnerOpen","isOpen","items","map","_ref2","optionText","optionDisabled","hidden","iconStart","data","size","action","handleOpenToggle","nextOpen","nextValue","undefined","switcherWrapperClassName","renderSwitcher","switcherProps","_buttonProps$type","_objectSpread","type","view","selected","children","placement"],"sources":["AddChartButton.tsx"],"sourcesContent":["import React, {type ReactNode, useMemo, useState} from 'react';\nimport {\n    ChartAreaStacked,\n    ChartBar,\n    ChartColumn,\n    ChartLine,\n    ChartPie,\n    Circles5Random,\n    Plus,\n    SquareBars,\n} from '@gravity-ui/icons';\nimport {\n    Button,\n    type ButtonButtonProps,\n    DropdownMenu,\n    type DropdownMenuProps,\n    Icon,\n    type IconData,\n} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport './AddChartButton.scss';\n\nconst block = cn('qp-add-chart-button');\n\nexport type AddChartButtonOption<TValue extends string = string> = {\n    value: TValue;\n    text: ReactNode;\n    icon?: IconData;\n    disabled?: boolean;\n    hidden?: boolean;\n};\n\nexport type DefaultAddChartButtonValue =\n    'Area' | 'BarX' | 'BarY' | 'Line' | 'Pie' | 'Scatter' | 'Waterfall';\n\nexport const DEFAULT_ADD_CHART_BUTTON_OPTIONS: readonly AddChartButtonOption<DefaultAddChartButtonValue>[] =\n    [\n        {value: 'Area', text: 'Area', icon: ChartAreaStacked},\n        {value: 'BarX', text: 'BarX', icon: ChartBar},\n        {value: 'BarY', text: 'BarY', icon: ChartColumn},\n        {value: 'Line', text: 'Line', icon: ChartLine},\n        {value: 'Pie', text: 'Pie', icon: ChartPie},\n        {value: 'Scatter', text: 'Scatter', icon: Circles5Random},\n        {value: 'Waterfall', text: 'Waterfall', icon: SquareBars},\n    ];\n\ntype SwitcherButtonProps = Omit<\n    ButtonButtonProps,\n    'children' | 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'selected' | 'size' | 'view'\n>;\n\ntype MenuProps = NonNullable<DropdownMenuProps<unknown>['menuProps']>;\ntype PopupProps = NonNullable<DropdownMenuProps<unknown>['popupProps']>;\n\nexport type AddChartButtonProps<TValue extends string = DefaultAddChartButtonValue> = {\n    text?: ReactNode;\n    options?: readonly AddChartButtonOption<TValue>[];\n    onSelect: (value: TValue) => void;\n    open?: boolean;\n    onOpenToggle?: (open: boolean) => void;\n    disabled?: boolean;\n    className?: string;\n    buttonProps?: SwitcherButtonProps;\n    menuProps?: MenuProps;\n    popupProps?: PopupProps;\n};\n\nexport const AddChartButton = <TValue extends string = DefaultAddChartButtonValue>({\n    text = 'Add chart',\n    options = DEFAULT_ADD_CHART_BUTTON_OPTIONS as readonly AddChartButtonOption<TValue>[],\n    onSelect,\n    open,\n    onOpenToggle,\n    disabled,\n    className,\n    buttonProps,\n    menuProps,\n    popupProps,\n}: AddChartButtonProps<TValue>) => {\n    const [innerOpen, setInnerOpen] = useState(false);\n    const isOpen = open ?? innerOpen;\n\n    const items = useMemo(\n        () =>\n            options.map(({value, text: optionText, icon, disabled: optionDisabled, hidden}) => ({\n                text: optionText,\n                iconStart: icon && <Icon data={icon} size={16} className={block('option-icon')} />,\n                disabled: optionDisabled,\n                hidden,\n                action: () => onSelect(value),\n            })),\n        [onSelect, options],\n    );\n\n    const handleOpenToggle: React.Dispatch<React.SetStateAction<boolean>> = (nextOpen) => {\n        const nextValue = typeof nextOpen === 'function' ? nextOpen(isOpen) : nextOpen;\n\n        if (open === undefined) {\n            setInnerOpen(nextValue);\n        }\n\n        onOpenToggle?.(nextValue);\n    };\n\n    return (\n        <DropdownMenu\n            items={items}\n            open={isOpen}\n            onOpenToggle={handleOpenToggle}\n            disabled={disabled}\n            size=\"s\"\n            switcherWrapperClassName={block(null, className)}\n            renderSwitcher={(switcherProps) => (\n                <Button\n                    {...buttonProps}\n                    {...switcherProps}\n                    type={buttonProps?.type ?? 'button'}\n                    view=\"flat-action\"\n                    size=\"m\"\n                    selected={isOpen}\n                    disabled={disabled}\n                    aria-haspopup=\"menu\"\n                    aria-expanded={isOpen}\n                    className={block('button')}\n                >\n                    <Icon data={Plus} size={16} />\n                    {text}\n                </Button>\n            )}\n            menuProps={{\n                ...menuProps,\n                size: menuProps?.size ?? 's',\n                className: block('menu', menuProps?.className),\n            }}\n            popupProps={{placement: 'bottom-start', ...popupProps}}\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/AddChartButton/AddChartButton.scss

@@ -0,0 +1,12 @@
+.qp-add-chart-button {
+    flex-shrink: 0;
+
+    &__menu {
+        inline-size: 360px;
+        max-inline-size: calc(100vw - var(--g-spacing-8));
+    }
+
+    &__option-icon {
+        color: var(--g-color-text-brand);
+    }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { action } from 'storybook/actions';
+import { AddChartButton } from "./AddChartButton";
+var meta = {
+  title: 'Components/AddChartButton',
+  component: AddChartButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded'
+  },
+  args: {
+    onSelect: action('onSelect'),
+    onOpenToggle: action('onOpenToggle')
+  }
+};
+export default meta;
+export var Default = {};
+export var Opened = {
+  args: {
+    open: true
+  }
+};
+export var CustomText = {
+  args: {
+    text: 'Add visualization'
+  }
+};
+// #sourceMappingURL=AddChartButton.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","AddChartButton","meta","title","component","tags","parameters","layout","args","onSelect","onOpenToggle","Default","Opened","open","CustomText","text"],"sources":["AddChartButton.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {action} from 'storybook/actions';\n\nimport {AddChartButton} from './AddChartButton';\n\nconst meta: Meta<typeof AddChartButton> = {\n    title: 'Components/AddChartButton',\n    component: AddChartButton,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'padded',\n    },\n    args: {\n        onSelect: action('onSelect'),\n        onOpenToggle: action('onOpenToggle'),\n    },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof AddChartButton>;\n\nexport const Default: Story = {};\n\nexport const Opened: Story = {\n    args: {\n        open: true,\n    },\n};\n\nexport const CustomText: Story = {\n    args: {\n        text: 'Add visualization',\n    },\n};\n"],"mappings":"AACA,SAAQA,MAAM,QAAO,mBAAmB;AAExC,SAAQC,cAAc;AAEtB,IAAMC,IAAiC,GAAG;EACtCC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAEH,cAAc;EACzBI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,IAAI,EAAE;IACFC,QAAQ,EAAET,MAAM,CAAC,UAAU,CAAC;IAC5BU,YAAY,EAAEV,MAAM,CAAC,cAAc;EACvC;AACJ,CAAC;AAED,eAAeE,IAAI;AAGnB,OAAO,IAAMS,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,IAAMC,MAAa,GAAG;EACzBJ,IAAI,EAAE;IACFK,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,IAAMC,UAAiB,GAAG;EAC7BN,IAAI,EAAE;IACFO,IAAI,EAAE;EACV;AACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { AddChartButton, DEFAULT_ADD_CHART_BUTTON_OPTIONS } from './AddChartButton';
+export type { AddChartButtonOption, AddChartButtonProps, DefaultAddChartButtonValue, } from './AddChartButton';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["AddChartButton","DEFAULT_ADD_CHART_BUTTON_OPTIONS"],"sources":["index.ts"],"sourcesContent":["export {AddChartButton, DEFAULT_ADD_CHART_BUTTON_OPTIONS} from './AddChartButton';\nexport type {\n    AddChartButtonOption,\n    AddChartButtonProps,\n    DefaultAddChartButtonValue,\n} from './AddChartButton';\n"],"mappings":"AAAA,SAAQA,cAAc,EAAEC,gCAAgC","ignoreList":[]}

package/build/esm/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,18 @@
+.qp-breadcrumbs {
+  min-width: 0;
+}
+.qp-breadcrumbs__list {
+  flex: 1;
+  min-width: 0;
+}
+.qp-breadcrumbs__path-editor {
+  flex: 1;
+  min-width: 0;
+}
+.qp-breadcrumbs__edit-button {
+  display: none;
+}
+.qp-breadcrumbs:hover .qp-breadcrumbs__edit-button {
+  display: block;
+}
+/*# sourceMappingURL=Breadcrumbs.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Breadcrumbs.scss"],"names":[],"mappings":"AAAA;EAGI,YAAA;AADJ;AAGI;EACI,OAAA;EACA,YAAA;AADR;AAII;EACI,OAAA;EACA,YAAA;AAFR;AAKI;EACI,aAAA;AAHR;AAOQ;EACI,cAAA;AALZ","file":"Breadcrumbs.css","sourcesContent":[".qp-breadcrumbs {\n    $self: &;\n\n    min-width: 0;\n\n    &__list {\n        flex: 1;\n        min-width: 0;\n    }\n\n    &__path-editor {\n        flex: 1;\n        min-width: 0;\n    }\n\n    &__edit-button {\n        display: none;\n    }\n\n    &:hover {\n        #{$self}__edit-button {\n            display: block;\n        }\n    }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { NavigationLocation } from '../../types/navigation';
+import type { LoadPathSuggestions } from '../../types/pathEditor';
+import './Breadcrumbs.scss';
+export type BreadcrumbsProps = {
+    location: NavigationLocation;
+    hideResetButton?: boolean;
+    className?: string;
+    onUpdate: (location: NavigationLocation) => void;
+    onLoadSuggestions?: LoadPathSuggestions;
+};
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

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

@@ -0,0 +1,163 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.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 "core-js/modules/es.string.ends-with.js";
+import React, { useState } from 'react';
+import { Button, Flex, Breadcrumbs as GravityBreadcrumbs, Icon, Text } from '@gravity-ui/uikit';
+var FolderTreeIcon = function FolderTreeIcon(props) {
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M7.5 13.5v-3A.5.5 0 0 1 8 10h.672a.5.5 0 0 1 .353.146l.414.415.44.439H13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5M6 13H4.5a3 3 0 0 1-3-3V1.25a.75.75 0 0 1 1.5 0V2a1.5 1.5 0 0 0 1.5 1.5H6v-1a2 2 0 0 1 2-2h.672a2 2 0 0 1 1.414.586l.414.414H13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5H4.5A3 3 0 0 1 3 4.599V10a1.5 1.5 0 0 0 1.5 1.5H6v-1a2 2 0 0 1 2-2h.672a2 2 0 0 1 1.414.586l.414.414H13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm1.5-8.75V5.5A.5.5 0 0 0 8 6h5a.5.5 0 0 0 .5-.5v-2A.5.5 0 0 0 13 3H9.879l-.44-.44-.414-.414A.5.5 0 0 0 8.672 2H8a.5.5 0 0 0-.5.5z",
+      clipRule: "evenodd"
+    })
+  }));
+};
+FolderTreeIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var PencilIcon = function PencilIcon(props) {
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M11.423 1A3.577 3.577 0 0 1 15 4.577c0 .27-.108.53-.3.722l-.528.529-1.971 1.971-5.059 5.059a3 3 0 0 1-1.533.82l-2.638.528a1 1 0 0 1-1.177-1.177l.528-2.638a3 3 0 0 1 .82-1.533l5.059-5.059 2.5-2.5c.191-.191.451-.299.722-.299m-2.31 4.009-4.91 4.91a1.5 1.5 0 0 0-.41.766l-.38 1.903 1.902-.38a1.5 1.5 0 0 0 .767-.41l4.91-4.91a2.08 2.08 0 0 0-1.88-1.88m3.098.658a3.6 3.6 0 0 0-1.878-1.879l1.28-1.28c.995.09 1.788.884 1.878 1.88z",
+      clipRule: "evenodd"
+    })
+  }));
+};
+PencilIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+import cn from 'bem-cn-lite';
+import { parsePathSegments } from "./helpers/parsePathSegments";
+import { PathEditor } from "../PathEditor";
+import i18n from "./i18n";
+import "./Breadcrumbs.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-breadcrumbs');
+export var Breadcrumbs = function Breadcrumbs(_ref) {
+  var location = _ref.location,
+    hideResetButton = _ref.hideResetButton,
+    onUpdate = _ref.onUpdate,
+    onLoadSuggestions = _ref.onLoadSuggestions,
+    className = _ref.className;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    edit = _useState2[0],
+    setEdit = _useState2[1];
+  var cluster = location.cluster,
+    path = location.path;
+  var ROOT_PATH = undefined;
+  var items = cluster ? [{
+    path: ROOT_PATH,
+    title: cluster
+  }].concat(_toConsumableArray(parsePathSegments(path))) : [];
+  var handleReset = function handleReset() {
+    onUpdate({
+      cluster: undefined,
+      path: undefined
+    });
+  };
+  var handleCancelEdit = function handleCancelEdit() {
+    setEdit(false);
+  };
+  var handleOnSubmit = function handleOnSubmit(nextPath) {
+    var normalizedPath = nextPath.endsWith('/') ? nextPath.slice(0, -1) : nextPath;
+    onUpdate({
+      cluster: cluster,
+      path: normalizedPath || undefined
+    });
+    setEdit(false);
+  };
+  if (edit) {
+    return /*#__PURE__*/_jsx(Flex, {
+      grow: true,
+      minWidth: 0,
+      className: block(null, className),
+      children: /*#__PURE__*/_jsx(PathEditor, {
+        className: block('path-editor'),
+        defaultPath: path !== null && path !== void 0 ? path : '',
+        autoFocus: true,
+        cluster: cluster,
+        onLoadSuggestions: onLoadSuggestions,
+        onApply: handleOnSubmit,
+        onCancel: handleCancelEdit,
+        onBlur: handleCancelEdit,
+        onFocus: function onFocus(event) {
+          return event.currentTarget.select();
+        }
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Flex, {
+    gap: 1,
+    alignItems: "center",
+    grow: true,
+    minWidth: 0,
+    className: block(null, className),
+    children: [!hideResetButton && /*#__PURE__*/_jsx(Button, {
+      view: "flat",
+      onClick: handleReset,
+      "aria-label": i18n('action_reset'),
+      children: /*#__PURE__*/_jsx(Icon, {
+        data: FolderTreeIcon,
+        size: 16
+      })
+    }), items.length > 0 ? /*#__PURE__*/_jsxs(Flex, {
+      alignItems: "center",
+      minWidth: 0,
+      overflow: "hidden",
+      gap: items.length > 1 ? undefined : 1,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: "secondary",
+        children: "/"
+      }), /*#__PURE__*/_jsx(GravityBreadcrumbs, {
+        showRoot: true,
+        className: block('list'),
+        maxItems: 3,
+        children: items.map(function (item, index) {
+          var _item$path;
+          var isLast = index === items.length - 1;
+          return /*#__PURE__*/_jsx(GravityBreadcrumbs.Item, {
+            disabled: isLast,
+            onClick: isLast ? undefined : function () {
+              return onUpdate({
+                cluster: cluster,
+                path: item.path
+              });
+            },
+            children: item.title
+          }, (_item$path = item.path) !== null && _item$path !== void 0 ? _item$path : 'root');
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        view: "flat",
+        className: block('edit-button'),
+        onClick: function onClick() {
+          return setEdit(true);
+        },
+        "aria-label": i18n('action_edit-path'),
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: PencilIcon,
+          size: 16
+        })
+      })]
+    }) : null]
+  });
+};
+// #sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Button","Flex","Breadcrumbs","GravityBreadcrumbs","Icon","Text","FolderTreeIcon","props","_jsx","_objectSpread","children","fill","fillRule","d","clipRule","defaultProps","xmlns","width","height","viewBox","PencilIcon","cn","parsePathSegments","PathEditor","i18n","jsx","jsxs","_jsxs","block","_ref","location","hideResetButton","onUpdate","onLoadSuggestions","className","_useState","_useState2","_slicedToArray","edit","setEdit","cluster","path","ROOT_PATH","undefined","items","title","concat","_toConsumableArray","handleReset","handleCancelEdit","handleOnSubmit","nextPath","normalizedPath","endsWith","slice","grow","minWidth","defaultPath","autoFocus","onApply","onCancel","onBlur","onFocus","event","currentTarget","select","gap","alignItems","view","onClick","data","size","length","overflow","color","showRoot","maxItems","map","item","index","_item$path","isLast","Item","disabled"],"sources":["Breadcrumbs.tsx"],"sourcesContent":["import React, {FC, useState} from 'react';\nimport {Button, Flex, Breadcrumbs as GravityBreadcrumbs, Icon, Text} from '@gravity-ui/uikit';\nimport FolderTreeIcon from '@gravity-ui/icons/svgs/folder-tree.svg';\nimport PencilIcon from '@gravity-ui/icons/svgs/pencil.svg';\nimport cn from 'bem-cn-lite';\nimport {parsePathSegments} from './helpers/parsePathSegments';\nimport {NavigationLocation} from '../../types/navigation';\nimport type {LoadPathSuggestions} from '../../types/pathEditor';\nimport {PathEditor} from '../PathEditor';\nimport i18n from './i18n';\nimport './Breadcrumbs.scss';\n\nexport type BreadcrumbsProps = {\n    location: NavigationLocation;\n    hideResetButton?: boolean;\n    className?: string;\n    onUpdate: (location: NavigationLocation) => void;\n    onLoadSuggestions?: LoadPathSuggestions;\n};\n\nconst block = cn('qp-breadcrumbs');\n\nexport const Breadcrumbs: FC<BreadcrumbsProps> = ({\n    location,\n    hideResetButton,\n    onUpdate,\n    onLoadSuggestions,\n    className,\n}) => {\n    const [edit, setEdit] = useState(false);\n\n    const {cluster, path} = location;\n    const ROOT_PATH = undefined;\n    const items = cluster ? [{path: ROOT_PATH, title: cluster}, ...parsePathSegments(path)] : [];\n\n    const handleReset = () => {\n        onUpdate({cluster: undefined, path: undefined});\n    };\n\n    const handleCancelEdit = () => {\n        setEdit(false);\n    };\n\n    const handleOnSubmit = (nextPath: string) => {\n        const normalizedPath = nextPath.endsWith('/') ? nextPath.slice(0, -1) : nextPath;\n        onUpdate({cluster, path: normalizedPath || undefined});\n        setEdit(false);\n    };\n\n    if (edit) {\n        return (\n            <Flex grow minWidth={0} className={block(null, className)}>\n                <PathEditor\n                    className={block('path-editor')}\n                    defaultPath={path ?? ''}\n                    autoFocus\n                    cluster={cluster}\n                    onLoadSuggestions={onLoadSuggestions}\n                    onApply={handleOnSubmit}\n                    onCancel={handleCancelEdit}\n                    onBlur={handleCancelEdit}\n                    onFocus={(event) => event.currentTarget.select()}\n                />\n            </Flex>\n        );\n    }\n\n    return (\n        <Flex gap={1} alignItems=\"center\" grow minWidth={0} className={block(null, className)}>\n            {!hideResetButton && (\n                <Button view=\"flat\" onClick={handleReset} aria-label={i18n('action_reset')}>\n                    <Icon data={FolderTreeIcon} size={16} />\n                </Button>\n            )}\n            {items.length > 0 ? (\n                <Flex\n                    alignItems=\"center\"\n                    minWidth={0}\n                    overflow=\"hidden\"\n                    gap={items.length > 1 ? undefined : 1}\n                >\n                    <Text color=\"secondary\">/</Text>\n                    <GravityBreadcrumbs showRoot className={block('list')} maxItems={3}>\n                        {items.map((item, index) => {\n                            const isLast = index === items.length - 1;\n\n                            return (\n                                <GravityBreadcrumbs.Item\n                                    key={item.path ?? 'root'}\n                                    disabled={isLast}\n                                    onClick={\n                                        isLast\n                                            ? undefined\n                                            : () => onUpdate({cluster, path: item.path})\n                                    }\n                                >\n                                    {item.title}\n                                </GravityBreadcrumbs.Item>\n                            );\n                        })}\n                    </GravityBreadcrumbs>\n                    <Button\n                        view=\"flat\"\n                        className={block('edit-button')}\n                        onClick={() => setEdit(true)}\n                        aria-label={i18n('action_edit-path')}\n                    >\n                        <Icon data={PencilIcon} size={16} />\n                    </Button>\n                </Flex>\n            ) : null}\n        </Flex>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/Breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,25 @@
+.qp-breadcrumbs {
+    $self: &;
+
+    min-width: 0;
+
+    &__list {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__path-editor {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__edit-button {
+        display: none;
+    }
+
+    &:hover {
+        #{$self}__edit-button {
+            display: block;
+        }
+    }
+}

package/build/esm/components/Breadcrumbs/helpers/parsePathSegments.d.ts

@@ -0,0 +1,5 @@
+export type BreadcrumbSegment = {
+    path: string;
+    title: string;
+};
+export declare function parsePathSegments(path: string | undefined): BreadcrumbSegment[];

package/build/esm/components/Breadcrumbs/helpers/parsePathSegments.js

@@ -0,0 +1,20 @@
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.trim.js";
+export function parsePathSegments(path) {
+  if (!path) return [];
+  var parts = path.trim().split('/').filter(Boolean);
+  var pathAcc = '';
+  return parts.map(function (segment) {
+    pathAcc += "/".concat(segment);
+    return {
+      path: pathAcc,
+      title: segment
+    };
+  });
+}
+// #sourceMappingURL=parsePathSegments.js.map

package/build/esm/components/Breadcrumbs/helpers/parsePathSegments.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parsePathSegments","path","parts","trim","split","filter","Boolean","pathAcc","map","segment","concat","title"],"sources":["parsePathSegments.ts"],"sourcesContent":["export type BreadcrumbSegment = {\n    path: string;\n    title: string;\n};\n\nexport function parsePathSegments(path: string | undefined): BreadcrumbSegment[] {\n    if (!path) return [];\n\n    const parts = path.trim().split('/').filter(Boolean);\n\n    let pathAcc = '';\n    return parts.map((segment) => {\n        pathAcc += `/${segment}`;\n        return {path: pathAcc, title: segment};\n    });\n}\n"],"mappings":";;;;;;;AAKA,OAAO,SAASA,iBAAiBA,CAACC,IAAwB,EAAuB;EAC7E,IAAI,CAACA,IAAI,EAAE,OAAO,EAAE;EAEpB,IAAMC,KAAK,GAAGD,IAAI,CAACE,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC;EAEpD,IAAIC,OAAO,GAAG,EAAE;EAChB,OAAOL,KAAK,CAACM,GAAG,CAAC,UAACC,OAAO,EAAK;IAC1BF,OAAO,QAAAG,MAAA,CAAQD,OAAO,CAAE;IACxB,OAAO;MAACR,IAAI,EAAEM,OAAO;MAAEI,KAAK,EAAEF;IAAO,CAAC;EAC1C,CAAC,CAAC;AACN","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    en: {
+        action_reset: string;
+        "action_edit-path": string;
+    };
+    ru: {
+        action_reset: string;
+        "action_edit-path": string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+{
+  "action_reset": "Reset navigation",
+  "action_edit-path": "Edit path"
+}

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

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

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

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

package/build/esm/components/Breadcrumbs/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:breadcrumbs', dicts);\n"],"mappings":"AAAA,SAAQA,aAAa;AAErB,OAAOC,KAAK;AAEZ,eAAeD,aAAa,CAAC,gBAAgB,EAAEC,KAAK,CAAC","ignoreList":[]}

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>>;