baseui 12.1.3 → 13.0.0

package/mobile-header/index.js.flow

@@ -0,0 +1,54 @@
+/*
+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.
+*/
+// @flow
+import * as React from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
+import { type StyletronComponent } from 'styletron-react';
+
+declare export var TYPE: {
+  fixed: 'fixed',
+  floating: 'floating',
+};
+
+export type TypeT = $Values<typeof TYPE>;
+
+export type MobileHeaderOverridesT = {
+  Root?: OverrideT,
+  Title?: OverrideT,
+  NavContainer?: OverrideT,
+  HeaderButton?: OverrideT,
+  AdditionalButtonContainer?: OverrideT,
+};
+
+export type IconButtonT = {
+  renderIcon?: React.AbstractComponent<{| size: number |}>,
+  onClick: () => void,
+  label: string,
+};
+
+export type MobileHeaderPropsT = {
+  title?: string,
+  expanded?: boolean,
+  navButton: IconButtonT,
+  actionButtons?: IconButtonT[],
+  type?: TypeT,
+  overrides?: MobileHeaderOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<'div', { $type: TypeT }>;
+declare export var StyledNavContainer: StyletronComponent<
+  'div',
+  { $hasTextContent: boolean, $type: TypeT }
+>;
+declare export var StyledActionButtonsContainer: StyletronComponent<'div', {}>;
+declare export var StyledTitle: StyletronComponent<'div', { $expanded: boolean }>;
+
+declare export var MobileHeader: React.ComponentType<MobileHeaderPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/mobile-header/mobile-header.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MobileHeaderProps } from './types';
+export declare function MobileHeader({ overrides, title, navButton, actionButtons, type, expanded, }: MobileHeaderProps): JSX.Element;
+export default MobileHeader;

package/mobile-header/mobile-header.js

@@ -0,0 +1,173 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileHeader = MobileHeader;
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _overrides = require("../helpers/overrides");
+
+var _button = require("../button");
+
+var _styledComponents = require("./styled-components");
+
+var _constants = require("./constants");
+
+var _index = require("../styles/index");
+
+var _excluded = ["children", "type"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+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 _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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var renderButtonContent = function renderButtonContent(content) {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  var Icon = content;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: 32
+  });
+};
+
+var DefaultHeaderButton = function DefaultHeaderButton(_ref) {
+  var children = _ref.children,
+      type = _ref.type,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
+  var isFloating = type === _constants.TYPE.floating;
+  var hasTextContent = typeof children === 'string';
+  var shouldHaveTrailingMargin = isFloating || !hasTextContent;
+  var trailingMargin = theme.direction === 'rtl' ? {
+    marginLeft: theme.sizing.scale300
+  } : {
+    marginRight: theme.sizing.scale300
+  };
+
+  var style = _objectSpread(_objectSpread(_objectSpread({}, !hasTextContent ? {
+    height: '48px',
+    width: '48px',
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  } : {}), shouldHaveTrailingMargin ? trailingMargin : {}), isFloating ? {
+    backgroundColor: theme.colors.backgroundPrimary
+  } : {});
+
+  return /*#__PURE__*/React.createElement(_button.Button, _extends({
+    kind: _button.KIND.tertiary,
+    shape: _button.SHAPE.pill,
+    overrides: {
+      BaseButton: {
+        style: style
+      }
+    }
+  }, restProps), children);
+};
+
+function MobileHeader(_ref2) {
+  var _ref2$overrides = _ref2.overrides,
+      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides,
+      title = _ref2.title,
+      navButton = _ref2.navButton,
+      _ref2$actionButtons = _ref2.actionButtons,
+      actionButtons = _ref2$actionButtons === void 0 ? [] : _ref2$actionButtons,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? _constants.TYPE.fixed : _ref2$type,
+      _ref2$expanded = _ref2.expanded,
+      expanded = _ref2$expanded === void 0 ? false : _ref2$expanded;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Title = _getOverrides4[0],
+      titleProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.NavContainer, _styledComponents.StyledNavContainer),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      NavContainer = _getOverrides6[0],
+      navContainerProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.HeaderButton, DefaultHeaderButton),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      HeaderButton = _getOverrides8[0],
+      iconButtonProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.ActionButtonsContainer, _styledComponents.StyledActionButtonsContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      ActionButtonsContainer = _getOverrides10[0],
+      actionButtonsContainerProps = _getOverrides10[1];
+
+  if (actionButtons.length > 2 && process.env.NODE_ENV !== "production") {
+    console.warn("MobileHeader can only render two additional buttons. Received ".concat(actionButtons.length));
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
+    $type: type,
+    $expanded: expanded
+  }), /*#__PURE__*/React.createElement(NavContainer, _extends({
+    $type: type,
+    $hasTextContent: navButton && !Boolean(navButton.renderIcon)
+  }, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
+    onClick: navButton.onClick,
+    type: type,
+    "aria-label": navButton.label
+  }, iconButtonProps), renderButtonContent(navButton.renderIcon || navButton.label))), type === _constants.TYPE.fixed && /*#__PURE__*/React.createElement(Title, _extends({
+    $type: type,
+    $expanded: expanded
+  }, titleProps), title), actionButtons.length > 0 && /*#__PURE__*/React.createElement(ActionButtonsContainer, actionButtonsContainerProps, actionButtons.map(function (button, idx) {
+    var renderIcon = button.renderIcon,
+        onClick = button.onClick,
+        label = button.label;
+    return /*#__PURE__*/React.createElement(HeaderButton, _extends({
+      onClick: onClick,
+      "aria-label": label,
+      type: type
+    }, iconButtonProps, {
+      key: idx
+    }), renderButtonContent(renderIcon || label));
+  })));
+}
+
+var _default = MobileHeader;
+exports.default = _default;

package/mobile-header/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/mobile-header/index.js"
+}

package/mobile-header/styled-components.d.ts

@@ -0,0 +1,12 @@
+import type { Type } from './types';
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $type: Type;
+}>;
+export declare const StyledNavContainer: import("styletron-react").StyletronComponent<"div", {
+    $hasTextContent: boolean;
+    $type: Type;
+}>;
+export declare const StyledActionButtonsContainer: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledTitle: import("styletron-react").StyletronComponent<"div", {
+    $expanded: boolean;
+}>;

package/mobile-header/styled-components.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTitle = exports.StyledRoot = exports.StyledNavContainer = exports.StyledActionButtonsContainer = void 0;
+
+var _styles = require("../styles");
+
+var _constants = require("./constants");
+
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
+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; }
+
+var StyledRoot = (0, _styles.styled)('div', function (_ref) {
+  var $theme = _ref.$theme,
+      $type = _ref.$type;
+  return _objectSpread({
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    gridTemplateRows: '48px'
+  }, $type === _constants.TYPE.floating ? {
+    backgroundColor: 'transparent',
+    pointerEvents: 'none'
+  } : {
+    backgroundColor: $theme.colors.backgroundPrimary
+  });
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledNavContainer = (0, _styles.styled)('div', function (_ref2) {
+  var $hasTextContent = _ref2.$hasTextContent,
+      $type = _ref2.$type,
+      $theme = _ref2.$theme;
+  var floatingPadding = $theme.direction === 'rtl' ? {
+    paddingRight: $theme.sizing.scale300
+  } : {
+    paddingLeft: $theme.sizing.scale300
+  };
+  return _objectSpread({
+    pointerEvents: 'auto',
+    minWidth: '48px'
+  }, $hasTextContent && $type === _constants.TYPE.fixed ? {} : floatingPadding);
+});
+exports.StyledNavContainer = StyledNavContainer;
+StyledNavContainer.displayName = "StyledNavContainer";
+StyledNavContainer.displayName = 'StyledNavContainer';
+var StyledActionButtonsContainer = (0, _styles.styled)('div', function (_ref3) {
+  _objectDestructuringEmpty(_ref3);
+
+  return {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gridColumn: '3 / 4',
+    pointerEvents: 'auto'
+  };
+});
+exports.StyledActionButtonsContainer = StyledActionButtonsContainer;
+StyledActionButtonsContainer.displayName = "StyledActionButtonsContainer";
+StyledActionButtonsContainer.displayName = 'StyledActionButtonsContainer';
+var StyledTitle = (0, _styles.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$expanded = _ref4.$expanded,
+      $expanded = _ref4$$expanded === void 0 ? false : _ref4$$expanded;
+  return _objectSpread(_objectSpread(_objectSpread({
+    alignSelf: 'center',
+    justifyContent: 'flex-start'
+  }, $expanded ? $theme.typography.DisplayXSmall : $theme.typography.LabelLarge), $expanded ? {
+    gridColumn: '1 / 4',
+    gridRow: 2,
+    paddingLeft: $theme.sizing.scale600
+  } : {}), {}, {
+    // truncate long titles
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  });
+});
+exports.StyledTitle = StyledTitle;
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';

package/mobile-header/types.d.ts

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

package/mobile-header/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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", {}>;