@helpwave/hightide-native 0.6.0 → 0.9.0

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

@@ -3,11 +3,9 @@ import {
   useMemo,
   useState
 } from 'react'
-import type {
-  TextStyle } from 'react-native'
 import {
-  StyleSheet,
   TextInput,
+  View,
   type TextInputProps
 } from 'react-native'
 
@@ -19,9 +17,11 @@ import {
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   InputContainerStyle,
   InputState,
+  InputStateLayerStyle,
   InputTextStyle
 } from '../../theme/types/components/input'
 import type { StyleOverwrite } from '../../theme/types/resolver'
@@ -52,7 +52,8 @@ export type InputProps = Omit<TextInputProps, 'value' | 'style'>
     color?: ColorPairToken,
     editCompleteOptions?: EditCompleteOptions,
     initialValue?: string,
-    style?:  StyleOverwrite<InputState, InputContainerStyle>,
+    style?: StyleOverwrite<InputState, InputContainerStyle>,
+    stateLayerStyle?: StyleOverwrite<InputState, InputStateLayerStyle>,
     textStyle?: StyleOverwrite<InputState, InputTextStyle>,
   }
 
@@ -68,7 +69,10 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
   onEditComplete,
   editCompleteOptions,
   style,
+  stateLayerStyle,
   textStyle,
+  onPointerEnter,
+  onPointerLeave,
   ...props
 }, ref) {
   const { theme } = useTheme()
@@ -106,91 +110,76 @@ export const Input = forwardRef<TextInput, InputProps>(function Input({
     isFocused: interactive && isFocused,
   }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
 
-  const resolvedContainerStyle = useMemo(
-    () => theme.components.input.container(state, style),
-    [theme, state, style]
-  )
-  const resolvedTextStyle = useMemo(
-    () => theme.components.input.text(state, textStyle),
-    [theme, state, textStyle]
-  )
-  const resolvedPlaceholderStyle = useMemo(
-    () => theme.components.input.placeholder(state),
-    [theme, state]
-  )
-
-
-  const resolvedStyle = useMemo(
-    () => {
-      const resolvedSheet: TextStyle = StyleSheet.flatten<TextStyle>([
-        resolvedContainerStyle,
-        resolvedTextStyle,
-      ])
-      // this is required for android to work
-      // TODO find a better solution like separating container and text input
-      delete resolvedSheet['boxShadow']
-      return resolvedSheet
-    },
-    [resolvedContainerStyle, resolvedTextStyle]
-  )
+  const resolvedContainerStyle = useMemoizedTheme(theme.components.input.container, state, style)
+  const resolvedStateLayerStyle = useMemoizedTheme(theme.components.input.stateLayer, state, stateLayerStyle)
+  const resolvedTextStyle = useMemoizedTheme(theme.components.input.text, state, textStyle)
+  const resolvedPlaceholderStyle = useMemoizedTheme(theme.components.input.placeholder, state)
 
   return (
-    <TextInput
-      {...props}
-      ref={ref}
-      value={value}
-      editable={interactive}
-      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)
-      }}
+    <View
+      style={resolvedContainerStyle}
       onPointerEnter={(event) => {
         if (interactive) {
           setIsHovered(true)
         }
-        props.onPointerEnter?.(event)
+        onPointerEnter?.(event)
       }}
       onPointerLeave={(event) => {
         setIsHovered(false)
-        props.onPointerLeave?.(event)
-      }}
-      onSubmitEditing={(event) => {
-        props.onSubmitEditing?.(event)
-        if (allowEnterComplete) {
-          onEditComplete?.(value ?? '')
-          clearTimer()
-        }
+        onPointerLeave?.(event)
       }}
-      placeholderTextColor={resolvedPlaceholderStyle.color}
-      style={resolvedStyle}
-      accessibilityState={{ disabled, selected: required }}
-    />
+    >
+      <View
+        pointerEvents="none"
+        style={resolvedStateLayerStyle}
+      />
+      <TextInput
+        {...props}
+        ref={ref}
+        value={value}
+        editable={interactive}
+        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()
+          }
+        }}
+        placeholderTextColor={resolvedPlaceholderStyle.color}
+        style={resolvedTextStyle}
+        accessibilityState={{ disabled, selected: required }}
+      />
+    </View>
   )
 })

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

@@ -0,0 +1,17 @@
+import { MultiSelectComponent } from './MultiSelectComponent'
+import { MultiSelectContext } from './MultiSelectContext'
+import { MultiSelectMenu } from './MultiSelectMenu'
+import { MultiSelectOption } from './MultiSelectOption'
+import { MultiSelectRoot } from './MultiSelectRoot'
+import { MultiSelectTrigger } from './MultiSelectTrigger'
+
+const MultiSelect = Object.assign(MultiSelectComponent, {
+  Root: MultiSelectRoot,
+  Trigger: MultiSelectTrigger,
+  Option: MultiSelectOption,
+  Menu: MultiSelectMenu,
+  Context: MultiSelectContext,
+  Provider: MultiSelectContext.Provider,
+})
+
+export { MultiSelect }

package/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { MultiSelectRootProps } from './MultiSelectRoot'
+import { MultiSelectRoot } from './MultiSelectRoot'
+import type { MultiSelectOptionType } from './MultiSelectContext'
+import { MultiSelectMenu, type MultiSelectMenuProps } from './MultiSelectMenu'
+import { MultiSelectTrigger, type MultiSelectTriggerProps } from './MultiSelectTrigger'
+
+export type MultiSelectProps<T = string> = Omit<MultiSelectRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  placeholder?: MultiSelectTriggerProps<T>['placeholder'],
+  selectedDisplay?: (options: ReadonlyArray<MultiSelectOptionType<T>>) => ReactNode,
+  triggerProps?: MultiSelectTriggerProps<T>,
+  menuProps?: Omit<MultiSelectMenuProps, 'children'>,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const MultiSelectComponent = <T,>({
+  children,
+  placeholder,
+  selectedDisplay,
+  triggerProps,
+  menuProps,
+  style,
+  ...props
+}: MultiSelectProps<T>) => {
+  return (
+    <MultiSelectRoot<T> {...props}>
+      <View style={[{ width: '100%' }, style]}>
+        <MultiSelectTrigger<T>
+          placeholder={placeholder}
+          selectedDisplay={selectedDisplay}
+          {...triggerProps}
+        />
+        <MultiSelectMenu {...menuProps}>{children}</MultiSelectMenu>
+      </View>
+    </MultiSelectRoot>
+  )
+}

package/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
+import type { UseMultiSelectFirstHighlightBehavior } from '../../../hooks/useMultiSelect'
+import type { FormFieldInteractionStates } from '../../../types/formField'
+
+export type MultiSelectOptionIdentity<T> = {
+  value: T,
+  id: string,
+}
+
+export type MultiSelectOptionType<T = string> = {
+  value: MultiSelectOptionIdentity<T>,
+  label: string,
+  display?: ReactNode,
+  disabled?: boolean,
+}
+
+export type MultiSelectContextState<T> = Partial<FormFieldInteractionStates> & {
+  value: T[],
+  options: ReadonlyArray<MultiSelectOptionType<T>>,
+  selectedIds: string[],
+  highlightedId: string | null,
+  isOpen: boolean,
+}
+
+export type MultiSelectContextComputedState<T> = {
+  visibleOptionIds: ReadonlyArray<string>,
+  idToOptionMap: Record<string, MultiSelectOptionType<T>>,
+}
+
+export type MultiSelectContextActions<T> = {
+  registerOption: (option: MultiSelectOptionType<T>) => () => void,
+  toggleSelection: (id: string, isSelected?: boolean) => void,
+  highlightFirst: () => void,
+  highlightLast: () => void,
+  highlightNext: () => void,
+  highlightPrevious: () => void,
+  highlightItem: (id: string) => void,
+  handleTypeaheadKey: (key: string) => void,
+  setIsOpen: (open: boolean, behavior?: UseMultiSelectFirstHighlightBehavior) => void,
+  toggleIsOpen: (behavior?: UseMultiSelectFirstHighlightBehavior) => void,
+}
+
+export type MultiSelectContextSearch = {
+  hasSearch: boolean,
+  searchQuery: string,
+  setSearchQuery: (query: string) => void,
+}
+
+export type MultiSelectContextConfig = {
+  searchableThreshold: number,
+  color?: ColorPairToken,
+}
+
+export type MultiSelectContextType<T> = MultiSelectContextActions<T>
+  & MultiSelectContextState<T>
+  & MultiSelectContextComputedState<T>
+  & {
+    config: MultiSelectContextConfig,
+    search: MultiSelectContextSearch,
+  }
+
+export const MultiSelectContext = createContext<MultiSelectContextType<unknown> | null>(null)
+
+export function useMultiSelectContext<T>(): MultiSelectContextType<T> {
+  const ctx = useContext(MultiSelectContext)
+  if (!ctx) {
+    throw new Error('useMultiSelectContext must be used within MultiSelectRoot')
+  }
+  return ctx as MultiSelectContextType<T>
+}

package/src/components/user-interaction/MultiSelect/MultiSelectMenu.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react'
+import { Modal, Pressable, ScrollView, View } from 'react-native'
+
+import { useTranslation } from '@helpwave/hightide-utils/context'
+
+import { useTheme } from '../../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../../hooks/useMemoizedTheme'
+import { ThemedText } from '../../visualization-and-display/ThemedText'
+import { SearchBar } from '../SearchBar'
+import { useMultiSelectContext } from './MultiSelectContext'
+
+export type MultiSelectMenuProps = {
+  children?: ReactNode,
+}
+
+export const MultiSelectMenu = ({ children }: MultiSelectMenuProps) => {
+  const { theme } = useTheme()
+  const translation = useTranslation()
+  const context = useMultiSelectContext()
+  const multiSelectTheme = theme.components.multiSelect
+  const isSearchVisible = context.search.hasSearch
+  const visibleCount = context.visibleOptionIds.length
+  const showEmptySearchResults = isSearchVisible
+    && context.search.searchQuery.trim().length > 0
+    && visibleCount === 0
+
+  const resolvedOverlayStyle = useMemoizedTheme(multiSelectTheme.overlay, {})
+  const resolvedMenuStyle = useMemoizedTheme(multiSelectTheme.menu, { hasSearch: isSearchVisible })
+  const resolvedHeaderStyle = useMemoizedTheme(multiSelectTheme.header, {})
+  const resolvedEmptyTextStyle = useMemoizedTheme(multiSelectTheme.emptyText, {})
+
+  return (
+    <>
+      {!context.isOpen && (
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={{ width: 0, height: 0, overflow: 'hidden' }}
+        >
+          {children}
+        </View>
+      )}
+      <Modal
+        visible={context.isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => context.setIsOpen(false)}
+      >
+        <Pressable
+          style={resolvedOverlayStyle}
+          onPress={() => context.setIsOpen(false)}
+        >
+          <Pressable
+            style={resolvedMenuStyle}
+            onPress={(event) => event.stopPropagation()}
+          >
+            {isSearchVisible && (
+              <View style={resolvedHeaderStyle}>
+                <SearchBar
+                  value={context.search.searchQuery}
+                  onValueChange={context.search.setSearchQuery}
+                  onSearch={context.search.setSearchQuery}
+                />
+              </View>
+            )}
+            {showEmptySearchResults && (
+              <View
+                style={{
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <ThemedText style={resolvedEmptyTextStyle}>
+                  {translation('nothingFound')}
+                </ThemedText>
+              </View>
+            )}
+            <ScrollView>
+              {children}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  )
+}

package/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx

@@ -0,0 +1,106 @@
+import type { ReactNode } from 'react'
+import { useEffect, useMemo } from 'react'
+import { View } 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 { MultiSelectOptionState } from '../../../theme/types/components/multiSelect'
+import { ListActionItem } from '../../list/ListActionItem'
+import { ThemedIcon } from '../../visualization-and-display/ThemedIcon'
+import type { MultiSelectOptionIdentity } from './MultiSelectContext'
+import { useMultiSelectContext } from './MultiSelectContext'
+
+export type MultiSelectOptionProps<T = string> = (
+  T extends string
+    ? {
+        valueId?: undefined,
+        value: T,
+        label?: string,
+      }
+    : {
+        valueId: string,
+        value: T,
+        label: string,
+      }
+) & {
+  disabled?: boolean,
+  children?: ReactNode,
+}
+
+const toIdentity = <T,>(value: T, valueId: string | undefined): MultiSelectOptionIdentity<T> => {
+  if (valueId === undefined) {
+    return { value, id: value as string }
+  }
+  return { value, id: valueId }
+}
+
+export const MultiSelectOption = <T,>({
+  value,
+  valueId,
+  label,
+  disabled = false,
+  children,
+}: MultiSelectOptionProps<T>) => {
+  const { theme } = useTheme()
+  const context = useMultiSelectContext<T>()
+  const { registerOption } = context
+  const identity = useMemo(() => toIdentity<T>(value, valueId), [value, valueId])
+  const resolvedLabel: string = valueId === undefined ? (label ?? (value as string)) : label
+  const display = children ?? resolvedLabel
+  const optionId = identity.id
+
+  useEffect(() => {
+    return registerOption({
+      value: identity,
+      label: resolvedLabel,
+      display,
+      disabled,
+    })
+  }, [disabled, display, identity, registerOption, resolvedLabel])
+
+  const isSelected = context.selectedIds.includes(optionId)
+  const isVisible = context.visibleOptionIds.includes(optionId)
+  const optionColor = isSelected
+    ? (context.config.color ?? theme.colors.primary)
+    : undefined
+
+  const optionState = useMemo((): MultiSelectOptionState => ({
+    color: context.config.color,
+    isSelected,
+    isHighlighted: context.highlightedId === optionId,
+    isDisabled: disabled,
+  }), [context.config.color, context.highlightedId, disabled, optionId, isSelected])
+
+  const multiSelectTheme = theme.components.multiSelect
+  const resolvedCheckboxStyle = useMemoizedTheme(multiSelectTheme.checkbox, optionState)
+  const checkboxIcon = useMemoizedTheme<MultiSelectOptionState, IconStyle>(
+    multiSelectTheme.checkboxIcon,
+    optionState
+  )
+
+  if (!context.isOpen || !isVisible) {
+    return null
+  }
+
+  return (
+    <ListActionItem
+      title={children ? undefined : resolvedLabel}
+      content={children}
+      color={optionColor}
+      disabled={disabled}
+      onPress={() => context.toggleSelection(optionId)}
+      leading={(
+        <View style={resolvedCheckboxStyle}>
+          <ThemedIcon
+            icon={HightideIconRegistry.Check}
+            size={checkboxIcon.size}
+            strokeWidth={checkboxIcon.strokeWidth}
+            color={checkboxIcon.color}
+          />
+        </View>
+      )}
+    />
+  )
+}