@medable/nucleus-ui 2.0.0

package/table/src/index.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationState, SortingState, ColumnDef } from '@tanstack/react-table';
+import type { TableProps, TableRowId, SelectedFilterType } from './lib/table.types';
+export * from './lib/table';
+export type { PaginationState, SortingState, TableProps, TableRowId, ColumnDef, SelectedFilterType };

package/table/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/table';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,13 @@
+export type ActionButtonProps = {
+    label: string;
+    onClick: () => void;
+};
+export type ActionBarProps = {
+    ariaHidden?: boolean;
+    numRows: number;
+    roundedBorder?: boolean;
+    selectAllFn: () => void;
+    unselectAllFn: () => void;
+    actionButtons?: readonly [ActionButtonProps] | readonly [ActionButtonProps, ActionButtonProps];
+};
+export declare const ActionBar: ({ ariaHidden, numRows, roundedBorder, selectAllFn, unselectAllFn, actionButtons, }: ActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/table/src/lib/action_bar/action_bar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../button/src';
+import { useLocalizeMessage, Message } from '../../../../i18n/src';
+import { ActionBarButton } from './action_bar_button';
+export const ActionBar = ({ ariaHidden, numRows, roundedBorder, selectAllFn, unselectAllFn, actionButtons, }) => {
+    const localizeMessage = useLocalizeMessage();
+    return (_jsxs("div", { "aria-hidden": ariaHidden, className: `nucleus-box-border nucleus-flex nucleus-h-16 nucleus-w-full nucleus-flex-row nucleus-items-center nucleus-justify-between nucleus-bg-primary-600 nucleus-font-sans nucleus-text-sm nucleus-not-italic nucleus-text-white nucleus-p-4 ${roundedBorder ? 'nucleus-rounded-t-md' : ''}`, "data-testid": 'nucleus-table--action-bar', children: [_jsxs("div", { className: 'nucleus-flex nucleus-flex-row nucleus-items-center nucleus-gap-4', children: [_jsx("div", { className: 'nucleus-flex nucleus-flex-row nucleus-items-center nucleus-gap-2', children: _jsx("span", { role: 'status', children: localizeMessage(new Message({ id: 'rows-selected', source: '{count, plural, one {# Row Selected} other {# Rows Selected}}' }, { count: numRows /* 2 */ })) }) }), _jsxs("div", { className: 'nucleus-flex nucleus-h-5 nucleus-flex-row nucleus-items-center nucleus-gap-1 nucleus-font-normal', children: [_jsx(ActionBarButton, { dataTestId: 'nucleus-table--select-all', onClick: selectAllFn, children: localizeMessage('Select All') }), "|", _jsx(ActionBarButton, { dataTestId: 'nucleus-table--unselect-all', onClick: unselectAllFn, children: localizeMessage('Unselect All') })] })] }), _jsx("div", { className: 'nucleus-flex nucleus-flex-row nucleus-items-center nucleus-gap-3', children: actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map((button, idx) => button && (_jsx(Button, { dataTestId: `nucleus-table--action-button-${idx}`, label: button.label, variant: 'secondary', size: 'sm', onClick: button.onClick }, `${String(button.label)}-${idx}`))) })] }));
+};
+//# sourceMappingURL=action_bar.js.map

package/table/src/lib/action_bar/action_bar_button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ActionBarButtonProps = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> & {
+    dataTestId: string;
+};
+export declare const ActionBarButton: ({ dataTestId, onClick, children }: ActionBarButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/table/src/lib/action_bar/action_bar_button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ActionBarButton = ({ dataTestId, onClick, children }) => {
+    return (_jsx("button", { "data-testid": dataTestId, onClick: onClick, type: 'button', className: 'nucleus-box-border nucleus-cursor-pointer nucleus-bg-transparent nucleus-bg-none nucleus-font-sans nucleus-text-sm nucleus-normal-case nucleus-text-white nucleus-underline nucleus-m-0 nucleus-border-0 nucleus-p-0', children: children }));
+};
+//# sourceMappingURL=action_bar_button.js.map

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

@@ -0,0 +1,24 @@
+import { ColumnDef, PaginationState } from '@tanstack/react-table';
+export type Data = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    progress: number;
+    status: string;
+    eyeColor: string;
+};
+declare const data: Data[];
+declare const columns: ColumnDef<Data>[];
+declare const fetchDataApi: (searchKey?: string) => Promise<unknown>;
+declare const dataForPagination: Data[];
+declare const fetchPaginatedDataApi: ({ pageIndex, pageSize }: PaginationState) => Promise<{
+    data: Data[];
+    total: number;
+}>;
+/**
+ * Externalizes the pagination state, so that the updates are controlled external to the Table component
+ */
+declare const MockTableWithManualPagination: () => import("react/jsx-runtime").JSX.Element;
+export { columns, data, dataForPagination, fetchDataApi, fetchPaginatedDataApi, MockTableWithManualPagination };

package/table/src/lib/mock_data.js

@@ -0,0 +1,313 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { v4 as uuidV4 } from 'uuid';
+import { Table } from './table';
+const data = [
+    {
+        id: uuidV4(),
+        firstName: 'management',
+        lastName: 'machine',
+        age: 6,
+        visits: 42,
+        progress: 16,
+        status: 'single',
+        eyeColor: 'brown',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'Loss',
+        lastName: 'psychology',
+        age: 6,
+        visits: 97,
+        progress: 11,
+        status: 'complicated',
+        eyeColor: 'blue',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'insurance',
+        lastName: 'trousers',
+        age: 28,
+        visits: 51,
+        progress: 22,
+        status: 'complicated',
+        eyeColor: 'grey',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'example',
+        lastName: 'verse',
+        age: 6,
+        visits: 61,
+        progress: 26,
+        status: 'single',
+        eyeColor: 'blue',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'drink',
+        lastName: 'battle',
+        age: 24,
+        visits: 89,
+        progress: 91,
+        status: 'relationship',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'bath',
+        lastName: 'sugar',
+        age: 29,
+        visits: 11,
+        progress: 18,
+        status: 'single',
+        eyeColor: 'brown',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'technology',
+        lastName: 'jeans',
+        age: 2,
+        visits: 5,
+        progress: 17,
+        status: 'relationship',
+        eyeColor: 'brown',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'design',
+        lastName: 'screw',
+        age: 21,
+        visits: 17,
+        progress: 28,
+        status: 'relationship',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'touch',
+        lastName: 'leaf',
+        age: 24,
+        visits: 88,
+        progress: 53,
+        status: 'complicated',
+        eyeColor: 'blue',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'money',
+        lastName: 'bridge',
+        age: 13,
+        visits: 24,
+        progress: 83,
+        status: 'single',
+        eyeColor: 'grey',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'sack',
+        lastName: 'feather',
+        age: 16,
+        visits: 33,
+        progress: 17,
+        status: 'complicated',
+        eyeColor: 'brown',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'join',
+        lastName: 'planes',
+        age: 6,
+        visits: 94,
+        progress: 30,
+        status: 'complicated',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'cats',
+        lastName: 'increase',
+        age: 28,
+        visits: 39,
+        progress: 19,
+        status: 'single',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'magazine',
+        lastName: 'letter',
+        age: 13,
+        visits: 49,
+        progress: 91,
+        status: 'complicated',
+        eyeColor: 'brown',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'youth',
+        lastName: 'visitor',
+        age: 21,
+        visits: 67,
+        progress: 46,
+        status: 'relationship',
+        eyeColor: 'blue',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'pen',
+        lastName: 'expression',
+        age: 21,
+        visits: 5,
+        progress: 71,
+        status: 'complicated',
+        eyeColor: 'grey',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'harbor',
+        lastName: 'hen',
+        age: 0,
+        visits: 94,
+        progress: 2,
+        status: 'single',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'cheek',
+        lastName: 'muscle',
+        age: 27,
+        visits: 40,
+        progress: 83,
+        status: 'single',
+        eyeColor: 'green',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'tank',
+        lastName: 'pencil',
+        age: 27,
+        visits: 58,
+        progress: 65,
+        status: 'single',
+        eyeColor: 'blue',
+    },
+    {
+        id: uuidV4(),
+        firstName: 'error',
+        lastName: 'complaint',
+        age: 2,
+        visits: 61,
+        progress: 74,
+        status: 'single',
+        eyeColor: 'brown',
+    },
+];
+const columns = [
+    {
+        header: 'First Name',
+        accessorKey: 'firstName',
+        size: 200,
+        // more information on sorting functions can be found here:
+        // https://tanstack.com/table/v8/docs/api/features/sorting
+        sortingFn: 'textCaseSensitive',
+    },
+    {
+        header: 'Last Name',
+        accessorKey: 'lastName',
+        enableSorting: false,
+    },
+    {
+        header: 'Age',
+        accessorKey: 'age',
+        cell: (value) => _jsx("div", { className: 'nucleus-text-right', children: value.getValue() }),
+    },
+    {
+        header: 'Visits',
+        accessorKey: 'visits',
+        cell: (value) => (_jsxs(_Fragment, { children: [_jsx("p", { className: 'nucleus-text-base nucleus-m-0 nucleus-p-0', children: "this is the # visited" }), _jsx("p", { className: 'nucleus-text-base nucleus-m-0 nucleus-p-0', children: value.getValue() })] })),
+        enableGlobalFilter: false,
+    },
+    {
+        header: 'Status',
+        accessorKey: 'status',
+    },
+    {
+        header: 'Eye Color',
+        accessorKey: 'eyeColor',
+    },
+    {
+        header: 'Profile Progress',
+        accessorKey: 'progress',
+        cell: (value) => _jsx("div", { className: 'nucleus-text-right', children: value.getValue() }),
+        enableGlobalFilter: false,
+    },
+];
+const fetchDataApi = (searchKey) => {
+    const promise = new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(searchKey ? data.filter((item) => item.firstName.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1) : data);
+        }, 1000);
+    });
+    return promise;
+};
+const generateIds = (rows) => {
+    return rows.map((row) => {
+        const id = uuidV4();
+        return Object.assign(Object.assign({}, row), { id });
+    });
+};
+const dataForPagination = [];
+Array(15)
+    .fill(undefined)
+    .forEach(() => dataForPagination.push(...generateIds(data)));
+const fetchPaginatedDataApi = ({ pageIndex, pageSize }) => {
+    const pageStart = pageIndex * pageSize;
+    const pageEnd = pageStart + pageSize;
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                data: dataForPagination.slice(pageStart, pageEnd),
+                total: dataForPagination.length,
+            });
+        }, 1000);
+    });
+};
+/**
+ * Externalizes the pagination state, so that the updates are controlled external to the Table component
+ */
+const MockTableWithManualPagination = () => {
+    const [serverData, setServerData] = useState({ data: [], total: 0 });
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+    const [isLoading, setIsLoading] = useState(false);
+    const initialSelection = useMemo(() => [dataForPagination[1].id, dataForPagination[8].id, dataForPagination[12].id], []);
+    const onRowSelectionChange = (selectedRows) => {
+        console.log('onRowSelectionChange', selectedRows);
+    };
+    const fetchData = (pagination) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsLoading(true);
+        const fetchedData = yield fetchPaginatedDataApi(pagination);
+        setServerData(fetchedData);
+        setIsLoading(false);
+    });
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        fetchData(pagination);
+    }, [pagination]);
+    return (_jsx(Table, { data: serverData.data, columns: columns, pageCount: Math.round(serverData.total / pagination.pageSize), initialSelectedIds: initialSelection, paginationNavigationScreenReaderLabel: 'nav', hasPagination: true, getRowId: 'id', manualPagination: true, manualPaginationState: pagination, onPaginationChange: setPagination, isLoading: isLoading, isSelectable: true, useInternalSearch: true, labelSearchField: 'Search', onRowSelectionChange: onRowSelectionChange, actionBarProps: {
+            actionButtons: [
+                {
+                    label: 'Primary Button',
+                    onClick: () => console.log('primary button clicked'),
+                },
+                {
+                    label: 'Secondary Button',
+                    onClick: () => console.log('secondary button clicked'),
+                },
+            ],
+        } }));
+};
+export { columns, data, dataForPagination, fetchDataApi, fetchPaginatedDataApi, MockTableWithManualPagination };
+//# sourceMappingURL=mock_data.js.map

package/table/src/lib/pagination/get_pages.d.ts

@@ -0,0 +1,13 @@
+type PageInfo = {
+    currentPage: number;
+    totalPages: number;
+};
+/**
+ * we want to always show at most 9 total items, including the ellipsis items.
+ * there will be 5 page items in between the ellipses when both the start and end ellipses are shown.
+ *
+ * @param pageInfo - object containing current page and total pages info
+ * @returns An array of up to 9 total items representing page numbers and ellipses when applicable
+ */
+export declare const getPages: ({ currentPage, totalPages }: PageInfo) => Array<string | number>;
+export {};

package/table/src/lib/pagination/get_pages.js

@@ -0,0 +1,46 @@
+/**
+ * we want to always show at most 9 total items, including the ellipsis items.
+ * there will be 5 page items in between the ellipses when both the start and end ellipses are shown.
+ *
+ * @param pageInfo - object containing current page and total pages info
+ * @returns An array of up to 9 total items representing page numbers and ellipses when applicable
+ */
+export const getPages = ({ currentPage, totalPages }) => {
+    let pages = [];
+    if (totalPages <= 9) {
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+    }
+    else if (currentPage > 5 && currentPage < totalPages - 4) {
+        pages = [
+            1,
+            '...',
+            currentPage - 2,
+            currentPage - 1,
+            currentPage,
+            currentPage + 1,
+            currentPage + 2,
+            '...',
+            totalPages,
+        ];
+    }
+    else if (currentPage >= totalPages - 4) {
+        pages = [
+            1,
+            '...',
+            totalPages - 6,
+            totalPages - 5,
+            totalPages - 4,
+            totalPages - 3,
+            totalPages - 2,
+            totalPages - 1,
+            totalPages,
+        ];
+    }
+    else {
+        pages = [1, 2, 3, 4, 5, 6, 7, '...', totalPages];
+    }
+    return pages;
+};
+//# sourceMappingURL=get_pages.js.map

package/table/src/lib/pagination/item.d.ts

@@ -0,0 +1,12 @@
+export type PaginationItemProps = {
+    state?: 'selected' | 'disabled' | 'default';
+    onClick?: () => void;
+} & ({
+    variant: 'previous' | 'next';
+} | {
+    variant: 'number';
+    number: number;
+} | {
+    variant: 'ellipsis';
+});
+export declare const PaginationItem: ({ onClick, state, ...props }: PaginationItemProps) => import("react/jsx-runtime").JSX.Element;

package/table/src/lib/pagination/item.js

@@ -0,0 +1,32 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../../../icon/src';
+export const PaginationItem = (_a) => {
+    var { onClick, state = 'default' } = _a, props = __rest(_a, ["onClick", "state"]);
+    const getInnerElement = () => {
+        switch (props.variant) {
+            case 'previous':
+                return _jsx(Icon, { name: 'chevronLeft', color: 'current' });
+            case 'next':
+                return _jsx(Icon, { name: 'chevronRight', color: 'current' });
+            case 'ellipsis':
+                return '…';
+            case 'number':
+                return props.number;
+        }
+    };
+    return (_jsx("li", { "data-testid": 'nucleus-table--pagination-item', className: 'nucleus-group -nucleus-mr-px last-of-type:nucleus-mr-0', children: _jsx("button", { "aria-current": state === 'selected', disabled: state === 'disabled', onClick: onClick, className: `
+        nucleus-relative nucleus-box-border nucleus-inline-flex nucleus-aspect-square nucleus-w-10 nucleus-cursor-pointer nucleus-select-none nucleus-items-center nucleus-justify-center nucleus-border-solid nucleus-font-sans nucleus-text-base
+        nucleus-outline-none nucleus-transition-colors
+        nucleus-border nucleus-border-neutral-200 focus-visible:nucleus-z-20 focus-visible:nucleus-transition-none
+        focus-visible:nucleus-border-2 focus-visible:nucleus-border-primary-500 group-first-of-type:nucleus-rounded-l group-last-of-type:nucleus-rounded-r
+        ${{
+                default: `nucleus-bg-white nucleus-text-neutral-450
+              hover:nucleus-z-10 hover:nucleus-bg-neutral-50 hover:nucleus-text-neutral-600
+            active:nucleus-bg-neutral-200 active:nucleus-text-neutral-700`,
+                disabled: 'nucleus-bg-neutral-200 nucleus-text-text-disabled nucleus-pointer-events-none',
+                selected: 'nucleus-z-20 nucleus-bg-primary-50 nucleus-text-primary-500 nucleus-border-primary-500 nucleus-pointer-events-none',
+            }[state]} ${props.variant === 'ellipsis' ? 'nucleus-pointer-events-none' : ''}
+      `, children: getInnerElement() }) }));
+};
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1,10 @@
+export type PaginationProps = {
+    ariaLabel: string;
+    totalPages: number;
+    currentPage: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    onPageNavigation: (pageNumber: number) => void;
+    isLoading: boolean;
+};
+export declare const Pagination: ({ ariaLabel, totalPages, currentPage, onNext, onPrevious, onPageNavigation, isLoading, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/table/src/lib/pagination/pagination.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getPages } from './get_pages';
+import { PaginationItem } from './item';
+export const Pagination = ({ ariaLabel, totalPages, currentPage, onNext, onPrevious, onPageNavigation, isLoading, }) => {
+    const pages = getPages({ currentPage, totalPages });
+    return (_jsx("nav", { "aria-label": ariaLabel, children: _jsxs("ul", { "data-testid": 'nucleus-table--pagination', className: 'nucleus-isolate nucleus-box-border nucleus-inline-flex nucleus-list-none nucleus-m-0 nucleus-border-0 nucleus-p-0', children: [_jsx(PaginationItem, { variant: 'previous', onClick: onPrevious, state: isLoading || currentPage === 1 ? 'disabled' : 'default' }), pages.map((value, index) => typeof value === 'number' ? (_jsx(PaginationItem
+                // eslint-disable-next-line react/no-array-index-key
+                , { variant: 'number', number: value, onClick: () => onPageNavigation(value), state: isLoading ? 'disabled' : currentPage === value ? 'selected' : 'default' }, index)) : (
+                // eslint-disable-next-line react/no-array-index-key
+                _jsx(PaginationItem, { variant: 'ellipsis' }, index))), _jsx(PaginationItem, { variant: 'next', onClick: onNext, state: isLoading || currentPage === totalPages ? 'disabled' : 'default' })] }) }));
+};
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1,7 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { TableProps } from './table.types';
+/**
+ * The table component displays information that is organized in a way that is easy to scan.
+ */
+export declare const Table: <T extends object>({ actionBarProps, columns, data: initialData, enableSorting, getRowId, hasPagination, initialPageSize, initialSelectedIds, selectedIds, isLoading, isSelectable, isSingleSelect, highlightedRowIds, labelNoResults, labelSearchField, manualFiltering, manualPagination, manualPaginationState, manualSorting, manualSortingState, onPaginationChange, onRowSelectionChange, onSearch, onSearchClear, onSortingChange, pageCount, paginationNavigationScreenReaderLabel, searchFunction, searchKey, useInternalSearch, filterFields, filterByDate, onFilter, onFilterClear, initialSelectedFilters, disableActionBar, isEditMode, hoistTableObject, customHeaderContent, enableRowSelection, disableRowSelectionReason, getRowCustomClasses, expandableContentField, getExpandableContentField, getExpandedContentClasses, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { createColumnHelper };