@terreno/ui 0.11.4-beta.4 → 0.11.5

package/src/MarkdownEditorField.tsx

@@ -58,7 +58,7 @@ export const MarkdownEditorField: React.FC<MarkdownEditorFieldProps> = ({
 
   return (
     <View testID={testID}>
-      {title && <FieldTitle text={title} />}
+      {Boolean(title) && <FieldTitle text={title!} />}
       <Box
         border={errorText ? "error" : "default"}
         direction={isWeb ? "row" : "column"}
@@ -151,8 +151,8 @@ export const MarkdownEditorField: React.FC<MarkdownEditorFieldProps> = ({
           </Box>
         </ScrollView>
       </Box>
-      {errorText && <FieldError text={errorText} />}
-      {helperText && <FieldHelperText text={helperText} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
     </View>
   );
 };

package/src/Modal.tsx

@@ -102,7 +102,7 @@ const ModalContent: FC<{
           <Icon iconName="x" size="sm" />
         </Pressable>
       </View>
-      {title && (
+      {Boolean(title) && (
         <View
           accessibilityHint="Modal title"
           aria-label={title}
@@ -112,7 +112,7 @@ const ModalContent: FC<{
           <Heading size="lg">{title}</Heading>
         </View>
       )}
-      {subtitle && (
+      {Boolean(subtitle) && (
         <View
           accessibilityHint="Modal Sub Heading Text"
           aria-label={subtitle}
@@ -122,7 +122,7 @@ const ModalContent: FC<{
           <Text size="lg">{subtitle}</Text>
         </View>
       )}
-      {text && (
+      {Boolean(text) && (
         <View
           accessibilityHint="Modal body text"
           aria-label={text}

package/src/SelectField.tsx

@@ -20,7 +20,7 @@ export const SelectField: FC<SelectFieldProps> = ({
 
   return (
     <View>
-      {title && <FieldTitle text={title} />}
+      {Boolean(title) && <FieldTitle text={title!} />}
       {Boolean(errorText) && <FieldError text={errorText!} />}
       <RNPickerSelect
         disabled={disabled}
@@ -35,7 +35,7 @@ export const SelectField: FC<SelectFieldProps> = ({
         placeholder={!requireValue ? clearOption : {}}
         value={value ?? ""}
       />
-      {helperText && <FieldHelperText text={helperText} />}
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
     </View>
   );
 };

package/src/SidebarNavigation.native.tsx

@@ -1,21 +1,7 @@
 import {TabRouter} from "@react-navigation/native";
 import {Navigator, Slot} from "expo-router";
-// Screen is not exported from expo-router's public API (exports.d.ts only exposes ScreenProps).
-// Stack.Screen and Tabs.Screen use this same internal path. If expo-router upgrades break this,
-// update the import path here — this is the only place in the codebase that references it.
-// eslint-disable-next-line import/no-internal-modules
-import {Screen} from "expo-router/build/views/Screen";
-import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
-import {
-  Animated,
-  Dimensions,
-  PanResponder,
-  Pressable,
-  type StyleProp,
-  View,
-  type ViewStyle,
-} from "react-native";
-import {useSafeAreaInsets} from "react-native-safe-area-context";
+import {type FC, useCallback, useEffect, useRef, useState} from "react";
+import {Animated, Dimensions, Pressable, type StyleProp, View, type ViewStyle} from "react-native";
 
 import {Badge} from "./Badge";
 import type {
@@ -28,11 +14,11 @@ import {Icon} from "./Icon";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
 
-const ITEM_HEIGHT = 44;
+const DRAWER_WIDTH = 280;
+const ITEM_HEIGHT = 48;
 const ICON_SIZE = 20;
 const BACKDROP_OPACITY = 0.5;
-const ANIMATION_DURATION = 300;
-const DISMISS_THRESHOLD = 0.3;
+const ANIMATION_DURATION = 250;
 
 const SidebarItem: FC<{
   item: SidebarNavigationItem;
@@ -54,19 +40,19 @@ const SidebarItem: FC<{
       style={[
         {
           alignItems: "center",
-          backgroundColor: isActive ? theme.surface.neutralLight : "transparent",
+          backgroundColor: isActive ? theme.surface.secondaryLight : "transparent",
           borderRadius: theme.radius.default,
           flexDirection: "row",
-          gap: 12,
+          gap: 14,
           height: ITEM_HEIGHT,
-          marginHorizontal: 8,
-          paddingHorizontal: 12,
+          marginHorizontal: 12,
+          paddingHorizontal: 14,
         },
         itemStyle,
       ]}
     >
       <View style={{alignItems: "center", justifyContent: "center", width: ICON_SIZE}}>
-        <Icon color={isActive ? "primary" : "secondaryLight"} iconName={item.iconName} size="lg" />
+        <Icon color={isActive ? "primary" : "secondaryDark"} iconName={item.iconName} size="md" />
         {Boolean(item.badge) && (
           <View
             style={{
@@ -85,30 +71,15 @@ const SidebarItem: FC<{
           </View>
         )}
       </View>
-      <Text bold={isActive} color={isActive ? "primary" : "secondaryLight"} size="md">
+      <Text bold={isActive} color={isActive ? "primary" : "secondaryDark"} size="md">
         {item.label}
       </Text>
     </Pressable>
   );
 };
 
-const SidebarHamburger: FC<{onOpen: () => void}> = ({onOpen}) => (
-  <Pressable
-    accessibilityLabel="Open navigation menu"
-    accessibilityRole="button"
-    onPress={onOpen}
-    style={{alignItems: "center", height: 40, justifyContent: "center", width: 40}}
-  >
-    <Icon color="primary" iconName="bars" size="md" />
-  </Pressable>
-);
-
 /**
- * Renders the bottom sheet overlay and children. Works without expo-router Navigator context.
- *
- * Supports two modes:
- * - Uncontrolled (default): manages open state internally and shows a floating hamburger button.
- * - Controlled: caller provides isOpen + onOpenChange and owns the trigger (e.g. a header button).
+ * Renders the hamburger button, drawer overlay, and children. Works without expo-router Navigator context.
  */
 export const SidebarNavigationPanel: FC<SidebarNavigationPanelProps> = ({
   topItems,
@@ -118,262 +89,187 @@ export const SidebarNavigationPanel: FC<SidebarNavigationPanelProps> = ({
   children,
   panelStyle,
   itemStyle,
-  isOpen: isOpenProp,
-  onOpenChange,
 }) => {
   const {theme} = useTheme();
-  const insets = useSafeAreaInsets();
-  const isControlled = isOpenProp !== undefined;
-  const [isOpenInternal, setIsOpenInternal] = useState(false);
-  const isOpen = isControlled ? isOpenProp : isOpenInternal;
-
-  const sheetHeight = useMemo(() => Dimensions.get("window").height * 0.65, []);
-  const slideAnim = useRef(new Animated.Value(sheetHeight)).current;
+  const [isOpen, setIsOpen] = useState(false);
+  const slideAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
   const backdropAnim = useRef(new Animated.Value(0)).current;
-  const capturedSlideValue = useRef(0);
 
-  // Play open animation whenever isOpen becomes true
+  // Animate drawer open/close
   useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    slideAnim.setValue(sheetHeight);
-    backdropAnim.setValue(0);
-    Animated.parallel([
-      Animated.timing(slideAnim, {
-        duration: ANIMATION_DURATION,
-        toValue: 0,
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdropAnim, {
-        duration: ANIMATION_DURATION,
-        toValue: BACKDROP_OPACITY,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [isOpen, slideAnim, backdropAnim, sheetHeight]);
-
-  // Play close animation then update state
-  const handleClose = useCallback(() => {
-    Animated.parallel([
-      Animated.timing(slideAnim, {
-        duration: ANIMATION_DURATION,
-        toValue: sheetHeight,
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdropAnim, {
-        duration: ANIMATION_DURATION,
-        toValue: 0,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      if (isControlled) {
-        onOpenChange?.(false);
-      } else {
-        setIsOpenInternal(false);
-      }
-    });
-  }, [isControlled, onOpenChange, slideAnim, backdropAnim, sheetHeight]);
-
-  const handleOpen = useCallback(() => {
-    if (isControlled) {
-      onOpenChange?.(true);
+    if (isOpen) {
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          duration: ANIMATION_DURATION,
+          toValue: 0,
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdropAnim, {
+          duration: ANIMATION_DURATION,
+          toValue: BACKDROP_OPACITY,
+          useNativeDriver: true,
+        }),
+      ]).start();
     } else {
-      setIsOpenInternal(true);
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          duration: ANIMATION_DURATION,
+          toValue: -DRAWER_WIDTH,
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdropAnim, {
+          duration: ANIMATION_DURATION,
+          toValue: 0,
+          useNativeDriver: true,
+        }),
+      ]).start();
     }
-  }, [isControlled, onOpenChange]);
+  }, [isOpen, slideAnim, backdropAnim]);
+
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => setIsOpen(false), []);
 
   const handleNavigate = useCallback(
     (route: string) => {
-      handleClose();
+      setIsOpen(false);
       onNavigate(route);
     },
-    [handleClose, onNavigate]
+    [onNavigate]
   );
 
-  const panResponder = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_, {dx, dy}) => Math.abs(dy) > Math.abs(dx) && dy > 4,
-        onPanResponderGrant: () => {
-          slideAnim.stopAnimation((value) => {
-            capturedSlideValue.current = value;
-          });
-          backdropAnim.stopAnimation();
-        },
-        onPanResponderMove: (_, {dy}) => {
-          const next = capturedSlideValue.current + dy;
-          if (next < 0) {
-            return;
-          }
-          slideAnim.setValue(next);
-          backdropAnim.setValue(BACKDROP_OPACITY * Math.max(0, 1 - next / sheetHeight));
-        },
-        onPanResponderRelease: (_, {dy, vy}) => {
-          if (dy > sheetHeight * DISMISS_THRESHOLD || vy > 0.5) {
-            handleClose();
-          } else {
-            Animated.parallel([
-              Animated.timing(slideAnim, {
-                duration: 200,
-                toValue: 0,
-                useNativeDriver: true,
-              }),
-              Animated.timing(backdropAnim, {
-                duration: 200,
-                toValue: BACKDROP_OPACITY,
-                useNativeDriver: true,
-              }),
-            ]).start();
-          }
-        },
-      }),
-    [slideAnim, backdropAnim, sheetHeight, handleClose]
-  );
+  const screenHeight = Dimensions.get("window").height;
 
   return (
     <View style={{flex: 1}}>
       {children}
 
-      {/* Floating hamburger — only shown in uncontrolled (standalone) mode */}
-      {!isControlled && (
+      {/* Hamburger button */}
+      <Pressable
+        accessibilityLabel="Open navigation menu"
+        accessibilityRole="button"
+        onPress={handleOpen}
+        style={{
+          alignItems: "center",
+          backgroundColor: theme.surface.primary,
+          borderRadius: theme.radius.full,
+          elevation: 4,
+          height: 44,
+          justifyContent: "center",
+          left: 16,
+          position: "absolute",
+          shadowColor: "#000",
+          shadowOffset: {height: 2, width: 0},
+          shadowOpacity: 0.25,
+          shadowRadius: 4,
+          top: 16,
+          width: 44,
+          zIndex: 10,
+        }}
+      >
+        <Icon color="inverted" iconName="bars" size="md" />
+      </Pressable>
+
+      {/* Backdrop */}
+      {isOpen && (
         <Pressable
-          accessibilityLabel="Open navigation menu"
-          accessibilityRole="button"
-          onPress={handleOpen}
+          onPress={handleClose}
           style={{
-            alignItems: "center",
-            height: 44,
-            justifyContent: "center",
-            left: 16,
+            bottom: 0,
+            left: 0,
             position: "absolute",
-            top: insets.top + 16,
-            width: 44,
-            zIndex: 10,
+            right: 0,
+            top: 0,
+            zIndex: 100,
           }}
         >
-          <Icon color="primary" iconName="bars" size="md" />
+          <Animated.View
+            style={{
+              backgroundColor: "#000",
+              flex: 1,
+              opacity: backdropAnim,
+            }}
+          />
         </Pressable>
       )}
 
-      {isOpen && (
-        <>
-          {/* Backdrop */}
+      {/* Drawer */}
+      <Animated.View
+        style={[
+          {
+            backgroundColor: theme.surface.base,
+            borderColor: theme.border.default,
+            borderRightWidth: 1,
+            height: screenHeight,
+            justifyContent: "space-between",
+            left: 0,
+            paddingBottom: 32,
+            paddingTop: 20,
+            position: "absolute",
+            top: 0,
+            transform: [{translateX: slideAnim}],
+            width: DRAWER_WIDTH,
+            zIndex: 200,
+          },
+          panelStyle,
+        ]}
+      >
+        {/* Close button */}
+        <View>
           <Pressable
-            accessibilityElementsHidden
+            accessibilityLabel="Close navigation menu"
+            accessibilityRole="button"
             onPress={handleClose}
-            style={{bottom: 0, left: 0, position: "absolute", right: 0, top: 0, zIndex: 100}}
+            style={{
+              alignItems: "center",
+              alignSelf: "flex-end",
+              height: 40,
+              justifyContent: "center",
+              marginRight: 12,
+              width: 40,
+            }}
           >
-            <Animated.View style={{backgroundColor: "#000", flex: 1, opacity: backdropAnim}} />
+            <Icon color="secondaryDark" iconName="xmark" size="md" />
           </Pressable>
-
-          {/* Bottom sheet */}
-          <Animated.View
-            style={[
-              {
-                backgroundColor: theme.surface.base,
-                borderTopLeftRadius: 16,
-                borderTopRightRadius: 16,
-                bottom: 0,
-                height: sheetHeight,
-                left: 0,
-                position: "absolute",
-                right: 0,
-                transform: [{translateY: slideAnim}],
-                zIndex: 200,
-              },
-              panelStyle,
-            ]}
-          >
-            {/* Drag bar */}
-            <View
-              {...panResponder.panHandlers}
-              accessibilityHint="Drag down to close"
-              accessibilityLabel="Navigation menu drag handle"
-              accessibilityRole="adjustable"
-              style={{alignItems: "center", paddingBottom: 8, paddingTop: 12}}
-            >
-              <View
-                style={{
-                  backgroundColor: theme.border.default,
-                  borderRadius: 2,
-                  height: 4,
-                  width: 36,
-                }}
+          <View style={{gap: 4, marginTop: 8}}>
+            {topItems.map((item) => (
+              <SidebarItem
+                isActive={activeRoute === item.route}
+                item={item}
+                itemStyle={itemStyle}
+                key={item.route}
+                onPress={handleNavigate}
               />
-            </View>
-
-            {/* Nav items */}
-            <View style={{gap: 4, paddingBottom: insets.bottom + 8}}>
-              {[...topItems, ...bottomItems].map((item) => (
-                <SidebarItem
-                  isActive={activeRoute === item.route}
-                  item={item}
-                  itemStyle={itemStyle}
-                  key={item.route}
-                  onPress={handleNavigate}
-                />
-              ))}
-            </View>
-          </Animated.View>
-        </>
-      )}
-    </View>
-  );
-};
-
-const SidebarHeader: FC<{onOpen: () => void}> = ({onOpen}) => {
-  const {theme} = useTheme();
-  const insets = useSafeAreaInsets();
-  const {state, descriptors} = Navigator.useContext();
-  const activeRoute = state.routes[state.index];
-  const {headerLeft, headerRight, title} = (descriptors[activeRoute?.key]?.options ?? {}) as any;
+            ))}
+          </View>
+        </View>
 
-  return (
-    <View
-      style={{
-        backgroundColor: theme.surface.base,
-        borderBottomColor: theme.border.default,
-        borderBottomWidth: 1,
-        paddingTop: insets.top,
-      }}
-    >
-      <View
-        style={{
-          alignItems: "center",
-          flexDirection: "row",
-          height: 44,
-          justifyContent: "space-between",
-          paddingHorizontal: 16,
-        }}
-      >
-        <View style={{alignItems: "center", flexDirection: "row", gap: 12}}>
-          <SidebarHamburger onOpen={onOpen} />
-          {headerLeft?.({})}
-          {Boolean(title) && (
-            <Text bold size="lg">
-              {title}
-            </Text>
-          )}
+        <View style={{gap: 4}}>
+          {bottomItems.map((item) => (
+            <SidebarItem
+              isActive={activeRoute === item.route}
+              item={item}
+              key={item.route}
+              onPress={handleNavigate}
+            />
+          ))}
         </View>
-        {Boolean(headerRight) && <View style={{alignItems: "flex-end"}}>{headerRight?.({})}</View>}
-      </View>
+      </Animated.View>
     </View>
   );
 };
 
-/** Renders the content panel and bottom sheet for the active screen. */
+/**
+ * Reads active route from Navigator context and renders the drawer + Slot.
+ */
 const SidebarNavigatorContent: FC<{
   topItems: SidebarNavigationItem[];
   bottomItems: SidebarNavigationItem[];
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
   onNavigate?: (route: string) => void;
   panelStyle?: StyleProp<ViewStyle>;
   itemStyle?: StyleProp<ViewStyle>;
-}> = ({topItems, bottomItems, isOpen, onOpenChange, onNavigate, panelStyle, itemStyle}) => {
+}> = ({topItems, bottomItems, onNavigate, panelStyle, itemStyle}) => {
   const {state, navigation} = Navigator.useContext();
-  const activeRoute = state.routes[state.index];
+  const activeRoute = state.routes[state.index]?.name;
 
   const handleNavigate = useCallback(
     (route: string) => {
@@ -385,12 +281,10 @@ const SidebarNavigatorContent: FC<{
 
   return (
     <SidebarNavigationPanel
-      activeRoute={activeRoute?.name}
+      activeRoute={activeRoute}
       bottomItems={bottomItems}
-      isOpen={isOpen}
       itemStyle={itemStyle}
       onNavigate={handleNavigate}
-      onOpenChange={onOpenChange}
       panelStyle={panelStyle}
       topItems={topItems}
     >
@@ -400,7 +294,7 @@ const SidebarNavigatorContent: FC<{
 };
 
 /**
- * Custom expo-router navigator with a header bar and hamburger-triggered bottom sheet.
+ * Custom expo-router navigator with a hamburger-triggered slide-in drawer.
  * Use in _layout.tsx files:
  *
  * ```tsx
@@ -414,7 +308,7 @@ const SidebarNavigatorContent: FC<{
  * }
  * ```
  */
-const SidebarNavigationBase: FC<SidebarNavigationProps> = ({
+export const SidebarNavigation: FC<SidebarNavigationProps> = ({
   topItems,
   bottomItems,
   onNavigate,
@@ -422,27 +316,16 @@ const SidebarNavigationBase: FC<SidebarNavigationProps> = ({
   screenOptions,
   panelStyle,
   itemStyle,
-  children,
 }) => {
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-
   return (
     <Navigator initialRouteName={initialRouteName} router={TabRouter} screenOptions={screenOptions}>
-      <View style={{flex: 1}}>
-        <SidebarHeader onOpen={() => setIsSheetOpen(true)} />
-        <SidebarNavigatorContent
-          bottomItems={bottomItems}
-          isOpen={isSheetOpen}
-          itemStyle={itemStyle}
-          onNavigate={onNavigate}
-          onOpenChange={setIsSheetOpen}
-          panelStyle={panelStyle}
-          topItems={topItems}
-        />
-      </View>
-      {children}
+      <SidebarNavigatorContent
+        bottomItems={bottomItems}
+        itemStyle={itemStyle}
+        onNavigate={onNavigate}
+        panelStyle={panelStyle}
+        topItems={topItems}
+      />
     </Navigator>
   );
 };
-
-export const SidebarNavigation = Object.assign(SidebarNavigationBase, {Screen});