@butternutbox/pawprint-native 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
     }
   },
   "devDependencies": {
-    "@butternutbox/pawprint-icons": "workspace:*",
-    "@butternutbox/pawprint-illustrations": "workspace:*",
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
+    "@butternutbox/pawprint-icons": "1.8.1",
+    "@butternutbox/pawprint-illustrations": "3.1.1",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -80,4 +80,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -151,6 +151,19 @@ export const WithOptionalText = () => (
   </StoryWrapper>
 )
 
+export const NotSearchable = () => (
+  <StoryWrapper>
+    <Section title="Pick from the list only">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        searchable={false}
+        options={COUNTRIES}
+      />
+    </Section>
+  </StoryWrapper>
+)
+
 export const Controlled = () => {
   const [country, setCountry] = useState<string | null>("ca")
 

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

@@ -293,6 +293,47 @@ describe("SelectField", () => {
     })
   })
 
+  describe("when not searchable", () => {
+    it("can't be typed into", () => {
+      const input = renderField({ searchable: false })
+
+      expect(input).toBeDisabled()
+    })
+
+    it("stays closed until the field is pressed", () => {
+      renderField({ searchable: false })
+
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    })
+
+    it("shows every option when the field is pressed", () => {
+      const input = renderField({ searchable: false })
+      fireEvent.click(input)
+
+      COUNTRIES.forEach((option) => {
+        expect(screen.getByText(option.label)).toBeInTheDocument()
+      })
+    })
+
+    it("selects the pressed option and closes", () => {
+      const onValueChange = vi.fn()
+      const input = renderField({ searchable: false, onValueChange })
+      fireEvent.click(input)
+      fireEvent.click(screen.getByText("Canada"))
+
+      expect(onValueChange).toHaveBeenCalledWith("ca")
+      expect(input).toHaveValue("Canada")
+      expect(screen.queryByText("Australia")).not.toBeInTheDocument()
+    })
+
+    it("does not open when disabled", () => {
+      const input = renderField({ searchable: false, disabled: true })
+      fireEvent.click(input)
+
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    })
+  })
+
   describe("controlled mode", () => {
     it("shows the label for the controlled value", () => {
       const input = renderField({ value: "au" })

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

@@ -2,6 +2,7 @@ import React from "react"
 import {
   Keyboard,
   Pressable,
+  StyleSheet,
   TextInput,
   useWindowDimensions,
   View,
@@ -40,6 +41,7 @@ type SelectFieldOwnProps = {
   optionalText?: string
   placeholder?: string
   leadingIcon?: React.ReactNode
+  searchable?: boolean
   noResultsText?: string
   errorText?: string
   onSearchQuery?: SelectOptionsResolver
@@ -73,6 +75,7 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
       optionalText,
       placeholder,
       leadingIcon,
+      searchable = true,
       noResultsText = "No results found",
       errorText = "Something went wrong",
       onSearchQuery,
@@ -244,7 +247,7 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
       setInputText("")
       setFilterQuery("")
       commitValue(null)
-      inputRef.current?.focus()
+      if (searchable) inputRef.current?.focus()
     }
 
     const fieldState: InputState = error ? "error" : state
@@ -272,24 +275,34 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
       if (!isOpen || !anchorRect) return null
 
       return (
-        <SelectFieldDropdown
-          anchor={anchorRect}
-          placement={placement.direction}
-          maxHeight={placement.maxHeight}
-          screenHeight={windowHeight}
-          accessibilityLiveRegion="polite"
-        >
-          <SelectFieldList
-            state={optionsState}
-            selectedValue={selectedValue}
-            onSelect={onOptionPress}
-            noResultsText={noResultsText}
-            errorText={errorText}
-            searchHintText={searchHintText}
-          />
-        </SelectFieldDropdown>
+        <>
+          {!searchable && (
+            <Pressable
+              style={StyleSheet.absoluteFill}
+              onPress={() => setIsFocused(false)}
+              accessible={false}
+            />
+          )}
+          <SelectFieldDropdown
+            anchor={anchorRect}
+            placement={placement.direction}
+            maxHeight={placement.maxHeight}
+            screenHeight={windowHeight}
+            accessibilityLiveRegion="polite"
+          >
+            <SelectFieldList
+              state={optionsState}
+              selectedValue={selectedValue}
+              onSelect={onOptionPress}
+              noResultsText={noResultsText}
+              errorText={errorText}
+              searchHintText={searchHintText}
+            />
+          </SelectFieldDropdown>
+        </>
       )
     }, [
+      searchable,
       isOpen,
       anchorRect,
       placement,
@@ -313,11 +326,14 @@ export const SelectField = React.forwardRef<View, SelectFieldProps>(
           <InputField
             ref={inputRef}
             value={inputText}
-            onChangeText={handleChangeText}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
+            onChangeText={searchable ? handleChangeText : undefined}
+            onFocus={searchable ? handleFocus : undefined}
+            onBlur={searchable ? handleBlur : undefined}
+            onPress={
+              !searchable && !disabled ? () => setIsFocused(true) : undefined
+            }
             placeholder={placeholder}
-            editable={!disabled}
+            editable={searchable && !disabled}
             state={fieldState}
             hideStateIcons={Boolean(clearAction)}
             leadingIcon={leadingIcon}