carbon-react 111.20.0 → 111.21.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.
@@ -1,10 +1,11 @@
1
1
  /// <reference types="react" />
2
+ import { WidthProps } from "styled-system";
2
3
  import { SplitButtonProps } from "../split-button";
3
- export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
4
+ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
4
5
  /** Button type: "primary" | "secondary" | "tertiary" */
5
6
  buttonType?: "primary" | "secondary" | "tertiary";
6
7
  /** Second text child, renders under main text, only when size is "large" */
7
8
  subtext?: string;
8
9
  }
9
- export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
10
+ export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
10
11
  export default MultiActionButton;
@@ -18,6 +18,7 @@ const MultiActionButton = ({
18
18
  children,
19
19
  text,
20
20
  subtext,
21
+ width,
21
22
  "data-element": dataElement,
22
23
  "data-role": dataRole,
23
24
  ...rest
@@ -124,7 +125,8 @@ const MultiActionButton = ({
124
125
  "data-component": "multi-action-button",
125
126
  "data-element": dataElement,
126
127
  "data-role": dataRole,
127
- displayed: showAdditionalButtons
128
+ displayed: showAdditionalButtons,
129
+ width: width
128
130
  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({
129
131
  "aria-haspopup": "true",
130
132
  "aria-expanded": showAdditionalButtons,
@@ -621,7 +623,108 @@ MultiActionButton.propTypes = {
621
623
  "typeof": PropTypes.string,
622
624
  "unselectable": PropTypes.oneOf(["off", "on"]),
623
625
  "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
624
- "vocab": PropTypes.string
626
+ "vocab": PropTypes.string,
627
+ "width": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
628
+ "__@iterator": PropTypes.func.isRequired,
629
+ "anchor": PropTypes.func.isRequired,
630
+ "at": PropTypes.func.isRequired,
631
+ "big": PropTypes.func.isRequired,
632
+ "blink": PropTypes.func.isRequired,
633
+ "bold": PropTypes.func.isRequired,
634
+ "charAt": PropTypes.func.isRequired,
635
+ "charCodeAt": PropTypes.func.isRequired,
636
+ "codePointAt": PropTypes.func.isRequired,
637
+ "concat": PropTypes.func.isRequired,
638
+ "endsWith": PropTypes.func.isRequired,
639
+ "fixed": PropTypes.func.isRequired,
640
+ "fontcolor": PropTypes.func.isRequired,
641
+ "fontsize": PropTypes.func.isRequired,
642
+ "includes": PropTypes.func.isRequired,
643
+ "indexOf": PropTypes.func.isRequired,
644
+ "italics": PropTypes.func.isRequired,
645
+ "lastIndexOf": PropTypes.func.isRequired,
646
+ "length": PropTypes.number.isRequired,
647
+ "link": PropTypes.func.isRequired,
648
+ "localeCompare": PropTypes.func.isRequired,
649
+ "match": PropTypes.func.isRequired,
650
+ "matchAll": PropTypes.func.isRequired,
651
+ "normalize": PropTypes.func.isRequired,
652
+ "padEnd": PropTypes.func.isRequired,
653
+ "padStart": PropTypes.func.isRequired,
654
+ "repeat": PropTypes.func.isRequired,
655
+ "replace": PropTypes.func.isRequired,
656
+ "search": PropTypes.func.isRequired,
657
+ "slice": PropTypes.func.isRequired,
658
+ "small": PropTypes.func.isRequired,
659
+ "split": PropTypes.func.isRequired,
660
+ "startsWith": PropTypes.func.isRequired,
661
+ "strike": PropTypes.func.isRequired,
662
+ "sub": PropTypes.func.isRequired,
663
+ "substr": PropTypes.func.isRequired,
664
+ "substring": PropTypes.func.isRequired,
665
+ "sup": PropTypes.func.isRequired,
666
+ "toLocaleLowerCase": PropTypes.func.isRequired,
667
+ "toLocaleUpperCase": PropTypes.func.isRequired,
668
+ "toLowerCase": PropTypes.func.isRequired,
669
+ "toString": PropTypes.func.isRequired,
670
+ "toUpperCase": PropTypes.func.isRequired,
671
+ "trim": PropTypes.func.isRequired,
672
+ "trimEnd": PropTypes.func.isRequired,
673
+ "trimLeft": PropTypes.func.isRequired,
674
+ "trimRight": PropTypes.func.isRequired,
675
+ "trimStart": PropTypes.func.isRequired,
676
+ "valueOf": PropTypes.func.isRequired
677
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
678
+ "__@iterator": PropTypes.func.isRequired,
679
+ "anchor": PropTypes.func.isRequired,
680
+ "at": PropTypes.func.isRequired,
681
+ "big": PropTypes.func.isRequired,
682
+ "blink": PropTypes.func.isRequired,
683
+ "bold": PropTypes.func.isRequired,
684
+ "charAt": PropTypes.func.isRequired,
685
+ "charCodeAt": PropTypes.func.isRequired,
686
+ "codePointAt": PropTypes.func.isRequired,
687
+ "concat": PropTypes.func.isRequired,
688
+ "endsWith": PropTypes.func.isRequired,
689
+ "fixed": PropTypes.func.isRequired,
690
+ "fontcolor": PropTypes.func.isRequired,
691
+ "fontsize": PropTypes.func.isRequired,
692
+ "includes": PropTypes.func.isRequired,
693
+ "indexOf": PropTypes.func.isRequired,
694
+ "italics": PropTypes.func.isRequired,
695
+ "lastIndexOf": PropTypes.func.isRequired,
696
+ "length": PropTypes.number.isRequired,
697
+ "link": PropTypes.func.isRequired,
698
+ "localeCompare": PropTypes.func.isRequired,
699
+ "match": PropTypes.func.isRequired,
700
+ "matchAll": PropTypes.func.isRequired,
701
+ "normalize": PropTypes.func.isRequired,
702
+ "padEnd": PropTypes.func.isRequired,
703
+ "padStart": PropTypes.func.isRequired,
704
+ "repeat": PropTypes.func.isRequired,
705
+ "replace": PropTypes.func.isRequired,
706
+ "search": PropTypes.func.isRequired,
707
+ "slice": PropTypes.func.isRequired,
708
+ "small": PropTypes.func.isRequired,
709
+ "split": PropTypes.func.isRequired,
710
+ "startsWith": PropTypes.func.isRequired,
711
+ "strike": PropTypes.func.isRequired,
712
+ "sub": PropTypes.func.isRequired,
713
+ "substr": PropTypes.func.isRequired,
714
+ "substring": PropTypes.func.isRequired,
715
+ "sup": PropTypes.func.isRequired,
716
+ "toLocaleLowerCase": PropTypes.func.isRequired,
717
+ "toLocaleUpperCase": PropTypes.func.isRequired,
718
+ "toLowerCase": PropTypes.func.isRequired,
719
+ "toString": PropTypes.func.isRequired,
720
+ "toUpperCase": PropTypes.func.isRequired,
721
+ "trim": PropTypes.func.isRequired,
722
+ "trimEnd": PropTypes.func.isRequired,
723
+ "trimLeft": PropTypes.func.isRequired,
724
+ "trimRight": PropTypes.func.isRequired,
725
+ "trimStart": PropTypes.func.isRequired,
726
+ "valueOf": PropTypes.func.isRequired
727
+ }), PropTypes.string])
625
728
  };
626
729
  export { MultiActionButton };
627
730
  export default MultiActionButton;
@@ -1,7 +1,7 @@
1
- declare type StyledMultiActionButtonProps = {
1
+ import { MultiActionButtonProps } from "./multi-action-button.component";
2
+ declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
2
3
  displayed: boolean;
3
- };
4
- declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
4
+ }, never>;
5
5
  declare type StyledButtonChildrenContainerProps = {
6
6
  align: "left" | "right";
7
7
  minWidth: number;
@@ -3,12 +3,25 @@ import { margin } from "styled-system";
3
3
  import StyledButton from "../button/button.style";
4
4
  import baseTheme from "../../style/themes/base";
5
5
  import StyledIcon from "../icon/icon.style";
6
+ import computeWidth from "../../style/utils/width";
6
7
  const StyledMultiActionButton = styled.div`
7
8
  ${margin}
8
9
 
9
10
  display: inline-block;
10
11
  position: relative;
11
12
 
13
+ ${({
14
+ width
15
+ }) => width && css`
16
+ ${computeWidth({
17
+ width
18
+ })}
19
+
20
+ ${StyledButton} {
21
+ width: 100%
22
+ justify-content: space-between;
23
+ }`}
24
+
12
25
  & > ${StyledButton} {
13
26
  margin: 0;
14
27
 
@@ -1,10 +1,11 @@
1
1
  /// <reference types="react" />
2
+ import { WidthProps } from "styled-system";
2
3
  import { SplitButtonProps } from "../split-button";
3
- export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
4
+ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProps, "buttonType"> {
4
5
  /** Button type: "primary" | "secondary" | "tertiary" */
5
6
  buttonType?: "primary" | "secondary" | "tertiary";
6
7
  /** Second text child, renders under main text, only when size is "large" */
7
8
  subtext?: string;
8
9
  }
9
- export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
10
+ export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
10
11
  export default MultiActionButton;
@@ -39,6 +39,7 @@ const MultiActionButton = ({
39
39
  children,
40
40
  text,
41
41
  subtext,
42
+ width,
42
43
  "data-element": dataElement,
43
44
  "data-role": dataRole,
44
45
  ...rest
@@ -145,7 +146,8 @@ const MultiActionButton = ({
145
146
  "data-component": "multi-action-button",
146
147
  "data-element": dataElement,
147
148
  "data-role": dataRole,
148
- displayed: showAdditionalButtons
149
+ displayed: showAdditionalButtons,
150
+ width: width
149
151
  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
150
152
  "aria-haspopup": "true",
151
153
  "aria-expanded": showAdditionalButtons,
@@ -643,7 +645,108 @@ MultiActionButton.propTypes = {
643
645
  "typeof": _propTypes.default.string,
644
646
  "unselectable": _propTypes.default.oneOf(["off", "on"]),
645
647
  "value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
646
- "vocab": _propTypes.default.string
648
+ "vocab": _propTypes.default.string,
649
+ "width": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
650
+ "__@iterator": _propTypes.default.func.isRequired,
651
+ "anchor": _propTypes.default.func.isRequired,
652
+ "at": _propTypes.default.func.isRequired,
653
+ "big": _propTypes.default.func.isRequired,
654
+ "blink": _propTypes.default.func.isRequired,
655
+ "bold": _propTypes.default.func.isRequired,
656
+ "charAt": _propTypes.default.func.isRequired,
657
+ "charCodeAt": _propTypes.default.func.isRequired,
658
+ "codePointAt": _propTypes.default.func.isRequired,
659
+ "concat": _propTypes.default.func.isRequired,
660
+ "endsWith": _propTypes.default.func.isRequired,
661
+ "fixed": _propTypes.default.func.isRequired,
662
+ "fontcolor": _propTypes.default.func.isRequired,
663
+ "fontsize": _propTypes.default.func.isRequired,
664
+ "includes": _propTypes.default.func.isRequired,
665
+ "indexOf": _propTypes.default.func.isRequired,
666
+ "italics": _propTypes.default.func.isRequired,
667
+ "lastIndexOf": _propTypes.default.func.isRequired,
668
+ "length": _propTypes.default.number.isRequired,
669
+ "link": _propTypes.default.func.isRequired,
670
+ "localeCompare": _propTypes.default.func.isRequired,
671
+ "match": _propTypes.default.func.isRequired,
672
+ "matchAll": _propTypes.default.func.isRequired,
673
+ "normalize": _propTypes.default.func.isRequired,
674
+ "padEnd": _propTypes.default.func.isRequired,
675
+ "padStart": _propTypes.default.func.isRequired,
676
+ "repeat": _propTypes.default.func.isRequired,
677
+ "replace": _propTypes.default.func.isRequired,
678
+ "search": _propTypes.default.func.isRequired,
679
+ "slice": _propTypes.default.func.isRequired,
680
+ "small": _propTypes.default.func.isRequired,
681
+ "split": _propTypes.default.func.isRequired,
682
+ "startsWith": _propTypes.default.func.isRequired,
683
+ "strike": _propTypes.default.func.isRequired,
684
+ "sub": _propTypes.default.func.isRequired,
685
+ "substr": _propTypes.default.func.isRequired,
686
+ "substring": _propTypes.default.func.isRequired,
687
+ "sup": _propTypes.default.func.isRequired,
688
+ "toLocaleLowerCase": _propTypes.default.func.isRequired,
689
+ "toLocaleUpperCase": _propTypes.default.func.isRequired,
690
+ "toLowerCase": _propTypes.default.func.isRequired,
691
+ "toString": _propTypes.default.func.isRequired,
692
+ "toUpperCase": _propTypes.default.func.isRequired,
693
+ "trim": _propTypes.default.func.isRequired,
694
+ "trimEnd": _propTypes.default.func.isRequired,
695
+ "trimLeft": _propTypes.default.func.isRequired,
696
+ "trimRight": _propTypes.default.func.isRequired,
697
+ "trimStart": _propTypes.default.func.isRequired,
698
+ "valueOf": _propTypes.default.func.isRequired
699
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
700
+ "__@iterator": _propTypes.default.func.isRequired,
701
+ "anchor": _propTypes.default.func.isRequired,
702
+ "at": _propTypes.default.func.isRequired,
703
+ "big": _propTypes.default.func.isRequired,
704
+ "blink": _propTypes.default.func.isRequired,
705
+ "bold": _propTypes.default.func.isRequired,
706
+ "charAt": _propTypes.default.func.isRequired,
707
+ "charCodeAt": _propTypes.default.func.isRequired,
708
+ "codePointAt": _propTypes.default.func.isRequired,
709
+ "concat": _propTypes.default.func.isRequired,
710
+ "endsWith": _propTypes.default.func.isRequired,
711
+ "fixed": _propTypes.default.func.isRequired,
712
+ "fontcolor": _propTypes.default.func.isRequired,
713
+ "fontsize": _propTypes.default.func.isRequired,
714
+ "includes": _propTypes.default.func.isRequired,
715
+ "indexOf": _propTypes.default.func.isRequired,
716
+ "italics": _propTypes.default.func.isRequired,
717
+ "lastIndexOf": _propTypes.default.func.isRequired,
718
+ "length": _propTypes.default.number.isRequired,
719
+ "link": _propTypes.default.func.isRequired,
720
+ "localeCompare": _propTypes.default.func.isRequired,
721
+ "match": _propTypes.default.func.isRequired,
722
+ "matchAll": _propTypes.default.func.isRequired,
723
+ "normalize": _propTypes.default.func.isRequired,
724
+ "padEnd": _propTypes.default.func.isRequired,
725
+ "padStart": _propTypes.default.func.isRequired,
726
+ "repeat": _propTypes.default.func.isRequired,
727
+ "replace": _propTypes.default.func.isRequired,
728
+ "search": _propTypes.default.func.isRequired,
729
+ "slice": _propTypes.default.func.isRequired,
730
+ "small": _propTypes.default.func.isRequired,
731
+ "split": _propTypes.default.func.isRequired,
732
+ "startsWith": _propTypes.default.func.isRequired,
733
+ "strike": _propTypes.default.func.isRequired,
734
+ "sub": _propTypes.default.func.isRequired,
735
+ "substr": _propTypes.default.func.isRequired,
736
+ "substring": _propTypes.default.func.isRequired,
737
+ "sup": _propTypes.default.func.isRequired,
738
+ "toLocaleLowerCase": _propTypes.default.func.isRequired,
739
+ "toLocaleUpperCase": _propTypes.default.func.isRequired,
740
+ "toLowerCase": _propTypes.default.func.isRequired,
741
+ "toString": _propTypes.default.func.isRequired,
742
+ "toUpperCase": _propTypes.default.func.isRequired,
743
+ "trim": _propTypes.default.func.isRequired,
744
+ "trimEnd": _propTypes.default.func.isRequired,
745
+ "trimLeft": _propTypes.default.func.isRequired,
746
+ "trimRight": _propTypes.default.func.isRequired,
747
+ "trimStart": _propTypes.default.func.isRequired,
748
+ "valueOf": _propTypes.default.func.isRequired
749
+ }), _propTypes.default.string])
647
750
  };
648
751
  var _default = MultiActionButton;
649
752
  exports.default = _default;
@@ -1,7 +1,7 @@
1
- declare type StyledMultiActionButtonProps = {
1
+ import { MultiActionButtonProps } from "./multi-action-button.component";
2
+ declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, Pick<MultiActionButtonProps, "width"> & {
2
3
  displayed: boolean;
3
- };
4
- declare const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, StyledMultiActionButtonProps, never>;
4
+ }, never>;
5
5
  declare type StyledButtonChildrenContainerProps = {
6
6
  align: "left" | "right";
7
7
  minWidth: number;
@@ -15,6 +15,8 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
15
15
 
16
16
  var _icon = _interopRequireDefault(require("../icon/icon.style"));
17
17
 
18
+ var _width = _interopRequireDefault(require("../../style/utils/width"));
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -27,6 +29,18 @@ const StyledMultiActionButton = _styledComponents.default.div`
27
29
  display: inline-block;
28
30
  position: relative;
29
31
 
32
+ ${({
33
+ width
34
+ }) => width && (0, _styledComponents.css)`
35
+ ${(0, _width.default)({
36
+ width
37
+ })}
38
+
39
+ ${_button.default} {
40
+ width: 100%
41
+ justify-content: space-between;
42
+ }`}
43
+
30
44
  & > ${_button.default} {
31
45
  margin: 0;
32
46
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "111.20.0",
3
+ "version": "111.21.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",