Remove UUID generation when id is empty

Addresses #413.

Author: jakezatecky

CHANGELOG.md

@@ -9,9 +9,10 @@
 * Hide the pseudo-checkbox from the accessibility tree
 * Change the clickable label from `role="link"` to `role="button"`
 
-#### Language
+#### Properties
 
-* Replaced `toggle` key in `lang` property with `collapseNode` and `expandNode`
+* `id`: No longer generates a random UUID when empty
+* `lang`: Replaced `toggle` key with `collapseNode` and `expandNode`
 
 #### Styling
 

package.json

@@ -89,7 +89,6 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
-    "nanoid": "^3.0.0",
     "prop-types": "^15.5.8"
   }
 }

src/js/CheckboxTree.jsx

@@ -1,7 +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';
 
@@ -97,7 +96,6 @@ class CheckboxTree extends React.Component {
         });
 
         this.state = {
-            id: props.id || `rct-${nanoid()}`,
             model,
             prevProps: props,
         };
@@ -113,8 +111,8 @@ class CheckboxTree extends React.Component {
 
     static getDerivedStateFromProps(newProps, prevState) {
         const { model, prevProps } = prevState;
-        const { disabled, id, nodes } = newProps;
-        let newState = { ...prevState, prevProps: newProps };
+        const { disabled, nodes } = newProps;
+        const newState = { ...prevState, prevProps: newProps };
 
         // Apply new properties to model
         model.setProps(newProps);
@@ -125,10 +123,6 @@ class CheckboxTree extends React.Component {
             model.flattenNodes(nodes);
         }
 
-        if (id !== null) {
-            newState = { ...newState, id };
-        }
-
         model.deserializeLists({
             checked: newProps.checked,
             expanded: newProps.expanded,
@@ -225,14 +219,15 @@ class CheckboxTree extends React.Component {
             checkKeys,
             expandDisabled,
             expandOnClick,
+            id,
             noCascade,
             onClick,
             onlyLeafCheckboxes,
             optimisticToggle,
             showNodeTitle,
             showNodeIcon,
         } = this.props;
-        const { id, model } = this.state;
+        const { model } = this.state;
 
         const treeNodes = nodes.map((node) => {
             const key = node.value;
@@ -337,11 +332,11 @@ class CheckboxTree extends React.Component {
             disabled,
             icons,
             iconsClass,
+            id,
             lang,
             nodes,
             nativeCheckboxes,
         } = this.props;
-        const { id } = this.state;
         const mergedIcons = this.combineMemorized(defaultIcons, icons);
         const treeNodes = this.renderTreeNodes(nodes);
 

src/js/components/TreeNode.jsx

@@ -21,7 +21,6 @@ class TreeNode extends React.PureComponent {
         label: PropTypes.node.isRequired,
         optimisticToggle: PropTypes.bool.isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
-        treeId: PropTypes.string.isRequired,
         value: PropTypes.oneOfType([
             PropTypes.string,
             PropTypes.number,
@@ -35,6 +34,7 @@ class TreeNode extends React.PureComponent {
         icon: PropTypes.node,
         showCheckbox: PropTypes.bool,
         title: PropTypes.string,
+        treeId: PropTypes.string,
         onClick: PropTypes.func,
     };
 
@@ -45,6 +45,7 @@ class TreeNode extends React.PureComponent {
         icon: null,
         showCheckbox: true,
         title: null,
+        treeId: null,
         onClick: null,
     };
 
@@ -211,7 +212,8 @@ class TreeNode extends React.PureComponent {
             onClick,
         } = this.props;
         const clickable = onClick !== null;
-        const inputId = `${treeId}-${String(value).split(' ').join('_')}`;
+        const valueId = String(value).split(' ').join('_');
+        const inputId = treeId ? `${treeId}-${valueId}` : null;
 
         const render = [(
             <label key={0} htmlFor={inputId} title={title}>