Skip to content

Commit

Permalink
accept id as a prop where it is currently hardcoded (React)
Browse files Browse the repository at this point in the history 
Continuation of #2020
Co-authored-by: Olivier Louvignes <[email protected]>
  • Loading branch information
@RobinMalfait
RobinMalfait committed Dec 2, 2022
1 parent 7509124 commit 87659c3
Show file tree
Hide file tree
Showing 12 changed files with 152 additions and 149 deletions.
35 changes: 18 additions & 17 deletions packages/@headlessui-react/src/components/combobox/combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,7 +657,6 @@ interface InputRenderPropArg {
disabled: boolean
}
type InputPropsWeControl =
| 'id'
| 'role'
| 'aria-labelledby'
| 'aria-expanded'
Expand All @@ -678,15 +677,20 @@ let Input = forwardRefWithAs(function Input<
},
ref: Ref<HTMLInputElement>
) {
let { value, onChange, displayValue, type = 'text', ...theirProps } = props
let {
id = `headlessui-combobox-input-${useId()}`,
onChange,
displayValue,
type = 'text',
...theirProps
} = props
let data = useData('Combobox.Input')
let actions = useActions('Combobox.Input')

let inputRef = useSyncRefs(data.inputRef, ref)

let isTyping = useRef(false)

let id = `headlessui-combobox-input-${useId()}`
let d = useDisposables()

// When a `displayValue` prop is given, we should use it to transform the current selected
Expand Down Expand Up @@ -931,7 +935,6 @@ interface ButtonRenderPropArg {
value: any
}
type ButtonPropsWeControl =
| 'id'
| 'type'
| 'tabIndex'
| 'aria-haspopup'
Expand All @@ -949,8 +952,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
let data = useData('Combobox.Button')
let actions = useActions('Combobox.Button')
let buttonRef = useSyncRefs(data.buttonRef, ref)

let id = `headlessui-combobox-button-${useId()}`
let { id = `headlessui-combobox-button-${useId()}`, ...theirProps } = props
let d = useDisposables()

let handleKeyDown = useEvent((event: ReactKeyboardEvent<HTMLUListElement>) => {
Expand Down Expand Up @@ -1017,7 +1019,6 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
}),
[data]
)
let theirProps = props
let ourProps = {
ref: buttonRef,
id,
Expand Down Expand Up @@ -1048,14 +1049,14 @@ interface LabelRenderPropArg {
open: boolean
disabled: boolean
}
type LabelPropsWeControl = 'id' | 'ref' | 'onClick'
type LabelPropsWeControl = 'ref' | 'onClick'

let Label = forwardRefWithAs(function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>,
ref: Ref<HTMLLabelElement>
) {
let { id = `headlessui-combobox-label-${useId()}`, ...theirProps } = props
let data = useData('Combobox.Label')
let id = `headlessui-combobox-label-${useId()}`
let actions = useActions('Combobox.Label')
let labelRef = useSyncRefs(data.labelRef, ref)

Expand All @@ -1068,7 +1069,6 @@ let Label = forwardRefWithAs(function Label<TTag extends ElementType = typeof DE
[data]
)

let theirProps = props
let ourProps = { ref: labelRef, id, onClick: handleClick }

return render({
Expand All @@ -1090,7 +1090,6 @@ type OptionsPropsWeControl =
| 'aria-activedescendant'
| 'aria-labelledby'
| 'hold'
| 'id'
| 'onKeyDown'
| 'role'
| 'tabIndex'
Expand All @@ -1106,13 +1105,11 @@ let Options = forwardRefWithAs(function Options<
},
ref: Ref<HTMLUListElement>
) {
let { hold = false, ...theirProps } = props
let { id = `headlessui-combobox-options-${useId()}`, hold = false, ...theirProps } = props
let data = useData('Combobox.Options')

let optionsRef = useSyncRefs(data.optionsRef, ref)

let id = `headlessui-combobox-options-${useId()}`

let usesOpenClosedState = useOpenClosed()
let visible = (() => {
if (usesOpenClosedState !== null) {
Expand Down Expand Up @@ -1179,7 +1176,7 @@ interface OptionRenderPropArg {
selected: boolean
disabled: boolean
}
type ComboboxOptionPropsWeControl = 'id' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected'
type ComboboxOptionPropsWeControl = 'role' | 'tabIndex' | 'aria-disabled' | 'aria-selected'

let Option = forwardRefWithAs(function Option<
TTag extends ElementType = typeof DEFAULT_OPTION_TAG,
Expand All @@ -1193,11 +1190,15 @@ let Option = forwardRefWithAs(function Option<
},
ref: Ref<HTMLLIElement>
) {
let { disabled = false, value, ...theirProps } = props
let {
id = `headlessui-combobox-option-${useId()}`,
disabled = false,
value,
...theirProps
} = props
let data = useData('Combobox.Option')
let actions = useActions('Combobox.Option')

let id = `headlessui-combobox-option-${useId()}`
let active =
data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false

Expand Down
5 changes: 2 additions & 3 deletions packages/@headlessui-react/src/components/description/description.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,13 @@ let DEFAULT_DESCRIPTION_TAG = 'p' as const

export let Description = forwardRefWithAs(function Description<
TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG
>(props: Props<TTag, {}, 'id'>, ref: Ref<HTMLParagraphElement>) {
>(props: Props<TTag>, ref: Ref<HTMLParagraphElement>) {
let { id = `headlessui-description-${useId()}`, ...theirProps } = props
let context = useDescriptionContext()
let id = `headlessui-description-${useId()}`
let descriptionRef = useSyncRefs(ref)

useIsoMorphicEffect(() => context.register(id), [id, context.register])

let theirProps = props
let ourProps = { ref: descriptionRef, ...context.props, id }

return render({
Expand Down
35 changes: 16 additions & 19 deletions packages/@headlessui-react/src/components/dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ let DEFAULT_DIALOG_TAG = 'div' as const
interface DialogRenderPropArg {
open: boolean
}
type DialogPropsWeControl = 'id' | 'role' | 'aria-modal' | 'aria-describedby' | 'aria-labelledby'
type DialogPropsWeControl = 'role' | 'aria-modal' | 'aria-describedby' | 'aria-labelledby'

let DialogRenderFeatures = Features.RenderStrategy | Features.Static

Expand All @@ -156,7 +156,14 @@ let DialogRoot = forwardRefWithAs(function Dialog<
},
ref: Ref<HTMLDivElement>
) {
let { open, onClose, initialFocus, __demoMode = false, ...theirProps } = props
let {
id = `headlessui-dialog-${useId()}`,
open,
onClose,
initialFocus,
__demoMode = false,
...theirProps
} = props
let [nestedDialogCount, setNestedDialogCount] = useState(0)

let usesOpenClosedState = useOpenClosed()
Expand Down Expand Up @@ -295,8 +302,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<

let [describedby, DescriptionProvider] = useDescriptions()

let id = `headlessui-dialog-${useId()}`

let contextBag = useMemo<ContextType<typeof DialogContext>>(
() => [{ dialogState, close, setTitleId }, state],
[dialogState, state, close, setTitleId]
Expand Down Expand Up @@ -381,16 +386,15 @@ let DEFAULT_OVERLAY_TAG = 'div' as const
interface OverlayRenderPropArg {
open: boolean
}
type OverlayPropsWeControl = 'id' | 'aria-hidden' | 'onClick'
type OverlayPropsWeControl = 'aria-hidden' | 'onClick'

let Overlay = forwardRefWithAs(function Overlay<
TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG
>(props: Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>, ref: Ref<HTMLDivElement>) {
let { id = `headlessui-dialog-overlay-${useId()}`, ...theirProps } = props
let [{ dialogState, close }] = useDialogContext('Dialog.Overlay')
let overlayRef = useSyncRefs(ref)

let id = `headlessui-dialog-overlay-${useId()}`

let handleClick = useEvent((event: ReactMouseEvent) => {
if (event.target !== event.currentTarget) return
if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
Expand All @@ -404,7 +408,6 @@ let Overlay = forwardRefWithAs(function Overlay<
[dialogState]
)

let theirProps = props
let ourProps = {
ref: overlayRef,
id,
Expand All @@ -427,16 +430,15 @@ let DEFAULT_BACKDROP_TAG = 'div' as const
interface BackdropRenderPropArg {
open: boolean
}
type BackdropPropsWeControl = 'id' | 'aria-hidden' | 'onClick'
type BackdropPropsWeControl = 'aria-hidden' | 'onClick'

let Backdrop = forwardRefWithAs(function Backdrop<
TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG
>(props: Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl>, ref: Ref<HTMLDivElement>) {
let { id = `headlessui-dialog-backdrop-${useId()}`, ...theirProps } = props
let [{ dialogState }, state] = useDialogContext('Dialog.Backdrop')
let backdropRef = useSyncRefs(ref)

let id = `headlessui-dialog-backdrop-${useId()}`

useEffect(() => {
if (state.panelRef.current === null) {
throw new Error(
Expand All @@ -450,7 +452,6 @@ let Backdrop = forwardRefWithAs(function Backdrop<
[dialogState]
)

let theirProps = props
let ourProps = {
ref: backdropRef,
id,
Expand Down Expand Up @@ -483,11 +484,10 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
props: Props<TTag, PanelRenderPropArg>,
ref: Ref<HTMLDivElement>
) {
let { id = `headlessui-dialog-panel-${useId()}`, ...theirProps } = props
let [{ dialogState }, state] = useDialogContext('Dialog.Panel')
let panelRef = useSyncRefs(ref, state.panelRef)

let id = `headlessui-dialog-panel-${useId()}`

let slot = useMemo<PanelRenderPropArg>(
() => ({ open: dialogState === DialogStates.Open }),
[dialogState]
Expand All @@ -499,7 +499,6 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
event.stopPropagation()
})

let theirProps = props
let ourProps = {
ref: panelRef,
id,
Expand All @@ -521,15 +520,14 @@ let DEFAULT_TITLE_TAG = 'h2' as const
interface TitleRenderPropArg {
open: boolean
}
type TitlePropsWeControl = 'id'

let Title = forwardRefWithAs(function Title<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
props: Props<TTag, TitleRenderPropArg, TitlePropsWeControl>,
props: Props<TTag, TitleRenderPropArg>,
ref: Ref<HTMLHeadingElement>
) {
let { id = `headlessui-dialog-title-${useId()}`, ...theirProps } = props
let [{ dialogState, setTitleId }] = useDialogContext('Dialog.Title')

let id = `headlessui-dialog-title-${useId()}`
let titleRef = useSyncRefs(ref)

useEffect(() => {
Expand All @@ -542,7 +540,6 @@ let Title = forwardRefWithAs(function Title<TTag extends ElementType = typeof DE
[dialogState]
)

let theirProps = props
let ourProps = { ref: titleRef, id }

return render({
Expand Down
Loading

0 comments on commit 87659c3

Please sign in to comment.