fix no-data rtl

Author: pan-kot

src/core/chart-api/chart-extra-nodata.tsx

@@ -6,25 +6,21 @@ import type Highcharts from "highcharts";
 import AsyncStore from "../../internal/utils/async-store";
 import { ChartExtraContext } from "./chart-extra-context";
 
-import styles from "../styles.css.js";
-
 // The reactive state is used to propagate updates to the corresponding no-data React component.
 // It can be used by other components to assert if the chart is in no-data state (by checking if container is present).
 export interface ReactiveNodataState {
-  container: null | Element;
+  visible: boolean;
+  style: React.CSSProperties;
   noMatch: boolean;
 }
 
 // Chart helper that implements custom nodata behaviors.
 export class ChartExtraNodata extends AsyncStore<ReactiveNodataState> {
   private context: ChartExtraContext;
-  private noDataContainer: HTMLElement;
 
   constructor(context: ChartExtraContext) {
-    super({ container: null, noMatch: false });
+    super({ visible: false, style: {}, noMatch: false });
     this.context = context;
-    this.noDataContainer = document.createElement("div");
-    this.noDataContainer.className = styles["no-data-container"];
   }
 
   public onChartRender = () => {
@@ -35,26 +31,14 @@ export class ChartExtraNodata extends AsyncStore<ReactiveNodataState> {
     const visibleSeries = findAllVisibleSeries(this.chart);
     // The no-data is not shown when there is at least one series or point (for pie series) non-empty and visible.
     if (visibleSeries.length > 0) {
-      this.removeContainer();
-      this.set(() => ({ container: null, noMatch: false }));
+      this.set(() => ({ visible: false, style: {}, noMatch: false }));
     } else {
-      this.appendContainer();
-      this.set(() => ({ container: this.noDataContainer, noMatch: allSeriesWithData.length > 0 }));
+      this.set(() => ({ visible: true, style: this.getContainerStyle(), noMatch: allSeriesWithData.length > 0 }));
     }
   };
 
-  private appendContainer() {
-    if (!this.chart.container.contains(this.noDataContainer)) {
-      this.chart.container.appendChild(this.noDataContainer);
-    }
-    this.noDataContainer.style.left = `${this.chart.plotLeft}px`;
-    this.noDataContainer.style.bottom = `${this.chart.chartHeight - this.chart.plotHeight}px`;
-  }
-
-  private removeContainer() {
-    if (this.chart.container.contains(this.noDataContainer)) {
-      this.chart.container.removeChild(this.noDataContainer);
-    }
+  private getContainerStyle() {
+    return { left: `${this.chart.plotLeft}px`, bottom: `${this.chart.chartHeight - this.chart.plotHeight}px` };
   }
 
   private get chart() {

src/core/components/core-application.tsx

@@ -16,7 +16,7 @@ export function ChartApplication({
   keyboardNavigation: boolean;
   ariaLabel?: string;
 }) {
-  const hasData = useSelector(api.nodataStore, (s) => !s.container);
+  const hasData = useSelector(api.nodataStore, (s) => !s.visible);
   return keyboardNavigation && hasData ? (
     // Do not remove the empty outer div. It is used to contain the application element to perform
     // focus juggling, necessary to trigger a screen-reader announcement.

src/core/components/core-no-data.tsx

@@ -3,7 +3,6 @@
 
 import clsx from "clsx";
 
-import { Portal } from "@cloudscape-design/component-toolkit/internal";
 import Button from "@cloudscape-design/components/button";
 import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
 import LiveRegion from "@cloudscape-design/components/live-region";
@@ -32,7 +31,7 @@ export function ChartNoData({
   i18nStrings?: BaseI18nStrings;
 }) {
   const state = useSelector(api.nodataStore, (s) => s);
-  if (!state.container) {
+  if (!state.visible) {
     return null;
   }
   let content = null;
@@ -55,15 +54,13 @@ export function ChartNoData({
   }
   return (
     content && (
-      <Portal container={state.container}>
+      <div className={styles["no-data-container"]} style={state.style}>
         <div className={styles["no-data-wrapper"]}>
           <div className={clsx(testClasses["no-data"], styles["no-data"])}>
-            <div className={styles["no-data-content"]}>
-              <LiveRegion>{content}</LiveRegion>
-            </div>
+            <LiveRegion>{content}</LiveRegion>
           </div>
         </div>
-      </Portal>
+      </div>
     )
   );
 }

src/core/styles.scss

@@ -29,7 +29,10 @@ $side-legend-min-inline-size: max(20%, 150px);
 }
 
 .no-data {
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: cs.$space-static-xs;
+  padding-inline: cs.$space-static-m;
   background-color: cs.$color-background-container-content;
   border-radius: 8px;
   border: 1px solid cs.$color-border-divider-default;
@@ -47,13 +50,6 @@ $side-legend-min-inline-size: max(20%, 150px);
   color: cs.$color-text-empty;
 }
 
-.no-data-content {
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-block: cs.$space-static-xs;
-  padding-inline: cs.$space-static-m;
-}
-
 .chart-filters {
   padding-block-end: cs.$space-scaled-l;