@instructure/ui-flex 8.12.1-snapshot.52 → 8.13.1-snapshot.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-flex",
-  "version": "8.12.1-snapshot.52+07b0037b0",
+  "version": "8.13.1-snapshot.10+0ceb70745",
   "description": "A component that makes it easy to align content using flexbox CSS",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,17 +25,17 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/emotion": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/shared-types": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/ui-react-utils": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/ui-view": "8.12.1-snapshot.52+07b0037b0",
+    "@instructure/console": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/emotion": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/shared-types": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-view": "8.13.1-snapshot.10+0ceb70745",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/ui-test-utils": "8.12.1-snapshot.52+07b0037b0",
-    "@instructure/ui-themes": "8.12.1-snapshot.52+07b0037b0"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.10+0ceb70745",
+    "@instructure/ui-themes": "8.13.1-snapshot.10+0ceb70745"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "07b0037b0ddaf6d4f19cca140fc82fc9a2f1efc9"
+  "gitHead": "0ceb7074574b9c3a7249eecab3d1ac0e7175a5dd"
 }

package/src/Flex/Item/index.tsx

@@ -39,27 +39,24 @@ import type { FlexItemProps } from './props'
 parent: Flex
 id: Flex.Item
 ---
+@tsProps
 **/
 @withStyle(generateStyle, null)
 class Item extends Component<FlexItemProps> {
   static readonly componentId = 'Flex.Item'
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     as: 'span',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el: any) => {},
     shouldGrow: false,
     shouldShrink: false
   }

package/src/Flex/Item/props.ts

@@ -39,92 +39,105 @@ import type {
 } from '@instructure/emotion'
 
 type FlexItemOwnProps = {
-  children?: React.ReactNode
-  as?: AsElementType
-  elementRef?: (element: Element | null) => void
-  margin?: Spacing
-  padding?: Spacing
-  align?: 'center' | 'start' | 'end' | 'stretch'
-  direction?: 'row' | 'column'
-  textAlign?: 'start' | 'center' | 'end'
-  overflowX?: 'auto' | 'hidden' | 'visible'
-  overflowY?: 'auto' | 'hidden' | 'visible'
-  shouldGrow?: boolean
-  shouldShrink?: boolean
-  size?: string
-  withVisualDebug?: boolean
-}
-
-type PropKeys = keyof FlexItemOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type FlexItemProps = FlexItemOwnProps &
-  WithStyleProps<null, FlexItemStyle> &
-  OtherHTMLAttributes<FlexItemOwnProps>
-
-type FlexItemStyle = ComponentStyle<'flexItem'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
-   * The children to render inside the Item`
+   * The children to render inside the Item
    */
-  children: PropTypes.node,
+  children?: React.ReactNode
+
   /**
    * the element type to render as
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * provides a reference to the underlying html root element
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * 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,
+  margin?: 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,
+  padding?: Spacing
+
   /**
    * overrides the parent Flex's alignItems prop, if needed
    */
-  align: PropTypes.oneOf(['center', 'start', 'end', 'stretch']),
+  align?: 'center' | 'start' | 'end' | 'stretch'
+
   /**
    * Inherits from the parent Flex component
    */
-  direction: PropTypes.oneOf(['row', 'column']),
+  direction?: 'row' | 'column'
+
   /**
    * Designates the text alignment inside the Item
    */
-  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  textAlign?: 'start' | 'center' | 'end'
+
   /**
    * Handles horizontal overflow
    */
-  overflowX: PropTypes.oneOf(['auto', 'hidden', 'visible']),
+  overflowX?: 'auto' | 'hidden' | 'visible'
+
   /**
    * Handles vertical overflow
    */
-  overflowY: PropTypes.oneOf(['auto', 'hidden', 'visible']),
+  overflowY?: 'auto' | 'hidden' | 'visible'
+
   /**
    * Should the FlexItem grow to fill any available space?
    */
-  shouldGrow: PropTypes.bool,
+  shouldGrow?: boolean
+
   /**
    * Should the FlexItem shrink (stopping at its `size`)?
    */
-  shouldShrink: PropTypes.bool,
+  shouldShrink?: boolean
+
   /**
    * Sets the base size of the FlexItem (width if direction is `row`; height if direction is `column`)
    */
-  size: PropTypes.string,
+  size?: string
+
   /**
    * Places dashed lines around the component's borders to help debug your layout
    */
+  withVisualDebug?: boolean
+}
+
+type PropKeys = keyof FlexItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FlexItemProps = FlexItemOwnProps &
+  WithStyleProps<null, FlexItemStyle> &
+  OtherHTMLAttributes<FlexItemOwnProps>
+
+type FlexItemStyle = ComponentStyle<'flexItem'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func,
+  margin: ThemeablePropTypes.spacing,
+  padding: ThemeablePropTypes.spacing,
+  align: PropTypes.oneOf(['center', 'start', 'end', 'stretch']),
+  direction: PropTypes.oneOf(['row', 'column']),
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  overflowX: PropTypes.oneOf(['auto', 'hidden', 'visible']),
+  overflowY: PropTypes.oneOf(['auto', 'hidden', 'visible']),
+  shouldGrow: PropTypes.bool,
+  shouldShrink: PropTypes.bool,
+  size: PropTypes.string,
   withVisualDebug: PropTypes.bool
 }
 

package/src/Flex/Item/styles.ts

@@ -35,8 +35,7 @@ import type { FlexItemProps, FlexItemStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  // @ts-expect-error no theme is used here
-  componentTheme,
+  _componentTheme: null,
   props: FlexItemProps
 ): FlexItemStyle => {
   const { shouldGrow, shouldShrink, align, size } = props

package/src/Flex/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react'
+import React, { Children, Component } from 'react'
 
 import {
   safeCloneElement,
@@ -35,6 +35,7 @@ import { View } from '@instructure/ui-view'
 import { withStyle, jsx } from '@instructure/emotion'
 
 import { Item } from './Item'
+import type { FlexItemProps } from './Item/props'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -47,20 +48,18 @@ import type { FlexProps } from './props'
 category: components
 ---
 @module Flex
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Flex extends Component<FlexProps> {
   static readonly componentId = 'Flex'
 
-  constructor(props: FlexProps) {
-    super(props)
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    props.makeStyles()
+  componentDidMount() {
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   static Item = Item
@@ -68,10 +67,7 @@ class Flex extends Component<FlexProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     as: 'span',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el: any) => {},
     direction: 'row',
     justifyItems: 'start',
     display: 'flex',
@@ -91,18 +87,21 @@ class Flex extends Component<FlexProps> {
     }
   }
 
-  renderChildren(children: any) {
+  renderChildren(children: FlexProps['children']) {
     return Children.map(children, (child) => {
       if (!child) {
         return null
       }
 
       return matchComponentTypes(child, ['Item'])
-        ? safeCloneElement(child, {
+        ? safeCloneElement(child as React.ReactElement<FlexItemProps>, {
+            // child withVisualDebug prop should override parent
             withVisualDebug: this.props.withVisualDebug,
-            ...child.props /* child withVisualDebug prop should override parent */,
-            //@ts-expect-error FIXME:
-            direction: this.props.direction.replace(/-reverse/, '')
+            ...(child as React.ReactElement<FlexItemProps>).props,
+            direction: this.props.direction!.replace(
+              /-reverse/,
+              ''
+            ) as FlexItemProps['direction']
           })
         : child
     })

package/src/Flex/props.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { ThemeablePropTypes } from '@instructure/emotion'
@@ -39,19 +40,83 @@ import type {
 } from '@instructure/emotion'
 
 type FlexOwnProps = {
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  /**
+   * 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?: React.ReactNode | (() => React.ReactNode)
+
+  /**
+   * the element type to render as
+   */
   as?: AsElementType
+
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
+
+  /**
+   * Sets the height of the component's container (optional)
+   */
   height?: string | number
+
+  /**
+   * Sets the width of the component's container (optional)
+   */
   width?: string | 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?: 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?: Spacing
+
+  /**
+   * Sets the CSS display rule for the component's container
+   */
   display?: 'flex' | 'inline-flex'
+
+  /**
+   * Designates the text alignment
+   */
   textAlign?: 'start' | 'center' | 'end'
+
+  /**
+   * Sets the flex-direction to row (horizontal) or column (vertical)
+   */
   direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+
+  /**
+   * Aligns Flex.Items on the vertical axis (horizontal if direction is column)
+   */
   alignItems?: 'center' | 'start' | 'end' | 'stretch'
+
+  /**
+   * Aligns Flex.Items on the horizontal axis (vertical if direction is column)
+   */
   justifyItems?: 'center' | 'start' | 'end' | 'space-around' | 'space-between'
+
+  /**
+   * Determines if the Flex.Items should wrap when they exceed their container's width
+   */
   wrap?: 'wrap' | 'no-wrap' | 'wrap-reverse'
+
+  /**
+   * Activate a dotted outline around the component to make building your
+   * layout easier
+   */
   withVisualDebug?: boolean
 }
 
@@ -66,64 +131,22 @@ type FlexProps = FlexOwnProps &
 type FlexStyle = ComponentStyle<'flex'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * 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',
@@ -131,14 +154,7 @@ const propTypes: PropValidators<PropKeys> = {
     '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
 }
 

package/types/Flex/Item/index.d.ts

@@ -7,6 +7,7 @@ import type { FlexItemProps } from './props';
 parent: Flex
 id: Flex.Item
 ---
+@tsProps
 **/
 declare class Item extends Component<FlexItemProps> {
     static readonly componentId = "Flex.Item";
@@ -46,7 +47,6 @@ declare class Item extends Component<FlexItemProps> {
     })[];
     static defaultProps: {
         as: string;
-        elementRef: (el: any) => void;
         shouldGrow: boolean;
         shouldShrink: boolean;
     };

package/types/Flex/Item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,iBAAiB;IAKjB,kBAAkB;IAKlB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;yBAGA,GAAG;;;MAGrB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,MAAM;CAuCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;;GAMG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;MAIlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,MAAM;CAuCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/types/Flex/Item/props.d.ts

@@ -2,19 +2,65 @@ import React from 'react';
 import type { AsElementType, OtherHTMLAttributes, PropValidators } from '@instructure/shared-types';
 import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type FlexItemOwnProps = {
+    /**
+     * The children to render inside the Item
+     */
     children?: React.ReactNode;
+    /**
+     * the element type to render as
+     */
     as?: AsElementType;
+    /**
+     * provides a reference to the underlying html root element
+     */
     elementRef?: (element: Element | null) => void;
+    /**
+     * 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?: 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?: Spacing;
+    /**
+     * overrides the parent Flex's alignItems prop, if needed
+     */
     align?: 'center' | 'start' | 'end' | 'stretch';
+    /**
+     * Inherits from the parent Flex component
+     */
     direction?: 'row' | 'column';
+    /**
+     * Designates the text alignment inside the Item
+     */
     textAlign?: 'start' | 'center' | 'end';
+    /**
+     * Handles horizontal overflow
+     */
     overflowX?: 'auto' | 'hidden' | 'visible';
+    /**
+     * Handles vertical overflow
+     */
     overflowY?: 'auto' | 'hidden' | 'visible';
+    /**
+     * Should the FlexItem grow to fill any available space?
+     */
     shouldGrow?: boolean;
+    /**
+     * Should the FlexItem shrink (stopping at its `size`)?
+     */
     shouldShrink?: boolean;
+    /**
+     * Sets the base size of the FlexItem (width if direction is `row`; height if direction is `column`)
+     */
     size?: string;
+    /**
+     * Places dashed lines around the component's borders to help debug your layout
+     */
     withVisualDebug?: boolean;
 };
 declare type PropKeys = keyof FlexItemOwnProps;

package/types/Flex/Item/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAC9C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GACnC,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,GACnC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEvC,aAAK,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE/C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA6DvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,cAAc,EACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,gBAAgB,GAAG;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,EAAE,CAAC,EAAE,aAAa,CAAA;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAE9C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;IAEzC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,GACnC,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,GACnC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;AAEvC,aAAK,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE/C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAevC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Flex/Item/styles.d.ts

@@ -9,6 +9,6 @@ import type { FlexItemProps, FlexItemStyle } from './props';
  * @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
  */
-declare const generateStyle: (componentTheme: any, props: FlexItemProps) => FlexItemStyle;
+declare const generateStyle: (_componentTheme: null, props: FlexItemProps) => FlexItemStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Flex/Item/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE3D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,+BAGV,aAAa,KACnB,aAuBF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Flex/Item/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE3D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,oBACA,IAAI,SACd,aAAa,KACnB,aAuBF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Flex/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@instructure/emotion';
 import { Item } from './Item';
 import type { FlexProps } from './props';
@@ -8,22 +8,18 @@ import type { FlexProps } from './props';
 category: components
 ---
 @module Flex
+@tsProps
 **/
 declare class Flex extends Component<FlexProps> {
     static readonly componentId = "Flex";
-    constructor(props: FlexProps);
+    componentDidMount(): void;
     componentDidUpdate(): void;
     static Item: typeof Item;
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
-        children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
+        children?: React.ReactNode | (() => React.ReactNode);
         as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
-        height?: string | number | undefined; /**
-        ---
-        category: components
-        ---
-        @module Flex
-        **/
+        height?: string | number | undefined;
         width?: string | number | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
@@ -36,15 +32,10 @@ declare class Flex extends Component<FlexProps> {
         withVisualDebug?: boolean | undefined;
     }>;
     static allowedProps: readonly (keyof {
-        children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
+        children?: React.ReactNode | (() => React.ReactNode);
         as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
-        height?: string | number | undefined; /**
-        ---
-        category: components
-        ---
-        @module Flex
-        **/
+        height?: string | number | undefined;
         width?: string | number | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
@@ -57,9 +48,7 @@ declare class Flex extends Component<FlexProps> {
         withVisualDebug?: boolean | undefined;
     })[];
     static defaultProps: {
-        children: null;
         as: string;
-        elementRef: (el: any) => void;
         direction: string;
         justifyItems: string;
         display: string;
@@ -68,7 +57,7 @@ declare class Flex extends Component<FlexProps> {
     };
     ref: Element | null;
     handleRef: (el: Element | null) => void;
-    renderChildren(children: any): any;
+    renderChildren(children: FlexProps['children']): {}[] | null | undefined;
     render(): jsx.JSX.Element | null;
 }
 export default Flex;