@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.2
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 +8 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +2 -1
- package/mcp-docs/mobile/components/AreaChart.txt +40 -40
- package/mcp-docs/mobile/components/Avatar.txt +33 -33
- package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
- package/mcp-docs/mobile/components/Banner.txt +55 -40
- package/mcp-docs/mobile/components/BarChart.txt +40 -40
- package/mcp-docs/mobile/components/Box.txt +34 -34
- package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
- package/mcp-docs/mobile/components/Button.txt +52 -42
- package/mcp-docs/mobile/components/Calendar.txt +34 -34
- package/mcp-docs/mobile/components/Carousel.txt +48 -58
- package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +39 -39
- package/mcp-docs/mobile/components/Coachmark.txt +39 -39
- package/mcp-docs/mobile/components/Collapsible.txt +2 -2
- package/mcp-docs/mobile/components/Combobox.txt +10 -10
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
- package/mcp-docs/mobile/components/ContentCard.txt +37 -37
- package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
- package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
- package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
- package/mcp-docs/mobile/components/ContentCell.txt +49 -49
- package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
- package/mcp-docs/mobile/components/DataCard.txt +47 -47
- package/mcp-docs/mobile/components/DateInput.txt +25 -22
- package/mcp-docs/mobile/components/DatePicker.txt +25 -22
- package/mcp-docs/mobile/components/Divider.txt +33 -33
- package/mcp-docs/mobile/components/DotCount.txt +4 -2
- package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
- package/mcp-docs/mobile/components/Fallback.txt +32 -32
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +34 -34
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +38 -58
- package/mcp-docs/mobile/components/InputChip.txt +39 -39
- package/mcp-docs/mobile/components/Interactable.txt +34 -34
- package/mcp-docs/mobile/components/Legend.txt +43 -41
- package/mcp-docs/mobile/components/LineChart.txt +40 -40
- package/mcp-docs/mobile/components/Link.txt +41 -38
- package/mcp-docs/mobile/components/ListCell.txt +52 -52
- package/mcp-docs/mobile/components/Lottie.txt +34 -34
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +41 -41
- package/mcp-docs/mobile/components/MediaChip.txt +39 -39
- package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
- package/mcp-docs/mobile/components/Modal.txt +6 -2
- package/mcp-docs/mobile/components/ModalBody.txt +8 -8
- package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
- package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
- package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
- package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
- package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
- package/mcp-docs/mobile/components/Numpad.txt +37 -37
- package/mcp-docs/mobile/components/Overlay.txt +33 -33
- package/mcp-docs/mobile/components/PageFooter.txt +36 -30
- package/mcp-docs/mobile/components/PageHeader.txt +38 -32
- package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
- package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Point.txt +2 -2
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
- package/mcp-docs/mobile/components/Pressable.txt +36 -36
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +3 -3
- package/mcp-docs/mobile/components/Radio.txt +3 -3
- package/mcp-docs/mobile/components/RadioCell.txt +37 -37
- package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
- package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +25 -22
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
- package/mcp-docs/mobile/components/Select.txt +3 -3
- package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
- package/mcp-docs/mobile/components/SelectChip.txt +42 -40
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
- package/mcp-docs/mobile/components/SelectOption.txt +10 -10
- package/mcp-docs/mobile/components/SlideButton.txt +40 -40
- package/mcp-docs/mobile/components/Spacer.txt +7 -7
- package/mcp-docs/mobile/components/Sparkline.txt +3 -3
- package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
- package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
- package/mcp-docs/mobile/components/Spinner.txt +2 -2
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +37 -36
- package/mcp-docs/mobile/components/Switch.txt +13 -3
- package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +39 -37
- package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
- package/mcp-docs/mobile/components/Tabs.txt +34 -34
- package/mcp-docs/mobile/components/Tag.txt +41 -41
- package/mcp-docs/mobile/components/Text.txt +51 -58
- package/mcp-docs/mobile/components/TextInput.txt +25 -22
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +34 -34
- package/mcp-docs/mobile/components/Tooltip.txt +2 -2
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
- package/mcp-docs/mobile/components/Tray.txt +5 -3
- package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
- package/mcp-docs/mobile/components/VStack.txt +34 -34
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +9 -3
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AccordionItem.txt +4 -4
- package/mcp-docs/web/components/Alert.txt +3 -2
- package/mcp-docs/web/components/AreaChart.txt +63 -63
- package/mcp-docs/web/components/Avatar.txt +49 -49
- package/mcp-docs/web/components/AvatarButton.txt +54 -324
- package/mcp-docs/web/components/Banner.txt +71 -55
- package/mcp-docs/web/components/BarChart.txt +58 -58
- package/mcp-docs/web/components/Box.txt +49 -312
- package/mcp-docs/web/components/Button.txt +62 -324
- package/mcp-docs/web/components/Calendar.txt +49 -49
- package/mcp-docs/web/components/Carousel.txt +65 -72
- package/mcp-docs/web/components/CartesianChart.txt +63 -63
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +52 -52
- package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
- package/mcp-docs/web/components/Chip.txt +51 -51
- package/mcp-docs/web/components/Coachmark.txt +55 -55
- package/mcp-docs/web/components/Collapsible.txt +2 -2
- package/mcp-docs/web/components/Combobox.txt +8 -8
- package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
- package/mcp-docs/web/components/ContentCard.txt +54 -317
- package/mcp-docs/web/components/ContentCardBody.txt +57 -318
- package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
- package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
- package/mcp-docs/web/components/ContentCell.txt +63 -322
- package/mcp-docs/web/components/ControlGroup.txt +50 -50
- package/mcp-docs/web/components/DataCard.txt +60 -60
- package/mcp-docs/web/components/DateInput.txt +54 -54
- package/mcp-docs/web/components/DatePicker.txt +54 -54
- package/mcp-docs/web/components/Divider.txt +49 -49
- package/mcp-docs/web/components/DotCount.txt +3 -1
- package/mcp-docs/web/components/DotStatusColor.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +6 -6
- package/mcp-docs/web/components/Dropdown.txt +3 -3
- package/mcp-docs/web/components/Fallback.txt +49 -312
- package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/FullscreenModal.txt +5 -4
- package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
- package/mcp-docs/web/components/Grid.txt +51 -314
- package/mcp-docs/web/components/GridColumn.txt +48 -311
- package/mcp-docs/web/components/HStack.txt +49 -312
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +51 -51
- package/mcp-docs/web/components/IconButton.txt +51 -341
- package/mcp-docs/web/components/InputChip.txt +51 -51
- package/mcp-docs/web/components/Interactable.txt +48 -319
- package/mcp-docs/web/components/Legend.txt +62 -62
- package/mcp-docs/web/components/LineChart.txt +63 -63
- package/mcp-docs/web/components/Link.txt +48 -318
- package/mcp-docs/web/components/ListCell.txt +66 -325
- package/mcp-docs/web/components/Lottie.txt +49 -49
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MediaCard.txt +53 -53
- package/mcp-docs/web/components/MediaChip.txt +51 -51
- package/mcp-docs/web/components/MessagingCard.txt +54 -54
- package/mcp-docs/web/components/Modal.txt +51 -50
- package/mcp-docs/web/components/ModalBody.txt +49 -49
- package/mcp-docs/web/components/ModalFooter.txt +49 -49
- package/mcp-docs/web/components/ModalHeader.txt +50 -50
- package/mcp-docs/web/components/MultiContentModule.txt +55 -316
- package/mcp-docs/web/components/NavigationBar.txt +53 -53
- package/mcp-docs/web/components/NavigationTitle.txt +103 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
- package/mcp-docs/web/components/NudgeCard.txt +53 -53
- package/mcp-docs/web/components/Overlay.txt +49 -49
- package/mcp-docs/web/components/PageFooter.txt +54 -48
- package/mcp-docs/web/components/PageHeader.txt +58 -52
- package/mcp-docs/web/components/Pagination.txt +49 -49
- package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
- package/mcp-docs/web/components/PeriodSelector.txt +62 -62
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/Point.txt +5 -14
- package/mcp-docs/web/components/PopoverPanel.txt +1 -1
- package/mcp-docs/web/components/PortalProvider.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +48 -319
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +2 -2
- package/mcp-docs/web/components/Radio.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +52 -52
- package/mcp-docs/web/components/RadioGroup.txt +3 -3
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RemoteImage.txt +48 -48
- package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
- package/mcp-docs/web/components/RollingNumber.txt +51 -313
- package/mcp-docs/web/components/Scrubber.txt +2 -2
- package/mcp-docs/web/components/SearchInput.txt +56 -56
- package/mcp-docs/web/components/SectionHeader.txt +55 -55
- package/mcp-docs/web/components/SegmentedControl.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
- package/mcp-docs/web/components/Select.txt +3 -3
- package/mcp-docs/web/components/SelectAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectChip.txt +55 -55
- package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectOption.txt +56 -56
- package/mcp-docs/web/components/Sidebar.txt +66 -56
- package/mcp-docs/web/components/SidebarItem.txt +10 -111
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
- package/mcp-docs/web/components/Spacer.txt +55 -318
- package/mcp-docs/web/components/Sparkline.txt +3 -3
- package/mcp-docs/web/components/SparklineGradient.txt +3 -3
- package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
- package/mcp-docs/web/components/Spinner.txt +49 -49
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/SpotRectangle.txt +1 -1
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +53 -53
- package/mcp-docs/web/components/Switch.txt +21 -7
- package/mcp-docs/web/components/TabIndicator.txt +1 -1
- package/mcp-docs/web/components/TabLabel.txt +50 -50
- package/mcp-docs/web/components/TabNavigation.txt +48 -48
- package/mcp-docs/web/components/TabbedChips.txt +49 -49
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
- package/mcp-docs/web/components/Table.txt +4 -4
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +2 -2
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +49 -49
- package/mcp-docs/web/components/Tag.txt +52 -52
- package/mcp-docs/web/components/Text.txt +49 -312
- package/mcp-docs/web/components/TextInput.txt +56 -56
- package/mcp-docs/web/components/ThemeProvider.txt +24 -4
- package/mcp-docs/web/components/TileButton.txt +48 -318
- package/mcp-docs/web/components/Toast.txt +51 -51
- package/mcp-docs/web/components/Tooltip.txt +3 -3
- package/mcp-docs/web/components/Tray.txt +2 -2
- package/mcp-docs/web/components/UpsellCard.txt +15 -14
- package/mcp-docs/web/components/VStack.txt +49 -312
- package/mcp-docs/web/components/XAxis.txt +1 -1
- package/mcp-docs/web/components/YAxis.txt +1 -1
- package/mcp-docs/web/getting-started/installation.txt +13 -5
- package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
|
@@ -86,7 +86,7 @@ function CustomCheckboxCellExample() {
|
|
|
86
86
|
|
|
87
87
|
| Prop | Type | Required | Default | Description |
|
|
88
88
|
| --- | --- | --- | --- | --- |
|
|
89
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
89
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | - |
|
|
90
90
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
91
91
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
92
92
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
@@ -112,22 +112,22 @@ function CustomCheckboxCellExample() {
|
|
|
112
112
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
113
113
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
114
114
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
115
|
-
| `bottom` | `
|
|
115
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
116
116
|
| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
|
|
117
117
|
| `color` | `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 | `-` | - |
|
|
118
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
119
|
-
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
118
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
119
|
+
| `contentStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
|
|
120
120
|
| `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. |
|
|
121
121
|
| `controlSize` | `number` | No | `-` | Sets the control size in pixels. |
|
|
122
122
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
123
123
|
| `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
|
|
124
|
-
| `description` | `null \| string \| number \| false \| true \| ReactElement<
|
|
124
|
+
| `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
125
125
|
| `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
|
|
126
126
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
|
|
127
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
127
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
128
128
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
129
|
-
| `feedback` | `none \|
|
|
130
|
-
| `flexBasis` | `
|
|
129
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
130
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
131
131
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
132
132
|
| `flexGrow` | `number` | No | `-` | - |
|
|
133
133
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -136,24 +136,24 @@ function CustomCheckboxCellExample() {
|
|
|
136
136
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
137
137
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
138
138
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
139
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
140
|
-
| `height` | `
|
|
139
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
140
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
141
141
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
142
142
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
143
|
-
| `left` | `
|
|
143
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
144
144
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
145
145
|
| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
|
|
146
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
147
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
148
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
149
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
150
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
151
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
152
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
153
|
-
| `maxHeight` | `
|
|
154
|
-
| `maxWidth` | `
|
|
155
|
-
| `minHeight` | `
|
|
156
|
-
| `minWidth` | `
|
|
146
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
147
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
148
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
149
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
150
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
151
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
152
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
153
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
155
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
156
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
157
157
|
| `onChange` | `((value: CheckboxValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
|
|
158
158
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
159
159
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -170,34 +170,34 @@ function CustomCheckboxCellExample() {
|
|
|
170
170
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
171
171
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
172
172
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
173
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
174
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
175
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
176
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
177
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
178
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
179
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
173
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
174
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
175
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
176
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
177
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
178
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
179
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
180
180
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
181
|
-
| `position` | `
|
|
181
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
182
182
|
| `pressedBorderColor` | `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 | `-` | - |
|
|
183
183
|
| `pressedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
184
184
|
| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
|
|
185
|
-
| `ref` | `null \| (instance: View \| null) => void \|
|
|
186
|
-
| `right` | `
|
|
187
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
185
|
+
| `ref` | `null \| (instance: View \| null) => void \| RefObject<View \| null>` | No | `-` | - |
|
|
186
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
187
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
188
188
|
| `styles` | `{ root?: StyleProp<ViewStyle>; checkboxContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | - |
|
|
189
|
-
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
|
|
189
|
+
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. 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 |
|
|
190
190
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
191
191
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
192
192
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
193
193
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
194
|
-
| `top` | `
|
|
195
|
-
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
194
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
195
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
196
196
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
197
197
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
198
198
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
199
199
|
| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
|
|
200
|
-
| `width` | `
|
|
200
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
201
201
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
202
202
|
| `zIndex` | `number` | No | `-` | - |
|
|
203
203
|
|
|
@@ -264,9 +264,9 @@ function LegacyAccessibleCheckboxGroup() {
|
|
|
264
264
|
|
|
265
265
|
| Prop | Type | Required | Default | Description |
|
|
266
266
|
| --- | --- | --- | --- | --- |
|
|
267
|
-
| `children` | `ReactElement<
|
|
267
|
+
| `children` | `ReactElement<unknown, string \| JSXElementConstructor<any>>[]` | Yes | `-` | Checkbox elements that are part of the checkbox group. |
|
|
268
268
|
| `selectedValues` | `Set<CheckboxValue>` | Yes | `-` | Checkbox options that are checked. |
|
|
269
|
-
| `label` | `null \| string \| number \| false \| true \| ReactElement<
|
|
269
|
+
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Set a label summary for the group of checkboxes. |
|
|
270
270
|
| `onChange` | `((value?: CheckboxValue) => void) \| undefined` | No | `-` | Handle change events when user tap on the checkboxes |
|
|
271
271
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
272
272
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -280,7 +280,7 @@ function LegacyAccessibleCheckboxGroup() {
|
|
|
280
280
|
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
281
281
|
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
282
282
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
283
|
-
| `ref` | `null \| (instance: View \| null) => void \|
|
|
284
|
-
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
|
|
283
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
|
|
284
|
+
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. 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 |
|
|
285
285
|
|
|
286
286
|
|
|
@@ -150,21 +150,21 @@ function Example() {
|
|
|
150
150
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
151
151
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
152
152
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
153
|
-
| `bottom` | `
|
|
154
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
153
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed in the center of the Chip |
|
|
155
155
|
| `color` | `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 | `-` | - |
|
|
156
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
156
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
157
157
|
| `compact` | `boolean` | No | `-` | Reduces spacing around Chip content |
|
|
158
|
-
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
158
|
+
| `contentStyle` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
|
|
159
159
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
160
160
|
| `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
|
|
161
161
|
| `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
|
|
162
162
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
163
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
163
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
164
164
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
165
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
166
|
-
| `feedback` | `none \|
|
|
167
|
-
| `flexBasis` | `
|
|
165
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed after the value |
|
|
166
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
167
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
168
168
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
169
169
|
| `flexGrow` | `number` | No | `-` | - |
|
|
170
170
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -173,26 +173,26 @@ function Example() {
|
|
|
173
173
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
174
174
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
175
175
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
176
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
177
|
-
| `height` | `
|
|
176
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
177
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
178
178
|
| `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
179
179
|
| `inverted` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
|
|
180
180
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
181
181
|
| `key` | `Key \| null` | No | `-` | - |
|
|
182
|
-
| `left` | `
|
|
182
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
183
183
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
184
184
|
| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
|
|
185
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
186
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
187
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
188
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
189
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
190
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
191
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
192
|
-
| `maxHeight` | `
|
|
193
|
-
| `maxWidth` | `
|
|
194
|
-
| `minHeight` | `
|
|
195
|
-
| `minWidth` | `
|
|
185
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
186
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
187
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
188
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
189
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
190
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
191
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
192
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
193
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
|
|
194
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
195
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
196
196
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
197
197
|
| `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
|
|
198
198
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -212,32 +212,32 @@ function Example() {
|
|
|
212
212
|
| `onPressOut` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is released. Called when a touch is released before onPress. |
|
|
213
213
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
214
214
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
215
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
216
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
217
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
218
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
219
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
220
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
221
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
215
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
216
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
217
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
218
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
219
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
220
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
221
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
222
222
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
223
|
-
| `position` | `
|
|
224
|
-
| `ref` | `(
|
|
225
|
-
| `right` | `
|
|
226
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
227
|
-
| `start` | `null \| string \| number \| false \| true \| ReactElement<
|
|
228
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
223
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
224
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
225
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
226
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
227
|
+
| `start` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | ReactNode placed before the value |
|
|
228
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
229
229
|
| `styles` | `{ root?: StyleProp<ViewStyle>; content?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Chip component |
|
|
230
|
-
| `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 Used to locate this
|
|
230
|
+
| `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 Used to locate this view in end-to-end tests. |
|
|
231
231
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
232
232
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
233
233
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
234
234
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
235
|
-
| `top` | `
|
|
236
|
-
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
235
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
236
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
237
237
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
238
238
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
239
239
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
240
|
-
| `width` | `
|
|
240
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
241
241
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
242
242
|
| `zIndex` | `number` | No | `-` | - |
|
|
243
243
|
|
|
@@ -55,9 +55,9 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
55
55
|
|
|
56
56
|
| Prop | Type | Required | Default | Description |
|
|
57
57
|
| --- | --- | --- | --- | --- |
|
|
58
|
-
| `action` | `null \| string \| number \| false \| true \| ReactElement<
|
|
59
|
-
| `content` | `null \| string \| number \| false \| true \| ReactElement<
|
|
60
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
58
|
+
| `action` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Action button for next step or ending the tour |
|
|
59
|
+
| `content` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Content of the Coachmark. Text or ReactNode to be rendered below the title |
|
|
60
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Title of the Coachmark. Text or ReactNode |
|
|
61
61
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
62
62
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
63
63
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
@@ -82,15 +82,15 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
82
82
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
83
83
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
84
84
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
85
|
-
| `bottom` | `
|
|
86
|
-
| `checkbox` | `null \| string \| number \| false \| true \| ReactElement<
|
|
85
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
86
|
+
| `checkbox` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Checkbox component to be rendered below the content |
|
|
87
87
|
| `closeButtonAccessibilityLabel` | `string` | No | `-` | a11y label of the close button |
|
|
88
88
|
| `color` | `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 | `-` | - |
|
|
89
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
89
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
90
90
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
91
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
91
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
92
92
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
93
|
-
| `flexBasis` | `
|
|
93
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
94
94
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
95
95
|
| `flexGrow` | `number` | No | `-` | - |
|
|
96
96
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -99,24 +99,24 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
99
99
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
100
100
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
101
101
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
102
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
103
|
-
| `height` | `
|
|
102
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
103
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
104
104
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
105
105
|
| `key` | `Key \| null` | No | `-` | - |
|
|
106
|
-
| `left` | `
|
|
106
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
107
107
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
108
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
109
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
110
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
111
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
112
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
113
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
114
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
115
|
-
| `maxHeight` | `
|
|
116
|
-
| `maxWidth` | `
|
|
117
|
-
| `media` | `null \| string \| number \| false \| true \| ReactElement<
|
|
118
|
-
| `minHeight` | `
|
|
119
|
-
| `minWidth` | `
|
|
108
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
109
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
110
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
111
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
112
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
113
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
114
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
115
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
116
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
117
|
+
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Media of the Coachmark |
|
|
118
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
119
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
120
120
|
| `onClose` | `(() => void)` | No | `-` | Callback function fired when close button is pressed |
|
|
121
121
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
122
122
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -132,28 +132,28 @@ import { Coachmark } from '@coinbase/cds-mobile/coachmark/Coachmark'
|
|
|
132
132
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
133
133
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
134
134
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
135
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
136
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
137
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
138
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
139
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
140
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
141
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
135
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
136
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
137
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
138
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
139
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
140
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
141
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
142
142
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
143
|
-
| `position` | `
|
|
144
|
-
| `ref` | `(
|
|
145
|
-
| `right` | `
|
|
146
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
147
|
-
| `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
148
|
-
| `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 Used to locate this
|
|
143
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
144
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
145
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
146
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
147
|
+
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
148
|
+
| `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 Used to locate this view in end-to-end tests. |
|
|
149
149
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
150
150
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
151
151
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
152
152
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
153
|
-
| `top` | `
|
|
154
|
-
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
153
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
154
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
155
155
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
156
|
-
| `width` | `
|
|
156
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Desired width of the Coachmark with respect to max width of windowWidth - spacing2 * 2 |
|
|
157
157
|
| `zIndex` | `number` | No | `-` | - |
|
|
158
158
|
|
|
159
159
|
|
|
@@ -93,13 +93,13 @@ function Horizontal() {
|
|
|
93
93
|
|
|
94
94
|
| Prop | Type | Required | Default | Description |
|
|
95
95
|
| --- | --- | --- | --- | --- |
|
|
96
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
96
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Collapsible content |
|
|
97
97
|
| `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
|
|
98
98
|
| `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
|
|
99
99
|
| `key` | `Key \| null` | No | `-` | - |
|
|
100
100
|
| `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
|
|
101
101
|
| `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
|
|
102
|
-
| `ref` | `(
|
|
102
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
103
103
|
| `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
|
|
104
104
|
| `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 |
|
|
105
105
|
|
|
@@ -543,7 +543,7 @@ function FreeSoloComboboxExample() {
|
|
|
543
543
|
| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
|
|
544
544
|
| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
|
|
545
545
|
| `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
|
|
546
|
-
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` |
|
|
546
|
+
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
|
|
547
547
|
| `align` | `end \| start \| center` | No | `'start'` | Alignment of the value node. |
|
|
548
548
|
| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
|
|
549
549
|
| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
|
|
@@ -554,28 +554,28 @@ function FreeSoloComboboxExample() {
|
|
|
554
554
|
| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
|
|
555
555
|
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
556
556
|
| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
|
|
557
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<
|
|
558
|
-
| `endNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
557
|
+
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
|
|
558
|
+
| `endNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
|
|
559
559
|
| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
|
|
560
560
|
| `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
|
|
561
|
-
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<
|
|
561
|
+
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Helper text displayed below the select |
|
|
562
562
|
| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
|
|
563
563
|
| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
|
|
564
564
|
| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
|
|
565
|
-
| `label` | `null \| string \| number \| false \| true \| ReactElement<
|
|
565
|
+
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Label displayed above the control |
|
|
566
566
|
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
|
|
567
567
|
| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
|
|
568
|
-
| `media` | `ReactElement
|
|
568
|
+
| `media` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
|
|
569
569
|
| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
|
|
570
570
|
| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
|
|
571
|
-
| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<
|
|
572
|
-
| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
|
|
571
|
+
| `placeholder` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Placeholder text displayed when no option is selected |
|
|
572
|
+
| `ref` | `null \| (instance: SelectRef \| null) => void \| (() => VoidOrUndefinedOnly) \| RefObject<SelectRef \| null>` | No | `-` | - |
|
|
573
573
|
| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
|
|
574
574
|
| `searchText` | `string` | No | `-` | Controlled search text value |
|
|
575
575
|
| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
|
|
576
576
|
| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
|
|
577
|
-
| `startNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
578
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
577
|
+
| `startNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
|
|
578
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Inline styles for the root element |
|
|
579
579
|
| `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for individual elements of the Select component |
|
|
580
580
|
| `testID` | `string` | No | `-` | Test ID for the root element |
|
|
581
581
|
| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
|