feat: Mark Composite as stable

packages/reakit-system-bootstrap/src/Composite.ts

@@ -1,7 +1,7 @@
 import { css, cx } from "emotion";
 import {
-  unstable_CompositeItemHTMLProps as CompositeItemHTMLProps,
-  unstable_CompositeItemOptions as CompositeItemOptions,
+  CompositeItemHTMLProps,
+  CompositeItemOptions,
 } from "reakit/Composite/CompositeItem";
 import { useBoxProps as usePaletteBoxProps } from "reakit-system-palette/Box";
 import { BootstrapBoxOptions } from "./Box";

packages/reakit/src/Composite/Composite.ts

@@ -12,10 +12,7 @@ import { isSelfTarget } from "reakit-utils/isSelfTarget";
 import { useLiveRef } from "reakit-utils/useLiveRef";
 import { useTabbable, TabbableOptions, TabbableHTMLProps } from "../Tabbable";
 import { useBox } from "../Box/Box";
-import {
-  unstable_CompositeStateReturn,
-  unstable_useCompositeState,
-} from "./CompositeState";
+import { CompositeStateReturn, useCompositeState } from "./CompositeState";
 import { Item } from "./__utils/types";
 import { groupItems } from "./__utils/groupItems";
 import { flatten } from "./__utils/flatten";
@@ -25,9 +22,9 @@ import { getCurrentId } from "./__utils/getCurrentId";
 import { getNextActiveElementOnBlur } from "./__utils/getNextActiveElementOnBlur";
 import { findEnabledItemById } from "./__utils/findEnabledItemById";
 
-export type unstable_CompositeOptions = TabbableOptions &
+export type CompositeOptions = TabbableOptions &
   Pick<
-    Partial<unstable_CompositeStateReturn>,
+    Partial<CompositeStateReturn>,
     | "baseId"
     | "unstable_virtual"
     | "currentId"
@@ -37,14 +34,13 @@ export type unstable_CompositeOptions = TabbableOptions &
     | "groups"
   > &
   Pick<
-    unstable_CompositeStateReturn,
+    CompositeStateReturn,
     "items" | "setCurrentId" | "first" | "last" | "move"
   >;
 
-export type unstable_CompositeHTMLProps = TabbableHTMLProps;
+export type CompositeHTMLProps = TabbableHTMLProps;
 
-export type unstable_CompositeProps = unstable_CompositeOptions &
-  unstable_CompositeHTMLProps;
+export type CompositeProps = CompositeOptions & CompositeHTMLProps;
 
 const validCompositeRoles = [
   "combobox",
@@ -121,13 +117,10 @@ function isItem(items: Item[], element?: Element | EventTarget | null) {
   return items?.some((item) => !!element && item.ref.current === element);
 }
 
-export const unstable_useComposite = createHook<
-  unstable_CompositeOptions,
-  unstable_CompositeHTMLProps
->({
+export const useComposite = createHook<CompositeOptions, CompositeHTMLProps>({
   name: "Composite",
   compose: [useTabbable],
-  useState: unstable_useCompositeState,
+  useState: useCompositeState,
 
   useOptions(options) {
     return { ...options, currentId: getCurrentId(options) };
@@ -357,9 +350,9 @@ export const unstable_useComposite = createHook<
   },
 });
 
-export const unstable_Composite = createComponent({
+export const Composite = createComponent({
   as: "div",
-  useHook: unstable_useComposite,
+  useHook: useComposite,
   useCreateElement: (type, props, children) => {
     useWarning(
       !props.role || validCompositeRoles.indexOf(props.role) === -1,

packages/reakit/src/Composite/CompositeGroup.ts

@@ -9,33 +9,26 @@ import {
   unstable_IdOptions,
   unstable_IdHTMLProps,
 } from "../Id/Id";
-import {
-  unstable_CompositeStateReturn,
-  unstable_useCompositeState,
-} from "./CompositeState";
+import { CompositeStateReturn, useCompositeState } from "./CompositeState";
 import { findEnabledItemById } from "./__utils/findEnabledItemById";
 
-export type unstable_CompositeGroupOptions = GroupOptions &
+export type CompositeGroupOptions = GroupOptions &
   unstable_IdOptions &
-  Pick<unstable_CompositeStateReturn, "registerGroup" | "unregisterGroup"> &
-  Pick<
-    Partial<unstable_CompositeStateReturn>,
-    "currentId" | "unstable_moves" | "items"
-  >;
+  Pick<CompositeStateReturn, "registerGroup" | "unregisterGroup"> &
+  Pick<Partial<CompositeStateReturn>, "currentId" | "unstable_moves" | "items">;
 
-export type unstable_CompositeGroupHTMLProps = GroupHTMLProps &
-  unstable_IdHTMLProps;
+export type CompositeGroupHTMLProps = GroupHTMLProps & unstable_IdHTMLProps;
 
-export type unstable_CompositeGroupProps = unstable_CompositeGroupOptions &
-  unstable_CompositeGroupHTMLProps;
+export type CompositeGroupProps = CompositeGroupOptions &
+  CompositeGroupHTMLProps;
 
-export const unstable_useCompositeGroup = createHook<
-  unstable_CompositeGroupOptions,
-  unstable_CompositeGroupHTMLProps
+export const useCompositeGroup = createHook<
+  CompositeGroupOptions,
+  CompositeGroupHTMLProps
 >({
   name: "CompositeGroup",
   compose: [useGroup, unstable_useId],
-  useState: unstable_useCompositeState,
+  useState: useCompositeState,
 
   propsAreEqual(prev, next) {
     if (!next.id || prev.id !== next.id) {
@@ -80,7 +73,7 @@ export const unstable_useCompositeGroup = createHook<
   },
 });
 
-export const unstable_CompositeGroup = createComponent({
+export const CompositeGroup = createComponent({
   as: "div",
-  useHook: unstable_useCompositeGroup,
+  useHook: useCompositeGroup,
 });

packages/reakit/src/Composite/CompositeItem.ts

@@ -21,26 +21,23 @@ import {
   unstable_IdOptions,
   unstable_IdHTMLProps,
 } from "../Id/Id";
-import {
-  unstable_CompositeStateReturn,
-  unstable_useCompositeState,
-} from "./CompositeState";
+import { CompositeStateReturn, useCompositeState } from "./CompositeState";
 import { setTextFieldValue } from "./__utils/setTextFieldValue";
 import { getCurrentId } from "./__utils/getCurrentId";
 import { Item } from "./__utils/types";
 
-export type unstable_CompositeItemOptions = ClickableOptions &
+export type CompositeItemOptions = ClickableOptions &
   unstable_IdOptions &
   Pick<
-    Partial<unstable_CompositeStateReturn>,
+    Partial<CompositeStateReturn>,
     | "unstable_virtual"
     | "baseId"
     | "orientation"
     | "unstable_moves"
     | "unstable_hasActiveWidget"
   > &
   Pick<
-    unstable_CompositeStateReturn,
+    CompositeStateReturn,
     | "items"
     | "currentId"
     | "registerItem"
@@ -54,17 +51,15 @@ export type unstable_CompositeItemOptions = ClickableOptions &
     | "last"
   >;
 
-export type unstable_CompositeItemHTMLProps = ClickableHTMLProps &
-  unstable_IdHTMLProps;
+export type CompositeItemHTMLProps = ClickableHTMLProps & unstable_IdHTMLProps;
 
-export type unstable_CompositeItemProps = unstable_CompositeItemOptions &
-  unstable_CompositeItemHTMLProps;
+export type CompositeItemProps = CompositeItemOptions & CompositeItemHTMLProps;
 
 function getWidget(itemElement: Element) {
   return itemElement.querySelector<HTMLElement>("[data-composite-item-widget]");
 }
 
-function useItem(options: unstable_CompositeItemOptions) {
+function useItem(options: CompositeItemOptions) {
   return React.useMemo(
     () => options.items?.find((item) => options.id && item.id === options.id),
     [options.items, options.id]
@@ -81,13 +76,13 @@ function targetIsAnotherItem(event: React.SyntheticEvent, items: Item[]) {
   return false;
 }
 
-export const unstable_useCompositeItem = createHook<
-  unstable_CompositeItemOptions,
-  unstable_CompositeItemHTMLProps
+export const useCompositeItem = createHook<
+  CompositeItemOptions,
+  CompositeItemHTMLProps
 >({
   name: "CompositeItem",
   compose: [useClickable, unstable_useId],
-  useState: unstable_useCompositeState,
+  useState: useCompositeState,
 
   propsAreEqual(prev, next) {
     if (!next.id || prev.id !== next.id) {
@@ -356,8 +351,8 @@ export const unstable_useCompositeItem = createHook<
   },
 });
 
-export const unstable_CompositeItem = createComponent({
+export const CompositeItem = createComponent({
   as: "button",
   memo: true,
-  useHook: unstable_useCompositeItem,
+  useHook: useCompositeItem,
 });

packages/reakit/src/Composite/CompositeItemWidget.ts

@@ -6,16 +6,13 @@ import { getDocument } from "reakit-utils/getDocument";
 import { isSelfTarget } from "reakit-utils/isSelfTarget";
 import { useLiveRef } from "reakit-utils/useLiveRef";
 import { useBox, BoxOptions, BoxHTMLProps } from "../Box/Box";
-import {
-  unstable_CompositeStateReturn,
-  unstable_useCompositeState,
-} from "./CompositeState";
+import { CompositeStateReturn, useCompositeState } from "./CompositeState";
 import { setTextFieldValue } from "./__utils/setTextFieldValue";
 
 export type unstable_CompositeItemWidgetOptions = BoxOptions &
-  Pick<Partial<unstable_CompositeStateReturn>, "wrap"> &
+  Pick<Partial<CompositeStateReturn>, "wrap"> &
   Pick<
-    unstable_CompositeStateReturn,
+    CompositeStateReturn,
     "unstable_hasActiveWidget" | "unstable_setHasActiveWidget" | "currentId"
   >;
 
@@ -40,7 +37,7 @@ export const unstable_useCompositeItemWidget = createHook<
 >({
   name: "CompositeItemWidget",
   compose: useBox,
-  useState: unstable_useCompositeState,
+  useState: useCompositeState,
 
   useProps(
     options,