carbon-react 107.1.7 → 107.2.1

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

@@ -3,9 +3,10 @@ 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 { ModalContext } from "../modal/modal.component";
+import { SidebarContext } from "../sidebar/sidebar.component";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
-import { SidebarContext } from "../sidebar/sidebar.component";
 
 const Form = ({
   children,
@@ -25,6 +26,9 @@ const Form = ({
   const {
     isInSidebar
   } = useContext(SidebarContext);
+  const {
+    isInModal
+  } = useContext(ModalContext);
   const formRef = useRef();
   const formFooterRef = useRef();
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
@@ -39,8 +43,9 @@ const Form = ({
     height: height
   }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
+    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
-    className: stickyFooter ? "sticky" : ""
+    isInModal: isInModal
   }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",

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

@@ -12,10 +12,11 @@ import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
 export const StyledFormContent = styled.div`
   ${({
-  stickyFooter
+  stickyFooter,
+  isInModal
 }) => css`
     ${stickyFooter && css`
-      overflow-y: auto;
+      overflow-y: ${isInModal ? "visible" : "auto"};
       flex: 1;
     `}
   `}

package/esm/components/heading/heading.component.js

@@ -6,6 +6,7 @@ import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
+import useLocale from "../../hooks/__internal__/useLocale";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Heading = ({
@@ -32,6 +33,8 @@ const Heading = ({
     }, help);
   };
 
+  const l = useLocale();
+
   const getBackButton = () => {
     const backButtonProps = typeof backLink === "string" ? {
       href: backLink
@@ -40,8 +43,9 @@ const Heading = ({
     };
     return /*#__PURE__*/React.createElement(StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
     , _extends({
-      onMouseDown: e => e.currentTarget.focus(),
-      "data-element": "back"
+      "aria-label": l.heading.backLinkAriaLabel(),
+      "data-element": "back",
+      onMouseDown: e => e.currentTarget.focus()
     }, backButtonProps), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
       type: "chevron_left",
       divider: divider

package/esm/components/help/help.component.js

@@ -59,6 +59,7 @@ const Help = ({
 
   return /*#__PURE__*/React.createElement(StyledHelp, _extends({
     "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
+    "aria-label": helpAriaLabel || ariaLabel,
     className: className,
     as: tagType,
     href: href,
@@ -77,8 +78,7 @@ const Help = ({
     target: "_blank",
     rel: "noopener noreferrer"
   } : {
-    role: "button",
-    "aria-label": helpAriaLabel || ariaLabel
+    role: "button"
   }, filterStyledSystemMarginProps(rest), rest), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     type: type,

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

@@ -191,9 +191,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   };
 
   const handleClick = event => {
-    if (clickToOpen) {
-      openSubmenu();
-    }
+    openSubmenu();
 
     if (onClick) {
       onClick(event);

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

@@ -1 +1 @@
-export { default } from "./modal";
+export { default, ModalContext } from "./modal.component";

package/esm/components/modal/index.js

@@ -1 +1 @@
-export { default } from "./modal.component";
+export { default, ModalContext } from "./modal.component";

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

@@ -0,0 +1,35 @@
+export const ModalContext: React.Context<{}>;
+export default Modal;
+import React from "react";
+declare function Modal({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, ...rest }: {
+    [x: string]: any;
+    children: any;
+    open: any;
+    onCancel: any;
+    disableEscKey: any;
+    disableClose: any;
+    enableBackgroundUI: any;
+    timeout: any;
+}): JSX.Element;
+declare namespace Modal {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const open: PropTypes.Validator<boolean>;
+        const enableBackgroundUI: PropTypes.Requireable<boolean>;
+        const disableEscKey: PropTypes.Requireable<boolean>;
+        const disableClose: PropTypes.Requireable<boolean>;
+        const timeout: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        const onCancel_1: null;
+        export { onCancel_1 as onCancel };
+        const enableBackgroundUI_1: boolean;
+        export { enableBackgroundUI_1 as enableBackgroundUI };
+        const disableEscKey_1: boolean;
+        export { disableEscKey_1 as disableEscKey };
+        const timeout_1: number;
+        export { timeout_1 as timeout };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/modal/modal.d.ts

@@ -1,5 +1,14 @@
 import * as React from "react";
 
+export interface ModalContextProps {
+  value?: {
+    isInModal?: boolean;
+    isAnimationComplete?: boolean;
+    triggerRefocusFlag?: boolean;
+  };
+  ref?: React.MutableRefObject<React.ReactNode>;
+}
+
 export interface ModalProps {
   /** Modal content */
   children?: React.ReactNode;
@@ -19,6 +28,8 @@ export interface ModalProps {
   timeout?: number;
 }
 
+declare const ModelContext: React.Context<ModalContextProps>;
 declare function Modal(props: ModalProps): JSX.Element;
 
+export { ModalContext };
 export default Modal;

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

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

package/esm/locales/en-gb.js

@@ -57,6 +57,9 @@ const enGB = {
       }
     }
   },
+  heading: {
+    backLinkAriaLabel: () => "Back"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },

package/esm/locales/locale.d.ts

@@ -33,6 +33,9 @@ interface Locale {
             formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;
         };
     };
+    heading: {
+        backLinkAriaLabel: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };

package/esm/locales/pl-pl.js

@@ -55,6 +55,9 @@ const plPL = {
       }
     }
   },
+  heading: {
+    backLinkAriaLabel: () => "Wstecz"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },

package/lib/components/form/form.component.js

@@ -11,12 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
+var _modal = require("../modal/modal.component");
+
+var _sidebar = require("../sidebar/sidebar.component");
+
 var _formSummary = _interopRequireDefault(require("./__internal__/form-summary.component"));
 
 var _form = require("./form.style");
 
-var _sidebar = require("../sidebar/sidebar.component");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -43,6 +45,9 @@ const Form = ({
   const {
     isInSidebar
   } = (0, _react.useContext)(_sidebar.SidebarContext);
+  const {
+    isInModal
+  } = (0, _react.useContext)(_modal.ModalContext);
   const formRef = (0, _react.useRef)();
   const formFooterRef = (0, _react.useRef)();
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
@@ -57,8 +62,9 @@ const Form = ({
     height: height
   }, rest), /*#__PURE__*/_react.default.createElement(_form.StyledFormContent, {
     "data-element": "form-content",
+    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
-    className: stickyFooter ? "sticky" : ""
+    isInModal: isInModal
   }, children), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",

package/lib/components/form/form.style.js

@@ -37,10 +37,11 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledFormContent = _styledComponents.default.div`
   ${({
-  stickyFooter
+  stickyFooter,
+  isInModal
 }) => (0, _styledComponents.css)`
     ${stickyFooter && (0, _styledComponents.css)`
-      overflow-y: auto;
+      overflow-y: ${isInModal ? "visible" : "auto"};
       flex: 1;
     `}
   `}

package/lib/components/heading/heading.component.js

@@ -17,6 +17,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _heading = require("./heading.style");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -47,6 +49,8 @@ const Heading = ({
     }, help);
   };
 
+  const l = (0, _useLocale.default)();
+
   const getBackButton = () => {
     const backButtonProps = typeof backLink === "string" ? {
       href: backLink
@@ -55,8 +59,9 @@ const Heading = ({
     };
     return /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
     , _extends({
-      onMouseDown: e => e.currentTarget.focus(),
-      "data-element": "back"
+      "aria-label": l.heading.backLinkAriaLabel(),
+      "data-element": "back",
+      onMouseDown: e => e.currentTarget.focus()
     }, backButtonProps), /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingIcon, {
       type: "chevron_left",
       divider: divider

package/lib/components/help/help.component.js

@@ -83,6 +83,7 @@ const Help = ({
 
   return /*#__PURE__*/_react.default.createElement(_help.default, _extends({
     "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
+    "aria-label": helpAriaLabel || ariaLabel,
     className: className,
     as: tagType,
     href: href,
@@ -101,8 +102,7 @@ const Help = ({
     target: "_blank",
     rel: "noopener noreferrer"
   } : {
-    role: "button",
-    "aria-label": helpAriaLabel || ariaLabel
+    role: "button"
   }, (0, _utils.filterStyledSystemMarginProps)(rest), rest), /*#__PURE__*/_react.default.createElement(_icon.default, {
     "aria-hidden": true,
     type: type,

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

@@ -218,9 +218,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const handleClick = event => {
-    if (clickToOpen) {
-      openSubmenu();
-    }
+    openSubmenu();
 
     if (onClick) {
       onClick(event);

package/lib/components/modal/index.d.ts

@@ -1 +1 @@
-export { default } from "./modal";
+export { default, ModalContext } from "./modal.component";

package/lib/components/modal/index.js

@@ -9,7 +9,15 @@ Object.defineProperty(exports, "default", {
     return _modal.default;
   }
 });
+Object.defineProperty(exports, "ModalContext", {
+  enumerable: true,
+  get: function () {
+    return _modal.ModalContext;
+  }
+});
+
+var _modal = _interopRequireWildcard(require("./modal.component"));
 
-var _modal = _interopRequireDefault(require("./modal.component"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -0,0 +1,35 @@
+export const ModalContext: React.Context<{}>;
+export default Modal;
+import React from "react";
+declare function Modal({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, ...rest }: {
+    [x: string]: any;
+    children: any;
+    open: any;
+    onCancel: any;
+    disableEscKey: any;
+    disableClose: any;
+    enableBackgroundUI: any;
+    timeout: any;
+}): JSX.Element;
+declare namespace Modal {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const open: PropTypes.Validator<boolean>;
+        const enableBackgroundUI: PropTypes.Requireable<boolean>;
+        const disableEscKey: PropTypes.Requireable<boolean>;
+        const disableClose: PropTypes.Requireable<boolean>;
+        const timeout: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        const onCancel_1: null;
+        export { onCancel_1 as onCancel };
+        const enableBackgroundUI_1: boolean;
+        export { enableBackgroundUI_1 as enableBackgroundUI };
+        const disableEscKey_1: boolean;
+        export { disableEscKey_1 as disableEscKey };
+        const timeout_1: number;
+        export { timeout_1 as timeout };
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/modal/modal.d.ts

@@ -1,5 +1,14 @@
 import * as React from "react";
 
+export interface ModalContextProps {
+  value?: {
+    isInModal?: boolean;
+    isAnimationComplete?: boolean;
+    triggerRefocusFlag?: boolean;
+  };
+  ref?: React.MutableRefObject<React.ReactNode>;
+}
+
 export interface ModalProps {
   /** Modal content */
   children?: React.ReactNode;
@@ -19,6 +28,8 @@ export interface ModalProps {
   timeout?: number;
 }
 
+declare const ModelContext: React.Context<ModalContextProps>;
 declare function Modal(props: ModalProps): JSX.Element;
 
+export { ModalContext };
 export default Modal;

package/lib/components/modal/modal.style.d.ts

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

package/lib/locales/en-gb.js

@@ -64,6 +64,9 @@ const enGB = {
       }
     }
   },
+  heading: {
+    backLinkAriaLabel: () => "Back"
+  },
   message: {
     closeButtonAriaLabel: () => "Close"
   },

package/lib/locales/locale.d.ts

@@ -33,6 +33,9 @@ interface Locale {
             formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;
         };
     };
+    heading: {
+        backLinkAriaLabel: () => string;
+    };
     message: {
         closeButtonAriaLabel: () => string;
     };

package/lib/locales/pl-pl.js

@@ -62,6 +62,9 @@ const plPL = {
       }
     }
   },
+  heading: {
+    backLinkAriaLabel: () => "Wstecz"
+  },
   message: {
     closeButtonAriaLabel: () => "Zamknij"
   },

package/package.json

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