From 83cda0aa754923b4e56187cb8467128e0da78d18 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 19 Apr 2024 01:54:25 +0200 Subject: [PATCH] Change default tags for `ListboxOptions`, `ListboxOption`, `ComboboxOptions`, `ComboboxOption` and `TabGroup` components (#3109) * use `div` as default tag for `ListboxOptions` and `ListboxOption` components * use `div` as default tag for `ComboboxOptions` and `ComboboxOption` components * use `div` as default tag for `TabGroup` * update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + .../@headlessui-react/src/components/combobox/combobox.tsx | 4 ++-- packages/@headlessui-react/src/components/listbox/listbox.tsx | 4 ++-- packages/@headlessui-react/src/components/tabs/tabs.tsx | 3 +-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 7b77146cd5..5017d60533 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089)) - Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092)) - Use `absolute` as the default Floating UI strategy ([#3097](https://github.com/tailwindlabs/headlessui/pull/3097)) +- Change default tags for `ListboxOptions`, `ListboxOption`, `ComboboxOptions`, `ComboboxOption` and `TabGroup` components ([#3109](https://github.com/tailwindlabs/headlessui/pull/3109)) ### Added diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index cacee2b0a2..5968604349 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -1519,7 +1519,7 @@ function ButtonFn( // --- -let DEFAULT_OPTIONS_TAG = 'ul' as const +let DEFAULT_OPTIONS_TAG = 'div' as const type OptionsRenderPropArg = { open: boolean option: unknown @@ -1630,7 +1630,7 @@ function OptionsFn( // --- -let DEFAULT_OPTION_TAG = 'li' as const +let DEFAULT_OPTION_TAG = 'div' as const type OptionRenderPropArg = { focus: boolean /** @deprecated use `focus` instead */ diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index 177eace09e..e2c032bc5d 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx @@ -849,7 +849,7 @@ function ButtonFn( let SelectedOptionContext = createContext(false) -let DEFAULT_OPTIONS_TAG = 'ul' as const +let DEFAULT_OPTIONS_TAG = 'div' as const type OptionsRenderPropArg = { open: boolean } @@ -1100,7 +1100,7 @@ function OptionsFn( // --- -let DEFAULT_OPTION_TAG = 'li' as const +let DEFAULT_OPTION_TAG = 'div' as const type OptionRenderPropArg = { /** @deprecated use `focus` instead */ active: boolean diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 3b0159294d..1e1e3d4a7a 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -3,7 +3,6 @@ import { useFocusRing } from '@react-aria/focus' import { useHover } from '@react-aria/interactions' import React, { - Fragment, createContext, useContext, useMemo, @@ -220,7 +219,7 @@ function stateReducer(state: StateDefinition, action: Actions) { // --- -let DEFAULT_TABS_TAG = Fragment +let DEFAULT_TABS_TAG = 'div' as const type TabsRenderPropArg = { selectedIndex: number }