v4.6.1

Author: novykh

package.json

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

src/components/table/header/index.js

@@ -20,6 +20,7 @@ const Header = ({
   children,
   bulkActions,
   enableColumnVisibility,
+  enableCustomSearch,
 }) => {
   tableMeta = useMemo(
     () => (typeof tableMeta === "function" ? tableMeta({}, {}, null) : tableMeta),
@@ -49,6 +50,7 @@ const Header = ({
             iconLeft={<Icon color="textLite" name="magnify" height="18px" width="18px" />}
             onChange={onSearch}
             placeholder={searchPlaceholder}
+            controlled={enableCustomSearch}
             {...tableMeta.searchStyles}
           />
         </Flex>

src/components/table/table.js

@@ -251,6 +251,7 @@ const Table = memo(
           dataColumns={dataColumns}
           enableColumnVisibility={enableColumnVisibility}
           bulkActions={bulkActions}
+          enableCustomSearch={enableCustomSearch}
         >
           {headerChildren || null}
           <HeaderActions

src/organisms/documentation/search/input.js

@@ -1,9 +1,9 @@
-import React, { useState, useCallback } from "react"
+import React, { useEffect, useState, useCallback } from "react"
 import useDebounce from "@/hooks/useDebounce"
 import { TextInput } from "@/components/input"
 import { Icon } from "@/components/icon"
 
-const SearchInput = ({ value: defaultValue, setSearchTerm, setSearchView }) => {
+const SearchInput = ({ value: defaultValue, setSearchTerm, setSearchView, controlled }) => {
   const [value, setValue] = useState(defaultValue)
 
   useDebounce(
@@ -18,6 +18,12 @@ const SearchInput = ({ value: defaultValue, setSearchTerm, setSearchView }) => {
 
   const onChange = useCallback(e => setValue(e.target.value), [])
 
+  useEffect(() => {
+    if (!controlled) return
+
+    setValue(defaultValue)
+  }, [defaultValue])
+
   return (
     <TextInput
       value={value}