Fix render prop data in RadioGroup component (#1522)

* fix `slot` state of `RadioGroup` component

The `useEvent` is 1 tick too late (due to the update of the callback
happening in useEffect). This isn't a problem for event listeners, but
it is for functions that need to run "now".

We can change the `useLatestValue` hook to do something like:

```diff
  export function useLatestValue<T>(value: T) {
    let cache = useRef(value)

-   useIsoMorphicEffect(() => {
-     cache.current = value
-   }, [value])
+   cache.current = value

    return cache
  }
```

But then we are mutating our refs in render which isn't ideal.

* update changelog

* add test to verify that the correct slot data is exposed

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove leftover code in Combobox component ([#1514](https://github.com/tailwindlabs/headlessui/pull/1514))
 - Fix event handlers with arity > 1 ([#1515](https://github.com/tailwindlabs/headlessui/pull/1515))
 - Fix transition `enter` bug ([#1519](https://github.com/tailwindlabs/headlessui/pull/1519))
+- Fix render prop data in `RadioGroup` component ([#1522](https://github.com/tailwindlabs/headlessui/pull/1522))
 
 ## [1.6.3] - 2022-05-25
 

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

@@ -322,6 +322,56 @@ describe('Rendering', () => {
     })
   )
 
+  it(
+    'should expose internal data as a render prop',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [value, setValue] = useState(null)
+
+        return (
+          <RadioGroup value={value} onChange={setValue}>
+            <RadioGroup.Option value="a">Option 1</RadioGroup.Option>
+            <RadioGroup.Option value="b">Option 2</RadioGroup.Option>
+            <RadioGroup.Option value="c">Option 3</RadioGroup.Option>
+          </RadioGroup>
+        )
+      }
+
+      render(<Example />)
+
+      let options = getRadioGroupOptions()
+
+      // Nothing is active yet
+      expect(options[0]).toHaveAttribute('data-headlessui-state', '')
+      expect(options[1]).toHaveAttribute('data-headlessui-state', '')
+      expect(options[2]).toHaveAttribute('data-headlessui-state', '')
+
+      // Focus the RadioGroup
+      await press(Keys.Tab)
+
+      // The first one should be active, but not checked yet
+      expect(options[0]).toHaveAttribute('data-headlessui-state', 'active')
+      expect(options[1]).toHaveAttribute('data-headlessui-state', '')
+      expect(options[2]).toHaveAttribute('data-headlessui-state', '')
+
+      // Select the first one
+      await press(Keys.Space)
+
+      // The first one should be active and checked
+      expect(options[0]).toHaveAttribute('data-headlessui-state', 'checked active')
+      expect(options[1]).toHaveAttribute('data-headlessui-state', '')
+      expect(options[2]).toHaveAttribute('data-headlessui-state', '')
+
+      // Go to the next option
+      await press(Keys.ArrowDown)
+
+      // The second one should be active and checked
+      expect(options[0]).toHaveAttribute('data-headlessui-state', '')
+      expect(options[1]).toHaveAttribute('data-headlessui-state', 'checked active')
+      expect(options[2]).toHaveAttribute('data-headlessui-state', '')
+    })
+  )
+
   describe('Equality', () => {
     let options = [
       { id: 1, name: 'Alice' },

packages/@headlessui-react/src/hooks/use-flags.ts

@@ -1,13 +1,12 @@
-import { useState } from 'react'
-import { useEvent } from './use-event'
+import { useState, useCallback } from 'react'
 
 export function useFlags(initialFlags = 0) {
   let [flags, setFlags] = useState(initialFlags)
 
-  let addFlag = useEvent((flag: number) => setFlags((flags) => flags | flag))
-  let hasFlag = useEvent((flag: number) => Boolean(flags & flag))
-  let removeFlag = useEvent((flag: number) => setFlags((flags) => flags & ~flag))
-  let toggleFlag = useEvent((flag: number) => setFlags((flags) => flags ^ flag))
+  let addFlag = useCallback((flag: number) => setFlags((flags) => flags | flag), [flags])
+  let hasFlag = useCallback((flag: number) => Boolean(flags & flag), [flags])
+  let removeFlag = useCallback((flag: number) => setFlags((flags) => flags & ~flag), [setFlags])
+  let toggleFlag = useCallback((flag: number) => setFlags((flags) => flags ^ flag), [setFlags])
 
   return { addFlag, hasFlag, removeFlag, toggleFlag }
 }