@instructure/ui-drawer-layout 8.8.1-snapshot.8 → 8.9.1

package/lib/DrawerLayout/index.js

@@ -21,12 +21,8 @@ exports.DrawerLayoutContext = exports.DrawerLayout = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _bidirectional = require("@instructure/ui-i18n/lib/bidirectional.js");
 
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
@@ -53,6 +49,8 @@ var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
 
+var _props2 = require("./props");
+
 var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /**
@@ -244,40 +242,19 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
   }
 
   render() {
+    var _this$props$styles;
+
     const props = {
       [DrawerLayout.locatorAttribute]: this._id
     };
     return (0, _emotion.jsx)(DrawerLayoutContext.Provider, {
       value: this.state.shouldOverlayTray
     }, (0, _emotion.jsx)("div", Object.assign({}, props, {
-      css: this.props.styles.drawerLayout
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout
     }), this.renderChildren()));
   }
 
-}, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = {
-  /**
-   * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
-   */
-  children: _Children.Children.oneOfEach([_DrawerContent.DrawerContent, _DrawerTray.DrawerTray]),
-
-  /**
-   * Min width for the `<DrawerLayout.Content />`
-   */
-  minWidth: _propTypes.default.string,
-
-  /**
-   * Function called when the `<DrawerLayout.Content />` is resized and hits the `minWidth` breakpoint
-   * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
-   * it is side by side
-   */
-  onOverlayTrayChange: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  // eslint-disable-next-line react/require-default-props
-  dir: _propTypes.default.oneOf(Object.values(_bidirectional.bidirectional.DIRECTION))
-}, _class2.defaultProps = {
+}, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
   children: null,
   minWidth: '30rem',
   onOverlayTrayChange: shouldOverlayTray => {}

package/lib/DrawerLayout/props.js

@@ -0,0 +1,64 @@
+"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 _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _bidirectional = require("@instructure/ui-i18n/lib/bidirectional.js");
+
+var _DrawerContent = require("./DrawerContent");
+
+var _DrawerTray = require("./DrawerTray");
+
+/*
+ * 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 = {
+  /**
+   * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
+   */
+  children: _Children.Children.oneOfEach([_DrawerContent.DrawerContent, _DrawerTray.DrawerTray]),
+
+  /**
+   * Min width for the `<DrawerLayout.Content />`
+   */
+  minWidth: _propTypes.default.string,
+
+  /**
+   * Function called when the `<DrawerLayout.Content />` is resized and hits the `minWidth` breakpoint
+   * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
+   * it is side by side
+   */
+  onOverlayTrayChange: _propTypes.default.func,
+  dir: _propTypes.default.oneOf(Object.values(_bidirectional.bidirectional.DIRECTION))
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'minWidth', 'onOverlayTrayChange', 'dir'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drawer-layout",
-  "version": "8.8.1-snapshot.8+7b83164f4",
+  "version": "8.9.1",
   "description": "A main-content-plus-tray layout component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,29 +25,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/debounce": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/emotion": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/shared-types": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-dialog": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-i18n": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-motion": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-portal": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-position": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-testable": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-view": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/uid": "8.8.1-snapshot.8+7b83164f4",
+    "@instructure/console": "8.9.1",
+    "@instructure/debounce": "8.9.1",
+    "@instructure/emotion": "8.9.1",
+    "@instructure/shared-types": "8.9.1",
+    "@instructure/ui-dialog": "8.9.1",
+    "@instructure/ui-dom-utils": "8.9.1",
+    "@instructure/ui-i18n": "8.9.1",
+    "@instructure/ui-motion": "8.9.1",
+    "@instructure/ui-portal": "8.9.1",
+    "@instructure/ui-position": "8.9.1",
+    "@instructure/ui-prop-types": "8.9.1",
+    "@instructure/ui-react-utils": "8.9.1",
+    "@instructure/ui-test-utils": "8.9.1",
+    "@instructure/ui-testable": "8.9.1",
+    "@instructure/ui-utils": "8.9.1",
+    "@instructure/ui-view": "8.9.1",
+    "@instructure/uid": "8.9.1",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-themes": "8.8.1-snapshot.8+7b83164f4"
+    "@instructure/ui-babel-preset": "8.9.1",
+    "@instructure/ui-test-locator": "8.9.1",
+    "@instructure/ui-themes": "8.9.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -55,6 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "7b83164f4c5872f3a217e010563f59bf584ae4fc"
+  "sideEffects": false
 }

package/src/DrawerLayout/DrawerContent/index.tsx

@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { debounce } from '@instructure/debounce'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
@@ -34,7 +33,12 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { DrawerLayoutContentProps, DrawerLayoutContentState } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type {
+  DrawerLayoutContentProps,
+  DrawerLayoutContentState
+} from './props'
 
 /**
 ---
@@ -51,22 +55,8 @@ class DrawerContent extends Component<
   static readonly componentId = 'DrawerLayout.Content'
 
   static locatorAttribute = 'data-drawer-content'
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    contentRef: PropTypes.func,
-    /**
-     * Callback fired whenever the `<DrawerLayout.Content />` changes size
-     */
-    onSizeChange: PropTypes.func,
-    role: PropTypes.string,
-
-    // 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 = {
     children: null,
     // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
@@ -165,7 +155,7 @@ class DrawerContent extends Component<
         style={style}
         ref={this.handleContentRef}
         aria-label={label}
-        css={this.props.styles.drawerContent}
+        css={this.props.styles?.drawerContent}
       >
         {this.props.children}
       </div>

package/src/DrawerLayout/DrawerContent/props.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 DrawerLayoutContentOwnProps = {
+  label: string
+  children?: React.ReactNode
+  contentRef?: (...args: any[]) => any
+  onSizeChange?: (...args: any[]) => any
+  role?: string
+}
+
+type DrawerLayoutContentState = {
+  shouldTransition: boolean
+}
+
+type PropKeys = keyof DrawerLayoutContentOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type DrawerLayoutContentProps = DrawerLayoutContentOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  contentRef: PropTypes.func,
+  /**
+   * Callback fired whenever the `<DrawerLayout.Content />` changes size
+   */
+  onSizeChange: PropTypes.func,
+  role: PropTypes.string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'children',
+  'contentRef',
+  'onSizeChange',
+  'role'
+]
+
+export type { DrawerLayoutContentProps, DrawerLayoutContentState }
+export { propTypes, allowedProps }

package/src/DrawerLayout/DrawerContent/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { DrawerLayoutContentTheme } from '@instructure/shared-types'
-import { DrawerLayoutContentProps, DrawerLayoutContentState } from './types'
+import { DrawerLayoutContentProps, DrawerLayoutContentState } from './props'
 
 /**
  * ---

package/src/DrawerLayout/DrawerTray/index.tsx

@@ -23,27 +23,29 @@
  */
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
+
 import { withStyle, jsx } from '@instructure/emotion'
 import { bidirectional } from '@instructure/ui-i18n'
 import { Transition } from '@instructure/ui-motion'
 import { omitProps } from '@instructure/ui-react-utils'
-import { element } from '@instructure/ui-prop-types'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
 import { Dialog } from '@instructure/ui-dialog'
 import { Portal } from '@instructure/ui-portal'
 import type { PortalNode } from '@instructure/ui-portal'
 import { mirrorHorizontalPlacement } from '@instructure/ui-position'
+
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { DrawerLayoutContext } from '../index'
-import {
+
+import { propTypes, allowedProps } from './props'
+import type {
   DrawerLayoutTrayProps,
   DrawerLayoutTrayState,
   DrawerLayoutTrayStyleProps,
   DrawerTrayPlacement
-} from './types'
+} from './props'
 
 /**
 ---
@@ -61,102 +63,11 @@ class DrawerTray extends Component<
   static readonly componentId = 'DrawerLayout.Tray' as const
 
   static locatorAttribute = 'data-drawer-tray'
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    render: PropTypes.func,
-    /**
-     * Placement of the `<DrawerLayout.Tray />`
-     */
-    placement: PropTypes.oneOf(['start', 'end']),
-    /**
-     * If the tray is open or closed.
-     */
-    open: PropTypes.bool,
-    /**
-     * Called when the `<DrawerLayout.Tray />` is opened
-     */
-    onOpen: PropTypes.func,
-    /**
-     * Called when the `<DrawerLayout.Tray />` is closed
-     */
-    onClose: PropTypes.func,
-    /**
-     * Should the `<DrawerLayout.Tray />` have a border
-     */
-    border: PropTypes.bool,
-    /**
-     * Should the `<DrawerLayout.Tray />` have a shadow
-     */
-    shadow: PropTypes.bool,
-    /**
-     * Callback fired when the `<DrawerLayout.Tray />` transitions in/out
-     */
-    onTransition: PropTypes.func,
-    /**
-     * Callback fired before the `<DrawerLayout.Tray />` transitions in
-     */
-    onEnter: PropTypes.func,
-    /**
-     * Callback fired as the `<DrawerLayout.Tray />` begins to transition in
-     */
-    onEntering: PropTypes.func,
-    /**
-     * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning in
-     */
-    onEntered: PropTypes.func,
-    /**
-     * Callback fired right before the `<DrawerLayout.Tray />` transitions out
-     */
-    onExit: PropTypes.func,
-    /**
-     * Callback fired as the `<DrawerLayout.Tray />` begins to transition out
-     */
-    onExiting: PropTypes.func,
-    /**
-     * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning out
-     */
-    onExited: PropTypes.func,
-    /**
-     * Ref function for the `<DrawerLayout.Tray />` content
-     */
-    contentRef: PropTypes.func,
-    /**
-     * An element or a function returning an element to use as the mount node
-     * for the `<DrawerLayout.Tray />` when tray is overlaying content
-     */
-    mountNode: PropTypes.oneOfType([element, PropTypes.func]),
-    /**
-     * An element or a function returning an element to focus by default
-     */
-    defaultFocusElement: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.func
-    ]),
-    /**
-     * An element, function returning an element, or array of elements that will not be hidden from
-     * the screen reader when the `<DrawerLayout.Tray />` is open
-     */
-    liveRegion: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.element),
-      PropTypes.element,
-      PropTypes.func
-    ]),
-    onDismiss: PropTypes.func,
-    shouldContainFocus: PropTypes.bool,
-    shouldReturnFocus: PropTypes.bool,
-    shouldCloseOnDocumentClick: PropTypes.bool,
-    shouldCloseOnEscape: PropTypes.bool,
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    // eslint-disable-next-line react/require-default-props
-    dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
-  }
+
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
-    render: undefined,
     shouldContainFocus: true,
     shouldCloseOnEscape: true,
     shouldCloseOnDocumentClick: true,
@@ -174,21 +85,20 @@ class DrawerTray extends Component<
     onExiting: () => {},
     onExited: () => {},
     // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    contentRef: (node: any) => {},
-    onClose: undefined,
-    onDismiss: undefined,
-    defaultFocusElement: undefined,
-    liveRegion: undefined,
-    onTransition: undefined
+    contentRef: (node: any) => {}
   }
+
   state: DrawerLayoutTrayState = {
     transitioning: false,
     portalOpen: false
   }
+
   _DOMNode?: PortalNode = null
+
   componentDidMount() {
     ;(this.props as any).makeStyles(this.makeStyleProps())
   }
+
   // @ts-expect-error ts-migrate(6133) FIXME: 'prevState' is declared but its value is never rea... Remove this comment to see the full error message
   componentDidUpdate(prevProps: any, prevState: any, snapshot: any) {
     if ((this.props as any).open !== prevProps.open) {
@@ -198,11 +108,13 @@ class DrawerTray extends Component<
     }
     ;(this.props as any).makeStyles(this.makeStyleProps())
   }
+
   makeStyleProps = (): DrawerLayoutTrayStyleProps => {
     return {
       placement: this.placement
     }
   }
+
   get placement() {
     const { placement, dir } = this.props
     const isRtl = dir === bidirectional.DIRECTION.rtl
@@ -210,12 +122,15 @@ class DrawerTray extends Component<
       ? mirrorHorizontalPlacement(placement!, ' ')
       : placement!) as DrawerTrayPlacement
   }
+
   get direction() {
     return this.placement === 'end' ? 'right' : 'left'
   }
+
   get transition() {
     return `slide-${this.direction}`
   }
+
   handleContentRef = (node: any) => {
     // @ts-expect-error ts-migrate(2551) FIXME: Property '_content' does not exist on type 'Drawer... Remove this comment to see the full error message
     this._content = node
@@ -223,36 +138,44 @@ class DrawerTray extends Component<
       ;(this.props as any).contentRef(node)
     }
   }
+
   handleTransitionEntered = () => {
     this.setState({ transitioning: false })
   }
+
   handleTransitionExited = () => {
     this.setState({
       transitioning: false
     })
   }
+
   handlePortalOpen = (DOMNode?: PortalNode) => {
     this.DOMNode = DOMNode
     this.setState({
       portalOpen: true
     })
   }
+
   get DOMNode() {
     return this._DOMNode
   }
+
   set DOMNode(el: PortalNode) {
     this._DOMNode = el
   }
+
   renderContent() {
     const { children, render } = this.props
     if (typeof render === 'function') {
       return render()
     } else if (typeof children === 'function') {
+      // @ts-expect-error TODO: fix
       return children()
     } else {
       return children
     }
   }
+
   render() {
     const {
       label,
@@ -283,9 +206,10 @@ class DrawerTray extends Component<
       styles,
       ...props
     } = this.props
+
     return (
       <DrawerLayoutContext.Consumer>
-        {(shouldOverlayTray: any) => {
+        {(shouldOverlayTray: boolean) => {
           const { portalOpen } = this.state
           const needsPortal = shouldOverlayTray && mountNode
           // we have to handle the shadow version here,
@@ -293,8 +217,8 @@ class DrawerTray extends Component<
           // rerender the component during the transition, breaking it
           const trayStyles =
             shadow && shouldOverlayTray
-              ? (styles as any).drawerTrayWithShadow
-              : (styles as any).drawerTray
+              ? styles?.drawerTrayWithShadow
+              : styles?.drawerTray
           let transitionIn = open
           if (needsPortal && !portalOpen) {
             transitionIn = false
@@ -345,7 +269,7 @@ class DrawerTray extends Component<
                     liveRegion={liveRegion}
                     onDismiss={onDismiss}
                     as="div"
-                    css={(this.props as any).styles.drawerTrayContent}
+                    css={this.props.styles?.drawerTrayContent}
                   >
                     {this.renderContent()}
                   </Dialog>
@@ -367,5 +291,6 @@ class DrawerTray extends Component<
     )
   }
 }
+
 export default DrawerTray
 export { DrawerTray }