Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dialog): Dialog.Content children type unassignable #13

Merged
merged 2 commits into from
Apr 15, 2024
Merged

fix(dialog): Dialog.Content children type unassignable #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a295c3
fix(dialog): Dialog.Content children type unassignable
PHILLIPS71 Apr 15, 2024
5dcf058
feat(dialog): add dialog stories
PHILLIPS71 Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions packages/react/src/components/dialog/Dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import type { DialogProps } from '@/components/dialog'
import type { Meta, StoryFn } from '@storybook/react'

import { Button } from '@/components/button'
import { Card } from '@/components/card'
import { Dialog } from '@/components/dialog'

const Component: Meta<typeof Dialog> = {
title: 'Components/Dialog',
component: Dialog,
}

const defaultProps = {}

export const Default: StoryFn = (args: DialogProps) => (
<Dialog {...args}>
<Button>Open</Button>

<Dialog.Content>
{({ close }) => (
<Card>
<Card.Header>Dialog</Card.Header>

<Card.Body>Dialog Content</Card.Body>

<Card.Footer>
<Button onPress={close}>Close</Button>
</Card.Footer>
</Card>
)}
</Dialog.Content>
</Dialog>
)

Default.args = {
...defaultProps,
}

export default Component
17 changes: 9 additions & 8 deletions packages/react/src/components/dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import type { UseDialogProps } from '@/components/dialog/use-dialog.hook'
import type { ComponentWithoutAs } from '@/utilities/types'
import type { DialogTriggerProps as ComponentProps } from 'react-aria-components'
import type { DialogTriggerProps } from 'react-aria-components'

import React from 'react'
import { DialogTrigger as Component } from 'react-aria-components'
import { DialogTrigger } from 'react-aria-components'

import DialogContent from '@/components/dialog/DialogContent'
import { DialogContext, useDialog } from '@/components/dialog/use-dialog.hook'

export type DialogProps = ComponentWithoutAs<'div'> & ComponentProps & UseDialogProps
type ComponentProps = ComponentWithoutAs<'div'> & Omit<DialogTriggerProps, 'children'> & UseDialogProps

const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
const { children, className, blur, placement, ...rest } = props

const context = useDialog({ blur, placement })

const component = React.useMemo<ComponentProps>(
const trigger = React.useMemo<DialogTriggerProps>(
() => ({
ref,
children,
Expand All @@ -27,13 +27,14 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {

return (
<DialogContext.Provider value={context}>
<Component {...component}>{children}</Component>
<DialogTrigger {...trigger}>{children}</DialogTrigger>
</DialogContext.Provider>
)
})

Dialog.displayName = 'Dialog'
Component.displayName = 'Dialog'

export default Object.assign(Dialog, {
export { ComponentProps as DialogProps }
export default Object.assign(Component, {
Content: DialogContent,
})
10 changes: 5 additions & 5 deletions packages/react/src/components/dialog/DialogContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import type { ComponentWithoutAs } from '@/utilities/types'
import type { DialogProps, ModalOverlayProps } from 'react-aria-components'

import React from 'react'
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'

import { useDialogContext } from '@/components/dialog/use-dialog.hook'

export type DialogContentProps = ComponentWithoutAs<'div'> & DialogProps
type ComponentProps = DialogProps

const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => {
const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
const { children, className, ...rest } = props

const { slots } = useDialogContext()
Expand Down Expand Up @@ -45,6 +44,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((prop
)
})

DialogContent.displayName = 'Dialog.Content'
Component.displayName = 'Dialog.Content'

export default DialogContent
export { ComponentProps as DialogContentProps }
export default Component