Upgrade all

.github/workflows/tests.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: "18.18.2"
+          node-version: "20.12.2"
           cache: "yarn"
       - name: Install dependencies
         run: yarn

eslint.config.js

@@ -0,0 +1,38 @@
+const globals = require("globals")
+const pluginJs = require("@eslint/js")
+const pluginReact = require("eslint-plugin-react")
+const storybook = require("eslint-plugin-storybook")
+
+module.exports = [
+  { files: ["**/*.{js,mjs,cjs,jsx}"] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+        ...globals.es6,
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  ...storybook.configs["flat/recommended"],
+  {
+    rules: {
+      "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
+      "react/prop-types": "off",
+      "react/display-name": "off",
+    },
+  },
+  {
+    ignores: [
+      // Ignore dotfiles
+      ".*.js",
+      "node_modules/",
+      "dist/",
+      "!.storybook",
+    ],
+  },
+]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.8.18",
+  "version": "5.0.3",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -36,83 +36,81 @@
     "frontend",
     "ui-kit"
   ],
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@elastic/react-search-ui": "^1.21.5",
-    "@elastic/search-ui-site-search-connector": "^1.21.5",
-    "@prismicio/client": "7.6.0",
-    "@storybook/test": "^8.1.11",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@elastic/react-search-ui": "^1.22.2",
+    "@elastic/search-ui-site-search-connector": "^1.22.2",
+    "@prismicio/client": "7.16.1",
+    "@storybook/test": "^8.6.7",
     "@styled-system/css": "^5.1.5",
-    "@tanstack/react-table": "^8.19.2",
-    "@tanstack/react-virtual": "3.8.1",
-    "axios": "^1.7.2",
+    "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-virtual": "3.13.4",
+    "axios": "^1.8.3",
     "polished": "^4.3.1",
-    "react-portal": "^4.2.2",
-    "react-select": "^5.8.0",
+    "react-portal": "^4.3.0",
+    "react-select": "^5.10.1",
     "styled-system": "^5.1.5",
     "throttle-debounce": "5.0.2",
     "use-context-selector": "^2.0.0"
   },
   "peerDependencies": {
     "lodash": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.9"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=5.3.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "^7.26.10",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-transform-modules-umd": "^7.24.7",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "babel-loader": "^9.1.3",
+    "@babel/plugin-transform-modules-umd": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "clean-webpack-plugin": "^4.0.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "html-loader": "^5.0.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^0.11.6",
+    "globals": "^16.0.0",
+    "html-loader": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "install-peers-cli": "^2.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.1.1",
-    "jsdom": "24.1.0",
+    "jsdom": "26.0.0",
     "lodash": "^4.17.21",
     "markdown-loader": "8.0.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sass-loader": "^14.2.1",
-    "storybook": "^8.1.11",
-    "styled-components": "^5.3.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "sass-loader": "^16.0.5",
+    "storybook": "^8.6.7",
+    "styled-components": "^6.1.16",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^4.0.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4"
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
   }
 }

src/components/animation/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useMemo, useRef } from "react"
 import styled from "styled-components"
 import { Transition } from "react-transition-group"
 import makeAnimations from "./makeAnimations"
@@ -25,20 +25,28 @@ const Animation = ({
     []
   )
 
+  const ref = useRef()
+
   return (
-    <Transition in={isVisible} timeout={speed} mountOnEnter={!mount} unmountOnExit={!mount}>
+    <Transition
+      nodeRef={ref}
+      in={isVisible}
+      timeout={speed}
+      mountOnEnter={!mount}
+      unmountOnExit={!mount}
+    >
       {transition => {
         const transitionStyling = animations[transition]
 
         if (StyledContainer) {
           return (
-            <StyledContainer transitionStyling={transitionStyling} {...rest}>
+            <StyledContainer transitionStyling={transitionStyling} {...rest} ref={ref}>
               {children({ transition, transitionStyling })}
             </StyledContainer>
           )
         }
 
-        return children({ transition, transitionStyling })
+        return children({ transition, transitionStyling, ref })
       }}
     </Transition>
   )