carbon-react 104.58.2 → 104.58.5

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -20,7 +20,8 @@ const HiddenCheckableInput = ({
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    ariaLabelledBy
   } = useContext(InputContext);
   const {
     onBlur: onBlurGroup,
@@ -61,7 +62,9 @@ const HiddenCheckableInput = ({
     role: role || type,
     type: type,
     value: value
-  }, props, {
+  }, props, ariaLabelledBy && {
+    "aria-labelledby": ariaLabelledBy
+  }, {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onMouseEnter: handleMouseEnter,

package/esm/__internal__/input/input.component.js

@@ -79,6 +79,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   };
 
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    "aria-labelledby": context.ariaLabelledBy,
     align: align,
     placeholder: placeholder,
     disabled: disabled,

package/esm/__internal__/input-behaviour/input-behaviour.component.js

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
+import { InlineInputsContext } from "../../components/inline-inputs/inline-inputs.component";
 import useInputBehaviour from "./useInputBehaviour";
 const defaultValue = {};
 const InputContext = /*#__PURE__*/React.createContext(defaultValue);
@@ -8,8 +9,13 @@ const InputBehaviour = ({
   children
 }) => {
   const contextValue = useInputBehaviour();
+  const {
+    ariaLabelledBy
+  } = useContext(InlineInputsContext);
   return /*#__PURE__*/React.createElement(InputContext.Provider, {
-    value: contextValue
+    value: { ...contextValue,
+      ariaLabelledBy
+    }
   }, children);
 };
 

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

@@ -1,50 +1,4 @@
+/// <reference types="react" />
+import { DialogProps } from "../dialog/dialog";
+export declare const Alert: ({ children, size, ...rest }: DialogProps) => JSX.Element;
 export default Alert;
-declare function Alert({ children, ...rest }: {
-    [x: string]: any;
-    children: any;
-}): JSX.Element;
-declare namespace Alert {
-    const propTypes: {
-        /** Prop to specify the aria-describedby property of the component */
-        "aria-describedby": PropTypes.Requireable<string>;
-        /**
-         * Prop to specify the aria-label of the component.
-         * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-         */
-        "aria-label": PropTypes.Requireable<string>;
-        /**
-         * Prop to specify the aria-labeledby property of the component
-         * To be used when the title prop is a custom React Node,
-         * or the component is labelled by an internal element other than the title.
-         */
-        "aria-labelledby": PropTypes.Requireable<string>;
-        /** Alert content */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /** Controls the open state of the component */
-        open: PropTypes.Validator<boolean>;
-        /** A custom close event handler */
-        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Determines if the Esc Key closes the Alert */
-        disableEscKey: PropTypes.Requireable<boolean>;
-        /** Allows developers to specify a specific height for the dialog. */
-        height: PropTypes.Requireable<string>;
-        /** Title displayed at top of Alert */
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /** Subtitle displayed at top of Alert */
-        subtitle: PropTypes.Requireable<string>;
-        /** Size of Alert */
-        size: PropTypes.Requireable<string>;
-        /** Determines if the close icon is shown */
-        showCloseIcon: PropTypes.Requireable<boolean>;
-        /** Optional reference to an element meant to be focused on open */
-        focusFirstElement: PropTypes.Requireable<PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-        /** Disables auto focus functionality on child elements */
-        disableAutoFocus: PropTypes.Requireable<boolean>;
-    };
-    namespace defaultProps {
-        const size: string;
-    }
-}
-import PropTypes from "prop-types";

package/esm/components/alert/alert.component.js

@@ -1,70 +1,268 @@
-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); }
+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);
+}
 
 import React from "react";
 import PropTypes from "prop-types";
 import Dialog from "../dialog";
-
-const Alert = ({
-  children,
-  ...rest
-}) => /*#__PURE__*/React.createElement(Dialog, _extends({
-  "data-component": "alert",
-  role: "alertdialog"
-}, rest), children);
+const Alert = ({ children, size = "extra-small", ...rest }) =>
+  /*#__PURE__*/ React.createElement(
+    Dialog,
+    _extends(
+      {
+        "data-component": "alert",
+        role: "alertdialog",
+        size: size,
+      },
+      rest
+    ),
+    children
+  );
 
 Alert.propTypes = {
-  /** Prop to specify the aria-describedby property of the component */
+  /**
+   * Prop to specify the aria-describedby property of the Dialog component
+   */
   "aria-describedby": PropTypes.string,
-
   /**
-   * Prop to specify the aria-label of the component.
+   * Prop to specify the aria-label of the Dialog component.
    * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
    */
   "aria-label": PropTypes.string,
-
   /**
-   * Prop to specify the aria-labeledby property of the component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
   "aria-labelledby": PropTypes.string,
-
-  /** Alert content */
+  /**
+   * The ARIA role to be applied to the modal
+   */
+  ariaRole: PropTypes.string,
+  /**
+   * Modal content
+   */
   children: PropTypes.node,
-
-  /** Controls the open state of the component */
-  open: PropTypes.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: PropTypes.func,
-
-  /** Determines if the Esc Key closes the Alert */
+  /**
+   * Padding to be set on the Dialog content
+   */
+  contentPadding: PropTypes.shape({
+    p: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+  }),
+  disableAutoFocus: PropTypes.bool,
+  /**
+   * Determines if the Dialog can be closed
+   */
+  disableClose: PropTypes.bool,
+  /**
+   * Determines if the Esc Key closes the modal
+   */
   disableEscKey: PropTypes.bool,
-
-  /** Allows developers to specify a specific height for the dialog. */
+  disableFocusTrap: PropTypes.bool,
+  /**
+   * Determines if the background is disabled when the modal is open
+   */
+  enableBackgroundUI: PropTypes.bool,
+  /**
+   * Optional reference to an element meant to be focused on open
+   */
+  focusFirstElement: PropTypes.shape({
+    current: function (props, propName) {
+      if (props[propName] == null) {
+        return new Error(
+          "Prop '" + propName + "' is required but wasn't specified"
+        );
+      } else if (
+        typeof props[propName] !== "object" ||
+        props[propName].nodeType !== 1
+      ) {
+        return new Error(
+          "Expected prop '" + propName + "' to be of type Element"
+        );
+      }
+    },
+  }),
+  /**
+   * Allows developers to specify a specific height for the dialog.
+   */
   height: PropTypes.string,
-
-  /** Title displayed at top of Alert */
-  title: PropTypes.node,
-
-  /** Subtitle displayed at top of Alert */
-  subtitle: PropTypes.string,
-
-  /** Size of Alert */
-  size: PropTypes.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Determines if the close icon is shown */
+  /**
+   * Adds Help tooltip to Header
+   */
+  help: PropTypes.string,
+  /**
+   * A custom close event handler
+   */
+  onCancel: PropTypes.func,
+  /**
+   * Sets the open state of the modal
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The ARIA role to be applied to the Dialog container
+   */
+  role: PropTypes.string,
+  /**
+   * Determines if the close icon is shown
+   */
   showCloseIcon: PropTypes.bool,
+  /**
+   * Size of dialog, default size is 750px
+   */
+  size: PropTypes.oneOf([
+    "auto",
+    "extra-large",
+    "extra-small",
+    "large",
+    "medium-large",
+    "medium-small",
+    "medium",
+    "small",
+  ]),
+  /**
+   * Subtitle displayed at top of dialog
+   */
+  subtitle: PropTypes.string,
+  /**
+   * Transition time
+   */
+  timeout: PropTypes.number,
+  /**
+   * Title displayed at top of dialog
+   */
+  title: PropTypes.node,
+};
 
-  /** Optional reference to an element meant to be focused on open */
+Alert.propTypes = {
+  /**
+   * Prop to specify the aria-describedby property of the Dialog component
+   */
+  "aria-describedby": PropTypes.string,
+  /**
+   * Prop to specify the aria-label of the Dialog component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": PropTypes.string,
+  /**
+   * Prop to specify the aria-labelledby property of the Dialog component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": PropTypes.string,
+  /**
+   * The ARIA role to be applied to the modal
+   */
+  ariaRole: PropTypes.string,
+  /**
+   * Modal content
+   */
+  children: PropTypes.node,
+  /**
+   * Padding to be set on the Dialog content
+   */
+  contentPadding: PropTypes.shape({
+    p: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+  }),
+  disableAutoFocus: PropTypes.bool,
+  /**
+   * Determines if the Dialog can be closed
+   */
+  disableClose: PropTypes.bool,
+  /**
+   * Determines if the Esc Key closes the modal
+   */
+  disableEscKey: PropTypes.bool,
+  disableFocusTrap: PropTypes.bool,
+  /**
+   * Determines if the background is disabled when the modal is open
+   */
+  enableBackgroundUI: PropTypes.bool,
+  /**
+   * Optional reference to an element meant to be focused on open
+   */
   focusFirstElement: PropTypes.shape({
-    current: PropTypes.any
+    current: function (props, propName) {
+      if (props[propName] == null) {
+        return new Error(
+          "Prop '" + propName + "' is required but wasn't specified"
+        );
+      } else if (
+        typeof props[propName] !== "object" ||
+        props[propName].nodeType !== 1
+      ) {
+        return new Error(
+          "Expected prop '" + propName + "' to be of type Element"
+        );
+      }
+    },
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: PropTypes.bool
-};
-Alert.defaultProps = {
-  size: "extra-small"
+  /**
+   * Allows developers to specify a specific height for the dialog.
+   */
+  height: PropTypes.string,
+  /**
+   * Adds Help tooltip to Header
+   */
+  help: PropTypes.string,
+  /**
+   * A custom close event handler
+   */
+  onCancel: PropTypes.func,
+  /**
+   * Sets the open state of the modal
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The ARIA role to be applied to the Dialog container
+   */
+  role: PropTypes.string,
+  /**
+   * Determines if the close icon is shown
+   */
+  showCloseIcon: PropTypes.bool,
+  /**
+   * Size of dialog, default size is 750px
+   */
+  size: PropTypes.oneOf([
+    "auto",
+    "extra-large",
+    "extra-small",
+    "large",
+    "medium-large",
+    "medium-small",
+    "medium",
+    "small",
+  ]),
+  /**
+   * Subtitle displayed at top of dialog
+   */
+  subtitle: PropTypes.string,
+  /**
+   * Transition time
+   */
+  timeout: PropTypes.number,
+  /**
+   * Title displayed at top of dialog
+   */
+  title: PropTypes.node,
 };
-export default Alert;
+
+export { Alert };
+export default Alert;

package/esm/components/alert/index.d.ts

@@ -1 +1 @@
-export { default } from "./alert";
+export { default } from "./alert.component";

package/esm/components/carousel/carousel.component.js

@@ -70,18 +70,6 @@ const BaseCarousel = ({
     handleSlideChange(newSlideSelection);
   }
 
-  function visibleSlides() {
-    const arrayWithKeys = React.Children.map(children, (element, key) => {
-      return /*#__PURE__*/React.cloneElement(element, {
-        key: `slide-${guid()}`,
-        id: key,
-        selectedIndex: selectedSlideIndex,
-        ...element.props
-      });
-    });
-    return arrayWithKeys;
-  }
-
   function slideSelector() {
     if (!enableSlideSelector) return null;
     const buttons = [];
@@ -142,7 +130,7 @@ const BaseCarousel = ({
     className: "carbon-carousel__content"
   }, previousButton(), /*#__PURE__*/React.createElement(CarouselSliderWrapper, {
     elementIndex: selectedSlideIndex
-  }, visibleSlides()), nextButton()), slideSelector());
+  }, children), nextButton()), slideSelector());
 };
 
 BaseCarousel.propTypes = {

package/esm/components/carousel/carousel.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import Icon from "../icon";
 import { slideAnimation, fadeAnimation } from "./slide.config";
+import { SlideStyle } from "./slide/slide.style";
 const CarouselNavigationStyle = styled.div`
   margin-top: -32.5px;
   position: absolute;
@@ -117,9 +118,17 @@ const CarouselSliderWrapper = styled.div`
   transition: 0.4s;
   display: flex;
   position: relative;
-  left: ${({
+
+  ${({
   elementIndex
-}) => 10 - 80 * elementIndex}%;
+}) => css`
+    left: ${10 - 80 * elementIndex}%;
+
+    ${SlideStyle}:nth-of-type(${elementIndex + 1}) {
+      transform: scale(1);
+      opacity: 1;
+    }
+  `}
 `;
 const CarouselWrapperStyle = styled.div`
   .carbon-carousel__content {

package/esm/components/carousel/slide/slide.component.js

@@ -6,9 +6,7 @@ import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { SlideStyle } from "./slide.style";
 import baseTheme from "../../../style/themes/base";
 
-const Slide = props => {
-  return /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
-};
+const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
 
 Slide.defaultProps = {
   theme: baseTheme

package/esm/components/carousel/slide/slide.style.js

@@ -1,9 +1,7 @@
 import styled, { css } from "styled-components";
 const SlideStyle = styled.div`
   ${({
-  onClick,
-  id,
-  selectedIndex
+  onClick
 }) => css`
     box-sizing: border-box;
     display: inline-block;
@@ -18,17 +16,12 @@ const SlideStyle = styled.div`
     box-shadow: var(--boxShadow200);
     background-color: var(--colorsUtilityYang100);
 
-    ${id === selectedIndex && css`
-      transform: scale(1);
-      opacity: 1;
-
-      ${onClick && css`
-        :hover {
-          transition: all 0.2s ease-in;
-          transform: scale(1.02);
-          cursor: pointer;
-        }
-      `}
+    ${onClick && css`
+      :hover {
+        transition: all 0.2s ease-in;
+        transform: scale(1.02);
+        cursor: pointer;
+      }
     `}
   `}
 `; // eslint-disable-next-line import/prefer-default-export

package/esm/components/checkbox/checkbox-group.component.d.ts

@@ -1,4 +1,6 @@
+export const CheckboxGroupContext: React.Context<{}>;
 export default CheckboxGroup;
+import React from "react";
 declare function CheckboxGroup(props: any): JSX.Element;
 declare namespace CheckboxGroup {
     namespace propTypes {

package/esm/components/checkbox/checkbox-group.component.js

@@ -9,6 +9,7 @@ import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 
 const CheckboxGroup = props => {
   const {
@@ -42,13 +43,14 @@ const CheckboxGroup = props => {
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     legendInline: legendInline
-  }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
-    inputName: groupName,
-    error: !!error,
-    warning: !!warning,
-    info: !!info,
-    ...child.props
-  })))));
+  }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: {
+      inputName: groupName,
+      error: !!error,
+      warning: !!warning,
+      info: !!info
+    }
+  }, children))));
 };
 
 CheckboxGroup.propTypes = {

package/esm/components/checkbox/checkbox.component.js

@@ -1,6 +1,6 @@
 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); }
 
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import CheckboxStyle from "./checkbox.style";
@@ -9,6 +9,7 @@ import CheckboxSvg from "./checkbox-svg.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import { CheckboxGroupContext } from "./checkbox-group.component";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Checkbox = ({
@@ -47,6 +48,12 @@ const Checkbox = ({
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
+  const {
+    error: contextError,
+    warning: contextWarning,
+    info: contextInfo,
+    inputName
+  } = useContext(CheckboxGroupContext);
   const inputProps = {
     onClick,
     onChange,
@@ -64,15 +71,16 @@ const Checkbox = ({
     labelHelp,
     labelSpacing,
     required,
-    error,
-    warning,
-    info,
+    error: contextError || error,
+    warning: contextWarning || warning,
+    info: contextInfo || info,
     fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
     tooltipPosition,
+    inputName,
     ...props
   };
   return /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -86,9 +94,9 @@ const Checkbox = ({
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
     adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen,
-    error: error,
-    warning: warning,
-    info: info,
+    error: contextError || error,
+    warning: contextWarning || warning,
+    info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size

package/esm/components/dialog/dialog.component.js

@@ -10,7 +10,6 @@ import { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentSt
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
 import Icon from "../icon";
-import Form from "../form";
 import { TOP_MARGIN } from "./dialog.config";
 import useLocale from "../../hooks/__internal__/useLocale";
 
@@ -168,15 +167,7 @@ const Dialog = ({
     role: role
   }, contentPadding), dialogTitle(), /*#__PURE__*/React.createElement(DialogContentStyle, contentPadding, /*#__PURE__*/React.createElement(DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, contentPadding), React.Children.map(children, child => {
-    if ((child === null || child === void 0 ? void 0 : child.type) === Form) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        dialogRef
-      });
-    }
-
-    return child;
-  }))), closeIcon())));
+  }, contentPadding), children)), closeIcon())));
 };
 
 Dialog.propTypes = {

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

@@ -1,5 +1,5 @@
 export default Form;
-declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, dialogRef, fieldSpacing, noValidate, height, ...rest }: {
+declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, ...rest }: {
     [x: string]: any;
     children: any;
     saveButton: any;
@@ -10,7 +10,6 @@ declare function Form({ children, saveButton, leftSideButtons, rightSideButtons,
     onSubmit: any;
     buttonAlignment?: string | undefined;
     stickyFooter: any;
-    dialogRef: any;
     fieldSpacing?: number | undefined;
     noValidate?: boolean | undefined;
     height: any;