@react-magma/charts 13.1.1-next.0 → 13.2.0-next.0

package/dist/charts.js

@@ -2387,7 +2387,7 @@ function ChartMoreOptionsButton(_a) {
     var t = useChartToolbarI18n();
     var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.moreOptionsAriaLabel;
     return (React__namespace.createElement(reactMagmaDom.Dropdown, { isInverse: isInverse },
-        React__namespace.createElement(reactMagmaDom.DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: reactMagmaDom.ButtonVariant.link }),
+        React__namespace.createElement(reactMagmaDom.DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: reactMagmaDom.ButtonVariant.link, testId: "chart-more-options-button" }),
         React__namespace.createElement(reactMagmaDom.DropdownContent, null, children)));
 }
 
@@ -2470,7 +2470,7 @@ var FullscreenRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTe
         ? props.theme.colors.primary700
         : props.theme.colors.neutral100;
 });
-var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:fullscreen,\n  &:-webkit-full-screen {\n    background: ", ";\n\n    .cds--chart-holder {\n      height: 100vh !important;\n    }\n  }\n\n  .cds--data-table thead tr th {\n    background: ", " !important;\n  }\n  .cds--data-table td,\n  .cds--data-table tbody th {\n    color: ", ";\n  }\n  .cds--data-table tbody tr,\n  .cds--data-table tbody tr td,\n  .cds--data-table tbody tr th {\n    color: ", ";\n  }\n  .cds--data-table tr {\n    block-size: 2.5rem;\n  }\n\n  .cds--cc--tooltip .content-box .datapoint-tooltip p {\n    font-size: ", ";\n    padding: ", ";\n    color: ", ";\n    max-width: 142px;\n    white-space: normal;\n  }\n\n  .cds--modal-container {\n    clip-path: inset(0% 0% 0% 0% round ", ");\n    background: ", ";\n    .cds--data-table th {\n      background: ", ";\n    }\n    .cds--data-table td {\n      border-top: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n      background: ", ";\n    }\n    .cds--data-table tr:hover td {\n      background: ", ";\n    }\n  }\n\n  .chart-holder p,\n  .chart-holder div,\n  .chart-holder text,\n  .cds--cc--axes g.axis .axis-title,\n  .cds--cc--title p.title,\n  .cds--cc--axes g.axis g.tick text {\n    font-family: ", " !important;\n    color: ", ";\n  }\n\n  .cds--cc--axes {\n    overflow: visible;\n  }\n\n  div.cds--cc--legend {\n    div.legend-item {\n      div.checkbox {\n        background: ", ";\n        border: none;\n        width: ", ";\n        height: ", ";\n        svg {\n          left: 2px;\n          position: relative;\n        }\n      }\n      p {\n        font-size: ", ";\n        margin: 0 ", " 0 0;\n      }\n    }\n  }\n  div.cds--cc--legend.has-deactivated-items {\n    div.legend-item {\n      div.checkbox {\n        border: 1px solid\n          ", ";\n      }\n      div.checkbox.active {\n        border: 1px solid transparent;\n      }\n    }\n  }\n  .chart-holder {\n    .cds--cc--axes g.axis g.tick text {\n      fill: ", ";\n    }\n    .cds--cc--axes g.axis path.domain {\n      stroke: ", ";\n    }\n    .cds--cc--grid g.x.grid g.tick line,\n    .cds--cc--grid g.y.grid g.tick line {\n      stroke: ", ";\n    }\n    .cds--cc--grid rect.chart-grid-backdrop.stroked {\n      stroke: ", ";\n    }\n    .cds--cc--skeleton .shimmer-effect-lines {\n      filter: ", ";\n    }\n    /* .chart-holder.cds--chart-holder.filled,\n    .cds--cc--skeleton rect.chart-skeleton-backdrop,\n    .cds--cc--grid rect.chart-grid-backdrop {\n    } */\n\n    .cds--cc--grid rect.chart-grid-backdrop {\n      fill: transparent;\n    }\n    .cds--cc--scatter circle.dot,\n    .cds--cc--scatter circle.dot.hovered {\n      padding: 10px;\n    }\n    .cds--cc--scatter-stacked circle.dot.hovered,\n    .cds--cc--scatter-stacked circle.dot.unfilled,\n    .cds--cc--scatter circle.dot.unfilled {\n      stroke-width: 6px;\n      transition: 0.1s all linear;\n    }\n    .cds--cc--scatter circle.dot {\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--scatter circle.dot.hovered {\n      stroke-width: 0.5em;\n      transition: 0.1s all linear;\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--lollipop circle.dot,\n    .cds--cc--lollipop circle.dot.filled,\n    .cds--cc--lollipop circle.dot.hovered {\n      stroke-width: 15px;\n    }\n    .cds--cc--scatter-stacked circle.dot,\n    .cds--cc--scatter-stacked circle.dot.hovered,\n    .cds--cc--scatter-stacked circle.dot.unfilled,\n    .cds--cc--scatter circle.dot.unfilled,\n    .cds--cc--lollipop circle.dot.filled,\n    .cds--cc--lollipop circle.dot,\n    .cds--cc--lollipop circle.dot.hovered {\n      transition: 0.1s all linear;\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered {\n      transition: 0.1s all linear;\n      stroke-width: 1.1em;\n    }\n\n    .cds--cc--tooltip {\n      ", "\n    }\n\n    .cds--overflow-menu-options__btn:focus {\n      outline-color: ", ";\n    }\n\n    .cds--btn {\n      min-height: auto;\n      display: flex;\n      flex: 0 auto;\n      align-items: center;\n      text-align: center;\n      padding: 20px;\n      margin: 0;\n      line-height: ", ";\n      margin: 0;\n      min-width: ", ";\n      overflow: hidden;\n      position: relative;\n      right: ", ";\n      text-align: center;\n      height: 40px;\n      font-family: ", ";\n      font-size: ", ";\n      border-radius: ", ";\n      font-weight: 500;\n    }\n\n    .cds--btn--primary {\n      background: ", ";\n      color: ", ";\n    }\n\n    *:focus {\n      outline: 2px solid\n        ", " !important;\n      outline-offset: 0;\n    }\n    .cds--overflow-menu-options__btn:focus,\n    .cds--overflow-menu:focus,\n    .cds--overflow-menu__trigger:focus,\n    .toolbar-control:focus {\n      outline: 2px solid\n        ", " !important;\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):focus\n      div.checkbox,\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      border: ", ";\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      box-shadow: 0 0 0 2px\n        ", " !important;\n    }\n\n    .cds--btn--primary {\n      &:focus {\n        outline: 2px solid\n          ", ";\n      }\n      outline-offset: 2px;\n      border: none;\n      box-shadow: none;\n    }\n    .cds--modal-header {\n      background: ", ";\n      margin-bottom: 0;\n      border-bottom: 1px solid\n        ", ";\n    }\n    .cds--modal-header__heading {\n      font-weight: 600;\n    }\n\n    .cds--modal-close {\n      position: absolute;\n      top: 0;\n      right: 0;\n      &:focus {\n        outline: 2px solid\n          ", ";\n        border-color: none;\n      }\n      outline-offset: 0;\n      border: none;\n    }\n  }\n\n  .cds--modal-footer.cds--modal-footer {\n    display: flex;\n    align-items: center;\n    border-top: 1px solid\n      ", ";\n    background: ", " !important;\n  }\n  .layout-child.header {\n    height: auto !important;\n    p {\n      text-overflow: inherit;\n      overflow: auto;\n      white-space: normal;\n    }\n  }\n\n  &.has-magma-toolbar .cds--cc--title p.title {\n    visibility: hidden;\n  }\n\n  svg:not(:root) {\n    overflow: visible;\n  }\n\n  .cds--cc--chart-wrapper text {\n    font-size: ", ";\n  }\n\n  g.center text,\n  .pie-label {\n    fill: ", ";\n  }\n\n  // Zoom responsive tweaks\n\n  @media screen and (max-width: 760px) {\n    .cds--modal-container {\n      overflow-y: auto;\n    }\n    .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n      overflow: visible;\n    }\n    .cds--chart-holder\n      .cds--modal\n      .cds--modal-container\n      .cds--modal-content\n      table\n      th {\n      position: relative;\n    }\n  }\n"], ["\n  &:fullscreen,\n  &:-webkit-full-screen {\n    background: ",
+var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:fullscreen,\n  &:-webkit-full-screen {\n    background: ", ";\n\n    .cds--chart-holder {\n      height: 100vh !important;\n    }\n  }\n\n  .cds--data-table thead tr th {\n    background: ", " !important;\n  }\n  .cds--data-table td,\n  .cds--data-table tbody th {\n    color: ", ";\n  }\n  .cds--data-table tbody tr,\n  .cds--data-table tbody tr td,\n  .cds--data-table tbody tr th {\n    color: ", ";\n  }\n  .cds--data-table tr {\n    block-size: 2.5rem;\n  }\n\n  .cds--cc--tooltip .content-box .datapoint-tooltip p {\n    font-size: ", ";\n    padding: ", ";\n    color: ", ";\n    max-width: 142px;\n    white-space: normal;\n  }\n\n  .cds--modal-container {\n    clip-path: inset(0% 0% 0% 0% round ", ");\n    background: ", ";\n    .cds--data-table th {\n      background: ", ";\n    }\n    .cds--data-table td {\n      border-top: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n      background: ", ";\n    }\n    .cds--data-table tr:hover td {\n      background: ", ";\n    }\n  }\n\n  .chart-holder p,\n  .chart-holder div,\n  .chart-holder text,\n  .cds--cc--axes g.axis .axis-title,\n  .cds--cc--title p.title,\n  .cds--cc--axes g.axis g.tick text {\n    font-family: ", " !important;\n    color: ", ";\n  }\n\n  .cds--cc--axes {\n    overflow: visible;\n  }\n\n  div.cds--cc--legend {\n    div.legend-item {\n      div.checkbox {\n        background: ", ";\n        border: none;\n        width: ", ";\n        height: ", ";\n        svg {\n          left: 2px;\n          position: relative;\n        }\n      }\n      p {\n        font-size: ", ";\n        margin: 0 ", " 0 0;\n      }\n    }\n  }\n  div.cds--cc--legend.has-deactivated-items {\n    div.legend-item {\n      div.checkbox {\n        border: 1px solid\n          ", ";\n      }\n      div.checkbox.active {\n        border: 1px solid transparent;\n      }\n    }\n  }\n  .chart-holder {\n    .cds--cc--axes g.axis g.tick text {\n      fill: ", ";\n    }\n    .cds--cc--axes g.axis path.domain {\n      stroke: ", ";\n    }\n    .cds--cc--grid g.x.grid g.tick line,\n    .cds--cc--grid g.y.grid g.tick line {\n      stroke: ", ";\n    }\n    .cds--cc--grid rect.chart-grid-backdrop.stroked {\n      stroke: ", ";\n    }\n    .cds--cc--skeleton .shimmer-effect-lines {\n      filter: ", ";\n    }\n    /* .chart-holder.cds--chart-holder.filled,\n    .cds--cc--skeleton rect.chart-skeleton-backdrop,\n    .cds--cc--grid rect.chart-grid-backdrop {\n    } */\n\n    .cds--cc--grid rect.chart-grid-backdrop {\n      fill: transparent;\n    }\n    .cds--cc--scatter circle.dot,\n    .cds--cc--scatter circle.dot.hovered {\n      padding: 10px;\n    }\n    .cds--cc--scatter-stacked circle.dot.hovered,\n    .cds--cc--scatter-stacked circle.dot.unfilled,\n    .cds--cc--scatter circle.dot.unfilled {\n      stroke-width: 6px;\n      transition: 0.1s all linear;\n    }\n    .cds--cc--scatter circle.dot {\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--scatter circle.dot.hovered {\n      stroke-width: 0.5em;\n      transition: 0.1s all linear;\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--lollipop circle.dot,\n    .cds--cc--lollipop circle.dot.filled,\n    .cds--cc--lollipop circle.dot.hovered {\n      stroke-width: 15px;\n    }\n    .cds--cc--scatter-stacked circle.dot,\n    .cds--cc--scatter-stacked circle.dot.hovered,\n    .cds--cc--scatter-stacked circle.dot.unfilled,\n    .cds--cc--scatter circle.dot.unfilled,\n    .cds--cc--lollipop circle.dot.filled,\n    .cds--cc--lollipop circle.dot,\n    .cds--cc--lollipop circle.dot.hovered {\n      transition: 0.1s all linear;\n      filter: drop-shadow(\n          1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          -1px 0px 0px\n            ", "\n        )\n        drop-shadow(\n          0px 1px 0px\n            ", "\n        )\n        drop-shadow(\n          0px -1px 0px\n            ", "\n        );\n    }\n    .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered {\n      transition: 0.1s all linear;\n      stroke-width: 1.1em;\n    }\n\n    .cds--cc--tooltip {\n      ", "\n    }\n\n    .cds--overflow-menu-options__btn:focus {\n      outline-color: ", ";\n    }\n\n    .cds--btn {\n      min-height: auto;\n      display: flex;\n      flex: 0 auto;\n      align-items: center;\n      text-align: center;\n      padding: 20px;\n      margin: 0;\n      line-height: ", ";\n      margin: 0;\n      min-width: ", ";\n      overflow: hidden;\n      position: relative;\n      right: ", ";\n      text-align: center;\n      height: 40px;\n      font-family: ", ";\n      font-size: ", ";\n      border-radius: ", ";\n      font-weight: 500;\n    }\n\n    .cds--btn--primary {\n      background: ", ";\n      color: ", ";\n    }\n\n    *:focus {\n      outline: 2px solid\n        ", " !important;\n      outline-offset: 0;\n    }\n    circle.dot:focus {\n      outline: none !important;\n    }\n    .cds--overflow-menu-options__btn:focus,\n    .cds--overflow-menu:focus,\n    .cds--overflow-menu__trigger:focus,\n    .toolbar-control:focus {\n      outline: 2px solid\n        ", " !important;\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):focus\n      div.checkbox,\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      border: ", ";\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      box-shadow: 0 0 0 2px\n        ", " !important;\n    }\n\n    .cds--btn--primary {\n      &:focus {\n        outline: 2px solid\n          ", ";\n      }\n      outline-offset: 2px;\n      border: none;\n      box-shadow: none;\n    }\n    .cds--modal-header {\n      background: ", ";\n      margin-bottom: 0;\n      border-bottom: 1px solid\n        ", ";\n    }\n    .cds--modal-header__heading {\n      font-weight: 600;\n    }\n\n    .cds--modal-close {\n      position: absolute;\n      top: 0;\n      right: 0;\n      &:focus {\n        outline: 2px solid\n          ", ";\n        border-color: none;\n      }\n      outline-offset: 0;\n      border: none;\n    }\n  }\n\n  .cds--modal-footer.cds--modal-footer {\n    display: flex;\n    align-items: center;\n    border-top: 1px solid\n      ", ";\n    background: ", " !important;\n  }\n  .layout-child.header {\n    height: auto !important;\n    p {\n      text-overflow: inherit;\n      overflow: auto;\n      white-space: normal;\n    }\n  }\n\n  &.has-magma-toolbar .cds--cc--title p.title {\n    visibility: hidden;\n  }\n\n  svg:not(:root) {\n    overflow: visible;\n  }\n\n  circle.dot:focus {\n    outline: none;\n    stroke: ", " !important;\n    stroke-width: 6px !important;\n    stroke-opacity: 1 !important;\n    paint-order: stroke fill;\n  }\n\n  .cds--cc--chart-wrapper text {\n    font-size: ", ";\n  }\n\n  g.center text,\n  .pie-label {\n    fill: ", ";\n  }\n\n  // Zoom responsive tweaks\n\n  @media screen and (max-width: 760px) {\n    .cds--modal-container {\n      overflow-y: auto;\n    }\n    .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n      overflow: visible;\n    }\n    .cds--chart-holder\n      .cds--modal\n      .cds--modal-container\n      .cds--modal-content\n      table\n      th {\n      position: relative;\n    }\n  }\n"], ["\n  &:fullscreen,\n  &:-webkit-full-screen {\n    background: ",
     ";\n\n    .cds--chart-holder {\n      height: 100vh !important;\n    }\n  }\n\n  .cds--data-table thead tr th {\n    background: ",
     " !important;\n  }\n  .cds--data-table td,\n  .cds--data-table tbody th {\n    color: ", ";\n  }\n  .cds--data-table tbody tr,\n  .cds--data-table tbody tr td,\n  .cds--data-table tbody tr th {\n    color: ", ";\n  }\n  .cds--data-table tr {\n    block-size: 2.5rem;\n  }\n\n  .cds--cc--tooltip .content-box .datapoint-tooltip p {\n    font-size: ", ";\n    padding: ", ";\n    color: ",
     ";\n    max-width: 142px;\n    white-space: normal;\n  }\n\n  .cds--modal-container {\n    clip-path: inset(0% 0% 0% 0% round ", ");\n    background: ",
@@ -2500,7 +2500,7 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
     "\n    }\n\n    .cds--overflow-menu-options__btn:focus {\n      outline-color: ",
     ";\n    }\n\n    .cds--btn {\n      min-height: auto;\n      display: flex;\n      flex: 0 auto;\n      align-items: center;\n      text-align: center;\n      padding: 20px;\n      margin: 0;\n      line-height: ", ";\n      margin: 0;\n      min-width: ", ";\n      overflow: hidden;\n      position: relative;\n      right: ", ";\n      text-align: center;\n      height: 40px;\n      font-family: ", ";\n      font-size: ", ";\n      border-radius: ", ";\n      font-weight: 500;\n    }\n\n    .cds--btn--primary {\n      background: ",
     ";\n      color: ", ";\n    }\n\n    *:focus {\n      outline: 2px solid\n        ",
-    " !important;\n      outline-offset: 0;\n    }\n    .cds--overflow-menu-options__btn:focus,\n    .cds--overflow-menu:focus,\n    .cds--overflow-menu__trigger:focus,\n    .toolbar-control:focus {\n      outline: 2px solid\n        ",
+    " !important;\n      outline-offset: 0;\n    }\n    circle.dot:focus {\n      outline: none !important;\n    }\n    .cds--overflow-menu-options__btn:focus,\n    .cds--overflow-menu:focus,\n    .cds--overflow-menu__trigger:focus,\n    .toolbar-control:focus {\n      outline: 2px solid\n        ",
     " !important;\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):focus\n      div.checkbox,\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      border: ",
     ";\n    }\n    div.cds--cc--legend.clickable\n      div.legend-item:not(.additional):hover\n      div.checkbox {\n      box-shadow: 0 0 0 2px\n        ",
     " !important;\n    }\n\n    .cds--btn--primary {\n      &:focus {\n        outline: 2px solid\n          ",
@@ -2509,7 +2509,8 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
     ";\n    }\n    .cds--modal-header__heading {\n      font-weight: 600;\n    }\n\n    .cds--modal-close {\n      position: absolute;\n      top: 0;\n      right: 0;\n      &:focus {\n        outline: 2px solid\n          ",
     ";\n        border-color: none;\n      }\n      outline-offset: 0;\n      border: none;\n    }\n  }\n\n  .cds--modal-footer.cds--modal-footer {\n    display: flex;\n    align-items: center;\n    border-top: 1px solid\n      ",
     ";\n    background: ",
-    " !important;\n  }\n  .layout-child.header {\n    height: auto !important;\n    p {\n      text-overflow: inherit;\n      overflow: auto;\n      white-space: normal;\n    }\n  }\n\n  &.has-magma-toolbar .cds--cc--title p.title {\n    visibility: hidden;\n  }\n\n  svg:not(:root) {\n    overflow: visible;\n  }\n\n  .cds--cc--chart-wrapper text {\n    font-size: ", ";\n  }\n\n  g.center text,\n  .pie-label {\n    fill: ", ";\n  }\n\n  // Zoom responsive tweaks\n\n  @media screen and (max-width: 760px) {\n    .cds--modal-container {\n      overflow-y: auto;\n    }\n    .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n      overflow: visible;\n    }\n    .cds--chart-holder\n      .cds--modal\n      .cds--modal-container\n      .cds--modal-content\n      table\n      th {\n      position: relative;\n    }\n  }\n"])), function (props) {
+    " !important;\n  }\n  .layout-child.header {\n    height: auto !important;\n    p {\n      text-overflow: inherit;\n      overflow: auto;\n      white-space: normal;\n    }\n  }\n\n  &.has-magma-toolbar .cds--cc--title p.title {\n    visibility: hidden;\n  }\n\n  svg:not(:root) {\n    overflow: visible;\n  }\n\n  circle.dot:focus {\n    outline: none;\n    stroke: ",
+    " !important;\n    stroke-width: 6px !important;\n    stroke-opacity: 1 !important;\n    paint-order: stroke fill;\n  }\n\n  .cds--cc--chart-wrapper text {\n    font-size: ", ";\n  }\n\n  g.center text,\n  .pie-label {\n    fill: ", ";\n  }\n\n  // Zoom responsive tweaks\n\n  @media screen and (max-width: 760px) {\n    .cds--modal-container {\n      overflow-y: auto;\n    }\n    .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n      overflow: visible;\n    }\n    .cds--chart-holder\n      .cds--modal\n      .cds--modal-container\n      .cds--modal-content\n      table\n      th {\n      position: relative;\n    }\n  }\n"])), function (props) {
     return props.isInverse
         ? props.theme.colors.primary700
         : props.theme.colors.neutral100;
@@ -2654,6 +2655,10 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
     return props.isInverse
         ? props.theme.colors.primary600
         : props.theme.colors.neutral100;
+}, function (props) {
+    return props.isInverse
+        ? props.theme.colors.focusInverse
+        : props.theme.colors.focus;
 }, function (props) { return props.theme.typeScale.size02.fontSize; }, function (props) { return (props.isInverse ? props.theme.colors.neutral100 : ''); });
 /* Carbon themes
 https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/interfaces/enums.ts#L12)
@@ -2777,78 +2782,109 @@ function downloadImage(wrapperRef, title, format) {
         return;
     var svgRect = svg.getBoundingClientRect();
     var legendItems = readLegendItems(wrapper);
-    var scale = 2;
-    // Measure legend height
-    var tempCanvas = document.createElement('canvas');
-    var tempCtx = tempCanvas.getContext('2d');
-    var fontSize = 13 * scale;
-    var swatchSize = 12 * scale;
-    var gap = 8 * scale;
-    var itemGap = 16 * scale;
-    var paddingX = 16 * scale;
-    var canvasWidth = svgRect.width * scale;
-    var legendHeight = 0;
-    if (legendItems.length > 0 && tempCtx) {
-        tempCtx.font = fontSize + "px sans-serif";
-        var x = paddingX;
-        var rows = 1;
-        for (var _i = 0, legendItems_1 = legendItems; _i < legendItems_1.length; _i++) {
-            var item = legendItems_1[_i];
-            var textWidth = tempCtx.measureText(item.label).width;
-            var itemWidth = swatchSize + gap + textWidth + itemGap;
-            if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
-                x = paddingX;
-                rows++;
+    var doWork = function () {
+        var scale = 2;
+        // Measure legend height
+        var tempCanvas = document.createElement('canvas');
+        var tempCtx = tempCanvas.getContext('2d');
+        var fontSize = 13 * scale;
+        var swatchSize = 12 * scale;
+        var gap = 8 * scale;
+        var itemGap = 16 * scale;
+        var paddingX = 16 * scale;
+        var canvasWidth = svgRect.width * scale;
+        var legendHeight = 0;
+        if (legendItems.length > 0 && tempCtx) {
+            tempCtx.font = fontSize + "px sans-serif";
+            var x = paddingX;
+            var rows = 1;
+            for (var _i = 0, legendItems_1 = legendItems; _i < legendItems_1.length; _i++) {
+                var item = legendItems_1[_i];
+                var textWidth = tempCtx.measureText(item.label).width;
+                var itemWidth = swatchSize + gap + textWidth + itemGap;
+                if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
+                    x = paddingX;
+                    rows++;
+                }
+                x += itemWidth;
             }
-            x += itemWidth;
+            legendHeight = rows * (fontSize + gap) + gap * 2;
         }
-        legendHeight = rows * (fontSize + gap) + gap * 2;
-    }
-    var width = svgRect.width * scale;
-    var height = svgRect.height * scale + legendHeight;
-    var clone = svg.cloneNode(true);
-    clone.setAttribute('width', String(svgRect.width));
-    clone.setAttribute('height', String(svgRect.height));
-    clone.setAttribute('viewBox', "0 0 " + svgRect.width + " " + svgRect.height);
-    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    inlineStyles(svg, clone);
-    var serializer = new XMLSerializer();
-    var svgString = serializer.serializeToString(clone);
-    var svgBlob = new Blob([svgString], {
-        type: 'image/svg+xml;charset=utf-8',
-    });
-    var url = URL.createObjectURL(svgBlob);
-    var mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png';
-    var ext = format === 'jpg' ? 'jpg' : 'png';
-    var img = new Image();
-    img.onload = function () {
-        var canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        var ctx = canvas.getContext('2d');
-        if (!ctx)
-            return;
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
-        URL.revokeObjectURL(url);
-        if (legendItems.length > 0) {
-            drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
-        }
-        canvas.toBlob(function (blob) {
-            if (!blob)
+        var width = svgRect.width * scale;
+        var height = svgRect.height * scale + legendHeight;
+        var clone = svg.cloneNode(true);
+        clone.setAttribute('width', String(svgRect.width));
+        clone.setAttribute('height', String(svgRect.height));
+        clone.setAttribute('viewBox', "0 0 " + svgRect.width + " " + svgRect.height);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        inlineStyles(svg, clone);
+        var serializer = new XMLSerializer();
+        var svgString = serializer.serializeToString(clone);
+        var svgBlob = new Blob([svgString], {
+            type: 'image/svg+xml;charset=utf-8',
+        });
+        var url = URL.createObjectURL(svgBlob);
+        var mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png';
+        var ext = format === 'jpg' ? 'jpg' : 'png';
+        var img = new Image();
+        img.onload = function () {
+            var canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            var ctx = canvas.getContext('2d');
+            if (!ctx)
                 return;
-            var imgUrl = URL.createObjectURL(blob);
-            var a = document.createElement('a');
-            a.href = imgUrl;
-            a.download = (title || 'chart') + "." + ext;
-            a.click();
-            URL.revokeObjectURL(imgUrl);
-        }, mimeType);
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
+            URL.revokeObjectURL(url);
+            if (legendItems.length > 0) {
+                drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
+            }
+            canvas.toBlob(function (blob) {
+                if (!blob)
+                    return;
+                var imgUrl = URL.createObjectURL(blob);
+                var a = document.createElement('a');
+                a.href = imgUrl;
+                a.download = (title || 'chart') + "." + ext;
+                a.click();
+                URL.revokeObjectURL(imgUrl);
+            }, mimeType);
+        };
+        img.onerror = function () { return URL.revokeObjectURL(url); };
+        img.src = url;
     };
-    img.src = url;
+    // Defer to idle time with a 2-second deadline so it always runs.
+    if (typeof requestIdleCallback === 'function') {
+        requestIdleCallback(doWork, { timeout: 2000 });
+    }
+    else {
+        setTimeout(doWork, 0);
+    }
 }
+var ALL_CHARTS = {
+    area: chartsReact.AreaChart,
+    areaStacked: chartsReact.StackedAreaChart,
+    bar: chartsReact.SimpleBarChart,
+    barGrouped: chartsReact.GroupedBarChart,
+    barStacked: chartsReact.StackedBarChart,
+    donut: chartsReact.DonutChart,
+    line: chartsReact.LineChart,
+    lollipop: chartsReact.LollipopChart,
+    pie: chartsReact.PieChart,
+    radar: chartsReact.RadarChart,
+    boxplot: chartsReact.BoxplotChart,
+    bubble: chartsReact.BubbleChart,
+    bullet: chartsReact.BulletChart,
+    gauge: chartsReact.GaugeChart,
+    histogram: chartsReact.HistogramChart,
+    meter: chartsReact.MeterChart,
+    scatter: chartsReact.ScatterChart,
+    combo: chartsReact.ComboChart,
+};
 function CarbonChartToolbar(_a) {
+    var _b;
     var config = _a.config, dataSet = _a.dataSet, isInverse = _a.isInverse, isTableOpen = _a.isTableOpen, isFullscreen = _a.isFullscreen, onOpenTable = _a.onOpenTable, onToggleFullscreen = _a.onToggleFullscreen, theme = _a.theme, title = _a.title, wrapperRef = _a.wrapperRef;
     var t = useChartToolbarI18n();
     var showTable = config.showAsTable !== false;
@@ -2871,7 +2907,7 @@ function CarbonChartToolbar(_a) {
             React__namespace.createElement(reactMagmaDom.DropdownDivider, null),
             config.moreOptions))));
     return (React__namespace.createElement(ToolbarWrapper, { isFullscreen: isFullscreen, isInverse: isInverse, theme: theme },
-        React__namespace.createElement(ChartTitle, { isInverse: isInverse, theme: theme }, resolvedTitle),
+        React__namespace.createElement(ChartTitle, { as: "h" + ((_b = config.titleLevel) !== null && _b !== void 0 ? _b : 2), isInverse: isInverse, theme: theme }, resolvedTitle),
         React__namespace.createElement(ToolbarActions, { theme: theme },
             showTable && (React__namespace.createElement(ChartTableButton, { ariaLabel: resolvedTitle, icon: React__namespace.createElement(reactMagmaIcons.TableIcon, { size: 20 }), isInverse: isInverse, isTableOpen: isTableOpen, onClick: onOpenTable })),
             showFullscreen && (React__namespace.createElement(ChartFullscreenButton, { ariaLabel: (isFullscreen ? 'Exit' : 'View') + " " + resolvedTitle + " full screen", icon: React__namespace.createElement(reactMagmaIcons.FullscreenIcon, { size: 20 }), exitIcon: React__namespace.createElement(reactMagmaIcons.FullscreenExitIcon, { size: 20 }), isInverse: isInverse, isFullscreen: isFullscreen, onClick: onToggleFullscreen })),
@@ -2919,7 +2955,13 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
         };
         document.addEventListener('fullscreenchange', onFullscreenChange);
         return function () {
-            return document.removeEventListener('fullscreenchange', onFullscreenChange);
+            var _a;
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+            // Restore height if the component unmounts while in fullscreen.
+            var chartHolder = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.cds--chart-holder');
+            if (chartHolder && document.fullscreenElement) {
+                chartHolder.style.height = savedHeightRef.current;
+            }
         };
     }, [fullscreenEnabled]);
     var openTableModal = React__namespace.useCallback(function (event) {
@@ -2928,10 +2970,10 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
     }, []);
     var closeTableModal = React__namespace.useCallback(function () {
         setIsTableOpen(false);
-        setTimeout(function () {
+        requestAnimationFrame(function () {
             var _a;
             (_a = lastTableTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, 0);
+        });
     }, []);
     var toggleFullscreen = React__namespace.useCallback(function () {
         if (!document.fullscreenElement && internalRef.current) {
@@ -2950,61 +2992,128 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
         downloadCsv(dataSet, chartTitle);
     }, [dataSet, chartTitle]);
     useCarbonModalFocusManagement(internalRef);
-    var allCharts = {
-        area: chartsReact.AreaChart,
-        areaStacked: chartsReact.StackedAreaChart,
-        bar: chartsReact.SimpleBarChart,
-        barGrouped: chartsReact.GroupedBarChart,
-        barStacked: chartsReact.StackedBarChart,
-        donut: chartsReact.DonutChart,
-        line: chartsReact.LineChart,
-        lollipop: chartsReact.LollipopChart,
-        pie: chartsReact.PieChart,
-        radar: chartsReact.RadarChart,
-        boxplot: chartsReact.BoxplotChart,
-        bubble: chartsReact.BubbleChart,
-        bullet: chartsReact.BulletChart,
-        gauge: chartsReact.GaugeChart,
-        histogram: chartsReact.HistogramChart,
-        meter: chartsReact.MeterChart,
-        scatter: chartsReact.ScatterChart,
-        combo: chartsReact.ComboChart,
-    };
-    function buildColors() {
+    var colorScale = React__namespace.useMemo(function () {
         var scaleColorsObj = {};
-        var allGroups = dataSet.map(function (item) {
-            return 'group' in item ? item['group'] : null;
-        });
-        var uniqueGroups = allGroups.filter(function (g, index) { return allGroups.indexOf(g) === index; });
         var customColors = options.colors || [];
         var allColors = __spreadArrays(customColors, theme.chartColors);
         var allInverseColors = __spreadArrays(customColors, theme.chartColorsInverse);
-        uniqueGroups.forEach(function (group, i) {
-            if (uniqueGroups.length <= allColors.length) {
-                return (scaleColorsObj[group || 'null'] = isInverse
+        var allGroups = dataSet.map(function (item) {
+            return 'group' in item ? item['group'] : null;
+        });
+        var uniqueGroups = Array.from(new Set(allGroups));
+        if (uniqueGroups.length <= allColors.length) {
+            for (var i = 0; i < uniqueGroups.length; i++) {
+                var group = uniqueGroups[i];
+                scaleColorsObj[String(group !== null && group !== void 0 ? group : 'null')] = isInverse
                     ? allInverseColors[i]
-                    : allColors[i]);
+                    : allColors[i];
             }
-            return {};
-        });
+        }
         return scaleColorsObj;
-    }
+    }, [
+        dataSet,
+        options,
+        theme.chartColors,
+        theme.chartColorsInverse,
+        isInverse,
+    ]);
     var newOptions = __assign(__assign(__assign({}, options), { theme: isInverse ? ChartTheme.G100 : ChartTheme.WHITE, color: {
-            scale: buildColors(),
+            scale: colorScale,
         }, tooltip: __assign(__assign({}, ((options === null || options === void 0 ? void 0 : options.tooltip) || {})), { truncation: {
                 type: 'none',
             } }) }), (chartToolbar ? { toolbar: { enabled: false } } : {}));
-    var ChartType = allCharts[type];
-    // Adding aria-label to main SVG container
+    var ChartType = ALL_CHARTS[type];
+    React__namespace.useEffect(function () {
+        if (!ariaLabel)
+            return;
+        var rafId = requestAnimationFrame(function () {
+            var _a;
+            var svgEl = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.graph-frame');
+            if (!svgEl)
+                return;
+            svgEl.setAttribute('aria-label', ariaLabel);
+        });
+        return function () { return cancelAnimationFrame(rafId); };
+    }, [ariaLabel]);
+    // Make Carbon Charts data points keyboard-focusable.
     React__namespace.useEffect(function () {
-        if (ariaLabel) {
-            document.querySelectorAll('.graph-frame ').forEach(function (div) {
-                div.setAttribute('aria-label', ariaLabel);
+        var wrapper = internalRef.current;
+        if (!wrapper)
+            return;
+        var isDot = function (el) {
+            return el instanceof Element &&
+                el.nodeName.toLowerCase() === 'circle' &&
+                el.classList.contains('dot');
+        };
+        var onFocusIn = function (e) {
+            if (!isDot(e.target))
+                return;
+            var dot = e.target;
+            dot.style.opacity = '1';
+            var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
+            var cx = left + width / 2;
+            var cy = top + height / 2;
+            dot.dispatchEvent(new MouseEvent('mouseover', {
+                bubbles: true,
+                clientX: cx,
+                clientY: cy,
+                screenX: cx,
+                screenY: cy,
+            }));
+            dot.dispatchEvent(new MouseEvent('mousemove', {
+                bubbles: true,
+                clientX: cx,
+                clientY: cy,
+                screenX: cx,
+                screenY: cy,
+            }));
+        };
+        var onFocusOut = function (e) {
+            if (!isDot(e.target))
+                return;
+            var dot = e.target;
+            dot.style.opacity = '';
+            dot.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+        };
+        var onKeyDown = function (e) {
+            if (!isDot(e.target))
+                return;
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            e.preventDefault();
+            var dot = e.target;
+            var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
+            var cx = left + width / 2;
+            var cy = top + height / 2;
+            dot.dispatchEvent(new MouseEvent('click', {
+                bubbles: true,
+                clientX: cx,
+                clientY: cy,
+            }));
+        };
+        var rafId = requestAnimationFrame(function () {
+            wrapper
+                .querySelectorAll('circle.dot')
+                .forEach(function (dot) {
+                if (!dot.hasAttribute('tabindex')) {
+                    dot.setAttribute('tabindex', '0');
+                }
             });
-        }
-    });
-    var groupsLength = Object.keys(buildColors()).length;
+        });
+        wrapper.addEventListener('focusin', onFocusIn);
+        wrapper.addEventListener('focusout', onFocusOut);
+        wrapper.addEventListener('keydown', onKeyDown);
+        return function () {
+            cancelAnimationFrame(rafId);
+            wrapper.removeEventListener('focusin', onFocusIn);
+            wrapper.removeEventListener('focusout', onFocusOut);
+            wrapper.removeEventListener('keydown', onKeyDown);
+        };
+    }, [type]);
+    var groupsLength = Object.keys(colorScale).length;
     var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
+    if (!ChartType)
+        return null;
     return (React__namespace.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
         React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper" + (chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
             React__namespace.createElement(ChartContentWrapper, null,