import _extends from '@babel/runtime/helpers/extends';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.array.find-index.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.array.splice.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.promise.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import React__default, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { SkeletonText, ErrorBoundary, InlineNotification } from '@carbon/react';
import classnames from 'classnames';
import warning from 'warning';
import { settings } from '../../constants/Settings.js';
import { CARD_TYPES, DASHBOARD_EDITOR_CARD_TYPES } from '../../constants/LayoutConstants.js';
import DashboardGrid from '../Dashboard/DashboardGrid.js';
import CardEditor from '../CardEditor/CardEditor.js';
import ImageGalleryModal, { ImagePropTypes } from '../ImageGalleryModal/ImageGalleryModal.js';
import { getTranslatedLabel } from '../../utils/cardUtilityFunctions.js';
import DashboardEditorHeader from './DashboardEditorHeader/DashboardEditorHeader.js';
import DashboardEditorCardRenderer from './DashboardEditorCardRenderer.js';
import { DataItemsPropTypes, DashboardEditorActionsPropTypes, getDefaultCard, getDuplicateCard, renderBreakpointInfo, renderDefaultIconByName, defaultDashboardEditorActionsProps } from './editorUtils.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iotPrefix = settings.iotPrefix;
var propTypes = {
  /** Dashboard title */
  title: PropTypes.node,
  /** initial dashboard data to edit */
  initialValue: PropTypes.shape({
    cards: PropTypes.arrayOf(PropTypes.object),
    layouts: PropTypes.object // eslint-disable-line react/forbid-prop-types
  }),
  isSummaryDashboard: PropTypes.bool,
  /** supported card types */
  supportedCardTypes: PropTypes.arrayOf(PropTypes.string),
  /**
   * Dictionary of icons that corresponds to both `supportedCardTypes` and `i18n`
   * ex:
   * {
   *  TIMESERIES: <EscalatorDown />,
   *  ALERT: <Code24 />,
   *  CUSTOM: <Basketball32 />,
   *  ANOTHER_CUSTOM: <Automobile32 />,
   * }
   */
  icons: PropTypes.objectOf(PropTypes.node),
  /** if enabled, renders a ContentSwitcher with IconSwitches that allow for manually changing the breakpoint,
   * regardless of the screen width
   */
  breakpointSwitcher: PropTypes.shape({
    enabled: PropTypes.bool,
    initialValue: PropTypes.string
  }),
  /** if provided, renders header content above preview */
  renderHeader: PropTypes.func,
  /** if provided, is used to render cards in dashboard
   * renderCardPreview( cardConfig: Object,
                        commonCardProps: Object
                        onSelectCard: Function,
                        onDuplicateCard: Function,
                        onRemoveCard: Function,
                        isSelected: Boolean): Node
   */
  renderCardPreview: PropTypes.func,
  /** if provided, renders array elements inside of BreadcrumbItem in header */
  headerBreadcrumbs: PropTypes.arrayOf(PropTypes.element),
  /** if provided, renders node underneath the header and above the dashboard grid */
  notification: PropTypes.node,
  /** if provided, renders edit button next to title */
  isTitleEditable: PropTypes.bool,
  /** if provided, returns an array of strings which are the dataItems to be allowed
   * on each card
   * getValidDataItems(card, selectedTimeRange)
   */
  getValidDataItems: PropTypes.func,
  /** if provided, returns an array of strings which are the timeRanges to be allowed
   * on each card
   * getValidTimeRanges(card, selectedDataItems)
   */
  getValidTimeRanges: PropTypes.func,
  /** if provided, determines the default cardConfig for a new card when it is added
   * getDefaultCard(cardType)
   */
  getDefaultCard: PropTypes.func,
  /** an array of dataItems to be included on each card
   * this prop will be ignored if getValidDataItems is defined
   */
  availableImages: ImagePropTypes,
  dataItems: DataItemsPropTypes,
  /** an object where the keys are available dimensions and the values are the values available for those dimensions
   *  ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
   */
  availableDimensions: PropTypes.shape({}),
  /** if provided, returns an object where the keys are available dimensions which are the dimensions to be allowed
   * on each card
   * ex response: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
   * getValidDimensions(card)
   */
  getValidDimensions: PropTypes.func,
  /**
   * if provided this is called before the card form is rendered on the right side of the editor.
   * It is called with the card prop JSON and you return the updated cardConfig.
   * This callback function allows you to add elements for the form to render that are not passed in the main dashboard card JSON
   */
  onRenderCardEditForm: PropTypes.func,
  /** if provided, will update the dashboard json according to its own logic. Is called if a card is edited, or added.
   * Should return an updated card to be rendered
   * onCardChange(updatedCard, template): Card
   */
  onCardChange: PropTypes.func,
  /** if provided, will return the updated layout and layouts
   * onLayoutChange(newLayout, newLayouts)
   */
  onLayoutChange: PropTypes.func,
  /** if provided, allows the consumer to make changes to the cardConfig for preview in the JSON editor modal.
   * onCardJsonPreview(card)
   */
  onCardJsonPreview: PropTypes.func,
  /** if provided, renders import button linked to this callback
   * onImport(data, setNotification?)
   */
  onImport: PropTypes.func,
  /** if provided, renders export button linked to this callback
   * onExport(dashboardJson)
   */
  onExport: PropTypes.func,
  /** if provided, renders delete button linked to this callback */
  onDelete: PropTypes.func,
  /** If provided, renders cancel button linked to this callback */
  onCancel: PropTypes.func,
  /** If provided, renders submit button linked to this callback
   * onSubmit(dashboardData)
   */
  onSubmit: PropTypes.func,
  /** Whether to disable the submit button */
  isSubmitDisabled: PropTypes.bool,
  /** Whether to set the loading spinner on the submit button */
  isSubmitLoading: PropTypes.bool,
  /**
   * Callback called when a card is selected, passes back the selected card id
   */
  onCardSelect: PropTypes.func,
  /** Callback called when a card determines what icon render based on a named string in card config
   *    example usage: renderIconByName(name = 'my--checkmark--icon', props = { title: 'A checkmark', etc. })
   */
  renderIconByName: PropTypes.func,
  /** If provided, runs the function when the user clicks submit in the Card code JSON editor
   * onValidateCardJson(cardConfig)
   * @returns Array<string> error strings. return empty array if there is no errors
   */
  onValidateCardJson: PropTypes.func,
  /** callback function to validate the uploaded image */
  onValidateUploadedImage: PropTypes.func,
  /** callback if an image is deleted from the gallery */
  onImageDelete: PropTypes.func,
  /** optional loading prop to render the PageTitleBar loading state */
  isLoading: PropTypes.bool,
  /** internationalization strings */
  i18n: PropTypes.shape({
    // header strings
    headerEditTitleButton: PropTypes.string,
    headerImportButton: PropTypes.string,
    headerExportButton: PropTypes.string,
    headerCancelButton: PropTypes.string,
    headerSubmitButton: PropTypes.string,
    headerDeleteButton: PropTypes.string,
    headerFitToScreenButton: PropTypes.string,
    headerXlargeButton: PropTypes.string,
    headerLargeButton: PropTypes.string,
    headerMediumButton: PropTypes.string,
    layoutInfoXl: PropTypes.string,
    layoutInfoLg: PropTypes.string,
    layoutInfoMd: PropTypes.string,
    dashboardTitleLabel: PropTypes.string,
    requiredMessage: PropTypes.string,
    saveTitleButton: PropTypes.string,
    // card stirngs
    noDataLabel: PropTypes.string,
    defaultCardTitle: PropTypes.string,
    cloneCardLabel: PropTypes.string,
    deleteCardLabel: PropTypes.string,
    // card gallery strings
    galleryHeader: PropTypes.string,
    addCardButton: PropTypes.string,
    openGalleryButton: PropTypes.string,
    closeGalleryButton: PropTypes.string,
    openJSONButton: PropTypes.string,
    searchPlaceholderText: PropTypes.string,
    TIMESERIES: PropTypes.string,
    SIMPLE_BAR: PropTypes.string,
    GROUPED_BAR: PropTypes.string,
    STACKED_BAR: PropTypes.string,
    VALUE: PropTypes.string,
    IMAGE: PropTypes.string,
    TABLE: PropTypes.string,
    ALERT: PropTypes.string,
    LIST: PropTypes.string,
    // image gallery strings
    searchPlaceHolderText: PropTypes.string,
    imageGalleryDeleteLabelText: PropTypes.string,
    imageGalleryDeleteModalLabelText: PropTypes.string,
    imageGalleryDeleteModalTitleText: PropTypes.func,
    imageGalleryGridButtonText: PropTypes.string,
    imageGalleryInstructionText: PropTypes.string,
    imageGalleryListButtonText: PropTypes.string,
    imageGalleryModalLabelText: PropTypes.string,
    imageGalleryModalTitleText: PropTypes.string,
    imageGalleryModalPrimaryButtonLabelText: PropTypes.string,
    imageGalleryModalSecondaryButtonLabelText: PropTypes.string,
    imageGalleryModalCloseIconDescriptionText: PropTypes.string,
    imageGallerySearchPlaceHolderText: PropTypes.string,
    // card form strings
    openEditorButton: PropTypes.string,
    contentTabLabel: PropTypes.string,
    settingsTabLabel: PropTypes.string,
    cardSize_SMALL: PropTypes.string,
    cardSize_SMALLWIDE: PropTypes.string,
    cardSize_MEDIUM: PropTypes.string,
    cardSize_MEDIUMTHIN: PropTypes.string,
    cardSize_MEDIUMWIDE: PropTypes.string,
    cardSize_LARGE: PropTypes.string,
    cardSize_LARGETHIN: PropTypes.string,
    cardSize_LARGEWIDE: PropTypes.string,
    chartType_BAR: PropTypes.string,
    chartType_LINE: PropTypes.string,
    barChartType_SIMPLE: PropTypes.string,
    barChartType_GROUPED: PropTypes.string,
    barChartType_STACKED: PropTypes.string,
    barChartLayout_HORIZONTAL: PropTypes.string,
    barChartLayout_VERTICAL: PropTypes.string,
    errorTitle: PropTypes.string,
    modalTitle: PropTypes.string,
    modalLabel: PropTypes.string,
    modalHelpText: PropTypes.string,
    modalIconDescription: PropTypes.string,
    expandBtnLabel: PropTypes.string,
    modalPrimaryButtonLabel: PropTypes.string,
    modalSecondaryButtonLabel: PropTypes.string,
    cardTitle: PropTypes.string,
    description: PropTypes.string,
    size: PropTypes.string,
    selectASize: PropTypes.string,
    timeRange: PropTypes.string,
    selectATimeRange: PropTypes.string,
    last24HoursLabel: PropTypes.string,
    last7DaysLabel: PropTypes.string,
    lastMonthLabel: PropTypes.string,
    lastQuarterLabel: PropTypes.string,
    lastYearLabel: PropTypes.string,
    thisWeekLabel: PropTypes.string,
    thisMonthLabel: PropTypes.string,
    thisQuarterLabel: PropTypes.string,
    thisYearLabel: PropTypes.string,
    dataItemEditorDataItemTitle: PropTypes.string,
    dataItemEditorDataItemLabel: PropTypes.string,
    dataItemEditorLegendColor: PropTypes.string,
    dataSeriesTitle: PropTypes.string,
    selectDataItems: PropTypes.string,
    dataItem: PropTypes.string,
    edit: PropTypes.string,
    dataItemEditorDataItemCustomLabel: PropTypes.string,
    dataItemEditorDataItemUnit: PropTypes.string,
    dataItemEditorDataItemFilter: PropTypes.string,
    dataItemEditorDataItemThresholds: PropTypes.string,
    dataItemEditorDataItemAddThreshold: PropTypes.string,
    source: PropTypes.string,
    primaryButtonLabelText: PropTypes.string,
    secondaryButtonLabelText: PropTypes.string,
    closeButtonLabelText: PropTypes.string,
    // data series form
    xAxisLabel: PropTypes.string,
    yAxisLabel: PropTypes.string,
    unitLabel: PropTypes.string,
    decimalPrecisionLabel: PropTypes.string,
    maximumDataPointsLabel: PropTypes.string,
    precisionLabel: PropTypes.string,
    showLegendLabel: PropTypes.string,
    // value card form settings
    fontSize: PropTypes.string,
    abbreviateNumbers: PropTypes.string,
    abbreviateNumbersTooltip: PropTypes.string,
    editDataItems: PropTypes.string
  }),
  /** whether to use translated labels in cards */
  shouldUseTranslatedLabels: PropTypes.bool,
  /** locale data */
  locale: PropTypes.string,
  /** optional link href's for each card type that will appear in a tooltip */
  dataSeriesItemLinks: PropTypes.shape({
    simpleBar: PropTypes.string,
    groupedBar: PropTypes.string,
    stackedBar: PropTypes.string,
    timeSeries: PropTypes.string,
    value: PropTypes.string,
    custom: PropTypes.string,
    table: PropTypes.string,
    image: PropTypes.string
  }),
  /** return demo hotspots while we're editing image cards */
  onFetchDynamicDemoHotspots: PropTypes.func,
  /** should we allow resizing cards dynamically */
  isCardResizable: PropTypes.bool,
  onEditDataItems: PropTypes.func,
  testId: PropTypes.string,
  actions: DashboardEditorActionsPropTypes
};
var defaultProps = {
  initialValue: {
    cards: [],
    layouts: {}
  },
  isSummaryDashboard: false,
  breakpointSwitcher: null,
  supportedCardTypes: Object.keys(DASHBOARD_EDITOR_CARD_TYPES),
  icons: null,
  renderHeader: null,
  renderIconByName: renderDefaultIconByName,
  renderCardPreview: function renderCardPreview() {
    return null;
  },
  onRenderCardEditForm: null,
  headerBreadcrumbs: null,
  notification: null,
  title: '',
  isTitleEditable: null,
  getValidDataItems: null,
  getValidTimeRanges: null,
  getDefaultCard: null,
  availableImages: [],
  dataItems: [],
  availableDimensions: {},
  getValidDimensions: null,
  onCardChange: null,
  onImageDelete: null,
  onLayoutChange: null,
  onCardJsonPreview: null,
  onCardSelect: null,
  onDelete: null,
  onImport: null,
  onExport: null,
  onCancel: null,
  onSubmit: null,
  isSubmitDisabled: false,
  isSubmitLoading: false,
  onValidateCardJson: null,
  onValidateUploadedImage: null,
  isLoading: false,
  isCardResizable: true,
  i18n: {
    headerEditTitleButton: 'Edit title',
    headerImportButton: 'Import',
    headerExportButton: 'Export',
    headerDeleteButton: 'Delete',
    headerCancelButton: 'Cancel',
    headerSubmitButton: 'Save and close',
    headerFitToScreenButton: 'Fit to screen',
    headerLargeButton: 'Large view',
    headerMediumButton: 'Medium view',
    headerSmallButton: 'Small view',
    galleryHeader: 'Gallery',
    openGalleryButton: 'Open gallery',
    closeGalleryButton: 'Back',
    openJSONButton: 'Open JSON editor',
    noDataLabel: 'No data source is defined',
    defaultCardTitle: 'Untitled',
    selectAGroupBy: 'Select a group by',
    layoutInfoLg: 'Edit dashboard at large layout (1057 - 1312px)',
    layoutInfoMd: 'Edit dashboard at medium layout (673 - 1056px)',
    layoutInfoSm: 'Edit dashboard at small layout (481 - 672px)',
    searchPlaceHolderText: 'Enter a value',
    dashboardTitleLabel: 'Dashboard title',
    requiredMessage: 'Required',
    saveTitleButton: 'Save title',
    editDataItems: 'Edit data items'
  },
  shouldUseTranslatedLabels: false,
  locale: 'en',
  dataSeriesItemLinks: null,
  onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
    return Promise.resolve([{
      x: 50,
      y: 50,
      type: 'fixed'
    }]);
  },
  onEditDataItems: null,
  testId: 'dashboard-editor',
  actions: defaultDashboardEditorActionsProps
};
var LAYOUTS = {
  FIT_TO_SCREEN: {
    breakpoint: 'lg',
    index: 0
  },
  SMALL: {
    breakpoint: 'sm',
    index: 3
  },
  MEDIUM: {
    breakpoint: 'md',
    index: 2
  },
  LARGE: {
    breakpoint: 'lg',
    index: 1
  }
};
var baseClassName = "".concat(iotPrefix, "--dashboard-editor");
var DashboardEditor = function DashboardEditor(_ref) {
  var _scrollContainerRef$c, _dashboardJson$cards2;
  var title = _ref.title,
    initialValue = _ref.initialValue,
    isCardResizable = _ref.isCardResizable,
    supportedCardTypes = _ref.supportedCardTypes,
    breakpointSwitcher = _ref.breakpointSwitcher,
    renderHeader = _ref.renderHeader,
    renderCardPreview = _ref.renderCardPreview,
    onRenderCardEditForm = _ref.onRenderCardEditForm,
    renderIconByName = _ref.renderIconByName,
    getValidDataItems = _ref.getValidDataItems,
    getValidTimeRanges = _ref.getValidTimeRanges,
    customGetDefaultCard = _ref.getDefaultCard,
    dataItems = _ref.dataItems,
    availableImages = _ref.availableImages,
    headerBreadcrumbs = _ref.headerBreadcrumbs,
    onImageDelete = _ref.onImageDelete,
    notification = _ref.notification,
    onCardChange = _ref.onCardChange,
    _onLayoutChange = _ref.onLayoutChange,
    onCardJsonPreview = _ref.onCardJsonPreview,
    onImport = _ref.onImport,
    _onExport = _ref.onExport,
    onDelete = _ref.onDelete,
    onCancel = _ref.onCancel,
    _onSubmit = _ref.onSubmit,
    isSubmitDisabled = _ref.isSubmitDisabled,
    isSubmitLoading = _ref.isSubmitLoading,
    onValidateCardJson = _ref.onValidateCardJson,
    onCardSelect = _ref.onCardSelect,
    onValidateUploadedImage = _ref.onValidateUploadedImage,
    availableDimensions = _ref.availableDimensions,
    getValidDimensions = _ref.getValidDimensions,
    isSummaryDashboard = _ref.isSummaryDashboard,
    isLoading = _ref.isLoading,
    i18n = _ref.i18n,
    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
    locale = _ref.locale,
    dataSeriesItemLinks = _ref.dataSeriesItemLinks,
    isTitleEditable = _ref.isTitleEditable,
    icons = _ref.icons,
    onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
    onEditDataItems = _ref.onEditDataItems,
    testId = _ref.testId,
    actions = _ref.actions;
  React__default.useEffect(function () {
    {
      warning(false, 'The `DashboardEditor` is an experimental component and could be lacking unit test and documentation. Be aware that minor version bumps could introduce breaking changes. For the reasons listed above use of this component in production is highly discouraged') ;
    }
  }, []);
  var mergedI18n = useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  // Need to keep track of whether the image gallery is open or not
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isImageGalleryModalOpen = _useState2[0],
    setIsImageGalleryModalOpen = _useState2[1];
  // Keep track of whether we need to scroll for new card or not
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    needsScroll = _useState4[0],
    setNeedsScroll = _useState4[1];

  // show the card gallery if no card is being edited
  var _useState5 = useState(initialValue),
    _useState6 = _slicedToArray(_useState5, 2),
    dashboardJson = _useState6[0],
    setDashboardJson = _useState6[1];
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    imagesToUpload = _useState8[0],
    setImagesToUpload = _useState8[1];
  var _useState9 = useState(),
    _useState10 = _slicedToArray(_useState9, 2),
    selectedCardId = _useState10[0],
    setSelectedCardId = _useState10[1];
  var _useState11 = useState(breakpointSwitcher !== null && breakpointSwitcher !== void 0 && breakpointSwitcher.initialValue ? LAYOUTS[breakpointSwitcher.initialValue].index : LAYOUTS.FIT_TO_SCREEN.index),
    _useState12 = _slicedToArray(_useState11, 2),
    selectedBreakpointIndex = _useState12[0],
    setSelectedBreakpointIndex = _useState12[1];
  var _useState13 = useState(breakpointSwitcher !== null && breakpointSwitcher !== void 0 && breakpointSwitcher.initialValue ? LAYOUTS[breakpointSwitcher.initialValue].breakpoint : LAYOUTS.FIT_TO_SCREEN.breakpoint),
    _useState14 = _slicedToArray(_useState13, 2),
    currentBreakpoint = _useState14[0],
    setCurrentBreakpoint = _useState14[1];

  // update imagesToUpload whenever images are removed from dashboardJson cards
  useEffect(function () {
    var _dashboardJson$cards;
    var dashboardJsonImages = dashboardJson === null || dashboardJson === void 0 || (_dashboardJson$cards = dashboardJson.cards) === null || _dashboardJson$cards === void 0 ? void 0 : _dashboardJson$cards.filter(function (card) {
      return (card === null || card === void 0 ? void 0 : card.type) === CARD_TYPES.IMAGE;
    }).map(function (card) {
      var _card$content, _card$content2;
      return {
        id: card === null || card === void 0 || (_card$content = card.content) === null || _card$content === void 0 ? void 0 : _card$content.id,
        src: card === null || card === void 0 || (_card$content2 = card.content) === null || _card$content2 === void 0 ? void 0 : _card$content2.src
      };
    });
    if (imagesToUpload !== null && imagesToUpload !== void 0 && imagesToUpload.length) {
      setImagesToUpload(function (prevImagesToUpload) {
        return prevImagesToUpload.filter(function (image) {
          return dashboardJsonImages.some(function (dashboardImage) {
            return dashboardImage.id === (image === null || image === void 0 ? void 0 : image.id) && dashboardImage.src === (image === null || image === void 0 ? void 0 : image.src);
          });
        });
      });
    }
    // this should only execute when dashboardJson is updated; imagesToUpload is not needed as dependency
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dashboardJson]);
  useEffect(function () {
    // if the loaded template changes, we need to update the state
    setDashboardJson(initialValue);
  }, [initialValue]);

  // force a window resize so that react-grid-layout will trigger its reorder / resize
  useEffect(function () {
    window.dispatchEvent(new Event('resize'));
  }, [selectedBreakpointIndex]);
  var scrollContainerRef = useRef();
  // when a new card is added, scroll to the bottom of the page. Instead of trying to attach the ref to the card itself,
  // check if the scrollHeight has changed in the scroll container, meaning a new card has been added
  useEffect(function () {
    if (scrollContainerRef.current && needsScroll) {
      scrollContainerRef.current.scrollTo({
        left: 0,
        top: scrollContainerRef.current.scrollHeight,
        behavior: 'smooth'
      });
      setNeedsScroll(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [(_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.scrollHeight, needsScroll]);

  /**
   * callback to parent when the card is selected
   */
  var handleCardSelect = useCallback(function (card) {
    setSelectedCardId(card === null || card === void 0 ? void 0 : card.id);
    /* istanbul ignore else */
    if (onCardSelect) {
      onCardSelect(card);
    }
  }, [onCardSelect]);

  /**
   * Adds a default, empty card to the preview
   * @param {string} type card type
   */
  var addCard = useCallback(function (type) {
    var defaultCard = customGetDefaultCard // Use the default card specified by the consumer if it exists
    ? customGetDefaultCard(type, mergedI18n) : getDefaultCard(type, mergedI18n);

    // notify consumers that the card has been added in onCardChange if we don't have an explicit customGetDefaultCard passed
    var cardConfig = onCardChange && !customGetDefaultCard ? onCardChange(defaultCard, dashboardJson) : defaultCard;
    setDashboardJson(function (prevDashboardJson) {
      return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
        cards: [].concat(_toConsumableArray(prevDashboardJson.cards), [cardConfig])
      });
    });
    handleCardSelect(cardConfig);
    setNeedsScroll(true);
  }, [customGetDefaultCard, dashboardJson, handleCardSelect, mergedI18n, onCardChange]);

  /**
   * Adds a cloned card with a new unique id to the preview and place it next to the original card
   * @param {string} id
   */
  var duplicateCard = useCallback(function (id) {
    var selectedCard;
    setDashboardJson(function (prevDashboardJson) {
      selectedCard = prevDashboardJson.cards.find(function (card) {
        return card.id === id;
      });
      var cardConfig = getDuplicateCard(selectedCard);
      var originalCardIndex = prevDashboardJson.cards.findIndex(function (card) {
        return card.id === id;
      });
      prevDashboardJson.cards.splice(originalCardIndex, 0, cardConfig);
      return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
        cards: prevDashboardJson.cards
      });
    });
    handleCardSelect(selectedCard);
    setNeedsScroll(true);
  }, [handleCardSelect]);

  /**
   * Deletes a card from the preview
   * @param {string} id
   */
  var removeCard = useCallback(function (id) {
    return setDashboardJson(function (prevDashboardJson) {
      return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
        cards: prevDashboardJson.cards.filter(function (i) {
          return i.id !== id;
        })
      });
    });
  }, []);
  var handleOnCardChange = useCallback(function (cardConfig) {
    // need to handle resetting the src of the image for image cards based on the id
    if (cardConfig.type === CARD_TYPES.IMAGE) {
      var _cardConfig$content;
      if (((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.imgState) !== 'new' && !imagesToUpload.some(function (image) {
        return image.id === cardConfig.content.id;
      })) {
        var _availableImages$find;
        // eslint-disable-next-line no-param-reassign
        cardConfig.content.src = availableImages === null || availableImages === void 0 || (_availableImages$find = availableImages.find(function (image) {
          return image.id === cardConfig.content.id;
        })) === null || _availableImages$find === void 0 ? void 0 : _availableImages$find.src;
      } else if (cardConfig.type === CARD_TYPES.IMAGE && cardConfig.content.imgState === 'new' && !imagesToUpload.some(function (image) {
        return image.id === cardConfig.content.id;
      })) {
        /* istanbul ignore else */
        if (cardConfig.content.id && cardConfig.content.src) {
          setImagesToUpload(function (prevImagesToUpload) {
            return [].concat(_toConsumableArray(prevImagesToUpload), [{
              id: cardConfig.content.id,
              src: cardConfig.content.src
            }]);
          });
        }
      } else if (cardConfig.content.imgState !== 'new' && imagesToUpload.some(function (image) {
        return image.id === cardConfig.content.id;
      })) {
        var _imagesToUpload$find;
        // eslint-disable-next-line no-param-reassign
        cardConfig.content.src = imagesToUpload === null || imagesToUpload === void 0 || (_imagesToUpload$find = imagesToUpload.find(function (image) {
          return image.id === cardConfig.content.id;
        })) === null || _imagesToUpload$find === void 0 ? void 0 : _imagesToUpload$find.src;
      }
    }

    // TODO: this is really inefficient
    setDashboardJson(function (prevDashboardJson) {
      return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
        cards: prevDashboardJson.cards.map(function (card) {
          return card.id === cardConfig.id ? onCardChange ? onCardChange(cardConfig, prevDashboardJson) : cardConfig : card;
        })
      });
    });
  }, [availableImages, imagesToUpload, onCardChange]);
  var handleCardResize = useCallback(function (_ref2) {
    var id = _ref2.id,
      size = _ref2.size;
    var cardConfig = dashboardJson.cards.find(function (card) {
      return card.id === id;
    });
    // Update the card with the new image information
    cardConfig = _objectSpread(_objectSpread({}, cardConfig), {}, {
      size: size
    });
    handleOnCardChange(cardConfig);
  }, [dashboardJson.cards, handleOnCardChange]);
  var handleClose = useCallback(function () {
    return setIsImageGalleryModalOpen(false);
  }, []);
  // Show the image gallery
  var handleShowImageGallery = useCallback(function () {
    return setIsImageGalleryModalOpen(true);
  }, []);
  var handleImageSelection = useCallback(function (selectedImage) {
    var cardConfig = dashboardJson.cards.find(function (card) {
      return card.id === selectedCardId;
    });
    // Update the card with the new image information
    cardConfig = _objectSpread(_objectSpread({}, cardConfig), {}, {
      content: _objectSpread(_objectSpread({}, cardConfig.content), selectedImage)
    });
    handleOnCardChange(cardConfig);
    setIsImageGalleryModalOpen(false);
  }, [dashboardJson.cards, handleOnCardChange, selectedCardId]);
  var handleEditTitle = useCallback(function (newTitle) {
    return setDashboardJson(function (prevDashboardJson) {
      return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
        title: newTitle
      });
    });
  }, []);
  return isLoading ? /*#__PURE__*/React__default.createElement("div", {
    "data-testid": "".concat(testId, "-loading"),
    className: baseClassName
  }, /*#__PURE__*/React__default.createElement(SkeletonText, {
    width: "30%"
  })) : /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: baseClassName
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(baseClassName, "--content"), _defineProperty({}, "".concat(baseClassName, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
    ref: scrollContainerRef
  }, renderHeader ? renderHeader() : /*#__PURE__*/React__default.createElement(DashboardEditorHeader, {
    title: getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
    breadcrumbs: headerBreadcrumbs,
    onImport: onImport,
    onExport: function onExport() {
      return _onExport(dashboardJson, imagesToUpload);
    },
    onDelete: onDelete,
    onCancel: onCancel,
    onSubmit: function onSubmit(params) {
      return _onSubmit(params, imagesToUpload);
    },
    isSubmitDisabled: isSubmitDisabled,
    isSubmitLoading: isSubmitLoading,
    i18n: mergedI18n,
    onEditTitle: isTitleEditable && handleEditTitle,
    dashboardJson: dashboardJson,
    selectedBreakpointIndex: selectedBreakpointIndex,
    setSelectedBreakpointIndex: setSelectedBreakpointIndex,
    breakpointSwitcher: breakpointSwitcher,
    testId: "".concat(testId, "-header")
  }), notification, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(baseClassName, "--preview"), _defineProperty({}, "".concat(baseClassName, "--preview__selected-breakpoint"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index))
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "--preview__outline"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index), "".concat(baseClassName, "--preview__sm"), selectedBreakpointIndex === LAYOUTS.SMALL.index), "".concat(baseClassName, "--preview__md"), selectedBreakpointIndex === LAYOUTS.MEDIUM.index), "".concat(baseClassName, "--preview__lg"), selectedBreakpointIndex === LAYOUTS.LARGE.index))
  }, (breakpointSwitcher === null || breakpointSwitcher === void 0 ? void 0 : breakpointSwitcher.enabled) &&
  // only show breakpoint info if fit to screen is not selected
  selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index && /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--preview__breakpoint-info")
  }, renderBreakpointInfo(currentBreakpoint, mergedI18n)), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--preview__grid-container")
  }, /*#__PURE__*/React__default.createElement(ErrorBoundary, {
    fallback: /*#__PURE__*/React__default.createElement(InlineNotification, {
      title: "Dashboard editor error",
      subtitle: "Something went wrong. Please refresh the page.",
      kind: "error",
      lowContrast: true,
      "data-testid": "".concat(testId, "-error-notification")
    })
  }, /*#__PURE__*/React__default.createElement(ImageGalleryModal, {
    open: isImageGalleryModalOpen,
    content: availableImages,
    onClose: handleClose,
    onSubmit: handleImageSelection,
    onDelete: onImageDelete,
    gridButtonText: i18n.imageGalleryGridButtonText,
    instructionText: i18n.imageGalleryInstructionText,
    listButtonText: i18n.imageGalleryListButtonText,
    modalLabelText: i18n.imageGalleryModalLabelText,
    modalTitleText: i18n.imageGalleryModalTitleText,
    modalPrimaryButtonLabelText: i18n.imageGalleryModalPrimaryButtonLabelText,
    modalSecondaryButtonLabelText: i18n.imageGalleryModalSecondaryButtonLabelText,
    modalCloseIconDescriptionText: i18n.imageGalleryModalCloseIconDescriptionText,
    searchPlaceHolderText: i18n.imageGallerySearchPlaceHolderText,
    deleteLabelText: i18n.imageGalleryDeleteLabelText,
    deleteModalLabelText: i18n.imageGalleryDeleteModalLabelText,
    deleteModalTitleText: i18n.imageGalleryDeleteModalTitleText,
    testId: "".concat(testId, "-image-gallery-modal")
  }), /*#__PURE__*/React__default.createElement(DashboardGrid, {
    isEditable: true,
    breakpoint: currentBreakpoint,
    onBreakpointChange: function onBreakpointChange(newBreakpoint) {
      setCurrentBreakpoint(newBreakpoint);
    },
    layouts: dashboardJson.layouts,
    onLayoutChange: function onLayoutChange(newLayout, newLayouts) {
      if (_onLayoutChange) {
        _onLayoutChange(newLayout, newLayouts);
      }
      setDashboardJson(function (prevDashboardJson) {
        return _objectSpread(_objectSpread({}, prevDashboardJson), {}, {
          layouts: newLayouts
        });
      });
    },
    onResizeStop: handleCardResize,
    supportedLayouts: ['lg', 'md', 'sm'],
    testId: "".concat(testId, "-grid")
  }, dashboardJson === null || dashboardJson === void 0 || (_dashboardJson$cards2 = dashboardJson.cards) === null || _dashboardJson$cards2 === void 0 ? void 0 : _dashboardJson$cards2.map(function (cardConfig) {
    var isSelected = cardConfig.id === selectedCardId;
    return /*#__PURE__*/React__default.createElement(DashboardEditorCardRenderer, _extends({}, cardConfig, {
      locale: locale,
      key: cardConfig.id,
      isResizable: isCardResizable,
      i18n: mergedI18n,
      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
      isSelected: isSelected,
      availableDimensions: availableDimensions,
      onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
      renderCardPreview: renderCardPreview,
      onCardChange: handleOnCardChange,
      onRemove: removeCard,
      onDuplicate: duplicateCard,
      baseClassName: baseClassName,
      onValidateUploadedImage: onValidateUploadedImage,
      onShowImageGallery: handleShowImageGallery,
      renderIconByName: renderIconByName,
      setSelectedCardId: handleCardSelect
    }));
  }))))))), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClassName, "--sidebar")
  }, /*#__PURE__*/React__default.createElement(ErrorBoundary, {
    fallback: /*#__PURE__*/React__default.createElement(InlineNotification, {
      title: "Dashboard editor error",
      subtitle: "Something went wrong. Please refresh the page.",
      kind: "error",
      lowContrast: true,
      "data-testid": "".concat(testId, "-sidebar-error-notification")
    })
  }, /*#__PURE__*/React__default.createElement(CardEditor, {
    cardConfig: dashboardJson.cards.find(function (card) {
      return card.id === selectedCardId;
    }),
    isSummaryDashboard: isSummaryDashboard,
    onShowGallery: function onShowGallery() {
      return handleCardSelect(null);
    },
    onChange: handleOnCardChange,
    onRenderCardEditForm: onRenderCardEditForm,
    getValidDataItems: getValidDataItems,
    getValidTimeRanges: getValidTimeRanges,
    dataItems: dataItems,
    onAddCard: addCard,
    onValidateCardJson: onValidateCardJson,
    onCardJsonPreview: onCardJsonPreview,
    supportedCardTypes: supportedCardTypes,
    icons: icons,
    getValidDimensions: getValidDimensions,
    availableDimensions: availableDimensions,
    i18n: mergedI18n,
    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
    currentBreakpoint: currentBreakpoint,
    dataSeriesItemLinks: dataSeriesItemLinks,
    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
    onEditDataItems: onEditDataItems,
    actions: actions
  }))));
};
DashboardEditor.propTypes = propTypes;
DashboardEditor.defaultProps = defaultProps;
DashboardEditor.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DashboardEditor",
  "props": {
    "initialValue": {
      "defaultValue": {
        "value": "{\n  cards: [],\n  layouts: {},\n}",
        "computed": false
      },
      "description": "initial dashboard data to edit",
      "type": {
        "name": "shape",
        "value": {
          "cards": {
            "name": "arrayOf",
            "value": {
              "name": "object"
            },
            "required": false
          },
          "layouts": {
            "name": "object",
            "required": false
          }
        }
      },
      "required": false
    },
    "isSummaryDashboard": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "breakpointSwitcher": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if enabled, renders a ContentSwitcher with IconSwitches that allow for manually changing the breakpoint,\nregardless of the screen width",
      "type": {
        "name": "shape",
        "value": {
          "enabled": {
            "name": "bool",
            "required": false
          },
          "initialValue": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "supportedCardTypes": {
      "defaultValue": {
        "value": "Object.keys(DASHBOARD_EDITOR_CARD_TYPES)",
        "computed": true
      },
      "description": "supported card types",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "string"
        }
      },
      "required": false
    },
    "icons": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Dictionary of icons that corresponds to both `supportedCardTypes` and `i18n`\nex:\n{\n TIMESERIES: <EscalatorDown />,\n ALERT: <Code24 />,\n CUSTOM: <Basketball32 />,\n ANOTHER_CUSTOM: <Automobile32 />,\n}",
      "type": {
        "name": "objectOf",
        "value": {
          "name": "node"
        }
      },
      "required": false
    },
    "renderHeader": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders header content above preview",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "renderIconByName": {
      "defaultValue": {
        "value": "renderDefaultIconByName",
        "computed": true
      },
      "description": "Callback called when a card determines what icon render based on a named string in card config\n   example usage: renderIconByName(name = 'my--checkmark--icon', props = { title: 'A checkmark', etc. })",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "renderCardPreview": {
      "defaultValue": {
        "value": "() => null",
        "computed": false
      },
      "description": "if provided, is used to render cards in dashboard\nrenderCardPreview( cardConfig: Object,\n                        commonCardProps: Object\n                        onSelectCard: Function,\n                        onDuplicateCard: Function,\n                        onRemoveCard: Function,\n                        isSelected: Boolean): Node",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onRenderCardEditForm": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided this is called before the card form is rendered on the right side of the editor.\nIt is called with the card prop JSON and you return the updated cardConfig.\nThis callback function allows you to add elements for the form to render that are not passed in the main dashboard card JSON",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "headerBreadcrumbs": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders array elements inside of BreadcrumbItem in header",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "element"
        }
      },
      "required": false
    },
    "notification": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders node underneath the header and above the dashboard grid",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "title": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Dashboard title",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "isTitleEditable": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders edit button next to title",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "getValidDataItems": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, returns an array of strings which are the dataItems to be allowed\non each card\ngetValidDataItems(card, selectedTimeRange)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "getValidTimeRanges": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, returns an array of strings which are the timeRanges to be allowed\non each card\ngetValidTimeRanges(card, selectedDataItems)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "getDefaultCard": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, determines the default cardConfig for a new card when it is added\ngetDefaultCard(cardType)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "availableImages": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "an array of dataItems to be included on each card\nthis prop will be ignored if getValidDataItems is defined",
      "type": {
        "name": "custom",
        "raw": "ImagePropTypes"
      },
      "required": false
    },
    "dataItems": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DataItemsPropTypes"
      },
      "required": false
    },
    "availableDimensions": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "an object where the keys are available dimensions and the values are the values available for those dimensions\n ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }",
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false
    },
    "getValidDimensions": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, returns an object where the keys are available dimensions which are the dimensions to be allowed\non each card\nex response: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }\ngetValidDimensions(card)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCardChange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, will update the dashboard json according to its own logic. Is called if a card is edited, or added.\nShould return an updated card to be rendered\nonCardChange(updatedCard, template): Card",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onImageDelete": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "callback if an image is deleted from the gallery",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onLayoutChange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, will return the updated layout and layouts\nonLayoutChange(newLayout, newLayouts)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCardJsonPreview": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, allows the consumer to make changes to the cardConfig for preview in the JSON editor modal.\nonCardJsonPreview(card)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCardSelect": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Callback called when a card is selected, passes back the selected card id",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onDelete": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders delete button linked to this callback",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onImport": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders import button linked to this callback\nonImport(data, setNotification?)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onExport": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders export button linked to this callback\nonExport(dashboardJson)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCancel": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "If provided, renders cancel button linked to this callback",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onSubmit": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "If provided, renders submit button linked to this callback\nonSubmit(dashboardData)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isSubmitDisabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Whether to disable the submit button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isSubmitLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Whether to set the loading spinner on the submit button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onValidateCardJson": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "If provided, runs the function when the user clicks submit in the Card code JSON editor\nonValidateCardJson(cardConfig)\n@returns Array<string> error strings. return empty array if there is no errors",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onValidateUploadedImage": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "callback function to validate the uploaded image",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "optional loading prop to render the PageTitleBar loading state",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isCardResizable": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "should we allow resizing cards dynamically",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  headerEditTitleButton: 'Edit title',\n  headerImportButton: 'Import',\n  headerExportButton: 'Export',\n  headerDeleteButton: 'Delete',\n  headerCancelButton: 'Cancel',\n  headerSubmitButton: 'Save and close',\n  headerFitToScreenButton: 'Fit to screen',\n  headerLargeButton: 'Large view',\n  headerMediumButton: 'Medium view',\n  headerSmallButton: 'Small view',\n  galleryHeader: 'Gallery',\n  openGalleryButton: 'Open gallery',\n  closeGalleryButton: 'Back',\n  openJSONButton: 'Open JSON editor',\n  noDataLabel: 'No data source is defined',\n  defaultCardTitle: 'Untitled',\n  selectAGroupBy: 'Select a group by',\n  layoutInfoLg: 'Edit dashboard at large layout (1057 - 1312px)',\n  layoutInfoMd: 'Edit dashboard at medium layout (673 - 1056px)',\n  layoutInfoSm: 'Edit dashboard at small layout (481 - 672px)',\n  searchPlaceHolderText: 'Enter a value',\n  dashboardTitleLabel: 'Dashboard title',\n  requiredMessage: 'Required',\n  saveTitleButton: 'Save title',\n  editDataItems: 'Edit data items',\n}",
        "computed": false
      },
      "description": "internationalization strings",
      "type": {
        "name": "shape",
        "value": {
          "headerEditTitleButton": {
            "name": "string",
            "required": false
          },
          "headerImportButton": {
            "name": "string",
            "required": false
          },
          "headerExportButton": {
            "name": "string",
            "required": false
          },
          "headerCancelButton": {
            "name": "string",
            "required": false
          },
          "headerSubmitButton": {
            "name": "string",
            "required": false
          },
          "headerDeleteButton": {
            "name": "string",
            "required": false
          },
          "headerFitToScreenButton": {
            "name": "string",
            "required": false
          },
          "headerXlargeButton": {
            "name": "string",
            "required": false
          },
          "headerLargeButton": {
            "name": "string",
            "required": false
          },
          "headerMediumButton": {
            "name": "string",
            "required": false
          },
          "layoutInfoXl": {
            "name": "string",
            "required": false
          },
          "layoutInfoLg": {
            "name": "string",
            "required": false
          },
          "layoutInfoMd": {
            "name": "string",
            "required": false
          },
          "dashboardTitleLabel": {
            "name": "string",
            "required": false
          },
          "requiredMessage": {
            "name": "string",
            "required": false
          },
          "saveTitleButton": {
            "name": "string",
            "required": false
          },
          "noDataLabel": {
            "name": "string",
            "required": false
          },
          "defaultCardTitle": {
            "name": "string",
            "required": false
          },
          "cloneCardLabel": {
            "name": "string",
            "required": false
          },
          "deleteCardLabel": {
            "name": "string",
            "required": false
          },
          "galleryHeader": {
            "name": "string",
            "required": false
          },
          "addCardButton": {
            "name": "string",
            "required": false
          },
          "openGalleryButton": {
            "name": "string",
            "required": false
          },
          "closeGalleryButton": {
            "name": "string",
            "required": false
          },
          "openJSONButton": {
            "name": "string",
            "required": false
          },
          "searchPlaceholderText": {
            "name": "string",
            "required": false
          },
          "TIMESERIES": {
            "name": "string",
            "required": false
          },
          "SIMPLE_BAR": {
            "name": "string",
            "required": false
          },
          "GROUPED_BAR": {
            "name": "string",
            "required": false
          },
          "STACKED_BAR": {
            "name": "string",
            "required": false
          },
          "VALUE": {
            "name": "string",
            "required": false
          },
          "IMAGE": {
            "name": "string",
            "required": false
          },
          "TABLE": {
            "name": "string",
            "required": false
          },
          "ALERT": {
            "name": "string",
            "required": false
          },
          "LIST": {
            "name": "string",
            "required": false
          },
          "searchPlaceHolderText": {
            "name": "string",
            "required": false
          },
          "imageGalleryDeleteLabelText": {
            "name": "string",
            "required": false
          },
          "imageGalleryDeleteModalLabelText": {
            "name": "string",
            "required": false
          },
          "imageGalleryDeleteModalTitleText": {
            "name": "func",
            "required": false
          },
          "imageGalleryGridButtonText": {
            "name": "string",
            "required": false
          },
          "imageGalleryInstructionText": {
            "name": "string",
            "required": false
          },
          "imageGalleryListButtonText": {
            "name": "string",
            "required": false
          },
          "imageGalleryModalLabelText": {
            "name": "string",
            "required": false
          },
          "imageGalleryModalTitleText": {
            "name": "string",
            "required": false
          },
          "imageGalleryModalPrimaryButtonLabelText": {
            "name": "string",
            "required": false
          },
          "imageGalleryModalSecondaryButtonLabelText": {
            "name": "string",
            "required": false
          },
          "imageGalleryModalCloseIconDescriptionText": {
            "name": "string",
            "required": false
          },
          "imageGallerySearchPlaceHolderText": {
            "name": "string",
            "required": false
          },
          "openEditorButton": {
            "name": "string",
            "required": false
          },
          "contentTabLabel": {
            "name": "string",
            "required": false
          },
          "settingsTabLabel": {
            "name": "string",
            "required": false
          },
          "cardSize_SMALL": {
            "name": "string",
            "required": false
          },
          "cardSize_SMALLWIDE": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUM": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUMTHIN": {
            "name": "string",
            "required": false
          },
          "cardSize_MEDIUMWIDE": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGE": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGETHIN": {
            "name": "string",
            "required": false
          },
          "cardSize_LARGEWIDE": {
            "name": "string",
            "required": false
          },
          "chartType_BAR": {
            "name": "string",
            "required": false
          },
          "chartType_LINE": {
            "name": "string",
            "required": false
          },
          "barChartType_SIMPLE": {
            "name": "string",
            "required": false
          },
          "barChartType_GROUPED": {
            "name": "string",
            "required": false
          },
          "barChartType_STACKED": {
            "name": "string",
            "required": false
          },
          "barChartLayout_HORIZONTAL": {
            "name": "string",
            "required": false
          },
          "barChartLayout_VERTICAL": {
            "name": "string",
            "required": false
          },
          "errorTitle": {
            "name": "string",
            "required": false
          },
          "modalTitle": {
            "name": "string",
            "required": false
          },
          "modalLabel": {
            "name": "string",
            "required": false
          },
          "modalHelpText": {
            "name": "string",
            "required": false
          },
          "modalIconDescription": {
            "name": "string",
            "required": false
          },
          "expandBtnLabel": {
            "name": "string",
            "required": false
          },
          "modalPrimaryButtonLabel": {
            "name": "string",
            "required": false
          },
          "modalSecondaryButtonLabel": {
            "name": "string",
            "required": false
          },
          "cardTitle": {
            "name": "string",
            "required": false
          },
          "description": {
            "name": "string",
            "required": false
          },
          "size": {
            "name": "string",
            "required": false
          },
          "selectASize": {
            "name": "string",
            "required": false
          },
          "timeRange": {
            "name": "string",
            "required": false
          },
          "selectATimeRange": {
            "name": "string",
            "required": false
          },
          "last24HoursLabel": {
            "name": "string",
            "required": false
          },
          "last7DaysLabel": {
            "name": "string",
            "required": false
          },
          "lastMonthLabel": {
            "name": "string",
            "required": false
          },
          "lastQuarterLabel": {
            "name": "string",
            "required": false
          },
          "lastYearLabel": {
            "name": "string",
            "required": false
          },
          "thisWeekLabel": {
            "name": "string",
            "required": false
          },
          "thisMonthLabel": {
            "name": "string",
            "required": false
          },
          "thisQuarterLabel": {
            "name": "string",
            "required": false
          },
          "thisYearLabel": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemTitle": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemLabel": {
            "name": "string",
            "required": false
          },
          "dataItemEditorLegendColor": {
            "name": "string",
            "required": false
          },
          "dataSeriesTitle": {
            "name": "string",
            "required": false
          },
          "selectDataItems": {
            "name": "string",
            "required": false
          },
          "dataItem": {
            "name": "string",
            "required": false
          },
          "edit": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemCustomLabel": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemUnit": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemFilter": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemThresholds": {
            "name": "string",
            "required": false
          },
          "dataItemEditorDataItemAddThreshold": {
            "name": "string",
            "required": false
          },
          "source": {
            "name": "string",
            "required": false
          },
          "primaryButtonLabelText": {
            "name": "string",
            "required": false
          },
          "secondaryButtonLabelText": {
            "name": "string",
            "required": false
          },
          "closeButtonLabelText": {
            "name": "string",
            "required": false
          },
          "xAxisLabel": {
            "name": "string",
            "required": false
          },
          "yAxisLabel": {
            "name": "string",
            "required": false
          },
          "unitLabel": {
            "name": "string",
            "required": false
          },
          "decimalPrecisionLabel": {
            "name": "string",
            "required": false
          },
          "maximumDataPointsLabel": {
            "name": "string",
            "required": false
          },
          "precisionLabel": {
            "name": "string",
            "required": false
          },
          "showLegendLabel": {
            "name": "string",
            "required": false
          },
          "fontSize": {
            "name": "string",
            "required": false
          },
          "abbreviateNumbers": {
            "name": "string",
            "required": false
          },
          "abbreviateNumbersTooltip": {
            "name": "string",
            "required": false
          },
          "editDataItems": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "shouldUseTranslatedLabels": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "whether to use translated labels in cards",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "locale": {
      "defaultValue": {
        "value": "'en'",
        "computed": false
      },
      "description": "locale data",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "dataSeriesItemLinks": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "optional link href's for each card type that will appear in a tooltip",
      "type": {
        "name": "shape",
        "value": {
          "simpleBar": {
            "name": "string",
            "required": false
          },
          "groupedBar": {
            "name": "string",
            "required": false
          },
          "stackedBar": {
            "name": "string",
            "required": false
          },
          "timeSeries": {
            "name": "string",
            "required": false
          },
          "value": {
            "name": "string",
            "required": false
          },
          "custom": {
            "name": "string",
            "required": false
          },
          "table": {
            "name": "string",
            "required": false
          },
          "image": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "onFetchDynamicDemoHotspots": {
      "defaultValue": {
        "value": "() => Promise.resolve([{ x: 50, y: 50, type: 'fixed' }])",
        "computed": false
      },
      "description": "return demo hotspots while we're editing image cards",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onEditDataItems": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'dashboard-editor'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "actions": {
      "defaultValue": {
        "value": "defaultDashboardEditorActionsProps",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "DashboardEditorActionsPropTypes"
      },
      "required": false
    }
  }
};
var DashboardEditor$1 = DashboardEditor;

export { baseClassName, DashboardEditor$1 as default };
