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.

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

2.0.0 Alpha prep #2887

Merged
merged 83 commits into from
Dec 20, 2023
Merged

2.0.0 Alpha prep #2887

merged 83 commits into from
Dec 20, 2023

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Dec 20, 2023

This PR includes a bunch of fixes and new components / feautures such as:

Added

  • Add new Checkbox component
  • Add new Radio component as an alternative to the existing RadioGroup.Option component
  • Add new Button component
  • Add new Input component
  • Add new Textarea component
  • Add new Select component
  • Add new Field, Label, Description, Fieldset and Legend components
  • Add new DataInteractive component
  • Add new anchor and modal prop to ComboboxOptions, ListboxOptions, MenuItems and PopoverPanel components
  • Add new ListboxSelectedOption component
  • Add new MenuSection, MenuHeading, and MenuSeparator components
  • Add new simplified data-* attributes as an alternative to the existing data-headlessui-state="..." attribute
  • Add autoFocus prop on focusable components (which maps to data-autofocus)

Changed

  • Bumped to React and React DOM 18
  • Dialog is focused by default instead of the first focusable element (unless an element exists with a data-autofocus in the dialog)
  • Deprecated the active prop in favor of the focus prop on the ComboboxOption, ListboxOption, ListboxOption, MenuItem, MenuItem, RadioOption, and RadioOption components

Fixed

  • Fix iOS scroll lock glitches

This ensures all imported types are using the `type` keyword.
Will be used in the new and existing components.
Right now Next.js does barrel file optimization and re-writing imports
to a real path in the `dist` folder. Most of those rewrites don't
actually exist because they have an assumption:

```js
import { FooBar } from '@headlessui/react'
```

is rewritten as:
```js
import { FooBar } from '@headlessui/react/dist/components/foo-bar/foo-bar'
```

This script will make sure these paths exist...
This hook has a default implementation when comparing objects. If the
object contains an `id`, then we will compare the objects by their
`id`'s without the user of the library needing to specify `by="id"`.

If the objects don't have an `id` prop, then the default is still to
compare by reference (unless specicified otherwise).
…(singular)

This is so that we can be consistent with the other components.
This is a more complex version of a soon to be exported `mergeProps`
that we will be using in our components.
These are the ones being exposed inside `data-headlessui-state="..."`
@philngo
Copy link

philngo commented Dec 29, 2023

@RobinMalfait Love where this update is going and understand that it supports the new Catalyst toolkit, which is react-only. Do you plan at any point to add Vue support for these new Headless UI components in future updates, or is it reasonable to expect that the updates in this 2.0.0 alpha and future releases will only go to the React components?

@philngo
Copy link

philngo commented Jan 1, 2024

Just saw this note in the release announcement:

These improvements are React-only for now during this early alpha period, but we plan to bring all of these improvements to Vue as well before tagging v2.0.

Glad to hear it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants