feat: replace unstable_getPreferredChildOnFocusReceive prop with getP…

…referredChildOnFocus BREAKING CHANGE: `unstable_getPreferredChildOnFocusReceive` prop is removed from SunbeamProvider and Focusable components, `getPreferredChildOnFocus` is introduced instead
vovacodes · Sep 6, 2020 · d5a1138 · d5a1138
1 parent dc16272
commit d5a1138
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 18 deletions.
diff --git a/packages/react-sunbeam/src/focus/components/Focusable.spec.tsx b/packages/react-sunbeam/src/focus/components/Focusable.spec.tsx
@@ -295,4 +295,28 @@ describe("Focusable", () => {
         act(() => focusManager.moveRight())
         expect(focusManager.getFocusPath()).toEqual(["right"])
     })
+
+    describe("getPreferredChildOnFocus", () => {
+        it("selects which child to focus on when SunbeamProvider becomes focused", () => {
+            const focusManager = new FocusManager()
+
+            render(
+                <SunbeamProvider focusManager={focusManager}>
+                    <Focusable
+                        getPreferredChildOnFocus={({ focusableChildren }) => {
+                            return focusableChildren.get("middleChild")
+                        }}
+                        focusKey="leftParent"
+                    >
+                        <Focusable focusKey="topChild">Left Top</Focusable>
+                        <Focusable focusKey="middleChild">Left Middle</Focusable>
+                        <Focusable focusKey="bottomChild">Left Bottom</Focusable>
+                    </Focusable>
+                    <Focusable focusKey="right">Right</Focusable>
+                </SunbeamProvider>
+            )
+
+            expect(focusManager.getFocusPath()).toEqual(["leftParent", "middleChild"])
+        })
+    })
 })
diff --git a/packages/react-sunbeam/src/focus/components/Focusable.tsx b/packages/react-sunbeam/src/focus/components/Focusable.tsx
@@ -16,14 +16,14 @@ interface Props {
     lock?: Direction | Direction[]
     style?: React.CSSProperties
     className?: string
-    unstable_getPreferredChildOnFocusReceive?: (args: {
+    onKeyPress?: KeyPressListener
+    onFocus?: (event: FocusEvent) => void
+    onBlur?: (event: FocusEvent) => void
+    getPreferredChildOnFocus?: (args: {
         focusableChildren: FocusableNodesMap
         focusOrigin?: FocusableTreeNode
         direction?: Direction
     }) => FocusableTreeNode | undefined
-    onKeyPress?: KeyPressListener
-    onFocus?: (event: FocusEvent) => void
-    onBlur?: (event: FocusEvent) => void
 }
 
 /* eslint-disable @typescript-eslint/camelcase */
@@ -34,7 +34,7 @@ export function Focusable({
     focusKey,
     focusable = true,
     lock = [],
-    unstable_getPreferredChildOnFocusReceive,
+    getPreferredChildOnFocus,
     onKeyPress,
     onFocus,
     onBlur,
@@ -59,15 +59,15 @@ export function Focusable({
     const getChildren = useCallback(() => focusableChildrenRef.current, [])
     const getPreferredChild = useCallback(
         (focusOrigin?: FocusableTreeNode, direction?: Direction) => {
-            return unstable_getPreferredChildOnFocusReceive
-                ? unstable_getPreferredChildOnFocusReceive({
+            return getPreferredChildOnFocus
+                ? getPreferredChildOnFocus({
                       focusableChildren: focusableChildrenRef.current,
                       focusOrigin,
                       direction,
                   })
                 : getPreferredNode({ nodes: focusableChildrenRef.current, focusOrigin, direction })
         },
-        [unstable_getPreferredChildOnFocusReceive]
+        [getPreferredChildOnFocus]
     )
     const {
         addFocusableToMap,

diff --git a/packages/react-sunbeam/src/focus/components/SunbeamProvider/SunbeamProvider.spec.tsx b/packages/react-sunbeam/src/focus/components/SunbeamProvider/SunbeamProvider.spec.tsx
@@ -34,6 +34,26 @@ describe("<SunbeamProvider>", () => {
         spy.mockRestore()
     })
 
+    describe("getPreferredChildOnFocus", () => {
+        it("selects which child to focus on when SunbeamProvider becomes focused", () => {
+            const focusManager = new FocusManager()
+
+            render(
+                <SunbeamProvider
+                    focusManager={focusManager}
+                    getPreferredChildOnFocus={({ focusableChildren }) => {
+                        return focusableChildren.get("right")
+                    }}
+                >
+                    <Focusable>left</Focusable>
+                    <Focusable focusKey="right">right</Focusable>
+                </SunbeamProvider>
+            )
+
+            expect(focusManager.getFocusPath()).toEqual(["right"])
+        })
+    })
+
     describe("keyPressManager", () => {
         it("should allow to provide a custom instance of KeyPressManager", () => {
             function enterKeyHandler(event: KeyboardEvent) {

diff --git a/packages/react-sunbeam/src/focus/components/SunbeamProvider/index.tsx b/packages/react-sunbeam/src/focus/components/SunbeamProvider/index.tsx
@@ -20,14 +20,9 @@ type Props = {
     focusManager: FocusManager
     keyPressManager?: KeyPressManager
     children: React.ReactNode
-    // unstable_passFocusBetweenChildren?: (args: {
-    //     focusableChildren: FocusableNodesMap
-    //     focusOrigin: FocusableTreeNode
-    //     direction: Direction
-    // }) => FocusableTreeNode | "KEEP_FOCUS_UNCHANGED" | "CANDIDATE_NOT_FOUND"
     onFocusUpdate?: (event: { focusPath: FocusPath }) => void
     onKeyPress?: KeyPressListener
-    unstable_getPreferredChildOnFocusReceive?: (args: {
+    getPreferredChildOnFocus?: (args: {
         focusableChildren: FocusableNodesMap
         focusOrigin?: FocusableTreeNode
         direction?: Direction
@@ -41,7 +36,7 @@ export function SunbeamProvider({
     children,
     onFocusUpdate,
     onKeyPress,
-    unstable_getPreferredChildOnFocusReceive,
+    getPreferredChildOnFocus,
 }: Props) {
     const focusPath = useFocusPath(focusManager, onFocusUpdate)
     const wrapperRef = useRef<HTMLDivElement | null>(null)
@@ -61,15 +56,15 @@ export function SunbeamProvider({
     const getChildren = useCallback(() => focusableChildrenRef.current, [])
     const getPreferredChild = useCallback(
         (focusOrigin?: FocusableTreeNode, direction?: Direction) => {
-            return unstable_getPreferredChildOnFocusReceive
-                ? unstable_getPreferredChildOnFocusReceive({
+            return getPreferredChildOnFocus
+                ? getPreferredChildOnFocus({
                       focusableChildren: focusableChildrenRef.current,
                       focusOrigin,
                       direction,
                   })
                 : getPreferredNode({ nodes: focusableChildrenRef.current, focusOrigin, direction })
         },
-        [unstable_getPreferredChildOnFocusReceive]
+        [getPreferredChildOnFocus]
     )
     const path = useMemo(() => [], [])
     const focusableTreeRoot = useMemo(

diff --git a/packages/react-sunbeam/src/focus/hooks/useGeneratedFocusKey.ts b/packages/react-sunbeam/src/focus/hooks/useGeneratedFocusKey.ts
@@ -2,6 +2,7 @@ import { useState } from "react"
 import nanoid from "nanoid"
 
 export function useGeneratedFocusKey(): string {
+    // Using useState here to get a reliably-memoized value
     const [focusKey] = useState(() => `focusable:${nanoid()}`)
     return focusKey
 }