@arc-ui/components 6.0.0 → 6.1.0

package/dist/index.es.js

@@ -369,6 +369,10 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
 const ArcBreakpointM = 768;
 const ArcBreakpointL = 1024;
 const iconsSelected = [
@@ -1508,7 +1512,9 @@ var Panel = function (_a) {
                 // and the click is not on a SubNavItem-link.
                 // This ensures that one SubNavItem Panel per NavItem always remains open.
                 (subNavItemRef &&
-                    !e.target.classList.contains(subNavLink)) ||
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
                 // Panel is inside a SubNavItem
                 // and the click is not inside the Panel's NavItem parent.
                 // This prevents SubNavItem Panels in sibling NavItems from being closed.
@@ -1636,12 +1642,31 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
     });
 }); });
 
+/**
+ * Use `Text` to display text.
+ */
+var Text = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
+    var surface = useContext(Context$3).surface;
+    return (React.createElement("span", __assign({ className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+
 var SubNavItem = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, promo = _a.promo, title = _a.title, props = __rest(_a, ["children", "isDefaultItem", "href", "promo", "title"]);
-    var _e = useContext(Context$1), navItem = _e.navItem, subTitle = _e.subTitle;
+    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, offsetXL = _a.offsetXL, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "isDefaultItem", "href", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
+    var navItem = useContext(Context$1).navItem;
     var subNavItem = useRef();
-    var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
@@ -1661,52 +1686,75 @@ var SubNavItem = function (_a) {
             setPanelOpen(false);
         }
     }, [isDefaultItem, isMinWidthArcBreakpointL]);
+    var linkTitle = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
+        subTitle ? (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
     return (React.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderSubNavItem"] = true,
             _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
-            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, title)) : null) : (React.createElement(React.Fragment, null,
+            _b[suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, linkTitle)) : null) : (React.createElement(React.Fragment, null,
         React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderSubNavItem-link"] = true,
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, title),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement(React.Fragment, null,
-                subTitle && "".concat(subTitle, " "),
-                React.createElement("b", null, title)) }, children)))));
+            } }, linkTitle),
+        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
+                title,
+                subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, href, title, props;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var children, promo, link, linkTitle, viewAll, href, title, offsetXL, props;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeaderPanel-items");
                 promo = el.querySelector(".arc-SiteHeaderPanel-promo");
                 if (!children) return [3 /*break*/, 2];
                 return [4 /*yield*/, hydrate(children)];
             case 1:
-                children = _a.sent();
-                _a.label = 2;
+                children = _b.sent();
+                _b.label = 2;
             case 2:
                 if (!promo) return [3 /*break*/, 4];
                 return [4 /*yield*/, hydrate(promo)];
             case 3:
-                promo = _a.sent();
-                _a.label = 4;
+                promo = _b.sent();
+                _b.label = 4;
             case 4:
                 link = el.querySelector(".arc-SiteHeaderSubNavItem-link");
+                linkTitle = el.querySelector(".arc-SiteHeaderSubNavItem-linkTitle");
+                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
                 href = "";
                 title = "";
                 if (link) {
                     href = link.getAttribute("href") || /* istanbul ignore next */ "";
-                    title = link.textContent || /* istanbul ignore next */ "";
+                }
+                if (linkTitle) {
+                    title = linkTitle.textContent || /* istanbul ignore next */ "";
+                }
+                if (viewAll) {
+                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
+                }
+                offsetXL = undefined;
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL24")) {
+                    offsetXL = "24";
+                }
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL48")) {
+                    offsetXL = "48";
                 }
                 props = {
                     href: href,
                     isDefaultItem: Boolean(el.dataset.defaultItem),
+                    offsetXL: offsetXL,
                     promo: promo || undefined,
-                    title: title
+                    subTitle: ((_a = el.querySelector(".arc-SiteHeaderSubNavItem-linkSubTitle")) === null || _a === void 0 ? void 0 : _a.textContent) ||
+                        undefined,
+                    title: title,
+                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
                 return [2 /*return*/, React.createElement(SubNavItem, __assign({}, props), children)];
         }
@@ -1773,7 +1821,7 @@ function wrap(el, wrapper) {
     wrapper.appendChild(el);
 }
 var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAll, title, props;
+    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAllNodes, viewAll, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1803,7 +1851,8 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
             case 4:
                 link = el.querySelector(".arc-SiteHeaderNavItem-link");
                 subTitle = el.querySelector(".arc-SiteHeaderPanel-title");
-                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
+                viewAllNodes = el.querySelectorAll(".arc-SiteHeaderPanel-viewAll");
+                viewAll = viewAllNodes[viewAllNodes.length - 1];
                 title = "";
                 if (link) {
                     title = link.textContent || /* istanbul ignore next */ "";
@@ -1970,25 +2019,6 @@ SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
 SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
-/**
- * Use `Text` to display text.
- */
-var Text = function (_a) {
-    var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
-    var surface = useContext(Context$3).surface;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
-                "arc-Text": true
-            },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
-};
-
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */