@instructure/ui-flex 8.12.1-snapshot.7 → 8.13.1-snapshot.9

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;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Flex/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAS3C,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAM7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;gBAExB,KAAK,EAAE,SAAS;IAM5B,kBAAkB;IAKlB,MAAM,CAAC,IAAI,cAAO;IAElB,MAAM,CAAC,SAAS;;;;8CAvBlB;;;;;WAKG;;;;;;;;;;;OAkB2B;IAC5B,MAAM,CAAC,YAAY;;;;8CAxBrB;;;;;WAKG;;;;;;;;;;;SAmBiC;IAClC,MAAM,CAAC,YAAY;;;yBAIA,GAAG;;;;;;MAMrB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,cAAc,CAAC,QAAQ,EAAE,GAAG;IAiB5B,MAAM;CAqCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Flex/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AASlD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAO7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;;GAMG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM,CAAC,IAAI,cAAO;IAElB,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;MAOlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC;IAoB9C,MAAM;CAqCP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,QAAQ,EAAE,CAAA"}

package/types/Flex/props.d.ts

@@ -1,20 +1,71 @@
-/// <reference types="react" />
+import React from 'react';
 import type { AsElementType, PropValidators, FlexTheme, OtherHTMLAttributes } from '@instructure/shared-types';
 import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare 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;
 };
 declare type PropKeys = keyof FlexOwnProps;

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Flex/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAClE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IACnD,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IAC5E,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAC3B,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,GACpC,mBAAmB,CAAC,YAAY,CAAC,CAAA;AAEnC,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA2EvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Flex/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,GAAG;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAA;IAEpD;;OAEG;IACH,EAAE,CAAC,EAAE,aAAa,CAAA;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAE9C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAE/D;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAEnD;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IAE5E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAA;IAE1C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAC3B,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,GACpC,mBAAmB,CAAC,YAAY,CAAC,CAAA;AAEnC,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA0BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}