carbon-react 109.4.0 → 109.5.2

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/loader/loader-square.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledLoaderSquare;
+declare const StyledLoaderSquare: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1 @@
+export const LOADER_SIZES: string[];

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/esm/components/switch/switch.component.js

@@ -184,9 +184,6 @@ Switch.propTypes = {
   /** When true, validation icon will be placed on label instead of being placed by the input */
   validationOnLabel: PropTypes.bool,
 
-  /** Override tab index on the validation and help icon */
-  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Triggers loading animation */
   loading: PropTypes.bool,
 

package/esm/components/switch/switch.d.ts

@@ -15,8 +15,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
   adaptiveLabelBreakpoint?: number;
   /** Set the default value of the Switch if component is meant to be used as uncontrolled */
   defaultChecked?: boolean;
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex?: number | string;
   /** Text alignment of the label */
   labelAlign?: LabelAlign;
   /** When true label is inline */

package/esm/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError: (childId: string, hasError: boolean) => void;
-  setWarning: (childId: string, hasWarning: boolean) => void;
-  setInfo: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, hasError: boolean) => void;
+  setWarning?: (childId: string, hasWarning: boolean) => void;
+  setInfo?: (childId: string, hasInfo: boolean) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { ValidationProps } from "__internal__/validations";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../utils/helpers/tags/tags";
+import { IconType } from "../../components/icon";
+interface CommonFormFieldProps extends MarginProps, ValidationProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** The unique id of the FieldHelp component */
+    fieldHelpId?: string;
+    /** Label content */
+    label?: React.ReactNode;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** Help Icon type */
+    labelHelpIcon?: IconType;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Label width */
+    labelWidth?: number;
+    /** If true the label switches position with the input */
+    reverse?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export interface FormFieldProps extends CommonFormFieldProps, TagProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Content to be rendered inside the FormField */
+    children?: React.ReactNode;
+    /**
+     * If true, the FieldHelp will be displayed inline
+     * To be used with labelInline prop set to true
+     */
+    fieldHelpInline?: boolean;
+    /** Id of the element a label should be bound to */
+    id: string;
+    /** [Legacy] Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+}
+declare const FormField: {
+    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+export default FormField;