@cdc/core 4.25.1 → 4.25.3-6

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -29,11 +29,14 @@
     }
   }
 
-  .main-nested-dropdown-container,
+  [class^='main-nested-dropdown-container-'] {
+    cursor: pointer;
+  }
+
+  [class^='main-nested-dropdown-container-'],
   .nested-dropdown-input-container {
     border: 1px solid var(--cool-gray-10);
     min-width: 200px;
-    cursor: pointer;
     padding: 0.4rem 0.75rem;
     font-size: 1em;
   }
@@ -57,14 +60,15 @@
 
   .nested-dropdown-input-container {
     display: block;
-    width: 100%;
+    width: calc(100% + 7px);
     border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
       position: absolute;
       top: 9px;
-      right: 1px;
+      right: 9px;
       float: right;
+      pointer-events: none;
     }
 
     &.disabled {
@@ -75,9 +79,9 @@
     }
   }
 
-  & .main-nested-dropdown-container {
+  & [class^='main-nested-dropdown-container-'] {
     max-height: 375px;
-    overflow-y: scroll;
+    overflow-y: auto;
     position: absolute;
     z-index: 3;
     min-width: 200px;

package/components/Table/Table.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react'
 import Row from './components/Row'
 import GroupRow from './components/GroupRow'
-import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
+import { CellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
 import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 import _ from 'lodash'
 
 type TableProps = {
-  childrenMatrix: CellMatrix | GroupCellMatrix
+  childrenMatrix: CellMatrix | Map<string, CellMatrix>
   noData?: boolean
   tableName: string
   caption: string
@@ -24,6 +24,7 @@ type TableProps = {
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   preliminaryData?: PreliminaryDataItem[]
+  rightAlignedCols: object
 }
 
 type Position = 'sticky'
@@ -39,7 +40,8 @@ const Table = ({
   wrapColumns,
   hasRowType,
   viewport,
-  preliminaryData
+  preliminaryData,
+  rightAlignedCols
 }: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
@@ -56,9 +58,9 @@ const Table = ({
           <thead style={headStyle}>{headContent}</thead>
           <tbody>
             {isGroupedMatrix
-              ? Object.keys(childrenMatrix).flatMap(groupName => {
+              ? Array.from(childrenMatrix.keys()).flatMap(groupName => {
                   let colSpan = 0
-                  const rows = childrenMatrix[groupName].map((row, i) => {
+                  const rows = childrenMatrix.get(groupName).map((row, i) => {
                     colSpan = row.length
                     const key = `${tableName}-${groupName}-row-${i}`
                     return (
@@ -70,6 +72,7 @@ const Table = ({
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
                         viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
                       />
                     )
                   })
@@ -90,6 +93,7 @@ const Table = ({
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
                         viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
                       />
                     )
                   } else {
@@ -107,6 +111,7 @@ const Table = ({
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
                             viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
                           />
                         )
                       case RowType.row_group_total:
@@ -121,6 +126,7 @@ const Table = ({
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
                             viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
                           />
                         )
                     }

package/components/Table/components/Row.tsx

@@ -11,10 +11,20 @@ type RowProps = {
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   style?: object
   preliminaryData?: PreliminaryDataItem[]
+  rightAlignedCols: object
 }
 
 const Row: FC<RowProps> = props => {
-  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, viewport, preliminaryData } = props
+  const {
+    childRow,
+    rowKey,
+    wrapColumns,
+    cellMinWidth = 0,
+    isTotal,
+    viewport,
+    preliminaryData,
+    rightAlignedCols
+  } = props
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
 
@@ -27,11 +37,13 @@ const Row: FC<RowProps> = props => {
           ) && { color: '#777772' }) ||
           {}
 
+        const textAlign = rightAlignedCols && rightAlignedCols[i] ? 'right' : ''
+
         return (
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, ...style }}
+            style={{ whiteSpace, minWidth, textAlign, ...style }}
             isBold={isTotal}
           >
             {child}