@instructure/ui-breadcrumb 8.14.1-snapshot.0 → 8.14.1-snapshot.19

package/es/Breadcrumb/BreadcrumbLink/BreadcrumbLinkLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { BreadcrumbLink } from './index';
+import { BreadcrumbLink } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const BreadcrumbLinkLocator = locator(BreadcrumbLink.selector);

package/es/Breadcrumb/BreadcrumbLink/index.js

@@ -35,6 +35,7 @@ import { propTypes, allowedProps } from './props';
 parent: Breadcrumb
 id: Breadcrumb.Link
 ---
+@tsProps
 **/
 let BreadcrumbLink = (_dec = testable(), _dec(_class = (_temp = _class2 = class BreadcrumbLink extends Component {
   constructor() {
@@ -54,9 +55,7 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_temp = _class2 = class
           iconPlacement = _this$props.iconPlacement,
           onClick = _this$props.onClick;
     const props = omitProps(this.props, BreadcrumbLink.allowedProps);
-    return /*#__PURE__*/React.createElement(Link, Object.assign({
-      as: this.element
-    }, props, {
+    return /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
       href: href,
       renderIcon: renderIcon,
       iconPlacement: iconPlacement,

package/es/Breadcrumb/BreadcrumbLink/props.js

@@ -23,34 +23,11 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * Content to render as the crumb, generally should be text.
-   */
   children: PropTypes.node.isRequired,
-
-  /**
-   * Link the crumb should direct to; if an href is provided, the crumb will render as a link
-   */
   href: PropTypes.string,
-
-  /**
-   * If the Breadcrumb.Link has an onClick prop (and no href), it will render as a button
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Sets the font-size of the breadcrumb text
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Add an icon to the Breadcrumb.Link
-   */
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Place the icon before or after the text in the Breadcrumb.Link
-   */
   iconPlacement: PropTypes.oneOf(['start', 'end'])
 };
 const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'renderIcon', 'size'];

package/es/Breadcrumb/BreadcrumbLocator.js

@@ -24,7 +24,8 @@
 import { locator } from '@instructure/ui-test-locator';
 import { Breadcrumb } from './index';
 import { BreadcrumbLinkLocator } from './BreadcrumbLink/BreadcrumbLinkLocator';
-export { BreadcrumbLinkLocator };
+export { BreadcrumbLinkLocator }; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const BreadcrumbLocator = locator(Breadcrumb.selector, {
   findAllLinks: function () {
     return BreadcrumbLinkLocator.findAll(...arguments);

package/es/Breadcrumb/index.js

@@ -27,9 +27,9 @@ var _dec, _dec2, _class, _class2, _temp;
 /** @jsx jsx */
 import React, { Component } from 'react';
 import { View } from '@instructure/ui-view';
-import { IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
+import { IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { BreadcrumbLink } from './BreadcrumbLink';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -39,6 +39,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Breadcrumb extends Component {
   constructor() {
@@ -51,18 +52,22 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
-    const numChildren = children ? children.length : 0;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+    const numChildren = React.Children.count(children);
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     };

package/es/Breadcrumb/props.js

@@ -26,26 +26,9 @@ import { Children } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { BreadcrumbLink } from './BreadcrumbLink';
 const propTypes = {
-  /**
-   * children of type Breadcrumb.Link
-   */
   children: Children.oneOf([BreadcrumbLink]),
-
-  /**
-   * An accessible label for the navigation
-   */
   label: PropTypes.string.isRequired,
-
-  /**
-   * Sets the font-size of the breadcrumb text
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * 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
 };
 const allowedProps = ['children', 'label', 'margin', 'size'];

package/lib/Breadcrumb/BreadcrumbLink/BreadcrumbLinkLocator.js

@@ -32,5 +32,6 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const BreadcrumbLinkLocator = (0, _locator.locator)(_index.BreadcrumbLink.selector);
 exports.BreadcrumbLinkLocator = BreadcrumbLinkLocator;

package/lib/Breadcrumb/BreadcrumbLink/index.js

@@ -26,6 +26,7 @@ var _dec, _class, _class2, _temp;
 parent: Breadcrumb
 id: Breadcrumb.Link
 ---
+@tsProps
 **/
 let BreadcrumbLink = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class BreadcrumbLink extends _react.Component {
   constructor() {
@@ -45,9 +46,7 @@ let BreadcrumbLink = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _
           iconPlacement = _this$props.iconPlacement,
           onClick = _this$props.onClick;
     const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
-    return /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({
-      as: this.element
-    }, props, {
+    return /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({}, props, {
       href: href,
       renderIcon: renderIcon,
       iconPlacement: iconPlacement,

package/lib/Breadcrumb/BreadcrumbLink/props.js

@@ -33,34 +33,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Content to render as the crumb, generally should be text.
-   */
   children: _propTypes.default.node.isRequired,
-
-  /**
-   * Link the crumb should direct to; if an href is provided, the crumb will render as a link
-   */
   href: _propTypes.default.string,
-
-  /**
-   * If the Breadcrumb.Link has an onClick prop (and no href), it will render as a button
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Sets the font-size of the breadcrumb text
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Add an icon to the Breadcrumb.Link
-   */
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Place the icon before or after the text in the Breadcrumb.Link
-   */
   iconPlacement: _propTypes.default.oneOf(['start', 'end'])
 };
 exports.propTypes = propTypes;

package/lib/Breadcrumb/BreadcrumbLocator.js

@@ -40,6 +40,7 @@ var _BreadcrumbLinkLocator = require("./BreadcrumbLink/BreadcrumbLinkLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const BreadcrumbLocator = (0, _locator.locator)(_index.Breadcrumb.selector, {
   findAllLinks: function () {
     return _BreadcrumbLinkLocator.BreadcrumbLinkLocator.findAll(...arguments);

package/lib/Breadcrumb/index.js

@@ -20,12 +20,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _View = require("@instructure/ui-view/lib/View");
 
-var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _emotion = require("@instructure/emotion");
 
+var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
+
 var _BreadcrumbLink = require("./BreadcrumbLink");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -40,6 +40,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Breadcrumb extends _react.Component {
   constructor() {
@@ -52,18 +53,24 @@ let Breadcrumb = (_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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
-    const numChildren = children ? children.length : 0;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+
+    const numChildren = _react.default.Children.count(children);
+
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     };

package/lib/Breadcrumb/props.js

@@ -39,26 +39,9 @@ var _BreadcrumbLink = require("./BreadcrumbLink");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * children of type Breadcrumb.Link
-   */
   children: _Children.Children.oneOf([_BreadcrumbLink.BreadcrumbLink]),
-
-  /**
-   * An accessible label for the navigation
-   */
   label: _propTypes.default.string.isRequired,
-
-  /**
-   * Sets the font-size of the breadcrumb text
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * 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
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-breadcrumb",
-  "version": "8.14.1-snapshot.0+b78772e0c",
+  "version": "8.14.1-snapshot.19+f884c29cc",
   "description": "A breadcrumb component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,23 +24,23 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-themes": "8.14.1-snapshot.0+b78772e0c"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-themes": "8.14.1-snapshot.19+f884c29cc"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/shared-types": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-icons": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-link": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-testable": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-truncate-text": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-utils": "8.14.1-snapshot.0+b78772e0c",
-    "@instructure/ui-view": "8.14.1-snapshot.0+b78772e0c",
+    "@instructure/emotion": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/shared-types": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-icons": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-link": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-testable": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-truncate-text": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-utils": "8.14.1-snapshot.19+f884c29cc",
+    "@instructure/ui-view": "8.14.1-snapshot.19+f884c29cc",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "b78772e0c229d33975247d9f5a55a33475aa4e69"
+  "gitHead": "f884c29cc31d6e05cdf6d1165b16098a4c113c2e"
 }

package/src/Breadcrumb/BreadcrumbLink/index.tsx

@@ -37,6 +37,7 @@ import type { BreadcrumbLinkProps } from './props'
 parent: Breadcrumb
 id: Breadcrumb.Link
 ---
+@tsProps
 **/
 
 @testable()
@@ -60,8 +61,6 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
 
     return (
       <Link
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'element' does not exist on type 'Breadcr... Remove this comment to see the full error message
-        as={this.element}
         {...props}
         href={href}
         renderIcon={renderIcon}

package/src/Breadcrumb/BreadcrumbLink/props.ts

@@ -29,47 +29,51 @@ import type {
   OtherHTMLAttributes,
   PropValidators
 } from '@instructure/shared-types'
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 type BreadcrumbLinkOwnProps = {
-  children: React.ReactNode
-  href?: string
-  onClick?: (...args: any[]) => any
-  size?: 'small' | 'medium' | 'large'
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
-  iconPlacement?: 'start' | 'end'
-}
-
-type PropKeys = keyof BreadcrumbLinkOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type BreadcrumbLinkProps = BreadcrumbLinkOwnProps &
-  OtherHTMLAttributes<BreadcrumbLinkOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Content to render as the crumb, generally should be text.
    */
-  children: PropTypes.node.isRequired,
+  children: React.ReactNode
   /**
    * Link the crumb should direct to; if an href is provided, the crumb will render as a link
    */
-  href: PropTypes.string,
+  href?: string
   /**
    * If the Breadcrumb.Link has an onClick prop (and no href), it will render as a button
    */
-  onClick: PropTypes.func,
+  onClick?: (event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void
   /**
    * Sets the font-size of the breadcrumb text
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
   /**
    * Add an icon to the Breadcrumb.Link
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
   /**
    * Place the icon before or after the text in the Breadcrumb.Link
    */
+  iconPlacement?: 'start' | 'end'
+}
+
+type PropKeys = keyof BreadcrumbLinkOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BreadcrumbLinkProps = BreadcrumbLinkOwnProps &
+  OtherHTMLAttributes<BreadcrumbLinkOwnProps> & {
+    // React Router might add a `to` prop
+    to?: string
+  }
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   iconPlacement: PropTypes.oneOf(['start', 'end'])
 }
 

package/src/Breadcrumb/index.tsx

@@ -26,10 +26,10 @@
 import React, { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
-import { IconArrowOpenEndSolid } from '@instructure/ui-icons'
 import { testable } from '@instructure/ui-testable'
 
 import { withStyle, jsx } from '@instructure/emotion'
+import { IconArrowOpenEndSolid } from '@instructure/ui-icons'
 import { BreadcrumbLink } from './BreadcrumbLink'
 
 import generateStyle from './styles'
@@ -42,6 +42,7 @@ import type { BreadcrumbProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 
 @withStyle(generateStyle, generateComponentTheme)
@@ -63,22 +64,17 @@ class Breadcrumb extends Component<BreadcrumbProps> {
   }
 
   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?.()
   }
 
   static Link = BreadcrumbLink
 
   renderChildren() {
     const { styles, children } = this.props
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'length' does not exist on type 'string |... Remove this comment to see the full error message
-    const numChildren = children ? children.length : 0
+    const numChildren = React.Children.count(children)
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     }

package/src/Breadcrumb/props.ts

@@ -37,9 +37,23 @@ import type {
 import type { BreadcrumbTheme, PropValidators } from '@instructure/shared-types'
 
 type BreadcrumbOwnProps = {
+  /**
+   * children of type Breadcrumb.Link
+   */
   children?: React.ReactNode // TODO: oneOf([BreadcrumbLink])
+  /**
+   * An accessible label for the navigation
+   */
   label: string
+  /**
+   * Sets the font-size of the breadcrumb text
+   */
   size?: 'small' | 'medium' | 'large'
+  /**
+   * 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
 }
 
@@ -53,23 +67,9 @@ type BreadcrumbProps = BreadcrumbOwnProps &
 type BreadcrumbStyle = ComponentStyle<'breadcrumb' | 'crumb' | 'separator'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * children of type Breadcrumb.Link
-   */
   children: Children.oneOf([BreadcrumbLink]),
-  /**
-   * An accessible label for the navigation
-   */
   label: PropTypes.string.isRequired,
-  /**
-   * Sets the font-size of the breadcrumb text
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * 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
 }