@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/table/TableSettingsDialog.d.ts

@@ -0,0 +1,158 @@
+import React from 'react';
+import type { TableColumnDetailsMap, TableColumnDetails } from './TableSettingsDialog.types';
+type TableSettingsDialogProps = {
+    /**
+     * Defined whether to show the dialog or not.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * The title for the dialog header.
+     */
+    title: React.ReactNode;
+    /**
+     * The subtitle for the dialog header.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * List of column names in default order. This will be used for resetting changes.
+     *
+     * @default []
+     */
+    defaultColumnOrder: string[];
+    /**
+     * List of hidden columns that are hidden by default. This will be used for resetting changes.
+     *
+     * @default []
+     */
+    defaultHiddenColumns?: string[];
+    /**
+     * List of column names in current order. The "columnOrder" will be returned when the order changes.
+     *
+     * @default []
+     */
+    columnOrder: string[];
+    /**
+     * List of column names which are currently hidden. The "hiddenColumns
+     * will be returned when the order changes.
+     *
+     * @default []
+     */
+    hiddenColumns?: string[];
+    /**
+     * List of column labels which will be shown in the table header. These labels are usually
+     * translated labels that can be set as FormattedMessage components for instance.
+     *
+     * The object key is the column name and the object value is the translated message.
+     *
+     * @default {}
+     * @example
+     * { name: <FormattedMessage id='name' /> }
+     */
+    columnLabels: any;
+    /**
+     * Hide a sorted column will result in an error, so disable at least one important fallback column
+     * or the sorted column (fallback column recommended)
+     */
+    disabledColumns: string[];
+    /**
+     * Optional object of detail properties to be shown in the details section of the respective
+     * column item. If the prop is not given, the width sections won't be rendered.
+     * The keys of this object are the column names / keys you use to identify a column.
+     */
+    columnsDetails?: TableColumnDetailsMap;
+    autoLabel?: string | React.ReactNode;
+    /**
+     * Text for the "apply" button. This button will not be shown when
+     * `immediateChange` is enabled.
+     */
+    applyButtonText?: string | React.ReactNode;
+    /**
+     * Text for the "cancel" button. This button will not be shown when
+     * `immediateChange` is enabled.
+     */
+    cancelButtonText?: string | React.ReactNode;
+    /**
+     * Text for the "close" button. This button will only be shown when
+     * `immediateChange` is enabled.
+     */
+    closeButtonText?: string | React.ReactNode;
+    /**
+     * Text for the "reset to default" button.
+     */
+    resetButtonText: string | React.ReactNode;
+    /**
+     * Callback function for when the column order or visibility changes.
+     *
+     * @param columnOrder
+     * @param hiddenColumns
+     * @param columnsDetails
+     * @returns
+     */
+    onColumnChange?: (columnOrder: string[], hiddenColumns: string[], columnsDetails?: TableColumnDetailsMap) => void;
+    /**
+     * Callback function for when a single column details like width changes.
+     *
+     * @param column
+     * @param columnsDetails
+     * @returns
+     */
+    onColumnDetailsChange?: (column: string, columnsDetails: TableColumnDetails) => void;
+    /**
+     * Callback function for when the changes are discarded and the dialog should close.
+     * Will not be triggered when `immediateChange` is enabled.
+     *
+     * @returns
+     */
+    onDiscard?: () => void;
+    /**
+     * Callback function for when the final changes should be applied and the dialog should close.
+     * Will not be triggered when `immediateChange `is enabled.
+     *
+     * @param columnOrder
+     * @param hiddenColumns
+     * @param columnsDetails
+     * @returns
+     */
+    onApply?: (columnOrder: string[], hiddenColumns: string[], columnsDetails: TableColumnDetailsMap) => void;
+    /**
+     * Callback function for when dialog should close.
+     *
+     * @returns
+     */
+    onHide: () => void;
+    /**
+     * Search value which should be set for the search field when the dialog opens.
+     */
+    columnSearchValue?: string;
+    /**
+     * Callback function for when the search value changes.
+     *
+     * @param value
+     * @returns
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Placeholder text for the search input.
+     */
+    searchPlaceholder: React.ReactNode;
+    /**
+     * Message that should be shown when column search result is empty.
+     */
+    notFoundMessage?: string;
+    /**
+     * Defines whether or not all changes apply immediately. If so, no cancel and apply buttons are shown.
+     * Enable this if you want to update the table after each change. Be aware of having side effects when
+     * toggling columns where data need to be fetched from the backend.
+     *
+     * @default false
+     */
+    immediateChange?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableSettingsDialog: (props: TableSettingsDialogProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableSettingsDialog;

package/src/components/table/TableSettingsDialog.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import isEqual from 'lodash/fp/isEqual';
+import isEmpty from 'lodash/fp/isEmpty';
+import mapValues from 'lodash/fp/mapValues';
+import some from 'lodash/fp/some';
+import noop from 'lodash/fp/noop';
+import { arrayMove } from '@dnd-kit/sortable';
+import Dialog from '../dialog/Dialog';
+import ClearableInput from '../clearableInput/ClearableInput';
+import { TableSettingsDialogFooter } from './TableSettingsDialogFooter';
+import { TableSettingsListContainer } from './TableSettingsListContainer';
+import { filterColumns } from './TableSettingsListItem';
+const DEFAULT_COLUMN_WIDTH = 0;
+const MAX_COLUMN_WIDTH = 1000;
+const TableSettingsDialog = (props) => {
+    const { show = false, title, subtitle, className, defaultColumnOrder = [], defaultHiddenColumns = [], columnOrder: extColumnOrder = [], hiddenColumns: extHiddenColumns = [], columnLabels = {}, disabledColumns = [], columnsDetails: extColumnsDetails = {}, autoLabel = '', applyButtonText, cancelButtonText, closeButtonText, resetButtonText, onColumnChange = noop, onColumnDetailsChange = noop, onDiscard = noop, 
+    // onCancel = noop,
+    onApply = noop, onHide, columnSearchValue: extColumnSearchValue = '', onSearchChange = noop, searchPlaceholder, notFoundMessage = '', immediateChange = false, } = props;
+    const [columnSearchValue, setColumnSearchValue] = useState(extColumnSearchValue);
+    const [columnOrder, setColumnOrder] = useState(extColumnOrder);
+    const [hiddenColumns, setHiddenColumns] = useState(extHiddenColumns || defaultHiddenColumns);
+    const [columnsDetails, setColumnsDetails] = useState(extColumnsDetails);
+    const [openColumnsDetails, setOpenColumnsDetails] = useState({});
+    const [columnLabelStrings, setColumnLabelStrings] = useState({});
+    const [updateColumnLabelStrings, setUpdateColumnLabelStrings] = useState(true);
+    // Dirty flag for offering to reset changes or to discard them
+    const [hasChanged, setHasChanged] = useState(false);
+    const [isResetAll, setIsResetAll] = useState(false);
+    const [movedColumn, setMovedColumn] = useState(false);
+    const contentRef = useRef(null);
+    // Update items from outside
+    useEffect(() => {
+        setColumnSearchValue(extColumnSearchValue);
+        setColumnOrder(extColumnOrder);
+        setHiddenColumns(extHiddenColumns);
+        if (show) {
+            getColumnLabelStringsFromDOM();
+        }
+    }, [extColumnSearchValue, extColumnOrder, extHiddenColumns, show]);
+    const hasColumnsDetailsChanged = (columnsDetailsToCheck) => {
+        if (isEmpty(columnsDetailsToCheck)) {
+            return false;
+        }
+        const hasObjectChanged = some((details) => {
+            const defaultWidth = Number.isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
+            return details.width !== defaultWidth;
+        })(columnsDetailsToCheck);
+        return hasObjectChanged;
+    };
+    // Update column details from outside if provided. Note, that in "sort columns only" mode
+    // the columns details are undefined and no column widths can be set
+    const [previousColumnDetails, setPreviousColumnDetails] = useState(extColumnsDetails);
+    if (!isEqual(columnsDetails, previousColumnDetails)) {
+        const columnsDetailsChanged = hasColumnsDetailsChanged(extColumnsDetails);
+        setColumnsDetails(columnsDetailsChanged ? extColumnsDetails : columnsDetails);
+        setPreviousColumnDetails(extColumnsDetails);
+    }
+    const getColumnLabelStringsFromDOM = () => {
+        if (!contentRef.current) {
+            return;
+        }
+        // For searching by name we need to get the label from the DOM as it may contain a FormattedMessage
+        const labels = contentRef.current.getElementsByClassName('table-settings-item-label');
+        const columnStrings = {};
+        [...labels].map(label => {
+            const dataKey = label.getAttribute('data-key');
+            if (dataKey) {
+                const updatedLabel = label.textContent?.replace(/\r?\n|\r/g, '').toLowerCase();
+                if (updatedLabel) {
+                    columnStrings[dataKey] = updatedLabel;
+                }
+            }
+        });
+        setColumnLabelStrings(columnStrings);
+        setUpdateColumnLabelStrings(false);
+    };
+    const deleteMovedColumn = () => {
+        setMovedColumn(false);
+    };
+    const moveColumnToIndex = (columnName, newIndex, changeMovedColumn) => {
+        const newColumnOrder = columnOrder.filter(name => name !== columnName);
+        newColumnOrder.splice(newIndex, 0, columnName);
+        setColumnOrder(newColumnOrder);
+        setMovedColumn(changeMovedColumn ? !!columnName : false);
+        setHasChanged(true);
+        if (immediateChange) {
+            onColumnChange(newColumnOrder, hiddenColumns);
+        }
+        window.setTimeout(deleteMovedColumn, 500);
+    };
+    const handleResetColumnChanges = () => setIsResetAll(true);
+    const handleCancelResetColumnChanges = () => setIsResetAll(false);
+    const resetColumnsDetails = (details) => {
+        return mapValues((singleColumnDetails) => {
+            return {
+                ...singleColumnDetails,
+                width: singleColumnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH,
+            };
+        })(details);
+    };
+    const resetAllColumnChanges = () => {
+        const defaultColumnsDetails = resetColumnsDetails(columnsDetails);
+        setColumnOrder(defaultColumnOrder);
+        setHiddenColumns(defaultHiddenColumns);
+        setColumnSearchValue('');
+        setHasChanged(false);
+        setIsResetAll(false);
+        if (!isEmpty(columnsDetails)) {
+            setColumnsDetails(defaultColumnsDetails);
+        }
+        if (immediateChange) {
+            onSearchChange('');
+            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
+        }
+    };
+    const discardColumnChanges = () => {
+        onSearchChange('');
+        // onCancel();
+        onDiscard();
+        onHide();
+    };
+    const handleManuallyApplyChanges = () => {
+        setColumnSearchValue('');
+        onSearchChange('');
+        onColumnChange(columnOrder, hiddenColumns, columnsDetails);
+        onApply(columnOrder, hiddenColumns, columnsDetails);
+        onHide();
+    };
+    const toggleHideColumn = (column) => {
+        const isHidden = hiddenColumns.includes(column);
+        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];
+        setHiddenColumns(newHiddenColumns);
+        setHasChanged(true);
+        if (immediateChange) {
+            onColumnChange(columnOrder, newHiddenColumns);
+        }
+    };
+    const handleSearchChange = (searchValue) => {
+        const newSearch = searchValue.toLowerCase();
+        setColumnSearchValue(() => {
+            onSearchChange(newSearch);
+            return newSearch;
+        });
+    };
+    const handleColumnWidthChange = (column, value) => {
+        if (columnsDetails[column]) {
+            columnsDetails[column].width = value;
+        }
+        else {
+            columnsDetails[column] = {
+                width: value,
+                defaultWidth: 0,
+                maxWidth: MAX_COLUMN_WIDTH,
+            };
+        }
+        setColumnsDetails(columnsDetails);
+        setHasChanged(true);
+        if (immediateChange) {
+            onColumnDetailsChange(column, columnsDetails[column]);
+        }
+    };
+    const handleResetColumnWidth = (column) => {
+        const updatedColumnDetails = columnsDetails[column];
+        updatedColumnDetails.width = updatedColumnDetails.defaultWidth;
+        setColumnsDetails(columnsDetails);
+        if (immediateChange) {
+            onColumnDetailsChange(column, columnsDetails[column]);
+        }
+    };
+    const handleOpenColumnsDetails = (columnName) => {
+        const updatedOpenColumnDetails = { ...openColumnsDetails };
+        if (updatedOpenColumnDetails[columnName]) {
+            delete updatedOpenColumnDetails[columnName];
+        }
+        else {
+            updatedOpenColumnDetails[columnName] = columnName;
+        }
+        setOpenColumnsDetails(updatedOpenColumnDetails);
+    };
+    const handleSortEnd = (event, previousOrder) => {
+        const { active, over } = event;
+        const activeId = active.id;
+        const overId = over?.id;
+        if (activeId === overId) {
+            return;
+        }
+        const oldIndex = previousOrder.indexOf(String(activeId));
+        const newIndex = previousOrder.indexOf(String(overId));
+        const newColumnOrder = arrayMove(previousOrder, oldIndex, newIndex);
+        setColumnOrder(newColumnOrder);
+        setMovedColumn(true);
+        setHasChanged(true);
+        if (immediateChange) {
+            onColumnChange(newColumnOrder, hiddenColumns);
+        }
+    };
+    const renderTableSettingsDialogContent = () => {
+        const itemProps = {
+            columnLabels,
+            autoLabel,
+            disabledColumns,
+            columnOrder,
+            hiddenColumns,
+            columnSearchValue,
+            columnsDetails,
+            columnLabelStrings,
+            openColumnsDetails,
+            updateColumnLabelStrings,
+            onMoveColumn: moveColumnToIndex,
+            onOpenDetails: handleOpenColumnsDetails,
+            onColumnWidthChange: handleColumnWidthChange,
+            onResetColumnWidth: handleResetColumnWidth,
+            onToggleHideColumn: toggleHideColumn,
+        };
+        const filteredColumns = columnOrder.filter(column => filterColumns(columnSearchValue, column, columnLabelStrings));
+        const hasItems = !isEqual(filteredColumns, columnOrder);
+        return (_jsxs("div", { ref: contentRef, children: [_jsx("div", { className: 'table-settings-search', children: _jsxs("div", { className: 'input-group width-100pct', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search' }) }), _jsx(ClearableInput, { value: columnSearchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })] }) }), _jsx("div", { className: 'table-settings-body', children: hasItems ? (_jsx(TableSettingsListContainer, { items: columnOrder, onSortEnd: handleSortEnd, itemProps: { ...itemProps } })) : (_jsx("div", { className: 'text-center text-color-gray', children: notFoundMessage })) })] }));
+    };
+    const renderTableSettingsDialogFooter = () => {
+        return (_jsx(TableSettingsDialogFooter, { hasChanged: hasChanged, isResetAll: isResetAll, immediateChange: immediateChange, resetButtonText: resetButtonText, closeButtonText: closeButtonText, cancelButtonText: cancelButtonText, applyButtonText: applyButtonText, onHide: onHide, onResetColumnChanges: handleResetColumnChanges, onDiscardChanges: discardColumnChanges, onApplyChanges: handleManuallyApplyChanges, onConfirmResetColumnChanges: resetAllColumnChanges, onCancelResetColumnChanges: handleCancelResetColumnChanges }));
+    };
+    if (!show) {
+        return null;
+    }
+    const dialogClassNames = classNames('TableSettingsDialog', className);
+    return (_jsx(Dialog, { show: show, title: title, subtitle: subtitle, onClose: onHide, body: renderTableSettingsDialogContent(), footer: renderTableSettingsDialogFooter(), className: dialogClassNames }));
+};
+export default TableSettingsDialog;

package/src/components/table/TableSettingsDialog.types.d.ts

@@ -0,0 +1,39 @@
+export type TableColumnDetails = {
+    /**
+     * Defined the current width of a column.
+     *
+     * @default 0
+     */
+    width?: number;
+    /**
+     * Defined the default width of a column which will be used when resetting to default.
+     *
+     * @default 0
+     */
+    defaultWidth?: number;
+    /**
+     * Defined the maximum width of a column.
+     *
+     * @default 1000
+     */
+    maxWidth?: number;
+};
+export type TableColumnDetailsMap = Record<string, TableColumnDetails>;
+export type ColumnLabelStrings = Record<string, string>;
+export type TableSettingsItemProps = {
+    columnLabels?: any;
+    autoLabel?: string | React.ReactNode;
+    disabledColumns?: string[];
+    columnOrder: string[];
+    hiddenColumns?: string[];
+    columnSearchValue: string;
+    columnsDetails: TableColumnDetailsMap;
+    columnLabelStrings?: ColumnLabelStrings;
+    openColumnsDetails?: Record<string, string>;
+    updateColumnLabelStrings?: boolean;
+    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;
+    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;
+    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;
+    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;
+    onToggleHideColumn?: (column: string) => void;
+};

package/src/components/table/TableSettingsDialog.types.js

@@ -0,0 +1 @@
+export {};

package/src/components/table/TableSettingsDialogFooter.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export type TableSettingsDialogFooterProps = {
+    hasChanged: boolean;
+    isResetAll: boolean;
+    immediateChange: boolean;
+    resetButtonText: string | ReactNode;
+    closeButtonText: string | ReactNode;
+    cancelButtonText: string | ReactNode;
+    applyButtonText: string | ReactNode;
+    onHide: () => void;
+    onResetColumnChanges: () => void;
+    onDiscardChanges: () => void;
+    onApplyChanges: () => void;
+    onConfirmResetColumnChanges: () => void;
+    onCancelResetColumnChanges: () => void;
+};
+export declare const TableSettingsDialogFooter: (props: TableSettingsDialogFooterProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/table/TableSettingsDialogFooter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Button from '../../Button';
+export const TableSettingsDialogFooter = (props) => {
+    const { hasChanged, isResetAll, immediateChange, resetButtonText, closeButtonText, cancelButtonText, applyButtonText, onHide, onResetColumnChanges, onDiscardChanges, onApplyChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, } = props;
+    const restButtonClassNames = classNames('btn', 'btn-link', !hasChanged && 'disabled');
+    return (_jsxs("div", { className: 'display-flex justify-content-between', children: [_jsxs("div", { children: [!isResetAll && (_jsxs("div", { className: restButtonClassNames, onClick: onResetColumnChanges, children: [_jsx("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] })), isResetAll && (_jsxs("div", { className: 'btn-group', children: [_jsx(Button, { iconOnly: true, iconName: 'rioglyph-remove', className: 'margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }), _jsx(Button, { iconOnly: true, bsStyle: Button.PRIMARY, iconName: 'rioglyph-ok', onClick: onConfirmResetColumnChanges })] }))] }), immediateChange ? (_jsx(Button, { onClick: onHide, children: closeButtonText })) : (_jsxs("div", { className: 'btn-toolbar', children: [_jsx(Button, { onClick: onDiscardChanges, children: cancelButtonText }), _jsx(Button, { bsStyle: Button.PRIMARY, onClick: onApplyChanges, children: applyButtonText })] }))] }));
+};

package/src/components/table/TableSettingsListContainer.d.ts

@@ -0,0 +1,8 @@
+import { type DragEndEvent } from '@dnd-kit/core';
+import type { TableSettingsItemProps } from './TableSettingsDialog.types';
+export type TableSettingsListContainerProps = {
+    items: string[];
+    itemProps: TableSettingsItemProps;
+    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;
+};
+export declare const TableSettingsListContainer: (props: TableSettingsListContainerProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/table/TableSettingsListContainer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import TableSettingsListItem from './TableSettingsListItem';
+export const TableSettingsListContainer = (props) => {
+    const { items, itemProps, onSortEnd } = props;
+    const [activeDraggedColumn, setActiveDraggedColumn] = useState(null);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const handleDragStart = useCallback((event) => {
+        setActiveDraggedColumn(event.active.id);
+    }, []);
+    const handleDragEnd = (event) => {
+        setActiveDraggedColumn(null);
+        onSortEnd(event, items);
+    };
+    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
+    return (_jsx("div", { className: 'table-settings-items-container', children: _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: verticalListSortingStrategy, children: items.map((column, index) => (_jsx(TableSettingsListItem, { column: column, orderIndex: index, isActive: activeDraggedColumn === column, className: activeDraggedColumn === column ? activeClass : '', ...itemProps }, column))) }) }) }));
+};

package/src/components/table/TableSettingsListItem.d.ts

@@ -0,0 +1,10 @@
+import type { TableSettingsItemProps } from './TableSettingsDialog.types';
+export declare const filterColumns: (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => boolean;
+export type TableSettingsListItemProps = TableSettingsItemProps & {
+    column: string;
+    orderIndex: number;
+    isActive: boolean;
+    className?: string;
+};
+declare const TableSettingsListItem: (props: TableSettingsListItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TableSettingsListItem;

package/src/components/table/TableSettingsListItem.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/noop';
+import Checkbox from '../checkbox/Checkbox';
+import Collapse from '../collapse/Collapse';
+import { TableSettingsColumnDetails } from './TableSettingsColumnDetails';
+import { TableSettingsColumnButtons } from './TableSettingsColumnButtons';
+const MAX_COLUMN_WIDTH = 1000;
+export const filterColumns = (searchValue, column, columnLabelStrings) => {
+    if (!searchValue) {
+        return false;
+    }
+    const label = columnLabelStrings[column] || '';
+    return !label.toLowerCase().includes(searchValue.toLowerCase());
+};
+const TableSettingsListItem = (props) => {
+    const { column, orderIndex, columnLabels, autoLabel, disabledColumns = [], columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, columnLabelStrings = {}, openColumnsDetails = {}, updateColumnLabelStrings, onColumnWidthChange, onResetColumnWidth, onMoveColumn, onOpenDetails, onToggleHideColumn = noop, isActive = false, className, } = props;
+    const isSortingDisabled = !isEmpty(columnSearchValue);
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({
+        id: column,
+        disabled: isSortingDisabled,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    // Filter out items which don't match the search value.
+    // Note that we need to render all items at least once at the beginning in order to get their DOM labels
+    // otherwise the search won't work when initial search value is provided via props.
+    const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
+    const itemClassNames = classNames('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
+    const columnDetails = columnsDetails[column];
+    return (_jsxs("div", { className: itemClassNames, ref: setNodeRef, style: style, children: [_jsxs("div", { className: 'table-settings-item-header user-select-none', ref: setActivatorNodeRef, children: [_jsx("div", { className: 'CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3', children: _jsx(Checkbox, { checked: !hiddenColumns.includes(column), onClick: event => {
+                                onToggleHideColumn(column);
+                                event.stopPropagation();
+                            }, disabled: disabledColumns.includes(column) }) }), _jsx("div", { className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column, ...attributes, ...listeners, children: columnLabels[column] }), columnDetails && (_jsx("div", { className: 'column-width-label', children: columnDetails.width ? `${columnDetails.width}px` : autoLabel })), _jsx(TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] }), columnDetails && !isActive && (_jsx(Collapse, { open: !!openColumnsDetails[column], children: _jsx("div", { children: _jsx(TableSettingsColumnDetails, { ...columnDetails, column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth }) }) }))] }, `table-settings-item-${column}`));
+};
+export default TableSettingsListItem;

package/src/components/table/TableToolbar.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+export type TableToolbarProps = {
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableToolbar: ({ className, children }: PropsWithChildren<TableToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableToolbar;

package/src/components/table/TableToolbar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const TableToolbar = ({ className, children }) => (_jsx("div", { className: classNames('table-toolbar', className), children: children }));
+export default TableToolbar;

package/src/components/table/TableViewToggles.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+export type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';
+export type TableViewTogglesProps = {
+    /**
+     * The current viewType for controlling the TablesViewToggles component.
+     */
+    viewType?: TableViewTogglesViewType;
+    /**
+     * Defines the initial viewType (when viewType is not controlled from the outside).
+     *
+     * @default TableViewToggles.VIEW_TYPE_TABLE
+     */
+    initialViewType?: TableViewTogglesViewType;
+    /**
+     * Defines the view types which shall not be supported and are omitted.
+     *
+     * @default []
+     */
+    disabledViewTypes?: TableViewTogglesViewType[];
+    /**
+     * Callback function for when the user wants to change the viewType.
+     *
+     * @param viewType The new viewType selected by the user.
+     */
+    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;
+    /**
+     * Optional tooltip content for table view button.
+     */
+    tableViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional tooltip content for single card view button.
+     */
+    singleCardViewTooltipContent?: string | ReactNode;
+    /**
+     * Optional tooltip content for multi card view button.
+     */
+    multiCardsViewTooltipContent?: string | ReactNode;
+    /**
+     * Disables all buttons.
+     *
+     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the
+     * corresponding table is empty.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableViewToggles: {
+    (props: TableViewTogglesProps): import("react/jsx-runtime").JSX.Element;
+    VIEW_TYPE_TABLE: TableViewTogglesViewType;
+    VIEW_TYPE_SINGLE_CARD: TableViewTogglesViewType;
+    VIEW_TYPE_MULTI_CARDS: TableViewTogglesViewType;
+};
+export default TableViewToggles;