@arc-ui/components 6.2.0 → 7.0.0

package/dist/index.js

@@ -775,7 +775,7 @@ var useAriaDescribedby = function (_a) {
  * Detect interaction mode
  */
 var useInteractionMode = function () {
-    var _a = React.useState(""), interactionMode = _a[0], setInteractionMode = _a[1];
+    var _a = React.useState("pointer"), interactionMode = _a[0], setInteractionMode = _a[1];
     React.useEffect(function () {
         var onKeyDown = function (event) {
             if (event.altKey || event.ctrlKey || event.metaKey) {
@@ -788,12 +788,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);
             }
         };
     }, []);
@@ -868,7 +868,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 = React.useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
@@ -888,7 +888,7 @@ var Card = function (_a) {
                 React__default["default"].createElement("div", { className: "arc-Card-header" },
                     React__default["default"].createElement("div", { className: "arc-Card-title" },
                         React__default["default"].createElement(Heading, { size: titleSize },
-                            React__default["default"].createElement(CardLink, { actionId: actionId, fill: fill, href: href, stretch: true, target: target }, title))),
+                            React__default["default"].createElement(CardLink, { actionId: actionId, fill: fill, href: href, linkData: linkData, stretch: true, target: target }, title))),
                     coverImage),
                 React__default["default"].createElement("div", { className: "arc-Card-children" },
                     React__default["default"].createElement(Card.Block, null, children)),
@@ -915,11 +915,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__default["default"].createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React__default["default"].createElement(Image, { alt: alt, fit: "cover", src: src, srcSet: srcSet, height: height })));
+        React__default["default"].createElement(Image, { alt: alt, fit: "cover", sizes: sizes, src: src, srcSet: srcSet, height: height })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -927,14 +927,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 = React.useContext(Context$3).surface;
-    return (React__default["default"].createElement("a", { "aria-describedby": actionId, className: classNames({
+    return (React__default["default"].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__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
             React__default["default"].createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
@@ -1435,12 +1435,16 @@ var ItemGroup = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
+    var ElementType = "div";
+    if (title) {
+        ElementType = "details";
+    }
     return (React__default["default"].createElement("li", { className: "arc-SiteHeaderItemGroup" },
-        React__default["default"].createElement("details", __assign({ className: "arc-SiteHeaderItemGroup-details", open: isMinWidthArcBreakpointL }, filterDataAttrs(props)),
-            React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title))),
+        React__default["default"].createElement(ElementType, __assign({ className: "arc-SiteHeaderItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
+            title ? (React__default["default"].createElement("summary", { className: "arc-SiteHeaderItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("a", { className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 }, title)) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
-                href ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
+                href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
                     React__default["default"].createElement("a", { className: "arc-SiteHeaderItem-link", href: href }, viewAllTitle || "View all ".concat(title.toLowerCase())))) : null))));
 };