carbon-react 135.0.0 → 135.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 (19) hide show
  1. package/esm/components/badge/badge.component.js +3 -2
  2. package/esm/components/multi-action-button/multi-action-button.component.d.ts +1 -1
  3. package/esm/components/multi-action-button/multi-action-button.component.js +2 -1
  4. package/esm/components/multi-action-button/multi-action-button.config.d.ts +1 -0
  5. package/esm/components/multi-action-button/multi-action-button.config.js +2 -1
  6. package/esm/components/split-button/split-button.component.d.ts +5 -3
  7. package/esm/components/split-button/split-button.component.js +2 -1
  8. package/esm/components/split-button/split-button.config.d.ts +1 -0
  9. package/esm/components/split-button/split-button.config.js +2 -1
  10. package/lib/components/badge/badge.component.js +3 -2
  11. package/lib/components/multi-action-button/multi-action-button.component.d.ts +1 -1
  12. package/lib/components/multi-action-button/multi-action-button.component.js +2 -1
  13. package/lib/components/multi-action-button/multi-action-button.config.d.ts +1 -0
  14. package/lib/components/multi-action-button/multi-action-button.config.js +3 -2
  15. package/lib/components/split-button/split-button.component.d.ts +5 -3
  16. package/lib/components/split-button/split-button.component.js +2 -1
  17. package/lib/components/split-button/split-button.config.d.ts +1 -0
  18. package/lib/components/split-button/split-button.config.js +3 -2
  19. package/package.json +1 -1
package/esm/components/badge/badge.component.js CHANGED
@@ -9,8 +9,8 @@ export const Badge = ({
9
9
  color = "--colorsActionMajor500",
10
10
  onClick
11
11
  }) => {
12
- const shouldDisplayCounter = counter > 0;
13
- const counterToDisplay = counter > 99 ? 99 : counter;
12
+ const shouldDisplayCounter = +counter > 0;
13
+ const counterToDisplay = +counter > 99 ? 99 : counter;
14
14
  const renderCorrectBadge = () => {
15
15
  const props = onClick ? {
16
16
  buttonType: "secondary",
@@ -20,6 +20,7 @@ export const Badge = ({
20
20
  };
21
21
  if (shouldDisplayCounter) {
22
22
  return /*#__PURE__*/React.createElement(StyledBadge, _extends({
23
+ "data-role": "badge",
23
24
  "data-component": "badge",
24
25
  color: color
25
26
  }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
package/esm/components/multi-action-button/multi-action-button.component.d.ts CHANGED
@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
7
7
  /** Second text child, renders under main text, only when size is "large" */
8
8
  subtext?: string;
9
9
  }
10
- export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
10
+ export declare const MultiActionButton: ({ align, position, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
11
11
  export default MultiActionButton;
package/esm/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -11,6 +11,7 @@ import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from
11
11
  import useChildButtons from "../../hooks/__internal__/useChildButtons";
12
12
  export const MultiActionButton = ({
13
13
  align = "left",
14
+ position = "left",
14
15
  disabled,
15
16
  buttonType,
16
17
  size,
@@ -53,7 +54,7 @@ export const MultiActionButton = ({
53
54
  ...filterOutStyledSystemSpacingProps(rest)
54
55
  };
55
56
  const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
56
- placement: "bottom-end",
57
+ placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
57
58
  reference: buttonNode,
58
59
  middleware: [offset(6), flip({
59
60
  fallbackStrategy: "initialPlacement"
package/esm/components/multi-action-button/multi-action-button.config.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export declare const MULTI_ACTION_BUTTON_ALIGNMENTS: string[];
2
2
  export declare const MULTI_ACTION_BUTTON_SIZES: string[];
3
3
  export declare const MULTI_ACTION_BUTTON_THEMES: string[];
4
+ export declare const MULTI_ACTION_BUTTON_POSITIONS: string[];
package/esm/components/multi-action-button/multi-action-button.config.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
2
2
  export const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
3
- export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
3
+ export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
4
+ export const MULTI_ACTION_BUTTON_POSITIONS = ["left", "right"];
package/esm/components/split-button/split-button.component.d.ts CHANGED
@@ -20,12 +20,14 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
20
20
  iconPosition?: "before" | "after";
21
21
  /** Defines an Icon type within the button */
22
22
  iconType?: IconType;
23
- /** The size of the buttons in the SplitButton. */
23
+ /** The size of the buttons. */
24
24
  size?: "small" | "medium" | "large";
25
25
  /** Second text child, renders under main text, only when size is "large" */
26
26
  subtext?: string;
27
- /** The text to be displayed in the SplitButton. */
27
+ /** The text to be displayed in the main button. */
28
28
  text: string;
29
+ /** Sets rendering position of menu */
30
+ position?: "left" | "right";
29
31
  }
30
- export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
32
+ export declare const SplitButton: ({ align, position, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
31
33
  export default SplitButton;
package/esm/components/split-button/split-button.component.js CHANGED
@@ -19,6 +19,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
19
19
  const CONTENT_WIDTH_RATIO = 0.75;
20
20
  export const SplitButton = ({
21
21
  align = "left",
22
+ position = "right",
22
23
  buttonType = "secondary",
23
24
  children,
24
25
  disabled = false,
@@ -105,7 +106,7 @@ export const SplitButton = ({
105
106
  function renderAdditionalButtons() {
106
107
  if (!showAdditionalButtons) return null;
107
108
  return /*#__PURE__*/React.createElement(Popover, {
108
- placement: "bottom-end",
109
+ placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
109
110
  reference: buttonNode,
110
111
  middleware: [offset(6), flip({
111
112
  fallbackStrategy: "initialPlacement"
package/esm/components/split-button/split-button.config.d.ts CHANGED
@@ -2,3 +2,4 @@ export declare const SPLIT_BUTTON_ICON_POSITIONS: string[];
2
2
  export declare const SPLIT_BUTTON_THEMES: string[];
3
3
  export declare const SPLIT_BUTTON_SIZES: string[];
4
4
  export declare const SPLIT_BUTTON_ALIGNMENTS: string[];
5
+ export declare const SPLIT_BUTTON_POSITIONS: string[];
package/esm/components/split-button/split-button.config.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export const SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
2
2
  export const SPLIT_BUTTON_THEMES = ["primary", "secondary"];
3
3
  export const SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
4
- export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
4
+ export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
5
+ export const SPLIT_BUTTON_POSITIONS = ["left", "right"];
package/lib/components/badge/badge.component.js CHANGED
@@ -16,8 +16,8 @@ const Badge = ({
16
16
  color = "--colorsActionMajor500",
17
17
  onClick
18
18
  }) => {
19
- const shouldDisplayCounter = counter > 0;
20
- const counterToDisplay = counter > 99 ? 99 : counter;
19
+ const shouldDisplayCounter = +counter > 0;
20
+ const counterToDisplay = +counter > 99 ? 99 : counter;
21
21
  const renderCorrectBadge = () => {
22
22
  const props = onClick ? {
23
23
  buttonType: "secondary",
@@ -27,6 +27,7 @@ const Badge = ({
27
27
  };
28
28
  if (shouldDisplayCounter) {
29
29
  return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
30
+ "data-role": "badge",
30
31
  "data-component": "badge",
31
32
  color: color
32
33
  }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
package/lib/components/multi-action-button/multi-action-button.component.d.ts CHANGED
@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
7
7
  /** Second text child, renders under main text, only when size is "large" */
8
8
  subtext?: string;
9
9
  }
10
- export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
10
+ export declare const MultiActionButton: ({ align, position, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
11
11
  export default MultiActionButton;
package/lib/components/multi-action-button/multi-action-button.component.js CHANGED
@@ -20,6 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
20
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); }
21
21
  const MultiActionButton = ({
22
22
  align = "left",
23
+ position = "left",
23
24
  disabled,
24
25
  buttonType,
25
26
  size,
@@ -62,7 +63,7 @@ const MultiActionButton = ({
62
63
  ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
63
64
  };
64
65
  const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
65
- placement: "bottom-end",
66
+ placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
66
67
  reference: buttonNode,
67
68
  middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
68
69
  fallbackStrategy: "initialPlacement"
package/lib/components/multi-action-button/multi-action-button.config.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export declare const MULTI_ACTION_BUTTON_ALIGNMENTS: string[];
2
2
  export declare const MULTI_ACTION_BUTTON_SIZES: string[];
3
3
  export declare const MULTI_ACTION_BUTTON_THEMES: string[];
4
+ export declare const MULTI_ACTION_BUTTON_POSITIONS: string[];
package/lib/components/multi-action-button/multi-action-button.config.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = void 0;
6
+ exports.MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_POSITIONS = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = void 0;
7
7
  const MULTI_ACTION_BUTTON_ALIGNMENTS = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
8
8
  const MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
9
- const MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
9
+ const MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
10
+ const MULTI_ACTION_BUTTON_POSITIONS = exports.MULTI_ACTION_BUTTON_POSITIONS = ["left", "right"];
package/lib/components/split-button/split-button.component.d.ts CHANGED
@@ -20,12 +20,14 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
20
20
  iconPosition?: "before" | "after";
21
21
  /** Defines an Icon type within the button */
22
22
  iconType?: IconType;
23
- /** The size of the buttons in the SplitButton. */
23
+ /** The size of the buttons. */
24
24
  size?: "small" | "medium" | "large";
25
25
  /** Second text child, renders under main text, only when size is "large" */
26
26
  subtext?: string;
27
- /** The text to be displayed in the SplitButton. */
27
+ /** The text to be displayed in the main button. */
28
28
  text: string;
29
+ /** Sets rendering position of menu */
30
+ position?: "left" | "right";
29
31
  }
30
- export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
32
+ export declare const SplitButton: ({ align, position, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
31
33
  export default SplitButton;
package/lib/components/split-button/split-button.component.js CHANGED
@@ -28,6 +28,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
28
28
  const CONTENT_WIDTH_RATIO = 0.75;
29
29
  const SplitButton = ({
30
30
  align = "left",
31
+ position = "right",
31
32
  buttonType = "secondary",
32
33
  children,
33
34
  disabled = false,
@@ -114,7 +115,7 @@ const SplitButton = ({
114
115
  function renderAdditionalButtons() {
115
116
  if (!showAdditionalButtons) return null;
116
117
  return /*#__PURE__*/_react.default.createElement(_popover.default, {
117
- placement: "bottom-end",
118
+ placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
118
119
  reference: buttonNode,
119
120
  middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
120
121
  fallbackStrategy: "initialPlacement"
package/lib/components/split-button/split-button.config.d.ts CHANGED
@@ -2,3 +2,4 @@ export declare const SPLIT_BUTTON_ICON_POSITIONS: string[];
2
2
  export declare const SPLIT_BUTTON_THEMES: string[];
3
3
  export declare const SPLIT_BUTTON_SIZES: string[];
4
4
  export declare const SPLIT_BUTTON_ALIGNMENTS: string[];
5
+ export declare const SPLIT_BUTTON_POSITIONS: string[];
package/lib/components/split-button/split-button.config.js CHANGED
@@ -3,8 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ALIGNMENTS = void 0;
6
+ exports.SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_POSITIONS = exports.SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ALIGNMENTS = void 0;
7
7
  const SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
8
8
  const SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_THEMES = ["primary", "secondary"];
9
9
  const SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
10
- const SPLIT_BUTTON_ALIGNMENTS = exports.SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
10
+ const SPLIT_BUTTON_ALIGNMENTS = exports.SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
11
+ const SPLIT_BUTTON_POSITIONS = exports.SPLIT_BUTTON_POSITIONS = ["left", "right"];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "135.0.0",
3
+ "version": "135.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",