@helpwave/hightide-native 0.6.0 → 0.7.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,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 MultiSelect = <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,70 @@
+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 MultiSelectOptionType<T = string> = {
+  id: string,
+  value: 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,87 @@
+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 { useMultiSelectContext } from './MultiSelectContext'
+
+export type MultiSelectOptionProps<T = string> = {
+  id: string,
+  value: T,
+  label: string,
+  disabled?: boolean,
+  children?: ReactNode,
+}
+
+export const MultiSelectOption = <T,>({
+  id,
+  value,
+  label,
+  disabled = false,
+  children,
+}: MultiSelectOptionProps<T>) => {
+  const { theme } = useTheme()
+  const context = useMultiSelectContext<T>()
+  const { registerOption } = context
+  const display = children ?? label
+
+  useEffect(() => {
+    return registerOption({
+      id,
+      value,
+      label,
+      display,
+      disabled,
+    })
+  }, [disabled, display, id, label, registerOption, value])
+
+  const isSelected = context.selectedIds.includes(id)
+  const isVisible = context.visibleOptionIds.includes(id)
+  const optionColor = isSelected
+    ? (context.config.color ?? theme.colors.primary)
+    : undefined
+
+  const optionState = useMemo((): MultiSelectOptionState => ({
+    color: context.config.color,
+    isSelected,
+    isHighlighted: context.highlightedId === id,
+    isDisabled: disabled,
+  }), [context.config.color, context.highlightedId, disabled, id, 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 : label}
+      content={children}
+      color={optionColor}
+      disabled={disabled}
+      onPress={() => context.toggleSelection(id)}
+      leading={(
+        <View style={resolvedCheckboxStyle}>
+          <ThemedIcon
+            icon={HightideIconRegistry.Check}
+            size={checkboxIcon.size}
+            strokeWidth={checkboxIcon.strokeWidth}
+            color={checkboxIcon.color}
+          />
+        </View>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,194 @@
+import type { ReactNode } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+
+import { useMultiSelect } from '../../../hooks/useMultiSelect'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../../types/formField'
+import {
+  MultiSelectContext,
+  type MultiSelectContextType,
+  type MultiSelectOptionType
+} from './MultiSelectContext'
+
+export type MultiSelectRootProps<T> = Partial<FormFieldDataHandling<T[]>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    value?: T[],
+    initialValue?: T[],
+    compareFunction?: (a: T, b: T) => boolean,
+    initialIsOpen?: boolean,
+    onClose?: () => void,
+    searchableThreshold?: number,
+    color?: ColorPairToken,
+    children: ReactNode,
+  }
+
+const mergeOptionMaps = <T,>(
+  snapshots: Record<string, MultiSelectOptionType<T>>,
+  live: ReadonlyArray<MultiSelectOptionType<T>>
+): Record<string, MultiSelectOptionType<T>> => {
+  const merged = { ...snapshots }
+  for (const option of live) {
+    merged[option.id] = option
+  }
+  return merged
+}
+
+export function MultiSelectRoot<T>({
+  children,
+  value,
+  onValueChange,
+  onEditComplete,
+  initialValue,
+  compareFunction,
+  initialIsOpen = false,
+  onClose,
+  searchableThreshold = 6,
+  color,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+}: MultiSelectRootProps<T>) {
+  const [options, setOptions] = useState<MultiSelectOptionType<T>[]>([])
+  const [optionSnapshots, setOptionSnapshots] = useState<Record<string, MultiSelectOptionType<T>>>({})
+
+  const registerOption = useCallback((item: MultiSelectOptionType<T>) => {
+    setOptionSnapshots((previous) => ({ ...previous, [item.id]: item }))
+    setOptions((previous) => {
+      const next = previous.filter((option) => option.id !== item.id)
+      next.push(item)
+      return next
+    })
+    return () => {
+      setOptions((previous) => previous.filter((option) => option.id !== item.id))
+    }
+  }, [])
+
+  const compare = useMemo(() => compareFunction ?? Object.is, [compareFunction])
+  const idToOptionMap = useMemo(
+    () => mergeOptionMaps(optionSnapshots, options),
+    [optionSnapshots, options]
+  )
+
+  const mappedValueIds = useMemo(() => {
+    if (value == null) {
+      return undefined
+    }
+    const known = Object.values(idToOptionMap)
+    return value
+      .map((item) => known.find((option) => compare(option.value, item))?.id)
+      .filter((id): id is string => id !== undefined)
+  }, [compare, idToOptionMap, value])
+
+  const mappedInitialValueIds = useMemo(() => {
+    if (initialValue == null) {
+      return []
+    }
+    const known = Object.values(idToOptionMap)
+    return initialValue
+      .map((item) => known.find((option) => compare(option.value, item))?.id)
+      .filter((id): id is string => id !== undefined)
+  }, [compare, idToOptionMap, initialValue])
+
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+
+  const onValueChangeWrapper = useCallback((ids: string[]) => {
+    const values = ids
+      .map((id) => idToOptionMap[id]?.value)
+      .filter((item): item is T => item != null)
+    onValueChangeStable(values)
+  }, [idToOptionMap, onValueChangeStable])
+
+  const onEditCompleteWrapper = useCallback((ids: string[]) => {
+    const values = ids
+      .map((id) => idToOptionMap[id]?.value)
+      .filter((item): item is T => item != null)
+    onEditCompleteStable(values)
+  }, [idToOptionMap, onEditCompleteStable])
+
+  const hookOptions = useMemo(
+    () => options.map((option) => ({
+      id: option.id,
+      label: option.label,
+      disabled: option.disabled,
+    })),
+    [options]
+  )
+
+  const state = useMultiSelect({
+    options: hookOptions,
+    value: mappedValueIds,
+    onValueChange: onValueChangeWrapper,
+    onEditComplete: onEditCompleteWrapper,
+    initialValue: mappedInitialValueIds,
+    initialIsOpen,
+    onClose,
+  })
+
+  const knownOptionCount = Math.max(options.length, Object.keys(optionSnapshots).length)
+  const selectedValues = useMemo(
+    () => state.value
+      .map((id) => idToOptionMap[id]?.value)
+      .filter((item): item is T => item != null),
+    [idToOptionMap, state.value]
+  )
+
+  const contextValue = useMemo((): MultiSelectContextType<T> => ({
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    selectedIds: state.value,
+    highlightedId: state.highlightedId,
+    isOpen: state.isOpen,
+    options,
+    visibleOptionIds: state.visibleOptionIds,
+    idToOptionMap,
+    value: selectedValues,
+    registerOption,
+    toggleSelection: state.toggleSelection,
+    highlightFirst: state.highlightFirst,
+    highlightLast: state.highlightLast,
+    highlightNext: state.highlightNext,
+    highlightPrevious: state.highlightPrevious,
+    highlightItem: state.highlightItem,
+    handleTypeaheadKey: state.handleTypeaheadKey,
+    setIsOpen: state.setIsOpen,
+    toggleIsOpen: state.toggleOpen,
+    config: {
+      searchableThreshold,
+      color,
+    },
+    search: {
+      hasSearch: knownOptionCount >= searchableThreshold,
+      searchQuery: state.searchQuery,
+      setSearchQuery: state.setSearchQuery,
+    },
+  }), [
+    color,
+    disabled,
+    idToOptionMap,
+    invalid,
+    knownOptionCount,
+    options,
+    readOnly,
+    registerOption,
+    required,
+    searchableThreshold,
+    selectedValues,
+    state,
+  ])
+
+  return (
+    <MultiSelectContext.Provider value={contextValue as MultiSelectContextType<unknown>}>
+      {children}
+    </MultiSelectContext.Provider>
+  )
+}