carbon-react 109.4.0 → 109.5.0

package/esm/components/icon-button/icon-button.component.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconProps } from "../icon";
+export interface IconButtonProps extends MarginProps {
+    /** Prop to specify the aria-label of the icon-button component */
+    "aria-label"?: string;
+    /** Icon meant to be rendered, should be an Icon component */
+    children: React.ReactElement<IconProps>;
+    /** Callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse enter */
+    onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse leave */
+    onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Action callback */
+    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the button to disabled */
+    disabled?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/esm/components/icon-button/icon-button.component.js

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
-import Icon from "../icon";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
@@ -16,10 +13,10 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
-  const [internalRef, setInternalRef] = useState(null);
+  const [internalRef, setInternalRef] = useState();
   const marginProps = filterStyledSystemMarginProps(rest);
 
-  const onKeyDown = e => {
+  const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
       onAction(e);
@@ -28,7 +25,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     }
   };
 
-  const handleOnAction = e => {
+  const handleOnClick = e => {
     onAction(e);
   };
 
@@ -40,8 +37,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   }, [ref]);
   return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
     "aria-label": ariaLabel,
-    onKeyDown: onKeyDown,
-    onClick: handleOnAction,
+    onKeyDown: handleKeyDown,
+    onClick: handleOnClick,
     ref: setRefs,
     disabled: disabled
   }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -50,20 +47,169 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     target: internalRef
   }, children));
 });
-IconButton.propTypes = { ...marginPropTypes,
-
-  /** Children prop is restricted to one Icon Component */
-  children: PropTypes.shape({
-    type: PropTypes.oneOf([Icon, PropTypes.element])
-  }).isRequired,
-
-  /** Callback */
-  onAction: PropTypes.func.isRequired,
-
-  /** Prop to specify the aria-label of the icon-button component */
+IconButton.propTypes = {
   "aria-label": PropTypes.string,
-
-  /** Set the button to disabled */
-  disabled: PropTypes.bool
+  "children": PropTypes.element.isRequired,
+  "disabled": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onAction": PropTypes.func.isRequired,
+  "onBlur": PropTypes.func,
+  "onFocus": PropTypes.func,
+  "onMouseEnter": PropTypes.func,
+  "onMouseLeave": PropTypes.func
 };
+IconButton.displayName = "IconButton";
 export default IconButton;

package/esm/components/icon-button/icon-button.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledIconButton;

package/esm/components/icon-button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./icon-button";
-export * from "./icon-button";
+export { default } from "./icon-button.component";
+export type { IconButtonProps } from "./icon-button.component";

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

@@ -12,9 +12,9 @@ export interface PillProps extends StyledPillProps {
     /** Fills the pill background with colour. When fill is false only the border is coloured. */
     fill?: boolean;
     /** Callback function for when the pill is clicked. */
-    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
     /** Callback function for when the remove icon is clicked. */
-    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
 }

package/esm/components/pill/pill.component.js

@@ -7,14 +7,6 @@ import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import IconButton from "../icon-button";
 
-const renderCloseIcon = onDelete => /*#__PURE__*/React.createElement(IconButton, {
-  onAction: onDelete,
-  "data-element": "close",
-  "aria-label": "close"
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "cross"
-}));
-
 const Pill = ({
   wrapText,
   borderColor,
@@ -38,7 +30,13 @@ const Pill = ({
 }, tagComponent("pill", rest), {
   maxWidth: maxWidth,
   wrapText: wrapText
-}, rest), children, onDelete && renderCloseIcon(onDelete));
+}, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
+  onAction: onDelete,
+  "data-element": "close",
+  "aria-label": "close"
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "cross"
+})));
 
 Pill.propTypes = {
   "borderColor": PropTypes.string,

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

@@ -4,7 +4,7 @@ export interface RenderOpenProps {
     tabIndex: number;
     isOpen?: boolean;
     "data-element": string;
-    onClick: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     ref: React.RefObject<HTMLButtonElement>;
     "aria-label"?: string;
     id?: string;
@@ -12,7 +12,7 @@ export interface RenderOpenProps {
 export interface RenderCloseProps {
     "data-element": string;
     tabIndex: number;
-    onClick: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     ref: React.RefObject<HTMLButtonElement>;
     "aria-label": string;
 }
@@ -36,11 +36,11 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
+    onClose?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */
-    onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onOpen?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     /** if `true` the popover-container will cover open button */
     shouldCoverButton?: boolean;
     /** The id of the element that describe the dialog. */

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { TransitionStatus } from "react-transition-group";
-import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
@@ -10,7 +10,7 @@ declare type AdditionalIconButtonProps = {
     tabIndex?: number;
     id?: string;
 };
-declare const PopoverContainerOpenIcon: import("styled-components").StyledComponent<typeof IconButton, any, AdditionalIconButtonProps, never>;
-declare const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, AdditionalIconButtonProps, never>;
+declare const PopoverContainerOpenIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, AdditionalIconButtonProps, never>;
+declare const PopoverContainerCloseIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, AdditionalIconButtonProps, never>;
 declare const PopoverContainerTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon, };

package/lib/components/icon-button/icon-button.component.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconProps } from "../icon";
+export interface IconButtonProps extends MarginProps {
+    /** Prop to specify the aria-label of the icon-button component */
+    "aria-label"?: string;
+    /** Icon meant to be rendered, should be an Icon component */
+    children: React.ReactElement<IconProps>;
+    /** Callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse enter */
+    onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback triggered on mouse leave */
+    onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Action callback */
+    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set the button to disabled */
+    disabled?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/lib/components/icon-button/icon-button.component.js

@@ -9,14 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _iconButton = _interopRequireDefault(require("./icon-button.style"));
 
-var _icon = _interopRequireDefault(require("../icon"));
-
 var _utils = require("../../style/utils");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
@@ -29,8 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
@@ -38,10 +32,10 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
-  const [internalRef, setInternalRef] = (0, _react.useState)(null);
+  const [internalRef, setInternalRef] = (0, _react.useState)();
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
 
-  const onKeyDown = e => {
+  const handleKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
       e.preventDefault();
       onAction(e);
@@ -50,7 +44,7 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
 
-  const handleOnAction = e => {
+  const handleOnClick = e => {
     onAction(e);
   };
 
@@ -62,8 +56,8 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   }, [ref]);
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
     "aria-label": ariaLabel,
-    onKeyDown: onKeyDown,
-    onClick: handleOnAction,
+    onKeyDown: handleKeyDown,
+    onClick: handleOnClick,
     ref: setRefs,
     disabled: disabled
   }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -73,21 +67,170 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   }, children));
 });
 
-IconButton.propTypes = { ...marginPropTypes,
-
-  /** Children prop is restricted to one Icon Component */
-  children: _propTypes.default.shape({
-    type: _propTypes.default.oneOf([_icon.default, _propTypes.default.element])
-  }).isRequired,
-
-  /** Callback */
-  onAction: _propTypes.default.func.isRequired,
-
-  /** Prop to specify the aria-label of the icon-button component */
+IconButton.propTypes = {
   "aria-label": _propTypes.default.string,
-
-  /** Set the button to disabled */
-  disabled: _propTypes.default.bool
+  "children": _propTypes.default.element.isRequired,
+  "disabled": _propTypes.default.bool,
+  "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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _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,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "onAction": _propTypes.default.func.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onFocus": _propTypes.default.func,
+  "onMouseEnter": _propTypes.default.func,
+  "onMouseLeave": _propTypes.default.func
 };
+IconButton.displayName = "IconButton";
 var _default = IconButton;
 exports.default = _default;

package/lib/components/icon-button/icon-button.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledIconButton;

package/lib/components/icon-button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./icon-button";
-export * from "./icon-button";
+export { default } from "./icon-button.component";
+export type { IconButtonProps } from "./icon-button.component";

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

@@ -12,9 +12,9 @@ export interface PillProps extends StyledPillProps {
     /** Fills the pill background with colour. When fill is false only the border is coloured. */
     fill?: boolean;
     /** Callback function for when the pill is clicked. */
-    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
     /** Callback function for when the remove icon is clicked. */
-    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
 }

package/lib/components/pill/pill.component.js

@@ -21,14 +21,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || 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); }
 
-const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-  onAction: onDelete,
-  "data-element": "close",
-  "aria-label": "close"
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "cross"
-}));
-
 const Pill = ({
   wrapText,
   borderColor,
@@ -52,7 +44,13 @@ const Pill = ({
 }, (0, _tags.default)("pill", rest), {
   maxWidth: maxWidth,
   wrapText: wrapText
-}, rest), children, onDelete && renderCloseIcon(onDelete));
+}, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+  onAction: onDelete,
+  "data-element": "close",
+  "aria-label": "close"
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "cross"
+})));
 
 exports.Pill = Pill;
 Pill.propTypes = {

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

@@ -4,7 +4,7 @@ export interface RenderOpenProps {
     tabIndex: number;
     isOpen?: boolean;
     "data-element": string;
-    onClick: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     ref: React.RefObject<HTMLButtonElement>;
     "aria-label"?: string;
     id?: string;
@@ -12,7 +12,7 @@ export interface RenderOpenProps {
 export interface RenderCloseProps {
     "data-element": string;
     tabIndex: number;
-    onClick: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     ref: React.RefObject<HTMLButtonElement>;
     "aria-label": string;
 }
@@ -36,11 +36,11 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
+    onClose?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */
-    onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onOpen?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     /** if `true` the popover-container will cover open button */
     shouldCoverButton?: boolean;
     /** The id of the element that describe the dialog. */

package/lib/components/popover-container/popover-container.style.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { TransitionStatus } from "react-transition-group";
-import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
@@ -10,7 +10,7 @@ declare type AdditionalIconButtonProps = {
     tabIndex?: number;
     id?: string;
 };
-declare const PopoverContainerOpenIcon: import("styled-components").StyledComponent<typeof IconButton, any, AdditionalIconButtonProps, never>;
-declare const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, AdditionalIconButtonProps, never>;
+declare const PopoverContainerOpenIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, AdditionalIconButtonProps, never>;
+declare const PopoverContainerCloseIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, AdditionalIconButtonProps, never>;
 declare const PopoverContainerTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.4.0",
+  "version": "109.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/icon-button/icon-button.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { IconProps } from "../icon/icon-type";
-
-export interface IconButtonProps extends MarginProps {
-  /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
-  children: React.ReactElement<IconProps>;
-  /** Callback */
-  onAction: React.MouseEventHandler<HTMLButtonElement>;
-  /** Set the button to disabled */
-  disabled?: boolean;
-}
-
-declare function IconButton(
-  props: IconButtonProps & React.RefAttributes<HTMLButtonElement>
-): JSX.Element;
-
-export default IconButton;

package/lib/components/icon-button/icon-button.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { IconProps } from "../icon/icon-type";
-
-export interface IconButtonProps extends MarginProps {
-  /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
-  children: React.ReactElement<IconProps>;
-  /** Callback */
-  onAction: React.MouseEventHandler<HTMLButtonElement>;
-  /** Set the button to disabled */
-  disabled?: boolean;
-}
-
-declare function IconButton(
-  props: IconButtonProps & React.RefAttributes<HTMLButtonElement>
-): JSX.Element;
-
-export default IconButton;