@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/table/TableSettingsColumnButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsColumnButtons.js","sources":["../../../src/components/table/TableSettingsColumnButtons.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport type { TableColumnDetails } from './TableSettingsDialog.types';\n\nexport type TableSettingsColumnButtonsProps = {\n    column: string;\n    index: number;\n    columnOrder: string[];\n    openColumnsDetails: Record<string, string>;\n    disabled?: boolean;\n    columnDetails?: TableColumnDetails;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (column: string) => void;\n};\n\nexport const TableSettingsColumnButtons = (props: TableSettingsColumnButtonsProps) => {\n    const {\n        column = '',\n        index = 0,\n        columnDetails,\n        columnOrder = [],\n        openColumnsDetails = {},\n        disabled,\n        onMoveColumn = noop,\n        onOpenDetails = noop,\n    } = props;\n\n    const navButtonBase = classNames('btn btn-muted btn-icon-only btn-sm');\n\n    const columnUpClasses = classNames(navButtonBase, index === 0 && 'disabled');\n\n    const columnDownClasses = classNames(navButtonBase, index === columnOrder.length - 1 && 'disabled');\n\n    const toggleIconClassNames = classNames(\n        'rioglyph',\n        openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width'\n    );\n\n    return (\n        <div className='table-settings-item-item-buttons'>\n            {!disabled && (\n                <div\n                    className={columnUpClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index - 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-up' />\n                </div>\n            )}\n            {!disabled && (\n                <div\n                    className={columnDownClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index + 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-down' />\n                </div>\n            )}\n            {columnDetails && (\n                <div className={navButtonBase} onClick={() => onOpenDetails(column)}>\n                    <span className={toggleIconClassNames} />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnButtons","props","column","index","columnDetails","columnOrder","openColumnsDetails","disabled","onMoveColumn","noop","onOpenDetails","navButtonBase","classNames","columnUpClasses","columnDownClasses","toggleIconClassNames","jsxs","jsx","event"],"mappings":";;;AAgBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,oBAAAC,IAAqB,CAAA;AAAA,IACrB,UAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,eAAAC,IAAgBD;AAAA,EAAA,IAChBR,GAEEU,IAAgBC,EAAW,oCAAoC,GAE/DC,IAAkBD,EAAWD,GAAeR,MAAU,KAAK,UAAU,GAErEW,IAAoBF,EAAWD,GAAeR,MAAUE,EAAY,SAAS,KAAK,UAAU,GAE5FU,IAAuBH;AAAA,IACzB;AAAA,IACAN,EAAmBJ,CAAM,IAAI,oBAAoB;AAAA,EAAA;AAGrD,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAU,oCACV,UAAA;AAAA,IAAA,CAACT,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,SAAS,CAAAK,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,6BAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpD,CAACV,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWH;AAAA,QACX,SAAS,CAAAI,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtDb,KACG,gBAAAa,EAAC,OAAA,EAAI,WAAWN,GAAe,SAAS,MAAMD,EAAcR,CAAM,GAC9D,UAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,GAAsB,EAAA,CAC3C;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsColumnButtons.js","sources":["../../../src/components/table/TableSettingsColumnButtons.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport type { TableColumnDetails } from './TableSettingsDialog';\n\nexport type TableSettingsColumnButtonsProps = {\n    column: string;\n    index: number;\n    columnOrder: string[];\n    openColumnsDetails: Record<string, string>;\n    disabled?: boolean;\n    columnDetails?: TableColumnDetails;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (column: string) => void;\n};\n\nexport const TableSettingsColumnButtons = (props: TableSettingsColumnButtonsProps) => {\n    const {\n        column = '',\n        index = 0,\n        columnDetails,\n        columnOrder = [],\n        openColumnsDetails = {},\n        disabled,\n        onMoveColumn = noop,\n        onOpenDetails = noop,\n    } = props;\n\n    const navButtonBase = classNames('btn btn-muted btn-icon-only btn-sm');\n\n    const columnUpClasses = classNames(navButtonBase, index === 0 && 'disabled');\n\n    const columnDownClasses = classNames(navButtonBase, index === columnOrder.length - 1 && 'disabled');\n\n    const toggleIconClassNames = classNames(\n        'rioglyph',\n        openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width'\n    );\n\n    return (\n        <div className='table-settings-item-item-buttons'>\n            {!disabled && (\n                <div\n                    className={columnUpClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index - 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-up' />\n                </div>\n            )}\n            {!disabled && (\n                <div\n                    className={columnDownClasses}\n                    onClick={event => {\n                        event.preventDefault();\n                        event.stopPropagation();\n                        onMoveColumn(column, index + 1, true);\n                    }}\n                >\n                    <span className='rioglyph rioglyph-arrow-down' />\n                </div>\n            )}\n            {columnDetails && (\n                <div className={navButtonBase} onClick={() => onOpenDetails(column)}>\n                    <span className={toggleIconClassNames} />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnButtons","props","column","index","columnDetails","columnOrder","openColumnsDetails","disabled","onMoveColumn","noop","onOpenDetails","navButtonBase","classNames","columnUpClasses","columnDownClasses","toggleIconClassNames","jsxs","jsx","event"],"mappings":";;;AAgBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,eAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,oBAAAC,IAAqB,CAAA;AAAA,IACrB,UAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,eAAAC,IAAgBD;AAAA,EAAA,IAChBR,GAEEU,IAAgBC,EAAW,oCAAoC,GAE/DC,IAAkBD,EAAWD,GAAeR,MAAU,KAAK,UAAU,GAErEW,IAAoBF,EAAWD,GAAeR,MAAUE,EAAY,SAAS,KAAK,UAAU,GAE5FU,IAAuBH;AAAA,IACzB;AAAA,IACAN,EAAmBJ,CAAM,IAAI,oBAAoB;AAAA,EAAA;AAGrD,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAU,oCACV,UAAA;AAAA,IAAA,CAACT,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,SAAS,CAAAK,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,6BAAA,CAA6B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpD,CAACV,KACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWH;AAAA,QACX,SAAS,CAAAI,MAAS;AACd,UAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNV,EAAaN,GAAQC,IAAQ,GAAG,EAAI;AAAA,QACxC;AAAA,QAEA,UAAA,gBAAAc,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtDb,KACG,gBAAAa,EAAC,OAAA,EAAI,WAAWN,GAAe,SAAS,MAAMD,EAAcR,CAAM,GAC9D,UAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,GAAsB,EAAA,CAC3C;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableSettingsColumnDetails.d.ts

@@ -1,4 +1,4 @@
-import { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog.types';
+import { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';
 export type TableSettingsColumnDetailsProps = TableColumnDetails & {
     column: string;
     maxColumnWidth: number;

package/components/table/TableSettingsColumnDetails.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import x from "classnames";
 import { noop as m } from "es-toolkit/compat";
+import x from "../../utils/classNames.js";
 import N from "../slider/Slider.js";
 const j = (r) => {
   const {

package/components/table/TableSettingsColumnDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsColumnDetails.js","sources":["../../../src/components/table/TableSettingsColumnDetails.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport Slider from '../slider/Slider';\nimport type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog.types';\n\nexport type TableSettingsColumnDetailsProps = TableColumnDetails & {\n    column: string;\n    maxColumnWidth: number;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n};\n\nexport const TableSettingsColumnDetails = (props: TableSettingsColumnDetailsProps) => {\n    const {\n        width = 0,\n        defaultWidth = 0,\n        maxWidth,\n        column,\n        maxColumnWidth,\n        onColumnWidthChange = noop,\n        onResetColumnWidth = noop,\n    } = props;\n\n    const handleWidthInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;\n        const max = maxWidth || maxColumnWidth;\n        const value = Math.min(parsedValue, max);\n        onColumnWidthChange(column, value);\n    };\n\n    const handleColumnWidthChange = (value: number) => onColumnWidthChange(column, value);\n\n    const handleResetColumnWidth = () => onResetColumnWidth(column);\n\n    const resetWidthButtonClassNames = classNames(\n        'btn',\n        'btn-muted',\n        'btn-icon-only',\n        'btn-sm',\n        'margin-left-10',\n        width === defaultWidth && 'disabled'\n    );\n\n    return (\n        <div className='table-settings-item-body'>\n            <Slider\n                className='margin-bottom-0'\n                value={width}\n                minValue={0}\n                maxValue={maxWidth || maxColumnWidth}\n                step={1}\n                onChange={handleColumnWidthChange}\n            />\n            <div className={resetWidthButtonClassNames} role='button' onClick={handleResetColumnWidth}>\n                <span className='rioglyph rioglyph-revert' />\n            </div>\n            <div className='column-width-input'>\n                <div className='input-group'>\n                    <input\n                        className='form-control text-right padding-right-5 no-controls'\n                        type='number'\n                        value={width || ''}\n                        min={0}\n                        max={maxWidth || maxColumnWidth}\n                        onChange={handleWidthInputChange}\n                    />\n                    <div className='input-group-addon'>px</div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnDetails","props","width","defaultWidth","maxWidth","column","maxColumnWidth","onColumnWidthChange","noop","onResetColumnWidth","handleWidthInputChange","event","parsedValue","value","handleColumnWidthChange","handleResetColumnWidth","resetWidthButtonClassNames","classNames","jsxs","jsx","Slider"],"mappings":";;;;AAcO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC,IAAsBC;AAAA,IACtB,oBAAAC,IAAqBD;AAAA,EAAA,IACrBP,GAEES,IAAyB,CAACC,MAAyC;AACrE,UAAMC,IAAcD,EAAM,OAAO,QAAQ,OAAO,SAASA,EAAM,OAAO,OAAO,EAAE,IAAI,GAE7EE,IAAQ,KAAK,IAAID,GADXR,KAAYE,CACe;AACvC,IAAAC,EAAoBF,GAAQQ,CAAK;AAAA,EACrC,GAEMC,IAA0B,CAACD,MAAkBN,EAAoBF,GAAQQ,CAAK,GAE9EE,IAAyB,MAAMN,EAAmBJ,CAAM,GAExDW,IAA6BC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAUC,KAAgB;AAAA,EAAA;AAG9B,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAOlB;AAAA,QACP,UAAU;AAAA,QACV,UAAUE,KAAYE;AAAA,QACtB,MAAM;AAAA,QACN,UAAUQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAA4B,MAAK,UAAS,SAASD,GAC/D,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B,GAC/C;AAAA,sBACC,OAAA,EAAI,WAAU,sBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAOjB,KAAS;AAAA,UAChB,KAAK;AAAA,UACL,KAAKE,KAAYE;AAAA,UACjB,UAAUI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAoB,UAAA,KAAA,CAAE;AAAA,IAAA,EAAA,CACzC,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"TableSettingsColumnDetails.js","sources":["../../../src/components/table/TableSettingsColumnDetails.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Slider from '../slider/Slider';\nimport type { TableColumnDetails, TableColumnDetailsMap } from './TableSettingsDialog';\n\nexport type TableSettingsColumnDetailsProps = TableColumnDetails & {\n    column: string;\n    maxColumnWidth: number;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n};\n\nexport const TableSettingsColumnDetails = (props: TableSettingsColumnDetailsProps) => {\n    const {\n        width = 0,\n        defaultWidth = 0,\n        maxWidth,\n        column,\n        maxColumnWidth,\n        onColumnWidthChange = noop,\n        onResetColumnWidth = noop,\n    } = props;\n\n    const handleWidthInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = event.target.value ? Number.parseInt(event.target.value, 10) : 0;\n        const max = maxWidth || maxColumnWidth;\n        const value = Math.min(parsedValue, max);\n        onColumnWidthChange(column, value);\n    };\n\n    const handleColumnWidthChange = (value: number) => onColumnWidthChange(column, value);\n\n    const handleResetColumnWidth = () => onResetColumnWidth(column);\n\n    const resetWidthButtonClassNames = classNames(\n        'btn',\n        'btn-muted',\n        'btn-icon-only',\n        'btn-sm',\n        'margin-left-10',\n        width === defaultWidth && 'disabled'\n    );\n\n    return (\n        <div className='table-settings-item-body'>\n            <Slider\n                className='margin-bottom-0'\n                value={width}\n                minValue={0}\n                maxValue={maxWidth || maxColumnWidth}\n                step={1}\n                onChange={handleColumnWidthChange}\n            />\n            <div className={resetWidthButtonClassNames} role='button' onClick={handleResetColumnWidth}>\n                <span className='rioglyph rioglyph-revert' />\n            </div>\n            <div className='column-width-input'>\n                <div className='input-group'>\n                    <input\n                        className='form-control text-right padding-right-5 no-controls'\n                        type='number'\n                        value={width || ''}\n                        min={0}\n                        max={maxWidth || maxColumnWidth}\n                        onChange={handleWidthInputChange}\n                    />\n                    <div className='input-group-addon'>px</div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["TableSettingsColumnDetails","props","width","defaultWidth","maxWidth","column","maxColumnWidth","onColumnWidthChange","noop","onResetColumnWidth","handleWidthInputChange","event","parsedValue","value","handleColumnWidthChange","handleResetColumnWidth","resetWidthButtonClassNames","classNames","jsxs","jsx","Slider"],"mappings":";;;;AAcO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC,IAAsBC;AAAA,IACtB,oBAAAC,IAAqBD;AAAA,EAAA,IACrBP,GAEES,IAAyB,CAACC,MAAyC;AACrE,UAAMC,IAAcD,EAAM,OAAO,QAAQ,OAAO,SAASA,EAAM,OAAO,OAAO,EAAE,IAAI,GAE7EE,IAAQ,KAAK,IAAID,GADXR,KAAYE,CACe;AACvC,IAAAC,EAAoBF,GAAQQ,CAAK;AAAA,EACrC,GAEMC,IAA0B,CAACD,MAAkBN,EAAoBF,GAAQQ,CAAK,GAE9EE,IAAyB,MAAMN,EAAmBJ,CAAM,GAExDW,IAA6BC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAf,MAAUC,KAAgB;AAAA,EAAA;AAG9B,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BACX,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAOlB;AAAA,QACP,UAAU;AAAA,QACV,UAAUE,KAAYE;AAAA,QACtB,MAAM;AAAA,QACN,UAAUQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAA4B,MAAK,UAAS,SAASD,GAC/D,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B,GAC/C;AAAA,sBACC,OAAA,EAAI,WAAU,sBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAOjB,KAAS;AAAA,UAChB,KAAK;AAAA,UACL,KAAKE,KAAYE;AAAA,UACjB,UAAUI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAoB,UAAA,KAAA,CAAE;AAAA,IAAA,EAAA,CACzC,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/components/table/TableSettingsDialog.d.ts

@@ -1,5 +1,48 @@
 import { default as React } from 'react';
-import { TableColumnDetailsMap, TableColumnDetails } from './TableSettingsDialog.types';
+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 TableColumnsSettings = {
+    columnOrder: string[];
+    hiddenColumns: string[];
+    columnsDetails: TableColumnDetailsMap;
+};
+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;
+};
 type TableSettingsDialogProps = {
     /**
      * Defined whether to show the dialog or not.
@@ -27,6 +70,13 @@ type TableSettingsDialogProps = {
      * @default []
      */
     defaultHiddenColumns?: string[];
+    /**
+     * Initial default configuration for the each columns with regards to column width.
+     * Used to reset to this state when the configuration differs.
+     *
+     * @default {}
+     */
+    defaultColumnDetails?: TableColumnDetailsMap;
     /**
      * List of column names in current order. The "columnOrder" will be returned when the order changes.
      *

package/components/table/TableSettingsDialog.js

@@ -1,186 +1,202 @@
-import { jsx as a, jsxs as V } from "react/jsx-runtime";
-import { useState as l, useRef as Re, useEffect as Ie } from "react";
-import Me from "classnames";
-import { isEqual as y } from "es-toolkit/predicate";
-import { isEmpty as j, some as Ae, mapValues as Ne } from "es-toolkit/compat";
-import { noop as g } from "es-toolkit/function";
-import { arrayMove as Ee } from "@dnd-kit/sortable";
-import Fe from "../dialog/Dialog.js";
-import Be from "../clearableInput/ClearableInput.js";
-import { TableSettingsDialogFooter as Ve } from "./TableSettingsDialogFooter.js";
-import { TableSettingsListContainer as je } from "./TableSettingsListContainer.js";
-import { filterColumns as Pe } from "./TableSettingsListItem.js";
-const P = 0, Ue = 1e3, tt = (U) => {
+import { jsx as i, jsxs as P } from "react/jsx-runtime";
+import { useState as a, useRef as A, useEffect as Fe } from "react";
+import { isEqual as E } from "es-toolkit/predicate";
+import { isEmpty as J, mapValues as Ie } from "es-toolkit/compat";
+import { noop as p } from "es-toolkit/function";
+import { arrayMove as Me } from "@dnd-kit/sortable";
+import Ae from "../../utils/classNames.js";
+import Ee from "../dialog/Dialog.js";
+import Je from "../clearableInput/ClearableInput.js";
+import { TableSettingsDialogFooter as _e } from "./TableSettingsDialogFooter.js";
+import { TableSettingsListContainer as Be } from "./TableSettingsListContainer.js";
+import { filterColumns as Ve } from "./TableSettingsListItem.js";
+const D = 0, je = 1e3, tt = (k) => {
   const {
-    show: p = !1,
-    title: _,
-    subtitle: q,
-    className: K,
+    show: u = !1,
+    title: q,
+    subtitle: K,
+    className: X,
     defaultColumnOrder: h = [],
-    defaultHiddenColumns: m = [],
-    columnOrder: D = [],
-    hiddenColumns: b = [],
-    columnLabels: X = {},
-    disabledColumns: k = [],
-    columnsDetails: d = {},
-    autoLabel: z = "",
-    applyButtonText: G,
-    cancelButtonText: J,
-    closeButtonText: Q,
-    resetButtonText: Y,
-    onColumnChange: f = g,
-    onColumnDetailsChange: M = g,
-    onDiscard: Z = g,
-    // onCancel = noop,
-    onApply: $ = g,
-    onHide: S,
+    defaultHiddenColumns: C = [],
+    defaultColumnDetails: w = {},
+    columnOrder: b = [],
+    hiddenColumns: S = [],
+    columnLabels: z = {},
+    disabledColumns: G = [],
+    columnsDetails: O = {},
+    autoLabel: Q = "",
+    applyButtonText: Y,
+    cancelButtonText: Z,
+    closeButtonText: $,
+    resetButtonText: ee,
+    onColumnChange: g = p,
+    onColumnDetailsChange: _ = p,
+    onDiscard: te = p,
+    onApply: ne = p,
+    onHide: x,
     columnSearchValue: T = "",
-    onSearchChange: x = g,
-    searchPlaceholder: ee,
-    notFoundMessage: te = "",
-    immediateChange: u = !1
-  } = U, [L, O] = l(T), [i, w] = l(D), [r, H] = l(b || m), [o, v] = l(d), [A, ne] = l({}), [N, se] = l({}), [oe, le] = l(!0), [ae, C] = l(!1), [ie, W] = l(!1), [_e, R] = l(!1), I = Re(null);
-  Ie(() => {
-    O(T), w(D), H(b), p && ue();
-    const e = D ?? h, t = b ?? m, n = d ?? {}, s = !y(e, h) || !y(t, m) || E(n);
-    C(s);
+    onSearchChange: y = p,
+    searchPlaceholder: se,
+    notFoundMessage: oe = "",
+    immediateChange: m = !1
+  } = k, [L, W] = a(T), [d, v] = a(b), [c, H] = a(S || C), [r, N] = a(O), [B, le] = a({}), [V, ae] = a({}), [re, ie] = a(!0), [ue, f] = a(!1), [de, R] = a(!1), [Ue, F] = a(!1), I = A(null), M = A(w), j = A(u);
+  Fe(() => {
+    (u && !j.current || !u) && W(T), v(b), H(S), N(O), u && me();
+    const s = b ?? h, n = S ?? C, o = O ?? {}, l = !E(s, h) || !E(n, C) || ce(o);
+    f(l), j.current = u;
   }, [
     T,
-    D,
-    b,
-    d,
-    h,
-    m,
-    p
+    JSON.stringify(b),
+    JSON.stringify(S),
+    JSON.stringify(O),
+    JSON.stringify(h),
+    JSON.stringify(C),
+    u
   ]);
-  const E = (e) => j(e) ? !1 : Ae(e, (n) => {
-    const s = Number.isFinite(n.defaultWidth) ? n.defaultWidth : P;
-    return n.width !== s;
-  }), [re, de] = l(d);
-  if (!y(o, re)) {
-    const e = E(d);
-    v(e ? d : o), de(d);
-  }
-  const ue = () => {
+  const ce = (e) => {
+    const t = (n) => {
+      if (!n)
+        return D;
+      const { width: o, defaultWidth: l } = n;
+      return Number.isFinite(o) ? o : Number.isFinite(l) ? l : D;
+    }, s = (n) => Number.isFinite(n?.defaultWidth) ? n?.defaultWidth : D;
+    return J(M.current) ? Object.values(e).some(
+      (n) => t(n) !== s(n)
+    ) : Object.keys(M.current).some((n) => {
+      const o = M.current[n], l = e[n];
+      return t(l) !== t(o);
+    });
+  }, me = () => {
     if (!I.current)
       return;
     const e = I.current.getElementsByClassName("table-settings-item-label"), t = {};
-    [...e].forEach((n) => {
-      const s = n.getAttribute("data-key");
-      if (s) {
-        const c = n.textContent?.replace(/\r?\n|\r/g, "").toLowerCase();
-        c && (t[s] = c);
+    [...e].forEach((s) => {
+      const n = s.getAttribute("data-key");
+      if (n) {
+        const o = s.textContent?.replace(/\r?\n|\r/g, "").toLowerCase();
+        o && (t[n] = o);
       }
-    }), se(t), le(!1);
-  }, ce = () => {
-    R(!1);
-  }, me = (e, t, n) => {
-    const s = i.filter((c) => c !== e);
-    s.splice(t, 0, e), w(s), R(n ? !!e : !1), C(!0), u && f(s, r), window.setTimeout(ce, 500);
-  }, Ce = () => W(!0), he = () => W(!1), fe = (e) => Ne(e, (t) => ({
-    ...t,
-    width: t.defaultWidth || P
-  })), ge = () => {
-    const e = fe(o);
-    w(h), H(m), O(""), C(!1), W(!1), j(o) || v(e), u && (x(""), f(h, m, e));
-  }, pe = () => {
-    x(""), Z(), S();
-  }, De = () => {
-    O(""), x(""), f(i, r, o), $(i, r, o), S();
-  }, be = (e) => {
-    const n = r.includes(e) ? r.filter((s) => s !== e) : [...r, e];
-    H(n), C(!0), u && f(i, n);
-  }, Se = (e) => {
+    }), ae(t), ie(!1);
+  }, Ce = () => {
+    F(!1);
+  }, fe = (e, t, s) => {
+    const n = d.filter((o) => o !== e);
+    n.splice(t, 0, e), v(n), F(s ? !!e : !1), f(!0), m && g(n, c), setTimeout(Ce, 500);
+  }, he = () => R(!0), ge = () => R(!1), pe = (e) => J(w) ? Ie(e, (t) => {
+    if (Number.isFinite(t.defaultWidth)) {
+      const l = t.defaultWidth;
+      return { ...t, width: l };
+    }
+    const { width: s, defaultWidth: n, ...o } = t;
+    return o;
+  }) : w, De = () => {
+    const e = pe(r);
+    v(h), H(C), W(""), f(!1), R(!1), J(r) || N(e), m && (y(""), g(h, C, e));
+  }, be = () => {
+    y(""), te(), x();
+  }, Se = () => {
+    W(""), y(""), g(d, c, r), ne(d, c, r), x();
+  }, Oe = (e) => {
+    const s = c.includes(e) ? c.filter((n) => n !== e) : [...c, e];
+    H(s), f(!0), m && g(d, s);
+  }, xe = (e) => {
     const t = e.toLowerCase();
-    O(() => (x(t), t));
-  }, xe = (e, t) => {
-    o[e] ? o[e].width = t : o[e] = {
+    W(() => (y(t), t));
+  }, ye = (e, t) => {
+    const s = r[e], n = s ? { ...s, width: t } : {
       width: t,
-      defaultWidth: 0,
-      maxWidth: Ue
-    }, v(o), C(!0), u && M(e, o[e]);
-  }, Oe = (e) => {
-    const t = o[e];
-    t.width = t.defaultWidth, v(o), u && M(e, o[e]);
-  }, we = (e) => {
-    const t = { ...A };
-    t[e] ? delete t[e] : t[e] = e, ne(t);
-  }, ve = (e, t) => {
-    const { active: n, over: s } = e, c = n.id, F = s?.id;
-    if (c === F)
+      defaultWidth: D,
+      maxWidth: je
+    }, o = { ...r, [e]: n };
+    N(o), f(!0), m && _(e, n);
+  }, We = (e) => {
+    const t = r[e];
+    if (!t)
+      return;
+    const s = {
+      ...t,
+      width: t.defaultWidth ?? D
+    }, n = { ...r, [e]: s };
+    N(n), m && _(e, s);
+  }, ve = (e) => {
+    const t = { ...B };
+    t[e] ? delete t[e] : t[e] = e, le(t);
+  }, Ne = (e, t) => {
+    const { active: s, over: n } = e, o = s.id, l = n?.id;
+    if (o === l)
       return;
-    const He = t.indexOf(String(c)), We = t.indexOf(String(F)), B = Ee(t, He, We);
-    w(B), R(!0), C(!0), u && f(B, r);
-  }, ye = () => {
+    const He = t.indexOf(String(o)), Re = t.indexOf(String(l)), U = Me(t, He, Re);
+    v(U), F(!0), f(!0), m && g(U, c);
+  }, we = () => {
     const e = {
-      columnLabels: X,
-      autoLabel: z,
-      disabledColumns: k,
-      columnOrder: i,
-      hiddenColumns: r,
+      columnLabels: z,
+      autoLabel: Q,
+      disabledColumns: G,
+      columnOrder: d,
+      hiddenColumns: c,
       columnSearchValue: L,
-      columnsDetails: o,
-      columnLabelStrings: N,
-      openColumnsDetails: A,
-      updateColumnLabelStrings: oe,
-      onMoveColumn: me,
-      onOpenDetails: we,
-      onColumnWidthChange: xe,
-      onResetColumnWidth: Oe,
-      onToggleHideColumn: be
-    }, t = i.filter(
-      (s) => Pe(L, s, N)
-    ), n = !y(t, i);
-    return /* @__PURE__ */ V("div", { ref: I, children: [
-      /* @__PURE__ */ a("div", { className: "table-settings-search", children: /* @__PURE__ */ V("div", { className: "input-group width-100pct", children: [
-        /* @__PURE__ */ a("span", { className: "input-group-addon", children: /* @__PURE__ */ a("span", { className: "rioglyph rioglyph-search" }) }),
-        /* @__PURE__ */ a(
-          Be,
+      columnsDetails: r,
+      columnLabelStrings: V,
+      openColumnsDetails: B,
+      updateColumnLabelStrings: re,
+      onMoveColumn: fe,
+      onOpenDetails: ve,
+      onColumnWidthChange: ye,
+      onResetColumnWidth: We,
+      onToggleHideColumn: Oe
+    }, t = d.filter(
+      (n) => Ve(L, n, V)
+    ), s = !E(t, d);
+    return /* @__PURE__ */ P("div", { ref: I, children: [
+      /* @__PURE__ */ i("div", { className: "table-settings-search", children: /* @__PURE__ */ P("div", { className: "input-group width-100pct", children: [
+        /* @__PURE__ */ i("span", { className: "input-group-addon", children: /* @__PURE__ */ i("span", { className: "rioglyph rioglyph-search" }) }),
+        /* @__PURE__ */ i(
+          Je,
           {
             value: L,
-            onChange: Se,
-            placeholder: ee
+            onChange: xe,
+            placeholder: se
           }
         )
       ] }) }),
-      /* @__PURE__ */ a("div", { className: "table-settings-body", children: n ? /* @__PURE__ */ a(
-        je,
+      /* @__PURE__ */ i("div", { className: "table-settings-body", children: s ? /* @__PURE__ */ i(
+        Be,
         {
-          items: i,
-          onSortEnd: ve,
+          items: d,
+          onSortEnd: Ne,
           itemProps: { ...e }
         }
-      ) : /* @__PURE__ */ a("div", { className: "text-center text-color-gray", children: te }) })
+      ) : /* @__PURE__ */ i("div", { className: "text-center text-color-gray", children: oe }) })
     ] });
-  }, Te = () => /* @__PURE__ */ a(
-    Ve,
+  }, Te = () => /* @__PURE__ */ i(
+    _e,
     {
-      hasChanged: ae,
-      isResetAll: ie,
-      immediateChange: u,
-      resetButtonText: Y,
-      closeButtonText: Q,
-      cancelButtonText: J,
-      applyButtonText: G,
-      onHide: S,
-      onResetColumnChanges: Ce,
-      onDiscardChanges: pe,
-      onApplyChanges: De,
-      onConfirmResetColumnChanges: ge,
-      onCancelResetColumnChanges: he
+      hasChanged: ue,
+      isResetAll: de,
+      immediateChange: m,
+      resetButtonText: ee,
+      closeButtonText: $,
+      cancelButtonText: Z,
+      applyButtonText: Y,
+      onHide: x,
+      onResetColumnChanges: he,
+      onDiscardChanges: be,
+      onApplyChanges: Se,
+      onConfirmResetColumnChanges: De,
+      onCancelResetColumnChanges: ge
     }
   );
-  if (!p)
+  if (!u)
     return null;
-  const Le = Me("TableSettingsDialog", K);
-  return /* @__PURE__ */ a(
-    Fe,
+  const Le = Ae("TableSettingsDialog", X);
+  return /* @__PURE__ */ i(
+    Ee,
     {
-      show: p,
-      title: _,
-      subtitle: q,
-      onClose: S,
-      body: ye(),
+      show: u,
+      title: q,
+      subtitle: K,
+      onClose: x,
+      body: we(),
       footer: Te(),
       className: Le
     }