feat: Expose unstable_useSealedState util

.eslintrc

@@ -21,6 +21,7 @@
     "no-param-reassign": "off",
     "no-sparse-arrays": "off",
     "no-underscore-dangle": "off",
+    "no-unused-expressions": "off",
     "no-plusplus": "off",
     "no-bitwise": "off",
     "no-nested-ternary": "off",

babel.config.js

@@ -20,6 +20,7 @@ module.exports = {
   ],
   plugins: [
     "babel-plugin-dev-expression",
+    "babel-plugin-macros",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
     !prod && [

package.json

@@ -57,6 +57,7 @@
     "babel-eslint": "10.0.1",
     "babel-jest": "24.7.1",
     "babel-plugin-dev-expression": "0.2.1",
+    "babel-plugin-macros": "2.5.1",
     "babel-plugin-module-resolver": "3.2.0",
     "chalk": "2.4.2",
     "cross-spawn": "6.0.5",

packages/reakit-playground/src/__deps/reakit.ts

@@ -2,6 +2,7 @@
 // Automatically generated by ../../../../scripts/build/utils.js
 export default {
   "reakit": require("reakit"),
+  "reakit/utils/useSealedState": require("reakit/utils/useSealedState"),
   "reakit/utils/useId": require("reakit/utils/useId"),
   "reakit/utils/useCreateElement": require("reakit/utils/useCreateElement"),
   "reakit/utils/mergeProps": require("reakit/utils/mergeProps"),

packages/reakit/src/Checkbox/CheckboxState.ts

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { useSealedState, SealedInitialState } from "../__utils/useSealedState";
+import {
+  unstable_useSealedState,
+  unstable_SealedInitialState
+} from "../utils/useSealedState";
 import { Keys } from "../__utils/types";
 
 export type CheckboxState = {
@@ -26,9 +29,9 @@ export type CheckboxStateReturn = CheckboxState & CheckboxActions;
  * As simple as `React.useState(false)`
  */
 export function useCheckboxState(
-  initialState: SealedInitialState<CheckboxInitialState> = {}
+  initialState: unstable_SealedInitialState<CheckboxInitialState> = {}
 ): CheckboxStateReturn {
-  const { currentValue: initialCurrentValue = false } = useSealedState(
+  const { currentValue: initialCurrentValue = false } = unstable_useSealedState(
     initialState
   );
   const [currentValue, setValue] = React.useState(initialCurrentValue);

packages/reakit/src/Dialog/DialogState.ts

@@ -1,4 +1,4 @@
-import { SealedInitialState } from "../__utils/useSealedState";
+import { unstable_SealedInitialState } from "../utils/useSealedState";
 import {
   useHiddenState,
   HiddenState,
@@ -16,7 +16,7 @@ export type DialogInitialState = HiddenInitialState;
 export type DialogStateReturn = DialogState & DialogActions;
 
 export function useDialogState(
-  initialState: SealedInitialState<DialogInitialState> = {}
+  initialState: unstable_SealedInitialState<DialogInitialState> = {}
 ): DialogStateReturn {
   return useHiddenState(initialState);
 }

packages/reakit/src/Form/FormState.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { ArrayValue, Keys } from "../__utils/types";
 import { useUpdateEffect } from "../__utils/useUpdateEffect";
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import { unstable_useId } from "../utils/useId";
 import { isPromise } from "../__utils/isPromise";
 import { isEmpty } from "../__utils/isEmpty";
@@ -275,7 +278,7 @@ function reducer<V>(
 }
 
 export function unstable_useFormState<V = Record<any, any>>(
-  initialState: SealedInitialState<unstable_FormInitialState<V>> = {}
+  initialState: unstable_SealedInitialState<unstable_FormInitialState<V>> = {}
 ): unstable_FormStateReturn<V> {
   const {
     baseId = unstable_useId("form-"),
@@ -286,7 +289,7 @@ export function unstable_useFormState<V = Record<any, any>>(
     resetOnUnmount = true,
     onValidate,
     onSubmit
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const [{ initialValues: _, ...state }, dispatch] = React.useReducer(reducer, {
     baseId,

packages/reakit/src/Hidden/HiddenState.ts

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { useSealedState, SealedInitialState } from "../__utils/useSealedState";
+import {
+  unstable_useSealedState,
+  unstable_SealedInitialState
+} from "../utils/useSealedState";
 import { unstable_useId } from "../utils/useId";
 import { Keys } from "../__utils/types";
 
@@ -37,12 +40,12 @@ export type HiddenInitialState = Partial<
 export type HiddenStateReturn = HiddenState & HiddenActions;
 
 export function useHiddenState(
-  initialState: SealedInitialState<HiddenInitialState> = {}
+  initialState: unstable_SealedInitialState<HiddenInitialState> = {}
 ): HiddenStateReturn {
   const {
     unstable_hiddenId: hiddenId = unstable_useId("hidden-"),
     visible: sealedVisible = false
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const [visible, setVisible] = React.useState(sealedVisible);
 

packages/reakit/src/Menu/MenuState.ts

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import {
   PopoverState,
   PopoverActions,
@@ -38,14 +41,14 @@ export type MenuInitialState = RoverInitialState &
 export type MenuStateReturn = MenuState & MenuActions;
 
 export function useMenuState(
-  initialState: SealedInitialState<MenuInitialState> = {}
+  initialState: unstable_SealedInitialState<MenuInitialState> = {}
 ): MenuStateReturn {
   const {
     orientation = "vertical",
     unstable_gutter: initialGutter = 0,
     unstable_values: initialValues = {},
     ...sealed
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const [values, setValues] = React.useState(initialValues);
   const parent = React.useContext(MenuContext);

packages/reakit/src/Menu/README.md

@@ -46,7 +46,7 @@ const Menu1 = React.forwardRef((props, ref) => {
 function Example() {
   const menu = useMenuState();
   return (
-    <div style={{ margin: 150 }}>
+    <div>
       <MenuDisclosure {...menu}>disclosure</MenuDisclosure>
       <Menu aria-label="menu" {...menu}>
         <MenuItem {...menu}>Item 1</MenuItem>
@@ -125,7 +125,7 @@ const Menu2 = React.forwardRef((props, ref) => {
 function Example() {
   const menu = useMenuState({ orientation: "horizontal" });
   return (
-    <div style={{ margin: 150 }}>
+    <div>
       <StaticMenu aria-label="menu" {...menu}>
         <MenuItem {...menu}>Abc</MenuItem>
         <MenuItem {...menu}>Def</MenuItem>

packages/reakit/src/Popover/PopoverState.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
 import Popper from "popper.js";
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import {
   DialogState,
   DialogActions,
@@ -88,15 +91,15 @@ export type PopoverInitialState = DialogInitialState &
 export type PopoverStateReturn = PopoverState & PopoverActions;
 
 export function usePopoverState(
-  initialState: SealedInitialState<PopoverInitialState> = {}
+  initialState: unstable_SealedInitialState<PopoverInitialState> = {}
 ): PopoverStateReturn {
   const {
     placement: sealedPlacement = "bottom",
     unstable_flip: flip = true,
     unstable_shift: shift = true,
     unstable_gutter: gutter = 12,
     ...sealed
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const popper = React.useRef<Popper | null>(null);
   const referenceRef = React.useRef<HTMLElement>(null);

packages/reakit/src/Radio/RadioState.ts

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { useSealedState, SealedInitialState } from "../__utils/useSealedState";
+import {
+  unstable_useSealedState,
+  unstable_SealedInitialState
+} from "../utils/useSealedState";
 import {
   RoverState,
   RoverActions,
@@ -28,13 +31,13 @@ export type RadioInitialState = RoverInitialState &
 export type RadioStateReturn = RadioState & RadioActions;
 
 export function useRadioState(
-  initialState: SealedInitialState<RadioInitialState> = {}
+  initialState: unstable_SealedInitialState<RadioInitialState> = {}
 ): RadioStateReturn {
   const {
     currentValue: initialCurrentValue,
     loop: loop = true,
     ...sealed
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const [currentValue, setValue] = React.useState(initialCurrentValue);
 

packages/reakit/src/Rover/RoverState.ts

@@ -1,7 +1,10 @@
 // Credits: https://github.com/stevejay/react-roving-tabindex
 import * as React from "react";
 import { warning } from "../__utils/warning";
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import { Keys } from "../__utils/types";
 
 type Stop = {
@@ -229,9 +232,9 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
 }
 
 export function useRoverState(
-  initialState: SealedInitialState<RoverInitialState> = {}
+  initialState: unstable_SealedInitialState<RoverInitialState> = {}
 ): RoverStateReturn {
-  const { currentId = null, loop = false, ...sealed } = useSealedState(
+  const { currentId = null, loop = false, ...sealed } = unstable_useSealedState(
     initialState
   );
   const [state, dispatch] = React.useReducer(reducer, {

packages/reakit/src/Tab/TabState.ts

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import { unstable_useId } from "../utils/useId";
 import { useRoverState, RoverState, RoverActions } from "../Rover/RoverState";
 import { Keys } from "../__utils/types";
@@ -32,15 +35,15 @@ export type TabInitialState = Partial<TabState>;
 export type TabStateReturn = TabState & TabActions;
 
 export function useTabState(
-  initialState: SealedInitialState<TabInitialState> = {}
+  initialState: unstable_SealedInitialState<TabInitialState> = {}
 ): TabStateReturn {
   const {
     unstable_baseId: baseId = unstable_useId("tab-"),
     selectedId: sealedSelectedId = null,
     loop = true,
     manual = false,
     ...sealed
-  } = useSealedState(initialState);
+  } = unstable_useSealedState(initialState);
 
   const [selectedId, select] = React.useState(sealedSelectedId);
   const rover = useRoverState({

packages/reakit/src/Toolbar/ToolbarState.ts

@@ -1,4 +1,7 @@
-import { SealedInitialState, useSealedState } from "../__utils/useSealedState";
+import {
+  unstable_SealedInitialState,
+  unstable_useSealedState
+} from "../utils/useSealedState";
 import {
   useRoverState,
   RoverState,
@@ -16,9 +19,9 @@ export type ToolbarInitialState = RoverInitialState;
 export type ToolbarStateReturn = ToolbarState & ToolbarActions;
 
 export function useToolbarState(
-  initialState: SealedInitialState<ToolbarInitialState> = {}
+  initialState: unstable_SealedInitialState<ToolbarInitialState> = {}
 ): ToolbarStateReturn {
-  const { orientation = "horizontal", ...sealed } = useSealedState(
+  const { orientation = "horizontal", ...sealed } = unstable_useSealedState(
     initialState
   );
   return useRoverState({ orientation, ...sealed });

packages/reakit/src/Tooltip/TooltipState.ts

@@ -1,4 +1,7 @@
-import { useSealedState, SealedInitialState } from "../__utils/useSealedState";
+import {
+  unstable_useSealedState,
+  unstable_SealedInitialState
+} from "../utils/useSealedState";
 import {
   PopoverState,
   PopoverActions,
@@ -16,9 +19,11 @@ export type TooltipInitialState = PopoverInitialState;
 export type TooltipStateReturn = TooltipState & TooltipActions;
 
 export function useTooltipState(
-  initialState: SealedInitialState<TooltipInitialState> = {}
+  initialState: unstable_SealedInitialState<TooltipInitialState> = {}
 ): TooltipStateReturn {
-  const { placement = "top", ...sealed } = useSealedState(initialState);
+  const { placement = "top", ...sealed } = unstable_useSealedState(
+    initialState
+  );
   return usePopoverState({ ...sealed, placement });
 }
 

packages/reakit/src/utils/Provider.tsx

@@ -12,12 +12,12 @@ export type ProviderProps = unstable_IdProviderProps &
   unstable_SystemProviderProps;
 
 export function Provider({
-  prefix,
+  unstable_prefix: prefix,
   unstable_system: system,
   children
 }: ProviderProps) {
   return (
-    <IdProvider prefix={prefix}>
+    <IdProvider unstable_prefix={prefix}>
       <SystemProvider unstable_system={system}>{children}</SystemProvider>
     </IdProvider>
   );

packages/reakit/src/utils/__tests__/useSealedState-test.ts

@@ -0,0 +1,9 @@
+import { renderHook } from "react-hooks-testing-library";
+import { unstable_useSealedState } from "../useSealedState";
+
+test("useSealedState", () => {
+  const { result } = renderHook(() =>
+    unstable_useSealedState({ a: "a", b: "b" })
+  );
+  expect(result.current).toEqual({ a: "a", b: "b" });
+});

packages/reakit/src/utils/index.ts

@@ -1,5 +1,2 @@
-export * from "./createComponent";
 export * from "./mergeProps";
 export * from "./Provider";
-export * from "./useCreateElement";
-export * from "./useId";

packages/reakit/src/utils/useId.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 
 export type unstable_IdProviderProps = {
   children: React.ReactNode;
-  prefix?: string;
+  unstable_prefix?: string;
 };
 
 const defaultPrefix = "id-";
@@ -17,7 +17,7 @@ const Context = React.createContext(generateId);
 
 export function unstable_IdProvider({
   children,
-  prefix = ""
+  unstable_prefix: prefix = ""
 }: unstable_IdProviderProps) {
   const count = React.useRef(0);
   const genId = React.useMemo(

packages/reakit/src/utils/useSealedState.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export type unstable_SealedInitialState<T> = T | (() => T);
+
+export function unstable_useSealedState<T>(
+  initialState: unstable_SealedInitialState<T>
+) {
+  const [sealed] = React.useState(initialState);
+  return sealed;
+}