@instructure/ui-modal 8.8.1-snapshot.3 → 8.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/index.js

@@ -29,13 +29,13 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
-import { withStyle, jsx, ThemeablePropTypes } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -53,6 +53,8 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   render() {
+    var _this$props$styles;
+
     const _this$props = this.props,
           as = _this$props.as,
           elementRef = _this$props.elementRef,
@@ -70,31 +72,18 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       height: isFit ? '100%' : void 0,
       elementRef: elementRef,
       as: as,
-      css: this.props.styles.modalBody,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
       padding: padding,
       tabIndex: -1 // prevent FF from focusing view when scrollable
 
     }), children);
   }
 
-}, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = {
-  children: PropTypes.node,
-  padding: ThemeablePropTypes.spacing,
-  elementRef: PropTypes.func,
-  as: PropTypes.elementType,
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  overflow: PropTypes.oneOf(['scroll', 'fit']),
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   padding: 'medium',
   as: 'div',
   variant: 'default',
-  children: null,
-  elementRef: void 0,
-  overflow: void 0
+  children: null
 }, _temp)) || _class) || _class);
 export default ModalBody;
 export { ModalBody };

package/{src/Modal/ModalBody/types.ts → es/Modal/ModalBody/props.js}

@@ -21,16 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import type { Spacing } from '@instructure/emotion'
-import { AsElementType } from '@instructure/shared-types'
-
-export type ModalBodyProps = {
-  padding?: Spacing
-  elementRef?: (...args: any[]) => any
-  as?: AsElementType
-  variant?: 'default' | 'inverse'
-  overflow?: 'scroll' | 'fit'
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-}
+import PropTypes from 'prop-types';
+import { ThemeablePropTypes } from '@instructure/emotion';
+const propTypes = {
+  children: PropTypes.node,
+  padding: ThemeablePropTypes.spacing,
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType,
+  variant: PropTypes.oneOf(['default', 'inverse']),
+  overflow: PropTypes.oneOf(['scroll', 'fit'])
+};
+const allowedProps = ['children', 'padding', 'elementRef', 'as', 'variant', 'overflow'];
+export { propTypes, allowedProps };

package/es/Modal/ModalFooter/index.js

@@ -29,12 +29,12 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -52,23 +52,18 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   render() {
+    var _this$props$styles;
+
     const _this$props = this.props,
           children = _this$props.children,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
     return jsx("div", Object.assign({
-      css: this.props.styles.modalFooter
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
     }, passthroughProps(rest)), children);
   }
 
-}, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = {
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   variant: 'default',
   children: null
 }, _temp)) || _class) || _class);

package/{src/Modal/ModalFooter/types.ts → es/Modal/ModalFooter/props.js}

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export type ModalFooterProps = {
-  variant?: 'default' | 'inverse'
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-}
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['default', 'inverse'])
+};
+const allowedProps = ['children', 'variant'];
+export { propTypes, allowedProps };

package/es/Modal/ModalHeader/index.js

@@ -29,13 +29,13 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
 import { CloseButton } from '@instructure/ui-buttons';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -72,23 +72,18 @@ 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);
 
     return jsx("div", Object.assign({
-      css: this.props.styles.modalHeader
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
     }, passthroughProps(rest)), children);
   }
 
-}, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = {
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
   variant: 'default'
 }, _temp)) || _class) || _class);

package/{src/Modal/ModalHeader/types.ts → es/Modal/ModalHeader/props.js}

@@ -21,13 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export type ModalHeaderProps = {
-  variant?: 'default' | 'inverse'
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-}
-
-export type ModalHeaderStyleProps = {
-  withCloseButton: boolean
-}
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['default', 'inverse'])
+};
+const allowedProps = ['children', 'variant'];
+export { propTypes, allowedProps };

package/es/Modal/index.js

@@ -29,9 +29,7 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Children, Component } from 'react';
-import PropTypes from 'prop-types';
 import { Dialog } from '@instructure/ui-dialog';
-import { element, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { passthroughProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { Transition } from '@instructure/ui-motion';
@@ -44,6 +42,7 @@ import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -158,7 +157,7 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       shouldReturnFocus: shouldReturnFocus,
       liveRegion: liveRegion,
       onDismiss: onDismiss,
-      css: styles.modal,
+      css: styles === null || styles === void 0 ? void 0 : styles.modal,
       ref: this.contentRef // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
 
     }), this.renderChildren());
@@ -173,6 +172,8 @@ 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,
@@ -209,140 +210,11 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       onExiting: onExiting,
       onExited: createChainedFunction(this.handleTransitionExited, onExited)
     }, constrain === 'parent' ? jsx("span", {
-      css: this.props.styles.constrainContext
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
     }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
   }
 
-}, _class2.displayName = "Modal", _class2.componentId = 'Modal', _class2.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: Transition.propTypes.type,
-
-  /**
-   * 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']),
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object
-}, _class2.defaultProps = {
+}, _class2.displayName = "Modal", _class2.componentId = 'Modal', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   open: false,
   size: 'auto',
   variant: 'default',

package/es/Modal/props.js

@@ -0,0 +1,157 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types';
+import { element, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { Transition } from '@instructure/ui-motion';
+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: Transition.propTypes.type,
+
+  /**
+   * 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'];
+export { propTypes, allowedProps };