revert: Replace records having numeric keys with maps, part 1 (#1801)" (

#1826)

src/column-layout/grid-column-layout.tsx

@@ -11,12 +11,12 @@ import { InternalColumnLayoutProps } from './interfaces';
 import { COLUMN_TRIGGERS, ColumnLayoutBreakpoint } from './internal';
 import styles from './styles.css.js';
 
-const COLUMN_DEFS = new Map<number, GridProps.ElementDefinition>([
-  [1, { colspan: { default: 12, xxs: 12, xs: 12 } }],
-  [2, { colspan: { default: 12, xxs: 6, xs: 6 } }],
-  [3, { colspan: { default: 12, xxs: 6, xs: 4 } }],
-  [4, { colspan: { default: 12, xxs: 6, xs: 3 } }],
-]);
+const COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {
+  1: { colspan: { default: 12, xxs: 12, xs: 12 } },
+  2: { colspan: { default: 12, xxs: 6, xs: 6 } },
+  3: { colspan: { default: 12, xxs: 6, xs: 4 } },
+  4: { colspan: { default: 12, xxs: 6, xs: 3 } },
+};
 
 interface GridColumnLayoutProps
   extends Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>> {
@@ -46,7 +46,7 @@ export default function GridColumnLayout({
     <InternalGrid
       ref={ref}
       disableGutters={true}
-      gridDefinition={repeat(COLUMN_DEFS.get(columns) ?? {}, flattenedChildren.length)}
+      gridDefinition={repeat(COLUMN_DEFS[columns] ?? {}, flattenedChildren.length)}
       className={clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {
         [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,
         [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,

src/flashbar/collapsible-flashbar.tsx

@@ -64,9 +64,9 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
     },
   });
 
-  const collapsedItemRefs = useRef<Record<string, HTMLElement | null>>({});
-  const expandedItemRefs = useRef<Record<string, HTMLElement | null>>({});
-  const [initialAnimationState, setInitialAnimationState] = useState<Record<string, DOMRect> | null>(null);
+  const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});
+  const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});
+  const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);
   const listElementRef = useRef<HTMLUListElement | null>(null);
   const notificationBarRef = useRef<HTMLDivElement | null>(null);
   const [transitioning, setTransitioning] = useState(false);

src/internal/animate.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-export function getDOMRects(elements: Record<string, HTMLElement | null>) {
+export function getDOMRects(elements: Record<string | number, HTMLElement | null>) {
   const rects: Record<string, DOMRect> = {};
   for (const id in elements) {
     const element = elements[id];
@@ -29,8 +29,8 @@ export function animate({
   onTransitionsEnd,
   newElementInitialState,
 }: {
-  elements: Record<string, HTMLElement | null>;
-  oldState: Record<string, DOMRect>;
+  elements: Record<string | number, HTMLElement | null>;
+  oldState: Record<string | number, DOMRect>;
   onTransitionsEnd?: () => void;
   newElementInitialState?: (newRect: DOMRect) => { scale?: number; y?: number };
 }) {

src/mixed-line-bar-chart/__tests__/utils.test.ts

@@ -52,25 +52,9 @@ describe('calculateOffsetMaps', () => {
     const actual = calculateOffsetMaps(data);
 
     expect(actual).toEqual([
-      { positiveOffsets: new Map(), negativeOffsets: new Map() },
-      {
-        positiveOffsets: new Map([
-          ['Potatoes', 77],
-          ['Chocolate', 546],
-          ['Apples', 52],
-          ['Oranges', 47],
-        ]),
-        negativeOffsets: new Map(),
-      },
-      {
-        positiveOffsets: new Map([
-          ['Potatoes', 87],
-          ['Chocolate', 566],
-          ['Apples', 52],
-          ['Oranges', 97],
-        ]),
-        negativeOffsets: new Map(),
-      },
+      { positiveOffsets: {}, negativeOffsets: {} },
+      { positiveOffsets: { Potatoes: 77, Chocolate: 546, Apples: 52, Oranges: 47 }, negativeOffsets: {} },
+      { positiveOffsets: { Potatoes: 87, Chocolate: 566, Apples: 52, Oranges: 97 }, negativeOffsets: {} },
     ]);
   });
 
@@ -81,14 +65,14 @@ describe('calculateOffsetMaps', () => {
     const actual = calculateOffsetMaps(data);
 
     expect(actual).toEqual([
-      { positiveOffsets: new Map(), negativeOffsets: new Map() },
+      { positiveOffsets: {}, negativeOffsets: {} },
       {
-        positiveOffsets: new Map([[date.getTime(), 1]]),
-        negativeOffsets: new Map(),
+        positiveOffsets: { [date.getTime()]: 1 },
+        negativeOffsets: {},
       },
       {
-        positiveOffsets: new Map([[date.getTime(), 3]]),
-        negativeOffsets: new Map(),
+        positiveOffsets: { [date.getTime()]: 3 },
+        negativeOffsets: {},
       },
     ]);
   });
@@ -99,14 +83,14 @@ describe('calculateOffsetMaps', () => {
     const actual = calculateOffsetMaps(data);
 
     expect(actual).toEqual([
-      { positiveOffsets: new Map(), negativeOffsets: new Map() },
+      { positiveOffsets: {}, negativeOffsets: {} },
       {
-        positiveOffsets: new Map([[1, 1]]),
-        negativeOffsets: new Map(),
+        positiveOffsets: { 1: 1 },
+        negativeOffsets: {},
       },
       {
-        positiveOffsets: new Map([[1, 3]]),
-        negativeOffsets: new Map(),
+        positiveOffsets: { 1: 3 },
+        negativeOffsets: {},
       },
     ]);
   });
@@ -133,24 +117,14 @@ describe('calculateOffsetMaps', () => {
     const actual = calculateOffsetMaps(data);
 
     expect(actual).toEqual([
-      { positiveOffsets: new Map(), negativeOffsets: new Map() },
+      { positiveOffsets: {}, negativeOffsets: {} },
       {
-        positiveOffsets: new Map([[2, 3]]),
-        negativeOffsets: new Map([
-          [1, -1],
-          [3, -4],
-        ]),
+        positiveOffsets: { 2: 3 },
+        negativeOffsets: { 1: -1, 3: -4 },
       },
       {
-        positiveOffsets: new Map([
-          [1, 2],
-          [2, 3],
-        ]),
-        negativeOffsets: new Map([
-          [1, -1],
-          [2, -3],
-          [3, -8],
-        ]),
+        positiveOffsets: { 1: 2, 2: 3 },
+        negativeOffsets: { 1: -1, 2: -3, 3: -8 },
       },
     ]);
   });

src/mixed-line-bar-chart/bar-series.tsx

@@ -81,7 +81,7 @@ export default function BarSeries<T extends ChartDataTypes>({
       if (stackedBarOffsets) {
         // Stacked bars
         const offsetMap = d.y < 0 ? stackedBarOffsets.negativeOffsets : stackedBarOffsets.positiveOffsets;
-        yValue = d.y + (offsetMap.get(getKeyValue(d.x)) || 0);
+        yValue = d.y + (offsetMap[getKeyValue(d.x)] || 0);
       } else if (totalSeriesCount > 1) {
         // Regular grouped bars
         barX += seriesIndex * (barWidth + PADDING);

src/mixed-line-bar-chart/utils.ts

@@ -67,7 +67,7 @@ export const matchesX = <T>(x1: T, x2: T) => {
   return x1 === x2;
 };
 
-export type OffsetMap = Map<string | number, number>;
+export type OffsetMap = Record<string | number, number>;
 
 export interface StackedOffsets {
   positiveOffsets: OffsetMap;
@@ -83,21 +83,21 @@ export function calculateOffsetMaps(
   return data.reduce((acc, curr, idx) => {
     // First series receives empty offsets map
     if (idx === 0) {
-      acc.push({ positiveOffsets: new Map(), negativeOffsets: new Map() });
+      acc.push({ positiveOffsets: {}, negativeOffsets: {} });
     }
     const lastMap = acc[idx];
     const map: StackedOffsets = lastMap
-      ? { positiveOffsets: new Map(lastMap.positiveOffsets), negativeOffsets: new Map(lastMap.negativeOffsets) }
-      : { positiveOffsets: new Map(), negativeOffsets: new Map() };
+      ? { positiveOffsets: { ...lastMap.positiveOffsets }, negativeOffsets: { ...lastMap.negativeOffsets } }
+      : { positiveOffsets: {}, negativeOffsets: {} };
 
     curr.forEach(({ x, y }) => {
       const key = getKeyValue(x);
       if (y < 0) {
-        const lastValue = lastMap?.negativeOffsets.get(key) || 0;
-        map.negativeOffsets.set(key, lastValue + y);
+        const lastValue = lastMap?.negativeOffsets[key] || 0;
+        map.negativeOffsets[key] = lastValue + y;
       } else {
-        const lastValue = lastMap?.positiveOffsets.get(key) || 0;
-        map.positiveOffsets.set(key, lastValue + y);
+        const lastValue = lastMap?.positiveOffsets[key] || 0;
+        map.positiveOffsets[key] = lastValue + y;
       }
     });
 

src/table/sticky-columns/__tests__/use-sticky-columns.test.tsx

@@ -58,8 +58,8 @@ test('wrapper styles is not empty and wrapper listener is attached when feature
 });
 
 test('styles update when sticky column properties change', () => {
-  const emptyVisibleColumns = new Array<PropertyKey>();
-  const allVisibleColumns = [1, 2, 3];
+  const emptyVisibleColumns = new Array<string>();
+  const allVisibleColumns = ['1', '2', '3'];
   const { result, rerender } = renderHook(useStickyColumns, {
     initialProps: { visibleColumns: emptyVisibleColumns, stickyColumnsFirst: 0, stickyColumnsLast: 0 },
   });
@@ -100,68 +100,75 @@ test('styles update when wrapper scrolls', () => {
 
 test('generates non-empty sticky cell state', () => {
   const { result, rerender } = renderHook(() =>
-    useStickyColumns({ visibleColumns: [1, 2, 3], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
+    useStickyColumns({ visibleColumns: ['1', '2', '3'], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
   );
   createMockTable(result.current, 300, 500, 100, 200, 300);
 
   // Wait for effect
   rerender({});
 
   expect(result.current.store.get()).toEqual({
-    cellState: new Map([
-      [
-        1,
-        {
-          lastLeft: false,
-          lastRight: false,
-          padLeft: false,
-          offset: { left: 0 },
-        },
-      ],
-    ]),
+    cellState: {
+      1: {
+        lastLeft: false,
+        lastRight: false,
+        padLeft: false,
+        offset: { left: 0 },
+      },
+      2: null,
+      3: null,
+    },
     wrapperState: { scrollPaddingLeft: 100, scrollPaddingRight: 0 },
   });
 });
 
 test('generates empty cell state if wrapper is not scrollable', () => {
   const { result, rerender } = renderHook(() =>
-    useStickyColumns({ visibleColumns: [1, 2, 3], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
+    useStickyColumns({ visibleColumns: ['1', '2', '3'], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
   );
   createMockTable(result.current, 500, 500, 100, 200, 300);
 
   // Wait for effect
   rerender({});
 
   expect(result.current.store.get()).toEqual({
-    cellState: new Map(),
+    cellState: {
+      1: null,
+      2: null,
+      3: null,
+    },
     wrapperState: { scrollPaddingLeft: 100, scrollPaddingRight: 0 },
   });
 });
 
 test('generates empty sticky cell state if not enough scrollable space', () => {
   const { result, rerender } = renderHook(() =>
-    useStickyColumns({ visibleColumns: [1, 2, 3], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
+    useStickyColumns({ visibleColumns: ['1', '2', '3'], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
   );
   createMockTable(result.current, 300, 500, 200, 300, 100);
 
   // Wait for effect
   rerender({});
 
   expect(result.current.store.get()).toEqual({
-    cellState: new Map(),
+    cellState: {
+      1: null,
+      2: null,
+      3: null,
+    },
     wrapperState: { scrollPaddingLeft: 200, scrollPaddingRight: 0 },
   });
 });
 
 test('generates non-empty styles for sticky cells', () => {
   const { result, rerender } = renderHook(() =>
-    useStickyColumns({ visibleColumns: [1, 2, 3], stickyColumnsFirst: 0, stickyColumnsLast: 1 })
+    useStickyColumns({ visibleColumns: ['1', '2', '3'], stickyColumnsFirst: 0, stickyColumnsLast: 1 })
   );
   createMockTable(result.current, 300, 500, 300, 200, 100);
 
   const getClassName = jest.fn().mockImplementation(() => ({ 'sticky-cell': true }));
   const { result: cellStylesResult, rerender: rerenderCellStyles } = renderHook(() =>
-    useStickyCellStyles({ stickyColumns: result.current, columnId: 3, getClassName })
+    useStickyCellStyles({ stickyColumns: result.current, columnId: '3', getClassName })
   );
 
   // Wait for effect
@@ -180,13 +187,13 @@ test('generates non-empty styles for sticky cells', () => {
 
 test('updates sticky cell styles', () => {
   const { result, rerender } = renderHook(() =>
-    useStickyColumns({ visibleColumns: [1, 2, 3], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
+    useStickyColumns({ visibleColumns: ['1', '2', '3'], stickyColumnsFirst: 1, stickyColumnsLast: 0 })
   );
   const elements = createMockTable(result.current, 300, 500, 100, 200, 300);
 
   const getClassName = jest.fn().mockImplementation(() => ({ 'sticky-cell': true }));
   const { result: cellStylesResult, rerender: rerenderCellStyles } = renderHook(() =>
-    useStickyCellStyles({ stickyColumns: result.current, columnId: 1, getClassName })
+    useStickyCellStyles({ stickyColumns: result.current, columnId: '1', getClassName })
   );
   cellStylesResult.current.ref(elements.cells[0]);
 
@@ -213,15 +220,15 @@ test('updates sticky cell styles', () => {
 });
 
 test('performs styles cleanup', () => {
-  const visibleColumns = [1, 2, 3];
+  const visibleColumns = ['1', '2', '3'];
   const { result, rerender } = renderHook(useStickyColumns, {
     initialProps: { visibleColumns, stickyColumnsFirst: 1, stickyColumnsLast: 0 },
   });
   const elements = createMockTable(result.current, 300, 500, 100, 200, 300);
 
   const getClassName = jest.fn().mockImplementation(state => ({ 'sticky-cell': !!state }));
   const { result: cellStylesResult } = renderHook(() =>
-    useStickyCellStyles({ stickyColumns: result.current, columnId: 1, getClassName })
+    useStickyCellStyles({ stickyColumns: result.current, columnId: '1', getClassName })
   );
   cellStylesResult.current.ref(elements.cells[0]);
 
@@ -240,14 +247,14 @@ test('cell subscriptions are cleaned up on ref change', () => {
   const subscribe = jest.fn(() => unsubscribe);
   const stickyColumns = {
     store: {
-      get: () => ({ cellState: new Map(), wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } }),
+      get: () => ({ cellState: {}, wrapperState: { scrollPaddingLeft: 0, scrollPaddingRight: 0 } }),
       subscribe,
       unsubscribe: () => {},
     },
     style: { wrapper: {} },
     refs: { table: () => {}, wrapper: () => {}, cell: () => {} },
   };
-  const { result } = renderHook(() => useStickyCellStyles({ stickyColumns, columnId: 1, getClassName: () => ({}) }));
+  const { result } = renderHook(() => useStickyCellStyles({ stickyColumns, columnId: '1', getClassName: () => ({}) }));
 
   result.current.ref(document.createElement('td'));
 
@@ -317,11 +324,10 @@ describe('getStickyClassNames helper', () => {
 });
 
 test('updateCellOffsets element widths fallback to 0 when elements are missing', () => {
-  const { offsets } = updateCellOffsets(new Map(), {
-    stickyColumnsFirst: 1,
-    stickyColumnsLast: 1,
-    visibleColumns: ['a', 'b', 'c'],
-  });
+  const { offsets } = updateCellOffsets(
+    {},
+    { stickyColumnsFirst: 1, stickyColumnsLast: 1, visibleColumns: ['a', 'b', 'c'] }
+  );
   expect(offsets.get('a')).toEqual({ first: 0, last: 0 });
   expect(offsets.get('c')).toEqual({ first: 0, last: 0 });
 });

src/table/sticky-columns/interfaces.ts

@@ -8,7 +8,7 @@ export interface StickyColumnsProps {
 }
 
 export interface StickyColumnsState {
-  cellState: Map<PropertyKey, StickyColumnsCellState>;
+  cellState: Record<PropertyKey, null | StickyColumnsCellState>;
   wrapperState: StickyColumnsWrapperState;
 }