@hzblj/kara-components 0.26.2 → 0.27.1

package/src/organisms/header/use-header-search.tsx

@@ -19,9 +19,11 @@ const PLACEMENT_OPTIONS: Record<HeaderSearchPlacement, Partial<HeaderSearchBarOp
 /**
  * A search field for a screen's header. iOS: UIKit's search bar stacked under the title, with the title and items kept
  * and nothing dimmed by the system, so a list can filter live, or behind a search button in the bar's corner
- * (`placement`); pass `searchBar` to `useHeader` as `search`. Android: Material's search field with its cancel button,
- * as a row for the screen to put right under the top app bar (`searchInput`). Both report the `query`; `scrim` washes
- * the content out while the field is focused and empty and, on iOS, carries the field's glyphs and voice.
+ * (`placement`); pass `searchBar` to `useHeader` as `search`. Android: `stacked` is Material's search field with its
+ * cancel button, as a row for the screen to put right under the top app bar (`searchInput`); `integratedButton` is the
+ * toolbar's own search, a magnifier in the bar's corner that expands over the title (`searchBar`, as on iOS). Both
+ * report the `query`; `scrim` washes the content out while the field is focused and empty and carries the header
+ * field's glyphs and voice.
  *
  * With `voice` the field has a microphone; the app runs the dictation and writes what it hears with `setText`. Typing
  * over it, or ending the search, calls `voice.onCancel`.
@@ -41,6 +43,7 @@ export const useHeaderSearch = ({
   const inputRef = useRef<HeaderSearchInputRef>(null)
   const lastSetText = useRef<string | null>(null)
   const voiceRef = useRef(voice)
+  const headerField = Platform.OS === 'ios' || placement === 'integratedButton'
 
   voiceRef.current = voice
 
@@ -68,28 +71,33 @@ export const useHeaderSearch = ({
   }, [cancelVoice])
 
   const searchBar = useMemo((): HeaderSearchBarOptions | undefined => {
-    if (!enabled || Platform.OS !== 'ios') {
+    if (!enabled || !headerField) {
       return undefined
     }
 
     return {
       ...PLACEMENT_OPTIONS[placement],
       autoCapitalize: 'none',
+      headerIconColor: headerColor(theme, 'content.primary'),
       hideWhenScrolling: false,
+      hintTextColor: headerColor(theme, 'content.tertiary'),
       obscureBackground: false,
       onBlur: () => setFocused(false),
       onCancelButtonPress: reset,
       onChangeText: event => changeQuery(event.nativeEvent.text),
+      onClose: reset,
       onFocus: () => setFocused(true),
+      onOpen: () => setFocused(true),
       placeholder,
       placement,
       ref: searchBarRef,
+      textColor: Platform.OS === 'android' ? headerColor(theme, 'content.primary') : undefined,
       tintColor: headerColor(theme, 'content.primary'),
     }
-  }, [changeQuery, enabled, placeholder, placement, reset, theme])
+  }, [changeQuery, enabled, headerField, placeholder, placement, reset, theme])
 
   const searchInput = useMemo(() => {
-    if (!enabled || Platform.OS !== 'android') {
+    if (!enabled || headerField) {
       return null
     }
 
@@ -103,7 +111,7 @@ export const useHeaderSearch = ({
         voice={voice}
       />
     )
-  }, [changeQuery, clearIcon, enabled, placeholder, voice])
+  }, [changeQuery, clearIcon, enabled, headerField, placeholder, voice])
 
   const clear = useCallback(() => {
     reset()
@@ -128,11 +136,11 @@ export const useHeaderSearch = ({
 
     return (
       <>
-        {dimmed ? <HeaderSearchScrim onPress={clear} topOffset={HEADER_SEARCH_ROW_HEIGHT} /> : null}
-        <HeaderSearchAccessory cancelIcon={cancelIcon} clearIcon={clearIcon} voice={voice} />
+        {dimmed ? <HeaderSearchScrim onPress={clear} topOffset={headerField ? 0 : HEADER_SEARCH_ROW_HEIGHT} /> : null}
+        {headerField ? <HeaderSearchAccessory cancelIcon={cancelIcon} clearIcon={clearIcon} voice={voice} /> : null}
       </>
     )
-  }, [cancelIcon, clear, clearIcon, dimmed, enabled, voice])
+  }, [cancelIcon, clear, clearIcon, dimmed, enabled, headerField, voice])
 
   return {clear, query, scrim, searchBar, searchInput, setText}
 }

package/src/organisms/sheet/sheet.tsx

@@ -1,5 +1,5 @@
-import {useAppTheme} from '@hzblj/kara-theme'
-import {type DetentChangeEvent, TrueSheet} from '@lodev09/react-native-true-sheet'
+import {useAppTheme, withOpacity} from '@hzblj/kara-theme'
+import {type DetentChangeEvent, type GrabberOptions, TrueSheet} from '@lodev09/react-native-true-sheet'
 import {useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef} from 'react'
 import {Platform, StyleSheet, View} from 'react-native'
 import type {SheetComponent, SheetDetent, SheetProps} from './sheet.types'
@@ -39,6 +39,22 @@ const SheetRoot = ({
   const theme = useAppTheme()
   const {content, header: headerProps} = useMemo(() => splitSheetChildren(children), [children])
   const sheetHeader = useSheetHeader({header: headerProps, scrollable})
+  const inverted = headerProps?.inverted ?? false
+  /**
+   * Material's drag handle, `onSurfaceVariant` at 40 %, in the app's theme. TrueSheet's own Android grabber picks black
+   * or white by the system's night mode, so an app themed apart from the device drew it in the sheet's own colour.
+   */
+  const grabberOptions = useMemo<GrabberOptions | undefined>(() => {
+    if (Platform.OS !== 'android') {
+      return undefined
+    }
+
+    const color = inverted
+      ? theme.color('content.on.accent:o40')
+      : withOpacity(String(theme.color('content.secondary')), 'o40')
+
+    return {adaptive: false, color}
+  }, [inverted, theme])
   const sheetRef = useRef<TrueSheet>(null)
   const presented = useRef(false)
   /** A dismissal we asked for: `onDismiss` reports the user's, never ours. */
@@ -114,6 +130,7 @@ const SheetRoot = ({
         draggable={draggable}
         footer={footer}
         grabber={grabber}
+        grabberOptions={grabberOptions}
         header={sheetHeader.header}
         headerStyle={sheetHeader.headerStyle}
         onDetentChange={handleDetentChange}

package/src/organisms/sheet/sheet.types.ts

@@ -65,7 +65,7 @@ export type SheetProps = {
   draggable?: boolean
   /** Pinned to the bottom, above the content and the keyboard. */
   footer?: ReactElement
-  /** The drag handle. On by default. */
+  /** The drag handle. On by default. On Android it is Material's handle, coloured by the app's theme. */
   grabber?: boolean
   /** The user dismissed it; `visible` going false does not call this. */
   onDismiss: () => void

package/src/organisms/sheet/use-sheet-header.tsx

@@ -17,6 +17,12 @@ type UseSheetHeaderParams = {
 /** The bar's own height (`NavigationBar`) plus the room above it, before the header has been measured. */
 const ESTIMATED_HEADER_HEIGHT = (Platform.OS === 'ios' ? 56 : 64) + spacing.s16
 
+/**
+ * Above a header with no bar. Android's grabber is drawn over the sheet's content, 16 dp from the top and 4 dp tall, so
+ * there the header starts 8 dp under it. iOS's grabber ends 10 pt from the top, inside the usual 16 pt.
+ */
+const HEADER_TOP_WITHOUT_BAR = Platform.OS === 'android' ? 's28' : 's16'
+
 /** Where a large title's bar title appears once it has scrolled away: the platform's own place for it. */
 const COLLAPSED_TITLE_ALIGNMENT: NavigationBarTitleAlignment = Platform.OS === 'ios' ? 'center' : 'leading'
 
@@ -83,7 +89,7 @@ export const useSheetHeader = ({header: headerProps, scrollable}: UseSheetHeader
     }
 
     return (
-      <Box onLayout={isOverlay ? handleHeaderLayout : undefined} pt="s16">
+      <Box onLayout={isOverlay ? handleHeaderLayout : undefined} pt={hasBar ? 's16' : HEADER_TOP_WITHOUT_BAR}>
         {hasBar ? (
           <NavigationBar
             inverted={inverted}

package/src/templates/screen/screen.android.tsx

@@ -1,9 +1,9 @@
-import {Column, Host} from '@expo/ui/jetpack-compose'
+import {Column} from '@expo/ui/jetpack-compose'
 import {padding} from '@expo/ui/jetpack-compose/modifiers'
 import {useSxModifiers} from '@hzblj/kara-sx'
-import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo, useRef, useState} from 'react'
 import {StatusBar, StyleSheet, View} from 'react-native'
+import {ComposeHost} from '../../hooks/compose-host'
 import {HostBoundary} from '../../hooks/host-context'
 import type {ScreenComponent, ScreenProps} from './screen.types'
 
@@ -18,7 +18,6 @@ export const Screen: ScreenComponent = ({
   ignoreSafeArea = 'none',
   testID,
 }: ScreenProps) => {
-  const theme = useAppTheme()
   const frame = useRef<View>(null)
   const [statusBarOverlap, setStatusBarOverlap] = useState(0)
   const sx = useSxModifiers({bg, tall: true, wide: true})
@@ -35,16 +34,14 @@ export const Screen: ScreenComponent = ({
 
   return (
     <View onLayout={onLayout} ref={frame} style={StyleSheet.absoluteFill} testID={testID}>
-      <Host
-        colorScheme={theme.dark ? 'dark' : 'light'}
+      <ComposeHost
         ignoreSafeAreaKeyboardInsets={ignoreSafeArea === 'all' || ignoreSafeArea === 'keyboard'}
-        seedColor={theme.materialSeed}
         style={StyleSheet.absoluteFill}
       >
         <Column modifiers={modifiers}>
           <HostBoundary>{children}</HostBoundary>
         </Column>
-      </Host>
+      </ComposeHost>
     </View>
   )
 }