fix: Fix falsy values on Radio not working

Closes #607


Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>

packages/reakit/src/Menu/README.md

@@ -1489,7 +1489,7 @@ similarly to `readOnly` on form elements. In this case, only
   Same as the HTML attribute.
 
 - **`value`**
-  <code>any</code>
+  <code>string | number</code>
 
   Same as the `value` attribute.
 
@@ -1603,12 +1603,12 @@ and `groupId` if any. This state is automatically updated when
   Moves focus to the item below.
 
 - **`state`**
-  <code>any</code>
+  <code>string | number | undefined</code>
 
   The `value` attribute of the current checked radio.
 
 - **`setState`**
-  <code>(value: any) =&#62; void</code>
+  <code title="(value: SetStateAction&#60;string | number | undefined&#62;) =&#62; void">(value: SetStateAction&#60;string | number | undefi...</code>
 
   Sets `state`.
 

packages/reakit/src/Radio/README.md

@@ -167,7 +167,7 @@ item in the last row or column and the first item in the first row or
 column and vice-versa.
 
 - **`state`**
-  <code>any</code>
+  <code>string | number | undefined</code>
 
   The `value` attribute of the current checked radio.
 
@@ -191,7 +191,7 @@ similarly to `readOnly` on form elements. In this case, only
   Same as the HTML attribute.
 
 - **`value`**
-  <code>any</code>
+  <code>string | number</code>
 
   Same as the `value` attribute.
 
@@ -300,12 +300,12 @@ and `groupId` if any. This state is automatically updated when
   Moves focus to the last item.
 
 - **`state`**
-  <code>any</code>
+  <code>string | number | undefined</code>
 
   The `value` attribute of the current checked radio.
 
 - **`setState`**
-  <code>(value: any) =&#62; void</code>
+  <code title="(value: SetStateAction&#60;string | number | undefined&#62;) =&#62; void">(value: SetStateAction&#60;string | number | undefi...</code>
 
   Sets `state`.
 

packages/reakit/src/Radio/Radio.ts

@@ -17,7 +17,7 @@ export type RadioOptions = CompositeItemOptions &
     /**
      * Same as the `value` attribute.
      */
-    value: any;
+    value: string | number;
     /**
      * Same as the `checked` attribute.
      */
@@ -37,7 +37,9 @@ function getChecked(options: RadioOptions) {
   if (typeof options.checked !== "undefined") {
     return options.checked;
   }
-  return options.value && options.state === options.value;
+  return (
+    typeof options.value !== "undefined" && options.state === options.value
+  );
 }
 
 function useInitialChecked(options: RadioOptions) {

packages/reakit/src/Radio/RadioState.ts

@@ -14,14 +14,14 @@ export type RadioState = CompositeState & {
   /**
    * The `value` attribute of the current checked radio.
    */
-  state: any;
+  state: string | number | undefined;
 };
 
 export type RadioActions = CompositeActions & {
   /**
    * Sets `state`.
    */
-  setState: React.Dispatch<React.SetStateAction<any>>;
+  setState: React.Dispatch<React.SetStateAction<string | number | undefined>>;
 };
 
 export type RadioInitialState = CompositeInitialState &

packages/reakit/src/Radio/__tests__/index-test.tsx

@@ -260,3 +260,41 @@ test("button group", () => {
 </div>
 `);
 });
+
+test("empty strings can be checked", () => {
+  // See https://github.com/reakit/reakit/issues/607
+  const Test = () => {
+    const radio = useRadioState();
+    return (
+      <RadioGroup {...radio} aria-label="radiogroup" id="base">
+        <Radio {...radio} value="" aria-label="empty-string" />
+      </RadioGroup>
+    );
+  };
+
+  const { getByLabelText } = render(<Test />);
+
+  expect(getByLabelText("empty-string")).not.toBeChecked();
+  click(getByLabelText("empty-string"));
+  expect(getByLabelText("empty-string")).toBeChecked();
+  expect(getByLabelText("empty-string")).toHaveFocus();
+});
+
+test("falsy numbers can be checked", () => {
+  // See https://github.com/reakit/reakit/issues/607
+  const Test = () => {
+    const radio = useRadioState();
+    return (
+      <RadioGroup {...radio} aria-label="radiogroup" id="base">
+        <Radio {...radio} value={0} aria-label="zero" />
+      </RadioGroup>
+    );
+  };
+
+  const { getByLabelText } = render(<Test />);
+
+  expect(getByLabelText("zero")).not.toBeChecked();
+  click(getByLabelText("zero"));
+  expect(getByLabelText("zero")).toBeChecked();
+  expect(getByLabelText("zero")).toHaveFocus();
+});