@butternutbox/pawprint-native 0.9.0 → 0.10.1

package/src/components/molecules/SelectField/SelectFieldContent.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps, ScrollView } from "react-native"
+import { View, ViewProps, ScrollView, StyleSheet } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as SelectPrimitive from "@rn-primitives/select"
@@ -11,11 +11,6 @@ type SelectFieldContentProps = {
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-// TODO: Replace with dynamic positioning when @rn-primitives/select supports it on React Native
-// These values position the dropdown below and aligned with the trigger
-const DROPDOWN_OFFSET_X = -32 // Align with trigger left edge
-const DROPDOWN_OFFSET_Y = -94 // Position below trigger with gap
-
 const StyledContentShadow = styled(View)(({ theme }) => {
   const { dropdown } = theme.tokens.components.dropdownList
   const shadow = dropdown.list.dropshadow.default
@@ -29,11 +24,7 @@ const StyledContentShadow = styled(View)(({ theme }) => {
     },
     shadowOpacity: 1,
     shadowRadius: parseTokenValue(shadow.blur),
-    elevation: 8,
-    transform: [
-      { translateX: DROPDOWN_OFFSET_X },
-      { translateY: DROPDOWN_OFFSET_Y }
-    ]
+    elevation: 8
   }
 })
 
@@ -59,6 +50,7 @@ export const SelectFieldContent = React.forwardRef<
 
   return (
     <SelectPrimitive.Portal>
+      <SelectPrimitive.Overlay style={StyleSheet.absoluteFill} />
       <SelectPrimitive.Content
         side="bottom"
         align="start"
@@ -70,7 +62,11 @@ export const SelectFieldContent = React.forwardRef<
           <StyledContentShadow {...rest}>
             <StyledContentInner>
               <SelectPrimitive.Viewport>
-                <ScrollView showsVerticalScrollIndicator nestedScrollEnabled>
+                <ScrollView
+                  showsVerticalScrollIndicator
+                  nestedScrollEnabled
+                  keyboardShouldPersistTaps="handled"
+                >
                   {children}
                 </ScrollView>
               </SelectPrimitive.Viewport>

package/src/components/molecules/SelectField/SelectFieldTrigger.tsx

@@ -17,6 +17,8 @@ type SelectFieldTriggerOwnProps = {
   leadingIcon?: React.ReactNode
   children?: React.ReactNode
   isOpen?: boolean
+  isSearching?: boolean
+  actionIcon?: React.ReactNode
 }
 
 export type SelectFieldTriggerProps = SelectFieldTriggerOwnProps &
@@ -59,7 +61,15 @@ export const SelectFieldTrigger = React.forwardRef<
   SelectFieldTriggerProps
 >(
   (
-    { state = "default", leadingIcon, children, isOpen = false, ...rest },
+    {
+      state = "default",
+      leadingIcon,
+      children,
+      isOpen = false,
+      isSearching = false,
+      actionIcon,
+      ...rest
+    },
     ref
   ) => {
     const theme = useTheme()
@@ -134,33 +144,41 @@ export const SelectFieldTrigger = React.forwardRef<
         <Icon icon={SuccessIcon} size="md" colour="success" />
       ) : null
 
+    const triggerContent = (
+      <StyledTriggerWrapper
+        state={state}
+        style={[
+          {
+            borderColor,
+            borderWidth: animatedBorderWidth,
+            paddingVertical: animatedPaddingVertical,
+            paddingHorizontal: animatedPaddingHorizontal
+          }
+        ]}
+      >
+        {leadingIcon && <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>}
+        {children}
+        {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
+        {actionIcon ? (
+          <StyledIconWrapper>{actionIcon}</StyledIconWrapper>
+        ) : (
+          <StyledArrowIcon
+            style={{ transform: [{ rotate: animatedRotation }] }}
+          >
+            <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
+          </StyledArrowIcon>
+        )}
+      </StyledTriggerWrapper>
+    )
+
+    if (isSearching) {
+      return <View ref={ref}>{triggerContent}</View>
+    }
+
     return (
       <SelectPrimitive.Trigger asChild>
         <Slot ref={ref}>
-          <Pressable {...rest}>
-            <StyledTriggerWrapper
-              state={state}
-              style={[
-                {
-                  borderColor,
-                  borderWidth: animatedBorderWidth,
-                  paddingVertical: animatedPaddingVertical,
-                  paddingHorizontal: animatedPaddingHorizontal
-                }
-              ]}
-            >
-              {leadingIcon && (
-                <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>
-              )}
-              {children}
-              {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
-              <StyledArrowIcon
-                style={{ transform: [{ rotate: animatedRotation }] }}
-              >
-                <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
-              </StyledArrowIcon>
-            </StyledTriggerWrapper>
-          </Pressable>
+          <Pressable {...rest}>{triggerContent}</Pressable>
         </Slot>
       </SelectPrimitive.Trigger>
     )

package/src/components/molecules/SelectField/SelectFieldValue.tsx

@@ -1,29 +1,28 @@
 import React from "react"
-import { Text, TextProps } from "react-native"
-import styled from "@emotion/native"
+import { View, ViewProps } from "react-native"
+import { useTheme } from "@emotion/react"
 import * as SelectPrimitive from "@rn-primitives/select"
+import { Typography } from "../../atoms/Typography"
 
 type SelectFieldValueProps = {
   placeholder?: string
-} & Omit<TextProps, "children">
+} & Omit<ViewProps, "children">
 
-const StyledValue = styled(Text)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
-
-  return {
-    flex: 1,
-    minWidth: 0,
-    textAlign: "left",
-    color: colour.field.text.default
-  }
-})
-
-export const SelectFieldValue = React.forwardRef<Text, SelectFieldValueProps>(
+export const SelectFieldValue = React.forwardRef<View, SelectFieldValueProps>(
   ({ placeholder, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour, field } = theme.tokens.components.inputs
+
     return (
-      <StyledValue ref={ref} {...rest}>
-        <SelectPrimitive.Value placeholder={placeholder ?? ""} />
-      </StyledValue>
+      <View ref={ref} style={{ flex: 1, minWidth: 0 }} {...rest}>
+        <Typography
+          token={field.placeholder.default}
+          color={colour.field.text.default}
+          align="left"
+        >
+          <SelectPrimitive.Value placeholder={placeholder ?? ""} />
+        </Typography>
+      </View>
     )
   }
 )