Minor fixes.

Author: novykh

package.json

@@ -33,7 +33,6 @@
   "dependencies": {
     "@elastic/react-search-ui": "^1.15.0",
     "@elastic/search-ui-site-search-connector": "^1.15.0",
-    "@netdata/react-filter-box": "^1.0.0",
     "@prismicio/client": "5.1.1",
     "@styled-system/css": "^5.1.5",
     "@tanstack/react-table": "^8.5.11",
@@ -42,6 +41,7 @@
     "polished": "^4.2.2",
     "ramda": "^0.28.0",
     "react-beautiful-dnd": "^13.1.0",
+    "react-filter-box": "^3.4.3",
     "react-portal": "^4.2.2",
     "react-select": "^5.4.0",
     "react-table": "^7.8.0",

src/components/button/button.stories.js

@@ -9,7 +9,7 @@ import { Button, IconButton } from "."
 import readme from "./README.md"
 import { iconsList } from "src/components/icon"
 
-const buttonStory = storiesOf("Input/Button", module)
+const buttonStory = storiesOf("Inputs/Button", module)
 const icons = Object.keys(iconsList)
 
 const subData = {

src/components/checkbox/checkbox.stories.js

@@ -7,7 +7,7 @@ import { getGutterHeight } from "src/theme/utils"
 import { readmeCleanup } from "utils/readme"
 import readme from "./README.md"
 
-const checkBoxStory = storiesOf("Input/Checkbox", module)
+const checkBoxStory = storiesOf("Inputs/Checkbox", module)
 
 const position = ["left", "right"]
 

src/components/collapsible/index.stories.js

@@ -9,7 +9,7 @@ import { Button } from "src/components/button"
 import readme from "./README.md"
 import Collapsible from "./index"
 
-const story = storiesOf("COMPONENTS|Collapsible", module)
+const story = storiesOf("Utils/Collapsible", module)
 
 const subData = {
   readme: {

src/components/confirmation-dialog/confirmation-dialog.stories.js

@@ -4,7 +4,7 @@ import { boolean } from "@storybook/addon-knobs"
 
 import ConfirmationDialog from "./confirmation-dialog"
 
-const Story = storiesOf("COMPONENTS|ConfirmationDialog")
+const Story = storiesOf("Utils/ConfirmationDialog", module)
 
 Story.add("Confirmation dialog", () => {
   return (

src/components/drops/tooltip/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode, FC } from "react"
 import { DropProps } from "../drop"
 
 export interface PopoverProps {
@@ -12,7 +12,7 @@ export interface PopoverProps {
   [key: string]: any
 }
 
-declare const Popover: React.FC<PopoverProps & JSX.IntrinsicElements["div"]>
+declare const Popover: FC<PopoverProps & JSX.IntrinsicElements["div"]>
 
 export { Popover }
 

src/components/drops/tooltip/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, Fragment, useLayoutEffect, useState, useRef } from "react"
+import React, { forwardRef, Fragment, useLayoutEffect } from "react"
 import Drop from "src/components/drops/drop"
 import useForwardRef from "src/hooks/use-forward-ref"
 import useToggle from "src/hooks/use-toggle"
@@ -21,28 +21,19 @@ const Tooltip = forwardRef(
       disabled,
       zIndex = 80,
       children,
-      onClickOutside,
       allowHoverOnTooltip,
       ...rest
     },
     parentRef
   ) => {
     const id = useDescribedId(rest["aria-describedby"])
     const [isOpen, , open, close] = useToggle(false)
-    const [hasPopUpHovered, setHasPopUpHovered] = useState(false)
-    const closeWithDelayTimeout = useRef()
 
     const [ref, setRef] = useForwardRef(parentRef)
 
-    const handleCloseWithDelay = () => {
-      closeWithDelayTimeout.current = setTimeout(() => {
-        close()
-      }, 200)
-    }
-
     const targetElement = useClonedChildren(children, setRef, {
       onMouseEnter: open,
-      onMouseLeave: allowHoverOnTooltip ? handleCloseWithDelay : close,
+      onMouseLeave: !allowHoverOnTooltip ? close : undefined,
       onFocus: open,
       onBlur: close,
       ...(isOpen && { "aria-describedby": id }),
@@ -53,12 +44,6 @@ const Tooltip = forwardRef(
       if (ref.current && initialOpen) open()
     }, [])
 
-    useLayoutEffect(() => {
-      if (hasPopUpHovered && closeWithDelayTimeout.current) {
-        clearTimeout(closeWithDelayTimeout.current)
-      }
-    }, [hasPopUpHovered])
-
     if (!content) {
       return children
     }
@@ -72,11 +57,7 @@ const Tooltip = forwardRef(
             hideShadow
             id={id}
             onClickOutside={close}
-            onMouseLeave={() => {
-              setHasPopUpHovered(false)
-              close()
-            }}
-            onMouseEnter={() => setHasPopUpHovered(true)}
+            onMouseLeave={close}
             target={ref.current}
             {...dropProps}
             animation={animation}

src/components/filter-box/filter-box.stories.js

@@ -6,7 +6,7 @@ import { FilterBox, FilterBoxProcessing } from "."
 import { Text } from "src/components/typography"
 import readme from "./README.md"
 
-const filterBoxStory = storiesOf("Input/Filter Box", module)
+const filterBoxStory = storiesOf("Inputs/Filter Box", module)
 
 const subData = {
   readme: {