Properly merge incoming props (#1265)

* rename inconsistent `passThroughProps` and `passthroughProps` to more
concise `incomingProps`

This is going to make a bit more sense in the next commits of this
branch, hold on!

* split props into `propsWeControl` and `propsTheyControl`

This will allow us to merge the props with a bit more control. Instead
of overriding every prop from the user' props with our props, we can now
merge event listeners.

* update `render` API to accept `propsWeControl` and `propsTheyControl`

* improve the merge logic

This will essentially do the exact same thing we were doing before:
```js
let props = { ...propsTheyControl, ...propsWeControl }
```

But instead of overriding everything, we will merge the event listener
related props like `onClick`, `onKeyDown`, ...

* fix typo in tests

* simplify naming

- Rename `propsWeControl` to `ourProps`
- Rename `propsTheyControl` to `theirProps`

* update changelog

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix Tree-shaking support ([#1247](https://github.com/tailwindlabs/headlessui/pull/1247))
 - Stop propagation on the Popover Button ([#1263](https://github.com/tailwindlabs/headlessui/pull/1263))
 - Fix incorrect `active` option in the Listbox/Combobox component ([#1264](https://github.com/tailwindlabs/headlessui/pull/1264))
+- Properly merge incoming props ([#1265](https://github.com/tailwindlabs/headlessui/pull/1265))
 
 ### Added
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -330,7 +330,7 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<
   },
   ref: Ref<TTag>
 ) {
-  let { name, value, onChange, disabled = false, __demoMode = false, ...passThroughProps } = props
+  let { name, value, onChange, disabled = false, __demoMode = false, ...theirProps } = props
 
   let comboboxPropsRef = useRef<StateDefinition['comboboxPropsRef']['current']>({
     value,
@@ -481,9 +481,11 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<
 
   // Ensure that we update the inputRef if the value changes
   useIsoMorphicEffect(syncInputValue, [syncInputValue])
+  let ourProps = ref === null ? {} : { ref }
 
   let renderConfiguration = {
-    props: ref === null ? passThroughProps : { ...passThroughProps, ref },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_COMBOBOX_TAG,
     name: 'Combobox',
@@ -556,7 +558,7 @@ let Input = forwardRefWithAs(function Input<
   },
   ref: Ref<HTMLInputElement>
 ) {
-  let { value, onChange, displayValue, ...passThroughProps } = props
+  let { value, onChange, displayValue, ...theirProps } = props
   let [state] = useComboboxContext('Combobox.Input')
   let data = useComboboxData()
   let actions = useComboboxActions()
@@ -677,7 +679,7 @@ let Input = forwardRefWithAs(function Input<
     [state]
   )
 
-  let propsWeControl = {
+  let ourProps = {
     ref: inputRef,
     id,
     role: 'combobox',
@@ -694,7 +696,8 @@ let Input = forwardRefWithAs(function Input<
   }
 
   return render({
-    props: { ...passThroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_INPUT_TAG,
     name: 'Combobox.Input',
@@ -806,8 +809,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     () => ({ open: state.comboboxState === ComboboxStates.Open, disabled: state.disabled }),
     [state]
   )
-  let passthroughProps = props
-  let propsWeControl = {
+  let theirProps = props
+  let ourProps = {
     ref: buttonRef,
     id,
     type: useResolveButtonType(props, state.buttonRef),
@@ -822,7 +825,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   }
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_BUTTON_TAG,
     name: 'Combobox.Button',
@@ -855,9 +859,13 @@ let Label = forwardRefWithAs(function Label<TTag extends ElementType = typeof DE
     () => ({ open: state.comboboxState === ComboboxStates.Open, disabled: state.disabled }),
     [state]
   )
-  let propsWeControl = { ref: labelRef, id, onClick: handleClick }
+
+  let theirProps = props
+  let ourProps = { ref: labelRef, id, onClick: handleClick }
+
   return render({
-    props: { ...props, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_LABEL_TAG,
     name: 'Combobox.Label',
@@ -890,7 +898,7 @@ let Options = forwardRefWithAs(function Options<
     },
   ref: Ref<HTMLUListElement>
 ) {
-  let { hold = false, ...passthroughProps } = props
+  let { hold = false, ...theirProps } = props
   let [state] = useComboboxContext('Combobox.Options')
   let { optionsPropsRef } = state
 
@@ -936,7 +944,7 @@ let Options = forwardRefWithAs(function Options<
     () => ({ open: state.comboboxState === ComboboxStates.Open }),
     [state]
   )
-  let propsWeControl = {
+  let ourProps = {
     'aria-activedescendant':
       state.activeOptionIndex === null ? undefined : state.options[state.activeOptionIndex]?.id,
     'aria-labelledby': labelledby,
@@ -946,7 +954,8 @@ let Options = forwardRefWithAs(function Options<
   }
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_OPTIONS_TAG,
     features: OptionsRenderFeatures,
@@ -986,7 +995,7 @@ let Option = forwardRefWithAs(function Option<
   },
   ref: Ref<HTMLLIElement>
 ) {
-  let { disabled = false, value, ...passthroughProps } = props
+  let { disabled = false, value, ...theirProps } = props
   let [state] = useComboboxContext('Combobox.Option')
   let data = useComboboxData()
   let actions = useComboboxActions()
@@ -1072,7 +1081,7 @@ let Option = forwardRefWithAs(function Option<
     [active, selected, disabled]
   )
 
-  let propsWeControl = {
+  let ourProps = {
     id,
     ref: optionRef,
     role: 'option',
@@ -1092,7 +1101,8 @@ let Option = forwardRefWithAs(function Option<
   }
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_OPTION_TAG,
     name: 'Combobox.Option',

packages/@headlessui-react/src/components/description/description.tsx

@@ -98,11 +98,12 @@ export let Description = forwardRefWithAs(function Description<
 
   useIsoMorphicEffect(() => context.register(id), [id, context.register])
 
-  let passThroughProps = props
-  let propsWeControl = { ref: descriptionRef, ...context.props, id }
+  let theirProps = props
+  let ourProps = { ref: descriptionRef, ...context.props, id }
 
   return render({
-    props: { ...passThroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot: context.slot || {},
     defaultTag: DEFAULT_DESCRIPTION_TAG,
     name: context.name || 'Description',

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -119,7 +119,7 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     },
   ref: Ref<HTMLDivElement>
 ) {
-  let { open, onClose, initialFocus, __demoMode = false, ...rest } = props
+  let { open, onClose, initialFocus, __demoMode = false, ...theirProps } = props
   let [nestedDialogCount, setNestedDialogCount] = useState(0)
 
   let usesOpenClosedState = useOpenClosed()
@@ -292,7 +292,7 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     [dialogState]
   )
 
-  let propsWeControl = {
+  let ourProps = {
     ref: dialogRef,
     id,
     role: 'dialog',
@@ -303,7 +303,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<
       event.stopPropagation()
     },
   }
-  let passthroughProps = rest
 
   return (
     <StackProvider
@@ -331,7 +330,8 @@ let DialogRoot = forwardRefWithAs(function Dialog<
               <ForcePortalRoot force={false}>
                 <DescriptionProvider slot={slot} name="Dialog.Description">
                   {render({
-                    props: { ...passthroughProps, ...propsWeControl },
+                    ourProps,
+                    theirProps,
                     slot,
                     defaultTag: DEFAULT_DIALOG_TAG,
                     features: DialogRenderFeatures,
@@ -379,16 +379,18 @@ let Overlay = forwardRefWithAs(function Overlay<
     () => ({ open: dialogState === DialogStates.Open }),
     [dialogState]
   )
-  let propsWeControl = {
+
+  let theirProps = props
+  let ourProps = {
     ref: overlayRef,
     id,
     'aria-hidden': true,
     onClick: handleClick,
   }
-  let passthroughProps = props
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_OVERLAY_TAG,
     name: 'Dialog.Overlay',
@@ -421,11 +423,13 @@ let Title = forwardRefWithAs(function Title<TTag extends ElementType = typeof DE
     () => ({ open: dialogState === DialogStates.Open }),
     [dialogState]
   )
-  let propsWeControl = { id }
-  let passthroughProps = props
+
+  let theirProps = props
+  let ourProps = { ref: titleRef, id }
 
   return render({
-    props: { ref: titleRef, ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_TITLE_TAG,
     name: 'Dialog.Title',

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -156,7 +156,7 @@ let DisclosureRoot = forwardRefWithAs(function Disclosure<
   },
   ref: Ref<TTag>
 ) {
-  let { defaultOpen = false, ...passthroughProps } = props
+  let { defaultOpen = false, ...theirProps } = props
   let buttonId = `headlessui-disclosure-button-${useId()}`
   let panelId = `headlessui-disclosure-panel-${useId()}`
   let internalDisclosureRef = useRef<HTMLElement | null>(null)
@@ -214,6 +214,10 @@ let DisclosureRoot = forwardRefWithAs(function Disclosure<
     [disclosureState, close]
   )
 
+  let ourProps = {
+    ref: disclosureRef,
+  }
+
   return (
     <DisclosureContext.Provider value={reducerBag}>
       <DisclosureAPIContext.Provider value={api}>
@@ -224,7 +228,8 @@ let DisclosureRoot = forwardRefWithAs(function Disclosure<
           })}
         >
           {render({
-            props: { ref: disclosureRef, ...passthroughProps },
+            ourProps,
+            theirProps,
             slot,
             defaultTag: DEFAULT_DISCLOSURE_TAG,
             name: 'Disclosure',
@@ -320,8 +325,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   )
 
   let type = useResolveButtonType(props, internalButtonRef)
-  let passthroughProps = props
-  let propsWeControl = isWithinPanel
+  let theirProps = props
+  let ourProps = isWithinPanel
     ? { ref: buttonRef, type, onKeyDown: handleKeyDown, onClick: handleClick }
     : {
         ref: buttonRef,
@@ -337,7 +342,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
       }
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     slot,
     defaultTag: DEFAULT_BUTTON_TAG,
     name: 'Disclosure.Button',
@@ -391,16 +397,18 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
     () => ({ open: state.disclosureState === DisclosureStates.Open, close }),
     [state, close]
   )
-  let propsWeControl = {
+
+  let theirProps = props
+  let ourProps = {
     ref: panelRef,
     id: state.panelId,
   }
-  let passthroughProps = props
 
   return (
     <DisclosurePanelContext.Provider value={state.panelId}>
       {render({
-        props: { ...passthroughProps, ...propsWeControl },
+        ourProps,
+        theirProps,
         slot,
         defaultTag: DEFAULT_PANEL_TAG,
         features: PanelRenderFeatures,

packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

@@ -23,17 +23,18 @@ export let FocusTrap = forwardRefWithAs(function FocusTrap<
 ) {
   let container = useRef<HTMLElement | null>(null)
   let focusTrapRef = useSyncRefs(container, ref)
-  let { initialFocus, ...passthroughProps } = props
+  let { initialFocus, ...theirProps } = props
 
   let ready = useServerHandoffComplete()
   useFocusTrap(container, ready ? FocusTrapFeatures.All : FocusTrapFeatures.None, { initialFocus })
 
-  let propsWeControl = {
+  let ourProps = {
     ref: focusTrapRef,
   }
 
   return render({
-    props: { ...passthroughProps, ...propsWeControl },
+    ourProps,
+    theirProps,
     defaultTag: DEFAULT_FOCUS_TRAP_TAG,
     name: 'FocusTrap',
   })

packages/@headlessui-react/src/components/label/label.tsx

@@ -88,22 +88,28 @@ export let Label = forwardRefWithAs(function Label<
   },
   ref: Ref<HTMLLabelElement>
 ) {
-  let { passive = false, ...passThroughProps } = props
+  let { passive = false, ...theirProps } = props
   let context = useLabelContext()
   let id = `headlessui-label-${useId()}`
   let labelRef = useSyncRefs(ref)
 
   useIsoMorphicEffect(() => context.register(id), [id, context.register])
 
-  let propsWeControl = { ref: labelRef, ...context.props, id }
+  let ourProps = { ref: labelRef, ...context.props, id }
 
-  let allProps = { ...passThroughProps, ...propsWeControl }
-  // @ts-expect-error props are dynamic via context, some components will
-  //                  provide an onClick then we can delete it.
-  if (passive) delete allProps['onClick']
+  if (passive) {
+    if ('onClick' in ourProps) {
+      delete (ourProps as any)['onClick']
+    }
+
+    if ('onClick' in theirProps) {
+      delete (theirProps as any)['onClick']
+    }
+  }
 
   return render({
-    props: allProps,
+    ourProps,
+    theirProps,
     slot: context.slot || {},
     defaultTag: DEFAULT_LABEL_TAG,
     name: context.name || 'Label',