carbon-react 147.2.0 → 147.3.1

package/esm/components/action-popover/__internal__/action-popover-utils.d.ts

@@ -4,4 +4,5 @@ export declare const getItems: (children: React.ReactNode | React.ReactNode[]) =
 export declare const isItemDisabled: (item: ReactItem) => boolean;
 export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
 export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export declare const checkChildrenForString: (children: React.ReactNode) => boolean;
 export {};

package/esm/components/action-popover/__internal__/action-popover-utils.js

@@ -17,4 +17,12 @@ export const findLastFocusableItem = items => {
     }
   }
   return -1;
+};
+export const checkChildrenForString = children => {
+  return React.Children.toArray(children).some(child => {
+    if (typeof child === "string") {
+      return true;
+    }
+    return /*#__PURE__*/React.isValidElement(child) ? checkChildrenForString(child.props.children) : false;
+  });
 };

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -3,7 +3,7 @@ import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/butto
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
-    "aria-label": string;
+    "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-controls": string;

package/esm/components/action-popover/action-popover.component.d.ts

@@ -6,7 +6,7 @@ export interface RenderButtonProps {
     "data-element": string;
     ariaAttributes: {
         "aria-haspopup": string;
-        "aria-label": string;
+        "aria-label"?: string;
         "aria-labelledby"?: string;
         "aria-describedby"?: string;
         "aria-controls": string;

package/esm/components/action-popover/action-popover.component.js

@@ -12,7 +12,7 @@ import ActionPopoverItem from "./action-popover-item/action-popover-item.compone
 import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
-import { findFirstFocusableItem, findLastFocusableItem, getItems } from "./__internal__/action-popover-utils";
+import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
 const ActionPopover = /*#__PURE__*/forwardRef(({
@@ -139,7 +139,7 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
   }, [setOpen]);
   const menuButton = menuID => {
     if (renderButton) {
-      return renderButton({
+      const renderButtonComponent = renderButton({
         tabIndex: isOpen ? -1 : 0,
         "data-element": "action-popover-button",
         ariaAttributes: {
@@ -151,6 +151,19 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
           "aria-expanded": `${isOpen}`
         }
       });
+      const buttonHasString = checkChildrenForString(renderButtonComponent);
+      return renderButton({
+        tabIndex: isOpen ? -1 : 0,
+        "data-element": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-controls": menuID,
+          "aria-expanded": `${isOpen}`
+        }
+      });
     }
     return /*#__PURE__*/React.createElement(StyledButtonIcon, {
       role: "button",

package/esm/components/heading/heading.style.d.ts

@@ -23,7 +23,7 @@ declare type StyledSubHeaderProps = {
 declare const StyledSubHeader: import("styled-components").StyledComponent<"div", any, StyledSubHeaderProps, never>;
 declare const StyledHeadingIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
+declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, height, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
 declare const StyledHeaderHelp: import("styled-components").StyledComponent<{
     ({ as, ariaLabel, children, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
     displayName: string;

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

@@ -6,6 +6,8 @@ export interface HrProps extends MarginProps {
     /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
      * Enables the adaptive behaviour when set */
     adaptiveMxBreakpoint?: number;
+    /** Set the height of the component. Accepts one of "small", "medium", or "large" */
+    height?: "small" | "medium" | "large";
 }
-export declare const Hr: ({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, ...rest }: HrProps) => JSX.Element;
+export declare const Hr: ({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, height, ...rest }: HrProps) => JSX.Element;
 export default Hr;

package/esm/components/hr/hr.component.js

@@ -8,6 +8,7 @@ const Hr = ({
   ml,
   mr,
   "aria-hidden": ariaHidden,
+  height = "small",
   ...rest
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveMxBreakpoint);
@@ -21,6 +22,7 @@ const Hr = ({
     "aria-hidden": ariaHidden,
     "data-component": "hr",
     "data-role": "hr",
+    height: height,
     ml: marginLeft,
     mr: marginRight,
     mt: rest.mt || 3,
@@ -31,6 +33,7 @@ if (process.env.NODE_ENV !== "production") {
   Hr.propTypes = {
     "adaptiveMxBreakpoint": PropTypes.number,
     "aria-hidden": PropTypes.oneOf(["false", "true"]),
+    "height": PropTypes.oneOf(["large", "medium", "small"]),
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,
       "description": PropTypes.string,

package/esm/components/hr/hr.style.d.ts

@@ -1,3 +1,5 @@
 import { MarginProps } from "styled-system";
-declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    height: "small" | "medium" | "large";
+}, never>;
 export default StyledHr;

package/esm/components/hr/hr.style.js

@@ -1,11 +1,18 @@
 import styled from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
+const heightMap = {
+  small: 1,
+  medium: 2,
+  large: 3
+};
 const StyledHr = styled.hr`
   ${margin}
   width: inherit;
   border: 0;
-  height: 1px;
+  height: ${({
+  height
+}) => heightMap[height]}px;
   background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {

package/lib/components/action-popover/__internal__/action-popover-utils.d.ts

@@ -4,4 +4,5 @@ export declare const getItems: (children: React.ReactNode | React.ReactNode[]) =
 export declare const isItemDisabled: (item: ReactItem) => boolean;
 export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
 export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export declare const checkChildrenForString: (children: React.ReactNode) => boolean;
 export {};

package/lib/components/action-popover/__internal__/action-popover-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isItemDisabled = exports.getItems = exports.findLastFocusableItem = exports.findFirstFocusableItem = void 0;
+exports.isItemDisabled = exports.getItems = exports.findLastFocusableItem = exports.findFirstFocusableItem = exports.checkChildrenForString = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _actionPopoverItem = require("../action-popover-item/action-popover-item.component");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,4 +27,13 @@ const findLastFocusableItem = items => {
   }
   return -1;
 };
-exports.findLastFocusableItem = findLastFocusableItem;
+exports.findLastFocusableItem = findLastFocusableItem;
+const checkChildrenForString = children => {
+  return _react.default.Children.toArray(children).some(child => {
+    if (typeof child === "string") {
+      return true;
+    }
+    return /*#__PURE__*/_react.default.isValidElement(child) ? checkChildrenForString(child.props.children) : false;
+  });
+};
+exports.checkChildrenForString = checkChildrenForString;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -3,7 +3,7 @@ import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/butto
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
-    "aria-label": string;
+    "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-controls": string;

package/lib/components/action-popover/action-popover.component.d.ts

@@ -6,7 +6,7 @@ export interface RenderButtonProps {
     "data-element": string;
     ariaAttributes: {
         "aria-haspopup": string;
-        "aria-label": string;
+        "aria-label"?: string;
         "aria-labelledby"?: string;
         "aria-describedby"?: string;
         "aria-controls": string;

package/lib/components/action-popover/action-popover.component.js

@@ -148,7 +148,7 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
   }, [setOpen]);
   const menuButton = menuID => {
     if (renderButton) {
-      return renderButton({
+      const renderButtonComponent = renderButton({
         tabIndex: isOpen ? -1 : 0,
         "data-element": "action-popover-button",
         ariaAttributes: {
@@ -160,6 +160,19 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
           "aria-expanded": `${isOpen}`
         }
       });
+      const buttonHasString = (0, _actionPopoverUtils.checkChildrenForString)(renderButtonComponent);
+      return renderButton({
+        tabIndex: isOpen ? -1 : 0,
+        "data-element": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-controls": menuID,
+          "aria-expanded": `${isOpen}`
+        }
+      });
     }
     return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
       role: "button",

package/lib/components/heading/heading.style.d.ts

@@ -23,7 +23,7 @@ declare type StyledSubHeaderProps = {
 declare const StyledSubHeader: import("styled-components").StyledComponent<"div", any, StyledSubHeaderProps, never>;
 declare const StyledHeadingIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
+declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, height, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
 declare const StyledHeaderHelp: import("styled-components").StyledComponent<{
     ({ as, ariaLabel, children, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
     displayName: string;

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

@@ -6,6 +6,8 @@ export interface HrProps extends MarginProps {
     /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
      * Enables the adaptive behaviour when set */
     adaptiveMxBreakpoint?: number;
+    /** Set the height of the component. Accepts one of "small", "medium", or "large" */
+    height?: "small" | "medium" | "large";
 }
-export declare const Hr: ({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, ...rest }: HrProps) => JSX.Element;
+export declare const Hr: ({ adaptiveMxBreakpoint, ml, mr, "aria-hidden": ariaHidden, height, ...rest }: HrProps) => JSX.Element;
 export default Hr;

package/lib/components/hr/hr.component.js

@@ -15,6 +15,7 @@ const Hr = ({
   ml,
   mr,
   "aria-hidden": ariaHidden,
+  height = "small",
   ...rest
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveMxBreakpoint);
@@ -28,6 +29,7 @@ const Hr = ({
     "aria-hidden": ariaHidden,
     "data-component": "hr",
     "data-role": "hr",
+    height: height,
     ml: marginLeft,
     mr: marginRight,
     mt: rest.mt || 3,
@@ -39,6 +41,7 @@ if (process.env.NODE_ENV !== "production") {
   Hr.propTypes = {
     "adaptiveMxBreakpoint": _propTypes.default.number,
     "aria-hidden": _propTypes.default.oneOf(["false", "true"]),
+    "height": _propTypes.default.oneOf(["large", "medium", "small"]),
     "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,
       "description": _propTypes.default.string,

package/lib/components/hr/hr.style.d.ts

@@ -1,3 +1,5 @@
 import { MarginProps } from "styled-system";
-declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    height: "small" | "medium" | "large";
+}, never>;
 export default StyledHr;

package/lib/components/hr/hr.style.js

@@ -8,11 +8,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const heightMap = {
+  small: 1,
+  medium: 2,
+  large: 3
+};
 const StyledHr = _styledComponents.default.hr`
   ${_styledSystem.margin}
   width: inherit;
   border: 0;
-  height: 1px;
+  height: ${({
+  height
+}) => heightMap[height]}px;
   background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {

package/package.json

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