carbon-react 145.0.0 → 146.0.0

package/esm/__internal__/input/input-presentation.style.js

@@ -2,9 +2,6 @@ import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
 import StyledInput from "./input.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
   inputWidth
@@ -87,11 +84,10 @@ const InputPresentationStyle = styled.div`
     `}
 
     ${({
-  hasFocus,
-  theme
+  hasFocus
 }) => hasFocus && css`
       & {
-        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+        ${addFocusStyling()}
         z-index: 2;
       }
     `}

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -1,9 +1,6 @@
 import styled, { css } from "styled-components";
 import sizes from "../input/input-sizes.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const InputIconToggleStyle = styled.span.attrs(({
   onClick
 }) => ({
@@ -38,12 +35,8 @@ const InputIconToggleStyle = styled.span.attrs(({
       cursor: default;
     `}
 
-  ${({
-  theme
-}) => `
     &:focus {
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-    }  
-  `}
+    ${addFocusStyling()}
+  }
 `;
 export default InputIconToggleStyle;

package/esm/__internal__/validations/validation-icon.style.js

@@ -8,9 +8,6 @@ const validationIconTypes = {
   info: "var(--colorsSemanticInfo500)",
   warning: "var(--colorsSemanticCaution500)"
 };
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
 const ValidationIconStyle = styled.span`
   background: none;
   cursor: default;
@@ -34,9 +31,7 @@ const ValidationIconStyle = styled.span`
   }
 
   ${StyledIcon}:focus {
-    ${({
-  theme
-}) => !theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+    ${addFocusStyling()}
   }
 
   ${margin}

package/esm/components/accordion/accordion.style.js

@@ -102,9 +102,6 @@ const StyledAccordionHeadingsContainer = styled.div`
       }
     `}
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledAccordionTitleContainer = styled.div`
   ${({
   buttonHeading,
@@ -112,7 +109,6 @@ const StyledAccordionTitleContainer = styled.div`
   iconAlign,
   size,
   hasButtonProps,
-  theme,
   isExpanded,
   variant
 }) => css`
@@ -131,7 +127,7 @@ const StyledAccordionTitleContainer = styled.div`
     z-index: 1;
 
     &:focus {
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+      ${addFocusStyling()}
     }
 
     ${variant === "subtle" && css`

package/esm/components/action-popover/action-popover.style.js

@@ -5,9 +5,6 @@ import StyledIcon from "../icon/icon.style";
 import StyledButton from "../button/button.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const Menu = styled.ul`
   ${({
   isOpen
@@ -119,9 +116,7 @@ const StyledMenuItem = styled.button`
   font-weight: 500;
 
   &:focus {
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+    ${addFocusStyling()}
     z-index: 1;
     border-radius: var(--borderRadius000);
   }
@@ -188,13 +183,9 @@ const ButtonIcon = styled(Icon)`
   }
 `;
 const StyledButtonIcon = styled.div`
-  ${({
-  theme
-}) => `
-    &:focus {
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-    }    
-  `}
+  &:focus {
+    ${addFocusStyling()}
+  }
   border-radius: var(--borderRadius050);
 `;
 const MenuItemIcon = styled(Icon)`

package/esm/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -2,9 +2,6 @@ import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 const transparentSvg = "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%" + "2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill-opacity%3D%22." + "45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2" + "F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledAdvancedColorPickerCell = styled.button.attrs({
   type: "button"
 })`
@@ -31,11 +28,7 @@ const StyledAdvancedColorPickerCell = styled.button.attrs({
   }
 
   &:focus {
-    ${({
-  theme
-}) => `
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-    `}
+    ${addFocusStyling()}
   }
 
   &::-moz-focus-inner {

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -1,8 +1,5 @@
 import styled, { css } from "styled-components";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledNavigationItem = styled.li`
   width: 100%;
 
@@ -19,9 +16,7 @@ const StyledNavigationItem = styled.li`
     border-bottom-right-radius: var(--borderRadius100);
 
     &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+      ${addFocusStyling()}
       position: relative;
     }
 

package/esm/components/batch-selection/batch-selection.style.js

@@ -2,9 +2,6 @@ import styled, { css } from "styled-components";
 import StyledIconButton from "../icon-button/icon-button.style";
 import StyledIcon from "../icon/icon.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledBatchSelection = styled.div`
   ${({
   disabled,
@@ -20,9 +17,7 @@ const StyledBatchSelection = styled.div`
     ${StyledIcon} {
       ${!disabled && `color: var(--colorsActionMajorYin065);`}
       &:focus {
-        ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+        ${addFocusStyling()}
       }
     }
 
@@ -64,9 +59,7 @@ const StyledBatchSelection = styled.div`
     ${StyledIconButton}:focus {
       border-radius: var(--borderRadius100);
       z-index: 1;
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+      ${addFocusStyling()}
     }
 
     ${disabled && css`

package/esm/components/button/button.style.js

@@ -53,13 +53,11 @@ function stylingForType({
     ${iconOnly && stylingForIconOnly(size)}
   `;
 }
-const oldFocusStyling = "outline: solid 3px var(--colorsSemanticFocus500);";
 const StyledButton = styled.button`
   ${space}
   ${({
   disabled,
-  noWrap,
-  theme
+  noWrap
 }) => css`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
@@ -75,7 +73,7 @@ const StyledButton = styled.button`
     border-radius: var(--borderRadius400);
 
     &:focus {
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
+      ${addFocusStyling()}
     }
 
     ${stylingForType}

package/esm/components/button-toggle/button-toggle.style.js

@@ -35,9 +35,6 @@ const StyledButtonToggleContentWrapper = styled.div`
   height: 100%;
   flex-flow: wrap;
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledButtonToggle = styled.button`
   display: inline-flex;
   justify-content: center;
@@ -78,9 +75,7 @@ const StyledButtonToggle = styled.button`
     `}  
     
   &:focus {
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+    ${addFocusStyling()}
     z-index: 100;
   }
 

package/esm/components/carbon-provider/__internal__/new-validation.context.d.ts

@@ -4,10 +4,6 @@ export interface NewValidationContextProps {
      *
      * NOTE - Will eventually be set to `true` by default in the future. */
     validationRedesignOptIn?: boolean;
-    /** (Deprecated) Feature flag for opting out of the focus redesign.
-     *
-     * NOTE -  This feature flag will soon be removed, along with the legacy styling. */
-    focusRedesignOptOut?: boolean;
 }
 declare const _default: React.Context<NewValidationContextProps>;
 export default _default;

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -6,5 +6,5 @@ export interface CarbonProviderProps extends NewValidationContextProps {
     /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
     theme?: Partial<ThemeObject>;
 }
-export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, focusRedesignOptOut, }: CarbonProviderProps) => React.JSX.Element;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, }: CarbonProviderProps) => React.JSX.Element;
 export default CarbonProvider;

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -1,35 +1,19 @@
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
 import { sageTheme } from "../../style/themes";
 import NewValidationContext from "./__internal__/new-validation.context";
 import TopModalProvider from "./__internal__/top-modal-provider.component";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedFocusRedesignOptOut = false;
 export const CarbonProvider = ({
   children,
   theme = sageTheme,
-  validationRedesignOptIn = false,
-  focusRedesignOptOut = false
-}) => {
-  const {
-    focusRedesignOptOut: existingFocusRedesignOptOut
-  } = useContext(NewValidationContext);
-  const focusRedesignOptOutValue = existingFocusRedesignOptOut || focusRedesignOptOut;
-  if (!deprecatedFocusRedesignOptOut && focusRedesignOptOutValue) {
-    deprecatedFocusRedesignOptOut = true;
-    Logger.deprecate("The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + "Along with this feature flag, the legacy focus styling will also be removed. ");
+  validationRedesignOptIn = false
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: theme
+}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+  value: {
+    validationRedesignOptIn
   }
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: {
-      ...theme,
-      focusRedesignOptOut: focusRedesignOptOutValue
-    }
-  }, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
-    value: {
-      validationRedesignOptIn
-    }
-  }, /*#__PURE__*/React.createElement(TopModalProvider, null, children))));
-};
+}, /*#__PURE__*/React.createElement(TopModalProvider, null, children))));
 export default CarbonProvider;

package/esm/components/card/card.style.js

@@ -76,20 +76,17 @@ const StyledCardContent = styled.div.attrs(({
   return {};
 })`
   ${({
-  interactive,
-  theme
+  interactive
 }) => interactive && css`
       cursor: pointer;
       display: inline-flex;
       flex-direction: column;
       height: 100%;
 
-      ${!theme.focusRedesignOptOut && css`
-        :focus {
-          ${addFocusStyling()};
-          position: relative;
-        }
-      `}
+      :focus {
+        ${addFocusStyling()};
+        position: relative;
+      }
     `}
 
   align-items: stretch;

package/esm/components/checkbox/checkbox.style.js

@@ -8,9 +8,6 @@ import StyledLabel, { StyledLabelContainer } from "../../__internal__/label/labe
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
-`;
 const StyledCheckbox = styled.div`
   ${margin}
   ${({
@@ -69,14 +66,10 @@ const StyledCheckbox = styled.div`
 
     // prettier-ignore
     ${StyledHiddenCheckableInput}:not([disabled]) {
-      ${({
-  theme
-}) => `
         &:focus + ${StyledCheckableInputSvgWrapper} ,
         &:hover + ${StyledCheckableInputSvgWrapper} {
-          ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-        }
-      `}
+          ${addFocusStyling()}
+      }
     }
 
     ${StyledLabelContainer} {

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -1,9 +1,6 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../../../style/themes/base";
 import addFocusStyling from "../../../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const officialReactDayPickerStyling = () => css`
   /* Variables declaration */
   /* prettier-ignore */
@@ -449,22 +446,14 @@ const StyledDayPicker = styled.div`
   }
 
   .rdp-focused:not(.rdp-disabled):not(.rdp-outside) {
-    ${({
-  theme
-}) => css`
-      ${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
-    `}
+    ${addFocusStyling(true)}
     border-radius: var(--borderRadius400);
   }
 
   .rdp-day.rdp-selected {
-    ${({
-  theme
-}) => css`
-      &:focus {
-        ${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
-      }
-    `}
+    &:focus {
+      ${addFocusStyling(true)}
+    }
   }
 `;
 StyledDayPicker.defaultProps = {

package/esm/components/date/__internal__/navbar/button.style.js

@@ -1,9 +1,6 @@
 import styled from "styled-components";
 import addFocusStyling from "../../../../style/utils/add-focus-styling";
 import { baseTheme } from "../../../../style/themes";
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledButton = styled.button.attrs({
   type: "button"
 })`
@@ -20,13 +17,9 @@ const StyledButton = styled.button.attrs({
   box-sizing: border-box;
   border-radius: var(--borderRadius050);
 
-  ${({
-  theme
-}) => `
-    &:focus {
-      ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-    }
-  `}
+  &:focus {
+    ${addFocusStyling()}
+  }
 `;
 StyledButton.defaultProps = {
   theme: baseTheme

package/esm/components/drawer/drawer.style.js

@@ -160,9 +160,6 @@ const StyledDrawerContent = styled.aside`
     }
   }
 `;
-const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-`;
 const StyledSidebarToggleButton = styled.button.attrs({
   type: "button"
 })`
@@ -186,13 +183,9 @@ const StyledSidebarToggleButton = styled.button.attrs({
     animation: ${buttonClose} ${animationDuration} ease-in-out;
     border-radius: var(--borderRadius050);
 
-    ${({
-  theme
-}) => `
-      &:focus {
-        ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
-      }
-    `}
+    &:focus {
+      ${addFocusStyling()}
+    }
 
     &:hover {
       cursor: pointer;

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -12,13 +12,6 @@ const horizontalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
-const oldFocusStyling = `
-  border: 2px solid var(--colorsSemanticFocus500);
-`;
-const firstColumnOldFocusStyling = `
-  outline: 2px solid var(--colorsSemanticFocus500);
-  outline-offset: -1px;
-`;
 const newFocusStyling = theme => {
   return `
     ${addFocusStyling(true)}
@@ -39,11 +32,7 @@ css`
       border-right: 2px solid var(--colorsSemanticFocus500);
     }
   `;
-const stickyColumnFocusStyling = theme => {
-  /* istanbul ignore else */
-  if (!theme.focusRedesignOptOut) return ``;
-  /* istanbul ignore next */
-  return `
+const stickyColumnFocusStyling = theme => `
       width: calc(100% + 1px);
       z-index: ${theme.zIndex.overlay};
       :before {
@@ -60,7 +49,6 @@ const stickyColumnFocusStyling = theme => {
       }
     }
   `;
-};
 const borderColor = colorTheme => {
   switch (colorTheme) {
     case "light":
@@ -203,7 +191,7 @@ const StyledFlatTableRow = styled.tr`
             right: 0px;
             top: 0;
             bottom: 0px;
-            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */oldFocusStyling}
+            ${newFocusStyling(theme)}
             pointer-events: none;
           }
 
@@ -222,37 +210,12 @@ const StyledFlatTableRow = styled.tr`
 
           /* Styling for safari. Position relative does not work on tr elements on Safari  */
           ${isSafari(navigator) && css`
-            ${theme.focusRedesignOptOut && /* istanbul ignore next */
-  css`
-              outline: 2px solid var(--colorsSemanticFocus500);
-              outline-offset: -2px;
-              position: static;
-
-              :after {
-                content: none;
-                border: none;
-              }
-            `}
-            ${!theme.focusRedesignOptOut && /* istanbul ignore next */
-  css`
-              position: -webkit-sticky;
-              :after {
-                border: none;
-                content: "";
-                height: ${rowHeight}px;
-                ${newFocusStyling(theme)}
-              }
-            `}
-          `}
-
-          ${theme.focusRedesignOptOut && /* istanbul ignore next */
-  css`
-            td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before {
-              border-left: 3px solid var(--colorsSemanticFocus500);
-            }
-
-            td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) {
-              border-right: 2px solid var(--colorsSemanticFocus500);
+            position: -webkit-sticky;
+            :after {
+              border: none;
+              content: "";
+              height: ${rowHeight}px;
+              ${newFocusStyling(theme)}
             }
           `}
 
@@ -288,7 +251,7 @@ const StyledFlatTableRow = styled.tr`
           cursor: pointer;
 
           :focus {
-            ${!theme.focusRedesignOptOut ? newFocusStyling(theme) : /* istanbul ignore next */firstColumnOldFocusStyling}
+            ${newFocusStyling(theme)}
           }
 
           :hover {

package/esm/components/flat-table/flat-table.style.js

@@ -13,9 +13,6 @@ import addFocusStyling from "../../style/utils/add-focus-styling";
 const HEADER_OVERLAY_INCREMENT = 3;
 const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
 const ROW_HEADER_OVERLAY_INCREMENT = 5;
-const oldFocusStyling = `
-  outline: 2px solid var(--colorsSemanticFocus500);
-`;
 const StyledTableContainer = styled.div`
   ${({
   width,
@@ -125,22 +122,15 @@ const StyledFlatTableWrapper = styled(StyledBox)`
 
   ${({
   isInSidebar,
-  theme,
   isFocused
 }) => css`
     box-sizing: border-box;
 
-    /* istanbul ignore next */
-    ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
-css`
-      ${oldFocusStyling}
-    `}
-
-    ${!theme.focusRedesignOptOut && isFocused && css`
+    ${isFocused && css`
       ${addFocusStyling()}
     `}
 
-      ${isInSidebar ? "min-width: fit-content;" : ""}
+    ${isInSidebar ? "min-width: fit-content;" : ""}
   `}
 
   ${({

package/esm/components/flat-table/sort/sort.style.js

@@ -2,9 +2,6 @@ import styled from "styled-components";
 import Icon from "../../icon";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import baseTheme from "../../../style/themes/base";
-const oldFocusStyling = `
-  outline: solid 1px var(--colorsSemanticFocus500);
-`;
 const StyledSort = styled.div`
   display: inline-flex;
   align-items: center;
@@ -19,9 +16,7 @@ const StyledSort = styled.div`
   }
 
   :focus {
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+    ${addFocusStyling()}
     border-radius: var(--borderRadius025);
   }
 `;

package/esm/components/heading/heading.style.js

@@ -19,7 +19,6 @@ const StyledHeaderContent = styled.div`
   display: inline-flex;
   align-items: flex-end;
 `;
-const oldFocusStyling = "outline: 3px solid var(--colorsSemanticFocus500);";
 const StyledHeader = styled.div`
   ${({
   divider,
@@ -56,9 +55,7 @@ const StyledHeadingBackButton = styled(Link)`
 
     &:focus {
       background-color: transparent;
-      ${({
-  theme
-}) => !theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling}
+      ${addFocusStyling()}
     }
 
     &:hover {

package/esm/components/help/help.style.js

@@ -3,9 +3,6 @@ import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
 const StyledHelp = styled.div`
   background: none;
   cursor: default;
@@ -37,9 +34,7 @@ const StyledHelp = styled.div`
 
   &:focus ${StyledIcon} {
     border-radius: var(--borderRadius050);
-    ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
+    ${addFocusStyling()}
   }
 
   ${margin}