@canonical/react-components 1.10.0 → 2.1.0

package/dist/components/Row/Row.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<{
@@ -15,5 +16,5 @@ export type Props = PropsWithSpread<{
  *
  * Vanilla has a responsive grid using a combination of rows and columns.
  */
-declare const Row: ({ children, className, ...props }: Props) => JSX.Element;
+declare const Row: ({ children, className, ...props }: Props) => React.JSX.Element;
 export default Row;

package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { SearchAndFilterChip, SearchAndFilterData } from "../types";
 export type Props = {
     /**
@@ -21,5 +22,5 @@ export type Props = {
      */
     toggleSelected: (chip: SearchAndFilterChip) => void;
 };
-declare const FilterPanelSection: ({ data, searchData, searchTerm, sectionHidden, toggleSelected, }: Props) => JSX.Element;
+declare const FilterPanelSection: ({ data, searchData, searchTerm, sectionHidden, toggleSelected, }: Props) => React.JSX.Element;
 export default FilterPanelSection;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { SearchAndFilterChip, SearchAndFilterData } from "./types";
 export declare enum Label {
     AddFilter = "Add filter",
@@ -29,5 +30,5 @@ export type Props = {
 /**
  * This component allows searching and filtering of large datasets.
  */
-declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, onPanelToggle, onExpandChange, ...props }: Props) => JSX.Element;
+declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, onPanelToggle, onExpandChange, ...props }: Props) => React.JSX.Element;
 export default SearchAndFilter;

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -42,7 +42,7 @@ const SearchAndFilter = _ref => {
   const searchAndFilterRef = (0, _react.useRef)(null);
   const searchContainerRef = (0, _react.useRef)(null);
   const searchBoxRef = (0, _react.useRef)(null);
-  const panel = (0, _react.useRef)();
+  const panel = (0, _react.useRef)(null);
 
   // Call onPanelToggle when the filterPanelHidden state changes
   (0, _react.useEffect)(onPanelToggle, [onPanelToggle, filterPanelHidden]);

package/dist/components/SearchBox/SearchBox.d.ts

@@ -45,10 +45,6 @@ export type Props = PropsWithSpread<{
      * Whether the search input should receive focus after pressing the reset button
      */
     shouldRefocusAfterReset?: boolean;
-    /**
-     * A ref that is passed to the input element.
-     */
-    ref?: string;
     /**
      * The value of the search input when the state is externally controlled.
      */

package/dist/components/SearchBox/SearchBox.js

@@ -36,7 +36,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     value,
     ...props
   } = _ref;
-  const internalRef = (0, _react.useRef)();
+  const internalRef = (0, _react.useRef)(null);
   const resetInput = () => {
     onChange === null || onChange === void 0 || onChange("");
     onClear === null || onClear === void 0 || onClear();

package/dist/components/Select/Select.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ChangeEventHandler, ReactNode, OptionHTMLAttributes, SelectHTMLAttributes } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 type Option = OptionHTMLAttributes<HTMLOptionElement>;
@@ -67,5 +68,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => JSX.Element;
+declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
 export default Select;

package/dist/components/SkipLink/SkipLink.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 export type Props = {
     /**
      * Id of the main content area to skip to.
@@ -8,5 +8,5 @@ export type Props = {
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
  */
-export declare const SkipLink: ({ mainId }: Props) => JSX.Element;
+export declare const SkipLink: ({ mainId, }: Props) => React.JSX.Element;
 export default SkipLink;

package/dist/components/Slider/Slider.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ChangeEventHandler, HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
 export declare const FILLED_COLOR = "#0066CC";
@@ -58,5 +59,5 @@ export type Props = PropsWithSpread<{
  * Sliders should be used to let a user specify a numeric value between a defined
 minimum and maximum value, however the precise value is not especially important.
  */
-export declare const Slider: ({ caution, disabled, error, help, id, inputDisabled, label, max, min, onChange, required, showInput, ...inputProps }: Props) => JSX.Element;
+export declare const Slider: ({ caution, disabled, error, help, id, inputDisabled, label, max, min, onChange, required, showInput, ...inputProps }: Props) => React.JSX.Element;
 export default Slider;

package/dist/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { ClassName } from "../../types";
 export type Props = {
     /**
@@ -25,5 +25,5 @@ export type Props = {
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { ClassName, PropsWithSpread, ValueOf } from "../../types";
 export declare const StatusLabelAppearance: {
@@ -29,5 +30,5 @@ export type Props = PropsWithSpread<{
  *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
  */
-declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => JSX.Element;
+declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => React.JSX.Element;
 export default StatusLabel;

package/dist/components/Stepper/Step/Step.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { LinkProps } from "../../Link";
 import { ClassName } from "../../../types";
 import "./Step.scss";
@@ -43,5 +44,5 @@ export type Props = {
      */
     handleClick: () => void;
 };
-declare const Step: ({ hasProgressLine, index, title, label, linkProps, enabled, selected, iconName, iconClassName, handleClick, ...props }: Props) => JSX.Element;
+declare const Step: ({ hasProgressLine, index, title, label, linkProps, enabled, selected, iconName, iconClassName, handleClick, ...props }: Props) => React.JSX.Element;
 export default Step;

package/dist/components/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { StepProps } from "./Step";
 export type Props = {
     /**
@@ -8,10 +8,10 @@ export type Props = {
     /**
      * A list of steps.
      */
-    steps: React.ReactElement<StepProps>[];
+    steps: ReactElement<StepProps>[];
 };
 /**
  * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
  */
-declare const Stepper: ({ variant, steps }: Props) => JSX.Element;
+declare const Stepper: ({ variant, steps }: Props) => React.JSX.Element;
 export default Stepper;

package/dist/components/Strip/Strip.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ElementType, HTMLProps, ReactNode } from "react";
 import type { ColSize } from "../Col/Col";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -60,5 +61,5 @@ export type Props = PropsWithSpread<{
  *
  * The strip pattern provides a full width strip container in which to wrap a row.
  */
-declare const Strip: ({ background, bordered, children, className, colSize, dark, deep, includeCol, element: Component, light, rowClassName, shallow, type, ...props }: Props) => JSX.Element;
+declare const Strip: ({ background, bordered, children, className, colSize, dark, deep, includeCol, element: Component, light, rowClassName, shallow, type, ...props }: Props) => React.JSX.Element;
 export default Strip;

package/dist/components/SummaryButton/SummaryButton.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEventHandler } from "react";
 import type { ClassName } from "../../types";
 export type Props = {
@@ -25,5 +26,5 @@ export type Props = {
 /**
  * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
  */
-declare const SummaryButton: ({ className, isLoading, summary, label, onClick, }: Props) => JSX.Element;
+declare const SummaryButton: ({ className, isLoading, summary, label, onClick, }: Props) => React.JSX.Element;
 export default SummaryButton;

package/dist/components/Switch/Switch.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
@@ -13,5 +14,5 @@ export type Props = PropsWithSpread<{
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
-export declare const Switch: ({ label, disabled, ...inputProps }: Props) => JSX.Element;
+export declare const Switch: ({ label, disabled, ...inputProps }: Props) => React.JSX.Element;
 export default Switch;

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from "react";
+import React, { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -18,5 +18,5 @@ export type Props = PropsWithSpread<{
      */
     responsive?: boolean;
 }, HTMLProps<HTMLTableElement>>;
-declare const Table: ({ children, className, expanding, responsive, ...props }: Props) => JSX.Element;
+declare const Table: ({ children, className, expanding, responsive, ...props }: Props) => React.JSX.Element;
 export default Table;

package/dist/components/TableCell/TableCell.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from "react";
+import React, { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -22,5 +22,5 @@ export type Props = PropsWithSpread<{
      */
     hidden?: boolean;
 }, HTMLProps<HTMLTableCellElement>>;
-declare const TableCell: ({ children, className, hasOverflow, expanding, hidden, role, ...props }: Props) => JSX.Element;
+declare const TableCell: ({ children, className, hasOverflow, expanding, hidden, role, ...props }: Props) => React.JSX.Element;
 export default TableCell;

package/dist/components/TableHeader/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from "react";
+import React, { HTMLProps, ReactNode } from "react";
 import { PropsWithSpread, SortDirection } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -10,5 +10,5 @@ export type Props = PropsWithSpread<{
      */
     sort?: SortDirection;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
-declare const TableHeader: ({ children, sort, ...props }: Props) => JSX.Element;
+declare const TableHeader: ({ children, sort, ...props }: Props) => React.JSX.Element;
 export default TableHeader;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "../../Button";
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
 export declare enum Label {
     NEXT_PAGE = "Next page",
@@ -20,5 +20,5 @@ export type Props = Omit<AllProps, "currentPage" | "data" | "dataForwardProp" |
     visibleCount?: number;
     showPageInput?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => JSX.Element;
+declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => React.JSX.Element;
 export default TablePaginationControls;

package/dist/components/TablePagination/utils.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 /**
  * Determine if we are working with a small screen.
  * 'small screen' in this case is relative to the width of the description div
@@ -11,7 +11,7 @@ export declare const figureSmallScreen: () => boolean;
  * @param dataForwardProp - the name of the prop from the children components to override
  * @param data - actual data to be passed to the prop specified by @param dataForwardProp
  */
-export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => import("react").FunctionComponentElement<any>[];
 export declare const DEFAULT_PAGE_LIMITS: number[];
 export declare const generatePagingOptions: (pageLimits: number[]) => {
     value: number;
@@ -23,5 +23,5 @@ export declare const getDescription: ({ description, isSmallScreen, totalItems,
     totalItems: number;
     itemName: string;
     visibleCount: number;
-}) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
+}) => string | number | bigint | true | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>>;
 export declare const useFigureSmallScreen: () => boolean;

package/dist/components/TableRow/TableRow.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLProps, ReactNode } from "react";
+import React from "react";
 import type { PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -6,5 +7,5 @@ export type Props = PropsWithSpread<{
      */
     children: ReactNode;
 }, HTMLProps<HTMLTableRowElement>>;
-declare const TableRow: ({ children, ...trProps }: Props) => JSX.Element;
+declare const TableRow: ({ children, ...trProps }: Props) => React.JSX.Element;
 export default TableRow;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
 import type { ClassName } from "../../types";
 export type TabLink<P = null> = {
@@ -41,5 +42,5 @@ export type Props<P = null> = {
 Tabs organise and allow navigation between groups of content that are related and at the same level
 of hierarchy.
  */
-declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
+declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => React.JSX.Element;
 export default Tabs;

package/dist/components/Textarea/Textarea.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { TextareaHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
@@ -66,5 +67,5 @@ export type Props = PropsWithSpread<{
  *
  * The Textarea component defines a multi-line text input control.
  */
-declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
+declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => React.JSX.Element;
 export default Textarea;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { WindowFitment } from "../../hooks";
 import type { ClassName, ValueOf } from "../../types";
@@ -71,5 +72,5 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  *
  * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
  */
-declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => React.JSX.Element;
 export default Tooltip;

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)();

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

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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;

package/dist/esm/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/esm/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/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;