packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### 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))
+
+## [1.7.19] - 2024-04-15
+
+### Fixed
+
+- Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
+- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
+- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
+- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
+- Allow setting custom `tabIndex` on the `<Switch />` component ([#2966](https://github.com/tailwindlabs/headlessui/pull/2966))
+- Forward `disabled` state to hidden inputs in form-like components ([#3004](https://github.com/tailwindlabs/headlessui/pull/3004))
+- Respect `selectedIndex` for controlled `<Tab/>` components ([#3037](https://github.com/tailwindlabs/headlessui/pull/3037))
 
 ## [1.7.18] - 2024-01-08
 
@@ -553,7 +568,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.18...HEAD
+[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.19...HEAD
+[1.7.19]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.18...@headlessui/react@v1.7.19
 [1.7.18]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.17...@headlessui/react@v1.7.18
 [1.7.17]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.16...v1.7.17
 [1.7.16]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.15...@headlessui/react@v1.7.16

packages/@headlessui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headlessui/react",
-  "version": "1.7.18",
+  "version": "1.7.19",
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",

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

@@ -5655,6 +5655,48 @@ describe('Form compatibility', () => {
     expect(submits).lastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Combobox is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Combobox value={value} onChange={setValue} name="delivery" disabled>
+            <Combobox.Input onChange={NOOP} />
+            <Combobox.Button>Trigger</Combobox.Button>
+            <Combobox.Label>Pizza Delivery</Combobox.Label>
+            <Combobox.Options>
+              <Combobox.Option value="pickup">Pickup</Combobox.Option>
+              <Combobox.Option value="home-delivery">Home delivery</Combobox.Option>
+              <Combobox.Option value="dine-in">Dine in</Combobox.Option>
+            </Combobox.Options>
+          </Combobox>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Open combobox
+    await click(getComboboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
     let options = [

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

@@ -942,6 +942,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
                   hidden: true,
                   readOnly: true,
                   form: formName,
+                  disabled,
                   name,
                   value,
                 })}

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

@@ -299,7 +299,14 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     if (hasNestedDialogs) return false
     return true
   })()
-  useOutsideClick(resolveRootContainers, close, outsideClickEnabled)
+  useOutsideClick(
+    resolveRootContainers,
+    (event) => {
+      event.preventDefault()
+      close()
+    },
+    outsideClickEnabled
+  )
 
   // Handle `Escape` to close
   let escapeToCloseEnabled = (() => {

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

@@ -4864,6 +4864,47 @@ describe('Form compatibility', () => {
     expect(submits).lastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Listbox is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Listbox value={value} onChange={setValue} name="delivery" disabled>
+            <Listbox.Button>Trigger</Listbox.Button>
+            <Listbox.Label>Pizza Delivery</Listbox.Label>
+            <Listbox.Options>
+              <Listbox.Option value="pickup">Pickup</Listbox.Option>
+              <Listbox.Option value="home-delivery">Home delivery</Listbox.Option>
+              <Listbox.Option value="dine-in">Dine in</Listbox.Option>
+            </Listbox.Options>
+          </Listbox>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
     let options = [

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

@@ -566,6 +566,7 @@ function ListboxFn<
                   hidden: true,
                   readOnly: true,
                   form: formName,
+                  disabled,
                   name,
                   value,
                 })}

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

@@ -421,6 +421,47 @@ describe('Rendering', () => {
         assertMenu({ state: MenuState.InvisibleUnmounted })
       })
     )
+
+    it('should not override an explicit disabled prop on MenuItems child', async () => {
+      render(
+        <Menu>
+          <Menu.Button>Trigger</Menu.Button>
+          <Menu.Items>
+            <Menu.Item>{({ disabled }) => <button disabled={disabled}>Item A</button>}</Menu.Item>
+            <Menu.Item>{({ disabled }) => <button disabled={disabled}>Item B</button>}</Menu.Item>
+            <Menu.Item disabled>
+              {({ disabled }) => <button disabled={disabled}>Item C</button>}
+            </Menu.Item>
+          </Menu.Items>
+        </Menu>
+      )
+
+      assertMenuButton({
+        state: MenuState.InvisibleUnmounted,
+      })
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+
+      getMenuButton()?.focus()
+
+      await press(Keys.Enter)
+
+      assertMenuButton({
+        state: MenuState.Visible,
+      })
+      assertMenu({ state: MenuState.Visible })
+      assertMenuItem(getMenuItems()[0], {
+        tag: 'button',
+        attributes: {},
+      })
+      assertMenuItem(getMenuItems()[1], {
+        tag: 'button',
+        attributes: {},
+      })
+      assertMenuItem(getMenuItems()[2], {
+        tag: 'button',
+        attributes: { disabled: '' },
+      })
+    })
   })
 
   it('should guarantee the order of DOM nodes when performing actions', async () => {

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -1485,6 +1485,41 @@ describe('Form compatibility', () => {
     })
   )
 
+  it('should not submit the data if the RadioGroup is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <RadioGroup value={value} onChange={setValue} name="delivery" disabled>
+            <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
+            <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
+            <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
+            <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
+          </RadioGroup>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it(
     'should be possible to submit a form with a complex value object',
     suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -350,6 +350,7 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
                     hidden: true,
                     readOnly: true,
                     form: formName,
+                    disabled,
                     name,
                     value,
                   })}

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

@@ -59,6 +59,47 @@ describe('Rendering', () => {
     assertSwitch({ state: SwitchState.Off, label: 'Enable notifications' })
   })
 
+  describe('`tabIndex` attribute', () => {
+    it('should have a default tabIndex of `0`', () => {
+      render(
+        <Switch checked={false} onChange={console.log}>
+          <span>Enable notifications</span>
+        </Switch>
+      )
+      assertSwitch({
+        state: SwitchState.Off,
+        label: 'Enable notifications',
+        attributes: { tabindex: '0' },
+      })
+    })
+
+    it('should be possible to override the `tabIndex`', () => {
+      render(
+        <Switch checked={false} onChange={console.log} tabIndex={3}>
+          <span>Enable notifications</span>
+        </Switch>
+      )
+      assertSwitch({
+        state: SwitchState.Off,
+        label: 'Enable notifications',
+        attributes: { tabindex: '3' },
+      })
+    })
+
+    it('should not be possible to override the `tabIndex` to `-1`', () => {
+      render(
+        <Switch checked={false} onChange={console.log} tabIndex={-1}>
+          <span>Enable notifications</span>
+        </Switch>
+      )
+      assertSwitch({
+        state: SwitchState.Off,
+        label: 'Enable notifications',
+        attributes: { tabindex: '0' },
+      })
+    })
+  })
+
   describe('`type` attribute', () => {
     it('should set the `type` to "button" by default', async () => {
       render(
@@ -769,4 +810,37 @@ describe('Form compatibility', () => {
     // Verify that the form has been submitted
     expect(submits).lastCalledWith([['fruit', 'apple']])
   })
+
+  it('should not submit the data if the Switch is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [state, setState] = useState(true)
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Switch.Group>
+            <Switch checked={state} onChange={setState} name="fruit" value="apple" disabled />
+            <Switch.Label>Apple</Switch.Label>
+          </Switch.Group>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
 })