@react-magma/charts 14.0.0-next.2 → 14.0.0-next.4

package/src/components/ChartTable/chartToolbarI18n.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import { I18nContext } from 'react-magma-dom';
+
+export interface ChartToolbarI18n {
+  defaultTitle: string;
+  downloadAsCsv: string;
+  downloadAsJpg: string;
+  downloadAsPng: string;
+  exitFullScreen: string;
+  legendInstructions: string;
+  makeFullScreen: string;
+  moreOptionsAriaLabel: string;
+  showAsTableTooltip: string;
+  tabularRepresentationLabel: string;
+}
+
+const defaults: ChartToolbarI18n = {
+  defaultTitle: 'Chart',
+  downloadAsCsv: 'Download as CSV',
+  downloadAsJpg: 'Download as JPG',
+  downloadAsPng: 'Download as PNG',
+  exitFullScreen: 'Exit full screen',
+  legendInstructions: 'Checking these checkboxes will update the chart.',
+  makeFullScreen: 'Make full screen',
+  moreOptionsAriaLabel: 'More options',
+  showAsTableTooltip: 'Show as table',
+  tabularRepresentationLabel: 'Tabular representation',
+};
+
+/**
+ * Reads chart toolbar i18n strings from the I18nContext if available,
+ * falling back to English defaults.
+ */
+// eslint-disable-next-line complexity
+export function useChartToolbarI18n(): ChartToolbarI18n {
+  const i18n = React.useContext(I18nContext);
+  const toolbar = (i18n.charts as { toolbar?: Partial<ChartToolbarI18n> })
+    ?.toolbar;
+
+  if (!toolbar) return defaults;
+
+  return {
+    defaultTitle: toolbar.defaultTitle ?? defaults.defaultTitle,
+    downloadAsCsv: toolbar.downloadAsCsv ?? defaults.downloadAsCsv,
+    downloadAsJpg: toolbar.downloadAsJpg ?? defaults.downloadAsJpg,
+    downloadAsPng: toolbar.downloadAsPng ?? defaults.downloadAsPng,
+    exitFullScreen: toolbar.exitFullScreen ?? defaults.exitFullScreen,
+    legendInstructions:
+      toolbar.legendInstructions ?? defaults.legendInstructions,
+    makeFullScreen: toolbar.makeFullScreen ?? defaults.makeFullScreen,
+    moreOptionsAriaLabel:
+      toolbar.moreOptionsAriaLabel ?? defaults.moreOptionsAriaLabel,
+    showAsTableTooltip:
+      toolbar.showAsTableTooltip ?? defaults.showAsTableTooltip,
+    tabularRepresentationLabel:
+      toolbar.tabularRepresentationLabel ?? defaults.tabularRepresentationLabel,
+  };
+}

package/src/components/ChartTable/index.ts

@@ -0,0 +1,23 @@
+export { ChartDataTable } from './ChartDataTable';
+export type {
+  ChartDataTableProps,
+  ChartDataTableColumn,
+} from './ChartDataTable';
+
+export { ChartFullscreenButton } from './ChartFullscreenButton';
+export type { ChartFullscreenButtonProps } from './ChartFullscreenButton';
+
+export { ChartMoreOptionsButton } from './ChartMoreOptionsButton';
+export type { ChartMoreOptionsButtonProps } from './ChartMoreOptionsButton';
+
+export { ChartTableButton } from './ChartTableButton';
+export type { ChartTableButtonProps } from './ChartTableButton';
+
+export { ChartTableModal } from './ChartTableModal';
+export type { ChartTableModalProps } from './ChartTableModal';
+
+export { ChartToolbar } from './ChartToolbar';
+export type { ChartToolbarProps } from './ChartToolbar';
+
+export { useChartToolbarI18n } from './chartToolbarI18n';
+export type { ChartToolbarI18n } from './chartToolbarI18n';

package/src/components/LineChart/DataTable.tsx

@@ -15,7 +15,7 @@ export interface DataTableProps {
   data?: any;
 }
 
-export const DataTable = props => {
+export const DataTable = (props: DataTableProps) => {
   const { data } = props;
 
   return (
@@ -32,8 +32,8 @@ export const DataTable = props => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.map((dataset, i) => (
-            <TableRow key={i}>
+          {data.map((dataset: any, i: number) => (
+            <TableRow key={dataset.label ?? `row-${i}`}>
               <TableHeaderCell
                 scope={TableHeaderCellScope.row}
                 style={{

package/src/components/LineChart/LineChart.tsx

@@ -653,7 +653,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
               color={theme.iterableColors[i]}
               dataIndex={i}
               isHidden={hiddenData.includes(i)}
-              key={i}
+              key={name}
               name={name}
               onClick={handleLegendClick}
               onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}

package/src/hooks/useCarbonModalFocusManagement.ts

@@ -0,0 +1,173 @@
+import * as React from 'react';
+
+const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el): el is HTMLElement => {
+      const style = window.getComputedStyle(el);
+      return (
+        style.display !== 'none' &&
+        style.visibility !== 'hidden' &&
+        !el.hasAttribute('disabled')
+      );
+    }
+  );
+}
+
+function findVisibleModal(wrapper: HTMLElement): HTMLElement | null {
+  const modal = wrapper.querySelector<HTMLElement>('.cds--modal');
+  if (!modal) return null;
+
+  const isVisible =
+    modal.getAttribute('aria-modal') === 'true' ||
+    modal.style.visibility === 'visible' ||
+    modal.classList.contains('is-visible');
+
+  return isVisible ? modal : null;
+}
+
+export function useCarbonModalFocusManagement(
+  wrapperRef: React.RefObject<HTMLDivElement>
+): void {
+  const previouslyFocusedElement = React.useRef<Element | null>(null);
+  const keydownHandler = React.useRef<((e: KeyboardEvent) => void) | null>(
+    null
+  );
+  const focusinHandler = React.useRef<((e: FocusEvent) => void) | null>(null);
+  const currentModal = React.useRef<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    function focusModalCloseButton(modal: HTMLElement) {
+      const closeButton = modal.querySelector<HTMLElement>('.cds--modal-close');
+      if (closeButton) {
+        closeButton.focus();
+      } else {
+        const focusable = getFocusableElements(modal);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        }
+      }
+    }
+
+    function handleModalOpen(modal: HTMLElement) {
+      currentModal.current = modal;
+      previouslyFocusedElement.current = document.activeElement;
+
+      // Permanent guard: redirect focus back into modal whenever it escapes
+      // (e.g. Carbon's overflow menu returning focus to its trigger).
+      focusinHandler.current = (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (!modal.contains(target)) {
+          setTimeout(() => {
+            if (currentModal.current === modal) {
+              focusModalCloseButton(modal);
+            }
+          }, 0);
+        }
+      };
+      document.addEventListener('focusin', focusinHandler.current);
+
+      let pollAttempts = 0;
+      const pollAndFocus = () => {
+        if (currentModal.current !== modal) return;
+        if (modal.contains(document.activeElement)) return;
+
+        const closeBtn = modal.querySelector<HTMLElement>('.cds--modal-close');
+        if (
+          closeBtn &&
+          window.getComputedStyle(closeBtn).visibility !== 'hidden'
+        ) {
+          closeBtn.focus();
+          return;
+        }
+
+        if (++pollAttempts < 30) {
+          requestAnimationFrame(pollAndFocus);
+        }
+      };
+      requestAnimationFrame(pollAndFocus);
+
+      keydownHandler.current = (event: KeyboardEvent) => {
+        if (event.key !== 'Tab') return;
+
+        const focusable = getFocusableElements(modal);
+        if (focusable.length === 0) {
+          event.preventDefault();
+          return;
+        }
+
+        if (focusable.length === 1) {
+          event.preventDefault();
+          if (focusable[0] !== document.activeElement) {
+            focusable[0].focus();
+          }
+          return;
+        }
+
+        const firstItem = focusable[0];
+        const lastItem = focusable[focusable.length - 1];
+
+        if (!event.shiftKey && document.activeElement === lastItem) {
+          event.preventDefault();
+          firstItem.focus();
+        } else if (event.shiftKey && document.activeElement === firstItem) {
+          event.preventDefault();
+          lastItem.focus();
+        }
+      };
+
+      document.addEventListener('keydown', keydownHandler.current);
+    }
+
+    function handleModalClose() {
+      // Null out currentModal first so any pending setTimeout redirects
+      // (scheduled by the focusin guard) see a closed modal and bail out.
+      currentModal.current = null;
+
+      if (focusinHandler.current) {
+        document.removeEventListener('focusin', focusinHandler.current);
+        focusinHandler.current = null;
+      }
+
+      if (keydownHandler.current) {
+        document.removeEventListener('keydown', keydownHandler.current);
+        keydownHandler.current = null;
+      }
+
+      if (previouslyFocusedElement.current instanceof HTMLElement) {
+        previouslyFocusedElement.current.focus();
+      }
+    }
+
+    const observer = new MutationObserver(() => {
+      const visibleModal = findVisibleModal(wrapper);
+
+      if (visibleModal && !currentModal.current) {
+        handleModalOpen(visibleModal);
+      } else if (!visibleModal && currentModal.current) {
+        handleModalClose();
+      }
+    });
+
+    observer.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'aria-modal'],
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+      if (keydownHandler.current) {
+        document.removeEventListener('keydown', keydownHandler.current);
+      }
+      if (focusinHandler.current) {
+        document.removeEventListener('focusin', focusinHandler.current);
+      }
+    };
+  }, [wrapperRef]);
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/LineChart';
 export * from './components/CarbonChart';
+export * from './components/ChartTable';