carbon-react 125.11.0 → 125.12.0

package/README.md

@@ -1,6 +1,6 @@
 # Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml) [![Playwright](https://github.com/Sage/carbon/actions/workflows/playwright.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/playwright.yml)
 
-Carbon is a [React](https://facebook.github.io/react/) component library developed by Sage.
+Carbon is a [React](https://react.dev/) component library developed by Sage.
 
 ## Getting started
 
@@ -8,7 +8,7 @@ Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started
 
 ## Examples
 
-See the [storybook](https://carbon.sage.com/) for live examples.
+See our [docs](https://carbon.sage.com/) for live examples.
 
 ## Browser Support
 

package/esm/components/portal/portal.js

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
+import StyledPortalEntrance from "./portal.style";
 export const PortalContext = /*#__PURE__*/React.createContext({});
 const Portal = ({
   children,
@@ -63,7 +64,7 @@ const Portal = ({
     }
     return node;
   };
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(StyledPortalEntrance, {
     "data-portal-entrance": uniqueId
   }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children), getPortalContainer()));
 };

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

@@ -0,0 +1,2 @@
+declare const StyledPortalEntrance: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default StyledPortalEntrance;

package/esm/components/portal/portal.style.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+const StyledPortalEntrance = styled.span`
+  display: none;
+  height: 0;
+  width: 0;
+`;
+export default StyledPortalEntrance;

package/esm/components/select/option/option.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TagProps } from "__internal__/utils/helpers/tags";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
     /**
      * Unique identifier for the component.

package/esm/components/select/option/option.component.js

@@ -1,6 +1,7 @@
 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 } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOption from "./option.style";
 import SelectListContext from "../__internal__/select-list-context";
 const Option = /*#__PURE__*/React.forwardRef(({
@@ -18,6 +19,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
+  const internalIdRef = useRef(id || guid());
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
@@ -29,7 +31,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
       onSelect?.({
         text,
         value,
-        id
+        id: internalIdRef.current
       });
     } else {
       onSelect?.();
@@ -37,7 +39,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
     }
   }
   return /*#__PURE__*/React.createElement(StyledOption, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -1,16 +1,20 @@
 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 from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
 const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
   label,
   icon,
   style,
+  id,
   ...rest
 }, ref) => {
+  const internalIdRef = useRef(id || guid());
   return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
-    style: style
+    style: style,
+    id: internalIdRef.current
   }, rest, {
     ref: ref
   }), icon && /*#__PURE__*/React.createElement(Icon, {

package/esm/components/select/option-row/option-row.component.js

@@ -1,6 +1,7 @@
 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 } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
+import guid from "../../../__internal__/utils/helpers/guid";
 import StyledOptionRow from "./option-row.style";
 import SelectListContext from "../__internal__/select-list-context";
 const OptionRow = /*#__PURE__*/React.forwardRef(({
@@ -15,14 +16,15 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   style,
   ...rest
 }, ref) => {
+  const internalIdRef = useRef(id || guid());
   const handleClick = () => {
     if (disabled) {
       return;
     }
     onSelect?.({
-      id,
       text,
-      value
+      value,
+      id: internalIdRef.current
     });
   };
   const selectListContext = useContext(SelectListContext);
@@ -31,7 +33,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/esm/components/select/select-list/select-list.component.js

@@ -17,7 +17,6 @@ import ListActionButton from "../list-action-button";
 import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
 import Option from "../option";
-import guid from "../../../__internal__/utils/helpers/guid";
 import SelectListContext from "../__internal__/select-list-context";
 const TABLE_HEADER_HEIGHT = 48;
 const SCROLL_OPTIONS = {
@@ -92,16 +91,23 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
+  const getIndexOfMatch = useCallback(valueToMatch => {
+    return childrenList.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch);
+  }, [childrenList]);
 
   // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
   // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
   // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
-  if (items.length === 0 && currentOptionsListIndex !== -1) {
-    // only index property is required with the item not visible so the following type assertion, even though incorrect,
-    // should be OK
-    items.push({
-      index: currentOptionsListIndex
-    });
+  if (items.length === 0) {
+    const currentIndex = highlightedValue ? getIndexOfMatch(highlightedValue) : currentOptionsListIndex;
+    if (currentIndex > -1) {
+      // only index property is required with the item not visible so the following type assertion, even though incorrect,
+      // should be OK
+      items.push({
+        index: currentIndex
+      });
+    }
   }
   const listHeight = virtualizer.getTotalSize();
   useEffect(() => {
@@ -129,18 +135,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       selectionConfirmed: true
     });
   }, [onSelect]);
-  const childIdsRef = useRef(null);
-
-  // childIds should be stable except when children are added or removed - can't use useMemo
-  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
-  const setChildIds = () => {
-    childIdsRef.current = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child?.props.id || guid()) || /* istanbul ignore next */null;
-  };
-  if (childIdsRef.current?.length !== React.Children.count(children)) {
-    setChildIds();
-  }
-  const childIds = childIdsRef.current;
-  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
+  const childElementRefs = useRef(Array.from({
+    length: React.Children.count(children)
+  }));
   const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
   const {
     measureElement
@@ -166,7 +163,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds ? childIds[index] : /* istanbul ignore next */undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -175,8 +171,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       },
       "aria-setsize": isOption ? optionChildrenList.length : undefined,
       "aria-posinset": isOption ? optionChildIndex + 1 : undefined,
-      // needed to dynamically compute the size
-      ref: measureCallback,
+      ref: optionElement => {
+        // needed to dynamically compute the size
+        measureCallback(optionElement);
+        // add the DOM element to the array of refs
+        childElementRefs.current[index] = optionElement;
+      },
       "data-index": index
     };
     return /*#__PURE__*/React.cloneElement(child, newProps);
@@ -194,9 +194,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
-  const getIndexOfMatch = useCallback(valueToMatch => {
-    return childrenList.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch);
-  }, [childrenList]);
   const highlightNextItem = useCallback(key => {
     let currentIndex = currentOptionsListIndex;
     if (highlightedValue) {
@@ -215,10 +212,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      id: childElementRefs.current[nextIndex]?.id,
       selectionConfirmed: false
     });
-  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
+  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
@@ -262,7 +259,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         value
       } = currentOption.props;
       onSelect({
-        id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
+        id: childElementRefs.current[currentOptionsListIndex]?.id,
         text,
         value,
         selectionType: "enterKey",
@@ -272,7 +269,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleEscapeKey = useCallback(event => {
     if (event.key === "Escape") {
       onSelectListClose();

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -1,21 +1,17 @@
 import styled, { css } from "styled-components";
-import StyledIcon from "../../../../icon/icon.style";
 import { baseTheme } from "../../../../../style/themes";
 import addFocusStyling from "../../../../../style/utils/add-focus-styling";
 const StyledToolbarButton = styled.button.attrs({
   type: "button"
 })`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
   background-color: inherit;
-  border-radius: var(--borderRadius050);
+  border-radius: var(--borderRadius100);
   border: none;
   cursor: pointer;
-  width: 32px;
-  font-size: 14px;
-  height: 32px;
-
-  ${StyledIcon} {
-    width: auto;
-  }
 
   ${({
   isActive,
@@ -25,6 +21,7 @@ const StyledToolbarButton = styled.button.attrs({
     :active {
       z-index: 1;
       position: relative;
+
       ${theme.focusRedesignOptOut && /* istanbul ignore next */
 css`
         outline: 2px solid var(--colorsSemanticFocus500);
@@ -34,16 +31,14 @@ css`
       ${!theme.focusRedesignOptOut && css`
         ${addFocusStyling()}
       `}
-      border-radius: var(--borderRadius050);
     }
 
     :hover {
-      background-color: var(--colorsActionMinor200);
-      border-radius: var(--borderRadius050);
+      background-color: ${!isActive && "var(--colorsActionMinor200)"};
     }
 
     ${isActive && css`
-      background-color: var(--colorsActionMinor200);
+      background-color: var(--colorsActionMinor600);
     `}
   `}
 `;

package/esm/components/text-editor/__internal__/toolbar/toolbar.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { InlineStyleType, BlockType } from "../../types";
+import type { InlineStyleType, BlockType } from "../../types";
 export interface ToolbarProps {
     /** Used to override the active status of the inline controls */
     activeControls: Record<InlineStyleType | BlockType, boolean>;

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

@@ -97,6 +97,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Bold"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/React.createElement(Icon, {
+    color: activeControls[BOLD] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bold"
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     isVisible: activeTooltip === "Italic",
@@ -114,6 +115,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Italic"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/React.createElement(Icon, {
+    color: activeControls[ITALIC] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "italic"
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     isVisible: activeTooltip === "Bulleted List",
@@ -131,6 +133,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Bulleted List"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/React.createElement(Icon, {
+    color: activeControls[UNORDERED_LIST] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bullet_list_dotted"
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     isVisible: activeTooltip === "Numbered List",
@@ -148,6 +151,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Numbered List"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/React.createElement(Icon, {
+    color: activeControls[ORDERED_LIST] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bullet_list_numbers"
   })))), toolbarElements && /*#__PURE__*/React.createElement(StyledEditorActionControls, null, toolbarElements));
 };

package/esm/components/text-editor/__internal__/toolbar/toolbar.style.js

@@ -1,36 +1,28 @@
 import styled from "styled-components";
-import StyledButton from "../../../button/button.style";
 const StyledToolbar = styled.div`
-  padding: 8px;
-  display: flex;
-  justify-content: flex-start;
-  background: white;
-  flex-wrap: wrap;
-  font-size: 14px;
-  user-select: none;
-  order: 2;
+  display: inline-flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  gap: 8px;
+  padding: 12px;
+  height: fit-content;
+  width: 100%;
+  box-sizing: border-box;
   border: none;
   border-top: 1px solid var(--colorsUtilityMajor200);
   background-color: var(--colorsUtilityMajor025);
-  min-width: 290px;
+  user-select: none;
   z-index: 10;
 `;
 const StyledEditorStyleControls = styled.div`
-  display: inline-block;
-  text-align: left;
-  width: 50%;
-  min-width: 60px;
-  margin-left: -2px;
+  display: inline-flex;
+  gap: 8px;
 `;
 const StyledEditorActionControls = styled.div`
-  display: inline-block;
-  text-align: right;
-  width: 50%;
-  min-width: 60px;
-
-  ${StyledButton} {
-    width: 62px;
-    min-height: 33px;
-  }
+  flex-grow: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacing200);
 `;
 export { StyledToolbar, StyledEditorActionControls, StyledEditorStyleControls };

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

@@ -18,7 +18,6 @@ const StyledEditorContainer = styled.div`
 }) => css`
     border-radius: var(--borderRadius050);
     min-height: ${rows ? `${rows * lineHeight}` : `${hasPreview ? 125 : 220}`}px;
-    min-width: 320px;
     position: relative;
 
     div.DraftEditor-root {
@@ -65,7 +64,6 @@ const StyledEditorOutline = styled.div`
 }) => css`
     border-radius: var(--borderRadius050);
     outline: none;
-    min-width: 320px;
 
     ${isFocused && css`
       ${!theme.focusRedesignOptOut ? addFocusStyling() : `

package/lib/components/portal/portal.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
+var _portal = _interopRequireDefault(require("./portal.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -72,7 +73,7 @@ const Portal = ({
     }
     return node;
   };
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
     "data-portal-entrance": uniqueId
   }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));
 };

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

@@ -0,0 +1,2 @@
+declare const StyledPortalEntrance: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default StyledPortalEntrance;

package/lib/components/portal/portal.style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledPortalEntrance = _styledComponents.default.span`
+  display: none;
+  height: 0;
+  width: 0;
+`;
+var _default = exports.default = StyledPortalEntrance;

package/lib/components/select/option/option.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TagProps } from "__internal__/utils/helpers/tags";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
     /**
      * Unique identifier for the component.

package/lib/components/select/option/option.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _option = _interopRequireDefault(require("./option.style"));
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +28,7 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const selectListContext = (0, _react.useContext)(_selectListContext.default);
   let isSelected = selectListContext.currentOptionsListIndex === index;
+  const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
@@ -38,7 +40,7 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
       onSelect?.({
         text,
         value,
-        id
+        id: internalIdRef.current
       });
     } else {
       onSelect?.();
@@ -46,7 +48,7 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     }
   }
   return /*#__PURE__*/_react.default.createElement(_option.default, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/lib/components/select/option-group-header/option-group-header.component.js

@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _optionGroupHeader = _interopRequireDefault(require("./option-group-header.style"));
 var _icon = _interopRequireDefault(require("../../icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
   label,
   icon,
   style,
+  id,
   ...rest
 }, ref) => {
+  const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
   return /*#__PURE__*/_react.default.createElement(_optionGroupHeader.default, _extends({
-    style: style
+    style: style,
+    id: internalIdRef.current
   }, rest, {
     ref: ref
   }), icon && /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/select/option-row/option-row.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _optionRow = _interopRequireDefault(require("./option-row.style"));
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,14 +25,15 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   style,
   ...rest
 }, ref) => {
+  const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
   const handleClick = () => {
     if (disabled) {
       return;
     }
     onSelect?.({
-      id,
       text,
-      value
+      value,
+      id: internalIdRef.current
     });
   };
   const selectListContext = (0, _react.useContext)(_selectListContext.default);
@@ -40,7 +42,7 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   return /*#__PURE__*/_react.default.createElement(_optionRow.default, _extends({
-    id: id,
+    id: internalIdRef.current,
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,

package/lib/components/select/select-list/select-list.component.js

@@ -22,7 +22,6 @@ var _listActionButton = _interopRequireDefault(require("../list-action-button"))
 var _selectListContainer = _interopRequireDefault(require("./select-list-container.style"));
 var _loader = _interopRequireDefault(require("../../loader"));
 var _option = _interopRequireDefault(require("../option"));
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -101,16 +100,23 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
+  const getIndexOfMatch = (0, _react.useCallback)(valueToMatch => {
+    return childrenList.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.value === valueToMatch);
+  }, [childrenList]);
 
   // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
   // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
   // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
-  if (items.length === 0 && currentOptionsListIndex !== -1) {
-    // only index property is required with the item not visible so the following type assertion, even though incorrect,
-    // should be OK
-    items.push({
-      index: currentOptionsListIndex
-    });
+  if (items.length === 0) {
+    const currentIndex = highlightedValue ? getIndexOfMatch(highlightedValue) : currentOptionsListIndex;
+    if (currentIndex > -1) {
+      // only index property is required with the item not visible so the following type assertion, even though incorrect,
+      // should be OK
+      items.push({
+        index: currentIndex
+      });
+    }
   }
   const listHeight = virtualizer.getTotalSize();
   (0, _react.useEffect)(() => {
@@ -138,18 +144,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       selectionConfirmed: true
     });
   }, [onSelect]);
-  const childIdsRef = (0, _react.useRef)(null);
-
-  // childIds should be stable except when children are added or removed - can't use useMemo
-  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
-  const setChildIds = () => {
-    childIdsRef.current = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child?.props.id || (0, _guid.default)()) || /* istanbul ignore next */null;
-  };
-  if (childIdsRef.current?.length !== _react.default.Children.count(children)) {
-    setChildIds();
-  }
-  const childIds = childIdsRef.current;
-  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
+  const childElementRefs = (0, _react.useRef)(Array.from({
+    length: _react.default.Children.count(children)
+  }));
   const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default)), [childrenList]);
   const {
     measureElement
@@ -175,7 +172,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds ? childIds[index] : /* istanbul ignore next */undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -184,8 +180,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       },
       "aria-setsize": isOption ? optionChildrenList.length : undefined,
       "aria-posinset": isOption ? optionChildIndex + 1 : undefined,
-      // needed to dynamically compute the size
-      ref: measureCallback,
+      ref: optionElement => {
+        // needed to dynamically compute the size
+        measureCallback(optionElement);
+        // add the DOM element to the array of refs
+        childElementRefs.current[index] = optionElement;
+      },
       "data-index": index
     };
     return /*#__PURE__*/_react.default.cloneElement(child, newProps);
@@ -203,9 +203,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
-  const getIndexOfMatch = (0, _react.useCallback)(valueToMatch => {
-    return childrenList.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.value === valueToMatch);
-  }, [childrenList]);
   const highlightNextItem = (0, _react.useCallback)(key => {
     let currentIndex = currentOptionsListIndex;
     if (highlightedValue) {
@@ -224,10 +221,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      id: childElementRefs.current[nextIndex]?.id,
       selectionConfirmed: false
     });
-  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
+  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
@@ -271,7 +268,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         value
       } = currentOption.props;
       onSelect({
-        id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
+        id: childElementRefs.current[currentOptionsListIndex]?.id,
         text,
         value,
         selectionType: "enterKey",
@@ -281,7 +278,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen, childIds]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleEscapeKey = (0, _react.useCallback)(event => {
     if (event.key === "Escape") {
       onSelectListClose();

package/lib/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _icon = _interopRequireDefault(require("../../../../icon/icon.style"));
 var _themes = require("../../../../../style/themes");
 var _addFocusStyling = _interopRequireDefault(require("../../../../../style/utils/add-focus-styling"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,17 +13,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledToolbarButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
   background-color: inherit;
-  border-radius: var(--borderRadius050);
+  border-radius: var(--borderRadius100);
   border: none;
   cursor: pointer;
-  width: 32px;
-  font-size: 14px;
-  height: 32px;
-
-  ${_icon.default} {
-    width: auto;
-  }
 
   ${({
   isActive,
@@ -34,6 +30,7 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
     :active {
       z-index: 1;
       position: relative;
+
       ${theme.focusRedesignOptOut && /* istanbul ignore next */
 (0, _styledComponents.css)`
         outline: 2px solid var(--colorsSemanticFocus500);
@@ -43,16 +40,14 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
       ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
         ${(0, _addFocusStyling.default)()}
       `}
-      border-radius: var(--borderRadius050);
     }
 
     :hover {
-      background-color: var(--colorsActionMinor200);
-      border-radius: var(--borderRadius050);
+      background-color: ${!isActive && "var(--colorsActionMinor200)"};
     }
 
     ${isActive && (0, _styledComponents.css)`
-      background-color: var(--colorsActionMinor200);
+      background-color: var(--colorsActionMinor600);
     `}
   `}
 `;

package/lib/components/text-editor/__internal__/toolbar/toolbar.component.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { InlineStyleType, BlockType } from "../../types";
+import type { InlineStyleType, BlockType } from "../../types";
 export interface ToolbarProps {
     /** Used to override the active status of the inline controls */
     activeControls: Record<InlineStyleType | BlockType, boolean>;

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

@@ -106,6 +106,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Bold"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    color: activeControls[_types.BOLD] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bold"
   }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     isVisible: activeTooltip === "Italic",
@@ -123,6 +124,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Italic"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    color: activeControls[_types.ITALIC] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "italic"
   }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     isVisible: activeTooltip === "Bulleted List",
@@ -140,6 +142,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Bulleted List"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    color: activeControls[_types.UNORDERED_LIST] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bullet_list_dotted"
   }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     isVisible: activeTooltip === "Numbered List",
@@ -157,6 +160,7 @@ const Toolbar = ({
     onFocus: () => setActiveTooltip("Numbered List"),
     onBlur: () => setActiveTooltip("")
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    color: activeControls[_types.ORDERED_LIST] ? "var(--colorsActionMinorYang100)" : undefined,
     type: "bullet_list_numbers"
   })))), toolbarElements && /*#__PURE__*/_react.default.createElement(_toolbar.StyledEditorActionControls, null, toolbarElements));
 };

package/lib/components/text-editor/__internal__/toolbar/toolbar.style.js

@@ -5,38 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledToolbar = exports.StyledEditorStyleControls = exports.StyledEditorActionControls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _button = _interopRequireDefault(require("../../../button/button.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StyledToolbar = exports.StyledToolbar = _styledComponents.default.div`
-  padding: 8px;
-  display: flex;
-  justify-content: flex-start;
-  background: white;
-  flex-wrap: wrap;
-  font-size: 14px;
-  user-select: none;
-  order: 2;
+  display: inline-flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  gap: 8px;
+  padding: 12px;
+  height: fit-content;
+  width: 100%;
+  box-sizing: border-box;
   border: none;
   border-top: 1px solid var(--colorsUtilityMajor200);
   background-color: var(--colorsUtilityMajor025);
-  min-width: 290px;
+  user-select: none;
   z-index: 10;
 `;
 const StyledEditorStyleControls = exports.StyledEditorStyleControls = _styledComponents.default.div`
-  display: inline-block;
-  text-align: left;
-  width: 50%;
-  min-width: 60px;
-  margin-left: -2px;
+  display: inline-flex;
+  gap: 8px;
 `;
 const StyledEditorActionControls = exports.StyledEditorActionControls = _styledComponents.default.div`
-  display: inline-block;
-  text-align: right;
-  width: 50%;
-  min-width: 60px;
-
-  ${_button.default} {
-    width: 62px;
-    min-height: 33px;
-  }
+  flex-grow: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacing200);
 `;

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

@@ -27,7 +27,6 @@ const StyledEditorContainer = exports.StyledEditorContainer = _styledComponents.
 }) => (0, _styledComponents.css)`
     border-radius: var(--borderRadius050);
     min-height: ${rows ? `${rows * lineHeight}` : `${hasPreview ? 125 : 220}`}px;
-    min-width: 320px;
     position: relative;
 
     div.DraftEditor-root {
@@ -74,7 +73,6 @@ const StyledEditorOutline = exports.StyledEditorOutline = _styledComponents.defa
 }) => (0, _styledComponents.css)`
     border-radius: var(--borderRadius050);
     outline: none;
-    min-width: 320px;
 
     ${isFocused && (0, _styledComponents.css)`
       ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : `

package/package.json

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