@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/table/native/TableSettingsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsDialog.js","sources":["../../../../src/components/table/native/TableSettingsDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useRef } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport classNames from '../../../utils/classNames';\nimport Dialog from '../../dialog/Dialog';\nimport ClearableInput from '../../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport type TableColumnDetails = {\n    /**\n     * Defined the current width of a column.\n     *\n     * @default 0\n     */\n    width?: number;\n\n    /**\n     * Defined the default width of a column which will be used when resetting to default.\n     *\n     * @default 0\n     */\n    defaultWidth?: number;\n\n    /**\n     * Defined the maximum width of a column.\n     *\n     * @default 1000\n     */\n    maxWidth?: number;\n};\n\nexport type TableColumnsSettings = {\n    columnOrder: string[];\n    hiddenColumns: string[];\n    columnsDetails: TableColumnDetailsMap;\n};\n\nexport type TableColumnDetailsMap = Record<string, TableColumnDetails>;\nexport type ColumnLabelStrings = Record<string, string>;\n\nexport type TableSettingsItemProps = {\n    columnLabels?: Record<string, React.ReactNode>;\n    autoLabel?: string | React.ReactNode;\n    disabledColumns?: string[];\n    columnOrder: string[];\n    hiddenColumns?: string[];\n    columnSearchValue: string;\n    columnsDetails: TableColumnDetailsMap;\n    columnLabelStrings?: ColumnLabelStrings;\n    openColumnsDetails?: Record<string, string>;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;\n    onToggleHideColumn?: (column: string) => void;\n};\n\nexport type TableSettingsDialogProps = {\n    /**\n     * Defined whether to show the dialog or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The title for the dialog header.\n     */\n    title: React.ReactNode;\n\n    /**\n     * The subtitle for the dialog header.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * List of column names in default order. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultColumnOrder: string[];\n\n    /**\n     * List of hidden columns that are hidden by default. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultHiddenColumns?: string[];\n\n    /**\n     * Initial default configuration for the each columns with regards to column width.\n     * Used to reset to this state when the configuration differs.\n     *\n     * @default {}\n     */\n    defaultColumnDetails?: TableColumnDetailsMap;\n\n    /**\n     * List of column names in current order. The \"columnOrder\" will be returned when the order changes.\n     *\n     * @default []\n     */\n    columnOrder: string[];\n\n    /**\n     * List of column names which are currently hidden. The \"hiddenColumns\n     * will be returned when the order changes.\n     *\n     * @default []\n     */\n    hiddenColumns?: string[];\n\n    /**\n     * List of column labels which will be shown in the table header. These labels are usually\n     * translated labels that can be set as FormattedMessage components for instance.\n     *\n     * The object key is the column name and the object value is the translated message.\n     *\n     * @default {}\n     * @example\n     * { name: <FormattedMessage id='name' /> }\n     */\n    columnLabels: { [name: string]: React.ReactNode };\n\n    /**\n     * Hide a sorted column will result in an error, so disable at least one important fallback column\n     * or the sorted column (fallback column recommended)\n     */\n    disabledColumns: string[];\n\n    /**\n     * Optional object of detail properties to be shown in the details section of the respective\n     * column item. If the prop is not given, the width sections won't be rendered.\n     * The keys of this object are the column names / keys you use to identify a column.\n     */\n    columnsDetails?: TableColumnDetailsMap;\n\n    /**\n     * The label shown when the column width is unset, which means \"auto\".\n     *\n     * @default ''\n     */\n    autoLabel?: string | React.ReactNode;\n\n    /**\n     * Text for the \"apply\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    applyButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"cancel\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"close\" button. This button will only be shown when\n     * `immediateChange` is enabled.\n     */\n    closeButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"reset to default\" button.\n     */\n    resetButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the column order or visibility changes.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnChange?: (columnOrder: string[], hiddenColumns: string[], columnsDetails?: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when a single column details like width changes.\n     *\n     * @param column\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnDetailsChange?: (column: string, columnsDetails: TableColumnDetails) => void;\n\n    /**\n     * Callback function for when the changes are discarded and the dialog should close.\n     * Will not be triggered when `immediateChange` is enabled.\n     *\n     * @returns\n     */\n    onDiscard?: () => void;\n\n    /**\n     * Callback function for when the final changes should be applied and the dialog should close.\n     * Will not be triggered when `immediateChange `is enabled.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onApply?: (columnOrder: string[], hiddenColumns: string[], columnsDetails: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when dialog should close.\n     *\n     * @returns\n     */\n    onHide: () => void;\n\n    /**\n     * Search value which should be set for the search field when the dialog opens.\n     */\n    columnSearchValue?: string;\n\n    /**\n     * Callback function for when the search value changes.\n     *\n     * @param value\n     * @returns\n     */\n    onSearchChange?: (value: string) => void;\n\n    /**\n     * Placeholder text for the search input.\n     */\n    searchPlaceholder: React.ReactNode;\n\n    /**\n     * Message that should be shown when column search result is empty.\n     */\n    notFoundMessage?: string;\n\n    /**\n     * Defines whether or not all changes apply immediately. If so, no cancel and apply buttons are shown.\n     * Enable this if you want to update the table after each change. Be aware of having side effects when\n     * toggling columns where data need to be fetched from the backend.\n     *\n     * @default false\n     */\n    immediateChange?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableSettingsDialog = (props: TableSettingsDialogProps) => {\n    const {\n        show = false,\n        title,\n        subtitle,\n        className,\n        defaultColumnOrder = [],\n        defaultHiddenColumns = [],\n        defaultColumnDetails = {},\n        columnOrder: extColumnOrder = [],\n        hiddenColumns: extHiddenColumns = [],\n        columnLabels = {},\n        disabledColumns = [],\n        columnsDetails: extColumnsDetails = {},\n        autoLabel = '',\n        applyButtonText,\n        cancelButtonText,\n        closeButtonText,\n        resetButtonText,\n        onColumnChange = noop,\n        onColumnDetailsChange = noop,\n        onDiscard = noop,\n        onApply = noop,\n        onHide,\n        columnSearchValue: extColumnSearchValue = '',\n        onSearchChange = noop,\n        searchPlaceholder,\n        notFoundMessage = '',\n        immediateChange = false,\n    } = props;\n\n    const [columnSearchValue, setColumnSearchValue] = useState(extColumnSearchValue);\n    const [columnOrder, setColumnOrder] = useState(extColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState(extHiddenColumns || defaultHiddenColumns);\n\n    const [columnsDetails, setColumnsDetails] = useState(extColumnsDetails);\n    const [openColumnsDetails, setOpenColumnsDetails] = useState<Record<string, string>>({});\n\n    const [columnLabelStrings, setColumnLabelStrings] = useState<ColumnLabelStrings>({});\n\n    // Dirty flag for offering to reset changes or to discard them\n    const [hasChanged, setHasChanged] = useState(false);\n    const [isResetAll, setIsResetAll] = useState(false);\n\n    const [movedColumn, setMovedColumn] = useState(false);\n\n    const defaultColumnDetailsRef = useRef(defaultColumnDetails);\n    const previousShowRef = useRef(show);\n\n    // Update items from outside\n    useEffect(() => {\n        const hasJustOpened = show && !previousShowRef.current;\n        const isClosed = !show;\n\n        if (hasJustOpened || isClosed) {\n            setColumnSearchValue(extColumnSearchValue);\n        }\n\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\n        setColumnsDetails(extColumnsDetails);\n\n        const externalColumnOrder = extColumnOrder ?? defaultColumnOrder;\n        const externalHiddenColumns = extHiddenColumns ?? defaultHiddenColumns;\n        const externalColumnsDetails = extColumnsDetails ?? {};\n\n        const hasChangesFromDefaults =\n            !isEqual(externalColumnOrder, defaultColumnOrder) ||\n            !isEqual(externalHiddenColumns, defaultHiddenColumns) ||\n            hasColumnsDetailsChanged(externalColumnsDetails);\n        setHasChanged(hasChangesFromDefaults);\n\n        previousShowRef.current = show;\n    }, [\n        extColumnSearchValue,\n        JSON.stringify(extColumnOrder),\n        JSON.stringify(extHiddenColumns),\n        JSON.stringify(extColumnsDetails),\n        JSON.stringify(defaultColumnOrder),\n        JSON.stringify(defaultHiddenColumns),\n        show,\n    ]);\n\n    const hasColumnsDetailsChanged = (columnsDetailsToCheck: TableColumnDetailsMap) => {\n        const getEffectiveWidth = (details: TableColumnDetails | undefined) => {\n            if (!details) {\n                return DEFAULT_COLUMN_WIDTH;\n            }\n            const { width, defaultWidth } = details;\n            if (Number.isFinite(width)) {\n                return width as number;\n            }\n            if (Number.isFinite(defaultWidth)) {\n                return defaultWidth as number;\n            }\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        const getFallbackDefaultWidth = (details: TableColumnDetails | undefined) => {\n            if (Number.isFinite(details?.defaultWidth)) {\n                return details?.defaultWidth as number;\n            }\n\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        if (isEmpty(defaultColumnDetailsRef.current)) {\n            return Object.values(columnsDetailsToCheck).some(\n                details => getEffectiveWidth(details) !== getFallbackDefaultWidth(details)\n            );\n        }\n\n        return Object.keys(defaultColumnDetailsRef.current).some(key => {\n            const baseline = defaultColumnDetailsRef.current[key];\n            const current = columnsDetailsToCheck[key];\n            return getEffectiveWidth(current) !== getEffectiveWidth(baseline);\n        });\n    };\n\n    const deleteMovedColumn = () => {\n        setMovedColumn(false);\n    };\n\n    const moveColumnToIndex = (columnName: string, newIndex: number, changeMovedColumn: boolean) => {\n        const newColumnOrder = columnOrder.filter(name => name !== columnName);\n        newColumnOrder.splice(newIndex, 0, columnName);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(changeMovedColumn ? !!columnName : false);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n\n        setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        // If explicit defaults were provided, return them to keep shape identical to the baseline.\n        if (!isEmpty(defaultColumnDetails)) {\n            return defaultColumnDetails;\n        }\n\n        // Fallback: derive sparse defaults like before\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            if (Number.isFinite(singleColumnDetails.defaultWidth)) {\n                const defaultWidth = singleColumnDetails.defaultWidth as number;\n                return { ...singleColumnDetails, width: defaultWidth };\n            }\n\n            const { width: _ignoredWidth, defaultWidth: _ignoredDefaultWidth, ...rest } = singleColumnDetails;\n            return rest;\n        });\n    };\n\n    const resetAllColumnChanges = () => {\n        const defaultColumnsDetails = resetColumnsDetails(columnsDetails);\n\n        setColumnOrder(defaultColumnOrder);\n        setHiddenColumns(defaultHiddenColumns);\n        setColumnSearchValue('');\n        setHasChanged(false);\n        setIsResetAll(false);\n\n        if (!isEmpty(columnsDetails)) {\n            setColumnsDetails(defaultColumnsDetails);\n        }\n\n        if (immediateChange) {\n            onSearchChange('');\n            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);\n        }\n    };\n\n    const discardColumnChanges = () => {\n        onSearchChange('');\n        // onCancel();\n        onDiscard();\n        onHide();\n    };\n\n    const handleManuallyApplyChanges = () => {\n        setColumnSearchValue('');\n\n        onSearchChange('');\n        onColumnChange(columnOrder, hiddenColumns, columnsDetails);\n        onApply(columnOrder, hiddenColumns, columnsDetails);\n        onHide();\n    };\n\n    const toggleHideColumn = (column: string) => {\n        const isHidden = hiddenColumns.includes(column);\n        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];\n\n        setHiddenColumns(newHiddenColumns);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(columnOrder, newHiddenColumns);\n        }\n    };\n\n    const handleSearchChange = (searchValue: string) => {\n        const newSearch = searchValue.toLowerCase();\n\n        setColumnSearchValue(() => {\n            onSearchChange(newSearch);\n            return newSearch;\n        });\n    };\n\n    const handleColumnWidthChange = (column: keyof TableColumnDetailsMap, value: number) => {\n        const previousColumnDetails = columnsDetails[column];\n        const updatedColumnDetails = previousColumnDetails\n            ? { ...previousColumnDetails, width: value }\n            : {\n                  width: value,\n                  defaultWidth: DEFAULT_COLUMN_WIDTH,\n                  maxWidth: MAX_COLUMN_WIDTH,\n              };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const previousColumnDetails = columnsDetails[column];\n        if (!previousColumnDetails) {\n            return;\n        }\n\n        const updatedColumnDetails = {\n            ...previousColumnDetails,\n            width: previousColumnDetails.defaultWidth ?? DEFAULT_COLUMN_WIDTH,\n        };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleOpenColumnsDetails = (columnName: keyof TableColumnDetailsMap) => {\n        const updatedOpenColumnDetails = { ...openColumnsDetails };\n\n        if (updatedOpenColumnDetails[columnName]) {\n            delete updatedOpenColumnDetails[columnName];\n        } else {\n            updatedOpenColumnDetails[columnName] = columnName;\n        }\n\n        setOpenColumnsDetails(updatedOpenColumnDetails);\n    };\n\n    const handleSortEnd = (event: DragEndEvent, previousOrder: string[]) => {\n        const { active, over } = event;\n\n        const activeId = active.id;\n        const overId = over?.id;\n\n        if (activeId === overId) {\n            return;\n        }\n\n        const oldIndex = previousOrder.indexOf(String(activeId));\n        const newIndex = previousOrder.indexOf(String(overId));\n\n        const newColumnOrder = arrayMove(previousOrder, oldIndex, newIndex);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(true);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n    };\n\n    const renderTableSettingsDialogContent = () => {\n        const itemProps = {\n            columnLabels,\n            autoLabel,\n            disabledColumns,\n            columnOrder,\n            hiddenColumns,\n            columnSearchValue,\n            columnsDetails,\n            columnLabelStrings,\n            openColumnsDetails,\n            onMoveColumn: moveColumnToIndex,\n            onOpenDetails: handleOpenColumnsDetails,\n            onColumnWidthChange: handleColumnWidthChange,\n            onResetColumnWidth: handleResetColumnWidth,\n            onToggleHideColumn: toggleHideColumn,\n        };\n\n        const filteredColumns = columnOrder.filter(column =>\n            filterColumns(columnSearchValue, column, columnLabelStrings)\n        );\n\n        const hasItems = !isEqual(filteredColumns, columnOrder);\n\n        return (\n            <div>\n                <div className='table-settings-search'>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' />\n                        </span>\n                        <ClearableInput\n                            value={columnSearchValue}\n                            onChange={handleSearchChange}\n                            placeholder={searchPlaceholder}\n                        />\n                    </div>\n                </div>\n                <div className='table-settings-body'>\n                    {hasItems ? (\n                        <TableSettingsListContainer\n                            items={columnOrder}\n                            onSortEnd={handleSortEnd}\n                            itemProps={{ ...itemProps }}\n                        />\n                    ) : (\n                        <div className='text-center text-color-gray'>{notFoundMessage}</div>\n                    )}\n                </div>\n            </div>\n        );\n    };\n\n    const renderTableSettingsDialogFooter = () => (\n        <TableSettingsDialogFooter\n            hasChanged={hasChanged}\n            isResetAll={isResetAll}\n            immediateChange={immediateChange}\n            resetButtonText={resetButtonText}\n            closeButtonText={closeButtonText}\n            cancelButtonText={cancelButtonText}\n            applyButtonText={applyButtonText}\n            onHide={onHide}\n            onResetColumnChanges={handleResetColumnChanges}\n            onDiscardChanges={discardColumnChanges}\n            onApplyChanges={handleManuallyApplyChanges}\n            onConfirmResetColumnChanges={resetAllColumnChanges}\n            onCancelResetColumnChanges={handleCancelResetColumnChanges}\n        />\n    );\n\n    if (!show) {\n        return null;\n    }\n\n    const dialogClassNames = classNames('TableSettingsDialog', className);\n\n    return (\n        <>\n            {show && (\n                <RenderedLabelStringsProvider columnLabels={columnLabels} setRenderedLabels={setColumnLabelStrings} />\n            )}\n            <Dialog\n                show={show}\n                title={title}\n                subtitle={subtitle}\n                onClose={onHide}\n                body={renderTableSettingsDialogContent()}\n                footer={renderTableSettingsDialogFooter()}\n                className={dialogClassNames}\n            />\n        </>\n    );\n};\n\n// For searching by name we need to get the label from the DOM as it may contain a\n// FormattedMessage. We need to unconditionally render all label elements to get their\n// text content from the DOM. Otherwise, the search won't work for an external provided\n// search term.\nconst RenderedLabelStringsProvider = ({\n    columnLabels,\n    setRenderedLabels,\n}: {\n    columnLabels: Record<string, React.ReactNode>;\n    setRenderedLabels: (getNewValue: (previous: Record<string, string>) => Record<string, string>) => void;\n}) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        const columnStrings: { [key: string]: string } = {};\n        [...contentRef.current.children].forEach(label => {\n            const dataKey = label.getAttribute('data-key');\n            if (dataKey) {\n                const updatedLabel = label.textContent?.replace(/\\r?\\n|\\r/g, '').toLowerCase();\n                if (updatedLabel) {\n                    columnStrings[dataKey] = updatedLabel;\n                }\n            }\n        });\n\n        // We can not rely on the dependency array of the useEffect hook, because the inputs are ReactNode\n        // instances which are objects without a stable reference. To avoid too many re-renders due to irrelevant\n        // changes, the code below performs a deep equality check and keeps a stable object reference if there is\n        // no difference in the output.\n        setRenderedLabels(previous => (isEqual(previous, columnStrings) ? previous : columnStrings));\n    });\n\n    return (\n        <div hidden ref={contentRef}>\n            {Object.entries(columnLabels).map(([column, node]) => (\n                <div key={column} data-key={column}>\n                    {node}\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport default TableSettingsDialog;\n"],"names":["DEFAULT_COLUMN_WIDTH","MAX_COLUMN_WIDTH","TableSettingsDialog","props","show","title","subtitle","className","defaultColumnOrder","defaultHiddenColumns","defaultColumnDetails","extColumnOrder","extHiddenColumns","columnLabels","disabledColumns","extColumnsDetails","autoLabel","applyButtonText","cancelButtonText","closeButtonText","resetButtonText","onColumnChange","noop","onColumnDetailsChange","onDiscard","onApply","onHide","extColumnSearchValue","onSearchChange","searchPlaceholder","notFoundMessage","immediateChange","columnSearchValue","setColumnSearchValue","useState","columnOrder","setColumnOrder","hiddenColumns","setHiddenColumns","columnsDetails","setColumnsDetails","openColumnsDetails","setOpenColumnsDetails","columnLabelStrings","setColumnLabelStrings","hasChanged","setHasChanged","isResetAll","setIsResetAll","movedColumn","setMovedColumn","defaultColumnDetailsRef","useRef","previousShowRef","useEffect","externalColumnOrder","externalHiddenColumns","externalColumnsDetails","hasChangesFromDefaults","isEqual","hasColumnsDetailsChanged","columnsDetailsToCheck","getEffectiveWidth","details","width","defaultWidth","getFallbackDefaultWidth","isEmpty","key","baseline","current","deleteMovedColumn","moveColumnToIndex","columnName","newIndex","changeMovedColumn","newColumnOrder","name","handleResetColumnChanges","handleCancelResetColumnChanges","resetColumnsDetails","mapValues","singleColumnDetails","_ignoredWidth","_ignoredDefaultWidth","rest","resetAllColumnChanges","defaultColumnsDetails","discardColumnChanges","handleManuallyApplyChanges","toggleHideColumn","column","newHiddenColumns","handleSearchChange","searchValue","newSearch","handleColumnWidthChange","value","previousColumnDetails","updatedColumnDetails","updatedColumnsDetails","handleResetColumnWidth","handleOpenColumnsDetails","updatedOpenColumnDetails","handleSortEnd","event","previousOrder","active","over","activeId","overId","oldIndex","arrayMove","renderTableSettingsDialogContent","itemProps","filteredColumns","filterColumns","hasItems","jsx","jsxs","ClearableInput","TableSettingsListContainer","renderTableSettingsDialogFooter","TableSettingsDialogFooter","dialogClassNames","classNames","Fragment","RenderedLabelStringsProvider","Dialog","setRenderedLabels","contentRef","columnStrings","label","dataKey","updatedLabel","previous","node"],"mappings":"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"}
+{"version":3,"file":"TableSettingsDialog.js","names":[],"sources":["../../../../src/components/table/native/TableSettingsDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, useEffect, useRef } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\nimport { isEmpty, mapValues } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\nimport classNames from '../../../utils/classNames';\nimport Dialog from '../../dialog/Dialog';\nimport ClearableInput from '../../clearableInput/ClearableInput';\nimport { TableSettingsDialogFooter } from './TableSettingsDialogFooter';\nimport { TableSettingsListContainer } from './TableSettingsListContainer';\nimport { filterColumns } from './TableSettingsListItem';\n\nconst DEFAULT_COLUMN_WIDTH = 0;\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport type TableColumnDetails = {\n    /**\n     * Defined the current width of a column.\n     *\n     * @default 0\n     */\n    width?: number;\n\n    /**\n     * Defined the default width of a column which will be used when resetting to default.\n     *\n     * @default 0\n     */\n    defaultWidth?: number;\n\n    /**\n     * Defined the maximum width of a column.\n     *\n     * @default 1000\n     */\n    maxWidth?: number;\n};\n\nexport type TableColumnsSettings = {\n    columnOrder: string[];\n    hiddenColumns: string[];\n    columnsDetails: TableColumnDetailsMap;\n};\n\nexport type TableColumnDetailsMap = Record<string, TableColumnDetails>;\nexport type ColumnLabelStrings = Record<string, string>;\n\nexport type TableSettingsItemProps = {\n    columnLabels?: Record<string, React.ReactNode>;\n    autoLabel?: string | React.ReactNode;\n    disabledColumns?: string[];\n    columnOrder: string[];\n    hiddenColumns?: string[];\n    columnSearchValue: string;\n    columnsDetails: TableColumnDetailsMap;\n    columnLabelStrings?: ColumnLabelStrings;\n    openColumnsDetails?: Record<string, string>;\n    onColumnWidthChange?: (column: keyof TableColumnDetailsMap, value: number) => void;\n    onResetColumnWidth?: (column: keyof TableColumnDetailsMap) => void;\n    onMoveColumn?: (columnName: string, newIndex: number, changeMovedColumn: boolean) => void;\n    onOpenDetails?: (columnName: keyof TableColumnDetailsMap) => void;\n    onToggleHideColumn?: (column: string) => void;\n};\n\nexport type TableSettingsDialogProps = {\n    /**\n     * Defined whether to show the dialog or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * The title for the dialog header.\n     */\n    title: React.ReactNode;\n\n    /**\n     * The subtitle for the dialog header.\n     */\n    subtitle?: React.ReactNode;\n\n    /**\n     * List of column names in default order. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultColumnOrder: string[];\n\n    /**\n     * List of hidden columns that are hidden by default. This will be used for resetting changes.\n     *\n     * @default []\n     */\n    defaultHiddenColumns?: string[];\n\n    /**\n     * Initial default configuration for the each columns with regards to column width.\n     * Used to reset to this state when the configuration differs.\n     *\n     * @default {}\n     */\n    defaultColumnDetails?: TableColumnDetailsMap;\n\n    /**\n     * List of column names in current order. The \"columnOrder\" will be returned when the order changes.\n     *\n     * @default []\n     */\n    columnOrder: string[];\n\n    /**\n     * List of column names which are currently hidden. The \"hiddenColumns\n     * will be returned when the order changes.\n     *\n     * @default []\n     */\n    hiddenColumns?: string[];\n\n    /**\n     * List of column labels which will be shown in the table header. These labels are usually\n     * translated labels that can be set as FormattedMessage components for instance.\n     *\n     * The object key is the column name and the object value is the translated message.\n     *\n     * @default {}\n     * @example\n     * { name: <FormattedMessage id='name' /> }\n     */\n    columnLabels: { [name: string]: React.ReactNode };\n\n    /**\n     * Hide a sorted column will result in an error, so disable at least one important fallback column\n     * or the sorted column (fallback column recommended)\n     */\n    disabledColumns: string[];\n\n    /**\n     * Optional object of detail properties to be shown in the details section of the respective\n     * column item. If the prop is not given, the width sections won't be rendered.\n     * The keys of this object are the column names / keys you use to identify a column.\n     */\n    columnsDetails?: TableColumnDetailsMap;\n\n    /**\n     * The label shown when the column width is unset, which means \"auto\".\n     *\n     * @default ''\n     */\n    autoLabel?: string | React.ReactNode;\n\n    /**\n     * Text for the \"apply\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    applyButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"cancel\" button. This button will not be shown when\n     * `immediateChange` is enabled.\n     */\n    cancelButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"close\" button. This button will only be shown when\n     * `immediateChange` is enabled.\n     */\n    closeButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the \"reset to default\" button.\n     */\n    resetButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the column order or visibility changes.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnChange?: (columnOrder: string[], hiddenColumns: string[], columnsDetails?: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when a single column details like width changes.\n     *\n     * @param column\n     * @param columnsDetails\n     * @returns\n     */\n    onColumnDetailsChange?: (column: string, columnsDetails: TableColumnDetails) => void;\n\n    /**\n     * Callback function for when the changes are discarded and the dialog should close.\n     * Will not be triggered when `immediateChange` is enabled.\n     *\n     * @returns\n     */\n    onDiscard?: () => void;\n\n    /**\n     * Callback function for when the final changes should be applied and the dialog should close.\n     * Will not be triggered when `immediateChange `is enabled.\n     *\n     * @param columnOrder\n     * @param hiddenColumns\n     * @param columnsDetails\n     * @returns\n     */\n    onApply?: (columnOrder: string[], hiddenColumns: string[], columnsDetails: TableColumnDetailsMap) => void;\n\n    /**\n     * Callback function for when dialog should close.\n     *\n     * @returns\n     */\n    onHide: () => void;\n\n    /**\n     * Search value which should be set for the search field when the dialog opens.\n     */\n    columnSearchValue?: string;\n\n    /**\n     * Callback function for when the search value changes.\n     *\n     * @param value\n     * @returns\n     */\n    onSearchChange?: (value: string) => void;\n\n    /**\n     * Placeholder text for the search input.\n     */\n    searchPlaceholder: React.ReactNode;\n\n    /**\n     * Message that should be shown when column search result is empty.\n     */\n    notFoundMessage?: string;\n\n    /**\n     * Defines whether or not all changes apply immediately. If so, no cancel and apply buttons are shown.\n     * Enable this if you want to update the table after each change. Be aware of having side effects when\n     * toggling columns where data need to be fetched from the backend.\n     *\n     * @default false\n     */\n    immediateChange?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableSettingsDialog = (props: TableSettingsDialogProps) => {\n    const {\n        show = false,\n        title,\n        subtitle,\n        className,\n        defaultColumnOrder = [],\n        defaultHiddenColumns = [],\n        defaultColumnDetails = {},\n        columnOrder: extColumnOrder = [],\n        hiddenColumns: extHiddenColumns = [],\n        columnLabels = {},\n        disabledColumns = [],\n        columnsDetails: extColumnsDetails = {},\n        autoLabel = '',\n        applyButtonText,\n        cancelButtonText,\n        closeButtonText,\n        resetButtonText,\n        onColumnChange = noop,\n        onColumnDetailsChange = noop,\n        onDiscard = noop,\n        onApply = noop,\n        onHide,\n        columnSearchValue: extColumnSearchValue = '',\n        onSearchChange = noop,\n        searchPlaceholder,\n        notFoundMessage = '',\n        immediateChange = false,\n    } = props;\n\n    const [columnSearchValue, setColumnSearchValue] = useState(extColumnSearchValue);\n    const [columnOrder, setColumnOrder] = useState(extColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState(extHiddenColumns || defaultHiddenColumns);\n\n    const [columnsDetails, setColumnsDetails] = useState(extColumnsDetails);\n    const [openColumnsDetails, setOpenColumnsDetails] = useState<Record<string, string>>({});\n\n    const [columnLabelStrings, setColumnLabelStrings] = useState<ColumnLabelStrings>({});\n\n    // Dirty flag for offering to reset changes or to discard them\n    const [hasChanged, setHasChanged] = useState(false);\n    const [isResetAll, setIsResetAll] = useState(false);\n\n    const [movedColumn, setMovedColumn] = useState(false);\n\n    const defaultColumnDetailsRef = useRef(defaultColumnDetails);\n    const previousShowRef = useRef(show);\n\n    // Update items from outside\n    useEffect(() => {\n        const hasJustOpened = show && !previousShowRef.current;\n        const isClosed = !show;\n\n        if (hasJustOpened || isClosed) {\n            setColumnSearchValue(extColumnSearchValue);\n        }\n\n        setColumnOrder(extColumnOrder);\n        setHiddenColumns(extHiddenColumns);\n        setColumnsDetails(extColumnsDetails);\n\n        const externalColumnOrder = extColumnOrder ?? defaultColumnOrder;\n        const externalHiddenColumns = extHiddenColumns ?? defaultHiddenColumns;\n        const externalColumnsDetails = extColumnsDetails ?? {};\n\n        const hasChangesFromDefaults =\n            !isEqual(externalColumnOrder, defaultColumnOrder) ||\n            !isEqual(externalHiddenColumns, defaultHiddenColumns) ||\n            hasColumnsDetailsChanged(externalColumnsDetails);\n        setHasChanged(hasChangesFromDefaults);\n\n        previousShowRef.current = show;\n    }, [\n        extColumnSearchValue,\n        JSON.stringify(extColumnOrder),\n        JSON.stringify(extHiddenColumns),\n        JSON.stringify(extColumnsDetails),\n        JSON.stringify(defaultColumnOrder),\n        JSON.stringify(defaultHiddenColumns),\n        show,\n    ]);\n\n    const hasColumnsDetailsChanged = (columnsDetailsToCheck: TableColumnDetailsMap) => {\n        const getEffectiveWidth = (details: TableColumnDetails | undefined) => {\n            if (!details) {\n                return DEFAULT_COLUMN_WIDTH;\n            }\n            const { width, defaultWidth } = details;\n            if (Number.isFinite(width)) {\n                return width as number;\n            }\n            if (Number.isFinite(defaultWidth)) {\n                return defaultWidth as number;\n            }\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        const getFallbackDefaultWidth = (details: TableColumnDetails | undefined) => {\n            if (Number.isFinite(details?.defaultWidth)) {\n                return details?.defaultWidth as number;\n            }\n\n            return DEFAULT_COLUMN_WIDTH;\n        };\n\n        if (isEmpty(defaultColumnDetailsRef.current)) {\n            return Object.values(columnsDetailsToCheck).some(\n                details => getEffectiveWidth(details) !== getFallbackDefaultWidth(details)\n            );\n        }\n\n        return Object.keys(defaultColumnDetailsRef.current).some(key => {\n            const baseline = defaultColumnDetailsRef.current[key];\n            const current = columnsDetailsToCheck[key];\n            return getEffectiveWidth(current) !== getEffectiveWidth(baseline);\n        });\n    };\n\n    const deleteMovedColumn = () => {\n        setMovedColumn(false);\n    };\n\n    const moveColumnToIndex = (columnName: string, newIndex: number, changeMovedColumn: boolean) => {\n        const newColumnOrder = columnOrder.filter(name => name !== columnName);\n        newColumnOrder.splice(newIndex, 0, columnName);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(changeMovedColumn ? !!columnName : false);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n\n        setTimeout(deleteMovedColumn, 500);\n    };\n\n    const handleResetColumnChanges = () => setIsResetAll(true);\n    const handleCancelResetColumnChanges = () => setIsResetAll(false);\n\n    const resetColumnsDetails = (details: TableColumnDetailsMap) => {\n        // If explicit defaults were provided, return them to keep shape identical to the baseline.\n        if (!isEmpty(defaultColumnDetails)) {\n            return defaultColumnDetails;\n        }\n\n        // Fallback: derive sparse defaults like before\n        return mapValues(details, (singleColumnDetails: TableColumnDetails) => {\n            if (Number.isFinite(singleColumnDetails.defaultWidth)) {\n                const defaultWidth = singleColumnDetails.defaultWidth as number;\n                return { ...singleColumnDetails, width: defaultWidth };\n            }\n\n            const { width: _ignoredWidth, defaultWidth: _ignoredDefaultWidth, ...rest } = singleColumnDetails;\n            return rest;\n        });\n    };\n\n    const resetAllColumnChanges = () => {\n        const defaultColumnsDetails = resetColumnsDetails(columnsDetails);\n\n        setColumnOrder(defaultColumnOrder);\n        setHiddenColumns(defaultHiddenColumns);\n        setColumnSearchValue('');\n        setHasChanged(false);\n        setIsResetAll(false);\n\n        if (!isEmpty(columnsDetails)) {\n            setColumnsDetails(defaultColumnsDetails);\n        }\n\n        if (immediateChange) {\n            onSearchChange('');\n            onColumnChange(defaultColumnOrder, defaultHiddenColumns, defaultColumnsDetails);\n        }\n    };\n\n    const discardColumnChanges = () => {\n        onSearchChange('');\n        // onCancel();\n        onDiscard();\n        onHide();\n    };\n\n    const handleManuallyApplyChanges = () => {\n        setColumnSearchValue('');\n\n        onSearchChange('');\n        onColumnChange(columnOrder, hiddenColumns, columnsDetails);\n        onApply(columnOrder, hiddenColumns, columnsDetails);\n        onHide();\n    };\n\n    const toggleHideColumn = (column: string) => {\n        const isHidden = hiddenColumns.includes(column);\n        const newHiddenColumns = isHidden ? hiddenColumns.filter(name => name !== column) : [...hiddenColumns, column];\n\n        setHiddenColumns(newHiddenColumns);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(columnOrder, newHiddenColumns);\n        }\n    };\n\n    const handleSearchChange = (searchValue: string) => {\n        const newSearch = searchValue.toLowerCase();\n\n        setColumnSearchValue(() => {\n            onSearchChange(newSearch);\n            return newSearch;\n        });\n    };\n\n    const handleColumnWidthChange = (column: keyof TableColumnDetailsMap, value: number) => {\n        const previousColumnDetails = columnsDetails[column];\n        const updatedColumnDetails = previousColumnDetails\n            ? { ...previousColumnDetails, width: value }\n            : {\n                  width: value,\n                  defaultWidth: DEFAULT_COLUMN_WIDTH,\n                  maxWidth: MAX_COLUMN_WIDTH,\n              };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleResetColumnWidth = (column: keyof TableColumnDetailsMap) => {\n        const previousColumnDetails = columnsDetails[column];\n        if (!previousColumnDetails) {\n            return;\n        }\n\n        const updatedColumnDetails = {\n            ...previousColumnDetails,\n            width: previousColumnDetails.defaultWidth ?? DEFAULT_COLUMN_WIDTH,\n        };\n        const updatedColumnsDetails = { ...columnsDetails, [column]: updatedColumnDetails };\n\n        setColumnsDetails(updatedColumnsDetails);\n\n        if (immediateChange) {\n            onColumnDetailsChange(column, updatedColumnDetails);\n        }\n    };\n\n    const handleOpenColumnsDetails = (columnName: keyof TableColumnDetailsMap) => {\n        const updatedOpenColumnDetails = { ...openColumnsDetails };\n\n        if (updatedOpenColumnDetails[columnName]) {\n            delete updatedOpenColumnDetails[columnName];\n        } else {\n            updatedOpenColumnDetails[columnName] = columnName;\n        }\n\n        setOpenColumnsDetails(updatedOpenColumnDetails);\n    };\n\n    const handleSortEnd = (event: DragEndEvent, previousOrder: string[]) => {\n        const { active, over } = event;\n\n        const activeId = active.id;\n        const overId = over?.id;\n\n        if (activeId === overId) {\n            return;\n        }\n\n        const oldIndex = previousOrder.indexOf(String(activeId));\n        const newIndex = previousOrder.indexOf(String(overId));\n\n        const newColumnOrder = arrayMove(previousOrder, oldIndex, newIndex);\n\n        setColumnOrder(newColumnOrder);\n        setMovedColumn(true);\n        setHasChanged(true);\n\n        if (immediateChange) {\n            onColumnChange(newColumnOrder, hiddenColumns);\n        }\n    };\n\n    const renderTableSettingsDialogContent = () => {\n        const itemProps = {\n            columnLabels,\n            autoLabel,\n            disabledColumns,\n            columnOrder,\n            hiddenColumns,\n            columnSearchValue,\n            columnsDetails,\n            columnLabelStrings,\n            openColumnsDetails,\n            onMoveColumn: moveColumnToIndex,\n            onOpenDetails: handleOpenColumnsDetails,\n            onColumnWidthChange: handleColumnWidthChange,\n            onResetColumnWidth: handleResetColumnWidth,\n            onToggleHideColumn: toggleHideColumn,\n        };\n\n        const filteredColumns = columnOrder.filter(column =>\n            filterColumns(columnSearchValue, column, columnLabelStrings)\n        );\n\n        const hasItems = !isEqual(filteredColumns, columnOrder);\n\n        return (\n            <div>\n                <div className='table-settings-search'>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='uikit-icon icon-search' />\n                        </span>\n                        <ClearableInput\n                            value={columnSearchValue}\n                            onChange={handleSearchChange}\n                            placeholder={searchPlaceholder}\n                        />\n                    </div>\n                </div>\n                <div className='table-settings-body'>\n                    {hasItems ? (\n                        <TableSettingsListContainer\n                            items={columnOrder}\n                            onSortEnd={handleSortEnd}\n                            itemProps={{ ...itemProps }}\n                        />\n                    ) : (\n                        <div className='text-center text-color-gray'>{notFoundMessage}</div>\n                    )}\n                </div>\n            </div>\n        );\n    };\n\n    const renderTableSettingsDialogFooter = () => (\n        <TableSettingsDialogFooter\n            hasChanged={hasChanged}\n            isResetAll={isResetAll}\n            immediateChange={immediateChange}\n            resetButtonText={resetButtonText}\n            closeButtonText={closeButtonText}\n            cancelButtonText={cancelButtonText}\n            applyButtonText={applyButtonText}\n            onHide={onHide}\n            onResetColumnChanges={handleResetColumnChanges}\n            onDiscardChanges={discardColumnChanges}\n            onApplyChanges={handleManuallyApplyChanges}\n            onConfirmResetColumnChanges={resetAllColumnChanges}\n            onCancelResetColumnChanges={handleCancelResetColumnChanges}\n        />\n    );\n\n    if (!show) {\n        return null;\n    }\n\n    const dialogClassNames = classNames('TableSettingsDialog', className);\n\n    return (\n        <>\n            {show && (\n                <RenderedLabelStringsProvider columnLabels={columnLabels} setRenderedLabels={setColumnLabelStrings} />\n            )}\n            <Dialog\n                show={show}\n                title={title}\n                subtitle={subtitle}\n                onClose={onHide}\n                body={renderTableSettingsDialogContent()}\n                footer={renderTableSettingsDialogFooter()}\n                className={dialogClassNames}\n            />\n        </>\n    );\n};\n\n// For searching by name we need to get the label from the DOM as it may contain a\n// FormattedMessage. We need to unconditionally render all label elements to get their\n// text content from the DOM. Otherwise, the search won't work for an external provided\n// search term.\nconst RenderedLabelStringsProvider = ({\n    columnLabels,\n    setRenderedLabels,\n}: {\n    columnLabels: Record<string, React.ReactNode>;\n    setRenderedLabels: (getNewValue: (previous: Record<string, string>) => Record<string, string>) => void;\n}) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        const columnStrings: { [key: string]: string } = {};\n        [...contentRef.current.children].forEach(label => {\n            const dataKey = label.getAttribute('data-key');\n            if (dataKey) {\n                const updatedLabel = label.textContent?.replace(/\\r?\\n|\\r/g, '').toLowerCase();\n                if (updatedLabel) {\n                    columnStrings[dataKey] = updatedLabel;\n                }\n            }\n        });\n\n        // We can not rely on the dependency array of the useEffect hook, because the inputs are ReactNode\n        // instances which are objects without a stable reference. To avoid too many re-renders due to irrelevant\n        // changes, the code below performs a deep equality check and keeps a stable object reference if there is\n        // no difference in the output.\n        setRenderedLabels(previous => (isEqual(previous, columnStrings) ? previous : columnStrings));\n    });\n\n    return (\n        <div hidden ref={contentRef}>\n            {Object.entries(columnLabels).map(([column, node]) => (\n                <div key={column} data-key={column}>\n                    {node}\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport default TableSettingsDialog;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,IAAuB,GACvB,KAAmB,KAoPnB,KAAuB,MAAoC;CAC7D,IAAM,EACF,UAAO,IACP,WACA,aACA,cACA,wBAAqB,CAAC,GACtB,0BAAuB,CAAC,GACxB,0BAAuB,CAAC,GACxB,aAAa,IAAiB,CAAC,GAC/B,eAAe,IAAmB,CAAC,GACnC,kBAAe,CAAC,GAChB,sBAAkB,CAAC,GACnB,gBAAgB,IAAoB,CAAC,GACrC,eAAY,IACZ,oBACA,qBACA,oBACA,oBACA,oBAAiB,GACjB,2BAAwB,GACxB,gBAAY,GACZ,cAAU,GACV,WACA,mBAAmB,IAAuB,IAC1C,oBAAiB,GACjB,uBACA,sBAAkB,IAClB,qBAAkB,OAClB,GAEE,CAAC,GAAmB,KAAwB,EAAS,CAAoB,GACzE,CAAC,GAAa,KAAkB,EAAS,CAAc,GACvD,CAAC,GAAe,KAAoB,EAAS,KAAoB,CAAoB,GAErF,CAAC,GAAgB,KAAqB,EAAS,CAAiB,GAChE,CAAC,GAAoB,MAAyB,EAAiC,CAAC,CAAC,GAEjF,CAAC,GAAoB,MAAyB,EAA6B,CAAC,CAAC,GAG7E,CAAC,IAAY,KAAiB,EAAS,EAAK,GAC5C,CAAC,IAAY,KAAiB,EAAS,EAAK,GAE5C,CAAC,IAAa,KAAkB,EAAS,EAAK,GAE9C,IAA0B,EAAO,CAAoB,GACrD,IAAkB,EAAO,CAAI;CAGnC,QAAgB;EAUZ,CATsB,KAAQ,CAAC,EAAgB,WAG1B,CAFH,MAGd,EAAqB,CAAoB,GAG7C,EAAe,CAAc,GAC7B,EAAiB,CAAgB,GACjC,EAAkB,CAAiB;EAEnC,IAAM,IAAsB,KAAkB,GACxC,IAAwB,KAAoB,GAC5C,IAAyB,KAAqB,CAAC,GAE/C,IACF,CAAC,EAAQ,GAAqB,CAAkB,KAChD,CAAC,EAAQ,GAAuB,CAAoB,KACpD,GAAyB,CAAsB;EAGnD,AAFA,EAAc,CAAsB,GAEpC,EAAgB,UAAU;CAC9B,GAAG;EACC;EACA,KAAK,UAAU,CAAc;EAC7B,KAAK,UAAU,CAAgB;EAC/B,KAAK,UAAU,CAAiB;EAChC,KAAK,UAAU,CAAkB;EACjC,KAAK,UAAU,CAAoB;EACnC;CACJ,CAAC;CAED,IAAM,MAA4B,MAAiD;EAC/E,IAAM,KAAqB,MAA4C;GACnE,IAAI,CAAC,GACD,OAAO;GAEX,IAAM,EAAE,UAAO,oBAAiB;GAOhC,OANI,OAAO,SAAS,CAAK,IACd,IAEP,OAAO,SAAS,CAAY,IACrB,IAEJ;EACX,GAEM,KAA2B,MACzB,OAAO,SAAS,GAAS,YAAY,IAC9B,GAAS,eAGb;EASX,OANI,EAAQ,EAAwB,OAAO,IAChC,OAAO,OAAO,CAAqB,CAAC,CAAC,MACxC,MAAW,EAAkB,CAAO,MAAM,EAAwB,CAAO,CAC7E,IAGG,OAAO,KAAK,EAAwB,OAAO,CAAC,CAAC,MAAK,MAAO;GAC5D,IAAM,IAAW,EAAwB,QAAQ,IAC3C,IAAU,EAAsB;GACtC,OAAO,EAAkB,CAAO,MAAM,EAAkB,CAAQ;EACpE,CAAC;CACL,GAEM,WAA0B;EAC5B,EAAe,EAAK;CACxB,GAEM,MAAqB,GAAoB,GAAkB,MAA+B;EAC5F,IAAM,IAAiB,EAAY,QAAO,MAAQ,MAAS,CAAU;EAWrE,AAVA,EAAe,OAAO,GAAU,GAAG,CAAU,GAE7C,EAAe,CAAc,GAC7B,EAAe,IAAoB,CAAC,CAAC,IAAa,EAAK,GACvD,EAAc,EAAI,GAEd,KACA,EAAe,GAAgB,CAAa,GAGhD,WAAW,IAAmB,GAAG;CACrC,GAEM,WAAiC,EAAc,EAAI,GACnD,WAAuC,EAAc,EAAK,GAE1D,MAAuB,MAEpB,EAAQ,CAAoB,IAK1B,GAAU,IAAU,MAA4C;EACnE,IAAI,OAAO,SAAS,EAAoB,YAAY,GAAG;GACnD,IAAM,IAAe,EAAoB;GACzC,OAAO;IAAE,GAAG;IAAqB,OAAO;GAAa;EACzD;EAEA,IAAM,EAAE,OAAO,GAAe,cAAc,GAAsB,GAAG,MAAS;EAC9E,OAAO;CACX,CAAC,IAZU,GAeT,WAA8B;EAChC,IAAM,IAAwB,GAAoB,CAAc;EAYhE,AAVA,EAAe,CAAkB,GACjC,EAAiB,CAAoB,GACrC,EAAqB,EAAE,GACvB,EAAc,EAAK,GACnB,EAAc,EAAK,GAEd,EAAQ,CAAc,KACvB,EAAkB,CAAqB,GAGvC,MACA,EAAe,EAAE,GACjB,EAAe,GAAoB,GAAsB,CAAqB;CAEtF,GAEM,WAA6B;EAI/B,AAHA,EAAe,EAAE,GAEjB,GAAU,GACV,EAAO;CACX,GAEM,WAAmC;EAMrC,AALA,EAAqB,EAAE,GAEvB,EAAe,EAAE,GACjB,EAAe,GAAa,GAAe,CAAc,GACzD,GAAQ,GAAa,GAAe,CAAc,GAClD,EAAO;CACX,GAEM,MAAoB,MAAmB;EAEzC,IAAM,IADW,EAAc,SAAS,CACf,IAAW,EAAc,QAAO,MAAQ,MAAS,CAAM,IAAI,CAAC,GAAG,GAAe,CAAM;EAK7G,AAHA,EAAiB,CAAgB,GACjC,EAAc,EAAI,GAEd,KACA,EAAe,GAAa,CAAgB;CAEpD,GAEM,MAAsB,MAAwB;EAChD,IAAM,IAAY,EAAY,YAAY;EAE1C,SACI,EAAe,CAAS,GACjB,EACV;CACL,GAEM,KAA2B,GAAqC,MAAkB;EACpF,IAAM,IAAwB,EAAe,IACvC,IAAuB,IACvB;GAAE,GAAG;GAAuB,OAAO;EAAM,IACzC;GACI,OAAO;GACP,cAAc;GACd,UAAU;EACd,GACA,IAAwB;GAAE,GAAG;IAAiB,IAAS;EAAqB;EAKlF,AAHA,EAAkB,CAAqB,GACvC,EAAc,EAAI,GAEd,KACA,EAAsB,GAAQ,CAAoB;CAE1D,GAEM,MAA0B,MAAwC;EACpE,IAAM,IAAwB,EAAe;EAC7C,IAAI,CAAC,GACD;EAGJ,IAAM,IAAuB;GACzB,GAAG;GACH,OAAO,EAAsB,gBAAgB;EACjD,GACM,IAAwB;GAAE,GAAG;IAAiB,IAAS;EAAqB;EAIlF,AAFA,EAAkB,CAAqB,GAEnC,KACA,EAAsB,GAAQ,CAAoB;CAE1D,GAEM,MAA4B,MAA4C;EAC1E,IAAM,IAA2B,EAAE,GAAG,EAAmB;EAQzD,AANI,EAAyB,KACzB,OAAO,EAAyB,KAEhC,EAAyB,KAAc,GAG3C,GAAsB,CAAwB;CAClD,GAEM,MAAiB,GAAqB,MAA4B;EACpE,IAAM,EAAE,WAAQ,YAAS,GAEnB,IAAW,EAAO,IAClB,IAAS,GAAM;EAErB,IAAI,MAAa,GACb;EAMJ,IAAM,IAAiB,EAAU,GAHhB,EAAc,QAAQ,OAAO,CAAQ,CAGN,GAF/B,EAAc,QAAQ,OAAO,CAAM,CAEM,CAAQ;EAMlE,AAJA,EAAe,CAAc,GAC7B,EAAe,EAAI,GACnB,EAAc,EAAI,GAEd,KACA,EAAe,GAAgB,CAAa;CAEpD,GAEM,WAAyC;EAC3C,IAAM,IAAY;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACd,eAAe;GACf,qBAAqB;GACrB,oBAAoB;GACpB,oBAAoB;EACxB,GAMM,IAAW,CAAC,EAJM,EAAY,QAAO,MACvC,EAAc,GAAmB,GAAQ,CAAkB,CAGrC,GAAiB,CAAW;EAEtD,OACI,kBAAC,OAAD,EAAA,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;aACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,QAAD;KAAM,WAAU;eACZ,kBAAC,QAAD,EAAM,WAAU,yBAA0B,CAAA;IACxC,CAAA,GACN,kBAAC,GAAD;KACI,OAAO;KACP,UAAU;KACV,aAAa;IAChB,CAAA,CACA;;EACJ,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;aACV,IACG,kBAAC,GAAD;IACI,OAAO;IACP,WAAW;IACX,WAAW,EAAE,GAAG,EAAU;GAC7B,CAAA,IAED,kBAAC,OAAD;IAAK,WAAU;cAA+B;GAAqB,CAAA;EAEtE,CAAA,CACJ,EAAA,CAAA;CAEb,GAEM,WACF,kBAAC,GAAD;EACgB;EACA;EACK;EACA;EACA;EACC;EACD;EACT;EACR,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;EAChB,6BAA6B;EAC7B,4BAA4B;CAC/B,CAAA;CAGL,IAAI,CAAC,GACD,OAAO;CAGX,IAAM,KAAmB,EAAW,uBAAuB,CAAS;CAEpE,OACI,kBAAA,IAAA,EAAA,UAAA,CACK,KACG,kBAAC,IAAD;EAA4C;EAAc,mBAAmB;CAAwB,CAAA,GAEzG,kBAAC,GAAD;EACU;EACC;EACG;EACV,SAAS;EACT,MAAM,GAAiC;EACvC,QAAQ,GAAgC;EACxC,WAAW;CACd,CAAA,CACH,EAAA,CAAA;AAEV,GAMM,MAAgC,EAClC,iBACA,2BAIE;CACF,IAAM,IAAa,EAAuB,IAAI;CAyB9C,OAvBA,QAAgB;EACZ,IAAI,CAAC,EAAW,SACZ;EAGJ,IAAM,IAA2C,CAAC;EAelD,AAdA,CAAC,GAAG,EAAW,QAAQ,QAAQ,CAAC,CAAC,SAAQ,MAAS;GAC9C,IAAM,IAAU,EAAM,aAAa,UAAU;GAC7C,IAAI,GAAS;IACT,IAAM,IAAe,EAAM,aAAa,QAAQ,aAAa,EAAE,CAAC,CAAC,YAAY;IAC7E,AAAI,MACA,EAAc,KAAW;GAEjC;EACJ,CAAC,GAMD,GAAkB,MAAa,EAAQ,GAAU,CAAa,IAAI,IAAW,CAAc;CAC/F,CAAC,GAGG,kBAAC,OAAD;EAAK,QAAA;EAAO,KAAK;YACZ,OAAO,QAAQ,CAAY,CAAC,CAAC,KAAK,CAAC,GAAQ,OACxC,kBAAC,OAAD;GAAkB,YAAU;aACvB;EACA,GAFK,CAEL,CACR;CACA,CAAA;AAEb"}

package/components/table/native/TableSettingsDialogFooter.js

@@ -1,56 +1,46 @@
-import { jsxs as t, jsx as n } from "react/jsx-runtime";
-import y from "../../../utils/classNames.js";
-import e from "../../button/Button.js";
-const R = (l) => {
-  const {
-    hasChanged: i,
-    isResetAll: o,
-    immediateChange: s,
-    resetButtonText: a,
-    closeButtonText: r,
-    cancelButtonText: c,
-    applyButtonText: m,
-    onHide: h,
-    onResetColumnChanges: d,
-    onDiscardChanges: C,
-    onApplyChanges: g,
-    onConfirmResetColumnChanges: u,
-    onCancelResetColumnChanges: p
-  } = l, b = y("btn", "btn-default btn-link", !i && "disabled");
-  return /* @__PURE__ */ t("div", { className: "display-flex justify-content-between", children: [
-    /* @__PURE__ */ t("div", { children: [
-      !o && /* @__PURE__ */ t("div", { className: b, onClick: d, children: [
-        /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-revert text-size-xs margin-right-10" }),
-        a
-      ] }),
-      o && /* @__PURE__ */ t("div", { className: "btn-group", children: [
-        /* @__PURE__ */ n(
-          e,
-          {
-            iconOnly: !0,
-            iconName: "rioglyph-remove",
-            className: "margin-right-5 btn-outline",
-            onClick: p
-          }
-        ),
-        /* @__PURE__ */ n(
-          e,
-          {
-            iconOnly: !0,
-            bsStyle: e.PRIMARY,
-            iconName: "rioglyph-ok",
-            onClick: u
-          }
-        )
-      ] })
-    ] }),
-    s ? /* @__PURE__ */ n(e, { onClick: h, children: r }) : /* @__PURE__ */ t("div", { className: "btn-toolbar", children: [
-      /* @__PURE__ */ n(e, { onClick: C, children: c }),
-      /* @__PURE__ */ n(e, { bsStyle: e.PRIMARY, onClick: g, children: m })
-    ] })
-  ] });
+import e from "../../../utils/classNames.js";
+import t from "../../button/Button.js";
+import "../../../Button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/table/native/TableSettingsDialogFooter.tsx
+var i = (i) => {
+	let { hasChanged: a, isResetAll: o, immediateChange: s, resetButtonText: c, closeButtonText: l, cancelButtonText: u, applyButtonText: d, onHide: f, onResetColumnChanges: p, onDiscardChanges: m, onApplyChanges: h, onConfirmResetColumnChanges: g, onCancelResetColumnChanges: _ } = i, v = e("btn", "btn-default btn-link", !a && "disabled");
+	return /* @__PURE__ */ r("div", {
+		className: "display-flex justify-content-between",
+		children: [/* @__PURE__ */ r("div", { children: [!o && /* @__PURE__ */ r("div", {
+			className: v,
+			onClick: p,
+			children: [/* @__PURE__ */ n("span", { className: "uikit-icon icon-revert text-size-xs margin-right-10" }), c]
+		}), o && /* @__PURE__ */ r("div", {
+			className: "btn-group",
+			children: [/* @__PURE__ */ n(t, {
+				iconOnly: !0,
+				iconName: "icon-remove",
+				className: "margin-right-5 btn-outline",
+				onClick: _
+			}), /* @__PURE__ */ n(t, {
+				iconOnly: !0,
+				bsStyle: t.PRIMARY,
+				iconName: "icon-ok",
+				onClick: g
+			})]
+		})] }), s ? /* @__PURE__ */ n(t, {
+			onClick: f,
+			children: l
+		}) : /* @__PURE__ */ r("div", {
+			className: "btn-toolbar",
+			children: [/* @__PURE__ */ n(t, {
+				onClick: m,
+				children: u
+			}), /* @__PURE__ */ n(t, {
+				bsStyle: t.PRIMARY,
+				onClick: h,
+				children: d
+			})]
+		})]
+	});
 };
-export {
-  R as TableSettingsDialogFooter
-};
-//# sourceMappingURL=TableSettingsDialogFooter.js.map
+//#endregion
+export { i as TableSettingsDialogFooter };
+
+//# sourceMappingURL=TableSettingsDialogFooter.js.map

package/components/table/native/TableSettingsDialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsDialogFooter.js","sources":["../../../../src/components/table/native/TableSettingsDialogFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../../utils/classNames';\nimport Button from '../../../Button';\n\nexport type TableSettingsDialogFooterProps = {\n    hasChanged: boolean;\n    isResetAll: boolean;\n    immediateChange: boolean;\n    resetButtonText: string | ReactNode;\n    closeButtonText: string | ReactNode;\n    cancelButtonText: string | ReactNode;\n    applyButtonText: string | ReactNode;\n    onHide: () => void;\n    onResetColumnChanges: () => void;\n    onDiscardChanges: () => void;\n    onApplyChanges: () => void;\n    onConfirmResetColumnChanges: () => void;\n    onCancelResetColumnChanges: () => void;\n};\n\nexport const TableSettingsDialogFooter = (props: TableSettingsDialogFooterProps) => {\n    const {\n        hasChanged,\n        isResetAll,\n        immediateChange,\n        resetButtonText,\n        closeButtonText,\n        cancelButtonText,\n        applyButtonText,\n        onHide,\n        onResetColumnChanges,\n        onDiscardChanges,\n        onApplyChanges,\n        onConfirmResetColumnChanges,\n        onCancelResetColumnChanges,\n    } = props;\n\n    const restButtonClassNames = classNames('btn', 'btn-default btn-link', !hasChanged && 'disabled');\n\n    return (\n        <div className='display-flex justify-content-between'>\n            <div>\n                {!isResetAll && (\n                    <div className={restButtonClassNames} onClick={onResetColumnChanges}>\n                        <span className='rioglyph rioglyph-revert text-size-xs margin-right-10' />\n                        {resetButtonText}\n                    </div>\n                )}\n                {isResetAll && (\n                    <div className='btn-group'>\n                        <Button\n                            iconOnly\n                            iconName='rioglyph-remove'\n                            className='margin-right-5 btn-outline'\n                            onClick={onCancelResetColumnChanges}\n                        />\n                        <Button\n                            iconOnly\n                            bsStyle={Button.PRIMARY}\n                            iconName='rioglyph-ok'\n                            onClick={onConfirmResetColumnChanges}\n                        />\n                    </div>\n                )}\n            </div>\n            {immediateChange ? (\n                <Button onClick={onHide}>{closeButtonText}</Button>\n            ) : (\n                <div className='btn-toolbar'>\n                    <Button onClick={onDiscardChanges}>{cancelButtonText}</Button>\n                    <Button bsStyle={Button.PRIMARY} onClick={onApplyChanges}>\n                        {applyButtonText}\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["TableSettingsDialogFooter","props","hasChanged","isResetAll","immediateChange","resetButtonText","closeButtonText","cancelButtonText","applyButtonText","onHide","onResetColumnChanges","onDiscardChanges","onApplyChanges","onConfirmResetColumnChanges","onCancelResetColumnChanges","restButtonClassNames","classNames","jsxs","jsx","Button"],"mappings":";;;AAqBO,MAAMA,IAA4B,CAACC,MAA0C;AAChF,QAAM;AAAA,IACF,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,4BAAAC;AAAA,EAAA,IACAb,GAEEc,IAAuBC,EAAW,OAAO,wBAAwB,CAACd,KAAc,UAAU;AAEhG,SACI,gBAAAe,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EACI,UAAA;AAAA,MAAA,CAACd,KACE,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAAsB,SAASL,GAC3C,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,wDAAA,CAAwD;AAAA,QACvEb;AAAA,MAAA,GACL;AAAA,MAEHF,KACG,gBAAAc,EAAC,OAAA,EAAI,WAAU,aACX,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,UAAS;AAAA,YACT,WAAU;AAAA,YACV,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAQ;AAAA,YACR,SAASA,EAAO;AAAA,YAChB,UAAS;AAAA,YACT,SAASN;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACJ;AAAA,IAAA,GAER;AAAA,IACCT,IACG,gBAAAc,EAACC,GAAA,EAAO,SAASV,GAAS,aAAgB,IAE1C,gBAAAQ,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAO,SAASR,GAAmB,UAAAJ,GAAiB;AAAA,wBACpDY,GAAA,EAAO,SAASA,EAAO,SAAS,SAASP,GACrC,UAAAJ,EAAA,CACL;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsDialogFooter.js","names":[],"sources":["../../../../src/components/table/native/TableSettingsDialogFooter.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../../utils/classNames';\nimport Button from '../../../Button';\n\nexport type TableSettingsDialogFooterProps = {\n    hasChanged: boolean;\n    isResetAll: boolean;\n    immediateChange: boolean;\n    resetButtonText: string | ReactNode;\n    closeButtonText: string | ReactNode;\n    cancelButtonText: string | ReactNode;\n    applyButtonText: string | ReactNode;\n    onHide: () => void;\n    onResetColumnChanges: () => void;\n    onDiscardChanges: () => void;\n    onApplyChanges: () => void;\n    onConfirmResetColumnChanges: () => void;\n    onCancelResetColumnChanges: () => void;\n};\n\nexport const TableSettingsDialogFooter = (props: TableSettingsDialogFooterProps) => {\n    const {\n        hasChanged,\n        isResetAll,\n        immediateChange,\n        resetButtonText,\n        closeButtonText,\n        cancelButtonText,\n        applyButtonText,\n        onHide,\n        onResetColumnChanges,\n        onDiscardChanges,\n        onApplyChanges,\n        onConfirmResetColumnChanges,\n        onCancelResetColumnChanges,\n    } = props;\n\n    const restButtonClassNames = classNames('btn', 'btn-default btn-link', !hasChanged && 'disabled');\n\n    return (\n        <div className='display-flex justify-content-between'>\n            <div>\n                {!isResetAll && (\n                    <div className={restButtonClassNames} onClick={onResetColumnChanges}>\n                        <span className='uikit-icon icon-revert text-size-xs margin-right-10' />\n                        {resetButtonText}\n                    </div>\n                )}\n                {isResetAll && (\n                    <div className='btn-group'>\n                        <Button\n                            iconOnly\n                            iconName='icon-remove'\n                            className='margin-right-5 btn-outline'\n                            onClick={onCancelResetColumnChanges}\n                        />\n                        <Button\n                            iconOnly\n                            bsStyle={Button.PRIMARY}\n                            iconName='icon-ok'\n                            onClick={onConfirmResetColumnChanges}\n                        />\n                    </div>\n                )}\n            </div>\n            {immediateChange ? (\n                <Button onClick={onHide}>{closeButtonText}</Button>\n            ) : (\n                <div className='btn-toolbar'>\n                    <Button onClick={onDiscardChanges}>{cancelButtonText}</Button>\n                    <Button bsStyle={Button.PRIMARY} onClick={onApplyChanges}>\n                        {applyButtonText}\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":";;;;;AAqBA,IAAa,KAA6B,MAA0C;CAChF,IAAM,EACF,eACA,eACA,oBACA,oBACA,oBACA,qBACA,oBACA,WACA,yBACA,qBACA,mBACA,gCACA,kCACA,GAEE,IAAuB,EAAW,OAAO,wBAAwB,CAAC,KAAc,UAAU;CAEhG,OACI,kBAAC,OAAD;EAAK,WAAU;YAAf,CACI,kBAAC,OAAD,EAAA,UAAA,CACK,CAAC,KACE,kBAAC,OAAD;GAAK,WAAW;GAAsB,SAAS;aAA/C,CACI,kBAAC,QAAD,EAAM,WAAU,sDAAuD,CAAA,GACtE,CACA;MAER,KACG,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,GAAD;IACI,UAAA;IACA,UAAS;IACT,WAAU;IACV,SAAS;GACZ,CAAA,GACD,kBAAC,GAAD;IACI,UAAA;IACA,SAAS,EAAO;IAChB,UAAS;IACT,SAAS;GACZ,CAAA,CACA;IAER,EAAA,CAAA,GACJ,IACG,kBAAC,GAAD;GAAQ,SAAS;aAAS;EAAwB,CAAA,IAElD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,GAAD;IAAQ,SAAS;cAAmB;GAAyB,CAAA,GAC7D,kBAAC,GAAD;IAAQ,SAAS,EAAO;IAAS,SAAS;cACrC;GACG,CAAA,CACP;IAER;;AAEb"}

package/components/table/native/TableSettingsListContainer.js

@@ -1,41 +1,39 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useState as b, useCallback as p } from "react";
-import { useSensors as C, useSensor as n, PointerSensor as x, KeyboardSensor as D, DndContext as f, closestCenter as h } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as u, SortableContext as v, verticalListSortingStrategy as y } from "@dnd-kit/sortable";
-import { restrictToVerticalAxis as A } from "@dnd-kit/modifiers";
-import E from "./TableSettingsListItem.js";
-const j = (i) => {
-  const { items: o, itemProps: a, onSortEnd: l } = i, [r, s] = b(null), m = C(
-    n(x),
-    n(D, { coordinateGetter: u })
-  ), c = p((t) => {
-    s(t.active.id);
-  }, []), d = (t) => {
-    s(null), l(t, o);
-  }, g = "table-settings-item shadow-smooth-to-bottom z-index-max";
-  return /* @__PURE__ */ e("ol", { className: "table-settings-items-container padding-0 margin-0", children: /* @__PURE__ */ e(
-    f,
-    {
-      sensors: m,
-      collisionDetection: h,
-      modifiers: [A],
-      onDragStart: c,
-      onDragEnd: d,
-      children: /* @__PURE__ */ e(v, { items: o, strategy: y, children: o.map((t, S) => /* @__PURE__ */ e(
-        E,
-        {
-          column: t,
-          orderIndex: S,
-          isActive: r === t,
-          className: r === t ? g : "",
-          ...a
-        },
-        t
-      )) })
-    }
-  ) });
+import e from "./TableSettingsListItem.js";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { SortableContext as i, sortableKeyboardCoordinates as a, verticalListSortingStrategy as o } from "@dnd-kit/sortable";
+import { DndContext as s, KeyboardSensor as c, PointerSensor as l, closestCenter as u, useSensor as d, useSensors as f } from "@dnd-kit/core";
+import { restrictToVerticalAxis as p } from "@dnd-kit/modifiers";
+//#region src/components/table/native/TableSettingsListContainer.tsx
+var m = (m) => {
+	let { items: h, itemProps: g, onSortEnd: _ } = m, [v, y] = n(null), b = f(d(l), d(c, { coordinateGetter: a })), x = t((e) => {
+		y(e.active.id);
+	}, []);
+	return /* @__PURE__ */ r("ol", {
+		className: "table-settings-items-container padding-0 margin-0",
+		children: /* @__PURE__ */ r(s, {
+			sensors: b,
+			collisionDetection: u,
+			modifiers: [p],
+			onDragStart: x,
+			onDragEnd: (e) => {
+				y(null), _(e, h);
+			},
+			children: /* @__PURE__ */ r(i, {
+				items: h,
+				strategy: o,
+				children: h.map((t, n) => /* @__PURE__ */ r(e, {
+					column: t,
+					orderIndex: n,
+					isActive: v === t,
+					className: v === t ? "table-settings-item shadow-smooth-to-bottom z-index-max" : "",
+					...g
+				}, t))
+			})
+		})
+	});
 };
-export {
-  j as TableSettingsListContainer
-};
-//# sourceMappingURL=TableSettingsListContainer.js.map
+//#endregion
+export { m as TableSettingsListContainer };
+
+//# sourceMappingURL=TableSettingsListContainer.js.map

package/components/table/native/TableSettingsListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsListContainer.js","sources":["../../../../src/components/table/native/TableSettingsListContainer.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport {\n    closestCenter,\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\n\nimport TableSettingsListItem from './TableSettingsListItem';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nexport type TableSettingsListContainerProps = {\n    items: string[];\n    itemProps: TableSettingsItemProps;\n    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;\n};\n\nexport const TableSettingsListContainer = (props: TableSettingsListContainerProps) => {\n    const { items, itemProps, onSortEnd } = props;\n\n    const [activeDraggedColumn, setActiveDraggedColumn] = useState<UniqueIdentifier | null>(null);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const handleDragStart = useCallback((event: DragStartEvent) => {\n        setActiveDraggedColumn(event.active.id);\n    }, []);\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        setActiveDraggedColumn(null);\n        onSortEnd(event, items);\n    };\n\n    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';\n\n    return (\n        <ol className='table-settings-items-container padding-0 margin-0'>\n            <DndContext\n                sensors={sensors}\n                collisionDetection={closestCenter}\n                modifiers={[restrictToVerticalAxis]}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={items} strategy={verticalListSortingStrategy}>\n                    {items.map((column, index) => (\n                        <TableSettingsListItem\n                            key={column}\n                            column={column}\n                            orderIndex={index}\n                            isActive={activeDraggedColumn === column}\n                            className={activeDraggedColumn === column ? activeClass : ''}\n                            {...itemProps}\n                        />\n                    ))}\n                </SortableContext>\n            </DndContext>\n        </ol>\n    );\n};\n"],"names":["TableSettingsListContainer","props","items","itemProps","onSortEnd","activeDraggedColumn","setActiveDraggedColumn","useState","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragStart","useCallback","event","handleDragEnd","activeClass","jsx","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","verticalListSortingStrategy","column","index","TableSettingsListItem"],"mappings":";;;;;;AAwBO,MAAMA,IAA6B,CAACC,MAA2C;AAClF,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,EAAA,IAAcH,GAElC,CAACI,GAAqBC,CAAsB,IAAIC,EAAkC,IAAI,GAEtFC,IAAUC;AAAA,IACZC,EAAUC,CAAa;AAAA,IACvBD,EAAUE,GAAgB,EAAE,kBAAkBC,GAA6B;AAAA,EAAA,GAGzEC,IAAkBC,EAAY,CAACC,MAA0B;AAC3D,IAAAV,EAAuBU,EAAM,OAAO,EAAE;AAAA,EAC1C,GAAG,CAAA,CAAE,GAECC,IAAgB,CAACD,MAAwB;AAC3C,IAAAV,EAAuB,IAAI,GAC3BF,EAAUY,GAAOd,CAAK;AAAA,EAC1B,GAEMgB,IAAc;AAEpB,SACI,gBAAAC,EAAC,MAAA,EAAG,WAAU,qDACV,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAAAZ;AAAA,MACA,oBAAoBa;AAAA,MACpB,WAAW,CAACC,CAAsB;AAAA,MAClC,aAAaR;AAAA,MACb,WAAWG;AAAA,MAEX,UAAA,gBAAAE,EAACI,KAAgB,OAAArB,GAAc,UAAUsB,GACpC,UAAAtB,EAAM,IAAI,CAACuB,GAAQC,MAChB,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UAEG,QAAAF;AAAA,UACA,YAAYC;AAAA,UACZ,UAAUrB,MAAwBoB;AAAA,UAClC,WAAWpB,MAAwBoB,IAASP,IAAc;AAAA,UACzD,GAAGf;AAAA,QAAA;AAAA,QALCsB;AAAA,MAAA,CAOZ,EAAA,CACL;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableSettingsListContainer.js","names":[],"sources":["../../../../src/components/table/native/TableSettingsListContainer.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport {\n    closestCenter,\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\n\nimport TableSettingsListItem from './TableSettingsListItem';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nexport type TableSettingsListContainerProps = {\n    items: string[];\n    itemProps: TableSettingsItemProps;\n    onSortEnd: (event: DragEndEvent, previousOrder: string[]) => void;\n};\n\nexport const TableSettingsListContainer = (props: TableSettingsListContainerProps) => {\n    const { items, itemProps, onSortEnd } = props;\n\n    const [activeDraggedColumn, setActiveDraggedColumn] = useState<UniqueIdentifier | null>(null);\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const handleDragStart = useCallback((event: DragStartEvent) => {\n        setActiveDraggedColumn(event.active.id);\n    }, []);\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        setActiveDraggedColumn(null);\n        onSortEnd(event, items);\n    };\n\n    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';\n\n    return (\n        <ol className='table-settings-items-container padding-0 margin-0'>\n            <DndContext\n                sensors={sensors}\n                collisionDetection={closestCenter}\n                modifiers={[restrictToVerticalAxis]}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={items} strategy={verticalListSortingStrategy}>\n                    {items.map((column, index) => (\n                        <TableSettingsListItem\n                            key={column}\n                            column={column}\n                            orderIndex={index}\n                            isActive={activeDraggedColumn === column}\n                            className={activeDraggedColumn === column ? activeClass : ''}\n                            {...itemProps}\n                        />\n                    ))}\n                </SortableContext>\n            </DndContext>\n        </ol>\n    );\n};\n"],"mappings":";;;;;;;AAwBA,IAAa,KAA8B,MAA2C;CAClF,IAAM,EAAE,UAAO,cAAW,iBAAc,GAElC,CAAC,GAAqB,KAA0B,EAAkC,IAAI,GAEtF,IAAU,EACZ,EAAU,CAAa,GACvB,EAAU,GAAgB,EAAE,kBAAkB,EAA4B,CAAC,CAC/E,GAEM,IAAkB,GAAa,MAA0B;EAC3D,EAAuB,EAAM,OAAO,EAAE;CAC1C,GAAG,CAAC,CAAC;CASL,OACI,kBAAC,MAAD;EAAI,WAAU;YACV,kBAAC,GAAD;GACa;GACT,oBAAoB;GACpB,WAAW,CAAC,CAAsB;GAClC,aAAa;GACb,YAdW,MAAwB;IAE3C,AADA,EAAuB,IAAI,GAC3B,EAAU,GAAO,CAAK;GAC1B;aAaY,kBAAC,GAAD;IAAwB;IAAO,UAAU;cACpC,EAAM,KAAK,GAAQ,MAChB,kBAAC,GAAD;KAEY;KACR,YAAY;KACZ,UAAU,MAAwB;KAClC,WAAW,MAAwB,IAAS,4DAAc;KAC1D,GAAI;IACP,GANQ,CAMR,CACJ;GACY,CAAA;EACT,CAAA;CACZ,CAAA;AAEZ"}

package/components/table/native/TableSettingsListItem.js

@@ -1,100 +1,75 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useSortable as O } from "@dnd-kit/sortable";
-import { CSS as R } from "@dnd-kit/utilities";
-import { noop as $, isEmpty as j } from "es-toolkit/compat";
-import H from "../../../utils/classNames.js";
-import _ from "../../checkbox/Checkbox.js";
-import B from "../../collapse/Collapse.js";
-import { TableSettingsColumnDetails as E } from "./TableSettingsColumnDetails.js";
-import { TableSettingsColumnButtons as F } from "./TableSettingsColumnButtons.js";
-const P = 1e3, U = (o, e, l) => o ? !(l[e] || "").toLowerCase().includes(o.toLowerCase()) : !1, Z = (o) => {
-  const {
-    column: e,
-    orderIndex: l,
-    columnLabels: i,
-    autoLabel: d,
-    disabledColumns: c = [],
-    columnOrder: u,
-    hiddenColumns: p = [],
-    columnSearchValue: a,
-    columnsDetails: b,
-    columnLabelStrings: f = {},
-    openColumnsDetails: r = {},
-    onColumnWidthChange: C,
-    onResetColumnWidth: h,
-    onMoveColumn: g,
-    onOpenDetails: N,
-    onToggleHideColumn: x = $,
-    isActive: S = !1,
-    className: v
-  } = o, n = !j(a), { attributes: D, listeners: L, setNodeRef: T, setActivatorNodeRef: k, transform: w, transition: W } = O({
-    id: e,
-    disabled: n
-  }), y = {
-    transform: R.Transform.toString(w),
-    transition: W
-  }, A = U(a, e, f), I = H("table-settings-item", v), s = b[e];
-  return /* @__PURE__ */ m(
-    "li",
-    {
-      hidden: A,
-      className: I,
-      ref: T,
-      style: y,
-      children: [
-        /* @__PURE__ */ m("div", { className: "table-settings-item-header user-select-none", ref: k, children: [
-          /* @__PURE__ */ t("div", { className: "CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3", children: /* @__PURE__ */ t(
-            _,
-            {
-              checked: !p.includes(e),
-              onClick: (M) => {
-                x(e), M.stopPropagation();
-              },
-              disabled: c.includes(e)
-            }
-          ) }),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: `table-settings-item-label ${n ? "no-drag" : ""}`,
-              "data-key": e,
-              ...D,
-              ...L,
-              children: i?.[e]
-            }
-          ),
-          s && /* @__PURE__ */ t("div", { className: "column-width-label", children: s.width ? `${s.width}px` : d }),
-          /* @__PURE__ */ t(
-            F,
-            {
-              column: e,
-              index: l,
-              columnDetails: s,
-              columnOrder: u,
-              openColumnsDetails: r,
-              disabled: n,
-              onMoveColumn: g,
-              onOpenDetails: N
-            }
-          )
-        ] }),
-        s && !S && /* @__PURE__ */ t(B, { open: !!r[e], children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-          E,
-          {
-            ...s,
-            column: e,
-            maxColumnWidth: P,
-            onColumnWidthChange: C,
-            onResetColumnWidth: h
-          }
-        ) }) })
-      ]
-    },
-    `table-settings-item-${e}`
-  );
+import e from "../../../utils/classNames.js";
+import t from "../../checkbox/Checkbox.js";
+import n from "../../collapse/Collapse.js";
+import { TableSettingsColumnDetails as r } from "./TableSettingsColumnDetails.js";
+import { TableSettingsColumnButtons as i } from "./TableSettingsColumnButtons.js";
+import { isEmpty as a, noop as o } from "es-toolkit/compat";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useSortable as l } from "@dnd-kit/sortable";
+import { CSS as u } from "@dnd-kit/utilities";
+//#region src/components/table/native/TableSettingsListItem.tsx
+var d = 1e3, f = (e, t, n) => e ? !(n[t] || "").toLowerCase().includes(e.toLowerCase()) : !1, p = (p) => {
+	let { column: m, orderIndex: h, columnLabels: g, autoLabel: _, disabledColumns: v = [], columnOrder: y, hiddenColumns: b = [], columnSearchValue: x, columnsDetails: S, columnLabelStrings: C = {}, openColumnsDetails: w = {}, onColumnWidthChange: T, onResetColumnWidth: E, onMoveColumn: D, onOpenDetails: O, onToggleHideColumn: k = o, isActive: A = !1, className: j } = p, M = !a(x), { attributes: N, listeners: P, setNodeRef: F, setActivatorNodeRef: I, transform: L, transition: R } = l({
+		id: m,
+		disabled: M
+	}), z = {
+		transform: u.Transform.toString(L),
+		transition: R
+	}, B = f(x, m, C), V = e("table-settings-item", j), H = S[m];
+	return /* @__PURE__ */ c("li", {
+		hidden: B,
+		className: V,
+		ref: F,
+		style: z,
+		children: [/* @__PURE__ */ c("div", {
+			className: "table-settings-item-header user-select-none",
+			ref: I,
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: "CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3",
+					children: /* @__PURE__ */ s(t, {
+						checked: !b.includes(m),
+						onClick: (e) => {
+							k(m), e.stopPropagation();
+						},
+						disabled: v.includes(m)
+					})
+				}),
+				/* @__PURE__ */ s("div", {
+					className: `table-settings-item-label ${M ? "no-drag" : ""}`,
+					"data-key": m,
+					...N,
+					...P,
+					children: g?.[m]
+				}),
+				H && /* @__PURE__ */ s("div", {
+					className: "column-width-label",
+					children: H.width ? `${H.width}px` : _
+				}),
+				/* @__PURE__ */ s(i, {
+					column: m,
+					index: h,
+					columnDetails: H,
+					columnOrder: y,
+					openColumnsDetails: w,
+					disabled: M,
+					onMoveColumn: D,
+					onOpenDetails: O
+				})
+			]
+		}), H && !A && /* @__PURE__ */ s(n, {
+			open: !!w[m],
+			children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(r, {
+				...H,
+				column: m,
+				maxColumnWidth: d,
+				onColumnWidthChange: T,
+				onResetColumnWidth: E
+			}) })
+		})]
+	}, `table-settings-item-${m}`);
 };
-export {
-  Z as default,
-  U as filterColumns
-};
-//# sourceMappingURL=TableSettingsListItem.js.map
+//#endregion
+export { p as default, f as filterColumns };
+
+//# sourceMappingURL=TableSettingsListItem.js.map