@helpwave/hightide-native 0.6.0 → 0.7.0

package/src/components/user-interaction/Select/SelectTrigger.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react'
+import { useMemo, useState } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../../hooks/useMemoizedTheme'
+import { HightideIconRegistry } from '../../../icons/HightideIconRegistry'
+import type { IconStyle } from '../../../icons'
+import type { SelectState } from '../../../theme/types/components/select'
+import { ThemedIcon } from '../../visualization-and-display/ThemedIcon'
+import { ThemedText } from '../../visualization-and-display/ThemedText'
+import { useSelectContext, type SelectOptionType } from './SelectContext'
+import { ThemedPressable } from '../ThemedPressable'
+
+export type SelectTriggerProps<T = string> = {
+  placeholder?: ReactNode,
+  selectedDisplay?: (option: SelectOptionType<T> | null) => ReactNode,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const SelectTrigger = <T,>({
+  placeholder = 'Select…',
+  selectedDisplay,
+  style,
+}: SelectTriggerProps<T>) => {
+  const { theme } = useTheme()
+  const context = useSelectContext<T>()
+  const [isPressed, setIsPressed] = useState(false)
+  const interactive = !context.disabled && !context.readOnly
+  const selectedOption = context.selectedId
+    ? (context.idToOptionMap[context.selectedId] ?? null)
+    : null
+
+  const resolvedState = useMemo((): SelectState => ({
+    color: context.config.color,
+    isDisabled: !!context.disabled,
+    isReadonly: !!context.readOnly,
+    isInvalid: !!context.invalid,
+    isOpen: context.isOpen,
+    hasValue: !!context.selectedId,
+    isPressed,
+  }), [
+    context.config.color,
+    context.disabled,
+    context.invalid,
+    context.isOpen,
+    context.readOnly,
+    context.selectedId,
+    isPressed,
+  ])
+
+  const selectTheme = theme.components.select
+  const resolvedTriggerStyle = useMemoizedTheme(selectTheme.trigger, resolvedState)
+  const resolvedStateLayerStyle = useMemoizedTheme(selectTheme.stateLayer, resolvedState)
+  const resolvedTriggerTextStyle = useMemoizedTheme(selectTheme.triggerText, resolvedState)
+  const resolvedIcon = useMemoizedTheme<SelectState, IconStyle>(selectTheme.icon, resolvedState)
+
+  const customDisplay = selectedDisplay?.(selectedOption)
+  const fallbackDisplay = selectedOption?.display
+    ?? selectedOption?.label
+    ?? placeholder
+  const resolvedDisplay = selectedDisplay ? customDisplay : fallbackDisplay
+
+  return (
+    <ThemedPressable
+      disabled={!interactive}
+      style={[resolvedTriggerStyle, style]}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      onPress={() => context.toggleIsOpen()}
+    >
+      <View pointerEvents="none" style={resolvedStateLayerStyle} />
+      {typeof resolvedDisplay === 'string' || typeof resolvedDisplay === 'number' ? (
+        <ThemedText style={[resolvedTriggerTextStyle]}>
+          {resolvedDisplay}
+        </ThemedText>
+      ) : (
+        resolvedDisplay
+      )}
+      <ThemedIcon
+        icon={HightideIconRegistry.ChevronDown}
+        size={resolvedIcon.size}
+        strokeWidth={resolvedIcon.strokeWidth}
+        color={resolvedIcon.color}
+      />
+    </ThemedPressable>
+  )
+}

package/src/components/user-interaction/Select/index.ts

@@ -0,0 +1,6 @@
+export * from './Select'
+export * from './SelectContext'
+export * from './SelectMenu'
+export * from './SelectOption'
+export * from './SelectRoot'
+export * from './SelectTrigger'

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

@@ -1,8 +1,7 @@
 import {
-  Fragment,
   useCallback,
-  useEffect,
-  useRef
+  useMemo,
+  useState
 } from 'react'
 import {
   Animated,
@@ -20,6 +19,8 @@ import {
 
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useAnimatedStyleTransition } from '../../hooks/useAnimatedStyleTransition'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   SwitchContainerStyle,
   SwitchState,
@@ -34,7 +35,12 @@ import type {
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 
-const ANIMATION_DURATION_MS = 250
+const thumbAnimatedAttributes: (keyof ViewStyle)[] = [
+  'transform',
+  'position',
+  'width',
+  'height',
+]
 
 export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'disabled'>
   & Partial<FormFieldInteractionStates>
@@ -47,17 +53,6 @@ export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'disabled'
     thumbStyle?: StyleOverwrite<SwitchState, SwitchThumbStyle>,
   }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
-const toNumber = (value: string | number | undefined, fallback: number): number => (
-  typeof value === 'number' ? value : fallback
-)
-
 export const Switch = ({
   value: controlledValue,
   initialValue = false,
@@ -83,6 +78,7 @@ export const Switch = ({
     onLayout: providedOnLayout,
   })
   const interactive = !disabled && !readOnly
+  const [isPressed, setIsPressed] = useState(false)
 
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
@@ -98,25 +94,27 @@ export const Switch = ({
     defaultValue: initialValue,
   })
 
-  const progress = useRef(new Animated.Value(value ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.timing(progress, {
-      toValue: value ? 1 : 0,
-      duration: ANIMATION_DURATION_MS,
-      useNativeDriver: false,
-    }).start()
-  }, [progress, value])
-
-  const resolveState = (interaction: PressableInteraction): SwitchState => ({
+  const resolvedState = useMemo((): SwitchState => ({
     isActive: value,
     isInvalid: invalid,
     isDisabled: disabled,
     isReadonly: readOnly,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
+    isPressed,
+  }), [
+    value,
+    invalid,
+    disabled,
+    readOnly,
+    isPressed,
+  ])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.switch.container, resolvedState, containerStyle)
+  const resolvedTrackStyle = useMemoizedTheme(theme.components.switch.track, resolvedState, trackStyle)
+  const resolvedThumbStyle = useMemoizedTheme(theme.components.switch.thumb, resolvedState, thumbStyle)
+  const animatedThumbStyle = useAnimatedStyleTransition({
+    style: resolvedThumbStyle,
+    duration: theme.motion.durations.normal,
+    animatedAttributes: thumbAnimatedAttributes,
   })
 
   return (
@@ -131,81 +129,31 @@ export const Switch = ({
       }}
       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.switch.container(state, containerStyle), style]
-      }}
     >
-      {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const inactiveState: SwitchState = { ...state, isActive: false }
-        const activeState: SwitchState = { ...state, isActive: true }
-        const resolvedTrackStyle = theme.components.switch.track(state, trackStyle)
-        const resolvedThumbInactive = theme.components.switch.thumb(inactiveState, thumbStyle)
-        const resolvedThumbActive = theme.components.switch.thumb(activeState, thumbStyle)
-        const trackWidth = toNumber(resolvedTrackStyle.width as string | number | undefined, 40)
-        const trackHeight = toNumber(resolvedTrackStyle.height as string | number | undefined, 28)
-        const fallbackBorderWidth = toNumber(resolvedTrackStyle.borderWidth, 0)
-        const trackBorderTop = toNumber(resolvedTrackStyle.borderTopWidth, fallbackBorderWidth)
-        const trackBorderRight = toNumber(resolvedTrackStyle.borderRightWidth, fallbackBorderWidth)
-        const trackBorderBottom = toNumber(resolvedTrackStyle.borderBottomWidth, fallbackBorderWidth)
-        const trackBorderLeft = toNumber(resolvedTrackStyle.borderLeftWidth, fallbackBorderWidth)
-        const thumbInactiveSize = toNumber(resolvedThumbInactive.width as string | number | undefined, 16)
-        const thumbActiveSize = toNumber(resolvedThumbActive.width as string | number | undefined, 20)
-        const trackInnerWidth = trackWidth - trackBorderLeft - trackBorderRight
-        const trackInnerHeight = trackHeight - trackBorderTop - trackBorderBottom
-        const thumbOffsetInactive = (trackInnerHeight - thumbInactiveSize) / 2
-        const thumbOffsetActive = trackInnerWidth - thumbActiveSize - (
-          (trackInnerHeight - thumbActiveSize) / 2
-        )
-        const thumbTopInactive = (trackInnerHeight - thumbInactiveSize) / 2
-        const thumbTopActive = (trackInnerHeight - thumbActiveSize) / 2
-        const thumbSize = progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [thumbInactiveSize, thumbActiveSize],
-        })
-        const thumbTranslateX = progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [thumbOffsetInactive, thumbOffsetActive],
-        })
-        const thumbTop = progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [thumbTopInactive, thumbTopActive],
-        })
-        const thumbColor = value
-          ? resolvedThumbActive.backgroundColor
-          : resolvedThumbInactive.backgroundColor
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View style={resolvedTrackStyle}>
-              <Animated.View
-                style={{
-                  position: 'absolute',
-                  top: thumbTop,
-                  width: thumbSize,
-                  height: thumbSize,
-                  borderRadius: thumbActiveSize / 2,
-                  backgroundColor: thumbColor,
-                  transform: [{ translateX: thumbTranslateX }],
-                }}
-              />
-            </View>
-          </Fragment>
-        )
-      }}
+      {hitBox.isVisualizing && (
+        <View
+          pointerEvents="none"
+          style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+        />
+      )}
+      <View style={resolvedTrackStyle}>
+        <Animated.View style={animatedThumbStyle} />
+      </View>
     </Pressable>
   )
 }

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

@@ -1,26 +1,179 @@
-import { forwardRef } from 'react'
-import type { TextInput } from 'react-native'
+import {
+  forwardRef,
+  useMemo,
+  useState
+} from 'react'
+import {
+  TextInput,
+  View,
+  type TextInputProps
+} from 'react-native'
 
+import {
+  useControlledState,
+  useDelay
+} from '@helpwave/hightide-utils/hooks'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import { Input, type InputProps } from './Input'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
+import type {
+  TextareaContainerStyle,
+  TextareaState,
+  TextareaStateLayerStyle,
+  TextareaTextStyle
+} from '../../theme/types/components/textarea'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
+import type { EditCompleteOptions, EditCompleteOptionsResolved } from './Input'
+
+const defaultEditCompleteOptions: EditCompleteOptionsResolved = {
+  allowEnterComplete: false,
+  onBlur: true,
+  afterDelay: false,
+  delay: 2500,
+}
 
-export type TextareaProps = InputProps
+export type TextareaProps = Omit<TextInputProps, 'value' | 'style'>
+  & Partial<FormFieldDataHandling<string>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    color?: ColorPairToken,
+    editCompleteOptions?: EditCompleteOptions,
+    initialValue?: string,
+    style?: StyleOverwrite<TextareaState, TextareaContainerStyle>,
+    stateLayerStyle?: StyleOverwrite<TextareaState, TextareaStateLayerStyle>,
+    textStyle?: StyleOverwrite<TextareaState, TextareaTextStyle>,
+  }
 
 export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea({
+  value: controlledValue,
+  initialValue,
+  color,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onValueChange,
+  onEditComplete,
+  editCompleteOptions,
   style,
+  stateLayerStyle,
   textStyle,
+  onPointerEnter,
+  onPointerLeave,
   ...props
 }, ref) {
   const { theme } = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue,
+  })
+
+  const {
+    onBlur: allowEditCompleteOnBlur,
+    afterDelay,
+    delay,
+    allowEnterComplete,
+  } = { ...defaultEditCompleteOptions, ...editCompleteOptions }
+
+  const { restartTimer, clearTimer } = useDelay({
+    delay,
+    disabled: !afterDelay || disabled || readOnly,
+  })
+
+  const interactive = !disabled && !readOnly
+
+  const state = useMemo((): TextareaState => ({
+    color,
+    isDisabled: disabled,
+    isInvalid: invalid,
+    isReadonly: readOnly,
+    isHovered: interactive && isHovered,
+    isPressed: interactive && isPressed,
+    isFocused: interactive && isFocused,
+  }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.textarea.container, state, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.textarea.stateLayer, state, stateLayerStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.textarea.text, state, textStyle)
+  const resolvedPlaceholderStyle = useMemoizedTheme(theme.components.textarea.placeholder, state)
 
   return (
-    <Input
-      {...props}
-      ref={ref}
-      multiline
-      textAlignVertical="top"
-      style={(state) => theme.components.textarea.container(state, style)}
-      textStyle={(state) => theme.components.textarea.text(state, textStyle)}
-    />
+    <View
+      style={resolvedContainerStyle}
+      onPointerEnter={(event) => {
+        if (interactive) {
+          setIsHovered(true)
+        }
+        onPointerEnter?.(event)
+      }}
+      onPointerLeave={(event) => {
+        setIsHovered(false)
+        onPointerLeave?.(event)
+      }}
+    >
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      <TextInput
+        {...props}
+        ref={ref}
+        value={value}
+        editable={interactive}
+        multiline
+        textAlignVertical="top"
+        placeholderTextColor={resolvedPlaceholderStyle.color}
+        onChangeText={(nextValue) => {
+          props.onChangeText?.(nextValue)
+          restartTimer(() => {
+            onEditComplete?.(nextValue)
+          })
+          setValue(nextValue)
+        }}
+        onFocus={(event) => {
+          if (interactive) {
+            setIsFocused(true)
+          }
+          props.onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          setIsFocused(false)
+          props.onBlur?.(event)
+          if (allowEditCompleteOnBlur) {
+            onEditComplete?.(value ?? '')
+            clearTimer()
+          }
+        }}
+        onPressIn={(event) => {
+          if (interactive) {
+            setIsPressed(true)
+          }
+          props.onPressIn?.(event)
+        }}
+        onPressOut={(event) => {
+          setIsPressed(false)
+          props.onPressOut?.(event)
+        }}
+        onSubmitEditing={(event) => {
+          props.onSubmitEditing?.(event)
+          if (allowEnterComplete) {
+            onEditComplete?.(value ?? '')
+            clearTimer()
+          }
+        }}
+        style={resolvedTextStyle}
+        accessibilityState={{ disabled, selected: required }}
+      />
+    </View>
   )
 })

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

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
@@ -15,6 +15,7 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 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 {
   ThemedPressableIconStyle,
   ThemedPressableState,
@@ -45,13 +46,6 @@ export type ThemedPressableProps = Omit<PressableProps, 'style'> & {
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
 }
 
-type PressableInteraction = {
-  pressed: boolean,
-  hovered?: boolean,
-  focused?: boolean,
-  focusVisible?: boolean,
-}
-
 export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>, ThemedPressableProps>(function ThemedPressable({
   children,
   size = 'md',
@@ -75,19 +69,33 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
     hitSlop: providedHitSlop,
     onLayout: providedOnLayout,
   })
+  const [isPressed, setIsPressed] = useState(false)
 
-  const resolveState = (interaction: PressableInteraction): ThemedPressableState => ({
+  const resolvedState = useMemo((): ThemedPressableState => ({
     size,
     color,
     coloringStyle,
     coloringColorVariant,
     hasAdditionalHorizontalPadding,
     isDisabled: !!disabled,
-    isPressed: interaction.pressed,
-    isHovered: !!interaction.hovered,
-    isFocused: !!interaction.focused,
-    isFocusVisible: !!interaction.focusVisible,
-  })
+    isPressed,
+  }), [
+    size,
+    color,
+    coloringStyle,
+    coloringColorVariant,
+    hasAdditionalHorizontalPadding,
+    disabled,
+    isPressed,
+  ])
+
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.themedPressable.container, resolvedState, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.themedPressable.stateLayer, resolvedState, stateLayerStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.themedPressable.text, resolvedState, textStyle)
+  const resolvedIconStyle = useMemoizedTheme(theme.components.themedPressable.icon, resolvedState, iconStyle)
+  const resolvedChildren = typeof children === 'function'
+    ? children({ pressed: isPressed })
+    : children
 
   return (
     <Pressable
@@ -96,43 +104,34 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       disabled={disabled}
       hitSlop={hitSlop}
       onLayout={onLayout}
-      style={(pressableState) => {
-        const state = resolveState(pressableState)
-        return theme.components.themedPressable.container(state, style)
+      style={resolvedContainerStyle}
+      onPressIn={(event) => {
+        setIsPressed(true)
+        props.onPressIn?.(event)
       }}
-    >
-      {(pressableState) => {
-        const state = resolveState(pressableState)
-        const resolvedText = theme.components.themedPressable.text(state, textStyle)
-        const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
-        const resolvedChildren = typeof children === 'function'
-          ? children(pressableState)
-          : children
-        const backroundColor = theme.components.themedPressable.container(state, style).backgroundColor
-
-        return (
-          <Fragment>
-            {hitBox.isVisualizing && (
-              <View
-                pointerEvents="none"
-                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
-              />
-            )}
-            <View
-              pointerEvents="none"
-              style={theme.components.themedPressable.stateLayer(state, stateLayerStyle)}
-            />
-            <ContentThemeOverrideProvider
-              foreground={resolvedText.color}
-              background={backroundColor}
-              textStyle={resolvedText}
-              iconStyle={resolvedIcon}
-            >
-              {resolvedChildren}
-            </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={resolvedIconStyle}
+      >
+        {resolvedChildren}
+      </ContentThemeOverrideProvider>
     </Pressable>
   )
 })