@coinbase/cds-mobile 8.53.1 → 8.54.0

package/esm/dates/__stories__/Calendar.stories.js

@@ -0,0 +1,360 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { Accordion, AccordionItem } from '../../accordion';
+import { Button } from '../../buttons/Button';
+import { Chip } from '../../chips';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons';
+import { Box } from '../../layout';
+import { AnimatedCaret } from '../../motion/AnimatedCaret';
+import { Tray } from '../../overlays/tray/Tray';
+import { Calendar } from '../Calendar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const today = new Date(new Date().setHours(0, 0, 0, 0));
+const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2);
+
+// Generate all weekend date ranges for a wide range (10 years before and after)
+const getWeekendDates = centerDate => {
+  const weekends = [];
+
+  // Cover 10 years before and after to ensure all weekends are disabled
+  const startDate = new Date(centerDate.getFullYear() - 10, 0, 1);
+  const endDate = new Date(centerDate.getFullYear() + 10, 11, 31);
+
+  // Find the first Saturday in the range
+  const currentDate = new Date(startDate);
+  const dayOfWeek = currentDate.getDay();
+  const daysUntilSaturday = dayOfWeek === 6 ? 0 : (6 - dayOfWeek + 7) % 7;
+  currentDate.setDate(currentDate.getDate() + daysUntilSaturday);
+
+  // Iterate through weekends, jumping 7 days at a time
+  while (currentDate <= endDate) {
+    const saturday = new Date(currentDate);
+    const sunday = new Date(currentDate);
+    sunday.setDate(sunday.getDate() + 1);
+
+    // Add the weekend as a date range tuple
+    weekends.push([saturday, sunday]);
+
+    // Jump to next Saturday (7 days later)
+    currentDate.setDate(currentDate.getDate() + 7);
+  }
+  return weekends;
+};
+
+// Compute weekends once at module level
+const disabledWeekend = getWeekendDates(today);
+const DATE_ACCORDION_ITEM_KEY = 'date';
+const formatDateLabel = (date, locale) => {
+  if (!date) {
+    return 'Select date';
+  }
+  return date.toLocaleDateString(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+const CalendarTrayExample = /*#__PURE__*/memo(function CalendarTrayExample(_ref) {
+  let {
+    renderTrigger
+  } = _ref;
+  const {
+    locale
+  } = useLocale();
+  const [date, setDate] = useState(null);
+  const [showPicker, setShowPicker] = useState(false);
+  const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
+  const calendarRef = useRef(null);
+  const handleOpenPicker = useCallback(() => {
+    setCalendarSelectedDate(date);
+    setShowPicker(true);
+  }, [date]);
+  const handleClosePicker = useCallback(() => {
+    setShowPicker(false);
+  }, []);
+  const handleCancelPicker = useCallback(() => {
+    setCalendarSelectedDate(null);
+    handleClosePicker();
+  }, [handleClosePicker]);
+  const handleCalendarDatePress = useCallback(selectedDate => {
+    setCalendarSelectedDate(selectedDate);
+  }, []);
+  const handleModalShow = useCallback(() => {
+    var _calendarRef$current;
+    (_calendarRef$current = calendarRef.current) == null || _calendarRef$current.focusInitialDate();
+  }, []);
+  const handleConfirmCalendar = useCallback(() => {
+    if (calendarSelectedDate) {
+      setDate(calendarSelectedDate);
+      handleClosePicker();
+    }
+  }, [calendarSelectedDate, handleClosePicker]);
+  const trayFooter = useMemo(() => /*#__PURE__*/_jsx(Box, {
+    paddingTop: 3,
+    paddingX: 3,
+    children: /*#__PURE__*/_jsx(Button, {
+      block: true,
+      compact: true,
+      accessibilityHint: !calendarSelectedDate ? 'Select a date first' : undefined,
+      accessibilityLabel: "Confirm date selection",
+      disabled: !calendarSelectedDate,
+      onPress: handleConfirmCalendar,
+      children: "Confirm"
+    })
+  }), [calendarSelectedDate, handleConfirmCalendar]);
+  const formattedLabel = formatDateLabel(date, locale);
+  const triggerProps = useMemo(() => ({
+    formattedLabel,
+    onOpen: handleOpenPicker,
+    showPicker
+  }), [formattedLabel, handleOpenPicker, showPicker]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderTrigger(triggerProps), showPicker && /*#__PURE__*/_jsx(Tray, {
+      accessibilityRole: "none",
+      footer: trayFooter,
+      handleBarAccessibilityLabel: "Close calendar",
+      handleBarVariant: "inside",
+      onCloseComplete: handleCancelPicker,
+      onOpenComplete: handleModalShow,
+      children: /*#__PURE__*/_jsx(Calendar, {
+        ref: calendarRef,
+        onPressDate: handleCalendarDatePress,
+        paddingBottom: 2,
+        paddingX: 2,
+        selectedDate: calendarSelectedDate
+      })
+    })]
+  });
+});
+const CalendarChipWithTrayExample = () => {
+  const renderTrigger = useCallback(_ref2 => {
+    let {
+      formattedLabel,
+      onOpen,
+      showPicker
+    } = _ref2;
+    return /*#__PURE__*/_jsx(Box, {
+      alignSelf: "flex-start",
+      children: /*#__PURE__*/_jsx(Chip, {
+        compact: true,
+        accessibilityLabel: formattedLabel,
+        end: /*#__PURE__*/_jsx(AnimatedCaret, {
+          active: true,
+          color: "fg",
+          rotate: showPicker ? 0 : 180,
+          size: "xs"
+        }),
+        onPress: onOpen,
+        children: formattedLabel
+      })
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(CalendarTrayExample, {
+    renderTrigger: renderTrigger
+  });
+};
+const CalendarChipWithTrayButtonExample = () => {
+  const renderTrigger = useCallback(_ref3 => {
+    let {
+      formattedLabel,
+      onOpen
+    } = _ref3;
+    return /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      accessibilityLabel: formattedLabel,
+      onPress: onOpen,
+      children: formattedLabel
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(CalendarTrayExample, {
+    renderTrigger: renderTrigger
+  });
+};
+const CalendarAccordionExample = () => {
+  const {
+    locale
+  } = useLocale();
+  const [date, setDate] = useState(null);
+  const [activeKey, setActiveKey] = useState(null);
+  const expanded = activeKey === DATE_ACCORDION_ITEM_KEY;
+  const calendarRef = useRef(null);
+  const handleDatePress = useCallback(selectedDate => {
+    setDate(selectedDate);
+    setActiveKey(null);
+  }, []);
+  useEffect(() => {
+    if (expanded) {
+      const id = requestAnimationFrame(() => {
+        var _calendarRef$current2;
+        (_calendarRef$current2 = calendarRef.current) == null || _calendarRef$current2.focusInitialDate();
+      });
+      return () => cancelAnimationFrame(id);
+    }
+  }, [expanded]);
+  return /*#__PURE__*/_jsx(Accordion, {
+    activeKey: activeKey,
+    setActiveKey: setActiveKey,
+    children: /*#__PURE__*/_jsx(AccordionItem, {
+      itemKey: DATE_ACCORDION_ITEM_KEY,
+      media: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "calendarEmpty"
+      }),
+      subtitle: formatDateLabel(date, locale),
+      title: "Date",
+      children: expanded ? /*#__PURE__*/_jsx(Calendar, {
+        ref: calendarRef,
+        onPressDate: handleDatePress,
+        selectedDate: date
+      }) : null
+    })
+  });
+};
+const CalendarScreen = () => {
+  const [basicDate, setBasicDate] = useState(today);
+  const [noSelectionDate, setNoSelectionDate] = useState(null);
+  const [seedDateDate, setSeedDateDate] = useState(null);
+  const [minMaxDate, setMinMaxDate] = useState(today);
+  const [futureDatesDate, setFutureDatesDate] = useState(null);
+  const [highlightedDate, setHighlightedDate] = useState(today);
+  const [disabledDatesDate, setDisabledDatesDate] = useState(null);
+  const [rangeDate, setRangeDate] = useState(today);
+  const [hiddenControlsDate, setHiddenControlsDate] = useState(today);
+  const highlightedRange = [yesterday, nextWeek];
+  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+  const {
+    color
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setBasicDate,
+        selectedDate: basicDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "No selection",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setNoSelectionDate,
+        selectedDate: noSelectionDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With seedDate (different month)",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        onPressDate: setSeedDateDate,
+        seedDate: nextMonth15th,
+        selectedDate: seedDateDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With min/max dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Date is outside allowed range",
+        maxDate: nextMonth15th,
+        minDate: lastMonth15th,
+        onPressDate: setMinMaxDate,
+        selectedDate: minMaxDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Future dates only",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Past dates are not available",
+        minDate: today,
+        onPressDate: setFutureDatesDate,
+        selectedDate: futureDatesDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With highlighted dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        highlightedDates: [yesterday, today, nextWeek],
+        onPressDate: setHighlightedDate,
+        selectedDate: highlightedDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With disabled dates",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Weekends are not available",
+        disabledDates: disabledWeekend,
+        onPressDate: setDisabledDatesDate,
+        seedDate: today,
+        selectedDate: disabledDatesDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With date range",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        highlightedDates: [highlightedRange],
+        onPressDate: setRangeDate,
+        selectedDate: rangeDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Hidden controls",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        hideControls: true,
+        maxDate: lastDayOfMonth,
+        minDate: firstDayOfMonth,
+        onPressDate: setHiddenControlsDate,
+        selectedDate: hiddenControlsDate
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabled: true,
+        selectedDate: today
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Slot styling",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        disabledDateError: "Date unavailable",
+        disabledDates: [twoDaysAgo],
+        highlightedDates: [tomorrow],
+        maxDate: nextMonth15th,
+        minDate: lastMonth15th,
+        onPressDate: setBasicDate,
+        selectedDate: basicDate,
+        styles: {
+          root: {
+            borderColor: color.bgLineHeavy,
+            borderRadius: 16,
+            borderWidth: 1,
+            padding: 12
+          },
+          header: {
+            backgroundColor: color.bgPositiveWash,
+            borderRadius: 16,
+            paddingBottom: 0
+          },
+          content: {
+            paddingVertical: 8
+          },
+          day: {
+            borderColor: color.bgNegative,
+            borderWidth: 1
+          },
+          navigation: {
+            borderColor: color.bgLineHeavy,
+            borderRadius: 8,
+            borderStyle: 'dashed',
+            borderWidth: 1
+          }
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With tray (Chip trigger)",
+      children: /*#__PURE__*/_jsx(CalendarChipWithTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With tray (Button trigger)",
+      children: /*#__PURE__*/_jsx(CalendarChipWithTrayButtonExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Accordion (select to collapse)",
+      children: /*#__PURE__*/_jsx(CalendarAccordionExample, {})
+    })]
+  });
+};
+export default CalendarScreen;

package/esm/dates/__stories__/DatePicker.stories.js

@@ -1,4 +1,6 @@
+const _excluded = ["date"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { useState } from 'react';
 import { InputLabel } from '../../controls/InputLabel';
 import { TextInput } from '../../controls/TextInput';
@@ -10,23 +12,25 @@ import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { Text } from '../../typography/Text';
 import { DatePicker } from '../DatePicker';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
+const today = new Date(new Date().setHours(0, 0, 0, 0));
 const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
-const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
 const exampleProps = {
-  maxDate: nextMonth15th,
-  minDate: lastMonth15th,
   invalidDateError: 'Please enter a valid date',
   disabledDateError: 'Date unavailable',
   requiredError: 'This field is required'
 };
-const ExampleDatePicker = props => {
-  const [date, setDate] = useState(null);
+const ExampleDatePicker = _ref => {
+  let {
+      date
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [dateValue, setDateValue] = useState(date != null ? date : null);
   const [error, setError] = useState(null);
   return /*#__PURE__*/_jsx(DatePicker, _extends({}, exampleProps, props, {
-    date: date,
+    date: dateValue,
     error: error,
-    onChangeDate: setDate,
+    onChangeDate: setDateValue,
     onErrorDate: setError
   }));
 };
@@ -36,20 +40,20 @@ export const FullExample = () => {
       title: "Default",
       children: /*#__PURE__*/_jsx(ExampleDatePicker, {
         required: true,
-        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
-        label: "Birthdate"
+        label: "Birthdate",
+        openCalendarAccessibilityLabel: "Birthdate calendar"
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multiple pickers",
       children: /*#__PURE__*/_jsxs(HStack, {
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example 1 calendar",
           label: "Example 1",
+          openCalendarAccessibilityLabel: "Example 1 calendar",
           width: "auto"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example 2 calendar",
           label: "Example 2",
+          openCalendarAccessibilityLabel: "Example 2 calendar",
           width: "auto"
         })]
       })
@@ -62,8 +66,8 @@ export const FullExample = () => {
           placeholder: "1",
           width: "auto"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "auto"
         })]
       })
@@ -76,8 +80,8 @@ export const FullExample = () => {
           placeholder: "1",
           width: "50%"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "auto"
         })]
       })
@@ -85,7 +89,6 @@ export const FullExample = () => {
       title: "DatePicker with labelNode",
       children: /*#__PURE__*/_jsx(ExampleDatePicker, {
         accessibilityLabel: "Birthdate",
-        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
         labelNode: /*#__PURE__*/_jsxs(HStack, {
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(InputLabel, {
@@ -100,7 +103,8 @@ export const FullExample = () => {
               size: "xs"
             })
           })]
-        })
+        }),
+        openCalendarAccessibilityLabel: "Birthdate calendar"
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "DatePicker fit-content width",
@@ -108,19 +112,41 @@ export const FullExample = () => {
         flexWrap: "wrap",
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar",
           label: "Example Date",
+          openCalendarAccessibilityLabel: "Example calendar",
           width: "fit-content"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar 2",
           label: "Example Date 2",
+          openCalendarAccessibilityLabel: "Example calendar 2",
           width: "fit-content"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
-          calendarIconButtonAccessibilityLabel: "Example calendar 3",
           label: "Example Date 3",
+          openCalendarAccessibilityLabel: "Example calendar 3",
           width: "fit-content"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with seed date (next month)",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        label: "Event date",
+        openCalendarAccessibilityLabel: "Seed date calendar",
+        seedDate: nextMonth15th
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with pre-selected date (next month)",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        date: nextMonth15th,
+        label: "Event date",
+        openCalendarAccessibilityLabel: "Seed date calendar"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with minimum date of tomorrow",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        disabledDateError: "Future dates only",
+        invalidDateError: "Future dates only",
+        label: "Future date",
+        minDate: tomorrow
+      })
     })]
   });
 };
@@ -132,7 +158,6 @@ export const CustomLabel = () => {
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
           accessibilityLabel: "Date of birth",
-          calendarIconButtonAccessibilityLabel: "Date of birth calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(InputLabel, {
@@ -147,11 +172,11 @@ export const CustomLabel = () => {
                 size: "xs"
               })
             })]
-          })
+          }),
+          openCalendarAccessibilityLabel: "Date of birth calendar"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           compact: true,
           accessibilityLabel: "Start date",
-          calendarIconButtonAccessibilityLabel: "Start date calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 0.5,
@@ -162,10 +187,10 @@ export const CustomLabel = () => {
               font: "label1",
               children: "*"
             })]
-          })
+          }),
+          openCalendarAccessibilityLabel: "Start date calendar"
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           accessibilityLabel: "End date",
-          calendarIconButtonAccessibilityLabel: "End date calendar",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 1,
@@ -178,7 +203,8 @@ export const CustomLabel = () => {
               children: "(optional)"
             })]
           }),
-          labelVariant: "inside"
+          labelVariant: "inside",
+          openCalendarAccessibilityLabel: "End date calendar"
         })]
       })
     })

package/esm/overlays/drawer/Drawer.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "style", "styles", "accessibilityRole", "animationType"];
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -39,6 +39,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       accessibilityLabel,
       accessibilityLabelledBy,
       reduceMotion,
+      onOpenComplete,
       style,
       styles,
       accessibilityRole = 'alert',
@@ -95,10 +96,11 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
         } = _ref4;
         if (finished) {
           isMounted.current = true;
+          onOpenComplete == null || onOpenComplete();
         }
       });
     }
-  }, [drawerAnimation, animateDrawerIn, animateOverlayIn]);
+  }, [drawerAnimation, animateDrawerIn, animateOverlayIn, onOpenComplete]);
   const panGestureHandlers = useDrawerPanResponder({
     pin,
     drawerAnimation,

package/esm/overlays/tooltip/Tooltip.js

@@ -19,6 +19,7 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     accessibilityHint,
     accessibilityLabelForContent,
     accessibilityHintForContent,
+    accessibilityState,
     visible,
     invertColorScheme = true,
     elevation,
@@ -92,8 +93,12 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
   // equals the component where when you click on it, it will show the tooltip
   const accessibilityPropsForTrigger = useMemo(() => ({
     accessibilityLabel: typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel,
-    accessibilityHint: typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint
-  }), [children, accessibilityLabel, accessibilityHint]);
+    accessibilityHint: typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint,
+    // accessibilityState is applied to the trigger regardless of screen reader usage.
+    // Only set it when you need screen reader behavior.
+    // e.g. disabled = true: state is announced and the trigger cannot activate
+    accessibilityState
+  }), [children, accessibilityLabel, accessibilityHint, accessibilityState]);
   const accessibilityPropsForContent = useMemo(() => ({
     accessibilityLabel: typeof content === 'string' && accessibilityLabelForContent === undefined ? content : accessibilityLabelForContent,
     accessibilityHint: typeof content === 'string' && accessibilityHintForContent === undefined ? content : accessibilityHintForContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.53.1",
+  "version": "8.54.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -187,7 +187,6 @@
     "lottie-react-native": "^6.7.0",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
-    "react-native-date-picker": "^4.4.2",
     "react-native-gesture-handler": "^2.16.2",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-linear-gradient": "^2.8.3",
@@ -198,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.53.1",
+    "@coinbase/cds-common": "^8.54.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
@@ -223,7 +222,6 @@
     "eslint-plugin-reanimated": "^2.0.1",
     "lottie-react-native": "6.7.0",
     "react-native-accessibility-engine": "^3.2.0",
-    "react-native-date-picker": "4.4.2",
     "react-native-gesture-handler": "2.16.2",
     "react-native-inappbrowser-reborn": "3.7.0",
     "react-native-linear-gradient": "2.8.3",