@arc-ui/components 6.2.0 → 7.0.0

package/dist/index.es.js

@@ -767,7 +767,7 @@ var useAriaDescribedby = function (_a) {
  * Detect interaction mode
  */
 var useInteractionMode = function () {
-    var _a = useState(""), interactionMode = _a[0], setInteractionMode = _a[1];
+    var _a = useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
     useEffect(function () {
         var onKeyDown = function (event) {
             if (event.altKey || event.ctrlKey || event.metaKey) {
@@ -780,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);
             }
         };
     }, []);
@@ -860,7 +860,7 @@ var useNumericInput = function (props) {
  */
 var Card = function (_a) {
     var _b;
-    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, imageHeight = _a.imageHeight, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageSrc", "imageSrcSet", "imageHeight", "minHeight", "target", "title", "titleSize"]);
+    var actionId = _a.actionId, _c = _a.actionLabel, actionLabel = _c === void 0 ? "Read more" : _c, children = _a.children, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, href = _a.href, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, imageHeight = _a.imageHeight, linkData = _a.linkData, minHeight = _a.minHeight, target = _a.target, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? "s" : _e, props = __rest(_a, ["actionId", "actionLabel", "children", "fill", "href", "imageAlt", "imageSrc", "imageSrcSet", "imageHeight", "linkData", "minHeight", "target", "title", "titleSize"]);
     var surface = useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
@@ -880,7 +880,7 @@ var Card = function (_a) {
                 React.createElement("div", { className: "arc-Card-header" },
                     React.createElement("div", { className: "arc-Card-title" },
                         React.createElement(Heading, { size: titleSize },
-                            React.createElement(CardLink, { actionId: actionId, fill: fill, href: href, stretch: true, target: target }, title))),
+                            React.createElement(CardLink, { actionId: actionId, fill: fill, href: href, linkData: linkData, stretch: true, target: target }, title))),
                     coverImage),
                 React.createElement("div", { className: "arc-Card-children" },
                     React.createElement(Card.Block, null, children)),
@@ -907,11 +907,11 @@ Card.Block = CardBlock;
  * Internal `Card.Image` component to show an image within a Card.
  */
 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;
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", src: src, srcSet: srcSet, height: height })));
+        React.createElement(Image, { alt: alt, fit: "cover", sizes: sizes, src: src, srcSet: srcSet, height: height })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -919,14 +919,14 @@ Card.Image = CardImage;
  * Internal `CardLink` component.
  */
 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 actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context$3).surface;
-    return (React.createElement("a", { "aria-describedby": actionId, className: classNames({
+    return (React.createElement("a", __assign({ "aria-describedby": actionId, className: classNames({
             "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 },
+        }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React.createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
             React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
@@ -1427,12 +1427,16 @@ var ItemGroup = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
+    var ElementType = "div";
+    if (title) {
+        ElementType = "details";
+    }
     return (React.createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React.createElement("details", __assign({ className: "arc-SiteHeaderItemGroup-details", open: isMinWidthArcBreakpointL }, filterDataAttrs(props)),
-            React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title))),
+        React.createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React.createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React.createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React.createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React.createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
-                href ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                href && title ? (React.createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
                     React.createElement("a", { className: "arc-SiteHeaderItem-link", href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };