@retailcrm/datalens-ui 0.0.0

package/components/DashKit.js

@@ -0,0 +1,4026 @@
+var _a;
+import { D as DASH_WIDGET_TYPES, s as stringifyMemoize, C as CHARTKIT_SCROLLABLE_NODE_CLASSNAME, a as CHARTKIT_MAIN_CLASSNAME, b as CHARTKIT_ERROR_NODE_CLASSNAME, c as CONTROL_TYPE, d as CheckboxControlValue, w as wrapToArray, e as selectDashWorkbookId, u as unwrapFromArrayAndSkipOperation, f as addOperationForValue, g as chartsDataProvider, h as CHARTS_ERROR_CODE, i as unwrapFromArray, j as CLICK_ACTION_TYPE, k as isItemGlobal, l as isGlobalWidgetVisibleByMainSetting, m as isGroupItemVisibleOnTab } from "./ControlComponents.js";
+import { DashKit, pluginText, PluginText, RECCOMMENDED_LINE_HEIGHT_MULTIPLIER, TITLE_DEFAULT_SIZES, pluginTitle, PluginTitle, PLUGIN_ROOT_ATTR_NAME } from "@gravity-ui/dashkit";
+import { bi as splitParamsToParametersAndFilters, bj as transformParamsToUrlParams, bk as transformUrlParamsToParams, af as resolveOperation, bl as resolveIntervalDate, aX as Operations, bm as resolveRelativeDate, b5 as DatasetFieldType, l as I18n, ah as DashTabItemControlSourceType, b7 as DATASET_IGNORED_DATA_TYPES, D as DL, a4 as LIKE_CHART_COLOR_TOKEN, bn as getResultedOldBgColor, a3 as CustomPaletteBgColors, a_ as TitlePlacementOption, b3 as ControlQA, r as registry, j as i18n$8, bo as DashKitOverlayMenuQa, u as DashTabItemType, aE as ControlType, aZ as DATASET_FIELD_TYPES, n as ErrorCode, I as I18N, bp as DashTabItemControlElementType, F as Feature, bq as DashTabItemTitleSizes, br as EXPORT_PRINT_HIDDEN_ATTR, ab as isOldBackgroundSettings } from "./AccessRights.js";
+import { z as getRouter, P as toSearchParams, l as logger, f as openDialogErrorWithTabs, c as closeDialog, j as useMountedState, r as getLocation, i as isEnabledFeature, Q as usePrevious, Y as YFM_MARKDOWN_CLASSNAME, M as MarkdownProvider } from "./ActionPanel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { createContext } from "react";
+import { MenuItems, getItemsParams, pluginGroupControlBaseDL } from "@gravity-ui/dashkit/helpers";
+import { Pencil, Copy, TrashBin, TriangleExclamationFill } from "@gravity-ui/icons";
+import { useThemeType, Checkbox, Button, Dialog, TextArea, TextInput, Icon, Loader, Text } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import axios from "axios";
+import debounce from "lodash/debounce";
+import isEqual from "lodash/isEqual";
+import pick from "lodash/pick";
+import { C as ChartWrapper } from "./Widgets.js";
+import PropTypes from "prop-types";
+import { M as MOBILE_SIZE } from "./CollectionFilters.js";
+import { Y as YCSelect } from "./common.js";
+import { M as MarkdownHelpPopover } from "./MarkdownHelpPopover.js";
+import { useSelector, useDispatch } from "react-redux";
+import { a as selectDebugMode } from "./AsideHeaderAdapter.js";
+import isPlainObject from "lodash/isPlainObject";
+import moment from "moment";
+import get from "lodash/get";
+import { Y as YfmWrapper } from "./YfmWrapper.js";
+import { useLocation } from "react-router";
+import { Link } from "react-router-dom";
+const MAX_AUTO_HEIGHT_PX = 3e3;
+const MIN_AUTO_HEIGHT_PX = 44;
+const MIN_AUTO_HEIGHT_ROWS = 2;
+const DEFAULT_CONTROL_LAYOUT = { w: 8, h: 2 };
+const FIXED_GROUP_CONTAINER_ID = "__fixGCont";
+const FIXED_GROUP_HEADER_ID = "__fixHead";
+const DEFAULT_DASH_MARGINS = [8, 8];
+const MIN_DASH_MARGIN = 0;
+const MAX_DASH_MARGIN = 22;
+const DASH_MARGIN_STEP = 2;
+const MIN_DASH_BORDER_RADIUS = 0;
+const MAX_DASH_BORDER_RADIUS = 24;
+const DASH_BORDER_RADIUS_STEP = 2;
+const OLD_DEFAULT_WIDGET_BORDER_RADIUS = 0;
+const DEBOUNCE_RENDER_TIMEOUT = 200;
+const isWidgetTypeDoNotNeedOverlay = (widgetType) => {
+  return widgetType === DASH_WIDGET_TYPES.TABLE || widgetType === DASH_WIDGET_TYPES.MARKDOWN || widgetType === DASH_WIDGET_TYPES.TEXT || widgetType === DASH_WIDGET_TYPES.CONTROL || widgetType === DASH_WIDGET_TYPES.METRIC || // delete after closing CHARTS-5818
+  widgetType === DASH_WIDGET_TYPES.TIMESERIES;
+};
+const getDashEntryUrl = (response) => {
+  return `/${response.data?.entryId}`;
+};
+const getNewDashUrl = (workbookId) => {
+  return `/workbooks/${workbookId}/dashboards`;
+};
+const getUrlGlobalParams = stringifyMemoize(
+  (search, globalParams) => {
+    if (!search || !globalParams) {
+      return {};
+    }
+    const searchParams = new URLSearchParams(search);
+    return Object.keys(globalParams).reduce(
+      (result, key) => searchParams.has(key) ? { ...result, [key]: searchParams.getAll(key) } : result,
+      {}
+    );
+  }
+);
+const ELEMENT_TYPE = {
+  SELECT: "select"
+};
+const TYPE = {
+  SELECT: "select",
+  INPUT: "input",
+  DATEPICKER: "datepicker",
+  RANGE_DATEPICKER: "range-datepicker",
+  CHECKBOX: "checkbox"
+};
+const LOAD_STATUS = {
+  INITIAL: "initial",
+  PENDING: "pending",
+  SUCCESS: "success",
+  FAIL: "fail",
+  DESTROYED: "destroyed"
+};
+const LIMIT = 1e3;
+const i18nError = I18n.keyset("dash.dashkit-control.error");
+const getStatus = (status) => {
+  let res = "";
+  for (const [key, val] of Object.entries(LOAD_STATUS)) {
+    if (status === val) {
+      res = key;
+    }
+  }
+  return LOAD_STATUS[res];
+};
+const isValidRequiredValue = ({ required, value }) => {
+  const isEmptyArray = Array.isArray(value) && !value.length;
+  const isEmptyDateObject = !Array.isArray(value) && typeof value === "object" && (!value.from || !value.to);
+  if (!value || isEmptyArray || isEmptyDateObject) {
+    return required;
+  }
+  return false;
+};
+const getRequiredLabel = ({ title, required }) => {
+  return required ? `${title}*` : title;
+};
+const getLabels = (data) => {
+  const title = data.title;
+  const { showTitle, showInnerTitle, innerTitle, required } = data.source;
+  const label = showTitle ? getRequiredLabel({ title, required }) : "";
+  let innerLabel = "";
+  if (showInnerTitle && innerTitle) {
+    innerLabel = showTitle ? innerTitle : getRequiredLabel({ title: innerTitle, required });
+  }
+  return { label, innerLabel };
+};
+const getDatasetSourceInfo = ({
+  currentLoadedData,
+  data,
+  actualLoadedData
+}) => {
+  const { datasetFieldId, datasetId } = data.source;
+  let datasetFieldType = null;
+  const loadedData = currentLoadedData || actualLoadedData;
+  let datasetFields = [];
+  if (loadedData && loadedData.extra.datasets) {
+    const dataset = loadedData.extra.datasets.find((dataset2) => dataset2.id === datasetId);
+    if (dataset) {
+      datasetFields = dataset.fieldsList;
+      const field = dataset.fieldsList.find((field2) => field2.guid === datasetFieldId);
+      if (field) {
+        datasetFieldType = field.dataType;
+      }
+    }
+  }
+  const datasetFieldsMap = datasetFields.reduce(
+    (acc, field) => {
+      const fieldData = {
+        fieldType: field.fieldType,
+        guid: field.guid
+      };
+      acc[field.guid] = fieldData;
+      acc[field.title] = fieldData;
+      return acc;
+    },
+    {}
+  );
+  return { datasetId, datasetFieldId, datasetFieldType, datasetFields, datasetFieldsMap };
+};
+const checkDatasetFieldType = ({
+  currentLoadedData,
+  datasetData,
+  actualLoadedData,
+  onError,
+  onSucces
+}) => {
+  const { datasetFieldType } = getDatasetSourceInfo({
+    currentLoadedData,
+    data: datasetData,
+    actualLoadedData
+  });
+  if (datasetFieldType && DATASET_IGNORED_DATA_TYPES.includes(datasetFieldType)) {
+    const datasetErrorData = {
+      data: {
+        title: i18nError("label_field-error-title"),
+        message: i18nError("label_field-error-text")
+      }
+    };
+    onError(datasetErrorData, LOAD_STATUS.FAIL);
+  } else {
+    onSucces(currentLoadedData, LOAD_STATUS.SUCCESS);
+  }
+};
+const getErrorText = (data) => {
+  if (typeof data?.error?.code === "string") {
+    return data.error.code;
+  }
+  if (typeof data?.error === "string") {
+    return data.error;
+  }
+  if (typeof data?.message === "string") {
+    return data.message;
+  }
+  if (data?.status && data.status === 504) {
+    return i18nError("label_error-timeout");
+  }
+  return i18nError("label_error");
+};
+const prepareSelectorError = (data, requestId) => {
+  const errorBody = data?.error?.details?.sources?.distincts?.body;
+  if (errorBody) {
+    return {
+      isCustomError: true,
+      details: {
+        source: {
+          code: errorBody.code,
+          details: errorBody.details,
+          debug: errorBody.debug || (requestId ? { requestId } : "")
+        }
+      },
+      message: errorBody.message,
+      code: data.error?.code || ""
+    };
+  }
+  const errorContent = data?.error;
+  let debugInfo = errorContent?.debug || "";
+  if (typeof errorContent?.debug === "object" && requestId) {
+    debugInfo = { ...errorContent?.debug, requestId };
+  }
+  return {
+    ...errorContent,
+    debug: debugInfo,
+    message: getErrorText(data),
+    isCustomError: true
+  };
+};
+const isExternalControl = (data) => data.sourceType === DashTabItemControlSourceType.External;
+const processParamsForGetDistincts = ({
+  params,
+  datasetSourceInfo,
+  searchPattern
+}) => {
+  const { datasetFields, datasetFieldId, datasetFieldsMap } = datasetSourceInfo;
+  const splitParams = splitParamsToParametersAndFilters(
+    transformParamsToUrlParams(params),
+    datasetFields
+  );
+  const filtersParams = transformUrlParamsToParams(splitParams.filtersParams);
+  const where = Object.entries(filtersParams).reduce(
+    (result, [key, rawValue]) => {
+      if (key === datasetFieldId) {
+        return result;
+      }
+      const valuesWithOperation = (Array.isArray(rawValue) ? rawValue : [rawValue]).map(
+        (item) => resolveOperation(item)
+      );
+      if (valuesWithOperation.length > 0 && valuesWithOperation[0]?.value) {
+        const value = valuesWithOperation[0]?.value;
+        let operation = valuesWithOperation[0]?.operation;
+        let values = valuesWithOperation.map((item) => item?.value);
+        if (valuesWithOperation.length === 1 && value.indexOf("__interval_") === 0) {
+          const resolvedInterval = resolveIntervalDate(value);
+          if (resolvedInterval) {
+            values = [resolvedInterval.from, resolvedInterval.to];
+            operation = Operations.BETWEEN;
+          }
+        }
+        if (valuesWithOperation.length === 1 && value.indexOf("__relative_") === 0) {
+          const resolvedRelative = resolveRelativeDate(value);
+          if (resolvedRelative) {
+            values = [resolvedRelative];
+          }
+        }
+        result.push({
+          column: key,
+          operation,
+          values
+        });
+      }
+      return result;
+    },
+    [
+      {
+        column: datasetFieldId,
+        operation: "ICONTAINS",
+        values: [searchPattern]
+      }
+    ]
+  );
+  const filters = where.filter((el) => {
+    return datasetFieldsMap[el.column]?.fieldType !== DatasetFieldType.Measure;
+  }).map((filter) => {
+    return {
+      ref: { type: "id", id: filter.column },
+      operation: filter.operation,
+      values: filter.values
+    };
+  });
+  const parameter_values = splitParams.parametersParams.map(
+    ([key, value]) => {
+      return {
+        ref: { type: "id", id: key },
+        value
+      };
+    }
+  );
+  return {
+    filters,
+    parameter_values
+  };
+};
+const getScrollbarWidth = (node) => node.offsetWidth - node.clientWidth;
+const setNewLayout = ({
+  gridLayout,
+  layout,
+  widgetId,
+  cb,
+  contentHeight,
+  needSetDefault
+}) => {
+  const { rowHeight, margin } = gridLayout;
+  const newHeight = Math.ceil((contentHeight + margin[1]) / (rowHeight + margin[1]));
+  const correspondedLayoutItemIndex = layout.findIndex((layoutItem) => layoutItem.i === widgetId);
+  const correspondedLayoutItem = layout[correspondedLayoutItemIndex];
+  if (correspondedLayoutItem.h === newHeight && correspondedLayoutItem.minH === newHeight && correspondedLayoutItem.maxH === newHeight) {
+    return;
+  }
+  const adjustedWidgetLayout = {
+    ...correspondedLayoutItem,
+    h: newHeight,
+    maxH: newHeight,
+    minH: newHeight
+  };
+  cb({ widgetId, needSetDefault, adjustedWidgetLayout });
+};
+const setOverflowYStyle = (node, value) => {
+  const st = node.getAttribute("style");
+  node.setAttribute(
+    "style",
+    `${st || ""}${!st || st?.endsWith(";") ? "" : ";"}overflow-y: ${value} !important;`
+  );
+  return () => {
+    if (st) {
+      node.setAttribute("style", st);
+    } else {
+      node.removeAttribute("style");
+    }
+  };
+};
+const setStyle = (node, name, value) => {
+  const st = node.getAttribute("style");
+  node.setAttribute(
+    "style",
+    `${st || ""}${!st || st?.endsWith(";") ? "" : ";"}${name}: ${value} !important;`
+  );
+  return () => {
+    if (st) {
+      node.setAttribute("style", st);
+    } else {
+      node.removeAttribute("style");
+    }
+  };
+};
+function adjustWidgetLayout({
+  widgetId,
+  rootNode,
+  needSetDefault,
+  gridLayout,
+  layout,
+  cb,
+  mainNodeSelector,
+  scrollableNodeSelector,
+  needHeightReset
+}) {
+  if (DL.IS_MOBILE || needSetDefault) {
+    cb({ widgetId, needSetDefault });
+    return;
+  }
+  const node = rootNode.current;
+  if (!node) {
+    return;
+  }
+  const prevHeight = "100%";
+  if (needHeightReset) {
+    setStyle(node, "height", "auto");
+  }
+  const scrollableNode = node.querySelector(
+    scrollableNodeSelector || `.${CHARTKIT_SCROLLABLE_NODE_CLASSNAME}`
+  );
+  const mainNode = node.querySelector(mainNodeSelector || `.${CHARTKIT_MAIN_CLASSNAME}`);
+  const errorNode = node.querySelector(`.${CHARTKIT_ERROR_NODE_CLASSNAME}`);
+  const rootNodeTopPosition = node.getBoundingClientRect().top;
+  if (errorNode && !scrollableNode) {
+    const errorOffsetFromRoot = errorNode.getBoundingClientRect().top - rootNodeTopPosition;
+    const fullContentHeight2 = errorNode.scrollHeight + errorOffsetFromRoot;
+    const contentHeight2 = fullContentHeight2 > MAX_AUTO_HEIGHT_PX ? MAX_AUTO_HEIGHT_PX : fullContentHeight2;
+    setNewLayout({
+      contentHeight: Math.max(MIN_AUTO_HEIGHT_PX, contentHeight2),
+      gridLayout,
+      layout,
+      cb,
+      widgetId,
+      needSetDefault
+    });
+    if (needHeightReset) {
+      setStyle(node, "height", prevHeight);
+    }
+    return;
+  }
+  if (!scrollableNode) {
+    if (needHeightReset) {
+      setStyle(node, "height", prevHeight);
+    }
+    return;
+  }
+  const scrollableNodeTopPosition = scrollableNode.getBoundingClientRect().top;
+  const scrollableNodeTopOffsetFromRoot = scrollableNodeTopPosition - rootNodeTopPosition;
+  const belowLyingNodesHeight = collectBelowLyingNodesHeight(scrollableNode, node, 0);
+  let scrollBar = getScrollbarWidth(scrollableNode);
+  let scrollHeight = scrollableNode.scrollHeight;
+  if (scrollBar > 0) {
+    const reset = setOverflowYStyle(scrollableNode, "hidden");
+    scrollHeight = scrollableNode.scrollHeight;
+    scrollBar = scrollableNode.clientWidth >= scrollableNode.scrollWidth ? 0 : scrollBar;
+    reset();
+  } else if (scrollableNode.clientWidth < scrollableNode.scrollWidth) {
+    const reset = setOverflowYStyle(scrollableNode, "scroll");
+    scrollBar = getScrollbarWidth(scrollableNode);
+    reset();
+  }
+  const additionalPaddings = mainNode && mainNode.parentElement ? mainNode.parentElement.getBoundingClientRect().bottom - mainNode.getBoundingClientRect().bottom : 0;
+  const fullContentHeight = Math.floor(
+    scrollableNodeTopOffsetFromRoot + scrollHeight + scrollBar + belowLyingNodesHeight + additionalPaddings
+  );
+  const contentHeight = fullContentHeight > MAX_AUTO_HEIGHT_PX ? MAX_AUTO_HEIGHT_PX : fullContentHeight;
+  setNewLayout({
+    contentHeight: Math.max(MIN_AUTO_HEIGHT_PX, contentHeight),
+    gridLayout,
+    layout,
+    cb,
+    widgetId,
+    needSetDefault
+  });
+  if (needHeightReset) {
+    setStyle(node, "height", prevHeight);
+  }
+}
+function collectBelowLyingNodesHeight(node, limitNode, currentHeight = 0) {
+  if (node === limitNode) {
+    return currentHeight;
+  }
+  const nextSibling = node.nextElementSibling;
+  let height = currentHeight;
+  if (nextSibling) {
+    height = currentHeight + nextSibling.getBoundingClientRect().height;
+  }
+  if (nextSibling && nextSibling.nextElementSibling) {
+    return collectBelowLyingNodesHeight(nextSibling, limitNode, height);
+  } else if (node.parentElement) {
+    return collectBelowLyingNodesHeight(node.parentElement, limitNode, height);
+  } else {
+    return height;
+  }
+}
+function getControlHint(source) {
+  return source.showHint ? source.hint : void 0;
+}
+function getPreparedWrapSettings(backgroundColor, additionalStyle) {
+  const hasBgColor = Boolean(backgroundColor) && backgroundColor !== CustomPaletteBgColors.NONE;
+  const newBackgroundColor = backgroundColor === CustomPaletteBgColors.LIKE_CHART ? LIKE_CHART_COLOR_TOKEN : backgroundColor;
+  const style = {
+    ...additionalStyle,
+    backgroundColor: hasBgColor || backgroundColor === CustomPaletteBgColors.NONE ? newBackgroundColor : void 0
+  };
+  return {
+    style,
+    hasBgColor
+  };
+}
+function useTextColorStyles(oldTextColor, textColorSettings) {
+  const theme = useThemeType();
+  return React__default.useMemo(() => {
+    const resultedNewTextColor = typeof textColorSettings === "string" ? textColorSettings : textColorSettings?.[theme];
+    return {
+      color: typeof oldTextColor === "string" ? oldTextColor : resultedNewTextColor
+    };
+  }, [oldTextColor, textColorSettings, theme]);
+}
+function useBorderRadiusStyles(borderRadius, globalBorderRadius) {
+  return React__default.useMemo(() => {
+    return {
+      borderRadius: borderRadius ?? globalBorderRadius
+    };
+  }, [borderRadius, globalBorderRadius]);
+}
+function usePreparedWrapSettings({
+  ownWidgetSettings,
+  globalWidgetSettings,
+  additionalStyle,
+  defaultOldColor
+}) {
+  const theme = useThemeType();
+  const borderRadiusStyles = useBorderRadiusStyles(
+    ownWidgetSettings.borderRadius,
+    globalWidgetSettings.borderRadius
+  );
+  return React__default.useMemo(() => {
+    return getPreparedWrapSettings(
+      getResultedBgColor(
+        ownWidgetSettings.background,
+        theme,
+        defaultOldColor,
+        ownWidgetSettings.backgroundSettings
+      ) ?? getResultedBgColor(
+        globalWidgetSettings.background,
+        theme,
+        defaultOldColor,
+        globalWidgetSettings.backgroundSettings
+      ),
+      { ...borderRadiusStyles, ...additionalStyle }
+    );
+  }, [
+    ownWidgetSettings.background,
+    globalWidgetSettings.background,
+    ownWidgetSettings.backgroundSettings,
+    globalWidgetSettings.backgroundSettings,
+    additionalStyle,
+    borderRadiusStyles,
+    defaultOldColor,
+    theme
+  ]);
+}
+function getResultedBgColor(oldBgColor, theme, defaultColor, newBgColor) {
+  if (newBgColor?.color) {
+    return typeof newBgColor.color === "string" ? newBgColor.color : newBgColor.color?.[theme];
+  }
+  return getResultedOldBgColor(oldBgColor, defaultColor);
+}
+const b$d = block("chartkit-control-item");
+function withWrapForControls(WrappedComponent) {
+  function WithWrapForControls(props) {
+    const {
+      type,
+      width,
+      hidden,
+      label,
+      labelInside,
+      className,
+      style,
+      renderOverlay,
+      labelClassName,
+      hint,
+      labelPlacement
+    } = props;
+    if (hidden) {
+      return null;
+    }
+    const showLabel = label && !labelInside && type !== CONTROL_TYPE.BUTTON && type !== CONTROL_TYPE.CHECKBOX && type !== CONTROL_TYPE.TEXTAREA;
+    const customStyle = style || { width };
+    const controlStyle = DL.IS_MOBILE ? { width: "100%" } : customStyle;
+    const vertical = showLabel && labelPlacement === TitlePlacementOption.Top;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b$d(
+          "control",
+          { mobile: DL.IS_MOBILE, "without-label": !showLabel, vertical },
+          className
+        ),
+        style: controlStyle,
+        "data-qa": ControlQA.chartkitControl
+      },
+      renderOverlay?.(),
+      showLabel && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: b$d("title", { vertical }, labelClassName),
+          "data-qa": ControlQA.controlLabel
+        },
+        /* @__PURE__ */ React__default.createElement("span", { title: label, className: b$d("title-text") }, label),
+        hint && /* @__PURE__ */ React__default.createElement(MarkdownHelpPopover, { markdown: hint })
+      ),
+      /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props }),
+      hint && !showLabel && /* @__PURE__ */ React__default.createElement(MarkdownHelpPopover, { markdown: hint })
+    );
+  }
+  WithWrapForControls.propTypes = {
+    ...WrappedComponent.propTypes,
+    type: PropTypes.oneOf(Object.values(CONTROL_TYPE)).isRequired,
+    label: PropTypes.string,
+    labelInside: PropTypes.bool,
+    innerLabel: PropTypes.string,
+    className: PropTypes.string,
+    hidden: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  return WithWrapForControls;
+}
+var withWrapForControls_default = withWrapForControls;
+const DatepickerControl = registry.common.components.get("DatepickerControl", { wrap: true });
+const b$c = block("chartkit-control-item");
+const legoThemeNameMapper = {
+  light: "flat-secondary",
+  pseudo: "outlined",
+  link: "outlined-info",
+  accent: "action",
+  websearch: "action",
+  "flat-special": "flat-contrast",
+  "normal-special": "normal-contrast",
+  "pseudo-special": "outlined-contrast"
+};
+const tryResolveRelativeDate = (value, intervalPart) => {
+  try {
+    return resolveRelativeDate(value, intervalPart);
+  } catch (e) {
+    return false;
+  }
+};
+const tryResolveIntervalDate = (value) => {
+  try {
+    return resolveIntervalDate(value);
+  } catch (e) {
+    return false;
+  }
+};
+const controlSize = DL.IS_MOBILE ? MOBILE_SIZE.CONTROL : "m";
+const controlWidth = DL.IS_MOBILE ? "100%" : void 0;
+function BaseControlSelect({
+  searchable = true,
+  multiselect,
+  content,
+  value,
+  onChange,
+  getItems,
+  label,
+  labelInside,
+  innerLabel,
+  errorContent,
+  loadingItems,
+  itemsLoaderClassName,
+  onOpenChange,
+  placeholder,
+  required,
+  hasValidationError,
+  limitLabel,
+  disabled,
+  accentType
+}) {
+  const [currentValue, setCurrentValue] = React__default.useState(
+    multiselect ? wrapToArray(value) : value
+  );
+  React__default.useEffect(() => {
+    setCurrentValue(multiselect ? wrapToArray(value) : value);
+  }, [value, multiselect]);
+  const items = content.filter(({ value: value2 }) => value2 !== null && value2 !== "" && value2 !== void 0).map(({ title, value: value2 }) => ({
+    value: value2,
+    title,
+    key: value2
+  }));
+  const wrappedOnChange = React__default.useCallback(
+    (value2) => {
+      const wrappedValue = value2 === null || Array.isArray(value2) && !value2.length ? "" : value2;
+      setCurrentValue(multiselect ? wrapToArray(wrappedValue) : wrappedValue);
+      return onChange(wrappedValue);
+    },
+    [onChange, multiselect]
+  );
+  const showSelectAll = currentValue?.length === items?.length && required ? false : void 0;
+  const size = DL.IS_MOBILE ? MOBILE_SIZE.YC_SELECT : "s";
+  return /* @__PURE__ */ React__default.createElement(
+    YCSelect,
+    {
+      showSearch: searchable,
+      type: multiselect ? YCSelect.MULTIPLE : YCSelect.SINGLE,
+      allowEmptyValue: !required,
+      showMissingItems: true,
+      value: currentValue,
+      onUpdate: wrappedOnChange,
+      controlTestAnchor: ControlQA.controlSelect,
+      itemsListTestAnchor: ControlQA.controlSelectItems,
+      items: getItems ? void 0 : items,
+      initialItems: getItems ? items : void 0,
+      label: labelInside ? label : innerLabel,
+      limitLabel,
+      getItems,
+      loadingItems,
+      errorContent,
+      itemsLoaderClassName,
+      onOpenChange,
+      placeholder,
+      size,
+      className: b$c("yc-select", { accent: accentType }),
+      showSelectAll,
+      hasValidationError,
+      disabled
+    }
+  );
+}
+BaseControlSelect.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string.isRequired,
+  multiselect: PropTypes.bool,
+  searchable: PropTypes.bool,
+  content: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  onChange: PropTypes.func.isRequired,
+  getItems: PropTypes.func,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  labelInside: PropTypes.bool,
+  innerLabel: PropTypes.string,
+  loadingItems: PropTypes.bool,
+  errorContent: PropTypes.node,
+  itemsLoaderClassName: PropTypes.string,
+  onOpenChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  widgetId: PropTypes.string,
+  required: PropTypes.bool,
+  hasValidationError: PropTypes.bool,
+  limitLabel: PropTypes.bool,
+  disabled: PropTypes.bool,
+  accentType: PropTypes.string
+};
+function BaseControlInput({
+  placeholder,
+  value,
+  onChange,
+  innerLabel,
+  labelInside,
+  label,
+  hasValidationError,
+  disabled,
+  accentType
+}) {
+  const [text, setText] = React__default.useState(value || "");
+  React__default.useEffect(() => setText(value), [value]);
+  const isInvalid = hasValidationError && !text?.length;
+  return /* @__PURE__ */ React__default.createElement(
+    TextInput,
+    {
+      placeholder,
+      className: b$c("component", { input: true, accent: accentType }),
+      value: text,
+      onUpdate: (value2) => setText(value2),
+      onKeyPress: (event) => event.charCode === 13 && onChange(text),
+      onBlur: () => {
+        setTimeout(() => {
+          onChange(text);
+        });
+      },
+      label: labelInside ? label : innerLabel,
+      qa: ControlQA.controlInput,
+      size: controlSize,
+      error: isInvalid,
+      disabled
+    }
+  );
+}
+BaseControlInput.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  innerLabel: PropTypes.string,
+  labelInside: PropTypes.bool,
+  widgetId: PropTypes.string,
+  required: PropTypes.bool,
+  hasValidationError: PropTypes.bool,
+  disabled: PropTypes.bool,
+  accentType: PropTypes.string
+};
+function BaseControlTextArea({ label, theme, value, placeholder, onChange }) {
+  const [text, setText] = React__default.useState(value);
+  const [showModal, setShowModal] = React__default.useState(false);
+  const handleClose = React__default.useCallback(() => {
+    if (text === value) {
+      setShowModal(false);
+    } else if (confirm(i18n$8("chartkit.control.items", "close-confirm"))) {
+      setShowModal(false);
+      setText(value);
+    }
+  }, [value, text]);
+  const handleClick = () => {
+    setShowModal(true);
+  };
+  const buttonTheme = theme in legoThemeNameMapper ? legoThemeNameMapper[theme] : theme;
+  const buttonSize = DL.IS_MOBILE ? MOBILE_SIZE.BUTTON : "s";
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      view: buttonTheme || "normal",
+      size: buttonSize,
+      width: "max",
+      onClick: handleClick
+    },
+    label
+  ), showModal && /* @__PURE__ */ React__default.createElement(Dialog, { open: showModal, onClose: handleClose }, /* @__PURE__ */ React__default.createElement(Dialog.Header, { caption: label }), /* @__PURE__ */ React__default.createElement(Dialog.Body, null, /* @__PURE__ */ React__default.createElement(
+    TextArea,
+    {
+      value: text,
+      placeholder,
+      className: b$c("textarea"),
+      controlProps: {
+        style: {
+          resize: "both",
+          minWidth: 480,
+          minHeight: 28
+        }
+      },
+      onUpdate: (value2) => setText(value2),
+      size: controlSize
+    }
+  )), /* @__PURE__ */ React__default.createElement(
+    Dialog.Footer,
+    {
+      textButtonApply: i18n$8("chartkit.control.items", "apply"),
+      onClickButtonApply: () => {
+        setShowModal(false);
+        onChange(text);
+      },
+      textButtonCancel: i18n$8("chartkit.control.items", "close"),
+      onClickButtonCancel: handleClose
+    }
+  )));
+}
+BaseControlTextArea.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string.isRequired,
+  theme: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  widgetId: PropTypes.string
+};
+function BaseControlDatepicker({
+  minDate,
+  maxDate,
+  format,
+  timeFormat,
+  value,
+  onChange,
+  widgetId = "",
+  required,
+  hasValidationError,
+  innerLabel,
+  labelInside,
+  label,
+  labelPlacement,
+  disabled,
+  accentType
+}) {
+  const date = value && tryResolveRelativeDate(value) || value;
+  const wrappedOnChange = React__default.useCallback(
+    ({ from }) => onChange(from === null ? "" : from),
+    [onChange]
+  );
+  const vertical = labelPlacement === TitlePlacementOption.Top;
+  return /* @__PURE__ */ React__default.createElement(
+    DatepickerControl,
+    {
+      widgetId,
+      min: minDate,
+      max: maxDate,
+      from: date,
+      format: format || `dd.MM.yyyy ${timeFormat || ""}`.trim(),
+      scale: "day",
+      timezoneOffset: 0,
+      range: false,
+      hasClear: !required,
+      showApply: false,
+      allowNullableValues: true,
+      emptyValueText: i18n$8("chartkit.control.items", "value_undefined"),
+      onUpdate: wrappedOnChange,
+      controlSize,
+      controlWidth,
+      className: b$c("component", { vertical, accent: accentType }),
+      hasValidationError,
+      required,
+      label: labelInside ? label : innerLabel,
+      disabled
+    }
+  );
+}
+BaseControlDatepicker.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string.isRequired,
+  minDate: PropTypes.string,
+  maxDate: PropTypes.string,
+  format: PropTypes.string,
+  timeFormat: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  widgetId: PropTypes.string,
+  required: PropTypes.bool,
+  hasValidationError: PropTypes.bool,
+  innerLabel: PropTypes.string,
+  labelInside: PropTypes.bool,
+  labelPlacement: PropTypes.string,
+  disabled: PropTypes.bool,
+  accentType: PropTypes.string
+};
+function BaseControlRangeDatepicker({
+  minDate,
+  maxDate,
+  format,
+  timeFormat,
+  value,
+  returnInterval,
+  onChange,
+  widgetId = "",
+  required,
+  hasValidationError,
+  innerLabel,
+  labelInside,
+  label,
+  labelPlacement,
+  disabled,
+  accentType
+}) {
+  let from;
+  let to;
+  if (value) {
+    if (typeof value === "object") {
+      from = value.from && tryResolveRelativeDate(value.from, "start") || value.from;
+      to = value.to && tryResolveRelativeDate(value.to, "end") || value.to;
+    } else {
+      const resolved = value && tryResolveIntervalDate(value);
+      if (resolved) {
+        from = resolved.from;
+        to = resolved.to;
+      }
+    }
+  }
+  const wrappedOnChange = React__default.useCallback(
+    ({ from: from2, to: to2 }) => {
+      const resultFrom = from2 === null ? "" : from2;
+      const resultTo = to2 === null ? "" : to2;
+      let result;
+      if (returnInterval) {
+        result = resultFrom && resultTo ? `__interval_${resultFrom}_${resultTo}` : "";
+      } else {
+        result = { from: resultFrom, to: resultTo };
+      }
+      onChange(result);
+    },
+    [returnInterval, onChange]
+  );
+  const vertical = labelPlacement === TitlePlacementOption.Top;
+  return /* @__PURE__ */ React__default.createElement(
+    DatepickerControl,
+    {
+      widgetId,
+      min: minDate,
+      max: maxDate,
+      from,
+      to,
+      format: format || `dd.MM.yyyy ${timeFormat || ""}`.trim(),
+      timezoneOffset: 0,
+      hasClear: !required,
+      showApply: false,
+      allowNullableValues: true,
+      emptyValueText: i18n$8("chartkit.control.items", "value_undefined"),
+      onUpdate: wrappedOnChange,
+      controlSize,
+      controlWidth,
+      className: b$c("component", { vertical, accent: accentType }),
+      hasValidationError,
+      required,
+      fillPartialInterval: true,
+      label: labelInside ? label : innerLabel,
+      disabled
+    }
+  );
+}
+BaseControlRangeDatepicker.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string,
+  // for the case __interval_YYYY-MM-DD_YYYY-MM-DD
+  paramFrom: PropTypes.string,
+  paramTo: PropTypes.string,
+  format: PropTypes.string,
+  timeFormat: PropTypes.string,
+  returnInterval: PropTypes.bool,
+  minDate: PropTypes.string,
+  maxDate: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.shape({
+      from: PropTypes.string,
+      to: PropTypes.string
+    }),
+    PropTypes.string
+  ]),
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  widgetId: PropTypes.string,
+  required: PropTypes.bool,
+  hasValidationError: PropTypes.bool,
+  innerLabel: PropTypes.string,
+  labelInside: PropTypes.bool,
+  labelPlacement: PropTypes.string,
+  disabled: PropTypes.bool,
+  accentType: PropTypes.string
+};
+function BaseControlButton({ label, theme, onChange, qa, disabled, loading }) {
+  const buttonTheme = theme in legoThemeNameMapper ? legoThemeNameMapper[theme] : theme;
+  const size = DL.IS_MOBILE ? MOBILE_SIZE.BUTTON : "s";
+  const handleClick = () => {
+    setTimeout(onChange);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      view: buttonTheme || "normal",
+      size,
+      width: "max",
+      onClick: handleClick,
+      disabled,
+      qa,
+      loading
+    },
+    label || i18n$8("chartkit.control.items", "apply")
+  );
+}
+BaseControlButton.propTypes = {
+  label: PropTypes.string,
+  theme: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  qa: PropTypes.string,
+  loading: PropTypes.bool
+};
+function BaseControlCheckbox({ label, value, onChange, disabled }) {
+  const checked = value === CheckboxControlValue.TRUE;
+  const size = DL.IS_MOBILE ? MOBILE_SIZE.CHECKBOX : "m";
+  return /* @__PURE__ */ React__default.createElement(
+    Checkbox,
+    {
+      theme: "normal",
+      view: "default",
+      size,
+      checked,
+      title: label,
+      onChange: () => onChange(checked ? CheckboxControlValue.FALSE : CheckboxControlValue.TRUE),
+      disabled
+    },
+    label
+  );
+}
+BaseControlCheckbox.propTypes = {
+  label: PropTypes.string,
+  param: PropTypes.string.isRequired,
+  dateFormat: PropTypes.string,
+  minDate: PropTypes.string,
+  maxDate: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hidden: PropTypes.bool,
+  widgetId: PropTypes.string,
+  disabled: PropTypes.bool
+};
+const ControlInput = withWrapForControls_default(BaseControlInput);
+const ControlTextArea = withWrapForControls_default(BaseControlTextArea);
+const ControlSelect = withWrapForControls_default(BaseControlSelect);
+const ControlButton = withWrapForControls_default(BaseControlButton);
+const ControlCheckbox = withWrapForControls_default(BaseControlCheckbox);
+const ControlDatepicker = withWrapForControls_default(BaseControlDatepicker);
+const ControlRangeDatepicker = withWrapForControls_default(BaseControlRangeDatepicker);
+const b$b = block("debug-info-tool");
+function getDebugText({ label, value }, index) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: b$b("text"),
+      children: [
+        label,
+        ": ",
+        value
+      ]
+    },
+    index === void 0 ? null : `debug-item-${label}-${value}-${index}`
+  );
+}
+const DebugInfoTool = (props) => {
+  const dlDebugMode = useSelector(selectDebugMode);
+  if (!dlDebugMode) {
+    return null;
+  }
+  const text = props.data?.length ? props.data.map((item, index) => getDebugText(item, index)) : getDebugText(props);
+  const { modType } = props;
+  const mod = modType ? { [modType]: true } : null;
+  return /* @__PURE__ */ jsx("div", { className: b$b("label", mod), children: text });
+};
+const useBeforeLoad = (onBeforeLoad) => {
+  const onUpdate = React__default.useRef();
+  if (!onUpdate.current && onBeforeLoad) {
+    onUpdate.current = debounce(onBeforeLoad(), DEBOUNCE_RENDER_TIMEOUT);
+  }
+  return onUpdate.current;
+};
+const ExtendedDashKitContext = createContext(null);
+const i18n$7 = I18n.keyset("component.dashkit.view");
+const b$a = block("dashkit-plugin-menu");
+function getEntryId(configItem, state) {
+  const { type, data } = configItem;
+  let entryId;
+  if (type === DashTabItemType.Control) {
+    const source = data?.source;
+    if (source) {
+      entryId = source?.chartId;
+    }
+  } else {
+    const itemTabs = data?.tabs;
+    if (itemTabs) {
+      const stateTabId = state?.tabId;
+      const itemTab = itemTabs.find((iTab) => iTab.id === stateTabId) || itemTabs[0];
+      entryId = itemTab.chartId;
+    }
+  }
+  return entryId ? entryId : null;
+}
+function getDashKitMenu(onRemoveItem) {
+  return [
+    {
+      id: "edit",
+      title: i18n$7("label_edit"),
+      icon: /* @__PURE__ */ jsx(Icon, { data: Pencil, size: 16 }),
+      handler: (configItem, params, state) => {
+        const entryId = getEntryId(configItem, state);
+        if (entryId) {
+          getRouter().open(
+            { pathname: `/navigate/${entryId}`, search: toSearchParams(params) },
+            "_blank"
+          );
+        }
+      },
+      visible: (configItem) => {
+        const { type, data } = configItem;
+        return type === DashTabItemType.Widget || type === DashTabItemType.Control && data?.sourceType === DashTabItemControlSourceType.External;
+      }
+    },
+    {
+      id: MenuItems.Copy,
+      title: i18n$7("label_copy"),
+      icon: /* @__PURE__ */ jsx(Icon, { data: Copy, size: 16 }),
+      qa: DashKitOverlayMenuQa.CopyButton
+    },
+    {
+      id: MenuItems.Delete,
+      title: i18n$7("label_delete"),
+      icon: /* @__PURE__ */ jsx(Icon, { data: TrashBin, size: 16 }),
+      className: b$a("item", { danger: true }),
+      qa: DashKitOverlayMenuQa.RemoveButton,
+      handler: onRemoveItem
+    }
+  ];
+}
+const DashkitWrapper = React__default.forwardRef(
+  ({
+    skipReload = false,
+    dataProviderContextGetter,
+    setWidgetCurrentTab,
+    updateTabsWithGlobalState,
+    ...props
+  }, ref) => {
+    const contextValue = React__default.useMemo(() => {
+      return {
+        config: props.config,
+        defaultGlobalParams: props.defaultGlobalParams,
+        skipReload,
+        setWidgetCurrentTab,
+        updateTabsWithGlobalState,
+        dataProviderContextGetter,
+        hideErrorDetails: props.hideErrorDetails,
+        selectorsGroupTitlePlaceholder: props.selectorsGroupTitlePlaceholder
+      };
+    }, [
+      props.config,
+      props.defaultGlobalParams,
+      skipReload,
+      setWidgetCurrentTab,
+      updateTabsWithGlobalState,
+      dataProviderContextGetter,
+      props.hideErrorDetails,
+      props.selectorsGroupTitlePlaceholder
+    ]);
+    return /* @__PURE__ */ jsx(ExtendedDashKitContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(DashKit, { ...props, ref }) });
+  }
+);
+DashkitWrapper.displayName = "DashkitContainer";
+const WidgetContext = React__default.createContext(null);
+const WidgetContextProvider = (props) => {
+  const contextValue = React__default.useMemo(
+    () => ({
+      onWidgetMountChange: props.onWidgetMountChange,
+      onWidgetLoadData: props.onWidgetLoadData
+    }),
+    [props.onWidgetMountChange, props.onWidgetLoadData]
+  );
+  return /* @__PURE__ */ jsx(WidgetContext.Provider, { value: contextValue, children: props.children });
+};
+const useWidgetContext = ({
+  id,
+  elementRef
+}) => {
+  const context = React__default.useContext(WidgetContext);
+  const onMountChange = context?.onWidgetMountChange;
+  const onWidgetLoadData = context?.onWidgetLoadData;
+  React__default.useEffect(() => {
+    const element = elementRef.current;
+    if (element && onMountChange) {
+      onMountChange(true, id, element);
+      return () => {
+        onMountChange(false, id, element);
+      };
+    }
+    return () => {
+    };
+  }, [id, elementRef, onMountChange]);
+  return { onWidgetLoadData };
+};
+const b$9 = block("control-item-select");
+const i18n$6 = I18n.keyset("dash.dashkit-plugin-control.view");
+const ControlItemSelect = ({
+  defaults,
+  data,
+  id,
+  loadedData,
+  status,
+  actualParams,
+  onChange,
+  getDistincts,
+  loadingItems,
+  errorData,
+  validationError,
+  init,
+  setItemsLoader,
+  validateValue,
+  classMixin,
+  selectProps,
+  renderOverlay,
+  labelMixin
+}) => {
+  const dispatch = useDispatch();
+  let _loadingItemsTimer;
+  const workbookId = useSelector(selectDashWorkbookId);
+  const getSelectDistincts = React__default.useCallback(
+    async ({ searchPattern, nextPageToken }) => {
+      try {
+        const datasetData = data;
+        const datasetSourceInfo = getDatasetSourceInfo({
+          actualLoadedData: loadedData,
+          data: datasetData
+        });
+        const { datasetId, datasetFieldId } = datasetSourceInfo;
+        const { filters, parameter_values } = processParamsForGetDistincts({
+          params: actualParams,
+          datasetSourceInfo,
+          searchPattern
+        });
+        const { result } = await getDistincts(
+          {
+            datasetId,
+            workbookId,
+            fields: [
+              {
+                ref: { type: "id", id: datasetFieldId },
+                role_spec: { role: "distinct" }
+              }
+            ],
+            limit: LIMIT,
+            offset: LIMIT * nextPageToken,
+            filters,
+            parameter_values
+          },
+          void 0,
+          { datasetSourceInfo, searchPattern }
+        );
+        return {
+          items: result.data.Data.map(([value2]) => ({ value: value2, title: value2 })),
+          nextPageToken: result.data.Data.length < LIMIT ? void 0 : nextPageToken + 1
+        };
+      } catch (error) {
+        logger.logError("DashKit: Control getDistincts failed", error);
+        console.error("SELECT_GET_ITEMS_FAILED", error);
+        throw error;
+      }
+    },
+    [actualParams, data, getDistincts, loadedData, workbookId]
+  );
+  const getItems = async ({
+    searchPattern,
+    exactKeys,
+    nextPageToken = 0
+  }) => {
+    if (searchPattern || !searchPattern && nextPageToken) {
+      return getSelectDistincts({ searchPattern, nextPageToken });
+    } else if (exactKeys) {
+      return {
+        items: exactKeys.map((value2) => ({ value: value2, title: value2 })),
+        nextPageToken: nextPageToken + 1
+      };
+    }
+    return { items: [] };
+  };
+  const getErrorContent = () => {
+    const data2 = errorData?.data;
+    const errorText = getErrorText(data2 || {});
+    const errorTitle = data2?.title;
+    const errorMessage = errorTitle || errorText;
+    const showButtons = !errorData?.extra?.hideErrorDetails;
+    const buttonsSize = DL.IS_MOBILE ? MOBILE_SIZE.BUTTON : "s";
+    const buttonsWidth = DL.IS_MOBILE ? "max" : "auto";
+    return /* @__PURE__ */ jsxs("div", { className: b$9("error", { inside: true, mobile: DL.IS_MOBILE }), children: [
+      /* @__PURE__ */ jsx("span", { className: b$9("error-text"), title: errorMessage, children: errorMessage }),
+      showButtons && /* @__PURE__ */ jsxs("div", { className: b$9("buttons"), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: buttonsSize,
+            onClick: () => {
+              setItemsLoader(true);
+              init();
+            },
+            width: buttonsWidth,
+            children: i18n$6("button_retry")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: buttonsSize,
+            view: "flat",
+            onClick: () => dispatch(
+              openDialogErrorWithTabs({
+                error: prepareSelectorError(
+                  data2 || {}
+                ),
+                title: errorTitle
+              })
+            ),
+            width: buttonsWidth,
+            children: i18n$6("button_details")
+          }
+        )
+      ] })
+    ] });
+  };
+  const onOpenChange = ({ open }) => {
+    clearTimeout(_loadingItemsTimer);
+    if (status !== LOAD_STATUS.PENDING && loadingItems) {
+      setItemsLoader(false);
+    }
+    if (status === LOAD_STATUS.PENDING) {
+      if (open) {
+        setItemsLoader(true);
+      } else {
+        _loadingItemsTimer = setTimeout(() => {
+          if (status === LOAD_STATUS.PENDING) {
+            setItemsLoader(true);
+          }
+        });
+      }
+    }
+  };
+  const { source, sourceType } = data;
+  const fieldId = sourceType === DashTabItemControlSourceType.Dataset ? source.datasetFieldId : source.fieldName;
+  const selectedValue = unwrapFromArrayAndSkipOperation(defaults[fieldId]);
+  const preselectedContent = [{ title: selectedValue, value: selectedValue }];
+  const content = loadedData ? (loadedData.uiScheme?.controls[0]).content : null;
+  const disabled = loadedData?.uiScheme?.controls[0].disabled;
+  const emptyPaceholder = i18n$6("placeholder_empty");
+  const preparedValue = unwrapFromArrayAndSkipOperation(actualParams[fieldId]);
+  const initialValidationError = isValidRequiredValue({
+    required: source.required,
+    value: preparedValue
+  }) ? i18n$6("value_required") : null;
+  const selectValidationError = validationError || initialValidationError;
+  const placeholder = selectValidationError || emptyPaceholder;
+  const onSelectChange = (value2) => {
+    const hasError = validateValue({
+      required: source.required,
+      value: value2
+    });
+    if (hasError) {
+      return;
+    }
+    const valueWithOperation = addOperationForValue({
+      value: value2,
+      operation: source.operation
+    });
+    onChange({ param: fieldId, value: valueWithOperation });
+  };
+  const value = disabled || !loadedData ? "" : preparedValue;
+  const props = {
+    widgetId: id,
+    content: content || preselectedContent,
+    param: fieldId,
+    multiselect: source.multiselectable,
+    type: TYPE.SELECT,
+    className: b$9(null, classMixin),
+    labelClassName: b$9(null, labelMixin),
+    key: fieldId,
+    value,
+    onChange: onSelectChange,
+    onOpenChange,
+    loadingItems,
+    placeholder,
+    required: source.required,
+    hint: getControlHint(source),
+    hasValidationError: Boolean(selectValidationError),
+    renderOverlay,
+    disabled,
+    ...selectProps
+  };
+  if (status === LOAD_STATUS.FAIL) {
+    props.errorContent = getErrorContent();
+    props.itemsLoaderClassName = b$9("select-loader");
+  }
+  if (props.content.length >= LIMIT && sourceType === DashTabItemControlSourceType.Dataset) {
+    props.getItems = getItems;
+  }
+  return /* @__PURE__ */ jsx(ControlSelect, { ...props });
+};
+const b$8 = block("dashkit-control-error");
+const i18n$5 = I18n.keyset("component.dashkit.view");
+function Error({ onClickRetry, errorData }) {
+  const dispatch = useDispatch();
+  const errorTitle = errorData?.data?.title;
+  const hideErrorDetails = errorData?.extra?.hideErrorDetails;
+  const errorText = errorTitle || i18n$5("label_error");
+  const handleClick = () => {
+    if (errorData) {
+      dispatch(
+        openDialogErrorWithTabs({
+          error: prepareSelectorError(
+            errorData?.data || {},
+            errorData?.requestId
+          ),
+          title: errorTitle,
+          onRetry: () => {
+            onClickRetry?.();
+            dispatch(closeDialog());
+          }
+        })
+      );
+    }
+  };
+  const renderErrorContent = () => {
+    return /* @__PURE__ */ jsxs("div", { className: b$8({ mobile: DL.IS_MOBILE, "no-action": hideErrorDetails }), children: [
+      /* @__PURE__ */ jsx("span", { className: b$8("label"), children: errorText }),
+      /* @__PURE__ */ jsx(Icon, { data: TriangleExclamationFill, className: b$8("icon") })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(React__default.Fragment, { children: hideErrorDetails ? /* @__PURE__ */ jsx("div", { title: errorText, children: renderErrorContent() }) : /* @__PURE__ */ jsx(Button, { onClick: handleClick, title: errorText, view: "flat", children: renderErrorContent() }) });
+}
+const DATE_FORMAT = "YYYY-MM-DD";
+const intervalToString = (from, to) => {
+  return `__interval_${moment(from).format(DATE_FORMAT)}_${moment(to).format(DATE_FORMAT)}`;
+};
+const dateToString = (date) => {
+  return moment(date).format(DATE_FORMAT);
+};
+const getAfterDate = (first, second) => moment(first).isAfter(second) ? first : second;
+const getBeforeDate = (first, second) => moment(first).isAfter(second) ? second : first;
+const formatDefaultToString = (defaultValue, source) => {
+  const { acceptableValues, isRange } = source;
+  const { type, value: { from, to } = {} } = defaultValue;
+  switch (type) {
+    case "acceptableFrom":
+      return acceptableValues && acceptableValues.from ? dateToString(acceptableValues.from) : "";
+    case "acceptableTo":
+      return acceptableValues && acceptableValues.to ? dateToString(acceptableValues.to) : "";
+    case "acceptableFullInterval":
+      return acceptableValues && acceptableValues.from && acceptableValues.to ? intervalToString(acceptableValues.from, acceptableValues.to) : "";
+    case "date":
+      if (isRange) {
+        const fromDate = acceptableValues && acceptableValues.from ? getAfterDate(from, acceptableValues.from) : from;
+        const toDate = acceptableValues && acceptableValues.to ? getBeforeDate(to, acceptableValues.to) : to;
+        return intervalToString(fromDate, toDate);
+      } else {
+        return dateToString(from);
+      }
+    case "relative":
+      if (isRange) {
+        return intervalToString(
+          moment().subtract(from, "days"),
+          moment().subtract(to, "days")
+        );
+      } else {
+        return dateToString(moment().subtract(from, "days"));
+      }
+    default:
+      return "";
+  }
+};
+function prerenderMiddleware(item) {
+  const { defaults = {}, data = {} } = item;
+  const defaultsKeys = Object.keys(defaults);
+  if (defaultsKeys.some((key) => isPlainObject(defaults[key]))) {
+    const { source } = data;
+    return {
+      ...item,
+      defaults: defaultsKeys.reduce((acc, key) => {
+        const value = defaults[key];
+        acc[key] = isPlainObject(value) ? formatDefaultToString(value, source) : value;
+        return acc;
+      }, {})
+    };
+  }
+  return item;
+}
+const b$7 = block("dashkit-plugin-control");
+const i18n$4 = I18n.keyset("dash.dashkit-plugin-control.view");
+const CONTROL_LAYOUT_DEBOUNCE_TIME = 20;
+const ControlWrapper = React__default.forwardRef(function ControlWrapper2(props, nodeRef) {
+  useWidgetContext({ id: props.id, elementRef: nodeRef });
+  return /* @__PURE__ */ jsx("div", { ref: nodeRef, className: props.className, style: props.style, children: props.children });
+});
+let Control$1 = (_a = class extends React__default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.chartKitRef = React__default.createRef();
+    this.rootNode = React__default.createRef();
+    this._isUnmounted = false;
+    this._silentLoaderTimer = void 0;
+    this._cancelSource = null;
+    this.adjustWidgetLayout = debounce(this.setAdjustWidgetLayout, CONTROL_LAYOUT_DEBOUNCE_TIME);
+    this._onRedraw = null;
+    this.resolve = null;
+    this.initialParams = {
+      params: {}
+    };
+    this.showSilentLoader = () => {
+      this.setState((prevState) => {
+        return prevState.status === LOAD_STATUS.PENDING && prevState.silentLoading ? { showSilentLoader: true } : null;
+      });
+    };
+    this.setItemsLoader = (loadingItems) => {
+      if (this._isUnmounted) {
+        return;
+      }
+      this.setState({ loadingItems });
+    };
+    this.reload = ({ silentLoading } = {}) => {
+      if (this.context?.skipReload || !this.state.isInit) {
+        return;
+      }
+      this.setState({ status: LOAD_STATUS.PENDING, silentLoading: Boolean(silentLoading) });
+      this.init();
+    };
+    this.setLoadedData = (loadedData, status) => {
+      const isAvailableStatus = [LOAD_STATUS.SUCCESS, LOAD_STATUS.FAIL].includes(status);
+      if (this._isUnmounted || !isAvailableStatus) {
+        return;
+      }
+      const newInitialParams = { ...loadedData?.defaultParams, ...this.props.defaults };
+      const initialParamsChanged = !isEqual(newInitialParams, this.initialParams.params);
+      if (initialParamsChanged) {
+        this.initialParams.params = newInitialParams;
+      }
+      const statusResponse = getStatus(status);
+      if (statusResponse) {
+        this.setState({
+          status: statusResponse,
+          loadedData,
+          silentLoading: false,
+          showSilentLoader: false,
+          loadingItems: false
+        });
+      }
+      this.getCurrentWidgetResolvedMetaInfo(loadedData);
+      this._onRedraw?.();
+    };
+    this.init = async () => {
+      try {
+        const data = this.props.data;
+        const { workbookId } = this.props;
+        const payloadCancellation = chartsDataProvider.getRequestCancellation();
+        const dataProviderContextGetter = this.context?.dataProviderContextGetter?.(
+          this.props.id
+        );
+        const payload = {
+          data: {
+            config: {
+              data: {
+                shared: data
+              },
+              meta: {
+                stype: ControlType.Dash
+              }
+            },
+            controlData: {
+              id: this.props.id,
+              tabId: this.context?.config?.id
+            },
+            params: this.actualParams,
+            ...workbookId ? { workbookId } : {}
+          },
+          cancelToken: payloadCancellation.token,
+          headers: dataProviderContextGetter
+        };
+        if (data.sourceType !== DashTabItemControlSourceType.External) {
+          this.cancelCurrentRequests();
+        }
+        this._cancelSource = payloadCancellation;
+        const response = data.sourceType === DashTabItemControlSourceType.External ? null : (
+          // @ts-ignore
+          await chartsDataProvider.makeRequest(payload)
+        );
+        if (response === null || this._isUnmounted) {
+          return;
+        }
+        const loadedData = response.data;
+        loadedData.uiScheme = Array.isArray(loadedData.uiScheme) ? { controls: loadedData.uiScheme } : loadedData.uiScheme;
+        if (data.sourceType === DashTabItemControlSourceType.Dataset) {
+          checkDatasetFieldType({
+            currentLoadedData: loadedData,
+            datasetData: data,
+            actualLoadedData: this.state.loadedData,
+            onError: this.setErrorData,
+            onSucces: this.setLoadedData
+          });
+        } else {
+          this.setLoadedData(loadedData, LOAD_STATUS.SUCCESS);
+        }
+        if (this.state.isInit === false) {
+          this.setState({ isInit: true });
+        }
+      } catch (error) {
+        if (axios.isCancel(error)) {
+          return;
+        }
+        if (this.state.isInit === false) {
+          this.setState({ isInit: true });
+        }
+        logger.logError("DashKit: Control init failed", error);
+        console.error("DASHKIT_CONTROL_RUN", error);
+        let errorData = null;
+        if (this._isUnmounted) {
+          return;
+        }
+        if (error.response && error.response.data) {
+          errorData = {
+            data: { error: error.response.data?.error, status: error.response.data?.status },
+            requestId: error.response.headers["x-request-id"]
+          };
+        } else {
+          errorData = { data: { message: error.message } };
+        }
+        this.setErrorData(errorData, LOAD_STATUS.FAIL);
+      }
+    };
+    this.onChange = ({ param, value }) => {
+      const params = { [param]: value };
+      this.context?.updateTabsWithGlobalState?.({
+        params,
+        selectorItem: {
+          type: DashTabItemType.Control,
+          data: this.propsControlData,
+          id: this.props.id
+        },
+        appliedSelectorsIds: [this.props.id]
+      });
+      this.props.onStateAndParamsChange({ params: { [param]: value } }, { action: "setParams" });
+    };
+    this.onChangeExternal = ({ type, data }) => {
+      if (type === "PARAMS_CHANGED") {
+        const { params } = data;
+        this.context?.updateTabsWithGlobalState?.({
+          params,
+          selectorItem: {
+            type: DashTabItemType.Control,
+            data: this.propsControlData,
+            id: this.props.id
+          },
+          appliedSelectorsIds: [this.props.id]
+        });
+        this.props.onStateAndParamsChange({ params: params || {} });
+      }
+    };
+    this.onLoadExternal = ({ status, requestId, data }) => {
+      return status === "success" ? this.setLoadedData(
+        data.loadedData,
+        LOAD_STATUS.SUCCESS
+      ) : this.setLoadedData({ data, requestId }, LOAD_STATUS.FAIL);
+    };
+    this.setErrorData = (errorData, status) => {
+      if (this._isUnmounted) {
+        return;
+      }
+      this._onRedraw?.();
+      const statusResponse = getStatus(status);
+      if (statusResponse) {
+        this.setState({
+          status: statusResponse,
+          errorData,
+          silentLoading: false,
+          showSilentLoader: false,
+          loadingItems: false
+        });
+      }
+    };
+    this.validateValue = (args) => {
+      const hasError = isValidRequiredValue(args);
+      this.setValidationError(hasError);
+      return hasError;
+    };
+    this._onRedraw = debounce(this.props.onBeforeLoad(), DEBOUNCE_RENDER_TIMEOUT);
+    this.state = {
+      status: LOAD_STATUS.PENDING,
+      loadedData: null,
+      errorData: null,
+      silentLoading: false,
+      // loader with a vail that is not shown immediately
+      showSilentLoader: false,
+      // ChartKit parameter that equals false in case selector-chart has postUpdateOnChange param.
+      // Its mean, you do not need to do this.init, because the request has already been executed on the ChartKit side
+      forceUpdate: true,
+      dialogVisible: false,
+      loadingItems: true,
+      isInit: false,
+      validationError: null
+    };
+  }
+  componentDidMount() {
+    this.init();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.status !== LOAD_STATUS.PENDING && this._silentLoaderTimer) {
+      this.clearSilentLoaderTimer();
+    }
+    if (this.rootNode.current && this.props.data.sourceType !== DashTabItemControlSourceType.External) {
+      if (this.props.data.autoHeight) {
+        this.adjustWidgetLayout(false);
+      } else if (prevProps.data.autoHeight) {
+        this.adjustWidgetLayout(true);
+      }
+    }
+    const hasDataChanged = !isEqual(this.props.data, prevProps.data);
+    const hasParamsChanged = !isEqual(
+      this.filterSignificantParams(this.props.params),
+      this.filterSignificantParams(prevProps.params)
+    );
+    const hasDefaultsChanged = !isEqual(this.props.defaults, prevProps.defaults);
+    const initialParams = { ...this.state.loadedData?.defaultParams, ...this.props.defaults };
+    const needUpdateInitialParams = hasDefaultsChanged || !isEqual(initialParams, this.initialParams.params);
+    if (needUpdateInitialParams) {
+      this.initialParams = {
+        params: initialParams
+      };
+    }
+    const hasChanged = hasDataChanged || hasParamsChanged || hasDefaultsChanged;
+    if (this.state.forceUpdate && hasChanged) {
+      this.setState({
+        status: LOAD_STATUS.PENDING,
+        silentLoading: true
+      });
+      this.clearSilentLoaderTimer();
+      if (this.props.data.source.elementType !== ELEMENT_TYPE.SELECT) {
+        this._silentLoaderTimer = setTimeout(this.showSilentLoader, 800);
+      }
+      this.init();
+    }
+  }
+  componentWillUnmount() {
+    this._isUnmounted = true;
+    this.clearSilentLoaderTimer();
+    this.cancelCurrentRequests();
+  }
+  setAdjustWidgetLayout(needSetDefault) {
+    adjustWidgetLayout({
+      widgetId: this.props.id,
+      needSetDefault,
+      rootNode: this.rootNode,
+      gridLayout: this.props.gridLayout,
+      layout: this.props.layout,
+      cb: (data) => {
+        this.props.adjustWidgetLayout(data);
+        this._onRedraw?.();
+      }
+    });
+  }
+  get actualParams() {
+    return this.filterSignificantParams(this.props.params);
+  }
+  clearSilentLoaderTimer() {
+    if (this._silentLoaderTimer) {
+      clearTimeout(this._silentLoaderTimer);
+    }
+  }
+  filterSignificantParams(params) {
+    if (!params) {
+      return {};
+    }
+    const loadedData = this.state.loadedData;
+    const dependentSelectors = this.props.settings.dependentSelectors ?? false;
+    if (loadedData && loadedData.usedParams && dependentSelectors) {
+      return pick(params, Object.keys(loadedData.usedParams));
+    }
+    return dependentSelectors ? params : pick(params, Object.keys(this.props.defaults));
+  }
+  cancelCurrentRequests() {
+    if (this._cancelSource) {
+      this._cancelSource.cancel("DASHKIT_CONTROL_CANCEL_CURRENT_REQUESTS");
+    }
+  }
+  // public
+  getMeta() {
+    if (this.props.data.sourceType === DashTabItemControlSourceType.External) {
+      return this.chartKitRef.current?.getMeta();
+    }
+    return this.getCurrentWidgetMetaInfo();
+  }
+  getCurrentWidgetMetaInfo() {
+    return new Promise((resolve) => {
+      this.resolve = resolve;
+      if (this.state.status !== LOAD_STATUS.PENDING) {
+        const metaData = this.state.loadedData || null;
+        if (this.state.loadedData || this.state.status === LOAD_STATUS.FAIL) {
+          this.getCurrentWidgetResolvedMetaInfo(metaData);
+        }
+      }
+    });
+  }
+  filterDefaultsBySource() {
+    const sourcedFieldId = this.props.data?.sourceType === "dataset" ? this.props.data?.source?.datasetFieldId : null;
+    if (sourcedFieldId && this.props.defaults) {
+      return { [sourcedFieldId]: this.props.defaults[sourcedFieldId] };
+    }
+    return this.props.defaults;
+  }
+  getCurrentWidgetResolvedMetaInfo(data) {
+    if (!this.resolve) {
+      return;
+    }
+    const loadedData = data || this.state.loadedData || null;
+    const firstControlWithLabel = loadedData?.controls?.controls?.find(
+      (item) => item.label
+    );
+    const loadedWithError = Boolean(data?.data?.error) || this.state.status === LOAD_STATUS.FAIL;
+    const widgetMetaInfo = {
+      layoutId: this.props.id,
+      chartId: null,
+      widgetId: this.props.id,
+      title: this.props.data?.title || "",
+      label: firstControlWithLabel?.label || "",
+      params: this.props.params,
+      defaultParams: this.filterDefaultsBySource(),
+      loaded: Boolean(loadedData),
+      entryId: this.chartKitRef?.current?.props.id || null,
+      // to do built in widget ?
+      usedParams: loadedData?.usedParams ? Object.keys(this.filterSignificantParams(loadedData.usedParams)) : null,
+      datasets: loadedData?.extra?.datasets || null,
+      datasetId: loadedData?.sources?.fields?.datasetId || "",
+      type: "control",
+      sourceType: this.props.data?.sourceType,
+      visualizationType: null,
+      loadError: loadedWithError
+    };
+    this.resolve(widgetMetaInfo);
+  }
+  renderSilentLoader() {
+    if (this.state.showSilentLoader) {
+      return /* @__PURE__ */ jsx("div", { className: b$7("loader", { silent: true }), children: /* @__PURE__ */ jsx(Loader, { size: "s" }) });
+    }
+    return null;
+  }
+  getDistinctsWithHeaders() {
+    if (this.props.getDistincts) {
+      this._getDistinctsMemo = this._getDistinctsMemo || ((params, _, options) => {
+        const { getDistincts } = this.props;
+        const headers = this?.context?.dataProviderContextGetter?.(this.props.id);
+        return getDistincts?.(
+          params,
+          headers,
+          options
+        );
+      });
+    } else {
+      this._getDistinctsMemo = void 0;
+    }
+    return this._getDistinctsMemo;
+  }
+  renderSelectControl() {
+    const data = this.props.data;
+    const { id, defaults } = this.props;
+    const { loadedData, status, loadingItems, errorData, validationError } = this.state;
+    const { label, innerLabel } = getLabels(data);
+    return /* @__PURE__ */ jsx(
+      ControlItemSelect,
+      {
+        id,
+        data,
+        defaults,
+        status,
+        loadedData,
+        loadingItems,
+        actualParams: this.actualParams,
+        onChange: this.onChange,
+        init: this.init,
+        setItemsLoader: this.setItemsLoader,
+        validationError,
+        errorData,
+        validateValue: this.validateValue,
+        getDistincts: this.getDistinctsWithHeaders(),
+        classMixin: b$7("item"),
+        selectProps: { label, innerLabel }
+      }
+    );
+  }
+  renderControls() {
+    const data = this.propsControlData;
+    const { sourceType } = data;
+    const { id } = this.props;
+    switch (this.state.status) {
+      case LOAD_STATUS.PENDING:
+        if (!this.state.loadedData) {
+          return /* @__PURE__ */ jsx("div", { className: b$7(), children: /* @__PURE__ */ jsx(Loader, { size: "s" }) });
+        }
+        break;
+      case LOAD_STATUS.FAIL: {
+        return /* @__PURE__ */ jsx(Error, { errorData: this.state.errorData, onClickRetry: this.reload });
+      }
+    }
+    const { loadedData } = this.state;
+    const uiScheme = loadedData?.uiScheme;
+    return uiScheme?.controls.map((control) => {
+      const { param, type } = control;
+      const { source } = data;
+      const { required, operation } = source;
+      if (!Object.keys(this.actualParams).includes(param)) {
+        return null;
+      }
+      const preparedValue = unwrapFromArrayAndSkipOperation(this.actualParams[param]);
+      const validationError = this.getValidationError({
+        required,
+        value: preparedValue
+      });
+      const onChange = (value) => {
+        const hasError = this.validateValue({
+          required,
+          value
+        });
+        if (hasError) {
+          return;
+        }
+        const valueWithOperation = addOperationForValue({
+          value,
+          operation
+        });
+        this.onChange({ param, value: valueWithOperation });
+      };
+      const { label, innerLabel } = getLabels(data);
+      const props = {
+        ...control,
+        widgetId: id,
+        className: b$7("item"),
+        key: param,
+        value: control.disabled ? "" : preparedValue,
+        onChange,
+        innerLabel,
+        label,
+        required,
+        hasValidationError: Boolean(validationError),
+        hint: getControlHint(source)
+      };
+      if (type === TYPE.RANGE_DATEPICKER || type === TYPE.DATEPICKER) {
+        let fieldType = source?.fieldType || null;
+        if (sourceType === DashTabItemControlSourceType.Dataset) {
+          const { datasetFieldType } = getDatasetSourceInfo({
+            data,
+            actualLoadedData: this.state.loadedData
+          });
+          fieldType = datasetFieldType;
+        }
+        if (fieldType === "datetime" || fieldType === DATASET_FIELD_TYPES.GENERICDATETIME) {
+          props.timeFormat = "HH:mm:ss";
+        }
+      }
+      if (type === TYPE.INPUT) {
+        props.placeholder = validationError ? validationError : control.placeholder;
+      }
+      switch (type) {
+        case TYPE.INPUT:
+          return /* @__PURE__ */ jsx(ControlInput, { ...props });
+        case TYPE.DATEPICKER:
+          return /* @__PURE__ */ jsx(ControlDatepicker, { ...props });
+        case TYPE.RANGE_DATEPICKER:
+          return /* @__PURE__ */ jsx(ControlRangeDatepicker, { returnInterval: true, ...props });
+        case TYPE.CHECKBOX:
+          return /* @__PURE__ */ jsx(ControlCheckbox, { ...props });
+      }
+      return null;
+    });
+  }
+  render() {
+    const { data, editMode, id, workbookId, globalWidgetSettings, borderRadius } = this.props;
+    const controlData = data;
+    const { sourceType, source } = controlData;
+    const resultedBorderRadius = borderRadius ?? globalWidgetSettings?.borderRadius;
+    const style = resultedBorderRadius ? { borderRadius: resultedBorderRadius } : void 0;
+    if (sourceType === DashTabItemControlSourceType.External) {
+      const chartId = source.chartId;
+      return /* @__PURE__ */ jsxs(
+        ControlWrapper,
+        {
+          id: this.props.id,
+          ref: this.rootNode,
+          className: b$7({
+            external: true
+          }),
+          style,
+          children: [
+            /* @__PURE__ */ jsx(DebugInfoTool, { label: "chartId", value: chartId }),
+            /* @__PURE__ */ jsx(
+              ChartWrapper,
+              {
+                ...this.props,
+                usageType: "control",
+                id: chartId,
+                widgetId: id,
+                config: {
+                  data: {
+                    shared: data
+                  },
+                  meta: {
+                    stype: ControlType.Dash
+                  }
+                },
+                params: this.actualParams,
+                initialParams: this.initialParams,
+                onChartLoad: this.onLoadExternal,
+                onChange: this.onChangeExternal,
+                widgetType: sourceType,
+                editMode,
+                forwardedRef: this.chartKitRef,
+                workbookId,
+                updateTabsWithGlobalState: this.context?.updateTabsWithGlobalState
+              }
+            )
+          ]
+        }
+      );
+    }
+    const paramIdDebug = source.datasetFieldId || source.fieldName || data.param || "";
+    return /* @__PURE__ */ jsxs(
+      ControlWrapper,
+      {
+        id: this.props.id,
+        ref: this.rootNode,
+        className: b$7({ mobile: DL.IS_MOBILE }),
+        style,
+        children: [
+          this.renderSilentLoader(),
+          /* @__PURE__ */ jsx(
+            DebugInfoTool,
+            {
+              modType: "corner",
+              data: [
+                { label: "widgetId", value: id },
+                { label: "paramId", value: paramIdDebug }
+              ]
+            }
+          ),
+          source.elementType === TYPE.SELECT ? this.renderSelectControl() : this.renderControls()
+        ]
+      }
+    );
+  }
+  get propsControlData() {
+    return this.props.data;
+  }
+  setValidationError(hasError) {
+    if (hasError) {
+      this.setState({ validationError: i18n$4("value_required") });
+      return;
+    }
+    if (this.state.validationError) {
+      this.setState({ validationError: null });
+    }
+  }
+  getValidationError({ required, value }) {
+    let validationError = null;
+    if (required) {
+      const initialValidationError = isValidRequiredValue({
+        required,
+        value
+      }) ? i18n$4("value_required") : null;
+      validationError = this.state.validationError || initialValidationError;
+    }
+    return validationError;
+  }
+}, _a.contextType = ExtendedDashKitContext, _a);
+const plugin$1 = {
+  type: DashTabItemType.Control,
+  defaultLayout: DEFAULT_CONTROL_LAYOUT,
+  setSettings(settings) {
+    const { getDistincts } = settings;
+    plugin$1.getDistincts = getDistincts;
+    plugin$1.globalWidgetSettings = settings.globalWidgetSettings;
+    return plugin$1;
+  },
+  prerenderMiddleware,
+  renderer(props, forwardedRef) {
+    const workbookId = props.context.workbookId;
+    return /* @__PURE__ */ jsx(
+      Control$1,
+      {
+        ...props,
+        workbookId,
+        getDistincts: plugin$1.getDistincts,
+        ref: forwardedRef,
+        globalWidgetSettings: plugin$1.globalWidgetSettings
+      }
+    );
+  }
+};
+const i18n$3 = I18N.keyset("common.errors");
+const getControlWidthStyle = (placementMode, width) => {
+  if (placementMode === "auto") {
+    return { flex: "1 1 auto" };
+  }
+  return { width: `${width}${placementMode}` };
+};
+const clearLoaderTimer = (timer) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+};
+const addItemToLocalQueue = (queue, widgetId, groupItemId, param) => {
+  const updatedQueue = queue.filter((queueItem) => queueItem.groupItemId !== groupItemId);
+  updatedQueue.push({ id: widgetId, groupItemId, param });
+  return updatedQueue;
+};
+const filterSignificantParams = ({
+  params,
+  loadedData,
+  defaults,
+  dependentSelectors
+}) => {
+  if (!params) {
+    return {};
+  }
+  if (loadedData && loadedData.usedParams && dependentSelectors) {
+    return pick(params, Object.keys(loadedData.usedParams));
+  }
+  return dependentSelectors || !defaults ? params : pick(params, Object.keys(defaults));
+};
+const getErrorTitle = (errorInfo) => {
+  const datasetsField = errorInfo?.details && "sources" in errorInfo.details && errorInfo.details.sources ? Object.keys(errorInfo.details.sources)[0] : null;
+  if (!datasetsField) {
+    return null;
+  }
+  const datasetInfo = errorInfo?.details?.sources?.[datasetsField];
+  const isIncorrectEntryIdCode = datasetInfo?.code === ErrorCode.IncorrectEntryIdForEmbed || datasetInfo?.body?.code === ErrorCode.IncorrectEntryIdForEmbed;
+  if (errorInfo?.code === CHARTS_ERROR_CODE.DATA_FETCHING_ERROR && isIncorrectEntryIdCode) {
+    return i18n$3("label_error-outdated-message");
+  }
+  return null;
+};
+const CONTROL_SET_ERROR_DATA = /* @__PURE__ */ Symbol("control/SET_ERROR_DATA");
+const setErrorData = (payload) => {
+  return {
+    type: CONTROL_SET_ERROR_DATA,
+    payload
+  };
+};
+const CONTROL_SET_LOADED_DATA = /* @__PURE__ */ Symbol("control/SET_LOADED_DATA");
+const setLoadedData = (payload) => {
+  return {
+    type: CONTROL_SET_LOADED_DATA,
+    payload
+  };
+};
+const CONTROL_SET_LOADING_ITEMS = /* @__PURE__ */ Symbol("control/SET_LOADING_ITEMS");
+const setLoadingItems = (payload) => {
+  return {
+    type: CONTROL_SET_LOADING_ITEMS,
+    payload
+  };
+};
+const CONTROL_SET_VALIDATION_ERROR = /* @__PURE__ */ Symbol("control/SET_VALIDATION_ERROR");
+const setValidationError = (payload) => {
+  return {
+    type: CONTROL_SET_VALIDATION_ERROR,
+    payload
+  };
+};
+const CONTROL_SET_STATUS = /* @__PURE__ */ Symbol("control/SET_STATUS");
+const setStatus = (payload) => {
+  return {
+    type: CONTROL_SET_STATUS,
+    payload
+  };
+};
+const CONTROL_SET_IS_INIT = /* @__PURE__ */ Symbol("control/SET_IS_INIT");
+const setIsInit = (payload) => {
+  return {
+    type: CONTROL_SET_IS_INIT,
+    payload
+  };
+};
+const CONTROL_SET_SILENT_LOADER = /* @__PURE__ */ Symbol("control/SET_SILENT_LOADER");
+const setSilentLoader = (payload) => {
+  return {
+    type: CONTROL_SET_SILENT_LOADER,
+    payload
+  };
+};
+const i18n$2 = I18n.keyset("dash.dashkit-plugin-control.view");
+const getInitialState = () => {
+  return {
+    status: LOAD_STATUS.INITIAL,
+    loadedData: null,
+    errorData: null,
+    loadingItems: false,
+    validationError: null,
+    isInit: false,
+    showSilentLoader: false,
+    control: null
+  };
+};
+const reducer = (state, action) => {
+  switch (action.type) {
+    case CONTROL_SET_LOADED_DATA: {
+      const { status, loadedData } = action.payload;
+      loadedData.uiScheme = Array.isArray(loadedData.uiScheme) ? { controls: loadedData.uiScheme } : loadedData.uiScheme;
+      const control = loadedData.uiScheme ? loadedData.uiScheme.controls[0] : null;
+      return {
+        ...state,
+        status,
+        loadedData,
+        loadingItems: false,
+        showSilentLoader: false,
+        control
+      };
+    }
+    case CONTROL_SET_ERROR_DATA: {
+      const { status, errorData } = action.payload;
+      return {
+        ...state,
+        status,
+        errorData,
+        loadingItems: false,
+        showSilentLoader: false
+      };
+    }
+    case CONTROL_SET_LOADING_ITEMS: {
+      return { ...state, loadingItems: action.payload.loadingItems };
+    }
+    case CONTROL_SET_VALIDATION_ERROR: {
+      if (action.payload.hasError) {
+        return { ...state, validationError: i18n$2("value_required") };
+      }
+      if (state.validationError) {
+        return { ...state, validationError: null };
+      }
+      return state;
+    }
+    case CONTROL_SET_STATUS: {
+      return { ...state, status: action.payload.status };
+    }
+    case CONTROL_SET_IS_INIT: {
+      return { ...state, isInit: action.payload.isInit };
+    }
+    case CONTROL_SET_SILENT_LOADER: {
+      if (state.status === LOAD_STATUS.PENDING && action.payload.silentLoading) {
+        return { ...state, showSilentLoader: true };
+      }
+      return state;
+    }
+    default: {
+      return state;
+    }
+  }
+};
+const b$6 = block("dashkit-plugin-group-control");
+const i18n$1 = I18n.keyset("dash.dashkit-plugin-control.view");
+const Control = ({
+  id,
+  data,
+  params,
+  silentLoading,
+  onStatusChanged,
+  getDistincts,
+  requestHeaders,
+  onChange,
+  needReload,
+  workbookId,
+  dependentSelectors,
+  widgetId
+}) => {
+  const extDashkitContext = React__default.useContext(ExtendedDashKitContext);
+  const [prevNeedReload, setPrevNeedReload] = React__default.useState(needReload);
+  const isMounted = useMountedState([]);
+  const [prevParams, setPrevParams] = React__default.useState(null);
+  const currentSignificantParams = React__default.useRef();
+  const requestCancellationRef = React__default.useRef();
+  const [
+    {
+      status,
+      loadedData,
+      errorData,
+      loadingItems,
+      validationError,
+      isInit,
+      showSilentLoader,
+      control
+    },
+    dispatch
+  ] = React__default.useReducer(reducer, getInitialState());
+  let silentLoaderTimer;
+  const setErrorState = React__default.useCallback(
+    (newErrorData, errorStatus) => {
+      const statusResponse = getStatus(errorStatus);
+      if (statusResponse) {
+        dispatch(
+          setErrorData({
+            status: statusResponse,
+            errorData: newErrorData
+          })
+        );
+        onStatusChanged({ controlId: id, status: statusResponse });
+      }
+    },
+    [id, onStatusChanged]
+  );
+  const setLoadedDataState = React__default.useCallback(
+    (newLoadedData, loadedStatus) => {
+      const statusResponse = getStatus(loadedStatus);
+      if (statusResponse) {
+        if (!currentSignificantParams.current) {
+          currentSignificantParams.current = filterSignificantParams({
+            params,
+            loadedData: newLoadedData,
+            defaults: data.defaults,
+            dependentSelectors
+          });
+        }
+        dispatch(setLoadedData({ status: statusResponse, loadedData: newLoadedData }));
+        onStatusChanged({
+          controlId: id,
+          status: statusResponse,
+          loadedData: newLoadedData ? {
+            ...newLoadedData,
+            sourceType: data.sourceType,
+            id: data.id
+          } : null
+        });
+      }
+    },
+    [data.defaults, data.id, data.sourceType, dependentSelectors, id, onStatusChanged, params]
+  );
+  const cancelCurrentRunRequest = () => {
+    if (requestCancellationRef.current) {
+      requestCancellationRef.current.cancel();
+    }
+  };
+  const init = React__default.useCallback(async () => {
+    try {
+      const payloadCancellation = chartsDataProvider.getRequestCancellation();
+      const payload = {
+        data: {
+          config: {
+            data: {
+              shared: data
+            },
+            meta: {
+              stype: ControlType.Dash
+            }
+          },
+          controlData: {
+            id,
+            widgetId,
+            tabId: extDashkitContext?.config?.id
+          },
+          // currentParams are filled in after the first receiving of loadedData
+          params: currentSignificantParams.current || params,
+          ...workbookId ? { workbookId } : {}
+        },
+        cancelToken: payloadCancellation.token,
+        headers: requestHeaders?.()
+      };
+      cancelCurrentRunRequest();
+      if (status !== LOAD_STATUS.PENDING) {
+        dispatch(setStatus({ status: LOAD_STATUS.PENDING }));
+        onStatusChanged({ controlId: id, status: LOAD_STATUS.PENDING });
+      }
+      requestCancellationRef.current = payloadCancellation;
+      const response = await chartsDataProvider.makeRequest(payload);
+      if (response === null) {
+        return;
+      }
+      const newLoadedData = response.data;
+      if (data.sourceType === DashTabItemControlSourceType.Dataset) {
+        checkDatasetFieldType({
+          currentLoadedData: newLoadedData,
+          datasetData: data,
+          actualLoadedData: loadedData,
+          onSucces: setLoadedDataState,
+          onError: setErrorState
+        });
+      } else {
+        setLoadedDataState(newLoadedData, LOAD_STATUS.SUCCESS);
+      }
+    } catch (error) {
+      if (axios.isCancel(error)) {
+        return;
+      }
+      logger.logError("DashKit: Control init failed", error);
+      console.error("DASHKIT_CONTROL_RUN", error);
+      let errorData2 = null;
+      if (error.response && error.response.data) {
+        const errorInfo = error.response.data?.error;
+        errorData2 = {
+          data: {
+            error: errorInfo,
+            status: error.response.data?.status,
+            title: getErrorTitle(errorInfo)
+          },
+          requestId: error.response.headers["x-request-id"],
+          extra: {
+            hideErrorDetails: Boolean(extDashkitContext?.hideErrorDetails)
+          }
+        };
+      } else {
+        errorData2 = { data: { message: error.message } };
+      }
+      setErrorState(errorData2, LOAD_STATUS.FAIL);
+    }
+  }, [
+    data,
+    extDashkitContext?.config,
+    extDashkitContext?.hideErrorDetails,
+    widgetId,
+    id,
+    loadedData,
+    onStatusChanged,
+    params,
+    requestHeaders,
+    setErrorState,
+    setLoadedDataState,
+    status,
+    workbookId
+  ]);
+  const reload = () => {
+    clearLoaderTimer(silentLoaderTimer);
+    if (data.source.elementType !== ELEMENT_TYPE.SELECT) {
+      silentLoaderTimer = setTimeout(() => {
+        if (isInit) {
+          dispatch(setSilentLoader({ silentLoading }));
+        }
+      }, 800);
+    }
+    init();
+  };
+  const reloadAfterParamsChanges = () => {
+    const significantParams = filterSignificantParams({
+      params,
+      loadedData,
+      defaults: data.defaults,
+      dependentSelectors
+    });
+    if (!needReload && !isEqual(currentSignificantParams.current, significantParams)) {
+      currentSignificantParams.current = significantParams;
+      reload();
+    }
+  };
+  React__default.useEffect(() => {
+    dispatch(setIsInit({ isInit: true }));
+    return () => {
+      if (!isMounted()) {
+        clearLoaderTimer(silentLoaderTimer);
+        onStatusChanged({ controlId: id, status: LOAD_STATUS.DESTROYED });
+        cancelCurrentRunRequest();
+      }
+    };
+  }, [id, isMounted, onStatusChanged, silentLoaderTimer]);
+  if (status !== LOAD_STATUS.PENDING && silentLoaderTimer) {
+    clearLoaderTimer(silentLoaderTimer);
+  }
+  if (loadedData && !isEqual(params, prevParams)) {
+    if (currentSignificantParams.current) {
+      reloadAfterParamsChanges();
+    }
+    setPrevParams(params);
+  }
+  if (prevNeedReload !== needReload) {
+    setPrevNeedReload(needReload);
+    if (needReload) {
+      reload();
+    }
+  }
+  if (!isInit && status === LOAD_STATUS.INITIAL) {
+    init();
+  }
+  const setItemsLoader = React__default.useCallback(
+    (isLoadingItems) => {
+      if (!isMounted) {
+        return;
+      }
+      dispatch(setLoadingItems({ loadingItems: isLoadingItems }));
+    },
+    [isMounted]
+  );
+  const validateValue = React__default.useCallback((args) => {
+    const hasError = isValidRequiredValue(args);
+    dispatch(setValidationError({ hasError }));
+    return hasError;
+  }, []);
+  const getValidationError = ({
+    required,
+    value
+  }) => {
+    let activeValidationError = null;
+    if (required) {
+      const initialValidationError = isValidRequiredValue({
+        required,
+        value
+      }) ? i18n$1("value_required") : null;
+      activeValidationError = validationError || initialValidationError;
+    }
+    return activeValidationError;
+  };
+  const onChangeParams = React__default.useCallback(
+    ({ value, param }) => {
+      const newParam = { [param]: value };
+      onChange({ params: newParam, controlId: id });
+    },
+    [id, onChange]
+  );
+  const getTypeProps = (control2, controlData, currentValidationError) => {
+    const { source } = controlData;
+    const { type } = control2;
+    const typeProps = {};
+    if (type === "range-datepicker" || type === "datepicker") {
+      let fieldType = source?.fieldType || null;
+      if (controlData.sourceType === DashTabItemControlSourceType.Dataset) {
+        const { datasetFieldType } = getDatasetSourceInfo({
+          data: controlData,
+          actualLoadedData: loadedData
+        });
+        fieldType = datasetFieldType;
+      }
+      if (fieldType === "datetime" || fieldType === DATASET_FIELD_TYPES.GENERICDATETIME) {
+        typeProps.timeFormat = "HH:mm:ss";
+      }
+    }
+    if (type === "input") {
+      typeProps.placeholder = currentValidationError || control2.placeholder;
+    }
+    return typeProps;
+  };
+  const renderSilentLoader = () => {
+    if (showSilentLoader || !control && status === LOAD_STATUS.SUCCESS) {
+      return /* @__PURE__ */ jsx("div", { className: b$6("loader", { silent: true }), children: /* @__PURE__ */ jsx(Loader, { size: "s" }) });
+    }
+    return null;
+  };
+  const renderOverlay = React__default.useCallback(() => {
+    const paramId = data.source.datasetFieldId || data.source.fieldName || control?.param || "";
+    const debugData = [
+      { label: "itemId", value: id },
+      { label: "paramId", value: paramId }
+    ];
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsx(DebugInfoTool, { data: debugData, modType: "top" }),
+      renderSilentLoader()
+    ] });
+  }, [control?.param, data.source, id, renderSilentLoader]);
+  const renderLoadingStub = (props) => {
+    const {
+      source: { elementType }
+    } = data;
+    const stubProps = {
+      ...props,
+      value: "",
+      param: "",
+      onChange: () => {
+      }
+    };
+    switch (elementType) {
+      case DashTabItemControlElementType.Input:
+        return /* @__PURE__ */ jsx(ControlInput, { ...stubProps, type: "input" });
+      case DashTabItemControlElementType.Date:
+        return /* @__PURE__ */ jsx(ControlDatepicker, { ...stubProps, type: "datepicker" });
+      case DashTabItemControlElementType.Checkbox:
+        return /* @__PURE__ */ jsx(
+          ControlCheckbox,
+          {
+            ...stubProps,
+            className: b$6("item", { checkbox: true }),
+            type: "checkbox"
+          }
+        );
+    }
+    return null;
+  };
+  const handleClickRetry = React__default.useCallback(() => {
+    reload();
+  }, [reload]);
+  const renderControl = () => {
+    const controlData = data;
+    const { source, placementMode, width } = controlData;
+    const { required, operation, elementType, titlePlacement, accentType } = source;
+    const { label, innerLabel } = getLabels(controlData);
+    const style = getControlWidthStyle(placementMode, width);
+    const vertical = titlePlacement === TitlePlacementOption.Top;
+    const initialProps = {
+      innerLabel,
+      label,
+      labelPlacement: titlePlacement,
+      className: b$6("item"),
+      // TODO: move class to withWrapForContros after cleaning code from GroupControls flag
+      labelClassName: b$6("item-label", { vertical }),
+      style,
+      renderOverlay,
+      hint: getControlHint(controlData.source),
+      accentType
+    };
+    if (elementType === DashTabItemControlElementType.Select) {
+      return /* @__PURE__ */ jsx(
+        ControlItemSelect,
+        {
+          id,
+          data,
+          defaults: data.defaults || {},
+          status,
+          loadedData,
+          loadingItems,
+          actualParams: currentSignificantParams.current || params,
+          onChange: onChangeParams,
+          init,
+          setItemsLoader,
+          validationError,
+          errorData,
+          validateValue,
+          getDistincts,
+          classMixin: b$6("item"),
+          labelMixin: b$6("item-label", { vertical }),
+          selectProps: {
+            innerLabel,
+            label,
+            style,
+            limitLabel: true,
+            labelPlacement: titlePlacement,
+            accentType
+          },
+          renderOverlay
+        }
+      );
+    }
+    if (status === LOAD_STATUS.FAIL) {
+      return /* @__PURE__ */ jsx("div", { className: b$6("item-stub", { error: true }), style, children: /* @__PURE__ */ jsx(Error, { errorData, onClickRetry: handleClickRetry }) });
+    }
+    if (!control) {
+      return renderLoadingStub(initialProps);
+    }
+    const { param, disabled } = control;
+    const preparedValue = unwrapFromArrayAndSkipOperation(params[param]);
+    const currentValidationError = getValidationError({
+      required,
+      value: preparedValue
+    });
+    const onChangeControl = (value) => {
+      const hasError = validateValue({
+        required,
+        value
+      });
+      dispatch(setValidationError({ hasError }));
+      if (hasError) {
+        return;
+      }
+      const valueWithOperation = addOperationForValue({
+        value,
+        operation
+      });
+      if (!isEqual(valueWithOperation, unwrapFromArray(params[param]))) {
+        onChangeParams({ value: valueWithOperation, param });
+      }
+    };
+    const props = {
+      ...initialProps,
+      param,
+      type: control.type,
+      widgetId: id,
+      value: disabled ? "" : preparedValue,
+      required,
+      onChange: onChangeControl,
+      hasValidationError: Boolean(currentValidationError),
+      disabled,
+      ...getTypeProps(control, controlData, currentValidationError)
+    };
+    switch (control.type) {
+      case CONTROL_TYPE.INPUT:
+        return /* @__PURE__ */ jsx(ControlInput, { ...props });
+      case CONTROL_TYPE.DATEPICKER:
+        return /* @__PURE__ */ jsx(ControlDatepicker, { ...props });
+      case CONTROL_TYPE.RANGE_DATEPICKER:
+        return /* @__PURE__ */ jsx(ControlRangeDatepicker, { returnInterval: true, ...props });
+      case CONTROL_TYPE.CHECKBOX:
+        return /* @__PURE__ */ jsx(ControlCheckbox, { ...props, className: b$6("item", { checkbox: true }) });
+    }
+    return null;
+  };
+  return renderControl();
+};
+const GROUP_CONTROL_LAYOUT_DEBOUNCE_TIME = 20;
+const GROUP_CONTROL_LOADING_EMULATION_TIMEOUT = 100;
+const b$5 = block("dashkit-plugin-group-control");
+const i18n = I18n.keyset("dash.dashkit-plugin-control.view");
+const LOCAL_META_VERSION = 2;
+const GroupControlWrapper = React__default.forwardRef(function GroupControlWrapper2(props, nodeRef) {
+  useWidgetContext({ id: props.id, elementRef: nodeRef });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: nodeRef,
+      className: b$5({ mobile: DL.IS_MOBILE, static: !props.autoHeight, pulsate: props.pulsate }),
+      style: props.style,
+      children: props.children
+    }
+  );
+});
+const _GroupControl = class _GroupControl extends React__default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.rootNode = React__default.createRef();
+    this._isUnmounted = false;
+    this.adjustWidgetLayout = debounce(this.setAdjustWidgetLayout, GROUP_CONTROL_LAYOUT_DEBOUNCE_TIME);
+    this.resolve = null;
+    this.controlsLoadedCount = 0;
+    this.controlsProgressCount = 0;
+    this.controlsStatus = {};
+    this.controlsData = {};
+    this._quickActionTimer = null;
+    this.initialParams = {};
+    this.localMeta = { version: LOCAL_META_VERSION, queue: [] };
+    this._onRedraw = null;
+    this.fillQueueWithInitial = (checkByProps) => {
+      const initialQueue = [];
+      for (const groupItem of this.state.memoGroupItems || []) {
+        if (!groupItem.defaults) {
+          continue;
+        }
+        const param = Object.keys(groupItem.defaults)[0];
+        const defaultItemParam = groupItem.defaults[param];
+        if (!checkByProps && !this.state.stateParams[groupItem.id]) {
+          continue;
+        }
+        const isItemSignificant = checkByProps ? this.props.params[groupItem.id][param] !== defaultItemParam : this.state.stateParams[groupItem.id][param] !== defaultItemParam;
+        if (isItemSignificant) {
+          initialQueue.push(groupItem.id);
+        }
+      }
+      initialQueue.forEach((queueItemId) => {
+        this.localMeta.queue = addItemToLocalQueue(
+          this.localMeta.queue,
+          this.props.id,
+          queueItemId
+        );
+      });
+    };
+    this.getControlsIds = ({
+      data,
+      controlId
+    }) => {
+      let controlIdOrder = this.state.memoGroupItems.map(({ id }) => id);
+      if (!data.buttonApply || controlId) {
+        return controlId ? [controlId] : controlIdOrder;
+      }
+      const paramsInGroup = this.state.memoGroupItems.map(
+        (groupItem) => Object.keys(groupItem.defaults || {})[0]
+      );
+      const currentNamespaceAliases = this.getCurrentTabConfig()?.aliases[this.props.namespace];
+      const groupAliasesList = currentNamespaceAliases ? currentNamespaceAliases.reduce((aliasArr, currentAlias) => {
+        let participationInGroupCount = 0;
+        for (const alias of currentAlias) {
+          if (paramsInGroup.includes(alias)) {
+            participationInGroupCount++;
+          }
+          if (participationInGroupCount >= 2) {
+            aliasArr.push(currentAlias);
+            break;
+          }
+        }
+        return aliasArr;
+      }, []) : [];
+      groupAliasesList.forEach((alias) => {
+        const placementOrderIds = [];
+        controlIdOrder.forEach((id) => {
+          const usedParams = this.controlsData[id]?.uiScheme;
+          const control = Array.isArray(usedParams) ? usedParams[0] : usedParams?.controls[0];
+          if (control && "param" in control && alias.includes(control.param)) {
+            placementOrderIds.push(id);
+          }
+        });
+        const queueOrderIds = [];
+        const outQueueIds = [];
+        this.localMeta.queue.forEach(({ groupItemId, param }) => {
+          if (groupItemId && param && alias.includes(param)) {
+            queueOrderIds.push(groupItemId);
+          }
+        });
+        placementOrderIds.forEach((id) => {
+          if (!queueOrderIds.includes(id)) {
+            outQueueIds.push(id);
+          }
+        });
+        const changedOrderIds = outQueueIds.concat(queueOrderIds);
+        let currentPlacementIndex = 0;
+        controlIdOrder = controlIdOrder.map((id) => {
+          if (placementOrderIds[currentPlacementIndex] === id && changedOrderIds[currentPlacementIndex]) {
+            const newControlId = changedOrderIds[currentPlacementIndex];
+            currentPlacementIndex++;
+            return newControlId;
+          }
+          return id;
+        });
+      });
+      return controlIdOrder;
+    };
+    this.onChange = ({
+      params,
+      callChangeByClick,
+      controlId
+    }) => {
+      const controlData = this.propsControlData;
+      if (!controlData.buttonApply || callChangeByClick) {
+        const appliedControlsIds = this.getControlsIds({ data: controlData, controlId });
+        this.props.onStateAndParamsChange({ params }, { groupItemIds: appliedControlsIds });
+        this.localMeta.queue = [];
+        this.context?.updateTabsWithGlobalState?.({
+          params,
+          selectorItem: {
+            type: DashTabItemType.GroupControl,
+            data: controlData,
+            id: this.props.id
+          },
+          appliedSelectorsIds: appliedControlsIds
+        });
+        return;
+      }
+      if (controlId) {
+        if (controlData.buttonApply) {
+          this.localMeta.queue = addItemToLocalQueue(
+            this.localMeta.queue,
+            this.props.id,
+            controlId,
+            // need name of control main param for alias case
+            Object.keys(params)[0]
+          );
+        }
+        if (controlData.updateControlsOnChange && controlData.buttonApply) {
+          this.setState({
+            stateParams: this.getLocalUpdatedParams(controlId, params),
+            localUpdateLoader: true
+          });
+        } else {
+          this.setState({
+            stateParams: {
+              ...this.state.stateParams,
+              [controlId]: {
+                ...this.state.stateParams[controlId],
+                ...params
+              }
+            }
+          });
+        }
+        return;
+      }
+      this.setState({ stateParams: params });
+      this.localMeta.queue = [];
+    };
+    this.getUpdatedGroupParams = ({
+      params,
+      meta
+    }) => {
+      const defaultGlobalParams = this.context?.defaultGlobalParams || {};
+      const currentConfigItem = {
+        id: this.props.id,
+        data: this.props.data,
+        type: DashTabItemType.GroupControl,
+        namespace: this.props.namespace
+      };
+      const updatedStateParams = getItemsParams({
+        config: {
+          ...this.getCurrentTabConfig(),
+          items: [currentConfigItem]
+        },
+        itemsStateAndParams: {
+          [this.props.id]: { params },
+          __meta__: meta || this.localMeta
+        },
+        plugins: [pluginGroupControlBaseDL],
+        defaultGlobalParams,
+        globalParams: getUrlGlobalParams(getLocation().search, defaultGlobalParams) || {},
+        useStateAsInitial: true
+      });
+      return updatedStateParams[this.props.id];
+    };
+    this.getLocalUpdatedParams = (controlId, params) => {
+      const newParams = {
+        ...this.state.stateParams,
+        [controlId]: { ...this.state.stateParams[controlId], ...params }
+      };
+      return this.getUpdatedGroupParams({ params: newParams });
+    };
+    this.getCurrentWidgetResolvedMetaInfo = (id, loadedData) => {
+      let label = "";
+      if (loadedData?.uiScheme && "controls" in loadedData.uiScheme) {
+        label = loadedData.uiScheme.controls[0].label;
+      }
+      const currentItem = this.state.memoGroupItems?.find((item) => item.id === id);
+      const widgetMetaInfo = {
+        layoutId: this.props.id,
+        widgetId: this.props.id,
+        title: currentItem?.title,
+        label,
+        params: loadedData?.params,
+        defaultParams: currentItem ? this.filterDefaultsBySource(currentItem) : {},
+        loaded: Boolean(loadedData),
+        itemId: id,
+        usedParams: loadedData?.usedParams ? Object.keys(
+          filterSignificantParams({
+            params: loadedData.usedParams,
+            loadedData,
+            defaults: currentItem?.defaults,
+            dependentSelectors: this.dependentSelectors
+          })
+        ) : null,
+        datasets: loadedData?.extra?.datasets || null,
+        datasetId: loadedData?.sources?.fields?.datasetId || "",
+        type: "control",
+        sourceType: loadedData?.sourceType,
+        loadError: !loadedData
+      };
+      return widgetMetaInfo;
+    };
+    this.resolveMetaInControl = () => {
+      if (!this.resolve) {
+        return;
+      }
+      const result = [];
+      for (const [id, data] of Object.entries(this.controlsData)) {
+        result.push(this.getCurrentWidgetResolvedMetaInfo(id, data));
+      }
+      this.resolve(result);
+    };
+    this.handleStatusChanged = ({
+      controlId,
+      status,
+      loadedData
+    }) => {
+      if (this._isUnmounted) {
+        return;
+      }
+      if (status === LOAD_STATUS.DESTROYED) {
+        delete this.controlsData[controlId];
+        delete this.controlsStatus[controlId];
+        if (this.controlsStatus[controlId] === LOAD_STATUS.PENDING || this.controlsStatus[controlId] === LOAD_STATUS.INITIAL) {
+          this.controlsProgressCount--;
+          return;
+        }
+        this.controlsLoadedCount--;
+        return;
+      }
+      const isLoaded = status === LOAD_STATUS.SUCCESS || status === LOAD_STATUS.FAIL;
+      const isInitialPending = !this.controlsStatus[controlId] && status === LOAD_STATUS.PENDING;
+      const isReloadPending = this.controlsStatus[controlId] !== LOAD_STATUS.INITIAL && status === LOAD_STATUS.PENDING;
+      if (isLoaded) {
+        this.controlsLoadedCount++;
+        this.controlsProgressCount--;
+        if (loadedData || loadedData === null) {
+          this.controlsData[controlId] = loadedData;
+        }
+        this._onRedraw?.();
+      } else if (isInitialPending) {
+        this.controlsProgressCount++;
+      } else if (isReloadPending) {
+        this.controlsLoadedCount--;
+        this.controlsProgressCount++;
+      }
+      this.controlsStatus[controlId] = status;
+      if (!this.controlsProgressCount) {
+        if (this.props.data.autoHeight && !this.state.isInit) {
+          this.adjustWidgetLayout(false);
+        }
+        const disableButtons = Object.values(this.controlsData).every(
+          (data) => data === null || data.uiScheme?.controls[0].disabled
+        );
+        this.resolveMetaInControl();
+        this.setState({
+          needReload: false,
+          status: LOAD_STATUS.SUCCESS,
+          silentLoading: false,
+          isInit: true,
+          localUpdateLoader: false,
+          disableButtons
+        });
+      }
+    };
+    this.requestHeadersGetter = () => {
+      if (this.context?.dataProviderContextGetter) {
+        return this.context.dataProviderContextGetter(this.props.id);
+      }
+      return {};
+    };
+    this.handleApplyChange = () => {
+      this.applyButtonAction(CLICK_ACTION_TYPE.SET_PARAMS);
+    };
+    this.handleResetChange = () => {
+      this.applyButtonAction(CLICK_ACTION_TYPE.SET_INITIAL_PARAMS);
+    };
+    const memoGroupItems = this.getVisibleGroupItems();
+    this._onRedraw = debounce(this.props.onBeforeLoad(), DEBOUNCE_RENDER_TIMEOUT);
+    this.controlsProgressCount = memoGroupItems.length || 0;
+    memoGroupItems.forEach((item) => {
+      this.controlsStatus[item.id] = LOAD_STATUS.INITIAL;
+      this.controlsData[item.id] = null;
+    });
+    this.initialParams = this.props.params;
+    this.state = {
+      status: LOAD_STATUS.INITIAL,
+      silentLoading: false,
+      isInit: false,
+      stateParams: this.props.params,
+      needReload: false,
+      localUpdateLoader: false,
+      quickActionLoader: false,
+      disableButtons: true,
+      memoGroupItems
+    };
+  }
+  componentDidMount() {
+    this.init();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.rootNode.current) {
+      if (this.props.data.autoHeight) {
+        this.adjustWidgetLayout(false);
+      } else if (prevProps.data.autoHeight) {
+        this.adjustWidgetLayout(true);
+      }
+    }
+    const hasDataChanged = !isEqual(this.props.data, prevProps.data);
+    const hasParamsChanged = !isEqual(this.props.params, prevProps.params);
+    const hasTabChanged = this.props.context.currentTabId !== prevProps.context.currentTabId;
+    let memoGroupItems = this.state.memoGroupItems;
+    if (hasDataChanged || hasTabChanged) {
+      const updatedMemoGroupItems = this.getVisibleGroupItems();
+      memoGroupItems = updatedMemoGroupItems;
+      this.setState({
+        memoGroupItems
+      });
+    }
+    if (hasDataChanged) {
+      this.setState({
+        status: LOAD_STATUS.PENDING,
+        needReload: true,
+        silentLoading: true
+      });
+    }
+    if (hasParamsChanged || hasDataChanged) {
+      if (!this.props.data.buttonApply) {
+        this.setState({
+          stateParams: this.props.params
+        });
+        return;
+      }
+      const updatedStateParams = {};
+      const updatedItemsIds = [];
+      memoGroupItems?.forEach((groupItem) => {
+        const newPropsParams = filterSignificantParams({
+          params: this.props.params[groupItem.id],
+          loadedData: this.controlsData[groupItem.id],
+          defaults: groupItem.defaults,
+          dependentSelectors: this.dependentSelectors
+        });
+        const initialParams = filterSignificantParams({
+          params: this.initialParams[groupItem.id],
+          loadedData: this.controlsData[groupItem.id],
+          defaults: groupItem.defaults,
+          dependentSelectors: this.dependentSelectors
+        });
+        if (isEqual(initialParams, newPropsParams)) {
+          updatedStateParams[groupItem.id] = { ...this.state.stateParams[groupItem.id] };
+        } else {
+          updatedStateParams[groupItem.id] = { ...this.props.params[groupItem.id] };
+          this.initialParams[groupItem.id] = { ...this.props.params[groupItem.id] };
+          updatedItemsIds.push(groupItem.id);
+        }
+      });
+      if (this.props.data.updateControlsOnChange && (updatedItemsIds.length || !prevProps.data.updateControlsOnChange)) {
+        if (prevProps.data.updateControlsOnChange) {
+          updatedItemsIds.forEach((queueItemId) => {
+            this.localMeta.queue = addItemToLocalQueue(
+              this.localMeta.queue,
+              this.props.id,
+              queueItemId
+            );
+          });
+        } else {
+          this.fillQueueWithInitial();
+        }
+        const locallyUpdatedParams = this.getUpdatedGroupParams({
+          params: updatedStateParams
+        });
+        this.setState({ stateParams: locallyUpdatedParams });
+        return;
+      }
+      this.setState({
+        stateParams: updatedStateParams
+      });
+    }
+  }
+  componentWillUnmount() {
+    this._isUnmounted = true;
+    if (this.props.data.autoHeight) {
+      this.setAdjustWidgetLayout(true);
+    }
+  }
+  render() {
+    const isLoading = this.state.status === LOAD_STATUS.PENDING && !this.state.silentLoading || this.state.quickActionLoader || this.state.localUpdateLoader;
+    const { borderRadius, globalWidgetSettings } = this.props;
+    const resultedBorderRadius = borderRadius ?? globalWidgetSettings?.borderRadius;
+    const style = resultedBorderRadius ? { borderRadius: resultedBorderRadius } : void 0;
+    return /* @__PURE__ */ jsx(
+      GroupControlWrapper,
+      {
+        ref: this.rootNode,
+        id: this.props.id,
+        autoHeight: this.props.data.autoHeight ?? false,
+        pulsate: isLoading,
+        style,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: b$5("container", CHARTKIT_SCROLLABLE_NODE_CLASSNAME),
+            "data-qa": ControlQA.groupChartkitControl,
+            children: [
+              /* @__PURE__ */ jsx(
+                DebugInfoTool,
+                {
+                  label: "widgetId",
+                  value: this.props.id,
+                  modType: "bottom-right-corner"
+                }
+              ),
+              this.renderControls(),
+              isLoading && /* @__PURE__ */ jsx("div", { className: b$5("locked"), "data-qa": ControlQA.groupCommonLockedBlock })
+            ]
+          }
+        )
+      }
+    );
+  }
+  getMeta() {
+    return new Promise((resolve) => {
+      this.resolve = resolve;
+      if (this.state.status === LOAD_STATUS.SUCCESS) {
+        this.resolveMetaInControl();
+      }
+    });
+  }
+  // need for autoreload from dashkit
+  reload({ silentLoading }) {
+    if (this.context?.skipReload || !this.state.isInit || this._isUnmounted) {
+      return;
+    }
+    this.setState({
+      needReload: true,
+      status: LOAD_STATUS.PENDING,
+      silentLoading: Boolean(silentLoading)
+    });
+  }
+  get propsControlData() {
+    return this.props.data;
+  }
+  getVisibleGroupItems() {
+    const controlData = this.propsControlData;
+    const currentTabId = this.props.context.currentTabId;
+    if (!isEnabledFeature(Feature.EnableGlobalSelectors) || !currentTabId || !isItemGlobal({
+      data: controlData,
+      type: DashTabItemType.GroupControl
+    })) {
+      return controlData.group;
+    }
+    const isGroupSettingPrevailing = controlData.group.every(
+      (item) => item.impactType === void 0 || item.impactType === "asGroup"
+    );
+    const isGroupAvailableOnTab = isGlobalWidgetVisibleByMainSetting(
+      currentTabId,
+      controlData.impactType,
+      controlData.impactTabsIds
+    );
+    if (isGroupSettingPrevailing && isGroupAvailableOnTab) {
+      return controlData.group;
+    }
+    return controlData.group.filter(
+      (item) => isGroupItemVisibleOnTab({
+        item,
+        tabId: currentTabId,
+        isVisibleByMainSetting: isGroupAvailableOnTab
+      })
+    );
+  }
+  get dependentSelectors() {
+    return this.props.settings.dependentSelectors ?? false;
+  }
+  getCurrentTabConfig() {
+    return this.context?.config || {
+      aliases: {},
+      connections: []
+    };
+  }
+  filterDefaultsBySource(item) {
+    const sourcedFieldId = item.sourceType === "dataset" ? item.source?.datasetFieldId : null;
+    if (sourcedFieldId && item.defaults) {
+      return { [sourcedFieldId]: item.defaults[sourcedFieldId] };
+    }
+    return item.defaults;
+  }
+  getDistinctsWithHeaders() {
+    if (this.props.getDistincts) {
+      this._getDistinctsMemo = this._getDistinctsMemo || ((params, _, options) => {
+        const { getDistincts } = this.props;
+        const headers = this?.context?.dataProviderContextGetter?.(this.props.id);
+        return getDistincts?.(
+          params,
+          headers,
+          options
+        );
+      });
+    } else {
+      this._getDistinctsMemo = void 0;
+    }
+    return this._getDistinctsMemo;
+  }
+  renderControl(item) {
+    const { workbookId } = this.props;
+    const { silentLoading } = this.state;
+    return /* @__PURE__ */ jsx(
+      Control,
+      {
+        id: item.id,
+        data: item,
+        params: this.state.stateParams[item.id] || {},
+        onStatusChanged: this.handleStatusChanged,
+        silentLoading,
+        getDistincts: this.getDistinctsWithHeaders(),
+        onChange: this.onChange,
+        needReload: this.state.needReload,
+        workbookId,
+        dependentSelectors: this.dependentSelectors,
+        widgetId: this.props.id,
+        requestHeaders: this.requestHeadersGetter
+      },
+      item.id
+    );
+  }
+  applyButtonAction(action) {
+    let newParams = {};
+    let callChangeByClick = true;
+    switch (action) {
+      case CLICK_ACTION_TYPE.SET_PARAMS:
+        newParams = this.state.stateParams;
+        break;
+      case CLICK_ACTION_TYPE.SET_INITIAL_PARAMS: {
+        const defaultParams = this.state.memoGroupItems?.reduce(
+          (paramsState, data) => {
+            paramsState[data.id] = data.defaults || {};
+            return paramsState;
+          },
+          {}
+        ) || this.state.stateParams;
+        newParams = this.getUpdatedGroupParams({
+          params: defaultParams,
+          meta: { version: LOCAL_META_VERSION, queue: [] }
+        });
+        if (this.props.data.buttonApply) {
+          callChangeByClick = false;
+        }
+        break;
+      }
+    }
+    if (action === CLICK_ACTION_TYPE.SET_INITIAL_PARAMS || !isEqual(newParams, this.state.stateParams) || !isEqual(newParams, this.props.params)) {
+      if (action === CLICK_ACTION_TYPE.SET_PARAMS) {
+        if (this._quickActionTimer) {
+          clearTimeout(this._quickActionTimer);
+        }
+        this.setState({ quickActionLoader: true }, () => {
+          this._quickActionTimer = setTimeout(() => {
+            this._quickActionTimer = null;
+            this.setState({ quickActionLoader: false });
+          }, GROUP_CONTROL_LOADING_EMULATION_TIMEOUT);
+        });
+      }
+      this.onChange({ params: newParams, callChangeByClick });
+    }
+  }
+  renderSubHeader() {
+    const { showGroupName, groupName } = this.propsControlData;
+    const headerText = groupName || this.context?.selectorsGroupTitlePlaceholder;
+    if (showGroupName && headerText) {
+      return /* @__PURE__ */ jsx("div", { className: b$5("header"), children: /* @__PURE__ */ jsx(Text, { variant: "subheader-2", className: b$5("controls-title"), children: headerText }) });
+    }
+    return null;
+  }
+  renderButtons() {
+    const controlData = this.propsControlData;
+    const resetAction = { action: CLICK_ACTION_TYPE.SET_INITIAL_PARAMS };
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      controlData.buttonApply && /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          type: CONTROL_TYPE.BUTTON,
+          label: i18n("button_apply"),
+          updateOnChange: true,
+          theme: "action",
+          className: b$5("item", { button: true }),
+          onChange: this.handleApplyChange,
+          qa: ControlQA.controlButtonApply,
+          disabled: this.state.disableButtons
+        }
+      ),
+      controlData.buttonReset && /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          type: CONTROL_TYPE.BUTTON,
+          className: b$5("item", { button: true }),
+          label: i18n("button_reset"),
+          onClick: resetAction,
+          onChange: this.handleResetChange,
+          qa: ControlQA.controlButtonReset,
+          disabled: this.state.disableButtons
+        }
+      )
+    ] });
+  }
+  renderControls() {
+    return /* @__PURE__ */ jsxs("div", { className: b$5("controls"), children: [
+      this.renderSubHeader(),
+      this.state.memoGroupItems?.map(
+        (item) => this.renderControl(item)
+      ),
+      this.renderButtons()
+    ] });
+  }
+  async init() {
+    if (this._isUnmounted) {
+      return;
+    }
+    let stateParams;
+    const controlData = this.propsControlData;
+    if (controlData.updateControlsOnChange) {
+      this.fillQueueWithInitial(true);
+      stateParams = this.getUpdatedGroupParams({
+        params: this.props.params
+      });
+    } else {
+      stateParams = this.props.params;
+    }
+    this.setState({
+      status: LOAD_STATUS.PENDING,
+      stateParams
+    });
+  }
+  setAdjustWidgetLayout(needSetDefault) {
+    adjustWidgetLayout({
+      widgetId: this.props.id,
+      needSetDefault,
+      rootNode: this.rootNode,
+      gridLayout: this.props.gridLayout,
+      layout: this.props.layout,
+      cb: (data) => {
+        this.props.adjustWidgetLayout(data);
+        this._onRedraw?.();
+      }
+    });
+  }
+};
+_GroupControl.contextType = ExtendedDashKitContext;
+let GroupControl = _GroupControl;
+const plugin = {
+  type: DashTabItemType.GroupControl,
+  defaultLayout: DEFAULT_CONTROL_LAYOUT,
+  setSettings(settings) {
+    const { getDistincts } = settings;
+    plugin.getDistincts = getDistincts;
+    plugin.globalWidgetSettings = settings.globalWidgetSettings;
+    return plugin;
+  },
+  renderer(props, forwardedRef) {
+    const workbookId = props.context.workbookId;
+    return /* @__PURE__ */ jsx(
+      GroupControl,
+      {
+        ...props,
+        getDistincts: plugin.getDistincts,
+        workbookId,
+        ref: forwardedRef,
+        globalWidgetSettings: plugin.globalWidgetSettings
+      }
+    );
+  }
+};
+const b$4 = block("dashkit-plugin-container");
+const RendererWrapper = React__default.memo(function RendererWrapper2({
+  children,
+  type,
+  nodeRef,
+  classMod,
+  beforeContentNode,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    beforeContentNode,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: nodeRef,
+        className: b$4("wrapper", {
+          [type]: Boolean(type),
+          [String(classMod)]: Boolean(classMod)
+        }),
+        style,
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+const b$3 = block("dashkit-plugin-image");
+const pluginImage = {
+  type: DashTabItemType.Image,
+  defaultLayout: { w: 12, h: 12, minH: 1, minW: 1 },
+  setSettings: (settings) => {
+    pluginImage.globalWidgetSettings = settings.globalWidgetSettings;
+    return pluginImage;
+  },
+  renderer: PluginImageRenderer
+};
+function PluginImageRenderer(props, _ref) {
+  const {
+    id,
+    data: { alt, background, backgroundSettings, borderRadius, src, preserveAspectRatio },
+    layout
+  } = props;
+  const rootNodeRef = React__default.useRef(null);
+  useWidgetContext({
+    id: props.id,
+    elementRef: rootNodeRef
+  });
+  const handleUpdate = useBeforeLoad(props.onBeforeLoad);
+  const currentLayout = layout.find(({ i }) => i === props.id) || {
+    x: null,
+    y: null,
+    h: null,
+    w: null
+  };
+  const { style } = usePreparedWrapSettings({
+    ownWidgetSettings: {
+      background,
+      backgroundSettings,
+      borderRadius
+    },
+    globalWidgetSettings: pluginImage.globalWidgetSettings ?? {},
+    defaultOldColor: CustomPaletteBgColors.NONE
+  });
+  React__default.useEffect(() => {
+    handleUpdate?.();
+  }, [
+    handleUpdate,
+    currentLayout.x,
+    currentLayout.y,
+    currentLayout.h,
+    currentLayout.w,
+    preserveAspectRatio,
+    style
+  ]);
+  return /* @__PURE__ */ jsx(RendererWrapper, { id, type: DashTabItemType.Image, nodeRef: rootNodeRef, style, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: b$3({ "preserve-aspect-ratio": preserveAspectRatio }),
+      alt,
+      src
+    }
+  ) });
+}
+const b$2 = block("dashkit-plugin-text-container");
+const WIDGET_RESIZE_DEBOUNCE_TIMEOUT$1 = 100;
+const useWatchDomResizeObserver = ({
+  domNodeGetter,
+  onResize,
+  enable = false
+}) => {
+  const currentRectRef = React__default.useRef({ width: 0, height: 0 });
+  const domElement = enable ? domNodeGetter() : null;
+  const onResizeRef = React__default.useRef(onResize);
+  onResizeRef.current = onResize;
+  React__default.useEffect(() => {
+    if (!domElement) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      if (!entries[0]) {
+        return;
+      }
+      const { width, height } = entries[0].contentRect;
+      const currentRect = currentRectRef.current;
+      if (currentRect.height !== height || currentRect.width !== width) {
+        currentRect.height = height;
+        currentRect.width = width;
+        onResizeRef.current();
+      }
+    });
+    observer.observe(domElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [domElement, onResizeRef]);
+};
+const textPlugin = {
+  ...pluginText,
+  setSettings(settings) {
+    const { apiHandler, globalWidgetSettings } = settings;
+    pluginText._apiHandler = apiHandler;
+    textPlugin.globalWidgetSettings = globalWidgetSettings;
+    return textPlugin;
+  },
+  renderer: function Wrapper(props, forwardedRef) {
+    const rootNodeRef = React__default.useRef(null);
+    const [metaScripts, setMetaScripts] = React__default.useState();
+    const [isPending, setIsPending] = React__default.useState(false);
+    useWidgetContext({
+      id: props.id,
+      elementRef: rootNodeRef
+    });
+    const previousPendingState = usePrevious(isPending);
+    const isPendingChanged = isPending !== previousPendingState;
+    const handleUpdate = useBeforeLoad(props.onBeforeLoad);
+    const YfmWrapperKeyRef = React__default.useRef(0);
+    const layoutRef = React__default.useRef(props.layout);
+    layoutRef.current = props.layout;
+    const adjustLayout = React__default.useCallback(
+      debounce((needSetDefault) => {
+        adjustWidgetLayout({
+          widgetId: props.id,
+          needSetDefault,
+          rootNode: rootNodeRef,
+          gridLayout: props.gridLayout,
+          layout: layoutRef.current,
+          cb: (...args) => {
+            return props.adjustWidgetLayout(...args);
+          },
+          mainNodeSelector: `.${YFM_MARKDOWN_CLASSNAME}.${b$2()}`,
+          scrollableNodeSelector: `.${YFM_MARKDOWN_CLASSNAME} .${YFM_MARKDOWN_CLASSNAME}`
+        });
+      }, WIDGET_RESIZE_DEBOUNCE_TIMEOUT$1),
+      [props.id, rootNodeRef, layoutRef, props.adjustWidgetLayout, props.gridLayout]
+    );
+    const handleTextRender = React__default.useCallback(() => {
+      adjustLayout(!props.data.autoHeight);
+      handleUpdate?.();
+    }, [handleUpdate, adjustLayout, props.data.autoHeight]);
+    const textHandler = React__default.useCallback(
+      async (arg) => {
+        setIsPending(true);
+        const text = await pluginText._apiHandler(arg);
+        const nextMetaScripts = get(text, "meta.script");
+        setMetaScripts(nextMetaScripts);
+        setIsPending(false);
+        return text;
+      },
+      [setIsPending]
+    );
+    React__default.useEffect(() => {
+      handleTextRender();
+    }, [props.data.autoHeight]);
+    useWatchDomResizeObserver({
+      domNodeGetter: () => rootNodeRef.current?.querySelector(
+        `.${YFM_MARKDOWN_CLASSNAME}.${b$2()} .${YFM_MARKDOWN_CLASSNAME}`
+      ) || null,
+      onResize: () => {
+        adjustLayout(false);
+      },
+      enable: props.data.autoHeight
+    });
+    const content = /* @__PURE__ */ jsx(PluginText, { ...props, apiHandler: textHandler, ref: forwardedRef });
+    const data = props.data;
+    const { style, hasBgColor } = usePreparedWrapSettings({
+      ownWidgetSettings: {
+        background: data.background,
+        backgroundSettings: data.backgroundSettings,
+        borderRadius: data.borderRadius
+      },
+      globalWidgetSettings: textPlugin.globalWidgetSettings ?? {},
+      defaultOldColor: CustomPaletteBgColors.NONE
+    });
+    const currentLayout = props.layout.find(({ i }) => i === props.id) || {
+      x: null,
+      y: null,
+      h: null,
+      w: null
+    };
+    React__default.useEffect(() => {
+      if (isPendingChanged && !isPending) {
+        handleTextRender();
+      }
+    }, [isPendingChanged, isPending, handleTextRender]);
+    React__default.useEffect(() => {
+      handleUpdate?.();
+    }, [
+      // Widget dimensions
+      currentLayout.x,
+      currentLayout.y,
+      currentLayout.h,
+      currentLayout.w,
+      data.background?.color
+    ]);
+    React__default.useEffect(() => {
+      YfmWrapperKeyRef.current += 1;
+    }, [YfmWrapperKeyRef, data.text]);
+    return /* @__PURE__ */ jsx(RendererWrapper, { id: props.id, type: "text", nodeRef: rootNodeRef, style, children: /* @__PURE__ */ jsx(
+      YfmWrapper,
+      {
+        content: /* @__PURE__ */ jsx("div", { className: b$2("content-wrap", null), children: content }),
+        className: b$2({ "with-color": Boolean(hasBgColor) }),
+        metaScripts,
+        onRenderCallback: handleTextRender
+      },
+      `yfm_${YfmWrapperKeyRef.current}`
+    ) });
+  }
+};
+const b$1 = block("dashkit-plugin-title-container");
+const AnchorLink = ({ to, show }) => {
+  const location = useLocation();
+  const hash = `#${encodeURIComponent(to)}`;
+  const link = { ...location, hash };
+  if (DL.IS_MOBILE || !show) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Link, { className: b$1("anchor"), to: link, children: "#" });
+};
+const HINT_SIZE = 16;
+const TITLE_WITH_BG_COLOR_PADDING_TOP = 5;
+const getFontStyleBySize = (size) => {
+  if (typeof size === "object" && "fontSize" in size) {
+    return {
+      fontSize: size.fontSize + "px",
+      lineHeight: RECCOMMENDED_LINE_HEIGHT_MULTIPLIER
+    };
+  }
+  if (typeof size === "string") {
+    return TITLE_DEFAULT_SIZES[size];
+  }
+  return {};
+};
+const getTopOffsetBySize = (size, showBgColor) => {
+  const defaultPadding = showBgColor ? TITLE_WITH_BG_COLOR_PADDING_TOP : 0;
+  if (typeof size === "string") {
+    const fontStyles = TITLE_DEFAULT_SIZES[size];
+    const lineHeight2 = fontStyles.lineHeight ? parseInt(fontStyles.lineHeight, 10) : parseInt(fontStyles.fontSize, 10) * RECCOMMENDED_LINE_HEIGHT_MULTIPLIER;
+    return (lineHeight2 - HINT_SIZE) / 2 + defaultPadding;
+  }
+  const lineHeight = size.fontSize * RECCOMMENDED_LINE_HEIGHT_MULTIPLIER;
+  return (lineHeight - HINT_SIZE) / 2 + defaultPadding;
+};
+const isTitleOverflowed = (element, extraElements) => {
+  const originalWhiteSpace = element.style.whiteSpace;
+  element.style.whiteSpace = "nowrap";
+  const originalPosition = extraElements.style.position;
+  extraElements.style.position = "static";
+  const isOverflowed = element.scrollWidth > element.offsetWidth;
+  element.style.whiteSpace = originalWhiteSpace;
+  extraElements.style.position = originalPosition;
+  return isOverflowed;
+};
+const getHelpIconSizeBySize = (size) => {
+  const ICON_SIZE_MAP = [
+    ["xl", 20],
+    ["l", 18],
+    ["m", 16],
+    ["s", 14]
+  ];
+  if (typeof size === "string") {
+    return size === DashTabItemTitleSizes.XS ? "s" : size;
+  }
+  const fontSize = size.fontSize;
+  for (const [key, value] of ICON_SIZE_MAP) {
+    if (fontSize >= value) {
+      return key;
+    }
+  }
+  return "m";
+};
+const b = block("dashkit-plugin-title-container");
+const WIDGET_RESIZE_DEBOUNCE_TIMEOUT = 100;
+const MIN_AVAILABLE_TOP_OFFSET = -5;
+const titlePlugin = {
+  ...pluginTitle,
+  setSettings(settings) {
+    const { hideAnchor, hideHint, globalWidgetSettings } = settings;
+    titlePlugin.hideAnchor = hideAnchor;
+    titlePlugin.hideHint = hideHint;
+    titlePlugin.globalWidgetSettings = globalWidgetSettings;
+    return titlePlugin;
+  },
+  renderer: function PluginTitleRenderer(props, forwardedRef) {
+    const rootNodeRef = React__default.useRef(null);
+    const contentRef = React__default.useRef(null);
+    const extraRef = React__default.useRef(null);
+    useWidgetContext({
+      id: props.id,
+      elementRef: rootNodeRef
+    });
+    const [isInlineExtraElements, setIsInlineExtraElements] = React__default.useState(
+      false
+    );
+    const [extraElementsTop, setExtraElementsTop] = React__default.useState(
+      void 0
+    );
+    const data = props.data;
+    const handleUpdate = useBeforeLoad(props.onBeforeLoad);
+    const layoutRef = React__default.useRef(props.layout);
+    layoutRef.current = props.layout;
+    const adjustLayout = React__default.useCallback(
+      debounce((needSetDefault) => {
+        adjustWidgetLayout({
+          widgetId: props.id,
+          needSetDefault,
+          rootNode: rootNodeRef,
+          gridLayout: props.gridLayout,
+          layout: layoutRef.current,
+          // TODO: optimize call times in future
+          cb: (...args) => {
+            return props.adjustWidgetLayout(...args);
+          },
+          mainNodeSelector: `[${PLUGIN_ROOT_ATTR_NAME}="title"]`,
+          scrollableNodeSelector: `.${b()}`,
+          needHeightReset: true
+        });
+      }, WIDGET_RESIZE_DEBOUNCE_TIMEOUT),
+      [props.id, props.adjustWidgetLayout, props.gridLayout]
+    );
+    React__default.useEffect(() => {
+      adjustLayout(!data.autoHeight);
+    }, [adjustLayout, data.autoHeight, props.data?.text, props.data?.size]);
+    const content = /* @__PURE__ */ jsx(PluginTitle, { ...props, ref: forwardedRef });
+    const showHint = Boolean(!titlePlugin.hideHint && data.hint?.enabled && data.hint.text);
+    const showAnchor = !titlePlugin.hideAnchor && !DL.IS_MOBILE;
+    const withInlineExtraElements = (showAnchor || showHint) && isInlineExtraElements;
+    const withAbsoluteAnchor = showAnchor && !isInlineExtraElements;
+    const withAbsoluteHint = showHint && !isInlineExtraElements;
+    const { style, hasBgColor } = usePreparedWrapSettings({
+      ownWidgetSettings: {
+        background: data.background,
+        backgroundSettings: data.backgroundSettings,
+        borderRadius: data.borderRadius
+      },
+      globalWidgetSettings: titlePlugin.globalWidgetSettings ?? {},
+      defaultOldColor: CustomPaletteBgColors.NONE
+    });
+    const textColorStyles = useTextColorStyles(data.textColor, data.textSettings?.color);
+    const wrapperStyles = { ...style, ...textColorStyles };
+    const currentLayout = props.layout.find(({ i }) => i === props.id) || {
+      x: null,
+      y: null,
+      h: null,
+      w: null
+    };
+    React__default.useEffect(() => {
+      handleUpdate?.();
+    }, [
+      currentLayout.x,
+      currentLayout.y,
+      currentLayout.h,
+      currentLayout.w,
+      data.background,
+      data.size,
+      data.text
+    ]);
+    const calculateExtraElements = React__default.useCallback(() => {
+      if (contentRef.current && rootNodeRef.current) {
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const rootRect = rootNodeRef.current.getBoundingClientRect();
+        const offsetTop = contentRect.top - rootRect.top;
+        const titleElement = contentRef.current.children[0];
+        const isWidthFits = titleElement instanceof HTMLDivElement && extraRef.current ? !isTitleOverflowed(contentRef.current, extraRef.current) : contentRect.width <= rootRect.width;
+        const calculatedAnchorTop = offsetTop < MIN_AVAILABLE_TOP_OFFSET || isWidthFits ? 0 : offsetTop;
+        setExtraElementsTop(calculatedAnchorTop);
+        setIsInlineExtraElements(isWidthFits);
+      }
+    }, []);
+    React__default.useLayoutEffect(() => {
+      if (showAnchor || showHint) {
+        calculateExtraElements();
+      } else {
+        setIsInlineExtraElements(false);
+      }
+    }, [
+      currentLayout.x,
+      currentLayout.h,
+      currentLayout.w,
+      data.text,
+      data.size,
+      calculateExtraElements,
+      showAnchor,
+      showHint
+    ]);
+    React__default.useEffect(() => {
+      if (!showAnchor && !showHint) {
+        return void 0;
+      }
+      const debouncedCalculateAnchor = debounce(
+        calculateExtraElements,
+        WIDGET_RESIZE_DEBOUNCE_TIMEOUT
+      );
+      window.addEventListener("resize", debouncedCalculateAnchor);
+      return () => {
+        window.removeEventListener("resize", debouncedCalculateAnchor);
+      };
+    }, [showAnchor, showHint]);
+    const getStyles = () => {
+      const fontStyles = getFontStyleBySize(data.size);
+      if (isInlineExtraElements) {
+        return fontStyles;
+      }
+      return {
+        ...fontStyles,
+        top: showAnchor ? extraElementsTop : getTopOffsetBySize(data.size, hasBgColor)
+      };
+    };
+    return /* @__PURE__ */ jsx(RendererWrapper, { id: props.id, type: "title", nodeRef: rootNodeRef, style: wrapperStyles, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: b({
+          "with-auto-height": Boolean(data.autoHeight),
+          "with-color": Boolean(hasBgColor),
+          "with-inline-extra-elements": Boolean(withInlineExtraElements),
+          "with-absolute-anchor": withAbsoluteAnchor && !withAbsoluteHint,
+          "with-absolute-hint": withAbsoluteHint && !withAbsoluteAnchor,
+          "with-absolute-hint-and-anchor": withAbsoluteHint && withAbsoluteAnchor,
+          absolute: !isInlineExtraElements,
+          relative: !showAnchor
+        }),
+        ref: contentRef,
+        children: [
+          content,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: b("extra-elements-container", {
+                absolute: !isInlineExtraElements
+              }),
+              style: getStyles(),
+              ref: extraRef,
+              ...{ [EXPORT_PRINT_HIDDEN_ATTR]: true },
+              children: [
+                showHint && /* @__PURE__ */ jsx(
+                  MarkdownHelpPopover,
+                  {
+                    iconSize: getHelpIconSizeBySize(data.size),
+                    markdown: data.hint?.text ?? "",
+                    className: b("hint"),
+                    popoverProps: {
+                      placement: "bottom"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(AnchorLink, { to: data.text, show: showAnchor })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+};
+const widgetPlugin = {
+  type: "widget",
+  defaultLayout: { w: 12, h: 12 },
+  setSettings: (settings) => {
+    widgetPlugin.scope = settings.scope;
+    widgetPlugin.globalWidgetSettings = settings.globalWidgetSettings;
+    return widgetPlugin;
+  },
+  renderer: function Wrapper2(props, forwardedRef) {
+    const rootNodeRef = React__default.useRef(null);
+    const { onWidgetLoadData } = useWidgetContext({
+      id: props.id,
+      elementRef: rootNodeRef
+    });
+    const workbookId = props.context.workbookId;
+    const enableAssistant = props.context.enableAssistant;
+    const propsBg = props.data.tabs?.[0]?.background;
+    let oldWidgetBg = isOldBackgroundSettings(propsBg) ? propsBg : void 0;
+    if (widgetPlugin.scope === "dash" && !props.data.backgroundSettings) {
+      oldWidgetBg = { color: CustomPaletteBgColors.LIKE_CHART };
+    }
+    const { style } = usePreparedWrapSettings({
+      ownWidgetSettings: {
+        background: oldWidgetBg,
+        backgroundSettings: props.backgroundSettings,
+        borderRadius: props.borderRadius
+      },
+      globalWidgetSettings: widgetPlugin.globalWidgetSettings ?? {},
+      defaultOldColor: widgetPlugin.scope === "dash" ? CustomPaletteBgColors.LIKE_CHART : CustomPaletteBgColors.NONE
+    });
+    return /* @__PURE__ */ jsx(RendererWrapper, { type: "widget", nodeRef: rootNodeRef, id: props.id, style, children: /* @__PURE__ */ jsx(
+      ChartWrapper,
+      {
+        ...props,
+        usageType: "widget",
+        forwardedRef,
+        getMarkdown: MarkdownProvider.getMarkdown,
+        workbookId,
+        enableAssistant,
+        onWidgetLoadData,
+        backgroundColor: style?.backgroundColor
+      }
+    ) });
+  }
+};
+let isConfigured = false;
+const getDistinctsAction = () => {
+  const fetchDistinctsByApi = registry.common.functions.get("fetchDistinctsByApi");
+  return fetchDistinctsByApi;
+};
+let currentDefaultsGetter = null;
+const wrapPlugins = (plugins, pluginDefaultsGetter) => {
+  return plugins.map((plugin2) => {
+    return {
+      ...plugin2,
+      defaultLayout: pluginDefaultsGetter ? pluginDefaultsGetter(plugin2) : plugin2.defaultLayout
+    };
+  });
+};
+const getConfiguredDashKit = (pluginDefaultsGetter = null, options, shouldReconfigure) => {
+  if (currentDefaultsGetter !== pluginDefaultsGetter || !isConfigured || shouldReconfigure) {
+    const commonSettings = {
+      scope: options?.scope,
+      globalWidgetSettings: {
+        background: options?.globalWidgetSettings?.background,
+        backgroundSettings: options?.globalWidgetSettings?.backgroundSettings,
+        borderRadius: options?.globalWidgetSettings?.borderRadius ?? OLD_DEFAULT_WIDGET_BORDER_RADIUS
+      }
+    };
+    const titleSettings = {
+      ...commonSettings,
+      hideAnchor: options?.disableHashNavigation,
+      hideHint: options?.disableTitleHints
+    };
+    const textSettings = {
+      ...commonSettings,
+      apiHandler: MarkdownProvider.getMarkdown
+    };
+    const controlSettings = {
+      ...commonSettings,
+      getDistincts: getDistinctsAction()
+    };
+    const plugins = wrapPlugins(
+      [
+        titlePlugin.setSettings(titleSettings),
+        textPlugin.setSettings(textSettings),
+        plugin$1.setSettings(controlSettings),
+        plugin.setSettings(controlSettings),
+        widgetPlugin.setSettings(commonSettings),
+        pluginImage.setSettings(commonSettings)
+      ],
+      pluginDefaultsGetter
+    );
+    if (isConfigured) {
+      DashKit.reloadPlugins(...plugins);
+    } else {
+      DashKit.registerPlugins(...plugins);
+    }
+    currentDefaultsGetter = pluginDefaultsGetter;
+  }
+  if (isConfigured) {
+    return DashkitWrapper;
+  }
+  isConfigured = true;
+  DashKit.setSettings({
+    gridLayout: { margin: DEFAULT_DASH_MARGINS },
+    theme: "datalens",
+    isMobile: DL.IS_MOBILE,
+    menu: getDashKitMenu()
+  });
+  return DashkitWrapper;
+};
+export {
+  ControlButton as C,
+  DEFAULT_CONTROL_LAYOUT as D,
+  ExtendedDashKitContext as E,
+  FIXED_GROUP_HEADER_ID as F,
+  MAX_DASH_BORDER_RADIUS as M,
+  OLD_DEFAULT_WIDGET_BORDER_RADIUS as O,
+  WidgetContextProvider as W,
+  FIXED_GROUP_CONTAINER_ID as a,
+  DASH_BORDER_RADIUS_STEP as b,
+  MIN_DASH_BORDER_RADIUS as c,
+  isExternalControl as d,
+  adjustWidgetLayout as e,
+  DebugInfoTool as f,
+  DASH_MARGIN_STEP as g,
+  MAX_DASH_MARGIN as h,
+  isWidgetTypeDoNotNeedOverlay as i,
+  MIN_DASH_MARGIN as j,
+  DEFAULT_DASH_MARGINS as k,
+  getUrlGlobalParams as l,
+  getDashEntryUrl as m,
+  getNewDashUrl as n,
+  ControlCheckbox as o,
+  ControlRangeDatepicker as p,
+  ControlDatepicker as q,
+  ControlTextArea as r,
+  ControlInput as s,
+  ControlSelect as t,
+  useBeforeLoad as u,
+  isValidRequiredValue as v,
+  MIN_AUTO_HEIGHT_PX as w,
+  MIN_AUTO_HEIGHT_ROWS as x,
+  getDashKitMenu as y,
+  getConfiguredDashKit as z
+};