baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/menu/types.d.ts

@@ -1,30 +1,30 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants';
-export declare type Item = any;
-export declare type ArrayItems = ReadonlyArray<Item>;
-export declare type GroupedItems = {
+export type Item = any;
+export type ArrayItems = ReadonlyArray<Item>;
+export type GroupedItems = {
     __ungrouped: ArrayItems;
     [x: string]: ArrayItems;
 };
-export declare type Items = ArrayItems | GroupedItems;
-export declare type GetItemLabelFn = (item: Item) => React.ReactNode;
-export declare type GetProfileItemLabelsFn = (item: Item) => {
+export type Items = ArrayItems | GroupedItems;
+export type GetItemLabelFn = (item: Item) => React.ReactNode;
+export type GetProfileItemLabelsFn = (item: Item) => {
     title?: string;
     subtitle?: string;
     body?: string;
 };
-export declare type GetProfileItemImgFn = (item: Item) => string | React.ComponentType<any>;
-export declare type GetProfileItemImgTextFn = (item: Item) => string;
-export declare type SetRootRefFn = (ref: React.RefObject<typeof HTMLElement>) => void;
-export declare type RootRef = {
+export type GetProfileItemImgFn = (item: Item) => string | React.ComponentType<any>;
+export type GetProfileItemImgTextFn = (item: Item) => string;
+export type SetRootRefFn = (ref: React.RefObject<typeof HTMLElement>) => void;
+export type RootRef = {
     current: null | HTMLElement;
 };
-export declare type OnItemSelectFn = (a: {
+export type OnItemSelectFn = (a: {
     item: Item;
     event?: React.SyntheticEvent<HTMLElement> | KeyboardEvent;
 }) => unknown;
-export declare type ProfileOverrides = {
+export type ProfileOverrides = {
     List?: Override;
     ListItemProfile?: Override;
     ProfileImgContainer?: Override;
@@ -34,7 +34,7 @@ export declare type ProfileOverrides = {
     ProfileSubtitle?: Override;
     ProfileBody?: Override;
 };
-export declare type RenderItemProps = {
+export type RenderItemProps = {
     disabled?: boolean;
     ref?: React.RefObject<typeof HTMLElement>;
     id?: string | null;
@@ -44,19 +44,19 @@ export declare type RenderItemProps = {
     onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
     resetMenu?: () => void;
 };
-export declare type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps;
-export declare type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPES | undefined | null, changes: Partial<StatefulContainerState>, currentState: StatefulContainerState) => StatefulContainerState;
-export declare type StatefulContainerState = {
+export type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps;
+export type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPES | undefined | null, changes: Partial<StatefulContainerState>, currentState: StatefulContainerState) => StatefulContainerState;
+export type StatefulContainerState = {
     activedescendantId?: string | null;
     highlightedIndex: number;
     isFocused: boolean;
 };
-export declare type InitialState = {
+export type InitialState = {
     activedescendantId?: string | null;
     highlightedIndex?: number;
     isFocused?: boolean;
 };
-export declare type RenderProps = StatefulContainerState & {
+export type RenderProps = StatefulContainerState & {
     items: Items;
     getRequiredItemProps: GetRequiredItemPropsFn;
 };
@@ -66,7 +66,7 @@ export declare type RenderProps = StatefulContainerState & {
  * Required and Optional are split into separate object types, and internals are all
  * marked as required because otherwise defaultProps will not work properly
  */
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     /** List of menu items. */
     items: Items;
     /** Initial state of the stateful menu. */
@@ -112,7 +112,7 @@ export declare type StatefulContainerProps = {
     }) => boolean;
     forceHighlight: boolean;
 };
-export declare type MenuOverrides = {
+export type MenuOverrides = {
     EmptyState?: Override;
     List?: Override;
     Option?: Override;
@@ -120,12 +120,12 @@ export declare type MenuOverrides = {
     ListItem?: Override;
     MenuDivider?: Override;
 };
-export declare type MenuProps = {
+export type MenuProps = {
     overrides?: MenuOverrides;
     /** Renders all menu content for SEO purposes regardless of menu  state */
     renderAll?: boolean;
 };
-export declare type MenuProfileProps = {
+export type MenuProfileProps = {
     /** Returns an object consisting of title, subtitle, and body to render menu item */
     getProfileItemLabels: GetProfileItemLabelsFn;
     /** Returns either an image source url, or a full React component to render as the image. */
@@ -134,7 +134,7 @@ export declare type MenuProfileProps = {
     getProfileItemImgText: GetProfileItemImgTextFn;
     overrides?: ProfileOverrides;
 };
-export declare type SharedStatelessProps = {
+export type SharedStatelessProps = {
     /** Id of the highlighted menu item. */
     activedescendantId?: string | null;
     /** Function to get props for each rendered item. This will have some defaults needed for keyboard
@@ -159,7 +159,7 @@ export declare type SharedStatelessProps = {
     unfocusMenu?: () => unknown;
     handleKeyDown?: (event: KeyboardEvent) => unknown;
 };
-export declare type StatefulMenuProps = {
+export type StatefulMenuProps = {
     /** List of menu items. */
     items: Items;
     /** Initial state of the stateful menu. */
@@ -200,10 +200,10 @@ export declare type StatefulMenuProps = {
         current: HTMLElement | null;
     }) => boolean;
 } & MenuProps;
-export declare type StatefulMenuProfileProps = StatefulContainerProps & MenuProfileProps;
-export declare type StatelessMenuProps = SharedStatelessProps & MenuProps;
-export declare type StatelessMenuProfileProps = SharedStatelessProps & MenuProfileProps;
-export declare type OptionListProps = {
+export type StatefulMenuProfileProps = StatefulContainerProps & MenuProfileProps;
+export type StatelessMenuProps = SharedStatelessProps & MenuProps;
+export type StatelessMenuProfileProps = SharedStatelessProps & MenuProfileProps;
+export type OptionListProps = {
     /** Item to parse and render. */
     item: Item;
     /** Function used to get the string label for each item. */
@@ -242,7 +242,7 @@ export declare type OptionListProps = {
     /** Accessibility role of the item */
     role?: string;
 };
-export declare type OptionProfileProps = {
+export type OptionProfileProps = {
     /** Item to parse and render. */
     item: Item;
     /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */
@@ -270,10 +270,10 @@ export declare type OptionProfileProps = {
     /** Renders all menu content for SEO purposes regardless of menu  state */
     renderAll?: boolean;
 };
-export declare type NestedMenuRef = {
+export type NestedMenuRef = {
     current: HTMLElement | null;
 };
-export declare type NestedMenuContextProps = {
+export type NestedMenuContextProps = {
     addMenuToNesting: (ref: NestedMenuRef) => void;
     removeMenuFromNesting: (ref: NestedMenuRef) => void;
     getParentMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null;

package/message-card/message-card.js

@@ -31,14 +31,14 @@ 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); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-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); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -85,10 +85,14 @@ var MessageCard = function MessageCard(_ref2) {
       backgroundPosition = _ref3.backgroundPosition,
       ariaLabel = _ref3.ariaLabel;
 
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
   var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       Root = _getOverrides2[0],
-      RootProps = _getOverrides2[1];
+      rootProps = _getOverrides2[1];
 
   var _getOverrides3 = (0, _overrides.getOverrides)(overrides.ContentContainer, _styledComponents.StyledContentContainer),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
@@ -98,27 +102,37 @@ var MessageCard = function MessageCard(_ref2) {
   var _getOverrides5 = (0, _overrides.getOverrides)(overrides.HeadingContainer, _styledComponents.StyledHeadingContainer),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       HeadingContainer = _getOverrides6[0],
-      HeadingContainerProps = _getOverrides6[1];
+      headingContainerProps = _getOverrides6[1];
 
   var _getOverrides7 = (0, _overrides.getOverrides)(overrides.ParagraphContainer, _styledComponents.StyledParagraphContainer),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       ParagraphContainer = _getOverrides8[0],
-      ParagraphContainerProps = _getOverrides8[1];
+      paragraphContainerProps = _getOverrides8[1];
 
   var _getOverrides9 = (0, _overrides.getOverrides)(overrides.Image, _styledComponents.StyledImage),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       Image = _getOverrides10[0],
-      ImageProps = _getOverrides10[1];
+      imageProps = _getOverrides10[1];
 
   var _getOverrides11 = (0, _overrides.getOverrides)(overrides.Button, ButtonAlwaysLightTheme),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
       Button = _getOverrides12[0],
-      ButtonProps = _getOverrides12[1];
-
-  var _useStyletron = (0, _index.useStyletron)(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 2),
-      theme = _useStyletron2[1];
-
+      buttonProps = _getOverrides12[1];
+
+  var defaultButtonOverrides = {
+    BaseButton: {
+      style: _objectSpread({
+        textAlign: 'center',
+        pointerEvents: 'none'
+      }, buttonKind === _constants.BUTTON_KIND.tertiary ? {
+        marginTop: theme.sizing.scale100,
+        transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
+      } : {
+        marginTop: theme.sizing.scale500
+      })
+    }
+  };
+  buttonProps.overrides = (0, _overrides.mergeOverrides)(defaultButtonOverrides, buttonProps.overrides);
   var backgroundColorType = backgroundColorTypeProp || (0, _utils.getBackgroundColorType)(backgroundColor);
 
   if (!backgroundColorType) {
@@ -150,34 +164,21 @@ var MessageCard = function MessageCard(_ref2) {
     $backgroundColor: backgroundColor,
     $backgroundColorType: backgroundColorType,
     $imageLayout: layout
-  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+  }, rootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
     "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
-  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+  }, imageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, headingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, paragraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
     $as: "div",
     kind: buttonKind,
     shape: _button.SHAPE.pill,
     size: _button.SIZE.compact,
     role: "none",
     tabIndex: -1,
-    colors: buttonColors,
-    overrides: {
-      BaseButton: {
-        style: _objectSpread({
-          textAlign: 'center',
-          pointerEvents: 'none'
-        }, buttonKind === _constants.BUTTON_KIND.tertiary ? {
-          marginTop: theme.sizing.scale100,
-          transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
-        } : {
-          marginTop: theme.sizing.scale500
-        })
-      }
-    }
-  }, ButtonProps), buttonLabel)));
+    colors: buttonColors
+  }, buttonProps), buttonLabel)));
 };
 
 var _default = MessageCard;

package/message-card/types.d.ts

@@ -1,7 +1,7 @@
 import type { SyntheticEvent } from 'react';
 import type { Override } from '../helpers/overrides';
 import type { BACKGROUND_COLOR_TYPE, IMAGE_LAYOUT, BUTTON_KIND } from './constants';
-export declare type MessageCardOverrides = {
+export type MessageCardOverrides = {
     Root?: Override;
     ContentContainer?: Override;
     HeadingContainer?: Override;

package/mobile-header/constants.js

@@ -7,7 +7,6 @@ exports.TYPE = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
-
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */

package/mobile-header/mobile-header.js

@@ -147,8 +147,8 @@ function MobileHeader(_ref2) {
     $expanded: expanded
   }), /*#__PURE__*/React.createElement(NavContainer, _extends({
     $type: type,
-    $hasTextContent: !Boolean(navButton.renderIcon)
-  }, navContainerProps), /*#__PURE__*/React.createElement(HeaderButton, _extends({
+    $hasTextContent: navButton && !Boolean(navButton.renderIcon)
+  }, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
     onClick: navButton.onClick,
     type: type,
     "aria-label": navButton.label

package/mobile-header/styled-components.js

@@ -23,7 +23,8 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
   return _objectSpread({
     width: '100%',
     display: 'grid',
-    gridTemplateColumns: 'auto 1fr auto'
+    gridTemplateColumns: 'auto 1fr auto',
+    gridTemplateRows: '48px'
   }, $type === _constants.TYPE.floating ? {
     backgroundColor: 'transparent',
     pointerEvents: 'none'
@@ -44,7 +45,8 @@ var StyledNavContainer = (0, _styles.styled)('div', function (_ref2) {
     paddingLeft: $theme.sizing.scale300
   };
   return _objectSpread({
-    pointerEvents: 'auto'
+    pointerEvents: 'auto',
+    minWidth: '48px'
   }, $hasTextContent && $type === _constants.TYPE.fixed ? {} : floatingPadding);
 });
 exports.StyledNavContainer = StyledNavContainer;

package/mobile-header/types.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
 import type { Override } from '../helpers/overrides';
 import type { TYPE } from './constants';
-export declare type Type = keyof typeof TYPE;
-export declare type MobileHeaderOverrides = {
+export type Type = keyof typeof TYPE;
+export type MobileHeaderOverrides = {
     Root?: Override;
     Title?: Override;
     NavContainer?: Override;
     HeaderButton?: Override;
     ActionButtonsContainer?: Override;
 };
-export declare type IconButton = {
+export type IconButton = {
     renderIcon?: React.ComponentType<{
         size: number;
     } & any>;
     onClick: () => void;
     label: string;
 };
-export declare type MobileHeaderProps = {
+export type MobileHeaderProps = {
     title?: string;
     expanded?: boolean;
-    navButton: IconButton;
+    navButton?: IconButton;
     actionButtons?: [IconButton?, IconButton?];
     type?: Type;
     overrides?: MobileHeaderOverrides;

package/modal/focus-once.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = {
+type Props = {
     children: React.ReactNode;
 };
 /**

package/modal/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type ModalLocale = {
+export type ModalLocale = {
     close: string;
 };
 declare const locale: {

package/modal/modal-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const ModalButton: React.ForwardRefExoticComponent<Pick<import("../button").ButtonProps & import("../button").SharedStyleProps & Omit<any, keyof import("../button").SharedStyleProps | keyof import("../button").ButtonProps> & {
-    $as?: React.ElementType<any>;
-}, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalButton: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & import("../button").SharedStyleProps & Omit<any, keyof import("../button").SharedStyleProps | keyof import("../button").ButtonProps> & {
+    $as?: "symbol" | "object" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default ModalButton;

package/modal/modal-button.js

@@ -24,6 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 // ModalButtons should have some margin pre-applied
 var overrides = {
   BaseButton: {
+    // @ts-ignore
     style: function style(_ref) {
       var $theme = _ref.$theme;
       var marginInlineEnd = $theme.direction !== 'rtl' ? 'marginRight' : 'marginLeft';

package/modal/modal.d.ts

@@ -3,8 +3,8 @@ import type { ModalProps, ModalState, SharedStylePropsArg, CloseSource } from '.
 import type { SyntheticEvent } from 'react';
 declare class Modal extends React.Component<ModalProps, ModalState> {
     static defaultProps: Partial<ModalProps>;
-    animateOutTimer: TimeoutID | undefined | null;
-    animateStartTimer: AnimationFrameID | undefined | null;
+    animateOutTimer: ReturnType<typeof setTimeout> | undefined | null;
+    animateStartTimer: ReturnType<typeof requestAnimationFrame> | undefined | null;
     dialogContainerRef: React.RefObject<HTMLElement>;
     lastFocus: HTMLElement | undefined | null;
     lastMountNodeOverflowStyle: string | undefined | null;
@@ -32,8 +32,8 @@ declare class Modal extends React.Component<ModalProps, ModalState> {
     animateOutComplete: () => void;
     getSharedProps(): Omit<SharedStylePropsArg, 'children'>;
     getMountNode(): HTMLElement;
-    getChildren(): any;
-    renderModal(): JSX.Element;
+    getChildren(): React.ReactNode;
+    renderModal(renderedContent: React.ReactNode): JSX.Element;
     render(): JSX.Element;
 }
 export default Modal;

package/modal/modal.js

@@ -268,10 +268,13 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           role = _this$props.role,
           closeable = _this$props.closeable;
       return {
+        // @ts-ignore
         $animate: animate,
         $isVisible: this.state.isVisible,
         $isOpen: !!isOpen,
+        // @ts-ignore
         $size: size,
+        // @ts-ignore
         $role: role,
         $closeable: !!closeable,
         $isFocusVisible: this.state.isFocusVisible
@@ -298,7 +301,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderModal",
-    value: function renderModal() {
+    value: function renderModal(renderedContent) {
       var _this3 = this;
 
       var _this$props2 = this.props,
@@ -335,7 +338,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           closeProps = _getOverrides8[1];
 
       var sharedProps = this.getSharedProps();
-      var children = this.getChildren();
       return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
           disabled: !focusLock // Allow focus to escape when UI is within an iframe
@@ -344,7 +346,8 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           returnFocus: returnFocus,
           autoFocus: autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({
-          "data-baseweb": "modal",
+          "data-baseweb": "modal" // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ,
           ref: _this3.rootRef
         }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
         , _extends({
@@ -354,7 +357,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           "aria-modal": true,
           "aria-label": "dialog",
           role: role
-        }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
+        }, sharedProps, dialogProps), renderedContent, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
           "aria-label": locale.modal.close,
           onClick: _this3.onCloseClick
         }, sharedProps, closeProps, {
@@ -366,21 +369,23 @@ var Modal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      // Only render modal on the browser (portals aren't supported server-side)
-      if (!this.state.mounted) {
-        return null;
-      } // Only render the modal if its isOpen is passed, or isVisible is true (still animating)
-
-
-      if (!this.props.isOpen && !this.state.isVisible) {
+      // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
+      var mountedAndOpen = this.state.mounted && (this.props.isOpen || this.state.isVisible);
+      var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+
+      if (renderedContent) {
+        if (mountedAndOpen) {
+          return /*#__PURE__*/React.createElement(_layer.Layer, {
+            onEscape: this.onEscape,
+            onDocumentClick: this.onDocumentClick,
+            mountNode: this.props.mountNode
+          }, this.renderModal(renderedContent));
+        } else {
+          return /*#__PURE__*/React.createElement(_styledComponents.Hidden, null, renderedContent);
+        }
+      } else {
         return null;
       }
-
-      return /*#__PURE__*/React.createElement(_layer.Layer, {
-        onEscape: this.onEscape,
-        onDocumentClick: this.onDocumentClick,
-        mountNode: this.props.mountNode
-      }, this.renderModal());
     }
   }]);
 
@@ -397,7 +402,8 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: _constants.ROLE.dialog,
-  size: _constants.SIZE.default
+  size: _constants.SIZE.default,
+  renderAll: false
 });
 
 var _default = Modal;

package/modal/modal.js.flow

@@ -19,6 +19,7 @@ import {
   Dialog as StyledDialog,
   DialogContainer as StyledDialogContainer,
   Close as StyledClose,
+  Hidden,
 } from './styled-components.js';
 import { CloseIcon } from './close-icon.js';
 
@@ -37,6 +38,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     overrides: {},
     role: ROLE.dialog,
     size: SIZE.default,
+    renderAll: false,
   };
 
   animateOutTimer: ?TimeoutID;
@@ -218,7 +220,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     return typeof children === 'function' ? children() : children;
   }
 
-  renderModal() {
+  renderModal(renderedContent: React.Node) {
     const { overrides = {}, closeable, role, autoFocus, focusLock, returnFocus } = this.props;
 
     const {
@@ -237,7 +239,6 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
 
     const sharedProps = this.getSharedProps();
-    const children = this.getChildren();
 
     return (
       <LocaleContext.Consumer>
@@ -270,7 +271,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
                   {...sharedProps}
                   {...dialogProps}
                 >
-                  {children}
+                  {renderedContent}
                   {closeable ? (
                     <Close
                       aria-label={locale.modal.close}
@@ -293,23 +294,28 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
   }
 
   render() {
-    // Only render modal on the browser (portals aren't supported server-side)
-    if (!this.state.mounted) {
-      return null;
-    }
-    // Only render the modal if its isOpen is passed, or isVisible is true (still animating)
-    if (!this.props.isOpen && !this.state.isVisible) {
+    // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
+    const mountedAndOpen = this.state.mounted && (this.props.isOpen || this.state.isVisible);
+
+    const renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+
+    if (renderedContent) {
+      if (mountedAndOpen) {
+        return (
+          <Layer
+            onEscape={this.onEscape}
+            onDocumentClick={this.onDocumentClick}
+            mountNode={this.props.mountNode}
+          >
+            {this.renderModal(renderedContent)}
+          </Layer>
+        );
+      } else {
+        return <Hidden>{renderedContent}</Hidden>;
+      }
+    } else {
       return null;
     }
-    return (
-      <Layer
-        onEscape={this.onEscape}
-        onDocumentClick={this.onDocumentClick}
-        mountNode={this.props.mountNode}
-      >
-        {this.renderModal()}
-      </Layer>
-    );
   }
 }
 

package/modal/styled-components.d.ts

@@ -6,3 +6,4 @@ export declare const Close: import("styletron-react").StyletronComponent<"button
 export declare const ModalHeader: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const ModalBody: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const ModalFooter: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const Hidden: import("styletron-react").StyletronComponent<"div", {}>;

package/modal/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Root = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.DialogContainer = exports.Dialog = exports.Close = void 0;
+exports.Root = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Hidden = exports.DialogContainer = exports.Dialog = exports.Close = void 0;
 
 var _styles = require("../styles");
 
@@ -18,12 +18,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function getSizeStyles($size) {
   var styles = {
     maxWidth: '100%',
+    // @ts-ignore
     width: null
   };
 
   if (typeof $size === 'number') {
-    styles.width = "".concat($size, "px");
+    styles.width = "".concat($size, "px"); // @ts-ignore
   } else if (_constants.SIZE[$size]) {
+    // @ts-ignore
     styles.width = _constants.SIZE_WIDTHS[$size];
   } else if (typeof $size === 'string') {
     styles.width = $size;
@@ -201,4 +203,10 @@ var ModalFooter = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.ModalFooter = ModalFooter;
 ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
+var Hidden = (0, _styles.styled)('div', {
+  display: 'none'
+});
+exports.Hidden = Hidden;
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';