@arc-ui/components 9.1.0 → 10.0.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, forwardRef, useState, useEffect, Fragment, useRef } from 'react';
+import React, { createContext, useContext, forwardRef, useEffect, useState, Fragment, useRef } from 'react';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -433,6 +433,7 @@ const iconsSelected = [
   "btCloudUserFill",
   "btCollapseFill",
   "btCompareFill",
+  "btComputerChipFill",
   "btConnectedCareFill",
   "btContactDetailsFill",
   "btContactNoDetailsFill",
@@ -455,8 +456,10 @@ const iconsSelected = [
   "btDisabilityFill",
   "btDiscountFill",
   "btDivertOnBusyFill",
+  "btDocumentAndPencilFill",
   "btDocumentArticleFill",
   "btDocumentBillsFill",
+  "btDocumentDownloadFill",
   "btDocumentFill",
   "btDocumentPdfFill",
   "btDocumentWithCopyCrossedOutFill",
@@ -471,6 +474,7 @@ const iconsSelected = [
   "btFaceNeutralFill",
   "btFaceSadFill",
   "btFaceVeryHappyFill",
+  "btFirstAidFill",
   "btFolderFill",
   "btGamingFill",
   "btGenderFemaleAndMaleFill",
@@ -481,6 +485,7 @@ const iconsSelected = [
   "btGlobalConnectivityFill",
   "btGlobeFill",
   "btGlossaryFill",
+  "btGondolaFill",
   "btGraphBarAndPlotFill",
   "btGraphBarChartFill",
   "btGraphDownFill",
@@ -490,12 +495,14 @@ const iconsSelected = [
   "btHeartBrokenFill",
   "btHeartCareFill",
   "btHeartFill",
+  "btHoldingHeartFill",
   "btHomeFill",
   "btHomeTechExpertFill",
   "btHometownFill",
   "btHubAndMobileFill",
   "btHubFill",
   "btHubOldFill",
+  "btIpFill",
   "btIPv6Fill",
   "btIdeaFill",
   "btInfoFill",
@@ -503,6 +510,7 @@ const iconsSelected = [
   "btJigsawFill",
   "btJourneyFill",
   "btKeyFill",
+  "btKnifeAndForkFill",
   "btLanFill",
   "btLaptopAndMobileFill",
   "btLaptopConnectAndShareFill",
@@ -519,6 +527,7 @@ const iconsSelected = [
   "btLayoutRowsSmallFill",
   "btLeadershipFill",
   "btLinkFill",
+  "btLiteracyNumeracyFill",
   "btLocationFill",
   "btLockedFill",
   "btLogoutFill",
@@ -543,6 +552,7 @@ const iconsSelected = [
   "btNoSpeechFill",
   "btNoViewFill",
   "btNotificationFill",
+  "btPaperTowelFill",
   "btPasswordFIll",
   "btPaymentMethodFill",
   "btPayphoneFill",
@@ -558,6 +568,7 @@ const iconsSelected = [
   "btPodcastFill",
   "btPresentationFill",
   "btPriceFill",
+  "btPrinterFill",
   "btProcessFill",
   "btProcessMiningFill",
   "btProcessRolesFill",
@@ -573,6 +584,7 @@ const iconsSelected = [
   "btScaleFill",
   "btSearchFill",
   "btServerFill",
+  "btSettingsAlt2Fill",
   "btSettingsAltFill",
   "btSettingsFill",
   "btShieldAddFill",
@@ -583,8 +595,12 @@ const iconsSelected = [
   "btShipFill",
   "btSignalFill",
   "btSignatureFill",
+  "btSignpostFill",
   "btSimFill",
   "btSimpleFill",
+  "btSkiingFill",
+  "btSkisFill",
+  "btSnowboardingFill",
   "btSpannerFill",
   "btSpeakerFullVolumeFill",
   "btSpeakerHalfVolumeFill",
@@ -609,11 +625,14 @@ const iconsSelected = [
   "btTagFill",
   "btTaxonomyFill",
   "btTechBarFill",
+  "btTelemarkFill",
   "btThumbsDownFill",
   "btThumbsUpFill",
   "btTickAlt2pxFill",
   "btTickFill",
   "btTickVariantFill",
+  "btTree1Fill",
+  "btTree2Fill",
   "btTrophyFill",
   "btUkFill",
   "btUsbFill",
@@ -697,20 +716,37 @@ var ButtonIcon = function (_a) {
 };
 
 /**
- * Use `Image` to render a single image, or set of images, with support for image fitting.
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
  */
 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, 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"]);
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, 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", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== ImageSource) {
+                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
+            }
+        });
+    }, [children]);
+    var img = (React.createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
     return (React.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Image": true,
                 "arc-Image--cover": fit === "cover"
             },
             _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, loading: loading, sizes: sizes, src: src, srcSet: srcSet, width: width })));
+            _b)), style: __assign(__assign(__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, filterDataAttrs(props)), children ? (React.createElement("picture", null,
+        children,
+        " ",
+        img)) : (React.createElement(React.Fragment, null, img))));
+};
+var ImageSource = function (_a) {
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = __rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
+    return (React.createElement("source", __assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, filterDataAttrs(props))));
 };
+ImageSource.displayName = "Image.Source";
+Image.Source = ImageSource;
 
 /**
  * Use `Heading` to display heading text.
@@ -1897,7 +1933,7 @@ var Provider = Context.Provider;
  */
 var SiteHeader = function (_a) {
     var _b;
-    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 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 ? "Log in / 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)"));