@rio-cloud/rio-uikit 1.12.0 → 1.13.0

package/lib/es/components/table/TableHead.d.ts

@@ -1,33 +0,0 @@
-import type { PropsWithChildren } from 'react';
-type TableHeadProps = {
-    /**
-     * The unique name of the column used as identifier
-     */
-    column?: string;
-    /**
-     * The label that shall be rendered in the table head next to the sorting icons.
-     */
-    label?: string | React.ReactElement;
-    /**
-     * The string title of a column used as native title attribute on the th tag.
-     */
-    title?: string;
-    /**
-     * The sorting key stored as data attribute for later usage for click events.
-     */
-    sortBy?: string;
-    /**
-     * The column sorting direction.
-     */
-    sortDir?: string;
-    /**
-     * The click handler for the th tag.
-     */
-    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
-    /**
-     * Additional class names assigned to the wrapper element.
-     */
-    className?: string;
-};
-declare const TableHead: (props: PropsWithChildren<TableHeadProps>) => import("react/jsx-runtime").JSX.Element;
-export default TableHead;

package/lib/es/components/table/TableHead.js

@@ -1,14 +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 SortArrows_1 = tslib_1.__importDefault(require("./SortArrows"));
-const TableHead = (props) => {
-    const { column, title, label, sortBy, sortDir, onClick = () => { }, className = '', children, ...remainingProps } = props;
-    const tableHeadClassNames = (0, classnames_1.default)('user-select-none', 'sort-column', className);
-    const labelString = typeof label === 'string' ? label : '';
-    const thTitle = title ?? labelString;
-    return ((0, jsx_runtime_1.jsxs)("th", { ...remainingProps, className: tableHeadClassNames, onClick: onClick, "data-field": column, "data-sortby": column, title: thTitle, children: [label && ((0, jsx_runtime_1.jsxs)("span", { children: [column !== undefined && sortBy === column ? (0, jsx_runtime_1.jsx)(SortArrows_1.default, { direction: sortDir }) : (0, jsx_runtime_1.jsx)(SortArrows_1.default, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] })), children] }));
-};
-exports.default = TableHead;

package/lib/es/components/table/TableSearch.d.ts

@@ -1,9 +0,0 @@
-import { type ClearableInputProps } from '../clearableInput/ClearableInput';
-export type TableSearchProps = Omit<ClearableInputProps, 'className'> & {
-    /**
-     * Optional class names for the wrapper.
-     */
-    className?: string;
-};
-declare const TableSearch: (props: TableSearchProps) => import("react/jsx-runtime").JSX.Element;
-export default TableSearch;

package/lib/es/components/table/TableSearch.js

@@ -1,11 +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 ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
-const TableSearch = (props) => {
-    const { className, ...remainingProps } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('table-toolbar-search', 'input-group', className), 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, { ...remainingProps })] }));
-};
-exports.default = TableSearch;

package/lib/es/components/table/TableSettingsColumnButtons.d.ts

@@ -1,12 +0,0 @@
-import type { TableColumnDetails } from './TableSettingsDialog.types';
-export type TableSettingsColumnButtonsProps = {
-    column: string;
-    index: number;
-    columnOrder: string[];
-    openColumnsDetails: Record<string, string>;
-    disabled?: boolean;
-    columnDetails?: TableColumnDetails;
-    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;
-    onOpenDetails?: (column: string, index: number, something: boolean) => void;
-};
-export declare const TableSettingsColumnButtons: (props: TableSettingsColumnButtonsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/es/components/table/TableSettingsColumnButtons.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSettingsColumnButtons = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const TableSettingsColumnButtons = (props) => {
-    const { column = '', index = 0, columnDetails, columnOrder = [], openColumnsDetails = {}, disabled, onMoveColumn = noop_1.default, onOpenDetails = noop_1.default, } = props;
-    const navButtonBase = (0, classnames_1.default)('btn btn-muted btn-icon-only btn-sm');
-    const columnUpClasses = (0, classnames_1.default)(navButtonBase, index === 0 && 'disabled');
-    const columnDownClasses = (0, classnames_1.default)(navButtonBase, index === columnOrder.length - 1 && 'disabled');
-    const toggleIconClassNames = (0, classnames_1.default)('rioglyph', openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'table-settings-item-item-buttons', children: [!disabled && ((0, jsx_runtime_1.jsx)("div", { className: columnUpClasses, onClick: event => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onMoveColumn(column, index - 1, true);
-                }, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-up' }) })), !disabled && ((0, jsx_runtime_1.jsx)("div", { className: columnDownClasses, onClick: event => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onMoveColumn(column, index + 1, true);
-                }, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-down' }) })), columnDetails && ((0, jsx_runtime_1.jsx)("div", { className: navButtonBase, onClick: () => onOpenDetails(column), children: (0, jsx_runtime_1.jsx)("span", { className: toggleIconClassNames }) }))] }));
-};
-exports.TableSettingsColumnButtons = TableSettingsColumnButtons;

package/lib/es/components/table/TableSettingsColumnDetails.d.ts

@@ -1,8 +0,0 @@
-import type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog.types';
-export type TableSettingsColumnDetailsProps = TableColumnDetails & {
-    column: string;
-    maxColumnWidth: number;
-    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;
-    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;
-};
-export declare const TableSettingsColumnDetails: (props: TableSettingsColumnDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/es/components/table/TableSettingsColumnDetails.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSettingsColumnDetails = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const Slider_1 = tslib_1.__importDefault(require("../slider/Slider"));
-const TableSettingsColumnDetails = (props) => {
-    const { width = 0, defaultWidth = 0, maxWidth, column, maxColumnWidth, onColumnWidthChange = noop_1.default, onResetColumnWidth = noop_1.default, } = props;
-    const handleWidthInputChange = (event) => {
-        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;
-        const max = maxWidth || maxColumnWidth;
-        const value = Math.min(parsedValue, max);
-        onColumnWidthChange(column, value);
-    };
-    const handleColumnWidthChange = (value) => onColumnWidthChange(column, value);
-    const handleResetColumnWidth = () => onResetColumnWidth(column);
-    const resetWidthButtonClassNames = (0, classnames_1.default)('btn', 'btn-muted', 'btn-icon-only', 'btn-sm', 'margin-left-10', width === defaultWidth && 'disabled');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'table-settings-item-body', children: [(0, jsx_runtime_1.jsx)(Slider_1.default, { className: 'margin-bottom-0', value: width, minValue: 0, maxValue: maxWidth || maxColumnWidth, step: 1, onChange: handleColumnWidthChange }), (0, jsx_runtime_1.jsx)("div", { className: resetWidthButtonClassNames, role: 'button', onClick: handleResetColumnWidth, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert' }) }), (0, jsx_runtime_1.jsx)("div", { className: 'column-width-input', children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [(0, jsx_runtime_1.jsx)("input", { className: 'form-control text-right padding-right-5 no-controls', type: 'number', value: width || '', min: 0, max: maxWidth || maxColumnWidth, onChange: handleWidthInputChange }), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-addon', children: "px" })] }) })] }));
-};
-exports.TableSettingsColumnDetails = TableSettingsColumnDetails;

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

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

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

package/lib/es/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/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/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/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;