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

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
+
+**Note:** Version bump only for package @instructure/ui-drawer-layout
+
+# [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-drawer-layout

package/es/DrawerLayout/DrawerContent/index.js

@@ -26,7 +26,6 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { debounce } from '@instructure/debounce';
 import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -34,6 +33,7 @@ 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';
 
 /**
 ---
@@ -115,6 +115,8 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }
 
   render() {
+    var _this$props$styles;
+
     const _this$props = this.props,
           style = _this$props.style,
           label = _this$props.label,
@@ -124,25 +126,11 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       style: style,
       ref: this.handleContentRef,
       "aria-label": label,
-      css: this.props.styles.drawerContent
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerContent
     }), this.props.children);
   }
 
-}, _class2.displayName = "DrawerContent", _class2.componentId = 'DrawerLayout.Content', _class2.locatorAttribute = 'data-drawer-content', _class2.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
-}, _class2.defaultProps = {
+}, _class2.displayName = "DrawerContent", _class2.componentId = 'DrawerLayout.Content', _class2.locatorAttribute = 'data-drawer-content', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
   contentRef: el => {},
   onSizeChange: node => {},

package/{src/DrawerLayout/DrawerContent/types.ts → es/DrawerLayout/DrawerContent/props.js}

@@ -21,16 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import PropTypes from 'prop-types';
+const propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  contentRef: PropTypes.func,
 
-export type DrawerLayoutContentProps = {
-  label: string
-  contentRef?: (...args: any[]) => any
-  onSizeChange?: (...args: any[]) => any
-  role?: string
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-}
-
-export type DrawerLayoutContentState = {
-  shouldTransition: boolean
-}
+  /**
+   * Callback fired whenever the `<DrawerLayout.Content />` changes size
+   */
+  onSizeChange: PropTypes.func,
+  role: PropTypes.string
+};
+const allowedProps = ['label', 'children', 'contentRef', 'onSizeChange', 'role'];
+export { propTypes, allowedProps };

package/es/DrawerLayout/DrawerTray/index.js

@@ -29,12 +29,10 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /** @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';
@@ -43,6 +41,7 @@ import { mirrorHorizontalPlacement } from '@instructure/ui-position';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { DrawerLayoutContext } from '../index';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -179,12 +178,14 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
           props = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
+      var _this$props$styles;
+
       const portalOpen = this.state.portalOpen;
       const needsPortal = shouldOverlayTray && mountNode; // we have to handle the shadow version here,
       // because passing and handling it in styles.js makes it
       // rerender the component during the transition, breaking it
 
-      const trayStyles = shadow && shouldOverlayTray ? styles.drawerTrayWithShadow : styles.drawerTray;
+      const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
       let transitionIn = open;
 
       if (needsPortal && !portalOpen) {
@@ -217,7 +218,7 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
         liveRegion: liveRegion,
         onDismiss: onDismiss,
         as: "div",
-        css: this.props.styles.drawerTrayContent
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent
       }, this.renderContent())));
 
       if (needsPortal) {
@@ -232,111 +233,8 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     });
   }
 
-}, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.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))
-}, _class2.defaultProps = {
+}, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
-  render: void 0,
   shouldContainFocus: true,
   shouldCloseOnEscape: true,
   shouldCloseOnDocumentClick: true,
@@ -353,12 +251,7 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   onExit: () => {},
   onExiting: () => {},
   onExited: () => {},
-  contentRef: node => {},
-  onClose: void 0,
-  onDismiss: void 0,
-  defaultFocusElement: void 0,
-  liveRegion: void 0,
-  onTransition: void 0
+  contentRef: node => {}
 }, _temp)) || _class) || _class) || _class);
 export default DrawerTray;
 export { DrawerTray };

package/es/DrawerLayout/DrawerTray/props.js

@@ -0,0 +1,126 @@
+/*
+ * 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 } from '@instructure/ui-prop-types';
+import { bidirectional } from '@instructure/ui-i18n';
+const 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,
+  dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
+};
+const allowedProps = ['label', 'children', 'render', 'placement', 'open', 'onOpen', 'onClose', 'border', 'shadow', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'contentRef', 'mountNode', 'defaultFocusElement', 'liveRegion', 'onDismiss', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'dir'];
+export { propTypes, allowedProps };

package/es/DrawerLayout/index.js

@@ -26,9 +26,7 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Children, Component, createContext } from 'react';
-import PropTypes from 'prop-types';
 import { bidirectional } from '@instructure/ui-i18n';
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { matchComponentTypes, safeCloneElement } from '@instructure/ui-react-utils';
 import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { createChainedFunction, px } from '@instructure/ui-utils';
@@ -40,6 +38,7 @@ import { DrawerContent } from './DrawerContent';
 import { DrawerTray } from './DrawerTray';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -227,40 +226,19 @@ let DrawerLayout = (_dec = withStyle(generateStyle, null), _dec2 = bidirectional
   }
 
   render() {
+    var _this$props$styles;
+
     const props = {
       [DrawerLayout.locatorAttribute]: this._id
     };
     return jsx(DrawerLayoutContext.Provider, {
       value: this.state.shouldOverlayTray
     }, 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: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
-
-  /**
-   * Min width for the `<DrawerLayout.Content />`
-   */
-  minWidth: PropTypes.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.func,
-  // 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))
-}, _class2.defaultProps = {
+}, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
   minWidth: '30rem',
   onOverlayTrayChange: shouldOverlayTray => {}