2.0.0 Alpha prep

package.json

@@ -9,6 +9,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "resolutions": {
+    "next/@swc/helpers": "0.4.36"
+  },
   "scripts": {
     "react": "yarn workspace @headlessui/react",
     "react-playground": "yarn workspace playground-react dev",
@@ -46,6 +49,7 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.13.3",
+    "@swc-node/register": "^1.6.8",
     "@swc/core": "^1.2.131",
     "@swc/jest": "^0.2.17",
     "@testing-library/jest-dom": "^5.16.4",
@@ -56,11 +60,11 @@
     "jest": "26",
     "lint-staged": "^12.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "prettier-plugin-tailwindcss": "0.4",
+    "prettier": "^3.1.0",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "rimraf": "^3.0.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.2"
   }
 }

packages/@headlessui-react/CHANGELOG.md

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
+- Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
+- 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)
+
 ### Fixed
 
 - Don't call `<Dialog>`'s `onClose` twice on mobile devices ([#2690](https://github.com/tailwindlabs/headlessui/pull/2690))
@@ -21,11 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix outside click detection when component is mounted in the Shadow DOM ([#2866](https://github.com/tailwindlabs/headlessui/pull/2866))
 - Fix CJS types ([#2880](https://github.com/tailwindlabs/headlessui/pull/2880))
 - Fix error when transition classes contain new lines ([#2871](https://github.com/tailwindlabs/headlessui/pull/2871))
-
-### Added
-
-- Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
-- Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
+- Fix iOS scroll lock glitches
 
 ## [1.7.17] - 2023-08-17
 

packages/@headlessui-react/package.json

@@ -47,15 +47,17 @@
   },
   "devDependencies": {
     "@testing-library/react": "^13.0.0",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "esbuild": "^0.11.18",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "snapshot-diff": "^0.8.1"
   },
   "dependencies": {
-    "@tanstack/react-virtual": "^3.0.0-beta.60",
-    "client-only": "^0.0.1"
+    "@floating-ui/react": "^0.26.2",
+    "@tanstack/react-virtual": "3.0.0-beta.60",
+    "@react-aria/focus": "^3.14.3",
+    "@react-aria/interactions": "3.0.0-nightly.2584"
   }
 }

packages/@headlessui-react/src/components/button/button.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { Button } from './button'
+
+describe('Rendering', () => {
+  describe('Button', () => {
+    it('should render a button', async () => {
+      render(<Button>My Button</Button>)
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should default to `type="button"`', async () => {
+      render(<Button>My Button</Button>)
+
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+    })
+
+    it('should render a button using a render prop', () => {
+      render(<Button>{(slot) => <>{JSON.stringify(slot)}</>}</Button>)
+
+      expect(screen.getByRole('button').textContent).toEqual(
+        JSON.stringify({
+          disabled: false,
+          hover: false,
+          focus: false,
+          active: false,
+          autofocus: false,
+        })
+      )
+    })
+
+    it('should map the `autoFocus` prop to a `data-autofocus` attribute', () => {
+      render(<Button autoFocus>My Button</Button>)
+
+      expect(screen.getByRole('button')).toHaveAttribute('data-autofocus')
+    })
+  })
+})

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

@@ -0,0 +1,88 @@
+'use client'
+
+import { useFocusRing } from '@react-aria/focus'
+import { useHover } from '@react-aria/interactions'
+import { useMemo, type ElementType, type Ref } from 'react'
+import { useActivePress } from '../../hooks/use-active-press'
+import { useDisabled } from '../../internal/disabled'
+import type { Props } from '../../types'
+import {
+  forwardRefWithAs,
+  mergeProps,
+  render,
+  type HasDisplayName,
+  type RefProp,
+} from '../../utils/render'
+
+let DEFAULT_BUTTON_TAG = 'button' as const
+
+type ButtonRenderPropArg = {
+  disabled: boolean
+  hover: boolean
+  focus: boolean
+  active: boolean
+  autofocus: boolean
+}
+type ButtonPropsWeControl = never
+
+export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
+  TTag,
+  ButtonRenderPropArg,
+  ButtonPropsWeControl,
+  {
+    disabled?: boolean
+    autoFocus?: boolean
+    type?: 'button' | 'submit' | 'reset'
+  }
+>
+
+function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
+  props: ButtonProps<TTag>,
+  ref: Ref<HTMLElement>
+) {
+  let providedDisabled = useDisabled()
+  let { disabled = providedDisabled || false, ...theirProps } = props
+
+  let { isFocusVisible: focus, focusProps } = useFocusRing({ autoFocus: props.autoFocus ?? false })
+  let { isHovered: hover, hoverProps } = useHover({ isDisabled: disabled })
+  let { pressed: active, pressProps } = useActivePress({ disabled })
+
+  let ourProps = mergeProps(
+    {
+      ref,
+      disabled: disabled || undefined,
+      type: theirProps.type ?? 'button',
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+
+  let slot = useMemo(
+    () =>
+      ({
+        disabled,
+        hover,
+        focus,
+        active,
+        autofocus: props.autoFocus ?? false,
+      }) satisfies ButtonRenderPropArg,
+    [disabled, hover, focus, active, props.autoFocus]
+  )
+
+  return render({
+    ourProps,
+    theirProps,
+    slot,
+    defaultTag: DEFAULT_BUTTON_TAG,
+    name: 'Button',
+  })
+}
+
+export interface _internal_ComponentButton extends HasDisplayName {
+  <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
+    props: ButtonProps<TTag> & RefProp<typeof ButtonFn>
+  ): JSX.Element
+}
+
+export let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentButton

packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx

@@ -0,0 +1,121 @@
+import { render } from '@testing-library/react'
+import React, { useState } from 'react'
+import {
+  CheckboxState,
+  assertCheckbox,
+  getCheckbox,
+} from '../../test-utils/accessibility-assertions'
+import { Keys, click, focus, press } from '../../test-utils/interactions'
+import {
+  commonControlScenarios,
+  commonFormScenarios,
+  commonRenderingScenarios,
+} from '../../test-utils/scenarios'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { Checkbox, type CheckboxProps } from './checkbox'
+
+commonRenderingScenarios(Checkbox, { getElement: getCheckbox })
+commonControlScenarios(Checkbox)
+commonFormScenarios((props) => <Checkbox defaultChecked {...props} />, {
+  async performUserInteraction(control) {
+    await click(control)
+  },
+})
+
+describe('Rendering', () => {
+  it(
+    'should be possible to put the checkbox in an indeterminate state',
+    suppressConsoleLogs(async () => {
+      render(<Checkbox indeterminate />)
+
+      assertCheckbox({ state: CheckboxState.Indeterminate })
+    })
+  )
+
+  it(
+    'should be possible to put the checkbox in an default checked state',
+    suppressConsoleLogs(async () => {
+      render(<Checkbox defaultChecked />)
+
+      assertCheckbox({ state: CheckboxState.Checked })
+    })
+  )
+
+  it(
+    'should render a checkbox in an unchecked state',
+    suppressConsoleLogs(async () => {
+      render(<Checkbox />)
+
+      assertCheckbox({ state: CheckboxState.Unchecked })
+    })
+  )
+})
+
+describe.each([
+  [
+    'Uncontrolled',
+    function Example(props: CheckboxProps) {
+      return <Checkbox {...props} />
+    },
+  ],
+  [
+    'Controlled',
+    function Example(props: CheckboxProps) {
+      let [checked, setChecked] = useState(false)
+      return <Checkbox checked={checked} onChange={setChecked} {...props} />
+    },
+  ],
+])('Keyboard interactions (%s)', (_, Example) => {
+  describe('`Space` key', () => {
+    it(
+      'should be possible to toggle a checkbox',
+      suppressConsoleLogs(async () => {
+        render(<Example />)
+
+        assertCheckbox({ state: CheckboxState.Unchecked })
+
+        await focus(getCheckbox())
+        await press(Keys.Space)
+
+        assertCheckbox({ state: CheckboxState.Checked })
+
+        await press(Keys.Space)
+
+        assertCheckbox({ state: CheckboxState.Unchecked })
+      })
+    )
+  })
+})
+
+describe.each([
+  [
+    'Uncontrolled',
+    function Example(props: CheckboxProps) {
+      return <Checkbox {...props} />
+    },
+  ],
+  [
+    'Controlled',
+    function Example(props: CheckboxProps) {
+      let [checked, setChecked] = useState(false)
+      return <Checkbox checked={checked} onChange={setChecked} {...props} />
+    },
+  ],
+])('Mouse interactions (%s)', (_, Example) => {
+  it(
+    'should be possible to toggle a checkbox by clicking it',
+    suppressConsoleLogs(async () => {
+      render(<Example />)
+
+      assertCheckbox({ state: CheckboxState.Unchecked })
+
+      await click(getCheckbox())
+
+      assertCheckbox({ state: CheckboxState.Checked })
+
+      await click(getCheckbox())
+
+      assertCheckbox({ state: CheckboxState.Unchecked })
+    })
+  )
+})