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

package/lib/Modal/props.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _element = require("@instructure/ui-prop-types/lib/element.js");
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _Transition = require("@instructure/ui-motion/lib/Transition");
+
+var _ModalHeader = require("./ModalHeader");
+
+var _ModalBody = require("./ModalBody");
+
+var _ModalFooter = require("./ModalFooter");
+
+/*
+ * 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.
+ */
+const propTypes = {
+  /**
+   * An accessible label for the `<Modal />` content
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The children to be rendered within the `<Modal />`
+   */
+  children: _Children.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),
+
+  /**
+   * The element to render the dialog as, `span` by default
+   */
+  as: _propTypes.default.elementType,
+
+  /**
+   * The size of the `<Modal />` content
+   */
+  size: _propTypes.default.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
+
+  /**
+   * Designates the background style of the `<Modal />`
+   */
+  variant: _propTypes.default.oneOf(['default', 'inverse']),
+
+  /**
+   * Whether or not the `<Modal />` is open
+   */
+  open: _propTypes.default.bool,
+
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+
+  /**
+   * Whether focus should be returned to the trigger when the `<Modal/>` is closed
+   */
+  shouldReturnFocus: _propTypes.default.bool,
+
+  /**
+   * Whether the `<Modal/>` should request close when the document is clicked
+   */
+  shouldCloseOnDocumentClick: _propTypes.default.bool,
+
+  /**
+   * Callback fired when `<Modal />` content has been mounted in the DOM
+   */
+  onOpen: _propTypes.default.func,
+
+  /**
+   * Callback fired when `<Modal />` has been unmounted from the DOM
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * Callback fired when the `<Modal />` is requesting to be closed
+   */
+  onDismiss: _propTypes.default.func,
+
+  /**
+   *
+   * A function that returns a reference to the content element
+   */
+  contentRef: _propTypes.default.func,
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   * for the `<Modal />` (defaults to `document.body`)
+   */
+  mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
+
+  /**
+   * Insert the element at the 'top' of the mountNode or at the 'bottom'
+   */
+  insertAt: _propTypes.default.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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
+  transition: _Transition.Transition.propTypes.type,
+
+  /**
+   * Callback fired before the <Modal /> transitions in
+   */
+  onEnter: _propTypes.default.func,
+
+  /**
+   * Callback fired as the <Modal /> begins to transition in
+   */
+  onEntering: _propTypes.default.func,
+
+  /**
+   * Callback fired after the <Modal /> finishes transitioning in
+   */
+  onEntered: _propTypes.default.func,
+
+  /**
+   * Callback fired right before the <Modal /> transitions out
+   */
+  onExit: _propTypes.default.func,
+
+  /**
+   * Callback fired as the <Modal /> begins to transition out
+   */
+  onExiting: _propTypes.default.func,
+
+  /**
+   * Callback fired after the <Modal /> finishes transitioning out
+   */
+  onExited: _propTypes.default.func,
+
+  /**
+   * Constrain the Modal to the document window or its closest positioned parent
+   */
+  constrain: _propTypes.default.oneOf(['window', 'parent']),
+
+  /**
+   * Should ModalBody handle overflow with scrollbars, or fit its
+   * content within its own height?
+   */
+  overflow: _propTypes.default.oneOf(['scroll', 'fit'])
+};
+exports.propTypes = propTypes;
+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'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.9.0",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,35 +25,34 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-buttons": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-dialog": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-motion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-overlays": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-portal": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-testable": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-view": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.9.0",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-buttons": "8.9.0",
+    "@instructure/ui-dialog": "8.9.0",
+    "@instructure/ui-motion": "8.9.0",
+    "@instructure/ui-overlays": "8.9.0",
+    "@instructure/ui-portal": "8.9.0",
+    "@instructure/ui-prop-types": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-testable": "8.9.0",
+    "@instructure/ui-utils": "8.9.0",
+    "@instructure/ui-view": "8.9.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-position": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-color-utils": "8.9.0",
+    "@instructure/ui-position": "8.9.0",
+    "@instructure/ui-test-locator": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "sideEffects": false
 }

package/src/Modal/ModalBody/index.tsx

@@ -24,16 +24,17 @@
 
 /** @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 { ModalBodyProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { ModalBodyProps } from './props'
 
 /**
 ---
@@ -46,27 +47,13 @@ id: Modal.Body
 class ModalBody extends Component<ModalBodyProps> {
   static readonly componentId = 'Modal.Body'
 
-  static 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
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     padding: 'medium',
     as: 'div',
     variant: 'default',
-    children: null,
-    elementRef: undefined,
-    overflow: undefined
+    children: null
   }
 
   componentDidMount() {
@@ -105,7 +92,7 @@ class ModalBody extends Component<ModalBodyProps> {
         height={isFit ? '100%' : undefined}
         elementRef={elementRef}
         as={as}
-        css={this.props.styles.modalBody}
+        css={this.props.styles?.modalBody}
         padding={padding}
         tabIndex={-1} // prevent FF from focusing view when scrollable
       >

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

@@ -22,39 +22,46 @@
  * SOFTWARE.
  */
 
-import { AsElementType } from '@instructure/shared-types'
-import type { PortalNode } from '@instructure/ui-portal'
-import type { PositionMountNode } from '@instructure/ui-position'
-import type { TransitionType } from '@instructure/ui-motion'
+import React from 'react'
+import PropTypes from 'prop-types'
 
-export type ModalProps = {
-  label: string
+import { ThemeablePropTypes } from '@instructure/emotion'
+
+import type { Spacing, WithStyleProps } from '@instructure/emotion'
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
+
+type ModalBodyOwnProps = {
+  children?: React.ReactNode
+  padding?: Spacing
+  elementRef?: (...args: any[]) => any
   as?: AsElementType
-  size?: 'auto' | 'small' | 'medium' | 'large' | 'fullscreen'
   variant?: 'default' | 'inverse'
-  open?: boolean
-  defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
-  shouldReturnFocus?: boolean
-  shouldCloseOnDocumentClick?: boolean
-  onOpen?: (DOMNode: PortalNode) => any
-  onClose?: (...args: any[]) => any
-  onDismiss?: (...args: any[]) => any
-  contentRef?: (...args: any[]) => any
-  mountNode?: PositionMountNode
-  insertAt?: 'bottom' | 'top'
-  liveRegion?:
-    | React.ReactElement[]
-    | React.ReactElement
-    | ((...args: any[]) => any)
-  transition?: TransitionType
-  onEnter?: (...args: any[]) => any
-  onEntering?: (...args: any[]) => any
-  onEntered?: (...args: any[]) => any
-  onExit?: (...args: any[]) => any
-  onExiting?: (...args: any[]) => any
-  onExited?: (...args: any[]) => any
-  constrain?: 'window' | 'parent'
   overflow?: 'scroll' | 'fit'
-  makeStyles?: (...args: any[]) => any
-  styles?: any
 }
+
+type PropKeys = keyof ModalBodyOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalBodyProps = ModalBodyOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  padding: ThemeablePropTypes.spacing,
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType,
+  variant: PropTypes.oneOf(['default', 'inverse']),
+  overflow: PropTypes.oneOf(['scroll', 'fit'])
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'padding',
+  'elementRef',
+  'as',
+  'variant',
+  'overflow'
+]
+
+export type { ModalBodyProps }
+export { propTypes, allowedProps }

package/src/Modal/ModalBody/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { ModalBodyTheme } from '@instructure/shared-types'
-import { ModalBodyProps } from './types'
+import { ModalBodyProps } from './props'
 
 /**
  * ---

package/src/Modal/ModalFooter/index.tsx

@@ -24,14 +24,15 @@
 
 /** @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 { ModalFooterProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { ModalFooterProps } from './props'
 
 /**
 ---
@@ -44,16 +45,8 @@ id: Modal.Footer
 class ModalFooter extends Component<ModalFooterProps> {
   static readonly componentId = 'Modal.Footer'
 
-  static 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
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     variant: 'default',
     children: null
@@ -74,7 +67,7 @@ class ModalFooter extends Component<ModalFooterProps> {
     const { children, ...rest } = this.props
 
     return (
-      <div css={this.props.styles.modalFooter} {...passthroughProps(rest)}>
+      <div css={this.props.styles?.modalFooter} {...passthroughProps(rest)}>
         {children}
       </div>
     )

package/src/Modal/ModalFooter/props.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type ModalFooterOwnProps = {
+  children?: React.ReactNode
+  variant?: 'default' | 'inverse'
+}
+
+type PropKeys = keyof ModalFooterOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalFooterProps = ModalFooterOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['default', 'inverse'])
+}
+
+const allowedProps: AllowedPropKeys = ['children', 'variant']
+
+export type { ModalFooterProps }
+export { propTypes, allowedProps }