@camunda/camunda-composite-components 0.22.2 → 0.22.3

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

@@ -1,509 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,6 +0,0 @@
-/*
- * 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

@@ -1,3 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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