@skedulo/sked-ui 0.0.1-react-18-upgrade-test → 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/AvatarDetail.d.ts

@@ -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) => React.JSX.Element;
+export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl, target }: IAvatarDetailProps) => React.JSX.Element;
 export {};

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

@@ -2,6 +2,12 @@ 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.
@@ -109,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/dynamic-table/DynamicTable-utils.d.ts

@@ -42,4 +42,4 @@ export declare const DefaultRenderer: <T extends object>(instance: import("react
 } & {
     column: IDynamicTableColumn<T>;
 }) => React.JSX.Element;
-export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<ITableWrapper>;
+export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<React.PropsWithChildren<ITableWrapper>>;

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

@@ -72,7 +72,7 @@ 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>) => React.JSX.Element;

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/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;
 }

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;

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

@@ -37,18 +37,18 @@ 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/SearchSelect.d.ts

@@ -3,4 +3,4 @@ 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>) => React.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

@@ -27,7 +27,7 @@ export declare const PlainMultiSelectMenuItem: React.FC<IPlainMultiSelectMenuIte
 export declare const MultiSelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, isSelected, index, highlightedIndex, getItemProps }: ISelectMenuItem<T> & {
     isSelected: boolean;
 }) => React.JSX.Element;
-export declare const SelectEmptyState: React.FC;
+export declare const SelectEmptyState: React.FC<React.PropsWithChildren<unknown>>;
 interface IMultiSearchSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
     hasItems: boolean;
     disabled: boolean;

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/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 {};

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

@@ -6,14 +6,15 @@ interface IDynamicModal {
     loading?: boolean;
     scrollableContentClassNames?: string;
 }
-export declare const BaseModal: React.FC<Omit<ModalContentProps, 'className'>>;
+export declare const BaseModal: React.FC<React.PropsWithChildren<Omit<ModalContentProps, 'className'>>>;
 /**
  * Use DynamicModal when you have long content in your modal and you want it restricted to the viewport.
  * It accepts a header and footer which will remain static with the child content being placed in the
  * scrollable section.
  */
-export declare const DynamicModal: React.FC<IDynamicModal & ModalContentProps>;
+export declare const DynamicModal: React.FC<React.PropsWithChildren<IDynamicModal & ModalContentProps>>;
 export interface IConfirmationModalProps {
+    children: React.ReactNode;
     onConfirm: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     onCancel: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     cancelButtonText?: string;

package/dist/components/pagination/PaginationCount/PaginationCount.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { IPagination } from '../interfaces';
-export declare const PaginationCount: React.SFC<IPagination>;
+export declare const PaginationCount: React.FC<IPagination>;

package/dist/components/pagination/PaginationPages/PaginationPages.d.ts

@@ -5,10 +5,10 @@ export declare const Arrow: React.FC<{
     disable: boolean;
     onClick: (event: React.MouseEvent) => void;
 }>;
-export declare const Ellipsis: React.FC;
-export declare const Page: React.FC<{
+export declare const Ellipsis: () => React.JSX.Element;
+export declare const Page: React.FC<React.PropsWithChildren<{
     pageNo: number;
     isCurrent: boolean;
     onClick?: (event: React.MouseEvent) => void;
-}>;
-export declare const PaginationPages: React.SFC<IPagination>;
+}>>;
+export declare const PaginationPages: React.FC<IPagination>;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IPopOutBase } from './PopOutBase';
-declare type IPopOutBaseSubset = Omit<IPopOutBase, 'visible' | 'trigger'>;
+declare type IPopOutBaseSubset = Omit<IPopOutBase, 'visible' | 'trigger' | 'children'>;
 export interface IPopOutProps extends IPopOutBaseSubset {
     /**
      * The element you are rendering the content from
@@ -9,7 +9,7 @@ export interface IPopOutProps extends IPopOutBaseSubset {
     /**
      * The content to pop out
      */
-    children: (closePopOut: () => void) => JSX.Element | React.ReactNode;
+    children: (closePopOut: () => void) => React.ReactNode;
     /**
      * Close on clicking in the content area.  Defaults to false
      */

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ITooltipPosition, ITooltipProps } from '../tooltip/Tooltip';
 export interface IOverflowTooltipProps extends Pick<ITooltipProps, 'dataAttributes'> {
+    children: React.ReactNode;
     /** Maximum width the element expands to before being cut off */
     maxWidth?: number;
     className?: string;
@@ -17,10 +18,10 @@ export interface IOverflowTooltipState {
  * @requires Tooltip
  */
 export declare class OverflowTooltip extends React.PureComponent<IOverflowTooltipProps, IOverflowTooltipState> {
+    _element: HTMLDivElement;
     static defaultProps: {
         position: string;
     };
-    _element: HTMLDivElement;
     constructor(props: IOverflowTooltipProps);
     componentDidMount(): void;
     refElement: (element: HTMLDivElement) => void;

package/dist/components/status-icon/StatusIcon.d.ts

@@ -7,5 +7,5 @@ export interface IStatusIconProps {
     status: StatusType;
     className?: string;
 }
-export declare const StatusIcon: React.FC<IStatusIconProps>;
+export declare const StatusIcon: React.FC<React.PropsWithChildren<IStatusIconProps>>;
 export {};

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

@@ -4,13 +4,13 @@ export interface IHeaderCell {
     width?: string;
     className?: string;
 }
-export declare const Table: React.SFC<React.HTMLAttributes<HTMLTableElement>>;
-export declare const TableHeadRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>>;
-export declare const TableHead: React.SFC<{
+export declare const Table: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>>;
+export declare const TableHeadRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
+export declare const TableHead: React.FC<{
     cells: IHeaderCell[];
     sticky?: boolean;
     className?: string;
 }>;
-export declare const TableBody: React.SFC;
-export declare const TableRow: React.SFC<React.HTMLAttributes<HTMLTableRowElement>>;
-export declare const TableCell: React.SFC<React.TdHTMLAttributes<HTMLTableDataCellElement>>;
+export declare const TableBody: React.FC<React.PropsWithChildren<unknown>>;
+export declare const TableRow: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>>;
+export declare const TableCell: React.FC<React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableDataCellElement>>>;

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

@@ -56,6 +56,7 @@ interface IBaseItemProps {
     as?: AsMenuType;
 }
 export interface IMenuItemProps extends Omit<IBaseItemProps, 'theme'> {
+    children: React.ReactNode;
     focusRoute: IFocusRouteItem[];
     classes?: string;
     nesting?: number;