@royaloperahouse/chord 1.12.4-b-chord-development → 1.12.4-d-chord-development

package/dist/chord.cjs.development.js

@@ -4075,9 +4075,14 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
+var IOSPlatforms = ['iPhone', 'iPad'];
+var isIOSDevice = function isIOSDevice() {
+  return IOSPlatforms.includes(navigator.platform);
+};
+
 var _templateObject$x, _templateObject2$i, _templateObject3$b, _templateObject4$6, _templateObject5$4, _templateObject6$4;
 var LIST_ITEM_GAP = 32;
-var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: sticky;\n  position: -webkit-sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
+var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
 var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: ", "px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    background: linear-gradient(\n      135deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(255, 255, 255, 0.48) 85%,\n      rgba(235, 235, 235, 0.4) 99%,\n      rgba(255, 255, 255, 0.39) 100%\n    );\n  }\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref) {
@@ -4102,8 +4107,10 @@ var _excluded$7 = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
       onTabClick = _ref.onTabClick,
-      activeTab = _ref.activeTab;
+      activeTab = _ref.activeTab,
+      topOffsetForIOS = _ref.topOffsetForIOS;
   var tabListRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
 
   var _useState = React.useState(activeTab || ''),
       selectedItem = _useState[0],
@@ -4121,6 +4128,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       canScrollToRight = _useState4[0],
       setCanScrollToRight = _useState4[1];
 
+  var timer = null;
   var hasTwoArrows = canScrollToRight && canScrollToLeft;
 
   var isSelectedItem = function isSelectedItem(id) {
@@ -4149,6 +4157,46 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     return width;
   };
 
+  var changeWrapperVisibilityOnOIS = function changeWrapperVisibilityOnOIS(showWrapper, topOffset) {
+    if (showWrapper === void 0) {
+      showWrapper = false;
+    }
+
+    var wrapperEl = wrapperRef.current;
+    wrapperEl.style.position = 'absolute';
+    wrapperEl.style.visibility = showWrapper && topOffset !== undefined ? 'visible' : 'hidden';
+    if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
+  };
+
+  var handleScrollOnIOS = function handleScrollOnIOS() {
+    var topOffset = topOffsetForIOS;
+
+    if (wrapperRef.current && window.pageYOffset > topOffset) {
+      changeWrapperVisibilityOnOIS();
+    } else if (wrapperRef.current && window.pageYOffset < topOffset) {
+      changeWrapperVisibilityOnOIS(true, 0);
+    }
+
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(function () {
+      if (window.pageYOffset > topOffset && wrapperRef.current) {
+        changeWrapperVisibilityOnOIS(true, window.pageYOffset - topOffset);
+      }
+    }, 300);
+  }; // We use this behavior only on iOS devices because there is a known issue that
+  // sticky elements lose their stickiness when a keyboard appears on the screen
+
+
+  React.useEffect(function () {
+    if (topOffsetForIOS && isIOSDevice()) {
+      document.addEventListener('scroll', handleScrollOnIOS);
+      return function () {
+        document.removeEventListener('scroll', handleScrollOnIOS);
+      };
+    }
+
+    return;
+  }, []);
   React.useEffect(function () {
     setTimeout(function () {
       if (tabListRef.current) tabListRef.current.scrollLeft += getScrollWidth();
@@ -4245,7 +4293,10 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     setCanScrollToRight(scrollLeft + clientWidth + LIST_ITEM_GAP < scrollWidth);
   };
 
-  return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+  return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
+    ref: wrapperRef,
+    id: "AnchorTabbarWrapper"
+  }, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: tabsColumnStart,
     columnSpanDesktop: tabsColumnSpan,
     columnStartDevice: 2,