carbon-react 134.0.3 → 134.1.0

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/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/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/components/typography/typography.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */

package/esm/components/typography/typography.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
-const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+export const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
   variant = "p",

package/esm/components/typography/typography.style.js

@@ -168,7 +168,7 @@ const StyledTypography = styled.span.attrs(({
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
     text-align: ${textAlign};
-    text-overflow: ${truncate ? "ellipsis" : textOverflow};
+    text-overflow: ${textOverflow || truncate && "ellipsis"};
     ${truncate && css`
       overflow: hidden;
     `};

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/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/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/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/components/typography/typography.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */

package/lib/components/typography/typography.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Typography = void 0;
+exports.default = exports.VARIANT_TYPES = exports.Typography = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
@@ -11,7 +11,7 @@ var _utils = require("../../style/utils");
 var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const VARIANT_TYPES = exports.VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 const Typography = ({
   "data-component": dataComponent,
   variant = "p",

package/lib/components/typography/typography.style.js

@@ -177,7 +177,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
     text-align: ${textAlign};
-    text-overflow: ${truncate ? "ellipsis" : textOverflow};
+    text-overflow: ${textOverflow || truncate && "ellipsis"};
     ${truncate && (0, _styledComponents.css)`
       overflow: hidden;
     `};

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.3",
+  "version": "134.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",