@arc-ui/components 12.0.0-beta.22 → 12.0.0-beta.23
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/Alert.cjs +22 -21
- package/lib/Alert/Alert.mjs +22 -21
- 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 +1 -1
- package/lib/Banner/Banner.mjs +1 -1
- package/lib/Box/styles.css +1 -1
- package/lib/BrandLogo/styles.css +1 -1
- package/lib/Breadcrumbs/Breadcrumbs.cjs +12 -3
- package/lib/Breadcrumbs/Breadcrumbs.mjs +12 -3
- 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 +11 -5
- package/lib/Carousel/Carousel.mjs +8 -2
- package/lib/Carousel/styles.css +1 -1
- package/lib/Checkbox/Checkbox.cjs +85 -11
- package/lib/Checkbox/Checkbox.mjs +87 -9
- package/lib/Checkbox/styles.css +1 -1
- package/lib/Columns/styles.css +1 -1
- package/lib/ComboBox/ComboBox.cjs +276 -11
- package/lib/ComboBox/ComboBox.mjs +279 -10
- package/lib/ComboBox/styles.css +1 -1
- package/lib/ContentSwitcher/ContentSwitcher.cjs +5 -6
- package/lib/ContentSwitcher/ContentSwitcher.mjs +5 -6
- package/lib/ContentSwitcher/styles.css +1 -1
- package/lib/ContentSwitcherDropdown/styles.css +1 -1
- package/lib/DatePicker/DatePicker.cjs +351 -38
- package/lib/DatePicker/DatePicker.mjs +329 -17
- package/lib/DatePicker/styles.css +1 -1
- package/lib/Disclosure/styles.css +1 -1
- package/lib/DisclosureMini/styles.css +1 -1
- package/lib/Download/styles.css +1 -1
- package/lib/Drawer/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 +55 -43
- package/lib/GradientPageBackground/GradientPageBackground.mjs +55 -43
- package/lib/GradientPageBackground/styles.css +1 -1
- 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 +1 -1
- package/lib/HeroBanner/HeroBanner.mjs +1 -1
- package/lib/HeroBanner/styles.css +1 -1
- package/lib/HeroButton/HeroButton.cjs +77 -9
- package/lib/HeroButton/HeroButton.mjs +80 -8
- 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 +3 -3
- package/lib/ImpactCard/ImpactCard.mjs +3 -3
- package/lib/ImpactCard/styles.css +1 -1
- package/lib/InformationCard/InformationCard.cjs +6 -6
- package/lib/InformationCard/InformationCard.mjs +6 -6
- package/lib/InformationCard/styles.css +1 -1
- package/lib/Link/Link.cjs +1 -1
- package/lib/Link/Link.mjs +1 -1
- package/lib/Link/styles.css +1 -1
- package/lib/Markup/styles.css +1 -1
- package/lib/MediaCard/MediaCard.cjs +53 -14
- package/lib/MediaCard/MediaCard.mjs +55 -12
- package/lib/MediaCard/styles.css +1 -1
- package/lib/Menu/Menu.cjs +1327 -25
- package/lib/Menu/Menu.mjs +1292 -9
- package/lib/Menu/styles.css +1 -1
- package/lib/Modal/styles.css +1 -1
- package/lib/NavigationHeader/NavigationHeader.cjs +743 -16
- package/lib/NavigationHeader/NavigationHeader.mjs +734 -7
- package/lib/NavigationHeader/styles.css +1 -1
- package/lib/Pagination/styles.css +1 -1
- package/lib/PaginationSimple/styles.css +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/ProgressStepperOverflow.cjs +138 -7
- package/lib/ProgressStepperOverflow/ProgressStepperOverflow.mjs +140 -5
- package/lib/ProgressStepperOverflow/styles.css +1 -1
- package/lib/RadioCardGroup/RadioCardGroup.cjs +48 -7
- package/lib/RadioCardGroup/RadioCardGroup.mjs +48 -8
- package/lib/RadioCardGroup/styles.css +1 -1
- package/lib/RadioGroup/RadioGroup.cjs +50 -8
- package/lib/RadioGroup/RadioGroup.mjs +49 -8
- package/lib/RadioGroup/styles.css +1 -1
- package/lib/Rule/styles.css +1 -1
- package/lib/ScrollToTop/styles.css +1 -1
- package/lib/Section/Section.cjs +1 -1
- package/lib/Section/Section.mjs +1 -1
- package/lib/Section/styles.css +1 -1
- package/lib/Select/styles.css +1 -1
- package/lib/SiteFooter/SiteFooter.cjs +1 -1
- package/lib/SiteFooter/SiteFooter.mjs +1 -1
- package/lib/SiteFooter/styles.css +1 -1
- package/lib/SiteFooterV2/SiteFooterV2.cjs +6 -5
- package/lib/SiteFooterV2/SiteFooterV2.mjs +6 -5
- package/lib/SiteFooterV2/styles.css +1 -1
- package/lib/SiteHeaderV2/SiteHeaderV2.cjs +440 -15
- package/lib/SiteHeaderV2/SiteHeaderV2.mjs +435 -11
- package/lib/SiteHeaderV2/styles.css +1 -1
- package/lib/Skeleton/styles.css +1 -1
- package/lib/SkipLink/styles.css +1 -1
- 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 +4 -5
- package/lib/TabbedBanner/TabbedBanner.mjs +4 -5
- package/lib/TabbedBanner/styles.css +1 -1
- package/lib/Tabs/Tabs.mjs +1 -1
- package/lib/Tabs/styles.css +1 -1
- package/lib/Tag/Tag.cjs +9 -9
- package/lib/Tag/Tag.mjs +9 -9
- package/lib/Tag/styles.css +1 -1
- package/lib/TemplateBanner/TemplateBanner.cjs +1 -1
- package/lib/TemplateBanner/TemplateBanner.mjs +1 -1
- package/lib/TemplateBanner/styles.css +1 -1
- package/lib/Text/styles.css +1 -1
- package/lib/TextArea/TextArea.cjs +2 -53
- package/lib/TextArea/TextArea.mjs +2 -53
- package/lib/TextArea/styles.css +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 +3 -3
- package/lib/TypographyCard/TypographyCard.mjs +3 -3
- 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-B-va25n2.cjs → Calendar-Bfdgf5q1.cjs} +1 -1
- package/lib/_shared/cjs/{ContentSwitcherList-bCEzIPN2.cjs → ContentSwitcherList-pcYtuT6L.cjs} +8 -0
- package/lib/_shared/cjs/{Link-7xUgVf1I.cjs → Link-C3OSQIIk.cjs} +3 -1
- package/lib/_shared/cjs/{Section-wUVdzmGA.cjs → Section-Bz2fwj8Z.cjs} +2 -2
- package/lib/_shared/cjs/{TemplateBanner-CImrJ9ON.cjs → TemplateBanner-COymAI91.cjs} +2 -2
- package/lib/_shared/cjs/{arc-breakpoints-DWUgmeLA.cjs → arc-breakpoints-CS8JVk5T.cjs} +1 -1
- package/lib/_shared/cjs/{index.es-DlNskPlN.cjs → index.es-fkulh7qu.cjs} +1 -1
- package/lib/_shared/esm/{Calendar-Bd2_eT1Y.mjs → Calendar-Drh_NJ9I.mjs} +1 -1
- package/lib/_shared/esm/{ContentSwitcherList-bCQz0qkU.mjs → ContentSwitcherList-DwHfU3no.mjs} +10 -3
- package/lib/_shared/esm/{Link-Biyg9qBH.mjs → Link-DxjGH_7f.mjs} +3 -1
- package/lib/_shared/esm/{Section-DDygQ5Az.mjs → Section-7InCvzfh.mjs} +2 -2
- package/lib/_shared/esm/{TemplateBanner-DeHjliNP.mjs → TemplateBanner-Dkgzu3A5.mjs} +2 -2
- package/lib/_shared/esm/{arc-breakpoints-D5hR5m3t.mjs → arc-breakpoints-D7Ie4kBt.mjs} +1 -1
- package/lib/_shared/esm/{index-BDWwJ5x2.mjs → index-BWkI4Dwz.mjs} +1 -1
- package/lib/_shared/esm/{index.es-C3WqfFKH.mjs → index.es-CtRkzfKP.mjs} +2 -2
- package/lib/index.cjs +300 -283
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +28 -3
- package/lib/index.d.mts +28 -3
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +301 -284
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +10 -10
- package/package.json +8 -8
- package/lib/_shared/cjs/BreadcrumbsLink-CDmk3Y3m.cjs +0 -18
- package/lib/_shared/cjs/Checkbox-DfZMjO1Y.cjs +0 -88
- package/lib/_shared/cjs/ComboBox-BGUhlqx1.cjs +0 -281
- package/lib/_shared/cjs/ContentSwitcherTab-B387Qs3I.cjs +0 -14
- package/lib/_shared/cjs/DatePicker-Dt4faA_N.cjs +0 -334
- package/lib/_shared/cjs/HeroButton-CrzkTUwP.cjs +0 -82
- package/lib/_shared/cjs/MediaCard-BEZFbiYO.cjs +0 -57
- package/lib/_shared/cjs/MenuItemMultiLevelContent-vLr6hSBm.cjs +0 -1328
- package/lib/_shared/cjs/ProgressStepperOverflow-BAGZNC26.cjs +0 -142
- package/lib/_shared/cjs/RadioCardGroupInput-CeUM3yPS.cjs +0 -53
- package/lib/_shared/cjs/RadioGroupInput-w2qkfsnG.cjs +0 -54
- package/lib/_shared/cjs/SiteHeaderV2NavItemWithSubNav-CagFKPEa.cjs +0 -445
- package/lib/_shared/cjs/kebabCase-D5yA6u-V.cjs +0 -743
- package/lib/_shared/cjs/keynames-Cx13-hWr.cjs +0 -8
- package/lib/_shared/esm/BreadcrumbsLink-BxTurGNa.mjs +0 -16
- package/lib/_shared/esm/Checkbox-CwOHzlQF.mjs +0 -86
- package/lib/_shared/esm/ComboBox-CRlJjeev.mjs +0 -279
- package/lib/_shared/esm/ContentSwitcherTab-CfC3PGeZ.mjs +0 -12
- package/lib/_shared/esm/DatePicker-DT4OEzxP.mjs +0 -324
- package/lib/_shared/esm/HeroButton-jdjjV_Gf.mjs +0 -80
- package/lib/_shared/esm/MediaCard-DqMaNWsE.mjs +0 -55
- package/lib/_shared/esm/MenuItemMultiLevelContent-JTOHqpzg.mjs +0 -1296
- package/lib/_shared/esm/ProgressStepperOverflow-fPkLltVO.mjs +0 -140
- package/lib/_shared/esm/RadioCardGroupInput-D7W28geB.mjs +0 -50
- package/lib/_shared/esm/RadioGroupInput-zAWSV29m.mjs +0 -50
- package/lib/_shared/esm/SiteHeaderV2NavItemWithSubNav-CxGwdV6u.mjs +0 -439
- package/lib/_shared/esm/kebabCase-CCEMRBfd.mjs +0 -737
- package/lib/_shared/esm/keynames-B5whqsjh.mjs +0 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arc-ui/components",
|
|
3
|
-
"version": "12.0.0-beta.
|
|
3
|
+
"version": "12.0.0-beta.23",
|
|
4
4
|
"homepage": "https://ui.digital-ent-int.bt.com",
|
|
5
5
|
"author": "BT Business Digital UI Team <ui-digital-ent-int@bt.com>",
|
|
6
6
|
"main": "./lib/index.cjs",
|
|
@@ -95,13 +95,13 @@
|
|
|
95
95
|
"ts-jest": "^29.2.5",
|
|
96
96
|
"tslib": "^2.8.1",
|
|
97
97
|
"typescript": "5.6.3",
|
|
98
|
-
"@arc-ui/css-config": "^12.0.0-beta.
|
|
99
|
-
"@arc-ui/eslint-config": "^12.0.0-beta.
|
|
100
|
-
"@arc-ui/helpers": "^12.0.0-beta.
|
|
101
|
-
"@arc-ui/icons": "^12.0.0-beta.
|
|
102
|
-
"@arc-ui/tokens-arc": "^12.0.0-beta.
|
|
103
|
-
"@arc-ui/typescript-config": "^12.0.0-beta.
|
|
104
|
-
"@arc-ui/tokens-bt-enterprise": "^12.0.0-beta.
|
|
98
|
+
"@arc-ui/css-config": "^12.0.0-beta.23",
|
|
99
|
+
"@arc-ui/eslint-config": "^12.0.0-beta.23",
|
|
100
|
+
"@arc-ui/helpers": "^12.0.0-beta.23",
|
|
101
|
+
"@arc-ui/icons": "^12.0.0-beta.23",
|
|
102
|
+
"@arc-ui/tokens-arc": "^12.0.0-beta.23",
|
|
103
|
+
"@arc-ui/typescript-config": "^12.0.0-beta.23",
|
|
104
|
+
"@arc-ui/tokens-bt-enterprise": "^12.0.0-beta.23"
|
|
105
105
|
},
|
|
106
106
|
"browserslist": [
|
|
107
107
|
"defaults",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('./index-CTlXMLug.cjs');
|
|
6
|
-
var handleLinkClick = require('./handle-link-click-C7BvOIYa.cjs');
|
|
7
|
-
|
|
8
|
-
var BreadcrumbsLink = React.forwardRef(function (_a, ref) {
|
|
9
|
-
var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
|
|
10
|
-
return (React.createElement(React.Fragment, null, isActive || href === undefined ? (React.createElement("span", { onClick: onClick, className: index.classNames({
|
|
11
|
-
"arc-Breadcrumbs-text": true,
|
|
12
|
-
"arc-Breadcrumbs-text--active": isActive,
|
|
13
|
-
}) }, children)) : (React.createElement("a", filterAttrs.__assign({}, (onClick && ref
|
|
14
|
-
? { onClick: onClick }
|
|
15
|
-
: { onClick: handleLinkClick.handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
exports.BreadcrumbsLink = BreadcrumbsLink;
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('./index-CTlXMLug.cjs');
|
|
6
|
-
var FormControl = require('./FormControl-BPnKQrCm.cjs');
|
|
7
|
-
var Surface = require('./Surface-BFx1yNsq.cjs');
|
|
8
|
-
var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
|
|
9
|
-
var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Use `Checkbox` to allow users to select individual options.
|
|
13
|
-
*/
|
|
14
|
-
var Checkbox = React.forwardRef(function (_a, ref) {
|
|
15
|
-
var _b = _a.checked, checked = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label, _e = _a.hideLabel, hideLabel = _e === void 0 ? false : _e, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _f = _a.size, size = _f === void 0 ? "m" : _f, value = _a.value, _g = _a.checkboxAlignment, checkboxAlignment = _g === void 0 ? "center" : _g, _h = _a.indeterminate, indeterminate = _h === void 0 ? false : _h, props = filterAttrs.__rest(_a, ["checked", "errorMessage", "helper", "id", "isDisabled", "isRequired", "label", "hideLabel", "name", "onBlur", "onChange", "size", "value", "checkboxAlignment", "indeterminate"]);
|
|
16
|
-
var requirementStatus = React.useContext(FormControl.Context).requirementStatus;
|
|
17
|
-
var surface = React.useContext(Surface.Context).surface;
|
|
18
|
-
var _j = FormControl.useAriaDescribedby({
|
|
19
|
-
id: id,
|
|
20
|
-
errorMessage: errorMessage,
|
|
21
|
-
}), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError;
|
|
22
|
-
var internalRef = React.useRef(null);
|
|
23
|
-
var synchronizeRefs = function (el) {
|
|
24
|
-
internalRef.current = el;
|
|
25
|
-
if (typeof ref === "object" && ref !== null) {
|
|
26
|
-
ref.current = el;
|
|
27
|
-
}
|
|
28
|
-
else if (typeof ref === "function") {
|
|
29
|
-
ref(el);
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
React.useEffect(function () {
|
|
33
|
-
if (internalRef.current) {
|
|
34
|
-
internalRef.current.indeterminate = indeterminate;
|
|
35
|
-
}
|
|
36
|
-
}, [indeterminate, checked]);
|
|
37
|
-
var tickSize = {
|
|
38
|
-
s: { width: 14, height: 11 },
|
|
39
|
-
m: { width: 18, height: 14 },
|
|
40
|
-
};
|
|
41
|
-
var idLabel = "".concat(id, "-label");
|
|
42
|
-
var checkedProps = {};
|
|
43
|
-
if (typeof onChange === "function") {
|
|
44
|
-
checkedProps.checked = checked;
|
|
45
|
-
}
|
|
46
|
-
else if (checked && !onChange) {
|
|
47
|
-
checkedProps.defaultChecked = true;
|
|
48
|
-
}
|
|
49
|
-
if (!checked && onChange) {
|
|
50
|
-
indeterminate = false;
|
|
51
|
-
}
|
|
52
|
-
if (requirementStatus === "required") {
|
|
53
|
-
isRequired = true;
|
|
54
|
-
}
|
|
55
|
-
return (React.createElement("div", { className: index.classNames({
|
|
56
|
-
"arc-Checkbox": true,
|
|
57
|
-
"arc-Checkbox--disabled": isDisabled,
|
|
58
|
-
"arc-Checkbox--invalid": errorMessage,
|
|
59
|
-
"arc-Checkbox--small": size === "s",
|
|
60
|
-
"arc-Checkbox--onDarkSurface": surface === "dark",
|
|
61
|
-
}) },
|
|
62
|
-
React.createElement("label", { id: idLabel, htmlFor: id, className: index.classNames("arc-Checkbox-label", {
|
|
63
|
-
"arc-Checkbox-label--top": checkboxAlignment === "top",
|
|
64
|
-
}) },
|
|
65
|
-
React.createElement("input", filterAttrs.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked && !indeterminate
|
|
66
|
-
? "true"
|
|
67
|
-
: indeterminate && checked
|
|
68
|
-
? "mixed"
|
|
69
|
-
: "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: synchronizeRefs, required: isRequired, type: "checkbox", value: value }, filterAttrs.filterAttrs(props))),
|
|
70
|
-
React.createElement("span", { className: "arc-Checkbox-box" }, indeterminate ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" },
|
|
71
|
-
React.createElement("rect", { x: "4", y: "8", width: "7.51", height: "1", rx: "0.5", fill: "currentColor" }))) : (React.createElement("svg", { style: tickSize[size], viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
72
|
-
React.createElement("path", { d: "M5.99459 14L0.350576 8.23277C0.126079 8.00285 0 7.69132 0 7.36653C0 7.04173 0.126079 6.7302 0.350576 6.50028C0.578979 6.27752 0.88258 6.15324 1.19832 6.15324C1.51405 6.15324 1.81765 6.27752 2.04606 6.50028L5.99459 10.535L15.9385 0.374054C16.0491 0.25703 16.1814 0.163688 16.3277 0.0994738C16.474 0.0352599 16.6313 0.00145997 16.7905 4.626e-05C16.9497 -0.00136745 17.1076 0.0296342 17.255 0.0912406C17.4023 0.152847 17.5362 0.243825 17.6488 0.358867C17.7614 0.473908 17.8504 0.610709 17.9107 0.761287C17.971 0.911865 18.0013 1.0732 18 1.23589C17.9986 1.39858 17.9655 1.55936 17.9026 1.70884C17.8398 1.85833 17.7485 1.99352 17.6339 2.10655L5.99459 14Z", fill: "currentColor" })))),
|
|
73
|
-
React.createElement("span", filterAttrs.__assign({}, (checkboxAlignment === "top" && {
|
|
74
|
-
className: "arc-Checkbox-content--marginTop",
|
|
75
|
-
})), hideLabel ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
|
|
76
|
-
label,
|
|
77
|
-
!isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
|
|
78
|
-
helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))) : (React.createElement(React.Fragment, null,
|
|
79
|
-
label,
|
|
80
|
-
!isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
|
|
81
|
-
helper && (React.createElement("span", { className: "arc-Checkbox-helper" }, helper)))))),
|
|
82
|
-
errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" },
|
|
83
|
-
React.createElement("span", { className: "arc-Checkbox-error--icon" },
|
|
84
|
-
React.createElement(ThemeIcon.ThemeIcon, { icon: "checkboxError" })),
|
|
85
|
-
errorMessage))));
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
exports.Checkbox = Checkbox;
|
|
@@ -1,281 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index$2 = require('./index-CaO6cOF0.cjs');
|
|
6
|
-
var index$1 = require('./index-CTlXMLug.cjs');
|
|
7
|
-
var FormControl = require('./FormControl-BPnKQrCm.cjs');
|
|
8
|
-
var index = require('./index-DXNM3D1d.cjs');
|
|
9
|
-
var Box = require('./Box-COPXU1Jf.cjs');
|
|
10
|
-
var Icon = require('./Icon-CzhyKqMd.cjs');
|
|
11
|
-
var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Do not edit directly
|
|
15
|
-
* Generated file
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
const BtIconChevronDown2Px =
|
|
19
|
-
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='M15.993 23.914 2.294 10.207a1 1 0 1 1 1.414-1.414l12.285 12.293L28.292 8.793a1 1 0 1 1 1.414 1.414Z'/%3e%3c/svg%3e";
|
|
20
|
-
|
|
21
|
-
var filterOptions = function (options, value) {
|
|
22
|
-
return options.filter(function (option) {
|
|
23
|
-
return value ? option.toLowerCase().includes(value.toLowerCase()) : true;
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
var getSelectedOptions = function (option, selectedOptions) {
|
|
27
|
-
return selectedOptions.indexOf(option) !== -1
|
|
28
|
-
? selectedOptions.filter(function (selectedOption) { return selectedOption !== option; })
|
|
29
|
-
: filterAttrs.__spreadArray(filterAttrs.__spreadArray([], selectedOptions, true), [option], false);
|
|
30
|
-
};
|
|
31
|
-
var findOptionIndex = function (options, searchOption) {
|
|
32
|
-
return options.findIndex(function (option) { return option === searchOption; });
|
|
33
|
-
};
|
|
34
|
-
var isSelected = function (option, selectedOptions) {
|
|
35
|
-
return selectedOptions.some(function (selectedOption) { return option === selectedOption; });
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
var reducer = function (initialOptions) {
|
|
39
|
-
return function (state, action) {
|
|
40
|
-
switch (action.type) {
|
|
41
|
-
case "OPEN": {
|
|
42
|
-
var isMultiSelectable = action.payload.isMultiSelectable;
|
|
43
|
-
var selectedOptions = state.selectedOptions, options = state.options;
|
|
44
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
|
|
45
|
-
? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
|
|
46
|
-
: 0 });
|
|
47
|
-
}
|
|
48
|
-
case "CLOSE": {
|
|
49
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
|
|
50
|
-
}
|
|
51
|
-
case "INPUT_CHANGE": {
|
|
52
|
-
var _a = action.payload, value = _a.value, isAutocomplete = _a.isAutocomplete;
|
|
53
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: value, options: isAutocomplete
|
|
54
|
-
? filterOptions(initialOptions, value)
|
|
55
|
-
: state.options, highlightedOptionIndex: 0, isExpanded: true });
|
|
56
|
-
}
|
|
57
|
-
case "SINGLE_SELECT": {
|
|
58
|
-
var _b = action.payload, selectedOption = _b.option, isAutocomplete = _b.isAutocomplete;
|
|
59
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, options: isAutocomplete
|
|
60
|
-
? filterOptions(initialOptions, selectedOption)
|
|
61
|
-
: state.options, value: selectedOption });
|
|
62
|
-
}
|
|
63
|
-
case "MULTI_SELECT": {
|
|
64
|
-
var selectedOption = action.payload.option;
|
|
65
|
-
var selectedOptions = state.selectedOptions, options = state.options;
|
|
66
|
-
var newSelectedOptions = getSelectedOptions(selectedOption, selectedOptions);
|
|
67
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: "", options: initialOptions, highlightedOptionIndex: findOptionIndex(options, selectedOption), selectedOptions: newSelectedOptions });
|
|
68
|
-
}
|
|
69
|
-
case "MULTI_SELECT_REMOVE": {
|
|
70
|
-
var option_1 = action.payload.option;
|
|
71
|
-
var selectedOptions = state.selectedOptions;
|
|
72
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { selectedOptions: selectedOptions.filter(function (selectedOption) { return option_1 !== selectedOption; }) });
|
|
73
|
-
}
|
|
74
|
-
case "KEYDOWN": {
|
|
75
|
-
var _c = action.payload, key = _c.key, isAutocomplete = _c.isAutocomplete, isMultiSelectable = _c.isMultiSelectable;
|
|
76
|
-
var isExpanded = state.isExpanded, highlightedOptionIndex = state.highlightedOptionIndex, options = state.options, selectedOptions = state.selectedOptions;
|
|
77
|
-
if (key === "Escape" && isExpanded) {
|
|
78
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, highlightedOptionIndex: 0 });
|
|
79
|
-
}
|
|
80
|
-
if (key === "ArrowDown" && isExpanded) {
|
|
81
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === options.length - 1
|
|
82
|
-
? 0
|
|
83
|
-
: highlightedOptionIndex + 1 });
|
|
84
|
-
}
|
|
85
|
-
if (key === "ArrowUp" && isExpanded) {
|
|
86
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { highlightedOptionIndex: highlightedOptionIndex === 0
|
|
87
|
-
? options.length - 1
|
|
88
|
-
: highlightedOptionIndex - 1 });
|
|
89
|
-
}
|
|
90
|
-
if (key === "ArrowDown" && !isExpanded) {
|
|
91
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
|
|
92
|
-
? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
|
|
93
|
-
: 0 });
|
|
94
|
-
}
|
|
95
|
-
if (key === "ArrowUp" && !isExpanded) {
|
|
96
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: true, highlightedOptionIndex: isMultiSelectable && selectedOptions.length
|
|
97
|
-
? findOptionIndex(options, selectedOptions[selectedOptions.length - 1])
|
|
98
|
-
: options.length - 1 });
|
|
99
|
-
}
|
|
100
|
-
if (key === "Enter" && isExpanded) {
|
|
101
|
-
if (isMultiSelectable) {
|
|
102
|
-
var newSelectedOptionIds = getSelectedOptions(options[highlightedOptionIndex], selectedOptions);
|
|
103
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { value: "", options: initialOptions, selectedOptions: newSelectedOptionIds });
|
|
104
|
-
}
|
|
105
|
-
else {
|
|
106
|
-
return filterAttrs.__assign(filterAttrs.__assign({}, state), { isExpanded: false, options: isAutocomplete
|
|
107
|
-
? filterOptions(initialOptions, options[highlightedOptionIndex])
|
|
108
|
-
: options, value: options[highlightedOptionIndex] });
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return state;
|
|
112
|
-
}
|
|
113
|
-
default:
|
|
114
|
-
return state;
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
var ComboBox = React.forwardRef(function (_a, ref) {
|
|
120
|
-
var name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, label = _a.label, helper = _a.helper, id = _a.id, initialOptions = _a.options, hideLabel = _a.hideLabel, isFluid = _a.isFluid, errorMessage = _a.errorMessage, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, listBoxAriaLabel = _a.listBoxAriaLabel, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.isMultiSelectable, isMultiSelectable = _d === void 0 ? false : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.isAutocomplete, isAutocomplete = _g === void 0 ? false : _g, props = filterAttrs.__rest(_a, ["name", "onBlur", "onFocus", "label", "helper", "id", "options", "hideLabel", "isFluid", "errorMessage", "disclosureTitle", "disclosureText", "onClickDisclosure", "listBoxAriaLabel", "defaultValue", "labelSize", "isMultiSelectable", "isDisabled", "isRequired", "isAutocomplete"]);
|
|
121
|
-
var listBoxId = React.useId();
|
|
122
|
-
var listItemRefs = React.useRef([]);
|
|
123
|
-
var containerRef = React.useRef(null);
|
|
124
|
-
var inputRef = React.useRef(null);
|
|
125
|
-
var _h = index.useThemeElement(), themeElement = _h[0], setThemeElement = _h[1];
|
|
126
|
-
var _j = React.useReducer(reducer(initialOptions), {
|
|
127
|
-
isExpanded: false,
|
|
128
|
-
value: defaultValue,
|
|
129
|
-
options: initialOptions,
|
|
130
|
-
highlightedOptionIndex: 0,
|
|
131
|
-
selectedOptions: [],
|
|
132
|
-
}), _k = _j[0], isExpanded = _k.isExpanded, value = _k.value, options = _k.options, highlightedOptionIndex = _k.highlightedOptionIndex, selectedOptions = _k.selectedOptions, dispatch = _j[1];
|
|
133
|
-
var ariaDescribedby = FormControl.useAriaDescribedby({
|
|
134
|
-
errorMessage: errorMessage,
|
|
135
|
-
id: id,
|
|
136
|
-
helper: helper,
|
|
137
|
-
disclosureText: disclosureText,
|
|
138
|
-
}).ariaDescribedby;
|
|
139
|
-
var getTextInputRef = function (elementRef) {
|
|
140
|
-
inputRef.current = elementRef;
|
|
141
|
-
if (ref && typeof ref === "object") {
|
|
142
|
-
ref.current = elementRef;
|
|
143
|
-
}
|
|
144
|
-
if (ref && typeof ref === "function") {
|
|
145
|
-
ref(elementRef);
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
var setScrollPosition = function (listEl) {
|
|
149
|
-
var listItemEl = listItemRefs.current[highlightedOptionIndex];
|
|
150
|
-
if (listItemEl && listEl) {
|
|
151
|
-
var selectedOptionIsBelowOverFlow = listItemEl.offsetTop + listItemEl.offsetHeight >
|
|
152
|
-
listEl.offsetHeight + listEl.scrollTop;
|
|
153
|
-
var selectedOptionIsAboveOverFlow = listItemEl.offsetTop < listEl.scrollTop;
|
|
154
|
-
if (selectedOptionIsBelowOverFlow) {
|
|
155
|
-
listEl.scrollTop =
|
|
156
|
-
listItemEl.offsetTop +
|
|
157
|
-
listItemEl.offsetHeight -
|
|
158
|
-
listEl.offsetHeight;
|
|
159
|
-
}
|
|
160
|
-
if (selectedOptionIsAboveOverFlow) {
|
|
161
|
-
listEl.scrollTop = listItemEl.offsetTop;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
var onItemClick = function (itemOption) {
|
|
166
|
-
return function (e) {
|
|
167
|
-
var _a;
|
|
168
|
-
e.preventDefault();
|
|
169
|
-
if (isMultiSelectable) {
|
|
170
|
-
dispatch({
|
|
171
|
-
type: "MULTI_SELECT",
|
|
172
|
-
payload: {
|
|
173
|
-
option: itemOption,
|
|
174
|
-
},
|
|
175
|
-
});
|
|
176
|
-
}
|
|
177
|
-
else {
|
|
178
|
-
dispatch({
|
|
179
|
-
type: "SINGLE_SELECT",
|
|
180
|
-
payload: {
|
|
181
|
-
isAutocomplete: isAutocomplete,
|
|
182
|
-
option: itemOption,
|
|
183
|
-
},
|
|
184
|
-
});
|
|
185
|
-
}
|
|
186
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
187
|
-
};
|
|
188
|
-
};
|
|
189
|
-
var onInputChange = function (e) {
|
|
190
|
-
dispatch({
|
|
191
|
-
type: "INPUT_CHANGE",
|
|
192
|
-
payload: {
|
|
193
|
-
isAutocomplete: isAutocomplete,
|
|
194
|
-
value: e.target.value,
|
|
195
|
-
},
|
|
196
|
-
});
|
|
197
|
-
};
|
|
198
|
-
var onInputClick = function () {
|
|
199
|
-
isAutocomplete &&
|
|
200
|
-
dispatch({
|
|
201
|
-
type: "OPEN",
|
|
202
|
-
payload: {
|
|
203
|
-
isMultiSelectable: isMultiSelectable,
|
|
204
|
-
},
|
|
205
|
-
});
|
|
206
|
-
};
|
|
207
|
-
var onInteractOutside = function (e) {
|
|
208
|
-
if (containerRef.current &&
|
|
209
|
-
!containerRef.current.contains(e.currentTarget)) {
|
|
210
|
-
dispatch({
|
|
211
|
-
type: "CLOSE",
|
|
212
|
-
});
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
var onInputKeyDown = function (e) {
|
|
216
|
-
dispatch({
|
|
217
|
-
type: "KEYDOWN",
|
|
218
|
-
payload: {
|
|
219
|
-
key: e.key,
|
|
220
|
-
isAutocomplete: isAutocomplete,
|
|
221
|
-
isMultiSelectable: isMultiSelectable,
|
|
222
|
-
},
|
|
223
|
-
});
|
|
224
|
-
};
|
|
225
|
-
var onMultiSelectRemove = function (option) { return function (e) {
|
|
226
|
-
var _a;
|
|
227
|
-
e.preventDefault();
|
|
228
|
-
e.stopPropagation();
|
|
229
|
-
dispatch({
|
|
230
|
-
type: "MULTI_SELECT_REMOVE",
|
|
231
|
-
payload: {
|
|
232
|
-
option: option,
|
|
233
|
-
},
|
|
234
|
-
});
|
|
235
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
236
|
-
}; };
|
|
237
|
-
var onOpenAutoFocus = function (e) {
|
|
238
|
-
var _a;
|
|
239
|
-
e.preventDefault();
|
|
240
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
241
|
-
};
|
|
242
|
-
return (React.createElement("div", { ref: setThemeElement, className: index$1.classNames("arc-ComboBox", {
|
|
243
|
-
"arc-ComboBox--constrained": !isFluid,
|
|
244
|
-
}) },
|
|
245
|
-
React.createElement("div", { ref: containerRef },
|
|
246
|
-
React.createElement(index$2.Root2, { open: isExpanded },
|
|
247
|
-
React.createElement(FormControl.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 },
|
|
248
|
-
React.createElement("div", { onClick: onInputClick, className: index$1.classNames("arc-ComboBox-container", {
|
|
249
|
-
"arc-ComboBox-container--cursor": isAutocomplete,
|
|
250
|
-
}) },
|
|
251
|
-
React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputWrapper", {
|
|
252
|
-
"arc-ComboBox-inputWrapper--multiSelect": isMultiSelectable,
|
|
253
|
-
}) },
|
|
254
|
-
selectedOptions.length > 0 &&
|
|
255
|
-
selectedOptions.map(function (option, i) { return (React.createElement("div", { className: "arc-ComboBox-tag", key: "".concat(listBoxId, "-selectedOption-").concat(i) },
|
|
256
|
-
React.createElement("span", null, option),
|
|
257
|
-
React.createElement("button", { className: "arc-ComboBox-tagButton", "aria-label": "".concat(option, ", press space or enter to remove"), onClick: onMultiSelectRemove(option) },
|
|
258
|
-
React.createElement(ThemeIcon.ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 })))); }),
|
|
259
|
-
React.createElement("input", filterAttrs.__assign({ className: "arc-ComboBox-input", ref: getTextInputRef, "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-controls": listBoxId, "aria-expanded": isExpanded, "aria-activedescendant": highlightedOptionIndex
|
|
260
|
-
? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
|
|
261
|
-
: undefined, id: id, name: name, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange, onKeyDown: onInputKeyDown, disabled: isDisabled, required: isRequired, value: value }, filterAttrs.filterAttrs(props)))),
|
|
262
|
-
isAutocomplete && (React.createElement("div", { className: index$1.classNames("arc-ComboBox-inputIcon", {
|
|
263
|
-
"arc-ComboBox-inputIcon--expanded": isExpanded,
|
|
264
|
-
}) },
|
|
265
|
-
React.createElement(Icon.Icon, { icon: BtIconChevronDown2Px, size: 24 }))))),
|
|
266
|
-
React.createElement(index$2.Anchor2, null),
|
|
267
|
-
React.createElement(index$2.Portal, { container: themeElement },
|
|
268
|
-
React.createElement(index$2.Content2, { align: "start", sideOffset: 5, onInteractOutside: onInteractOutside, onOpenAutoFocus: onOpenAutoFocus },
|
|
269
|
-
React.createElement("div", { className: "arc-ComboBox-listboxContainer" },
|
|
270
|
-
React.createElement(Box.Box, { elevationLevel: "1" },
|
|
271
|
-
React.createElement("ul", { ref: setScrollPosition, id: listBoxId, className: "arc-ComboBox-list", role: "listbox", "aria-label": listBoxAriaLabel, "aria-multiselectable": isMultiSelectable }, options.length ? (options.map(function (option, i) { return (React.createElement("li", { id: "".concat(listBoxId, "-").concat(i), ref: function (el) { return (listItemRefs.current[i] = el); }, key: option, className: index$1.classNames("arc-ComboBox-listItem", {
|
|
272
|
-
"arc-ComboBox-listItem--highlighted": i === highlightedOptionIndex,
|
|
273
|
-
}), onMouseDown: onItemClick(option), role: "option", "aria-selected": isSelected(option, selectedOptions) },
|
|
274
|
-
React.createElement("div", { className: "arc-ComboBox-listItemText" }, option),
|
|
275
|
-
React.createElement("div", { className: index$1.classNames("arc-ComboBox-listItemIcon", {
|
|
276
|
-
"arc-ComboBox-listItemIcon--visible": isSelected(option, selectedOptions),
|
|
277
|
-
}) },
|
|
278
|
-
React.createElement(ThemeIcon.ThemeIcon, { size: 20, icon: "selectIndicator" })))); })) : (React.createElement("li", { className: "arc-ComboBox-listItem", role: "option", "aria-selected": false, "aria-disabled": true }, "No matches found")))))))))));
|
|
279
|
-
});
|
|
280
|
-
|
|
281
|
-
exports.ComboBox = ComboBox;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('./index-BCu-VH8y.cjs');
|
|
6
|
-
var Text = require('./Text-Cr5nmYmx.cjs');
|
|
7
|
-
|
|
8
|
-
var ContentSwitcherTab = React.forwardRef(function (_a, ref) {
|
|
9
|
-
var label = _a.label, value = _a.value, onClick = _a.onClick, props = filterAttrs.__rest(_a, ["label", "value", "onClick"]);
|
|
10
|
-
return (React.createElement(index.$69cb30bb0017df05$export$41fb9f06171c75f4, filterAttrs.__assign({ className: "arc-ContentSwitcherTab", value: value, ref: ref, onClick: onClick }, filterAttrs.filterAttrs(props)),
|
|
11
|
-
React.createElement(Text.Text, { size: "m" }, label)));
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
exports.ContentSwitcherTab = ContentSwitcherTab;
|