@arc-ui/components 7.1.0 → 8.1.0

package/dist/index.es.js

@@ -700,7 +700,7 @@ var ButtonIcon = function (_a) {
  */
 var Image = function (_a) {
     var _b;
-    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "overlay", "sizes", "src", "srcSet", "width"]);
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = __rest(_a, ["alt", "anchor", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
@@ -708,7 +708,7 @@ var Image = function (_a) {
             _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
             _b[suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
             _b)), style: __assign(__assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && { backgroundImage: "url(".concat(src, ")") })), (height && { height: "".concat(height, "px") })), (width && { width: "".concat(width, "px") })) }, filterDataAttrs(props)),
-        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, sizes: sizes, src: src, srcSet: srcSet, width: width })));
+        React.createElement("img", { className: "arc-Image-img", alt: alt, height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet, width: width })));
 };
 
 /**
@@ -860,14 +860,14 @@ 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, 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 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, imageHeight = _a.imageHeight, imageLoading = _a.imageLoading, imageSrc = _a.imageSrc, imageSrcSet = _a.imageSrcSet, 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", "imageHeight", "imageLoading", "imageSrc", "imageSrcSet", "linkData", "minHeight", "target", "title", "titleSize"]);
     var surface = useContext(Context$3).surface;
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
         return fill === "outlined" || fill === "neutral" ? (React.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
-    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, src: imageSrc, srcSet: imageSrcSet, height: imageHeight }));
+    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
                 "arc-Card--onDarkSurface": surface === "dark"
@@ -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, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
+    var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, 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", sizes: sizes, src: src, srcSet: srcSet, height: height })));
+        React.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -1212,8 +1212,8 @@ UniversalHeaderItem.displayName = "UniversalHeader.Item";
 UniversalHeader.Item = UniversalHeaderItem;
 
 var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "sizes", "src", "srcSet"]);
-    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", sizes: sizes, src: src, srcSet: srcSet }, props)));
+    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
 };
 PosterImage.displayName = "Poster.Image";
 
@@ -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,