@coinbase/ui-mobile-playground 4.5.7 → 4.5.8

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 4.5.8 (12/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Chore: QOL improvements for searching/navigating example component routes. [[#199](https://github.com/coinbase/cds/pull/199)]
+
 ## 4.5.7 (11/19/2025 PST)
 
 #### 🐞 Fixes

package/dts/components/ExamplesListScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplesListScreen.d.ts","sourceRoot":"","sources":["../../src/components/ExamplesListScreen.tsx"],"names":[],"mappings":"AAeA,wBAAgB,kBAAkB,4CAkDjC"}
+{"version":3,"file":"ExamplesListScreen.d.ts","sourceRoot":"","sources":["../../src/components/ExamplesListScreen.tsx"],"names":[],"mappings":"AAeA,wBAAgB,kBAAkB,4CAgDjC"}

package/dts/components/useExampleNavigatorProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExampleNavigatorProps.d.ts","sourceRoot":"","sources":["../../src/components/useExampleNavigatorProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAUnE,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAKxF,KAAK,+BAA+B,GAAG;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACpE,CAAC;AASF,wBAAgB,wBAAwB,CAAC,EAAE,cAAc,EAAE,EAAE,+BAA+B;;;EAsH3F"}
+{"version":3,"file":"useExampleNavigatorProps.d.ts","sourceRoot":"","sources":["../../src/components/useExampleNavigatorProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAUnE,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAKxF,KAAK,+BAA+B,GAAG;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACpE,CAAC;AAIF,wBAAgB,wBAAwB,CAAC,EAAE,cAAc,EAAE,EAAE,+BAA+B;;;EA+G3F"}

package/esm/components/ExamplesListScreen.js

@@ -4,7 +4,7 @@ import { ListCell } from '@coinbase/cds-mobile/cells/ListCell';
 import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import includes from 'lodash/includes';
-import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext } from './ExamplesSearchProvider';
 import { keyToRouteName } from './keyToRouteName';
 import { initialRouteKey, searchRouteKey } from './staticRoutes';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +14,6 @@ const innerSpacingConfig = {
 export function ExamplesListScreen() {
   var _routeKeys, _useRoute$params;
   const searchFilter = useContext(SearchFilterContext);
-  const setFilter = useContext(SetSearchFilterContext);
 
   // React Navigation Route Param typing is not clean because our routes are dynamic
   const routeKeys = (_routeKeys = (_useRoute$params = useRoute().params) === null || _useRoute$params === void 0 ? void 0 : _useRoute$params.routeKeys) !== null && _routeKeys !== void 0 ? _routeKeys : [];
@@ -26,7 +25,6 @@ export function ExamplesListScreen() {
       item
     } = _ref;
     const handlePress = () => {
-      setFilter('');
       // typing not clean due to dynamic routes
       navigate(keyToRouteName(item));
     };
@@ -37,7 +35,7 @@ export function ExamplesListScreen() {
       onPress: handlePress,
       title: item
     });
-  }, [navigate, setFilter]);
+  }, [navigate]);
   const data = [...routeKeys, 'IconSheet'].sort().filter(key => key !== initialRouteKey && key !== searchRouteKey).filter(key => {
     if (searchFilter !== '') {
       return includes(key.toLowerCase(), searchFilter.toLowerCase());

package/esm/components/useExampleNavigatorProps.js

@@ -9,13 +9,9 @@ import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { HStack } from '@coinbase/cds-mobile/layout/HStack';
 import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
 import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
-import { SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
 import { initialRouteName, searchRouteName } from './staticRoutes';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const invisiblePressableStyle = {
-  width: 40,
-  height: 40
-};
 const iconButtonHeight = interactableHeight.regular;
 export function useExampleNavigatorProps(_ref) {
   let {
@@ -26,6 +22,7 @@ export function useExampleNavigatorProps(_ref) {
     top
   } = useSafeAreaInsets();
   const [headerSize, onLayout] = useLayout();
+  const searchFilter = useContext(SearchFilterContext);
   const setFilter = useContext(SetSearchFilterContext);
   const style = useMemo(() => ({
     marginTop: top
@@ -35,35 +32,21 @@ export function useExampleNavigatorProps(_ref) {
       let {
         navigation,
         route,
-        options,
-        progress,
-        styleInterpolator
+        options
       } = _ref2;
       const isFocused = navigation.isFocused();
       const canGoBack = navigation.canGoBack();
       const goBack = () => {
         navigation.goBack();
+      };
+      const goBackFromSearch = () => {
         setFilter('');
+        navigation.goBack();
       };
       const goToSearch = () => navigation.navigate(searchRouteName);
       const routeName = route.name;
       const titleForScene = options.title;
       const isSearch = routeName === searchRouteName;
-      const {
-        titleStyle
-      } = styleInterpolator({
-        current: {
-          progress: progress.current
-        },
-        next: progress.next && {
-          progress: progress.next
-        },
-        layouts: {
-          header: headerSize,
-          title: headerSize,
-          screen: headerSize
-        }
-      });
       const showBackButton = isFocused && canGoBack && !isSearch;
       const showSearch = routeName === initialRouteName;
       const iconButtonPlaceholder = /*#__PURE__*/_jsx(Box, {
@@ -118,25 +101,23 @@ export function useExampleNavigatorProps(_ref) {
               start: /*#__PURE__*/_jsx(IconButton, {
                 transparent: true,
                 name: "backArrow",
-                onPress: goBack
-              })
+                onPress: goBackFromSearch
+              }),
+              value: searchFilter
             }) : /*#__PURE__*/_jsx(TextHeadline, {
-              animated: true,
               align: "center",
-              style: titleStyle,
               children: titleForScene
             })
           }), /*#__PURE__*/_jsx(Spacer, {}), rightHeaderButton]
         })
       });
     };
-  }, [headerSize, onLayout, setFilter, style, theme.activeColorScheme, setColorScheme]);
+  }, [onLayout, searchFilter, setFilter, style, theme.activeColorScheme, setColorScheme]);
   return useMemo(() => {
     const screenOptions = {
       headerBackAllowFontScaling: false,
       headerBackTitleVisible: false,
       headerTitleAllowFontScaling: false,
-      headerMode: 'float',
       headerStyle: {
         backgroundColor: theme.color.bg,
         borderWidth: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/ui-mobile-playground",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "description": "Mobile UI Components in a Playground",
   "repository": {
     "type": "git",
@@ -34,9 +34,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.21.5",
-    "@coinbase/cds-mobile": "^8.21.5",
-    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.5",
+    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-mobile": "^8.25.1",
+    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.6",
     "@react-navigation/elements": "^1.3.17",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",

package/src/components/ExamplesListScreen.tsx

@@ -7,7 +7,7 @@ import { Box } from '@coinbase/cds-mobile/layout/Box';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import includes from 'lodash/includes';
 
-import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext } from './ExamplesSearchProvider';
 import { keyToRouteName } from './keyToRouteName';
 import { initialRouteKey, searchRouteKey } from './staticRoutes';
 
@@ -15,7 +15,6 @@ const innerSpacingConfig: CellSpacing = { paddingX: 1 };
 
 export function ExamplesListScreen() {
   const searchFilter = useContext(SearchFilterContext);
-  const setFilter = useContext(SetSearchFilterContext);
 
   // React Navigation Route Param typing is not clean because our routes are dynamic
   const routeKeys = (useRoute().params as { routeKeys: string[] } | undefined)?.routeKeys ?? [];
@@ -24,7 +23,6 @@ export function ExamplesListScreen() {
   const renderItem: ListRenderItem<string> = useCallback(
     ({ item }) => {
       const handlePress = () => {
-        setFilter('');
         // typing not clean due to dynamic routes
         navigate(keyToRouteName(item) as never);
       };
@@ -39,7 +37,7 @@ export function ExamplesListScreen() {
         />
       );
     },
-    [navigate, setFilter],
+    [navigate],
   );
 
   const data = [...routeKeys, 'IconSheet']

package/src/components/useExampleNavigatorProps.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useMemo } from 'react';
-import { Pressable } from 'react-native';
 import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ColorScheme } from '@coinbase/cds-common/core/theme';
@@ -14,49 +13,39 @@ import { Spacer } from '@coinbase/cds-mobile/layout/Spacer';
 import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
 import type { StackHeaderProps, StackNavigationOptions } from '@react-navigation/stack';
 
-import { SetSearchFilterContext } from './ExamplesSearchProvider';
+import { SearchFilterContext, SetSearchFilterContext } from './ExamplesSearchProvider';
 import { initialRouteName, searchRouteName } from './staticRoutes';
 
 type UseExampleNavigatorPropsOptions = {
   setColorScheme?: React.Dispatch<React.SetStateAction<ColorScheme>>;
 };
 
-const invisiblePressableStyle = {
-  width: 40,
-  height: 40,
-};
-
 const iconButtonHeight = interactableHeight.regular;
 
 export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigatorPropsOptions) {
   const theme = useTheme();
   const { top } = useSafeAreaInsets();
   const [headerSize, onLayout] = useLayout();
+  const searchFilter = useContext(SearchFilterContext);
   const setFilter = useContext(SetSearchFilterContext);
 
   const style = useMemo(() => ({ marginTop: top }), [top]);
 
   const header = useMemo(() => {
-    return ({ navigation, route, options, progress, styleInterpolator }: StackHeaderProps) => {
+    return ({ navigation, route, options }: StackHeaderProps) => {
       const isFocused = navigation.isFocused();
       const canGoBack = navigation.canGoBack();
       const goBack = () => {
         navigation.goBack();
+      };
+      const goBackFromSearch = () => {
         setFilter('');
+        navigation.goBack();
       };
       const goToSearch = () => navigation.navigate(searchRouteName);
       const routeName = route.name;
       const titleForScene = options.title;
       const isSearch = routeName === searchRouteName;
-      const { titleStyle } = styleInterpolator({
-        current: { progress: progress.current },
-        next: progress.next && { progress: progress.next },
-        layouts: {
-          header: headerSize,
-          title: headerSize,
-          screen: headerSize,
-        },
-      });
       const showBackButton = isFocused && canGoBack && !isSearch;
       const showSearch = routeName === initialRouteName;
 
@@ -109,12 +98,11 @@ export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigator
                   label=""
                   onChange={handleSearch}
                   placeholder="Search"
-                  start={<IconButton transparent name="backArrow" onPress={goBack} />}
+                  start={<IconButton transparent name="backArrow" onPress={goBackFromSearch} />}
+                  value={searchFilter}
                 />
               ) : (
-                <TextHeadline animated align="center" style={titleStyle}>
-                  {titleForScene}
-                </TextHeadline>
+                <TextHeadline align="center">{titleForScene}</TextHeadline>
               )}
             </Box>
             <Spacer />
@@ -123,14 +111,13 @@ export function useExampleNavigatorProps({ setColorScheme }: UseExampleNavigator
         </Box>
       );
     };
-  }, [headerSize, onLayout, setFilter, style, theme.activeColorScheme, setColorScheme]);
+  }, [onLayout, searchFilter, setFilter, style, theme.activeColorScheme, setColorScheme]);
 
   return useMemo(() => {
     const screenOptions: StackNavigationOptions = {
       headerBackAllowFontScaling: false,
       headerBackTitleVisible: false,
       headerTitleAllowFontScaling: false,
-      headerMode: 'float',
       headerStyle: {
         backgroundColor: theme.color.bg,
         borderWidth: 0,