chore(dependencies): Update all packages to latest version

package.json

@@ -25,83 +25,84 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.25.6",
-    "@babel/eslint-parser": "7.25.1",
+    "@babel/cli": "7.25.9",
+    "@babel/eslint-parser": "7.25.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@eslint/compat": "1.1.1",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
+    "@babel/preset-typescript": "7.26.0",
+    "@eslint/compat": "1.2.2",
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.1",
-    "@percy/cli": "1.29.3",
+    "@eslint/js": "9.13.0",
+    "@percy/cli": "1.30.1",
     "@percy/storybook": "6.0.2",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "8.2.9",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/addon-onboarding": "8.2.9",
+    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-onboarding": "8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/blocks": "8.2.9",
-    "@storybook/react": "8.2.9",
-    "@storybook/react-webpack5": "8.2.9",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/react": "8.3.6",
+    "@storybook/react-webpack5": "8.3.6",
     "@testing-library/cypress": "10.0.2",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.isequal": "4",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
-    "concurrently": "8.2.2",
+    "concurrently": "9.0.1",
     "css-loader": "7.1.2",
-    "cypress": "13.14.1",
+    "cypress": "13.15.1",
     "deepmerge": "4.3.1",
-    "eslint": "9.9.1",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "3.5.0",
+    "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.2",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-testing-library": "6.3.0",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-storybook": "0.10.1",
+    "eslint-plugin-testing-library": "6.4.0",
     "formik": "2.4.6",
     "jest": "29.7.0",
     "npm-package-json-lint": "8.0.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.3.1",
-    "sass": "1.79.4",
-    "sass-loader": "16.0.1",
-    "semantic-release": "24.1.0",
-    "storybook": "8.2.9",
+    "sass": "1.80.5",
+    "sass-loader": "16.0.2",
+    "semantic-release": "24.2.0",
+    "storybook": "8.3.6",
     "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
-    "stylelint": "16.9.0",
+    "stylelint": "16.10.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.2",
     "ts-jest": "29.2.5",
     "tsc-alias": "1.8.10",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.4.0",
-    "vanilla-framework": "4.18.0",
-    "wait-on": "8.0.0",
-    "webpack": "5.94.0"
+    "typescript": "5.6.3",
+    "typescript-eslint": "8.12.2",
+    "vanilla-framework": "4.18.2",
+    "wait-on": "8.0.1",
+    "webpack": "5.95.0"
   },
   "dependencies": {
-    "@types/jest": "29.5.12",
-    "@types/node": "20.16.3",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
+    "@types/jest": "29.5.14",
+    "@types/node": "22.8.4",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@types/react-table": "7.7.20",
     "classnames": "2.5.1",
     "jest-environment-jsdom": "29.7.0",

src/components/ContextualMenu/ContextualMenu.stories.tsx

@@ -14,14 +14,24 @@ const ScrollTemplate = (args) => (
     }}
   >
     <ContextualMenu {...args} />
-    {Array(3).fill(
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-        cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis,
-        sequi voluptates architecto ipsa dolorum eaque rem expedita inventore
-        voluptas odit aspernatur alias molestias facere.
-      </p>,
-    )}
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum
+      dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi
+      voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas
+      odit aspernatur alias molestias facere.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum
+      dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi
+      voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas
+      odit aspernatur alias molestias facere.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum
+      dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi
+      voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas
+      odit aspernatur alias molestias facere.
+    </p>
     <ContextualMenu {...args} />
   </div>
 );

src/components/ModularTable/ModularTable.stories.tsx

@@ -344,7 +344,8 @@ export const Subrows: Story = {
 
 /**
 Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
-```
+
+```js
 export const getSampleData = (i = 0) => [
   { data: ++i * 100 + i },
   { data: ++i * 100 + i },

src/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.tsx

@@ -6,16 +6,12 @@ import SideNavigation from "../SideNavigation";
 import SideNavigationItem from "./SideNavigationItem";
 import SideNavigationText from "../SideNavigationText";
 
+const Template = (args) => (
+  <SideNavigation dark={false} items={[{ items: [args] }]} />
+);
+
 const meta: Meta<typeof SideNavigationItem> = {
-  component: SideNavigationItem,
-  render: (args) => (
-    <SideNavigation
-      dark={false}
-      items={[
-        { items: [<SideNavigationItem key="item" {...args} dark={false} />] },
-      ]}
-    />
-  ),
+  component: Template,
   tags: ["autodocs"],
 };
 

src/components/Textarea/Textarea.tsx

@@ -22,6 +22,10 @@ export type Props = PropsWithSpread<
      * The content for caution validation.
      */
     caution?: ReactNode;
+    /**
+     * The default value for the field.
+     */
+    defaultValue?: string;
     /**
      * Optional class(es) to pass to the textarea element.
      */
@@ -86,6 +90,7 @@ export type Props = PropsWithSpread<
 const Textarea = ({
   caution,
   className,
+  defaultValue = "",
   error,
   grow = false,
   help,
@@ -106,7 +111,7 @@ const Textarea = ({
   const validationId = useId();
   const helpId = useId();
   const hasError = !!error;
-  const [innerValue, setInnervalue] = useState(props.defaultValue);
+  const [innerValue, setInnervalue] = useState(defaultValue);
   const defaultTextAreaId = useId();
   const textAreaId = id || defaultTextAreaId;