fix getDetailsProps implementation

primer · Feb 9, 2021 · 57dafdd · 57dafdd
1 parent 3bd153a
commit 57dafdd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/Details.tsx b/src/Details.tsx
@@ -4,7 +4,14 @@ import {COMMON, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
 import sx, {SxProp} from './sx'
 
-const Details = styled.details<SystemCommonProps & SxProp>`
+type StyledDetailsProps = {
+  ref?: React.RefObject<HTMLElement>
+  onToggle?: (event: Event) => void
+  open?: boolean
+} & SystemCommonProps &
+  SxProp
+
+const Details = styled.details<StyledDetailsProps>`
   & > summary {
     list-style: none;
   }

diff --git a/src/__tests__/Details.tsx b/src/__tests__/Details.tsx
@@ -26,7 +26,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <summary>hi</summary>
         </Details>
       )
@@ -47,7 +47,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
         </Details>
       )
@@ -71,7 +71,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
           <CloseButton onClick={() => setOpen(false)} />
         </Details>
@@ -95,7 +95,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
           <Box>
             <ButtonPrimary>hi</ButtonPrimary>