@canonical/react-components 2.0.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

@@ -7,7 +7,7 @@ exports.default = exports.ConfirmationButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
+var _external = require("../../external");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const generateTitle = title => {
@@ -28,6 +28,7 @@ const ConfirmationButton = _ref => {
     onHoverText,
     shiftClickEnabled = false,
     showShiftClickHint = false,
+    preModalOpenHook,
     ...actionButtonProps
   } = _ref;
   const {
@@ -35,7 +36,7 @@ const ConfirmationButton = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)();
+  } = (0, _external.usePortal)();
   const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
@@ -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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
+var _external = require("../../external");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -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]);
@@ -100,7 +100,7 @@ const ContextualMenu = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)({
+  } = (0, _external.usePortal)({
     closeOnEsc,
     closeOnOutsideClick,
     isOpen: visible,
@@ -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.d.ts

@@ -18,7 +18,7 @@ export type Position = "left" | "center" | "right";
 export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
-    handleClose?: (evt?: MouseEvent) => void;
+    handleClose?: (evt?: React.MouseEvent<HTMLButtonElement>) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
     dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.position = exports.default = exports.adjustForWindow = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
+var _external = require("../../external");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -142,7 +142,7 @@ const Tooltip = _ref => {
     closePortal,
     isOpen,
     Portal
-  } = (0, _reactUseportal.default)({
+  } = (0, _external.usePortal)({
     programmaticallyOpen: true
   });
   const tooltipId = (0, _react.useId)();
@@ -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,11 +1,11 @@
-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; }
 import React from "react";
 import ActionButton from "../ActionButton";
 import ConfirmationModal from "../ConfirmationModal";
-import usePortal from "react-useportal";
+import { usePortal } from "../../external";
 var generateTitle = title => {
   if (typeof title === "string") {
     return title;
@@ -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

@@ -4,10 +4,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 import classNames from "classnames";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import usePortal from "react-useportal";
 import { useListener, usePrevious } from "../../hooks";
 import Button from "../Button";
 import ContextualMenuDropdown from "./ContextualMenuDropdown";
+import { usePortal } from "../../external";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Toggle"] = "Toggle menu";
   return Label;
@@ -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.d.ts

@@ -18,7 +18,7 @@ export type Position = "left" | "center" | "right";
 export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
-    handleClose?: (evt?: MouseEvent) => void;
+    handleClose?: (evt?: React.MouseEvent<HTMLButtonElement>) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
     dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);

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.