@skedulo/sked-ui 21.8.3 → 21.9.0

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

@@ -59,7 +59,7 @@ interface IAsyncSearchSelect<T extends ISelectItem> {
      */
     useCache?: boolean;
 }
-export declare type CommonComboBoxTypes<T extends ISelectItem> = Pick<UseComboboxProps<T>, 'initialIsOpen' | 'isOpen' | 'initialHighlightedIndex' | 'highlightedIndex'>;
+export type CommonComboBoxTypes<T extends ISelectItem> = Pick<UseComboboxProps<T>, 'initialIsOpen' | 'isOpen' | 'initialHighlightedIndex' | 'highlightedIndex'>;
 interface ISelectBox<T extends ISelectItem> extends ISearchSelect<T> {
     onSelectedItemChange: (item: T) => void;
     /**
@@ -81,28 +81,28 @@ interface ISelectBox<T extends ISelectItem> extends ISearchSelect<T> {
      */
     getNewItemData?: (inputValue: string) => T[];
 }
-export declare type SelectBox<T extends ISelectItem> = ISelectBox<T> & CommonComboBoxTypes<T> & Pick<UseComboboxProps<T>, 'initialSelectedItem' | 'selectedItem'> & {
+export 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 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;
 }
-export declare type MultiSearchSelectBox<T extends ISelectItem> = IMultiSearchSelect<T> & CommonComboBoxTypes<T> & Pick<UseMultipleSelectionProps<T>, 'initialSelectedItems' | 'selectedItems'> & {
+export type MultiSearchSelectBox<T extends ISelectItem> = IMultiSearchSelect<T> & CommonComboBoxTypes<T> & Pick<UseMultipleSelectionProps<T>, 'initialSelectedItems' | 'selectedItems'> & {
     loading?: boolean;
 } & {
     getKey?: (item: T) => string;
 };
-export declare type AsyncMultiSearchSelectBox<T extends ISelectItem> = Omit<MultiSearchSelectBox<T>, 'items'> & IAsyncSearchSelect<T>;
+export type AsyncMultiSearchSelectBox<T extends ISelectItem> = Omit<MultiSearchSelectBox<T>, 'items'> & IAsyncSearchSelect<T>;
 export {};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modifier, StrictModifier } from 'react-popper';
-declare type MatchTriggerWidthModifer = Modifier<'matchTriggerWidth', {}>;
-declare type CustomModifiers = MatchTriggerWidthModifer;
+type MatchTriggerWidthModifer = Modifier<'matchTriggerWidth', {}>;
+type CustomModifiers = MatchTriggerWidthModifer;
 interface IUseSelectPopperConfigReturnType {
     selectPopperModifiers: (StrictModifier | CustomModifiers)[];
 }
@@ -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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import icons from './iconPaths';
-export declare type IconNames = keyof typeof icons;
+export type IconNames = keyof typeof icons;
 interface IProps extends React.SVGAttributes<SVGElement> {
     /**
      * Name of the icon
@@ -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.FC<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/lozenge/CustomLozenge.d.ts

@@ -16,6 +16,6 @@ interface ICustomLozenge {
     icon?: IconNames;
     tooltipPosition?: ITooltipPosition;
 }
-declare type LozengeProps = ICustomLozenge & React.HTMLAttributes<HTMLDivElement>;
+type LozengeProps = ICustomLozenge & React.HTMLAttributes<HTMLDivElement>;
 export declare const CustomLozenge: React.FC<LozengeProps>;
 export {};

package/dist/components/lozenge/Lozenge.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { IconNames } from '../icon/Icon';
 import { ITooltipPosition } from '../popups/tooltip/Tooltip';
-export declare type LozengeColors = 'neutral-light' | 'neutral' | 'orange' | 'green' | 'cyan' | 'red' | 'sapphire' | 'purple' | 'purple-dark' | 'purple-darker';
-export declare type LozengeTheme = 'transparent' | 'pale' | 'solid';
+export type LozengeColors = 'neutral-light' | 'neutral' | 'orange' | 'green' | 'cyan' | 'red' | 'sapphire' | 'purple' | 'purple-dark' | 'purple-darker';
+export type LozengeTheme = 'transparent' | 'pale' | 'solid';
 interface ILozenge {
     label: string;
     color: LozengeColors;
@@ -17,6 +17,6 @@ interface ILozenge {
     icon?: IconNames;
     tooltipPosition?: ITooltipPosition;
 }
-declare type LozengeProps = ILozenge & React.HTMLAttributes<HTMLDivElement>;
+type LozengeProps = ILozenge & React.HTMLAttributes<HTMLDivElement>;
 export declare const Lozenge: React.FC<LozengeProps>;
 export {};

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

@@ -1,19 +1,20 @@
 import * as React from 'react';
-declare type ModalContentProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'datatype'>;
+type ModalContentProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'datatype'>;
 interface IDynamicModal {
     header?: JSX.Element;
     footer?: JSX.Element;
     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;
@@ -29,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/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.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'>;
+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/popout/usePopOut.d.ts

@@ -1,5 +1,5 @@
 import { IPopOutProps } from './PopOut';
-declare type UsePopOutProps = Pick<IPopOutProps, 'delayShow' | 'preventShow' | 'onClose' | 'openOnMount'>;
+type UsePopOutProps = Pick<IPopOutProps, 'delayShow' | 'preventShow' | 'onClose' | 'openOnMount'>;
 export declare const usePopOut: ({ delayShow, preventShow, onClose, openOnMount }: UsePopOutProps) => {
     visible: boolean;
     openPopOut: () => void;

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

@@ -11,9 +11,9 @@ export interface IRequiredProps {
      */
     position: IPopOutProps['placement'];
 }
-export declare type IPopOutPropsSubset = IRequiredProps & Omit<IPopOutProps, 'children' | 'trigger' | 'showArrow'>;
-export declare type IInfoWindowEvent = 'click' | 'mount';
-export declare type IInfoWindowProps = IPopOutPropsSubset & {
+export type IPopOutPropsSubset = IRequiredProps & Omit<IPopOutProps, 'children' | 'trigger' | 'showArrow'>;
+export type IInfoWindowEvent = 'click' | 'mount';
+export type IInfoWindowProps = IPopOutPropsSubset & {
     children: React.ReactNode;
     /**
      * Event type used to trigger the info window, 'hover' is now deprecated
@@ -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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IAnchorScores, ICursorOptions, ICursorPoints, Position } from './info-window-utils';
-declare type ILegacyInfoWindowEvent = 'click' | 'hover' | 'mount';
+type ILegacyInfoWindowEvent = 'click' | 'hover' | 'mount';
 interface IInfoWindowStyles<T> {
     triangleStyles: {
         top: T;
@@ -21,7 +21,7 @@ export interface ILegacyInfoWindowRequiredProps {
      */
     position: Position;
 }
-export declare type ILegacyInfoWindowProps = ILegacyInfoWindowRequiredProps & {
+export type ILegacyInfoWindowProps = ILegacyInfoWindowRequiredProps & {
     children?: React.ReactNode;
     /**
      * ILegacyInfoWindowEvent type used to trigger the info window
@@ -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/info-window/info-window-utils.d.ts

@@ -6,7 +6,7 @@ export interface ICursorOptions {
     rule: 'follow' | 'follow-x' | 'follow-y';
     keepOnMouseMove?: boolean;
 }
-export declare type Position = 'top' | 'right' | 'bottom' | 'left';
+export type Position = 'top' | 'right' | 'bottom' | 'left';
 export declare const getPositionEvalOrder: (position: Position) => Position[];
 interface IAnchorPoint {
     position: Position;

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,10 +1,10 @@
-/// <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';
-export declare type ITooltipPosition = Position;
-declare type IColorScheme = 'dark' | 'light';
-declare type IAlignStyle = 'center' | 'left' | 'right';
+export type ITooltipPosition = Position;
+type IColorScheme = 'dark' | 'light';
+type IAlignStyle = 'center' | 'left' | 'right';
 export interface ITooltipProps extends ILegacyInfoWindowProps {
     /**
      * Colour scheme for the tooltip content.  Available options are 'dark' and 'light'
@@ -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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type StatusType = 'general' | 'success' | 'warning' | 'error';
+type StatusType = 'general' | 'success' | 'warning' | 'error';
 export interface IStatusIconProps {
     /**
      * The type of status. (general, success, warning or error)
@@ -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.FC<React.HTMLAttributes<HTMLTableElement>>;
-export declare const TableHeadRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>>;
+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.FC<React.HTMLAttributes<HTMLTableRowElement>>;
-export declare const TableCell: React.FC<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

@@ -1,7 +1,7 @@
 /// <reference types="lodash" />
 import * as React from 'react';
 import { ITab as Tab, ITabsProps, ITabsState, Theme } from './interfaces';
-export declare type ITab = Tab;
+export type ITab = Tab;
 export declare const getClassNamesByTheme: (theme: string, isActive: boolean, isFocused?: boolean, className?: string) => {
     menuItem: string;
     subMenuItem: string;
@@ -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

@@ -3,7 +3,7 @@ export declare enum Theme {
     SUB = "sub",
     GLOBAL = "global"
 }
-export declare type AsMenuType = 'a' | 'span';
+export type AsMenuType = 'a' | 'span';
 export interface ITab {
     title: string;
     route: string;
@@ -56,6 +56,7 @@ interface IBaseItemProps {
     as?: AsMenuType;
 }
 export interface IMenuItemProps extends Omit<IBaseItemProps, 'theme'> {
+    children: React.ReactNode;
     focusRoute: IFocusRouteItem[];
     classes?: string;
     nesting?: number;