@canonical/react-components 1.9.1 → 2.0.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { AccordionHeadings, AccordionSectionProps } from "./AccordionSection";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Section = AccordionSectionProps & {
@@ -42,5 +42,5 @@ export type Props = PropsWithSpread<{
  *
  * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
  */
-declare const Accordion: ({ className, expanded, externallyControlled, onExpandedChange, sections, titleElement, ...asideProps }: Props) => JSX.Element;
+declare const Accordion: ({ className, expanded, externallyControlled, onExpandedChange, sections, titleElement, ...asideProps }: Props) => React.JSX.Element;
 export default Accordion;

package/dist/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { Headings } from "../../../types";
 export type AccordionHeadings = Exclude<Headings, "h1">;
@@ -30,5 +31,5 @@ export type Props = {
      */
     titleElement?: AccordionHeadings;
 };
-declare const AccordionSection: ({ content, expanded, onTitleClick, sectionKey, setExpanded, title, titleElement, headingLevel, }: Props) => JSX.Element;
+declare const AccordionSection: ({ content, expanded, onTitleClick, sectionKey, setExpanded, title, titleElement, headingLevel, }: Props) => React.JSX.Element;
 export default AccordionSection;

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -44,5 +45,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => JSX.Element;
+declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ArticlePagination/ArticlePagination.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -27,5 +28,5 @@ export type Props = PropsWithSpread<{
  *
  * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
  */
-declare const ArticlePagination: ({ className, nextURL, nextLabel, previousURL, previousLabel, ...props }: Props) => JSX.Element;
+declare const ArticlePagination: ({ className, nextURL, nextLabel, previousURL, previousLabel, ...props }: Props) => React.JSX.Element;
 export default ArticlePagination;

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
 export declare const BadgeType: {
     readonly ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER";
@@ -30,5 +30,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a numeric values.
  */
-declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => JSX.Element;
+declare const Badge: ({ value, badgeType, className, isNegative, ...spanProps }: Props) => React.JSX.Element;
 export default Badge;

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
 import type { ClassName, ValueOf } from "../../types";
 export declare const ButtonAppearance: {
@@ -60,5 +61,5 @@ export type Props<P = null> = {
  * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
  * @template P - The type of the props if providing a component to `element`
  */
-declare const Button: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: Props<P>) => JSX.Element;
+declare const Button: <P>({ appearance, children, className, dense, disabled, element: Component, hasIcon, inline, onClick, small, ...buttonProps }: Props<P>) => React.JSX.Element;
 export default Button;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -31,5 +32,5 @@ export type Props = PropsWithSpread<{
  *
  * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
  */
-declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => JSX.Element;
+declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => React.JSX.Element;
 export default Card;

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { ReactNode } from "react";
 import type { PropsWithSpread } from "../../../types";
 export type Props = PropsWithSpread<{
@@ -23,5 +23,5 @@ export type Props = PropsWithSpread<{
      */
     inline?: boolean;
 }, Omit<HTMLProps<HTMLInputElement>, "type">>;
-declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, inline, ...checkboxProps }: Props) => JSX.Element;
+declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, inline, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckableInput;

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { CheckableInputProps } from "./CheckableInput";
 export type Props = Omit<CheckableInputProps, "inputType">;
 /**
@@ -5,5 +6,5 @@ export type Props = Omit<CheckableInputProps, "inputType">;
  *
  * Use the checkbox component to select one or more options.
  */
-declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
+declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckboxInput;

package/dist/components/Chip/Chip.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
 export declare enum Label {
@@ -52,5 +53,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a small value attached to a component.
  */
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => React.JSX.Element;
 export default Chip;

package/dist/components/Code/Code.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ClassName } from "../../types";
 export type Props = {
     children: string;
@@ -9,5 +10,5 @@ export type Props = {
 /**
  * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
  */
-declare const Code: ({ children, className, inline, copyable, numbered, ...props }: Props) => JSX.Element;
+declare const Code: ({ children, className, inline, copyable, numbered, ...props }: Props) => React.JSX.Element;
 export default Code;

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -18,4 +18,4 @@ export type Props = PropsWithSpread<{
  *
  * A single `CodeSnippet` component can render multiple separate code blocks. Blocks are provided as an array via the `blocks` prop. Each block object defines values of props for each code block of the snippet.
  */
-export default function CodeSnippet({ className, blocks, ...props }: Props): JSX.Element;
+export default function CodeSnippet({ className, blocks, ...props }: Props): React.JSX.Element;

package/dist/components/CodeSnippet/CodeSnippetBlock.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { Props as CodeSnippetDropdownProps } from "./CodeSnippetDropdown";
 import type { ValueOf } from "../../types";
@@ -37,4 +38,4 @@ export type Props = {
      */
     wrapLines?: boolean;
 };
-export default function CodeSnippetBlock({ appearance, code, content, dropdowns, stacked, title, wrapLines, }: Props): JSX.Element;
+export default function CodeSnippetBlock({ appearance, code, content, dropdowns, stacked, title, wrapLines, }: Props): React.JSX.Element;

package/dist/components/CodeSnippet/CodeSnippetDropdown.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ChangeEventHandler, HTMLProps } from "react";
 export type DropdownOptionProps = {
     /**
@@ -15,4 +16,4 @@ export type Props = {
      */
     options: DropdownOptionProps[];
 } & HTMLProps<HTMLSelectElement>;
-export default function CodeSnippetDropdown({ options, onChange, ...props }: Props): JSX.Element;
+export default function CodeSnippetDropdown({ options, onChange, ...props }: Props): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ElementType, HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -49,5 +50,5 @@ export type Props = PropsWithSpread<{
  *
  * Vanilla has a responsive grid using a combination of rows and columns.
  */
-declare const Col: ({ children, className, element: Component, emptyLarge, emptyMedium, emptySmall, large, medium, size, small, ...props }: Props) => JSX.Element;
+declare const Col: ({ children, className, element: Component, emptyLarge, emptyMedium, emptySmall, large, medium, size, small, ...props }: Props) => React.JSX.Element;
 export default Col;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React from "react";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { ActionButtonProps } from "../ActionButton";
 import { ConfirmationModalProps } from "../ConfirmationModal";
@@ -24,5 +24,5 @@ export type Props = PropsWithSpread<{
 /**
  * `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) => ReactElement;
+export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, ...actionButtonProps }: Props) => React.JSX.Element;
 export default ConfirmationButton;

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement } from "react";
+import React, { MouseEvent } from "react";
 import type { ReactNode } from "react";
 import { PropsWithSpread, ValueOf } from "../../types";
 import { ButtonAppearance, ButtonProps } from "../Button";
@@ -49,5 +49,5 @@ export type Props = PropsWithSpread<{
 /**
  * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
  */
-export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => ReactElement;
+export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => React.JSX.Element;
 export default ConfirmationModal;

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

@@ -106,5 +106,5 @@ export type Props<L> = BaseProps<L> & ExclusiveProps<{
  *
  * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
-declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggle, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
+declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggle, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => React.JSX.Element;
 export default ContextualMenu;

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../../Button";
 import type { WindowFitment } from "../../../hooks";
@@ -21,7 +21,7 @@ export type Props<L = null> = {
     handleClose?: (evt?: MouseEvent) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
-    dropdownContent?: ReactNode | ((close: () => void) => ReactElement);
+    dropdownContent?: ReactNode | ((close: () => void) => React.JSX.Element);
     id?: string;
     isOpen?: boolean;
     links?: MenuLink<L>[];
@@ -39,5 +39,5 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
-declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => JSX.Element;
+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/CustomSelect/CustomSelect.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MutableRefObject, ReactNode } from "react";
 import { ClassName, PropsWithSpread } from "../../types";
 import { FieldProps } from "../Field";
@@ -32,5 +33,5 @@ export type Props = PropsWithSpread<FieldProps, {
  *
  * The aim of this component is to provide a select component with customisable options and a dropdown menu, whilst maintaining accessibility and usability.
  */
-declare const CustomSelect: ({ value, options, onChange, onSearch, id, name, disabled, success, error, help, wrapperClassName, toggleClassName, dropdownClassName, searchable, takeFocus, header, selectRef, initialPosition, ...fieldProps }: Props) => JSX.Element;
+declare const CustomSelect: ({ value, options, onChange, onSearch, id, name, disabled, success, error, help, wrapperClassName, toggleClassName, dropdownClassName, searchable, takeFocus, header, selectRef, initialPosition, ...fieldProps }: Props) => React.JSX.Element;
 export default CustomSelect;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLProps, ReactElement } from "react";
+import React, { ReactNode, HTMLProps } from "react";
 import { PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -21,5 +21,5 @@ export type Props = PropsWithSpread<{
 /**
  * This is a [React](https://reactjs.org/) component to represent an empty state.
  */
-export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
+export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => React.JSX.Element;
 export default EmptyState;

package/dist/components/Field/Field.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { ClassName } from "../../types";
 /**
@@ -73,5 +74,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/components/Form/Form.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -17,5 +18,5 @@ export type Props = PropsWithSpread<{
  *
  * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
  */
-declare const Form: ({ children, className, inline, stacked, ...props }: Props) => JSX.Element;
+declare const Form: ({ children, className, inline, stacked, ...props }: Props) => React.JSX.Element;
 export default Form;

package/dist/components/FormikField/FormikField.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { type ComponentProps, type ComponentType, type ElementType, type HTMLProps } from "react";
 import Input from "../Input";
 export type Props<C extends ElementType | ComponentType = typeof Input> = {
@@ -21,5 +22,5 @@ export type Props<C extends ElementType | ComponentType = typeof Input> = {
  * makes use of Formik's context to automatically map errors, values, states
  * etc. onto the provided field.
  */
-declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => JSX.Element;
+declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => React.JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => React.JSX.Element;
 export default FormikField;

package/dist/components/Icon/Icon.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLProps } from "react";
+import React from "react";
 import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
 export declare const ICONS: {
     readonly anchor: "anchor";
@@ -55,5 +56,5 @@ export type Props = PropsWithSpread<{
  * @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
  * @returns Icon
  */
-declare const Icon: ({ className, light, name, ...props }: Props) => JSX.Element;
+declare const Icon: ({ className, light, name, ...props }: Props) => React.JSX.Element;
 export default Icon;

package/dist/components/Input/Input.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
@@ -66,5 +67,5 @@ export type Props = PropsWithSpread<{
  *
  * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
  */
-declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
+declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Input;

package/dist/components/Label/Label.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { LabelHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
@@ -21,5 +22,5 @@ export type Props = PropsWithSpread<{
      */
     required?: boolean;
 }, LabelHTMLAttributes<HTMLLabelElement>>;
-declare const Label: ({ children, className, forId, required, ...props }: Props) => JSX.Element;
+declare const Label: ({ children, className, forId, required, ...props }: Props) => React.JSX.Element;
 export default Label;

package/dist/components/Link/Link.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -27,5 +28,5 @@ export type Props = PropsWithSpread<{
  *
  * Links are used to embed actions or pathways to more information, allowing users to click their way from page to page.
  */
-declare const Link: ({ children, className, href, inverted, soft, top, ...props }: Props) => JSX.Element;
+declare const Link: ({ children, className, href, inverted, soft, top, ...props }: Props) => React.JSX.Element;
 export default Link;

package/dist/components/List/List.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { ClassName, Headings, PropsWithSpread } from "../../types";
 export type ListItem = ReactNode | PropsWithSpread<{
@@ -32,5 +33,5 @@ export type Props = {
  *
  * If you want to display lists in a way that is more visually distinctive than the standard `<ol>` and `<ul>`, we have 7 list styles at your disposal.
  */
-declare const List: ({ className, detailed, divided, inline, isDark, items, middot, stretch, split, stepped, ticked, ...props }: Props) => JSX.Element;
+declare const List: ({ className, detailed, divided, inline, isDark, items, middot, stretch, split, stepped, ticked, ...props }: Props) => React.JSX.Element;
 export default List;

package/dist/components/Loader/Loader.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import type { SpinnerProps } from "../Spinner";
 /**
  * @deprecated Loader component is deprecated. Use Spinner component instead.
  */
-declare const Loader: (props: SpinnerProps) => JSX.Element;
+declare const Loader: (props: SpinnerProps) => React.JSX.Element;
 export default Loader;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread, SortDirection } from "../../types";
 import type { TableProps } from "../Table";
@@ -98,5 +99,5 @@ export type Props = PropsWithSpread<{
 /**
  * This is a [React](https://reactjs.org/) component to support many table use cases.
  */
-declare const MainTable: ({ defaultSort, defaultSortDirection, emptyStateMsg, expanding, headers, onUpdateSort, paginate, rows, responsive, sortable, sortFunction, hiddenCaption, ...props }: Props) => JSX.Element;
+declare const MainTable: ({ defaultSort, defaultSortDirection, emptyStateMsg, expanding, headers, onUpdateSort, paginate, rows, responsive, sortable, sortFunction, hiddenCaption, ...props }: Props) => React.JSX.Element;
 export default MainTable;

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -26,11 +26,15 @@ export type Props = PropsWithSpread<{
      * Whether the button click event should propagate.
      */
     shouldPropagateClickEvent?: boolean;
+    /**
+     * Whether the modal should close when clicking outside the modal.
+     */
+    closeOnOutsideClick?: boolean;
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Modal](https://docs.vanillaframework.io/patterns/modal/).
  *
  * The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.
  */
-export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, ...wrapperProps }: Props) => ReactElement;
+export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -23,6 +23,7 @@ const Modal = _ref => {
     close,
     title,
     shouldPropagateClickEvent = false,
+    closeOnOutsideClick = true,
     ...wrapperProps
   } = _ref;
   // list of focusable selectors is based on this Stack Overflow answer:
@@ -92,7 +93,7 @@ const Modal = _ref => {
     shouldClose.current = false;
   };
   const handleOverlayOnMouseDown = event => {
-    if (event.target === modalRef.current) {
+    if (event.target === modalRef.current && closeOnOutsideClick) {
       shouldClose.current = true;
     }
   };

package/dist/components/Modal/Modal.stories.js

@@ -31,12 +31,18 @@ const meta = {
       control: {
         disable: true
       }
+    },
+    closeOnOutsideClick: {
+      control: "boolean"
     }
   }
 };
 var _default = exports.default = meta;
 const Default = exports.Default = {
-  render: () => {
+  render: _ref => {
+    let {
+      closeOnOutsideClick
+    } = _ref;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [modalOpen, setModalOpen] = (0, _react.useState)(true);
     const closeHandler = () => setModalOpen(false);
@@ -45,6 +51,7 @@ const Default = exports.Default = {
     }, "Open modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_Modal.default, {
       close: closeHandler,
       title: "Confirm delete",
+      closeOnOutsideClick: closeOnOutsideClick,
       buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
         className: "u-no-margin--bottom",
         onClick: closeHandler

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

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLProps } from "react";
+import React, { ReactNode, HTMLProps } from "react";
 import { TableCellProps, TableHeaderProps, TableRowProps } from "react-table";
 import type { Column, UseTableOptions, Cell, Row, HeaderGroup } from "react-table";
 import { PropsWithSpread } from "../../types";
@@ -101,5 +101,5 @@ columns = {
 };
 ```
  */
-declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): JSX.Element;
+declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): React.JSX.Element;
 export default ModularTable;

package/dist/components/MultiSelect/MultiSelect.js

@@ -176,7 +176,7 @@ const MultiSelect = _ref4 => {
     variant = "search",
     scrollOverflow = false
   } = _ref4;
-  const buttonRef = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)(null);
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)("");
   const [internalSelectedItems, setInternalSelectedItems] = (0, _react.useState)([]);

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

@@ -1,4 +1,5 @@
 import { ReactNode, HTMLProps } from "react";
+import React from "react";
 import type { GenerateLink, NavItem, LogoProps } from "./types";
 import { PropsWithSpread, SubComponentProps } from "../../types";
 import { SearchBoxProps } from "../SearchBox";
@@ -62,5 +63,5 @@ is a simple navigation bar that you can add to the top of your site or app.
 The navigation items are collapsed behind a "Menu" link in small screens and
 displayed horizontally on larger screens.
  */
-declare const Navigation: ({ fullWidth, generateLink, items, itemsRight, leftNavProps, logo, navProps, rightNavProps, searchProps, theme, ...headerProps }: Props) => JSX.Element;
+declare const Navigation: ({ fullWidth, generateLink, items, itemsRight, leftNavProps, logo, navProps, rightNavProps, searchProps, theme, ...headerProps }: Props) => React.JSX.Element;
 export default Navigation;

package/dist/components/Navigation/Navigation.js

@@ -118,7 +118,7 @@ const Navigation = _ref => {
     theme,
     ...headerProps
   } = _ref;
-  const searchRef = (0, _react.useRef)();
+  const searchRef = (0, _react.useRef)(null);
   const [mobileMenuOpen, setMobileMenuOpen] = (0, _react.useState)(false);
   const [searchOpen, setSearchOpen] = (0, _react.useState)(false);
   // Display the search box if the props have been provided.

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { GenerateLink, NavLink } from "../types";
 type Props = {
     generateLink?: GenerateLink;
@@ -6,5 +7,5 @@ type Props = {
 /**
  * This component is used internally to display links inside the Navigation component.
  */
-declare const NavigationLink: ({ generateLink, link }: Props) => JSX.Element | null;
+declare const NavigationLink: ({ generateLink, link, }: Props) => React.JSX.Element | null;
 export default NavigationLink;

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

@@ -1,4 +1,5 @@
 import type { HTMLProps } from "react";
+import React from "react";
 import type { GenerateLink, NavMenu } from "../types";
 import { PropsWithSpread } from "../../../types";
 type Props = PropsWithSpread<NavMenu & {
@@ -7,5 +8,5 @@ type Props = PropsWithSpread<NavMenu & {
 /**
  * This component is used internally to display menus inside the Navigation component.
  */
-declare const NavigationMenu: ({ alignRight, generateLink, items, label, ...props }: Props) => JSX.Element;
+declare const NavigationMenu: ({ alignRight, generateLink, items, label, ...props }: Props) => React.JSX.Element;
 export default NavigationMenu;

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

@@ -1,4 +1,4 @@
-import { ElementType } from "react";
+import React, { ElementType } from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
 export declare enum Label {
@@ -106,5 +106,5 @@ and align with our component prop naming conventions.
 The `notificationTypes` const has also been replaced with `NotificationSeverity`
 to reflect the new prop name.
  */
-declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, titleElement: TitleComponent, type, ...props }: Props) => JSX.Element;
+declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, titleElement: TitleComponent, type, ...props }: Props) => React.JSX.Element;
 export default Notification;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps } from "react";
 import type { PropsWithSpread } from "../../types";
 type BaseProps = {
@@ -98,5 +99,5 @@ The pagination component should be used to navigate between pages of content. Th
 * **Buttons-only Pagination:** used when the total number of items is unknown.<br />
   **Required props:** onForward, onBack.
  */
-declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => JSX.Element;
+declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => React.JSX.Element;
 export default Pagination;

package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEventHandler } from "react";
 export declare enum Label {
     Next = "Next page",
@@ -26,5 +27,5 @@ export type Props = {
      */
     label?: string;
 };
-declare const PaginationButton: ({ direction, onClick, disabled, showLabel, label, }: Props) => JSX.Element;
+declare const PaginationButton: ({ direction, onClick, disabled, showLabel, label, }: Props) => React.JSX.Element;
 export default PaginationButton;

package/dist/components/Pagination/PaginationItem/PaginationItem.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEventHandler } from "react";
 export type Props = {
     /**
@@ -13,5 +14,5 @@ export type Props = {
      */
     onClick: MouseEventHandler<HTMLButtonElement>;
 };
-declare const PaginationItem: ({ number, onClick, isActive, }: Props) => JSX.Element;
+declare const PaginationItem: ({ number, onClick, isActive, }: Props) => React.JSX.Element;
 export default PaginationItem;

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
 export type Props = Omit<CheckableInputProps, "inputType">;
 /**
@@ -5,5 +6,5 @@ export type Props = Omit<CheckableInputProps, "inputType">;
  *
  * Use radio buttons to select one of the given set of options.
  */
-declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
+declare const RadioInput: ({ label, ...radioProps }: Props) => React.JSX.Element;
 export default RadioInput;