carbon-react 123.0.1 → 123.1.0

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -110,6 +110,8 @@ export const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   useEffect(() => {
     if (focusItem) {
       ref.current?.focus();

package/esm/components/action-popover/action-popover-menu/action-popover-menu.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, { useCallback, useMemo, useContext, useState } from "react";
+import React, { useCallback, useMemo, useContext, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
@@ -32,7 +32,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
-      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
+      return child.type.displayName !== ActionPopoverItem.displayName && child.type.displayName !== ActionPopoverDivider.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -42,42 +42,82 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
     });
   }, [children]);
+  const isItemDisabled = useCallback(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/React.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  useEffect(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (Events.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (Events.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      React.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/React.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/React.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -92,7 +132,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = useState(false);
   const [childHasIcon, setChildHasIcon] = useState(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);

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

@@ -118,8 +118,8 @@ export const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

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

@@ -131,6 +131,14 @@ const StyledMenuItem = styled.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/esm/components/carousel/carousel.component.js

@@ -1,9 +1,11 @@
 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, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
+import Logger from "../../__internal__/utils/logger";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
 import guid from "../../__internal__/utils/helpers/guid";
+let deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 export const Carousel = ({
@@ -17,6 +19,10 @@ export const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
   const lastSlideIndexProp = useRef(slideIndex);

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -119,6 +119,8 @@ const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   (0, _react.useEffect)(() => {
     if (focusItem) {
       ref.current?.focus();

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -41,7 +41,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
         return true;
       }
-      return child.type !== _actionPopoverItem.default && child.type !== _actionPopoverDivider.default;
+      return child.type.displayName !== _actionPopoverItem.default.displayName && child.type.displayName !== _actionPopoverDivider.default.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -51,42 +51,82 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
     });
   }, [children]);
+  const isItemDisabled = (0, _react.useCallback)(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/_react.default.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  (0, _react.useEffect)(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = (0, _react.useCallback)(e => {
     if (_events.default.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (_events.default.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (_events.default.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      _react.default.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/_react.default.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/_react.default.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -101,7 +141,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = (0, _react.useState)(false);
   const [childHasIcon, setChildHasIcon] = (0, _react.useState)(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = (0, _react.useState)(submenuPosition);

package/lib/components/action-popover/action-popover.component.js

@@ -127,8 +127,8 @@ const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

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

@@ -143,6 +143,14 @@ const StyledMenuItem = _styledComponents.default.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/lib/components/carousel/carousel.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Carousel = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _carousel = require("./carousel.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -13,6 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 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); }
+let deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 const Carousel = ({
@@ -26,6 +28,10 @@ const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    _logger.default.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
   const lastSlideIndexProp = (0, _react.useRef)(slideIndex);

package/package.json

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