@arc-ui/components 11.22.0 → 11.24.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/dist/Alert/Alert.cjs.js +1 -1
- package/dist/Alert/Alert.esm.js +1 -1
- package/dist/Avatar/Avatar.cjs.js +1 -1
- package/dist/Avatar/Avatar.esm.js +1 -1
- package/dist/AvatarGroup/AvatarGroup.cjs.js +2 -1
- package/dist/AvatarGroup/AvatarGroup.esm.js +2 -1
- package/dist/Badge/Badge.cjs.js +1 -1
- package/dist/Badge/Badge.esm.js +1 -1
- package/dist/Button/Button.cjs.js +1 -1
- package/dist/Button/Button.esm.js +1 -1
- package/dist/Calendar/Calendar.cjs.js +2 -2
- package/dist/Calendar/Calendar.esm.js +2 -2
- package/dist/Checkbox/Checkbox.cjs.js +4 -4
- package/dist/Checkbox/Checkbox.esm.js +4 -4
- package/dist/DatePicker/DatePicker.cjs.js +8 -5
- package/dist/DatePicker/DatePicker.esm.js +8 -5
- package/dist/Disclosure/Disclosure.cjs.js +1 -2
- package/dist/Disclosure/Disclosure.esm.js +1 -2
- package/dist/DisclosureMini/DisclosureMini.cjs.js +1 -1
- package/dist/DisclosureMini/DisclosureMini.esm.js +1 -1
- package/dist/Filter/Filter.cjs.js +2 -1
- package/dist/Filter/Filter.esm.js +2 -1
- package/dist/FormControl/FormControl.cjs.js +3 -3
- package/dist/FormControl/FormControl.esm.js +3 -3
- package/dist/Grid/Grid.cjs.js +13 -0
- package/dist/Grid/Grid.esm.js +5 -0
- package/dist/Grid/package.json +7 -0
- package/dist/Hidden/Hidden.cjs.js +24 -0
- package/dist/Hidden/Hidden.esm.js +16 -0
- package/dist/Hidden/package.json +7 -0
- package/dist/ImpactCard/ImpactCard.cjs.js +1 -0
- package/dist/ImpactCard/ImpactCard.esm.js +1 -0
- package/dist/InformationCard/InformationCard.cjs.js +3 -2
- package/dist/InformationCard/InformationCard.esm.js +3 -2
- package/dist/Link/Link.cjs.js +76 -0
- package/dist/Link/Link.esm.js +68 -0
- package/dist/Link/package.json +7 -0
- package/dist/Modal/Modal.cjs.js +3 -3
- package/dist/Modal/Modal.esm.js +3 -3
- package/dist/Pagination/Pagination.cjs.js +1 -1
- package/dist/Pagination/Pagination.esm.js +1 -1
- package/dist/PaginationSimple/PaginationSimple.cjs.js +6 -10
- package/dist/PaginationSimple/PaginationSimple.esm.js +6 -10
- package/dist/ProgressBar/ProgressBar.cjs.js +8 -2
- package/dist/ProgressBar/ProgressBar.esm.js +8 -2
- package/dist/ProgressStepper/ProgressStepper.cjs.js +2 -2
- package/dist/ProgressStepper/ProgressStepper.esm.js +2 -2
- package/dist/RadioGroup/RadioGroup.cjs.js +4 -4
- package/dist/RadioGroup/RadioGroup.esm.js +4 -4
- package/dist/Select/Select.cjs.js +3 -3
- package/dist/Select/Select.esm.js +3 -3
- package/dist/SiteHeader/SiteHeader.cjs.js +2 -2
- package/dist/SiteHeader/SiteHeader.esm.js +2 -2
- package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +2 -2
- package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +2 -2
- package/dist/SkipLink/SkipLink.cjs.js +1 -0
- package/dist/SkipLink/SkipLink.esm.js +1 -0
- package/dist/Switch/Switch.cjs.js +4 -4
- package/dist/Switch/Switch.esm.js +4 -4
- package/dist/Tabs/Tabs.cjs.js +1 -1
- package/dist/Tabs/Tabs.esm.js +1 -1
- package/dist/Tag/Tag.cjs.js +1 -1
- package/dist/Tag/Tag.esm.js +1 -1
- package/dist/TextArea/TextArea.cjs.js +16 -15
- package/dist/TextArea/TextArea.esm.js +16 -15
- package/dist/TextInput/TextInput.cjs.js +4 -4
- package/dist/TextInput/TextInput.esm.js +4 -4
- package/dist/Toast/Toast.cjs.js +1 -1
- package/dist/Toast/Toast.esm.js +1 -1
- package/dist/TypographyCard/TypographyCard.cjs.js +1 -0
- package/dist/TypographyCard/TypographyCard.esm.js +1 -0
- package/dist/Visible/Visible.cjs.js +24 -0
- package/dist/Visible/Visible.esm.js +16 -0
- package/dist/Visible/package.json +7 -0
- package/dist/VisuallyHidden/VisuallyHidden.cjs.js +1 -1
- package/dist/VisuallyHidden/VisuallyHidden.esm.js +1 -1
- package/dist/_shared/cjs/{Avatar-12ece0dd.js → Avatar-f1b1c129.js} +1 -0
- package/dist/_shared/cjs/{Button-84533dc8.js → Button-6ba21d3b.js} +1 -1
- package/dist/_shared/cjs/{Calendar-c6ed5f2c.js → Calendar-b022545c.js} +4 -3
- package/dist/_shared/cjs/{Checkbox-8915fcd9.js → Checkbox-0253327b.js} +2 -2
- package/dist/_shared/cjs/{DisclosureMini-d0eeb6bb.js → DisclosureMini-09c749e5.js} +1 -2
- package/dist/_shared/cjs/{Filter-f4b73f5d.js → Filter-f9506dfa.js} +6 -2
- package/dist/_shared/cjs/{FormControl-5f3b6ce4.js → FormControl-68258ce1.js} +2 -2
- package/dist/_shared/cjs/Grid-da776e77.js +45 -0
- package/dist/_shared/cjs/{ProgressStepper-20a61620.js → ProgressStepper-57cfef1e.js} +3 -3
- package/dist/_shared/cjs/{RadioGroup-07bb155e.js → RadioGroup-85eda600.js} +2 -2
- package/dist/_shared/cjs/{SiteHeader.rehydrator-ea49f8d5.js → SiteHeader.rehydrator-b76b0889.js} +1 -1
- package/dist/_shared/cjs/{SiteHeaderV2-e0735a9d.js → SiteHeaderV2-ce1c8737.js} +1 -1
- package/dist/_shared/cjs/{Tabs-24e6f45b.js → Tabs-bc9fac46.js} +1 -0
- package/dist/_shared/cjs/{Tag-8723b324.js → Tag-73a59171.js} +5 -5
- package/dist/_shared/cjs/{TextInput-5da70ec2.js → TextInput-8d139489.js} +7 -7
- package/dist/_shared/cjs/{Toast-7a20d1b9.js → Toast-26207fef.js} +1 -1
- package/dist/_shared/cjs/{VisuallyHidden-e2c8b291.js → VisuallyHidden-b0de4c7b.js} +1 -1
- package/dist/_shared/esm/{Avatar-d01e2b7b.js → Avatar-320313f0.js} +1 -0
- package/dist/_shared/esm/{Button-3f294e64.js → Button-a7d134c6.js} +1 -1
- package/dist/_shared/esm/{Calendar-753ef6f1.js → Calendar-ea232839.js} +4 -3
- package/dist/_shared/esm/{Checkbox-0e051546.js → Checkbox-588619c7.js} +2 -2
- package/dist/_shared/esm/{DisclosureMini-ec17b008.js → DisclosureMini-56719716.js} +1 -2
- package/dist/_shared/esm/{Filter-ad254e3d.js → Filter-258ba675.js} +6 -2
- package/dist/_shared/esm/{FormControl-cc99cde0.js → FormControl-8e836656.js} +2 -2
- package/dist/_shared/esm/Grid-07dbf4bd.js +39 -0
- package/dist/_shared/esm/{ProgressStepper-74d48612.js → ProgressStepper-6c811282.js} +3 -3
- package/dist/_shared/esm/{RadioGroup-362be63f.js → RadioGroup-6c8f8454.js} +2 -2
- package/dist/_shared/esm/{SiteHeader.rehydrator-65c8cf71.js → SiteHeader.rehydrator-8ad7651b.js} +1 -1
- package/dist/_shared/esm/{SiteHeaderV2-c74b811b.js → SiteHeaderV2-a7c1b1cb.js} +1 -1
- package/dist/_shared/esm/{Tabs-a85af483.js → Tabs-9485cab6.js} +1 -0
- package/dist/_shared/esm/{Tag-664b85c8.js → Tag-cb35d57b.js} +5 -5
- package/dist/_shared/esm/{TextInput-1d1c5fd6.js → TextInput-c0388103.js} +7 -7
- package/dist/_shared/esm/{Toast-7a232e15.js → Toast-fcbfc194.js} +1 -1
- package/dist/_shared/esm/{VisuallyHidden-b9eebf71.js → VisuallyHidden-06692fd3.js} +1 -1
- package/dist/index.es.js +170 -47
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +173 -46
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3 -3
- package/dist/types/components/Alert/Alert.d.ts +1 -1
- package/dist/types/components/Avatar/Avatar.d.ts +1 -0
- package/dist/types/components/AvatarGroup/AvatarGroup.d.ts +1 -0
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/Button/Button.d.ts +1 -1
- package/dist/types/components/Calendar/Calendar.d.ts +1 -0
- package/dist/types/components/DatePicker/DatePicker.d.ts +3 -0
- package/dist/types/components/Disclosure/Disclosure.d.ts +1 -2
- package/dist/types/components/DisclosureMini/DisclosureMini.d.ts +1 -2
- package/dist/types/components/Filter/Filter.d.ts +1 -1
- package/dist/types/components/Filter/FilterItems/FilterItems.d.ts +4 -1
- package/dist/types/components/Grid/Grid.constants.d.ts +1 -0
- package/dist/types/components/Grid/Grid.d.ts +28 -0
- package/dist/types/components/Grid/Grid.types.d.ts +8 -0
- package/dist/types/components/Grid/components/Col/Col.d.ts +9 -0
- package/dist/types/components/Grid/components/Col/index.d.ts +1 -0
- package/dist/types/components/Grid/components/Row/Row.d.ts +9 -0
- package/dist/types/components/Grid/components/Row/index.d.ts +1 -0
- package/dist/types/components/Grid/index.d.ts +2 -0
- package/dist/types/components/Hidden/Hidden.d.ts +11 -0
- package/dist/types/components/Hidden/index.d.ts +1 -0
- package/dist/types/components/ImpactCard/ImpactCard.d.ts +1 -0
- package/dist/types/components/InformationCard/InformationCard.d.ts +1 -0
- package/dist/types/components/Link/Link.d.ts +52 -0
- package/dist/types/components/Link/index.d.ts +1 -0
- package/dist/types/components/Modal/Modal.d.ts +1 -1
- package/dist/types/components/Pagination/Pagination.d.ts +1 -1
- package/dist/types/components/PaginationSimple/PaginationSimple.d.ts +12 -4
- package/dist/types/components/ProgressBar/ProgressBar.d.ts +4 -0
- package/dist/types/components/ProgressStepper/ProgressStepper.d.ts +1 -1
- package/dist/types/components/SkipLink/SkipLink.d.ts +1 -0
- package/dist/types/components/Switch/Switch.d.ts +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +1 -0
- package/dist/types/components/Tag/Tag.d.ts +5 -1
- package/dist/types/components/TextArea/TextArea.d.ts +5 -0
- package/dist/types/components/TextInput/TextInput.d.ts +8 -0
- package/dist/types/components/Toast/Toast.d.ts +1 -1
- package/dist/types/components/TypographyCard/TypographyCard.d.ts +1 -0
- package/dist/types/components/Visible/Visible.d.ts +11 -0
- package/dist/types/components/Visible/index.d.ts +1 -0
- package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts +1 -1
- package/dist/types/components/index.d.ts +4 -0
- package/dist/types/styles.d.ts +4 -0
- package/dist/types/types/auto-complete-types.d.ts +1 -0
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
|
@@ -557,7 +557,7 @@ const BtIconTick = (props) =>
|
|
|
557
557
|
),
|
|
558
558
|
);
|
|
559
559
|
|
|
560
|
-
/**
|
|
560
|
+
/** Use `Alert` to inform the user of important changes or actions. */
|
|
561
561
|
var Alert = function (_a) {
|
|
562
562
|
var _b;
|
|
563
563
|
var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
|
|
@@ -802,6 +802,7 @@ var AvatarContent = function (_a) {
|
|
|
802
802
|
return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
|
|
803
803
|
};
|
|
804
804
|
|
|
805
|
+
/** Use `Avatar` to visually represent a user. */
|
|
805
806
|
var Avatar = function (_a) {
|
|
806
807
|
var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
|
|
807
808
|
var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
|
|
@@ -819,6 +820,7 @@ var getAvatars = function (avatars, max) {
|
|
|
819
820
|
: []), true);
|
|
820
821
|
};
|
|
821
822
|
|
|
823
|
+
/** Use `AvatarGroup` to visually represent a group of users. */
|
|
822
824
|
var AvatarGroup = function (_a) {
|
|
823
825
|
var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
|
|
824
826
|
var id = useId();
|
|
@@ -828,7 +830,7 @@ var AvatarGroup = function (_a) {
|
|
|
828
830
|
React__default.createElement(Avatar, __assign({ size: size }, props)))); }))));
|
|
829
831
|
};
|
|
830
832
|
|
|
831
|
-
/** Use `Badge`
|
|
833
|
+
/** Use `Badge` as a static, non-interactive way to provide short updates. */
|
|
832
834
|
var Badge = function (_a) {
|
|
833
835
|
var _b, _c;
|
|
834
836
|
var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "size", "fill", "ariaLabel", "ariaRole"]);
|
|
@@ -1608,7 +1610,7 @@ const BtIconChevronRightMid = (props) =>
|
|
|
1608
1610
|
);
|
|
1609
1611
|
|
|
1610
1612
|
/**
|
|
1611
|
-
* Use `Button` to
|
|
1613
|
+
* Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
|
|
1612
1614
|
*/
|
|
1613
1615
|
var Button = forwardRef(function (_a, ref) {
|
|
1614
1616
|
var _b;
|
|
@@ -1877,8 +1879,7 @@ const BtIconChevronDown2Px = (props) =>
|
|
|
1877
1879
|
);
|
|
1878
1880
|
|
|
1879
1881
|
/**
|
|
1880
|
-
* Use `DisclosureMini` to
|
|
1881
|
-
* an "open" state.
|
|
1882
|
+
* Use `DisclosureMini` to show and hide sections of content.
|
|
1882
1883
|
*/
|
|
1883
1884
|
var DisclosureMini = function (_a) {
|
|
1884
1885
|
var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
|
|
@@ -1907,7 +1908,7 @@ var DisclosureMini = function (_a) {
|
|
|
1907
1908
|
};
|
|
1908
1909
|
|
|
1909
1910
|
/**
|
|
1910
|
-
*
|
|
1911
|
+
* Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
|
|
1911
1912
|
*/
|
|
1912
1913
|
var VisuallyHidden = function (_a) {
|
|
1913
1914
|
var children = _a.children;
|
|
@@ -2010,7 +2011,7 @@ var Checkbox = forwardRef(function (_a, ref) {
|
|
|
2010
2011
|
React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
|
|
2011
2012
|
"arc-Checkbox-label--top": checkboxAlignment === "top"
|
|
2012
2013
|
}) },
|
|
2013
|
-
React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
|
|
2014
|
+
React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
|
|
2014
2015
|
React__default.createElement("span", { className: "arc-Checkbox-box" },
|
|
2015
2016
|
React__default.createElement(BtIconTickAlt2Px, null)),
|
|
2016
2017
|
React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
|
|
@@ -2062,7 +2063,7 @@ var Columns = function (_a) {
|
|
|
2062
2063
|
var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isGutterless"]);
|
|
2063
2064
|
useEffect(function () {
|
|
2064
2065
|
React__default.Children.map(children, function (item) {
|
|
2065
|
-
if (item && item.type !== Col) {
|
|
2066
|
+
if (item && item.type !== Col$1) {
|
|
2066
2067
|
throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
|
|
2067
2068
|
}
|
|
2068
2069
|
});
|
|
@@ -2073,7 +2074,7 @@ var Columns = function (_a) {
|
|
|
2073
2074
|
}) }, filterDataAttrs(props)),
|
|
2074
2075
|
React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
|
|
2075
2076
|
};
|
|
2076
|
-
var Col = function (_a) {
|
|
2077
|
+
var Col$1 = function (_a) {
|
|
2077
2078
|
var _b;
|
|
2078
2079
|
var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
|
|
2079
2080
|
return (React__default.createElement("div", __assign({ className: classNames((_b = {},
|
|
@@ -2097,7 +2098,7 @@ var Col = function (_a) {
|
|
|
2097
2098
|
_b["arc-Columns-col--debugVisible"] = isDebugVisible,
|
|
2098
2099
|
_b)) }, filterDataAttrs(props)), children));
|
|
2099
2100
|
};
|
|
2100
|
-
Columns.Col = Col;
|
|
2101
|
+
Columns.Col = Col$1;
|
|
2101
2102
|
|
|
2102
2103
|
/**
|
|
2103
2104
|
#### Deprecation Notice
|
|
@@ -2121,8 +2122,7 @@ var Curve = function (_a) {
|
|
|
2121
2122
|
};
|
|
2122
2123
|
|
|
2123
2124
|
/**
|
|
2124
|
-
* Use `Disclosure` to
|
|
2125
|
-
* an "open" state.
|
|
2125
|
+
* Use `Disclosure` to show and hide sections of content.
|
|
2126
2126
|
*/
|
|
2127
2127
|
var Disclosure = function (_a) {
|
|
2128
2128
|
var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
|
|
@@ -2169,7 +2169,10 @@ var FilterControl = function (_a) {
|
|
|
2169
2169
|
"arc-FilterControl--onDarkSurface": surface === "dark",
|
|
2170
2170
|
"arc-FilterControl--selected": selected
|
|
2171
2171
|
}), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
|
|
2172
|
-
React__default.createElement("div", { className: "arc-FilterControl-text" },
|
|
2172
|
+
React__default.createElement("div", { className: "arc-FilterControl-text" },
|
|
2173
|
+
React__default.createElement(VisuallyHidden, null, "Filter by"),
|
|
2174
|
+
" ",
|
|
2175
|
+
children)));
|
|
2173
2176
|
};
|
|
2174
2177
|
|
|
2175
2178
|
var FilterControls = function (_a) {
|
|
@@ -2202,7 +2205,7 @@ var FilterItems = function (_a) {
|
|
|
2202
2205
|
: children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
|
|
2203
2206
|
};
|
|
2204
2207
|
|
|
2205
|
-
/**
|
|
2208
|
+
/** Use `Filter` to filter and categorise page content. */
|
|
2206
2209
|
var Filter = function (_a) {
|
|
2207
2210
|
var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
|
|
2208
2211
|
var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
|
|
@@ -2266,6 +2269,39 @@ Filter.Control = FilterControl;
|
|
|
2266
2269
|
Filter.Items = FilterItems;
|
|
2267
2270
|
Filter.Item = FilterItem;
|
|
2268
2271
|
|
|
2272
|
+
var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
|
|
2273
|
+
|
|
2274
|
+
var Col = function (props) {
|
|
2275
|
+
return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
|
|
2276
|
+
var _a;
|
|
2277
|
+
var _b, _c;
|
|
2278
|
+
var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
|
|
2279
|
+
var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
|
|
2280
|
+
var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
|
|
2281
|
+
return __assign(__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a));
|
|
2282
|
+
}, {})) }, filterDataAttrs(props)), props.children));
|
|
2283
|
+
};
|
|
2284
|
+
|
|
2285
|
+
var Row = function (_a) {
|
|
2286
|
+
var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = __rest(_a, ["direction", "align", "justify", "children"]);
|
|
2287
|
+
return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-row", "".concat(suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier("arc-Grid-row--align", align))) }, filterDataAttrs(props)), children));
|
|
2288
|
+
};
|
|
2289
|
+
|
|
2290
|
+
/**
|
|
2291
|
+
* Use `Grid` to compose layouts on a 12-column grid.
|
|
2292
|
+
*/
|
|
2293
|
+
var Grid = function (_a) {
|
|
2294
|
+
var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
|
|
2295
|
+
return (React__default.createElement("div", __assign({ className: classNames("arc-Grid", {
|
|
2296
|
+
"arc-Grid--fluid": isFluid,
|
|
2297
|
+
"arc-Grid--debugVisible": isDebugVisible,
|
|
2298
|
+
"arc-Grid--gutterless": isGutterless
|
|
2299
|
+
}) }, filterDataAttrs(props)),
|
|
2300
|
+
React__default.createElement("div", { className: "arc-Grid-inner" }, children)));
|
|
2301
|
+
};
|
|
2302
|
+
Grid.Row = Row;
|
|
2303
|
+
Grid.Col = Col;
|
|
2304
|
+
|
|
2269
2305
|
/**
|
|
2270
2306
|
* Use `Group` to arrange flexible items in a row.
|
|
2271
2307
|
*/
|
|
@@ -2301,6 +2337,17 @@ var GroupItem = function (_a) {
|
|
|
2301
2337
|
};
|
|
2302
2338
|
Group.Item = GroupItem;
|
|
2303
2339
|
|
|
2340
|
+
var Hidden = function (_a) {
|
|
2341
|
+
var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
|
|
2342
|
+
return (React__default.createElement("div", __assign({ className: classNames({
|
|
2343
|
+
"arc-Hidden--xs": xs,
|
|
2344
|
+
"arc-Hidden--s": s,
|
|
2345
|
+
"arc-Hidden--m": m,
|
|
2346
|
+
"arc-Hidden--l": l,
|
|
2347
|
+
"arc-Hidden--xl": xl
|
|
2348
|
+
}) }, filterDataAttrs(props)), children));
|
|
2349
|
+
};
|
|
2350
|
+
|
|
2304
2351
|
/**
|
|
2305
2352
|
* Do not edit directly
|
|
2306
2353
|
* Generated file
|
|
@@ -2348,10 +2395,10 @@ const BtIconCrossFill = (props) =>
|
|
|
2348
2395
|
);
|
|
2349
2396
|
|
|
2350
2397
|
/**
|
|
2351
|
-
*
|
|
2398
|
+
* Use `Tag` to promote features and manage filtering.
|
|
2352
2399
|
*/
|
|
2353
2400
|
var Tag = function (_a) {
|
|
2354
|
-
var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
|
|
2401
|
+
var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
|
|
2355
2402
|
var surface = useContext(Context$5).surface;
|
|
2356
2403
|
var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
|
|
2357
2404
|
var onRemoveHandler = function () {
|
|
@@ -2368,13 +2415,13 @@ var Tag = function (_a) {
|
|
|
2368
2415
|
link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
|
|
2369
2416
|
icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
|
|
2370
2417
|
React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
|
|
2371
|
-
React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
|
|
2418
|
+
React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
|
|
2372
2419
|
icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
|
|
2373
2420
|
React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
|
|
2374
|
-
React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
|
|
2421
|
+
React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
|
|
2375
2422
|
icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
|
|
2376
2423
|
React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
|
|
2377
|
-
React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
|
|
2424
|
+
React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))))),
|
|
2378
2425
|
isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
|
|
2379
2426
|
React__default.createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
|
|
2380
2427
|
React__default.createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
|
|
@@ -2398,6 +2445,7 @@ var VerticalSpace = function (_a) {
|
|
|
2398
2445
|
_b)) }, filterDataAttrs(props))));
|
|
2399
2446
|
};
|
|
2400
2447
|
|
|
2448
|
+
/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
|
|
2401
2449
|
var InformationCard = function (_a) {
|
|
2402
2450
|
var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
|
|
2403
2451
|
var surface = useContext(Context$5).surface;
|
|
@@ -2444,6 +2492,7 @@ var InformationCard = function (_a) {
|
|
|
2444
2492
|
React__default.createElement(Image, __assign({}, footerLogo))))))));
|
|
2445
2493
|
};
|
|
2446
2494
|
|
|
2495
|
+
/** Use `ImpactCard` for important content that needs additional hierarchy and prominence. */
|
|
2447
2496
|
var ImpactCard = function (_a) {
|
|
2448
2497
|
var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "linkData", "pathway", "headingLevel", "buttonIcon"]);
|
|
2449
2498
|
var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
|
|
@@ -35410,7 +35459,7 @@ const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d95
|
|
|
35410
35459
|
const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
|
|
35411
35460
|
const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
|
|
35412
35461
|
|
|
35413
|
-
/** Use `Modal` to
|
|
35462
|
+
/** Use `Modal` to display information that needs immediate action from a user. */
|
|
35414
35463
|
var Modal = function (_a) {
|
|
35415
35464
|
var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
|
|
35416
35465
|
var arcRootElement = useContext(ArcRootElementContext);
|
|
@@ -35435,7 +35484,7 @@ var Modal = function (_a) {
|
|
|
35435
35484
|
return (React__default.createElement($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: isOpen },
|
|
35436
35485
|
React__default.createElement($5d3850c4d0b4e6c7$export$602eac185826482c, { container: arcRootElement || undefined },
|
|
35437
35486
|
React__default.createElement($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "arc-Modal-overlay" },
|
|
35438
|
-
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
|
|
35487
|
+
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
|
|
35439
35488
|
"arc-Modal-dialog--maxHeightWindow": isContentScrollable
|
|
35440
35489
|
}) }, filterDataAttrs(props)),
|
|
35441
35490
|
React__default.createElement("div", { className: "arc-Modal-section" },
|
|
@@ -35493,7 +35542,7 @@ var usePagination = function (pageCount, selectedPage) {
|
|
|
35493
35542
|
};
|
|
35494
35543
|
|
|
35495
35544
|
/**
|
|
35496
|
-
* Use `Pagination` to navigate multiple pages.
|
|
35545
|
+
* Use `Pagination` to navigate through multiple pages of content.
|
|
35497
35546
|
*/
|
|
35498
35547
|
var Pagination = function (_a) {
|
|
35499
35548
|
var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
|
|
@@ -35526,10 +35575,10 @@ var Pagination = function (_a) {
|
|
|
35526
35575
|
};
|
|
35527
35576
|
|
|
35528
35577
|
/**
|
|
35529
|
-
* Use `PaginationSimple` to navigate multiple pages.
|
|
35578
|
+
* Use `PaginationSimple` to navigate through multiple pages of content.
|
|
35530
35579
|
*/
|
|
35531
35580
|
var PaginationSimple = function (_a) {
|
|
35532
|
-
var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "onPrevPage", "onNextPage", "isFluid"]);
|
|
35581
|
+
var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
|
|
35533
35582
|
var surface = useContext(Context$5).surface;
|
|
35534
35583
|
return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
|
|
35535
35584
|
"arc-PaginationSimple--onDarkSurface": surface === "dark",
|
|
@@ -35538,20 +35587,16 @@ var PaginationSimple = function (_a) {
|
|
|
35538
35587
|
}) }, filterDataAttrs(props)),
|
|
35539
35588
|
React__default.createElement("ul", { className: "arc-PaginationSimple-list" },
|
|
35540
35589
|
React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
|
|
35541
|
-
React__default.createElement("
|
|
35590
|
+
React__default.createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
|
|
35542
35591
|
"arc-PaginationSimple-navigationButton--hidden": hidePrev
|
|
35543
|
-
}), onClick:
|
|
35544
|
-
onPrevPage();
|
|
35545
|
-
} },
|
|
35592
|
+
}), onClick: onPrevPage },
|
|
35546
35593
|
React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
|
|
35547
35594
|
React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
|
|
35548
35595
|
React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
|
|
35549
35596
|
React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
|
|
35550
|
-
React__default.createElement("
|
|
35597
|
+
React__default.createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
|
|
35551
35598
|
"arc-PaginationSimple-navigationButton--hidden": hideNext
|
|
35552
|
-
}), onClick:
|
|
35553
|
-
onNextPage();
|
|
35554
|
-
} },
|
|
35599
|
+
}), onClick: onNextPage },
|
|
35555
35600
|
React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
|
|
35556
35601
|
React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
|
|
35557
35602
|
React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))))));
|
|
@@ -35630,10 +35675,16 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
|
|
|
35630
35675
|
return isIndeterminate ? indeterminateProps : determinateProps;
|
|
35631
35676
|
};
|
|
35632
35677
|
|
|
35678
|
+
/**
|
|
35679
|
+
* Use `ProgressBar` to show the progress of a specific task within a page.
|
|
35680
|
+
*/
|
|
35633
35681
|
var ProgressBar = function (_a) {
|
|
35634
35682
|
var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
|
|
35635
35683
|
var surface = useContext(Context$5).surface;
|
|
35636
35684
|
var progressValue = Math.min(100, Math.max(0, value));
|
|
35685
|
+
var autoFocusRef = function (canFocus) { return function (el) {
|
|
35686
|
+
canFocus && el && el.focus();
|
|
35687
|
+
}; };
|
|
35637
35688
|
return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
|
|
35638
35689
|
"arc-ProgressBar--onDarkSurface": surface === "dark"
|
|
35639
35690
|
}) }, filterDataAttrs(props)),
|
|
@@ -35647,11 +35698,11 @@ var ProgressBar = function (_a) {
|
|
|
35647
35698
|
React__default.createElement("div", { className: "arc-ProgressBar-container" },
|
|
35648
35699
|
React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
|
|
35649
35700
|
React__default.createElement("div", __assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
|
|
35650
|
-
description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
|
|
35701
|
+
description && (React__default.createElement("div", { className: "arc-ProgressBar-description", role: "status" },
|
|
35651
35702
|
React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
|
|
35652
35703
|
action && (React__default.createElement(React__default.Fragment, null,
|
|
35653
35704
|
React__default.createElement(VerticalSpace, { size: "8" }),
|
|
35654
|
-
React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
|
|
35705
|
+
React__default.createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
|
|
35655
35706
|
React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
|
|
35656
35707
|
React__default.createElement(Text, null, action.text),
|
|
35657
35708
|
action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
|
|
@@ -35723,13 +35774,13 @@ var ProgressStepperItem = function (_a) {
|
|
|
35723
35774
|
status !== "todo" && (React__default.createElement(VisuallyHidden, null,
|
|
35724
35775
|
capitaliseFirstLetter(status),
|
|
35725
35776
|
":")),
|
|
35726
|
-
titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
|
|
35777
|
+
titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
|
|
35727
35778
|
React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
|
|
35728
35779
|
stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
|
|
35729
35780
|
React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
|
|
35730
35781
|
};
|
|
35731
35782
|
|
|
35732
|
-
/** Use `ProgressStepper` to
|
|
35783
|
+
/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
|
|
35733
35784
|
var ProgressStepper = function (_a) {
|
|
35734
35785
|
var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
|
|
35735
35786
|
var items = React__default.Children.toArray(children);
|
|
@@ -35770,7 +35821,7 @@ var RadioButton = forwardRef(function (_a, ref) {
|
|
|
35770
35821
|
React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
|
|
35771
35822
|
"arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
|
|
35772
35823
|
}), htmlFor: id, id: idLabel },
|
|
35773
|
-
React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
|
|
35824
|
+
React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
|
|
35774
35825
|
React__default.createElement("span", { className: classNames({
|
|
35775
35826
|
"arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
|
|
35776
35827
|
}) },
|
|
@@ -41174,7 +41225,7 @@ function $6be4966fd9bbc698$var$getState(checked) {
|
|
|
41174
41225
|
const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
|
|
41175
41226
|
const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
|
|
41176
41227
|
|
|
41177
|
-
/** Use `Switch` to toggle between
|
|
41228
|
+
/** Use `Switch` to allow users to immediately toggle between two states. */
|
|
41178
41229
|
var Switch = function (_a) {
|
|
41179
41230
|
var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
|
|
41180
41231
|
var surface = useContext(Context$5).surface;
|
|
@@ -41654,6 +41705,7 @@ var TabsList = function (_a) {
|
|
|
41654
41705
|
React__default.createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
|
|
41655
41706
|
};
|
|
41656
41707
|
|
|
41708
|
+
/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
|
|
41657
41709
|
var Tabs = function (_a) {
|
|
41658
41710
|
var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
|
|
41659
41711
|
return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
|
|
@@ -41664,7 +41716,7 @@ Tabs.Content = TabContent;
|
|
|
41664
41716
|
|
|
41665
41717
|
/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
|
|
41666
41718
|
var TextArea = forwardRef(function (_a, ref) {
|
|
41667
|
-
var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width"]);
|
|
41719
|
+
var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete"]);
|
|
41668
41720
|
var surface = useContext(Context$5).surface;
|
|
41669
41721
|
var ourRef = useRef(null);
|
|
41670
41722
|
var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
|
|
@@ -41699,15 +41751,12 @@ var TextArea = forwardRef(function (_a, ref) {
|
|
|
41699
41751
|
"arc-TextArea--noResize": resize !== "manual",
|
|
41700
41752
|
"arc-TextArea--onDarkSurface": surface === "dark",
|
|
41701
41753
|
"arc-TextArea--invalid": errorMessage
|
|
41702
|
-
}), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
|
|
41754
|
+
}), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper"), autoComplete: autoComplete })));
|
|
41703
41755
|
});
|
|
41704
41756
|
|
|
41705
|
-
/**
|
|
41706
|
-
* Use `TextInput` to allow custom user text entry with a keyboard.
|
|
41707
|
-
*/
|
|
41708
41757
|
var TextInputComponent = forwardRef(function (_a, ref) {
|
|
41709
41758
|
var _b;
|
|
41710
|
-
var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
|
|
41759
|
+
var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete"]);
|
|
41711
41760
|
var surface = useContext(Context$5).surface;
|
|
41712
41761
|
var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
|
|
41713
41762
|
var inferredInputProps = useNumericInput({
|
|
@@ -41743,7 +41792,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
|
|
|
41743
41792
|
React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
|
|
41744
41793
|
React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width } },
|
|
41745
41794
|
prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
|
|
41746
|
-
React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
|
|
41795
|
+
React__default.createElement("input", __assign({ placeholder: placeholder, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined, autoComplete: autoComplete }, inferredInputProps)),
|
|
41747
41796
|
iconButton && !showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
|
|
41748
41797
|
React__default.createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
|
|
41749
41798
|
e.preventDefault();
|
|
@@ -41759,6 +41808,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
|
|
|
41759
41808
|
? "Your password is shown"
|
|
41760
41809
|
: "Your password is hidden")))))))));
|
|
41761
41810
|
});
|
|
41811
|
+
/**
|
|
41812
|
+
* Use `TextInput` to allow users to enter short form text.
|
|
41813
|
+
*/
|
|
41762
41814
|
var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
|
|
41763
41815
|
forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
|
|
41764
41816
|
|
|
@@ -42700,7 +42752,7 @@ var ToastNotification = function (_a) {
|
|
|
42700
42752
|
React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
|
|
42701
42753
|
};
|
|
42702
42754
|
|
|
42703
|
-
/** Use `Toast` to display temporary messages at the bottom of the
|
|
42755
|
+
/** Use `Toast` to display temporary messages at the bottom of the screen. */
|
|
42704
42756
|
var Toast = function (_a) {
|
|
42705
42757
|
var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = __rest(_a, ["children", "colorScheme"]);
|
|
42706
42758
|
return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
|
|
@@ -42715,6 +42767,7 @@ var Truncate = function (_a) {
|
|
|
42715
42767
|
return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
|
|
42716
42768
|
};
|
|
42717
42769
|
|
|
42770
|
+
/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
|
|
42718
42771
|
var TypographyCard = function (_a) {
|
|
42719
42772
|
var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "linkData", "pathway", "buttonIcon", "headingLevel"]);
|
|
42720
42773
|
var surface = useContext(Context$5).surface;
|
|
@@ -42759,5 +42812,75 @@ var UniversalHeaderItem = function (_a) {
|
|
|
42759
42812
|
};
|
|
42760
42813
|
UniversalHeader.Item = UniversalHeaderItem;
|
|
42761
42814
|
|
|
42762
|
-
|
|
42815
|
+
var Visible = function (_a) {
|
|
42816
|
+
var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
|
|
42817
|
+
return (React__default.createElement("div", __assign({ className: classNames("arc-Visible", {
|
|
42818
|
+
"arc-Visible--xs": xs,
|
|
42819
|
+
"arc-Visible--s": s,
|
|
42820
|
+
"arc-Visible--m": m,
|
|
42821
|
+
"arc-Visible--l": l,
|
|
42822
|
+
"arc-Visible--xl": xl
|
|
42823
|
+
}) }, filterDataAttrs(props)), children));
|
|
42824
|
+
};
|
|
42825
|
+
|
|
42826
|
+
const BtIconNewWindow = (props) =>
|
|
42827
|
+
/*#__PURE__*/ React__default.createElement(
|
|
42828
|
+
"svg",
|
|
42829
|
+
Object.assign(
|
|
42830
|
+
{
|
|
42831
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
42832
|
+
viewBox: "0 0 32 32",
|
|
42833
|
+
},
|
|
42834
|
+
props,
|
|
42835
|
+
),
|
|
42836
|
+
/*#__PURE__*/ React__default.createElement("defs", null),
|
|
42837
|
+
/*#__PURE__*/ React__default.createElement("path", {
|
|
42838
|
+
d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
|
|
42839
|
+
fill: "currentColor",
|
|
42840
|
+
}),
|
|
42841
|
+
/*#__PURE__*/ React__default.createElement("path", {
|
|
42842
|
+
d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
|
|
42843
|
+
fill: "currentColor",
|
|
42844
|
+
}),
|
|
42845
|
+
);
|
|
42846
|
+
|
|
42847
|
+
/**
|
|
42848
|
+
* Use `Link` to direct users to a new page or piece of information.
|
|
42849
|
+
*/
|
|
42850
|
+
var Link = function (_a) {
|
|
42851
|
+
var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
|
|
42852
|
+
var surface = useContext(Context$5).surface;
|
|
42853
|
+
var isExternalLink = target === "_blank";
|
|
42854
|
+
var textArray = children.split(" ");
|
|
42855
|
+
var firstText = textArray.slice(0, -1).join(" ");
|
|
42856
|
+
var lastWord = textArray[textArray.length - 1];
|
|
42857
|
+
var commonProps = {
|
|
42858
|
+
id: id,
|
|
42859
|
+
onClick: onClick,
|
|
42860
|
+
className: classNames("arc-Link", "arc-Link--".concat(size), {
|
|
42861
|
+
"arc-Link--onDarkSurface": surface === "dark",
|
|
42862
|
+
"arc-Link--onLightSurface": surface !== "dark",
|
|
42863
|
+
"arc-Link--isImplied": isImplied
|
|
42864
|
+
})
|
|
42865
|
+
};
|
|
42866
|
+
var elementProps = {
|
|
42867
|
+
a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
|
|
42868
|
+
button: __assign({}, commonProps),
|
|
42869
|
+
span: __assign({}, commonProps)
|
|
42870
|
+
};
|
|
42871
|
+
var LinkElement = isButton ? "button" : href ? "a" : "span";
|
|
42872
|
+
return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterDataAttrs(props)),
|
|
42873
|
+
React__default.createElement("div", { className: "arc-Link-wrapper" },
|
|
42874
|
+
React__default.createElement(VisuallyHidden, null,
|
|
42875
|
+
screenReaderText || children,
|
|
42876
|
+
isExternalLink && " (Opens in new window)"),
|
|
42877
|
+
React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
|
|
42878
|
+
firstText,
|
|
42879
|
+
"\u00A0"),
|
|
42880
|
+
React__default.createElement("span", { className: "arc-Link-iconWrapper" },
|
|
42881
|
+
React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
|
|
42882
|
+
isExternalLink && (React__default.createElement(Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
|
|
42883
|
+
};
|
|
42884
|
+
|
|
42885
|
+
export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Grid, Group, Heading, Hidden, Icon, Image, ImpactCard, InformationCard, Link, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, Visible, VisuallyHidden };
|
|
42763
42886
|
//# sourceMappingURL=index.es.js.map
|