@royaloperahouse/harmonic 0.12.0-e → 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",
@@ -11403,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;
@@ -11422,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));
 };