carbon-react 121.0.0 → 121.0.1

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -70,6 +70,7 @@ Crumb.propTypes = {
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
+  "hasFocus": PropTypes.bool,
   "href": PropTypes.string,
   "isCurrent": PropTypes.bool,
   "onClick": PropTypes.func,

package/esm/components/link/link.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import MenuContext from "../menu/menu.context";
@@ -29,6 +29,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
   removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
+  const [hasFocus, setHasFocus] = useState(false);
   const l = useLocale();
   const {
     inMenu
@@ -75,7 +76,9 @@ const Link = /*#__PURE__*/React.forwardRef(({
     href,
     rel,
     "aria-label": ariaLabel,
-    ...ariaProps
+    ...ariaProps,
+    onFocus: () => setHasFocus(true),
+    onBlur: () => setHasFocus(false)
   };
   const buttonProps = {
     type: "button"
@@ -87,8 +90,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
     }
     return /*#__PURE__*/React.createElement(type, type === "button" ? {
       ...componentProps,
-      ...buttonProps,
-      placeholderTabIndex
+      ...buttonProps
     } : {
       ...componentProps,
       ...(placeholderTabIndex && href === undefined && !onClick && {
@@ -107,6 +109,8 @@ const Link = /*#__PURE__*/React.forwardRef(({
     isMenuItem: inMenu
   }, tagComponent("link", rest), isSkipLink && {
     "data-element": "skip-link"
+  }, {
+    hasFocus: hasFocus
   }), createLinkBasedOnType());
 });
 Link.propTypes = {
@@ -162,6 +166,7 @@ Link.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "disabled": PropTypes.bool,
+  "hasFocus": PropTypes.bool,
   "href": PropTypes.string,
   "icon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "iconAlign": PropTypes.oneOf(["left", "right"]),

package/esm/components/link/link.style.d.ts

@@ -10,6 +10,7 @@ export interface StyledLinkProps {
     isDarkBackground?: boolean;
     /** Allows link styling to be updated for light or dark backgrounds */
     variant?: Variants;
+    hasFocus?: boolean;
 }
 interface PrivateStyledLinkProps {
     hasContent: boolean;

package/esm/components/link/link.style.js

@@ -42,7 +42,8 @@ const StyledLink = styled.span`
   disabled,
   variant,
   isDarkBackground,
-  isMenuItem
+  isMenuItem,
+  hasFocus
 }) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
@@ -117,21 +118,6 @@ const StyledLink = styled.span`
             }
           `}
         }
-
-        ${!disabled && !theme.focusRedesignOptOut && css`
-          a,
-          button {
-            outline: none;
-            text-decoration: none;
-            border-bottom-left-radius: var(--borderRadius000);
-            border-bottom-right-radius: var(--borderRadius000);
-          }
-          &:focus-within {
-            box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
-            border-bottom-left-radius: var(--borderRadius025);
-            border-bottom-right-radius: var(--borderRadius025);
-          }
-        `}
       `}
 
       a,
@@ -173,6 +159,19 @@ const StyledLink = styled.span`
         `}
       }
 
+      ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && css`
+        a,
+        button {
+          outline: none;
+          text-decoration: none;
+          border-bottom-left-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+        }
+        box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
+        border-bottom-left-radius: var(--borderRadius025);
+        border-bottom-right-radius: var(--borderRadius025);
+      `}
+
       button {
         background-color: transparent;
         border: none;

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

@@ -7,14 +7,6 @@ import menuConfigVariants from "../menu.config";
 import Link from "../../link";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import { baseTheme } from "../../../style/themes";
-const overrideLinkFocusStyling = fullScreenView => `
-  &:focus-within {
-    box-shadow: none;
-    a {
-      background-color: ${fullScreenView ? "var(--colorsComponentsMenuAutumnStandard600)" : "transparent"};
-    }
-  }
-`;
 const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
@@ -45,19 +37,13 @@ const StyledMenuItemWrapper = styled.a.attrs({
     font-weight: 700;
     height: 40px;
     position: relative;
-
-    && {
-      :focus-within > a, > button {
-        background-color: transparent;
-      }
-    }
+    box-shadow: none;
 
     a,
     button {
       cursor: pointer;
     }
 
-      ${overrideLinkFocusStyling(inFullscreenView)}
       a:focus,
       button:focus {
         ${({

package/lib/components/breadcrumbs/crumb/crumb.component.js

@@ -77,6 +77,7 @@ Crumb.propTypes = {
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
+  "hasFocus": _propTypes.default.bool,
   "href": _propTypes.default.string,
   "isCurrent": _propTypes.default.bool,
   "onClick": _propTypes.default.func,

package/lib/components/link/link.component.js

@@ -38,6 +38,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   removeAriaLabelOnIcon,
   ...rest
 }, ref) => {
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const l = (0, _useLocale.default)();
   const {
     inMenu
@@ -84,7 +85,9 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     href,
     rel,
     "aria-label": ariaLabel,
-    ...ariaProps
+    ...ariaProps,
+    onFocus: () => setHasFocus(true),
+    onBlur: () => setHasFocus(false)
   };
   const buttonProps = {
     type: "button"
@@ -96,8 +99,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     }
     return /*#__PURE__*/_react.default.createElement(type, type === "button" ? {
       ...componentProps,
-      ...buttonProps,
-      placeholderTabIndex
+      ...buttonProps
     } : {
       ...componentProps,
       ...(placeholderTabIndex && href === undefined && !onClick && {
@@ -116,6 +118,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
     isMenuItem: inMenu
   }, (0, _tags.default)("link", rest), isSkipLink && {
     "data-element": "skip-link"
+  }, {
+    hasFocus: hasFocus
   }), createLinkBasedOnType());
 });
 exports.Link = Link;
@@ -172,6 +176,7 @@ Link.propTypes = {
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
+  "hasFocus": _propTypes.default.bool,
   "href": _propTypes.default.string,
   "icon": _propTypes.default.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
   "iconAlign": _propTypes.default.oneOf(["left", "right"]),

package/lib/components/link/link.style.d.ts

@@ -10,6 +10,7 @@ export interface StyledLinkProps {
     isDarkBackground?: boolean;
     /** Allows link styling to be updated for light or dark backgrounds */
     variant?: Variants;
+    hasFocus?: boolean;
 }
 interface PrivateStyledLinkProps {
     hasContent: boolean;

package/lib/components/link/link.style.js

@@ -51,7 +51,8 @@ const StyledLink = _styledComponents.default.span`
   disabled,
   variant,
   isDarkBackground,
-  isMenuItem
+  isMenuItem,
+  hasFocus
 }) => {
   const colorMapKey = isDarkBackground ? "dark" : "light";
   const {
@@ -126,21 +127,6 @@ const StyledLink = _styledComponents.default.span`
             }
           `}
         }
-
-        ${!disabled && !theme.focusRedesignOptOut && (0, _styledComponents.css)`
-          a,
-          button {
-            outline: none;
-            text-decoration: none;
-            border-bottom-left-radius: var(--borderRadius000);
-            border-bottom-right-radius: var(--borderRadius000);
-          }
-          &:focus-within {
-            box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
-            border-bottom-left-radius: var(--borderRadius025);
-            border-bottom-right-radius: var(--borderRadius025);
-          }
-        `}
       `}
 
       a,
@@ -182,6 +168,19 @@ const StyledLink = _styledComponents.default.span`
         `}
       }
 
+      ${!isSkipLink && !disabled && !theme.focusRedesignOptOut && hasFocus && (0, _styledComponents.css)`
+        a,
+        button {
+          outline: none;
+          text-decoration: none;
+          border-bottom-left-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+        }
+        box-shadow: 0 4px 0 0 var(--colorsUtilityYin090);
+        border-bottom-left-radius: var(--borderRadius025);
+        border-bottom-right-radius: var(--borderRadius025);
+      `}
+
       button {
         background-color: transparent;
         border: none;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -16,14 +16,6 @@ var _themes = require("../../../style/themes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 overrideLinkFocusStyling = fullScreenView => `
-  &:focus-within {
-    box-shadow: none;
-    a {
-      background-color: ${fullScreenView ? "var(--colorsComponentsMenuAutumnStandard600)" : "transparent"};
-    }
-  }
-`;
 const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
@@ -54,19 +46,13 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     font-weight: 700;
     height: 40px;
     position: relative;
-
-    && {
-      :focus-within > a, > button {
-        background-color: transparent;
-      }
-    }
+    box-shadow: none;
 
     a,
     button {
       cursor: pointer;
     }
 
-      ${overrideLinkFocusStyling(inFullscreenView)}
       a:focus,
       button:focus {
         ${({

package/package.json

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