carbon-react 106.6.9 → 107.0.0

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -13,6 +13,8 @@ var _focusTrapUtils = require("./focus-trap-utils");
 
 var _modal = require("../../components/modal/modal.component");
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 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; }
@@ -24,16 +26,16 @@ const FocusTrap = ({
   autoFocus = true,
   focusFirstElement,
   bespokeTrap,
-  wrapperRef
+  wrapperRef,
+  isOpen
 }) => {
   const trapRef = (0, _react.useRef)(null);
-  const firstOpen = (0, _react.useRef)(true);
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
   const [firstElement, setFirstElement] = (0, _react.useState)();
   const [lastElement, setLastElement] = (0, _react.useState)();
   const [currentFocusedElement, setCurrentFocusedElement] = (0, _react.useState)();
   const {
-    isAnimationComplete,
+    isAnimationComplete = true,
     triggerRefocusFlag
   } = (0, _react.useContext)(_modal.ModalContext);
   const hasNewInputs = (0, _react.useCallback)(candidate => {
@@ -69,12 +71,13 @@ const FocusTrap = ({
   (0, _react.useLayoutEffect)(() => {
     updateFocusableElements();
   }, [children, updateFocusableElements]);
+  const shouldSetFocus = autoFocus && isOpen && isAnimationComplete && (focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
+  const prevShouldSetFocus = (0, _usePrevious.default)(shouldSetFocus);
   (0, _react.useEffect)(() => {
-    if (autoFocus && firstOpen.current && isAnimationComplete && (focusFirstElement || firstElement)) {
-      (0, _focusTrapUtils.setElementFocus)(focusFirstElement || firstElement);
-      firstOpen.current = false;
+    if (shouldSetFocus && !prevShouldSetFocus) {
+      (0, _focusTrapUtils.setElementFocus)(focusFirstElement || (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current));
     }
-  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
+  }, [shouldSetFocus, prevShouldSetFocus, focusFirstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
     const trapFn = ev => {
       if (bespokeTrap) {
@@ -92,7 +95,7 @@ const FocusTrap = ({
           ev.preventDefault();
         } else if (ev.shiftKey) {
           /* shift + tab */
-          if (activeElement === firstElement) {
+          if (activeElement === firstElement || activeElement === wrapperRef.current) {
             lastElement.focus();
             ev.preventDefault();
           } // If current element is radio button -
@@ -115,7 +118,7 @@ const FocusTrap = ({
     return function cleanup() {
       document.removeEventListener("keydown", trapFn);
     };
-  }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  }, [firstElement, lastElement, focusableElements, bespokeTrap, wrapperRef]);
   const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
     const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
 
@@ -130,22 +133,50 @@ const FocusTrap = ({
     };
   }, [updateCurrentFocusedElement]);
   const refocusTrap = (0, _react.useCallback)(() => {
+    var _wrapperRef$current;
+
     /* istanbul ignore else */
     if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
       // the trap breaks if it tries to refocus a disabled element
       (0, _focusTrapUtils.setElementFocus)(currentFocusedElement);
+    } else if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.hasAttribute("tabindex")) {
+      (0, _focusTrapUtils.setElementFocus)(wrapperRef.current);
     } else if (firstElement) {
       (0, _focusTrapUtils.setElementFocus)(firstElement);
     }
-  }, [currentFocusedElement, firstElement]);
+  }, [currentFocusedElement, firstElement, wrapperRef]);
   (0, _react.useEffect)(() => {
     if (triggerRefocusFlag) {
       refocusTrap();
     }
   }, [triggerRefocusFlag, refocusTrap]);
+  const [tabIndex, setTabIndex] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    // issue in cypress prevents setting tabIndex to -1, instead tabIndex is set to 0 and removed on blur.
+    if (!isOpen) {
+      setTabIndex(0);
+    }
+  }, [isOpen]);
+
+  const onBlur = () => {
+    /* istanbul ignore else */
+    if (isOpen) {
+      setTabIndex(undefined);
+    }
+  };
+
+  const focusProps = {
+    tabIndex,
+    onBlur
+  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+
+  const clonedChildren = _react.default.Children.map(children, child => {
+    return child.props.tabIndex === undefined ? /*#__PURE__*/_react.default.cloneElement(child, focusProps) : child;
+  });
+
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
-  }, children);
+  }, clonedChildren);
 };
 
 FocusTrap.propTypes = {
@@ -165,7 +196,10 @@ FocusTrap.propTypes = {
   /** a ref to the container wrapping the focusable elements */
   wrapperRef: _propTypes.default.shape({
     current: _propTypes.default.any
-  })
+  }),
+
+  /* whether the modal (etc.) component that the focus trap is inside is open or not */
+  isOpen: _propTypes.default.bool
 };
 var _default = FocusTrap;
 exports.default = _default;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -68,17 +68,17 @@ const AdvancedColorPicker = ({
       setSelectedColorRef(selected.ref.current);
     }
   }, [colors, currentColor, dialogOpen, isOpen]);
-  const handleFocus = (0, _react.useCallback)((e, firstFocusableElement, lastFocusableElement) => {
+  const handleFocus = (0, _react.useCallback)((e, firstFocusableElement) => {
     if (e.key === "Tab") {
       /* istanbul ignore else */
       if (e.shiftKey) {
         /* istanbul ignore else */
-        if (document.activeElement === selectedColorRef) {
-          lastFocusableElement.focus();
+        if (document.activeElement === firstFocusableElement) {
+          selectedColorRef.focus();
           e.preventDefault();
         }
-      } else if (document.activeElement === lastFocusableElement) {
-        selectedColorRef.focus();
+      } else if (document.activeElement === selectedColorRef) {
+        firstFocusableElement.focus();
         e.preventDefault();
       }
     }

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

@@ -3,7 +3,7 @@ import Icon from "../icon";
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
+    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
     displayName: string;
 }, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;

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

@@ -10,8 +10,6 @@ export interface ButtonProps extends SpaceProps {
      * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
      */
     "aria-label"?: string;
-    /** [Legacy] Button types for legacy theme: "primary" | "secondary" */
-    as?: ButtonTypes;
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
     buttonType?: ButtonTypes;
     /** The text the button displays */
@@ -60,7 +58,7 @@ export interface ButtonProps extends SpaceProps {
     rel?: string;
 }
 declare const Button: {
-    ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
+    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
     displayName: string;
 };
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/button/button.component.js

@@ -19,8 +19,6 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 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; }
@@ -94,12 +92,10 @@ renderChildren.propTypes = {
     }
   }
 };
-let deprecatedWarnTriggered = false;
 
 const Button = ({
   size = "medium",
   subtext = "",
-  as,
   children,
   forwardRef,
   "aria-label": ariaLabel,
@@ -119,13 +115,6 @@ const Button = ({
   fullWidth = false,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && as) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
-  }
-
   (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
@@ -133,7 +122,7 @@ const Button = ({
   }
 
   const [internalRef, setInternalRef] = (0, _react.useState)();
-  const buttonType = as || buttonTypeProp;
+  const buttonType = buttonTypeProp;
   let paddingX;
 
   const handleLinkKeyDown = event => {
@@ -203,7 +192,6 @@ const Button = ({
 
 Button.propTypes = {
   "aria-label": _propTypes.default.string,
-  "as": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
   "destructive": _propTypes.default.bool,
@@ -546,7 +534,6 @@ const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref)
 exports.ButtonWithForwardRef = ButtonWithForwardRef;
 ButtonWithForwardRef.propTypes = {
   "aria-label": _propTypes.default.string,
-  "as": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
   "destructive": _propTypes.default.bool,

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

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "as"> & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
     iconOnly?: boolean | undefined;
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/button-toggle-group/button-toggle-group.component.js

@@ -17,7 +17,7 @@ var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.s
 
 var _buttonToggle = _interopRequireDefault(require("../button-toggle"));
 
-var _radioButtonMapper = _interopRequireDefault(require("../radio-button/radio-button-mapper.component"));
+var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.component"));
 

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

@@ -1,12 +1,11 @@
 export default Confirm;
-declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
+declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
     [x: string]: any;
     "aria-labelledby": any;
     "aria-describedby": any;
     "aria-label": any;
     open: any;
     children: any;
-    destructive: any;
     cancelButtonDestructive: any;
     confirmButtonDestructive: any;
     cancelButtonType: any;
@@ -30,7 +29,6 @@ declare namespace Confirm {
     namespace defaultProps {
         const size: string;
         const showCloseIcon: boolean;
-        const destructive: boolean;
         const cancelButtonDestructive: boolean;
         const confirmButtonDestructive: boolean;
         const iconType: null;
@@ -81,8 +79,6 @@ declare namespace Confirm {
         confirmLabel: PropTypes.Requireable<string>;
         /** Customise the cancel button label */
         cancelLabel: PropTypes.Requireable<string>;
-        /** Apply destructive style to the buttons */
-        destructive: PropTypes.Requireable<boolean>;
         /** Apply destructive style to the cancel button */
         cancelButtonDestructive: PropTypes.Requireable<boolean>;
         /** Apply destructive style to the confirm button */

package/lib/components/confirm/confirm.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 var _heading = _interopRequireDefault(require("../heading"));
 
 var _dialog = _interopRequireDefault(require("../dialog"));
@@ -35,15 +33,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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); }
 
-let deprecatedWarnTriggered = false;
-
 const Confirm = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   open,
   children,
-  destructive,
   cancelButtonDestructive,
   confirmButtonDestructive,
   cancelButtonType,
@@ -64,12 +59,6 @@ const Confirm = ({
   title,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && destructive) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate("`destructive` prop is deprecated and will soon be removed. Please use `cancelButtonDestructive` and `confirmButtonDestructive` props.");
-  }
-
   const l = (0, _useLocale.default)();
   const {
     current: titleId
@@ -97,7 +86,7 @@ const Confirm = ({
       onClick: onCancel,
       "data-element": "cancel",
       buttonType: cancelButtonType,
-      destructive: destructive || cancelButtonDestructive,
+      destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
@@ -108,7 +97,7 @@ const Confirm = ({
     onClick: onConfirm,
     "data-element": "confirm",
     buttonType: confirmButtonType,
-    destructive: destructive || confirmButtonDestructive,
+    destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
@@ -152,7 +141,6 @@ const Confirm = ({
 Confirm.defaultProps = {
   size: "extra-small",
   showCloseIcon: false,
-  destructive: false,
   cancelButtonDestructive: false,
   confirmButtonDestructive: false,
   iconType: null,
@@ -220,9 +208,6 @@ Confirm.propTypes = {
   /** Customise the cancel button label */
   cancelLabel: _propTypes.default.string,
 
-  /** Apply destructive style to the buttons */
-  destructive: _propTypes.default.bool,
-
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive: _propTypes.default.bool,
 

package/lib/components/confirm/confirm.d.ts

@@ -21,8 +21,6 @@ export interface ConfirmProps extends DialogProps {
   cancelLabel?: string;
   /** Customise the confirm button label */
   confirmLabel?: string;
-  /** Apply destructive style to the buttons */
-  destructive?: boolean;
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive?: boolean;
   /** Apply destructive style to the confirm button */

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -39,7 +39,8 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   disablePortal,
   onDayClick,
   pickerMouseDown,
-  pickerProps
+  pickerProps,
+  open
 }, ref) => {
   const l = (0, _useLocale.default)();
   const {
@@ -49,22 +50,27 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   const {
     weekStartsOn
   } = options;
-  const monthsLong = Array.from({
+  const monthsLong = (0, _react.useMemo)(() => Array.from({
     length: 12
-  }).map((_, i) => localize.month(i));
-  const monthsShort = Array.from({
+  }).map((_, i) => {
+    const month = localize.month(i);
+    return month[0].toUpperCase() + month.slice(1);
+  }), [localize]);
+  const monthsShort = (0, _react.useMemo)(() => Array.from({
     length: 12
   }).map((_, i) => localize.month(i, {
     width: "abbreviated"
-  }).substring(0, 3));
-  const weekdaysLong = Array.from({
+  }).substring(0, 3)), [localize]);
+  const weekdaysLong = (0, _react.useMemo)(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i));
-  const weekdaysShort = Array.from({
+  }).map((_, i) => localize.day(i)), [localize]);
+  const weekdaysShort = (0, _react.useMemo)(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i, l.locale() === "de" ? {} : {
+  }).map((_, i) => localize.day(i, ["de", "pl"].filter(str => l.locale().includes(str)).length ? {
+    width: "wide"
+  } : {
     width: "abbreviated"
-  }).substring(0, 3));
+  }).substring(0, 3)), [l, localize]);
   const popoverModifiers = (0, _react.useMemo)(() => [{
     name: "offset",
     options: {
@@ -87,6 +93,10 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
 
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
 
+  if (!open) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-start",
     reference: inputElement,
@@ -148,7 +158,10 @@ DatePicker.propTypes = {
   pickerProps: _propTypes.default.object,
 
   /** Callback to handle mousedown event on picker */
-  pickerMouseDown: _propTypes.default.func
+  pickerMouseDown: _propTypes.default.func,
+
+  /** Sets whether the picker should be displayed */
+  open: _propTypes.default.bool
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/components/date/__internal__/date-picker/date-picker.d.ts

@@ -16,6 +16,8 @@ export interface DatePickerProps extends Pick<DayPickerProps, "onDayClick"> {
   selectedDays?: Date;
   /** Callback to handle mousedown event on picker container */
   pickerMouseDown?: () => void;
+  /** Sets whether the picker should be displayed */
+  open?: boolean;
 }
 
 declare function DatePicker(

package/lib/components/date/date.component.js

@@ -335,7 +335,7 @@ const DateInput = ({
     size: size,
     disabled: disabled,
     readOnly: readOnly
-  })), open && /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+  })), /*#__PURE__*/_react.default.createElement(_datePicker.default, {
     disablePortal: disablePortal,
     inputElement: parentRef,
     pickerProps: pickerProps,
@@ -345,7 +345,8 @@ const DateInput = ({
     minDate: minDate,
     maxDate: maxDate,
     ref: pickerRef,
-    pickerMouseDown: handlePickerMouseDown
+    pickerMouseDown: handlePickerMouseDown,
+    open: open
   }));
 };
 

package/lib/components/dialog/dialog.component.js

@@ -179,7 +179,8 @@ const Dialog = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/_react.default.createElement(_dialog.DialogStyle, _extends({
     "aria-modal": true,
     ref: dialogRef,
@@ -189,9 +190,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
+  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, contentPadding), children)), closeIcon())));
+  }, contentPadding), children)))));
 };
 
 Dialog.propTypes = {

package/lib/components/dialog-full-screen/content.style.js

@@ -93,16 +93,10 @@ const StyledContent = _styledComponents.default.div`
 
   ${({
   hasHeader
-}) => !hasHeader && `
-    padding-top: 0;
-    margin-top: -25px;
-
-    .carbon-app-wrapper {
-      max-width: 100%;
-      padding: 0;
-      height: 70px;
-    }
-  `}
+}) => !hasHeader && (0, _styledComponents.css)`
+      padding-top: 0;
+      margin-top: -25px;
+    `}
 `;
 var _default = StyledContent;
 exports.default = _default;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -109,7 +109,8 @@ const DialogFullScreen = ({
   }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
-    wrapperRef: dialogRef
+    wrapperRef: dialogRef,
+    isOpen: open
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
     "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
@@ -117,12 +118,12 @@ const DialogFullScreen = ({
     "data-element": "dialog-full-screen",
     pagesStyling: pagesStyling,
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
-  }, children), closeIcon())));
+  }, children))));
 };
 
 DialogFullScreen.defaultProps = {

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

@@ -1,64 +1,44 @@
 export default Heading;
-declare class Heading extends React.Component<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    get help(): JSX.Element | null;
-    get back(): JSX.Element | null;
-    get subheader(): JSX.Element | null;
-    get separator(): JSX.Element | null;
-    get divider(): JSX.Element | null;
-    get pills(): JSX.Element | null;
-    render(): JSX.Element | null;
-}
+declare function Heading({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: {
+    [x: string]: any;
+    children: any;
+    backLink: any;
+    divider?: boolean | undefined;
+    help: any;
+    helpAriaLabel: any;
+    helpLink: any;
+    pills: any;
+    separator?: boolean | undefined;
+    subheader: any;
+    subtitleId: any;
+    title: any;
+    titleId: any;
+}): JSX.Element | null;
 declare namespace Heading {
     const propTypes: {
-        /**
-         * Children elements
-         */
+        /** Child elements */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title for the heading.
-         */
+        /** Defines the title for the heading. */
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title id for the heading.
-         */
+        /** Defines the title id for the heading. */
         titleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the subheader for the heading.
-         */
+        /** Defines the subheader for the heading. */
         subheader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the subtitle id for the heading.
-         */
+        /** Defines the subtitle id for the heading. */
         subtitleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the help text for the heading.
-         */
+        /** Defines the help text for the heading. */
         help: PropTypes.Requireable<string>;
-        /**
-         * Defines the help link for the heading.
-         */
+        /** Defines the help link for the heading. */
         helpLink: PropTypes.Requireable<string>;
-        /**
-         * Defines the a href for the back link.
-         */
+        /** Defines the a href for the back link. */
         backLink: PropTypes.Requireable<string | ((...args: any[]) => any)>;
-        /**
-         * Adds a divider below the heading and the content.
-         */
+        /** Adds a divider below the heading and the content. */
         divider: PropTypes.Requireable<boolean>;
-        /**
-         * Adds a separator between the title and the subheader.
-         */
+        /** Adds a separator between the title and the subheader. */
         separator: PropTypes.Requireable<boolean>;
-        /**
-         * Pills that will be added after the title.
-         */
+        /** Pills that will be added after the title. */
         pills: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Aria label for rendered help component
-         */
+        /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
         marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -75,10 +55,5 @@ declare namespace Heading {
         marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
-    namespace defaultProps {
-        const divider: boolean;
-        const separator: boolean;
-    }
 }
-import React from "react";
 import PropTypes from "prop-types";