@react-magma/charts 14.0.0-rc.4 → 14.0.0

package/src/components/ChartTable/chartToolbarI18n.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { I18nContext } from 'react-magma-dom';
+
+export interface ChartToolbarI18n {
+  defaultTitle: string;
+  downloadAsCsv: string;
+  downloadAsJpg: string;
+  downloadAsPng: string;
+  exitFullScreen: 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',
+  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.
+ */
+
+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,
+    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/hooks/useCarbonModalFocusManagement.ts

@@ -7,6 +7,7 @@ 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' &&
@@ -18,6 +19,7 @@ function getFocusableElements(container: HTMLElement): HTMLElement[] {
 
 function findVisibleModal(wrapper: HTMLElement): HTMLElement | null {
   const modal = wrapper.querySelector<HTMLElement>('.cds--modal');
+
   if (!modal) return null;
 
   const isVisible =
@@ -40,14 +42,17 @@ export function useCarbonModalFocusManagement(
 
   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();
         }
@@ -62,6 +67,7 @@ export function useCarbonModalFocusManagement(
       // (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) {
@@ -78,11 +84,13 @@ export function useCarbonModalFocusManagement(
         if (modal.contains(document.activeElement)) return;
 
         const closeBtn = modal.querySelector<HTMLElement>('.cds--modal-close');
+
         if (
           closeBtn &&
           window.getComputedStyle(closeBtn).visibility !== 'hidden'
         ) {
           closeBtn.focus();
+
           return;
         }
 
@@ -90,14 +98,17 @@ export function useCarbonModalFocusManagement(
           requestAnimationFrame(pollAndFocus);
         }
       };
+
       requestAnimationFrame(pollAndFocus);
 
       keydownHandler.current = (event: KeyboardEvent) => {
         if (event.key !== 'Tab') return;
 
         const focusable = getFocusableElements(modal);
+
         if (focusable.length === 0) {
           event.preventDefault();
+
           return;
         }
 
@@ -106,6 +117,7 @@ export function useCarbonModalFocusManagement(
           if (focusable[0] !== document.activeElement) {
             focusable[0].focus();
           }
+
           return;
         }
 

package/src/index.ts

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