carbon-react 111.8.2 → 111.8.4

package/esm/components/form/form.component.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { SidebarContext } from "../sidebar/sidebar.component";
 import { ModalContext } from "../modal/modal.component";
 import FormSummary from "./__internal__/form-summary.component";
@@ -30,8 +29,8 @@ const Form = ({
   const {
     isInModal
   } = useContext(ModalContext);
-  const formRef = useRef();
-  const formFooterRef = useRef();
+  const formRef = useRef(null);
+  const formFooterRef = useRef(null);
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
@@ -58,8 +57,8 @@ const Form = ({
   }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
-    errors: errorCount,
-    warnings: warningCount
+    errorCount: errorCount,
+    warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     buttonAlignment: buttonAlignment
   }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
@@ -75,51 +74,334 @@ const Form = ({
     fullWidthButtons: fullWidthButtons
   }, rightSideButtons), /*#__PURE__*/React.createElement(StyledFullWidthButtons, null, /*#__PURE__*/React.createElement(FormSummary, {
     fullWidth: fullWidthButtons,
-    errors: errorCount,
-    warnings: warningCount
+    errorCount: errorCount,
+    warningCount: warningCount
   }, saveButton))));
 };
 
-Form.propTypes = { ...styledSystemPropTypes.space,
-
-  /** Alignment of buttons */
-  buttonAlignment: PropTypes.oneOf(["left", "right"]),
-
-  /** Enables the sticky footer. */
-  stickyFooter: PropTypes.bool,
-
-  /** Additional buttons rendered on the left side of the save button */
-  leftSideButtons: PropTypes.node,
-
-  /** Additional buttons rendered on the right side of the save button */
-  rightSideButtons: PropTypes.node,
-
-  /** Callback passed to the form element */
-  onSubmit: PropTypes.func,
-
-  /** Child elements */
-  children: PropTypes.node,
-
-  /** Save button to be rendered */
-  saveButton: PropTypes.node,
-
-  /** The total number of errors present in the form */
-  errorCount: PropTypes.number,
-
-  /** The total number of warnings present in the form */
-  warningCount: PropTypes.number,
-
-  /** Spacing between form fields, given number will be multiplied by base spacing unit (8) */
-  fieldSpacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 7]),
-
-  /** Disable HTML5 validation */
-  noValidate: PropTypes.bool,
-
-  /** Height of the form (any valid CSS value) */
-  height: PropTypes.string,
-
-  /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
-  fullWidthButtons: PropTypes.bool
+Form.propTypes = {
+  "buttonAlignment": PropTypes.oneOf(["left", "right"]),
+  "children": PropTypes.node,
+  "errorCount": PropTypes.number,
+  "fieldSpacing": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7]),
+  "fullWidthButtons": PropTypes.bool,
+  "height": PropTypes.string,
+  "leftSideButtons": PropTypes.node,
+  "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]),
+  "noValidate": PropTypes.bool,
+  "onSubmit": PropTypes.func,
+  "p": 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]),
+  "padding": 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]),
+  "paddingBottom": 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]),
+  "paddingLeft": 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]),
+  "paddingRight": 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]),
+  "paddingTop": 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]),
+  "paddingX": 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]),
+  "paddingY": 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]),
+  "pb": 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]),
+  "pl": 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]),
+  "pr": 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]),
+  "pt": 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]),
+  "px": 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]),
+  "py": 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]),
+  "rightSideButtons": PropTypes.node,
+  "saveButton": PropTypes.node,
+  "stickyFooter": PropTypes.bool,
+  "warningCount": PropTypes.number
 };
+export { Form };
 Form.displayName = "Form";
 export default Form;

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

@@ -1 +1,2 @@
-export const FORM_BUTTON_ALIGNMENTS: string[];
+export declare const FORM_BUTTON_ALIGNMENTS: readonly ["left", "right"];
+export declare type FormButtonAlignment = typeof FORM_BUTTON_ALIGNMENTS[number];

package/esm/components/form/form.config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export const FORM_BUTTON_ALIGNMENTS = ["left", "right"];

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

@@ -1,6 +1,21 @@
-export const StyledFormContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledFormFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledForm: import("styled-components").StyledComponent<"form", any, {}, never>;
-export const StyledRightButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { FormButtonAlignment } from "./form.config";
+interface StyledFormContentProps {
+    stickyFooter?: boolean;
+    isInModal?: boolean;
+}
+export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
+interface ButtonProps extends StyledFormContentProps {
+    buttonAlignment?: FormButtonAlignment;
+    fullWidthButtons?: boolean;
+}
+export declare const StyledFormFooter: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+interface StyledFormProps extends StyledFormContentProps {
+    height?: string;
+    fieldSpacing: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    isInSidebar?: boolean;
+}
+export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
+export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+export declare const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+export {};

package/esm/components/form/form.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { space } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import { StyledFieldset } from "../../__internal__/fieldset/fieldset.style";
@@ -7,7 +6,6 @@ import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import { FieldsetStyle } from "../fieldset/fieldset.style";
 import StyledInlineInputs from "../inline-inputs/inline-inputs.style";
-import { FORM_BUTTON_ALIGNMENTS } from "./form.config";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
 export const StyledFormContent = styled.div`
@@ -67,6 +65,7 @@ const formBottomMargins = fieldSpacing => ({
   3: "var(--spacing300)",
   4: "var(--spacing400)",
   5: "var(--spacing500)",
+  6: "var(--spacing600)",
   7: "var(--spacing700)"
 })[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 
@@ -178,21 +177,6 @@ export const StyledLeftButtons = styled.div`
     margin-right: 0;
   }
 `;
-StyledForm.propTypes = {
-  theme: PropTypes.object,
-  stickyFooter: PropTypes.bool,
-  fieldSpacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 7])
-};
 StyledForm.defaultProps = {
   theme: baseTheme
-};
-StyledLeftButtons.propTypes = {
-  buttonAlignment: PropTypes.oneOf(FORM_BUTTON_ALIGNMENTS)
-};
-StyledRightButtons.propTypes = {
-  buttonAlignment: PropTypes.oneOf(FORM_BUTTON_ALIGNMENTS)
-};
-StyledFormFooter.propTypes = {
-  buttonAlignment: PropTypes.oneOf(FORM_BUTTON_ALIGNMENTS),
-  stickyFooter: PropTypes.bool
 };

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

@@ -1 +1,2 @@
-export { default } from "./form";
+export { default } from "./form.component";
+export type { FormProps } from "./form.component";

package/esm/components/menu/__internal__/spec-helper/index.js

@@ -1,5 +1,6 @@
 import { act } from "react-dom/test-utils";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
+import { StyledSubmenuWrapper } from "../submenu/submenu.style";
 const events = {
   space: {
     key: " ",
@@ -7,12 +8,12 @@ const events = {
   }
 };
 
-const openSubmenu = wrapper => {
-  const menuWrapper = wrapper.find('[data-component="submenu-wrapper"]');
+const openSubmenu = (wrapper, index = 0) => {
+  const menuWrapper = wrapper.find(StyledSubmenuWrapper).at(index);
   const menuItem = menuWrapper.exists("a") ? menuWrapper.find("a") : menuWrapper.find("button");
   menuItem.getDOMNode().focus();
   act(() => {
-    wrapper.find(StyledMenuItemWrapper).at(0).props().onKeyDown(events.space);
+    menuWrapper.find(StyledMenuItemWrapper).props().onKeyDown(events.space);
   });
   wrapper.update();
 };

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -29,12 +29,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onSubmenuOpen,
   onSubmenuClose,
   onClick,
+  indexInMenu,
   ...rest
 }, ref) => {
   const [blockDoubleFocus, setBlockDoubleFocus] = useState(false);
   const menuContext = useContext(MenuContext);
   const {
-    inFullscreenView
+    inFullscreenView,
+    openSubmenuIndex,
+    setOpenSubmenuIndex
   } = menuContext;
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [submenuFocusIndex, setSubmenuFocusIndex] = useState(undefined);
@@ -78,15 +81,26 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [startCharacterTimeout]);
   const openSubmenu = useCallback(() => {
     setSubmenuOpen(true);
+    setOpenSubmenuIndex(indexInMenu);
     if (onSubmenuOpen) onSubmenuOpen();
-  }, [onSubmenuOpen]);
+  }, [onSubmenuOpen, indexInMenu, setOpenSubmenuIndex]);
   const closeSubmenu = useCallback(() => {
     setSubmenuOpen(false);
+
+    if (openSubmenuIndex === indexInMenu) {
+      setOpenSubmenuIndex(null);
+    }
+
     if (onSubmenuClose) onSubmenuClose();
     setSubmenuFocusIndex(undefined);
     setBlockDoubleFocus(false);
     setCharacterString("");
-  }, [onSubmenuClose]);
+  }, [onSubmenuClose, setOpenSubmenuIndex, indexInMenu, openSubmenuIndex]);
+  useEffect(() => {
+    if (openSubmenuIndex !== indexInMenu) {
+      closeSubmenu();
+    }
+  }, [openSubmenuIndex, indexInMenu, closeSubmenu]);
   const handleKeyDown = useCallback((event, index = submenuFocusIndex) => {
     if (!submenuOpen) {
       if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
@@ -350,6 +364,9 @@ Submenu.propTypes = {
   onSubmenuClose: PropTypes.func,
 
   /** Callback triggered when the top-level menu item is clicked */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /** index of child in the parent menu */
+  indexInMenu: PropTypes.number
 };
 export default Submenu;

package/esm/components/menu/menu-item/menu-item.component.js

@@ -33,12 +33,13 @@ const MenuItem = ({
   onSubmenuClose,
   overrideColor,
   rel,
+  isFocused,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
   const submenuContext = useContext(SubmenuContext);
   const ref = useRef(null);
-  const focusFromMenu = menuContext.isFocused;
+  const focusFromMenu = isFocused;
   const focusFromSubmenu = submenuContext.isFocused;
   const isChildSearch = useRef(false);
   const childRef = useRef();
@@ -238,6 +239,13 @@ MenuItem.propTypes = {
   onSubmenuClose: PropTypes.func,
 
   /** @ignore @private */
-  overrideColor: PropTypes.bool
+  overrideColor: PropTypes.bool,
+
+  /** @ignore @private */
+  isFocused: PropTypes.bool,
+
+  /** @ignore @private */
+  indexInMenu: PropTypes.number
 };
+MenuItem.displayName = "MenuItem";
 export default MenuItem;

package/esm/components/menu/menu.component.js

@@ -14,6 +14,7 @@ const Menu = ({
   ...rest
 }) => {
   const [focusedItemIndex, setFocusedItemIndex] = useState(undefined);
+  const [openSubmenuIndex, setOpenSubmenuIndex] = useState(null);
   const ref = useRef();
   const handleKeyDown = useCallback(event => {
     const newIndex = menuKeyboardNavigation(event, React.Children.toArray(children));
@@ -38,17 +39,26 @@ const Menu = ({
   }, rest, {
     ref: ref,
     role: "list"
-  }), React.Children.map(children, (child, index) => {
+  }), /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: {
+      menuType,
+      handleKeyDown,
+      inMenu: true,
+      openSubmenuIndex,
+      setOpenSubmenuIndex
+    }
+  }, React.Children.map(children, (child, index) => {
     const isFocused = focusedItemIndex === index;
-    return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-      value: {
-        menuType,
-        handleKeyDown: ev => handleKeyDown(ev, index),
+
+    if ( /*#__PURE__*/React.isValidElement(child) && child.type.displayName === "MenuItem" && child.props.submenu) {
+      return /*#__PURE__*/React.cloneElement(child, {
         isFocused,
-        inMenu: true
-      }
-    }, child);
-  }));
+        indexInMenu: index
+      });
+    }
+
+    return child;
+  })));
 };
 
 Menu.propTypes = {

package/esm/components/menu/menu.context.d.ts

@@ -1,6 +1,8 @@
 declare var _default: React.Context<{
     menuType: string;
     inMenu: boolean;
+    openSubmenuIndex: null;
+    setOpenSubmenuIndex: () => void;
 }>;
 export default _default;
 import React from "react";