@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/components/table/TableSettingsDialog.js

@@ -1,198 +1,149 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
 import isEmpty from 'lodash/fp/isEmpty';
-import isNil from 'lodash/fp/isNil';
 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';
-import { columnsDetailsPropTypes } from './tableSettingsPropTypes';
 const DEFAULT_COLUMN_WIDTH = 0;
 const MAX_COLUMN_WIDTH = 1000;
-class TableSettingsDialog extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            columnSearchValue: props.columnSearchValue,
-            columnOrder: props.columnOrder || props.defaultColumnOrder,
-            hiddenColumns: props.hiddenColumns || props.defaultHiddenColumns,
-            hasChanged: false,
-            movedColumn: false,
-            columnsDetails: props.columnsDetails,
-            columnLabelStrings: {},
-            updateColumnLabelStrings: true,
-            openColumnsDetails: {},
-        };
-        this.moveColumnToIndex = this.moveColumnToIndex.bind(this);
-        this.handleResetColumnChanges = this.handleResetColumnChanges.bind(this);
-        this.handleCancelResetColumnChanges = this.handleCancelResetColumnChanges.bind(this);
-        this.resetAllColumnChanges = this.resetAllColumnChanges.bind(this);
-        this.discardColumnChanges = this.discardColumnChanges.bind(this);
-        this.applyChanges = this.applyChanges.bind(this);
-        this.toggleHideColumn = this.toggleHideColumn.bind(this);
-        this.handleSearchChange = this.handleSearchChange.bind(this);
-        this.deleteMovedColumn = this.deleteMovedColumn.bind(this);
-        this.handleColumnWidthChange = this.handleColumnWidthChange.bind(this);
-        this.handleResetColumnWidth = this.handleResetColumnWidth.bind(this);
-        this.handleOpenColumnsDetails = this.handleOpenColumnsDetails.bind(this);
-        this.handleSortEnd = this.handleSortEnd.bind(this);
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const { columnSearchValue, columnOrder, hiddenColumns, columnsDetails } = this.state;
-        const hasColumnSearchValueChanged = !isEqual(columnSearchValue, nextProps.columnSearchValue);
-        const hasColumnOrderChanged = !isEqual(columnOrder, nextProps.columnOrder);
-        const hasHiddenColumnsChanged = !isEqual(hiddenColumns, nextProps.hiddenColumns);
-        const hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
-        if (hasColumnSearchValueChanged ||
-            hasColumnOrderChanged ||
-            hasHiddenColumnsChanged ||
-            hasColumnsDetailsChanged) {
-            this.setState({
-                columnSearchValue: hasColumnSearchValueChanged ? nextProps.columnSearchValue : columnSearchValue,
-                columnOrder: hasColumnOrderChanged ? nextProps.columnOrder : columnOrder,
-                hiddenColumns: hasHiddenColumnsChanged ? nextProps.hiddenColumns : hiddenColumns,
-                columnsDetails: hasColumnsDetailsChanged ? nextProps.columnsDetails : columnsDetails,
-                updateColumnLabelStrings: true,
-            });
-        }
-    }
-    componentDidMount() {
-        const { defaultColumnOrder, defaultHiddenColumns, columnsDetails, columnOrder, hiddenColumns } = this.props;
-        this.setColumnLabelStrings();
-        const hasColumnOrderChanged = !isEqual(columnOrder, defaultColumnOrder);
-        const hasHiddenColumnsChanged = !isEqual(hiddenColumns, defaultHiddenColumns);
-        const hasColumnsDetailsChanged = this.hasColumnsDetailsChanged(columnsDetails);
-        if (hasColumnOrderChanged || hasHiddenColumnsChanged || hasColumnsDetailsChanged) {
-            this.setState({ hasChanged: true });
-        }
-    }
-    componentDidUpdate() {
-        if (this.props.show && this.state.updateColumnLabelStrings) {
-            this.setColumnLabelStrings();
-        }
-    }
-    hasColumnsDetailsChanged(columnsDetails) {
-        if (isEmpty(columnsDetails)) {
+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 hasChanged = some(details => {
-            const defaultWidth = isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
+        const hasObjectChanged = some((details) => {
+            const defaultWidth = Number.isFinite(details.defaultWidth) ? details.defaultWidth : DEFAULT_COLUMN_WIDTH;
             return details.width !== defaultWidth;
-        })(columnsDetails);
-        return hasChanged;
-    }
-    setColumnLabelStrings() {
-        if (!this.contentRef) {
+        })(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 = this.contentRef.getElementsByClassName('table-settings-item-label');
+        const labels = contentRef.current.getElementsByClassName('table-settings-item-label');
         const columnStrings = {};
         [...labels].map(label => {
-            const key = label.getAttribute('data-key');
-            columnStrings[key] = label.textContent.replace(/\r?\n|\r/g, '').toLowerCase();
-        });
-        this.setState({
-            columnLabelStrings: columnStrings,
-            updateColumnLabelStrings: false,
+            var _a;
+            const dataKey = label.getAttribute('data-key');
+            if (dataKey) {
+                const updatedLabel = (_a = label.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\r?\n|\r/g, '').toLowerCase();
+                if (updatedLabel) {
+                    columnStrings[dataKey] = updatedLabel;
+                }
+            }
         });
-    }
-    deleteMovedColumn() {
-        this.setState({
-            movedColumn: false,
-        });
-    }
-    moveColumnToIndex(columnName, newIndex, changeMovedColumn) {
-        const { immediateChange, onColumnChange } = this.props;
-        const { columnOrder, hiddenColumns } = this.state;
+        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);
-        this.setState({
-            columnOrder: newColumnOrder,
-            movedColumn: changeMovedColumn ? columnName : false,
-            hasChanged: true,
-        });
+        setColumnOrder(newColumnOrder);
+        setMovedColumn(changeMovedColumn ? !!columnName : false);
+        setHasChanged(true);
         if (immediateChange) {
             onColumnChange(newColumnOrder, hiddenColumns);
         }
-        window.setTimeout(this.deleteMovedColumn, 500);
-    }
-    handleResetColumnChanges() {
-        this.setState({ isResetAll: true });
-    }
-    handleCancelResetColumnChanges() {
-        this.setState({ isResetAll: false });
-    }
-    resetColumnsDetails(columnsDetails) {
-        return mapValues(columnDetails => {
-            return Object.assign(Object.assign({}, columnDetails), { width: columnDetails.defaultWidth || DEFAULT_COLUMN_WIDTH });
-        })(columnsDetails);
-    }
-    resetAllColumnChanges() {
-        const { defaultColumnOrder, defaultHiddenColumns, immediateChange, onSearchChange, onColumnChange } = this.props;
-        const { columnsDetails } = this.state;
-        const defaultColumnsDetails = this.resetColumnsDetails(columnsDetails);
-        const newState = {
-            columnOrder: defaultColumnOrder,
-            hiddenColumns: defaultHiddenColumns,
-            columnSearchValue: '',
-            hasChanged: false,
-            isResetAll: false,
-        };
+        window.setTimeout(deleteMovedColumn, 500);
+    };
+    const handleResetColumnChanges = () => setIsResetAll(true);
+    const handleCancelResetColumnChanges = () => setIsResetAll(false);
+    const resetColumnsDetails = (details) => {
+        return mapValues((singleColumnDetails) => {
+            return Object.assign(Object.assign({}, 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)) {
-            newState.columnsDetails = defaultColumnsDetails;
+            setColumnsDetails(defaultColumnsDetails);
         }
-        this.setState(() => newState);
         if (immediateChange) {
             onSearchChange('');
             onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);
         }
-    }
-    discardColumnChanges() {
-        this.props.onSearchChange('');
-        this.props.onCancel();
-        this.props.onHide();
-    }
-    applyChanges() {
-        const { columnOrder, hiddenColumns, columnsDetails } = this.state;
-        this.setState({
-            columnSearchValue: '',
-        });
-        this.props.onSearchChange('');
-        this.props.onColumnChange(columnOrder, hiddenColumns, columnsDetails);
-        this.props.onApply(columnOrder, hiddenColumns, columnsDetails);
-        this.props.onHide();
-    }
-    toggleHideColumn(column) {
-        const { hiddenColumns } = this.state;
-        const { immediateChange, onColumnChange } = this.props;
+    };
+    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];
-        this.setState(() => ({
-            hiddenColumns: newHiddenColumns,
-            hasChanged: true,
-        }));
+        setHiddenColumns(newHiddenColumns);
+        setHasChanged(true);
         if (immediateChange) {
-            onColumnChange(this.state.columnOrder, newHiddenColumns);
+            onColumnChange(columnOrder, newHiddenColumns);
         }
-    }
-    handleSearchChange(searchValue) {
+    };
+    const handleSearchChange = (searchValue) => {
         const newSearch = searchValue.toLowerCase();
-        this.setState(() => ({
-            columnSearchValue: newSearch,
-        }), this.props.onSearchChange(newSearch));
-    }
-    handleColumnWidthChange(column, value) {
-        const { immediateChange, onColumnDetailsChange } = this.props;
-        const columnsDetails = Object.assign({}, this.state.columnsDetails);
+        setColumnSearchValue(() => {
+            onSearchChange(newSearch);
+            return newSearch;
+        });
+    };
+    const handleColumnWidthChange = (column, value) => {
         if (columnsDetails[column]) {
             columnsDetails[column].width = value;
         }
@@ -203,59 +154,48 @@ class TableSettingsDialog extends PureComponent {
                 maxWidth: MAX_COLUMN_WIDTH,
             };
         }
-        this.setState(() => ({
-            columnsDetails,
-            hasChanged: true,
-        }));
+        setColumnsDetails(columnsDetails);
+        setHasChanged(true);
         if (immediateChange) {
             onColumnDetailsChange(column, columnsDetails[column]);
         }
-    }
-    handleResetColumnWidth(column) {
-        const { immediateChange, onColumnDetailsChange } = this.props;
-        const columnsDetails = Object.assign({}, this.state.columnsDetails);
+    };
+    const handleResetColumnWidth = (column) => {
         const updatedColumnDetails = columnsDetails[column];
         updatedColumnDetails.width = updatedColumnDetails.defaultWidth;
-        this.setState(() => ({ columnsDetails }));
+        setColumnsDetails(columnsDetails);
         if (immediateChange) {
             onColumnDetailsChange(column, columnsDetails[column]);
         }
-    }
-    handleOpenColumnsDetails(columnName) {
-        const updatedOpenColumnDetails = Object.assign({}, this.state.openColumnsDetails);
+    };
+    const handleOpenColumnsDetails = (columnName) => {
+        const updatedOpenColumnDetails = Object.assign({}, openColumnsDetails);
         if (updatedOpenColumnDetails[columnName]) {
             delete updatedOpenColumnDetails[columnName];
         }
         else {
             updatedOpenColumnDetails[columnName] = columnName;
         }
-        this.setState(() => ({ openColumnsDetails: updatedOpenColumnDetails }));
-    }
-    handleSortEnd(event) {
+        setOpenColumnsDetails(updatedOpenColumnDetails);
+    };
+    const handleSortEnd = (event, previousOrder) => {
         const { active, over } = event;
-        if (active.id === over.id) {
+        const activeId = active.id;
+        const overId = over === null || over === void 0 ? void 0 : over.id;
+        if (activeId === overId) {
             return;
         }
-        const { immediateChange, onColumnChange } = this.props;
-        const { columnOrder, hiddenColumns } = this.state;
-        const oldIndex = columnOrder.indexOf(active.id);
-        const newIndex = columnOrder.indexOf(over.id);
-        const newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex);
-        this.setState(() => ({
-            columnOrder: newColumnOrder,
-            movedColumn: true,
-            hasChanged: true,
-        }));
+        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);
         }
-    }
-    renderNotFoundMessage(message) {
-        return _jsx("div", Object.assign({ className: 'text-center text-color-gray' }, { children: message }));
-    }
-    renderTableSettingsDialogContent() {
-        const { searchPlaceholder, notFoundMessage, columnLabels, autoLabel, disabledColumns } = this.props;
-        const { columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, openColumnsDetails, updateColumnLabelStrings, columnLabelStrings, } = this.state;
+    };
+    const renderTableSettingsDialogContent = () => {
         const itemProps = {
             columnLabels,
             autoLabel,
@@ -267,79 +207,23 @@ class TableSettingsDialog extends PureComponent {
             columnLabelStrings,
             openColumnsDetails,
             updateColumnLabelStrings,
-            onMoveColumn: this.moveColumnToIndex,
-            onOpenDetails: this.handleOpenColumnsDetails,
-            onColumnWidthChange: this.handleColumnWidthChange,
-            onResetColumnWidth: this.handleResetColumnWidth,
-            onToggleHideColumn: this.toggleHideColumn,
+            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", Object.assign({ ref: node => (this.contentRef = node) }, { children: [_jsx("div", Object.assign({ className: 'table-settings-search' }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search' }) })), _jsx(ClearableInput, { value: columnSearchValue, onChange: this.handleSearchChange, placeholder: searchPlaceholder })] })) })), _jsx("div", Object.assign({ className: 'table-settings-body' }, { children: hasItems ? (_jsx(TableSettingsListContainer, { items: columnOrder, onSortEnd: this.handleSortEnd, itemProps: Object.assign({}, itemProps) })) : (this.renderNotFoundMessage(notFoundMessage)) }))] })));
-    }
-    renderTableSettingsDialogFooter() {
-        const { immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText } = this.props;
-        const { hasChanged, isResetAll } = this.state;
-        return (_jsx(TableSettingsDialogFooter, { hasChanged: hasChanged, isResetAll: isResetAll, immediateChange: immediateChange, resetButtonText: resetButtonText, onHide: onHide, onApplyChanges: this.applyChanges, onDiscardChanges: this.discardColumnChanges, onResetColumnChanges: this.handleResetColumnChanges, onConfirmResetColumnChanges: this.resetAllColumnChanges, onCancelResetColumnChanges: this.handleCancelResetColumnChanges, closeButtonText: closeButtonText, cancelButtonText: cancelButtonText, applyButtonText: applyButtonText }));
-    }
-    render() {
-        if (!this.props.show) {
-            return null;
-        }
-        const dialogClassNames = classNames('TableSettingsDialog', this.props.className && this.props.className);
-        return (_jsx(Dialog, { show: this.props.show, title: this.props.title, onHide: this.props.onHide, body: this.renderTableSettingsDialogContent(), footer: this.renderTableSettingsDialogFooter(), className: dialogClassNames }));
-    }
-}
-TableSettingsDialog.defaultProps = {
-    show: false,
-    immediateChange: false,
-    columnSearchValue: '',
-    onColumnChange: () => { },
-    onColumnDetailsChange: () => { },
-    onSearchChange: () => { },
-    onCancel: () => { },
-    onApply: () => { },
-    columnLabels: {},
-    defaultColumnOrder: [],
-    defaultHiddenColumns: [],
-    columnOrder: [],
-    hiddenColumns: [],
-    disabledColumns: [],
-    columnsDetails: {},
-    notFoundMessage: '',
-    autoLabel: '',
-};
-TableSettingsDialog.propTypes = {
-    show: PropTypes.bool.isRequired,
-    title: PropTypes.node.isRequired,
-    subtitle: PropTypes.node,
-    className: PropTypes.string,
-    defaultColumnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-    defaultHiddenColumns: PropTypes.arrayOf(PropTypes.string),
-    columnOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-    hiddenColumns: PropTypes.arrayOf(PropTypes.string),
-    // listed with { columnName: string/node }
-    columnLabels: PropTypes.object.isRequired,
-    // 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: PropTypes.arrayOf(PropTypes.string).isRequired,
-    columnsDetails: columnsDetailsPropTypes,
-    defaultColumnDetails: columnsDetailsPropTypes,
-    autoLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    applyButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    cancelButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    closeButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    resetButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    onColumnChange: PropTypes.func.isRequired,
-    onColumnDetailsChange: PropTypes.func,
-    onDiscard: PropTypes.func,
-    onApply: PropTypes.func,
-    onHide: PropTypes.func.isRequired,
-    columnSearchValue: PropTypes.string,
-    onSearchChange: PropTypes.func,
-    searchPlaceholder: PropTypes.node.isRequired,
-    notFoundMessage: PropTypes.string,
-    // set if you want to change the table after each change
-    immediateChange: PropTypes.bool,
+        return (_jsxs("div", Object.assign({ ref: contentRef }, { children: [_jsx("div", Object.assign({ className: 'table-settings-search' }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search' }) })), _jsx(ClearableInput, { value: columnSearchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })] })) })), _jsx("div", Object.assign({ className: 'table-settings-body' }, { children: hasItems ? (_jsx(TableSettingsListContainer, { items: columnOrder, onSortEnd: handleSortEnd, itemProps: Object.assign({}, itemProps) })) : (_jsx("div", Object.assign({ 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/components/table/TableSettingsDialog.types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+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/components/table/TableSettingsDialog.types.js

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

package/components/table/TableSettingsDialogFooter.d.ts

@@ -1,43 +1,17 @@
-export function TableSettingsDialogFooter(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace TableSettingsDialogFooter {
-    namespace defaultProps {
-        const hasChanged: boolean;
-        const isResetAll: boolean;
-        const immediateChange: boolean;
-        const resetButtonText: string;
-        const closeButtonText: string;
-        const cancelButtonText: string;
-        const applyButtonText: string;
-        function onHide(): undefined;
-        function onResetColumnChanges(): undefined;
-        function onDiscardChanges(): undefined;
-        function onApplyChanges(): undefined;
-    }
-    namespace propTypes {
-        const hasChanged_1: PropTypes.Requireable<boolean>;
-        export { hasChanged_1 as hasChanged };
-        const isResetAll_1: PropTypes.Requireable<boolean>;
-        export { isResetAll_1 as isResetAll };
-        const immediateChange_1: PropTypes.Requireable<boolean>;
-        export { immediateChange_1 as immediateChange };
-        const resetButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { resetButtonText_1 as resetButtonText };
-        const closeButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { closeButtonText_1 as closeButtonText };
-        const cancelButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { cancelButtonText_1 as cancelButtonText };
-        const applyButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { applyButtonText_1 as applyButtonText };
-        const onHide_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onHide_1 as onHide };
-        const onResetColumnChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onResetColumnChanges_1 as onResetColumnChanges };
-        const onDiscardChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onDiscardChanges_1 as onDiscardChanges };
-        const onApplyChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onApplyChanges_1 as onApplyChanges };
-        export const onConfirmResetColumnChanges: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onCancelResetColumnChanges: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
+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/components/table/TableSettingsDialogFooter.js

@@ -1,37 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
-export const TableSettingsDialogFooter = props => {
-    const { hasChanged, isResetAll, immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText, onResetColumnChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, onDiscardChanges, onApplyChanges, } = props;
+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", { children: [_jsxs("div", Object.assign({ className: 'pull-left' }, { children: [!isResetAll && (_jsxs("div", Object.assign({ className: restButtonClassNames, onClick: onResetColumnChanges }, { children: [_jsx("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] }))), isResetAll && (_jsxs("div", Object.assign({ className: 'btn-group' }, { children: [_jsx("div", Object.assign({ className: 'btn btn-icon-only btn-default margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("div", Object.assign({ className: 'btn btn-primary btn-icon-only', onClick: onConfirmResetColumnChanges }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] })))] })), immediateChange ? (_jsx("div", Object.assign({ className: 'pull-right' }, { children: _jsx("div", Object.assign({ className: 'btn btn-default', onClick: onHide }, { children: closeButtonText })) }))) : (_jsxs("div", Object.assign({ className: 'btn-toolbar pull-right' }, { children: [_jsx("div", Object.assign({ className: 'btn btn-default', onClick: onDiscardChanges }, { children: cancelButtonText })), _jsx("div", Object.assign({ className: 'btn btn-primary', onClick: onApplyChanges }, { children: applyButtonText }))] })))] }));
-};
-TableSettingsDialogFooter.defaultProps = {
-    hasChanged: false,
-    isResetAll: false,
-    immediateChange: false,
-    resetButtonText: '',
-    closeButtonText: '',
-    cancelButtonText: '',
-    applyButtonText: '',
-    onHide: () => undefined,
-    onResetColumnChanges: () => undefined,
-    onDiscardChanges: () => undefined,
-    onApplyChanges: () => undefined,
-};
-TableSettingsDialogFooter.propTypes = {
-    hasChanged: PropTypes.bool,
-    isResetAll: PropTypes.bool,
-    immediateChange: PropTypes.bool,
-    resetButtonText: PropTypes.node,
-    closeButtonText: PropTypes.node,
-    cancelButtonText: PropTypes.node,
-    applyButtonText: PropTypes.node,
-    onHide: PropTypes.func,
-    onResetColumnChanges: PropTypes.func,
-    onDiscardChanges: PropTypes.func,
-    onApplyChanges: PropTypes.func,
-    onConfirmResetColumnChanges: PropTypes.func,
-    onCancelResetColumnChanges: PropTypes.func,
+    return (_jsxs("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [_jsxs("div", { children: [!isResetAll && (_jsxs("div", Object.assign({ className: restButtonClassNames, onClick: onResetColumnChanges }, { children: [_jsx("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] }))), isResetAll && (_jsxs("div", Object.assign({ 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, Object.assign({ onClick: onHide }, { children: closeButtonText }))) : (_jsxs("div", Object.assign({ className: 'btn-toolbar' }, { children: [_jsx(Button, Object.assign({ onClick: onDiscardChanges }, { children: cancelButtonText })), _jsx(Button, Object.assign({ bsStyle: Button.PRIMARY, onClick: onApplyChanges }, { children: applyButtonText }))] })))] })));
 };