carbon-react 144.1.1 → 144.2.1

package/esm/components/box/box.component.d.ts

@@ -23,7 +23,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** Allows a tabindex to be specified */
+    /** (Deprecated) Allows a tabindex to be specified */
     tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;

package/esm/components/box/box.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps } from "../../style/utils";
 import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedTabIndex = false;
 const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -27,6 +29,10 @@ const Box = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
+  if (!deprecatedTabIndex && tabIndex !== undefined) {
+    deprecatedTabIndex = true;
+    Logger.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
+  }
   return /*#__PURE__*/React.createElement(StyledBox, _extends({
     as: as,
     id: id,

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -36,6 +36,8 @@ export const MultiActionButton = ({
   } = useChildButtons(buttonRef);
   const handleInsideClick = useClickAwayListener(hideButtons);
   const handleClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {

package/esm/components/split-button/split-button.component.js

@@ -37,6 +37,7 @@ export const SplitButton = ({
   const locale = useLocale();
   const theme = useContext(ThemeContext) || baseTheme;
   const buttonLabelId = useRef(guid());
+  const mainButtonRef = useRef(null);
   const toggleButton = useRef(null);
   const {
     showAdditionalButtons,
@@ -47,25 +48,36 @@ export const SplitButton = ({
     wrapperProps,
     contextValue
   } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
+  const handleMainClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    mainButtonRef.current?.focus();
+    if (onClick) {
+      onClick(ev);
+    }
+  };
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
     onFocus: hideButtons,
     onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
     iconType,
-    onClick: onClick,
+    onClick: handleMainClick,
     size,
     subtext,
     ...filterOutStyledSystemSpacingProps(rest)
   };
+  const handleToggleClick = () => {
+    // ensure button is focused when clicked (Safari)
+    toggleButton.current?.focus();
+    showButtons();
+  };
   const toggleButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
-    onClick: showButtons,
+    onClick: handleToggleClick,
     buttonType,
     size
   };
@@ -87,7 +99,8 @@ export const SplitButton = ({
     return [/*#__PURE__*/React.createElement(Button, _extends({
       "data-element": "main-button",
       key: "main-button",
-      id: buttonLabelId.current
+      id: buttonLabelId.current,
+      ref: mainButtonRef
     }, mainButtonProps), text), /*#__PURE__*/React.createElement(StyledSplitButtonToggle, _extends({
       "aria-haspopup": "true",
       "aria-expanded": showAdditionalButtons,

package/esm/components/text-editor/text-editor.component.js

@@ -258,7 +258,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
       editMode: true
     }
   }, /*#__PURE__*/React.createElement(StyledEditorWrapper, _extends({
-    ref: wrapper
+    ref: wrapper,
+    "data-role": "text-editor-wrapper"
   }, rest), /*#__PURE__*/React.createElement(LabelWrapper, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/React.createElement(Label, {
@@ -277,7 +278,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     warning: !!(!error && warning)
   })), /*#__PURE__*/React.createElement(StyledEditorOutline, {
     isFocused: isFocused,
-    hasError: !!error
+    hasError: !!error,
+    "data-role": "editor-outline"
   }, /*#__PURE__*/React.createElement(StyledEditorContainer, {
     "data-component": "text-editor-container",
     hasError: !!error,

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useCallback } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
 import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
 const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
@@ -6,7 +6,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
   const [minWidth, setMinWidth] = useState(0);
   const buttonNode = useRef(null);
   const childrenContainer = useRef(null);
-  const focusFirstChildButtonOnOpen = useRef(false);
   const hideButtons = useCallback(() => {
     setShowAdditionalButtons(false);
   }, []);
@@ -19,20 +18,16 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = useCallback(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
-  useEffect(() => {
-    const firstChild = getButtonChildren()?.[0];
-    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
-      focusFirstChildButtonOnOpen.current = false;
-      firstChild.focus();
-    }
-  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
+    const isToggleKey = Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev) || showAdditionalButtons && Events.isTabKey(ev);
+    if (isToggleKey) {
       ev.preventDefault();
       if (!showAdditionalButtons) {
         showButtons();
       }
-      focusFirstChildButtonOnOpen.current = true;
+      setTimeout(() => {
+        getButtonChildren()?.[0]?.focus();
+      });
     }
   };
   const handleKeyDown = useMenuKeyboardNavigation(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/lib/components/box/box.component.d.ts

@@ -23,7 +23,7 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** Allows a tabindex to be specified */
+    /** (Deprecated) Allows a tabindex to be specified */
     tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;

package/lib/components/box/box.component.js

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _box = _interopRequireDefault(require("./box.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecatedTabIndex = false;
 const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -34,6 +36,10 @@ const Box = exports.Box = /*#__PURE__*/_react.default.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
+  if (!deprecatedTabIndex && tabIndex !== undefined) {
+    deprecatedTabIndex = true;
+    _logger.default.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
+  }
   return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     as: as,
     id: id,

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -45,6 +45,8 @@ const MultiActionButton = ({
   } = (0, _useChildButtons.default)(buttonRef);
   const handleInsideClick = (0, _useClickAwayListener.default)(hideButtons);
   const handleClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {

package/lib/components/split-button/split-button.component.js

@@ -46,6 +46,7 @@ const SplitButton = ({
   const locale = (0, _useLocale.default)();
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
+  const mainButtonRef = (0, _react.useRef)(null);
   const toggleButton = (0, _react.useRef)(null);
   const {
     showAdditionalButtons,
@@ -56,25 +57,36 @@ const SplitButton = ({
     wrapperProps,
     contextValue
   } = (0, _useChildButtons.default)(toggleButton, CONTENT_WIDTH_RATIO);
+  const handleMainClick = ev => {
+    // ensure button is focused when clicked (Safari)
+    mainButtonRef.current?.focus();
+    if (onClick) {
+      onClick(ev);
+    }
+  };
   const mainButtonProps = {
-    onMouseEnter: hideButtons,
     onFocus: hideButtons,
     onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
     iconType,
-    onClick: onClick,
+    onClick: handleMainClick,
     size,
     subtext,
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
+  const handleToggleClick = () => {
+    // ensure button is focused when clicked (Safari)
+    toggleButton.current?.focus();
+    showButtons();
+  };
   const toggleButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
-    onClick: showButtons,
+    onClick: handleToggleClick,
     buttonType,
     size
   };
@@ -96,7 +108,8 @@ const SplitButton = ({
     return [/*#__PURE__*/_react.default.createElement(_button.default, _extends({
       "data-element": "main-button",
       key: "main-button",
-      id: buttonLabelId.current
+      id: buttonLabelId.current,
+      ref: mainButtonRef
     }, mainButtonProps), text), /*#__PURE__*/_react.default.createElement(_splitButtonToggle.default, _extends({
       "aria-haspopup": "true",
       "aria-expanded": showAdditionalButtons,

package/lib/components/text-editor/text-editor.component.js

@@ -267,7 +267,8 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
       editMode: true
     }
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorWrapper, _extends({
-    ref: wrapper
+    ref: wrapper,
+    "data-role": "text-editor-wrapper"
   }, rest), /*#__PURE__*/_react.default.createElement(_labelWrapper.default, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
@@ -286,7 +287,8 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
     warning: !!(!error && warning)
   })), /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorOutline, {
     isFocused: isFocused,
-    hasError: !!error
+    hasError: !!error,
+    "data-role": "editor-outline"
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorContainer, {
     "data-component": "text-editor-container",
     hasError: !!error,

package/lib/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -13,7 +13,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const buttonNode = (0, _react.useRef)(null);
   const childrenContainer = (0, _react.useRef)(null);
-  const focusFirstChildButtonOnOpen = (0, _react.useRef)(false);
   const hideButtons = (0, _react.useCallback)(() => {
     setShowAdditionalButtons(false);
   }, []);
@@ -26,20 +25,16 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = (0, _react.useCallback)(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
-  (0, _react.useEffect)(() => {
-    const firstChild = getButtonChildren()?.[0];
-    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
-      focusFirstChildButtonOnOpen.current = false;
-      firstChild.focus();
-    }
-  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
+    const isToggleKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev) || showAdditionalButtons && _events.default.isTabKey(ev);
+    if (isToggleKey) {
       ev.preventDefault();
       if (!showAdditionalButtons) {
         showButtons();
       }
-      focusFirstChildButtonOnOpen.current = true;
+      setTimeout(() => {
+        getButtonChildren()?.[0]?.focus();
+      });
     }
   };
   const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/package.json

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

package/esm/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export default rootTagTest;

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,6 +0,0 @@
-const rootTagTest = (rootNode, comp, elem, role) => {
-  expect(rootNode.prop("data-component")).toEqual(comp);
-  expect(rootNode.prop("data-element")).toEqual(elem);
-  expect(rootNode.prop("data-role")).toEqual(role);
-};
-export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./tags-specs";

package/lib/__internal__/utils/helpers/tags/tags-specs/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _tagsSpecs.default;
-  }
-});
-var _tagsSpecs = _interopRequireDefault(require("./tags-specs"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/__internal__/utils/helpers/tags/tags-specs/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../../../esm/__internal__/utils/helpers/tags/tags-specs/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper, ShallowWrapper } from "enzyme";
-declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-export default rootTagTest;

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const rootTagTest = (rootNode, comp, elem, role) => {
-  expect(rootNode.prop("data-component")).toEqual(comp);
-  expect(rootNode.prop("data-element")).toEqual(elem);
-  expect(rootNode.prop("data-role")).toEqual(role);
-};
-var _default = exports.default = rootTagTest;