@arc-ui/components 13.0.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/styles.css +1 -1
- package/lib/Button/styles.css +1 -1
- package/lib/ButtonGroup/styles.css +1 -1
- package/lib/ButtonV2/styles.css +1 -1
- package/lib/Calendar/Calendar.cjs +2 -2
- package/lib/Calendar/Calendar.mjs +2 -2
- package/lib/Calendar/styles.css +1 -1
- package/lib/CardFooter/styles.css +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/styles.css +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 +530 -136
- package/lib/ComboBox/ComboBox.mjs +530 -136
- package/lib/ComboBox/styles.css +1 -1
- package/lib/ConditionalWrapper/ConditionalWrapper.cjs +1 -0
- package/lib/ConditionalWrapper/ConditionalWrapper.mjs +1 -0
- package/lib/ContentSwitcher/styles.css +1 -1
- package/lib/ContentSwitcherDropdown/styles.css +1 -1
- package/lib/DatePicker/DatePicker.cjs +3 -3
- package/lib/DatePicker/DatePicker.mjs +3 -3
- 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/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/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/styles.css +1 -1
- package/lib/Hidden/styles.css +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 +28 -15
- package/lib/ImpactCard/ImpactCard.mjs +29 -16
- package/lib/ImpactCard/styles.css +1 -1
- package/lib/InformationCard/InformationCard.cjs +57 -33
- package/lib/InformationCard/InformationCard.mjs +59 -35
- 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 +40 -21
- package/lib/MediaCard/MediaCard.mjs +41 -22
- package/lib/MediaCard/styles.css +1 -1
- package/lib/Menu/styles.css +1 -1
- package/lib/Modal/styles.css +1 -1
- package/lib/NavigationHeader/NavigationHeader.cjs +4 -4
- package/lib/NavigationHeader/NavigationHeader.mjs +4 -4
- 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 +1 -1
- package/lib/Popover/Popover.mjs +1 -1
- package/lib/Popover/styles.css +1 -1
- package/lib/Poster/styles.css +1 -1
- package/lib/ProgressBar/styles.css +1 -1
- package/lib/ProgressStepper/styles.css +1 -1
- package/lib/ProgressStepperOverflow/styles.css +1 -1
- package/lib/RadioCardGroup/styles.css +1 -1
- package/lib/RadioGroup/RadioGroup.cjs +2 -1
- package/lib/RadioGroup/RadioGroup.mjs +2 -1
- package/lib/RadioGroup/styles.css +1 -1
- package/lib/Rule/styles.css +1 -1
- package/lib/ScrollToTop/styles.css +1 -1
- package/lib/Section/styles.css +1 -1
- 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 +3 -2
- package/lib/SiteFooterV2/SiteFooterV2.mjs +3 -2
- package/lib/SiteFooterV2/styles.css +1 -1
- package/lib/SiteHeaderV2/SiteHeaderV2.cjs +1 -1
- package/lib/SiteHeaderV2/SiteHeaderV2.mjs +1 -1
- package/lib/SiteHeaderV2/styles.css +1 -1
- package/lib/Skeleton/styles.css +1 -1
- package/lib/SkipLink/SkipLink.cjs +1 -0
- package/lib/SkipLink/SkipLink.mjs +1 -0
- 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/styles.css +1 -1
- package/lib/TabbedBanner/TabbedBanner.cjs +5 -3
- package/lib/TabbedBanner/TabbedBanner.mjs +5 -3
- package/lib/TabbedBanner/styles.css +1 -1
- package/lib/Tabs/Tabs.cjs +57 -25
- package/lib/Tabs/Tabs.mjs +57 -25
- 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/styles.css +1 -1
- package/lib/TextInput/TextInput.cjs +1 -1
- package/lib/TextInput/TextInput.mjs +1 -1
- 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/styles.css +1 -1
- package/lib/Toast/styles.css +1 -1
- package/lib/Tooltip/styles.css +1 -1
- package/lib/Truncate/styles.css +1 -1
- package/lib/TypographyCard/TypographyCard.cjs +38 -14
- package/lib/TypographyCard/TypographyCard.mjs +39 -15
- package/lib/TypographyCard/styles.css +1 -1
- package/lib/UniversalHeader/styles.css +1 -1
- package/lib/VerticalSpace/styles.css +1 -1
- 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/{Calendar-CdLn9iv6.cjs → Calendar-CLWtKvPh.cjs} +1 -1
- package/lib/_shared/cjs/{Popover-BtvRErpC.cjs → Popover-BxuQPltF.cjs} +2 -2
- package/lib/_shared/cjs/{TemplateBanner-DyXBKuMw.cjs → TemplateBanner-rdwgmFH_.cjs} +35 -5
- package/lib/_shared/cjs/{TextInput-C_K2PLf5.cjs → TextInput-CLkhL2KT.cjs} +39 -6
- package/lib/_shared/cjs/{arc-breakpoints-uADxN-b4.cjs → arc-breakpoints-JJMLGzht.cjs} +1 -1
- package/lib/_shared/cjs/{index.es-BAsay4oe.cjs → index.es-CCJ64o4N.cjs} +1 -1
- package/lib/_shared/esm/{Calendar-CzFIMyD1.mjs → Calendar-BcYEIJhA.mjs} +1 -1
- package/lib/_shared/esm/{Popover-DRQSgAog.mjs → Popover-Pjtmu_TN.mjs} +2 -2
- package/lib/_shared/esm/{TemplateBanner-BPzuH5bz.mjs → TemplateBanner-DzU9Edky.mjs} +36 -6
- package/lib/_shared/esm/{TextInput-BCvKXfM_.mjs → TextInput-WczTCUvp.mjs} +40 -7
- package/lib/_shared/esm/{arc-breakpoints-ChQgbftE.mjs → arc-breakpoints-CQOgeFK_.mjs} +1 -1
- package/lib/_shared/esm/{index.es-99J0r2va.mjs → index.es-BJl4zTyt.mjs} +1 -1
- package/lib/index.cjs +4857 -4255
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +313 -110
- package/lib/index.d.mts +313 -110
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +4857 -4256
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +6 -2
- package/package.json +6 -6
package/lib/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
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';
|
|
@@ -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: ({ id, href, title, rel, target, children, onClick, screenReaderText, isButton, isImplied, size, ...props }: LinkProps
|
|
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
|
*/
|
|
@@ -382,7 +382,7 @@ interface SemanticHeadingProps extends React__default.HTMLAttributes<HTMLHeading
|
|
|
382
382
|
* Use `Alert` to inform the user of important changes or actions.
|
|
383
383
|
*/
|
|
384
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
|
|
385
|
+
type AlertLinkProps = Omit<LinkProps, "size" | "isImplied">;
|
|
386
386
|
interface AlertProps {
|
|
387
387
|
/**
|
|
388
388
|
* Determine a heading for `<Alert />`
|
|
@@ -712,13 +712,21 @@ interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" |
|
|
|
712
712
|
}
|
|
713
713
|
|
|
714
714
|
/** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
|
|
715
|
-
declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
|
|
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;
|
|
716
716
|
type TemplateBannerStyle = "light" | "dark" | "contained";
|
|
717
717
|
type TemplateBannerAlignment = "top" | "bottom" | "center";
|
|
718
718
|
interface TemplateBannerImage extends BannerImageProps {
|
|
719
719
|
alignment?: TemplateBannerAlignment;
|
|
720
720
|
}
|
|
721
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
|
+
}
|
|
722
730
|
interface TemplateBannerProps {
|
|
723
731
|
/**
|
|
724
732
|
* Align content for TemplateBanner
|
|
@@ -787,6 +795,10 @@ interface TemplateBannerProps {
|
|
|
787
795
|
* Defines the ratio of the content area within the banner layout.
|
|
788
796
|
*/
|
|
789
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;
|
|
790
802
|
/**
|
|
791
803
|
* Add Additional top margin to banner
|
|
792
804
|
*/
|
|
@@ -810,7 +822,7 @@ interface TemplateBannerProps {
|
|
|
810
822
|
}
|
|
811
823
|
|
|
812
824
|
/** Use `Banner` to promote key content or products with bold visuals and messaging. */
|
|
813
|
-
declare const Banner: ({ heading, label, text, img, contentRatio, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
|
|
825
|
+
declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
|
|
814
826
|
type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
|
|
815
827
|
|
|
816
828
|
type SurfaceBackground = "light" | "dark";
|
|
@@ -942,8 +954,8 @@ interface BreadcrumbsProps {
|
|
|
942
954
|
isLight?: boolean;
|
|
943
955
|
}
|
|
944
956
|
|
|
945
|
-
declare const BreadcrumbsItem: ({ spacerIconAfter, spacerIconBefore, children, }:
|
|
946
|
-
interface
|
|
957
|
+
declare const BreadcrumbsItem: ({ spacerIconAfter, spacerIconBefore, children, }: BreadcrumbsItemProps) => React__default.JSX.Element;
|
|
958
|
+
interface BreadcrumbsItemProps {
|
|
947
959
|
/**
|
|
948
960
|
* Render child elements within `BreadcrumbsItem`
|
|
949
961
|
*/
|
|
@@ -958,8 +970,8 @@ interface ItemProps$1 {
|
|
|
958
970
|
spacerIconBefore?: boolean;
|
|
959
971
|
}
|
|
960
972
|
|
|
961
|
-
declare const BreadcrumbsLink: ({ onClick, href, isActive, children, ref, ...props }:
|
|
962
|
-
interface
|
|
973
|
+
declare const BreadcrumbsLink: ({ onClick, href, isActive, children, ref, ...props }: BreadcrumbsLinkProps) => React__default.JSX.Element;
|
|
974
|
+
interface BreadcrumbsLinkProps {
|
|
963
975
|
/**
|
|
964
976
|
* Ref to the underlying anchor element.
|
|
965
977
|
*/
|
|
@@ -1302,12 +1314,16 @@ interface SlideConfig {
|
|
|
1302
1314
|
|
|
1303
1315
|
type Responsive = Partial<Record<BreakPoints, SlideConfig>>;
|
|
1304
1316
|
|
|
1305
|
-
declare const Carousel: ({ children, responsive, itemsToScroll, itemsPerSlide, withGutter, loop, isPartialVisible, autoplay, isPlaying, fade, }: CarouselProps) => React__default.JSX.Element;
|
|
1317
|
+
declare const Carousel: ({ children, responsive, itemsToScroll, itemsPerSlide, controlsPosition, behavior, overflow, withGutter, loop, isPartialVisible, autoplay, isPlaying, fade, }: CarouselProps) => React__default.JSX.Element;
|
|
1306
1318
|
interface CarouselProps {
|
|
1307
1319
|
/**
|
|
1308
1320
|
* Items for the carousel.
|
|
1309
1321
|
*/
|
|
1310
1322
|
children: ReactNode;
|
|
1323
|
+
/**
|
|
1324
|
+
* Position of the left and right arrows
|
|
1325
|
+
*/
|
|
1326
|
+
controlsPosition?: "bottom" | "middle";
|
|
1311
1327
|
/**
|
|
1312
1328
|
* Adds a gap between the slides.
|
|
1313
1329
|
*/
|
|
@@ -1369,6 +1385,14 @@ interface CarouselProps {
|
|
|
1369
1385
|
* Enable fade transition between slides.
|
|
1370
1386
|
*/
|
|
1371
1387
|
fade?: boolean;
|
|
1388
|
+
/**
|
|
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.
|
|
1390
|
+
*/
|
|
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";
|
|
1372
1396
|
}
|
|
1373
1397
|
|
|
1374
1398
|
/**
|
|
@@ -1601,6 +1625,8 @@ interface ColumnsProps extends ExtentableContainer {
|
|
|
1601
1625
|
isGutterless?: boolean;
|
|
1602
1626
|
}
|
|
1603
1627
|
|
|
1628
|
+
type ArcIcon = string;
|
|
1629
|
+
|
|
1604
1630
|
type RequirementStatus = "required" | "optional" | "not-applicable";
|
|
1605
1631
|
declare const Context: React__default.Context<{
|
|
1606
1632
|
requirementStatus: RequirementStatus | null;
|
|
@@ -1687,57 +1713,113 @@ interface FormControlProps {
|
|
|
1687
1713
|
isErrorAlert?: boolean;
|
|
1688
1714
|
}
|
|
1689
1715
|
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
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"> {
|
|
1693
1723
|
/**
|
|
1694
1724
|
* Ref to the underlying input element.
|
|
1695
1725
|
*/
|
|
1696
1726
|
ref?: Ref<HTMLInputElement>;
|
|
1697
1727
|
/**
|
|
1698
|
-
*
|
|
1728
|
+
* Aria label for the results list.
|
|
1699
1729
|
*/
|
|
1700
1730
|
listBoxAriaLabel: string;
|
|
1701
1731
|
/**
|
|
1702
|
-
*
|
|
1732
|
+
* Size of the `ComboBox` input.
|
|
1733
|
+
*/
|
|
1734
|
+
size?: InputSize;
|
|
1735
|
+
/**
|
|
1736
|
+
* Options for the `ComboBox`.
|
|
1703
1737
|
*/
|
|
1704
1738
|
options: string[];
|
|
1705
1739
|
/**
|
|
1706
|
-
*
|
|
1740
|
+
* Icon to appear before the input of the `ComboBox`.
|
|
1741
|
+
*/
|
|
1742
|
+
prefixIcon?: ArcIcon;
|
|
1743
|
+
/**
|
|
1744
|
+
* Input name for the `ComboBox`.
|
|
1707
1745
|
*/
|
|
1708
1746
|
name?: string;
|
|
1709
1747
|
/**
|
|
1710
|
-
*
|
|
1748
|
+
* Makes the `ComboBox` a required field.
|
|
1711
1749
|
*/
|
|
1712
1750
|
isRequired?: boolean;
|
|
1713
1751
|
/**
|
|
1714
|
-
* Default value for the
|
|
1752
|
+
* Default value for the `ComboBox`.
|
|
1715
1753
|
*/
|
|
1716
1754
|
defaultValue?: string;
|
|
1717
1755
|
/**
|
|
1718
|
-
*
|
|
1756
|
+
* Default selected values for the `ComboBox`. Only applied if `isMultiSelectable` is true.
|
|
1719
1757
|
*/
|
|
1720
|
-
|
|
1758
|
+
defaultSelectedValues?: string[];
|
|
1721
1759
|
/**
|
|
1722
|
-
*
|
|
1760
|
+
* Blur event handler for the `ComboBox`.
|
|
1723
1761
|
*/
|
|
1724
|
-
|
|
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;
|
|
1725
1772
|
/**
|
|
1726
|
-
*
|
|
1773
|
+
* Allows multiple items to be selected if true.
|
|
1727
1774
|
*/
|
|
1728
1775
|
isMultiSelectable?: boolean;
|
|
1729
1776
|
/**
|
|
1730
|
-
*
|
|
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.
|
|
1731
1783
|
*/
|
|
1732
1784
|
isAutocomplete?: boolean;
|
|
1733
1785
|
/**
|
|
1734
|
-
*
|
|
1786
|
+
* Makes the `ComboBox` readonly.
|
|
1735
1787
|
*/
|
|
1736
1788
|
isReadOnly?: boolean;
|
|
1737
1789
|
/**
|
|
1738
|
-
*
|
|
1790
|
+
* Current value of the TextInput.
|
|
1791
|
+
*/
|
|
1792
|
+
value?: string;
|
|
1793
|
+
/**
|
|
1794
|
+
* Sets the `ComboBox` to 100% width.
|
|
1739
1795
|
*/
|
|
1740
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;
|
|
1741
1823
|
}
|
|
1742
1824
|
|
|
1743
1825
|
/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
|
|
@@ -1919,71 +2001,6 @@ declare const DATE_FORMAT = "dd/MM/yyyy";
|
|
|
1919
2001
|
|
|
1920
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";
|
|
1921
2003
|
|
|
1922
|
-
/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
|
|
1923
|
-
declare const Tooltip: ({ children, side, sideOffset, align, alignContent, title, supportingCopy, icon, ariaLabel, maxWidth, delayDuration, open, onOpenChange, asChild, zIndex, ...props }: TooltipProps) => React__default.JSX.Element;
|
|
1924
|
-
interface TooltipProps {
|
|
1925
|
-
/**
|
|
1926
|
-
* Content to render within Tooltip
|
|
1927
|
-
*/
|
|
1928
|
-
children?: React__default.ReactNode;
|
|
1929
|
-
/**
|
|
1930
|
-
* The preferred side of the anchor to render against when open
|
|
1931
|
-
*/
|
|
1932
|
-
side?: "left" | "right" | "bottom" | "top";
|
|
1933
|
-
/**
|
|
1934
|
-
* The distance in pixels from the anchor
|
|
1935
|
-
*/
|
|
1936
|
-
sideOffset?: 8 | 16 | 32;
|
|
1937
|
-
/**
|
|
1938
|
-
* The preferred alignment against the anchor. May change when collisions occur.
|
|
1939
|
-
*/
|
|
1940
|
-
align?: "start" | "center" | "end";
|
|
1941
|
-
/**
|
|
1942
|
-
* Alignment for content within the tooltip
|
|
1943
|
-
*/
|
|
1944
|
-
alignContent?: "start" | "center" | "end";
|
|
1945
|
-
/**
|
|
1946
|
-
* Aria label for accessibility
|
|
1947
|
-
*/
|
|
1948
|
-
ariaLabel?: string;
|
|
1949
|
-
/**
|
|
1950
|
-
* The main title text displayed within the tooltip.
|
|
1951
|
-
*/
|
|
1952
|
-
title: string;
|
|
1953
|
-
/**
|
|
1954
|
-
* Additional supporting text displayed below the title, if provided.
|
|
1955
|
-
*/
|
|
1956
|
-
supportingCopy?: string;
|
|
1957
|
-
/**
|
|
1958
|
-
* Icon displayed next to the tooltip title or content.
|
|
1959
|
-
*/
|
|
1960
|
-
icon?: string;
|
|
1961
|
-
/**
|
|
1962
|
-
* Delay in milliseconds before the tooltip appears.
|
|
1963
|
-
*/
|
|
1964
|
-
delayDuration?: number;
|
|
1965
|
-
/**
|
|
1966
|
-
* Maximum width for the tooltip container.
|
|
1967
|
-
*/
|
|
1968
|
-
maxWidth?: string;
|
|
1969
|
-
/**
|
|
1970
|
-
* The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
|
|
1971
|
-
*/
|
|
1972
|
-
open?: boolean;
|
|
1973
|
-
/**
|
|
1974
|
-
* Event handler called when the open state of the tooltip changes.
|
|
1975
|
-
*/
|
|
1976
|
-
onOpenChange?: (open: boolean) => void;
|
|
1977
|
-
/**
|
|
1978
|
-
* Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
|
|
1979
|
-
*/
|
|
1980
|
-
zIndex?: number;
|
|
1981
|
-
/**
|
|
1982
|
-
* 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.
|
|
1983
|
-
*/
|
|
1984
|
-
asChild?: boolean;
|
|
1985
|
-
}
|
|
1986
|
-
|
|
1987
2004
|
type EventType$4 = React__default.ChangeEvent<HTMLInputElement>;
|
|
1988
2005
|
/**
|
|
1989
2006
|
* Use `TextInput` to allow users to enter short form text.
|
|
@@ -2231,7 +2248,7 @@ interface DisclosureMiniProps {
|
|
|
2231
2248
|
size?: "s" | "l";
|
|
2232
2249
|
}
|
|
2233
2250
|
|
|
2234
|
-
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"];
|
|
2235
2252
|
|
|
2236
2253
|
/** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
|
|
2237
2254
|
declare const ThemeIcon: ({ size, icon, color, ...props }: ThemeIconProps) => React__default.JSX.Element;
|
|
@@ -2694,8 +2711,8 @@ interface GroupProps extends ExtentableContainer {
|
|
|
2694
2711
|
noWrap?: boolean;
|
|
2695
2712
|
}
|
|
2696
2713
|
|
|
2697
|
-
declare const GroupItem: ({ children, grow, isDebugVisible, ...props }:
|
|
2698
|
-
interface
|
|
2714
|
+
declare const GroupItem: ({ children, grow, isDebugVisible, ...props }: GroupItemProps) => React__default.JSX.Element;
|
|
2715
|
+
interface GroupItemProps {
|
|
2699
2716
|
/**
|
|
2700
2717
|
* Content to display in the GroupItem.
|
|
2701
2718
|
*/
|
|
@@ -2712,7 +2729,7 @@ interface ItemProps {
|
|
|
2712
2729
|
}
|
|
2713
2730
|
|
|
2714
2731
|
/** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
|
|
2715
|
-
declare const HeroBanner: ({ heading, label, text, img, contentRatio, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
|
|
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;
|
|
2716
2733
|
interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
|
|
2717
2734
|
/**
|
|
2718
2735
|
* Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
|
|
@@ -2907,8 +2924,9 @@ interface IconProps {
|
|
|
2907
2924
|
type CardHeadingSize = Extract<HeadingSize, "m" | "l">;
|
|
2908
2925
|
|
|
2909
2926
|
/** Use `ImpactCard` for important content that needs additional hierarchy and prominence. */
|
|
2910
|
-
declare const ImpactCard: ({ url, onClick, heading, img, label, minHeight, headingSize, headingWordWrap, linkData, pathway, headingLevel, buttonIcon, labelLevel, ...props }: ImpactCardProps) => React__default.JSX.Element;
|
|
2927
|
+
declare const ImpactCard: ({ url, onClick, heading, img, label, minHeight, headingSize, headingWordWrap, linkData, pathway, headingLevel, buttonIcon, labelLevel, preserveAspectRatios, ...props }: ImpactCardProps) => React__default.JSX.Element;
|
|
2911
2928
|
type ImpactCardPathway = "light" | "dark";
|
|
2929
|
+
type AspectRatios$3 = "3-4" | "10-16";
|
|
2912
2930
|
interface ImpactCardProps {
|
|
2913
2931
|
/**
|
|
2914
2932
|
* Heading for the ImpactCard.
|
|
@@ -2965,10 +2983,22 @@ interface ImpactCardProps {
|
|
|
2965
2983
|
* Heading level for the ImpactCard lebel.
|
|
2966
2984
|
*/
|
|
2967
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
|
+
};
|
|
2968
2998
|
}
|
|
2969
2999
|
|
|
2970
3000
|
/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
|
|
2971
|
-
declare const InformationCard: ({ cardUrl, onClick, heading, text, label, footerLogo, button, image, badges, icon, minHeight, minHeights, headingLevel, labelLevel, headingWordWrap, ...props }: InformationCardProps) => React__default.JSX.Element;
|
|
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;
|
|
2972
3002
|
type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad" | "fetchPriority">;
|
|
2973
3003
|
type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
|
|
2974
3004
|
interface minHeightsProps {
|
|
@@ -2980,6 +3010,7 @@ interface minHeightsProps {
|
|
|
2980
3010
|
xxl?: number;
|
|
2981
3011
|
xxxl?: number;
|
|
2982
3012
|
}
|
|
3013
|
+
type AspectRatios$2 = "3-4" | "10-16";
|
|
2983
3014
|
interface InformationCardProps {
|
|
2984
3015
|
/**
|
|
2985
3016
|
* Heading for the InformationCard.
|
|
@@ -2990,7 +3021,7 @@ interface InformationCardProps {
|
|
|
2990
3021
|
*/
|
|
2991
3022
|
headingLevel?: HeadingLevel;
|
|
2992
3023
|
/**
|
|
2993
|
-
* Text content for the InformationCard
|
|
3024
|
+
* Text content for the InformationCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
2994
3025
|
*/
|
|
2995
3026
|
text?: string;
|
|
2996
3027
|
/**
|
|
@@ -3043,6 +3074,18 @@ interface InformationCardProps {
|
|
|
3043
3074
|
* Whether long words in heading should be wrapped.
|
|
3044
3075
|
*/
|
|
3045
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
|
+
};
|
|
3046
3089
|
}
|
|
3047
3090
|
|
|
3048
3091
|
/**
|
|
@@ -3071,7 +3114,8 @@ interface MediaCardVideo extends Partial<Omit<VideoPlayerProps$1, "url" | "title
|
|
|
3071
3114
|
/**
|
|
3072
3115
|
* Use `MediaCard` to contain content and an image about a single subject.
|
|
3073
3116
|
*/
|
|
3074
|
-
declare const MediaCard: ({ media, url, onClick, heading, label, labelLevel, text, metaText, minHeight, buttonIcon, isContained, headingLevel, headingWordWrap, ...props }: MediaCardProps) => React__default.JSX.Element;
|
|
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";
|
|
3075
3119
|
interface MediaCardProps {
|
|
3076
3120
|
/**
|
|
3077
3121
|
* Heading for the MediaCard.
|
|
@@ -3082,7 +3126,7 @@ interface MediaCardProps {
|
|
|
3082
3126
|
*/
|
|
3083
3127
|
headingLevel?: HeadingLevel;
|
|
3084
3128
|
/**
|
|
3085
|
-
* Text content for the MediaCard
|
|
3129
|
+
* Text content for the MediaCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
3086
3130
|
*/
|
|
3087
3131
|
text?: string;
|
|
3088
3132
|
/**
|
|
@@ -3125,6 +3169,18 @@ interface MediaCardProps {
|
|
|
3125
3169
|
* Whether long words in heading should be wrapped.
|
|
3126
3170
|
*/
|
|
3127
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
|
+
};
|
|
3128
3184
|
}
|
|
3129
3185
|
|
|
3130
3186
|
/**
|
|
@@ -3652,7 +3708,7 @@ interface PaginationSimpleProps {
|
|
|
3652
3708
|
/**
|
|
3653
3709
|
* Use `Popover` to display content in a portal, triggered by a button.
|
|
3654
3710
|
*/
|
|
3655
|
-
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, ...props }: PopoverProps) => React__default.JSX.Element;
|
|
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;
|
|
3656
3712
|
interface PopoverProps {
|
|
3657
3713
|
/**
|
|
3658
3714
|
* Content to render within Popover Trigger
|
|
@@ -3764,6 +3820,10 @@ interface PopoverProps {
|
|
|
3764
3820
|
* Removes all default padding from the content section of the Popover.
|
|
3765
3821
|
*/
|
|
3766
3822
|
isFullBleed?: boolean;
|
|
3823
|
+
/**
|
|
3824
|
+
* Used to add animations to the `RadixPopover.Content` .
|
|
3825
|
+
*/
|
|
3826
|
+
className?: string;
|
|
3767
3827
|
}
|
|
3768
3828
|
|
|
3769
3829
|
/**
|
|
@@ -4020,7 +4080,7 @@ interface ProgressStepperOverflowProps extends Omit<ProgressStepperProps, "isFlu
|
|
|
4020
4080
|
}
|
|
4021
4081
|
|
|
4022
4082
|
declare const useProgressStepperOverflow: ({ onLoadStep, increment, offsetLeft, }?: UseProgressStepperOverflowParams) => {
|
|
4023
|
-
stepperRef: React.RefObject<HTMLOListElement | null>;
|
|
4083
|
+
stepperRef: React$1.RefObject<HTMLOListElement | null>;
|
|
4024
4084
|
onNextStep: () => void;
|
|
4025
4085
|
onPreviousStep: () => void;
|
|
4026
4086
|
onViewScroll: (direction: boolean) => void;
|
|
@@ -4229,7 +4289,7 @@ interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementTy
|
|
|
4229
4289
|
/**
|
|
4230
4290
|
* Value of the RadioButton that should be checked by default.
|
|
4231
4291
|
*/
|
|
4232
|
-
checkedValue
|
|
4292
|
+
checkedValue?: string;
|
|
4233
4293
|
/**
|
|
4234
4294
|
* Should all controls be disabled?
|
|
4235
4295
|
*/
|
|
@@ -4278,7 +4338,7 @@ type ContextProps = {
|
|
|
4278
4338
|
blurEvent: (event: EventType) => void;
|
|
4279
4339
|
changeEvent: (event: EventType) => void;
|
|
4280
4340
|
groupDisabled: boolean;
|
|
4281
|
-
checkedValue
|
|
4341
|
+
checkedValue?: string;
|
|
4282
4342
|
name: string;
|
|
4283
4343
|
size: "s" | "l";
|
|
4284
4344
|
};
|
|
@@ -4600,8 +4660,8 @@ interface SiteFooterProps {
|
|
|
4600
4660
|
/**
|
|
4601
4661
|
* Use `SiteFooterV2` to display information at the bottom of a page.
|
|
4602
4662
|
*/
|
|
4603
|
-
declare const SiteFooterV2: ({ children, slogan, hideTopBorder, ...props }: SiteFooterV2Props) => React__default.JSX.Element;
|
|
4604
|
-
interface SiteFooterV2Props {
|
|
4663
|
+
declare const SiteFooterV2: ({ children, slogan, hideTopBorder, isExtended, ...props }: SiteFooterV2Props) => React__default.JSX.Element;
|
|
4664
|
+
interface SiteFooterV2Props extends ExtentableContainer {
|
|
4605
4665
|
/**
|
|
4606
4666
|
* Content of the SiteFooterV2. Must include SiteFooterV2Utility component and optional SiteFooterV2Main.
|
|
4607
4667
|
*/
|
|
@@ -5003,6 +5063,54 @@ interface SkipLinkItemProps {
|
|
|
5003
5063
|
onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
5004
5064
|
}
|
|
5005
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
|
+
|
|
5006
5114
|
/**
|
|
5007
5115
|
* Use `Spinner` to display a loading state.
|
|
5008
5116
|
*/
|
|
@@ -5130,8 +5238,12 @@ interface TabsProps {
|
|
|
5130
5238
|
activationMode?: "automatic" | "manual";
|
|
5131
5239
|
}
|
|
5132
5240
|
|
|
5133
|
-
declare const TabsItem: ({ label, value, icon, iconActive, ...props }: TabsItemProps) => React__default.JSX.Element;
|
|
5241
|
+
declare const TabsItem: ({ label, value, icon, iconActive, ref, onClick, onFocus, ...props }: TabsItemProps) => React__default.JSX.Element;
|
|
5134
5242
|
interface TabsItemProps {
|
|
5243
|
+
/**
|
|
5244
|
+
* Ref to the underlying button element.
|
|
5245
|
+
*/
|
|
5246
|
+
ref?: Ref<HTMLButtonElement>;
|
|
5135
5247
|
/**
|
|
5136
5248
|
* Label to display on the Tab
|
|
5137
5249
|
*/
|
|
@@ -5148,6 +5260,14 @@ interface TabsItemProps {
|
|
|
5148
5260
|
* Determine what to display when `Tab` is active
|
|
5149
5261
|
*/
|
|
5150
5262
|
iconActive?: string;
|
|
5263
|
+
/**
|
|
5264
|
+
* Click handler
|
|
5265
|
+
*/
|
|
5266
|
+
onClick?: () => void;
|
|
5267
|
+
/**
|
|
5268
|
+
* Focus handler
|
|
5269
|
+
*/
|
|
5270
|
+
onFocus?: () => void;
|
|
5151
5271
|
}
|
|
5152
5272
|
|
|
5153
5273
|
declare const TabsContent: ({ children, value, hidden, forceMount, ...props }: TabsContentProps) => React__default.JSX.Element;
|
|
@@ -5350,6 +5470,71 @@ interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType
|
|
|
5350
5470
|
maxHeight?: string;
|
|
5351
5471
|
}
|
|
5352
5472
|
|
|
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
|
+
|
|
5353
5538
|
declare const InputIcon: ({ isButton, isReadOnly, isDisabled, size, tooltip, themeIcon, icon, }: InputIconProps) => React__default.JSX.Element;
|
|
5354
5539
|
interface InputIconProps {
|
|
5355
5540
|
/**
|
|
@@ -5360,6 +5545,7 @@ interface InputIconProps {
|
|
|
5360
5545
|
onFocus?: React__default.FocusEventHandler<HTMLButtonElement>;
|
|
5361
5546
|
onClick: () => void;
|
|
5362
5547
|
label: string;
|
|
5548
|
+
onKeyDown?: (e: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
5363
5549
|
};
|
|
5364
5550
|
/**
|
|
5365
5551
|
* Pass in TextInput isReadOnly state.
|
|
@@ -5509,8 +5695,9 @@ interface TruncateProps {
|
|
|
5509
5695
|
}
|
|
5510
5696
|
|
|
5511
5697
|
/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
|
|
5512
|
-
declare const TypographyCard: ({ url, onClick, heading, metaText, label, minHeight, headingSize, linkData, pathway, buttonIcon, headingLevel, labelLevel, headingWordWrap, ...props }: TypographyCardProps) => React__default.JSX.Element;
|
|
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;
|
|
5513
5699
|
type TypographyCardPathway = "light" | "dark";
|
|
5700
|
+
type AspectRatios = "3-4" | "10-16";
|
|
5514
5701
|
interface TypographyCardProps {
|
|
5515
5702
|
/**
|
|
5516
5703
|
* Heading for the TypographyCard.
|
|
@@ -5524,6 +5711,10 @@ interface TypographyCardProps {
|
|
|
5524
5711
|
* Url for the TypographyCard.
|
|
5525
5712
|
*/
|
|
5526
5713
|
url: string;
|
|
5714
|
+
/**
|
|
5715
|
+
* Text content for the TypographyCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
|
|
5716
|
+
*/
|
|
5717
|
+
text?: string;
|
|
5527
5718
|
/**
|
|
5528
5719
|
* Sets a dark or light background for the TypographyCard.
|
|
5529
5720
|
*/
|
|
@@ -5567,6 +5758,18 @@ interface TypographyCardProps {
|
|
|
5567
5758
|
* Whether long words in heading should be wrapped.
|
|
5568
5759
|
*/
|
|
5569
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
|
+
};
|
|
5570
5773
|
}
|
|
5571
5774
|
|
|
5572
5775
|
/**
|
|
@@ -5966,4 +6169,4 @@ interface NavigationHeaderPageProps {
|
|
|
5966
6169
|
*/
|
|
5967
6170
|
declare const useMediaQuery: (mediaQuery: string) => boolean;
|
|
5968
6171
|
|
|
5969
|
-
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 };
|