@coinbase/cds-mobile 8.53.0 → 8.54.0

package/dts/overlays/tooltip/Tooltip.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
-import type { TooltipProps } from './TooltipProps';
+import { type AccessibilityState } from 'react-native';
+import type { TooltipBaseProps } from './TooltipProps';
+export type TooltipProps = TooltipBaseProps & {
+  /**
+   * Accessibility state for the trigger.
+   */
+  accessibilityState?: AccessibilityState;
+};
 export declare const Tooltip: React.MemoExoticComponent<
   ({
     children,
@@ -14,6 +21,7 @@ export declare const Tooltip: React.MemoExoticComponent<
     accessibilityHint,
     accessibilityLabelForContent,
     accessibilityHintForContent,
+    accessibilityState,
     visible,
     invertColorScheme,
     elevation,

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAMjG,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,qSAmBf,YAAY,6CAsJhB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,KAAK,kBAAkB,EAA4C,MAAM,cAAc,CAAC;AAKjG,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGtE,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,yTAoBf,YAAY,6CA0JhB,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,7 +1,7 @@
 const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
 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, { memo, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
@@ -10,7 +10,7 @@ import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
+export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
   let {
       name,
       active,
@@ -54,6 +54,7 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
   }), [minHeight]);
   const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
     background: backgroundValue,
@@ -83,5 +84,5 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
       style: sizingStyle
     })
   }));
-});
+}));
 IconButton.displayName = 'IconButton';

package/esm/controls/InputIconButton.js

@@ -1,7 +1,7 @@
 const _excluded = ["disableInheritFocusStyle", "testID", "variant", "accessibilityLabel", "accessibilityHint"];
 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, { memo, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import { IconButton } from '../buttons/IconButton';
 import { Box } from '../layout/Box';
 import { TextInputFocusVariantContext } from './context';
@@ -14,7 +14,7 @@ export const variantTransformMap = {
   foregroundMuted: 'foregroundMuted',
   secondary: 'secondary'
 };
-export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref) {
+export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputIconButton(_ref, ref) {
   let {
       disableInheritFocusStyle = false,
       testID,
@@ -30,10 +30,11 @@ export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref)
     paddingStart: 1,
     testID: testID,
     children: /*#__PURE__*/_jsx(IconButton, _extends({
+      ref: ref,
       transparent: true,
       accessibilityHint: accessibilityHint != null ? accessibilityHint : props.name,
       accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : props.name,
       variant: disableInheritFocusStyle ? variant : transformedVariant
     }, props))
   });
-});
+}));

package/esm/dates/Calendar.js

@@ -0,0 +1,346 @@
+const _excluded = ["background", "borderRadius", "children"],
+  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "todayAccessibilityHint", "highlightedDateAccessibilityHint", "style", "styles"];
+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 { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { generateCalendarMonth } from '@coinbase/cds-common/dates/generateCalendarMonth';
+import { getMidnightDate } from '@coinbase/cds-common/dates/getMidnightDate';
+import { getTimesFromDatesAndRanges } from '@coinbase/cds-common/dates/getTimesFromDatesAndRanges';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useA11y } from '../hooks/useA11y';
+import { useScreenReaderStatus } from '../hooks/useScreenReaderStatus';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Tooltip } from '../overlays/tooltip/Tooltip';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CALENDAR_DAY_DIMENSION = 40;
+
+// These could be dynamically generated, but our Calendar and DatePicker aren't localized so there's no point
+const DAYS_OF_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%'
+  }
+});
+const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      background = 'transparent',
+      borderRadius = 1000,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    background: background,
+    borderRadius: borderRadius,
+    contentStyle: styles.pressable,
+    height: CALENDAR_DAY_DIMENSION,
+    width: CALENDAR_DAY_DIMENSION
+  }, props, {
+    children: children
+  }));
+}));
+CalendarPressable.displayName = 'CalendarPressable';
+const getDayAccessibilityLabel = function (date, locale) {
+  if (locale === void 0) {
+    locale = 'en-US';
+  }
+  return date.toLocaleDateString(locale, {
+    weekday: 'long',
+    day: 'numeric'
+  }) + " " + date.toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric'
+  });
+};
+const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    date,
+    active,
+    disabled,
+    highlighted,
+    isToday,
+    isCurrentMonth,
+    onPress,
+    disabledError,
+    todayAccessibilityHint,
+    highlightedDateAccessibilityHint,
+    style
+  } = _ref2;
+  const {
+    locale
+  } = useLocale();
+  const handlePress = useCallback(() => onPress == null ? void 0 : onPress(date), [date, onPress]);
+  const accessibilityLabel = useMemo(() => getDayAccessibilityLabel(date, locale), [date, locale]);
+  const accessibilityState = useMemo(() => ({
+    disabled: !!disabled,
+    selected: !!active
+  }), [disabled, active]);
+
+  // Period between phrases gives screen readers a clear pause (e.g. "Today. Date unavailable").
+  const accessibilityHint = useMemo(() => {
+    const hints = [isToday ? todayAccessibilityHint : undefined, highlighted ? highlightedDateAccessibilityHint : undefined, disabled ? disabledError : undefined].filter(Boolean).join('. ');
+    return hints || undefined;
+  }, [disabled, highlighted, isToday, todayAccessibilityHint, highlightedDateAccessibilityHint, disabledError]);
+  const isScreenReaderEnabled = useScreenReaderStatus();
+
+  // Expose disabled to the tooltip's accessibilityState so screen readers on both platforms
+  // announce the day button as disabled. We only set disabled when a screen reader is active:
+  // on some platforms a11y disabled is equivalent to the top-level disabled prop, so always
+  // setting it would block tooltip interactivity for users not using SRs.
+  const tooltipAccessibilityState = useMemo(() => ({
+    disabled: isScreenReaderEnabled
+  }), [isScreenReaderEnabled]);
+  if (!isCurrentMonth) {
+    return /*#__PURE__*/_jsx(Box, {
+      "aria-hidden": true,
+      height: CALENDAR_DAY_DIMENSION,
+      width: CALENDAR_DAY_DIMENSION
+    });
+  }
+  const dayButton = /*#__PURE__*/_jsx(CalendarPressable, {
+    ref: ref,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    accessibilityState: accessibilityState,
+    background: active && !disabled ? 'bgPrimary' : undefined,
+    borderColor: isToday ? 'bgPrimary' : undefined,
+    bordered: isToday,
+    disabled: disabled,
+    feedback: disabled ? 'none' : 'light',
+    onPress: handlePress,
+    style: style,
+    children: /*#__PURE__*/_jsx(Text, {
+      accessible: false,
+      align: "center",
+      color: active && !disabled ? 'fgInverse' : highlighted ? 'fgPrimary' : undefined,
+      font: "body",
+      children: date.getDate()
+    })
+  });
+  if (disabled) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: tooltipAccessibilityState,
+      content: disabledError,
+      children: dayButton
+    });
+  }
+  return dayButton;
+}));
+CalendarDay.displayName = 'CalendarDay';
+export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      selectedDate,
+      seedDate,
+      onPressDate,
+      disabled,
+      hideControls,
+      disabledDates,
+      highlightedDates,
+      minDate,
+      maxDate,
+      disabledDateError = 'Date unavailable',
+      nextArrowAccessibilityLabel = 'Go to next month',
+      previousArrowAccessibilityLabel = 'Go to previous month',
+      todayAccessibilityHint = 'Today',
+      highlightedDateAccessibilityHint = 'Highlighted',
+      style,
+      styles
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  const {
+    setA11yFocus,
+    announceForA11y
+  } = useA11y();
+  const today = useMemo(() => getMidnightDate(new Date()), []);
+  const todayTime = useMemo(() => today.getTime(), [today]);
+
+  // Determine default calendar seed date: use whichever comes first between maxDate and today
+  const defaultSeedDate = useMemo(() => {
+    if (selectedDate) {
+      return selectedDate;
+    }
+    if (seedDate) {
+      return seedDate;
+    }
+    if (maxDate) {
+      const maxDateTime = getMidnightDate(maxDate).getTime();
+      const todayTime = today.getTime();
+      return maxDateTime < todayTime ? maxDate : today;
+    }
+    return today;
+  }, [selectedDate, seedDate, maxDate, today]);
+  const [calendarSeedDate, setCalendarSeedDate] = useState(defaultSeedDate);
+  const initialFocusRef = useRef(null);
+  const calendarMonth = useMemo(() => generateCalendarMonth(calendarSeedDate), [calendarSeedDate]);
+  const selectedTime = useMemo(() => selectedDate ? getMidnightDate(selectedDate).getTime() : null, [selectedDate]);
+  const disabledTimes = useMemo(() => new Set(getTimesFromDatesAndRanges(disabledDates || [])), [disabledDates]);
+  const focusTargetTime = useMemo(() => selectedTime || (seedDate ? getMidnightDate(seedDate).getTime() : null) || todayTime, [selectedTime, seedDate, todayTime]);
+  useImperativeHandle(ref, () => ({
+    focusInitialDate: () => {
+      if (disabled || !initialFocusRef.current) {
+        return;
+      }
+      setA11yFocus(initialFocusRef);
+    }
+  }), [disabled, setA11yFocus]);
+  const minTime = useMemo(() => minDate && getMidnightDate(minDate).getTime(), [minDate]);
+  const maxTime = useMemo(() => maxDate && getMidnightDate(maxDate).getTime(), [maxDate]);
+  const highlightedTimes = useMemo(() => new Set(getTimesFromDatesAndRanges(highlightedDates || [])), [highlightedDates]);
+  const handleGoNextMonth = useCallback(() => {
+    setCalendarSeedDate(s => {
+      const next = new Date(s.getFullYear(), s.getMonth() + 1, 1);
+      announceForA11y(next.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric'
+      }));
+      return next;
+    });
+  }, [setCalendarSeedDate, announceForA11y]);
+  const handleGoPreviousMonth = useCallback(() => {
+    setCalendarSeedDate(s => {
+      const prev = new Date(s.getFullYear(), s.getMonth() - 1, 1);
+      announceForA11y(prev.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric'
+      }));
+      return prev;
+    });
+  }, [setCalendarSeedDate, announceForA11y]);
+  const disableGoNextMonth = useMemo(() => {
+    if (disabled) {
+      return true;
+    }
+    const firstDateOfNextMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth() + 1, 1);
+    return maxTime ? maxTime < firstDateOfNextMonth.getTime() : false;
+  }, [maxTime, calendarSeedDate, disabled]);
+  const disableGoPreviousMonth = useMemo(() => {
+    if (disabled) {
+      return true;
+    }
+    const lastDateOfPreviousMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth(), 0);
+    return minTime ? minTime > lastDateOfPreviousMonth.getTime() : false;
+  }, [minTime, calendarSeedDate, disabled]);
+
+  // Split calendar month into weeks
+  const calendarWeeks = useMemo(() => {
+    const weeks = [];
+    for (let i = 0; i < calendarMonth.length; i += DAYS_OF_WEEK.length) {
+      const weekDates = calendarMonth.slice(i, i + DAYS_OF_WEEK.length);
+      weeks.push(["week-" + calendarMonth[i].getTime(), weekDates]);
+    }
+    return weeks;
+  }, [calendarMonth]);
+  const monthYearLabel = useMemo(() => calendarSeedDate.toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric'
+  }), [calendarSeedDate]);
+  const previousArrowAccessibilityState = useMemo(() => ({
+    disabled: !!disableGoPreviousMonth
+  }), [disableGoPreviousMonth]);
+  const nextArrowAccessibilityState = useMemo(() => ({
+    disabled: !!disableGoNextMonth
+  }), [disableGoNextMonth]);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    opacity: disabled ? accessibleOpacityDisabled : undefined,
+    style: [style, styles == null ? void 0 : styles.root]
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingBottom: 2,
+      paddingStart: 1.5,
+      style: styles == null ? void 0 : styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        accessibilityRole: "header",
+        font: "headline",
+        style: styles == null ? void 0 : styles.title,
+        children: monthYearLabel
+      }), !hideControls && /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        style: styles == null ? void 0 : styles.navigation,
+        children: [/*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: previousArrowAccessibilityLabel,
+          accessibilityRole: "button",
+          accessibilityState: previousArrowAccessibilityState,
+          disabled: disableGoPreviousMonth,
+          feedback: "light",
+          onPress: disableGoPreviousMonth ? undefined : handleGoPreviousMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "backArrow",
+            size: "s"
+          })
+        }), /*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: nextArrowAccessibilityLabel,
+          accessibilityRole: "button",
+          accessibilityState: nextArrowAccessibilityState,
+          disabled: disableGoNextMonth,
+          feedback: "light",
+          onPress: disableGoNextMonth ? undefined : handleGoNextMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "forwardArrow",
+            size: "s"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      style: styles == null ? void 0 : styles.content,
+      children: [/*#__PURE__*/_jsx(HStack, {
+        "aria-hidden": true,
+        gap: 1,
+        justifyContent: "space-between",
+        paddingBottom: 1,
+        children: DAYS_OF_WEEK.map(day => /*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          height: CALENDAR_DAY_DIMENSION,
+          justifyContent: "center",
+          width: CALENDAR_DAY_DIMENSION,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            userSelect: "none",
+            children: day.charAt(0)
+          })
+        }, day))
+      }), calendarWeeks.map(_ref4 => {
+        let [weekId, week] = _ref4;
+        return /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          justifyContent: "space-between",
+          children: week.map(date => {
+            const time = date.getTime();
+            return /*#__PURE__*/_jsx(CalendarDay, {
+              ref: time === focusTargetTime ? initialFocusRef : undefined,
+              active: time === selectedTime,
+              date: date,
+              disabled: disabled || minTime !== undefined && minTime !== null && time < minTime || maxTime !== undefined && maxTime !== null && time > maxTime || disabledTimes.has(time),
+              disabledError: disabledDateError,
+              highlighted: highlightedTimes.has(time),
+              highlightedDateAccessibilityHint: highlightedDateAccessibilityHint,
+              isCurrentMonth: date.getMonth() === calendarSeedDate.getMonth(),
+              isToday: time === todayTime,
+              onPress: onPressDate,
+              style: styles == null ? void 0 : styles.day,
+              todayAccessibilityHint: todayAccessibilityHint
+            }, time);
+          })
+        }, weekId);
+      })]
+    })]
+  }));
+}));
+Calendar.displayName = 'Calendar';

package/esm/dates/DateInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "disabledDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
 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, useMemo, useRef } from 'react';
@@ -16,6 +16,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       onErrorDate,
       required,
       separator = '/',
+      disabledDates,
       minDate,
       maxDate,
       requiredError,
@@ -53,6 +54,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     onErrorDate,
     intlDateFormat,
     required,
+    disabledDates,
     minDate,
     maxDate,
     requiredError,