@arc-ui/components 11.17.0 → 11.18.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/SiteHeaderV2/SiteHeaderV2.cjs.js +1 -1
- package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +1 -1
- package/dist/TextArea/TextArea.cjs.js +1 -1
- package/dist/TextArea/TextArea.esm.js +1 -1
- package/dist/_shared/cjs/{SiteHeaderV2-8ce6d4fc.js → SiteHeaderV2-79930632.js} +77 -24
- package/dist/_shared/esm/{SiteHeaderV2-f8377627.js → SiteHeaderV2-9e7e7d3b.js} +77 -24
- package/dist/index.es.js +77 -24
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +77 -24
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3 -3
- 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/package.json +10 -3
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-
|
|
5
|
+
var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-79930632.js');
|
|
6
6
|
require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
|
|
7
7
|
require('../_shared/cjs/use-media-query-e61881d8.js');
|
|
8
8
|
require('react');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-
|
|
1
|
+
export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-9e7e7d3b.js';
|
|
2
2
|
import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
|
|
3
3
|
import '../_shared/esm/use-media-query-4c807227.js';
|
|
4
4
|
import 'react';
|
|
@@ -24,7 +24,7 @@ require('../_shared/cjs/RadioGroup-23c964ae.js');
|
|
|
24
24
|
require('../_shared/cjs/debounce-123468fb.js');
|
|
25
25
|
require('../_shared/cjs/SiteFooter-65b6360c.js');
|
|
26
26
|
require('../_shared/cjs/SiteHeader.rehydrator-df053a52.js');
|
|
27
|
-
require('../_shared/cjs/SiteHeaderV2-
|
|
27
|
+
require('../_shared/cjs/SiteHeaderV2-79930632.js');
|
|
28
28
|
require('../_shared/cjs/Tabs-34db6bc1.js');
|
|
29
29
|
require('../_shared/cjs/TextInput-d0370fa8.js');
|
|
30
30
|
require('../_shared/cjs/Toast-392b1d60.js');
|
|
@@ -20,7 +20,7 @@ import '../_shared/esm/RadioGroup-37fdb06b.js';
|
|
|
20
20
|
import '../_shared/esm/debounce-6fed6b84.js';
|
|
21
21
|
import '../_shared/esm/SiteFooter-38ee1536.js';
|
|
22
22
|
import '../_shared/esm/SiteHeader.rehydrator-32bdcd88.js';
|
|
23
|
-
import '../_shared/esm/SiteHeaderV2-
|
|
23
|
+
import '../_shared/esm/SiteHeaderV2-9e7e7d3b.js';
|
|
24
24
|
import '../_shared/esm/Tabs-df9965dd.js';
|
|
25
25
|
import '../_shared/esm/TextInput-abbab56b.js';
|
|
26
26
|
import '../_shared/esm/Toast-5d66e13f.js';
|
|
@@ -60,7 +60,7 @@ var ItemGroup = function (_a) {
|
|
|
60
60
|
? 0
|
|
61
61
|
: -1 }, title),
|
|
62
62
|
React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
|
|
63
|
-
React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid,
|
|
63
|
+
React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
|
|
64
64
|
React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
|
|
65
65
|
React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
|
|
66
66
|
children,
|
|
@@ -84,9 +84,10 @@ var Column = function (_a) {
|
|
|
84
84
|
};
|
|
85
85
|
|
|
86
86
|
var BackButton = function (_a) {
|
|
87
|
-
var setOpen = _a.setOpen;
|
|
87
|
+
var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
|
|
88
88
|
return (React__default["default"].createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
|
|
89
89
|
setOpen(false);
|
|
90
|
+
setOpenPanelOnFirstClick(false);
|
|
90
91
|
} },
|
|
91
92
|
React__default["default"].createElement("span", { className: "arc-SiteHeaderV2BackButton-icon" },
|
|
92
93
|
React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronLeft2Px, null)),
|
|
@@ -95,7 +96,7 @@ var BackButton = function (_a) {
|
|
|
95
96
|
|
|
96
97
|
var Panel = function (_a) {
|
|
97
98
|
var _b, _c, _d, _e, _f;
|
|
98
|
-
var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, subNavItemRef = _a.subNavItemRef
|
|
99
|
+
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 = filterDataAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
|
|
99
100
|
var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
|
|
100
101
|
React.useEffect(function () {
|
|
101
102
|
// Where appropriate, close the Panel when clicking outside of it,
|
|
@@ -118,7 +119,9 @@ var Panel = function (_a) {
|
|
|
118
119
|
(subNavItemRef &&
|
|
119
120
|
!e.target.classList.contains(subNavLink) &&
|
|
120
121
|
!e.target.classList.contains("".concat(subNavLink, "Title")) &&
|
|
121
|
-
!e.target.classList.contains("".concat(subNavLink, "SubTitle"))
|
|
122
|
+
!e.target.classList.contains("".concat(subNavLink, "SubTitle")) &&
|
|
123
|
+
!e.target.classList.contains("".concat(subNavLink, "Slot")) &&
|
|
124
|
+
!e.target.classList.contains("".concat(subNavLink, "SlotTitle"))) ||
|
|
122
125
|
// Panel is inside a SubNavItem
|
|
123
126
|
// and the click is not inside the Panel's NavItem parent.
|
|
124
127
|
// This prevents SubNavItem Panels in sibling NavItems from being closed.
|
|
@@ -132,7 +135,31 @@ var Panel = function (_a) {
|
|
|
132
135
|
return function () {
|
|
133
136
|
document.removeEventListener("click", handleClick);
|
|
134
137
|
};
|
|
135
|
-
}, [
|
|
138
|
+
}, [
|
|
139
|
+
navItemRef,
|
|
140
|
+
setOpen,
|
|
141
|
+
subNavItemRef,
|
|
142
|
+
subNavLink,
|
|
143
|
+
setOpenPanelOnFirstClick,
|
|
144
|
+
]);
|
|
145
|
+
React.useEffect(function () {
|
|
146
|
+
var handleClick = function (e) {
|
|
147
|
+
// Close the Panel…
|
|
148
|
+
if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
|
|
149
|
+
setOpenPanelOnFirstClick(false);
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel") ||
|
|
153
|
+
e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-primary")) {
|
|
154
|
+
setOpenPanelOnFirstClick(true);
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
document.addEventListener("click", handleClick);
|
|
159
|
+
return function () {
|
|
160
|
+
document.removeEventListener("click", handleClick);
|
|
161
|
+
};
|
|
162
|
+
}, [navItemRef, setOpenPanelOnFirstClick]);
|
|
136
163
|
React.useEffect(function () {
|
|
137
164
|
var handleKeydown = function (e) {
|
|
138
165
|
// Check the viewport width at time of press
|
|
@@ -156,9 +183,10 @@ var Panel = function (_a) {
|
|
|
156
183
|
_b["arc-SiteHeaderV2Panel"] = true,
|
|
157
184
|
_b["arc-SiteHeaderV2Panel--open"] = open,
|
|
158
185
|
_b["arc-SiteHeaderV2Panel--withSubNav"] = withSubNav,
|
|
186
|
+
_b["arc-SiteHeaderV2Panel-onlyPanel"] = isPrimary && isNavItem,
|
|
159
187
|
_b)) }, filterDataAttrs.filterDataAttrs(props)),
|
|
160
188
|
React__default["default"].createElement(Surface.Surface, { background: "white" },
|
|
161
|
-
React__default["default"].createElement(BackButton, { setOpen: setOpen }),
|
|
189
|
+
React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: setOpenPanelOnFirstClick }),
|
|
162
190
|
React__default["default"].createElement("div", { className: index.classNames((_c = {},
|
|
163
191
|
_c["arc-SiteHeaderV2Panel-inner"] = !isNavItem && withSubNav,
|
|
164
192
|
_c["arc-SiteHeaderV2Panel-innerWithoutSubNav"] = !isNavItem && !withSubNav,
|
|
@@ -181,7 +209,7 @@ var Panel = function (_a) {
|
|
|
181
209
|
React__default["default"].createElement("ul", { className: index.classNames((_f = {},
|
|
182
210
|
_f["arc-SiteHeaderV2Panel-items"] = !isNavItem,
|
|
183
211
|
_f["arc-SiteHeaderV2Panel-itemsNavItems"] = isNavItem,
|
|
184
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] =
|
|
212
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-fadeIn"] = open && isNavItem,
|
|
185
213
|
_f)) }, children),
|
|
186
214
|
!withSubNav && viewAll)),
|
|
187
215
|
withSubNav && viewAll)))));
|
|
@@ -211,10 +239,11 @@ Panel.ViewAll = ViewAll;
|
|
|
211
239
|
|
|
212
240
|
var NavItem = function (_a) {
|
|
213
241
|
var _b, _c, _d, _e, _f;
|
|
214
|
-
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 = filterDataAttrs.__rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "subTitle"]);
|
|
242
|
+
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 = filterDataAttrs.__rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);
|
|
215
243
|
var navItem = React.useRef();
|
|
216
244
|
var _g = React.useState(false), panelOpen = _g[0], setPanelOpen = _g[1];
|
|
217
|
-
var _h = React.useState(
|
|
245
|
+
var _h = React.useState(true), openSecondaryWithSubNav = _h[0], setOpenSecondaryWithSubNav = _h[1];
|
|
246
|
+
var _j = React.useState(false), animation = _j[0], setAnimation = _j[1];
|
|
218
247
|
var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
|
|
219
248
|
React.useEffect(function () {
|
|
220
249
|
React__default["default"].Children.map(children, function (item) {
|
|
@@ -231,7 +260,8 @@ var NavItem = function (_a) {
|
|
|
231
260
|
_b["arc-SiteHeaderV2NavItemWithSubNav-Secondary"] = !isPrimary,
|
|
232
261
|
_b["arc-SiteHeaderV2NavItem"] = !subTitle && !isPrimary,
|
|
233
262
|
_b["arc-SiteHeaderV2NavItem--linkSelected"] = (children && panelOpen) || (!children && href && isCurrent),
|
|
234
|
-
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = !isPrimary && panelOpen
|
|
263
|
+
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = (!isPrimary && panelOpen) ||
|
|
264
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
235
265
|
_b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)), !children ? (href ? (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
|
|
236
266
|
handler: onClick
|
|
237
267
|
}), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -239,6 +269,8 @@ var NavItem = function (_a) {
|
|
|
239
269
|
React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
|
|
240
270
|
_c["arc-SiteHeaderV2NavItem-link"] = true,
|
|
241
271
|
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
|
|
272
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
273
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
242
274
|
_c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
|
|
243
275
|
_c)), onClick: function (e) {
|
|
244
276
|
e.preventDefault();
|
|
@@ -247,18 +279,25 @@ var NavItem = function (_a) {
|
|
|
247
279
|
}, onAnimationEnd: function () { return setAnimation(false); } },
|
|
248
280
|
React__default["default"].createElement("div", { className: index.classNames((_d = {},
|
|
249
281
|
_d["arc-SiteHeaderV2NavItem-title"] = !subTitle,
|
|
282
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
283
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
250
284
|
_d)) }, title),
|
|
251
285
|
React__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
|
|
252
286
|
React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronRight2Px, null)),
|
|
253
287
|
subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].createElement("div", { className: index.classNames((_e = {},
|
|
254
288
|
_e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
|
|
289
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
290
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
255
291
|
_e)) }, subTitle)) : null,
|
|
256
292
|
React__default["default"].createElement("div", { className: index.classNames((_f = {},
|
|
257
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen
|
|
293
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = panelOpen ||
|
|
294
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
258
295
|
_f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && panelOpen,
|
|
259
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && panelOpen,
|
|
296
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive"] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
|
|
260
297
|
_f)) }))),
|
|
261
|
-
React__default["default"].createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open:
|
|
298
|
+
React__default["default"].createElement(Panel, { navItemRef: navItem, isNavItem: true, isPrimary: isPrimary, open: opensFirstWithPanel && isMinWidthArcBreakpointL
|
|
299
|
+
? openSecondaryWithSubNav
|
|
300
|
+
: panelOpen, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
|
|
262
301
|
};
|
|
263
302
|
|
|
264
303
|
var HorizontalPanel = function (_a) {
|
|
@@ -327,7 +366,7 @@ var HorizontalPanel = function (_a) {
|
|
|
327
366
|
React__default["default"].createElement("div", { className: index.classNames((_c = {},
|
|
328
367
|
_c["arc-SiteHeaderV2HorizontalPanel-container"] = true,
|
|
329
368
|
_c)) },
|
|
330
|
-
React__default["default"].createElement(BackButton, { setOpen: setOpen }),
|
|
369
|
+
React__default["default"].createElement(BackButton, { setOpen: setOpen, setOpenPanelOnFirstClick: function () { } }),
|
|
331
370
|
title && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2Panel-selectedTitle" }, title)),
|
|
332
371
|
React__default["default"].createElement("ul", { className: index.classNames((_d = {},
|
|
333
372
|
_d["arc-SiteHeaderV2HorizontalPanel-items"] = true,
|
|
@@ -339,12 +378,13 @@ var Context$1 = React.createContext(defaultContext$1);
|
|
|
339
378
|
var Provider$1 = Context$1.Provider;
|
|
340
379
|
var NavItemWithSubNav = function (_a) {
|
|
341
380
|
var _b, _c, _d, _e, _f;
|
|
342
|
-
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 = filterDataAttrs.__rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "viewAllTitle"]);
|
|
381
|
+
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 = filterDataAttrs.__rest(_a, ["href", "slot1", "slot2", "slot3", "slot4", "slot5", "slot6", "subTitle", "title", "onViewAllClick", "isPrimary", "opensFirstWithPanel", "viewAllTitle"]);
|
|
343
382
|
var navItem = React.useRef();
|
|
344
383
|
var _h = React.useState(true), defaultItem = _h[0], setDefaultItem = _h[1];
|
|
345
384
|
var _j = React.useState(false), panelOpen = _j[0], setPanelOpen = _j[1];
|
|
346
385
|
var _k = React.useState(false), horizontalPanelOpen = _k[0], setHorizontalPanelOpen = _k[1];
|
|
347
386
|
var _l = React.useState(false), animation = _l[0], setAnimation = _l[1];
|
|
387
|
+
var _m = React.useState(true), openSecondaryWithSubNav = _m[0], setOpenSecondaryWithSubNav = _m[1];
|
|
348
388
|
var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
|
|
349
389
|
React.useEffect(function () {
|
|
350
390
|
React__default["default"].Children.map(slot1, function (item) {
|
|
@@ -381,12 +421,15 @@ var NavItemWithSubNav = function (_a) {
|
|
|
381
421
|
_b["arc-SiteHeaderV2NavItem--linkSelected"] = isPrimary
|
|
382
422
|
? horizontalPanelOpen
|
|
383
423
|
: panelOpen,
|
|
384
|
-
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen,
|
|
424
|
+
_b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
|
|
385
425
|
_b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
|
|
386
426
|
React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
|
|
387
427
|
React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: index.classNames((_c = {},
|
|
388
428
|
_c["arc-SiteHeaderV2NavItem-link"] = true,
|
|
389
429
|
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
|
|
430
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
431
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
432
|
+
_c["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
390
433
|
_c["arc-SiteHeaderV2NavItem-horizontalPanelLink"] = !isPrimary && !isMinWidthArcBreakpointL,
|
|
391
434
|
_c)), onClick: function (e) {
|
|
392
435
|
e.preventDefault();
|
|
@@ -397,18 +440,25 @@ var NavItemWithSubNav = function (_a) {
|
|
|
397
440
|
}, onAnimationEnd: function () { return setAnimation(false); } },
|
|
398
441
|
React__default["default"].createElement("div", { className: index.classNames((_d = {},
|
|
399
442
|
_d["arc-SiteHeaderV2NavItem-title"] = isPrimary,
|
|
443
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
444
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
445
|
+
_d["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
400
446
|
_d)) }, title),
|
|
401
447
|
React__default["default"].createElement("span", { className: "arc-SiteHeaderV2-mobileChevron" },
|
|
402
448
|
React__default["default"].createElement(BtIconChevronRight2Px_esm.BtIconChevronRight2Px, null)),
|
|
403
449
|
subTitle && !isPrimary && isMinWidthArcBreakpointL ? (React__default["default"].createElement("div", { className: index.classNames((_e = {},
|
|
404
450
|
_e["arc-SiteHeaderV2NavItemWithSubNav-text"] = !isPrimary,
|
|
451
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
|
|
452
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
|
|
453
|
+
_e["arc-SiteHeaderV2NavItem-link--itemHasChildren-primary"] = isPrimary,
|
|
405
454
|
_e)) }, subTitle)) : null,
|
|
406
455
|
React__default["default"].createElement("div", { className: index.classNames((_f = {},
|
|
407
456
|
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderline"] = isPrimary
|
|
408
457
|
? horizontalPanelOpen
|
|
409
|
-
: panelOpen
|
|
458
|
+
: panelOpen ||
|
|
459
|
+
(opensFirstWithPanel && openSecondaryWithSubNav),
|
|
410
460
|
_f["arc-SiteHeaderV2NavItemWithSubNav-primaryButtonUnderline"] = isPrimary && horizontalPanelOpen,
|
|
411
|
-
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && panelOpen,
|
|
461
|
+
_f["arc-SiteHeaderV2NavItemWithSubNav-buttonUnderlineActive "] = !isPrimary && (panelOpen || openSecondaryWithSubNav),
|
|
412
462
|
_f)) }))),
|
|
413
463
|
isPrimary && (React__default["default"].createElement(HorizontalPanel, { animation: animation, navItemRef: navItem, open: horizontalPanelOpen, setOpen: setHorizontalPanelOpen, title: !isMinWidthArcBreakpointL && title },
|
|
414
464
|
slot1,
|
|
@@ -416,7 +466,9 @@ var NavItemWithSubNav = function (_a) {
|
|
|
416
466
|
slot3,
|
|
417
467
|
slot4,
|
|
418
468
|
slot5)),
|
|
419
|
-
React__default["default"].createElement(Panel, { navItemRef: navItem, open:
|
|
469
|
+
React__default["default"].createElement(Panel, { navItemRef: navItem, open: opensFirstWithPanel && isMinWidthArcBreakpointL
|
|
470
|
+
? openSecondaryWithSubNav
|
|
471
|
+
: panelOpen, fade: animation, setOpenPanelOnFirstClick: setOpenSecondaryWithSubNav, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, navLink: "", viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
|
|
420
472
|
defaultItem
|
|
421
473
|
? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
|
|
422
474
|
: slot1,
|
|
@@ -493,10 +545,11 @@ var SubNavItem = function (_a) {
|
|
|
493
545
|
setPanelOpen(true);
|
|
494
546
|
setFade(true);
|
|
495
547
|
}, onAnimationEnd: function () { return setFade(false); } },
|
|
496
|
-
React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-
|
|
497
|
-
icon && (React__default["default"].createElement("
|
|
498
|
-
|
|
499
|
-
|
|
548
|
+
React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlot" },
|
|
549
|
+
icon && isMinWidthArcBreakpointL && (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2SubNavItem-linkSlotIcon" },
|
|
550
|
+
React__default["default"].createElement(Icon.Icon, { icon: icon, size: 48 }))),
|
|
551
|
+
React__default["default"].createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-linkSlotTitle" }, linkTitle))),
|
|
552
|
+
React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, setOpenPanelOnFirstClick: function () { }, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default["default"].createElement("span", null,
|
|
500
553
|
title,
|
|
501
554
|
subTitle && (React__default["default"].createElement(Text.Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "See all ".concat(title), fill: "outlined" })) : undefined, isNavItem: false, fade: fade }, children)))));
|
|
502
555
|
};
|
|
@@ -578,7 +631,7 @@ var SiteHeaderV2 = function (_a) {
|
|
|
578
631
|
React__default["default"].createElement("a", { className: "arc-SiteHeaderV2-brand", onClick: handleLinkClick.handleLinkClick({
|
|
579
632
|
handler: logoOnClick
|
|
580
633
|
}), href: logoHref },
|
|
581
|
-
React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand
|
|
634
|
+
React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel, subBrand: subBrand })),
|
|
582
635
|
children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
|
|
583
636
|
React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
|
|
584
637
|
React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
|
|
@@ -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 })),
|