Merge branch 'master' into kimi/update/button-state

Author: kimispencer

src/Lumi/Components/Table.js

@@ -10,8 +10,8 @@ exports.dataSize = function(data) {
 exports.getMouseEventPositionWithOffset = function(domNode, e) {
   var bounds = domNode.getBoundingClientRect();
   return {
-    x: e.pageX + domNode.scrollLeft - bounds.left,
-    y: e.pageY + domNode.scrollTop - bounds.top
+    x: e.pageX - bounds.left,
+    y: e.pageY - bounds.top
   };
 };
 

src/Lumi/Components/Table.purs

@@ -262,24 +262,8 @@ table = make component
             then self.state.columns
             else self.props.columns
       in
-        renderLumiTable \tableRef ->
-          [ if not self.state.showMenu
-              then empty
-              else guard (self.props.dropdownMenu) $ renderFilterDropdown
-                { close: closeMenu self
-                , reorderItems: setColumnSort self <<< map \{ name, hidden } ->
-                    { name: ColumnName name
-                    , hidden
-                    }
-                , items: columns <#> \{ name, label, filterLabel, hidden } ->
-                    { name: un ColumnName name
-                    , label
-                    , filterLabel
-                    , hidden
-                    }
-                , style: R.css self.state.menuStyle
-                }
-          , element scrollObserver
+        renderLumiTable self columns \tableRef ->
+          [ element scrollObserver
               { node: tableRef
               , render: \{ hasScrolledY, hasScrolledX } ->
                   R.table
@@ -426,14 +410,34 @@ table = make component
                       ]
                   }
 
-    renderLumiTable renderChildren =
-      selectorRef (QuerySelector "lumi-table") \maybeTableRef ->
-        element (R.unsafeCreateDOMComponent "lumi-table")
-          { children:
-              case maybeTableRef of
-                Nothing       -> []
-                Just tableRef -> renderChildren tableRef :: Array JSX
-          }
+    renderLumiTable self columns renderChildren =
+      element (R.unsafeCreateDOMComponent "lumi-table")
+        { children:
+            [ if not self.state.showMenu
+                then empty
+                else guard (self.props.dropdownMenu) $ renderFilterDropdown
+                  { close: closeMenu self
+                  , reorderItems: setColumnSort self <<< map \{ name, hidden } ->
+                      { name: ColumnName name
+                      , hidden
+                      }
+                  , items: columns <#> \{ name, label, filterLabel, hidden } ->
+                      { name: un ColumnName name
+                      , label
+                      , filterLabel
+                      , hidden
+                      }
+                  , style: R.css self.state.menuStyle
+                  }
+            , selectorRef (QuerySelector "lumi-table-inner") \maybeTableRef ->
+                element (R.unsafeCreateDOMComponent "lumi-table-inner")
+                  { children:
+                      case maybeTableRef of
+                        Nothing       -> []
+                        Just tableRef -> renderChildren tableRef
+                  }
+            ]
+        }
 
     renderFilterDropdown { close, reorderItems, items, style } =
       selectorRef (QuerySelector "lumi-filter-dropdown") \maybeMenuRef ->
@@ -609,11 +613,18 @@ styles :: JSS
 styles = jss
   { "@global":
       { "lumi-table":
+          { width: "100%"
+          , maxHeight: "100%"
+          , display: "flex"
+          , flexFlow: "column"
+          , position: "relative"
+          }
+
+      , "lumi-table-inner":
           { width: "100%"
           , maxHeight: "100%"
           , overflow: "auto"
           , backgroundColor: cssStringHSLA colors.white
-          , position: "relative"
           , display: "block"
           , whiteSpace: "nowrap"