@economic/taco 1.40.3 → 2.0.0-alpha.173

package/dist/components/Table3/hooks/listeners/useEditingStateListener.d.ts

@@ -0,0 +1,2 @@
+import { Table as RTable } from '@tanstack/react-table';
+export declare function useEditingStateListener<TType = unknown>(table: RTable<TType>): void;

package/dist/components/Table3/hooks/listeners/useFilteringStateListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3FilterHandler } from '../../types';
+export declare function useFilteringStateListener<TType = unknown>(table: RTable<TType>, onFilter?: Table3FilterHandler): void;

package/dist/components/Table3/hooks/listeners/useRowSelectionListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3RowSelectionHandler } from '../../types';
+export declare function useRowSelectionListener<TType = unknown>(table: RTable<TType>, onRowSelect?: Table3RowSelectionHandler<TType>): void;

package/dist/components/Table3/hooks/listeners/useSearchStateListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3SearchHandler } from '../../types';
+export declare function useSearchStateListener<TType = unknown>(table: RTable<TType>, onSearch?: Table3SearchHandler): void;

package/dist/components/Table3/hooks/listeners/useServerLoadingListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3LoadPageHandler } from '../../types';
+export declare function useServerLoadingListener<TType = unknown>(table: RTable<TType>, loadPage?: Table3LoadPageHandler): void;

package/dist/components/Table3/hooks/listeners/useSettingsStateListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3SettingsAdapter } from '../../types';
+export declare function useSettingsStateListener<TType = unknown>(table: RTable<TType>, onChangeSettings: Table3SettingsAdapter | undefined): void;

package/dist/components/Table3/hooks/listeners/useShortcutsListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3Shortcuts } from '../../types';
+export declare function useShortcutsListener<TType = unknown>(table: RTable<TType>, shortcuts: Table3Shortcuts<TType> | undefined): void;

package/dist/components/Table3/hooks/listeners/useSortingStateListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3SortHandler } from '../../types';
+export declare function useSortingStateListener<TType = unknown>(table: RTable<TType>, onSort?: Table3SortHandler): void;

package/dist/components/Table3/hooks/useConvertChildrenToColumns.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef, ColumnSort } from '@tanstack/react-table';
+import { Table3Props, Table3Options } from '../types';
+import { useEditing } from './features/useEditing';
+export declare function useConvertChildrenToColumns<TType = unknown>(props: Table3Props<TType>, options: Table3Options, editing: ReturnType<typeof useEditing>): {
+    columns: ColumnDef<TType, unknown>[];
+    defaultColumnSizing: Record<string, number>;
+    defaultColumnVisibility: Record<string, boolean>;
+    defaultSorting: ColumnSort[];
+};

package/dist/components/Table3/hooks/useCssGrid.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Table as RTable } from '@tanstack/react-table';
+export declare const useCssGrid: <TType = unknown>(table: RTable<TType>) => {
+    style: React.CSSProperties;
+};

package/dist/components/Table3/hooks/useCssVars.d.ts

@@ -0,0 +1,6 @@
+import { Table3FontSize, Table3RowHeight } from '../types';
+export declare const useCssVars: (height: Table3RowHeight, fontSize: Table3FontSize) => {
+    style: {
+        '--table3-row-padding': string;
+    };
+};

package/dist/components/Table3/hooks/useTable.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { RowData } from '@tanstack/react-table';
+import { ColumnAlignment, Table3ColumnRenderer, Table3Props, Table3ColumnHeaderMenu, Table3ColumnControlRenderer, ColumnDataType, Table3ColumnClassNameHandler, Table3ColumnFooterRenderer, TableStrategy } from '../types';
+import { useCurrentRow } from './features/useCurrentRow';
+import { usePauseHoverState } from './features/usePauseHoverState';
+import { useRowHeight } from './features/useRowHeight';
+import { useFontSize } from './features/useFontSize';
+import { useRowDrag } from './features/useRowDrag';
+import { useColumnFreezing } from './features/useColumnFreezing';
+import { useRowSelection } from './features/useRowSelection';
+import { useRowClick } from './features/useRowClick';
+import { useColumnOrdering } from './features/useColumnOrdering';
+import { useRowDrop } from './features/useRowDrop';
+import { useEditing } from './features/useEditing';
+import { usePrinting } from './features/usePrinting';
+import { useRowGoto } from './features/useRowGoto';
+import { useSearch } from './features/useSearch';
+declare module '@tanstack/table-core' {
+    interface TableMeta<TData extends RowData> {
+        columnFreezing: ReturnType<typeof useColumnFreezing>;
+        columnOrdering: ReturnType<typeof useColumnOrdering>;
+        currentRow: ReturnType<typeof useCurrentRow>;
+        editing: ReturnType<typeof useEditing>;
+        fontSize: ReturnType<typeof useFontSize>;
+        hoverState: ReturnType<typeof usePauseHoverState>;
+        isUsingServer: boolean;
+        printing: ReturnType<typeof usePrinting>;
+        rowClick: ReturnType<typeof useRowClick>;
+        rowDrag: ReturnType<typeof useRowDrag>;
+        rowDrop: ReturnType<typeof useRowDrop>;
+        rowGoto: ReturnType<typeof useRowGoto>;
+        rowHeight: ReturnType<typeof useRowHeight>;
+        rowSelection: ReturnType<typeof useRowSelection>;
+        search: ReturnType<typeof useSearch>;
+    }
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: ColumnAlignment;
+        className?: Table3ColumnClassNameHandler<TData>;
+        control?: Table3ColumnControlRenderer<TData>;
+        dataType?: ColumnDataType;
+        defaultWidth?: number;
+        enableOrdering: boolean;
+        enableSearch: boolean;
+        enableTruncate: boolean;
+        footer?: Table3ColumnFooterRenderer;
+        header: string;
+        headerClassName?: string;
+        menu?: Table3ColumnHeaderMenu;
+        renderer?: Table3ColumnRenderer<TValue, TData>;
+        tooltip?: string;
+    }
+    interface CellContext<TData extends RowData, TValue> {
+        index: number;
+        tableRef: React.RefObject<HTMLDivElement>;
+    }
+    interface HeaderContext<TData extends RowData, TValue> {
+        scrollToIndex: TableStrategy['scrollToIndex'];
+    }
+}
+export declare function useTable<TType = unknown>(props: Table3Props<TType>): {
+    table: import("@tanstack/react-table").Table<TType>;
+    length: number;
+};

package/dist/components/Table3/hooks/useTableData.d.ts

@@ -0,0 +1,23 @@
+import { ColumnFilter, ColumnSort, Table3FilterHandler, Table3LoadAllHandler, Table3LoadPageHandler, Table3SearchHandler, Table3SortHandler } from '../types';
+export declare type useTable3DataFetcher<TType = unknown> = (pageIndex: number, pageSize: number, sorting: ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<{
+    data: TType[];
+    length: number;
+}>;
+export declare type useTable3AllDataFetcher<TType = unknown> = (sorting: ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<{
+    data: TType[];
+    length: number;
+}>;
+export declare type useTable3DataOptions = {
+    pageSize: number;
+};
+export declare type useTableDataValues<TType = unknown> = {
+    data: TType[];
+    length: number | undefined;
+    loadAll: Table3LoadAllHandler;
+    loadPage: Table3LoadPageHandler;
+    onFilter: Table3FilterHandler;
+    onSearch: Table3SearchHandler;
+    onSort: Table3SortHandler;
+    pageSize: number;
+};
+export declare function useTableData<TType = unknown>(fetch: useTable3DataFetcher<TType>, fetchAll: useTable3AllDataFetcher<TType>, options?: useTable3DataOptions): useTableDataValues<TType>;

package/dist/components/Table3/hooks/useTablePreset.d.ts

@@ -0,0 +1,2 @@
+import { Table3Options, Table3Props } from '../types';
+export declare function useTablePreset<TType = unknown>(props: Table3Props<TType>): Table3Options;

package/dist/components/Table3/hooks/useTableRefInstanceSetup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Table3Ref } from '../types';
+import { Table as RTable } from '@tanstack/react-table';
+export declare function useTableRefInstanceSetup<TType = unknown>(table: RTable<TType>, ref: React.RefObject<Table3Ref>): void;

package/dist/components/Table3/strategies/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3Props, TableStrategy } from '../types';
+export declare function useTableRenderStrategy<TType = unknown>(props: Table3Props<TType>, table: RTable<TType>, ref: React.RefObject<HTMLDivElement>): TableStrategy;

package/dist/components/Table3/strategies/virtualised.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Table as RTable } from '@tanstack/react-table';
+import { Table3Props, TableStrategy } from '../types';
+export declare function useTableRenderStrategy<TType = unknown>(props: Table3Props<TType>, table: RTable<TType>, tableRef: React.RefObject<HTMLDivElement>): TableStrategy;

package/dist/components/Table3/types.d.ts

@@ -0,0 +1,311 @@
+/// <reference types="react" />
+import { ColumnFilter as RTColumnFilter, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ColumnSort as RTColumnSort, SortingState, VisibilityState, BuiltInSortingFn } from '@tanstack/react-table';
+import { MenuProps } from '../Menu/Menu';
+export declare type SortDirection = 'asc' | 'desc';
+export declare type SortFn<TType = unknown> = ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1) | BuiltInSortingFn | 'auto';
+export declare type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (value: TValue, row: TType) => JSX.Element | string | null;
+export declare type Table3ColumnFooterRenderer<TValue = unknown> = (values: TValue[]) => JSX.Element | string | null;
+export declare type Table3ColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string);
+export declare type ColumnAlignment = 'left' | 'center' | 'right';
+export declare type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';
+export declare type Table3ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;
+export declare type Table3ColumnControlProps = {
+    className?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    onBlur?: (value: any) => void;
+    onFocus?: React.FocusEventHandler;
+    readOnly?: boolean;
+    ref: React.RefObject<HTMLElement>;
+    setValue: (value: any) => void;
+    value: any;
+};
+export declare type Table3ColumnControlRenderer<TType = unknown> = ((props: Table3ColumnControlProps, row?: TType) => JSX.Element) | 'datepicker' | 'input' | 'switch';
+export declare type Table3ColumnProps<TType = unknown> = {
+    accessor: string;
+    align?: ColumnAlignment;
+    className?: Table3ColumnClassNameHandler<TType>;
+    control?: Table3ColumnControlRenderer<TType>;
+    dataType?: ColumnDataType;
+    defaultHidden?: boolean;
+    defaultWidth?: number | 'grow';
+    enableFiltering?: boolean;
+    enableHiding?: boolean;
+    enableOrdering?: boolean;
+    enableResizing?: boolean;
+    enableSearch?: boolean;
+    enableSorting?: boolean;
+    enableTruncate?: boolean;
+    footer?: Table3ColumnFooterRenderer;
+    header: string;
+    headerClassName?: string;
+    menu?: Table3ColumnHeaderMenu;
+    renderer?: Table3ColumnRenderer<unknown, TType>;
+    sort?: SortDirection;
+    sortFn?: SortFn<TType>;
+    tooltip?: string;
+};
+export declare type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';
+export declare type Table3RowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';
+export declare type Table3FontSize = 'small' | 'medium' | 'large';
+export declare type Table3RowClickHandler<TType = unknown> = (row: TType) => void;
+export declare type Table3RowDragHandler<TType = unknown> = (rows: TType[], showPlaceholder: (string: any) => void, setDataTransfer: (data: string) => void) => void;
+export declare type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;
+export declare type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;
+export declare type Table3RowSelectionHandler<TType = unknown> = (rows: TType[]) => void;
+export declare type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element;
+export declare type Table3RenderStrategy = 'static' | 'virtual';
+export declare type Table3Preset = 'display' | 'editable';
+export declare type Table3Settings = {
+    columnFilters?: ColumnFiltersState;
+    columnFreezingIndex?: number;
+    columnOrder?: ColumnOrderState;
+    columnPinning?: ColumnPinningState;
+    columnSizing?: ColumnSizingState;
+    columnVisibility?: VisibilityState;
+    excludeUnmatchedRecordsInSearch?: boolean;
+    fontSize?: Table3FontSize;
+    rowDensity?: DeprecatedRowDensity;
+    rowHeight?: Table3RowHeight;
+    sorting?: SortingState;
+};
+export declare type Table3SettingsAdapter = (settings: Table3Settings) => void;
+export declare enum Table3FilterComparator {
+    Contains = 0,
+    DoesNotContain = 1,
+    IsEqualTo = 2,
+    IsNotEqualTo = 3,
+    IsGreaterThan = 4,
+    IsLessThan = 5,
+    IsBetween = 6,
+    IsOneOf = 7,
+    IsNoneOf = 8,
+    IsAllOf = 9,
+    IsEmpty = 10,
+    IsNotEmpty = 11
+}
+export declare type Table3FilterValue = {
+    comparator: Table3FilterComparator;
+    value: any;
+};
+export declare type Table3Filter = {
+    id: string;
+    value: Table3FilterValue;
+};
+export declare type ColumnFilter = RTColumnFilter;
+export declare type Table3FilterHandler = (filters: ColumnFilter[]) => void;
+export declare type Table3SearchHandler = (query: string | undefined) => Promise<void>;
+export declare type Table3LoadPageHandler = (pageIndex: number, sorting: ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
+export declare type Table3LoadAllHandler = (sorting: ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<void>;
+export declare type Table3RowGotoHandler = (column: string, query: string, sorting: ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<number>;
+export declare type ColumnSort = RTColumnSort;
+export declare type Table3SortHandler = (sorting: ColumnSort[]) => void;
+export declare type TableStrategy = {
+    renderBody: () => JSX.Element | JSX.Element[] | null;
+    scrollToIndex: (index: number, options?: {
+        align: 'start' | 'center' | 'end' | 'auto';
+    }) => void;
+};
+export declare type Table3ShortcutHandlerFn<TType = unknown> = (row: TType) => void;
+export declare type Table3ShortcutHandlerObject<TType = unknown> = {
+    handler: Table3ShortcutHandlerFn<TType>;
+    meta?: boolean;
+    shift?: boolean;
+};
+export declare type Table3Shortcuts<TType = unknown> = Record<string, Table3ShortcutHandlerFn<TType> | Table3ShortcutHandlerObject<TType>>;
+export declare type Table3SaveHandler<TType = unknown> = (data: TType) => Promise<void>;
+export declare type Table3Options = {
+    enableColumnFreezing: boolean;
+    enableColumnHiding: boolean;
+    enableColumnOrdering: boolean;
+    enableColumnResizing: boolean;
+    enableFontSize: boolean;
+    enablePrinting: boolean;
+    enableRowDrag: boolean;
+    enableRowDrop: boolean;
+    enableRowExpansion: boolean;
+    enableRowGoto: boolean;
+    enableRowHeight: boolean;
+    enableRowSelection: boolean;
+    enableRowSelectionSingle: boolean;
+    enableEditing: boolean;
+    enableFiltering: boolean;
+    enableSearch: boolean;
+    enableSorting: boolean;
+};
+export declare type CommonTable3Props<TType = unknown> = Partial<Table3Options> & {
+    actionsForRow?: Table3RowActionRenderer<TType>[];
+    actionsForRowLength?: number;
+    children: (React.ReactElement<Table3ColumnProps<TType>> | boolean | null | undefined)[];
+    data: TType[];
+    defaultColumnFreezingIndex?: number;
+    defaultCurrentRowIndex?: number;
+    defaultSettings?: Table3Settings;
+    emptyState?: () => JSX.Element;
+    expandedRowRenderer?: Table3RowExpansionRenderer<TType>;
+    id: string;
+    onChangeSettings?: Table3SettingsAdapter;
+    onRowClick?: Table3RowClickHandler<TType>;
+    onRowDrag?: Table3RowDragHandler<TType>;
+    onRowDrop?: Table3RowDropHandler<TType>;
+    onRowGoto?: Table3RowGotoHandler;
+    onRowSelect?: Table3RowSelectionHandler<TType>;
+    onFilter?: Table3FilterHandler;
+    onSave?: Table3SaveHandler;
+    onSearch?: Table3SearchHandler;
+    onSort?: Table3SortHandler;
+    preset?: Table3Preset;
+    shortcuts?: Table3Shortcuts<TType>;
+    toolbarLeft?: JSX.Element;
+    toolbarRight?: JSX.Element;
+};
+interface ClientTable3Props<TType = unknown> extends CommonTable3Props<TType> {
+    length?: never;
+    loadPage?: never;
+    loadAll?: never;
+    pageSize?: never;
+}
+interface ServerTable3Props<TType = unknown> extends CommonTable3Props<TType> {
+    length: number | undefined;
+    loadPage: Table3LoadPageHandler;
+    loadAll: Table3LoadAllHandler;
+    pageSize?: number;
+}
+export declare type Table3Props<TType = unknown> = ClientTable3Props<TType> | ServerTable3Props<TType>;
+export declare type Table3Ref = HTMLDivElement & {
+    instance: {
+        resetFiltering: () => void;
+        resetRowExpansion: () => void;
+        resetRowSelection: () => void;
+        resetSorting: () => void;
+        toggleEditing: (enabled: boolean | undefined) => void;
+    };
+};
+export declare type Table3Texts = {
+    columns: {
+        actions: {
+            tooltip: string;
+        };
+        drag: {
+            tooltip: string;
+        };
+        expansion: {
+            collapse: string;
+            collapseAll: string;
+            expand: string;
+            expandAll: string;
+        };
+        menu: {
+            freezeFirstColumn: string;
+            freezeUptoColumn: string;
+            gotoRow: string;
+            hideColumn: string;
+            unfreezeColumns: string;
+        };
+        resize: {
+            tooltip: string;
+        };
+        select: {
+            deselect: string;
+            deselectAll: string;
+            select: string;
+            selectAll: string;
+        };
+    };
+    columnSettings: {
+        button: string;
+        noResults: string;
+        search: string;
+        tooltip: string;
+    };
+    editing: {
+        actions: {
+            tooltip: string;
+            save: string;
+            clear: string;
+            exit: string;
+        };
+        buttons: {
+            edit: {
+                text: string;
+                tooltip: string;
+            };
+        };
+        rowIndicator: {
+            rowWillMove: string;
+            rowWillBeHidden: string;
+            rowWillMoveReasonSearch: string;
+            rowWillMoveReasonFilter: string;
+            rowWillMoveReasonSorting: string;
+        };
+        saving: {
+            progress: string;
+            complete: string;
+        };
+    };
+    filters: {
+        button: string;
+        buttons: {
+            addFilter: string;
+            clearFilters: string;
+        };
+        comparators: {
+            contains: string;
+            doesNotContain: string;
+            isEqualTo: string;
+            isNotEqualTo: string;
+            isGreaterThan: string;
+            isLessThan: string;
+            isBetween: string;
+            isOneOf: string;
+            isNoneOf: string;
+            isAllOf: string;
+            isEmpty: string;
+            isNotEmpty: string;
+        };
+        conditions: {
+            and: string;
+            where: string;
+        };
+        emptyFilter: {
+            condition: string;
+            value: string;
+        };
+        tooltip: string;
+        total: string;
+    };
+    fontSize: {
+        tooltip: string;
+        sizes: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    footer: {
+        summary: {
+            count: string;
+            records: string;
+            selected: string;
+        };
+    };
+    print: {
+        error: string;
+        loading: string;
+        tooltip: string;
+    };
+    rowHeight: {
+        tooltip: string;
+        sizes: {
+            short: string;
+            medium: string;
+            tall: string;
+            extraTall: string;
+        };
+    };
+    search: {
+        excludeUnmatchedResults: string;
+        placeholder: string;
+    };
+};
+export {};

package/dist/components/Table3/util/columns.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Table as RTable } from '@tanstack/react-table';
+export declare const isInternalColumn: (id: string) => boolean;
+export declare const isFrozenColumn: <TType = unknown>(index: number, table: RTable<TType>) => boolean;
+export declare const getCurrentRowCellElement: (index: number, table: HTMLElement) => Element | null;
+export declare function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, table: HTMLElement): void;
+export declare function isCellHighlighted(query: string, value: unknown, children: JSX.Element | string | null): boolean;

package/dist/components/{Table2/components/column/utils.d.ts → Table3/util/editing.d.ts}

@@ -1,3 +1,4 @@
+export declare const focussableNodeNames: string[];
+export declare const focusableSelector: string;
 export declare const hasChanged: (value: any, newValue: any) => boolean;
 export declare const willRowMoveAfterSorting: (value: any, cell: any, rowIndex: any, rows: any, desc: any) => boolean;
-export declare const clickableNodeNames: string[];

package/dist/components/Table3/util/filtering.d.ts

@@ -0,0 +1,3 @@
+import { Table3FilterValue } from '../types';
+export declare function globalFilterFn(value: string, query: string): boolean;
+export declare function columnFilterFn(value: any, filter: Table3FilterValue): boolean;

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

@@ -36,6 +36,8 @@ export declare type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> &
      * When true, prevents the user from interacting with the tab.
      */
     disabled?: boolean;
+    /** A tooltip to show when hovering over the trigger */
+    tooltip?: string | JSX.Element;
 };
 export declare type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {
     /**

package/dist/components/Tag/Tag.d.ts

@@ -13,7 +13,7 @@ export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttribu
     children: string;
     color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
     disabled?: boolean | undefined;
-    icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-minus" | "circle-plus" | "circle-tick" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "density-comfortable" | "density-compact" | "density-normal" | "density-spacious" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "graph-solid" | "hash" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+    icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-minus" | "circle-plus" | "circle-tick" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
     readOnly?: boolean | undefined;
     onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;