@helpwave/hightide-native 0.6.0 → 0.7.0

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

@@ -0,0 +1,123 @@
+import type { ReactNode } from 'react'
+import { useMemo, useState } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import { useTranslation } from '@helpwave/hightide-utils/context'
+
+import { useTheme } from '../../../global-contexts/theme/ThemeContext'
+import { useMemoizedTheme } from '../../../hooks/useMemoizedTheme'
+import { HightideIconRegistry } from '../../../icons/HightideIconRegistry'
+import type { MultiSelectState } from '../../../theme/types/components/multiSelect'
+import { Chip } from '../../visualization-and-display/Chip'
+import { ThemedText } from '../../visualization-and-display/ThemedText'
+import { IconButton } from '../IconButton'
+import { useMultiSelectContext, type MultiSelectOptionType } from './MultiSelectContext'
+import { ThemedPressable } from '../ThemedPressable'
+
+export type MultiSelectTriggerProps<T = string> = {
+  placeholder?: ReactNode,
+  selectedDisplay?: (options: ReadonlyArray<MultiSelectOptionType<T>>) => ReactNode,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const MultiSelectTrigger = <T,>({
+  placeholder = 'Select…',
+  selectedDisplay,
+  style,
+}: MultiSelectTriggerProps<T>) => {
+  const { theme } = useTheme()
+  const translation = useTranslation()
+  const context = useMultiSelectContext<T>()
+  const [isPressed, setIsPressed] = useState(false)
+  const interactive = !context.disabled && !context.readOnly
+  const selectedOptions = context.selectedIds
+    .map((id) => context.idToOptionMap[id])
+    .filter((option): option is MultiSelectOptionType<T> => option !== undefined)
+
+  const resolvedState = useMemo((): MultiSelectState => ({
+    color: context.config.color,
+    isDisabled: !!context.disabled,
+    isReadonly: !!context.readOnly,
+    isInvalid: !!context.invalid,
+    isOpen: context.isOpen,
+    hasSelections: selectedOptions.length > 0,
+    hasValue: selectedOptions.length > 0,
+    isPressed,
+  }), [
+    context.config.color,
+    context.disabled,
+    context.invalid,
+    context.isOpen,
+    context.readOnly,
+    isPressed,
+    selectedOptions.length,
+  ])
+
+  const multiSelectTheme = theme.components.multiSelect
+  const resolvedTriggerStyle = useMemoizedTheme(multiSelectTheme.trigger, resolvedState)
+  const resolvedStateLayerStyle = useMemoizedTheme(multiSelectTheme.stateLayer, resolvedState)
+  const resolvedTriggerTextStyle = useMemoizedTheme(multiSelectTheme.triggerText, resolvedState)
+  const iconSizeSm = theme.icongraphy.sizes.sm
+  const customDisplay = selectedDisplay?.(selectedOptions)
+
+  return (
+    <ThemedPressable
+      disabled={!interactive}
+      style={[resolvedTriggerStyle, style]}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      onPress={() => context.toggleIsOpen()}
+    >
+      <View pointerEvents="none" style={resolvedStateLayerStyle} />
+      {selectedDisplay ? (
+        customDisplay
+      ) : selectedOptions.length > 0 ? (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
+          {selectedOptions.map((option) => (
+            <Chip key={option.id} size="md" color={context.config.color} variant="tonal">
+              <ThemedText>{option.label ?? String(option.value)}</ThemedText>
+              {!context.readOnly && (
+                <View
+                  style={{
+                    position: 'relative',
+                    width: iconSizeSm,
+                    height: iconSizeSm,
+                  }}
+                >
+                  <IconButton
+                    accessibilityLabel={translation('remove')}
+                    size="sm"
+                    color={theme.colors.negative}
+                    variant="foreground"
+                    disabled={!interactive}
+                    onPress={() => context.toggleSelection(option.id, false)}
+                    style={{
+                      position: 'absolute',
+                      left: '50%',
+                      top: '50%',
+                      transform: [
+                        { translateX: '-50%' },
+                        { translateY: '-50%' },
+                      ],
+                    }}
+                    icon={HightideIconRegistry.X}
+                  />
+                </View>
+              )}
+            </Chip>
+          ))}
+        </View>
+      ) : typeof placeholder === 'string' || typeof placeholder === 'number' ? (
+        <ThemedText style={resolvedTriggerTextStyle}>
+          {placeholder}
+        </ThemedText>
+      ) : (
+        placeholder
+      )}
+    </ThemedPressable>
+  )
+}

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

@@ -0,0 +1,6 @@
+export * from './MultiSelect'
+export * from './MultiSelectContext'
+export * from './MultiSelectMenu'
+export * from './MultiSelectOption'
+export * from './MultiSelectRoot'
+export * from './MultiSelectTrigger'

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

@@ -22,6 +22,7 @@ import { useTranslation } from '@helpwave/hightide-utils/context'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import { useMemoizedTheme } from '../../hooks/useMemoizedTheme'
 import type {
   SearchBarContainerStyle,
   SearchBarIconButtonStyle,
@@ -124,22 +125,15 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
   }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
 
   const searchBarTheme = theme.components.searchBar
-  const resolvedContainerStyle = useMemo(
-    () => searchBarTheme.container(state, containerStyle),
-    [searchBarTheme, state, containerStyle]
-  )
-  const resolvedInputStyle = useMemo(
-    () => searchBarTheme.input(state, inputStyle),
-    [searchBarTheme, state, inputStyle]
-  )
-  const resolvedPlaceholderStyle = useMemo(
-    () => searchBarTheme.placeholder(state),
-    [searchBarTheme, state]
-  )
-  const resolvedIconButtonStyle = useMemo(
-    () => searchBarTheme.iconButton(state, iconButtonStyle),
-    [searchBarTheme, state, iconButtonStyle]
+  const resolvedContainerStyle = useMemoizedTheme(searchBarTheme.container, state, containerStyle)
+  const resolvedInputStyle = useMemoizedTheme(searchBarTheme.input, state, inputStyle)
+  const resolvedPlaceholderStyle = useMemoizedTheme(searchBarTheme.placeholder, state)
+  const resolvedIconButtonStyle = useMemoizedTheme(
+    searchBarTheme.iconButton,
+    state,
+    iconButtonStyle ?? searchButtonProps?.style
   )
+  const resolvedIconButtonColor = useMemoizedTheme(searchBarTheme.iconButtonColor, state)
 
   const commitSearch = (nextValue: string) => {
     onSearch(nextValue)
@@ -211,11 +205,11 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
         icon={HightideIconRegistry.Search}
         accessibilityLabel={translation('search')}
         size="sm"
-        color={searchButtonProps?.color ?? searchBarTheme.iconButtonColor(state)}
+        color={searchButtonProps?.color ?? resolvedIconButtonColor}
         variant={searchButtonProps?.variant ?? 'foreground'}
         disabled={disabled || searchButtonProps?.disabled}
         onPress={() => commitSearch(value ?? '')}
-        style={[resolvedIconButtonStyle, searchButtonProps?.style]}
+        style={resolvedIconButtonStyle}
       />
     </View>
   )

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { SelectRootProps } from './SelectRoot'
+import { SelectRoot } from './SelectRoot'
+import type { SelectOptionType } from './SelectContext'
+import { SelectMenu, type SelectMenuProps } from './SelectMenu'
+import { SelectTrigger, type SelectTriggerProps } from './SelectTrigger'
+
+export type SelectProps<T = string> = Omit<SelectRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  placeholder?: SelectTriggerProps<T>['placeholder'],
+  selectedDisplay?: (option: SelectOptionType<T> | null) => ReactNode,
+  triggerProps?: SelectTriggerProps<T>,
+  menuProps?: Omit<SelectMenuProps, 'children'>,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const Select = <T,>({
+  children,
+  placeholder,
+  selectedDisplay,
+  triggerProps,
+  menuProps,
+  style,
+  ...props
+}: SelectProps<T>) => {
+  return (
+    <SelectRoot<T> {...props}>
+      <View style={style}>
+        <SelectTrigger<T>
+          placeholder={placeholder}
+          selectedDisplay={selectedDisplay}
+          {...triggerProps}
+        />
+        <SelectMenu {...menuProps}>{children}</SelectMenu>
+      </View>
+    </SelectRoot>
+  )
+}

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

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
+import type { UseSelectFirstHighlightBehavior } from '../../../hooks/useSelect'
+import type { FormFieldInteractionStates } from '../../../types/formField'
+
+export type SelectOptionType<T = string> = {
+  id: string,
+  value: T,
+  label?: string,
+  display?: ReactNode,
+  disabled?: boolean,
+}
+
+export type SelectContextState<T> = Partial<FormFieldInteractionStates> & {
+  selectedId: string | null,
+  options: ReadonlyArray<SelectOptionType<T>>,
+  highlightedId: string | null,
+  isOpen: boolean,
+}
+
+export type SelectContextComputedState<T> = {
+  visibleOptionIds: ReadonlyArray<string>,
+  idToOptionMap: Record<string, SelectOptionType<T>>,
+}
+
+export type SelectContextActions<T> = {
+  registerOption: (option: SelectOptionType<T>) => () => void,
+  toggleSelection: (id: string) => void,
+  highlightFirst: () => void,
+  highlightLast: () => void,
+  highlightNext: () => void,
+  highlightPrevious: () => void,
+  highlightItem: (id: string) => void,
+  handleTypeaheadKey: (key: string) => void,
+  setIsOpen: (open: boolean, behavior?: UseSelectFirstHighlightBehavior) => void,
+  toggleIsOpen: (behavior?: UseSelectFirstHighlightBehavior) => void,
+}
+
+export type SelectContextSearch = {
+  hasSearch: boolean,
+  searchQuery: string,
+  setSearchQuery: (query: string) => void,
+}
+
+export type SelectContextConfig = {
+  searchableThreshold: number,
+  color?: ColorPairToken,
+}
+
+export type SelectContextType<T> = SelectContextActions<T>
+  & SelectContextState<T>
+  & SelectContextComputedState<T>
+  & {
+    config: SelectContextConfig,
+    search: SelectContextSearch,
+  }
+
+export const SelectContext = createContext<SelectContextType<unknown> | null>(null)
+
+export function useSelectContext<T>(): SelectContextType<T> {
+  const ctx = useContext(SelectContext)
+  if (!ctx) {
+    throw new Error('useSelectContext must be used within SelectRoot')
+  }
+  return ctx as SelectContextType<T>
+}

package/src/components/user-interaction/Select/SelectMenu.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 { useSelectContext } from './SelectContext'
+
+export type SelectMenuProps = {
+  children?: ReactNode,
+}
+
+export const SelectMenu = ({ children }: SelectMenuProps) => {
+  const { theme } = useTheme()
+  const translation = useTranslation()
+  const context = useSelectContext()
+  const selectTheme = theme.components.select
+  const isSearchVisible = context.search.hasSearch
+  const visibleCount = context.visibleOptionIds.length
+  const showEmptySearchResults = isSearchVisible
+    && context.search.searchQuery.trim().length > 0
+    && visibleCount === 0
+
+  const resolvedOverlayStyle = useMemoizedTheme(selectTheme.overlay, {})
+  const resolvedMenuStyle = useMemoizedTheme(selectTheme.menu, { hasSearch: isSearchVisible })
+  const resolvedHeaderStyle = useMemoizedTheme(selectTheme.header, {})
+  const resolvedEmptyTextStyle = useMemoizedTheme(selectTheme.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/Select/SelectOption.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import { useEffect, useMemo } from 'react'
+
+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 { useSelectContext } from './SelectContext'
+
+export type SelectOptionProps<T = string> = {
+  id: string,
+  value: T,
+  label: string,
+  disabled?: boolean,
+  children?: ReactNode,
+}
+
+export const SelectOption = <T,>({
+  id,
+  value,
+  label,
+  disabled = false,
+  children,
+}: SelectOptionProps<T>) => {
+  const { theme } = useTheme()
+  const context = useSelectContext<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.selectedId === id
+  const isVisible = context.visibleOptionIds.includes(id)
+
+  const optionState = useMemo((): MultiSelectOptionState => ({
+    isSelected,
+    isHighlighted: context.highlightedId === id,
+    isDisabled: disabled,
+  }), [context.highlightedId, disabled, id, isSelected])
+
+  const checkIcon = useMemoizedTheme<MultiSelectOptionState, IconStyle>(
+    theme.components.listItem.action.icon,
+    optionState
+  )
+
+  if (!context.isOpen || !isVisible) {
+    return null
+  }
+
+  return (
+    <ListActionItem
+      title={children ? undefined : label}
+      content={children}
+      disabled={disabled}
+      onPress={() => context.toggleSelection(id)}
+      leading={(
+        <ThemedIcon
+          icon={HightideIconRegistry.Check}
+          size={checkIcon.size}
+          strokeWidth={checkIcon.strokeWidth}
+          color={isSelected ? theme.colors.primary.color : 'transparent'}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,186 @@
+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 { useSelect } from '../../../hooks/useSelect'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../../types/formField'
+import {
+  SelectContext,
+  type SelectContextType,
+  type SelectOptionType
+} from './SelectContext'
+
+export type SelectRootProps<T> = Partial<FormFieldDataHandling<T>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    value?: T | null,
+    initialValue?: T | null,
+    compareFunction?: (a: T | null, b: T | null) => boolean,
+    initialIsOpen?: boolean,
+    onClose?: () => void,
+    onIsOpenChange?: (isOpen: boolean) => void,
+    searchableThreshold?: number,
+    color?: ColorPairToken,
+    children: ReactNode,
+  }
+
+const mergeOptionMaps = <T,>(
+  snapshots: Record<string, SelectOptionType<T>>,
+  live: ReadonlyArray<SelectOptionType<T>>
+): Record<string, SelectOptionType<T>> => {
+  const merged = { ...snapshots }
+  for (const option of live) {
+    merged[option.id] = option
+  }
+  return merged
+}
+
+export function SelectRoot<T>({
+  children,
+  value,
+  onValueChange,
+  onEditComplete,
+  initialValue,
+  compareFunction,
+  initialIsOpen = false,
+  onClose,
+  onIsOpenChange,
+  searchableThreshold = 6,
+  color,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+}: SelectRootProps<T>) {
+  const [options, setOptions] = useState<SelectOptionType<T>[]>([])
+  const [optionSnapshots, setOptionSnapshots] = useState<Record<string, SelectOptionType<T>>>({})
+
+  const registerOption = useCallback((item: SelectOptionType<T>) => {
+    setOptionSnapshots((previous) => ({ ...previous, [item.id]: item }))
+    setOptions((previous) => {
+      const next = previous.filter((option) => option.value !== item.value)
+      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 mappedValueId = useMemo(() => {
+    if (value === undefined) {
+      return undefined
+    }
+    return Object.values(idToOptionMap).find((option) => compare(option.value, value))?.id ?? null
+  }, [compare, idToOptionMap, value])
+
+  const mappedInitialValueId = useMemo(() => {
+    if (initialValue === undefined) {
+      return undefined
+    }
+    return Object.values(idToOptionMap).find((option) => compare(option.value, initialValue))?.id ?? null
+  }, [compare, idToOptionMap, initialValue])
+
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)
+
+  const onValueChangeWrapper = useCallback((id: string) => {
+    const option = idToOptionMap[id]
+    if (option === undefined) {
+      return
+    }
+    onValueChangeStable(option.value)
+  }, [idToOptionMap, onValueChangeStable])
+
+  const onEditCompleteWrapper = useCallback((id: string) => {
+    const option = idToOptionMap[id]
+    if (option === undefined) {
+      return
+    }
+    onEditCompleteStable(option.value)
+  }, [idToOptionMap, onEditCompleteStable])
+
+  const hookOptions = useMemo(
+    () => options.map((option) => ({
+      id: option.id,
+      label: option.label,
+      disabled: option.disabled,
+    })),
+    [options]
+  )
+
+  const state = useSelect({
+    value: mappedValueId,
+    initialValue: mappedInitialValueId,
+    onValueChange: onValueChangeWrapper,
+    onEditComplete: onEditCompleteWrapper,
+    options: hookOptions,
+    initialIsOpen,
+    onClose,
+    onIsOpenChange: onIsOpenChangeStable,
+  })
+
+  const knownOptionCount = Math.max(options.length, Object.keys(optionSnapshots).length)
+
+  const contextValue = useMemo(() => ({
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    selectedId: state.value,
+    highlightedId: state.highlightedValue,
+    isOpen: state.isOpen,
+    options,
+    visibleOptionIds: state.visibleOptionIds,
+    idToOptionMap,
+    registerOption,
+    toggleSelection: state.selectValue,
+    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,
+    state,
+  ])
+
+  return (
+    <SelectContext.Provider value={contextValue as SelectContextType<unknown>}>
+      {children}
+    </SelectContext.Provider>
+  )
+}