@arc-ui/components 6.4.0 → 8.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) {
@@ -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)),
@@ -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 })))));
@@ -1331,7 +1331,7 @@ var Section = function (_a) {
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 var SiteFooter = function (_a) {
-    var children = _a.children, currentYear = _a.currentYear, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "logoLabel", "main", "siteName"]);
+    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
     useEffect(function () {
         React.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
@@ -1340,7 +1340,7 @@ var SiteFooter = function (_a) {
         });
     }, [children]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" }),
+        curve ? (React.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
         React.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
             React.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
                 (siteName || main) && (React.createElement(React.Fragment, null,
@@ -1897,9 +1897,9 @@ var Provider = Context.Provider;
  */
 var SiteHeader = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.basketHref, basketHref = _c === void 0 ? "/basket" : _c, _d = _a.hasBasket, hasBasket = _d === void 0 ? false : _d, _e = _a.hasLogin, hasLogin = _e === void 0 ? true : _e, _f = _a.isTransparent, isTransparent = _f === void 0 ? false : _f, _g = _a.loginHref, loginHref = _g === void 0 ? "/login" : _g, _h = _a.loginTitle, loginTitle = _h === void 0 ? "Login / Register" : _h, _j = _a.logoHref, logoHref = _j === void 0 ? "/" : _j, _k = _a.logoLabel, logoLabel = _k === void 0 ? "Home" : _k, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basketHref", "hasBasket", "hasLogin", "isTransparent", "loginHref", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
-    var _l = useState(false), hasClientSideJavaScript = _l[0], setHasClientSideJavaScript = _l[1];
-    var _m = useState(false), menuOpen = _m[0], setMenuOpen = _m[1];
+    var children = _a.children, basket = _a.basket, _c = _a.hasLogin, hasLogin = _c === void 0 ? true : _c, _d = _a.isTransparent, isTransparent = _d === void 0 ? false : _d, _e = _a.loginHref, loginHref = _e === void 0 ? "/login" : _e, _f = _a.loginTitle, loginTitle = _f === void 0 ? "Login / Register" : _f, _g = _a.logoHref, logoHref = _g === void 0 ? "/" : _g, _h = _a.logoLabel, logoLabel = _h === void 0 ? "Home" : _h, search = _a.search, subBrand = _a.subBrand, props = __rest(_a, ["children", "basket", "hasLogin", "isTransparent", "loginHref", "loginTitle", "logoHref", "logoLabel", "search", "subBrand"]);
+    var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
+    var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
@@ -1956,10 +1956,9 @@ var SiteHeader = function (_a) {
                             React.createElement("ul", { className: "arc-SiteHeader-navItems" }, children),
                             hasLogin && (React.createElement("div", { className: "arc-SiteHeader-loginButton" },
                                 React.createElement(Button, { href: loginHref, isFullWidth: true, label: loginTitle })))))),
-                    (hasBasket || hasLogin || search) && (React.createElement("div", { className: "arc-SiteHeader-secondary" },
+                    (basket || hasLogin || search) && (React.createElement("div", { className: "arc-SiteHeader-secondary" },
                         search ? (React.createElement("div", { className: "arc-SiteHeader-search" }, search)) : null,
-                        hasBasket ? (React.createElement("a", { className: "arc-SiteHeader-basket", href: basketHref },
-                            React.createElement(Icon, { icon: "btBasket", label: "Basket", size: 24 }))) : null,
+                        basket ? (React.createElement("div", { className: "arc-SiteHeader-basket" }, basket)) : null,
                         hasLogin && (React.createElement("a", { className: "arc-SiteHeader-loginLink", href: loginHref }, loginTitle)))))))));
 };
 Column.displayName = "SiteHeader.Column";
@@ -1976,11 +1975,12 @@ SiteHeader.NavItemWithSubNav = NavItemWithSubNav;
 SiteHeader.SubNavItem = SubNavItem;
 
 var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, search, basket, brand, login, logoHref, logoLabel, props;
+    var children, basket, search, brand, login, logoHref, logoLabel, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeader-navItems");
+                basket = el.querySelector(".arc-SiteHeader-basket");
                 search = el.querySelector(".arc-SiteHeader-search");
                 if (!children) return [3 /*break*/, 2];
                 return [4 /*yield*/, hydrate(children)];
@@ -1988,13 +1988,18 @@ var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, voi
                 children = _a.sent();
                 _a.label = 2;
             case 2:
-                if (!search) return [3 /*break*/, 4];
-                return [4 /*yield*/, hydrate(search)];
+                if (!basket) return [3 /*break*/, 4];
+                return [4 /*yield*/, hydrate(basket)];
             case 3:
-                search = _a.sent();
+                basket = _a.sent();
                 _a.label = 4;
             case 4:
-                basket = el.querySelector(".arc-SiteHeader-basket");
+                if (!search) return [3 /*break*/, 6];
+                return [4 /*yield*/, hydrate(search)];
+            case 5:
+                search = _a.sent();
+                _a.label = 6;
+            case 6:
                 brand = el.querySelector(".arc-SiteHeader-brand");
                 login = el.querySelector(".arc-SiteHeader-loginLink");
                 logoHref = "";
@@ -2004,8 +2009,7 @@ var SiteHeaderRehydrator = function (el, hydrate) { return __awaiter(void 0, voi
                     logoLabel = brand.textContent || /* istanbul ignore next */ "";
                 }
                 props = {
-                    basketHref: (basket === null || basket === void 0 ? void 0 : basket.getAttribute("href")) || undefined,
-                    hasBasket: Boolean(basket),
+                    basket: basket,
                     hasLogin: Boolean(login),
                     isTransparent: Boolean(el.dataset.transparent),
                     loginHref: (login === null || login === void 0 ? void 0 : login.getAttribute("href")) || undefined,