@coinbase/cds-mobile 8.53.0 → 8.54.0

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/media/RemoteImageGroup.js

@@ -77,7 +77,7 @@ export const RemoteImageGroup = _ref => {
         children: clonedChild
       }, index);
     }), excess > 0 && /*#__PURE__*/_jsx(Box, {
-      background: "bgOverlay",
+      background: "bgSecondary",
       borderColor: borderColor,
       borderWidth: borderWidth,
       marginStart: overlapSpacing,

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.0",
+  "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,9 +197,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.53.0",
+    "@coinbase/cds-common": "^8.54.0",
     "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.33.0",
+    "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",
@@ -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",