@royaloperahouse/chord 1.12.4-a-chord-development → 1.12.4-c-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  position: 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) {
@@ -4087,10 +4092,14 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$6 || (_templateO
   var tabsOverflow = _ref2.tabsOverflow;
   return tabsOverflow ? 'start' : 'center';
 }, devices.mobileAndTablet, devices.mobile, function (_ref3) {
-  var tabsOverflow = _ref3.tabsOverflow;
-  return tabsOverflow ? 'calc(100% - 50px)' : '100%';
+  var tabsOverflow = _ref3.tabsOverflow,
+      hasTwoArrows = _ref3.hasTwoArrows;
+  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
+});
+var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])), function (_ref4) {
+  var fullWidth = _ref4.fullWidth;
+  return fullWidth ? '74px' : '46px';
 });
-var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])));
 var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 
 var _excluded$7 = ["id", "text"];
@@ -4098,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],
@@ -4117,6 +4128,9 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       canScrollToRight = _useState4[0],
       setCanScrollToRight = _useState4[1];
 
+  var timer = null;
+  var hasTwoArrows = canScrollToRight && canScrollToLeft;
+
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
   };
@@ -4143,6 +4157,47 @@ 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 ? 'visible' : 'hidden';
+    if (showWrapper && topOffset) wrapperEl.style.top = topOffset + "px";
+  };
+
+  var handleScrollOnIOS = function handleScrollOnIOS() {
+    var topOffset = topOffsetForIOS;
+    console.log(window.pageYOffset);
+
+    if (wrapperRef.current && window.pageYOffset > topOffset) {
+      changeWrapperVisibilityOnOIS();
+    } else if (wrapperRef.current && window.pageYOffset < topOffset) {
+      changeWrapperVisibilityOnOIS(true, topOffset);
+    }
+
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(function () {
+      if (window.pageYOffset > topOffset && wrapperRef.current) {
+        changeWrapperVisibilityOnOIS(true, window.pageYOffset);
+      }
+    }, 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();
@@ -4239,7 +4294,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,
@@ -4247,6 +4305,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, /*#__PURE__*/React__default.createElement(TabsWrapper, {
     "data-testid": "anchor-tabs"
   }, /*#__PURE__*/React__default.createElement(TabsList, {
+    hasTwoArrows: hasTwoArrows,
     ref: tabListRef,
     tabsOverflow: tabsOverflow,
     onScroll: onTabsScroll
@@ -4266,7 +4325,9 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       },
       tabIndex: 0
     }, rest), text));
-  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, canScrollToLeft ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
+  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, {
+    fullWidth: hasTwoArrows
+  }, canScrollToLeft ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
     onClick: scrollToLeft
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow",