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: {

src/components/icon/assets/checkmark.svg

@@ -81,6 +81,7 @@ import documentation from "./assets/documentation.svg"
 import dot from "./assets/dot.svg"
 import dots_2x3 from "./assets/dots_2x3.svg"
 import download from "./assets/download.svg"
+import edit from "./assets/edit.svg"
 import error from "./assets/error.svg"
 import exclamation from "./assets/exclamation.svg"
 import expand from "./assets/expand.svg"
@@ -392,6 +393,7 @@ export const iconsList = {
   dot,
   dots_2x3,
   download,
+  edit,
   error,
   exclamation,
   expand,

src/components/icon/assets/edit.svg

@@ -10,7 +10,7 @@ import { Button } from "src/components/button"
 import { Icon } from "src/components/icon"
 import readme from "./README.md"
 
-const inputStory = storiesOf("Components|Controls/TextInput", module)
+const inputStory = storiesOf("Inputs/TextInput", module)
 
 const subData = {
   readme: {

src/components/icon/icons-list.js

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { storiesOf } from "@storybook/react"
 import RangeInput from "./index"
 
-const rangeStory = storiesOf("Components|Controls/InputRange", module)
+const rangeStory = storiesOf("Inputs/InputRange", module)
 
 rangeStory.add("Input Range", () => {
   const [value, setValue] = useState(0.1)

src/components/input/input.stories.js

@@ -5,7 +5,7 @@ import Modal, { ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseBut
 import Flex from "../templates/flex"
 import { Button } from "../button"
 
-const modalStory = storiesOf("Utils/Modal")
+const modalStory = storiesOf("Utils/Modal", module)
 
 modalStory.add("Modal", () => {
   return (

src/components/input/range/range.stories.js

@@ -5,7 +5,7 @@ import Flex from "src/components/templates/flex"
 import Pill from "./index"
 import MasterCard from "./mastercard"
 
-const story = storiesOf("Atoms/Pills")
+const story = storiesOf("Atoms/Pills", module)
 
 const Custom = () => (
   <Flex gap={4}>

src/components/modal/index.stories.js

@@ -6,7 +6,7 @@ import readme from "./README.md"
 
 import RadioButton from "./index"
 
-const radioButtonStory = storiesOf("Input/RadioButton", module)
+const radioButtonStory = storiesOf("Inputs/RadioButton", module)
 
 const subData = {
   readme: {

src/components/pill/index.stories.js

@@ -3,7 +3,7 @@ import React, { useRef } from "react"
 import BulkAction from "./bulkAction"
 import ColumnsMenu from "./columnsMenu" //todo refactor this as right now is used only for the dropdown for column visibility
 
-const ActionWithDropdown = ({
+const ColumnVisibilityAction = ({
   alwaysEnabled,
   columnPinning = {},
   enableColumnPinning,
@@ -73,4 +73,4 @@ const ActionWithDropdown = ({
   )
 }
 
-export default ActionWithDropdown
+export default ColumnVisibilityAction

src/components/radio-button/index.stories.js

@@ -2,7 +2,19 @@ import React from "react"
 import Drop from "src/components/drops/drop/index.js"
 import Flex from "src/components/templates/flex"
 import { Text } from "src/components/typography"
-import ColumnsMenuItem from "src/components/tableV2/components/columnsMenuItem"
+import { Checkbox } from "src/components/checkbox"
+import { ListItem } from "src/components/typography"
+
+const ColumnsMenuItem = ({ column, disabled }) => (
+  <Flex alignItems="center" as={ListItem} justifyContent="between" padding={[1]}>
+    <Checkbox
+      checked={column.getIsVisible()}
+      disabled={disabled}
+      label={column.id}
+      onChange={column.getToggleVisibilityHandler()}
+    />
+  </Flex>
+)
 
 const ColumnsMenu = ({ parentRef, isOpen, columns, onClose, pinnedColumns }) => {
   if (parentRef.current && isOpen)