@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.
Files changed (96) hide show
  1. package/dist/Alert/Alert.cjs.js +1 -1
  2. package/dist/Alert/Alert.esm.js +1 -1
  3. package/dist/Breadcrumbs/Breadcrumbs.cjs.js +2 -2
  4. package/dist/Breadcrumbs/Breadcrumbs.esm.js +2 -2
  5. package/dist/Button/Button.cjs.js +2 -2
  6. package/dist/Button/Button.esm.js +2 -2
  7. package/dist/Calendar/Calendar.cjs.js +2 -2
  8. package/dist/Calendar/Calendar.esm.js +2 -2
  9. package/dist/Card/Card.cjs.js +2 -2
  10. package/dist/Card/Card.esm.js +2 -2
  11. package/dist/DatePicker/DatePicker.cjs.js +4 -4
  12. package/dist/DatePicker/DatePicker.esm.js +4 -4
  13. package/dist/Disclosure/Disclosure.cjs.js +5 -1
  14. package/dist/Disclosure/Disclosure.esm.js +6 -2
  15. package/dist/Icon/Icon.cjs.js +1 -1
  16. package/dist/Icon/Icon.esm.js +1 -1
  17. package/dist/InformationCard/InformationCard.cjs.js +4 -4
  18. package/dist/InformationCard/InformationCard.esm.js +4 -4
  19. package/dist/MediaCard/MediaCard.cjs.js +2 -2
  20. package/dist/MediaCard/MediaCard.esm.js +2 -2
  21. package/dist/Modal/Modal.cjs.js +2 -2
  22. package/dist/Modal/Modal.esm.js +2 -2
  23. package/dist/Pagination/Pagination.cjs.js +1 -1
  24. package/dist/Pagination/Pagination.esm.js +1 -1
  25. package/dist/PaginationSimple/PaginationSimple.cjs.js +1 -1
  26. package/dist/PaginationSimple/PaginationSimple.esm.js +1 -1
  27. package/dist/ProgressBar/ProgressBar.cjs.js +1 -1
  28. package/dist/ProgressBar/ProgressBar.esm.js +1 -1
  29. package/dist/ProgressStepper/ProgressStepper.cjs.js +2 -2
  30. package/dist/ProgressStepper/ProgressStepper.esm.js +2 -2
  31. package/dist/RadioGroup/RadioGroup.cjs.js +1 -1
  32. package/dist/RadioGroup/RadioGroup.esm.js +1 -1
  33. package/dist/ScrollToTop/ScrollToTop.cjs.js +1 -1
  34. package/dist/ScrollToTop/ScrollToTop.esm.js +1 -1
  35. package/dist/Select/Select.cjs.js +1 -1
  36. package/dist/Select/Select.esm.js +1 -1
  37. package/dist/SiteHeader/SiteHeader.cjs.js +3 -3
  38. package/dist/SiteHeader/SiteHeader.esm.js +3 -3
  39. package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +3 -3
  40. package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +3 -3
  41. package/dist/Switch/Switch.cjs.js +1 -1
  42. package/dist/Switch/Switch.esm.js +1 -1
  43. package/dist/Tabs/Tabs.cjs.js +2 -2
  44. package/dist/Tabs/Tabs.esm.js +2 -2
  45. package/dist/Tag/Tag.cjs.js +2 -2
  46. package/dist/Tag/Tag.esm.js +2 -2
  47. package/dist/TextArea/TextArea.cjs.js +11 -11
  48. package/dist/TextArea/TextArea.esm.js +11 -11
  49. package/dist/TextInput/TextInput.cjs.js +2 -2
  50. package/dist/TextInput/TextInput.esm.js +2 -2
  51. package/dist/Toast/Toast.cjs.js +2 -2
  52. package/dist/Toast/Toast.esm.js +2 -2
  53. package/dist/TypographyCard/TypographyCard.cjs.js +2 -2
  54. package/dist/TypographyCard/TypographyCard.esm.js +2 -2
  55. package/dist/_shared/cjs/{Breadcrumbs-ef659d2b.js → Breadcrumbs-c6eaf5c4.js} +1 -1
  56. package/dist/_shared/cjs/{Button-4fed080a.js → Button-84533dc8.js} +1 -1
  57. package/dist/_shared/cjs/{Calendar-18e255f8.js → Calendar-c6ed5f2c.js} +1 -1
  58. package/dist/_shared/cjs/{Card-17dcc171.js → Card-5b19cabc.js} +1 -1
  59. package/dist/_shared/cjs/{CardFooter-43c32239.js → CardFooter-f6cba651.js} +1 -1
  60. package/dist/_shared/cjs/{Icon-a9801f05.js → Icon-b46897a3.js} +6 -2
  61. package/dist/_shared/cjs/{ProgressStepper-9cdc0afe.js → ProgressStepper-3af8a210.js} +1 -1
  62. package/dist/_shared/cjs/{RadioGroup-23c964ae.js → RadioGroup-60845bb3.js} +8 -4
  63. package/dist/_shared/cjs/{SiteHeader.rehydrator-df053a52.js → SiteHeader.rehydrator-ea49f8d5.js} +2 -2
  64. package/dist/_shared/cjs/{SiteHeaderV2-8ce6d4fc.js → SiteHeaderV2-8c8f3f5c.js} +79 -26
  65. package/dist/_shared/cjs/{Tabs-34db6bc1.js → Tabs-24e6f45b.js} +1 -1
  66. package/dist/_shared/cjs/{Tag-42ddca45.js → Tag-8723b324.js} +1 -1
  67. package/dist/_shared/cjs/{TextInput-d0370fa8.js → TextInput-acbd8eda.js} +5 -2
  68. package/dist/_shared/cjs/{Toast-392b1d60.js → Toast-7a20d1b9.js} +1 -1
  69. package/dist/_shared/esm/{Breadcrumbs-36edfb3d.js → Breadcrumbs-7d55e1a6.js} +1 -1
  70. package/dist/_shared/esm/{Button-a453e8e4.js → Button-3f294e64.js} +1 -1
  71. package/dist/_shared/esm/{Calendar-4033fa48.js → Calendar-753ef6f1.js} +1 -1
  72. package/dist/_shared/esm/{Card-201e9f28.js → Card-7fc6c9b4.js} +1 -1
  73. package/dist/_shared/esm/{CardFooter-dd8d4000.js → CardFooter-55ae9a37.js} +1 -1
  74. package/dist/_shared/esm/{Icon-abd0d990.js → Icon-15799695.js} +6 -2
  75. package/dist/_shared/esm/{ProgressStepper-f51f86c3.js → ProgressStepper-d4c5b6d9.js} +1 -1
  76. package/dist/_shared/esm/{RadioGroup-37fdb06b.js → RadioGroup-d42dba3a.js} +8 -4
  77. package/dist/_shared/esm/{SiteHeader.rehydrator-32bdcd88.js → SiteHeader.rehydrator-65c8cf71.js} +2 -2
  78. package/dist/_shared/esm/{SiteHeaderV2-f8377627.js → SiteHeaderV2-6d0ff35b.js} +79 -26
  79. package/dist/_shared/esm/{Tabs-df9965dd.js → Tabs-a85af483.js} +1 -1
  80. package/dist/_shared/esm/{Tag-92c088a9.js → Tag-664b85c8.js} +1 -1
  81. package/dist/_shared/esm/{TextInput-abbab56b.js → TextInput-ddf4cc7a.js} +5 -3
  82. package/dist/_shared/esm/{Toast-5d66e13f.js → Toast-7a232e15.js} +1 -1
  83. package/dist/index.es.js +101 -34
  84. package/dist/index.es.js.map +1 -1
  85. package/dist/index.js +101 -34
  86. package/dist/index.js.map +1 -1
  87. package/dist/styles.css +3 -3
  88. package/dist/types/components/DatePicker/DatePicker.d.ts +2 -2
  89. package/dist/types/components/Icon/Icon.d.ts +4 -0
  90. package/dist/types/components/RadioGroup/RadioButton/RadioButton.d.ts +5 -0
  91. package/dist/types/components/SiteHeaderV2/components/BackButton/BackButton.d.ts +1 -0
  92. package/dist/types/components/SiteHeaderV2/components/NavItem/NavItem.d.ts +1 -0
  93. package/dist/types/components/SiteHeaderV2/components/NavItem/NavItemWithSubNav.d.ts +1 -0
  94. package/dist/types/components/SiteHeaderV2/components/Panel/Panel.d.ts +2 -0
  95. package/dist/types/components/TextInput/TextInput.d.ts +4 -4
  96. 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-a453e8e4.js';
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-abd0d990.js';
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, { size: 16 })))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
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, _g = _a.subNavLink, subNavLink = _g === void 0 ? "" : _g, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav, fade = _a.fade, isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "subNavItemRef", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
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
- }, [navItemRef, setOpen, subNavItemRef, subNavLink]);
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"] = isNavItem && fade && !isPrimary,
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(false), animation = _h[0], setAnimation = _h[1];
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: panelOpen, setOpen: setPanelOpen, fade: animation, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onClick, title: "See all solutions", fill: "solid" })) : undefined }, children)))));
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: panelOpen, fade: animation, setOpen: setPanelOpen, title: !isMinWidthArcBreakpointL && title, subtitle: subTitle, viewAll: href ? (React__default.createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle, fill: "solid" })) : undefined, withSubNav: true, isNavItem: false },
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-icon" },
491
- icon && (React__default.createElement("span", { className: "arc-SiteHeaderV2SubNavItem-panelIcon" }, isMinWidthArcBreakpointL && React__default.createElement(Icon, { icon: icon, size: 48 }))),
492
- React__default.createElement("span", { "data-cy": "linkTitle", className: "arc-SiteHeaderV2SubNavItem-title" }, linkTitle))),
493
- React__default.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderV2SubNavItem-link", title: React__default.createElement("span", null,
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, size: 40 })),
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-abd0d990.js';
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-abd0d990.js';
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-abd0d990.js';
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 TextInput = forwardRef(function (_a, ref) {
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 { TextInput as T };
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-abd0d990.js';
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';