@coinbase/cds-mcp-server 8.34.0 → 8.34.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.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/Banner.txt +1 -1
- package/mcp-docs/mobile/components/Button.txt +2 -2
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/CheckboxCell.txt +1 -1
- package/mcp-docs/mobile/components/CheckboxGroup.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +1 -1
- package/mcp-docs/mobile/components/IconButton.txt +1 -1
- package/mcp-docs/mobile/components/PeriodSelector.txt +10 -1
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -1
- package/mcp-docs/mobile/components/RadioCell.txt +1 -1
- package/mcp-docs/mobile/components/RadioGroup.txt +9 -28
- package/mcp-docs/mobile/components/Select.txt +9 -28
- package/mcp-docs/mobile/components/SelectAlpha.txt +38 -0
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +9 -6
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -90
- package/mcp-docs/web/components/AreaChart.txt +1 -1
- package/mcp-docs/web/components/Avatar.txt +1 -1
- package/mcp-docs/web/components/AvatarButton.txt +271 -1
- package/mcp-docs/web/components/Banner.txt +2 -2
- package/mcp-docs/web/components/BarChart.txt +1 -1
- package/mcp-docs/web/components/Box.txt +264 -1
- package/mcp-docs/web/components/Button.txt +272 -3
- package/mcp-docs/web/components/Calendar.txt +1 -1
- package/mcp-docs/web/components/Carousel.txt +1 -1
- package/mcp-docs/web/components/CartesianChart.txt +1 -1
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +2 -2
- package/mcp-docs/web/components/CheckboxCell.txt +2 -2
- package/mcp-docs/web/components/Chip.txt +1 -1
- package/mcp-docs/web/components/Coachmark.txt +1 -1
- package/mcp-docs/web/components/ContainedAssetCard.txt +1 -1
- package/mcp-docs/web/components/ContentCard.txt +264 -1
- package/mcp-docs/web/components/ContentCardBody.txt +264 -1
- package/mcp-docs/web/components/ContentCardFooter.txt +264 -1
- package/mcp-docs/web/components/ContentCardHeader.txt +263 -1
- package/mcp-docs/web/components/ContentCell.txt +260 -1
- package/mcp-docs/web/components/DateInput.txt +2 -2
- package/mcp-docs/web/components/DatePicker.txt +1 -1
- package/mcp-docs/web/components/Divider.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +1 -1
- package/mcp-docs/web/components/Fallback.txt +264 -1
- package/mcp-docs/web/components/FloatingAssetCard.txt +1 -1
- package/mcp-docs/web/components/Grid.txt +264 -1
- package/mcp-docs/web/components/GridColumn.txt +264 -1
- package/mcp-docs/web/components/HStack.txt +264 -1
- package/mcp-docs/web/components/Icon.txt +2 -2
- package/mcp-docs/web/components/IconButton.txt +272 -2
- package/mcp-docs/web/components/InputChip.txt +1 -1
- package/mcp-docs/web/components/Interactable.txt +272 -1
- package/mcp-docs/web/components/LineChart.txt +1 -1
- package/mcp-docs/web/components/Link.txt +271 -1
- package/mcp-docs/web/components/ListCell.txt +260 -1
- package/mcp-docs/web/components/MediaChip.txt +1 -1
- package/mcp-docs/web/components/Modal.txt +1 -1
- package/mcp-docs/web/components/ModalBody.txt +2 -2
- package/mcp-docs/web/components/ModalFooter.txt +1 -1
- package/mcp-docs/web/components/ModalHeader.txt +1 -1
- package/mcp-docs/web/components/MultiContentModule.txt +262 -1
- package/mcp-docs/web/components/NudgeCard.txt +1 -1
- package/mcp-docs/web/components/Overlay.txt +1 -1
- package/mcp-docs/web/components/PageFooter.txt +1 -1
- package/mcp-docs/web/components/PageHeader.txt +1 -1
- package/mcp-docs/web/components/Pagination.txt +1 -1
- package/mcp-docs/web/components/PeriodSelector.txt +11 -59
- package/mcp-docs/web/components/Point.txt +1 -4
- package/mcp-docs/web/components/PortalProvider.txt +2 -0
- package/mcp-docs/web/components/Pressable.txt +272 -1
- package/mcp-docs/web/components/Radio.txt +2 -2
- package/mcp-docs/web/components/RadioCell.txt +2 -2
- package/mcp-docs/web/components/RadioGroup.txt +8 -14
- package/mcp-docs/web/components/RemoteImage.txt +2 -2
- package/mcp-docs/web/components/RollingNumber.txt +263 -1
- package/mcp-docs/web/components/SearchInput.txt +2 -2
- package/mcp-docs/web/components/SectionHeader.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +1 -1
- package/mcp-docs/web/components/Select.txt +8 -14
- package/mcp-docs/web/components/SelectAlpha.txt +41 -0
- package/mcp-docs/web/components/SelectChip.txt +1 -1
- package/mcp-docs/web/components/Sidebar.txt +2 -2
- package/mcp-docs/web/components/SidebarItem.txt +4 -4
- package/mcp-docs/web/components/Spacer.txt +264 -1
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +8 -6
- package/mcp-docs/web/components/Spinner.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +2 -1
- package/mcp-docs/web/components/Switch.txt +2 -2
- package/mcp-docs/web/components/TabLabel.txt +2 -2
- package/mcp-docs/web/components/Table.txt +1 -1
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +1 -1
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +1 -1
- package/mcp-docs/web/components/Tag.txt +1 -1
- package/mcp-docs/web/components/Text.txt +264 -1
- package/mcp-docs/web/components/TextInput.txt +3 -3
- package/mcp-docs/web/components/ThemeProvider.txt +6 -21
- package/mcp-docs/web/components/TileButton.txt +271 -1
- package/mcp-docs/web/components/Toast.txt +1 -1
- package/mcp-docs/web/components/VStack.txt +264 -1
- package/package.json +1 -1
|
@@ -1005,14 +1005,73 @@ ValueSection
|
|
|
1005
1005
|
| `RollingNumberMaskComponent` | `RollingNumberMaskComponent` | No | `-` | Component used to render the mask container. |
|
|
1006
1006
|
| `RollingNumberSymbolComponent` | `RollingNumberSymbolComponent` | No | `-` | Component used to render separators and other symbols. |
|
|
1007
1007
|
| `RollingNumberValueSectionComponent` | `RollingNumberValueSectionComponent` | No | `-` | Component used to render the numeric sections. |
|
|
1008
|
+
| `about` | `string \| undefined` | No | `-` | - |
|
|
1009
|
+
| `accessKey` | `string \| undefined` | No | `-` | - |
|
|
1008
1010
|
| `accessibilityLabelPrefix` | `string` | No | `-` | Accessibility label prefix announced before the value. |
|
|
1009
1011
|
| `accessibilityLabelSuffix` | `string` | No | `-` | Accessibility label suffix announced after the value. |
|
|
1010
1012
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
1011
1013
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
1012
1014
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
1015
|
+
| `aria-activedescendant` | `string \| undefined` | No | `-` | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
|
|
1016
|
+
| `aria-atomic` | `Booleanish \| undefined` | No | `-` | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
|
|
1017
|
+
| `aria-autocomplete` | `none \| list \| inline \| both \| undefined` | No | `-` | Indicates whether inputting text could trigger display of one or more predictions of the users intended value for an input and specifies how predictions would be presented if they are made. |
|
|
1018
|
+
| `aria-braillelabel` | `string \| undefined` | No | `-` | Defines a string value that labels the current element, which is intended to be converted into Braille. |
|
|
1019
|
+
| `aria-brailleroledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. |
|
|
1020
|
+
| `aria-busy` | `Booleanish \| undefined` | No | `-` | - |
|
|
1021
|
+
| `aria-checked` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current checked state of checkboxes, radio buttons, and other widgets. |
|
|
1022
|
+
| `aria-colcount` | `number \| undefined` | No | `-` | Defines the total number of columns in a table, grid, or treegrid. |
|
|
1023
|
+
| `aria-colindex` | `number \| undefined` | No | `-` | Defines an elements column index or position with respect to the total number of columns within a table, grid, or treegrid. |
|
|
1024
|
+
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
1025
|
+
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
1026
|
+
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
1027
|
+
| `aria-current` | `boolean \| true \| false \| page \| step \| location \| date \| time \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
1028
|
+
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
1029
|
+
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
1030
|
+
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
1031
|
+
| `aria-disabled` | `Booleanish \| undefined` | No | `-` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
|
|
1032
|
+
| `aria-dropeffect` | `none \| link \| copy \| execute \| move \| popup \| undefined` | No | `-` | Indicates what functions can be performed when a dragged object is released on the drop target. |
|
|
1033
|
+
| `aria-errormessage` | `string \| undefined` | No | `-` | Identifies the element that provides an error message for the object. |
|
|
1034
|
+
| `aria-expanded` | `Booleanish \| undefined` | No | `-` | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
|
|
1035
|
+
| `aria-flowto` | `string \| undefined` | No | `-` | Identifies the next element (or elements) in an alternate reading order of content which, at the users discretion, allows assistive technology to override the general default of reading in document source order. |
|
|
1036
|
+
| `aria-grabbed` | `Booleanish \| undefined` | No | `-` | Indicates an elements grabbed state in a drag-and-drop operation. |
|
|
1037
|
+
| `aria-haspopup` | `boolean \| true \| false \| dialog \| grid \| listbox \| menu \| tree \| undefined` | No | `-` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
|
|
1038
|
+
| `aria-hidden` | `Booleanish \| undefined` | No | `-` | Indicates whether the element is exposed to an accessibility API. |
|
|
1039
|
+
| `aria-invalid` | `boolean \| true \| false \| grammar \| spelling \| undefined` | No | `-` | Indicates the entered value does not conform to the format expected by the application. |
|
|
1040
|
+
| `aria-keyshortcuts` | `string \| undefined` | No | `-` | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
|
|
1041
|
+
| `aria-label` | `string \| undefined` | No | `-` | Defines a string value that labels the current element. |
|
|
1042
|
+
| `aria-labelledby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that labels the current element. |
|
|
1043
|
+
| `aria-level` | `number \| undefined` | No | `-` | Defines the hierarchical level of an element within a structure. |
|
|
1044
|
+
| `aria-live` | `off \| assertive \| polite \| undefined` | No | `-` | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
|
|
1045
|
+
| `aria-modal` | `Booleanish \| undefined` | No | `-` | Indicates whether an element is modal when displayed. |
|
|
1046
|
+
| `aria-multiline` | `Booleanish \| undefined` | No | `-` | Indicates whether a text box accepts multiple lines of input or only a single line. |
|
|
1047
|
+
| `aria-multiselectable` | `Booleanish \| undefined` | No | `-` | Indicates that the user may select more than one item from the current selectable descendants. |
|
|
1048
|
+
| `aria-orientation` | `horizontal \| vertical \| undefined` | No | `-` | Indicates whether the elements orientation is horizontal, vertical, or unknown/ambiguous. |
|
|
1049
|
+
| `aria-owns` | `string \| undefined` | No | `-` | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
|
|
1050
|
+
| `aria-placeholder` | `string \| undefined` | No | `-` | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
|
|
1051
|
+
| `aria-posinset` | `number \| undefined` | No | `-` | Defines an elements number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
|
|
1052
|
+
| `aria-pressed` | `boolean \| true \| false \| mixed \| undefined` | No | `-` | Indicates the current pressed state of toggle buttons. |
|
|
1053
|
+
| `aria-readonly` | `Booleanish \| undefined` | No | `-` | Indicates that the element is not editable, but is otherwise operable. |
|
|
1054
|
+
| `aria-relevant` | `text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals \| undefined` | No | `-` | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. |
|
|
1055
|
+
| `aria-required` | `Booleanish \| undefined` | No | `-` | Indicates that user input is required on the element before a form may be submitted. |
|
|
1056
|
+
| `aria-roledescription` | `string \| undefined` | No | `-` | Defines a human-readable, author-localized description for the role of an element. |
|
|
1057
|
+
| `aria-rowcount` | `number \| undefined` | No | `-` | Defines the total number of rows in a table, grid, or treegrid. |
|
|
1058
|
+
| `aria-rowindex` | `number \| undefined` | No | `-` | Defines an elements row index or position with respect to the total number of rows within a table, grid, or treegrid. |
|
|
1059
|
+
| `aria-rowindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-rowindex. |
|
|
1060
|
+
| `aria-rowspan` | `number \| undefined` | No | `-` | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
1061
|
+
| `aria-selected` | `Booleanish \| undefined` | No | `-` | Indicates the current selected state of various widgets. |
|
|
1062
|
+
| `aria-setsize` | `number \| undefined` | No | `-` | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |
|
|
1063
|
+
| `aria-sort` | `none \| ascending \| descending \| other \| undefined` | No | `-` | Indicates if items in a table or grid are sorted in ascending or descending order. |
|
|
1064
|
+
| `aria-valuemax` | `number \| undefined` | No | `-` | Defines the maximum allowed value for a range widget. |
|
|
1065
|
+
| `aria-valuemin` | `number \| undefined` | No | `-` | Defines the minimum allowed value for a range widget. |
|
|
1066
|
+
| `aria-valuenow` | `number \| undefined` | No | `-` | Defines the current value for a range widget. |
|
|
1067
|
+
| `aria-valuetext` | `string \| undefined` | No | `-` | Defines the human readable text alternative of aria-valuenow for a range widget. |
|
|
1013
1068
|
| `ariaLive` | `off \| assertive \| polite` | No | `'polite'` | aria-live politeness level. |
|
|
1014
|
-
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No |
|
|
1069
|
+
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `span` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
1015
1070
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1071
|
+
| `autoCapitalize` | `off \| none \| on \| sentences \| words \| characters \| (string & {}) \| undefined` | No | `-` | - |
|
|
1072
|
+
| `autoCorrect` | `string \| undefined` | No | `-` | - |
|
|
1073
|
+
| `autoFocus` | `boolean \| undefined` | No | `-` | - |
|
|
1074
|
+
| `autoSave` | `string \| undefined` | No | `-` | - |
|
|
1016
1075
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
1017
1076
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
1018
1077
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -1033,17 +1092,29 @@ ValueSection
|
|
|
1033
1092
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
1034
1093
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
1035
1094
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
1095
|
+
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
1096
|
+
| `className` | `string \| undefined` | No | `-` | - |
|
|
1036
1097
|
| `classNames` | `{ root?: string; visibleContent?: string \| undefined; formattedValueSection?: string \| undefined; prefix?: string \| undefined; suffix?: string \| undefined; i18nPrefix?: string \| undefined; i18nSuffix?: string \| undefined; integer?: string \| undefined; fraction?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Class name overrides applied to RollingNumber slots. |
|
|
1037
1098
|
| `color` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No | `'fg'` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. |
|
|
1038
1099
|
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. |
|
|
1039
1100
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
1101
|
+
| `content` | `string \| undefined` | No | `-` | - |
|
|
1102
|
+
| `contentEditable` | `Booleanish \| inherit \| plaintext-only \| undefined` | No | `-` | - |
|
|
1103
|
+
| `contextMenu` | `string \| undefined` | No | `-` | - |
|
|
1040
1104
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
1041
1105
|
| `dangerouslySetColor` | `string` | No | `-` | - |
|
|
1106
|
+
| `dangerouslySetInnerHTML` | `{ __html: string \| TrustedHTML; } \| undefined` | No | `-` | - |
|
|
1107
|
+
| `datatype` | `string \| undefined` | No | `-` | - |
|
|
1108
|
+
| `defaultChecked` | `boolean \| undefined` | No | `-` | - |
|
|
1109
|
+
| `defaultValue` | `string \| number \| readonly string[] \| undefined` | No | `-` | - |
|
|
1042
1110
|
| `digitTransitionVariant` | `every \| single` | No | `'every'` | Style of digit transition animation. - every: Rolls through every intermediate digit (e.g., 1→2→3→...→9). - single: Rolls directly to the new digit without showing intermediates (e.g., 1→9). |
|
|
1111
|
+
| `dir` | `string \| undefined` | No | `-` | - |
|
|
1043
1112
|
| `disabled` | `boolean` | No | `-` | - |
|
|
1044
1113
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
1114
|
+
| `draggable` | `Booleanish \| undefined` | No | `-` | - |
|
|
1045
1115
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
1046
1116
|
| `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
|
|
1117
|
+
| `enterKeyHint` | `enter \| done \| go \| next \| previous \| search \| send \| undefined` | No | `-` | - |
|
|
1047
1118
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
1048
1119
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
1049
1120
|
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
@@ -1072,7 +1143,19 @@ ValueSection
|
|
|
1072
1143
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
1073
1144
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
1074
1145
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
1146
|
+
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
1147
|
+
| `id` | `string \| undefined` | No | `-` | - |
|
|
1148
|
+
| `inlist` | `any` | No | `-` | - |
|
|
1149
|
+
| `inputMode` | `none \| search \| text \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
1150
|
+
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
1151
|
+
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
1152
|
+
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
1153
|
+
| `itemRef` | `string \| undefined` | No | `-` | - |
|
|
1154
|
+
| `itemScope` | `boolean \| undefined` | No | `-` | - |
|
|
1155
|
+
| `itemType` | `string \| undefined` | No | `-` | - |
|
|
1075
1156
|
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
1157
|
+
| `key` | `Key \| null \| undefined` | No | `-` | - |
|
|
1158
|
+
| `lang` | `string \| undefined` | No | `-` | - |
|
|
1076
1159
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
1077
1160
|
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
1078
1161
|
| `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
|
|
@@ -1090,7 +1173,168 @@ ValueSection
|
|
|
1090
1173
|
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
1091
1174
|
| `negativePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgNegative'` | Color token used for negative numeric changes. |
|
|
1092
1175
|
| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
|
|
1176
|
+
| `nonce` | `string \| undefined` | No | `-` | - |
|
|
1093
1177
|
| `numberOfLines` | `number` | No | `-` | - |
|
|
1178
|
+
| `onAbort` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1179
|
+
| `onAbortCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1180
|
+
| `onAnimationEnd` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1181
|
+
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1182
|
+
| `onAnimationIteration` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1183
|
+
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1184
|
+
| `onAnimationStart` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1185
|
+
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1186
|
+
| `onAuxClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1187
|
+
| `onAuxClickCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1188
|
+
| `onBeforeInput` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1189
|
+
| `onBeforeInputCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1190
|
+
| `onBlur` | `FocusEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1191
|
+
| `onBlurCapture` | `FocusEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1192
|
+
| `onCanPlay` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1193
|
+
| `onCanPlayCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1194
|
+
| `onCanPlayThrough` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1195
|
+
| `onCanPlayThroughCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1196
|
+
| `onChange` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1197
|
+
| `onChangeCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1198
|
+
| `onClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1199
|
+
| `onClickCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1200
|
+
| `onCompositionEnd` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1201
|
+
| `onCompositionEndCapture` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1202
|
+
| `onCompositionStart` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1203
|
+
| `onCompositionStartCapture` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1204
|
+
| `onCompositionUpdate` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1205
|
+
| `onCompositionUpdateCapture` | `CompositionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1206
|
+
| `onContextMenu` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1207
|
+
| `onContextMenuCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1208
|
+
| `onCopy` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1209
|
+
| `onCopyCapture` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1210
|
+
| `onCut` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1211
|
+
| `onCutCapture` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1212
|
+
| `onDoubleClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1213
|
+
| `onDoubleClickCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1214
|
+
| `onDrag` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1215
|
+
| `onDragCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1216
|
+
| `onDragEnd` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1217
|
+
| `onDragEndCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1218
|
+
| `onDragEnter` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1219
|
+
| `onDragEnterCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1220
|
+
| `onDragExit` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1221
|
+
| `onDragExitCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1222
|
+
| `onDragLeave` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1223
|
+
| `onDragLeaveCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1224
|
+
| `onDragOver` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1225
|
+
| `onDragOverCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1226
|
+
| `onDragStart` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1227
|
+
| `onDragStartCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1228
|
+
| `onDrop` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1229
|
+
| `onDropCapture` | `DragEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1230
|
+
| `onDurationChange` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1231
|
+
| `onDurationChangeCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1232
|
+
| `onEmptied` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1233
|
+
| `onEmptiedCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1234
|
+
| `onEncrypted` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1235
|
+
| `onEncryptedCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1236
|
+
| `onEnded` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1237
|
+
| `onEndedCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1238
|
+
| `onError` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1239
|
+
| `onErrorCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1240
|
+
| `onFocus` | `FocusEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1241
|
+
| `onFocusCapture` | `FocusEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1242
|
+
| `onGotPointerCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1243
|
+
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1244
|
+
| `onInput` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1245
|
+
| `onInputCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1246
|
+
| `onInvalid` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1247
|
+
| `onInvalidCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1248
|
+
| `onKeyDown` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1249
|
+
| `onKeyDownCapture` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1250
|
+
| `onKeyPress` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1251
|
+
| `onKeyPressCapture` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1252
|
+
| `onKeyUp` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1253
|
+
| `onKeyUpCapture` | `KeyboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1254
|
+
| `onLoad` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1255
|
+
| `onLoadCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1256
|
+
| `onLoadStart` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1257
|
+
| `onLoadStartCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1258
|
+
| `onLoadedData` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1259
|
+
| `onLoadedDataCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1260
|
+
| `onLoadedMetadata` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1261
|
+
| `onLoadedMetadataCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1262
|
+
| `onLostPointerCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1263
|
+
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1264
|
+
| `onMouseDown` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1265
|
+
| `onMouseDownCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1266
|
+
| `onMouseEnter` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1267
|
+
| `onMouseLeave` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1268
|
+
| `onMouseMove` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1269
|
+
| `onMouseMoveCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1270
|
+
| `onMouseOut` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1271
|
+
| `onMouseOutCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1272
|
+
| `onMouseOver` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1273
|
+
| `onMouseOverCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1274
|
+
| `onMouseUp` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1275
|
+
| `onMouseUpCapture` | `MouseEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1276
|
+
| `onPaste` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1277
|
+
| `onPasteCapture` | `ClipboardEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1278
|
+
| `onPause` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1279
|
+
| `onPauseCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1280
|
+
| `onPlay` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1281
|
+
| `onPlayCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1282
|
+
| `onPlaying` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1283
|
+
| `onPlayingCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1284
|
+
| `onPointerCancel` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1285
|
+
| `onPointerCancelCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1286
|
+
| `onPointerDown` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1287
|
+
| `onPointerDownCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1288
|
+
| `onPointerEnter` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1289
|
+
| `onPointerLeave` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1290
|
+
| `onPointerMove` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1291
|
+
| `onPointerMoveCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1292
|
+
| `onPointerOut` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1293
|
+
| `onPointerOutCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1294
|
+
| `onPointerOver` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1295
|
+
| `onPointerOverCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1296
|
+
| `onPointerUp` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1297
|
+
| `onPointerUpCapture` | `PointerEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1298
|
+
| `onProgress` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1299
|
+
| `onProgressCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1300
|
+
| `onRateChange` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1301
|
+
| `onRateChangeCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1302
|
+
| `onReset` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1303
|
+
| `onResetCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1304
|
+
| `onResize` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1305
|
+
| `onResizeCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1306
|
+
| `onScroll` | `UIEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1307
|
+
| `onScrollCapture` | `UIEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1308
|
+
| `onSeeked` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1309
|
+
| `onSeekedCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1310
|
+
| `onSeeking` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1311
|
+
| `onSeekingCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1312
|
+
| `onSelect` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1313
|
+
| `onSelectCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1314
|
+
| `onStalled` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1315
|
+
| `onStalledCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1316
|
+
| `onSubmit` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1317
|
+
| `onSubmitCapture` | `FormEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1318
|
+
| `onSuspend` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1319
|
+
| `onSuspendCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1320
|
+
| `onTimeUpdate` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1321
|
+
| `onTimeUpdateCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1322
|
+
| `onTouchCancel` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1323
|
+
| `onTouchCancelCapture` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1324
|
+
| `onTouchEnd` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1325
|
+
| `onTouchEndCapture` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1326
|
+
| `onTouchMove` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1327
|
+
| `onTouchMoveCapture` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1328
|
+
| `onTouchStart` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1329
|
+
| `onTouchStartCapture` | `TouchEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1330
|
+
| `onTransitionEnd` | `TransitionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1331
|
+
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1332
|
+
| `onVolumeChange` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1333
|
+
| `onVolumeChangeCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1334
|
+
| `onWaiting` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1335
|
+
| `onWaitingCapture` | `ReactEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1336
|
+
| `onWheel` | `WheelEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1337
|
+
| `onWheelCapture` | `WheelEventHandler<HTMLSpanElement> \| undefined` | No | `-` | - |
|
|
1094
1338
|
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1095
1339
|
| `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
|
|
1096
1340
|
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
@@ -1104,25 +1348,43 @@ ValueSection
|
|
|
1104
1348
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
1105
1349
|
| `positivePulseColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'fgPositive'` | Color token used for positive numeric changes. |
|
|
1106
1350
|
| `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
|
|
1351
|
+
| `property` | `string \| undefined` | No | `-` | - |
|
|
1352
|
+
| `radioGroup` | `string \| undefined` | No | `-` | - |
|
|
1107
1353
|
| `ref` | `any` | No | `-` | - |
|
|
1354
|
+
| `rel` | `string \| undefined` | No | `-` | - |
|
|
1108
1355
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
1356
|
+
| `resource` | `string \| undefined` | No | `-` | - |
|
|
1357
|
+
| `results` | `number \| undefined` | No | `-` | - |
|
|
1358
|
+
| `rev` | `string \| undefined` | No | `-` | - |
|
|
1109
1359
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
1360
|
+
| `role` | `AriaRole \| undefined` | No | `-` | - |
|
|
1110
1361
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
1362
|
+
| `security` | `string \| undefined` | No | `-` | - |
|
|
1111
1363
|
| `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
|
|
1364
|
+
| `slot` | `string \| undefined` | No | `-` | - |
|
|
1365
|
+
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
|
|
1112
1366
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
1113
1367
|
| `styles` | `{ root?: CSSProperties; visibleContent?: CSSProperties \| undefined; formattedValueSection?: CSSProperties \| undefined; prefix?: CSSProperties \| undefined; suffix?: CSSProperties \| undefined; i18nPrefix?: CSSProperties \| undefined; i18nSuffix?: CSSProperties \| undefined; integer?: CSSProperties \| undefined; fraction?: CSSProperties \| undefined; text?: CSSProperties \| undefined; } \| undefined` | No | `-` | Inline style overrides applied to RollingNumber slots. |
|
|
1114
1368
|
| `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
|
|
1369
|
+
| `suppressContentEditableWarning` | `boolean \| undefined` | No | `-` | - |
|
|
1370
|
+
| `suppressHydrationWarning` | `boolean \| undefined` | No | `-` | - |
|
|
1371
|
+
| `tabIndex` | `number \| undefined` | No | `-` | - |
|
|
1115
1372
|
| `tabularNumbers` | `boolean` | No | `false true` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. |
|
|
1116
1373
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
1117
1374
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
1118
1375
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
1119
1376
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
1377
|
+
| `title` | `string \| undefined` | No | `-` | - |
|
|
1120
1378
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
1121
1379
|
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1122
1380
|
| `transition` | `RollingNumberTransitionConfig` | No | `-` | Framer Motion transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
|
|
1381
|
+
| `translate` | `yes \| no \| undefined` | No | `-` | - |
|
|
1382
|
+
| `typeof` | `string \| undefined` | No | `-` | - |
|
|
1123
1383
|
| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
|
|
1384
|
+
| `unselectable` | `off \| on \| undefined` | No | `-` | - |
|
|
1124
1385
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
1125
1386
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
1387
|
+
| `vocab` | `string \| undefined` | No | `-` | - |
|
|
1126
1388
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
1127
1389
|
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1128
1390
|
|
|
@@ -101,7 +101,7 @@ function CustomEndSearchInput() {
|
|
|
101
101
|
| `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
|
|
102
102
|
| `hideStartIcon` | `boolean` | No | `false` | hide the start icon |
|
|
103
103
|
| `key` | `Key \| null` | No | `-` | - |
|
|
104
|
-
| `onChange` | `
|
|
104
|
+
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
105
105
|
| `onClear` | `MouseEventHandler<Element>` | No | `-` | - |
|
|
106
106
|
| `onSearch` | `((str: string) => void)` | No | `-` | Callback is fired when a user hits enter on the keyboard. Can obtain the query through str parameter |
|
|
107
107
|
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
|
|
@@ -110,7 +110,7 @@ function CustomEndSearchInput() {
|
|
|
110
110
|
| `startIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the start icon |
|
|
111
111
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
112
112
|
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
|
|
113
|
-
| `type` | `
|
|
113
|
+
| `type` | `button \| submit \| reset` | No | `-` | - |
|
|
114
114
|
| `value` | `string \| (readonly string[] & string)` | No | `-` | The **value** property of the HTMLInputElement interface represents the current value of the input element as a string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/value) |
|
|
115
115
|
| `width` | `((Width<string \| number> \| { base?: Width<string \| number>; phone?: Width<string \| number> \| undefined; tablet?: Width<string \| number> \| undefined; desktop?: Width<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `100%` | Width of input as a percentage string. |
|
|
116
116
|
|
|
@@ -113,7 +113,7 @@ import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader'
|
|
|
113
113
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
114
114
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
115
115
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
116
|
-
| `as` | `div` | No | `-` |
|
|
116
|
+
| `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
117
117
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
118
118
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
119
119
|
| `balance` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode or IconName to present balances wherever it is necessary |
|
|
@@ -226,7 +226,7 @@ function Example() {
|
|
|
226
226
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
227
227
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
228
228
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
229
|
-
| `as` | `div` | No | `-` |
|
|
229
|
+
| `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
230
230
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
231
231
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
232
232
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -204,21 +204,15 @@ When using the `inside` label variant, you should always include a `placeholder`
|
|
|
204
204
|
|
|
205
205
|
| Prop | Type | Required | Default | Description |
|
|
206
206
|
| --- | --- | --- | --- | --- |
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the control. |
|
|
215
|
-
| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
|
|
216
|
-
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
217
|
-
| `labelStyle` | `CSSProperties` | No | `-` | Style for the label element |
|
|
218
|
-
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
|
|
207
|
+
| `name` | `string` | Yes | `-` | Field name of the multiple choice radio group. |
|
|
208
|
+
| `options` | `Record<T, ReactNode>` | Yes | `-` | Multiple choice options for the radio group. The object key represents the radio input value and the object value represents the radio option label. |
|
|
209
|
+
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of each control in the group. |
|
|
210
|
+
| `direction` | `horizontal \| vertical` | No | `vertical` | Direction a group of components should flow. |
|
|
211
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Gap to insert between siblings. |
|
|
212
|
+
| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set a label summary for the group of radios. |
|
|
213
|
+
| `onChange` | `((value: T) => void)` | No | `-` | Handle change event when pressing on a radio option. |
|
|
219
214
|
| `ref` | `null \| (instance: HTMLInputElement \| null) => void \| RefObject<HTMLInputElement>` | No | `-` | - |
|
|
220
215
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
221
|
-
| `
|
|
222
|
-
| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
|
|
216
|
+
| `value` | `string` | No | `-` | Currently selected value. |
|
|
223
217
|
|
|
224
218
|
|
|
@@ -1286,5 +1286,46 @@ function CustomComponentExamples() {
|
|
|
1286
1286
|
|
|
1287
1287
|
| Prop | Type | Required | Default | Description |
|
|
1288
1288
|
| --- | --- | --- | --- | --- |
|
|
1289
|
+
| `onChange` | `(value: Type extends multi ? SelectOptionValue \| SelectOptionValue[] \| null : SelectOptionValue \| null) => void` | Yes | `-` | - |
|
|
1290
|
+
| `options` | `SelectOptionList<Type, SelectOptionValue>` | Yes | `-` | Array of options to display in the select dropdown. Can be individual options or groups with label and options |
|
|
1291
|
+
| `value` | `string \| SelectOptionValue[] \| null` | Yes | `-` | - |
|
|
1292
|
+
| `SelectAllOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the Select All option |
|
|
1293
|
+
| `SelectControlComponent` | `SelectControlComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the select control |
|
|
1294
|
+
| `SelectDropdownComponent` | `SelectDropdownComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the dropdown container |
|
|
1295
|
+
| `SelectEmptyDropdownContentsComponent` | `SelectEmptyDropdownContentComponent` | No | `-` | Custom component to render when no options are available |
|
|
1296
|
+
| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
|
|
1297
|
+
| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
|
|
1298
|
+
| `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
|
|
1299
|
+
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
|
|
1300
|
+
| `className` | `string` | No | `-` | CSS class name for the root element |
|
|
1301
|
+
| `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
|
|
1302
|
+
| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
|
|
1303
|
+
| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
|
|
1304
|
+
| `controlAccessibilityLabel` | `string` | No | `-` | Accessibility label for the control |
|
|
1305
|
+
| `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
|
|
1306
|
+
| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
|
|
1307
|
+
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
1308
|
+
| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
|
|
1309
|
+
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
|
|
1310
|
+
| `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
|
|
1311
|
+
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Helper text displayed below the select |
|
|
1312
|
+
| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
|
|
1313
|
+
| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
|
|
1314
|
+
| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
|
|
1315
|
+
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
|
|
1316
|
+
| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
|
|
1317
|
+
| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
|
|
1318
|
+
| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
|
|
1319
|
+
| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Placeholder text displayed when no option is selected |
|
|
1320
|
+
| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
|
|
1321
|
+
| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
|
|
1322
|
+
| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
|
|
1323
|
+
| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
|
|
1324
|
+
| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
1325
|
+
| `style` | `CSSProperties` | No | `-` | Inline styles for the root element |
|
|
1326
|
+
| `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for different parts of the select |
|
|
1327
|
+
| `testID` | `string` | No | `-` | Test ID for the root element |
|
|
1328
|
+
| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
|
|
1329
|
+
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
1289
1330
|
|
|
1290
1331
|
|
|
@@ -187,7 +187,7 @@ function SelectChipExample() {
|
|
|
187
187
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
188
188
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
189
189
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
190
|
-
| `as` | `button` | No | `-` |
|
|
190
|
+
| `as` | `button` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
191
191
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
192
192
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
193
193
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
@@ -700,7 +700,7 @@ function TradingInterface() {
|
|
|
700
700
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
701
701
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
702
702
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
703
|
-
| `as` | `nav` | No | `-` |
|
|
703
|
+
| `as` | `nav` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
704
704
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
705
705
|
| `autoCollapse` | `boolean` | No | `false` | When set, the sidebar will auto collapse at or below the tablet breakpoint (currently 768px) |
|
|
706
706
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
@@ -772,7 +772,7 @@ function TradingInterface() {
|
|
|
772
772
|
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
773
773
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
774
774
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
775
|
-
| `onChange` | `FormEventHandler<
|
|
775
|
+
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
776
776
|
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
777
777
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
778
778
|
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|