carbon-react 120.4.0 → 120.6.0

package/esm/__spec_helper__/test-utils.d.ts

@@ -44,10 +44,13 @@ declare const testStyledSystemColor: (component: (colorProperties?: any) => JSX.
 declare const testStyledSystemWidth: (component: (widthProperties?: {
     width: string;
 }) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemHeight: (component: (heightProperties?: {
+    height: string;
+}) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/esm/__spec_helper__/test-utils.js

@@ -83,7 +83,8 @@ const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"
 const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
 const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
 const widthProps = ["width", "width", "200px"];
-const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
+const heightProps = ["height", "height", "200px"];
+const layoutProps = [widthProps, heightProps, ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const gridProps = [["gridColumn", "gridColumn", "1 / span 2"], ["gridRow", "gridRow", "1 / span 2"], ["gridArea", "gridArea", "myArea"], ["gridAutoFlow", "gridAutoFlow", "column"], ["gridAutoRows", "gridAutoRows", "150px"], ["gridAutoColumns", "gridAutoColumns", "50px"], ["gridTemplateRows", "gridTemplateRows", "100px 300px"], ["gridTemplateColumns", "gridTemplateColumns", "auto auto auto auto"], ["gridTemplateAreas", "gridTemplateAreas", "myArea myArea . . ."]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
@@ -241,6 +242,21 @@ const testStyledSystemWidth = (component, styleContainer) => {
     });
   });
 };
+const testStyledSystemHeight = (component, styleContainer) => {
+  describe("when a height prop is specified using styled system props", () => {
+    it("then height should have been set correctly", () => {
+      const [styledSystemProp, propName, value] = heightProps;
+      const props = {
+        [styledSystemProp]: value
+      };
+      const wrapper = mount(component({
+        ...props
+      }));
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+      expect(StyleElement).toHaveStyleRule(propName, value);
+    });
+  });
+};
 const testStyledSystemLayout = (component, styleContainer) => {
   describe.each(layoutProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
@@ -339,4 +355,4 @@ const expectConsoleOutput = (message, type = "error") => {
     global.console[type] = consoleType;
   };
 };
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };

package/esm/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -7,5 +7,5 @@ declare const HiddenCurrentColorList: import("styled-components").StyledComponen
     displayName: string;
 }, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => import("react").JSX.Element, any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../dialog/dialog.component").DialogProps & import("react").RefAttributes<import("../dialog/dialog.component").DialogHandle>>, any, {}, never>;
 export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

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

@@ -59,5 +59,9 @@ export interface DialogProps extends ModalProps, TagProps {
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => React.JSX.Element;
+export declare type DialogHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
 export default Dialog;

package/esm/components/dialog/dialog.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useRef, useEffect, useLayoutEffect, useCallback } from "react";
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -14,7 +14,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-export const Dialog = ({
+const Dialog = /*#__PURE__*/forwardRef(({
   className,
   children,
   open,
@@ -35,9 +35,9 @@ export const Dialog = ({
   contentPadding = {},
   focusableContainers,
   ...rest
-}) => {
+}, ref) => {
   const locale = useLocale();
-  const dialogRef = useRef(null);
+  const containerRef = useRef(null);
   const innerContentRef = useRef(null);
   const titleRef = useRef(null);
   const listenersAdded = useRef(false);
@@ -48,16 +48,21 @@ export const Dialog = ({
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const isTopModal = useModalAria(dialogRef);
+  const isTopModal = useModalAria(containerRef);
+  useImperativeHandle(ref, () => ({
+    focus() {
+      containerRef.current?.focus();
+    }
+  }), []);
   const centerDialog = useCallback(() => {
     /* istanbul ignore if */
-    if (!dialogRef.current) {
+    if (!containerRef.current) {
       return;
     }
     const {
       width: dialogWidth,
       height: dialogHeight
-    } = dialogRef.current.getBoundingClientRect();
+    } = containerRef.current.getBoundingClientRect();
     let midPointY = window.innerHeight / 2;
     let midPointX = window.innerWidth / 2;
     midPointY -= dialogHeight / 2;
@@ -68,8 +73,8 @@ export const Dialog = ({
     if (midPointX < 0) {
       midPointX = 0;
     }
-    dialogRef.current.style.top = `${midPointY}px`;
-    dialogRef.current.style.left = `${midPointX}px`;
+    containerRef.current.style.top = `${midPointY}px`;
+    containerRef.current.style.left = `${midPointX}px`;
   }, []);
   useResizeObserver(innerContentRef, centerDialog, !open);
   const addListeners = useCallback(() => {
@@ -155,22 +160,81 @@ export const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     focusableSelectors: focusableSelectors,
-    wrapperRef: dialogRef,
+    wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     "aria-modal": isTopModal ? true : undefined,
-    ref: dialogRef,
+    ref: containerRef,
     topMargin: TOP_MARGIN
   }, dialogProps, {
     "data-component": "dialog",
     "data-element": "dialog",
     "data-role": rest["data-role"],
-    role: role
+    role: role,
+    tabIndex: -1
   }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
+});
+Dialog.propTypes = {
+  "aria-describedby": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "ariaRole": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "contentPadding": PropTypes.shape({
+    "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  }),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
+  "disableClose": PropTypes.bool,
+  "disableEscKey": PropTypes.bool,
+  "disableFocusTrap": PropTypes.bool,
+  "enableBackgroundUI": PropTypes.bool,
+  "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "focusableSelectors": PropTypes.string,
+  "focusFirstElement": PropTypes.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })]),
+  "height": PropTypes.string,
+  "help": PropTypes.string,
+  "onCancel": PropTypes.func,
+  "open": PropTypes.bool.isRequired,
+  "role": PropTypes.string,
+  "showCloseIcon": PropTypes.bool,
+  "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": PropTypes.string,
+  "timeout": PropTypes.number,
+  "title": PropTypes.node
 };
+export { Dialog };
 export default Dialog;

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

@@ -1,3 +1,4 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogHandle } from "./dialog.component";
 export type { DialogSizes } from "./dialog.config";

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -3,7 +3,7 @@ import { margin } from "styled-system";
 import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
-import computeWidth from "../../style/utils/width";
+import computeSizing from "../../style/utils/element-sizing";
 import { borderRadiusStyling } from "../split-button/split-button-children.style";
 const StyledMultiActionButton = styled.div`
   ${margin}
@@ -14,7 +14,7 @@ const StyledMultiActionButton = styled.div`
   ${({
   width
 }) => width && css`
-    ${computeWidth({
+    ${computeSizing({
   width
 })}
 

package/esm/components/sidebar/sidebar.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import computeWidth from "../../style/utils/width";
+import computeSizing from "../../style/utils/element-sizing";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
@@ -39,7 +39,7 @@ const StyledSidebar = styled.div`
     ${!width && size && css`
       width: ${SIDEBAR_SIZES_CSS[size]};
     `}
-    ${width && computeWidth({
+    ${width && computeSizing({
   width
 })}
 

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

@@ -26,6 +26,10 @@ export interface TileProps extends SpaceProps, WidthProps {
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
     /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
     roundness?: "default" | "large";
+    /**
+     * Set a percentage-based height for the whole Tile component, relative to its parent.
+     */
+    height?: string | number;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, ...props }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, ...props }: TileProps) => React.JSX.Element;
 export default Tile;

package/esm/components/tile/tile.component.js

@@ -7,8 +7,9 @@ export const Tile = ({
   p = 3,
   children,
   orientation = "horizontal",
-  width,
+  width = "100%",
   roundness = "default",
+  height,
   ...props
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -24,12 +25,14 @@ export const Tile = ({
     }
     const {
       width: contentWidth,
+      height: contentHeight,
       ...childProps
     } = child.props;
     const key = child.key || `tile-content-${index + 1}`;
     return /*#__PURE__*/React.createElement(TileContent, _extends({
       key: key,
       width: contentWidth,
+      height: contentHeight,
       isHorizontal: isHorizontal,
       isVertical: isVertical
     }, isVertical && {
@@ -43,6 +46,7 @@ export const Tile = ({
   return /*#__PURE__*/React.createElement(StyledTile, _extends({
     variant: variant,
     width: width,
+    height: height,
     "data-component": "tile",
     isHorizontal: isHorizontal,
     p: p,

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

@@ -3,10 +3,11 @@ import { TileProps } from "./tile.component";
 interface TileContentProps {
     isHorizontal?: boolean;
     isVertical?: boolean;
-    width?: string | number;
+    width?: TileProps["width"];
+    height?: TileProps["height"];
 }
 declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export { StyledTile, TileContent };

package/esm/components/tile/tile.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import computeWidth from "../../style/utils/width";
+import computeSizing from "../../style/utils/element-sizing";
 const getBorderColor = borderVariant => {
   switch (borderVariant) {
     case "selected":
@@ -22,7 +22,8 @@ const TileContent = styled.div`
   ${({
   isHorizontal,
   isVertical,
-  width
+  width,
+  height
 }) => css`
     ${space}
 
@@ -64,10 +65,11 @@ const TileContent = styled.div`
       }
     `}
 
-    ${width && css`
+    ${(width || height) && css`
       flex-grow: 0;
-      ${computeWidth({
-  width
+      ${computeSizing({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
 })}
     `}
   `}
@@ -79,7 +81,8 @@ const StyledTile = styled.div`
   isHorizontal,
   variant,
   width,
-  roundness
+  roundness,
+  height
 }) => css`
     ${space}
 
@@ -104,13 +107,10 @@ const StyledTile = styled.div`
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;
-    width: 100%;
-
-    ${width && css`
-      ${computeWidth({
-  width
+    ${computeSizing({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
 })}
-    `}
   `}
 `;
 TileContent.defaultProps = {

package/esm/style/utils/element-sizing.d.ts

@@ -0,0 +1,6 @@
+import { styleFn, LayoutProps } from "styled-system";
+declare const _default: ({ width, height, }: {
+    width?: LayoutProps["width"];
+    height?: LayoutProps["height"];
+}) => styleFn;
+export default _default;

package/esm/style/utils/{width.js → element-sizing.js}

@@ -1,14 +1,15 @@
-// eslint-disable-next-line no-restricted-imports
 import { layout } from "styled-system";
 
 /*
  * styled-system/layout allows users to use a width, height, minWidth, maxWidth, minHeight, maxHeight,
  * size, display, verticalAlign, overflow, overflowX and overflowY props most of which are usually not needed.
- * That's why the purpose of this function is to pass only the`width` prop to the `layout` function.
+ * That's why the purpose of this function is to pass only the `width` and `height` props to the `layout` function.
  */
 
 export default (({
-  width
+  width,
+  height
 }) => layout({
-  width
+  width,
+  height
 }));

package/lib/__spec_helper__/test-utils.d.ts

@@ -44,10 +44,13 @@ declare const testStyledSystemColor: (component: (colorProperties?: any) => JSX.
 declare const testStyledSystemWidth: (component: (widthProperties?: {
     width: string;
 }) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemHeight: (component: (heightProperties?: {
+    height: string;
+}) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
 declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };

package/lib/__spec_helper__/test-utils.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpacing = exports.testStyledSystemPosition = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemLayout = exports.testStyledSystemGrid = exports.testStyledSystemFlexBox = exports.testStyledSystemColor = exports.testStyledSystemBackground = exports.simulate = exports.selectedItemOf = void 0;
+exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpacing = exports.testStyledSystemPosition = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemLayout = exports.testStyledSystemHeight = exports.testStyledSystemGrid = exports.testStyledSystemFlexBox = exports.testStyledSystemColor = exports.testStyledSystemBackground = exports.simulate = exports.selectedItemOf = void 0;
 var _enzyme = require("enzyme");
 var _sprintfJs = require("sprintf-js");
 var _baseTheme = require("../style/themes/base/base-theme.config");
@@ -110,7 +110,8 @@ const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"
 const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
 const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
 const widthProps = ["width", "width", "200px"];
-const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
+const heightProps = ["height", "height", "200px"];
+const layoutProps = [widthProps, heightProps, ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const gridProps = [["gridColumn", "gridColumn", "1 / span 2"], ["gridRow", "gridRow", "1 / span 2"], ["gridArea", "gridArea", "myArea"], ["gridAutoFlow", "gridAutoFlow", "column"], ["gridAutoRows", "gridAutoRows", "150px"], ["gridAutoColumns", "gridAutoColumns", "50px"], ["gridTemplateRows", "gridTemplateRows", "100px 300px"], ["gridTemplateColumns", "gridTemplateColumns", "auto auto auto auto"], ["gridTemplateAreas", "gridTemplateAreas", "myArea myArea . . ."]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
@@ -274,6 +275,22 @@ const testStyledSystemWidth = (component, styleContainer) => {
   });
 };
 exports.testStyledSystemWidth = testStyledSystemWidth;
+const testStyledSystemHeight = (component, styleContainer) => {
+  describe("when a height prop is specified using styled system props", () => {
+    it("then height should have been set correctly", () => {
+      const [styledSystemProp, propName, value] = heightProps;
+      const props = {
+        [styledSystemProp]: value
+      };
+      const wrapper = (0, _enzyme.mount)(component({
+        ...props
+      }));
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+      expect(StyleElement).toHaveStyleRule(propName, value);
+    });
+  });
+};
+exports.testStyledSystemHeight = testStyledSystemHeight;
 const testStyledSystemLayout = (component, styleContainer) => {
   describe.each(layoutProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -7,5 +7,5 @@ declare const HiddenCurrentColorList: import("styled-components").StyledComponen
     displayName: string;
 }, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => import("react").JSX.Element, any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../dialog/dialog.component").DialogProps & import("react").RefAttributes<import("../dialog/dialog.component").DialogHandle>>, any, {}, never>;
 export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

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

@@ -59,5 +59,9 @@ export interface DialogProps extends ModalProps, TagProps {
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => React.JSX.Element;
+export declare type DialogHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
 export default Dialog;

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

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-const Dialog = ({
+const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   className,
   children,
   open,
@@ -44,9 +44,9 @@ const Dialog = ({
   contentPadding = {},
   focusableContainers,
   ...rest
-}) => {
+}, ref) => {
   const locale = (0, _useLocale.default)();
-  const dialogRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
   const innerContentRef = (0, _react.useRef)(null);
   const titleRef = (0, _react.useRef)(null);
   const listenersAdded = (0, _react.useRef)(false);
@@ -57,16 +57,21 @@ const Dialog = ({
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const isTopModal = (0, _useModalAria.default)(dialogRef);
+  const isTopModal = (0, _useModalAria.default)(containerRef);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus() {
+      containerRef.current?.focus();
+    }
+  }), []);
   const centerDialog = (0, _react.useCallback)(() => {
     /* istanbul ignore if */
-    if (!dialogRef.current) {
+    if (!containerRef.current) {
       return;
     }
     const {
       width: dialogWidth,
       height: dialogHeight
-    } = dialogRef.current.getBoundingClientRect();
+    } = containerRef.current.getBoundingClientRect();
     let midPointY = window.innerHeight / 2;
     let midPointX = window.innerWidth / 2;
     midPointY -= dialogHeight / 2;
@@ -77,8 +82,8 @@ const Dialog = ({
     if (midPointX < 0) {
       midPointX = 0;
     }
-    dialogRef.current.style.top = `${midPointY}px`;
-    dialogRef.current.style.left = `${midPointX}px`;
+    containerRef.current.style.top = `${midPointY}px`;
+    containerRef.current.style.left = `${midPointX}px`;
   }, []);
   (0, _useResizeObserver.default)(innerContentRef, centerDialog, !open);
   const addListeners = (0, _react.useCallback)(() => {
@@ -164,24 +169,82 @@ const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     focusableSelectors: focusableSelectors,
-    wrapperRef: dialogRef,
+    wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
     "aria-modal": isTopModal ? true : undefined,
-    ref: dialogRef,
+    ref: containerRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {
     "data-component": "dialog",
     "data-element": "dialog",
     "data-role": rest["data-role"],
-    role: role
+    role: role,
+    tabIndex: -1
   }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
-};
+});
 exports.Dialog = Dialog;
+Dialog.propTypes = {
+  "aria-describedby": _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "aria-labelledby": _propTypes.default.string,
+  "ariaRole": _propTypes.default.string,
+  "bespokeFocusTrap": _propTypes.default.func,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "contentPadding": _propTypes.default.shape({
+    "p": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  }),
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disableAutoFocus": _propTypes.default.bool,
+  "disableClose": _propTypes.default.bool,
+  "disableEscKey": _propTypes.default.bool,
+  "disableFocusTrap": _propTypes.default.bool,
+  "enableBackgroundUI": _propTypes.default.bool,
+  "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "focusableSelectors": _propTypes.default.string,
+  "focusFirstElement": _propTypes.default.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, _propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })]),
+  "height": _propTypes.default.string,
+  "help": _propTypes.default.string,
+  "onCancel": _propTypes.default.func,
+  "open": _propTypes.default.bool.isRequired,
+  "role": _propTypes.default.string,
+  "showCloseIcon": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": _propTypes.default.string,
+  "timeout": _propTypes.default.number,
+  "title": _propTypes.default.node
+};
 var _default = Dialog;
 exports.default = _default;

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

@@ -1,3 +1,4 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogHandle } from "./dialog.component";
 export type { DialogSizes } from "./dialog.config";

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -9,7 +9,7 @@ var _styledSystem = require("styled-system");
 var _button = _interopRequireDefault(require("../button/button.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
-var _width = _interopRequireDefault(require("../../style/utils/width"));
+var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
 var _splitButtonChildren = require("../split-button/split-button-children.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,7 +23,7 @@ const StyledMultiActionButton = _styledComponents.default.div`
   ${({
   width
 }) => width && (0, _styledComponents.css)`
-    ${(0, _width.default)({
+    ${(0, _elementSizing.default)({
   width
 })}
 

package/lib/components/sidebar/sidebar.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _width = _interopRequireDefault(require("../../style/utils/width"));
+var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _formStyleUtils = require("../../style/utils/form-style-utils");
@@ -48,7 +48,7 @@ const StyledSidebar = _styledComponents.default.div`
     ${!width && size && (0, _styledComponents.css)`
       width: ${_sidebar.SIDEBAR_SIZES_CSS[size]};
     `}
-    ${width && (0, _width.default)({
+    ${width && (0, _elementSizing.default)({
   width
 })}
 

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

@@ -26,6 +26,10 @@ export interface TileProps extends SpaceProps, WidthProps {
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
     /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
     roundness?: "default" | "large";
+    /**
+     * Set a percentage-based height for the whole Tile component, relative to its parent.
+     */
+    height?: string | number;
 }
-export declare const Tile: ({ variant, p, children, orientation, width, roundness, ...props }: TileProps) => React.JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, height, ...props }: TileProps) => React.JSX.Element;
 export default Tile;

package/lib/components/tile/tile.component.js

@@ -14,8 +14,9 @@ const Tile = ({
   p = 3,
   children,
   orientation = "horizontal",
-  width,
+  width = "100%",
   roundness = "default",
+  height,
   ...props
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -31,12 +32,14 @@ const Tile = ({
     }
     const {
       width: contentWidth,
+      height: contentHeight,
       ...childProps
     } = child.props;
     const key = child.key || `tile-content-${index + 1}`;
     return /*#__PURE__*/_react.default.createElement(_tile.TileContent, _extends({
       key: key,
       width: contentWidth,
+      height: contentHeight,
       isHorizontal: isHorizontal,
       isVertical: isVertical
     }, isVertical && {
@@ -50,6 +53,7 @@ const Tile = ({
   return /*#__PURE__*/_react.default.createElement(_tile.StyledTile, _extends({
     variant: variant,
     width: width,
+    height: height,
     "data-component": "tile",
     isHorizontal: isHorizontal,
     p: p,

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

@@ -3,10 +3,11 @@ import { TileProps } from "./tile.component";
 interface TileContentProps {
     isHorizontal?: boolean;
     isVertical?: boolean;
-    width?: string | number;
+    width?: TileProps["width"];
+    height?: TileProps["height"];
 }
 declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export { StyledTile, TileContent };

package/lib/components/tile/tile.style.js

@@ -7,7 +7,7 @@ exports.TileContent = exports.StyledTile = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _width = _interopRequireDefault(require("../../style/utils/width"));
+var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -31,7 +31,8 @@ const TileContent = _styledComponents.default.div`
   ${({
   isHorizontal,
   isVertical,
-  width
+  width,
+  height
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
@@ -73,10 +74,11 @@ const TileContent = _styledComponents.default.div`
       }
     `}
 
-    ${width && (0, _styledComponents.css)`
+    ${(width || height) && (0, _styledComponents.css)`
       flex-grow: 0;
-      ${(0, _width.default)({
-  width
+      ${(0, _elementSizing.default)({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
 })}
     `}
   `}
@@ -89,7 +91,8 @@ const StyledTile = _styledComponents.default.div`
   isHorizontal,
   variant,
   width,
-  roundness
+  roundness,
+  height
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
@@ -114,13 +117,10 @@ const StyledTile = _styledComponents.default.div`
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;
-    width: 100%;
-
-    ${width && (0, _styledComponents.css)`
-      ${(0, _width.default)({
-  width
+    ${(0, _elementSizing.default)({
+  width: width || /* istanbul ignore next */undefined,
+  height: height || undefined
 })}
-    `}
   `}
 `;
 exports.StyledTile = StyledTile;

package/lib/style/utils/element-sizing.d.ts

@@ -0,0 +1,6 @@
+import { styleFn, LayoutProps } from "styled-system";
+declare const _default: ({ width, height, }: {
+    width?: LayoutProps["width"];
+    height?: LayoutProps["height"];
+}) => styleFn;
+export default _default;

package/lib/style/utils/{width.js → element-sizing.js}

@@ -5,15 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledSystem = require("styled-system");
-// eslint-disable-next-line no-restricted-imports
 /*
  * styled-system/layout allows users to use a width, height, minWidth, maxWidth, minHeight, maxHeight,
  * size, display, verticalAlign, overflow, overflowX and overflowY props most of which are usually not needed.
- * That's why the purpose of this function is to pass only the`width` prop to the `layout` function.
+ * That's why the purpose of this function is to pass only the `width` and `height` props to the `layout` function.
  */
 var _default = ({
-  width
+  width,
+  height
 }) => (0, _styledSystem.layout)({
-  width
+  width,
+  height
 });
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "120.4.0",
+  "version": "120.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/style/utils/width.d.ts

@@ -1,3 +0,0 @@
-import { styleFn } from "styled-system";
-declare const _default: ({ width }: Record<string, unknown>) => styleFn;
-export default _default;

package/lib/style/utils/width.d.ts

@@ -1,3 +0,0 @@
-import { styleFn } from "styled-system";
-declare const _default: ({ width }: Record<string, unknown>) => styleFn;
-export default _default;