carbon-react 144.11.0 → 144.12.0

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

@@ -62,7 +62,6 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleKeyDown = ev => {
-    ev.stopPropagation();
     if (href && Events.isEnterOrSpaceKey(ev)) {
       return window.open(href, "_blank");
     }

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

@@ -1,13 +1,10 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../../icon/icon.style";
 import StyledValidationIcon from "../../../../__internal__/validations/validation-icon.style";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledTitleContent = styled.span`
   outline: none;
-  display: inline-flex;
+  display: flex;
+  align-items: flex-start;
   line-height: 20px;
   margin: 0;
   position: relative;
@@ -110,7 +107,7 @@ const StyledTitleContent = styled.span`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-    `} 
+    `}
 
     ${(warning || info) && css`
       outline: 1px solid;
@@ -133,7 +130,7 @@ const StyledTitleContent = styled.span`
         border-right-color: transparent;
         padding-right: ${size === "large" ? "26px" : "18px"};
       `}
-      
+
       &:hover {
         outline: 1px solid;
         outline-offset: -1px;
@@ -174,7 +171,7 @@ const StyledTitleContent = styled.span`
         border-right-color: transparent;
         padding-right: ${size === "large" ? "26px" : "18px"};
       `}
-    
+
       &:hover {
         outline: 2px solid var(--colorsSemanticNegative500);
         outline-offset: -2px;
@@ -274,152 +271,198 @@ const tabTitleStyles = css`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
     ${position === "top" && css`
-      ${borders && !(noRightBorder || noLeftBorder) && css`
-        &:nth-of-type(n + 1):not(:first-of-type) {
-          margin-left: -1px;
-        }
-        &:first-child {
-          margin-left: 0;
-        }
+        ${borders && !(noRightBorder || noLeftBorder) && css`
+          &:nth-of-type(n + 1):not(:first-of-type) {
+            margin-left: -1px;
+          }
+          &:first-child {
+            margin-left: 0;
+          }
+        `}
       `}
-    `}
     ${position === "left" && css`
-      ${borders && css`
-        &:nth-of-type(n + 1):not(:first-of-type) {
-          margin-top: -1px;
-        }
-        &:first-child {
-          margin-top: 0;
-        }
+        ${borders && css`
+          &:nth-of-type(n + 1):not(:first-of-type) {
+            margin-top: -1px;
+          }
+          &:first-child {
+            margin-top: 0;
+          }
+        `}
       `}
-    `}
 
     ${!isTabSelected && css`
-      color: var(--colorsActionMinorYin090);
-      ${validationRedesignOptIn && css`
-        background: transparent;
-      `}
-
-      &:hover {
-        background: var(--colorsActionMinor100);
+        color: var(--colorsActionMinorYin090);
         ${validationRedesignOptIn && css`
-          background: var(--colorsUtilityMajor100);
+          background: transparent;
         `}
-        color: var(--colorsActionMinorYin090);
-        outline: none;
-      }
-      &:focus {
-        color: var(--colorsActionMinorYin090);
-        outline: none;
-      }
-    `}
 
-    ${isTabSelected && css`
-      color: var(--colorsActionMajorYin090);
-      background-color: var(--colorsActionMajorYang100);
-
-      ${(error || warning || info) && css`
-        padding-bottom: 0px;
+        &:hover {
+          background: var(--colorsActionMinor100);
+          ${validationRedesignOptIn && css`
+            background: var(--colorsUtilityMajor100);
+          `}
+          color: var(--colorsActionMinorYin090);
+          outline: none;
+        }
+        &:focus {
+          color: var(--colorsActionMinorYin090);
+          outline: none;
+        }
       `}
 
-      &:hover {
-        background-color: var(--colorsActionMajorYang100);
-        border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+    ${isTabSelected && css`
         color: var(--colorsActionMajorYin090);
-        cursor: default;
-      }
-    `}
+        background-color: var(--colorsActionMajorYang100);
 
-    &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
-      z-index: 3;
+        ${(error || warning || info) && css`
+          padding-bottom: 0px;
+        `}
 
-      ${isInSidebar && css`
-        outline-offset: -3px;
+        &:hover {
+          background-color: var(--colorsActionMajorYang100);
+          border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+          color: var(--colorsActionMajorYin090);
+          cursor: default;
+        }
       `}
-    }
 
-    ${position === "left" && css`
-      background-color: transparent;
-      border-bottom: 0px;
-
-      ${!isInSidebar && !error && css`
-        --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"}
-          border-right:
-          ${alternateStyling ? "1px" : "var(--border-right-value)"} solid
-          var(--colorsActionMinor100);
-      `}
+    ${({
+  theme
+}) => `
+      &:focus {
+        outline: 4px solid ${!theme.focusRedesignOptOut ? "black" : /* istanbul ignore next */"var(--colorsSemanticFocus500)"};
+        top: -2px;
+        z-index: 6;
 
-      ${!borders && css`
-        ${StyledTitleContent} {
-          border-bottom: none;
+        > span[data-role="tab-title-content"] {
+          outline:none;
         }
-      `}
 
-      display: flex;
-      height: auto;
-      margin-left: 0px;
+        ${position === "top" ? css`
+                border-top-left-radius: var(--borderRadius100);
+                border-top-right-radius: var(--borderRadius100);
+              ` : css`
+                border-top-left-radius: var(--borderRadius100);
+                border-bottom-left-radius: var(--borderRadius100);
+              `}
+
+        ${!theme.focusRedesignOptOut ? `::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left 0;
+          bottom: 0;
+          right: ${position === "top" ? "0" : "-1px"};
+          outline: 3px solid var(--colorsSemanticFocus500);
+          ${position === "top" ? css`
+                  border-top-left-radius: var(--borderRadius100);
+                  border-top-right-radius: var(--borderRadius100);
+                ` : css`
+                  border-top-left-radius: var(--borderRadius100);
+                  border-bottom-left-radius: var(--borderRadius100);
+                `}
+          outline-offset: -2px;
+         z-index: 5;
+        }
 
-      &:first-child {
-        margin-top: 0;
+        > [data-element="tab-selected-indicator"] {
+         z-index: 4;
+         ${position === "top" ? css`
+                 bottom: 2px;
+                 left: 2px;
+                 right: 1px;
+               ` : css`
+                 bottom: 2px;
+                 right: 1px;
+               `}
+        }` : /* istanbul ignore next */""}
       }
+    `}
 
-      &:hover {
-        ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
-      }
+    ${position === "left" && css`
+        background-color: transparent;
+        border-bottom: 0px;
+
+        ${!isInSidebar && !error && css`
+          --border-right-value: ${validationRedesignOptIn ? "0px" : "2px"}
+            border-right:
+            ${alternateStyling ? "1px" : "var(--border-right-value)"} solid
+            var(--colorsActionMinor100);
+        `}
 
-      ${(warning || info) && css`
-        border-right: none;
-      `}
+        ${!borders && css`
+          ${StyledTitleContent} {
+            border-bottom: none;
+          }
+        `}
 
-      ${!isTabSelected && css`
-        border-right-color: var(--colorsActionMinor100);
-      `}
+      display: flex;
+        height: auto;
+        margin-left: 0px;
 
-      ${isTabSelected && css`
-        ${alternateStyling && css`
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:hover {
+          ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
+        }
+
+        ${(warning || info) && css`
+          border-right: none;
+        `}
+
+        ${!isTabSelected && css`
           border-right-color: var(--colorsActionMinor100);
         `}
 
-        ${!alternateStyling && css`
-          border-right: none;
-          padding-bottom: 0px;
+      ${isTabSelected && css`
+          ${alternateStyling && css`
+            border-right-color: var(--colorsActionMinor100);
+          `}
 
-          ${StyledTitleContent} {
-            ${!(error || warning || info) && !validationRedesignOptIn && "margin-right: 2px;"}
+          ${!alternateStyling && css`
             border-right: none;
-          }
-        `}
-  
+            padding-bottom: 0px;
+
+            ${StyledTitleContent} {
+              ${!(error || warning || info) && !validationRedesignOptIn && "margin-right: 2px;"}
+              border-right: none;
+            }
+          `}
+
         background-color: var(--colorsActionMajorYang100);
 
-        &:hover {
-          ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
-          background-color: var(--colorsActionMajorYang100);
-          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-        }
+          &:hover {
+            ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
+            background-color: var(--colorsActionMajorYang100);
+            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+          }
 
-        &:focus {
-          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-        }
+          &:focus {
+            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+          }
+        `}
       `}
-    `}
 
     ${alternateStyling && css`
-      &:focus {
-        background-color: var(--colorsActionMinor200);
-      }
+        &:focus {
+          background-color: var(--colorsActionMinor200);
+        }
 
-      &:hover {
-        background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
-      }
+        &:hover {
+          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
+        }
 
-      ${isTabSelected && css`
-        background-color: var(--colorsActionMinor200);
+        ${isTabSelected && css`
+          background-color: var(--colorsActionMinor200);
+        `}
       `}
-    `}
+
+    & ${StyledIcon} { {
+      ${validationRedesignOptIn ? "margin-top: 10px;" : "margin-top: 2px;"}
+    }
   `}
 `;
 const StyledTabTitleButton = styled.button`
@@ -433,7 +476,6 @@ const StyledLayoutWrapper = styled.div`
   hasCustomLayout,
   titlePosition = "before",
   hasCustomSibling,
-  position,
   validationRedesignOptIn
 }) => css`
     ${hasCustomLayout && css`
@@ -501,7 +543,7 @@ const StyledSelectedIndicator = styled.div`
       --selected-indicator-color: var(--colorsSemanticNegative500);
     `}
     ${position === "top" && css`
-      bottom: 0px;
+      bottom: -1px;
       left: 0px;
       right: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing050)) 0px
@@ -518,5 +560,11 @@ const StyledSelectedIndicator = styled.div`
       width: var(--sizing050);
     `}
   `}
+
+  &:focus {
+    bottom: 3px;
+    left: 3px;
+    right: 3px;
+  }
 `;
 export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, StyledVerticalIndicator };

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

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

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

@@ -1,19 +1,8 @@
-import React, { useRef, useState, useContext } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsBottomBorder, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledVerticalTabsWrapper } from "./tabs-header.style";
-import useThrottle from "../../../../hooks/__internal__/useThrottle";
-import NewValidationContext from "../../../carbon-provider/__internal__/new-validation.context";
-
-/*  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;
+import useResizeObserver from "../../../../hooks/__internal__/useResizeObserver";
+import StyledIcon from "../../../icon/icon.style";
+import { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledVerticalTabsWrapper, StyledWrapper, StyledNavigationButtonWrapper, StyledNavigationButton, StyledContainer, StyledBottomBorder } from "./tabs-header.style";
 const TabsHeader = ({
   align = "left",
   children,
@@ -21,49 +10,112 @@ const TabsHeader = ({
   role,
   extendedLine,
   noRightBorder = false,
-  isInSidebar = false
+  isInSidebar = false,
+  size = "default"
 }) => {
-  const [leftScrollOpacity, setLeftScrollOpacity] = useState(0);
-  const [rightScrollOpacity, setRightScrollOpacity] = useState(1);
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
   const ref = useRef(null);
-  let isScrollable = false;
   const {
     current
   } = ref;
-  if (position === "top" && current) {
-    isScrollable = current.scrollWidth > current.clientWidth;
-  }
-  const handleScroll = e => {
+  const [leftVisible, setLeftVisible] = useState(false);
+  const [rightVisible, setRightVisible] = useState(false);
+  const updateUI = useCallback(() => {
+    if (current) {
+      const maxScrollValue = current.scrollWidth - current.clientWidth - 20;
+      setLeftVisible(current.scrollLeft >= 20);
+      setRightVisible(current.scrollLeft <= maxScrollValue);
+    }
+  }, [current]);
+  useResizeObserver(ref, () => {
+    updateUI();
+  });
+  useEffect(() => {
+    if (current) {
+      updateUI();
+    }
+  }, [current, updateUI]);
+  function handleKeyDown(ev) {
+    /* istanbul ignore if */
+    if (!current) return;
     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
-  }, /*#__PURE__*/React.createElement(StyledTabsHeaderList, {
+      key
+    } = ev;
+    if (key === "ArrowLeft") {
+      updateUI();
+    } else if (key === "ArrowRight") {
+      updateUI();
+    }
+  }
+  if (position === "left") {
+    return /*#__PURE__*/React.createElement(StyledTabsHeaderWrapper, {
+      isInSidebar: isInSidebar,
+      position: "left"
+    }, /*#__PURE__*/React.createElement(StyledTabsHeaderList, {
+      align: align,
+      position: "left",
+      role: role,
+      extendedLine: extendedLine,
+      noRightBorder: noRightBorder,
+      isInSidebar: isInSidebar,
+      ref: ref
+    }, /*#__PURE__*/React.createElement(StyledVerticalTabsWrapper, {
+      isInSidebar: isInSidebar
+    }, children)));
+  }
+  return /*#__PURE__*/React.createElement(StyledWrapper, {
+    id: "tab-header-wrapper",
+    "data-role": "tab-header-wrapper",
     align: align,
-    position: position,
-    role: role,
+    position: "top",
     extendedLine: extendedLine,
     noRightBorder: noRightBorder,
-    isInSidebar: isInSidebar,
-    onScroll: throttledHandleScroll,
-    leftScrollOpacity: leftScrollOpacity,
-    rightScrollOpacity: rightScrollOpacity,
-    isScrollable: isScrollable,
-    ref: ref
-  }, position === "top" ? /*#__PURE__*/React.createElement(StyledTabsWrapper, null, /*#__PURE__*/React.createElement(StyledTabsBottomBorderWrapper, {
-    validationRedesignOptIn: validationRedesignOptIn
-  }, /*#__PURE__*/React.createElement(StyledTabsBottomBorder, null)), children) : /*#__PURE__*/React.createElement(StyledVerticalTabsWrapper, {
-    isInSidebar: isInSidebar
-  }, children)));
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement(StyledNavigationButtonWrapper, {
+    position: "left",
+    visible: leftVisible,
+    id: "tab-navigation-button-wrapper-left",
+    "data-role": "tab-navigation-button-wrapper-left",
+    size: size
+  }, /*#__PURE__*/React.createElement(StyledNavigationButton, {
+    tabIndex: -1,
+    title: "Scroll Tabs Left",
+    id: "tab-navigation-button-left",
+    "data-role": "tab-navigation-button-left",
+    onClick: () => {
+      /* istanbul ignore if */
+      if (current) {
+        current.scrollLeft -= 200;
+        updateUI();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(StyledIcon, {
+    type: "chevron_left"
+  }))), /*#__PURE__*/React.createElement(StyledContainer, {
+    ref: ref,
+    id: "tab-container",
+    role: role,
+    "data-role": "tab-container",
+    size: size
+  }, /*#__PURE__*/React.createElement(StyledBottomBorder, null), children), /*#__PURE__*/React.createElement(StyledNavigationButtonWrapper, {
+    position: "right",
+    visible: rightVisible,
+    id: "tab-navigation-button-wrapper-right",
+    "data-role": "tab-navigation-button-wrapper-right",
+    size: size
+  }, /*#__PURE__*/React.createElement(StyledNavigationButton, {
+    tabIndex: -1,
+    title: "Scroll Tabs Right",
+    id: "tab-navigation-button-right",
+    "data-role": "tab-navigation-button-right",
+    onClick: () => {
+      /* istanbul ignore if */
+      if (current) {
+        current.scrollLeft += 200;
+        updateUI();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(StyledIcon, {
+    type: "chevron_right"
+  }))));
 };
 export default TabsHeader;

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

@@ -1,17 +1,28 @@
 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 interface StyledTabsHeaderListProps extends Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position"> {
-    leftScrollOpacity?: number;
-    rightScrollOpacity?: number;
-    isScrollable?: boolean;
-}
+export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
-declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
 declare const StyledVerticalTabsWrapper: import("styled-components").StyledComponent<"div", any, StyledVerticalTabsWrapperProps, never>;
-declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {
-    validationRedesignOptIn?: boolean | undefined;
+declare type StyledWrapperProps = {
+    align: string;
+    position: string;
+    role?: string;
+    extendedLine?: boolean;
+    noRightBorder?: boolean;
+    isInSidebar?: boolean;
+};
+declare type StyledNavigationButtonWrapperProps = {
+    position: string;
+    visible: boolean;
+    size: string;
+};
+declare const StyledWrapper: import("styled-components").StyledComponent<"section", any, StyledWrapperProps, never>;
+declare const StyledNavigationButtonWrapper: import("styled-components").StyledComponent<"div", any, StyledNavigationButtonWrapperProps, never>;
+declare const StyledNavigationButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {
+    size: string;
 }, never>;
-declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper, };
+declare const StyledBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledVerticalTabsWrapper, StyledWrapper, StyledNavigationButtonWrapper, StyledNavigationButton, StyledContainer, StyledBottomBorder, };