@instructure/ui-byline 8.11.2-snapshot.17 → 8.11.2-snapshot.19

package/es/Byline/index.js

@@ -37,6 +37,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Byline = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Byline extends Component {
   constructor(...args) {
@@ -54,11 +55,15 @@ let Byline = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
   }
 
   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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    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() {

package/es/Byline/props.js

@@ -24,37 +24,12 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * the Byline visual/object
-   */
   children: PropTypes.node.isRequired,
-
-  /**
-   * the Byline title
-   */
   title: PropTypes.node,
-
-  /**
-   * the Byline description
-   */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /**
-   * how should the title and description align
-   */
   alignContent: PropTypes.oneOf(['top', 'center']),
-
-  /**
-   * 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,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['alignContent', 'children', 'description', 'elementRef', 'margin', 'size', 'title'];

package/es/Byline/styles.js

@@ -29,7 +29,6 @@
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @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) => {

package/lib/Byline/index.js

@@ -27,6 +27,7 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Byline = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Byline extends _react.Component {
   constructor(...args) {
@@ -44,11 +45,15 @@ let Byline = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    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() {

package/lib/Byline/props.js

@@ -35,37 +35,12 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * the Byline visual/object
-   */
   children: _propTypes.default.node.isRequired,
-
-  /**
-   * the Byline title
-   */
   title: _propTypes.default.node,
-
-  /**
-   * the Byline description
-   */
   description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-
-  /**
-   * how should the title and description align
-   */
   alignContent: _propTypes.default.oneOf(['top', 'center']),
-
-  /**
-   * 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,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/Byline/styles.js

@@ -36,7 +36,6 @@ exports.default = void 0;
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-byline",
-  "version": "8.11.2-snapshot.17+82b8314a5",
+  "version": "8.11.2-snapshot.19+2e2cc205c",
   "description": "A Byline component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,18 +25,18 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/shared-types": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-testable": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-view": "8.11.2-snapshot.17+82b8314a5",
+    "@instructure/emotion": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/shared-types": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-react-utils": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-testable": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-view": "8.11.2-snapshot.19+2e2cc205c",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-color-utils": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.17+82b8314a5",
-    "@instructure/ui-themes": "8.11.2-snapshot.17+82b8314a5"
+    "@instructure/ui-babel-preset": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-color-utils": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-test-utils": "8.11.2-snapshot.19+2e2cc205c",
+    "@instructure/ui-themes": "8.11.2-snapshot.19+2e2cc205c"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "82b8314a5ce13ef30c3f03125b1e2104ba81c889"
+  "gitHead": "2e2cc205c1969e2992e480602ab9b407c43fc39c"
 }

package/src/Byline/index.tsx

@@ -40,6 +40,7 @@ import type { BylineProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 
 @withStyle(generateStyle, generateComponentTheme)
@@ -65,14 +66,11 @@ class Byline extends Component<BylineProps> {
   }
 
   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?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @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()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {
@@ -88,7 +86,6 @@ class Byline extends Component<BylineProps> {
         css={this.props.styles?.byline}
         as="figure"
         margin={this.props.margin}
-        // @ts-expect-error TODO: fix
         maxWidth={this.props.styles?.maxWidth}
       >
         <div css={this.props.styles?.figure}>{this.props.children}</div>

package/src/Byline/props.ts

@@ -39,12 +39,35 @@ import type {
 } from '@instructure/shared-types'
 
 type BylineOwnProps = {
+  /**
+   * the Byline visual/object
+   */
   children: React.ReactNode
+  /**
+   * the Byline title
+   */
   title?: React.ReactNode
+  /**
+   * the Byline description
+   */
   description?: string | React.ReactNode
+  /**
+   * how should the title and description align
+   */
   alignContent?: 'top' | 'center'
+  /**
+   * 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
+  /*
+   * Determines the `max-width` of this element.
+   */
   size?: 'small' | 'medium' | 'large'
+  /**
+   * Provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -58,35 +81,17 @@ type BylineProps = BylineOwnProps &
 
 type BylineStyle = ComponentStyle<
   'byline' | 'figure' | 'caption' | 'title' | 'description' | 'maxWidth'
->
+> & {
+  maxWidth?: string
+}
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * the Byline visual/object
-   */
   children: PropTypes.node.isRequired,
-  /**
-   * the Byline title
-   */
   title: PropTypes.node,
-  /**
-   * the Byline description
-   */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * how should the title and description align
-   */
   alignContent: PropTypes.oneOf(['top', 'center']),
-  /**
-   * 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,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 

package/src/Byline/styles.ts

@@ -32,7 +32,6 @@ import type { BylineProps, BylineStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @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 = (

package/types/Byline/index.d.ts

@@ -6,6 +6,7 @@ import type { BylineProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 declare class Byline extends Component<BylineProps> {
     static readonly componentId = "Byline";
@@ -33,7 +34,7 @@ declare class Byline extends Component<BylineProps> {
     ref: Element | null;
     handleRef: (el: Element | null) => void;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     render(): jsx.JSX.Element;
 }
 export default Byline;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Byline/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AAEH,cACM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CA8BP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Byline/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;;GAKG;AAEH,cACM,MAAO,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzC,MAAM,CAAC,QAAQ,CAAC,WAAW,YAAW;IAEtC,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CA6BP;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/types/Byline/props.d.ts

@@ -2,18 +2,40 @@ import React from 'react';
 import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { PropValidators, BylineTheme, OtherHTMLAttributes } from '@instructure/shared-types';
 declare type BylineOwnProps = {
+    /**
+     * the Byline visual/object
+     */
     children: React.ReactNode;
+    /**
+     * the Byline title
+     */
     title?: React.ReactNode;
+    /**
+     * the Byline description
+     */
     description?: string | React.ReactNode;
+    /**
+     * how should the title and description align
+     */
     alignContent?: 'top' | 'center';
+    /**
+     * 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;
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Provides a reference to the underlying html root element
+     */
     elementRef?: (element: Element | null) => void;
 };
 declare type PropKeys = keyof BylineOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
 declare type BylineProps = BylineOwnProps & WithStyleProps<BylineTheme, BylineStyle> & OtherHTMLAttributes<BylineOwnProps>;
-declare type BylineStyle = ComponentStyle<'byline' | 'figure' | 'caption' | 'title' | 'description' | 'maxWidth'>;
+declare type BylineStyle = ComponentStyle<'byline' | 'figure' | 'caption' | 'title' | 'description' | 'maxWidth'> & {
+    maxWidth?: string;
+};
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
 export type { BylineProps, BylineStyle };

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

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Byline/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAElC,aAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IACtC,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAC/B,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,GACxC,mBAAmB,CAAC,cAAc,CAAC,CAAA;AAErC,aAAK,WAAW,GAAG,cAAc,CAC/B,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CACvE,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA4BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Byline/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAElC,aAAK,cAAc,GAAG;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IACtC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC/B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAIhB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAC/B,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,GACxC,mBAAmB,CAAC,cAAc,CAAC,CAAA;AAErC,aAAK,WAAW,GAAG,cAAc,CAC/B,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CACvE,GAAG;IACF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAQvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Byline/styles.d.ts

@@ -7,7 +7,6 @@ import type { BylineProps, BylineStyle } from './props';
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @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: BylineTheme, props: BylineProps) => BylineStyle;

package/types/Byline/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Byline/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEvD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,WAAW,SACpB,WAAW,KACjB,WAgEF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Byline/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEvD;;;;;;;;GAQG;AACH,QAAA,MAAM,aAAa,mBACD,WAAW,SACpB,WAAW,KACjB,WAgEF,CAAA;AAED,eAAe,aAAa,CAAA"}