@butternutbox/pawprint-native 2.0.1 → 2.2.0

package/dist/index.d.cts

@@ -1602,6 +1602,7 @@ type SelectFieldOwnProps = {
     optionalText?: string;
     placeholder?: string;
     leadingIcon?: React__default.ReactNode;
+    searchable?: boolean;
     noResultsText?: string;
     errorText?: string;
     onSearchQuery?: SelectOptionsResolver;
@@ -2129,6 +2130,7 @@ 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;
@@ -2156,6 +2158,8 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  * @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.

package/dist/index.d.ts

@@ -1602,6 +1602,7 @@ type SelectFieldOwnProps = {
     optionalText?: string;
     placeholder?: string;
     leadingIcon?: React__default.ReactNode;
+    searchable?: boolean;
     noResultsText?: string;
     errorText?: string;
     onSearchQuery?: SelectOptionsResolver;
@@ -2129,6 +2130,7 @@ 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;
@@ -2156,6 +2158,8 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  * @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.

package/dist/index.js

@@ -6003,9 +6003,8 @@ var DrawerContent = React65.forwardRef(
             panelShadowColor: modal.shadow.color,
             panelShadowOffsetY: parseTokenValue23(modal.shadow.offsetY),
             panelShadowBlur: parseTokenValue23(modal.shadow.blur),
-            accessible: true,
-            accessibilityRole: "none",
-            accessibilityViewIsModal: true
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: closeDrawer
           }, props), {
             children: [
               /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children }),
@@ -9032,6 +9031,7 @@ var SelectField = React65.forwardRef(
       optionalText,
       placeholder,
       leadingIcon,
+      searchable = true,
       noResultsText = "No results found",
       errorText = "Something went wrong",
       onSearchQuery,
@@ -9052,6 +9052,7 @@ var SelectField = React65.forwardRef(
       "optionalText",
       "placeholder",
       "leadingIcon",
+      "searchable",
       "noResultsText",
       "errorText",
       "onSearchQuery",
@@ -9187,7 +9188,7 @@ var SelectField = React65.forwardRef(
       setInputText("");
       setFilterQuery("");
       commitValue(null);
-      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      if (searchable) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     };
     const fieldState = error ? "error" : state;
     const isOpen = isFocused && !disabled;
@@ -9209,28 +9210,39 @@ var SelectField = React65.forwardRef(
     );
     const dropdown = React65.useMemo(() => {
       if (!isOpen || !anchorRect) return null;
-      return /* @__PURE__ */ jsx(
-        SelectFieldDropdown,
-        {
-          anchor: anchorRect,
-          placement: placement.direction,
-          maxHeight: placement.maxHeight,
-          screenHeight: windowHeight,
-          accessibilityLiveRegion: "polite",
-          children: /* @__PURE__ */ jsx(
-            SelectFieldList,
-            {
-              state: optionsState,
-              selectedValue,
-              onSelect: onOptionPress,
-              noResultsText,
-              errorText,
-              searchHintText
-            }
-          )
-        }
-      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        !searchable && /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            style: StyleSheet.absoluteFill,
+            onPress: () => setIsFocused(false),
+            accessible: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectFieldDropdown,
+          {
+            anchor: anchorRect,
+            placement: placement.direction,
+            maxHeight: placement.maxHeight,
+            screenHeight: windowHeight,
+            accessibilityLiveRegion: "polite",
+            children: /* @__PURE__ */ jsx(
+              SelectFieldList,
+              {
+                state: optionsState,
+                selectedValue,
+                onSelect: onOptionPress,
+                noResultsText,
+                errorText,
+                searchHintText
+              }
+            )
+          }
+        )
+      ] });
     }, [
+      searchable,
       isOpen,
       anchorRect,
       placement,
@@ -9249,11 +9261,12 @@ var SelectField = React65.forwardRef(
         {
           ref: inputRef,
           value: inputText,
-          onChangeText: handleChangeText,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
+          onChangeText: searchable ? handleChangeText : void 0,
+          onFocus: searchable ? handleFocus : void 0,
+          onBlur: searchable ? handleBlur : void 0,
+          onPress: !searchable && !disabled ? () => setIsFocused(true) : void 0,
           placeholder,
-          editable: !disabled,
+          editable: searchable && !disabled,
           state: fieldState,
           hideStateIcons: Boolean(clearAction),
           leadingIcon,
@@ -11290,6 +11303,7 @@ var DatePicker = React65.forwardRef(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
       minDate,
       maxDate
@@ -11310,6 +11324,7 @@ var DatePicker = React65.forwardRef(
       "getMonthLabel",
       "weekDayLabels",
       "getDateState",
+      "getDateAccessibilityLabel",
       "isDateDisabled",
       "minDate",
       "maxDate"
@@ -11486,6 +11501,7 @@ var DatePicker = React65.forwardRef(
                 token: datePicker.month.typography,
                 align: "center",
                 color: datePicker.month.colour.text.default,
+                accessibilityRole: "header",
                 children: resolvedMonthLabel
               }
             ) }),
@@ -11507,82 +11523,79 @@ var DatePicker = React65.forwardRef(
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
-              children: /* @__PURE__ */ jsx(
-                StyledDatesGrid,
-                {
-                  rowGap,
-                  accessible: true,
-                  accessibilityLabel: resolvedMonthLabel,
-                  children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsx(StyledDateRow, { children: row.map(
-                    (date, colIdx) => !date ? /* @__PURE__ */ jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        accessibilityElementsHidden: true
-                      },
-                      `empty-${rowIdx}-${colIdx}`
-                    ) : /* @__PURE__ */ jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        children: (() => {
-                          const isDisabled = resolvedIsDateDisabled(date);
-                          const {
+              children: /* @__PURE__ */ jsx(StyledDatesGrid, { rowGap, children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsx(StyledDateRow, { children: row.map(
+                (date, colIdx) => !date ? /* @__PURE__ */ jsx(
+                  StyledDateCell,
+                  {
+                    cellHeight,
+                    accessibilityElementsHidden: true
+                  },
+                  `empty-${rowIdx}-${colIdx}`
+                ) : /* @__PURE__ */ jsx(
+                  StyledDateCell,
+                  {
+                    cellHeight,
+                    children: (() => {
+                      var _a3;
+                      const isDisabled = resolvedIsDateDisabled(date);
+                      const {
+                        state,
+                        indicatorBg,
+                        indicatorBorderColor,
+                        textColor,
+                        typography,
+                        textDecoration,
+                        isSelected
+                      } = resolveDateCellConfig(date);
+                      const isUndeliverable = isDisabled && state === "default";
+                      const cellOpacity = isDisabled && !isUndeliverable ? disabledOpacity : 1;
+                      const cellTextDecoration = isUndeliverable ? "line-through" : textDecoration;
+                      const cellTextColor = isUndeliverable ? dt.colour.text.previous : textColor;
+                      return /* @__PURE__ */ jsx(
+                        Pressable,
+                        {
+                          onPress: !isDisabled ? () => onDateSelect == null ? void 0 : onDateSelect(date) : void 0,
+                          disabled: isDisabled,
+                          accessible: true,
+                          accessibilityRole: "button",
+                          accessibilityLabel: (_a3 = getDateAccessibilityLabel == null ? void 0 : getDateAccessibilityLabel(
+                            date,
                             state,
-                            indicatorBg,
-                            indicatorBorderColor,
-                            textColor,
-                            typography,
-                            textDecoration,
-                            isSelected
-                          } = resolveDateCellConfig(date);
-                          const isUndeliverable = isDisabled && state === "default";
-                          const cellOpacity = isDisabled && !isUndeliverable ? disabledOpacity : 1;
-                          const cellTextDecoration = isUndeliverable ? "line-through" : textDecoration;
-                          const cellTextColor = isUndeliverable ? dt.colour.text.previous : textColor;
-                          return /* @__PURE__ */ jsx(
-                            Pressable,
+                            resolvedMonthLabel
+                          )) != null ? _a3 : `${date.getDate()} ${resolvedMonthLabel}`,
+                          accessibilityState: {
+                            selected: isSelected,
+                            disabled: isDisabled
+                          },
+                          accessibilityHint: state === "current" ? "Today" : void 0,
+                          style: { opacity: cellOpacity },
+                          children: /* @__PURE__ */ jsx(
+                            StyledIndicator3,
                             {
-                              onPress: !isDisabled ? () => onDateSelect == null ? void 0 : onDateSelect(date) : void 0,
-                              disabled: isDisabled,
-                              accessible: true,
-                              accessibilityRole: "button",
-                              accessibilityLabel: `${date.getDate()} ${resolvedMonthLabel}`,
-                              accessibilityState: {
-                                selected: isSelected,
-                                disabled: isDisabled
-                              },
-                              accessibilityHint: state === "current" ? "Today" : void 0,
-                              style: { opacity: cellOpacity },
+                              indicatorSize,
+                              indicatorBorderRadius,
+                              indicatorBg,
+                              indicatorBorderWidth: indicatorBorderColor !== "transparent" ? selectedBorderWidth : 0,
+                              indicatorBorderColor,
+                              indicatorBorderStyle: indicatorBorderColor !== "transparent" ? "dashed" : "solid",
                               children: /* @__PURE__ */ jsx(
-                                StyledIndicator3,
+                                Typography,
                                 {
-                                  indicatorSize,
-                                  indicatorBorderRadius,
-                                  indicatorBg,
-                                  indicatorBorderWidth: indicatorBorderColor !== "transparent" ? selectedBorderWidth : 0,
-                                  indicatorBorderColor,
-                                  indicatorBorderStyle: indicatorBorderColor !== "transparent" ? "dashed" : "solid",
-                                  children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      color: cellTextColor,
-                                      token: typography,
-                                      textDecoration: cellTextDecoration,
-                                      children: date.getDate().toString()
-                                    }
-                                  )
+                                  color: cellTextColor,
+                                  token: typography,
+                                  textDecoration: cellTextDecoration,
+                                  children: date.getDate().toString()
                                 }
                               )
                             }
-                          );
-                        })()
-                      },
-                      toDateKey(date)
-                    )
-                  ) }, rowIdx))
-                }
-              )
+                          )
+                        }
+                      );
+                    })()
+                  },
+                  toDateKey(date)
+                )
+              ) }, rowIdx)) })
             },
             `${year}-${month}`
           )