@instructure/ui-flex 8.13.0 → 8.13.1-snapshot.10

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 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.

package/es/Flex/Item/index.js

@@ -37,6 +37,7 @@ import { propTypes, allowedProps } from './props';
 parent: Flex
 id: Flex.Item
 ---
+@tsProps
 **/
 let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class Item extends Component {
   constructor() {
@@ -54,27 +55,31 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class
   }
 
   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() {
-    this.props.makeStyles();
+    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() {
     const props = omitProps(this.props, Item.allowedProps);
-    const _this$props = this.props,
-          as = _this$props.as,
-          children = _this$props.children,
-          withVisualDebug = _this$props.withVisualDebug,
-          textAlign = _this$props.textAlign,
-          size = _this$props.size,
-          direction = _this$props.direction,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          overflowX = _this$props.overflowX,
-          overflowY = _this$props.overflowY,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          children = _this$props3.children,
+          withVisualDebug = _this$props3.withVisualDebug,
+          textAlign = _this$props3.textAlign,
+          size = _this$props3.size,
+          direction = _this$props3.direction,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          overflowX = _this$props3.overflowX,
+          overflowY = _this$props3.overflowY,
+          styles = _this$props3.styles;
     const dirColumn = direction === 'column';
     const dirRow = direction === 'row';
     return jsx(View, Object.assign({}, props, {
@@ -94,7 +99,6 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class
 
 }, _class2.displayName = "Item", _class2.componentId = 'Flex.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   as: 'span',
-  elementRef: el => {},
   shouldGrow: false,
   shouldShrink: false
 }, _temp)) || _class);

package/es/Flex/Item/props.js

@@ -24,78 +24,19 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * The children to render inside the Item`
-   */
   children: PropTypes.node,
-
-  /**
-   * the element type to render as
-   */
   as: PropTypes.elementType,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: ThemeablePropTypes.spacing,
-
-  /**
-   * overrides the parent Flex's alignItems prop, if needed
-   */
   align: PropTypes.oneOf(['center', 'start', 'end', 'stretch']),
-
-  /**
-   * Inherits from the parent Flex component
-   */
   direction: PropTypes.oneOf(['row', 'column']),
-
-  /**
-   * Designates the text alignment inside the Item
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-  /**
-   * Handles horizontal overflow
-   */
   overflowX: PropTypes.oneOf(['auto', 'hidden', 'visible']),
-
-  /**
-   * Handles vertical overflow
-   */
   overflowY: PropTypes.oneOf(['auto', 'hidden', 'visible']),
-
-  /**
-   * Should the FlexItem grow to fill any available space?
-   */
   shouldGrow: PropTypes.bool,
-
-  /**
-   * Should the FlexItem shrink (stopping at its `size`)?
-   */
   shouldShrink: PropTypes.bool,
-
-  /**
-   * Sets the base size of the FlexItem (width if direction is `row`; height if direction is `column`)
-   */
   size: PropTypes.string,
-
-  /**
-   * Places dashed lines around the component's borders to help debug your layout
-   */
   withVisualDebug: PropTypes.bool
 };
 const allowedProps = ['children', 'as', 'elementRef', 'margin', 'padding', 'align', 'direction', 'textAlign', 'overflowX', 'overflowY', 'shouldGrow', 'shouldShrink', 'size', 'withVisualDebug'];

package/es/Flex/Item/styles.js

@@ -32,7 +32,7 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (_componentTheme, props) => {
   const shouldGrow = props.shouldGrow,
         shouldShrink = props.shouldShrink,
         align = props.align,

package/es/Flex/index.js

@@ -25,7 +25,7 @@ var _dec, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react';
+import React, { Children, Component } from 'react';
 import { safeCloneElement, passthroughProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -39,10 +39,11 @@ import { propTypes, allowedProps } from './props';
 category: components
 ---
 @module Flex
+@tsProps
 **/
 let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Flex extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -53,12 +54,18 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
         elementRef(el);
       }
     };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
 
-    props.makeStyles();
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles();
+    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);
   }
 
   renderChildren(children) {
@@ -68,26 +75,25 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       }
 
       return matchComponentTypes(child, ['Item']) ? safeCloneElement(child, {
+        // child withVisualDebug prop should override parent
         withVisualDebug: this.props.withVisualDebug,
-        ...child.props
-        /* child withVisualDebug prop should override parent */
-        ,
+        ...child.props,
         direction: this.props.direction.replace(/-reverse/, '')
       }) : child;
     });
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          withVisualDebug = _this$props.withVisualDebug,
-          height = _this$props.height,
-          display = _this$props.display,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          textAlign = _this$props.textAlign,
-          width = _this$props.width,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          withVisualDebug = _this$props3.withVisualDebug,
+          height = _this$props3.height,
+          display = _this$props3.display,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          textAlign = _this$props3.textAlign,
+          width = _this$props3.width,
+          styles = _this$props3.styles;
     const children = callRenderProp(this.props.children);
 
     if (children && Children.count(children) > 0) {
@@ -109,9 +115,7 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
 }, _class2.displayName = "Flex", _class2.componentId = 'Flex', _class2.Item = Item, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'span',
-  elementRef: el => {},
   direction: 'row',
   justifyItems: 'start',
   display: 'flex',

package/es/Flex/props.js

@@ -24,81 +24,19 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * It's recommended that you use `Flex.Item` for children, but you can also pass any markup or a function
-   * returning markup. Note that if you do not use `Flex.Item`, the `withVisualDebug` and `direction` props
-   * will not automatically be set on the children.
-   */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * the element type to render as
-   */
   as: PropTypes.elementType,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * Sets the height of the component's container (optional)
-   */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Sets the width of the component's container (optional)
-   */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: ThemeablePropTypes.spacing,
-
-  /**
-   * Sets the CSS display rule for the component's container
-   */
   display: PropTypes.oneOf(['flex', 'inline-flex']),
-
-  /**
-   * Designates the text alignment
-   */
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-  /**
-   * Sets the flex-direction to row (horizontal) or column (vertical)
-   */
   direction: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
-
-  /**
-   * Aligns Flex.Items on the vertical axis (horizontal if direction is column)
-   */
   alignItems: PropTypes.oneOf(['center', 'start', 'end', 'stretch']),
-
-  /**
-   * Aligns Flex.Items on the horizontal axis (vertical if direction is column)
-   */
   justifyItems: PropTypes.oneOf(['center', 'start', 'end', 'space-around', 'space-between']),
-
-  /**
-   * Determines if the Flex.Items should wrap when they exceed their container's width
-   */
   wrap: PropTypes.oneOf(['wrap', 'no-wrap', 'wrap-reverse']),
-
-  /**
-   * Activate a dotted outline around the component to make building your
-   * layout easier
-   */
   withVisualDebug: PropTypes.bool
 };
 const allowedProps = ['children', 'as', 'elementRef', 'height', 'width', 'margin', 'padding', 'display', 'textAlign', 'direction', 'alignItems', 'justifyItems', 'wrap', 'withVisualDebug'];

package/lib/Flex/Item/index.js

@@ -26,6 +26,7 @@ var _dec, _class, _class2, _temp;
 parent: Flex
 id: Flex.Item
 ---
+@tsProps
 **/
 let Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class Item extends _react.Component {
   constructor() {
@@ -43,27 +44,31 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class =
   }
 
   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() {
-    this.props.makeStyles();
+    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() {
     const props = (0, _omitProps.omitProps)(this.props, Item.allowedProps);
-    const _this$props = this.props,
-          as = _this$props.as,
-          children = _this$props.children,
-          withVisualDebug = _this$props.withVisualDebug,
-          textAlign = _this$props.textAlign,
-          size = _this$props.size,
-          direction = _this$props.direction,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          overflowX = _this$props.overflowX,
-          overflowY = _this$props.overflowY,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          children = _this$props3.children,
+          withVisualDebug = _this$props3.withVisualDebug,
+          textAlign = _this$props3.textAlign,
+          size = _this$props3.size,
+          direction = _this$props3.direction,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          overflowX = _this$props3.overflowX,
+          overflowY = _this$props3.overflowY,
+          styles = _this$props3.styles;
     const dirColumn = direction === 'column';
     const dirRow = direction === 'row';
     return (0, _emotion.jsx)(_View.View, Object.assign({}, props, {
@@ -83,7 +88,6 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class =
 
 }, _class2.displayName = "Item", _class2.componentId = 'Flex.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   as: 'span',
-  elementRef: el => {},
   shouldGrow: false,
   shouldShrink: false
 }, _temp)) || _class);

package/lib/Flex/Item/props.js

@@ -35,78 +35,19 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The children to render inside the Item`
-   */
   children: _propTypes.default.node,
-
-  /**
-   * the element type to render as
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-   */
   padding: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * overrides the parent Flex's alignItems prop, if needed
-   */
   align: _propTypes.default.oneOf(['center', 'start', 'end', 'stretch']),
-
-  /**
-   * Inherits from the parent Flex component
-   */
   direction: _propTypes.default.oneOf(['row', 'column']),
-
-  /**
-   * Designates the text alignment inside the Item
-   */
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
-
-  /**
-   * Handles horizontal overflow
-   */
   overflowX: _propTypes.default.oneOf(['auto', 'hidden', 'visible']),
-
-  /**
-   * Handles vertical overflow
-   */
   overflowY: _propTypes.default.oneOf(['auto', 'hidden', 'visible']),
-
-  /**
-   * Should the FlexItem grow to fill any available space?
-   */
   shouldGrow: _propTypes.default.bool,
-
-  /**
-   * Should the FlexItem shrink (stopping at its `size`)?
-   */
   shouldShrink: _propTypes.default.bool,
-
-  /**
-   * Sets the base size of the FlexItem (width if direction is `row`; height if direction is `column`)
-   */
   size: _propTypes.default.string,
-
-  /**
-   * Places dashed lines around the component's borders to help debug your layout
-   */
   withVisualDebug: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/lib/Flex/Item/styles.js

@@ -39,7 +39,7 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (_componentTheme, props) => {
   const shouldGrow = props.shouldGrow,
         shouldShrink = props.shouldShrink,
         align = props.align,

package/lib/Flex/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -14,7 +16,7 @@ Object.defineProperty(exports, "FlexItem", {
 });
 exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 
@@ -43,10 +45,11 @@ var _dec, _class, _class2, _temp;
 category: components
 ---
 @module Flex
+@tsProps
 **/
 let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Flex extends _react.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -57,12 +60,18 @@ let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         elementRef(el);
       }
     };
+  }
 
-    props.makeStyles();
+  componentDidMount() {
+    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() {
-    this.props.makeStyles();
+    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);
   }
 
   renderChildren(children) {
@@ -72,26 +81,25 @@ let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }
 
       return (0, _matchComponentTypes.matchComponentTypes)(child, ['Item']) ? (0, _safeCloneElement.safeCloneElement)(child, {
+        // child withVisualDebug prop should override parent
         withVisualDebug: this.props.withVisualDebug,
-        ...child.props
-        /* child withVisualDebug prop should override parent */
-        ,
+        ...child.props,
         direction: this.props.direction.replace(/-reverse/, '')
       }) : child;
     });
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          withVisualDebug = _this$props.withVisualDebug,
-          height = _this$props.height,
-          display = _this$props.display,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          textAlign = _this$props.textAlign,
-          width = _this$props.width,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          as = _this$props3.as,
+          withVisualDebug = _this$props3.withVisualDebug,
+          height = _this$props3.height,
+          display = _this$props3.display,
+          margin = _this$props3.margin,
+          padding = _this$props3.padding,
+          textAlign = _this$props3.textAlign,
+          width = _this$props3.width,
+          styles = _this$props3.styles;
     const children = (0, _callRenderProp.callRenderProp)(this.props.children);
 
     if (children && _react.Children.count(children) > 0) {
@@ -113,9 +121,7 @@ let Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
 }, _class2.displayName = "Flex", _class2.componentId = 'Flex', _class2.Item = _Item.Item, _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
   as: 'span',
-  elementRef: el => {},
   direction: 'row',
   justifyItems: 'start',
   display: 'flex',