v4.6.0

Author: novykh

jest/setupForEach.js

@@ -6,3 +6,15 @@ afterEach(() => jest.clearAllTimers())
 
 jest.setTimeout(10000)
 jest.retryTimes(2)
+
+Element.prototype.getOriginalBoundingClientRect = Element.prototype.getBoundingClientRect
+Element.prototype.getBoundingClientRect = jest.fn(() => {
+  return {
+    width: 120,
+    height: 120,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  }
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.5.11",
+  "version": "4.6.0",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -42,20 +42,20 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@elastic/react-search-ui": "^1.21.1",
-    "@elastic/search-ui-site-search-connector": "^1.21.1",
-    "@prismicio/client": "7.3.1",
-    "@storybook/test": "^8.0.9",
+    "@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",
     "@styled-system/css": "^5.1.5",
-    "@tanstack/react-table": "^8.14.0",
-    "@tanstack/react-virtual": "3.2.0",
-    "axios": "^1.6.8",
+    "@tanstack/react-table": "^8.19.2",
+    "@tanstack/react-virtual": "3.8.1",
+    "axios": "^1.7.2",
     "polished": "^4.3.1",
     "react-portal": "^4.2.2",
     "react-select": "^5.8.0",
     "styled-system": "^5.1.5",
-    "throttle-debounce": "5.0.0",
-    "use-context-selector": "^1.4.4"
+    "throttle-debounce": "5.0.2",
+    "use-context-selector": "^2.0.0"
   },
   "peerDependencies": {
     "lodash": "*",
@@ -64,55 +64,55 @@
     "styled-components": "^5.3.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-transform-modules-umd": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
+    "@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.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-webpack5": "^8.0.9",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@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-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.1",
-    "eslint-plugin-react-hooks": "^4.6.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",
     "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.0.0",
+    "jsdom": "24.1.0",
     "lodash": "^4.17.21",
     "markdown-loader": "8.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^5.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^5.0.7",
     "sass-loader": "^14.2.1",
-    "storybook": "^8.0.9",
+    "storybook": "^8.1.11",
     "styled-components": "^5.3.9",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^4.0.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   }
 }

src/components/button/button.test.js

@@ -278,7 +278,7 @@ describe("Hollow Button", () => {
     expect(button).toHaveStyleRule("border-color", "#C0CACA", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#4A5757", {
+    expect(button).toHaveStyleRule("color", "#526161", {
       modifier: "&&",
     })
   })

src/components/drops/drop/index.test.js

@@ -7,9 +7,18 @@ const getStyle = el => {
   return { left, top, width }
 }
 
+beforeEach(() => {
+  Element.prototype.getBoundingClientRect = Element.prototype.getOriginalBoundingClientRect
+})
+
 it("renders", async () => {
   const div = document.createElement("div")
-  div.getBoundingClientRect = jest.fn(() => ({ bottom: 200, left: 300, width: 100, height: 100 }))
+  div.getBoundingClientRect = jest.fn(() => ({
+    bottom: 200,
+    left: 300,
+    width: 100,
+    height: 100,
+  }))
 
   const { getByTestId, getByText } = renderWithProviders(
     <Drop target={div} animation>
@@ -116,10 +125,10 @@ it("renders aligns", async () => {
     const { target, result } = positions[i]
     rerender(
       <Drop target={div} align={target}>
-        Drop content
+        Drop content {JSON.stringify(target)}
       </Drop>
     )
-    await waitFor(() => expect(getStyle(getByText("Drop content"))).toEqual(result))
+    await waitFor(() => expect(getStyle(getByText(/Drop content/))).toEqual(result))
   }
 })
 

src/components/drops/menu/index.test.js

@@ -48,15 +48,13 @@ it("closes on item click", () => {
 
 it("renders controlled", () => {
   const onChange = jest.fn()
-  const { getByText, queryByTestId, debug, getAllByRole } = render({
+  const { getByText, queryByTestId } = render({
     value: "durgen",
     onChange,
     label: null,
   })
 
   fireEvent.click(getByText("Tyler Durden"))
-  expect(getAllByRole("option")[1]).toHaveAttribute("disabled")
-
   fireEvent.click(getByText("Marla Singer"))
   expect(onChange).toBeCalledWith("singer")
   expect(queryByTestId("drop")).not.toBeInTheDocument()