carbon-react 144.10.0 → 144.12.0

package/esm/components/draggable/draggable-container.component.d.ts

@@ -10,9 +10,14 @@ export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "da
      * `<DraggableItem />` is required to make `Draggable` works
      */
     children?: React.ReactNode;
+    /**
+     * Defines the direction in which the draggable items contents are placed.
+     * Can be either "row" or "row-reverse".
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableContainer: {
-    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, flexDirection, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

package/esm/components/draggable/draggable-container.component.js

@@ -12,6 +12,7 @@ const DraggableContainer = ({
   "data-role": dataRole = "draggable-container",
   children,
   getOrder,
+  flexDirection = "row",
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
@@ -67,7 +68,8 @@ const DraggableContainer = ({
     return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
       id: `${item.props.id}`,
       findItem,
-      moveItem
+      moveItem,
+      flexDirection
     }, [item.props.children]);
   })));
 };
@@ -76,6 +78,7 @@ if (process.env.NODE_ENV !== "production") {
     "children": PropTypes.node,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "getOrder": PropTypes.func,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -22,9 +22,14 @@ export interface DraggableItemProps extends PaddingProps {
      * @ignore
      */
     moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+    /**
+     * @private
+     * @ignore
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id, findItem, moveItem, children, py, flexDirection, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

package/esm/components/draggable/draggable-item/draggable-item.component.js

@@ -3,13 +3,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
+import { StyledDraggableItem } from "./draggable-item.style";
+import Icon from "../../icon";
 const DraggableItem = ({
   id,
   findItem,
   moveItem,
   children,
   py = 1,
+  flexDirection,
   ...rest
 }) => {
   let originalIndex;
@@ -60,8 +62,9 @@ const DraggableItem = ({
     "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
-    py: py
-  }, paddingProps), children, /*#__PURE__*/React.createElement(StyledIcon, {
+    py: py,
+    flexDirection: flexDirection
+  }, paddingProps), children, /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }));
 };
@@ -69,6 +72,7 @@ if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": PropTypes.node,
     "findItem": PropTypes.func,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     "moveItem": PropTypes.func,
     "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/draggable/draggable-item/draggable-item.style.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { PaddingProps } from "styled-system";
 declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
+    flexDirection?: "row" | "row-reverse";
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

package/esm/components/draggable/draggable-item/draggable-item.style.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 import { padding, margin } from "styled-system";
 import { baseTheme } from "../../../style/themes";
-import Icon from "../../icon";
 const StyledDraggableContainer = styled.div`
   ${margin}
 `;
@@ -11,18 +10,18 @@ const StyledDraggableItem = styled.div`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${padding}
   cursor: move;
-
+  justify-content: space-between;
+  flex-direction: ${({
+  flexDirection
+}) => flexDirection};
   opacity: ${({
   isDragging
 }) => isDragging ? "0" : "1"};
 `;
-const StyledIcon = styled(Icon)`
-  margin-left: auto;
-`;
 StyledDraggableContainer.defaultProps = {
   theme: baseTheme
 };
 StyledDraggableItem.defaultProps = {
   theme: baseTheme
 };
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

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;