@skedulo/sked-ui 21.8.2 → 21.9.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type AvatarSizes = 'tiny' | 'small' | 'medium' | 'large';
+export type AvatarSizes = 'tiny' | 'small' | 'medium' | 'large';
 export interface IAvatar extends React.HTMLAttributes<HTMLDivElement> {
     /** This will be used for the 'letter' display and be the
      * default tooltip text if showTooltip is true
@@ -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,7 +1,7 @@
-/// <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'>;
+type AvatarDetailGroupSize = 'tiny' | 'small' | 'medium' | 'large';
+type AvatarProps = Pick<IAvatar, 'name' | 'imageUrl'>;
 export interface IAvatarDetailProps extends AvatarProps {
     /**
      * 'medium' is the default
@@ -15,5 +15,5 @@ export interface IAvatarDetailProps extends AvatarProps {
     linkUrl?: string;
     target?: string;
 }
-export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl, target }: IAvatarDetailProps) => JSX.Element;
+export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl, target }: IAvatarDetailProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IAvatar, AvatarSizes } from './Avatar';
-export declare type IAvatarInfo = Partial<Pick<IAvatar, 'name' | 'imageUrl' | 'tooltipText'> & {
+export type IAvatarInfo = Partial<Pick<IAvatar, 'name' | 'imageUrl' | 'tooltipText'> & {
     onClick: () => void;
 }>;
 export interface IAvatarGroupProps {

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type BadgeTypes = 'default' | 'primary' | 'important';
+import * as React from 'react';
+export 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/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconNames } from '../../icon/Icon';
-export declare type ButtonTypes = 'primary' | 'secondary' | 'transparent';
-export declare type IButtonProps = {
+export type ButtonTypes = 'primary' | 'secondary' | 'transparent';
+export type IButtonProps = {
     /**
      * The type of button to be displayed. Primary | Secondary | Transparent
      */

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

@@ -8,6 +8,6 @@ interface IconButtonProps {
     tooltipDelay?: ITooltipProps['delayShow'];
     disableTooltip?: boolean;
 }
-export declare type IIconButton = IconButtonProps & Partial<IButtonProps>;
-export declare const IconButton: React.FC<IIconButton>;
+export type IIconButton = IconButtonProps & Partial<IButtonProps>;
+export declare const IconButton: React.FC<React.PropsWithChildren<IIconButton>>;
 export {};

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

@@ -1,5 +1,5 @@
 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 type IconButtonDropdown = IIconButton & IButtonDropdownCommon;
+export declare const IconButtonDropdown: React.FC<React.PropsWithChildren<IconButtonDropdown>>;

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

@@ -1,6 +1,6 @@
 import { RangeType } from './elements/RangePicker';
-export declare type DateDirection = 'forward' | 'backward';
-export declare type DateFormat = 'MonthDayYear' | 'DayMonthYear';
+export type DateDirection = 'forward' | 'backward';
+export type DateFormat = 'MonthDayYear' | 'DayMonthYear';
 export declare const moveDate: (selected: Date, days: RangeType, direction: DateDirection) => Date;
 export declare const endOfPeriod: (selected: Date, selectedRange: RangeType) => Date;
 export declare const formatLongDate: (date: Date, dateFormat?: DateFormat) => string;

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/DateSelector.d.ts

@@ -3,7 +3,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import { ButtonTypes } from '../../..';
 import { IBaseCalendarControlProps } from '../CalendarControls';
 import { DateFormat } from '../CalendarControls-utils';
-export declare type SelectDateHandler = (date: Date) => void;
+export type SelectDateHandler = (date: Date) => void;
 export interface IBaseDateSelectorProps extends IBaseCalendarControlProps {
     /**
      * Whenever the date is changed, either through direct select, clicking to or navigating, the new date is provided to this function

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/calendar-controls/elements/RangePicker.d.ts

@@ -10,7 +10,7 @@ export interface IRangeProps extends IBaseCalendarControlProps {
      */
     rangeOptions?: RangeType[];
 }
-export declare type RangeType = 'day' | '3-days' | '2-weeks' | 'week' | 'month';
+export type RangeType = 'day' | '3-days' | '2-weeks' | 'week' | 'month';
 export declare const dateRangeLabel: {
     day: string;
     '3-days': string;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface IDateTimeProps {
     dateTime?: Date;
     /**
@@ -52,4 +52,4 @@ export declare const convertTimeStringTo24Hr: (value: string) => {
     hours: number;
     minutes: number;
 };
-export declare const DateTime: ({ timeIncrement, onChange, onDateChange, onTimeChange, 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';
+export type LocaleType = 'AU' | 'US' | 'UK';
+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.
@@ -110,17 +115,11 @@ export interface DatepickerProps {
     onCalendarClose?: () => void;
     inputRef?: React.MutableRefObject<HTMLInputElement>;
 }
-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 declare const CustomInput: React.ForwardRefExoticComponent<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;
 } & 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

@@ -26,14 +26,14 @@ export declare const getSortArgs: (sortByControl: ControlStates) => {
     manualSortBy: boolean;
 };
 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 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>) => 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 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>) => React.JSX.Element;
 export {};

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

@@ -35,14 +35,14 @@ declare module 'react-table' {
 export interface IDynamicTableColumn<T extends object> extends Omit<ColumnInterface<T>, 'Header'>, ColumnInterfaceBasedOnValue<T> {
     Header?: Renderer<HeaderProps<T>> | undefined;
 }
-export declare type ControlStates = 'controlled' | 'uncontrolled' | 'disabled';
-export declare type RowControlStates = 'rowOnly' | 'allRows' | 'disabled';
-export declare type DisplayType = 'expanded' | 'condensed';
+export type ControlStates = 'controlled' | 'uncontrolled' | 'disabled';
+export type RowControlStates = 'rowOnly' | 'allRows' | 'disabled';
+export type DisplayType = 'expanded' | 'condensed';
 export interface ITableHeaderCell<T extends object> extends ColumnInstance<T> {
     sticky: boolean;
     displayType: DisplayType;
 }
-export declare type ICellContentRenderer<T extends object> = Pick<IDynamicTableColumn<T>, 'Header' | 'emptyCellText' | 'id'> & Pick<UseTableCellProps<T>, 'value'>;
+export type ICellContentRenderer<T extends object> = Pick<IDynamicTableColumn<T>, 'Header' | 'emptyCellText' | 'id'> & Pick<UseTableCellProps<T>, 'value'>;
 interface IGetWrapperProps {
     className: string;
 }

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.FC<IEmptyState>;
+export declare const EmptyState: React.FC<React.PropsWithChildren<IEmptyState>>;
 export {};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IFilter, IAppliedFilter as AppliedFilter, IFilterItem as FilterItem, IAddedFilter } from './interfaces';
-export declare type IAppliedFilter<T extends FilterItem> = AppliedFilter<T>;
-export declare type IFilterItem = FilterItem;
+export type IAppliedFilter<T extends FilterItem> = AppliedFilter<T>;
+export type IFilterItem = FilterItem;
 export interface IFilterBarProps<T extends IFilterItem> {
     /**
      * An array of filter options. If a filter item is set to 'static' then it is permanently fixed and unable to be edited.
@@ -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.FC<{
+    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.FC<{
+    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

@@ -7,7 +7,7 @@ interface IFilterPillProps {
     removable?: boolean;
     className?: string;
 }
-export declare type FilterPillProps<T extends IFilterItem> = IFilterPillProps & Omit<IAppliedFilter<T>, 'isReadonly' | 'removable'>;
+export type FilterPillProps<T extends IFilterItem> = IFilterPillProps & Omit<IAppliedFilter<T>, 'isReadonly' | 'removable'>;
 export declare class FilterPill<T extends IFilterItem> extends React.PureComponent<FilterPillProps<T>, {}> {
     static defaultProps: {
         onRemove: (...args: any[]) => void;
@@ -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/filter-bar/interfaces.d.ts

@@ -1,4 +1,4 @@
-export declare type InputType = 'checkbox' | 'radio';
+export type InputType = 'checkbox' | 'radio';
 export interface IFilterItem {
     id: string;
     name: string;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { FormContext, FormProps, ValidationContext, Transforms, FieldsConfig, CustomValidatorFunction, ValueValidatorConfig } from 'calidation';
 export { Dirty, Errors, Fields, Transform, Transforms, FieldsConfig, Validator, FormContext, CustomValidatorFunction, SimpleValidator, SimpleValidatorConfig, FieldConfig, ValueValidatorConfig, ValueValidator, ValidatorContext } from 'calidation';
-export declare type FormSubmission<T extends object> = FormContext<T>;
-export declare type FormConfig<T extends object> = FieldsConfig<T>;
-export declare type CustomValueValidatorFunction<T extends object, P = any> = (config: ValueValidatorConfig<P, T>) => (value: P) => string | null;
+export type FormSubmission<T extends object> = FormContext<T>;
+export type FormConfig<T extends object> = FieldsConfig<T>;
+export type CustomValueValidatorFunction<T extends object, P = any> = (config: ValueValidatorConfig<P, T>) => (value: P) => string | null;
 interface IBehaviourOptions {
     clickToEdit: boolean;
 }
-export declare type SkedFormChildren<T extends object> = Omit<ValidationContext<T>, 'dirty'> & {
+export type SkedFormChildren<T extends object> = Omit<ValidationContext<T>, 'dirty'> & {
     isFormReadonly: boolean;
     fieldsModified: Set<keyof T>;
     setFormReadonly: (event?: React.FormEvent<HTMLElement>) => void;
@@ -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

@@ -6,7 +6,7 @@ interface InputFormValidationProps {
     inputAndInlineLabelWrapperClassName?: string;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare type InputSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full';
+type InputSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full';
 interface FormElementWrapperProps {
     readOnlyValue?: string;
     isReadOnly?: boolean;
@@ -21,7 +21,7 @@ export interface ValidationProps {
         error?: string | null;
     };
 }
-declare type FormElementProps = InputFormValidationProps & React.InputHTMLAttributes<HTMLInputElement>;
+type FormElementProps = InputFormValidationProps & React.InputHTMLAttributes<HTMLInputElement>;
 /**
  * Standard form inputs should be created using FormElement. It is responsible for creating the type of input you need as well as
  * displaying validation errors. Radio’s and Checkboxes can utilise the inlineLabel prop to show a label inline with the input.
@@ -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';
+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.FC<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, inputProps, ...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: restInputProps, ...rest }: SelectBox<T>) => React.JSX.Element;