@helpwave/hightide-native 0.6.0 → 0.9.0

package/src/components/list/ListItemTextContent.tsx

@@ -4,7 +4,9 @@ import type { StyleProp, TextStyle } from 'react-native'
 
 import { ThemedText } from '../visualization-and-display/ThemedText'
 
-export type ListItemContentOrder = 'titleFirst' | 'subtitleFirst'
+import type { ListItemContentOrder } from '../../enums/listItemContentOrder'
+
+export type { ListItemContentOrder }
 
 export type ListItemTextContentProps = {
   title?: string,
@@ -25,7 +27,7 @@ export const ListItemTextContent = ({
   subtitleStyle?: StyleProp<TextStyle>,
 }) => {
   if (content != null) {
-    return <>{content}</>
+    return <Fragment>{content}</Fragment>
   }
 
   const titleNode = title != null

package/src/components/list/ListNavigationItem.tsx

@@ -1,5 +1,6 @@
 import {
-  Fragment,
+  useMemo,
+  useState,
   type ReactNode
 } from 'react'
 import {
@@ -16,6 +17,7 @@ import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   ListNavigationItemDescriptionStyle,
   ListNavigationItemState,
@@ -44,13 +46,6 @@ export type ListNavigationItemProps = Omit<PressableProps, 'children' | 'style'>
   subtitleStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemDescriptionStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const ListNavigationItem = ({
   title,
   subtitle,
@@ -74,15 +69,21 @@ export const ListNavigationItem = ({
     hitSlop: providedHitSlop,
     onLayout: providedOnLayout,
   })
+  const [isPressed, setIsPressed] = useState(false)
 
-  const resolveState = (interaction: PressableInteraction): ListNavigationItemState => ({
+  const resolvedState = useMemo((): ListNavigationItemState => ({
     color,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [color, disabled, isPressed])
+
+  const resolvedItemStyle = useMemoizedTheme(theme.components.listItem.navigation.container, resolvedState, itemStyle)
+  const resolvedLeadingItemContainerStyle = useMemoizedTheme(theme.components.listItem.navigation.leadingItemContainer, resolvedState)
+  const resolvedContentStyle = useMemoizedTheme(theme.components.listItem.navigation.content, resolvedState)
+  const resolvedTrailingItemContainerStyle = useMemoizedTheme(theme.components.listItem.navigation.trailingItemContainer, resolvedState)
+  const resolvedTitleStyle = useMemoizedTheme(theme.components.listItem.navigation.titleText, resolvedState, titleStyle)
+  const resolvedSubtitleStyle = useMemoizedTheme(theme.components.listItem.navigation.descriptionText, resolvedState, subtitleStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.listItem.navigation.icon, resolvedState)
 
   return (
     <Pressable
@@ -90,57 +91,48 @@ export const ListNavigationItem = ({
       disabled={disabled}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.listItem.navigation.container(state, itemStyle), style]
+      style={[resolvedItemStyle, style]}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedLeadingItemContainerStyle = theme.components.listItem.navigation.leadingItemContainer(state)
-        const resolvedContentStyle = theme.components.listItem.navigation.content(state)
-        const resolvedTrailingItemContainerStyle = theme.components.listItem.navigation.trailingItemContainer(state)
-        const resolvedTitleStyle = theme.components.listItem.navigation.titleText(state, titleStyle)
-        const resolvedSubtitleStyle = theme.components.listItem.navigation.descriptionText(state, subtitleStyle)
-        const resolvedIconStyle = theme.components.listItem.navigation.icon(state)
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            {leading != null && (
-              <ListItemAccessory
-                style={resolvedLeadingItemContainerStyle}
-                foreground={color?.onColor}
-                iconStyle={resolvedIconStyle}
-              >
-                {leading}
-              </ListItemAccessory>
-            )}
-            <View style={resolvedContentStyle}>
-              <ListItemTextContent
-                title={title}
-                subtitle={subtitle}
-                content={content}
-                contentOrder={contentOrder}
-                titleStyle={resolvedTitleStyle}
-                subtitleStyle={resolvedSubtitleStyle}
-              />
-            </View>
-            <ListItemAccessory
-              style={resolvedTrailingItemContainerStyle}
-              foreground={color?.onColor}
-              iconStyle={resolvedIconStyle}
-            >
-              <ThemedIcon icon={HightideIconRegistry.ChevronRight} />
-            </ListItemAccessory>
-          </Fragment>
-        )
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
+    >
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      {leading != null && (
+        <ListItemAccessory
+          style={resolvedLeadingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
+          {leading}
+        </ListItemAccessory>
+      )}
+      <View style={resolvedContentStyle}>
+        <ListItemTextContent
+          title={title}
+          subtitle={subtitle}
+          content={content}
+          contentOrder={contentOrder}
+          titleStyle={resolvedTitleStyle}
+          subtitleStyle={resolvedSubtitleStyle}
+        />
+      </View>
+      <ListItemAccessory
+        style={resolvedTrailingItemContainerStyle}
+        foreground={color?.onColor}
+        iconStyle={resolvedIconStyle}
+      >
+        <ThemedIcon icon={HightideIconRegistry.ChevronRight} />
+      </ListItemAccessory>
     </Pressable>
   )
 }

package/src/components/user-interaction/Button.tsx

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
@@ -22,6 +22,7 @@ import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { ThemedText } from '../visualization-and-display/ThemedText'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 
 export type ButtonSize = ComponentSize
 
@@ -45,13 +46,6 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   iconStyle?: StyleOverwrite<ButtonState, IconStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(function Button({
   children,
   size = 'md',
@@ -76,16 +70,19 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
     onLayout: providedOnLayout,
   })
 
-  const resolveState = (interaction: PressableInteraction): ButtonState => ({
+  const [isPressed, setIsPressed] = useState(false)
+  const resolvedState = useMemo(() => ({
     size,
     color,
     variant,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed: isPressed,
+  }), [color, disabled, isPressed, size, variant])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.button.container, resolvedState, style)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.button.text, resolvedState, textStyle)
+  const resolvedIcon = useMemoizedTheme(theme.components.button.icon, resolvedState, iconStyle)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.button.stateLayer, resolvedState, stateLayerStyle)
 
   return (
     <Pressable
@@ -94,43 +91,40 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
       disabled={disabled}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.button.container(state, style)
+      style={resolvedContainerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedText = theme.components.button.text(state, textStyle)
-        const resolvedIcon = theme.components.button.icon(state, iconStyle)
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View
-              pointerEvents="none"
-              style={theme.components.button.stateLayer(state, stateLayerStyle)}
-            />
-            <ContentThemeOverrideProvider
-              textStyle={resolvedText}
-              iconStyle={resolvedIcon}
-            >
-              {leadingIcon !== undefined && (
-                <ThemedIcon icon={leadingIcon} />
-              )}
-              <ThemedText>{children}</ThemedText>
-              {trailingIcon !== undefined && (
-                <ThemedIcon icon={trailingIcon} />
-              )}
-            </ContentThemeOverrideProvider>
-          </Fragment>
-        )
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
+    >
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      <ContentThemeOverrideProvider
+        foreground={resolvedTextStyle?.color}
+        background={resolvedContainerStyle?.backgroundColor}
+        textStyle={resolvedTextStyle}
+        iconStyle={resolvedIcon}
+      >
+        {leadingIcon !== undefined && (
+          <ThemedIcon icon={leadingIcon} />
+        )}
+        <ThemedText>{children}</ThemedText>
+        {trailingIcon !== undefined && (
+          <ThemedIcon icon={trailingIcon} />
+        )}
+      </ContentThemeOverrideProvider>
     </Pressable>
   )
 })

package/src/components/user-interaction/Checkbox.tsx

@@ -1,7 +1,4 @@
-import {
-  Fragment,
-  useCallback
-} from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
@@ -19,6 +16,7 @@ import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   CheckboxSize,
   CheckboxState,
@@ -47,13 +45,6 @@ export type CheckboxProps = Omit<PressableProps, 'children' | 'style'>
     stateLayerStyle?: StyleOverwrite<CheckboxState, CheckboxStateLayerStyle>,
   }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const Checkbox = ({
   value: controlledValue,
   initialValue = false,
@@ -81,6 +72,7 @@ export const Checkbox = ({
     onLayout: providedOnLayout,
   })
   const interactive = !disabled && !readOnly
+  const [isPressed, setIsPressed] = useState(false)
 
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
@@ -96,7 +88,7 @@ export const Checkbox = ({
     defaultValue: initialValue,
   })
 
-  const resolveState = (interaction: PressableInteraction): CheckboxState => ({
+  const resolvedState = useMemo((): CheckboxState => ({
     size,
     color,
     isChecked: value,
@@ -105,11 +97,23 @@ export const Checkbox = ({
     isDisabled: disabled,
     isReadonly: readOnly,
     isRounded,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [
+    size,
+    color,
+    value,
+    indeterminate,
+    invalid,
+    disabled,
+    readOnly,
+    isRounded,
+    isPressed,
+  ])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.checkbox.container, resolvedState, containerStyle)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.checkbox.stateLayer, resolvedState, stateLayerStyle)
+  const resolvedIcon = useMemoizedTheme(theme.components.checkbox.icon, resolvedState)
+  const showIcon = !!(indeterminate || value)
 
   return (
     <Pressable
@@ -122,44 +126,39 @@ export const Checkbox = ({
       }}
       hitSlop={hitSlop}
       onLayout={onLayout}
+      style={[resolvedContainerStyle, style]}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
+      }}
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
+      }}
       onPress={(event) => {
         if (interactive) {
           setValue((previous) => !previous)
         }
         props.onPress?.(event)
       }}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return [theme.components.checkbox.container(state, containerStyle), style]
-      }}
     >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedIcon = theme.components.checkbox.icon(state)
-        const showIcon = !!(indeterminate || value)
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View
-              pointerEvents="none"
-              style={theme.components.checkbox.stateLayer(state, stateLayerStyle)}
-            />
-            {showIcon && (
-              <ThemedIcon
-                icon={indeterminate ? HightideIconRegistry.Minus : HightideIconRegistry.Check}
-                size={resolvedIcon.size}
-                color={resolvedIcon.color}
-              />
-            )}
-          </Fragment>
-        )
-      }}
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      {showIcon && (
+        <ThemedIcon
+          icon={indeterminate ? HightideIconRegistry.Minus : HightideIconRegistry.Check}
+          size={resolvedIcon.size}
+          color={resolvedIcon.color}
+        />
+      )}
     </Pressable>
   )
 }

package/src/components/user-interaction/IconButton.tsx

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
@@ -13,6 +13,7 @@ import type {
 import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   IconButtonState,
   IconButtonStyle
@@ -43,15 +44,8 @@ export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   iconStyle?:  StyleOverwrite<IconButtonState, IconStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
-  icon: IconComponent,
+  icon,
   size = 'md',
   color,
   variant = 'filled',
@@ -71,17 +65,25 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
     hitSlop: providedHitSlop,
     onLayout: providedOnLayout,
   })
+  const [isPressed, setIsPressed] = useState(false)
 
-  const resolveState = (interaction: PressableInteraction): IconButtonState => ({
+  const resolvedState = useMemo((): IconButtonState => ({
     size,
     color,
     variant,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [
+    size,
+    color,
+    variant,
+    disabled,
+    isPressed,
+  ])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.iconButton.container, resolvedState, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.iconButton.stateLayer, resolvedState, stateLayerStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.iconButton.icon, resolvedState, iconStyle)
 
   return (
     <Pressable
@@ -92,35 +94,31 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       accessibilityLabel={accessibilityLabel}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        return theme.components.iconButton.container(state, style)
+      style={resolvedContainerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedIcon = theme.components.iconButton.icon(state, iconStyle)
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View
-              pointerEvents="none"
-              style={theme.components.iconButton.stateLayer(state, stateLayerStyle)}
-            />
-            <ContentThemeOverrideProvider
-              iconStyle={resolvedIcon}
-            >
-              <ThemedIcon icon={IconComponent} />
-            </ContentThemeOverrideProvider>
-          </Fragment>
-        )
+      onPressOut={(event) => {
+        setIsPressed(false)
+        props.onPressOut?.(event)
       }}
+    >
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      <ContentThemeOverrideProvider
+        iconStyle={resolvedIconStyle}
+      >
+        <ThemedIcon icon={icon} />
+      </ContentThemeOverrideProvider>
     </Pressable>
   )
 })