carbon-react 134.0.4 → 134.1.1

package/esm/__internal__/input/input.component.js

@@ -3,6 +3,7 @@ import React, { useEffect, useContext, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import StyledInput from "./input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+import { SelectTextboxContext } from "../../components/select/select-textbox/select-textbox-context";
 function selectTextOnFocus(input) {
   // setTimeout is required so the dom has a chance to place the cursor in the input
   setTimeout(() => {
@@ -48,6 +49,9 @@ const Input = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const context = useContext(InputContext);
   const groupContext = useContext(InputGroupContext);
+  const {
+    isInputInSelect
+  } = useContext(SelectTextboxContext);
   const deferredTimeout = useRef(null);
   let input = useRef(null);
   if (ref && "current" in ref) {
@@ -129,6 +133,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    isInputInSelect: isInputInSelect,
     "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,

package/esm/__internal__/input/input.style.d.ts

@@ -1,3 +1,5 @@
 import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius">, never>;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius"> & {
+    isInputInSelect: boolean;
+}, never>;
 export default StyledInput;

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

@@ -1,5 +1,8 @@
 import styled, { css } from "styled-components";
 const StyledInput = styled.input`
+  ${({
+  isInputInSelect
+}) => isInputInSelect && "text-overflow: ellipsis"};
   background: transparent;
   border: none;
   color: var(--colorsUtilityYin090);

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

@@ -1,7 +1,8 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: Required<ButtonProps>["buttonType"];
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -28,7 +28,7 @@ function stylingForIconOnly(size) {
 function stylingForType({
   iconOnly,
   disabled,
-  buttonType = "secondary",
+  buttonType,
   size,
   destructive
 }) {

package/esm/components/multi-action-button/multi-action-button.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, { useRef } from "react";
 import PropTypes from "prop-types";
+import { flip, offset } from "@floating-ui/dom";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
@@ -28,7 +29,6 @@ export const MultiActionButton = ({
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue
@@ -50,14 +50,14 @@ export const MultiActionButton = ({
     buttonType,
     size,
     subtext,
-    ...(!disabled && {
-      onMouseEnter: showButtons
-    }),
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-end",
-    reference: buttonNode
+    reference: buttonNode,
+    middleware: [offset(6), flip({
+      fallbackStrategy: "initialPlacement"
+    })]
   }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, _extends({}, wrapperProps, {
     align: align
   }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
@@ -65,7 +65,6 @@ export const MultiActionButton = ({
   }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
-    onMouseLeave: hideButtonsIfTriggerNotFocused,
     ref: buttonNode,
     "data-component": "multi-action-button",
     "data-element": dataElement,

package/esm/components/pager/pager.style.js

@@ -3,7 +3,7 @@ import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import StyledSelectText from "../select/__internal__/select-text/select-text.style";
+import { StyledSelectText } from "../select/__internal__/select-text/select-text.style";
 import Link from "../link";
 const StyledSelectContainer = styled.div`
   height: 26px;

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

@@ -56,13 +56,15 @@ export const renderClose = ({
 })), /*#__PURE__*/React.createElement(Icon, {
   type: "close"
 }));
-const popoverMiddleware = [offset(({
-  rects
-}) => ({
-  mainAxis: -rects.reference.height
-})), flip({
-  fallbackStrategy: "initialPlacement"
-})];
+function getPopoverMiddleware(shouldCoverButton) {
+  return [offset(shouldCoverButton ? ({
+    rects
+  }) => ({
+    mainAxis: -rects.reference.height
+  }) : 6), flip({
+    fallbackStrategy: "initialPlacement"
+  })];
+}
 export const PopoverContainer = ({
   children,
   title,
@@ -192,14 +194,12 @@ export const PopoverContainer = ({
     nodeRef: popoverContentNodeRef,
     onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
     onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, {
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }, {
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
+    middleware: getPopoverMiddleware(shouldCoverButton),
     childRefOverride: popoverContentNodeRef
-  }), childrenToRender(state))));
+  }, childrenToRender(state))));
 };
 export default PopoverContainer;

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import StyledSelectText from "./select-text.style";
+import { StyledSelectText, StyledSelectTextChildrenWrapper } from "./select-text.style";
 const SelectText = ({
   disabled,
   formattedValue = "",
@@ -22,6 +22,6 @@ const SelectText = ({
     readOnly: readOnly,
     transparent: transparent,
     size: size
-  }, hasPlaceholder ? placeholder : formattedValue);
+  }, /*#__PURE__*/React.createElement(StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
 };
 export default SelectText;

package/esm/components/select/__internal__/select-text/select-text.style.d.ts

@@ -4,4 +4,5 @@ interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "read
     size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
-export default StyledSelectText;
+declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/esm/components/select/__internal__/select-text/select-text.style.js

@@ -13,10 +13,7 @@ const StyledSelectText = styled.span`
     flex-grow: 1;
     font-size: 14px;
     height: auto;
-    overflow: hidden;
     outline: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     width: 30px;
     z-index: 1;
     padding-left: ${sizes[size].horizontalPadding};
@@ -46,4 +43,10 @@ const StyledSelectText = styled.span`
     `}
   `}
 `;
-export default StyledSelectText;
+const StyledSelectTextChildrenWrapper = styled.span`
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/esm/components/select/select-textbox/select-textbox-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type SelectTextboxContextProps = {
+    isInputInSelect?: boolean;
+};
+export declare const SelectTextboxContext: React.Context<SelectTextboxContextProps>;

package/esm/components/select/select-textbox/select-textbox-context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const SelectTextboxContext = /*#__PURE__*/React.createContext({});

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

@@ -6,6 +6,7 @@ import useFloating from "../../../hooks/__internal__/useFloating";
 import Textbox from "../../textbox";
 import SelectText from "../__internal__/select-text";
 import useLocale from "../../../hooks/__internal__/useLocale";
+import { SelectTextboxContext } from "./select-textbox-context";
 const floatingMiddleware = [offset(({
   rects
 }) => ({
@@ -100,7 +101,11 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     role: readOnly ? undefined : "combobox"
   };
   const hasStringValue = typeof selectedValue === "string" || Array.isArray(selectedValue) && typeof selectedValue[0] === "string";
-  return /*#__PURE__*/React.createElement(Textbox, _extends({
+  return /*#__PURE__*/React.createElement(SelectTextboxContext.Provider, {
+    value: {
+      isInputInSelect: true
+    }
+  }, /*#__PURE__*/React.createElement(Textbox, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
     inputIcon: "dropdown",
@@ -118,7 +123,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     size: size
-  }, restProps)));
+  }, restProps))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -4,7 +4,8 @@ declare type StyledSplitButtonToggleProps = {
     displayed: boolean;
     size: "small" | "medium" | "large";
 };
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: import("../button/button.component").ButtonTypes;
 } & StyledSplitButtonToggleProps, never>;
 export default StyledSplitButtonToggle;

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

@@ -64,7 +64,8 @@ css`
     }
 
     &:focus {
-      background-color: var(--colorsActionMajor500);
+      background-color: var(--colorsActionMajor700);
+      border-color: var(--colorsActionMajor700);
 
       &,
       ${StyledIcon} {

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

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components";
+import { flip, offset } from "@floating-ui/dom";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
 import Button from "../button";
@@ -41,15 +42,14 @@ export const SplitButton = ({
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue
   } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
   const mainButtonProps = {
-    onMouseEnter: hideButtonsIfTriggerNotFocused,
-    onFocus: hideButtonsIfTriggerNotFocused,
-    onTouchStart: hideButtonsIfTriggerNotFocused,
+    onMouseEnter: hideButtons,
+    onFocus: hideButtons,
+    onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
@@ -64,12 +64,9 @@ export const SplitButton = ({
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
+    onClick: showButtons,
     buttonType,
-    size,
-    ...(!disabled && {
-      onMouseEnter: showButtons,
-      onClick: showButtons
-    })
+    size
   };
   function componentTags() {
     return {
@@ -109,7 +106,10 @@ export const SplitButton = ({
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
       placement: "bottom-end",
-      reference: buttonNode
+      reference: buttonNode,
+      middleware: [offset(6), flip({
+        fallbackStrategy: "initialPlacement"
+      })]
     }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
       align: align
     }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
@@ -119,7 +119,6 @@ export const SplitButton = ({
   const handleClick = useClickAwayListener(hideButtons);
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
-    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: buttonNode
   }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());

package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -4,7 +4,6 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     showButtons: () => void;
     hideButtons: () => void;
     buttonNode: import("react").RefObject<HTMLDivElement>;
-    hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
         "data-element": string;

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

@@ -41,10 +41,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     hideButtons();
     toggleButtonRef.current?.focus();
   };
-  const hideButtonsIfTriggerNotFocused = useCallback(() => {
-    if (toggleButtonRef.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, [toggleButtonRef]);
   const wrapperProps = {
     "data-element": "additional-buttons",
     role: "list",
@@ -61,7 +57,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue

package/lib/__internal__/input/input.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _input = _interopRequireDefault(require("./input.style"));
 var _inputBehaviour = require("../input-behaviour");
+var _selectTextboxContext = require("../../components/select/select-textbox/select-textbox-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); }
 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 && {}.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; }
@@ -57,6 +58,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const context = (0, _react.useContext)(_inputBehaviour.InputContext);
   const groupContext = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
+  const {
+    isInputInSelect
+  } = (0, _react.useContext)(_selectTextboxContext.SelectTextboxContext);
   const deferredTimeout = (0, _react.useRef)(null);
   let input = (0, _react.useRef)(null);
   if (ref && "current" in ref) {
@@ -138,6 +142,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/_react.default.createElement(_input.default, _extends({}, rest, {
+    isInputInSelect: isInputInSelect,
     "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,

package/lib/__internal__/input/input.style.d.ts

@@ -1,3 +1,5 @@
 import { CommonInputProps } from "./input.component";
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius">, never>;
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "inputBorderRadius"> & {
+    isInputInSelect: boolean;
+}, never>;
 export default StyledInput;

package/lib/__internal__/input/input.style.js

@@ -8,6 +8,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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 && {}.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; }
 const StyledInput = _styledComponents.default.input`
+  ${({
+  isInputInSelect
+}) => isInputInSelect && "text-overflow: ellipsis"};
   background: transparent;
   border: none;
   color: var(--colorsUtilityYin090);

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

@@ -1,7 +1,8 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: Required<ButtonProps>["buttonType"];
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/button/button.style.js

@@ -37,7 +37,7 @@ function stylingForIconOnly(size) {
 function stylingForType({
   iconOnly,
   disabled,
-  buttonType = "secondary",
+  buttonType,
   size,
   destructive
 }) {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.MultiActionButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dom = require("@floating-ui/dom");
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 var _multiActionButton = require("./multi-action-button.style");
@@ -37,7 +38,6 @@ const MultiActionButton = ({
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue
@@ -59,14 +59,14 @@ const MultiActionButton = ({
     buttonType,
     size,
     subtext,
-    ...(!disabled && {
-      onMouseEnter: showButtons
-    }),
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-end",
-    reference: buttonNode
+    reference: buttonNode,
+    middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
+      fallbackStrategy: "initialPlacement"
+    })]
   }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, _extends({}, wrapperProps, {
     align: align
   }), /*#__PURE__*/_react.default.createElement(_splitButton.default.Provider, {
@@ -74,7 +74,6 @@ const MultiActionButton = ({
   }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
-    onMouseLeave: hideButtonsIfTriggerNotFocused,
     ref: buttonNode,
     "data-component": "multi-action-button",
     "data-element": dataElement,

package/lib/components/pager/pager.style.js

@@ -9,7 +9,7 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
-var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
+var _selectText = require("../select/__internal__/select-text/select-text.style");
 var _link = _interopRequireDefault(require("../link"));
 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); }
@@ -51,7 +51,7 @@ const StyledPagerSizeOptions = exports.StyledPagerSizeOptions = _styledComponent
     min-width: 10px;
     margin: 0px;
 
-    ${_selectText.default} {
+    ${_selectText.StyledSelectText} {
       font-size: 14px;
       padding-right: 0px;
       padding-left: 8px;

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

@@ -67,13 +67,15 @@ const renderClose = ({
   type: "close"
 }));
 exports.renderClose = renderClose;
-const popoverMiddleware = [(0, _dom.offset)(({
-  rects
-}) => ({
-  mainAxis: -rects.reference.height
-})), (0, _dom.flip)({
-  fallbackStrategy: "initialPlacement"
-})];
+function getPopoverMiddleware(shouldCoverButton) {
+  return [(0, _dom.offset)(shouldCoverButton ? ({
+    rects
+  }) => ({
+    mainAxis: -rects.reference.height
+  }) : 6), (0, _dom.flip)({
+    fallbackStrategy: "initialPlacement"
+  })];
+}
 const PopoverContainer = ({
   children,
   title,
@@ -203,15 +205,13 @@ const PopoverContainer = ({
     nodeRef: popoverContentNodeRef,
     onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
     onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }, {
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
+    middleware: getPopoverMiddleware(shouldCoverButton),
     childRefOverride: popoverContentNodeRef
-  }), childrenToRender(state))));
+  }, childrenToRender(state))));
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

package/lib/components/select/__internal__/select-text/select-text.component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _selectText = _interopRequireDefault(require("./select-text.style"));
+var _selectText = require("./select-text.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const SelectText = ({
   disabled,
@@ -19,7 +19,7 @@ const SelectText = ({
   size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-  return /*#__PURE__*/_react.default.createElement(_selectText.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectText, {
     "aria-hidden": true,
     "data-element": "select-text",
     disabled: disabled,
@@ -29,6 +29,6 @@ const SelectText = ({
     readOnly: readOnly,
     transparent: transparent,
     size: size
-  }, hasPlaceholder ? placeholder : formattedValue);
+  }, /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
 };
 var _default = exports.default = SelectText;

package/lib/components/select/__internal__/select-text/select-text.style.d.ts

@@ -4,4 +4,5 @@ interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "read
     size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
-export default StyledSelectText;
+declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/lib/components/select/__internal__/select-text/select-text.style.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledSelectTextChildrenWrapper = exports.StyledSelectText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _inputSizes = _interopRequireDefault(require("../../../../__internal__/input/input-sizes.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 && {}.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; }
-const StyledSelectText = _styledComponents.default.span`
+const StyledSelectText = exports.StyledSelectText = _styledComponents.default.span`
   ${({
   disabled,
   hasPlaceholder,
@@ -22,10 +22,7 @@ const StyledSelectText = _styledComponents.default.span`
     flex-grow: 1;
     font-size: 14px;
     height: auto;
-    overflow: hidden;
     outline: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     width: 30px;
     z-index: 1;
     padding-left: ${_inputSizes.default[size].horizontalPadding};
@@ -55,4 +52,9 @@ const StyledSelectText = _styledComponents.default.span`
     `}
   `}
 `;
-var _default = exports.default = StyledSelectText;
+const StyledSelectTextChildrenWrapper = exports.StyledSelectTextChildrenWrapper = _styledComponents.default.span`
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/lib/components/select/select-textbox/select-textbox-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type SelectTextboxContextProps = {
+    isInputInSelect?: boolean;
+};
+export declare const SelectTextboxContext: React.Context<SelectTextboxContextProps>;

package/lib/components/select/select-textbox/select-textbox-context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectTextboxContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SelectTextboxContext = exports.SelectTextboxContext = /*#__PURE__*/_react.default.createContext({});

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

@@ -11,6 +11,7 @@ var _useFloating = _interopRequireDefault(require("../../../hooks/__internal__/u
 var _textbox = _interopRequireDefault(require("../../textbox"));
 var _selectText = _interopRequireDefault(require("../__internal__/select-text"));
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _selectTextboxContext = require("./select-textbox-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); }
 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 && {}.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; }
@@ -109,7 +110,11 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     role: readOnly ? undefined : "combobox"
   };
   const hasStringValue = typeof selectedValue === "string" || Array.isArray(selectedValue) && typeof selectedValue[0] === "string";
-  return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_selectTextboxContext.SelectTextboxContext.Provider, {
+    value: {
+      isInputInSelect: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
     inputIcon: "dropdown",
@@ -127,7 +132,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     size: size
-  }, restProps)));
+  }, restProps))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {

package/lib/components/split-button/split-button-toggle.style.d.ts

@@ -4,7 +4,8 @@ declare type StyledSplitButtonToggleProps = {
     displayed: boolean;
     size: "small" | "medium" | "large";
 };
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: import("../button/button.component").ButtonTypes;
 } & StyledSplitButtonToggleProps, never>;
 export default StyledSplitButtonToggle;

package/lib/components/split-button/split-button-toggle.style.js

@@ -73,7 +73,8 @@ theme.focusRedesignOptOut && /* istanbul ignore next */
     }
 
     &:focus {
-      background-color: var(--colorsActionMajor500);
+      background-color: var(--colorsActionMajor700);
+      border-color: var(--colorsActionMajor700);
 
       &,
       ${_icon.default} {

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

@@ -7,6 +7,7 @@ exports.default = exports.SplitButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = require("styled-components");
+var _dom = require("@floating-ui/dom");
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _button = _interopRequireDefault(require("../button"));
@@ -50,15 +51,14 @@ const SplitButton = ({
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue
   } = (0, _useChildButtons.default)(toggleButton, CONTENT_WIDTH_RATIO);
   const mainButtonProps = {
-    onMouseEnter: hideButtonsIfTriggerNotFocused,
-    onFocus: hideButtonsIfTriggerNotFocused,
-    onTouchStart: hideButtonsIfTriggerNotFocused,
+    onMouseEnter: hideButtons,
+    onFocus: hideButtons,
+    onTouchStart: hideButtons,
     iconPosition,
     buttonType,
     disabled,
@@ -73,12 +73,9 @@ const SplitButton = ({
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleToggleButtonKeyDown,
+    onClick: showButtons,
     buttonType,
-    size,
-    ...(!disabled && {
-      onMouseEnter: showButtons,
-      onClick: showButtons
-    })
+    size
   };
   function componentTags() {
     return {
@@ -118,7 +115,10 @@ const SplitButton = ({
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
       placement: "bottom-end",
-      reference: buttonNode
+      reference: buttonNode,
+      middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
+        fallbackStrategy: "initialPlacement"
+      })]
     }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, _extends({}, wrapperProps, {
       align: align
     }), /*#__PURE__*/_react.default.createElement(_splitButton2.default.Provider, {
@@ -128,7 +128,6 @@ const SplitButton = ({
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
-    onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: buttonNode
   }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());

package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -4,7 +4,6 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     showButtons: () => void;
     hideButtons: () => void;
     buttonNode: import("react").RefObject<HTMLDivElement>;
-    hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
         "data-element": string;

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

@@ -48,10 +48,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     hideButtons();
     toggleButtonRef.current?.focus();
   };
-  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
-    if (toggleButtonRef.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, [toggleButtonRef]);
   const wrapperProps = {
     "data-element": "additional-buttons",
     role: "list",
@@ -68,7 +64,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     showButtons,
     hideButtons,
     buttonNode,
-    hideButtonsIfTriggerNotFocused,
     handleToggleButtonKeyDown,
     wrapperProps,
     contextValue

package/package.json

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