@instructure/ui-list 8.10.1-snapshot.9 → 8.10.3-snapshot.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/ui-list
+
+## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/ui-list
+
 # [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
 
 **Note:** Version bump only for package @instructure/ui-list

package/es/InlineList/InlineListItem/index.js

@@ -44,6 +44,18 @@ id: InlineList.Item
 ---
 **/
 let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class InlineListItem extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -53,16 +65,16 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   render() {
-    const _this$props = this.props,
-          delimiter = _this$props.delimiter,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          spacing = _this$props.spacing,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          delimiter = _this$props2.delimiter,
+          size = _this$props2.size,
+          margin = _this$props2.margin,
+          padding = _this$props2.padding,
+          elementRef = _this$props2.elementRef,
+          children = _this$props2.children,
+          spacing = _this$props2.spacing,
+          styles = _this$props2.styles,
+          rest = _objectWithoutProperties(_this$props2, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
@@ -71,7 +83,7 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
       padding: padding,
       display: "inline-block",
       maxWidth: "100%",
-      elementRef: elementRef
+      elementRef: this.handleRef
     }), children, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
       "aria-hidden": "true"

package/es/InlineList/index.js

@@ -39,6 +39,18 @@ category: components
 ---
 **/
 let InlineList = (_dec = testable(), _dec(_class = (_temp = _class2 = class InlineList extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   renderChildren() {
     return Children.map(this.props.children, child => {
       if (!child) return; // ignore null, falsy children
@@ -52,17 +64,17 @@ let InlineList = (_dec = testable(), _dec(_class = (_temp = _class2 = class Inli
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          margin = _this$props.margin,
-          elementRef = _this$props.elementRef,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          as = _this$props2.as,
+          margin = _this$props2.margin,
+          elementRef = _this$props2.elementRef,
+          rest = _objectWithoutProperties(_this$props2, _excluded);
 
     return /*#__PURE__*/React.createElement(View, Object.assign({}, passthroughProps(rest), {
       as: as,
       margin: margin,
       padding: "0",
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       display: "block"
     }), this.renderChildren());
   }

package/es/List/ListItem/index.js

@@ -44,6 +44,18 @@ id: List.Item
 ---
 **/
 let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ListItem extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -53,16 +65,16 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   render() {
-    const _this$props = this.props,
-          delimiter = _this$props.delimiter,
-          spacing = _this$props.spacing,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          delimiter = _this$props2.delimiter,
+          spacing = _this$props2.spacing,
+          size = _this$props2.size,
+          margin = _this$props2.margin,
+          padding = _this$props2.padding,
+          elementRef = _this$props2.elementRef,
+          children = _this$props2.children,
+          styles = _this$props2.styles,
+          rest = _objectWithoutProperties(_this$props2, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.listItem,
@@ -70,7 +82,7 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       margin: margin,
       padding: padding,
       maxWidth: "100%",
-      elementRef: elementRef
+      elementRef: this.handleRef
     }), children);
   }
 

package/es/List/index.js

@@ -44,6 +44,18 @@ category: components
 ---
 **/
 let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class List extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -66,19 +78,19 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          margin = _this$props.margin,
-          isUnstyled = _this$props.isUnstyled,
-          elementRef = _this$props.elementRef,
-          styles = _this$props.styles,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+          as = _this$props2.as,
+          margin = _this$props2.margin,
+          isUnstyled = _this$props2.isUnstyled,
+          elementRef = _this$props2.elementRef,
+          styles = _this$props2.styles,
+          rest = _objectWithoutProperties(_this$props2, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.list,
       as: as,
       margin: margin,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       display: "block"
     }), this.renderChildren());
   }

package/lib/InlineList/InlineListItem/index.js

@@ -36,6 +36,18 @@ id: InlineList.Item
 ---
 **/
 let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class InlineListItem extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -45,16 +57,16 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   render() {
-    const _this$props = this.props,
-          delimiter = _this$props.delimiter,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          spacing = _this$props.spacing,
-          styles = _this$props.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props2 = this.props,
+          delimiter = _this$props2.delimiter,
+          size = _this$props2.size,
+          margin = _this$props2.margin,
+          padding = _this$props2.padding,
+          elementRef = _this$props2.elementRef,
+          children = _this$props2.children,
+          spacing = _this$props2.spacing,
+          styles = _this$props2.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
       as: "li",
@@ -62,7 +74,7 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       padding: padding,
       display: "inline-block",
       maxWidth: "100%",
-      elementRef: elementRef
+      elementRef: this.handleRef
     }), children, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
       "aria-hidden": "true"

package/lib/InlineList/index.js

@@ -35,6 +35,18 @@ category: components
 ---
 **/
 let InlineList = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class InlineList extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   renderChildren() {
     return _react.Children.map(this.props.children, child => {
       if (!child) return; // ignore null, falsy children
@@ -48,16 +60,16 @@ let InlineList = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _clas
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          margin = _this$props.margin,
-          elementRef = _this$props.elementRef,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props2 = this.props,
+          as = _this$props2.as,
+          margin = _this$props2.margin,
+          elementRef = _this$props2.elementRef,
+          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
     return /*#__PURE__*/_react.default.createElement(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       as: as,
       margin: margin,
       padding: "0",
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       display: "block"
     }), this.renderChildren());
   }

package/lib/List/ListItem/index.js

@@ -36,6 +36,18 @@ id: List.Item
 ---
 **/
 let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ListItem extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -45,23 +57,23 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    const _this$props = this.props,
-          delimiter = _this$props.delimiter,
-          spacing = _this$props.spacing,
-          size = _this$props.size,
-          margin = _this$props.margin,
-          padding = _this$props.padding,
-          elementRef = _this$props.elementRef,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props2 = this.props,
+          delimiter = _this$props2.delimiter,
+          spacing = _this$props2.spacing,
+          size = _this$props2.size,
+          margin = _this$props2.margin,
+          padding = _this$props2.padding,
+          elementRef = _this$props2.elementRef,
+          children = _this$props2.children,
+          styles = _this$props2.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.listItem,
       as: "li",
       margin: margin,
       padding: padding,
       maxWidth: "100%",
-      elementRef: elementRef
+      elementRef: this.handleRef
     }), children);
   }
 

package/lib/List/index.js

@@ -45,6 +45,18 @@ category: components
 ---
 **/
 let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class List extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+
+    this.handleRef = el => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+  }
+
   componentDidMount() {
     this.props.makeStyles();
   }
@@ -67,18 +79,18 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   render() {
-    const _this$props = this.props,
-          as = _this$props.as,
-          margin = _this$props.margin,
-          isUnstyled = _this$props.isUnstyled,
-          elementRef = _this$props.elementRef,
-          styles = _this$props.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props2 = this.props,
+          as = _this$props2.as,
+          margin = _this$props2.margin,
+          isUnstyled = _this$props2.isUnstyled,
+          elementRef = _this$props2.elementRef,
+          styles = _this$props2.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       css: styles === null || styles === void 0 ? void 0 : styles.list,
       as: as,
       margin: margin,
-      elementRef: elementRef,
+      elementRef: this.handleRef,
       display: "block"
     }), this.renderChildren());
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "8.10.1-snapshot.9+93b506fe0",
+  "version": "8.10.3-snapshot.2+ccdf8f43b",
   "description": "Components for displaying vertical or horizontal lists.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,21 +25,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/emotion": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/shared-types": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-prop-types": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-react-utils": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-testable": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-view": "8.10.1-snapshot.9+93b506fe0",
+    "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/emotion": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/shared-types": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-prop-types": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-react-utils": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-testable": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-view": "8.10.3-snapshot.2+ccdf8f43b",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-color-utils": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-test-locator": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-test-utils": "8.10.1-snapshot.9+93b506fe0",
-    "@instructure/ui-themes": "8.10.1-snapshot.9+93b506fe0"
+    "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-color-utils": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-test-locator": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/ui-themes": "8.10.3-snapshot.2+ccdf8f43b"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "93b506fe0860718ebe2cc2729fd023e3e7489231"
+  "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
 }

package/src/InlineList/InlineListItem/index.tsx

@@ -58,6 +58,13 @@ class InlineListItem extends Component<InlineListItemProps> {
     elementRef: (el) => {}
   }
 
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+    this.props.elementRef?.(el)
+  }
+
   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()
@@ -91,7 +98,7 @@ class InlineListItem extends Component<InlineListItemProps> {
         padding={padding}
         display="inline-block"
         maxWidth="100%"
-        elementRef={elementRef}
+        elementRef={this.handleRef}
       >
         {children}
         <span css={styles?.delimiter} aria-hidden="true" />

package/src/InlineList/InlineListItem/props.ts

@@ -53,7 +53,7 @@ type InlineListItemOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
-  elementRef?: (...args: any[]) => any
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof InlineListItemOwnProps

package/src/InlineList/index.tsx

@@ -54,6 +54,13 @@ class InlineList extends Component<InlineListProps> {
 
   static Item = InlineListItem
 
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+    this.props.elementRef?.(el)
+  }
+
   renderChildren() {
     return Children.map(this.props.children, (child) => {
       if (!child) return // ignore null, falsy children
@@ -75,7 +82,7 @@ class InlineList extends Component<InlineListProps> {
         as={as}
         margin={margin}
         padding="0"
-        elementRef={elementRef}
+        elementRef={this.handleRef}
         display="block"
       >
         {this.renderChildren()}

package/src/InlineList/props.ts

@@ -48,7 +48,7 @@ type InlineListOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
-  elementRef?: (...args: any[]) => any
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof InlineListOwnProps

package/src/List/ListItem/index.tsx

@@ -59,6 +59,13 @@ class ListItem extends Component<ListItemProps> {
     elementRef: (el) => {}
   }
 
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+    this.props.elementRef?.(el)
+  }
+
   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()
@@ -91,7 +98,7 @@ class ListItem extends Component<ListItemProps> {
         margin={margin}
         padding={padding}
         maxWidth="100%"
-        elementRef={elementRef}
+        elementRef={this.handleRef}
       >
         {children}
       </View>

package/src/List/ListItem/props.ts

@@ -50,7 +50,7 @@ type ListItemOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
-  elementRef?: (...args: any[]) => any
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof ListItemOwnProps

package/src/List/index.tsx

@@ -64,6 +64,13 @@ class List extends Component<ListProps> {
 
   static Item = ListItem
 
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+    this.props.elementRef?.(el)
+  }
+
   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()
@@ -97,7 +104,7 @@ class List extends Component<ListProps> {
         css={styles?.list}
         as={as}
         margin={margin}
-        elementRef={elementRef}
+        elementRef={this.handleRef}
         display="block"
       >
         {this.renderChildren()}

package/src/List/props.ts

@@ -54,7 +54,7 @@ type ListOwnProps = {
     | 'large'
     | 'x-large'
     | 'xx-large'
-  elementRef?: (...args: any[]) => any
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof ListOwnProps