@instructure/ui-tree-browser 8.36.1-snapshot-7 → 8.36.1-snapshot-17

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.36.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-7) (2023-04-12)
+## [8.36.1-snapshot-17](https://github.com/instructure/instructure-ui/compare/v8.36.0...v8.36.1-snapshot-17) (2023-04-14)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser
 

package/es/TreeBrowser/TreeCollection/index.js

@@ -180,7 +180,10 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       level: this.itemsLevel
     });
     return jsx("li", Object.assign({
-      id: key,
+      id: key
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       tabIndex: -1,
@@ -254,7 +257,10 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     });
     return jsx("li", Object.assign({
       key: `i${position}`,
-      tabIndex: -1,
+      tabIndex: -1
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       "aria-label": item.name,
       css: styles === null || styles === void 0 ? void 0 : styles.item,
@@ -302,14 +308,19 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       focused: this.state.focused === `collection_${id}`,
       level
     });
-    const ariaSelected = {};
+    const ariaSelected = {
+      'aria-selected': void 0
+    };
     if (this.props.selection) ariaSelected['aria-selected'] = this.props.selection === `collection_${id}`;
     return isCollectionFlattened ? this.renderChildren() : jsx("li", Object.assign({
       ref: el => {
         this.ref = el;
       },
       css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
-      tabIndex: -1,
+      tabIndex: -1
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       "aria-label": this.props.name,
       "aria-level": level,

package/es/TreeBrowser/props.js

@@ -24,6 +24,14 @@
 
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
+
+// props shared between TreeBrowser, TreeCollection
+
+// props shared between TreeBrowser, TreeCollection, TreeButton
+
+// For now it doesn't need the OtherHTMLAttributes, because the extra props
+// get passed to TreeCollection and it doesn't handle them
+// this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
 const propTypes = {
   collections: PropTypes.object.isRequired,
   items: PropTypes.object.isRequired,

package/lib/TreeBrowser/TreeButton/index.js

@@ -14,6 +14,30 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _dec, _dec2, _class, _class2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 /**
 ---

package/lib/TreeBrowser/TreeCollection/index.js

@@ -15,6 +15,32 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _dec, _dec2, _class, _class2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+// eslint-disable-next-line no-unused-vars
 /**
 ---
 parent: TreeBrowser
@@ -161,7 +187,10 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       level: this.itemsLevel
     });
     return (0, _emotion.jsx)("li", Object.assign({
-      id: key,
+      id: key
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       tabIndex: -1,
@@ -235,7 +264,10 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     });
     return (0, _emotion.jsx)("li", Object.assign({
       key: `i${position}`,
-      tabIndex: -1,
+      tabIndex: -1
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       "aria-label": item.name,
       css: styles === null || styles === void 0 ? void 0 : styles.item,
@@ -283,14 +315,19 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       focused: this.state.focused === `collection_${id}`,
       level
     });
-    const ariaSelected = {};
+    const ariaSelected = {
+      'aria-selected': void 0
+    };
     if (this.props.selection) ariaSelected['aria-selected'] = this.props.selection === `collection_${id}`;
     return isCollectionFlattened ? this.renderChildren() : (0, _emotion.jsx)("li", Object.assign({
       ref: el => {
         this.ref = el;
       },
       css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
-      tabIndex: -1,
+      tabIndex: -1
+      // it's complaining about the aria-selected type which is there
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
       role: "treeitem",
       "aria-label": this.props.name,
       "aria-level": level,

package/lib/TreeBrowser/TreeNode/index.js

@@ -14,6 +14,31 @@ var _styles = _interopRequireDefault(require("../TreeButton/styles"));
 var _theme = _interopRequireDefault(require("../TreeButton/theme"));
 var _props = require("./props");
 var _dec, _dec2, _class, _class2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2021 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
+// eslint-disable-next-line no-unused-vars
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 /**
 ---

package/lib/TreeBrowser/index.js

@@ -20,6 +20,30 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _dec, _dec2, _class, _class2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
 /**
 ---
 category: components

package/lib/TreeBrowser/props.js

@@ -31,6 +31,13 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 
+// props shared between TreeBrowser, TreeCollection
+
+// props shared between TreeBrowser, TreeCollection, TreeButton
+
+// For now it doesn't need the OtherHTMLAttributes, because the extra props
+// get passed to TreeCollection and it doesn't handle them
+// this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
 const propTypes = {
   collections: _propTypes.default.object.isRequired,
   items: _propTypes.default.object.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.36.1-snapshot-7",
+  "version": "8.36.1-snapshot-17",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.36.1-snapshot-7",
-    "@instructure/ui-color-utils": "8.36.1-snapshot-7",
-    "@instructure/ui-test-locator": "8.36.1-snapshot-7",
-    "@instructure/ui-test-utils": "8.36.1-snapshot-7",
-    "@instructure/ui-themes": "8.36.1-snapshot-7"
+    "@instructure/ui-babel-preset": "8.36.1-snapshot-17",
+    "@instructure/ui-color-utils": "8.36.1-snapshot-17",
+    "@instructure/ui-test-locator": "8.36.1-snapshot-17",
+    "@instructure/ui-test-utils": "8.36.1-snapshot-17",
+    "@instructure/ui-themes": "8.36.1-snapshot-17"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@instructure/emotion": "8.36.1-snapshot-7",
-    "@instructure/shared-types": "8.36.1-snapshot-7",
-    "@instructure/ui-icons": "8.36.1-snapshot-7",
-    "@instructure/ui-img": "8.36.1-snapshot-7",
-    "@instructure/ui-prop-types": "8.36.1-snapshot-7",
-    "@instructure/ui-react-utils": "8.36.1-snapshot-7",
-    "@instructure/ui-testable": "8.36.1-snapshot-7",
-    "@instructure/ui-utils": "8.36.1-snapshot-7",
+    "@babel/runtime": "^7.21.0",
+    "@instructure/emotion": "8.36.1-snapshot-17",
+    "@instructure/shared-types": "8.36.1-snapshot-17",
+    "@instructure/ui-icons": "8.36.1-snapshot-17",
+    "@instructure/ui-img": "8.36.1-snapshot-17",
+    "@instructure/ui-prop-types": "8.36.1-snapshot-17",
+    "@instructure/ui-react-utils": "8.36.1-snapshot-17",
+    "@instructure/ui-testable": "8.36.1-snapshot-17",
+    "@instructure/ui-utils": "8.36.1-snapshot-17",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/TreeBrowser/README.md

@@ -465,7 +465,7 @@ class Example extends React.Component {
       sorted: false
     }
   }
-  toogleSort = (event)=>{ this.setState({sorted:!this.state.sorted}) }
+  toggleSort = (event)=>{ this.setState({sorted:!this.state.sorted}) }
   render () {
     return (
       <>
@@ -474,7 +474,7 @@ class Example extends React.Component {
               <Checkbox
                 checked={this.state.sorted}
                 label="Sort"
-                onChange={this.toogleSort}
+                onChange={this.toggleSort}
               />
                </FormFieldGroup>
         </View>

package/src/TreeBrowser/TreeCollection/index.tsx

@@ -236,6 +236,8 @@ class TreeCollection extends Component<
     return (
       <li
         id={key}
+        // it's complaining about the aria-selected type which is there
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role="treeitem"
         css={styles?.item}
         tabIndex={-1}
@@ -316,6 +318,8 @@ class TreeCollection extends Component<
       <li
         key={`i${position}`}
         tabIndex={-1}
+        // it's complaining about the aria-selected type which is there
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role="treeitem"
         aria-label={item.name}
         css={styles?.item}
@@ -372,7 +376,7 @@ class TreeCollection extends Component<
       level
     })
 
-    const ariaSelected: AriaSelectedType = {}
+    const ariaSelected: AriaSelectedType = { 'aria-selected': undefined }
     if (this.props.selection)
       ariaSelected['aria-selected'] =
         this.props.selection === `collection_${id}`
@@ -386,6 +390,8 @@ class TreeCollection extends Component<
         }}
         css={styles?.treeCollection}
         tabIndex={-1}
+        // it's complaining about the aria-selected type which is there
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role="treeitem"
         aria-label={this.props.name}
         aria-level={level}