@canonical/react-components 2.1.0 → 2.2.1

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/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/components/ContextualMenu/ContextualMenu.stories.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
+exports.default = exports.Toggle = exports.OverflowingContainer = exports.InsideModal = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+var _Modal = _interopRequireDefault(require("../Modal"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
   style: {
@@ -104,4 +105,21 @@ const ChildElement = exports.ChildElement = {
     position: "right",
     toggleLabel: "Click me!"
   }
+};
+const InsideModal = exports.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.default.createElement(_Modal.default, {
+    title: "Contextual Menu inside Modal"
+  }, /*#__PURE__*/_react.default.createElement(Template, args))
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.adjustForWindow = exports.Label = void 0;
+exports.getNearestParentsZIndex = exports.default = exports.adjustForWindow = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../../hooks");
@@ -134,6 +134,22 @@ const getClosestScrollableParent = node => {
   }
   return document.body;
 };
+
+// nearest parents z-index that is not 0 or auto
+const getNearestParentsZIndex = element => {
+  if (!window || !element) {
+    return "0";
+  }
+  const 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;
+};
+exports.getNearestParentsZIndex = getNearestParentsZIndex;
 const ContextualMenuDropdown = _ref => {
   let {
     adjustedPosition,
@@ -164,11 +180,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();
@@ -206,6 +222,17 @@ const ContextualMenuDropdown = _ref => {
   (0, _react.useEffect)(() => {
     updateVerticalPosition();
   }, [updateVerticalPosition]);
+  (0, _react.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
+    const 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/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/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOptionText = exports.getNearestParentsZIndex = exports.dropdownIsAbove = exports.default = exports.adjustDropdownHeightBelow = exports.adjustDropdownHeightAbove = exports.adjustDropdownHeight = void 0;
+exports.getOptionText = exports.dropdownIsAbove = exports.default = exports.adjustDropdownHeightBelow = exports.adjustDropdownHeightAbove = exports.adjustDropdownHeight = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -87,20 +87,6 @@ const adjustDropdownHeight = (dropdown, search) => {
   adjustDropdownHeightBelow(dropdown);
 };
 exports.adjustDropdownHeight = adjustDropdownHeight;
-const getNearestParentsZIndex = element => {
-  if (!document.defaultView || !element) {
-    return "0";
-  }
-  const 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;
-};
-exports.getNearestParentsZIndex = getNearestParentsZIndex;
 const getOptionText = option => {
   if (option.text) {
     return option.text;
@@ -139,14 +125,6 @@ const CustomSelectDropdown = _ref => {
       // align width with wrapper toggle width
       const 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
-      const 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/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.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/components/ModularTable/ModularTable.js

@@ -53,7 +53,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/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;