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

package/dist/chord.cjs.development.js

@@ -4077,7 +4077,7 @@ 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  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  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 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 +4087,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"];
@@ -4117,6 +4121,8 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       canScrollToRight = _useState4[0],
       setCanScrollToRight = _useState4[1];
 
+  var hasTwoArrows = canScrollToRight && canScrollToLeft;
+
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
   };
@@ -4247,6 +4253,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 +4273,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",