@instructure/ui-modal 8.23.1-snapshot.7 → 8.24.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+**Note:** Version bump only for package @instructure/ui-modal
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/index.js

@@ -42,6 +42,7 @@ import { propTypes, allowedProps } from './props';
 parent: Modal
 id: Modal.Body
 ---
+@tsProps
 **/
 let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends Component {
   constructor() {
@@ -59,24 +60,28 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          as = _this$props.as,
-          elementRef = _this$props.elementRef,
-          overflow = _this$props.overflow,
-          variant = _this$props.variant,
-          padding = _this$props.padding,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          elementRef = _this$props3.elementRef,
+          overflow = _this$props3.overflow,
+          variant = _this$props3.variant,
+          padding = _this$props3.padding,
+          children = _this$props3.children,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
@@ -96,8 +101,7 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
 }, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   padding: 'medium',
   as: 'div',
-  variant: 'default',
-  children: null
+  variant: 'default'
 }, _class2)) || _class) || _class);
 export default ModalBody;
 export { ModalBody };

package/es/Modal/ModalFooter/index.js

@@ -41,6 +41,7 @@ import { propTypes, allowedProps } from './props';
 parent: Modal
 id: Modal.Footer
 ---
+@tsProps
 **/
 let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ModalFooter extends Component {
   constructor() {
@@ -53,19 +54,23 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
@@ -75,8 +80,7 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
 }, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  variant: 'default',
-  children: null
+  variant: 'default'
 }, _class2)) || _class) || _class);
 export default ModalFooter;
 export { ModalFooter };

package/es/Modal/ModalHeader/index.js

@@ -42,6 +42,7 @@ import { propTypes, allowedProps } from './props';
 parent: Modal
 id: Modal.Header
 ---
+@tsProps
 **/
 let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ModalHeader extends Component {
   constructor() {
@@ -60,11 +61,15 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStyleProps());
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   get usesCloseButton() {
@@ -80,9 +85,9 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
@@ -92,7 +97,6 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
 }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   variant: 'default',
   spacing: 'default'
 }, _class2)) || _class) || _class);

package/es/Modal/ModalLocator.js

@@ -22,10 +22,14 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Modal } from './index';
-const ModalHeaderLocator = locator(Modal.Header.selector);
-const ModalBodyLocator = locator(Modal.Body.selector);
-const ModalFooterLocator = locator(Modal.Footer.selector);
+import { Modal } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ModalHeaderLocator = locator(Modal.Header.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ModalBodyLocator = locator(Modal.Body.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ModalFooterLocator = locator(Modal.Footer.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const ModalLocator = locator(Modal.selector, {
   findHeader: function () {
     return ModalHeaderLocator.find(...arguments);

package/es/Modal/index.js

@@ -49,11 +49,13 @@ import { propTypes, allowedProps } from './props';
 category: components
 tags: overlay, portal, dialog
 ---
+@tsProps
 **/
 let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Modal extends Component {
   constructor(props) {
     super(props);
     this._DOMNode = null;
+    this._content = null;
     this.ref = null;
 
     this.handleRef = el => {
@@ -64,7 +66,7 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       this.DOMNode = DOMNode;
     };
 
-    this.handleTransitionExited = _type => {
+    this.handleTransitionExited = () => {
       this.setState({
         transitioning: false
       });
@@ -84,10 +86,14 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
@@ -95,7 +101,7 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       });
     }
 
-    this.props.makeStyles();
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get defaultFocusElement() {
@@ -119,10 +125,10 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          variant = _this$props.variant,
-          overflow = _this$props.overflow;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          variant = _this$props3.variant,
+          overflow = _this$props3.overflow;
     return Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
@@ -140,16 +146,16 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   }
 
   renderDialog(props) {
-    const _this$props2 = this.props,
-          onDismiss = _this$props2.onDismiss,
-          label = _this$props2.label,
-          shouldCloseOnDocumentClick = _this$props2.shouldCloseOnDocumentClick,
-          shouldReturnFocus = _this$props2.shouldReturnFocus,
-          liveRegion = _this$props2.liveRegion,
-          size = _this$props2.size,
-          constrain = _this$props2.constrain,
-          as = _this$props2.as,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          onDismiss = _this$props4.onDismiss,
+          label = _this$props4.label,
+          shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+          shouldReturnFocus = _this$props4.shouldReturnFocus,
+          liveRegion = _this$props4.liveRegion,
+          size = _this$props4.size,
+          constrain = _this$props4.constrain,
+          as = _this$props4.as,
+          styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = jsx(Dialog, Object.assign({}, passthroughProps(props), {
       as: as,
@@ -179,22 +185,22 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   render() {
     var _this$props$styles;
 
-    const _this$props3 = this.props,
-          open = _this$props3.open,
-          onOpen = _this$props3.onOpen,
-          onClose = _this$props3.onClose,
-          mountNode = _this$props3.mountNode,
-          insertAt = _this$props3.insertAt,
-          transition = _this$props3.transition,
-          onEnter = _this$props3.onEnter,
-          onEntering = _this$props3.onEntering,
-          onEntered = _this$props3.onEntered,
-          onExit = _this$props3.onExit,
-          onExiting = _this$props3.onExiting,
-          onExited = _this$props3.onExited,
-          constrain = _this$props3.constrain,
-          overflow = _this$props3.overflow,
-          passthroughProps = _objectWithoutProperties(_this$props3, _excluded);
+    const _this$props5 = this.props,
+          open = _this$props5.open,
+          onOpen = _this$props5.onOpen,
+          onClose = _this$props5.onClose,
+          mountNode = _this$props5.mountNode,
+          insertAt = _this$props5.insertAt,
+          transition = _this$props5.transition,
+          onEnter = _this$props5.onEnter,
+          onEntering = _this$props5.onEntering,
+          onEntered = _this$props5.onEntered,
+          onExit = _this$props5.onExit,
+          onExiting = _this$props5.onExiting,
+          onExited = _this$props5.onExited,
+          constrain = _this$props5.constrain,
+          overflow = _this$props5.overflow,
+          passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
 
     const portalIsOpen = open || this.state.transitioning;
     return jsx(Portal, {
@@ -225,24 +231,9 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   size: 'auto',
   variant: 'default',
   transition: 'fade',
-  onOpen: event => {},
-  onClose: event => {},
-  onDismiss: event => {},
-  onEnter: () => {},
-  onEntering: () => {},
-  onEntered: () => {},
-  onExit: () => {},
-  onExiting: () => {},
-  onExited: () => {},
-  as: void 0,
-  mountNode: null,
   insertAt: 'bottom',
-  liveRegion: null,
-  contentRef: el => {},
   shouldCloseOnDocumentClick: true,
   shouldReturnFocus: true,
-  defaultFocusElement: null,
-  children: null,
   constrain: 'window',
   overflow: 'scroll'
 }, _class2.Header = ModalHeader, _class2.Body = ModalBody, _class2.Footer = ModalFooter, _class2)) || _class) || _class);

package/es/Modal/props.js

@@ -28,129 +28,30 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 const propTypes = {
-  /**
-   * An accessible label for the `<Modal />` content
-   */
   label: PropTypes.string.isRequired,
-
-  /**
-   * The children to be rendered within the `<Modal />`
-   */
   children: ChildrenPropTypes.enforceOrder([ModalHeader, ModalBody, ModalFooter], [ModalHeader, ModalBody], [ModalBody, ModalFooter], [ModalBody]),
-
-  /**
-   * The element to render the dialog as, `span` by default
-   */
   as: PropTypes.elementType,
-
-  /**
-   * The size of the `<Modal />` content
-   */
   size: PropTypes.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
-
-  /**
-   * Designates the background style of the `<Modal />`
-   */
   variant: PropTypes.oneOf(['default', 'inverse']),
-
-  /**
-   * Whether or not the `<Modal />` is open
-   */
   open: PropTypes.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   * Whether focus should be returned to the trigger when the `<Modal/>` is closed
-   */
   shouldReturnFocus: PropTypes.bool,
-
-  /**
-   * Whether the `<Modal/>` should request close when the document is clicked
-   */
   shouldCloseOnDocumentClick: PropTypes.bool,
-
-  /**
-   * Callback fired when `<Modal />` content has been mounted in the DOM
-   */
   onOpen: PropTypes.func,
-
-  /**
-   * Callback fired when `<Modal />` has been unmounted from the DOM
-   */
   onClose: PropTypes.func,
-
-  /**
-   * Callback fired when the `<Modal />` is requesting to be closed
-   */
   onDismiss: PropTypes.func,
-
-  /**
-   *
-   * A function that returns a reference to the content element
-   */
   contentRef: PropTypes.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Modal />` (defaults to `document.body`)
-   */
   mountNode: PropTypes.oneOfType([element, PropTypes.func]),
-
-  /**
-   * Insert the element at the 'top' of the mountNode or at the 'bottom'
-   */
   insertAt: PropTypes.oneOf(['bottom', 'top']),
-
-  /**
-   * An element, function returning an element, or array of elements that will not be hidden from
-   * the screen reader when the `<Modal />` is open
-   */
   liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
   transition: transitionTypePropType,
-
-  /**
-   * Callback fired before the <Modal /> transitions in
-   */
   onEnter: PropTypes.func,
-
-  /**
-   * Callback fired as the <Modal /> begins to transition in
-   */
   onEntering: PropTypes.func,
-
-  /**
-   * Callback fired after the <Modal /> finishes transitioning in
-   */
   onEntered: PropTypes.func,
-
-  /**
-   * Callback fired right before the <Modal /> transitions out
-   */
   onExit: PropTypes.func,
-
-  /**
-   * Callback fired as the <Modal /> begins to transition out
-   */
   onExiting: PropTypes.func,
-
-  /**
-   * Callback fired after the <Modal /> finishes transitioning out
-   */
   onExited: PropTypes.func,
-
-  /**
-   * Constrain the Modal to the document window or its closest positioned parent
-   */
   constrain: PropTypes.oneOf(['window', 'parent']),
-
-  /**
-   * Should ModalBody handle overflow with scrollbars, or fit its
-   * content within its own height?
-   */
   overflow: PropTypes.oneOf(['scroll', 'fit'])
 };
 const allowedProps = ['label', 'children', 'as', 'size', 'variant', 'open', 'defaultFocusElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'contentRef', 'mountNode', 'insertAt', 'liveRegion', 'transition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'constrain', 'overflow'];

package/lib/Modal/ModalBody/index.js

@@ -34,6 +34,7 @@ var _dec, _dec2, _class, _class2;
 parent: Modal
 id: Modal.Body
 ---
+@tsProps
 **/
 let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends _react.Component {
   constructor() {
@@ -51,24 +52,28 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          as = _this$props.as,
-          elementRef = _this$props.elementRef,
-          overflow = _this$props.overflow,
-          variant = _this$props.variant,
-          padding = _this$props.padding,
-          children = _this$props.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          elementRef = _this$props3.elementRef,
+          overflow = _this$props3.overflow,
+          variant = _this$props3.variant,
+          padding = _this$props3.padding,
+          children = _this$props3.children,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
 
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
 
@@ -89,8 +94,7 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
 }, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   padding: 'medium',
   as: 'div',
-  variant: 'default',
-  children: null
+  variant: 'default'
 }, _class2)) || _class) || _class);
 exports.ModalBody = ModalBody;
 var _default = ModalBody;

package/lib/Modal/ModalFooter/index.js

@@ -32,6 +32,7 @@ var _dec, _dec2, _class, _class2;
 parent: Modal
 id: Modal.Footer
 ---
+@tsProps
 **/
 let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalFooter extends _react.Component {
   constructor() {
@@ -44,19 +45,23 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
     }, (0, _passthroughProps.passthroughProps)(rest), {
@@ -65,8 +70,7 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
 }, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  variant: 'default',
-  children: null
+  variant: 'default'
 }, _class2)) || _class) || _class);
 exports.ModalFooter = ModalFooter;
 var _default = ModalFooter;

package/lib/Modal/ModalHeader/index.js

@@ -38,6 +38,7 @@ var _dec, _dec2, _class, _class2;
 parent: Modal
 id: Modal.Header
 ---
+@tsProps
 **/
 let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalHeader extends _react.Component {
   constructor() {
@@ -56,11 +57,15 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStyleProps());
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   get usesCloseButton() {
@@ -78,9 +83,9 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   render() {
     var _this$props$styles;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
     }, (0, _passthroughProps.passthroughProps)(rest), {
@@ -89,7 +94,6 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
 }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   variant: 'default',
   spacing: 'default'
 }, _class2)) || _class) || _class);

package/lib/Modal/ModalLocator.js

@@ -32,9 +32,13 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const ModalHeaderLocator = (0, _locator.locator)(_index.Modal.Header.selector);
-const ModalBodyLocator = (0, _locator.locator)(_index.Modal.Body.selector);
-const ModalFooterLocator = (0, _locator.locator)(_index.Modal.Footer.selector);
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalHeaderLocator = (0, _locator.locator)(_index.Modal.Header.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ModalBodyLocator = (0, _locator.locator)(_index.Modal.Body.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const ModalFooterLocator = (0, _locator.locator)(_index.Modal.Footer.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 const ModalLocator = (0, _locator.locator)(_index.Modal.selector, {
   findHeader: function () {
     return ModalHeaderLocator.find(...arguments);