Merge branch 'master' into v1.7-dev

# Conflicts:
#	package.json

Author: jakezatecky

package.json

@@ -26,7 +26,7 @@
     "test": "gulp test-script"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0"
+    "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -35,12 +35,12 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@types/react": "^16.4.13",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
     "browser-sync": "^2.18.6",
     "chai": "^4.0.0",
     "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
     "eslint": "^7.12.1",
     "eslint-config-takiyon-react": "^0.5.0",
     "eslint-import-resolver-webpack": "^0.13.0",
@@ -55,13 +55,15 @@
     "gulp-exec": "^5.0.0",
     "gulp-header": "^2.0.5",
     "gulp-less": "^4.0.1",
-    "gulp-mocha": "^7.0.0",
+    "gulp-mocha": "^8.0.0",
+    "gulp-sass": "^4.1.0",
     "gulp-stylelint": "^13.0.0",
     "jsdom": "^16.0.1",
-    "mocha": "^8.2.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "mocha": "^9.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "sass": "^1.28.0",
     "stylelint": "^13.7.2",
     "stylelint-config-takiyon": "^1.0.1",
     "webpack": "^5.3.2",

src/js/CheckboxTree.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
+import memoize from 'lodash/memoize';
 import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -104,6 +105,8 @@ class CheckboxTree extends React.Component {
         this.onNodeClick = this.onNodeClick.bind(this);
         this.onExpandAll = this.onExpandAll.bind(this);
         this.onCollapseAll = this.onCollapseAll.bind(this);
+
+        this.combineMemorized = memoize((icons1, icons2) => ({ ...icons1, ...icons2 })).bind(this);
     }
 
     // eslint-disable-next-line react/sort-comp
@@ -253,7 +256,7 @@ class CheckboxTree extends React.Component {
                     expandOnClick={expandOnClick}
                     expanded={flatNode.expanded}
                     icon={node.icon}
-                    icons={{ ...defaultIcons, ...icons }}
+                    icons={this.combineMemorized(defaultIcons, icons)}
                     label={node.label}
                     lang={lang}
                     optimisticToggle={optimisticToggle}

src/js/TreeNode.js

@@ -7,7 +7,7 @@ import NativeCheckbox from './NativeCheckbox';
 import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 
-class TreeNode extends React.Component {
+class TreeNode extends React.PureComponent {
     static propTypes = {
         checked: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,

test/setup.js

@@ -1,5 +1,5 @@
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JSDOM } from 'jsdom';
 
 Enzyme.configure({ adapter: new Adapter() });