@pautena/react-design-system 0.4.3 → 0.4.5

package/dist/index.d.ts

@@ -1,12 +1,168 @@
 /// <reference types="react" />
-import * as _mui_material from '@mui/material';
-import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color, AlertColor } from '@mui/material';
 import * as React from 'react';
-import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode, Dispatch, SetStateAction } from 'react';
-import { LinkProps } from 'react-router-dom';
+import React__default, { PropsWithChildren, FunctionComponent, ReactElement, ReactNode, Dispatch, SetStateAction } from 'react';
+import * as _mui_material from '@mui/material';
+import { GridProps, AppBarProps as AppBarProps$1, PropTypes, SxProps, Theme, DrawerProps as DrawerProps$1, Color, AlertColor } from '@mui/material';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import { SelectInputProps } from '@mui/material/Select/SelectInput';
+import { Variant } from '@mui/material/styles/createTypography';
+import { LoremUnit } from 'lorem-ipsum/types/src/constants/units';
+
+interface BaseValueProps<T> {
+    /**
+     * Name of the displayed value
+     */
+    label: string;
+    /**
+     * Value displayed
+     */
+    value?: T;
+    /**
+     * String rendered if value is undefined
+     */
+    placeholder?: string;
+}
+declare const DefaultPlaceholder = "-";
+
+type ValueTextProps = BaseValueProps<string>;
+/**
+ * Displays a string value with a label
+ */
+declare const ValueText: ({ label, value: valueProp, placeholder, }: ValueTextProps) => JSX.Element;
+
+type ValueCardProps = PropsWithChildren;
+/**
+ * Container to show a labeled value
+ */
+declare const ValueCard: ({ children }: ValueCardProps) => JSX.Element;
+
+type ValueBooleanProps = BaseValueProps<boolean>;
+/**
+ * Displays a boolean value with a label
+ */
+declare const ValueBoolean: ({ label, value, placeholder, }: ValueBooleanProps) => JSX.Element;
+
+interface ValueDatetimeProps extends BaseValueProps<Date> {
+    /**
+     * Datetime format
+     */
+    format: string;
+}
+/**
+ * Displays a formated datetime with a label
+ */
+declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, }: ValueDatetimeProps) => JSX.Element;
+
+type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container"> & {
+    bordered?: boolean;
+}>;
+type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
+type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
+declare const groupValueItemClasses: {
+    root: string;
+};
+declare const GroupValueItem: GroupValueItemComponent;
+interface GroupValueCardProps {
+    title: string;
+    subtitle?: string;
+    centered?: boolean;
+    children: GroupValueItemElement | GroupValueItemElement[];
+}
+declare const GroupValueCard: ({ title, subtitle, centered, children }: GroupValueCardProps) => JSX.Element;
+
+/**
+ * Displays a centered loading indicator
+ */
+declare const LoadingArea: () => JSX.Element;
+
+interface QueryContainerError {
+    /**
+     * The error title
+     */
+    name?: string;
+    /**
+     * The description of the error
+     */
+    message: string;
+}
+interface QueryContainerSuccess {
+    /**
+     * The success title
+     */
+    name?: string;
+    /**
+     * The success text
+     */
+    message: string;
+}
+type QueryContainerProps = PropsWithChildren<{
+    /**
+     * There is a query in progress
+     */
+    isFetching: boolean;
+    /**
+     * The query has returned an error
+     */
+    error?: QueryContainerError;
+    /**
+     * The query has finished successfully
+     */
+    success?: QueryContainerSuccess;
+}>;
+/**
+ * Component to show different indicators based on the usual api query statuses
+ */
+declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
+
+interface AppBarProfile {
+    name: string;
+}
+interface AppBarProps extends AppBarProps$1 {
+    menu?: boolean;
+    title?: string;
+    search?: boolean;
+    profile?: AppBarProfile;
+    onClickSignOut: () => void;
+}
+type AppBarComponent = FunctionComponent<AppBarProps>;
+type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;
+
+declare const MiniAppBar: AppBarComponent;
+
+type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+declare const bulletClasses: {
+    root: string;
+};
+interface BulletProps {
+    /**
+     * Color palette used to draw the component
+     */
+    variant?: BulletVariant;
+}
+/**
+ * Dot to attract the user attention
+ */
+declare const Bullet: ({ variant }: BulletProps) => JSX.Element;
+
+type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+declare const labelClasses: {
+    root: string;
+};
+interface LabelProps {
+    /**
+     * Content of the component
+     */
+    text: string;
+    /**
+     * Color palette used to draw the component
+     */
+    variant?: LabelVariant;
+}
+/**
+ * Compact element to represent a text
+ */
+declare const Label: ({ text, variant }: LabelProps) => JSX.Element;
 
 type HeaderPreset = PropTypes.Color | "transparent";
 type HeaderActionVariant = "text" | "outlined" | "contained";
@@ -27,6 +183,20 @@ interface HeaderTab {
     label: string;
     disabled?: boolean;
 }
+interface HeaderNavigationButton {
+    /**
+     * Button text
+     */
+    text: string;
+    /**
+     * Url where the user has to be redirected
+     */
+    href: string;
+    /**
+     * Icon to be shown before the button
+     */
+    icon?: ReactElement;
+}
 type HeaderProps = {
     /**
      * Title of the header
@@ -58,6 +228,11 @@ type HeaderProps = {
      * If is set, a list of tabs is dispayed at the bottom
      */
     tabs?: HeaderTab[];
+    /**
+     * A single button that helps the user to navigate to
+     * a screen related to the current screen
+     */
+    navigationButton?: HeaderNavigationButton;
 };
 type HeaderComponent = FunctionComponent<HeaderProps>;
 type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;
@@ -68,49 +243,165 @@ type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;
  */
 declare const Header: HeaderComponent;
 
-declare const LinkBehaviour: React__default.ForwardRefExoticComponent<Omit<LinkProps, "to"> & {
-    href: LinkProps["to"];
-} & React__default.RefAttributes<any>>;
-declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps$1<"a", {}>, "ref"> & React__default.RefAttributes<any>>;
+type ContentProps = PropsWithChildren;
+type ContentComponent = FunctionComponent<ContentProps>;
+type ContentElement = ReactElement<ContentElement, ContentComponent>;
 
-interface QueryContainerError {
+declare const Content: ({ children }: ContentProps) => JSX.Element;
+
+interface CenterContainerProps {
+    children: ReactNode | undefined;
+    centerVertical?: boolean;
+    centerHorizontal?: boolean;
+    sx?: SxProps<Theme>;
+}
+declare function CenterContainer({ children, centerVertical, centerHorizontal, sx, }: CenterContainerProps): JSX.Element;
+
+interface NavItemAvatar {
+    src: string;
+    alt: string;
+}
+interface NavItemLabel {
+    text: string;
+    variant: LabelVariant;
+}
+interface NavItemBullet {
+    variant: BulletVariant;
+}
+interface NavItemLink {
+    id: string;
+    text: string;
+    href: string;
+    icon?: ReactElement;
+    avatar?: NavItemAvatar;
+    label?: NavItemLabel;
+    bullet?: NavItemBullet;
+}
+type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
+    items: NavItemLink[];
+};
+type NavItem = NavItemLink | NavItemCollapsable;
+interface NavSection {
+    title?: string;
+    items: NavItem[];
+}
+interface Nav {
+    items: NavSection[];
+}
+interface DrawerContentProps {
     /**
-     * The error title
+     * Item currently selected in the navigation
      */
-    name?: string;
+    selectedItem?: string;
     /**
-     * The description of the error
+     * Object with the content that has to be rendered
      */
-    message: string;
+    nav: Nav;
 }
-interface QueryContainerSuccess {
+type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
+type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
+interface DrawerProps extends DrawerProps$1 {
+    children: DrawerContentElement;
+}
+type DrawerComponent = FunctionComponent<DrawerProps>;
+type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+
+declare const Drawer: DrawerComponent;
+
+declare const MiniDrawer: _emotion_styled.StyledComponent<DrawerProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+
+type Props$1 = PropsWithChildren<{
+    initialOpen?: boolean;
+}>;
+declare const DrawerProvider: ({ children, initialOpen }: Props$1) => JSX.Element;
+
+interface DrawerContextProps {
+    isOpen: boolean;
+    close(): void;
+    open(): void;
+}
+declare const DrawerContext: React.Context<DrawerContextProps | undefined>;
+declare const UndefinedProvider: Error;
+declare const useDrawer: () => DrawerContextProps;
+
+/**
+ * Content to be shown inside a navigation
+ */
+declare const DrawerContent: DrawerContentComponent;
+
+interface DrawerItemProps {
     /**
-     * The success title
+     * Text displayed inside the item
      */
-    name?: string;
+    text: string;
     /**
-     * The success text
+     * Url where the user is going to be redirected
+     * if the item is clicked
      */
-    message: string;
+    href: string;
+    /**
+     * Icon displayed to the left
+     */
+    icon?: ReactElement;
+    /**
+     * Avatar displayed to the left
+     */
+    avatar?: NavItemAvatar;
+    /**
+     * Label with extra info displayed to the right
+     */
+    label?: NavItemLabel;
+    /**
+     * Bullet to attract the user attention displyed to the right
+     */
+    bullet?: NavItemBullet;
+    /**
+     * The item has to be marked as selected
+     */
+    selected?: boolean;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
 }
-type QueryContainerProps = PropsWithChildren<{
+/**
+ * Clicable item inside a drawer
+ */
+declare const DrawerItem: ({ text, icon, avatar, label, bullet, href, selected, sx, }: DrawerItemProps) => JSX.Element;
+
+interface DrawerSectionProps {
     /**
-     * There is a query in progress
+     * Section title
      */
-    isFetching: boolean;
+    title?: string;
     /**
-     * The query has returned an error
+     * List of items of that section
      */
-    error?: QueryContainerError;
+    items: NavItem[];
     /**
-     * The query has finished successfully
+     * Id of the item that has to be marked as selected
      */
-    success?: QueryContainerSuccess;
-}>;
+    selectedItem?: string;
+}
 /**
- * Component to show different indicators based on the usual api query statuses
+ * Render a group of items inside the drawer
+ * with an optional title
  */
-declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
+declare const DrawerSection: ({ title, items, selectedItem }: DrawerSectionProps) => JSX.Element;
+
+type EnhancedSelectSize = "small" | "medium";
+interface EnhancedSelectProps<T> {
+    label: string;
+    value: T;
+    loading?: boolean;
+    fetching?: boolean;
+    size?: EnhancedSelectSize;
+    color?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+declare const EnhancedSelect: <T extends React__default.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;
 
 interface SignInProps {
     title: string;
@@ -148,7 +439,7 @@ interface EnhancedTableHeadProps<T> {
 }
 declare const EnhancedTableHead: <T>({ order, orderBy, headCells, onRequestSort, }: EnhancedTableHeadProps<T>) => JSX.Element;
 
-interface Props$1<T> {
+interface Props<T> {
     readonly data: T[];
     search?: boolean;
     defaultSort: keyof T;
@@ -158,7 +449,7 @@ interface Props$1<T> {
     children: (data: T[]) => ReactNode;
 }
 declare const EnhancedTable: {
-    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: Props$1<T>): JSX.Element;
+    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: Props<T>): JSX.Element;
     defaultProps: {
         defaultOrder: string;
     };
@@ -175,113 +466,71 @@ interface EnhancedRemoteTableProps<T> {
 }
 declare const EnhancedRemoteTable: <T>({ children, data, loading, columns, defaultSort, defaultOrder, onRequestSort, }: EnhancedRemoteTableProps<T>) => JSX.Element;
 
-interface AppBarProfile {
-    name: string;
-}
-interface AppBarProps extends AppBarProps$1 {
-    menu?: boolean;
-    title?: string;
-    search?: boolean;
-    profile?: AppBarProfile;
-    onClickSignOut: () => void;
-}
-type AppBarComponent = FunctionComponent<AppBarProps>;
-type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;
-
-declare const MiniAppBar: AppBarComponent;
-
-type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
-declare const bulletClasses: {
-    root: string;
-};
-interface BulletProps {
-    /**
-     * Color palette used to draw the component
-     */
-    variant?: BulletVariant;
-}
-/**
- * Dot to attract the user attention
- */
-declare const Bullet: ({ variant }: BulletProps) => JSX.Element;
-
-type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
-declare const labelClasses: {
-    root: string;
-};
-interface LabelProps {
-    /**
-     * Content of the component
-     */
-    text: string;
-    /**
-     * Color palette used to draw the component
-     */
-    variant?: LabelVariant;
-}
-/**
- * Compact element to represent a text
- */
-declare const Label: ({ text, variant }: LabelProps) => JSX.Element;
-
-interface NavItemAvatar {
-    src: string;
-    alt: string;
-}
-interface NavItemLabel {
-    text: string;
-    variant: LabelVariant;
-}
-interface NavItemBullet {
-    variant: BulletVariant;
-}
-interface NavItem {
+type IconColor = "inherit" | "action" | "disabled" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+interface PlaceholderAction {
     id: string;
     text: string;
-    href: string;
-    icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
-}
-interface NavSection {
-    title?: string;
-    items: NavItem[];
-}
-interface Nav {
-    items: NavSection[];
+    href?: string;
+    onClick?: () => void;
 }
-interface DrawerContentProps {
-    /**
-     * Object with the content that has to be rendered
-     */
-    nav: Nav;
+interface PlaceholderIconArgs {
+    size: number;
+    color: IconColor;
 }
-type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
-type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
-interface DrawerProps extends DrawerProps$1 {
-    children: DrawerContentElement;
+interface PlaceholderProps {
+    title: string;
+    subtitle: string;
+    iconSize?: number;
+    icon?: ({ size, color }: PlaceholderIconArgs) => ReactElement;
+    actions?: PlaceholderAction[];
 }
-type DrawerComponent = FunctionComponent<DrawerProps>;
-type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+declare const Placeholder: ({ title, subtitle, icon, iconSize, actions, }: PlaceholderProps) => JSX.Element;
 
-declare const Drawer: DrawerComponent;
+interface SkeletonGridProps {
+    size?: number;
+}
+declare const SkeletonGrid: ({ size }: SkeletonGridProps) => JSX.Element;
 
-declare const MiniDrawer: _emotion_styled.StyledComponent<DrawerProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+interface SkeletonCardProps {
+    width?: number | string;
+    animation?: "pulse" | "wave" | false;
+}
+declare const SkeletonCard: ({ width, animation }: SkeletonCardProps) => JSX.Element;
 
-type Props = PropsWithChildren<{
-    initialOpen?: boolean;
+type ContentPlaceholderProps = PropsWithChildren<{
+    size?: number;
+    p?: number;
 }>;
-declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
+declare const ContentPlaceholder: ({ size, children, p }: ContentPlaceholderProps) => JSX.Element;
 
-interface DrawerContextProps {
-    isOpen: boolean;
-    close(): void;
-    open(): void;
+interface LoremIpsumPlaceholderProps {
+    count?: number;
+    units?: LoremUnit;
+    variant?: Variant;
 }
-declare const DrawerContext: React.Context<DrawerContextProps | undefined>;
-declare const UndefinedProvider: Error;
-declare const useDrawer: () => DrawerContextProps;
+declare const LoremIpsumPlaceholder: ({ count, units, variant, }: LoremIpsumPlaceholderProps) => JSX.Element;
+
+declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
+declare const getRandomItem: <T>(items: T[]) => {
+    index: number;
+    item: T;
+};
+
+declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight, }?: {
+    lightWeight?: keyof Color | undefined;
+    darkWeight?: keyof Color | undefined;
+}) => string;
+
+interface AppBarWithDrawerLayoutProps {
+    children: [DrawerElement, AppBarElement, ReactNode];
+}
+declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;
+
+interface HeaderLayoutProps {
+    loading?: boolean;
+    children: [HeaderElement, ContentElement];
+}
+declare const HeaderLayout: ({ loading, children }: HeaderLayoutProps) => JSX.Element;
 
 /**
  * MODEL TYPES
@@ -360,208 +609,6 @@ interface BasicModelInstance {
 }
 declare const newInstanceFromValuesOrZeroValue: <T extends BasicModelInstance>(model: Model, values?: T | undefined) => T;
 
-interface TableRowOption<T extends BasicModelInstance> {
-    id: string;
-    label: string;
-    onClick: (item: T) => void;
-}
-interface TableListProps<T extends BasicModelInstance> {
-    columns: HeadCell<T>[];
-    data: T[];
-    search?: boolean;
-    defaultSort: string;
-    defaultOrder?: Order;
-    loading?: boolean;
-    options?: TableRowOption<T>[];
-    onClick?: (d: T) => void;
-}
-declare const TableList: <T extends BasicModelInstance>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;
-
-type IconColor = "inherit" | "action" | "disabled" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-interface PlaceholderAction {
-    id: string;
-    text: string;
-    href?: string;
-    onClick?: () => void;
-}
-interface PlaceholderIconArgs {
-    size: number;
-    color: IconColor;
-}
-interface PlaceholderProps {
-    title: string;
-    subtitle: string;
-    iconSize?: number;
-    icon?: ({ size, color }: PlaceholderIconArgs) => ReactElement;
-    actions?: PlaceholderAction[];
-}
-declare const Placeholder: ({ title, subtitle, icon, iconSize, actions, }: PlaceholderProps) => JSX.Element;
-
-/**
- * Content to be shown inside a navigation
- */
-declare const DrawerContent: DrawerContentComponent;
-
-interface DrawerSectionProps {
-    /**
-     * Section title
-     */
-    title?: string;
-    /**
-     * List of items of that section
-     */
-    items: NavItem[];
-}
-/**
- * Render a group of items inside the drawer
- * with an optional title
- */
-declare const DrawerSection: ({ title, items }: DrawerSectionProps) => JSX.Element;
-
-interface DrawerItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Url where the user is going to be redirected
-     * if the item is clicked
-     */
-    href: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * Avatar displayed to the left
-     */
-    avatar?: NavItemAvatar;
-    /**
-     * Label with extra info displayed to the right
-     */
-    label?: NavItemLabel;
-    /**
-     * Bullet to attract the user attention displyed to the right
-     */
-    bullet?: NavItemBullet;
-}
-/**
- * Clicable item inside a drawer
- */
-declare const DrawerItem: ({ text, icon, avatar, label, bullet, href }: DrawerItemProps) => JSX.Element;
-
-interface CenterContainerProps {
-    children: ReactNode | undefined;
-    centerVertical?: boolean;
-    centerHorizontal?: boolean;
-    sx?: SxProps<Theme>;
-}
-declare function CenterContainer({ children, centerVertical, centerHorizontal, sx, }: CenterContainerProps): JSX.Element;
-
-interface BaseValueProps<T> {
-    /**
-     * Name of the displayed value
-     */
-    label: string;
-    /**
-     * Value displayed
-     */
-    value?: T;
-    /**
-     * String rendered if value is undefined
-     */
-    placeholder?: string;
-}
-declare const DefaultPlaceholder = "-";
-
-type ValueTextProps = BaseValueProps<string>;
-/**
- * Displays a string value with a label
- */
-declare const ValueText: ({ label, value: valueProp, placeholder, }: ValueTextProps) => JSX.Element;
-
-type ValueCardProps = PropsWithChildren;
-/**
- * Container to show a labeled value
- */
-declare const ValueCard: ({ children }: ValueCardProps) => JSX.Element;
-
-type ValueBooleanProps = BaseValueProps<boolean>;
-/**
- * Displays a boolean value with a label
- */
-declare const ValueBoolean: ({ label, value, placeholder, }: ValueBooleanProps) => JSX.Element;
-
-interface ValueDatetimeProps extends BaseValueProps<Date> {
-    /**
-     * Datetime format
-     */
-    format: string;
-}
-/**
- * Displays a formated datetime with a label
- */
-declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, }: ValueDatetimeProps) => JSX.Element;
-
-type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container"> & {
-    bordered?: boolean;
-}>;
-type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
-type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
-declare const groupValueItemClasses: {
-    root: string;
-};
-declare const GroupValueItem: GroupValueItemComponent;
-interface GroupValueCardProps {
-    title: string;
-    subtitle?: string;
-    centered?: boolean;
-    children: GroupValueItemElement | GroupValueItemElement[];
-}
-declare const GroupValueCard: ({ title, subtitle, centered, children }: GroupValueCardProps) => JSX.Element;
-
-type ContentProps = PropsWithChildren;
-type ContentComponent = FunctionComponent<ContentProps>;
-type ContentElement = ReactElement<ContentElement, ContentComponent>;
-
-declare const Content: ({ children }: ContentProps) => JSX.Element;
-
-type EnhancedSelectSize = "small" | "medium";
-interface EnhancedSelectProps<T> {
-    label: string;
-    value: T;
-    loading?: boolean;
-    fetching?: boolean;
-    size?: EnhancedSelectSize;
-    color?: string;
-    fullWidth?: boolean;
-    children?: ReactNode;
-    onChange?: SelectInputProps<T>["onChange"];
-}
-declare const EnhancedSelect: <T extends React__default.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;
-
-declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
-declare const getRandomItem: <T>(items: T[]) => {
-    index: number;
-    item: T;
-};
-
-declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight, }?: {
-    lightWeight?: keyof Color | undefined;
-    darkWeight?: keyof Color | undefined;
-}) => string;
-
-interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
-}
-declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;
-
-interface HeaderLayoutProps {
-    loading?: boolean;
-    children: [HeaderElement, ContentElement];
-}
-declare const HeaderLayout: ({ loading, children }: HeaderLayoutProps) => JSX.Element;
-
 interface ObjectDetailsProps<T extends BasicModelInstance> {
     model: Model;
     instance: T;
@@ -703,6 +750,23 @@ interface ModelFormProps<T extends BasicModelInstance> {
 }
 declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps<T>) => JSX.Element;
 
+interface TableRowOption<T extends BasicModelInstance> {
+    id: string;
+    label: string;
+    onClick: (item: T) => void;
+}
+interface TableListProps<T extends BasicModelInstance> {
+    columns: HeadCell<T>[];
+    data: T[];
+    search?: boolean;
+    defaultSort: string;
+    defaultOrder?: Order;
+    loading?: boolean;
+    options?: TableRowOption<T>[];
+    onClick?: (d: T) => void;
+}
+declare const TableList: <T extends BasicModelInstance>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;
+
 type NotificationCenterProviderProps = PropsWithChildren<{
     autoHideDuration?: number;
 }>;
@@ -736,4 +800,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, ArrayFieldType, BaseFieldType, BaseValueProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, DefaultPlaceholder, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize, EnhancedTable, EnhancedTableHead, FieldType, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, Link, LinkBehaviour, LoadingRequest, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SignInProps, SingleFieldType, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, ArrayFieldType, BaseFieldType, BaseValueProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize, EnhancedTable, EnhancedTableHead, FieldType, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemCollapsable, NavItemLabel, NavItemLink, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };