@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
359 lines (358 loc) • 32.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import Input from '../../../../components/Input';
import { cn } from '../../../../lib/utils';
import { Card } from '../../../../components/Card';
import Radio, { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
import { ColumnTag, Tag } from '../../../../components/Tag';
import { CollapsibleWizardCard, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
import { ColumnPinningWizardCard, ColumnSizingWizardCard } from './columnLayoutCards';
import { ColumnSortingWizardCard } from './SortSection';
import { isValidOrderForColumnGroups, } from '../../../../AdaptableState/Common/AdaptableColumn';
import { useAdaptable } from '../../../AdaptableContext';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { columnFilter } from './Utilities';
import { Icon, NaturallySizedIcon } from '../../../../components/icons';
import { CheckBox } from '../../../../components/CheckBox';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
import { ReorderDraggable } from '../../../Components/ReorderDraggable';
import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../../../../Utilities/Constants/GeneralConstants';
import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
import { Box, Flex } from '../../../../components/Flex';
import { applyColumnPinChange, applyColumnSizingFieldChange, applyColumnSortChange, COLUMN_PINNING_OPTIONS, COLUMN_SORT_OPTIONS, getColumnSortSelection, getExplicitSizingDisplayValues, } from './columnLayoutHelpers';
import { getLayoutWizardInitialExpandedCardId, isColumnsSectionConfigured, } from './layoutWizardAccordionHelpers';
import { getLayoutWizardOrderedColumns, LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
import { getTableColumnsSummaryGroups, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS, } from '../../../../Strategy/Utilities/Layout/columnsSummaryHelpers';
import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
export const ColumnsSectionSummary = (props) => {
const adaptable = useAdaptable();
const { data: contextLayout } = useOnePageAdaptableWizardContext();
const layout = props.layout ?? contextLayout;
const groups = getTableColumnsSummaryGroups(layout, adaptable.api, TABLE_COLUMNS_WIZARD_SUBSECTION_LABELS);
return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3", children: groups.map(({ label, values, emptyLabel }) => (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: label }), values.length ? renderSummaryStringTags(values) : _jsx(Tag, { children: emptyLabel })] }, label))) }));
};
const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
const isColumnVisible = (options) => {
const { columnId, layout } = options;
const isRowGroupColumn = isAutoRowGroupColumn(columnId);
const visible = (!isPivotLayout(layout) &&
layout.TableColumns.includes(columnId) &&
layout.ColumnVisibility?.[columnId] !== false) ||
isRowGroupColumn ||
isSelectionColumn(columnId);
return visible;
};
const ColumnRow = (props) => {
const adaptable = useAdaptable();
const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
const isRowGroupColumn = isAutoRowGroupColumn(props.column.columnId);
const isSelectionCol = isSelectionColumn(props.column.columnId);
const { column } = props;
const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
return (_jsx(Box, { "data-name": props.column.columnId, className: "twa:flex-1", children: _jsxs(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:min-h-0", children: [_jsx(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
props.onColumnVisibilityChange(column.columnId, checked);
}, disabled: column.hideable === false || isRowGroupColumn || isSelectionCol, onClick: (event) => {
event.stopPropagation();
}, onFocus: () => {
props.onCheckboxFocus?.(column.columnId);
}, checked: visible }), _jsx(Flex, { className: "twa:mx-1.5 twa:text-3", alignItems: "center", "data-name": "column-label", children: initialHeader }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-1.5 twa:py-0 twa:px-1 twa:flex twa:items-center twa:text-3", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }) }));
};
export const ColumnsSection = (props) => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
const [searchInputValue, setSearchInputValue] = React.useState('');
const [selectedColumnId, setSelectedColumnId] = React.useState(null);
const hasSelectionColumn = adaptable.api.columnApi
.getColumns()
.some((col) => col.isGeneratedSelectionColumn);
const allColumns = adaptable.api.columnApi
.getUIAvailableColumns()
.filter((col) => {
return !col.isGeneratedRowGroupColumn;
})
.filter((col) => !col.isGeneratedPivotResultColumn)
.filter((col) => !col.isGeneratedSelectionColumn);
const onChange = (data) => {
if (hasSelectionColumn &&
Array.isArray(data.TableColumns) &&
!data.TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
data.TableColumns.unshift(AG_GRID_SELECTION_COLUMN);
}
props.onChange(data);
};
if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
if (layout.RowGroupDisplayType === 'single') {
allColumns.unshift(generateAutoRowGroupSingleColumn());
}
else if (layout.RowGroupDisplayType === 'multi') {
[...layout.RowGroupedColumns].reverse().forEach((col) => {
const groupCol = generateAutoRowGroupColumnForColumn(adaptable.api.columnApi.getColumnWithColumnId(col));
allColumns.unshift(groupCol);
});
}
}
if (adaptable.api.gridApi.isTreeDataGrid() &&
!allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
allColumns.unshift(generateAutoTreeSingleColumn());
}
if (hasSelectionColumn) {
allColumns.unshift(generateSelectionColumn());
}
const colIdToCol = allColumns.reduce((acc, col) => {
if (col) {
acc[col.columnId] = col;
}
return acc;
}, {});
let TableColumns = layout.TableColumns;
if (hasSelectionColumn && !TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
TableColumns = [AG_GRID_SELECTION_COLUMN, ...TableColumns];
}
const ColumnOrderAllColumns = ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
const currentOrder = searchInputValue
? ColumnOrderAllColumns.filter((col) => {
return columnFilter(col, searchInputValue);
})
: ColumnOrderAllColumns;
const currentOrderIds = currentOrder.map((col) => col.columnId);
const handleColumnsChange = (newColumns) => {
if (searchInputValue) {
const newOrder = sortColumnIdsByOrder(ColumnOrderAllColumns.map((col) => col.columnId), newColumns.map((col) => col.columnId));
newColumns = newOrder.map((colId) => colIdToCol[colId]);
}
const oldColumns = ColumnOrderAllColumns;
const columnIds = newColumns.map((col) => col.columnId);
if (!isValidOrderForColumnGroups({ oldColumns, newColumns })) {
return;
}
const ColumnVisibility = { ...layout.ColumnVisibility };
const columnOrderSet = new Set(TableColumns);
columnIds.forEach((colId) => {
if (!columnOrderSet.has(colId)) {
ColumnVisibility[colId] = false;
}
});
onChange({
...layout,
TableColumns: columnIds,
ColumnVisibility,
});
};
const handleColumnVisibilityChange = (columnId, visible) => {
const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
const columnIdSet = new Set(columnIdArray);
const ColumnVisibility = { ...layout.ColumnVisibility };
let newTableColumns = [...TableColumns];
if (visible) {
columnIdArray.forEach((colId) => {
delete ColumnVisibility[colId];
});
}
else {
columnIdArray.forEach((colId) => {
ColumnVisibility[colId] = false;
});
}
const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
const columnOrderSet = new Set(newTableColumns);
const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
if (!currentColumnIdsAreIncluded) {
const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
newTableColumns = columnIds.filter((colId) => {
const isCurrent = columnOrderSet.has(colId);
if (isCurrent) {
return true;
}
const shouldInclude = idsToIndexes.get(colId) <= biggestIndex;
if (shouldInclude) {
if (!columnIdSet.has(colId) && visible) {
ColumnVisibility[colId] = false;
}
}
return shouldInclude;
});
}
onChange({
...layout,
TableColumns: newTableColumns,
ColumnVisibility,
});
};
const handleColumnNameChange = (columnId, headerName) => {
onChange({
...layout,
ColumnHeaders: {
...layout.ColumnHeaders,
[columnId]: headerName,
},
});
};
const resolveDefaultWidth = React.useCallback((columnId) => adaptable.getDefaultColumnWidthForCol(columnId), [adaptable]);
const handlePinChange = (columnId, pinning) => {
onChange(applyColumnPinChange(layout, columnId, pinning));
};
const handleColumnSizingChange = (columnId, field, value) => {
onChange(applyColumnSizingFieldChange(layout, columnId, field, value, resolveDefaultWidth));
};
const handleSortChange = (columnId, sortOrder) => {
onChange(applyColumnSortChange(layout, columnId, sortOrder));
};
const parseNumberInput = (value) => {
const parsed = parseFloat(value);
return typeof parsed === 'number' && !isNaN(parsed) ? parsed : undefined;
};
const visibleIds = layout.TableColumns.filter((colId) => {
return (layout.ColumnVisibility?.[colId] !== false &&
adaptable.api.columnApi.isSelectionColumn(colId) === false &&
!adaptable.api.columnApi.internalApi.isColumnUIHidden(colId));
});
const currentlyDisplayedColumnIds = searchInputValue
? currentOrder
.filter((col) => currentOrderIds.includes(col.columnId))
.map((col) => col.columnId)
: currentOrder.map((col) => col.columnId);
const visibleIdsCurrentlyDisplayed = visibleIds.filter((colId) => currentlyDisplayedColumnIds.includes(colId));
const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'order', isColumnsSectionConfigured(layout));
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
const orderSummaryColumnIds = layout.TableColumns ?? [];
const orderSummary = orderSummaryColumnIds.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: orderSummaryColumnIds.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout) }, columnId))) })) : (_jsx(Tag, { children: "No columns" }));
return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('order', { fillAvailable: true }), surface: "panel", "data-name": "column-order", title: "Visibility and Order", help: "Drag to reorder, use checkboxes to show or hide columns; click a column to inspect", collapsedHelp: "", compactSummary: renderCompactColumnTags(orderSummaryColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout), { emptyLabel: 'No columns' }), summary: orderSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:flex twa:flex-col twa:p-1 twa:overflow-y-hidden", children: _jsxs(Box, { className: "twa:flex-1 twa:min-h-0 twa:gap-2 twa:grid twa:grid-cols-2", children: [_jsx(Card, { className: "twa:h-full twa:min-h-0 twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:px-1 twa:pt-1 twa:overflow-y-hidden", children: _jsx(Box, { className: "twa:gap-2 twa:focus:outline-none twa:flex-1 twa:max-h-full twa:h-full", "data-name": "columns-container", tabIndex: -1, onKeyDown: (event) => {
const scrollIntoView = (columnId) => {
const el = event.currentTarget.querySelector(`[data-id="${columnId}"]`);
el?.scrollIntoView({ block: 'nearest' });
const input = el?.querySelector('input[type="checkbox"]');
input?.focus();
};
if (event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
if (index === -1) {
return;
}
const nextColumnId = currentlyDisplayedColumnIds[index + 1];
const nextColumn = colIdToCol[nextColumnId];
if (nextColumn) {
setSelectedColumnId(nextColumn.columnId);
scrollIntoView(nextColumn.columnId);
}
}
if (event.key === 'ArrowUp') {
event.preventDefault();
event.stopPropagation();
const index = currentlyDisplayedColumnIds.indexOf(selectedColumnId);
if (index === -1) {
return;
}
const previousColumnId = currentlyDisplayedColumnIds[index - 1];
const previousColumn = colIdToCol[previousColumnId];
if (previousColumn) {
setSelectedColumnId(previousColumn.columnId);
scrollIntoView(previousColumn.columnId);
}
}
if (event.key === ' ') {
const target = event.target;
if (target.tagName === 'INPUT' &&
target.type === 'checkbox') {
return;
}
event.preventDefault();
event.stopPropagation();
const selectedColumn = colIdToCol[selectedColumnId];
if (!selectedColumn) {
return;
}
const visible = isColumnVisible({ columnId: selectedColumnId, layout });
handleColumnVisibilityChange(selectedColumnId, !visible);
}
}, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full", children: [_jsxs(Flex, { alignItems: "center", className: cn(LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, 'twa:font-bold twa:shrink-0', 'twa:border-b twa:border-primarydark/30 twa:pb-1'), children: [_jsx(CheckBox, { className: "twa:shrink-0", checked: currentlyDisplayedColumnIds.length
? currentlyDisplayedColumnIds.length ===
visibleIdsCurrentlyDisplayed.length
? true
: visibleIdsCurrentlyDisplayed.length
? null
: false
: false, onChange: (checked) => {
handleColumnVisibilityChange(currentlyDisplayedColumnIds, checked);
}, children: "Select All" }), _jsx(Box, { className: "twa:flex-1 twa:min-w-0" }), _jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS })] }), _jsx(ReorderDraggable, { className: "twa:flex-1 twa:min-h-0 twa:overflow-y-auto", toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
return option.moveable;
}, optionClassName: (option) => {
const baseCls = 'ab-Layout-Wizard__ColumnRow twa:cursor-pointer twa:rounded-standard';
if (selectedColumnId !== option.columnId) {
return baseCls;
}
return cn(baseCls, 'twa:after:border-accent twa:relative twa:after:border-2 twa:after:rounded-standard twa:after:pointer-events-none twa:after:inset-0 twa:after:absolute twa:after:bg-accent/15');
}, order: currentOrder, onOptionClick: (option, event) => {
if (event.ctrlKey || option.columnId === selectedColumnId) {
setSelectedColumnId(null);
}
else {
setSelectedColumnId(option.columnId);
const row = event.target.closest?.(`[data-id="${option.columnId}"]`);
const input = row?.querySelector('input[type="checkbox"]');
input?.focus();
}
}, renderOption: (option) => {
return (_jsx(ColumnRow, { onColumnVisibilityChange: handleColumnVisibilityChange, onCheckboxFocus: setSelectedColumnId, layout: layout, column: option }));
}, onChange: handleColumnsChange })] }) }) }) }), currentOrderIds.length ? (_jsx(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
? colIdToCol[selectedColumnId] ?? null
: null, layout: layout, columnSortsEnabled: layoutSupportedFeatures.ColumnSorts, resolveDefaultWidth: resolveDefaultWidth, onColumnNameChange: handleColumnNameChange, onPinChange: handlePinChange, onColumnSizingChange: handleColumnSizingChange, onSortChange: handleSortChange, parseNumberInput: parseNumberInput })) : null] }) }), _jsx(ColumnPinningWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), _jsx(ColumnSizingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard }), layoutSupportedFeatures.ColumnSorts ? (_jsx(ColumnSortingWizardCard, { layout: layout, onChange: onChange, bindCard: bindCard })) : null] }));
};
const hr = (_jsx("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-input-border/50 twa:border-none" }));
const columnInspectorLabelClass = 'twa:text-3 twa:opacity-70 twa:shrink-0';
const columnInspectorInputClass = 'ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:!min-h-0 twa:text-3 twa:min-w-0 twa:flex-1';
const ColumnPropertiesEditor = (props) => {
const adaptable = useAdaptable();
const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
if (!props.column) {
return (_jsx(Box, { className: cn(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
}
const { column } = props;
const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
const sizing = props.layout.ColumnSizing?.[column.columnId];
const displayValues = getExplicitSizingDisplayValues(column.columnId, sizing, props.resolveDefaultWidth);
const resizable = column.resizable !== false;
const columnPinning = props.layout.ColumnPinning?.[column.columnId];
const currentPin = columnPinning === 'left' || columnPinning === 'right' ? columnPinning : 'None';
const currentSort = getColumnSortSelection(props.layout, column.columnId);
const columnVisible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
const orderedColumnIds = getLayoutWizardOrderedColumns(adaptable, props.layout).map((col) => col.columnId);
const positionIndex = orderedColumnIds.indexOf(column.columnId);
const position = columnVisible && positionIndex >= 0 ? String(positionIndex + 1) : '';
const inspectorFieldGridClass = 'twa:grid twa:grid-cols-[max-content_1fr_max-content_1fr] twa:gap-x-2 twa:gap-y-2 twa:items-center';
return (_jsxs(Box, { className: cn(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-background twa:shadow-md', 'twa:max-h-full twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-3 twa:font-medium twa:leading-snug ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:mt-3 twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), _jsxs(Box, { className: "twa:mt-1 twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Data Type:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.dataType })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3 twa:mt-3", children: [_jsx(Box, { className: "twa:text-3 twa:font-medium twa:mb-2", children: "Column Properties" }), _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:p-3 twa:rounded-standard twa:bg-background twa:border twa:border-foreground/10", children: [_jsxs(Box, { className: inspectorFieldGridClass, children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Header" }), _jsx(Input, { "data-name": "column-header", className: cn(columnInspectorInputClass, 'twa:col-span-3'), placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: (event) => {
props.onColumnNameChange(props.column.columnId, event.target.value);
}, value: customHeader }), _jsx(Box, { className: columnInspectorLabelClass, children: "Width" }), _jsx(Input, { "data-name": `column-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
props.onColumnSizingChange(column.columnId, 'width', props.parseNumberInput(event.target.value));
}, value: displayValues.width ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Flex" }), _jsx(Input, { "data-name": `column-flex-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
props.onColumnSizingChange(column.columnId, 'flex', props.parseNumberInput(event.target.value));
}, value: displayValues.flex ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Min" }), _jsx(Input, { "data-name": `column-min-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
props.onColumnSizingChange(column.columnId, 'minWidth', props.parseNumberInput(event.target.value));
}, value: displayValues.minWidth ?? '' }), _jsx(Box, { className: columnInspectorLabelClass, children: "Max" }), _jsx(Input, { "data-name": `column-max-width-${column.columnId}`, className: columnInspectorInputClass, type: "number", placeholder: "\u2014", disabled: !resizable, onChange: (event) => {
props.onColumnSizingChange(column.columnId, 'maxWidth', props.parseNumberInput(event.target.value));
}, value: displayValues.maxWidth ?? '' })] }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Pinning" }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: currentPin, name: `inspector-pinning-${column.columnId}`, onRadioChange: (value) => {
props.onPinChange(column.columnId, value === 'None' ? null : value);
}, children: COLUMN_PINNING_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-value": option.value, "data-name": `pinning-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] }), props.columnSortsEnabled ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Sorting" }), _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: currentSort, name: `inspector-sorting-${column.columnId}`, onRadioChange: (value) => {
props.onSortChange(column.columnId, value);
}, children: COLUMN_SORT_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, disabled: !column.sortable, "data-name": `inspector-sorting-${column.columnId}-${option.value}`, children: option.label }, option.value))) })] })) : null, _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Box, { className: columnInspectorLabelClass, children: "Position" }), _jsx(Box, { className: "twa:text-3", children: position || '—' })] }), _jsx(Box, { className: "twa:grid twa:grid-cols-3 twa:gap-2 twa:pt-2 twa:border-t twa:border-foreground/10", children: [
{ label: 'Hideable', checked: column.hideable },
{ label: 'Editable', checked: !column.readOnly },
{ label: 'Queryable', checked: column.queryable },
{ label: 'Exportable', checked: column.exportable },
{ label: 'Sortable', checked: column.sortable },
{ label: 'Aggregatable', checked: column.aggregatable },
{ label: 'Filterable', checked: column.filterable },
{ label: 'Groupable', checked: column.groupable },
{ label: 'Moveable', checked: column.moveable },
{ label: 'Pivotable', checked: column.pivotable },
{ label: 'Calculated', checked: column.isCalculatedColumn },
{ label: 'Free Text', checked: column.isFreeTextColumn },
].map(({ label, checked }) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1.5 twa:min-w-0", children: [_jsx(Box, { className: "twa:size-4 twa:shrink-0", children: checked ? (_jsx(Icon, { name: "check", className: "twa:text-success" })) : (_jsx(Icon, { name: "close", className: "twa:text-destructive" })) }), _jsx(Box, { className: "twa:text-3 twa:truncate", children: label })] }, label))) })] })] })] }));
};