Merge branch 'master' into master

Author: dianecloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.1.8",
+  "version": "5.1.11",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/input/styled.js

@@ -32,6 +32,7 @@ export const Input = styled(Flex).attrs(props => ({
   ${({ hasIconLeft }) => hasIconLeft && "padding-left: 24px;"}
   ${({ hasIconRight, hasIndicator }) =>
     (hasIconRight || hasIndicator) && `padding-right: ${hasIconRight && hasIndicator ? 48 : 24}px;`}
+  ${({ textAlign }) => (textAlign ? `text-align: ${textAlign};` : "")}
 
   &::placeholder {
     font-size: 12px;

src/components/table/body/row.js

@@ -85,11 +85,7 @@ export default memo(
     GroupRow,
     ...rest
   }) => {
-    const { columnVisibility } = useTableState(rerenderSelector)
-
-    const leftHeaders = useMemo(() => table.getLeftLeafHeaders(), [table, columnVisibility])
-    const centerHeaders = useMemo(() => table.getCenterLeafHeaders(), [table, columnVisibility])
-    const rightHeaders = useMemo(() => table.getRightLeafHeaders(), [table, columnVisibility])
+    useTableState(rerenderSelector)
 
     const isClickable = useMemo(() => {
       if (typeof onClickRow !== "function") return false
@@ -153,7 +149,7 @@ export default memo(
                     row={row}
                     key={cell.id}
                     testPrefix={testPrefix}
-                    header={leftHeaders[index]}
+                    header={table.getLeftLeafHeaders()[index]}
                     {...rest}
                   />
                 ))}
@@ -175,7 +171,7 @@ export default memo(
                     row={row}
                     key={cell.id}
                     testPrefix={testPrefix}
-                    header={centerHeaders[index]}
+                    header={table.getCenterLeafHeaders()[index]}
                     {...rest}
                   />
                 ))}
@@ -202,7 +198,7 @@ export default memo(
                     row={row}
                     key={cell.id}
                     testPrefix={testPrefix}
-                    header={rightHeaders[index]}
+                    header={table.getRightLeafHeaders()[index]}
                     {...rest}
                   />
                 ))}

src/components/tabs/tabs.js

@@ -11,6 +11,7 @@ export const Tabs = ({
   TabContent = Fragment,
   noDefaultBorder,
   tabsProps,
+  tabHeaderProps,
   tabContentProps,
   ref,
   ...rest
@@ -29,7 +30,7 @@ export const Tabs = ({
 
   return (
     <StyledTabsWrapper className={className} {...rest} ref={ref}>
-      <TabsHeader>
+      <TabsHeader {...tabHeaderProps}>
         <StyledTabs className="tabs" noDefaultBorder={noDefaultBorder} {...tabsProps}>
           {nav}
         </StyledTabs>