Update dependencies, fix info group displaying 0s

.storybook/main.ts

@@ -24,5 +24,10 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    }
+  }
 };
 export default config;

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/DiamondLightSource/web-ui-components.git"
   },
-  "version": "2.2.2",
+  "version": "2.2.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -60,72 +60,77 @@
     ]
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.3.6",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@chakra-ui/react": "^2.10.9",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "framer-motion": "^11.11.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0 || ^18.0.0",
+    "react-dom": "^19.2.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-import-assertions": "^7.27.1",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@chakra-ui/react": "^2.10.9",
-    "@chakra-ui/storybook-addon": "^5.2.7",
+    "@chakra-ui/storybook-addon": "5.2.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-actions": "^8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/blocks": "^8.6.14",
+    "@storybook/components": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
     "@storybook/node-logger": "^8.6.14",
+    "@storybook/preview-api": "^8.6.14",
     "@storybook/react": "^8.6.14",
     "@storybook/react-webpack5": "^8.6.14",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/types": "^8.6.14",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.18.0",
-    "@types/react-dom": "^19.1.9",
-    "babel-jest": "^29.7.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.18.13",
+    "@types/react-dom": "^18.3.1",
+    "babel-jest": "^30.2.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.1.0",
-    "browserslist": "^4.25.4",
+    "browserslist": "^4.27.0",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^4.2.0",
     "framer-motion": "^11.18.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-resolve": "^29.7.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-resolve": "^30.2.0",
     "msw": "2.4.11",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "resolve": "^1.22.10",
-    "rollup": "^4.50.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "resolve": "^1.22.11",
+    "rollup": "^4.52.5",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.6.14",
-    "ts-jest": "^29.4.1",
+    "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "undici": "^5.29.0",
-    "webpack": "^5.101.3"
+    "webpack": "^5.102.1"
   },
   "jest": {
     "clearMocks": true,

rollup.config.mjs

@@ -23,6 +23,9 @@ const config = [
       commonjs(),
       typescript({
         exclude: ["**/*.stories.*", "**/*.test.*"],
+        compilerOptions: {
+        outDir: 'dist',
+        }
       }),
       postcss({
         extensions: [".css"],
@@ -46,6 +49,9 @@ const config = [
       commonjs(),
       typescript({
         exclude: ["**/*.stories.*", "**/*.test.*"],
+        compilerOptions: {
+        outDir: 'dist',
+        }
       }),
       postcss({
         extensions: [".css"],

src/stories/control/User.test.tsx

@@ -23,7 +23,7 @@ describe("User", () => {
 
     fireEvent.click(loginButton);
 
-    expect(loginCallback).toBeCalled();
+    expect(loginCallback).toHaveBeenCalled();
   });
 
   it("should fire logout callback when button is clicked", () => {
@@ -35,7 +35,7 @@ describe("User", () => {
 
     fireEvent.click(logoutButton);
 
-    expect(logoutCallback).toBeCalled();
+    expect(logoutCallback).toHaveBeenCalled();
   });
 
   it("should display name and FedID", () => {

src/stories/navigation/Flipper.test.tsx

@@ -104,7 +104,7 @@ describe("Flipper", () => {
     const input = screen.getByLabelText("Previous Page");
     fireEvent.click(input);
 
-    expect(mockCallback).toBeCalledWith(111);
+    expect(mockCallback).toHaveBeenCalledWith(111);
   });
 
   it("should call callback when page changes (debounced)", async () => {
@@ -114,7 +114,7 @@ describe("Flipper", () => {
     const input = screen.getByLabelText("Previous Page");
     fireEvent.click(input);
 
-    await waitFor(() => expect(mockCallback).toBeCalledWith(111));
+    await waitFor(() => expect(mockCallback).toHaveBeenCalledWith(111));
   });
 
   it("should not change page if page is controlled externally", () => {
@@ -124,7 +124,7 @@ describe("Flipper", () => {
     const input = screen.getByLabelText("Previous Page");
     fireEvent.click(input);
 
-    expect(mockCallback).toBeCalledWith(111);
+    expect(mockCallback).toHaveBeenCalledWith(111);
     expect(screen.getByLabelText("Current Page")).not.toHaveAttribute("value", "111");
   });
 });

src/stories/visualisation/Image.test.tsx

@@ -34,7 +34,7 @@ describe("Image", () => {
     fireEvent.click(title);
 
     await waitFor(() => {
-      expect(onClick).toBeCalled();
+      expect(onClick).toHaveBeenCalled();
     });
   });
 

src/stories/visualisation/InfoGroup.tsx

@@ -26,9 +26,9 @@ export const InfoGroup = ({ info, height = "100%", cols = 2 }: InfoProps) => (
               bg='diamond.100'
             >
               <Text variant='infoGroupText' as='b'>{`${box.label}: `}</Text>
-              <Text aria-label={`${box.label} Value`} variant='infoGroupText'>{`${
-                box.value || "?"
-              }`}</Text>
+              <Text aria-label={`${box.label} Value`} variant='infoGroupText'>{
+                box.value ?? "?"
+              }</Text>
             </Box>
           </GridItem>
         ))}

src/stories/visualisation/Table.test.tsx

@@ -59,6 +59,6 @@ describe("GenericListing", () => {
     );
 
     fireEvent.click(screen.getByRole("cell", { name: /value4/i }));
-    expect(callbackMock).toBeCalledWith({ key1: "value4", key2: "value5", key3: "value6" }, 1);
+    expect(callbackMock).toHaveBeenCalledWith({ key1: "value4", key2: "value5", key3: "value6" }, 1);
   });
 });