@canonical/react-components 1.10.0 → 2.0.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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<{
@@ -36,5 +36,5 @@ export type Props = PropsWithSpread<{
  *
  * 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, closeOnOutsideClick, ...wrapperProps }: Props) => ReactElement;
+export declare const Modal: ({ buttonRow, children, className, close, title, shouldPropagateClickEvent, closeOnOutsideClick, ...wrapperProps }: Props) => React.JSX.Element;
 export default Modal;

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

@@ -169,7 +169,7 @@ export var MultiSelect = _ref4 => {
     variant = "search",
     scrollOverflow = false
   } = _ref4;
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
   var [filter, setFilter] = useState("");
   var [internalSelectedItems, setInternalSelectedItems] = useState([]);

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

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

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

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

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

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

@@ -30,7 +30,7 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
       value
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  var internalRef = useRef();
+  var internalRef = useRef(null);
   var resetInput = () => {
     _onChange === null || _onChange === void 0 || _onChange("");
     onClear === null || onClear === void 0 || onClear();

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/hooks/useThrottle.js

@@ -10,8 +10,8 @@ export var THROTTLE_DELAY = 1000 / 60;
  */
 export var useThrottle = function useThrottle(callback) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  var timeout = useRef();
-  var lastCall = useRef();
+  var timeout = useRef(null);
+  var lastCall = useRef(null);
   var lastArgs = useRef(null);
   var throttle = useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

package/dist/hooks/useThrottle.js

@@ -16,8 +16,8 @@ const THROTTLE_DELAY = exports.THROTTLE_DELAY = 1000 / 60;
  */
 const useThrottle = function (callback) {
   let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  const timeout = (0, _react.useRef)();
-  const lastCall = (0, _react.useRef)();
+  const timeout = (0, _react.useRef)(null);
+  const lastCall = (0, _react.useRef)(null);
   const lastArgs = (0, _react.useRef)(null);
   const throttle = (0, _react.useCallback)(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {