carbon-react 104.58.2 → 104.58.5

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

@@ -17,7 +17,6 @@ const Form = ({
   onSubmit,
   buttonAlignment = "right",
   stickyFooter,
-  dialogRef,
   fieldSpacing = 3,
   noValidate = true,
   height,
@@ -92,15 +91,6 @@ Form.propTypes = { ...styledSystemPropTypes.space,
   /** Disable HTML5 validation */
   noValidate: PropTypes.bool,
 
-  /**
-   * @private
-   * @ignore
-   * Used to detect if FormFooter should be sticky when used in Dialog component
-   */
-  dialogRef: PropTypes.shape({
-    current: PropTypes.any
-  }),
-
   /** Height of the form (any valid CSS value) */
   height: PropTypes.string
 };

package/esm/components/inline-inputs/inline-inputs.component.d.ts

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

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -3,23 +3,18 @@ import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
 import createGuid from "../../__internal__/utils/helpers/guid";
-
-const columnWrapper = (children, gutter) => {
-  let inputs = children;
-
-  if (!Array.isArray(inputs)) {
-    inputs = [children];
-  }
-
-  return inputs.map((input, index) => {
-    // Input is never going to be re-ordered so we don't require a defined key
-
-    /* eslint-disable react/no-array-index-key */
-    return /*#__PURE__*/React.createElement(StyledInlineInput, {
-      key: index,
+export const InlineInputsContext = /*#__PURE__*/React.createContext({});
+
+const columnWrapper = (children, gutter, labelId) => {
+  return React.Children.map(children, input => {
+    return /*#__PURE__*/React.createElement(InlineInputsContext.Provider, {
+      value: {
+        ariaLabelledBy: labelId
+      }
+    }, /*#__PURE__*/React.createElement(StyledInlineInput, {
       gutter: gutter,
       "data-element": "inline-input"
-    }, input);
+    }, input));
   });
 };
 
@@ -44,13 +39,6 @@ const InlineInputs = props => {
     }, label);
   }
 
-  function renderChildren() {
-    if (!label) return children;
-    return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
-      "aria-labelledby": labelId.current
-    }));
-  }
-
   return /*#__PURE__*/React.createElement(StyledInlineInputs, {
     gutter: gutter,
     "data-component": "inline-inputs",
@@ -60,7 +48,7 @@ const InlineInputs = props => {
     gutter: gutter,
     "data-element": "inline-inputs-container",
     inputWidth: inputWidth
-  }, columnWrapper(renderChildren(), gutter)));
+  }, columnWrapper(children, gutter, label ? labelId.current : undefined)));
 }; // Assign props over for demo site
 
 

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

@@ -109,6 +109,8 @@ const MenuItem = ({
 
   const getTitle = title => maxWidth && typeof title === "string" ? title : "";
 
+  const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
+
   if (submenu) {
     const asPassiveItem = !(onClick || href);
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
@@ -116,7 +118,7 @@ const MenuItem = ({
       menuType: menuContext.menuType,
       display: "inline-block",
       title: getTitle(submenu),
-      maxWidth: maxWidth,
+      maxWidth: itemMaxWidth,
       onClick: updateFocusOnClick
     }, rest, {
       inFullscreenView: inFullscreenView
@@ -140,7 +142,7 @@ const MenuItem = ({
     inSubmenu: submenuContext.handleKeyDown !== undefined,
     display: "inline-block",
     title: getTitle(children),
-    maxWidth: maxWidth
+    maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     menuOpen: menuOpen

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -1,14 +1,19 @@
 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, { useContext } from "react";
 import PropTypes from "prop-types";
-import React from "react";
 import StepSequenceItemStyle from "./step-sequence-item.style";
 import StepSequenceItemContentStyle from "./step-sequence-item-content.style";
 import StepSequenceItemIndicatorStyle from "./step-sequence-item-indicator.style";
 import StepSequenceItemHiddenLabelStyle from "./step-sequence-item-hidden-label.style";
 import Icon from "../../icon";
+import { StepSequenceContext } from "../step-sequence.component";
 
 const StepSequenceItem = props => {
+  const {
+    orientation
+  } = useContext(StepSequenceContext);
+
   const indicatorText = () => {
     return !props.hideIndicator ? /*#__PURE__*/React.createElement(StepSequenceItemIndicatorStyle, null, props.indicator) : null;
   };
@@ -38,6 +43,7 @@ const StepSequenceItem = props => {
   return /*#__PURE__*/React.createElement(StepSequenceItemStyle, _extends({
     "data-component": "step-sequence-item"
   }, props, {
+    orientation: orientation,
     key: `step-seq-item-${props.indicator}`
   }), hiddenLabel(), /*#__PURE__*/React.createElement(StepSequenceItemContentStyle, null, icon(), /*#__PURE__*/React.createElement("span", null, props.children)));
 };

package/esm/components/step-sequence/step-sequence.component.d.ts

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

package/esm/components/step-sequence/step-sequence.component.js

@@ -1,18 +1,21 @@
 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 PropTypes from "prop-types";
 import React from "react";
+import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import StepSequenceStyle from "./step-sequence.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+export const StepSequenceContext = /*#__PURE__*/React.createContext({});
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const StepSequence = props => {
   return /*#__PURE__*/React.createElement(StepSequenceStyle, _extends({
     "data-component": "step-sequence"
-  }, props), React.Children.map(props.children, child => /*#__PURE__*/React.cloneElement(child, { ...child.props,
-    orientation: props.orientation
-  }, child.props.children)));
+  }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
+    value: {
+      orientation: props.orientation
+    }
+  }, props.children));
 };
 
 StepSequence.propTypes = { ...marginPropTypes,

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

@@ -12,4 +12,4 @@ declare const Typography: import("styled-components").StyledComponent<"span", an
     color: any;
     bg: any;
     backgroundColor: any;
-}, "as" | "textDecoration" | "size" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;
+}, "as" | "size" | "textDecoration" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -5,6 +5,8 @@ declare class ScrollBlockManager {
     registerComponent(id: any): void;
     unregisterComponent(id: any): void;
     saveOriginalValues(values: any): void;
+    saveRestoreValuesCallback(callback: any): void;
+    getRestoreValuesCallback(): any;
     getOriginalValues(): any;
     isBlocked(): boolean;
 }

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -4,6 +4,8 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+// TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
@@ -13,11 +15,13 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
       window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
         components: {},
+        // originalValues can be removed
         originalValues: []
       };
     }
 
-    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components; // TODO: originalValues can be removed
+
     this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
 
@@ -30,13 +34,25 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     key: "unregisterComponent",
     value: function unregisterComponent(id) {
       delete this.components[id];
-    }
+    } // TODO: saveOriginalValues can be removed
+
   }, {
     key: "saveOriginalValues",
     value: function saveOriginalValues(values) {
       this.originalValues.length = 0;
       this.originalValues.push(...values);
     }
+  }, {
+    key: "saveRestoreValuesCallback",
+    value: function saveRestoreValuesCallback(callback) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues = callback;
+    }
+  }, {
+    key: "getRestoreValuesCallback",
+    value: function getRestoreValuesCallback() {
+      return window.__CARBON_INTERNALS_SCROLL_BLOCKERS.restoreValues;
+    } // TODO: getOriginalValues can be removed
+
   }, {
     key: "getOriginalValues",
     value: function getOriginalValues() {

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,6 +1,8 @@
 import { useRef, useCallback, useMemo } from "react";
 import guid from "../../../__internal__/utils/helpers/guid";
-import ScrollBlockManager from "./scroll-block-manager";
+import ScrollBlockManager from "./scroll-block-manager"; // TODO: This component can be refactored to remove redundant code after
+// we can confirm that all Sage products use version 105.0.0^
+
 const scrollBlockManager = new ScrollBlockManager();
 /* istanbul ignore next */
 
@@ -10,6 +12,7 @@ const useScrollBlock = () => {
   const {
     current: containerGuid
   } = useRef(guid());
+  const originalValuesRef = useRef();
   const rules = useMemo(() => {
     const {
       documentElement,
@@ -17,7 +20,8 @@ const useScrollBlock = () => {
     } = safeDocument;
     const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
     const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [{
+    return [// TODO: First two entries of this array with the documentElement can be removed
+    {
       element: documentElement,
       property: "position",
       blockingValue: "relative"
@@ -39,6 +43,14 @@ const useScrollBlock = () => {
       blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
     }];
   }, []);
+  const restoreValues = useCallback(() => {
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValuesRef.current[index];
+    });
+  }, [rules]);
   const blockScroll = useCallback(() => {
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
@@ -51,19 +63,32 @@ const useScrollBlock = () => {
       element,
       property
     }) => element.style[property]);
-    scrollBlockManager.saveOriginalValues(originalValues);
-    rules.forEach(({
+    originalValuesRef.current = originalValues;
+    scrollBlockManager.saveRestoreValuesCallback(restoreValues); // TODO: saveOriginalValues can be removed
+
+    scrollBlockManager.saveOriginalValues(originalValues); // TODO: slice san be removed
+
+    rules.slice(-3).forEach(({
       element,
       property,
       blockingValue
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [containerGuid, rules]);
+  }, [restoreValues, containerGuid, rules]);
   const allowScroll = useCallback(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
     if (isBlocked) return;
+    const restoreValuesCallback = scrollBlockManager.getRestoreValuesCallback();
+
+    if (restoreValuesCallback) {
+      restoreValuesCallback();
+      scrollBlockManager.saveRestoreValuesCallback(null);
+      return;
+    } // TODO: all of the code below can be removed from this block
+
+
     const originalValues = scrollBlockManager.getOriginalValues();
     rules.forEach(({
       element,

package/esm/style/themes/aegean/aegean-theme.config.d.ts

@@ -7,9 +7,10 @@ declare function _default(palette: any): {
         loadingBarBackground: any;
     };
     readonly compatibility: {
+        colorsActionMajor150: any;
         colorsActionMajor500: any;
         colorsActionMajor600: any;
-        colorsActionMajor150: any;
+        colorsActionMajor700: any;
         colorsComponentsMenuAutumnStandard600: any;
         colorsComponentsMenuSpringChild600: any;
         colorsComponentsMenuAutumnChild600: any;

package/esm/style/themes/aegean/aegean-theme.config.js

@@ -10,9 +10,10 @@ export default (palette => {
 
     get compatibility() {
       return {
+        colorsActionMajor150: this.colors.loadingBarBackground,
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
-        colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsActionMajor700: this.colors.tertiary,
         colorsComponentsMenuAutumnStandard600: this.colors.primary,
         colorsComponentsMenuSpringChild600: this.colors.primary,
         colorsComponentsMenuAutumnChild600: this.colors.primary,

package/esm/style/themes/mint/mint-theme.config.d.ts

@@ -7,9 +7,10 @@ declare function _default(palette: any): {
         loadingBarBackground: any;
     };
     readonly compatibility: {
+        colorsActionMajor150: any;
         colorsActionMajor500: any;
         colorsActionMajor600: any;
-        colorsActionMajor150: any;
+        colorsActionMajor700: any;
         colorsComponentsMenuAutumnStandard600: any;
         colorsComponentsMenuSpringChild600: any;
         colorsComponentsMenuAutumnChild600: any;

package/esm/style/themes/mint/mint-theme.config.js

@@ -10,9 +10,10 @@ export default (palette => {
 
     get compatibility() {
       return {
+        colorsActionMajor150: this.colors.loadingBarBackground,
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
-        colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsActionMajor700: this.colors.tertiary,
         colorsComponentsMenuAutumnStandard600: this.colors.primary,
         colorsComponentsMenuSpringChild600: this.colors.primary,
         colorsComponentsMenuAutumnChild600: this.colors.primary,

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

@@ -36,7 +36,8 @@ const HiddenCheckableInput = ({
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    ariaLabelledBy
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
   const {
     onBlur: onBlurGroup,
@@ -77,7 +78,9 @@ const HiddenCheckableInput = ({
     role: role || type,
     type: type,
     value: value
-  }, props, {
+  }, props, ariaLabelledBy && {
+    "aria-labelledby": ariaLabelledBy
+  }, {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onMouseEnter: handleMouseEnter,

package/lib/__internal__/input/input.component.js

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

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

@@ -5,14 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InputBehaviour = exports.InputContext = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _inlineInputs = require("../../components/inline-inputs/inline-inputs.component");
+
 var _useInputBehaviour = _interopRequireDefault(require("./useInputBehaviour"));
 
 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; }
+
+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; }
+
 const defaultValue = {};
 
 const InputContext = /*#__PURE__*/_react.default.createContext(defaultValue);
@@ -23,8 +29,13 @@ const InputBehaviour = ({
   children
 }) => {
   const contextValue = (0, _useInputBehaviour.default)();
+  const {
+    ariaLabelledBy
+  } = (0, _react.useContext)(_inlineInputs.InlineInputsContext);
   return /*#__PURE__*/_react.default.createElement(InputContext.Provider, {
-    value: contextValue
+    value: { ...contextValue,
+      ariaLabelledBy
+    }
   }, children);
 };
 

package/lib/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";