@royaloperahouse/harmonic 0.4.1-i → 0.4.1-j

package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import React from 'react';
 import { IControlledDropdownProps } from '../../../types/types';
-declare const ControlledDropdown: FunctionComponent<IControlledDropdownProps>;
+declare const ControlledDropdown: React.ForwardRefExoticComponent<IControlledDropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default ControlledDropdown;

package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts

@@ -1,7 +1,7 @@
 import { IControlledDropdownHeaderProps } from '../../../types/types';
 export declare const ControlledDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps, never>;
-export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps & {
+export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"button", any, IControlledDropdownHeaderProps, never>;
+export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"button", any, IControlledDropdownHeaderProps & {
     as: string;
 }, "as">;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/harmonic.cjs.development.js

@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
 
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -2947,12 +2947,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templ
   return '';
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
-  as: 'a'
+  as: 'button'
 })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  span > svg path {\n    fill: var(--color-primary-black);\n  }\n"])));
 
 /* eslint-disable no-useless-return */
-var ControlledDropdown = function ControlledDropdown(_ref) {
+var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var text = _ref.text,
     options = _ref.options,
     active = _ref.active,
@@ -2960,32 +2960,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     onOptionClick = _ref.onOptionClick,
     _onMouseEnter = _ref.onMouseEnter,
     _onMouseLeave = _ref.onMouseLeave,
+    _onFocusLeave = _ref.onFocusLeave,
     onReset = _ref.onReset,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
     className = _ref.className;
-  var ref = React.useRef();
-  var resetHandler = React.useCallback(function () {
+  ControlledDropdown.displayName = 'ControlledDropdown';
+  var internalRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return internalRef.current;
+  });
+  var resetHandler = function resetHandler() {
     return onReset == null ? void 0 : onReset();
-  }, []);
-  React.useEffect(function () {
-    if (window.innerWidth > breakpoints.sm) {
-      var mouseClickHandler = function mouseClickHandler(e) {
-        var _ref$current;
-        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
-          return;
-        } else if (active) {
-          resetHandler();
-        }
-      };
-      document.addEventListener('click', mouseClickHandler);
-      return function () {
-        document.removeEventListener('click', mouseClickHandler);
-      };
-    }
-    // eslint-disable-next-line consistent-return
-    return;
-  }, [ref, resetHandler, active]);
+  };
+  var isDropdown = React.useMemo(function () {
+    return !!(options != null && options.length);
+  }, [options]);
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
     if (e.key === 'Enter') {
       onOptionClick == null || onOptionClick(link);
@@ -3005,13 +2995,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       _onBlur == null || _onBlur();
     }
   };
-  var isDropdown = !!(options != null && options.length);
   var wrapperEvents = {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter == null ? void 0 : _onMouseEnter();
     },
     onMouseLeave: function onMouseLeave() {
       return _onMouseLeave == null ? void 0 : _onMouseLeave();
+    },
+    onFocusLeave: function onFocusLeave() {
+      return _onFocusLeave == null ? void 0 : _onFocusLeave();
     }
   };
   var headerEvents = {
@@ -3027,21 +3019,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     },
     onKeyDown: handleHeaderKeyDown
   };
+  React.useEffect(function () {
+    var mouseEvent = function mouseEvent(e) {
+      var _internalRef$current;
+      if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
+      if (active) resetHandler();
+    };
+    if (window.innerWidth > breakpoints.sm) {
+      document.addEventListener('click', mouseEvent);
+    }
+    return function () {
+      document.removeEventListener('click', mouseEvent);
+    };
+  }, [resetHandler, active]);
+  React.useEffect(function () {
+    var handleFocusOut = function handleFocusOut(e) {
+      if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
+        _onFocusLeave == null || _onFocusLeave();
+      }
+    };
+    var node = internalRef.current;
+    if (node) node.addEventListener('focusout', handleFocusOut);
+    return function () {
+      return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [_onFocusLeave]);
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: ref
+    ref: internalRef
   }, wrapperEvents, {
     className: className
   }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
     active: active
   }, headerEvents, {
-    tabIndex: 0,
-    "data-testid": "span-container"
+    "data-testid": "span-container",
+    role: "menuitem",
+    "aria-controls": "dropdown-menu",
+    "aria-haspopup": "menu",
+    "aria-expanded": active
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
   }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
-    withOptionsInMobile: true
+    withOptionsInMobile: true,
+    role: "menu",
+    id: "dropdown-menu"
   }, options.map(function (optionItem, index) {
     return /*#__PURE__*/React__default.createElement(OptionItem, {
       key: "key-" + index + "-" + optionItem.option,
@@ -3055,15 +3077,17 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       onBlur: function onBlur() {
         return handleOptionBlur(index);
       },
-      href: optionItem.optionLink
+      href: optionItem.optionLink,
+      role: "menuitem"
     }, optionItem.option);
   }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active
   }, headerEvents, {
     "data-testid": "link-container",
+    role: "menuitem",
     tabIndex: 0
   }), text)));
-};
+});
 
 var _templateObject$8;
 var Grid = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  grid-template-rows: max-content;\n  gap: var(--grid-column-gap);\n  margin: 0;\n"])));
@@ -5582,6 +5606,7 @@ var Tabs = function Tabs(_ref) {
   var _useState3 = React.useState(-1),
     hoverOverDropdown = _useState3[0],
     setHoverOverDropdown = _useState3[1];
+  var dropdownRefs = React.useRef([]);
   var onClickHandler = function onClickHandler(value) {
     setOpenMenu(value);
     if (onShowMenu) {
@@ -5621,23 +5646,25 @@ var Tabs = function Tabs(_ref) {
       setHoverOverDropdown(-1);
     }
   };
-  var _onFocus = function onFocus(i) {
-    return setActiveDropdown(i);
+  var onDropdownFocusLeave = function onDropdownFocusLeave() {
+    onResetActive();
   };
-  var _onBlur = function onBlur(i) {
-    var _items$length;
-    if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
+  var handleBlur = function handleBlur(index) {
+    var currentDropdown = dropdownRefs.current[index];
+    var active = document.activeElement;
+    if (currentDropdown && (!active || !currentDropdown.contains(active))) {
       onResetActive();
     }
   };
   return /*#__PURE__*/React__default.createElement(TabsContainer, {
+    role: "menubar",
     className: className
   }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
       key: "key-" + item.title,
-      text: item.title,
+      text: item.title || '',
       options: item.options,
       onClick: function onClick() {
         return onDropdownClick(index, item.titleLink);
@@ -5649,14 +5676,17 @@ var Tabs = function Tabs(_ref) {
       onMouseLeave: function onMouseLeave() {
         return onDropdownMouseLeave();
       },
-      onFocus: function onFocus() {
-        return _onFocus(index);
+      onFocusLeave: function onFocusLeave() {
+        return onDropdownFocusLeave();
       },
       onBlur: function onBlur() {
-        return _onBlur(index);
+        return handleBlur(index);
       },
       onReset: onResetActive,
-      active: isActiveDropdown(index)
+      active: isActiveDropdown(index),
+      ref: function ref(el) {
+        dropdownRefs.current[index] = el;
+      }
     });
   })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-close",
@@ -8919,6 +8949,7 @@ var PageHeading = function PageHeading(_ref) {
     "data-testid": "page-heading-text"
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     color: "white",
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }