@royaloperahouse/harmonic 0.12.0-d → 0.12.0-f

package/dist/harmonic.esm.js

@@ -3500,6 +3500,11 @@ var RotatorButtons = function RotatorButtons(_ref) {
       onClickFullscreen();
     }
   };
+  var onFullscreenKeyDownHandler = function onFullscreenKeyDownHandler(e) {
+    if (e.key === 'Enter') {
+      onClickFullscreenHandler();
+    }
+  };
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: "CarouselArrow",
@@ -3542,6 +3547,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
     "data-testid": "iconnextnoavailable"
   }, renderNextIcon())), showFullscreen && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
     onClick: onClickFullscreenHandler,
+    onKeyDown: onFullscreenKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconfullscreen",
     className: "carousel-icon-wrapper-fullscreen",
@@ -8167,15 +8173,21 @@ var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_template
   var isVisible = _ref3.isVisible;
   return isVisible ? 'auto' : 'none';
 }, devices.mobile);
-var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: ", ";\n    pointer-events: ", ";\n  }\n\n  @media ", " {\n    padding-top: 16px;\n    padding-bottom: 16px;\n  }\n"])), function (_ref4) {
+  var hasChildren = _ref4.hasChildren;
+  return hasChildren ? 'pointer' : 'default';
+}, function (_ref5) {
+  var hasChildren = _ref5.hasChildren;
+  return hasChildren ? 'auto' : 'none';
+}, devices.mobile);
 var TitleText$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 32px);\n"])));
 var ExtendedBodyCopyHarmonic = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
 var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'textHeight';
   }
-})(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref4) {
-  var textHeight = _ref4.textHeight;
+})(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref6) {
+  var textHeight = _ref6.textHeight;
   return textHeight;
 }, devices.mobile);
 var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
@@ -8233,7 +8245,8 @@ var Accordion = function Accordion(_ref) {
     role: "button",
     "aria-label": title,
     "aria-expanded": openAccordion,
-    "aria-controls": contentContainerId
+    "aria-controls": contentContainerId,
+    hasChildren: !!children
   }, /*#__PURE__*/React__default.createElement(TitleText$1, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
   })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
@@ -8242,7 +8255,8 @@ var Accordion = function Accordion(_ref) {
     textHeight: textHeight,
     id: contentContainerId,
     "aria-live": "polite",
-    tag: "div"
+    tag: "div",
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
     isVisible: childrenVisibility
   }, children)));
@@ -8823,6 +8837,7 @@ var Editorial = function Editorial(_ref) {
     tag: "span"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
     tag: "div",
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -11394,7 +11409,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
 };
 
 var _templateObject$1h, _templateObject2$_;
-var Wrapper$8 = /*#__PURE__*/styled.figure(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 34px);\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n\n    @media ", " {\n      height: calc(100% - 30px);\n      @supports not (aspect-ratio: ", ") {\n        width: ", ";\n      }\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+var Wrapper$8 = /*#__PURE__*/styled.figure(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n\n  ", " {\n    height: calc(100% - 34px);\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n\n    @media ", " {\n      height: calc(100% - 30px);\n      @supports not (aspect-ratio: ", ") {\n        width: ", ";\n      }\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -11413,38 +11428,82 @@ var Wrapper$8 = /*#__PURE__*/styled.figure(_templateObject$1h || (_templateObjec
     height = _ref4.height;
   return "calc(calc(" + height + "px - 30px) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled(Caption)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: 22px;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  word-break: var(--word-break-body);\n  font-style: italic;\n\n  @media ", " {\n    height: 18px;\n  }\n"])), devices.mobile);
+var CaptionWrapper = /*#__PURE__*/styled(Caption)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-top: 12px;\n    max-width: var(--caption-max-width, 100%);\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    overflow-wrap: normal;\n  }\n  height: 22px;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  word-break: var(--word-break-body);\n\n  @media ", " {\n    height: 18px;\n  }\n"])), devices.mobile);
 
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
+    altText = _ref.altText,
     children = _ref.children,
     aspectRatio = _ref.aspectRatio;
   var wrapperRef = useRef(null);
+  var imgRef = useRef(null);
   var _useState = useState(0),
     height = _useState[0],
     setHeight = _useState[1];
+  var updateWrapperHeight = React__default.useCallback(function () {
+    var _wrapperRef$current;
+    setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
+  }, []);
+  var updateCaptionWidth = React__default.useCallback(function () {
+    var img = imgRef.current;
+    var wrapper = wrapperRef.current;
+    if (img && wrapper) {
+      var w = img.getBoundingClientRect().width;
+      wrapper.style.setProperty('--caption-max-width', Math.round(w) + "px");
+    }
+  }, []);
   useEffect(function () {
-    var setWrapperHeight = function setWrapperHeight() {
-      var _wrapperRef$current;
-      return setHeight((wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.offsetHeight) || 0);
-    };
-    setWrapperHeight(); // Initial height calculation
-    window.addEventListener('resize', setWrapperHeight);
+    updateWrapperHeight();
+    updateCaptionWidth();
+    window.addEventListener('resize', updateWrapperHeight);
+    window.addEventListener('resize', updateCaptionWidth);
+    var imageResizeObserver = null;
+    if (typeof ResizeObserver !== 'undefined' && imgRef.current) {
+      imageResizeObserver = new ResizeObserver(updateCaptionWidth);
+      imageResizeObserver.observe(imgRef.current);
+    }
     return function () {
-      return window.removeEventListener('resize', setWrapperHeight);
+      window.removeEventListener('resize', updateWrapperHeight);
+      window.removeEventListener('resize', updateCaptionWidth);
+      if (imageResizeObserver && imgRef.current) imageResizeObserver.unobserve(imgRef.current);
     };
-  }, []);
+  }, [updateWrapperHeight, updateCaptionWidth]);
+  var clonedChildren = React__default.Children.map(children, function (child) {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) return child;
+    var childElement = child;
+    var originalRef = child.ref;
+    var newProps = {
+      alt: altText,
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          var _imgRef$current;
+          e.preventDefault();
+          (_imgRef$current = imgRef.current) == null || _imgRef$current.click();
+        }
+        var originalOnKeyDownHandler = childElement.props.onKeyDown;
+        if (originalOnKeyDownHandler) originalOnKeyDownHandler(e);
+      },
+      ref: function ref(node) {
+        imgRef.current = node;
+        if (node) updateCaptionWidth();
+        if (!originalRef) return;
+        if (typeof originalRef === 'function') {
+          originalRef(node);
+        } else {
+          originalRef.current = node;
+        }
+      }
+    };
+    return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
+  });
   return /*#__PURE__*/React__default.createElement(Wrapper$8, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: aspectRatio
-  }, React__default.Children.map(children, function (child) {
-    return /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.cloneElement(child, {
-      alt: child.props.alt || 'Visual representation'
-    }) : child;
-  })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, {
+  }, clonedChildren), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, {
     tag: "figcaption"
   }, caption));
 };