changes after second review

Author: liatgo

packages/core/src/hooks/use_leaves_manager.js

@@ -10,7 +10,7 @@ const useLeavesManager = ({ structure, parents, currentDepth }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [leaves, setLeaves] = useState([]);
 
-  const onInputChange = event => setSearchTerm(event?.target?.value || "");
+  const onInputChange = event => setSearchTerm(event.target.value || "");
 
   useEffect(() => {
     const leaves = structure

packages/core/src/items/itemsStyle.js

@@ -1,4 +1,4 @@
-export default ({ itemsHeight }) => ({
-  maxHeight: itemsHeight,
+export default ({ height }) => ({
+  maxHeight: height,
   overflowY: "auto"
 });

packages/core/src/no_results/noResultsStyle.js

@@ -1,9 +1,9 @@
-export const css = ({ itemsHeight }) => ({
+export const css = ({ height }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  height: itemsHeight
+  height: height
 });
 
 export const icon = () => ({

packages/core/src/tree.js

@@ -86,7 +86,7 @@ const Tree = props => {
         onInputChange={onInputChange}
         inputIconRenderer={inputIconRenderer}
       />
-      <Items getStyles={getStyles} itemsHeight={itemsHeight}>
+      <Items getStyles={getStyles} height={itemsHeight}>
         {leaves &&
           leaves.length > 0 &&
           leaves.map(item => (
@@ -101,7 +101,7 @@ const Tree = props => {
       </Items>
       {leaves && leaves.length === 0 && (
         <NoResults
-          itemsHeight={itemsHeight}
+          height={itemsHeight}
           text={noResultsText}
           getStyles={getStyles}
           noResultsIconRenderer={noResultsIconRenderer}

packages/material_ui_tree/src/header/header.js

@@ -9,6 +9,9 @@ import { makeStyles } from "@material-ui/core/styles";
 const useStyles = makeStyles(() => ({
   root: {
     padding: "8px 16px"
+  },
+  button: {
+    marginLeft: -8
   }
 }));
 
@@ -18,7 +21,7 @@ const MaterialUIHeader = ({ headerRef, parents = [], onClick, title = "" }) => {
     <div ref={headerRef}>
       <CardActions className={classes.root}>
         {parents.length > 0 && (
-          <IconButton size={"small"}>
+          <IconButton className={classes.button} size={"small"}>
             <ChevronLeft onClick={onClick} />
           </IconButton>
         )}

packages/material_ui_tree/src/items/items.js

@@ -8,12 +8,12 @@ const useStyles = makeStyles({
   root: {
     overflowY: "auto",
     overflowX: "hidden",
-    maxHeight: props => props.itemsHeight - ITEMS_PADDING
+    maxHeight: props => props.height - ITEMS_PADDING
   }
 });
 
-const MaterialUIItemsRenderer = ({ children, itemsHeight }) => {
-  const classes = useStyles({ itemsHeight });
+const MaterialUIItemsRenderer = ({ children, height }) => {
+  const classes = useStyles({ height });
   return (
     <List className={classes.root} component="nav">
       {children}

packages/material_ui_tree/src/no_results/no_results.js

@@ -11,13 +11,13 @@ const useStyles = makeStyles({
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    height: props => props.itemsHeight - ITEMS_PADDING
+    height: props => props.height - ITEMS_PADDING
   }
 });
 
-const MaterialUINoResults = ({ text, itemsHeight }) => {
+const MaterialUINoResults = ({ text, height }) => {
   const classes = useStyles({
-    itemsHeight
+    height
   });
   return (
     <div className={classes.root}>