carbon-react 111.3.0 → 111.3.1

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