@coinbase/cds-web 8.21.4 → 8.21.6
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.
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.21.6 (11/21/2025 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix text input border color missing issue. [[#147](https://github.com/coinbase/cds/pull/147)] [DX-5030]
|
|
16
|
+
|
|
17
|
+
## 8.21.5 (11/19/2025 PST)
|
|
18
|
+
|
|
19
|
+
#### 🐞 Fixes
|
|
20
|
+
|
|
21
|
+
- Auto-fill DatePicker width. [[#118](https://github.com/coinbase/cds/pull/118)] [DX-4988]
|
|
22
|
+
|
|
11
23
|
## 8.21.4 (11/18/2025 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAyDlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,qBAAqB,EAAE,aAAa,CAAC,GAAG;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,CAAC;AAEtB,eAAO,MAAM,UAAU,6HAgItB,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { type DateInputValidationError } from '@coinbase/cds-common/dates/DateInputValidationError';
|
|
3
2
|
import { type PopoverProps } from '../overlays/popover/PopoverProps';
|
|
4
3
|
import { type CalendarProps } from './Calendar';
|
|
@@ -75,8 +74,8 @@ export type DatePickerProps = {
|
|
|
75
74
|
| 'style'
|
|
76
75
|
> &
|
|
77
76
|
Pick<PopoverProps, 'showOverlay'>;
|
|
78
|
-
export declare const DatePicker:
|
|
79
|
-
|
|
77
|
+
export declare const DatePicker: import('react').MemoExoticComponent<
|
|
78
|
+
import('react').ForwardRefExoticComponent<
|
|
80
79
|
{
|
|
81
80
|
/** Control the date value of the DatePicker. */
|
|
82
81
|
date: Date | null;
|
|
@@ -149,7 +148,7 @@ export declare const DatePicker: React.MemoExoticComponent<
|
|
|
149
148
|
| 'highlightedDates'
|
|
150
149
|
> &
|
|
151
150
|
Pick<PopoverProps, 'showOverlay'> &
|
|
152
|
-
|
|
151
|
+
import('react').RefAttributes<HTMLDivElement>
|
|
153
152
|
>
|
|
154
153
|
>;
|
|
155
154
|
//# sourceMappingURL=DatePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/dates/DatePicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/dates/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@layer cds{.baseCss-b16zw4a5{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2
|
|
1
|
+
@layer cds{.baseCss-b16zw4a5.baseCss-b16zw4a5{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;-webkit-transition:box-shadow 200ms ease-in-out;transition:box-shadow 200ms ease-in-out;overflow:hidden;border-color:var(--border-color-unfocused);}.baseCss-b16zw4a5.baseCss-b16zw4a5:disabled,.baseCss-b16zw4a5.baseCss-b16zw4a5[aria-disabled='true'],.baseCss-b16zw4a5.baseCss-b16zw4a5:hover{border-color:var(--border-color-unfocused);opacity:1;}.baseCss-b16zw4a5.baseCss-b16zw4a5:focus-within{border-color:var(--border-color-focused);box-shadow:0 0 0 var(--border-width-focused) var(--border-color-focused);}
|
|
2
2
|
.inputAreaContainerCss-ipofex6{padding:1px;width:100%;}
|
|
3
3
|
.persistedFocusCss-p6phjeo{border-color:var(--border-color-focused);box-shadow:0 0 0 var(--border-width-focused) var(--border-color-focused);}}
|
package/esm/dates/DatePicker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
|
|
1
|
+
const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
|
|
2
2
|
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; }
|
|
3
3
|
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; }
|
|
4
4
|
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; }
|
|
@@ -6,13 +6,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
6
6
|
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; }
|
|
7
7
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
8
8
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
9
|
-
import
|
|
9
|
+
import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
|
|
10
10
|
import { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
|
|
11
11
|
import { getISOStringLocal } from '@coinbase/cds-common/dates/getISOStringLocal';
|
|
12
12
|
import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
|
|
13
13
|
import { m as motion } from 'framer-motion';
|
|
14
14
|
import { InputIconButton } from '../controls/InputIconButton';
|
|
15
|
-
import { VStack } from '../layout
|
|
15
|
+
import { Box, VStack } from '../layout';
|
|
16
16
|
import { getMotionProps } from '../motion/useMotionProps';
|
|
17
17
|
import { Popover } from '../overlays/popover/Popover';
|
|
18
18
|
import { Calendar } from './Calendar';
|
|
@@ -64,6 +64,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
|
|
|
64
64
|
calendarClassName,
|
|
65
65
|
dateInputStyle,
|
|
66
66
|
dateInputClassName,
|
|
67
|
+
width = '100%',
|
|
67
68
|
onOpen,
|
|
68
69
|
onClose,
|
|
69
70
|
onConfirm,
|
|
@@ -172,9 +173,11 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
|
|
|
172
173
|
style: calendarStyle
|
|
173
174
|
})
|
|
174
175
|
})), [date, disabled, seedDate, disabledDates, highlightedDates, minDate, maxDate, disabledDateError, handleConfirmCalendarDate, calendarRef, calendarStyle, calendarClassName, nextArrowAccessibilityLabel, previousArrowAccessibilityLabel]);
|
|
175
|
-
return /*#__PURE__*/_jsx(
|
|
176
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
176
177
|
ref: ref,
|
|
178
|
+
width: width,
|
|
177
179
|
children: /*#__PURE__*/_jsx(Popover, {
|
|
180
|
+
block: true,
|
|
178
181
|
respectNegativeTabIndex: true,
|
|
179
182
|
content: calendar,
|
|
180
183
|
contentPosition: calendarPopoverPosition,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "8.21.
|
|
3
|
+
"version": "8.21.6",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -147,9 +147,9 @@
|
|
|
147
147
|
"react-dom": "^18.3.1"
|
|
148
148
|
},
|
|
149
149
|
"dependencies": {
|
|
150
|
-
"@coinbase/cds-common": "^8.21.
|
|
151
|
-
"@coinbase/cds-icons": "^5.
|
|
152
|
-
"@coinbase/cds-illustrations": "^4.
|
|
150
|
+
"@coinbase/cds-common": "^8.21.6",
|
|
151
|
+
"@coinbase/cds-icons": "^5.7.0",
|
|
152
|
+
"@coinbase/cds-illustrations": "^4.28.0",
|
|
153
153
|
"@coinbase/cds-lottie-files": "^3.3.3",
|
|
154
154
|
"@coinbase/cds-utils": "^2.3.4",
|
|
155
155
|
"@floating-ui/react-dom": "^2.1.1",
|