@arc-ui/components 12.1.0 → 13.1.0
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/lib/Alert/styles.css +1 -1
- package/lib/Align/styles.css +1 -1
- package/lib/AppButton/styles.css +1 -1
- package/lib/Avatar/styles.css +1 -1
- package/lib/AvatarGroup/styles.css +1 -1
- package/lib/Badge/styles.css +1 -1
- package/lib/Banner/Banner.cjs +7 -3
- package/lib/Banner/Banner.mjs +7 -3
- package/lib/Box/styles.css +1 -1
- package/lib/BrandLogo/styles.css +1 -1
- package/lib/Breadcrumbs/Breadcrumbs.cjs +6 -6
- package/lib/Breadcrumbs/Breadcrumbs.mjs +6 -6
- package/lib/Breadcrumbs/styles.css +1 -1
- package/lib/Button/Button.cjs +1 -1
- package/lib/Button/Button.mjs +1 -1
- package/lib/Button/styles.css +1 -1
- package/lib/ButtonGroup/ButtonGroup.cjs +6 -3
- package/lib/ButtonGroup/ButtonGroup.mjs +6 -3
- package/lib/ButtonGroup/styles.css +1 -1
- package/lib/ButtonV2/ButtonV2.cjs +1 -1
- package/lib/ButtonV2/ButtonV2.mjs +1 -1
- package/lib/ButtonV2/styles.css +1 -1
- package/lib/Calendar/Calendar.cjs +5 -5
- package/lib/Calendar/Calendar.mjs +5 -5
- package/lib/Calendar/styles.css +1 -1
- package/lib/CardFooter/styles.css +1 -1
- package/lib/CardHeading/CardHeading.cjs +1 -1
- package/lib/CardHeading/CardHeading.mjs +1 -1
- package/lib/CardHeading/styles.css +1 -1
- package/lib/Carousel/Carousel.cjs +26 -14
- package/lib/Carousel/Carousel.mjs +26 -14
- package/lib/Carousel/styles.css +1 -1
- package/lib/Checkbox/Checkbox.cjs +7 -7
- package/lib/Checkbox/Checkbox.mjs +8 -8
- package/lib/Checkbox/styles.css +1 -1
- package/lib/CheckboxIcon/CheckboxIcon.cjs +1 -1
- package/lib/CheckboxIcon/CheckboxIcon.mjs +1 -1
- package/lib/CheckboxIcon/styles.css +1 -1
- package/lib/ClientSideVisible/ClientSideVisible.cjs +1 -0
- package/lib/ClientSideVisible/ClientSideVisible.mjs +1 -0
- package/lib/Columns/styles.css +1 -1
- package/lib/ComboBox/ComboBox.cjs +537 -143
- package/lib/ComboBox/ComboBox.mjs +537 -143
- package/lib/ComboBox/styles.css +1 -1
- package/lib/ConditionalWrapper/ConditionalWrapper.cjs +1 -0
- package/lib/ConditionalWrapper/ConditionalWrapper.mjs +1 -0
- package/lib/ContentSwitcher/ContentSwitcher.cjs +1 -1
- package/lib/ContentSwitcher/ContentSwitcher.mjs +4 -4
- package/lib/ContentSwitcher/styles.css +1 -1
- package/lib/ContentSwitcherDropdown/ContentSwitcherDropdown.cjs +7 -7
- package/lib/ContentSwitcherDropdown/ContentSwitcherDropdown.mjs +7 -7
- package/lib/ContentSwitcherDropdown/styles.css +1 -1
- package/lib/DatePicker/DatePicker.cjs +16 -16
- package/lib/DatePicker/DatePicker.mjs +17 -17
- package/lib/DatePicker/styles.css +1 -1
- package/lib/Disclosure/styles.css +1 -1
- package/lib/DisclosureMini/styles.css +1 -1
- package/lib/Download/styles.css +1 -1
- package/lib/Drawer/Drawer.cjs +36 -28
- package/lib/Drawer/Drawer.mjs +36 -28
- package/lib/Drawer/styles.css +1 -1
- package/lib/Elevation/styles.css +1 -1
- package/lib/Filter/styles.css +1 -1
- package/lib/FormControl/styles.css +1 -1
- package/lib/GhostedHeroBanner/GhostedHeroBanner.cjs +2 -2
- package/lib/GhostedHeroBanner/GhostedHeroBanner.mjs +2 -2
- package/lib/GhostedHeroBanner/styles.css +1 -1
- package/lib/GradientPageBackground/GradientPageBackground.cjs +2 -2
- package/lib/GradientPageBackground/GradientPageBackground.mjs +2 -2
- package/lib/GradientPageBackground/styles.css +1 -1
- package/lib/Grid/Grid.cjs +1 -0
- package/lib/Grid/Grid.mjs +1 -0
- package/lib/Grid/styles.css +1 -1
- package/lib/Group/styles.css +1 -1
- package/lib/Heading/styles.css +1 -1
- package/lib/HeroBanner/HeroBanner.cjs +7 -3
- package/lib/HeroBanner/HeroBanner.mjs +7 -3
- package/lib/HeroBanner/styles.css +1 -1
- package/lib/HeroButton/HeroButton.cjs +3 -3
- package/lib/HeroButton/HeroButton.mjs +4 -4
- package/lib/HeroButton/styles.css +1 -1
- package/lib/Hidden/styles.css +1 -1
- package/lib/HorizontalCard/HorizontalCard.cjs +1 -1
- package/lib/HorizontalCard/HorizontalCard.mjs +1 -1
- package/lib/HorizontalCard/styles.css +1 -1
- package/lib/Icon/styles.css +1 -1
- package/lib/Image/styles.css +1 -1
- package/lib/ImpactCard/ImpactCard.cjs +30 -17
- package/lib/ImpactCard/ImpactCard.mjs +31 -18
- package/lib/ImpactCard/styles.css +1 -1
- package/lib/InformationCard/InformationCard.cjs +59 -35
- package/lib/InformationCard/InformationCard.mjs +61 -37
- package/lib/InformationCard/styles.css +1 -1
- package/lib/Link/styles.css +1 -1
- package/lib/Markup/styles.css +1 -1
- package/lib/MediaCard/MediaCard.cjs +43 -24
- package/lib/MediaCard/MediaCard.mjs +44 -25
- package/lib/MediaCard/styles.css +1 -1
- package/lib/Menu/Menu.cjs +17 -16
- package/lib/Menu/Menu.mjs +17 -16
- package/lib/Menu/styles.css +1 -1
- package/lib/Modal/Modal.cjs +7 -7
- package/lib/Modal/Modal.mjs +7 -7
- package/lib/Modal/styles.css +1 -1
- package/lib/NavigationHeader/NavigationHeader.cjs +18 -18
- package/lib/NavigationHeader/NavigationHeader.mjs +19 -19
- package/lib/NavigationHeader/styles.css +1 -1
- package/lib/Pagination/styles.css +1 -1
- package/lib/PaginationSimple/styles.css +1 -1
- package/lib/Popover/Popover.cjs +7 -7
- package/lib/Popover/Popover.mjs +7 -7
- package/lib/Popover/styles.css +1 -1
- package/lib/Poster/styles.css +1 -1
- package/lib/ProgressBar/ProgressBar.cjs +2 -2
- package/lib/ProgressBar/ProgressBar.mjs +2 -2
- package/lib/ProgressBar/styles.css +1 -1
- package/lib/ProgressStepper/ProgressStepper.cjs +1 -1
- package/lib/ProgressStepper/ProgressStepper.mjs +1 -1
- package/lib/ProgressStepper/styles.css +1 -1
- package/lib/ProgressStepperOverflow/ProgressStepperOverflow.cjs +4 -4
- package/lib/ProgressStepperOverflow/ProgressStepperOverflow.mjs +5 -5
- package/lib/ProgressStepperOverflow/styles.css +1 -1
- package/lib/RadioCardGroup/RadioCardGroup.cjs +6 -6
- package/lib/RadioCardGroup/RadioCardGroup.mjs +7 -7
- package/lib/RadioCardGroup/styles.css +1 -1
- package/lib/RadioGroup/RadioGroup.cjs +8 -7
- package/lib/RadioGroup/RadioGroup.mjs +9 -8
- package/lib/RadioGroup/styles.css +1 -1
- package/lib/Rule/Rule.cjs +1 -1
- package/lib/Rule/Rule.mjs +1 -1
- package/lib/Rule/styles.css +1 -1
- package/lib/ScrollToTop/ScrollToTop.cjs +1 -1
- package/lib/ScrollToTop/ScrollToTop.mjs +1 -1
- package/lib/ScrollToTop/styles.css +1 -1
- package/lib/Section/styles.css +1 -1
- package/lib/Select/Select.cjs +6 -6
- package/lib/Select/Select.mjs +6 -6
- package/lib/Select/styles.css +1 -1
- package/lib/SemanticHeading/styles.css +1 -1
- package/lib/SiteFooter/styles.css +1 -1
- package/lib/SiteFooterV2/SiteFooterV2.cjs +4 -3
- package/lib/SiteFooterV2/SiteFooterV2.mjs +4 -3
- package/lib/SiteFooterV2/styles.css +1 -1
- package/lib/SiteHeaderV2/SiteHeaderV2.cjs +9 -6
- package/lib/SiteHeaderV2/SiteHeaderV2.mjs +9 -6
- package/lib/SiteHeaderV2/styles.css +1 -1
- package/lib/Skeleton/styles.css +1 -1
- package/lib/SkipLink/SkipLink.cjs +3 -2
- package/lib/SkipLink/SkipLink.mjs +4 -3
- package/lib/SkipLink/styles.css +1 -1
- package/lib/Spacing/Spacing.cjs +38 -0
- package/lib/Spacing/Spacing.mjs +36 -0
- package/lib/Spacing/styles.css +1 -0
- package/lib/Spinner/styles.css +1 -1
- package/lib/Surface/styles.css +1 -1
- package/lib/Switch/Switch.mjs +1 -1
- package/lib/Switch/styles.css +1 -1
- package/lib/TabbedBanner/TabbedBanner.cjs +13 -11
- package/lib/TabbedBanner/TabbedBanner.mjs +16 -14
- package/lib/TabbedBanner/styles.css +1 -1
- package/lib/Tabs/Tabs.cjs +57 -25
- package/lib/Tabs/Tabs.mjs +60 -28
- package/lib/Tabs/styles.css +1 -1
- package/lib/Tag/styles.css +1 -1
- package/lib/TemplateBanner/TemplateBanner.cjs +5 -1
- package/lib/TemplateBanner/TemplateBanner.mjs +5 -1
- package/lib/TemplateBanner/styles.css +1 -1
- package/lib/Text/styles.css +1 -1
- package/lib/TextArea/TextArea.cjs +3 -3
- package/lib/TextArea/TextArea.mjs +4 -4
- package/lib/TextArea/styles.css +1 -1
- package/lib/TextInput/TextInput.cjs +4 -4
- package/lib/TextInput/TextInput.mjs +4 -4
- package/lib/TextInput/styles.css +1 -1
- package/lib/Theme/Theme.cjs +1 -1
- package/lib/Theme/Theme.mjs +1 -1
- package/lib/Theme/styles.css +1 -1
- package/lib/ThemeIcon/styles.css +1 -1
- package/lib/ThumbnailSignpost/ThumbnailSignpost.cjs +1 -1
- package/lib/ThumbnailSignpost/ThumbnailSignpost.mjs +1 -1
- package/lib/ThumbnailSignpost/styles.css +1 -1
- package/lib/Toast/Toast.mjs +2 -2
- package/lib/Toast/styles.css +1 -1
- package/lib/Tooltip/Tooltip.cjs +3 -3
- package/lib/Tooltip/Tooltip.mjs +3 -3
- package/lib/Tooltip/styles.css +1 -1
- package/lib/Truncate/styles.css +1 -1
- package/lib/TypographyCard/TypographyCard.cjs +40 -16
- package/lib/TypographyCard/TypographyCard.mjs +41 -17
- package/lib/TypographyCard/styles.css +1 -1
- package/lib/UniversalHeader/styles.css +1 -1
- package/lib/VerticalSpace/styles.css +1 -1
- package/lib/VideoPlayer/VideoPlayer.cjs +3 -3
- package/lib/VideoPlayer/VideoPlayer.mjs +3 -3
- package/lib/VideoPlayer/styles.css +1 -1
- package/lib/Visible/styles.css +1 -1
- package/lib/VisuallyHidden/styles.css +1 -1
- package/lib/_shared/cjs/{Button-BN4jUsg5.cjs → Button-CrevzrTg.cjs} +3 -3
- package/lib/_shared/cjs/{ButtonV2-bUu36xW8.cjs → ButtonV2-CxyploaQ.cjs} +3 -3
- package/lib/_shared/cjs/{Calendar-D_jZ0cgf.cjs → Calendar-CLWtKvPh.cjs} +6 -6
- package/lib/_shared/cjs/{CardHeading-lGy1u6eD.cjs → CardHeading-C84m67_F.cjs} +2 -2
- package/lib/_shared/cjs/{CheckboxIcon-BTkdXfpp.cjs → CheckboxIcon-BzY1S_ud.cjs} +6 -5
- package/lib/_shared/cjs/{Combination-6m6aOXZq.cjs → Combination-Cm62lfyr.cjs} +1 -1
- package/lib/_shared/cjs/{ContentSwitcherDropdown-BLXyhXVS.cjs → ContentSwitcherDropdown-6IGRpV54.cjs} +2 -2
- package/lib/_shared/cjs/{ContentSwitcherList-DgychllS.cjs → ContentSwitcherList-Di7RS8ue.cjs} +20 -9
- package/lib/_shared/cjs/{Popover-CYcqjefw.cjs → Popover-BxuQPltF.cjs} +8 -5
- package/lib/_shared/cjs/{ProgressStepper-mTgKZYEl.cjs → ProgressStepper-Cs6vX7Th.cjs} +3 -3
- package/lib/_shared/cjs/{Rule-jmvOpci7.cjs → Rule-essaguo_.cjs} +2 -2
- package/lib/_shared/cjs/{TemplateBanner-CzDAL0lq.cjs → TemplateBanner-rdwgmFH_.cjs} +36 -6
- package/lib/_shared/cjs/{TextInput-BHzuoI7E.cjs → TextInput-CLkhL2KT.cjs} +45 -12
- package/lib/_shared/cjs/{Tooltip-CEb7YEP2.cjs → Tooltip-CdmWvrnr.cjs} +2 -2
- package/lib/_shared/cjs/{arc-breakpoints-DFPoWNR4.cjs → arc-breakpoints-JJMLGzht.cjs} +1 -1
- package/lib/_shared/cjs/{index-BGGFOAAx.cjs → index-BBDa9gnQ.cjs} +2 -2
- package/lib/_shared/cjs/{index-D9onmVh5.cjs → index-BDUrOKEW.cjs} +3 -3
- package/lib/_shared/cjs/{index-CklPiHsS.cjs → index-B_WZUATb.cjs} +2 -2
- package/lib/_shared/cjs/{index-B11wQrRa.cjs → index-BdJeAKfz.cjs} +1 -1
- package/lib/_shared/cjs/{index-CDVpHNP8.cjs → index-Dgn0408w.cjs} +4 -4
- package/lib/_shared/cjs/{index-DXNM3D1d.cjs → index-DlWZZNwu.cjs} +2 -2
- package/lib/_shared/cjs/{index-BWfgSvRQ.cjs → index-DsqYRMfM.cjs} +4 -4
- package/lib/_shared/cjs/{index-KrMgv4q_.cjs → index-WO7l1Mfx.cjs} +3 -3
- package/lib/_shared/cjs/{index.es-B2ZfX2D7.cjs → index.es-CCJ64o4N.cjs} +1 -1
- package/lib/_shared/esm/{Button-DTiOFT9M.mjs → Button-Benn9Qop.mjs} +4 -4
- package/lib/_shared/esm/{ButtonV2-ByW5P8Hq.mjs → ButtonV2-CgjYgfZA.mjs} +4 -4
- package/lib/_shared/esm/{Calendar-wG6UVDgO.mjs → Calendar-BcYEIJhA.mjs} +7 -7
- package/lib/_shared/esm/{CardHeading-CfPEEmBO.mjs → CardHeading-CV14vmox.mjs} +2 -2
- package/lib/_shared/esm/{CheckboxIcon-BcVQe6mC.mjs → CheckboxIcon-CzRn1j8X.mjs} +6 -5
- package/lib/_shared/esm/{Combination-BQ4XBtF-.mjs → Combination-BW0YAEZD.mjs} +1 -1
- package/lib/_shared/esm/{ContentSwitcherDropdown-ckPG4pry.mjs → ContentSwitcherDropdown-CwoMd63a.mjs} +2 -2
- package/lib/_shared/esm/{ContentSwitcherList-CWZcMblg.mjs → ContentSwitcherList-Bvp9Zl85.mjs} +22 -11
- package/lib/_shared/esm/{Popover-BHCEpLSa.mjs → Popover-Pjtmu_TN.mjs} +8 -5
- package/lib/_shared/esm/{ProgressStepper-DxZrJR0q.mjs → ProgressStepper-DTPHHVFe.mjs} +4 -4
- package/lib/_shared/esm/{Rule-I1w3EaZi.mjs → Rule-Bz3QPezk.mjs} +3 -3
- package/lib/_shared/esm/{TemplateBanner-CZSTdma0.mjs → TemplateBanner-DzU9Edky.mjs} +37 -7
- package/lib/_shared/esm/{TextInput-CZaNXVHl.mjs → TextInput-WczTCUvp.mjs} +47 -14
- package/lib/_shared/esm/{Tooltip-BpSzN3Tx.mjs → Tooltip-DY8nS1to.mjs} +2 -2
- package/lib/_shared/esm/{arc-breakpoints-TEKN0W5t.mjs → arc-breakpoints-CQOgeFK_.mjs} +1 -1
- package/lib/_shared/esm/{index-u47CK8Y0.mjs → index-B3ewsmrD.mjs} +2 -2
- package/lib/_shared/esm/{index-GCEHSsY8.mjs → index-BMmvMegf.mjs} +2 -2
- package/lib/_shared/esm/{index-DXHprNQ6.mjs → index-C_mwuZg6.mjs} +1 -1
- package/lib/_shared/esm/{index-BWkI4Dwz.mjs → index-CfXVJXLq.mjs} +3 -3
- package/lib/_shared/esm/{index-CWHcEz3_.mjs → index-Cgsjp3NL.mjs} +1 -1
- package/lib/_shared/esm/{index-CN4hP3Wu.mjs → index-CjeQnMcn.mjs} +3 -3
- package/lib/_shared/esm/{index-BFKdmv_g.mjs → index-DNvlT7G_.mjs} +3 -3
- package/lib/_shared/esm/{index-Do2wfP-X.mjs → index-Dd3yZ_Kk.mjs} +4 -4
- package/lib/_shared/esm/{index-vnVJe9rH.mjs → index-Dfz5UgHo.mjs} +4 -4
- package/lib/_shared/esm/{index-Bz2JQq34.mjs → index-DkAfUbDx.mjs} +2 -2
- package/lib/_shared/esm/{index-6HtUz28p.mjs → index-Drb5ngQr.mjs} +1 -1
- package/lib/_shared/esm/{index.es-Co1d96HB.mjs → index.es-BJl4zTyt.mjs} +1 -1
- package/lib/index.cjs +4993 -4362
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +1221 -327
- package/lib/index.d.mts +1221 -327
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +4992 -4362
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +6 -2
- package/package.json +12 -12
package/lib/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import React__default, {
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default, { ReactNode, JSX, HTMLAttributes, Ref, MouseEvent as MouseEvent$1, ChangeEvent, ReactElement } from 'react';
|
|
3
3
|
import { ArcGradient } from '@arc-ui/gradients';
|
|
4
4
|
import { ImageProps as ImageProps$1 } from 'src/components/Image/Image';
|
|
5
5
|
import { VideoPlayerProps as VideoPlayerProps$1 } from 'src/components/VideoPlayer';
|
|
@@ -9,7 +9,7 @@ import { ReactPlayerProps } from 'react-player';
|
|
|
9
9
|
/**
|
|
10
10
|
* Use `Align` to align items horizontally or vertically.
|
|
11
11
|
*/
|
|
12
|
-
declare const Align:
|
|
12
|
+
declare const Align: ({ children, horizontal, isDebugVisible, vertical, ...props }: AlignProps) => React__default.JSX.Element;
|
|
13
13
|
interface AlignProps {
|
|
14
14
|
/**
|
|
15
15
|
* Contents of the Align. Each item will be wrapped in an AlignItem component.
|
|
@@ -33,8 +33,8 @@ interface AlignProps {
|
|
|
33
33
|
/**
|
|
34
34
|
* Use `Link` to direct users to a new page or piece of information.
|
|
35
35
|
*/
|
|
36
|
-
declare const Link:
|
|
37
|
-
interface LinkProps
|
|
36
|
+
declare const Link: ({ id, href, title, rel, target, children, onClick, screenReaderText, isButton, isImplied, size, ...props }: LinkProps) => JSX.Element;
|
|
37
|
+
interface LinkProps {
|
|
38
38
|
/**
|
|
39
39
|
* Id attribute for `Link`.
|
|
40
40
|
*/
|
|
@@ -85,18 +85,304 @@ interface LinkProps$1 {
|
|
|
85
85
|
* Use `SemanticHeading` to render accessible headings that preserve correct
|
|
86
86
|
* document hierarchy.
|
|
87
87
|
*/
|
|
88
|
-
declare const SemanticHeading: React__default.
|
|
88
|
+
declare const SemanticHeading: ({ children, level, className, ...props }: SemanticHeadingProps) => React__default.DetailedReactHTMLElement<{
|
|
89
|
+
defaultChecked?: boolean | undefined;
|
|
90
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
91
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
92
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
93
|
+
accessKey?: string | undefined;
|
|
94
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
|
|
95
|
+
autoFocus?: boolean | undefined;
|
|
96
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
97
|
+
contextMenu?: string | undefined;
|
|
98
|
+
dir?: string | undefined;
|
|
99
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
100
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
101
|
+
hidden?: boolean | undefined;
|
|
102
|
+
id?: string | undefined;
|
|
103
|
+
lang?: string | undefined;
|
|
104
|
+
nonce?: string | undefined;
|
|
105
|
+
slot?: string | undefined;
|
|
106
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
107
|
+
style?: React__default.CSSProperties | undefined;
|
|
108
|
+
tabIndex?: number | undefined;
|
|
109
|
+
title?: string | undefined;
|
|
110
|
+
translate?: "yes" | "no" | undefined;
|
|
111
|
+
radioGroup?: string | undefined;
|
|
112
|
+
role?: React__default.AriaRole | undefined;
|
|
113
|
+
about?: string | undefined;
|
|
114
|
+
content?: string | undefined;
|
|
115
|
+
datatype?: string | undefined;
|
|
116
|
+
inlist?: any;
|
|
117
|
+
prefix?: string | undefined;
|
|
118
|
+
property?: string | undefined;
|
|
119
|
+
rel?: string | undefined;
|
|
120
|
+
resource?: string | undefined;
|
|
121
|
+
rev?: string | undefined;
|
|
122
|
+
typeof?: string | undefined;
|
|
123
|
+
vocab?: string | undefined;
|
|
124
|
+
autoCorrect?: string | undefined;
|
|
125
|
+
autoSave?: string | undefined;
|
|
126
|
+
color?: string | undefined;
|
|
127
|
+
itemProp?: string | undefined;
|
|
128
|
+
itemScope?: boolean | undefined;
|
|
129
|
+
itemType?: string | undefined;
|
|
130
|
+
itemID?: string | undefined;
|
|
131
|
+
itemRef?: string | undefined;
|
|
132
|
+
results?: number | undefined;
|
|
133
|
+
security?: string | undefined;
|
|
134
|
+
unselectable?: "on" | "off" | undefined;
|
|
135
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined;
|
|
136
|
+
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
|
|
137
|
+
popoverTarget?: string | undefined;
|
|
138
|
+
inert?: boolean | undefined;
|
|
139
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
|
|
140
|
+
is?: string | undefined;
|
|
141
|
+
exportparts?: string | undefined;
|
|
142
|
+
part?: string | undefined;
|
|
143
|
+
"aria-activedescendant"?: string | undefined;
|
|
144
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
145
|
+
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
|
|
146
|
+
"aria-braillelabel"?: string | undefined;
|
|
147
|
+
"aria-brailleroledescription"?: string | undefined;
|
|
148
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
149
|
+
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
150
|
+
"aria-colcount"?: number | undefined;
|
|
151
|
+
"aria-colindex"?: number | undefined;
|
|
152
|
+
"aria-colindextext"?: string | undefined;
|
|
153
|
+
"aria-colspan"?: number | undefined;
|
|
154
|
+
"aria-controls"?: string | undefined;
|
|
155
|
+
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
156
|
+
"aria-describedby"?: string | undefined;
|
|
157
|
+
"aria-description"?: string | undefined;
|
|
158
|
+
"aria-details"?: string | undefined;
|
|
159
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
160
|
+
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
|
|
161
|
+
"aria-errormessage"?: string | undefined;
|
|
162
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
163
|
+
"aria-flowto"?: string | undefined;
|
|
164
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
165
|
+
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
|
|
166
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
167
|
+
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
168
|
+
"aria-keyshortcuts"?: string | undefined;
|
|
169
|
+
"aria-label"?: string | undefined;
|
|
170
|
+
"aria-labelledby"?: string | undefined;
|
|
171
|
+
"aria-level"?: number | undefined;
|
|
172
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
173
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
174
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
175
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
176
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
177
|
+
"aria-owns"?: string | undefined;
|
|
178
|
+
"aria-placeholder"?: string | undefined;
|
|
179
|
+
"aria-posinset"?: number | undefined;
|
|
180
|
+
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
181
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
182
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
|
|
183
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
184
|
+
"aria-roledescription"?: string | undefined;
|
|
185
|
+
"aria-rowcount"?: number | undefined;
|
|
186
|
+
"aria-rowindex"?: number | undefined;
|
|
187
|
+
"aria-rowindextext"?: string | undefined;
|
|
188
|
+
"aria-rowspan"?: number | undefined;
|
|
189
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
190
|
+
"aria-setsize"?: number | undefined;
|
|
191
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
192
|
+
"aria-valuemax"?: number | undefined;
|
|
193
|
+
"aria-valuemin"?: number | undefined;
|
|
194
|
+
"aria-valuenow"?: number | undefined;
|
|
195
|
+
"aria-valuetext"?: string | undefined;
|
|
196
|
+
dangerouslySetInnerHTML?: {
|
|
197
|
+
__html: string | TrustedHTML;
|
|
198
|
+
} | undefined;
|
|
199
|
+
onCopy?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
200
|
+
onCopyCapture?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
201
|
+
onCut?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
202
|
+
onCutCapture?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
203
|
+
onPaste?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
204
|
+
onPasteCapture?: React__default.ClipboardEventHandler<HTMLHeadingElement> | undefined;
|
|
205
|
+
onCompositionEnd?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
206
|
+
onCompositionEndCapture?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
207
|
+
onCompositionStart?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
208
|
+
onCompositionStartCapture?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
209
|
+
onCompositionUpdate?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
210
|
+
onCompositionUpdateCapture?: React__default.CompositionEventHandler<HTMLHeadingElement> | undefined;
|
|
211
|
+
onFocus?: React__default.FocusEventHandler<HTMLHeadingElement> | undefined;
|
|
212
|
+
onFocusCapture?: React__default.FocusEventHandler<HTMLHeadingElement> | undefined;
|
|
213
|
+
onBlur?: React__default.FocusEventHandler<HTMLHeadingElement> | undefined;
|
|
214
|
+
onBlurCapture?: React__default.FocusEventHandler<HTMLHeadingElement> | undefined;
|
|
215
|
+
onChange?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
216
|
+
onChangeCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
217
|
+
onBeforeInput?: React__default.InputEventHandler<HTMLHeadingElement> | undefined;
|
|
218
|
+
onBeforeInputCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
219
|
+
onInput?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
220
|
+
onInputCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
221
|
+
onReset?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
222
|
+
onResetCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
223
|
+
onSubmit?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
224
|
+
onSubmitCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
225
|
+
onInvalid?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
226
|
+
onInvalidCapture?: React__default.FormEventHandler<HTMLHeadingElement> | undefined;
|
|
227
|
+
onLoad?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
228
|
+
onLoadCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
229
|
+
onError?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
230
|
+
onErrorCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
231
|
+
onKeyDown?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
232
|
+
onKeyDownCapture?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
233
|
+
onKeyPress?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
234
|
+
onKeyPressCapture?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
235
|
+
onKeyUp?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
236
|
+
onKeyUpCapture?: React__default.KeyboardEventHandler<HTMLHeadingElement> | undefined;
|
|
237
|
+
onAbort?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
238
|
+
onAbortCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
239
|
+
onCanPlay?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
240
|
+
onCanPlayCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
241
|
+
onCanPlayThrough?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
242
|
+
onCanPlayThroughCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
243
|
+
onDurationChange?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
244
|
+
onDurationChangeCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
245
|
+
onEmptied?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
246
|
+
onEmptiedCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
247
|
+
onEncrypted?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
248
|
+
onEncryptedCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
249
|
+
onEnded?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
250
|
+
onEndedCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
251
|
+
onLoadedData?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
252
|
+
onLoadedDataCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
253
|
+
onLoadedMetadata?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
254
|
+
onLoadedMetadataCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
255
|
+
onLoadStart?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
256
|
+
onLoadStartCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
257
|
+
onPause?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
258
|
+
onPauseCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
259
|
+
onPlay?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
260
|
+
onPlayCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
261
|
+
onPlaying?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
262
|
+
onPlayingCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
263
|
+
onProgress?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
264
|
+
onProgressCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
265
|
+
onRateChange?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
266
|
+
onRateChangeCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
267
|
+
onSeeked?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
268
|
+
onSeekedCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
269
|
+
onSeeking?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
270
|
+
onSeekingCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
271
|
+
onStalled?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
272
|
+
onStalledCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
273
|
+
onSuspend?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
274
|
+
onSuspendCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
275
|
+
onTimeUpdate?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
276
|
+
onTimeUpdateCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
277
|
+
onVolumeChange?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
278
|
+
onVolumeChangeCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
279
|
+
onWaiting?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
280
|
+
onWaitingCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
281
|
+
onAuxClick?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
282
|
+
onAuxClickCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
283
|
+
onClick?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
284
|
+
onClickCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
285
|
+
onContextMenu?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
286
|
+
onContextMenuCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
287
|
+
onDoubleClick?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
288
|
+
onDoubleClickCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
289
|
+
onDrag?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
290
|
+
onDragCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
291
|
+
onDragEnd?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
292
|
+
onDragEndCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
293
|
+
onDragEnter?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
294
|
+
onDragEnterCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
295
|
+
onDragExit?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
296
|
+
onDragExitCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
297
|
+
onDragLeave?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
298
|
+
onDragLeaveCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
299
|
+
onDragOver?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
300
|
+
onDragOverCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
301
|
+
onDragStart?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
302
|
+
onDragStartCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
303
|
+
onDrop?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
304
|
+
onDropCapture?: React__default.DragEventHandler<HTMLHeadingElement> | undefined;
|
|
305
|
+
onMouseDown?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
306
|
+
onMouseDownCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
307
|
+
onMouseEnter?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
308
|
+
onMouseLeave?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
309
|
+
onMouseMove?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
310
|
+
onMouseMoveCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
311
|
+
onMouseOut?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
312
|
+
onMouseOutCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
313
|
+
onMouseOver?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
314
|
+
onMouseOverCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
315
|
+
onMouseUp?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
316
|
+
onMouseUpCapture?: React__default.MouseEventHandler<HTMLHeadingElement> | undefined;
|
|
317
|
+
onSelect?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
318
|
+
onSelectCapture?: React__default.ReactEventHandler<HTMLHeadingElement> | undefined;
|
|
319
|
+
onTouchCancel?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
320
|
+
onTouchCancelCapture?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
321
|
+
onTouchEnd?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
322
|
+
onTouchEndCapture?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
323
|
+
onTouchMove?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
324
|
+
onTouchMoveCapture?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
325
|
+
onTouchStart?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
326
|
+
onTouchStartCapture?: React__default.TouchEventHandler<HTMLHeadingElement> | undefined;
|
|
327
|
+
onPointerDown?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
328
|
+
onPointerDownCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
329
|
+
onPointerMove?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
330
|
+
onPointerMoveCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
331
|
+
onPointerUp?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
332
|
+
onPointerUpCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
333
|
+
onPointerCancel?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
334
|
+
onPointerCancelCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
335
|
+
onPointerEnter?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
336
|
+
onPointerLeave?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
337
|
+
onPointerOver?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
338
|
+
onPointerOverCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
339
|
+
onPointerOut?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
340
|
+
onPointerOutCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
341
|
+
onGotPointerCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
342
|
+
onGotPointerCaptureCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
343
|
+
onLostPointerCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
344
|
+
onLostPointerCaptureCapture?: React__default.PointerEventHandler<HTMLHeadingElement> | undefined;
|
|
345
|
+
onScroll?: React__default.UIEventHandler<HTMLHeadingElement> | undefined;
|
|
346
|
+
onScrollCapture?: React__default.UIEventHandler<HTMLHeadingElement> | undefined;
|
|
347
|
+
onScrollEnd?: React__default.UIEventHandler<HTMLHeadingElement> | undefined;
|
|
348
|
+
onScrollEndCapture?: React__default.UIEventHandler<HTMLHeadingElement> | undefined;
|
|
349
|
+
onWheel?: React__default.WheelEventHandler<HTMLHeadingElement> | undefined;
|
|
350
|
+
onWheelCapture?: React__default.WheelEventHandler<HTMLHeadingElement> | undefined;
|
|
351
|
+
onAnimationStart?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
352
|
+
onAnimationStartCapture?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
353
|
+
onAnimationEnd?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
354
|
+
onAnimationEndCapture?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
355
|
+
onAnimationIteration?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
356
|
+
onAnimationIterationCapture?: React__default.AnimationEventHandler<HTMLHeadingElement> | undefined;
|
|
357
|
+
onToggle?: React__default.ToggleEventHandler<HTMLHeadingElement> | undefined;
|
|
358
|
+
onBeforeToggle?: React__default.ToggleEventHandler<HTMLHeadingElement> | undefined;
|
|
359
|
+
onTransitionCancel?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
360
|
+
onTransitionCancelCapture?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
361
|
+
onTransitionEnd?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
362
|
+
onTransitionEndCapture?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
363
|
+
onTransitionRun?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
364
|
+
onTransitionRunCapture?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
365
|
+
onTransitionStart?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
366
|
+
onTransitionStartCapture?: React__default.TransitionEventHandler<HTMLHeadingElement> | undefined;
|
|
367
|
+
className: string;
|
|
368
|
+
}, HTMLElement>;
|
|
89
369
|
type SemanticHeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
|
|
90
370
|
interface SemanticHeadingProps extends React__default.HTMLAttributes<HTMLHeadingElement> {
|
|
371
|
+
/**
|
|
372
|
+
* The semantic heading level (1-6).
|
|
373
|
+
*/
|
|
91
374
|
level?: SemanticHeadingLevel;
|
|
375
|
+
/**
|
|
376
|
+
* Content to render within the heading.
|
|
377
|
+
*/
|
|
92
378
|
children: React__default.ReactNode;
|
|
93
379
|
}
|
|
94
380
|
|
|
95
381
|
/**
|
|
96
382
|
* Use `Alert` to inform the user of important changes or actions.
|
|
97
383
|
*/
|
|
98
|
-
declare const Alert:
|
|
99
|
-
type AlertLinkProps = Omit<LinkProps
|
|
384
|
+
declare const Alert: ({ heading, headingLevel, description, links, status, isDismissable, onDismiss, icon, isMeasured, autoFocusOnMount, role, ...props }: AlertProps) => React__default.JSX.Element | null;
|
|
385
|
+
type AlertLinkProps = Omit<LinkProps, "size" | "isImplied">;
|
|
100
386
|
interface AlertProps {
|
|
101
387
|
/**
|
|
102
388
|
* Determine a heading for `<Alert />`
|
|
@@ -148,11 +434,20 @@ type AlertStatus = "general" | "error" | "warning" | "success";
|
|
|
148
434
|
/**
|
|
149
435
|
* Use `AppButton` for a branded button that links users to download an app.
|
|
150
436
|
*/
|
|
151
|
-
declare const AppButton: React__default.
|
|
437
|
+
declare const AppButton: ({ type, url, screenReaderText, ...props }: AppButtonProps) => React__default.JSX.Element;
|
|
152
438
|
type AppButtonType = "google-play" | "apple-app-store";
|
|
153
439
|
interface AppButtonProps {
|
|
440
|
+
/**
|
|
441
|
+
* The type of app store button to display.
|
|
442
|
+
*/
|
|
154
443
|
type: AppButtonType;
|
|
444
|
+
/**
|
|
445
|
+
* Text to be read by screen readers describing the button action.
|
|
446
|
+
*/
|
|
155
447
|
screenReaderText: string;
|
|
448
|
+
/**
|
|
449
|
+
* The URL to link to for downloading the app.
|
|
450
|
+
*/
|
|
156
451
|
url: string;
|
|
157
452
|
}
|
|
158
453
|
|
|
@@ -162,8 +457,8 @@ declare const anchorPoints: readonly ["N", "NE", "E", "SE", "S", "SW", "W", "NW"
|
|
|
162
457
|
* Use `Image` to render a single image, or set of images, with support for
|
|
163
458
|
* image fitting and art direction.
|
|
164
459
|
*/
|
|
165
|
-
declare const Image:
|
|
166
|
-
declare const ImageSource:
|
|
460
|
+
declare const Image: ({ alt, fadeOnLoad, anchor, children, fetchPriority, fillColor, fit, height, loading, overlay, sizes, src, srcSet, width, ...props }: ImageProps) => React__default.JSX.Element;
|
|
461
|
+
declare const ImageSource: ({ height, media, srcSet, sizes, type, ...props }: ImageSourceProps) => React__default.JSX.Element;
|
|
167
462
|
interface ImageSourceProps {
|
|
168
463
|
/**
|
|
169
464
|
* The intrinsic height of the ImageSource, in pixels
|
|
@@ -261,33 +556,75 @@ type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "wi
|
|
|
261
556
|
type AvatarSize = "s" | "m" | "l" | "xl";
|
|
262
557
|
|
|
263
558
|
/** Use `Avatar` to visually represent a user. */
|
|
264
|
-
declare const Avatar: React__default.
|
|
559
|
+
declare const Avatar: ({ img, initials, href, title, ariaLabel, onClick, size, ...props }: AvatarProps) => React__default.JSX.Element;
|
|
265
560
|
interface AvatarProps {
|
|
561
|
+
/**
|
|
562
|
+
* Initials to display in the avatar (up to 3 characters).
|
|
563
|
+
*/
|
|
266
564
|
initials?: string;
|
|
565
|
+
/**
|
|
566
|
+
* URL to link to when the avatar is clicked.
|
|
567
|
+
*/
|
|
267
568
|
href?: string;
|
|
569
|
+
/**
|
|
570
|
+
* Title attribute for the avatar link.
|
|
571
|
+
*/
|
|
268
572
|
title?: string;
|
|
573
|
+
/**
|
|
574
|
+
* Accessible label for the avatar.
|
|
575
|
+
*/
|
|
269
576
|
ariaLabel?: string;
|
|
577
|
+
/**
|
|
578
|
+
* Click handler for the avatar link.
|
|
579
|
+
*/
|
|
270
580
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
581
|
+
/**
|
|
582
|
+
* Image to display in the avatar.
|
|
583
|
+
*/
|
|
271
584
|
img?: AvatarImage;
|
|
585
|
+
/**
|
|
586
|
+
* Size of the avatar.
|
|
587
|
+
*/
|
|
272
588
|
size?: AvatarSize;
|
|
273
589
|
}
|
|
274
590
|
|
|
275
591
|
type GroupAvatar = Omit<AvatarProps, "size" | "title" | "href" | "onClick" | "ariaLabel">;
|
|
276
592
|
|
|
277
593
|
/** Use `AvatarGroup` to visually represent a group of users. */
|
|
278
|
-
declare const AvatarGroup: React__default.
|
|
594
|
+
declare const AvatarGroup: ({ title, ariaLabel, href, avatars, onClick, max, size, ...props }: AvatarGroupProps) => React__default.JSX.Element;
|
|
279
595
|
interface AvatarGroupProps {
|
|
596
|
+
/**
|
|
597
|
+
* Array of avatars to display in the group.
|
|
598
|
+
*/
|
|
280
599
|
avatars: GroupAvatar[];
|
|
600
|
+
/**
|
|
601
|
+
* Size of the avatars in the group.
|
|
602
|
+
*/
|
|
281
603
|
size?: AvatarSize;
|
|
604
|
+
/**
|
|
605
|
+
* Maximum number of avatars to display before showing a count.
|
|
606
|
+
*/
|
|
282
607
|
max?: number;
|
|
608
|
+
/**
|
|
609
|
+
* Title attribute for the avatar group link.
|
|
610
|
+
*/
|
|
283
611
|
title?: string;
|
|
612
|
+
/**
|
|
613
|
+
* Accessible label for the avatar group.
|
|
614
|
+
*/
|
|
284
615
|
ariaLabel?: string;
|
|
616
|
+
/**
|
|
617
|
+
* URL to link to when the avatar group is clicked.
|
|
618
|
+
*/
|
|
285
619
|
href?: string;
|
|
620
|
+
/**
|
|
621
|
+
* Click handler for the avatar group link.
|
|
622
|
+
*/
|
|
286
623
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
287
624
|
}
|
|
288
625
|
|
|
289
626
|
/** Use `Badge` as a static, non-interactive way to provide short updates. */
|
|
290
|
-
declare const Badge:
|
|
627
|
+
declare const Badge: ({ children, state, ariaLabel, ariaRole, ...props }: BadgeProps) => React__default.JSX.Element;
|
|
291
628
|
interface BadgeProps {
|
|
292
629
|
/**
|
|
293
630
|
* Text to display within Badge
|
|
@@ -310,7 +647,7 @@ interface BadgeProps {
|
|
|
310
647
|
/**
|
|
311
648
|
* Use `Heading` to display heading text.
|
|
312
649
|
*/
|
|
313
|
-
declare const Heading:
|
|
650
|
+
declare const Heading: ({ align, casing, color, children, level, isInline, fontStyle, isResponsive, isWordWrap, size, id, ...props }: HeadingProps) => React__default.JSX.Element;
|
|
314
651
|
type HeadingCasing = "auto" | "none";
|
|
315
652
|
type HeadingColor = "auto" | "brand";
|
|
316
653
|
type HeadingLevel = SemanticHeadingLevel;
|
|
@@ -364,18 +701,32 @@ interface HeadingProps {
|
|
|
364
701
|
}
|
|
365
702
|
|
|
366
703
|
interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad" | "fit" | "anchor" | "fetchPriority"> {
|
|
704
|
+
/**
|
|
705
|
+
* Whether the image should be hidden from screen readers.
|
|
706
|
+
*/
|
|
367
707
|
ariaHidden?: boolean;
|
|
708
|
+
/**
|
|
709
|
+
* Array of source elements for responsive images.
|
|
710
|
+
*/
|
|
368
711
|
sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
|
|
369
712
|
}
|
|
370
713
|
|
|
371
714
|
/** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
|
|
372
|
-
declare const TemplateBanner: React__default.
|
|
715
|
+
declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
|
|
373
716
|
type TemplateBannerStyle = "light" | "dark" | "contained";
|
|
374
717
|
type TemplateBannerAlignment = "top" | "bottom" | "center";
|
|
375
718
|
interface TemplateBannerImage extends BannerImageProps {
|
|
376
719
|
alignment?: TemplateBannerAlignment;
|
|
377
720
|
}
|
|
378
721
|
type ContentRatio = "2/3" | "1/1" | "1/0";
|
|
722
|
+
interface contentRatiosProps {
|
|
723
|
+
xs?: ContentRatio;
|
|
724
|
+
s?: ContentRatio;
|
|
725
|
+
m?: ContentRatio;
|
|
726
|
+
l?: ContentRatio;
|
|
727
|
+
xl?: ContentRatio;
|
|
728
|
+
xxl?: ContentRatio;
|
|
729
|
+
}
|
|
379
730
|
interface TemplateBannerProps {
|
|
380
731
|
/**
|
|
381
732
|
* Align content for TemplateBanner
|
|
@@ -444,6 +795,10 @@ interface TemplateBannerProps {
|
|
|
444
795
|
* Defines the ratio of the content area within the banner layout.
|
|
445
796
|
*/
|
|
446
797
|
contentRatio?: ContentRatio;
|
|
798
|
+
/**
|
|
799
|
+
* Sets the ratio of the content area within the banner layout at each breakpoint (xs, s, m, l, xl, xxl). inherits from smaller breakpoints
|
|
800
|
+
*/
|
|
801
|
+
contentRatios?: contentRatiosProps;
|
|
447
802
|
/**
|
|
448
803
|
* Add Additional top margin to banner
|
|
449
804
|
*/
|
|
@@ -460,10 +815,14 @@ interface TemplateBannerProps {
|
|
|
460
815
|
* Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
|
|
461
816
|
*/
|
|
462
817
|
fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended";
|
|
818
|
+
/**
|
|
819
|
+
* Whether long words in heading should be wrapped.
|
|
820
|
+
*/
|
|
821
|
+
headingWordWrap?: boolean;
|
|
463
822
|
}
|
|
464
823
|
|
|
465
824
|
/** Use `Banner` to promote key content or products with bold visuals and messaging. */
|
|
466
|
-
declare const Banner:
|
|
825
|
+
declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
|
|
467
826
|
type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
|
|
468
827
|
|
|
469
828
|
type SurfaceBackground = "light" | "dark";
|
|
@@ -473,7 +832,7 @@ declare const Context$1: React__default.Context<{
|
|
|
473
832
|
/**
|
|
474
833
|
* Use `Surface` to compose content using the Arc system.
|
|
475
834
|
*/
|
|
476
|
-
declare const Surface:
|
|
835
|
+
declare const Surface: ({ background, children, growVertically, padding, paddingHorizontal, paddingVertical, isTransparent, ...props }: SurfaceProps) => React__default.JSX.Element;
|
|
477
836
|
declare const backgrounds: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
|
|
478
837
|
declare const backgroundsBT: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
|
|
479
838
|
type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
|
|
@@ -521,12 +880,12 @@ interface SurfaceProps extends HTMLAttributes<HTMLElement> {
|
|
|
521
880
|
/**
|
|
522
881
|
* Use `Box` as a simple way to group bespoke content and interactive elements together.
|
|
523
882
|
*/
|
|
524
|
-
declare const Box:
|
|
883
|
+
declare const Box: ({ children, borderWidth, elevationLevel, padding, isFullHeight, isBorderRadius, surface, isSurfaceTransparent, ...props }: BoxProps) => React__default.JSX.Element;
|
|
525
884
|
interface BoxProps {
|
|
526
885
|
/**
|
|
527
886
|
* Contents of the Box.
|
|
528
887
|
*/
|
|
529
|
-
children:
|
|
888
|
+
children: ReactNode;
|
|
530
889
|
/**
|
|
531
890
|
* Set Box to fill parent element.
|
|
532
891
|
*/
|
|
@@ -560,7 +919,7 @@ interface BoxProps {
|
|
|
560
919
|
/**
|
|
561
920
|
* Use `BrandLogo` to display the brand logo.
|
|
562
921
|
*/
|
|
563
|
-
declare const BrandLogo:
|
|
922
|
+
declare const BrandLogo: ({ color, label, size, subBrand, ...props }: BrandLogoProps) => React__default.JSX.Element;
|
|
564
923
|
declare const colors$1: readonly ["auto", "brand"];
|
|
565
924
|
declare const subBrands$1: readonly ["redcare", "wholesale", "ee"];
|
|
566
925
|
interface BrandLogoProps {
|
|
@@ -583,7 +942,7 @@ interface BrandLogoProps {
|
|
|
583
942
|
}
|
|
584
943
|
|
|
585
944
|
/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `BreadcrumbsItem` */
|
|
586
|
-
declare const Breadcrumbs:
|
|
945
|
+
declare const Breadcrumbs: ({ isLight, children, ...props }: BreadcrumbsProps) => React__default.JSX.Element;
|
|
587
946
|
interface BreadcrumbsProps {
|
|
588
947
|
/**
|
|
589
948
|
* Contents of the Breadcrumbs Should only contain `Breadcrumb.Item`.
|
|
@@ -595,8 +954,8 @@ interface BreadcrumbsProps {
|
|
|
595
954
|
isLight?: boolean;
|
|
596
955
|
}
|
|
597
956
|
|
|
598
|
-
declare const BreadcrumbsItem:
|
|
599
|
-
interface
|
|
957
|
+
declare const BreadcrumbsItem: ({ spacerIconAfter, spacerIconBefore, children, }: BreadcrumbsItemProps) => React__default.JSX.Element;
|
|
958
|
+
interface BreadcrumbsItemProps {
|
|
600
959
|
/**
|
|
601
960
|
* Render child elements within `BreadcrumbsItem`
|
|
602
961
|
*/
|
|
@@ -611,8 +970,12 @@ interface ItemProps$1 {
|
|
|
611
970
|
spacerIconBefore?: boolean;
|
|
612
971
|
}
|
|
613
972
|
|
|
614
|
-
declare const BreadcrumbsLink:
|
|
615
|
-
interface
|
|
973
|
+
declare const BreadcrumbsLink: ({ onClick, href, isActive, children, ref, ...props }: BreadcrumbsLinkProps) => React__default.JSX.Element;
|
|
974
|
+
interface BreadcrumbsLinkProps {
|
|
975
|
+
/**
|
|
976
|
+
* Ref to the underlying anchor element.
|
|
977
|
+
*/
|
|
978
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
616
979
|
/**
|
|
617
980
|
* Render children of `breadcrumbs.link`
|
|
618
981
|
*/
|
|
@@ -629,10 +992,6 @@ interface LinkProps {
|
|
|
629
992
|
* Highlights item in breadcrumb (This also removes the a tag and any links)
|
|
630
993
|
*/
|
|
631
994
|
isActive?: boolean;
|
|
632
|
-
/**
|
|
633
|
-
* Ref to `<a>` tag
|
|
634
|
-
*/
|
|
635
|
-
ref?: React__default.Ref<HTMLAnchorElement>;
|
|
636
995
|
/**
|
|
637
996
|
* React router property
|
|
638
997
|
*/
|
|
@@ -640,11 +999,11 @@ interface LinkProps {
|
|
|
640
999
|
}
|
|
641
1000
|
|
|
642
1001
|
type ElementUnion$2 = HTMLButtonElement | HTMLAnchorElement;
|
|
643
|
-
type
|
|
1002
|
+
type ButtonRef$2 = React__default.Ref<ElementUnion$2> | null;
|
|
644
1003
|
/**
|
|
645
1004
|
* Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
|
|
646
1005
|
*/
|
|
647
|
-
declare const Button:
|
|
1006
|
+
declare const Button: ({ ariaLabel, ariaControls, ariaExpanded, ariaHasPopup, fill, href, icon, iconPosition, id, isDisabled, isDisplayBlock, isFullWidth, label, onClick, rel, size, supportingText, target, type, form, ref, ...props }: ButtonProps) => React__default.JSX.Element;
|
|
648
1007
|
interface ButtonElementProps {
|
|
649
1008
|
/**
|
|
650
1009
|
* Default behavior of the Button element. If not provided, 'submit' will
|
|
@@ -716,7 +1075,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps$2 {
|
|
|
716
1075
|
/**
|
|
717
1076
|
* Optional property to provide component Ref
|
|
718
1077
|
*/
|
|
719
|
-
ref?:
|
|
1078
|
+
ref?: ButtonRef$2;
|
|
720
1079
|
/**
|
|
721
1080
|
* How should a Button icon be displayed?
|
|
722
1081
|
*/
|
|
@@ -743,7 +1102,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps$2 {
|
|
|
743
1102
|
* Use `ButtonGroup` to group multiple buttons together, ensuring consistent sizing, spacing,
|
|
744
1103
|
* and alignment. Only accepts `Button` or `ButtonV2` components as children.
|
|
745
1104
|
*/
|
|
746
|
-
declare const ButtonGroup:
|
|
1105
|
+
declare const ButtonGroup: ({ children, size, align, orientation, gap, ariaLabel, isFullWidth, ...props }: ButtonGroupProps) => React__default.JSX.Element;
|
|
747
1106
|
interface ButtonGroupProps {
|
|
748
1107
|
/**
|
|
749
1108
|
* Components to appear within the ButtonGroup
|
|
@@ -777,11 +1136,11 @@ interface ButtonGroupProps {
|
|
|
777
1136
|
}
|
|
778
1137
|
|
|
779
1138
|
type ElementUnion$1 = HTMLButtonElement | HTMLAnchorElement;
|
|
780
|
-
type
|
|
1139
|
+
type ButtonRef$1 = React__default.Ref<ElementUnion$1> | null;
|
|
781
1140
|
/**
|
|
782
1141
|
* Use `ButtonV2` for our most up to date Call To Action button, offering Primary, Secondary, Tertiary, Compact and Error states.
|
|
783
1142
|
*/
|
|
784
|
-
declare const ButtonV2:
|
|
1143
|
+
declare const ButtonV2: ({ label, buttonStyle, icon, iconActive, iconPosition, size, ariaLabel, ariaControls, ariaExpanded, ariaHasPopup, isFullWidth, isLoading, isSpan, onClick, href, id, rel, target, type, form, ref, ...props }: ButtonV2Props) => React__default.JSX.Element;
|
|
785
1144
|
interface LinkElementProps$1 {
|
|
786
1145
|
/**
|
|
787
1146
|
* URL to link to if `ButtonV2` elementType is 'a'.
|
|
@@ -837,7 +1196,7 @@ interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps$1 {
|
|
|
837
1196
|
/**
|
|
838
1197
|
* Optional property to provide component Ref
|
|
839
1198
|
*/
|
|
840
|
-
ref?:
|
|
1199
|
+
ref?: ButtonRef$1;
|
|
841
1200
|
/**
|
|
842
1201
|
* Should the `ButtonV2` take up the full width of its container?
|
|
843
1202
|
*/
|
|
@@ -893,7 +1252,7 @@ type SelectionType = "single" | "range";
|
|
|
893
1252
|
type CalendarType = "month" | "year" | "double";
|
|
894
1253
|
|
|
895
1254
|
/** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
|
|
896
|
-
declare const Calendar:
|
|
1255
|
+
declare const Calendar: ({ type, selectionType, autoFocusOnMount, selectedRange: rawSelectedRange, selectedDate: rawSelectedDate, disabledDates: rawDisabledDates, minDate: rawMinDate, maxDate: rawMaxDate, onCancelClick, onDateSelect, onRangeSelect, uncontained, ...props }: CalendarProps) => React__default.JSX.Element;
|
|
897
1256
|
interface CalendarProps {
|
|
898
1257
|
/**
|
|
899
1258
|
* Select single date or range
|
|
@@ -939,6 +1298,9 @@ interface CalendarProps {
|
|
|
939
1298
|
* Focus will be set on the selected day when the component mounts, defaults to false.
|
|
940
1299
|
*/
|
|
941
1300
|
autoFocusOnMount?: boolean;
|
|
1301
|
+
/**
|
|
1302
|
+
* Whether the calendar should be uncontained
|
|
1303
|
+
*/
|
|
942
1304
|
uncontained?: boolean;
|
|
943
1305
|
}
|
|
944
1306
|
|
|
@@ -952,8 +1314,16 @@ interface SlideConfig {
|
|
|
952
1314
|
|
|
953
1315
|
type Responsive = Partial<Record<BreakPoints, SlideConfig>>;
|
|
954
1316
|
|
|
955
|
-
declare const Carousel: React__default.
|
|
1317
|
+
declare const Carousel: ({ children, responsive, itemsToScroll, itemsPerSlide, controlsPosition, behavior, overflow, withGutter, loop, isPartialVisible, autoplay, isPlaying, fade, }: CarouselProps) => React__default.JSX.Element;
|
|
956
1318
|
interface CarouselProps {
|
|
1319
|
+
/**
|
|
1320
|
+
* Items for the carousel.
|
|
1321
|
+
*/
|
|
1322
|
+
children: ReactNode;
|
|
1323
|
+
/**
|
|
1324
|
+
* Position of the left and right arrows
|
|
1325
|
+
*/
|
|
1326
|
+
controlsPosition?: "bottom" | "middle";
|
|
957
1327
|
/**
|
|
958
1328
|
* Adds a gap between the slides.
|
|
959
1329
|
*/
|
|
@@ -1008,23 +1378,27 @@ interface CarouselProps {
|
|
|
1008
1378
|
stopOnLastSnap?: boolean;
|
|
1009
1379
|
};
|
|
1010
1380
|
/**
|
|
1011
|
-
* Use isPlaying to control the state of autoplay
|
|
1381
|
+
* Use isPlaying to control the state of autoplay.
|
|
1012
1382
|
*/
|
|
1013
1383
|
isPlaying?: boolean;
|
|
1014
1384
|
/**
|
|
1015
|
-
* Enable fade transition between slides
|
|
1385
|
+
* Enable fade transition between slides.
|
|
1016
1386
|
*/
|
|
1017
1387
|
fade?: boolean;
|
|
1018
1388
|
/**
|
|
1019
|
-
*
|
|
1389
|
+
* Carousel behavior mode. "default" uses itemsPerSlide to control visible cards. "adaptive" maintains fixed card widths and shows more cards as screen size increases, ignoring itemsPerSlide and isPartialVisible.
|
|
1020
1390
|
*/
|
|
1021
|
-
|
|
1391
|
+
behavior?: "default" | "adaptive";
|
|
1392
|
+
/**
|
|
1393
|
+
* Controls the overflow behavior of the carousel container. "hidden" clips content outside the viewport, "visible" allows content to overflow.
|
|
1394
|
+
*/
|
|
1395
|
+
overflow?: "hidden" | "visible";
|
|
1022
1396
|
}
|
|
1023
1397
|
|
|
1024
1398
|
/**
|
|
1025
1399
|
* Use `Checkbox` to allow users to select individual options.
|
|
1026
1400
|
*/
|
|
1027
|
-
declare const Checkbox:
|
|
1401
|
+
declare const Checkbox: ({ checked, errorMessage, helper, id, isDisabled, isRequired, label, hideLabel, name, onBlur, onChange, size, value, checkboxAlignment, indeterminate, isError, isErrorAlert, ref, ...props }: CheckboxProps) => React__default.JSX.Element;
|
|
1028
1402
|
type CheckedProps$1 = {
|
|
1029
1403
|
/**
|
|
1030
1404
|
* Is the input checked?
|
|
@@ -1040,6 +1414,10 @@ type CheckedProps$1 = {
|
|
|
1040
1414
|
indeterminate?: boolean;
|
|
1041
1415
|
};
|
|
1042
1416
|
interface CheckboxProps extends Omit<CheckedProps$1, "defaultChecked"> {
|
|
1417
|
+
/**
|
|
1418
|
+
* Optional property to provide component Ref
|
|
1419
|
+
*/
|
|
1420
|
+
ref?: Ref<HTMLInputElement>;
|
|
1043
1421
|
/**
|
|
1044
1422
|
* Error message for the Checkbox.
|
|
1045
1423
|
*/
|
|
@@ -1104,7 +1482,7 @@ interface CheckboxProps extends Omit<CheckedProps$1, "defaultChecked"> {
|
|
|
1104
1482
|
}
|
|
1105
1483
|
|
|
1106
1484
|
/** Use `CheckboxIcon` to display a visual checkbox indicator that reflects a checked, unchecked, or indeterminate state. */
|
|
1107
|
-
declare const CheckboxIcon: React__default.
|
|
1485
|
+
declare const CheckboxIcon: ({ id, name, checked, indeterminate, isDisabled, isRequired, size, value, error, ariaDescribedBy, onBlur, onChange, ref, ...props }: CheckboxIconProps) => React__default.JSX.Element;
|
|
1108
1486
|
type CheckedProps = {
|
|
1109
1487
|
/**
|
|
1110
1488
|
* Is the input checked?
|
|
@@ -1120,6 +1498,10 @@ type CheckedProps = {
|
|
|
1120
1498
|
indeterminate?: boolean;
|
|
1121
1499
|
};
|
|
1122
1500
|
interface CheckboxIconProps extends Omit<CheckedProps, "defaultChecked"> {
|
|
1501
|
+
/**
|
|
1502
|
+
* Ref to the underlying input element.
|
|
1503
|
+
*/
|
|
1504
|
+
ref?: Ref<HTMLInputElement>;
|
|
1123
1505
|
/**
|
|
1124
1506
|
* Error state for the Checkbox.
|
|
1125
1507
|
*/
|
|
@@ -1173,8 +1555,8 @@ interface ExtentableContainer {
|
|
|
1173
1555
|
/**
|
|
1174
1556
|
* Use `Columns` to compose layouts on a 12-column grid. Place within `Section` components to align with any sibling `Grid` components.
|
|
1175
1557
|
*/
|
|
1176
|
-
declare const Columns:
|
|
1177
|
-
declare const ColumnsCol:
|
|
1558
|
+
declare const Columns: ({ children, isGutterless, isExtended, ...props }: ColumnsProps) => React__default.JSX.Element;
|
|
1559
|
+
declare const ColumnsCol: ({ align, children, isDebugVisible, offset, offsetS, offsetM, offsetL, offsetXL, span, spanS, spanM, spanL, spanXL, ...props }: ColumnsColProps) => React__default.JSX.Element;
|
|
1178
1560
|
type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
1179
1561
|
type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
|
|
1180
1562
|
interface ColumnsColProps {
|
|
@@ -1243,6 +1625,8 @@ interface ColumnsProps extends ExtentableContainer {
|
|
|
1243
1625
|
isGutterless?: boolean;
|
|
1244
1626
|
}
|
|
1245
1627
|
|
|
1628
|
+
type ArcIcon = string;
|
|
1629
|
+
|
|
1246
1630
|
type RequirementStatus = "required" | "optional" | "not-applicable";
|
|
1247
1631
|
declare const Context: React__default.Context<{
|
|
1248
1632
|
requirementStatus: RequirementStatus | null;
|
|
@@ -1250,7 +1634,7 @@ declare const Context: React__default.Context<{
|
|
|
1250
1634
|
/**
|
|
1251
1635
|
* Use `FormControl` to provide inputs with labels, helper text and error messages
|
|
1252
1636
|
*/
|
|
1253
|
-
declare const FormControl:
|
|
1637
|
+
declare const FormControl: ({ children, elementType: ElementType, errorMessage, helper, htmlFor, supplementaryInfo, id, label, labelSize, labelPosition, requirementStatus, helperUnderLabel, isDisabled, hideLabel, disclosureTitle, disclosureText, onClickDisclosure, isErrorAlert, ...props }: FormControlProps) => React__default.JSX.Element;
|
|
1254
1638
|
interface FormControlProps {
|
|
1255
1639
|
/**
|
|
1256
1640
|
* Render the input or series of inputs
|
|
@@ -1329,24 +1713,117 @@ interface FormControlProps {
|
|
|
1329
1713
|
isErrorAlert?: boolean;
|
|
1330
1714
|
}
|
|
1331
1715
|
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1716
|
+
type FocusHandler = (e: React.FocusEvent<HTMLInputElement, Element>) => void;
|
|
1717
|
+
|
|
1718
|
+
type InputSize = "s" | "m" | "l";
|
|
1719
|
+
|
|
1720
|
+
/** Use `ComboBox` to assist a text input with a dropdown list of options. */
|
|
1721
|
+
declare const ComboBox: ({ ref, name, onBlur, onFocus, label, helper, id, hideLabel, isFluid, errorMessage, disclosureTitle, disclosureText, onClickDisclosure, listBoxAriaLabel, prefixIcon, onChange, noResultsSupportingCopy, customOptionSupportingCopy, multiSelectLimit, options: initialOptions, clearButtonTooltip, defaultSelectedValues, defaultValue, size, visibleTagCount, isClearButtonEnabled, isReadOnly, isMultiSelectable, isDisabled, isRequired, isAutocomplete, isCustomEntryAllowed, ...props }: ComboBoxProps) => React__default.JSX.Element;
|
|
1722
|
+
interface ComboBoxProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition" | "labelSize"> {
|
|
1723
|
+
/**
|
|
1724
|
+
* Ref to the underlying input element.
|
|
1725
|
+
*/
|
|
1726
|
+
ref?: Ref<HTMLInputElement>;
|
|
1727
|
+
/**
|
|
1728
|
+
* Aria label for the results list.
|
|
1729
|
+
*/
|
|
1335
1730
|
listBoxAriaLabel: string;
|
|
1731
|
+
/**
|
|
1732
|
+
* Size of the `ComboBox` input.
|
|
1733
|
+
*/
|
|
1734
|
+
size?: InputSize;
|
|
1735
|
+
/**
|
|
1736
|
+
* Options for the `ComboBox`.
|
|
1737
|
+
*/
|
|
1336
1738
|
options: string[];
|
|
1739
|
+
/**
|
|
1740
|
+
* Icon to appear before the input of the `ComboBox`.
|
|
1741
|
+
*/
|
|
1742
|
+
prefixIcon?: ArcIcon;
|
|
1743
|
+
/**
|
|
1744
|
+
* Input name for the `ComboBox`.
|
|
1745
|
+
*/
|
|
1337
1746
|
name?: string;
|
|
1747
|
+
/**
|
|
1748
|
+
* Makes the `ComboBox` a required field.
|
|
1749
|
+
*/
|
|
1338
1750
|
isRequired?: boolean;
|
|
1751
|
+
/**
|
|
1752
|
+
* Default value for the `ComboBox`.
|
|
1753
|
+
*/
|
|
1339
1754
|
defaultValue?: string;
|
|
1340
|
-
|
|
1341
|
-
|
|
1755
|
+
/**
|
|
1756
|
+
* Default selected values for the `ComboBox`. Only applied if `isMultiSelectable` is true.
|
|
1757
|
+
*/
|
|
1758
|
+
defaultSelectedValues?: string[];
|
|
1759
|
+
/**
|
|
1760
|
+
* Blur event handler for the `ComboBox`.
|
|
1761
|
+
*/
|
|
1762
|
+
onBlur?: FocusHandler;
|
|
1763
|
+
/**
|
|
1764
|
+
* Focus event handler for the `ComboBox`.
|
|
1765
|
+
*/
|
|
1766
|
+
onFocus?: FocusHandler;
|
|
1767
|
+
/**
|
|
1768
|
+
* Callback function used to update the `ComboBox`
|
|
1769
|
+
* value, for example `e => setValue(e.target.value)`.
|
|
1770
|
+
*/
|
|
1771
|
+
onChange?: (selectedValue: string | string[] | null) => void;
|
|
1772
|
+
/**
|
|
1773
|
+
* Allows multiple items to be selected if true.
|
|
1774
|
+
*/
|
|
1342
1775
|
isMultiSelectable?: boolean;
|
|
1776
|
+
/**
|
|
1777
|
+
* Allows a limit to the number of options you can select on multi select.
|
|
1778
|
+
* If the limit is reached, no more selections will be permitted.
|
|
1779
|
+
*/
|
|
1780
|
+
multiSelectLimit?: number;
|
|
1781
|
+
/**
|
|
1782
|
+
* Filters results when typing if true.
|
|
1783
|
+
*/
|
|
1343
1784
|
isAutocomplete?: boolean;
|
|
1785
|
+
/**
|
|
1786
|
+
* Makes the `ComboBox` readonly.
|
|
1787
|
+
*/
|
|
1344
1788
|
isReadOnly?: boolean;
|
|
1789
|
+
/**
|
|
1790
|
+
* Current value of the TextInput.
|
|
1791
|
+
*/
|
|
1792
|
+
value?: string;
|
|
1793
|
+
/**
|
|
1794
|
+
* Sets the `ComboBox` to 100% width.
|
|
1795
|
+
*/
|
|
1345
1796
|
isFluid?: boolean;
|
|
1797
|
+
/**
|
|
1798
|
+
* Allows the user to enter a custom value in the `ComboBox` that isn't one of the provided options.
|
|
1799
|
+
*/
|
|
1800
|
+
isCustomEntryAllowed?: boolean;
|
|
1801
|
+
/**
|
|
1802
|
+
* Allows a limit to the number of tags visible on multi select.
|
|
1803
|
+
* When the limit is reached, a link to reveal the hidden tags will show.
|
|
1804
|
+
* If ommitted there is no limit.
|
|
1805
|
+
*/
|
|
1806
|
+
visibleTagCount?: number;
|
|
1807
|
+
/**
|
|
1808
|
+
* Supporting copy for when no results show.
|
|
1809
|
+
*/
|
|
1810
|
+
noResultsSupportingCopy?: string;
|
|
1811
|
+
/**
|
|
1812
|
+
* Supporting copy for the custom option on multi select.
|
|
1813
|
+
*/
|
|
1814
|
+
customOptionSupportingCopy?: string;
|
|
1815
|
+
/**
|
|
1816
|
+
* Enables a button that clears the input to show when it has a value.
|
|
1817
|
+
*/
|
|
1818
|
+
isClearButtonEnabled?: boolean;
|
|
1819
|
+
/**
|
|
1820
|
+
* Text for the clear input button and tooltip. This is also used for screen readers.
|
|
1821
|
+
*/
|
|
1822
|
+
clearButtonTooltip?: string;
|
|
1346
1823
|
}
|
|
1347
1824
|
|
|
1348
1825
|
/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
|
|
1349
|
-
declare const ContentSwitcher:
|
|
1826
|
+
declare const ContentSwitcher: ({ children, defaultValue, onValueChange, activationMode, value, ...props }: ContentSwitcherProps) => React__default.JSX.Element;
|
|
1350
1827
|
interface ContentSwitcherProps {
|
|
1351
1828
|
/**
|
|
1352
1829
|
* Render children
|
|
@@ -1370,8 +1847,12 @@ interface ContentSwitcherProps {
|
|
|
1370
1847
|
value?: string;
|
|
1371
1848
|
}
|
|
1372
1849
|
|
|
1373
|
-
declare const ContentSwitcherTab:
|
|
1850
|
+
declare const ContentSwitcherTab: ({ label, value, onClick, onFocus, ref, ...props }: ContentSwitcherTabProps) => React__default.JSX.Element;
|
|
1374
1851
|
interface ContentSwitcherTabProps {
|
|
1852
|
+
/**
|
|
1853
|
+
* Ref to the underlying button element.
|
|
1854
|
+
*/
|
|
1855
|
+
ref?: Ref<HTMLButtonElement>;
|
|
1375
1856
|
/**
|
|
1376
1857
|
* Label to display on the ContentSwitcherTab
|
|
1377
1858
|
*/
|
|
@@ -1390,7 +1871,7 @@ interface ContentSwitcherTabProps {
|
|
|
1390
1871
|
onFocus?: () => void;
|
|
1391
1872
|
}
|
|
1392
1873
|
|
|
1393
|
-
declare const ContentSwitcherContent:
|
|
1874
|
+
declare const ContentSwitcherContent: ({ children, value, hidden, forceMount, ...props }: ContentSwitcherContentProps) => React__default.JSX.Element;
|
|
1394
1875
|
interface ContentSwitcherContentProps {
|
|
1395
1876
|
/**
|
|
1396
1877
|
* Content to display
|
|
@@ -1410,7 +1891,7 @@ interface ContentSwitcherContentProps {
|
|
|
1410
1891
|
forceMount?: boolean;
|
|
1411
1892
|
}
|
|
1412
1893
|
|
|
1413
|
-
declare const ContentSwitcherList:
|
|
1894
|
+
declare const ContentSwitcherList: ({ children, type, isJustified, ariaLabel, isInset, ...props }: ContentSwitcherListProps) => React__default.JSX.Element;
|
|
1414
1895
|
interface ContentSwitcherListProps {
|
|
1415
1896
|
/**
|
|
1416
1897
|
* Contents of the `ContentSwitcherList` Should contain `Tab`
|
|
@@ -1437,8 +1918,8 @@ interface ContentSwitcherListProps {
|
|
|
1437
1918
|
/**
|
|
1438
1919
|
* Use `ContentSwitcherDropdown` tab control used to toggle between related views or content sections, without navigating away from the current page.
|
|
1439
1920
|
*/
|
|
1440
|
-
declare const ContentSwitcherDropdown:
|
|
1441
|
-
declare const ContentSwitcherDropdownContent:
|
|
1921
|
+
declare const ContentSwitcherDropdown: ({ defaultValue, tabs, onValueChange, children, isInset, value, ariaLabel, isFluid, width, ...props }: ContentSwitcherDropdownProps) => React__default.JSX.Element;
|
|
1922
|
+
declare const ContentSwitcherDropdownContent: ({ children, }: ContentSwitcherDropdownContentProps) => React__default.JSX.Element;
|
|
1442
1923
|
interface ContentSwitcherDropdownContentProps {
|
|
1443
1924
|
/**
|
|
1444
1925
|
* Content to display
|
|
@@ -1520,77 +2001,16 @@ declare const DATE_FORMAT = "dd/MM/yyyy";
|
|
|
1520
2001
|
|
|
1521
2002
|
type AutoCompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "email" | "impp" | "url" | "photo" | "organization-unit";
|
|
1522
2003
|
|
|
1523
|
-
/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
|
|
1524
|
-
declare const Tooltip: FC<TooltipProps>;
|
|
1525
|
-
interface TooltipProps {
|
|
1526
|
-
/**
|
|
1527
|
-
* Content to render within Tooltip
|
|
1528
|
-
*/
|
|
1529
|
-
children?: React__default.ReactNode;
|
|
1530
|
-
/**
|
|
1531
|
-
* The preferred side of the anchor to render against when open
|
|
1532
|
-
*/
|
|
1533
|
-
side?: "left" | "right" | "bottom" | "top";
|
|
1534
|
-
/**
|
|
1535
|
-
* The distance in pixels from the anchor
|
|
1536
|
-
*/
|
|
1537
|
-
sideOffset?: 8 | 16 | 32;
|
|
1538
|
-
/**
|
|
1539
|
-
* The preferred alignment against the anchor. May change when collisions occur.
|
|
1540
|
-
*/
|
|
1541
|
-
align?: "start" | "center" | "end";
|
|
1542
|
-
/**
|
|
1543
|
-
* Alignment for content within the tooltip
|
|
1544
|
-
*/
|
|
1545
|
-
alignContent?: "start" | "center" | "end";
|
|
1546
|
-
/**
|
|
1547
|
-
* Aria label for accessibility
|
|
1548
|
-
*/
|
|
1549
|
-
ariaLabel?: string;
|
|
1550
|
-
/**
|
|
1551
|
-
* The main title text displayed within the tooltip.
|
|
1552
|
-
*/
|
|
1553
|
-
title: string;
|
|
1554
|
-
/**
|
|
1555
|
-
* Additional supporting text displayed below the title, if provided.
|
|
1556
|
-
*/
|
|
1557
|
-
supportingCopy?: string;
|
|
1558
|
-
/**
|
|
1559
|
-
* Icon displayed next to the tooltip title or content.
|
|
1560
|
-
*/
|
|
1561
|
-
icon?: string;
|
|
1562
|
-
/**
|
|
1563
|
-
* Delay in milliseconds before the tooltip appears.
|
|
1564
|
-
*/
|
|
1565
|
-
delayDuration?: number;
|
|
1566
|
-
/**
|
|
1567
|
-
* Maximum width for the tooltip container.
|
|
1568
|
-
*/
|
|
1569
|
-
maxWidth?: string;
|
|
1570
|
-
/**
|
|
1571
|
-
* The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
|
|
1572
|
-
*/
|
|
1573
|
-
open?: boolean;
|
|
1574
|
-
/**
|
|
1575
|
-
* Event handler called when the open state of the tooltip changes.
|
|
1576
|
-
*/
|
|
1577
|
-
onOpenChange?: (open: boolean) => void;
|
|
1578
|
-
/**
|
|
1579
|
-
* Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
|
|
1580
|
-
*/
|
|
1581
|
-
zIndex?: number;
|
|
1582
|
-
/**
|
|
1583
|
-
* Set to true if you want to use your own link or button for the trigger. If false it will wrap the children in a button.
|
|
1584
|
-
*/
|
|
1585
|
-
asChild?: boolean;
|
|
1586
|
-
}
|
|
1587
|
-
|
|
1588
2004
|
type EventType$4 = React__default.ChangeEvent<HTMLInputElement>;
|
|
1589
2005
|
/**
|
|
1590
2006
|
* Use `TextInput` to allow users to enter short form text.
|
|
1591
2007
|
*/
|
|
1592
|
-
declare const TextInput:
|
|
2008
|
+
declare const TextInput: (props: TextInputProps) => React__default.JSX.Element;
|
|
1593
2009
|
interface TextInputComponentProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition" | "labelSize"> {
|
|
2010
|
+
/**
|
|
2011
|
+
* Ref to the underlying input element.
|
|
2012
|
+
*/
|
|
2013
|
+
ref?: Ref<HTMLInputElement>;
|
|
1594
2014
|
/**
|
|
1595
2015
|
* Uncontrolled default value of the TextInput. If the TextInput is controlled
|
|
1596
2016
|
* via `value`/`onChange`, `defaultValue` will be ignored.
|
|
@@ -1707,10 +2127,6 @@ interface TextInputComponentProps extends Omit<FormControlProps, "children" | "e
|
|
|
1707
2127
|
* Sets autoComplete value for TextInput.
|
|
1708
2128
|
*/
|
|
1709
2129
|
autoComplete?: AutoCompleteTypes;
|
|
1710
|
-
/**
|
|
1711
|
-
* A reference to TextInput
|
|
1712
|
-
*/
|
|
1713
|
-
ref?: React__default.Ref<HTMLInputElement>;
|
|
1714
2130
|
}
|
|
1715
2131
|
type TextInputProps = Omit<TextInputComponentProps, "placeholder">;
|
|
1716
2132
|
type TextInputWithPlaceholderProps = TextInputComponentProps;
|
|
@@ -1718,28 +2134,50 @@ type TextInputWithPlaceholderProps = TextInputComponentProps;
|
|
|
1718
2134
|
/**
|
|
1719
2135
|
* Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
|
|
1720
2136
|
*/
|
|
1721
|
-
declare const DatePicker:
|
|
2137
|
+
declare const DatePicker: ({ errorMessage, helper, id, label, isDisabled, isReadOnly, isRequired, size, value, name, onBlur, onChange, onDateSelect, onRangeSelect, onClickDisclosure, disclosureTitle, disclosureText, type, isFluid, selectionType, disabledDates, minDate, maxDate, ref, ...props }: DatePickerProps) => React__default.JSX.Element;
|
|
1722
2138
|
interface DatePickerRangeSelection$1 extends RangeSelection {
|
|
1723
2139
|
formattedRange: string;
|
|
1724
2140
|
}
|
|
1725
2141
|
interface DatePickerProps extends Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "trailingInputIcon" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
|
|
2142
|
+
/**
|
|
2143
|
+
* Ref to the underlying input element.
|
|
2144
|
+
*/
|
|
2145
|
+
ref?: Ref<HTMLInputElement>;
|
|
2146
|
+
/**
|
|
2147
|
+
* Whether the DatePicker should take up the full width of its container.
|
|
2148
|
+
*/
|
|
1726
2149
|
isFluid?: boolean;
|
|
2150
|
+
/**
|
|
2151
|
+
* Callback when a single date is selected.
|
|
2152
|
+
*/
|
|
1727
2153
|
onDateSelect?: (value: {
|
|
1728
2154
|
date: Date;
|
|
1729
2155
|
formattedDate: string;
|
|
1730
2156
|
}) => void;
|
|
2157
|
+
/**
|
|
2158
|
+
* Callback when a date range is selected.
|
|
2159
|
+
*/
|
|
1731
2160
|
onRangeSelect?: (value: DatePickerRangeSelection$1) => void;
|
|
1732
2161
|
}
|
|
1733
2162
|
|
|
1734
|
-
declare const DatePickerRange: React__default.
|
|
2163
|
+
declare const DatePickerRange: ({ inputStart, inputEnd, type, minDate, maxDate, disabledDates, onRangeSelect, isFluid, }: DatePickerRangeProps) => React__default.JSX.Element;
|
|
1735
2164
|
interface DatePickerRangeSelection extends RangeSelection {
|
|
1736
2165
|
formattedStart: string;
|
|
1737
2166
|
formattedEnd: string;
|
|
1738
2167
|
}
|
|
1739
2168
|
type SharedInputProps = Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "trailingInputIcon" | "prefix" | "suffix" | "label"> & Partial<Pick<TextInputWithPlaceholderProps, "label">>;
|
|
1740
2169
|
interface DatePickerRangeProps extends Pick<CalendarProps, "type" | "minDate" | "maxDate" | "disabledDates"> {
|
|
2170
|
+
/**
|
|
2171
|
+
* Configuration for the start date input.
|
|
2172
|
+
*/
|
|
1741
2173
|
inputStart: SharedInputProps;
|
|
2174
|
+
/**
|
|
2175
|
+
* Configuration for the end date input.
|
|
2176
|
+
*/
|
|
1742
2177
|
inputEnd: SharedInputProps;
|
|
2178
|
+
/**
|
|
2179
|
+
* Callback when a date range is selected.
|
|
2180
|
+
*/
|
|
1743
2181
|
onRangeSelect?: (value: DatePickerRangeSelection) => void;
|
|
1744
2182
|
/**
|
|
1745
2183
|
* Enable to make the `DatePickerRange` fill its parent container
|
|
@@ -1750,7 +2188,7 @@ interface DatePickerRangeProps extends Pick<CalendarProps, "type" | "minDate" |
|
|
|
1750
2188
|
/**
|
|
1751
2189
|
* Use `Disclosure` to show and hide sections of content.
|
|
1752
2190
|
*/
|
|
1753
|
-
declare const Disclosure:
|
|
2191
|
+
declare const Disclosure: ({ children, headingLevel, indentDetails, isOpen, summary, ...props }: DisclosureProps) => React__default.JSX.Element;
|
|
1754
2192
|
interface DisclosureProps {
|
|
1755
2193
|
/**
|
|
1756
2194
|
* Content to display in the Disclosure.
|
|
@@ -1778,7 +2216,7 @@ interface DisclosureProps {
|
|
|
1778
2216
|
/**
|
|
1779
2217
|
* Use `DisclosureMini` to show and hide sections of content.
|
|
1780
2218
|
*/
|
|
1781
|
-
declare const DisclosureMini:
|
|
2219
|
+
declare const DisclosureMini: ({ children, summary, onClick, id, isOpen, iconPosition, size, ...props }: DisclosureMiniProps) => React__default.JSX.Element;
|
|
1782
2220
|
interface DisclosureMiniProps {
|
|
1783
2221
|
/**
|
|
1784
2222
|
* Content to display in the DisclosureMini.
|
|
@@ -1810,10 +2248,10 @@ interface DisclosureMiniProps {
|
|
|
1810
2248
|
size?: "s" | "l";
|
|
1811
2249
|
}
|
|
1812
2250
|
|
|
1813
|
-
declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
|
|
2251
|
+
declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
|
|
1814
2252
|
|
|
1815
2253
|
/** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
|
|
1816
|
-
declare const ThemeIcon:
|
|
2254
|
+
declare const ThemeIcon: ({ size, icon, color, ...props }: ThemeIconProps) => React__default.JSX.Element;
|
|
1817
2255
|
interface ThemeIconProps {
|
|
1818
2256
|
/**
|
|
1819
2257
|
* Size of the Icon, in pixels.
|
|
@@ -1831,7 +2269,7 @@ interface ThemeIconProps {
|
|
|
1831
2269
|
type ThemeIconNames = (typeof iconNames)[number];
|
|
1832
2270
|
|
|
1833
2271
|
/** Use `Download` to provide users with a file download action. */
|
|
1834
|
-
declare const Download: React__default.
|
|
2272
|
+
declare const Download: ({ name, onClick, description, href, type, size, icon, isCompact, isFullWidth, }: DownloadProps) => React__default.JSX.Element;
|
|
1835
2273
|
interface DownloadProps {
|
|
1836
2274
|
/**
|
|
1837
2275
|
* Name for `<Download />`
|
|
@@ -1871,7 +2309,7 @@ interface DownloadProps {
|
|
|
1871
2309
|
onClick?: (e: MouseEvent$1<HTMLAnchorElement>) => void;
|
|
1872
2310
|
}
|
|
1873
2311
|
|
|
1874
|
-
declare const Drawer: React__default.
|
|
2312
|
+
declare const Drawer: ({ isOpen, children, onRequestClose, noOverlay, shouldReturnFocus, size, height, width, position, draggable, snapPoints, snapBehaviour, dragDownToDismiss, onDragHandleClick, ariaDescription, ...props }: DrawerProps) => React__default.JSX.Element;
|
|
1875
2313
|
interface DrawerProps {
|
|
1876
2314
|
/**
|
|
1877
2315
|
* Show or hide page overlay.
|
|
@@ -1906,7 +2344,7 @@ interface DrawerProps {
|
|
|
1906
2344
|
/**
|
|
1907
2345
|
* Content to include with in the `Drawer` This should typically be `DrawerHeader`, `DrawerFooter` and `DrawerFooter`. This can also have custom content.
|
|
1908
2346
|
*/
|
|
1909
|
-
children?:
|
|
2347
|
+
children?: ReactNode;
|
|
1910
2348
|
/**
|
|
1911
2349
|
* Set the position of the `Drawer`
|
|
1912
2350
|
*/
|
|
@@ -1931,7 +2369,7 @@ interface DrawerProps {
|
|
|
1931
2369
|
*/
|
|
1932
2370
|
dragDownToDismiss?: boolean;
|
|
1933
2371
|
/**
|
|
1934
|
-
*
|
|
2372
|
+
* Invoke function when drag handle is clicked
|
|
1935
2373
|
*/
|
|
1936
2374
|
onDragHandleClick?: (e: React__default.MouseEvent) => void;
|
|
1937
2375
|
/**
|
|
@@ -1940,36 +2378,53 @@ interface DrawerProps {
|
|
|
1940
2378
|
ariaDescription: string;
|
|
1941
2379
|
}
|
|
1942
2380
|
|
|
1943
|
-
declare const DrawerHeader: React__default.
|
|
2381
|
+
declare const DrawerHeader: ({ title, isFixed, isResponsive, children, isFullBleed, titleWordWrap, ...props }: DrawerHeaderProps) => React__default.JSX.Element;
|
|
1944
2382
|
interface DrawerHeaderProps extends Pick<HeadingProps, "isResponsive"> {
|
|
1945
2383
|
/**
|
|
1946
|
-
*
|
|
2384
|
+
* Content to display within for the DrawerHeader. Can not be used in conjunction with `title`.
|
|
2385
|
+
*/
|
|
2386
|
+
children?: ReactNode;
|
|
2387
|
+
/**
|
|
2388
|
+
* Title for the DrawerHeader. Can not be used in conjunction with `children`.
|
|
2389
|
+
|
|
1947
2390
|
*/
|
|
1948
2391
|
title?: string;
|
|
1949
2392
|
/**
|
|
1950
2393
|
* Determine if the `DrawerHeader` is fixed to the top of the `Drawer`
|
|
1951
2394
|
*/
|
|
1952
2395
|
isFixed?: boolean;
|
|
2396
|
+
/**
|
|
2397
|
+
* Removes padding within the DrawerHeader
|
|
2398
|
+
*/
|
|
2399
|
+
isFullBleed?: boolean;
|
|
2400
|
+
/**
|
|
2401
|
+
* Whether long words in title should be wrapped.
|
|
2402
|
+
*/
|
|
2403
|
+
titleWordWrap?: boolean;
|
|
1953
2404
|
}
|
|
1954
2405
|
|
|
1955
|
-
declare const DrawerFooter: React__default.
|
|
2406
|
+
declare const DrawerFooter: ({ isFixed, isFullBleed, children, }: DrawerFooterProps) => React__default.JSX.Element;
|
|
1956
2407
|
interface DrawerFooterProps {
|
|
1957
2408
|
/**
|
|
1958
2409
|
* Content to display within the DrawerFooter. This will typically be ButtonGroup
|
|
1959
2410
|
*/
|
|
1960
|
-
children?:
|
|
2411
|
+
children?: ReactNode;
|
|
1961
2412
|
/**
|
|
1962
2413
|
* Determine if the `DrawerFooter` is fixed to the bottom of the `Drawer`
|
|
1963
2414
|
*/
|
|
1964
2415
|
isFixed?: boolean;
|
|
2416
|
+
/**
|
|
2417
|
+
* Removes padding within the DrawerFooter
|
|
2418
|
+
*/
|
|
2419
|
+
isFullBleed?: boolean;
|
|
1965
2420
|
}
|
|
1966
2421
|
|
|
1967
|
-
declare const DrawerContent: React__default.
|
|
2422
|
+
declare const DrawerContent: ({ isFullBleed, children, }: DrawerContentProps) => React__default.JSX.Element;
|
|
1968
2423
|
interface DrawerContentProps {
|
|
1969
2424
|
/**
|
|
1970
|
-
* Display content within the DrawerContent
|
|
2425
|
+
* Display content within the DrawerContent section
|
|
1971
2426
|
*/
|
|
1972
|
-
children:
|
|
2427
|
+
children: ReactNode;
|
|
1973
2428
|
/**
|
|
1974
2429
|
* This property removes all arc styling and opens the Drawer to have fully custom content
|
|
1975
2430
|
*/
|
|
@@ -1979,7 +2434,7 @@ interface DrawerContentProps {
|
|
|
1979
2434
|
/**
|
|
1980
2435
|
* Use `Elevation` to elevate what matters.
|
|
1981
2436
|
*/
|
|
1982
|
-
declare const Elevation:
|
|
2437
|
+
declare const Elevation: ({ children, level, isFullWidth, ...props }: ElevationProps) => React__default.JSX.Element;
|
|
1983
2438
|
interface ElevationProps {
|
|
1984
2439
|
/**
|
|
1985
2440
|
* Contents to Elevate.
|
|
@@ -1995,7 +2450,7 @@ interface ElevationProps {
|
|
|
1995
2450
|
isFullWidth?: boolean;
|
|
1996
2451
|
}
|
|
1997
2452
|
|
|
1998
|
-
declare const FilterControls:
|
|
2453
|
+
declare const FilterControls: ({ children, controlsAlignment, }: FilterControlsProps) => React__default.JSX.Element;
|
|
1999
2454
|
interface FilterControlsProps {
|
|
2000
2455
|
/**
|
|
2001
2456
|
* Contents of the `<FilterControls />` Should contain `<FilterControl />`
|
|
@@ -2007,7 +2462,7 @@ interface FilterControlsProps {
|
|
|
2007
2462
|
controlsAlignment?: "left" | "right" | "center";
|
|
2008
2463
|
}
|
|
2009
2464
|
|
|
2010
|
-
declare const FilterItems:
|
|
2465
|
+
declare const FilterItems: ({ children, error, displayType, }: FilterItemsProps) => React__default.JSX.Element;
|
|
2011
2466
|
interface FilterItemsProps {
|
|
2012
2467
|
/**
|
|
2013
2468
|
* Render children of `<FilterItems />`. This should only use `<FilterItem />`
|
|
@@ -2024,12 +2479,15 @@ interface FilterItemsProps {
|
|
|
2024
2479
|
}
|
|
2025
2480
|
|
|
2026
2481
|
/** Use `Filter` to filter and categorise page content. */
|
|
2027
|
-
declare const Filter:
|
|
2482
|
+
declare const Filter: ({ children, onChange, controls, displayType, controlsAlignment, logicType, error, ...props }: FilterProps) => React__default.JSX.Element;
|
|
2028
2483
|
interface FilterProps {
|
|
2029
2484
|
/**
|
|
2030
2485
|
* Contents of the `<Filter />` Should contain `<FilterItem />`
|
|
2031
2486
|
*/
|
|
2032
2487
|
children?: ReactNode;
|
|
2488
|
+
/**
|
|
2489
|
+
* Array of filter control configurations
|
|
2490
|
+
*/
|
|
2033
2491
|
controls: {
|
|
2034
2492
|
label: string;
|
|
2035
2493
|
isSelected?: boolean;
|
|
@@ -2057,7 +2515,7 @@ interface FilterProps {
|
|
|
2057
2515
|
error?: ReactNode;
|
|
2058
2516
|
}
|
|
2059
2517
|
|
|
2060
|
-
declare const FilterItem:
|
|
2518
|
+
declare const FilterItem: ({ children }: FilterItemProps) => React__default.JSX.Element;
|
|
2061
2519
|
interface FilterItemProps {
|
|
2062
2520
|
/**
|
|
2063
2521
|
* Content to display within `FilterItem`
|
|
@@ -2070,7 +2528,7 @@ interface FilterItemProps {
|
|
|
2070
2528
|
}
|
|
2071
2529
|
|
|
2072
2530
|
/** Group `FilterControl` components to add controls to `Filter` component. */
|
|
2073
|
-
declare const FilterControl:
|
|
2531
|
+
declare const FilterControl: ({ children, onClick, isSelected, }: FilterControlProps) => React__default.JSX.Element;
|
|
2074
2532
|
interface FilterControlProps {
|
|
2075
2533
|
/**
|
|
2076
2534
|
* Name of the `<FilterControl />`
|
|
@@ -2089,8 +2547,8 @@ interface FilterControlProps {
|
|
|
2089
2547
|
/**
|
|
2090
2548
|
* Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
|
|
2091
2549
|
*/
|
|
2092
|
-
declare const GhostedHeroBanner: React__default.
|
|
2093
|
-
type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle">;
|
|
2550
|
+
declare const GhostedHeroBanner: ({ heading, headingLevel, label, text, img, children, fontStyle, headingWordWrap, ...props }: GhostedHeroBannerProps) => React__default.JSX.Element;
|
|
2551
|
+
type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle" | "headingWordWrap">;
|
|
2094
2552
|
|
|
2095
2553
|
/**
|
|
2096
2554
|
* Provides an object of breakpoints for responsive designs.
|
|
@@ -2116,7 +2574,7 @@ type ScrimFadeSize = "l" | "m" | "s";
|
|
|
2116
2574
|
/**
|
|
2117
2575
|
* Use `GradientPageBackground` as a content wrapper blending multiple colours to add depth, mood or emphasise hero sections, footer sections, or mid-page section backgrounds.
|
|
2118
2576
|
*/
|
|
2119
|
-
declare const GradientPageBackground: React__default.
|
|
2577
|
+
declare const GradientPageBackground: ({ gradient, responsiveGradient, children, scrimFadeSize, scrimFadeHeights, extendBackgrounds, loading, scrimFadePosition, ...props }: GradientPageBackgroundProps) => React__default.JSX.Element;
|
|
2120
2578
|
interface GradientPageBackgroundProps {
|
|
2121
2579
|
/**
|
|
2122
2580
|
* Gradient for the component. You can import these directly from the @arc-ui/gradients package, or pass your own.
|
|
@@ -2155,7 +2613,7 @@ interface GradientPageBackgroundProps {
|
|
|
2155
2613
|
/**
|
|
2156
2614
|
* Use `Grid` to compose layouts on a 12-column grid. Aligns with sibling `Section` components.
|
|
2157
2615
|
*/
|
|
2158
|
-
declare const Grid: React__default.
|
|
2616
|
+
declare const Grid: ({ children, isFluid, isDebugVisible, isGutterless, isExtended, ...props }: GridProps) => React__default.JSX.Element;
|
|
2159
2617
|
interface GridProps extends ExtentableContainer {
|
|
2160
2618
|
/**
|
|
2161
2619
|
* `Grid` is set to 100% width if true.
|
|
@@ -2186,26 +2644,50 @@ type Column = ColumnConfig<ColumnValue>;
|
|
|
2186
2644
|
type Arrangement = ColumnConfig<GridValue>;
|
|
2187
2645
|
type Alignment = ColumnConfig<AlignmentValue>;
|
|
2188
2646
|
|
|
2189
|
-
declare const GridCol: React__default.
|
|
2647
|
+
declare const GridCol: ({ order, offset, align, children, ...props }: GridColProps) => React__default.JSX.Element;
|
|
2190
2648
|
interface GridColProps extends Column {
|
|
2649
|
+
/**
|
|
2650
|
+
* Offset configuration for the column
|
|
2651
|
+
*/
|
|
2191
2652
|
offset?: Arrangement;
|
|
2653
|
+
/**
|
|
2654
|
+
* Order configuration for the column
|
|
2655
|
+
*/
|
|
2192
2656
|
order?: Arrangement;
|
|
2657
|
+
/**
|
|
2658
|
+
* Alignment configuration for the column
|
|
2659
|
+
*/
|
|
2193
2660
|
align?: Alignment;
|
|
2661
|
+
/**
|
|
2662
|
+
* Content to display in the GridCol
|
|
2663
|
+
*/
|
|
2194
2664
|
children: React__default.ReactNode;
|
|
2195
2665
|
}
|
|
2196
2666
|
|
|
2197
|
-
declare const GridRow: React__default.
|
|
2667
|
+
declare const GridRow: ({ direction, align, justify, children, ...props }: GridRowProps) => React__default.JSX.Element;
|
|
2198
2668
|
interface GridRowProps {
|
|
2669
|
+
/**
|
|
2670
|
+
* Alignment of items in the row
|
|
2671
|
+
*/
|
|
2199
2672
|
align?: AlignmentValue;
|
|
2673
|
+
/**
|
|
2674
|
+
* Direction of the row
|
|
2675
|
+
*/
|
|
2200
2676
|
direction?: "column" | "row" | "column-reverse" | "row-reverse";
|
|
2677
|
+
/**
|
|
2678
|
+
* Justification of items in the row
|
|
2679
|
+
*/
|
|
2201
2680
|
justify?: "start" | "center" | "end" | "between" | "around" | "normal";
|
|
2681
|
+
/**
|
|
2682
|
+
* Content to display in the GridRow
|
|
2683
|
+
*/
|
|
2202
2684
|
children: React__default.ReactNode;
|
|
2203
2685
|
}
|
|
2204
2686
|
|
|
2205
2687
|
/**
|
|
2206
2688
|
* Use `Group` to arrange flexible items in a row.
|
|
2207
2689
|
*/
|
|
2208
|
-
declare const Group:
|
|
2690
|
+
declare const Group: ({ children, grow, growEqual, gutterBorder, noWrap, isExtended, ...props }: GroupProps) => React__default.JSX.Element;
|
|
2209
2691
|
interface GroupProps extends ExtentableContainer {
|
|
2210
2692
|
/**
|
|
2211
2693
|
* Contents of the Group Should only contain `GroupItem`.
|
|
@@ -2229,8 +2711,8 @@ interface GroupProps extends ExtentableContainer {
|
|
|
2229
2711
|
noWrap?: boolean;
|
|
2230
2712
|
}
|
|
2231
2713
|
|
|
2232
|
-
declare const GroupItem:
|
|
2233
|
-
interface
|
|
2714
|
+
declare const GroupItem: ({ children, grow, isDebugVisible, ...props }: GroupItemProps) => React__default.JSX.Element;
|
|
2715
|
+
interface GroupItemProps {
|
|
2234
2716
|
/**
|
|
2235
2717
|
* Content to display in the GroupItem.
|
|
2236
2718
|
*/
|
|
@@ -2247,7 +2729,7 @@ interface ItemProps {
|
|
|
2247
2729
|
}
|
|
2248
2730
|
|
|
2249
2731
|
/** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
|
|
2250
|
-
declare const HeroBanner:
|
|
2732
|
+
declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
|
|
2251
2733
|
interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
|
|
2252
2734
|
/**
|
|
2253
2735
|
* Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
|
|
@@ -2256,11 +2738,11 @@ interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "ali
|
|
|
2256
2738
|
}
|
|
2257
2739
|
|
|
2258
2740
|
type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
|
|
2259
|
-
type
|
|
2741
|
+
type ButtonRef = Ref<ElementUnion> | null;
|
|
2260
2742
|
/**
|
|
2261
2743
|
* Use `HeroButton` as the most prominent call-to-action. It should be used sparingly at the most important parts of a user journey only.
|
|
2262
2744
|
*/
|
|
2263
|
-
declare const HeroButton:
|
|
2745
|
+
declare const HeroButton: ({ label, buttonStyle, icon, ariaLabel, isLoading, onClick, href, id, rel, target, type, form, ref, ...props }: HeroButtonProps) => React__default.JSX.Element;
|
|
2264
2746
|
interface LinkElementProps {
|
|
2265
2747
|
/**
|
|
2266
2748
|
* URL to link to if `HeroButton` elementType is 'a'.
|
|
@@ -2307,7 +2789,7 @@ interface HeroButtonProps extends HeroButtonElementProps, LinkElementProps {
|
|
|
2307
2789
|
/**
|
|
2308
2790
|
* Optional property to provide component Ref
|
|
2309
2791
|
*/
|
|
2310
|
-
ref?:
|
|
2792
|
+
ref?: ButtonRef;
|
|
2311
2793
|
/**
|
|
2312
2794
|
* Text to override `label` with additional, more precise information
|
|
2313
2795
|
* specifically for screen reader users.
|
|
@@ -2333,23 +2815,44 @@ interface BreakpointVisibility {
|
|
|
2333
2815
|
}
|
|
2334
2816
|
|
|
2335
2817
|
/** Use `Hidden` to hide it's children at specific breakpoints */
|
|
2336
|
-
declare const Hidden: React__default.
|
|
2818
|
+
declare const Hidden: ({ children, xs, s, m, l, xl, xxl, ...props }: HiddenProps) => React__default.JSX.Element;
|
|
2337
2819
|
interface HiddenProps extends BreakpointVisibility {
|
|
2820
|
+
/**
|
|
2821
|
+
* Content to hide at specific breakpoints
|
|
2822
|
+
*/
|
|
2338
2823
|
children: React__default.ReactNode;
|
|
2339
2824
|
}
|
|
2340
2825
|
|
|
2341
2826
|
type CardFooterIcon = "play" | "arrow";
|
|
2342
2827
|
interface CardFooterProps {
|
|
2828
|
+
/**
|
|
2829
|
+
* Metadata text or date to display in the footer.
|
|
2830
|
+
*/
|
|
2343
2831
|
metaText?: string | Date;
|
|
2832
|
+
/**
|
|
2833
|
+
* Whether to use dark pathway styling.
|
|
2834
|
+
*/
|
|
2344
2835
|
isDarkPathway?: boolean;
|
|
2836
|
+
/**
|
|
2837
|
+
* Icon to display in the button.
|
|
2838
|
+
*/
|
|
2345
2839
|
buttonIcon?: CardFooterIcon;
|
|
2840
|
+
/**
|
|
2841
|
+
* Size of the button.
|
|
2842
|
+
*/
|
|
2346
2843
|
buttonSize?: "s" | "m";
|
|
2844
|
+
/**
|
|
2845
|
+
* Whether to show the button.
|
|
2846
|
+
*/
|
|
2347
2847
|
showButton?: boolean;
|
|
2348
|
-
|
|
2848
|
+
/**
|
|
2849
|
+
* Whether the card is in a hovered state.
|
|
2850
|
+
*/
|
|
2851
|
+
isHovered?: boolean;
|
|
2349
2852
|
}
|
|
2350
2853
|
|
|
2351
2854
|
/** Use `HorizontalCard` to display card content in a horizontal layout. */
|
|
2352
|
-
declare const HorizontalCard: React__default.
|
|
2855
|
+
declare const HorizontalCard: ({ text, heading, headingLevel, img, metaText, url, onClick, ...props }: HorizontalCardProps) => React__default.JSX.Element;
|
|
2353
2856
|
interface HorizontalCardProps {
|
|
2354
2857
|
/**
|
|
2355
2858
|
* Heading for the HorizontalCard.
|
|
@@ -2388,7 +2891,7 @@ interface HorizontalCardProps {
|
|
|
2388
2891
|
/**
|
|
2389
2892
|
* Use `Icon` to display brand iconography.
|
|
2390
2893
|
*/
|
|
2391
|
-
declare const Icon:
|
|
2894
|
+
declare const Icon: ({ testId, icon, label, size, color, isInline, ...props }: IconProps) => React__default.JSX.Element;
|
|
2392
2895
|
declare const colors: readonly ["auto", "brand", "brand-alt", "statusRed", "statusAmber", "statusGreen"];
|
|
2393
2896
|
type IconColor = (typeof colors)[number];
|
|
2394
2897
|
interface IconProps {
|
|
@@ -2421,8 +2924,9 @@ interface IconProps {
|
|
|
2421
2924
|
type CardHeadingSize = Extract<HeadingSize, "m" | "l">;
|
|
2422
2925
|
|
|
2423
2926
|
/** Use `ImpactCard` for important content that needs additional hierarchy and prominence. */
|
|
2424
|
-
declare const ImpactCard:
|
|
2927
|
+
declare const ImpactCard: ({ url, onClick, heading, img, label, minHeight, headingSize, headingWordWrap, linkData, pathway, headingLevel, buttonIcon, labelLevel, preserveAspectRatios, ...props }: ImpactCardProps) => React__default.JSX.Element;
|
|
2425
2928
|
type ImpactCardPathway = "light" | "dark";
|
|
2929
|
+
type AspectRatios$3 = "3-4" | "10-16";
|
|
2426
2930
|
interface ImpactCardProps {
|
|
2427
2931
|
/**
|
|
2428
2932
|
* Heading for the ImpactCard.
|
|
@@ -2432,6 +2936,10 @@ interface ImpactCardProps {
|
|
|
2432
2936
|
* Heading size for the ImpactCard.
|
|
2433
2937
|
*/
|
|
2434
2938
|
headingSize?: CardHeadingSize;
|
|
2939
|
+
/**
|
|
2940
|
+
* Whether long words in heading should be wrapped.
|
|
2941
|
+
*/
|
|
2942
|
+
headingWordWrap?: boolean;
|
|
2435
2943
|
/**
|
|
2436
2944
|
* Url for the ImpactCard. Makes the whole card a link
|
|
2437
2945
|
*/
|
|
@@ -2475,10 +2983,22 @@ interface ImpactCardProps {
|
|
|
2475
2983
|
* Heading level for the ImpactCard lebel.
|
|
2476
2984
|
*/
|
|
2477
2985
|
labelLevel?: HeadingLevel;
|
|
2986
|
+
/**
|
|
2987
|
+
* Preserve aspect ratio of the ImpactCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
|
|
2988
|
+
*/
|
|
2989
|
+
preserveAspectRatios?: {
|
|
2990
|
+
xs?: AspectRatios$3;
|
|
2991
|
+
s?: AspectRatios$3;
|
|
2992
|
+
m?: AspectRatios$3;
|
|
2993
|
+
l?: AspectRatios$3;
|
|
2994
|
+
xl?: AspectRatios$3;
|
|
2995
|
+
xxl?: AspectRatios$3;
|
|
2996
|
+
xxxl?: AspectRatios$3;
|
|
2997
|
+
};
|
|
2478
2998
|
}
|
|
2479
2999
|
|
|
2480
3000
|
/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
|
|
2481
|
-
declare const InformationCard:
|
|
3001
|
+
declare const InformationCard: ({ cardUrl, onClick, heading, text, label, footerLogo, button, image, badges, icon, minHeight, minHeights, headingLevel, labelLevel, preserveAspectRatios, headingWordWrap, ...props }: InformationCardProps) => React__default.JSX.Element;
|
|
2482
3002
|
type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad" | "fetchPriority">;
|
|
2483
3003
|
type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
|
|
2484
3004
|
interface minHeightsProps {
|
|
@@ -2490,6 +3010,7 @@ interface minHeightsProps {
|
|
|
2490
3010
|
xxl?: number;
|
|
2491
3011
|
xxxl?: number;
|
|
2492
3012
|
}
|
|
3013
|
+
type AspectRatios$2 = "3-4" | "10-16";
|
|
2493
3014
|
interface InformationCardProps {
|
|
2494
3015
|
/**
|
|
2495
3016
|
* Heading for the InformationCard.
|
|
@@ -2500,7 +3021,7 @@ interface InformationCardProps {
|
|
|
2500
3021
|
*/
|
|
2501
3022
|
headingLevel?: HeadingLevel;
|
|
2502
3023
|
/**
|
|
2503
|
-
* Text content for the InformationCard
|
|
3024
|
+
* Text content for the InformationCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
2504
3025
|
*/
|
|
2505
3026
|
text?: string;
|
|
2506
3027
|
/**
|
|
@@ -2549,12 +3070,28 @@ interface InformationCardProps {
|
|
|
2549
3070
|
* Heading level for the InformationCard label.
|
|
2550
3071
|
*/
|
|
2551
3072
|
labelLevel?: HeadingLevel;
|
|
3073
|
+
/**
|
|
3074
|
+
* Whether long words in heading should be wrapped.
|
|
3075
|
+
*/
|
|
3076
|
+
headingWordWrap?: boolean;
|
|
3077
|
+
/**
|
|
3078
|
+
* Preserve aspect ratio of the InformationCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
|
|
3079
|
+
*/
|
|
3080
|
+
preserveAspectRatios?: {
|
|
3081
|
+
xs?: AspectRatios$2;
|
|
3082
|
+
s?: AspectRatios$2;
|
|
3083
|
+
m?: AspectRatios$2;
|
|
3084
|
+
l?: AspectRatios$2;
|
|
3085
|
+
xl?: AspectRatios$2;
|
|
3086
|
+
xxl?: AspectRatios$2;
|
|
3087
|
+
xxxl?: AspectRatios$2;
|
|
3088
|
+
};
|
|
2552
3089
|
}
|
|
2553
3090
|
|
|
2554
3091
|
/**
|
|
2555
3092
|
* Use `Markup` to display HTML-formatted text.
|
|
2556
3093
|
*/
|
|
2557
|
-
declare const Markup:
|
|
3094
|
+
declare const Markup: ({ children, isMeasured, ...props }: MarkupProps) => React__default.JSX.Element;
|
|
2558
3095
|
interface MarkupProps {
|
|
2559
3096
|
/**
|
|
2560
3097
|
* HTML-formatted text to display in Markup.
|
|
@@ -2577,7 +3114,8 @@ interface MediaCardVideo extends Partial<Omit<VideoPlayerProps$1, "url" | "title
|
|
|
2577
3114
|
/**
|
|
2578
3115
|
* Use `MediaCard` to contain content and an image about a single subject.
|
|
2579
3116
|
*/
|
|
2580
|
-
declare const MediaCard:
|
|
3117
|
+
declare const MediaCard: ({ media, url, onClick, heading, label, labelLevel, text, metaText, minHeight, buttonIcon, isContained, headingLevel, headingWordWrap, preserveAspectRatios, ...props }: MediaCardProps) => React__default.JSX.Element;
|
|
3118
|
+
type AspectRatios$1 = "3-4" | "10-16";
|
|
2581
3119
|
interface MediaCardProps {
|
|
2582
3120
|
/**
|
|
2583
3121
|
* Heading for the MediaCard.
|
|
@@ -2588,7 +3126,7 @@ interface MediaCardProps {
|
|
|
2588
3126
|
*/
|
|
2589
3127
|
headingLevel?: HeadingLevel;
|
|
2590
3128
|
/**
|
|
2591
|
-
* Text content for the MediaCard
|
|
3129
|
+
* Text content for the MediaCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
2592
3130
|
*/
|
|
2593
3131
|
text?: string;
|
|
2594
3132
|
/**
|
|
@@ -2627,12 +3165,28 @@ interface MediaCardProps {
|
|
|
2627
3165
|
* Heading level for the MediaCard label.
|
|
2628
3166
|
*/
|
|
2629
3167
|
labelLevel?: HeadingLevel;
|
|
3168
|
+
/**
|
|
3169
|
+
* Whether long words in heading should be wrapped.
|
|
3170
|
+
*/
|
|
3171
|
+
headingWordWrap?: boolean;
|
|
3172
|
+
/**
|
|
3173
|
+
* Preserve aspect ratio of the MediaCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
|
|
3174
|
+
*/
|
|
3175
|
+
preserveAspectRatios?: {
|
|
3176
|
+
xs?: AspectRatios$1;
|
|
3177
|
+
s?: AspectRatios$1;
|
|
3178
|
+
m?: AspectRatios$1;
|
|
3179
|
+
l?: AspectRatios$1;
|
|
3180
|
+
xl?: AspectRatios$1;
|
|
3181
|
+
xxl?: AspectRatios$1;
|
|
3182
|
+
xxxl?: AspectRatios$1;
|
|
3183
|
+
};
|
|
2630
3184
|
}
|
|
2631
3185
|
|
|
2632
3186
|
/**
|
|
2633
3187
|
* Use 'Menu' to display a list of selectable options, e.g. suggestions, presets or autocomplete results.
|
|
2634
3188
|
*/
|
|
2635
|
-
declare const Menu: React__default.
|
|
3189
|
+
declare const Menu: ({ defaultOpen, open, onOpenChange, modal, isMobileMenu, children, defaultWidth, ...props }: MenuProps) => React__default.JSX.Element;
|
|
2636
3190
|
interface MenuProps {
|
|
2637
3191
|
/**
|
|
2638
3192
|
* The content of the menu
|
|
@@ -2664,7 +3218,7 @@ interface MenuProps {
|
|
|
2664
3218
|
defaultWidth?: string | number;
|
|
2665
3219
|
}
|
|
2666
3220
|
|
|
2667
|
-
declare const MenuItemContentTemplate: React__default.
|
|
3221
|
+
declare const MenuItemContentTemplate: ({ leadingIcon, supportingText, keyCommands, trailingIcon, children, }: MenuItemContentTemplateProps) => React__default.JSX.Element;
|
|
2668
3222
|
interface MenuItemContentTemplateProps {
|
|
2669
3223
|
/**
|
|
2670
3224
|
* Optional supporting text that appears below the label for additional context.
|
|
@@ -2688,7 +3242,7 @@ interface MenuItemContentTemplateProps {
|
|
|
2688
3242
|
keyCommands?: string;
|
|
2689
3243
|
}
|
|
2690
3244
|
|
|
2691
|
-
declare const MenuItemCheckbox: React__default.
|
|
3245
|
+
declare const MenuItemCheckbox: ({ children, checked, onCheckedChange, isDisabled, onSelect, id, shouldKeepOpen, ...props }: MenuItemCheckboxProps) => React__default.JSX.Element;
|
|
2692
3246
|
interface MenuItemCheckboxProps extends Pick<MenuItemContentTemplateProps, "supportingText" | "children"> {
|
|
2693
3247
|
/**
|
|
2694
3248
|
* Controls whether the checkbox is checked, unchecked.
|
|
@@ -2719,8 +3273,12 @@ interface MenuItemCheckboxProps extends Pick<MenuItemContentTemplateProps, "supp
|
|
|
2719
3273
|
/**
|
|
2720
3274
|
* The component that pops out when the dropdown menu is open.
|
|
2721
3275
|
*/
|
|
2722
|
-
declare const MenuContent:
|
|
3276
|
+
declare const MenuContent: ({ ref, children, width, minWidth, maxWidth, align, alignOffset, side, initalTitle, isFluidToViewport, ...props }: MenuContentProps) => React__default.JSX.Element;
|
|
2723
3277
|
interface MenuContentProps {
|
|
3278
|
+
/**
|
|
3279
|
+
* Ref to the underlying div element
|
|
3280
|
+
*/
|
|
3281
|
+
ref?: React__default.Ref<HTMLDivElement>;
|
|
2724
3282
|
/**
|
|
2725
3283
|
* The content inside the menu, typically `MenuItem`, `MenuGroup`, and other menu elements.
|
|
2726
3284
|
*/
|
|
@@ -2762,7 +3320,7 @@ interface MenuContentProps {
|
|
|
2762
3320
|
/**
|
|
2763
3321
|
* Displays footer content at the bottom of the menu.
|
|
2764
3322
|
*/
|
|
2765
|
-
declare const MenuFooter:
|
|
3323
|
+
declare const MenuFooter: ({ leadingIcon, trailingIcon, supportingText, keyCommands, children, onClick, isDisabled, ariaLabel, }: MenuFooterProps) => React__default.JSX.Element;
|
|
2766
3324
|
interface MenuFooterProps extends MenuItemContentTemplateProps {
|
|
2767
3325
|
/**
|
|
2768
3326
|
* Click event handler triggered when the menu header is selected.
|
|
@@ -2785,7 +3343,7 @@ interface MenuFooterProps extends MenuItemContentTemplateProps {
|
|
|
2785
3343
|
/**
|
|
2786
3344
|
* Groups related menu items together within a dropdown menu.
|
|
2787
3345
|
*/
|
|
2788
|
-
declare const MenuGroup: React__default.
|
|
3346
|
+
declare const MenuGroup: ({ children, ...props }: MenuGroupProps) => React__default.JSX.Element;
|
|
2789
3347
|
interface MenuGroupProps {
|
|
2790
3348
|
/**
|
|
2791
3349
|
* Menu items grouped together within the menu.
|
|
@@ -2796,7 +3354,7 @@ interface MenuGroupProps {
|
|
|
2796
3354
|
/**
|
|
2797
3355
|
* Displays a header within the dropdown menu.
|
|
2798
3356
|
*/
|
|
2799
|
-
declare const MenuHeader:
|
|
3357
|
+
declare const MenuHeader: ({ leadingIcon, trailingIcon, supportingText, keyCommands, children, onClick, isDisabled, ariaLabel, }: MenuHeaderProps) => React__default.JSX.Element;
|
|
2800
3358
|
interface MenuHeaderProps extends MenuItemContentTemplateProps {
|
|
2801
3359
|
/**
|
|
2802
3360
|
* Click event handler triggered when the menu header is selected.
|
|
@@ -2819,7 +3377,7 @@ interface MenuHeaderProps extends MenuItemContentTemplateProps {
|
|
|
2819
3377
|
/**
|
|
2820
3378
|
* Renders a menu item, optionally as a link if `href` is provided.
|
|
2821
3379
|
*/
|
|
2822
|
-
declare const MenuItem: React__default.
|
|
3380
|
+
declare const MenuItem: ({ leadingIcon, supportingText, keyCommands, trailingIcon, children, onClick, shouldKeepOpen, isDisabled, href, ariaLabel, ...props }: MenuItemProps) => React__default.JSX.Element;
|
|
2823
3381
|
interface MenuItemProps extends MenuItemContentTemplateProps {
|
|
2824
3382
|
/**
|
|
2825
3383
|
* Click event handler triggered when the menu item is selected.
|
|
@@ -2846,7 +3404,7 @@ interface MenuItemProps extends MenuItemContentTemplateProps {
|
|
|
2846
3404
|
/**
|
|
2847
3405
|
* Provides a label to group related menu items.
|
|
2848
3406
|
*/
|
|
2849
|
-
declare const MenuLabel: React__default.
|
|
3407
|
+
declare const MenuLabel: ({ children, ...props }: MenuLabelProps) => React__default.JSX.Element;
|
|
2850
3408
|
interface MenuLabelProps {
|
|
2851
3409
|
/**
|
|
2852
3410
|
* The text content of the label, typically used to group related menu items.
|
|
@@ -2857,7 +3415,7 @@ interface MenuLabelProps {
|
|
|
2857
3415
|
/**
|
|
2858
3416
|
* When used, portals the content part into the body. By default it's arc's theme element
|
|
2859
3417
|
*/
|
|
2860
|
-
declare const MenuPortal: React__default.
|
|
3418
|
+
declare const MenuPortal: ({ children, ...props }: MenuPortalProps) => React__default.JSX.Element;
|
|
2861
3419
|
interface MenuPortalProps {
|
|
2862
3420
|
/**
|
|
2863
3421
|
* The content to be portalled.
|
|
@@ -2868,7 +3426,7 @@ interface MenuPortalProps {
|
|
|
2868
3426
|
/**
|
|
2869
3427
|
* Groups menu items allowing single selection from multiple options.
|
|
2870
3428
|
*/
|
|
2871
|
-
declare const MenuGroupSingleSelect: React__default.
|
|
3429
|
+
declare const MenuGroupSingleSelect: ({ children, value, onValueChange, ...props }: MenuGroupSingleSelectProps) => React__default.JSX.Element;
|
|
2872
3430
|
interface MenuGroupSingleSelectProps {
|
|
2873
3431
|
/**
|
|
2874
3432
|
* The single select items inside the group.
|
|
@@ -2887,7 +3445,7 @@ interface MenuGroupSingleSelectProps {
|
|
|
2887
3445
|
/**
|
|
2888
3446
|
* A selectable menu item used within a radio group.
|
|
2889
3447
|
*/
|
|
2890
|
-
declare const MenuItemSingleSelect: React__default.
|
|
3448
|
+
declare const MenuItemSingleSelect: ({ children, value, disabled, onSelect, leadingIcon, supportingText, shouldKeepOpen, ...props }: MenuItemSingleSelectProps) => React__default.JSX.Element;
|
|
2891
3449
|
interface MenuItemSingleSelectProps extends Omit<MenuItemContentTemplateProps, "trailingIcon"> {
|
|
2892
3450
|
/**
|
|
2893
3451
|
* The value assigned to this radio item.
|
|
@@ -2910,7 +3468,7 @@ interface MenuItemSingleSelectProps extends Omit<MenuItemContentTemplateProps, "
|
|
|
2910
3468
|
/**
|
|
2911
3469
|
* Scrollable container that adjusts height based on surrounding menu content.
|
|
2912
3470
|
*/
|
|
2913
|
-
declare const MenuScrollable: React__default.
|
|
3471
|
+
declare const MenuScrollable: ({ children }: MenuScrollableProps) => React__default.JSX.Element;
|
|
2914
3472
|
interface MenuScrollableProps {
|
|
2915
3473
|
/**
|
|
2916
3474
|
* The content within the scrollable area, typically a list of `MenuItem` components or similar menu elements.
|
|
@@ -2921,24 +3479,33 @@ interface MenuScrollableProps {
|
|
|
2921
3479
|
/**
|
|
2922
3480
|
* Visual separator used to divide groups of menu items.
|
|
2923
3481
|
*/
|
|
2924
|
-
declare const MenuSeparator:
|
|
3482
|
+
declare const MenuSeparator: ({ ...props }: {
|
|
3483
|
+
[x: string]: any;
|
|
3484
|
+
}) => React__default.JSX.Element;
|
|
2925
3485
|
|
|
2926
3486
|
/**
|
|
2927
3487
|
* Container for multi-level menu content within a dropdown menu.
|
|
2928
3488
|
*/
|
|
2929
|
-
declare const MenuItemMultiLevel: React__default.
|
|
3489
|
+
declare const MenuItemMultiLevel: ({ children, ...props }: MenuItemMultiLevelProps) => React__default.JSX.Element;
|
|
2930
3490
|
interface MenuItemMultiLevelProps {
|
|
2931
3491
|
/**
|
|
2932
3492
|
* The content inside the multi-level menu.
|
|
2933
3493
|
*/
|
|
2934
|
-
children:
|
|
3494
|
+
children: ReactNode;
|
|
2935
3495
|
}
|
|
2936
3496
|
|
|
2937
3497
|
/**
|
|
2938
3498
|
* The multi-level menu content that pops out when a menu item with children is hovered or clicked.
|
|
2939
3499
|
*/
|
|
2940
|
-
declare const MenuItemMultiLevelContent:
|
|
3500
|
+
declare const MenuItemMultiLevelContent: {
|
|
3501
|
+
({ ref, children, width, minWidth, maxWidth, alignOffset, ...props }: MenuItemMultiLevelContentProps): React__default.JSX.Element;
|
|
3502
|
+
displayName: string;
|
|
3503
|
+
};
|
|
2941
3504
|
interface MenuItemMultiLevelContentProps {
|
|
3505
|
+
/**
|
|
3506
|
+
* Ref to the underlying div element
|
|
3507
|
+
*/
|
|
3508
|
+
ref?: React__default.Ref<HTMLDivElement>;
|
|
2942
3509
|
/**
|
|
2943
3510
|
* The multi-level menu content, typically containing `Menu.Item` elements.
|
|
2944
3511
|
*/
|
|
@@ -2976,8 +3543,11 @@ interface MenuItemMultiLevelContentProps {
|
|
|
2976
3543
|
/**
|
|
2977
3544
|
* Trigger element that opens a multi-level menu when selected.
|
|
2978
3545
|
*/
|
|
2979
|
-
declare const MenuItemMultiLevelTrigger: React__default.
|
|
2980
|
-
interface
|
|
3546
|
+
declare const MenuItemMultiLevelTrigger: ({ children, isDisabled, leadingIcon, supportingText, keyCommands, ariaLabel, pairedContent, ...props }: InternalMenuItemMultiLevelTriggerProps) => React__default.JSX.Element;
|
|
3547
|
+
interface InternalMenuItemMultiLevelTriggerProps extends MenuItemMultiLevelTriggerProps {
|
|
3548
|
+
/**
|
|
3549
|
+
* The paired content to be displayed in the multi-level menu.
|
|
3550
|
+
*/
|
|
2981
3551
|
pairedContent?: React__default.ReactNode;
|
|
2982
3552
|
}
|
|
2983
3553
|
interface MenuItemMultiLevelTriggerProps extends Pick<MenuItemProps, "keyCommands" | "leadingIcon" | "ariaLabel" | "supportingText"> {
|
|
@@ -2994,7 +3564,7 @@ interface MenuItemMultiLevelTriggerProps extends Pick<MenuItemProps, "keyCommand
|
|
|
2994
3564
|
/**
|
|
2995
3565
|
* The element that toggles the menu.
|
|
2996
3566
|
*/
|
|
2997
|
-
declare const MenuTrigger: React__default.
|
|
3567
|
+
declare const MenuTrigger: ({ children, asChild, ...props }: MenuTriggerProps) => React__default.JSX.Element;
|
|
2998
3568
|
interface MenuTriggerProps {
|
|
2999
3569
|
/**
|
|
3000
3570
|
* The element that triggers the menu when clicked or interacted with.
|
|
@@ -3007,7 +3577,7 @@ interface MenuTriggerProps {
|
|
|
3007
3577
|
}
|
|
3008
3578
|
|
|
3009
3579
|
/** Use `Modal` to display information that needs immediate action from a user. */
|
|
3010
|
-
declare const Modal:
|
|
3580
|
+
declare const Modal: ({ title, description, ariaDescribedBy, isOpen, actions, onRequestClose, children, role, shouldReturnFocus, isContentScrollable, size, fullBleed, customWidths, titleWordWrap, ...props }: ModalProps) => React__default.JSX.Element;
|
|
3011
3581
|
type modalSpan = 4 | 6 | 8 | 10 | 12;
|
|
3012
3582
|
interface ModalProps {
|
|
3013
3583
|
/**
|
|
@@ -3067,12 +3637,16 @@ interface ModalProps {
|
|
|
3067
3637
|
m?: modalSpan;
|
|
3068
3638
|
l?: modalSpan;
|
|
3069
3639
|
};
|
|
3640
|
+
/**
|
|
3641
|
+
* Whether long words in title should be wrapped.
|
|
3642
|
+
*/
|
|
3643
|
+
titleWordWrap?: boolean;
|
|
3070
3644
|
}
|
|
3071
3645
|
|
|
3072
3646
|
/**
|
|
3073
3647
|
* Use `Pagination` to navigate through multiple pages of content.
|
|
3074
3648
|
*/
|
|
3075
|
-
declare const Pagination:
|
|
3649
|
+
declare const Pagination: ({ pageCount, onPageChange, defaultSelectedPage, ...props }: PaginationProps) => React__default.JSX.Element;
|
|
3076
3650
|
interface PaginationProps {
|
|
3077
3651
|
/**
|
|
3078
3652
|
* Number of pages for the pagination
|
|
@@ -3094,7 +3668,7 @@ interface PaginationProps {
|
|
|
3094
3668
|
/**
|
|
3095
3669
|
* Use `PaginationSimple` to navigate through multiple pages of content.
|
|
3096
3670
|
*/
|
|
3097
|
-
declare const PaginationSimple:
|
|
3671
|
+
declare const PaginationSimple: ({ hide, hrefs, onPageChange, isFluid, showEllipsis, ...props }: PaginationSimpleProps) => React__default.JSX.Element;
|
|
3098
3672
|
interface PaginationSimpleProps {
|
|
3099
3673
|
/**
|
|
3100
3674
|
* hide buttons if true.
|
|
@@ -3134,7 +3708,7 @@ interface PaginationSimpleProps {
|
|
|
3134
3708
|
/**
|
|
3135
3709
|
* Use `Popover` to display content in a portal, triggered by a button.
|
|
3136
3710
|
*/
|
|
3137
|
-
declare const Popover:
|
|
3711
|
+
declare const Popover: ({ align, ariaLabel, alignOffset, arrow, background, children, content, asChild, maxWidth, minHeight, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onOpenAutoFocus, onPointerDownOutside, onOpenChange, open, constrainToViewport, side, sideOffset, zIndex, hideWhenDetached, useBespokeTrigger, isFluidToViewport, contentMargin, isFullBleed, className, ...props }: PopoverProps) => React__default.JSX.Element;
|
|
3138
3712
|
interface PopoverProps {
|
|
3139
3713
|
/**
|
|
3140
3714
|
* Content to render within Popover Trigger
|
|
@@ -3230,16 +3804,32 @@ interface PopoverProps {
|
|
|
3230
3804
|
* Defaults to `fit-content`, but becomes scrollable if necessary.
|
|
3231
3805
|
*/
|
|
3232
3806
|
constrainToViewport?: boolean;
|
|
3807
|
+
/**
|
|
3808
|
+
* Content components placed into Popovers to respond to the viewport.
|
|
3809
|
+
*/
|
|
3810
|
+
isFluidToViewport?: boolean;
|
|
3233
3811
|
/**
|
|
3234
3812
|
* Use minHeight in conjunction with constrainToViewport to keep the popover legible. Value in px.
|
|
3235
3813
|
*/
|
|
3236
3814
|
minHeight?: number;
|
|
3815
|
+
/**
|
|
3816
|
+
* Add margin to sides of the Popover Content. Margin to match the section margin values at each breakpoint.
|
|
3817
|
+
*/
|
|
3818
|
+
contentMargin?: boolean;
|
|
3819
|
+
/**
|
|
3820
|
+
* Removes all default padding from the content section of the Popover.
|
|
3821
|
+
*/
|
|
3822
|
+
isFullBleed?: boolean;
|
|
3823
|
+
/**
|
|
3824
|
+
* Used to add animations to the `RadixPopover.Content` .
|
|
3825
|
+
*/
|
|
3826
|
+
className?: string;
|
|
3237
3827
|
}
|
|
3238
3828
|
|
|
3239
3829
|
/**
|
|
3240
3830
|
* Use `Poster` to compose content on an image or video background. BT Brand Only.
|
|
3241
3831
|
*/
|
|
3242
|
-
declare const Poster:
|
|
3832
|
+
declare const Poster: ({ background, children, overlay, surface, ...props }: PosterProps) => React__default.JSX.Element;
|
|
3243
3833
|
interface PosterProps {
|
|
3244
3834
|
/**
|
|
3245
3835
|
* Poster background to overlay content on top of. Must be one of PosterImage or PosterVideo.
|
|
@@ -3260,7 +3850,7 @@ interface PosterProps {
|
|
|
3260
3850
|
surface?: "dark-neutral-02" | "light-neutral-01";
|
|
3261
3851
|
}
|
|
3262
3852
|
|
|
3263
|
-
declare const PosterImage:
|
|
3853
|
+
declare const PosterImage: ({ alt, anchor, loading, sizes, src, srcSet, ...props }: PosterImageProps) => React__default.JSX.Element;
|
|
3264
3854
|
interface PosterImageProps {
|
|
3265
3855
|
/**
|
|
3266
3856
|
* Alternative text for the PosterImage, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
|
|
@@ -3289,10 +3879,10 @@ interface PosterImageProps {
|
|
|
3289
3879
|
/**
|
|
3290
3880
|
* Contents of the PosterImage.
|
|
3291
3881
|
*/
|
|
3292
|
-
children?:
|
|
3882
|
+
children?: ReactNode;
|
|
3293
3883
|
}
|
|
3294
3884
|
|
|
3295
|
-
declare const PosterVideo:
|
|
3885
|
+
declare const PosterVideo: ({ anchor, autoPlay, children, loop, ...props }: PosterVideoProps) => React__default.JSX.Element;
|
|
3296
3886
|
interface PosterVideoProps {
|
|
3297
3887
|
/**
|
|
3298
3888
|
* Anchor point for the PosterVideo,
|
|
@@ -3319,7 +3909,7 @@ type ProgressBarIcons = "refresh" | "cross" | "tick";
|
|
|
3319
3909
|
/**
|
|
3320
3910
|
* Use `ProgressBar` to show the progress of a specific task within a page.
|
|
3321
3911
|
*/
|
|
3322
|
-
declare const ProgressBar:
|
|
3912
|
+
declare const ProgressBar: ({ state, value, isIndeterminate, headline, ariaLabel, action, title, description, displayValue, headlineWordWrap, ...props }: ProgressBarProps) => React__default.JSX.Element;
|
|
3323
3913
|
interface ProgressBarProps {
|
|
3324
3914
|
/**
|
|
3325
3915
|
* Label for screen readers.
|
|
@@ -3362,11 +3952,19 @@ interface ProgressBarProps {
|
|
|
3362
3952
|
action: () => void;
|
|
3363
3953
|
icon?: ProgressBarIcons;
|
|
3364
3954
|
};
|
|
3955
|
+
/**
|
|
3956
|
+
* Whether long words in headline should be wrapped.
|
|
3957
|
+
*/
|
|
3958
|
+
headlineWordWrap?: boolean;
|
|
3365
3959
|
}
|
|
3366
3960
|
|
|
3367
3961
|
/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
|
|
3368
|
-
declare const ProgressStepper:
|
|
3962
|
+
declare const ProgressStepper: ({ ref, children, size, isFluid, direction, isExpandable, invertLabelPosition, currentStep, ...props }: ProgressStepperProps) => React__default.JSX.Element;
|
|
3369
3963
|
interface ProgressStepperProps {
|
|
3964
|
+
/**
|
|
3965
|
+
* Ref to the underlying ol element.
|
|
3966
|
+
*/
|
|
3967
|
+
ref?: Ref<HTMLOListElement>;
|
|
3370
3968
|
/**
|
|
3371
3969
|
* Children of `<ProgressStepper />` should only contain `<ProgressStepperItem />`
|
|
3372
3970
|
*/
|
|
@@ -3399,7 +3997,7 @@ interface ProgressStepperProps {
|
|
|
3399
3997
|
|
|
3400
3998
|
type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";
|
|
3401
3999
|
|
|
3402
|
-
declare const ProgressStepperItem:
|
|
4000
|
+
declare const ProgressStepperItem: ({ title, titleHref, subTitle, direction, status, size, isFluid, invertLabelPosition, ariaLabel, onClick, previousStep, stepContent, isStepContentHidden, isViewing, ...props }: ProgressStepperItemProps) => React__default.JSX.Element;
|
|
3403
4001
|
interface ProgressStepperItemProps {
|
|
3404
4002
|
/**
|
|
3405
4003
|
* Determine a title for `<ProgressStepperItem />`
|
|
@@ -3465,8 +4063,12 @@ interface ProgressStepperItemProps {
|
|
|
3465
4063
|
}
|
|
3466
4064
|
|
|
3467
4065
|
/** Use `ProgressStepperOverflow` to wrap `ProgressStepperItem`s and allow overflow behaviour. */
|
|
3468
|
-
declare const ProgressStepperOverflow:
|
|
4066
|
+
declare const ProgressStepperOverflow: ({ ref, children, size, invertLabelPosition, offsetLeft, ...props }: ProgressStepperOverflowProps) => React__default.JSX.Element;
|
|
3469
4067
|
interface ProgressStepperOverflowProps extends Omit<ProgressStepperProps, "isFluid" | "isExpandable" | "direction"> {
|
|
4068
|
+
/**
|
|
4069
|
+
* Ref to the underlying ol element.
|
|
4070
|
+
*/
|
|
4071
|
+
ref?: Ref<HTMLOListElement>;
|
|
3470
4072
|
/**
|
|
3471
4073
|
* Children of `<ProgressStepperOverflow />` should only contain `<ProgressStepperItem />`
|
|
3472
4074
|
*/
|
|
@@ -3478,7 +4080,7 @@ interface ProgressStepperOverflowProps extends Omit<ProgressStepperProps, "isFlu
|
|
|
3478
4080
|
}
|
|
3479
4081
|
|
|
3480
4082
|
declare const useProgressStepperOverflow: ({ onLoadStep, increment, offsetLeft, }?: UseProgressStepperOverflowParams) => {
|
|
3481
|
-
stepperRef: React.
|
|
4083
|
+
stepperRef: React$1.RefObject<HTMLOListElement | null>;
|
|
3482
4084
|
onNextStep: () => void;
|
|
3483
4085
|
onPreviousStep: () => void;
|
|
3484
4086
|
onViewScroll: (direction: boolean) => void;
|
|
@@ -3497,7 +4099,7 @@ type EventType$3 = React__default.ChangeEvent<HTMLInputElement>;
|
|
|
3497
4099
|
/**
|
|
3498
4100
|
* Use `RadioCardGroup` to wrap and control `RadioCard` buttons and apply default values
|
|
3499
4101
|
*/
|
|
3500
|
-
declare const RadioCardGroup:
|
|
4102
|
+
declare const RadioCardGroup: ({ children, checkedValue, isDisabled, id, errorMessage, isRequired, helper, helperUnderLabel, label, labelSize, hideLabel, name, onBlur, onChange, layout, isFluid, width, ...props }: RadioCardGroupProps) => React__default.JSX.Element;
|
|
3501
4103
|
interface RadioCardGroupProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "supplementaryInfo" | "labelPosition"> {
|
|
3502
4104
|
/**
|
|
3503
4105
|
* Contents of the `RadioCardGroup`. Should only contain `RadioCardGroupCard`
|
|
@@ -3572,6 +4174,13 @@ type ContextProps$1 = {
|
|
|
3572
4174
|
};
|
|
3573
4175
|
|
|
3574
4176
|
interface RadioCardProps {
|
|
4177
|
+
/**
|
|
4178
|
+
* Ref to the underlying input element.
|
|
4179
|
+
*/
|
|
4180
|
+
ref?: Ref<HTMLInputElement>;
|
|
4181
|
+
/**
|
|
4182
|
+
* Custom content to display in the RadioCard.
|
|
4183
|
+
*/
|
|
3575
4184
|
children?: ReactElement;
|
|
3576
4185
|
/**
|
|
3577
4186
|
* ID for the`RadioCard`.
|
|
@@ -3630,8 +4239,12 @@ interface RadioCardProps {
|
|
|
3630
4239
|
/**
|
|
3631
4240
|
* Radio Card component.
|
|
3632
4241
|
*/
|
|
3633
|
-
declare const RadioCardGroupInput:
|
|
4242
|
+
declare const RadioCardGroupInput: ({ ref, icon, support, id, isDisabled, label, value, children, controlLocation, hideButton, ...props }: RadioCardGroupInputProps) => React__default.JSX.Element;
|
|
3634
4243
|
interface RadioCardGroupInputProps extends Omit<RadioCardProps, "name"> {
|
|
4244
|
+
/**
|
|
4245
|
+
* Ref to the underlying input element.
|
|
4246
|
+
*/
|
|
4247
|
+
ref?: Ref<HTMLInputElement>;
|
|
3635
4248
|
/**
|
|
3636
4249
|
* Determine the alignment the RadioButton.
|
|
3637
4250
|
*
|
|
@@ -3667,7 +4280,7 @@ type EventType$1 = React__default.ChangeEvent<HTMLInputElement>;
|
|
|
3667
4280
|
/**
|
|
3668
4281
|
* Use `RadioGroup` to wrap and control radio buttons and apply default values
|
|
3669
4282
|
*/
|
|
3670
|
-
declare const RadioGroup:
|
|
4283
|
+
declare const RadioGroup: ({ children, checkedValue, isDisabled, id, errorMessage, isRequired, helper, label, name, onBlur, onChange, size, ...props }: RadioGroupProps) => React__default.JSX.Element;
|
|
3671
4284
|
interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "supplementaryInfo" | "hideLabel" | "labelPosition"> {
|
|
3672
4285
|
/**
|
|
3673
4286
|
* Contents of the RadioGroup Should only contain `RadioGroupInput`
|
|
@@ -3676,7 +4289,7 @@ interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementTy
|
|
|
3676
4289
|
/**
|
|
3677
4290
|
* Value of the RadioButton that should be checked by default.
|
|
3678
4291
|
*/
|
|
3679
|
-
checkedValue
|
|
4292
|
+
checkedValue?: string;
|
|
3680
4293
|
/**
|
|
3681
4294
|
* Should all controls be disabled?
|
|
3682
4295
|
*/
|
|
@@ -3725,36 +4338,92 @@ type ContextProps = {
|
|
|
3725
4338
|
blurEvent: (event: EventType) => void;
|
|
3726
4339
|
changeEvent: (event: EventType) => void;
|
|
3727
4340
|
groupDisabled: boolean;
|
|
3728
|
-
checkedValue
|
|
4341
|
+
checkedValue?: string;
|
|
3729
4342
|
name: string;
|
|
3730
4343
|
size: "s" | "l";
|
|
3731
4344
|
};
|
|
3732
4345
|
|
|
3733
|
-
declare const RadioGroupButton:
|
|
4346
|
+
declare const RadioGroupButton: ({ ref, id, changeEvent, isDisabled, size, labelSize, checked, defaultChecked, radioButtonAlignment, name, blurEvent, value, label, helper, hideLabel, withMargin, isError, }: RadioGroupButtonProps) => React__default.JSX.Element;
|
|
3734
4347
|
interface RadioGroupButtonProps {
|
|
4348
|
+
/**
|
|
4349
|
+
* Ref to the underlying input element.
|
|
4350
|
+
*/
|
|
4351
|
+
ref?: Ref<HTMLInputElement>;
|
|
4352
|
+
/**
|
|
4353
|
+
* ID for the radio button.
|
|
4354
|
+
*/
|
|
3735
4355
|
id: string;
|
|
4356
|
+
/**
|
|
4357
|
+
* Label text for the radio button.
|
|
4358
|
+
*/
|
|
3736
4359
|
label: string;
|
|
4360
|
+
/**
|
|
4361
|
+
* Whether to visually hide the label.
|
|
4362
|
+
*/
|
|
3737
4363
|
hideLabel?: boolean;
|
|
4364
|
+
/**
|
|
4365
|
+
* Name attribute for the radio button.
|
|
4366
|
+
*/
|
|
3738
4367
|
name: ContextProps["name"];
|
|
4368
|
+
/**
|
|
4369
|
+
* Whether to add margin to the radio button.
|
|
4370
|
+
*/
|
|
3739
4371
|
withMargin?: boolean;
|
|
4372
|
+
/**
|
|
4373
|
+
* Whether the radio button is checked by default.
|
|
4374
|
+
*/
|
|
3740
4375
|
defaultChecked?: boolean;
|
|
4376
|
+
/**
|
|
4377
|
+
* Whether the radio button is checked (controlled).
|
|
4378
|
+
*/
|
|
3741
4379
|
checked?: boolean;
|
|
4380
|
+
/**
|
|
4381
|
+
* Value of the radio button.
|
|
4382
|
+
*/
|
|
3742
4383
|
value?: string;
|
|
4384
|
+
/**
|
|
4385
|
+
* Whether the radio button is disabled.
|
|
4386
|
+
*/
|
|
3743
4387
|
isDisabled?: boolean;
|
|
4388
|
+
/**
|
|
4389
|
+
* Helper text for the radio button.
|
|
4390
|
+
*/
|
|
3744
4391
|
helper?: string;
|
|
4392
|
+
/**
|
|
4393
|
+
* Size of the label text.
|
|
4394
|
+
*/
|
|
3745
4395
|
labelSize?: ContextProps["size"];
|
|
4396
|
+
/**
|
|
4397
|
+
* Size of the radio button.
|
|
4398
|
+
*/
|
|
3746
4399
|
size?: ContextProps["size"];
|
|
4400
|
+
/**
|
|
4401
|
+
* Alignment of the radio button.
|
|
4402
|
+
*/
|
|
3747
4403
|
radioButtonAlignment?: "top" | "center";
|
|
4404
|
+
/**
|
|
4405
|
+
* Change event handler.
|
|
4406
|
+
*/
|
|
3748
4407
|
changeEvent?: ContextProps["changeEvent"];
|
|
4408
|
+
/**
|
|
4409
|
+
* Blur event handler.
|
|
4410
|
+
*/
|
|
3749
4411
|
blurEvent?: ContextProps["blurEvent"];
|
|
4412
|
+
/**
|
|
4413
|
+
* Whether the radio button is in an error state.
|
|
4414
|
+
*/
|
|
3750
4415
|
isError?: boolean;
|
|
3751
4416
|
}
|
|
3752
4417
|
|
|
3753
4418
|
/**
|
|
3754
4419
|
* Radio Button component.
|
|
3755
4420
|
*/
|
|
3756
|
-
declare const RadioGroupInput:
|
|
4421
|
+
declare const RadioGroupInput: ({ ref, helper, id, isDisabled, label, radioButtonAlignment, value, isError, ...props }: RadioGroupInputProps) => React__default.JSX.Element;
|
|
3757
4422
|
interface RadioGroupInputProps {
|
|
4423
|
+
/**
|
|
4424
|
+
* Ref to the underlying input element.
|
|
4425
|
+
*/
|
|
4426
|
+
ref?: Ref<HTMLInputElement>;
|
|
3758
4427
|
/**
|
|
3759
4428
|
* Determine the alignment the RadioButton.
|
|
3760
4429
|
*
|
|
@@ -3793,7 +4462,7 @@ interface RadioGroupInputProps {
|
|
|
3793
4462
|
/**
|
|
3794
4463
|
* Use `Rule` to display a horizontal or vertical rule.
|
|
3795
4464
|
*/
|
|
3796
|
-
declare const Rule:
|
|
4465
|
+
declare const Rule: ({ orientation, ...props }: RuleProps) => React__default.JSX.Element;
|
|
3797
4466
|
interface RuleProps {
|
|
3798
4467
|
orientation?: "horizontal" | "vertical";
|
|
3799
4468
|
}
|
|
@@ -3801,7 +4470,7 @@ interface RuleProps {
|
|
|
3801
4470
|
/**
|
|
3802
4471
|
* Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
|
|
3803
4472
|
*/
|
|
3804
|
-
declare const ScrollToTop:
|
|
4473
|
+
declare const ScrollToTop: ({ appear, isFixed, fill, zIndex, focusColor, ...props }: ScrollToTopProps) => React__default.JSX.Element;
|
|
3805
4474
|
interface ScrollToTopProps {
|
|
3806
4475
|
/**
|
|
3807
4476
|
* If true, the button will stick to the bottom right corner of the screen.
|
|
@@ -3829,7 +4498,7 @@ interface ScrollToTopProps {
|
|
|
3829
4498
|
/**
|
|
3830
4499
|
* Use `Section` to compose content into vertical page layouts.
|
|
3831
4500
|
*/
|
|
3832
|
-
declare const Section:
|
|
4501
|
+
declare const Section: ({ children, isFullWidth, isDebugVisible, isExtended, id, ...props }: SectionProps) => React__default.JSX.Element;
|
|
3833
4502
|
interface SectionProps extends ExtentableContainer {
|
|
3834
4503
|
/**
|
|
3835
4504
|
* Content to display in the Section.
|
|
@@ -3851,7 +4520,7 @@ interface SectionProps extends ExtentableContainer {
|
|
|
3851
4520
|
}
|
|
3852
4521
|
|
|
3853
4522
|
/** Use `Select` to choose from a dropdown list of options. */
|
|
3854
|
-
declare const Select: React__default.
|
|
4523
|
+
declare const Select: ({ isRequired, isDisabled, placeholder, label, value, ariaLabel, options, onOpenChange, isDefaultOpen, defaultValue, errorMessage, id, size, helper, hideLabel, name, width, isFluid, onBlur, onFocus, onChange, open, disclosureTitle, disclosureText, onClickDisclosure, ...props }: SelectProps) => React__default.JSX.Element;
|
|
3855
4524
|
interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelSize" | "labelPosition"> {
|
|
3856
4525
|
/**
|
|
3857
4526
|
* Name for the Select.
|
|
@@ -3937,9 +4606,9 @@ interface SelectProps extends Omit<FormControlProps, "children" | "elementType"
|
|
|
3937
4606
|
/**
|
|
3938
4607
|
* Use `SiteFooter` to display information at the bottom of a page.
|
|
3939
4608
|
*/
|
|
3940
|
-
declare const SiteFooter:
|
|
3941
|
-
declare const SiteFooterItemGroup:
|
|
3942
|
-
declare const SiteFooterItem:
|
|
4609
|
+
declare const SiteFooter: ({ children, currentYear, logoLabel, main, siteName, ...props }: SiteFooterProps) => React__default.JSX.Element;
|
|
4610
|
+
declare const SiteFooterItemGroup: (props: SiteFooterItemGroupProps) => React__default.JSX.Element;
|
|
4611
|
+
declare const SiteFooterItem: ({ children, href, onClick, ...props }: SiteFooterItemProps) => React__default.JSX.Element;
|
|
3943
4612
|
interface SiteFooterItemGroupProps {
|
|
3944
4613
|
/**
|
|
3945
4614
|
* Contents of the SiteFooterItemGroup Must be SiteFooterItem components.
|
|
@@ -3991,8 +4660,8 @@ interface SiteFooterProps {
|
|
|
3991
4660
|
/**
|
|
3992
4661
|
* Use `SiteFooterV2` to display information at the bottom of a page.
|
|
3993
4662
|
*/
|
|
3994
|
-
declare const SiteFooterV2:
|
|
3995
|
-
interface SiteFooterV2Props {
|
|
4663
|
+
declare const SiteFooterV2: ({ children, slogan, hideTopBorder, isExtended, ...props }: SiteFooterV2Props) => React__default.JSX.Element;
|
|
4664
|
+
interface SiteFooterV2Props extends ExtentableContainer {
|
|
3996
4665
|
/**
|
|
3997
4666
|
* Content of the SiteFooterV2. Must include SiteFooterV2Utility component and optional SiteFooterV2Main.
|
|
3998
4667
|
*/
|
|
@@ -4008,9 +4677,9 @@ interface SiteFooterV2Props {
|
|
|
4008
4677
|
hideTopBorder?: boolean;
|
|
4009
4678
|
}
|
|
4010
4679
|
|
|
4011
|
-
declare const SiteFooterV2Main:
|
|
4012
|
-
declare const SiteFooterV2ItemGroup:
|
|
4013
|
-
declare const SiteFooterV2Item:
|
|
4680
|
+
declare const SiteFooterV2Main: ({ children, columns, ...props }: SiteFooterV2MainProps) => React__default.JSX.Element;
|
|
4681
|
+
declare const SiteFooterV2ItemGroup: ({ hideDisclosure, ...props }: SiteFooterV2ItemGroupProps) => React__default.JSX.Element;
|
|
4682
|
+
declare const SiteFooterV2Item: ({ children, href, onClick, ...props }: SiteFooterV2ItemProps) => React__default.JSX.Element;
|
|
4014
4683
|
interface SiteFooterV2MainProps {
|
|
4015
4684
|
/**
|
|
4016
4685
|
* Contents of the SiteFooterV2Main. Must be SiteFooterV2ItemGroup components.
|
|
@@ -4053,7 +4722,7 @@ interface SiteFooterV2ItemProps {
|
|
|
4053
4722
|
/**
|
|
4054
4723
|
* Use `SiteFooterV2.Utility` to display information at the bottom of a page.
|
|
4055
4724
|
*/
|
|
4056
|
-
declare const SiteFooterV2Utility:
|
|
4725
|
+
declare const SiteFooterV2Utility: ({ copyrightYear, children, socialLinks, brand, contentSlot, ...props }: SiteFooterV2UtilityProps) => React__default.JSX.Element;
|
|
4057
4726
|
declare const socialIcons: readonly [string, string, string, string, string];
|
|
4058
4727
|
declare const subBrands: readonly ["redcare", "wholesale", "ee"];
|
|
4059
4728
|
interface SiteFooterV2UtilityProps {
|
|
@@ -4091,7 +4760,7 @@ interface SiteFooterV2UtilityProps {
|
|
|
4091
4760
|
/**
|
|
4092
4761
|
* Use `SiteHeaderV2` to display brand logo and navigation at the top of a page.
|
|
4093
4762
|
*/
|
|
4094
|
-
declare const SiteHeaderV2:
|
|
4763
|
+
declare const SiteHeaderV2: ({ children, basket, hasLogin, isTransparent, loginHref, logoOnClick, loginOnClick, loginTitle, logoHref, logoLabel, search, subBrand, ...props }: SiteHeaderV2Props) => React__default.JSX.Element;
|
|
4095
4764
|
interface SiteHeaderV2Props {
|
|
4096
4765
|
/**
|
|
4097
4766
|
* Contents of the SiteHeaderV2 Must be SiteHeaderV2NavItem or
|
|
@@ -4144,7 +4813,7 @@ interface SiteHeaderV2Props {
|
|
|
4144
4813
|
subBrand?: (typeof subBrands$1)[number];
|
|
4145
4814
|
}
|
|
4146
4815
|
|
|
4147
|
-
declare const SiteHeaderV2Column:
|
|
4816
|
+
declare const SiteHeaderV2Column: ({ children, ...props }: SiteHeaderV2ColumnProps) => React__default.JSX.Element;
|
|
4148
4817
|
interface SiteHeaderV2ColumnProps {
|
|
4149
4818
|
/**
|
|
4150
4819
|
* Contents of the Column. Must be SiteHeaderV2ItemGroup components.
|
|
@@ -4152,7 +4821,7 @@ interface SiteHeaderV2ColumnProps {
|
|
|
4152
4821
|
children: ReactNode;
|
|
4153
4822
|
}
|
|
4154
4823
|
|
|
4155
|
-
declare const SiteHeaderV2Item:
|
|
4824
|
+
declare const SiteHeaderV2Item: ({ children, href, onClick, ...props }: SiteHeaderV2ItemProps) => React__default.JSX.Element;
|
|
4156
4825
|
interface SiteHeaderV2ItemProps {
|
|
4157
4826
|
/**
|
|
4158
4827
|
* Contents of the Item. Usually text to be displayed in the Item link.
|
|
@@ -4168,12 +4837,15 @@ interface SiteHeaderV2ItemProps {
|
|
|
4168
4837
|
onClick?: () => void;
|
|
4169
4838
|
}
|
|
4170
4839
|
|
|
4171
|
-
declare const SiteHeaderV2ItemGroup:
|
|
4840
|
+
declare const SiteHeaderV2ItemGroup: ({ children, href, title, subtitle, onClick, viewAllTitle, ...props }: SiteHeaderV2ItemGroupProps) => JSX.Element;
|
|
4172
4841
|
interface SiteHeaderV2ItemGroupProps {
|
|
4173
4842
|
/**
|
|
4174
4843
|
* Contents of the ItemGroup Must be Item components.
|
|
4175
4844
|
*/
|
|
4176
4845
|
children: ReactNode;
|
|
4846
|
+
/**
|
|
4847
|
+
* Optional subtitle text for the ItemGroup.
|
|
4848
|
+
*/
|
|
4177
4849
|
subtitle?: string;
|
|
4178
4850
|
/**
|
|
4179
4851
|
* A top-level URL for the ItemGroup to link to.
|
|
@@ -4195,7 +4867,7 @@ interface SiteHeaderV2ItemGroupProps {
|
|
|
4195
4867
|
onClick?: () => void;
|
|
4196
4868
|
}
|
|
4197
4869
|
|
|
4198
|
-
declare const SiteHeaderV2NavItem:
|
|
4870
|
+
declare const SiteHeaderV2NavItem: ({ children, href, isCurrent, onClick, title, isPrimary, opensFirstWithPanel, subTitle, ...props }: SiteHeaderV2NavItemProps) => React__default.JSX.Element;
|
|
4199
4871
|
interface SiteHeaderV2NavItemProps {
|
|
4200
4872
|
/**
|
|
4201
4873
|
* Contents of the NavItem. Must be SiteHeaderV2ItemGroup or
|
|
@@ -4230,7 +4902,55 @@ interface SiteHeaderV2NavItemProps {
|
|
|
4230
4902
|
subTitle?: string;
|
|
4231
4903
|
}
|
|
4232
4904
|
|
|
4233
|
-
declare const
|
|
4905
|
+
declare const SiteHeaderV2SubNavItem: ({ children, isDefaultItem, href, onClick, offsetXL, subTitle, title, viewAllTitle, icon, ...props }: SiteHeaderV2SubNavItemProps) => React__default.JSX.Element;
|
|
4906
|
+
interface SiteHeaderV2SubNavItemProps {
|
|
4907
|
+
/**
|
|
4908
|
+
* Contents of the SubNavItem. Must be SiteHeaderV2ItemGroup or
|
|
4909
|
+
* SiteHeaderV2Column components.
|
|
4910
|
+
*/
|
|
4911
|
+
children?: ReactNode;
|
|
4912
|
+
/**
|
|
4913
|
+
* Should the SubNavItem be the default open item in a
|
|
4914
|
+
* SiteHeaderV2NavItemWithSubNav? If not specified, the default open item will
|
|
4915
|
+
* be set automatically.
|
|
4916
|
+
*/
|
|
4917
|
+
isDefaultItem?: boolean;
|
|
4918
|
+
/**
|
|
4919
|
+
* Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
|
|
4920
|
+
* to close off any empty space between items due to content size.
|
|
4921
|
+
*/
|
|
4922
|
+
offsetXL?: "24" | "48";
|
|
4923
|
+
/**
|
|
4924
|
+
* A URL to link to when the SubNavItem is clicked or touched. Only applies if
|
|
4925
|
+
* `children` are not present.
|
|
4926
|
+
*/
|
|
4927
|
+
href?: string;
|
|
4928
|
+
/**
|
|
4929
|
+
* Optional subtitle text for the SubNavItem.
|
|
4930
|
+
*/
|
|
4931
|
+
subTitle?: string;
|
|
4932
|
+
/**
|
|
4933
|
+
* Title text for the SubNavItem.
|
|
4934
|
+
*/
|
|
4935
|
+
title: string;
|
|
4936
|
+
/**
|
|
4937
|
+
* Text to display in top-level link inside the SubNavItem panel. Only
|
|
4938
|
+
* applies if both `children` are present and `href` is true. If not
|
|
4939
|
+
* provided, top-level link text will be automatically generated from `title`.
|
|
4940
|
+
*/
|
|
4941
|
+
viewAllTitle?: string;
|
|
4942
|
+
/**
|
|
4943
|
+
* Optional icon to display with the SubNavItem.
|
|
4944
|
+
*/
|
|
4945
|
+
icon?: string;
|
|
4946
|
+
/**
|
|
4947
|
+
* On click handler.
|
|
4948
|
+
*/
|
|
4949
|
+
onClick?: () => void;
|
|
4950
|
+
}
|
|
4951
|
+
|
|
4952
|
+
declare const SiteHeaderV2NavItemWithSubNav: ({ href, slot1, slot2, slot3, slot4, slot5, slot6, subTitle, title, onViewAllClick, isPrimary, opensFirstWithPanel, viewAllTitle, ...props }: SiteHeaderV2NavItemWithSubNavProps) => React__default.JSX.Element;
|
|
4953
|
+
type slotType = ReactElement<SiteHeaderV2SubNavItemProps>;
|
|
4234
4954
|
interface SiteHeaderV2NavItemWithSubNavProps {
|
|
4235
4955
|
/**
|
|
4236
4956
|
* The URL to link to when a top-level link inside the NavItemWithSubNav panel
|
|
@@ -4241,28 +4961,28 @@ interface SiteHeaderV2NavItemWithSubNavProps {
|
|
|
4241
4961
|
* Content to be displayed in the first slot of the NavItemWithSubNav. Must be
|
|
4242
4962
|
* a single SiteHeaderV2SubNavItem component.
|
|
4243
4963
|
*/
|
|
4244
|
-
slot1:
|
|
4964
|
+
slot1: slotType;
|
|
4245
4965
|
/**
|
|
4246
4966
|
* Content to be displayed in the second slot of the NavItemWithSubNav. Must
|
|
4247
4967
|
* be a single SiteHeaderV2SubNavItem component.
|
|
4248
4968
|
*/
|
|
4249
|
-
slot2?:
|
|
4969
|
+
slot2?: slotType;
|
|
4250
4970
|
/**
|
|
4251
4971
|
* Content to be displayed in the third slot of the NavItemWithSubNav. Must be
|
|
4252
4972
|
* a single SiteHeaderV2SubNavItem component.
|
|
4253
4973
|
*/
|
|
4254
|
-
slot3?:
|
|
4974
|
+
slot3?: slotType;
|
|
4255
4975
|
/**
|
|
4256
4976
|
* Content to be displayed in the fourth slot of the NavItemWithSubNav. Must be
|
|
4257
4977
|
* a single SiteHeaderV2SubNavItem component.
|
|
4258
4978
|
*/
|
|
4259
|
-
slot4?:
|
|
4260
|
-
slot5?:
|
|
4261
|
-
slot6?:
|
|
4979
|
+
slot4?: slotType;
|
|
4980
|
+
slot5?: slotType;
|
|
4981
|
+
slot6?: slotType;
|
|
4262
4982
|
/**
|
|
4263
4983
|
* Title text to display inside the NavItemWithSubNav panel.
|
|
4264
4984
|
*/
|
|
4265
|
-
subTitle?: string;
|
|
4985
|
+
subTitle?: string | null;
|
|
4266
4986
|
/**
|
|
4267
4987
|
* Top-level text to display in the NavItemWithSubNav.
|
|
4268
4988
|
*/
|
|
@@ -4281,7 +5001,7 @@ interface SiteHeaderV2NavItemWithSubNavProps {
|
|
|
4281
5001
|
opensFirstWithPanel?: boolean;
|
|
4282
5002
|
}
|
|
4283
5003
|
|
|
4284
|
-
declare const SiteHeaderV2NodeItem:
|
|
5004
|
+
declare const SiteHeaderV2NodeItem: ({ children, ...props }: SiteHeaderV2NodeItemProps) => React__default.JSX.Element;
|
|
4285
5005
|
interface SiteHeaderV2NodeItemProps {
|
|
4286
5006
|
/**
|
|
4287
5007
|
* Content to display with `SiteHeaderV2NodeItem`
|
|
@@ -4289,56 +5009,12 @@ interface SiteHeaderV2NodeItemProps {
|
|
|
4289
5009
|
children?: ReactNode;
|
|
4290
5010
|
}
|
|
4291
5011
|
|
|
4292
|
-
declare const
|
|
4293
|
-
interface SiteHeaderV2SubNavItemProps {
|
|
4294
|
-
/**
|
|
4295
|
-
* Contents of the SubNavItem. Must be SiteHeaderV2ItemGroup or
|
|
4296
|
-
* SiteHeaderV2Column components.
|
|
4297
|
-
*/
|
|
4298
|
-
children?: ReactNode;
|
|
4299
|
-
/**
|
|
4300
|
-
* Should the SubNavItem be the default open item in a
|
|
4301
|
-
* SiteHeaderV2NavItemWithSubNav? If not specified, the default open item will
|
|
4302
|
-
* be set automatically.
|
|
4303
|
-
*/
|
|
4304
|
-
isDefaultItem?: boolean;
|
|
4305
|
-
/**
|
|
4306
|
-
* Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
|
|
4307
|
-
* to close off any empty space between items due to content size.
|
|
4308
|
-
*/
|
|
4309
|
-
offsetXL?: "24" | "48";
|
|
4310
|
-
/**
|
|
4311
|
-
* A URL to link to when the SubNavItem is clicked or touched. Only applies if
|
|
4312
|
-
* `children` are not present.
|
|
4313
|
-
*/
|
|
4314
|
-
href?: string;
|
|
4315
|
-
/**
|
|
4316
|
-
* Optional subtitle text for the SubNavItem.
|
|
4317
|
-
*/
|
|
4318
|
-
subTitle?: string;
|
|
4319
|
-
/**
|
|
4320
|
-
* Title text for the SubNavItem.
|
|
4321
|
-
*/
|
|
4322
|
-
title: string;
|
|
4323
|
-
/**
|
|
4324
|
-
* Text to display in top-level link inside the SubNavItem panel. Only
|
|
4325
|
-
* applies if both `children` are present and `href` is true. If not
|
|
4326
|
-
* provided, top-level link text will be automatically generated from `title`.
|
|
4327
|
-
*/
|
|
4328
|
-
viewAllTitle?: string;
|
|
4329
|
-
icon?: string;
|
|
4330
|
-
/**
|
|
4331
|
-
* On click handler.
|
|
4332
|
-
*/
|
|
4333
|
-
onClick?: () => void;
|
|
4334
|
-
}
|
|
4335
|
-
|
|
4336
|
-
declare const SiteHeaderV2VerticalDivider: () => JSX.Element;
|
|
5012
|
+
declare const SiteHeaderV2VerticalDivider: () => React__default.JSX.Element;
|
|
4337
5013
|
|
|
4338
5014
|
/**
|
|
4339
5015
|
* Use `Skeleton` to display a placeholder preview of your page before the data gets loaded to reduce load-time frustration.
|
|
4340
5016
|
*/
|
|
4341
|
-
declare const Skeleton:
|
|
5017
|
+
declare const Skeleton: ({ width, height, isCircle, animation, ...props }: SkeletonProps) => React__default.JSX.Element;
|
|
4342
5018
|
interface SkeletonProps {
|
|
4343
5019
|
/**
|
|
4344
5020
|
* Animation for `Skeleton`.
|
|
@@ -4359,7 +5035,7 @@ interface SkeletonProps {
|
|
|
4359
5035
|
}
|
|
4360
5036
|
|
|
4361
5037
|
/** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
|
|
4362
|
-
declare const SkipLink:
|
|
5038
|
+
declare const SkipLink: ({ children, ...props }: SkipLinkProps) => React__default.JSX.Element;
|
|
4363
5039
|
interface SkipLinkProps {
|
|
4364
5040
|
/**
|
|
4365
5041
|
* Links to display in the SkipLinkItem.
|
|
@@ -4367,7 +5043,7 @@ interface SkipLinkProps {
|
|
|
4367
5043
|
children?: ReactNode;
|
|
4368
5044
|
}
|
|
4369
5045
|
|
|
4370
|
-
declare const SkipLinkItem:
|
|
5046
|
+
declare const SkipLinkItem: ({ href, id, label, onClick, }: SkipLinkItemProps) => React__default.JSX.Element;
|
|
4371
5047
|
interface SkipLinkItemProps {
|
|
4372
5048
|
/**
|
|
4373
5049
|
* The label to display for SkipLinkItem.
|
|
@@ -4387,10 +5063,58 @@ interface SkipLinkItemProps {
|
|
|
4387
5063
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
4388
5064
|
}
|
|
4389
5065
|
|
|
5066
|
+
type SpacingType = "padding" | "margin";
|
|
5067
|
+
type SpacingSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
|
|
5068
|
+
type ResponsiveSpacing = Partial<Record<ArcBreakpointSizes, SpacingSize>>;
|
|
5069
|
+
|
|
5070
|
+
/**
|
|
5071
|
+
* Use `Spacing` to apply responsive padding or margin to its children.
|
|
5072
|
+
* Supports all axes (top, right, bottom, left) with breakpoint-specific values.
|
|
5073
|
+
*/
|
|
5074
|
+
declare const Spacing: React__default.FC<SpacingProps>;
|
|
5075
|
+
interface SpacingProps {
|
|
5076
|
+
/**
|
|
5077
|
+
* The content to apply spacing to
|
|
5078
|
+
*/
|
|
5079
|
+
children: React__default.ReactNode;
|
|
5080
|
+
/**
|
|
5081
|
+
* Whether to apply padding or margin
|
|
5082
|
+
*/
|
|
5083
|
+
type?: SpacingType;
|
|
5084
|
+
/**
|
|
5085
|
+
* Spacing for the top edge
|
|
5086
|
+
*/
|
|
5087
|
+
top?: ResponsiveSpacing;
|
|
5088
|
+
/**
|
|
5089
|
+
* Spacing for the right edge
|
|
5090
|
+
*/
|
|
5091
|
+
right?: ResponsiveSpacing;
|
|
5092
|
+
/**
|
|
5093
|
+
* Spacing for the bottom edge
|
|
5094
|
+
*/
|
|
5095
|
+
bottom?: ResponsiveSpacing;
|
|
5096
|
+
/**
|
|
5097
|
+
* Spacing for the left edge
|
|
5098
|
+
*/
|
|
5099
|
+
left?: ResponsiveSpacing;
|
|
5100
|
+
/**
|
|
5101
|
+
* Spacing for both left and right edges
|
|
5102
|
+
*/
|
|
5103
|
+
x?: ResponsiveSpacing;
|
|
5104
|
+
/**
|
|
5105
|
+
* Spacing for both top and bottom edges
|
|
5106
|
+
*/
|
|
5107
|
+
y?: ResponsiveSpacing;
|
|
5108
|
+
/**
|
|
5109
|
+
* Spacing for all edges
|
|
5110
|
+
*/
|
|
5111
|
+
all?: ResponsiveSpacing;
|
|
5112
|
+
}
|
|
5113
|
+
|
|
4390
5114
|
/**
|
|
4391
5115
|
* Use `Spinner` to display a loading state.
|
|
4392
5116
|
*/
|
|
4393
|
-
declare const Spinner:
|
|
5117
|
+
declare const Spinner: ({ size, color, ...props }: SpinnerProps) => React__default.JSX.Element;
|
|
4394
5118
|
type SpinnerSize = "s" | "m" | "l" | "xl" | "xxl";
|
|
4395
5119
|
interface SpinnerProps {
|
|
4396
5120
|
/**
|
|
@@ -4404,7 +5128,7 @@ interface SpinnerProps {
|
|
|
4404
5128
|
}
|
|
4405
5129
|
|
|
4406
5130
|
/** Use `Switch` to allow users to immediately toggle between two states. */
|
|
4407
|
-
declare const Switch:
|
|
5131
|
+
declare const Switch: ({ defaultChecked, onCheckedChange, label, labelPosition, name, onBlur, value, isDisabled, errorMessage, id, size, onStatusText, offStatusText, hideLabel, ariaLabel, ...props }: SwitchProps) => React__default.JSX.Element;
|
|
4408
5132
|
interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "helpUnderLabel" | "supplementaryInfo" | "labelSize"> {
|
|
4409
5133
|
/**
|
|
4410
5134
|
* Hide Label above toggle?
|
|
@@ -4457,7 +5181,7 @@ interface SwitchProps extends Omit<FormControlProps, "children" | "elementType"
|
|
|
4457
5181
|
}
|
|
4458
5182
|
|
|
4459
5183
|
/** Use `TabbedBanner` to combine a banner layout with `ContentSwitcher` and `ContentSwitcherDropdown`, allowing users to switch between related content sections. */
|
|
4460
|
-
declare const TabbedBanner:
|
|
5184
|
+
declare const TabbedBanner: ({ tabs, defaultValue, minHeight, minHeightM, minHeightL, minHeightXL, ...props }: TabbedBannerProps) => React__default.JSX.Element;
|
|
4461
5185
|
interface TabbedBannerProps {
|
|
4462
5186
|
/**
|
|
4463
5187
|
* Determine what tabs to render. They need both a `value` and `label` prop
|
|
@@ -4494,7 +5218,7 @@ interface TabbedBannerProps {
|
|
|
4494
5218
|
}
|
|
4495
5219
|
|
|
4496
5220
|
/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
|
|
4497
|
-
declare const Tabs:
|
|
5221
|
+
declare const Tabs: ({ children, defaultValue, onValueChange, activationMode, ...props }: TabsProps) => React__default.JSX.Element;
|
|
4498
5222
|
interface TabsProps {
|
|
4499
5223
|
/**
|
|
4500
5224
|
* Render children
|
|
@@ -4514,8 +5238,12 @@ interface TabsProps {
|
|
|
4514
5238
|
activationMode?: "automatic" | "manual";
|
|
4515
5239
|
}
|
|
4516
5240
|
|
|
4517
|
-
declare const TabsItem:
|
|
5241
|
+
declare const TabsItem: ({ label, value, icon, iconActive, ref, onClick, onFocus, ...props }: TabsItemProps) => React__default.JSX.Element;
|
|
4518
5242
|
interface TabsItemProps {
|
|
5243
|
+
/**
|
|
5244
|
+
* Ref to the underlying button element.
|
|
5245
|
+
*/
|
|
5246
|
+
ref?: Ref<HTMLButtonElement>;
|
|
4519
5247
|
/**
|
|
4520
5248
|
* Label to display on the Tab
|
|
4521
5249
|
*/
|
|
@@ -4532,9 +5260,17 @@ interface TabsItemProps {
|
|
|
4532
5260
|
* Determine what to display when `Tab` is active
|
|
4533
5261
|
*/
|
|
4534
5262
|
iconActive?: string;
|
|
5263
|
+
/**
|
|
5264
|
+
* Click handler
|
|
5265
|
+
*/
|
|
5266
|
+
onClick?: () => void;
|
|
5267
|
+
/**
|
|
5268
|
+
* Focus handler
|
|
5269
|
+
*/
|
|
5270
|
+
onFocus?: () => void;
|
|
4535
5271
|
}
|
|
4536
5272
|
|
|
4537
|
-
declare const TabsContent:
|
|
5273
|
+
declare const TabsContent: ({ children, value, hidden, forceMount, ...props }: TabsContentProps) => React__default.JSX.Element;
|
|
4538
5274
|
interface TabsContentProps {
|
|
4539
5275
|
/**
|
|
4540
5276
|
* Content to display
|
|
@@ -4554,7 +5290,7 @@ interface TabsContentProps {
|
|
|
4554
5290
|
forceMount?: boolean;
|
|
4555
5291
|
}
|
|
4556
5292
|
|
|
4557
|
-
declare const TabsList:
|
|
5293
|
+
declare const TabsList: ({ children, type, isJustified, ariaLabel, ...props }: TabsListProps) => React__default.JSX.Element;
|
|
4558
5294
|
interface TabsListProps {
|
|
4559
5295
|
/**
|
|
4560
5296
|
* Contents of the `Tabs` Should contain `Tab`
|
|
@@ -4577,7 +5313,7 @@ interface TabsListProps {
|
|
|
4577
5313
|
/**
|
|
4578
5314
|
* Use `Tag` to promote features and manage filtering.
|
|
4579
5315
|
*/
|
|
4580
|
-
declare const Tag:
|
|
5316
|
+
declare const Tag: ({ children, isRemovable, link, icon, onClick, onRemove, title, ...props }: TagProps) => React__default.JSX.Element;
|
|
4581
5317
|
interface TagProps {
|
|
4582
5318
|
/**
|
|
4583
5319
|
* Content to render within the Tag
|
|
@@ -4612,7 +5348,7 @@ interface TagProps {
|
|
|
4612
5348
|
/**
|
|
4613
5349
|
* Use `Text` to display text.
|
|
4614
5350
|
*/
|
|
4615
|
-
declare const Text:
|
|
5351
|
+
declare const Text: ({ align, children, id, isInline, isMeasured, size, tone, elementType, ...props }: TextProps) => React__default.JSX.Element;
|
|
4616
5352
|
type Tone = "default" | "supporting" | "muted";
|
|
4617
5353
|
type TextSize = "xs" | "s" | "m" | "l";
|
|
4618
5354
|
interface TextProps {
|
|
@@ -4651,8 +5387,12 @@ interface TextProps {
|
|
|
4651
5387
|
}
|
|
4652
5388
|
|
|
4653
5389
|
/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
|
|
4654
|
-
declare const TextArea:
|
|
5390
|
+
declare const TextArea: ({ ref, defaultValue, errorMessage, helper, hideLabel, id, resize, isDisabled, isReadOnly, isRequired, showCharacterCount, label, labelSize, maxLength, name, onBlur, onFocus, onChange, onClickDisclosure, value, disclosureTitle, disclosureText, width, autoComplete, minHeight, maxHeight, isErrorAlert, ...props }: TextAreaProps) => React__default.JSX.Element;
|
|
4655
5391
|
interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "labelPosition"> {
|
|
5392
|
+
/**
|
|
5393
|
+
* Ref to the underlying textarea element
|
|
5394
|
+
*/
|
|
5395
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
4656
5396
|
/**
|
|
4657
5397
|
* Uncontrolled default value of the TextArea. If the TextArea is controlled
|
|
4658
5398
|
* via `value`/`onChange`, `defaultValue` will be ignored.
|
|
@@ -4730,7 +5470,72 @@ interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType
|
|
|
4730
5470
|
maxHeight?: string;
|
|
4731
5471
|
}
|
|
4732
5472
|
|
|
4733
|
-
|
|
5473
|
+
/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
|
|
5474
|
+
declare const Tooltip: ({ children, side, sideOffset, align, alignContent, title, supportingCopy, icon, ariaLabel, maxWidth, delayDuration, open, onOpenChange, asChild, zIndex, ...props }: TooltipProps) => React__default.JSX.Element;
|
|
5475
|
+
interface TooltipProps {
|
|
5476
|
+
/**
|
|
5477
|
+
* Content to render within Tooltip
|
|
5478
|
+
*/
|
|
5479
|
+
children?: React__default.ReactNode;
|
|
5480
|
+
/**
|
|
5481
|
+
* The preferred side of the anchor to render against when open
|
|
5482
|
+
*/
|
|
5483
|
+
side?: "left" | "right" | "bottom" | "top";
|
|
5484
|
+
/**
|
|
5485
|
+
* The distance in pixels from the anchor
|
|
5486
|
+
*/
|
|
5487
|
+
sideOffset?: 8 | 16 | 32;
|
|
5488
|
+
/**
|
|
5489
|
+
* The preferred alignment against the anchor. May change when collisions occur.
|
|
5490
|
+
*/
|
|
5491
|
+
align?: "start" | "center" | "end";
|
|
5492
|
+
/**
|
|
5493
|
+
* Alignment for content within the tooltip
|
|
5494
|
+
*/
|
|
5495
|
+
alignContent?: "start" | "center" | "end";
|
|
5496
|
+
/**
|
|
5497
|
+
* Aria label for accessibility
|
|
5498
|
+
*/
|
|
5499
|
+
ariaLabel?: string;
|
|
5500
|
+
/**
|
|
5501
|
+
* The main title text displayed within the tooltip.
|
|
5502
|
+
*/
|
|
5503
|
+
title: string;
|
|
5504
|
+
/**
|
|
5505
|
+
* Additional supporting text displayed below the title, if provided.
|
|
5506
|
+
*/
|
|
5507
|
+
supportingCopy?: string;
|
|
5508
|
+
/**
|
|
5509
|
+
* Icon displayed next to the tooltip title or content.
|
|
5510
|
+
*/
|
|
5511
|
+
icon?: string;
|
|
5512
|
+
/**
|
|
5513
|
+
* Delay in milliseconds before the tooltip appears.
|
|
5514
|
+
*/
|
|
5515
|
+
delayDuration?: number;
|
|
5516
|
+
/**
|
|
5517
|
+
* Maximum width for the tooltip container.
|
|
5518
|
+
*/
|
|
5519
|
+
maxWidth?: string;
|
|
5520
|
+
/**
|
|
5521
|
+
* The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
|
|
5522
|
+
*/
|
|
5523
|
+
open?: boolean;
|
|
5524
|
+
/**
|
|
5525
|
+
* Event handler called when the open state of the tooltip changes.
|
|
5526
|
+
*/
|
|
5527
|
+
onOpenChange?: (open: boolean) => void;
|
|
5528
|
+
/**
|
|
5529
|
+
* Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
|
|
5530
|
+
*/
|
|
5531
|
+
zIndex?: number;
|
|
5532
|
+
/**
|
|
5533
|
+
* Set to true if you want to use your own link or button for the trigger. If false it will wrap the children in a button.
|
|
5534
|
+
*/
|
|
5535
|
+
asChild?: boolean;
|
|
5536
|
+
}
|
|
5537
|
+
|
|
5538
|
+
declare const InputIcon: ({ isButton, isReadOnly, isDisabled, size, tooltip, themeIcon, icon, }: InputIconProps) => React__default.JSX.Element;
|
|
4734
5539
|
interface InputIconProps {
|
|
4735
5540
|
/**
|
|
4736
5541
|
* Sets the Icon to be a Button.
|
|
@@ -4740,6 +5545,7 @@ interface InputIconProps {
|
|
|
4740
5545
|
onFocus?: React__default.FocusEventHandler<HTMLButtonElement>;
|
|
4741
5546
|
onClick: () => void;
|
|
4742
5547
|
label: string;
|
|
5548
|
+
onKeyDown?: (e: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
4743
5549
|
};
|
|
4744
5550
|
/**
|
|
4745
5551
|
* Pass in TextInput isReadOnly state.
|
|
@@ -4770,7 +5576,7 @@ interface InputIconProps {
|
|
|
4770
5576
|
/**
|
|
4771
5577
|
* Use `Theme` component to apply a specific theme to its children.
|
|
4772
5578
|
*/
|
|
4773
|
-
declare const Theme:
|
|
5579
|
+
declare const Theme: ({ theme, resetCssStyles, children, ...props }: ThemeProps) => React__default.JSX.Element;
|
|
4774
5580
|
declare const themes: readonly ["bt-enterprise", "bt-business", "ee"];
|
|
4775
5581
|
type ThemeType = "bt-enterprise" | "bt-business" | "ee";
|
|
4776
5582
|
interface ThemeProps {
|
|
@@ -4789,7 +5595,7 @@ interface ThemeProps {
|
|
|
4789
5595
|
}
|
|
4790
5596
|
|
|
4791
5597
|
/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
|
|
4792
|
-
declare const ThumbnailSignpost: React__default.
|
|
5598
|
+
declare const ThumbnailSignpost: ({ text, title, img, button, ...props }: ThumbnailSignpostProps) => React__default.JSX.Element;
|
|
4793
5599
|
interface ThumbnailSignpostProps {
|
|
4794
5600
|
/**
|
|
4795
5601
|
* Title for the ThumbnailSignpost.
|
|
@@ -4816,7 +5622,7 @@ interface ThumbnailSignpostProps {
|
|
|
4816
5622
|
}
|
|
4817
5623
|
|
|
4818
5624
|
/** Use `Toast` to display temporary messages at the bottom of the screen. */
|
|
4819
|
-
declare const Toast:
|
|
5625
|
+
declare const Toast: ({ children, colorScheme, onDarkSurface, ...props }: ToastProps) => React__default.JSX.Element;
|
|
4820
5626
|
interface ToastProps {
|
|
4821
5627
|
/**
|
|
4822
5628
|
* Content to display within `Toast`
|
|
@@ -4833,7 +5639,7 @@ interface ToastProps {
|
|
|
4833
5639
|
}
|
|
4834
5640
|
|
|
4835
5641
|
/** Use `ToastNotification` to display brief, non-intrusive messages that inform users about system events, actions, or feedback. */
|
|
4836
|
-
declare const ToastNotification:
|
|
5642
|
+
declare const ToastNotification: ({ link, title, isOpen, onOpenChange, isStatusIconVisible, isCloseButtonVisible, status, ...props }: ToastNotificationProps) => React__default.JSX.Element;
|
|
4837
5643
|
type ToastStatus = "general" | "error" | "warning" | "success";
|
|
4838
5644
|
interface ToastNotificationProps {
|
|
4839
5645
|
/**
|
|
@@ -4872,7 +5678,7 @@ interface ToastNotificationProps {
|
|
|
4872
5678
|
}
|
|
4873
5679
|
|
|
4874
5680
|
/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
|
|
4875
|
-
declare const Truncate:
|
|
5681
|
+
declare const Truncate: ({ maxWidth, title, children, ...props }: TruncateProps) => React__default.JSX.Element;
|
|
4876
5682
|
interface TruncateProps {
|
|
4877
5683
|
/**
|
|
4878
5684
|
* Content to truncate.
|
|
@@ -4889,8 +5695,9 @@ interface TruncateProps {
|
|
|
4889
5695
|
}
|
|
4890
5696
|
|
|
4891
5697
|
/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
|
|
4892
|
-
declare const TypographyCard:
|
|
5698
|
+
declare const TypographyCard: ({ url, onClick, heading, metaText, label, text, minHeight, headingSize, linkData, pathway, buttonIcon, headingLevel, labelLevel, headingWordWrap, preserveAspectRatios, ...props }: TypographyCardProps) => React__default.JSX.Element;
|
|
4893
5699
|
type TypographyCardPathway = "light" | "dark";
|
|
5700
|
+
type AspectRatios = "3-4" | "10-16";
|
|
4894
5701
|
interface TypographyCardProps {
|
|
4895
5702
|
/**
|
|
4896
5703
|
* Heading for the TypographyCard.
|
|
@@ -4904,6 +5711,10 @@ interface TypographyCardProps {
|
|
|
4904
5711
|
* Url for the TypographyCard.
|
|
4905
5712
|
*/
|
|
4906
5713
|
url: string;
|
|
5714
|
+
/**
|
|
5715
|
+
* Text content for the TypographyCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
5716
|
+
*/
|
|
5717
|
+
text?: string;
|
|
4907
5718
|
/**
|
|
4908
5719
|
* Sets a dark or light background for the TypographyCard.
|
|
4909
5720
|
*/
|
|
@@ -4943,13 +5754,29 @@ interface TypographyCardProps {
|
|
|
4943
5754
|
* Heading level for the TypographyCard label.
|
|
4944
5755
|
*/
|
|
4945
5756
|
labelLevel?: HeadingLevel;
|
|
5757
|
+
/**
|
|
5758
|
+
* Whether long words in heading should be wrapped.
|
|
5759
|
+
*/
|
|
5760
|
+
headingWordWrap?: boolean;
|
|
5761
|
+
/**
|
|
5762
|
+
* Preserve aspect ratio of the TypographyCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
|
|
5763
|
+
*/
|
|
5764
|
+
preserveAspectRatios?: {
|
|
5765
|
+
xs?: AspectRatios;
|
|
5766
|
+
s?: AspectRatios;
|
|
5767
|
+
m?: AspectRatios;
|
|
5768
|
+
l?: AspectRatios;
|
|
5769
|
+
xl?: AspectRatios;
|
|
5770
|
+
xxl?: AspectRatios;
|
|
5771
|
+
xxxl?: AspectRatios;
|
|
5772
|
+
};
|
|
4946
5773
|
}
|
|
4947
5774
|
|
|
4948
5775
|
/**
|
|
4949
5776
|
* Use `UniversalHeader` to display a group-level page header.
|
|
4950
5777
|
*/
|
|
4951
|
-
declare const UniversalHeader:
|
|
4952
|
-
declare const UniversalHeaderItem:
|
|
5778
|
+
declare const UniversalHeader: ({ children, ContentSlot, ...props }: UniversalHeaderProps) => React__default.JSX.Element;
|
|
5779
|
+
declare const UniversalHeaderItem: ({ children, href, isActive, ...props }: UniversalHeaderItemProps) => React__default.JSX.Element;
|
|
4953
5780
|
interface UniversalHeaderItemProps {
|
|
4954
5781
|
/**
|
|
4955
5782
|
* Contents of the UniversalHeaderItem.
|
|
@@ -4979,7 +5806,7 @@ interface UniversalHeaderProps {
|
|
|
4979
5806
|
/**
|
|
4980
5807
|
* Use `VerticalSpace` to create vertical space between components.
|
|
4981
5808
|
*/
|
|
4982
|
-
declare const VerticalSpace:
|
|
5809
|
+
declare const VerticalSpace: ({ isDebugVisible, size, sizeS, sizeM, sizeL, sizeXL, sizeXXL, ...props }: VerticalSpaceProps) => React__default.JSX.Element;
|
|
4983
5810
|
type VerticalSpaceSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
|
|
4984
5811
|
interface VerticalSpaceProps {
|
|
4985
5812
|
/**
|
|
@@ -5016,18 +5843,36 @@ interface VerticalSpaceProps {
|
|
|
5016
5843
|
/**
|
|
5017
5844
|
* Use `VideoPlayer` to embed videos from YouTube or Vimeo.
|
|
5018
5845
|
*/
|
|
5019
|
-
declare const VideoPlayer: React__default.
|
|
5846
|
+
declare const VideoPlayer: ({ title, description, transcriptLink, transcriptContent, light, url, onReady, onPlay, onStart, onPause, onError, onEnded, isBorderRadius, isSupportingTextHidden, titleWordWrap, ...props }: VideoPlayerProps) => React__default.JSX.Element;
|
|
5020
5847
|
interface VideoPlayerProps extends Pick<ReactPlayerProps, "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "light"> {
|
|
5848
|
+
/**
|
|
5849
|
+
* URL of the video to play.
|
|
5850
|
+
*/
|
|
5021
5851
|
url: string;
|
|
5852
|
+
/**
|
|
5853
|
+
* Title of the video.
|
|
5854
|
+
*/
|
|
5022
5855
|
title: string;
|
|
5856
|
+
/**
|
|
5857
|
+
* Description of the video.
|
|
5858
|
+
*/
|
|
5023
5859
|
description: string;
|
|
5860
|
+
/**
|
|
5861
|
+
* Apply border radius to the video player.
|
|
5862
|
+
*/
|
|
5024
5863
|
isBorderRadius?: boolean;
|
|
5864
|
+
/**
|
|
5865
|
+
* Link to download the transcript.
|
|
5866
|
+
*/
|
|
5025
5867
|
transcriptLink?: {
|
|
5026
5868
|
url: string;
|
|
5027
5869
|
text: string;
|
|
5028
5870
|
fileSize: string;
|
|
5029
5871
|
format: string;
|
|
5030
5872
|
};
|
|
5873
|
+
/**
|
|
5874
|
+
* Content for the audio described transcript.
|
|
5875
|
+
*/
|
|
5031
5876
|
transcriptContent?: {
|
|
5032
5877
|
heading: string;
|
|
5033
5878
|
description: string;
|
|
@@ -5036,19 +5881,26 @@ interface VideoPlayerProps extends Pick<ReactPlayerProps, "onReady" | "onPlay" |
|
|
|
5036
5881
|
text?: string;
|
|
5037
5882
|
}[];
|
|
5038
5883
|
};
|
|
5884
|
+
/**
|
|
5885
|
+
* Hide the supporting text (title and description).
|
|
5886
|
+
*/
|
|
5039
5887
|
isSupportingTextHidden?: boolean;
|
|
5888
|
+
titleWordWrap?: boolean;
|
|
5040
5889
|
}
|
|
5041
5890
|
|
|
5042
5891
|
/** Use `Visible` to show it's children at specific breakpoints */
|
|
5043
|
-
declare const Visible: React__default.
|
|
5892
|
+
declare const Visible: ({ children, xs, s, m, l, xl, xxl, ...props }: VisibleProps) => React__default.JSX.Element;
|
|
5044
5893
|
interface VisibleProps extends BreakpointVisibility {
|
|
5045
|
-
|
|
5894
|
+
/**
|
|
5895
|
+
* Content to display at specific breakpoints.
|
|
5896
|
+
*/
|
|
5897
|
+
children: ReactNode;
|
|
5046
5898
|
}
|
|
5047
5899
|
|
|
5048
5900
|
/**
|
|
5049
5901
|
* Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
|
|
5050
5902
|
*/
|
|
5051
|
-
declare const VisuallyHidden:
|
|
5903
|
+
declare const VisuallyHidden: ({ children, ...props }: VisuallyHiddenProps) => React__default.JSX.Element;
|
|
5052
5904
|
interface VisuallyHiddenProps {
|
|
5053
5905
|
/**
|
|
5054
5906
|
* Content to be Visually Hidden.
|
|
@@ -5073,22 +5925,49 @@ interface NavigationHeaderContainerProps extends ExtentableContainer {
|
|
|
5073
5925
|
/**
|
|
5074
5926
|
* content for the navbar
|
|
5075
5927
|
*/
|
|
5076
|
-
children:
|
|
5928
|
+
children: ReactNode;
|
|
5077
5929
|
}
|
|
5078
5930
|
|
|
5079
5931
|
type Brand = "btWholesale" | "btGlobalFabric" | "ee" | "bt";
|
|
5080
5932
|
interface NavigationHeaderLogoProps {
|
|
5933
|
+
/**
|
|
5934
|
+
* Accessible label for the logo link.
|
|
5935
|
+
*/
|
|
5081
5936
|
ariaLabel?: string;
|
|
5937
|
+
/**
|
|
5938
|
+
* Brand variant for the logo.
|
|
5939
|
+
*/
|
|
5082
5940
|
brand?: Brand;
|
|
5941
|
+
/**
|
|
5942
|
+
* URL to link to when the logo is clicked.
|
|
5943
|
+
*/
|
|
5083
5944
|
href?: string;
|
|
5084
|
-
|
|
5945
|
+
/**
|
|
5946
|
+
* Custom SVG to display instead of the default brand logo.
|
|
5947
|
+
*/
|
|
5948
|
+
svg?: ReactNode;
|
|
5949
|
+
/**
|
|
5950
|
+
* Click handler for the logo link.
|
|
5951
|
+
*/
|
|
5085
5952
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
5086
5953
|
}
|
|
5087
5954
|
|
|
5088
5955
|
interface NavigationHeaderNavLinkProps {
|
|
5956
|
+
/**
|
|
5957
|
+
* Text to display in the navigation link.
|
|
5958
|
+
*/
|
|
5089
5959
|
text: string;
|
|
5960
|
+
/**
|
|
5961
|
+
* URL to link to when the navigation link is clicked.
|
|
5962
|
+
*/
|
|
5090
5963
|
href: string;
|
|
5964
|
+
/**
|
|
5965
|
+
* Border radius size variant for the navigation link.
|
|
5966
|
+
*/
|
|
5091
5967
|
borderRadiusSize?: "s" | "m";
|
|
5968
|
+
/**
|
|
5969
|
+
* Click handler for the navigation link.
|
|
5970
|
+
*/
|
|
5092
5971
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
5093
5972
|
}
|
|
5094
5973
|
|
|
@@ -5161,7 +6040,7 @@ type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "
|
|
|
5161
6040
|
/**
|
|
5162
6041
|
* Use `NavigationHeader` as a Top-level UI element that displays branding, page titles, and primary navigation actions.
|
|
5163
6042
|
*/
|
|
5164
|
-
declare const NavigationHeader: React__default.
|
|
6043
|
+
declare const NavigationHeader: ({ leftSlot, middleSlot, rightSlot, isPill, isExtended, isFluid, logo, navItems, meatballMenuTooltip, burgerMenuActions, burgerMenuFooter, burgerMenuHeader, burgerMenuVisibility, onOpenChange, burgerMenuPathway, navMenuVisibility, background, }: NavigationHeaderProps) => React__default.JSX.Element;
|
|
5165
6044
|
interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "children" | "background">, Omit<NavigationHeaderNavListProps, "navItems">, ExtentableContainer {
|
|
5166
6045
|
/**
|
|
5167
6046
|
* set the background color of the navbar.
|
|
@@ -5170,15 +6049,15 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
|
|
|
5170
6049
|
/**
|
|
5171
6050
|
* Open content slot on the left of the nav bar.
|
|
5172
6051
|
*/
|
|
5173
|
-
leftSlot?:
|
|
6052
|
+
leftSlot?: ReactNode;
|
|
5174
6053
|
/**
|
|
5175
6054
|
* Open content slot on the middle of the nav bar, after the nav items.
|
|
5176
6055
|
*/
|
|
5177
|
-
middleSlot?:
|
|
6056
|
+
middleSlot?: ReactNode;
|
|
5178
6057
|
/**
|
|
5179
6058
|
* Open content slot on the right of the nav bar.
|
|
5180
6059
|
*/
|
|
5181
|
-
rightSlot?:
|
|
6060
|
+
rightSlot?: ReactNode;
|
|
5182
6061
|
/**
|
|
5183
6062
|
* Configuration for the logo. Logo Defaults to BT. Alternatively you can select one of the brands via the `brand` field, or supply your own svg via the `svg` field.
|
|
5184
6063
|
* When supplying your own svg the root element must be an `svg` element that is implemented as follows: it has a `viewBox` attribute, no `height`, `width` or `preserveAspectRatio` attributes. It will also need
|
|
@@ -5192,11 +6071,11 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
|
|
|
5192
6071
|
/**
|
|
5193
6072
|
* Additional content for the burger menu that sits below all the other content.
|
|
5194
6073
|
*/
|
|
5195
|
-
burgerMenuFooter?:
|
|
6074
|
+
burgerMenuFooter?: ReactNode;
|
|
5196
6075
|
/**
|
|
5197
6076
|
* Additional content for the burger menu that sits between the logo and the nav items.
|
|
5198
6077
|
*/
|
|
5199
|
-
burgerMenuHeader?:
|
|
6078
|
+
burgerMenuHeader?: ReactNode;
|
|
5200
6079
|
/**
|
|
5201
6080
|
* Sets the color pathway for the burger menu, by default it inverts the pathway the header is using for contrast.
|
|
5202
6081
|
*/
|
|
@@ -5213,10 +6092,13 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
|
|
|
5213
6092
|
* Nav items for `<NavigationHeader />`
|
|
5214
6093
|
*/
|
|
5215
6094
|
navItems?: Array<NavigationHeaderNavigationItem>;
|
|
6095
|
+
/**
|
|
6096
|
+
* Callback when burger menu open state changes.
|
|
6097
|
+
*/
|
|
5216
6098
|
onOpenChange?: (isOpen: boolean) => void;
|
|
5217
6099
|
}
|
|
5218
6100
|
|
|
5219
|
-
declare const NavigationHeaderAction: React__default.
|
|
6101
|
+
declare const NavigationHeaderAction: ({ ariaLabel, icon, onClick, title, supportingCopy, isAttention, }: NavigationHeaderActionProps) => React__default.JSX.Element;
|
|
5220
6102
|
interface NavigationHeaderActionProps {
|
|
5221
6103
|
/**
|
|
5222
6104
|
* Icon url for the action.
|
|
@@ -5244,15 +6126,27 @@ interface NavigationHeaderActionProps {
|
|
|
5244
6126
|
onClick?: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
5245
6127
|
}
|
|
5246
6128
|
|
|
5247
|
-
declare const NavigationHeaderActionBar: React__default.
|
|
6129
|
+
declare const NavigationHeaderActionBar: ({ children, }: NavigationHeaderActionBarProps) => React__default.JSX.Element;
|
|
5248
6130
|
interface NavigationHeaderActionBarProps {
|
|
5249
|
-
|
|
6131
|
+
/**
|
|
6132
|
+
* NavigationHeaderAction components to display in the action bar.
|
|
6133
|
+
*/
|
|
6134
|
+
children: ReactNode;
|
|
5250
6135
|
}
|
|
5251
6136
|
|
|
5252
|
-
declare const NavigationHeaderPage: React__default.
|
|
6137
|
+
declare const NavigationHeaderPage: ({ icon, title, page, }: NavigationHeaderPageProps) => React__default.JSX.Element;
|
|
5253
6138
|
interface NavigationHeaderPageProps {
|
|
6139
|
+
/**
|
|
6140
|
+
* Icon URL to display with the page title.
|
|
6141
|
+
*/
|
|
5254
6142
|
icon?: string;
|
|
6143
|
+
/**
|
|
6144
|
+
* Page text to display.
|
|
6145
|
+
*/
|
|
5255
6146
|
page?: string;
|
|
6147
|
+
/**
|
|
6148
|
+
* Title text for the page.
|
|
6149
|
+
*/
|
|
5256
6150
|
title: string;
|
|
5257
6151
|
}
|
|
5258
6152
|
|
|
@@ -5275,4 +6169,4 @@ interface NavigationHeaderPageProps {
|
|
|
5275
6169
|
*/
|
|
5276
6170
|
declare const useMediaQuery: (mediaQuery: string) => boolean;
|
|
5277
6171
|
|
|
5278
|
-
export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, type Brand, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, CheckboxIcon, type CheckboxIconProps, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, type FilterControlProps, FilterControls, FilterItem, FilterItems, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridProps, GridRow, type GridValue, Group, GroupItem, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, InputIcon, type InputIconProps, Link, type LinkProps
|
|
6172
|
+
export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, type Brand, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, BreadcrumbsLink, type BreadcrumbsLinkProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, CheckboxIcon, type CheckboxIconProps, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, type ContentSwitcherContentProps, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherListProps, type ContentSwitcherProps, ContentSwitcherTab, type ContentSwitcherTabProps, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, type FilterControlProps, FilterControls, type FilterControlsProps, FilterItem, type FilterItemProps, FilterItems, type FilterItemsProps, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridColProps, type GridProps, GridRow, type GridRowProps, type GridValue, Group, GroupItem, type GroupItemProps, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, InputIcon, type InputIconProps, Link, type LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, type MenuContentProps, MenuFooter, type MenuFooterProps, MenuGroup, type MenuGroupProps, MenuGroupSingleSelect, type MenuGroupSingleSelectProps, MenuHeader, type MenuHeaderProps, MenuItem, MenuItemCheckbox, type MenuItemCheckboxProps, MenuItemContentTemplate, type MenuItemContentTemplateProps, MenuItemMultiLevel, MenuItemMultiLevelContent, type MenuItemMultiLevelContentProps, type MenuItemMultiLevelProps, MenuItemMultiLevelTrigger, type MenuItemMultiLevelTriggerProps, type MenuItemProps, MenuItemSingleSelect, type MenuItemSingleSelectProps, MenuLabel, type MenuLabelProps, MenuPortal, type MenuPortalProps, type MenuProps, MenuScrollable, type MenuScrollableProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionBarProps, type NavigationHeaderActionProps, type NavigationHeaderNavigationItem, NavigationHeaderPage, type NavigationHeaderPageProps, type NavigationHeaderProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterImageProps, type PosterProps, PosterVideo, type PosterVideoProps, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowProps, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupInputProps, type RadioCardGroupProps, RadioGroup, RadioGroupButton, type RadioGroupButtonProps, RadioGroupInput, type RadioGroupInputProps, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SemanticHeading, type SemanticHeadingLevel, type SemanticHeadingProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterItemGroupProps, type SiteFooterItemProps, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, type SiteFooterV2ItemGroupProps, type SiteFooterV2ItemProps, SiteFooterV2Main, type SiteFooterV2MainProps, type SiteFooterV2Props, SiteFooterV2Utility, type SiteFooterV2UtilityProps, SiteHeaderV2, SiteHeaderV2Column, type SiteHeaderV2ColumnProps, SiteHeaderV2Item, SiteHeaderV2ItemGroup, type SiteHeaderV2ItemGroupProps, type SiteHeaderV2ItemProps, SiteHeaderV2NavItem, type SiteHeaderV2NavItemProps, SiteHeaderV2NavItemWithSubNav, type SiteHeaderV2NavItemWithSubNavProps, SiteHeaderV2NodeItem, type SiteHeaderV2NodeItemProps, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, type SiteHeaderV2SubNavItemProps, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type SkipLinkItemProps, type SkipLinkProps, Spacing, type SpacingProps, type SpacingSize, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackground, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsContent, type TabsContentProps, TabsItem, type TabsItemProps, TabsList, type TabsListProps, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, ThumbnailSignpost, type ThumbnailSignpostProps, Toast, ToastNotification, type ToastNotificationProps, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderItemProps, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery, useProgressStepperOverflow };
|