@arc-ui/components 11.17.0 → 11.19.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/Breadcrumbs/Breadcrumbs.cjs.js +2 -2
- package/dist/Breadcrumbs/Breadcrumbs.esm.js +2 -2
- package/dist/Button/Button.cjs.js +2 -2
- package/dist/Button/Button.esm.js +2 -2
- package/dist/Calendar/Calendar.cjs.js +2 -2
- package/dist/Calendar/Calendar.esm.js +2 -2
- package/dist/Card/Card.cjs.js +2 -2
- package/dist/Card/Card.esm.js +2 -2
- package/dist/DatePicker/DatePicker.cjs.js +4 -4
- package/dist/DatePicker/DatePicker.esm.js +4 -4
- package/dist/Disclosure/Disclosure.cjs.js +5 -1
- package/dist/Disclosure/Disclosure.esm.js +6 -2
- package/dist/Icon/Icon.cjs.js +1 -1
- package/dist/Icon/Icon.esm.js +1 -1
- package/dist/InformationCard/InformationCard.cjs.js +4 -4
- package/dist/InformationCard/InformationCard.esm.js +4 -4
- package/dist/MediaCard/MediaCard.cjs.js +2 -2
- package/dist/MediaCard/MediaCard.esm.js +2 -2
- package/dist/Modal/Modal.cjs.js +2 -2
- package/dist/Modal/Modal.esm.js +2 -2
- package/dist/Pagination/Pagination.cjs.js +1 -1
- package/dist/Pagination/Pagination.esm.js +1 -1
- package/dist/PaginationSimple/PaginationSimple.cjs.js +1 -1
- package/dist/PaginationSimple/PaginationSimple.esm.js +1 -1
- package/dist/ProgressBar/ProgressBar.cjs.js +1 -1
- package/dist/ProgressBar/ProgressBar.esm.js +1 -1
- package/dist/ProgressStepper/ProgressStepper.cjs.js +2 -2
- package/dist/ProgressStepper/ProgressStepper.esm.js +2 -2
- package/dist/RadioGroup/RadioGroup.cjs.js +1 -1
- package/dist/RadioGroup/RadioGroup.esm.js +1 -1
- package/dist/ScrollToTop/ScrollToTop.cjs.js +1 -1
- package/dist/ScrollToTop/ScrollToTop.esm.js +1 -1
- package/dist/Select/Select.cjs.js +1 -1
- package/dist/Select/Select.esm.js +1 -1
- package/dist/SiteHeader/SiteHeader.cjs.js +3 -3
- package/dist/SiteHeader/SiteHeader.esm.js +3 -3
- package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +3 -3
- package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +3 -3
- package/dist/Switch/Switch.cjs.js +1 -1
- package/dist/Switch/Switch.esm.js +1 -1
- package/dist/Tabs/Tabs.cjs.js +2 -2
- package/dist/Tabs/Tabs.esm.js +2 -2
- package/dist/Tag/Tag.cjs.js +2 -2
- package/dist/Tag/Tag.esm.js +2 -2
- package/dist/TextArea/TextArea.cjs.js +11 -11
- package/dist/TextArea/TextArea.esm.js +11 -11
- package/dist/TextInput/TextInput.cjs.js +2 -2
- package/dist/TextInput/TextInput.esm.js +2 -2
- package/dist/Toast/Toast.cjs.js +2 -2
- package/dist/Toast/Toast.esm.js +2 -2
- package/dist/TypographyCard/TypographyCard.cjs.js +2 -2
- package/dist/TypographyCard/TypographyCard.esm.js +2 -2
- package/dist/_shared/cjs/{Breadcrumbs-ef659d2b.js → Breadcrumbs-c6eaf5c4.js} +1 -1
- package/dist/_shared/cjs/{Button-4fed080a.js → Button-84533dc8.js} +1 -1
- package/dist/_shared/cjs/{Calendar-18e255f8.js → Calendar-c6ed5f2c.js} +1 -1
- package/dist/_shared/cjs/{Card-17dcc171.js → Card-5b19cabc.js} +1 -1
- package/dist/_shared/cjs/{CardFooter-43c32239.js → CardFooter-f6cba651.js} +1 -1
- package/dist/_shared/cjs/{Icon-a9801f05.js → Icon-b46897a3.js} +6 -2
- package/dist/_shared/cjs/{ProgressStepper-9cdc0afe.js → ProgressStepper-3af8a210.js} +1 -1
- package/dist/_shared/cjs/{RadioGroup-23c964ae.js → RadioGroup-60845bb3.js} +8 -4
- package/dist/_shared/cjs/{SiteHeader.rehydrator-df053a52.js → SiteHeader.rehydrator-ea49f8d5.js} +2 -2
- package/dist/_shared/cjs/{SiteHeaderV2-8ce6d4fc.js → SiteHeaderV2-8c8f3f5c.js} +79 -26
- package/dist/_shared/cjs/{Tabs-34db6bc1.js → Tabs-24e6f45b.js} +1 -1
- package/dist/_shared/cjs/{Tag-42ddca45.js → Tag-8723b324.js} +1 -1
- package/dist/_shared/cjs/{TextInput-d0370fa8.js → TextInput-acbd8eda.js} +5 -2
- package/dist/_shared/cjs/{Toast-392b1d60.js → Toast-7a20d1b9.js} +1 -1
- package/dist/_shared/esm/{Breadcrumbs-36edfb3d.js → Breadcrumbs-7d55e1a6.js} +1 -1
- package/dist/_shared/esm/{Button-a453e8e4.js → Button-3f294e64.js} +1 -1
- package/dist/_shared/esm/{Calendar-4033fa48.js → Calendar-753ef6f1.js} +1 -1
- package/dist/_shared/esm/{Card-201e9f28.js → Card-7fc6c9b4.js} +1 -1
- package/dist/_shared/esm/{CardFooter-dd8d4000.js → CardFooter-55ae9a37.js} +1 -1
- package/dist/_shared/esm/{Icon-abd0d990.js → Icon-15799695.js} +6 -2
- package/dist/_shared/esm/{ProgressStepper-f51f86c3.js → ProgressStepper-d4c5b6d9.js} +1 -1
- package/dist/_shared/esm/{RadioGroup-37fdb06b.js → RadioGroup-d42dba3a.js} +8 -4
- package/dist/_shared/esm/{SiteHeader.rehydrator-32bdcd88.js → SiteHeader.rehydrator-65c8cf71.js} +2 -2
- package/dist/_shared/esm/{SiteHeaderV2-f8377627.js → SiteHeaderV2-6d0ff35b.js} +79 -26
- package/dist/_shared/esm/{Tabs-df9965dd.js → Tabs-a85af483.js} +1 -1
- package/dist/_shared/esm/{Tag-92c088a9.js → Tag-664b85c8.js} +1 -1
- package/dist/_shared/esm/{TextInput-abbab56b.js → TextInput-ddf4cc7a.js} +5 -3
- package/dist/_shared/esm/{Toast-5d66e13f.js → Toast-7a232e15.js} +1 -1
- package/dist/index.es.js +101 -34
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +101 -34
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3 -3
- package/dist/types/components/DatePicker/DatePicker.d.ts +2 -2
- package/dist/types/components/Icon/Icon.d.ts +4 -0
- package/dist/types/components/RadioGroup/RadioButton/RadioButton.d.ts +5 -0
- package/dist/types/components/SiteHeaderV2/components/BackButton/BackButton.d.ts +1 -0
- package/dist/types/components/SiteHeaderV2/components/NavItem/NavItem.d.ts +1 -0
- package/dist/types/components/SiteHeaderV2/components/NavItem/NavItemWithSubNav.d.ts +1 -0
- package/dist/types/components/SiteHeaderV2/components/Panel/Panel.d.ts +2 -0
- package/dist/types/components/TextInput/TextInput.d.ts +4 -4
- package/package.json +10 -3
|
@@ -7,10 +7,10 @@ import { S as Surface } from './Surface-0ca6817d.js';
|
|
|
7
7
|
import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
|
|
8
8
|
import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
|
|
9
9
|
import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
|
|
10
|
-
import { B as Button } from './Button-
|
|
10
|
+
import { B as Button } from './Button-3f294e64.js';
|
|
11
11
|
import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
|
|
12
12
|
import { T as Text } from './Text-14f586ac.js';
|
|
13
|
-
import { I as Icon } from './Icon-
|
|
13
|
+
import { I as Icon } from './Icon-15799695.js';
|
|
14
14
|
|
|
15
15
|
var Item = function (_a) {
|
|
16
16
|
var _b;
|
|
@@ -54,7 +54,7 @@ var ItemGroup = function (_a) {
|
|
|
54
54
|
? 0
|
|
55
55
|
: -1 }, title),
|
|
56
56
|
React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
|
|
57
|
-
React__default.createElement(BtIconChevronRightMid,
|
|
57
|
+
React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
|
|
58
58
|
React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
|
|
59
59
|
React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
|
|
60
60
|
children,
|
|
@@ -78,9 +78,10 @@ var Column = function (_a) {
|
|
|
78
78
|
};
|
|
79
79
|
|
|
80
80
|
var BackButton = function (_a) {
|
|
81
|
-
var setOpen = _a.setOpen;
|
|
81
|
+
var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
|
|
82
82
|
return (React__default.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
|
|
83
83
|
setOpen(false);
|
|
84
|
+
setOpenPanelOnFirstClick(false);
|
|
84
85
|
} },
|
|
85
86
|
React__default.createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
|
|
86
87
|
React__default.createElement(BtIconChevronLeft2Px, null)),
|
|
@@ -89,7 +90,7 @@ var BackButton = function (_a) {
|
|
|
89
90
|
|
|
90
91
|
var Panel = function (_a) {
|
|
91
92
|
var _b, _c, _d, _e, _f;
|
|
92
|
-
var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef
|
|
93
|
+
var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
|
|
93
94
|
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
|
|
94
95
|
useEffect(function () {
|
|
95
96
|
// Where appropriate, close the Panel when clicking outside of it,
|
|
@@ -112,7 +113,9 @@ var Panel = function (_a) {
|
|
|
112
113
|
(subNavItemRef &&
|
|
113
114
|
!e.target.classList.contains(subNavLink) &&
|
|
114
115
|
!e.target.classList.contains("".concat(subNavLink, "Title")) &&
|
|
115
|
-
!e.target.classList.contains("".concat(subNavLink, "SubTitle"))
|
|
116
|
+
!e.target.classList.contains("".concat(subNavLink, "SubTitle")) &&
|
|
117
|
+
!e.target.classList.contains("".concat(subNavLink, "Slot")) &&
|
|
118
|
+
!e.target.classList.contains("".concat(subNavLink, "SlotTitle"))) ||
|
|
116
119
|
// Panel is inside a SubNavItem
|
|
117
120
|
// and the click is not inside the Panel's NavItem parent.
|
|
118
121
|
// This prevents SubNavItem Panels in sibling NavItems from being closed.
|
|
@@ -126,7 +129,31 @@ var Panel = function (_a) {
|
|
|
126
129
|
return function () {
|
|
127
130
|
document.removeEventListener("click", handleClick);
|
|
128
131
|
};
|
|
129
|
-
}, [
|
|
132
|
+
}, [
|
|
133
|
+
navItemRef,
|
|
134
|
+
setOpen,
|
|
135
|
+
subNavItemRef,
|
|
136
|
+
subNavLink,
|
|
137
|
+
setOpenPanelOnFirstClick,
|
|
138
|
+
]);
|
|
139
|
+
useEffect(function () {
|
|
140
|
+
var handleClick = function (e) {
|
|
141
|
+
// Close the Panel…
|
|
142
|
+
if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
|
|
143
|
+
setOpenPanelOnFirstClick(false);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel") ||
|
|
147
|
+
e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-primary")) {
|
|
148
|
+
setOpenPanelOnFirstClick(true);
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
document.addEventListener("click", handleClick);
|
|
153
|
+
return function () {
|
|
154
|
+
document.removeEventListener("click", handleClick);
|
|
155
|
+
};
|
|
156
|
+
}, [navItemRef, setOpenPanelOnFirstClick]);
|
|
130
157
|
useEffect(function () {
|
|
131
158
|
var handleKeydown = function (e) {
|
|
132
159
|
// Check the viewport width at time of press
|
|
@@ -150,9 +177,10 @@ var Panel = function (_a) {
|
|
|
150
177
|
_b["arc-SiteHeaderV2Panel"] = true,
|
|
151
178
|
_b["arc-SiteHeaderV2Panel--open"] = open,
|
|
152
179
|
_b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
|
|
180
|
+
_b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
|
|
153
181
|
_b)) }, filterDataAttrs(props)),
|
|
154
182
|
React__default.createElement(Surface, { background: "white" },
|
|
155
|
-
React__default.createElement(BackButton, { setOpen: setOpen }),
|
|
183
|
+
React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
|
|
156
184
|
React__default.createElement("div", { className: classNames((_c = {},
|
|
157
185
|
_c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
|
|
158
186
|
_c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
|
|
@@ -175,7 +203,7 @@ var Panel = function (_a) {
|
|
|
175
203
|
React__default.createElement("ul", { className: classNames((_f = {},
|
|
176
204
|
_f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
|
|
177
205
|
_f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
|
|
178
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] =
|
|
206
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = open && isNavItem,
|
|
179
207
|
_f)) }, children),
|
|
180
208
|
!withSubNav && viewAll)),
|
|
181
209
|
withSubNav && viewAll)))));
|
|
@@ -205,10 +233,11 @@ Panel.ViewAll = ViewAll;
|
|
|
205
233
|
|
|
206
234
|
var NavItem = function (_a) {
|
|
207
235
|
var _b, _c, _d, _e, _f;
|
|
208
|
-
var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "subTitle"]);
|
|
236
|
+
var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
|
|
209
237
|
var navItem = useRef();
|
|
210
238
|
var _g = useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
|
|
211
|
-
var _h = useState(
|
|
239
|
+
var _h = useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
|
|
240
|
+
var _j = useState(false), animation = _j[0], setAnimation = _j[1];
|
|
212
241
|
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
|
|
213
242
|
useEffect(function () {
|
|
214
243
|
React__default.Children.map(children, function (item) {
|
|
@@ -225,7 +254,8 @@ var NavItem = function (_a) {
|
|
|
225
254
|
_b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
|
|
226
255
|
_b["arc-SiteHeaderV2NavItem"] = !subTitle && !isPrimary,
|
|
227
256
|
_b["arc-SiteHeaderV2NavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
|
|
228
|
-
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = !isPrimary && panelOpen
|
|
257
|
+
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = (!isPrimary && panelOpen) ||
|
|
258
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
229
259
|
_b)), ref: navItem }, filterDataAttrs(props)), !children ? (href ? (React__default.createElement("a", { onClick: handleLinkClick({
|
|
230
260
|
handler: onClick
|
|
231
261
|
}), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
|
|
@@ -233,6 +263,8 @@ var NavItem = function (_a) {
|
|
|
233
263
|
React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
|
|
234
264
|
_c["arc-SiteHeaderV2NavItem-link"] = true,
|
|
235
265
|
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
|
|
266
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
267
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
236
268
|
_c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
|
|
237
269
|
_c)), onClick: function (e) {
|
|
238
270
|
e.preventDefault();
|
|
@@ -241,18 +273,25 @@ var NavItem = function (_a) {
|
|
|
241
273
|
}, onAnimationEnd: function () { return setAnimation(false); } },
|
|
242
274
|
React__default.createElement("div", { className: classNames((_d = {},
|
|
243
275
|
_d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
|
|
276
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
277
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
244
278
|
_d)) }, title),
|
|
245
279
|
React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
|
|
246
280
|
React__default.createElement(BtIconChevronRight2Px, null)),
|
|
247
281
|
subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
|
|
248
282
|
_e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
|
|
283
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
284
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
249
285
|
_e)) }, subTitle)) : null,
|
|
250
286
|
React__default.createElement("div", { className: classNames((_f = {},
|
|
251
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen
|
|
287
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen ||
|
|
288
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
252
289
|
_f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
|
|
253
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && panelOpen,
|
|
290
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
|
|
254
291
|
_f)) }))),
|
|
255
|
-
React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open:
|
|
292
|
+
React__default.createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
|
|
293
|
+
? openSecondaryWithSubNav
|
|
294
|
+
: panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
|
|
256
295
|
};
|
|
257
296
|
|
|
258
297
|
var HorizontalPanel = function (_a) {
|
|
@@ -321,7 +360,7 @@ var HorizontalPanel = function (_a) {
|
|
|
321
360
|
React__default.createElement("div", { className: classNames((_c = {},
|
|
322
361
|
_c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
|
|
323
362
|
_c)) },
|
|
324
|
-
React__default.createElement(BackButton, { setOpen: setOpen }),
|
|
363
|
+
React__default.createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
|
|
325
364
|
title && (React__default.createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
|
|
326
365
|
React__default.createElement("ul", { className: classNames((_d = {},
|
|
327
366
|
_d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
|
|
@@ -333,12 +372,13 @@ var Context$1 = createContext(defaultContext$1);
|
|
|
333
372
|
var Provider$1 = Context$1.Provider;
|
|
334
373
|
var NavItemWithSubNav = function (_a) {
|
|
335
374
|
var _b, _c, _d, _e, _f;
|
|
336
|
-
var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "viewAllTitle"]);
|
|
375
|
+
var href = _a.href, slot1 = _a.slot1, slot2 = _a.slot2, slot3 = _a.slot3, slot4 = _a.slot4, slot5 = _a.slot5, slot6 = _a.slot6, _g = _a.subTitle, subTitle = _g === void 0 ? null : _g, title = _a.title, onViewAllClick = _a.onViewAllClick, isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
|
|
337
376
|
var navItem = useRef();
|
|
338
377
|
var _h = useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
|
|
339
378
|
var _j = useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
|
|
340
379
|
var _k = useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
|
|
341
380
|
var _l = useState(false), animation = _l[0], setAnimation = _l[1];
|
|
381
|
+
var _m = useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
|
|
342
382
|
var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
|
|
343
383
|
useEffect(function () {
|
|
344
384
|
React__default.Children.map(slot1, function (item) {
|
|
@@ -375,12 +415,15 @@ var NavItemWithSubNav = function (_a) {
|
|
|
375
415
|
_b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
|
|
376
416
|
? horizontalPanelOpen
|
|
377
417
|
: panelOpen,
|
|
378
|
-
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen,
|
|
418
|
+
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
|
|
379
419
|
_b)), ref: navItem }, filterDataAttrs(props)),
|
|
380
420
|
React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
|
|
381
421
|
React__default.createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
|
|
382
422
|
_c["arc-SiteHeaderV2NavItem-link"] = true,
|
|
383
423
|
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
|
|
424
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
425
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
426
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
384
427
|
_c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
|
|
385
428
|
_c)), onClick: function (e) {
|
|
386
429
|
e.preventDefault();
|
|
@@ -391,18 +434,25 @@ var NavItemWithSubNav = function (_a) {
|
|
|
391
434
|
}, onAnimationEnd: function () { return setAnimation(false); } },
|
|
392
435
|
React__default.createElement("div", { className: classNames((_d = {},
|
|
393
436
|
_d["arc-SiteHeaderV2NavItem-title"] = isPrimary,
|
|
437
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
438
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
439
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
394
440
|
_d)) }, title),
|
|
395
441
|
React__default.createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
|
|
396
442
|
React__default.createElement(BtIconChevronRight2Px, null)),
|
|
397
443
|
subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default.createElement("div", { className: classNames((_e = {},
|
|
398
444
|
_e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
|
|
445
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
446
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
447
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
399
448
|
_e)) }, subTitle)) : null,
|
|
400
449
|
React__default.createElement("div", { className: classNames((_f = {},
|
|
401
450
|
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
|
|
402
451
|
? horizontalPanelOpen
|
|
403
|
-
: panelOpen
|
|
452
|
+
: panelOpen ||
|
|
453
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
404
454
|
_f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
|
|
405
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && panelOpen,
|
|
455
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
|
|
406
456
|
_f)) }))),
|
|
407
457
|
isPrimary && (React__default.createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
|
|
408
458
|
slot1,
|
|
@@ -410,7 +460,9 @@ var NavItemWithSubNav = function (_a) {
|
|
|
410
460
|
slot3,
|
|
411
461
|
slot4,
|
|
412
462
|
slot5)),
|
|
413
|
-
React__default.createElement(Panel, { navItemRef: navItem, open:
|
|
463
|
+
React__default.createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
|
|
464
|
+
? openSecondaryWithSubNav
|
|
465
|
+
: panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
|
|
414
466
|
defaultItem
|
|
415
467
|
? React__default.cloneElement(slot1, { isDefaultItem: defaultItem })
|
|
416
468
|
: slot1,
|
|
@@ -487,10 +539,11 @@ var SubNavItem = function (_a) {
|
|
|
487
539
|
setPanelOpen(true);
|
|
488
540
|
setFade(true);
|
|
489
541
|
}, onAnimationEnd: function () { return setFade(false); } },
|
|
490
|
-
React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-
|
|
491
|
-
icon && (React__default.createElement("
|
|
492
|
-
|
|
493
|
-
|
|
542
|
+
React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlot" },
|
|
543
|
+
icon && isMinWidthArcBreakpointL && (React__default.createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlotIcon" },
|
|
544
|
+
React__default.createElement(Icon, { icon: icon, size: 48 }))),
|
|
545
|
+
React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
|
|
546
|
+
React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default.createElement("span", null,
|
|
494
547
|
title,
|
|
495
548
|
subTitle && (React__default.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
|
|
496
549
|
};
|
|
@@ -572,7 +625,7 @@ var SiteHeaderV2 = function (_a) {
|
|
|
572
625
|
React__default.createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick({
|
|
573
626
|
handler: logoOnClick
|
|
574
627
|
}), href: logoHref },
|
|
575
|
-
React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand
|
|
628
|
+
React__default.createElement(BrandLogo, { label: logoLabel, subBrand: subBrand })),
|
|
576
629
|
children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
|
|
577
630
|
React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
|
|
578
631
|
React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
|
|
@@ -6,7 +6,7 @@ import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-044da8d0
|
|
|
6
6
|
import { $ as $1746a345f3d73bb7$export$f680877a34711e37 } from './index-efa9be1a.js';
|
|
7
7
|
import { $ as $f631663db3294ace$export$b39126d51d94e6f3 } from './index-a624de47.js';
|
|
8
8
|
import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-ca72c9d5.js';
|
|
9
|
-
import { I as Icon } from './Icon-
|
|
9
|
+
import { I as Icon } from './Icon-15799695.js';
|
|
10
10
|
import { C as Context } from './Surface-0ca6817d.js';
|
|
11
11
|
import { c as classNames } from './index-2e73c2e9.js';
|
|
12
12
|
import { B as BtIconArrowRightFill } from './BtIconArrowRightFill.esm-99019d1a.js';
|
|
@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
|
|
|
2
2
|
import React__default, { useContext, useState } from 'react';
|
|
3
3
|
import { c as classNames } from './index-2e73c2e9.js';
|
|
4
4
|
import { C as Context } from './Surface-0ca6817d.js';
|
|
5
|
-
import { I as Icon } from './Icon-
|
|
5
|
+
import { I as Icon } from './Icon-15799695.js';
|
|
6
6
|
|
|
7
7
|
const BtIconCross = (props) =>
|
|
8
8
|
/*#__PURE__*/ React__default.createElement(
|
|
@@ -4,7 +4,7 @@ import React__default, { forwardRef, useContext, useState } from 'react';
|
|
|
4
4
|
import { u as useAriaDescribedby, F as FormControl } from './FormControl-f0b8fe91.js';
|
|
5
5
|
import { C as Context } from './Surface-0ca6817d.js';
|
|
6
6
|
import { V as VisuallyHidden } from './VisuallyHidden-b9eebf71.js';
|
|
7
|
-
import { I as Icon } from './Icon-
|
|
7
|
+
import { I as Icon } from './Icon-15799695.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Infer the correct inputMode, pattern and type if specifying a `number` type.
|
|
@@ -36,7 +36,7 @@ var useNumericInput = function (props) {
|
|
|
36
36
|
/**
|
|
37
37
|
* Use `TextInput` to allow custom user text entry with a keyboard.
|
|
38
38
|
*/
|
|
39
|
-
var
|
|
39
|
+
var TextInputComponent = forwardRef(function (_a, ref) {
|
|
40
40
|
var _b;
|
|
41
41
|
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"]);
|
|
42
42
|
var surface = useContext(Context).surface;
|
|
@@ -90,5 +90,7 @@ var TextInput = forwardRef(function (_a, ref) {
|
|
|
90
90
|
? "Your password is shown"
|
|
91
91
|
: "Your password is hidden")))))))));
|
|
92
92
|
});
|
|
93
|
+
var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
|
|
94
|
+
var TextInputWithPlaceHolder = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
|
|
93
95
|
|
|
94
|
-
export {
|
|
96
|
+
export { TextInputWithPlaceHolder as T, TextInput as a };
|
|
@@ -11,7 +11,7 @@ import { c as classNames } from './index-2e73c2e9.js';
|
|
|
11
11
|
import { B as BtIconCrossAlt2Px } from './BtIconCrossAlt2Px.esm-7165ab1a.js';
|
|
12
12
|
import { B as BtIconNotification, a as BtIconAlertTriangle, b as BtIconTick } from './BtIconTick.esm-e265098f.js';
|
|
13
13
|
import { B as BtIconAlert } from './BtIconAlert.esm-a4608d47.js';
|
|
14
|
-
import { I as Icon } from './Icon-
|
|
14
|
+
import { I as Icon } from './Icon-15799695.js';
|
|
15
15
|
|
|
16
16
|
const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
|
|
17
17
|
const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
|