@medable/nucleus-ui 2.0.0

package/table/src/lib/table.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createColumnHelper, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../../../button/src';
+import { DatePicker } from '../../../date_picker/src';
+import { SearchField } from '../../../search_field/src';
+import { Select } from '../../../select/src';
+import { ActionBar } from './action_bar/action_bar';
+import { Pagination } from './pagination/pagination';
+import { TableBody } from './table_body';
+import { TableHead } from './table_head';
+import { useStickyHeader } from './use_sticky_header';
+const getRowSelectionState = (selectedIds) => {
+    return selectedIds.reduce((acc, rowId) => (Object.assign(Object.assign({}, acc), { [rowId]: true })), {});
+};
+// Deprecated: temporary changes to enable inline table editing
+const useSkipper = (disableSkip) => {
+    const shouldSkipRef = useRef(true);
+    const shouldSkip = shouldSkipRef.current;
+    // Wrap a function with this to skip a pagination reset temporarily
+    const skip = useCallback(() => {
+        shouldSkipRef.current = false;
+    }, []);
+    useEffect(() => {
+        shouldSkipRef.current = true;
+    });
+    if (disableSkip) {
+        return [false, () => { }];
+    }
+    return [shouldSkip, skip];
+};
+/**
+ * The table component displays information that is organized in a way that is easy to scan.
+ */
+export const Table = ({ actionBarProps, columns, data: initialData, enableSorting = false, getRowId, hasPagination, initialPageSize = 50, initialSelectedIds = [], selectedIds, isLoading = false, isSelectable = false, isSingleSelect = false, highlightedRowIds = [], labelNoResults = 'No results', labelSearchField = 'Search', manualFiltering = false, manualPagination = false, manualPaginationState, manualSorting = false, manualSortingState, onPaginationChange, onRowSelectionChange, onSearch, onSearchClear, onSortingChange, pageCount, paginationNavigationScreenReaderLabel, searchFunction, searchKey, useInternalSearch, filterFields = [], filterByDate, onFilter, onFilterClear, initialSelectedFilters = {}, disableActionBar = false, isEditMode = false, hoistTableObject, customHeaderContent, enableRowSelection, disableRowSelectionReason, getRowCustomClasses, expandableContentField = 'expandableContent', getExpandableContentField = 'getExpandableContent', getExpandedContentClasses, }) => {
+    // Deprecated: temporary changes to enable inline table editing
+    const [data, setData] = useState(initialData);
+    // Deprecated: temporary changes to enable inline table editing
+    const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper(manualPagination || isEditMode);
+    const { isStickyShowing, tableContainerRef, actionBarContainerRef, xScrollingRef, stickyTableRef, defaultTableRef } = useStickyHeader();
+    const [selectedFilters, setSelectedFilters] = useState(initialSelectedFilters !== null && initialSelectedFilters !== void 0 ? initialSelectedFilters : {});
+    const [internalSearchKey, setInternalSearchKey] = useState('');
+    const [rowSelection, setRowSelection] = useState(getRowSelectionState(initialSelectedIds));
+    const isRowSelectionInit = useRef(false);
+    const [expandedRowIds, setExpandedRowIds] = useState(new Set());
+    const [loadingRowIds, setLoadingRowIds] = useState(new Set());
+    const [asyncContentMap, setAsyncContentMap] = useState(new Map());
+    const previousDataRef = useRef(initialData);
+    const rowHasExpandableContent = useCallback((rowData) => {
+        if (expandableContentField && rowData && typeof rowData === 'object' && expandableContentField in rowData) {
+            const content = rowData[expandableContentField];
+            if (content !== undefined && content !== null) {
+                return true;
+            }
+        }
+        if (getExpandableContentField &&
+            rowData &&
+            typeof rowData === 'object' &&
+            getExpandableContentField in rowData &&
+            typeof rowData[getExpandableContentField] === 'function') {
+            return true;
+        }
+        return false;
+    }, [expandableContentField, getExpandableContentField]);
+    const hasExpandableRows = useMemo(() => {
+        return initialData.some((row) => rowHasExpandableContent(row));
+    }, [initialData, rowHasExpandableContent]);
+    const handleToggleExpand = useCallback((rowId) => {
+        setExpandedRowIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(rowId)) {
+                next.delete(rowId);
+            }
+            else {
+                next.add(rowId);
+            }
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        if (previousDataRef.current !== initialData) {
+            setAsyncContentMap(new Map());
+            setLoadingRowIds(new Set());
+            previousDataRef.current = initialData;
+        }
+    }, [initialData]);
+    /**
+     * This function is passed to the globalFilterFn of the table as the function to filter rows when internal
+     * searching is enabled. By default, we just cast all values into a string (so numbers are included) and compare
+     * that to a lower cased version of the search key. This can be overridden with the `searchFunction` prop.
+     * More information on filter functions can be found here: https://tanstack.com/table/v8/docs/api/features/filters#filterfn
+     */
+    const simpleFilterFunction = useCallback((row, columnId, value) => {
+        return String(row.getValue(columnId)).toLowerCase().indexOf(String(value).toLowerCase()) !== -1;
+    }, []);
+    /**
+     * If the getRowId prop has been passed in, we use it to determine the unique id for each row. If the passed in key results in an undefined id, we fall back to the table default.
+     * The table defaults to using the index of the row from its source data array for its id. In the case of server-side pagination, that index will always be
+     * between 0 and the page size, since server is only returning the requested page. So we modify the default logic to account for manualPaginationState.
+     */
+    const internalGetRowId = useCallback((originalRow, index, parent) => {
+        let rowId;
+        if (typeof getRowId === 'function') {
+            return getRowId(originalRow, index, parent);
+        }
+        else if (typeof getRowId === 'string') {
+            const id = originalRow[getRowId];
+            if (id !== undefined && id !== null && (typeof id === 'string' || typeof id === 'number')) {
+                rowId = id;
+            }
+        }
+        if (!rowId) {
+            rowId = manualPaginationState
+                ? manualPaginationState.pageIndex * manualPaginationState.pageSize + index
+                : index;
+        }
+        return `${parent ? [parent.id, rowId].join('.') : rowId}`;
+    }, [manualPaginationState, getRowId]);
+    const handleFilterChange = (filter) => {
+        const newSelectedFilters = Object.assign(Object.assign({}, selectedFilters), { [filter.fieldKey]: Object.assign({}, filter.data) });
+        setSelectedFilters(newSelectedFilters);
+        onFilter === null || onFilter === void 0 ? void 0 : onFilter(newSelectedFilters);
+    };
+    const hasNonDefaultFilters = useMemo(() => {
+        return Object.entries(selectedFilters).some(([key, filter]) => {
+            const field = filterFields.find((f) => f.fieldKey === key);
+            if (!(field === null || field === void 0 ? void 0 : field.default)) {
+                return true;
+            }
+            if ('value' in filter && 'value' in field.default) {
+                return filter.value !== field.default.value;
+            }
+            if ('year' in filter &&
+                'month' in filter &&
+                'day' in filter &&
+                'year' in field.default &&
+                'month' in field.default &&
+                'day' in field.default) {
+                return (filter.year !== field.default.year || filter.month !== field.default.month || filter.day !== field.default.day);
+            }
+            return false;
+        });
+    }, [selectedFilters, filterFields]);
+    const handleClearFilters = () => {
+        const resetFilters = {};
+        filterFields.forEach((field) => {
+            if (field.default) {
+                resetFilters[field.fieldKey] = field.default;
+            }
+        });
+        setSelectedFilters(resetFilters);
+        onFilterClear === null || onFilterClear === void 0 ? void 0 : onFilterClear();
+    };
+    useEffect(() => {
+        setData(initialData);
+    }, [initialData]);
+    const table = useReactTable(Object.assign(Object.assign({ state: Object.assign(Object.assign({ globalFilter: (internalSearchKey === null || internalSearchKey === void 0 ? void 0 : internalSearchKey.trim()) || searchKey, rowSelection }, (manualPagination && { pagination: manualPaginationState })), (manualSorting && { sorting: manualSortingState })), columns,
+        data, enableGlobalFilter: true, enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : true, enableSorting, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getRowId: internalGetRowId, getSortedRowModel: getSortedRowModel(), globalFilterFn: searchFunction !== null && searchFunction !== void 0 ? searchFunction : simpleFilterFunction, manualFiltering,
+        manualPagination,
+        manualSorting, enableMultiRowSelection: !isSingleSelect, onRowSelectionChange: setRowSelection, autoResetPageIndex, 
+        // Deprecated: temporary changes to enable inline table editing
+        meta: {
+            data,
+            updateData: setData,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            updateColumnData: (rowIndex, columnId, value) => {
+                skipAutoResetPageIndex();
+                setData((old) => old.map((row, index) => {
+                    if (index === rowIndex) {
+                        return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
+                    }
+                    return row;
+                }));
+            },
+            isEditMode,
+        }, pageCount }, (manualPagination && { onPaginationChange })), (manualSorting && { onSortingChange })));
+    useEffect(() => {
+        table.setPageSize(initialPageSize);
+        if (hoistTableObject) {
+            hoistTableObject(table);
+        }
+    }, []);
+    /**
+     * Forwards the selected rows to the consumer but prevents to call it on the react-table initialization
+     */
+    useEffect(() => {
+        if (isRowSelectionInit.current && onRowSelectionChange) {
+            onRowSelectionChange(Object.keys(rowSelection));
+        }
+        isRowSelectionInit.current = true;
+    }, [rowSelection]);
+    useEffect(() => {
+        if (isSelectable && selectedIds) {
+            /**
+             * isRowSelectionInit.current is set to "false" to prevent the onRowSelectionChange method from being called,
+             * which would cause an infinite loop
+             */
+            isRowSelectionInit.current = false;
+            const newSelectedIds = getRowSelectionState(selectedIds);
+            setRowSelection(newSelectedIds);
+        }
+    }, [selectedIds]);
+    useEffect(() => {
+        if (!hasExpandableRows || !getExpandableContentField || expandedRowIds.size === 0) {
+            return;
+        }
+        const { rows } = table.getRowModel();
+        const rowsToLoad = [];
+        expandedRowIds.forEach((rowId) => {
+            if (loadingRowIds.has(rowId) || asyncContentMap.has(rowId)) {
+                return;
+            }
+            const row = rows.find((r) => r.id === rowId);
+            if (!row) {
+                return;
+            }
+            const rowData = row.original;
+            if (!rowData || typeof rowData !== 'object') {
+                return;
+            }
+            if (expandableContentField && expandableContentField in rowData) {
+                const content = rowData[expandableContentField];
+                if (content !== undefined && content !== null) {
+                    return;
+                }
+            }
+            if (getExpandableContentField in rowData) {
+                const getter = rowData[getExpandableContentField];
+                if (typeof getter === 'function') {
+                    rowsToLoad.push(rowId);
+                }
+            }
+        });
+        if (rowsToLoad.length > 0) {
+            rowsToLoad.forEach((rowId) => {
+                const row = rows.find((r) => r.id === rowId);
+                if (!row) {
+                    return;
+                }
+                const rowData = row.original;
+                const getter = rowData[getExpandableContentField];
+                setLoadingRowIds((prev) => new Set(prev).add(rowId));
+                getter()
+                    .then((resolvedContent) => {
+                    setAsyncContentMap((prev) => new Map(prev).set(rowId, resolvedContent));
+                })
+                    .catch((error) => {
+                    console.error('Error loading expanded content:', error);
+                    setAsyncContentMap((prev) => new Map(prev).set(rowId, _jsx("div", { className: 'nucleus-text-text-secondary', children: "Error loading content" })));
+                })
+                    .finally(() => {
+                    setLoadingRowIds((prev) => {
+                        const next = new Set(prev);
+                        next.delete(rowId);
+                        return next;
+                    });
+                });
+            });
+        }
+    }, [hasExpandableRows, expandedRowIds, getExpandableContentField, expandableContentField, table]);
+    const selectedRowsLength = Object.keys(table.getState().rowSelection).length;
+    const showActionBar = !isSingleSelect && !disableActionBar && isSelectable && selectedRowsLength > 0;
+    const { pageIndex } = table.getState().pagination;
+    const hasFilters = filterFields.length > 0 || filterByDate;
+    return (_jsxs("div", { "data-testid": 'nucleus-table--container', className: 'nucleus-box-border nucleus-flex nucleus-flex-col nucleus-gap-6 nucleus-font-sans', children: [(useInternalSearch || hasFilters || !!customHeaderContent) && (_jsxs("div", { className: 'nucleus-flex nucleus-items-end nucleus-gap-3', children: [useInternalSearch && (_jsx(SearchField, { ariaLabel: labelSearchField, autoComplete: 'off', dataTestId: 'nucleus-table--search-field', value: internalSearchKey, onChange: (event) => {
+                            setInternalSearchKey(event.target.value);
+                            onSearch === null || onSearch === void 0 ? void 0 : onSearch(event.target.value);
+                        }, onClear: () => {
+                            setInternalSearchKey('');
+                            onSearchClear === null || onSearchClear === void 0 ? void 0 : onSearchClear();
+                        }, onSearch: (value) => {
+                            setInternalSearchKey(value);
+                            onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+                        }, placeholder: labelSearchField, width: hasFilters ? 'base' : 'lg' })), hasFilters && (_jsxs("div", { className: 'nucleus-flex nucleus-flex-wrap nucleus-items-end nucleus-gap-6 w-full', children: [filterFields.map((filterField) => {
+                                const filter = selectedFilters[filterField.fieldKey];
+                                return (_jsx("div", { className: 'flex-1', children: _jsx(Select, { options: filterField.filterOptions, onChange: (option) => handleFilterChange({
+                                            data: option,
+                                            fieldKey: filterField.fieldKey,
+                                            isDate: false,
+                                        }), label: filterField.fieldLabel || filterField.fieldName, value: filter && 'label' in filter ? filter : undefined, width: 'full' }, filterField.fieldName) }, filterField.fieldName));
+                            }), filterByDate && (_jsx(DatePicker, { id: 'date-filter-input', label: 'Filter by date', onChange: (date) => {
+                                    if (date) {
+                                        handleFilterChange({
+                                            data: date,
+                                            fieldKey: 'date',
+                                            isDate: true,
+                                        });
+                                    }
+                                } })), onFilterClear && hasNonDefaultFilters && (_jsx(Button, { label: 'Clear Filters', variant: 'transparent', onClick: handleClearFilters }))] })), customHeaderContent] })), _jsxs("div", { ref: tableContainerRef, className: 'nucleus-relative nucleus-box-border nucleus-font-sans [clip-path:inset(0)]', children: [_jsx("div", { className: 'nucleus-z-10 nucleus-box-border nucleus-bg-white', children: showActionBar && (_jsx(ActionBar, Object.assign({}, actionBarProps, { selectAllFn: () => table.toggleAllPageRowsSelected(true), unselectAllFn: () => table.toggleAllPageRowsSelected(false), numRows: selectedRowsLength, roundedBorder: true, ariaHidden: isStickyShowing }))) }), isStickyShowing && (_jsx("div", { ref: actionBarContainerRef, className: 'nucleus-fixed nucleus-z-10 nucleus-box-border nucleus-bg-white nucleus-top-0', children: showActionBar && (_jsx(ActionBar, Object.assign({}, actionBarProps, { selectAllFn: () => table.toggleAllPageRowsSelected(true), unselectAllFn: () => table.toggleAllPageRowsSelected(false), numRows: selectedRowsLength, roundedBorder: false }))) })), _jsxs("div", { ref: xScrollingRef, className: `nucleus-box-border nucleus-w-full nucleus-overflow-x-auto nucleus-border-solid nucleus-font-sans nucleus-rounded-lg nucleus-border nucleus-border-b-0 nucleus-border-neutral-300 [clip-path:inset(0)]
+          ${showActionBar ? 'nucleus-rounded-t-none' : ''} ${hasPagination && table.getPageCount() > 1 ? 'nucleus-rounded-b-none' : ''}`, children: [isStickyShowing && (_jsx("table", { ref: stickyTableRef, className: `nucleus-fixed nucleus-z-10 nucleus-box-border nucleus-w-auto nucleus-table-auto nucleus-border-separate nucleus-border-spacing-0 nucleus-border-solid nucleus-indent-0 nucleus-font-sans nucleus-top-0 nucleus-border-0 nucleus-border-[inherit] ${showActionBar ? 'nucleus-top-16' : 'nucleus-top-0'}`, children: _jsx(TableHead, { isSelectable: isSelectable, roundedBorder: false, flatHeaders: table.getFlatHeaders(), enableSorting: enableSorting, enableExpandableRows: hasExpandableRows }) })), _jsxs("table", { ref: defaultTableRef, className: 'nucleus-box-border nucleus-w-full nucleus-table-auto nucleus-border-separate nucleus-border-spacing-0 nucleus-border-solid nucleus-indent-0 nucleus-font-sans nucleus-border-0 nucleus-border-[inherit]', children: [_jsx(TableHead, { isSelectable: isSelectable, roundedBorder: showActionBar, flatHeaders: table.getFlatHeaders(), ariaHidden: isStickyShowing, enableSorting: enableSorting, enableExpandableRows: hasExpandableRows }), _jsx(TableBody, { colSpan: table.getFlatHeaders().length + (isSelectable ? 1 : 0) + (hasExpandableRows ? 1 : 0), highlightedRowIds: highlightedRowIds, getRowCustomClasses: getRowCustomClasses, disableRowSelectionReason: disableRowSelectionReason, isLoading: isLoading, isSelectable: isSelectable, isSingleSelect: isSingleSelect, labelNoResults: labelNoResults, rows: table.getRowModel().rows, showRoundedBottomBorder: !hasPagination || table.getPageCount() <= 1, expandedRowIds: hasExpandableRows ? expandedRowIds : undefined, loadingRowIds: hasExpandableRows ? loadingRowIds : undefined, asyncContentMap: hasExpandableRows ? asyncContentMap : undefined, onToggleExpand: hasExpandableRows ? handleToggleExpand : undefined, getExpandedContentClasses: getExpandedContentClasses, rowHasExpandableContent: rowHasExpandableContent, expandableContentField: expandableContentField })] })] }), hasPagination && table.getPageCount() > 1 && (_jsx("div", { "data-testid": 'nucleus-table--page-size', className: 'nucleus-box-border nucleus-flex nucleus-w-full nucleus-flex-wrap nucleus-items-center nucleus-justify-end nucleus-gap-4 nucleus-border-solid nucleus-bg-neutral-75 nucleus-font-sans nucleus-rounded-b-lg nucleus-border-1 nucleus-border-t-0 nucleus-border-neutral-300 nucleus-px-6 nucleus-py-3', children: _jsx(Pagination, { totalPages: table.getPageCount(), currentPage: pageIndex + 1, onPageNavigation: (pageNumber) => table.setPageIndex(pageNumber - 1), onPrevious: table.previousPage, onNext: table.nextPage, ariaLabel: paginationNavigationScreenReaderLabel, isLoading: isLoading }) }))] })] }));
+};
+export { createColumnHelper };
+//# sourceMappingURL=table.js.map

package/table/src/lib/table.types.d.ts

@@ -0,0 +1,295 @@
+import { ColumnDef, FilterFn, OnChangeFn, PaginationState, Row, SortingState, Table } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+import type { PlainDate } from 'temporal-luxon';
+import type { SelectOption } from '../../../select/src';
+import { ActionBarProps } from './action_bar/action_bar';
+export type TableRowId = string | number;
+export type FilterFieldType = {
+    fieldName: string;
+    fieldKey: string;
+    filterOptions: SelectOption[];
+    fieldLabel?: string;
+    default?: SelectOption;
+};
+export type SelectedFilterType = {
+    [key: string]: SelectOption | Pick<PlainDate, 'year' | 'month' | 'day'>;
+};
+type TableBaseProps<T> = {
+    /**
+     * Table data to be displayed or processed.
+     */
+    data: T[];
+    /**
+     * Table columns to be displayed or processed.
+     */
+    columns: ColumnDef<T>[];
+    /**
+     * Defines how the unique id for each row of the table is calculated. If you supply a string value, it should match a key in your
+     * data object that you want to use as the unique identifier. Alternatively, you can provide a function to take complete control of how the id is generated.
+     */
+    getRowId?: keyof T | ((originalRow: T, index: number, parent?: Row<T> | undefined) => string);
+    /**
+     * Whether or not to enable sorting for the columns
+     */
+    enableSorting?: boolean;
+    /**
+     * No results label if no search results were found
+     */
+    labelNoResults?: string;
+    /**
+     * Whether or not to show a loading indicator on the table body
+     */
+    isLoading?: boolean;
+    /**
+     * A custom search function to be used with a global searchKey.
+     * More information on filter functions can be found here: https://tanstack.com/table/v8/docs/api/features/filters#filterfn
+     */
+    searchFunction?: FilterFn<T>;
+    /**
+     * Don't show action bar when only selecting one row is possible
+     */
+    disableActionBar?: boolean;
+    /**
+     * Highlighted row id
+     */
+    highlightedRowIds?: TableRowId[];
+    /**
+     * Enable inline editing mode
+     */
+    isEditMode?: boolean;
+    /**
+     * Hoists the table state to the parent component
+     */
+    hoistTableObject?: (tableObject: Table<any>) => void;
+    /** s
+     * Custom header content
+     * */
+    customHeaderContent?: ReactNode;
+    /**
+     * Custom className for each row
+     */
+    getRowCustomClasses?: (originalRow: T) => string;
+    /**
+     * Field name in row data that contains the expanded content. Defaults to 'expandableContent'.
+     * If a row has this field defined, it will be used as the expanded content.
+     * Expandable rows are automatically enabled when any row has expandable content.
+     */
+    expandableContentField?: string;
+    /**
+     * Method name on row data that can be called to retrieve expanded content asynchronously.
+     * Defaults to 'getExpandableContent'. If a row has this method, it will be called when expanding.
+     * The method should return Promise<ReactNode>. The table manages loading state internally.
+     */
+    getExpandableContentField?: string;
+    /**
+     * Custom className for the expanded content wrapper
+     */
+    getExpandedContentClasses?: (row: T) => string;
+};
+type TableSelectableProps<T> = {
+    isSelectable: true;
+    /**
+     * The table's initial selection state, defining which rows will be selected by default.
+     */
+    initialSelectedIds?: TableRowId[];
+    /**
+     * The table's selection state, defining which rows will be selected.
+     */
+    selectedIds?: TableRowId[];
+    /**
+     * Action bar props
+     */
+    actionBarProps?: Omit<ActionBarProps, 'numRows' | 'selectAllFn' | 'unselectAllFn' | 'selectedRows'>;
+    /**
+     * A callback function for whenever the table selection state changes
+     * @param selectedRows All of the currently selected rows
+     */
+    onRowSelectionChange?: (selectedRows: TableRowId[]) => void;
+    /**
+     * Defines whether the table should allow only one row to be selected at a time. Defaults to false.
+     */
+    isSingleSelect?: boolean;
+    /**
+     * A callback function that determines whether a row should be selectable or not.
+     */
+    enableRowSelection?: (row: Row<T>) => boolean;
+    /**
+     * A user visible string or a callback function that returns a user visible string describing why the row is not
+     * selectable. Displayed as a tooltip anchored on the row's selection checkbox or radio.
+     */
+    disableRowSelectionReason?: string | ((originalRow: T) => string);
+} | {
+    /**
+     * Whether the table is selectable or not
+     */
+    isSelectable?: false;
+    isSingleSelect?: never;
+    actionBarProps?: never;
+    onRowSelectionChange?: never;
+    initialSelectedIds?: never;
+    selectedIds?: never;
+    enableRowSelection?: never;
+    disableRowSelectionReason?: never;
+};
+type TableSortingProps = {
+    manualSorting: true;
+    /**
+     * if sorting is set to manual, this is the function called when the table's sorting state changes
+     */
+    onSortingChange: OnChangeFn<SortingState>;
+    /**
+     * when manually controlling sorting, use this prop to track and update the table's sorting state externally.
+     * The sorting state has the shape of [{id: string, desc: boolean}], where the id refers to the corresponding column's id.
+     * If you would like to remove the sorting altogether on a column, remove the corresponding object from the sorting state array.
+     * this can be done with the onSortingChange function.
+     *
+     * @example
+     * manualSortingState = [
+     *  { id: 'col1Id', desc: true },
+     *  { id: 'col2Id', desc: false }
+     * ]
+     */
+    manualSortingState: SortingState;
+} | {
+    /**
+     * Whether or not the passed data is expected to be sorted already,
+     * in the case of server side rendering.
+     * https://tanstack.com/table/v8/docs/api/features/sorting#manualsorting
+     */
+    manualSorting?: false;
+    onSortingChange?: never;
+    manualSortingState?: never;
+};
+type TableSearchProps = {
+    /**
+     * Use internal search implementation for the table
+     */
+    useInternalSearch?: false;
+    /**
+     * To be used as the placeholder and aria-label for the search field
+     */
+    labelSearchField?: never;
+    /**
+     * A string that filters the rows of the table with – primarily used if an external search box is
+     * implemented.
+     */
+    searchKey?: string;
+    /**
+     * Whether or not the passed data is expected to be sorted already,
+     * in the case of server side rendering.
+     * https://tanstack.com/table/v8/docs/api/features/filters#manualfiltering
+     */
+    manualFiltering?: false;
+    onSearchClear?: never;
+    onSearch?: never;
+    filterFields?: FilterFieldType[];
+    onFilter?: (arg: SelectedFilterType) => void;
+    onFilterClear?: () => void;
+    filterByDate?: boolean;
+    initialSelectedFilters?: SelectedFilterType;
+} | {
+    useInternalSearch: true;
+    labelSearchField: string;
+    searchKey?: never;
+    manualFiltering?: false;
+    onSearchClear?: never;
+    onSearch?: never;
+    filterFields?: never;
+    onFilter?: never;
+    onFilterClear?: never;
+    filterByDate?: never;
+    initialSelectedFilters?: never;
+} | {
+    useInternalSearch: false;
+    labelSearchField?: never;
+    searchKey?: never;
+    manualFiltering: true;
+    onSearchClear?: never;
+    onSearch?: never;
+    filterFields?: never;
+    onFilter?: never;
+    onFilterClear?: never;
+    filterByDate?: never;
+    initialSelectedFilters?: never;
+} | {
+    useInternalSearch: true;
+    labelSearchField: string;
+    searchKey?: never;
+    manualFiltering: true;
+    filterFields?: never;
+    onFilter?: never;
+    onFilterClear?: never;
+    filterByDate?: never;
+    initialSelectedFilters?: never;
+    /**
+     * The function to call when the internal search field is cleared.
+     */
+    onSearchClear: () => void;
+    /**
+     * The function to call when the user initiates the internal search field (enter key).
+     */
+    onSearch: (val?: string) => void;
+} | {
+    useInternalSearch?: true;
+    labelSearchField?: string;
+    searchKey?: string;
+    manualFiltering?: true;
+    onSearchClear?: () => void;
+    onSearch?: (val?: string) => void;
+    filterFields?: FilterFieldType[];
+    onFilter?: (arg: SelectedFilterType) => void;
+    onFilterClear?: () => void;
+    filterByDate?: boolean;
+    initialSelectedFilters?: SelectedFilterType;
+};
+type TablePaginationProps = {
+    /**
+     * Whether the table has pagination or not
+     */
+    hasPagination?: false;
+    paginationNavigationScreenReaderLabel?: never;
+    initialPageSize?: never;
+    manualPagination?: never;
+    pageCount?: never;
+    manualPaginationState?: never;
+    onPaginationChange?: never;
+} | {
+    hasPagination: true;
+    /**
+     * pagination navigation screen reader label
+     */
+    paginationNavigationScreenReaderLabel: string;
+    /**
+     * sets the initial page size when pagination is enabled. Defaults to 50.
+     */
+    initialPageSize?: 5 | 10 | 25 | 50;
+    /**
+     * When manual pagination is enabled, the table will not automatically paginate rows.
+     * Set this when you're expecting to handle pagination externally, for example server-side pagination.
+     */
+    manualPagination?: false;
+    pageCount?: never;
+    manualPaginationState?: never;
+    onPaginationChange?: never;
+} | {
+    hasPagination: true;
+    paginationNavigationScreenReaderLabel: string;
+    initialPageSize?: 5 | 10 | 25 | 50;
+    manualPagination: true;
+    /**
+     * When manually controlling pagination, you should supply a total pageCount value to the table if you know it.
+     * If you do not know how many pages there are, you can set this to -1.
+     */
+    pageCount: number;
+    /**
+     * when manually controlling pagination, use this prop to track and update the table's pagination state externally.
+     */
+    manualPaginationState: PaginationState;
+    /**
+     * function to call when pagination state is updated. This is required when doing manual pagination, use this function to update
+     * your externally managed state.
+     */
+    onPaginationChange: OnChangeFn<PaginationState>;
+};
+export type TableProps<T> = TableBaseProps<T> & TableSelectableProps<T> & TableSortingProps & TableSearchProps & TablePaginationProps;
+export {};

package/table/src/lib/table.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.types.js.map

package/table/src/lib/table_body.d.ts

@@ -0,0 +1,20 @@
+import { Row, RowData } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+import { TableProps, TableRowId } from './table.types';
+type Props<T> = {
+    rows: Row<T>[];
+    colSpan: number;
+    highlightedRowIds?: TableRowId[];
+    getRowCustomClasses?: (originalRow: T) => string;
+    disableRowSelectionReason?: string | ((originalRow: T) => string);
+    showRoundedBottomBorder?: boolean;
+    expandedRowIds?: Set<TableRowId>;
+    loadingRowIds?: Set<TableRowId>;
+    asyncContentMap?: Map<TableRowId, ReactNode>;
+    onToggleExpand?: (rowId: TableRowId) => void;
+    getExpandedContentClasses?: (row: T) => string;
+    rowHasExpandableContent?: (row: T) => boolean;
+    expandableContentField?: string;
+} & Required<Pick<TableProps<T>, 'isLoading' | 'labelNoResults' | 'isSelectable' | 'isSingleSelect'>>;
+export declare const TableBody: <T extends RowData>({ colSpan, highlightedRowIds, getRowCustomClasses, disableRowSelectionReason, isLoading, isSelectable, isSingleSelect, labelNoResults, rows, showRoundedBottomBorder, expandedRowIds, loadingRowIds, asyncContentMap, onToggleExpand, getExpandedContentClasses, rowHasExpandableContent, expandableContentField, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/table/src/lib/table_body.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableRow, TableRowHasNoResults, TableRowIsLoading } from './table_row';
+export const TableBody = ({ colSpan, highlightedRowIds = [], getRowCustomClasses, disableRowSelectionReason, isLoading = false, isSelectable = false, isSingleSelect, labelNoResults, rows, showRoundedBottomBorder = false, expandedRowIds, loadingRowIds, asyncContentMap, onToggleExpand, getExpandedContentClasses, rowHasExpandableContent, expandableContentField, }) => {
+    const state = isLoading ? 'isLoading' : rows.length === 0 ? 'hasNoResults' : 'hasResults';
+    return (_jsx("tbody", { "data-testid": 'nucleus-table--body', className: 'nucleus-box-border', children: {
+            isLoading: _jsx(TableRowIsLoading, { colSpan: colSpan }),
+            hasNoResults: _jsx(TableRowHasNoResults, { colSpan: colSpan, label: labelNoResults }),
+            hasResults: rows.map((row, index) => (_jsx(TableRow
+            // eslint-disable-next-line react/no-array-index-key
+            , { index: index, totalRows: rows.length, isHighlighted: highlightedRowIds && highlightedRowIds.includes(row.id), rowCustomClasses: getRowCustomClasses ? getRowCustomClasses(row.original) : '', disableRowSelectionReason: disableRowSelectionReason, isSelectable: isSelectable, isSingleSelect: isSingleSelect, row: row, showRoundedBottomBorder: showRoundedBottomBorder, expandedRowIds: expandedRowIds, onToggleExpand: onToggleExpand, isExpandedContentLoading: loadingRowIds === null || loadingRowIds === void 0 ? void 0 : loadingRowIds.has(row.id), asyncExpandedContent: asyncContentMap === null || asyncContentMap === void 0 ? void 0 : asyncContentMap.get(row.id), expandedContentClasses: getExpandedContentClasses ? getExpandedContentClasses(row.original) : undefined, rowHasExpandableContent: rowHasExpandableContent, expandableContentField: expandableContentField }, `${row.id}-${index}`))),
+        }[state] }));
+};
+//# sourceMappingURL=table_body.js.map

package/table/src/lib/table_head.d.ts

@@ -0,0 +1,13 @@
+import { Header } from '@tanstack/react-table';
+/**
+ * TableHead was being written twice because of the sticky vs non-sticky versions of it.
+ * Extracted it here instead and using it inside the render function.
+ */
+export declare const TableHead: <T>({ ariaHidden, isSelectable, roundedBorder, flatHeaders, enableSorting, enableExpandableRows, }: {
+    ariaHidden?: boolean;
+    isSelectable?: boolean;
+    roundedBorder?: boolean;
+    flatHeaders: Header<T, unknown>[];
+    enableSorting: boolean;
+    enableExpandableRows?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;