@butternutbox/pawprint-native 2.2.0 → 2.3.0

package/dist/index.d.cts

@@ -2132,6 +2132,7 @@ type DatePickerOwnProps = {
     getDateState?: (date: Date) => DateItemState;
     getDateAccessibilityLabel?: (date: Date, state: DateItemState, monthLabel: string) => string;
     isDateDisabled?: (date: Date) => boolean;
+    focusDate?: Date | null;
     minDate?: Date;
     maxDate?: Date;
 };
@@ -2160,6 +2161,8 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  *   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 | null} [focusDate] - Moves screen-reader focus to this date's cell when it is set or
+ *   changes, e.g. to return focus to a picked date after a confirmation sheet closes.
  * @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

@@ -2132,6 +2132,7 @@ type DatePickerOwnProps = {
     getDateState?: (date: Date) => DateItemState;
     getDateAccessibilityLabel?: (date: Date, state: DateItemState, monthLabel: string) => string;
     isDateDisabled?: (date: Date) => boolean;
+    focusDate?: Date | null;
     minDate?: Date;
     maxDate?: Date;
 };
@@ -2160,6 +2161,8 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  *   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 | null} [focusDate] - Moves screen-reader focus to this date's cell when it is set or
+ *   changes, e.g. to return focus to a picked date after a confirmation sheet closes.
  * @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

@@ -8,10 +8,10 @@ export * from '@butternutbox/pawprint-fonts';
 import React65, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
-import { Text, View, Animated, Pressable, TextInput, Easing, useWindowDimensions, StyleSheet, Platform, Keyboard, PanResponder, Image, ScrollView, ActionSheetIOS, TouchableOpacity, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
+import { Text, View, Animated, Pressable, TextInput, Easing, useWindowDimensions, StyleSheet, Platform, Keyboard, PanResponder, Image, ActionSheetIOS, TouchableOpacity, Modal, TouchableWithoutFeedback, FlatList, AccessibilityInfo, ScrollView, Linking, Clipboard, Alert } from 'react-native';
 import Svg72, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-import Animated9, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
+import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as ProgressPrimitive from '@rn-primitives/progress';
@@ -20,7 +20,7 @@ import * as SliderPrimitive from '@rn-primitives/slider';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { scheduleOnRN } from 'react-native-worklets';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
-import { isSameDay, isToday, isBefore, format } from 'date-fns';
+import { isSameDay, format, isToday, isBefore } from 'date-fns';
 import * as TabsPrimitive from '@rn-primitives/tabs';
 
 var __defProp = Object.defineProperty;
@@ -1464,6 +1464,7 @@ var IconButton = React65.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         disabled: isDisabled,
+        accessibilityRole: "button",
         accessibilityLabel: ariaLabel,
         accessibilityState: { disabled: isDisabled, busy: loading },
         onPressIn: () => setPressed(true),
@@ -5627,7 +5628,7 @@ var Animated5 = React65.forwardRef(
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsx(
-      Animated9.View,
+      Animated10.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -5706,6 +5707,10 @@ var DrawerBodyMaxContext = createContext(null);
 var useDrawerBodyMax = () => useContext(DrawerBodyMaxContext);
 var DrawerFooterContext = React65.createContext(false);
 var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
+var DrawerKeyboardInsetContext = createContext(
+  null
+);
+var useDrawerKeyboardInset = () => useContext(DrawerKeyboardInsetContext);
 var DrawerHeaderContext = React65.createContext(null);
 var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
 var KEYBOARD_DURATION = 250;
@@ -5713,6 +5718,7 @@ var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue23 = (value) => parseFloat(value);
+var claimTouch = () => true;
 var StyledPanel2 = styled52(View)(
   ({
     panelBorderRadius,
@@ -5753,9 +5759,8 @@ var DrawerContent = React65.forwardRef(
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
-    const [keyboardHeight, setKeyboardHeight] = useState(0);
     const keyboardSpacer = useRef(new Animated.Value(0)).current;
-    const maxHeight = (windowHeight - keyboardHeight) * 0.9;
+    const maxHeight = windowHeight * 0.9;
     const topBorder = parseTokenValue23(dimensions3.borderWidth.sm);
     const noFooterBodyPadding = parseTokenValue23(dimensions3.spacing["2xl"]);
     const closeDrawerRef = useRef(closeDrawer);
@@ -5793,11 +5798,9 @@ var DrawerContent = React65.forwardRef(
         }).start();
       };
       const shown = Keyboard.addListener(showEvent, (event) => {
-        setKeyboardHeight(event.endCoordinates.height);
         lift(event.endCoordinates.height, event.duration);
       });
       const hidden = Keyboard.addListener(hideEvent, (event) => {
-        setKeyboardHeight(0);
         lift(0, event.duration);
       });
       return () => {
@@ -5997,17 +6000,18 @@ var DrawerContent = React65.forwardRef(
             panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
-            panelMaxHeight: maxHeight + keyboardHeight,
+            panelMaxHeight: maxHeight,
             panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
             panelShadowOffsetY: parseTokenValue23(modal.shadow.offsetY),
             panelShadowBlur: parseTokenValue23(modal.shadow.blur),
             accessibilityViewIsModal: true,
-            onAccessibilityEscape: closeDrawer
+            onAccessibilityEscape: closeDrawer,
+            onStartShouldSetResponder: claimTouch
           }, props), {
             children: [
-              /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children }),
+              /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children: /* @__PURE__ */ jsx(DrawerKeyboardInsetContext.Provider, { value: keyboardSpacer, children }) }),
               /* @__PURE__ */ jsx(Animated.View, { style: { height: keyboardSpacer } })
             ]
           })
@@ -6320,27 +6324,36 @@ var DrawerDescription = React65.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledScrollView = styled52(ScrollView)(
-  ({
-    bodyPaddingHorizontal,
-    bodyPaddingRight,
-    bodyMaxHeight,
-    bodyPaddingBottom
-  }) => ({
-    // No `flex: 1`: the ScrollView self-sizes to its content (up to
-    // `maxHeight`), so the panel wraps tight around short content and scrolls
-    // only when content exceeds the chrome-aware cap.
-    flexGrow: 0,
-    flexShrink: 1,
-    paddingLeft: bodyPaddingHorizontal,
-    paddingRight: bodyPaddingRight,
-    maxHeight: bodyMaxHeight,
-    paddingBottom: bodyPaddingBottom
-  })
-);
+var StyledScrollView = styled52(Animated.ScrollView)(({ bodyPaddingHorizontal, bodyPaddingRight, bodyPaddingBottom }) => ({
+  // No `flex: 1`: the ScrollView self-sizes to its content (up to
+  // `maxHeight`), so the panel wraps tight around short content and scrolls
+  // only when content exceeds the chrome-aware cap.
+  flexGrow: 0,
+  flexShrink: 1,
+  paddingLeft: bodyPaddingHorizontal,
+  paddingRight: bodyPaddingRight,
+  paddingBottom: bodyPaddingBottom
+}));
 var DrawerBody = React65.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
+    var _b = _a, {
+      children,
+      contentContainerStyle,
+      keyboardShouldPersistTaps = "handled",
+      scrollEventThrottle = 16,
+      onScroll,
+      onLayout,
+      style
+    } = _b, props = __objRest(_b, [
+      "children",
+      "contentContainerStyle",
+      "keyboardShouldPersistTaps",
+      "scrollEventThrottle",
+      "onScroll",
+      "onLayout",
+      "style"
+    ]);
+    var _a2;
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
@@ -6348,12 +6361,83 @@ var DrawerBody = React65.forwardRef(
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
     const providedMaxHeight = useDrawerBodyMax();
+    const keyboardInset = useDrawerKeyboardInset();
     const { height: windowHeight } = useWindowDimensions();
     const insets = useSafeAreaInsets();
     const gap = parseTokenValue27(content.slot.gap);
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
     const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
+    const _b2 = (_a2 = StyleSheet.flatten(style)) != null ? _a2 : {}, { maxHeight: styleMaxHeight } = _b2, restStyle = __objRest(_b2, ["maxHeight"]);
+    const cap = typeof styleMaxHeight === "number" ? Math.min(styleMaxHeight, bodyMaxHeight) : bodyMaxHeight;
+    const maxHeight = useMemo(() => {
+      if (!keyboardInset || bodyMaxHeight <= 0) return cap;
+      const slack = bodyMaxHeight - cap;
+      return keyboardInset.interpolate({
+        inputRange: slack > 0 ? [0, slack, bodyMaxHeight] : [0, bodyMaxHeight],
+        outputRange: slack > 0 ? [cap, cap, 0] : [cap, 0],
+        extrapolate: "clamp"
+      });
+    }, [keyboardInset, bodyMaxHeight, cap]);
+    const scrollRef = useRef(null);
+    const contentRef = useRef(null);
+    const scrollOffsetRef = useRef(0);
+    const viewportHeightRef = useRef(0);
+    const combinedRef = useCallback(
+      (node) => {
+        scrollRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleScroll = useCallback(
+      (event) => {
+        scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+        onScroll == null ? void 0 : onScroll(event);
+      },
+      [onScroll]
+    );
+    const handleLayout = useCallback(
+      (event) => {
+        viewportHeightRef.current = event.nativeEvent.layout.height;
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [onLayout]
+    );
+    useEffect(() => {
+      const subscription = Keyboard.addListener("keyboardDidShow", () => {
+        const scrollView = scrollRef.current;
+        const focusedInput = TextInput.State.currentlyFocusedInput();
+        const contentView = contentRef.current;
+        if (!scrollView || !focusedInput || !contentView) return;
+        focusedInput.measureLayout(
+          contentView,
+          (_left, inputTop, _width, inputHeight) => {
+            const viewportHeight = viewportHeightRef.current;
+            if (viewportHeight <= 0) return;
+            const visibleTop = scrollOffsetRef.current;
+            const visibleBottom = visibleTop + viewportHeight;
+            const wantedTop = inputTop - gap;
+            const wantedBottom = inputTop + inputHeight + gap;
+            if (wantedTop < visibleTop) {
+              scrollView.scrollTo({ y: Math.max(0, wantedTop), animated: true });
+            } else if (wantedBottom > visibleBottom) {
+              scrollView.scrollTo({
+                y: Math.min(wantedTop, wantedBottom - viewportHeight),
+                animated: true
+              });
+            }
+          },
+          () => {
+          }
+        );
+      });
+      return () => subscription.remove();
+    }, [gap]);
     const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.minHeight) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? Math.max(
       parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]),
@@ -6362,11 +6446,12 @@ var DrawerBody = React65.forwardRef(
     return /* @__PURE__ */ jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
-        ref,
+        ref: combinedRef,
+        innerViewRef: contentRef,
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
-        bodyMaxHeight,
         bodyPaddingBottom,
+        style: [restStyle, { maxHeight }],
         contentContainerStyle: [
           {
             gap,
@@ -6374,7 +6459,11 @@ var DrawerBody = React65.forwardRef(
             paddingBottom: 0
           },
           contentContainerStyle
-        ]
+        ],
+        keyboardShouldPersistTaps,
+        scrollEventThrottle,
+        onScroll: handleScroll,
+        onLayout: handleLayout
       }, props), {
         children
       })
@@ -7920,7 +8009,7 @@ var StyledTrack = styled52(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled52(Animated9.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled52(Animated10.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -9130,9 +9219,17 @@ var SelectField = React65.forwardRef(
         }
       );
     }, [windowHeight, keyboardHeight, maxDropdownHeight]);
+    const isOpen = isFocused && !disabled;
     React65.useEffect(() => {
-      if (isFocused) measurePlacement();
-    }, [isFocused, measurePlacement]);
+      if (!isOpen) return;
+      let frame = 0;
+      const track = () => {
+        measurePlacement();
+        frame = requestAnimationFrame(track);
+      };
+      track();
+      return () => cancelAnimationFrame(frame);
+    }, [isOpen, measurePlacement]);
     React65.useEffect(() => {
       if (!isControlled || isFocused) return;
       if (value === null || value === void 0) {
@@ -9191,7 +9288,6 @@ var SelectField = React65.forwardRef(
       if (searchable) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     };
     const fieldState = error ? "error" : state;
-    const isOpen = isFocused && !disabled;
     const clearAction = !disabled && inputText.length > 0 ? /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -9503,7 +9599,7 @@ var Wrapper = styled52(View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled52(Animated9.View)({
+var SelectIcon = styled52(Animated10.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
@@ -10054,9 +10150,9 @@ var Slider = React65.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsx(View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsx(Animated9.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsx(Animated10.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsx(
-                    Animated9.View,
+                    Animated10.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -10470,7 +10566,7 @@ var StackedCard = ({
   }));
   const isFront = depth === 0;
   return /* @__PURE__ */ jsx(
-    Animated9.View,
+    Animated10.View,
     {
       entering: wasBackfill ? void 0 : CARD_ENTERING,
       exiting: CARD_EXITING,
@@ -10478,7 +10574,7 @@ var StackedCard = ({
       accessibilityElementsHidden: !isFront,
       importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
       style: [CARD_BASE_STYLE, { zIndex: -depth }],
-      children: /* @__PURE__ */ jsx(Animated9.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Animated10.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
         Notification,
         {
           variant: "toast",
@@ -11192,6 +11288,7 @@ var MONTH_SLIDE_EXITING = {
   forward: FadeOutLeft.duration(200),
   backward: FadeOutRight.duration(200)
 };
+var FOCUS_DELAY_MS = 150;
 var DEFAULT_WEEK_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function buildCalendarGrid(year, month) {
   const firstDay = new Date(year, month, 1);
@@ -11305,6 +11402,7 @@ var DatePicker = React65.forwardRef(
       getDateState,
       getDateAccessibilityLabel,
       isDateDisabled,
+      focusDate,
       minDate,
       maxDate
     } = _b, rest = __objRest(_b, [
@@ -11326,6 +11424,7 @@ var DatePicker = React65.forwardRef(
       "getDateState",
       "getDateAccessibilityLabel",
       "isDateDisabled",
+      "focusDate",
       "minDate",
       "maxDate"
     ]);
@@ -11362,6 +11461,18 @@ var DatePicker = React65.forwardRef(
       }),
       [datePicker, dt, theme2]
     );
+    const cellRefs = useRef(/* @__PURE__ */ new Map());
+    const focusTime = focusDate == null ? void 0 : focusDate.getTime();
+    useEffect(() => {
+      if (focusTime === void 0) return;
+      const target = new Date(focusTime);
+      if (target.getFullYear() !== year || target.getMonth() !== month) return;
+      const timeout = setTimeout(() => {
+        const cell = cellRefs.current.get(toDateKey(target));
+        if (cell) AccessibilityInfo.sendAccessibilityEvent(cell, "focus");
+      }, FOCUS_DELAY_MS);
+      return () => clearTimeout(timeout);
+    }, [focusTime, year, month]);
     const resolvedGetDateState = useCallback(
       (date) => {
         var _a3;
@@ -11519,7 +11630,7 @@ var DatePicker = React65.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsx(
-            Animated9.View,
+            Animated10.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
@@ -11554,6 +11665,11 @@ var DatePicker = React65.forwardRef(
                       return /* @__PURE__ */ jsx(
                         Pressable,
                         {
+                          ref: (node) => {
+                            const key = toDateKey(date);
+                            if (node) cellRefs.current.set(key, node);
+                            else cellRefs.current.delete(key);
+                          },
                           onPress: !isDisabled ? () => onDateSelect == null ? void 0 : onDateSelect(date) : void 0,
                           disabled: isDisabled,
                           accessible: true,
@@ -12791,7 +12907,7 @@ var ShineOverlay = ({
         { borderRadius: radius, overflow: "hidden" }
       ],
       children: width > 0 && /* @__PURE__ */ jsx(
-        Animated9.View,
+        Animated10.View,
         {
           style: [
             { position: "absolute", top: 0, bottom: 0, width: bandWidth },
@@ -12846,7 +12962,7 @@ var createNudgingIcon = (IconComponent, axis, direction) => {
     const nudgeStyle = useAnimatedStyle(
       () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
     );
-    return /* @__PURE__ */ jsx(Animated9.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
+    return /* @__PURE__ */ jsx(Animated10.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
   };
   NudgingIcon.displayName = `Nudging(${(_a = IconComponent.displayName) != null ? _a : "Icon"})`;
   return NudgingIcon;