@retailcrm/datalens-ui 0.0.0

package/Body.js

@@ -0,0 +1,2328 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { DEFAULT_GROUP, MenuItems } from "@gravity-ui/dashkit/helpers";
+import { Xmark, ChevronsUp, CopyPlus, Pin, BookOpen, Gear, Globe, LayoutTabs, PinSlash, ChevronsDown, ChevronsLeft, ChevronsRight, SquareCheck, Square } from "@gravity-ui/icons";
+import { Icon, Button, Sheet, DropdownMenu } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import debounce from "lodash/debounce";
+import isEqual from "lodash/isEqual";
+import { useDispatch, useSelector, connect } from "react-redux";
+import { useLocation, Link, useHistory, withRouter } from "react-router-dom";
+import { compose } from "recompose";
+import { eg as SCR_USER_AGENT_HEADER_VALUE, v as ActionPanelQA, cA as TableOfContentQa, eV as DatalensHeaderQa, eW as FixedHeaderQa, l as I18n, r as registry, u as DashTabItemType, j as i18n$5, D as DL, eX as DashTabsQA, eY as DASH_INFO_HEADER, eZ as UPDATE_STATE_DEBOUNCE_TIME, bo as DashKitOverlayMenuQa, b3 as ControlQA, aT as FOCUSED_WIDGET_PARAM_NAME, F as Feature, ag as COPIED_WIDGET_STORAGE_KEY, e1 as DashBodyQa, e_ as DashEntryQa, d as EntryScope, e$ as LOADED_DASH_CLASS, f0 as SCROLL_TITLE_DEBOUNCE_TIME } from "./components/AccessRights.js";
+import Highcharts from "highcharts";
+import moment from "moment";
+import PropTypes from "prop-types";
+import { useDrag, DndProvider } from "react-dnd";
+import HTML5Backend from "react-dnd-html5-backend";
+import { hD as clamp, bB as i18n$4, bM as DIALOG_TYPE, hE as DashErrorCode, cC as toggleTableOfContent, de as setPageTab, hF as appendSearchQuery, hG as getHashStateParam, dt as dispatchResize, hH as memoizedGetLocalTabs, hI as selectHashStates, as as selectTabId, cL as selectTabs, hJ as selectShowTableOfContent, ak as selectCurrentTabId, hy as isEmbeddedEntry, hK as selectCurrentTab, cF as getGroupedItems, cy as selectSettings, e as selectDashWorkbookId, bl as isEmbeddedMode, hL as setDashKitRef, cx as selectEntryId, hM as selectTabHashState, hN as setStateHashId, hO as setHashState, k as isItemGlobal, hP as setCurrentTabData, hQ as removeGlobalItems, db as selectDashEntry, hR as getPreparedCopyItemOptions, bo as selectSkipReload, cU as selectDashDescription, d3 as selectDashShowOpenedDescription, d9 as hasTableOfContent, d8 as canEdit, hS as setWidgetCurrentTab, hT as updateTabsWithGlobalState, aY as getPastedWidgetData, hU as selectDashError, c0 as Mode, hV as selectLastModifiedItemId, dg as setErrorMode, hW as getLayoutParentId, cH as getLayoutMap } from "./components/ControlComponents.js";
+import { a as selectAsideHeaderIsCompact, cn as useShallowEqualSelector, u as useRouter, g as getSdk, d as showToast, i as isEnabledFeature, co as useLocalStorageFallback, V as useEffectOnce, U as Utils, l as logger } from "./components/ActionPanel.js";
+import { k as DEFAULT_DASH_MARGINS, w as MIN_AUTO_HEIGHT_PX, x as MIN_AUTO_HEIGHT_ROWS, F as FIXED_GROUP_HEADER_ID, a as FIXED_GROUP_CONTAINER_ID, y as getDashKitMenu, z as getConfiguredDashKit, W as WidgetContextProvider } from "./components/DashKit.js";
+import { DashKit, DashKitDnDWrapper, ActionPanel } from "@gravity-ui/dashkit";
+import { s as selectUserSettings, g as getIsAsideHeaderEnabled } from "./components/AsideHeaderAdapter.js";
+import { b as bEditPanelItem } from "./main.js";
+import { L as Loader } from "./components/DropdownNavigation.js";
+import { cC as Description, cD as openDialog, cE as openItemDialogAndSetData } from "./pages/DashPage.js";
+import { V as ViewError } from "./components/ViewError.js";
+import throttle from "lodash/throttle";
+import { M as MarkdownHelpPopover } from "./components/MarkdownHelpPopover.js";
+import { D as DataLensTabs } from "./components/Tabs.js";
+import { M as MOBILE_SIZE } from "./components/CollectionFilters.js";
+import { P as PlaceholderIllustration } from "./components/PlaceholderIllustration.js";
+import { createPortal } from "react-dom";
+import { F as FloatMenu } from "./components/FloatMenu.js";
+import { o as openDialogDefault } from "./components/DialogDefault.js";
+import { a as openDialogRelations } from "./components/DialogRelations.js";
+import { b as EntryDialogues } from "./components/EntryDialogues.js";
+const b$c = block("draggable-modal");
+function draggableModalHOC(Component) {
+  return ({ draggableModalTitle, draggableModalCloseHandler, ...props }) => {
+    const elementRef = React__default.useRef(null);
+    const [coords, setCoords] = React__default.useState({
+      top: 0,
+      right: 0
+    });
+    const [{ isDragging }, drag, preview] = useDrag({
+      item: { type: "draggable-modal" },
+      end: (item, monitor) => {
+        const delta = monitor.getDifferenceFromInitialOffset();
+        const { width, height } = elementRef.current.getBoundingClientRect();
+        const top = clamp(coords.top + delta.y, 0, window.innerHeight - height);
+        const right = clamp(coords.right - delta.x, 0, window.innerWidth - width);
+        setCoords({ top, right });
+      },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging()
+      })
+    });
+    const opacity = isDragging ? 0 : 1;
+    return /* @__PURE__ */ React__default.createElement("div", { ref: preview, className: b$c(), style: { ...coords, opacity } }, /* @__PURE__ */ React__default.createElement("div", { ref: elementRef }, /* @__PURE__ */ React__default.createElement("div", { ref: drag, className: b$c("draggable-node") }, /* @__PURE__ */ React__default.createElement("div", null, draggableModalTitle), /* @__PURE__ */ React__default.createElement("div", { className: b$c("close-icon"), onClick: draggableModalCloseHandler }, /* @__PURE__ */ React__default.createElement(Icon, { data: Xmark, size: 16 }))), /* @__PURE__ */ React__default.createElement(Component, { ...props })));
+  };
+}
+const Attach = ({ onChange }) => {
+  const inputFile = React__default.useRef(null);
+  const onButtonClick = () => {
+    if (inputFile.current) {
+      inputFile.current.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        style: { display: "none" },
+        id: "file",
+        type: "file",
+        ref: inputFile,
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { view: "action", size: "l", onClick: onButtonClick, children: i18n$4("chartkit", "label-load-from-file") })
+  ] });
+};
+const b$b = block("color-item");
+class ColorItem extends React__default.PureComponent {
+  static propTypes = {
+    handleColorChange: PropTypes.func.isRequired,
+    color: PropTypes.string.isRequired,
+    itemIndex: PropTypes.number.isRequired
+  };
+  inputRef = React__default.createRef();
+  onColorChange = (event) => {
+    this.props.handleColorChange(event.target.value, this.props.itemIndex);
+  };
+  onPreviewClick = () => {
+    this.inputRef.current.click();
+  };
+  render() {
+    const { color, itemIndex } = this.props;
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$b() }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b$b("preview"),
+        style: { backgroundColor: color },
+        onClick: this.onPreviewClick
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "input",
+        {
+          ref: this.inputRef,
+          className: b$b("input"),
+          id: itemIndex,
+          type: "color",
+          value: color,
+          onChange: this.onColorChange
+        }
+      )
+    ), /* @__PURE__ */ React__default.createElement("div", { className: b$b("code") }, color));
+  }
+}
+const b$a = block("palette-settings");
+function PaletteSettings({ colors, onColorChange, saveFile, loadFile }) {
+  const middleIndex = Math.floor(colors.length / 2);
+  return /* @__PURE__ */ React__default.createElement("div", { className: b$a() }, /* @__PURE__ */ React__default.createElement("div", { className: b$a("container") }, /* @__PURE__ */ React__default.createElement("div", { className: b$a("colors-list") }, /* @__PURE__ */ React__default.createElement("div", null, colors.slice(0, middleIndex).map((color, index) => /* @__PURE__ */ React__default.createElement(
+    ColorItem,
+    {
+      key: index,
+      color,
+      handleColorChange: onColorChange,
+      itemIndex: index
+    }
+  ))), /* @__PURE__ */ React__default.createElement("div", null, colors.slice(middleIndex).map((color, index) => /* @__PURE__ */ React__default.createElement(
+    ColorItem,
+    {
+      key: middleIndex + index,
+      color,
+      handleColorChange: onColorChange,
+      itemIndex: middleIndex + index
+    }
+  ))))), /* @__PURE__ */ React__default.createElement("div", { className: b$a("actions") }, /* @__PURE__ */ React__default.createElement("div", { className: b$a("action") }, /* @__PURE__ */ React__default.createElement(Button, { view: "action", size: "l", onClick: saveFile }, "Save to file")), /* @__PURE__ */ React__default.createElement("div", { className: b$a("action") }, /* @__PURE__ */ React__default.createElement(Attach, { onChange: loadFile }))));
+}
+PaletteSettings.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onColorChange: PropTypes.func.isRequired,
+  saveFile: PropTypes.func.isRequired,
+  loadFile: PropTypes.func.isRequired
+};
+var PaletteSettings_default = PaletteSettings;
+const DraggablePaletteSettings = draggableModalHOC(PaletteSettings_default);
+class PaletteEditor extends React__default.PureComponent {
+  static propTypes = {
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+  static defaultProps = {
+    colors: Highcharts.getOptions?.().colors || []
+  };
+  state = {
+    showColorsEditor: false,
+    colors: this.props.colors
+  };
+  componentDidMount() {
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  }
+  onKeyDown = (event) => {
+    if (event.keyCode === 86 && event.metaKey && event.altKey) {
+      this.setState({ showColorsEditor: !this.state.showColorsEditor });
+      return;
+    }
+    if (event.keyCode === 27 && this.state.showColorsEditor) {
+      this.setState({ showColorsEditor: false });
+      return;
+    }
+  };
+  applyColorScheme = debounce(() => {
+    Highcharts.setOptions({ colors: this.state.colors });
+    Highcharts.charts.forEach((chart) => chart && chart.update({ colors: this.state.colors }));
+  }, 500);
+  onModalClose = () => {
+    this.setState({ showColorsEditor: false });
+  };
+  onColorChange = (color, index) => {
+    const newColors = [
+      ...this.state.colors.slice(0, index),
+      color,
+      ...this.state.colors.slice(index + 1)
+    ];
+    this.setState({ colors: newColors }, this.applyColorScheme);
+  };
+  saveFile = () => {
+    const a = document.createElement("a");
+    const json = JSON.stringify({ colors: this.state.colors });
+    a.setAttribute("href", `data:text/plain;charset=utf-8,${encodeURIComponent(json)}`);
+    a.setAttribute("download", `color_palette_${moment().format("YYYY-MM-DD_HH:mm")}.json`);
+    a.click();
+  };
+  loadFile = (event) => {
+    if (typeof window.FileReader !== "function") {
+      alert(
+        "Your browser does not support the FileReader API, it is not possible to read the file."
+      );
+    }
+    const input = event.target;
+    if (!input.files[0]) {
+      return void 0;
+    }
+    const file = input.files[0];
+    const fileReader = new FileReader();
+    fileReader.onload = (onloadEvent) => {
+      this.setState(
+        { colors: JSON.parse(onloadEvent.target.result).colors },
+        this.applyColorScheme
+      );
+    };
+    fileReader.readAsText(file);
+  };
+  render() {
+    const { colors } = this.state;
+    return this.state.showColorsEditor && /* @__PURE__ */ React__default.createElement(DndProvider, { backend: HTML5Backend }, /* @__PURE__ */ React__default.createElement(
+      DraggablePaletteSettings,
+      {
+        draggableModalTitle: i18n$4("chartkit", "label-palette-editor"),
+        draggableModalCloseHandler: this.onModalClose,
+        colors,
+        onColorChange: this.onColorChange,
+        loadFile: this.loadFile,
+        saveFile: this.saveFile
+      }
+    ));
+  }
+}
+const dispatchDashLoadedEvent = () => {
+  if (navigator.userAgent === SCR_USER_AGENT_HEADER_VALUE) {
+    const customEvent = new CustomEvent("dash.done", { bubbles: true });
+    document.body.dispatchEvent(customEvent);
+  }
+};
+const calculateRowHeight = (props) => {
+  if (props.margin && props.margin[1] !== DEFAULT_DASH_MARGINS[1]) {
+    props.rowHeight = (MIN_AUTO_HEIGHT_PX - props.margin[1] * (MIN_AUTO_HEIGHT_ROWS - 1)) / MIN_AUTO_HEIGHT_ROWS;
+  }
+  return props;
+};
+const getCustomizedProperties = (props, extendedProps = {}) => calculateRowHeight({
+  ...props,
+  ...extendedProps,
+  resizeHandles: ["sw", "se"]
+});
+const ELEMENT_MARGIN_OFFSET = 5;
+const OFFSETS_QA = [
+  ActionPanelQA.ActionPanel,
+  TableOfContentQa.MobileTableOfContent,
+  DatalensHeaderQa.DesktopContainer
+];
+const queryByQA = (qa) => document.querySelector(`[data-qa="${qa}"]`);
+const scrollIntoView = (scrollElement, lastTop) => {
+  if (!scrollElement) {
+    return null;
+  }
+  const element = typeof scrollElement === "string" ? document.getElementById(scrollElement) : scrollElement;
+  if (!element) {
+    return null;
+  }
+  const currentTop = element.getBoundingClientRect().top;
+  if (lastTop && currentTop === lastTop) {
+    return lastTop;
+  }
+  const offsets = [];
+  const fixedWrapper = queryByQA(FixedHeaderQa.Wrapper);
+  if (!fixedWrapper?.contains(element)) {
+    offsets.push(
+      fixedWrapper?.clientHeight,
+      ...OFFSETS_QA.map((qa) => queryByQA(qa)?.clientHeight)
+    );
+  }
+  const offset = offsets.reduce((acc, cur) => acc + (cur || 0), 0);
+  element.style.scrollMarginTop = offset + ELEMENT_MARGIN_OFFSET + "px";
+  element.scrollIntoView();
+  return currentTop;
+};
+const b$9 = block("dash-fixed-header");
+const i18n$3 = I18n.keyset("dash.empty-state.view");
+const calculateOffset = (dashBodyEl) => {
+  const pageBodyY = document.body.getBoundingClientRect().y;
+  const dashBodyY = dashBodyEl?.getBoundingClientRect()?.y ?? pageBodyY;
+  return dashBodyY - pageBodyY;
+};
+const EmptyPlaceholder = ({
+  content,
+  text,
+  mod
+}) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+  content,
+  /* @__PURE__ */ jsx("div", { className: b$9("empty", mod), children: text })
+] });
+const useFixedHeaderRef = (rootRef, topOffset = 0, scrollableContainer = window) => {
+  const [isFixed, setIsFixed] = React__default.useState(false);
+  const [leftOffset, setLeftOffset] = React__default.useState(0);
+  const [width, setWidth] = React__default.useState(0);
+  React__default.useLayoutEffect(() => {
+    const handler = () => {
+      const rect = rootRef.current?.getBoundingClientRect();
+      setIsFixed(rect ? rect.top <= topOffset : false);
+      setLeftOffset(rect?.left || 0);
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = rootRef.current?.getBoundingClientRect();
+      setWidth(rect?.width ? rect.width : "100%");
+      setLeftOffset(rect?.left || 0);
+    });
+    scrollableContainer?.addEventListener("scroll", handler);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+    setTimeout(handler);
+    return () => {
+      scrollableContainer?.removeEventListener("scroll", handler);
+      resizeObserver.disconnect();
+    };
+  }, [rootRef, topOffset, scrollableContainer]);
+  return { isFixed, leftOffset, width };
+};
+const FixedHeaderControls = ({
+  isEmpty,
+  isContainerGroupEmpty,
+  editMode,
+  controls,
+  children: externalChildren
+}) => {
+  const children = !editMode && isEmpty ? null : externalChildren;
+  const content = isEmpty && editMode ? /* @__PURE__ */ jsx(EmptyPlaceholder, { content: children, text: i18n$3("label_empty-fixed-header") }) : children;
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: b$9("controls", {
+          "edit-mode": editMode,
+          hidden: isEmpty && (!editMode || editMode && isContainerGroupEmpty)
+        }),
+        "data-qa": FixedHeaderQa.Controls,
+        children: content
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: b$9("controls-settings"), children: /* @__PURE__ */ jsx("div", { className: b$9("controls-settings-wrapper"), children: controls }) })
+  ] });
+};
+const FixedHeaderContainer = ({
+  editMode,
+  isEmpty,
+  isControlsGroupEmpty,
+  children
+}) => {
+  const content = isEmpty && editMode ? /* @__PURE__ */ jsx(
+    EmptyPlaceholder,
+    {
+      content: children,
+      text: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { size: 16, data: ChevronsUp }),
+        i18n$3("label_empty-fixed-content")
+      ] }),
+      mod: "with-offset"
+    }
+  ) : children;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: b$9("container", {
+        "edit-mode": editMode,
+        hidden: isEmpty && (!editMode || editMode && isControlsGroupEmpty)
+      }),
+      "data-qa": FixedHeaderQa.Container,
+      children: content
+    }
+  );
+};
+function FixedHeaderWrapper({
+  dashBodyEl,
+  controlsRef,
+  containerRef,
+  editMode,
+  isCollapsed,
+  isControlsGroupEmpty,
+  isContainerGroupEmpty,
+  isSplitPaneContainer,
+  className
+}) {
+  const rootRef = React__default.useRef(null);
+  const wrapperRef = React__default.useRef(null);
+  const scrollableContainerRef = React__default.useRef(null);
+  const [containerHeight, setContainerHeight] = React__default.useState("auto");
+  const [scrollableContainerOverflow, setScrollableContainerOverflow] = React__default.useState("auto");
+  const topOffset = calculateOffset(dashBodyEl);
+  const { isFixed, leftOffset, width } = useFixedHeaderRef(
+    rootRef,
+    topOffset,
+    isSplitPaneContainer ? dashBodyEl : void 0
+  );
+  const style = isFixed && !editMode ? { left: leftOffset, top: topOffset, width } : {};
+  React__default.useEffect(() => {
+    const observer = new ResizeObserver(([el]) => {
+      if (el) {
+        const { height } = el.contentRect;
+        setContainerHeight(height);
+      }
+    });
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [wrapperRef, topOffset]);
+  React__default.useEffect(() => {
+    if (scrollableContainerRef.current) {
+      const observer = new ResizeObserver(([entity]) => {
+        if (entity) {
+          const { target } = entity;
+          setScrollableContainerOverflow(
+            target.scrollHeight > target.clientHeight ? "auto" : "visible"
+          );
+        }
+      });
+      observer.observe(scrollableContainerRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [scrollableContainerRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: b$9(
+        {
+          "no-content": isControlsGroupEmpty && (isContainerGroupEmpty || isCollapsed),
+          "edit-mode": editMode,
+          collapsed: isCollapsed
+        },
+        className
+      ),
+      ref: rootRef,
+      style: {
+        height: isFixed ? containerHeight : "auto"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: b$9("wrapper", {
+            fixed: isFixed && !editMode
+          }),
+          style,
+          ref: wrapperRef,
+          "data-qa": FixedHeaderQa.Wrapper,
+          children: /* @__PURE__ */ jsx("div", { className: b$9("content"), children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: b$9("scrollable-container"),
+              ref: scrollableContainerRef,
+              style: { overflow: scrollableContainerOverflow },
+              children: [
+                /* @__PURE__ */ jsx("div", { ref: controlsRef, className: b$9("controls-placeholder") }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: containerRef,
+                    className: b$9("container-placeholder", {
+                      collapsed: isCollapsed
+                    })
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+const TYPES_TO_DIALOGS_MAP = {
+  [DashTabItemType.Widget]: DIALOG_TYPE.WIDGET,
+  [DashTabItemType.GroupControl]: DIALOG_TYPE.GROUP_CONTROL,
+  [DashTabItemType.Control]: DIALOG_TYPE.CONTROL,
+  [DashTabItemType.Text]: DIALOG_TYPE.TEXT,
+  [DashTabItemType.Title]: DIALOG_TYPE.TITLE,
+  [DashTabItemType.Image]: DIALOG_TYPE.IMAGE
+};
+const ITEM_PASTE_ITEM_ID = "paste";
+const BASE_ITEMS_TO_PASTE = [
+  DashTabItemType.Widget,
+  DashTabItemType.GroupControl,
+  DashTabItemType.Control,
+  DashTabItemType.Text,
+  DashTabItemType.Title
+];
+const getActionPanelItems = ({
+  copiedData,
+  onPasteItem,
+  openDialog: openDialog2,
+  filterItem,
+  userSettings,
+  scope,
+  allowedPasteItems = BASE_ITEMS_TO_PASTE
+}) => {
+  const { getBasicActionPanelItems } = registry.common.functions.getAll();
+  const items = getBasicActionPanelItems({ userSettings, scope });
+  const enablePaste = copiedData && allowedPasteItems.includes(copiedData.type);
+  if (enablePaste) {
+    items.push({
+      id: ITEM_PASTE_ITEM_ID,
+      icon: /* @__PURE__ */ jsx(Icon, { data: CopyPlus }),
+      title: i18n$5("dash.main.view", "button_edit-panel-paste"),
+      className: bEditPanelItem(),
+      onClick: () => {
+        onPasteItem(copiedData);
+      },
+      dragProps: {
+        type: copiedData.type,
+        layout: copiedData.layout,
+        extra: copiedData
+      }
+    });
+  }
+  return items.reduce((result, item) => {
+    if (filterItem && filterItem(item)) {
+      return result;
+    } else {
+      if (item.id !== ITEM_PASTE_ITEM_ID) {
+        item.onClick = () => openDialog2(
+          TYPES_TO_DIALOGS_MAP[item.dragProps?.type]
+        );
+      }
+      return [...result, item];
+    }
+  }, []);
+};
+const i18n$2 = I18n.keyset("dash.error.view");
+const DashError = ({
+  error,
+  onRetry,
+  hideDetails
+}) => {
+  const message = error && "code" in error && error.code === DashErrorCode.NOT_FOUND ? i18n$2("label_error-404-message") : "";
+  return /* @__PURE__ */ jsx(ViewError, { description: message, error, retry: onRetry, hideDetails });
+};
+const findScrollableElement = (element) => {
+  if (!element || element === document.documentElement) {
+    return null;
+  }
+  if (element.scrollTop > 0) {
+    return element;
+  }
+  return findScrollableElement(element.parentElement);
+};
+const getUpdatedOffsets = (containerRef) => {
+  const containerEl = containerRef.current;
+  if (!containerEl) {
+    return null;
+  }
+  const containerRect = containerEl.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+  const leftOffset = `${containerRect.left}px`;
+  const scrollableElement = findScrollableElement(containerEl);
+  const topOffset = `${containerRect.top + (scrollableElement?.scrollTop ?? document.documentElement.scrollTop)}px`;
+  const bottomOffset = `${Math.max(0, windowHeight - containerRect.bottom)}px`;
+  return { topOffset, bottomOffset, leftOffset };
+};
+const i18n$1 = I18n.keyset("dash.table-of-content.view");
+const b$8 = block("table-of-content");
+const DISPATCH_RESIZE_TIMEOUT = 200;
+const THROTTLE_TIMEOUT = 100;
+const getHash = ({
+  itemTitle,
+  hash,
+  disableHashNavigation
+}) => {
+  if (disableHashNavigation) {
+    return hash;
+  }
+  return itemTitle ? `#${encodeURIComponent(itemTitle)}` : "";
+};
+const TableOfContent = React__default.memo(
+  ({
+    disableHashNavigation,
+    onItemClick
+  }) => {
+    const dispatch = useDispatch();
+    const location2 = useLocation();
+    const isAsideHeaderCompact = useSelector(selectAsideHeaderIsCompact);
+    const containerRef = React__default.useRef(null);
+    const { opened, tabs, currentTabId, hashStates } = useShallowEqualSelector(selectState);
+    const [offsets, setOffsets] = React__default.useState({ top: "0px", bottom: "0px", left: "0px" });
+    const isSelectedTab = React__default.useCallback(
+      (tabId) => tabId === currentTabId,
+      [currentTabId]
+    );
+    const handleToggleTableOfContent = React__default.useCallback(() => {
+      dispatch(toggleTableOfContent());
+    }, [dispatch]);
+    const handleTabClick = React__default.useCallback(
+      (tabId) => () => {
+        dispatch(setPageTab(tabId));
+        if (DL.IS_MOBILE) {
+          handleToggleTableOfContent();
+        }
+      },
+      [dispatch, handleToggleTableOfContent]
+    );
+    const handleItemClick = React__default.useCallback(
+      (tabId, itemTitle) => () => {
+        if (!isSelectedTab(tabId)) {
+          dispatch(setPageTab(tabId));
+        }
+        if (DL.IS_MOBILE) {
+          handleToggleTableOfContent();
+        }
+        onItemClick(itemTitle);
+      },
+      [isSelectedTab, onItemClick, dispatch, handleToggleTableOfContent]
+    );
+    const handleSheetClose = () => {
+      if (opened) {
+        handleToggleTableOfContent();
+      }
+    };
+    const getLinkTo = React__default.useCallback(
+      (tabId, itemTitle) => ({
+        ...location2,
+        search: itemTitle && isSelectedTab(tabId) ? location2.search : appendSearchQuery(location2.search, {
+          tab: tabId,
+          state: getHashStateParam(hashStates, tabId)
+        }),
+        hash: getHash({ itemTitle, hash: location2.hash, disableHashNavigation })
+      }),
+      [disableHashNavigation, hashStates, isSelectedTab, location2]
+    );
+    const setUpdatedOffsets = React__default.useCallback(() => {
+      const updatedOffsets = getUpdatedOffsets(containerRef);
+      if (!updatedOffsets) {
+        return;
+      }
+      const { topOffset, bottomOffset, leftOffset } = updatedOffsets;
+      setOffsets((state) => {
+        if (state.top !== topOffset || state.bottom !== bottomOffset || state.left !== leftOffset) {
+          return { top: topOffset, bottom: bottomOffset, left: leftOffset };
+        }
+        return state;
+      });
+    }, []);
+    React__default.useEffect(() => {
+      dispatchResize(DISPATCH_RESIZE_TIMEOUT);
+    }, [opened]);
+    React__default.useEffect(() => {
+      if (DL.IS_MOBILE || !opened) {
+        return;
+      }
+      const handler = throttle(() => {
+        setUpdatedOffsets();
+      }, THROTTLE_TIMEOUT);
+      window.addEventListener("scroll", handler);
+      handler();
+      const resizeObserver = new ResizeObserver(() => {
+        handler();
+      });
+      if (containerRef?.current) {
+        resizeObserver.observe(containerRef?.current || void 0);
+      }
+      return () => {
+        window.removeEventListener("scroll", handler);
+        resizeObserver.disconnect();
+      };
+    }, [opened, setUpdatedOffsets]);
+    React__default.useEffect(() => {
+      requestAnimationFrame(setUpdatedOffsets);
+    }, [isAsideHeaderCompact, setUpdatedOffsets]);
+    const localTabs = memoizedGetLocalTabs(tabs);
+    const tabsItems = React__default.useMemo(
+      () => localTabs.map((tab) => /* @__PURE__ */ jsxs("div", { className: b$8("tab-item"), children: [
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: getLinkTo(tab.id),
+            className: b$8("title", { selected: isSelectedTab(tab.id) }),
+            onClick: handleTabClick(tab.id),
+            children: tab.title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: b$8("items"), children: tab.items.map((item) => /* @__PURE__ */ jsxs(
+          Link,
+          {
+            to: getLinkTo(tab.id, item.title),
+            className: b$8("title", { item: true }),
+            onClick: handleItemClick(tab.id, item.title),
+            children: [
+              item.title,
+              item.hint && /* @__PURE__ */ jsx(
+                MarkdownHelpPopover,
+                {
+                  className: b$8("hint"),
+                  markdown: item.hint,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                  }
+                }
+              )
+            ]
+          },
+          item.id
+        )) })
+      ] }, tab.id)),
+      [getLinkTo, handleTabClick, handleItemClick, isSelectedTab, localTabs]
+    );
+    if (localTabs.length === 1 && !localTabs[0].items.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(React__default.Fragment, { children: DL.IS_MOBILE ? /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        title: i18n$1("label_table-of-content"),
+        visible: opened,
+        id: "dash-table-of-content",
+        allowHideOnContentScroll: false,
+        onClose: handleSheetClose,
+        className: b$8("sheet"),
+        children: /* @__PURE__ */ jsx("div", { className: b$8("tabs"), children: tabsItems })
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: b$8(),
+        ref: containerRef,
+        "data-qa": TableOfContentQa.TableOfContent,
+        children: /* @__PURE__ */ jsx("div", { className: b$8("wrapper", { opened }), children: /* @__PURE__ */ jsxs("div", { className: b$8("sidebar", { opened }), style: offsets, children: [
+          /* @__PURE__ */ jsxs("div", { className: b$8("header"), children: [
+            /* @__PURE__ */ jsx("span", { className: b$8("header-title"), children: i18n$1("label_table-of-content") }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: b$8("header-close", null),
+                "data-qa": TableOfContentQa.CloseBtn,
+                onClick: handleToggleTableOfContent,
+                children: /* @__PURE__ */ jsx(Icon, { data: Xmark, width: "20" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: b$8("tabs"), children: tabsItems })
+        ] }) })
+      }
+    ) });
+  }
+);
+function selectState(state) {
+  return {
+    opened: selectShowTableOfContent(state),
+    tabs: selectTabs(state),
+    currentTabId: selectTabId(state),
+    hashStates: selectHashStates(state)
+  };
+}
+TableOfContent.displayName = "TableOfContent";
+const b$7 = block("dash-tabs");
+const TABS_VIRTUALIZATION_SELECT_LIMIT = 70;
+function TabsComponent(props) {
+  const router = useRouter();
+  const location2 = useLocation();
+  const size = DL.IS_MOBILE ? MOBILE_SIZE.TABS : "l";
+  return props.tabs.length > 1 ? /* @__PURE__ */ jsx("div", { className: b$7(null, props.className), "data-qa": DashTabsQA.Root, children: /* @__PURE__ */ jsx(
+    DataLensTabs,
+    {
+      size,
+      activeTab: props.currentTabId || void 0,
+      items: props.tabs.map(({ id, title }) => ({ id, title })),
+      onSelectTab: (tabId, event) => {
+        if (event && event.metaKey) {
+          return;
+        }
+        props.setPageTab(tabId);
+        router.push({
+          search: appendSearchQuery(location2.search, {
+            tab: tabId,
+            state: getHashStateParam(props.hashStates, tabId)
+          }),
+          hash: isEmbeddedEntry() ? location2.hash : ""
+        });
+      },
+      moreControlProps: { virtualizationThreshold: TABS_VIRTUALIZATION_SELECT_LIMIT }
+    }
+  ) }) : null;
+}
+const mapStateToProps$1 = (state) => ({
+  tabs: selectTabs(state),
+  tabId: selectTabId(state),
+  currentTabId: selectCurrentTabId(state),
+  hashStates: selectHashStates(state)
+});
+const mapDispatchToProps$1 = {
+  setPageTab
+};
+const Tabs = connect(mapStateToProps$1, mapDispatchToProps$1)(TabsComponent);
+const b$6 = block("dash-empty-state");
+const i18n = I18n.keyset("dash.empty-state.view");
+const EmptyState = ({
+  isEditMode,
+  canEdit: canEdit2,
+  isTabView,
+  onEditClick,
+  isEditModeLoading
+}) => {
+  React__default.useEffect(() => {
+    dispatchDashLoadedEvent();
+  }, []);
+  const showActions = !DL.IS_MOBILE && canEdit2;
+  const title = isTabView ? i18n("label_empty-tab") : i18n("label_empty-dash");
+  const getDescription = () => {
+    if (DL.IS_MOBILE && canEdit2) {
+      return isTabView ? i18n("label_mobile-tab") : i18n("label_mobile-dash");
+    }
+    return canEdit2 ? i18n("label_with-edit-rights") : i18n("label_without-edit-rights");
+  };
+  const viewControl = !isEditMode && /* @__PURE__ */ jsx(
+    Button,
+    {
+      view: "action",
+      size: "l",
+      loading: isEditModeLoading,
+      onClick: () => onEditClick?.(),
+      children: i18n("button_edit")
+    }
+  ) || null;
+  const renderAction = () => {
+    return /* @__PURE__ */ jsx(React__default.Fragment, { children: showActions && /* @__PURE__ */ jsx("div", { className: b$6("action"), children: viewControl }) });
+  };
+  return /* @__PURE__ */ jsx("div", { className: b$6(), children: /* @__PURE__ */ jsx(
+    PlaceholderIllustration,
+    {
+      renderAction,
+      title,
+      description: getDescription(),
+      name: "template"
+    }
+  ) });
+};
+const b$5 = block("dash-fixed-header-mobile");
+const DASHKIT_MOBILE_LAYOUT_CLASSNAME = "dashkit-mobile-layout";
+function FixedHeaderMobile({
+  fixedContentInitiallyOpened,
+  fixedHeaderControlsRef,
+  fixedHeaderContainerRef,
+  fixedContentWidgetFocused
+}) {
+  const [sheetVisible, setSheetVisible] = React__default.useState(fixedContentInitiallyOpened ?? false);
+  const toggleSheet = () => {
+    setSheetVisible((prevSheetVisible) => !prevSheetVisible);
+  };
+  const contentRef = React__default.useRef(null);
+  const [indicator, setIndicator] = React__default.useState();
+  const setIndicatorRef = React__default.useCallback((el) => {
+    setIndicator(el);
+  }, []);
+  React__default.useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver(([el]) => {
+      const rect = el.contentRect;
+      if (rect?.height) {
+        contentRef.current?.style.setProperty(
+          "--fullscreen-widget-transform-y",
+          `${rect.height - window.innerHeight}px`
+        );
+      }
+    });
+    if (indicator) {
+      resizeObserver.observe(indicator);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, indicator]);
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: toggleSheet, view: "flat", children: /* @__PURE__ */ jsx(Icon, { size: 24, data: Pin }) }),
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        className: b$5(null, DASHKIT_MOBILE_LAYOUT_CLASSNAME),
+        visible: sheetVisible,
+        alwaysFullHeight: fixedContentWidgetFocused,
+        allowHideOnContentScroll: true,
+        onClose: toggleSheet,
+        children: /* @__PURE__ */ jsxs("div", { className: b$5("content"), ref: contentRef, children: [
+          /* @__PURE__ */ jsx("div", { className: b$5("indicator"), ref: setIndicatorRef }),
+          /* @__PURE__ */ jsx("div", { ref: fixedHeaderControlsRef, className: b$5("controls-placeholder") }),
+          /* @__PURE__ */ jsx("div", { ref: fixedHeaderContainerRef, className: b$5("container-placeholder") })
+        ] })
+      }
+    )
+  ] });
+}
+function MobileFloatMenu({
+  entryId,
+  hasFixedContent: showFixedHeaderButton,
+  dashDescription,
+  showOpenedDescription,
+  hasTableOfContent: showTocButton,
+  toggleTableOfContent: toggleToc,
+  fixedContentInitiallyOpened,
+  fixedContentWidgetFocused,
+  fixedHeaderControlsRef,
+  fixedHeaderContainerRef,
+  dashEl
+}) {
+  const { ShareButton } = registry.common.components.getAll();
+  const showDescriptionButton = Boolean(dashDescription);
+  const actions = [
+    showTocButton && /* @__PURE__ */ jsx(Button, { view: "flat", onClick: () => toggleToc(), children: /* @__PURE__ */ jsx(Icon, { size: 24, data: BookOpen }) }, "dash-toc"),
+    showFixedHeaderButton && /* @__PURE__ */ jsx(
+      FixedHeaderMobile,
+      {
+        fixedContentInitiallyOpened,
+        fixedContentWidgetFocused,
+        fixedHeaderControlsRef,
+        fixedHeaderContainerRef
+      },
+      "dash-fixed-header"
+    ),
+    showDescriptionButton && /* @__PURE__ */ jsx(
+      Description,
+      {
+        canEdit: false,
+        showOpenedDescription,
+        iconSize: 24
+      },
+      "dash-description"
+    ),
+    /* @__PURE__ */ jsx(
+      ShareButton,
+      {
+        dialogShareProps: {
+          propsData: {
+            id: entryId
+          },
+          withSelectors: true
+        },
+        mobileShareIconSize: 24,
+        mobileShareIconColorPrimary: true
+      },
+      "dash-share-btn"
+    )
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsx(FloatMenu, { align: actions.length <= 2 ? "right" : "center", container: dashEl ?? void 0, children: actions });
+}
+const RefsContext = React__default.createContext({ fixedHeaderControlsEl: null, fixedHeaderContainerEl: null, dashEl: null });
+function RefsContextProvider({
+  fixedHeaderControlsEl,
+  fixedHeaderContainerEl,
+  dashEl,
+  children
+}) {
+  const value = React__default.useMemo(
+    () => ({
+      fixedHeaderControlsEl,
+      fixedHeaderContainerEl,
+      dashEl
+    }),
+    [fixedHeaderControlsEl, fixedHeaderContainerEl, dashEl]
+  );
+  return /* @__PURE__ */ jsx(RefsContext.Provider, { value, children });
+}
+function FixedControlsWrapperWithContext({ content }) {
+  const { fixedHeaderControlsEl } = React__default.useContext(RefsContext);
+  if (fixedHeaderControlsEl) {
+    return createPortal(content, fixedHeaderControlsEl, "fixed-header-controls-mounted");
+  }
+  return null;
+}
+function FixedContainerWrapperWithContext({ content }) {
+  const { fixedHeaderContainerEl } = React__default.useContext(RefsContext);
+  if (fixedHeaderContainerEl) {
+    return createPortal(content, fixedHeaderContainerEl, "fixed-header-container-mounted");
+  }
+  return null;
+}
+function FloatingMobileMenuWithContext(props) {
+  const { dashEl } = React__default.useContext(RefsContext);
+  if (dashEl) {
+    return /* @__PURE__ */ jsx(MobileFloatMenu, { ...props, dashEl });
+  }
+  return null;
+}
+const useConfig = () => {
+  const tabDataConfig = useSelector(selectCurrentTab);
+  const config = React__default.useMemo(() => {
+    if (!tabDataConfig || !DL.IS_MOBILE) {
+      return tabDataConfig;
+    }
+    const layoutIndex = {};
+    const sortedItems = getGroupedItems(tabDataConfig.items, tabDataConfig.layout).reduce((list, group) => {
+      group.forEach((item) => {
+        layoutIndex[item.id] = item.orderId;
+      });
+      list.push(...group);
+      return list;
+    }, []).sort((a, b2) => a.orderId - b2.orderId);
+    const sortedLayout = tabDataConfig.layout.reduce((memo, item) => {
+      memo[layoutIndex[item.i]] = item;
+      return memo;
+    }, []);
+    const result = {
+      ...tabDataConfig,
+      layout: sortedLayout,
+      items: sortedItems,
+      globalItems: tabDataConfig.globalItems
+    };
+    return result;
+  }, [tabDataConfig]);
+  return config;
+};
+const useDashKitContext = ({ isFixedHeaderCollapsed, isPublicMode }) => {
+  const { enableAssistant = true } = useSelector(selectSettings);
+  const workbookId = useSelector(selectDashWorkbookId);
+  const tabId = useSelector(selectCurrentTabId);
+  const context = React__default.useMemo(() => {
+    return {
+      workbookId,
+      fixedHeaderCollapsed: isFixedHeaderCollapsed,
+      isEmbeddedMode: isEmbeddedMode(),
+      isPublicMode: Boolean(isPublicMode),
+      enableAssistant,
+      currentTabId: tabId
+    };
+  }, [enableAssistant, isFixedHeaderCollapsed, isPublicMode, tabId, workbookId]);
+  return context;
+};
+const useDashkitRef = () => {
+  const dispatch = useDispatch();
+  const dashKitRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    dispatch(setDashKitRef(dashKitRef));
+  }, [dispatch]);
+  return dashKitRef;
+};
+const useDataProviderContext = () => {
+  const entryId = useSelector(selectEntryId);
+  const tabId = useSelector(selectCurrentTabId);
+  const dataProviderContextGetter = React__default.useCallback(() => {
+    const dashInfo = {
+      dashId: entryId || "",
+      dashTabId: tabId || ""
+    };
+    return {
+      [DASH_INFO_HEADER]: new URLSearchParams(dashInfo).toString()
+    };
+  }, [entryId, tabId]);
+  return { dataProviderContextGetter };
+};
+const useHashStates = ({
+  disableUrlState
+}) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const location2 = useLocation();
+  const hashStates = useSelector(selectTabHashState);
+  const entryId = useSelector(selectEntryId);
+  const currentTabId = useSelector(selectCurrentTabId);
+  const updateUrlHashStateParamsRef = React__default.useRef({ entryId, currentTabId, location: location2, history });
+  React__default.useEffect(() => {
+    updateUrlHashStateParamsRef.current = { entryId, currentTabId, location: location2, history };
+  }, [entryId, currentTabId, location2, history]);
+  const updateUrlHashState = React__default.useMemo(
+    () => debounce(async (data, tabId) => {
+      const updateUrlHashStateParams = updateUrlHashStateParamsRef.current;
+      if (!updateUrlHashStateParams.entryId) {
+        return;
+      }
+      try {
+        const { hash } = await getSdk().sdk.us.createDashState({
+          entryId: updateUrlHashStateParams.entryId,
+          data
+        });
+        if (tabId !== updateUrlHashStateParams.currentTabId) {
+          dispatch(setStateHashId({ hash, tabId }));
+          return;
+        }
+        const searchParams = new URLSearchParams(
+          updateUrlHashStateParams.location.search
+        );
+        if (hash) {
+          searchParams.set("state", hash);
+        } else {
+          searchParams.delete("state");
+        }
+        dispatch(setStateHashId({ hash, tabId }));
+        updateUrlHashStateParams.history.push({
+          ...updateUrlHashStateParams.location,
+          search: `?${searchParams.toString()}`
+        });
+      } catch (error) {
+        const details = error?.details?.details;
+        const isStateLimitError = details?.some(
+          ({ params, path }) => path?.length === 1 && path[0] === "data" && params?.code === "OBJECT_SIZE_LIMIT_EXCEEDED"
+        );
+        const title = isStateLimitError ? i18n$5("dash.main.view", "value_state-limit-error") : error.message;
+        const message = isStateLimitError ? i18n$5("dash.main.view", "value_state-limit-error-message") : error.message;
+        dispatch(
+          showToast({
+            title,
+            content: message,
+            error: { ...error, message },
+            withReport: true
+          })
+        );
+        throw error;
+      }
+    }, UPDATE_STATE_DEBOUNCE_TIME),
+    [dispatch]
+  );
+  const onStateChange = React__default.useCallback(
+    (tabsHashStates, config) => {
+      dispatch(setHashState(tabsHashStates, config));
+      if (disableUrlState) {
+        return;
+      }
+      updateUrlHashState(tabsHashStates, currentTabId);
+    },
+    [dispatch, currentTabId, disableUrlState, updateUrlHashState]
+  );
+  React__default.useEffect(() => {
+    return () => updateUrlHashState.cancel();
+  }, []);
+  return {
+    hashStates,
+    onStateChange
+  };
+};
+const b$4 = block("dash-body-overlay-controls");
+const getGearGlobalIcon = (iconProps) => {
+  const GearGlobalIcon = (props) => {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 20 20",
+        className: b$4("gear-global-icon"),
+        style: { overflow: "visible" },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("g", { transform: "translate(2, 2)", children: /* @__PURE__ */ jsx(Gear, { width: 16, height: 16 }) }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: b$4("global-icon-background"),
+              cx: "16",
+              cy: "4",
+              r: "5.5",
+              fill: "var(--g-color-base-float)"
+            }
+          ),
+          /* @__PURE__ */ jsx("g", { transform: "translate(11, -1)", children: iconProps.type === "allTabs" ? /* @__PURE__ */ jsx(Globe, { width: 10, height: 10 }) : /* @__PURE__ */ jsx(LayoutTabs, { width: 10, height: 10 }) })
+        ]
+      }
+    );
+  };
+  GearGlobalIcon.displayName = "GearGlobalIcon";
+  return GearGlobalIcon;
+};
+const getGlobalIcon = (dashItem) => {
+  let impactType;
+  if (dashItem.type === DashTabItemType.Control || dashItem.type === DashTabItemType.GroupControl) {
+    impactType = dashItem.data.impactType;
+    if (dashItem.type === DashTabItemType.GroupControl && dashItem.data.group.length === 1) {
+      impactType = dashItem.data.group[0].impactType;
+    }
+  }
+  if (impactType === "selectedTabs") {
+    return getGearGlobalIcon({ type: "selectedTabs" });
+  }
+  if (impactType === "allTabs") {
+    return getGearGlobalIcon({ type: "allTabs" });
+  }
+  return Gear;
+};
+const isConfigItemGlobal = (item) => {
+  if (item.type !== DashTabItemType.Control && item.type !== DashTabItemType.GroupControl) {
+    return false;
+  }
+  return isItemGlobal(item);
+};
+const iconRelations = "data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M5.916%207.527a2.668%202.668%200%201%200%200%201.333h1.417v2.667a2%202%200%200%200%202%202h.75a2.668%202.668%200%200%200%205.25-.667%202.667%202.667%200%200%200-5.249-.667h-.75a.667.667%200%200%201-.667-.666V4.86c0-.368.298-.667.666-.667h.751a2.668%202.668%200%201%200%200-1.333h-.75a2%202%200%200%200-2%202v2.667H5.915Zm-1.25.66a1.333%201.333%200%201%200%200%20.012v-.012ZM14%203.527a1.333%201.333%200%201%201-2.667%200%201.333%201.333%200%200%201%202.667%200Zm-1.333%2010.666a1.333%201.333%200%201%200%200-2.666%201.333%201.333%200%200%200%200%202.667Z'%20fill='currentColor'/%3e%3c/svg%3e";
+const b$3 = block("dash-body-overlay-controls");
+const useOverlay = ({
+  dashKitRef,
+  groupsRenderers,
+  hashStates,
+  tabDataConfig,
+  getGroupsInsertCoords,
+  getWidgetLayoutById,
+  onChange
+}) => {
+  const dispatch = useDispatch();
+  const rawTabDataConfig = useSelector(selectCurrentTab);
+  const togglePinElement = React__default.useCallback(
+    (widget) => {
+      const groupCoords = getGroupsInsertCoords(true);
+      let movedItem = null;
+      const newLayout = rawTabDataConfig.layout.reduce((memo, item) => {
+        if (item.i === widget.id) {
+          const { parent, ...itemCopy } = item;
+          const isFixed = parent === FIXED_GROUP_CONTAINER_ID || parent === FIXED_GROUP_HEADER_ID;
+          if (isFixed) {
+            movedItem = {
+              ...itemCopy,
+              ...groupCoords[DEFAULT_GROUP]
+            };
+          } else {
+            const parentId = FIXED_GROUP_HEADER_ID;
+            movedItem = {
+              ...itemCopy,
+              parent: FIXED_GROUP_HEADER_ID,
+              ...groupCoords[parentId]
+            };
+          }
+        } else {
+          memo.push(item);
+        }
+        return memo;
+      }, []);
+      if (movedItem) {
+        dispatch(
+          setCurrentTabData({
+            ...rawTabDataConfig,
+            layout: DashKit.reflowLayout({
+              newLayoutItem: movedItem,
+              layout: newLayout,
+              groups: groupsRenderers
+            })
+          })
+        );
+      }
+    },
+    [dispatch, rawTabDataConfig, groupsRenderers, getGroupsInsertCoords]
+  );
+  const controls = React__default.useMemo(() => {
+    return {
+      overlayControls: [
+        {
+          id: "pin",
+          title: i18n$5("dash.main.view", "label_pin"),
+          icon: Pin,
+          handler: togglePinElement,
+          visible: (configItem) => {
+            const parent = getWidgetLayoutById(configItem.id)?.parent;
+            const isSelector = configItem.type === DashTabItemType.GroupControl || configItem.type === DashTabItemType.Control;
+            return isSelector && parent !== FIXED_GROUP_HEADER_ID && parent !== FIXED_GROUP_CONTAINER_ID;
+          },
+          qa: DashKitOverlayMenuQa.PinButton
+        },
+        {
+          id: "unpin",
+          title: i18n$5("dash.main.view", "label_unpin"),
+          icon: PinSlash,
+          handler: togglePinElement,
+          visible: (configItem) => {
+            const parent = getWidgetLayoutById(configItem.id)?.parent;
+            return parent === FIXED_GROUP_HEADER_ID || parent === FIXED_GROUP_CONTAINER_ID;
+          },
+          qa: DashKitOverlayMenuQa.UnpinButton
+        },
+        {
+          id: MenuItems.Settings,
+          title: i18n$5("dash.settings-dialog.edit", "label_settings"),
+          icon: Gear,
+          qa: ControlQA.controlSettings,
+          visible: (configItem) => {
+            return !isConfigItemGlobal(configItem);
+          }
+        },
+        {
+          id: MenuItems.Settings,
+          title: i18n$5("dash.settings-dialog.edit", "label_settings"),
+          className: b$3("global-icon"),
+          iconSize: 20,
+          renderIcon: getGlobalIcon,
+          qa: ControlQA.controlSettings,
+          visible: (configItem) => {
+            return isConfigItemGlobal(configItem);
+          }
+        },
+        {
+          allWidgetsControls: true,
+          title: i18n$5("dash.main.view", "button_links"),
+          excludeWidgetsTypes: [
+            DashTabItemType.Text,
+            DashTabItemType.Title,
+            DashTabItemType.Image
+          ],
+          icon: iconRelations,
+          qa: ControlQA.controlLinks,
+          handler: (widget) => {
+            dispatch(
+              openDialogRelations({
+                widget,
+                dashKitRef,
+                onClose: () => {
+                }
+              })
+            );
+          }
+        }
+      ]
+    };
+  }, [dispatch, dashKitRef, getWidgetLayoutById, togglePinElement]);
+  const removeItemManual = React__default.useCallback(
+    (itemId, isGlobal) => {
+      const currentItemsStateAndParams = hashStates && "state" in hashStates ? hashStates.state : {};
+      const { itemsStateAndParams, config } = DashKit.removeItem({
+        id: itemId,
+        config: tabDataConfig,
+        itemsStateAndParams: currentItemsStateAndParams
+      });
+      onChange({
+        config,
+        itemsStateAndParams
+      });
+      if (isGlobal) {
+        dispatch(removeGlobalItems({ itemId }));
+      }
+    },
+    [dispatch, hashStates, tabDataConfig, onChange]
+  );
+  const onRemoveDashkitItem = React__default.useCallback(
+    (configItem) => {
+      const dashItem = configItem;
+      if ((dashItem.type === DashTabItemType.Control || dashItem.type === DashTabItemType.GroupControl) && isItemGlobal(dashItem)) {
+        dispatch(
+          openDialogDefault({
+            caption: i18n$5("dash.main.view", "title_remove-global-selector"),
+            message: i18n$5("dash.main.view", "label_remove-global-selector"),
+            onApply: () => {
+              removeItemManual(configItem.id, true);
+            },
+            textButtonApply: i18n$5("dash.main.view", "button_apply-remove-global-item"),
+            textButtonCancel: i18n$5("dash.main.view", "button_cancel"),
+            size: "s"
+          })
+        );
+        return;
+      }
+      removeItemManual(configItem.id, true);
+    },
+    [dispatch, removeItemManual]
+  );
+  const menu = React__default.useMemo(() => {
+    const dashkitMenu = getDashKitMenu(onRemoveDashkitItem);
+    return [
+      ...dashkitMenu.slice(0, -1),
+      {
+        id: "pin",
+        title: i18n$5("dash.main.view", "label_pin"),
+        icon: /* @__PURE__ */ jsx(Icon, { data: Pin, size: 16 }),
+        handler: togglePinElement,
+        visible: (configItem) => {
+          const parent = getWidgetLayoutById(configItem.id)?.parent;
+          const isSelector = configItem.type === DashTabItemType.GroupControl || configItem.type === DashTabItemType.Control;
+          return !isSelector && parent !== FIXED_GROUP_HEADER_ID && parent !== FIXED_GROUP_CONTAINER_ID;
+        },
+        qa: DashKitOverlayMenuQa.PinButton
+      },
+      ...dashkitMenu.slice(-1)
+    ];
+  }, [getWidgetLayoutById, togglePinElement, onRemoveDashkitItem]);
+  return {
+    controls,
+    menu
+  };
+};
+const usePreparedCopyItemOptions = () => {
+  const workbookId = useSelector(selectDashWorkbookId);
+  const tabId = useSelector(selectCurrentTabId);
+  const tabData = useSelector(selectCurrentTab);
+  const entryId = useSelector(selectEntryId);
+  const entry = useSelector(selectDashEntry);
+  const getPreparedCopyItemOptionsFn = React__default.useCallback(
+    (itemToCopy) => {
+      return getPreparedCopyItemOptions(itemToCopy, tabData, {
+        workbookId: workbookId ?? null,
+        fromScope: entry.scope,
+        targetEntryId: entryId,
+        targetDashTabId: tabId
+      });
+    },
+    [entryId, entry.scope, tabId, tabData, workbookId]
+  );
+  return { getPreparedCopyItemOptionsFn };
+};
+const b$2 = block("dash-body");
+const isMobileFixedHeaderEnabled$2 = isEnabledFeature(Feature.EnableMobileFixedHeader);
+const DashkitWrapper = (props) => {
+  const {
+    dashEl,
+    dashkitSettings,
+    disableHashNavigation,
+    disableUrlState,
+    globalParams,
+    groupsRenderers,
+    handleEditClick,
+    hasFixedHeaderContainerElements,
+    hasFixedHeaderControlsElements,
+    hideErrorDetails,
+    isEditMode,
+    isEditModeLoading,
+    isFixedHeaderCollapsed,
+    isGlobalDragging,
+    isPublicMode,
+    isSplitPaneLayout,
+    onlyView,
+    getGroupsInsertCoords,
+    getWidgetLayoutById,
+    onItemMountChange,
+    onItemRender,
+    onWidgetMountChange,
+    onPasteItem,
+    setCopiedDataToStore
+  } = props;
+  const dispatch = useDispatch();
+  const entryId = useSelector(selectEntryId);
+  const settings = useSelector(selectSettings);
+  const skipReload = useSelector(selectSkipReload);
+  const dashDescription = useSelector(selectDashDescription);
+  const showOpenedDescription = useSelector(selectDashShowOpenedDescription);
+  const hasTableOfContent$1 = useSelector(hasTableOfContent);
+  const canEdit$1 = useSelector(canEdit);
+  const tabs = useSelector(selectTabs);
+  const [prevSettings, setPrevSettings] = React__default.useState(settings);
+  let shouldReconfigureDashkit = false;
+  if (!isEqual(settings, prevSettings)) {
+    setPrevSettings(settings);
+    shouldReconfigureDashkit = true;
+  }
+  const [fixedHeaderControlsEl, setFixedHeaderControlsEl] = React__default.useState(
+    null
+  );
+  const [fixedHeaderContainerEl, setFixedHeaderContainerEl] = React__default.useState(null);
+  const dashKitRef = useDashkitRef();
+  const tabDataConfig = useConfig();
+  const context = useDashKitContext({ isFixedHeaderCollapsed, isPublicMode });
+  const { dataProviderContextGetter } = useDataProviderContext();
+  const { hashStates, onStateChange } = useHashStates({ disableUrlState });
+  const { getPreparedCopyItemOptionsFn } = usePreparedCopyItemOptions();
+  const onDropElement = React__default.useCallback(
+    (dropProps) => {
+      if (onlyView) {
+        return;
+      }
+      if (dropProps.dragProps.extra) {
+        onPasteItem?.(
+          {
+            ...dropProps.dragProps.extra,
+            layout: dropProps.itemLayout
+          },
+          dropProps.newLayout
+        );
+        dropProps.commit();
+      } else {
+        dispatch(
+          openDialog(
+            TYPES_TO_DIALOGS_MAP[dropProps?.dragProps?.type],
+            dropProps
+          )
+        );
+      }
+    },
+    [onlyView, dispatch, onPasteItem]
+  );
+  const onItemCopy = React__default.useCallback(
+    (error, data) => {
+      setCopiedDataToStore(data);
+      if (error === null) {
+        dispatch(
+          showToast({
+            name: "successCopyElement",
+            type: "success",
+            title: i18n$5("component.entry-context-menu.view", "value_copy-success")
+          })
+        );
+      }
+    },
+    [dispatch, setCopiedDataToStore]
+  );
+  const onItemEdit = React__default.useCallback(
+    (data) => {
+      dispatch(openItemDialogAndSetData(data));
+    },
+    [dispatch]
+  );
+  const onChange = React__default.useCallback(
+    ({
+      config,
+      itemsStateAndParams
+    }) => {
+      if (hashStates !== itemsStateAndParams && itemsStateAndParams && Object.keys(itemsStateAndParams).length) {
+        onStateChange(itemsStateAndParams, config);
+      } else if (config) {
+        dispatch(setCurrentTabData(config));
+      }
+    },
+    [dispatch, hashStates, onStateChange]
+  );
+  const handleSetWidgetCurrentTab = React__default.useCallback(
+    (args) => {
+      dispatch(setWidgetCurrentTab(args));
+    },
+    [dispatch]
+  );
+  const handleUpdateTabsWithGlobalState = React__default.useCallback(
+    (args) => {
+      dispatch(updateTabsWithGlobalState(args));
+    },
+    [dispatch]
+  );
+  const handleToggleTableOfContent = React__default.useCallback(
+    (expanded) => {
+      dispatch(toggleTableOfContent(expanded));
+    },
+    [dispatch]
+  );
+  const { controls: overlayControls, menu: overlayMenuItems } = useOverlay({
+    dashKitRef,
+    groupsRenderers,
+    hashStates,
+    tabDataConfig,
+    getGroupsInsertCoords,
+    getWidgetLayoutById,
+    onChange
+  });
+  const fixedHeaderCollapsed = context.fixedHeaderCollapsed || false;
+  const isEmptyTab = !tabDataConfig?.items.length && !tabDataConfig?.globalItems?.length;
+  const DashKit2 = getConfiguredDashKit(
+    void 0,
+    {
+      disableHashNavigation,
+      scope: "dash",
+      globalWidgetSettings: {
+        borderRadius: settings.borderRadius,
+        backgroundSettings: settings.backgroundSettings
+      }
+    },
+    shouldReconfigureDashkit
+  );
+  const fixedHeaderHasNoVisibleContent = !hasFixedHeaderControlsElements && (!hasFixedHeaderContainerElements || fixedHeaderCollapsed);
+  if (isEmptyTab && !isGlobalDragging) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        canEdit: canEdit$1,
+        isEditMode,
+        isTabView: !settings.hideTabs && tabs.length > 1,
+        onEditClick: handleEditClick,
+        isEditModeLoading
+      }
+    );
+  }
+  const shouldRenderMobileMenu = DL.IS_MOBILE && isMobileFixedHeaderEnabled$2;
+  const searchParams = new URLSearchParams(location.search);
+  const focusedWidget = searchParams.get(FOCUSED_WIDGET_PARAM_NAME);
+  const focusedWidgetParent = focusedWidget ? tabDataConfig?.layout?.find((item) => item.i === focusedWidget)?.parent : void 0;
+  const isFixedHeaderWidgetFocused = Boolean(
+    focusedWidgetParent && [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID].includes(focusedWidgetParent)
+  );
+  const mobileFixedHeaderInitiallyOpened = shouldRenderMobileMenu && isFixedHeaderWidgetFocused;
+  return /* @__PURE__ */ jsx(
+    RefsContextProvider,
+    {
+      fixedHeaderControlsEl,
+      fixedHeaderContainerEl,
+      dashEl,
+      children: /* @__PURE__ */ jsxs(WidgetContextProvider, { onWidgetMountChange, children: [
+        shouldRenderMobileMenu && entryId && /* @__PURE__ */ jsx(
+          FloatingMobileMenuWithContext,
+          {
+            entryId,
+            hasFixedContent: hasFixedHeaderContainerElements || hasFixedHeaderControlsElements,
+            dashDescription,
+            showOpenedDescription: showOpenedDescription || false,
+            hasTableOfContent: hasTableOfContent$1,
+            toggleTableOfContent: handleToggleTableOfContent,
+            fixedContentInitiallyOpened: mobileFixedHeaderInitiallyOpened,
+            fixedContentWidgetFocused: isFixedHeaderWidgetFocused,
+            fixedHeaderControlsRef: setFixedHeaderControlsEl,
+            fixedHeaderContainerRef: setFixedHeaderContainerEl
+          }
+        ),
+        !DL.IS_MOBILE && /* @__PURE__ */ jsx(
+          FixedHeaderWrapper,
+          {
+            className: b$2("fixed-header", {
+              "no-content": fixedHeaderHasNoVisibleContent
+            }),
+            dashBodyEl: dashEl,
+            controlsRef: setFixedHeaderControlsEl,
+            containerRef: setFixedHeaderContainerEl,
+            isCollapsed: fixedHeaderCollapsed || false,
+            editMode: isEditMode,
+            isControlsGroupEmpty: !hasFixedHeaderControlsElements,
+            isContainerGroupEmpty: !hasFixedHeaderContainerElements,
+            isSplitPaneContainer: isSplitPaneLayout
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DashKit2,
+          {
+            ref: dashKitRef,
+            config: tabDataConfig,
+            editMode: isEditMode,
+            focusable: true,
+            onDrop: onDropElement,
+            itemsStateAndParams: hashStates,
+            groups: groupsRenderers,
+            context,
+            getPreparedCopyItemOptions: getPreparedCopyItemOptionsFn,
+            onCopyFulfill: onItemCopy,
+            onItemEdit,
+            onChange,
+            settings: dashkitSettings,
+            defaultGlobalParams: settings.globalParams,
+            globalParams,
+            overlayControls,
+            overlayMenuItems,
+            skipReload,
+            onItemMountChange,
+            onItemRender,
+            hideErrorDetails,
+            setWidgetCurrentTab: handleSetWidgetCurrentTab,
+            updateTabsWithGlobalState: handleUpdateTabsWithGlobalState,
+            dataProviderContextGetter
+          }
+        )
+      ] })
+    }
+  );
+};
+const useCopiedData = () => {
+  const [copiedData, setCopiedData] = React__default.useState(null);
+  const { getItem: getCopiedDataWithStoreFallback, setItem: setCopiedDataToStore } = useLocalStorageFallback({
+    key: COPIED_WIDGET_STORAGE_KEY,
+    restoreFromLocalStorage: getPastedWidgetData
+  });
+  const storageHandler = React__default.useCallback(() => {
+    setCopiedData(getCopiedDataWithStoreFallback());
+  }, [getCopiedDataWithStoreFallback]);
+  useEffectOnce(() => {
+    storageHandler();
+    window.addEventListener("storage", storageHandler);
+    return () => {
+      window.removeEventListener("storage", storageHandler);
+    };
+  });
+  return { copiedData, setCopiedDataToStore };
+};
+const b$1 = block("dash-body");
+const isMobileFixedHeaderEnabled$1 = isEnabledFeature(Feature.EnableMobileFixedHeader);
+const Content = ({
+  dashEntryKey,
+  disableHashNavigation,
+  hideErrorDetails,
+  isCondensed,
+  loaded,
+  mode,
+  onDragEnd,
+  onDragStart,
+  onItemClick,
+  onRetry,
+  // DashkitWrapperProps
+  dashEl,
+  dashkitSettings,
+  disableUrlState,
+  globalParams,
+  groupsRenderers,
+  hasFixedHeaderContainerElements,
+  hasFixedHeaderControlsElements,
+  isEditModeLoading,
+  isFixedHeaderCollapsed,
+  isPublicMode,
+  isSplitPaneLayout,
+  isGlobalDragging,
+  getGroupsInsertCoords,
+  getWidgetLayoutById,
+  handleEditClick,
+  onItemMountChange,
+  onItemRender,
+  onWidgetMountChange,
+  ...restProps
+}) => {
+  const dispatch = useDispatch();
+  const error = useSelector(selectDashError);
+  const isSidebarOpened = !useSelector(selectAsideHeaderIsCompact);
+  const settings = useSelector(selectSettings);
+  const showTableOfContent = useSelector(selectShowTableOfContent);
+  const tabs = useSelector(selectTabs);
+  const userSettings = useSelector(selectUserSettings);
+  const { copiedData, setCopiedDataToStore } = useCopiedData();
+  const handleOpenDialog = React__default.useCallback(
+    (dialogType, dragOperationProps) => {
+      dispatch(openDialog(dialogType, dragOperationProps));
+    },
+    [dispatch]
+  );
+  const isEditMode = mode === Mode.Edit;
+  switch (mode) {
+    case Mode.Loading:
+    case Mode.Updating:
+      return /* @__PURE__ */ jsx(Loader, { size: "l" });
+    case Mode.Error:
+      return /* @__PURE__ */ jsx(DashError, { error, hideDetails: hideErrorDetails, onRetry });
+  }
+  const localTabs = memoizedGetLocalTabs(tabs);
+  const hasTableOfContentForTab = !(localTabs.length === 1 && !localTabs[0].items.length);
+  const loadedMixin = loaded ? LOADED_DASH_CLASS : void 0;
+  const hideDashTitle = settings.hideDashTitle || DL.IS_MOBILE && !isMobileFixedHeaderEnabled$1;
+  return /* @__PURE__ */ jsx(DashKitDnDWrapper, { onDragStart, onDragEnd, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-qa": DashBodyQa.ContentWrapper,
+      className: b$1("content-wrapper", { mobile: DL.IS_MOBILE, mode }, loadedMixin),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: b$1("content-container", {
+            mobile: DL.IS_MOBILE,
+            "no-title": settings.hideDashTitle && (settings.hideTabs || tabs.length === 1),
+            "no-title-with-tabs": settings.hideDashTitle && !settings.hideTabs && tabs.length > 1
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              TableOfContent,
+              {
+                disableHashNavigation,
+                onItemClick
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: b$1("content", {
+                  condensed: isCondensed,
+                  "with-table-of-content": showTableOfContent && hasTableOfContentForTab,
+                  mobile: DL.IS_MOBILE,
+                  aside: getIsAsideHeaderEnabled(),
+                  "with-edit-panel": isEditMode,
+                  "with-footer": isEnabledFeature(Feature.EnableFooter)
+                }),
+                children: [
+                  !hideDashTitle && dashEntryKey && /* @__PURE__ */ jsx("div", { className: b$1("entry-name"), "data-qa": DashEntryQa.EntryName, children: Utils.getEntryNameFromKey(dashEntryKey) }),
+                  !settings.hideTabs && /* @__PURE__ */ jsx(Tabs, { className: b$1("tabs") }),
+                  /* @__PURE__ */ jsx(
+                    DashkitWrapper,
+                    {
+                      ...{
+                        dashEl,
+                        dashkitSettings,
+                        disableHashNavigation,
+                        disableUrlState,
+                        globalParams,
+                        groupsRenderers,
+                        hasFixedHeaderContainerElements,
+                        hasFixedHeaderControlsElements,
+                        hideErrorDetails,
+                        isEditMode,
+                        isEditModeLoading,
+                        isFixedHeaderCollapsed,
+                        isPublicMode,
+                        isSplitPaneLayout,
+                        isGlobalDragging,
+                        onlyView: restProps.onlyView,
+                        getGroupsInsertCoords,
+                        getWidgetLayoutById,
+                        handleEditClick,
+                        onItemMountChange,
+                        onItemRender,
+                        onWidgetMountChange,
+                        onPasteItem: restProps.onPasteItem,
+                        setCopiedDataToStore
+                      }
+                    }
+                  ),
+                  !restProps.onlyView && /* @__PURE__ */ jsx(
+                    ActionPanel,
+                    {
+                      toggleAnimation: true,
+                      disable: !isEditMode,
+                      items: getActionPanelItems({
+                        copiedData,
+                        onPasteItem: restProps.onPasteItem,
+                        openDialog: handleOpenDialog,
+                        filterItem: (item) => item.id === DashTabItemType.Image,
+                        userSettings,
+                        scope: EntryScope.Dash
+                      }),
+                      className: b$1("edit-panel", {
+                        "aside-opened": isSidebarOpened
+                      })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+const b = block("dash-body");
+const isMobileFixedHeaderEnabled = isEnabledFeature(Feature.EnableMobileFixedHeader);
+class Body extends React__default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.entryDialoguesRef = React__default.createRef();
+    this.scrollIntoViewWithDebounce = debounce(() => {
+      if (this.state.delayedScrollElement) {
+        const lastDelayedScrollTop = scrollIntoView(
+          this.state.delayedScrollElement,
+          this.state.lastDelayedScrollTop
+        );
+        this.setState({ lastDelayedScrollTop });
+      }
+    }, SCROLL_TITLE_DEBOUNCE_TIME);
+    this._memoizedWidgetsMap = {
+      layout: null,
+      byGroup: {},
+      byId: {},
+      columns: 0
+    };
+    this._memoizedPropertiesCache = /* @__PURE__ */ new Map();
+    this._dashBodyRef = (el) => {
+      this.setState({ dashEl: el });
+    };
+    this.getMemorizedCustomizedProperties = (id, extendedProps = {}) => {
+      return (props2) => {
+        const updatedResult = getCustomizedProperties(props2, extendedProps);
+        const cachedResult = this._memoizedPropertiesCache.get(id);
+        if (!isEqual(cachedResult, updatedResult) || !cachedResult) {
+          this._memoizedPropertiesCache.set(id, updatedResult);
+          return updatedResult;
+        }
+        return cachedResult;
+      };
+    };
+    this.isCondensed = () => {
+      return this.state.groups.margins[0] === 0 || this.state.groups.margins[1] === 0;
+    };
+    this.getGroupsInsertCoords = (forSingleInsert = false) => {
+      const { tabData } = this.props;
+      const tabDataConfig = tabData;
+      return (tabDataConfig?.layout || []).reduce(
+        (memo, item) => {
+          const parentId = getLayoutParentId(item);
+          const bottom = item.y + item.h;
+          const left = item.x + item.w;
+          switch (parentId) {
+            case FIXED_GROUP_HEADER_ID:
+              memo[FIXED_GROUP_HEADER_ID] = {
+                y: forSingleInsert ? 0 : Math.max(memo[FIXED_GROUP_CONTAINER_ID].y, bottom),
+                x: Math.max(memo[FIXED_GROUP_HEADER_ID].x, left)
+              };
+              break;
+            case FIXED_GROUP_CONTAINER_ID:
+              memo[FIXED_GROUP_CONTAINER_ID] = {
+                y: Math.max(memo[FIXED_GROUP_CONTAINER_ID].y, bottom),
+                x: 0
+              };
+              break;
+            default:
+              memo[DEFAULT_GROUP] = {
+                y: 0,
+                x: 0
+              };
+          }
+          return memo;
+        },
+        {
+          [DEFAULT_GROUP]: { x: 0, y: 0 },
+          [FIXED_GROUP_HEADER_ID]: { x: 0, y: 0 },
+          [FIXED_GROUP_CONTAINER_ID]: { x: 0, y: 0 }
+        }
+      );
+    };
+    this.getWidgetLayoutById = (widgetId) => {
+      return this.getMemoLayoutMap().byId[widgetId];
+    };
+    this.getWidgetLayoutByGroup = (groupId) => {
+      return this.getMemoLayoutMap().byGroup[groupId];
+    };
+    this.unpinAllElements = () => {
+      const tabDataConfig = this.getTabConfig();
+      if (tabDataConfig) {
+        const groupCoords = this.getGroupsInsertCoords();
+        const newLayout = tabDataConfig.layout.map(({ parent, ...item }) => {
+          switch (parent || DEFAULT_GROUP) {
+            case FIXED_GROUP_HEADER_ID:
+              return { ...item, y: 0 };
+            case FIXED_GROUP_CONTAINER_ID: {
+              return {
+                ...item,
+                y: item.y + groupCoords[FIXED_GROUP_HEADER_ID].y
+              };
+            }
+            case DEFAULT_GROUP: {
+              return {
+                ...item,
+                y: item.y + groupCoords[FIXED_GROUP_HEADER_ID].y + groupCoords[FIXED_GROUP_CONTAINER_ID].y
+              };
+            }
+            default:
+              return item;
+          }
+        });
+        this.props.setCurrentTabData({ ...tabDataConfig, layout: newLayout });
+      }
+    };
+    this.toggleDefaultCollapsedState = () => {
+      const config = this.getTabConfig();
+      this.props.setCurrentTabData({
+        ...config,
+        settings: {
+          ...config.settings,
+          fixedHeaderCollapsedDefault: !config.settings?.fixedHeaderCollapsedDefault
+        }
+      });
+    };
+    this.toggleFixedHeader = () => {
+      const { tabId } = this.props;
+      if (tabId) {
+        this.setState({
+          fixedHeaderCollapsed: {
+            ...this.state.fixedHeaderCollapsed,
+            [tabId]: !this.getFixedHeaderCollapsedState()
+          }
+        });
+      }
+    };
+    this.renderFixedControls = (isCollapsed, hasFixedHeaderControlsElements, hasFixedContainerElements) => {
+      const config = this.getTabConfig();
+      const isEditMode = this.isEditMode();
+      const { expandIcon, collapseIcon } = hasFixedHeaderControlsElements || isEditMode ? { expandIcon: ChevronsDown, collapseIcon: ChevronsUp } : { expandIcon: ChevronsLeft, collapseIcon: ChevronsRight };
+      const expandCollapseButton = /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: b("sticky-control-btn", { first: !isEditMode, last: true }),
+          onClick: this.toggleFixedHeader,
+          view: isEditMode ? "flat" : "action",
+          size: isEditMode ? "m" : "xl",
+          width: "max",
+          pin: "round-brick",
+          title: i18n$5(
+            "dash.main.view",
+            isCollapsed ? "tooltip_expand-fixed-group" : "tooltip_collapse-fixed-group"
+          ),
+          qa: FixedHeaderQa.ExpandCollapseButton,
+          children: /* @__PURE__ */ jsx(Icon, { data: isCollapsed ? expandIcon : collapseIcon })
+        }
+      );
+      if (isEditMode) {
+        return (hasFixedHeaderControlsElements || hasFixedContainerElements) && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DropdownMenu,
+            {
+              switcherWrapperClassName: b("fixed-header-settings-switcher"),
+              renderSwitcher: (props2) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...props2,
+                  view: "flat",
+                  size: "m",
+                  width: "max",
+                  pin: "round-brick",
+                  className: b("sticky-control-btn", {
+                    first: true,
+                    last: false
+                  }),
+                  children: /* @__PURE__ */ jsx(Icon, { size: 16, data: Gear })
+                }
+              ),
+              items: [
+                {
+                  action: this.toggleDefaultCollapsedState,
+                  text: i18n$5("dash.main.view", "label_fixed-collapsed-default"),
+                  iconStart: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      data: config.settings?.fixedHeaderCollapsedDefault ? SquareCheck : Square
+                    }
+                  ),
+                  theme: "normal"
+                },
+                {
+                  action: this.unpinAllElements,
+                  text: i18n$5("dash.main.view", "label_unpin-all"),
+                  iconStart: /* @__PURE__ */ jsx(Icon, { data: PinSlash }),
+                  theme: "danger"
+                }
+              ]
+            }
+          ),
+          expandCollapseButton
+        ] });
+      } else if (hasFixedContainerElements) {
+        return expandCollapseButton;
+      }
+      return null;
+    };
+    this.renderFixedGroupHeader = (id, children, params) => {
+      const isEmpty = params.items.length === 0;
+      const hasFixedHeaderControlsElements = Boolean(
+        this.getWidgetLayoutByGroup(FIXED_GROUP_HEADER_ID)?.length
+      );
+      const hasFixedContainerElements = Boolean(
+        this.getWidgetLayoutByGroup(FIXED_GROUP_CONTAINER_ID)?.length
+      );
+      if (isEmpty && !hasFixedContainerElements && this.props.mode !== Mode.Edit) {
+        return null;
+      }
+      if (params.isMobile && !isMobileFixedHeaderEnabled) {
+        return children;
+      }
+      const { fixedHeaderCollapsed = false } = params.context;
+      const content = params.isMobile ? children : /* @__PURE__ */ jsx(
+        FixedHeaderControls,
+        {
+          isEmpty,
+          isContainerGroupEmpty: !hasFixedContainerElements,
+          editMode: params.editMode,
+          controls: this.renderFixedControls(
+            fixedHeaderCollapsed,
+            hasFixedHeaderControlsElements,
+            hasFixedContainerElements
+          ),
+          children
+        },
+        `${id}_${this.props.tabId}`
+      );
+      return /* @__PURE__ */ jsx(FixedControlsWrapperWithContext, { content });
+    };
+    this.renderFixedGroupContainer = (id, children, params) => {
+      const isEmpty = params.items.length === 0;
+      const hasFixedHeaderElements = Boolean(
+        this.getWidgetLayoutByGroup(FIXED_GROUP_HEADER_ID)?.length
+      );
+      if (isEmpty && !hasFixedHeaderElements && this.props.mode !== Mode.Edit) {
+        return null;
+      }
+      if (params.isMobile && !isMobileFixedHeaderEnabled) {
+        return children;
+      }
+      const content = params.isMobile ? children : /* @__PURE__ */ jsx(
+        FixedHeaderContainer,
+        {
+          isEmpty,
+          isControlsGroupEmpty: !hasFixedHeaderElements,
+          editMode: params.editMode,
+          children
+        },
+        `${id}_${this.props.tabId}`
+      );
+      return /* @__PURE__ */ jsx(FixedContainerWrapperWithContext, { content });
+    };
+    this.interruptAutoScroll = (event) => {
+      if (event.isTrusted && this.state.delayedScrollElement) {
+        this.setState({ delayedScrollElement: null, lastDelayedScrollTop: null });
+      }
+    };
+    this.itemAddHandler = (isMounted, id, domElement) => {
+      if (this.isEditMode() && isMounted && isEnabledFeature(Feature.EnableDashAutoFocus) && this.props.lastModifiedItem === id) {
+        const lastDelayedScrollTop = scrollIntoView(domElement, null);
+        this.setState({
+          delayedScrollElement: domElement,
+          lastDelayedScrollTop
+        });
+      }
+    };
+    this.handleDragStart = () => {
+      this.setState({ isGlobalDragging: true });
+    };
+    this.handleDragEnd = () => {
+      this.setState({ isGlobalDragging: false });
+    };
+    this.handleItemMountChange = (item, { isMounted }) => {
+      if (isMounted) {
+        this.state.loadedItemsMap.set(item.id, false);
+        if (this.state.loadedItemsMap.size === this.props.tabData?.items.length) {
+          this.scrollIntoViewWithDebounce();
+        }
+      }
+    };
+    this.handleItemRender = (item) => {
+      const { loadedItemsMap } = this.state;
+      if (loadedItemsMap.has(item.id) && loadedItemsMap.get(item.id) !== true) {
+        loadedItemsMap.set(item.id, true);
+        const isLoaded = loadedItemsMap.size === this.props.tabData?.items.length && Array.from(loadedItemsMap.values()).every(Boolean);
+        if (isLoaded && this.state.delayedScrollElement) {
+          scrollIntoView(this.state.delayedScrollElement, this.state.lastDelayedScrollTop);
+          this.setState({ delayedScrollElement: null, lastDelayedScrollTop: null });
+        } else {
+          this.scrollIntoViewWithDebounce();
+        }
+        if (isLoaded) {
+          dispatchDashLoadedEvent();
+        }
+        this.setState({ loaded: isLoaded });
+      }
+    };
+    this.handleTocItemClick = (itemTitle) => {
+      if (this.props.disableHashNavigation) {
+        if (this.state.loaded) {
+          scrollIntoView(encodeURIComponent(itemTitle));
+        }
+        this.setState({
+          delayedScrollElement: encodeURIComponent(itemTitle),
+          lastDelayedScrollTop: null
+        });
+      }
+    };
+    this.state = {
+      fixedHeaderCollapsed: {},
+      dashEl: null,
+      isGlobalDragging: false,
+      prevMeta: { tabId: null, entryId: null },
+      loaded: false,
+      loadedItemsMap: /* @__PURE__ */ new Map(),
+      hash: "",
+      delayedScrollElement: null,
+      lastDelayedScrollTop: null,
+      groups: {
+        margins: DEFAULT_DASH_MARGINS,
+        renderers: [
+          {
+            id: FIXED_GROUP_HEADER_ID,
+            render: this.renderFixedGroupHeader,
+            gridProperties: this.getMemorizedCustomizedProperties("fixed-header")
+          },
+          {
+            id: FIXED_GROUP_CONTAINER_ID,
+            render: this.renderFixedGroupContainer,
+            gridProperties: this.getMemorizedCustomizedProperties("fixed-container")
+          },
+          {
+            id: DEFAULT_GROUP,
+            gridProperties: this.getMemorizedCustomizedProperties("default-group")
+          }
+        ]
+      }
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    let updatedState = {};
+    const {
+      prevMeta: { entryId, tabId }
+    } = state;
+    let isTabUnmount = false;
+    if (props.entryId !== entryId || props.tabId !== tabId) {
+      state.loadedItemsMap.clear();
+      updatedState = {
+        prevMeta: { tabId: props.tabId, entryId: props.entryId },
+        loaded: false
+      };
+      isTabUnmount = true;
+    }
+    const currentHash = props.location.hash;
+    const hasHashChanged = currentHash !== state.hash;
+    if (hasHashChanged) {
+      updatedState.hash = currentHash;
+    }
+    if (!props.disableHashNavigation) {
+      if (!currentHash && state.delayedScrollElement) {
+        updatedState.delayedScrollElement = null;
+        updatedState.lastDelayedScrollTop = null;
+      } else if (!isTabUnmount && hasHashChanged) {
+        scrollIntoView(currentHash.replace("#", ""));
+        updatedState.delayedScrollElement = state.loaded ? null : currentHash.replace("#", "");
+        updatedState.lastDelayedScrollTop = null;
+      } else if (currentHash && isTabUnmount) {
+        updatedState.delayedScrollElement = currentHash.replace("#", "");
+        updatedState.lastDelayedScrollTop = null;
+      }
+    }
+    return Object.keys(updatedState).length ? updatedState : null;
+  }
+  componentDidMount() {
+    if (this.props.location.hash && !this.props.disableHashNavigation) {
+      this.setState({ delayedScrollElement: this.props.location.hash.replace("#", "") });
+    }
+    window.addEventListener("wheel", this.interruptAutoScroll);
+    window.addEventListener("touchmove", this.interruptAutoScroll);
+    this.updateMargins();
+  }
+  componentDidUpdate() {
+    this.updateMargins();
+  }
+  componentDidCatch(error) {
+    logger.logError("Dash.Body componentDidCatch", error);
+    this.props.setErrorMode(error);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("wheel", this.interruptAutoScroll);
+    window.removeEventListener("touchmove", this.interruptAutoScroll);
+  }
+  render() {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: b({ "split-pane": this.props.isSplitPaneLayout }),
+        ref: this._dashBodyRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Content,
+            {
+              dashEntryKey: this.props.entry?.key,
+              disableHashNavigation: this.props.disableHashNavigation,
+              hideErrorDetails: this.props.hideErrorDetails,
+              isCondensed: this.isCondensed(),
+              loaded: this.state.loaded,
+              mode: this.props.mode,
+              onDragEnd: this.handleDragEnd,
+              onDragStart: this.handleDragStart,
+              onItemClick: this.handleTocItemClick,
+              onRetry: this.props.onRetry,
+              dashEl: this.state.dashEl,
+              dashkitSettings: this.props.dashkitSettings,
+              disableUrlState: this.props.disableUrlState,
+              globalParams: this.props.globalParams,
+              groupsRenderers: this.state.groups.renderers,
+              hasFixedHeaderContainerElements: Boolean(
+                this.getWidgetLayoutByGroup(FIXED_GROUP_CONTAINER_ID)?.length
+              ),
+              hasFixedHeaderControlsElements: Boolean(
+                this.getWidgetLayoutByGroup(FIXED_GROUP_HEADER_ID)?.length
+              ),
+              isEditModeLoading: this.props.isEditModeLoading,
+              isFixedHeaderCollapsed: this.getFixedHeaderCollapsedState(),
+              isPublicMode: this.props.isPublicMode,
+              isSplitPaneLayout: this.props.isSplitPaneLayout,
+              isGlobalDragging: this.state.isGlobalDragging,
+              getGroupsInsertCoords: this.getGroupsInsertCoords,
+              getWidgetLayoutById: this.getWidgetLayoutById,
+              handleEditClick: this.props.handlerEditClick,
+              onItemMountChange: this.handleItemMountChange,
+              onItemRender: this.handleItemRender,
+              onWidgetMountChange: this.itemAddHandler,
+              ...this.props.onlyView ? { onlyView: this.props.onlyView, onPasteItem: void 0 } : { onlyView: this.props.onlyView, onPasteItem: this.props.onPasteItem }
+            }
+          ),
+          /* @__PURE__ */ jsx(PaletteEditor, {}),
+          /* @__PURE__ */ jsx(EntryDialogues, { ref: this.entryDialoguesRef })
+        ]
+      }
+    );
+  }
+  updateMargins() {
+    const { margins: stateMargins } = this.state.groups;
+    const { margins: propsMargins = DEFAULT_DASH_MARGINS } = this.props.settings;
+    if (stateMargins?.[0] !== propsMargins?.[0] || stateMargins?.[1] !== propsMargins?.[1]) {
+      this.setState({
+        groups: {
+          margins: propsMargins,
+          renderers: this.state.groups.renderers.map((group) => {
+            return {
+              ...group,
+              gridProperties: this.getMemorizedCustomizedProperties(
+                `${group.id}-update`,
+                { margin: propsMargins }
+              )
+            };
+          })
+        }
+      });
+    }
+  }
+  getTabConfig() {
+    const { tabData } = this.props;
+    return tabData;
+  }
+  getMemoLayoutMap() {
+    const widgetsMap = this._memoizedWidgetsMap;
+    const layout = this.getTabConfig()?.layout || [];
+    if (widgetsMap.layout !== layout) {
+      widgetsMap.layout = layout;
+      const [byId, columns, byGroup] = getLayoutMap(layout);
+      widgetsMap.byId = byId;
+      widgetsMap.byGroup = byGroup;
+      widgetsMap.columns = columns;
+    }
+    return widgetsMap;
+  }
+  getFixedHeaderCollapsedState() {
+    const { tabId } = this.props;
+    if (!tabId) {
+      return false;
+    }
+    if (tabId && tabId in this.state.fixedHeaderCollapsed) {
+      return this.state.fixedHeaderCollapsed[tabId];
+    }
+    const config = this.getTabConfig();
+    return config.settings?.fixedHeaderCollapsedDefault ?? false;
+  }
+  isEditMode() {
+    return this.props.mode === Mode.Edit;
+  }
+}
+const mapStateToProps = (state) => ({
+  entryId: selectEntryId(state),
+  lastModifiedItem: selectLastModifiedItemId(state),
+  entry: state.dash.entry,
+  mode: state.dash.mode,
+  settings: selectSettings(state),
+  tabData: selectCurrentTab(state),
+  tabId: selectCurrentTabId(state)
+});
+const mapDispatchToProps = {
+  setErrorMode,
+  setCurrentTabData
+};
+const Body_default = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(Body);
+export {
+  Body_default as default
+};