carbon-react 111.8.2 → 111.8.3

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";

package/esm/components/menu/menu.context.js

@@ -1,5 +1,9 @@
 import React from "react";
 export default /*#__PURE__*/React.createContext({
   menuType: "light",
-  inMenu: false
+  inMenu: false,
+  openSubmenuIndex: null,
+  setOpenSubmenuIndex:
+  /* istanbul ignore next */
+  () => {}
 });

package/esm/components/show-edit-pod/show-edit-pod.style.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { StyledFormFooter } from "../form/form.style.js";
+import { StyledFormFooter } from "../form/form.style";
 import { StyledContent } from "../pod/pod.style.js";
 import Pod from "../pod";
 const StyledPod = styled(Pod)`

package/esm/locales/en-gb.js

@@ -41,7 +41,7 @@ const enGB = {
         const isErrorPlural = isSingular(errors) && !warnings ? "is" : "are";
         const isWarningPlural = isSingular(warnings) ? "is" : "are";
 
-        if (errors && warnings && type === "warnings") {
+        if (errors && warnings && type === "warning") {
           return ["and", `${warnings} ${warningPlural}`];
         }
 

package/lib/components/form/__internal__/form-summary.component.d.ts

@@ -1,14 +1,19 @@
-export default FormSummary;
-declare function FormSummary({ fullWidth, ...props }: {
-    [x: string]: any;
-    fullWidth: any;
-}): JSX.Element;
-declare namespace FormSummary {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const errors: PropTypes.Requireable<number>;
-        const warnings: PropTypes.Requireable<number>;
-        const fullWidth: PropTypes.Requireable<boolean>;
-    }
+import React from "react";
+import { StyledInternalSummaryProps } from "./form-summary.style";
+interface SummaryProps extends StyledInternalSummaryProps {
+    errorCount?: number;
+    warningCount?: number;
+}
+export interface FormSummaryProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The total number of errors present in the form */
+    errorCount?: number;
+    /** The total number of warnings present in the form */
+    warningCount?: number;
+    /** Applies full width styling */
+    fullWidth?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const Summary: ({ type, errorCount, warningCount, }: SummaryProps) => JSX.Element | null;
+declare const FormSummary: ({ fullWidth, ...props }: FormSummaryProps) => JSX.Element;
+export default FormSummary;

package/lib/components/form/__internal__/form-summary.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Summary = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -25,32 +25,33 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Summary = ({
   type,
-  errors,
-  warnings
+  errorCount = 0,
+  warningCount = 0
 }) => {
   const l = (0, _useLocale.default)();
   const messages = {
-    errors,
-    warnings
+    errorCount,
+    warningCount
   };
-  const message = (0, _react.useMemo)(() => l.errors.messages.formSummary(errors, warnings, type), [l.errors.messages, errors, warnings, type]);
+  const message = (0, _react.useMemo)(() => l.errors.messages.formSummary(errorCount, warningCount, type), [l.errors.messages, errorCount, warningCount, type]);
 
-  if (messages[type]) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formSummary.StyledMessagePrefix, null, message[0]), /*#__PURE__*/_react.default.createElement(_formSummary.StyledInternalSummary, {
+  if (messages[`${type}Count`]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formSummary.StyledMessagePrefix, null, message === null || message === void 0 ? void 0 : message[0]), /*#__PURE__*/_react.default.createElement(_formSummary.StyledInternalSummary, {
       type: type,
-      "data-element": type
+      "data-element": `${type}s`
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: type.slice(0, -1)
-    }), /*#__PURE__*/_react.default.createElement("span", null, message[1])));
+      type: type
+    }), /*#__PURE__*/_react.default.createElement("span", null, message === null || message === void 0 ? void 0 : message[1])));
   }
 
   return null;
 };
 
+exports.Summary = Summary;
 Summary.propTypes = {
-  type: _propTypes.default.oneOf(["errors", "warnings"]),
-  errors: _propTypes.default.number,
-  warnings: _propTypes.default.number
+  "errorCount": _propTypes.default.number,
+  "type": _propTypes.default.oneOf(["error", "warning"]).isRequired,
+  "warningCount": _propTypes.default.number
 };
 
 const FormSummary = ({
@@ -58,21 +59,21 @@ const FormSummary = ({
   ...props
 }) => {
   return /*#__PURE__*/_react.default.createElement(_formSummary.StyledFormSummary, {
-    showSummary: props.errors || props.warnings,
+    showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/_react.default.createElement(Summary, _extends({
-    type: "errors"
+    type: "error"
   }, props)), /*#__PURE__*/_react.default.createElement(Summary, _extends({
-    type: "warnings"
+    type: "warning"
   }, props)), props.children);
 };
 
 FormSummary.propTypes = {
-  children: _propTypes.default.node,
-  errors: _propTypes.default.number,
-  warnings: _propTypes.default.number,
-  fullWidth: _propTypes.default.bool
+  "children": _propTypes.default.node,
+  "errorCount": _propTypes.default.number,
+  "fullWidth": _propTypes.default.bool,
+  "warningCount": _propTypes.default.number
 };
 var _default = FormSummary;
 exports.default = _default;

package/lib/components/form/__internal__/form-summary.style.d.ts

@@ -1,3 +1,11 @@
-export const StyledFormSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledFormSummaryProps = {
+    showSummary?: boolean;
+    fullWidth?: boolean;
+};
+export declare const StyledFormSummary: import("styled-components").StyledComponent<"div", any, StyledFormSummaryProps, never>;
+export declare const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare type StyledInternalSummaryProps = {
+    type: "error" | "warning";
+};
+export declare const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, StyledInternalSummaryProps, never>;
+export {};

package/lib/components/form/__internal__/form-summary.style.js

@@ -7,8 +7,6 @@ exports.StyledInternalSummary = exports.StyledMessagePrefix = exports.StyledForm
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
 var _button = _interopRequireDefault(require("../../button/button.style"));
@@ -63,12 +61,12 @@ const StyledInternalSummary = _styledComponents.default.div`
   }
   ${({
   type
-}) => type === "warnings" && (0, _styledComponents.css)`
+}) => type === "warning" && (0, _styledComponents.css)`
       color: var(--colorsSemanticCaution650);
     `}
   ${({
   type
-}) => type === "errors" && (0, _styledComponents.css)`
+}) => type === "error" && (0, _styledComponents.css)`
       color: var(--colorsSemanticNegative600);
     `}
 
@@ -76,21 +74,14 @@ const StyledInternalSummary = _styledComponents.default.div`
     margin-right: 4px;
     ${({
   type
-}) => type === "warnings" && (0, _styledComponents.css)`
+}) => type === "warning" && (0, _styledComponents.css)`
         color: var(--colorsSemanticCaution650);
       `}
     ${({
   type
-}) => type === "errors" && (0, _styledComponents.css)`
+}) => type === "error" && (0, _styledComponents.css)`
         color: var(--colorsSemanticNegative600);
       `}
   }
 `;
-exports.StyledInternalSummary = StyledInternalSummary;
-StyledFormSummary.propTypes = {
-  showSummary: _propTypes.default.bool,
-  fullWidth: _propTypes.default.bool
-};
-StyledInternalSummary.propTypes = {
-  type: _propTypes.default.oneOf(["errors", "warnings"])
-};
+exports.StyledInternalSummary = StyledInternalSummary;

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

@@ -1,21 +1,36 @@
-export default Form;
-declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: {
-    [x: string]: any;
-    children: any;
-    saveButton: any;
-    leftSideButtons: any;
-    rightSideButtons: any;
-    errorCount: any;
-    warningCount: any;
-    onSubmit: any;
-    buttonAlignment?: string | undefined;
-    stickyFooter: any;
-    fieldSpacing?: number | undefined;
-    noValidate?: boolean | undefined;
-    height: any;
-    fullWidthButtons?: boolean | undefined;
-}): JSX.Element;
-declare namespace Form {
-    const propTypes: any;
-    const displayName: string;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { FormButtonAlignment } from "./form.config";
+export interface FormProps extends SpaceProps {
+    /** Alignment of buttons */
+    buttonAlignment?: FormButtonAlignment;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The total number of errors present in the form */
+    errorCount?: number;
+    /** Spacing between form fields, given number will be multiplied by base spacing unit (8) */
+    fieldSpacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /** Additional buttons rendered on the left side of the save button */
+    leftSideButtons?: React.ReactNode;
+    /** Disable HTML5 validation */
+    noValidate?: boolean;
+    /** Callback passed to the form element */
+    onSubmit?: React.FormEventHandler;
+    /** Additional buttons rendered on the right side of the save button */
+    rightSideButtons?: React.ReactNode;
+    /** Save button to be rendered */
+    saveButton?: React.ReactNode;
+    /** Enables the sticky footer. */
+    stickyFooter?: boolean;
+    /** The total number of warnings present in the form */
+    warningCount?: number;
+    /** Height of the form (any valid CSS value) */
+    height?: 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?: boolean;
 }
+export declare const Form: {
+    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: FormProps): JSX.Element;
+    displayName: string;
+};
+export default Form;