@skedulo/sked-ui 0.0.0-preview-react-18 → 0.0.1-react-18-upgrade-test

package/dist/components/avatar/Avatar.d.ts

@@ -41,6 +41,6 @@ export declare const avatarSizeClassMap: {
  */
 export declare class Avatar extends React.PureComponent<IAvatar, {}> {
     getInitials(name?: string): string;
-    renderAvatar(): JSX.Element;
-    render(): JSX.Element;
+    renderAvatar(): React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/components/avatar/AvatarDetail.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IAvatar } from './Avatar';
 declare type AvatarDetailGroupSize = 'tiny' | 'small' | 'medium' | 'large';
 declare type AvatarProps = Pick<IAvatar, 'name' | 'imageUrl'>;
@@ -14,5 +14,5 @@ export interface IAvatarDetailProps extends AvatarProps {
     className?: string;
     linkUrl?: string;
 }
-export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl }: IAvatarDetailProps) => JSX.Element;
+export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl }: IAvatarDetailProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare type BadgeTypes = 'default' | 'primary' | 'important';
 export declare const DEFAULT_BADGE_CLASSES = "sked-badge-min-w sk-text-xxs sk-font-medium sk-tracking-wide sk-h-5 sk-pb-px sk-rounded-full sk-inline-flex sk-items-center sk-justify-center";
 export interface IBadgeProps {
@@ -15,4 +15,4 @@ export interface IBadgeProps {
      */
     badgeType?: BadgeTypes;
 }
-export declare const Badge: ({ count, countLimiter, badgeType }: IBadgeProps) => JSX.Element;
+export declare const Badge: ({ count, countLimiter, badgeType }: IBadgeProps) => React.JSX.Element;

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ComponentStory } from '@storybook/react';
 import { IBadgeProps } from './Badge';
 declare const _default: {
     title: string;
-    component: (props: IBadgeProps) => JSX.Element;
+    component: (props: IBadgeProps) => React.JSX.Element;
     argTypes: {
         badgeType: {
             options: string[];
@@ -14,4 +14,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Basic: ComponentStory<({ count, countLimiter, badgeType }: IBadgeProps) => JSX.Element>;
+export declare const Basic: ComponentStory<({ count, countLimiter, badgeType }: IBadgeProps) => React.JSX.Element>;

package/dist/components/calendar-controls/CalendarControls.d.ts

@@ -20,10 +20,10 @@ export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivEleme
     onTodayClick?: () => void;
 }
 export declare function useCalendarControlsContext(): ICalendarControlProps;
-declare function CalendarControls(props: ICalendarControlProps): JSX.Element;
+declare function CalendarControls(props: ICalendarControlProps): React.JSX.Element;
 declare namespace CalendarControls {
     var TodayButton: React.FC<import("./elements/TodayButton").ITodayButtonProps>;
-    var NavigationButtons: (props: INavigationButtonProps) => JSX.Element;
+    var NavigationButtons: (props: INavigationButtonProps) => React.JSX.Element;
     var DateSelector: React.FC<IDateSelectorProps>;
     var RangePicker: React.FC<IRangeProps>;
 }

package/dist/components/calendar-controls/elements/NavigationButtons.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { IBaseDateSelectorProps } from './DateSelector';
 export interface INavigationButtonProps extends IBaseDateSelectorProps {
     hideTooltipIfDisabled?: boolean;
 }
-export declare const NavigationButtons: (props: INavigationButtonProps) => JSX.Element;
+export declare const NavigationButtons: (props: INavigationButtonProps) => React.JSX.Element;

package/dist/components/datepicker/DateTime.d.ts

@@ -1,10 +1,18 @@
-/// <reference types="react" />
+import React from 'react';
 export interface IDateTimeProps {
     dateTime?: Date;
     /**
-     * The time as it is selected by the user
+     * The date and time as it is selected by the user
      */
     onChange?: (value: Date) => void;
+    /**
+     * The date as it is selected by the user
+     */
+    onDateChange?: (value: Date) => void;
+    /**
+     * The time as it is selected by the user
+     */
+    onTimeChange?: (value: string) => void;
     /**
      * The incremental time to add for each selectable time window, by minutes
      */
@@ -13,10 +21,6 @@ export interface IDateTimeProps {
      * Used for setting aria-labelledby
      */
     id?: string;
-    /**
-     * Any suffix to add after the time input
-     */
-    timeSuffix?: string;
     /**
      * Is this input disabled?
      */
@@ -48,4 +52,4 @@ export declare const convertTimeStringTo24Hr: (value: string) => {
     hours: number;
     minutes: number;
 };
-export declare const DateTime: ({ timeIncrement, onChange, dateTime, disabled, openToDate, dateFormat, timeValueSelection, timePlaceholder, datePlaceholder, id }: IDateTimeProps) => JSX.Element;
+export declare const DateTime: ({ timeIncrement, onChange, onDateChange, onTimeChange, dateTime, disabled, openToDate, dateFormat, timeValueSelection, timePlaceholder, datePlaceholder, id }: IDateTimeProps) => React.JSX.Element;

package/dist/components/datepicker/Datepicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@emotion/core" />
 import * as React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
 import { RangeType } from '../calendar-controls/elements/RangePicker';
@@ -108,15 +107,16 @@ export interface DatepickerProps {
      * onCalendarClose fuction
      */
     onCalendarClose?: () => void;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
 }
 declare type CustomInputType = React.InputHTMLAttributes<HTMLInputElement> & {
-    onBlurCustom: () => void;
+    onBlurCustom: (event?: React.FocusEvent<HTMLInputElement>) => void;
     openCalendar: (open: boolean) => void;
     onBackspace: () => void;
     Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
 };
 export declare const CustomInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    onBlurCustom: () => void;
+    onBlurCustom: (event?: React.FocusEvent<HTMLInputElement>) => void;
     openCalendar: (open: boolean) => void;
     onBackspace: () => void;
     Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;

package/dist/components/datepicker/Time.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @format */
+import React from 'react';
 export declare const TIME_FORMAT = "h:mma";
 export declare const formatTime: (date: Date | number) => string;
 export declare const readonlyTimeFormat: ({ value, suffix }: {
@@ -40,4 +41,4 @@ export interface ITimeProps {
      */
     onChange?: (value: string) => void;
 }
-export declare const Time: ({ value, increment, suffix, onChange, placeholder, valueSelection, ...rest }: ITimeProps) => JSX.Element;
+export declare const Time: ({ value, increment, suffix, onChange, placeholder, valueSelection, ...rest }: ITimeProps) => React.JSX.Element;

package/dist/components/dynamic-table/DynamicTable-utils.d.ts

@@ -27,13 +27,13 @@ export declare const getSortArgs: (sortByControl: ControlStates) => {
 };
 export declare const wrapperProps: ITableWrapper['getWrapperProps'];
 export declare type SortIconProps<T extends object> = Pick<ITableHeaderCell<T>, 'canSort' | 'isSorted' | 'isSortedDesc' | 'getSortByToggleProps' | 'displayType'>;
-export declare const SortIcon: <T extends object>({ canSort, isSorted, isSortedDesc, getSortByToggleProps, displayType }: SortIconProps<T>) => JSX.Element;
-export declare const SelectCell: (props: Partial<TableToggleRowsSelectedProps>) => JSX.Element;
-export declare const TableHeaderCell: <T extends object>(props: ITableHeaderCell<T>) => JSX.Element;
+export declare const SortIcon: <T extends object>({ canSort, isSorted, isSortedDesc, getSortByToggleProps, displayType }: SortIconProps<T>) => React.JSX.Element;
+export declare const SelectCell: (props: Partial<TableToggleRowsSelectedProps>) => React.JSX.Element;
+export declare const TableHeaderCell: <T extends object>(props: ITableHeaderCell<T>) => React.JSX.Element;
 export declare const ExpandedTableCell: <T extends object>(props: UseTableCellProps<T, any> & {
     children?: React.ReactNode;
-}) => JSX.Element;
-export declare const CondensedTableCell: <T extends object>(props: UseTableCellProps<T, any>) => JSX.Element;
+}) => React.JSX.Element;
+export declare const CondensedTableCell: <T extends object>(props: UseTableCellProps<T, any>) => React.JSX.Element;
 export declare const DefaultRenderer: <T extends object>(instance: import("react-table").TableInstance<T> & {
     column: import("react-table").ColumnInstance<T>;
     row: Row<T>;
@@ -41,5 +41,5 @@ export declare const DefaultRenderer: <T extends object>(instance: import("react
     value: any;
 } & {
     column: IDynamicTableColumn<T>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<ITableWrapper>;

package/dist/components/dynamic-table/DynamicTable.d.ts

@@ -75,5 +75,5 @@ interface IDynamicTableProps<T extends object> {
     TableWrapper?: React.FC<ITableWrapper>;
 }
 export declare type IDynamicTable<T extends object> = Pick<TableOptions<T>, 'getRowId' | 'data' | 'initialState' | 'autoResetSortBy' | 'autoResetSelectedRows' | 'manualRowSelectedKey'> & UseRowClickOptions<T> & IDynamicTableProps<T>;
-export declare const DynamicTable: <T extends object>(props: IDynamicTable<T>) => JSX.Element;
+export declare const DynamicTable: <T extends object>(props: IDynamicTable<T>) => React.JSX.Element;
 export {};

package/dist/components/dynamic-table/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { ColumnInterface, ColumnInstance, UseTableCellProps, Row, ColumnInterfaceBasedOnValue } from 'react-table';
+import { ColumnInterface, ColumnInstance, UseTableCellProps, Row, ColumnInterfaceBasedOnValue, HeaderProps, Renderer } from 'react-table';
 export interface UseRowClickOptions<D extends object> {
     /**
      * This will add row click behaviour. Whenever a cell is clicked within a row,
@@ -20,7 +20,7 @@ declare module 'react-table' {
         emptyCellText?: string;
     }
     interface ColumnInstance<D extends object = {}> extends UseSortByColumnProps<D>, UseRowSelectRowProps<D> {
-        Header?: string;
+        Header?: Renderer<HeaderProps<D>> | undefined;
     }
     interface Row<D extends object = {}> extends UseRowSelectRowProps<D> {
     }
@@ -33,7 +33,7 @@ declare module 'react-table' {
  * for empty values.
  */
 export interface IDynamicTableColumn<T extends object> extends Omit<ColumnInterface<T>, 'Header'>, ColumnInterfaceBasedOnValue<T> {
-    Header?: string;
+    Header?: Renderer<HeaderProps<T>> | undefined;
 }
 export declare type ControlStates = 'controlled' | 'uncontrolled' | 'disabled';
 export declare type RowControlStates = 'rowOnly' | 'allRows' | 'disabled';

package/dist/components/filter-bar/FilterBar.d.ts

@@ -35,20 +35,20 @@ export declare class FilterBar<T extends IFilterItem> extends React.PureComponen
     applySelectedItemsToFilter: (filter: IFilter<T>, selectedFilterItems: T[]) => IAppliedFilter<T>[];
     applyAndSaveFilters: (filter: IFilter<T>) => (selectedFilterItems: T[]) => void;
     saveFilters: (filters: IAppliedFilter<T>[]) => void;
-    renderAddFilterButton: () => JSX.Element;
+    renderAddFilterButton: () => React.JSX.Element;
     /**
      * Render the add filter control button.
      */
-    renderAddFilterControl: () => JSX.Element;
+    renderAddFilterControl: () => React.JSX.Element;
     clearTemporaryPill: () => void;
     closeTemporaryPill: () => () => void;
-    renderFilterItemSearch: (filter: IFilter<T>, preSelectedItems: T[], scrollableContentClasses?: string) => JSX.Element;
+    renderFilterItemSearch: (filter: IFilter<T>, preSelectedItems: T[], scrollableContentClasses?: string) => React.JSX.Element;
     /**
      * After we 'add' a filter, we want to render this 'temporary' pill in the filter bar. This temporary pill will be removed once we hit apply or exit out of the dropdown.
      */
-    renderTemporaryPill: (filterName: string, filterId: string, preSelectedItems: T[]) => JSX.Element;
+    renderTemporaryPill: (filterName: string, filterId: string, preSelectedItems: T[]) => React.JSX.Element;
     removeFilter: (filterId: string) => void;
     editFilter: (filterId: string) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/filter-bar/filter-list/FilterList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFilterItem } from '../interfaces';
 export interface IFilterListProps<T> {
     items: T[];
@@ -7,4 +7,4 @@ export interface IFilterListProps<T> {
     className?: string;
     scrollableContentClasses?: string;
 }
-export declare const FilterList: <T extends IFilterItem>({ items, itemRenderer, loading, className, scrollableContentClasses }: IFilterListProps<T>) => JSX.Element;
+export declare const FilterList: <T extends IFilterItem>({ items, itemRenderer, loading, className, scrollableContentClasses }: IFilterListProps<T>) => React.JSX.Element;

package/dist/components/filter-bar/filter-list/FilterListWithApply.d.ts

@@ -17,8 +17,8 @@ export declare class FilterListWithApply<T extends IFilterItem> extends React.Pu
     constructor(props: IFilterListWithApplyProps<T>);
     getSelectedItems: (item: T, checked?: boolean) => T[];
     onItemChange: (item: T) => ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
-    itemRenderer: (item: T) => JSX.Element;
+    itemRenderer: (item: T) => React.JSX.Element;
     applyFilters: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/filter-bar/filter-list/FilterSearch.d.ts

@@ -16,6 +16,6 @@ export declare class FilterSearch<T extends IFilterItem> extends React.PureCompo
     componentDidUpdate(prevProps: IFilterSearchProps<T>): void;
     updateItemsState: (items: T[]) => void;
     onFilterSearch: (value: string) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/filter-bar/filter-list/RemoteSearch.d.ts

@@ -21,5 +21,5 @@ export declare class RemoteSearch<T extends IFilterItem> extends React.PureCompo
     private _debouncedSearch;
     constructor(props: IRemoteSearchProps<T>);
     onFilterSearch: (value: string) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/components/filter-bar/filter-pill/FilterPill.d.ts

@@ -17,7 +17,7 @@ export declare class FilterPill<T extends IFilterItem> extends React.PureCompone
     renderedSelectedItems: (selected: IFilterItem[]) => string;
     removeFilter: (filterId: string, onRemove: IFilterPillProps['onRemove']) => (e: React.MouseEvent<HTMLButtonElement>) => void;
     editFilter: (filterId: string, onEdit: IFilterPillProps['onRemove'], isReadonly: boolean) => () => void;
-    renderCloseButton: (name: string, onRemove: IFilterPillProps['onRemove'], selected: IFilterItem[], removable: boolean, isReadonly?: boolean) => JSX.Element;
-    render(): JSX.Element;
+    renderCloseButton: (name: string, onRemove: IFilterPillProps['onRemove'], selected: IFilterItem[], removable: boolean, isReadonly?: boolean) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/forms/SkedFormValidation.d.ts

@@ -88,11 +88,11 @@ export declare class SkedFormValidation<T extends object> extends React.PureComp
      * for instance - input has onchange and will bubble up, needs a way of adding name)
      */
     customFormFieldUpdate: (setField: SkedFormChildren<T>['setField'], fields: T, setModified?: (name: keyof T) => void) => (fieldName: keyof T, runOnUpdate?: (fields: T) => T) => (value: any) => void;
-    wrapInValidatorProvider: (customValidators: SkedFormValidationProps<T>['customValidators']) => JSX.Element;
+    wrapInValidatorProvider: (customValidators: SkedFormValidationProps<T>['customValidators']) => React.JSX.Element;
     handleClick: (evt: React.FormEvent<HTMLElement>) => void;
     handleFormSubmit: (formData: FormContext<T>) => Promise<void>;
     setFormReadonly: (event?: React.FormEvent<HTMLElement>) => void;
     resetFieldsToInitialValues: () => void;
-    renderFormValidation: () => JSX.Element;
-    render(): JSX.Element;
+    renderFormValidation: () => React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/components/forms/elements/AsyncMultiSearchSelect.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISelectItem, AsyncMultiSearchSelectBox } from './interfaces';
-export declare const AsyncMultiSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, onSelectedItemsChange, disabled, ...rest }: AsyncMultiSearchSelectBox<T>) => JSX.Element;
+export declare const AsyncMultiSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, onSelectedItemsChange, disabled, ...rest }: AsyncMultiSearchSelectBox<T>) => React.JSX.Element;

package/dist/components/forms/elements/AsyncSearchSelect.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISelectItem, AsyncSelectBox } from './interfaces';
 /**
  * Asynchronous version of SearchSelect for use with remote fetching
  */
-export declare const AsyncSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, icon, id, name, placeholder, autoFocus, className, onSelectedItemChange, disabled, itemToString, ItemRenderer, ...rest }: AsyncSelectBox<T>) => JSX.Element;
+export declare const AsyncSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, icon, id, name, placeholder, autoFocus, className, onSelectedItemChange, disabled, itemToString, ItemRenderer, ...rest }: AsyncSelectBox<T>) => React.JSX.Element;

package/dist/components/forms/elements/FormElements.d.ts

@@ -30,8 +30,8 @@ declare type FormElementProps = InputFormValidationProps & React.InputHTMLAttrib
 export declare class FormInputElement extends React.PureComponent<FormElementProps, {}> {
     private _inputClassNames;
     isOfTextType: () => boolean;
-    withInlineLabel: (inputComponent: React.ReactElement, props: FormElementProps) => JSX.Element;
-    render(): JSX.Element;
+    withInlineLabel: (inputComponent: React.ReactElement, props: FormElementProps) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 declare type LabelStatus = 'required' | 'optional';
 /**

package/dist/components/forms/elements/MultiSearchSelect.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISelectItem, MultiSearchSelectBox } from './interfaces';
-export declare const MultiSearchSelect: <T extends ISelectItem<any>>({ initialSelectedItems, items, id, name, placeholder, autoFocus, className, onSelectedItemsChange, disabled, loading, itemToString, ItemRenderer, MenuItemsRenderer, selectAll, onInputValueChange, onMenuToggle, getKey, ...rest }: MultiSearchSelectBox<T>) => JSX.Element;
+export declare const MultiSearchSelect: <T extends ISelectItem<any>>({ initialSelectedItems, items, id, name, placeholder, autoFocus, className, onSelectedItemsChange, disabled, loading, itemToString, ItemRenderer, MenuItemsRenderer, selectAll, onInputValueChange, onMenuToggle, getKey, ...rest }: MultiSearchSelectBox<T>) => React.JSX.Element;

package/dist/components/forms/elements/SearchSelect.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ISelectItem, SelectBox } from './interfaces';
 /**
  * A searchable select component. Just like it's native counterpart, only a valid listed option is allowed.
  */
-export declare const SearchSelect: <T extends ISelectItem<any>>({ id, name, items, placeholder, autoFocus, className, icon, onSelectedItemChange, disabled, onMenuToggle, loading, itemToString, ItemRenderer, filterHandler, itemIsValid, getNewItemData, ...rest }: SelectBox<T>) => JSX.Element;
+export declare const SearchSelect: <T extends ISelectItem<any>>({ id, name, items, placeholder, autoFocus, className, icon, onSelectedItemChange, disabled, onMenuToggle, loading, itemToString, ItemRenderer, filterHandler, itemIsValid, getNewItemData, ...rest }: SelectBox<T>) => React.JSX.Element;

package/dist/components/forms/elements/select-components.d.ts

@@ -18,7 +18,7 @@ interface ISearchSelectTrigger {
 }
 export declare const SearchSelectTrigger: React.FC<ISearchSelectTrigger & React.InputHTMLAttributes<HTMLInputElement>>;
 export declare const SelectMenu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<HTMLUListElement>>;
-export declare const SelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, index, highlightedIndex, getItemProps }: ISelectMenuItem<T>) => JSX.Element;
+export declare const SelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, index, highlightedIndex, getItemProps }: ISelectMenuItem<T>) => React.JSX.Element;
 export interface IPlainMultiSelectMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
     item: ISelectItem;
     isSelected: boolean;
@@ -26,7 +26,7 @@ export interface IPlainMultiSelectMenuItemProps extends React.HTMLAttributes<HTM
 export declare const PlainMultiSelectMenuItem: React.FC<IPlainMultiSelectMenuItemProps>;
 export declare const MultiSelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, isSelected, index, highlightedIndex, getItemProps }: ISelectMenuItem<T> & {
     isSelected: boolean;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const SelectEmptyState: React.FC;
 interface IMultiSearchSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
     hasItems: boolean;

package/dist/components/forms/elements/select-hooks.d.ts

@@ -23,7 +23,7 @@ export declare const useAutoExpandingInput: ({ defaultInputWidth, inputProps, cl
     inputValueWidth: number;
     updateInputWidth: () => void;
     setInputValueWidth: React.Dispatch<React.SetStateAction<number>>;
-    AutoExpandingInput: JSX.Element;
+    AutoExpandingInput: React.JSX.Element;
 };
 export declare function useOnClickOutside(refs: React.RefObject<HTMLElement>[], handler: (event: MouseEvent) => void): void;
 export interface UseRunPromiseState<D> {

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

@@ -22,5 +22,5 @@ interface IProps extends React.SVGAttributes<SVGElement> {
 /**
  * The Icon component should be used whenever an icon needs to be displayed. It will naturally inherit any text colour but this can be changed by supplied a class directly. Default size of 18px/18px.
  */
-export declare const Icon: ({ name, className, size, onClick, ...otherProps }: IProps) => JSX.Element;
+export declare const Icon: ({ name, className, size, onClick, ...otherProps }: IProps) => React.JSX.Element;
 export {};

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

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ILinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     type?: 'primary' | 'secondary';
 }
-export declare const Link: ({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element;
+export declare const Link: ({ type, className, children, ...otherProps }: ILinkProps) => React.JSX.Element;

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ComponentStory } from '@storybook/react';
 import { ILinkProps } from './Link';
 declare const _default: {
     title: string;
-    component: ({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element;
+    component: ({ type, className, children, ...otherProps }: ILinkProps) => React.JSX.Element;
     argTypes: {
         type: {
             options: string[];
@@ -14,4 +14,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Basic: ComponentStory<({ type, className, children, ...otherProps }: ILinkProps) => JSX.Element>;
+export declare const Basic: ComponentStory<({ type, className, children, ...otherProps }: ILinkProps) => React.JSX.Element>;

package/dist/components/modals/Modals.d.ts

@@ -16,6 +16,7 @@ export declare const DynamicModal: React.FC<IDynamicModal & ModalContentProps>;
 export interface IConfirmationModalProps {
     onConfirm: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     onCancel: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    cancelButtonText?: string;
     confirmButtonText?: string;
     /**
      * Used to indicate the current onConfirm action is in progress.
@@ -28,6 +29,6 @@ export interface IConfirmationModalState {
 export declare class ConfirmationModal extends React.PureComponent<IConfirmationModalProps, IConfirmationModalState> {
     constructor(props: IConfirmationModalProps);
     handleConfirmButtonClick: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/popout/PopOut.d.ts

@@ -57,5 +57,5 @@ export interface IPopOutState {
  *
  * @requires PopOutBase
  */
-export declare const PopOut: (props: IPopOutProps) => JSX.Element;
+export declare const PopOut: (props: IPopOutProps) => React.JSX.Element;
 export {};

package/dist/components/popups/info-window/InfoWindow.d.ts

@@ -42,4 +42,4 @@ export declare type IInfoWindowProps = IPopOutPropsSubset & {
      */
     style?: React.CSSProperties;
 };
-export declare const InfoWindow: (props: IInfoWindowProps) => JSX.Element;
+export declare const InfoWindow: (props: IInfoWindowProps) => React.JSX.Element;

package/dist/components/popups/info-window/LegacyInfoWindow.d.ts

@@ -99,6 +99,7 @@ export declare class LegacyInfoWindow extends React.PureComponent<ILegacyInfoWin
     private _triangleRef;
     private _cursorPosition;
     private _triggerRect;
+    private _root;
     constructor(props: ILegacyInfoWindowProps);
     componentDidMount(): void;
     componentDidUpdate(oldProps: ILegacyInfoWindowProps): void;
@@ -144,12 +145,13 @@ export declare class LegacyInfoWindow extends React.PureComponent<ILegacyInfoWin
     };
     removeRenderingContainer(): void;
     createRenderContainer(): HTMLDivElement;
+    createRenderRoot(): void;
     /**
      * The first render wont be positioned properly since we don't have the width/height to calculate the position.
      * `runStyleRender` runs a second render when we have the contentContainer rendered to calculate the position.
      */
     renderContent(runStyleRender?: boolean): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const InfoWindowContext: React.Context<InfoWindowState>;
 interface InfoWindowState {

package/dist/components/popups/overflow-tooltip/OverflowTooltip.d.ts

@@ -26,5 +26,5 @@ export declare class OverflowTooltip extends React.PureComponent<IOverflowToolti
     refElement: (element: HTMLDivElement) => void;
     checkOverflow: () => void;
     isTextOverflow(): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ILegacyInfoWindowProps } from '../info-window/LegacyInfoWindow';
 import { Position } from '../info-window/info-window-utils';
 import './tooltip.scss';
@@ -17,5 +17,5 @@ export interface ITooltipProps extends ILegacyInfoWindowProps {
 /**
  * Tooltips are an extended version of the info window that triggers on hover by default, delayed slightly and is styled with tooltip styles
  */
-export declare const Tooltip: (props: ITooltipProps) => JSX.Element;
+export declare const Tooltip: (props: ITooltipProps) => React.JSX.Element;
 export {};

package/dist/components/portal/Portal.d.ts

@@ -17,6 +17,6 @@ export declare class Portal extends React.PureComponent<IProps, {}> {
     componentDidUpdate(prevProps: IProps): void;
     componentWillUnmount(): void;
     setRootContainerPosition: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/components/search-box/SearchBox.d.ts

@@ -5,5 +5,5 @@ export declare class SearchBox extends React.PureComponent<{
     className?: string;
 }, {}> {
     changeValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -31,6 +31,6 @@ export declare class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     onSelect: () => void;
     hasSubMenus: (tab: ITab) => boolean;
     isTabActive: (tab: ITab) => boolean;
-    renderSubMenus: () => JSX.Element[];
-    render(): JSX.Element;
+    renderSubMenus: () => React.JSX.Element[];
+    render(): React.JSX.Element;
 }