Re-expose el (#1230)

* re-expose `el`

We used to expose a custom `el` when we used a `setup()` and `render()`
function. But due to some refactors we got now only have a `setup()` and
no more `el`. This causes some problems if people relied on the exposed
`el`.

In this PR will make sure to re-expose the `el` that we used to expose.

The only issue is, now that we manually expose a list, we have to
re-expose the `$el` internal as well.

* update changelog

CHANGELOG.md

@@ -51,6 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve some internal code ([#1221](https://github.com/tailwindlabs/headlessui/pull/1221))
 - Don’t drop initial character when searching in Combobox ([#1223](https://github.com/tailwindlabs/headlessui/pull/1223))
 - Use `ownerDocument` instead of `document` ([#1158](https://github.com/tailwindlabs/headlessui/pull/1158))
+- Re-expose `el` ([#1230](https://github.com/tailwindlabs/headlessui/pull/1230))
 
 ### Added
 

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -378,10 +378,12 @@ export let ComboboxButton = defineComponent({
   props: {
     as: { type: [Object, String], default: 'button' },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useComboboxContext('ComboboxButton')
     let id = `headlessui-combobox-button-${useId()}`
 
+    expose({ el: api.buttonRef, $el: api.buttonRef })
+
     function handleClick(event: MouseEvent) {
       if (api.disabled.value) return
       if (api.comboboxState.value === ComboboxStates.Open) {
@@ -494,11 +496,13 @@ export let ComboboxInput = defineComponent({
   emits: {
     change: (_value: Event & { target: HTMLInputElement }) => true,
   },
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     let api = useComboboxContext('ComboboxInput')
     let id = `headlessui-combobox-input-${useId()}`
     api.inputPropsRef = computed(() => props)
 
+    expose({ el: api.inputRef, $el: api.inputRef })
+
     function handleKeyDown(event: KeyboardEvent) {
       switch (event.key) {
         // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
@@ -620,15 +624,20 @@ export let ComboboxOptions = defineComponent({
     unmount: { type: Boolean, default: true },
     hold: { type: [Boolean], default: false },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useComboboxContext('ComboboxOptions')
     let id = `headlessui-combobox-options-${useId()}`
+
+    expose({ el: api.optionsRef, $el: api.optionsRef })
+
     watchEffect(() => {
       api.optionsPropsRef.value.static = props.static
     })
+
     watchEffect(() => {
       api.optionsPropsRef.value.hold = props.hold
     })
+
     let usesOpenClosedState = useOpenClosed()
     let visible = computed(() => {
       if (usesOpenClosedState !== null) {
@@ -685,11 +694,13 @@ export let ComboboxOption = defineComponent({
     value: { type: [Object, String, Number, Boolean] },
     disabled: { type: Boolean, default: false },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots, attrs, expose }) {
     let api = useComboboxContext('ComboboxOption')
     let id = `headlessui-combobox-option-${useId()}`
     let internalOptionRef = ref<HTMLElement | null>(null)
 
+    expose({ el: internalOptionRef, $el: internalOptionRef })
+
     let active = computed(() => {
       return api.activeOptionIndex.value !== null
         ? api.options.value[api.activeOptionIndex.value].id === id

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -75,7 +75,7 @@ export let Dialog = defineComponent({
     initialFocus: { type: Object as PropType<HTMLElement | null>, default: null },
   },
   emits: { close: (_close: boolean) => true },
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     let nestedDialogCount = ref(0)
 
     let usesOpenClosedState = useOpenClosed()
@@ -94,6 +94,8 @@ export let Dialog = defineComponent({
     let internalDialogRef = ref<HTMLDivElement | null>(null)
     let ownerDocument = computed(() => getOwnerDocument(internalDialogRef))
 
+    expose({ el: internalDialogRef, $el: internalDialogRef })
+
     // Validations
     let hasOpen = props.open !== Missing || usesOpenClosedState !== null
 

packages/@headlessui-vue/src/components/disclosure/disclosure.ts

@@ -133,13 +133,15 @@ export let DisclosureButton = defineComponent({
     as: { type: [Object, String], default: 'button' },
     disabled: { type: [Boolean], default: false },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useDisclosureContext('DisclosureButton')
 
     let panelContext = useDisclosurePanelContext()
     let isWithinPanel = panelContext === null ? false : panelContext === api.panelId
 
-    let internalButtonRef = ref(null)
+    let internalButtonRef = ref<HTMLButtonElement | null>(null)
+
+    expose({ el: internalButtonRef, $el: internalButtonRef })
 
     if (!isWithinPanel) {
       watchEffect(() => {
@@ -240,9 +242,11 @@ export let DisclosurePanel = defineComponent({
     static: { type: Boolean, default: false },
     unmount: { type: Boolean, default: true },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useDisclosureContext('DisclosurePanel')
 
+    expose({ el: api.panel, $el: api.panel })
+
     provide(DisclosurePanelContext, api.panelId)
 
     let usesOpenClosedState = useOpenClosed()

packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts

@@ -15,9 +15,11 @@ export let FocusTrap = defineComponent({
     as: { type: [Object, String], default: 'div' },
     initialFocus: { type: Object as PropType<HTMLElement | null>, default: null },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let container = ref<HTMLElement | null>(null)
 
+    expose({ el: container, $el: container })
+
     let focusTrapOptions = computed(() => ({ initialFocus: ref(props.initialFocus) }))
     useFocusTrap(container, FocusTrap.All, focusTrapOptions)
 

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -351,10 +351,12 @@ export let ListboxButton = defineComponent({
   props: {
     as: { type: [Object, String], default: 'button' },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useListboxContext('ListboxButton')
     let id = `headlessui-listbox-button-${useId()}`
 
+    expose({ el: api.buttonRef, $el: api.buttonRef })
+
     function handleKeyDown(event: KeyboardEvent) {
       switch (event.key) {
         // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
@@ -450,11 +452,13 @@ export let ListboxOptions = defineComponent({
     static: { type: Boolean, default: false },
     unmount: { type: Boolean, default: true },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useListboxContext('ListboxOptions')
     let id = `headlessui-listbox-options-${useId()}`
     let searchDebounce = ref<ReturnType<typeof setTimeout> | null>(null)
 
+    expose({ el: api.optionsRef, $el: api.optionsRef })
+
     function handleKeyDown(event: KeyboardEvent) {
       if (searchDebounce.value) clearTimeout(searchDebounce.value)
 
@@ -572,11 +576,13 @@ export let ListboxOption = defineComponent({
     value: { type: [Object, String, Number, Boolean] },
     disabled: { type: Boolean, default: false },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots, attrs, expose }) {
     let api = useListboxContext('ListboxOption')
     let id = `headlessui-listbox-option-${useId()}`
     let internalOptionRef = ref<HTMLElement | null>(null)
 
+    expose({ el: internalOptionRef, $el: internalOptionRef })
+
     let active = computed(() => {
       return api.activeOptionIndex.value !== null
         ? api.options.value[api.activeOptionIndex.value].id === id

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -237,10 +237,12 @@ export let MenuButton = defineComponent({
     disabled: { type: Boolean, default: false },
     as: { type: [Object, String], default: 'button' },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useMenuContext('MenuButton')
     let id = `headlessui-menu-button-${useId()}`
 
+    expose({ el: api.buttonRef, $el: api.buttonRef })
+
     function handleKeyDown(event: KeyboardEvent) {
       switch (event.key) {
         // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
@@ -330,11 +332,13 @@ export let MenuItems = defineComponent({
     static: { type: Boolean, default: false },
     unmount: { type: Boolean, default: true },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useMenuContext('MenuItems')
     let id = `headlessui-menu-items-${useId()}`
     let searchDebounce = ref<ReturnType<typeof setTimeout> | null>(null)
 
+    expose({ el: api.itemsRef, $el: api.itemsRef })
+
     useTreeWalker({
       container: computed(() => dom(api.itemsRef)),
       enabled: computed(() => api.menuState.value === MenuStates.Open),
@@ -474,11 +478,13 @@ export let MenuItem = defineComponent({
     as: { type: [Object, String], default: 'template' },
     disabled: { type: Boolean, default: false },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots, attrs, expose }) {
     let api = useMenuContext('MenuItem')
     let id = `headlessui-menu-item-${useId()}`
     let internalItemRef = ref<HTMLElement | null>(null)
 
+    expose({ el: internalItemRef, $el: internalItemRef })
+
     let active = computed(() => {
       return api.activeItemIndex.value !== null
         ? api.items.value[api.activeItemIndex.value].id === id

packages/@headlessui-vue/src/components/popover/popover.ts

@@ -92,12 +92,14 @@ export let Popover = defineComponent({
   props: {
     as: { type: [Object, String], default: 'div' },
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { slots, attrs, expose }) {
     let buttonId = `headlessui-popover-button-${useId()}`
     let panelId = `headlessui-popover-panel-${useId()}`
 
     let internalPopoverRef = ref<HTMLElement | null>(null)
 
+    expose({ el: internalPopoverRef, $el: internalPopoverRef })
+
     let popoverState = ref<StateDefinition['popoverState']['value']>(PopoverStates.Closed)
     let button = ref<StateDefinition['button']['value']>(null)
     let panel = ref<StateDefinition['panel']['value']>(null)
@@ -217,10 +219,12 @@ export let PopoverButton = defineComponent({
     as: { type: [Object, String], default: 'button' },
     disabled: { type: [Boolean], default: false },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = usePopoverContext('PopoverButton')
     let ownerDocument = computed(() => getOwnerDocument(api.button))
 
+    expose({ el: api.button, $el: api.button })
+
     let groupContext = usePopoverGroupContext()
     let closeOthers = groupContext?.closeOthers
 
@@ -462,11 +466,13 @@ export let PopoverPanel = defineComponent({
     unmount: { type: Boolean, default: true },
     focus: { type: Boolean, default: false },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let { focus } = props
     let api = usePopoverContext('PopoverPanel')
     let ownerDocument = computed(() => getOwnerDocument(api.panel))
 
+    expose({ el: api.panel, $el: api.panel })
+
     provide(PopoverPanelContext, api.panelId)
 
     onUnmounted(() => {
@@ -599,11 +605,13 @@ export let PopoverGroup = defineComponent({
   props: {
     as: { type: [Object, String], default: 'div' },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let groupRef = ref<HTMLElement | null>(null)
     let popovers = ref<PopoverRegisterBag[]>([])
     let ownerDocument = computed(() => getOwnerDocument(groupRef))
 
+    expose({ el: groupRef, $el: groupRef })
+
     function unregisterPopover(registerBag: PopoverRegisterBag) {
       let idx = popovers.value.indexOf(registerBag)
       if (idx !== -1) popovers.value.splice(idx, 1)

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -72,12 +72,14 @@ export let RadioGroup = defineComponent({
     modelValue: { type: [Object, String, Number, Boolean] },
     name: { type: String, optional: true },
   },
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     let radioGroupRef = ref<HTMLElement | null>(null)
     let options = ref<StateDefinition['options']['value']>([])
     let labelledby = useLabels({ name: 'RadioGroupLabel' })
     let describedby = useDescriptions({ name: 'RadioGroupDescription' })
 
+    expose({ el: radioGroupRef, $el: radioGroupRef })
+
     let value = computed(() => props.modelValue)
 
     let api = {
@@ -247,7 +249,7 @@ export let RadioGroupOption = defineComponent({
     value: { type: [Object, String, Number, Boolean] },
     disabled: { type: Boolean, default: false },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useRadioGroupContext('RadioGroupOption')
     let id = `headlessui-radiogroup-option-${useId()}`
     let labelledby = useLabels({ name: 'RadioGroupLabel' })
@@ -257,6 +259,8 @@ export let RadioGroupOption = defineComponent({
     let propsRef = computed(() => ({ value: props.value, disabled: props.disabled }))
     let state = ref(OptionState.Empty)
 
+    expose({ el: optionRef, $el: optionRef })
+
     onMounted(() => api.registerOption({ id, element: optionRef, propsRef }))
     onUnmounted(() => api.unregisterOption(id))
 

packages/@headlessui-vue/src/components/switch/switch.ts

@@ -70,7 +70,7 @@ export let Switch = defineComponent({
     value: { type: String, optional: true },
   },
 
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     let api = inject(GroupContext, null)
     let id = `headlessui-switch-${useId()}`
 
@@ -85,6 +85,8 @@ export let Switch = defineComponent({
       switchRef
     )
 
+    expose({ el: switchRef, $el: switchRef })
+
     function handleClick(event: MouseEvent) {
       event.preventDefault()
       toggle()