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

package/dist/components/IntersectionObserverWrapper/IntersectionObserverWrapper.d.ts

@@ -35,5 +35,5 @@ interface IIntersectionObserverWrapper {
  * function when the element is visible within the specified viewport
  * based on supplied props. Useful for creating infinite scrolling behaviour.
  */
-export declare const IntersectionObserverWrapper: React.FC<IIntersectionObserverWrapper>;
+export declare const IntersectionObserverWrapper: React.FC<React.PropsWithChildren<IIntersectionObserverWrapper>>;
 export {};

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'>;
@@ -13,6 +13,7 @@ export interface IAvatarDetailProps extends AvatarProps {
     subtitle?: JSX.Element;
     className?: string;
     linkUrl?: string;
+    target?: string;
 }
-export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl }: IAvatarDetailProps) => JSX.Element;
+export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl, target }: 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/button-group/ButtonGroup.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 interface IButtonGroup extends React.HTMLProps<HTMLDivElement> {
     compact?: boolean;
 }
-export declare const ButtonGroup: React.FC<IButtonGroup>;
+export declare const ButtonGroup: React.FC<React.PropsWithChildren<IButtonGroup>>;
 export {};

package/dist/components/buttons/button-dropdown/ButtonDropdown.d.ts

@@ -10,5 +10,5 @@ interface IButtonDropdownProps extends IButtonDropdownCommon {
  * The DropdownButton component displays/hides children as a dropdown when clicked. The Menu and MenuItem
  components are strongly recommended to be used in conjunction with this component to enforce correct styling of the dropdown menu.
  */
-export declare const ButtonDropdown: React.FC<IButtonDropdownProps>;
+export declare const ButtonDropdown: React.FC<React.PropsWithChildren<IButtonDropdownProps>>;
 export {};

package/dist/components/buttons/icon-button/IconButton.d.ts

@@ -9,5 +9,5 @@ interface IconButtonProps {
     disableTooltip?: boolean;
 }
 export declare type IIconButton = IconButtonProps & Partial<IButtonProps>;
-export declare const IconButton: React.FC<IIconButton>;
+export declare const IconButton: React.FC<React.PropsWithChildren<IIconButton>>;
 export {};

package/dist/components/buttons/icon-button-dropdown/IconButtonDropdown.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { IIconButton } from '../icon-button/IconButton';
 import { IButtonDropdownCommon } from '../interfaces';
 export declare type IconButtonDropdown = IIconButton & IButtonDropdownCommon;
-export declare const IconButtonDropdown: React.FC<IconButtonDropdown>;
+export declare const IconButtonDropdown: React.FC<React.PropsWithChildren<IconButtonDropdown>>;

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,8 +1,13 @@
-/// <reference types="@emotion/core" />
 import * as React from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
 import { RangeType } from '../calendar-controls/elements/RangePicker';
 export declare type LocaleType = 'AU' | 'US' | 'UK';
+declare type CustomInputType = React.InputHTMLAttributes<HTMLInputElement> & {
+    onBlurCustom: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    openCalendar: (open: boolean) => void;
+    onBackspace: () => void;
+    Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
+};
 export interface DatepickerProps {
     /**
      * The currently selected date.
@@ -108,18 +113,13 @@ export interface DatepickerProps {
      * onCalendarClose fuction
      */
     onCalendarClose?: () => void;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
 }
-declare type CustomInputType = React.InputHTMLAttributes<HTMLInputElement> & {
-    onBlurCustom: () => 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;
 } & React.RefAttributes<HTMLInputElement>>;
-export declare const Datepicker: React.FC<DatepickerProps>;
+export declare const Datepicker: React.FC<React.PropsWithChildren<DatepickerProps>>;
 export {};

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;
-export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<ITableWrapper>;
+}) => React.JSX.Element;
+export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<React.PropsWithChildren<ITableWrapper>>;

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

@@ -72,8 +72,8 @@ interface IDynamicTableProps<T extends object> {
      *     </div>
      *   )
      */
-    TableWrapper?: React.FC<ITableWrapper>;
+    TableWrapper?: React.FC<React.PropsWithChildren<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/emptystate/EmptyState.d.ts

@@ -5,5 +5,5 @@ interface IEmptyState extends React.HTMLAttributes<HTMLDivElement> {
     message: string;
     className?: string;
 }
-export declare const EmptyState: React.SFC<IEmptyState>;
+export declare const EmptyState: React.FC<React.PropsWithChildren<IEmptyState>>;
 export {};

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { IFilterItem } from '../interfaces';
 export interface IFilterSearchProps<T> {
     items: T[];
-    children: React.SFC<{
+    children: React.FC<React.PropsWithChildren<{
         filteredItems: T[];
-    }>;
+    }>>;
     placeholder?: string;
     className?: string;
 }
@@ -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

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { IFilterItem } from '../interfaces';
 export interface IRemoteSearchProps<T> {
     useFetch: (searchTerm: string) => Promise<T[]>;
-    children: React.SFC<{
+    children: React.FC<React.PropsWithChildren<{
         fetchedItems: T[];
         searchTerm: string;
         isFetching: boolean;
-    }>;
+    }>>;
     preSelectedItems: T[];
     placeholder?: string;
     className?: string;
@@ -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/ReadOnly.d.ts

@@ -7,5 +7,5 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     placeholderValue?: string;
     maxContentLength?: number;
 }
-export declare const ReadOnly: React.SFC<IProps>;
+export declare const ReadOnly: React.FC<IProps>;
 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,25 +30,25 @@ 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';
 /**
  * Will render a form label and apply ‘required’ styling if required
  */
-export declare const FormLabel: React.FunctionComponent<{
+export declare const FormLabel: React.FunctionComponent<React.PropsWithChildren<{
     status?: LabelStatus;
     inline?: boolean;
-} & React.LabelHTMLAttributes<HTMLLabelElement>>;
+} & React.LabelHTMLAttributes<HTMLLabelElement>>>;
 /**
  *  FormElementWrapper should be used to wrap custom input components (such as Autocomplete). It will ensure that errors
  *  are displayed in a consistent fashion. The resulting input will need to have the class form-element__outline applied
  *  to it for us to hook into it to apply appropriate styling.
  */
-export declare const FormElementWrapper: React.SFC<FormElementWrapperProps & ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const FormElementWrapper: React.FC<React.PropsWithChildren<FormElementWrapperProps & ValidationProps & React.HTMLAttributes<HTMLDivElement>>>;
 /**
  * Use when a validation error isn’t tied to a particular field
  */
-export declare const FormValidationCallout: React.FunctionComponent<ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const FormValidationCallout: React.FunctionComponent<React.PropsWithChildren<ValidationProps & React.HTMLAttributes<HTMLDivElement>>>;
 export {};

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, inputProps, ...rest }: SelectBox<T>) => React.JSX.Element;

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+/// <reference types="@emotion/core" />
 import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { DOMAttributes } from 'react';
 import { IconNames } from '../../icon/Icon';
 export interface ISelectItem<T = any> {
     value: T;
@@ -83,16 +84,18 @@ interface ISelectBox<T extends ISelectItem> extends ISearchSelect<T> {
 export declare type SelectBox<T extends ISelectItem> = ISelectBox<T> & CommonComboBoxTypes<T> & Pick<UseComboboxProps<T>, 'initialSelectedItem' | 'selectedItem'> & {
     onMenuToggle?: (isOpen: boolean) => void;
     loading?: boolean;
+} & {
+    inputProps?: DOMAttributes<HTMLDivElement>;
 };
 export declare type AsyncSelectBox<T extends ISelectItem> = Omit<SelectBox<T>, 'items' | 'itemIsValid' | 'getNewItemData'> & IAsyncSearchSelect<T>;
 export interface IMultiSearchSelect<T extends ISelectItem> extends ISearchSelect<T> {
     selectAll?: 'enabled' | 'disabled';
     onMenuToggle?: (isOpen: boolean) => void;
-    MenuItemsRenderer?: React.FC<{
+    MenuItemsRenderer?: React.FC<React.PropsWithChildren<{
         items: T[];
         MenuItemRenderer: (item: T, index: number) => JSX.Element;
         inputValue: string;
-    }>;
+    }>>;
     onInputValueChange?: UseComboboxProps<T>['onInputValueChange'];
     onSelectedItemsChange: (items: T[]) => void;
 }

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,8 +26,8 @@ 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;
-export declare const SelectEmptyState: React.FC;
+}) => React.JSX.Element;
+export declare const SelectEmptyState: React.FC<React.PropsWithChildren<unknown>>;
 interface IMultiSearchSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
     hasItems: boolean;
     disabled: 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/info-card/InfoCard.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 /**
  * This is a wrapper for the other InfoCard components to sit in
  */
-export declare const InfoCard: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const InfoCard: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;

package/dist/components/inline-banner/InlineBanner.d.ts

@@ -6,4 +6,4 @@ export interface IInlineBannerProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * Displays a inline banner with various styling depending on the type.
  */
-export declare const InlineBanner: React.SFC<IInlineBannerProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const InlineBanner: React.FC<React.PropsWithChildren<IInlineBannerProps & React.HTMLAttributes<HTMLDivElement>>>;

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/loader/spinner/LoadingSpinner.d.ts

@@ -17,5 +17,5 @@ interface ILoadingSpinnerProps {
  * Loading Spinner inherits the color used in the parent element.
  * It accepts a size prop which defines the size of the spinner in px.
  */
-export declare const LoadingSpinner: React.SFC<ILoadingSpinnerProps>;
+export declare const LoadingSpinner: React.FC<ILoadingSpinnerProps>;
 export {};