carbon-react 111.2.0 → 111.3.1

package/esm/components/box/box.component.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -13,6 +16,12 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     boxSizing?: BoxSizing;
     /** Allows a tabindex to be specified */
     tabIndex?: number | string;
+    /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    gap?: Gap;
+    /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    columnGap?: Gap;
+    /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    rowGap?: Gap;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/esm/components/box/box.component.js

@@ -3,11 +3,13 @@ import { space, layout, flexbox, position } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
+const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
   ${position}
+
   ${({
   color,
   bg,
@@ -48,6 +50,25 @@ const Box = styled.div`
 }) => boxSizing && css`
       box-sizing: ${boxSizing};
     `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex") && css`
+      ${gap !== undefined && css`
+        gap: ${boxConfig.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && css`
+        column-gap: ${boxConfig.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && css`
+        row-gap: ${boxConfig.gap(rowGap)};
+      `}
+    `};
 `;
 Box.defaultProps = {
   theme: BaseTheme

package/esm/components/box/box.config.d.ts

@@ -7,5 +7,6 @@ declare const _default: {
         thumb: string;
         track: string;
     };
+    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/esm/components/box/box.config.js

@@ -1,3 +1,4 @@
+import { space } from "../../style/themes/base/base-theme.config";
 export default {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -6,5 +7,12 @@ export default {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
+  },
+  gap: gapValue => {
+    if (typeof gapValue === "number") {
+      return space[gapValue];
+    }
+
+    return gapValue;
   }
 };

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -478,6 +478,7 @@ DismissibleBox.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "columnGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "flex": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
@@ -712,6 +713,7 @@ DismissibleBox.propTypes = {
     "valueOf": PropTypes.func.isRequired
   })]),
   "flexWrap": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), PropTypes.arrayOf(PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), PropTypes.object]),
+  "gap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "hasBorderLeftHighlight": PropTypes.bool,
   "height": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
@@ -2152,6 +2154,7 @@ DismissibleBox.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "rowGap": PropTypes.oneOfType([PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), PropTypes.string]),
   "scrollVariant": PropTypes.oneOf(["dark", "light"]),
   "size": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/loader-bar/loader-bar.component.d.ts

@@ -3,5 +3,8 @@ import { MarginProps } from "styled-system";
 import { StyledLoaderBarProps } from "./loader-bar.style";
 export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
 }
-declare const LoaderBar: ({ size, ...rest }: LoaderBarProps) => JSX.Element;
+export declare const LoaderBar: {
+    ({ size, ...rest }: LoaderBarProps): JSX.Element;
+    DisplayName: string;
+};
 export default LoaderBar;

package/esm/components/loader-bar/loader-bar.component.js

@@ -173,4 +173,6 @@ LoaderBar.propTypes = {
   }), PropTypes.string]),
   "size": PropTypes.oneOf(["large", "medium", "small"])
 };
+export { LoaderBar };
+LoaderBar.DisplayName = "Loader Bar";
 export default LoaderBar;

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

@@ -132,7 +132,7 @@ const MultiActionButton = ({
     "data-element": "toggle-button",
     key: "toggle-button"
   }, mainButtonProps, {
-    forwardRef: buttonRef,
+    ref: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -67,12 +67,20 @@ const StyledButtonChildrenContainer = styled.div`
     ${StyledButton} {
       border: 1px solid var(--colorsActionMajorTransparent);
       color: var(--colorsActionMajor500);
-      display: block;
+      display: flex;
+      justify-content: ${align};
       margin-left: 0;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
+      /* Styling for Safari. Display flex is not supported on buttons in Safari. */
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+          display: -webkit-box;
+        }
+      }
+
       &:focus,
       &:hover {
         background-color: var(--colorsActionMajor600);

package/lib/components/box/box.component.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
+declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export declare type OverflowWrap = "break-word" | "anywhere";
 export declare type ScrollVariant = "light" | "dark";
 export declare type BoxSizing = "content-box" | "border-box";
+export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type Gap = AllowedNumericalValues | string;
 export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -13,6 +16,12 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
     boxSizing?: BoxSizing;
     /** Allows a tabindex to be specified */
     tabIndex?: number | string;
+    /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    gap?: Gap;
+    /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    columnGap?: Gap;
+    /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
+    rowGap?: Gap;
 }
 declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;

package/lib/components/box/box.component.js

@@ -21,11 +21,13 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
   ${_styledSystem.position}
+
   ${({
   color,
   bg,
@@ -66,6 +68,25 @@ const Box = _styledComponents.default.div`
 }) => boxSizing && (0, _styledComponents.css)`
       box-sizing: ${boxSizing};
     `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex") && (0, _styledComponents.css)`
+      ${gap !== undefined && (0, _styledComponents.css)`
+        gap: ${_box.default.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && (0, _styledComponents.css)`
+        column-gap: ${_box.default.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && (0, _styledComponents.css)`
+        row-gap: ${_box.default.gap(rowGap)};
+      `}
+    `};
 `;
 Box.defaultProps = {
   theme: _base.default

package/lib/components/box/box.config.d.ts

@@ -7,5 +7,6 @@ declare const _default: {
         thumb: string;
         track: string;
     };
+    gap: (gapValue: number | string) => string;
 };
 export default _default;

package/lib/components/box/box.config.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _baseTheme = require("../../style/themes/base/base-theme.config");
+
 var _default = {
   light: {
     thumb: "var(--colorsUtilityMajor300)",
@@ -12,6 +15,13 @@ var _default = {
   dark: {
     thumb: "var(--colorsUtilityMajor200)",
     track: "var(--colorsUtilityMajor400)"
+  },
+  gap: gapValue => {
+    if (typeof gapValue === "number") {
+      return _baseTheme.space[gapValue];
+    }
+
+    return gapValue;
   }
 };
 exports.default = _default;

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -492,6 +492,7 @@ DismissibleBox.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "columnGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "flex": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
@@ -726,6 +727,7 @@ DismissibleBox.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   })]),
   "flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
+  "gap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "hasBorderLeftHighlight": _propTypes.default.bool,
   "height": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
@@ -2166,6 +2168,7 @@ DismissibleBox.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "rowGap": _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]), _propTypes.default.string]),
   "scrollVariant": _propTypes.default.oneOf(["dark", "light"]),
   "size": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,

package/lib/components/loader-bar/loader-bar.component.d.ts

@@ -3,5 +3,8 @@ import { MarginProps } from "styled-system";
 import { StyledLoaderBarProps } from "./loader-bar.style";
 export interface LoaderBarProps extends StyledLoaderBarProps, MarginProps {
 }
-declare const LoaderBar: ({ size, ...rest }: LoaderBarProps) => JSX.Element;
+export declare const LoaderBar: {
+    ({ size, ...rest }: LoaderBarProps): JSX.Element;
+    DisplayName: string;
+};
 export default LoaderBar;

package/lib/components/loader-bar/loader-bar.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.LoaderBar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -32,6 +32,7 @@ const LoaderBar = ({
   })));
 };
 
+exports.LoaderBar = LoaderBar;
 LoaderBar.propTypes = {
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
@@ -189,5 +190,6 @@ LoaderBar.propTypes = {
   }), _propTypes.default.string]),
   "size": _propTypes.default.oneOf(["large", "medium", "small"])
 };
+LoaderBar.DisplayName = "Loader Bar";
 var _default = LoaderBar;
 exports.default = _default;

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

@@ -153,7 +153,7 @@ const MultiActionButton = ({
     "data-element": "toggle-button",
     key: "toggle-button"
   }, mainButtonProps, {
-    forwardRef: buttonRef,
+    ref: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

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

@@ -86,12 +86,20 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
     ${_button.default} {
       border: 1px solid var(--colorsActionMajorTransparent);
       color: var(--colorsActionMajor500);
-      display: block;
+      display: flex;
+      justify-content: ${align};
       margin-left: 0;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
+      /* Styling for Safari. Display flex is not supported on buttons in Safari. */
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+          display: -webkit-box;
+        }
+      }
+
       &:focus,
       &:hover {
         background-color: var(--colorsActionMajor600);

package/package.json

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