@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/lib/es/src/components/table/TableSettingsDialog.js

@@ -1,234 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const mapValues_1 = tslib_1.__importDefault(require("lodash/fp/mapValues"));
-const some_1 = tslib_1.__importDefault(require("lodash/fp/some"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const sortable_1 = require("@dnd-kit/sortable");
-const Dialog_1 = tslib_1.__importDefault(require("../dialog/Dialog"));
-const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
-const TableSettingsDialogFooter_1 = require("./TableSettingsDialogFooter");
-const TableSettingsListContainer_1 = require("./TableSettingsListContainer");
-const TableSettingsListItem_1 = require("./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_1.default, onColumnDetailsChange = noop_1.default, onDiscard = noop_1.default, 
-    // onCancel = noop,
-    onApply = noop_1.default, onHide, columnSearchValue: extColumnSearchValue = '', onSearchChange = noop_1.default, searchPlaceholder, notFoundMessage = '', immediateChange = false, } = props;
-    const [columnSearchValue, setColumnSearchValue] = (0, react_1.useState)(extColumnSearchValue);
-    const [columnOrder, setColumnOrder] = (0, react_1.useState)(extColumnOrder);
-    const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)(extHiddenColumns || defaultHiddenColumns);
-    const [columnsDetails, setColumnsDetails] = (0, react_1.useState)(extColumnsDetails);
-    const [openColumnsDetails, setOpenColumnsDetails] = (0, react_1.useState)({});
-    const [columnLabelStrings, setColumnLabelStrings] = (0, react_1.useState)({});
-    const [updateColumnLabelStrings, setUpdateColumnLabelStrings] = (0, react_1.useState)(true);
-    // Dirty flag for offering to reset changes or to discard them
-    const [hasChanged, setHasChanged] = (0, react_1.useState)(false);
-    const [isResetAll, setIsResetAll] = (0, react_1.useState)(false);
-    const [movedColumn, setMovedColumn] = (0, react_1.useState)(false);
-    const contentRef = (0, react_1.useRef)(null);
-    // Update items from outside
-    (0, react_1.useEffect)(() => {
-        setColumnSearchValue(extColumnSearchValue);
-        setColumnOrder(extColumnOrder);
-        setHiddenColumns(extHiddenColumns);
-        if (show) {
-            getColumnLabelStringsFromDOM();
-        }
-    }, [extColumnSearchValue, extColumnOrder, extHiddenColumns, show]);
-    const hasColumnsDetailsChanged = (columnsDetailsToCheck) => {
-        if ((0, isEmpty_1.default)(columnsDetailsToCheck)) {
-            return false;
-        }
-        const hasObjectChanged = (0, some_1.default)((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] = (0, react_1.useState)(extColumnsDetails);
-    if (!(0, isEqual_1.default)(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 (0, mapValues_1.default)((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 (!(0, isEmpty_1.default)(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 = (0, sortable_1.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 => (0, TableSettingsListItem_1.filterColumns)(columnSearchValue, column, columnLabelStrings));
-        const hasItems = !(0, isEqual_1.default)(filteredColumns, columnOrder);
-        return ((0, jsx_runtime_1.jsxs)("div", { ref: contentRef, children: [(0, jsx_runtime_1.jsx)("div", { className: 'table-settings-search', children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [(0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search' }) }), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: columnSearchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })] }) }), (0, jsx_runtime_1.jsx)("div", { className: 'table-settings-body', children: hasItems ? ((0, jsx_runtime_1.jsx)(TableSettingsListContainer_1.TableSettingsListContainer, { items: columnOrder, onSortEnd: handleSortEnd, itemProps: { ...itemProps } })) : ((0, jsx_runtime_1.jsx)("div", { className: 'text-center text-color-gray', children: notFoundMessage })) })] }));
-    };
-    const renderTableSettingsDialogFooter = () => {
-        return ((0, jsx_runtime_1.jsx)(TableSettingsDialogFooter_1.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 = (0, classnames_1.default)('TableSettingsDialog', className);
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: show, title: title, subtitle: subtitle, onClose: onHide, body: renderTableSettingsDialogContent(), footer: renderTableSettingsDialogFooter(), className: dialogClassNames }));
-};
-exports.default = TableSettingsDialog;

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

@@ -1,39 +0,0 @@
-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/lib/es/src/components/table/TableSettingsDialog.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,17 +0,0 @@
-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/lib/es/src/components/table/TableSettingsDialogFooter.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSettingsDialogFooter = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Button_1 = tslib_1.__importDefault(require("../../Button"));
-const TableSettingsDialogFooter = (props) => {
-    const { hasChanged, isResetAll, immediateChange, resetButtonText, closeButtonText, cancelButtonText, applyButtonText, onHide, onResetColumnChanges, onDiscardChanges, onApplyChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, } = props;
-    const restButtonClassNames = (0, classnames_1.default)('btn', 'btn-link', !hasChanged && 'disabled');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex justify-content-between', children: [(0, jsx_runtime_1.jsxs)("div", { children: [!isResetAll && ((0, jsx_runtime_1.jsxs)("div", { className: restButtonClassNames, onClick: onResetColumnChanges, children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] })), isResetAll && ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-group', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { iconOnly: true, iconName: 'rioglyph-remove', className: 'margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }), (0, jsx_runtime_1.jsx)(Button_1.default, { iconOnly: true, bsStyle: Button_1.default.PRIMARY, iconName: 'rioglyph-ok', onClick: onConfirmResetColumnChanges })] }))] }), immediateChange ? ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onHide, children: closeButtonText })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onDiscardChanges, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.PRIMARY, onClick: onApplyChanges, children: applyButtonText })] }))] }));
-};
-exports.TableSettingsDialogFooter = TableSettingsDialogFooter;

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

@@ -1,8 +0,0 @@
-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/lib/es/src/components/table/TableSettingsListContainer.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSettingsListContainer = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
-const modifiers_1 = require("@dnd-kit/modifiers");
-const TableSettingsListItem_1 = tslib_1.__importDefault(require("./TableSettingsListItem"));
-const TableSettingsListContainer = (props) => {
-    const { items, itemProps, onSortEnd } = props;
-    const [activeDraggedColumn, setActiveDraggedColumn] = (0, react_1.useState)(null);
-    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
-    const handleDragStart = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: 'table-settings-items-container', children: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: items.map((column, index) => ((0, jsx_runtime_1.jsx)(TableSettingsListItem_1.default, { column: column, orderIndex: index, isActive: activeDraggedColumn === column, className: activeDraggedColumn === column ? activeClass : '', ...itemProps }, column))) }) }) }));
-};
-exports.TableSettingsListContainer = TableSettingsListContainer;

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

@@ -1,10 +0,0 @@
-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/lib/es/src/components/table/TableSettingsListItem.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterColumns = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const sortable_1 = require("@dnd-kit/sortable");
-const utilities_1 = require("@dnd-kit/utilities");
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
-const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
-const TableSettingsColumnDetails_1 = require("./TableSettingsColumnDetails");
-const TableSettingsColumnButtons_1 = require("./TableSettingsColumnButtons");
-const MAX_COLUMN_WIDTH = 1000;
-const filterColumns = (searchValue, column, columnLabelStrings) => {
-    if (!searchValue) {
-        return false;
-    }
-    const label = columnLabelStrings[column] || '';
-    return !label.toLowerCase().includes(searchValue.toLowerCase());
-};
-exports.filterColumns = filterColumns;
-const TableSettingsListItem = (props) => {
-    const { column, orderIndex, columnLabels, autoLabel, disabledColumns = [], columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, columnLabelStrings = {}, openColumnsDetails = {}, updateColumnLabelStrings, onColumnWidthChange, onResetColumnWidth, onMoveColumn, onOpenDetails, onToggleHideColumn = noop_1.default, isActive = false, className, } = props;
-    const isSortingDisabled = !(0, isEmpty_1.default)(columnSearchValue);
-    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = (0, sortable_1.useSortable)({
-        id: column,
-        disabled: isSortingDisabled,
-    });
-    const style = {
-        transform: utilities_1.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 = (0, exports.filterColumns)(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
-    const itemClassNames = (0, classnames_1.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
-    const columnDetails = columnsDetails[column];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: itemClassNames, ref: setNodeRef, style: style, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'table-settings-item-header user-select-none', ref: setActivatorNodeRef, children: [(0, jsx_runtime_1.jsx)("div", { className: 'CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3', children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: !hiddenColumns.includes(column), onClick: event => {
-                                onToggleHideColumn(column);
-                                event.stopPropagation();
-                            }, disabled: disabledColumns.includes(column) }) }), (0, jsx_runtime_1.jsx)("div", { className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column, ...attributes, ...listeners, children: columnLabels[column] }), columnDetails && ((0, jsx_runtime_1.jsx)("div", { className: 'column-width-label', children: columnDetails.width ? `${columnDetails.width}px` : autoLabel })), (0, jsx_runtime_1.jsx)(TableSettingsColumnButtons_1.TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] }), columnDetails && !isActive && ((0, jsx_runtime_1.jsx)(Collapse_1.default, { open: !!openColumnsDetails[column], children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TableSettingsColumnDetails_1.TableSettingsColumnDetails, { ...columnDetails, column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth }) }) }))] }, `table-settings-item-${column}`));
-};
-exports.default = TableSettingsListItem;

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

@@ -1,9 +0,0 @@
-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/lib/es/src/components/table/TableToolbar.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const TableToolbar = ({ className, children }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('table-toolbar', className), children: children }));
-exports.default = TableToolbar;

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

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

package/lib/es/src/components/table/TableViewToggles.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
-const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
-// TODO: add responsive behaviour and trigger a change from table to list for small screen -> see DriverAdministration
-const wrapWithTooltip = (tooltipContent, element) => ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: 'bottom', overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { id: 'tooltip', allowOnTouch: true, children: tooltipContent }), children: element }));
-const typeIcons = {
-    TABLE: 'rioglyph-table-view',
-    SINGLE_CARD: 'rioglyph-th-list',
-    MULTI_CARDS: 'rioglyph-split-view',
-};
-const TypeButton = (props) => {
-    const { viewType, currentViewType, disabledViewTypes, tooltipContent, onClick, disabled } = props;
-    if (disabledViewTypes.includes(viewType)) {
-        return null;
-    }
-    const classes = (0, classnames_1.default)('btn btn-default btn-icon-only', disabled && 'disabled pointer-events-none', viewType === currentViewType && 'active');
-    const button = ((0, jsx_runtime_1.jsx)("button", { className: classes, type: 'button', onClick: () => onClick(viewType), children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${typeIcons[viewType]}` }) }));
-    return tooltipContent ? wrapWithTooltip(tooltipContent, button) : button;
-};
-const TableViewToggles = (props) => {
-    const { viewType, initialViewType = 'TABLE', disabledViewTypes = [], onViewTypeChange = noop_1.default, tableViewTooltipContent, singleCardViewTooltipContent, multiCardsViewTooltipContent, disabled = false, className, ...remainingProps } = props;
-    const [internalViewType, setInternalViewType] = (0, react_1.useState)(initialViewType);
-    // update internal state when external state changes - controlled component case
-    (0, react_1.useEffect)(() => {
-        if (viewType) {
-            setInternalViewType(viewType);
-        }
-    }, [viewType]);
-    const setViewType = (vt) => {
-        setInternalViewType(vt);
-        onViewTypeChange(vt);
-    };
-    const wrapperClassNames = (0, classnames_1.default)('TableViewToggles', 'btn-group', 'display-flex', 'flex-row', className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'TABLE', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: tableViewTooltipContent, onClick: setViewType, disabled: disabled }), (0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'SINGLE_CARD', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: singleCardViewTooltipContent, onClick: setViewType, disabled: disabled }), (0, jsx_runtime_1.jsx)(TypeButton, { viewType: 'MULTI_CARDS', currentViewType: internalViewType, disabledViewTypes: disabledViewTypes, tooltipContent: multiCardsViewTooltipContent, onClick: setViewType, disabled: disabled })] }));
-};
-// Don't export values as string but as a distinct union type
-TableViewToggles.VIEW_TYPE_TABLE = 'TABLE';
-TableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD';
-TableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS';
-exports.default = TableViewToggles;

package/lib/es/src/components/tag/Tag.d.ts

@@ -1,69 +0,0 @@
-import React from 'react';
-export type TagProps = {
-    /**
-     * Defines if the tag is active.
-     *
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Defines if the tag is clickable.
-     *
-     * @default false
-     */
-    clickable?: boolean;
-    /**
-     * Defines if the tag is deletable.
-     *
-     * @default false
-     */
-    deletable?: boolean;
-    /**
-     * Defines if the tag is revertable.
-     *
-     * @default false
-     */
-    revertable?: boolean;
-    /**
-     * Defines if the tag is disabled.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Define any rioglyph icon like "rioglyph-truck".
-     */
-    icon?: string;
-    /**
-     * Sets a more subtle style for border and background.
-     *
-     * @default false
-     */
-    muted?: boolean;
-    /**
-     * Defines if the tag is round.
-     *
-     * @default true
-     */
-    round?: boolean;
-    /**
-     * Defines if the tag is selectable.
-     *
-     * @default false
-     */
-    selectable?: boolean;
-    /**
-     * Defines if you want to render the tag in a different size.
-     *
-     * Possible values are: 'small' and 'medium'
-     */
-    size?: 'small' | 'medium';
-    multiline?: boolean;
-    [remainingProp: string]: unknown;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default Tag;

package/lib/es/src/components/tag/Tag.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Tag = (0, react_1.forwardRef)((props, ref) => {
-    const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className, ...remainingProps } = props;
-    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...remainingProps, className: tagClasses, children: (0, jsx_runtime_1.jsx)("div", { className: 'tag-inner', children: children }) }));
-});
-exports.default = Tag;

package/lib/es/src/components/tag/TagList.d.ts

@@ -1,25 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export type TagListProps = {
-    /**
-     * Defines if the tag list is rendered inline or vertically.
-     *
-     * @default true
-     */
-    inline?: boolean;
-    /**
-     * Defines if the tag has the same with as it`s parent container.
-     *
-     * @default false
-     */
-    autoTagWidth?: boolean;
-    /**
-     * Possible values are 1-6
-     */
-    tagsPerRow?: 1 | 2 | 3 | 4 | 6;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-declare const TagList: (props: PropsWithChildren<TagListProps>) => import("react/jsx-runtime").JSX.Element;
-export default TagList;