@royaloperahouse/chord 1.12.4-e-chord-development → 1.12.4-f-chord-development

package/dist/chord.cjs.development.js

@@ -4077,22 +4077,25 @@ var Footer = function Footer(_ref) {
 
 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  width: 100%;\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  border-bottom: ", ";\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+  var bottomBorder = _ref.bottomBorder;
+  return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
+}, 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) {
-  var tabsOverflow = _ref.tabsOverflow;
-  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
-}, LIST_ITEM_GAP, function (_ref2) {
+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 (_ref2) {
   var tabsOverflow = _ref2.tabsOverflow;
+  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
+}, LIST_ITEM_GAP, function (_ref3) {
+  var tabsOverflow = _ref3.tabsOverflow;
   return tabsOverflow ? 'start' : 'center';
-}, devices.mobileAndTablet, devices.mobile, function (_ref3) {
-  var tabsOverflow = _ref3.tabsOverflow,
-      hasTwoArrows = _ref3.hasTwoArrows;
+}, devices.mobileAndTablet, devices.mobile, function (_ref4) {
+  var tabsOverflow = _ref4.tabsOverflow,
+      hasTwoArrows = _ref4.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;
+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 (_ref5) {
+  var fullWidth = _ref5.fullWidth;
   return fullWidth ? '74px' : '46px';
 });
 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"])));
@@ -4103,7 +4106,9 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
       onTabClick = _ref.onTabClick,
       activeTab = _ref.activeTab,
-      absolutePositionParams = _ref.absolutePositionParams;
+      absolutePositionParams = _ref.absolutePositionParams,
+      _ref$bottomBorder = _ref.bottomBorder,
+      bottomBorder = _ref$bottomBorder === void 0 ? false : _ref$bottomBorder;
   var tabListRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
 
@@ -4152,7 +4157,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     return width;
   };
 
-  var changeWrapperVisibilityOnOIS = function changeWrapperVisibilityOnOIS(showWrapper, topOffset) {
+  var changeWrapperVisibility = function changeWrapperVisibility(showWrapper, topOffset) {
     if (showWrapper === void 0) {
       showWrapper = false;
     }
@@ -4163,22 +4168,22 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     if (showWrapper && topOffset !== undefined) wrapperEl.style.top = topOffset + "px";
   };
 
-  var handleScrollOnIOS = function handleScrollOnIOS() {
+  var handleScrollForAbsolutePosition = function handleScrollForAbsolutePosition() {
     var _absolutePositionPara = absolutePositionParams.navigationHeight,
         navigationHeight = _absolutePositionPara === void 0 ? 0 : _absolutePositionPara,
         _absolutePositionPara2 = absolutePositionParams.topOffset,
         topOffset = _absolutePositionPara2 === void 0 ? 0 : _absolutePositionPara2;
 
     if (wrapperRef.current && window.pageYOffset > topOffset + navigationHeight) {
-      changeWrapperVisibilityOnOIS();
+      changeWrapperVisibility();
     } else if (wrapperRef.current && window.pageYOffset < topOffset + navigationHeight) {
-      changeWrapperVisibilityOnOIS(true, topOffset);
+      changeWrapperVisibility(true, topOffset);
     }
 
     if (timer !== null) clearTimeout(timer);
     timer = setTimeout(function () {
       if (window.pageYOffset > topOffset + navigationHeight && wrapperRef.current) {
-        changeWrapperVisibilityOnOIS(true, window.pageYOffset - topOffset);
+        changeWrapperVisibility(true, window.pageYOffset - navigationHeight);
       }
     }, 300);
   }; // We use this behavior only on iOS devices because there is a known issue that
@@ -4187,9 +4192,10 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
 
   React.useEffect(function () {
     if (absolutePositionParams) {
-      document.addEventListener('scroll', handleScrollOnIOS);
+      changeWrapperVisibility(true, absolutePositionParams.topOffset);
+      document.addEventListener('scroll', handleScrollForAbsolutePosition);
       return function () {
-        document.removeEventListener('scroll', handleScrollOnIOS);
+        document.removeEventListener('scroll', handleScrollForAbsolutePosition);
       };
     }
 
@@ -4292,6 +4298,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, {
+    bottomBorder: bottomBorder,
     ref: wrapperRef,
     id: "AnchorTabbarWrapper"
   }, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {