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

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

@@ -6,16 +6,18 @@ 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;
     confirmButtonText?: string;
     /**
      * Used to indicate the current onConfirm action is in progress.
@@ -28,6 +30,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/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
      */
@@ -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

@@ -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,14 +18,14 @@ 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;
     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/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/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;
 }

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;