@cdc/core 4.25.2-25 → 4.25.3-6

package/components/DataTable/DataTable.tsx

@@ -212,7 +212,12 @@ const DataTable = (props: DataTableProps) => {
   const getClassNames = (): string => {
     const classes = ['data-table-container']
 
-    if (config.table.showDownloadLinkBelow) {
+    const hasDownloadLinkAbove =
+      (config.table.download || config.general?.showDownloadButton) && !config.table.showDownloadLinkBelow
+
+    const isStandaloneTable = config.type === 'table'
+
+    if (!hasDownloadLinkAbove && !isStandaloneTable) {
       classes.push('mt-4')
     }
 
@@ -237,15 +242,19 @@ const DataTable = (props: DataTableProps) => {
       }
     }
 
-    const getMediaControlsClasses = belowTable => {
+    const getMediaControlsClasses = (belowTable, hasDownloadLink) => {
       const classes = ['download-links']
       if (!belowTable) {
-        classes.push('mt-4', 'mb-2')
+        if (hasDownloadLink) {
+          classes.push('mt-4', 'mb-2')
+        }
         const isLegendOnBottom = config?.legend?.position === 'bottom' || isLegendWrapViewport(viewport)
         if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
         if (config.brush?.active && config.legend.hide) classes.push('brush-active')
       } else {
-        classes.push('mt-2')
+        if (hasDownloadLink) {
+          classes.push('mt-2')
+        }
       }
       return classes
     }
@@ -267,10 +276,11 @@ const DataTable = (props: DataTableProps) => {
       : {}
 
     const TableMediaControls = ({ belowTable }) => {
+      const hasDownloadLink = config.table.download || config.general?.showDownloadButton
       return (
-        <MediaControls.Section classes={getMediaControlsClasses(belowTable)}>
+        <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
-          {(config.table.download || config.general?.showDownloadButton) && (
+          {hasDownloadLink && (
             <DownloadButton
               rawData={getDownloadData()}
               fileName={`${vizTitle || 'data-table'}.csv`}
@@ -283,7 +293,7 @@ const DataTable = (props: DataTableProps) => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        {config.general?.showDownloadButton && !config.table.showDownloadLinkBelow && <TableMediaControls />}
+        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
@@ -357,9 +367,7 @@ const DataTable = (props: DataTableProps) => {
               )}
           </div>
         </section>
-        {config.general?.showDownloadButton && config.table.showDownloadLinkBelow && (
-          <TableMediaControls belowTable={true} />
-        )}
+        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>

package/components/NestedDropdown/NestedDropdown.tsx

@@ -283,7 +283,11 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             onFocus={() => setInputHasFocus(true)}
           />
           <span className='list-arrow' aria-hidden={true}>
-            <Icon display='caretDown' />
+            {isListOpened ? (
+              <Icon display='caretUp' alt='arrow pointing up' />
+            ) : (
+              <Icon display='caretDown' alt='arrow pointing down' />
+            )}
           </span>
         </div>
         {loading && <Loader spinnerType={'text-secondary'} />}

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -29,11 +29,14 @@
     }
   }
 
+  [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 {
@@ -77,7 +81,7 @@
 
   & [class^='main-nested-dropdown-container-'] {
     max-height: 375px;
-    overflow-y: scroll;
+    overflow-y: auto;
     position: absolute;
     z-index: 3;
     min-width: 200px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.2-25",
+  "version": "4.25.3-6",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "f00bd8a0fc746def7cc23b91ef49a03a3ceac65e",
+  "gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6",
   "devDependencies": {
     "sass": "^1.79.4"
   }