@canonical/react-components 2.1.0 → 2.2.1

package/dist/esm/components/ConfirmationButton/ConfirmationButton.stories.js

@@ -97,4 +97,26 @@ export var BaseAppearance = {
     }));
   },
   name: "Base appearance"
+};
+export var WithPreModalOpenHook = {
+  render: () => {
+    var dontOpenModal = () => false;
+    var openModal = () => true;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ConfirmationButton, {
+      preModalOpenHook: dontOpenModal,
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+      }
+    }, "Don't open modal"), /*#__PURE__*/React.createElement(ConfirmationButton, {
+      preModalOpenHook: openModal,
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        children: /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")
+      }
+    }, "Open modal"));
+  },
+  name: "With preModalOpenHook handler"
 };

package/dist/esm/components/ContextualMenu/ContextualMenu.js

@@ -87,7 +87,7 @@ var ContextualMenu = _ref => {
   var updatePositionCoords = useCallback(() => {
     var parent = getPositionNode(wrapper.current, positionNode);
     if (!parent) {
-      return null;
+      return;
     }
     setPositionCoords(parent.getBoundingClientRect());
   }, [wrapper, positionNode]);
@@ -139,13 +139,13 @@ var ContextualMenu = _ref => {
       }
     }
   }, [closePortal, openPortal, visible, isOpen, previousVisible]);
-  var onResize = useCallback(evt => {
+  var onResize = useCallback(() => {
     var parent = getPositionNode(wrapper.current, positionNode);
     if (parent && !getPositionNodeVisible(parent)) {
       // Hide the menu if the item has become hidden. This might happen in
       // a responsive table when columns become hidden as the page
       // becomes smaller.
-      closePortal(evt);
+      closePortal();
     } else {
       // Update the coordinates so that the menu stays relative to the
       // toggle button.

package/dist/esm/components/ContextualMenu/ContextualMenu.stories.d.ts

@@ -11,3 +11,4 @@ export declare const Toggle: Story;
 export declare const OverflowingContainer: Story;
 export declare const ChildFunction: Story;
 export declare const ChildElement: Story;
+export declare const InsideModal: Story;

package/dist/esm/components/ContextualMenu/ContextualMenu.stories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Button from "../Button";
 import ContextualMenu from "./ContextualMenu";
+import Modal from "../Modal";
 var ScrollTemplate = args => /*#__PURE__*/React.createElement("div", {
   style: {
     maxWidth: "30rem",
@@ -97,4 +98,21 @@ export var ChildElement = {
     position: "right",
     toggleLabel: "Click me!"
   }
+};
+export var InsideModal = {
+  name: "Inside modal",
+  args: {
+    links: Array.from({
+      length: 5
+    }, (_, index) => ({
+      children: "Link ".concat(index + 1),
+      onClick: () => {}
+    })),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  },
+  render: args => /*#__PURE__*/React.createElement(Modal, {
+    title: "Contextual Menu inside Modal"
+  }, /*#__PURE__*/React.createElement(Template, args))
 };

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -39,5 +39,6 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
+export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => React.JSX.Element;
 export default ContextualMenuDropdown;

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -134,6 +134,21 @@ var getClosestScrollableParent = node => {
   }
   return document.body;
 };
+
+// nearest parents z-index that is not 0 or auto
+export var getNearestParentsZIndex = element => {
+  if (!window || !element) {
+    return "0";
+  }
+  var zIndex = window.getComputedStyle(element, null).getPropertyValue("z-index");
+  if (!element.parentElement) {
+    return zIndex;
+  }
+  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
+    return getNearestParentsZIndex(element.parentElement);
+  }
+  return zIndex;
+};
 var ContextualMenuDropdown = _ref => {
   var {
       adjustedPosition,
@@ -164,11 +179,11 @@ var ContextualMenuDropdown = _ref => {
   var updateVerticalPosition = useCallback(() => {
     var _dropdown$current$get;
     if (!positionNode) {
-      return null;
+      return;
     }
     var scrollableParent = getClosestScrollableParent(positionNode);
     if (!scrollableParent) {
-      return null;
+      return;
     }
     var scrollableParentRect = scrollableParent.getBoundingClientRect();
     var toggleRect = positionNode.getBoundingClientRect();
@@ -206,6 +221,17 @@ var ContextualMenuDropdown = _ref => {
   useEffect(() => {
     updateVerticalPosition();
   }, [updateVerticalPosition]);
+  useEffect(() => {
+    if (!dropdown.current) return;
+
+    // align z-index: when we are in a modal context, we want the dropdown to be above the modal
+    // apply the nearest parents z-index + 1
+    var zIndex = getNearestParentsZIndex(positionNode);
+    if (parseInt(zIndex) > 0) {
+      var _dropdown$current$par;
+      (_dropdown$current$par = dropdown.current.parentElement) === null || _dropdown$current$par === void 0 || _dropdown$current$par.style.setProperty("z-index", zIndex + 1);
+    }
+  }, [positionNode]);
   return (
     /*#__PURE__*/
     // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).

package/dist/esm/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -19,7 +19,6 @@ export declare const adjustDropdownHeightBelow: (dropdown: HTMLUListElement) =>
 export declare const adjustDropdownHeightAbove: (dropdown: HTMLUListElement, search: HTMLInputElement | null) => void;
 export declare const dropdownIsAbove: (dropdown: HTMLUListElement) => boolean;
 export declare const adjustDropdownHeight: (dropdown: HTMLUListElement | null, search: HTMLInputElement | null) => void;
-export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
 export declare const getOptionText: (option: CustomSelectOption) => string;
 declare const CustomSelectDropdown: FC<Props>;
 export default CustomSelectDropdown;

package/dist/esm/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.js

@@ -74,19 +74,6 @@ export var adjustDropdownHeight = (dropdown, search) => {
   }
   adjustDropdownHeightBelow(dropdown);
 };
-export var getNearestParentsZIndex = element => {
-  if (!document.defaultView || !element) {
-    return "0";
-  }
-  var zIndex = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
-  if (!element.parentElement) {
-    return zIndex;
-  }
-  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
-    return getNearestParentsZIndex(element.parentElement);
-  }
-  return zIndex;
-};
 export var getOptionText = option => {
   if (option.text) {
     return option.text;
@@ -124,14 +111,6 @@ var CustomSelectDropdown = _ref => {
       // align width with wrapper toggle width
       var toggleWidth = (_toggle$getBoundingCl = toggle === null || toggle === void 0 || (_toggle$getBoundingCl2 = toggle.getBoundingClientRect()) === null || _toggle$getBoundingCl2 === void 0 ? void 0 : _toggle$getBoundingCl2.width) !== null && _toggle$getBoundingCl !== void 0 ? _toggle$getBoundingCl : 0;
       dropdownRef.current.style.setProperty("min-width", "".concat(toggleWidth, "px"));
-
-      // align z-index: when we are in a modal context, we want the dropdown to be above the modal
-      // apply the nearest parents z-index + 1
-      var zIndex = getNearestParentsZIndex(toggle);
-      if (parseInt(zIndex) > 0) {
-        var _dropdownRef$current$;
-        (_dropdownRef$current$ = dropdownRef.current.parentElement) === null || _dropdownRef$current$ === void 0 || _dropdownRef$current$.style.setProperty("z-index", zIndex + 1);
-      }
     }
     setTimeout(() => {
       var _dropdownRef$current;

package/dist/esm/components/MainTable/MainTable.d.ts

@@ -26,7 +26,9 @@ export type MainTableCell = PropsWithSpread<{
      * The content of the table cell.
      */
     content?: ReactNode;
-}, Omit<TableCellProps, "children">>;
+}, Omit<TableCellProps, "children"> & {
+    [data: `data-${string}`]: string;
+}>;
 export type MainTableRow = PropsWithSpread<{
     /**
      * Optional class(es) to apply to the row.

package/dist/esm/components/ModularTable/ModularTable.d.ts

@@ -57,7 +57,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/esm/components/ModularTable/ModularTable.js

@@ -50,7 +50,7 @@ ModularTable components accepts `columns` and `data` arguments in the same forma
 `columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
 `data` - The data array that you want to display on the table.
 ### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
+Values passed to both of these params have to be memoized (for example via{" "}
   <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
   on every render. If we didn't use <code>React.useMemo</code>, the table would
   think it was receiving new data on every render and attempt to recalulate a

package/dist/esm/components/ModularTable/ModularTable.stories.js

@@ -37,14 +37,22 @@ export var Default = {
     columns: React.useMemo(() => [{
       Header: "ID",
       accessor: "buildId",
-      Cell: _ref2 => {
+      Cell: function (_Cell) {
+        function Cell(_x) {
+          return _Cell.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell.toString();
+        };
+        return Cell;
+      }(_ref2 => {
         var {
           value
         } = _ref2;
         return /*#__PURE__*/React.createElement("a", {
           href: "#test"
         }, "#", value);
-      }
+      })
     }, {
       Header: "Architecture",
       accessor: "arch"
@@ -55,7 +63,15 @@ export var Default = {
     }, {
       Header: "Result",
       accessor: "result",
-      Cell: _ref3 => {
+      Cell: function (_Cell2) {
+        function Cell(_x2) {
+          return _Cell2.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell2.toString();
+        };
+        return Cell;
+      }(_ref3 => {
         var {
           value
         } = _ref3;
@@ -67,7 +83,7 @@ export var Default = {
           default:
             return "Unknown";
         }
-      },
+      }),
       getCellIcon: _ref4 => {
         var {
           value
@@ -155,14 +171,22 @@ export var Sortable = {
       Header: "ID",
       accessor: "buildId",
       sortType: "basic",
-      Cell: _ref6 => {
+      Cell: function (_Cell3) {
+        function Cell(_x3) {
+          return _Cell3.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell3.toString();
+        };
+        return Cell;
+      }(_ref6 => {
         var {
           value
         } = _ref6;
         return /*#__PURE__*/React.createElement("a", {
           href: "#test"
         }, "#", value);
-      }
+      })
     }, {
       Header: "Architecture",
       accessor: "arch",
@@ -176,7 +200,15 @@ export var Sortable = {
       Header: "Result",
       accessor: "result",
       sortType: "basic",
-      Cell: _ref7 => {
+      Cell: function (_Cell4) {
+        function Cell(_x4) {
+          return _Cell4.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell4.toString();
+        };
+        return Cell;
+      }(_ref7 => {
         var {
           value
         } = _ref7;
@@ -188,7 +220,7 @@ export var Sortable = {
           default:
             return "Unknown";
         }
-      },
+      }),
       getCellIcon: _ref8 => {
         var {
           value
@@ -247,16 +279,32 @@ export var Subrows = {
       Header: "Flavour",
       accessor: "flavour",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/React.createElement("strong", null, props.value) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+      Cell: function (_Cell5) {
+        function Cell(_x5) {
+          return _Cell5.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell5.toString();
+        };
+        return Cell;
+      }(props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/React.createElement("strong", null, props.value) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
         type: "checkbox"
-      }), " ", props.value)
+      }), " ", props.value))
     }, {
       Header: "Scoops",
       accessor: "scoops",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/React.createElement("span", {
+      Cell: function (_Cell6) {
+        function Cell(_x6) {
+          return _Cell6.apply(this, arguments);
+        }
+        Cell.toString = function () {
+          return _Cell6.toString();
+        };
+        return Cell;
+      }(props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/React.createElement("span", {
         className: "u-text--muted"
-      }, props.value) : props.value
+      }, props.value) : props.value)
     }], [])
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ,

package/dist/esm/components/Navigation/Navigation.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, HTMLProps } from "react";
 import React from "react";
-import type { GenerateLink, NavItem, LogoProps } from "./types";
+import { GenerateLink, NavItem, LogoProps } from "./types";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { SearchBoxProps } from "../SearchBox";
 import { Theme } from "../../enums";

package/dist/esm/components/Notification/Notification.d.ts

@@ -27,7 +27,7 @@ export type Props = PropsWithSpread<{
     /**
      * A list of up to two actions that the notification can perform.
      */
-    actions?: NotificationAction[];
+    actions?: (NotificationAction | ReactNode)[];
     /**
      * Whether the notification should not have a border.
      */

package/dist/esm/components/Notification/Notification.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import Button, { ButtonAppearance } from "../Button";
-import { IS_DEV } from "../../utils";
+import { IS_DEV, isReactNode } from "../../utils";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Close"] = "Close notification";
   return Label;
@@ -97,6 +97,7 @@ var Notification = _ref => {
   }, title), inline && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002"), /*#__PURE__*/React.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: "p-notification__close",
     "data-testid": "notification-close-button",
     onClick: onDismiss
@@ -108,7 +109,8 @@ var Notification = _ref => {
     "data-testid": "notification-timestamp"
   }, timestamp), hasActions ? /*#__PURE__*/React.createElement("div", {
     className: "p-notification__actions"
-  }, actions.map((action, i) => /*#__PURE__*/React.createElement(Button, {
+  }, actions.map((action, i) => isReactNode(action) ? action : /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     appearance: ButtonAppearance.LINK,
     className: "p-notification__action",
     "data-testid": "notification-action",

package/dist/esm/components/NotificationProvider/NotificationProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useRef, useState } from "react";
-import isEqual from "lodash/isEqual";
+import fastDeepEqual from "fast-deep-equal";
 import { info as _info, failure as _failure, success as _success, queue } from "./messageBuilder";
 import Notification, { DefaultTitles } from "../Notification/Notification";
 var NotifyContext = /*#__PURE__*/createContext({
@@ -20,7 +20,7 @@ export var NotificationProvider = _ref => {
   var [notification, setNotification] = useState(null);
   var clear = () => notification !== null && setNotification(null);
   var setDeduplicated = value => {
-    if (!isEqual(value, notification)) {
+    if (!fastDeepEqual(value, notification)) {
       setNotification(value);
     }
     return value;

package/dist/esm/components/SearchAndFilter/SearchAndFilter.js

@@ -52,9 +52,6 @@ var SearchAndFilter = _ref => {
       mounted = false;
     };
   }, [searchData, returnSearchData]);
-  var searchOnChange = searchTerm => {
-    setSearchTerm(searchTerm);
-  };
 
   // Hide manual input form field when search container is inactive
   useEffect(() => {
@@ -236,7 +233,7 @@ var SearchAndFilter = _ref => {
     className: "p-search-and-filter__input",
     id: "search-and-filter-input",
     name: "search",
-    onChange: e => searchOnChange(e.target.value),
+    onChange: e => setSearchTerm(e.target.value),
     placeholder: placeholder,
     type: "search",
     value: searchTerm

package/dist/esm/components/SearchAndFilter/utils.d.ts

@@ -1,13 +1,14 @@
+import { SearchAndFilterChip } from "./types";
 /**
  * Return number of overflowing chips given a row threshold
  * @param {array} chips - An array of chips
  * @param {Integer} overflowRowLimit - Number of rows to show before counting
  * overflow
  */
-export declare const overflowingChipsCount: (chips: any, overflowRowLimit: any) => number;
+export declare const overflowingChipsCount: (chips: NodeListOf<HTMLElement>, overflowRowLimit: number) => number;
 /**
  * Check if supplied chip object already exists in searchData prop
  * @param {Object} chip - A chip object {lead: 'foo', value: 'bar'}
  * @param {Array} existingArr - An array of chip objects
  */
-export declare const isChipInArray: (chip: any, existingArr: any) => any;
+export declare const isChipInArray: (chip: SearchAndFilterChip, existingArr: SearchAndFilterChip[]) => boolean;

package/dist/esm/components/SideNavigation/SideNavigation.js

@@ -58,7 +58,7 @@ var generateItems = (groups, listClassName, linkComponent, dark) => {
 };
 var getHasIcons = groups => groups === null || groups === void 0 ? void 0 : groups.some(group => {
   var _ref;
-  return (_ref = group && "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon);
+  return group && ((_ref = "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon));
 });
 
 /**

package/dist/esm/components/Tooltip/Tooltip.js

@@ -194,7 +194,7 @@ var Tooltip = _ref => {
       return;
     }
     e.target.focus();
-    openPortal(e);
+    openPortal();
   };
   var delayedOpenPortal = useCallback(() => {
     if (isOpen) {

package/dist/esm/hooks/useWindowFitment.js

@@ -23,8 +23,8 @@ export var useWindowFitment = function useWindowFitment(targetNode, referenceNod
         referenceCoordinates = {
           // The mouse is a single point so use 0 for the height and width.
           height: 0,
-          left: evt.x || 0,
-          top: evt.y || 0,
+          left: ("x" in evt && typeof evt.x === "number" ? evt.x : null) || 0,
+          top: ("y" in evt && typeof evt.y === "number" ? evt.y : null) || 0,
           width: 0
         };
       }

package/dist/hooks/useWindowFitment.js

@@ -29,8 +29,8 @@ const useWindowFitment = function (targetNode, referenceNode, callback) {
         referenceCoordinates = {
           // The mouse is a single point so use 0 for the height and width.
           height: 0,
-          left: evt.x || 0,
-          top: evt.y || 0,
+          left: ("x" in evt && typeof evt.x === "number" ? evt.x : null) || 0,
+          top: ("y" in evt && typeof evt.y === "number" ? evt.y : null) || 0,
           width: 0
         };
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -26,87 +26,86 @@
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
     "@babel/cli": "7.26.4",
-    "@babel/eslint-parser": "7.26.5",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.26.0",
+    "@babel/eslint-parser": "7.26.8",
+    "@babel/plugin-transform-class-properties": "7.25.9",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@eslint/compat": "1.2.5",
+    "@eslint/compat": "1.2.6",
     "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.18.0",
-    "@percy/cli": "1.30.6",
+    "@eslint/js": "9.20.0",
+    "@percy/cli": "1.30.7",
     "@percy/storybook": "6.0.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.5.0",
-    "@storybook/addon-onboarding": "8.5.0",
+    "@storybook/addon-a11y": "8.5.6",
+    "@storybook/addon-essentials": "8.5.6",
+    "@storybook/addon-interactions": "8.5.6",
+    "@storybook/addon-links": "8.5.6",
+    "@storybook/addon-onboarding": "8.5.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-webpack5": "8.5.0",
-    "@testing-library/cypress": "10.0.2",
+    "@storybook/blocks": "8.5.6",
+    "@storybook/react": "8.5.6",
+    "@storybook/react-webpack5": "8.5.6",
+    "@testing-library/cypress": "10.0.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/lodash.isequal": "4",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "9.1.2",
     "css-loader": "7.1.2",
-    "cypress": "14.0.1",
+    "cypress": "14.0.3",
     "deepmerge": "4.3.1",
-    "eslint": "9.18.0",
+    "eslint": "9.20.1",
     "eslint-config-prettier": "10.0.1",
     "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.2",
+    "eslint-plugin-prettier": "5.2.3",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.2",
+    "eslint-plugin-storybook": "0.11.3",
     "eslint-plugin-testing-library": "7.1.1",
     "formik": "2.4.6",
     "jest": "29.7.0",
     "npm-package-json-lint": "8.0.0",
-    "prettier": "3.4.2",
+    "prettier": "3.5.1",
     "react": "19.0.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "19.0.0",
-    "sass": "1.83.4",
-    "sass-loader": "16.0.4",
-    "semantic-release": "24.2.1",
-    "storybook": "8.4.7",
+    "sass": "1.85.0",
+    "sass-loader": "16.0.5",
+    "semantic-release": "24.2.3",
+    "storybook": "8.5.6",
     "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
-    "stylelint": "16.13.2",
+    "stylelint": "16.14.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-prettier": "5.0.2",
+    "stylelint-prettier": "5.0.3",
     "ts-jest": "29.2.5",
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
-    "typescript-eslint": "8.20.0",
-    "vanilla-framework": "4.20.2",
+    "typescript-eslint": "8.24.1",
+    "vanilla-framework": "4.21.0",
     "wait-on": "8.0.2",
-    "webpack": "5.97.1"
+    "webpack": "5.98.0"
   },
   "dependencies": {
     "@types/jest": "29.5.14",
-    "@types/node": "20.17.13",
-    "@types/react": "19.0.8",
-    "@types/react-dom": "19.0.3",
+    "@types/node": "20.17.19",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/react-table": "7.7.20",
     "classnames": "2.5.1",
+    "fast-deep-equal": "3.1.3",
     "jest-environment-jsdom": "29.7.0",
-    "lodash.isequal": "4.5.0",
     "prop-types": "15.8.1",
     "react-table": "7.8.0"
   },