feat: Remove unstable_ prefix from currentId prop

ariakit · Apr 12, 2019 · 003d1ad · 003d1ad
1 parent 965dcb7
commit 003d1ad
Show file tree

Hide file tree

Showing 20 changed files with 485 additions and 485 deletions.
diff --git a/packages/reakit/src/Form/FormRadioGroup.tsx b/packages/reakit/src/Form/FormRadioGroup.tsx
@@ -54,7 +54,7 @@ export const unstable_FormRadioGroup = (unstable_createComponent({
     const rover = useRoverState({ unstable_loop: true });
     const value = React.useMemo(() => rover, [
       rover.unstable_stops,
-      rover.unstable_currentId,
+      rover.currentId,
       rover.unstable_pastId
     ]);
     return (

diff --git a/packages/reakit/src/Menu/README.md b/packages/reakit/src/Menu/README.md
@@ -148,7 +148,7 @@ function Example() {
 | Name | Type | Description |
 |------|------|-------------|
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_loop</code>&nbsp;⚠️</strong> | <code>boolean</code> | If enabled, the next item after the last one will be the first one. |
 | <strong><code>visible</code>&nbsp;</strong> | <code>boolean</code> | Whether it's visible or not. |
 | <strong><code>placement</code>&nbsp;</strong> | <code title="&#34;auto-start&#34; &#124; &#34;auto&#34; &#124; &#34;auto-end&#34; &#124; &#34;top-start&#34; &#124; &#34;top&#34; &#124; &#34;top-end&#34; &#124; &#34;right-start&#34; &#124; &#34;right&#34; &#124; &#34;right-end&#34; &#124; &#34;bottom-end&#34; &#124; &#34;bottom&#34; &#124; &#34;bottom-start&#34; &#124; &#34;left-end&#34; &#124; &#34;left&#34; &#124; &#34;left-start&#34;">&#34;auto&#x2011;start&#34;&nbsp;&#124;&nbsp;&#34;auto&#34;&nbsp;&#124;&nbsp;&#34;au...</code> | Actual `placement`. |
@@ -200,7 +200,7 @@ No props to show
 | <strong><code>disabled</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | Same as the HTML attribute. |
 | <strong><code>focusable</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | When an element is `disabled`, it may still be `focusable`. In this case, only `aria-disabled` will be set. |
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_stops</code>&nbsp;⚠️</strong> | <code>Stop[]</code> | A list of element refs and IDs of the roving items. |
 | <strong><code>unstable_move</code>&nbsp;⚠️</strong> | <code>(id:&nbsp;string&nbsp;&#124;&nbsp;null)&nbsp;=&#62;&nbsp;void</code> | Moves focus onto a given element ID. |
 | <strong><code>unstable_register</code>&nbsp;⚠️</strong> | <code title="(id: string, ref: RefObject&#60;HTMLElement&#62;) =&#62; void">(id:&nbsp;string,&nbsp;ref:&nbsp;RefObject...</code> | Registers the element ID and ref in the roving tab index list. |
@@ -224,7 +224,7 @@ No props to show
 | <strong><code>value</code>&nbsp;</strong> | <code>any</code> | Checkbox's value is going to be used when multiple checkboxes share the same state. Checking a checkbox with value will add it to the state array. |
 | <strong><code>checked</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | Checkbox's checked state. If present, it's used instead of currentValue. |
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_stops</code>&nbsp;⚠️</strong> | <code>Stop[]</code> | A list of element refs and IDs of the roving items. |
 | <strong><code>unstable_move</code>&nbsp;⚠️</strong> | <code>(id:&nbsp;string&nbsp;&#124;&nbsp;null)&nbsp;=&#62;&nbsp;void</code> | Moves focus onto a given element ID. |
 | <strong><code>unstable_register</code>&nbsp;⚠️</strong> | <code title="(id: string, ref: RefObject&#60;HTMLElement&#62;) =&#62; void">(id:&nbsp;string,&nbsp;ref:&nbsp;RefObject...</code> | Registers the element ID and ref in the roving tab index list. |
@@ -247,7 +247,7 @@ No props to show
 | <strong><code>disabled</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | Same as the HTML attribute. |
 | <strong><code>focusable</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | When an element is `disabled`, it may still be `focusable`. In this case, only `aria-disabled` will be set. |
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_stops</code>&nbsp;⚠️</strong> | <code>Stop[]</code> | A list of element refs and IDs of the roving items. |
 | <strong><code>unstable_move</code>&nbsp;⚠️</strong> | <code>(id:&nbsp;string&nbsp;&#124;&nbsp;null)&nbsp;=&#62;&nbsp;void</code> | Moves focus onto a given element ID. |
 | <strong><code>unstable_register</code>&nbsp;⚠️</strong> | <code title="(id: string, ref: RefObject&#60;HTMLElement&#62;) =&#62; void">(id:&nbsp;string,&nbsp;ref:&nbsp;RefObject...</code> | Registers the element ID and ref in the roving tab index list. |

diff --git a/packages/reakit/src/Menu/__tests__/MenuItem-test.tsx b/packages/reakit/src/Menu/__tests__/MenuItem-test.tsx
@@ -5,7 +5,7 @@ import { MenuItem } from "../MenuItem";
 const props: Parameters<typeof MenuItem>[0] = {
   stopId: "item",
   unstable_stops: [],
-  unstable_currentId: null,
+  currentId: null,
   unstable_register: jest.fn(),
   unstable_unregister: jest.fn(),
   unstable_move: jest.fn(),

diff --git a/packages/reakit/src/Menu/__tests__/MenuItemCheckbox-test.tsx b/packages/reakit/src/Menu/__tests__/MenuItemCheckbox-test.tsx
@@ -6,7 +6,7 @@ const props: Parameters<typeof MenuItemCheckbox>[0] = {
   name: "checkbox",
   stopId: "item",
   unstable_stops: [],
-  unstable_currentId: null,
+  currentId: null,
   unstable_pastId: null,
   unstable_register: jest.fn(),
   unstable_unregister: jest.fn(),

diff --git a/packages/reakit/src/Menu/__tests__/MenuItemRadio-test.tsx b/packages/reakit/src/Menu/__tests__/MenuItemRadio-test.tsx
@@ -7,7 +7,7 @@ const props: Parameters<typeof MenuItemRadio>[0] = {
   value: "radio",
   stopId: "item",
   unstable_stops: [],
-  unstable_currentId: null,
+  currentId: null,
   unstable_pastId: null,
   unstable_register: jest.fn(),
   unstable_unregister: jest.fn(),

diff --git a/packages/reakit/src/Radio/README.md b/packages/reakit/src/Radio/README.md
@@ -36,7 +36,7 @@ function Example() {
 | Name | Type | Description |
 |------|------|-------------|
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_loop</code>&nbsp;⚠️</strong> | <code>boolean</code> | If enabled, the next item after the last one will be the first one. |
 | <strong><code>currentValue</code>&nbsp;</strong> | <code>any</code> | The `value` attribute of the current checked radio. |
 
@@ -47,7 +47,7 @@ function Example() {
 | <strong><code>disabled</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | Same as the HTML attribute. |
 | <strong><code>focusable</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | When an element is `disabled`, it may still be `focusable`. In this case, only `aria-disabled` will be set. |
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_stops</code>&nbsp;⚠️</strong> | <code>Stop[]</code> | A list of element refs and IDs of the roving items. |
 | <strong><code>unstable_register</code>&nbsp;⚠️</strong> | <code title="(id: string, ref: RefObject&#60;HTMLElement&#62;) =&#62; void">(id:&nbsp;string,&nbsp;ref:&nbsp;RefObject...</code> | Registers the element ID and ref in the roving tab index list. |
 | <strong><code>unstable_unregister</code>&nbsp;⚠️</strong> | <code>(id:&nbsp;string)&nbsp;=&#62;&nbsp;void</code> | Unregisters the roving item. |

diff --git a/packages/reakit/src/Radio/__tests__/Radio-test.tsx b/packages/reakit/src/Radio/__tests__/Radio-test.tsx
@@ -6,7 +6,7 @@ const props: Parameters<typeof Radio>[0] = {
   value: "radio",
   stopId: "radio",
   unstable_stops: [],
-  unstable_currentId: null,
+  currentId: null,
   unstable_pastId: null,
   unstable_register: jest.fn(),
   unstable_unregister: jest.fn(),

diff --git a/packages/reakit/src/Radio/__tests__/RadioState-test.ts b/packages/reakit/src/Radio/__tests__/RadioState-test.ts
@@ -7,12 +7,12 @@ expect.addSnapshotSerializer(jestSerializerStripFunctions);
 test("initial state", () => {
   const { result } = renderHook(() => useRadioState());
   expect(result.current).toMatchInlineSnapshot(`
-Object {
-  "currentValue": undefined,
-  "unstable_currentId": null,
-  "unstable_loop": true,
-  "unstable_pastId": null,
-  "unstable_stops": Array [],
-}
-`);
+    Object {
+      "currentId": null,
+      "currentValue": undefined,
+      "unstable_loop": true,
+      "unstable_pastId": null,
+      "unstable_stops": Array [],
+    }
+  `);
 });
diff --git a/packages/reakit/src/Rover/README.md b/packages/reakit/src/Rover/README.md
@@ -10,7 +10,7 @@ path: /docs/rover
 import { useRoverState, Rover } from "reakit";
 
 function Example() {
-  const roving = useRoverState({ unstable_currentId: "test" });
+  const roving = useRoverState({ currentId: "test" });
   return (
     <>
       <Rover {...roving}>Item 1</Rover>
@@ -34,7 +34,7 @@ import React from "react";
 import { useRoverState, Rover } from "reakit";
 
 function Example() {
-  const roving = useRoverState({ unstable_currentId: "test" });
+  const roving = useRoverState({ currentId: "test" });
   const [visible, setVisible] = React.useState(false);
   return (
     <>
@@ -65,7 +65,7 @@ function Example() {
 | Name | Type | Description |
 |------|------|-------------|
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_loop</code>&nbsp;⚠️</strong> | <code>boolean</code> | If enabled, the next item after the last one will be the first one. |
 
 ### `Rover`
@@ -75,7 +75,7 @@ function Example() {
 | <strong><code>disabled</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | Same as the HTML attribute. |
 | <strong><code>focusable</code>&nbsp;</strong> | <code>boolean&nbsp;&#124;&nbsp;undefined</code> | When an element is `disabled`, it may still be `focusable`. In this case, only `aria-disabled` will be set. |
 | <strong><code>orientation</code>&nbsp;</strong> | <code title="&#34;horizontal&#34; &#124; &#34;vertical&#34; &#124; undefined">&#34;horizontal&#34;&nbsp;&#124;&nbsp;&#34;vertical&#34;&nbsp;&#124;...</code> | Defines the orientation of the rover list. |
-| <strong><code>unstable_currentId</code>&nbsp;⚠️</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
+| <strong><code>currentId</code>&nbsp;</strong> | <code>string&nbsp;&#124;&nbsp;null</code> | The current focused element ID. |
 | <strong><code>unstable_stops</code>&nbsp;⚠️</strong> | <code>Stop[]</code> | A list of element refs and IDs of the roving items. |
 | <strong><code>unstable_register</code>&nbsp;⚠️</strong> | <code title="(id: string, ref: RefObject&#60;HTMLElement&#62;) =&#62; void">(id:&nbsp;string,&nbsp;ref:&nbsp;RefObject...</code> | Registers the element ID and ref in the roving tab index list. |
 | <strong><code>unstable_unregister</code>&nbsp;⚠️</strong> | <code>(id:&nbsp;string)&nbsp;=&#62;&nbsp;void</code> | Unregisters the roving item. |

diff --git a/packages/reakit/src/Rover/Rover.ts b/packages/reakit/src/Rover/Rover.ts
@@ -18,7 +18,7 @@ export type RoverOptions = TabbableOptions &
   Pick<
     RoverStateReturn,
     | "unstable_stops"
-    | "unstable_currentId"
+    | "currentId"
     | "unstable_register"
     | "unstable_unregister"
     | "unstable_move"
@@ -46,8 +46,8 @@ export function useRover(
   const stopId = options.stopId || htmlProps.id || id;
 
   const reallyDisabled = options.disabled && !options.focusable;
-  const noFocused = options.unstable_currentId == null;
-  const focused = options.unstable_currentId === stopId;
+  const noFocused = options.currentId == null;
+  const focused = options.currentId === stopId;
   const isFirst =
     options.unstable_stops[0] && options.unstable_stops[0].id === stopId;
   const shouldTabIndex = focused || (isFirst && noFocused);

diff --git a/packages/reakit/src/Rover/RoverState.ts b/packages/reakit/src/Rover/RoverState.ts
@@ -21,7 +21,7 @@ export type RoverState = {
   /**
    * The current focused element ID.
    */
-  unstable_currentId: Stop["id"] | null;
+  currentId: Stop["id"] | null;
   /**
    * The last focused element ID.
    * @private
@@ -75,7 +75,7 @@ export type RoverActions = {
 };
 
 export type RoverInitialState = Partial<
-  Pick<RoverState, "orientation" | "unstable_currentId" | "unstable_loop">
+  Pick<RoverState, "orientation" | "currentId" | "unstable_loop">
 >;
 
 export type RoverStateReturn = RoverState & RoverActions;
@@ -97,7 +97,7 @@ type RoverAction =
 function reducer(state: RoverState, action: RoverAction): RoverState {
   const {
     unstable_stops: stops,
-    unstable_currentId: currentId,
+    currentId,
     unstable_pastId: pastId,
     unstable_loop: loop
   } = state;
@@ -153,7 +153,7 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
         ...state,
         unstable_stops: nextStops,
         unstable_pastId: pastId && pastId === id ? null : pastId,
-        unstable_currentId: currentId && currentId === id ? null : currentId
+        currentId: currentId && currentId === id ? null : currentId
       };
     }
     case "move": {
@@ -162,7 +162,7 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
       if (id === null) {
         return {
           ...state,
-          unstable_currentId: null,
+          currentId: null,
           unstable_pastId: currentId
         };
       }
@@ -175,7 +175,7 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
 
       return {
         ...state,
-        unstable_currentId: stops[index].id,
+        currentId: stops[index].id,
         unstable_pastId: currentId
       };
     }
@@ -207,7 +207,7 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
       );
       return {
         ...state,
-        unstable_currentId: nextState.unstable_currentId,
+        currentId: nextState.currentId,
         unstable_pastId: nextState.unstable_pastId
       };
     }
@@ -222,7 +222,7 @@ function reducer(state: RoverState, action: RoverAction): RoverState {
     case "reset": {
       return {
         ...state,
-        unstable_currentId: null,
+        currentId: null,
         unstable_pastId: null
       };
     }
@@ -237,14 +237,14 @@ export function useRoverState(
   initialState: SealedInitialState<RoverInitialState> = {}
 ): RoverStateReturn {
   const {
-    unstable_currentId: currentId = null,
+    currentId: currentId = null,
     unstable_loop: loop = false,
     ...sealed
   } = useSealedState(initialState);
   const [state, dispatch] = React.useReducer(reducer, {
     ...sealed,
     unstable_stops: [],
-    unstable_currentId: currentId,
+    currentId,
     unstable_pastId: null,
     unstable_loop: loop
   });
@@ -278,7 +278,7 @@ export function useRoverState(
 const keys: Keys<RoverStateReturn> = [
   "orientation",
   "unstable_stops",
-  "unstable_currentId",
+  "currentId",
   "unstable_pastId",
   "unstable_loop",
   "unstable_register",

diff --git a/packages/reakit/src/Rover/__tests__/Rover-test.tsx b/packages/reakit/src/Rover/__tests__/Rover-test.tsx
@@ -5,7 +5,7 @@ import { Rover } from "../Rover";
 const props: Parameters<typeof Rover>[0] = {
   stopId: "rover",
   unstable_stops: [],
-  unstable_currentId: null,
+  currentId: null,
   unstable_pastId: null,
   unstable_register: jest.fn(),
   unstable_unregister: jest.fn(),
@@ -34,7 +34,7 @@ test("render", () => {
 
 test("render currentId equals to stopId", () => {
   const { baseElement } = render(
-    <Rover {...props} unstable_currentId="rover">
+    <Rover {...props} currentId="rover">
       rover
     </Rover>
   );