refactor(types): 🏷️ update types and refactor

src/Link/AriaLink.ts

@@ -1,26 +1,34 @@
 import * as React from "react";
 import { useForkRef } from "reakit-utils";
-import { useLink, AriaLinkOptions } from "@react-aria/link";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
-import { INTERACTION_KEYS } from "../interactions/__keys";
+import { useLink, AriaLinkOptions } from "@react-aria/link";
 import { createComponent, createHook } from "reakit-system";
 
+import { INTERACTION_KEYS } from "../interactions/__keys";
+
+export type AriaLinkHTMLProps = BoxHTMLProps;
+
+export type AriaLinkProps = AriaLinkOptions & AriaLinkHTMLProps;
+
 export const useAriaLink = createHook<AriaLinkOptions, BoxHTMLProps>({
   name: "AriaLink",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, { ref: htmlRef, ...htmlProps }) {
     const props = { ...options, ...htmlProps };
     const ref = React.useRef<HTMLElement>(null);
 
     const { linkProps } = useLink(props, ref);
 
-    return mergeProps(htmlProps, {
-      ...linkProps,
-      ref: useForkRef(ref, htmlRef),
-    });
+    return mergeProps(
+      {
+        ...linkProps,
+        ref: useForkRef(ref, htmlRef),
+      },
+      htmlProps,
+    );
   },
 });
 

src/button/AriaButton.ts

@@ -1,29 +1,39 @@
 import * as React from "react";
 import { useForkRef } from "reakit-utils";
-import { BoxHTMLProps, useBox } from "reakit";
 import { useButton } from "@react-aria/button";
 import { mergeProps } from "@react-aria/utils";
-import { AriaButtonProps } from "@react-types/button";
-import { INTERACTION_KEYS } from "../interactions/__keys";
 import { createComponent, createHook } from "reakit-system";
+import { ButtonHTMLProps, useButton as useReakitButton } from "reakit";
+import { AriaButtonProps as AriaButtonOptions } from "@react-types/button";
+
+import { INTERACTION_KEYS } from "../interactions/__keys";
 
-export const useAriaButton = createHook<AriaButtonProps, BoxHTMLProps>({
-  name: "AriaButton",
-  keys: INTERACTION_KEYS,
-  compose: [useBox],
+export type AriaButtonHTMLProps = ButtonHTMLProps;
 
-  useProps(options, { ref: htmlRef, ...htmlProps }) {
-    const props = { ...options, ...htmlProps } as AriaButtonProps;
-    const ref = React.useRef<HTMLElement>(null);
+export type AriaButtonProps = AriaButtonOptions & AriaButtonHTMLProps;
 
-    const { buttonProps } = useButton(props, ref);
+export const useAriaButton = createHook<AriaButtonOptions, AriaButtonHTMLProps>(
+  {
+    name: "AriaButton",
+    compose: useReakitButton,
+    keys: INTERACTION_KEYS,
 
-    return mergeProps(htmlProps, {
-      ...buttonProps,
-      ref: useForkRef(ref, htmlRef),
-    });
+    useProps(options, { ref: htmlRef, ...htmlProps }) {
+      const props = { ...options, ...htmlProps } as AriaButtonOptions;
+      const ref = React.useRef<HTMLElement>(null);
+
+      const { buttonProps } = useButton(props, ref);
+
+      return mergeProps(
+        {
+          ...buttonProps,
+          ref: useForkRef(ref, htmlRef),
+        },
+        htmlProps,
+      );
+    },
   },
-});
+);
 
 export const AriaButton = createComponent({
   as: "button",

src/button/AriaToggleButton.ts

@@ -1,35 +1,47 @@
 import * as React from "react";
 import { useForkRef } from "reakit-utils";
-import { BoxHTMLProps, useBox } from "reakit";
+import { ButtonHTMLProps, useButton } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { ToggleState } from "@react-stately/toggle";
 import { useToggleButton } from "@react-aria/button";
 import { INTERACTION_KEYS } from "../interactions/__keys";
 import { createComponent, createHook } from "reakit-system";
-import { AriaToggleButtonProps } from "@react-types/button";
+import { AriaToggleButtonProps as AriaToggleButtonOptionsProps } from "@react-types/button";
 
-type useAriaToggleButtonOptions = AriaToggleButtonProps & ToggleState;
+export type AriaToggleButtonOptions = AriaToggleButtonOptionsProps &
+  ToggleState;
+
+export type AriaToggleButtonHTMLProps = ButtonHTMLProps;
+
+export type AriaToggleButtonProps = AriaToggleButtonOptions &
+  AriaToggleButtonHTMLProps;
 
 export const useAriaToggleButton = createHook<
-  useAriaToggleButtonOptions,
-  BoxHTMLProps
+  AriaToggleButtonOptions,
+  AriaToggleButtonHTMLProps
 >({
   name: "AriaToggleButton",
+  compose: useButton,
   keys: [...INTERACTION_KEYS, "isSelected", "setSelected", "toggle"],
-  compose: [useBox],
 
   useProps(options, { ref: htmlRef, ...htmlProps }) {
     const { isSelected, setSelected, toggle, ...restOptions } = options;
-    const props = { ...restOptions, ...htmlProps } as AriaToggleButtonProps;
+    const props = {
+      ...restOptions,
+      ...htmlProps,
+    } as AriaToggleButtonOptionsProps;
     const state = { isSelected, setSelected, toggle };
     const ref = React.useRef<HTMLElement>(null);
 
     const { buttonProps } = useToggleButton(props, state, ref);
 
-    return mergeProps(htmlProps, {
-      ...buttonProps,
-      ref: useForkRef(ref, htmlRef),
-    });
+    return mergeProps(
+      {
+        ...buttonProps,
+        ref: useForkRef(ref, htmlRef),
+      },
+      htmlProps,
+    );
   },
 });
 

src/interactions/Focus.ts

@@ -1,14 +1,15 @@
 import { useLiveRef } from "reakit-utils";
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
 import { FocusProps, useFocus as useAriaFocus } from "@react-aria/interactions";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const useFocus = createHook<FocusProps, BoxHTMLProps>({
   name: "Focus",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(
     options,
@@ -24,7 +25,7 @@ export const useFocus = createHook<FocusProps, BoxHTMLProps>({
 
     const { focusProps } = useAriaFocus(props);
 
-    return mergeProps(htmlProps, focusProps);
+    return mergeProps(focusProps, htmlProps);
   },
 });
 

src/interactions/FocusRing.ts

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
@@ -8,15 +7,17 @@ import {
   useFocusRing as useAriaFocusRing,
 } from "@react-aria/focus";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 interface useFocusRingOptions extends FocusRingProps {
   onFocusRingChange?: (isFocused: boolean) => void;
   onFocusRingVisibleChange?: (isFocusVisible: boolean) => void;
 }
 
 export const useFocusRing = createHook<useFocusRingOptions, BoxHTMLProps>({
   name: "FocusRing",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, htmlProps) {
     const {
@@ -37,7 +38,7 @@ export const useFocusRing = createHook<useFocusRingOptions, BoxHTMLProps>({
       onFocusRingVisibleChange?.(isFocusVisible);
     }, [isFocusVisible, onFocusRingVisibleChange]);
 
-    return mergeProps(htmlProps, focusProps);
+    return mergeProps(focusProps, htmlProps);
   },
 });
 

src/interactions/FocusVisible.ts

@@ -4,13 +4,14 @@
  * to work with Reakit System
  */
 import { useEffect } from "react";
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
+import { createComponent, createHook } from "reakit-system";
 import {
   FocusVisibleProps,
   useFocusVisible as useAriaFocusVisible,
 } from "@react-aria/interactions";
-import { createComponent, createHook } from "reakit-system";
+
+import { INTERACTION_KEYS } from "./__keys";
 
 interface useFocusVisibleOptions extends FocusVisibleProps {
   onFocusVisibleChange?: (isFocusVisible: boolean) => void;
@@ -19,8 +20,8 @@ interface useFocusVisibleOptions extends FocusVisibleProps {
 export const useFocusVisible = createHook<useFocusVisibleOptions, BoxHTMLProps>(
   {
     name: "FocusVisible",
+    compose: useBox,
     keys: INTERACTION_KEYS,
-    compose: [useBox],
 
     useProps(options, htmlProps) {
       const { onFocusVisibleChange, ...restOptions } = options;

src/interactions/FocusWithin.ts

@@ -1,4 +1,3 @@
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
@@ -7,15 +6,17 @@ import {
   useFocusWithin as useAriaFocusWithin,
 } from "@react-aria/interactions";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const useFocusWithin = createHook<FocusWithinProps, BoxHTMLProps>({
   name: "FocusWithin",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, htmlProps) {
     const { focusWithinProps } = useAriaFocusWithin(options);
 
-    return mergeProps(htmlProps, focusWithinProps);
+    return mergeProps(focusWithinProps, htmlProps);
   },
 });
 

src/interactions/Focusable.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
@@ -8,18 +7,20 @@ import {
   useFocusable as useAriaFocusable,
 } from "@react-aria/focus";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const useFocusable = createHook<FocusableOptions, BoxHTMLProps>({
   name: "Focusable",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, htmlProps) {
     const props = { ...options, ...htmlProps };
     const ref = React.useRef<HTMLElement>(null);
 
     const { focusableProps } = useAriaFocusable(props, ref);
 
-    return mergeProps(htmlProps, focusableProps);
+    return mergeProps(focusableProps, htmlProps);
   },
 });
 

src/interactions/Hover.ts

@@ -1,18 +1,19 @@
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
 import { HoverProps, useHover as useAriaHover } from "@react-aria/interactions";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const useHover = createHook<HoverProps, BoxHTMLProps>({
   name: "Hover",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, htmlProps) {
     const { hoverProps } = useAriaHover(options);
 
-    return mergeProps(htmlProps, hoverProps);
+    return mergeProps(hoverProps, htmlProps);
   },
 });
 

src/interactions/Keyboard.ts

@@ -1,5 +1,4 @@
 import { useLiveRef } from "reakit-utils";
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
@@ -8,10 +7,12 @@ import {
   useKeyboard as useAriaKeyboard,
 } from "@react-aria/interactions";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const useKeyboard = createHook<KeyboardProps, BoxHTMLProps>({
   name: "Keyboard",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(
     options,
@@ -27,7 +28,7 @@ export const useKeyboard = createHook<KeyboardProps, BoxHTMLProps>({
 
     const { keyboardProps } = useAriaKeyboard(props);
 
-    return mergeProps(htmlProps, keyboardProps);
+    return mergeProps(keyboardProps, htmlProps);
   },
 });
 

src/interactions/Press.ts

@@ -1,4 +1,3 @@
-import { INTERACTION_KEYS } from "./__keys";
 import { BoxHTMLProps, useBox } from "reakit";
 import { mergeProps } from "@react-aria/utils";
 import { createComponent, createHook } from "reakit-system";
@@ -7,15 +6,17 @@ import {
   usePress as useAriaPress,
 } from "@react-aria/interactions";
 
+import { INTERACTION_KEYS } from "./__keys";
+
 export const usePress = createHook<PressHookProps, BoxHTMLProps>({
   name: "Press",
+  compose: useBox,
   keys: INTERACTION_KEYS,
-  compose: [useBox],
 
   useProps(options, htmlProps) {
     const { pressProps } = useAriaPress(options);
 
-    return mergeProps(htmlProps, pressProps);
+    return mergeProps(pressProps, htmlProps);
   },
 });