carbon-react 134.0.4 → 134.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/esm/components/multi-action-button/multi-action-button.component.js +5 -6
  2. package/esm/components/popover-container/popover-container.component.js +13 -13
  3. package/esm/components/split-button/split-button-toggle.style.js +2 -1
  4. package/esm/components/split-button/split-button.component.js +10 -11
  5. package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts +0 -1
  6. package/esm/hooks/__internal__/useChildButtons/useChildButtons.js +0 -5
  7. package/lib/components/multi-action-button/multi-action-button.component.js +5 -6
  8. package/lib/components/popover-container/popover-container.component.js +13 -13
  9. package/lib/components/split-button/split-button-toggle.style.js +2 -1
  10. package/lib/components/split-button/split-button.component.js +10 -11
  11. package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts +0 -1
  12. package/lib/hooks/__internal__/useChildButtons/useChildButtons.js +0 -5
  13. package/package.json +1 -1
package/esm/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -1,6 +1,7 @@
1
1
  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); }
2
2
  import React, { useRef } from "react";
3
3
  import PropTypes from "prop-types";
4
+ import { flip, offset } from "@floating-ui/dom";
4
5
  import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
5
6
  import SplitButtonContext from "../split-button/__internal__/split-button.context";
6
7
  import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
@@ -28,7 +29,6 @@ export const MultiActionButton = ({
28
29
  showButtons,
29
30
  hideButtons,
30
31
  buttonNode,
31
- hideButtonsIfTriggerNotFocused,
32
32
  handleToggleButtonKeyDown,
33
33
  wrapperProps,
34
34
  contextValue
@@ -50,14 +50,14 @@ export const MultiActionButton = ({
50
50
  buttonType,
51
51
  size,
52
52
  subtext,
53
- ...(!disabled && {
54
- onMouseEnter: showButtons
55
- }),
56
53
  ...filterOutStyledSystemSpacingProps(rest)
57
54
  };
58
55
  const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
59
56
  placement: "bottom-end",
60
- reference: buttonNode
57
+ reference: buttonNode,
58
+ middleware: [offset(6), flip({
59
+ fallbackStrategy: "initialPlacement"
60
+ })]
61
61
  }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, _extends({}, wrapperProps, {
62
62
  align: align
63
63
  }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
@@ -65,7 +65,6 @@ export const MultiActionButton = ({
65
65
  }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
66
66
  const marginProps = filterStyledSystemMarginProps(rest);
67
67
  return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
68
- onMouseLeave: hideButtonsIfTriggerNotFocused,
69
68
  ref: buttonNode,
70
69
  "data-component": "multi-action-button",
71
70
  "data-element": dataElement,
package/esm/components/popover-container/popover-container.component.js CHANGED
@@ -56,13 +56,15 @@ export const renderClose = ({
56
56
  })), /*#__PURE__*/React.createElement(Icon, {
57
57
  type: "close"
58
58
  }));
59
- const popoverMiddleware = [offset(({
60
- rects
61
- }) => ({
62
- mainAxis: -rects.reference.height
63
- })), flip({
64
- fallbackStrategy: "initialPlacement"
65
- })];
59
+ function getPopoverMiddleware(shouldCoverButton) {
60
+ return [offset(shouldCoverButton ? ({
61
+ rects
62
+ }) => ({
63
+ mainAxis: -rects.reference.height
64
+ }) : 6), flip({
65
+ fallbackStrategy: "initialPlacement"
66
+ })];
67
+ }
66
68
  export const PopoverContainer = ({
67
69
  children,
68
70
  title,
@@ -192,14 +194,12 @@ export const PopoverContainer = ({
192
194
  nodeRef: popoverContentNodeRef,
193
195
  onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
194
196
  onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
195
- }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
197
+ }, state => isOpen && /*#__PURE__*/React.createElement(Popover, {
196
198
  reference: popoverReference,
197
199
  placement: position === "right" ? "bottom-start" : "bottom-end",
198
- popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
199
- }, shouldCoverButton && {
200
- middleware: popoverMiddleware
201
- }, {
200
+ popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
201
+ middleware: getPopoverMiddleware(shouldCoverButton),
202
202
  childRefOverride: popoverContentNodeRef
203
- }), childrenToRender(state))));
203
+ }, childrenToRender(state))));
204
204
  };
205
205
  export default PopoverContainer;
package/esm/components/split-button/split-button-toggle.style.js CHANGED
@@ -64,7 +64,8 @@ css`
64
64
  }
65
65
 
66
66
  &:focus {
67
- background-color: var(--colorsActionMajor500);
67
+ background-color: var(--colorsActionMajor700);
68
+ border-color: var(--colorsActionMajor700);
68
69
 
69
70
  &,
70
71
  ${StyledIcon} {
package/esm/components/split-button/split-button.component.js CHANGED
@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import React, { useContext, useRef } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import { ThemeContext } from "styled-components";
5
+ import { flip, offset } from "@floating-ui/dom";
5
6
  import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
6
7
  import Icon from "../icon";
7
8
  import Button from "../button";
@@ -41,15 +42,14 @@ export const SplitButton = ({
41
42
  showButtons,
42
43
  hideButtons,
43
44
  buttonNode,
44
- hideButtonsIfTriggerNotFocused,
45
45
  handleToggleButtonKeyDown,
46
46
  wrapperProps,
47
47
  contextValue
48
48
  } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
49
49
  const mainButtonProps = {
50
- onMouseEnter: hideButtonsIfTriggerNotFocused,
51
- onFocus: hideButtonsIfTriggerNotFocused,
52
- onTouchStart: hideButtonsIfTriggerNotFocused,
50
+ onMouseEnter: hideButtons,
51
+ onFocus: hideButtons,
52
+ onTouchStart: hideButtons,
53
53
  iconPosition,
54
54
  buttonType,
55
55
  disabled,
@@ -64,12 +64,9 @@ export const SplitButton = ({
64
64
  displayed: showAdditionalButtons,
65
65
  onTouchStart: showButtons,
66
66
  onKeyDown: handleToggleButtonKeyDown,
67
+ onClick: showButtons,
67
68
  buttonType,
68
- size,
69
- ...(!disabled && {
70
- onMouseEnter: showButtons,
71
- onClick: showButtons
72
- })
69
+ size
73
70
  };
74
71
  function componentTags() {
75
72
  return {
@@ -109,7 +106,10 @@ export const SplitButton = ({
109
106
  if (!showAdditionalButtons) return null;
110
107
  return /*#__PURE__*/React.createElement(Popover, {
111
108
  placement: "bottom-end",
112
- reference: buttonNode
109
+ reference: buttonNode,
110
+ middleware: [offset(6), flip({
111
+ fallbackStrategy: "initialPlacement"
112
+ })]
113
113
  }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
114
114
  align: align
115
115
  }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
@@ -119,7 +119,6 @@ export const SplitButton = ({
119
119
  const handleClick = useClickAwayListener(hideButtons);
120
120
  const marginProps = filterStyledSystemMarginProps(rest);
121
121
  return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
122
- onMouseLeave: hideButtonsIfTriggerNotFocused,
123
122
  onClick: handleClick,
124
123
  ref: buttonNode
125
124
  }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts CHANGED
@@ -4,7 +4,6 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
4
4
  showButtons: () => void;
5
5
  hideButtons: () => void;
6
6
  buttonNode: import("react").RefObject<HTMLDivElement>;
7
- hideButtonsIfTriggerNotFocused: () => void;
8
7
  handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
9
8
  wrapperProps: {
10
9
  "data-element": string;
package/esm/hooks/__internal__/useChildButtons/useChildButtons.js CHANGED
@@ -41,10 +41,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
41
41
  hideButtons();
42
42
  toggleButtonRef.current?.focus();
43
43
  };
44
- const hideButtonsIfTriggerNotFocused = useCallback(() => {
45
- if (toggleButtonRef.current === document.activeElement) return;
46
- setShowAdditionalButtons(false);
47
- }, [toggleButtonRef]);
48
44
  const wrapperProps = {
49
45
  "data-element": "additional-buttons",
50
46
  role: "list",
@@ -61,7 +57,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
61
57
  showButtons,
62
58
  hideButtons,
63
59
  buttonNode,
64
- hideButtonsIfTriggerNotFocused,
65
60
  handleToggleButtonKeyDown,
66
61
  wrapperProps,
67
62
  contextValue
package/lib/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = exports.MultiActionButton = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _dom = require("@floating-ui/dom");
9
10
  var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
10
11
  var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
11
12
  var _multiActionButton = require("./multi-action-button.style");
@@ -37,7 +38,6 @@ const MultiActionButton = ({
37
38
  showButtons,
38
39
  hideButtons,
39
40
  buttonNode,
40
- hideButtonsIfTriggerNotFocused,
41
41
  handleToggleButtonKeyDown,
42
42
  wrapperProps,
43
43
  contextValue
@@ -59,14 +59,14 @@ const MultiActionButton = ({
59
59
  buttonType,
60
60
  size,
61
61
  subtext,
62
- ...(!disabled && {
63
- onMouseEnter: showButtons
64
- }),
65
62
  ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
66
63
  };
67
64
  const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
68
65
  placement: "bottom-end",
69
- reference: buttonNode
66
+ reference: buttonNode,
67
+ middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
68
+ fallbackStrategy: "initialPlacement"
69
+ })]
70
70
  }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, _extends({}, wrapperProps, {
71
71
  align: align
72
72
  }), /*#__PURE__*/_react.default.createElement(_splitButton.default.Provider, {
@@ -74,7 +74,6 @@ const MultiActionButton = ({
74
74
  }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
75
75
  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
76
76
  return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
77
- onMouseLeave: hideButtonsIfTriggerNotFocused,
78
77
  ref: buttonNode,
79
78
  "data-component": "multi-action-button",
80
79
  "data-element": dataElement,
package/lib/components/popover-container/popover-container.component.js CHANGED
@@ -67,13 +67,15 @@ const renderClose = ({
67
67
  type: "close"
68
68
  }));
69
69
  exports.renderClose = renderClose;
70
- const popoverMiddleware = [(0, _dom.offset)(({
71
- rects
72
- }) => ({
73
- mainAxis: -rects.reference.height
74
- })), (0, _dom.flip)({
75
- fallbackStrategy: "initialPlacement"
76
- })];
70
+ function getPopoverMiddleware(shouldCoverButton) {
71
+ return [(0, _dom.offset)(shouldCoverButton ? ({
72
+ rects
73
+ }) => ({
74
+ mainAxis: -rects.reference.height
75
+ }) : 6), (0, _dom.flip)({
76
+ fallbackStrategy: "initialPlacement"
77
+ })];
78
+ }
77
79
  const PopoverContainer = ({
78
80
  children,
79
81
  title,
@@ -203,15 +205,13 @@ const PopoverContainer = ({
203
205
  nodeRef: popoverContentNodeRef,
204
206
  onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
205
207
  onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
206
- }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
208
+ }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
207
209
  reference: popoverReference,
208
210
  placement: position === "right" ? "bottom-start" : "bottom-end",
209
- popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
210
- }, shouldCoverButton && {
211
- middleware: popoverMiddleware
212
- }, {
211
+ popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
212
+ middleware: getPopoverMiddleware(shouldCoverButton),
213
213
  childRefOverride: popoverContentNodeRef
214
- }), childrenToRender(state))));
214
+ }, childrenToRender(state))));
215
215
  };
216
216
  exports.PopoverContainer = PopoverContainer;
217
217
  var _default = exports.default = PopoverContainer;
package/lib/components/split-button/split-button-toggle.style.js CHANGED
@@ -73,7 +73,8 @@ theme.focusRedesignOptOut && /* istanbul ignore next */
73
73
  }
74
74
 
75
75
  &:focus {
76
- background-color: var(--colorsActionMajor500);
76
+ background-color: var(--colorsActionMajor700);
77
+ border-color: var(--colorsActionMajor700);
77
78
 
78
79
  &,
79
80
  ${_icon.default} {
package/lib/components/split-button/split-button.component.js CHANGED
@@ -7,6 +7,7 @@ exports.default = exports.SplitButton = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _styledComponents = require("styled-components");
10
+ var _dom = require("@floating-ui/dom");
10
11
  var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
11
12
  var _icon = _interopRequireDefault(require("../icon"));
12
13
  var _button = _interopRequireDefault(require("../button"));
@@ -50,15 +51,14 @@ const SplitButton = ({
50
51
  showButtons,
51
52
  hideButtons,
52
53
  buttonNode,
53
- hideButtonsIfTriggerNotFocused,
54
54
  handleToggleButtonKeyDown,
55
55
  wrapperProps,
56
56
  contextValue
57
57
  } = (0, _useChildButtons.default)(toggleButton, CONTENT_WIDTH_RATIO);
58
58
  const mainButtonProps = {
59
- onMouseEnter: hideButtonsIfTriggerNotFocused,
60
- onFocus: hideButtonsIfTriggerNotFocused,
61
- onTouchStart: hideButtonsIfTriggerNotFocused,
59
+ onMouseEnter: hideButtons,
60
+ onFocus: hideButtons,
61
+ onTouchStart: hideButtons,
62
62
  iconPosition,
63
63
  buttonType,
64
64
  disabled,
@@ -73,12 +73,9 @@ const SplitButton = ({
73
73
  displayed: showAdditionalButtons,
74
74
  onTouchStart: showButtons,
75
75
  onKeyDown: handleToggleButtonKeyDown,
76
+ onClick: showButtons,
76
77
  buttonType,
77
- size,
78
- ...(!disabled && {
79
- onMouseEnter: showButtons,
80
- onClick: showButtons
81
- })
78
+ size
82
79
  };
83
80
  function componentTags() {
84
81
  return {
@@ -118,7 +115,10 @@ const SplitButton = ({
118
115
  if (!showAdditionalButtons) return null;
119
116
  return /*#__PURE__*/_react.default.createElement(_popover.default, {
120
117
  placement: "bottom-end",
121
- reference: buttonNode
118
+ reference: buttonNode,
119
+ middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
120
+ fallbackStrategy: "initialPlacement"
121
+ })]
122
122
  }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, _extends({}, wrapperProps, {
123
123
  align: align
124
124
  }), /*#__PURE__*/_react.default.createElement(_splitButton2.default.Provider, {
@@ -128,7 +128,6 @@ const SplitButton = ({
128
128
  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
129
129
  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
130
130
  return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
131
- onMouseLeave: hideButtonsIfTriggerNotFocused,
132
131
  onClick: handleClick,
133
132
  ref: buttonNode
134
133
  }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts CHANGED
@@ -4,7 +4,6 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
4
4
  showButtons: () => void;
5
5
  hideButtons: () => void;
6
6
  buttonNode: import("react").RefObject<HTMLDivElement>;
7
- hideButtonsIfTriggerNotFocused: () => void;
8
7
  handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
9
8
  wrapperProps: {
10
9
  "data-element": string;
package/lib/hooks/__internal__/useChildButtons/useChildButtons.js CHANGED
@@ -48,10 +48,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
48
48
  hideButtons();
49
49
  toggleButtonRef.current?.focus();
50
50
  };
51
- const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
52
- if (toggleButtonRef.current === document.activeElement) return;
53
- setShowAdditionalButtons(false);
54
- }, [toggleButtonRef]);
55
51
  const wrapperProps = {
56
52
  "data-element": "additional-buttons",
57
53
  role: "list",
@@ -68,7 +64,6 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
68
64
  showButtons,
69
65
  hideButtons,
70
66
  buttonNode,
71
- hideButtonsIfTriggerNotFocused,
72
67
  handleToggleButtonKeyDown,
73
68
  wrapperProps,
74
69
  contextValue
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "134.0.4",
3
+ "version": "134.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",