@camunda/camunda-composite-components 0.22.3 → 0.22.5

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -0,0 +1,509 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, CodeSnippet, DataTableSkeleton, Link, MenuButton, MenuItem, MultiSelect, OverflowMenu, OverflowMenuItem, Pagination, Select, SelectItem, Table, TableBody, TableCell, TableContainer, TableExpandedRow, TableExpandHeader, TableExpandRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarContent, TableToolbarSearch, } from '@carbon/react';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { LinkButton } from './link-button/link-button.js';
+const ToolbarWrapper = styled(TableToolbarContent) `
+  @media (max-width: 768px) {
+    flex-wrap: wrap !important;
+    block-size: auto !important;
+  }
+`;
+const overrideHistoryMethods = (onChange) => {
+    const originalReplaceState = window.history.replaceState;
+    window.history.replaceState = (...args) => {
+        originalReplaceState.apply(window.history, args);
+        onChange();
+    };
+};
+function areValuesTheSame(a, b) {
+    return a.sort().join(' ') === b.sort().join(' ');
+}
+export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, toolbars, isLoading, title, description, actions, id, queryPrefix = '', }) => {
+    if (singleToolbar && toolbars) {
+        throw new Error('you should either have `toolbar` or `toolbars` but not both');
+    }
+    if (!toolbars && singleToolbar) {
+        toolbars = [singleToolbar];
+    }
+    const allToolbarItems = toolbars?.flat() ?? [];
+    // preparation
+    const tableOptions = {
+        pageSize: options?.pageSize || 10,
+        pageSizes: options?.pageSizes || [10, 20, 30, 40, 50],
+        tableSize: options?.tableSize || 'lg',
+        useZebraStyles: options?.useZebraStyles || false,
+        showPagination: data.length > 10,
+        actionsUseOverflowMenuMinItems: options?.actionsUseOverflowMenuMinItems || 3,
+    };
+    const headerKeys = headers.map((header) => header.key);
+    let component = (_jsx(DataTableSkeleton, { headers: headers.map((header) => {
+            return { header: header.label };
+        }) }));
+    const [currentPage, setCurrentPage] = useState(1);
+    const [currentPageSize, setCurrentPageSize] = useState(tableOptions.pageSize);
+    const [inputData, setInputData] = useState([]);
+    const [filteredData, setFilteredData] = useState([]);
+    const [selectedItems, selectItem] = useState([]);
+    const toggleSelectedItem = (id) => {
+        if (selectedItems.includes(id)) {
+            selectItem(selectedItems.filter((item) => item !== id));
+        }
+        else {
+            selectItem([...selectedItems, id]);
+        }
+    };
+    const toggleSelectAllOnPage = () => {
+        if (selectedItems.length === 0) {
+            selectItem(getDataForCurrentPage().map((row) => row.id));
+        }
+        else {
+            selectItem([]);
+        }
+    };
+    const itemIsSelected = (id) => selectedItems.includes(id);
+    const currentFilters = useRef(new Map());
+    const [currentSorting, setCurrentSorting] = useState({
+        key: '',
+        sortDirection: 'NONE',
+    });
+    const [currentRowExpanded, setCurrentRowExpanded] = useState([]);
+    const [urlStates, setUrlStates] = useState({});
+    useEffect(() => {
+        const handleUrlChange = () => {
+            const params = new URLSearchParams(window.location.search);
+            setUrlStates(Object.fromEntries(params));
+        };
+        overrideHistoryMethods(handleUrlChange);
+        handleUrlChange();
+        window.addEventListener('popstate', handleUrlChange);
+        return () => {
+            window.removeEventListener('popstate', handleUrlChange);
+        };
+    }, []);
+    useEffect(() => {
+        updateFilteredData();
+    }, [data]);
+    const updateFilterURLState = (filterName, value) => {
+        setTimeout(() => {
+            const params = new URLSearchParams(window.location.search);
+            const name = `${queryPrefix ? `${queryPrefix}-` : ''}${filterName}`;
+            if (Array.from(value).length > 0) {
+                params.set(name, value);
+            }
+            else {
+                params.delete(name);
+            }
+            const paramsString = params.size > 0 ? `?${params.toString()}` : '';
+            window.history.replaceState({}, '', `${window.location.pathname}${paramsString}`);
+        }, 250);
+    };
+    const updateFilteredData = () => {
+        let currentFilteredData = data;
+        if (currentFilters.current.size > 0) {
+            for (const key of currentFilters.current.keys()) {
+                const filter = currentFilters.current.get(key);
+                const foundFilter = allToolbarItems
+                    .filter((item) => item.type === 'multiSelect' ||
+                    item.type === 'search' ||
+                    item.type === 'singleSelect')
+                    .find((currentFilter) => currentFilter.id === key);
+                if (foundFilter && filter) {
+                    if (filter.selectedItems && filter.selectedItems.length > 0) {
+                        currentFilteredData = currentFilteredData.filter((row) => {
+                            return foundFilter
+                                .filter({
+                                selectedItems: filter.selectedItems,
+                                row,
+                            });
+                        });
+                    }
+                    if (typeof filter.searchTerm === 'string' &&
+                        filter.searchTerm.length >= 0) {
+                        currentFilteredData = currentFilteredData.filter((row) => {
+                            return foundFilter
+                                .filter({
+                                searchTerm: filter.searchTerm?.trim(),
+                                row,
+                            });
+                        });
+                    }
+                    if (filter.selectedItem && filter.selectedItem?.length > 0) {
+                        currentFilteredData = currentFilteredData.filter((row) => {
+                            return foundFilter
+                                .filter({
+                                selectedItem: filter.selectedItem,
+                                row,
+                            });
+                        });
+                    }
+                }
+            }
+        }
+        setFilteredData(currentFilteredData);
+        setCurrentPage(1);
+        selectItem([]);
+    };
+    const getQueryKey = (queryName) => {
+        const prefix = queryPrefix ? `${queryPrefix}-` : '';
+        const query = `${prefix}${queryName}`;
+        return query;
+    };
+    const addUrlStatesToCurrentFilters = () => {
+        if (headers && headers.length > 0) {
+            for (const header of headers) {
+                const query = getQueryKey(header.key);
+                if (query && query in urlStates) {
+                    setCurrentSorting({
+                        key: header.key,
+                        sortDirection: urlStates[query],
+                    });
+                    break;
+                }
+            }
+        }
+        if (toolbars && toolbars.length > 0) {
+            for (const toolbar of toolbars) {
+                if (toolbar && toolbar.length > 0) {
+                    for (const toolbarElement of toolbar) {
+                        switch (toolbarElement.type) {
+                            case 'search': {
+                                const searchElement = toolbarElement;
+                                const queryName = searchElement?.queryName ?? searchElement.id;
+                                const query = getQueryKey(queryName);
+                                if (query && query in urlStates) {
+                                    currentFilters.current.set(searchElement.id, {
+                                        searchTerm: urlStates[query],
+                                    });
+                                }
+                                break;
+                            }
+                            case 'singleSelect': {
+                                const element = toolbarElement;
+                                const queryName = element?.queryName ?? element.id;
+                                const query = getQueryKey(queryName);
+                                if (query && query in urlStates) {
+                                    currentFilters.current.set(element.id, {
+                                        selectedItem: urlStates[query],
+                                    });
+                                }
+                                break;
+                            }
+                            case 'multiSelect': {
+                                const multiSelectElement = toolbarElement;
+                                const queryName = multiSelectElement?.queryName ?? multiSelectElement.id;
+                                const query = getQueryKey(queryName);
+                                if (query && query in urlStates) {
+                                    const queryItems = urlStates[query] ?? '';
+                                    const selectedItems = queryItems.split(',');
+                                    currentFilters.current.set(multiSelectElement.id, {
+                                        id: multiSelectElement.id,
+                                        selectedItems,
+                                    });
+                                }
+                                break;
+                            }
+                            default: {
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+    // // work around to sync state data and input data
+    if (!areValuesTheSame(data, inputData)) {
+        setInputData(data);
+        addUrlStatesToCurrentFilters();
+        updateFilteredData();
+        setCurrentPage(1);
+    }
+    const getDataForCurrentPage = () => {
+        const start = (currentPage - 1) * currentPageSize;
+        const end = start + currentPageSize;
+        let sortedData = filteredData.toSorted((a, b) => a.originalIndex - b.originalIndex);
+        if (currentSorting.key.length > 0) {
+            const foundHeader = headers.find((header) => header.key === currentSorting.key);
+            if (foundHeader?.sorting) {
+                sortedData = filteredData.toSorted((a, b) => {
+                    switch (currentSorting.sortDirection) {
+                        case 'ASC':
+                            return foundHeader.sorting(a, b);
+                        case 'DESC':
+                            return foundHeader.sorting(a, b) * -1;
+                        case 'NONE':
+                            return a.originalIndex - b.originalIndex;
+                        default:
+                            return 0;
+                    }
+                });
+            }
+        }
+        const data = sortedData.slice(start, end);
+        return data;
+    };
+    // ==== SORTING ====
+    const currentSortDirection = (key) => {
+        if (currentSorting.key === key) {
+            return currentSorting.sortDirection;
+        }
+        else {
+            return 'NONE';
+        }
+    };
+    const updateSortDirection = (key) => {
+        let sortingDetails = { key, sortDirection: 'ASC' };
+        if (currentSorting.key === key) {
+            switch (currentSorting.sortDirection) {
+                case 'ASC':
+                    sortingDetails = { key, sortDirection: 'DESC' };
+                    break;
+                case 'DESC':
+                    sortingDetails = { key, sortDirection: 'NONE' };
+                    break;
+                case 'NONE':
+                    sortingDetails = { key, sortDirection: 'ASC' };
+                    break;
+            }
+        }
+        setCurrentSorting(sortingDetails);
+        updateFilterURLState(sortingDetails.key, sortingDetails.sortDirection);
+    };
+    // ==== EXPANSION ====
+    const isRowExpanded = (row) => {
+        const expanded = currentRowExpanded.includes(row.id);
+        return expanded;
+    };
+    const updateRowExpansion = (row) => {
+        const currentlyExpanded = isRowExpanded(row);
+        if (currentlyExpanded) {
+            setCurrentRowExpanded((rowExpanded) => rowExpanded.filter((id) => id !== row.id));
+        }
+        else {
+            setCurrentRowExpanded((rowExpanded) => [...rowExpanded, row.id]);
+        }
+    };
+    if (!isLoading) {
+        // ==== TOOLBAR ====
+        const toolbarRows = [];
+        if (toolbars && toolbars.length > 0) {
+            toolbars.forEach((toolbar, index) => {
+                let toolbarComponent = null;
+                let searchComponent = null;
+                const toolbarComponents = [];
+                if (toolbar && toolbar.length > 0) {
+                    for (const toolbarElement of toolbar) {
+                        if (toolbarElement.type === 'singleSelect') {
+                            const element = toolbarElement;
+                            const defaultValue = currentFilters.current.get(element.id)?.selectedItem;
+                            toolbarComponents.push(_jsx("div", { style: { width: 'auto' }, children: _jsx(Select, { size: 'lg', id: element.id, inline: true, value: defaultValue ?? element.defaultValue, disabled: element.disabled, labelText: element.label, onChange: (event) => {
+                                        currentFilters.current.set(element.id, {
+                                            selectedItem: event.target.value,
+                                        });
+                                        updateFilteredData();
+                                        updateFilterURLState(element.queryName ?? element.id, event.target.value);
+                                    }, children: element.items?.map((item) => {
+                                        return (_jsx(SelectItem, { value: item.id, text: item.label }, item.id));
+                                    }) }) }, 'toolbar-singleSelect'));
+                        }
+                        if (toolbarElement.type === 'multiItemButton') {
+                            const multiItemElement = toolbarElement;
+                            toolbarComponents.push(_jsx(Button, { onClick: () => {
+                                    multiItemElement.multiOnClick(inputData.filter((row) => selectedItems.includes(row.id)));
+                                }, renderIcon: multiItemElement.icon, disabled: (multiItemElement.disabled &&
+                                    multiItemElement.disabled(inputData.filter((row) => selectedItems.includes(row.id)))) ||
+                                    selectedItems.length === 0, kind: multiItemElement.kind, children: multiItemElement.label }, multiItemElement.id));
+                        }
+                        else if (toolbarElement.type === 'multiSelect') {
+                            const multiSelectElement = toolbarElement;
+                            const multiSelectItemsInFilter = currentFilters.current.get(multiSelectElement.id)?.selectedItems;
+                            const selectedItems = multiSelectElement.items?.filter((item) => {
+                                return multiSelectItemsInFilter?.some((id) => item.id === id);
+                            });
+                            toolbarComponents.push(_jsx(MultiSelect, { type: 'inline', size: 'lg', titleText: multiSelectElement?.label, useTitleInItem: true, hideLabel: true, label: multiSelectElement.label ?? '', id: multiSelectElement.id, items: multiSelectElement.items, selectedItems: selectedItems ?? [], onChange: ({ selectedItems }) => {
+                                    const value = selectedItems.map((item) => item.id);
+                                    currentFilters.current.set(multiSelectElement.id, {
+                                        id: multiSelectElement.id,
+                                        selectedItems: value,
+                                    });
+                                    updateFilteredData();
+                                    updateFilterURLState(multiSelectElement.queryName ?? multiSelectElement.id, value);
+                                } }, multiSelectElement.id));
+                        }
+                        else if (toolbarElement.type === 'search') {
+                            const searchElement = toolbarElement;
+                            const filterId = searchElement.id ?? searchElement.queryName;
+                            const defaultValue = currentFilters.current.get(filterId);
+                            searchComponent = (_jsx(TableToolbarSearch, { placeholder: searchElement.label, persistent: true, onFocus: (event, handleExpand) => {
+                                    handleExpand(event, true);
+                                    if (searchElement.queryName) {
+                                        updateFilterURLState(searchElement?.queryName, '');
+                                    }
+                                }, defaultValue: defaultValue?.searchTerm ?? '', onBlur: (event, handleExpand) => {
+                                    if (!event.target.value) {
+                                        handleExpand(event, false);
+                                    }
+                                    updateFilterURLState(searchElement.queryName ?? searchElement.id, event.target.value);
+                                }, onChange: (event) => {
+                                    currentFilters.current.set(filterId, {
+                                        searchTerm: event.target?.value ?? defaultValue?.searchTerm,
+                                    });
+                                    updateFilteredData();
+                                } }, searchElement.id));
+                        }
+                        else if (toolbarElement.type === 'button') {
+                            const buttonElement = toolbarElement;
+                            toolbarComponents.push(_jsx(Button, { id: buttonElement.id, onClick: async () => {
+                                    if (buttonElement.onClick) {
+                                        await buttonElement.onClick();
+                                    }
+                                }, renderIcon: buttonElement.icon, disabled: buttonElement.disabled, kind: buttonElement.kind, children: buttonElement.label }, buttonElement.id));
+                        }
+                        else if (toolbarElement.type === 'menuButton') {
+                            const menuButtonElement = toolbarElement;
+                            toolbarComponents.push(_jsx(MenuButton, { label: menuButtonElement.label ?? '', disabled: menuButtonElement.disabled, kind: menuButtonElement.kind, menuAlignment: 'bottom', children: menuButtonElement.items.map((item, itemIndex) => (_jsx(MenuItem, { label: item.label, onClick: item.onClick, disabled: item.disabled }, `${menuButtonElement.id}-item-${itemIndex}`))) }, menuButtonElement.id));
+                        }
+                    }
+                }
+                if (toolbarComponents.length > 0 || !!searchComponent) {
+                    toolbarComponent = (_jsx(TableToolbar, { "aria-label": 'data table toolbar', children: _jsxs(ToolbarWrapper, { style: {
+                                justifyContent: toolbarComponents.length > 5 ? 'normal' : 'end',
+                                flexWrap: toolbarComponents.length > 5 ? 'wrap' : undefined,
+                                blockSize: toolbarComponents.length > 5 ? 'auto' : '3rem',
+                            }, children: [searchComponent && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'end',
+                                        width: toolbarComponents.length > 5 ? '420px' : '100%',
+                                    }, children: searchComponent })), toolbarComponents] }) }, `toolbarcomponent-${id}-${index}`));
+                }
+                toolbarRows.push(toolbarComponent);
+            });
+        }
+        // ==== ACTIONS ====
+        const hasActions = actions !== undefined && actions.length > 0;
+        const renderActions = (row) => {
+            let actionCell = null;
+            if (actions && actions.length > 0) {
+                actionCell = [];
+                if (actions.filter((action) => action.visible === undefined || action.visible(row)).length < tableOptions.actionsUseOverflowMenuMinItems) {
+                    for (const action of actions.filter((action) => action.visible === undefined || action.visible(row))) {
+                        if (action.icon) {
+                            actionCell.push(_jsx(Button, { "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
+                                    ? action.disabled(row)
+                                    : undefined, iconDescription: typeof action.label === 'function'
+                                    ? action.label(row)
+                                    : action.label, hasIconOnly: true, renderIcon: typeof action.icon === 'function'
+                                    ? action.icon(row)
+                                    : action.icon, onClick: (event) => action.onClick(row, event) }, action.id));
+                        }
+                        else {
+                            actionCell.push(_jsx(Button, { "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
+                                    ? action.disabled(row)
+                                    : undefined, "aria-label": typeof action.label === 'function'
+                                    ? action.label(row)
+                                    : action.label, onClick: (event) => action.onClick(row, event), children: typeof action.label === 'function'
+                                    ? action.label(row)
+                                    : action.label }, action.id));
+                        }
+                    }
+                }
+                else {
+                    const overflowMenuItems = [];
+                    for (const action of actions.filter((action) => action.visible === undefined || action.visible(row))) {
+                        overflowMenuItems.push(_jsx(OverflowMenuItem, { itemText: typeof action.label === 'function'
+                                ? action.label(row)
+                                : action.label, isDelete: action.kind === 'danger', disabled: action.disabled !== undefined
+                                ? action.disabled(row)
+                                : undefined, onClick: (event) => action.onClick(row, event), hasDivider: action.hasDivider }, action.id));
+                    }
+                    actionCell.push(_jsx(OverflowMenu, { flipped: true, children: overflowMenuItems }, 'overflow-menu'));
+                }
+            }
+            return actionCell;
+        };
+        // ==== CONTENT ====
+        const hasExpansion = getDataForCurrentPage().find((row) => row.expansion) !== undefined;
+        const renderHeaders = () => {
+            let regularHeaders = headers.map((header) => (_jsx(TableHeader, { isSortable: header.sorting !== undefined, sortDirection: currentSortDirection(header.key), isSortHeader: header.sorting !== undefined, onClick: () => updateSortDirection(header.key), children: header.label }, header.key)));
+            if (allToolbarItems?.find((toolbarItem) => toolbarItem.type === 'multiItemButton')) {
+                regularHeaders = [
+                    _jsx(TableSelectAll, { checked: selectedItems.length >= currentPageSize, indeterminate: selectedItems.length > 0 && selectedItems.length < currentPageSize, onSelect: () => toggleSelectAllOnPage(), id: 'allcluster-select-all', name: 'multi-select-all-header' }, 'allcluster-select-all'),
+                    ...regularHeaders,
+                ];
+            }
+            return (_jsxs(_Fragment, { children: [hasExpansion && (_jsx(TableExpandHeader, { children: _jsx("span", { style: { height: '0px', width: '0px', fontSize: '0px' }, children: "expand" }) })), regularHeaders, hasActions && (_jsx(TableHeader, { style: { textAlign: 'right' }, children: _jsx("span", { style: { height: '0px', width: '0px', fontSize: '0px' }, children: "actions" }) }))] }));
+        };
+        const someSelectRow = allToolbarItems?.some((toolBarItem) => toolBarItem.type === 'multiItemButton');
+        const renderRow = (row) => {
+            const rowCell = (key) => {
+                const defaultContent = row[key];
+                let content = row[key];
+                const foundHeader = headers.find((header) => header.key === key);
+                if (foundHeader?.type) {
+                    switch (foundHeader.type.type) {
+                        case 'code':
+                            content = (_jsx(CodeSnippet, { type: foundHeader.type.options?.codeOptions?.type ??
+                                    'inline', children: defaultContent }));
+                            break;
+                        case 'link':
+                            content = (_jsx(Link, { href: foundHeader.type.options.linkOptions.href(row), target: foundHeader.type.options.linkOptions?.target ?? '_self', children: defaultContent }));
+                            break;
+                        case 'link-button':
+                            if (foundHeader.type.options.linkButtonOptions.disabled &&
+                                foundHeader.type.options.linkButtonOptions.disabled(row)) {
+                                content = _jsx("strong", { children: defaultContent });
+                            }
+                            else {
+                                content = (_jsx(LinkButton, { label: defaultContent, onClick: () => foundHeader.type.options.linkButtonOptions.onClick(row) }));
+                            }
+                            break;
+                        case 'wrapper':
+                            content = foundHeader.type.options.wrapperOptions.wrapper(row);
+                            break;
+                    }
+                }
+                return (_jsx(TableCell, { onClick: row.onClick ? () => row.onClick() : undefined, style: { cursor: row.onClick ? 'pointer' : undefined }, children: content }, `${row.id}-${key}`));
+            };
+            let rowComponent = (_jsxs(TableRow, { children: [hasExpansion && someSelectRow && (_jsx(TableCell, { className: 'cds--table-expand' })), allToolbarItems?.find((toolBarItem) => toolBarItem.type === 'multiItemButton') && (_jsx(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
+                            toggleSelectedItem(row.id);
+                        } })), hasExpansion && !row.expansion && !someSelectRow && _jsx(TableCell, {}), headerKeys.map((key) => {
+                        return rowCell(key);
+                    }), hasActions && (_jsx(TableCell, { children: _jsx("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                            }, children: renderActions(row) }) }))] }, `${row.id}-${row.originalIndex}`));
+            if (row.expansion) {
+                rowComponent = (_jsxs(React.Fragment, { children: [_jsxs(TableExpandRow, { isExpanded: isRowExpanded(row), "aria-label": `row ${row.id}`, onExpand: () => {
+                                updateRowExpansion(row);
+                            }, children: [someSelectRow && (_jsx(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
+                                        toggleSelectedItem(row.id);
+                                    } })), headerKeys.map((key) => rowCell(key)), hasActions && (_jsx(TableCell, { children: _jsx("div", { style: {
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                            alignItems: 'center',
+                                        }, children: renderActions(row) }) }))] }, row.id), _jsx(TableExpandedRow, { colSpan: headers.length + (hasActions ? 2 : 1), children: row.expansion })] }, row.id));
+            }
+            return rowComponent;
+        };
+        // ==== PAGINATION ====
+        let paginationComponent = null;
+        if (tableOptions.showPagination) {
+            paginationComponent = (_jsx(Pagination, { page: currentPage, totalItems: filteredData.length, pageSize: currentPageSize, pageSizes: tableOptions.pageSizes, onChange: (event) => {
+                    const { page, pageSize } = event;
+                    setCurrentPage(page);
+                    setCurrentPageSize(pageSize);
+                    selectItem([]);
+                } }));
+        }
+        // ==== RENDER ====
+        component = (_jsxs(TableContainer, { title: title, description: description, children: [toolbarRows.map((toolbarComponent) => toolbarComponent), _jsxs(Table, { size: tableOptions.tableSize, useZebraStyles: tableOptions.useZebraStyles, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: renderHeaders() }, `tablerow-${id}`) }, `tablehead-${id}`), _jsx(TableBody, { children: getDataForCurrentPage().map((row) => renderRow(row)) }, `tablebody-${id}`)] }, `table-${id}`), paginationComponent] }, `tablecontainer-${id}`));
+    }
+    return component;
+};

package/lib/esm/src/components/c3-data-table/c3-data-table.types.d.ts

@@ -0,0 +1,122 @@
+import type React from 'react';
+export interface RowBaseProps {
+    id: string;
+    originalIndex: number;
+    expansion?: React.ReactNode;
+    onClick?: () => void;
+}
+export interface Filter<T extends RowBaseProps> {
+    selectedItems?: string[];
+    selectedItem?: string;
+    row: T;
+    searchTerm?: string;
+}
+interface Item {
+    id: string;
+    label: string;
+}
+export type C3DataTableToolbarProps<T extends RowBaseProps> = C3DataTableToolbarSearchItemProps<T> | C3DataTableToolbarButtonItemProps | C3DataTableToolbarMultiSelectItemProps<T> | C3DataTableToolbarMultiItemButtonProps<T> | C3DataTableToolbarSingleSelectItemProps<T> | C3DataTableToolbarMenuButtonItemProps;
+export interface C3DataTableCommonToolbarProps {
+    id: string;
+    label?: string;
+    icon?: any;
+}
+export interface C3DataTableFilterableToolbarProps<T extends RowBaseProps> {
+    filter?: (currentFilter: Filter<T>) => boolean;
+}
+export interface C3DataTableToolbarSearchItemProps<T extends RowBaseProps> extends C3DataTableCommonToolbarProps, C3DataTableFilterableToolbarProps<T> {
+    type: 'search';
+    queryName?: string;
+}
+export interface C3DataTableToolbarButtonItemProps//<T extends RowBaseProps>
+ extends C3DataTableCommonToolbarProps {
+    type: 'button';
+    onClick: () => void;
+    disabled?: boolean;
+    kind?: any;
+}
+export interface C3DataTableToolbarMultiSelectItemProps<T extends RowBaseProps> extends C3DataTableCommonToolbarProps, C3DataTableFilterableToolbarProps<T> {
+    type: 'multiSelect';
+    items?: Item[];
+    kind?: any;
+    queryName?: string;
+}
+export interface C3DataTableToolbarSingleSelectItemProps<T extends RowBaseProps> extends C3DataTableCommonToolbarProps, C3DataTableFilterableToolbarProps<T> {
+    type: 'singleSelect';
+    items?: Item[];
+    disabled?: boolean;
+    kind?: any;
+    defaultValue?: any;
+    queryName?: string;
+}
+export interface C3DataTableToolbarMultiItemButtonProps<T extends RowBaseProps> extends C3DataTableCommonToolbarProps {
+    type: 'multiItemButton';
+    multiOnClick: (selectedItems: T[]) => void;
+    disabled?: (selectedItems: T[]) => boolean;
+    kind?: any;
+}
+export interface C3DataTableToolbarMenuButtonItemProps extends C3DataTableCommonToolbarProps {
+    type: 'menuButton';
+    disabled?: boolean;
+    items: Array<{
+        onClick: () => void;
+        label: string;
+        disabled?: boolean;
+    }>;
+    kind?: any;
+}
+export interface C3DataTableActionProps<T extends RowBaseProps> {
+    id: string;
+    kind: any;
+    label: ((row: T) => string) | string;
+    icon?: ((row: T) => any) | any;
+    disabled?: (row: T) => boolean;
+    visible?: (row: T) => boolean;
+    hasDivider?: boolean;
+    onClick: (row: T, event?: any) => void;
+}
+export interface C3DataTableHeaderContentType<T extends RowBaseProps> {
+    type: 'text' | 'code' | 'link-button' | 'link' | 'wrapper';
+    options?: {
+        codeOptions?: {
+            type: 'inline' | 'multi' | 'single';
+        };
+        linkOptions?: {
+            href: (row: T) => string;
+            target?: string;
+        };
+        linkButtonOptions?: {
+            onClick: (row: T) => void;
+            disabled?: (row: T) => boolean;
+        };
+        wrapperOptions?: {
+            wrapper: (row: T) => React.ReactNode;
+        };
+    };
+}
+export interface C3DataTableHeadersProps<T extends RowBaseProps> {
+    key: string;
+    label: string;
+    sorting?: (a: T, b: T) => number;
+    type?: C3DataTableHeaderContentType<T>;
+}
+export interface C3DataTableProps<T extends RowBaseProps> {
+    id?: string;
+    title?: string;
+    description?: any;
+    headers: C3DataTableHeadersProps<T>[];
+    actions?: C3DataTableActionProps<T>[];
+    options?: {
+        pageSize?: number;
+        pageSizes?: number[];
+        tableSize?: 'sm' | 'md' | 'lg';
+        useZebraStyles?: boolean;
+        actionsUseOverflowMenuMinItems?: number;
+    };
+    data: Array<T>;
+    toolbar?: C3DataTableToolbarProps<T>[];
+    toolbars?: C3DataTableToolbarProps<T>[][];
+    isLoading?: boolean;
+    queryPrefix?: string;
+}
+export {};

package/lib/esm/src/components/c3-data-table/c3-data-table.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/src/components/c3-data-table/link-button/link-button.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { LinkButtonProps } from './link-button.types';
+export declare const LinkButton: ({ label, onClick, style, inline, icon, disabled, }: LinkButtonProps) => JSX.Element;

package/lib/esm/src/components/c3-data-table/link-button/link-button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Link } from '@carbon/react';
+export const LinkButton = ({ label, onClick, style, inline, icon, disabled, }) => {
+    if (disabled === undefined) {
+        disabled = false;
+    }
+    const customStyle = style ? style : {};
+    const component = (_jsxs(Link, { onClick: () => !disabled && onClick(), inline: inline, style: { cursor: 'pointer', ...customStyle }, disabled: disabled, children: [label, icon && (_jsx("span", { style: { marginLeft: '0.5rem', marginBottom: '-0.2rem' }, children: icon }))] }));
+    return component;
+};

package/lib/esm/src/components/c3-data-table/link-button/link-button.types.d.ts

@@ -0,0 +1,8 @@
+export interface LinkButtonProps {
+    onClick: () => void;
+    label: string;
+    style?: React.CSSProperties;
+    inline?: boolean;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}