Merge pull request #513 from tailwindlabs/develop

Next release

Author: RobinMalfait

CHANGELOG.md

@@ -7,11 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Added 
+
+- Ensure that you can use `Transition.Child` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
+- Add `aria-disabled` on disabled `RadioGroup.Option` components ([#543](https://github.com/tailwindlabs/headlessui/pull/543))
+
+### Fixes
+
+- Improve `disabled` and `tabindex` prop handling ([#512](https://github.com/tailwindlabs/headlessui/pull/512))
+- Improve React peer dependency version range ([#544](https://github.com/tailwindlabs/headlessui/pull/544))
+- Improve types for the `open` prop in the `Dialog` component ([#550](https://github.com/tailwindlabs/headlessui/pull/550))
+- Improve `aria-expanded` logic ([#592](https://github.com/tailwindlabs/headlessui/pull/592))
+- Remove undocumented `:className` prop ([#607](https://github.com/tailwindlabs/headlessui/pull/607))
+- Improve types for `Listbox` component ([#576](https://github.com/tailwindlabs/headlessui/pull/576))
+- Remove explicit `:class` prop ([#608](https://github.com/tailwindlabs/headlessui/pull/608))
+- Improve tree shaking ([#602](https://github.com/tailwindlabs/headlessui/pull/602))
+- Improve peer dependencies for `react-dom`, and for the future version `18` ([#622](https://github.com/tailwindlabs/headlessui/pull/622))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Added 
+
+- Ensure that you can use `TransitionChild` when using implicit Transitions ([#503](https://github.com/tailwindlabs/headlessui/pull/503))
+- Add `aria-disabled` on disabled `RadioGroup.Option` components ([#543](https://github.com/tailwindlabs/headlessui/pull/543))
+
+### Fixes
+
+- Improve `disabled` and `tabindex` prop handling ([#512](https://github.com/tailwindlabs/headlessui/pull/512))
+- Improve reactivity when destructuring from props ([#512](https://github.com/tailwindlabs/headlessui/pull/512))
+- Improve `aria-expanded` logic ([#592](https://github.com/tailwindlabs/headlessui/pull/592))
 
 ## [@headlessui/react@v1.2.0] - 2021-05-10
 

packages/@headlessui-react/package.json

@@ -4,12 +4,13 @@
   "description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "module": "dist/headlessui.esm.js",
+  "module": "dist/index.esm.js",
   "license": "MIT",
   "files": [
     "README.md",
     "dist"
   ],
+  "sideEffects": false,
   "engines": {
     "node": ">=10"
   },
@@ -30,7 +31,8 @@
     "lint": "../../scripts/lint.sh"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
   },
   "devDependencies": {
     "@types/react": "^16.14.2",

packages/@headlessui-react/pages/dialog/dialog.tsx

@@ -74,16 +74,16 @@ export default function Home() {
           <div className="fixed z-10 inset-0 overflow-y-auto">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
               <Transition.Child
+                as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
-                enterTo="opacity-100"
+                enterTo="opacity-75"
                 leave="ease-in duration-200"
-                leaveFrom="opacity-100"
+                leaveFrom="opacity-75"
                 leaveTo="opacity-0"
+                entered="opacity-75"
               >
-                <Dialog.Overlay className="fixed inset-0 transition-opacity">
-                  <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-                </Dialog.Overlay>
+                <Dialog.Overlay className="fixed inset-0 bg-gray-500 transition-opacity" />
               </Transition.Child>
 
               <Transition.Child

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

@@ -220,7 +220,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     ref: buttonRef,
     id: state.buttonId,
     type: 'button',
-    'aria-expanded': state.disclosureState === DisclosureStates.Open ? true : undefined,
+    'aria-expanded': props.disabled ? undefined : state.disclosureState === DisclosureStates.Open,
     'aria-controls': state.linkedPanel ? state.panelId : undefined,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,

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

@@ -356,7 +356,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     type: 'button',
     'aria-haspopup': true,
     'aria-controls': state.optionsRef.current?.id,
-    'aria-expanded': state.listboxState === ListboxStates.Open ? true : undefined,
+    'aria-expanded': state.disabled ? undefined : state.listboxState === ListboxStates.Open,
     'aria-labelledby': labelledby,
     disabled: state.disabled,
     onKeyDown: handleKeyDown,
@@ -660,9 +660,10 @@ function Option<
   let propsWeControl = {
     id,
     role: 'option',
-    tabIndex: -1,
+    tabIndex: disabled === true ? undefined : -1,
     'aria-disabled': disabled === true ? true : undefined,
     'aria-selected': selected === true ? true : undefined,
+    disabled: undefined, // Never forward the `disabled` prop
     onClick: handleClick,
     onFocus: handleFocus,
     onPointerMove: handleMove,

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

@@ -496,6 +496,60 @@ describe('Composition', () => {
       ])
     })
   )
+
+  it(
+    'should be possible to wrap the Menu.Items with a Transition.Child component',
+    suppressConsoleLogs(async () => {
+      let orderFn = jest.fn()
+      render(
+        <Menu>
+          <Menu.Button>Trigger</Menu.Button>
+          <Debug name="Menu" fn={orderFn} />
+          <Transition.Child>
+            <Debug name="Transition" fn={orderFn} />
+            <Menu.Items>
+              <Menu.Item as="a">
+                {data => (
+                  <>
+                    {JSON.stringify(data)}
+                    <Debug name="Menu.Item" fn={orderFn} />
+                  </>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition.Child>
+        </Menu>
+      )
+
+      assertMenuButton({
+        state: MenuState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-menu-button-1' },
+      })
+      assertMenu({ state: MenuState.InvisibleUnmounted })
+
+      await click(getMenuButton())
+
+      assertMenuButton({
+        state: MenuState.Visible,
+        attributes: { id: 'headlessui-menu-button-1' },
+      })
+      assertMenu({
+        state: MenuState.Visible,
+        textContent: JSON.stringify({ active: false, disabled: false }),
+      })
+
+      await click(getMenuButton())
+
+      // Verify that we tracked the `mounts` and `unmounts` in the correct order
+      expect(orderFn.mock.calls).toEqual([
+        ['Mounting - Menu'],
+        ['Mounting - Transition'],
+        ['Mounting - Menu.Item'],
+        ['Unmounting - Transition'],
+        ['Unmounting - Menu.Item'],
+      ])
+    })
+  )
 })
 
 describe('Keyboard interactions', () => {

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

@@ -297,7 +297,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     type: 'button',
     'aria-haspopup': true,
     'aria-controls': state.itemsRef.current?.id,
-    'aria-expanded': state.menuState === MenuStates.Open ? true : undefined,
+    'aria-expanded': props.disabled ? undefined : state.menuState === MenuStates.Open,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     onClick: handleClick,
@@ -560,8 +560,9 @@ function Item<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
   let propsWeControl = {
     id,
     role: 'menuitem',
-    tabIndex: -1,
+    tabIndex: disabled === true ? undefined : -1,
     'aria-disabled': disabled === true ? true : undefined,
+    disabled: undefined, // Never forward the `disabled` prop
     onClick: handleClick,
     onFocus: handleFocus,
     onPointerMove: handleMove,

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

@@ -440,7 +440,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
         ref: buttonRef,
         id: state.buttonId,
         type: 'button',
-        'aria-expanded': state.popoverState === PopoverStates.Open ? true : undefined,
+        'aria-expanded': props.disabled ? undefined : state.popoverState === PopoverStates.Open,
         'aria-controls': state.panel ? state.panelId : undefined,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,

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

@@ -177,6 +177,11 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that all the options get an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) expect(option).toHaveAttribute('aria-disabled', 'true')
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 
@@ -234,6 +239,17 @@ describe('Rendering', () => {
     // Make sure that the onChange handler never got called
     expect(changeFn).toHaveBeenCalledTimes(0)
 
+    // Make sure that the option with value "render-prop" gets an `aria-disabled`
+    let options = getRadioGroupOptions()
+    expect(options).toHaveLength(4)
+    for (let option of options) {
+      if (option.dataset.value) {
+        expect(option).toHaveAttribute('aria-disabled', 'true')
+      } else {
+        expect(option).not.toHaveAttribute('aria-disabled')
+      }
+    }
+
     // Toggle the disabled state
     await click(getByText('Toggle'))
 

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

@@ -352,6 +352,7 @@ function Option<
     'aria-checked': checked ? 'true' : 'false',
     'aria-labelledby': labelledby,
     'aria-describedby': describedby,
+    'aria-disabled': isDisabled ? true : undefined,
     tabIndex: (() => {
       if (isDisabled) return -1
       if (checked) return 0