react-spatial 1.5.2 → 1.5.3

package/src/components/LayerTree/__snapshots__/LayerTree.test.js.snap

@@ -0,0 +1,1746 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LayerTree matches snapshots using default properties. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when an item is hidden (different layer tree levels) 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when an item is hidden. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when an item use renderAfterItem. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+      <div>
+        Render name after item: 
+        1-2
+        , level: 
+        1
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+      <div>
+        Render name after item: 
+        1-1
+        , level: 
+        1
+      </div>
+    </div>
+    <div>
+      Render name after item: 
+      1
+      , level: 
+      0
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+    <div>
+      Render name after item: 
+      root
+      , level: 
+      0
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when an item use renderBeforeItem. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      Render name before item: 
+      1
+      , level: 
+      0
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+      <div>
+        Render name before item: 
+        1-2
+        , level: 
+        1
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+      <div>
+        Render name before item: 
+        1-1
+        , level: 
+        1
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+    <div>
+      Render name before item: 
+      root
+      , level: 
+      0
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when classNames are used. 1`] = `
+<div
+  className="foo"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when expandChildren is a function. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-1 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Show sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={false}
+        aria-label="root Show sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Show sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when expandChildren is true. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="1 Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="1 Hide sublayer"
+      >
+        <div>
+          1
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item "
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Show layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Show layer"
+        >
+          <input
+            checked={false}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="1-2 Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-2 Show sublayer"
+        >
+          <div>
+            1-2
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-radio rs-radio"
+          onKeyPress={[Function]}
+          tabIndex={-1}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="radio"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={true}
+          aria-label="1-1 Hide sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="1-1 Hide sublayer"
+        >
+          <div>
+            1-1
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={-1}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="root Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="root Hide sublayer"
+      >
+        <div>
+          root
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when items are always expanded 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="Expanded layer 2 (because of level 1) Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="Expanded layer 2 (because of level 1) Hide sublayer"
+      >
+        <div>
+          Expanded layer 2 (because of level 1)
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="checkbox"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="Visible layer 2.2 (as parent is expanded) Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Visible layer 2.2 (as parent is expanded) Show sublayer"
+        >
+          <div>
+            Visible layer 2.2 (as parent is expanded)
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="checkbox"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={false}
+          aria-label="Visible layer 2.1 (as parent is expanded) Show sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Visible layer 2.1 (as parent is expanded) Show sublayer"
+        >
+          <div>
+            Visible layer 2.1 (as parent is expanded)
+          </div>
+          <div
+            className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      className="rs-layer-tree-item rs-visible"
+      style={
+        {
+          "paddingLeft": "0px",
+        }
+      }
+    >
+      <label
+        aria-label="Hide layer"
+        className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+        onKeyPress={[Function]}
+        tabIndex={0}
+        title="Hide layer"
+      >
+        <input
+          checked={true}
+          onClick={[Function]}
+          readOnly={true}
+          tabIndex={-1}
+          type="checkbox"
+        />
+        <span />
+      </label>
+      <div
+        aria-expanded={true}
+        aria-label="Expanded layer 1 (because of level 1) Hide sublayer"
+        className="rs-layer-tree-toggle"
+        onClick={[Function]}
+        onKeyPress={[Function]}
+        role="button"
+        tabIndex={0}
+        title="Expanded layer 1 (because of level 1) Hide sublayer"
+      >
+        <div>
+          Expanded layer 1 (because of level 1)
+        </div>
+        <div
+          className="rs-layer-tree-arrow rs-layer-tree-arrow-expanded"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="checkbox"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={true}
+          aria-label="Expanded layer 1.2 (because of isAlwaysExpanded=true) Hide sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Expanded layer 1.2 (because of isAlwaysExpanded=true) Hide sublayer"
+        >
+          <div>
+            Expanded layer 1.2 (because of isAlwaysExpanded=true)
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="rs-layer-tree-item rs-visible"
+          style={
+            {
+              "paddingLeft": "60px",
+            }
+          }
+        >
+          <label
+            aria-label="Hide layer"
+            className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+            onKeyPress={[Function]}
+            tabIndex={0}
+            title="Hide layer"
+          >
+            <input
+              checked={true}
+              onClick={[Function]}
+              readOnly={true}
+              tabIndex={-1}
+              type="checkbox"
+            />
+            <span />
+          </label>
+          <div
+            aria-expanded={false}
+            aria-label="Visible layer 1.2.1 (as parent is expanded) Show sublayer"
+            className="rs-layer-tree-toggle"
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
+            title="Visible layer 1.2.1 (as parent is expanded) Show sublayer"
+          >
+            <div>
+              Visible layer 1.2.1 (as parent is expanded)
+            </div>
+            <div
+              className="rs-layer-tree-arrow rs-layer-tree-arrow-collapsed"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="rs-layer-tree-item rs-visible"
+        style={
+          {
+            "paddingLeft": "30px",
+          }
+        }
+      >
+        <label
+          aria-label="Hide layer"
+          className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+          onKeyPress={[Function]}
+          tabIndex={0}
+          title="Hide layer"
+        >
+          <input
+            checked={true}
+            onClick={[Function]}
+            readOnly={true}
+            tabIndex={-1}
+            type="checkbox"
+          />
+          <span />
+        </label>
+        <div
+          aria-expanded={true}
+          aria-label="Expanded layer 1.1 (because of isAlwaysExpanded=true) Hide sublayer"
+          className="rs-layer-tree-toggle"
+          onClick={[Function]}
+          onKeyPress={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Expanded layer 1.1 (because of isAlwaysExpanded=true) Hide sublayer"
+        >
+          <div>
+            Expanded layer 1.1 (because of isAlwaysExpanded=true)
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          className="rs-layer-tree-item rs-visible"
+          style={
+            {
+              "paddingLeft": "60px",
+            }
+          }
+        >
+          <label
+            aria-label="Hide layer"
+            className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+            onKeyPress={[Function]}
+            tabIndex={0}
+            title="Hide layer"
+          >
+            <input
+              checked={true}
+              onClick={[Function]}
+              readOnly={true}
+              tabIndex={-1}
+              type="checkbox"
+            />
+            <span />
+          </label>
+          <div
+            aria-expanded={true}
+            aria-label="Expanded layer 1.1.1 (because of isAlwaysExpanded=true) Hide sublayer"
+            className="rs-layer-tree-toggle"
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
+            title="Expanded layer 1.1.1 (because of isAlwaysExpanded=true) Hide sublayer"
+          >
+            <div>
+              Expanded layer 1.1.1 (because of isAlwaysExpanded=true)
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            className="rs-layer-tree-item rs-visible"
+            style={
+              {
+                "paddingLeft": "90px",
+              }
+            }
+          >
+            <label
+              aria-label="Hide layer"
+              className="rs-layer-tree-input rs-layer-tree-input-checkbox rs-checkbox"
+              onKeyPress={[Function]}
+              tabIndex={-1}
+              title="Hide layer"
+            >
+              <input
+                checked={true}
+                onClick={[Function]}
+                readOnly={true}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span />
+            </label>
+            <div
+              aria-expanded={false}
+              aria-label="Visible layer 1.1.1.1 (as parent is expanded) Show sublayer"
+              className="rs-layer-tree-toggle"
+              onClick={[Function]}
+              onKeyPress={[Function]}
+              role="button"
+              tabIndex={0}
+              title="Visible layer 1.1.1.1 (as parent is expanded) Show sublayer"
+            >
+              <div>
+                Visible layer 1.1.1.1 (as parent is expanded)
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LayerTree matches snapshots when no layers. 1`] = `
+<div
+  className="rs-layer-tree"
+/>
+`;
+
+exports[`LayerTree matches snapshots when renderItem is used. 1`] = `
+<div
+  className="rs-layer-tree"
+>
+  <div>
+    1
+  </div>
+  <div>
+    root
+  </div>
+</div>
+`;