@arc-ui/components 6.0.0 → 6.3.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 = [
@@ -686,8 +690,8 @@ var Button = forwardRef(function (_a, ref) {
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React.createElement("span", { className: classNames({
-            "arc-ButtonIcon": true,
-            "arc-ButtonIcon--chevron": isChevron
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
         }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "2px") })) : (React.createElement(Icon, { icon: icon }))));
 };
 
@@ -731,7 +735,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-HeadingProposition" }, children);
+    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;
@@ -776,12 +780,12 @@ var useInteractionMode = function () {
         };
         if (typeof window !== "undefined") {
             document.addEventListener("keydown", onKeyDown, true);
-            document.addEventListener("mousedown", onPointerDown, true);
+            document.addEventListener("click", onPointerDown, true);
         }
         return function () {
             if (typeof window !== "undefined") {
                 document.removeEventListener("keydown", onKeyDown);
-                document.removeEventListener("mousedown", onPointerDown);
+                document.removeEventListener("click", onPointerDown);
             }
         };
     }, []);
@@ -889,13 +893,13 @@ var Card = function (_a) {
 var CardBlock = function (_a) {
     var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
     return (React.createElement("div", { className: classNames({
-            "arc-CardBlock": true,
-            "arc-CardBlock--alignCenter": align === "center",
-            "arc-CardBlock--alignRight": align === "right",
-            "arc-CardBlock--fullWidth": isFullWidth,
-            "arc-CardBlock--grow": grow
+            "arc-Card-block": true,
+            "arc-Card-block--alignCenter": align === "center",
+            "arc-Card-block--alignRight": align === "right",
+            "arc-Card-block--fullWidth": isFullWidth,
+            "arc-Card-block--grow": grow
         }) },
-        React.createElement("div", { className: "arc-CardBlock-inner" }, children)));
+        React.createElement("div", { className: "arc-Card-blockInner" }, children)));
 };
 CardBlock.displayName = "Card.Block";
 Card.Block = CardBlock;
@@ -905,7 +909,7 @@ Card.Block = CardBlock;
 var CardImage = function (_a) {
     var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
-            "arc-CardImage": true
+            "arc-Card-image": true
         }) },
         React.createElement(Image, { alt: alt, fit: "cover", src: src, srcSet: srcSet, height: height })));
 };
@@ -918,13 +922,13 @@ var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context$3).surface;
     return (React.createElement("a", { "aria-describedby": actionId, className: classNames({
-            "arc-CardLink": true,
-            "arc-CardLink--button": isButton,
-            "arc-CardLink--onDarkSurface": surface === "dark" && fill !== "neutral",
-            "arc-CardLink--stretch": stretch
+            "arc-Card-link": true,
+            "arc-Card-link--button": isButton,
+            "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
+            "arc-Card-link--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target },
-        React.createElement("span", { className: "arc-CardLink-text" }, children),
-        isButton && (React.createElement("span", { className: "arc-CardLink-icon" },
+        React.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
             React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
 };
 
@@ -1064,24 +1068,24 @@ var Col = function (_a) {
     var _b;
     var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-Col"] = true,
-            _b[suffixModifier("arc-Col--align", align || "")] = align,
-            _b["arc-Col--".concat(span)] = typeof span !== "undefined",
-            _b["arc-Col--S".concat(spanS)] = typeof spanS !== "undefined",
-            _b["arc-Col--M".concat(spanM)] = typeof spanM !== "undefined",
-            _b["arc-Col--L".concat(spanL)] = typeof spanL !== "undefined",
-            _b["arc-Col--XL".concat(spanXL)] = typeof spanXL !== "undefined",
-            _b["arc-Col--offset"] = typeof offset !== "undefined" ||
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
                 typeof offsetS !== "undefined" ||
                 typeof offsetM !== "undefined" ||
                 typeof offsetL !== "undefined" ||
                 typeof offsetXL !== "undefined",
-            _b["arc-Col--offset".concat(offset)] = typeof offset !== "undefined",
-            _b["arc-Col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
-            _b["arc-Col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
-            _b["arc-Col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
-            _b["arc-Col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
-            _b["arc-Col--debugVisible"] = isDebugVisible,
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 Col.displayName = "Columns.Col";
@@ -1162,9 +1166,9 @@ var GroupItem = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "grow", "isDebugVisible"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-GroupItem"] = true,
-            _b["arc-GroupItem--grow"] = grow,
-            _b["arc-GroupItem--debugVisible"] = isDebugVisible,
+            _b["arc-Group-item"] = true,
+            _b["arc-Group-item--grow"] = grow,
+            _b["arc-Group-item--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 GroupItem.displayName = "Group.Item";
@@ -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.
  */