giggles 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -53,8 +53,9 @@ type RouterProps = {
     children: React__default.ReactNode;
     initialScreen: string;
     initialParams?: Record<string, unknown>;
+    restoreFocus?: boolean;
 };
-declare function Router({ children, initialScreen, initialParams }: RouterProps): react_jsx_runtime.JSX.Element;
+declare function Router({ children, initialScreen, initialParams, restoreFocus }: RouterProps): react_jsx_runtime.JSX.Element;
 
 type ScreenProps = {
     name: string;

package/dist/index.js

@@ -12,6 +12,7 @@ import { jsx } from "react/jsx-runtime";
 var FocusContext = createContext(null);
 var FocusProvider = ({ children }) => {
   const nodesRef = useRef(/* @__PURE__ */ new Map());
+  const pendingFocusFirstChildRef = useRef(/* @__PURE__ */ new Set());
   const [focusedId, setFocusedId] = useState(null);
   const [activeBranchNodes, setActiveBranchNodes] = useState(/* @__PURE__ */ new Set());
   const [activeBranchPath, setActiveBranchPath] = useState([]);
@@ -34,6 +35,18 @@ var FocusProvider = ({ children }) => {
       return id;
     });
   }, []);
+  const focusFirstChild = useCallback(
+    (parentId) => {
+      const nodes = nodesRef.current;
+      const parent = nodes.get(parentId);
+      if (parent && parent.childrenIds.length > 0) {
+        focusNode(parent.childrenIds[0]);
+      } else {
+        pendingFocusFirstChildRef.current.add(parentId);
+      }
+    },
+    [focusNode]
+  );
   const registerNode = useCallback(
     (id, parentId) => {
       const nodes = nodesRef.current;
@@ -46,7 +59,12 @@ var FocusProvider = ({ children }) => {
       if (parentId) {
         const parent = nodes.get(parentId);
         if (parent && !parent.childrenIds.includes(id)) {
+          const wasEmpty = parent.childrenIds.length === 0;
           parent.childrenIds.push(id);
+          if (wasEmpty && pendingFocusFirstChildRef.current.has(parentId)) {
+            pendingFocusFirstChildRef.current.delete(parentId);
+            focusNode(id);
+          }
         }
       }
       nodes.forEach((existingNode) => {
@@ -71,6 +89,7 @@ var FocusProvider = ({ children }) => {
       }
     }
     nodes.delete(id);
+    pendingFocusFirstChildRef.current.delete(id);
     setFocusedId((current) => {
       if (current !== id) return current;
       if (node.parentId) {
@@ -139,6 +158,7 @@ var FocusProvider = ({ children }) => {
         registerNode,
         unregisterNode,
         focusNode,
+        focusFirstChild,
         isFocused,
         getFocusedId,
         isInActiveBranch,
@@ -401,7 +421,7 @@ function GigglesProvider({ children }) {
 }
 
 // src/core/router/Router.tsx
-import React4, { useCallback as useCallback4, useReducer, useRef as useRef4 } from "react";
+import React4, { useCallback as useCallback4, useReducer, useRef as useRef5 } from "react";
 
 // src/core/router/Screen.tsx
 function Screen(_props) {
@@ -409,7 +429,7 @@ function Screen(_props) {
 }
 
 // src/core/router/ScreenEntry.tsx
-import { useMemo as useMemo2 } from "react";
+import React3, { useEffect as useEffect5, useId as useId2, useMemo as useMemo2, useRef as useRef4 } from "react";
 import { Box } from "ink";
 
 // src/core/router/NavigationContext.tsx
@@ -429,17 +449,44 @@ function ScreenEntry({
   entry,
   isTop,
   canGoBack,
+  restoreFocus,
   component: Component,
   push,
   pop,
   replace,
   reset
 }) {
+  const screenNodeId = useId2();
+  const parentId = React3.useContext(FocusNodeContext);
+  const { registerNode, unregisterNode, focusFirstChild, focusNode, getFocusedId } = useFocusContext();
+  const lastFocusedChildRef = useRef4(null);
+  const wasTopRef = useRef4(isTop);
+  useEffect5(() => {
+    registerNode(screenNodeId, parentId);
+    return () => {
+      unregisterNode(screenNodeId);
+    };
+  }, [screenNodeId, parentId, registerNode, unregisterNode]);
+  useEffect5(() => {
+    if (!wasTopRef.current && isTop) {
+      const saved = restoreFocus ? lastFocusedChildRef.current : null;
+      if (saved) {
+        focusNode(saved);
+      } else {
+        focusFirstChild(screenNodeId);
+      }
+    } else if (wasTopRef.current && !isTop) {
+      lastFocusedChildRef.current = getFocusedId();
+    } else if (isTop) {
+      focusFirstChild(screenNodeId);
+    }
+    wasTopRef.current = isTop;
+  }, [isTop, screenNodeId, restoreFocus, focusFirstChild, focusNode, getFocusedId]);
   const value = useMemo2(
     () => ({ currentRoute: entry, active: isTop, canGoBack, push, pop, replace, reset }),
     [entry, isTop, canGoBack, push, pop, replace, reset]
   );
-  return /* @__PURE__ */ jsx7(NavigationContext.Provider, { value, children: /* @__PURE__ */ jsx7(Box, { display: isTop ? "flex" : "none", children: /* @__PURE__ */ jsx7(Component, { ...entry.params }) }) });
+  return /* @__PURE__ */ jsx7(NavigationContext.Provider, { value, children: /* @__PURE__ */ jsx7(FocusNodeContext.Provider, { value: screenNodeId, children: /* @__PURE__ */ jsx7(Box, { display: isTop ? "flex" : "none", children: /* @__PURE__ */ jsx7(Component, { ...entry.params }) }) }) });
 }
 
 // src/core/router/Router.tsx
@@ -456,10 +503,10 @@ function routerReducer(stack, action) {
       return [action.route];
   }
 }
-function Router({ children, initialScreen, initialParams }) {
-  const screenId = useRef4(0);
+function Router({ children, initialScreen, initialParams, restoreFocus = true }) {
+  const screenId = useRef5(0);
   const routes = React4.Children.toArray(children).filter((child) => React4.isValidElement(child) && child.type === Screen).map((child) => child.props);
-  const screenNamesRef = useRef4(/* @__PURE__ */ new Set());
+  const screenNamesRef = useRef5(/* @__PURE__ */ new Set());
   screenNamesRef.current = new Set(routes.map((r) => r.name));
   const assertScreen = useCallback4((name) => {
     if (!screenNamesRef.current.has(name)) {
@@ -514,6 +561,7 @@ function Router({ children, initialScreen, initialParams }) {
         entry,
         isTop: i === stack.length - 1,
         canGoBack,
+        restoreFocus,
         component: Component,
         push,
         pop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",