From dc95a68f3879b524ae848f7f34179fb29b35cf1c Mon Sep 17 00:00:00 2001 From: David Strack Date: Fri, 1 Dec 2023 14:35:20 -0600 Subject: [PATCH 1/5] move ScrollableRegion to its own internal component --- src/DataTable/Table.tsx | 25 +------------------ src/internal/components/ScrollableRegion.tsx | 26 ++++++++++++++++++++ 2 files changed, 27 insertions(+), 24 deletions(-) create mode 100644 src/internal/components/ScrollableRegion.tsx diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx index e5c709ad61a..6634b0c7753 100644 --- a/src/DataTable/Table.tsx +++ b/src/DataTable/Table.tsx @@ -11,7 +11,7 @@ import {Column, CellAlignment} from './column' import {UniqueRow} from './row' import {SortDirection} from './sorting' import {useTableLayout} from './useTable' -import {useOverflow} from '../internal/hooks/useOverflow' +import {ScrollableRegion} from '../internal/components/ScrollableRegion' // ---------------------------------------------------------------------------- // Table @@ -661,29 +661,6 @@ const Button = styled.button` } ` -type ScrollableRegionProps = React.PropsWithChildren<{ - 'aria-labelledby'?: string - className?: string -}> - -function ScrollableRegion({'aria-labelledby': labelledby, children, ...rest}: ScrollableRegionProps) { - const ref = React.useRef(null) - const hasOverflow = useOverflow(ref) - const regionProps = hasOverflow - ? { - 'aria-labelledby': labelledby, - role: 'region', - tabIndex: 0, - } - : {} - - return ( - - {children} - - ) -} - export { TableContainer, TableTitle, diff --git a/src/internal/components/ScrollableRegion.tsx b/src/internal/components/ScrollableRegion.tsx new file mode 100644 index 00000000000..0600f5cba92 --- /dev/null +++ b/src/internal/components/ScrollableRegion.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import Box from '../../Box' +import {useOverflow} from '../hooks/useOverflow' + +type ScrollableRegionProps = React.PropsWithChildren<{ + 'aria-labelledby'?: string + className?: string +}> + +export function ScrollableRegion({'aria-labelledby': labelledby, children, ...rest}: ScrollableRegionProps) { + const ref = React.useRef(null) + const hasOverflow = useOverflow(ref) + const regionProps = hasOverflow + ? { + 'aria-labelledby': labelledby, + role: 'region', + tabIndex: 0, + } + : {} + + return ( + + {children} + + ) +} From 9a7ff331dd400befbee14800a627ce0f7c05d5f9 Mon Sep 17 00:00:00 2001 From: David Strack Date: Fri, 1 Dec 2023 15:11:17 -0600 Subject: [PATCH 2/5] use scrollable region in dialog body --- src/Dialog/Dialog.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index f5511aea6bd..dbd1190e2e8 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -13,6 +13,7 @@ import {FocusKeys} from '@primer/behaviors' import Portal from '../Portal' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {useId} from '../hooks/useId' +import {ScrollableRegion} from '../internal/components/ScrollableRegion' /* Dialog Version 2 */ @@ -324,7 +325,9 @@ const _Dialog = React.forwardRef {header} - {body} + + {body} + {footer} From 811e37a160a67f17581d1c98a87bfddbb2f4d090 Mon Sep 17 00:00:00 2001 From: David Strack Date: Thu, 7 Dec 2023 10:58:44 -0600 Subject: [PATCH 3/5] changeset --- .changeset/mighty-ghosts-swim.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mighty-ghosts-swim.md diff --git a/.changeset/mighty-ghosts-swim.md b/.changeset/mighty-ghosts-swim.md new file mode 100644 index 00000000000..64c492888c7 --- /dev/null +++ b/.changeset/mighty-ghosts-swim.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix an issue where the scrollable Dialog body could not be focused with the keyboard From 37d3231c387447a489e1c4f573c1b4420eaee80d Mon Sep 17 00:00:00 2001 From: David Strack Date: Mon, 11 Dec 2023 14:53:14 -0600 Subject: [PATCH 4/5] Update src/internal/components/ScrollableRegion.tsx Co-authored-by: Josh Black --- src/internal/components/ScrollableRegion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal/components/ScrollableRegion.tsx b/src/internal/components/ScrollableRegion.tsx index 0600f5cba92..815b63d4c6e 100644 --- a/src/internal/components/ScrollableRegion.tsx +++ b/src/internal/components/ScrollableRegion.tsx @@ -3,7 +3,7 @@ import Box from '../../Box' import {useOverflow} from '../hooks/useOverflow' type ScrollableRegionProps = React.PropsWithChildren<{ - 'aria-labelledby'?: string + 'aria-labelledby': string className?: string }> From b9f520b002aa0e66677df95fe6b3fc24500eb37e Mon Sep 17 00:00:00 2001 From: David Strack Date: Mon, 11 Dec 2023 16:50:27 -0600 Subject: [PATCH 5/5] Revert "Update src/internal/components/ScrollableRegion.tsx" This reverts commit 37d3231c387447a489e1c4f573c1b4420eaee80d. --- src/internal/components/ScrollableRegion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal/components/ScrollableRegion.tsx b/src/internal/components/ScrollableRegion.tsx index 815b63d4c6e..0600f5cba92 100644 --- a/src/internal/components/ScrollableRegion.tsx +++ b/src/internal/components/ScrollableRegion.tsx @@ -3,7 +3,7 @@ import Box from '../../Box' import {useOverflow} from '../hooks/useOverflow' type ScrollableRegionProps = React.PropsWithChildren<{ - 'aria-labelledby': string + 'aria-labelledby'?: string className?: string }>