@canonical/react-components 2.1.0 → 2.2.0

package/dist/components/Card/Card.stories.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
-import Card from "./";
+import Card, { CardProps } from "./";
 declare const meta: Meta<typeof Card>;
 export default meta;
 export declare const Default: {
@@ -29,5 +29,5 @@ export declare const Overlay: {
         overlay: boolean;
         children: string;
     };
-    render: (args: any) => React.JSX.Element;
+    render: (args: CardProps) => React.JSX.Element;
 };

package/dist/components/CodeSnippet/CodeSnippet.stories.js

@@ -105,13 +105,14 @@ const WrapLines = exports.WrapLines = {
  */
 const Dropdown = exports.Dropdown = {
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [lang, setLang] = (0, _react.useState)("html");
     const code = {
       js: "console.log(\"Example 1\");",
       css: ".p-heading--2 { color: red; }",
       html: "<h1 class=\"p-heading--2\">How to use code snippets</h1>"
     };
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [lang, setLang] = (0, _react.useState)("html");
     return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
       blocks: [{
         code: code[lang],

package/dist/components/Col/Col.stories.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import Col from "./Col";
-declare const Template: (args: any) => React.JSX.Element;
+import { ColProps } from ".";
+declare const Template: (args: ColProps) => React.JSX.Element;
 declare const meta: Meta<typeof Template>;
 export default meta;
 type Story = StoryObj<typeof Col>;

package/dist/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { ActionButtonProps } from "../ActionButton";
 import { ConfirmationModalProps } from "../ConfirmationModal";
@@ -20,9 +20,14 @@ export type Props = PropsWithSpread<{
      * Whether to show a hint about the SHIFT+Click shortcut to skip the confirmation modal.
      */
     showShiftClickHint?: boolean;
+    /**
+     * A handler that determines whether the confirmation modal should be shown.
+     * If it returns `true`, the modal is shown. If it returns `false`, the modal is not shown.
+     */
+    preModalOpenHook?: (event: MouseEvent<HTMLButtonElement>) => boolean;
 }, ActionButtonProps>;
 /**
  * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, ...actionButtonProps }: Props) => React.JSX.Element;
+export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, preModalOpenHook, ...actionButtonProps }: Props) => React.JSX.Element;
 export default ConfirmationButton;

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -28,6 +28,7 @@ const ConfirmationButton = _ref => {
     onHoverText,
     shiftClickEnabled = false,
     showShiftClickHint = false,
+    preModalOpenHook,
     ...actionButtonProps
   } = _ref;
   const {
@@ -53,6 +54,13 @@ const ConfirmationButton = _ref => {
       openPortal(e);
     }
   };
+  const handleClick = e => {
+    if (preModalOpenHook) {
+      const result = preModalOpenHook(e);
+      if (!result) return;
+    }
+    shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
@@ -60,7 +68,7 @@ const ConfirmationButton = _ref => {
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
-    onClick: shiftClickEnabled ? handleShiftClick : openPortal,
+    onClick: handleClick,
     title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));
 };

package/dist/components/ConfirmationButton/ConfirmationButton.stories.d.ts

@@ -7,3 +7,4 @@ type Story = StoryObj<typeof ConfirmationButton>;
 export declare const IconAndLabel: Story;
 export declare const IconOnly: Story;
 export declare const BaseAppearance: Story;
+export declare const WithPreModalOpenHook: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.IconOnly = exports.IconAndLabel = exports.Default = exports.BaseAppearance = void 0;
+exports.default = exports.WithPreModalOpenHook = exports.IconOnly = exports.IconAndLabel = exports.Default = exports.BaseAppearance = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ConfirmationButton = _interopRequireDefault(require("./ConfirmationButton"));
 var _Icon = _interopRequireWildcard(require("../Icon"));
@@ -105,4 +105,26 @@ const BaseAppearance = exports.BaseAppearance = {
     }));
   },
   name: "Base appearance"
+};
+const WithPreModalOpenHook = exports.WithPreModalOpenHook = {
+  render: () => {
+    const dontOpenModal = () => false;
+    const openModal = () => true;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+      preModalOpenHook: dontOpenModal,
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+      }
+    }, "Don't open modal"), /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
+      preModalOpenHook: openModal,
+      confirmationModalProps: {
+        title: "Confirm delete",
+        confirmButtonLabel: "Delete",
+        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
+      }
+    }, "Open modal"));
+  },
+  name: "With preModalOpenHook handler"
 };

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -91,7 +91,7 @@ const ContextualMenu = _ref => {
   const updatePositionCoords = (0, _react.useCallback)(() => {
     const parent = getPositionNode(wrapper.current, positionNode);
     if (!parent) {
-      return null;
+      return;
     }
     setPositionCoords(parent.getBoundingClientRect());
   }, [wrapper, positionNode]);
@@ -143,13 +143,13 @@ const ContextualMenu = _ref => {
       }
     }
   }, [closePortal, openPortal, visible, isOpen, previousVisible]);
-  const onResize = (0, _react.useCallback)(evt => {
+  const onResize = (0, _react.useCallback)(() => {
     const 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/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -164,11 +164,11 @@ const ContextualMenuDropdown = _ref => {
   const updateVerticalPosition = (0, _react.useCallback)(() => {
     var _dropdown$current$get;
     if (!positionNode) {
-      return null;
+      return;
     }
     const scrollableParent = getClosestScrollableParent(positionNode);
     if (!scrollableParent) {
-      return null;
+      return;
     }
     const scrollableParentRect = scrollableParent.getBoundingClientRect();
     const toggleRect = positionNode.getBoundingClientRect();

package/dist/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/components/ModularTable/ModularTable.stories.js

@@ -255,14 +255,14 @@ const Subrows = exports.Subrows = {
       Header: "Flavour",
       accessor: "flavour",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("strong", null, props.value) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+      Cell: props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("strong", null, props.value) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
         type: "checkbox"
       }), " ", props.value)
     }, {
       Header: "Scoops",
       accessor: "scoops",
       sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("span", {
+      Cell: props => "depth" in props.row && props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("span", {
         className: "u-text--muted"
       }, props.value) : props.value
     }], [])

package/dist/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/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/components/Notification/Notification.js

@@ -103,6 +103,7 @@ const Notification = _ref => {
   }, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
     className: "p-notification__close",
     "data-testid": "notification-close-button",
     onClick: onDismiss
@@ -114,7 +115,8 @@ const Notification = _ref => {
     "data-testid": "notification-timestamp"
   }, timestamp), hasActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__actions"
-  }, actions.map((action, i) => /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, actions.map((action, i) => (0, _utils.isReactNode)(action) ? action : /*#__PURE__*/_react.default.createElement(_Button.default, {
+    type: "button",
     appearance: _Button.ButtonAppearance.LINK,
     className: "p-notification__action",
     "data-testid": "notification-action",

package/dist/components/NotificationProvider/NotificationProvider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NotificationProvider = exports.NotificationConsumer = void 0;
 exports.useNotify = useNotify;
 var _react = _interopRequireWildcard(require("react"));
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
 var _messageBuilder = require("./messageBuilder");
 var _Notification = _interopRequireWildcard(require("../Notification/Notification"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +30,7 @@ const NotificationProvider = _ref => {
   const [notification, setNotification] = (0, _react.useState)(null);
   const clear = () => notification !== null && setNotification(null);
   const setDeduplicated = value => {
-    if (!(0, _isEqual.default)(value, notification)) {
+    if (!(0, _fastDeepEqual.default)(value, notification)) {
       setNotification(value);
     }
     return value;

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -58,9 +58,6 @@ const SearchAndFilter = _ref => {
       mounted = false;
     };
   }, [searchData, returnSearchData]);
-  const searchOnChange = searchTerm => {
-    setSearchTerm(searchTerm);
-  };
 
   // Hide manual input form field when search container is inactive
   (0, _react.useEffect)(() => {
@@ -242,7 +239,7 @@ const 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/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/components/SideNavigation/SideNavigation.js

@@ -59,7 +59,7 @@ const generateItems = (groups, listClassName, linkComponent, dark) => {
 };
 const 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 => (0, _utils.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 => (0, _utils.isReactNode)(item) ? false : item && "icon" in item && !!item.icon));
 });
 
 /**

package/dist/components/Tooltip/Tooltip.js

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
-import Card from "./";
+import Card, { CardProps } from "./";
 declare const meta: Meta<typeof Card>;
 export default meta;
 export declare const Default: {
@@ -29,5 +29,5 @@ export declare const Overlay: {
         overlay: boolean;
         children: string;
     };
-    render: (args: any) => React.JSX.Element;
+    render: (args: CardProps) => React.JSX.Element;
 };

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

@@ -97,13 +97,14 @@ export var WrapLines = {
  */
 export var Dropdown = {
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var [lang, setLang] = useState("html");
     var code = {
       js: "console.log(\"Example 1\");",
       css: ".p-heading--2 { color: red; }",
       html: "<h1 class=\"p-heading--2\">How to use code snippets</h1>"
     };
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [lang, setLang] = useState("html");
     return /*#__PURE__*/React.createElement(CodeSnippet, {
       blocks: [{
         code: code[lang],

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import Col from "./Col";
-declare const Template: (args: any) => React.JSX.Element;
+import { ColProps } from ".";
+declare const Template: (args: ColProps) => React.JSX.Element;
 declare const meta: Meta<typeof Template>;
 export default meta;
 type Story = StoryObj<typeof Col>;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { ActionButtonProps } from "../ActionButton";
 import { ConfirmationModalProps } from "../ConfirmationModal";
@@ -20,9 +20,14 @@ export type Props = PropsWithSpread<{
      * Whether to show a hint about the SHIFT+Click shortcut to skip the confirmation modal.
      */
     showShiftClickHint?: boolean;
+    /**
+     * A handler that determines whether the confirmation modal should be shown.
+     * If it returns `true`, the modal is shown. If it returns `false`, the modal is not shown.
+     */
+    preModalOpenHook?: (event: MouseEvent<HTMLButtonElement>) => boolean;
 }, ActionButtonProps>;
 /**
  * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, ...actionButtonProps }: Props) => React.JSX.Element;
+export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, preModalOpenHook, ...actionButtonProps }: Props) => React.JSX.Element;
 export default ConfirmationButton;

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

@@ -1,4 +1,4 @@
-var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint"];
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint", "preModalOpenHook"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -23,7 +23,8 @@ export var ConfirmationButton = _ref => {
       confirmationModalProps,
       onHoverText,
       shiftClickEnabled = false,
-      showShiftClickHint = false
+      showShiftClickHint = false,
+      preModalOpenHook
     } = _ref,
     actionButtonProps = _objectWithoutProperties(_ref, _excluded);
   var {
@@ -49,6 +50,13 @@ export var ConfirmationButton = _ref => {
       openPortal(e);
     }
   };
+  var handleClick = e => {
+    if (preModalOpenHook) {
+      var result = preModalOpenHook(e);
+      if (!result) return;
+    }
+    shiftClickEnabled ? handleShiftClick(e) : openPortal(e);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
     close: handleCancelModal,
     confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
@@ -56,7 +64,7 @@ export var ConfirmationButton = _ref => {
   }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
     className: "p-text--small u-text--muted u-hide--small"
   }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {
-    onClick: shiftClickEnabled ? handleShiftClick : openPortal,
+    onClick: handleClick,
     title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
   }), actionButtonProps.children));
 };

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

@@ -7,3 +7,4 @@ type Story = StoryObj<typeof ConfirmationButton>;
 export declare const IconAndLabel: Story;
 export declare const IconOnly: Story;
 export declare const BaseAppearance: Story;
+export declare const WithPreModalOpenHook: Story;

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/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -164,11 +164,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();

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.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.0",
   "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"
   },