@coinbase/cds-web 8.74.3 → 8.75.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/controls/NativeInput.d.ts +6 -0
  3. package/dts/controls/NativeInput.d.ts.map +1 -1
  4. package/dts/controls/TextInput.d.ts +2 -2
  5. package/dts/controls/TextInput.d.ts.map +1 -1
  6. package/esm/controls/NativeInput.js +5 -3
  7. package/esm/controls/TextInput.js +3 -4
  8. package/esm/overlays/tray/Tray.js +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.75.1 (5/19/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: android web tray footer cut off. [[#694](https://github.com/coinbase/cds/pull/694)]
16
+
17
+ ## 8.75.0 (5/15/2026 PST)
18
+
19
+ #### 🚀 Updates
20
+
21
+ - Feat: support selectionColor on Inputs. [[#688](https://github.com/coinbase/cds/pull/688)]
22
+
11
23
  ## 8.74.3 (5/14/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
package/dts/controls/NativeInput.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
2
3
  import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
3
4
  import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
4
5
  import type { TextAlignProps } from '@coinbase/cds-common/types/TextBaseProps';
@@ -12,6 +13,11 @@ export type NativeInputBaseProps = BoxBaseProps & {
12
13
  * @default start
13
14
  * */
14
15
  align?: TextAlignProps['align'];
16
+ /**
17
+ * Color of the caret (cursor).
18
+ * @default fgPrimary
19
+ */
20
+ caretColor?: ThemeVars.Color;
15
21
  };
16
22
  export type NativeInputProps = NativeInputBaseProps &
17
23
  BoxProps<'input'> &
package/dts/controls/NativeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAK/E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAyElE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,QAAQ,CAAC,OAAO,CAAC,GACjB,WAAW,GACX,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mIAyDvB,CAAC"}
1
+ {"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAK/E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAyElE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,QAAQ,CAAC,OAAO,CAAC,GACjB,WAAW,GACX,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mIA2DvB,CAAC"}
package/dts/controls/TextInput.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { SharedInputProps } from '@coinbase/cds-common/types/InputBaseProps';
3
3
  import type { InputStackBaseProps } from './InputStack';
4
4
  import { type NativeInputBaseProps, type NativeInputProps } from './NativeInput';
5
- export type TextInputBaseProps = NativeInputBaseProps &
5
+ export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
6
6
  SharedInputProps &
7
7
  Pick<
8
8
  InputStackBaseProps,
@@ -63,7 +63,7 @@ export type TextInputBaseProps = NativeInputBaseProps &
63
63
  */
64
64
  labelNode?: React.ReactNode;
65
65
  };
66
- export type TextInputProps = TextInputBaseProps & NativeInputProps;
66
+ export type TextInputProps = TextInputBaseProps & Omit<NativeInputProps, 'caretColor'>;
67
67
  export declare const TextInput: React.MemoExoticComponent<
68
68
  React.ForwardRefExoticComponent<
69
69
  Omit<TextInputProps, 'ref'> & React.RefAttributes<HTMLInputElement>
package/dts/controls/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAYhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA4C9F,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GACnD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAkBnE,eAAO,MAAM,SAAS,iIAyQrB,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAYhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA4C9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC,GACvE,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAWvF,eAAO,MAAM,SAAS,iIA2QrB,CAAC"}
package/esm/controls/NativeInput.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["containerSpacing", "testID", "align", "font", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "compact", "className", "style"];
1
+ const _excluded = ["containerSpacing", "testID", "align", "font", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "compact", "className", "caretColor", "style"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -30,6 +30,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
30
30
  accessibilityHint,
31
31
  compact,
32
32
  className,
33
+ caretColor = 'fgPrimary',
33
34
  style
34
35
  } = _ref,
35
36
  props = _objectWithoutProperties(_ref, _excluded);
@@ -39,8 +40,9 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
39
40
  const defaultContainerPadding = compact ? compactContainerPaddingCss : originalContainerPaddingCss;
40
41
  const dynamicStyles = useMemo(() => _objectSpread({
41
42
  textAlign: align,
42
- colorScheme: activeColorScheme
43
- }, style), [align, activeColorScheme, style]);
43
+ colorScheme: activeColorScheme,
44
+ caretColor: "var(--color-".concat(caretColor, ")")
45
+ }, style), [align, activeColorScheme, caretColor, style]);
44
46
  return /*#__PURE__*/_jsx(Box, _objectSpread({
45
47
  ref: ref,
46
48
  "aria-describedby": accessibilityHint,
package/esm/controls/TextInput.js CHANGED
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
7
7
  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
8
8
  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; }
9
9
  import React, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
10
+ import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
10
11
  import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
11
12
  import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
12
13
  import { cx } from '../cx';
@@ -32,9 +33,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
32
33
  const nativeInputContainerCss = "nativeInputContainerCss-nvfk24";
33
34
  const insideLabelCss = "insideLabelCss-i1dqgbcz";
34
35
  const insideLabelCssStartCss = "insideLabelCssStartCss-i1scwjk";
35
- const useInputVariant = (focused, variant) => {
36
- return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
37
- };
38
36
  const variantColorMap = {
39
37
  primary: 'fgPrimary',
40
38
  positive: 'fgPositive',
@@ -141,6 +139,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
141
139
  accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label,
142
140
  align: align,
143
141
  "aria-invalid": variant === 'negative',
142
+ caretColor: variantColorMap[focusedVariant],
144
143
  compact: compact,
145
144
  containerSpacing: nativeInputContainerCss,
146
145
  "data-compact": compact,
@@ -153,7 +152,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
153
152
  onFocus: handleOnFocus,
154
153
  testID: testID
155
154
  }, nativeInputRestProps));
156
- }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, hasLabel, align, font, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
155
+ }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, focusedVariant, compact, hasLabel, labelVariant, start, disabled, font, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
157
156
  return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
158
157
  value: focused ? focusedVariant : undefined,
159
158
  children: /*#__PURE__*/_jsx(InputStack, {
package/esm/overlays/tray/Tray.js CHANGED
@@ -285,7 +285,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
285
285
  children: /*#__PURE__*/_jsxs(Box, {
286
286
  ref: trayRef,
287
287
  className: cx(trayClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
288
- height: "100vh",
288
+ height: "100dvh",
289
289
  pin: "all",
290
290
  position: "fixed",
291
291
  style: styles === null || styles === void 0 ? void 0 : styles.root,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.74.3",
3
+ "version": "8.75.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,7 +207,7 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.74.3",
210
+ "@coinbase/cds-common": "^8.75.1",
211
211
  "@coinbase/cds-icons": "^5.16.0",
212
212
  "@coinbase/cds-illustrations": "^4.40.1",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",