@butternutbox/pawprint-native 2.0.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "2.0.1",
+  "version": "2.2.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/DatePicker/DatePicker.tsx

@@ -121,6 +121,11 @@ type DatePickerOwnProps = {
   getMonthLabel?: (year: number, month: number, locale?: Locale) => string
   weekDayLabels?: [string, string, string, string, string, string, string]
   getDateState?: (date: Date) => DateItemState
+  getDateAccessibilityLabel?: (
+    date: Date,
+    state: DateItemState,
+    monthLabel: string
+  ) => string
   isDateDisabled?: (date: Date) => boolean
   minDate?: Date
   maxDate?: Date
@@ -229,6 +234,8 @@ const StyledIndicator = styled(View)<{
  * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
  * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
  *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date, state: DateItemState, monthLabel: string) => string} [getDateAccessibilityLabel] - Returns the screen-reader label for a date,
+ *   e.g. to announce delivery states. Defaults to "{day} {monthLabel}".
  * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
  * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
  * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.
@@ -270,6 +277,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
       minDate,
       maxDate,
@@ -470,6 +478,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
               token={datePicker.month.typography}
               align="center"
               color={datePicker.month.colour.text.default}
+              accessibilityRole="header"
             >
               {resolvedMonthLabel}
             </Typography>
@@ -493,11 +502,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
           entering={MONTH_SLIDE_ENTERING[slideDir]}
           exiting={MONTH_SLIDE_EXITING[slideDir]}
         >
-          <StyledDatesGrid
-            rowGap={rowGap}
-            accessible
-            accessibilityLabel={resolvedMonthLabel}
-          >
+          <StyledDatesGrid rowGap={rowGap}>
             {calendarRows.map((row, rowIdx) => (
               <StyledDateRow key={rowIdx}>
                 {row.map((date, colIdx) =>
@@ -547,7 +552,13 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
                             disabled={isDisabled}
                             accessible
                             accessibilityRole="button"
-                            accessibilityLabel={`${date.getDate()} ${resolvedMonthLabel}`}
+                            accessibilityLabel={
+                              getDateAccessibilityLabel?.(
+                                date,
+                                state,
+                                resolvedMonthLabel
+                              ) ?? `${date.getDate()} ${resolvedMonthLabel}`
+                            }
                             accessibilityState={{
                               selected: isSelected,
                               disabled: isDisabled

package/src/components/molecules/Drawer/DrawerContent.tsx

@@ -433,9 +433,8 @@ export const DrawerContent = React.forwardRef<View, DrawerContentProps>(
                   panelShadowColor={modal.shadow.color}
                   panelShadowOffsetY={parseTokenValue(modal.shadow.offsetY)}
                   panelShadowBlur={parseTokenValue(modal.shadow.blur)}
-                  accessible
-                  accessibilityRole="none"
                   accessibilityViewIsModal
+                  onAccessibilityEscape={closeDrawer}
                   {...props}
                 >
                   <DrawerBodyMaxContext.Provider value={bodyMax}>

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}