carbon-react 117.3.0 → 117.4.0

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -217,6 +217,9 @@ const tabTitleStyles = css`
   text-decoration: none;
   outline-offset: 0px;
   margin: 0;
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
 
   a:visited {
     color: inherit;

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.d.ts

@@ -4,10 +4,9 @@ export interface TabHeaderProps {
     position?: "top" | "left";
     extendedLine?: boolean;
     noRightBorder?: boolean;
-    alternateStyling?: boolean;
     isInSidebar?: boolean;
     children: React.ReactNode;
     align?: "left" | "right";
 }
-declare const TabsHeader: ({ align, children, position, role, extendedLine, alternateStyling, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
+declare const TabsHeader: ({ align, children, position, role, extendedLine, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
 export default TabsHeader;

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -1,6 +1,20 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { StyledTabsHeaderWrapper, StyledTabsHeaderList } from "./tabs-header.style";
+import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsBottomBorder, StyledTabsWrapper, StyledTabsBottomBorderWrapper } from "./tabs-header.style";
+import useThrottle from "../../../../hooks/__internal__/useThrottle";
+/*  In the original prototype the tabs have shadows that fade out as you scroll horizontally.
+ *  This value is the closest replication to the way that the shadow disappears.
+ *  It is ultimately tied to the position of the scroll that will then fade the shadow in and out. */
+
+const fullOpacityThreshold = 128;
+
+const getOpacityRatio = value => value / fullOpacityThreshold;
+
+const getScrollRight = ({
+  scrollWidth,
+  clientWidth,
+  scrollLeft
+}) => scrollWidth - clientWidth - scrollLeft;
 
 const TabsHeader = ({
   align = "left",
@@ -8,10 +22,31 @@ const TabsHeader = ({
   position = "top",
   role,
   extendedLine,
-  alternateStyling,
   noRightBorder = false,
   isInSidebar = false
 }) => {
+  const [leftScrollOpacity, setLeftScrollOpacity] = useState(0);
+  const [rightScrollOpacity, setRightScrollOpacity] = useState(1);
+  const ref = useRef(null);
+  let isScrollable = false;
+  const {
+    current
+  } = ref;
+
+  if (position === "top" && current) {
+    isScrollable = current.scrollWidth > current.clientWidth;
+  }
+
+  const handleScroll = e => {
+    const {
+      scrollLeft
+    } = e.target;
+    const scrollRight = getScrollRight(e.target);
+    setLeftScrollOpacity(Math.min(getOpacityRatio(scrollLeft), 1));
+    setRightScrollOpacity(Math.min(getOpacityRatio(scrollRight), 1));
+  };
+
+  const throttledHandleScroll = useThrottle(handleScroll, 50);
   return /*#__PURE__*/React.createElement(StyledTabsHeaderWrapper, {
     isInSidebar: isInSidebar,
     position: position
@@ -20,15 +55,18 @@ const TabsHeader = ({
     position: position,
     role: role,
     extendedLine: extendedLine,
-    alternateStyling: alternateStyling,
     noRightBorder: noRightBorder,
-    isInSidebar: isInSidebar
-  }, children));
+    isInSidebar: isInSidebar,
+    onScroll: throttledHandleScroll,
+    leftScrollOpacity: leftScrollOpacity,
+    rightScrollOpacity: rightScrollOpacity,
+    isScrollable: isScrollable,
+    ref: ref
+  }, position === "top" ? /*#__PURE__*/React.createElement(StyledTabsWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorderWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorder, null)), children) : children));
 };
 
 TabsHeader.propTypes = {
   "align": PropTypes.oneOf(["left", "right"]),
-  "alternateStyling": PropTypes.bool,
   "children": PropTypes.node,
   "extendedLine": PropTypes.bool,
   "isInSidebar": PropTypes.bool,

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -1,6 +1,13 @@
 import { TabHeaderProps } from "./tabs-header.component";
 declare type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
 declare const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderWrapperProps, never>;
-export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "alternateStyling" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
+export interface StyledTabsHeaderListProps extends Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position"> {
+    leftScrollOpacity?: number;
+    rightScrollOpacity?: number;
+    isScrollable?: boolean;
+}
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList };
+declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, };

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -1,17 +1,6 @@
 import styled, { css } from "styled-components";
-
-const computeLineWidth = ({
-  alternateStyling,
-  isInSidebar,
-  position
-}) => {
-  if (isInSidebar && position === "left") {
-    return "0px";
-  }
-
-  return alternateStyling ? "-1px" : "-2px";
-};
-
+import BaseTheme from "../../../../style/themes/base";
+const outlineWidth = "3px";
 const StyledTabsHeaderWrapper = styled.div`
   ${({
   position,
@@ -32,9 +21,21 @@ const StyledTabsHeaderWrapper = styled.div`
       `}
     `}
 `;
+const commonShadowStyles = css`
+  pointer-events: none;
+  content: "";
+  background-repeat: no-repeat;
+  background-size: 16px 48px;
+  background-attachment: scroll;
+  z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
+  position: sticky;
+  min-width: 16px;
+  transition: opacity 0.1s ease-in-out;
+`;
 const StyledTabsHeaderList = styled.div`
   display: flex;
-  box-shadow: inset 0px ${computeLineWidth} 0px 0px var(--colorsActionMinor100);
   ${({
   extendedLine = true
 }) => !extendedLine && css`
@@ -42,8 +43,57 @@ const StyledTabsHeaderList = styled.div`
     `}
   cursor: default;
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: -${outlineWidth};
+  padding: ${outlineWidth};
+  overflow-x: auto;
+  position: relative;
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
+
+  ${({
+  isScrollable,
+  leftScrollOpacity,
+  rightScrollOpacity
+}) => isScrollable && css`
+      &:before {
+        ${commonShadowStyles}
+        background: radial-gradient(
+          farthest-side at 0 50%,
+          rgba(0, 0, 0, 0.2),
+          rgba(0, 0, 0, 0)
+        );
+        background-position: left calc(50% - 4px);
+        left: -${outlineWidth};
+        margin-right: -16px;
+        opacity: ${leftScrollOpacity};
+      }
+
+      &:after {
+        ${commonShadowStyles}
+        background: radial-gradient(
+          farthest-side at 100% 50%,
+          rgba(0, 0, 0, 0.2),
+          rgba(0, 0, 0, 0)
+        );
+        background-position: right calc(50% - 4px);
+        right: -${outlineWidth};
+        margin-left: -16px;
+        opacity: ${rightScrollOpacity};
+      }
+    `}
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background: var(--colorsUtilityMajor025);
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--colorsUtilityMajor300);
+    cursor: pointer;
+  }
 
   ${({
   align = "left"
@@ -69,4 +119,27 @@ const StyledTabsHeaderList = styled.div`
       `}
     `}
 `;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList };
+StyledTabsHeaderList.defaultProps = {
+  theme: BaseTheme
+};
+const StyledTabsWrapper = styled.div`
+  position: relative;
+  min-width: max-content;
+  width: 100%;
+  height: 100%;
+`;
+const StyledTabsBottomBorderWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  height: auto;
+  bottom: 0;
+`;
+const StyledTabsBottomBorder = styled.div`
+  position: sticky;
+  bottom: 2px;
+  left: ${outlineWidth};
+  right: ${outlineWidth};
+  height: 2px;
+  background-color: var(--colorsActionMinor100);
+`;
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder };

package/esm/components/tabs/tabs.component.js

@@ -45,7 +45,6 @@ const Tabs = ({
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
   const previousSelectedTabId = useRef(selectedTabId);
   const [selectedTabIdState, setSelectedTabIdState] = useState(selectedTabId || filteredChildren[0].props.tabId);
-  const [tabStopId, setTabStopId] = useState();
   const {
     isInSidebar
   } = useContext(DrawerSidebarContext);
@@ -70,7 +69,6 @@ const Tabs = ({
   /** Returns true/false for if the given tab id is selected. */
 
   const isTabSelected = useCallback(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
-  const hasTabStop = useCallback(tabId => tabId === tabStopId, [tabStopId]);
   /** Updates the currently visible tab */
 
   const updateVisibleTab = useCallback(tabid => {
@@ -78,14 +76,10 @@ const Tabs = ({
       setSelectedTabIdState(tabid);
     }
 
-    if (!hasTabStop(tabid)) {
-      setTabStopId(tabid);
-    }
-
     if (onTabChange) {
       onTabChange(tabid);
     }
-  }, [onTabChange, isTabSelected, hasTabStop]);
+  }, [onTabChange, isTabSelected]);
   const blurPreviousSelectedTab = useCallback(() => {
     const {
       current
@@ -145,9 +139,7 @@ const Tabs = ({
       newIndex = 0;
     }
 
-    const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
-    updateVisibleTab(nextTabId);
     focusTab(nextRef);
   };
   /** Handles the keyboard navigation of tabs */
@@ -223,7 +215,7 @@ const Tabs = ({
         onClick: handleTabClick,
         onKeyDown: handleKeyDown(index),
         ref: tabRefs[index],
-        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? 0 : -1,
+        tabIndex: isTabSelected(tabId) ? 0 : -1,
         title: title,
         href: href,
         isTabSelected: isTabSelected(tabId),
@@ -250,7 +242,6 @@ const Tabs = ({
       position: isInSidebar ? "left" : position,
       role: "tablist",
       extendedLine: extendedLine,
-      alternateStyling: variant === "alternate" || isInSidebar,
       noRightBorder: ["no right side", "no sides"].includes(borders),
       isInSidebar: isInSidebar
     }, tabTitles);

package/esm/hooks/__internal__/useThrottle/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useThrottle";

package/esm/hooks/__internal__/useThrottle/index.js

@@ -0,0 +1 @@
+export { default } from "./useThrottle";

package/esm/hooks/__internal__/useThrottle/useThrottle.d.ts

@@ -0,0 +1,4 @@
+import { DebouncedFunc } from "lodash";
+declare type Callback = (...args: any[]) => void;
+declare const useThrottle: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
+export default useThrottle;

package/esm/hooks/__internal__/useThrottle/useThrottle.js

@@ -0,0 +1,18 @@
+import { useMemo, useEffect, useRef } from "react";
+import throttle from "lodash/throttle";
+
+const useThrottle = (callback, delay) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  const throttledCallback = useMemo(() => throttle(callbackRef.current, delay), [delay]);
+  useEffect(() => {
+    return () => {
+      throttledCallback.cancel();
+    };
+  });
+  return throttledCallback;
+};
+
+export default useThrottle;

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -234,6 +234,9 @@ const tabTitleStyles = (0, _styledComponents.css)`
   text-decoration: none;
   outline-offset: 0px;
   margin: 0;
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
 
   a:visited {
     color: inherit;

package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.d.ts

@@ -4,10 +4,9 @@ export interface TabHeaderProps {
     position?: "top" | "left";
     extendedLine?: boolean;
     noRightBorder?: boolean;
-    alternateStyling?: boolean;
     isInSidebar?: boolean;
     children: React.ReactNode;
     align?: "left" | "right";
 }
-declare const TabsHeader: ({ align, children, position, role, extendedLine, alternateStyling, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
+declare const TabsHeader: ({ align, children, position, role, extendedLine, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
 export default TabsHeader;

package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -5,24 +5,64 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _tabsHeader = require("./tabs-header.style");
 
+var _useThrottle = _interopRequireDefault(require("../../../../hooks/__internal__/useThrottle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*  In the original prototype the tabs have shadows that fade out as you scroll horizontally.
+ *  This value is the closest replication to the way that the shadow disappears.
+ *  It is ultimately tied to the position of the scroll that will then fade the shadow in and out. */
+const fullOpacityThreshold = 128;
+
+const getOpacityRatio = value => value / fullOpacityThreshold;
+
+const getScrollRight = ({
+  scrollWidth,
+  clientWidth,
+  scrollLeft
+}) => scrollWidth - clientWidth - scrollLeft;
+
 const TabsHeader = ({
   align = "left",
   children,
   position = "top",
   role,
   extendedLine,
-  alternateStyling,
   noRightBorder = false,
   isInSidebar = false
 }) => {
+  const [leftScrollOpacity, setLeftScrollOpacity] = (0, _react.useState)(0);
+  const [rightScrollOpacity, setRightScrollOpacity] = (0, _react.useState)(1);
+  const ref = (0, _react.useRef)(null);
+  let isScrollable = false;
+  const {
+    current
+  } = ref;
+
+  if (position === "top" && current) {
+    isScrollable = current.scrollWidth > current.clientWidth;
+  }
+
+  const handleScroll = e => {
+    const {
+      scrollLeft
+    } = e.target;
+    const scrollRight = getScrollRight(e.target);
+    setLeftScrollOpacity(Math.min(getOpacityRatio(scrollLeft), 1));
+    setRightScrollOpacity(Math.min(getOpacityRatio(scrollRight), 1));
+  };
+
+  const throttledHandleScroll = (0, _useThrottle.default)(handleScroll, 50);
   return /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsHeaderWrapper, {
     isInSidebar: isInSidebar,
     position: position
@@ -31,15 +71,18 @@ const TabsHeader = ({
     position: position,
     role: role,
     extendedLine: extendedLine,
-    alternateStyling: alternateStyling,
     noRightBorder: noRightBorder,
-    isInSidebar: isInSidebar
-  }, children));
+    isInSidebar: isInSidebar,
+    onScroll: throttledHandleScroll,
+    leftScrollOpacity: leftScrollOpacity,
+    rightScrollOpacity: rightScrollOpacity,
+    isScrollable: isScrollable,
+    ref: ref
+  }, position === "top" ? /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorderWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorder, null)), children) : children));
 };
 
 TabsHeader.propTypes = {
   "align": _propTypes.default.oneOf(["left", "right"]),
-  "alternateStyling": _propTypes.default.bool,
   "children": _propTypes.default.node,
   "extendedLine": _propTypes.default.bool,
   "isInSidebar": _propTypes.default.bool,

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -1,6 +1,13 @@
 import { TabHeaderProps } from "./tabs-header.component";
 declare type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
 declare const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderWrapperProps, never>;
-export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "alternateStyling" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
+export interface StyledTabsHeaderListProps extends Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position"> {
+    leftScrollOpacity?: number;
+    rightScrollOpacity?: number;
+    isScrollable?: boolean;
+}
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList };
+declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, };

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -3,26 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTabsHeaderList = exports.StyledTabsHeaderWrapper = void 0;
+exports.StyledTabsBottomBorder = exports.StyledTabsBottomBorderWrapper = exports.StyledTabsWrapper = exports.StyledTabsHeaderList = exports.StyledTabsHeaderWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const computeLineWidth = ({
-  alternateStyling,
-  isInSidebar,
-  position
-}) => {
-  if (isInSidebar && position === "left") {
-    return "0px";
-  }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-  return alternateStyling ? "-1px" : "-2px";
-};
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const outlineWidth = "3px";
 const StyledTabsHeaderWrapper = _styledComponents.default.div`
   ${({
   position,
@@ -44,9 +37,21 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
     `}
 `;
 exports.StyledTabsHeaderWrapper = StyledTabsHeaderWrapper;
+const commonShadowStyles = (0, _styledComponents.css)`
+  pointer-events: none;
+  content: "";
+  background-repeat: no-repeat;
+  background-size: 16px 48px;
+  background-attachment: scroll;
+  z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
+  position: sticky;
+  min-width: 16px;
+  transition: opacity 0.1s ease-in-out;
+`;
 const StyledTabsHeaderList = _styledComponents.default.div`
   display: flex;
-  box-shadow: inset 0px ${computeLineWidth} 0px 0px var(--colorsActionMinor100);
   ${({
   extendedLine = true
 }) => !extendedLine && (0, _styledComponents.css)`
@@ -54,8 +59,57 @@ const StyledTabsHeaderList = _styledComponents.default.div`
     `}
   cursor: default;
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: -${outlineWidth};
+  padding: ${outlineWidth};
+  overflow-x: auto;
+  position: relative;
+  ${({
+  position
+}) => position === "top" && "white-space: nowrap"};
+
+  ${({
+  isScrollable,
+  leftScrollOpacity,
+  rightScrollOpacity
+}) => isScrollable && (0, _styledComponents.css)`
+      &:before {
+        ${commonShadowStyles}
+        background: radial-gradient(
+          farthest-side at 0 50%,
+          rgba(0, 0, 0, 0.2),
+          rgba(0, 0, 0, 0)
+        );
+        background-position: left calc(50% - 4px);
+        left: -${outlineWidth};
+        margin-right: -16px;
+        opacity: ${leftScrollOpacity};
+      }
+
+      &:after {
+        ${commonShadowStyles}
+        background: radial-gradient(
+          farthest-side at 100% 50%,
+          rgba(0, 0, 0, 0.2),
+          rgba(0, 0, 0, 0)
+        );
+        background-position: right calc(50% - 4px);
+        right: -${outlineWidth};
+        margin-left: -16px;
+        opacity: ${rightScrollOpacity};
+      }
+    `}
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background: var(--colorsUtilityMajor025);
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--colorsUtilityMajor300);
+    cursor: pointer;
+  }
 
   ${({
   align = "left"
@@ -81,4 +135,30 @@ const StyledTabsHeaderList = _styledComponents.default.div`
       `}
     `}
 `;
-exports.StyledTabsHeaderList = StyledTabsHeaderList;
+exports.StyledTabsHeaderList = StyledTabsHeaderList;
+StyledTabsHeaderList.defaultProps = {
+  theme: _base.default
+};
+const StyledTabsWrapper = _styledComponents.default.div`
+  position: relative;
+  min-width: max-content;
+  width: 100%;
+  height: 100%;
+`;
+exports.StyledTabsWrapper = StyledTabsWrapper;
+const StyledTabsBottomBorderWrapper = _styledComponents.default.div`
+  position: absolute;
+  width: 100%;
+  height: auto;
+  bottom: 0;
+`;
+exports.StyledTabsBottomBorderWrapper = StyledTabsBottomBorderWrapper;
+const StyledTabsBottomBorder = _styledComponents.default.div`
+  position: sticky;
+  bottom: 2px;
+  left: ${outlineWidth};
+  right: ${outlineWidth};
+  height: 2px;
+  background-color: var(--colorsActionMinor100);
+`;
+exports.StyledTabsBottomBorder = StyledTabsBottomBorder;

package/lib/components/tabs/tabs.component.js

@@ -72,7 +72,6 @@ const Tabs = ({
   }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
   const previousSelectedTabId = (0, _react.useRef)(selectedTabId);
   const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)(selectedTabId || filteredChildren[0].props.tabId);
-  const [tabStopId, setTabStopId] = (0, _react.useState)();
   const {
     isInSidebar
   } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
@@ -97,7 +96,6 @@ const Tabs = ({
   /** Returns true/false for if the given tab id is selected. */
 
   const isTabSelected = (0, _react.useCallback)(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
-  const hasTabStop = (0, _react.useCallback)(tabId => tabId === tabStopId, [tabStopId]);
   /** Updates the currently visible tab */
 
   const updateVisibleTab = (0, _react.useCallback)(tabid => {
@@ -105,14 +103,10 @@ const Tabs = ({
       setSelectedTabIdState(tabid);
     }
 
-    if (!hasTabStop(tabid)) {
-      setTabStopId(tabid);
-    }
-
     if (onTabChange) {
       onTabChange(tabid);
     }
-  }, [onTabChange, isTabSelected, hasTabStop]);
+  }, [onTabChange, isTabSelected]);
   const blurPreviousSelectedTab = (0, _react.useCallback)(() => {
     const {
       current
@@ -172,9 +166,7 @@ const Tabs = ({
       newIndex = 0;
     }
 
-    const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
-    updateVisibleTab(nextTabId);
     focusTab(nextRef);
   };
   /** Handles the keyboard navigation of tabs */
@@ -254,7 +246,7 @@ const Tabs = ({
         onClick: handleTabClick,
         onKeyDown: handleKeyDown(index),
         ref: tabRefs[index],
-        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? 0 : -1,
+        tabIndex: isTabSelected(tabId) ? 0 : -1,
         title: title,
         href: href,
         isTabSelected: isTabSelected(tabId),
@@ -281,7 +273,6 @@ const Tabs = ({
       position: isInSidebar ? "left" : position,
       role: "tablist",
       extendedLine: extendedLine,
-      alternateStyling: variant === "alternate" || isInSidebar,
       noRightBorder: ["no right side", "no sides"].includes(borders),
       isInSidebar: isInSidebar
     }, tabTitles);

package/lib/hooks/__internal__/useThrottle/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useThrottle";

package/lib/hooks/__internal__/useThrottle/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useThrottle.default;
+  }
+});
+
+var _useThrottle = _interopRequireDefault(require("./useThrottle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useThrottle/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useThrottle/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useThrottle/useThrottle.d.ts

@@ -0,0 +1,4 @@
+import { DebouncedFunc } from "lodash";
+declare type Callback = (...args: any[]) => void;
+declare const useThrottle: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
+export default useThrottle;

package/lib/hooks/__internal__/useThrottle/useThrottle.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useThrottle = (callback, delay) => {
+  const callbackRef = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(() => {
+    callbackRef.current = callback;
+  });
+  const throttledCallback = (0, _react.useMemo)(() => (0, _throttle.default)(callbackRef.current, delay), [delay]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      throttledCallback.cancel();
+    };
+  });
+  return throttledCallback;
+};
+
+var _default = useThrottle;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "117.3.0",
+  "version": "117.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",